/*! DCS design system v1 — dcs.css  (17/10/2026)
 * One stylesheet for every DCS page: internal tool (/in/*), intro pages (/intro/*), partner pages (/s/*), public stub.
 * Dependency-free: no CDN, no web fonts. Pair with dcs.js (optional; every component renders without JS).
 * Docs + wireframes: topics/portal/docs/DESIGN.md · living gallery: src/kit/index.html
 *
 * CONTENTS
 *  1 tokens (light) · 2 dark tokens (prefers-color-scheme + [data-theme]) · 3 base · 4 layout
 *  5 app bar + desktop nav + menu · 6 bottom tab bar · 7 page header + toolbar · 8 tabs / segmented / panes / levels
 *  9 KPI strip + tiles · 10 cards · 11 tables (+ stack-to-cards) · 12 pills / badges / status sets
 * 13 kanban board · 14 forms + inline-edit cells · 15 buttons · 16 empty · 17 toast · 18 sheet / modal
 * 19 progress + stepper · 20 timeline + milestones · 21 callouts + banners · 22 skeleton + spinner
 * 23 language toggle + i18n · 24 public site (header, hero, sections, prose, FAQ, footer) · 25 auth
 * 26 org tree · 27 data room list · 28 mini charts · 29 misc (kv, avatars, chips) · 30 icons · 31 print · 32 utilities
 */

/* ============================================================= 1. TOKENS (light) */
:root{
  color-scheme:light;
  /* brand green family — evolved from deal_chrome.css (900/800/700/600/100/50 unchanged) */
  --brand-950:#062a1f; --brand-900:#0b3d2e; --brand-800:#0e4d38; --brand-700:#0e5c3f; --brand-600:#0e7a4e;
  --brand-500:#1a9160; --brand-400:#46ad7f; --brand-300:#86cfa9; --brand-200:#bfe3cf; --brand-100:#e3f0e9; --brand-50:#f2f8f4;
  --accent:#eda100; --accent-ink:#3a2a00; --accent-soft:#fdf3d8; --accent-line:#ecc766;

  /* neutrals (role tokens — components use these, never raw hex) */
  --page:#f6f9f7; --surface:#ffffff; --surface-2:#f1f5f2; --surface-3:#e7eee9;
  --ink:#14211b; --ink-2:#44554c; --muted:#5f6e66; --ink-3:#8a978f;
  --line:#dbe5de; --line-2:#c2cec6; --grid:#e7eee9; --hover:#f0f6f2; --track:#e3ebe6;

  /* brand roles */
  --primary:#0e5c3f; --primary-hover:#0b4d34; --on-primary:#ffffff;
  --link:#0e5c3f; --brand-ink:#0b3d2e; --brand-ink-2:#0e7a4e;
  --brand-soft:#f2f8f4; --brand-soft-2:#e3f0e9; --brand-line:#bfe3cf;
  --band-bg:#0b3d2e; --band-bg-2:#0e4d38; --on-band:#ffffff; --on-band-2:#cfe2d7; --on-band-3:#a9c9b8; --band-line:rgba(255,255,255,.1);
  --appbar-bg:#0b3d2e; --appbar-line:transparent;

  /* semantic — *-ink = text on page/soft, *-soft = tinted background */
  --pos:#0e7a4e;  --pos-ink:#0b5c3a;  --pos-soft:#e3f2ea; --pos-line:#a9d9bf;
  --neg:#c4342c;  --on-neg:#ffffff; --neg-ink:#a3291f;  --neg-soft:#fcecea; --neg-line:#efb4ae;
  --warn:#b07400; --warn-ink:#7a5200; --warn-soft:#fdf4e1; --warn-line:#ecc766;
  --info:#2a6fc9; --info-ink:#1c4f93; --info-soft:#e8f0fb; --info-line:#b5cdf0;
  --violet-ink:#5a3fb0; --violet-soft:#efebfb; --teal-ink:#0f6470; --teal-soft:#e2f3f4; --orange-ink:#9a4210; --orange-soft:#fdeee4;
  --slate-ink:#4a5864; --slate-soft:#edf0f3;
  --edit-bg:#f5f9ff; --edit-line:#c4d8f1; --edit-ink:#1c4f8f;
  --field-bg:#ffffff; --toast-bg:#14211b; --toast-ink:#f2f8f4;
  --focus:#1f6fd1; --focus-soft:rgba(31,111,209,.22);
  --scrim:rgba(6,20,14,.52);

  /* chart series (light/dark safe pairs) */
  --c1:#0e7a4e; --c2:#2a78d6; --c3:#eda100; --c4:#7c5cd6; --c5:#d0563b; --c6:#7d8a82;

  /* type — system stack with full Vietnamese coverage (Segoe UI, SF, Roboto, Noto all ship Vietnamese) */
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans", system-ui, sans-serif;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;
  --fs-hero:clamp(28px, 4.4vw, 46px);
  --lh:1.6; --lh-tight:1.3;

  /* space · radius · shadow · size */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,40,28,.06), 0 1px 3px rgba(11,40,28,.05);
  --sh-2:0 1px 3px rgba(11,40,28,.08), 0 8px 24px rgba(11,40,28,.06);
  --sh-3:0 16px 48px rgba(11,40,28,.22), 0 2px 8px rgba(11,40,28,.08);
  --appbar-h:56px; --tabbar-h:62px; --tap:44px;
  --maxw:1240px; --maxw-read:1080px; --measure:70ch;
}

/* ============================================================= 2. DARK TOKENS
   Screen-only so print always uses the light palette. Auto via OS unless data-theme="light"; forced by data-theme="dark". */
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0b1310; --surface:#121c18; --surface-2:#17231e; --surface-3:#1f2d27;
    --ink:#e5eee9; --ink-2:#b6c6bd; --muted:#8fa197; --ink-3:#6c7f75;
    --line:#25352d; --line-2:#3a4d43; --grid:#1d2b25; --hover:#18261f; --track:#23322b;
    --primary:#15794f; --primary-hover:#1a8a5a; --on-primary:#ffffff;
    --link:#74d1a3; --brand-ink:#a6e0c2; --brand-ink-2:#74d1a3;
    --brand-soft:#11231b; --brand-soft-2:#173426; --brand-line:#245640;
    --band-bg:#0d241b; --band-bg-2:#123024; --on-band:#ffffff; --on-band-2:#c6dccf; --on-band-3:#93b5a3; --band-line:rgba(255,255,255,.08);
    --appbar-bg:#0a1d16; --appbar-line:#1d3329;
    --accent-soft:#2b2210; --accent-line:#6b5114;
    --pos:#4cc38a; --pos-ink:#7fdcab; --pos-soft:#10281c; --pos-line:#245640;
    --neg:#f07167; --on-neg:#2a0a08; --neg-ink:#ff9e95; --neg-soft:#2f1614; --neg-line:#6b2c27;
    --warn:#e0a526; --warn-ink:#f2c45a; --warn-soft:#2a2110; --warn-line:#6b5114;
    --info:#5b9cf0; --info-ink:#9cc2f7; --info-soft:#13213a; --info-line:#2a4466;
    --violet-ink:#c2b3f5; --violet-soft:#211b36; --teal-ink:#7fd3dc; --teal-soft:#0f2a2d; --orange-ink:#f7ad84; --orange-soft:#2e1a10;
    --slate-ink:#b3c0cb; --slate-soft:#1b232a;
    --edit-bg:#13213a; --edit-line:#2a4466; --edit-ink:#9cc2f7;
    --field-bg:#0f1814; --toast-bg:#e5eee9; --toast-ink:#0b1310;
    --focus:#6aa8f5; --focus-soft:rgba(106,168,245,.28);
    --scrim:rgba(0,0,0,.62);
    --c1:#4cc38a; --c2:#5b9cf0; --c3:#eda100; --c4:#a48cf0; --c5:#f07a5f; --c6:#8fa197;
    --sh-1:0 1px 2px rgba(0,0,0,.35);
    --sh-2:0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
    --sh-3:0 16px 48px rgba(0,0,0,.6);
  }
}
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --page:#0b1310; --surface:#121c18; --surface-2:#17231e; --surface-3:#1f2d27;
    --ink:#e5eee9; --ink-2:#b6c6bd; --muted:#8fa197; --ink-3:#6c7f75;
    --line:#25352d; --line-2:#3a4d43; --grid:#1d2b25; --hover:#18261f; --track:#23322b;
    --primary:#15794f; --primary-hover:#1a8a5a; --on-primary:#ffffff;
    --link:#74d1a3; --brand-ink:#a6e0c2; --brand-ink-2:#74d1a3;
    --brand-soft:#11231b; --brand-soft-2:#173426; --brand-line:#245640;
    --band-bg:#0d241b; --band-bg-2:#123024; --on-band:#ffffff; --on-band-2:#c6dccf; --on-band-3:#93b5a3; --band-line:rgba(255,255,255,.08);
    --appbar-bg:#0a1d16; --appbar-line:#1d3329;
    --accent-soft:#2b2210; --accent-line:#6b5114;
    --pos:#4cc38a; --pos-ink:#7fdcab; --pos-soft:#10281c; --pos-line:#245640;
    --neg:#f07167; --on-neg:#2a0a08; --neg-ink:#ff9e95; --neg-soft:#2f1614; --neg-line:#6b2c27;
    --warn:#e0a526; --warn-ink:#f2c45a; --warn-soft:#2a2110; --warn-line:#6b5114;
    --info:#5b9cf0; --info-ink:#9cc2f7; --info-soft:#13213a; --info-line:#2a4466;
    --violet-ink:#c2b3f5; --violet-soft:#211b36; --teal-ink:#7fd3dc; --teal-soft:#0f2a2d; --orange-ink:#f7ad84; --orange-soft:#2e1a10;
    --slate-ink:#b3c0cb; --slate-soft:#1b232a;
    --edit-bg:#13213a; --edit-line:#2a4466; --edit-ink:#9cc2f7;
    --field-bg:#0f1814; --toast-bg:#e5eee9; --toast-ink:#0b1310;
    --focus:#6aa8f5; --focus-soft:rgba(106,168,245,.28);
    --scrim:rgba(0,0,0,.62);
    --c1:#4cc38a; --c2:#5b9cf0; --c3:#eda100; --c4:#a48cf0; --c5:#f07a5f; --c6:#8fa197;
    --sh-1:0 1px 2px rgba(0,0,0,.35);
    --sh-2:0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
    --sh-3:0 16px 48px rgba(0,0,0,.6);
  }
}

/* ============================================================= 3. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--appbar-h) + 16px); background:var(--page)}
body{margin:0; min-height:100vh; font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh); color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; font-feature-settings:"kern"}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{line-height:var(--lh-tight); font-weight:720}
ul,ol{padding-left:1.3em}
img,svg,video,canvas{max-width:100%; height:auto}
a{color:var(--link); text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{cursor:pointer}
code,kbd,pre,samp{font-family:var(--mono); font-size:.92em}
code{background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:0 4px}
hr{border:0; border-top:1px solid var(--line); margin:var(--s-5) 0}
small{font-size:var(--fs-xs)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
::selection{background:var(--brand-200); color:var(--brand-950)}
[hidden]{display:none!important}
.num,.n{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:8px; top:-60px; z-index:200; background:var(--surface); color:var(--ink); padding:10px 14px; border-radius:8px; box-shadow:var(--sh-3)}
.skip:focus{top:8px}

/* ============================================================= 4. LAYOUT
   One column on laptop/iPad/phone. Multi-column only for card grids & KPI tiles — never a side panel for inputs. */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:16px}
