/* GEC CRM — the three designs (11 Oct 2026).
   The client did not like the Industry design ("think out of this design .. colors, and everything"), was shown
   three directions, and asked for all three, chosen with A · B · C in the header:
     A · Atlas      light and open — the menu across the top, white rounded cards, the company's own colour
     B · Nightshift a dark command centre — a sidebar with every name, tiles, the pipeline in lanes
     C · Briefing   warm paper, set like a morning report — a masthead, ruled sections, the pipeline as a list
   The choice is <html data-design="a|b|c">, set before first paint from localStorage 'gec_design' (index.html)
   and by setDesign() (04-dashboard.js). This file loads AFTER app.css and only overrides it: the Industry rules
   underneath stay as they were, so every screen keeps working in every design, and a screen nobody restyled
   still reads correctly. Layout changes are CSS only — no screen renders differently per design, so no rule,
   permission or number can differ between them.
   Tokens first (per design, light and dark), then the shell, then the shared components, then each screen. */

/* ═══ 1 · TOKENS ═══════════════════════════════════════════════════════════════════════════════════ */
/* A · Atlas — teal on a soft grey-green ground. The accent ramp is NOT !important: a company brand colour
   (Settings › Company) still replaces it, so Atlas wears the client's own colour. */
html[data-design="a"]{
  --color-bg:#f3f6f5;--color-surface:#ffffff;--color-text:#13211f;--color-divider:#e1e9e7;--color-muted:#5b6b68;
  --color-neutral-100:#f7faf9;--color-neutral-200:#eef3f2;--color-neutral-300:#dce5e3;--color-neutral-400:#c2cfcc;
  --color-neutral-500:#9aaba7;--color-neutral-600:#6b7c79;--color-neutral-700:#4e5f5c;--color-neutral-800:#34423f;--color-neutral-900:#1f2a28;
  --color-accent-100:#e3f2ef;--color-accent-200:#c8e6e0;--color-accent-300:#9fd3cc;--color-accent-400:#5fb5ab;--color-accent-500:#2a968c;
  --color-accent-600:#0e7c74;--color-accent-700:#0b655f;--color-accent-800:#0b4f4a;--color-accent-900:#0a3633;--color-accent-base:#0e7c74;
  --color-accent:var(--color-accent-600);--color-accent-hover:var(--color-accent-700);--color-accent-press:var(--color-accent-800);
  --color-on-accent:#ffffff;--color-rail:#ffffff;--color-rail-ink:var(--color-accent-700);
  --card:#ffffff;--panel2:#eef3f2;--hover:#f0f5f4;--border:var(--color-divider);
  --blue-bg:var(--color-accent-100);--blue-border:var(--color-accent-300);--blue-t:var(--color-accent-800);
  --purple-bg:#eef2ff;--purple-border:#c7d2fe;--purple-t:#3730a3;
  --green-bg:#e3f2ef;--green-border:#9fd3cc;--green-t:#0b4f4a;
  --amber-bg:#fef3c7;--amber-border:#fde68a;--amber-t:#92400e;
  --red-bg:#fee4e2;--red-border:#fecdca;--red-t:#b42318;
  --gray-bg:#eef3f2;--gray-t:#4e5f5c;
  --green:#0b4f4a;--amber:#d97706;--red:#b42318;
  --font-body:'Manrope','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Manrope','IBM Plex Sans Arabic',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(16,40,36,.06),0 6px 20px rgba(16,40,36,.05);
  --shadow-lg:0 18px 48px rgba(16,40,36,.18);
  --d-r:16px;--d-r-sm:10px;--d-pill:999px;--d-line:var(--color-divider);--d-input:#ffffff;--d-input-line:#d3dedb;
  --d-nav:#ffffff;--d-nav-ink:#46605b;--d-nav-on:var(--color-accent-100);--d-nav-on-ink:var(--color-accent-800);
  --d-hi:#d97706;--d-hi-soft:#fef3c7;--d-hi-ink:#92400e;--d-head:72px;--d-top:64px;
  color-scheme:light}
html[data-design="a"][data-mode="dark"]{
  --color-bg:#0e1514;--color-surface:#152120;--color-text:#e6efed;--color-divider:rgba(255,255,255,.10);--color-muted:#9fb3af;
  --color-neutral-100:#1b2a28;--color-neutral-200:#1b2a28;--color-neutral-300:#24403c;--color-neutral-400:#355955;
  --color-neutral-500:#5f7d78;--color-neutral-600:#8aa29d;--color-neutral-700:#b3c5c1;--color-neutral-800:#d3dfdc;--color-neutral-900:#eef4f3;
  --color-accent:var(--color-accent-400);--color-accent-hover:var(--color-accent-300);--color-accent-press:var(--color-accent-200);
  --color-on-accent:#06201d;--color-rail:#111b1a;--color-rail-ink:var(--color-accent-300);
  --card:#152120;--panel2:#1b2a28;--hover:#1b2a28;
  --blue-bg:color-mix(in srgb,var(--color-accent-400) 18%,transparent);--blue-border:var(--color-accent-600);--blue-t:var(--color-accent-300);
  --green-bg:color-mix(in srgb,var(--color-accent-400) 18%,transparent);--green-border:var(--color-accent-600);--green-t:var(--color-accent-200);
  --amber-bg:rgba(245,158,11,.14);--amber-border:rgba(245,158,11,.4);--amber-t:#fcd34d;
  --red-bg:rgba(248,113,113,.14);--red-border:rgba(248,113,113,.4);--red-t:#fca5a5;
  --purple-bg:rgba(129,140,248,.16);--purple-border:rgba(129,140,248,.4);--purple-t:#c7d2fe;
  --gray-bg:rgba(255,255,255,.07);--gray-t:#b3c5c1;
  --green:var(--color-accent-600);--amber:#f59e0b;--red:#f87171;
  --shadow:0 0 0 1px rgba(255,255,255,.06);--shadow-lg:0 0 0 1px rgba(255,255,255,.1),0 18px 48px rgba(0,0,0,.6);
  --d-line:rgba(255,255,255,.10);--d-input:#111b1a;--d-input-line:rgba(255,255,255,.16);
  --d-nav:#111b1a;--d-nav-ink:#b3c5c1;--d-nav-on:color-mix(in srgb,var(--color-accent-400) 20%,transparent);--d-nav-on-ink:var(--color-accent-200);
  --d-hi:#f59e0b;--d-hi-soft:rgba(245,158,11,.14);--d-hi-ink:#fcd34d;
  color-scheme:dark}

/* B · Nightshift — always dark (setDesign and the pre-paint shim set data-mode="dark"). Indigo for what is
   selected, mint for done, coral for what needs someone. The ramp IS !important: Nightshift is its own palette. */
html[data-design="b"]{
  --color-bg:#0b1220;--color-surface:#0e1628;--color-text:#e7ecf7;--color-divider:#1e2a44;--color-muted:#8a96b3;
  --color-neutral-100:#1a2442;--color-neutral-200:#16213a;--color-neutral-300:#22304f;--color-neutral-400:#2a3757;
  --color-neutral-500:#5a6788;--color-neutral-600:#8a96b3;--color-neutral-700:#a9b4cf;--color-neutral-800:#c9d1e3;--color-neutral-900:#e7ecf7;
  --color-accent-100:#eef0ff!important;--color-accent-200:#dde0ff!important;--color-accent-300:#c2c6ff!important;--color-accent-400:#9aa0ff!important;
  --color-accent-500:#7c83ff!important;--color-accent-600:#636af0!important;--color-accent-700:#4f55d0!important;--color-accent-800:#3a3fa0!important;
  --color-accent-900:#141b33!important;--color-accent-base:#7c83ff!important;
  --color-accent:#9aa0ff;--color-accent-hover:#b4b9ff;--color-accent-press:#c2c6ff;--color-on-accent:#0b1220;
  --color-rail:#0e1628;--color-rail-ink:#9aa0ff;
  --card:#111a2e;--panel2:#0e1628;--hover:#16213a;--border:var(--color-divider);
  --accent-soft:rgba(124,131,255,.16);
  --blue-bg:rgba(124,131,255,.16);--blue-border:rgba(124,131,255,.45);--blue-t:#c2c6ff;
  --purple-bg:rgba(124,131,255,.16);--purple-border:rgba(124,131,255,.45);--purple-t:#c2c6ff;
  --green-bg:rgba(52,211,153,.12);--green-border:rgba(52,211,153,.4);--green-t:#6ee7b7;
  --amber-bg:rgba(251,191,36,.13);--amber-border:rgba(251,191,36,.42);--amber-t:#fcd34d;
  --red-bg:rgba(251,113,133,.13);--red-border:rgba(251,113,133,.45);--red-t:#fda4af;
  --gray-bg:rgba(255,255,255,.06);--gray-t:#a9b4cf;
  --green:#10b981;--amber:#f59e0b;--red:#fb7185;
  --sb-text:#a9b4cf;--sb-muted:#5a6788;--sb-line:#1e2a44;
  --font-body:'Sora','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Sora','IBM Plex Sans Arabic',system-ui,sans-serif;
  --shadow:none;--shadow-lg:0 0 0 1px #2a3757,0 24px 60px rgba(0,0,0,.6);
  --d-r:18px;--d-r-sm:10px;--d-pill:999px;--d-line:#1e2a44;--d-input:#0e1628;--d-input-line:#22304f;
  --d-nav:#0e1628;--d-nav-ink:#a9b4cf;--d-nav-on:#1a2442;--d-nav-on-ink:#ffffff;
  --d-hi:#fb7185;--d-hi-soft:rgba(251,113,133,.12);--d-hi-ink:#fda4af;--d-mint:#34d399;--d-head:64px;--d-top:0px;
  color-scheme:dark}

/* C · Briefing — warm paper, navy ink, one saffron accent for what needs someone. The ramp is navy and IS
   !important: the paper only works with its own ink. */
html[data-design="c"]{
  --color-bg:#f4f1ea;--color-surface:#fbf9f4;--color-text:#1e2a44;--color-divider:#dcd6c8;--color-muted:#6e6a60;
  --color-neutral-100:#f7f4ee;--color-neutral-200:#ece7dc;--color-neutral-300:#dcd6c8;--color-neutral-400:#c4bdae;
  --color-neutral-500:#a8a295;--color-neutral-600:#8c877b;--color-neutral-700:#6e6a60;--color-neutral-800:#4a473f;--color-neutral-900:#2b2924;
  --color-accent-100:#e8ecf4!important;--color-accent-200:#d0d8e8!important;--color-accent-300:#a9b6cf!important;--color-accent-400:#7d8dae!important;
  --color-accent-500:#56688e!important;--color-accent-600:#3a4c70!important;--color-accent-700:#2a3a5a!important;--color-accent-800:#1e2a44!important;
  --color-accent-900:#141c2e!important;--color-accent-base:#1e2a44!important;
  --color-accent:#1e2a44;--color-accent-hover:#2a3a5a;--color-accent-press:#141c2e;--color-on-accent:#f4f1ea;
  --color-rail:#f4f1ea;--color-rail-ink:#1e2a44;
  --card:#fbf9f4;--panel2:#ece7dc;--hover:#efebe1;--border:var(--color-divider);--accent-soft:#e8ecf4;
  --blue-bg:#e8ecf4;--blue-border:#a9b6cf;--blue-t:#1e2a44;
  --purple-bg:#ece7dc;--purple-border:#c4bdae;--purple-t:#4a473f;
  --green-bg:#e3eadf;--green-border:#b9c9b0;--green-t:#2f4a2a;
  --amber-bg:#f6e3c1;--amber-border:#e8c27e;--amber-t:#8a5a10;
  --red-bg:#f3d3cc;--red-border:#e3a99b;--red-t:#8e2e1c;
  --gray-bg:#ece7dc;--gray-t:#4a473f;
  --green:#2f4a2a;--amber:#b7791f;--red:#8e2e1c;
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Space Grotesk','IBM Plex Sans Arabic',system-ui,sans-serif;
  --shadow:none;--shadow-lg:0 14px 40px rgba(43,41,36,.18);
  --d-r:0px;--d-r-sm:4px;--d-pill:999px;--d-line:#dcd6c8;--d-input:#fbf9f4;--d-input-line:#cfc8b8;
  --d-nav:#f4f1ea;--d-nav-ink:#1e2a44;--d-nav-on:transparent;--d-nav-on-ink:#1e2a44;
  --d-hi:#e8a33d;--d-hi-soft:#fbf3e3;--d-hi-ink:#8a5a10;--d-rule:#1e2a44;--d-head:84px;--d-top:110px;
  color-scheme:light}
