*{box-sizing:border-box}
body{margin:0;background:#06000d;color:#fff;font-family:Arial,system-ui,sans-serif}
main{width:min(1200px,94vw);margin:0 auto;padding:28px 0 60px}
.hero{background:radial-gradient(circle at 20% 20%,rgba(168,85,247,.55),transparent 34%),linear-gradient(145deg,#1d0032,#07000d);border:1px solid rgba(216,180,254,.35);border-radius:24px;padding:26px;box-shadow:0 20px 70px rgba(0,0,0,.45)}
.eyebrow{color:#d8b4fe;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
h1{font-size:clamp(38px,6vw,76px);margin:0;text-shadow:0 0 22px #a855f7}
h2{margin-top:0}
.card{background:rgba(19,0,31,.92);border:1px solid rgba(216,180,254,.35);border-radius:20px;padding:20px;margin:16px 0;box-shadow:0 14px 45px rgba(0,0,0,.35)}
.card.good{border-color:rgba(74,222,128,.5);background:linear-gradient(135deg,rgba(20,83,45,.35),rgba(19,0,31,.92))}
.card.warn{border-color:rgba(250,204,21,.55);background:linear-gradient(135deg,rgba(113,63,18,.38),rgba(19,0,31,.92))}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
label{display:block;margin:12px 0 6px;color:#e9d5ff;font-weight:800}
input,select,button{border:0;border-radius:12px;padding:11px 13px;font-weight:800}
input,select{width:100%;background:#090012;color:#fff;border:1px solid rgba(255,255,255,.2)}
button{cursor:pointer;background:#7c3aed;color:#fff;margin:4px}
button:hover{filter:brightness(1.15)}
.primary{background:linear-gradient(135deg,#7c3aed,#d946ef)}
.danger{background:#991b1b}
.button-grid{display:grid;gap:8px}
.copy-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
code{display:block;background:#05000a;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px;color:#c4b5fd;overflow:auto}
.hint,.message{color:#d8b4fe}
.preview{position:relative;aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0}