/* ============================================================================
   calc-me — main.css
   Layout, typography, spacing, responsive breakpoints, CRT ambient layers,
   button styles, display area, history panel, keypad panel, scrollbars,
   mobile function grid scrolling.
   All structural CSS. Glow/pulse/glitch animations live in glow.css.
   ========================================================================== */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Neon palette (strict six-neon on pure black) */
  --bg-black: #000000;
  --neon-green: #00FF00;
  --neon-cyan: #00FFFF;
  --neon-red: #FF0000;
  --neon-yellow: #FFFF00;
  --neon-magenta: #FF00FF;
  --neon-blue: #0000FF;
  --white: #FFFFFF;

  /* Surface tones (derived from black, not new colors) */
  --surface-0: #000000;
  --surface-1: #0a0a0a;
  --surface-2: #0c0c0c;
  --surface-3: #0e0e0e;
  --surface-4: #121212;
  --surface-5: #060606;
  --surface-6: #080808;
  --surface-7: #060a06;
  --surface-8: #040504;
  --surface-9: #060a06;
  --surface-10: #111111;

  /* Border tones */
  --border-green-dim: rgba(0, 255, 0, 0.12);
  --border-green-mid: rgba(0, 255, 0, 0.18);
  --border-green-faint: rgba(0, 255, 0, 0.06);
  --border-green-08: rgba(0, 255, 0, 0.08);
  --border-white-faint: rgba(255, 255, 255, 0.04);
  --border-white-06: rgba(255, 255, 255, 0.06);
  --border-blue-25: rgba(0, 0, 255, 0.25);
  --border-blue-40: rgba(0, 0, 255, 0.40);
  --border-yellow-15: rgba(255, 255, 0, 0.15);
  --border-yellow-25: rgba(255, 255, 0, 0.25);
  --border-red-15: rgba(255, 0, 0, 0.15);
  --border-red-25: rgba(255, 0, 0, 0.25);

  /* Typography */
  --font-mono: 'Courier New', 'Courier', 'Lucida Console', monospace;
  --fs-result-desktop: 42px;
  --fs-result-mobile: 32px;
  --fs-expr-desktop: 26px;
  --fs-expr-mobile: 20px;
  --fs-preview-desktop: 20px;
  --fs-preview-mobile: 16px;
  --fs-btn-desktop: 16px;
  --fs-btn-mobile: 15px;
  --fs-history-desktop: 14px;
  --fs-history-mobile: 13px;
  --fs-topbar: 14px;
  --fs-boot-desktop: 15px;
  --fs-boot-mobile: 13px;
  --fs-helper: 12px;

  /* Spacing system (base 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Corner radius */
  --r-bezel: 12px;
  --r-bezel-outer: 20px;
  --r-btn: 2px;
  --r-btn-3d: 5px;
  --r-panel: 4px;
  --r-panel-3d: 8px;
  --r-display: 4px;
  --r-display-3d: 8px;
  --r-keypad: 10px;

  /* Z-index layers */
  --z-content: 10;
  --z-vignette: 8998;
  --z-glass: 9000;
  --z-scanlines: 9001;
  --z-overlay: 9999;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  font-family: var(--font-mono);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface-1);
  color: var(--neon-green);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  box-shadow: inset 0 0 200px rgba(0, 255, 0, 0.02);
}

/* ── Screen-reader only ────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── CRT Bezel — physical monitor frame ────────────────────────────────── */
.crt-bezel {
  border-radius: var(--r-bezel-outer);
  border: 2px solid #1a1a1a;
  overflow: hidden;
  position: relative;
  background: var(--surface-0);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.9),
    inset 0 0 200px rgba(0, 0, 0, 0.4),
    0 0 0 6px #0c0c0c,
    0 0 0 10px #2a2a2a,
    0 0 0 13px #111,
    0 25px 80px rgba(0, 0, 0, 0.95),
    0 0 60px rgba(0, 255, 0, 0.04);
}

/* ── Glass sheen overlay ───────────────────────────────────────────────── */
.glass-sheen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.015) 15%,
    transparent 30%
  );
  pointer-events: none;
  z-index: var(--z-glass);
  border-radius: inherit;
}

