*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The hidden attribute must always win. Any rule that sets display
   (flex, grid, block) silently overrides it otherwise — which is the
   bug that kept the sign-in screen up after a successful sign-in. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + var(--sp-4));
  transition:background .3s, color .3s;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
a{color:inherit;text-decoration:none}
svg{display:block}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- app frame ---------- */
.wrap{max-width:560px;margin:0 auto;padding:0 var(--sp-4)}

.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar .row{display:flex;align-items:center;gap:var(--sp-3);height:56px}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--t-body)}
.brand svg{width:26px;height:26px}
.brand span{letter-spacing:-.02em}
.brand i{font-style:normal;color:var(--orange)}
.topacts{margin-left:auto;display:flex;gap:var(--sp-2)}
.iconbtn{
  width:44px;height:44px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .15s, border-color .15s, color .15s;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- screens ---------- */
.screen{display:none;padding-top:var(--sp-4)}
.screen.on{display:block}
.screen-title{font-size:var(--t-title);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--sp-4)}

/* ---------- bottom tab bar ---------- */
body.sheet-open .tabs{pointer-events:none}
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:var(--t-micro);font-weight:600;color:var(--ink-3);
  height:100%;justify-content:center;transition:color .18s;
}
.tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--navy)}
[data-theme="dark"] .tab.on{color:#fff}
.tab.on svg{stroke-width:2.1}
.tab:active{transform:scale(.93)}
.tab .badge{
  position:absolute;transform:translate(14px,-12px);
  min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--orange);color:#fff;font-size:9px;font-weight:800;
  display:grid;place-items:center;
}

/* the + is part of the bar, not floating over content */
.tab-add{position:relative}
.addbtn{
  width:50px;height:50px;border-radius:17px;
  background:linear-gradient(160deg,var(--orange),var(--orange-deep));
  color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 20px -8px rgba(243,111,36,.9);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1);
}
.addbtn svg{width:23px;height:23px;stroke-width:2.4;transition:transform .26s cubic-bezier(.34,1.4,.64,1)}
.addbtn:active{transform:scale(.92)}
body.menu-open .addbtn svg{transform:rotate(135deg)}

/* ---------- action menu ---------- */
.scrim{
  position:fixed;inset:0;z-index:55;background:rgba(10,18,32,.5);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.22s;
}
body.menu-open .scrim{opacity:1;visibility:visible}
.menu{
  position:fixed;left:0;right:0;z-index:58;
  bottom:calc(var(--tab-h) + var(--safe-b) + var(--sp-3));
  padding:0 var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);
  pointer-events:none;
}
.menu-item{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px var(--sp-4);
  box-shadow:var(--lift-2);text-align:left;
  opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .18s, transform .24s cubic-bezier(.34,1.4,.64,1);
}
body.menu-open .menu{pointer-events:auto}
body.menu-open .menu-item{opacity:1;transform:none}
body.menu-open .menu-item:nth-child(2){transition-delay:.04s}
body.menu-open .menu-item:nth-child(3){transition-delay:.08s}
body.menu-open .menu-item:nth-child(4){transition-delay:.12s}
.menu-item .ic{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;background:var(--bg);color:var(--navy);
}
[data-theme="dark"] .menu-item .ic{background:var(--surface-2);color:#fff}
.menu-item .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-item b{display:block;font-size:var(--t-body);font-weight:650;letter-spacing:-.01em}
.menu-item i{display:block;font-style:normal;font-size:var(--t-label);color:var(--ink-3);margin-top:1px}
.menu-item:active{transform:scale(.98)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:var(--sp-4);right:var(--sp-4);z-index:90;
  bottom:calc(var(--tab-h) + var(--safe-b) + var(--sp-4));
  background:var(--navy-deep);color:#fff;border-radius:var(--r-md);
  padding:13px var(--sp-4);font-size:var(--t-label);font-weight:600;
  box-shadow:var(--lift-2);
  transform:translateY(20px);opacity:0;visibility:hidden;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s, visibility .2s;
  pointer-events:none;max-width:528px;margin:0 auto;
}
.toast.show{transform:none;opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- brand mark: navy in light, white in dark ---------- */
.brand .logo{width:26px;height:26px}
.brand .lw{fill:var(--navy)}
[data-theme="dark"] .brand .lw{fill:#FFFFFF}
.brand .lo{fill:var(--orange)}
.brand span{color:var(--navy)}
[data-theme="dark"] .brand span{color:#FFFFFF}

/* ---------- theme button shows what you will GET, not what you have ---------- */
.ic-sun{display:none}
[data-theme="dark"] .ic-moon{display:none}
[data-theme="dark"] .ic-sun{display:block}

/* ---------- settings ---------- */
.set-group{margin-bottom:var(--sp-5)}
.set-group h3{
  font-size:var(--t-label);font-weight:700;color:var(--ink-3);
  margin-bottom:var(--sp-2);
}
.set-row{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px var(--sp-4);margin-bottom:var(--sp-2);min-height:62px;cursor:pointer;
}
.set-row:active{border-color:var(--orange)}
.set-row span{flex:1;min-width:0}
.set-row b{display:block;font-size:var(--t-body);font-weight:650}
.set-row i{display:block;font-style:normal;font-size:var(--t-label);color:var(--ink-3);margin-top:1px}
.set-row svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--ink-3);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.set-note{font-size:var(--t-label);color:var(--ink-3);line-height:1.6;
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:var(--sp-3)}
.set-ver{font-size:var(--t-micro);color:var(--ink-3);text-align:center;padding:var(--sp-4) 0}

/* ---------- sync status ---------- */
.sync-pill{
  display:flex;align-items:center;gap:7px;margin-left:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:7px 13px;font-size:var(--t-micro);font-weight:650;color:var(--ink-3);
  min-height:36px;
}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex-shrink:0}
.sync-dot.ok{background:var(--good)}
.sync-dot.bad{background:var(--bad)}
.sync-dot.off{background:var(--ink-3)}
.sync-dot.busy{background:var(--warn);animation:pulseDot 1.1s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- login ---------- */
.login{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-5);
  overflow-y:auto;
}
.login-box{width:100%;max-width:380px;text-align:left}
.login-logo{width:46px;height:46px;margin-bottom:var(--sp-4)}
.login-logo .lw{fill:var(--navy)}
[data-theme="dark"] .login-logo .lw{fill:#fff}
.login-logo .lo{fill:var(--orange)}
.login h1{font-size:var(--t-title);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--sp-2)}
.login-sub{font-size:var(--t-body);color:var(--ink-3);margin-bottom:var(--sp-5);line-height:1.6}
.login-note{
  font-size:var(--t-label);color:var(--ink-3);line-height:1.6;margin-top:var(--sp-3);
  background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);padding:var(--sp-3);
}
.login-note b{font-weight:800}
body.logged-out .tabs,body.logged-out .topbar{display:none}