*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#06060C; --card:#0d0d17f2; --line:#23233a; --ink:#f2ede6; --muted:#8d8a9e;
  --gold:#E47800; --gold-soft:#ff9d33; --beige:#F6D8BA; --blue:#4da3ff;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;overflow:hidden}
[hidden]{display:none!important}

#grid{position:fixed;inset:0;display:block}

.stage{position:relative;z-index:2;height:100%;display:grid;place-items:center;padding:20px}

.card{width:min(400px,92vw);background:var(--card);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:18px;padding:34px 32px 28px;text-align:center;
  box-shadow:0 30px 80px #000c, 0 0 0 1px #ffffff08 inset;
  animation:rise .7s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.card.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.card.away{animation:away .5s cubic-bezier(.6,-.2,.8,.4) both}
@keyframes away{to{opacity:0;transform:translateY(-30px) scale(.92)}}

.logo{width:58px;height:58px;object-fit:contain;margin-bottom:10px;
  filter:drop-shadow(0 0 18px rgba(228,120,0,.55));animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{filter:drop-shadow(0 0 34px rgba(228,120,0,.9));transform:scale(1.04)}}
h1{font-size:15px;letter-spacing:.22em;margin:0;color:var(--beige);font-weight:500}
h1 b{color:var(--gold);font-weight:800}
.tag{font-size:11.5px;color:var(--muted);margin:6px 0 20px;min-height:17px}

.tabs{display:flex;gap:6px;background:#08080f;border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:18px}
.tab{flex:1;padding:8px 0;border:0;border-radius:8px;background:none;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s}
.tab.on{background:linear-gradient(180deg,var(--gold),#c76800);color:#06060C}

form{display:flex;flex-direction:column;gap:13px;text-align:left}
label{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:5px;font-weight:600}
input{padding:11px 13px;background:#08080f;border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font:inherit;outline:none;transition:border-color .2s, box-shadow .2s}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(228,120,0,.18)}
#code{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}

.go{margin-top:6px;position:relative;overflow:hidden;padding:12px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(120deg,var(--gold),#ff9d33 45%,var(--gold));background-size:220% 100%;
  color:#06060C;font-weight:800;font-size:14px;letter-spacing:.06em;transition:background-position .5s, transform .15s}
.go:hover{background-position:100% 0;transform:translateY(-1px)}
.go:active{transform:translateY(1px)}
.go::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,#ffffff66,transparent);transform:skewX(-20deg);animation:sheen 3.4s infinite}
@keyframes sheen{0%,60%{left:-80%}100%{left:160%}}
.go[disabled]{opacity:.6;cursor:wait}
.err{min-height:18px;font-size:12.5px;color:#ff6b6b;text-align:center}

/* ---------- ignition loading screen ---------- */
.ignition{position:fixed;inset:0;z-index:5;background:radial-gradient(1200px 700px at 50% 42%,#12101d,#06060C 70%);
  display:grid;place-items:center;grid-template-rows:1fr auto auto 1fr;padding:40px 20px;
  animation:fadein .35s both}
@keyframes fadein{from{opacity:0}}
.ring{grid-row:2;position:relative;width:190px;height:190px;display:grid;place-items:center}
.ticks{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, var(--gold) 0 8deg, transparent 8deg 30deg,
    var(--blue) 30deg 34deg, transparent 34deg 60deg, var(--gold) 60deg 68deg, transparent 68deg 90deg,
    var(--gold-soft) 90deg 96deg, transparent 96deg 120deg, var(--gold) 120deg 128deg, transparent 128deg 150deg,
    var(--blue) 150deg 154deg, transparent 154deg 180deg, var(--gold) 180deg 188deg, transparent 188deg 210deg,
    var(--gold-soft) 210deg 216deg, transparent 216deg 240deg, var(--gold) 240deg 248deg, transparent 248deg 270deg,
    var(--blue) 270deg 274deg, transparent 274deg 300deg, var(--gold) 300deg 308deg, transparent 308deg 330deg,
    var(--gold-soft) 330deg 336deg, transparent 336deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
  animation:spin 1.8s linear infinite}
.ticks::after{content:"";position:absolute;inset:16px;border-radius:50%;border:1px dashed #2c2c44;animation:spinrev 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
.core{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(228,120,0,.8));animation:corepulse 1.1s ease-in-out infinite}
@keyframes corepulse{50%{transform:scale(1.09)}}
.ring::before,.ring::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(228,120,0,.35);animation:expand 2.2s ease-out infinite}
.ring::after{animation-delay:1.1s}
@keyframes expand{from{transform:scale(.85);opacity:.9}to{transform:scale(1.45);opacity:0}}

.boot{grid-row:3;margin-top:30px;font:12.5px/1.9 var(--mono);color:var(--muted);min-height:120px;width:min(360px,88vw)}
.boot .ln{opacity:0;transform:translateY(6px);animation:ln .3s forwards}
@keyframes ln{to{opacity:1;transform:none}}
.boot .ok{color:#3ddc97;float:right}
.bar{grid-row:4;align-self:start;width:min(360px,88vw);height:3px;background:#191926;border-radius:3px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-radius:3px;transition:width .45s cubic-bezier(.3,.8,.3,1);box-shadow:0 0 12px rgba(228,120,0,.8)}
.ignition.flash::before{content:"";position:absolute;inset:0;background:#fff;
  animation:flash .45s .1s both}
@keyframes flash{from{opacity:0}30%{opacity:.9}to{opacity:0}}