/* ── CRT curvature vignette ────────────────────────────────────────────── */
.crt-curvature {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 115% 95% at center,
    transparent 60%,
    rgba(0, 0, 0, 0.25) 88%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: var(--z-vignette);
  border-radius: inherit;
}

/* ── Scanlines overlay ─────────────────────────────────────────────────── */
.scanlines::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.22) 5px,
    rgba(0, 0, 0, 0.22) 15px,
    rgba(0, 0, 0, 0) 20px,
    rgba(0, 0, 0, 0) 40px
  );
  pointer-events: none;
  z-index: var(--z-scanlines);
  animation: flicker 7s infinite, scanline-scroll-bezel 15s linear infinite;
}

@keyframes scanline-scroll-bezel {
  from { background-position-y: 0px; }
  to { background-position-y: 5px; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 1; }
  48% { opacity: 0.94; }
  49% { opacity: 1; }
  73% { opacity: 1; }
  74% { opacity: 0.97; }
  75% { opacity: 1; }
}

/* ── Global fixed CRT overlay (created by crt.js) ───────────────────────── */
.crt-scanlines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.22) 5px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0) 5px,
    rgba(0, 0, 0, 0) 10px
  );
  pointer-events: none;
  z-index: 9999;
  animation: scanline-scroll 45s linear infinite;
}

@keyframes scanline-scroll {
  from { background-position-y: 0px; }
  to { background-position-y: 100vh; }
}

/* Refresh roll — brighter bar that sweeps down the entire screen periodically */
.crt-refresh-roll {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    rgba(0, 255, 0, 0) 0%,
    rgba(0, 255, 0, 0.02) 30%,
    rgba(0, 255, 0, 0.06) 50%,
    rgba(0, 255, 0, 0.02) 70%,
    rgba(0, 255, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 9995;
  opacity: 0;
  animation: refresh-roll 8s linear infinite;
}

@keyframes refresh-roll {
  0% { transform: translateY(-120px); opacity: 0; }
  3% { opacity: 1; }
  12% { transform: translateY(100vh); opacity: 0; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.crt-flicker {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9998;
  background: rgba(0, 0, 0, 0);
  animation: ambient-flicker 6s infinite;
}

@keyframes ambient-flicker {
  0%, 100% { background: rgba(0, 0, 0, 0); }
  48% { background: rgba(0, 0, 0, 0.03); }
  49% { background: rgba(0, 0, 0, 0); }
  73% { background: rgba(0, 0, 0, 0.02); }
  74% { background: rgba(0, 0, 0, 0); }
}

.crt-vignette {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 9997;
}

/* ── Page container ────────────────────────────────────────────────────── */
.page-container {
  min-height: 100vh;
  padding: var(--sp-2);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 768px) {
  .page-container {
    padding: var(--sp-6);
  }
}

/* ── Inner content wrapper ─────────────────────────────────────────────── */
.app-content {
  position: relative;
  z-index: var(--z-content);
}

.crt-bezel-inner {
  padding: var(--sp-3);
  width: 100%;
  max-width: 72rem; /* 1152px */
}

@media (min-width: 768px) {
  .crt-bezel-inner {
    padding: var(--sp-5);
  }
}

/* ── Top Bar ───────────────────────────────────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.top-bar-title {
  font-size: var(--fs-result-desktop);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.top-bar-subtitle {
  font-size: var(--fs-helper);
  display: none;
}

@media (min-width: 640px) {
  .top-bar-subtitle {
    display: inline;
  }
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.top-bar-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* ── DEG/RAD toggle ────────────────────────────────────────────────────── */
.deg-rad-group {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* ── M badge ───────────────────────────────────────────────────────────── */
.m-badge {
  font-size: var(--fs-topbar);
  font-weight: 700;
  border-radius: var(--r-btn);
  padding: var(--sp-1) var(--sp-2);
  color: var(--white);
  text-shadow: 0 0 6px var(--neon-blue), 0 0 12px var(--neon-blue);
  border: 1px solid var(--border-blue-40);
  box-shadow: 0 0 8px rgba(0, 0, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-5) 100%);
}

.m-badge-hidden {
  display: none;
}

/* ── Main layout ───────────────────────────────────────────────────────── */
.main-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .main-layout {
    flex-direction: row;
  }
}

/* ── Left column (calculator) ───────────────────────────────────────────── */
.calc-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── Display Area — recessed ───────────────────────────────────────────── */
.display-area {
  background: linear-gradient(180deg,
    var(--surface-0) 0%,
    var(--surface-7) 50%,
    var(--surface-8) 100%
  );
  border: 1px solid var(--border-green-dim);
  border-top-color: rgba(0, 0, 0, 0.7);
  border-bottom-color: var(--border-green-mid);
  border-radius: var(--r-display-3d);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.8),
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 0 40px rgba(0, 255, 0, 0.04),
    inset 0 0 60px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  padding: var(--sp-4);
  min-height: 180px;
}

@media (min-width: 768px) {
  .display-area {
    padding: var(--sp-6);
  }
}

/* Display glass scanline overlay */
.display-area::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.15) 5px,
    rgba(0, 0, 0, 0.15) 15px,
    rgba(0, 0, 0, 0) 20px,
    rgba(0, 0, 0, 0) 40px
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.display-area > * {
  position: relative;
  z-index: 2;
}

