/* POA v4 -- "Ledger & Blueprint" design system. Every color below is a token; the
   eight body[data-theme="..."] blocks are the only place any of them are set.
   Never hardcode a color in a component rule -- see dev/architecture/PRODUCT_BLUEPRINT.md
   §5.5. Ported from dev/mockups/design-concept-unified.html into a real stylesheet. */

:root, body[data-theme="blueprint_ink"]{
  color-scheme: dark;
  --ink:#10161b; --surface:#161e25; --surface2:#1c2730; --surface3:#24313b;
  --line:#2b3944; --line-soft:#212c34;
  --paper:#f3ecd9; --paper-line:#d9cfae; --paper-text:#2a2415;
  --blueprint:#4fb3ac; --blueprint-dim:#33726d; --on-blueprint:#08211e;
  --brass:#c8933f; --brass-dim:#8a6329; --on-brass:#2a1a04;
  --text:#eaf0ee; --text-dim:#a9bcb8; --muted:#74898a;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#8a71d6; --turnover:#3f9fb8;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234fb3ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="ledger_paper"]{
  color-scheme: light;
  --ink:#f4efe1; --surface:#fffdf7; --surface2:#f6f0e2; --surface3:#ece2c9;
  --line:#ddd0ab; --line-soft:#e7dcc0;
  --paper:#fffdf7; --paper-line:#ddd0ab; --paper-text:#2a2415;
  --blueprint:#2b7d78; --blueprint-dim:#1f5b57; --on-blueprint:#f4efe1;
  --brass:#a8681f; --brass-dim:#7c4c17; --on-brass:#fdf6e8;
  --text:#241f14; --text-dim:#5b5138; --muted:#8a8064;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#6d4fc4; --turnover:#227087;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232b7d78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="verdigris"]{
  color-scheme: dark;
  --ink:#0d1613; --surface:#131f1b; --surface2:#182922; --surface3:#1f342c;
  --line:#2a4038; --line-soft:#203029;
  --paper:#e9e6d4; --paper-line:#cfc9a8; --paper-text:#25271a;
  --blueprint:#4fb08a; --blueprint-dim:#357560; --on-blueprint:#062017;
  --brass:#b57a4a; --brass-dim:#7d5330; --on-brass:#241505;
  --text:#e6efe9; --text-dim:#a4bcae; --muted:#6d8a7c;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#8a71d6; --turnover:#3f9fb8;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234fb08a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="midnight_survey"]{
  color-scheme: dark;
  --ink:#0b0f1c; --surface:#121729; --surface2:#171d33; --surface3:#1f2740;
  --line:#2a3350; --line-soft:#1d2438;
  --paper:#e8ecf5; --paper-line:#c9d1e3; --paper-text:#1b2233;
  --blueprint:#5b8cf0; --blueprint-dim:#3d5fa8; --on-blueprint:#08101f;
  --brass:#d0a34c; --brass-dim:#93712f; --on-brass:#241703;
  --text:#e9edf7; --text-dim:#a6b0cc; --muted:#6d7796;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#8a71d6; --turnover:#3f9fb8;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b8cf0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="terracotta_deed"]{
  color-scheme: light;
  --ink:#f7ede1; --surface:#fffaf2; --surface2:#f4e6d3; --surface3:#e9d3b6;
  --line:#dcbd93; --line-soft:#e6d0ac;
  --paper:#fffaf2; --paper-line:#dcbd93; --paper-text:#3a2414;
  --blueprint:#3c7a72; --blueprint-dim:#2a5851; --on-blueprint:#f7ede1;
  --brass:#bf5f2e; --brass-dim:#8c4520; --on-brass:#fdf1e6;
  --text:#3a2414; --text-dim:#6e5138; --muted:#96795c;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#6d4fc4; --turnover:#227087;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233c7a72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="slate_contrast"]{
  color-scheme: dark;
  --ink:#08090b; --surface:#101216; --surface2:#161a1f; --surface3:#1e242b;
  --line:#333c45; --line-soft:#242b32;
  --paper:#f0ede3; --paper-line:#cfc9ba; --paper-text:#1a1a17;
  --blueprint:#5ec4ff; --blueprint-dim:#2f88c2; --on-blueprint:#04141f;
  --brass:#ffb136; --brass-dim:#b87d17; --on-brass:#231400;
  --text:#f5f7f9; --text-dim:#c3ccd4; --muted:#8b96a1;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#a48bf0; --turnover:#54b8d1;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235ec4ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="inbox_light"]{
  color-scheme: light;
  --ink:#ffffff; --surface:#ffffff; --surface2:#f6f8fc; --surface3:#eef1f6;
  --line:#dadce0; --line-soft:#e8eaed;
  --paper:#fbfbfa; --paper-line:#e0e0e0; --paper-text:#202124;
  --blueprint:#1a73e8; --blueprint-dim:#174ea6; --on-blueprint:#ffffff;
  --brass:#ea4335; --brass-dim:#b0281a; --on-brass:#ffffff;
  --text:#202124; --text-dim:#5f6368; --muted:#80868b;
  --good:#4f9d6f; --warn:#d1a13c; --critical:#c85c4f;
  --subsidy:#6d4fc4; --turnover:#227087;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="emerald_horizon"]{
  color-scheme: dark;
  --ink:#090d0b; --surface:#0f1713; --surface2:#15221b; --surface3:#1c2d24;
  --line:#22362b; --line-soft:#182820;
  --paper:#e2d9bc; --paper-line:#b8ab88; --paper-text:#171a14;
  --blueprint:#10b981; --blueprint-dim:#059669; --on-blueprint:#042318;
  --brass:#e2d9bc; --brass-dim:#b5a477; --on-brass:#1a160d;
  --text:#f1f5f3; --text-dim:#8ea396; --muted:#5f7568;
  --good:#10b981; --warn:#f59e0b; --critical:#ef4444;
  --subsidy:#8b5cf6; --turnover:#06b6d4;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="obsidian_gold"]{
  color-scheme: dark;
  --ink:#08090a; --surface:#111417; --surface2:#181c21; --surface3:#22272e;
  --line:#2e353e; --line-soft:#1d2228;
  --paper:#fdf6e6; --paper-line:#d8c396; --paper-text:#231a08;
  --blueprint:#f59e0b; --blueprint-dim:#d97706; --on-blueprint:#1f1300;
  --brass:#fcd34d; --brass-dim:#f59e0b; --on-brass:#1c1200;
  --text:#f8fafc; --text-dim:#cbd5e1; --muted:#94a3b8;
  --good:#10b981; --warn:#f59e0b; --critical:#ef4444;
  --subsidy:#8b5cf6; --turnover:#06b6d4;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="cyberpunk_neon"]{
  color-scheme: dark;
  --ink:#0a0612; --surface:#120c22; --surface2:#1a1230; --surface3:#251a44;
  --line:#3c286d; --line-soft:#291b4c;
  --paper:#f8ecff; --paper-line:#d2a8f8; --paper-text:#1d082e;
  --blueprint:#00f0ff; --blueprint-dim:#00a3ad; --on-blueprint:#001e22;
  --brass:#ff0055; --brass-dim:#bf0040; --on-brass:#ffffff;
  --text:#f3e8ff; --text-dim:#c084fc; --muted:#9333ea;
  --good:#00ff66; --warn:#ffb700; --critical:#ff0055;
  --subsidy:#a855f7; --turnover:#00f0ff;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="tokyo_night"]{
  color-scheme: dark;
  --ink:#0c101c; --surface:#151a2e; --surface2:#1c233d; --surface3:#252e50;
  --line:#323f6d; --line-soft:#212a49;
  --paper:#e3e8f8; --paper-line:#b3c0e8; --paper-text:#101524;
  --blueprint:#7aa2f7; --blueprint-dim:#4a74cc; --on-blueprint:#060d1f;
  --brass:#f7768e; --brass-dim:#c94f65; --on-brass:#ffffff;
  --text:#c0caf5; --text-dim:#9aa5ce; --muted:#565f89;
  --good:#9ece6a; --warn:#e0af68; --critical:#f7768e;
  --subsidy:#bb9af7; --turnover:#7dcfff;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237aa2f7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="amazon_prime"]{
  color-scheme: light;
  --ink:#f7f4ec; --surface:#ffffff; --surface2:#fbf8f1; --surface3:#f2ebd9;
  --line:#e2d7c0; --line-soft:#ede6d6;
  --paper:#ffffff; --paper-line:#e2d7c0; --paper-text:#16191f;
  --blueprint:#e47911; --blueprint-dim:#b85d06; --on-blueprint:#ffffff;
  --brass:#007185; --brass-dim:#004b57; --on-brass:#ffffff;
  --text:#1a1a1a; --text-dim:#595959; --muted:#888888;
  --good:#067d62; --warn:#e47911; --critical:#c40000;
  --subsidy:#795290; --turnover:#007185;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e47911' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="newegg_tech"]{
  color-scheme: light;
  --ink:#f6f3ea; --surface:#ffffff; --surface2:#fcfaf4; --surface3:#eee7d5;
  --line:#ded5bf; --line-soft:#eae3d0;
  --paper:#ffffff; --paper-line:#ded5bf; --paper-text:#1d2129;
  --blueprint:#e85d04; --blueprint-dim:#ba4300; --on-blueprint:#ffffff;
  --brass:#005bb5; --brass-dim:#003e7e; --on-brass:#ffffff;
  --text:#1d2129; --text-dim:#5c6473; --muted:#8c96a8;
  --good:#16a34a; --warn:#e85d04; --critical:#dc2626;
  --subsidy:#7c3aed; --turnover:#0284c7;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e85d04' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
body[data-theme="autozone_speed"]{
  color-scheme: light;
  --ink:#f8f3eb; --surface:#ffffff; --surface2:#fbf7f0; --surface3:#eee3d2;
  --line:#ded0bb; --line-soft:#eadecb;
  --paper:#ffffff; --paper-line:#ded0bb; --paper-text:#221c18;
  --blueprint:#d91b24; --blueprint-dim:#a61017; --on-blueprint:#ffffff;
  --brass:#d97706; --brass-dim:#92400e; --on-brass:#ffffff;
  --text:#221c18; --text-dim:#63574d; --muted:#94877b;
  --good:#15803d; --warn:#d97706; --critical:#d91b24;
  --subsidy:#7c3aed; --turnover:#0891b2;
  --file-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d91b24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}

:root{
  --radius-sm:7px; --radius-md:10px; --radius-lg:14px;
  --serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans: -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}

/* ---------- Theme-adaptive Scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--line) 75%, var(--blueprint) 25%) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--line) 85%, var(--blueprint) 15%);
  border-radius: 99px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--blueprint) 70%, var(--line));
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- Theme-adaptive File Form Fields & Icon Button ---------- */
input[type="file"] {
  display: block;
  width: 100%;
  padding: 6px 9px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 7px);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 12px;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="file"]:hover,
