/* =====================================================================
   FOX Knock Detector — Design tokens
   Aesthetic: automotive diagnostic instrument / oscilloscope.
   Dark = deep graphite dash, amber = knock/alert, teal = live signal.
   Fonts: system stacks only (no external font/CDN downloads at runtime).
===================================================================== */

:root{
  --bg:            #0B0F14;
  --panel:         #121820;
  --panel-raised:  #182028;
  --line:          #232C36;
  --text:          #E7ECF1;
  --text-muted:    #8593A1;
  --accent:        #FF8A2A;   /* amber - knock / alert */
  --accent-2:      #29D6CF;   /* teal - live signal */
  --danger:        #FF4D5E;
  --good:          #33C97A;
  --font-ui:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Vazirmatn", "Tahoma", sans-serif;
  --font-num:       ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Courier New", monospace;
  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 10px 30px rgba(0,0,0,.35);
}

[data-theme="light"]{
  --bg:            #EEF1F4;
  --panel:         #FFFFFF;
  --panel-raised:  #F7F9FB;
  --line:          #DEE4EA;
  --text:          #182028;
  --text-muted:    #5B6672;
  --accent:        #E06B14;
  --accent-2:      #0E9C96;
  --danger:        #D8323F;
  --good:          #1F9A5A;
  --shadow:        0 10px 24px rgba(20,30,40,.08);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui);
  -webkit-tap-highlight-color:transparent;
}
body{
  padding-bottom:env(safe-area-inset-bottom);
  transition:background .25s ease, color .25s ease;
}

button, input, select{ font-family:inherit; }

/* ---------- Layout ---------- */
.app{
  max-width:560px;
  margin:0 auto;
  padding:14px 14px 90px;
  display:flex; flex-direction:column; gap:14px;
}

/* ---------- Header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:radial-gradient(circle at 30% 30%, var(--accent), #a34c00 75%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-num); font-weight:700; color:#0B0F14;
  box-shadow:0 0 18px rgba(255,138,42,.45);
  font-size:15px;
}
.brand-text .name{
  font-weight:700; font-size:17px; letter-spacing:.3px;
}
.brand-text .tag{
  font-size:11px; color:var(--text-muted); letter-spacing:.6px; text-transform:uppercase;
}
.topbar-actions{ display:flex; gap:8px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel);
  color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:17px;
}
.icon-btn:active{ transform:scale(.94); }

/* ---------- Status strip ---------- */
.status-strip{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--danger); flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(255,77,94,.15);
}
.dot.on{ background:var(--good); box-shadow:0 0 0 4px rgba(51,201,122,.18); }
.status-text{ font-size:13px; color:var(--text-muted); flex:1; }
.status-text b{ color:var(--text); font-weight:600; }
.connect-btn{
  border:none; border-radius:var(--radius-sm);
  padding:9px 16px; font-weight:700; font-size:13px;
  background:var(--accent); color:#1a1204; cursor:pointer;
}
.connect-btn.connected{ background:var(--panel-raised); color:var(--good); border:1px solid var(--good); }
.connect-btn:active{ transform:scale(.97); }

/* ---------- Card ---------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow);
}
.card-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.card-title h2{
  font-size:13px; margin:0; text-transform:uppercase; letter-spacing:.8px;
  color:var(--text-muted); font-weight:700;
}

/* ---------- Live gauge row ---------- */
.gauge-row{ display:flex; gap:12px; }
.gauge{
  flex:1; background:var(--panel-raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; text-align:center;
}
.gauge .value{
  font-family:var(--font-num); font-size:30px; font-weight:700;
  color:var(--accent-2); line-height:1.1;
}
.gauge .value.knock{ color:var(--accent); }
.gauge .label{
  margin-top:4px; font-size:11px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.6px;
}
.knock-pulse{
  position:relative;
}
.knock-pulse.flash .value{
  animation:knockFlash .35s ease;
}
@keyframes knockFlash{
  0%{ text-shadow:0 0 0 rgba(255,138,42,0); transform:scale(1); }
  30%{ text-shadow:0 0 22px rgba(255,138,42,.9); transform:scale(1.12); }
  100%{ text-shadow:0 0 0 rgba(255,138,42,0); transform:scale(1); }
}

/* ---------- Live scope canvas ---------- */
.scope-wrap{
  position:relative; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--panel-raised); border:1px solid var(--line);
  height:130px;
}
#liveScope{ width:100%; height:100%; display:block; }
.scope-threshold-label{
  position:absolute; right:8px; top:6px; font-size:10px;
  color:var(--accent); font-family:var(--font-num);
  background:rgba(0,0,0,.25); padding:2px 6px; border-radius:6px;
}