/* Display sections */
.display-label {
  font-size: var(--fs-helper);
  opacity: 0.5;
  display: block;
  margin-bottom: var(--sp-1);
}

.display-label-white {
  font-size: var(--fs-helper);
  opacity: 0.4;
}

.display-expression-wrap {
  margin-bottom: var(--sp-2);
}

.display-expression {
  font-size: var(--fs-expr-desktop);
  font-weight: 400;
  word-break: break-all;
  line-height: 1.4;
  outline: none;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  caret-color: #00FF66;
}

.display-expression:focus {
  outline: none;
}

.display-preview-wrap {
  margin-bottom: var(--sp-3);
}

.display-preview {
  font-size: var(--fs-preview-desktop);
  font-weight: 400;
  font-style: italic;
  word-break: break-all;
  line-height: 1.3;
}

.display-divider {
  border-top: 1px solid var(--border-green-08);
  margin: var(--sp-3) 0;
}

.display-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.display-result {
  font-size: var(--fs-result-desktop);
  font-weight: 700;
  letter-spacing: 0.025em;
  word-break: break-all;
  line-height: 1.2;
}

/* Display error state */
.display-error {
  font-size: var(--fs-result-desktop);
  font-weight: 700;
  color: var(--neon-red);
  text-shadow: 0 0 6px var(--neon-red), 0 0 12px var(--neon-red);
  word-break: break-all;
}

.display-error-hint {
  font-size: var(--fs-helper);
  color: var(--neon-red);
  text-shadow: 0 0 4px var(--neon-red);
  opacity: 0.7;
  margin-top: var(--sp-1);
}

/* Scanline roll bar (triggered on =) */
.scan-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--neon-green);
  box-shadow: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  top: 0;
}

.scan-bar.scanning {
  animation: scan-roll 300ms linear forwards;
}

@keyframes scan-roll {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: 0.5; }
}

/* Graph canvas in display area */
.graph-canvas {
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-display);
  display: block;
}

.graph-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.graph-coord {
  font-size: var(--fs-helper);
  margin-left: auto;
  min-width: 120px;
  text-align: right;
}

.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-helper);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 2px;
  border-radius: 1px;
}

/* Matrix display formatting */
.matrix-display,
.vector-display {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: var(--fs-expr-desktop);
  color: var(--white);
  text-shadow: 0 0 6px var(--neon-blue), 0 0 12px var(--neon-blue);
  line-height: 1.5;
}

.vector-grid {
  display: inline-grid;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
}

.matrix-bracket {
  font-size: 1.5em;
  font-weight: 400;
  color: var(--white);
  text-shadow: 0 0 6px var(--neon-blue), 0 0 12px var(--neon-blue);
  display: inline-block;
  line-height: 1;
}

.matrix-bracket-left,
.matrix-bracket-right {
  font-size: 1.5em;
  font-weight: 400;
  color: var(--white);
  text-shadow: 0 0 6px var(--neon-blue), 0 0 12px var(--neon-blue);
  display: inline-block;
  line-height: 1;
}