.wrap.read{max-width:var(--maxw-read)}
.wrap.narrow{max-width:760px}
@media (min-width:760px){ .wrap{padding-inline:24px} }
.app-main{padding-bottom:var(--s-8); min-width:0}
.stack{display:flex; flex-direction:column; gap:var(--gap,16px); min-width:0}
.stack.tight{--gap:8px} .stack.loose{--gap:28px}
.row{display:flex; align-items:center; gap:var(--gap,8px); flex-wrap:wrap; min-width:0}
.row.nowrap{flex-wrap:nowrap}
.spacer{flex:1 1 auto}
.grid{display:grid; gap:var(--gap,14px); grid-template-columns:repeat(auto-fit, minmax(min(var(--min,300px),100%), 1fr)); align-items:start; min-width:0}
.grid.stretch{align-items:stretch}
.grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){ .grid.g-3,.grid.g-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:759px){ .grid.g-2,.grid.g-3,.grid.g-4{grid-template-columns:minmax(0,1fr)} }
.grid > *{min-width:0}
.section{margin-top:var(--s-7)}
.section:first-child{margin-top:0}
.sec-hd{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 var(--s-3)}
.sec-hd h2,h2.sec{font-size:var(--fs-xl); font-weight:750; color:var(--brand-ink); letter-spacing:-.005em}
.sec-hd .sub{font-size:var(--fs-sm); color:var(--muted)}
.sec-hd .end{margin-left:auto}
h2.sec .no{color:var(--brand-ink-2)}
h3.sub-hd{font-size:var(--fs-lg); font-weight:720; color:var(--ink); margin:var(--s-5) 0 var(--s-2)}
.muted{color:var(--muted)} .ink-2{color:var(--ink-2)}
.note{font-size:var(--fs-sm); color:var(--muted); margin-top:var(--s-2)}
@media (max-width:759px){ .section{margin-top:var(--s-6)} .sec-hd h2,h2.sec{font-size:18px} }

/* ============================================================= 5. APP BAR (internal) + desktop nav + menu */
.appbar{position:sticky; top:0; z-index:60; background:var(--appbar-bg); color:var(--on-band); border-bottom:1px solid var(--appbar-line)}
.appbar-in{max-width:var(--maxw); margin:0 auto; height:var(--appbar-h); display:flex; align-items:center; gap:14px; padding:0 16px}
@media (min-width:760px){ .appbar-in{padding:0 24px} }
.logo{display:inline-flex; align-items:center; gap:10px; min-height:var(--tap); color:inherit; text-decoration:none; font-weight:800; font-size:15px; letter-spacing:.01em; flex:none}
.logo:hover{text-decoration:none}
.logo-mk{width:32px; height:32px; border-radius:9px; background:var(--brand-600); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:850; letter-spacing:.05em; flex:none}
.logo-tx small{display:block; font-size:11px; font-weight:600; color:var(--on-band-3); letter-spacing:.02em; line-height:1.1}
.appnav{display:flex; align-items:center; gap:2px; min-width:0; flex:1 1 auto}
.appnav-links{display:flex; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none}
.appnav-links::-webkit-scrollbar{display:none}
.appnav a,.appnav .menu>summary{display:flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:var(--r-pill); color:var(--on-band-2); text-decoration:none; font-size:14px; font-weight:620; white-space:nowrap; flex:none}
.appnav a:hover,.appnav .menu>summary:hover{color:#fff; background:rgba(255,255,255,.08)}
.appnav a[aria-current="page"],.appnav .menu.has-current>summary{color:#fff; background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.appnav a:focus-visible,.appnav summary:focus-visible,.appbar .iconbtn:focus-visible,.avatar:focus-visible{outline-color:#fff}
.appbar[data-shell]:empty{height:var(--appbar-h)}
.appbar-title{display:none}
.appbar-end{margin-left:auto; display:flex; align-items:center; gap:6px; flex:none}
.appbar .iconbtn{display:grid; place-items:center; width:var(--tap); height:var(--tap); border-radius:50%; border:0; background:transparent; color:#fff}
.appbar .iconbtn:hover{background:rgba(255,255,255,.1)}
.save-state{font-size:12.5px; color:var(--on-band-2); padding:3px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); white-space:nowrap}
.save-state.dirty{background:var(--accent); color:var(--accent-ink); font-weight:700}
.save-state.err{background:#ffb3a8; color:#4a0f0a; font-weight:700}
.avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--brand-600); color:#fff; font-weight:750; font-size:13px; border:2px solid rgba(255,255,255,.28); padding:0}
.appbar .menu>summary.avatar-sum{list-style:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); border-radius:50%}
@media (max-width:759px){
  .appnav{display:none}
  .appbar-in{gap:10px}
  .appbar .logo-tx{display:none}
  .appbar-title{display:block; flex:1 1 auto; min-width:0; font-size:16.5px; font-weight:720; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .save-state .lbl{display:none}
}
@media (min-width:760px) and (max-width:1023px){
  .appbar .logo-tx{display:none}
  .appbar-in{gap:8px}
  .appnav a,.appnav .menu>summary{padding:0 9px; font-size:13.5px}
  .save-state .lbl{display:none}
}
/* dropdown menu (details-based, no JS required; dcs.js closes on outside click / Esc) */
.menu{position:relative}
.menu>summary{list-style:none; cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute; right:0; top:calc(100% + 8px); min-width:230px; max-width:min(320px, calc(100vw - 24px)); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:6px; z-index:70}
.menu-pop.left{right:auto; left:0}
.menu-pop a,.menu-pop button{display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap); padding:8px 10px; border-radius:var(--r-sm); border:0; background:none; color:var(--ink); text-decoration:none; text-align:left; font-size:14px; font-weight:560}
.menu-pop a:hover,.menu-pop button:hover{background:var(--hover)}
.menu-pop a[aria-current="page"]{background:var(--brand-soft-2); color:var(--brand-ink); font-weight:700}
.menu-pop .ico{color:var(--muted)}
.menu-pop hr{margin:6px 4px}
.menu-pop .mh{padding:8px 10px 4px; font-size:12px; color:var(--muted); font-weight:650}

/* ============================================================= 6. BOTTOM TAB BAR (mobile ≤759px) */
.tabbar{display:none}
@media (max-width:759px){
  body.has-tabbar{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .tabbar{position:fixed; z-index:60; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(var(--n,5), minmax(0,1fr)); gap:2px;
    background:var(--surface); border-top:1px solid var(--line); padding:5px 6px calc(5px + env(safe-area-inset-bottom)); box-shadow:0 -6px 18px rgba(11,40,28,.08)}
  .tabbar a,.tabbar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; padding:4px 2px; border-radius:var(--r-md);
    border:0; background:none; color:var(--muted); font-size:11.5px; font-weight:650; line-height:1.15; text-decoration:none; text-align:center; min-width:0}
  .tabbar .ico{width:22px; height:22px}
  .tabbar span:last-child{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tabbar [aria-current="page"],.tabbar .is-current{color:var(--brand-ink); background:var(--brand-soft-2)}
  .tabbar [aria-current="page"] .ico,.tabbar .is-current .ico{color:var(--primary)}
}
@media (max-width:759px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tabbar [aria-current="page"] .ico{color:var(--brand-ink-2)} }
@media (max-width:759px){ :root[data-theme="dark"] .tabbar [aria-current="page"] .ico{color:var(--brand-ink-2)} }

/* ============================================================= 7. PAGE HEADER + TOOLBAR */
.page-hd{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 16px; padding:22px 0 14px}
.page-hd .ttl{flex:1 1 360px; min-width:0}
.crumbs{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; font-size:var(--fs-sm); color:var(--muted); margin-bottom:4px}
.crumbs a{color:var(--ink-2); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--ink-3)}
.page-hd h1{font-size:var(--fs-2xl); font-weight:760; color:var(--brand-ink); letter-spacing:-.012em; line-height:1.25}
.page-hd .lead{font-size:var(--fs-md); color:var(--ink-2); margin-top:4px; max-width:var(--measure)}
.page-hd .meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-size:var(--fs-sm); color:var(--muted)}
.page-hd .acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
@media (max-width:759px){
  .page-hd{padding:14px 0 10px}
  .page-hd h1{font-size:21px}
  .page-hd .acts{width:100%}
  .page-hd .acts>.btn{flex:1 1 auto}
}
/* toolbar = tabs + segmented controls; sticky under the app bar on ≥760px, static on mobile */
.toolbar{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; margin-bottom:var(--s-4); border-bottom:1px solid var(--line); background:var(--page); min-width:0}
.toolbar>.end{margin-left:auto}
@media (min-width:760px){ .toolbar{position:sticky; top:var(--appbar-h); z-index:40} }
@media (max-width:759px){
  .toolbar{border-bottom:0; padding:4px 0; margin-bottom:var(--s-3)}
  .toolbar>.tabs,.toolbar>.seg{width:100%}
  .toolbar>.end{margin-left:0; width:100%}
  .toolbar .seg{flex:1 1 auto}
  .toolbar.stick-m{position:sticky; top:var(--appbar-h); z-index:40; padding:8px 0; border-bottom:1px solid var(--line)}
}

