:root { --bg:#05060a; --gold:#ffb627; --amber:#ff7a00; --text:#f4e9d2; --muted:#9a8f7a; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: radial-gradient(ellipse at 50% 40%, #1a1208 0%, var(--bg) 60%); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: grid; place-items: center; padding: 16px; }
.card { width: 100%; max-width: 360px; text-align: center; }
h1 { letter-spacing: .4em; font-weight: 600; margin: 24px 0 4px; color: var(--gold); text-shadow: 0 0 18px rgba(255,182,39,.5); }
.sub { color: var(--muted); margin: 0 0 24px; letter-spacing: .1em; }
.orb { width: 140px; height: 140px; margin: 0 auto; position: relative; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,182,39,.5); animation: spin 8s linear infinite; border-top-color: transparent; }
.orb i:nth-child(2) { inset: 18px; animation-duration: 5s; animation-direction: reverse; border-color: rgba(255,122,0,.6); border-left-color: transparent; }
.orb i:nth-child(3) { inset: 42px; border: none; background: radial-gradient(circle, #fff3c4, var(--gold) 40%, var(--amber) 70%, transparent 72%);
  box-shadow: 0 0 40px 10px rgba(255,150,20,.45); animation: pulse 2.6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 0 60px 18px rgba(255,150,20,.6); } }
input, button { width: 100%; font: inherit; padding: 14px 16px; border-radius: 12px; }
input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,182,39,.3); color: var(--text); outline: none; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,182,39,.15); }
button { margin-top: 12px; border: 0; background: linear-gradient(135deg, var(--gold), var(--amber)); color: #1a0f00; font-weight: 700; cursor: pointer; }
#err { color: #ff8a65; min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) { .orb i { animation: none; } }