/* ===== SIMULATION LAB - SHARED STYLES ===== */
:root {
  --bg-void: #060a14;
  --bg-deep: #0a0f1e;
  --bg-panel: #0d1329;
  --bg-card: #111a35;
  --bg-hover: #162040;
  --border: #1c2a50;
  --border-light: #253565;
  --accent: #00d4ff;
  --accent2: #3d7aff;
  --accent3: #8b5cf6;
  --positive: #ff4466;
  --negative: #00bbff;
  --success: #00e676;
  --warning: #ffab40;
  --text: #e8ecf4;
  --text-dim: #8a95b5;
  --text-muted: #556080;
  --font: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius: 10px;
  --glow: 0 0 20px rgba(0,212,255,.12);
  --transition: .2s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg-void);color:var(--text);font-size:13px;line-height:1.5}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ===== NAV ===== */
#sim-nav{height:48px;background:rgba(10,15,30,.96);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;backdrop-filter:blur(14px);z-index:100;position:relative}
.nav-brand{color:var(--accent);font-weight:700;font-size:13px;text-decoration:none;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.nav-brand:hover{text-shadow:0 0 10px var(--accent)}
.nav-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.sim-badge{font-size:18px}
.nav-actions{display:flex;gap:8px}
.mode-switcher{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.mode-btn{padding:6px 14px;background:none;border:none;color:var(--text-dim);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--accent);color:var(--bg-void)}

/* ===== LAYOUT ===== */
#sim-app{display:grid;grid-template-columns:280px 1fr 300px;height:calc(100vh - 48px);position:relative}
.sim-panel{background:var(--bg-panel);overflow-y:auto;display:flex;flex-direction:column;transition:all .3s ease}
.sim-panel.collapsed{width:0;min-width:0;overflow:hidden;padding:0;border:none}
#left-panel{border-right:1px solid var(--border)}
#right-panel{border-left:1px solid var(--border)}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-header h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim)}
.collapse-btn{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:4px;transition:var(--transition)}
.collapse-btn:hover{color:var(--accent)}
.panel-body{padding:10px;flex:1;overflow-y:auto}
/* Reopen strips */
.panel-reopen{position:fixed;top:50%;z-index:90;background:var(--bg-card);border:1px solid var(--border);padding:8px 4px;cursor:pointer;transition:var(--transition);writing-mode:vertical-rl;font-size:10px;color:var(--text-dim);letter-spacing:1px;display:none}
.panel-reopen:hover{background:var(--accent);color:var(--bg-void);border-color:var(--accent)}
.panel-reopen.left{left:0;border-radius:0 6px 6px 0;transform:translateY(-50%)}
.panel-reopen.right{right:0;border-radius:6px 0 0 6px;transform:translateY(-50%)}
.panel-reopen.visible{display:block}

/* ===== CTRL CARDS ===== */
.ctrl-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;transition:var(--transition)}
.ctrl-card:hover{border-color:var(--border-light)}
.ctrl-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:10px}

/* Charge Palette */
.charge-palette{display:flex;gap:8px;margin-bottom:12px}
.charge-btn{flex:1;padding:12px 8px;background:var(--bg-deep);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;gap:4px}
.charge-btn:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.charge-btn.positive{border-color:rgba(255,68,102,.3)}.charge-btn.positive:hover{border-color:var(--positive);box-shadow:0 0 20px rgba(255,68,102,.15)}
.charge-btn.negative{border-color:rgba(0,187,255,.3)}.charge-btn.negative:hover{border-color:var(--negative);box-shadow:0 0 20px rgba(0,187,255,.15)}
.charge-btn.dipole{border-color:rgba(139,92,246,.3)}.charge-btn.dipole:hover{border-color:var(--accent3);box-shadow:0 0 20px rgba(139,92,246,.15)}
.charge-symbol{font-size:24px;font-weight:800;line-height:1}
.charge-btn.positive .charge-symbol{color:var(--positive)}
.charge-btn.negative .charge-symbol{color:var(--negative)}
.charge-btn.dipole .charge-symbol{color:var(--accent3)}
.charge-text{font-size:10px;color:var(--text-dim);font-weight:600}

/* Controls */
.ctrl-row{margin-bottom:10px}
.ctrl-row label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-dim);margin-bottom:4px}
.ctrl-row input[type="range"]{width:100%;accent-color:var(--accent);height:4px}
.ctrl-val{font-family:var(--mono);font-size:11px;color:var(--accent)}
.toggle-row{display:flex;align-items:center;gap:6px;padding:5px 0;font-size:12px;color:var(--text-dim);cursor:pointer;border-bottom:1px solid rgba(28,42,80,.5)}
.toggle-row:last-of-type{border-bottom:none}
.toggle-row input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px}
.toggle-row span{flex:1}
.info-btn{background:none;border:none;cursor:pointer;font-size:12px;opacity:.5;transition:var(--transition)}
.info-btn:hover{opacity:1;transform:scale(1.2)}
.ctrl-hint{font-size:10px;color:var(--text-muted);margin-bottom:8px;line-height:1.5}

