:root {
  --bg: #1e1e2e; --bg-alt: #181825; --panel: #262637; --surface: #313244;
  --overlay: #45475a; --muted: #6c7086; --fg: #cdd6f4; --accent: #89b4fa;
  --green: #a6e3a1; --red: #f38ba8; --peach: #fab387; --yellow: #f9e2af;
  --teal: #94e2d5; --radius: 10px; --shadow: 0 4px 16px rgba(0,0,0,0.3);
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--fg); overflow:hidden; height:100vh; }
.app-container { display:flex; height:100vh; }

.sidebar { background:var(--panel); border-right:1px solid var(--surface); width:220px; transition:width var(--transition); overflow:hidden; flex-shrink:0; }
.sidebar.collapsed { width:56px; }
.sidebar-content { display:flex; flex-direction:column; height:100%; padding:6px; }
.toggle-btn { background:transparent; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:8px; margin-bottom:6px; border-radius:6px; }
.toggle-btn:hover { color:var(--fg); background:var(--surface); }
.nav-menu { flex:1; display:flex; flex-direction:column; gap:3px; }
.sidebar-footer { margin-top:auto; }
.nav-btn { background:transparent; border:none; color:var(--fg); border-radius:8px; cursor:pointer; padding:10px; text-align:left; display:flex; align-items:center; gap:12px; font-size:14px; transition:all .2s; width:100%; }
.nav-btn:hover { background:var(--surface); }
.nav-btn.active { background:var(--surface); color:var(--accent); }
.nav-icon { font-size:18px; min-width:24px; text-align:center; }
.sidebar.collapsed .nav-text { display:none; }
.exit-btn { color:var(--red); }

.main-content { flex:1; overflow-y:auto; padding:24px; min-width:0; }
.page { animation:fadeIn .25s ease; }
.page.hidden { display:none; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.page-header { margin-bottom:16px; }
.page-title { font-size:26px; font-weight:700; margin-bottom:4px; }
.page-subtitle { color:var(--muted); font-size:14px; margin-bottom:16px; }

.control-panel { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:14px 18px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.status-indicator { display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--bg); border-radius:6px; font-size:12px; white-space:nowrap; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--red); transition:background .3s; flex-shrink:0; }
.status-text { color:var(--muted); font-weight:500; }
.control-group { display:flex; align-items:center; gap:6px; }
.control-group label { color:var(--muted); font-size:13px; white-space:nowrap; }
.control-group select,.control-group input { background:var(--bg); color:var(--fg); border:1px solid var(--surface); border-radius:5px; padding:5px 10px; font-size:13px; cursor:pointer; transition:border-color .2s; }
.control-group select:hover { border-color:var(--accent); }
.control-group input[type="number"] { width:80px; }
.btn-scan { background:var(--surface); border:none; color:var(--accent); font-size:18px; cursor:pointer; padding:5px 10px; border-radius:5px; transition:all .2s; }
.btn-scan:hover { background:var(--overlay); transform:scale(1.05); }
.button-group { display:flex; gap:8px; margin-left:auto; }
.btn-run,.btn-stop,.btn-train,.btn-monitor,.btn-secondary { border:none; border-radius:6px; padding:8px 18px; cursor:pointer; font-size:14px; font-weight:600; transition:all .2s; }
.btn-monitor { background:var(--peach); color:var(--bg-alt); }
.btn-monitor:hover { box-shadow:0 2px 10px rgba(250,179,135,.3); transform:translateY(-1px); }
.btn-monitor:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-monitor.active { background:var(--red); box-shadow:0 0 12px rgba(243,139,168,.5); }
.btn-run { background:var(--green); color:var(--bg-alt); }
.btn-run:hover { box-shadow:0 2px 10px rgba(166,227,161,.3); transform:translateY(-1px); }
.btn-run:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-stop { background:var(--red); color:var(--bg-alt); }
.btn-stop:hover { box-shadow:0 2px 10px rgba(243,139,168,.3); }
.btn-stop:disabled { opacity:.4; cursor:not-allowed; }
.btn-train { background:var(--accent); color:var(--bg-alt); }
.btn-train:disabled { opacity:.4; cursor:not-allowed; }
.btn-secondary { background:var(--surface); color:var(--fg); }
.btn-secondary:hover { background:var(--overlay); }

