/* Layout: fixed 234px nav rail (9x26) + fluid main; builder splits canvas:inspector near 1.618:1.
   Spacing on a 9px base (3-6-9 rhythm), type scale on the golden ratio (x1.618), motion at 180/360/540ms. */
:root{
  /* light palette */
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#EDF0F7; --raise:#FFFFFF;
  --border:rgba(16,22,38,.10); --border-2:rgba(16,22,38,.16);
  --fg:#101626; --fg-2:#2C3446; --muted:#5B6579;
  --accent:#2F55E6; --accent-2:#6E8BFF; --glow:rgba(47,85,230,.16);
  --ok:#0E9E6E; --warn:#B9801A; --crit:#D8354A;
  color-scheme:light;
  /* spacing 3-6-9 */
  --s-1:3px; --s0:6px; --s1:9px; --s2:18px; --s3:27px; --s4:36px; --s5:54px; --s6:72px; --s7:108px;
  /* golden type scale, base 16 */
  --t-cap:.8125rem; --t-body:1rem; --t-lg:1.25rem; --t-h3:1.625rem; --t-h2:2.625rem; --t-disp:4.25rem;
  /* radius on 3-6-9 */
  --r1:9px; --r2:18px; --r-pill:999px;
  /* motion */
  --fast:180ms; --mid:360ms; --slow:540ms; --ease:cubic-bezier(.22,.61,.36,1);
  --rail:234px;
  --ff-display:"Sora", system-ui, sans-serif;
  --ff-body:"Hanken Grotesk", system-ui, sans-serif;
  --ff-mono:"JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A0D14; --surface:#10151F; --surface-2:#161D2A; --raise:#141B28;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --fg:#E9EDF6; --fg-2:#C3CAD9; --muted:#8B94A8;
  --accent:#5B8CFF; --accent-2:#8EACFF; --glow:rgba(91,140,255,.30);
  --ok:#2FD6A0; --warn:#F3B64B; --crit:#FF5C6C;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A0D14; --surface:#10151F; --surface-2:#161D2A; --raise:#141B28;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --fg:#E9EDF6; --fg-2:#C3CAD9; --muted:#8B94A8;
  --accent:#5B8CFF; --accent-2:#8EACFF; --glow:rgba(91,140,255,.30);
  --ok:#2FD6A0; --warn:#F3B64B; --crit:#FF5C6C;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ff-body); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01";
}
h1,h2,h3,h4{font-family:var(--ff-display); font-weight:600; line-height:1.1; margin:0; text-wrap:balance}
a{color:inherit}
button{font-family:inherit}
.mono{font-family:var(--ff-mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100%}
.rail{
  position:sticky; top:env(safe-area-inset-top,0px); align-self:start;
  height:100dvh; padding:var(--s3) var(--s2);
  padding-left:max(var(--s2),env(safe-area-inset-left,0px));
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--surface); border-right:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:var(--s1)}
.mark{width:34px; height:34px; flex:none; border-radius:var(--r1); position:relative;
  background:linear-gradient(145deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 1px var(--border-2), 0 6px 18px var(--glow)}
.mark::before{content:""; position:absolute; inset:0; display:block;
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box;
  -webkit-mask:
    linear-gradient(135deg,transparent 42%, #000 42%, #000 50%, transparent 50%),
    linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out; mask-composite:exclude; opacity:0}
.mark svg{position:absolute; inset:0; width:100%; height:100%}
.brand b{font-family:var(--ff-display); font-weight:700; font-size:var(--t-lg); letter-spacing:-.01em}
.brand small{display:block; color:var(--muted); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-top:-2px}

.nav{display:flex; flex-direction:column; gap:var(--s-1)}
.nav button{
  display:flex; align-items:center; gap:var(--s2); width:100%; text-align:left;
  padding:var(--s1) var(--s2); border:0; border-radius:var(--r1); cursor:pointer;
  background:transparent; color:var(--muted); font-size:.95rem; font-weight:500;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav button .ic{width:19px;height:19px;flex:none}
.nav button:hover{background:var(--surface-2); color:var(--fg-2)}
.nav button[aria-current="true"]{background:var(--surface-2); color:var(--fg)}
.nav button[aria-current="true"] .ic{color:var(--accent)}
.nav .count{margin-left:auto; font-size:.75rem; color:var(--muted); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-pill); padding:1px 8px}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--s2)}
.unlim{border:1px solid var(--border); border-radius:var(--r1); padding:var(--s2);
  background:radial-gradient(120% 140% at 0% 0%, var(--glow), transparent 60%)}
