:root{
  --paper:#EDEEE9; --surface:#F7F8F4; --raised:#FFFFFF;
  --ink:#1B2A2A; --muted:#5C6B66; --faint:#8A9791;
  --line:rgba(27,42,42,.12); --line-strong:rgba(27,42,42,.22);
  --brand:#12433B; --on-brand:#F2F6F1;
  --signal:#B06E12; --signal-soft:rgba(176,110,18,.10);
  --danger:#9B3B2E; --ok:#2E7D4F;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11150F; --surface:#181D16; --raised:#1E241C;
    --ink:#E8EBE1; --muted:#98A597; --faint:#6E7B6E;
    --line:rgba(232,235,225,.12); --line-strong:rgba(232,235,225,.22);
    --brand:#5FB89C; --on-brand:#0C2622;
    --signal:#E0A24B; --signal-soft:rgba(224,162,75,.14);
    --danger:#E07A66; --ok:#7FCBA0;
  }
}
:root[data-theme="dark"]{
  --paper:#11150F; --surface:#181D16; --raised:#1E241C;
  --ink:#E8EBE1; --muted:#98A597; --faint:#6E7B6E;
  --line:rgba(232,235,225,.12); --line-strong:rgba(232,235,225,.22);
  --brand:#5FB89C; --on-brand:#0C2622;
  --signal:#E0A24B; --signal-soft:rgba(224,162,75,.14);
  --danger:#E07A66; --ok:#7FCBA0;
}
*{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:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:28px 18px 64px;
}
.wrap{max-width:720px;margin:0 auto}
.tnum{font-variant-numeric:tabular-nums}
button{font-family:inherit;font-size:15px;cursor:pointer;border:none;background:none;color:inherit}
.btn-primary{background:var(--brand);color:var(--on-brand);border-radius:var(--radius);padding:9px 15px;font-weight:600;line-height:1}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border:1px solid var(--line-strong);border-radius:var(--radius);padding:8px 13px;color:var(--muted);font-weight:500}
.btn-ghost:hover{color:var(--ink);border-color:var(--muted)}
.linkbtn{color:var(--faint);font-size:13px;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--muted)}

/* Auth */
.auth{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px;z-index:30}
.auth[hidden]{display:none}
.authcard{width:100%;max-width:360px;text-align:center}
.authmark{font-size:34px;color:var(--brand);margin-bottom:10px}
.authcard h1{font-family:"Space Grotesk";font-weight:600;font-size:26px;margin:0 0 8px}
.authlede{color:var(--muted);font-size:14.5px;margin:0 auto 22px;max-width:30ch;line-height:1.45}
.authcard input{width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:11px;margin-bottom:10px}
.authbtns{display:flex;gap:10px;margin-top:4px}
.authbtns .btn-primary{flex:1;padding:11px}
.authbtns .btn-ghost{flex:1;padding:11px;text-align:center}
.authmsg{margin-top:14px;font-size:13.5px;min-height:18px}
.authmsg.err{color:var(--danger)} .authmsg.ok{color:var(--ok)}

/* Header */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.top h1{font-family:"Space Grotesk";font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0}
.top h1 span{color:var(--faint);font-weight:500}
.topright{display:flex;align-items:center;gap:12px}
.pill{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
.pill.saving{color:var(--signal);border-color:var(--signal)}
.pill.offline{color:var(--faint)}
.pill.ok{color:var(--ok);border-color:transparent}

/* Hero */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-bottom:20px}
.hero .cap{font-size:13px;color:var(--muted);margin-bottom:6px}
.hero .big{font-family:"Space Grotesk";font-weight:700;font-size:clamp(40px,11vw,58px);line-height:1;letter-spacing:-.02em}
.hero .sub{color:var(--muted);font-size:15px;margin-top:10px}
.hero .sub b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:13.5px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.chip b{color:var(--ink);font-weight:600}

/* Soon */
.soon{border:1px solid var(--signal);background:var(--signal-soft);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.soon h2{font-size:13px;font-weight:600;color:var(--signal);margin:0 0 10px}
.soon .row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.soon .row .when{color:var(--signal);font-weight:600;font-size:14px}
.soon .row .nm{font-weight:500}
.soon .man{color:var(--faint);font-weight:500;font-size:12px}

/* Controls */
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 2px 8px;color:var(--muted);font-size:14px}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{padding:6px 12px;color:var(--muted);font-weight:500;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.sortlab{margin:0;display:flex;align-items:center;gap:7px}
select.sortsel{font-family:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:8px;padding:6px 8px}

/* List */
.list{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:15px 4px;border-bottom:1px solid var(--line);align-items:start;cursor:pointer}
.item:hover{background:var(--surface)}
.item.dim{opacity:.5}
.item .name{font-weight:600;font-size:16.5px}
.item .meta{grid-column:1;color:var(--muted);font-size:13.5px;display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:3px;align-items:center}
.item .meta .dot{color:var(--faint)}
.item .pay{color:var(--faint)}
.item .auto{color:var(--faint)}
.item .amt{grid-row:1;grid-column:2;text-align:right;font-weight:600;font-size:16.5px;white-space:nowrap}
.item .amt .cyc{color:var(--faint);font-weight:500;font-size:13px}
.item .permo{grid-row:2;grid-column:2;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;letter-spacing:.02em}
.tag.paused{background:var(--line);color:var(--muted)}
.tag.cancelled{background:var(--line);color:var(--faint);text-decoration:line-through}
.tag.manual{background:var(--signal-soft);color:var(--signal)}

/* Empty */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty h2{font-family:"Space Grotesk";font-weight:600;color:var(--ink);font-size:20px;margin:0 0 8px}
.empty p{margin:0 auto 20px;max-width:34ch}

/* Footer */
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:13px;flex-wrap:wrap}
footer .acts{display:flex;gap:8px}

/* Modal */
.scrim{position:fixed;inset:0;background:rgba(10,14,10,.42);display:none;align-items:flex-end;justify-content:center;z-index:20}
.scrim.open{display:flex}
@media(min-width:560px){.scrim{align-items:center;padding:24px}}
.sheet{background:var(--raised);width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:22px;max-height:92vh;overflow:auto}
@media(min-width:560px){.sheet{border-radius:16px}}
.sheet h2{font-family:"Space Grotesk";font-weight:600;font-size:19px;margin:0 0 16px}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px;font-weight:500}
input,select,textarea{width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:10px 11px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
textarea{resize:vertical;min-height:52px}
.grid2{display:grid;grid-template-columns:1fr 118px;gap:10px}
.grid2b{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Switch */
.switch{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;height:44px}
.switch .knob{width:38px;height:22px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;transition:background .15s}
.switch .knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.switch[aria-checked="true"] .knob{background:var(--brand)}
.switch[aria-checked="true"] .knob::after{transform:translateX(16px)}
.switch .swlabel{font-size:14.5px;color:var(--ink)}

.sheet-acts{display:flex;gap:10px;margin-top:20px;align-items:center}
.sheet-acts .btn-primary{flex:1;padding:11px}
.del{color:var(--danger);font-weight:600;font-size:14px;margin-right:auto}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}