input[type="file"]:focus {
  border-color: var(--blueprint);
}
input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 30px;
  margin-right: 12px;
  background-color: var(--surface);
  background-image: var(--file-icon);
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 13px 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  background-color: var(--surface3, var(--surface2));
  border-color: var(--blueprint);
  color: var(--blueprint);
}
input[type="file"]::-webkit-file-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 30px;
  margin-right: 12px;
  background-color: var(--surface);
  background-image: var(--file-icon);
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 13px 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.15s ease;
}
input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--surface3, var(--surface2));
  border-color: var(--blueprint);
  color: var(--blueprint);
}

/* ---------- Auth pages (login.php, setup.php) ---------- */
body.poa4-auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.poa4-auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 32px;max-width:420px;width:100%}
.poa4-brand{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--muted);margin-bottom:18px}
.poa4-brand span{color:var(--blueprint)}
.poa4-auth-card h1{font-family:var(--serif);font-size:22px;margin:0 0 8px}
.poa4-hint{color:var(--text-dim);font-size:12.5px;line-height:1.5;margin:0 0 18px}
.poa4-error{background:color-mix(in srgb, var(--critical) 14%, transparent);border:1px solid var(--critical);color:var(--critical);border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;margin-bottom:16px}
.poa4-auth-card form label{display:block;font-size:12px;color:var(--text-dim);font-weight:600;margin-bottom:12px}
.poa4-auth-card form input[type="text"],.poa4-auth-card form input:not([type="checkbox"]){width:100%;margin-top:5px;padding:9px 11px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-size:13.5px;font-family:var(--sans)}
.poa4-auth-card form input:focus{outline:none;border-color:var(--blueprint);box-shadow:0 0 0 3px color-mix(in srgb, var(--blueprint) 18%, transparent)}
.poa4-auth-card small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.poa4-check{display:flex;align-items:center;gap:8px;flex-direction:row-reverse;justify-content:flex-end}
.poa4-check input{width:auto!important;margin:0!important}
.poa4-button{background:var(--blueprint);color:var(--on-blueprint);border:none;border-radius:var(--radius-sm);padding:9px 16px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;line-height:1.3;box-sizing:border-box;transition:all .15s ease}
.poa4-button:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none;color:var(--on-blueprint)}
.poa4-button.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--line)}
.poa4-button.secondary:hover{border-color:var(--blueprint);color:var(--text)}
.poa4-button.brass{background:var(--brass);color:var(--on-brass)}
.poa4-button.brass:hover{color:var(--on-brass)}
.poa4-button.good{background:var(--good);color:#fff}
.poa4-button.good:hover{color:#fff}
.poa4-button.critical{background:var(--critical);color:#fff}
.poa4-button.critical:hover{color:#fff}
.poa4-button.danger-outline{background:color-mix(in srgb,var(--critical) 12%,var(--surface2));border:1px solid var(--critical);color:var(--critical)}
.poa4-button.danger-outline:hover{background:var(--critical);color:#fff;border-color:var(--critical)}
.poa4-button.sm, .poa4-btn-sm{padding:5px 10px;font-size:11.5px;border-radius:var(--radius-sm, 6px)}
.poa4-button.wide, .poa4-button.full{width:100%;justify-content:center}
.poa4-button:disabled, .poa4-button[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none;transform:none;filter:none}

.dt-table-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  color: var(--text);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: all 0.15s ease;
  line-height: 1.3;
  box-sizing: border-box;
}
.dt-table-action:hover {
  background: var(--surface3);
  border-color: var(--blueprint);
  color: var(--text);
  text-decoration: none;
}
.dt-table-action.good {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
}
.dt-table-action.good:hover {
  background: color-mix(in srgb, var(--good) 16%, var(--surface2));
  border-color: var(--good);
  color: var(--good);
}
.dt-table-action.critical {
  color: var(--critical);
  border-color: color-mix(in srgb, var(--critical) 40%, var(--line));
}
.dt-table-action.critical:hover {
  background: color-mix(in srgb, var(--critical) 16%, var(--surface2));
  border-color: var(--critical);
  color: var(--critical);
}
.dt-table-action.blueprint {
  color: var(--blueprint);
  border-color: color-mix(in srgb, var(--blueprint) 40%, var(--line));
}
.dt-table-action.blueprint:hover {
  background: color-mix(in srgb, var(--blueprint) 16%, var(--surface2));
  border-color: var(--blueprint);
  color: var(--blueprint);
}
.dt-table-action:disabled, .dt-table-action[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Link Utilities */
.poa4-link {
  color: var(--blueprint);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease, text-decoration 0.12s ease;
}
.poa4-link:hover {
  text-decoration: underline;
  color: var(--blueprint);
}
.poa4-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blueprint);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 12px;
  transition: transform 0.12s ease, color 0.12s ease;
}
.poa4-back-link:hover {
  transform: translateX(-2px);
  color: var(--blueprint);
  text-decoration: none;
}

/* Responsive Table Wrapper */
.poa4-table-wrap {
  overflow-x: auto;
  width: 100%;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

/* ---------- App shell ---------- */
.poa4-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
nav.poa4-side{background:var(--surface);border-right:1px solid var(--line);padding:20px 13px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--line) 75%, var(--blueprint) 25%) transparent}
nav.poa4-side::-webkit-scrollbar{width:5px}
nav.poa4-side::-webkit-scrollbar-track{background:transparent}
nav.poa4-side::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--line) 80%, var(--blueprint) 20%);border-radius:99px}
nav.poa4-side::-webkit-scrollbar-thumb:hover{background:var(--blueprint)}
.poa4-policy-perms-scroll{max-height:138px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--line) 80%, var(--blueprint) 20%) transparent}
.poa4-policy-perms-scroll::-webkit-scrollbar{width:5px}
.poa4-policy-perms-scroll::-webkit-scrollbar-track{background:transparent}
.poa4-policy-perms-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--line) 80%, var(--blueprint) 20%);border-radius:99px}
.poa4-policy-perms-scroll::-webkit-scrollbar-thumb:hover{background:var(--blueprint)}
.poa4-side-brand{display:flex;align-items:center;gap:9px;padding:0 6px}
.poa4-side-mark{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--blueprint),var(--blueprint-dim));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:var(--on-blueprint);font-size:14px;flex:none}
.poa4-side-name{font-family:var(--serif);font-size:15px;font-weight:600}
.poa4-side-name small{display:block;font-family:var(--sans);font-size:9.5px;color:var(--blueprint);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.poa4-nav-group .label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:0 10px;margin:10px 0 6px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.poa4-nav-group.fav-group{background:color-mix(in srgb, var(--brass) 6%, transparent);border:1px solid color-mix(in srgb, var(--brass) 20%, transparent);border-radius:var(--radius-sm);padding:6px 4px 8px;margin-bottom:8px}
.poa4-nav-group.fav-group .label{color:var(--brass);margin-top:2px}
.poa4-nav-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);font-size:12.5px;color:var(--text-dim);transition:background .12s, color .12s}
.poa4-nav-link .n{display:flex;align-items:center;gap:9px}
.poa4-nav-link .ic{width:18px;text-align:center;font-size:13.5px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.95}
.poa4-nav-link:hover{background:var(--surface3);color:var(--text)}
.poa4-nav-link.active{background:color-mix(in srgb, var(--blueprint) 14%, transparent);border:1px solid color-mix(in srgb, var(--blueprint) 40%, transparent);color:var(--blueprint);font-weight:700}
.poa4-nav-link.active .ic{opacity:1;transform:scale(1.08)}
.poa4-nav-badge{background:var(--critical);color:#fff;font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 6px}
.poa4-side-user{margin-top:auto;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 11px;display:flex;align-items:center;gap:9px}
.poa4-side-user .av{width:28px;height:28px;border-radius:99px;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--blueprint);flex:none}
.poa4-side-user .name{font-size:11.5px;font-weight:700}
.poa4-side-user .pill{font-size:9px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb, var(--blueprint) 16%, transparent);color:var(--blueprint);font-weight:700}

