/* NeckQuest interactive demo — standalone, no backend, no device.
   Palette mirrors the real device/server UI (Material-dark teal theme). */
:root{
  --bg:#141218; --sur-lo:#1C1B1F; --card:#211F26; --card2:#2B2930;
  --on:#E6E1E5; --on-var:#CAC4D0; --outline:#49454F; --outline-hi:#938F99;
  --pri:#79D7D4;            /* teal accent / relaxed */
  --relax:#66BB6A;          /* green */
  --tense:#FFB4AB;          /* red */
  --tense-strong:#F44336;
  --warn:#EFC070;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--on);
  font-family:system-ui,'Roboto',sans-serif;
  display:flex;flex-direction:column;min-height:100dvh;
}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,'Roboto Mono',monospace}

/* ── top bar ──────────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 18px;background:var(--sur-lo);border-bottom:1px solid var(--outline);
}
.topbar .brand{font-weight:800;letter-spacing:.16em;color:var(--pri);font-size:.95rem}
.topbar .demo-tag{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);background:var(--warn);border-radius:10px;padding:2px 8px;font-weight:700}
.topbar .nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tab{
  border:1px solid transparent;background:none;color:var(--on-var);cursor:pointer;
  font:600 .8rem/1 system-ui;padding:8px 14px;border-radius:18px;
}
.tab:hover{color:var(--on)}
.tab.active{color:var(--pri);border-color:var(--pri);background:rgba(121,215,212,.08)}
.topbar .home-link{font-size:.78rem;color:var(--on-var)}

/* ── layout ───────────────────────────────────────────────────────────────── */
.wrap{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:20px 18px 40px}
.panel{display:none}
.panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-title{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--pri);
  font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.hint{font-size:.82rem;color:var(--on-var);margin:10px 0 18px;line-height:1.5}

/* ── state banner ─────────────────────────────────────────────────────────── */
.state{
  display:flex;align-items:center;gap:16px;border-radius:16px;
  padding:20px 22px;border:1px solid var(--outline);margin-bottom:16px;
  transition:background .25s,border-color .25s;
}
.state-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;background:var(--on-var);
  transition:background .25s,box-shadow .25s}
.state-text{display:flex;flex-direction:column;gap:3px}
.state-main{font-size:1.5rem;font-weight:800;letter-spacing:.05em}
.state-sub{font-size:.8rem;color:var(--on-var)}
.state-acc{margin-left:auto;text-align:right;font-family:ui-monospace,monospace;font-size:.72rem;color:var(--on-var)}
.state-acc b{display:block;font-size:1.1rem;color:var(--on)}
.state.relaxed{background:#15291b;border-color:var(--relax)}
.state.relaxed .state-dot{background:var(--relax);box-shadow:0 0 14px rgba(102,187,106,.7)}
.state.relaxed .state-main{color:var(--relax)}
.state.tense{background:#34191a;border-color:var(--tense)}
.state.tense .state-dot{background:var(--tense-strong);box-shadow:0 0 14px rgba(244,67,54,.7)}
.state.tense .state-main{color:var(--tense)}

/* ── scope / canvas ───────────────────────────────────────────────────────── */
.scope-card{background:var(--card);border:1px solid var(--outline);border-radius:16px;
  padding:14px 16px 16px;margin-bottom:16px}
.scope-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--on-var)}
.scope-head b{color:var(--pri)}
canvas{display:block;width:100%;border-radius:10px;background:var(--sur-lo);
  border:1px solid var(--outline)}
.readouts{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.ro{display:flex;flex-direction:column;gap:2px}
.ro .lbl{font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-var)}
.ro .val{font-size:1rem;font-weight:600;font-family:ui-monospace,monospace}
.ro .val.relax{color:var(--relax)}.ro .val.tense{color:var(--tense)}

/* ── controls ─────────────────────────────────────────────────────────────── */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  font:600 .85rem/1 system-ui;padding:11px 20px;border-radius:22px;transition:filter .15s}
.btn:hover{filter:brightness(1.1)}
.btn-pri{background:var(--pri);color:#003736}
.btn-tense{background:var(--tense-strong);color:#fff}
.btn-ghost{background:var(--card2);color:var(--on);border:1px solid var(--outline)}
.btn.is-on{outline:2px solid var(--pri);outline-offset:2px}
.slider-row{display:flex;align-items:center;gap:12px;margin:10px 0 4px;flex-wrap:wrap}
.slider-row label{font-size:.78rem;color:var(--on-var)}
input[type=range]{accent-color:var(--pri);width:220px}

/* ── chips (past sessions) ────────────────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{font-family:ui-monospace,monospace;font-size:.72rem;color:var(--on-var);
  background:var(--card2);border:1px solid var(--outline);border-radius:14px;padding:5px 10px}
.chip b{color:var(--pri)}

/* ── holter stats ─────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:14px}
.stat .lbl{font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-var)}
.stat .big{font-size:1.5rem;font-weight:800;margin-top:4px;font-family:ui-monospace,monospace}
.stat .big.tense{color:var(--tense)}.stat .big.relax{color:var(--relax)}.stat .big.thr{color:var(--pri)}

.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.78rem;color:var(--on-var);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:13px;height:13px;border-radius:3px;display:inline-block}
.legend .i-tense{background:rgba(244,67,54,.45)}
.legend .i-relax{background:rgba(102,187,106,.4)}

.footnote{margin-top:26px;font-size:.74rem;color:var(--outline-hi);line-height:1.6;text-align:center}