.unlim .big{font-family:var(--ff-display); font-size:var(--t-h3); font-weight:700; color:var(--accent); line-height:1}
.unlim small{color:var(--muted); font-size:.8rem}

/* ---------- main ---------- */
.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); padding-right:max(var(--s4),env(safe-area-inset-right,0px));
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--surface)}
.topbar .mobrand{display:none; align-items:center; gap:var(--s1)}
.crumb{font-family:var(--ff-display); font-weight:600; font-size:var(--t-lg)}
.crumb span{color:var(--muted); font-weight:500; font-size:.85rem; display:block; margin-top:-3px}
.spacer{flex:1}
.icon-btn{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--r1);
  border:1px solid var(--border); background:var(--surface); color:var(--fg-2); cursor:pointer;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease)}
.icon-btn:hover{border-color:var(--border-2); color:var(--fg)}
.btn{display:inline-flex; align-items:center; gap:var(--s0); padding:var(--s1) var(--s2); border-radius:var(--r1);
  border:1px solid transparent; font-weight:600; font-size:.92rem; cursor:pointer; transition:transform var(--fast) var(--ease), filter var(--fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 6px 20px var(--glow)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--surface); border-color:var(--border); color:var(--fg)}
.btn-ghost:hover{border-color:var(--border-2)}

.content{padding:var(--s4); padding-left:max(var(--s4),env(safe-area-inset-left,0px));
  padding-right:max(var(--s4),env(safe-area-inset-right,0px)); padding-bottom:var(--s7);
  display:flex; flex-direction:column; gap:var(--s4); max-width:1240px; width:100%}
.view[hidden]{display:none!important}

.eyebrow{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.sec-head{display:flex; align-items:baseline; gap:var(--s2)}
.sec-head h2{font-size:var(--t-h3)}
.sec-head .spacer{min-width:var(--s2)}

/* stat tiles */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:var(--s3)}
.tile .k{display:flex; align-items:center; gap:var(--s0); color:var(--muted); font-size:.82rem; font-weight:600}
.tile .v{font-family:var(--ff-display); font-size:var(--t-h2); font-weight:700; line-height:1; margin-top:var(--s1); letter-spacing:-.02em}
.tile .v.accent{color:var(--accent)}
.tile .sub{color:var(--muted); font-size:.8rem; margin-top:var(--s0)}
.spark{height:30px; margin-top:var(--s1)}

/* automation cards */
.grid-auto{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2)}
.acard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r2);
  padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); cursor:pointer;
  transition:border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease)}
.acard:hover{border-color:var(--border-2); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18)}
.acard .row{display:flex; align-items:center; gap:var(--s1)}
.acard h3{font-size:1.06rem; font-weight:600; letter-spacing:-.01em}
.acard .desc{color:var(--muted); font-size:.88rem}
.chain{display:flex; align-items:center; gap:var(--s0); flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border); font-size:.8rem; font-weight:500; min-width:0}
.chip .svc{width:15px;height:15px;flex:none}
.arrow{color:var(--muted); flex:none}
.meta{display:flex; align-items:center; gap:var(--s2); color:var(--muted); font-size:.8rem; margin-top:auto; padding-top:var(--s1)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%, transparent)}
.dot.off{background:var(--muted)}

/* toggle */
.switch{position:relative; width:42px; height:24px; flex:none; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border-2); cursor:pointer; transition:background var(--fast) var(--ease)}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--muted); transition:transform var(--fast) var(--ease), background var(--fast) var(--ease)}
.switch[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 30%, var(--surface-2))}
.switch[aria-checked="true"]::after{transform:translateX(18px); background:var(--accent)}

/* ---------- builder ---------- */
.builder{display:grid; grid-template-columns:1.618fr 1fr; gap:var(--s3); align-items:start}
.canvas{background:
  radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/18px 18px,
  var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:var(--s4);
  position:relative; min-height:460px}
.flow{position:relative; display:flex; flex-direction:column; gap:var(--s3); padding-left:var(--s4)}
.flow::before{content:""; position:absolute; left:calc(var(--s2) + 1px); top:14px; bottom:14px; width:2px;
  background:linear-gradient(var(--accent),var(--accent-2)); opacity:.5; border-radius:2px}
.pulse{position:absolute; left:calc(var(--s2) - 3px); width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px 3px var(--glow); opacity:0; top:14px}
.node{position:relative; background:var(--raise); border:1px solid var(--border); border-radius:var(--r1);
  padding:var(--s2); display:flex; align-items:center; gap:var(--s2); cursor:pointer;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease)}
