:root{
    --bg:#f6f4f1; --panel:#fff; --ink:#181012; --muted:#544b44; --line:#d8d2cb;
    --navy:#1c0d10; --indigo:#1c0d10; --green:#2f6b43; --amber:#9a6a1a; --red:#9a3b3b;
    --hover:#f4f2ef; --btn-bg:#1c0d10; --btn-fg:#fff;
    --purple:#7c3aed; --review:#b45309; --amber-fill:#d9730a; --err:#b42318; --ok:#067647; --rec:#1456c4;
    --shadow:0 1px 2px rgba(28,13,16,.03),0 12px 30px rgba(28,13,16,.05);
    --spring:cubic-bezier(.22,1,.36,1); color-scheme:light;
  }
  [data-theme="dark"]{
    --bg:#0f1012; --panel:#18191c; --ink:#f1f2f4; --muted:#9a9ea6; --line:#2c2e33;
    --navy:#d6d8dc; --indigo:#d6d8dc; --green:#5fd98c; --amber:#eeb152; --red:#ee8a7e;
    --hover:#1f2024; --btn-bg:#e9ebee; --btn-fg:#15161a;
    --purple:#b9a3ef; --review:#e8a55c; --amber-fill:#e8a55c; --err:#f0998d; --ok:#5fd98c; --rec:#7db0f6;
    --shadow:0 1px 2px rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.4); color-scheme:dark;
  }
  [data-theme="dark"] .b-review{background:#3a2c12;color:#f2b85f}
  [data-theme="dark"] .b-ready{background:#1e2e4a;color:#8bb4f2}
  [data-theme="dark"] .b-approved{background:#18402a;color:#6edb94}
  [data-theme="dark"] .b-approv-y{background:#3a3010;color:#f0d060}
  [data-theme="dark"] .b-missing{background:#3f2020;color:#f3978c}
  [data-theme="dark"] .b-proj{background:#2b2e35;color:#cdd0d7}
  [data-theme="dark"] .b-up{background:#3a3414;color:#e7d271}
  [data-theme="dark"] .up-row td{background:#1d1e22}
  [data-theme="dark"] .b-mem{background:#2a2140;color:#bcaeea}
  [data-theme="dark"] .pill.hi{background:#18402a;color:#6edb94}
  [data-theme="dark"] .pill.mid{background:#3a2c12;color:#f2b85f}
  [data-theme="dark"] .pill.lo{background:#3f2020;color:#f3978c}
  [data-theme="dark"] .soa{background:#2a2013;border-color:#4a3a1e;color:#e2ab52}
  [data-theme="dark"] .code.flag{background:#241f14;border-color:#4a3e22}
  [data-theme="dark"] .code.missing{background:#2b1a1a;border-color:#4d2b2b}
  [data-theme="dark"] .bar{background:#2a241e}
  [data-theme="dark"] .step.done{background:#13271a;border-color:#2b4a35}
  [data-theme="dark"] .reasons li{color:#d6a85a}
  [data-theme="dark"] .intake .addr{background:#251f2c;border-color:#3a3350;color:#c2b6e0}
  [data-theme="dark"] .sidebar img{filter:invert(1) brightness(1.6)}
  [data-theme="dark"] #bulkbar{background:#2a2c33 !important;color:#eceef1 !important}
  [data-theme="dark"] #bulkbar .bsel{background:#34373f}
  [data-theme="dark"] input,[data-theme="dark"] select{background-color:var(--panel);color:var(--ink)}
  /* Coding pills (job/account/entity codes + on-charge) -- defined here in the shared stylesheet so the register,
     approver portal and dashboard render them identically. Account/data-chip style: rounded-rect, hairline border,
     left-aligned, wraps long names. On-charge reuses that shape but keeps its own colour + a hue-matched border. */
  /* PILL RULE: by default a pill is a SINGLE-LINE identifier (a job/account/entity code) -- it CENTRES its
     icon + term (align-items:center) and never wraps, so a long unbroken code can't shatter one char per line;
     the table card scrolls horizontally instead. A pill that holds a descriptive NAME opts into wrapping with
     .wrap: it then TOP-aligns (align-items:flex-start) so the leading icon + trailing arrow stay on the first
     line while the text flows beneath, breaking only at word boundaries. Sized by content, no min-height. */
  .codepill{display:inline-flex;align-items:center;box-sizing:border-box;font-size:11.5px;font-weight:600;border-radius:7px;padding:3px 9px;line-height:1.35;background:color-mix(in srgb,var(--ink) 5%,var(--panel));border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink);vertical-align:middle;white-space:nowrap;overflow-wrap:normal;max-width:100%;text-align:left}
  .codepill.wrap{align-items:flex-start;white-space:normal;overflow-wrap:break-word;text-align:left}
  /* A pill wrapped in .jlink navigates somewhere on click -- show a small "opens a page" arrow so it isn't a surprise. */
  .jlink{text-decoration:none;color:inherit}
  .jlink .codepill{transition:border-color .14s ease}
  .jlink .codepill::after{content:"";display:inline-block;align-self:center;width:13px;height:1.35em;margin-left:5px;flex-shrink:0;background:currentColor;opacity:.5;-webkit-mask:url(/icons/IconArrowUpRight.svg) center/13px no-repeat;mask:url(/icons/IconArrowUpRight.svg) center/13px no-repeat;transition:opacity .14s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
  .jlink:hover .codepill{border-color:color-mix(in srgb,var(--btn-bg) 38%,var(--line))}
  .jlink:hover .codepill::after{opacity:.85;transform:translate(2.5px,-2.5px)}
  .ocp,.ocpill{display:inline-flex;align-items:flex-start;flex-wrap:wrap;box-sizing:border-box;font-size:10.5px;font-weight:700;border-radius:7px;padding:2px 7px;line-height:1.3;text-align:left;white-space:normal;overflow-wrap:anywhere;max-width:100%;border:1px solid color-mix(in srgb,currentColor 32%,transparent);vertical-align:middle}
  .ocp-yes,.ocpill{color:#0f766e;background:#ccfbf1}
  .ocp-no{color:var(--muted);background:var(--hover)}
  .ocp-rev{color:var(--review);background:color-mix(in srgb,#b45309 14%,transparent);cursor:help}
  .ocp-party{background:color-mix(in srgb,#f04438 14%,transparent);color:#b42318}
  [data-theme="dark"] .ocp-yes,[data-theme="dark"] .ocpill{background:#123b36;color:#62d6a6}
  [data-theme="dark"] .ocp-party{background:#3a1512;color:#f97066}
  .ocell{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:100%}
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);overflow-x:clip;accent-color:var(--btn-bg);-webkit-tap-highlight-color:transparent}
  @font-face{font-family:'Inter-fallback';src:local('Arial');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.1%}
  body{font-family:'Inter','Inter-fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-0.005em;
    font-weight:500;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45;display:flex;align-items:stretch;min-height:100vh}
  button{font:inherit;cursor:pointer}
  .muted{color:var(--muted)}

  .sidebar{width:248px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;padding:24px 18px calc(24px + env(safe-area-inset-bottom));position:sticky;top:0;height:100dvh;overflow:hidden auto}
  /* The sidebar sits in a flex row with the main content, so animating its WIDTH re-lays-out the whole
   (heavy) page every frame -- that was the collapse/expand jank. Snap the width instead (one reflow) and
   let the labels + logo crossfade (opacity/transform, composited) carry the motion, so it reads smooth
   and instant rather than struggling. */
body.nav-ready .sidebar{transition:none}
  .sidebar .brand{display:flex;justify-content:center;margin:2px 0 0}
  .sidebar .brand{position:relative;transition:transform .12s ease}
  .sidebar .brand:active{transform:scale(.93)}
  .sidebar .brand img{display:block}
  .sidebar .brand .logo-full{height:26px;width:auto;aspect-ratio:77.9/21.9}
  .sidebar .brand .logo-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);height:36px;width:36px;opacity:0}
  body.nav-ready .sidebar .brand .logo-full{transition:opacity .12s ease .06s}
  body.nav-ready.navmin .sidebar .brand .logo-full{transition:opacity .08s ease}
  /* On EXPAND the rail's top padding snaps from 74px to 24px, which would yank the C up into the hamburger's
     row; killing its opacity instantly (0s) means it is already gone on that first frame -> never seen under it. */
  body.nav-ready .sidebar .brand .logo-c{transition:opacity 0s,transform .1s ease}
  body.nav-ready.navmin .sidebar .brand .logo-c{transition:opacity .14s ease .05s,transform .19s cubic-bezier(.34,1.56,.64,1) .05s}
  /* The separator is its OWN element (a sibling of the logo link), so the logo's press-scale and its box
     height can never distort it: it stays a clean, static, inset line that floats with spacing on each side. */
  .brand-sep{height:1px;background:var(--line);margin:14px 0 16px;flex-shrink:0}
  @keyframes brandIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
  .dept{font-size:12px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;margin:6px 8px 18px}
  .snav{display:flex;flex-direction:column;gap:2px}
  .navgrp{display:flex;flex-direction:column;gap:3px}
  .navgrp+.navgrp{margin-top:6px}
  .navgrp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.01em;padding:9px 14px;white-space:nowrap;user-select:none;background:none;border:0;border-radius:10px;cursor:pointer;text-align:left;outline:none;transition:background .14s ease,color .12s ease,transform .09s ease}
  .navgrp-h:hover{background:var(--hover);color:var(--ink)}
  .navgrp-h:focus-visible{background:var(--hover);color:var(--ink)}
  .navgrp-h:active{transform:scale(.98)}
  .navgrp-cv{width:17px;height:17px;flex-shrink:0;background:currentColor;opacity:.7;-webkit-mask:url(/icons/IconChevronRightMedium.svg) center/contain no-repeat;mask:url(/icons/IconChevronRightMedium.svg) center/contain no-repeat;transform:rotate(90deg);transition:transform .24s cubic-bezier(.4,0,.2,1)}
  .navgrp.ncol .navgrp-cv{transform:rotate(0deg)}
  .navgrp-h .navgrp-ico{display:none}
  .navgrp-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1)}
  .navgrp-inner{overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:0;opacity:1;transition:opacity .18s ease .04s}
  .navgrp.ncol .navgrp-items{grid-template-rows:0fr}
  .navgrp.ncol .navgrp-inner{opacity:0;transition:opacity .12s ease}
  @media(prefers-reduced-motion:reduce){.navgrp-items,.navgrp-inner,.navgrp-cv{transition:none}}
  /* While the rail switches between full and minimized, freeze the per-section collapse transitions so a
     collapsed section (e.g. Administration) snaps to its rail state instead of animating its rows open/shut
     under the width slide -- that double layout animation was the jerk. Section toggles still animate normally. */
  body.navswitch .navgrp-items,body.navswitch .navgrp-inner{transition:none}
/* During the collapse/expand toggle, freeze EVERY sidebar transition so the width, labels, logo and
   nav items all snap to the new state in one coordinated step -- otherwise the width changes while the
   logo's springy transform + the label fades run on their own timings, which reads as chaotic/glitchy.
   navswitch is removed two frames later, so normal hover transitions come straight back. */
body.navswitch .sidebar,body.navswitch .sidebar *{transition:none!important}
  .snav a{display:flex;align-items:center;gap:13px;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease}
  .snav a{transition:background .15s ease,color .15s ease,transform .09s ease}
  .snav a:hover{background:var(--hover);color:var(--ink)}
  .snav a:active{transform:scale(.97)}
  .snav a.on{background:var(--btn-bg);color:var(--btn-fg)}
  /* Labels fade in only once the rail has the width to hold them (delay), and fade out fast on collapse, so
     the half-clipped intermediate text never shows. Icons are untouched -> they appear/stay instantly. */
  .snav a .navlbl,.navgrp-lbl{transition:opacity .1s ease .08s}
  .ico{display:inline-block;width:21px;height:21px;flex-shrink:0;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
  .navtip{position:fixed;transform:translateY(-50%) translateX(-4px);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font:600 13px/1.2 Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:300;pointer-events:none;opacity:0;transition:opacity .12s ease,transform .12s ease}
  .navtip.on{opacity:1;transform:translateY(-50%) translateX(0)}
  /* Left-pointing caret on the tooltip. The tooltip is vertically centred on the icon (JS sets top to the
     icon's mid + translateY(-50%)), so a caret at top:50% points back at the icon's exact centre. */
  .navtip::before{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;background:var(--panel);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateY(-50%) rotate(45deg);border-bottom-left-radius:2px}
  .srail{margin:auto 0 0;display:flex;flex-direction:column;gap:10px;padding:18px 0 calc(2px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .srail .addr{font-size:12px;font-weight:600;color:var(--muted);line-height:1.55}
  .srail .addr b{color:var(--navy);font-weight:700;font-size:12.5px}
  .themebtn{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;width:fit-content;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .09s ease}
  .themebtn:hover{background:var(--hover);color:var(--ink);border-color:var(--btn-bg)}
  .themebtn:active{transform:scale(.96)}
  .signout{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;width:fit-content;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .09s ease}
  .signout:hover{background:var(--hover);color:var(--ink);border-color:var(--btn-bg)}
  .signout:active{transform:scale(.96)}
  .content{flex:1;min-width:0;display:flex;flex-direction:column}
/* Minimized rail is a DESKTOP-only concept. Below the drawer breakpoint the nav is the full slide-out
   (wordmark + labels), so navmin must not leak into the mobile drawer. */
@media(min-width:861px){
/* The nav list scrolls inside the rail (brand + theme/sign-out stay put); a stable gutter + a thin styled
   scrollbar means collapsing a section never shifts the layout or flashes the default browser scrollbar. */
.sidebar{overflow:hidden}
.sidebar .brand{flex-shrink:0}
.snav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}
.snav::-webkit-scrollbar{width:10px}
.snav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 20%,transparent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.snav:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 32%,transparent);background-clip:padding-box}
.snav::-webkit-scrollbar-track{background:transparent}
.srail{flex-shrink:0}
body.navmin .snav{scrollbar-gutter:auto}
body.navmin .sidebar{width:64px;padding:74px 0 calc(22px + env(safe-area-inset-bottom));align-items:center;overflow:hidden;gap:2px}
body.navmin .sidebar .brand{display:flex;justify-content:center;width:100%;height:36px;margin:0 0 0}
body.navmin .brand-sep{width:26px;margin:10px auto 12px}
body.navmin .sidebar .brand .logo-full{opacity:0}
body.navmin .sidebar .brand .logo-c{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.navmin .snav{width:100%;align-items:center;gap:7px}
body.navmin .navgrp{width:100%;align-items:center;gap:7px;padding:9px 0}
/* In the rail the section HEADER icon is dropped: each section's own item icons already carry icons, so showing
   a header icon on top just pushed single-item sections (e.g. Employee portal) into the top half. Items show
   centred between the separators instead. Sections are force-shown here since there's no header to toggle them. */
body.navmin .navgrp-h{display:none}
body.navmin .navgrp-lbl{font-size:0;opacity:0;transition:opacity .05s ease}
body.navmin .snav a .navlbl{opacity:0;transition:opacity .05s ease}
body.navmin .navgrp-cv{display:none}
body.navmin .navgrp-ico{display:block;width:21px;height:21px;opacity:.55}
body.navmin .navgrp-h:hover .navgrp-ico{opacity:.95}
body.navmin .navgrp-items{width:100%;grid-template-rows:1fr!important}
body.navmin .navgrp-inner{align-items:center;gap:7px;opacity:1!important}
body.navmin .navgrp+.navgrp{margin-top:0;border-top:1px solid var(--line)}
body.navmin .snav a{justify-content:center;font-size:0;gap:0;padding:11px 0;width:44px;margin:0 auto}
body.navmin .srail{width:100%;margin:auto 0 0;padding:14px 0 calc(2px + env(safe-area-inset-bottom));align-items:center}
body.navmin .srail .addr{display:none}
body.navmin .srail .themebtn,body.navmin .srail .signout{font-size:0;gap:0;padding:9px;width:auto;justify-content:center}
}
#navtoggle{position:fixed;left:14px;top:20px;z-index:200;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:left .2s,transform .09s ease,background .13s ease}#navtoggle:hover{background:var(--hover)}#navtoggle:active{transform:scale(.85)}
#navtoggle::before{content:"";width:15px;height:1.6px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}
body.navmin #navtoggle{left:16px}
@media(max-width:860px){#navtoggle{display:none}}
  .topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:13px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
  .fwd{background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);border-radius:10px;padding:9px 15px;font-size:14px;font-weight:600;transition:.2s var(--spring)}
  .fwd:hover{filter:brightness(.94)}
  .fwd:active{transform:scale(.96)}

  .stats{display:flex;gap:14px;padding:18px 24px 4px;flex-wrap:wrap}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:130px;box-shadow:var(--shadow)}
  .stat .n{font-size:25px;font-weight:700;letter-spacing:-.02em}
  .stat .l{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600;white-space:nowrap}
  .stat.rev .n{color:var(--amber)} .stat.app .n{color:var(--green)}

  main{display:grid;grid-template-columns:minmax(400px,1fr) minmax(420px,1.05fr);gap:18px;padding:14px 24px 40px;align-items:start}
  @media(max-width:1160px){main{grid-template-columns:1fr}}
  .hamburger{display:none;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;flex-shrink:0}
  .hamburger span{display:block;width:15px;height:2px;background:var(--ink);position:relative}
  .hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:15px;height:2px;background:var(--ink)}
  .hamburger span::before{top:-5px}.hamburger span::after{top:5px}
  .mtop{display:none}
  [data-theme="dark"] .mtop .mlogo{filter:invert(1) brightness(1.6)}
  @media(max-width:860px){.mtop{display:flex;align-items:center;gap:13px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:45}.mtop .mlogo{height:26px;display:block}.mtop .hamburger{margin:0}}
  .scrim{display:none}
  .navclose{display:none}
  @media(max-width:860px){
    .sidebar{position:fixed;left:0;top:0;width:250px;height:100dvh;z-index:60;transform:translateX(-100%);transition:transform .25s var(--spring);padding:14px 18px calc(22px + env(safe-area-inset-bottom));overflow-y:auto}
    .sidebar .brand{justify-content:flex-start;padding-left:45px;margin:0 0 26px}
    .sidebar.open{transform:translateX(0)}
    .navclose{display:flex;align-items:center;justify-content:center;position:absolute;top:10px;left:16px;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--bg);cursor:pointer;z-index:2;transition:transform .09s ease,background .13s ease}
    .navclose:hover{background:var(--hover)}
    .navclose:active{transform:scale(.9)}
    .navclose span{position:absolute;width:15px;height:2px;border-radius:2px;background:var(--ink);transition:transform .33s var(--spring)}
    .navclose span:first-child{transform:translateY(-4px)}
    .navclose span:last-child{transform:translateY(4px)}
    .sidebar.open .navclose span:first-child{transform:rotate(45deg)}
    .sidebar.open .navclose span:last-child{transform:rotate(-45deg)}
    .hamburger{display:inline-flex}
    .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
    .scrim.on{opacity:1;pointer-events:auto}
    .phead{padding:14px 14px 0;flex-wrap:wrap} .quickbar{padding:10px 14px 0;justify-content:flex-start}
    .stats{padding:12px 14px 0;gap:8px}
    .stat{min-width:0;flex:1 1 28%}
    main{padding:12px 14px 30px}
    .dhead{flex-wrap:wrap}
    .card{overflow-x:auto}
    /* In the slide-out drawer the theme + sign-out controls fill the width like the nav items above them,
       instead of sitting as small fit-content pills with dead space to their right. */
    .srail .themebtn,.srail .signout{width:100%;box-sizing:border-box;justify-content:flex-start}
  }
  .col{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  #list{max-height:calc(100dvh - 250px);overflow-y:auto}
  .dtabs{display:flex;gap:6px;padding:6px 22px 2px}
  .dtab{background:none;border:0;border-bottom:2px solid transparent;padding:7px 2px;margin-right:16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .15s ease,border-color .15s ease}
  .dtab:hover{color:var(--ink)}
  .dtab.on{color:var(--ink);border-bottom-color:var(--btn-bg)}
  .future{margin:0 22px 14px;background:#fff7ed;border:1px solid #fcdcb6;border-radius:10px;padding:11px 14px}
  [data-theme="dark"] .future{background:#2a2013;border-color:#4a3a1e}
  .future-h{font-size:12px;font-weight:700;letter-spacing:.02em;color:#b45309;display:flex;align-items:center;gap:6px;margin-bottom:5px}
  [data-theme="dark"] .future-h{color:#e2ab52}
  .future-h .bico{width:13px;height:13px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;display:inline-block}
  .future ul{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink)}

  .tabs{display:flex;gap:7px;padding:15px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;row-gap:9px}
  .tab{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s}
  .tab.on{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
  .tab:hover:not(.on){border-color:var(--btn-bg);color:var(--navy)}

  .row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
  .row:hover{background:var(--hover)}
  .row.sel{background:var(--hover)}
  .row .sup{font-weight:700;font-size:15px}
  .row .sub{color:var(--muted);font-size:12px;margin-top:2px}
  .row .amt{font-weight:700;text-align:right;white-space:nowrap}
  .row .tags{grid-column:1/3;display:flex;gap:7px;flex-wrap:wrap;margin-top:3px}
  html{scrollbar-gutter:stable}
  .badge{font-size:12px;font-weight:700;border-radius:7px;padding:5px 9px;min-height:24px;box-sizing:border-box;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;vertical-align:middle;border:1px solid color-mix(in srgb,currentColor 26%,transparent)}
  .b-review{background:#fef3e6;color:#a85a06} .b-ready{background:#eaf1fe;color:#1f4fa8}
  .b-approved{background:#e7f6ec;color:#137a37} .b-approv-y{background:#fdf3c3;color:#8a6400} .b-missing{background:#fde7e7;color:#b42318}
  .b-proj{background:#eef2f7;color:#3a4658} .b-mem{background:#efeaff;color:#5a40c6}
  .b-up{background:#fff3d6;color:#8a6418}
  .up-row td{background:#fffaf0}

  .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 24px 0}
  .phead h1{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 3px}
  .phead .lead{color:var(--muted);font-size:13px;font-weight:600;max-width:620px;margin:0}
  .lastupd{font-size:12px;white-space:nowrap;padding-top:7px}
  .quickbar{display:flex;gap:10px;padding:14px 24px 0;justify-content:flex-end;flex-wrap:wrap}
  .col{position:relative}
  .col.drag{box-shadow:0 0 0 2px var(--btn-bg) inset, var(--shadow)}
  .drophint{display:none;position:absolute;inset:0;z-index:40;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--panel) 92%,transparent);font-size:14px;font-weight:700;color:var(--ink);pointer-events:none;text-align:center;padding:24px}
  .col.drag .drophint{display:flex}
  .dropico{width:38px;height:38px;background:var(--btn-bg);-webkit-mask:url(/icons/folder-upload.svg) center/contain no-repeat;mask:url(/icons/folder-upload.svg) center/contain no-repeat}

  .empty{padding:60px 24px;text-align:center;color:var(--muted)}
  .detail{padding:0}
  .dhead{padding:20px 22px 8px;display:flex;justify-content:space-between;gap:16px;align-items:center}
  .dhead .sup{font-size:20px;font-weight:700;letter-spacing:-.01em}
  .dhead .meta{color:var(--muted);font-size:13px;margin-top:3px}
  .dhead .amt{font-size:24px;font-weight:700;text-align:right;white-space:nowrap}
  .dhead .amt small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
  .soa{margin:6px 22px 0;background:#fff7ed;border:1px solid #fcdcb6;color:#b45309;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600}
  .sec{padding:14px 22px;border-top:1px solid var(--line);margin-top:12px}
  .sec h4{margin:0 0 10px;font-size:13px;letter-spacing:.01em;color:var(--ink);font-weight:700}
  details.disc{border-top:1px solid var(--line);padding:13px 22px}
  details.disc>summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.01em;color:var(--ink);font-weight:700;display:flex;justify-content:space-between;align-items:center}
  details.disc>summary::-webkit-details-marker{display:none}
  details.disc>summary::after{content:'';width:16px;height:16px;flex-shrink:0;background:var(--muted);-webkit-mask:url(/icons/chevron-right.svg) center/contain no-repeat;mask:url(/icons/chevron-right.svg) center/contain no-repeat;transition:transform .2s}
  details.disc[open]>summary::after{transform:rotate(90deg)}
  details.disc>div,details.disc>ul{margin-top:10px}
  .code{padding:9px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px}
  .code.flag{border-color:#f6dcae;background:#fffaf2}
  .code.missing{border-color:#f3c2c2;background:#fff5f5}
  .code .lab{font-size:12px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px}
  .code .val{font-size:13.5px;font-weight:700;margin-top:3px;word-break:break-word;line-height:1.4}
  .pill{font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;display:inline-flex;align-items:center;flex-wrap:wrap;white-space:normal;overflow-wrap:anywhere;max-width:100%;border:1px solid color-mix(in srgb,currentColor 26%,transparent)}
  .pill.hi{background:#e7f6ec;color:#137a37}.pill.mid{background:#fdf0dc;color:#a85a06}.pill.lo{background:#fde7e7;color:#b42318}
  .bar{height:3px;border-radius:3px;background:#eef0f3;margin-top:6px;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:4px;transition:width .6s var(--spring)}
  /* Slim pills at narrow widths — trim padding/font/line-height only, keep rounded shape + colours (desktop untouched). Placed after the base rules so source order wins. */
  @media(max-width:860px){
    .badge{font-size:11px;padding:1px 8px;line-height:1.45;gap:4px}
    .pill{font-size:11px;padding:1px 7px;line-height:1.45}
  }

  .resolve{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  select,.btn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--ink)}
  select{min-width:160px;-webkit-appearance:none;appearance:none;height:32px;padding:0 32px 0 11px;border:1px solid var(--line);border-radius:8px;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
  select:hover{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}
  select:focus,select:focus-visible{outline:none;border-color:var(--btn-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-bg) 13%,transparent)}
  select:focus{outline:none;border-color:var(--btn-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-bg) 13%,transparent)}
  .btn{transition:.18s var(--spring)}.btn:active{transform:scale(.95)}
  .btn:hover{filter:brightness(.94)}
  .btn.pri{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
  .btn.navy{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
  .btn.ghost{background:var(--panel)}
  /* outline-primary: the clear per-row action without a heavy black fill -- reserves solid .pri for one section/page primary, like the approver portal */
  .btn.prio{background:var(--panel);color:var(--btn-bg);border-color:var(--btn-bg);font-weight:700}
  .btn.prio:hover{background:var(--btn-bg);color:var(--btn-fg)}
  .btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

  .reasons{margin:0;padding:0;counter-reset:rn}
  .reasons li{list-style:none;font-size:13px;color:#8a5a14;padding:5px 0 5px 22px;position:relative;counter-increment:rn}
  .reasons li:before{content:counter(rn) ".";position:absolute;left:0;color:var(--muted);font-weight:700;font-size:11.5px}

  .wf{display:flex;gap:10px;flex-wrap:wrap}
  .step{flex:1;min-width:120px;border:1px solid var(--line);border-radius:11px;padding:11px}
  .step .t{font-size:12px;font-weight:700;color:var(--muted)}
  .step .who{font-size:13px;font-weight:700;margin:4px 0 8px}
  .step.done{background:#f1f9f3;border-color:#cdeed8}
  .step.done .who{color:var(--green)}
  .step .btn{width:100%;padding:7px;font-size:13px}

  .rel{font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;display:flex;justify-content:space-between;cursor:pointer}
  .rel:hover{background:var(--hover)}
  .actions{display:flex;gap:9px;flex-wrap:wrap;padding:16px 22px 22px}
  .btn .bico{display:inline-block;width:14px;height:14px;background:currentColor;vertical-align:-2px;margin-right:6px;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
  .btn .bico.aft{margin:0 0 0 6px}

  .ov{position:fixed;inset:0;background:rgba(16,20,30,.5);display:none;align-items:center;justify-content:center;padding:24px;z-index:50}
  .ov.on{display:flex}
  .modal{background:var(--panel);border-radius:16px;max-width:620px;width:100%;max-height:84vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)}
  .modal h3{margin:0;padding:18px 22px;border-bottom:1px solid var(--line);font-size:16px}
  .modal .body{padding:18px 22px}
  .mail{background:var(--hover);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:13px;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;line-height:1.5}
  .mail .h{font-family:inherit;color:var(--muted);font-size:12px}
  pre{background:#0f1320;color:#d6e2ff;border-radius:10px;padding:14px;overflow:auto;font-size:12px;line-height:1.5}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#161a1f;color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;transition:.3s var(--spring);z-index:60}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  .donut-in{transform-origin:center;animation:donutIn .5s cubic-bezier(.33,1,.68,1) both}
  @keyframes donutIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}