/* ---------- Tooltip Popup for Nav Items ---------- */
.poa4-tooltip-popup {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: var(--surface2);
  border: 1px solid color-mix(in srgb, var(--blueprint) 45%, var(--line));
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: 8px 12px;
  max-width: 320px;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-50%) translateX(-6px) scale(0.96);
  transition: opacity 0.14s cubic-bezier(0.16, 1, 0.3, 1), transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.poa4-tooltip-popup.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}
.poa4-tooltip-popup .tt-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--blueprint);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.poa4-tooltip-popup .tt-desc {
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.4;
}
.poa4-tooltip-popup .tt-arrow {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--surface2);
  border-left: 1px solid color-mix(in srgb, var(--blueprint) 45%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--blueprint) 45%, var(--line));
  transform: rotate(45deg);
  left: -4.5px;
  top: 50%;
  margin-top: -3.5px;
}

/* Topbar & Favorites Bar */
main.poa4-main{padding:0}
.poa4-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--line);background:var(--surface)}
.poa4-org-name{font-family:var(--serif);font-size:16px}
.poa4-org-sub{color:var(--muted);font-size:12px}

/* Horizontal Pill Bar for Favorites */
.poa4-pill-bar{display:flex;align-items:center;gap:8px;padding:8px 32px;background:var(--surface2);border-bottom:1px solid var(--line);overflow-x:auto}
.poa4-pill-bar-label{font-size:10.5px;font-weight:800;color:var(--brass);letter-spacing:.05em;display:flex;align-items:center;gap:4px;white-space:nowrap;margin-right:4px}
.poa4-fav-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:600;color:var(--text-dim);white-space:nowrap;transition:all .12s ease}
.poa4-fav-pill:hover{border-color:var(--blueprint);color:var(--text);background:var(--surface3)}
.poa4-fav-pill.active{background:color-mix(in srgb, var(--blueprint) 16%, transparent);border-color:var(--blueprint);color:var(--blueprint);font-weight:700}

/* Topbar Dropdown Favorites Menu */
.poa4-fav-dropdown{position:relative}
.poa4-fav-dropdown-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid color-mix(in srgb, var(--brass) 40%, transparent);color:var(--brass);font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--sans)}
.poa4-fav-dropdown-btn:hover{background:var(--surface3);border-color:var(--brass)}
.poa4-fav-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:100;padding:6px;flex-direction:column;gap:2px}
.poa4-fav-dropdown.open .poa4-fav-menu{display:flex}
.poa4-fav-menu a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);font-size:12px;color:var(--text-dim)}
.poa4-fav-menu a:hover{background:var(--surface2);color:var(--text)}

.poa4-content{padding:26px 32px 60px;max-width:1180px}
.poa4-content h1{font-family:var(--serif);font-size:23px;margin:0 0 4px}
.poa4-content .sub{color:var(--text-dim);font-size:13px;margin:0 0 22px}

.poa4-flash{padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:18px}
.poa4-flash.ok{background:color-mix(in srgb, var(--good) 14%, transparent);border:1px solid var(--good);color:var(--good)}
.poa4-flash.error{background:color-mix(in srgb, var(--critical) 14%, transparent);border:1px solid var(--critical);color:var(--critical)}

/* ---------- Shared components (KPIs, panels, tables, pills) ---------- */
.poa4-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:26px}
.poa4-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px 17px;position:relative;overflow:hidden}
.poa4-kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blueprint),transparent);opacity:.7}
.poa4-kpi.gold::after{background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.poa4-kpi .k-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;font-weight:700}
.poa4-kpi .k-value{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:23px;font-weight:800}
.poa4-kpi .k-sub{font-size:11.5px;color:var(--text-dim);margin-top:4px}

