/* Colour tokens, reset, top bar, buttons, status bar and toast. */
:root{
  --bg:#F3F4F1; --surface:#FFFFFF; --ink:#1E2528; --muted:#6A7277; --line:#E4E7E2; --line-strong:#C9CEC8;
  --block:#2E6A80; --block-hover:#25586B; --block-ink:#FFFFFF;
  --cap-0:#EDF2EC; --cap-1:#CFE2D3; --cap-2:#5D9670; --cap-over:#C4553F; --cap-ink-dark:#FFFFFF;
  --today:rgba(46,106,128,.09); --accent:#2E6A80; --ghost:rgba(46,106,128,.28);
  --post:#2F7D4F; --put:#A6741B; --del:#B2453A;
  --lw:300px; --cw:44px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14181A; --surface:#1B2023; --ink:#E6E9E7; --muted:#97A0A4; --line:#283034; --line-strong:#3A4448;
    --block:#4A8EA6; --block-hover:#5BA0B8; --block-ink:#0E1416;
    --cap-0:#1F2925; --cap-1:#2C4636; --cap-2:#4F8A64; --cap-over:#B5503C;
    --today:rgba(74,142,166,.13); --accent:#5BA0B8; --ghost:rgba(91,160,184,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#14181A; --surface:#1B2023; --ink:#E6E9E7; --muted:#97A0A4; --line:#283034; --line-strong:#3A4448;
  --block:#4A8EA6; --block-hover:#5BA0B8; --block-ink:#0E1416;
  --cap-0:#1F2925; --cap-1:#2C4636; --cap-2:#4F8A64; --cap-over:#B5503C;
  --today:rgba(74,142,166,.13); --accent:#5BA0B8; --ghost:rgba(91,160,184,.3);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .logo{width:42px;height:42px;flex:none}
.brand .bt{display:flex;flex-direction:column}
.brand strong{font-size:19px;font-weight:600;letter-spacing:-.01em}
.brand span{color:var(--muted);font-size:12.5px}
.nav{display:flex;align-items:center;gap:6px}
.nav #range{color:var(--muted);margin-left:8px;min-width:150px}
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:6px;padding:7px 12px;line-height:1}
.btn:hover{background:var(--bg)}
.btn.icon{width:34px;padding:7px 0;font-size:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn.danger{color:var(--del);border-color:transparent;background:transparent;padding-left:0}
.count{display:inline-block;min-width:20px;padding:2px 6px;margin-left:6px;border-radius:10px;background:rgba(255,255,255,.22);font-size:12px;font-weight:600}
.actions{display:flex;gap:8px}

.empty-state{color:var(--muted);text-align:center;padding:40px 10px}
.dots i{font-style:normal;animation:dot 1.4s infinite both}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:0}40%{opacity:1}}
.toast{max-width:min(620px,92vw);text-align:center;position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;font-size:13.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.dots i{animation:none}}

.statusbar{padding:8px 20px;font-size:13px;background:var(--cap-0);color:var(--ink);border-bottom:1px solid var(--line)}
.statusbar.bad{background:var(--cap-over);color:#fff}