:root{
  --ink:#0d1220; --bg:#0a0f1f; --card:#10172a; --accent:#2dd4bf; --accent-2:#22d3ee; --muted:#9aa4b2; --border:#1f2a44;
  --pumpkin:#f97316; --pumpkin-ember:#fb923c; --candy:#fcd34d; --midnight:#120a26; --midnight-2:#1c123a; --violet:#7c3aed;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:"Montserrat",system-ui,Segoe UI,Arial,sans-serif;color:#e6eefb;background:linear-gradient(180deg,var(--bg),#0b1329 35%,#0a0f1f)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.hero{position:relative;padding:56px 0;border-bottom:1px solid var(--border)}
.hero__inner{text-align:center}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:8px}
.hero__logo{width:min(900px,100%);display:block;margin:0 auto 16px}
h1{font:700 2.2rem/1.1 "Space Grotesk",sans-serif;margin:8px 0 6px}
p{color:var(--muted);margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04101e;border:0;padding:12px 20px;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,211,238,.25)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn--secondary{background:transparent;color:var(--accent-2);border:1px solid rgba(34,211,238,.4);box-shadow:inset 0 0 0 1px rgba(34,211,238,.2)}
.btn--secondary:hover{background:rgba(34,211,238,.12);box-shadow:0 8px 20px rgba(34,211,238,.15)}
.btn--pumpkin{background:linear-gradient(90deg,var(--pumpkin),var(--pumpkin-ember));color:#220f03}
.btn--pumpkin:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(249,115,22,.4)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin:24px 0}
.hidden{display:none}
.helper-text{color:var(--muted);font-size:.92rem;line-height:1.5;margin:12px 0 0}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;text-decoration:none;margin-bottom:18px}
.back-link:hover{color:var(--accent-2)}

