:root {
  --bg1: #0f172a;
  --bg2: #0b1226;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.06);
  --accent: #ff4d6d;
  --accent-2: #ffb86b;
  --text: #e6eef8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,77,109,0.08), transparent 10%),
              radial-gradient(1000px 500px at 90% 90%, rgba(255,184,107,0.06), transparent 12%),
              linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:2rem;
}

.stage{width:100%;max-width:920px;padding:2rem;}

.card{
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:20px;
  padding:2.2rem;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
}

.headline{
  margin:0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height:1;
  letter-spacing:-0.02em;
  font-weight:800;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: hue 6s linear infinite;
}

@keyframes hue{ 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }

.lead{margin:0.6rem 0 1.2rem;color:rgba(230,238,248,0.85)}

.controls{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:0.8rem}
.btn{
  padding:0.6rem 1rem;border-radius:12px;border:0;background:transparent;color:var(--text);cursor:pointer;font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,0.35);
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#081228;
  box-shadow: 0 10px 30px rgba(255,77,109,0.14);
}

.message{
  margin-top:1rem;padding:1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--text);min-height:44px;display:flex;align-items:center;
  font-weight:600;
}

.notice{ margin-top:0.8rem;color:rgba(230,238,248,0.78);font-size:0.92rem;border-left:3px solid rgba(255,255,255,0.04);padding-left:0.8rem}

.credits{margin-top:1rem;text-align:center;color:rgba(230,238,248,0.6);font-size:0.9rem}

:root[data-theme="1"]{ --accent:#ff4d6d; --accent-2:#ffb86b; --bg1:#071026; --bg2:#0b1226; --card:rgba(255,255,255,0.05)}
:root[data-theme="2"]{ --accent:#6ee7b7; --accent-2:#60a5fa; --bg1:#02121a; --bg2:#071730}
:root[data-theme="3"]{ --accent:#ff7ab6; --accent-2:#7c5cff; --bg1:#0b0212; --bg2:#12061b}
:root[data-theme="4"]{ --accent:#ffd166; --accent-2:#06d6a0; --bg1:#08121a; --bg2:#0d2433}

@media (max-width:480px){ .card{padding:1.4rem;border-radius:14px} .controls{justify-content:center} }