/* AgentPro for Agents — one stylesheet, two layouts. Tokens are the AMS's own navy + gold
   with cool neutrals; below 960px the app is the phone (stacked screens, tab bar), from 960px
   it is the desk (rail · table · record panel). */
:root{
  --bg:#eef1f5; --surface:#ffffff; --surface2:#f5f7fa; --line:#dfe5ec; --line2:#eceff3;
  --ink:#141f2c; --ink2:#36465a; --muted:#6b7a8c; --faint:#9aa6b4;
  --accent:#1c5aa8; --accent-soft:#e8f0fa;
  --gold:#f3c53d; --gold-ink:#8a6d1a;
  --amber:#b06f07; --amber-soft:#fdf1dc;
  --red:#c0392b; --red-soft:#fbe9e6;
  --green:#1a7a4c; --green-soft:#e4f3ea;
  --shadow:0 1px 2px rgba(20,31,44,.06),0 18px 40px rgba(20,31,44,.12);
  --band:#152238; --band-ink:#ffffff; --band-muted:rgba(255,255,255,.64); --band-line:rgba(255,255,255,.14);
  --sans:'Instrument Sans',"Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:light;
  --mono:'IBM Plex Mono',"SFMono-Regular",Consolas,monospace;
}
/* phase467: the theme follows the device unless he chose — data-theme="light" | "dark" wins both ways */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1118; --surface:#131b25; --surface2:#182230; --line:#26313f; --line2:#1e2836;
    --ink:#e6ecf3; --ink2:#c0cad6; --muted:#8c9bad; --faint:#63728a;
    --accent:#6ea9f3; --accent-soft:#1a2a40; --gold:#f3c53d; --gold-ink:#f0cf6a;
    --amber:#e6a83f; --amber-soft:#3a2d12; --red:#f0705f; --red-soft:#3d1f1b; --green:#5fc48f; --green-soft:#153224;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
    --band:#1d2c47; --band-ink:#ffffff; --band-muted:rgba(255,255,255,.66); --band-line:rgba(255,255,255,.14);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1118; --surface:#131b25; --surface2:#182230; --line:#26313f; --line2:#1e2836;
    --ink:#e6ecf3; --ink2:#c0cad6; --muted:#8c9bad; --faint:#63728a;
    --accent:#6ea9f3; --accent-soft:#1a2a40; --gold:#f3c53d; --gold-ink:#f0cf6a;
    --amber:#e6a83f; --amber-soft:#3a2d12; --red:#f0705f; --red-soft:#3d1f1b; --green:#5fc48f; --green-soft:#153224;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
    --band:#1d2c47; --band-ink:#ffffff; --band-muted:rgba(255,255,255,.66); --band-line:rgba(255,255,255,.14);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.35;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── sign in ─────────────────────────────────────────────────────────────────────────────── */
#login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.lcard{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;box-shadow:var(--shadow)}
.lcard .brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.lcard .brand i{width:12px;height:12px;border-radius:3px;background:var(--gold)}
.lcard .brand em{font-style:normal;color:var(--muted);font-weight:500}
.lcard .sub{margin:0 0 18px;color:var(--muted);font-size:13px}
.lcard label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:12px 0 5px}
.lcard input{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:0 12px;font:inherit;font-size:15px;color:var(--ink)}
.lbtn{margin-top:18px;width:100%;height:44px;border-radius:11px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;text-align:center}
.lbtn[disabled]{opacity:.6;cursor:default}
.lerr{color:var(--red);font-size:13px;margin-top:10px;min-height:1em}
.lmsg{color:var(--ink2);font-size:14px;margin:4px 0 0}
.bootdots::after{content:"…"}
html[data-boot="restoring"] #loginForm{display:none}
html[data-boot="anon"] #bootCard,html[data-boot="done"] #bootCard{display:none}

/* ── the app frame ───────────────────────────────────────────────────────────────────────── */
#app{position:fixed;inset:0;background:var(--surface)}
.app{display:flex;flex-direction:column;height:100%;background:var(--surface)}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
@media (prefers-reduced-motion:no-preference){
  /* ⛔ the screen's direction classes are PREFIXED: a bare `.back` here collided with the back
     BUTTON's `.back` rule below (align-items:center) and shrank every list to content width after
     going back (Leslie's screenshot, 2026-09-13) */
  .screen.dir-in{animation:in .18s ease-out}
  @keyframes in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
  .screen.dir-back{animation:back .18s ease-out}
  @keyframes back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
}
.tabbar{flex:none;display:flex;border-top:1px solid var(--line);background:var(--surface);padding:6px 6px calc(10px + env(safe-area-inset-bottom))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 2px;font-size:10.5px;font-weight:600;color:var(--muted);position:relative;border-radius:8px}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--ink)}
.tab.on::before{content:"";position:absolute;top:-7px;width:22px;height:3px;border-radius:2px;background:var(--gold)}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:99}
.toast.show{opacity:1}
svg{pointer-events:none}