.matrix-grid {
  display: inline-grid;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
}

.matrix-cell {
  text-align: right;
  color: var(--white);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

/* CAS display formatting */
.cas-display {
  font-size: var(--fs-expr-desktop);
  color: var(--white);
  text-shadow: 0 0 6px var(--neon-magenta), 0 0 12px var(--neon-magenta);
  line-height: 1.6;
}

/* CAS math formatting classes (used by formatting.js) */
.math-var {
  color: var(--white);
  text-shadow: 0 0 4px var(--neon-magenta), 0 0 8px var(--neon-magenta);
  font-style: italic;
}

.math-num {
  color: var(--white);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

.math-sup {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

.math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  font-size: 0.85em;
  margin: 0 2px;
}

.math-frac .num {
  border-bottom: 1px solid currentColor;
  padding: 0 4px;
  line-height: 1.2;
}

.math-frac .den {
  padding: 0 4px;
  line-height: 1.2;
}

.math-sqrt {
  display: inline-flex;
  align-items: baseline;
}

.math-overline {
  border-top: 1px solid currentColor;
  padding: 0 2px;
}

/* Legacy CAS class names (kept for compatibility) */
.cas-display sup {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

.cas-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  font-size: 0.85em;
  margin: 0 2px;
}

.cas-frac-num {
  border-bottom: 1px solid currentColor;
  padding: 0 4px;
  line-height: 1.2;
}

.cas-frac-den {
  padding: 0 4px;
  line-height: 1.2;
}

.cas-radical {
  display: inline-flex;
  align-items: baseline;
}

.cas-radical-symbol {
  font-size: 1.1em;
}

.cas-radical-overline {
  border-top: 1px solid currentColor;
  padding: 0 2px;
}

/* ── Ambient spill — glow from display bleeding onto button area ──────── */
.ambient-spill {
  position: relative;
}

.ambient-spill::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 10%;
  right: 10%;
  height: 30px;
  background: radial-gradient(ellipse at center top,
    rgba(0, 255, 0, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Key Pad Panel — raised surface for buttons ────────────────────────── */
.keypad-panel {
  background: linear-gradient(180deg,
    var(--surface-2) 0%,
    var(--surface-6) 50%,
    var(--surface-1) 100%
  );
  border: 1px solid var(--border-white-faint);
  border-top-color: var(--border-white-06);
  border-bottom-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--r-keypad);
  padding: var(--sp-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── Collapsible Scientific Panel ──────────────────────────────────────── */
.sci-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}

.sci-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: linear-gradient(180deg, var(--surface-10) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border-green-dim);
  border-radius: var(--r-btn);
  padding: var(--sp-1) var(--sp-4);
  color: var(--neon-green);
  text-shadow: 0 0 4px var(--neon-green), 0 0 8px var(--neon-green);
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sci-toggle-btn:hover {
  border-color: var(--neon-green);
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sci-toggle-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.sci-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
  opacity: 0.7;
}

.sci-toggle-arrow-expanded {
  transform: rotate(180deg);
}

.sci-panel {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  max-height: 500px;
  opacity: 1;
}

.sci-panel-collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ── Button grids ──────────────────────────────────────────────────────── */
.btn-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.function-grid-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 0, 0.3) transparent;
}

.function-grid-container .btn-grid-6 {
  min-width: 480px;
}

/* Mobile: let all 6 columns fit the screen — no horizontal scroll */
@media (max-width: 767px) {
  .function-grid-container {
    overflow-x: visible;
  }

  .function-grid-container .btn-grid-6 {
    min-width: 0;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
  }

  .function-grid-container .calc-btn {
    font-size: 11px;
    min-height: 36px;
    padding: 4px 1px;
    line-height: 1.1;
  }
}

/* ── Calculator Button (3D physical key) ──────────────────────────────── */
.calc-btn {
  background: linear-gradient(180deg,
    var(--surface-4) 0%,
    var(--surface-1) 45%,
    var(--surface-5) 55%,
    var(--surface-3) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--r-btn-3d);
  padding: 10px 4px;
  text-align: center;
  font-size: var(--fs-btn-desktop);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  min-height: 44px;
  user-select: none;
  position: relative;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  line-height: 1.2;
  filter: brightness(1.15);
}

.calc-btn:hover {
  border-color: currentColor;
  border-top-color: currentColor;
  box-shadow:
    0 0 16px currentColor,
    0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 16px rgba(255, 255, 255, 0.04);
  filter: brightness(1.5);
}

.calc-btn:active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.9),
    inset 0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 6px currentColor;
  filter: brightness(1.6);
}