/* ============================================================= 8. TABS · SEGMENTED · PANES · LEVELS */
.tabs,.seg{display:flex; gap:3px; padding:3px; background:var(--surface); border:1px solid var(--line); border-radius:12px; max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
.tabs>button,.tabs>a,.seg>button{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:0 14px; border:0; border-radius:9px;
  background:transparent; color:var(--ink-2); font-size:14px; font-weight:650; white-space:nowrap; text-decoration:none; cursor:pointer}
.tabs>button:hover,.tabs>a:hover,.seg>button:hover{background:var(--hover); color:var(--ink)}
.tabs>[aria-selected="true"],.tabs>.on{background:var(--primary); color:var(--on-primary)}
.tabs>[aria-selected="true"]:hover{background:var(--primary-hover); color:var(--on-primary)}
.seg>[aria-pressed="true"],.seg>.on{background:var(--brand-soft-2); color:var(--brand-ink)}
.seg.solid>[aria-pressed="true"]{background:var(--primary); color:var(--on-primary)}
.tabs .count,.seg .count{font-size:11.5px; font-weight:700; min-width:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-2); line-height:18px}
.tabs>[aria-selected="true"] .count{background:rgba(255,255,255,.2); color:inherit}
.tabs .ico{width:17px; height:17px}
.tabs.fill>*,.seg.fill>*{flex:1 1 0}
@media (pointer:coarse){ .tabs>button,.tabs>a,.seg>button{min-height:var(--tap)} }
@media (max-width:759px){
  .tabs>button,.tabs>a{padding:0 12px; font-size:13.5px}
  .tabs:not(.dock) .ico{display:none}
  .seg>button{flex:1 1 auto; padding:0 8px; font-size:13px}
}
/* .tabs.dock = page tabs dock to the bottom on mobile (pages WITHOUT the global tab bar: intro, partner) */
@media (max-width:759px){
  .tabs.dock{position:fixed; z-index:55; left:0; right:0; bottom:0; border-radius:0; border:0; border-top:1px solid var(--line); background:var(--surface);
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:5px 6px calc(5px + env(safe-area-inset-bottom)); box-shadow:0 -6px 18px rgba(11,40,28,.08); overflow:visible}
  .tabs.dock>button,.tabs.dock>a{flex-direction:column; gap:2px; min-height:52px; font-size:11.5px; padding:4px 2px; white-space:normal; line-height:1.15; text-align:center}
  .tabs.dock .ico{display:block; width:21px; height:21px}
  body.has-dock{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
}
.pane:not(.on){display:none}
.pane-hd{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:2px 0 12px}
.pane-hd h2{font-size:19px; font-weight:750; color:var(--brand-ink)}
.pane-hd .meta{font-size:var(--fs-sm); color:var(--muted)}
.lv-hide{display:none!important}

/* ============================================================= 9. KPI STRIP (band) + TILES */
.kbar{background:var(--band-bg); color:var(--on-band)}
.kbar.sticky{position:sticky; top:var(--appbar-h); z-index:45}
.kbar-in{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); padding:0 8px}
.kbar .k{padding:10px 16px 11px; border-left:1px solid var(--band-line); min-width:0}
.kbar .k:first-child{border-left:0}
.kbar .l{font-size:12px; color:var(--on-band-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kbar .v{font-size:20px; font-weight:760; line-height:1.25; white-space:nowrap; font-variant-numeric:tabular-nums}
.kbar .v.pos{color:#bfe8cf} .kbar .v.neg{color:#ffb3a8} .kbar .v.warn{color:#ffd77a}
.kbar .d{font-size:11.5px; color:var(--on-band-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kbar a.k{color:inherit; text-decoration:none} .kbar a.k:hover{background:rgba(255,255,255,.05)}
@media (max-width:759px){
  .kbar-in{display:flex; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding:0}
  .kbar-in::-webkit-scrollbar{display:none}
  .kbar .k{flex:0 0 auto; min-width:38%; padding:8px 14px; scroll-snap-align:start}
  .kbar .v{font-size:17px}
}
@media (min-width:760px) and (max-width:1023px){
  .kbar-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kbar .k:nth-child(3n+1){border-left:0}
  .kbar .k:nth-child(n+4){border-top:1px solid var(--band-line)}
}
.tiles{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(min(var(--min,160px),100%),1fr))}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-1); padding:12px 14px; min-width:0}
.tile .l{font-size:12.5px; color:var(--ink-2); line-height:1.35}
.tile .v{font-size:clamp(18px, 2vw, 24px); font-weight:760; line-height:1.25; margin-top:3px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .v small{font-size:.6em; font-weight:650; color:var(--muted); margin-left:2px}
.tile .d{font-size:12px; color:var(--muted); margin-top:2px}
.tile .v.pos{color:var(--pos-ink)} .tile .v.neg{color:var(--neg-ink)} .tile .v.warn{color:var(--warn-ink)}
.delta{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.delta.up{color:var(--pos-ink)} .delta.dn{color:var(--neg-ink)}
.tile.band{background:linear-gradient(160deg,var(--band-bg-2),var(--band-bg)); border-color:transparent; color:var(--on-band)}
.tile.band .l{color:var(--on-band-2)} .tile.band .v{color:#fff} .tile.band .d{color:var(--on-band-3)}
a.tile{display:block; text-decoration:none; color:inherit} a.tile:hover{border-color:var(--brand-400)}
@media (max-width:759px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} .tile{padding:10px 12px} .tile .v{font-size:18px} .tiles.one-m{grid-template-columns:1fr} }

/* ============================================================= 10. CARDS */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); min-width:0}
.card+.card{margin-top:var(--s-3)}
.grid>.card+.card,.stack>.card+.card{margin-top:0}
.card-hd{display:flex; align-items:flex-start; gap:6px 10px; flex-wrap:wrap; padding:14px 18px 12px; border-bottom:1px solid var(--line)}
.card-hd h3{font-size:16px; font-weight:740; color:var(--ink); min-width:0}
.card-hd .sub{flex-basis:100%; font-size:var(--fs-sm); color:var(--muted); margin-top:-4px}
.card-hd .end,.card-hd .go{margin-left:auto}
.card-hd.plain{border-bottom:0; padding-bottom:4px}
.card-bd{padding:14px 18px 16px}
.card-bd.flush{padding:0}
.card-ft{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 18px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); font-size:var(--fs-sm); color:var(--muted)}
.card-ft .end{margin-left:auto}
.card.pad{padding:16px 18px}
.card.flat{box-shadow:none}
.card.tint{background:var(--brand-soft); border-color:var(--brand-line); box-shadow:none}
a.go,button.go,.go{display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:700; color:var(--link); text-decoration:none; background:none; border:0; padding:0; min-height:28px; white-space:nowrap}
a.go:hover,button.go:hover,a:hover .go{text-decoration:underline}
/* overview card: headline number + mini content + "Mở →" */
.ocard{display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:14px 18px 16px; min-width:0}
.ocard>header{display:flex; align-items:baseline; gap:8px}
.ocard>header h3{font-size:15px; font-weight:740; color:var(--brand-ink)}
.ocard>header .go{margin-left:auto}
.ocard .big{font-size:26px; font-weight:780; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums}
.ocard .big small{font-size:13px; font-weight:650; color:var(--muted); margin-left:4px}
.ocard .sub{font-size:var(--fs-sm); color:var(--muted)}
/* clickable card */
a.card-link{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:16px 18px; transition:border-color .12s, transform .12s}
a.card-link:hover{border-color:var(--brand-400); transform:translateY(-1px)}
a.card-link h3{font-size:16px; font-weight:740; color:var(--brand-ink)}
a.card-link p{font-size:14px; color:var(--ink-2)}
a.card-link .go{margin-top:auto; padding-top:6px}
a.card-link>.pill{align-self:flex-start}
@media (prefers-reduced-motion:reduce){ a.card-link:hover{transform:none} }
@media (max-width:759px){
  .card-hd{padding:12px 14px 10px} .card-bd{padding:12px 14px 14px} .card-ft{padding:10px 14px}
  .ocard{padding:12px 14px 14px} .ocard .big{font-size:22px} .card.pad{padding:14px}
}

/* ============================================================= 11. TABLES
   .tbl = base · td.n numbers · .tbl.cardify → cards on ≤759px (cells need data-label; DCS.cardify fills them from <thead>)
   .tbl.sticky-first keeps column 1 visible while the wrapper scrolls (5-year models). */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0}
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th,.tbl td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--grid)}
.tbl thead th{font-size:12.5px; font-weight:650; color:var(--ink-2); background:var(--surface-2); border-bottom:1px solid var(--line-2); white-space:nowrap; vertical-align:bottom}
.tbl tbody th{font-weight:600; color:var(--ink)}
.tbl td.n,.tbl th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl td.c,.tbl th.c{text-align:center}
.tbl tbody tr:hover>*{background:var(--hover)}
.tbl tr.is-link{cursor:pointer}
.tbl tr.tot>*{font-weight:760; border-top:1.5px solid var(--line-2); background:var(--brand-soft)}
.tbl tr.key>*{font-weight:760; background:var(--brand-soft)}
.tbl tr.grp>*{padding-top:14px; font-size:12px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-ink-2); border-bottom:1px solid var(--line); background:transparent}
.tbl tr.sub>:first-child{padding-left:28px; color:var(--ink-2)}
.tbl td.neg{color:var(--neg-ink)} .tbl td.pos{color:var(--pos-ink); font-weight:650} .tbl td.dim{color:var(--muted)}
.tbl .t-main{font-weight:650; color:var(--ink)}
.tbl .t-sub{display:block; font-size:12.5px; color:var(--muted); font-weight:400; margin-top:1px}
.tbl td.acts{text-align:right; white-space:nowrap}
.tbl.dense th,.tbl.dense td{padding:6px 9px; font-size:13px}
.tbl.dense thead th{font-size:12px}
.tbl.sticky-first th:first-child,.tbl.sticky-first td:first-child{position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--grid)}
.tbl.sticky-first thead th:first-child{background:var(--surface-2)}
.tbl.sticky-first tr.tot>:first-child,.tbl.sticky-first tr.key>:first-child{background:var(--brand-soft)}
.tbl.sticky-first tbody tr:hover>:first-child{background:var(--hover)}
.tbl caption{caption-side:bottom; text-align:left; font-size:var(--fs-xs); color:var(--muted); padding-top:8px}
.card>.tbl-wrap>.tbl thead th:first-child,.card-bd.flush .tbl thead th:first-child{padding-left:18px}
.card>.tbl-wrap>.tbl td:first-child,.card>.tbl-wrap>.tbl th:first-child{padding-left:18px}
.card>.tbl-wrap>.tbl td:last-child,.card>.tbl-wrap>.tbl th:last-child{padding-right:18px}
.card>.tbl-wrap:last-child .tbl tr:last-child>*{border-bottom:0}
/* expandable rows */
.tbl tr.par>:first-child{cursor:pointer}
.tbl tr.par>:first-child::before{content:"▸"; display:inline-block; width:16px; color:var(--brand-ink-2)}
.tbl tr.par.open>:first-child::before{content:"▾"}
.tbl tr.child{display:none} .tbl tr.child.show{display:table-row}
.tbl tr.child>*{background:var(--brand-soft); font-size:13px; color:var(--ink-2)}
.tbl tr.child>:first-child{padding-left:30px}
@media (max-width:759px){
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:8px 8px}
  .tbl.sticky-first{font-size:12.5px}
  .tbl.sticky-first th,.tbl.sticky-first td{padding:7px 4px}
  .tbl.sticky-first th:first-child,.tbl.sticky-first td:first-child{min-width:100px; max-width:120px; white-space:normal; padding-left:12px!important}
  .tbl.sticky-first th:last-child,.tbl.sticky-first td:last-child{padding-right:12px!important}
  .tbl.sticky-first tr.grp>*{padding-left:12px}
  /* ---- stack to cards ---- */
  .tbl.cardify,.tbl.cardify tbody,.tbl.cardify tr,.tbl.cardify td,.tbl.cardify tbody th{display:block; width:100%}
  .tbl.cardify thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tbl.cardify tr{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-1); padding:10px 14px; margin-bottom:10px}
  .tbl.cardify tbody tr:hover>*{background:transparent}
  .tbl.cardify td,.tbl.cardify tbody th{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; border:0; text-align:right; white-space:normal}
  .tbl.cardify td::before,.tbl.cardify tbody th::before{content:attr(data-label); flex:0 1 auto; max-width:48%; text-align:left; color:var(--muted); font-size:13px; font-weight:500}
  .tbl.cardify td[data-label=""]::before{content:none}
  .tbl.cardify td>*,.tbl.cardify tbody th>*{min-width:0}
  .tbl.cardify [data-primary]{display:block; text-align:left; font-size:15px; font-weight:700; padding:0 0 8px; margin-bottom:4px; border-bottom:1px solid var(--grid)}
  .tbl.cardify [data-primary]::before{content:none}
  .tbl.cardify td.full{display:block; text-align:left}
  .tbl.cardify td.full::before{display:block; max-width:none; margin-bottom:2px}
  .tbl.cardify td.acts{justify-content:flex-end; gap:8px; padding-top:8px}
  .tbl.cardify td.acts::before{content:none}
  .tbl.cardify td:empty{display:none}
  .tbl.cardify tr.grp{background:none; border:0; box-shadow:none; padding:10px 2px 4px; margin:0}
  .tbl.cardify tr.grp>*{display:block; padding:0; text-align:left} .tbl.cardify tr.grp>*::before{content:none}
  .tbl.cardify tr.tot{background:var(--brand-soft); border-color:var(--brand-line)} .tbl.cardify tr.tot>*{background:transparent; border:0}
  .card>.tbl-wrap .tbl.cardify tr,.card-bd.flush .tbl.cardify tr{border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; margin:0; padding:12px 14px}
  .card>.tbl-wrap .tbl.cardify td,.card>.tbl-wrap .tbl.cardify td:first-child,.card>.tbl-wrap .tbl.cardify td:last-child{padding-left:0; padding-right:0}
  .card>.tbl-wrap:last-child .tbl.cardify tr:last-child{border-bottom:0}
}

