:root{
  --paper:#F4F5F8; --surface:#FFFFFF; --surface-2:#FBFBFD;
  --ink:#171A21; --muted:#5C6371; --faint:#8B92A1;
  --line:#E4E7ED; --line-strong:#CFD4DD;
  --indigo:#4338CA; --indigo-soft:#EEEDFB; --indigo-ink:#2E2795;
  --pick:#0E7A4B; --pick-soft:#E3F4EC; --pick-line:#B7E2CC;
  --manual:#B4530A; --manual-soft:#FBEEE1; --manual-line:#F0CDA6;
  --warn:#B42318; --warn-soft:#FCECEA;
  --r:10px; --r-sm:7px;
  --shadow:0 1px 2px rgba(23,26,33,.05), 0 8px 28px -18px rgba(23,26,33,.28);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer}
input,select{font-family:inherit; font-size:14px}
:focus-visible{outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px}

.wrap{max-width:1120px; margin:0 auto; padding:0 20px 80px}
.top{position:sticky; top:0; z-index:20; background:rgba(244,245,248,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); margin:0 -20px 22px; padding:15px 20px 0;}
.brand{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.brand .glyph{font-family:'Space Grotesk'; font-weight:700; font-size:19px; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:9px;}
.brand .dice{width:26px; height:26px; border-radius:7px; background:var(--ink); color:var(--surface); display:grid; place-items:center; font-size:15px; box-shadow:var(--shadow);}
.brand .sub{color:var(--faint); font-size:12px; font-family:'JetBrains Mono'; letter-spacing:.02em}

/* unit switcher */
.units{display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap}
.unit-chip{border:1px solid var(--line-strong); background:var(--surface); padding:7px 13px; border-radius:20px; font-size:13px; font-weight:500; color:var(--muted); display:flex; align-items:center; gap:7px;}
.unit-chip .n{font-family:'JetBrains Mono'; font-size:10.5px; background:var(--line); color:var(--muted); padding:1px 6px; border-radius:20px}
.unit-chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.unit-chip[aria-pressed="true"] .n{background:rgba(255,255,255,.2); color:#fff}
.rename{border:none; background:none; color:var(--faint); font-size:12px; padding:4px}
.rename:hover{color:var(--indigo)}

.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:none; background:none; padding:11px 15px 13px; color:var(--muted); font-weight:500; font-size:13.5px; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:7px;}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--indigo-ink); border-bottom-color:var(--indigo)}
.tab .count{font-family:'JetBrains Mono'; font-size:11px; background:var(--line); color:var(--muted); padding:1px 6px; border-radius:20px;}
.tab[aria-selected="true"] .count{background:var(--indigo-soft); color:var(--indigo-ink)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel + .panel{margin-top:16px}
.p-head{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.p-head h2{font-size:16px}
.p-head .desc{color:var(--muted); font-size:12.5px; margin-top:3px}
.p-body{padding:18px}
.eyebrow{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}

.btn{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:9px 15px; border-radius:var(--r-sm); font-weight:500; font-size:13.5px; display:inline-flex; align-items:center; gap:7px; transition:.12s; text-decoration:none;}
.btn:hover{border-color:var(--faint); background:var(--surface-2)}
.btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff}
.btn.primary:hover{background:var(--indigo-ink)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--line); color:var(--ink)}
.btn.danger{color:var(--warn); border-color:var(--line-strong)}
.btn.danger:hover{background:var(--warn-soft); border-color:var(--warn)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.big{padding:13px 24px; font-size:15px; font-family:'Space Grotesk'; font-weight:600}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12.5px; font-weight:500; color:var(--muted)}
.field input,.field select{border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 11px; background:var(--surface); color:var(--ink);}
.field input:focus,.field select:focus{border-color:var(--indigo); outline:none; box-shadow:0 0 0 3px var(--indigo-soft)}
.grid{display:grid; gap:14px}

.tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:3px 9px; border-radius:20px; border:1px solid var(--line)}
.tag.pick{background:var(--pick-soft); color:var(--pick); border-color:var(--pick-line)}
.tag.manual{background:var(--manual-soft); color:var(--manual); border-color:var(--manual-line)}
.tag.info{background:var(--indigo-soft); color:var(--indigo-ink); border-color:#D9D6F6}

.tbl-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-weight:600; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface);}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.id-cell{font-family:'JetBrains Mono'; font-size:12px; color:var(--muted)}
.name-cell{font-weight:600}
.num{font-family:'JetBrains Mono'; text-align:right}

.empty{padding:44px 24px; text-align:center; color:var(--muted)}
.empty .big{font-family:'Space Grotesk'; font-size:16px; color:var(--ink); margin-bottom:6px}
.empty .dice-lg{font-size:34px; margin-bottom:12px; opacity:.5}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.stat{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 15px}
.stat .k{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint)}
.stat .v{font-family:'Space Grotesk'; font-size:26px; font-weight:600; margin-top:5px; letter-spacing:-.02em}
.stat .v small{font-size:14px; color:var(--muted); font-weight:400}

.ledger{display:flex; flex-direction:column}
.lrow{display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); animation:reveal .4s cubic-bezier(.2,.7,.3,1) both;}
.lrow:last-child{border-bottom:none}
@keyframes reveal{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.lrow{animation:none}}
.stamp{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-family:'JetBrains Mono'; font-weight:600; font-size:14px; background:var(--pick-soft); color:var(--pick); border:1px solid var(--pick-line);}
.lrow.manual .stamp{background:var(--manual-soft); color:var(--manual); border-color:var(--manual-line)}
.lmain .nm{font-weight:600; font-size:14.5px}
.lmain .meta{color:var(--muted); font-size:12px; margin-top:2px}
.lmain .meta .mono{color:var(--faint)}
.reasons{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; max-width:660px}
.reason{font-size:11px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); padding:2px 8px; border-radius:6px;}
.lside{display:flex; align-items:center; gap:8px}

