/* A register, not a brochure: fixed rail of sections on the left, one
   working surface on the right, hairline rules instead of floating cards.
   Navy and gold are the brand's own; the neutral is biased toward the
   navy so the greys never read as a default. */
:root{
  --ink:#0C1A36; --navy:#1E3B6E; --gold:#F5A623;
  --bg:#F6F7FB; --surface:#FFFFFF; --raise:#FBFCFE;
  --fg:#141D30; --muted:#5B6780; --faint:#8894AC;
  --line:#DDE3EE; --soft:#EDF0F6;
  --good:#136B42; --goodbg:#E4F2EA;
  --warn:#8A5000; --warnbg:#FCF0DA;
  --bad:#9B1C1C;  --badbg:#FAE9E9;
  --info:#24549B; --infobg:#E7EFFB;
  --ui:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rail:236px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#050A14; --navy:#8FAFE8; --gold:#F7BC4E;
  --bg:#0C121E; --surface:#141C2C; --raise:#18212F;
  --fg:#E7EBF3; --muted:#9BA7BE; --faint:#77839B;
  --line:#28324A; --soft:#1B2435;
  --good:#5CCB92; --goodbg:#11291D;
  --warn:#F0B95C; --warnbg:#2C2110;
  --bad:#F08A8A;  --badbg:#2C1414;
  --info:#8FB5F0; --infobg:#111E33;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#050A14; --navy:#8FAFE8; --gold:#F7BC4E;
  --bg:#0C121E; --surface:#141C2C; --raise:#18212F;
  --fg:#E7EBF3; --muted:#9BA7BE; --faint:#77839B;
  --line:#28324A; --soft:#1B2435;
  --good:#5CCB92; --goodbg:#11291D;
  --warn:#F0B95C; --warnbg:#2C2110;
  --bad:#F08A8A;  --badbg:#2C1414;
  --info:#8FB5F0; --infobg:#111E33;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.011em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

/* ---------------------------------------------------------------- shell */
.shell{display:flex;min-height:100%}
.rail{width:var(--rail);flex:0 0 var(--rail);background:var(--ink);
  color:#E8ECF4;display:flex;flex-direction:column;
  padding-block:18px 14px;position:sticky;overflow-y:auto;
  top:env(safe-area-inset-top,0px);height:100vh}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:0 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.brand .mk{width:26px;height:26px;border-radius:7px;flex:0 0 26px;
  background:linear-gradient(145deg,var(--gold),#D98A12);
  display:grid;place-items:center;color:#241200;font-weight:700;font-size:14px}
.brand b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;display:block;line-height:1.2}
.brand span{font-size:10.5px;color:#93A3C0;letter-spacing:.06em;text-transform:uppercase}
.navgrp{padding:12px 14px 5px;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:#7183A5;font-weight:600}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.rail>.nav:last-of-type{margin-bottom:auto}
.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:8px 10px;border-radius:7px;color:#BCC7DC;
  font-size:13.5px;cursor:pointer;line-height:1.3}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button[aria-current="true"]{background:var(--navy);color:#fff;font-weight:600}
.nav .ic{width:17px;flex:0 0 17px;opacity:.9}
.nav .tag{margin-left:auto;font:600 10.5px/1 var(--mono);padding:3px 6px;
  border-radius:20px;background:var(--bad);color:#fff}
.railfoot{padding:12px 18px 0;margin-top:10px;border-top:1px solid rgba(255,255,255,.1);
  font-size:11.5px;color:#7183A5}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:14px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top h1{font-size:19px;font-weight:600}
.top .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.spring{margin-left:auto}
.wrap{padding:22px 26px 56px;max-width:1180px;width:100%}

/* --------------------------------------------------------------- pieces */
.banner{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;
  border-radius:9px;border:1px solid;margin-bottom:20px;font-size:13.5px}
.banner b{display:block;margin-bottom:1px}
.banner.bad{background:var(--badbg);border-color:color-mix(in srgb,var(--bad) 32%,transparent);color:var(--bad)}
.banner.info{background:var(--infobg);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.banner.warn{background:var(--warnbg);border-color:color-mix(in srgb,var(--warn) 34%,transparent);color:var(--warn)}
.banner .act{margin-left:auto;flex:0 0 auto;align-self:center}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);
  padding:7px 13px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;
  white-space:nowrap}
.btn:hover{border-color:var(--navy)}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.pri:hover{filter:brightness(1.12)}
.btn.sm{padding:5px 10px;font-size:12px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;margin-bottom:22px}
.tile{background:var(--surface);padding:15px 17px}
.tile .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.tile .v{font:600 27px/1.15 var(--ui);font-variant-numeric:tabular-nums;
  margin-top:7px;letter-spacing:-.02em}
.tile .n{font-size:12px;color:var(--muted);margin-top:4px}

.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;margin-bottom:20px}
.phead{display:flex;align-items:center;gap:12px;padding:13px 17px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.phead h2{font-size:14.5px;font-weight:600}
.phead .note{font-size:12.5px;color:var(--muted)}
.pbody{padding:17px}

.tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  padding:12px 17px;border-bottom:1px solid var(--line);background:var(--raise)}
.srch{flex:1;min-width:170px;position:relative}
.srch input{width:100%;padding:8px 11px 8px 31px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:var(--fg);font-size:13px}
.srch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;color:var(--faint)}
select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--fg);font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);padding:5px 11px;
  border-radius:20px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);
  color:#fff;font-weight:500}

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--raise)}
td{padding:10px 14px;border-bottom:1px solid var(--soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr[data-click]{cursor:pointer}
tbody tr[data-click]:hover{background:var(--raise)}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.nm{font-weight:500}
.dim{color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;
  border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.g{background:var(--goodbg);color:var(--good)}
.pill.w{background:var(--warnbg);color:var(--warn)}
.pill.r{background:var(--badbg);color:var(--bad)}
.pill.b{background:var(--infobg);color:var(--info)}
.pill.n{background:var(--soft);color:var(--muted)}
.lvl{font-size:11.5px;padding:2.5px 8px;border-radius:5px;background:var(--soft);
  color:var(--muted);font-weight:500;white-space:nowrap}

.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);margin-bottom:4px;font-size:14px}
.foot{padding:11px 17px;border-top:1px solid var(--line);background:var(--raise);
  font-size:12.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ----------------------------------------------------------- bar chart */
.bars{display:flex;flex-direction:column;gap:11px}
.bar{display:grid;grid-template-columns:132px 1fr 46px;gap:12px;align-items:center}
.bar .lab{font-size:13px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{height:9px;background:var(--soft);border-radius:5px;overflow:hidden}
.bar .fill{height:100%;border-radius:5px;background:var(--navy)}
.bar .fill.gold{background:var(--gold)}
.bar .fill.zero{background:var(--line)}
.bar .val{font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right}

/* -------------------------------------------------------------- drawer */
.scrim{position:fixed;inset:0;background:rgba(8,14,26,.42);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .16s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:70;
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .2s ease;
  display:flex;flex-direction:column;overflow:hidden}
.drawer.on{transform:none}
.dhead{padding:17px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:12px}
.dhead h3{font-size:17px;font-weight:600}
.dhead .s{font-size:12.5px;color:var(--muted);margin-top:3px}
.x{background:none;border:0;font-size:21px;line-height:1;color:var(--muted);
  cursor:pointer;padding:2px 5px;margin-left:auto}
.dbody{padding:6px 20px 24px;overflow-y:auto;flex:1}
.dsec{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:20px 0 9px}
.kv{display:grid;grid-template-columns:118px 1fr;gap:7px 14px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}

/* -------------------------------------------------------------- import */
.drop{border:2px dashed var(--line);border-radius:11px;padding:32px 20px;
  text-align:center;background:var(--raise)}
.drop .big{font-size:15px;font-weight:600;margin-bottom:5px}
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-top:18px}
.step{background:var(--surface);padding:14px 16px;display:flex;gap:13px}
.step .n{width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:var(--navy);
  color:#fff;display:grid;place-items:center;font:600 11.5px/1 var(--mono)}
.step .n.done{background:var(--good)}
.step b{display:block;font-size:13.5px;margin-bottom:2px}
.step p{margin:0;font-size:12.5px;color:var(--muted)}
.ledger{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.lrow{background:var(--surface);padding:11px 15px;display:flex;
  align-items:center;gap:12px;font-size:13px}
.lrow .v{margin-left:auto;font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.lrow.tot{background:var(--raise);font-weight:600}

/* ------------------------------------------------------------ settings */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.field input{width:100%;padding:8px 11px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:var(--fg);font-size:13px}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px}
.danger{border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.danger .phead{border-color:color-mix(in srgb,var(--bad) 22%,transparent)}
.danger .phead h2{color:var(--bad)}

/* --------------------------------------------------------- responsive */
@media (max-width:860px){
  .shell{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static;padding-block:12px 8px}
  .brand{padding-bottom:11px;margin-bottom:8px}
  .nav{flex-direction:row;overflow-x:auto;gap:5px;padding-bottom:3px}
  .nav button{white-space:nowrap;width:auto;padding:7px 12px}
  .nav .ic,.navgrp,.railfoot{display:none}
  .top,.wrap{padding-left:16px;padding-right:16px}
  .row2{grid-template-columns:1fr}
  .bar{grid-template-columns:104px 1fr 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ------------------------------------------------- sortable headers */
th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  gap:4px;white-space:nowrap}
th a:hover{color:var(--navy)}
th a .ar{opacity:0;font-size:9px;transition:opacity .1s}
th a:hover .ar{opacity:.45}
th[aria-sort] a{color:var(--navy)}
th[aria-sort] a .ar{opacity:1}
a{color:var(--navy)}

/* -------------------------------------------------------- sign in */
.signin{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:28px;width:100%;max-width:370px}
.card .mk{width:38px;height:38px;border-radius:10px;margin-bottom:16px;
  background:linear-gradient(145deg,var(--gold),#D98A12);display:grid;
  place-items:center;color:#241200;font-weight:700;font-size:19px}
.card h1{font-size:19px;margin-bottom:4px}
.card .s{color:var(--muted);font-size:13px;margin-bottom:20px}
.err{background:var(--badbg);color:var(--bad);border:1px solid
  color-mix(in srgb,var(--bad) 30%,transparent);padding:10px 12px;
  border-radius:8px;font-size:13px;margin-bottom:15px}
.okmsg{background:var(--goodbg);color:var(--good);border:1px solid
  color-mix(in srgb,var(--good) 30%,transparent);padding:10px 12px;
  border-radius:8px;font-size:13px;margin-bottom:15px}
.pager{display:flex;gap:8px;align-items:center;margin-left:auto}
form.inline{display:inline}

/* -------------------------------------------------------- logo */
.logo-chip{background:#fff;border-radius:10px;padding:7px 12px;display:inline-block;line-height:0}
.logo-chip .logo-img{height:34px;width:auto;display:block}
.logo-chip.big{padding:10px 16px;margin-bottom:16px;border:1px solid var(--line)}
.logo-chip.big .logo-img{height:54px}

/* ------------------------------------------- edit / delete / tick boxes */
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,var(--line))}
.btn.danger:hover{border-color:var(--bad);background:var(--badbg)}
.btn.danger.solid{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger.solid:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger:disabled:hover{background:var(--surface);border-color:color-mix(in srgb,var(--bad) 38%,var(--line))}

.bulk{display:flex;align-items:center;gap:12px;padding:9px 17px;
  border-bottom:1px solid var(--line);background:var(--raise);font-size:12.5px}
th.chk,td.chk{width:38px;padding-left:17px;padding-right:4px}
th.act{padding-left:6px;padding-right:10px}
td.act{white-space:nowrap;padding-left:6px;padding-right:10px}
td.act .btn+.btn{margin-left:4px}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--navy);cursor:pointer;vertical-align:middle}
tbody tr.picked{background:var(--infobg)}
tbody tr.picked:hover{background:var(--infobg)}
.manage{display:flex;gap:8px;margin-bottom:18px}

.dform .field select,.dform .field textarea{width:100%;padding:8px 11px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);
  color:var(--fg);font:inherit;font-size:13px}
.dform .field textarea{resize:vertical;min-height:58px}
.dform .field.blank input,.dform .field.blank textarea{
  border-style:dashed;border-color:color-mix(in srgb,var(--warn) 55%,var(--line));
  background:color-mix(in srgb,var(--warnbg) 45%,var(--surface))}
.dform .field.bad input,.dform .field.bad textarea,.dform .field.bad select{
  border-color:var(--bad);background:var(--badbg)}
.dform .ferr{color:var(--bad);font-size:12px;margin-top:4px}
.dform .ro{padding:8px 11px;border:1px solid var(--soft);border-radius:7px;
  background:var(--soft);color:var(--muted);font-size:13px;word-break:break-all}
.dform input::placeholder,.dform textarea::placeholder{color:var(--faint)}
.drawer .lead{font-size:12.5px;margin:14px 0 14px}
.drawer{width:min(460px,100%)}
.dfoot{padding:13px 20px;border-top:1px solid var(--line);background:var(--raise);
  display:flex;gap:9px;justify-content:flex-end}
.drawer .err{margin-top:0}

.modal{position:fixed;z-index:80;left:50%;top:50%;width:min(480px,calc(100% - 28px));
  max-height:calc(100% - 28px);overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 60px rgba(8,14,26,.35);
  transform:translate(-50%,-47%);opacity:0;transition:opacity .15s,transform .15s}
.modal.on{opacity:1;transform:translate(-50%,-50%)}
.mhead{display:flex;align-items:center;gap:12px;padding:18px 20px 6px}
.mhead h3{font-size:17px;font-weight:600}
.warnicon{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--badbg);
  color:var(--bad);display:grid;place-items:center;font-weight:700;font-size:17px}
.mbody{padding:8px 20px 4px}
.names{margin:6px 0 12px;padding-left:20px;font-weight:500}
.names li{margin:2px 0}
.warnbox{background:var(--badbg);border:1px solid color-mix(in srgb,var(--bad) 28%,transparent);
  border-radius:9px;padding:11px 14px;color:var(--bad);font-size:13px}
.warnbox b{display:block;margin-bottom:4px}
.warnlist{margin:0 0 6px;padding-left:18px}
.warnlist li{margin:3px 0}
.warnbox p{margin:6px 0 0;font-weight:600}
.typed{margin:14px 0 0}
.mfoot{padding:14px 20px 18px;display:flex;gap:9px;justify-content:flex-end}
.mbody .err{margin:12px 0 0}
.okmsg,.err{line-height:1.45}

@media (max-width:860px){
  td.act .btn{padding:5px 8px}
  .bulk .dim{display:none}
}

/* The list scrolls inside its own box: the column names stay in view at the
   top, the sideways scroll bar sits at the bottom of the screen where it can
   be found, and the tick box and Edit/Delete stay put at the left while the
   other columns slide past. */
.scroll{overflow:auto;max-height:calc(100vh - 230px);min-height:260px}
thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line)}
th.chk,td.chk{position:sticky;left:0;z-index:2;background:var(--surface)}
th.act,td.act{position:sticky;left:38px;z-index:2;background:var(--surface);
  box-shadow:8px 0 8px -8px rgba(12,26,54,.2)}
thead th.chk,thead th.act{z-index:4;background:var(--raise)}
tbody tr[data-click]:hover td.chk,tbody tr[data-click]:hover td.act{background:var(--raise)}
tbody tr.picked td.chk,tbody tr.picked td.act{background:var(--infobg)}
td .mono,td .dim,td .pill,td .lvl{white-space:nowrap}
td.act .btn.sm{padding:4px 9px}
th,td{padding-left:11px;padding-right:11px}
th.chk,td.chk{padding-left:17px;padding-right:4px}

/* A sideways scroll bar that is always drawn, so nobody has to guess that the
   list continues to the right (Macs hide thin bars until you scroll). */
.scroll::-webkit-scrollbar{height:14px;width:14px}
.scroll::-webkit-scrollbar-track{background:var(--soft);border-top:1px solid var(--line)}
.scroll::-webkit-scrollbar-thumb{background:var(--faint);border-radius:8px;
  border:3px solid var(--soft)}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.scroll::-webkit-scrollbar-corner{background:var(--soft)}
@supports not selector(::-webkit-scrollbar){.scroll{scrollbar-color:var(--faint) var(--soft)}}