/* ── Viscosity Experiment Virtual Lab ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;
  --accent:    #ffb300;
  --accent-lo: rgba(255,179,0,.22);
  --green:     #3ddc84;
  --red:       #ff5555;
  --gold:      #f5c842;
  --water:     #4fc3f7;
  --text:      #dde3f0;
  --text-dim:  #6b7a99;
  --font:      'Segoe UI', system-ui, sans-serif;
  --mono:      'Courier New', monospace;
  --radius:    12px;
}

body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; padding: 0 16px; }
#app { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

/* Header */
header { text-align: center; padding: 4px 0; }
header h1 {
  font-size: 1.8rem; font-weight: 700;
  background: linear-gradient(120deg, #ffb300 0%, #ffd54f 55%, #fff3c4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.subtitle { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; }

/* Controls bar */
.controls-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.ctrl-group { display: flex; align-items: center; gap: 8px; }
.ctrl-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); white-space: nowrap; }

.pill-tabs { display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.pill {
  padding: 5px 13px; border: none; background: transparent; color: var(--text-dim);
  border-radius: 6px; cursor: pointer; font-size: 0.81rem;
  transition: background .18s, color .18s, box-shadow .18s;
}
.pill.active { background: var(--accent); color: #fff; box-shadow: 0 0 12px var(--accent-lo); }
.pill:hover:not(.active) { background: var(--surface2); color: var(--text); }

.btn-guide {
  margin-left: auto; padding: 6px 16px; border: none; border-radius: 8px;
  cursor: pointer; font-size: 0.82rem; font-weight: 700;
  background: var(--gold); color: #1a1a2e; text-decoration: none;
  transition: filter .18s;
}
.btn-guide:hover { filter: brightness(1.08); }

/* Canvas card */
.canvas-card {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; position: relative; overflow-x: clip;
}
.canvas-card canvas { display: block; width: 100%; height: auto; cursor: default; touch-action: pan-y; }

/* Buttons */
.btn {
  padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 0.84rem; font-weight: 600; transition: filter .18s, box-shadow .18s, opacity .18s;
}
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 12px var(--accent-lo); }
.btn-ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--border); }

/* Sim controls */
.sim-controls {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 12px;
}
.sim-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sim-select-group { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.sim-slider-group { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.sim-slider-label { font-size: 0.76rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; min-width: 100px; }
.sim-select {
  flex: 1; padding: 8px 12px; border: 2px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: 0.84rem;
  cursor: pointer; transition: border-color .18s;
}
.sim-select:focus { outline: none; border-color: var(--accent); }
.sim-slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px;
  background: rgba(255,255,255,.12); border-radius: 3px; outline: none;
  border: 1px solid rgba(255,255,255,.1);
}
.sim-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent-lo), rgba(255,255,255,.12));
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 8px var(--accent-lo);
  border: 2px solid rgba(255,255,255,.2);
}
.sim-slider::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent-lo), rgba(255,255,255,.12));
  border: none;
}
.sim-slider::-moz-range-thumb {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.2);
  border-radius: 50%; background: var(--accent); cursor: pointer;
}

/* Readout row */
.readout-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;
}
.readout-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; text-align: center;
}
.readout-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 3px; }
.readout-val { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.readout-val-sm { font-size: 0.82rem; }
.readout-unit { font-size: 0.68rem; color: var(--text-dim); margin-left: 2px; }

/* Readout badges (shown over canvas info) */
.readout-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; margin-top: 6px;
  background: rgba(13,17,30,0.55);
  border: 1px solid var(--border); border-radius: 8px;
}
.readout-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 0.74rem; color: var(--text-dim);
}
.readout-badge strong { color: var(--text); font-family: var(--mono); font-weight: 700; margin-left: 2px; }
.rb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* Explore mode */
.item-selector {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; margin-top: 10px; }
.is-btn {
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--text-dim); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.is-btn:hover { border-color: rgba(255,179,0,.45); color: var(--text); }
.is-btn.active { border-color: var(--accent); color: #fff; background: rgba(255,179,0,.15); box-shadow: 0 0 14px var(--accent-lo); }
.is-btn-name { display: block; font-size: 0.82rem; font-weight: 700; }
.is-btn-sym  { display: block; font-size: 0.68rem; color: var(--accent); margin-top: 2px; font-family: var(--mono); }

.item-info {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.ii-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ii-name { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.ii-cat-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 3px 10px; border-radius: 20px;
  background: var(--accent-lo); color: var(--accent);
}
.ii-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.65; }

.formula-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.fb-formula { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--accent); }

