/* WEB_VERSION: v1 | RMS exact + TPS mode classifier + mode examples */
/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base:       #0d0f1a;
  --bg-surface:    #141728;
  --bg-card:       #1a1e33;
  --bg-hover:      #20253e;
  --border:        #2a3050;
  --border-accent: #3d4680;
  --text-primary:  #e8eaf6;
  --text-secondary:#8892b0;
  --text-muted:    #4a5580;
  --accent-purple: #818cf8;
  --accent-cyan:   #38bdf8;
  --accent-green:  #4ade80;
  --accent-orange: #fb923c;
  --accent-red:    #f87171;
  --grad-primary:  linear-gradient(135deg,#6C63FF 0%,#3ECFCF 100%);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
}

html, body { height:100%; font-family:'Inter',system-ui,sans-serif; background:var(--bg-base); color:var(--text-primary); font-size:14px; line-height:1.5; overflow:hidden; }

/* ===== App Layout ===== */
.app { height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* ===== Header ===== */
.header {
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  padding:10px 20px; display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; position:relative; z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--grad-primary); opacity:.4; }
.header-logo { display:flex; align-items:center; gap:12px; }
.header-title { font-size:16px; font-weight:700; background:var(--grad-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-.3px; }
.header-sub { font-size:10px; color:var(--text-muted); letter-spacing:.5px; }

/* legend in header */
.legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; }
.legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* ===== Main Layout ===== */
.main-layout { display:flex; flex:1; overflow:hidden; }

/* ===== Control Panel ===== */
.control-panel {
  width:290px; min-width:290px;
  background:var(--bg-surface); border-right:1px solid var(--border);
  overflow-y:auto; padding:14px 12px;
  display:flex; flex-direction:column; gap:0;
}
.control-panel::-webkit-scrollbar { width:3px; }
.control-panel::-webkit-scrollbar-track { background:transparent; }
.control-panel::-webkit-scrollbar-thumb { background:var(--border-accent); border-radius:3px; }

/* ===== Panel Section ===== */
.panel-section {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px; margin-bottom:8px; transition:border-color .2s;
}
.panel-section:hover { border-color:var(--border-accent); }

.section-title {
  font-size:11px; font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px;
  display:flex; align-items:center; gap:6px;
}

/* ===== Parameter Groups ===== */
.param-group { margin-bottom:12px; }
.param-group:last-child { margin-bottom:0; }

.param-header { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.param-name { font-size:14px; font-weight:700; font-family:'JetBrains Mono',monospace; line-height:1; }
.param-hint { font-size:10px; color:var(--text-muted); }

/* Slider + Number input row */
.param-ctrl { display:flex; align-items:center; gap:7px; }
.param-ctrl .slider { flex:1; }

/* ===== Slider ===== */
.slider {
  -webkit-appearance:none; appearance:none;
  height:5px; border-radius:3px; outline:none; cursor:pointer;
  background:var(--border);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%; background:white;
  cursor:pointer; box-shadow:0 0 0 3px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.4);
  transition:box-shadow .15s, transform .15s;
}
.slider::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 0 0 5px rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.5); }

/* ===== Number Input ===== */
.num-input {
  width:66px; flex-shrink:0;
  background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-primary); font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:500;
  padding:5px 5px; text-align:center; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.num-input:focus { border-color:var(--accent-purple); box-shadow:0 0 0 2px rgba(129,140,248,.15); }
.num-input::-webkit-inner-spin-button, .num-input::-webkit-outer-spin-button { opacity:.35; }

/* ===== Linked Group (D3 ↔ Dφ) ===== */
.linked-group {
  border-left:2px solid rgba(74,222,128,.25);
  padding-left:10px; margin-left:2px; padding-top:4px;
}
.link-connector { display:flex; align-items:center; gap:6px; margin:8px 0 6px; }
.link-line { flex:1; height:1px; background:rgba(74,222,128,.25); }
.link-badge {
  font-size:9px; font-family:'JetBrains Mono',monospace;
  color:rgba(74,222,128,.65); white-space:nowrap;
  padding:2px 7px; background:rgba(74,222,128,.07);
  border-radius:4px; border:1px solid rgba(74,222,128,.18);
}

/* ===== Spec Grid ===== */
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.spec-item { display:flex; flex-direction:column; gap:4px; }
.spec-label { font-size:10.5px; color:var(--text-muted); font-weight:500; }
.spec-input {
  background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-primary); font-family:'JetBrains Mono',monospace; font-size:13px;
  padding:6px 8px; width:100%; outline:none; transition:border-color .2s, box-shadow .2s;
}
.spec-input:focus { border-color:var(--accent-purple); box-shadow:0 0 0 2px rgba(129,140,248,.15); }
.spec-input::-webkit-inner-spin-button, .spec-input::-webkit-outer-spin-button { opacity:.4; }