.poa4-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:22px;padding:20px 22px}
.poa4-panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.poa4-panel-head h2{font-family:var(--serif);font-size:16px;margin:0;font-weight:600}
.poa4-panel-head small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px;font-family:var(--sans)}
.poa4-panel-head select, .poa4-select, .poa4-input, .poa4-textarea {
  padding: 6px 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.poa4-panel-head select, .poa4-select {
  cursor: pointer;
}
.poa4-panel-head select:focus, .poa4-select:focus, .poa4-input:focus, .poa4-textarea:focus {
  border-color: var(--blueprint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blueprint) 18%, transparent);
}
.poa4-panel-head select option, .poa4-select option {
  background: var(--surface2);
  color: var(--text);
}
.poa4-input::placeholder, .poa4-textarea::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.poa4-placeholder{border:1px dashed var(--line);border-radius:var(--radius-md);padding:40px 24px;text-align:center;color:var(--muted)}
.poa4-placeholder .tag{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--brass);background:color-mix(in srgb, var(--brass) 16%, transparent);border-radius:6px;padding:3px 10px;margin-bottom:12px}
.poa4-placeholder h2{font-family:var(--serif);color:var(--text);font-size:18px;margin:0 0 8px}
.poa4-placeholder p{max-width:520px;margin:0 auto;font-size:13px;line-height:1.6}

/* Custom Fields (Properties/Units/Residents) -- shared baseline so
   poa4_render_custom_field_inputs()'s output looks consistent everywhere it lands,
   regardless of whether the page around it uses inline styles (properties.php) or
   its own local <style> block (units.php/residents.php). */
.poa4-cf-field{display:block;margin-bottom:12px;font-size:12px;color:var(--text-dim);font-weight:600}
.poa4-cf-field input[type=text],.poa4-cf-field input[type=number],.poa4-cf-field input[type=file],.poa4-cf-field select{display:block;margin-top:5px;width:100%;padding:8px;background:var(--surface2);border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:inherit;box-sizing:border-box}
.poa4-cf-field input[type=checkbox]{margin-top:5px}
.poa4-cf-field .poa4-cf-current{font-size:12px;margin-top:4px;font-weight:400;color:var(--text-dim)}
.poa4-cf-current a{color:var(--blueprint)}
.poa4-cf-current label{font-weight:400;margin-left:4px}

table.poa4-table{width:100%;border-collapse:collapse}
table.poa4-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line-soft);font-weight:700}
table.poa4-table td{padding:11px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
table.poa4-table tr:last-child td{border-bottom:none}
table.poa4-table tbody tr{transition:background .12s ease}
table.poa4-table tbody tr:hover td{background:color-mix(in srgb, var(--blueprint) 4%, transparent)}

.poa4-pill{font-size:10px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;white-space:nowrap;line-height:1.3}
.poa4-pill-owner{background:color-mix(in srgb, var(--brass) 16%, transparent);border-color:var(--brass);color:var(--brass)}
.poa4-pill-admin{background:color-mix(in srgb, var(--blueprint) 16%, transparent);border-color:var(--blueprint);color:var(--blueprint)}
.poa4-pill-mid{background:color-mix(in srgb, var(--blueprint-dim) 20%, transparent);border-color:var(--blueprint-dim);color:var(--blueprint-dim)}
.poa4-pill-staff{background:color-mix(in srgb, var(--text) 8%, transparent);border-color:var(--line);color:var(--text-dim)}
.poa4-pill-good{background:color-mix(in srgb, var(--good) 16%, transparent);border-color:color-mix(in srgb, var(--good) 40%, transparent);color:var(--good)}
.poa4-pill-warn{background:color-mix(in srgb, var(--warn) 16%, transparent);border-color:color-mix(in srgb, var(--warn) 40%, transparent);color:var(--warn)}
.poa4-pill-critical{background:color-mix(in srgb, var(--critical) 16%, transparent);border-color:color-mix(in srgb, var(--critical) 40%, transparent);color:var(--critical)}
.poa4-pill-blueprint{background:color-mix(in srgb, var(--blueprint) 16%, transparent);border-color:color-mix(in srgb, var(--blueprint) 40%, transparent);color:var(--blueprint)}
.poa4-pill-brass{background:color-mix(in srgb, var(--brass) 16%, transparent);border-color:color-mix(in srgb, var(--brass) 40%, transparent);color:var(--brass)}
.poa4-pill-muted{background:color-mix(in srgb, var(--text) 8%, transparent);border-color:var(--line);color:var(--muted)}

.ann-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;line-height:1.3;flex-shrink:0}

/* ---------- Settings & Preferences Component System ---------- */
.poa4-settings-grid{display:grid;grid-template-columns:1fr;gap:24px}
.poa4-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.poa4-theme-card{background:var(--surface2);border:2px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;gap:8px;position:relative}
.poa4-theme-card:hover{border-color:var(--blueprint);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.poa4-theme-card.active{border-color:var(--blueprint);background:color-mix(in srgb, var(--blueprint) 10%, var(--surface2));box-shadow:0 0 0 1px var(--blueprint)}
.poa4-theme-card-head{display:flex;justify-content:space-between;align-items:center}
.poa4-theme-title{font-size:13.5px;font-weight:700;color:var(--text)}
.poa4-theme-cat{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface);padding:2px 6px;border-radius:4px;border:1px solid var(--line)}
.poa4-theme-swatches{display:flex;gap:6px;align-items:center;margin:4px 0}
.poa4-theme-dot{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:inline-block}
.poa4-theme-desc{font-size:11px;color:var(--text-dim);line-height:1.4}

/* Favorites Builder */
.poa4-fav-builder{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.poa4-fav-list{display:flex;flex-direction:column;gap:6px;min-height:40px}
.poa4-fav-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--line);padding:9px 12px;border-radius:var(--radius-sm);cursor:grab}
.poa4-fav-item:active{cursor:grabbing;opacity:.7}
.poa4-fav-item-left{display:flex;align-items:center;gap:9px}
.poa4-fav-item-handle{color:var(--muted);font-size:13px;user-select:none}
.poa4-fav-item-title{font-size:12.5px;font-weight:600;color:var(--text)}
.poa4-fav-item-actions{display:flex;align-items:center;gap:6px}
.poa4-fav-btn-action{background:transparent;border:1px solid var(--line);color:var(--text-dim);border-radius:4px;width:24px;height:24px;display:grid;place-items:center;font-size:11px;cursor:pointer}
.poa4-fav-btn-action:hover{border-color:var(--critical);color:var(--critical)}
.poa4-fav-add-bar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.poa4-fav-add-bar select{flex:1;min-width:200px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);padding:8px 12px;font-size:12.5px;font-family:var(--sans)}

/* Form utilities & Subcards */
.poa4-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.poa4-form-group{display:flex;flex-direction:column;gap:6px}
.poa4-form-group label{font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.poa4-form-group input,.poa4-form-group select,.poa4-form-group textarea{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--sans);transition:border-color .15s ease,box-shadow .15s ease}
.poa4-form-group input:focus,.poa4-form-group select:focus,.poa4-form-group textarea:focus{outline:none;border-color:var(--blueprint);box-shadow:0 0 0 3px color-mix(in srgb, var(--blueprint) 18%, transparent)}
.poa4-form-group small{font-size:11px;color:var(--muted);margin-top:2px}
.poa4-subcard{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;margin-top:16px}
.poa4-subcard-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.poa4-subcard-desc{font-size:11.5px;color:var(--muted);margin-bottom:14px}