.calc-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  box-shadow: 0 0 10px currentColor;
}

.calc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* Number pad buttons — slightly larger */
.numpad-btn {
  font-size: 18px;
}

/* Equals button — special highlight */
.equals-btn {
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 8px var(--neon-cyan),
    0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg,
    rgba(0, 255, 255, 0.08) 0%,
    var(--surface-1) 50%,
    rgba(0, 255, 255, 0.03) 100%
  );
  font-weight: 700;
}

/* ── Toggle Button (raised pill) ───────────────────────────────────────── */
.toggle-btn {
  border: 1px solid;
  border-radius: var(--r-btn);
  padding: var(--sp-1) var(--sp-3);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  background: linear-gradient(180deg, var(--surface-10) 0%, var(--surface-1) 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.toggle-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.toggle-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  box-shadow: 0 0 10px currentColor;
}

/* DEG/RAD active state */
.toggle-btn-active {
  border-color: var(--neon-yellow);
  background: linear-gradient(180deg,
    rgba(255, 255, 0, 0.12) 0%,
    rgba(255, 255, 0, 0.04) 100%
  );
  box-shadow:
    0 0 8px rgba(255, 255, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.toggle-btn-inactive {
  border-color: var(--border-yellow-15);
  color: rgba(255, 255, 0, 0.25);
}

/* 2nd key active state */
.second-active {
  border-color: var(--neon-red);
  background: linear-gradient(180deg,
    rgba(255, 0, 0, 0.12) 0%,
    rgba(255, 0, 0, 0.04) 100%
  );
  box-shadow:
    0 0 8px rgba(255, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Mute button states */
.mute-on {
  border-color: var(--neon-green);
  color: var(--neon-green);
  text-shadow: 0 0 6px var(--neon-green);
}

.mute-off {
  border-color: var(--border-red-15);
  color: var(--neon-red);
  text-shadow: 0 0 6px var(--neon-red);
  text-decoration: line-through;
}

/* ── RGB split on button press (triggered class) ──────────────────────── */
.calc-btn.rgb-split-active {
  position: relative;
}

.calc-btn.rgb-split-active::before,
.calc-btn.rgb-split-active::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0.8;
}

.calc-btn.rgb-split-active::before {
  color: var(--neon-red);
  text-shadow: 0 0 4px var(--neon-red);
  transform: translate(-2px, -50%);
  animation: rgb-split-left 80ms ease-out forwards;
}

.calc-btn.rgb-split-active::after {
  color: var(--neon-cyan);
  text-shadow: 0 0 4px var(--neon-cyan);
  transform: translate(2px, -50%);
  animation: rgb-split-right 80ms ease-out forwards;
}

@keyframes rgb-split-left {
  0% { transform: translate(0, -50%); opacity: 0; }
  30% { transform: translate(-3px, -50%); opacity: 0.9; }
  100% { transform: translate(0, -50%); opacity: 0; }
}

@keyframes rgb-split-right {
  0% { transform: translate(0, -50%); opacity: 0; }
  30% { transform: translate(3px, -50%); opacity: 0.9; }
  100% { transform: translate(0, -50%); opacity: 0; }
}

/* ── History Panel — raised ───────────────────────────────────────────── */
.history-panel {
  background: linear-gradient(180deg,
    var(--surface-9) 0%,
    var(--surface-0) 40%,
    var(--surface-8) 100%
  );
  border: 1px solid rgba(0, 255, 0, 0.1);
  border-top-color: var(--border-green-mid);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-radius: var(--r-panel-3d);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 var(--border-green-06);
  position: relative;
  display: flex;
  flex-direction: column;
}

.history-aside {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .history-aside {
    width: 320px;
  }

  .history-panel {
    max-height: 700px;
  }
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(0, 255, 0, 0.12);
}

.history-title {
  font-size: var(--fs-history-desktop);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.history-clear-btn {
  font-size: var(--fs-helper);
  cursor: pointer;
  background: none;
  border: none;
  transition: filter 0.15s;
}

.history-clear-btn:hover {
  filter: brightness(1.5);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  max-height: 600px;
}

@media (min-width: 1024px) {
  .history-list {
    max-height: 650px;
  }
}

.history-empty {
  padding: var(--sp-6);
  text-align: center;
  font-size: var(--fs-helper);
  opacity: 0.4;
}

/* ── History entry ─────────────────────────────────────────────────────── */
.history-entry {
  border-bottom: 1px solid var(--border-green-08);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.history-entry:hover {
  background: linear-gradient(90deg,
    rgba(0, 255, 0, 0.04) 0%,
    rgba(0, 255, 0, 0.08) 50%,
    rgba(0, 255, 0, 0.02) 100%
  );
  box-shadow: inset 0 0 12px rgba(0, 255, 0, 0.1), inset 2px 0 0 var(--neon-green);
}

.history-entry:focus-visible {
  outline: 2px solid var(--neon-green);
  outline-offset: -2px;
  box-shadow: 0 0 10px var(--neon-green);
}

.history-entry-expr {
  font-size: var(--fs-history-desktop);
  word-break: break-all;
  line-height: 1.3;
}

.history-entry-result {
  font-size: var(--fs-history-desktop);
  font-weight: 700;
  margin-top: var(--sp-1);
  word-break: break-all;
  line-height: 1.3;
}

.history-entry-domain {
  font-size: 10px;
  opacity: 0.4;
  margin-top: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.history-delete-btn {
  opacity: 0;
  transition: opacity 0.15s;
  position: absolute;
  right: var(--sp-2);
  top: var(--sp-2);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-helper);
  padding: var(--sp-1);
  line-height: 1;
}

.history-entry:hover .history-delete-btn {
  opacity: 1;
}

.history-delete-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--neon-red);
  outline-offset: 1px;
}

.history-entry-deleting {
  animation: history-fade-out 0.3s ease forwards;
}

@keyframes history-fade-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

/* ── Section ridge (panel dividers) ────────────────────────────────────── */
.section-ridge {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
  border-top: 1px solid var(--border-green-faint);
  border-bottom: 1px solid var(--border-white-faint);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.app-footer {
  margin-top: var(--sp-4);
  text-align: center;
  padding: var(--sp-2) 0;
}

.footer-text {
  font-size: 14px;
  opacity: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 4px var(--neon-green), 0 0 8px var(--neon-green), 0 0 16px rgba(0, 255, 0, 0.4);
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track {
  background: rgba(0, 255, 0, 0.03);
  border-radius: 3px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 0, 0.25);
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
}

.function-grid-container::-webkit-scrollbar { height: 4px; }
.function-grid-container::-webkit-scrollbar-track {
  background: rgba(0, 255, 0, 0.03);
}
.function-grid-container::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 0, 0.25);
  border-radius: 2px;
}

/* ── Pre-Boot Screen ─────────────────────────────────────────────────── */
.pre-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-0);
  animation: pre-boot-fade-in 0.5s ease-in forwards;
}

.pre-boot-screen.fade-out {
  animation: pre-boot-fade-out 0.4s ease-out forwards;
}

@keyframes pre-boot-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pre-boot-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.pre-boot-content {
  text-align: center;
  padding: var(--sp-6);
}

.pre-boot-title {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: var(--sp-2);
}

.pre-boot-subtitle {
  font-size: 0.875rem;
  margin-bottom: var(--sp-8);
  opacity: 0.7;
}

.pre-boot-btn {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: var(--sp-4) var(--sp-8);
  background: var(--surface-1);
  border: 2px solid var(--neon-green);
  border-radius: var(--r-btn);
  cursor: pointer;
  text-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
  box-shadow:
    0 0 20px rgba(0, 255, 0, 0.15),
    0 0 40px rgba(0, 255, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.15s ease;
  animation: pre-boot-btn-pulse 2s ease-in-out infinite;
}

@keyframes pre-boot-btn-pulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0, 255, 0, 0.15),
      0 0 40px rgba(0, 255, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 0 30px rgba(0, 255, 0, 0.3),
      0 0 60px rgba(0, 255, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

.pre-boot-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.3);
}

.pre-boot-btn:active {
  transform: scale(0.98);
  box-shadow:
    0 0 10px rgba(0, 255, 0, 0.4),
    inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.pre-boot-btn-text {
  display: inline-block;
}

.pre-boot-hint {
  margin-top: var(--sp-3);
}

/* ── Boot Screen ───────────────────────────────────────────────────────── */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--surface-1);
}

