:root{
  color-scheme: light;
  --bg:#E8ECEA; --panel:#FFFFFF; --sunk:#F3F5F4; --ink:#17232A; --muted:#58666E; --line:#D1D9D6;
  --accent:#24584D; --accent-ink:#FFFFFF; --fill:#CDE2DA; --fill-over:#F2D3D6;
  --ok:#2B7550; --close:#9C6410; --behind:#AE4337; --over:#8C1D2A;
  --silver:#7F8A94; --gold:#9C7826; --platinum:#56636D; --diamond:#2F75A6;
  --font:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#111719; --panel:#192125; --sunk:#141B1E; --ink:#E5ECE9; --muted:#9AA8AE; --line:#2B363B;
    --accent:#72B6A4; --accent-ink:#0D1416; --fill:#21443B; --fill-over:#4A2329;
    --ok:#5FBC8B; --close:#E2A94B; --behind:#E57A6E; --over:#F27A87;
    --silver:#B5BEC6; --gold:#D8B05B; --platinum:#A2B2BC; --diamond:#7FBBE3;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#111719; --panel:#192125; --sunk:#141B1E; --ink:#E5ECE9; --muted:#9AA8AE; --line:#2B363B;
  --accent:#72B6A4; --accent-ink:#0D1416; --fill:#21443B; --fill-over:#4A2329;
  --ok:#5FBC8B; --close:#E2A94B; --behind:#E57A6E; --over:#F27A87;
  --silver:#B5BEC6; --gold:#D8B05B; --platinum:#A2B2BC; --diamond:#7FBBE3;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; opacity:.45; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.num{ font-variant-numeric:tabular-nums; }

.wrap{ max-width:980px; margin:0 auto; padding:20px 16px 72px; }

/* header */
.top{ display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:18px; }
.brand h1{ margin:0; font-size:clamp(1.7rem,4.5vw,2.4rem); font-weight:800; letter-spacing:-.025em; line-height:1.05; }
.who{ margin:4px 0 0; color:var(--muted); font-size:.92rem; display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
.sync{ font-size:.8rem; }
.weeknav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wk{ display:flex; flex-direction:column; min-width:150px; padding:0 6px; }
.wk span{ font-size:.78rem; color:var(--muted); }
.wk strong{ font-size:1.05rem; font-weight:700; }
.icon{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel); font-size:1.3rem; line-height:1; display:grid; place-items:center; }
.link{ background:none; border:0; color:var(--accent); font-weight:600; padding:8px 6px; text-decoration:underline; text-underline-offset:3px; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs button{ background:none; border:0; padding:10px 14px 12px; font-weight:600; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
@media (min-width:720px){
  .top{ grid-template-columns:1fr auto; align-items:end; }
  .tabs{ grid-column:1 / -1; }
}

.banner{ background:var(--sunk); border:1px solid var(--line); border-left:4px solid var(--close); padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:.92rem; }

/* summary */
.summary{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:18px; display:grid; gap:12px; }
.big{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.big strong{ font-size:clamp(2.2rem,7vw,3.2rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.big span{ color:var(--muted); }
.bar{ position:relative; height:12px; background:var(--sunk); border-radius:6px; overflow:visible; border:1px solid var(--line); }
.bar>b{ display:block; height:100%; background:var(--accent); border-radius:6px; max-width:100%; }
.bar>i,.meter>i{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); opacity:.55; border-radius:1px; }
.sumfoot{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.88rem; color:var(--muted); }
.tally{ display:flex; gap:6px; flex-wrap:wrap; }

/* status + package chips */
.st{ display:inline-block; font-size:.78rem; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.st-on{ --c:var(--ok); } .st-close{ --c:var(--close); } .st-behind{ --c:var(--behind); }
.st-over{ --c:var(--over); outline:1.5px solid var(--over); }
.chip{ display:inline-block; font-size:.74rem; font-weight:700; padding:2px 8px; border-radius:4px; color:var(--c); border:1.5px solid var(--c); white-space:nowrap; }
.pkg-Silver{ --c:var(--silver); } .pkg-Gold{ --c:var(--gold); } .pkg-Platinum{ --c:var(--platinum); } .pkg-Diamond{ --c:var(--diamond); }

/* account list */
.list{ display:grid; gap:10px; }
.acct{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.acct.open{ border-color:var(--accent); }
.row{ width:100%; background:none; border:0; text-align:left; padding:14px 16px; display:grid; gap:8px 12px; align-items:center;
  grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"nm pct st" "meter meter meter"; }
.nm{ grid-area:nm; min-width:0; display:flex; flex-direction:column; }
.nm strong{ font-weight:700; font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nm .sub{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.85rem; min-width:0; }
.nm .sub span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meter{ grid-area:meter; position:relative; height:8px; background:var(--sunk); border-radius:4px; }
.meter>b{ display:block; height:100%; background:var(--accent); border-radius:4px; max-width:100%; }
.meter.is-over>b{ background:var(--over); }
.pct{ grid-area:pct; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; min-width:3.2em; }
.row .st{ grid-area:st; }
@media (min-width:720px){
  .row{ grid-template-columns:minmax(0,1.3fr) minmax(140px,1fr) 56px 92px; grid-template-areas:"nm meter pct st"; }
  .row .st{ justify-self:end; }
}

.detail{ border-top:1px solid var(--line); padding:16px; display:grid; gap:16px; background:var(--sunk); }
.pads{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:720px){ .pads{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.sessbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.sessbar div{ display:flex; flex-direction:column; }
.sessbar span{ color:var(--muted); font-size:.88rem; }
.sessbar.live{ border-color:var(--ok); border-left:5px solid var(--ok); }
.sessfields{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .sessfields{ grid-template-columns:1fr 1fr; } }
td.wrapcell{ white-space:normal; min-width:180px; max-width:320px; }
.padwrap{ display:grid; gap:6px; align-content:start; }
.pad{ position:relative; overflow:hidden; border:1.5px solid var(--line); border-radius:14px; background:var(--panel); min-height:136px; padding:12px 12px 10px; text-align:left;
  display:flex; flex-direction:column; justify-content:space-between; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.pad:hover:not(:disabled){ border-color:var(--accent); }
.pad .fill{ position:absolute; left:0; right:0; bottom:0; background:var(--fill); transition:height .25s ease; }
.pad.capped .fill{ background:var(--fill-over); }
.pad.capped{ border-color:var(--over); }
.pad .pace{ position:absolute; left:0; right:0; border-top:2px dashed var(--ink); opacity:.3; }
.pad>span:not(.fill):not(.pace){ position:relative; }
.pl{ font-weight:700; font-size:.92rem; }
.pn{ font-size:2.4rem; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; display:inline-block; }
.pt{ font-size:.82rem; color:var(--muted); }
.pad.hit .pn{ animation:pop .22s ease-out; }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .pad.hit .pn{ animation:none; } .pad .fill{ transition:none; } }
.adj{ display:flex; gap:6px; }
.adj button{ flex:1; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:7px 0; font-weight:600; font-variant-numeric:tabular-nums; }
.ph{ margin:0; font-size:.8rem; color:var(--muted); line-height:1.35; }
.capwarn{ margin:0; font-size:.8rem; font-weight:700; color:var(--over); line-height:1.35; }
.notes label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.notes textarea{ width:100%; min-height:72px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); }
.dfoot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.86rem; color:var(--muted); }

.btn{ border:0; border-radius:10px; padding:11px 18px; font-weight:700; background:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.btn.danger{ background:none; color:var(--behind); border:1px solid currentColor; }
.addrow{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.empty{ background:var(--panel); border:1.5px dashed var(--line); border-radius:14px; padding:28px 20px; text-align:center; color:var(--muted); }
.empty h2{ color:var(--ink); margin:0 0 6px; font-size:1.2rem; }
.empty .btn{ margin-top:14px; }

/* tables */
.scroll{ overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
table{ border-collapse:collapse; width:100%; font-size:.9rem; }
th,td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th{ font-size:.8rem; color:var(--muted); font-weight:600; background:var(--sunk); }
td.n,th.n{ text-align:right; font-variant-numeric:tabular-nums; }
tr:last-child td{ border-bottom:0; }
tr.sub td{ background:var(--sunk); font-size:.85rem; }
tr.sub td.note{ white-space:normal; min-width:200px; color:var(--muted); }
.tbtn{ background:none; border:0; padding:0; font-weight:700; text-align:left; display:flex; align-items:center; gap:8px; }
.tbtn .car{ display:inline-block; transition:transform .15s; color:var(--muted); }
.tbtn[aria-expanded="true"] .car{ transform:rotate(90deg); }
.sectionhead{ display:flex; justify-content:space-between; align-items:end; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.sectionhead h2{ margin:0; font-size:1.25rem; letter-spacing:-.01em; }
.sectionhead p{ margin:2px 0 0; color:var(--muted); font-size:.9rem; }
.prose{ max-width:68ch; color:var(--muted); font-size:.95rem; }
.prose strong{ color:var(--ink); }
.stack{ display:grid; gap:22px; }

/* dialog */
dialog{ border:0; border-radius:16px; padding:0; width:min(460px, calc(100vw - 24px)); background:var(--panel); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop{ background:rgba(10,16,18,.5); }
.dlg{ padding:20px; display:grid; gap:14px; }
.dlg h2{ margin:0; font-size:1.25rem; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:5px; }
.field input[type=text]{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--sunk); }
.pkgpick{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.pkgpick label{ position:relative; }
.pkgpick input{ position:absolute; opacity:0; inset:0; }
.pkgpick span{ display:block; text-align:center; padding:9px 0; border:1.5px solid var(--line); border-radius:8px; font-weight:700; font-size:.85rem; color:var(--c); }
.pkgpick input:checked+span{ border-color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); }
.pkgpick input:focus-visible+span{ outline:2px solid var(--accent); outline-offset:2px; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; }
.check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.check small{ display:block; color:var(--muted); }
.dlgfoot{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.dlgfoot .btn.danger{ margin-right:auto; }

.toast{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:.9rem; max-width:calc(100vw - 32px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:20; }
.toast.show{ opacity:1; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.st-unset{ --c:var(--muted); }
.whopick{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px 20px; }
.whopick h2{ margin:0 0 4px; font-size:1.4rem; letter-spacing:-.015em; }
.whopick p{ margin:0 0 16px; color:var(--muted); }
.names{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.names button{ text-align:left; border:1.5px solid var(--line); background:var(--sunk); border-radius:12px; padding:14px 16px; font-weight:700; font-size:1.02rem; }
.names button:hover{ border-color:var(--accent); }
.names small{ display:block; font-weight:500; color:var(--muted); font-size:.82rem; }
.setpkg{ display:grid; gap:10px; }
.setpkg p{ margin:0; font-weight:600; }
.setpkg .pkgbtns{ display:flex; gap:8px; flex-wrap:wrap; }
.setpkg .pkgbtns button{ border:1.5px solid var(--c); color:var(--c); background:var(--panel); border-radius:8px; padding:9px 16px; font-weight:700; }
.search{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); }
.picklist{ max-height:min(52vh,420px); overflow:auto; border:1px solid var(--line); border-radius:10px; }
.picklist label{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.95rem; }
.picklist label:last-child{ border-bottom:0; }
.picklist input{ width:18px; height:18px; accent-color:var(--accent); flex:none; }
.picklist .own{ margin-left:auto; color:var(--muted); font-size:.8rem; white-space:nowrap; }
.picklist label.taken{ color:var(--muted); }
.pickcount{ font-size:.88rem; color:var(--muted); }
.flist{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.fchip{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 6px 6px 14px; font-weight:600; font-size:.92rem; }
.fchip span{ color:var(--muted); font-weight:500; font-size:.82rem; }
.fchip button{ border:0; background:var(--sunk); border-radius:999px; padding:4px 10px; font-size:.8rem; font-weight:600; color:var(--behind); }
.inline{ display:flex; gap:8px; flex-wrap:wrap; }
.inline input{ flex:1 1 200px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); }
.setup td input[type=text]{ border:1px solid transparent; background:transparent; border-radius:6px; padding:6px 8px; min-width:180px; font-weight:600; }
.setup td input[type=text]:hover,.setup td input[type=text]:focus{ border-color:var(--line); background:var(--sunk); }
.setup td select{ border:1px solid var(--line); border-radius:6px; padding:6px 8px; background:var(--panel); }
.setup td input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); }
.setup td{ vertical-align:middle; }
.rm{ border:0; background:none; color:var(--behind); font-weight:600; font-size:.85rem; padding:4px 6px; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:10px; }
.toolbar .search{ max-width:320px; }

/* ---------- sign-in ---------- */
.auth{ max-width:420px; margin:8vh auto 0; }
.auth .card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px 20px; display:grid; gap:14px; }
.auth h1{ margin:0; font-size:1.9rem; font-weight:800; letter-spacing:-.025em; line-height:1.05; }
.auth .lede{ margin:0; color:var(--muted); }
.auth .btn{ width:100%; }
.field input[type=email],.field input[type=password]{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--sunk); }
.msg{ margin:0; font-size:.9rem; padding:10px 12px; border-radius:8px; background:var(--sunk); border-left:4px solid var(--ok); }
.msg.err{ border-left-color:var(--behind); }
.acctmenu{ display:flex; gap:4px; align-items:baseline; }
.created{ background:var(--sunk); border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:10px; padding:12px 14px; margin-bottom:12px; display:grid; gap:8px; }
.created code{ font-size:1.05rem; font-weight:700; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 8px; user-select:all; }
.people td select,.people td input[type=text]{ border:1px solid var(--line); border-radius:6px; padding:6px 8px; background:var(--panel); }
.people td input[type=text]{ border-color:transparent; background:transparent; font-weight:600; min-width:160px; }
.people td input[type=text]:hover,.people td input[type=text]:focus{ border-color:var(--line); background:var(--sunk); }
.addperson{ display:grid; gap:8px; grid-template-columns:1fr; margin-top:10px; }
.addperson input,.addperson select{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); min-width:0; }
@media (min-width:720px){ .addperson{ grid-template-columns:1fr 1.3fr 150px auto; } }
.st-off{ --c:var(--muted); }
.importbox{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; gap:10px; }
.importbox ul{ margin:0; padding-left:18px; }