.poa4-sample-banner{display:flex;align-items:center;gap:14px;padding:11px 14px;margin:0 0 16px;border:1px solid var(--brass, #e5a50a);border-radius:8px;background:color-mix(in srgb, var(--brass, #f59e0b) 12%, transparent);color:var(--text);font-size:12px}.poa4-sample-banner b{color:var(--brass, #f5a60a);letter-spacing:.08em;font-size:11px;white-space:nowrap}.poa4-sample-banner a{color:inherit;font-weight:800}.poa4-sample-badge{display:inline-flex;align-items:center;margin-left:7px;padding:2px 7px;border:1px solid var(--brass, #e5a50a);border-radius:99px;background:color-mix(in srgb, var(--brass, #f59e0b) 14%, transparent);color:var(--brass, #f5a60a);font-size:9px;font-weight:900;letter-spacing:.06em;vertical-align:middle}@media(max-width:650px){.poa4-sample-banner{align-items:flex-start;flex-direction:column;gap:4px}}
.poa4-demo-banner{display:flex;align-items:center;gap:14px;padding:11px 14px;margin:0 0 16px;border:1px solid var(--blueprint, #4fb3ac);border-radius:8px;background:color-mix(in srgb, var(--blueprint, #4fb3ac) 14%, transparent);color:var(--text);font-size:12px}.poa4-demo-banner b{color:var(--blueprint, #4fb3ac);letter-spacing:.08em;font-size:11px;white-space:nowrap}.poa4-demo-banner span{flex:1}.poa4-demo-banner .poa4-button{padding:5px 12px;font-size:11px;white-space:nowrap;text-decoration:none}@media(max-width:650px){.poa4-demo-banner{align-items:flex-start;flex-direction:column;gap:8px}}

/* ---------- System Settings Cards ---------- */
.poa4-settings-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md,10px);padding:20px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.poa4-settings-card:hover{border-color:var(--blueprint);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.poa4-settings-card.gold{border-color:color-mix(in srgb, var(--brass) 40%, var(--line))}
.poa4-settings-card.gold:hover{border-color:var(--brass)}

/* ---------- Master Operations Calendar ---------- */
:root{
  --cal-movein:#10b981;
  --cal-moveout:#f59e0b;
  --cal-late:#ef4444;
  --cal-vendor:#3b82f6;
  --cal-tour:#8b5cf6;
  --cal-app:#06b6d4;
  --cal-invite:#a855f7;
  --cal-expire:#ec4899;
  --cal-custom:#14b8a6;
  --cal-turnover:#0ea5e9;
  --cal-violation:#f97316;
  --cal-eviction:#dc2626;
  --cal-sla:#d97706;
}
.poa4-cal-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.poa4-cal-kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm,8px);padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s ease}
.poa4-cal-kpi-card:hover{border-color:var(--blueprint);transform:translateY(-1px)}
.poa4-cal-kpi-icon{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.poa4-cal-kpi-val{font-size:15px;font-weight:800;font-family:var(--sans)}
.poa4-cal-kpi-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.poa4-cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm,8px);padding:10px 14px;margin-bottom:12px}
.poa4-cal-nav-group{display:flex;align-items:center;gap:8px}
.poa4-cal-nav-btn{background:var(--surface2);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:border-color .12s ease}
.poa4-cal-nav-btn:hover{border-color:var(--blueprint)}
.poa4-cal-current-label{font-size:16px;font-weight:800;font-family:var(--serif);margin-left:6px}
.poa4-cal-view-modes{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:2px;gap:2px}
.poa4-cal-view-btn{background:transparent;border:none;color:var(--text-dim);font-size:12px;font-weight:700;padding:5px 12px;border-radius:4px;cursor:pointer;font-family:var(--sans);transition:all .12s ease}
.poa4-cal-view-btn.active{background:var(--blueprint);color:var(--on-blueprint)}
.poa4-cal-chips-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.poa4-cal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:11.5px;color:var(--text-dim);cursor:pointer;user-select:none;transition:all .12s ease}
.poa4-cal-chip:hover{border-color:var(--blueprint);color:var(--text)}
.poa4-cal-chip.active{background:color-mix(in srgb, var(--blueprint) 12%, var(--surface2));border-color:var(--blueprint);color:var(--text);font-weight:700}
.poa4-cal-chip-dot{width:7px;height:7px;border-radius:99px;flex-shrink:0}
.poa4-cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--line);gap:1px;border:1px solid var(--line);border-radius:var(--radius-sm,8px);overflow:hidden}
.poa4-cal-grid-header{background:var(--surface2);padding:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.poa4-cal-cell{background:var(--surface);min-height:96px;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:background .12s ease}
.poa4-cal-cell:hover{background:var(--surface2)}
.poa4-cal-cell.today{background:color-mix(in srgb, var(--blueprint) 8%, var(--surface))}
.poa4-cal-cell.other-month{background:color-mix(in srgb, var(--surface) 60%, #000);opacity:.5}
.poa4-cal-cell-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:2px}
.poa4-cal-cell-num{font-family:var(--sans);font-weight:800;color:var(--text-dim)}
.poa4-cal-cell.today .poa4-cal-cell-num{color:var(--blueprint)}
.poa4-cal-cell-badges{display:flex;flex-direction:column;gap:3px;flex:1}
.poa4-cal-event-pill{display:block;font-size:10.5px;font-weight:700;padding:2px 5px;border-radius:3px;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;cursor:pointer;transition:filter .12s ease}
.poa4-cal-event-pill:hover{filter:brightness(1.15)}
.poa4-cal-pill-movein{background:color-mix(in srgb, var(--cal-movein) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-movein) 40%, transparent);color:var(--cal-movein)}
.poa4-cal-pill-moveout{background:color-mix(in srgb, var(--cal-moveout) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-moveout) 40%, transparent);color:var(--cal-moveout)}
.poa4-cal-pill-late{background:color-mix(in srgb, var(--cal-late) 22%, var(--surface2));border-color:color-mix(in srgb, var(--cal-late) 50%, transparent);color:var(--cal-late)}
.poa4-cal-pill-vendor{background:color-mix(in srgb, var(--cal-vendor) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-vendor) 40%, transparent);color:var(--cal-vendor)}
.poa4-cal-pill-tour{background:color-mix(in srgb, var(--cal-tour) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-tour) 40%, transparent);color:var(--cal-tour)}
.poa4-cal-pill-app{background:color-mix(in srgb, var(--cal-app) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-app) 40%, transparent);color:var(--cal-app)}
.poa4-cal-pill-invite{background:color-mix(in srgb, var(--cal-invite) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-invite) 40%, transparent);color:var(--cal-invite)}
.poa4-cal-pill-expire{background:color-mix(in srgb, var(--cal-expire) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-expire) 40%, transparent);color:var(--cal-expire)}
.poa4-cal-pill-custom{background:color-mix(in srgb, var(--cal-custom) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-custom) 40%, transparent);color:var(--cal-custom)}
.poa4-cal-pill-turnover{background:color-mix(in srgb, var(--cal-turnover) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-turnover) 40%, transparent);color:var(--cal-turnover)}
.poa4-cal-pill-violation{background:color-mix(in srgb, var(--cal-violation) 18%, var(--surface2));border-color:color-mix(in srgb, var(--cal-violation) 40%, transparent);color:var(--cal-violation)}
.poa4-cal-pill-eviction{background:color-mix(in srgb, var(--cal-eviction) 22%, var(--surface2));border-color:color-mix(in srgb, var(--cal-eviction) 50%, transparent);color:var(--cal-eviction)}
.poa4-cal-pill-sla{background:color-mix(in srgb, var(--cal-sla) 20%, var(--surface2));border-color:color-mix(in srgb, var(--cal-sla) 45%, transparent);color:var(--cal-sla)}
.poa4-cal-agenda{display:flex;flex-direction:column;gap:14px}
.poa4-cal-agenda-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm,8px);overflow:hidden}
.poa4-cal-agenda-day-title{background:var(--surface2);padding:9px 14px;font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.poa4-cal-agenda-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);gap:12px}
.poa4-cal-agenda-item:last-child{border-bottom:none}

