/* ============================================================
   HyperDeck app-base — ONE home for the design tokens, reset and
   shared chrome every app page used to re-declare (the :root block,
   *, body, a, .topbar, .iconbtn, #toast …). Pages now link this
   first and keep only their page-specific CSS.
   Loaded before shell.css (which consumes these tokens) and before
   the page's own <style> (which may override).
   ============================================================ */
:root{
  --paper:#FBFBFA; --paper-2:#F7F6F3; --white:#FFFFFF;
  --ink:#1A1714; --ink-2:#2F2B27; --muted:#7A7268; --faint:#A8A096;
  --line:#EAE7E1; --line-2:#E2DED7;
  --red-bg:#FBEAE7; --red-ink:#9F3B2D;
  --green-bg:#EBF1EA; --green-ink:#3C6240;
  --blue-bg:#E6EFF4; --blue-ink:#2A6585;
  --amber-bg:#FBF3DB; --amber-ink:#8A6200;
  --like:#E0245E;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"]{
  --paper:#14110E; --paper-2:#1C1813; --white:#1F1A15;
  --ink:#F2EEE8; --ink-2:#D8D2C8; --muted:#9A9081; --faint:#6E665B;
  --line:#2A251F; --line-2:#352F27;
  --red-bg:#3A211B; --red-ink:#E6A493;
  --green-bg:#1E2A1F; --green-ink:#9FC4A2;
  --blue-bg:#1B2730; --blue-ink:#8FBBD6;
  --amber-bg:#2E2613; --amber-ink:#D8B566;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ---- shared chrome ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 26px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line)}
.spacer{flex:1}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.wordmark svg{width:21px;height:21px}
.iconbtn{width:36px;height:36px;border:1px solid var(--line-2);background:var(--white);border-radius:9px;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:500;
  transition:background .2s,border-color .2s,transform .15s var(--ease)}
.iconbtn:hover{background:var(--paper-2);border-color:var(--ink-2)}
.iconbtn:active{transform:scale(.96)}
.iconbtn svg{width:17px;height:17px}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:60;
  background:var(--ink);color:var(--paper);font-size:13.5px;padding:10px 18px;border-radius:9px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease);max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red-ink)}