/* ---------- Controls ---------- */
.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
.field-label{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--text-muted); margin-bottom:6px;
}
.field-label b{ color:var(--text); font-family:var(--font-num); }
input[type="range"]{
  width:100%; accent-color:var(--accent); height:4px;
}
.number-input{
  width:100%; background:var(--panel-raised); border:1px solid var(--line);
  color:var(--text); border-radius:var(--radius-sm); padding:9px 10px;
  font-family:var(--font-num); font-size:14px;
}

.btn-row{ display:flex; gap:10px; margin-top:4px; }
.btn{
  flex:1; border:1px solid var(--line); background:var(--panel-raised);
  color:var(--text); border-radius:var(--radius-sm); padding:11px;
  font-weight:700; font-size:13px; cursor:pointer;
}
.btn:active{ transform:scale(.97); }
.btn.primary{ background:var(--accent); color:#1a1204; border:none; }
.btn.danger{ background:var(--danger); color:#210505; border:none; }
.btn.ghost{ background:transparent; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.record-fab{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; border-radius:var(--radius);
  background:var(--panel-raised); border:1px solid var(--line);
  font-weight:800; font-size:15px; cursor:pointer;
}
.record-fab .rec-dot{
  width:12px; height:12px; border-radius:50%; background:var(--danger);
}
.record-fab.active{
  background:linear-gradient(135deg, rgba(255,77,94,.16), rgba(255,77,94,.02));
  border-color:var(--danger); color:var(--danger);
}
.record-fab.active .rec-dot{ animation:blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.2; } }

/* ---------- Calibration banner ---------- */
.calib-banner{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,138,42,.08); border:1px dashed var(--accent);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:12.5px;
  color:var(--accent);
}

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto; padding:8px 13px; border-radius:999px;
  background:var(--panel-raised); border:1px solid var(--line);
  color:var(--text-muted); font-size:12.5px; font-weight:700;
  cursor:pointer; white-space:nowrap;
}
.tab.active{ background:var(--accent); color:#1a1204; border-color:var(--accent); }

.chart-box{ position:relative; height:230px; margin-top:12px; }
.chart-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:12.5px; text-align:center; padding:20px;
}

/* ---------- Summary stat row ---------- */
.stat-row{ display:flex; gap:10px; margin-top:12px; }
.stat{
  flex:1; text-align:center; background:var(--panel-raised);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 4px;
}
.stat b{ display:block; font-family:var(--font-num); font-size:17px; }
.stat span{ font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }

/* ---------- Toggle switch ---------- */
.switch-row{ display:flex; align-items:center; justify-content:space-between; }
.switch{
  width:44px; height:24px; border-radius:99px; background:var(--panel-raised);
  border:1px solid var(--line); position:relative; cursor:pointer; flex:0 0 auto;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--text-muted); transition:transform .18s ease, background .18s ease;
}
.switch.on{ border-color:var(--good); }
.switch.on::after{ transform:translateX(20px); background:var(--good); }

.hint{ font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.7; }
.collapsible{ overflow:hidden; transition:max-height .25s ease; }

footer.foot{
  text-align:center; color:var(--text-muted); font-size:11px; padding:10px 0 4px;
  letter-spacing:.3px;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--panel-raised); border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:999px; font-size:12.5px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s ease, bottom .25s ease;
  z-index:50; max-width:90%; text-align:center;
}
.toast.show{ opacity:1; bottom:34px; }

@media (min-width:600px){
  .app{ padding-top:24px; }
}