:root{
    --ink:#16181c;--ink-2:#5f636b;--ink-3:#9297a0;--label:#7f9a93;--sage:#5f716c;--sage-2:#8aa39c;
    --line:#e6e8ea;--line-2:#f2f3f5;--paper:#fff;--surface:#f6f7f8;--nav:#16181c;--desk:#f4f5f7;
    --accent:#1b1d21;--pos:#2f7d5b;--warn:#b07d2a;--danger:#b04a3f;
    --box3d:0 1px 1px rgba(20,24,28,.04),0 3px 7px -3px rgba(20,24,28,.09),0 8px 16px -10px rgba(20,24,28,.12);
    --sans:"Inter",-apple-system,"Segoe UI",system-ui,Arial,sans-serif;
    --mono:"SFMono-Regular","Cascadia Code","Consolas",ui-monospace,monospace;--fs:16px;
  }
  @media(prefers-color-scheme:dark){:root{--ink:#eef0f2;--ink-2:#a9adb5;--ink-3:#787d86;--label:#8fa9a2;--sage:#9db3ad;--line:#2c2e33;--line-2:#232529;--paper:#191b1f;--surface:#1e2025;--nav:#0e0f12;--desk:#0d0e10;--accent:#e7e8ea;--pos:#5fbf8f;--warn:#d6a95c;--danger:#e08b7f;--box3d:0 1px 1px rgba(0,0,0,.4),0 3px 8px -3px rgba(0,0,0,.5),0 10px 20px -12px rgba(0,0,0,.55)}}
  /* Manual theme override (customization toggle) — beats the OS preference. */
  :root[data-theme="light"]{--ink:#16181c;--ink-2:#5f636b;--ink-3:#9297a0;--label:#7f9a93;--sage:#5f716c;--sage-2:#8aa39c;--line:#e6e8ea;--line-2:#f2f3f5;--paper:#fff;--surface:#f6f7f8;--nav:#16181c;--desk:#ffffff;--accent:#1b1d21;--pos:#2f7d5b;--warn:#b07d2a;--danger:#b04a3f}
  :root[data-theme="dark"]{--ink:#eef0f2;--ink-2:#a9adb5;--ink-3:#787d86;--label:#8fa9a2;--sage:#9db3ad;--line:#2c2e33;--line-2:#232529;--paper:#191b1f;--surface:#1e2025;--nav:#0e0f12;--desk:#0d0e10;--accent:#e7e8ea;--pos:#5fbf8f;--warn:#d6a95c;--danger:#e08b7f;--box3d:0 1px 1px rgba(0,0,0,.4),0 3px 8px -3px rgba(0,0,0,.5),0 10px 20px -12px rgba(0,0,0,.55)}
  /* Tell the browser which palette native controls (number spinners, date pickers,
     scrollbars) should match — otherwise they render in the OS default scheme. */
  :root{color-scheme:light}
  @media(prefers-color-scheme:dark){:root{color-scheme:dark}}
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}
  *{box-sizing:border-box}
  /* The [hidden] attribute is a UA rule of the lowest possible weight, so ANY
     class that sets display beats it and the element stays on screen. That has
     now caused four separate bugs here — a voucher form left visible under the
     Bank tab, a preview pane eating the drop zone's space, a segmented control
     that would not hide, a line-pager header that outlived its own lines.
     One rule, once, for all of them. Anything that genuinely needs to stay
     laid out while hidden must use a different mechanism than [hidden]. */
  [hidden]{display:none!important}
  /* Always reserve the scrollbar gutter so switching views (taller/shorter content)
     never toggles the scrollbar and shifts the centred layout + hero sideways. */
  html{scrollbar-gutter:stable}
  body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--sans);font-size:var(--fs);line-height:1.5;-webkit-font-smoothing:antialiased}
  /* Ambient animated aurora behind the whole app (subtle, reduced-motion safe) */
  body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
    background:
      radial-gradient(38% 42% at 18% 22%, color-mix(in srgb,var(--sage) 24%,transparent), transparent 70%),
      radial-gradient(34% 40% at 84% 16%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%),
      radial-gradient(46% 46% at 68% 88%, color-mix(in srgb,var(--sage) 18%,transparent), transparent 72%);
    filter:blur(34px);opacity:.5;animation:auroraDrift 28s ease-in-out infinite alternate}
  @keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}}
  @media(prefers-reduced-motion:reduce){body::before{animation:none}}
  .mark{fill:#fff}
  .top{display:flex;align-items:center;justify-content:space-between;padding:15px 28px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
  .brand{display:flex;align-items:center;gap:13px}.brand svg{width:32px;height:auto}
  .brand .t{font-size:13px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;text-indent:.26em}
  .who{font-size:13px;color:var(--ink-2)}
  .wrap{max-width:960px;margin:0 auto;padding:26px 22px 80px}
  .hero{position:relative;aspect-ratio:16/5;max-height:360px;margin:0 0 28px;border-radius:26px;overflow:hidden;background:var(--surface);border:9px solid var(--surface);box-shadow:var(--box3d),0 0 0 1.5px var(--line),inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
  .hero img{width:100%;height:100%;object-fit:cover;display:block}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;box-shadow:inset 0 3px 4px rgba(255,255,255,.28),inset 0 -4px 12px rgba(0,0,0,.4),inset 0 2px 22px rgba(0,0,0,.28),inset 0 -70px 90px -46px rgba(0,0,0,.5)}
  .hero .herohead{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px 22px;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.08) 72%,transparent);color:#fff;display:flex;align-items:flex-end;gap:16px}
  .hero .herohead .hh-ic{width:68px;height:68px;flex:0 0 auto;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);margin-bottom:2px}
  .hero .herohead .hh-ic svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .hero .herohead .hh-txt{min-width:0}
  .hero .herohead h2{margin:0;font-size:clamp(24px,3.4vw,34px);font-weight:750;letter-spacing:-.02em;line-height:1.04;text-shadow:0 2px 20px rgba(0,0,0,.35)}
  .hero .herohead p{margin:6px 0 0;font-size:14.5px;opacity:.9;max-width:80ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero .brandmark{position:absolute;top:22px;right:24px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:#fff;text-align:right;text-shadow:0 2px 14px rgba(0,0,0,.4)}
  /* App switch bar above the hero — same shape as Torii's topbar: icon buttons
     on the left, identity on the right. In normal flow, not over the image. */
  /* Mirrors Torii's topbar: everything pushed RIGHT, square icon-only buttons,
     then the identity pill. Same metrics as .tb-btn / .who over there so the
     two apps read as one product. */
  .appbar{display:flex;align-items:center;gap:12px;margin:0 0 16px}
  .appbar .ab-sp{flex:1}
  .appbar .ab-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);
    background:var(--frame);color:var(--ink-2);display:grid;place-items:center;
    text-decoration:none;transition:.15s;box-shadow:var(--box3d)}
  .appbar .ab-btn:hover{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 40%,var(--line));transform:translateY(-1px)}
  .appbar .ab-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .appbar .ab-who{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;
    border:1px solid var(--line);border-radius:999px;background:var(--frame);box-shadow:var(--box3d)}
  .appbar .ab-nm{font-size:13.5px;font-weight:600}
  .appbar .ab-av{width:32px;height:32px;border-radius:50%;background:var(--sage);color:var(--paper);
    display:grid;place-items:center;font-size:12px;font-weight:700;overflow:hidden}
  .appbar .ab-av img{width:100%;height:100%;object-fit:cover}
  @media (max-width:720px){ .appbar .ab-nm{display:none} .appbar .ab-who{padding:5px} }
  .hero .brandmark .bm-cb{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;opacity:.72;margin-bottom:-1px}
  .hero .brandmark .bm-logo{height:38px;width:auto;opacity:.98;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
  .hero .edit{position:absolute;top:14px;right:14px;font:inherit;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.35);border-radius:9px;padding:7px 12px;cursor:pointer;backdrop-filter:blur(4px)}
  h1{font-size:22px;font-weight:680;margin:0 0 4px}.sub{color:var(--ink-2);margin:0 0 20px;font-size:14px}
  .drop{border:1.5px dashed var(--line);border-radius:14px;padding:22px;display:flex;gap:15px;align-items:center;cursor:pointer;background:var(--paper);margin-bottom:20px}
  .drop:hover{border-color:var(--sage-2);background:var(--surface)}
  .drop.busy{opacity:.6;pointer-events:none}
  .drop .ic{width:44px;height:44px;border-radius:11px;background:var(--surface);display:grid;place-items:center;color:var(--sage);flex:0 0 auto}
  .drop .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .drop .a{font-weight:600}.drop .b{font-size:13px;color:var(--ink-3);margin-top:2px}
  .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  /* Global haptic press — a tiny tactile squish on every button click */
  :where(button){transition:transform .09s ease}
  /* .btn defines its own press; a global scale() here overrode it. */
  button:active:not(:disabled):not(.btn){transform:scale(.955)}
  /* Flat accent buttons get a soft raised shadow so they don't look pressed-in */
  .pm-send,.tm-send{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(0,0,0,.14),0 6px 14px -7px rgba(0,0,0,.34)}
  .pm-send:hover{transform:translateY(-1px);filter:brightness(1.05)}
  .btn.tdel{display:inline-flex;align-items:center;gap:7px;background:var(--danger);border-color:var(--danger);color:#fff}
  .btn.tdel:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .btn.tdel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .btn.tdel[hidden]{display:none}
  /* One button, two fills. The filled and the outlined variant share every
     dimension and the same lift — only the surface differs, so a primary and a
     secondary action next to each other read as the same object with different
     weight rather than as two unrelated controls.
     --accent inverts with the theme (near-black on light, near-white on dark),
     so the filled button flips with it and needs no second rule. */
  /* The filled variant needs its OWN rim and shadow, not the ghost's.
     border-color:var(--accent) is the same tone as the fill, so the edge was
     invisible; and --box3d is a soft grey that reads under a white card and
     vanishes under a near-black one. Same CSS values, opposite result.
     So: an edge darkened against the fill, an inset top highlight that makes a
     dark button read as raised, and a drop shadow with enough weight to be seen
     on either theme. */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;font-weight:600;line-height:1.5;min-height:44px;box-sizing:border-box;color:var(--paper);background:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 75%,var(--ink-3));border-radius:12px;padding:10px 17px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.16),0 4px 10px -4px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .12s,box-shadow .15s,filter .15s}
  .btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 2px 4px rgba(0,0,0,.18),0 8px 18px -6px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.24)}
  .btn:disabled{opacity:.5;pointer-events:none;box-shadow:none;transform:none}
  /* The outlined twin. It kept var(--box3d) — three BLACK shadows, which under a
     dark button on a dark page are invisible, so only the filled one looked
     raised. It gets the same drop shadow as .btn plus a light top edge, because
     on a dark surface an edge has to be lighter than its background to be seen
     at all; a shadow cannot do that job.
     One caveat worth naming: the two will still not look exactly the same size.
     A light shape on a dark ground reads larger than a dark shape of identical
     dimensions — that is irradiation, an effect of the eye, and no CSS value
     fixes it. Their measurements are the same to the pixel. */
  .btn.ghost{color:var(--ink);background:var(--paper);border-color:color-mix(in srgb,var(--ink) 22%,var(--line));box-shadow:0 1px 2px rgba(0,0,0,.16),0 4px 10px -4px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07)}
  .btn.ghost:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sage) 55%,var(--line));box-shadow:0 2px 4px rgba(0,0,0,.18),0 8px 18px -6px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.09)}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--box3d)}
/* Wide dashboard cards (charts, tables) need LESS negative shadow-spread than the
   token so the shadow reaches their left/right edges — updated to a custom
   harsh shadow that reaches the edges but matches the token's crisp look. */
