/* ============================================================
   löyly — shared theme. Ember-warm, sauna-dark.
   ============================================================ */
:root {
  --void:#0B0A09; --charcoal:#16130F; --ash:#211C16; --ash-line:#2E271F;
  --ember:#E8641A; --flare:#FFB23E; --hotwhite:#FFE9C7;
  --steam:#9BA8A6; --steam-dim:#6C7674; --cool:#4E6470; --cool-soft:#35454E;
  --ok:#66D19E; --danger:#E5533D;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --ui:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --s1:6px; --s2:10px; --s3:16px; --s4:22px; --s5:32px; --s6:48px;
  --heat:0.05; --glow:232,100,26;
  --maxw:520px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--ui); color:var(--hotwhite);
  background:radial-gradient(120% 80% at 50% -8%, #191410 0%, var(--void) 55%) fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
}
a { color:inherit; }
button { font-family:inherit; }

.wrap {
  max-width:var(--maxw); margin:0 auto; width:100%;
  padding:max(var(--s4), env(safe-area-inset-top)) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:var(--s4);
}

/* top bar ------------------------------------------------------ */
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.02em; }
.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px 1px rgba(var(--glow),0.9); }
.topbar-right { display:flex; align-items:center; gap:var(--s3); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--ash); border:1px solid var(--ash-line); object-fit:cover; }
.iconlink {
  color:var(--steam-dim); background:none; border:0; padding:3px 1px; margin:0;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; line-height:1.2;
  border-bottom:1.5px solid transparent;
  transition:color .22s ease, border-color .22s ease, opacity .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.iconlink svg { width:15px; height:15px; flex:none; }
.iconlink:hover { color:var(--ember); border-color:var(--ember); }
.iconlink:active { color:var(--flare); opacity:.85; }
.iconlink:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--flare); outline-offset:3px; border-radius:3px; }

/* generic pieces ----------------------------------------------- */
.eyebrow { font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--steam-dim); font-weight:600; }
.muted { color:var(--steam); }
.dim { color:var(--steam-dim); }
.center { text-align:center; }
.hidden { display:none !important; }
.spacer { flex:1; }

