@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Sarabun:wght@400;500;600&display=swap');
:root {
  --bg:#0a0e1a; --surface:#111827; --surface2:#162035; --border:#1e3148;
  --accent:#00d4aa; --accent2:#00b89a; --accent3:#ff6b35;
  --text:#e8e8f0; --muted:#6b7a9a; --green:#4ecb8d; --yellow:#ffd60a; --red:#f07070;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Sarabun',sans-serif;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,212,170,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,170,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}
.app{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem 1.5rem}

/* HEADER */
.header{display:flex;align-items:center;gap:14px;margin-bottom:1.5rem}
.logo{width:52px;height:52px;background:transparent;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;flex-shrink:0}
.logo img{width:52px;height:52px;display:block}
.header-text h1{font-family:'Kanit',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.5px}
.header-text p{font-size:13px;color:var(--muted);margin-top:2px}
.status-pill{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:12px;font-family:'Kanit',sans-serif;color:var(--muted);white-space:nowrap}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--red);transition:background .3s}
.status-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green)}
.status-dot.loading{background:var(--yellow);animation:pulse 1s infinite}
.status-dot.sim{background:var(--accent2);box-shadow:0 0 6px var(--accent2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.guide-btn{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border);border-radius:10px;padding:7px 13px;font-family:'Sarabun',sans-serif;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.guide-btn:hover{border-color:var(--accent);color:var(--accent)}
.teacher-btn{background:transparent;border:1px solid var(--border);border-radius:10px;padding:7px 13px;font-family:'Sarabun',sans-serif;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.teacher-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn{background:transparent;border:1px solid var(--border);border-radius:10px;padding:7px 13px;font-family:'Sarabun',sans-serif;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.app-footer{text-align:center;padding:28px 0 20px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px}
.footer-guide-link{color:var(--accent);text-decoration:none;font-family:'Kanit',sans-serif;font-weight:500;display:flex;align-items:center;gap:5px;border:1px solid rgba(0,212,170,.3);border-radius:8px;padding:5px 12px;transition:background .15s,border-color .2s}
.footer-guide-link:hover{background:rgba(0,212,170,.08);border-color:var(--accent)}
.footer-sep{color:var(--border)}
.footer-credit{color:var(--muted);font-family:'Kanit',sans-serif}

/* MODE TOGGLE */
.mode-toggle{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:1.5rem;width:fit-content;gap:0}
.mode-btn{background:transparent;border:none;border-radius:9px;padding:9px 20px;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:7px}
.mode-btn.active{background:var(--accent);color:#fff}
.mode-btn:hover:not(.active){color:var(--text)}

/* STEPS */
.steps{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.step{display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s}
.step.active{border-color:var(--accent)}
.step.done{border-color:var(--green);opacity:.7}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;margin-top:2px}
.step.active .step-num{background:var(--accent);border-color:var(--accent);color:#fff}
.step.done .step-num{background:var(--green);border-color:var(--green);color:#fff}
.step-content h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.step-content p{font-size:13px;color:var(--muted);line-height:1.5}
.input-group{display:flex;gap:8px;margin-top:10px}
.input-group input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'Kanit',sans-serif;font-size:12px;outline:none;transition:border-color .2s}
.input-group input:focus{border-color:var(--accent)}
.input-group input::placeholder{color:var(--muted)}

button{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;white-space:nowrap}
button:hover{opacity:.85}
button:active{transform:scale(.97)}
button:disabled{opacity:.35;cursor:not-allowed}
button.outline{background:transparent;border:1px solid var(--border);color:var(--text)}
button.outline:hover{border-color:var(--accent);color:var(--accent)}

/* MAIN GRID */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
.panel-label{font-size:10px;font-family:'Kanit',sans-serif;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* CAMERA */
.camera-wrap{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
#webcam-container canvas,#webcam-container video{width:100%!important;height:100%!important;object-fit:cover;border-radius:12px}
.camera-placeholder{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#0d2035 0%,var(--bg) 75%)}
.placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px;user-select:none}
.placeholder-ring{width:76px;height:76px;border-radius:50%;border:1.5px solid rgba(0,212,170,.35);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:10px;animation:placeholderGlow 3s ease-in-out infinite}
.placeholder-org{font-family:'Kanit',sans-serif;font-size:17px;font-weight:700;color:var(--accent);letter-spacing:.5px}
.placeholder-sub{font-size:12px;color:var(--muted);margin-top:2px;font-family:'Sarabun',sans-serif}
.placeholder-url{font-size:10px;color:rgba(0,212,170,.35);font-family:'Kanit',sans-serif;margin-top:6px;letter-spacing:.3px}
@keyframes placeholderGlow{0%,100%{box-shadow:0 0 18px rgba(0,212,170,.1);border-color:rgba(0,212,170,.25)}50%{box-shadow:0 0 36px rgba(0,212,170,.3);border-color:rgba(0,212,170,.65)}}

/* VOICE VIZ */
.voice-viz{border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#0d2035 0%,var(--bg) 75%);aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;position:relative}
.placeholder-watermark{position:absolute;bottom:14px;font-size:10px;color:rgba(0,212,170,.3);font-family:'Kanit',sans-serif;letter-spacing:.5px;pointer-events:none}
.mic-ring{width:80px;height:80px;border-radius:50%;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:32px;transition:border-color .15s}
.mic-ring.listening{border-color:var(--accent2);animation:ringPulse 1s ease-in-out infinite}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(94,231,196,.4)}70%{box-shadow:0 0 0 18px rgba(94,231,196,0)}100%{box-shadow:0 0 0 0 rgba(94,231,196,0)}}
.waveform{display:flex;align-items:flex-end;gap:3px;height:40px}
.wave-bar{width:4px;background:var(--accent);border-radius:2px;transition:height .08s;min-height:3px}
.voice-status{font-size:13px;color:var(--muted);font-family:'Kanit',sans-serif}

/* MICRO:BIT SIMULATOR */
.microbit-board{background:#1a1a2e;border-radius:22px;padding:22px 18px 18px;border:3px solid #16213e;box-shadow:0 8px 0 #080818,0 10px 24px rgba(0,0,0,.5);width:240px;position:relative;flex-shrink:0}
.mb-brand{font-family:'Kanit',sans-serif;color:#ffd700;font-size:11px;text-align:center;letter-spacing:2px;margin-bottom:14px;opacity:.9}
.led-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0 auto 16px;width:fit-content}
.led{width:24px;height:24px;border-radius:50%;background:#1c0505;border:1px solid #2a0808;transition:background .1s,box-shadow .1s}
.led.on-red   {background:#ff3333;border-color:#ff6666;box-shadow:0 0 8px #ff3333bb}
.led.on-green {background:#22cc44;border-color:#44ee66;box-shadow:0 0 8px #22cc44bb}
.led.on-yellow{background:#ffcc00;border-color:#ffdd44;box-shadow:0 0 8px #ffcc00bb}
.led.on-blue  {background:#4488ff;border-color:#66aaff;box-shadow:0 0 8px #4488ffbb}
.led.on-white {background:#ffffff;border-color:#cccccc;box-shadow:0 0 8px #ffffffbb}
.led.on-cyan  {background:#00e5ff;border-color:#66f5ff;box-shadow:0 0 8px #00e5ffbb}
.mb-btns-row{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.mb-btn{background:#22224a;border:2px solid #44449a;border-radius:8px;width:42px;height:28px;font-size:11px;font-weight:700;font-family:'Kanit',sans-serif;color:#aab;cursor:pointer;transition:background .1s,transform .1s;letter-spacing:.5px}
.mb-btn:hover{background:#33336a;border-color:#6666cc}
.mb-btn:active,.mb-btn.pressed{background:#5555aa;color:#eef;transform:scale(.94);border-color:#8888ff}
.mb-usb{width:50px;height:9px;background:#888;border-radius:3px}
.mb-pins{display:flex;justify-content:space-around;margin-top:12px}
.mb-pin{width:9px;height:14px;background:#999;border-radius:2px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1px;font-size:7px;color:#bbb}
.mb-speaker{display:flex;align-items:flex-end;gap:2px;height:18px}
.sp-bar{width:3px;border-radius:1px;background:#4488ff33;transition:height .08s,background .08s;min-height:2px}
.sp-bar.active{background:#4488ff}
.sim-status-band{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;width:240px;text-align:center}
.sim-status-label{font-size:10px;letter-spacing:1px;color:var(--muted);font-family:'Kanit',sans-serif;text-transform:uppercase;margin-bottom:4px}
.sim-status-val{font-family:'Kanit',sans-serif;font-size:13px;font-weight:700;color:var(--accent2);min-height:20px}

/* CLASS MAPPING TABLE */
.class-map{width:100%;border-collapse:collapse;margin-top:0}
.class-map th{font-size:10px;letter-spacing:1px;color:var(--muted);font-family:'Kanit',sans-serif;text-transform:uppercase;padding:0 0 8px;text-align:left;border-bottom:1px solid var(--border)}
.class-map td{padding:6px 0;font-size:12px;vertical-align:middle;border-bottom:1px solid var(--border)}
.class-map tr:last-child td{border-bottom:none}
.class-name{font-family:'Kanit',sans-serif;color:var(--accent2);font-size:12px}
.icon-picker{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;color:var(--text);font-family:'Kanit',sans-serif;font-size:12px;cursor:pointer;outline:none;-webkit-appearance:none;width:100%}
.icon-picker:focus{border-color:var(--accent)}

/* PREDICTIONS */
.predictions{display:flex;flex-direction:column;gap:8px}
.pred-row{display:flex;align-items:center;gap:10px}
.pred-label{font-size:12px;font-family:'Kanit',sans-serif;color:var(--text);min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pred-bar-bg{flex:1;height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}
.pred-bar{height:100%;border-radius:99px;background:var(--accent);transition:width .15s ease-out;width:0%}
.pred-bar.voice{background:var(--accent2)}
.pred-pct{font-size:11px;font-family:'Kanit',sans-serif;color:var(--muted);min-width:36px;text-align:right}
.detected-box{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.detected-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.detected-val{font-family:'Kanit',sans-serif;font-size:15px;font-weight:700;color:var(--accent2);letter-spacing:.5px}
.send-badge{font-size:10px;padding:4px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-family:'Kanit',sans-serif}
.send-badge.sent{border-color:var(--green);color:var(--green)}
.log{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px;height:110px;overflow-y:auto;font-family:'Courier New',monospace;font-size:11px;line-height:1.8;color:var(--muted)}
.log .entry{display:block}
.log .entry.tx{color:var(--accent2)}
.log .entry.ok{color:var(--green)}
.log .entry.err{color:var(--red)}
.log .entry.sim{color:var(--yellow)}
.threshold-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.threshold-row label{font-size:12px;color:var(--muted);white-space:nowrap}
.threshold-row input[type=range]{flex:1;accent-color:var(--accent)}
.threshold-val{font-family:'Kanit',sans-serif;font-size:12px;color:var(--accent);min-width:36px}

/* CODE */
.code-block{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px;font-family:'Courier New',monospace;font-size:11px;color:#a0c4ff;line-height:1.7;white-space:pre-wrap;word-break:break-all}
.code-kw{color:#d4a0ff}.code-str{color:#a0ffd4}.code-comment{color:#555577}
.copy-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:5px 12px;border-radius:8px;font-size:11px;cursor:pointer;font-family:'Kanit',sans-serif;margin-top:10px;display:inline-block;transition:all .15s}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;max-width:480px;width:100%}
.modal h2{font-family:'Kanit',sans-serif;font-size:16px;margin-bottom:8px}
.modal p{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.modal-btns{display:flex;gap:10px;justify-content:flex-end}
.hidden{display:none!important}

/* VISIBILITY HELPERS */
.image-only-block,.voice-only-block,.sim-only-block{display:none}
body.mode-image .image-only-block{display:block}
body.mode-voice .voice-only-block{display:block}
body.mode-sim   .sim-only-block{display:block}
.no-sim{display:block}
body.mode-sim .no-sim{display:none!important}

/* GAMIFICATION — game bar */
.game-bar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 18px;margin-bottom:1.5rem;flex-wrap:wrap}
.game-stat{display:flex;flex-direction:column;align-items:center;min-width:56px}
.game-stat-val{font-family:'Kanit',sans-serif;font-size:22px;font-weight:700;color:var(--accent);line-height:1}
.game-stat-val.pop{animation:scorePop .35s ease-out}
.game-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px;font-family:'Kanit',sans-serif}
.game-divider{width:1px;height:40px;background:var(--border);flex-shrink:0}
.streak-fire{display:inline-block;font-size:18px;vertical-align:middle}
.streak-fire.hot{animation:fireShake .4s ease-in-out infinite alternate}
.challenge-btn{margin-left:auto;background:linear-gradient(135deg,#f7706a,#f0c040);color:#fff;border:none;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Sarabun',sans-serif;transition:transform .15s,opacity .15s;white-space:nowrap}
.challenge-btn:hover{transform:scale(1.04);opacity:.92}
.challenge-btn:active{transform:scale(.97)}
.challenge-btn.active{background:linear-gradient(135deg,#4ecb8d,#5ee7c4)}
.game-reset-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:6px 10px;font-size:11px;cursor:pointer;font-family:'Kanit',sans-serif;white-space:nowrap;transition:border-color .15s,color .15s}
.game-reset-btn:hover{border-color:var(--accent3);color:var(--accent3)}

/* GAMIFICATION — challenge panel */
.challenge-panel{background:var(--surface);border:2px solid var(--accent3);border-radius:20px;padding:28px 28px 24px;margin-bottom:1.5rem;text-align:center;position:relative;overflow:hidden}
.challenge-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(247,112,106,.07),transparent 60%);pointer-events:none}
.challenge-tag{font-size:10px;font-family:'Kanit',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--accent3);margin-bottom:14px}
.challenge-prompt{font-size:15px;color:var(--muted);margin-bottom:6px}
.challenge-emoji{font-size:56px;display:block;margin-bottom:4px;animation:targetBounce .5s ease-out}
.challenge-target{font-family:'Kanit',sans-serif;font-size:32px;font-weight:700;color:var(--text);margin-bottom:18px;animation:targetBounce .5s ease-out;line-height:1.2}
.challenge-timer-wrap{background:var(--surface2);border-radius:99px;height:12px;overflow:hidden;margin:0 auto 14px;max-width:340px}
.challenge-timer-bar{height:100%;border-radius:99px;background:var(--green);transition:width .1s linear,background .3s;width:100%}
.challenge-timer-bar.warn{background:var(--yellow)}
.challenge-timer-bar.danger{background:var(--red)}
.challenge-score-row{display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Kanit',sans-serif;font-size:12px;color:var(--muted);margin-bottom:10px}
.challenge-result{font-size:26px;font-weight:700;min-height:38px;font-family:'Kanit',sans-serif;transition:opacity .2s}
.challenge-result.win{color:var(--green)}
.challenge-result.lose{color:var(--red)}
.challenge-result.ready{color:var(--accent);animation:countdownPop .3s ease-out}
.challenge-end{display:none;flex-direction:column;align-items:center;gap:14px;padding:10px 0}
.challenge-end.show{display:flex}
.challenge-end-score{font-family:'Kanit',sans-serif;font-size:52px;font-weight:700;color:var(--accent2)}
.challenge-end-msg{font-size:16px;color:var(--muted)}
.challenge-end-stars{font-size:34px;letter-spacing:6px}

/* GAMIFICATION — toast + confetti */
.achieve-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-90px);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:50px;padding:12px 28px;font-family:'Kanit',sans-serif;font-size:13px;font-weight:700;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none}
.achieve-toast.show{transform:translateX(-50%) translateY(0)}
.confetti-piece{position:fixed;pointer-events:none;z-index:300;border-radius:2px;animation:confettiFall linear forwards}

/* TEACHER MODE */
.teacher-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:6px 13px;font-size:12px;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.teacher-btn:hover{border-color:var(--accent);color:var(--accent)}
.teacher-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.lang-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:6px 12px;font-size:12px;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap}
.lang-btn:hover{border-color:var(--accent2);color:var(--accent2)}
.student-name-badge{font-family:'Kanit',sans-serif;font-size:12px;color:var(--accent2);background:rgba(94,231,196,.1);border:1px solid rgba(94,231,196,.3);border-radius:8px;padding:4px 12px;white-space:nowrap}
.teacher-panel{background:rgba(124,106,247,.05);border:1px solid var(--accent);border-radius:16px;padding:18px 20px;margin-bottom:1.5rem}
.teacher-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.teacher-badge{background:var(--accent);color:#fff;border-radius:6px;padding:3px 10px;font-size:11px;font-family:'Kanit',sans-serif;font-weight:700;letter-spacing:1px;flex-shrink:0}
.teacher-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.teacher-grid{grid-template-columns:1fr}}
.t-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-family:'Kanit',sans-serif;margin-bottom:7px}
.t-select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:'Kanit',sans-serif;font-size:12px;outline:none;transition:border-color .15s;width:100%}
.t-select:focus{border-color:var(--accent)}
.t-input{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'Kanit',sans-serif;font-size:12px;outline:none;transition:border-color .15s;width:100%}
.t-input:focus{border-color:var(--accent)}
.t-input::placeholder{color:var(--muted)}
.model-url-group{display:flex;flex-direction:column}
.model-locked-badge{display:none;align-items:center;gap:10px;background:rgba(78,203,141,.1);border:1px solid var(--green);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--green);font-weight:600;margin-top:8px}
body.student-mode .model-url-group{display:none}
body.student-mode .model-locked-badge{display:flex}
.thresh-label-tech{display:inline}
.thresh-label-friendly{display:none}
body.student-mode .thresh-label-tech{display:none}
body.student-mode .thresh-label-friendly{display:inline}

/* DETECTION BUBBLE + SCREEN GLOW */
.det-bubble{position:fixed;bottom:36px;left:50%;transform:translateX(-50%) scale(.5);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:24px;padding:14px 28px;display:flex;align-items:center;gap:12px;font-family:'Kanit',sans-serif;font-size:16px;font-weight:700;z-index:150;box-shadow:0 8px 40px rgba(0,0,0,.4);pointer-events:none;opacity:0}
.det-bubble.show{animation:bubblePop .25s ease-out forwards,bubbleFade .3s ease-in 1.2s forwards}
.det-bubble-emoji{font-size:26px}
body.screen-glow::after{content:'';position:fixed;inset:0;border:3px solid var(--accent2);pointer-events:none;z-index:99;animation:screenGlow .5s ease-out forwards}

/* ANIMATIONS */
@keyframes scorePop{0%{transform:scale(1)}50%{transform:scale(1.55)}100%{transform:scale(1)}}
@keyframes fireShake{0%{transform:rotate(-10deg) scale(1.1)}100%{transform:rotate(10deg) scale(1.25)}}
@keyframes targetBounce{0%{transform:scale(.4) translateY(20px);opacity:0}70%{transform:scale(1.1) translateY(-4px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes countdownPop{0%{transform:scale(2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(92vh) rotate(720deg)}}
@keyframes bubblePop{0%{opacity:0;transform:translateX(-50%) scale(.4) translateY(20px)}65%{opacity:1;transform:translateX(-50%) scale(1.06) translateY(0)}100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}
@keyframes bubbleFade{0%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(.85) translateY(10px)}}
@keyframes screenGlow{0%{opacity:.7}100%{opacity:0}}
@media(max-width:640px){.game-bar{gap:8px}.game-stat-val{font-size:17px}.challenge-btn{width:100%;margin-left:0}}

/* FROM MICRO:BIT PANEL */
.mb-rx-subtitle{font-size:10px;font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none;font-family:'Sarabun',sans-serif;margin-left:4px}
.mb-rx-wrap{display:flex;gap:16px;align-items:stretch}
@media(max-width:640px){.mb-rx-wrap{flex-direction:column}}
.mb-rx-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:20px 24px;min-width:190px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.mb-rx-card-label{font-size:10px;color:var(--muted);font-family:'Kanit',sans-serif;text-transform:uppercase;letter-spacing:1px}
.mb-rx-val{font-family:'Kanit',sans-serif;font-size:30px;font-weight:700;color:var(--accent2);word-break:break-all;line-height:1.2;min-height:38px;transition:color .2s}
.mb-rx-val.rx-pop{animation:scorePop .4s ease-out}
.mb-rx-hint{font-size:11px;color:var(--muted);line-height:1.7;text-align:center}
.mb-rx-hint code{background:var(--surface);padding:2px 6px;border-radius:4px;font-size:10px;font-family:'Kanit',sans-serif}
.mb-rx-history{flex:1;display:flex;flex-direction:column;gap:8px}
.mb-rx-history-header{display:flex;align-items:center;justify-content:space-between}
.mb-rx-history-label{font-size:10px;color:var(--muted);font-family:'Kanit',sans-serif;text-transform:uppercase;letter-spacing:1px}
.log .entry.rx{color:#a78bfa}

/* BT HELP */
.bt-help{margin-top:10px;font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:6px 12px}
.bt-help summary{cursor:pointer;font-weight:600;color:var(--accent);user-select:none}
.bt-help ol{margin:8px 0 2px 0;padding-left:18px;line-height:2}

/* MUTE / IGNORE LABEL */
.mute-btn{background:none;border:1px solid var(--border);border-radius:5px;color:var(--muted);font-size:10px;padding:2px 6px;cursor:pointer;flex-shrink:0;font-family:'Sarabun',sans-serif;transition:all .15s}
.mute-btn:hover{border-color:var(--accent3);color:var(--accent3)}
.mute-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(124,106,247,.1)}
.pred-muted .pred-label{opacity:.4;text-decoration:line-through}
.pred-muted .pred-bar-bg{opacity:.2}
.pred-muted .pred-pct{opacity:.3}

/* CODE TABS */
.code-tabs{display:flex;gap:6px;margin-bottom:8px}
.code-tab{background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:6px 16px;border-radius:8px;font-size:12px;cursor:pointer;font-family:'Sarabun',sans-serif;font-weight:600;transition:all .15s}
.code-tab:hover{color:var(--text);border-color:var(--accent)}
.code-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ═══════════════════════════════════════
   RESPONSIVE / MOBILE
═══════════════════════════════════════ */
.sim-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}

/* tablet 600–820px: input + micro:bit side by side, right panels span full row */
@media(max-width:820px) and (min-width:600px){
  .sim-grid{grid-template-columns:1fr auto}
  .sim-grid>div:last-child{grid-column:1/-1}
  .microbit-board,.sim-status-band{width:240px;max-width:240px}
}

/* ≤820px: mode toggle full width */
@media(max-width:820px){
  .mode-toggle{width:100%}
  .mode-btn{flex:1;justify-content:center;padding:9px 8px;font-size:12px}
}

/* ≤599px: sim collapses to 1 column */
@media(max-width:599px){
  .sim-grid{grid-template-columns:1fr}
  .sim-wrap{width:100%}
  .microbit-board,.sim-status-band{width:100%;max-width:320px}
}

/* ≤480px: 2-row mobile header — title row 1, buttons row 2 */
@media(max-width:480px){
  .app{padding:1rem}
  .header{flex-wrap:wrap;gap:6px}
  .header-text{flex:1;min-width:calc(100% - 54px)}
  .header-text p{display:none}
  .header-text h1{font-size:16px}
  .status-pill{margin-left:0;font-size:11px;padding:5px 8px}
  .teacher-btn span,.guide-btn span{display:none}
  .teacher-btn,.guide-btn,.lang-btn{padding:6px 10px;font-size:12px}
}