#view-dashboard .card,#view-dashboard .kpi,#view-dashboard .dh-card,#view-dashboard .budgetlist,#view-dashboard .pipecard,#view-dashboard .ovweek{box-shadow:0 1px 1px rgba(20,24,28,.04),0 3px 7px -3px rgba(20,24,28,.09),0 6px 12px -3px rgba(20,24,28,.12)}
@media(prefers-color-scheme:dark){#view-dashboard .card,#view-dashboard .kpi,#view-dashboard .dh-card,#view-dashboard .budgetlist,#view-dashboard .pipecard,#view-dashboard .ovweek{box-shadow:0 1px 1px rgba(0,0,0,.4),0 3px 8px -3px rgba(0,0,0,.5),0 8px 16px -4px rgba(0,0,0,.55)}}
:root[data-theme="dark"] #view-dashboard .card,:root[data-theme="dark"] #view-dashboard .kpi,:root[data-theme="dark"] #view-dashboard .dh-card,:root[data-theme="dark"] #view-dashboard .budgetlist,:root[data-theme="dark"] #view-dashboard .pipecard,:root[data-theme="dark"] #view-dashboard .ovweek{box-shadow:0 1px 1px rgba(0,0,0,.4),0 3px 8px -3px rgba(0,0,0,.5),0 8px 16px -4px rgba(0,0,0,.55)}
:root[data-theme="light"] #view-dashboard .card,:root[data-theme="light"] #view-dashboard .kpi,:root[data-theme="light"] #view-dashboard .dh-card,:root[data-theme="light"] #view-dashboard .budgetlist,:root[data-theme="light"] #view-dashboard .pipecard,:root[data-theme="light"] #view-dashboard .ovweek{box-shadow:0 1px 1px rgba(20,24,28,.04),0 3px 7px -3px rgba(20,24,28,.09),0 6px 12px -3px rgba(20,24,28,.12)}
  table{width:100%;border-collapse:collapse}
  th{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--label);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
  td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:14px}
  tr:last-child td{border-bottom:0}
  tbody tr{cursor:pointer}tbody tr:hover{background:var(--surface)}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid}
  .pill.draft{color:var(--ink-2);border-color:var(--line);background:var(--surface)}
  .pill.submitted{color:#4a7fd6;border-color:color-mix(in srgb,#4a7fd6 32%,transparent);background:color-mix(in srgb,#4a7fd6 10%,transparent)}
  .pill.final{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
  .pill.sent{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 30%,transparent);background:color-mix(in srgb,var(--pos) 9%,transparent)}
  .empty{padding:40px;text-align:center;color:var(--ink-3);font-size:14px}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--nav);color:#fff;padding:11px 18px;border-radius:11px;font-size:14px;opacity:0;transition:opacity .2s;z-index:20}
  /* Address autocomplete (street resolver) */
  .geobox{position:fixed;z-index:200;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px -18px rgba(0,0,0,.45);overflow:hidden;max-height:270px;overflow-y:auto}
  .geoi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:10px 13px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
  .geoi:hover{background:var(--surface)}
  .geoi svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--sage);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .geoi span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toast.show{opacity:1}
  input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px;color-scheme:light dark}
  /* Zen resize grip — vertical-only, the native corner handle blended into the field */
  textarea{resize:vertical}
  textarea::-webkit-resizer,.richnote::-webkit-resizer{background:transparent}
  textarea::-webkit-scrollbar,.richnote::-webkit-scrollbar{width:9px}
  textarea::-webkit-scrollbar-thumb,.richnote::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 30%,transparent);border-radius:20px;border:2px solid var(--surface)}
  /* Rich note editor (contenteditable) */
  .richnote-tb{display:flex;gap:4px;margin-bottom:6px}
  .richnote-tb button{width:30px;height:28px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;transition:border-color .12s,color .12s}
  .richnote-tb button:hover{border-color:var(--sage);color:var(--sage)}
  .richnote{min-height:120px;max-height:300px;overflow:auto;resize:vertical;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px 13px;line-height:1.5}
  .richnote:focus{outline:0;border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 14%,transparent)}
  .richnote:empty::before{content:attr(data-ph);color:var(--ink-3);pointer-events:none}
  .richnote ul,.richnote ol{margin:4px 0;padding-left:20px}
  .richnote li{margin:2px 0}
  .richnote p{margin:4px 0}
  /* Every native tick box gets the app's accent toggle look, everywhere. */
  input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 auto;margin:0;padding:0;border:1.8px solid var(--line);border-radius:6px;background:var(--paper);cursor:pointer;display:inline-grid;place-items:center;vertical-align:-4px;transition:border-color .13s,background .13s}
  input[type="checkbox"]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
  input[type="checkbox"]::after{content:"";width:10px;height:5.5px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .1s}
  input[type="checkbox"]:checked::after{opacity:1}
  input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .fld textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.5}
  /* Unified action bar — the reference is .tsbar (timesheets filter bar). Every
     top-of-view toolbar shares this boxed look so no page invents its own. */
  .viewbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:8px 0 18px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:58px}
  /* Friendly empty-state */
  .emptybox{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:58px 24px;border:2px dashed var(--line);border-radius:22px;color:var(--ink-3);animation:ebfloat 3.4s ease-in-out infinite}
  @keyframes ebfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .emptybox .eb-ic{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--sage) 12%,var(--surface));color:var(--sage)}
  .emptybox .eb-ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:ebwink 3.8s ease-in-out infinite;transform-origin:center}
  @keyframes ebwink{0%,90%,100%{transform:scale(1)}95%{transform:scale(1.14)}}
  @media(prefers-reduced-motion:reduce){.emptybox,.emptybox .eb-ic svg{animation:none}}
  .searchbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 20px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:58px}
  .searchbar .search.grow{flex:1 1 340px}
  .searchbar .daterange{display:flex;gap:10px}
  .searchbar .daterange label{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
  .searchbar .daterange input{font:inherit;height:44px;box-sizing:border-box;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);color-scheme:light dark}
  .searchbar .search.grow,.searchbar .btn{height:44px;box-sizing:border-box}
  .searchhint{padding:40px 24px;text-align:center;color:var(--ink-3);font-size:13.5px}
  .scount{font-size:12px;color:var(--ink-3);margin:0 2px 12px;font-weight:600}
  /* Billing */
  .lblhint{font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:10px}
  .segbar{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:3px;margin-right:auto}
  .segbar button{font:inherit;font-size:12.5px;font-weight:600;border:0;background:none;color:var(--ink-3);padding:6px 13px;border-radius:8px;cursor:pointer}
  .segbar button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}
  .segbar button .c{font-variant-numeric:tabular-nums;opacity:.6;margin-left:5px}
  .pygrid,.pogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
  /* Activity feed */
  .actfeed{max-width:760px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:8px 22px}
  .actrow{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line-2);position:relative}
  .actrow:last-child{border-bottom:0}
  .actrow:not(:last-child)::before{content:"";position:absolute;left:18px;top:54px;bottom:-1px;width:0;border-left:2px dotted color-mix(in srgb,var(--sage) 42%,var(--line));z-index:0}
  .actrow .acticon{position:relative;z-index:1}
  .actrow .acticon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--sage) 13%,var(--surface));color:var(--sage);display:grid;place-items:center}
  .actrow.ok .acticon{background:color-mix(in srgb,var(--pos) 15%,var(--surface));color:var(--pos)}
  .actrow .acticon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .actrow .acttitle{font-weight:700;font-size:14px;display:flex;align-items:center;gap:9px}
  .actrow .acttag{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
  .actrow .actdetail{font-size:13px;color:var(--ink-2);margin-top:3px}
  .actrow .actmeta{font-size:11.5px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
  /* Messages / consultant chat */
  .chatwrap{display:grid;grid-template-columns:320px 1fr;gap:18px;height:74vh}
  @media(max-width:820px){.chatwrap{grid-template-columns:1fr;height:auto}}
  .threadswrap{position:relative;display:flex;flex-direction:column;min-height:0}
  .threads{background:var(--desk,var(--surface));border:1px solid var(--line);border-radius:16px;padding:10px;flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-shadow:var(--box3d)}
  @media(max-width:820px){.threads{min-height:50vh}}
  .chatfab{position:absolute;bottom:14px;right:14px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--paper);border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);z-index:3;transition:transform .12s}
  .chatfab:hover{transform:translateY(-2px) scale(1.04)}
  .chatfab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  .chatpop{position:absolute;bottom:72px;right:14px;width:290px;max-height:360px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -18px rgba(0,0,0,.5);z-index:4;display:flex;flex-direction:column;overflow:hidden;animation:pop .16s ease-out}
  .chatpop[hidden]{display:none}
  .chatpop-head{padding:12px;border-bottom:1px solid var(--line)}
  .chatpop-head input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;padding:9px 11px;outline:none}
  .chatpop-list{overflow-y:auto;padding:6px}
  .chatpop-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer}
  .chatpop-item:hover{background:var(--surface)}
  .chatpop-item .av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--sage);overflow:hidden}
  .chatpop-item .av img{width:100%;height:100%;object-fit:cover}
  .chatpop-item .ci{min-width:0;flex:1}.chatpop-item .cn{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chatpop-item .ce{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chatpop-item .ck{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);background:color-mix(in srgb,var(--sage) 14%,transparent);padding:2px 7px;border-radius:20px;flex:0 0 auto}
  .chatpop-empty{padding:18px;text-align:center;color:var(--ink-3);font-size:13px}
  .thread{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:11px 12px;cursor:pointer;color:inherit;font:inherit;box-shadow:0 1px 2px rgba(18,22,18,.05);transition:background .12s,border-color .12s,box-shadow .12s,transform .12s}
  .thread:hover{background:var(--surface);border-color:color-mix(in srgb,var(--sage) 34%,var(--line));box-shadow:0 6px 16px -10px rgba(18,22,18,.4)}
  .thread.on{background:color-mix(in srgb,var(--sage) 12%,var(--paper));border-color:color-mix(in srgb,var(--sage) 46%,var(--line))}
  .thread .ti{min-width:0;flex:1}
  .thread .tn{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thread .tl{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thread .tt{font-size:11px;color:var(--ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
  .convo{background:var(--paper);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;height:100%;min-height:0;box-shadow:var(--box3d)}
  @media(max-width:820px){.convo{height:70vh}}
  .convo-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink-3);font-size:14px;padding:40px}
  .convo-empty svg{width:44px;height:44px;fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linejoin:round;opacity:.55}
  .convo-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
  .convo-head .cn{font-weight:750;font-size:15px}
  .convo-head .ce{font-size:12px;color:var(--ink-3)}
  /* Pattern is a real background layer (not an absolute ::before), so it stays
     STATIC on the panel while the bubbles scroll over it. A near-opaque surface
     veil on top dims the pattern to a whisper. */
  .convo-log{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px;overflow-y:auto;min-height:200px;background-color:var(--surface);background-image:linear-gradient(color-mix(in srgb,var(--surface) 93%,transparent),color-mix(in srgb,var(--surface) 93%,transparent)),url("/assets/messenger/pattern-12.svg");background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:cover,cover;position:relative}
  .convo-empty2{margin:auto;color:var(--ink-3);font-size:14px}
  .cmwrap{display:flex;flex-direction:column;max-width:100%}
  .cmwrap.me{align-items:flex-end}
  /* Consultant (them) row: bubble + the reaction circle sit side by side, circle to
     the RIGHT of the bubble; the timestamp wraps onto its own line underneath. */
  .cmwrap.them{flex-direction:row;flex-wrap:wrap;align-items:flex-end;column-gap:8px}
  .cmsg{max-width:74%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
  .cmsg .cwho{font-size:10.5px;font-weight:700;opacity:.75;margin-bottom:3px}
  /* Meta (time + read ticks) lives OUTSIDE the bubble, under it */
  .cmeta{font-size:10px;color:var(--ink-3);margin-top:3px;padding:0 6px;display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
  .cmeta .ticks{display:inline-flex;vertical-align:-2px}
  .cmeta .ticks svg{width:15px;height:12px;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .cmeta .ticks.seen svg{stroke:#3aa0ff}
  .cmsg.them{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink);box-shadow:var(--box3d)}
  .cmsg.me{background:var(--accent);color:var(--paper);border-bottom-right-radius:5px}
  /* Reactions collapse to one trigger that fans out a Teams-style bar on hover */
  .reactzone{position:relative;height:30px;margin-top:5px}
  .cmwrap.them .reactzone{align-self:flex-end;margin-top:0;margin-bottom:2px}
  .cmwrap.them .cmeta{flex-basis:100%}
  .reacttrig{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);box-shadow:var(--box3d);transition:.13s}
  .reacttrig:hover{color:var(--accent);border-color:var(--accent)}
  .reactzone.has .reacttrig{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .reacttrig svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .reactbar{position:absolute;top:0;left:0;display:flex;gap:5px;padding:5px;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--box3d);opacity:0;transform:scale(.9) translateY(3px);transform-origin:left center;pointer-events:none;transition:.14s;z-index:5}
  .reactzone:hover .reactbar,.reactzone:focus-within .reactbar{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
  .reactzone:hover .reacttrig,.reactzone:focus-within .reacttrig{opacity:0}
  .rbtn{width:31px;height:31px;border:1px solid var(--line);background:var(--paper);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);transition:.13s}
  .rbtn:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.12)}
  .rbtn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .rbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .reacted{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;font-weight:600;opacity:.9}
  .reacted svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .cmsg.me .reacted{color:var(--paper)}
  .convo-compose{display:flex;gap:10px;align-items:flex-end;padding:14px;border-top:1px solid var(--line);background:var(--surface)}
  .convo-compose textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:11px 13px;font:inherit;font-size:14px;max-height:130px;color:var(--ink)}
  /* Quote shown INSIDE a bubble that answers an earlier message */
  .cmq{display:flex;gap:8px;align-items:stretch;margin:-1px 0 7px;padding:5px 9px;border-radius:8px;background:color-mix(in srgb,var(--ink) 6%,transparent);max-width:100%}
  .cmsg.me .cmq{background:rgba(255,255,255,.16)}
  .cmq .cmq-bar{width:3px;border-radius:3px;background:var(--accent);flex:0 0 auto}
  .cmsg.me .cmq .cmq-bar{background:rgba(255,255,255,.72)}
  .cmq .cmq-tx{font-size:12px;line-height:1.35;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
  .cmsg.me .cmq .cmq-tx{color:rgba(255,255,255,.86)}
  .cmq .cmq-tx b{display:block;font-size:11px;font-weight:700;opacity:.92}
  /* Divider + quote button inside the react bar */
  .reactbar .rbsep{width:1px;align-self:stretch;margin:4px 1px;background:var(--line)}
  .rbtn.rbq svg{stroke-width:1.9}
  /* "Replying to …" preview above the compose box */
  .convo-reply{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);background:var(--surface)}
  .convo-reply[hidden]{display:none}
  .convo-reply .cr-bar{width:3px;align-self:stretch;min-height:26px;border-radius:3px;background:var(--accent);flex:0 0 auto}
  .convo-reply .cr-tx{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);line-height:1.35;overflow:hidden}
  .convo-reply .cr-tx b{display:block;color:var(--ink);font-size:12px}
  .convo-reply .cr-tx span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .convo-reply .cr-x{flex:0 0 auto;width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);border-radius:8px;cursor:pointer;display:grid;place-items:center}
  .convo-reply .cr-x:hover{color:var(--ink);background:var(--paper)}
  .convo-reply .cr-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  /* Pager (⏮ ◀ page N ▶ ⏭) */
  .pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
  .pager .pgb{width:36px;height:36px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:10px;font-size:16px;font-weight:700;display:grid;place-items:center;transition:.12s}
  .pager .pgb:hover:not(:disabled){border-color:var(--sage);color:var(--sage)}
  .pager .pgb:disabled{opacity:.35;cursor:default}
  .pager .pgm{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
  .pager .pgm b{color:var(--ink)}
  .pager .pgin{width:52px;text-align:center;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-variant-numeric:tabular-nums}
  .pager .pgin::-webkit-outer-spin-button,.pager .pgin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .posigned{display:inline-flex;align-items:center;gap:4px;color:var(--pos);font-weight:700}
  .posigned svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  /* Payer = paper dossier card (same index-card family as company Karteikarten). */
  .pycard{position:relative;overflow:hidden;box-sizing:border-box;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
    background:var(--frame,var(--paper));border:1px solid var(--line);border-radius:5px 5px 18px 18px;padding:44px 24px 20px;
    box-shadow:var(--box3d);transition:transform .16s,box-shadow .16s,border-color .16s}
  .pycard::before{content:"";position:absolute;top:16px;left:24px;right:70px;height:10px;border-radius:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 13%,transparent) 0 10px,transparent 10px 20px)}
  .pycard:hover{transform:translateY(-3px);box-shadow:var(--box3d),0 22px 46px -26px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--sage) 38%,var(--line))}
  .pycard .py-tab{position:absolute;top:-1px;right:-1px;width:46px;height:46px;background:var(--sage);color:#fff;display:grid;place-items:center;border-radius:0 0 0 14px}
  .pycard .py-tab svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .pycard .py-head{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--line)}
  .pycard .py-mono{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--sage) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 24%,var(--line));color:var(--sage);font-weight:800;font-size:15px}
  .pycard .py-id{min-width:0;flex:1}
  .pycard .py-nm{font-size:18px;font-weight:760;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pycard .py-no{font-family:ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
  .pycard .py-rows{display:flex;flex-direction:column;gap:2px}
  .pycard .py-row{display:flex;gap:14px;align-items:baseline;min-height:26px;padding-top:6px}
  .pycard .py-l{flex:0 0 74px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
  .pycard .py-v{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pycard .py-foot{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
  .pycard .py-stamp{position:absolute;right:16px;bottom:12px;color:var(--sage);opacity:.09;pointer-events:none}
  .pycard .py-stamp svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .pychip{font-size:11px;font-weight:650;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
  .pocard{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px 24px;position:relative}
  .pocard.closed{opacity:.66}
  .pocard .potop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .pocard .ponum{font-family:var(--mono,ui-monospace,monospace);font-size:17px;font-weight:800;letter-spacing:.02em}
  .pocard .popay{font-size:12.5px;color:var(--ink-3);margin-top:3px}
  .postat{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
  .postat.open{color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,transparent);border:1px solid color-mix(in srgb,var(--sage) 28%,transparent)}
  .postat.closed{color:var(--ink-3);background:var(--surface);border:1px solid var(--line)}
  .pobar{height:12px;border-radius:7px;background:var(--surface);overflow:hidden;margin:18px 0 9px}
  .pobar>i{display:block;height:100%;border-radius:7px;background:var(--sage);transition:width .5s cubic-bezier(.2,.7,.2,1)}
  .pobar.full>i{background:var(--danger)}
  .pofoot{display:flex;justify-content:space-between;font-size:12.5px;font-variant-numeric:tabular-nums}
  .pofoot .rem{font-weight:750}.pocard.full .pofoot .rem{color:var(--danger)}
  .pometa{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:11.5px;color:var(--ink-3)}
  .invtable td .il{display:flex;flex-direction:column}
  .pill.draft{background:color-mix(in srgb,var(--ink-3) 14%,transparent);color:var(--ink-2)}
  .pill.sent{background:color-mix(in srgb,#3b82f6 15%,transparent);color:#2563eb}
  .pill.paid{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos)}
  .pill.sent{background:color-mix(in srgb,var(--sage) 20%,transparent);color:var(--sage)}
  /* Bills-to-pay card — avatar, status stripe, hover lift */
  .apcard{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px 21px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:transform .14s,box-shadow .14s,border-color .14s}
  .apcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sage)}
  .apcard.st-scheduled::before{background:var(--warn)}
  .apcard.st-sent::before{background:var(--sage)}
  .apcard.st-paid::before{background:var(--pos)}
  .apcard.st-open::before{background:var(--ink-3)}
  .apcard.st-overdue::before,.apcard.st-rejected::before{background:var(--danger)}
  .apcard:hover{transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(0,0,0,.4);border-color:color-mix(in srgb,var(--sage) 42%,var(--line))}
  .apc-head{display:flex;align-items:center;gap:12px}
  .apc-head .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--sage);overflow:hidden}
  .apc-head .av img{width:100%;height:100%;object-fit:cover}
  .apc-id{min-width:0;flex:1}
  .apc-title{font-size:15px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .apc-sub{font-size:12.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .apc-amt{font-size:23px;font-weight:800;margin:13px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .apc-nofile{color:var(--ink-3);font-size:12px}
  .apc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding-top:12px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
  .apc-foot .apc-payby b{color:var(--ink)}
  /* Consultant sign-in emails (multi-email identity) */
  .cd-logins{margin-top:16px}
  .cd-loginlbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:8px}
  .loginchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .loginchips:empty{display:none}
  .lchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px 6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
  .lchip.primary{border-color:color-mix(in srgb,var(--sage) 45%,var(--line));background:color-mix(in srgb,var(--sage) 10%,var(--surface))}
  .lchip .lc-tag{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
  .lchip .lc-x{cursor:pointer;color:var(--ink-3);display:grid;place-items:center;width:16px;height:16px;border-radius:50%}
  .lchip .lc-x:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
  .lchip .lc-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  .loginadd{display:flex;gap:8px}
  .loginadd input{flex:1;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
  .loginadd .btn{flex:0 0 auto}
  .revbar{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px}
  .revbar .rdot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
  .revbar.ok .rdot{background:var(--pos)}
  .revbar .rlabel{color:var(--ink-2);font-weight:600}
  .revbar .btn.tiny{padding:6px 12px;font-size:12px}
  .pill.void{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
  .pill.overdue{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
  .modal.wide{max-width:820px;width:94vw}
  .btn.sm{padding:6px 11px;font-size:12.5px}
  .pohint{margin-top:10px;font-size:12px;font-weight:600;color:var(--sage);background:color-mix(in srgb,var(--sage) 8%,transparent);border:1px solid color-mix(in srgb,var(--sage) 20%,transparent);border-radius:10px;padding:8px 12px}
  .pohint.over{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent);border-color:color-mix(in srgb,var(--danger) 24%,transparent)}
  .linehead{display:flex;align-items:center;gap:10px;margin:20px 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .linehead span{margin-right:auto}
  .iltable{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .ilrow{display:grid;grid-template-columns:1fr 70px 68px 100px 100px 32px;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line-2)}
  .ilrow:last-child{border-bottom:0}
  .ilrow.ilhead{background:var(--surface);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .ilrow.ilhead .n{text-align:right}
  .ilrow input{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:100%}
  .ilrow input.n{text-align:right}
  .ilrow .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;font-size:12.5px}
  .ilrow .del{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:4px;border-radius:6px}
  .ilrow .del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
  .ilrow .del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
  .invtotals{margin-top:16px;margin-left:auto;width:280px;display:flex;flex-direction:column;gap:7px}
  .invtotals .r{display:flex;justify-content:space-between;font-size:13px}
  .invtotals .r span{color:var(--ink-2)}.invtotals .r b{font-variant-numeric:tabular-nums}
  .invtotals .grand{margin-top:5px;padding-top:11px;border-top:1.5px solid var(--ink);font-size:16px;font-weight:800}
  .invtotals .grand span{color:var(--ink);font-weight:800}
  .billcard-ap .apfiles{display:flex;flex-direction:column;gap:6px;margin:12px 0}
  .billcard-ap .file{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);background:var(--surface);border-radius:9px;padding:7px 10px;cursor:pointer}
  .billcard-ap .file:hover{color:var(--sage)}
  .billcard-ap .file svg{width:14px;height:14px;fill:none;stroke:var(--danger);stroke-width:1.7;flex:0 0 auto}
  .pill.rejected{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}
  .apreject{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 22%,var(--line));font-size:12.5px;color:var(--ink-2);line-height:1.5}
  .apreject svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--danger);stroke-width:2.4;stroke-linecap:round}
  .billcard-ap .file .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .apoverdue{color:var(--danger);font-weight:700}
  /* Paper-as-UI editor */
  /* z-index:90 keeps the full-screen editor above the page/sidebar (45) but BELOW
     every pop-up it spawns — modals (120), the PDF preview (120), geo box (200). */
  .overlay.editor{z-index:90;place-items:stretch;padding:0;inset:0 0 0 250px;background:color-mix(in srgb,var(--surface) 52%,transparent);backdrop-filter:blur(11px) saturate(1.06);-webkit-backdrop-filter:blur(11px) saturate(1.06)}
  @media(max-width:900px){.overlay.editor{inset:0}}
  /* Pin to the fixed overlay so the wrap is ALWAYS exactly viewport-height — a
     grid/%-height chain lets the track grow with the paper and kills the scroll. */
  .ed-wrap{position:absolute;inset:0;display:flex;flex-direction:column;background:transparent;overflow:hidden}
  .ed-top{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto}
  .ed-top .ed-t{font-size:15px;font-weight:750}
  .ie-saved{font-size:12px;font-weight:600;color:var(--pos);opacity:.9}
  .ed-body{flex:1;display:flex;min-height:0;overflow:hidden}
  .ed-scroll{flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:26px 30px 56px;text-align:center;background:transparent}
  .ed-rail{width:340px;flex:0 0 auto;overflow:auto;background:var(--paper);border-left:1px solid var(--line);padding:20px}
  @media(max-width:900px){.ed-body{flex-direction:column}.ed-rail{width:auto;border-left:0;border-top:1px solid var(--line)}}
  .rail-sec{padding:14px 0;border-bottom:1px solid var(--line-2)}
  .rail-sec:last-child{border-bottom:0}
  .rail-h{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
  .ed-rail label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
  .ed-rail select,.ed-rail input,.ed-rail textarea{width:100%;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
  .rr2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .methods{display:flex;flex-wrap:wrap;gap:8px}
  .methods .m{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;user-select:none;transition:.12s}
  .methods .m input{display:none}
  .methods .m.on{background:color-mix(in srgb,var(--sage) 14%,transparent);border-color:var(--sage);color:var(--sage)}
  /* The paper */
  /* Global lounge form fields — the paper look, for spacious input masks */
  .pj-body{overflow:auto;padding:34px 34px 60px;display:flex;justify-content:center;align-items:flex-start}
  .pj-form{width:100%;max-width:860px}
  .lf-sec{background:var(--frame,var(--paper));border:1px solid var(--line);border-radius:18px;padding:24px 28px;margin-bottom:20px;box-shadow:var(--box3d);transition:opacity .22s,filter .22s}
  .lf-sec.locked{opacity:.4;filter:grayscale(.4);pointer-events:none}
  .lf-sectitle{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:750;color:var(--ink);margin-bottom:20px}
  .lf-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sage);color:#fff;font-size:12px;font-weight:800;flex:0 0 auto}
  .lf-lock{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-3)}
  .lf-row{display:grid;gap:18px;margin-bottom:18px}.lf-row:last-child{margin-bottom:0}
  .lf{display:flex;flex-direction:column;gap:8px;min-width:0}
  .lf-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .lf-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
  .lf input,.lf select{width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;padding:13px 15px;border:1.4px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--ink);transition:border-color .12s,background .12s}
  .lf input:hover,.lf select:hover{border-color:color-mix(in srgb,var(--sage) 35%,var(--line))}
  .lf input:focus,.lf select:focus{outline:none;border-style:solid;border-color:var(--sage);background:var(--paper)}
  .lf input::placeholder{color:var(--ink-3);opacity:.55}
  .lf-openbox{border:1.4px dashed var(--line);border-radius:14px;padding:16px 20px 18px;margin-top:14px}
  .lf.dim{opacity:.4;filter:grayscale(.4);pointer-events:none}
  .lf-opening{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .lf-opening svg{width:14px;height:14px;fill:none;stroke:var(--sage);stroke-width:1.7}
  .lf-preview{margin-top:14px;font-size:13px;color:var(--ink-2)}.lf-preview b{color:var(--sage);font-weight:750}
  .pj-hint{font-size:12.5px;color:var(--ink-3);margin:6px 6px 10px}
  .paper{width:100%;max-width:840px;margin:0 auto;text-align:left;background:#fff;color:#16191b;border-radius:8px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5);padding:0 56px 40px;display:flex;flex-direction:column}
  /* Invoice paper mimics a real page: at least viewport-tall, with a grow spacer
     that pushes the totals / due block to the bottom — exactly like the render. */
  #inv_paper{min-height:calc(100vh - 116px)}
  .pp-push{flex:1 1 auto;min-height:22px}
  /* Agreement editor: rich text, headline dark / body grey / one font */
  #ag_paper{min-height:calc(100vh - 116px)}
  .ag-title{width:100%;border:0;outline:none;background:transparent;font:inherit;font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:2px 0 14px;padding:6px 0;border-bottom:1px solid transparent}
  .ag-title:focus{border-bottom-color:var(--line)}
  /* The formatting toolbar is its own vertical bar to the LEFT of the paper —
     clearly a tool, not part of the document. */
  /* Word-style floating quick-bar — appears above a text selection in the editor */
  .ag-quickbar{position:fixed;z-index:130;display:flex;align-items:center;gap:2px;background:#1c1f22;border:1px solid rgba(255,255,255,.10);border-radius:11px;padding:5px;box-shadow:0 14px 32px -10px rgba(0,0,0,.6);animation:pop .12s ease-out}
  .ag-quickbar[hidden]{display:none}
  .ag-quickbar button{min-width:30px;height:30px;padding:0 7px;border:0;background:transparent;color:#dfe3e6;border-radius:7px;cursor:pointer;font-size:14px;font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.1s}
  .ag-quickbar button:hover{background:rgba(255,255,255,.13);color:#fff}
  .ag-quickbar button.agh{font-weight:800}
  .ag-quickbar button.agh sup{font-size:8px;top:-.5em}
  .ag-quickbar button[data-cmd=italic]{font-style:italic;font-family:Georgia,serif}
  .ag-quickbar button[data-cmd=underline]{text-decoration:underline}
  .ag-quickbar button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ag-quickbar .qb-sep{width:1px;height:18px;background:rgba(255,255,255,.15);margin:0 3px}
  /* Same actions in a persistent top toolbar (in addition to the on-selection bar) */
  .ag-toptools{display:flex;align-items:center;gap:3px;padding:7px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap;flex:0 0 auto}
  .ag-toptools button{min-width:32px;height:32px;padding:0 7px;border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;line-height:1;transition:.1s}
  .ag-toptools button:hover{border-color:var(--line);color:var(--sage);background:color-mix(in srgb,var(--sage) 8%,transparent)}
  .ag-toptools button.agh{font-weight:800}.ag-toptools button.agh sup{font-size:8px;top:-.5em}
  .ag-toptools button[data-cmd=italic]{font-style:italic;font-family:Georgia,serif}
  .ag-toptools button[data-cmd=underline]{text-decoration:underline}
  .ag-toptools button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ag-toptools .qb-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
  .ag-stage{display:flex;align-items:flex-start;justify-content:center;gap:9px}
  /* Toolbar hugs the document's left edge and stays vertically centered on screen. */
  .ag-toolbar{position:sticky;top:50%;transform:translateY(-50%);align-self:flex-start;flex:0 0 auto;z-index:4;display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:7px;box-shadow:var(--box3d)}
  .ag-toolbar button{width:38px;height:38px;padding:0;border:1px solid transparent;background:transparent;border-radius:10px;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;line-height:1;transition:.12s}
  .ag-toolbar button:hover{border-color:var(--line);color:var(--sage);background:color-mix(in srgb,var(--sage) 9%,transparent)}
  .ag-toolbar button:active{transform:scale(.92)}
  .ag-toolbar button.agh{font-weight:800;letter-spacing:-.01em}
  .ag-toolbar button.agh sup{font-size:9px;font-weight:700;margin-left:.5px;top:-.55em}
  .ag-toolbar button[data-cmd=bold]{font-weight:800}
  .ag-toolbar button[data-cmd=italic]{font-style:italic;font-family:Georgia,serif}
  .ag-toolbar button[data-cmd=underline]{text-decoration:underline}
  .ag-toolbar button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ag-toolbar .ag-sep{width:22px;height:1px;background:var(--line);margin:3px auto;flex:0 0 auto}
  @media(max-width:900px){.ag-stage{flex-direction:column;align-items:center}.ag-toolbar{flex-direction:row;flex-wrap:wrap;position:static;justify-content:center}.ag-toolbar .ag-sep{width:1px;height:20px;margin:0 4px}}
  /* Soft selection highlight — the default near-black reads as "everything went black". */
  #agreementEditor ::selection{background:color-mix(in srgb,var(--sage) 32%,#fff);color:#16191b}
  /* Faint page-break guides so you can see roughly where the next PDF page starts. */
  .ag-body{outline:none;min-height:340px;color:#454b48;font-size:14px;line-height:1.65;padding-bottom:20px;counter-reset:agh2;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 1046px,color-mix(in srgb,var(--sage) 34%,transparent) 1046px,color-mix(in srgb,var(--sage) 34%,transparent) 1048px);background-position:0 0}
  .ag-body:empty::before{content:"Start writing — use the toolbar for headlines, lists, bold & italic…";color:#b3b8b5}
  .ag-body h1{color:#16191b;font-weight:800;letter-spacing:-.01em;font-size:23px;margin:18px 0 8px;line-height:1.2}
  .ag-body h2{color:#16191b;font-weight:800;letter-spacing:-.01em;font-size:18px;margin:18px 0 8px;line-height:1.25;counter-increment:agh2;counter-reset:agh3}
  .ag-body h2::before{content:counter(agh2) ".  ";color:var(--sage)}
  .ag-body h3{color:#16191b;font-weight:750;font-size:14.5px;margin:14px 0 6px;line-height:1.3;counter-increment:agh3}
  .ag-body h3::before{content:counter(agh2) "." counter(agh3) "  ";color:var(--sage);font-weight:700}
  .ag-body p{margin:0 0 10px}
  .ag-body ul,.ag-body ol{margin:6px 0 12px 22px}
  .ag-body li{margin:3px 0}
  .ag-body b,.ag-body strong{color:#16191b;font-weight:750}
  .ag-body table{width:100%;border-collapse:collapse;margin:6px 0 12px}
  .ag-body td{width:50%;vertical-align:top;padding:0 14px 0 0}
  .ag-body td+td{padding:0 0 0 14px;border-left:1px solid #e6e9e7}
  .ag-body[contenteditable="false"]{cursor:default}
  .ag-sealbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);padding:5px 11px;border-radius:20px}
  .ag-sealbadge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
  .ag-railnote{margin-top:16px;font-size:12px;color:var(--ink-3);line-height:1.5;padding-top:14px;border-top:1px solid var(--line)}
  /* Counterparty picker button */
  .ag-partybtn{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;cursor:pointer;transition:.13s}
  .ag-partybtn:hover{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 6%,var(--surface))}
  .ag-partybtn .ap-ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--sage)}
  .ag-partybtn .ap-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ag-partybtn .ap-txt{flex:1;min-width:0;display:flex;flex-direction:column}
  .ag-partybtn .ap-name{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ag-partybtn .ap-sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .ag-partybtn .ap-edit{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ag-partybtn:hover .ap-edit{stroke:var(--sage)}
  .pm-hero{display:flex;align-items:center;gap:14px}
  .pm-hero .pm-ic{width:48px;height:48px;flex:0 0 auto;border-radius:13px;background:#0d0d0d;display:grid;place-items:center}
  .pm-hero .pm-ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .permrow{display:flex;align-items:flex-start;gap:11px;margin:16px 0 4px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
  .permrow input{width:18px;height:18px;margin-top:1px;flex:0 0 auto}
  .permrow span{display:flex;flex-direction:column;gap:2px}
  .permrow b{font-size:13.5px;font-weight:700}
  .permrow small{font-size:12px;color:var(--ink-3)}
  #agd_tplwrap{margin-bottom:22px}
  .tpl-lbl{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
  .tpl-strip{display:flex;gap:12px;flex-wrap:wrap}
  .tpl-chip{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer;box-shadow:var(--box3d);transition:transform .14s,border-color .14s}
  .tpl-chip:hover{border-color:color-mix(in srgb,var(--sage) 40%,var(--line));transform:translateY(-2px)}
  .tpl-chip .tc-ic{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--sage) 14%,var(--surface));color:var(--sage);display:grid;place-items:center;flex:0 0 auto}
  .tpl-chip .tc-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
  .tpl-chip .tc-nm{font-size:13.5px;font-weight:650}
  .tpl-chip .tc-edit{opacity:.45;font-size:12px;color:var(--ink-3);margin-left:2px}
  .tpl-chip:hover .tc-edit{opacity:1}
  .id-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin-top:12px;background:var(--surface)}
  .id-box-h{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
  .cp-row{display:flex;gap:8px;align-items:center}
  .cp-row select{flex:1;min-width:0}
  .cp-new{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:10px;cursor:pointer;color:var(--sage);display:grid;place-items:center;transition:.12s}
  .cp-new:hover{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 9%,var(--surface))}
  .cp-new svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* Agreements grid — mini DIN-A4 cards */
  .agdgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
  .agdcard{position:relative;aspect-ratio:1/1.34;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--box3d);padding:20px 18px 15px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s}
  .agdcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sage)}
  .agdcard.sealed::after{background:var(--gold)}
  .agdcard:hover{transform:translateY(-3px);box-shadow:0 22px 46px -26px rgba(18,22,18,.55);border-color:color-mix(in srgb,var(--sage) 38%,var(--line))}
  .agd-filterbar{display:flex;gap:6px;margin-right:auto;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:3px}
  .agd-filterbar:empty{display:none}
  .agd-filterbar .agf{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:6px 12px;border-radius:8px;cursor:pointer}
  .agd-filterbar .agf.on{background:var(--paper);color:var(--ink);box-shadow:var(--box3d)}
  .agd-filterbar .agf-n{font-size:10px;font-weight:800;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-3);padding:1px 6px;border-radius:20px}
  .agd-filterbar .agf.on .agf-n{background:color-mix(in srgb,var(--sage) 18%,transparent);color:var(--sage)}
  .agdcard .ad-dl{position:absolute;top:14px;left:14px;width:30px;height:30px;border:1px solid var(--line);background:var(--paper);border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);opacity:0;transition:opacity .14s,color .12s,border-color .12s;z-index:2}
  .agdcard:hover .ad-dl{opacity:1}
  .agdcard .ad-dl:hover{color:var(--sage);border-color:var(--sage)}
  .agdcard .ad-dl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .agdcard .ad-seal{position:absolute;top:15px;right:14px;width:34px;height:34px;color:var(--gold)}
  .agdcard .ad-seal svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .agdcard .ad-kicker{font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
  .agdcard .ad-title{font-size:16px;font-weight:800;margin-top:4px;max-width:78%;line-height:1.2;word-break:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .agdcard .ad-party{font-size:12px;color:var(--ink-2);margin-top:8px;font-weight:600}
  .agdcard .ad-foot{margin-top:auto;padding-top:11px;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .agdcard .ad-status{color:var(--ink-3)}
  .agdcard.sealed .ad-status{color:var(--gold)}
  .agdcard .ad-open{color:var(--ink-3);letter-spacing:0;text-transform:none;font-weight:700}
  .agdcard:hover .ad-open{color:var(--sage)}
  .rail-sec .fxnote{font-size:11.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}.rail-sec .fxnote b{color:var(--ink-2)}
  /* Paper footer — matches the final PDF (mono procline + sealed box). In the
     editor it simply follows the content (not glued to a full-height page). */
  .pp-foot{margin-top:34px}
  .pp-lock{width:11px;height:11px;fill:none;stroke:#16191b;stroke-width:2;vertical-align:-1px;margin-right:2px}
  .pp-procline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:9px;color:#8a918d;padding:0 2px 8px}
  .pp-procline b{color:#454b48;font-weight:600}
  .pp-sealbox{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f2f4f2;border:1px solid #e6e9e7;border-radius:8px;padding:9px 14px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:9px;color:#8a918d}
  .pp-sealbox .pp-seal-k{color:#16191b;font-weight:750;letter-spacing:.12em}
  .pp-sealbox .pp-seal-h{color:#16191b;font-weight:700;letter-spacing:.06em;font-size:10px}
  .paper .n{text-align:right}
  /* Letterhead — the branded black header on every MANSKORA paper */
  .pp-lh{position:relative;display:flex;align-items:center;justify-content:center;margin:0 -56px 28px;padding:34px 56px;background:#0d0d0d}
  .pp-word{height:48px;width:auto;max-width:66%;display:block}
  .pp-inv{position:absolute;top:26px;right:56px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
  .pp-inv-k{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#93a79f}
  .pp-inv-n{font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
  .pp-brief{display:flex;gap:15px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid #e6e9e7;margin-bottom:16px}
  .pp-ficon{width:78px;height:78px;flex:0 0 auto;background:#0d0d0d;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-top:17px}
  .pp-ficon img{width:42px;height:auto;display:block}
  .pp-fbody{flex:1;min-width:0}
  .pp-contact{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;gap:12px;align-self:center;margin-top:20px}
  .pp-contact .cline{display:flex;align-items:center;gap:11px;font-size:12.5px;color:#454b48;white-space:nowrap}
  .pp-contact .cline svg{width:17px;height:17px;fill:none;stroke:#8a918d;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .pp-details{display:flex;gap:44px;padding:16px 0;border-bottom:1px solid #e6e9e7;margin-bottom:20px}
  .pp-recip{flex:0 0 44%;min-width:0}
  .pp-metachips{flex:1;display:flex;flex-wrap:wrap;gap:16px 34px;align-content:flex-start}
  .pp-metachips>div{font-size:13.5px;font-weight:650;color:#16191b}
  .pp-metachips span{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a918d;margin-bottom:3px}
  .pp-edit{font-size:12.5px;color:#16191b;line-height:1.6;white-space:pre-wrap;min-height:22px;border-radius:8px;padding:6px 9px;margin:-6px -9px;outline:none;transition:background .12s,box-shadow .12s}
  .pp-edit:hover{background:#f6f7f6}
  .pp-edit:focus{background:#fff;box-shadow:0 0 0 2px var(--sage)}
  .pp-edit:empty::before{content:attr(data-empty);color:#b7bdb4}
  .pp-addrow{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:8px;padding:11px;border:1.4px dashed #d7dbd6;border-radius:10px;background:none;color:#5f716c;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;transition:.12s}
  .pp-addrow:hover{border-color:var(--sage);background:#f6f8f7}
  .pp-addrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
  .pp-addwrap{display:flex;gap:8px}
  .pp-addwrap .pp-addrow{margin-top:8px}
  .pp-addrow.svc{border-style:solid;border-color:var(--line);color:var(--sage)}
  .pp-addrow.svc:hover{border-color:var(--sage)}
  /* reusable-service picker popover */
  .svcpop{position:fixed;z-index:1400;width:330px;max-height:min(70vh,460px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow,0 18px 50px -18px rgba(0,0,0,.4));padding:8px}
  .svc-hd{font-size:12.5px;font-weight:700;color:var(--ink);padding:6px 8px 8px}
  .svc-sec{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:10px 8px 5px;border-top:1px solid var(--line-2);margin-top:6px}
  .svc-opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;border-radius:10px;cursor:pointer;transition:.12s}
  .svc-opt:hover{background:var(--surface)}
  .svc-opt.rate{background:color-mix(in srgb,var(--sage) 9%,transparent)}
  .svc-ic{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--surface);color:var(--sage)}
  .svc-opt.rate .svc-ic{background:color-mix(in srgb,var(--sage) 18%,transparent)}
  .svc-ic.plus{font-size:18px;font-weight:400;color:var(--ink-3)}
  .svc-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .svc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .svc-b b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .svc-sub{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .svc-act{display:flex;gap:3px;flex:0 0 auto;opacity:0;transition:.12s}
  .svc-opt:hover .svc-act{opacity:1}
  .svc-act button{width:27px;height:27px;border:1px solid var(--line);background:var(--paper);color:var(--ink-3);border-radius:8px;cursor:pointer;display:grid;place-items:center}
  .svc-act button:hover{border-color:var(--sage);color:var(--sage)}
  .svc-act button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .svc-empty{padding:16px 10px;text-align:center;color:var(--ink-3);font-size:12.5px}
  .svc-edit{padding:4px 8px 8px;display:flex;flex-direction:column;gap:10px}
  .svc-edit label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:650;color:var(--ink-2)}
  .svc-edit input,.svc-edit textarea{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);resize:vertical}
  .svc-row{display:flex;gap:8px}
  .svc-row label{flex:1}
  .svc-ebtn{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
  .svc-ebtn button{padding:8px 15px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;border:1px solid var(--line)}
  .svc-ebtn .ghost{background:var(--paper);color:var(--ink-2)}
  .svc-ebtn .primary{background:var(--sage);color:#fff;border-color:var(--sage)}
  .pp-h{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a918d;margin-bottom:8px}
  /* Vintage log-card — timesheet documents, styled after a rubber-stamp log */
  .reccons{display:inline-block;margin-left:8px;font-size:11px;font-weight:650;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1px 9px;vertical-align:1px}
  .rectags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
  .rectag{font-size:10.5px;font-weight:650;color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,transparent);padding:2px 8px;border-radius:999px}
  /* Timesheets top bar — toggle left (stable), combobox flexes, actions right */
  /* One cohesive control panel — balanced heights so nothing dwarfs the rest */
  .tsbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 18px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:58px}
  .tsbar .compseg{flex:0 0 auto}
  .tsseg{box-shadow:var(--box3d);background:var(--paper);height:44px;box-sizing:border-box}
  .tsseg button{flex:0 0 auto;min-width:auto;font-size:13px;padding:8px 15px;gap:7px;white-space:nowrap}
  .tsseg button svg{width:15px;height:15px}
  .tsbar .compseg button{white-space:nowrap}
  /* Every control in the bar matches the toggle's height for a clean row */
  .tsbar .tscombo .tsc{min-height:44px;box-sizing:border-box}
  .tsbar .mp-btn{height:44px;box-sizing:border-box}
  .tsactions{display:flex;align-items:center;gap:8px;flex:0 0 auto;justify-content:flex-end;margin-left:auto}
  .tsactions .btn{flex:0 0 auto;white-space:nowrap;height:44px;box-sizing:border-box}
  .tsactions .btn.io{padding:0;width:44px;height:44px}
  .tsactions .btn.io .bi{margin:0}
  .tsactions .mp-btn{background:var(--paper)}
  /* Reset = a quiet icon action like Import CSV, turning red only on hover */
  .btn.tsdanger{color:var(--ink-2)}
  .btn.tsdanger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 42%,var(--line));background:color-mix(in srgb,var(--danger) 8%,transparent)}
  /* Danger confirm modal */
  #purgeModal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(16,18,20,.5);backdrop-filter:blur(3px)}
  #purgeModal[hidden]{display:none}
  #purgeModal .pm-card{width:min(460px,92vw);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
  #purgeModal .pm-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);margin-bottom:14px}
  #purgeModal .pm-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
  #purgeModal h3{font-size:19px;font-weight:750;margin:0 0 8px}
  #purgeModal p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0 0 6px}
  #purgeModal .pm-scope{font-size:12.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:12px 0 14px}
  #purgeModal .pm-scope b{color:var(--ink)}
  #purgeModal label{font-size:11px;font-weight:650;color:var(--ink-2);display:flex;flex-direction:column;gap:5px}
  #purgeModal input{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px 12px;font:inherit;font-size:14px;letter-spacing:.12em;color:var(--ink)}
  #purgeModal .pm-act{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
  #purgeModal .btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
  #purgeModal .btn.danger:disabled{opacity:.45;cursor:not-allowed}
  /* Access & roles panel — boxed, iconed, colour-coded roles */
  #accessModal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(16,18,20,.55);backdrop-filter:blur(4px)}
  #accessModal[hidden]{display:none}
  .acc-card{width:min(900px,95vw);max-height:92vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 44px 100px -34px rgba(0,0,0,.66)}
  .acc-top{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 18px;border-bottom:1px solid var(--line-2)}
  .acc-badge{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--sage) 14%,var(--surface));color:var(--sage);border:1px solid color-mix(in srgb,var(--sage) 26%,var(--line))}
  .acc-badge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .acc-top-t{flex:1;min-width:0}
  .acc-top-t h3{margin:0;font-size:19px;font-weight:760;letter-spacing:-.01em}
  .acc-top-t p{margin:3px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
  .acc-x{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:10px;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:.12s}
  .acc-x:hover{color:var(--ink);border-color:var(--ink-3)}
  .acc-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  /* split: groups left (tinted), members right */
  .acc-split{display:flex;border-bottom:1px solid var(--line-2)}
  .acc-groups{flex:0 0 236px;border-right:1px solid var(--line-2);padding:16px;display:flex;flex-direction:column;gap:9px}
  .acc-grp{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px solid var(--line);border-radius:13px;background:var(--surface);cursor:pointer;transition:.12s;text-align:left;width:100%}
  .acc-grp:hover{border-color:var(--ink-3)}
  .acc-grp-ic{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center}
  .acc-grp-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .acc-grp-b{flex:1;min-width:0}
  .acc-grp-nm{font-size:13.5px;font-weight:700;line-height:1.2}
  .acc-grp-sub{font-size:10px;color:var(--ink-3)}
  .acc-grp-cnt{font-size:13px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .acc-grp.taimaa .acc-grp-ic{background:color-mix(in srgb,var(--sage) 16%,transparent);color:var(--sage)} .acc-grp.taimaa.on{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 8%,var(--surface))}
  .acc-grp.tally .acc-grp-ic{background:color-mix(in srgb,var(--gold,#c9a24a) 20%,transparent);color:var(--gold,#c9a24a)} .acc-grp.tally.on{border-color:var(--gold,#c9a24a);background:color-mix(in srgb,var(--gold,#c9a24a) 9%,var(--surface))}
  .acc-grp.admin .acc-grp-ic{background:color-mix(in srgb,#7c6bd0 20%,transparent);color:#7c6bd0} .acc-grp.admin.on{border-color:#7c6bd0;background:color-mix(in srgb,#7c6bd0 9%,var(--surface))}
  .acc-grp.all .acc-grp-ic{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)} .acc-grp.all.on{border-color:var(--ink-3)}
  .acc-members{flex:1;min-width:0;padding:16px;max-height:58vh;overflow:auto;display:flex;flex-direction:column}
  .acc-row{display:flex;align-items:center;gap:13px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:9px}
  .acc-roles{flex-wrap:nowrap}
  .acc-av{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;background:var(--sage)}
  .acc-b{flex:1;min-width:0}
  .acc-nm{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acc-em{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acc-roles{display:flex;gap:6px;flex:0 0 auto}
  .acc-rl{font-size:11.5px;font-weight:650;padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-3);cursor:pointer;transition:.12s}
  .acc-rl:hover{border-color:var(--ink-3);color:var(--ink)}
  .acc-rl[data-role="Taimaa"].on,.acc-rl[data-nr="Taimaa"].on{background:var(--sage);border-color:var(--sage);color:#fff}
  .acc-rl[data-role="Tally"].on,.acc-rl[data-nr="Tally"].on{background:var(--gold,#c9a24a);border-color:var(--gold,#c9a24a);color:#fff}
  .acc-rl[data-role="Admin"].on,.acc-rl[data-nr="Admin"].on{background:#7c6bd0;border-color:#7c6bd0;color:#fff}
  .acc-empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}
  .acc-add{margin:6px 16px 16px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  .acc-add-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:12px}
  .acc-add-h svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .acc-add-row{display:flex;gap:8px;margin-bottom:10px}
  .acc-inp{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;background:var(--paper);padding:0 12px}
  .acc-inp:focus-within{border-color:var(--sage)}
  .acc-inp svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .acc-inp input{flex:1;min-width:0;border:0;background:transparent;padding:10px 0;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
  .acc-add-row2{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .acc-invite{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer;position:relative}
  .acc-invite input{position:absolute;opacity:0;width:0;height:0}
  .acc-tick{width:18px;height:18px;flex:0 0 auto;border-radius:6px;border:1.5px solid var(--line);background:var(--paper);display:inline-grid;place-items:center;transition:.12s}
  .acc-invite input:checked+.acc-tick{background:var(--sage);border-color:var(--sage)}
  .acc-invite input:checked+.acc-tick::after{content:"";width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg) translateY(-1px)}
  .acc-add-row2 .btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
  .tscombo{flex:1 1 280px;min-width:200px;position:relative}
  /* Zen month picker */
  /* The tab bar holds the month picker; its dropdown must fall OVER the sub-bar
     and the table below, so the whole tab bar sits in a stacking context above
     them. Without this the month pop opened behind the statement. */
  .tsbar-tabs{position:relative;z-index:40}
  .monthpick{position:relative;flex:0 0 auto}
  .mp-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:11px;cursor:pointer;box-shadow:var(--box3d);transition:.13s;white-space:nowrap}
  .mp-btn:hover{border-color:var(--sage)}
  /* Fixed-width label so the button doesn't jump as month names change length */
  .mp-btn>span{display:inline-block;min-width:112px;text-align:left}
  .mp-cal{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8}
  .mp-chev{width:14px;height:14px;fill:none;stroke:var(--ink-3);stroke-width:2}
  .mp-pop{position:absolute;top:calc(100% + 7px);right:0;z-index:160;width:248px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--box3d),0 20px 44px -20px rgba(0,0,0,.4);padding:12px}
  .mp-pop.hidden{display:none}
  .mp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .mp-yr{font-size:15px;font-weight:750;color:var(--ink)}
  .mp-nav{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:9px;cursor:pointer;display:grid;place-items:center}
  .mp-nav:hover{border-color:var(--sage);color:var(--sage)}
  .mp-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .mp-m{border:1px solid transparent;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:650;padding:9px 0;border-radius:9px;cursor:pointer;transition:.12s}
  .mp-m:hover{border-color:var(--sage);color:var(--sage)}
  .mp-m.sel{background:var(--sage);color:#fff;border-color:var(--sage)}
  .mp-all{width:100%;margin-top:8px;border:1px dashed var(--line);background:none;color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;padding:8px;border-radius:9px;cursor:pointer}
  .mp-all:hover,.mp-all.sel{border-color:var(--sage);color:var(--sage)}
  .tsc{position:relative;display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--box3d);transition:.13s}
  .tsc.open{border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 14%,transparent),var(--box3d)}
  .tsc-ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.9;stroke-linecap:round}
  .tsc-chips{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .tsc input{border:0;background:transparent;box-shadow:none;flex:1;min-width:90px;padding:2px 0;font-size:14px}
  .tsc input:focus{outline:0;box-shadow:none}
  .tsc .cchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:3px 4px 3px 8px;border-radius:999px;background:color-mix(in srgb,var(--sage) 13%,transparent);color:var(--sage);cursor:pointer}
  .tsc .cchip.asg{background:color-mix(in srgb,var(--label) 18%,transparent);color:var(--label);padding-left:3px}
  .tsc .cchip .av{width:18px;height:18px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff;background:var(--label)}
  .tsc .cchip b{opacity:.6;padding:0 2px;font-size:13px}
  .tsc-x{width:24px;height:24px;flex:0 0 auto;border:0;background:var(--surface);color:var(--ink-2);border-radius:50%;cursor:pointer;font-size:15px;display:grid;place-items:center}
  .tsc-x:hover{background:var(--danger);color:#fff}
  .tsc-pop{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:150;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--box3d),0 20px 44px -20px rgba(0,0,0,.4);overflow:hidden}
  .tsc-tabs{display:flex;gap:2px;padding:7px;border-bottom:1px solid var(--line-2)}
  .tsc-tabs button{flex:1;padding:7px 8px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:12.5px;font-weight:650;border-radius:9px;cursor:pointer}
  .tsc-tabs button:hover{background:var(--surface)}
  .tsc-tabs button.on{background:color-mix(in srgb,var(--sage) 14%,transparent);color:var(--sage)}
  .tsc-list{max-height:300px;overflow:auto;padding:6px;display:flex;flex-direction:column;gap:1px}
  .tsc-list .cp-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;color:var(--ink);font:inherit;font-size:13.5px;border-radius:10px;cursor:pointer;text-align:left}
  .tsc-list .cp-opt:hover{background:var(--surface)}
  .tsc-list .cp-opt.on{background:color-mix(in srgb,var(--sage) 12%,transparent);font-weight:650}
  .tsc-list .cp-opt svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.8}
  .tsc-list .cp-opt .av{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  /* Bank merchant rows in the combo dropdown: badge, name, count. */
  .tsc-list .cp-opt .cp-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tsc-list .cp-opt .cp-ct{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .tsc .cchip .nmono{flex:0 0 auto}
  .tsc-list .cp-hash{width:22px;text-align:center;color:var(--ink-3);font-weight:700;flex:0 0 auto}
  .tsc-list .cp-empty{padding:16px;text-align:center;color:var(--ink-3);font-size:12.5px}
  /* fast filter bar for documents (search + consultant chips) */
  .dfbar{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
  .dfsearch{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--box3d)}
  .dfsearch svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.9;stroke-linecap:round}
  .dfsearch input{border:0;background:transparent;padding:0;font-size:14px;flex:1;box-shadow:none}
  .dfsearch input:focus{outline:0}
  .dfchips{display:flex;gap:7px;flex-wrap:wrap}
  .dfchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;padding:5px 13px 5px 6px;border-radius:999px;cursor:pointer;transition:.13s}
  .dfchip .av{width:22px;height:22px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  .dfchip:hover{border-color:var(--sage);color:var(--ink)}
  .dfchip.on{background:var(--sage);border-color:var(--sage);color:#fff}
  .dfchip.on .av{background:rgba(255,255,255,.28)}
  .loggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px;margin-top:6px}
  .loggrid[hidden]{display:none}
  .logcard{position:relative;background:#fff;border-radius:16px;padding:8px;box-shadow:var(--box3d),0 14px 30px -16px rgba(0,0,0,.35);cursor:pointer;transition:transform .14s,box-shadow .14s}
  .logcard:hover{transform:translateY(-3px);box-shadow:var(--box3d),0 20px 42px -16px rgba(0,0,0,.4)}
  .lc-frame{position:relative;border:2.5px solid #111;border-radius:11px;padding:15px 18px 14px;color:#111;font-family:'Courier New',ui-monospace,monospace;background:#fff}
  .lc-frame::after{content:"";position:absolute;inset:3px;border:1px solid #111;border-radius:8px;pointer-events:none;opacity:.5}
  .lc-name{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
  .lc-name b,.lc-field b{font-size:11px;font-weight:800;letter-spacing:.13em;text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}
  .lc-line{flex:1;min-width:0;border-bottom:1.5px dashed #111;font-size:14px;font-weight:700;padding:0 4px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lc-months{display:flex;justify-content:space-between;font-size:13.5px;font-weight:800;letter-spacing:.02em;margin-bottom:7px;padding-right:60px}
  .lc-months span{width:16px;text-align:center;position:relative;color:#555}
  .lc-months span.on{color:#111}
  .lc-months span.on::after{content:"";position:absolute;inset:-4px -2px;border:2px solid #111;border-radius:50%}
  .lc-days{display:flex;flex-wrap:wrap;gap:2px 6px;font-size:10.5px;font-weight:600;color:#666;margin-bottom:10px;padding-right:60px;line-height:1.5}
  .lc-days span{min-width:13px;text-align:center}
  .lc-field{display:flex;align-items:baseline;gap:8px;margin-top:7px}
  .lc-field.proj{align-items:flex-start}
  .lc-clamp{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.32;max-height:2.64em;border-bottom:1.5px dashed #111;padding-bottom:3px}
  .lc-seal{position:absolute;top:50px;right:16px;width:48px;height:54px}
  .lc-hex{position:absolute;inset:0;border:1.6px dotted #111;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.65}
  .lc-frac{position:absolute;bottom:12px;right:16px;width:54px;height:54px;border:2px solid #111;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}
  .lc-frac b{font-size:20px;font-weight:800;line-height:1}
  .lc-frac small{font-size:8.5px;font-weight:700;letter-spacing:.1em;margin-top:1px}
  .lc-frac .pill{font-family:inherit}
  .logcard .lc-status{position:absolute;top:14px;right:14px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#111;color:#fff}
  .logcard .lc-menu{position:absolute;top:11px;left:11px;z-index:3;width:26px;height:22px;border:0;background:rgba(0,0,0,.06);color:#333;border-radius:7px;cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;transition:background .12s}
  .logcard .lc-menu:hover{background:rgba(0,0,0,.13)}
  .pp-nm{font-size:13px;font-weight:700}.pp-ad{color:#454b48;margin-top:3px;font-size:12px;line-height:1.5}.pp-ct{color:#8a918d;margin-top:4px;font-size:11px}
  .pp-meta{display:flex;flex-wrap:wrap;gap:14px 40px;padding:2px 0 16px;border-bottom:1px solid #e6e9e7;margin-bottom:10px;font-size:14px;font-weight:650;color:#16191b}
  .pp-meta span{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a918d;margin-bottom:3px}
  .pp-fx{margin-top:12px;font-size:11px;color:#8a918d}.pp-fx b{color:#454b48}
  table.pp-lines{width:100%;border-collapse:collapse;margin-top:14px;table-layout:fixed}
  table.pp-lines thead th{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a918d;text-align:left;padding:0 10px 10px 0;border-bottom:1.5px solid #16191b;white-space:nowrap;overflow:visible}
  table.pp-lines th.n{text-align:right;padding-right:9px}
  table.pp-lines th:nth-child(1){width:auto}
  table.pp-lines th:nth-child(2){width:58px}table.pp-lines th:nth-child(3){width:56px}
  table.pp-lines th:nth-child(4){width:98px}table.pp-lines th:nth-child(5){width:100px}table.pp-lines th:nth-child(6){width:34px}
  table.pp-lines td{padding:5px 6px 5px 0;border-bottom:1px solid #f0f2f1;vertical-align:top}
  table.pp-lines td:nth-child(2),table.pp-lines td:nth-child(3),table.pp-lines td:nth-child(4),table.pp-lines td:nth-child(5){padding-left:8px}
  table.pp-lines td.del{padding-right:0}
  /* Headline in its own dashed box, description a separate box below */
  .l-titlebox{border:1px dashed #dfe3de;border-radius:9px;background:#fcfcfb;transition:border-color .1s,background .1s}
  .l-titlebox:focus-within{border-style:solid;border-color:var(--sage);background:#fff}
  .l-titlebox .l-title{width:100%;box-sizing:border-box;border:0;background:transparent;font:inherit;font-size:12px;font-weight:650;color:#16191b;padding:9px 10px;outline:none}
  .l-main .l-detail{width:100%;box-sizing:border-box;border:1px dashed #e7eae5;border-radius:9px;background:#fcfcfb;font:inherit;font-size:10.5px;color:#6a716b;padding:7px 10px;margin-top:6px;line-height:1.55;resize:none;overflow:hidden;display:block;outline:none;transition:border-color .1s,background .1s}
  .l-main .l-detail:hover{border-color:#cbd0ca}
  .l-main .l-detail:focus{border-style:solid;border-color:var(--sage);background:#fff;color:#16191b}
  /* Qty / unit / price — dashed boxes the same height as the headline row */
  .l-num{width:100%;box-sizing:border-box;height:37px;border:1px dashed #dfe3de;border-radius:9px;background:#fcfcfb;font:inherit;font-size:12px;color:#16191b;padding:0 8px;transition:border-color .1s,background .1s}
  .l-num:hover{background:#f6f7f6;border-color:#cbd0ca}
  .l-num:focus{outline:none;border-style:solid;border-color:var(--sage);background:#fff;caret-color:var(--sage)}
  .l-num::-webkit-outer-spin-button,.l-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .l-num[type=number]{-moz-appearance:textfield}
  table.pp-lines td.n{padding-right:0}
  table.pp-lines td.n .l-num{text-align:right;font-variant-numeric:tabular-nums}
  .l-unit{width:100%;box-sizing:border-box;height:37px;border:1px dashed #dfe3de;border-radius:9px;background:#fcfcfb;font:inherit;font-size:12px;color:#16191b;padding:0 9px;cursor:pointer;text-align:left;transition:border-color .1s,background-color .1s}
  .l-unit:hover{background-color:#f6f7f6;border-color:#cbd0ca}
  .unitpop{position:fixed;z-index:140;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 44px -20px rgba(0,0,0,.5);padding:6px;min-width:158px;max-height:280px;overflow:auto}
  .unitpop button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font:inherit;font-size:13px;color:var(--ink);background:none;border:0;border-radius:8px;padding:8px 11px;cursor:pointer;text-align:left}
  .unitpop button:hover{background:var(--surface)}
  .unitpop button.on{color:var(--sage);font-weight:700}
  .unitpop button .uk{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--surface);border-radius:20px;padding:2px 8px}
  .unitpop button .uck{color:var(--sage);font-weight:800}
  table.pp-lines td.amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;font-size:12px;white-space:nowrap;padding:15px 9px 0 0}
  table.pp-lines td.del{padding-top:11px}
  table.pp-lines td.del button{border:0;background:none;color:#c2c7c1;cursor:pointer;padding:4px}
  table.pp-lines td.del button:hover{color:var(--danger)}
  table.pp-lines td.del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
  .pp-lineadd{display:flex;gap:8px;margin-top:10px}
  /* Bottom: payment terms + payment box + dashed totals */
  .pp-bottom{display:flex;justify-content:space-between;gap:26px;margin-top:30px;align-items:flex-start}
  .pp-payblock{display:flex;flex-direction:column;gap:14px;flex:1;max-width:46%}
  .pp-bh{font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a918d;margin-bottom:6px}
  .pp-cond,.pp-paybox{font-size:11px;color:#454b48;line-height:1.6}
  .pp-paybox b{color:#16191b}.pp-cond b{color:#16191b}
  .pp-totals{width:48%;margin:0;border:1.5px dashed #16191b;border-radius:12px;padding:16px 22px;background:#fafafa}
  /* PO paper: static party blocks, scope lines, authorised-value box */
  .pp-static{font-size:12.5px;color:#16191b;line-height:1.6}
  .po-scope{margin-top:26px}
  .po-srow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed #e6e9e7}
  .po-srow .po-dash{color:#0d0d0d;font-weight:700;font-size:15px;flex:0 0 auto;line-height:1}
  .po-srow .po-sin{flex:1;border:1px dashed #dfe3de;border-radius:9px;background:#fcfcfb;font:inherit;font-size:12.5px;color:#16191b;padding:9px 11px;outline:none;transition:border-color .1s,background .1s}
  .po-srow .po-sin:focus{border-color:var(--sage);background:#fff}
  .po-srow .po-del{flex:0 0 auto;width:28px;height:28px;border:0;background:none;color:#b6bbb5;border-radius:7px;cursor:pointer;display:grid;place-items:center;transition:.12s}
  .po-srow .po-del:hover{color:var(--danger);background:#f6efee}
  .po-srow .po-del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
  /* Authorised-value box: same look & feel as the invoice's black Amount-due box */
  .pp-totals.po-valuebox{border:1.5px solid #0d0d0d;background:#0d0d0d;color:#fff;padding:20px 24px;display:flex;flex-direction:column;justify-content:center;gap:7px}
  .po-valuebox .pv-k{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#93a79f}
  .po-valuebox .pv-amt{display:flex;align-items:baseline;gap:8px;min-width:0}
  .po-valuebox .pv-amt .l-num{flex:1 1 auto;min-width:0;width:auto;height:auto;font-size:30px;font-weight:800;letter-spacing:-.01em;color:#fff;border:0;border-bottom:1.5px solid rgba(255,255,255,.32);border-radius:0;background:none;padding:3px 0;font-variant-numeric:tabular-nums}
  .po-valuebox .pv-amt .l-num::placeholder{color:rgba(255,255,255,.4)}
  .po-valuebox .pv-cur{font-size:15px;font-weight:700;color:#c9cec8;flex:0 0 auto}
  .po-valuebox .pv-sub{font-size:10px;color:#9aa39b;line-height:1.45}
  /* Ordered-by (customer) as a clean card */
  .pp-recip.po-orderedby{flex:0 0 44%;border:1px solid #e6e9e7;border-radius:12px;padding:15px 18px;background:#fafafa}
  #po_paper .pp-sign{margin-top:76px}
  .paper .invtotals .r span{color:#454b48}.paper .invtotals .grand,.paper .invtotals .grand span{color:#0d0d0d;border-top-color:#16191b}
  .pp-blocks{display:flex;gap:34px;margin-top:26px}
  .pp-block{flex:1;font-size:11px;color:#454b48;line-height:1.6}
  .pp-block b{color:#16191b}
  .pp-block .heart{width:13px;height:13px;fill:none;stroke:#0d0d0d;stroke-width:1.8;vertical-align:-2px;margin-left:2px}
  .pp-sign{display:flex;gap:48px;margin-top:44px}
  .pp-sig{flex:1}
  .pp-sig-line{border-top:1.5px solid #16191b;margin-bottom:7px}
  .pp-sig-k{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a918d}
  .emptybox .eb-t{font-size:16px;font-weight:650;color:var(--ink-2)}
  .emptybox .eb-c{font-size:13.5px}.emptybox .eb-c b{color:var(--sage)}
  .linklike{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--sage);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .linklike:hover{color:var(--sage-2)}
  /* Company cards */
  .cogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;padding-top:14px}
  /* Lochkarte — company records as a clean, modern punch card */
  .karte{position:relative;background:var(--frame,var(--paper));color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:46px 28px 22px;overflow:hidden;box-shadow:var(--box3d);transition:transform .16s,box-shadow .16s,border-color .16s}
  .karte:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--sage) 38%,var(--line));box-shadow:0 22px 46px -26px rgba(18,22,18,.55)}
  .karte::before{content:"";position:absolute;top:17px;left:26px;right:74px;height:11px;border-radius:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 15%,transparent) 0 11px,transparent 11px 22px)}
  .karte .k-tab{position:absolute;top:-1px;right:-1px;width:47px;height:47px;background:var(--sage);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;border-radius:0 0 0 14px;transition:filter .12s}
  .karte .k-tab:hover{filter:brightness(1.09)}
  .karte .k-tab svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  /* Hover copy button + zen copy popup on company cards */
  .k-copy{position:absolute;top:54px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.9);transition:.14s;box-shadow:var(--box3d);z-index:3}
  .karte:hover .k-copy{opacity:1;transform:scale(1)}
  .k-copy:hover{color:var(--sage);border-color:var(--sage);transform:scale(1.06)}
  .k-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .copypop{min-width:210px}
  .copypop button{display:flex;align-items:center;gap:11px;width:100%;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:0;border-radius:9px;padding:9px 11px;cursor:pointer;text-align:left}
  .copypop button:hover{background:var(--surface);color:var(--sage)}
  .copypop button svg{width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .copypop button:hover svg{stroke:var(--sage)}
  .copypop button .cv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:500;color:var(--ink-3);text-align:right}
  .coiconpop{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:352px;max-width:calc(100vw - 24px);max-height:460px;padding:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}
  .coiconpop::-webkit-scrollbar{width:9px}
  .coiconpop::-webkit-scrollbar-track{background:transparent}
  .coiconpop::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 20%,transparent);border-radius:9px;border:3px solid transparent;background-clip:padding-box}
  .coiconpop::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 34%,transparent);background-clip:padding-box}
  .coiconpop button{display:grid;place-items:center;padding:10px;border-radius:9px;border:0;background:none;cursor:pointer;aspect-ratio:1}
  .coiconpop button svg{width:22px;height:22px;fill:none;stroke:var(--ink-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .coiconpop button:hover{background:var(--surface)}.coiconpop button:hover svg{stroke:var(--sage)}
  .karte .k-head{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--line)}
  .karte .k-nm{font-size:20px;font-weight:760;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 40px 2px 3px;margin-left:-3px;border-radius:5px;outline:none;transition:background .12s}
  .karte .k-nm:focus{background:color-mix(in srgb,var(--sage) 8%,transparent)}
  .karte .k-no{font-family:ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
  .karte .k-rows{display:flex;flex-direction:column;gap:2px}
  .karte .k-row{display:flex;gap:14px;align-items:baseline;min-height:30px;padding-top:7px}
  .karte .k-l{flex:0 0 74px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
  .karte .k-v{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.55;white-space:pre-line}
  .karte .k-stamp{position:absolute;right:18px;bottom:14px;color:var(--sage);opacity:.1}
  .karte .k-stamp svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .karte [contenteditable]{outline:none;border-radius:6px;transition:background .1s,box-shadow .1s;min-height:1em}
  .karte [contenteditable]:hover{background:color-mix(in srgb,var(--sage) 7%,transparent)}
  .karte [contenteditable]:focus{background:var(--surface);box-shadow:0 0 0 1.5px var(--sage)}
  .karte [contenteditable]:empty::before{content:attr(data-empty);color:var(--ink-3);opacity:.55}
  .karte .k-actions{display:flex;gap:8px;margin-top:16px;max-height:0;opacity:0;overflow:hidden;transition:max-height .18s,opacity .15s}
  .karte.dirty .k-actions,.karte.knew .k-actions{max-height:46px;opacity:1}
  .karte .k-save{font:inherit;font-size:11px;font-weight:800;letter-spacing:.02em;background:var(--sage);color:#fff;border:0;border-radius:8px;padding:8px 16px;cursor:pointer}
  .karte .k-save:hover{filter:brightness(1.06)}
  .karte .k-del{font:inherit;font-size:11px;font-weight:600;background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:8px;padding:8px 14px;cursor:pointer}
  .karte .k-del:hover{color:var(--danger);border-color:var(--danger)}
  input:hover,select:hover{border-color:color-mix(in srgb,var(--sage) 30%,var(--line))}
  input:focus,select:focus{outline:none;border-color:color-mix(in srgb,var(--sage) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 14%,transparent);background:var(--paper)}
  input::placeholder{color:var(--ink-3)}
  /* Two soft sage lights, one each side — sampled from the hero orchid photo.
     Kept subtle and elegant: focused glows that fade into the dark, so the
     centered column reads clean above them. */
  .ambient{display:none}
  /* Glassy sage side panels — even frosted bands anchored to each edge, with a
     faint inner highlight so they read like glass rather than two glow lamps. */
  .ambient span{position:absolute;top:0;bottom:0;width:30vw}
  .ambient .l{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--sage) 15%,transparent),color-mix(in srgb,var(--sage) 4%,transparent) 55%,transparent 82%);box-shadow:inset 1px 0 0 rgba(255,255,255,.04)}
  .ambient .r{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--sage) 13%,transparent),color-mix(in srgb,var(--sage) 3%,transparent) 55%,transparent 82%);box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
  @media(prefers-color-scheme:light){.ambient .l{background:linear-gradient(90deg,color-mix(in srgb,var(--sage) 20%,transparent),transparent 80%)}.ambient .r{background:linear-gradient(270deg,color-mix(in srgb,var(--sage) 18%,transparent),transparent 80%)}}
  .top,.wrap{position:relative;z-index:1}
  .wrap{max-width:860px}
  /* Role view switcher (Admin sees both surfaces) */
  .tabs{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:4px;margin-bottom:24px}
  .tabs button{font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:transparent;border:0;border-radius:9px;padding:9px 17px;cursor:pointer;transition:background .15s,color .15s}
  .tabs button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.16)}
  .tabs button:not(.on):hover{color:var(--ink)}
  /* Time-entry form (consultant) */
  .panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}
  .panel h3{margin:0 0 4px;font-size:15px;font-weight:680}.panel .h-sub{color:var(--ink-3);font-size:13px;margin:0 0 16px}
  .grid{display:grid;grid-template-columns:1.4fr .9fr .7fr auto;gap:10px;align-items:end}
  .fld{display:flex;flex-direction:column;gap:5px}
  .fld label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
  .fld input,.fld select{width:100%;box-sizing:border-box;max-width:100%}
  /* Zen project dropdown — project name + company tag, in the magic-clock form */
  .zdrop{position:relative}
  .zd-trigger{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);text-align:left;transition:border-color .13s,box-shadow .13s}
  .zd-trigger:hover{border-color:var(--sage)}
  .zdrop.open .zd-trigger{border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 14%,transparent)}
  .zd-val{flex:1;min-width:0;display:flex;align-items:center;gap:9px;overflow:hidden}
  .zd-ph{color:var(--ink-3)}
  .zd-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--sage)}
  .zd-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
  .zd-co{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sage);background:color-mix(in srgb,var(--sage) 13%,transparent);padding:3px 9px;border-radius:999px;white-space:nowrap}
  .zd-val .zd-co{animation:zdTagIn .24s cubic-bezier(.2,.7,.2,1)}
  @keyframes zdTagIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
  .zd-chev{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
  .zdrop.open .zd-chev{transform:rotate(180deg)}
  .zd-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:var(--box3d),0 20px 44px -20px rgba(0,0,0,.4);padding:6px;max-height:320px;overflow:auto;transform-origin:top center;animation:zdPopIn .16s ease}
  @keyframes zdPopIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
  .zd-pop.hidden{display:none}
  .zd-opt{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 11px;border:0;background:none;color:var(--ink);font:inherit;font-size:13.5px;border-radius:9px;cursor:pointer;text-align:left}
  .zd-opt:hover{background:var(--surface)}
  .zd-opt.on{background:color-mix(in srgb,var(--sage) 12%,transparent)}
  .zd-opt.on .zd-name{font-weight:650}
  .zd-opt .zd-co{animation:none}
  .zd-empty{padding:16px;text-align:center;color:var(--ink-3);font-size:12.5px}
  /* Rate-card searchable consultant filter (reuses the zen dropdown) */
  .rc-drop{width:280px;max-width:100%;position:relative;z-index:120}
  .rc-drop .zd-pop{z-index:200}
  .rc-drop .zd-val .av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  .zd-allic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--sage) 14%,var(--surface));color:var(--sage);flex:0 0 auto}
  .zd-allic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .zd-pop .zd-search{position:sticky;top:0;background:var(--paper);padding:2px 2px 8px;margin-bottom:2px;border-bottom:1px solid var(--line-2);z-index:1}
  .zd-pop .zd-search input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
  .zd-opt .av{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  /* Availability + tasks view */
  /* The heatmap already sits in its own bordered .heatwrap card — drop the extra
     outer panel so the calendar preview isn't a panel-in-a-panel. */
  .avpanel{padding:0;margin-bottom:22px;background:transparent;border:0;box-shadow:none}
  .tsbar.taskbar{margin-top:8px}
  .tf-drop{width:210px;flex:0 0 auto}
  @media(max-width:640px){.grid{grid-template-columns:1fr 1fr}}
  /* Hero caption — "Tally / by / [white MANSKORA logo]" over the photo. */
  .hero .cap .tally{font-size:56px;font-weight:730;letter-spacing:-.025em;line-height:.96;margin:0;text-shadow:0 2px 22px rgba(0,0,0,.4)}
  .hero .credit{position:absolute;right:24px;bottom:20px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px;color:#fff}
  .hero .credit span{font-size:14px;opacity:.82;text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .hero .credit .ty{font-size:15px;font-weight:700;opacity:1;letter-spacing:.01em}
  .hero .credit .ty em{font-style:normal;font-weight:400;opacity:.72}
  .hero .credit img{width:190px;max-width:46vw;height:auto;display:block;opacity:.96;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45))}
  @media(max-width:560px){.hero .cap .tally{font-size:32px}.hero .credit img{width:118px}}
  /* Modal + overlay foundation */
  .overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px;background:rgba(12,14,16,.55);backdrop-filter:blur(9px) saturate(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.05)}
  /* A pop-up modal (payer / company / counterparty) must sit ABOVE a full-screen
     document editor — both are .overlay, so lift the true modals past the editor. */
  .overlay:not(.editor){z-index:120}
  .overlay[hidden]{display:none}
  .modal{width:100%;max-width:440px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px;box-shadow:var(--box3d),0 40px 80px -40px rgba(0,0,0,.5);animation:pop .18s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  /* Post-it modal — split-screen with the zen messenger when editing */
  #taskModal .modal{max-width:560px;max-height:92vh;overflow:auto;transition:max-width .2s}
  #taskModal .modal.has-chat{max-width:920px}
  .pm-body{display:flex;gap:24px;align-items:stretch}
  .pm-left{flex:1;min-width:0}
  .pm-right{width:372px;flex:0 0 372px;border-left:1px solid var(--line);padding-left:22px;display:flex;flex-direction:column;min-height:0}
  .pm-right[hidden]{display:none}
  .pm-chat-l{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin:16px 0 4px}
  .pm-chat-l span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
  .pm-thread{flex:1;min-height:200px;max-height:54vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px}
  .pm-composer{position:relative;display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  /* @mention autocomplete */
  .pm-mention{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:60;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--box3d),0 20px 40px -20px rgba(0,0,0,.45);padding:5px;max-height:236px;overflow:auto}
  .pm-mention.hidden{display:none}
  .pmen-opt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;border-radius:9px;cursor:pointer;text-align:left}
  .pmen-opt:hover,.pmen-opt.on{background:color-mix(in srgb,var(--sage) 13%,transparent)}
  .pmen-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  .pmen-nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pmen-grp{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
  /* mention chip — in the composer and in the thread */
  .pm-mchip{display:inline-block;padding:1px 7px;border-radius:6px;background:color-mix(in srgb,var(--sage) 16%,transparent);color:var(--sage);font-weight:650;white-space:nowrap}
  .pm-row{display:flex;align-items:flex-end;gap:8px}
  .pm-fmt{display:flex;gap:3px;padding:0 2px}
  .pm-fmt button{width:26px;height:24px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;font-size:12.5px;line-height:1;display:grid;place-items:center;transition:.12s}
  .pm-fmt button:hover{background:var(--paper);border-color:var(--line);color:var(--ink)}
  .pm-fmt button.on{background:var(--sage);border-color:var(--sage);color:#fff}
  .pm-input{flex:1;min-width:0;max-height:140px;overflow-y:auto;border:0;background:transparent;box-shadow:none;font-size:13.5px;line-height:1.5;padding:6px 2px;outline:none}
  .pm-input:empty::before{content:attr(data-ph);color:var(--ink-3)}
  .pm-input p{margin:0 0 5px}.pm-input p:last-child{margin-bottom:0}
  .pm-input ul,.pm-input ol{margin:3px 0;padding-left:20px}
  .pm-attach,.pm-send{width:34px;height:34px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
  .pm-attach:hover{border-color:var(--sage);color:var(--sage)}
  .pm-send{background:var(--sage);color:#fff;border-color:var(--sage)}
  .pm-attach svg,.pm-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .pm-send svg{fill:currentColor;stroke:none}
  .pm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;text-align:center;color:var(--ink-3)}
  .pm-empty svg{width:44px;height:44px;fill:none;stroke:var(--sage);stroke-width:1.5;opacity:.85;margin-bottom:8px}
  .pm-empty b{font-size:15px;color:var(--ink)}
  .pcrow{display:flex;gap:9px;align-items:flex-start}
  .pcrow.me{flex-direction:row-reverse}
  .pcav{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700}
  .pcrow.me .pcav{background:var(--label)}
  .pcbub{max-width:80%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 12px}
  .pcrow.me .pcbub{background:color-mix(in srgb,var(--sage) 12%,var(--surface))}
  .pcmeta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3);margin-bottom:3px}
  .pcmeta b{font-size:11.5px;font-weight:650;color:var(--ink-2)}
  .pcx{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:11px;padding:0 2px;opacity:.6}
  .pcx:hover{opacity:1;color:var(--danger)}
  .pctxt{font-size:13.5px;line-height:1.45;color:var(--ink);word-break:break-word}
  .pctxt p{margin:0 0 5px}.pctxt p:last-child,.pctxt div:last-child{margin-bottom:0}
  .pctxt ul,.pctxt ol{margin:3px 0;padding-left:20px}.pctxt b,.pctxt strong{font-weight:700}
  .pcimg{position:relative;margin:2px 0 4px;border-radius:12px;overflow:hidden;border:4px solid var(--paper);box-shadow:var(--box3d);cursor:zoom-in;max-width:250px}
  .pcimg img{display:block;width:100%;max-height:250px;object-fit:cover}
  .pcpin{position:absolute;right:7px;bottom:7px;background:rgba(14,16,18,.72);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
  .pcpin svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
  @media(max-width:820px){#taskModal .modal.has-chat{max-width:460px}.pm-body{flex-direction:column}.pm-right{width:auto;flex:none;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px;margin-top:8px}}
  /* post-it image lightbox */
  #pmLightbox{z-index:200}
  #pmLightbox .lb-wrap{width:100%;max-width:1040px;max-height:92vh;display:grid;grid-template-columns:1fr 300px;gap:0;background:var(--paper);border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--box3d),0 40px 80px -40px rgba(0,0,0,.5)}
  #pmLightbox .lb-x{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(14,16,18,.55);color:#fff;cursor:pointer;display:grid;place-items:center}
  #pmLightbox .lb-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
  #pmLightbox .lb-stage{position:relative;background:#0c0e10;display:grid;place-items:center;min-height:320px;max-height:92vh;overflow:hidden}
  #pmLightbox .lb-stage img{max-width:100%;max-height:92vh;display:block;cursor:crosshair}
  #pmLightbox .lb-pins{position:absolute;inset:0;pointer-events:none}
  .lb-pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--sage);color:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);display:grid;place-items:center;font-size:11px;font-weight:700;pointer-events:auto}
  .lb-pin.draft{background:var(--label)}
  #pmLightbox .lb-side{background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;padding:16px 16px 12px;overflow:auto}
  #pmLightbox .lb-hint{font-size:11.5px;color:var(--ink-3);margin-bottom:12px}
  #pmLightbox .lb-notes{display:flex;flex-direction:column;gap:10px}
  .lb-empty{color:var(--ink-3);font-size:12.5px;text-align:center;padding:14px}
  .lb-note{display:flex;gap:9px}
  .lb-nn{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
  .lb-nb{flex:1;min-width:0}
  .lb-nm{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);margin-bottom:2px}
  .lb-nm b{font-size:11.5px;font-weight:650;color:var(--ink-2)}
  .lb-nt{font-size:13px;line-height:1.4;color:var(--ink);word-break:break-word}
  #pmLightbox .lb-pinform{position:absolute;left:16px;bottom:16px;width:calc(100% - 332px);display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--box3d);z-index:4}
  #pmLightbox .lb-pinform[hidden]{display:none}
  #pmLightbox .lb-pinform input[type=text],#pmLightbox #pmLbText{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:8px 10px;font-size:13px}
  .lb-sub{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
  .lb-sub input{width:16px;height:16px;accent-color:var(--sage);cursor:pointer}
  .lb-pinbtns{display:flex;gap:7px;justify-content:flex-end}
  @media(max-width:720px){#pmLightbox .lb-wrap{grid-template-columns:1fr}#pmLightbox .lb-side{max-height:34vh}#pmLightbox .lb-pinform{width:calc(100% - 32px)}}
  .modal h3{margin:0 0 4px;font-size:18px;font-weight:700}.modal .m-sub{color:var(--ink-3);font-size:13px;margin:0 0 20px}
  .modal .fld{margin-bottom:14px}
  .modal .fld input{width:100%}
  .modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
  .wsgrid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-top:14px}
  @media(max-width:560px){.wsgrid{grid-template-columns:1fr 1fr}}
  /* Worksheet auto-computed economics */
  .wsauto{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}
  @media(max-width:640px){.wsauto{grid-template-columns:repeat(2,1fr)}}
  .wsauto .wa{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
  .wsauto .wa span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .wsauto .wa b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
  .wsauto .wa.pay b{color:var(--warn)}.wsauto .wa.keep b{color:var(--pos)}
  .ws-warn{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent);border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);border-radius:10px;padding:9px 12px}
  .ws-warn[hidden]{display:none}.ws-warn .bi{width:16px;height:16px;flex:0 0 auto}
  .adjrow{display:grid;grid-template-columns:1fr .7fr auto auto;gap:8px;margin-bottom:8px;align-items:center}
  .adjrow .seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .adjrow .seg button{font:inherit;font-size:14px;font-weight:700;border:0;background:var(--surface);color:var(--ink-3);padding:9px 12px;cursor:pointer}
  .adjrow .seg button.on{background:var(--sage);color:#fff}
  .adjrow .del{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:8px;font-size:17px;line-height:1}
  .adjrow .del:hover{color:var(--danger)}
  .wstotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line);font-size:16px;font-weight:750}
  .wstotal .mono{font-family:var(--mono);font-size:22px}
  /* Live taimaa clock */
  .trecover{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:color-mix(in srgb,var(--sage) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 32%,var(--line));border-radius:12px;padding:11px 15px;margin:2px 0 14px}
  .trecover[hidden]{display:none}
  .trecover svg{width:18px;height:18px;fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .trecover span{flex:1;min-width:220px;font-size:13.5px;color:var(--ink)}
  .trecover .btn{font-size:13px;padding:8px 14px}
  .timerbox{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin:10px 0 24px}
  @media(max-width:640px){.timerbox{grid-template-columns:1fr}}
  /* Timesheet panel: thirds — clock full-height left, controls + form right */
  .tsgrid{display:grid;grid-template-columns:minmax(260px,1.15fr) 2fr;gap:26px;align-items:center;margin:8px 0 22px}
  @media(max-width:760px){.tsgrid{grid-template-columns:1fr;gap:22px}}
  .tsclock{display:flex;align-items:center;justify-content:center;height:100%}
  .tsright{display:flex;flex-direction:column;gap:18px;min-width:0}
  .tstop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
  .tstop .tbtnrow{display:flex;gap:12px;flex:0 0 auto}
  .tstop .tsctrls{display:flex;gap:10px;flex-wrap:nowrap;justify-content:flex-end;flex:1 1 auto;min-width:0}
  .tstop .tsctrls .lc{min-width:0;padding:8px 12px}
  /* keep the control strip on one line — the bold label + icon + toggle say enough */
  .tstop .tsctrls .lc small{display:none}
  @media(max-width:900px){.tstop{flex-wrap:wrap;align-items:stretch}.tstop .tsctrls{flex-wrap:wrap;justify-content:flex-start}.tstop .tsctrls .lc small{display:block}}
  .tsform{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
  .tsform .fld.full{grid-column:1/-1}
  .tsadd{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .tsadd .btn{flex:0 0 auto}
  .tsadd .chips{display:flex;gap:7px;flex-wrap:wrap;margin:0}
  .tsform .setlabels{display:flex;gap:8px;margin-bottom:5px}
  .tsform .setlabels span{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
  .tsform .setlabels .sl-start,.tsform .setlabels .sl-end{flex:1;text-align:center}
  .tsform .setlabels .sl-tags{flex:2.2;text-align:left}
  .tsform .setlabels .opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-3)}
  .tsform .setrow{display:flex;gap:8px}
  .tsform .setrow input{flex:1;min-width:0;text-align:center}
  .tsform .setrow .tagfld{flex:2.2;text-align:left}
  .tsform .descrow{display:flex;gap:8px;align-items:stretch}
  .tsform .descrow input{flex:1;min-width:0}
  .tsform .descrow .btn{flex:0 0 auto;white-space:nowrap;padding-left:22px;padding-right:22px}
  .timerbox .tcol{display:flex;flex-direction:column;align-items:center;gap:18px;justify-self:center}
  .timerbox .tbtnrow{display:flex;gap:16px}
  .tbtn{width:56px;height:56px;border-radius:16px;border:1px solid var(--line);background:var(--accent);color:var(--paper);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:filter .12s,background .12s,border-color .12s}
  .tbtn:hover{filter:brightness(1.12)}
  @keyframes hflash{0%{box-shadow:0 0 0 0 var(--sage);background:color-mix(in srgb,var(--sage) 16%,var(--paper))}100%{box-shadow:0 0 0 4px transparent;background:var(--paper)}}
  input.flash{animation:hflash .8s ease-out}
  .tbtn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
  .tbtn.ghost:hover{border-color:var(--sage);color:var(--ink);filter:none}
  .tbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .timerbox .logctrls{justify-self:end;align-self:start}
  @media(max-width:640px){.timerbox .logctrls{justify-self:stretch}}
  .tclock{position:relative;width:292px;height:292px;max-width:100%;aspect-ratio:1;flex:0 0 auto}
  .tclock svg{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:center;z-index:2}
  .tclock .track{fill:none;stroke:var(--line);stroke-width:6}
  .tclock .prog{fill:none;stroke:var(--sage);stroke-width:6;stroke-linecap:round;stroke-dasharray:70 210}
  .tclock.run svg{animation:tspin 1.6s linear infinite}
  @keyframes tspin{to{transform:rotate(360deg)}}
  .tclock .tparticles{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:50%;z-index:1;opacity:0;transition:opacity .4s}
  .tclock.run .tparticles{opacity:1}
  .tclock .tt{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:38px;font-weight:700;font-variant-numeric:tabular-nums;z-index:3}
  /* Floating live-timer widget */
  /* In-app PDF viewer */
  #pdfViewer{z-index:130}
  #pdfViewer .pdfframe{width:min(1000px,94vw);height:92vh;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 90px -34px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;animation:pop .18s ease-out}
  #pdfViewer .pv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
  #pdfViewer .pv-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;min-width:0}
  #pdfViewer .pv-title .bi{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--sage);flex:0 0 auto}
  #pdfViewer .pv-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #pdfViewer .pv-actions{display:flex;gap:9px;flex:0 0 auto}
  #pdfViewer .pv-body{flex:1;min-height:0;background:var(--surface)}
  #pdfViewer iframe{width:100%;height:100%;border:0;display:block}
  /* New-version prompt toast */
  .updatetoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:14px;background:var(--nav);color:#fff;border-radius:16px;padding:12px 14px 12px 16px;box-shadow:0 22px 54px -16px rgba(0,0,0,.6);animation:floatIn .35s cubic-bezier(.2,.9,.25,1) both}
  .updatetoast[hidden]{display:none}
  /* The wordmark, not a rocket and not an emoji — a product telling you it has
     updated should look like the product. */
  .updatetoast .ut-ic{height:38px;flex:0 0 auto;display:grid;place-items:center;padding:0 12px;border-radius:11px;background:color-mix(in srgb,var(--sage-2) 28%,transparent)}
  .updatetoast .ut-word{height:15px;width:auto;display:block;opacity:.95}
  .updatetoast .ut-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .updatetoast .ut-body{display:flex;flex-direction:column;line-height:1.25}
  .updatetoast .ut-body b{font-size:14px;font-weight:750}.updatetoast .ut-body span{font-size:12px;opacity:.7}
  .updatetoast .ut-btn{background:var(--sage);color:#fff;border:0;border-radius:10px;padding:9px 17px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .updatetoast .ut-btn:hover{filter:brightness(1.12)}
  .timerwidget{position:fixed;right:24px;bottom:24px;z-index:60;display:none;align-items:center;gap:13px;background:var(--nav);color:#fff;border-radius:16px;padding:11px 13px;box-shadow:0 22px 54px -18px rgba(0,0,0,.65);cursor:pointer}
  .timerwidget.show{display:flex;animation:floatIn .3s cubic-bezier(.2,.9,.25,1) both}
  .timerwidget .tw-clock{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:2px solid rgba(255,255,255,.22);display:grid;place-items:center}
  .timerwidget .tw-dot{width:10px;height:10px;border-radius:50%;background:var(--sage-2);animation:twpulse 1.2s ease-in-out infinite}
  @keyframes twpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
  .timerwidget .tw-body{line-height:1.15}
  .timerwidget .tw-time{font-family:var(--mono);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
  .timerwidget .tw-lbl{font-size:9.5px;opacity:.6;text-transform:uppercase;letter-spacing:.09em;margin-top:2px}
  .timerwidget .tw-pause{background:rgba(255,255,255,.14);border:0;color:#fff;width:34px;height:34px;flex:0 0 auto;border-radius:10px;cursor:pointer;display:grid;place-items:center}
  .timerwidget .tw-pause:hover{background:rgba(255,255,255,.26)}
  .timerwidget .tw-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tctrl{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  .tctrl .thint{font-size:12px;color:var(--ink-3);max-width:300px}
  .chkline{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer;padding:2px 0}
  .chkline input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--sage)}
  select[multiple]{height:auto;padding:6px}
  select[multiple] option{padding:5px 7px;border-radius:6px}
  .nb{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-left:8px;vertical-align:1px}
  /* ClickUp-style assignee picker */
  .assignrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .chips{display:flex;gap:6px;flex-wrap:wrap}
  .chips:empty{display:none}
  .chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 3px;font-size:13px;font-weight:600}
  .chip .av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--sage)}
  .chip .x{cursor:pointer;color:var(--ink-3);padding:0 5px;font-size:14px}.chip .x:hover{color:var(--danger)}
  .assignbtn{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--line);background:transparent;border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
  .assignbtn:hover{border-color:var(--sage);color:var(--ink)}.assignbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #assignpop{position:fixed;z-index:52;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 46px -22px rgba(0,0,0,.55);padding:8px;width:270px;max-height:320px;overflow:auto}
  #assignpop[hidden]{display:none}
  #assignpop .srch{width:100%;margin-bottom:6px}
  #assignpop .opt{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:pointer}
  #assignpop .opt:hover{background:var(--surface)}
  #assignpop .opt .av{width:28px;height:28px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  #assignpop .opt .nm{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #assignpop .opt .ck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
  #assignpop .opt.sel .ck{background:var(--sage);border-color:var(--sage)}
  #assignpop .opt .ck svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.5;opacity:0}#assignpop .opt.sel .ck svg{opacity:1}
  /* Toggle switch */
  .tgrow{display:flex;align-items:center;gap:12px;padding:4px 0}
  .toggle{width:46px;height:26px;border-radius:999px;border:1px solid var(--line);background:var(--surface);position:relative;cursor:pointer;padding:0;flex:0 0 auto;transition:background .2s,border-color .2s;box-shadow:inset 0 1px 2px rgba(20,24,28,.07)}
  .toggle.on{background:linear-gradient(180deg,color-mix(in srgb,var(--sage) 82%,#fff),var(--sage));border-color:var(--sage);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
  .toggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.14);transition:transform .2s cubic-bezier(.3,1.25,.5,1)}
  .toggle.on .knob{transform:translateX(20px)}
  /* zen switch — for checkbox toggles (make-subtask, inherit tags, …) */
  input[type=checkbox].zsw,.lb-sub input[type=checkbox]{appearance:none;-webkit-appearance:none;width:40px;height:23px;border-radius:999px;background:var(--surface);border:1px solid var(--line);position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s,border-color .2s;box-shadow:inset 0 1px 2px rgba(20,24,28,.07);margin:0}
  input[type=checkbox].zsw::after,.lb-sub input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .2s cubic-bezier(.3,1.25,.5,1)}
  input[type=checkbox].zsw:checked,.lb-sub input[type=checkbox]:checked{background:linear-gradient(180deg,color-mix(in srgb,var(--sage) 82%,#fff),var(--sage));border-color:var(--sage)}
  input[type=checkbox].zsw:checked::after,.lb-sub input[type=checkbox]:checked::after{transform:translateX(17px)}
  .tglab{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
  .tglab svg{width:17px;height:17px;fill:none;stroke:var(--sage);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tgrow.off .tglab svg{stroke:var(--ink-3)}
  /* Log controls (top-right of the log panel) */
  .logctrls{display:flex;flex-direction:column;gap:10px;min-width:250px}
  .lc{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:9px 11px}
  #t_assignbtn{cursor:pointer;transition:border-color .12s,background .12s}
  #t_assignbtn:hover{border-color:var(--sage)}
  .lc .lci{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--sage) 13%,var(--paper));color:var(--sage)}
  .lc .lci svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .lc .lctxt{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
  .lc .lctxt b{font-size:13px;font-weight:700;color:var(--ink)}
  .lc .lctxt small{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lc .lcgo{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2)}
  .lc .lcgo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .lc.off .lci{background:var(--line-2);color:var(--ink-3)}
  .linkbtn{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;padding:0}
  .linkbtn:hover{color:var(--sage)}
  .lclbl{font-size:13px;font-weight:600;color:var(--ink-2);min-width:78px}
  .hoursrow{display:flex;gap:8px}.hoursrow input{flex:1;min-width:0}
  /* Quick full/half-day group — nice white buttons + a "day" tag */
  .dayseg{display:inline-flex;align-items:stretch;flex:0 0 auto;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);box-shadow:var(--box3d)}
  .dayseg .qbtn{border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:800;padding:0 15px;cursor:pointer;transition:background .12s,color .12s}
  .dayseg .qbtn+.qbtn{border-left:1px solid var(--line)}
  .dayseg .qbtn:hover{background:color-mix(in srgb,var(--sage) 14%,var(--paper));color:var(--sage)}
  .dayseg .qbtn.sel{background:var(--sage);color:#fff}
  .dayseg .daytag{display:flex;align-items:center;padding:0 11px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);background:var(--surface);border-left:1px solid var(--line)}
  /* Time-records table wraps long project/description text; date + hours stay on one line */
  #entryrows td{white-space:normal;word-break:break-word;vertical-align:top}
  #entryrows td.mono{white-space:nowrap}
  .recicon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--sage) 12%,var(--surface));color:var(--sage);vertical-align:middle}
  .recicon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* Assignee avatar (space-saving) */
  .recav{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;font-size:10px;font-weight:700;color:#fff;background:var(--sage);vertical-align:middle}
  .recav img{width:100%;height:100%;object-fit:cover}
  .recav.un{background:transparent;color:var(--ink-3);border:1.5px dashed var(--line);font-weight:600}
  .rectime{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
  /* Entry type: single consultant vs a shared double-booking */
  .rectype{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--ink-3) 16%,transparent);color:var(--ink-3);vertical-align:middle}
  .rectype svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .rectype.dbl{color:var(--gold)}
  .entrycard{overflow:visible}
  /* Floating zen etikett: project name + company on icon hover */
  .rectip{position:fixed;text-align:center;transform:translate(-50%,-100%) translateY(-2px);background:var(--ink);color:var(--paper);border-radius:12px;padding:9px 13px;box-shadow:0 18px 38px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .13s,transform .13s;z-index:3000}
  .rectip.on{opacity:1;transform:translate(-50%,-100%)}
  .rectip .rt-nm{font-size:12.5px;font-weight:750;white-space:nowrap;letter-spacing:.01em}
  .rectip .rt-co{font-size:11px;opacity:.72;margin-top:2px;white-space:nowrap}
  .rectip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
  /* Zen hover tooltip (project name on the icon) */
  .zt{position:relative}
  .zt::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(3px);background:var(--ink);color:var(--paper);font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:5px 10px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:.13s;z-index:60;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
  .zt::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(3px);border:5px solid transparent;border-top-color:var(--ink);opacity:0;transition:.13s;z-index:60}
  .zt:hover::after,.zt:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
  .viabadge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:11px;font-weight:600;color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,transparent);border:1px solid color-mix(in srgb,var(--sage) 26%,transparent);border-radius:20px;padding:1px 8px 1px 6px;vertical-align:1px}
  .viabadge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .viabadge .av.tiny{width:18px;height:18px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto;margin-left:-2px}
  .viabadge .av.tiny img{width:100%;height:100%;object-fit:cover}
  .lockpill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink-3)}
  .lockpill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .rebill{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
  .rebill input{width:17px;height:17px;accent-color:var(--sage)}
  .qbtn{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:0 11px;cursor:pointer;white-space:nowrap}
  .qbtn:hover{border-color:var(--sage);color:var(--ink)}
  /* Rate card modal — percentage tiers */
  .tpl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
  @media(max-width:520px){.tpl-row{grid-template-columns:repeat(2,1fr)}}
  .tpl{font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;min-width:0;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:13px 8px;cursor:pointer;transition:border-color .12s,background .12s}
  .tpl:hover{border-color:var(--sage-2)}
  .tpl.sel{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,var(--surface))}
  .tpl .tl{display:block;font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
  .tpl .tv{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
  .seg2{display:inline-flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface)}
  .seg2 button{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;color:var(--ink-3);padding:9px 16px;cursor:pointer;transition:background .12s,color .12s}
  .seg2 button.on{background:var(--sage);color:#fff}
  .seg2 button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .seg2 button .ct{font-size:11px;font-weight:800;opacity:.7}
  /* Projects toolbar */
  .pjbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 20px;flex-wrap:wrap;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:58px}
  .pjbar-r{display:flex;align-items:center;gap:10px}
  .pjbar{position:relative;z-index:20}
  .filtwrap{position:relative;z-index:30}
  .filtmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:80;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -20px rgba(0,0,0,.55);padding:6px;min-width:190px}
  .filtmenu[hidden]{display:none}
  .filtmenu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:13px;font-weight:600;color:var(--ink);border:0;background:transparent;padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left}
  .filtmenu button:hover{background:var(--surface)}
  .filtmenu button.on{color:var(--sage)}
  /* The tick used to be the last child; with a count beside it the marker moves
     onto the label so the number keeps the right-hand column to itself. */
  .filtmenu button.on>span:first-child::after{content:" ✓";font-weight:800}
  .filtmenu .fcount{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--surface);border-radius:20px;padding:1px 8px;min-width:22px;text-align:center}
  .filtmenu button.on .fcount{color:var(--sage);background:color-mix(in srgb,var(--sage) 14%,transparent)}
  .filtmenu .fcount.zero{opacity:.45}
  .pctwrap{display:flex;align-items:center;gap:6px}
  .pctwrap input{width:96px;text-align:right}
  .pctwrap span{font-size:15px;font-weight:700;color:var(--ink-3)}
  .rcecon-live{font-size:13px;color:var(--ink-2);line-height:1.5;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:11px}
  .rcecon-live b{color:var(--pos);font-weight:750}.rcecon-live i{color:var(--warn);font-style:normal;font-weight:750}
  .rcbasis{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;background:transparent;overflow:visible}
  .rcbasis button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:11px 14px;border:1.5px solid var(--line);border-radius:13px;background:var(--surface);cursor:pointer;transition:.12s}
  .rcbasis button:hover{border-color:var(--ink-3)}
  .rcbasis button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
  .rcbasis .rb-t{font-size:13.5px;font-weight:700;color:var(--ink)}
  .rcbasis .rb-s{font-size:11px;color:var(--ink-3);line-height:1.35}
  .rcecon-live .g{color:var(--ink)}
  /* Project modal — icon picker + opening-balance box */
  .iconpick{display:flex;gap:6px;flex-wrap:wrap;max-width:260px}
  .iconpick button{width:36px;height:36px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
  .iconpick button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .iconpick button.sel{border-color:var(--sage);color:var(--ink);background:color-mix(in srgb,var(--sage) 12%,var(--surface))}
  /* Icon picker button + gallery */
  .iconpickbtn{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0;cursor:pointer;transition:border-color .12s}
  .iconpickbtn:hover{border-color:var(--sage)}
  .iconpickbtn .cur{width:100%;height:100%;display:grid;place-items:center;border-radius:11px;color:var(--sage)}
  .iconpickbtn .cur svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ig-swatches{display:flex;gap:9px;flex-wrap:wrap;margin:6px 0 6px}
  .ig-swatches .swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px var(--line) inset}
  .ig-swatches .swatch.sel{border-color:var(--paper);box-shadow:0 0 0 2px var(--ink)}
  .icongrid{margin-top:6px;max-height:360px;overflow-y:auto;padding:2px}
  .icongrid .ig-cat{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:14px 2px 8px}
  .icongrid .ig-cat:first-child{margin-top:2px}
  .icongrid .ig-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:9px}
  .icongrid button{aspect-ratio:1;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;color:var(--ink-2);transition:border-color .12s,background .12s,color .12s}
  .icongrid button:hover{border-color:var(--sage-2);color:currentColor}
  .icongrid button.sel{border-color:currentColor;background:color-mix(in srgb,currentColor 14%,var(--surface));color:currentColor}
  .icongrid button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .usedbox{margin-top:16px;border:1.5px dashed var(--line);border-radius:12px;padding:12px 14px;background:var(--line-2)}
  .ub-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
  .ub-head .bi{width:15px;height:15px}
  .fldhint{font-size:10.5px;color:var(--ink-3);margin-top:3px}
  .ub-preview{margin-top:11px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:9px}
  .ub-preview b{color:var(--ink);font-weight:750}
  /* Rate cards filter bar — boxed like the timesheets reference bar */
  .rcbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 20px;flex-wrap:wrap;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:58px}
  .rcactions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .rcfilter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
  .rcfilter .rc-dim{flex:0 0 auto}
  .rc-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
  .rcfilter .rf{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:4px 13px 4px 5px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--box3d);transition:border-color .12s,color .12s}
  .rcfilter .rf:hover{border-color:var(--sage-2);color:var(--ink)}
  .rcfilter .rf.on{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,var(--paper));color:var(--ink)}
  .rcfilter .rf .av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  .rcfilter .rf .rfic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--sage) 14%,var(--surface));color:var(--sage);flex:0 0 auto}
  .rcfilter .rf .rfic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .rcfilter .rf.all{padding:6px 14px}
  /* Rate cards as payment-style cards */
  .rcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  /* Availability heatmap */
  .avmonth{font-size:15px;font-weight:800;min-width:170px;text-align:center}
  .avnav{padding:6px 14px;font-size:16px}
  .avlegend{display:flex;gap:14px;font-size:11px;color:var(--ink-3);align-items:center}
  .avlegend .al{display:inline-flex;align-items:center;gap:6px}
  .avlegend .al::before{content:"";width:10px;height:10px;border-radius:3px}
  .avlegend .al.vacation::before{background:var(--sage)}.avlegend .al.sick::before{background:var(--danger)}.avlegend .al.busy::before{background:var(--warn)}.avlegend .al.other::before{background:var(--ink-3)}
  .heatwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
  .heatmap{min-width:max-content}
  .hrow{display:grid;grid-template-columns:190px repeat(var(--days,31),minmax(20px,1fr));align-items:stretch}
  .hrow.hhead{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line)}
  .hrow:not(:last-child):not(.hhead){border-bottom:1px solid var(--line-2)}
  .hcell{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink-3)}
  .hcell.hname{justify-content:flex-start;gap:9px;padding:9px 12px;font-size:12.5px;font-weight:650;color:var(--ink);position:sticky;left:0;background:var(--paper);z-index:1;border-right:1px solid var(--line)}
  .hhead .hname{background:var(--surface)}
  .hcell.hname .av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--sage);overflow:hidden}
  .hcell.hname .av img{width:100%;height:100%;object-fit:cover}
  .hcell.hname .hnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hcell.hd{padding:7px 0;font-weight:700}
  .hcell.day{height:34px;border-left:1px solid var(--line-2)}
  .hcell.we{background:color-mix(in srgb,var(--ink-3) 7%,transparent)}
  .hcell.today{box-shadow:0 0 0 2px var(--sage) inset;color:var(--sage);font-weight:800}
  .hcell.day.abs.vacation{background:var(--sage)}.hcell.day.abs.sick{background:var(--danger)}.hcell.day.abs.busy{background:var(--warn)}.hcell.day.abs.other{background:var(--ink-3)}
  .hcell.day[data-ce]{cursor:pointer;position:relative}
  .hcell.day[data-ce]:hover{box-shadow:0 0 0 2px var(--sage) inset}
  .hcell.day.hastask::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 1.5px var(--paper)}
  .hcell.day.abs.hastask::after{background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.25)}
  .absmenu{position:fixed;z-index:120;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--box3d);padding:6px;min-width:152px;animation:pop .14s ease-out}
  .absmenu .am-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px 8px}
  .absmenu .am-i{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink-2);padding:8px;border-radius:8px;cursor:pointer;text-align:left}
  .absmenu .am-i:hover{background:var(--surface);color:var(--ink)}
  .absmenu .am-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
  .absmenu .am-i.vacation .am-dot{background:var(--sage)}.absmenu .am-i.sick .am-dot{background:var(--danger)}.absmenu .am-i.busy .am-dot{background:var(--warn)}.absmenu .am-i.other .am-dot{background:var(--ink-3)}
  .absmenu .am-i.clear{color:var(--danger);justify-content:center;margin-top:3px;border-top:1px solid var(--line-2);border-radius:0}
  /* Planner post-its — colours derive from a single hue mixed with the theme's
     paper/ink, so they read right in both light and dark automatically. */
  .tasksec{margin-top:30px}
  .tasksec-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
  .tasksec-head .ts-title{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:750}
  .tasksec-head .ts-title svg{width:18px;height:18px;fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ts-filter{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
  .ts-filter button{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:5px 12px;border-radius:7px;cursor:pointer}
  .ts-filter button.on{background:var(--paper);color:var(--ink);box-shadow:var(--box3d)}
  .tasksec-head .btn{margin-left:auto}
  .taskwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}
  .pi-amber{--pi-h:#e0a92b}.pi-rose{--pi-h:#e0607a}.pi-sage{--pi-h:#5f9e86}.pi-sky{--pi-h:#4d90d0}.pi-violet{--pi-h:#8a6fd0}.pi-slate{--pi-h:#7c8b9c}
  .postit{position:relative;--pi-bg:color-mix(in srgb,var(--pi-h) 20%,var(--paper));--pi-bd:color-mix(in srgb,var(--pi-h) 40%,var(--paper));--pi-ink:color-mix(in srgb,var(--pi-h) 46%,var(--ink));border-radius:14px;padding:16px 16px 14px;min-height:126px;cursor:pointer;background:var(--pi-bg);border:1px solid var(--pi-bd);box-shadow:var(--box3d);display:flex;flex-direction:column;gap:7px;transition:transform .14s,box-shadow .14s}
  .postit:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(18,22,18,.4)}
  .postit .pi-req{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:10px;font-weight:700;color:var(--pi-ink);background:color-mix(in srgb,var(--pi-ink) 15%,transparent);border-radius:20px;padding:3px 9px 3px 7px;margin-bottom:1px}
  .postit .pi-req svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .postit.unassigned-req{box-shadow:var(--box3d),0 0 0 1.5px color-mix(in srgb,var(--pi-h) 55%,transparent)}
  .postit .pi-title{font-size:14.5px;font-weight:700;color:var(--pi-ink);line-height:1.3;word-break:break-word;padding-right:26px}
  .postit .pi-note{font-size:12.5px;color:var(--pi-ink);opacity:.72;line-height:1.4;word-break:break-word;position:relative;max-height:118px;overflow:hidden}
  .postit .pi-note::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(transparent,var(--pi-bg));pointer-events:none}
  .postit .pi-note ul,.postit .pi-note ol{margin:2px 0;padding-left:17px}
  .postit .pi-note li{margin:1px 0}
  .postit .pi-note p{margin:3px 0}
  .postit .pi-note br{line-height:1}
  .postit .pi-foot{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px}
  .postit .pi-av{width:24px;height:24px;border-radius:50%;font-size:9.5px;font-weight:700;color:#fff;background:var(--sage);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
  .postit .pi-av img{width:100%;height:100%;object-fit:cover}
  .postit .pi-due{font-size:11px;font-weight:700;color:var(--pi-ink);background:color-mix(in srgb,var(--pi-ink) 14%,transparent);padding:3px 9px;border-radius:20px}
  .postit .pi-due.over{color:#fff;background:var(--danger)}
  .postit .pi-check{position:absolute;top:11px;right:11px;width:22px;height:22px;border-radius:7px;border:1.7px solid var(--pi-bd);background:color-mix(in srgb,var(--paper) 55%,transparent);display:grid;place-items:center}
  .postit .pi-check svg{width:13px;height:13px;fill:none;stroke:var(--pi-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
  /* Neutral dashboard post-its — no colour tint so they blend with the overview */
  .postit.dtask{--pi-h:var(--ink-3);background:var(--paper);border:1px solid var(--line);box-shadow:var(--box3d)}
  .postit.dtask .pi-title{color:var(--ink)}
  .postit.dtask .pi-due{color:var(--ink-2);background:var(--surface)}
  .postit.dtask .pi-due.over{color:#fff;background:var(--danger)}
  .postit.done{opacity:.6}
  .postit.done .pi-title{text-decoration:line-through}
  .postit.done .pi-check{background:var(--pi-ink);border-color:var(--pi-ink)}
  .postit.done .pi-check svg{stroke:var(--pi-bg);opacity:1}
  .swatches{display:flex;gap:9px}
  .swatches .sw{width:30px;height:30px;border-radius:9px;cursor:pointer;background:var(--pi-h);border:2px solid transparent;padding:0;transition:transform .12s,border-color .12s}
  .swatches .sw.on{border-color:var(--ink);transform:scale(1.1)}
  .taskdone-row{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
  .taskdone-row input{width:17px;height:17px}
  /* ── Custom select + zen calendar + done toggle (reusable, app design) ─────── */
  .csel{position:relative}
  .csel-btn{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:9px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:border-color .13s,box-shadow .13s}
  .csel-btn:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .csel.open .csel-btn{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
  .csel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .csel-btn .csel-chev,.csel-btn .csel-cal{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .csel-chev{transition:transform .16s}
  .csel.open .csel-chev{transform:rotate(180deg)}
  .csel-clear{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;color:var(--ink-3)}
  .csel-clear:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
  .csel-clear svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .csel-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:140;background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:var(--box3d),0 20px 40px -20px rgba(0,0,0,.5);padding:6px;max-height:280px;overflow-y:auto;animation:pop .14s ease-out}
  .csel-pop[hidden]{display:none}
  .csel-grp{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:9px 10px 4px}
  .csel-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--ink)}
  .csel-opt:hover{background:var(--surface)}
  .csel-opt.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:650}
  .csel-opt .oav{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--sage)}
  .csel-opt .onm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .csel-opt .ochk{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
  .csel-opt.on .ochk{opacity:1}
  /* The calendar is floated with position:fixed and right:auto, which leaves its
     width to the content — the 7-column grid then collapsed and the popup drifted
     off to one side instead of sitting under its field. It needs a fixed width
     (the same 268px the placement maths assumes) and room for a whole month. */
  .calpop{padding:12px;width:268px;max-height:none;overflow:visible}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .cal-title{font-size:13.5px;font-weight:750}
  .cal-nav{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:9px;cursor:pointer;color:var(--ink-2);font-size:16px;line-height:1;display:grid;place-items:center;transition:.12s}
  .cal-nav:hover{border-color:var(--accent);color:var(--accent)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-dow{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding-bottom:3px}
  .cal-day{aspect-ratio:1;display:grid;place-items:center;font-size:12.5px;color:var(--ink-2);border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.1s}
  .cal-day:hover{background:var(--surface);border-color:var(--line)}
  .cal-day.pad{visibility:hidden;cursor:default}
  .cal-day.today{color:var(--accent);font-weight:750}
  .cal-day.sel{background:var(--accent);color:var(--paper);font-weight:700;border-color:var(--accent)}
  .cal-foot{display:flex;justify-content:flex-end;margin-top:8px}
  .cal-clear{border:0;background:none;color:var(--ink-3);font:inherit;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:6px}
  .cal-clear:hover{color:var(--danger)}
  .donetoggle{display:inline-flex;align-items:center;gap:10px;margin-top:16px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:9px 14px 9px 10px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.13s}
  .donetoggle:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .donetoggle .dt-box{width:22px;height:22px;flex:0 0 auto;border:1.8px solid var(--line);border-radius:7px;display:grid;place-items:center;background:var(--paper);transition:.13s}
  .donetoggle .dt-box svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
  .donetoggle[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .donetoggle[aria-pressed="true"] .dt-box{background:var(--accent);border-color:var(--accent)}
  .donetoggle[aria-pressed="true"] .dt-box svg{opacity:1}
  /* Zen calendar replaces every native date input, everywhere */
  .zendate{flex:1 1 auto;min-width:0}
  .zendate .csel-btn{width:100%}
  .zendate .csel-pop{right:auto;min-width:252px}
  /* Accent highlight picker (mirrors the lounge tint) */
  .pf-tint{margin-top:18px}
  .swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;transition:transform .12s,border-color .12s}
  .swatch:hover{transform:scale(1.08)}
  .swatch.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 30%,transparent)}
  .thseg{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:3px;margin-top:8px}
  .thseg button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:650;padding:7px 14px;border-radius:9px;cursor:pointer}
  .thseg button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .thseg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  /* Button "working" spinner + hit feedback */
  @keyframes bspin{to{transform:rotate(360deg)}}
  .btn.working{opacity:.92;pointer-events:none}
  .btn.working::before{content:"";width:14px;height:14px;margin-right:8px;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:currentColor;border-radius:50%;display:inline-block;animation:bspin .55s linear infinite;vertical-align:-2px}
  .btn.ok::after{content:"✓";margin-left:7px;font-weight:800}
  .pr-samepayer{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:13px;color:var(--ink-2);cursor:pointer}
  .pr-samepayer input{margin-top:2px;flex:0 0 auto;accent-color:var(--sage)}
  .pr-samepayer em{color:var(--ink-3);font-style:normal}
  @media(max-width:1024px){.rcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){.rcgrid{grid-template-columns:1fr}}
  .mastercard{position:relative;aspect-ratio:1.586/1;border-radius:18px;padding:22px 24px;color:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 44px -22px rgba(0,0,0,.55);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
  .mastercard:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
  .mastercard::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 82% -12%,rgba(255,255,255,.18),transparent 58%);pointer-events:none}
  .mastercard .mc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative;z-index:1}
  .mastercard .mc-proj{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:700;letter-spacing:.04em;opacity:.95;line-height:1.25;min-width:0}
  .mastercard .mc-proj b{font-weight:750;text-transform:uppercase;font-size:13px}
  .mastercard .mc-proj .mc-projname{font-size:11px;font-weight:500;opacity:.78;text-transform:none;letter-spacing:.02em}
  .mastercard .mc-chip{width:44px;height:33px;border-radius:6px;flex:0 0 auto;background:linear-gradient(135deg,#f0d489,#c99a3d);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
  .mastercard .mc-chip::before{content:"";position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,.22);border-radius:3px}
  .mastercard .mc-mid{margin-top:auto;position:relative;z-index:1}
  .mastercard .mc-tier{display:flex;flex-direction:column;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.28)}
  .mastercard .mc-tier .mc-num{font-family:var(--mono);font-size:38px;font-weight:700;letter-spacing:.01em}
/* Revolut-style: you see WHO the card is for, but the figures are blurred until revealed */
.mastercard.blur .mc-num,.mastercard.blur .mc-basis,.mastercard.blur .mc-sub{filter:blur(8px);user-select:none;transition:filter .18s}
.mastercard:not(.blur) .mc-num,.mastercard:not(.blur) .mc-basis,.mastercard:not(.blur) .mc-sub{transition:filter .18s}
  .mastercard .mc-tier .mc-unit{font-size:13px;font-weight:600;opacity:.82;margin-top:4px;letter-spacing:.03em}
  .mastercard .mc-basis{display:block;font-size:12px;opacity:.8;margin-top:5px;letter-spacing:.02em}
  .mastercard .mc-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:16px;position:relative;z-index:1}
  .mastercard .mc-nm{font-size:14.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .mastercard .mc-sub{font-size:11.5px;opacity:.8;margin-top:3px;font-variant-numeric:tabular-nums}
  .mastercard .mc-logo{width:52px;height:auto;opacity:.9;flex:0 0 auto}
  .mastercard .mc-logo .mark{fill:#fff}
  .mastercard.big{aspect-ratio:1.586/1;width:min(400px,86vw);cursor:default;box-shadow:0 30px 70px -26px rgba(0,0,0,.7)}
  .mastercard.big:hover{transform:none}
  /* Rate card detail overlay — split screen: card left, info right */
  #rcDetail .rcd-wrap{width:min(880px,94vw);display:flex;flex-direction:row;gap:26px;align-items:stretch}
  #rcDetail .rcd-left{flex:0 0 auto;display:flex;align-items:flex-start}
  #rcDetail .rcd-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;justify-content:center}
  @media(max-width:760px){#rcDetail .rcd-wrap{flex-direction:column;width:min(460px,92vw);align-items:center}#rcDetail .rcd-right{width:100%}}
  #rcDetail .rcd-panel{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:6px 4px}
  #rcDetail .rcd-row{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-2);font-size:14px}
  #rcDetail .rcd-row:last-child{border-bottom:0}
  #rcDetail .rcd-row .k{color:var(--ink-3)}
  #rcDetail .rcd-row .v{font-weight:700;font-variant-numeric:tabular-nums}
  #rcDetail .rcd-row .v.pay{color:var(--warn)}#rcDetail .rcd-row .v.keep{color:var(--pos)}
  #rcDetail .rcd-sep{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);padding:14px 16px 6px;border-top:1px solid var(--line);margin-top:2px}
  #rcDetail .rcd-actions{display:flex;gap:10px}
  /* Rate card table (grouped) — legacy */
  .rctable th.num,.rctable td.num{text-align:right}
  .rctable tr.rcgroup td{background:var(--surface);font-weight:750;border-top:2px solid var(--line)}
  .rctable tr.rcgroup .rcg-name{font-weight:800}
  .rctable tr.rccons td{color:var(--ink-2);font-size:13px}
  .rctable tr.rccons .rcc-name{padding-left:16px;color:var(--ink)}
  .rctable td.pay{color:var(--warn);font-weight:700}
  .rctable td.keep{color:var(--pos);font-weight:700}
  .rctable .rcavatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;vertical-align:middle;margin-right:8px;background:var(--surface);border:1px solid var(--line);font-size:9px;font-weight:700;color:var(--ink-2);overflow:hidden;flex:0 0 auto}
  .rctable .rcavatar img{width:100%;height:100%;object-fit:cover;display:block}
  /* Signature preview in profile */
  .sigprev{width:100%;height:120px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;background:#fff;color:#6b7280;font-size:12px;overflow:hidden}
  .sigbtns{display:flex;flex-direction:row;gap:10px}
  .sigbtns .btn{flex:1;justify-content:center}
  .sigprev img{max-width:100%;max-height:100%;display:block}
  .rowbtn{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:19px;line-height:1;padding:2px 9px;border-radius:7px;letter-spacing:1px}
  .rowbtn:hover{background:var(--surface);color:var(--ink)}
  #rowmenu{position:fixed;z-index:50;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -20px rgba(0,0,0,.55);padding:6px;min-width:186px}
  #rowmenu[hidden]{display:none}
  #rowmenu button{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;text-align:left}
  #rowmenu button:hover{background:var(--surface)}
  #rowmenu button.danger{color:var(--danger)}
  #rowmenu button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  #rowmenu .sep{height:1px;background:var(--line-2);margin:4px 6px}
  /* Chic sign-in overlay — blurs the whole app behind until the session is verified. */
  .signin{width:100%;max-width:430px;text-align:center;background:rgba(18,20,24,.94);border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:48px 40px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);color:#fff}
  .signin .logo{width:230px;max-width:78%;height:auto;margin:0 auto 6px;display:block}
  .signin h1{font-size:22px;font-weight:680;margin:24px 0 6px;letter-spacing:-.01em;color:#fff}
  .signin p{color:rgba(255,255,255,.72);font-size:14px;margin:0 0 30px;line-height:1.55}
  .signin .go{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:15px;font-weight:600;color:#14161a;background:#fff;border:1px solid #fff;border-radius:12px;padding:14px 26px;text-decoration:none;transition:transform .12s,box-shadow .12s}
  .signin .go:hover{transform:translateY(-1px);background:#f0f0f0}
  .signin .foot{margin:26px 0 0;font-size:12px;color:rgba(255,255,255,.45)}
  /* ── Premium tiles ─────────────────────────────────────────────────────── */
  .card,.panel{position:relative;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 34px -24px rgba(0,0,0,.45)}
  .panel{background:var(--paper)}
  #seriesPanel{margin-bottom:18px}
  .series-card{padding:20px 22px}
  .series-head{display:flex;align-items:center;gap:12px;font-size:15px}
  .series-sub{font-size:13px;color:var(--ink-3);margin:10px 0 16px;line-height:1.55;max-width:70ch}
  .series-badge{font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:20px}
  .series-badge.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent)}
  .series-badge.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
  .series-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
  .series-tbl th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 14px 9px 0;border-bottom:1px solid var(--line)}
  .series-tbl th.n,.series-tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
  .series-tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line-2)}
  .series-tbl tr:last-child td{border-bottom:0}
  .series-tbl .mono{font-family:var(--mono);font-size:12.5px}
  .pipegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px;margin-bottom:8px}
  .pipecard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--box3d)}
  .pipecard .pipe-cur{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--sage);margin-bottom:10px}
  .pipecard .pipe-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 0;color:var(--ink-2)}
  .pipecard .pipe-row .pv{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
  .pipecard .pipe-row.over .pv{color:var(--danger)}
  .pipecard .pipe-tot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:12px;border-top:1px solid var(--line-2);font-size:14px;font-weight:800}
  .pipecard .pipe-tot .pv{font-variant-numeric:tabular-nums}
  .sec-head{display:flex;align-items:center;gap:13px;margin:26px 0 13px}
  /* Boxed work-bar variant (compensation) — matches the timesheets reference bar */
  .sec-head.compsec{margin:8px 0 18px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:58px;flex-wrap:wrap}
  .sec-head.compsec .compsearch{flex:1 1 240px;max-width:380px;height:42px;box-sizing:border-box}
  .sec-head:first-child{margin-top:0}
  .sec-head .txt{flex:1;min-width:0}
  .sec-head .tt{font-size:15px;font-weight:700;letter-spacing:-.005em;line-height:1.15}
  .sec-head .ss{font-size:12.5px;color:var(--ink-3);margin-top:2px}
  /* Compensation ↔ Timesheets toggle (equal halves) */
  .compsec{align-items:center}
  .compseg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:4px;box-shadow:var(--box3d)}
  .compseg button{flex:1;min-width:150px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;font:inherit;font-size:14px;font-weight:650;color:var(--ink-2);padding:10px 20px;border-radius:10px;cursor:pointer;transition:.14s}
  .compseg button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .compseg button:hover{color:var(--ink)}
  .compseg button.on{background:var(--accent);color:var(--paper);box-shadow:0 2px 8px -2px rgba(0,0,0,.32)}
  .compseg button .cnt{margin-left:3px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.6}
  .compseg button.on .cnt{opacity:.85}
  /* Consultant quick-filter chips */
  .docwho{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 14px}
  .docwho .dw{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font-size:12.5px;font-weight:600;transition:.13s}
  .docwho .dw:hover{border-color:color-mix(in srgb,var(--sage) 40%,var(--line));color:var(--ink)}
  .docwho .dw.on{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 13%,var(--surface));color:var(--ink)}
  .docwho .dw .av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;background:var(--sage);flex:0 0 auto}
  .docwho .dw.allp{padding:6px 14px}
  .ico-badge{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:var(--sage);
    background:linear-gradient(150deg,color-mix(in srgb,var(--sage) 24%,var(--surface)),var(--surface));
    border:1px solid color-mix(in srgb,var(--sage) 22%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .ico-badge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .btn .bi{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:6px}
  .tabs button .bi{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:7px}
  /* Premium drop zone */
  .drop{padding:26px;border-radius:16px;background:linear-gradient(165deg,color-mix(in srgb,var(--sage) 7%,var(--paper)),var(--paper))}
  .drop .ic{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--sage) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 20%,var(--line));color:var(--sage)}
  .drop .ic svg{width:24px;height:24px}
  .drop:hover{border-color:color-mix(in srgb,var(--sage) 45%,var(--line));transform:translateY(-1px);box-shadow:0 16px 34px -24px rgba(0,0,0,.5)}
  .drop,.card,.panel{transition:transform .14s,box-shadow .14s,border-color .14s}
  tbody tr{transition:background .12s}
  /* ── App shell: sidebar + main ─────────────────────────────────────────── */
  .shell{display:flex;min-height:100vh;position:relative;z-index:1}
  .side{width:250px;flex:0 0 auto;display:flex;flex-direction:column;padding:20px 15px;position:sticky;top:0;height:100vh;
    background:var(--paper);color:var(--ink);border-right:1px solid var(--line);box-shadow:6px 0 24px -18px rgba(20,24,28,.4)}
  .side .sbrand{display:flex;align-items:center;gap:12px;padding:6px 6px 4px}
  .side .sbrand .appicon{width:50px;height:50px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;background:#0d0d0d;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
  .side .sbrand .appicon svg{width:30px;height:auto}.side .sbrand .mark{fill:#fff}
  .side .sbrand .t{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
  .side .sbrand .t small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;margin-top:1px}
  .nav{display:flex;flex-direction:column;gap:3px;margin-top:22px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
  .nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:4px}
  .nav .lbl{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 6px}
  .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;user-select:none}
  .nav a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .nav a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
  .nav a.on{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
  .nav a.on svg{color:currentColor}
  /* Collapsible + pinnable nav */
  .nav a.nav-off{display:none}
  .nav .lbl{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11px}
  .nav .lbl .lbl-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav .lbl .lbl-chev,.nav .lbl .lbl-dots{flex:0 0 auto;opacity:0;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:6px;display:grid;place-items:center;transition:opacity .12s,background .12s}
  .nav .lbl:hover .lbl-dots{opacity:.6}
  .nav .lbl .lbl-chev{opacity:.85;color:var(--ink-2)}
  .nav .lbl.collapsed .lbl-chev{opacity:.95}
  .nav .lbl .lbl-chev{width:20px;height:20px}
  .nav .lbl .lbl-chev svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
  .nav .lbl:not(.collapsed) .lbl-chev svg{transform:rotate(90deg)}
  .nav .lbl .lbl-dots{font-size:17px;line-height:1;padding:0 4px;min-width:20px;height:20px}
  .nav .lbl .lbl-chev:hover,.nav .lbl .lbl-dots:hover{opacity:1;background:color-mix(in srgb,var(--ink) 8%,transparent)}
  .navpop .np-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;color:var(--ink-2);border:0;background:transparent;width:100%;text-align:left;font:inherit;font-size:13px}
  .navpop .np-item:hover{background:var(--surface)}
  .navpop .np-item .np-pin{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.5}
  .navpop .np-item.on{color:var(--ink)}
  .navpop .np-item.on .np-pin{fill:var(--sage);stroke:var(--sage)}
  .navpop{position:fixed;z-index:60;width:236px;max-height:70vh;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:0 24px 60px -16px rgba(0,0,0,.5);padding:10px;font-size:13px;animation:pop .15s ease-out}
  .navpop label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;color:var(--ink-2)}
  .navpop label:hover{background:var(--surface)}
  .navpop input{accent-color:var(--sage);flex:0 0 auto}
  .navpop .np-lbl{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px 4px}
  .navpop .np-sep{height:1px;background:var(--line);margin:6px 2px}
  .navpop .np-collapse{font-weight:700;color:var(--ink)}
  .side .foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid rgba(0,0,0,.09)}
  .side .foot .me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;border-radius:10px;padding:4px 6px;margin:-4px -6px;background:none;border:0;text-align:left;color:inherit}
  .side .foot .me:hover{background:rgba(0,0,0,.055)}
  .side .foot .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:var(--sage);overflow:hidden}
  .side .foot .av img{width:100%;height:100%;object-fit:cover}
  .side .foot .nm{font-size:13px;font-weight:600;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#16181c}
  .side .foot .rl{font-size:11px;color:#868c95}
  .side .foot .out{margin-left:auto;color:#868c95;cursor:pointer;background:none;border:0;padding:6px;border-radius:8px}
  .side .foot .out:hover{color:#16181c;background:rgba(0,0,0,.06)}.side .foot .out svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
  .main{flex:1;min-width:0;padding:24px 30px 90px;max-width:1140px;margin:0 auto;width:100%}
  .view[hidden]{display:none}
  /* Antigravity entrance — content floats up from the lower-right into place,
     staggered, every time a view is shown. */
  @keyframes floatIn{from{opacity:0;transform:translate(40px,60px) scale(.965)}to{opacity:1;transform:none}}
  .view:not([hidden])>*{animation:floatIn .62s cubic-bezier(.2,.9,.25,1) both}
  .view:not([hidden])>*:nth-child(1){animation-delay:.03s}
  .view:not([hidden])>*:nth-child(2){animation-delay:.10s}
  .view:not([hidden])>*:nth-child(3){animation-delay:.17s}
  .view:not([hidden])>*:nth-child(4){animation-delay:.24s}
  .view:not([hidden])>*:nth-child(5){animation-delay:.31s}
  .view:not([hidden])>*:nth-child(n+6){animation-delay:.38s}
  .hero{animation:floatIn .72s cubic-bezier(.2,.9,.25,1) both}
  .kpi{animation:floatIn .5s cubic-bezier(.2,.9,.25,1) both}
  .kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.10s}.kpi:nth-child(4){animation-delay:.15s}.kpi:nth-child(5){animation-delay:.20s}.kpi:nth-child(6){animation-delay:.25s}
  .ccard{animation:floatIn .48s cubic-bezier(.2,.9,.25,1) both}
  .ccard:nth-child(2){animation-delay:.04s}.ccard:nth-child(3){animation-delay:.08s}.ccard:nth-child(4){animation-delay:.12s}.ccard:nth-child(5){animation-delay:.16s}.ccard:nth-child(n+6){animation-delay:.2s}
  .modal{animation:floatIn .34s cubic-bezier(.2,.9,.25,1) both}
  @media(prefers-reduced-motion:reduce){.view:not([hidden])>*,.hero,.kpi,.ccard,.modal{animation:none}}
  .pagehead{display:none}
  /* ── Category menu bar (derived from consultant portal lnav) ─────────────────── */
  .lnav{display:flex;gap:5px;margin:10px 0 22px;padding:5px;background:var(--paper);border:1px solid var(--line);border-radius:15px;box-shadow:var(--box3d);overflow-x:auto}
  .lnav-i{flex:1 1 0;min-width:max-content;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 14px;border:0;background:none;border-radius:11px;color:var(--ink-2);font:inherit;font-size:14px;font-weight:650;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s}
  .lnav-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .lnav-i:hover{background:var(--surface);color:var(--ink)}
  .lnav-i.active{background:color-mix(in srgb,var(--sage) 15%,transparent);color:var(--sage)}
  /* ── Settings — left category rail + content cards ─────────────────────────── */
  .setwrap{display:flex;gap:22px;align-items:flex-start}
  .setnav{flex:0 0 216px;display:flex;flex-direction:column;gap:4px;padding:7px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--box3d);position:sticky;top:16px}
  .setnav-i{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-radius:11px;padding:11px 13px;font:inherit;font-size:14px;font-weight:650;color:var(--ink-2);cursor:pointer;transition:background .13s,color .13s}
  .setnav-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.85}
  .setnav-i:hover{background:var(--surface);color:var(--ink)}
  .setnav-i.active{background:var(--accent);color:var(--paper)}
  .setnav-i.active svg{opacity:1}
  .setnav-i[hidden]{display:none}
  .setpanes{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
  .setpane[hidden]{display:none}
  .setpane{display:flex;flex-direction:column;gap:18px}
  .set-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--box3d)}
  .set-h{font-size:15px;font-weight:750;color:var(--ink);margin:0 0 3px;letter-spacing:-.01em}
  .set-sub{font-size:12.5px;color:var(--ink-3);margin:0 0 18px;line-height:1.45}
  @media(max-width:820px){.setwrap{flex-direction:column}.setnav{flex-direction:row;flex-wrap:wrap;position:static;width:100%;flex-basis:auto}.setnav-i{flex:0 0 auto}}
  /* KPI stat cards */
  /* Torii-style dashboard overview row */
  .dashov{margin-bottom:24px;display:flex;flex-direction:column;gap:14px}
  .ovtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  .ovtile{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--box3d);transition:transform .14s cubic-bezier(.2,.9,.25,1)}
  .ovtile:hover{transform:translateY(-2px)}
  .ovt-ic{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;color:var(--sage);background:color-mix(in srgb,var(--sage) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 20%,var(--line))}
  .ovt-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ovt-b{min-width:0;flex:1}
  .ovt-n{font-size:25px;font-weight:760;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
  .ovt-l{font-size:12.5px;font-weight:650;color:var(--ink);margin-top:5px}
  .ovt-s{font-size:11px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ovweek{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;box-shadow:var(--box3d)}
  .ovw-h{display:flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
  .ovw-tot{margin-left:auto;font-size:14px;font-weight:760;letter-spacing:0;text-transform:none;color:var(--sage);font-variant-numeric:tabular-nums}
  .ovw-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
  .ovw-day{border:1px solid var(--line);border-radius:13px;padding:10px 6px;text-align:center;background:var(--paper)}
  .ovw-day.we{opacity:.6}
  .ovw-day.today{border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 14%,transparent)}
  .ovw-dow{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .ovw-dom{font-size:17px;font-weight:600;margin:2px 0 8px;color:var(--ink)}
  .ovw-day.today .ovw-dom{color:var(--sage)}
  .ovw-bar{height:40px;display:flex;align-items:flex-end;justify-content:center}
  .ovw-bar i{width:9px;border-radius:4px;background:var(--sage);min-height:4px;transition:height .2s}
  .ovw-day.we .ovw-bar i{background:var(--line)}
  .ovw-val{font-size:10.5px;color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
  /* Company-health hero — the calm top-line summary */
  .dhero{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
  .dh-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--box3d);transition:transform .16s cubic-bezier(.2,.9,.25,1),box-shadow .16s}
  .dh-card:hover{transform:translateY(-3px)}
  .dh-card.accent{background:color-mix(in srgb,var(--sage) 8%,var(--paper));border-color:color-mix(in srgb,var(--sage) 30%,var(--line))}
  .dh-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--sage);background:color-mix(in srgb,var(--sage) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 22%,var(--line));margin-bottom:14px}
  .dh-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .dh-val{font-size:29px;font-weight:780;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dh-lbl{font-size:12.5px;font-weight:650;color:var(--ink);margin-top:9px}
  .dh-sub{font-size:11.5px;color:var(--ink-3);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .dh-trend{display:inline-flex;align-items:center;gap:3px;font-weight:750;font-variant-numeric:tabular-nums}
  .dh-trend svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .dh-trend.up{color:var(--pos)}.dh-trend.down{color:var(--danger)}.dh-trend.flat{color:var(--ink-3)}
  .dh-warn{color:var(--danger);font-weight:700}
  /* Budget-health list */
  /* One roomy row per project instead of a grid of narrow tiles. A budget line
     is a name, a track and two figures — laid across the full width they are
     readable; squeezed into a 320px card they were not. Same shape language as
     Torii's timeline: badge, track with gridlines, bar. */
  .budgetlist{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--frame);box-shadow:var(--box3d)}
  .brow{display:grid;grid-template-columns:38px minmax(140px,1.1fr) 3fr minmax(150px,auto);align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .13s}
  .budgetlist>.brow:first-child{border-top:0}
  .brow:hover{background:color-mix(in srgb,var(--sage) 4%,transparent)}
  .brow .bic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
  .brow .bic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .brow .bnm{min-width:0}
  .brow .bnm b{display:block;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brow .bnm span{font-size:11.5px;color:var(--ink-3)}
  /* The track carries quarter gridlines so a bar can be read as a proportion
     without a number beside every one. */
  .btrack{position:relative;height:12px;border-radius:7px;background:color-mix(in srgb,var(--ink-3) 12%,var(--surface));overflow:hidden}
  .btrack>i{display:block;height:100%;border-radius:7px;background:var(--sage);transition:width .6s cubic-bezier(.2,.7,.2,1)}
  .brow.over .btrack>i{background:var(--danger)}
  .btrack .bgl{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
  .bfig{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .bfig b{font-size:14px;font-weight:700}
  .bfig span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
  .bfig .over{color:var(--danger);font-weight:650}
  @media(max-width:820px){
    .brow{grid-template-columns:38px 1fr;grid-auto-rows:auto;row-gap:9px}
    .brow .btrack,.brow .bfig{grid-column:1 / -1}
    .bfig{text-align:left}
  }
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:26px}
  .kpi{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px;position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;box-shadow:var(--box3d);transition:transform .14s cubic-bezier(.2,.9,.25,1),box-shadow .14s}
  .kpi:hover{transform:translateY(-2px)}
  .kpi .txt{flex:1;min-width:0}
  .kpi .ic{width:64px;height:64px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;color:var(--sage);background:color-mix(in srgb,var(--sage) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 22%,var(--line))}
  .kpi .ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .kpi .n{font-size:27px;font-weight:760;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #moneykpis .kpi .n{font-size:20px}
  .kpi .n.pay{color:#7d8bc0}.kpi .n.keep{color:var(--pos)}
  .kpi .k{font-size:12.5px;color:var(--ink-3);margin-top:6px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Mini bar chart */
  .chartwrap{overflow-x:auto;padding-top:4px}
  .axchart{min-width:min-content}
  .plotarea{position:relative;margin-left:36px}
  .plotarea .grid{position:absolute;inset:0}
  .plotarea .gl{position:absolute;left:0;right:0;border-top:1px solid var(--line-2)}
  .plotarea .gl.base{border-top:1.5px solid var(--line)}
  .plotarea .ylab{position:absolute;left:-36px;width:30px;text-align:right;font-size:10px;color:var(--ink-3);transform:translateY(-50%);font-variant-numeric:tabular-nums}
  .plotarea .bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:8px;padding:0 3px}
  .plotarea .bcol{flex:1;min-width:9px;display:flex;align-items:flex-end;justify-content:center}
  .plotarea .bar{width:100%;max-width:46px;border-radius:6px 6px 0 0;background:var(--sage);min-height:2px;transition:height .5s cubic-bezier(.2,.7,.2,1)}
  .plotarea .bar:hover{filter:brightness(1.08)}
  .plotarea .bar.today{background:color-mix(in srgb,var(--sage) 62%,var(--ink))}
  .xax{margin-left:36px;display:flex;gap:8px;padding:7px 3px 0}
  .xax .xl{flex:1;min-width:9px;text-align:center;font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
  /* Stacked money bars */
  .plotarea .mbar{width:100%;max-width:46px;display:flex;flex-direction:column-reverse;border-radius:6px 6px 0 0;overflow:hidden;background:var(--surface);min-height:2px}
  .plotarea .mbar:hover{filter:brightness(1.06)}
  .mseg{width:100%}
  .mseg.s-pay{background:#7d8bc0}
  .mseg.s-keep{background:var(--pos)}
  .mseg.s-tax{background:color-mix(in srgb,var(--ink-3) 50%,transparent)}
  .mlegend{display:flex;gap:18px;margin-top:14px;padding-left:36px;font-size:12px;font-weight:600;color:var(--ink-2)}
  .mlegend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
  .mlegend i.s-pay{background:#7d8bc0}.mlegend i.s-keep{background:var(--pos)}.mlegend i.s-tax{background:color-mix(in srgb,var(--ink-3) 50%,transparent)}
  /* Forecast (projected) money bars */
  .plotarea .mbar.fc{background:transparent;border:1.5px dashed color-mix(in srgb,var(--sage) 55%,var(--line));border-bottom:0;border-radius:6px 6px 0 0;opacity:.85}
  .xax .xl.fc{color:color-mix(in srgb,var(--sage) 65%,var(--ink-3));font-style:italic}
  .mlegend .fc{color:var(--ink-3)}
  .mlegend i.s-fc{background:transparent;border:1.5px dashed color-mix(in srgb,var(--sage) 55%,var(--line))}
  /* Cash-flow month strip (Torii "by week" adapted) */
  /* Table filter + pagination */
  .tfilter{margin-bottom:12px;max-width:360px}
  .pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)}
  .pager .pg{display:flex;gap:6px}
  .pager button{font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
  .pager button:disabled{opacity:.4;cursor:default}
  .pager button:not(:disabled):hover{color:var(--ink);border-color:var(--sage)}
  td.filler{height:49px;border-bottom:1px solid var(--line-2)}
  /* Projects */
  .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(410px,1fr));gap:36px 22px}
  .pgrid[hidden]{display:none}
  /* Figure-blur: money hidden until "Show figures" so screen-shares don't leak */
  .pgrid.hidefigs .figv{filter:blur(7px);user-select:none;transition:filter .18s;cursor:default}
  .pgrid.hidefigs .pcard:hover .figv{filter:blur(7px)}
  /* Project folder — a manila-folder metaphor in modern zen digital style. A grab
     tab (top-left) opens the folder; a company index-tab (top-right) labels it;
     the budget + metrics sit on the folder body. Complements the analog time card. */
  /* A sheet of paper: a clean letterhead zone up top, then faint ruled lines
     behind the body, a top sheen, and the existing folder tabs. */
  .pcard{position:relative;margin-top:24px;color:var(--ink);border:1px solid var(--line);border-radius:5px 5px 18px 18px;padding:24px 26px 22px;transition:transform .16s,box-shadow .16s,border-color .16s;
    background:linear-gradient(var(--paper) 0 0) 0 0/100% 96px no-repeat,repeating-linear-gradient(to bottom,transparent 0 27px,color-mix(in srgb,var(--sage) 6%,transparent) 27px 28px),var(--paper);
    box-shadow:var(--box3d),inset 0 1px 0 rgba(255,255,255,.45)}
  .pcard:hover{transform:translateY(-3px);box-shadow:var(--box3d),0 22px 46px -26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);border-color:color-mix(in srgb,var(--sage) 34%,var(--line))}
  /* grab tab — top-left, the calm sage fold that opens the project */
  .pcard .ptab{position:absolute;left:-1px;top:-25px;height:26px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;background:color-mix(in srgb,var(--sage) 12%,var(--paper));border:1px solid color-mix(in srgb,var(--sage) 26%,var(--line));border-bottom:0;border-radius:12px 14px 0 0;cursor:pointer;color:var(--ink);z-index:2;transition:filter .13s,transform .13s}
  .pcard .ptab:hover{filter:brightness(1.04)}
  .pcard .ptab .ptchev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .15s,opacity .15s}
  .pcard .ptab:hover .ptchev{transform:translateX(2px);opacity:1}
  /* company index tab — top-right, fixed width so every folder reads the same */
  .pcard .pco-tab{position:absolute;right:-1px;top:-25px;height:26px;width:55%;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;padding:0 15px;background:color-mix(in srgb,var(--sage) 12%,var(--paper));border:1px solid color-mix(in srgb,var(--sage) 24%,var(--line));border-bottom:0;border-radius:14px 12px 0 0;color:var(--sage);font-size:11.5px;font-weight:700;z-index:2}
  .pcard .pco-tab svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.85}
  .pcard .pco-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pcard .pco-tab.none{color:var(--ink-3);background:var(--surface);border-color:var(--line);font-weight:600}
  .pcard .phead{display:flex;align-items:center;gap:13px;margin-top:6px}
  .pcard .picon{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
  .pcard .picon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .pcard .picon.emoji{font-size:24px;line-height:1}
  .pcard .phbody{flex:1;min-width:0}
  .pcard .pn{min-width:0;font-size:19px;font-weight:760;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:44px}
  .pcard .pmeta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3);margin-top:4px;letter-spacing:.005em}
  .pcard .pmeta .pmeta-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pcard .pmeta .pctbadge{flex:0 0 auto;margin:0}
  .pbar{height:8px;border-radius:5px;background:color-mix(in srgb,var(--ink-3) 12%,var(--surface));overflow:hidden;margin:18px 0 11px}
  .pbar>i{display:block;height:100%;border-radius:5px;background:var(--sage);transition:width .6s cubic-bezier(.2,.7,.2,1)}
  .pcard.over .pbar>i{background:var(--danger)}
  .pcard .pfoot{display:flex;justify-content:space-between;font-size:12.5px;font-variant-numeric:tabular-nums}
  .pcard .pfoot .left{font-weight:750}.pcard.over .pfoot .left{color:var(--danger)}
  /* Metric strip inside a project card */
  .pcard .pmetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;padding-top:19px;border-top:1px solid var(--line-2)}
  .pcard .pm{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right}
  .pcard .pm .pl{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .pcard .pm .pl svg{width:13px;height:13px;opacity:.85;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .pcard .pm .pv{font-size:16px;font-weight:780;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .pcard .pm .pv.pos{color:var(--pos)}.pcard .pm .pv.neg{color:var(--danger)}
  .pcard.arch{opacity:.62}
  .pcard .pbadge{position:absolute;top:22px;right:56px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:6px;padding:3px 7px}
  .pcard .pbadge.vis.priv{color:var(--ink-2);background:color-mix(in srgb,var(--ink-2) 11%,transparent);border-color:color-mix(in srgb,var(--ink-2) 26%,transparent)}
  .pcard .pbadge.vis.intn{color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,transparent);border-color:color-mix(in srgb,var(--sage) 30%,transparent)}
  .pcard.arch .pbadge.vis{right:130px}
  .pcard .pmenu{position:absolute;top:16px;right:16px}
  .pcard.pinned{border-color:color-mix(in srgb,var(--sage) 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--sage) 30%,transparent)}
  .pcard .pinmark{position:absolute;top:20px;right:52px;width:24px;height:24px;display:grid;place-items:center;color:var(--sage)}
  .pcard .pinmark svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.2}
  .pcard .pctbadge{margin-left:auto;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2px 10px}
  .pcard.over .pctbadge{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
  .pcard .phead .pctbadge{align-self:flex-start;margin-right:30px}
  .pcard .pid{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--ink-3);opacity:.8;letter-spacing:.02em}
  /* Presence widget */
  /* Inside the hero, under the wordmark. Glass over a photo rather than a panel
     surface, because it sits on the image and has to stay legible on any of the
     banner choices. */
  .presence{position:absolute;top:74px;right:24px;z-index:3;display:flex;flex-direction:row;align-items:center;gap:7px;background:rgba(0,0,0,.34);backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 11px 4px 5px;box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
  .presence[hidden]{display:none}
  .presence .lbl{font-size:10px;font-weight:700;color:rgba(255,255,255,.86);text-transform:uppercase;letter-spacing:.09em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .presence .avs{display:flex;flex-direction:row}
  .presence .pav{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;background:var(--sage);border:2px solid rgba(255,255,255,.5);margin-left:-9px;position:relative}
  .presence .pav:first-child{margin-left:0}
  .presence .pav .g{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#3fb950;border:2px solid var(--paper);z-index:2}
  .presence .pav .tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(6px);background:var(--nav);color:#fff;font-size:11px;font-weight:500;white-space:nowrap;padding:7px 11px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;transform:translateY(-3px);z-index:6;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
  .presence .pav .tip b{display:block;font-weight:700;margin-bottom:1px}
  .presence .pav:hover{z-index:5}.presence .pav:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)}
  /* ── Expenses ─────────────────────────────────────────────────────────── */
  /* Bank reconciliation */
  .bkbar{display:flex;align-items:center;gap:12px;margin:4px 0 18px;flex-wrap:wrap}
  .bkspace{flex:1 1 auto}
  /* A zen dropdown behind an icon-labelled button, reusing the month-pop shell.
     Sort and group live here instead of eating the bar as segments. */
  .zpick{position:relative}
  .zpick .mp-pop{min-width:170px;width:auto;padding:6px}
  .zpick.open .mp-btn{border-color:var(--sage)}
  .mp-o{display:block;width:100%;text-align:left;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:0;border-radius:9px;padding:9px 11px;cursor:pointer}
  .mp-o:hover{background:var(--surface)}
  .mp-o.sel{color:var(--sage)}.mp-o.sel::after{content:" ✓";font-weight:800}
  .bkstatus{display:block;font-size:12px;color:var(--ink-3);margin:-8px 0 14px 2px}
  .bkstatus:empty{display:none}
  /* A candidate list that found nothing offers the next action instead of a
     dead sentence. */
  .bkc-empty{display:flex;align-items:center;gap:12px;padding:14px 16px}
  .bkc-empty svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
  .bkc-empty>div{flex:1;min-width:0}
  .bkc-empty b{display:block;font-size:13.5px;font-weight:650}
  .bkc-empty small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
  /* Admin cash overview — a row of stat tiles above the statement. */
  .bkhealth{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:4px 0 20px}
  .bkhealth[hidden]{display:none}
  .bkstat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--box3d)}
  .bkstat .k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
  .bkstat .v{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:-.01em}
  .bkstat .s{font-size:11px;color:var(--ink-3);margin-top:3px}
  /* The gap is the point — undocumented spending is a warning until it is zero. */
  .bkstat.gap .v{color:var(--warn)}
  .bkstat.gap.clear .v{color:var(--pos)}
  .bkstat.noise{opacity:.85}
  /* Card plumbing on a row, held out of the totals but still shown as evidence. */
  .nrow.is-noise{opacity:.5}
  .nrow.is-noise .ndue{color:var(--ink-3);font-weight:600}
  .ntag-noise{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
  /* The statement, in Torii's grouped-table shape: one bordered surface, group
     headers with a status dot, rows beneath. Same classes as torii.html so the
     two views stay one design rather than two that resemble each other. */
  /* A solid surface, not a wash. The rows read as one card with dividers, the
     way Torii's grouped table does — the old version inherited a stray .nb badge
     rule and looked half-transparent. */
  .ntable{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--box3d);background:var(--paper)}
  .ncat{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--surface);border-top:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  .ntable>.ncat:first-child{border-top:0}
  .ncat .dot{width:8px;height:8px;border-radius:50%;background:var(--sage)}
  .ncat .cn{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:600}
  .nrow{display:flex;align-items:center;gap:13px;padding:12px 18px;border-top:1px solid var(--line-2)}
  .nrow:hover{background:color-mix(in srgb,var(--sage) 5%,transparent)}
  /* Merchant monogram — the same colored badge Torii gives a project, so a
     statement is scanned by shape and colour before a single word is read. The
     colour is derived from the name, so "Microsoft" is always the same green. */
  .nmono{position:relative;overflow:hidden;width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:13px;font-weight:750;color:#fff;letter-spacing:.02em}
  .nmono.sm{width:26px;height:26px;border-radius:8px;font-size:10px}
  /* Expenses per-tab widgets strip */
  .expwidgets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 18px}
  .expwidgets:empty{display:none}
  .exw{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--box3d)}
  .exw-b{min-width:0;flex:1}
  .exw-ic{flex:0 0 auto;margin-left:auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--sage);background:color-mix(in srgb,var(--sage) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 22%,var(--line))}
  .exw-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .exw-v{font-size:22px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
  .exw-l{font-size:12px;font-weight:600;color:var(--ink-2);margin-top:2px}
  .exw-s{font-size:11px;color:var(--ink-3);margin-top:1px}
  @media(max-width:720px){.expwidgets{grid-template-columns:repeat(2,1fr)}}
  /* The initials sit underneath; a fetched logo lays over them on load, so there
     is never a blank badge while the proxy is thinking. */
  .nmono-fb{position:absolute;inset:0;display:grid;place-items:center}
  .nmono-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;background:#fff;opacity:0;transition:opacity .15s}
  .nmono-img.ok{opacity:1}
  .nmono-ic{width:20px;height:20px}
  /* Line icons draw with a white stroke; brand marks with a white fill. */
  .nmono-ic.is-line{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .nmono-ic.is-brand{fill:#fff;color:#fff}
  .nmono-ic.is-brand *{fill:#fff}
  .nrow.is-matched{opacity:.72}
  .nrow.is-matched .ntt{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
  .nrow.is-ignored{opacity:.5}
  .nbody{flex:1;min-width:0}
  .ntt{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nmeta{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .nmeta .nfx{color:var(--ink-3);opacity:.85}
  /* The amount leads the row — it is what a statement is about. Money out is
     ink, money in is the positive colour, so direction reads at a glance. */
  .ndue{font-size:15.5px;font-weight:750;font-variant-numeric:tabular-nums;flex:0 0 auto;text-align:right;letter-spacing:-.01em;color:var(--ink)}
  .ndue.pos{color:var(--pos)}
  .ndue small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);margin-top:2px;letter-spacing:0}
  .nmatched{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pos);display:inline-flex;align-items:center;gap:4px}
  .nmatched svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4}
  /* Icon-only actions, like Torii's row buttons — the label lives in the title. */
  .rowact{display:flex;gap:5px;flex:0 0 auto}
  .rowact button{width:30px;height:30px;border:1px solid var(--line);background:var(--frame);color:var(--ink-3);border-radius:9px;cursor:pointer;display:grid;place-items:center;transition:.13s}
  .rowact button:hover{border-color:var(--sage);color:var(--sage);transform:translateY(-1px)}
  .rowact button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .rowact button.is-book{background:var(--ink);border-color:transparent;color:var(--paper)}
  .rowact button.is-book:hover{opacity:.88;color:var(--paper)}
  /* An empty statement still renders its frame: a table that vanishes reads as
     broken, one that says it is empty reads as answered. */
  .nempty{padding:34px 18px;text-align:center;color:var(--ink-3);font-size:13px}
  .nempty svg{width:26px;height:26px;display:block;margin:0 auto 10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
  .bkstatus{font-size:12.5px;color:var(--ink-3)}
  .bklist{display:flex;flex-direction:column;gap:10px}
  .bkrow{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--box3d)}
  .bkrow.is-matched{border-color:color-mix(in srgb,var(--sage) 40%,var(--line))}
  .bkrow.is-ignored{opacity:.55}
  .bkmain{display:grid;grid-template-columns:88px minmax(0,1fr) auto auto;gap:14px;align-items:center}
  @media (max-width:760px){ .bkmain{grid-template-columns:1fr;gap:8px} }
  .bkdate{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .bkwho{min-width:0}
  .bkwho b{display:block;font-size:14.5px;font-weight:620;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bkwho small{font-size:12px;color:var(--ink-3)}
  /* The amount charged and, underneath, what actually left the account. Both
     are facts about the same payment and the bookkeeping needs each of them. */
  .bkamt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .bkamt b{display:block;font-size:16px;font-weight:600}
  .bkamt small{font-size:11.5px;color:var(--ink-3)}
  .bkamt .bkfx{font-size:11px;color:var(--ink-3);letter-spacing:.02em}
  .bkacts{display:flex;gap:7px;align-items:center}
  .bkb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--frame);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;transition:.14s;white-space:nowrap}
  /* Booking from the payment is the primary move on this list, so it leads. */
  .bkb.is-book{background:var(--accent);border-color:transparent;color:var(--paper);font-weight:650}
  .bkb.is-book:hover{filter:brightness(1.07)}
  .bkb:hover{border-color:var(--sage);color:var(--sage)}
  .bkb.on{border-color:var(--sage);color:var(--sage);background:color-mix(in srgb,var(--sage) 10%,transparent)}
  .bklink{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--sage)}
  .bkcands{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:7px}
  .bkc{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--frame)}
  .bkc-score{font-size:12px;font-weight:700;text-align:center;padding:3px 0;border-radius:6px;background:color-mix(in srgb,var(--sage) 16%,transparent);color:var(--sage)}
  .bkc-score.weak{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
  .bkc-w{min-width:0}
  .bkc-w b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bkc-w small{font-size:11.5px;color:var(--ink-3)}
  .bkempty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
  /* The split shares the page column with the hero banner and the tab bar, so
     the pair lines up with the banner above it instead of running past it.
     Two equal halves, and align-items:stretch keeps the document pane exactly
     as tall as the form beside it. */
  .expsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
  /* Third time this bites: a display value in a class outranks the UA rule for
     [hidden], so switching to Bank left the voucher form on screen underneath.
     Every tab panel in this view gets the guard, not just the one that broke. */
  #expNew[hidden],#expBook[hidden],#expBank[hidden],#expReport[hidden]{display:none}
  @media (max-width:900px){ .expsplit{grid-template-columns:1fr} }
  /* The pane is a FIXED-height viewer, not a box that tracks its contents.
     Both panels therefore start the same size, and adding booking lines grows
     the form downwards past a document that stays exactly where it was. */
  /* Both panes start the same height. The moment the FORM grows — a due date
     appears, a line is added — the pane is frozen at the height it already had
     (see exFreezePane), because a document viewer that stretches to match a
     form it has nothing to do with only pushes the receipt further away. */
  .exppane{position:relative;align-self:stretch;min-width:0;min-height:520px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--box3d);display:flex;flex-direction:column}
  /* Toolbar over the document: what is attached, and how to get rid of it. */
  /* The pane's two edges are one band each, and they must match: same height,
     same padding, same button metrics. They sit at opposite ends of the same
     rectangle, so any difference reads as a mistake rather than a variation. */
  .exptools,.exlink{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:54px;padding:10px 14px;box-sizing:border-box}
  .exptools{border-bottom:1px solid var(--line-2);background:var(--frame)}
  .exptools[hidden]{display:none!important}
  .ext-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .ext-size{flex:0 0 auto;font-size:11.5px;color:var(--ink-3)}
  /* 34px and an 10px radius in BOTH bars. The top bar was 30/9, the bottom
     38/11 — a difference you cannot name but can see the moment the pane has
     content at each end. */
  .ext-b{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;transition:.14s}
  .exlink .expact-io{height:34px;width:34px;border-radius:10px}
  .exlink .expact-io svg{width:15px;height:15px}
  .ext-b:hover{border-color:var(--sage);color:var(--sage)}
  .ext-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .ext-b.ext-x:hover{border-color:var(--rose,#c9695f);color:var(--rose,#c9695f)}
  .expdrop[hidden]{display:none!important}
  /* The frame fills the pane it sits in. It was floating in the middle with a
     wide dead margin all around, which made the panel look broken rather than
     inviting — and the whole panel IS the drop target, so it should look like
     it. Its own contents stay centred. */
  .expdrop{flex:1 1 auto;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:24px;text-align:center;cursor:pointer;color:var(--ink-3);border:1.6px dashed var(--line);border-radius:18px;margin:14px;transition:.16s}
  .expdrop:hover,.expdrop.over{border-color:var(--sage);color:var(--sage);background:color-mix(in srgb,var(--sage) 5%,transparent)}
  .expdrop svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .expdrop .ed-t{font-size:15px;font-weight:650;color:var(--ink-2)}
  .expdrop .ed-s{font-size:12.5px;max-width:280px;line-height:1.5}
  /* The pane sets the height, so the preview simply takes what is left between
     the toolbar and the read-out rather than sizing itself off the page shape. */
  .exppreview{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
  /* display:flex above outranks the UA rule for [hidden], so before a document
     is attached these two still claimed flex space and shoved the drop zone to
     the top of the pane. */
  .exppreview[hidden],.expreadout[hidden],.exptools[hidden]{display:none}
  /* Where the values came from. The page is an image so a box CAN be placed over
     it — coordinates inside a browser-rendered PDF are unreachable. */
  .exshot{flex:1 1 auto;min-height:0;overflow:auto;padding:14px}
  .exshot[hidden]{display:none}
  .exshot-stage{position:relative;display:inline-block;max-width:100%}
  .exshot-stage img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line-2)}
  .exshot-boxes{position:absolute;inset:0;pointer-events:none}
  /* Positioned in PERCENT of the page, so the overlay survives any zoom or
     container width without recomputing anything. */
  .exbox{position:absolute;border:1.5px solid var(--sage);border-radius:3px;
    background:color-mix(in srgb,var(--sage) 14%,transparent);pointer-events:auto;cursor:default;transition:.12s}
  .exbox:hover{background:color-mix(in srgb,var(--sage) 26%,transparent);border-color:var(--ink)}
  /* Low-confidence reads are marked rather than hidden: the point of showing the
     evidence is to make a doubtful one easy to catch. */
  .exbox.is-weak{border-color:var(--warn);border-style:dashed;background:color-mix(in srgb,var(--warn) 14%,transparent)}
  .exbox-tag{position:absolute;left:0;top:-17px;font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
    padding:1px 5px;border-radius:4px;background:var(--sage);color:var(--paper);white-space:nowrap}
  /* Fallback placements when the default would collide with a tag already set. */
  .exbox-tag.is-inside{top:1px;left:1px;opacity:.94}
  .exbox-tag.is-below{top:100%;margin-top:2px}
  /* The one under the cursor always wins the stack. */
  .exbox:hover{z-index:5}
  .exbox.is-weak .exbox-tag{background:var(--warn)}
  .exshot-note{font-size:11.5px;color:var(--ink-3);padding:0 14px 10px}
  /* Reading overlay. Sits ON the pane rather than replacing it, so a document
     already on screen stays visible underneath while a new one is read. */
  .exbusy{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(3px);animation:exFade .18s ease}
  .exbusy[hidden]{display:none}
  .exbusy-ring{position:relative;width:96px;height:96px;display:grid;place-items:center}
  .exbusy-arc{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
  .exbusy-arc circle{fill:none;stroke:currentColor;stroke-width:3}
  /* A three-quarter arc is the circumference minus a quarter: 2πr × .75 drawn,
     the rest left as the gap. The two rings turn opposite ways. */
  .exbusy-a{color:var(--sage);stroke-dasharray:207 69;animation:exSpin 1.5s linear infinite}
  .exbusy-b{color:color-mix(in srgb,var(--sage) 45%,transparent);stroke-dasharray:160 54;animation:exSpin 2.1s linear infinite reverse}
  .exbusy-disc{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--nav);
    box-shadow:0 2px 10px -2px rgba(0,0,0,.45);animation:exPulse 2.4s ease-in-out infinite}
  .exbusy-mark{width:28px;height:28px;display:block}
  /* Barely there, but it stops the middle from looking frozen while the rings
     turn around it. */
  @keyframes exPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  .exbusy-t{font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:.01em}
  @keyframes exSpin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){
    .exbusy-a,.exbusy-b{animation-duration:6s}
    .exbusy-disc{animation:none}
  }
  .exppreview iframe,.exppreview img{width:100%;height:100%;border:0;object-fit:contain;background:var(--surface);cursor:zoom-in}
  .expform{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--box3d)}
  .expform .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .expform .f3{display:grid;grid-template-columns:1.3fr .6fr 1.1fr;gap:12px}
  /* Grid children default to min-width:auto, so a select with a long option
     refuses to shrink and pushes out of the card. This is what made "Amount is"
     hang outside the panel. */
  .expform .f2 > *,.expform .f3 > *,.expform .field{min-width:0}
  .expform input,.expform select{max-width:100%}
  @media (max-width:900px){ .expform .f3{grid-template-columns:1fr 1fr} }
  @media (max-width:620px){ .expform .f2,.expform .f3{grid-template-columns:1fr} }
  .expform select{font:inherit;color:var(--ink);background:var(--frame);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;outline:none}
  .expform select:focus,.expform input:focus{border-color:var(--sage)}
  .exphint{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}
  .exphint:empty{display:none}
  .lb-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-3)}
  /* Payment type decides whether a due date is even meaningful, so it leads. */
  /* The two payment types are one either/or choice, so they sit side by side as
     equal halves rather than stacked as a list. */
  .expay{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
  @media (max-width:620px){ .expay{grid-template-columns:1fr} }
  .expay-o{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;text-align:left;
    background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;
    color:var(--ink-2);font:inherit;transition:.15s}
  .expay-o:hover{border-color:color-mix(in srgb,var(--sage) 45%,var(--line))}
  .expay-o.on{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 7%,var(--frame));color:var(--ink)}
  .expay-o b{display:block;font-size:13.5px;font-weight:650}
  .expay-o small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
  .expay-r{width:19px;height:19px;flex:0 0 auto;border-radius:50%;border:1.8px solid var(--line);position:relative}
  .expay-o.on .expay-r{border-color:var(--sage)}
  .expay-o.on .expay-r::after{content:'';position:absolute;inset:3.5px;border-radius:50%;background:var(--sage)}
  /* One booking line, framed so adding more later reads as repetition. */
  .expline{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--surface);margin-top:22px}
  .expline-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  /* display:flex outranks the UA rule for [hidden] — without this the pager
     header stayed visible with a single line, and its trash button then looked
     broken because there was nothing it was allowed to delete. */
  .expline-h[hidden]{display:none}
  .exline-nav,.exline-del{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink-3);cursor:pointer;transition:.13s}
  .exline-nav svg,.exline-del svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .exline-nav:hover:not(:disabled),.exline-del:hover{border-color:var(--sage);color:var(--sage)}
  .exline-nav:disabled{opacity:.35;cursor:default}
  .exline-del{margin-left:auto}
  .exline-del:hover{border-color:#e5484d;color:#e5484d}
  .expline-n{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
    background:var(--frame);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
  .expline .field input,.expline .zd-trigger{background:var(--frame)}
  .expform .field{margin-top:14px}
  .expform .field label{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  /* One height for every control in the form. The date field is a zen calendar
     button (42px) while the others were padding-sized (~45px), so a row of two
     came out visibly uneven. Fixing the height rather than the padding is what
     keeps them equal as fonts and zoom change. */
  .expform .field input,.expform .field select,.expform .zd-trigger,.expform .csel-btn{width:100%;box-sizing:border-box;height:44px;padding:0 14px;border-radius:12px;font-size:14px}
  .expline .zd-trigger{background:var(--frame)}
  /* The amount leads the line — it is what the voucher is about. */
  .exam{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .exam2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .exam2 > *,.exam2 .exam{min-width:0}
  .exam2 input{width:100%;box-sizing:border-box}
  @media (max-width:560px){ .exam2{grid-template-columns:1fr} }
  .exam-f label{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  /* VAT is derived from the account, never typed — shown as a result, not a
     field you can disagree with the ledger about. */
  .exam-in.is-derived{background:var(--surface);color:var(--ink-2);cursor:default}
  .exam{position:relative;align-items:stretch}
  .exam-in{flex:1;min-width:0;font-size:17px!important;font-weight:500;letter-spacing:0;
    padding:12px 52px 12px 14px!important;font-variant-numeric:tabular-nums}
  .exam-cur{position:absolute;right:13px;top:13px;font-size:12px;font-weight:700;color:var(--ink-3);pointer-events:none;letter-spacing:.04em}
  .exam-basis{display:block;width:100%;font-size:11.5px;color:var(--ink-3);margin-top:7px}
  .exam-basis:empty{display:none}
  /* Reuses .segbar from the timesheets bar so every toggle in the app is the
     same control, rather than a second one that merely looks similar. */
  /* "More fields" opens as an overlay rather than an inline accordion, so the
     actions never get pushed down the page while you fill it in. */
  .expaddr{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink-3);white-space:pre-line;padding:10px 13px;border-radius:11px;background:var(--surface);border:1px solid var(--line-2)}
  .expaddr:empty{display:none}
  .expline-add{margin-top:14px;display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 12px;border:1px dashed var(--line);border-radius:11px;background:none;color:var(--ink-3);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;transition:.15s}
  .expline-add:hover{color:var(--sage);border-color:var(--sage)}
  .expline-add svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .exlang{flex:0 0 auto;margin-right:0}
  /* In the working bar, EN/DA gets the same tall 3D button look as the state
     dropdown beside it — one control family, one size. */
  .tsbar .exlang{height:44px;box-sizing:border-box;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:4px;gap:3px;align-items:center;box-shadow:var(--box3d)}
  .tsbar .exlang button{height:100%;font-size:13.5px;font-weight:650;padding:0 16px;border-radius:8px;color:var(--ink-2)}
  .tsbar .exlang button.on{background:var(--accent);color:var(--paper);box-shadow:none}
  /* No per-tab shrinking any more: the expenses bar IS the timesheets bar, down
     to the pixel, so switching tabs does not resize the strip. The old override
     tightened everything here and made the two look like different components. */
  /* .segbar and .btn are inline-flex, which outranks the UA rule for [hidden] —
     the bar hides its per-tab controls through these. */
  .segbar[hidden],.tsbar .btn[hidden]{display:none}
  #view-expenses .exlang{padding:2px;border-radius:9px}
  #view-expenses .exlang button{padding:5px 9px;font-size:11px;border-radius:7px}
  .exlang button{padding:6px 10px;font-size:11.5px;letter-spacing:.04em}
  /* The shared overlay shell: "More fields" is gone, but the supplier editor and
     the bank-link picker are the same box. */
  .exmodal{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,var(--nav) 46%,transparent);
    backdrop-filter:blur(4px);display:grid;place-items:center;padding:22px;animation:exFade .16s ease}
  .exmodal.hidden{display:none}
  @keyframes exFade{from{opacity:0}to{opacity:1}}
  .exmodal-c{width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column;
    background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--box3d);
    overflow:hidden;animation:exRise .2s cubic-bezier(.2,.9,.25,1)}
  @keyframes exRise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
  .exmodal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}
  .exmodal-h h3{font-size:16px;font-weight:650;margin:0}
  .exmodal-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
    color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:.15s}
  .exmodal-x:hover{color:var(--sage);border-color:var(--sage)}
  .exmodal-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  .exmodal-b{padding:4px 20px 18px;overflow-y:auto}
  .exmodal-b .field{margin-top:14px}
  .exmodal-f{padding:14px 20px 18px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end}
  /* Receipt cards — the Torii project card shape: a tab carrying the state,
     then the body. Browsing receipts is a visual task, so this is the default
     and the table is there for comparing figures. */
  .ebviewbar{display:flex;justify-content:flex-end;margin:2px 0 14px}
  /* Receipt cards as restaurant "Bons": torn thermal tickets, three across. */
  .ebcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px;align-items:start}
  @media(max-width:1000px){.ebcards{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.ebcards{grid-template-columns:1fr}}
  /* The torn card is masked, and a mask CLIPS any filter/box-shadow drawn on the
     same element — that's why the Bon looked flat. So the elevation (hairline
     edge + drop-shadows) lives on an UNMASKED .bongwrap; the mask stays on .bong. */
  .bongwrap{filter:var(--bong-edge) var(--bong-sh);transition:filter .16s;cursor:pointer}
  .bongwrap:hover{filter:var(--bong-edge) var(--bong-sh-h)}
  .bong{--z:9px;position:relative;background:var(--paper);color:var(--ink);padding:15px 17px calc(13px + var(--z));cursor:pointer;
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000 25%,#000 0) 0 100%/calc(2*var(--z)) var(--z) repeat-x;
            mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000 25%,#000 0) 0 100%/calc(2*var(--z)) var(--z) repeat-x;
    transition:transform .16s}
  /* A defined, button-like lift. box-shadow can't follow the torn mask, so the
     shadow is layered drop-shadows (theme-aware); hover deepens it. */
  /* A hairline border that follows the torn silhouette: four 1px directional
     drop-shadows in the line colour (box-shadow/border are clipped by the mask;
     these aren't). Theme-aware via var(--line). Composed before the elevation. */
  :root{--bong-edge:drop-shadow(1px 0 0 var(--line)) drop-shadow(-1px 0 0 var(--line)) drop-shadow(0 1px 0 var(--line)) drop-shadow(0 -1px 0 var(--line));
        --bong-sh:drop-shadow(0 1px 1px rgba(20,24,28,.10)) drop-shadow(0 2px 3px rgba(20,24,28,.13)) drop-shadow(0 4px 7px rgba(20,24,28,.10));
        --bong-sh-h:drop-shadow(0 1px 2px rgba(20,24,28,.12)) drop-shadow(0 4px 6px rgba(20,24,28,.15)) drop-shadow(0 9px 14px rgba(20,24,28,.12))}
  @media(prefers-color-scheme:dark){:root{--bong-sh:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 5px 9px rgba(0,0,0,.5));
        --bong-sh-h:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 7px rgba(0,0,0,.6)) drop-shadow(0 10px 16px rgba(0,0,0,.55))}}
  :root[data-theme="dark"]{--bong-sh:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 5px 9px rgba(0,0,0,.5));
        --bong-sh-h:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 7px rgba(0,0,0,.6)) drop-shadow(0 10px 16px rgba(0,0,0,.55))}
  :root[data-theme="light"]{--bong-sh:drop-shadow(0 1px 1px rgba(20,24,28,.10)) drop-shadow(0 2px 3px rgba(20,24,28,.13)) drop-shadow(0 4px 7px rgba(20,24,28,.10));
        --bong-sh-h:drop-shadow(0 1px 2px rgba(20,24,28,.12)) drop-shadow(0 4px 6px rgba(20,24,28,.15)) drop-shadow(0 9px 14px rgba(20,24,28,.12))}
  .bongwrap:hover .bong{transform:translateY(-3px)}
  .bong-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.04em;color:var(--ink-3)}
  .bong-no{font-weight:700}
  .bong-st{text-transform:uppercase;font-weight:700;font-size:9.5px;letter-spacing:.06em}
  .bong.is-posted .bong-st{color:var(--pos)}
  .bong.is-reversed .bong-st,.bong.is-reversal .bong-st{color:var(--danger)}
  .bong-sup{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15.5px;font-weight:800;text-align:center;letter-spacing:-.01em;color:var(--ink);margin:9px 0 1px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bong-sub{text-align:center;font-size:10px;color:var(--ink-3);margin-bottom:4px}
  .bong-rule{border-top:1.5px dashed var(--line);margin:9px 0}
  .bong-line{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);padding:1.5px 0}
  .bong-line b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
  .bong-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:12.5px;color:var(--ink)}
  .bong-total b{font-size:15px;font-variant-numeric:tabular-nums}
  /* Printed "settled to" line: which account this receipt was booked against */
  .bong-book{text-align:center;font-size:10px;line-height:1.4;margin-top:10px;color:var(--ink-2)}
  .bong-book-l{color:var(--ink-3);letter-spacing:.03em}
  .bong-book-acc{display:block;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bong.is-posted .bong-book-l{color:var(--pos)}
  .bong-foot{display:flex;align-items:center;gap:10px;margin-top:11px}
  .bong-doc{flex:0 0 auto;color:var(--accent)}
  .bong-doc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .bong-code{flex:1;height:15px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,#0000 1px 3px,var(--ink) 3px 4px,#0000 4px 5px,var(--ink) 5px 7px,#0000 7px 10px);opacity:.5}
  /* Detail overlay: document left, booked values right — the voucher's split. */
  .ebdet{width:min(1000px,100%);max-height:90vh}
  .ebdet-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0;min-height:0;overflow:hidden}
  @media(max-width:820px){.ebdet-body{grid-template-columns:1fr}}
  .ebdet-doc{background:var(--surface);border-right:1px solid var(--line-2);min-height:340px;max-height:70vh;overflow:auto;display:flex;align-items:center;justify-content:center}
  .ebdet-doc iframe,.ebdet-doc img{width:100%;height:70vh;border:0;display:block;object-fit:contain}
  .ebdet-doc .none{color:var(--ink-3);font-size:13px;padding:30px}
  .ebdet-side{padding:18px 20px;overflow:auto;max-height:70vh}
  .ebdet-side .r{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
  .ebdet-side .r:last-child{border-bottom:0}
  .ebdet-side .r span{color:var(--ink-3)}
  .ebdet-side .r b{font-variant-numeric:tabular-nums;text-align:right}
  .ebdet-side .big{font-size:24px;font-weight:750;font-variant-numeric:tabular-nums;margin-bottom:4px}
  .exsup{display:flex;gap:8px;align-items:center}
  .exsup input{flex:1 1 auto;min-width:0}
  .exsup-add{flex:0 0 auto;height:44px;width:44px}
  /* Compact "Known / Verified" tag, inline in the supplier row. */
  .exsup-known{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--sage);background:color-mix(in srgb,var(--sage) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--sage) 30%,var(--line));border-radius:20px;padding:5px 10px;white-space:nowrap}
  .exsup-known svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .exsup-known[hidden]{display:none}
  .exsup-known:empty{display:none}
  /* Currency picker: the "DKK" badge is a real trigger (its .exam-cur base has
     pointer-events:none, so re-enable), and its popup reuses the zen dropdown. */
  .exam .excur-trig{pointer-events:auto;cursor:pointer;border:0;top:8px;right:8px;
    display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.03em;
    color:var(--sage);background:color-mix(in srgb,var(--sage) 11%,var(--surface));border-radius:8px;padding:5px 7px 5px 9px;transition:background .12s}
  .exam .excur-trig:hover{background:color-mix(in srgb,var(--sage) 20%,var(--surface))}
  .exam .excur-trig .excur-chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .14s;opacity:.85}
  .exam .excur-trig.open .excur-chev{transform:rotate(180deg)}
  .exam .excur-pop{left:auto;right:0;min-width:230px}
  /* Group the voucher form into paper blocks with small captions. */
  .expform .exblock{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:15px 16px 4px;margin-bottom:16px}
  .expform .exblock:last-of-type{margin-bottom:14px}
  .expform .exblock-h{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
  .expform .exblock .field:first-of-type{margin-top:0}
  .expform .exblock .expay{margin-bottom:14px}
  /* Zen scrollbars — thin, self-effacing, on the surfaces that actually scroll. */
  .exshot,.zd-pop,.excur-pop,.ebdet-side,.setpanes,.acc-members,.exlink-b2 .tablewrap,.tablewrap{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-3) 44%,transparent) transparent}
  .exshot::-webkit-scrollbar,.zd-pop::-webkit-scrollbar,.ebdet-side::-webkit-scrollbar,.setpanes::-webkit-scrollbar,.acc-members::-webkit-scrollbar,.tablewrap::-webkit-scrollbar{width:10px;height:10px}
  .exshot::-webkit-scrollbar-thumb,.zd-pop::-webkit-scrollbar-thumb,.ebdet-side::-webkit-scrollbar-thumb,.setpanes::-webkit-scrollbar-thumb,.acc-members::-webkit-scrollbar-thumb,.tablewrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 40%,transparent);border-radius:20px;border:2.5px solid transparent;background-clip:padding-box}
  .exshot::-webkit-scrollbar-thumb:hover,.zd-pop::-webkit-scrollbar-thumb:hover,.ebdet-side::-webkit-scrollbar-thumb:hover,.setpanes::-webkit-scrollbar-thumb:hover,.tablewrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-3) 62%,transparent);background-clip:padding-box}
  .exshot::-webkit-scrollbar-track,.zd-pop::-webkit-scrollbar-track,.ebdet-side::-webkit-scrollbar-track,.setpanes::-webkit-scrollbar-track,.tablewrap::-webkit-scrollbar-track{background:transparent}
  /* Setup steps. A numbered rail down the left so progress is a place you are
     in, not a percentage — and each step keeps its own state marker. */
  .rvsteps{display:flex;flex-direction:column;gap:2px}
  .rvstep{display:grid;grid-template-columns:30px 1fr;gap:13px;padding:14px 0;border-top:1px solid var(--line-2)}
  .rvsteps>.rvstep:first-child{border-top:0}
  .rvnum{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:750;background:var(--surface);border:1px solid var(--line);color:var(--ink-3)}
  .rvstep.done .rvnum{background:var(--pos);border-color:var(--pos);color:#fff}
  .rvstep.now .rvnum{background:var(--accent);border-color:var(--accent);color:var(--paper)}
  .rvnum svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .rvbody h4{margin:0 0 3px;font-size:14px;font-weight:680}
  .rvbody p{margin:0 0 9px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
  /* A value to copy into the other tab. Monospace, selectable, with its own
     copy button — retyping a redirect URI by hand is how setups fail. */
  .rvval{display:flex;align-items:center;gap:8px;margin:7px 0}
  .rvval code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:8px 11px}
  .rvcopy{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink-3);cursor:pointer;transition:.13s}
  .rvcopy:hover{border-color:var(--sage);color:var(--sage)}
  .rvcopy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .rvbody textarea{width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--frame);color:var(--ink);resize:vertical}
  .rvbody input[type=text]{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--frame);color:var(--ink)}
  .rvrow{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
  .rvok{font-size:12px;font-weight:650;color:var(--pos)}
  .rvfp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink-3)}
  .rvwarn{font-size:12px;line-height:1.55;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);border-radius:10px;padding:9px 11px;margin-top:8px}
  .rvbits{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);cursor:pointer}
  .rvbits input{margin:0}
  #pf_revwrap[hidden]{display:none}
  #pf_ownwrap[hidden]{display:none}
  .pf-hint{margin:0 0 9px;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
  #pf_ownwrap textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--frame);color:var(--ink);resize:vertical}
  #pf_ownwrap .expact-post{margin-top:9px}
  .exsupm{width:min(560px,100%)}
  .exsup-b{padding:6px 20px 20px}
  /* icon · field. The labels are gone: each icon already says what its line is,
     and the placeholder carries the detail, so a column of repeated words was
     only noise between the two. */
  .exsup-row{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;margin-top:10px;cursor:text}
  .exsup-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3);transition:.14s}
  .exsup-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .exsup-row input{width:100%;box-sizing:border-box;height:42px;padding:0 13px;border-radius:11px;font-size:14px}
  /* The icon lights up with the field it belongs to, so focus has one home. */
  .exsup-row:focus-within .exsup-ic{color:var(--sage);border-color:var(--sage);background:color-mix(in srgb,var(--sage) 10%,transparent)}
  .exsup-f{justify-content:space-between}
  /* What the document gave us, stated plainly, so a wrong pre-fill is obvious
     before it is saved into the register. */
  .exsup-src{padding:10px 13px;border-radius:11px;background:color-mix(in srgb,var(--sage) 8%,transparent);border:1px solid color-mix(in srgb,var(--sage) 24%,transparent);font-size:12px;line-height:1.5;color:var(--ink-2)}
  /* Sits at the foot of the pane, pushed there by the drop zone above it. */
  .exlink{justify-content:space-between;border-top:1px solid var(--line-2);background:var(--surface)}
  .exlink-state{font-size:12.5px;color:var(--ink-3)}
  .exlink-state.is-linked{color:var(--sage);font-weight:650}
  .exlinkm{width:min(880px,100%)}
  .exlink-bar{display:flex;align-items:center;gap:10px;padding:2px 20px 12px;flex-wrap:wrap}
  .exlink-bar .tfilter{margin:0;flex:1 1 240px;max-width:none}
  .exlink-bar .segbar{margin-right:0}
  .exlink-b2{padding-top:0}
  /* The paid amount leads, and the booked DKK figure sits under it with the rate
     that produced it — the two numbers are only trustworthy together. */
  .exlink-amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:650}
  .exlink-sub{display:block;font-size:11px;font-weight:500;color:var(--ink-3);margin-top:2px}
  .exlink-pick{padding:6px 12px;font-size:12.5px;font-weight:650;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);cursor:pointer;transition:.13s;white-space:nowrap}
  .exlink-pick:hover{border-color:var(--sage);color:var(--sage)}
  .exleave{width:min(460px,100%);text-align:center}
  .exleave .exmodal-b{padding:30px 28px 22px}
  .exleave h3{margin:0 0 8px;font-size:17px;font-weight:680}
  .exleave p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
  .exleave-ic{width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--sage) 12%,transparent);border:1px solid color-mix(in srgb,var(--sage) 30%,transparent);color:var(--sage)}
  .exleave-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .exleave-f{justify-content:space-between;gap:10px;flex-wrap:wrap}
  .exleave-r{display:flex;gap:8px}
  .excheck{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);margin-top:12px;cursor:pointer}
  .excheck input{width:auto;margin:0}
  .zd-search{padding:8px;border-bottom:1px solid var(--line-2)}
  .zd-search input{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);outline:none}
  .zd-search input:focus{border-color:var(--sage)}
  #exCatList{max-height:280px;overflow-y:auto}
  .zd-opt .zd-sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
  .zd-opt .zd-acc{flex:0 0 46px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sage);text-align:left}
  .zd-opt .zd-name{font-size:13.5px;font-weight:600;text-align:left}

  /* The split is shown, not just computed — an auditor's first question is how
     the VAT was arrived at, and the deductible share differs from the VAT. */
  .expcalc{display:flex;flex-direction:column;gap:0;margin-top:16px;padding:4px 16px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums}
  .expcalc:empty{display:none}
  .expcalc div{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2)}
  .expcalc div:last-child{border-bottom:0}
  .expcalc .k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}
  .expcalc .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
  .expcalc div.is-total{border-top:1.5px solid var(--line);border-bottom:0;margin-top:2px;padding-top:10px}
  .expcalc div.is-total .k{font-weight:700;color:var(--ink)}
  .expcalc div.is-total .v{font-size:19px;font-weight:700}
  .expcalc .v.muted{color:var(--ink-3);font-weight:600}
  .expactions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
  .expact-r{display:flex;align-items:center;gap:8px}
  /* Same shape language as .mp-btn in the bar above — 1px line, paper fill, 11px
     radius, the same soft shadow — so the form's controls and the page's
     controls read as one set rather than two designs meeting in the middle. */
  .expact-io,.expact-post{height:38px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:var(--box3d);transition:.13s;white-space:nowrap}
  .expact-io{width:38px;color:var(--ink-3)}
  /* The labelled twin, for a dialog footer where a bare icon would be a riddle.
     Same inverted fill, so "primary action" looks the same everywhere. */
  .expact-post{gap:8px;padding:0 15px;font-weight:650;background:var(--ink);border-color:transparent;color:var(--paper)}
  .expact-post:hover{border-color:transparent;opacity:.88}
  .expact-io svg,.expact-post svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .expact-io:hover,.expact-post:hover{border-color:var(--sage)}
  .expact-io.is-danger:hover{color:#e5484d;border-color:#e5484d}
  /* Posting is the one irreversible action here, so it is the one filled button:
     the same square as its neighbours, inverted. --ink and --paper swap with the
     theme, which makes it dark on a light page and white on a dark one without
     a second rule. */
  .expact-io.is-post{background:var(--ink);border-color:transparent;color:var(--paper)}
  .expact-io.is-post:hover{border-color:transparent;opacity:.88}
  /* Icon-only switches. The checkbox itself is hidden and its label is the
     button, so the control stays keyboard-reachable and screen-reader-correct. */
  .exvis-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .exbill-b{cursor:pointer}
  .exvis-h:focus-visible + .exbill-b{border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 18%,transparent)}
  /* Checked reads as ON: the accent fills the button rather than sitting beside
     it as a tick, because there is no label to tick. */
  .exvis-h:checked + .exbill-b{background:var(--accent);border-color:transparent;color:var(--paper)}
  .exlink-acts{display:flex;align-items:center;gap:8px}
  /* Linked is a state, so the link button shows it. */
  .exlink-b.is-on{background:var(--accent);border-color:transparent;color:var(--paper)}
  /* No rule between the line block and the fields below it: the line already
     sits in its own bordered box, so a second divider right under it was two
     separators in a row and a wasted band of height. */
  .expmore{margin-top:14px}
  .expmore .excheck{margin-top:14px}
  /* border-color was left at --accent from .btn, so a sage button carried a
     near-black rim that read as a rendering fault. */
  .btn.primary{background:var(--sage);border-color:var(--sage);color:#fff}
  .expreadout.is-uncertain{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 32%,transparent)}
  .exppane .expreadout{margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;font-size:12px;line-height:1.45}
  .expreadout{font-size:12.5px;color:var(--sage);background:color-mix(in srgb,var(--sage) 9%,transparent);border:1px solid color-mix(in srgb,var(--sage) 28%,transparent);border-radius:12px;padding:10px 13px;margin-bottom:16px;line-height:1.5}
  .expfilters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .expfilters input,.expfilters select{font:inherit;color:var(--ink);background:var(--frame);border:1px solid var(--line);border-radius:12px;padding:10px 13px;outline:none}
  .expfilters input:first-child{flex:1;min-width:220px}
  .tablewrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--box3d)}
  .etable{width:100%;border-collapse:collapse;font-size:13.5px}
  .etable th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
  .etable td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
  .etable tr:last-child td{border-bottom:0}
  .etable tr:hover td{background:var(--surface)}
  .etable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .etable .vno{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12.5px;white-space:nowrap}
  /* Receipts table — clickable rows opening the detail overlay */
  .etable .ebrow{cursor:pointer;transition:background .12s}
  .etable .ebdate{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
  .etable .ebgross{font-weight:650;color:var(--ink)}
  .ebvchip{display:inline-block;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:7px;background:color-mix(in srgb,var(--sage) 13%,var(--surface));color:var(--sage);white-space:nowrap}
  .ebvchip.draft{background:color-mix(in srgb,var(--ink-3) 13%,transparent);color:var(--ink-3)}
  .ebsupcell{display:flex;align-items:center;gap:10px;min-width:0}
  .ebsupt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .ebsupn{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ebsupd{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
  .ebdocbtn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--paper);border-radius:9px;cursor:pointer;color:var(--sage);box-shadow:var(--box3d);transition:.12s}
  .ebdocbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ebdocbtn:hover{background:var(--sage);color:var(--paper);border-color:var(--sage);transform:translateY(-1px)}
  .ebnodoc{color:var(--ink-3);opacity:.5}
  /* ── Kassenbuch — the receipts table styled as a ruled paper cash-book page.
     Fixed warm-paper inks (like the .bong tickets) so it stays a physical page
     in both themes: a real ledger is never dark. A red margin rule fences off
     the running number, faint column rules make the grid, and a bottom-ruled
     Summe line closes the book. */
  .ledgerwrap{overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
  /* Same neutral tone as the menu bar (--surface), theme-aware ink. Keeps the
     ledger character (serif title, red margin rule) without the warm cream. */
  .ledger{--lpaper:var(--surface);--link:var(--ink);--lmute:var(--ink-3);--lrule:var(--line);--lred:var(--danger);--lgreen:var(--accent);
    position:relative;color:var(--link);background:var(--lpaper);
    border:1px solid var(--line);border-radius:6px;padding:24px 28px 14px;
    box-shadow:var(--box3d)}
  .ledger-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-bottom:12px;margin-bottom:8px;border-bottom:2px solid var(--link)}
  .ledger-brand{display:flex;flex-direction:column;gap:2px}
  .ledger-kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--lmute);font-weight:700}
  .ledger-title{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:27px;font-weight:700;color:var(--link);line-height:1}
  .ledger-bal{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;margin-left:auto}
  .ledger-period{font-family:Georgia,serif;font-style:italic;font-size:14.5px;color:var(--lmute)}
  .ledger-total{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
  .lt-row{display:flex;align-items:baseline;gap:11px}
  .lt-lbl{font-family:Georgia,serif;font-style:italic;font-size:12px;color:var(--lmute)}
  .lt-amt{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:23px;font-weight:700;line-height:1;color:var(--link);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .lt-amt.out{color:var(--lred)}
  .lt-cur{font-family:Georgia,serif;font-size:13px;font-weight:600;color:var(--lmute)}
  /* Long ledgers scroll inside the page with the head-line balance always up top,
     and frozen column headers + Total row (the modern spreadsheet frozen panes). */
  .ledger-scroll{overflow:auto;max-height:64vh}
  .ledgertable{position:relative;width:100%;border-collapse:collapse;font-size:13px;color:var(--link)}
  .ledgertable thead th{font-family:Georgia,serif;font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;
    color:var(--link);padding:8px 11px;text-align:left;white-space:nowrap;background:var(--lpaper);
    border-right:1px solid var(--lrule);position:sticky;top:0;z-index:3;box-shadow:inset 0 -1.5px 0 var(--link)}
  .ledgertable thead th:last-child{border-right:0}
  .ledgertable thead th.num{text-align:right}
  .ledgertable tbody td{padding:9px 11px;vertical-align:middle;background:transparent;
    border-bottom:1px solid var(--lrule);border-right:1px solid var(--lrule)}
  .ledgertable tbody td:last-child{border-right:0}
  .ledgertable tbody tr:last-child td{border-bottom:1px solid var(--lrule)}
  .ledgertable .ebrow{cursor:pointer;transition:background .1s}
  .ledgertable tbody tr:hover td{background:rgba(42,44,43,.05)}
  .ledgertable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px}
  /* the running-number margin, fenced by the classic red rule */
  .ledgertable .lnr{width:1%;text-align:center;color:var(--lmute);font-variant-numeric:tabular-nums;
    font-family:Georgia,serif;font-size:13px;font-weight:600;border-right:2px solid var(--lred)!important;padding-left:6px;padding-right:10px}
  .ledgertable .ebvchip{background:transparent;color:var(--link);padding:0;border-radius:0;font-family:Georgia,serif;font-weight:700;font-size:13.5px}
  .ledgertable .ebvchip.draft{color:var(--lmute)}
  .ledgertable .ebdate{color:var(--link);font-family:ui-monospace,monospace;font-size:12.5px}
  .ledgertable .ebsupn{color:var(--link);font-weight:650}
  .ledgertable .ebsupd{color:var(--lmute)}
  .ledgertable .ebgross{font-weight:700;color:var(--link)}
  .ledgertable .est{background:transparent!important;padding:0;border-radius:0;font-size:10px;letter-spacing:.06em;font-weight:700}
  .ledgertable .est.posted{color:#3f7d54}
  .ledgertable .est.draft{color:var(--lmute)}
  .ledgertable .est.reversed{color:var(--lred)}
  .ledgertable .est.reversal{color:#a8791f}
  .ledgertable .ebdocbtn{width:30px;height:30px;border-color:var(--line);background:var(--paper);color:var(--accent);box-shadow:none}
  .ledgertable .ebdocbtn:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
  .ledgertable .ebnodoc{color:var(--lmute);opacity:.7}
  .ledgertable tfoot td{padding:11px 11px;background:var(--lpaper);border:0;
    font-family:Georgia,serif;font-weight:700;color:var(--link);position:sticky;bottom:0;z-index:3}
  .ledgertable tfoot tr:first-child td{box-shadow:inset 0 2px 0 var(--link)}
  .ledgertable tfoot .lnr{border-right:2px solid var(--lred)!important}
  /* Multiple currencies = multiple Total rows; stacked sticky rows would overlap,
     so drop the freeze and rule each row instead (the head-line still shows all). */
  .ledgertable.lg-multi tfoot td{position:static;box-shadow:none;border-top:1.5px solid var(--lrule)}
  .ledgertable.lg-multi tfoot tr:first-child td{border-top:2px solid var(--link)}
  .ledgertable tfoot .num{font-family:ui-monospace,monospace;font-size:13px}
  .ledger-sum-lbl{font-style:italic;color:var(--lmute)}
  /* Detail overlay — receipt-style header, icon rows, action buttons */
  .ebdet-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .ebdet-id{min-width:0;display:flex;flex-direction:column;gap:5px}
  .ebdet-sup{font-size:16px;font-weight:700;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis}
  .ebdet-side .r span{display:inline-flex;align-items:center;gap:7px}
  .ebdet-side .r .ri{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
  .ebdet-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:6px;border-bottom:0!important}
  .ebdet-act{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:13.5px;font-weight:650;padding:10px 16px;border-radius:11px;cursor:pointer;box-shadow:var(--box3d);transition:.13s}
  .ebdet-act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ebdet-act:hover{transform:translateY(-1px)}
  .ebdet-act.rev{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
  .ebdet-act.rev:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
  /* Upgraded receipt detail: hero + editable-draft note, and fields grouped under
     small captions instead of one long undivided list. */
  .ebdet-hero{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
  .ebdet-hero .big{margin:0}
  .ebdet-note{background:color-mix(in srgb,var(--sage) 10%,var(--paper));border:1px solid color-mix(in srgb,var(--sage) 24%,var(--line));color:var(--ink-2);font-size:12.5px;line-height:1.45;padding:9px 12px;border-radius:11px;margin-bottom:8px}
  .ebdet-note b{color:var(--ink)}
  .ebdet-sec{margin-top:16px}
  .ebdet-cap{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
  .ebdet-sec .r:last-child{border-bottom:0}
  .ebdet-act.is-edit{color:var(--paper);background:var(--accent);border-color:var(--accent)}
  .ebdet-act.is-edit:hover{filter:brightness(1.08)}
  .est{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
  .est.draft{background:color-mix(in srgb,var(--ink-3) 15%,transparent);color:var(--ink-2)}
  .est.posted{background:color-mix(in srgb,var(--sage) 16%,transparent);color:var(--sage)}
  .est.reversed{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
  .est.reversal{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
  /* Report rows collapse open onto their own vouchers, so every figure can be
     traced back to the documents behind it. */
  .ergrp{background:var(--paper);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;box-shadow:var(--box3d)}
  .ergrp > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1.6fr repeat(4,minmax(90px,.7fr));gap:12px;align-items:center;padding:15px 18px;font-size:13.5px}
  .ergrp > summary::-webkit-details-marker{display:none}
  .ergrp > summary:hover{background:var(--surface)}
  .ergrp .gl{font-weight:650;display:flex;align-items:center;gap:9px}
  .ergrp .gl .caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s;color:var(--ink-3)}
  .ergrp[open] .gl .caret{transform:rotate(90deg)}
  .ergrp .gn{text-align:right;font-variant-numeric:tabular-nums}
  .ergrp .gk{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block}
  .ertot{display:grid;grid-template-columns:1.6fr repeat(4,minmax(90px,.7fr));gap:12px;padding:15px 18px;font-weight:700;font-size:14px;border-top:2px solid var(--line);margin-top:4px}
  .ertot .gn{text-align:right;font-variant-numeric:tabular-nums}
  /* Consultant grid */
  .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:18px}
  /* Consultants — digital punch card with an animated gradient avatar ring */
  .ccard{position:relative;text-align:left;background:var(--frame,var(--paper));border:1px solid var(--line);border-radius:18px;padding:22px;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--box3d);transition:transform .16s,box-shadow .16s,border-color .16s}
  .ccard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--sage),color-mix(in srgb,var(--sage) 35%,transparent));opacity:0;transition:opacity .18s}
  .ccard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--sage) 38%,var(--line));box-shadow:0 22px 46px -26px rgba(18,22,18,.55)}
  .ccard:hover::before{opacity:1}
  .ccard .top{display:flex;align-items:center;gap:16px}
  .ccard .av-ring{position:relative;width:68px;height:68px;flex:0 0 auto}
  .ccard .av-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--sage),#b79b6e,#c98f9b,#8aa79f,var(--sage));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 3.5px));animation:ringspin 16s linear infinite;will-change:transform;transition:filter .2s}
  .ccard:hover .av-ring::before{filter:saturate(1.35) brightness(1.08)}
  @keyframes ringspin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.ccard .av-ring::before{animation:none}}
  .ccard .av{position:absolute;inset:4px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:22px;color:#fff;overflow:hidden;background:linear-gradient(145deg,var(--sage),color-mix(in srgb,var(--sage) 55%,#000))}
  .ccard .av img{width:100%;height:100%;object-fit:cover}
  [data-email] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
  .ccard .nm{font-weight:700;font-size:18px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ccard .sub{font-size:12.5px;color:var(--ink-3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ccard .stats{display:flex;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)}
  .ccard .stat{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;min-width:0}
  .ccard .stat+.stat{border-left:1px solid var(--line-2)}
  .ccard .stat .sv{display:flex;align-items:center;justify-content:center;gap:7px;font-size:18px;font-weight:720;font-variant-numeric:tabular-nums}
  .ccard .stat .sv svg{width:16px;height:16px;fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .ccard .stat .sl{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
  .addcard{align-items:center;justify-content:center;gap:13px;border:1.5px dashed var(--line);background:transparent;min-height:208px}
  .addcard:hover{border-color:var(--sage);transform:translateY(-2px);box-shadow:none}
  .addcard .pl{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--sage) 16%,var(--surface));color:var(--sage)}
  .addcard .pl svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .addcard span{font-weight:600;font-size:15px;color:var(--ink-2)}
  /* Profile modal: avatar + banner templates */
  #profileModal .modal{max-width:940px;width:95vw;max-height:90vh;overflow-y:auto;overflow-x:hidden}
  .pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:14px;align-items:start}
  @media(max-width:760px){.pf-grid{grid-template-columns:1fr;gap:0}}
  .pf-col{min-width:0;display:flex;flex-direction:column}
  #profileModal .thseg{flex-wrap:wrap}
  #profileModal .banners{grid-template-columns:repeat(3,1fr)}
  .avedit{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
  .avedit .big{width:82px;height:82px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:700;font-size:28px;color:#fff;background:linear-gradient(145deg,var(--sage),color-mix(in srgb,var(--sage) 55%,#000));flex:0 0 auto}
  .avedit .big img{width:100%;height:100%;object-fit:cover}
  .lbl2{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:20px 0 11px}
  .banners{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .bthumb{aspect-ratio:16/9;border-radius:11px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--surface);padding:0;position:relative}
  .bthumb.on{border-color:var(--sage)}
  .bthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .tools{display:flex;gap:10px;align-items:center;margin-bottom:16px}
  .search{flex:1;display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:0 12px}
  .search svg{width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.8;flex:0 0 auto}
  .search input{border:0;background:transparent;padding:11px 0;flex:1;box-shadow:none!important}
  .search input:focus{outline:none}
  /* Consultant detail modal */
  .cdetail .hd{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .cdetail .av{width:52px;height:52px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:700;font-size:19px;color:var(--paper);background:linear-gradient(145deg,var(--sage),color-mix(in srgb,var(--sage) 60%,#000))}
  .cdib{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);background:var(--paper);border-radius:11px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:.12s}
  .cdib:hover{border-color:var(--sage);color:var(--sage)}
  .cdib.danger:hover{border-color:var(--danger);color:var(--danger)}
  .cdib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .cdetail .cd-sep{height:1px;background:var(--line);margin:20px 0 18px}
  .cdetail .mini{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:6px}
  .cdetail .box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
  .cdetail .box .v{font-size:21px;font-weight:740;font-variant-numeric:tabular-nums}
  .cdetail .box .l{font-size:11.5px;color:var(--ink-3);margin-top:2px}
  .modal.wide{max-width:520px}
  /* Hero controls */
  .hero .cam{position:absolute;right:16px;bottom:14px;z-index:3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;
    color:#fff;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
  .hero .cam:hover{background:rgba(0,0,0,.5)}.hero .cam svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .hero .credit{top:18px;bottom:auto;right:22px}
  /* Mobile */
  .menutgl{display:none}
  @media(max-width:900px){
    .side{position:fixed;left:0;top:0;z-index:45;transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 60px rgba(0,0,0,.4)}
    .side.open{transform:none}
    .main{padding:16px 18px 80px}
    .menutgl{display:inline-grid;place-items:center;position:fixed;top:14px;left:14px;z-index:30;width:42px;height:42px;border-radius:11px;background:var(--paper);border:1px solid var(--line);cursor:pointer}
    .menutgl svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8}
  }