:root{
  --bg0:#0a0810;
  --bg1:#160f24;
  --neon-red:#ff2e4d;
  --neon-cyan:#22e6ff;
  --neon-magenta:#ff3df0;
  --lime:#b6ff3a;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:'IBM Plex Mono', monospace;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,61,240,0.12), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(34,230,255,0.12), transparent 45%),
    linear-gradient(160deg, var(--bg0), var(--bg1));
  background-attachment:fixed;
  min-height:100vh;
  color:#fff;
}
.mono{ font-family:'IBM Plex Mono', monospace; }

/* Neon title */
.neon-title{
  font-family:'Bungee', cursive;
  color:#fff;
  letter-spacing:1px;
  text-shadow:
    0 0 6px var(--neon-cyan),
    0 0 14px var(--neon-magenta),
    0 0 30px rgba(255,61,240,0.6);
  animation: hum 3s ease-in-out infinite;
}
@keyframes hum{
  0%,100%{ text-shadow:0 0 6px var(--neon-cyan),0 0 14px var(--neon-magenta),0 0 30px rgba(255,61,240,0.6);}
  50%{ text-shadow:0 0 10px var(--neon-cyan),0 0 22px var(--neon-magenta),0 0 42px rgba(34,230,255,0.7);}
}

/* TV frame */
.tv-frame{
  background:linear-gradient(145deg,#2b2233,#0e0a15);
  border-radius:22px;
  padding:16px 16px 26px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.05),
    0 20px 50px rgba(0,0,0,0.7),
    inset 0 2px 8px rgba(255,255,255,0.06);
  border:3px solid #3a2f47;
}
.tv-screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 0 3px #000;
}
.tv-bezel-label{
  text-align:center;
  color:var(--neon-cyan);
  font-size:11px;
  letter-spacing:3px;
  margin-top:8px;
  text-shadow:0 0 8px var(--neon-cyan);
}

/* static noise */
.static-noise{
  background-color:#111;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
  position:relative;
  overflow:hidden;
}
.static-noise::before{
  content:"";
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:0.25;
  animation: fuzz 0.4s steps(4) infinite;
}
@keyframes fuzz{
  0%{ transform:translate(0,0);}
  25%{ transform:translate(-8px,6px);}
  50%{ transform:translate(6px,-4px);}
  75%{ transform:translate(-4px,-6px);}
  100%{ transform:translate(4px,4px);}
}

/* scanlines overlay */
.scanlines::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px);
  z-index:30;
  mix-blend-mode:multiply;
}

/* channel flick animation */
.channel-flick{ animation: flick 0.35s ease-out; }
@keyframes flick{
  0%{ filter:brightness(3) contrast(0.5); transform:scaleY(0.02); opacity:0.2;}
  40%{ filter:brightness(1.4); transform:scaleY(1.05);}
  100%{ filter:none; transform:scaleY(1); opacity:1;}
}

/* Big spin button */
.spin-btn{
  font-family:'Bungee', cursive;
  font-size:clamp(1rem,4vw,1.6rem);
  color:#fff;
  padding:16px 34px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  background:linear-gradient(180deg,#ff5c73,#ff2e4d 60%,#c00d29);
  box-shadow:
    0 6px 0 #7a0b1c,
    0 8px 24px rgba(255,46,77,0.6);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
  letter-spacing:1px;
}
.spin-btn:hover{ filter:brightness(1.1); }
.spin-btn:active{ transform:translateY(5px); box-shadow:0 1px 0 #7a0b1c, 0 3px 14px rgba(255,46,77,0.5); }

/* chips */
.chip{
  font-size:13px;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.15);
  transition:all 0.15s;
  font-family:'IBM Plex Mono', monospace;
}
.chip-on{
  background:rgba(34,230,255,0.15);
  border-color:var(--neon-cyan);
  color:var(--neon-cyan);
  box-shadow:0 0 12px rgba(34,230,255,0.4);
}
.chip-off{ background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.5); }

/* action buttons */
.action-btn{
  font-size:13px;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  cursor:pointer;
  transition:all 0.15s;
  font-family:'IBM Plex Mono', monospace;
}
.action-btn:hover:not(:disabled){ background:rgba(255,255,255,0.14); border-color:var(--neon-magenta); }
.action-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.action-fav{ background:rgba(255,46,77,0.2); border-color:var(--neon-red); box-shadow:0 0 12px rgba(255,46,77,0.4); }

/* tabs */
.tab{
  font-size:14px;
  padding:5px 12px;
  border-radius:8px;
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  background:transparent;
  border:none;
  font-family:'IBM Plex Mono', monospace;
}
.tab-on{ color:#fff; background:rgba(255,61,240,0.15); box-shadow:0 0 10px rgba(255,61,240,0.3); }

/* history strip */
.hstrip::-webkit-scrollbar{ height:8px; }
.hstrip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:4px; }
.thumb{
  width:160px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:4px;
  cursor:pointer;
  text-align:left;
  transition:all 0.15s;
}
.thumb:hover{ border-color:var(--neon-cyan); box-shadow:0 0 12px rgba(34,230,255,0.3); transform:translateY(-2px); }
.thumb-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:10px;
  color:rgba(255,255,255,0.7);
  margin-top:4px;
  line-height:1.2;
}

/* toast */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(10,8,16,0.95);
  border:1px solid var(--neon-cyan);
  color:var(--neon-cyan);
  padding:10px 20px;
  border-radius:10px;
  font-size:13px;
  z-index:100;
  box-shadow:0 0 20px rgba(34,230,255,0.4);
  animation: toastIn 0.3s ease-out;
}
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%, 20px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}