/* gentle entrance when a view is shown */
.view-in { animation:viewIn .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes viewIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.card {
  background:linear-gradient(180deg, var(--charcoal), #120F0C);
  border:1px solid var(--ash-line); border-radius:18px; padding:var(--s3) var(--s4);
}

.btn {
  font-weight:600; font-size:15px; padding:15px 18px; border-radius:14px;
  border:1px solid var(--ash-line); background:var(--ash); color:var(--steam);
  cursor:pointer; min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .12s ease, background .25s, color .25s, border-color .25s, box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn:not(:disabled):hover { transform:translateY(-2px); }
.btn:not(:disabled):active { transform:translateY(0) scale(.985); }
.btn:disabled { cursor:default; opacity:.85; }
.btn-primary { background:linear-gradient(180deg, var(--ember), #C9500F); color:#1A0E06; border-color:transparent; box-shadow:0 8px 26px -12px rgba(232,100,26,.7), inset 0 1px 0 rgba(255,220,180,.35); }
.btn-cool { background:linear-gradient(180deg, var(--cool), var(--cool-soft)); color:#EAF2F4; border-color:transparent; }
.btn-ghost { background:transparent; }
.btn-danger { background:transparent; border-color:rgba(229,83,61,.4); color:var(--danger); }
.btn-sm { min-height:40px; padding:9px 14px; font-size:13.5px; border-radius:11px; }

.spin { width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; display:none; }
.is-pending .spin { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

.toast {
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); translate:-50% 0;
  background:var(--ash); border:1px solid var(--ash-line); color:var(--hotwhite);
  padding:12px 18px; border-radius:12px; font-size:14px; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:50; opacity:0; pointer-events:none; transition:opacity .25s, translate .25s;
}
.toast.show { opacity:1; translate:-50% -6px; }
.toast.err { border-color:rgba(229,83,61,.5); }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* login -------------------------------------------------------- */
.login { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:var(--s4); }
.login-card { text-align:center; max-width:360px; width:100%; display:flex; flex-direction:column; gap:var(--s4); align-items:center; }
.login .glow-orb { width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(232,100,26,.9), rgba(232,100,26,0) 70%); filter:blur(4px); animation:coals 6s ease-in-out infinite; }
.login h1 { font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-0.03em; }
.google-btn {
  display:inline-flex; align-items:center; gap:12px; background:#fff; color:#1f1f1f;
  border:none; border-radius:12px; padding:13px 22px; font-size:15px; font-weight:600; cursor:pointer; min-height:52px;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6); transition:transform .12s;
}
.google-btn:hover { transform:translateY(-2px); }
.google-g { width:20px; height:20px; }
.login-err { color:var(--danger); font-size:14px; font-weight:500; min-height:1em; }

/* sauna list --------------------------------------------------- */
.list { display:flex; flex-direction:column; gap:var(--s3); }
.sauna-card {
  display:flex; align-items:center; gap:var(--s3); text-align:left; width:100%;
  background:linear-gradient(180deg, var(--charcoal), #120F0C); border:1px solid var(--ash-line);
  border-radius:18px; padding:var(--s3) var(--s4); cursor:pointer; color:inherit;
  transition:transform .12s, border-color .25s, box-shadow .25s;
}
.sauna-card { -webkit-tap-highlight-color:transparent; }
.sauna-card:hover { transform:translateY(-2px); border-color:#3a3128; }
.sauna-card:active { transform:translateY(0) scale(.99); border-color:#3a3128; }
.sauna-card .flame {
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--cool-soft); transition:background .5s, box-shadow .5s; font-size:20px;
}
.sauna-card.on .flame { background:radial-gradient(circle at 50% 60%, var(--flare), var(--ember)); box-shadow:0 0 16px 1px rgba(var(--glow),.7); }
.sauna-card .info { flex:1; min-width:0; }
.sauna-card .nm { font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sauna-card .meta { font-size:13px; color:var(--steam); margin-top:2px; }
.sauna-card .temp-badge { font-family:var(--display); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums; }
.sauna-card .temp-badge .u { font-size:.55em; color:var(--steam); }
.sauna-card .chev { color:var(--steam-dim); font-size:20px; }
.pill { display:inline-block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:999px; }
.pill.on { background:rgba(232,100,26,.16); color:var(--flare); }
.pill.off { background:rgba(78,100,112,.18); color:var(--steam); }
.pill.offline { background:rgba(229,83,61,.14); color:var(--danger); }
.pill.view { background:rgba(155,168,166,.14); color:var(--steam); }

.empty { text-align:center; padding:var(--s6) var(--s4); color:var(--steam); }
.empty .big { font-size:40px; margin-bottom:var(--s3); }

/* detail (the heat dashboard) ---------------------------------- */
.ambient { position:fixed; left:50%; top:32%; width:min(120vw,780px); aspect-ratio:1; translate:-50% -50%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--glow),0.85) 0%, rgba(var(--glow),0.32) 32%, rgba(var(--glow),0) 68%);
  opacity:calc(0.10 + var(--heat)*0.62); filter:blur(6px); transition:opacity 1.6s ease, background 1.6s ease; }
.is-hot .ambient { animation:coals 6.5s ease-in-out infinite; }
@keyframes coals { 0%,100%{ transform:scale(1); opacity:calc(0.14 + var(--heat)*0.58);} 50%{ transform:scale(1.06); opacity:calc(0.10 + var(--heat)*0.70);} }

.detail-wrap { position:relative; z-index:1; }
.hero { text-align:center; padding:var(--s5) 0 var(--s4); }
.temp { font-family:var(--display); font-weight:700; line-height:.9; letter-spacing:-0.04em; font-size:clamp(84px,30vw,148px);
  display:inline-flex; align-items:flex-start; justify-content:center;
  color:color-mix(in oklab, var(--hotwhite), var(--flare) calc(var(--heat)*55%));
  text-shadow:0 0 calc(var(--heat)*42px) rgba(var(--glow), calc(var(--heat)*0.6)); transition:color 1.2s, text-shadow 1.2s; }
.temp .unit { font-size:.30em; font-weight:600; margin-top:.55em; margin-left:.12em; color:var(--steam); letter-spacing:0; }
.temp-f { margin-top:var(--s2); font-size:13.5px; color:var(--steam-dim); font-weight:500; font-variant-numeric:tabular-nums; }
.state { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:var(--s4); }
.state .lamp { width:10px; height:10px; border-radius:50%; background:var(--cool-soft); transition:background .5s, box-shadow .5s; }
.state .word { font-family:var(--display); font-weight:600; font-size:19px; }
.state .sub { font-size:13px; color:var(--steam); font-weight:500; }
.is-on .state .lamp { background:var(--ember); box-shadow:0 0 12px 1px rgba(var(--glow),.85); }
.is-on .state .word { color:var(--hotwhite); }
.is-off .state .word { color:var(--steam); }

.controls { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s4); }
.controls .btn { min-height:56px; }
.controls .btn.current { background:transparent; border-style:dashed; color:var(--steam-dim); }
.controls.viewonly { grid-template-columns:1fr; }
.viewonly-note { text-align:center; color:var(--steam-dim); font-size:13px; padding:var(--s3); border:1px dashed var(--ash-line); border-radius:14px; }

.telemetry .row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:9px 0; }
.telemetry .row + .row { border-top:1px solid var(--ash-line); }
.telemetry .k { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steam-dim); font-weight:600; }
.telemetry .v { font-size:15px; color:var(--hotwhite); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }

.conn { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--steam); font-weight:500; }
.conn .pip { width:7px; height:7px; border-radius:50%; background:var(--cool); }
.conn.live .pip { background:var(--ok); box-shadow:0 0 8px rgba(102,209,158,.8); animation:breathe 2.6s ease-in-out infinite; }
.conn.stale .pip { background:var(--flare); }
@keyframes breathe { 0%,100%{opacity:1} 50%{opacity:.35} }

