:root{
  --bg: #0b0f14;
  --panel: #121822;
  --text: #d9e2f1;
  --muted: #9bb0ce;
  --accent: #7aa2ff;
  --accent-2: #6be3cf;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 10% -10%, #0f1a2b 0%, var(--bg) 40%),
              radial-gradient(1000px 700px at 110% 110%, #0f1a2b 0%, var(--bg) 40%);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 18px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(18,24,34,.75), rgba(18,24,34,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top:0; z-index:10;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand .dot{
  width:14px; height:14px; border-radius:50%;
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px rgba(122,162,255,.6);
}
.brand h1{ margin:0; font-size:18px; letter-spacing:.2px; }
.brand .subtitle{ color: var(--muted); font-size:12px; margin-left:6px; }

.actions{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }

.btn{
  padding:9px 12px; border-radius:12px; border:1px solid rgba(122,162,255,.35);
  background: linear-gradient(180deg, rgba(122,162,255,.20), rgba(122,162,255,.08));
  color:#e9f0ff; cursor:pointer; box-shadow: var(--shadow);
}
.btn:hover{ filter: brightness(1.08); }

.switch{ display:inline-flex; align-items:center; gap:8px; }
.switch input{ display:none; }
.switch .slider{
  width:44px; height:24px; border-radius:24px; position:relative; background: #263045; border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}
.switch .slider::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background: #cfe0ff; transition: transform .2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.switch input:checked + .slider{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.switch input:checked + .slider::after{ transform: translateX(20px); }
.switch .switch-label{ font-size:12px; color: var(--muted); }

.select-wrap{ display:flex; align-items:center; gap:6px; }
.select-wrap label{ font-size:12px; color: var(--muted); }
.select{
  padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background: #0f1520; color: var(--text);
}

.layout{
  display:grid; grid-template-columns: 320px 1fr; gap:16px;
  padding:16px; min-height: calc(100% - 68px);
}

.panel{
  background: linear-gradient(180deg, rgba(18,24,34,.85), rgba(15,21,32,.85));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
.panel h2{ margin:0 0 10px; font-size:16px; letter-spacing:.2px; }

.controls .control{ margin:12px 0; }
.controls label{ display:block; font-size:13px; color: var(--muted); margin-bottom:6px; }
.controls input[type="range"]{ width:100%; }
.controls .checkbox{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.controls .val{ font-size:12px; color: var(--text); margin-top:4px; opacity:.8; }
.controls .small{ opacity:.7; font-size:11px; }
.controls .aniso-group{ opacity:.7; transition: opacity .2s ease; }
.controls .aniso-group.enabled{ opacity:1; }

.help{
  margin-top:16px; padding:12px; border-radius:12px;
  background: linear-gradient(180deg, rgba(23,32,52,.6), rgba(23,32,52,.35));
  border:1px solid rgba(122,162,255,.2);
}
.help h3{ margin:0 0 8px; font-size:14px; }
.help ul{ margin:0 0 6px 18px; padding:0; }

.stage{
  position:relative; overflow:hidden;
  background: radial-gradient(800px 600px at 50% 20%, rgba(122,162,255,.08), transparent),
              linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 72vh; /* large canvas */
}
#canvas{ width:100%; height:100%; display:block; }

.hud{ position:absolute; left:16px; bottom:16px; display:flex; align-items: flex-end; gap:12px; pointer-events:none; }
.card{
  background: rgba(15,21,32,.7); backdrop-filter: blur(8px); border-radius: 14px;
  border:1px solid rgba(255,255,255,.08); padding:10px 12px; pointer-events:auto;
}
.metric{ display:flex; gap:8px; align-items:center; font-size:14px; }
.metric .label{ color: var(--muted); }
.metric .value{ font-variant-numeric: tabular-nums; }

/* START: DEBUG PANEL STYLES */
.debug-panel {
  border-color: rgba(255, 165, 0, 0.4);
  opacity: 0.8;
}
.debug-panel .metric {
  font-size: 11px;
}
/* END: DEBUG PANEL STYLES */

.footer{
  padding:10px 16px; color: var(--muted); text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
}

@media (max-width: 1200px){
  .layout{ grid-template-columns: 1fr; grid-auto-rows: auto; }
}