/* Dashboard Operations Calendar Week Strip */
.dash-cal-header-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.dash-cal-week-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text-dim);background:var(--surface2);padding:4px 9px;border-radius:99px;border:1px solid var(--line)}
.dash-cal-week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:12px}
.dash-cal-day-col{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm,8px);padding:8px 6px;display:flex;flex-direction:column;min-height:130px;transition:border-color .15s ease,box-shadow .15s ease}
.dash-cal-day-col:hover{border-color:color-mix(in srgb,var(--blueprint) 50%,var(--line))}
.dash-cal-day-col.today{background:color-mix(in srgb,var(--blueprint) 8%,var(--surface2));border-color:var(--blueprint);box-shadow:0 0 0 1px var(--blueprint)}
.dash-cal-day-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:11px}
.dash-cal-day-name{font-weight:800;text-transform:uppercase;color:var(--muted);font-size:10px;letter-spacing:.04em}
.dash-cal-day-col.today .dash-cal-day-name{color:var(--blueprint)}
.dash-cal-day-num{font-weight:900;font-size:12.5px;color:var(--text);font-family:var(--sans)}
.dash-cal-day-col.today .dash-cal-day-num{color:var(--blueprint)}
.dash-cal-day-badge-today{font-size:8px;font-weight:900;color:var(--on-blueprint);background:var(--blueprint);padding:1px 4px;border-radius:3px;text-transform:uppercase}
.dash-cal-day-events{display:flex;flex-direction:column;gap:4px;flex:1}
.dash-cal-empty-day{display:flex;align-items:center;justify-content:center;flex:1;color:var(--muted);font-size:12px;opacity:.4}
.dash-cal-event-item{display:block;text-decoration:none;font-size:10.5px;padding:3px 6px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;line-height:1.3;transition:transform .1s ease,filter .1s ease}
.dash-cal-event-item:hover{transform:translateY(-1px);filter:brightness(1.15)}
.dash-cal-footer-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line);font-size:11px}
.dash-cal-summary-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;background:var(--surface2);border:1px solid var(--line);font-size:10.5px;color:var(--text-dim);text-decoration:none;font-weight:600}
.dash-cal-summary-chip.has-items{border-color:color-mix(in srgb,var(--blueprint) 40%,var(--line));color:var(--text);font-weight:700}
@media(max-width:960px){.dash-cal-week-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}

/* ==========================================================================
   STAFF TIME CLOCK, GPS TIMESHEETS & TOP-NAV QUICK WIDGET
   ========================================================================== */
:root {
  --tc-in: var(--good, #10b981);
  --tc-out: var(--critical, #ef4444);
  --tc-lunch: var(--warn, #f59e0b);
  --tc-break: var(--blueprint, #3b82f6);
  --tc-travel: #8b5cf6;
  --tc-ot: #ec4899;
}

/* Top Nav Time Clock Quick Widget Button */
.poa4-top-clock-wrapper { position: relative; display: inline-flex; align-items: center; }
.poa4-top-clock-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 7px);
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.poa4-top-clock-btn:hover {
  border-color: var(--blueprint);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blueprint) 25%, transparent);
}
.poa4-top-clock-btn.in {
  border-color: color-mix(in srgb, var(--tc-in) 40%, var(--line));
  background: color-mix(in srgb, var(--tc-in) 12%, var(--surface2));
  color: var(--text);
}
.poa4-top-clock-btn.in b { color: var(--tc-in); font-family: var(--mono, monospace); font-size: 12px; }
.poa4-top-clock-btn.lunch {
  border-color: color-mix(in srgb, var(--tc-lunch) 40%, var(--line));
  background: color-mix(in srgb, var(--tc-lunch) 12%, var(--surface2));
  color: var(--text);
}
.poa4-top-clock-btn.lunch b { color: var(--tc-lunch); font-family: var(--mono, monospace); font-size: 12px; }
.poa4-top-clock-btn.break {
  border-color: color-mix(in srgb, var(--tc-break) 40%, var(--line));
  background: color-mix(in srgb, var(--tc-break) 12%, var(--surface2));
  color: var(--text);
}
.poa4-top-clock-btn.break b { color: var(--tc-break); font-family: var(--mono, monospace); font-size: 12px; }
.poa4-top-clock-btn.out {
  border-color: var(--line);
  background: var(--surface2);
  color: var(--text-dim);
}

.poa4-clock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tc-in);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-in) 70%, transparent);
  animation: poaClockPulse 1.8s infinite;
}
.poa4-top-clock-btn.lunch .poa4-clock-dot { background: var(--tc-lunch); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-lunch) 70%, transparent); }
.poa4-top-clock-btn.break .poa4-clock-dot { background: var(--tc-break); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-break) 70%, transparent); }
.poa4-top-clock-btn.out .poa4-clock-dot { background: var(--muted); animation: none; }

@keyframes poaClockPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-in) 70%, transparent); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px transparent; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 transparent; }
}

/* Top Nav Popover Dropdown */
.poa4-top-clock-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 16px;
  display: none;
  z-index: 1001;
}
.poa4-top-clock-popover.open {
  display: block;
  animation: poaPopoverFade .15s ease;
}
@keyframes poaPopoverFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.poa4-tcp-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.poa4-tcp-task { margin-bottom: 12px; font-size: 12px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.poa4-tcp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.poa4-tcp-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
}
.poa4-tcp-btn:hover {
  background: var(--surface3);
  border-color: var(--blueprint);
}
.poa4-tcp-foot { border-top: 1px solid var(--line); padding-top: 10px; }

/* Universal Tab Navigation (Harmonized across Docs, Sitemap, Payroll & Vendors) */
.poa4-tabs-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.poa4-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 7px);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.poa4-tab-btn:hover {
  border-color: var(--blueprint);
  color: var(--text);
  background: var(--surface2);
}
.poa4-tab-btn.active {
  background: var(--blueprint);
  color: var(--on-blueprint);
  border-color: var(--blueprint);
  font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blueprint) 30%, transparent);
}

/* Time Clock Terminal Panel & Dock */
.poa4-clock-kiosk-wrap {
  text-align: center;
  padding: 10px 0 16px;
}
.poa4-clock-display-box {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  padding: 16px 36px;
  margin: 10px auto 16px;
}
.poa4-clock-time {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: var(--mono, monospace);
  line-height: 1;
}
.poa4-clock-time span.sec { color: var(--blueprint); font-size: 30px; font-weight: 700; }
.poa4-clock-time span.ampm { font-size: 20px; font-weight: 600; color: var(--text-dim); margin-left: 6px; }
.poa4-clock-date { font-size: 13px; color: var(--text-dim); margin-top: 6px; font-weight: 500; }