.boot-terminal {
  animation: boot-fade-in 0.5s forwards;
}

.boot-terminal.transitioning {
  animation: boot-fade-out 1.2s forwards;
}

@keyframes boot-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes boot-fade-out {
  from { opacity: 1; filter: brightness(1); }
  30% { filter: brightness(2); }
  100% { opacity: 0; filter: brightness(0.5) blur(4px); }
}

.boot-terminal {
  position: absolute;
  inset: 0;
  padding: var(--sp-4);
  overflow: hidden;
  font-size: var(--fs-boot-desktop);
  line-height: 1.6;
}

.terminal-line {
  opacity: 1;
  white-space: pre-wrap;
  word-break: break-all;
}

.terminal-cursor {
  display: inline-block;
  animation: cursor-blink 0.8s step-end infinite;
  margin-left: 1px;
}

.boot-skip-hint {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  z-index: 50;
  font-size: var(--fs-helper);
  animation: skip-pulse 2s ease-in-out infinite;
}

@keyframes skip-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.boot-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.phosphor-warmup {
  animation: phosphor 2s ease-in forwards;
}

@keyframes phosphor {
  0% { opacity: 0; filter: brightness(0); }
  20% { opacity: 0.3; filter: brightness(0.2); }
  50% { opacity: 0.6; filter: brightness(0.5); }
  100% { opacity: 1; filter: brightness(1); }
}

