/* ═══════════════════════════════════════════════
   READCRAFT — CSS Variables & Base Styles
   ═══════════════════════════════════════════════ */
:root {
  --bg:    #080b09;
  --bg1:   #0d120e;
  --bg2:   #121a13;
  --bg3:   #172019;
  --bg4:   #1e2b1f;
  --bg5:   #263328;
  --border:#1e3020;
  --border2:#2a4030;
  --green: #3ddc84;
  --green2:#5aef9a;
  --green3:#1a6636;
  --green4:rgba(61,220,132,0.08);
  --dim:   #4a7a58;
  --dimmer:#2a4a34;
  --text:  #d4f0dc;
  --text2: #7aaa88;
  --text3: #4a7058;
  --text4: #2a4a38;
  --amber: #f5c842;
  --red:   #ff5f6d;
  --blue:  #5bc8f5;
  --shadow:0 4px 24px rgba(0,0,0,0.6);
  --glow:  0 0 20px rgba(61,220,132,0.12);
  --r:     6px;
  --r2:    10px;
  --font:  'IBM Plex Sans', sans-serif;
  --mono:  'IBM Plex Mono', monospace;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; overflow-x: hidden; }

::selection { background: rgba(61,220,132,0.25); color: var(--green2); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ═══ SCANLINE effect ═══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-panel { animation: fadeSlideIn 0.3s ease; }