/*!
  ProfessorSalazar — Sleek Cyber Lab Theme
  Option B: evolve to a modern cyber‑lab site (sans + neon panels)
  Drop‑in replacement for your current /style.css
  Author: ChatGPT (GPT-5 Thinking) — 2025‑11‑11
*/

/* =====================
   0) Variables & Base
   ===================== */
:root{
  --bg:#070b10;
  --bg-alt:#0b121a;
  --surface:#0e1622;
  --surface-2:#121b29;
  --text:#e6f1ff;
  --muted:#9db0c9;
  --primary:#00ffd1;       /* neon teal */
  --primary-700:#08d2b1;
  --secondary:#7aa2f7;     /* electric blue */
  --accent:#f2a50f;        /* amber accent */
  --danger:#ff5470;        /* cyber magenta/red */
  --success:#37ff8b;       /* neon green */
  --link:var(--secondary);
  --link-hover:#a5b8ff;

  --radius-xs:8px;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:22px;

  --shadow-soft:0 12px 30px rgba(0,255,209,.08);
  --shadow-strong:0 24px 60px rgba(0,255,209,.12);
  --grid-line:rgba(122,162,247,.08);
  --scanline:rgba(0,255,209,.06);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --maxw: 1100px;
}

/* Reset-ish */
*,
*::before,
*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(122,162,247,.08), transparent 60%),
    radial-gradient(900px 600px at -10% 120%, rgba(0,255,209,.06), transparent 60%),
    linear-gradient(0deg, var(--bg-alt), var(--bg));
  min-height:100dvh;
  line-height:1.6;
  overflow-x:hidden;
}
/* cyber grid + scanlines */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(0deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(60% 60% at 50% 40%, black 40%, transparent 100%);
  z-index:0;
}
@media (prefers-reduced-motion:no-preference){
  body::after{
    content:""; position:fixed; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg, transparent 0, transparent 2px, var(--scanline) 2px, var(--scanline) 3px);
    mix-blend-mode:soft-light; animation:scan 9s linear infinite; z-index:0;
  }
  @keyframes scan{0%{opacity:.25} 50%{opacity:.35} 100%{opacity:.25}}
}

/* Containers */
.container{ width:min(100% - 32px, var(--maxw)); margin-inline:auto; }
img,svg,video,canvas{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover, a:focus-visible{ color:var(--link-hover); text-shadow:0 0 10px rgba(122,162,247,.45); }

/* =====================
   1) Typography (keeps your headings)
   ===================== */
h1,h2,h3,h4,h5,h6{
  margin:0 0 16px; line-height:1.2; font-weight:800; letter-spacing:.3px; text-wrap:balance;
  text-shadow:0 0 18px rgba(0,255,209,.15);
}
h1{ font-size:clamp(2.1rem,4vw,3rem); }
h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
h3{ font-size:clamp(1.3rem,2.3vw,1.6rem); }
p{ margin:0 0 16px; color:var(--muted); }
.lead{ font-size:clamp(1.1rem,1.6vw,1.25rem); color:var(--text); opacity:.9; }

/* Your existing selectors preserved */
h1 { /* existing h1 remains but upgraded via global h1 above */ }
.intro{ font-size:1.15rem; margin-bottom:1rem; color:var(--muted); }
.countdown{ font-size:1.35rem; margin-bottom:1rem; color:var(--text); }

/* Mono when needed */
.prompt, code, pre, kbd, samp{ font-family:var(--font-mono); }
.prompt{ margin-top:2rem; font-size:1.05rem; color:var(--muted); }
.blinker{ animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; }}

/* =====================
   2) Modern Panel replacing .terminal
   ===================== */
.terminal{
  position: relative;
  padding: clamp(20px, 4vw, 34px);
  width: min(100%, 920px);
  margin: clamp(16px, 5vw, 48px) auto;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid rgba(122,162,247,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}
/* soft radial glow behind */
.terminal::before{
  content:""; position:absolute; inset:auto -60px -60px -60px; height:220px;
  background: radial-gradient(240px 120px at 50% 0%, rgba(0,255,209,.18), transparent 70%);
  z-index:-1; filter: blur(20px);
}
/* subtle top “chrome” */
.terminal::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%);
  border-radius: inherit;
}

/* =====================
   3) Cyber Lists (replaces challenges list)
   ===================== */
