/* ═══════════════════════════════════════════════════
   SIGNALPULSE — main.css  v2
   Tokens · Reset · Shared utilities
═══════════════════════════════════════════════════ */

:root {
  /* Base palette — deep navy */
  --bg:          #030810;
  --bg1:         #050d1a;
  --bg2:         #071220;
  --bg3:         #091628;
  --bg4:         #0d1d34;

  /* Borders */
  --border:      rgba(45,180,255,0.08);
  --border2:     rgba(45,180,255,0.15);
  --border3:     rgba(45,180,255,0.25);

  /* Accent — cool electric blue */
  --accent:      #38bdf8;
  --accent-lo:   #0ea5e9;
  --accent-hi:   #7dd3fc;
  --accent-dim:  rgba(56,189,248,0.1);
  --accent-glow: rgba(56,189,248,0.28);
  --accent-grad: linear-gradient(135deg, #0ea5e9, #38bdf8, #7dd3fc);

  /* Semantic */
  --green:       #22c55e;
  --red:         #ef4444;
  --amber:       #f59e0b;
  --blue:        #3b82f6;

  /* Platform brand */
  --bluesky:     #0085ff;
  --reddit:      #ff4500;
  --youtube:     #ff0000;

  /* Text — crisp and readable */
  --text:        #f2f8ff;
  --sub:         #6090b8;
  --dim:         #1a2840;

  /* Radii */
  --r:    14px;
  --rs:   8px;
  --rxs:  5px;

  /* Fonts */
  --fh: 'Syne', sans-serif;
  --fb: 'Syne', sans-serif;
  --fm: 'JetBrains Mono', monospace;
}

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

html, body {
  height: 100%; width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fh);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }

/* ── SCREENS ── */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; z-index: 10; }
.screen.active { display: flex; }

/* ── ANIMATED NOISE MESH BG ── */
.noise-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.noise-bg svg { width: 100%; height: 100%; }

/* ── SCANLINE OVERLAY ── */
.scanline {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  animation: scanShift 8s linear infinite;
}
@keyframes scanShift { from { background-position: 0 0; } to { background-position: 0 100%; } }

/* ── INPUTS ── */
.inp {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--rs);
  color: var(--text);
  font-family: var(--fm);
  font-size: 13px;
  padding: 10px 13px;
  outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
  letter-spacing: 0.03em;
}
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.inp::placeholder { color: var(--sub); }
select.inp { cursor: pointer; }

/* ── BUTTONS ── */
.btn {
  position: relative; overflow: hidden;
  border: none; border-radius: var(--rs); cursor: pointer;
  font-family: var(--fh); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 9px 16px; transition: all .18s;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
/* Shimmer on hover */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.btn:hover::after { transform: translateX(100%); }

.btn-accent  { background: var(--accent-grad); color: #fff; }
.btn-accent:hover  { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
.btn-ghost   { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); }
.btn-ghost:hover   { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn-danger  { background: var(--red); color: #fff; }
.btn-danger:hover  { filter: brightness(1.15); }
.btn-success { background: var(--green); color: #000; }
.btn-success:hover { filter: brightness(1.1); }
.btn-sm  { padding: 5px 10px; font-size: 10px; }
.btn-lg  { padding: 12px 24px; font-size: 13px; }
.btn-xl  { padding: 14px 32px; font-size: 15px; }
.btn-full { width: 100%; justify-content: center; }

/* ── TOGGLE ── */
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle {
  width: 34px; height: 18px;
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: 9px; position: relative;
  transition: background .2s, border-color .2s; cursor: pointer; flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sub); transition: transform .2s, background .2s;
}
.toggle.on { background: var(--accent-dim); border-color: var(--accent); }
.toggle.on::after { transform: translateX(16px); background: var(--accent); }

/* ── RANGE ── */
.range-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: var(--bg4); border-radius: 2px; outline: none; cursor: pointer;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── LIVE DOT ── */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dim); transition: background .3s, box-shadow .3s; flex-shrink: 0;
}
.live-dot.live    { background: var(--green); box-shadow: 0 0 8px var(--green); animation: dotBlink 1.8s infinite; }
.live-dot.loading { background: var(--amber); animation: dotBlink .6s infinite; }
.live-dot.error   { background: var(--red); }
@keyframes dotBlink { 0%,100%{opacity:1;} 50%{opacity:.2;} }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--border); }
.sec-label { font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--sub); }

/* ── PLATFORM GLOW VARS ── */
.pt-bluesky { --pc: #0085ff; --pc-glow: rgba(0,133,255,0.35); }
.pt-reddit  { --pc: #ff4500; --pc-glow: rgba(255,69,0,0.35); }
.pt-youtube { --pc: #ff0000; --pc-glow: rgba(255,0,0,0.35); }