.boot-transition-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface-0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
}

/* ── Calculator UI (hidden during boot) ───────────────────────────────── */
.calculator-ui {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.calculator-ui.visible {
  opacity: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Mobile (<768px) */
@media (max-width: 767px) {
  .top-bar-title {
    font-size: var(--fs-result-mobile);
  }

  .display-expression {
    font-size: var(--fs-expr-mobile);
  }

  .display-preview {
    font-size: var(--fs-preview-mobile);
  }

  .display-result {
    font-size: var(--fs-result-mobile);
  }

  .display-error {
    font-size: var(--fs-result-mobile);
  }

  .calc-btn {
    font-size: var(--fs-btn-mobile);
    min-height: 40px;
    padding: 6px 2px;
  }

  .numpad-btn {
    font-size: 16px;
  }

  .history-entry-expr {
    font-size: var(--fs-history-mobile);
  }

  .history-entry-result {
    font-size: var(--fs-history-mobile);
  }

  .boot-terminal {
    font-size: var(--fs-boot-mobile);
  }

  .display-area {
    min-height: 140px;
    padding: var(--sp-3);
  }

  /* History becomes slide-up drawer on mobile */
  .history-aside {
    order: 3;
  }

  .history-panel {
    max-height: 250px;
  }

  .history-list {
    max-height: 200px;
  }
}

/* Tablet (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .history-aside {
    order: 3;
    width: 100%;
  }

  .history-panel {
    max-height: 350px;
  }

  .history-list {
    max-height: 300px;
  }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .calc-column {
    min-width: 0;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scanlines::before {
    display: block;
    opacity: 0.5;
    animation: none;
  }

  .crt-scanlines {
    opacity: 0.5;
    animation: none;
  }

  .crt-refresh-roll {
    display: none;
  }

  .crt-flicker {
    display: none;
  }

  .scan-bar {
    display: none;
  }

  /* Screen tear: disabled */
  .screen-tear-overlay {
    display: none !important;
  }

  .pre-boot-btn {
    animation: none !important;
  }

  .terminal-line {
    opacity: 1 !important;
  }
}