/* parameter table (BP): label · N1…N5 inputs · range. Desktop = table; mobile = card per parameter with a 5-column year grid.
   Per-year cells: <td class="yr" data-label="N1">…</td>; single value: <td class="one" colspan="5" data-label="Giá trị">…</td> */
.tbl.params{table-layout:fixed}
.tbl.params thead th:first-child{width:auto}
.tbl.params thead th.n{width:92px}
.tbl.params thead th:last-child{width:120px}
.tbl.params td.yr{width:92px; text-align:right}
.tbl.params td.one .cell-in{margin-left:0}
.tbl.params td.rg{font-size:12.5px; color:var(--muted); white-space:nowrap}
.tbl.params tbody th .t-sub{font-weight:400}
@media (max-width:759px){
  .tbl.params.cardify tr{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:12px 14px}
  .tbl.params.cardify tr>[data-primary],.tbl.params.cardify tr>td.one,.tbl.params.cardify tr>td.rg,.tbl.params.cardify tr>td.full{grid-column:1/-1}
  .tbl.params.cardify tr>[data-primary]{margin-bottom:2px; padding-bottom:6px}
  .tbl.params.cardify td.yr{width:auto; flex-direction:column; align-items:stretch; gap:2px; padding:0}
  .tbl.params.cardify td.yr::before{max-width:none; text-align:center; font-size:11.5px}
  .tbl.params.cardify td.yr .cell-in{max-width:none; min-width:0; text-align:center; padding:5px 2px}
  .tbl.params.cardify td.one{align-items:center}
  .tbl.params.cardify td.one .cell-in{max-width:140px; margin-left:auto}
  .tbl.params.cardify td.one select.cell-in{max-width:72%}
  html[data-can-edit] .tbl.params.cardify tr.prm>[data-primary]::before{content:"✎ "}
  .tbl.params.cardify td.rg{padding:0; font-size:12px}
  .tbl.params.cardify tr.grp{display:block}
}

/* ============================================================= 12. PILLS · BADGES · STATUS SETS */
.pill{display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 9px; border-radius:var(--r-pill); font-size:12px; font-weight:650; line-height:1.45;
  background:var(--slate-soft); color:var(--slate-ink); white-space:nowrap; vertical-align:middle; border:1px solid transparent}
.pill.dot::before,.pill.dr-have::before,.pill.dr-partial::before,.pill.dr-missing::before,.pill.dr-none::before,.pill.dr-proc::before,.pill[class*=" ts-"]::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.pill.lg{font-size:13px; padding:4px 12px}
.pill.pos{background:var(--pos-soft); color:var(--pos-ink)}
.pill.neg{background:var(--neg-soft); color:var(--neg-ink)}
.pill.warn{background:var(--warn-soft); color:var(--warn-ink)}
.pill.info{background:var(--info-soft); color:var(--info-ink)}
.pill.brand{background:var(--brand-soft-2); color:var(--brand-ink)}
.pill.violet{background:var(--violet-soft); color:var(--violet-ink)}
.pill.accent{background:var(--accent); color:var(--accent-ink); font-weight:800; letter-spacing:.02em}
.pill.outline{background:transparent; border-color:var(--line-2); color:var(--ink-2)}
.pill.on-band{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:var(--on-band-2)}
/* data room statuses (partner + admin): Đã có · Chưa đủ · Chưa có · Không có · Đang xử lý */
.pill.dr-have{background:var(--pos-soft); color:var(--pos-ink)}
.pill.dr-partial{background:var(--warn-soft); color:var(--warn-ink)}
.pill.dr-missing{background:transparent; color:var(--ink-2); border:1px dashed var(--line-2)}
.pill.dr-none{background:var(--slate-soft); color:var(--slate-ink)}
.pill.dr-none::before{content:"–"; width:auto; height:auto; background:none; border-radius:0; font-weight:800}
.pill.dr-proc{background:var(--info-soft); color:var(--info-ink)}
.pill.dr-proc::before{width:9px; height:9px; background:none; border:2px solid currentColor; border-right-color:transparent; animation:spin .9s linear infinite}
.pill.dr-have::before{content:"✓"; width:auto; height:auto; background:none; border-radius:0; font-weight:800; font-size:11px}
/* task statuses */
.pill.ts-todo{background:var(--slate-soft); color:var(--slate-ink)}
.pill.ts-doing{background:var(--info-soft); color:var(--info-ink)}
.pill.ts-blocked{background:var(--neg-soft); color:var(--neg-ink)}
.pill.ts-done{background:var(--pos-soft); color:var(--pos-ink)}
.pill.ts-overdue{background:var(--neg); color:var(--on-neg)}
.pill.inv{background:var(--accent-soft); color:var(--warn-ink); border-color:var(--accent-line)}
/* deal pipeline stages (ordered) */
.pill.stg{gap:6px}
.pill.stg::before{content:""; width:8px; height:8px; border-radius:2px; background:currentColor; flex:none}
.stg-lead{--stg:var(--slate-ink); background:var(--slate-soft)!important; color:var(--slate-ink)!important}
.stg-contact{--stg:var(--info-ink); background:var(--info-soft)!important; color:var(--info-ink)!important}
.stg-nda{--stg:var(--violet-ink); background:var(--violet-soft)!important; color:var(--violet-ink)!important}
.stg-dataroom{--stg:var(--teal-ink); background:var(--teal-soft)!important; color:var(--teal-ink)!important}
.stg-dd{--stg:var(--warn-ink); background:var(--warn-soft)!important; color:var(--warn-ink)!important}
.stg-offer{--stg:var(--orange-ink); background:var(--orange-soft)!important; color:var(--orange-ink)!important}
.stg-nego{--stg:var(--accent); background:var(--accent-soft)!important; color:var(--warn-ink)!important}
.stg-closing{--stg:var(--pos-ink); background:var(--pos-soft)!important; color:var(--pos-ink)!important}
.stg-integration{--stg:var(--brand-ink); background:var(--brand-soft-2)!important; color:var(--brand-ink)!important}
.stg-dropped{--stg:var(--neg-ink); background:var(--neg-soft)!important; color:var(--neg-ink)!important}
/* counter bubble */
.count{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-2); font-size:11.5px; font-weight:750; font-variant-numeric:tabular-nums}
.count.neg{background:var(--neg); color:var(--on-neg)} .count.brand{background:var(--primary); color:var(--on-primary)}

/* ============================================================= 13. KANBAN BOARD (desktop) ↔ GROUPED LIST (mobile) */
.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(252px,1fr); gap:12px; overflow-x:auto; align-items:start; padding:2px 2px 10px; scroll-snap-type:x proximity; max-width:100%}
.board-col{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px; min-height:132px; scroll-snap-align:start; min-width:0}
.board-col>header{display:flex; align-items:center; gap:8px; padding:4px 6px 10px; font-size:13.5px; font-weight:720; color:var(--ink)}
.board-col>header .count{margin-left:auto}
.board-col>header .sw{width:10px; height:10px; border-radius:3px; background:var(--stg, var(--ink-3)); flex:none}
.board-col .col-empty{font-size:13px; color:var(--muted); text-align:center; padding:18px 8px; border:1.5px dashed var(--line-2); border-radius:10px}
.kcard{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:10px 12px 11px; text-decoration:none; color:inherit; position:relative}
.kcard+.kcard{margin-top:8px}
a.kcard:hover,button.kcard:hover{border-color:var(--brand-400)}
button.kcard{width:100%; text-align:left; font:inherit}
.kcard h4{font-size:14.5px; font-weight:720; color:var(--ink); line-height:1.35; padding-right:30px}
.kcard .next{font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.45}
.kcard .meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; color:var(--muted)}
.kcard .meta .due.late{color:var(--neg-ink); font-weight:700}
.kcard .av{position:absolute; top:9px; right:10px}
.kcard.late{box-shadow:inset 3px 0 0 var(--neg), var(--sh-1)}
.kcard.inv-vis::after{content:"NĐT"; position:absolute; right:10px; bottom:10px; font-size:10.5px; font-weight:800; color:var(--warn-ink); background:var(--accent-soft); border-radius:4px; padding:0 4px}
@media (max-width:759px){
  .board{display:block; overflow:visible; padding:0}
  .board-col{background:none; border:0; padding:0; min-height:0; margin-bottom:var(--s-4)}
  .board-col>header{position:sticky; top:var(--appbar-h); z-index:5; background:var(--page); padding:8px 2px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:14px}
  .board-col.is-empty{display:none}
  .board.show-empty .board-col.is-empty{display:block}
  .kcard{border-radius:12px; padding:12px 14px}
}

/* ============================================================= 14. FORMS + INLINE-EDIT CELLS */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field>label,.label{font-size:13.5px; font-weight:650; color:var(--ink)}
.field .opt{font-weight:500; color:var(--muted)}
.hint{font-size:12.5px; color:var(--muted); line-height:1.45}
.err-msg{font-size:12.5px; color:var(--neg-ink); font-weight:600}
.input,.select,.textarea{width:100%; min-height:var(--tap); padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--field-bg); color:var(--ink); font-size:15px; line-height:1.4;
  transition:border-color .12s, box-shadow .12s}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-soft)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--neg); box-shadow:0 0 0 3px var(--neg-soft)}
.input:disabled,.select:disabled,.textarea:disabled{opacity:.6; cursor:not-allowed; background:var(--surface-2)}
.input.n{text-align:right; font-variant-numeric:tabular-nums}
.textarea{min-height:112px; resize:vertical; line-height:1.55}
.select{appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.input-group{display:flex; align-items:stretch; min-width:0}
.input-group>.input{border-radius:var(--r-md) 0 0 var(--r-md); min-width:0; flex:1 1 auto}
.input-group>.addon{display:flex; align-items:center; padding:0 12px; border:1px solid var(--line-2); border-left:0; background:var(--surface-2); color:var(--ink-2); font-size:14px; border-radius:0 var(--r-md) var(--r-md) 0; white-space:nowrap}
.input-group>.btn{border-radius:0 var(--r-md) var(--r-md) 0; margin-left:-1px}
.input-search{position:relative}
.input-search .ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.input-search .input{padding-left:38px}
.check{display:flex; align-items:flex-start; gap:10px; min-height:var(--tap); padding:10px 0; cursor:pointer; font-size:14.5px; line-height:1.45}
.check input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--primary); flex:none; cursor:pointer}
.check .hint{display:block}
.choice-row{display:flex; flex-wrap:wrap; gap:4px 18px}
input.switch{appearance:none; -webkit-appearance:none; position:relative; width:44px; height:26px; border-radius:var(--r-pill); background:var(--line-2); flex:none; cursor:pointer; transition:background .15s; margin:0}
input.switch::before{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
input.switch:checked{background:var(--primary)}
input.switch:checked::before{transform:translateX(18px)}
.form-grid{display:grid; gap:14px 16px; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr))}
.form-grid .span-all{grid-column:1/-1}
.form-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:var(--s-4)}
fieldset{border:0; padding:0; margin:0; min-width:0}
legend{font-size:13.5px; font-weight:650; padding:0; margin-bottom:6px}
@media (max-width:759px){
  .input,.select,.textarea{font-size:16px} /* prevents iOS zoom */
  .form-actions>.btn{flex:1 1 auto}
}
/* inline-editable cells (owner edits BP parameters / PMO in place) */
.cell-in{display:block; width:100%; min-width:64px; max-width:124px; margin-left:auto; min-height:34px; padding:5px 8px; border:1px solid var(--edit-line); border-radius:var(--r-sm);
  background:var(--edit-bg); color:var(--edit-ink); font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; text-align:right}