.pool-note{background:var(--indigo-soft); border:1px solid #D9D6F6; color:var(--indigo-ink); padding:11px 14px; border-radius:var(--r-sm); font-size:12.5px; display:flex; gap:9px; align-items:flex-start;}
.banner{padding:11px 14px; border-radius:var(--r-sm); font-size:12.5px; display:flex; gap:9px; align-items:flex-start; margin-bottom:14px}
.banner.warn{background:var(--warn-soft); border:1px solid #F3C9C4; color:var(--warn)}

.pick-search input{width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:10px}
.candidate{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:7px}
.candidate .who{font-weight:500}
.candidate .who small{color:var(--muted); font-weight:400; font-family:'JetBrains Mono'; margin-left:8px; font-size:11px}

.divider{height:1px; background:var(--line); margin:18px 0}
.hint{color:var(--faint); font-size:12px}
.pill-toggle{display:flex; gap:6px; flex-wrap:wrap}
.pill{border:1px solid var(--line-strong); background:var(--surface); padding:6px 12px; border-radius:20px; font-size:12.5px; font-weight:500; color:var(--muted)}
.pill[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.chk{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer}
.chk input{width:16px; height:16px; accent-color:var(--indigo)}

.round-card{border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:12px; overflow:hidden}
.round-head{padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--surface-2); cursor:pointer}
.round-head .rid{font-family:'Space Grotesk'; font-weight:600; font-size:14.5px}
.round-head .rmeta{font-size:12px; color:var(--muted); font-family:'JetBrains Mono'}
.round-body{padding:0 16px; max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease}
.round-card.open .round-body{max-height:3200px; padding:14px 16px}
.chips{display:flex; gap:6px; flex-wrap:wrap}

.bar-row{display:grid; grid-template-columns:150px 1fr 50px; align-items:center; gap:10px; margin-bottom:8px; font-size:12.5px}
.bar-track{height:9px; background:var(--line); border-radius:20px; overflow:hidden}
.bar-fill{height:100%; background:var(--indigo); border-radius:20px}
.bar-fill.pick{background:var(--pick)}
.bar-val{font-family:'JetBrains Mono'; font-size:12px; text-align:right; color:var(--muted)}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:500; box-shadow:0 10px 40px -8px rgba(0,0,0,.4); opacity:0; transition:.25s; z-index:60; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--warn)}
.hidden{display:none !important}

textarea{width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:11px; font-family:'JetBrains Mono'; font-size:12.5px}
.upload-drop{border:1.5px dashed var(--line-strong); border-radius:var(--r); padding:26px; text-align:center; color:var(--muted); transition:.15s; cursor:pointer}
.upload-drop:hover,.upload-drop.drag{border-color:var(--indigo); background:var(--indigo-soft); color:var(--indigo-ink)}
.upload-drop .big{font-family:'Space Grotesk'; font-weight:600; color:var(--ink); font-size:15px; margin-bottom:4px}

@media(max-width:640px){
  .lrow{grid-template-columns:38px 1fr}
  .lside{grid-column:2; justify-content:flex-start; margin-top:4px}
  .stat .v{font-size:22px}
  .units{margin-left:0; width:100%}
}

/* ---------------------------------------------------------------- auth ---- */
.auth-body{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--paper);}
.auth-card{width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:26px 26px 20px;}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.auth-brand h1{font-size:19px; letter-spacing:-.02em}
.auth-brand .dice{width:34px; height:34px; border-radius:8px; background:var(--ink);
  color:var(--surface); display:grid; place-items:center; font-size:19px;
  box-shadow:var(--shadow); flex:none;}
.auth-sub{color:var(--faint); font-size:11.5px; font-family:'JetBrains Mono'; letter-spacing:.02em}
.auth-card label{display:block; font-size:12px; font-weight:600; color:var(--muted);
  margin:14px 0 5px}
.auth-card input[type=text], .auth-card input[type=password]{width:100%; padding:9px 11px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-2);}
.auth-card input:focus{outline:2px solid var(--indigo); outline-offset:1px; background:var(--surface)}
.auth-btn{width:100%; margin-top:20px; padding:10px 14px; border:0; border-radius:var(--r-sm);
  background:var(--ink); color:var(--surface); font-size:14px; font-weight:600;}
.auth-btn:hover{background:var(--indigo-ink)}
.auth-error{background:var(--warn-soft); color:var(--warn); border:1px solid #F3C9C4;
  border-radius:var(--r-sm); padding:9px 11px; font-size:13px; margin-bottom:4px}
.auth-note{background:var(--indigo-soft); color:var(--indigo-ink); border-radius:var(--r-sm);
  padding:9px 11px; font-size:13px;}
.auth-hint{color:var(--faint); font-size:12px; margin:10px 0 0; line-height:1.45}
.auth-foot{color:var(--faint); font-size:11.5px; margin:18px 0 0; text-align:center; line-height:1.45}
.auth-foot a{color:var(--indigo); text-decoration:none}

/* signed-in strip in the app header */
.whoami{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); margin-left:auto}
.whoami .role{font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; background:var(--indigo-soft); color:var(--indigo-ink);
  padding:2px 7px; border-radius:20px; font-weight:600;}
.whoami form{margin:0}
.whoami .link-btn{border:0; background:none; color:var(--muted); font-size:12px;
  text-decoration:underline; padding:0}
.whoami .link-btn:hover{color:var(--warn)}
/* hide controls the signed-in role may not use */
[data-needs]{display:none}