:root {
  --sky: #bfe3ff;

  /* Panel */
  --panel-w: clamp(220px, 35vw, 280px);
  --panel-bg: rgba(255,255,255,0.86);
  --panel-border: #e5e7eb;
  --panel-shadow: 0 0 0 1px rgba(15,23,42,.03), 0 8px 24px rgba(15,23,42,.08);

  /* Typography & accent */
  --text: #0b1221;
  --muted: #64748b;
  --accent: #2563eb;

  /* Surface colors (match app.js) */
  --rudder:   #ff991c; /* light orange */
  --elevator: #01c5d6; /* cyan */
  --aileron:  #8000ff; /* purple */

  /* Slider track */
  --track: #e5e7eb;
  --thumb: #2563eb;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--sky);
}

/* ============ Layout ============ */
/* Canvas lives to the right of the fixed panel */
#app {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: var(--panel-w);
}

/* Frosted panel */
.ui-panel {
  position: fixed;
  top: 0; left: 0;
  width: var(--panel-w);
  height: 100%;
  padding: 16px 18px 20px;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: var(--panel-shadow);
  display: flex; flex-direction: column; gap: 12px;
  z-index: 10;
}

.ui-panel h1 { margin: 2px 0 10px; font-size: 20px; font-weight: 800; letter-spacing: .1px; }
.ui-panel label { font-size: 13px; font-weight: 600; margin-top: 10px; }

/* Colored dots before labels to match surfaces */
.ui-panel label[for="rudder"]::before,
.ui-panel label[for="elevator"]::before,
.ui-panel label[for="aileron"]::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  margin-right: 8px; transform: translateY(-1px);
  box-shadow: 0 0 0 2px #fff inset;
}
.ui-panel label[for="rudder"]::before   { background: var(--rudder); }
.ui-panel label[for="elevator"]::before { background: var(--elevator); }
.ui-panel label[for="aileron"]::before  { background: var(--aileron); }

/* ============ Sliders ============ */
.ui-panel input[type="range"] {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--track);
  outline: none;
  margin-top: 6px;
}

/* track */
.ui-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--track);
}
.ui-panel input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--track);
}

/* thumb (default accent) */
.ui-panel input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--thumb);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  margin-top: -6px; /* centers on 6px track in WebKit */
}
.ui-panel input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--thumb);
  border: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.ui-panel input[type="range"]:hover::-webkit-slider-thumb,
.ui-panel input[type="range"]:hover::-moz-range-thumb { transform: scale(1.06); }
.ui-panel input[type="range"]:focus-visible::-webkit-slider-thumb,
.ui-panel input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(37,99,235,.22);
}

/* Per-surface thumb colors */
#rudder::-webkit-slider-thumb   { background: var(--rudder); }
#rudder::-moz-range-thumb       { background: var(--rudder); }
#elevator::-webkit-slider-thumb { background: var(--elevator); }
#elevator::-moz-range-thumb     { background: var(--elevator); }
#aileron::-webkit-slider-thumb  { background: var(--aileron); }
#aileron::-moz-range-thumb      { background: var(--aileron); }

/* Locked/tinted sliders (preset mode) */
.ui-panel input[type="range"].is-locked {
  filter: grayscale(1);
  opacity: .6;
  cursor: not-allowed;
}
.ui-panel input[type="range"].is-locked::-webkit-slider-thumb,
.ui-panel input[type="range"].is-locked::-moz-range-thumb {
  background: #cbd5e1;
  cursor: not-allowed;
}
.ui-panel label.locked { color: #94a3b8; }

.value { font-size: 12px; color: #475569; margin-top: -2px; }
.hint  { margin-top: auto; font-size: 12px; color: var(--muted); }

/* ============ Preset radios ============ */
.preset-group {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px;
  background: #f8fafc99;
}
.preset-group legend { font-size: 13px; font-weight: 700; padding: 0 6px; color: #0b1221; }
.preset-group label {
  display: block;
  font-weight: 500;
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background-color .12s ease, border-color .12s ease;
}
.preset-group label:hover { background: #f1f5f9; }

/* Highlight selected radio (uses :has for modern browsers; degrades gracefully) */
.preset-group label:has(input:checked) {
  background: #e8f0ff;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* (No mobile stacking rule) – the panel always stays fixed on the left,
   even inside an iframe, to match the standalone layout. */