.node::before{content:""; position:absolute; left:calc(-1*var(--s4) + var(--s2) - 4px); top:50%; transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%; background:var(--surface); border:2px solid var(--accent)}
.node:hover{border-color:var(--border-2)}
.node[aria-selected="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)}
.node .nic{width:36px;height:36px;flex:none;border-radius:var(--r1);display:grid;place-items:center;
  background:var(--surface-2); color:var(--accent)}
.node .nb{min-width:0}
.node .ntag{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.node .ntitle{font-weight:600; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.node.filter .nic{color:var(--warn)}
.node.action .nic{color:var(--ok)}
.add-node{display:flex; align-items:center; gap:var(--s1); color:var(--muted); font-size:.85rem; font-weight:600;
  background:transparent; border:1px dashed var(--border-2); border-radius:var(--r1); padding:var(--s1) var(--s2); cursor:pointer; position:relative}
.add-node::before{content:""; position:absolute; left:calc(-1*var(--s4) + var(--s2) - 2px); top:50%; transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%; background:var(--border-2)}
.add-node:hover{color:var(--fg); border-color:var(--accent)}

.inspect{background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:var(--s3);
  display:flex; flex-direction:column; gap:var(--s2); position:sticky; top:84px}
.inspect .field{display:flex; flex-direction:column; gap:var(--s0)}
.inspect label{font-size:.8rem; font-weight:600; color:var(--fg-2)}
.inspect input, .inspect select, .inspect textarea{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r1); color:var(--fg);
  padding:var(--s1) var(--s2); font-family:var(--ff-body); font-size:.9rem; width:100%}
.inspect textarea{font-family:var(--ff-mono); font-size:.82rem; line-height:1.5; resize:vertical; min-height:96px}
.inspect input:focus, .inspect select:focus, .inspect textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.codebox{background:var(--bg); border:1px solid var(--border); border-radius:var(--r1); padding:var(--s2);
  font-family:var(--ff-mono); font-size:.8rem; line-height:1.55; overflow-x:auto; color:var(--fg-2)}
.codebox .cm{color:var(--muted)}
.codebox .kw{color:var(--accent)}
.codebox .st{color:var(--ok)}

/* connectors */
.grid-con{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}
.con{background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:var(--s3);
  display:flex; flex-direction:column; gap:var(--s1); transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease)}
.con:hover{border-color:var(--border-2); transform:translateY(-2px)}
.con .cic{width:40px;height:40px;border-radius:var(--r1);display:grid;place-items:center;background:var(--surface-2); color:var(--accent)}
.con h4{font-size:1rem; font-weight:600}
.con p{color:var(--muted); font-size:.82rem; margin:0; flex:1}
.con .st{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600}
.con .st.on{color:var(--ok)} .con .st.off{color:var(--muted)}

/* activity table */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden}
.tabs{display:flex; gap:var(--s-1); padding:var(--s2) var(--s3); border-bottom:1px solid var(--border); flex-wrap:wrap}
.tab{padding:5px 12px; border-radius:var(--r-pill); border:1px solid transparent; background:transparent; color:var(--muted);
  font-weight:600; font-size:.84rem; cursor:pointer}
.tab[aria-current="true"]{background:var(--surface-2); color:var(--fg); border-color:var(--border)}
.tbl{width:100%; overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:620px}
th{text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600;
  padding:var(--s1) var(--s3)}
td{padding:var(--s1) var(--s3); border-top:1px solid var(--border)}
tr:hover td{background:var(--surface-2)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-pill); font-size:.76rem; font-weight:600}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.pill.crit{background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit)}

/* settings */
.set-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2)}
.set-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
.set-card h4{font-size:1.02rem; display:flex; align-items:center; gap:var(--s1)}
.set-card h4 .ic{width:18px;height:18px;color:var(--accent)}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:var(--s1) 0; border-top:1px solid var(--border)}
.set-row:first-of-type{border-top:0}
.set-row .lab{font-size:.9rem} .set-row .lab small{display:block; color:var(--muted); font-size:.78rem}
.endpoint{font-family:var(--ff-mono); font-size:.78rem; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r1); padding:var(--s0) var(--s1); color:var(--fg-2); display:flex; align-items:center; gap:var(--s1); overflow-x:auto}
.copy{margin-left:auto; flex:none; cursor:pointer; border:0; background:transparent; color:var(--accent); font-weight:600; font-size:.78rem}

