:root {
  --color-bg: #0B0F15;
  --color-surface: #111827;
  --color-surface2: #1A2332;
  --color-border: #1E293B;
  --color-border2: #334155;
  --color-text: #E2E8F0;
  --color-text2: #94A3B8;
  --color-text3: #64748B;
  --color-primary: #6C8AFF;
  --color-primary-dim: #6C8AFF22;
  --color-accent: #22D3EE;
  --color-accent-dim: #22D3EE22;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-l1: #00E5A0;
  --color-l1-dim: #00E5A022;
  --color-l2: #F59E0B;
  --color-l2-dim: #F59E0B22;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font-ui: 'Outfit','Pretendard',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-ui); background:var(--color-bg); color:var(--color-text); overflow:hidden; height:100vh; }

/* ===== INTRO SHELL ===== */
.intro-overlay {
  position:fixed; inset:0; z-index:1000;
  background:var(--color-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition: opacity 0.5s, transform 0.5s;
}
.intro-overlay.fade-out { opacity:0; transform:scale(1.02); pointer-events:none; }
.intro-overlay.hidden { display:none !important; visibility:hidden; pointer-events:none; }

.intro-logo {
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.intro-logo img { height:60px; object-fit:contain; }
.intro-title { font-size:28px; font-weight:800; color:var(--color-text); margin-bottom:4px; letter-spacing:-0.5px; }
.intro-subtitle { font-size:14px; color:var(--color-text2); margin-bottom:24px; }
.lang-cards { display:flex; gap:12px; }
.lang-card {
  padding:16px 28px; border-radius:var(--radius); cursor:pointer;
  background:var(--color-surface); border:2px solid var(--color-border);
  text-align:center; transition:all .25s;
}
.lang-card:hover { border-color:var(--color-primary); transform:translateY(-3px); box-shadow:0 8px 24px rgba(108,138,255,0.2); }
.lang-flag { font-size:28px; margin-bottom:6px; }
.lang-name { font-size:14px; font-weight:700; color:var(--color-text); }
.level-logo { margin-bottom:16px; }
.intro-materials-btn {
  display:flex; align-items:center; gap:8px;
  margin-top:28px; padding:10px 22px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
  border-radius:10px; color:var(--color-text2); text-decoration:none;
  font-size:14px; font-weight:600; transition:all .2s; cursor:pointer;
  backdrop-filter:blur(8px);
}
.intro-materials-btn:hover {
  background:rgba(108,138,255,0.15); border-color:var(--color-primary);
  color:var(--color-text); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(108,138,255,0.2);
}
.intro-materials-icon { font-size:18px; }
.intro-copyright { position:absolute; bottom:20px; font-size:11px; color:var(--color-text3); }

/* ===== LEVEL SELECT ===== */
.level-select {
  position:fixed; inset:0; z-index:900;
  background:var(--color-bg);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;
}
.level-select.show { display:flex; }
.level-select.fade-out { opacity:0; transform:scale(1.02); pointer-events:none; transition:opacity .4s,transform .4s; }
.level-select.hidden { display:none !important; visibility:hidden; }

.level-header { text-align:center; margin-bottom:8px; }
.level-header h2 { font-size:22px; font-weight:800; color:var(--color-text); }
.level-header p { font-size:15px; color:var(--color-text2); margin-top:4px; }

.level-cards { display:flex; gap:16px; }
.level-card {
  width:260px; padding:28px 24px; border-radius:var(--radius-lg);
  background:var(--color-surface); border:2px solid var(--color-border);
  cursor:pointer; transition:all .25s; text-align:center;
}
.level-card:hover { transform:translateY(-4px); }
.level-card.l1:hover { border-color:var(--color-l1); box-shadow:0 8px 32px rgba(0,229,160,0.15); }
.level-card.l2:hover { border-color:var(--color-l2); box-shadow:0 8px 32px rgba(245,158,11,0.15); }

.level-icon { font-size:40px; margin-bottom:12px; }
.level-name { font-size:18px; font-weight:700; color:var(--color-text); margin-bottom:4px; }
.level-name-en { font-size:12px; color:var(--color-text3); margin-bottom:12px; }
.level-desc { font-size:13px; color:var(--color-text2); line-height:1.6; }
.level-badge {
  display:inline-block; margin-top:12px; padding:4px 12px; border-radius:20px;
  font-size:14px; font-weight:700;
}
.l1 .level-badge { background:var(--color-l1-dim); color:var(--color-l1); }
.l2 .level-badge { background:var(--color-l2-dim); color:var(--color-l2); }

/* ===== APP SHELL ===== */
.app { display:none; flex-direction:column; height:100vh; }
.app.show { display:flex; }

/* Header */
.cb-header {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; background:var(--color-surface);
  border-bottom:1px solid var(--color-border); height:52px;
}
.cb-logo { height:24px; display:flex; align-items:center; gap:2px; transition:opacity .2s; }
.cb-logo:hover { opacity:0.7; }
.cb-logo img { height:22px; object-fit:contain; }
.cb-service-name { font-size:14px; font-weight:700; color:var(--color-text); }
.cb-level-badge { font-size:15px; padding:2px 8px; border-radius:4px; font-weight:700; }
.cb-level-badge.l1 { background:var(--color-l1); color:var(--color-bg); }
.cb-level-badge.l2 { background:var(--color-l2); color:var(--color-bg); }
.cb-header-right { margin-left:auto; display:flex; gap:6px; align-items:center; }
.cb-header-btn { padding:4px 10px; border-radius:6px; border:none; cursor:pointer; font-size:12px; font-weight:600; }
.stop-btn { background:var(--color-danger); color:#fff; border:none; }
.back-btn { background:var(--color-surface2); color:var(--color-text2); border:1px solid var(--color-border); }
.ble-open-btn { padding:4px 12px; border-radius:6px; border:1px solid var(--color-border); cursor:pointer; font-size:12px; font-weight:600; background:var(--color-surface2); color:var(--color-text2); display:flex; align-items:center; gap:5px; transition:all .2s; }
.ble-open-btn .ble-status-dots { display:flex; gap:3px; }
.ble-open-btn .sd { width:6px; height:6px; border-radius:50%; background:var(--color-danger); opacity:0.5; }
.ble-open-btn .sd.on { background:var(--color-success); opacity:1; animation:pulse 2s infinite; }
.ble-open-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* ===== BLE CONNECTION PANEL (Python-editor style) ===== */
.ble-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:800; display:none; }
.ble-panel-overlay.show { display:block; }
.ble-panel {
  position:fixed; top:0; right:-380px; width:360px; height:100vh;
  background:var(--color-surface); border-left:1px solid var(--color-border);
  z-index:810; transition:right .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.ble-panel.show { right:0; }
.ble-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--color-border);
}
.ble-panel-header h3 { font-size:16px; font-weight:700; color:var(--color-text); display:flex; align-items:center; gap:8px; }
.ble-panel-close { background:none; border:none; color:var(--color-text3); font-size:20px; cursor:pointer; padding:4px 8px; }
.ble-panel-close:hover { color:var(--color-text); }
.ble-panel-body { padding:16px 20px; flex:1; }
.ble-panel-note { font-size:13px; color:var(--color-text3); margin-bottom:16px; }
.ble-device-card {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:var(--radius); margin-bottom:10px;
  background:var(--color-bg); border:1px solid var(--color-border); transition:all .2s;
}
.ble-device-card.connected { border-color:var(--color-success); background:rgba(34,197,94,0.05); }
.ble-device-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.ble-device-icon.m1 { background:linear-gradient(135deg,rgba(0,229,160,0.15),rgba(0,229,160,0.05)); }
.ble-device-icon.m2 { background:linear-gradient(135deg,rgba(239,68,68,0.15),rgba(239,68,68,0.05)); }
.ble-device-info { flex:1; }
.ble-device-name { font-size:14px; font-weight:700; color:var(--color-text); }
.ble-device-status { font-size:12px; color:var(--color-text3); margin-top:2px; }
.ble-device-card.connected .ble-device-status { color:var(--color-success); }
.ble-connect-btn {
  padding:6px 16px; border-radius:6px; border:none; cursor:pointer;
  font-size:14px; font-weight:700; transition:all .2s;
  background:var(--color-primary); color:#fff; min-width:52px; text-align:center;
}
.ble-connect-btn:hover { opacity:0.85; }
.ble-device-card.connected .ble-connect-btn { background:var(--color-surface2); color:var(--color-text2); border:1px solid var(--color-border); }
.ble-panel-footer { padding:12px 20px; border-top:1px solid var(--color-border); }
.ble-panel-footer button { width:100%; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface2); color:var(--color-text2); font-size:13px; font-weight:600; cursor:pointer; }
.ble-panel-footer button:hover { border-color:var(--color-danger); color:var(--color-danger); }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Phase bar */
.phase-bar { display:flex; justify-content:center; gap:6px; padding:6px 8px; background:var(--color-bg); border-bottom:1px solid var(--color-border); }
.phase-step { padding:7px 16px; border-radius:20px; font-size:13px; font-weight:600; background:var(--color-surface2); color:var(--color-text3); cursor:pointer; transition:all .2s; }
.phase-step.active.l1 { background:var(--color-l1); color:var(--color-bg); }
.phase-step.active.l2 { background:var(--color-l2); color:var(--color-bg); }
.phase-step.completed { background:rgba(34,197,94,0.2); color:var(--color-success); }

/* Main layout */
.cb-main { display:grid; grid-template-columns:1fr 320px; flex:1; overflow:hidden; }

/* Canvas */
.canvas-area { position:relative; background:#0F1923; overflow:hidden; }
#mainCanvas { display:block; width:100%; height:100%; }
.canvas-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.canvas-overlay.hidden { display:none; }
.canvas-overlay-icon { font-size:36px; margin-bottom:8px; }
.canvas-overlay-text { font-size:18px; font-weight:700; color:var(--color-text); }
.canvas-overlay-sub { font-size:12px; color:var(--color-text3); margin-top:4px; }
#robotMarker { position:absolute; width:18px; height:18px; border-radius:50%; background:var(--color-warning); border:2px solid #fff; transform:translate(-50%,-50%); display:none; z-index:10; box-shadow:0 0 10px rgba(251,191,36,0.5); }

/* Sidebar */
.sidebar { background:var(--color-surface); border-left:1px solid var(--color-border); overflow-y:auto; padding:14px; }
.sidebar .calib-test [style*="color:var(--color-text3)"] { color:var(--color-text2) !important; }
.section { margin-bottom:14px; }
.section-title { font-size:14px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.section-title.l1 { color:var(--color-l1); }
.section-title.l2 { color:var(--color-l2); }

/* Stats */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.stat-box { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:7px; text-align:center; }
.stat-value { font-size:20px; font-weight:700; color:var(--color-text); font-family:var(--font-mono); }
.stat-unit { font-size:10px; color:var(--color-text3); }
.stat-label { font-size:10px; color:var(--color-text3); margin-top:1px; }

/* Calibration */
.calib-guide-banner {
  border-radius:var(--radius-sm); padding:10px 12px;
  margin-bottom:10px; font-size:12px;
}
.calib-guide-banner.ble-needed {
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
}
.calib-guide-banner.ble-ok {
  background:rgba(0,229,160,0.08); border:1px solid rgba(0,229,160,0.25);
}
.calib-guide-steps {
  display:flex; align-items:center; gap:4px; margin-bottom:6px; flex-wrap:wrap;
}
.cg-step {
  padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600;
  background:var(--color-surface2); color:var(--color-text3);
}
.cg-step.active {
  background:var(--color-primary); color:#fff;
}
.cg-step.done {
  background:rgba(34,197,94,0.2); color:var(--color-success);
}
.cg-arrow { color:var(--color-text3); font-size:11px; }
.calib-guide-msg {
  color:var(--color-text2); font-size:12px; line-height:1.5;
}
.calib-test { background:var(--color-surface2); border:1px solid var(--color-border2); border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; }
.calib-test.done { border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.04); }
.calib-label { font-size:13px; font-weight:700; color:var(--color-text); margin-bottom:6px; }
.calib-row { display:flex; gap:5px; align-items:center; margin-top:5px; }
.calib-btn { background:var(--color-surface2); color:var(--color-text); padding:6px 14px; border-radius:6px; border:1px solid var(--color-border); cursor:pointer; font-weight:700; font-size:16px; transition:background .15s; }
.calib-btn:disabled { opacity:0.3; cursor:not-allowed; }
.calib-input { background:var(--color-surface); border:1px solid var(--color-border2); border-radius:6px; padding:6px 8px; color:var(--color-text); font-size:14px; width:65px; text-align:center; font-family:var(--font-mono); }
.calib-input:focus { border-color:var(--color-primary); outline:none; }
.calib-unit { font-size:15px; color:var(--color-text2); }
.calib-save { background:var(--color-success); color:#fff; padding:4px 9px; border-radius:6px; border:none; cursor:pointer; font-weight:600; font-size:15px; }
.calib-result { font-size:14px; font-weight:600; color:var(--color-primary); margin-top:4px; font-family:var(--font-mono); }
.calib-timer { font-family:var(--font-mono); font-size:16px; color:var(--color-warning); min-width:28px; }
.calib-done-btn { width:100%; padding:12px; border-radius:var(--radius-sm); border:none; cursor:pointer; font-weight:700; font-size:16px; margin-top:8px; }
.calib-done-btn.l1 { background:var(--color-l1); color:var(--color-bg); }
.calib-done-btn.l2 { background:var(--color-l2); color:var(--color-bg); }
.calib-done-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* Simplification slider (L1) */
.simplify-section { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px; margin-bottom:6px; }
.simplify-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.simplify-label .val { color:var(--color-warning); font-weight:700; }
input[type=range] { width:100%; accent-color:var(--color-primary); height:5px; }

/* Joystick (L2) */
.joystick-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; margin:10px 0; }
.joy-row { display:flex; gap:3px; justify-content:center; }
.joy-btn { width:64px; height:64px; border-radius:10px; border:2px solid var(--color-border2); background:var(--color-surface2); color:var(--color-text); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; user-select:none; -webkit-user-select:none; touch-action:none; }
.joy-btn:active,.joy-btn.active { transform:scale(0.9); }
.joy-btn.fwd.active { background:var(--color-l1-dim); border-color:var(--color-l1); color:var(--color-l1); }
.joy-btn.back.active { background:rgba(239,68,68,0.2); border-color:var(--color-danger); color:var(--color-danger); }
.joy-btn.left.active { background:rgba(56,189,248,0.2); border-color:#38BDF8; color:#38BDF8; }
.joy-btn.right.active { background:rgba(167,139,250,0.2); border-color:#A78BFA; color:#A78BFA; }
.joy-btn.stop-center { border-radius:50%; width:64px; height:64px; font-size:14px; }
.joy-btn.stop-center.active { background:var(--color-l2-dim); border-color:var(--color-l2); color:var(--color-l2); }
.joy-spacer { width:56px; height:56px; }

/* Recording bar (L2) */
.rec-bar { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; border-radius:var(--radius-sm); margin:6px 0; font-size:14px; font-weight:700; }
.rec-bar.idle { background:var(--color-surface2); color:var(--color-text3); }
.rec-bar.recording { background:rgba(239,68,68,0.1); color:var(--color-danger); border:1px solid rgba(239,68,68,0.3); animation:recPulse 1s infinite; }
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Motor viz */
.motor-row { display:flex; gap:6px; margin:6px 0; }
.motor-box { flex:1; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:5px; text-align:center; }
.motor-label { font-size:10px; color:var(--color-text3); }
.motor-val { font-family:var(--font-mono); font-size:16px; font-weight:700; }
.motor-val.l { color:var(--color-l1); }
.motor-val.r { color:var(--color-danger); }

/* Command list */
.cmd-list { max-height:200px; overflow-y:auto; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:6px; font-size:15px; font-family:var(--font-mono); }
.cmd-item { padding:2px 0; border-bottom:1px solid rgba(30,41,59,0.3); display:flex; gap:5px; }
.cmd-item.active { background:rgba(251,191,36,0.1); border-radius:3px; padding:2px 3px; }
.cmd-fwd { color:var(--color-l1); } .cmd-back,.cmd-stop { color:var(--color-danger); } .cmd-turn { color:var(--color-warning); }

/* Demo list (L2) */
.demo-item { display:flex; align-items:center; gap:6px; padding:5px 7px; border-radius:6px; margin-bottom:3px; font-size:12px; background:var(--color-bg); border:1px solid var(--color-border); }
.demo-num { font-weight:700; color:var(--color-l2); min-width:20px; }
.demo-info { flex:1; color:var(--color-text2); }
.demo-del { color:var(--color-danger); cursor:pointer; opacity:0.4; font-size:12px; }
.demo-del:hover { opacity:1; }

/* Action buttons */
.action-btn { width:100%; padding:14px; border-radius:var(--radius-sm); border:none; cursor:pointer; font-weight:700; font-size:16px; transition:all .2s; margin-top:6px; }
.action-btn.l1 { background:var(--color-l1); color:var(--color-bg); }
.action-btn.l2 { background:var(--color-l2); color:var(--color-bg); }
.action-btn:disabled { opacity:0.3; cursor:not-allowed; }
.action-btn:hover:not(:disabled) { transform:translateY(-1px); }

.speed-row { display:flex; align-items:center; gap:5px; font-size:15px; color:var(--color-text2); margin-bottom:6px; }
.speed-row input { flex:1; }
.speed-val { color:var(--color-warning); font-weight:700; min-width:28px; }

.bottom-bar { display:flex; gap:6px; margin-top:6px; }
.bottom-btn { flex:1; padding:7px; border-radius:6px; border:none; cursor:pointer; font-weight:600; font-size:12px; background:var(--color-surface2); color:var(--color-text2); }

/* Industry badge */
.industry-badge { background:var(--color-surface2); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:8px; font-size:15px; color:var(--color-text2); margin-bottom:10px; line-height:1.5; }
.industry-badge b { color:var(--color-primary); }

/* Log */
.data-log { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:6px; font-size:11px; font-family:var(--font-mono); color:var(--color-text2); max-height:100px; overflow-y:auto; line-height:1.5; }
.data-log .green{color:var(--color-l1)} .data-log .orange{color:var(--color-warning)} .data-log .blue{color:#38bdf8} .data-log .red{color:var(--color-danger)} .data-log .dim{color:var(--color-text3)}

/* Toast */
.toast { position:fixed; top:108px; left:50%; transform:translateX(-50%) translateY(-60px); opacity:0; padding:10px 24px; border-radius:var(--radius-sm); font-weight:600; font-size:14px; z-index:999; transition:transform .3s, opacity .3s; pointer-events:none; box-shadow:0 4px 16px rgba(0,0,0,0.3); }
.toast.l1 { background:var(--color-l1); color:var(--color-bg); }
.toast.l2 { background:var(--color-l2); color:var(--color-bg); }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* Footer */
.cb-footer { padding:6px; text-align:center; font-size:11px; color:var(--color-text3); border-top:1px solid var(--color-border); background:var(--color-surface); }


/* ===== FONT SCALING ===== */
body.scale-1 { zoom: 0.88; }
body.scale-2 { zoom: 1.0; }
body.scale-3 { zoom: 1.12; }

/* ===== LIGHT MODE ===== */
body.light {
  --color-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-surface2: #F0F2F5;
  --color-border: #E2E8F0;
  --color-border2: #CBD5E1;
  --color-text: #1E293B;
  --color-text2: #475569;
  --color-text3: #94A3B8;
}
body.light canvas { background:#fafbfc !important; }
body.light .ble-panel { background:#fff; }
body.light .ble-device-card { background:#f8fafc; }
body.light .calib-guide-banner {
  border-radius:var(--radius-sm); padding:10px 12px;
  margin-bottom:10px; font-size:12px;
}
.calib-guide-banner.ble-needed {
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
}
.calib-guide-banner.ble-ok {
  background:rgba(0,229,160,0.08); border:1px solid rgba(0,229,160,0.25);
}
.calib-guide-steps {
  display:flex; align-items:center; gap:4px; margin-bottom:6px; flex-wrap:wrap;
}
.cg-step {
  padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600;
  background:var(--color-surface2); color:var(--color-text3);
}
.cg-step.active {
  background:var(--color-primary); color:#fff;
}
.cg-step.done {
  background:rgba(34,197,94,0.2); color:var(--color-success);
}
.cg-arrow { color:var(--color-text3); font-size:11px; }
.calib-guide-msg {
  color:var(--color-text2); font-size:12px; line-height:1.5;
}
body.light .calib-test { background:#f8fafc; }
body.light .cb-header { background:#fff; border-color:var(--color-border); }
body.light .calib-input { background:#fff; color:var(--color-text); border-color:var(--color-border2); }
body.light .calib-label { color:var(--color-text); }
body.light .calib-result { color:var(--color-primary); }
body.light .calib-timer { color:#d97706; }
body.light .cmd-list { background:#f8fafc; border-color:var(--color-border); color:var(--color-text); }
body.light .data-log { background:#f8fafc; color:var(--color-text2); }
body.light .sidebar { background:#fff; }
body.light .phase-step { background:#e8edf2; color:var(--color-text2); }
body.light .phase-step.active { color:#fff; }
body.light .industry-badge { background:#f0f4f8; }
body.light .intro-overlay { background:#f5f7fa; }
body.light .level-select { background:#f5f7fa; }
body.light .level-card { background:#fff; border-color:var(--color-border); }
body.light .settings-btn { background:#e8edf2; color:var(--color-text2); border-color:var(--color-border); }
body.light .stop-btn { background:var(--color-danger); color:#fff; }
body.light .toast { color:#fff; }

/* ===== SETTINGS BAR ===== */
.settings-bar { display:flex; gap:4px; align-items:center; }
.settings-btn {
  width:32px; height:28px; border-radius:6px; border:1px solid var(--color-border);
  background:var(--color-surface2); color:var(--color-text2); cursor:pointer;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.settings-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.settings-btn.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

/* BLE group number */
.ble-group-row { display:flex; align-items:center; gap:8px; padding:10px 20px; border-bottom:1px solid var(--color-border); }
.ble-group-label { font-size:13px; color:var(--color-text2); font-weight:600; white-space:nowrap; }
.ble-group-input { width:70px; padding:5px 8px; border-radius:6px; border:1px solid var(--color-border2); background:var(--color-bg); color:var(--color-text); font-size:14px; font-family:var(--font-mono); text-align:center; }
.ble-group-input:focus { border-color:var(--color-primary); outline:none; }
.ble-group-hint { font-size:11px; color:var(--color-text3); }

@media(max-width:768px){
  .cb-main { grid-template-columns:1fr; }
  .sidebar { border-left:none; border-top:1px solid var(--color-border); max-height:50vh; }
  .canvas-area { min-height:35vh; }
  .level-cards { flex-direction:column; }
  .level-card { width:80vw; max-width:300px; }
  .joy-btn { width:48px; height:52px; font-size:20px; }
  .joy-spacer { width:48px; height:52px; }
}

/* ===== REPORT MODAL ===== */
.report-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:2000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px; overflow-y:auto;
}
.report-modal {
  background:#fff; color:#1e293b; border-radius:12px;
  width:100%; max-width:680px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  overflow:hidden; margin:auto;
}
.report-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:#1e293b; color:#fff;
  position:sticky; top:0; z-index:1;
}
.report-modal-title { font-size:15px; font-weight:700; }
.report-modal-btns { display:flex; gap:6px; }
.report-action-btn {
  padding:5px 12px; border-radius:6px; border:none; cursor:pointer;
  font-size:12px; font-weight:600;
}
.report-action-btn.save { background:#16a34a; color:#fff; }
.report-action-btn.print { background:#2563eb; color:#fff; }
.report-action-btn.close { background:#475569; color:#fff; }
.report-action-btn:hover { opacity:0.85; }

.report-body { padding:20px 22px; }
.report-title {
  font-size:20px; font-weight:800; color:#1e293b;
  border-bottom:3px solid #3b82f6; padding-bottom:10px; margin-bottom:16px;
}
.report-section-title {
  font-size:14px; font-weight:700; color:#374151;
  margin:18px 0 8px; padding:4px 0;
  border-bottom:1px solid #e5e7eb;
}
.report-table { width:100%; border-collapse:collapse; margin-bottom:4px; }
.report-table td {
  padding:7px 12px; border:1px solid #e5e7eb; font-size:13px;
}
.report-table td:first-child {
  background:#f8fafc; font-weight:600; width:150px; color:#475569;
}
.report-canvas-wrap {
  background:#f1f5f9; border-radius:8px; padding:10px;
  text-align:center; margin-bottom:4px;
}
.report-canvas-img {
  max-width:100%; border-radius:6px;
  border:1px solid #e2e8f0;
}
.report-cmd-table {
  max-height:200px; overflow-y:auto;
  border:1px solid #e5e7eb; border-radius:8px;
  font-size:13px;
}
.rct-row {
  display:flex; gap:8px; align-items:center;
  padding:5px 10px; border-bottom:1px solid #f1f5f9;
}
.rct-row:last-child { border-bottom:none; }
.rct-row:nth-child(even) { background:#f8fafc; }
.rct-n { width:24px; color:#94a3b8; font-size:11px; text-align:right; }
.rct-icon { width:18px; text-align:center; }
.rct-label { flex:1; color:#334155; }
.rct-ms { color:#64748b; font-family:monospace; font-size:12px; }
.report-student-form { background:#f8fafc; border-radius:8px; padding:14px; }
.rsf-row {
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.rsf-row label {
  display:flex; flex-direction:column; gap:3px;
  font-size:12px; font-weight:600; color:#475569;
}
.rsf-row input, .rsf-row textarea {
  padding:6px 8px; border:1px solid #cbd5e1; border-radius:6px;
  font-size:13px; color:#1e293b; background:#fff;
  width:110px;
}
.rsf-row textarea { width:100%; resize:vertical; min-height:70px; }
.report-privacy {
  margin-top:14px; padding:10px 14px;
  background:#fefce8; border:1px solid #fde68a; border-radius:8px;
  font-size:12px; color:#92400e;
}
/* Report button in sidebar */
.report-btn {
  width:100%; padding:10px; border-radius:var(--radius-sm); border:none;
  cursor:pointer; font-weight:700; font-size:14px; margin-top:8px;
  opacity:0.9; transition:opacity .2s;
}
.report-btn:hover { opacity:1; }
.report-btn.l1 { background:rgba(59,130,246,0.15); color:#60a5fa; border:1px solid rgba(59,130,246,0.3); }
.report-btn.l2 { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }

/* ===== BLE COMPAT BANNER ===== */
.ble-compat-banner {
  display:flex; gap:14px; align-items:flex-start;
  background:#1a1200; border:1px solid #854d0e;
  border-radius:var(--radius-sm); padding:14px 16px;
  margin:0 0 16px; animation:slideDown .3s ease;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.bcb-icon {
  font-size:20px; color:#f59e0b; flex-shrink:0; margin-top:1px;
}
.bcb-content { flex:1; }
.bcb-title {
  font-size:13px; font-weight:700; color:#fbbf24; margin-bottom:4px;
}
.bcb-body {
  font-size:13px; color:#fde68a; margin-bottom:4px; line-height:1.5;
}
.bcb-rec {
  font-size:12px; color:#d97706; line-height:1.5;
}
.bcb-actions {
  display:flex; flex-direction:column; gap:6px; flex-shrink:0;
}
.bcb-btn {
  padding:7px 14px; border-radius:6px; border:none;
  cursor:pointer; font-size:12px; font-weight:600; white-space:nowrap;
}
.bcb-btn.primary  { background:#1d4ed8; color:#fff; }
.bcb-btn.secondary { background:#374151; color:#d1d5db; }
.bcb-btn:hover { opacity:0.85; }

/* ===== PLAYBACK RESULT OVERLAY ===== */
.play-result-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  z-index:1500; animation:fadeIn .25s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.play-result-card {
  background:var(--color-surface2); border-radius:16px;
  padding:28px 32px; width:280px; text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,0.5);
  animation:popUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popUp {
  from{transform:scale(.85);opacity:0}
  to{transform:scale(1);opacity:1}
}
.play-result-card.l1 { border-top:3px solid var(--color-l1); }
.play-result-card.l2 { border-top:3px solid var(--color-l2); }
.prc-header {
  font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--color-text3); text-transform:uppercase; margin-bottom:18px;
}
.prc-score-wrap {
  position:relative; width:120px; height:120px; margin:0 auto 12px;
}
.prc-ring { width:120px; height:120px; }
.prc-score-inner {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; gap:1px;
}
.prc-num {
  font-size:36px; font-weight:800; line-height:1;
  font-family:var(--font-mono);
}
.prc-pct { font-size:14px; font-weight:600; color:var(--color-text3); align-self:flex-end; padding-bottom:6px; }
.prc-grade {
  font-size:20px; font-weight:800; margin-bottom:8px;
}
.prc-msg {
  font-size:13px; color:var(--color-text2); line-height:1.5;
  margin-bottom:20px;
}
.prc-actions { display:flex; gap:8px; justify-content:center; }
.prc-btn {
  padding:8px 14px; border-radius:8px; border:none;
  cursor:pointer; font-size:12px; font-weight:600;
}
.prc-btn.again  { background:var(--color-surface); color:var(--color-text2); border:1px solid var(--color-border2); }
.prc-btn.report { background:var(--color-primary); color:#fff; }
.prc-btn.close  { background:var(--color-success); color:#fff; }

/* ===== LANG AUTO-DETECT HIGHLIGHT ===== */
.lang-card-detected {
  border-color: var(--color-primary) !important;
  background: rgba(0,229,160,0.08) !important;
  position: relative;
}
.lang-card-detected::after {
  content: 'auto';
  position: absolute;
  top: -8px; right: -8px;
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* ===== CLUSTER INFO ===== */
.cluster-info {
  border-radius:var(--radius-sm); padding:8px 12px;
  margin-bottom:8px; font-size:12px;
}
.cluster-info.clean { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); }
.cluster-info.has-outliers { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.25); }
.ci-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:2px; }
.ci-label { color:var(--color-text3); }
.ci-val { font-weight:700; color:var(--color-text); font-family:var(--font-mono); }
.ci-warn { color:var(--color-warning) !important; }