.cell-in.txt{text-align:left; max-width:none}
select.cell-in{text-align:left; max-width:none; cursor:pointer}
.cell-in:hover{border-color:var(--info)}
.cell-in:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-soft)}
.cell-in.dirty{border-color:var(--accent); background:var(--accent-soft); color:var(--warn-ink)}
.cell-in.saved{animation:saved-flash 1.2s ease-out}
.cell-in[aria-invalid="true"]{border-color:var(--neg); background:var(--neg-soft); color:var(--neg-ink)}
.cell-in[readonly],.ro .cell-in,html:not([data-can-edit]) .cell-in.owner{border-color:transparent; background:transparent; color:var(--ink); pointer-events:none; padding-inline:0; font-weight:600}
html:not([data-can-edit]) select.cell-in.owner{appearance:none; -webkit-appearance:none}
.cell-hint{display:block; font-size:11.5px; color:var(--muted); font-weight:400; text-align:right; line-height:1.3; margin-top:2px}
tr.prm>th:first-child::before,tr.prm>td:first-child::before{content:"✎ "; color:var(--info); font-size:12px; font-weight:400}
html:not([data-can-edit]) tr.prm>th:first-child::before,html:not([data-can-edit]) tr.prm>td:first-child::before{content:none}
@keyframes saved-flash{0%{background:var(--pos-soft); border-color:var(--pos)} 100%{background:var(--edit-bg)}}
@media (pointer:coarse){ .cell-in{min-height:var(--tap)} }
/* sticky "unsaved changes" bar */
.dirtybar{position:sticky; bottom:12px; z-index:50; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:var(--s-4) 0; padding:10px 12px 10px 16px;
  background:var(--toast-bg); color:var(--toast-ink); border-radius:var(--r-lg); box-shadow:var(--sh-3); font-size:14px}
.dirtybar .end{margin-left:auto; display:flex; gap:8px}
.dirtybar .btn{min-height:38px}
@media (max-width:759px){ body.has-tabbar .dirtybar{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px)} .dirtybar .end{width:100%} .dirtybar .end .btn{flex:1} }

/* ============================================================= 15. BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:0 16px; border-radius:var(--r-md); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:650; line-height:1.2; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s, transform .06s}
.btn:hover{background:var(--hover); border-color:var(--muted); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-hover); border-color:var(--primary-hover)}
.btn.accent{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:750}
.btn.accent:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--link)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.danger{color:var(--neg-ink); border-color:var(--neg-line); background:var(--surface)}
.btn.danger:hover{background:var(--neg-soft)}
.btn.danger.solid{background:var(--neg); border-color:var(--neg); color:var(--on-neg)}
.btn.on-band{background:transparent; border-color:rgba(255,255,255,.32); color:#fff}
.btn.on-band:hover{background:rgba(255,255,255,.1)}
.btn.sm{min-height:34px; padding:0 12px; font-size:13.5px; border-radius:var(--r-sm); gap:6px}
.btn.lg{min-height:52px; padding:0 22px; font-size:16px; border-radius:12px}
.btn.icon{width:var(--tap); padding:0}
.btn.sm.icon{width:34px}
.btn.block{display:flex; width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
.btn.loading{position:relative; color:transparent!important; pointer-events:none}
.btn.loading::after{content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid var(--muted); border-right-color:transparent; animation:spin .8s linear infinite}
.btn.primary.loading::after{border-color:#fff; border-right-color:transparent}
.btn .ico{width:18px; height:18px}
.btn-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.link-btn{background:none; border:0; padding:0; color:var(--link); font-weight:650; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
@media (pointer:coarse){ .btn.sm{min-height:var(--tap)} .btn.sm.icon{width:var(--tap)} }

/* ============================================================= 16. EMPTY STATES */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:30px 18px; border:1.5px dashed var(--line-2); border-radius:var(--r-lg); background:var(--surface); color:var(--ink-2)}
.empty>.ico{width:40px; height:40px; color:var(--brand-400)}
.empty h3{font-size:16px; font-weight:720; color:var(--ink)}
.empty p{font-size:14px; max-width:46ch}
.empty .btn-row{justify-content:center; margin-top:6px}
.empty.sm{padding:18px 14px; flex-direction:row; text-align:left; gap:12px} .empty.sm>.ico{width:28px; height:28px}

/* ============================================================= 17. TOASTS */
.toasts{position:fixed; z-index:120; left:50%; bottom:20px; transform:translateX(-50%); width:min(440px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:8px; pointer-events:none}
@media (max-width:759px){ body.has-tabbar .toasts,body.has-dock .toasts{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px)} }
.toast{pointer-events:auto; display:flex; align-items:center; gap:10px; padding:11px 12px 11px 14px; border-radius:var(--r-lg); background:var(--toast-bg); color:var(--toast-ink); box-shadow:var(--sh-3); font-size:14px; line-height:1.4; animation:toast-in .18s ease-out}
.toast::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand-400); flex:none}
.toast.pos::before{background:#4cc38a} .toast.neg::before{background:#f07167} .toast.warn::before{background:var(--accent)} .toast.info::before{background:#5b9cf0}
.toast .msg{flex:1 1 auto; min-width:0}
.toast button{flex:none; background:none; border:0; color:inherit; font-weight:750; padding:6px 8px; border-radius:6px; min-height:34px; text-decoration:underline; text-underline-offset:2px}
.toast button.x{text-decoration:none; opacity:.75; font-size:18px; line-height:1}
.toast.pos,.toast.neg,.toast.warn,.toast.info{color:var(--toast-ink)}  /* the .pos/.neg/.warn text utilities must not recolour toasts */
.toast.out{animation:toast-out .16s ease-in forwards}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes toast-out{to{opacity:0; transform:translateY(6px)}}

/* ============================================================= 18. SHEET / MODAL (native <dialog>)
   Desktop: centred modal. Mobile: bottom sheet (unless .modal). */
dialog.sheet{border:0; padding:0; margin:auto; width:min(560px, calc(100vw - 32px)); max-width:none; max-height:min(86vh, 860px); background:var(--surface); color:var(--ink); border-radius:18px; box-shadow:var(--sh-3); overflow:hidden}
dialog.sheet[open]{display:flex; flex-direction:column}
dialog.sheet.lg{width:min(820px, calc(100vw - 32px))}
dialog.sheet.sm{width:min(420px, calc(100vw - 32px))}
dialog.sheet::backdrop{background:var(--scrim)}
.sheet-hd{display:flex; align-items:center; gap:10px; padding:14px 12px 12px 20px; border-bottom:1px solid var(--line); flex:none}
.sheet-hd h2{font-size:17px; font-weight:740; flex:1 1 auto; min-width:0}
.sheet-hd .x{width:var(--tap); height:var(--tap); border-radius:50%; border:0; background:none; color:var(--ink-2); display:grid; place-items:center; flex:none}
.sheet-hd .x:hover{background:var(--hover)}
.sheet-bd{padding:16px 20px 18px; overflow:auto; flex:1 1 auto; min-height:0}
.sheet-ft{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--line); background:var(--surface-2); flex:none}
dialog.sheet[open]{animation:sheet-pop .16s ease-out}
@keyframes sheet-pop{from{opacity:0; transform:translateY(6px) scale(.985)} to{opacity:1; transform:none}}
@media (max-width:759px){
  dialog.sheet:not(.modal){margin:auto 0 0 0; width:100vw; max-height:92dvh; border-radius:20px 20px 0 0}
  dialog.sheet:not(.modal)[open]{animation:sheet-up .22s cubic-bezier(.2,.8,.2,1)}
  dialog.sheet:not(.modal) .sheet-hd{position:relative; padding-top:20px}
  dialog.sheet:not(.modal) .sheet-hd::before{content:""; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line-2)}
  dialog.sheet:not(.modal) .sheet-ft{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .sheet-ft>.btn{flex:1 1 auto}
  .sheet-bd{padding:14px 16px 16px}
}
@keyframes sheet-up{from{transform:translateY(40%); opacity:.4} to{transform:none; opacity:1}}
/* list of nav links inside the mobile "Thêm" sheet */
.sheet-nav{display:grid; gap:4px}
.sheet-nav a,.sheet-nav button{display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:620; font-size:15px; background:none; border:0; text-align:left; width:100%}
.sheet-nav a:hover,.sheet-nav button:hover{background:var(--hover)}
.sheet-nav a[aria-current="page"]{background:var(--brand-soft-2); color:var(--brand-ink)}
.sheet-nav .ico{color:var(--brand-ink-2); width:22px; height:22px}
.sheet-nav small{display:block; font-weight:450; color:var(--muted); font-size:12.5px}

/* ============================================================= 19. PROGRESS + STEPPER */
.progress{display:flex; height:8px; border-radius:var(--r-pill); background:var(--track); overflow:hidden; min-width:0}
.progress>span{display:block; height:100%; width:var(--v,0%); background:var(--primary); transition:width .3s}
.progress.lg{height:12px} .progress.sm{height:5px}
.progress>.p-have{background:var(--pos)} .progress>.p-partial{background:var(--warn)} .progress>.p-none{background:var(--ink-3)} .progress>.p-proc{background:var(--info)}
.progress>.p-warn{background:var(--warn)} .progress>.p-neg{background:var(--neg)}
.progress+.progress-meta,.progress-meta{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:6px}
.progress-hd{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; font-size:13.5px}
.progress-hd b{font-variant-numeric:tabular-nums}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-2)}
.legend .it{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:11px; height:11px; border-radius:3px; background:var(--c, var(--primary)); flex:none}
/* stepper: deal stages, process steps */
.stepper{display:flex; list-style:none; margin:0; padding:0; min-width:0}
.stepper li{flex:1 1 0; position:relative; padding-top:26px; text-align:center; font-size:12.5px; color:var(--muted); min-width:0; line-height:1.3}
.stepper li::before{content:""; position:absolute; top:4px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); z-index:1; box-sizing:border-box}
.stepper li::after{content:""; position:absolute; top:10px; left:calc(-50% + 9px); right:calc(50% + 9px); height:2px; background:var(--line-2)}
.stepper li:first-child::after{display:none}
.stepper li.done{color:var(--ink-2)}
.stepper li.done::before{background:var(--primary); border-color:var(--primary)}
.stepper li.done::after,.stepper li.now::after{background:var(--primary)}
.stepper li.now{color:var(--brand-ink); font-weight:750}
.stepper li.now::before{width:18px; height:18px; margin-left:-9px; top:2px; border:3px solid var(--primary); background:var(--surface); box-shadow:0 0 0 4px var(--brand-soft-2)}
.stepper .lb{display:block; padding:0 3px; overflow:hidden; text-overflow:ellipsis}
@media (max-width:759px){
  .stepper li:not(.now) .lb{display:none}
  .stepper li.now{flex:3 1 0}
  .stepper li{padding-top:24px}
}

