/* ============================================================
   E-SWORDS | auth screen
   Direction: a swordsmith's forge at night. Blued steel, ember light.
   ============================================================ */
:root{
  --void:#080b11;
  --steel:#121824;
  --steel-2:#1a2231;
  --edge:#2b3547;
  --ember:#ff7a1a;
  --ember-hot:#ffc46b;
  --ember-deep:#b8410a;
  --parchment:#e9dfc9;
  --ash:#8792a4;
  --danger:#ff5a52;
  --ok:#4fd1a5;
  --r:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--void);
  color:var(--parchment);
  font-family:'Assistant',system-ui,sans-serif;
  direction:rtl;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- forge backdrop ---------- */
#embers{position:fixed;inset:0;z-index:0;pointer-events:none}
.forge-glow{
  position:fixed;left:50%;bottom:-38vh;transform:translateX(-50%);
  width:120vw;height:80vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(255,122,26,.30) 0%, rgba(184,65,10,.14) 35%, transparent 68%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(0,0,0,.75) 100%)}

/* ---------- layout ---------- */
.stage{position:relative;z-index:2;height:100%;display:grid;place-items:center;padding:20px;overflow-y:auto}
.panel{width:100%;max-width:430px}

/* ---------- brand ---------- */
.brand{text-align:center;margin-bottom:26px}
.mark{width:74px;height:74px;margin:0 auto 12px;display:block}
.mark .blade{stroke:var(--edge);transition:stroke .5s ease,filter .5s ease}
.mark .heat{stroke:var(--ember);opacity:0;transition:opacity .6s ease}
body.heated .mark .blade{stroke:var(--ember-deep)}
body.heated .mark .heat{opacity:1;filter:drop-shadow(0 0 6px var(--ember))}
.brand h1{
  font-family:'Suez One',serif;font-size:39px;letter-spacing:.5px;line-height:1;
  background:linear-gradient(180deg,#fff5e2 0%,var(--ember-hot) 45%,var(--ember-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand p{color:var(--ash);font-size:14px;margin-top:7px;letter-spacing:.3px}

/* ---------- card ---------- */
.card{
  background:linear-gradient(180deg,rgba(26,34,49,.94),rgba(18,24,36,.97));
  border:1px solid var(--edge);
  border-radius:var(--r);
  box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  position:relative;
}
/* hot edge along the top — the blade catching light */
.card::before{
  content:'';position:absolute;top:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
  opacity:.7;
}

/* ---------- tabs ---------- */
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--edge)}
.tab{
  background:none;border:0;color:var(--ash);cursor:pointer;
  font-family:'Assistant',sans-serif;font-size:15px;font-weight:600;
  padding:15px 0;position:relative;transition:color .2s;
}
.tab:hover{color:var(--parchment)}
.tab[aria-selected="true"]{color:var(--ember-hot)}
.tab[aria-selected="true"]::after{
  content:'';position:absolute;bottom:-1px;inset-inline:16%;height:2px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
}
.tab:focus-visible{outline:2px solid var(--ember);outline-offset:-3px}

/* ---------- form ---------- */
form{padding:24px 24px 26px}
form[hidden]{display:none !important}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;color:var(--ash);margin-bottom:6px;letter-spacing:.4px}
.field input{
  width:100%;background:#0c111a;border:1px solid var(--edge);border-radius:var(--r);
  color:var(--parchment);font-family:inherit;font-size:15px;padding:11px 13px;
  transition:border-color .18s,box-shadow .18s;
}
.field input::placeholder{color:#4d586b}
.field input:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,122,26,.13)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.hint{font-size:12px;color:var(--danger);margin-top:5px;min-height:15px}

/* ---------- class picker ---------- */
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}
.classes input{position:absolute;opacity:0;pointer-events:none}
.classes label{
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  padding:11px 3px;border:1px solid var(--edge);border-radius:var(--r);
  background:#0c111a;font-size:12px;color:var(--ash);transition:all .18s;
}
.classes label svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}
.classes label:hover{border-color:#3c4a60;color:var(--parchment)}
.classes input:checked+label{
  border-color:var(--ember);color:var(--ember-hot);
  background:linear-gradient(180deg,rgba(255,122,26,.14),rgba(255,122,26,.04));
}
.classes input:focus-visible+label{outline:2px solid var(--ember);outline-offset:2px}

/* ---------- remember ---------- */
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--ash)}
.check input{width:15px;height:15px;accent-color:var(--ember);cursor:pointer}

/* ---------- submit ---------- */
.go{
  width:100%;border:0;border-radius:var(--r);cursor:pointer;
  font-family:'Suez One',serif;font-size:17px;letter-spacing:.5px;
  padding:13px;color:#1b0d02;
  background:linear-gradient(180deg,var(--ember-hot),var(--ember) 55%,var(--ember-deep));
  box-shadow:0 5px 20px rgba(255,122,26,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s,box-shadow .2s,filter .2s;
}
.go:hover{filter:brightness(1.08);box-shadow:0 7px 26px rgba(255,122,26,.42)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.5;cursor:wait}
.go:focus-visible{outline:2px solid var(--ember-hot);outline-offset:3px}

.alert{
  border:1px solid rgba(255,90,82,.4);background:rgba(255,90,82,.09);
  color:#ffb3ae;border-radius:var(--r);padding:10px 12px;font-size:13.5px;margin-bottom:15px;
}
.alert[hidden]{display:none !important}

.foot{text-align:center;color:#5b6678;font-size:11.5px;margin-top:18px;letter-spacing:.3px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
}
@media (max-width:420px){
  .brand h1{font-size:33px}
  .classes{grid-template-columns:repeat(2,1fr)}
}