html[data-design="c"][data-mode="dark"]{
  --color-bg:#1a1916;--color-surface:#22201b;--color-text:#ede8dc;--color-divider:rgba(237,232,220,.14);--color-muted:#a39d8f;
  --color-neutral-100:#24221d;--color-neutral-200:#2b2924;--color-neutral-300:#3a372f;--color-neutral-400:#4a473f;
  --color-neutral-500:#6e6a60;--color-neutral-600:#8c877b;--color-neutral-700:#b3ad9f;--color-neutral-800:#d6d0c2;--color-neutral-900:#ede8dc;
  --color-accent:#d0d8e8;--color-accent-hover:#e8ecf4;--color-accent-press:#ffffff;--color-on-accent:#1a1916;
  --color-rail:#1a1916;--color-rail-ink:#ede8dc;
  --card:#22201b;--panel2:#2b2924;--hover:#2b2924;--accent-soft:rgba(208,216,232,.12);
  --blue-bg:rgba(208,216,232,.12);--blue-border:rgba(208,216,232,.35);--blue-t:#d0d8e8;
  --purple-bg:rgba(255,255,255,.07);--purple-border:rgba(255,255,255,.2);--purple-t:#d6d0c2;
  --green-bg:rgba(150,190,140,.14);--green-border:rgba(150,190,140,.4);--green-t:#b9d9ac;
  --amber-bg:rgba(232,163,61,.16);--amber-border:rgba(232,163,61,.45);--amber-t:#f2c37a;
  --red-bg:rgba(227,120,100,.16);--red-border:rgba(227,120,100,.45);--red-t:#f0a898;
  --gray-bg:rgba(255,255,255,.07);--gray-t:#b3ad9f;
  --green:#5f8a55;--amber:#e8a33d;--red:#e37864;
  --shadow-lg:0 0 0 1px rgba(255,255,255,.1),0 18px 48px rgba(0,0,0,.6);
  --d-line:rgba(237,232,220,.14);--d-input:#22201b;--d-input-line:rgba(237,232,220,.2);
  --d-nav:#1a1916;--d-nav-ink:#ede8dc;--d-nav-on-ink:#ede8dc;
  --d-hi:#e8a33d;--d-hi-soft:rgba(232,163,61,.14);--d-hi-ink:#f2c37a;--d-rule:#ede8dc;
  color-scheme:dark}

/* ═══ 2 · EVERY DESIGN — the Industry drawing habits switched off ═══════════════════════════════════ */
html[data-design] body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}
html[data-design] .card::after,html[data-design] .panel::after,html[data-design] .auth-card::after,html[data-design] .am-file::after,
html[data-design] .dp::after,html[data-design] .frame::after{content:none}
html[data-design] .brand,html[data-design] .page-title,html[data-design] .kpi .v,html[data-design] .sec-title,html[data-design] .modal-head,
html[data-design] .col h4,html[data-design] th,html[data-design] .auth-card h1,html[data-design] .tb-title,html[data-design] .i360-name,
html[data-design] .panel h3,html[data-design] .tab,html[data-design] .kcard .v,html[data-design] .hero-hi{letter-spacing:0}
html[data-design] .hd{font:600 12px/1.35 var(--font-body);letter-spacing:.01em;text-transform:none;color:var(--muted)}
html[data-design] .hd .bi-ar{font-size:11px;font-weight:500}
html[data-design] .bi-ar,html[data-design] .q-ar,html[data-design] .ar-inline{color:var(--color-accent-700)}
html[data-design][data-mode="dark"] .bi-ar,html[data-design][data-mode="dark"] .q-ar,html[data-design][data-mode="dark"] .ar-inline{color:var(--color-accent-300)}
html[data-design] .btn .bi-ar,html[data-design] .seg-opt .bi-ar,html[data-design] .tag .bi-ar{color:inherit}
html[data-design] .mono{font:600 12px/1.3 var(--font-body);font-variant-numeric:tabular-nums;color:var(--color-neutral-700)}
html[data-design] .t1{font:800 28px/1.15 var(--font-heading);letter-spacing:-.02em}
html[data-design] .t2{font:700 18px/1.3 var(--font-heading);letter-spacing:-.01em}
html[data-design] .t3{font:700 14px/1.3 var(--font-heading)}
html[data-design] .num{font:800 30px/1.05 var(--font-heading);letter-spacing:-.02em}
html[data-design] .b1{font:500 13.5px/1.5 var(--font-body)}

