:root{
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#edf0f3; --border:#dde1e8;
  --text:#1b2027; --muted:#5c6675; --faint:#8790a0;
  --accent:#d83a40; --accent-ink:#ffffff;
  --won:#2f9e5f; --warn:#c1841c; --lost:#8790a0; --cold:#4f7fc0;
  --shadow:0 1px 2px rgba(20,25,35,.05), 0 6px 18px rgba(20,25,35,.05);
  --radius:11px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1319; --surface:#171d26; --surface-2:#1d242f; --border:#2b333f;
    --text:#e8ebf0; --muted:#9aa4b2; --faint:#69727f;
    --accent:#ec5a5f; --accent-ink:#1b1012;
    --won:#41b06d; --warn:#d99a2b; --lost:#69727f; --cold:#6f9ae0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1319; --surface:#171d26; --surface-2:#1d242f; --border:#2b333f;
  --text:#e8ebf0; --muted:#9aa4b2; --faint:#69727f;
  --accent:#ec5a5f; --accent-ink:#1b1012;
  --won:#41b06d; --warn:#d99a2b; --lost:#69727f; --cold:#6f9ae0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
h1,h2{font-family:"Archivo", system-ui, sans-serif; margin:0}
button{font:inherit; cursor:pointer}
[hidden]{display:none !important}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--surface); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:baseline; gap:9px}
.brand h1{font-size:15px; font-weight:700; letter-spacing:-.01em}
.brand h1::before{content:""; display:inline-block; width:20px; height:3px; margin-right:8px; background:var(--accent); vertical-align:middle; border-radius:2px}
.brand span{font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); font-weight:600}

.metrics{display:flex; gap:9px; overflow-x:auto; flex:1 1 380px; padding-bottom:2px}
.tile{flex:0 0 auto; min-width:112px; padding:7px 11px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px}
.tile .k{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; white-space:nowrap}
.tile .v{margin-top:3px; font-size:15px; font-weight:600}
.tile.forecast{border-color:color-mix(in srgb, var(--accent) 45%, var(--border))}
.tile.forecast .v{color:var(--accent)}
.tile.won .v{color:var(--won)}

.actions{display:flex; align-items:center; gap:8px}
.sync{font-size:11px; color:var(--faint); display:flex; align-items:center; gap:6px; white-space:nowrap}
.sync::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--faint)}
.sync.live::before{background:var(--won)} .sync.off::before{background:var(--warn)}
.btn{border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:8px; padding:7px 12px; font-weight:600; font-size:13px}
.btn:hover{border-color:var(--faint)}
.btn-accent{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-accent:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; padding:7px 10px}

/* ---------- board ---------- */
.board{display:flex; gap:12px; align-items:flex-start; padding:14px 16px 30px; overflow-x:auto; min-height:60vh}
.col{flex:0 0 258px; width:258px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius)}
.col-h{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 8px}
.col-h .name{font-family:"Archivo",sans-serif; font-weight:600; font-size:12px; display:flex; align-items:center; gap:7px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.dot.open{background:var(--cold)} .dot.warn{background:var(--warn)} .dot.lost{background:var(--lost)} .dot.won{background:var(--won)} .dot.cold{background:var(--cold)}
.col-h .sum{font-size:11px; color:var(--faint); text-align:right; white-space:nowrap}
.col-h .sum b{display:block; color:var(--muted); font-weight:600}
.col-body{display:flex; flex-direction:column; gap:9px; padding:4px 10px 12px; min-height:24px}

.card{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:10px 11px 8px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow); transition:border-color .12s ease}
.card:hover{border-color:var(--faint)}
.card .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.card .co{font-weight:600; letter-spacing:-.005em}
.card .tk{font-size:12.5px; color:var(--muted); flex:0 0 auto}
.card .who{font-size:12px; color:var(--muted)}
.card .who .role{color:var(--faint)}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{font-size:10.5px; padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.chip.due{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
.card .foot{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:1px; border-top:1px solid var(--border); padding-top:6px}
.mv{border:1px solid var(--border); background:var(--surface-2); color:var(--muted); border-radius:6px; width:26px; height:24px; line-height:1; font-size:13px; padding:0}
.mv:hover:not(:disabled){color:var(--text); border-color:var(--faint)}
.mv:disabled{opacity:.32; cursor:default}
.foot .st{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); font-weight:600; text-align:center; flex:1}

/* ---------- empty ---------- */
.empty{max-width:420px; margin:12vh auto; text-align:center; padding:0 20px}
.empty h2{font-size:18px; margin:0 0 8px}
.empty p{color:var(--muted); margin:0 0 18px}
.empty .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ---------- login ---------- */
.login-wrap{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px}
.login{width:100%; max-width:340px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:26px 22px}
.login .logo{width:40px; height:6px; background:var(--accent); border-radius:3px; margin-bottom:16px}
.login h1{font-size:18px; margin-bottom:4px}
.login p{color:var(--muted); margin:0 0 18px; font-size:13px}
.login .f{margin-bottom:12px}
.login label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; margin-bottom:4px}
.login input{width:100%; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 10px}
.login .btn-accent{width:100%; padding:10px; margin-top:4px}
.login .err{color:var(--accent); font-size:12.5px; margin-top:10px; min-height:1em}
.login .alt{margin-top:12px; font-size:12px; color:var(--faint); text-align:center}
.login .alt button{background:none; border:none; color:var(--muted); text-decoration:underline; padding:0; font-size:12px}

/* ---------- config banner ---------- */
.cfg{max-width:560px; margin:14vh auto; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
.cfg h2{font-size:16px; margin-bottom:8px}
.cfg code{background:var(--surface-2); padding:1px 5px; border-radius:4px; font-family:"IBM Plex Mono",monospace; font-size:12px}
.cfg ol{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.cfg li{margin:5px 0}

/* ---------- modal ---------- */
.modal-wrap{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,10,14,.55); backdrop-filter:blur(2px)}
.modal{width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:18px 18px 16px; animation:pop .12s ease}
@keyframes pop{from{transform:scale(.97); opacity:0} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal h2{font-size:15px; margin-bottom:14px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.f{display:flex; flex-direction:column; gap:4px}
.f.wide{grid-column:1 / -1}
.f label{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600}
.f input, .f select, .f textarea{font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:7px 9px; width:100%}
.f textarea{resize:vertical; min-height:56px}
.modal-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:10px}
.modal-foot .right{display:flex; gap:8px}
.btn-danger{background:transparent; border-color:transparent; color:var(--accent); padding:7px 4px}
.btn-danger:hover{text-decoration:underline}
.hint{font-size:11px; color:var(--faint); margin-top:10px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:10px; padding:9px 14px; font-size:13px; opacity:0; transition:opacity .15s ease, transform .15s ease; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}
.toast.err{border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); color:var(--accent)}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .brand{width:100%}
  .metrics{order:3; width:100%}
}