.back { background:none; border:none; color:var(--steam-dim); font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 2px; margin-left:-2px; transition:color .22s ease, transform .12s ease; -webkit-tap-highlight-color:transparent; }
.back:hover { color:var(--ember); transform:translateX(-2px); }
.back:active { color:var(--flare); }

/* admin -------------------------------------------------------- */
.admin-section { display:flex; flex-direction:column; gap:var(--s3); }
.admin-section h2 { font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.01em; }
.tabs { display:flex; gap:6px; background:var(--ash); border:1px solid var(--ash-line); border-radius:12px; padding:4px; }
.tab { flex:1; text-align:center; padding:9px; border-radius:9px; font-weight:600; font-size:13.5px; color:var(--steam); cursor:pointer; border:none; background:none; transition:background .2s, color .2s; }
.tab.active { background:linear-gradient(180deg, var(--ember), #C9500F); color:#1A0E06; }
.rowitem { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--ash-line); }
.rowitem:first-of-type { border-top:none; }
.rowitem .grow { flex:1; min-width:0; }
.rowitem .t1 { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rowitem .t2 { font-size:12.5px; color:var(--steam); margin-top:1px; }
.tag { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--ash); border:1px solid var(--ash-line); color:var(--steam); }
.tag.admin { color:var(--flare); border-color:rgba(255,178,62,.3); }
.tag.pending { color:var(--steam-dim); }
.tag.inactive { color:var(--danger); border-color:rgba(229,83,61,.3); }
input, select {
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--ash-line);
  background:var(--void); color:var(--hotwhite); font-family:inherit; font-size:15px;
}
input:focus, select:focus { outline:2px solid var(--flare); outline-offset:1px; border-color:transparent; }
label.field { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--steam-dim); font-weight:600; margin:0 0 6px; }
.form-row { display:flex; gap:var(--s2); align-items:flex-end; }
.form-row > div { flex:1; }
.keybox { font-family:ui-monospace, "SF Mono", Menlo, monospace; background:var(--void); border:1px solid var(--flare); border-radius:11px; padding:14px; word-break:break-all; font-size:13px; color:var(--flare); }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:60; display:flex; align-items:center; justify-content:center; padding:var(--s4); }
.modal { background:linear-gradient(180deg, var(--charcoal), #120F0C); border:1px solid var(--ash-line); border-radius:18px; padding:var(--s4); max-width:440px; width:100%; display:flex; flex-direction:column; gap:var(--s3); max-height:86dvh; overflow:auto; }
.modal h3 { font-family:var(--display); font-weight:700; font-size:18px; }

@media (max-width:360px) { .temp { font-size:clamp(72px,28vw,110px); } }
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .is-hot .ambient, .login .glow-orb { animation:none; }
}