/* Toast confirmation */
.btn-wrap { display:inline-flex; align-items:center; gap:8px; }
.toast-confirm {
  display:inline-block;
  padding:3px 10px;
  border-radius:4px;
  font-size:12px;
  font-weight:600;
  color:#a6e3a1;
  background:rgba(166,227,161,.12);
  border:1px solid rgba(166,227,161,.3);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
  white-space:nowrap;
}
.toast-confirm.show {
  opacity:1;
  transform:translateX(0);
}

.visualization-panel { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:12px; display:flex; justify-content:center; align-items:center; min-height:220px; overflow:hidden; }
#pendulumCanvas { display:block; border-radius:6px; }

/* Serial panel row */
.serial-panel { margin-top:-8px; padding:8px 14px; gap:10px; }
.serial-label { color:var(--accent); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-right:4px; }
.serial-status { color:var(--muted); font-size:12px; margin-left:4px; }

/* Calibration panel */
.calibration-panel { flex-direction:column; align-items:stretch; gap:12px; margin-top:-8px; }
.calibration-label { color:var(--peach); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.calibration-info { display:flex; gap:16px; background:var(--bg); padding:10px; border-radius:6px; font-size:12px; color:var(--muted); }
.calibration-step { display:flex; align-items:center; gap:6px; flex:1; }
.step-num { background:var(--surface); color:var(--fg); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; flex-shrink:0; }
.calibration-controls { display:flex; gap:10px; align-items:center; }
.btn-calibrate { border:none; border-radius:6px; padding:8px 18px; cursor:pointer; font-size:14px; font-weight:600; transition:all .2s; background:var(--peach); color:var(--bg-alt); }
.btn-calibrate:hover { box-shadow:0 2px 10px rgba(250,179,135,.3); transform:translateY(-1px); }
.btn-calibrate:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
/* Direction control panel */
.direction-panel { margin-top:-8px; padding:10px 14px; gap:12px; }
.direction-label { color:var(--teal); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.direction-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.direction-controls .control-group { display:flex; align-items:center; gap:6px; }
.direction-controls .control-group input { width:70px; }
.btn-direction { border:none; border-radius:8px; padding:10px 24px; cursor:pointer; font-size:15px; font-weight:700; transition:all .15s; letter-spacing:.3px; user-select:none; -webkit-user-select:none; }
.btn-direction.left { background:var(--accent); color:var(--bg-alt); }
.btn-direction.left:hover { box-shadow:0 2px 12px rgba(137,180,250,.4); transform:scale(1.02); }
.btn-direction.left:active { background:#6a8fd6; transform:scale(0.97); }
.btn-direction.right { background:var(--peach); color:var(--bg-alt); }
.btn-direction.right:hover { box-shadow:0 2px 12px rgba(250,179,135,.4); transform:scale(1.02); }
.btn-direction.right:active { background:#e8a066; transform:scale(0.97); }

.calibration-readout { display:flex; gap:12px; background:var(--bg); padding:10px; border-radius:6px; }
.calib-stat { display:flex; align-items:center; gap:6px; flex:1; }
.calib-stat .stat-label { color:var(--muted); font-size:11px; text-transform:uppercase; }
.calib-stat .stat-value { color:var(--peach); font-size:16px; font-weight:bold; font-family:monospace; margin-left:auto; }

/* Combined pendulum + camera + charts layout */
#pendulumPage { display:flex; flex-direction:column; min-height:100%; gap:12px; }
#pendulumPage.hidden { display:none; }
.pendulum-main { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; }
.pendulum-left { min-width:0; min-height:0; display:flex; flex-direction:column; gap:12px; }
.pendulum-visual-row { display:flex; gap:12px; flex:1; min-height:0; }
.pendulum-visual-row .visualization-panel { flex:1; min-width:0; }
.pendulum-charts-row { flex-shrink:0; }
.pendulum-right { display:flex; gap:12px; }
.pendulum-right .p-chart { flex:1; min-width:0; }
.p-chart { background:var(--panel); border:1px solid var(--surface); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; }
.p-chart-title { font-size:10px; color:var(--muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.p-chart canvas { width:100%; height:120px; display:block; }

/* Camera panel */
.camera-panel { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:12px; display:flex; flex-direction:column; gap:8px; flex:0 0 380px; min-width:0; }
.camera-header { display:flex; flex-direction:column; gap:6px; }
.camera-label { color:var(--accent); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.camera-controls { display:flex; gap:8px; align-items:center; }
.camera-select { flex:1; background:var(--bg); color:var(--fg); border:1px solid var(--surface); border-radius:5px; padding:6px 10px; font-size:12px; cursor:pointer; transition:border-color .2s; }
.camera-select:hover { border-color:var(--accent); }
.btn-camera { padding:6px 14px; font-size:12px; white-space:nowrap; }
.btn-camera.active { background:var(--red); color:var(--bg-alt); }
.btn-camera.active:hover { box-shadow:0 2px 10px rgba(243,139,168,.3); }
.camera-viewport { position:relative; flex:1; background:var(--bg); border-radius:6px; overflow:hidden; min-height:220px; display:flex; align-items:center; justify-content:center; }
#cameraFeed { width:100%; height:100%; object-fit:contain; display:block; }
.camera-off { position:absolute; color:var(--muted); font-size:13px; pointer-events:none; transition:opacity .3s; }
.camera-off.hidden { opacity:0; }

.stats-panel { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:10px 14px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.encoder-stat .stat-value { color:var(--peach); font-size:13px; }
.stat { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg); border-radius:6px; }
.stat-label { color:var(--muted); font-size:12px; }
.stat-value { color:var(--accent); font-size:16px; font-weight:700; font-family:'JetBrains Mono','Fira Code',monospace; }
.stat-unit { color:var(--overlay); font-size:11px; }

.graph-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.graph-card { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:14px; }
.graph-title { font-size:12px; color:var(--muted); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.graph-card canvas { width:100%; height:180px; display:block; }
.graph-controls { display:flex; gap:12px; align-items:center; }
.graph-toggle { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; cursor:pointer; }
.btn-export { background:var(--teal); color:var(--bg-alt); border:none; border-radius:6px; padding:8px 18px; cursor:pointer; font-size:14px; font-weight:600; transition:all .2s; }
.btn-export:hover { box-shadow:0 2px 10px rgba(148,226,213,.3); transform:translateY(-1px); }

.train-panel { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.train-config,.train-status { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:18px; }
.train-config h3,.train-status h3 { color:var(--accent); font-size:16px; margin-bottom:12px; }
.train-config .control-group { margin-bottom:10px; }
.progress-bar-container { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; margin-bottom:12px; }
.progress-bar { height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.train-log { background:var(--bg); color:var(--green); padding:10px; border-radius:6px; font-size:12px; font-family:'JetBrains Mono',monospace; height:150px; overflow-y:auto; margin-top:10px; line-height:1.5; }



.welcome-card { background:var(--panel); border:1px solid var(--surface); border-radius:var(--radius); padding:36px; text-align:center; }
.welcome-card h2 { color:var(--accent); font-size:22px; margin-bottom:16px; }
.welcome-card p { color:var(--muted); margin-bottom:10px; font-size:15px; line-height:1.5; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; max-width:500px; margin:20px auto 0; }
.feature-item { background:var(--surface); border-radius:8px; padding:14px; display:flex; align-items:center; gap:10px; font-size:14px; }
.feature-icon { font-size:20px; color:var(--accent); }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--overlay); }

@media(max-width:1000px) {
  .pendulum-visual-row { flex-direction:column; }
  .camera-panel { flex:0 0 auto; }
  .pendulum-right { flex-wrap:wrap; }
  .pendulum-right .p-chart { min-width:calc(50% - 6px); }
}
@media(max-width:900px) {
  .graph-grid,.train-panel { grid-template-columns:1fr; }
  .stats-panel { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .control-panel { flex-direction:column; align-items:stretch; }
  .serial-panel { flex-direction:column; align-items:stretch; }
  .button-group { margin-left:0; }
  .stats-panel { grid-template-columns:1fr; }
  .sidebar { width:56px; }
  .sidebar .nav-text { display:none; }
}