.poa4-punch-dock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.poa4-punch-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  gap: 4px;
}
.poa4-punch-action-btn:hover {
  border-color: var(--blueprint);
  background: var(--surface3);
  transform: translateY(-1px);
}
.poa4-punch-action-btn.in {
  border-color: color-mix(in srgb, var(--good) 60%, var(--line));
  background: color-mix(in srgb, var(--good) 12%, var(--surface2));
  color: var(--text);
}
.poa4-punch-action-btn.lunch {
  border-color: color-mix(in srgb, var(--warn) 60%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, var(--surface2));
  color: var(--text);
}
.poa4-punch-action-btn.break {
  border-color: color-mix(in srgb, var(--blueprint) 60%, var(--line));
  background: color-mix(in srgb, var(--blueprint) 12%, var(--surface2));
  color: var(--text);
}
.poa4-punch-action-btn.out {
  border-color: color-mix(in srgb, var(--critical) 40%, var(--line));
  color: var(--critical);
}
.poa4-punch-action-btn.out:hover {
  background: color-mix(in srgb, var(--critical) 12%, var(--surface2));
}
.poa4-punch-action-btn small {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 500;
}

/* ==========================================================================
   OPERATIONS NOTEBOOK (ONENOTE STYLE) & CUSTOM MODALS
   ========================================================================== */
.nb-sections-bar {
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
  padding: 8px 16px 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nb-section-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 8px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--surface3, #1e242b);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: all .15s ease;
  white-space: nowrap;
}
.nb-section-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 80%, var(--surface2));
}
.nb-section-tab.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  border-bottom: 1px solid var(--surface);
  padding-bottom: 9px;
  z-index: 10;
  box-shadow: 0 -3px 10px rgba(0,0,0,.15);
}
.nb-section-tab .tab-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.nb-section-tab.active .tab-indicator {
  box-shadow: 0 0 8px currentColor;
}
.nb-section-tab .count-badge {
  font-size: 10px;
  opacity: .75;
  font-weight: 600;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 99px;
  margin-left: 2px;
}
.nb-add-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all .15s ease;
  white-space: nowrap;
}
.nb-add-section-btn:hover {
  border-color: var(--blueprint);
  color: var(--blueprint);
  background: color-mix(in srgb, var(--blueprint) 8%, transparent);
}

.nb-workspace {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 720px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  overflow: hidden;
}

.nb-pages-col {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.nb-pages-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nb-pages-search {
  width: 100%;
  padding: 6px 10px 6px 28px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.nb-pages-search:focus {
  border-color: var(--blueprint);
}
.nb-add-page-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--blueprint);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s ease;
}
.nb-add-page-btn:hover {
  background: var(--blueprint);
  color: var(--on-blueprint);
  border-color: var(--blueprint);
}

.nb-pages-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nb-page-item {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .12s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.nb-page-item:hover {
  background: var(--surface2);
  border-color: var(--line);
}
.nb-page-item.active {
  background: color-mix(in srgb, var(--blueprint) 10%, var(--surface2));
  border-color: var(--blueprint);
}
.nb-page-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--blueprint);
  border-radius: 0 3px 3px 0;
}
.nb-page-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nb-page-item-preview {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-page-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.nb-canvas-col {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.nb-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nb-tool-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all .12s ease;
  line-height: 1;
}
.nb-tool-btn:hover {
  background: var(--surface2);
  border-color: var(--line);
}
.nb-tool-btn.active {
  background: color-mix(in srgb, var(--blueprint) 20%, var(--surface2));
  border-color: var(--blueprint);
  color: var(--blueprint);
}
.nb-tool-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 4px;
}
.nb-tool-select {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11.5px;
  outline: none;
  cursor: pointer;
}

.nb-doc-page {
  max-width: 900px;
  width: calc(100% - 36px);
  margin: 20px auto 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  padding: 32px 36px;
  min-height: 600px;
}
.nb-doc-title-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  outline: none;
  font-family: var(--sans);
  margin-bottom: 6px;
  line-height: 1.2;
}
.nb-doc-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text-dim);
}

.nb-content {
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  outline: none;
}
.nb-content h2 {
  font-size: 17px;
  color: var(--text);
  margin: 20px 0 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.nb-content h3 {
  font-size: 14.5px;
  color: var(--blueprint);
  margin: 16px 0 6px;
}
.nb-content p {
  margin: 0 0 12px;
}

.nb-checklist {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nb-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.nb-check-item input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--blueprint);
  cursor: pointer;
  flex-shrink: 0;
}
.nb-check-text {
  flex: 1;
  outline: none;
  min-width: 10px;
}
.nb-check-item.done .nb-check-text,
.nb-check-item.done span {
  text-decoration: line-through;
  color: var(--muted);
}

.nb-callout {
  background: color-mix(in srgb, var(--blueprint) 10%, var(--surface2));
  border-left: 4px solid var(--blueprint);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.nb-callout[data-callout-type="emergency"] {
  border-left-color: var(--critical);
  background: color-mix(in srgb, var(--critical) 12%, var(--surface2));
}
.nb-callout[data-callout-type="warning"] {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface2));
}
.nb-callout[data-callout-type="info"] {
  border-left-color: var(--blueprint);
  background: color-mix(in srgb, var(--blueprint) 12%, var(--surface2));
}
.nb-callout[data-callout-type="compliance"] {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface2));
}
.nb-callout-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.nb-callout-body {
  flex: 1;
  outline: none;
}

/* OneNote Right-Click Context Menu */
.nb-context-menu {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  max-width: 280px;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--text);
  user-select: none;
  z-index: 100000;
  animation: nbCmScale 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nbCmScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.nb-cm-header {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 5px 12px 3px;
}
.nb-cm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.nb-cm-item:hover {
  background: var(--line-soft);
  color: var(--blueprint);
}
.nb-cm-item.text-critical:hover {
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 12%, transparent);
}
.nb-cm-shortcut {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  font-family: monospace;
}
.nb-cm-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.nb-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.nb-swatch-card {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nb-swatch-box {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}

.nb-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.nb-photo-card {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.nb-photo-img {
  height: 120px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--muted);
}
.nb-photo-caption {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   THEME-ADAPTIVE MODAL DIALOGS (Zero Browser Alert/Prompt Dependency)
   -------------------------------------------------------------------------- */
.poa4-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.poa4-modal-backdrop.open {
  display: flex;
  animation: poaModalFadeIn .15s ease;
}
@keyframes poaModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.poa4-modal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: poaModalPopIn .18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes poaModalPopIn {
  from { transform: scale(0.95) translateY(6px); }
  to { transform: scale(1) translateY(0); }
}
.poa4-modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
}
.poa4-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.poa4-modal-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.poa4-modal-close-btn:hover {
  background: var(--surface3);
  color: var(--text);
}
.poa4-modal-body {
  padding: 18px;
  max-height: 75vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.poa4-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.poa4-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-block;
  transition: transform .12s ease;
}
.poa4-color-dot:hover {
  transform: scale(1.15);
}
.poa4-color-dot.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--blueprint);
}

.poa4-scope-card {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface2);
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.poa4-scope-card:hover {
  border-color: var(--blueprint);
}
.poa4-scope-card.selected {
  border-color: var(--blueprint);
  background: color-mix(in srgb, var(--blueprint) 12%, var(--surface2));
}

@media(max-width: 860px) {
  .nb-workspace { grid-template-columns: 1fr; }
  .nb-pages-col { display: none; }
}

/* ==========================================================================
   POA v4 THEMED MODAL & DIALOG SYSTEM (Alerts, Prompts, Confirmations)
   ========================================================================== */
dialog.poa4-theme-modal {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4);
  max-width: 480px;
  width: calc(100% - 32px);
  margin: auto;
  overflow: hidden;
  font-family: inherit;
  animation: poa4ModalPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes poa4ModalPopIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