.drill-header{padding:40px 0;text-align:center}
.drill-header .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;text-decoration:none;margin-bottom:18px}
.drill-header .back-link:hover{color:var(--accent-2)}
.drill-header h1{font-size:2.4rem;margin-bottom:12px}
.drill-header p{max-width:720px;margin:0 auto;color:#d3ddf7}
.drill-controls{margin-top:28px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px}
.countdown{font-family:"Space Grotesk",sans-serif;font-size:2.6rem;color:var(--accent-2);background:rgba(34,211,238,.08);padding:14px 28px;border-radius:16px;border:1px solid rgba(34,211,238,.3);min-width:150px;text-align:center;transition:color .3s ease,background .3s ease,border-color .3s ease}
.countdown.countdown--warning{color:#fb923c;border-color:rgba(249,115,22,.45);background:rgba(124,45,18,.35)}
.countdown.countdown--danger{color:#f87171;border-color:rgba(248,113,113,.5);background:rgba(127,29,29,.35)}

.drill-main{display:grid;gap:28px;padding-bottom:48px}
@media(min-width:960px){.drill-main{grid-template-columns:minmax(0,1.15fr)minmax(0,1fr)}}

.phone-frame{margin:0 auto;max-width:380px;background:linear-gradient(180deg,#111a2f,#0c1529);border-radius:32px;padding:18px 16px 28px;border:1px solid rgba(53,79,128,.45);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.phone-notch{width:44%;height:14px;background:#060b18;border-radius:0 0 18px 18px;margin:0 auto 18px}
.phone-screen{background:rgba(4,11,26,.9);border-radius:24px;padding:18px;min-height:460px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.phone-status{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;letter-spacing:.08em}
.notification-stack{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.notification-card{background:rgba(14,23,43,.95);border:1px solid rgba(34,211,238,.18);border-radius:18px;padding:16px;display:grid;gap:10px;box-shadow:0 12px 28px rgba(4,16,30,.45);transition:border-color .3s ease,box-shadow .3s ease}
.notification-card.active{border-color:rgba(34,211,238,.55);box-shadow:0 18px 36px rgba(34,211,238,.32)}
.notification-provider{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.92rem;color:#e6eefb}
.prompt-timer{font-family:"Space Grotesk",sans-serif;font-size:.85rem;color:var(--accent-2)}
.prompt-timer.resolved{color:#34d399}
.prompt-timer.missed{color:#f87171}
.notification-title{font-weight:700;font-size:1.05rem;color:#f8fbff}
.notification-meta{font-size:.78rem;color:var(--muted);display:grid;gap:4px}
.notification-meta strong{color:#e6eefb;font-weight:600}
.notification-context{font-size:.84rem;color:#c7d7ff;line-height:1.5}
.notification-placeholder{margin:auto;text-align:center;color:var(--muted);font-size:.9rem;padding-top:40px}

.response-panel{position:relative}
.score-pill{position:absolute;top:18px;right:18px;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);color:var(--accent-2);padding:6px 12px;border-radius:999px;font-weight:600;font-size:.85rem}
.actions-grid{display:grid;gap:14px;margin:20px 0}
@media(min-width:640px){.actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.action-button{border:1px solid var(--border);background:rgba(10,16,31,.95);color:#f5f9ff;padding:16px;border-radius:14px;font-weight:600;text-align:left;line-height:1.4;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.action-button:hover{transform:translateY(-2px);border-color:var(--accent-2);box-shadow:0 12px 26px rgba(34,211,238,.25)}
.action-button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.action-button[data-variant="danger"]{border-color:rgba(248,113,113,.4);background:rgba(127,29,29,.4)}
.action-button[data-variant="danger"]:hover{border-color:rgba(248,113,113,.65);box-shadow:0 12px 26px rgba(248,113,113,.2)}
.feedback{min-height:46px;font-size:.95rem;font-weight:600;color:var(--muted)}
.feedback.success{color:#34d399}
.feedback.error{color:#f87171}
.event-log{margin-top:18px;border-top:1px solid var(--border);padding-top:16px;font-size:.85rem;color:var(--muted);display:grid;gap:12px;max-height:220px;overflow-y:auto}
.event-log-entry strong{color:#f8fbff}
.summary-banner{margin-top:20px;padding:16px;border-radius:12px;border:1px solid rgba(45,212,191,.28);background:rgba(13,32,45,.85);color:#d6faff;font-weight:600;text-align:center}

.halloween-body{background:radial-gradient(circle at top,#1f0b2e,#0b0a18 58%,#04030a);color:#f4efff;min-height:100vh}
.phish-treat-page .card{background:rgba(18,16,42,.92);border-color:rgba(96,68,180,.45)}
.spooky-hero{position:relative;padding:72px 0 64px;overflow:hidden;background:linear-gradient(160deg,rgba(15,9,32,.95),rgba(34,16,52,.8))}
.spooky-hero__glow{position:absolute;inset:-30% -20% auto -20%;height:120%;background:radial-gradient(circle at 50% 35%,rgba(249,115,22,.45),rgba(124,58,237,.12) 48%,rgba(10,8,26,0) 68%);filter:blur(4px);opacity:.9}
.spooky-hero__inner{position:relative;text-align:center;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px}
.spooky-hero h1{font-size:2.6rem;max-width:780px;margin:0}
.spooky-hero p{max-width:760px;margin:0;color:#f7e9ff;font-size:1.04rem}
.spooky-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(124,58,237,.2);border:1px solid rgba(249,115,22,.4);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#fcd34d}
.challenge-controls{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;margin-top:12px}
.countdown--pumpkin{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.45);color:#fb923c;box-shadow:0 0 0 1px rgba(249,115,22,.25)}
.challenge-main{display:grid;gap:28px;padding-bottom:56px}
@media(min-width:960px){.challenge-main{grid-template-columns:minmax(0,1.05fr)minmax(0,1fr)}}
.card--moonlight{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(30,24,68,.85),rgba(16,12,46,.92));border-color:rgba(148,119,255,.32);box-shadow:0 20px 40px rgba(15,8,40,.4)}
.card--moonlight::after{content:"";position:absolute;inset:auto -40% -40% 40%;height:220px;background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.35),rgba(15,8,40,0));pointer-events:none;opacity:.6}
.challenge-panel{position:relative;padding-bottom:28px;box-shadow:0 24px 48px rgba(8,5,24,.55)}
.spooky-list{margin:0;padding-left:22px;display:grid;gap:12px;color:#f3e8ff}
.spooky-list li{line-height:1.5}
.spooky-list strong{color:#fcd34d}
.scenario-grid{display:grid;gap:20px;margin-top:12px}
.scenario-placeholder{padding:28px;border:1px dashed rgba(124,58,237,.4);border-radius:16px;text-align:center;color:#cbb7ff;background:rgba(18,16,42,.65)}
.scenario-card{position:relative;padding:22px;border-radius:18px;background:linear-gradient(160deg,rgba(24,18,58,.95),rgba(12,10,30,.96));border:1px solid rgba(148,119,255,.24);box-shadow:0 16px 36px rgba(8,5,24,.55);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.scenario-card:hover{transform:translateY(-4px);border-color:rgba(249,115,22,.45);box-shadow:0 24px 40px rgba(10,6,28,.6)}
.scenario-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#cbb7ff}
.scenario-label{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.35)}
.scenario-tag{font-weight:700;color:#fcd34d}
.scenario-meta{display:grid;gap:4px;font-size:.9rem;color:#d8ceff}
.scenario-meta strong{color:#fef9ff}
.scenario-preview{margin:16px 0 10px;line-height:1.5;color:#f4efff}
.scenario-detail{margin:0 0 18px;font-size:.9rem;color:#cbb7ff}
.scenario-choice-row{display:flex;flex-wrap:wrap;gap:12px}
.choice-chip{position:relative;display:inline-flex}
.choice-chip input{position:absolute;opacity:0;pointer-events:none}
.choice-chip span{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:1px solid rgba(148,119,255,.4);background:rgba(36,26,74,.8);font-weight:600;color:#eaddff;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.choice-chip span::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(148,119,255,.55);box-shadow:0 0 12px rgba(124,58,237,.55)}
.choice-chip input:checked + span{transform:translateY(-2px);border-color:rgba(249,115,22,.6);background:rgba(249,115,22,.18);color:#fef3c7;box-shadow:0 10px 22px rgba(249,115,22,.35)}
.choice-chip--danger span{border-color:rgba(249,115,22,.4);background:rgba(54,22,10,.65)}
.choice-chip--danger span::before{background:rgba(249,115,22,.7);box-shadow:0 0 12px rgba(249,115,22,.6)}
.scenario-card--correct{border-color:rgba(52,211,153,.55);box-shadow:0 24px 44px rgba(34,197,94,.35)}
.scenario-card--incorrect{border-color:rgba(248,113,113,.55);box-shadow:0 24px 44px rgba(248,113,113,.3)}
.scenario-reveal{margin-top:18px;padding-top:16px;border-top:1px solid rgba(148,119,255,.28);display:grid;gap:10px}
.reveal-result{font-weight:700;font-size:1rem}
.reveal-result--correct{color:#34d399}
.reveal-result--incorrect{color:#f87171}
.reveal-insights{margin:0;padding-left:20px;color:#e9ddff;font-size:.92rem;display:grid;gap:6px}
.reveal-action{margin:0;font-size:.9rem;color:#fcd34d}
.challenge-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.progress-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(148,119,255,.2);border:1px solid rgba(148,119,255,.35);font-weight:600;color:#eaddff;font-size:.85rem}

.phish-treat-page .summary-banner{background:rgba(29,20,58,.85);border-color:rgba(124,58,237,.38);color:#f9fafb}