/* ============================================================= 20. TIMELINE + PAYMENT MILESTONES */
.timeline{list-style:none; margin:0; padding:0}
.tl-item{position:relative; padding:0 0 16px 30px; min-width:0}
.tl-item::before{content:""; position:absolute; left:5px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); box-sizing:border-box; z-index:1}
.tl-item::after{content:""; position:absolute; left:10px; top:19px; bottom:0; width:2px; background:var(--line)}
.tl-item:last-child{padding-bottom:0}
.tl-item:last-child::after{display:none}
.tl-item.done::before{background:var(--primary); border-color:var(--primary)}
.tl-item.now::before{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.tl-item.neg::before{border-color:var(--neg); background:var(--neg)}
.tl-item.info::before{border-color:var(--info)}
.tl-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.tl-date{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:normal; overflow-wrap:anywhere; min-width:0}
@media (min-width:760px){ .tl-date{white-space:nowrap} }
.tl-title{font-weight:680; font-size:14.5px; color:var(--ink)}
.tl-body{font-size:14px; color:var(--ink-2); margin-top:2px}
.timeline.compact .tl-item{padding-bottom:10px} .timeline.compact .tl-title{font-size:14px; font-weight:600}
/* milestones = how money moves at each step (firms page, deal page). Horizontal ≥760, vertical rail on mobile. */
.milestones{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:16px; counter-reset:ms}
.ms{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:16px 16px 14px; counter-increment:ms; min-width:0; display:flex; flex-direction:column; gap:4px}
.ms::before{content:counter(ms); position:absolute; top:-13px; left:14px; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--on-primary); font-size:13px; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 3px var(--page)}
.ms:not(:last-child)::after{content:""; position:absolute; top:50%; right:-13px; width:10px; height:10px; border-top:2px solid var(--line-2); border-right:2px solid var(--line-2); transform:translateY(-50%) rotate(45deg)}
.ms .when{font-size:12px; font-weight:760; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-ink-2); margin-top:4px}
.ms .amt{font-size:24px; font-weight:780; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2}
.ms .amt small{font-size:13px; font-weight:650; color:var(--muted)}
.ms .what{font-size:14px; color:var(--ink-2)}
.ms .cond{font-size:13px; color:var(--ink-2); border-top:1px dashed var(--line); padding-top:8px; margin-top:auto}
.ms .cond b{color:var(--ink)}
.ms.future{background:var(--surface-2); box-shadow:none}
.ms.future::before{background:var(--surface); color:var(--brand-ink-2); border:2px solid var(--primary)}
@media (max-width:899px){
  .milestones{grid-auto-flow:row; grid-auto-columns:auto; gap:12px; padding-left:34px; position:relative}
  .milestones::before{content:""; position:absolute; left:12px; top:14px; bottom:14px; width:2px; background:var(--line-2)}
  .ms::before{left:-34px; top:14px}
  .ms:not(:last-child)::after{display:none}
}

/* ============================================================= 21. CALLOUTS + BANNERS */
.callout{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--brand-line); border-left:4px solid var(--primary); border-radius:var(--r-md); background:var(--brand-soft); color:var(--ink-2); font-size:14px; line-height:1.55}
.callout>.ico{flex:none; width:20px; height:20px; margin-top:1px; color:var(--brand-ink-2)}
.callout b,.callout strong{color:var(--ink)}
.callout .ttl{display:block; font-weight:720; color:var(--ink); margin-bottom:2px}
.callout>div{min-width:0; flex:1 1 auto}
.callout.info{background:var(--info-soft); border-color:var(--info-line); border-left-color:var(--info)} .callout.info>.ico{color:var(--info-ink)}
.callout.warn{background:var(--warn-soft); border-color:var(--warn-line); border-left-color:var(--warn)} .callout.warn>.ico{color:var(--warn-ink)}
.callout.neg{background:var(--neg-soft); border-color:var(--neg-line); border-left-color:var(--neg)} .callout.neg>.ico{color:var(--neg-ink)}
.callout.legal{background:var(--violet-soft); border-color:transparent; border-left-color:var(--violet-ink)} .callout.legal>.ico{color:var(--violet-ink)}
.callout+.callout{margin-top:10px}
/* inline legal-gate marker: <span class="gate">chờ tư vấn pháp lý</span> */
.gate{display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:var(--r-pill); background:var(--violet-soft); color:var(--violet-ink); font-size:12px; font-weight:700; white-space:nowrap; vertical-align:middle}
.gate::before{content:"⚖"; font-size:12px}
/* full-width banner above content (archive, processing, read-only, offline) */
.banner{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:10px 16px; font-size:14px; background:var(--accent-soft); color:var(--warn-ink); border-bottom:1px solid var(--accent-line)}
.banner .wrap{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding-inline:0}
.banner b{color:inherit}
.banner.info{background:var(--info-soft); color:var(--info-ink); border-color:var(--info-line)}
.banner.ro{background:var(--slate-soft); color:var(--slate-ink); border-color:var(--line)}
.banner .end{margin-left:auto}
.banner>span:not(.spin):not(.end),.banner .wrap>span:not(.spin):not(.end){flex:1 1 220px; min-width:0}
.banner>.ico,.banner .wrap>.ico,.banner .spin{flex:none}

/* ============================================================= 22. SKELETON + SPINNER */
.skel{display:block; min-height:14px; border-radius:8px; background:linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 45%, var(--surface-3) 90%); background-size:300% 100%; animation:skel 1.4s ease-in-out infinite}
.skel.line{height:14px; margin:7px 0} .skel.line.lg{height:20px}
.skel.title{height:22px; width:42%; margin-bottom:12px}
.skel.num{height:28px; width:60%; margin:4px 0}
.skel.box{height:120px}
.skel.circle{width:36px; height:36px; border-radius:50%}
.w-30{width:30%} .w-50{width:50%} .w-60{width:60%} .w-80{width:80%}
@keyframes skel{0%{background-position:100% 0} 100%{background-position:0 0}}
.spin{display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite; vertical-align:-3px; flex:none}
.spin.sm{width:13px; height:13px; border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important} .spin,.pill.dr-proc::before,.btn.loading::after{animation:spin 1.6s linear infinite!important} }

/* ============================================================= 23. LANGUAGE TOGGLE + i18n
   Blocks: <p data-vi>…</p><p data-en>…</p> (CSS shows one; no JS needed for default VN).
   Short strings: <span data-vi="Tổng quan" data-en="Overview">Tổng quan</span> (dcs.js swaps text). */
