/* Shared design system loaded via shared.css */

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 { color: #64b5f6; }
        .container {
            background-color: #1e1e1e;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            max-width: 950px;
            width: 100%;
        }
        .controls {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            background-color: #2c2c2c;
            padding: 15px;
            border-radius: 8px;
        }
        .control-group {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        label { margin-bottom: 8px; color: #81c784; font-weight: bold; }
        input[type="range"] { width: 100%; cursor: pointer; }
        .canvases {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .canvas-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        canvas {
            background-color: #000000;
            border: 1px solid #424242;
            border-radius: 8px;
        }
        .title { margin-top: 10px; font-weight: bold; color: #ffb74d; }
        #readout {
            margin-top: 20px;
            padding: 15px;
            background-color: #2c2c2c;
            border-radius: 8px;
            font-family: monospace;
            font-size: 16px;
            color: #fff;
            line-height: 1.5;
        }
        .highlight { color: #ff4081; font-weight: bold; }




/* Ensure the body allows absolute positioning */



/* ================================================================
   DESIGN SYSTEM OVERRIDE — Applied via shared.css variables
   These overrides unify all pages to the shared dark-lab aesthetic
   ================================================================ */

/* Reset old colors to use CSS variables from shared.css */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  padding-top: 72px !important;
}

h1, h2, h3 {
  font-family: var(--font-mono) !important;
}

h1 { color: var(--text-primary) !important; }
h2 { color: var(--cyan) !important; }

/* Panel backgrounds */
.controls-panel, .panel, .dashboard > *, .grid-container > *,
.info-panel, .visualizer-panel, aside, section.panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-panel) !important;
  color: var(--text-primary) !important;
}

.panel-header, header.panel-header {
  background: var(--panel-2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
}

/* Inputs */
input[type="text"], input[type="number"], select, textarea {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

label {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Buttons */
button {
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

/* Canvas containers */
.canvas-container, .canvas-wrapper {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* Metrics / data boxes */
.metrics-box, .data-box, .explanation-panel,
.instruction-box, .dynamic-explanation {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

/* Highlights */
.highlight, .highlight-k { color: var(--amber) !important; }
span[style*="color: #89b4fa"], .text-blue { color: var(--cyan) !important; }

/* Subtitles */
.subtitle, .page-subtitle, p.subtitle {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
}

/* Fix dashboard flex → still works but adds top padding spacing */
.dashboard {
  padding-top: 8px;
}

/* ── SCROLL & HOME-BTN FIX ── */
body {
  padding: 72px 20px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}
h1 { color: var(--cyan) !important; font-family: var(--font-mono) !important; }
.container {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}
.controls {
  background: var(--panel-2) !important;
  border-radius: var(--radius-md) !important;
}
canvas { max-width: 100% !important; border-radius: var(--radius-md) !important; }
label { color: var(--text-secondary) !important; font-family: var(--font-mono) !important; }
#readout {
  background: var(--panel-2) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
@media (max-width: 700px) {
  .controls { flex-direction: column !important; }
  .canvases { flex-direction: column !important; }
  canvas { width: 100% !important; height: auto !important; }
}