/* ── list (phone) ────────────────────────────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 18px 8px}
.hdr h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.025em}
.who{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em}
.searchrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 14px 6px}
.searchrow .search{width:100%;margin:0}
.searchrow .seg{flex:1}
.search{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.search svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.search input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);min-width:0}
.search input::placeholder{color:var(--faint)}
.search .x{color:var(--muted);font-size:18px;line-height:1;padding:4px}
.seg{display:flex;gap:2px;background:var(--surface2);border-radius:11px;padding:3px}
.seg button{flex:1;padding:7px 4px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;text-align:center}
.seg button small{font-weight:500;font-family:var(--mono);margin-left:4px;font-size:11.5px;color:var(--faint)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,31,44,.12)}
.seg button.on small{color:var(--muted)}
.list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mh{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:baseline;padding:12px 18px 6px;background:var(--surface);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.mh.past{color:var(--red)}
.mh small{font-family:var(--mono);font-size:11px;letter-spacing:0;font-weight:500;color:var(--faint)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:11px 18px;border-bottom:1px solid var(--line2);cursor:pointer;width:100%}
.row:active,.row:hover{background:var(--surface2)}
.row .no{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.row .nm{font-size:14.5px;font-weight:600;letter-spacing:-.005em;overflow-wrap:anywhere;margin-top:2px}
.row .rk{font-size:13px;color:var(--ink2);margin-top:1px;overflow-wrap:anywhere}
.row .rk .mono{white-space:nowrap}
.row .cv{font-size:12.5px;color:var(--muted);margin-top:2px}
.row .r{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.row .dt{font-family:var(--mono);font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .dt.soon{color:var(--amber);font-weight:500}
.row .dt.past{color:var(--red);font-weight:500}
.row .ow{font-family:var(--mono);font-size:12px;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .pr{font-family:var(--mono);font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.row.sel{background:var(--accent-soft)}
.st-lapsed{font-size:12px;font-weight:600;color:var(--amber)}
.st-cancelled{font-size:12px;font-weight:600;color:var(--red)}
.warn{color:var(--amber)}
.bad{color:var(--red)}
.muted{color:var(--muted)}
.empty{padding:48px 24px;text-align:center;color:var(--muted);font-size:14px}
.empty .lnk{display:inline-block;margin-top:8px}

/* ── record (phone) ──────────────────────────────────────────────────────────────────────── */
.phdr{flex:none;display:flex;align-items:center;gap:6px;min-height:46px;padding:calc(4px + env(safe-area-inset-top)) 12px 4px 6px;border-bottom:1px solid var(--line2)}
.back{display:flex;align-items:center;gap:1px;color:var(--accent);font-weight:600;font-size:15px;padding:6px 8px 6px 4px;border-radius:8px;white-space:nowrap;flex:none;max-width:46%}
.back span{overflow:hidden;text-overflow:ellipsis}
.back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ctitle{flex:1;min-width:0;text-align:center;opacity:0;transition:opacity .15s;line-height:1.15}
.ctitle b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctitle span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pno{flex:none;width:40px}
.phdr.collapsed .ctitle{opacity:1}
.phdr.collapsed .back span{display:none}
.body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ban{margin:12px 18px 0;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600}
.ban.amber{background:var(--amber-soft);color:var(--amber)}
.ban.red{background:var(--red-soft);color:var(--red)}
.ident{padding:16px 18px 4px}
.ident .no{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-bottom:6px}
.ident .no .copy{margin-left:10px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);vertical-align:2px}
.ident h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.ident .risk{font-size:15px;color:var(--ink2);margin-top:5px}
.ident .cover{font-size:13.5px;color:var(--muted);margin-top:2px}
.clwrap{position:relative;display:inline-block;margin-top:6px}
.cl{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:14px;padding:3px 7px;margin-left:-7px;border-radius:7px}
.cl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cl:hover{background:var(--accent-soft)}
.card{position:absolute;top:calc(100% + 6px);left:0;z-index:8;width:min(340px,calc(100vw - 36px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px 14px;text-align:left;font-size:14px}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:6px;font-size:15px}
.card .f{padding:8px 0}
.card .v{white-space:normal;overflow-wrap:anywhere}
.card .acts{padding:12px 0 0}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 18px 4px}
.hero .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.hero .v{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.01em;margin-top:3px;font-variant-numeric:tabular-nums}
.hero .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.hero .s.soon{color:var(--amber);font-weight:600}
.hero .s.past{color:var(--red);font-weight:600}
.hero .v.owing{color:var(--red)}
/* ── Home (phase459 · I7), the briefing ──────────────────────────────────────────────────────
   A tinted page; a navy Today band with the day's three figures set large and a gold day marker;
   four white tiles; retention as a chart; the work in white surfaces. Numbers are the sans at
   weight 600 with tabular figures — the mono is for policy numbers and money in rows only. */
