/* Playful styling (same as all-in) */
:root{
  --bg1:#0f1226;--bg2:#1a1f4a;--card:#0b0f23cc;--accent:#7c5cff;--accent2:#00ffd1;
  --text:#e7e9ff;--muted:#99a1ff;--ok:#00ffd1;--warn:#ffd166;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--text);
  background: radial-gradient(60% 100% at 70% 10%, var(--bg2), var(--bg1));overflow-x:hidden}
.bg{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(40% 60% at 10% 10%, #ffffff10 0%, transparent 60%),
  radial-gradient(40% 60% at 90% 90%, #00ffd120 0%, transparent 60%);
  filter: blur(40px);animation: float 12s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-1%)}to{transform:translateY(1%)}}
.shell{max-width:900px;margin:40px auto;padding:16px}.hero{text-align:center;margin-bottom:16px}
h1{margin:0 0 8px 0;font-size:clamp(28px,4vw,40px)}.sub{color:var(--muted)}
.panel{background:var(--card);border:1px solid #ffffff20;border-radius:16px;padding:16px;backdrop-filter: blur(6px);margin-top:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.wrap{flex-wrap:wrap}
.btn{border:1px solid #ffffff22;padding:10px 14px;border-radius:12px;background:#ffffff0f;color:var(--text);cursor:pointer;font-weight:600;transition: transform .08s ease, background .2s ease, border .2s ease}
.btn:hover{transform: translateY(-1px);background:#ffffff1a}.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0f23;border:none}.btn.ghost{background:transparent}.btn.sm{padding:6px 10px;border-radius:10px;font-size:14px}
.progress{height:12px;background:#ffffff14;border-radius:999px;overflow:hidden;border:1px solid #ffffff22;margin-top:10px}
.bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition: width .2s ease}
.status{margin:.5rem 0 0 2px;color:var(--muted);min-height:1.5rem}
.terminal{margin-top:16px;background:#020412;border:1px solid #344;border-radius:12px;overflow:hidden}
.term__header{background:#0c0f2a;padding:10px 12px;font-weight:700;color:#aaf;border-bottom:1px solid #243}
.term__body{margin:0;padding:12px;max-height:240px;overflow:auto;color:#bfe;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.blink{animation: blink 1.2s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.foot{opacity:.8;text-align:center;margin-top:14px;font-size:14px}.foot a{color:var(--muted)}
.spin{animation: spin 6s linear infinite}@keyframes spin{to{transform: rotate(360deg)}}
.rain{position:fixed;left:0;top:-2rem;font-size:28px;animation: fall 3.6s linear forwards;pointer-events:none}
@keyframes fall{to{transform: translateY(120vh) rotate(360deg)}}
.banner{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid #ffffff26;background:#ffffff10}
.banner strong{color:var(--ok)}
.scan__title{margin:0 0 8px 0}.scan__list{margin:0 0 8px 20px}.scan__list li{margin:4px 0}.scan__result{color:var(--warn)}
.doom-modal{width:min(1100px, 96vw);border:none;border-radius:16px;padding:0;background:#0b0f23;color:var(--text)}
.doom-modal::backdrop{background:#0008}
.doom-modal__header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #334}
.doom-modal__body{padding:12px 14px}
.iframe-wrap{position:relative;width:100%;aspect-ratio: 16/9;border:1px solid #233;border-radius:12px;overflow:hidden;background:#000}
.iframe-wrap iframe{width:100%;height:100%;border:0}
.fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000;color:#fff}
.hidden{display:none}
.muted{color:var(--muted)}