html[lang^="en"] [data-vi]:not([data-en]){display:none!important}
html:not([lang^="en"]) [data-en]:not([data-vi]){display:none!important}
.lang{display:inline-flex; padding:3px; gap:2px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line)}
.lang button{min-height:32px; min-width:42px; padding:0 10px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink-2); font-size:13px; font-weight:750; letter-spacing:.03em}
.lang button[aria-pressed="true"]{background:var(--primary); color:var(--on-primary)}
.appbar .lang,.hero .lang{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2)}
.appbar .lang button,.hero .lang button{color:var(--on-band-2)}
.appbar .lang button[aria-pressed="true"],.hero .lang button[aria-pressed="true"]{background:#fff; color:var(--brand-900)}
@media (pointer:coarse){ .lang button{min-height:38px; min-width:46px} }

/* ============================================================= 24. PUBLIC / EXTERNAL SITE
   Polished company feel: white header, generous sections, 70ch prose, brand hero, dark footer. */
.site-hd{position:sticky; top:0; z-index:60; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(11,40,28,.02)}
.site-hd-in{max-width:var(--maxw-read); margin:0 auto; height:64px; display:flex; align-items:center; gap:18px; padding:0 16px}
@media (min-width:760px){ .site-hd-in{padding:0 24px} }
.site-hd .logo{color:var(--brand-ink)}
.site-hd .logo-mk{background:var(--brand-700)}
.site-hd .logo-tx small{color:var(--muted)}
.site-nav{display:flex; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{display:flex; align-items:center; height:38px; padding:0 12px; border-radius:var(--r-pill); color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap}
.site-nav a:hover{background:var(--hover); color:var(--ink)}
.site-nav a[aria-current="true"],.site-nav a[aria-current="page"]{color:var(--brand-ink); background:var(--brand-soft-2)}
.site-hd .end{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}
/* anchor chips row under the header on mobile (long-scroll pages) */
.anchors{display:none}
@media (max-width:759px){
  .site-hd-in{height:56px; gap:10px}
  .site-hd .site-nav{display:none}
  .anchors{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:8px 16px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:56px; z-index:55}
  .anchors::-webkit-scrollbar{display:none}
  .anchors a{flex:none; display:flex; align-items:center; min-height:36px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-2); text-decoration:none; font-size:13px; font-weight:650; white-space:nowrap}
  .anchors a[aria-current="true"]{background:var(--brand-soft-2); border-color:var(--brand-line); color:var(--brand-ink)}
}
.hero{position:relative; background:linear-gradient(165deg, var(--brand-900) 0%, var(--brand-800) 60%, #125a41 100%); color:#fff; padding:56px 0 52px; overflow:hidden}
.hero::after{content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(closest-side, rgba(134,207,169,.22), transparent); pointer-events:none}
.hero .wrap{position:relative; z-index:1}
.hero .eyebrow{color:var(--brand-300)}
.hero h1{font-size:var(--fs-hero); line-height:1.18; font-weight:780; letter-spacing:-.018em; max-width:20ch; margin-top:10px}
.hero .lead{font-size:clamp(16px, 1.6vw, 19px); color:#d6e8de; max-width:62ch; margin-top:16px; line-height:1.6}
.hero .greet{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#eaf5ee; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:4px 14px; border-radius:var(--r-pill)}
.hero .btn-row{margin-top:24px}
.hero .btn:not(.primary):not(.accent){background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.hero .btn:not(.primary):not(.accent):hover{background:rgba(255,255,255,.1)}
.hero .btn.primary{background:#fff; color:var(--brand-900); border-color:#fff}
.hero-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(170px,100%),1fr)); gap:1px; margin-top:32px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); overflow:hidden}
.hero-stats>div{background:rgba(6,42,31,.55); padding:14px 16px}
.hero-stats .v{font-size:24px; font-weight:780; font-variant-numeric:tabular-nums; line-height:1.2}
.hero-stats .l{font-size:13px; color:#bcd7c8; margin-top:2px}
.hero.compact{padding:32px 0 28px}
.hero.compact h1{font-size:clamp(24px,3vw,32px); max-width:none}
@media (max-width:759px){ .hero{padding:36px 0 32px} .hero .lead{margin-top:12px} .hero-stats{grid-template-columns:1fr 1fr} .hero-stats .v{font-size:19px} .hero-stats>div:last-child:nth-child(odd){grid-column:1/-1} }
.eyebrow{display:block; font-size:12.5px; font-weight:780; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-ink-2)}
.sect{padding:52px 0; scroll-margin-top:72px}
.sect+.sect{border-top:1px solid var(--line)}
.sect.alt{background:var(--surface)}
.sect-hd{max-width:var(--measure); margin-bottom:24px}
.sect-hd h2{font-size:clamp(22px, 2.6vw, 30px); line-height:1.25; font-weight:770; color:var(--brand-ink); letter-spacing:-.012em; margin-top:6px}
.sect-hd .lead,.lead{font-size:17px; color:var(--ink-2); margin-top:10px; line-height:1.6}
@media (max-width:759px){ .sect{padding:36px 0; scroll-margin-top:110px} .sect-hd{margin-bottom:18px} .sect-hd .lead,.lead{font-size:16px} }
.prose{max-width:var(--measure); font-size:16px; line-height:1.72; color:var(--ink)}
.prose>*+*{margin-top:14px}
.prose h3{font-size:19px; font-weight:740; color:var(--brand-ink); margin-top:28px}
.prose h4{font-size:16px; font-weight:720; margin-top:20px}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:6px}
.prose blockquote{border-left:3px solid var(--brand-300); padding:4px 0 4px 16px; color:var(--ink-2); font-style:italic}
.prose .verbatim{white-space:pre-line}
.feature{display:flex; flex-direction:column; gap:8px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0}
.sect.alt .feature{background:var(--page)}
.feature>.ico{width:30px; height:30px; color:var(--brand-ink-2)}
.feature h3{font-size:17px; font-weight:740; color:var(--ink)}
.feature p{font-size:14.5px; color:var(--ink-2); line-height:1.6}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 0; font-weight:680; font-size:16px; cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-size:22px; font-weight:400; color:var(--brand-ink-2); flex:none; width:24px; text-align:center}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 16px; color:var(--ink-2); font-size:15px; max-width:var(--measure)}
.site-ft{background:var(--brand-950); color:#c6dccf; padding:40px 0 calc(40px + env(safe-area-inset-bottom)); font-size:14px}
.site-ft a{color:#fff}
.site-ft .logo{color:#fff}
.site-ft .cols{display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr))}
.site-ft h4{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#93b5a3; margin-bottom:8px}
.site-ft .disclaimer{margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#93b5a3; line-height:1.6; max-width:90ch}
body.has-dock .site-ft{padding-bottom:calc(40px + var(--tabbar-h) + env(safe-area-inset-bottom))}
/* public stub "/" : one screen, brand, one line, contact */
.stub{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:linear-gradient(165deg, var(--brand-950), var(--brand-800)); color:#fff}
.stub-main{flex:1; display:flex; flex-direction:column; justify-content:center; gap:18px; padding-block:48px}  /* padding-block only: keep the .wrap side gutter */
.stub h1{font-size:clamp(30px, 5vw, 54px); font-weight:780; line-height:1.15; letter-spacing:-.02em; max-width:18ch}
.stub p{font-size:18px; color:#cfe2d7; max-width:56ch}
.stub .contact{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.stub .contact a{display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); padding:0 16px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.28); color:#fff; text-decoration:none; font-weight:650}
.stub .contact a:hover{background:rgba(255,255,255,.1)}
.stub footer{padding-top:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); font-size:13px; color:#93b5a3}

/* ============================================================= 25. AUTH (login: /in/login, /s/<slug>/ login) */
.auth{min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:24px 16px; background:linear-gradient(165deg, var(--brand-950), var(--brand-800))}
.auth-card{width:100%; max-width:400px; background:var(--surface); color:var(--ink); border-radius:var(--r-xl); box-shadow:var(--sh-3); padding:28px 24px 24px}
.auth-card .logo{color:var(--brand-ink); margin-bottom:18px}
.auth-card h1{font-size:22px; font-weight:760; color:var(--ink)}
.auth-card .lead{font-size:14px; color:var(--muted); margin:4px 0 18px}
.auth-card .stack{--gap:14px}
.auth-foot{margin-top:16px; font-size:12.5px; color:var(--muted); text-align:center}

/* ============================================================= 26. ORG TREE (structure: ownership)
   <ul class="org"><li><div class="org-node">…</div><ul><li>…</li></ul></li></ul>
   ≥760px: top-down chart with connectors · ≤759px: indented vertical tree. Dark-mode safe (no SVG colours). */
.org-wrap{overflow-x:auto; padding:4px 2px 8px; max-width:100%}
.org,.org ul{list-style:none; margin:0; padding:0}
.org{display:flex; justify-content:center; min-width:min-content}
.org ul{display:flex; justify-content:center; position:relative; padding-top:22px}
.org li{position:relative; display:flex; flex-direction:column; align-items:center; padding:22px 7px 0}
.org>li{padding-top:0}
.org li::before,.org li::after{content:""; position:absolute; top:0; right:50%; width:50%; height:22px; border-top:2px solid var(--line-2)}
.org li::after{right:auto; left:50%; border-left:2px solid var(--line-2)}
.org li:only-child::before,.org li:only-child::after{display:none}
.org ul>li:only-child{padding-top:0}
.org li:first-child::before,.org li:last-child::after{border:0}
.org li:last-child::before{border-right:2px solid var(--line-2); border-radius:0 8px 0 0}
.org li:first-child::after{border-radius:8px 0 0 0}
.org ul::before{content:""; position:absolute; top:0; left:50%; height:22px; border-left:2px solid var(--line-2)}
.org>li::before,.org>li::after{display:none}
.org ul>li:only-child::before{display:block; border:0}
.org-node{position:relative; z-index:1; width:208px; text-align:left; background:var(--surface); border:1.5px solid var(--line-2); border-radius:12px; padding:10px 12px 11px; box-shadow:var(--sh-1)}
.org-node.key{border-color:var(--primary); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft-2)}
.org-node.ext{border-style:dashed; background:var(--surface-2); box-shadow:none}
.org-node.plan{border-style:dashed}
.org-node .k{font-size:11px; font-weight:780; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-ink-2)}
.org-node h4{font-size:15px; font-weight:760; color:var(--ink); line-height:1.3}
.org-node .role{font-size:12.5px; color:var(--ink-2); line-height:1.4; margin-top:2px}
.org-node .pills{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.org-node .pills .pill{font-size:11px; padding:1px 7px}
.org-node .flow{font-size:12px; color:var(--ink-2)}
.org-edge{font-size:11.5px; font-weight:650; color:var(--brand-ink-2); background:var(--page); padding:0 6px; position:relative; z-index:1; margin:-2px 0 2px; white-space:nowrap}
.flows{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-2)}
.flow{display:inline-flex; align-items:center; gap:6px}
.flow::before{content:""; width:22px; height:0; border-top:2px solid var(--pos)}
.flow.svc::before{border-top:2px dashed var(--muted)}
.flow.debt::before{border-top-color:var(--neg)}
.flow.fee::before{border-top:2px dotted var(--warn)}
@media (max-width:759px){
  .org{display:block; min-width:0}
  .org ul{display:block; padding:0 0 0 18px; margin-left:10px}
  .org li{display:block; padding:10px 0 0 16px}
  .org>li{padding-left:0}
  .org li::before{display:block!important; content:""; position:absolute; left:0; top:0; bottom:0; right:auto; width:0; height:auto; border:0!important; border-left:2px solid var(--line-2)!important; border-radius:0!important}
  .org li:last-child::before{bottom:auto; height:31px}
  .org li::after{display:block!important; content:""; position:absolute; left:0; top:31px; right:auto; width:14px; height:0; border:0!important; border-top:2px solid var(--line-2)!important; border-radius:0!important}
  .org>li::before,.org>li::after,.org ul::before{display:none!important}
  .org ul>li:only-child{padding-top:10px}
  .org-node{width:auto; max-width:none}
  .org-edge{display:inline-block; margin:6px 0 0 4px; background:none; padding:0}
}

/* ============================================================= 27. DATA ROOM LIST (partner /s/<slug>/ + admin)
   One row per checklist item: number · title (expandable verbatim text) + missing detail · status · "Không có" tick. */
.dr-group{margin-top:var(--s-5)}
.dr-group>h3{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:780; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-ink-2); padding:0 2px 8px}
.dr-group>h3 .count{margin-left:auto; text-transform:none; letter-spacing:0}
.dr-list{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden}
.dr-row{display:grid; grid-template-columns:36px minmax(0,1fr) 128px 132px; gap:4px 14px; align-items:start; padding:12px 16px; border-top:1px solid var(--grid)}
.dr-row:first-child{border-top:0}
.dr-no{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-2); font-size:13px; font-weight:760; font-variant-numeric:tabular-nums}
.dr-row.is-have .dr-no{background:var(--pos-soft); color:var(--pos-ink)}
.dr-row.is-partial .dr-no{background:var(--warn-soft); color:var(--warn-ink)}
.dr-main{min-width:0}
.dr-main details>summary{list-style:none; cursor:pointer; font-weight:650; font-size:14.5px; color:var(--ink); line-height:1.45; padding:3px 0; display:flex; gap:6px}
.dr-main details>summary::-webkit-details-marker{display:none}
.dr-main details>summary::after{content:"▾"; color:var(--muted); font-size:12px; margin-top:3px; transition:transform .15s}
.dr-main details:not([open])>summary::after{transform:rotate(-90deg)}
.dr-main .full{font-size:14px; color:var(--ink-2); line-height:1.6; padding:4px 0 6px; white-space:pre-line}
.dr-miss{font-size:13.5px; color:var(--warn-ink); margin-top:2px}
.dr-miss.ok{color:var(--muted)}
.dr-note{margin-top:8px}
.dr-st{padding-top:3px}
.dr-none .check{min-height:34px; padding:3px 0; font-size:13.5px}
.dr-row.is-none{background:var(--surface-2)}
.dr-row.is-none .dr-main summary{color:var(--ink-2)}
.dr-files{list-style:none; margin:0; padding:0; font-size:13.5px}
.dr-files li{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--grid); min-width:0}
.dr-files li:first-child{border-top:0}
.dr-files .fn{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; font-family:var(--mono); font-size:12.5px}
.dr-files .why{flex:none; color:var(--muted); font-size:12.5px}
.submit-box{display:flex; flex-direction:column; gap:10px}
.submit-box .input-group .input{font-family:var(--mono); font-size:14px}
@media (max-width:759px){
  .dr-row{grid-template-columns:30px minmax(0,1fr); padding:12px 14px}
  .dr-st,.dr-none{grid-column:2}
  .dr-st{padding-top:0}
  .dr-row .dr-st+.dr-none{margin-top:-2px}
  .dr-files li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 10px} .dr-files .why{grid-column:2}
  .submit-box .input-group{flex-direction:column; gap:8px}
  .submit-box .input-group>.input{border-radius:var(--r-md); font-size:16px}
  .submit-box .input-group>.btn{border-radius:var(--r-md); margin-left:0; width:100%}
}