/* Probe Box */
.probe-box{background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;padding:8px;margin-top:8px}
.probe-row{display:flex;justify-content:space-between;padding:3px 0;font-size:11px}
.probe-row span:first-child{color:var(--text-muted)}
.probe-row span:last-child{font-family:var(--mono);color:var(--accent)}

/* Buttons */
.btn-action{width:100%;padding:8px;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font:inherit;font-size:11px;cursor:pointer;transition:var(--transition);margin-bottom:4px;text-align:left}
.btn-action:hover{border-color:var(--accent);color:var(--text);background:var(--bg-hover)}
.btn-action.danger:hover{border-color:var(--positive);color:var(--positive)}

/* Data Grid */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.data-cell{background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;padding:8px}
.data-lbl{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)}
.data-val{display:block;font-family:var(--mono);font-weight:600;font-size:12px;color:var(--text);margin-top:2px}

/* Formulas */
.formula-card{background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.formula-name{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.formula-eq{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent);margin-bottom:4px}
.formula-desc{font-size:10px;color:var(--text-dim)}

/* ===== CANVAS ===== */
#sim-canvas-wrap{position:relative;background:var(--bg-void);overflow:hidden;cursor:crosshair}
#sim-canvas{position:absolute;inset:0;width:100%;height:100%}

/* Tooltip */
#charge-tooltip{position:absolute;z-index:50;background:rgba(13,19,41,.94);border:1px solid var(--border-light);border-radius:8px;padding:8px 12px;font-size:11px;pointer-events:none;backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.4)}
#charge-tooltip .hidden{display:none}

/* Info Popup */
#info-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:60;background:var(--bg-panel);border:1px solid var(--accent);border-radius:12px;padding:20px;max-width:400px;width:90%;box-shadow:0 0 40px rgba(0,212,255,.1);backdrop-filter:blur(16px)}
#info-popup.hidden{display:none}
#info-popup h4{font-size:14px;color:var(--accent);margin-bottom:8px}
#info-popup p{font-size:12px;color:var(--text-dim);line-height:1.7}
.info-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer}

.hint-text{font-size:11px;color:var(--text-muted);font-style:italic}
.hidden{display:none!important}

/* Learn Content */
#learn-content h3{font-size:14px;color:var(--text);margin:14px 0 6px}
#learn-content p{font-size:12px;color:var(--text-dim);line-height:1.7;margin-bottom:8px}
#learn-content .key-point{background:rgba(0,212,255,.05);border-left:3px solid var(--accent);padding:8px 12px;margin:8px 0;border-radius:0 6px 6px 0;font-size:12px}

/* Task */
.task-item{padding:10px;background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:var(--transition)}
.task-item:hover{border-color:var(--accent)}
.task-item h5{font-size:12px;color:var(--text);margin-bottom:2px}
.task-item p{font-size:10px;color:var(--text-muted)}
.task-item.completed{border-color:var(--success);opacity:.7}
.task-item.completed h5::after{content:' ✓';color:var(--success)}
#task-feedback{margin-top:8px;padding:10px;border-radius:6px;font-size:12px}
#task-feedback.correct{background:rgba(0,230,118,.08);border:1px solid var(--success);color:var(--success)}
#task-feedback.wrong{background:rgba(255,68,102,.08);border:1px solid var(--positive);color:var(--positive)}

/* Button Groups */
.btn-group-row{display:flex;gap:4px;margin-bottom:6px}
.mode-toggle,.slit-toggle{flex:1;padding:7px 6px;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:var(--transition);text-align:center}
.mode-toggle:hover,.slit-toggle:hover{border-color:var(--accent);color:var(--text)}
.mode-toggle.active,.slit-toggle.active{background:var(--accent);color:var(--bg-void);border-color:var(--accent)}
.color-preview{border-radius:3px;transition:background .3s}

/* System Selector */
.system-list{display:flex;flex-direction:column;gap:4px}
.sys-btn{width:100%;padding:9px 12px;background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:var(--transition);text-align:left}
.sys-btn:hover{border-color:var(--accent);color:var(--text);background:var(--bg-hover)}
.sys-btn.active{background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(139,92,246,.12));border-color:var(--accent);color:var(--text);box-shadow:0 0 12px rgba(0,212,255,.08)}

/* Chart Box */
.chart-box{position:relative;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;padding:4px}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){#sim-app{grid-template-columns:1fr}#left-panel,#right-panel{display:none}}