.hpage{background:var(--bg);padding:6px 14px calc(24px + env(safe-area-inset-bottom))}
.hband{background:var(--band);color:var(--band-ink);border-radius:20px;padding:16px 18px 14px;box-shadow:0 12px 32px rgba(20,31,44,.22)}
.hday{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--band-muted)}
.hdot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(243,197,61,.18);flex:none}
.hfigs{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:10px;margin-top:14px;align-items:end}
.hfig{display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:inherit;padding:0;border-radius:10px}
.hfig .hn{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hfig.lead .hn{font-size:52px;letter-spacing:-.045em;color:var(--gold)}
.hfig.warn .hn{color:#ffb4a8}
.hfig .hl{margin-top:6px;font-size:12px;color:var(--band-muted);font-weight:500}
.hfoot{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--band-line);font-size:12.5px;color:var(--band-muted);font-variant-numeric:tabular-nums}
.htiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.htile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px 12px;display:flex;flex-direction:column;gap:4px;min-height:96px;overflow:hidden}
.hk{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.htile .hv{font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink)}
.htile .hs{font-size:12.5px;color:var(--ink2);margin-top:2px}
.hspark{position:absolute;right:14px;top:12px;display:flex;align-items:flex-end;gap:3px;height:22px;width:52px}
.htile.spark .hk{padding-right:58px}
.htile .hk{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hspark i{flex:1;background:var(--accent-soft);border-radius:2px 2px 0 0;min-height:2px}
.hspark i.now{background:var(--accent)}
.hchart{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px 12px;margin-top:10px}
.hch{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hch .hk{padding-right:0}
.hlegend{font-size:11.5px;color:var(--faint);white-space:nowrap}
.hbars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:14px;align-items:end}
.hb{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.hb .hpc{font-size:11px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.hb .hbar{width:100%;height:84px;display:flex;align-items:flex-end;background:linear-gradient(to top,var(--line2) 1px,transparent 1px) bottom/100% 100% no-repeat}
.hb .hbar i{display:block;width:100%;background:var(--accent);border-radius:6px 6px 2px 2px;min-height:2px}
.hb.now .hbar i{background:var(--accent-soft);border:1px solid var(--accent);border-bottom:0}
.hb .hmo{font-size:11px;font-weight:600;color:var(--muted)}
.hb.now .hmo{color:var(--ink)}
.hb .hof{font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap}
.hsec{display:flex;align-items:baseline;gap:8px;padding:18px 4px 8px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hsec b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:1px 7px}
.hlist{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hlist .row,.hlist .nrow{padding-left:14px;padding-right:14px}
.hlist .row:last-child,.hlist .nrow:last-child{border-bottom:0}
.hlist .hmore{border-top:1px solid var(--line2)}
.hempty{padding:22px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.hempty.tall{padding:64px 24px}
.hmore{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:12px 14px;font-size:13px;font-weight:600;color:var(--accent);background:var(--surface)}
.hmore svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
/* the desk: the band and the figures on the left, the work on the right */
.homepage{flex:1;min-height:0;overflow:auto;background:var(--bg);padding:8px 24px 32px}
/* ── Home, fully fleshed (phase466) ─────────────────────────────────────────────────────── */
.hband .hxbl{min-width:0}
.hxfun{margin-top:16px;padding-top:14px;border-top:1px solid var(--band-line)}
.hxfk{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--band-muted);font-weight:500}
.hxfk b{color:var(--band-ink);font-weight:600;font-size:13px;white-space:nowrap}
.hxbar{display:flex;gap:2px;height:10px;margin-top:10px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.08)}
.hxbar i{display:block;min-width:3px}
.hxbar .hxsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hxbar .hxren{background:#4fd18a}.hxbar .hxcon{background:#7fb4f5}.hxbar .hxnot{background:var(--gold)}.hxbar .hxgen{background:rgba(255,255,255,.28)}.hxbar .hxlost{background:#ff8f80}
.hxleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11.5px;color:var(--band-muted);font-variant-numeric:tabular-nums}
.hxleg span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:1px}
.hxleg .hxren::before{background:#4fd18a}.hxleg .hxcon::before{background:#7fb4f5}.hxleg .hxnot::before{background:var(--gold)}.hxleg .hxgen::before{background:rgba(255,255,255,.28)}.hxleg .hxlost::before{background:#ff8f80}
.hband.hxwide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 40px;align-items:end;padding:18px 24px 16px}
.hband.hxwide .hfigs{margin-top:12px;grid-template-columns:auto auto auto;gap:32px;justify-content:start}
.hband.hxwide .hxfun{margin:0;padding:0;border:0}
.hxcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-top:12px;overflow:hidden}
.hxcard.hxlist{padding:0}
.hxhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 16px 4px}
.hxcard.hxlist .hxhead{padding-bottom:9px;border-bottom:1px solid var(--line2)}
.hxhead h3{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hxhead span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.hxcard .hlist{border:0;border-radius:0;margin:0}
.hxcard .hlist .hmore{border-top:1px solid var(--line2)}
.hxcard .hempty{padding:20px 16px}
.hxneeds{display:flex;flex-direction:column;padding:4px 6px 8px}
.hxneed{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:8px;padding:9px 8px;border-radius:12px;width:100%;text-align:left}
.hxneed:active,.hxneed:hover{background:var(--surface2)}
.hxneed b{font-size:20px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:center;line-height:1;padding:8px 0;border-radius:10px}
.hxneed.hxbad b{color:var(--red);background:var(--red-soft)}.hxneed.hxwarn b{color:var(--amber);background:var(--amber-soft)}.hxneed.hxsoft b{color:var(--accent);background:var(--accent-soft)}
.hxneed span{display:flex;flex-direction:column;min-width:0;gap:1px}
.hxneed em{font-style:normal;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxneed small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hxneed svg{width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.hxclear{display:flex;align-items:center;gap:10px;padding:14px 16px 18px;font-size:14px;color:var(--ink2)}
.hxclear svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:var(--green-soft);border-radius:50%;padding:4px;box-sizing:content-box}
.htile .hs .warn{color:var(--amber);font-weight:600}
.hxhz{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px 10px 12px}
.hxcell{display:flex;flex-direction:column;gap:3px;padding:10px 6px 9px;border-radius:12px;background:var(--surface2);text-align:center;align-items:center;min-width:0}
.hxcell:active,.hxcell:hover{background:var(--accent-soft)}
.hxcell .hk{font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
.hxcell b{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.hxcell.hxbad b{color:var(--red)}
.hxcell small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-variant-numeric:tabular-nums}
.hxcell.hxsoft{background:transparent;border:1px dashed var(--line)}
.hxcell.hxsoft b{color:var(--ink2)}
.hxsvg{display:block;width:100%;height:auto;margin:6px 0 0;padding:0 8px}
.hxsvg .hxg{stroke:var(--line2);stroke-width:1}
.hxsvg .hxb{stroke:var(--line);stroke-width:1}
.hxsvg .hxyl{font:10px var(--sans);fill:var(--faint)}
.hxsvg .hxxl{font:10.5px var(--sans);fill:var(--muted);font-weight:600}
.hxsvg .hxxl.hxcur{fill:var(--ink)}
.hxsvg .hxr{fill:var(--accent)}.hxsvg .hxn{fill:var(--gold)}
.hxsvg .hxr.hxcur{fill:var(--accent);opacity:.55}.hxsvg .hxn.hxcur{fill:var(--gold);opacity:.6}
.hxlegend{display:flex;align-items:center;gap:16px;padding:6px 16px 13px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hxlegend b{color:var(--ink);font-weight:600;margin-left:4px}
.hxlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.hxlegend .hxn{background:var(--gold)}.hxlegend .hxr{background:var(--accent)}
.hxlegend .hxtot{margin-left:auto;color:var(--faint)}
.hxcard .hbars{padding:12px 16px 12px;margin-top:0}
.hxlines{display:flex;flex-direction:column;gap:9px;padding:8px 16px 14px}
.hxline{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) 44px 70px;align-items:center;gap:10px;font-size:12.5px}
.hxline .hxlb{color:var(--ink2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxline .hxlbar{display:block;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
.hxline .hxlbar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.hxline .hxln{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.hxline .hxlm{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hxmoves{display:flex;flex-direction:column}
.hxmove{display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line2);width:100%;text-align:left}
.hxmove:last-child{border-bottom:0}
.hxmove:active,.hxmove:hover{background:var(--surface2)}
.hxmove .hxst{font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 8px;border-radius:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxmove .hxst.hxok{color:var(--green);background:var(--green-soft)}.hxmove .hxst.hxbad{color:var(--red);background:var(--red-soft)}.hxmove .hxst.hxnotice{color:var(--gold-ink);background:#fbf1cf}.hxmove .hxst.hxgen{color:var(--ink2);background:var(--surface2)}
.hxmove .hxwho{display:flex;flex-direction:column;min-width:0;gap:1px}
.hxmove .hxwho b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxmove .hxwho small{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxmove .hxwhen{font-size:11.5px;color:var(--faint);white-space:nowrap;text-align:right}
.hxmove .hxwhen em{font-style:normal;font-weight:700;color:var(--ink2);margin-right:6px}
/* the desk: a twelve-column dashboard */
.hxgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 16px;align-items:start;max-width:1400px}
.hxgrid>div{min-width:0}
.hxgrid .hxa{grid-column:span 12}
.hxgrid .hxb{grid-column:span 4}
.hxgrid .hxc{grid-column:span 5}
.hxgrid .hxd{grid-column:span 3}
.hxgrid .hxe{grid-column:span 12}
.hxgrid .htiles{margin-top:12px}
.hxgrid .hxcard{margin-top:16px}
.hxgrid .hxd .hxhz{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px 8px 12px}
.hxgrid .hxd .hxcell{padding:9px 3px 8px}
.hxgrid .hxd .hxcell b{font-size:19px}
@media (max-width:1240px){
  .hxgrid .hxb{grid-column:span 5}.hxgrid .hxc{grid-column:span 7}
  .hxgrid .hxd{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hxmove .hxst.hxnotice{background:#3a2f12}}
:root[data-theme="dark"] .hxmove .hxst.hxnotice{background:#3a2f12}
.acts{display:flex;gap:8px;padding:12px 18px 14px}
.act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.act svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs{position:sticky;top:0;z-index:2;display:flex;background:var(--surface);border-bottom:1px solid var(--line)}
.tabs button{flex:1;padding:11px 2px 9px;font-size:13.5px;font-weight:600;color:var(--muted);position:relative;white-space:nowrap;text-align:center}
.tabs button small{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:4px;font-weight:500}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accent);border-radius:1px}
.pane{padding-bottom:16px}
.sec{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px 4px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.sec small{font-family:var(--mono);letter-spacing:0;font-weight:500;color:var(--faint)}
.facts{padding:0 18px}
.f{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px;width:100%}
.f .k{color:var(--muted);flex:none}
.f .v{text-align:right;min-width:0;overflow-wrap:anywhere}
.f .v small{font-size:12px}
.f .v .lnk.num{font-family:var(--mono);font-weight:500;font-size:14px}
.lnk{color:var(--accent);font-weight:600;font-size:13px;white-space:nowrap}
.lnk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;vertical-align:-2px;transform:rotate(180deg)}
.tl{padding:0 18px}
.ev{display:grid;grid-template-columns:84px minmax(0,1fr) auto;column-gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.5px;align-items:baseline}
.ev .d{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ev .t{overflow-wrap:anywhere}
.ev .w{font-family:var(--mono);font-size:11px;color:var(--faint)}
.ev.note .t{padding-left:10px;border-left:2px solid var(--gold);color:var(--ink);white-space:pre-wrap}
.ev.note .t b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:1px}
.term{padding:10px 18px 4px;border-bottom:1px solid var(--line2)}
.term .h{display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;align-items:baseline;font-size:14px;font-weight:600}
.term .h .m{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.term .h .m small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;text-align:right}
.term .h .m small.owing{color:var(--red)}
.txn{display:grid;grid-template-columns:84px minmax(0,1fr) auto;column-gap:10px;padding:6px 0;font-size:13px;color:var(--ink2)}
.txn .d{font-family:var(--mono);font-size:12px;color:var(--muted)}
.txn .m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.comp{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:8px 12px}
.comp .field{display:flex;align-items:flex-end;gap:8px}
.comp textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);line-height:1.35;min-height:38px;max-height:120px}
.comp textarea::placeholder{color:var(--faint)}
.comp .save{height:38px;padding:0 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:13.5px;flex:none}
.comp .save[disabled]{opacity:.45;cursor:default}
.comp .hint{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);padding:6px 4px 0}
.comp .hint button{color:var(--muted);font-weight:600}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-radius:18px 18px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.sheet h3{margin:12px 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sw{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(18px)}

/* ── desk ────────────────────────────────────────────────────────────────────────────────── */
.desk-app{display:grid;grid-template-columns:208px minmax(0,1fr);height:100%;background:var(--surface);position:relative;overflow:hidden}
.rail{border-right:1px solid var(--line);padding:18px 10px;display:flex;flex-direction:column;gap:3px;background:var(--surface2)}
.rail .brand{display:flex;align-items:center;gap:9px;padding:4px 10px 20px;font-weight:700;letter-spacing:-.02em;font-size:15px;white-space:nowrap}
.rail .brand i{width:11px;height:11px;border-radius:3px;background:var(--gold);flex:none}
.rail .brand em{font-style:normal;color:var(--muted);font-weight:500}
.rail .nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.rail .nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail .nav.on{color:var(--ink);background:var(--surface);box-shadow:inset 3px 0 0 var(--gold),0 1px 2px rgba(20,31,44,.08)}
.rail .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;font-size:13px;color:var(--ink2);white-space:nowrap}
.rail .me.on{background:var(--surface);box-shadow:inset 3px 0 0 var(--gold),0 1px 2px rgba(20,31,44,.08)}
.rail .me .who{width:28px;height:28px;font-size:11px;flex:none}
@media (max-width:1599px){
  .desk-app{grid-template-columns:64px minmax(0,1fr)}
  .rail .brand span,.rail .nav span,.rail .me span:not(.who){display:none}
  .rail .nav{justify-content:center;padding:10px 0}
  .rail .me{justify-content:center;padding:8px 0}
}
.main{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.toolbar{display:flex;align-items:center;gap:12px;padding:14px 24px 10px;flex-wrap:wrap}
.toolbar h1{margin:0 10px 0 0;font-size:24px;font-weight:700;letter-spacing:-.025em}
.toolbar .search{margin:0;width:360px;flex:none}
.toolbar .seg{flex:none;width:330px}
.main .facts{max-width:520px}
.main .acts{max-width:200px}
.tbl-wrap{flex:1;min-height:0;overflow:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px}
.tbl th{position:sticky;top:0;z-index:2;background:var(--surface);text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.tbl th:first-child,.tbl td:first-child{padding-left:24px}
.tbl th.r,.tbl td.r{text-align:right}
/* phase467: every column has a grip; a drag sets its width, kept on the device and on the login */
.tbl th{overflow:visible}
.tbl th .colgrip{position:absolute;top:0;right:-5px;width:10px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
.tbl th .colgrip::after{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:2px;border-radius:1px;background:transparent;transition:background .12s}
.tbl th:hover .colgrip::after{background:var(--line)}
.tbl th .colgrip:hover::after,.tbl th .colgrip.on::after{background:var(--accent)}
body.colresize,body.colresize *{cursor:col-resize!important;user-select:none}
/* phase467: the retention ratio where the renewals are */
.rret{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;padding:0 18px 8px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rret .rk{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-right:2px}
.rret b{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.rret b.low{color:var(--red)}.rret b.mid{color:var(--amber)}
.rret i{font-style:normal;color:var(--faint);margin:0 2px}
.toolbar.sub .rret{padding:0;margin-left:auto;margin-right:12px;white-space:nowrap}
/* phase467: the appearance choice on Me */
.mrow .aseg,.aseg{display:inline-flex;flex-direction:row;flex:none;align-items:center;gap:2px;background:var(--surface2);border-radius:10px;padding:3px}
.aseg button{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.aseg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,31,44,.12)}
.tbl th.on{color:var(--ink)}
.tbl th i{font-style:normal;margin-left:4px;color:var(--accent)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.tbl td.nm{font-weight:600}
.tbl td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl td.soon{color:var(--amber);font-weight:500}
.tbl td.past{color:var(--red);font-weight:500}
.tbl td.owing{color:var(--red)}
.tbl td.credit{color:var(--green)}
.tbl td.zero{color:var(--faint)}
.tbl tr.trow{cursor:pointer}
.tbl tr.trow:hover td{background:var(--surface2)}
.tbl tr.trow.sel td{background:var(--accent-soft)}
.tbl tr.trow.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tbl tr.band td{position:sticky;top:37px;z-index:1;background:var(--surface);padding:12px 12px 6px 24px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted);border-bottom:0}
.tbl tr.band.past td{color:var(--red)}
.tbl tr.band td small{font-family:var(--mono);letter-spacing:0;font-weight:500;color:var(--faint);margin-left:8px}
.tbl td.empty{padding:48px 24px;text-align:center;color:var(--muted);white-space:normal}
.panel{position:absolute;top:0;right:0;bottom:0;width:min(980px,80%);background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 48px rgba(20,31,44,.16);z-index:4;display:flex;flex-direction:column;min-width:0}
@media (prefers-reduced-motion:no-preference){
  .panel{animation:slide .2s ease-out}
  @keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
}
.ptop{display:flex;align-items:center;gap:6px;padding:10px 14px 0}
.xbtn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:21px;color:var(--muted);line-height:1}
.xbtn:hover{background:var(--surface2);color:var(--ink)}
.rec{display:flex;flex-direction:column;height:100%;min-height:0}
.rec-head{padding:6px 28px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 32px;align-items:start}
.rec-head .ban{grid-column:1/-1;margin:0}
.rec-head .ident{padding:0}
.rec-head .hero{padding:0;grid-template-columns:auto auto;gap:32px;justify-content:end;text-align:right}
.rec-head .acts{padding:0;grid-column:2;justify-content:flex-end}
.rec-head .act{flex:none;padding:0 16px}
.rec-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.rec-grid.wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.rec-grid.wide.closed{grid-template-columns:40px minmax(0,1fr)}
.rec-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.rec-main .tabs{position:static;padding:0 16px;justify-content:flex-start}
.rec-main .tabs button{flex:none;padding:12px 14px 10px}
.rec-main .pane{flex:1;min-height:0;overflow:auto;padding:0 12px 20px}
.rec-main.closed{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:8px;background:var(--surface2)}
.rec-main.closed .lt svg{transform:rotate(180deg)}
.lt{width:32px;height:38px;display:grid;place-items:center;color:var(--muted);border-radius:8px;flex:none;margin:2px 2px 0 0}
.lt svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lt:hover{background:var(--surface2);color:var(--ink)}
.vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:10px;white-space:nowrap}
.rec-side{border-left:1px solid var(--line);overflow:auto;min-height:0;padding-bottom:24px;background:var(--surface2)}
.rec-side .sec:first-child{padding-top:14px}
.rec-side .facts.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.rec-side .facts.grid2 .f{min-width:0}
.rec-side .f .v{white-space:normal}
.panel .body{flex:1;min-height:0;overflow:auto}

/* ── management: whose book? ─────────────────────────────────────────────────────────────── */
.picker{position:fixed;inset:0;overflow:auto;background:var(--bg);display:flex;justify-content:center;align-items:flex-start;padding:24px}
.pcard{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 0 6px;margin-top:4vh}
.ptitle{padding:0 22px 14px}
.ptitle .brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.ptitle .brand i{width:12px;height:12px;border-radius:3px;background:var(--gold)}
.ptitle .brand em{font-style:normal;color:var(--muted);font-weight:500}
.psub{color:var(--muted);font-size:13px;margin-top:4px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;width:100%;padding:12px 22px;border-top:1px solid var(--line2);font-size:15px}
.prow:hover{background:var(--surface2)}
.prow small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.prow .num{color:var(--ink2);font-size:13px;white-space:nowrap}
.pfoot{padding:12px 22px 8px;border-top:1px solid var(--line2)}

/* ── filters: an anchored popover, not a sheet ───────────────────────────────────────────── */
.fchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.toolbar .fchips{padding:0;flex-basis:100%}
.fchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px 4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:600}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip b{font-weight:500;color:var(--muted)}
.fchip i{font-style:normal;font-size:15px;line-height:1;opacity:.7}
.tbl td .st-lapsed,.tbl td .st-cancelled{margin-left:6px}

/* ── the filter bar: pills, chips, count ───────────────────────────────────────────────── */
.pills{display:flex;gap:6px;align-items:center;padding:0 14px 6px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.pills::-webkit-scrollbar{display:none}
.toolbar .pills{padding:0;flex-basis:100%;flex-wrap:wrap;overflow:visible}
.pill{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap;flex:none}
.pill i{font-style:normal;font-size:10px;color:var(--faint)}
.pill b{font-weight:600;color:var(--muted)}
.pill.on{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)}
.pill.on b{color:var(--accent)}
.pill.add{color:var(--accent);border-style:dashed}
.pills .lnk{margin-left:4px;flex:none}
.count{padding:0 18px 6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.toolbar .count{padding:0;margin-left:auto;flex-basis:auto}
.fchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.toolbar + .fchips{padding:0 24px 8px}
.fchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px 4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip i{font-style:normal;font-size:15px;line-height:1;opacity:.7;padding:0 2px}
.fchip i:hover{opacity:1;color:var(--red)}
.tbl th.sortable{cursor:pointer}
.tbl th:not(.sortable){cursor:default}

/* ── the panel: anchored on the desk, a sheet on the phone ────────────────────────────── */
.fpanel{position:fixed;z-index:60;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;font-size:14px}
.fpanel.sheet{left:0;right:0;bottom:0;width:auto;max-height:78vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.fph{display:flex;align-items:center;gap:8px;padding:9px 8px 9px 14px;border-bottom:1px solid var(--line2);flex:none}
.fph b{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpb,.fpx{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:20px;line-height:1;flex:none}
.fpb:hover,.fpx:hover{background:var(--surface2);color:var(--ink)}
.fpo{height:30px;max-width:46%;border:1px solid var(--line);border-radius:8px;background:var(--surface2);padding:0 8px;font:inherit;font-size:12.5px;color:var(--ink)}
.fps{border:0;border-bottom:1px solid var(--line2);padding:9px 14px;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);outline:none;flex:none;width:100%}
.fpl{overflow:auto;padding:4px 0;flex:1 1 auto;min-height:0}
.fpg{padding:9px 14px 4px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.fpg:empty{padding:3px 0;border-top:1px solid var(--line2);margin-top:3px}
.fpi{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:8px 14px;font-size:14px;color:var(--ink)}
.fpi small{color:var(--faint);font-size:11.5px;white-space:nowrap}
.fpi:hover,.fpi.hi{background:var(--surface2)}
.fpi.on{color:var(--accent);font-weight:600}
.fpi.bad{color:var(--red)}
.fpv{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.fpv input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.fpv span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpv small{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.fpv:hover{background:var(--surface2)}
.fpv.on{color:var(--accent);font-weight:600}
.fpn{padding:6px 14px 8px;font-size:12px;color:var(--muted);display:block}
.fpn.chk{display:flex;align-items:center;gap:8px;padding-top:2px}
.fpb2{display:flex;align-items:center;gap:8px;padding:10px 14px}
.fpb2.two{display:grid;grid-template-columns:1fr auto 1fr}
.fpb2.form{flex-direction:column;align-items:stretch;gap:2px;padding:4px 0 8px}
.fpb2 span{color:var(--faint)}
.fpt{width:100%;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);padding:0 10px;font:inherit;font-size:14px;color:var(--ink);min-width:0}
.fpb2.form .fpt{width:auto;margin:0 14px 6px}
.fpe{padding:24px 14px;text-align:center;color:var(--muted);font-size:13px}
.fpf{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px 10px;border-top:1px solid var(--line2);flex:none}
.fpf .lnk.bad{color:var(--red)}
.fpd{height:34px;padding:0 16px;border-radius:9px;background:var(--accent);color:#fff;font-weight:600;font-size:13.5px}

/* ── sign-in verification (phase455) ────────────────────────────────────────────────────── */
.lcard.mfa{padding:24px 22px 22px}
.lcard.mfa .brand{margin-bottom:14px}
.mtitle{margin:0;font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.msub{margin:3px 0 16px;color:var(--muted);font-size:13px}
.mstep{display:flex;align-items:flex-start;gap:10px;margin:14px 0 8px}
.mstep .mnum{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:11.5px;font-weight:700;margin-top:1px}
.mstep .mnum svg{width:13px;height:13px}
.mstep b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.mstep small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.qrbox{display:grid;place-items:center;margin:4px 0 8px;min-height:196px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.qrbox .qr{width:172px;height:172px;display:block;border-radius:8px;background:#fff;padding:8px;box-shadow:0 1px 2px rgba(20,31,44,.08)}
.qrbox .qrwait{color:var(--muted);font-size:13px}
.mkey{margin:0 0 4px;font-size:12.5px}
.mkey > .lnk{padding:4px 0}
.mkeybox{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:9px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--surface2)}
.mkeybox code{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink);word-break:break-all}
.otp{position:relative;margin:2px 0 0}
.otp-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent;border:0;padding:0;margin:0;background:none}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp-cells i{height:52px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface2);display:grid;place-items:center;font-family:var(--mono);font-style:normal;font-size:22px;font-weight:600;color:var(--ink);transition:border-color .12s,box-shadow .12s,transform .12s}
.otp-cells i.filled{border-color:var(--ink2);background:var(--surface)}
.otp.focus .otp-cells i.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.otp.focus .otp-cells i.active:empty::after{content:"";width:2px;height:22px;background:var(--accent);animation:otpblink 1s steps(2) infinite}
@keyframes otpblink{to{opacity:0}}
.otp.shake .otp-cells{animation:otpshake .35s ease}
@keyframes otpshake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.lcard .lerr{min-height:1em;margin:8px 0 0}
/* .lcard label (0,1,1) outranks a bare .remember (0,1,0): every rule here carries .lcard */
.lcard label.remember{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line2);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;font-size:14px;color:var(--ink);position:relative}
.lcard .remember input{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:0;top:0}
.lcard .remember .sw{flex:none;display:block;width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background .15s}
.lcard .remember .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.lcard .remember input:checked + .sw{background:var(--green)}
.lcard .remember input:checked + .sw::after{transform:translateX(18px)}
.lcard .remember input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px}
.lcard .remember .rl{display:flex;flex-direction:column;font-size:14px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.lcard .remember .rl small{font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.lcard.mfa .lbtn{margin-top:16px}
.lcard .lfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:12px;color:var(--muted)}
.lcard .lnk{color:var(--accent);font-weight:600;font-size:13px}
.lcard .muted{color:var(--muted)}

/* ── Me ──────────────────────────────────────────────────────────────────────────────────── */
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.mlist{padding:0 18px}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px;width:100%}
.mrow > span{display:flex;flex-direction:column;min-width:0}
.mrow b{font-weight:600}
.mrow small{color:var(--muted);font-size:12px}
.mrow em{font-style:normal;color:var(--green);font-size:12px;font-weight:600;margin-left:6px}
.mrow .lnk{color:var(--accent);font-weight:600;flex:none}
.mrow .muted{color:var(--muted)}
.mrow.act-row{border-bottom:0;padding-top:8px}
.mrow.switch{cursor:pointer}
.mrow.switch input{width:44px;height:26px;appearance:none;-webkit-appearance:none;background:var(--line);border-radius:13px;position:relative;flex:none;cursor:pointer;transition:background .15s;margin:0}
.mrow.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.mrow.switch input:checked{background:var(--green)}
.mrow.switch input:checked::after{transform:translateX(18px)}
.mrow.switch input:disabled{opacity:.5;cursor:default}
.minput{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);padding:0 10px;font:inherit;font-size:14px;color:var(--ink);width:170px;text-align:right}
.merr{margin:8px 18px 0;color:var(--red);font-size:13px}
.mepage{max-width:560px;padding-bottom:24px}
.scrim{position:absolute;inset:0;z-index:20;background:rgba(20,31,44,.45);display:flex;align-items:flex-end;justify-content:center}
.msheet{width:100%;max-height:92%;overflow:auto;background:var(--surface);border-radius:18px 18px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.msheet .lcard{box-shadow:none;border:0;padding:4px 0 0;max-width:none;width:100%}
@media (min-width:960px){ .scrim{align-items:center} .msheet{width:440px;max-height:90vh;border-radius:16px;padding:18px 22px 22px} }

/* ── Notes (phase456): the list, the thread, the badge ────────────────────────────────────── */
.badge{position:absolute;top:2px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1}
.badge[hidden]{display:none}
.rail .nav{position:relative}
.rail .nav .badge{position:static;margin-left:auto}
/* ⛔ `.nrow`, not `.trow` — the desktop policy table's <tr> wears `trow` (a grid on it stacks the cells) */
.nrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:12px 18px;border-bottom:1px solid var(--line2);width:100%;text-align:left}
.nrow .nl{display:flex;flex-direction:column;min-width:0;gap:2px}
.nrow .nl b{font-weight:600;font-size:14px}
.nrow .nn{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .nn small{color:var(--muted);margin-left:6px;font-size:11.5px}
.nrow .np{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.nrow .np em{font-style:normal;font-weight:600;color:var(--ink2)}
.nrow.unread .np{color:var(--ink);font-weight:500}
.nrow .nr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.nrow .nt{font-size:11.5px;color:var(--faint);font-family:var(--mono)}
.nrow .nb{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.nrow .ns{font-size:11px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.nrow .ns.answered{color:var(--green)}
.body.chat{display:flex;flex-direction:column;justify-content:flex-end;overflow:auto;background:var(--bg)}
.msgs{display:flex;flex-direction:column;gap:10px;padding:14px 16px 10px;min-height:100%;justify-content:flex-end}
.msg{max-width:82%;display:flex;flex-direction:column;gap:3px}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.theirs{align-self:flex-start}
.msg .bub{padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.38;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 1px rgba(20,31,44,.04)}
.msg.mine .bub{background:var(--accent);color:#fff;border-color:var(--accent);border-bottom-right-radius:5px}
.msg.theirs .bub{border-bottom-left-radius:5px}
.msg .meta{font-size:11px;color:var(--faint);padding:0 6px}
.comp.closedbar{padding:12px 18px calc(12px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px;text-align:center;border-top:1px solid var(--line2)}
.ev.note[data-thread]{cursor:pointer}
.ev.note.reply .t b{color:var(--green)}
.notespage{max-width:640px}
.notespage .list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.panel.chatpanel{display:flex;flex-direction:column}
.panel.chatpanel .body.chat{flex:1;min-height:0}

/* ── Renewals (phase457): the month strip, the case ───────────────────────────────────────── */
.mstrip{display:flex;align-items:center;gap:6px;padding:4px 14px 8px;overflow:hidden}
.mstrip .mscroll{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mstrip .mscroll::-webkit-scrollbar{display:none}
.mstrip .mc{flex:none;display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.mstrip .mc small{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--faint);margin-top:1px}
.mstrip .mc.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.mstrip .mc.on small{color:var(--surface);opacity:.75}
.mstrip .mc.now:not(.on){border-color:var(--gold);color:var(--ink)}
.mstrip .mc.empty{opacity:.55}
.mstrip .ysel{flex:none;display:flex;align-items:center;gap:2px;margin-right:4px;padding:2px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.mstrip .ynav{width:28px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.mstrip .ynav:disabled{opacity:.35}
.mstrip .ynav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mstrip .yyear{appearance:none;-webkit-appearance:none;border:0;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;padding:0 8px;height:30px;border-radius:9px;box-shadow:0 1px 2px rgba(20,31,44,.12);cursor:pointer;text-align:center;text-align-last:center}
.mstrip .mnav{flex:none;width:30px;height:30px;border-radius:50%;display:none;place-items:center;color:var(--muted);border:1px solid var(--line2)}
.toolbar .mstrip .mnav{display:grid}   /* the phone swipes the months; the desktop gets arrows */
.mstrip .mnav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toolbar .mstrip{padding:0;flex:1;min-width:0}
.row .pm{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.row .pm .d{font-weight:600}
.row .pm .up{color:var(--red)} .row .pm .down{color:var(--green)}
.row .pm .nq{color:var(--faint);font-family:var(--sans)}
.stg{font-size:12px;font-weight:600}
.stg.normal{color:var(--muted)} .stg.notice{color:var(--amber)} .stg.contacted{color:var(--accent)} .stg.terminal_renewed{color:var(--green)} .stg.terminal_nonrenewed,.stg.terminal_lapsed,.stg.lapsed{color:var(--red)}
.cfacts{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:6px 18px 4px}
.cfacts.ccontact{margin-top:2px;padding-top:8px;border-top:1px solid var(--line2)}
.cfacts.ccontact .f .v{overflow-wrap:anywhere}
.cfacts.ccontact .wa{margin-left:10px;color:var(--green);font-weight:600;font-size:12.5px;white-space:nowrap}
.cfacts .f{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--line2)}
.cfacts .f .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cfacts .f .v{font-size:15px;color:var(--ink);margin-top:2px;overflow-wrap:anywhere;text-align:left;min-width:0}
.cfacts .f{align-items:flex-start}
.cfacts .f .v.num{font-family:var(--mono)}
.cfacts .f.wide{grid-column:1 / -1}
.cfacts .f .v .up{color:var(--red)} .cfacts .f .v .down{color:var(--green)}
.cline{padding:10px 18px 0;font-size:13px;color:var(--ink2)}
.cline b{font-weight:600;color:var(--ink)}
.cline .muted{color:var(--muted)}
/* documents (phase458 · I4): the issued copy, reproduced in a sandboxed frame at the page's own size, scaled to fit */
.ndoc-list{padding:0 18px}
.ndoc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;width:100%;padding:10px 0;border-bottom:1px solid var(--line2);text-align:left}
.ndoc-row .k{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.ndoc-row .s{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.ndoc-row .v{color:var(--accent);font-weight:600;font-size:13px;white-space:nowrap}
.ndoc-row.off{cursor:default}
.ndoc-row.off .k{color:var(--muted)}
.ndoc-body{background:var(--surface2);padding:12px;min-height:100%}
.ndoc-frame{position:relative;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(20,31,44,.12),0 10px 30px rgba(20,31,44,.14)}
.ndoc-frame iframe{display:block;border:0;width:816px;height:1056px;transform-origin:0 0;background:#fff}
.rec-head .nm small{font-size:12.5px;font-weight:400;color:var(--muted)}
/* ── the quick verbs on a row (phase465): the contact and a note, a popup that never leaves the list ── */
.row[role=button]{outline:none}
.row[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.row .rowv{margin-top:auto;display:flex;gap:6px;padding-top:6px}
.rowvb{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);background:var(--surface);transition:color .12s,border-color .12s,background .12s}
.rowvb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rowvb:active,.rowvb:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.rowvb:disabled{opacity:.3;cursor:default;background:var(--surface);color:var(--muted);border-color:var(--line)}
td.rowvcell{padding:4px 8px 4px 0;text-align:right;white-space:nowrap}
td.rowvcell .rowv{display:inline-flex;gap:6px;padding:0;opacity:0;transition:opacity .12s}
tr:hover td.rowvcell .rowv,tr.sel td.rowvcell .rowv,td.rowvcell .rowv:focus-within{opacity:1}
/* the popup: the filter panel's anatomy, animated — a rise on the desk, a slide up on the phone */
.fscrim{position:fixed;inset:0;z-index:59;background:transparent}
/* the callout: the panel anchored to its icon with a caret, scaling out of the caret's point */
.fpanel.callout{overflow:visible;border-radius:16px;box-shadow:0 10px 30px rgba(20,31,44,.16),0 2px 6px rgba(20,31,44,.08)}
.fpanel.callout::after{content:"";position:absolute;width:14px;height:14px;left:calc(var(--cx) - 7px);background:var(--surface);border:1px solid var(--line);transform:rotate(45deg)}
.fpanel.callout.up::after{bottom:-8px;border-top:0;border-left:0}
.fpanel.callout.down::after{top:-8px;border-bottom:0;border-right:0}
.fpanel.callout .qpbody{flex:1 1 auto;min-height:0}
.rowvb.on{color:#fff;border-color:var(--accent);background:var(--accent)}
.rowvb.on:hover{color:#fff;background:var(--accent)}
td.rowvcell .rowv:has(.on){opacity:1}
@media (prefers-reduced-motion:no-preference){
  .fpanel{animation:fprise .18s ease-out}
  @keyframes fprise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  .fpanel.sheet{animation:fpup .24s cubic-bezier(.2,.8,.2,1)}
  @keyframes fpup{from{transform:translateY(100%)}to{transform:none}}
  .fpanel.callout{animation:fpop .26s cubic-bezier(.3,1.35,.45,1)}
  @keyframes fpop{from{opacity:0;transform:scale(.4)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
  .fpanel.out{animation:fpout .11s ease-in forwards;pointer-events:none}
  .fpanel.sheet.out{animation:fpdown .16s ease-in forwards}
  @keyframes fpout{to{opacity:0;transform:scale(.9)}}
  @keyframes fpdown{to{transform:translateY(100%)}}
}
@media (prefers-reduced-motion:reduce){.fpanel.out{display:none}}
.fph.qph{align-items:flex-start}
.qpt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:4px 0}
.qpt b{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qpt small{font-size:12.5px;color:var(--muted)}
.qpbody{padding:6px 14px 10px;overflow:auto}
.qprow{display:grid;grid-template-columns:64px minmax(0,1fr);row-gap:6px;column-gap:10px;padding:11px 0;border-bottom:1px solid var(--line2);align-items:center}
.qprow:last-child{border-bottom:0}
.qpk{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.qpv{font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.qpas{grid-column:2;display:flex;gap:8px;flex-wrap:wrap}
.qpa{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--accent);background:var(--surface)}
.qpa svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qpa.wa{color:var(--green)}
.qpa:active{background:var(--accent-soft)}
.qpempty{padding:18px 4px;color:var(--muted);font-size:13.5px}
.qpctx{margin:4px 0 10px;padding:9px 12px;border-radius:10px;background:var(--surface2);font-size:13px;color:var(--ink2);line-height:1.4}
.qpctx em{font-style:normal;font-weight:700;color:var(--ink);margin-right:6px}
.qpctx small{display:block;margin-top:3px;font-size:11.5px;color:var(--faint)}
.qpta{width:100%;min-height:88px;resize:vertical;border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.qpta:focus{border-color:var(--accent);background:var(--surface)}
.qpfoot{display:flex;justify-content:flex-end;gap:8px;padding:8px 14px 12px;border-top:1px solid var(--line2)}
.qpgo{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border-radius:10px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:600}
.qpgo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qpgo:disabled{opacity:.45;cursor:default}
.acts .act.danger{color:var(--red);border-color:var(--red-soft);background:var(--red-soft)}
.tl .ev .t small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.vsheet h3{margin:10px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.vsheet p{margin:0 0 10px;color:var(--ink2);font-size:14px}
.vsheet textarea{width:100%;min-height:74px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);resize:vertical}
.vsheet .rlist{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.vsheet .rlist label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);font-size:14px;cursor:pointer}
.vsheet .rlist input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.vsheet .rlist label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.vsheet .vbtns{display:flex;gap:8px;margin-top:12px}
.vsheet .vbtns button{flex:1;height:44px;border-radius:11px;font-weight:600;font-size:15px;text-align:center;border:1px solid var(--line)}
.vsheet .vbtns .go{background:var(--accent);color:#fff;border-color:var(--accent)}
.vsheet .vbtns .go.danger{background:var(--red);border-color:var(--red)}
.vsheet .vbtns button[disabled]{opacity:.55}
.tbl td .stg{font-size:12.5px}
.tbl td.pm{font-family:var(--mono)}
.tbl td .up{color:var(--red)} .tbl td .down{color:var(--green)}