.badge-new{font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:var(--r-pill); padding:1px 7px}

/* toast */
.toast{position:fixed; left:50%; bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(20px);
  background:var(--fg); color:var(--bg); padding:var(--s1) var(--s3); border-radius:var(--r-pill); font-weight:600; font-size:.88rem;
  opacity:0; pointer-events:none; transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease); z-index:50}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* mobile */
.mob-tabs{display:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .topbar .mobrand{display:flex}
  .crumb{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-auto{grid-template-columns:1fr}
  .grid-con{grid-template-columns:repeat(2,1fr)}
  .builder{grid-template-columns:1fr}
  .inspect{position:static}
  .set-grid{grid-template-columns:1fr}
  .content{padding:var(--s3); padding-bottom:var(--s7)}
  .mob-tabs{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(12px);
    border-top:1px solid var(--border); padding:var(--s0) var(--s1) calc(var(--s0) + env(safe-area-inset-bottom,0px));
    justify-content:space-around}
  .mob-tabs button{flex:1; border:0; background:transparent; color:var(--muted); display:flex; flex-direction:column;
    align-items:center; gap:2px; font-size:.62rem; font-weight:600; padding:var(--s0) 0; cursor:pointer}
  .mob-tabs button .ic{width:21px;height:21px}
  .mob-tabs button[aria-current="true"]{color:var(--accent)}
}
@media (max-width:460px){ .stats{grid-template-columns:1fr} .grid-con{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important} }

/* ---------- additions for the live app ---------- */
/* login gate */
.gate{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--s3);
  background:radial-gradient(130% 120% at 50% -10%, var(--glow), transparent 55%), var(--bg)}
.gate[hidden]{display:none}
.gate .box{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);
  box-shadow:0 24px 70px rgba(0,0,0,.35)}
.gate .mark{width:46px;height:46px}
.gate h1{font-size:var(--t-h3); letter-spacing:-.02em}
.gate p{color:var(--muted); font-size:.9rem; margin:0}
.gate input{background:var(--bg); border:1px solid var(--border); border-radius:var(--r1); color:var(--fg);
  padding:var(--s1) var(--s2); font-family:var(--ff-mono); font-size:.86rem; width:100%}
.gate input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.gate .err{color:var(--crit); font-size:.84rem; min-height:1.1em; margin:0}

/* empty + loading states */
.empty{border:1px dashed var(--border-2); border-radius:var(--r2); padding:var(--s5) var(--s4);
  text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:var(--s1)}
.empty svg{width:34px;height:34px;color:var(--muted);opacity:.7}
.empty b{color:var(--fg); font-family:var(--ff-display); font-size:var(--t-lg)}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));
  background-size:200% 100%; animation:shine 1.2s linear infinite; border-radius:var(--r2); height:120px}
@keyframes shine{to{background-position:-200% 0}}

/* builder extras */
.hookbar{display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap; margin-bottom:var(--s2)}
.testwrap{margin-top:var(--s2); display:flex; flex-direction:column; gap:var(--s1)}
.result{background:var(--bg); border:1px solid var(--border); border-radius:var(--r1); padding:var(--s2);
  font-family:var(--ff-mono); font-size:.78rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto}
.result .rok{color:var(--ok)} .result .rskip{color:var(--warn)} .result .rfail{color:var(--crit)}
.node .del{margin-left:auto; flex:none; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:4px; border-radius:6px}
.node .del:hover{color:var(--crit); background:color-mix(in srgb,var(--crit) 12%,transparent)}
.hint{color:var(--muted); font-size:.78rem}
.danger{color:var(--crit)!important}

/* modal */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--s3);
  background:rgba(8,10,16,.55); backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modal .sheet{width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r2); padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2);
  box-shadow:0 24px 70px rgba(0,0,0,.4)}
.modal h3{font-size:var(--t-lg)}
.pick{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1)}
.pick button{display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--s2) var(--s1);
  border:1px solid var(--border); border-radius:var(--r1); background:var(--bg); color:var(--fg-2); cursor:pointer;
  font-size:.78rem; font-weight:600; transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease)}
.pick button:hover{border-color:var(--accent); color:var(--fg)}
.pick button svg{width:20px;height:20px;color:var(--accent)}
.offline{position:fixed; left:50%; top:calc(var(--s1) + env(safe-area-inset-top,0px)); transform:translateX(-50%);
  background:var(--warn); color:#000; font-weight:600; font-size:.8rem; padding:4px 14px; border-radius:var(--r-pill); z-index:40}
.offline[hidden]{display:none}