/* ================================================================
   W3M Pro — Base CSS
   Változók, reset, téma
   ================================================================ */

/* DARK TÉMA (alapértelmezett) */
:root {
  --bg:      #080c10;
  --surface: #0d1117;
  --s2:      #111820;
  --border:  #1e2d3d;
  --accent:  #00d4ff;
  --accent2: #00e87a;
  --danger:  #ff3860;
  --warn:    #ffb300;
  --text:    #dce8f5;
  --muted:   #7a9ab0;
  --success: #00e87a;
  --purple:  #7c3aed;
  --mono:    'Space Mono', monospace;
  --head:    'Rajdhani', sans-serif;
}

/* LIGHT TÉMA */
[data-theme="light"] {
  --bg:      #f0f4f8;
  --surface: #ffffff;
  --s2:      #e8eef4;
  --border:  #c8d6e4;
  --accent:  #0066cc;
  --accent2: #008844;
  --danger:  #cc2244;
  --warn:    #cc7700;
  --text:    #1a2a3a;
  --muted:   #5a7a8a;
}
[data-theme="light"] body::before { background-image: none; }
[data-theme="light"] body::after  { display: none; }

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* BODY */
body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--mono);
  font-size:   12px;
  min-height:  100vh;
  overflow-x:  hidden;
}

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

/* GRID HÁTTÉR */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* UTILS */
.hidden  { display: none !important; }
.flex    { display: flex; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.gap-6   { gap: 6px; }
.gap-8   { gap: 8px; }
.gap-10  { gap: 10px; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mb-8  { margin-bottom: 8px; }

@media(max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}