/* ===== Toggles ===== */
.toggle-group { display:flex; flex-direction:column; gap:9px; }
.toggle-item { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12px; color:var(--text-secondary); user-select:none; transition:color .2s; }
.toggle-item:hover { color:var(--text-primary); }
.toggle-item input { display:none; }
.toggle-switch {
  width:30px; height:16px; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:8px; position:relative; flex-shrink:0; transition:background .2s, border-color .2s;
}
.toggle-switch::after {
  content:''; position:absolute; top:2px; left:2px;
  width:10px; height:10px; background:var(--text-muted); border-radius:50%;
  transition:transform .2s, background .2s;
}
.toggle-item input:checked + .toggle-switch { background:rgba(129,140,248,.2); border-color:var(--accent-purple); }
.toggle-item input:checked + .toggle-switch::after { transform:translateX(14px); background:var(--accent-purple); }

/* cyan variant */
.toggle-item input:checked + .toggle-sw-cyan { background:rgba(56,189,248,.2); border-color:var(--accent-cyan); }
.toggle-item input:checked + .toggle-sw-cyan::after { background:var(--accent-cyan); }

.toggle-accent { color:var(--accent-cyan) !important; font-weight:500; }
.toggle-divider { height:1px; background:var(--border); margin:2px 0; }

/* Cycle row inside display settings */
.cycle-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); }
.cycle-label { font-size:11px; color:var(--text-muted); }
.cycle-btns { display:flex; gap:3px; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px; }
.cycle-btn { background:none; border:none; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; padding:3px 10px; border-radius:4px; cursor:pointer; transition:background .15s, color .15s; }
.cycle-btn:hover { background:var(--bg-card); color:var(--text-secondary); }
.cycle-btn.active { background:var(--accent-purple); color:white; box-shadow:0 2px 8px rgba(129,140,248,.35); }


/* ===== Mode Panel ===== */
.mode-current-card {
  display:flex; flex-direction:column; gap:5px;
  padding:10px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-hover);
}
.mode-current-label { font-size:10.5px; color:var(--text-muted); }
.mode-current-main { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:800; line-height:1; }
.mode-current-domain { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-secondary); line-height:1.35; }
.mode-select { margin-top:4px; cursor:pointer; }
.mode-hint { margin-top:8px; font-size:10.5px; color:var(--text-muted); line-height:1.45; }
.mode-badge { font-family:'JetBrains Mono',monospace; font-weight:800; }
.mode-n { color:var(--accent-cyan) !important; }
.mode-p { color:var(--accent-green) !important; }
.mode-w { color:var(--accent-orange) !important; }
.mode-boundary { color:var(--accent-purple) !important; }
.mode-out { color:var(--accent-red) !important; }
.result-small {
  font-size:10.5px !important; font-weight:500 !important; text-align:right;
  max-width:145px; white-space:normal; line-height:1.25;
}
.result-mode { border-color:rgba(129,140,248,.28) !important; background:rgba(129,140,248,.06) !important; }
.result-mode-detail { align-items:flex-start; }

/* ===== Results ===== */
.result-grid { display:flex; flex-direction:column; gap:7px; }
.result-item { display:flex; justify-content:space-between; align-items:center; padding:7px 9px; background:var(--bg-hover); border-radius:var(--radius-sm); border:1px solid var(--border); }
.result-label { font-size:11px; color:var(--text-secondary); }
.result-value { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; color:var(--accent-cyan); }
.result-dx { border-color:rgba(251,146,60,.3) !important; background:rgba(251,146,60,.06) !important; }

/* VS Balance */
.vs-balance-row { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.vs-status { font-size:11px; font-family:'JetBrains Mono',monospace; padding:5px 10px; border-radius:var(--radius-sm); display:block; text-align:center; }
.vs-ok  { color:#4ade80; background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.2); }
.vs-err { color:#f87171; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); }

/* ===== Chart Area ===== */
.chart-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg-base); padding:12px; gap:10px; }

.canvas-wrapper {
  flex:1; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.03);
}
.canvas-wrapper::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(129,140,248,.04) 0%,transparent 60%);
  pointer-events:none; z-index:0;
}
#waveform-canvas { width:100%; height:100%; display:block; position:relative; z-index:1; }

/* Phase Annotation bar */
.phase-annotation {
  display:flex; gap:16px; flex-shrink:0;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:8px 14px; font-size:11.5px; color:var(--text-secondary);
  font-family:'JetBrains Mono',monospace; flex-wrap:wrap; align-items:center;
}

/* ===== Animations ===== */
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
.panel-section { animation:fadeIn .3s ease backwards; }
.panel-section:nth-child(1){animation-delay:.05s}.panel-section:nth-child(2){animation-delay:.1s}
.panel-section:nth-child(3){animation-delay:.15s}.panel-section:nth-child(4){animation-delay:.2s}

/* ===== Responsive ===== */
@media(max-width:900px){
  html,body{overflow:auto}.app{height:auto;min-height:100vh}
  .main-layout{flex-direction:column}
  .control-panel{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--border)}
  .chart-area{min-height:60vh}.legend{display:none}
}