dialog.poa4-theme-modal::backdrop {
  background: rgba(8, 12, 16, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.poa4-modal-content {
  display: flex;
  flex-direction: column;
}

.poa4-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface2);
}

.poa4-modal-icon-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.poa4-modal-icon {
  font-size: 18px;
  line-height: 1;
}

.poa4-modal-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.poa4-modal-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.poa4-modal-close:hover {
  color: var(--text);
  background: var(--surface3);
}

.poa4-modal-body {
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.poa4-modal-message {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.poa4-modal-input-wrap {
  margin-top: 14px;
}

.poa4-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.poa4-modal-input:focus {
  border-color: var(--blueprint);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blueprint) 25%, transparent);
}

.poa4-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface2);
  border-top: 1px solid var(--line-soft);
}

.poa4-modal-btn {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.poa4-modal-btn.poa4-modal-cancel {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--line);
}
.poa4-modal-btn.poa4-modal-cancel:hover {
  background: color-mix(in srgb, var(--line) 40%, var(--surface3));
}

.poa4-modal-btn.poa4-modal-confirm {
  background: var(--blueprint);
  color: var(--on-blueprint);
}
.poa4-modal-btn.poa4-modal-confirm:hover {
  opacity: 0.92;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blueprint) 35%, transparent);
}

.poa4-modal-btn.poa4-modal-danger {
  background: var(--critical);
  color: #fff;
}
.poa4-modal-btn.poa4-modal-danger:hover {
  opacity: 0.92;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--critical) 40%, transparent);
}

/* Table Action Buttons */
.dt-table-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.12s ease;
  line-height: 1.3;
}
.dt-table-action:hover {
  background: var(--surface);
  border-color: var(--blueprint);
  color: var(--text);
}
.dt-table-action.good {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
}
.dt-table-action.good:hover {
  background: color-mix(in srgb, var(--good) 12%, var(--surface));
}
.dt-table-action.critical {
  color: var(--critical);
  border-color: color-mix(in srgb, var(--critical) 40%, var(--line));
}
.dt-table-action.critical:hover {
  background: color-mix(in srgb, var(--critical) 12%, var(--surface));
}
.dt-table-action.blueprint {
  color: var(--blueprint);
  border-color: color-mix(in srgb, var(--blueprint) 40%, var(--line));
}
.dt-table-action.blueprint:hover {
  background: color-mix(in srgb, var(--blueprint) 12%, var(--surface));
}

/* ==========================================================================
   POA v4 ANNOUNCEMENT & BROADCAST SYSTEM
   ========================================================================== */
.mockup-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.mockup-tab-btn { padding: 9px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-dim); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .12s ease; font-family: inherit; }
.mockup-tab-btn:hover { border-color: var(--blueprint); color: var(--text); }
.mockup-tab-btn.active { background: var(--blueprint); color: var(--on-blueprint); border-color: var(--blueprint); }
.mockup-view { display: none; }
.mockup-view.active { display: block; }

.ann-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.ann-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.ann-stat small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ann-stat b { font-size: 22px; font-family: var(--sans); font-weight: 900; }

.ann-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ann-pill-live { background: color-mix(in srgb, var(--good) 18%, var(--surface2)); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); }
.ann-pill-future { background: color-mix(in srgb, var(--blueprint) 18%, var(--surface2)); color: var(--blueprint); border: 1px solid color-mix(in srgb, var(--blueprint) 40%, transparent); }
.ann-pill-expired { background: color-mix(in srgb, var(--muted) 16%, var(--surface2)); color: var(--muted); border: 1px solid var(--line); }
.ann-pill-draft { background: var(--surface2); color: var(--text-dim); border: 1px dashed var(--line); }

.aud-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); background: var(--surface2); color: var(--text-dim); }
.aud-staff { color: var(--blueprint); border-color: color-mix(in srgb, var(--blueprint) 30%, var(--line)); }
.aud-residents { color: #22c55e; border-color: color-mix(in srgb, #22c55e 30%, var(--line)); }
.aud-future { color: #a855f7; border-color: color-mix(in srgb, #a855f7 30%, var(--line)); }

.ann-filters { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(120px, .6fr)) auto; gap: 10px; align-items: end; margin-bottom: 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ann-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--text-dim); font-weight: 700; }
.ann-filters input, .ann-filters select { padding: 8px 10px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 12.5px; width: 100%; box-sizing: border-box; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.form-group small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.form-input, .form-select, .form-textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: inherit; font-size: 13px; }
.form-textarea { min-height: 80px; resize: vertical; }
.form-checks-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; }
.form-check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }

.composer-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; }
.preview-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.preview-surface-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; flex-wrap: wrap; }
.preview-tab-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface2); color: var(--text-dim); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .12s ease; }
.preview-tab-btn:hover { color: var(--text); border-color: var(--blueprint); }
.preview-tab-btn.active { background: var(--blueprint); color: var(--on-blueprint); border-color: var(--blueprint); }

.surface-wrapper { border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); padding: 14px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; }

.ann-card-preview { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 6px 20px -8px rgba(0,0,0,.4); transition: transform .12s ease; }
.ann-card-hero-img { width: 100%; height: 140px; object-fit: cover; background: var(--surface3); display: block; }
.ann-card-body { padding: 14px 16px; }
.ann-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.ann-card-title { font-size: 15px; font-weight: 800; margin: 0; color: var(--text); }
.ann-card-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; margin: 6px 0 12px; white-space: pre-wrap; }
.ann-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ann-dismiss-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.ann-dismiss-btn:hover { color: var(--critical); background: var(--surface2); }

.ann-banner-bar { background: color-mix(in srgb, var(--blueprint) 15%, var(--surface)); border: 1px solid var(--blueprint); border-radius: 6px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.arch-card { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.arch-card h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.arch-card ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.55; }

@media(max-width: 980px) {
  .composer-grid { grid-template-columns: 1fr; }
  .ann-filters { grid-template-columns: 1fr; }
}

/* Top Nav Notification Bell & Dropdown */
.poa4-top-bell-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.poa4-top-bell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 7px);
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
}
.poa4-top-bell-btn:hover {
  background: var(--surface);
  border-color: var(--blueprint);
  color: var(--blueprint);
}
.poa4-top-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--critical);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  font-variant-numeric: tabular-nums;
}
.poa4-top-bell-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 12px 35px rgba(0,0,0,.4);
  padding: 0;
  display: none;
  z-index: 1002;
  overflow: hidden;
}
.poa4-top-bell-popover.open {
  display: block;
  animation: poaPopoverFade .15s ease;
}
.poa4-tbn-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
}
.poa4-tbn-feed {
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.poa4-tbn-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s ease;
  position: relative;
}
.poa4-tbn-item:hover {
  background: var(--surface2);
}
.poa4-tbn-item.unread {
  background: color-mix(in srgb, var(--blueprint) 7%, var(--surface));
}
.poa4-tbn-item.unread:hover {
  background: color-mix(in srgb, var(--blueprint) 12%, var(--surface));
}
.poa4-tbn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-top: 2px;
}
.poa4-tbn-body {
  flex: 1;
  min-width: 0;
}
.poa4-tbn-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 2px;
}
.poa4-tbn-msg {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.poa4-tbn-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.poa4-tbn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blueprint);
  position: absolute;
  right: 12px;
  top: 14px;
}
.poa4-tbn-foot {
  padding: 10px 14px;
  background: var(--surface2);
  border-top: 1px solid var(--line);
  text-align: center;
}