/* controls — rounded in A and B, pill buttons on paper in C */
html[data-design] input,html[data-design] select,html[data-design] textarea{border-radius:var(--d-r-sm);background:var(--d-input);border-color:var(--d-input-line);padding:9px 12px}
html[data-design] input[type=checkbox],html[data-design] input[type=radio]{accent-color:var(--color-accent)}
html[data-design] input:focus,html[data-design] select:focus,html[data-design] textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 18%,transparent)}
html[data-design] .btn{border-radius:var(--d-r-sm);font:600 13.5px/1.2 var(--font-body);letter-spacing:0;padding:9px 15px;border-color:var(--d-input-line);background:var(--card)}
html[data-design] .btn:hover{background:var(--hover)}
html[data-design] .btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
html[data-design] .btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
html[data-design] .btn-sm{padding:6px 11px;font-size:12.5px}
html[data-design] .btn-ghost{background:transparent;border-color:transparent;color:var(--color-accent-700)}
html[data-design][data-mode="dark"] .btn-ghost{color:var(--color-accent-300)}
html[data-design] .btn-green{background:var(--green);border-color:var(--green);color:#fff}
html[data-design] .tag{border-radius:var(--d-pill);font:600 11.5px/1.2 var(--font-body);padding:4px 10px}
html[data-design] .tag-accent{background:var(--blue-bg);color:var(--blue-t)}
html[data-design] .tag-neutral{background:var(--gray-bg);color:var(--gray-t)}
html[data-design] .tag-outline{border-color:var(--color-neutral-500);color:var(--color-neutral-700)}
html[data-design] .pill{border-radius:var(--d-pill);font-weight:600}
html[data-design] .seg{border:1px solid var(--d-line);border-radius:12px;padding:3px;gap:2px;background:var(--card)}
html[data-design] .seg-opt{border-radius:9px;border:0!important;font:600 13px var(--font-body);color:var(--color-neutral-700);padding:7px 12px}
html[data-design] .seg-opt.on,html[data-design] .tb-lang .seg-opt.sel{background:var(--color-accent);color:var(--color-on-accent)}
html[data-design] .seg3,html[data-design] .appear{border-radius:10px;overflow:hidden}
html[data-design] .modal{border-radius:var(--d-r);border:1px solid var(--d-line);background:var(--card)}
html[data-design] .modal-head,html[data-design] .modal-foot{background:var(--card);border-color:var(--d-line)}
html[data-design] .modal-head{font:700 17px/1.3 var(--font-heading)}
html[data-design] .modal.side{border-radius:0}
html[data-design] .toast{border-radius:12px;background:var(--color-text);color:var(--color-bg);border:0}
html[data-design] table th{font:600 12px/1.3 var(--font-body);letter-spacing:.01em;text-transform:none;color:var(--muted);border-bottom-color:var(--d-line)}
html[data-design] th,html[data-design] td{border-bottom-color:var(--d-line)}
html[data-design] .tab.active{border-bottom-color:var(--color-accent);color:var(--color-text);font-weight:700}
html[data-design] .exp-menu,html[data-design] .row-menu-in,html[data-design] .rep-pop,html[data-design] .acct-menu{background:var(--card);border-color:var(--d-line);border-radius:14px}
html[data-design] .exp-tag{border-radius:6px;background:var(--color-accent-700)}
html[data-design] .sec-title{font:700 12px/1.3 var(--font-body);letter-spacing:.06em;color:var(--color-accent-700);border-bottom-color:var(--d-line)}
html[data-design][data-mode="dark"] .sec-title{color:var(--color-accent-300)}
html[data-design] .st-bar,html[data-design] .sb-track{border-radius:6px;background:var(--color-neutral-200)}
html[data-design] .st-bar>div,html[data-design] .sb-track>i{border-radius:6px}
html[data-design] .home-bar{border:0;height:10px;border-radius:6px;background:var(--color-neutral-200);overflow:hidden}
html[data-design] .home-bar>i{border-radius:6px}
html[data-design] .ap-badge{background:var(--d-hi);color:#fff;border-radius:999px;font:700 10px/16px var(--font-body);min-width:18px;height:18px;padding:0 5px}

/* frames — filled cards in A and B (C draws its own below) */
html[data-design="a"] :is(.frame,.panel,.card,.am-file,.dp,.kcard,.am-stat,.am-card,.ap-card,.pb-card,.rpt-tab,.set-nav,.perm-group,.am-box,.am-rbox),
html[data-design="b"] :is(.frame,.panel,.card,.am-file,.dp,.kcard,.am-stat,.am-card,.ap-card,.pb-card,.rpt-tab,.set-nav,.perm-group,.am-box,.am-rbox){
  background:var(--card);border:1px solid var(--d-line);border-radius:var(--d-r);box-shadow:var(--shadow)}
html[data-design="a"] .frm,html[data-design="b"] .frm{border-radius:var(--d-r-sm);border-color:var(--d-line)}

/* the design switch — three letters, the design's name on hover */
.dsw{display:none;align-items:center;gap:2px;padding:3px;border:1px solid var(--d-line,var(--border));border-radius:12px;background:var(--card);flex:none}
.dsw-o{border:0;background:transparent;width:30px;height:28px;border-radius:9px;font:700 12.5px/1 var(--font-body);color:var(--muted);cursor:pointer}
.dsw-o:hover{background:var(--hover);color:var(--text)}
.dsw-o.on{background:var(--color-accent);color:var(--color-on-accent)}
html[data-design] .dsw{display:inline-flex}
html[data-design="a"] .dsw-top,html[data-design="c"] .dsw-top{display:none}
html[data-design="b"] #shell:not(.no-top) .dsw-nav{display:none}
.dsw-menu .appear-btn{flex:1}

/* ═══ 3 · THE SHELL ════════════════════════════════════════════════════════════════════════════════ */
.sb-nav{display:contents}
/* A and C — the menu runs across the top, every page named */
html[data-design="a"] #shell,html[data-design="c"] #shell{flex-direction:column}
html[data-design="a"] .sidebar,html[data-design="c"] .sidebar{position:sticky!important;top:0;left:auto;transform:none!important;box-shadow:none;width:100%!important;height:auto;
  flex-direction:row;align-items:center;gap:14px;padding:0 28px!important;background:var(--d-nav);color:var(--d-nav-ink);z-index:40}
html[data-design="a"] .sidebar{flex-wrap:wrap;row-gap:0;padding:10px 28px 0!important;border-bottom:1px solid var(--d-line)}
html[data-design="a"] .sb-nav,html[data-design="c"] .sb-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
html[data-design="a"] .sb-nav::-webkit-scrollbar,html[data-design="c"] .sb-nav::-webkit-scrollbar{display:none}
html[data-design="a"] .sb-label,html[data-design="c"] .sb-label{display:none}
html[data-design="a"] .brand,html[data-design="c"] .brand{width:auto;margin:0;padding:0!important;flex-direction:row;align-items:center;gap:10px;flex:none;
  font:800 16px/1.2 var(--font-heading);color:var(--color-text);white-space:nowrap}
html[data-design="a"] .brand::before{content:'';width:32px;height:32px;border-radius:10px;background:var(--color-accent);flex:none}
html[data-design="a"] .brand:has(img)::before,html[data-design="c"] .brand:has(img)::before{content:none}
html[data-design] .brand>div:first-child{background:transparent!important;padding:0!important;border:0!important}
html[data-design="a"] .brand img,html[data-design="c"] .brand img{max-height:36px!important;max-width:150px!important}
html[data-design="a"] .brand small,html[data-design="c"] .brand small{display:none}
html[data-design="a"] .nav-item,html[data-design="c"] .nav-item{width:auto;height:auto;min-height:40px;margin:0;padding:6px 13px;gap:8px;flex:none;
  justify-content:center;font-size:13.5px;line-height:1.2;color:var(--d-nav-ink);border-radius:999px;background:transparent;box-shadow:none}
html[data-design="a"] .nav-item svg,html[data-design="c"] .nav-item svg{display:none}
html[data-design="a"] .nav-l,html[data-design="c"] .nav-l{display:flex!important;flex-direction:column;align-items:center;font-weight:600;color:inherit;white-space:nowrap}
html[data-design="a"] .nav-l .bi-ar,html[data-design="c"] .nav-l .bi-ar{font-size:11px;font-weight:500;color:inherit;opacity:.75;margin-top:1px}
html[data-design="a"] .nav-item:hover{background:var(--hover);color:var(--color-text)}
html[data-design="a"] .nav-item.active{background:var(--d-nav-on);color:var(--d-nav-on-ink);box-shadow:none}
html[data-design="a"] .nav-item.active .nav-l{color:inherit;font-weight:700}
html[data-design="a"] .ap-badge,html[data-design="c"] .ap-badge{position:static;margin-inline-start:2px}
html[data-design="a"] .sb-user,html[data-design="c"] .sb-user{margin:0;padding:0;border:0;flex:none;gap:10px}
html[data-design="a"] .sb-user>div:last-child,html[data-design="c"] .sb-user>div:last-child{display:none!important}
html[data-design="a"] .sb-av{width:38px;height:38px;border-radius:50%;border:0;background:var(--color-text);color:var(--color-bg);font:700 13px/1 var(--font-body)}
html[data-design="a"] .main,html[data-design="c"] .main{min-height:calc(100vh - var(--d-top))}
html[data-design="a"] .acct-menu,html[data-design="c"] .acct-menu{top:calc(var(--d-top) + 6px);bottom:auto;left:auto!important;right:18px}
html[dir="rtl"][data-design="a"] .acct-menu,html[dir="rtl"][data-design="c"] .acct-menu{right:auto!important;left:18px!important}
html[data-design="a"] .nav-toggle,html[data-design="c"] .nav-toggle,html[data-design="a"] .scrim,html[data-design="c"] .scrim{display:none!important}
/* the page header under the menu */
html[data-design="a"] .topbar{height:auto!important;min-height:76px;padding:14px 32px;background:transparent;border-bottom:0}
html[data-design="a"] .tb-title{font:800 24px/1.2 var(--font-heading);letter-spacing:-.02em}
html[data-design="a"] .tb-sub{font-size:12.5px;color:var(--muted)}
html[data-design="a"] .tb-search,html[data-design="b"] .tb-search,html[data-design="c"] .tb-search{border-radius:12px;height:38px;border-color:var(--d-input-line);background:var(--d-input);padding:0 12px}
html[data-design="a"] .content{padding:4px 32px 36px}

/* A — two rows: the name, the design switch and the person; then every page by name */
html[data-design="a"] .brand{flex:1;order:0;min-height:40px}
html[data-design="a"] .dsw-nav{order:1}
html[data-design="a"] .sb-user{order:2}
html[data-design="a"] .sb-nav{order:3;flex:1 0 100%;margin-top:6px;padding:6px 0 8px;gap:4px}

/* C — a masthead: the name large, the menu on its own ruled line beneath */
html[data-design="c"] .sidebar{flex-wrap:wrap;row-gap:0;padding:14px 56px 0!important;border:0}
html[data-design="c"] .brand{flex:1;font:700 24px/1.1 'Space Grotesk',var(--font-heading);letter-spacing:-.02em;order:0}
html[data-design="c"] .brand::after{content:'.';color:var(--d-hi)}
html[data-design="c"] .brand:has(img)::after{content:none}
html[data-design="c"] .dsw-nav{order:1}
html[data-design="c"] .sb-user{order:2}
html[data-design="c"] .sb-nav{order:3;flex:1 0 100%;margin-top:12px;border-top:2px solid var(--d-rule);border-bottom:1px solid var(--d-line);gap:26px}
html[data-design="c"] .nav-item{padding:10px 0;border-radius:0;min-height:44px}
html[data-design="c"] .nav-item:hover{background:transparent;color:var(--amber)}
html[data-design="c"] .nav-item.active{background:transparent;box-shadow:inset 0 -3px 0 var(--d-hi)}
html[data-design="c"] .nav-item.active .nav-l{font-weight:700}
html[data-design="c"] .sb-av{width:36px;height:36px;border-radius:50%;border:0;background:var(--color-text);color:var(--color-bg);font:600 12.5px/1 var(--font-body)}
html[data-design="c"] .dsw{border-radius:999px;border:1.5px solid var(--color-text);background:transparent}
html[data-design="c"] .dsw-o{border-radius:999px}
html[data-design="c"] .topbar{height:auto!important;min-height:84px;padding:16px 56px;background:transparent;border-bottom:0}
html[data-design="c"] .tb-title{font:600 34px/1.1 'Space Grotesk',var(--font-heading);letter-spacing:-.03em}
html[data-design="c"] .tb-sub{font-size:13px;color:var(--muted)}
html[data-design="c"] .content{padding:6px 56px 44px}

/* B — the sidebar, every page named, on deep navy */
html[data-design="b"] .sidebar{background:var(--d-nav);border-inline-end:1px solid var(--d-line);color:var(--sb-text)}
html[data-design="b"] .sb-nav{display:flex;flex-direction:column;gap:2px}
html[data-design="b"] .brand::before{border-radius:10px;background:linear-gradient(135deg,#7c83ff,#34d399)}
html[data-design="b"] .nav-item{border-radius:12px;color:var(--d-nav-ink)}
html[data-design="b"] .nav-item:hover{background:#16213a;color:#fff}
html[data-design="b"] .nav-item.active{background:var(--d-nav-on);color:#fff;box-shadow:inset 3px 0 0 #9aa0ff}
html[dir="rtl"][data-design="b"] .nav-item.active{box-shadow:inset -3px 0 0 #9aa0ff}
html[data-design="b"] .nav-l .bi-ar{color:#5a6788}
html[data-design="b"] .sb-av{border-radius:50%;border:0;background:#7c83ff;color:#0b1220;font:700 12px/1 var(--font-body)}
html[data-design="b"] .dsw-nav{margin:6px 8px 0;align-self:flex-start;background:#111a2e}
html[data-design="b"] .topbar{height:auto!important;min-height:64px;padding:0 28px;background:var(--color-bg);border-bottom:1px solid var(--d-line)}
html[data-design="b"] .tb-title{font:700 20px/1.2 var(--font-heading);letter-spacing:-.01em}
html[data-design="b"] .content{padding:24px 28px 36px}
@media (min-width:1101px){html[data-design="b"] .sidebar{width:232px;padding:20px 12px}}

/* the full-height pages (deal, institutions, groups, settings) take what is left under the header */
html[data-design="a"] .split,html[data-design="c"] .split{height:calc(100vh - var(--d-top))}
html[data-design] .split.with-top,html[data-design] .cfg{height:calc(100vh - var(--d-top) - var(--d-head))!important}
@media(max-width:900px){html[data-design] .split,html[data-design] .split.with-top,html[data-design] .cfg{height:auto!important}}

/* the sign-in page */
html[data-design] #auth{background:var(--color-bg)}
html[data-design="a"] .auth-card,html[data-design="b"] .auth-card{background:var(--card);border:1px solid var(--d-line);border-radius:22px;box-shadow:var(--shadow-lg);padding:36px}
html[data-design] .auth-card h1{font:800 26px/1.2 var(--font-heading)}
html[data-design="c"] .auth-card{background:transparent;border:0;border-top:2px solid var(--d-rule);padding:22px 4px}
html[data-design="c"] .auth-card h1{font:600 34px/1.1 'Space Grotesk',var(--font-heading);letter-spacing:-.03em}

/* ═══ 4 · C draws with rules, not boxes ═══════════════════════════════════════════════════════════════ */
html[data-design="c"] :is(.frame,.panel,.card,.am-file,.dp,.kcard,.am-rbox,.rpt-tab,.set-nav){background:transparent;border:0;border-top:2px solid var(--d-rule);border-radius:0;box-shadow:none}
html[data-design="c"] :is(.am-stat,.am-card,.ap-card,.pb-card,.am-box,.perm-group){border-radius:0;border-color:var(--d-line);background:transparent}
html[data-design="c"] .frm{border-radius:0}
html[data-design="c"] .btn{border-radius:999px;border:1.5px solid var(--color-text);background:transparent;color:var(--color-text)}
html[data-design="c"] .btn:hover{background:var(--hover)}
html[data-design="c"] .btn-primary{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
html[data-design="c"] .btn-primary:hover{background:var(--color-accent-700);border-color:var(--color-accent-700)}
html[data-design="c"][data-mode="dark"] .btn-primary:hover{background:#fff;border-color:#fff}
html[data-design="c"] .btn-ghost{border-color:transparent;text-decoration:underline;text-decoration-color:var(--d-hi);text-decoration-thickness:2px;text-underline-offset:4px;color:var(--color-text)}
html[data-design="c"] .seg{border:1.5px solid var(--color-text);border-radius:999px;background:transparent;padding:0;gap:0;overflow:hidden}
html[data-design="c"] .seg-opt{border-radius:0;color:var(--color-text);padding:8px 15px}
html[data-design="c"] .seg-opt+.seg-opt{border-inline-start:1.5px solid var(--color-text)!important}
html[data-design="c"] .seg-opt.on{background:var(--color-text);color:var(--color-bg)}
html[data-design="c"] .t1,html[data-design="c"] .t2,html[data-design="c"] .t3,html[data-design="c"] .num{font-family:'Space Grotesk',var(--font-heading);font-weight:600}
html[data-design="c"] .t1{font-size:34px;letter-spacing:-.03em}
html[data-design="c"] .t2{font-size:22px;letter-spacing:-.02em}
html[data-design="c"] .num{font-size:44px;letter-spacing:-.03em}
html[data-design="c"] .hd{font:600 11.5px/1.35 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
html[data-design="c"] .mono{font-family:'Space Grotesk',var(--font-body);font-weight:600}
html[data-design="c"] .tag-accent{background:var(--d-hi);color:#1e2a44}
html[data-design="c"] table th{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
html[data-design="c"] thead th{border-bottom:2px solid var(--d-rule)}
html[data-design="c"] tr:hover td{background:var(--hover)}
html[data-design="c"] .modal{border-radius:6px;border-top:3px solid var(--d-rule)}
html[data-design="c"] .ap-badge{background:transparent;color:var(--amber);font-size:11px;padding:0;min-width:0}

/* ═══ 5 · THE DASHBOARD ═══════════════════════════════════════════════════════════════════════════════ */
html[data-design] .home{gap:22px}
html[data-design] .home-head .hd.on{color:var(--muted)}
html[data-design] .home-strip{gap:28px;padding:20px 24px}
html[data-design] .home-vr{background:var(--d-line)}
html[data-design] .home-stats .num{font-size:34px}
html[data-design] .q-row{border-radius:14px;border:1px solid var(--d-line);border-inline-start-width:1px;background:var(--card);padding:14px 16px;box-shadow:var(--shadow)}
html[data-design] .q-row>.tag{width:auto;min-width:84px}
html[data-design] .q-title{font:700 14px/1.45 var(--font-body)}
/* A — the strip is one white card with the target as a ring of teal; what needs you is tinted amber */
html[data-design="a"] .home-head .t1{font-size:30px}
html[data-design="a"] .q-row.need{background:var(--d-hi-soft);border-color:color-mix(in srgb,var(--d-hi) 35%,transparent)}
html[data-design="a"] .q-row.need .tag-accent{background:var(--d-hi);color:#fff}
html[data-design="a"] .q-row.need .btn-primary{background:var(--d-hi);border-color:var(--d-hi);color:#fff}
html[data-design="a"] .home-target .home-bar>i{background:var(--color-accent)}
html[data-design="a"] .home-sheet{border-radius:20px}
/* B — tiles: the strip is the big gradient tile, every block a tile, coral where someone is needed */
html[data-design="b"] .home-head .t1{font-size:32px;font-weight:700;letter-spacing:-.02em}
html[data-design="b"] .home-strip{background:linear-gradient(160deg,#18234a 0%,#111a2e 65%);border-color:#22304f;border-radius:22px}
html[data-design="b"] .home-target .home-bar{background:#163d33}
html[data-design="b"] .home-target .home-bar>i{background:var(--d-mint)}
html[data-design="b"] .home-stats .num{font-weight:700;font-size:36px}
html[data-design="b"] .home-side .frame,html[data-design="b"] .home-sheet{border-radius:22px}
html[data-design="b"] .q-row{background:#0e1628;border-color:#1e2a44;box-shadow:none}
html[data-design="b"] .q-row.need{background:var(--d-hi-soft);border-color:rgba(251,113,133,.4)}
html[data-design="b"] .q-row.need .tag-accent{background:var(--d-hi);color:#0b1220}
html[data-design="b"] .q-row.need .btn-primary{background:var(--d-hi);border-color:var(--d-hi);color:#0b1220}
html[data-design="b"] .sb-track{background:#16213a}
/* C — the page reads like a report: a big headline, figures set large between hairlines, lists not boxes */
html[data-design="c"] .home-head .t1{font-size:44px;line-height:1.05}
html[data-design="c"] .home-head .hd{letter-spacing:.1em}
html[data-design="c"] .home-strip{padding:16px 0 0;gap:0}
html[data-design="c"] .home-vr{display:none}
html[data-design="c"] .home-target{padding-inline-end:28px}
html[data-design="c"] .home-stats{gap:0}
html[data-design="c"] .home-stats .stat{padding:0 20px;border-inline-start:1px solid var(--d-line)}
html[data-design="c"] .home-stats .num{font-size:48px}
html[data-design="c"] .home-bar{height:5px;border-radius:0;background:#e4ded0}
html[data-design="c"] .home-bar>i{border-radius:0;background:var(--color-text)}
html[data-design="c"] .home-col{gap:0}
html[data-design="c"] .home-col>.home-bh{border-top:2px solid var(--d-rule);padding:12px 0 6px}
html[data-design="c"] .home-col>.home-bh .t2{font-size:24px}
html[data-design="c"] .q-row{border:0;border-top:1px solid var(--d-line);border-radius:0;background:transparent;box-shadow:none;padding:15px 0}
html[data-design="c"] .q-row.need .tag-accent{background:var(--d-hi);color:#1e2a44}
html[data-design="c"] .q-row .btn-primary{background:var(--color-text)}
html[data-design="c"] .home-side .frame{padding:12px 0 0}
html[data-design="c"] .sb-track{height:6px;border-radius:0;background:#e4ded0}
html[data-design="c"][data-mode="dark"] .sb-track,html[data-design="c"][data-mode="dark"] .home-bar{background:rgba(255,255,255,.1)}
html[data-design="c"] .sb-track>i{border-radius:0}
html[data-design="c"] .home-sheet{padding:12px 0 0}

/* ═══ 6 · THE PIPELINE — A columns · B lanes · C a list ═══════════════════════════════════════════════ */
html[data-design] .bcard{border-radius:14px;border:1px solid var(--d-line);border-inline-start-width:1px;border-inline-start-color:var(--d-line)!important;background:var(--card);padding:12px 13px;gap:5px;box-shadow:var(--shadow)}
html[data-design] .bcard:hover{border-color:var(--color-accent-400)!important}
html[data-design] .bc-name{font-weight:700}
html[data-design] .bc-foot .tag{font-size:10.5px;padding:3px 8px}
/* A — columns with a tinted head, white cards on the ground */
html[data-design="a"] .bboard{gap:14px}
html[data-design="a"] .bcol{min-width:220px;gap:10px}
html[data-design="a"] .bcol-head{border-top:0;background:var(--color-accent-100);border-radius:12px;padding:10px 12px;align-items:center}
html[data-design="a"] .bcol-head .hd{color:var(--color-accent-800);font-weight:800}
html[data-design="a"] .bcol-head .mono{color:var(--color-accent-800)}
html[data-design="a"][data-mode="dark"] .bcol-head{background:color-mix(in srgb,var(--color-accent-400) 16%,transparent)}
html[data-design="a"][data-mode="dark"] .bcol-head .hd,html[data-design="a"][data-mode="dark"] .bcol-head .mono{color:var(--color-accent-200)}
html[data-design="a"] .bcol[data-col="Closed Won"] .bcol-head{background:var(--color-text)}
html[data-design="a"] .bcol[data-col="Closed Won"] .bcol-head .hd,html[data-design="a"] .bcol[data-col="Closed Won"] .bcol-head .mono{color:var(--color-bg)}
/* B — one lane per stage, read top to bottom; the stage name holds the left edge of its lane */
html[data-design="b"] .bboard{flex-direction:column;gap:0;overflow:visible;background:#0e1628;border:1px solid var(--d-line);border-radius:22px;padding:0;scroll-snap-type:none}
html[data-design="b"] .bcol{flex:none;min-width:0;max-width:none!important;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:12px;position:relative;
  padding-block:14px;padding-inline:224px 16px;border-top:1px solid var(--d-line);min-height:76px}
html[data-design="b"] .bcol:first-child{border-top:0}
html[data-design="b"] .bcol-head{position:absolute;inset-inline-start:0;top:0;bottom:0;width:206px;border:0;border-inline-end:1px solid var(--d-line);
  padding:16px 18px;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}
html[data-design="b"] .bcol-head .hd{color:#fff;font-weight:600;font-size:13px}
html[data-design="b"] .bcol-head .mono{color:var(--muted)}
html[data-design="b"] .bcard{width:244px;flex:none;background:#111a2e;border-color:#22304f}
html[data-design="b"] .bcol-empty{align-self:center;color:var(--muted)}
html[data-design="b"] .bcol>.btn-ghost{align-self:center}
html[data-design="b"] .bcol[data-col="Closed Won"]{background:#0f2a24}
html[data-design="b"] .bcol[data-col="Closed Won"] .bcol-head .hd{color:var(--d-mint)}
html[data-design="b"] .bcol.focus{box-shadow:inset 0 0 0 2px #9aa0ff}
/* C — the stages as sections of one list, the stage name in the margin, each deal one ruled line */
html[data-design="c"] .bboard{flex-direction:column;gap:22px;overflow:visible;scroll-snap-type:none}
html[data-design="c"] .bcol{display:block;flex:none;min-width:0;max-width:none!important;position:relative;padding-inline-start:240px;border-top:2px solid var(--d-rule);min-height:64px}
html[data-design="c"] .bcol-head{position:absolute;inset-inline-start:0;top:12px;width:212px;border:0;padding:0;display:block}
html[data-design="c"] .bcol-head .hd{font:600 19px/1.2 'Space Grotesk',var(--font-heading);letter-spacing:-.01em;text-transform:none;color:var(--color-text)}
html[data-design="c"] .bcol-head .hd .bi-ar{font-size:12px;letter-spacing:0}
html[data-design="c"] .bcol-head .mono{display:block;margin-top:4px;font:500 12.5px var(--font-body);color:var(--muted)}
html[data-design="c"] .bcard{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) auto;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--d-line);
  border-radius:0;background:transparent;box-shadow:none;padding:13px 4px;width:100%}
html[data-design="c"] .bcard:last-of-type{border-bottom:0}
html[data-design="c"] .bcard:hover{background:var(--hover)}
html[data-design="c"] .bc-name{font-weight:600}
html[data-design="c"] .bc-foot{margin:0;gap:12px;justify-content:flex-end}
html[data-design="c"] .bcol-empty{padding:16px 4px}
html[data-design="c"] .bcol.focus{box-shadow:none;background:var(--d-hi-soft)}

/* ═══ 7 · THE DEAL — A a step line on top · B a vertical journey · C a stage river ═════════════════════ */
html[data-design] .deal-head{padding:20px 28px}
html[data-design] .dh-logo{border-radius:14px;border:0;background:var(--color-accent);color:var(--color-on-accent);font:800 16px/46px var(--font-heading)}
html[data-design] .dh-facts{gap:14px}
html[data-design] .deal-body{padding:22px 28px}
html[data-design] .deal-foot{background:var(--card);border-top-color:var(--d-line)}
html[data-design] .dl-note{border-radius:12px;border-color:var(--d-line)}
html[data-design] .step-box{border-radius:5px}
html[data-design] .dp-chip{border-radius:999px}
/* A and C — the rail lies down across the top: the way back and the links on one line, the stages under it */
html[data-design="a"] .deal-page,html[data-design="c"] .deal-page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(100vh - var(--d-top))}
html[data-design="a"] .deal-rail,html[data-design="c"] .deal-rail{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head foot" "st st";align-items:center;
  border-inline-end:0;border-bottom:1px solid var(--d-line);background:var(--card)}
html[data-design="a"] .dr-head,html[data-design="c"] .dr-head{grid-area:head;display:flex;align-items:center;gap:16px;border:0;padding:12px 28px 4px}
html[data-design="a"] .dr-head .hd,html[data-design="c"] .dr-head .hd{margin:0}
html[data-design="a"] .dr-foot,html[data-design="c"] .dr-foot{grid-area:foot;flex-direction:row;justify-content:flex-end;gap:22px;border:0;padding:12px 28px 4px}
html[data-design="a"] .dr-link,html[data-design="c"] .dr-link{gap:8px;justify-content:flex-start}
html[data-design="a"] .dr-stages,html[data-design="c"] .dr-stages{grid-area:st;flex-direction:row;overflow-x:auto;overflow-y:visible;gap:0;padding:10px 28px 16px}
html[data-design="a"] .dr-st,html[data-design="c"] .dr-st{flex:1 1 0;min-width:84px;width:auto;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;padding:4px 4px;background:transparent!important;box-shadow:none!important}
html[data-design="a"] .dr-st .b1,html[data-design="a"] .dr-st .b2,html[data-design="a"] .dr-st .t3{font:600 12px/1.25 var(--font-body)}
html[data-design="a"] .dr-st::before{content:'';position:absolute;top:18px;inset-inline-start:-50%;inset-inline-end:50%;height:3px;background:var(--color-neutral-300);z-index:0}
html[data-design="a"] .dr-st:first-child::before{content:none}
html[data-design="a"] .dr-st.done::before,html[data-design="a"] .dr-st.cur::before{background:var(--color-accent)}
html[data-design="a"] .dr-box{width:30px;height:30px;border-radius:50%;z-index:1;background:var(--color-neutral-200);color:var(--color-neutral-600);font:700 12px/1 var(--font-body);border:0!important}
html[data-design="a"] .dr-st.done .dr-box{background:var(--color-accent);color:var(--color-on-accent)}
html[data-design="a"] .dr-st.on .dr-box{box-shadow:0 0 0 4px var(--color-accent-200)}
html[data-design="a"] .dr-st.cur .dr-box{background:var(--card);border:3px solid var(--color-accent)!important;color:var(--color-accent);box-shadow:0 0 0 5px var(--color-accent-100)}
html[data-design="a"] .dr-st.cur .t3{color:var(--color-accent-800)}
html[data-design="a"][data-mode="dark"] .dr-st.cur .t3{color:var(--color-accent-200)}
html[data-design="a"] .dr-st.cur.won .dr-box{background:var(--color-accent);color:var(--color-on-accent)}
html[data-design="a"] .dr-st.next .b2{color:var(--muted)}
html[data-design="a"] button.dr-st:hover .dr-box{box-shadow:0 0 0 4px var(--color-accent-100)}
html[data-design="a"] .deal-head{background:var(--card);border-bottom-color:var(--d-line)}
html[data-design="a"] .dh-facts>div{background:var(--color-bg);border-radius:12px;padding:10px 14px}
/* C — the river: a bar per stage, ink for done, saffron for where it is now */
html[data-design="c"] .deal-rail{background:transparent}
html[data-design="c"] .dr-stages{gap:4px;padding:8px 56px 18px}
html[data-design="c"] .dr-head,html[data-design="c"] .dr-foot{padding-inline:56px}
html[data-design="c"] .dr-st{align-items:flex-start;text-align:start;border-top:6px solid var(--color-neutral-300);padding:10px 8px 6px;gap:2px}
html[data-design="c"] .dr-box{display:none}
html[data-design="c"] .dr-st .b1,html[data-design="c"] .dr-st .b2,html[data-design="c"] .dr-st .t3{font:600 12.5px/1.3 var(--font-body)}
html[data-design="c"] .dr-st.next .b2{color:var(--muted);font-weight:500}
html[data-design="c"] .dr-st.done{border-top-color:var(--color-text)}
html[data-design="c"] .dr-st.done:hover,html[data-design="c"] .dr-st.on{background:var(--hover)!important}
html[data-design="c"] .dr-st.cur{border-top-color:var(--d-hi);background:var(--d-hi-soft)!important}
html[data-design="c"] .dr-st.cur .t3{color:var(--color-text)}
html[data-design="c"] .dr-st.cur.won{border-top-color:var(--green)}
html[data-design="c"] .deal-head{padding:22px 56px;border-bottom:0}
html[data-design="c"] .deal-head .t1{font-size:44px;line-height:1.05}
html[data-design="c"] .dh-logo{border-radius:0;background:var(--color-text);color:var(--color-bg)}
html[data-design="c"] .dh-facts{border-top:2px solid var(--d-rule);padding-top:12px}
html[data-design="c"] .deal-body{padding:8px 56px 26px}
html[data-design="c"] .deal-foot{padding-inline:56px;background:var(--color-bg)}
/* B — the rail stays on the left as a journey: a line of travel, mint behind, indigo where it is */
html[data-design="b"] .deal-page{grid-template-columns:268px minmax(0,1fr)}
html[data-design="b"] .deal-rail{background:#0e1628;border-inline-end-color:var(--d-line)}
html[data-design="b"] .dr-head,html[data-design="b"] .dr-foot{border-color:var(--d-line)}
html[data-design="b"] .dr-stages{padding:18px 18px 8px;gap:0}
html[data-design="b"] .dr-st{position:relative;align-items:flex-start;gap:12px;padding:0 0 18px;background:transparent!important;box-shadow:none!important}
html[data-design="b"] .dr-st::before{content:'';position:absolute;inset-inline-start:13px;top:30px;bottom:2px;width:2px;background:#22304f}
html[data-design="b"] .dr-st:last-child::before{content:none}
html[data-design="b"] .dr-st.done::before{background:var(--d-mint)}
html[data-design="b"] .dr-box{width:28px;height:28px;border-radius:50%;border:0!important;background:#16213a;color:#5a6788;font:700 11.5px/1 var(--font-body)}
html[data-design="b"] .dr-st.done .dr-box{background:var(--d-mint);color:#062a1d}
html[data-design="b"] .dr-st.on .dr-box{box-shadow:0 0 0 4px rgba(52,211,153,.25)}
html[data-design="b"] .dr-st.cur .dr-box{background:#7c83ff;color:#0b1220;box-shadow:0 0 0 5px rgba(124,131,255,.22)}
html[data-design="b"] .dr-st.cur.won .dr-box{background:var(--d-mint)}
html[data-design="b"] .dr-st .b1,html[data-design="b"] .dr-st .b2,html[data-design="b"] .dr-st .t3{padding-top:5px;font:600 13px/1.3 var(--font-body)}
html[data-design="b"] .dr-st.cur .t3{color:#fff}
html[data-design="b"] .dr-st.next .b2{color:#5a6788}
html[data-design="b"] .deal-head{background:linear-gradient(160deg,#18234a,#0b1220 70%);border-bottom-color:var(--d-line)}
html[data-design="b"] .dh-facts>div{background:#111a2e;border:1px solid var(--d-line);border-radius:14px;padding:10px 14px}
html[data-design="b"] .deal-body>.frame{background:#111a2e}
@media(max-width:900px){
  html[data-design] .deal-page{grid-template-columns:1fr!important;height:auto!important}
  html[data-design="b"] .dr-stages{flex-direction:row;flex-wrap:wrap}
}

/* ═══ 8 · THE OTHER SCREENS — lists, records, requests, activities, reports, settings ═══════════════════ */
html[data-design] .split-list{background:var(--card);border-inline-end-color:var(--d-line)}
html[data-design="c"] .split-list{background:transparent}
html[data-design] .sl-row{border-radius:12px;border-color:var(--d-line);background:var(--card)}
html[data-design] .sl-row.on{background:var(--blue-bg);border-color:var(--color-accent-400)}
html[data-design="c"] .sl-row{border-radius:0;border:0;border-bottom:1px solid var(--d-line);background:transparent}
html[data-design="c"] .sl-row.on{background:var(--d-hi-soft);box-shadow:inset 3px 0 0 var(--d-hi)}
html[data-design] .sl-sel{border-radius:999px}
html[data-design] .rec-head{border-bottom-color:var(--d-line)}
html[data-design] .rec-tabs .tab.active{color:var(--color-text);box-shadow:inset 0 -3px 0 var(--color-accent)}
html[data-design="c"] .rec-tabs .tab.active{box-shadow:inset 0 -3px 0 var(--d-hi)}
html[data-design] .walk i{border-radius:4px;border-color:var(--color-neutral-300)}
html[data-design] .fcard,html[data-design] .act-row,html[data-design] .ap-c{border-radius:14px;border-color:var(--d-line);background:var(--card);box-shadow:var(--shadow)}
html[data-design] .ap-c,html[data-design] .fcard.back,html[data-design] .act-row.need{border-inline-start-width:1px}
html[data-design="a"] .ap-c{border-inline-start:4px solid var(--d-hi)}
html[data-design="b"] .ap-c{border-color:rgba(251,113,133,.35);background:linear-gradient(160deg,rgba(251,113,133,.08),#111a2e 60%)}
html[data-design="c"] :is(.fcard,.act-row,.ap-c){border-radius:0;border:0;border-top:1px solid var(--d-line);background:transparent;box-shadow:none}
html[data-design="c"] .ap-c{border-top:2px solid var(--d-rule);padding-inline:0}
html[data-design] .fcol-head{border-top:0;background:var(--color-accent-100);border-radius:12px;padding:10px 12px}
html[data-design="b"] .fcol-head{background:#1a2442}
html[data-design="c"] .fcol-head{background:transparent;border-radius:0;border-top:2px solid var(--d-rule);padding:12px 0 4px}
html[data-design][data-mode="dark"]:not([data-design="b"]) .fcol-head{background:color-mix(in srgb,var(--color-accent-400) 14%,transparent)}
html[data-design="c"][data-mode="dark"] .fcol-head{background:transparent}
html[data-design] .mcal-d{border-radius:8px}
html[data-design] .cal-day{border-radius:12px;border-color:var(--d-line);background:var(--card)}
html[data-design="c"] .cal-day{border-radius:0;background:transparent}
html[data-design] .cfg-nav{background:var(--card);border-inline-end-color:var(--d-line)}
html[data-design="c"] .cfg-nav{background:transparent}
html[data-design] .cfg-item{border-radius:10px}
html[data-design] .cfg-item.on{background:var(--color-accent);color:var(--color-on-accent)}
html[data-design="c"] .cfg-item{border-radius:0}
html[data-design="c"] .cfg-item.on{background:transparent;color:var(--color-text);box-shadow:inset 3px 0 0 var(--d-hi);font-weight:700}
html[data-design] .rep-kpi .num{font-size:32px}
html[data-design] .rpt-tab.on{border-color:var(--color-accent);background:var(--blue-bg)}
html[data-design="c"] .rpt-tab{border-top-width:2px}
html[data-design="c"] .rpt-tab.on{background:var(--d-hi-soft);border-top-color:var(--d-hi)}
html[data-design] .perm-chip,html[data-design] .perm-card,html[data-design] .cl-tab,html[data-design] .who-chip,html[data-design] .ix-opt{border-radius:999px}
html[data-design] .perm-card{border-radius:14px}
html[data-design] .ix-status,html[data-design] .ix-copy code,html[data-design] .rpt-pick,html[data-design] .rpt-table,html[data-design] .pb-help,html[data-design] .rpt-sel{border-radius:12px}
html[data-design="c"] :is(.ix-status,.rpt-pick,.rpt-table,.pb-help,.rpt-sel,.perm-card){border-radius:0}
html[data-design] .pb-switch input+span{border-radius:999px}
html[data-design] .dl-past>summary{border-radius:10px}

/* ═══ 9 · NARROWER SCREENS ═══════════════════════════════════════════════════════════════════════════
   A and C keep their top menu at every width (it scrolls sideways when the names do not fit); B keeps the
   app's own rules — a 64px icon rail on a tablet. */
@media (max-width:1100px){
  html[data-design="a"] .sidebar,html[data-design="c"] .sidebar{padding:0 16px!important}
  html[data-design="c"] .sidebar{padding:12px 20px 0!important}
  html[data-design="a"] .topbar,html[data-design="c"] .topbar{padding:0 18px}
  html[data-design="a"] .content,html[data-design="c"] .content{padding:4px 18px 28px}
  html[data-design="c"] .dr-stages,html[data-design="c"] .deal-body,html[data-design="c"] .deal-head,html[data-design="c"] .deal-foot,
  html[data-design="c"] .dr-head,html[data-design="c"] .dr-foot{padding-inline:18px}
  html[data-design="b"] .dsw-nav{display:none!important}
  html[data-design="b"] .dsw-top{display:inline-flex}
  html[data-design="c"] .bcol{padding-inline-start:0;padding-top:52px}
  html[data-design="c"] .bcol-head{width:auto}
  html[data-design="b"] .bcol{padding-inline-start:16px;padding-top:56px}
  html[data-design="b"] .bcol-head{bottom:auto;width:100%;border-inline-end:0;padding:14px 16px 0;flex-direction:row;gap:10px}
}
@media (max-width:860px){
  html[data-design="a"] .sidebar,html[data-design="c"] .sidebar{transform:none!important;position:sticky!important}
  html[data-design="a"] .main,html[data-design="c"] .main{min-height:0}
}

/* the Design row in the account menu; Nightshift is always dark, so the Appearance row rests while it is on */
.dsw-menu .dsw-o{width:auto;height:32px;border-radius:0;font:500 12.5px var(--font-body);color:var(--text);padding:0 8px;white-space:nowrap}
.dsw-menu .dsw-o.on{background:var(--color-accent);color:var(--color-on-accent)}
html[data-design="b"] .appear:not(.dsw-menu){opacity:.4;pointer-events:none}
html[data-design] .acct-menu{width:300px}

/* the brand — Nightshift names the company beside its mark; Briefing sets the name alone, with a saffron full stop */
@media (min-width:1101px){html[data-design="b"] .brand{font:700 15px/1.2 var(--font-heading);color:#fff;gap:10px;white-space:nowrap;overflow:hidden;padding:0 6px 14px}}
html[data-design="b"] .brand small{display:none}
html[data-design="c"] .brand::before{content:none}
html[data-design="c"] .brand::after{margin-inline-start:-10px}
html[data-design="c"] .nav-item.active .nav-l,html[data-design="c"] .nav-item:hover .nav-l{color:inherit}
@media (min-width:1101px){html[data-design="b"] .brand{white-space:normal;line-height:1.25;font-size:14px}
  html[data-design="b"] .brand::before{flex:none;width:30px;height:30px}}
/* the top menu fades at its far edge, so a menu that does not fit says there is more to scroll to */
html[data-design="a"] .sb-nav,html[data-design="c"] .sb-nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);padding-inline-end:36px}
html[dir="rtl"][data-design="a"] .sb-nav,html[dir="rtl"][data-design="c"] .sb-nav{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
/* Nightshift: the stages still to come stay readable on navy */
html[data-design="b"] .dr-st.next .b2,html[data-design="b"] .dr-st.next .dr-box{color:#7d8ab0}
/* a full-height page (the deal, institutions, groups, Account Manager, settings) draws its own edges — the content
   area keeps no padding of its own, or the page would be taller than the window and slide under the menu */
html[data-design] .content.bleed{padding:0}

/* ═══ The deal page gives the work the room (client, 11 Oct 2026: "the window where I work is so small") ═══
   The page scrolls as a whole instead of squeezing the stage's work into a window under the header: the stages
   and the deal's identity scroll away, the action bar stays pinned to the bottom. The "Stage progression" row is
   not drawn — the rail (across the top in A and C, down the side in B) already shows every stage and opens them. */
html[data-design] .deal-page{height:auto!important;min-height:calc(100vh - var(--d-top))}
html[data-design] .deal-main{min-height:0}
html[data-design] .deal-body{overflow:visible;flex:1}
html[data-design] .deal-foot{position:sticky;bottom:0;z-index:6;box-shadow:0 -6px 18px rgba(0,0,0,.06)}
html[data-design] .deal-body>.dl-progress{display:none}
html[data-design="b"] .deal-rail{position:sticky;top:0;height:100vh;align-self:start}
/* a quieter header: the name one size down, the facts on one tight line */
html[data-design] .deal-head{padding-top:16px;padding-bottom:14px}
html[data-design] .deal-head .t1{font-size:26px}
html[data-design="c"] .deal-head .t1{font-size:30px;line-height:1.1}
html[data-design] .dh-logo{width:40px;height:40px;line-height:40px}
html[data-design] .dh-facts{margin-top:12px}
html[data-design="c"] .dh-facts{padding-top:10px}
html[data-design="c"] .dr-stages{padding-top:4px;padding-bottom:10px}
html[data-design="c"] .dr-st{padding:8px 8px 4px}
html[data-design="a"] .dr-stages{padding-top:4px;padding-bottom:10px}
/* the selects in the title bar keep their own height and padding (the form rule above must not squeeze them) */
html[data-design] .tb-tools select,html[data-design] .tb-tools input[type=date]{height:38px;padding:0 30px 0 12px;line-height:36px}
html[data-design] .tb-tools input[type=date]{padding:0 10px}
html[data-design] .tb-tools .btn{height:38px}
html[data-design] .grp-total .num{font-size:24px;letter-spacing:-.01em}
html[data-design="c"] .grp-total{border-radius:0;background:transparent;border:0;border-inline-end:1px solid var(--d-line)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   D · PRISM (11 Oct 2026) — "think out of the box … not for the skin only: the dashboard, the colours, the data".
   A floating dark dock on the left (each page's icon with its name under it), warm white ground, ink for the actions,
   and a COLOUR PER STAGE: the ten stages run a spectrum from blue (Contact) to green (Closed Won), and every Prism
   screen that shows a stage uses its colour — the dashboard's flow bar and queue, the pipeline's columns and cards,
   the deal's stage bar. Headings in Bricolage Grotesque, text in DM Sans (IBM Plex Sans Arabic for Arabic).
   The dashboard is drawn by dashPrism() (04-dashboard.js) from the same data as the other designs.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
html[data-design="d"]{
  --st-1:#3b82f6;--st-2:#6366f1;--st-3:#a855f7;--st-4:#ec4899;--st-5:#f43f5e;
  --st-6:#f97316;--st-7:#eab308;--st-8:#84cc16;--st-9:#22c55e;--st-10:#0f9d6b;
  --k0:#3b82f6;--k1:#0f9d6b;--k2:#ff6a3d;--k3:#a855f7;--k4:#eab308;
  --color-bg:#f4f3ef;--color-surface:#ffffff;--color-text:#141414;--color-divider:#e7e5df;--color-muted:#6b6a65;
  --color-neutral-100:#f8f7f4;--color-neutral-200:#efeee9;--color-neutral-300:#e2e0d9;--color-neutral-400:#c9c6bd;
  --color-neutral-500:#a19e95;--color-neutral-600:#7c7a73;--color-neutral-700:#57564f;--color-neutral-800:#36352f;--color-neutral-900:#1d1d1a;
  --color-accent-100:#eef2ff!important;--color-accent-200:#dce3ff!important;--color-accent-300:#b8c6ff!important;--color-accent-400:#7f96ff!important;
  --color-accent-500:#5170ff!important;--color-accent-600:#2b50ff!important;--color-accent-700:#1f3bd1!important;--color-accent-800:#1a2e9e!important;
  --color-accent-900:#121c5c!important;--color-accent-base:#2b50ff!important;
  --color-accent:#2b50ff;--color-accent-hover:#1f3bd1;--color-accent-press:#1a2e9e;--color-on-accent:#ffffff;
  --color-rail:#141414;--color-rail-ink:#ffffff;
  --card:#ffffff;--panel2:#efeee9;--hover:#f3f2ee;--border:var(--color-divider);--accent-soft:#eef2ff;
  --blue-bg:#eef2ff;--blue-border:#b8c6ff;--blue-t:#1a2e9e;
  --purple-bg:#f5efff;--purple-border:#dcc7ff;--purple-t:#5b21b6;
  --green-bg:#e7f7ef;--green-border:#a7e3c4;--green-t:#0b6b49;
  --amber-bg:#fff0ea;--amber-border:#ffc7b3;--amber-t:#b23a12;
  --red-bg:#ffe8ea;--red-border:#ffc2c8;--red-t:#be123c;
  --gray-bg:#efeee9;--gray-t:#57564f;
  --green:#0f9d6b;--amber:#ff6a3d;--red:#e11d48;
  --sb-text:#b9b7b0;--sb-muted:#77756e;--sb-line:#2a2a2a;
  --font-body:'DM Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Bricolage Grotesque','IBM Plex Sans Arabic',system-ui,sans-serif;
  --shadow:0 1px 0 rgba(20,20,20,.03);--shadow-lg:0 24px 60px rgba(20,20,20,.18);
  --d-r:20px;--d-r-sm:12px;--d-pill:999px;--d-line:#e7e5df;--d-input:#ffffff;--d-input-line:#dad8d0;
  --d-nav:#141414;--d-nav-ink:#b9b7b0;--d-hi:#ff6a3d;--d-hi-soft:#fff0ea;--d-hi-ink:#b23a12;--d-head:76px;--d-top:0px;
  color-scheme:light}
html[data-design="d"][data-mode="dark"]{
  --color-bg:#0f0f11;--color-surface:#18181b;--color-text:#f2f1ec;--color-divider:#26262b;--color-muted:#9d9b94;
  --color-neutral-100:#1b1b1f;--color-neutral-200:#202025;--color-neutral-300:#2c2c32;--color-neutral-400:#3c3c43;
  --color-neutral-500:#62615c;--color-neutral-600:#8b8a84;--color-neutral-700:#b5b3ac;--color-neutral-800:#d9d7d0;--color-neutral-900:#f2f1ec;
  --color-accent:#7f96ff;--color-accent-hover:#a3b4ff;--color-accent-press:#b8c6ff;--color-on-accent:#0f0f11;
  --card:#18181b;--panel2:#1d1d21;--hover:#202025;--accent-soft:rgba(127,150,255,.14);
  --blue-bg:rgba(127,150,255,.14);--blue-border:rgba(127,150,255,.4);--blue-t:#b8c6ff;
  --green-bg:rgba(15,157,107,.16);--green-border:rgba(15,157,107,.45);--green-t:#6ee7b7;
  --amber-bg:rgba(255,106,61,.14);--amber-border:rgba(255,106,61,.45);--amber-t:#ffb199;
  --red-bg:rgba(225,29,72,.14);--red-border:rgba(225,29,72,.45);--red-t:#fda4af;
  --purple-bg:rgba(168,85,247,.14);--purple-border:rgba(168,85,247,.4);--purple-t:#d8b4fe;
  --gray-bg:rgba(255,255,255,.06);--gray-t:#b5b3ac;
  --shadow:none;--shadow-lg:0 0 0 1px #2c2c32,0 24px 60px rgba(0,0,0,.6);
  --d-line:#26262b;--d-input:#18181b;--d-input-line:#34343a;--d-nav:#050506;--d-hi-soft:rgba(255,106,61,.12);--d-hi-ink:#ffb199;
  color-scheme:dark}

/* the dock — floating, dark, every page named under its icon */
html[data-design="d"] .sidebar{position:sticky!important;top:12px;margin:12px 0 12px 12px;height:calc(100vh - 24px)!important;width:108px!important;
  border-radius:26px;background:var(--d-nav);padding:14px 8px!important;align-items:stretch;gap:2px;transform:none!important;
  box-shadow:0 18px 40px rgba(20,20,20,.18);overflow-y:auto;scrollbar-width:none;flex:none;z-index:30}
html[dir="rtl"][data-design="d"] .sidebar{margin:12px 12px 12px 0}
html[data-design="d"] .sidebar::-webkit-scrollbar{display:none}
html[data-design="d"] .sb-nav{display:flex;flex-direction:column;gap:3px}
html[data-design="d"] .sb-label{width:44px;margin:6px auto;height:1px;background:#2a2a2a}
html[data-design="d"] .brand{width:auto;margin:0 0 10px;padding:0 0 6px!important;font-size:0;line-height:0;justify-content:center;align-items:center}
html[data-design="d"] .brand::before{content:'';width:42px;height:42px;border-radius:14px;
  background:conic-gradient(from 210deg,var(--st-1),var(--st-3),var(--st-5),var(--st-7),var(--st-9),var(--st-1))}
html[data-design="d"] .brand img{max-width:76px!important;max-height:44px!important;border-radius:10px;background:#fff;padding:3px}
html[data-design="d"] .nav-item{width:auto;height:auto;min-height:58px;margin:0;padding:9px 4px 8px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:16px;font-size:0;line-height:0;color:var(--d-nav-ink);background:transparent;box-shadow:none;text-align:center}
html[data-design="d"] .nav-item svg{display:block;width:20px;height:20px;stroke-width:1.7}
html[data-design="d"] .nav-l{display:flex!important;flex-direction:column;align-items:center;font:600 11.5px/1.2 var(--font-body);color:inherit;white-space:normal;max-width:96px}
html[data-design="d"] .nav-l .bi-ar{font-size:10.5px;font-weight:500;color:inherit;opacity:.72;margin-top:2px}
html[data-design="d"] .nav-item:hover{background:#232323;color:#fff}
html[data-design="d"] .nav-item.active{background:#fff;color:#141414;box-shadow:none}
html[data-design="d"] .nav-item.active .nav-l{color:#141414;font-weight:700}
html[data-design="d"] .ap-badge{position:absolute;top:6px;right:18px;margin:0;background:var(--d-hi)}
html[dir="rtl"][data-design="d"] .ap-badge{right:auto;left:18px}
html[data-design="d"] .sb-user{margin-top:auto;justify-content:center;padding:10px 0 2px;border:0;gap:0}
html[data-design="d"] .sb-user>div:last-child{display:none!important}
html[data-design="d"] .sb-av{width:42px;height:42px;border-radius:50%;border:0;color:#141414;font:700 13px/1 var(--font-body);
  background:conic-gradient(from 30deg,var(--st-2),var(--st-4),var(--st-6),var(--st-8),var(--st-2))}
html[data-design="d"] #shell:not(.no-top) .dsw-nav{display:none}
html[data-design="d"] .dsw-nav{flex-wrap:wrap;justify-content:center;width:76px;margin:8px auto 0;background:#1f1f1f;border-color:#2c2c2c}
html[data-design="d"] .acct-menu{left:132px!important;right:auto;bottom:12px;top:auto}
html[dir="rtl"][data-design="d"] .acct-menu{left:auto!important;right:132px!important}
html[data-design="d"] .nav-toggle,html[data-design="d"] .scrim{display:none!important}
/* the page header: a large title and a round search */
html[data-design="d"] .topbar{height:auto!important;min-height:76px;padding:12px 28px 4px;background:transparent;border:0}
html[data-design="d"] .tb-title{font:700 28px/1.15 var(--font-heading);letter-spacing:-.025em}
html[data-design="d"] .tb-search{border-radius:999px;background:var(--card);border-color:var(--d-line);height:42px;width:300px;padding:0 16px;box-shadow:0 1px 2px rgba(20,20,20,.04)}
html[data-design="d"] .content{padding:10px 28px 40px}
html[data-design="d"] .dsw{border-radius:999px}
html[data-design="d"] .dsw-o{border-radius:999px}
html[data-design="d"] .dsw-o.on{background:#141414;color:#fff}
html[data-design="d"][data-mode="dark"] .dsw-o.on{background:#fff;color:#141414}

/* controls and cards */
html[data-design="d"] :is(.frame,.panel,.card,.am-file,.dp,.kcard,.am-stat,.am-card,.ap-card,.pb-card,.rpt-tab,.set-nav,.perm-group,.am-box,.am-rbox){
  background:var(--card);border:1px solid var(--d-line);border-radius:var(--d-r);box-shadow:var(--shadow)}
html[data-design="d"] .frm{border-radius:var(--d-r-sm);border-color:var(--d-line)}
html[data-design="d"] .btn{border-radius:12px;font-weight:600}
html[data-design="d"] .btn-primary{background:#141414;border-color:#141414;color:#fff}
html[data-design="d"] .btn-primary:hover{background:#2b2b2b;border-color:#2b2b2b}
html[data-design="d"][data-mode="dark"] .btn-primary{background:#f2f1ec;border-color:#f2f1ec;color:#141414}
html[data-design="d"] .seg{border-radius:999px;padding:4px}
html[data-design="d"] .seg-opt{border-radius:999px;padding:7px 14px}
html[data-design="d"] .seg-opt.on{background:#141414;color:#fff}
html[data-design="d"][data-mode="dark"] .seg-opt.on{background:#f2f1ec;color:#141414}
html[data-design="d"] .t1{font-weight:700;letter-spacing:-.03em}
html[data-design="d"] .num{font-weight:700;letter-spacing:-.03em}
html[data-design="d"] .hd{font-weight:600;color:var(--muted)}
html[data-design="d"] .tag-accent{background:var(--blue-bg);color:var(--blue-t)}

/* ── the dashboard (dashPrism) ── */
.dx{display:flex;flex-direction:column;gap:20px}
.dx-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-top:4px}
.dx-date{font:600 12px/1.4 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.dx-hi{font:700 46px/1.04 var(--font-heading);letter-spacing:-.035em;margin-top:8px}
.dx-line{font:500 16.5px/1.5 var(--font-body);color:var(--color-neutral-700);margin-top:10px}
.dx-line b{color:var(--d-hi-ink,#b23a12);font-weight:700}
.dx-dot{margin:0 9px;color:var(--color-neutral-400)}
.dx-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dx-flow{background:var(--card);border:1px solid var(--d-line);border-radius:26px;padding:20px 22px 22px}
.dx-bar{display:flex;gap:6px;min-height:124px;align-items:stretch}
.dx-seg{flex:1 1 0;min-width:46px;border:0;border-radius:16px;position:relative;overflow:hidden;cursor:pointer;font:inherit;text-align:start;
  background:color-mix(in srgb,var(--st) 14%,var(--card));color:var(--color-text);display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;padding:12px 12px 16px;transition:transform .15s,box-shadow .15s}
.dx-seg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--st)}
.dx-seg:hover{transform:translateY(-3px);box-shadow:0 10px 22px color-mix(in srgb,var(--st) 30%,transparent)}
.dx-seg:focus-visible{outline:2px solid var(--st);outline-offset:2px}
.dx-seg b{font:700 30px/1 var(--font-heading);letter-spacing:-.03em;color:color-mix(in srgb,var(--st) 72%,#000)}
html[data-mode="dark"] .dx-seg b{color:color-mix(in srgb,var(--st) 65%,#fff)}
.dx-seg>span{font:600 11.5px/1.25 var(--font-body);color:var(--color-neutral-700);max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dx-seg>span .bi-ar{font-size:10.5px;color:inherit}
.dx-seg.zero{background:var(--color-neutral-100)}
.dx-seg.zero b{color:var(--color-neutral-400)}
.dx-kpis{display:flex;gap:14px;flex-wrap:wrap}
.dx-tile{flex:1 1 150px;background:var(--card);border:1px solid var(--d-line);border-radius:22px;padding:18px 20px;position:relative;overflow:hidden}
.dx-tile::after{content:'';position:absolute;top:18px;inset-inline-end:18px;width:10px;height:10px;border-radius:50%;background:var(--k,var(--color-neutral-400))}
.dx-big{font:700 38px/1 var(--font-heading);letter-spacing:-.035em;margin-bottom:9px}
.dx-big span{font-size:18px;color:var(--muted);margin-inline-start:4px;font-weight:600}
.dx-target{flex:1.7 1 320px;display:flex;gap:18px;align-items:center;background:#141414;color:#fff;border:0}
.dx-target .hd,.dx-target .b3,.dx-target .dx-big span{color:rgba(255,255,255,.66)}
.dx-target::after{display:none}
html[data-mode="dark"] .dx-target{background:#202025;border:1px solid #2c2c32}
.dx-ring{width:92px;height:92px;flex:none;transform:rotate(-90deg)}
.dx-ring-bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:4}
.dx-ring-fg{fill:none;stroke:var(--d-hi,#ff6a3d);stroke-width:4;stroke-linecap:round}
.dx-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.dx-qg{margin-bottom:14px}
.dx-qg>.hd{margin:0 0 8px;text-transform:uppercase;letter-spacing:.07em;font-size:11px}
.dx-qi{position:relative;margin-bottom:8px}
.dx-qi::before{content:'';position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:5px;border-radius:0 5px 5px 0;background:var(--st);z-index:1}
.dx-qi .q-row{border-radius:18px;padding-inline-start:22px;box-shadow:none;background:var(--card);border:1px solid var(--d-line)}
.dx-qi .q-row.need{background:var(--card)}
.dx-qi .q-row.need .tag-accent{background:var(--d-hi-soft);color:var(--d-hi-ink)}
.dx-qi .q-row.need .btn-primary{background:var(--d-hi);border-color:var(--d-hi);color:#fff}
.dx-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.dx-side .frame{padding:18px}
.dx .home-sheet{border-radius:22px}
@media(max-width:1200px){.dx-grid{grid-template-columns:1fr}}
@media(max-width:900px){.dx-bar{flex-wrap:wrap}.dx-seg{min-width:110px;min-height:96px}.dx-hi{font-size:34px}}

/* ── the stage colours on the pipeline and the deal ── */
html[data-design="d"] [data-col="Contact"]{--st:var(--st-1)}html[data-design="d"] [data-col="Negotiation"]{--st:var(--st-2)}
html[data-design="d"] [data-col="Reviewing & Contracting"]{--st:var(--st-3)}html[data-design="d"] [data-col="Percentage Approval"]{--st:var(--st-4)}
html[data-design="d"] [data-col="Institution Signature"]{--st:var(--st-5)}html[data-design="d"] [data-col="Compliance"]{--st:var(--st-6)}
html[data-design="d"] [data-col="Management"]{--st:var(--st-7)}html[data-design="d"] [data-col="Onboarding"]{--st:var(--st-8)}
html[data-design="d"] [data-col="Integration"]{--st:var(--st-9)}html[data-design="d"] [data-col="Closed Won"]{--st:var(--st-10)}
html[data-design="d"] .bboard{gap:12px}
html[data-design="d"] .bcol{min-width:214px;gap:9px}
html[data-design="d"] .bcol-head{border:0;border-radius:14px;padding:11px 13px;align-items:center;background:color-mix(in srgb,var(--st,#999) 13%,var(--card));box-shadow:inset 0 -4px 0 var(--st,#999)}
html[data-design="d"] .bcol-head .hd{color:var(--color-text);font-weight:700;font-size:12.5px}
html[data-design="d"] .bcol-head .mono{color:color-mix(in srgb,var(--st,#999) 70%,var(--color-text));font:700 15px var(--font-heading)}
html[data-design="d"] .bcard{border-radius:16px;border-inline-start:5px solid var(--st,#999)!important;padding:12px 14px}
html[data-design="d"] .bcard:hover{border-color:var(--st,#999)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--st,#999) 22%,transparent)}
/* the deal: the stages as a colour bar across the top — done in its colour, the current one outlined */
html[data-design="d"] .deal-page{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto}
html[data-design="d"] .deal-rail{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head foot" "st st";align-items:center;border:0;background:transparent;padding:16px 28px 0}
html[data-design="d"] .dr-head{grid-area:head;display:flex;align-items:center;gap:16px;border:0;padding:0}
html[data-design="d"] .dr-head .hd{margin:0}
html[data-design="d"] .dr-foot{grid-area:foot;flex-direction:row;justify-content:flex-end;gap:22px;border:0;padding:0}
html[data-design="d"] .dr-link{gap:8px;justify-content:flex-start}
html[data-design="d"] .dr-stages{grid-area:st;flex-direction:row;gap:5px;padding:12px 0 6px;overflow-x:auto}
html[data-design="d"] .dr-st{flex:1 1 0;min-width:84px;width:auto;flex-direction:column;align-items:flex-start;gap:6px;padding:0 6px 6px;border-radius:12px;background:transparent!important;box-shadow:none!important;text-align:start}
html[data-design="d"] .dr-st::before{content:'';align-self:stretch;height:8px;border-radius:6px;background:color-mix(in srgb,var(--st) 22%,var(--color-neutral-200))}
html[data-design="d"] .dr-st.done::before{background:var(--st)}
html[data-design="d"] .dr-st.cur::before{background:var(--st);box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 30%,transparent)}
html[data-design="d"] .dr-st.cur{background:color-mix(in srgb,var(--st) 10%,transparent)!important}
html[data-design="d"] .dr-st.on{background:var(--hover)!important}
html[data-design="d"] .dr-box{display:none}
html[data-design="d"] .dr-st .b1,html[data-design="d"] .dr-st .b2,html[data-design="d"] .dr-st .t3{font:600 12px/1.25 var(--font-body);padding:0 2px}
html[data-design="d"] .dr-st.next .b2{color:var(--muted);font-weight:500}
html[data-design="d"] .dr-st.cur .t3{color:var(--color-text);font-weight:700}
html[data-design="d"] .dr-st.skip::before{background:repeating-linear-gradient(90deg,var(--color-neutral-300) 0 6px,transparent 6px 10px)}
html[data-design="d"] .dr-st:nth-child(1){--st:var(--st-1)}html[data-design="d"] .dr-st:nth-child(2){--st:var(--st-2)}
html[data-design="d"] .dr-st:nth-child(3){--st:var(--st-3)}html[data-design="d"] .dr-st:nth-child(4){--st:var(--st-4)}
html[data-design="d"] .dr-st:nth-child(5){--st:var(--st-5)}html[data-design="d"] .dr-st:nth-child(6){--st:var(--st-6)}
html[data-design="d"] .dr-st:nth-child(7){--st:var(--st-7)}html[data-design="d"] .dr-st:nth-child(8){--st:var(--st-8)}
html[data-design="d"] .dr-st:nth-child(9){--st:var(--st-9)}html[data-design="d"] .dr-st:nth-child(10){--st:var(--st-10)}
html[data-design="d"] .deal-head{margin:14px 28px 0;background:var(--card);border:1px solid var(--d-line);border-radius:22px;padding:18px 22px}
html[data-design="d"] .dh-logo{border-radius:14px;background:#141414;color:#fff}
html[data-design="d"] .dh-facts>div{background:var(--color-bg);border-radius:14px;padding:10px 14px}
html[data-design="d"] .deal-body{padding:18px 28px}
html[data-design="d"] .deal-foot{margin:0 28px 12px;border-radius:18px;border:1px solid var(--d-line);background:var(--card)}
/* the other lists */
html[data-design="d"] .ap-c{border-inline-start:5px solid var(--d-hi)}
html[data-design="d"] .fcol-head{background:var(--color-neutral-200)}
html[data-design="d"] .sl-row.on{background:var(--blue-bg);border-color:var(--color-accent)}
html[data-design="d"] .cfg-item.on{background:#141414;color:#fff}
html[data-design="d"][data-mode="dark"] .cfg-item.on{background:#f2f1ec;color:#141414}
html[data-design="d"] .grp-total{border-radius:16px}
@media (max-width:1100px){html[data-design="d"] .sidebar{width:96px!important}html[data-design="d"] .content{padding:8px 18px 28px}}
.dx-hi .bi-ar{display:block;font:500 17px/1.5 'IBM Plex Sans Arabic',var(--font-body);letter-spacing:0;color:var(--muted);margin-top:6px}
.dx-seg.zero{min-width:70px}
html[data-design="d"] .nav-item{min-height:50px;padding:7px 4px 6px;gap:4px}
html[data-design="d"] .nav-item svg{width:19px;height:19px}
html[data-design="d"] .sb-nav{gap:2px}
html[data-design="d"] .brand{margin-bottom:6px}
html[data-design="d"] .sidebar{width:144px!important;padding:12px 8px!important}   /* 13 Oct 2026, client: a little wider (was 118px) */
html[data-design="d"] .nav-item{min-height:0;padding:6px 3px 5px;gap:3px;border-radius:14px}
html[data-design="d"] .nav-l{font-size:11.5px;line-height:1.2;max-width:126px}
html[data-design="d"] .nav-l .bi-ar{font-size:10px;margin-top:1px}
html[data-design="d"] .sb-label{margin:4px auto}
html[data-design="d"] .brand::before{width:38px;height:38px}
html[data-design="d"] .acct-menu{left:168px!important}
html[dir="rtl"][data-design="d"] .acct-menu{right:168px!important}
html[data-design="d"] .sb-label{display:none}
html[data-design="d"] .brand{margin-bottom:4px;padding-bottom:2px!important}
html[data-design="d"] .sb-user{padding-top:6px}
/* on the full-height pages (no title bar) the switch takes the logo's place at the top of the dock, so the dock still fits */
html[data-design="d"] #shell.no-top .brand{display:none}
html[data-design="d"] .dsw-nav{order:-1;flex-wrap:nowrap;width:auto;margin:0 0 8px;padding:3px;gap:1px;justify-content:space-between}
html[data-design="d"] .dsw-nav .dsw-o{width:23px;height:28px;font-size:11.5px}

/* Prism, 11 Oct 2026 (client): no coloured circles in the dock; the account sits top right — one click opens day / night,
   the designs, the language and sign out (the account menu). The dock keeps its own account chip only on full-height pages,
   where there is no title bar. */
.tb-user{display:none;border:0;background:transparent;padding:0;cursor:pointer;flex:none;border-radius:50%}
.tb-av{width:40px;height:40px;border-radius:50%;background:var(--color-text);color:var(--color-bg);display:grid;place-items:center;font:700 13px/1 var(--font-body)}
.tb-user:hover .tb-av,.tb-user:focus-visible .tb-av{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 35%,transparent)}
html[data-design="d"] .tb-user{display:inline-flex}
html[data-design="d"] .dsw-top,html[data-design="d"] .dsw-nav{display:none!important}
html[data-design="d"] #shell:not(.no-top) .sb-user{display:none}
html[data-design="d"] #shell:not(.no-top) .acct-menu{top:84px;bottom:auto;left:auto!important;right:24px!important}
html[dir="rtl"][data-design="d"] #shell:not(.no-top) .acct-menu{right:auto!important;left:24px!important}
html[data-design="d"] #shell.no-top .brand{display:flex}
html[data-design="d"] .brand::before{content:none}
html[data-design="d"] .brand{font:700 12px/1.25 var(--font-heading);color:#fff;text-align:center;white-space:normal;padding:6px 4px 8px!important;flex-direction:column}
html[data-design="d"] .brand small{display:none}
html[data-design="d"] .brand img{max-height:38px!important;max-width:92px!important}
html[data-design="d"] .sb-av{background:#fff;color:#141414}
/* the four designs in the account menu, two by two */
.dsw-menu{display:grid!important;grid-template-columns:1fr 1fr}
.dsw-menu .appear-btn+.appear-btn{border-left:0}
.dsw-menu .dsw-o{border:0;border-bottom:1px solid var(--border)!important}
.dsw-menu .dsw-o:nth-child(odd){border-inline-end:1px solid var(--border)!important}
.dsw-menu .dsw-o:nth-child(n+3){border-bottom:0!important}
html[data-design="d"] .brand{font-size:11px;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;max-height:42px;padding:4px 4px 2px!important}
html[data-design="d"] .brand:has(img){display:flex!important;max-height:none;-webkit-line-clamp:unset}
/* every stage's colour, in every design — the dashboard's stage dots (Prism also colours its pipeline and deal bar) */
html[data-design]{--st-1:#3b82f6;--st-2:#6366f1;--st-3:#a855f7;--st-4:#ec4899;--st-5:#f43f5e;--st-6:#f97316;--st-7:#eab308;--st-8:#84cc16;--st-9:#22c55e;--st-10:#0f9d6b}
html[data-design="c"] .dh2-chip{border-top-width:0;border-inline-start-width:4px}
html[data-design="d"] .dh2-row>.dh2-target.dx-tile{flex:1.7 1 300px}
/* Prism: the company logo is never squeezed (a full dock used to shrink it to a sliver) and sits on its own white tile */
html[data-design="d"] .sidebar>*{flex-shrink:0}
html[data-design="d"] .brand:has(img){overflow:visible;padding:2px 0 8px!important;justify-content:center}
html[data-design="d"] .brand>div:first-child{background:#fff!important;padding:8px 8px!important;border-radius:14px;width:100%;box-sizing:border-box;display:flex;justify-content:center}
html[data-design="d"] .brand img{max-width:100%!important;max-height:44px!important;width:auto;height:auto;object-fit:contain;border-radius:0;padding:0;background:transparent}
html[data-design="d"] .brand:has(img){padding:0 0 4px!important}
html[data-design="d"] .brand>div:first-child{padding:6px 8px!important}