.challenges{ margin-top: 1rem; }
.challenges h2{
  margin-top: 1.5rem; font-size: 1.5rem;
  display:inline-block; padding-bottom:8px; border-bottom:2px solid rgba(0,255,209,.35);
  text-shadow:0 0 18px rgba(0,255,209,.25);
}
.challenges ul{
  list-style:none; padding-left:0; display:grid; gap:12px;
}
.challenges li{
  position:relative; margin:0; padding:12px 14px 12px 40px;
  border:1px solid rgba(122,162,247,.18);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(15,23,34,.85), rgba(15,23,34,.55));
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease;
}
.challenges li:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}
.challenges li::before{
  content: "▶"; /* replaces ">" */
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color: var(--primary);
  text-shadow: 0 0 12px rgba(0,255,209,.35);
}

/* =====================
   4) Buttons / CTAs
   ===================== */
.btn, button, .button, .chip, .yt-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1rem;
  border-radius:999px;
  border:1px solid rgba(122,162,247,.25);
  background:linear-gradient(180deg, rgba(18,27,41,.9), rgba(18,27,41,.6));
  color:var(--text);
  text-decoration:none;
  font-weight:700; letter-spacing:.2px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover, button:hover, .button:hover, .chip:hover, .yt-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0,255,209,.18);
  border-color: rgba(0,255,209,.45);
}
.btn-primary{
  border-color: rgba(0,255,209,.45);
  color:#0b1414;
  background: linear-gradient(180deg, var(--primary), var(--primary-700));
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}
.btn-danger{ color: var(--danger); border-color: rgba(255,84,112,.35); }
.btn-success{ color: var(--success); border-color: rgba(55,255,139,.35); }
.icon{ width: 24px; height: 24px; display:grid; place-items:center; }

/* =====================
   5) Tables (if you add any)
   ===================== */
.table{
  width:100%; border-collapse:collapse;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
}
.table th, .table td{ padding:14px 16px; border-bottom:1px solid rgba(122,162,247,.12); }
.table thead th{
  text-align:left; font-size:.85rem; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted);
  background:linear-gradient(180deg, rgba(18,27,41,.9), rgba(18,27,41,.5));
}
.table tbody tr:hover{ background:rgba(122,162,247,.06); }

/* =====================
   6) Code Blocks (optional use)
   ===================== */
pre{
  position:relative; margin:24px 0; padding:24px; border-radius:var(--radius);
  background:linear-gradient(180deg, #0b1220, #0a111c); color:#e6f1ff;
  border:1px solid rgba(122,162,247,.2); box-shadow:var(--shadow-soft); overflow:auto;
  font-family:var(--font-mono);
}
pre::before{
  content:"root@professorsalazar:~$"; display:inline-block; font-family:var(--font-mono);
  font-size:.8rem; color:#7aa2f7; margin-bottom:10px; opacity:.8;
}
code{
  font-family:var(--font-mono);
  padding:.2em .45em; border-radius:8px; background:rgba(122,162,247,.12);
  border:1px solid rgba(122,162,247,.25);
}

/* =====================
   7) Footer & small utilities
   ===================== */
footer{
  margin-top: 40px;
  padding: 40px 0 64px;
  border-top:1px solid rgba(122,162,247,.12);
  background: linear-gradient(180deg, rgba(10,15,20,.6), rgba(10,15,20,.9));
  color: var(--muted);
  text-align:center;
}

.center{ text-align:center; }
.stack > * + *{ margin-top:16px; }
.pad{ padding:24px; }
.round{ border-radius:var(--radius); }
.shadow{ box-shadow:var(--shadow-soft); }
.hr{
  height:1px; border:0; margin:32px 0;
  background:linear-gradient(90deg, transparent, rgba(122,162,247,.3), transparent);
}

/* =====================
   8) Remove invalid <style> tag from old file
   (Your old /style.css accidentally included a <style>...</style> block.
    This CSS redefines .yt-chip properly without HTML tags.)
   ===================== */
.yt-chip{
  display:inline-flex; align-items:center; gap:.55rem; padding:.6rem .9rem; border-radius:999px;
  text-decoration:none; color:#e6e9ef;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(255,0,51,.16), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.yt-chip .label{ font-weight:700; letter-spacing:.2px; }
.yt-chip .sub{ opacity:.9; font-weight:600; }
.yt-chip .icon{ display:grid; place-items:center; }
.yt-chip:hover{ transform:translateY(-1px); box-shadow:0 12px 32px rgba(255,0,51,.26); border-color: rgba(255,0,51,.35); }