/* ============================================================= 28. MINI CHARTS (CSS-only; numbers always also in a table) */
.bars{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:end; gap:10px; height:var(--h,150px); padding-top:18px; border-bottom:1.5px solid var(--line-2)}
.bars .b{position:relative; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%}
.bars .b>i{display:block; width:100%; max-width:30px; height:calc(var(--v,0) * 100%); min-height:2px; background:var(--c, var(--c1)); border-radius:4px 4px 0 0; position:relative}
.bars .b>i.s2{--c:var(--c2)} .bars .b>i.s3{--c:var(--c3)}
.bars .b>i[data-v]::before{content:attr(data-v); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; font-style:normal; color:var(--ink-2); white-space:nowrap; padding-bottom:2px; font-variant-numeric:tabular-nums}
.bars-x{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; font-size:12px; color:var(--muted); text-align:center; margin-top:6px}
/* pipeline strip: count per stage, proportional */
.pipe{display:flex; gap:3px; height:auto; min-width:0}
.pipe a,.pipe>div{flex:var(--n,1) 1 0; min-width:44px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; padding:8px 8px 7px; border-radius:8px; background:var(--surface-2); color:var(--ink-2); text-decoration:none; font-size:11.5px; line-height:1.25; border-bottom:4px solid var(--stg, var(--ink-3)); overflow:hidden}
.pipe b{font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums}
.pipe .lb{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pipe a:hover{background:var(--hover)}
.pipe .zero{opacity:.55}
@media (max-width:759px){ .pipe{display:grid; grid-template-columns:repeat(auto-fit, minmax(78px,1fr)); gap:4px} .pipe a,.pipe>div{min-width:0} }
.hbar{display:grid; grid-template-columns:minmax(80px, 30%) minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13.5px; padding:4px 0}
.hbar .track{height:10px; background:var(--track); border-radius:5px; overflow:hidden}
.hbar .track>i{display:block; height:100%; width:var(--v,0%); background:var(--c, var(--c1)); border-radius:5px}
.hbar .val{font-variant-numeric:tabular-nums; font-weight:650; min-width:56px; text-align:right}

/* ============================================================= 29. MISC: key-value, avatars, chips, collapsibles */
.kv{display:grid; grid-template-columns:minmax(120px, max-content) minmax(0,1fr); gap:8px 18px; font-size:14px; margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; color:var(--ink); font-weight:550; min-width:0}
.kv dd.n{font-variant-numeric:tabular-nums}
@media (max-width:420px){ .kv{grid-template-columns:1fr; gap:0} .kv dt{margin-top:8px; font-size:13px} }
.av{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--brand-soft-2); color:var(--brand-ink); font-size:11.5px; font-weight:780; flex:none; border:2px solid var(--surface); letter-spacing:.02em}
.av.lg{width:40px; height:40px; font-size:14px}
.av.c2{background:var(--info-soft); color:var(--info-ink)} .av.c3{background:var(--accent-soft); color:var(--warn-ink)} .av.c4{background:var(--violet-soft); color:var(--violet-ink)}
.av-stack{display:inline-flex} .av-stack .av+.av{margin-left:-8px}
.who{display:inline-flex; align-items:center; gap:8px; min-width:0}
.who .nm{font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-size:13.5px; font-weight:620; white-space:nowrap; cursor:pointer; text-decoration:none}
.chip:hover{border-color:var(--muted); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--brand-soft-2); border-color:var(--brand-line); color:var(--brand-ink)}
.chip .count{height:18px; min-width:18px; font-size:11px}
@media (pointer:coarse){ .chip{min-height:var(--tap)} }
.chips.scroll{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none} .chips.scroll::-webkit-scrollbar{display:none}
/* collapsible section (TFA "details.x") — use data-l="1|2" for collapse levels */
details.x{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); min-width:0}
details.x+details.x{margin-top:10px}
details.x>summary{list-style:none; display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 16px; cursor:pointer; font-weight:680; font-size:15px; color:var(--ink); border-radius:var(--r-lg)}
details.x>summary::-webkit-details-marker{display:none}
details.x>summary:hover{background:var(--hover)}
details.x>summary .cv{flex:none; width:22px; height:22px; border-radius:7px; background:var(--brand-soft); border:1px solid var(--line); display:grid; place-items:center; transition:transform .18s}
details.x>summary .cv::before{content:""; width:7px; height:7px; border-right:2px solid var(--brand-ink-2); border-bottom:2px solid var(--brand-ink-2); transform:rotate(45deg); margin-top:-3px}
details.x[open]>summary .cv{transform:rotate(180deg)}
details.x>summary .cnt{margin-left:auto; font-size:13px; font-weight:500; color:var(--muted); text-align:right}
details.x>summary .t{min-width:0}
details.x>summary .t small{display:block; font-weight:450; font-size:12.5px; color:var(--muted)}
details.x[open]>summary{border-radius:var(--r-lg) var(--r-lg) 0 0}
details.x>.in{padding:4px 16px 16px; border-top:1px dashed var(--grid)}
details.x>.in.flush{padding:0}
details.x.plain{background:transparent; border:0; box-shadow:none}
details.x.plain>.in{border:0; padding-inline:0}
@media (max-width:759px){ details.x>summary{padding:10px 12px; font-size:14.5px} details.x>.in{padding:4px 12px 14px} }
.divider{height:1px; background:var(--line); margin:var(--s-4) 0}
.kbd{font-family:var(--mono); font-size:12px; padding:1px 6px; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; background:var(--surface)}
.swatch{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-2); min-width:0}
.swatch i{display:block; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--sw)}
.swatch code{font-size:11px; background:none; border:0; padding:0; color:var(--muted)}

/* ============================================================= 30. ICONS (CSS mask; colour = currentColor, so dark-mode safe)
   <i class="ico i-home" aria-hidden="true"></i> — 24×24 stroke icons, rendered at 1.25em by default. */
.ico{display:inline-block; width:1.25em; height:1.25em; flex:none; background-color:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; vertical-align:-.25em}
.i-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.i-deals{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E")}
.i-pmo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 1.5 1.5L8 5M4 12l1.5 1.5L8 11M4 18l1.5 1.5L8 17M11 6h9M11 12h9M11 18h9'/%3E%3C/svg%3E")}
.i-plan{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 6-7'/%3E%3C/svg%3E")}
.i-more{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E")}
.i-structure{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v4M6 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
.i-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.i-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1'/%3E%3Cpath d='M14 10a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1'/%3E%3C/svg%3E")}
.i-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E")}
.i-archive{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E")}
.i-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.i-chev-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.i-chev-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")}
.i-chev-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E")}
.i-arrow-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E")}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.i-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19z'/%3E%3Cpath d='M12 10v4M12 17.2v.1'/%3E%3C/svg%3E")}
.i-info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.8v.1'/%3E%3C/svg%3E")}
.i-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.i-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.i-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M16 4.2a4 4 0 0 1 0 7.6M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E")}
.i-logout{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E")}
.i-copy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M15 9V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h4'/%3E%3C/svg%3E")}
.i-edit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m14 6 4 4'/%3E%3C/svg%3E")}
.i-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E")}
.i-refresh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E")}
.i-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.i-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E")}
.i-globe{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.i-file{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")}
.i-folder{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.i-filter{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E")}
.i-trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E")}
.i-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.i-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-send{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14'/%3E%3Cpath d='m21 3-7 18-4-7-7-4z'/%3E%3C/svg%3E")}
.i-dots{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E")}
.i-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.i-coins{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='9' cy='7' rx='6' ry='3'/%3E%3Cpath d='M3 7v5c0 1.7 2.7 3 6 3s6-1.3 6-3V7'/%3E%3Cpath d='M9 15v2c0 1.7 2.7 3 6 3s6-1.3 6-3v-5c0-1.7-2.7-3-6-3'/%3E%3C/svg%3E")}
.i-handshake{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1.4 1.4 0 0 0 2-2l-.5-.5M14 16l2.5 2.5a1.4 1.4 0 0 0 2-2L15 13'/%3E%3Cpath d='m18.5 16.5 1-1a1.4 1.4 0 0 0 0-2L14 8l-3 3a1.4 1.4 0 0 1-2-2l3.5-3.5a3 3 0 0 1 3.5-.5L21 7M3 7l4.5-2 2 1.2M3 14l5 5 1.5-1.5'/%3E%3C/svg%3E")}
.i-building{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 21v-4h6v4M8 7h2M14 7h2M8 11h2M14 11h2'/%3E%3C/svg%3E")}
.i-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E")}
.i-spark{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6'/%3E%3C/svg%3E")}
.i-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E")}
.i-inbox{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l2 3h4l2-3h5'/%3E%3Cpath d='M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E")}
.i-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E")}

/* ============================================================= 31. PRINT (external pages: investor, firms, referral, updates) */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff!important; color:#111!important; font-size:10.5pt}
  .appbar,.tabbar,.toolbar,.tabs,.seg,.lang,.toasts,.btn,.btn-row,.anchors,.site-nav,.dirtybar,.no-print,dialog,.skip,.menu{display:none!important}
  body.has-tabbar,body.has-dock{padding-bottom:0!important}
  .site-hd{position:static; border-bottom:1.5px solid #0b3d2e; box-shadow:none}
  .pane{display:block!important}
  .pane+.pane{break-before:page}
  .pane[data-print-title]::before{content:attr(data-print-title); display:block; font-size:16pt; font-weight:700; color:#0b3d2e; margin:0 0 8pt}
  .hero{background:none!important; color:#111!important; padding:0 0 12pt!important; border-bottom:1px solid #ccc}
  .hero::after{display:none}
  .hero *{color:#111!important}
  .hero-stats{background:none; border:1px solid #ccc} .hero-stats>div{background:#fff!important}
  .sect{padding:14pt 0!important; break-inside:auto}
  .card,.ocard,.tile,.ms,.feature,details.x,.dr-list,.callout,.kcard,tr{break-inside:avoid; box-shadow:none!important}
  .card,.ocard,.tile,.ms,.feature{border-color:#bbb!important}
  h1,h2,h3{break-after:avoid}
  a{color:inherit!important; text-decoration:none}
  .site-ft{background:none!important; color:#333!important; border-top:1px solid #ccc; padding:10pt 0!important}
  .site-ft *{color:#333!important}
  details>summary .cv,.faq summary::after{display:none}
  details::details-content{content-visibility:visible; display:block}
  .wrap{max-width:none!important; padding:0!important}
  .tbl-wrap{overflow:visible!important}
  .kbar{background:none!important; color:#111!important; border:1px solid #ccc} .kbar *{color:#111!important}
  .milestones{grid-auto-flow:row!important; padding-left:0!important} .milestones::before{display:none}
  .ms::before{position:static; margin-bottom:4pt; box-shadow:none}
}

/* ============================================================= 32. UTILITIES (small set; prefer components) */
.only-m{display:none!important}
@media (max-width:759px){ .only-m{display:revert!important} .only-d{display:none!important} }
.mt-0{margin-top:0!important} .mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-5{margin-top:20px} .mt-6{margin-top:24px} .mt-7{margin-top:32px}
.mb-0{margin-bottom:0!important} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.ta-r{text-align:right} .ta-c{text-align:center}
.nowrap{white-space:nowrap} .truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.fw-7{font-weight:700} .fs-sm{font-size:var(--fs-sm)} .fs-xs{font-size:var(--fs-xs)}
.pos{color:var(--pos-ink)} .neg{color:var(--neg-ink)} .warn{color:var(--warn-ink)}
html[data-role]:not([data-role="admin"]):not([data-role="owner"]) .only-admin{display:none!important}
html:not([data-role="owner"]) .only-owner{display:none!important}
html:not([data-role]) .only-admin{display:none!important}
html:not([data-can-edit]) .only-edit{display:none!important}
html[data-can-edit] .only-ro{display:none!important}

/* ---------------------------------------------------------------- ops pages (deals · PMO · updates · share · admin) — was <style id="ops-css"> in each page */
.count:empty{display:none}
.mono{font-family:var(--mono)} .pre{white-space:pre-line} .stack-sm{display:flex; flex-direction:column; gap:8px}
.select.sm{min-height:34px; padding:4px 30px 4px 10px; font-size:13.5px; width:auto; max-width:100%}
@media (pointer:coarse){ .select.sm{min-height:var(--tap)} }
.task-t{font-weight:650; text-align:left; color:var(--ink)}
.tbl tr.late>td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
.tbl tr.is-done .task-t{text-decoration:line-through; color:var(--muted)}
.tbl.tasks .sub{display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:2px; font-weight:400}
.tbl.tasks .sub a{color:inherit}
.stage-pick{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; border:0; padding:0; margin:0}
.stage-opt{padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm)}
.stage-opt:has(input:checked){border-color:var(--primary); background:var(--brand-soft)}
@media (max-width:759px){ .tbl.cardify tr.late{border-left:3px solid var(--neg)} .tbl.cardify tr.late>td:first-child{box-shadow:none} }