@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --cyan:   #00f5ff;
  --blue:   #0080ff;
  --green:  #00ff88;
  --orange: #ffaa00;
  --red:    #ff4444;
  --pink:   #ff69b4;
  --purple: #aa88ff;
  --bg:     #000810;
  --panel:  rgba(0,18,30,0.92);
  --border: rgba(0,245,255,0.18);
  --glow:   0 0 12px rgba(0,245,255,0.3);
  --glow-s: 0 0 20px rgba(0,245,255,0.9), 0 0 60px rgba(0,245,255,0.25);
  --xs: clamp(0.62rem, 0.85vw, 0.82rem);
  --sm: clamp(0.78rem, 1.05vw, 1rem);
  --md: clamp(1rem,   1.35vw, 1.25rem);
  --lg: clamp(1.3rem, 1.9vw,  1.9rem);
  --xl: clamp(1.4rem, 2.2vw,  2.4rem);
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--cyan); font-family:'Share Tech Mono',monospace; }

/* Tiefe: sanfte Farbnebel + Vignette statt flachem Schwarz */
body {
  background:
    radial-gradient(120vw 80vh at 50% -20%, rgba(0,90,140,.16), transparent 60%),
    radial-gradient(70vw 60vh at 88% 112%, rgba(90,40,160,.10), transparent 65%),
    radial-gradient(60vw 50vh at 5% 108%, rgba(0,120,140,.08), transparent 60%),
    var(--bg);
}

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(rgba(0,245,255,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(0,245,255,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.9) 30%, transparent 90%);
          mask-image: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.9) 30%, transparent 90%);
}

/* Neon-Scrollbars */
* { scrollbar-width:thin; scrollbar-color:rgba(0,245,255,.25) transparent; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(0,245,255,.18); border-radius:3px; }
*::-webkit-scrollbar-thumb:hover { background:rgba(0,245,255,.4); }
*::-webkit-scrollbar-corner { background:transparent; }

::selection { background:rgba(0,245,255,.28); color:#eaffff; }

:focus-visible { outline:1px solid rgba(0,245,255,.55); outline-offset:2px; }
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.03) 3px,rgba(0,0,0,0.04) 6px);
}

/* ═══ LAYOUT ═══ */
.wrap {
  position:relative; z-index:1;
  width:100vw; height:100vh;
  display:grid;
  grid-template-rows: auto auto 1.8fr 1fr;
  gap:8px; padding:8px;
}

/* DIVIDER */
.div { height:1px; background:linear-gradient(90deg,transparent,var(--border) 15%,var(--border) 85%,transparent); margin:6px 0; flex-shrink:0; }

/* flicker */
@keyframes flicker { 0%{opacity:0} 8%{opacity:.9} 11%{opacity:.2} 14%{opacity:1} }
.wrap { animation:flicker .35s ease-in; }

/* ═══ TV/KIOSK MODE ═══ */