.example-box {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
}
.example-box h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.example-box .ex-problem { font-size: 0.84rem; color: var(--text); margin-bottom: 8px; line-height: 1.6; }
.example-box .ex-step { font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; padding: 2px 0; }
.example-box .ex-step strong { color: var(--green); font-family: var(--mono); }

/* Practice */
.practice-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.pp-prompt { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 14px; line-height: 1.6; }
.pp-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-input {
  flex: 1; min-width: 120px; max-width: 220px;
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: var(--mono);
  font-size: 1rem; font-weight: 700; transition: border-color .18s;
}
.pp-input:focus { outline: none; border-color: var(--accent); }
.pp-unit { font-size: 0.88rem; color: var(--text-dim); font-weight: 600; }
.pp-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.feedback { font-size: 0.88rem; font-weight: 600; }
.feedback.ok  { color: var(--green); }
.feedback.err { color: var(--red); }

.solution-panel {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin-top: 12px;
}
.solution-panel h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.sol-step { font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; padding: 2px 0; }
.sol-step strong { color: var(--green); font-family: var(--mono); }

.practice-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.pbar-score { font-size: 0.84rem; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
.pbar-score span { color: var(--text); font-weight: 700; }

/* Quiz */
.question-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.qp-prompt { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 12px; line-height: 1.6; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answer-btn {
  padding: 14px 16px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--text); font-size: 0.88rem;
  font-weight: 600; cursor: pointer; text-align: center;
  transition: border-color .18s, background .18s, color .18s, transform .12s;
}
.answer-btn:hover:not(.locked) { border-color: var(--accent); background: rgba(255,179,0,.06); }
.answer-btn.correct { border-color: var(--green); background: rgba(61,220,132,.12); color: var(--green); }
.answer-btn.wrong { border-color: var(--red); background: rgba(255,85,85,.08); color: var(--red); }
.answer-btn.locked { cursor: default; opacity: 0.6; }
.answer-btn.correct.locked { opacity: 1; }

.quiz-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.qbar-counter { display: flex; align-items: baseline; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; }
.qbar-q-label { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.qbar-q-num { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1; }
.qbar-q-sep { font-size: 0.82rem; color: var(--text-dim); }
.qbar-q-total { font-family: var(--mono); font-size: 0.88rem; color: var(--text-dim); }

.quiz-result {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.qr-header { display: flex; align-items: flex-start; justify-content: space-between; }
.qr-title-wrap { display: flex; flex-direction: column; gap: 5px; }
.qr-title  { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.qr-stars  { font-size: 1.2rem; letter-spacing: 3px; }
.qr-score-wrap { text-align: right; }
.qr-score { font-family: var(--mono); font-size: 2.2rem; font-weight: 700; line-height: 1; text-shadow: 0 0 14px currentColor; }
.qr-score.perfect { color: var(--gold); }
.qr-score.good { color: var(--green); }
.qr-score.poor { color: var(--red); }
.qr-verdict { font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; }
.qr-rows { display: flex; flex-direction: column; gap: 7px; }
.qr-row {
  display: grid; grid-template-columns: 30px 1fr 26px; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 8px; padding: 9px 12px;
}
.qr-row.ok  { border-left-color: var(--green); }
.qr-row.err { border-left-color: var(--red); }
.qr-qnum { font-size: 0.72rem; font-weight: 700; color: var(--accent); }
.qr-detail { font-size: 0.78rem; color: var(--text-dim); }
.qr-detail strong { color: var(--text); }
.qr-mark { text-align: right; font-size: 1rem; font-weight: 700; }
.qr-row.ok .qr-mark { color: var(--green); }
.qr-row.err .qr-mark { color: var(--red); }

/* SEO Article */
.seo-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; line-height: 1.7; }
.seo-article h2 { font-size: 1.25rem; color: var(--text); margin-bottom: 12px; }
.seo-article h3 { font-size: 1.05rem; color: var(--accent); margin: 16px 0 6px; }
.seo-article p { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 10px; }
.seo-article a { color: var(--accent); text-decoration: none; }
.seo-article a:hover { text-decoration: underline; }

.seo-table {
  width: 100%; border-collapse: collapse; margin: 10px 0 16px;
  font-size: 0.82rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  table-layout: fixed;
}
.seo-table th, .seo-table td { word-wrap: break-word; overflow-wrap: break-word; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.seo-table th { background: var(--surface2); color: var(--accent); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; }
.seo-table tr:last-child td { border-bottom: none; }
.seo-table td { color: var(--text-dim); }
.seo-table td:first-child { color: var(--text); font-weight: 600; }

/* Canvas toggles */
.canvas-toggles {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: rgba(13,17,30,0.7); backdrop-filter: blur(3px);
  border: 1px solid rgba(139,157,195,0.2); border-radius: 8px;
  padding: 6px 8px; max-width: 60%;
}
.cv-tog { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--text-dim); cursor: pointer; user-select: none; padding: 2px 4px; border-radius: 4px; }
.cv-tog:hover { color: var(--text); }
.cv-tog input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* Stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); height: 36px; }
.step-btn { width: 34px; border: none; background: var(--surface2); color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.step-btn:hover { background: var(--border); }
.step-btn:active { background: var(--accent-lo); color: var(--accent); }
.step-input { width: 72px; border: none; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 0.88rem; font-weight: 700; text-align: center; outline: none; padding: 0 4px; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input[type=number] { -moz-appearance: textfield; }

.sim-unit-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; background: var(--accent-lo); color: var(--accent); font-size: 0.66rem; font-weight: 700; margin-left: 4px; }

/* Preset chips */
.preset-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.preset-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.preset-chip {
  padding: 5px 12px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.76rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.preset-chip:hover { border-color: var(--accent); color: var(--text); }
.preset-chip.active { background: var(--accent-lo); color: var(--accent); border-color: var(--accent); }

/* Custom material button */
.btn-custom {
  padding: 8px 14px; border-radius: 8px;
  background: var(--surface2); border: 1px dashed var(--border);
  color: var(--text-dim); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-custom:hover { border-color: var(--accent); color: var(--text); border-style: solid; }

/* Action bar */
.canvas-action-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin-top: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(13,17,30,0.55), rgba(13,17,30,0.85));
  border: 1px solid var(--border); border-radius: 10px;
  backdrop-filter: blur(3px);
}
.canvas-action-bar .btn { padding: 7px 14px; font-size: 0.78rem; min-height: 36px; }
.ab-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.canvas-action-bar .ab-sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }
.ab-sep-push { margin-left: auto !important; background: transparent !important; }

.btn-calc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; min-height: 36px;
  background: linear-gradient(180deg, #ffb300, #b37e00);
  color: #fff; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; font-size: 0.78rem; font-weight: 700;
  box-shadow: 0 4px 12px rgba(255,179,0,0.3);
  cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn-calc:hover  { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,179,0,0.45); }
.btn-calc:active { transform: translateY(0); }
.btn-calc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Modal (calc + custom) */
.calc-modal {
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.calc-modal.active { display: flex; }
.calc-modal-box {
  background: #141a2e; border: 1px solid rgba(139,157,195,0.25); border-radius: 12px;
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  max-height: calc(100vh - 48px); overflow: hidden;
}
.calc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(139,157,195,0.2);
  background: rgba(30,38,66,0.6); flex-shrink: 0;
}
.calc-modal-title { font-size: 1rem; font-weight: 800; color: #e1e7f3; }
.calc-modal-close {
  width: 34px; height: 34px;
  border: 1px solid rgba(139,157,195,0.3); border-radius: 8px;
  background: #0d1117; color: #8b9dc3;
  font-size: 1.4rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.calc-modal-close:hover { border-color: var(--accent); color: #e1e7f3; background: #1a2340; }
.calc-modal-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.cs-inputs {
  background: rgba(255,179,0,0.08);
  border: 1px solid rgba(255,179,0,0.25); border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cs-badge {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  background: rgba(255,179,0,0.22); color: var(--accent);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; align-self: flex-start;
}
.cs-given { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cs-given span { font-family: var(--mono); font-size: 0.82rem; color: #e1e7f3; }
.cs-si-note { font-size: 0.72rem; color: #8b9dc3; margin: 0; }

.cs-step {
  background: #0d1117;
  border: 1px solid rgba(139,157,195,0.18); border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-step-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-num {
  font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-lo);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.cs-title { font-size: 0.9rem; font-weight: 700; color: #e1e7f3; }
.cs-formula {
  font-family: var(--mono);
  font-size: 0.82rem; color: #b6c3e0;
  background: rgba(30,38,66,0.6); border-radius: 6px;
  padding: 6px 10px; border-left: 3px solid var(--accent);
}
.cs-calc   { font-family: var(--mono); font-size: 0.8rem; color: #e1e7f3; white-space: pre-wrap; line-height: 1.7; }
.cs-result { font-size: 0.88rem; color: #b6c3e0; margin-top: 2px; }
.cs-result strong { font-family: var(--mono); font-size: 0.95rem; color: var(--green); }

/* Custom material modal fields */
.cm-toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cm-toggle-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.cm-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 0.78rem; color: var(--text-dim); }
.cm-field input { padding: 8px 12px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 0.9rem; }
.cm-field input:focus { outline: none; border-color: var(--accent); }
.cm-field em { color: var(--accent); font-style: normal; font-family: var(--mono); }
.cm-hint { font-size: 0.74rem; color: var(--text-dim); margin-top: -4px; }
.cm-err  { font-size: 0.78rem; color: var(--red); font-weight: 600; }

/* Context menu */
.ctx-menu {
  position: fixed; z-index: 1300;
  background: #141a2e; border: 1px solid rgba(139,157,195,0.25); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  padding: 4px; min-width: 180px;
}
.ctx-item {
  display: block; width: 100%; padding: 7px 12px;
  border: none; background: transparent; color: var(--text);
  font-size: 0.82rem; text-align: left; cursor: pointer; border-radius: 5px;
  transition: background .1s, color .1s;
}
.ctx-item:hover { background: var(--accent-lo); color: var(--accent); }
.ctx-sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 9px; }

/* Learning Panels */
.learn-panels {
  padding: 14px;
  background: linear-gradient(180deg, rgba(30,38,66,0.6), rgba(20,26,46,0.6));
  border: 1px solid rgba(139,157,195,0.2);
  border-radius: 12px;
}
.learn-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139,157,195,0.18);
  margin-bottom: 12px;
}
.learn-head-title { font-size: 0.95rem; font-weight: 700; color: #e1e7f3; letter-spacing: .01em; }
.learn-head-actions { display: flex; gap: 8px; }
.learn-toggle-all {
  padding: 5px 12px;
  background: var(--accent-lo); border: 1px solid rgba(255,179,0,0.35);
  color: var(--accent); border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.learn-toggle-all:hover { background: rgba(255,179,0,.32); color: #e1e7f3; }
.learn-toggle-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.learn-card {
  border: 1px solid rgba(139,157,195,0.18); border-radius: 10px;
  background: rgba(13,17,30,0.55);
  margin-bottom: 10px; overflow: hidden;
  transition: border-color .2s;
}
.learn-card:last-child { margin-bottom: 0; }
.learn-card[open] { border-color: rgba(255,179,0,0.45); }
.learn-card > summary {
  list-style: none; cursor: pointer;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.88rem; font-weight: 700; color: #e1e7f3;
  user-select: none; transition: background .15s; position: relative;
}
.learn-card > summary::-webkit-details-marker { display: none; }
.learn-card > summary::marker { display: none; content: ''; }
.learn-card > summary:hover { background: rgba(255,179,0,0.08); }
.learn-card > summary::after {
  content: '\25BE'; margin-left: auto;
  color: #8b9dc3; font-size: 0.78rem;
  transition: transform .2s;
}
.learn-card[open] > summary::after { transform: rotate(180deg); color: var(--accent); }

.lp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent-lo); font-size: 0.9rem; flex-shrink: 0; color: var(--accent);
}
.lp-sub { color: #8b9dc3; font-weight: 500; font-size: 0.78rem; }
.learn-body { padding: 12px 14px 14px; font-size: 0.84rem; color: var(--text-dim); line-height: 1.7; }
.learn-body .eq-line {
  font-family: var(--mono); font-size: 0.86rem; color: #e1e7f3;
  background: rgba(30,38,66,0.6); border-left: 3px solid var(--accent);
  padding: 6px 10px; border-radius: 6px; margin: 6px 0;
  white-space: pre-wrap;
}
.learn-body .eq-line b { color: var(--green); }
.learn-body .cmp-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 0.78rem; }
.learn-body .cmp-table th, .learn-body .cmp-table td { padding: 5px 8px; border-bottom: 1px solid rgba(139,157,195,0.12); text-align: right; }
.learn-body .cmp-table th { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 0.7rem; }
.learn-body .cmp-table td:first-child, .learn-body .cmp-table th:first-child { text-align: left; color: var(--text); }
.learn-body .cmp-table .cmp-float { color: var(--green); font-weight: 700; }
.learn-body .cmp-table .cmp-sink  { color: var(--red); font-weight: 700; }
.learn-body ul.coach-list { list-style: none; padding: 0; margin: 0; }
.learn-body ul.coach-list li { position: relative; padding: 5px 0 5px 22px; font-size: 0.84rem; color: var(--text-dim); line-height: 1.55; }
.learn-body ul.coach-list li::before { content: '\2022'; position: absolute; left: 6px; top: 5px; color: var(--accent); font-size: 1rem; }

/* User Guide */
.user-guide {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px;
}
.user-guide-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 800; color: var(--text);
  margin-bottom: 14px;
}
.guide-icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-lo); font-size: 1rem;
}
.user-guide details {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); margin-bottom: 8px; overflow: hidden;
}
.user-guide details[open] { border-color: rgba(255,179,0,0.4); }
.user-guide summary {
  padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: 0.9rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  transition: background .15s;
}
.user-guide summary::-webkit-details-marker { display: none; }
.user-guide summary:hover { background: rgba(255,179,0,0.07); }
.guide-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.74rem; font-weight: 700; flex-shrink: 0;
}
.guide-content { padding: 4px 16px 16px; font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; }
.guide-content p { margin-bottom: 8px; }
.guide-content ul { margin-left: 20px; }
.guide-content li { margin-bottom: 6px; }
.guide-content a { color: var(--accent); text-decoration: none; }
.guide-content a:hover { text-decoration: underline; }

/* Footer */
.site-footer { text-align: center; padding: 20px 0 28px; color: var(--text-dim); font-size: 0.78rem; }
.site-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 8px; }
.site-footer-nav a { color: var(--text-dim); text-decoration: none; }
.site-footer-nav a:hover { color: var(--accent); }
.site-footer-copy { font-size: 0.74rem; }

/* Responsive */
@media (max-width: 768px) {
  /* Once the action bar wraps, right-pushing the exports leaves a ragged
     hole on the second row — let them flow left instead. */
  .ab-sep-push { margin-left: 0 !important; background: transparent !important; }
  .btn-calc { padding: 6px 10px; font-size: 0.74rem; }
  .canvas-toggles { max-width: 78%; }
  .canvas-action-bar .btn { padding: 6px 10px; font-size: 0.72rem; min-height: 32px; }
  .canvas-action-bar { padding: 6px 8px; gap: 4px; }
  .step-input { width: 56px; }
  .answer-grid { grid-template-columns: 1fr 1fr; }
  .is-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .controls-bar { gap: 10px; }
  .readout-row { grid-template-columns: repeat(2, 1fr); }
  .sim-slider-group { min-width: 160px; }
  .sim-select-group { min-width: 160px; }
}
@media (max-width: 500px) {
  /* One control per row — nothing can be squeezed below its content */
  .ctrl-grid { grid-template-columns: 1fr; gap: 9px; }
  .sim-controls { padding: 10px 12px; }
  /* Action bar: icons only, labels drop away */
  .canvas-action-bar .btn-ico .lbl { display: none; }
  .canvas-action-bar .btn-ico { padding: 6px 10px; }
  .ab-speed-lbl { display: none; }
  .pill-tabs-sm .pill { padding: 4px 7px; font-size: 0.7rem; }
  .sw-hint-inline { display: none; }
  .sw-time { min-width: 78px; font-size: 1.05rem; }
  .results-table { font-size: 0.72rem; }
  .results-table th, .results-table td { padding: 5px 6px; }

  header h1 { font-size: 1.4rem; }
  .subtitle  { font-size: 0.78rem; }
  .controls-bar { padding: 10px 12px; gap: 8px; }
  .pill { padding: 5px 10px; font-size: 0.76rem; }
  .answer-grid { grid-template-columns: 1fr; }
  .is-grid { grid-template-columns: 1fr 1fr; }
  .readout-row { grid-template-columns: 1fr 1fr; }
  .sim-slider-group { min-width: 100%; }
  .sim-select-group { min-width: 100%; }
  .btn-calc { padding: 6px 9px; font-size: 0.72rem; min-height: 32px; gap: 4px; }
  .btn-calc .btn-calc-label { display: none; }
  .btn-calc .btn-calc-icon  { width: 14px; height: 14px; }
  .ab-sep-push { display: none; }
  /* The old always-open bar was pulled out of the overlay here because it
     covered the canvas on phones. The panel is collapsible now and shows as
     a 44x44 chip, so it stays an overlay and that override is gone. */
  .cv-tog { font-size: 0.7rem; }
  .calc-modal { padding: 12px 8px; }
  .calc-modal-box { max-height: calc(100vh - 24px); }
  .calc-modal-body { padding: 12px; }
  .cs-step { padding: 10px; }
  .learn-panels { padding: 10px; }
  .learn-card > summary { padding: 10px 12px; font-size: 0.82rem; }
  .lp-sub { display: none; }
  .learn-body { padding: 10px 12px 12px; }
  .learn-head-title { font-size: 0.85rem; }
  .learn-toggle-all { padding: 4px 10px; font-size: 0.72rem; }
  .preset-chip { padding: 4px 10px; font-size: 0.72rem; }
  .canvas-action-bar { padding: 6px; gap: 4px; }
  .ab-sep { display: none; }
  .seo-table { font-size: 0.74rem; }
  .seo-table th, .seo-table td { padding: 6px 7px; }
}

/* ── Compact control grid ───────────────────────────────────────
   Every control lives in its own grid cell with min-width:0, so a
   narrow viewport re-flows the grid instead of squeezing a <select>
   down to a few clipped pixels (which is what the old flex rows did). */
.sim-controls { padding: 12px 14px; gap: 10px; }

/* 12-column track so every row divides evenly — an auto-fit grid left a
   ragged last row (4 fields + 1 orphan) whenever the count wasn't a multiple
   of the column count. Selects take 4 cols (3 per row), sliders 6 (2 per row). */
.ctrl-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px 12px;
}
.f-3 { grid-column: span 3; }
.f-4 { grid-column: span 4; }
.f-6 { grid-column: span 6; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field-ctrl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.field-ctrl .sim-select {
  flex: 1 1 auto; width: 100%; min-width: 0;
  padding: 7px 10px; font-size: 0.82rem;
}
.field-ctrl .sim-slider { flex: 1 1 auto; min-width: 0; }
.field-ctrl .stepper { flex: 0 0 auto; }

.lane-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  color: #0d1117; font-size: 0.64rem; font-weight: 800;
}

/* Compact stepper */
.stepper { height: 32px; }
.step-btn { width: 28px; font-size: 0.95rem; }
.step-input { width: 54px; font-size: 0.82rem; }

/* Control-grid responsive collapse: two even columns, then one */
@media (max-width: 860px) {
  .ctrl-grid { grid-template-columns: repeat(2, 1fr); }
  .ctrl-grid > .field { grid-column: span 1; }
  /* an odd field count leaves the last one alone in its row — let it fill */
  .ctrl-grid > .field:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 520px) {
  .ctrl-grid { grid-template-columns: 1fr; }
  /* the orphan-fill span:2 above must be cancelled here, or it conjures an
     implicit second column and squeezes every field to ~50px */
  .ctrl-grid > .field,
  .ctrl-grid > .field:last-child:nth-child(odd) { grid-column: span 1; }
}

/* ── Compact action bar ────────────────────────────────────── */
.canvas-action-bar { gap: 5px; padding: 6px 8px; margin-top: 6px; }
.canvas-action-bar .btn { padding: 6px 12px; font-size: 0.76rem; min-height: 32px; }
.canvas-action-bar .ab-sep { height: 18px; margin: 0 2px; }
.ab-speed-lbl { font-size: 0.64rem; }
.pill-tabs-sm .pill { padding: 4px 9px; font-size: 0.73rem; min-height: 26px; }
.ab-lapse {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  color: var(--gold); white-space: nowrap;
}
.ab-lapse:empty { display: none; }

/* Validity warning — occupies no space at all until it has something to say */
.warn-strip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px;
  background: rgba(255,85,85,0.09);
  border: 1px solid rgba(255,85,85,0.4);
  border-left-width: 3px;
  border-radius: 8px;
  font-size: 0.79rem; line-height: 1.5; color: #ffb3b3;
}
.warn-strip[hidden] { display: none; }
.warn-strip .warn-ico { flex: 0 0 auto; font-size: 0.9rem; line-height: 1.4; }

/* long display equations scroll inside their panel instead of stretching it */
.learn-body .katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }

/* ── Results table ─────────────────────────────────────────── */
.results-wrap { overflow-x: auto; max-width: 100%; }
.results-table {
  width: 100%; border-collapse: collapse; font-size: 0.76rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.results-table th, .results-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.results-table th { background: var(--surface2); color: var(--accent); font-weight: 700; font-size: 0.66rem; letter-spacing: .04em; }
.results-table th.th-sym { text-transform: none; }
.results-table tr:last-child td { border-bottom: none; }
.results-table td { color: var(--text-dim); font-family: var(--mono); }
.results-table td:first-child, .results-table th:first-child { text-align: left; color: var(--text); font-family: var(--font); font-weight: 600; }
.results-table .rt-rank { font-weight: 800; color: var(--gold); }
.results-table .rt-warn { color: var(--red); font-family: var(--font); font-size: 0.7rem; }
.results-table .rt-win td { background: rgba(255,179,0,0.07); }

/* ── Compact action bar ────────────────────────────────────── */
.canvas-action-bar { gap: 5px; padding: 7px 8px; }
.canvas-action-bar .btn { padding: 6px 12px; font-size: 0.76rem; min-height: 32px; }
.btn-ico { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pill-tabs-sm { padding: 2px; }
.pill-tabs-sm .pill { padding: 4px 9px; font-size: 0.74rem; }
.canvas-action-bar .btn-calc { padding: 6px 12px; min-height: 32px; font-size: 0.76rem; }
.ab-speed-lbl { font-size: 0.66rem; }

/* ── Compact readout badges ────────────────────────────────── */
.readout-badges { gap: 5px; padding: 6px 8px; }
.readout-badge { padding: 3px 9px; font-size: 0.72rem; }

/* ── Overflow guards: long equations & tables scroll inside their card ── */
.learn-body { overflow-x: auto; }
.learn-body p { max-width: 100%; }
.learn-body .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 2px 0; margin: 8px 0; }
.calc-modal-body .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.cs-formula { overflow-x: auto; }
.learn-body .cmp-table { display: block; overflow-x: auto; white-space: nowrap; }

/* INTERLINK-START  header quick-links */
.head-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.btn-link{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:8px;font-size:.82rem;font-weight:700;text-decoration:none;cursor:pointer;background:var(--surface2,#1f2535);color:var(--text,#dde3f0);border:1.5px solid var(--border,#2a3050);white-space:nowrap;transition:border-color .18s,background .18s,color .18s;}
.btn-link:hover{border-color:var(--accent,#4fc3f7);background:var(--accent-lo,rgba(79,195,247,.18));color:#fff;}
.btn-link img{width:20px;height:20px;border-radius:4px;flex:none;}
.btn-link .lbl{line-height:1;}
@media(max-width:560px){.btn-link .lbl{display:none;}.btn-link{padding:5px 9px;}}
/* INTERLINK-END */


/* ── Mobile overflow guard (Phase 1) ───────────────────────────────
   At phone width these pages scrolled sideways. Two flexbox defaults cause
   nearly all of it: a control row set to nowrap, and a flex item's
   min-width:auto, which refuses to shrink below its content (in a column
   container the item also sizes to content on the cross axis, hence the
   max-width). Nothing is hidden — rows wrap and children shrink. */
@media (max-width: 560px) {
  /* NOTE: .sim-controls is deliberately NOT in this list. It is a column
     flex container, and flex-wrap:wrap on a column container stretches its
     children to fill the wrapped column — which injected ~124px of dead
     space between the controls and the results table. */
  .ctrl-group, .pill-tabs, .preset-row, .ctrl-top-row, .sim-slider-group,
  .sim-row, .btn-row, .head-actions,
  .sim-left, .sim-right, .sim-row-combo .preset-row { flex-wrap: wrap; }

  .ctrl-group, .preset-row, .ctrl-top-row, .sim-slider-group, .sim-row,
  .btn-row, .sim-left, .sim-right, .pill-tabs, .preset-chips
    { min-width: 0; max-width: 100%; }

  .sim-select, select, .stepper, .sim-slider-val, .sim-stepper-unit,
  input[type="number"], input[type="text"] { max-width: 100%; min-width: 0; }
  .stepper { flex-shrink: 1; }
}

/* ═══ Collapsible canvas display-controls ═════════════════════════════
   Converted from an always-open toggle bar. That bar sat permanently across
   the top of the canvas and, on a phone, covered most of the simulation. As a
   <details> it is a small chip until the student opens it. Appended last so it
   overrides the older flat-bar rules in this file; the input IDs are unchanged,
   so all existing JS wiring still applies. */
.canvas-toggles {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  display: block; width: auto; padding: 0; gap: 0;
  background: rgba(13,17,30,0.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(139,157,195,0.22); border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.32);
}
.canvas-toggles > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text); border-radius: 9px;
  transition: background 0.12s, color 0.12s;
}
.canvas-toggles > summary::-webkit-details-marker { display: none; }
.canvas-toggles > summary::marker { content: ''; }
.canvas-toggles > summary:hover { background: rgba(255,255,255,0.06); color: var(--accent); }
.canvas-toggles .cvt-ico { flex-shrink: 0; color: var(--accent); }
.canvas-toggles .cvt-caret { margin-left: auto; padding-left: 4px; color: var(--text-dim); font-size: 0.7rem; transition: transform 0.2s; }
.canvas-toggles[open] > summary .cvt-caret { transform: rotate(180deg); color: var(--accent); }
.canvas-toggles[open] > summary { border-bottom: 1px solid rgba(139,157,195,0.18); border-radius: 9px 9px 0 0; }
.canvas-toggles .cvt-body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 5px; padding: 8px 11px 9px;
}
.canvas-toggles .cvt-body .cv-tog {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.canvas-toggles .cvt-body .cv-tog:hover { color: var(--text); }
.canvas-toggles .cvt-body .cv-tog input[type="checkbox"] {
  accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0;
}
/* ═══ Mobile: collapse the canvas display-controls to an icon-only chip ═══
   On a short phone canvas the full "DISPLAY CONTROLS" bar sits across the top
   of the simulation and hides it. Below 768px the summary shrinks to a square
   icon button so the canvas stays readable; the label and caret come back the
   moment the panel is opened, because at that point the user has deliberately
   chosen to cover the canvas. The 44px minimum keeps the tap target within the
   project's touch-size rule. */
@media (max-width: 768px) {
  .canvas-toggles > summary {
    padding: 0; gap: 0;
    min-width: 44px; min-height: 44px;
    justify-content: center;
  }
  .canvas-toggles > summary .cvt-title,
  .canvas-toggles > summary .cvt-caret { display: none; }
  .canvas-toggles .cvt-ico { width: 18px; height: 18px; }

  .canvas-toggles[open] > summary {
    padding: 7px 10px; gap: 7px;
    min-height: 0; justify-content: flex-start;
  }
  .canvas-toggles[open] > summary .cvt-title { display: inline; }
  .canvas-toggles[open] > summary .cvt-caret { display: inline; margin-left: auto; padding-left: 4px; }
}