/* ===== Shell: split-screen layout ===== */
.auth-shell{
  display:grid;
  grid-template-columns: 1fr min(480px, 100%);
  min-height:100vh;
}

/* ===== Brand panel (left) ===== */
.auth-brandpanel{
  position:relative;
  background:var(--graphite);
  color:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.auth-grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  animation:gridDrift 40s linear infinite;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 70%, transparent);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 70%, transparent);
}
@keyframes gridDrift{from{background-position:0 0}to{background-position:44px 44px}}

.auth-glow{
  position:absolute; top:-140px; left:-100px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,89,12,.24), transparent 68%);
  animation:glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{opacity:.7; transform:scale(1)}
  50%{opacity:1; transform:scale(1.08)}
}

.auth-flame-watermark{
  position:absolute;
  right:-40px; bottom:-30px;
  width:340px; height:auto;
  color:#fff;
  opacity:.035;
  pointer-events:none;
}

.auth-embers{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.ember{
  position:absolute;
  left:var(--x);
  bottom:-10px;
  width:var(--size); height:var(--size);
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 6px 1px rgba(232,89,12,.8);
  opacity:0;
  animation:emberRise var(--dur) ease-in var(--delay) infinite;
}
@keyframes emberRise{
  0%{opacity:0; transform:translate(0,0) scale(1)}
  8%{opacity:.9}
  70%{opacity:.55}
  100%{opacity:0; transform:translate(14px,-360px) scale(.4)}
}

.auth-brandpanel-inner{
  position:relative; z-index:1;
  padding:0 64px;
  max-width:600px;
}

.auth-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:20px;
  background:rgba(232,89,12,.12);
  border:1px solid rgba(232,89,12,.35);
  color:var(--amber);
  font-family:'JetBrains Mono';
  font-size:11px; font-weight:700; letter-spacing:.1em;
  margin-bottom:26px;
}
.auth-badge-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  animation:dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,89,12,.55)}
  50%{box-shadow:0 0 0 5px rgba(232,89,12,0)}
}

.auth-headline{
  font-family:Archivo; font-weight:800;
  font-size:42px; line-height:1.14; letter-spacing:-.02em;
  color:#fff; margin-bottom:20px;
}
.auth-headline em{color:var(--amber); font-style:normal}

.auth-subcopy{
  color:#a9b2bd; font-size:15px; line-height:1.65;
  max-width:460px; margin-bottom:30px;
}

.auth-pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:70px}
.auth-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#dfe3e8; font-size:12.5px; font-weight:500;
}
.auth-pill svg{width:13px; height:13px; color:var(--amber); flex-shrink:0}

.auth-dashline-wrap{
  position:absolute; left:0; right:0; bottom:56px;
  overflow:hidden;
  height:24px;
}
.auth-dashline{
  position:absolute; left:0; right:0; top:11px;
  height:1px;
  background-image:repeating-linear-gradient(90deg, rgba(232,89,12,.55) 0 10px, transparent 10px 22px);
  animation:dashMove 3.4s linear infinite;
}
@keyframes dashMove{from{background-position:0 0}to{background-position:64px 0}}

.auth-route-icon{
  position:absolute; top:0; left:-24px;
  width:24px; height:24px;
  color:var(--amber);
  filter:drop-shadow(0 0 6px rgba(232,89,12,.5));
  animation:routeMove 7s linear infinite;
}
.auth-route-icon svg{width:24px; height:24px}
@keyframes routeMove{
  from{left:-24px}
  to{left:100%}
}

/* ===== Entrance animation (staggered) ===== */
.anim{
  opacity:0;
  transform:translateY(16px);
  animation:fadeUp .6s cubic-bezier(.16,.8,.3,1) forwards;
  animation-delay:calc(var(--d, 0) * 110ms + 120ms);
}
.auth-headline .anim{display:inline-block}
@keyframes fadeUp{to{opacity:1; transform:none}}

.anim-fade{
  opacity:0;
  animation:fadeIn .55s ease forwards;
  animation-delay:calc(var(--d, 0) * 110ms + 160ms);
}
@keyframes fadeIn{to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .auth-grid-bg,.auth-glow,.auth-badge-dot,.auth-dashline,.auth-route-icon,.ember{animation:none}
  .auth-route-icon{left:40%}
  .ember{opacity:0}
  .anim,.anim-fade{animation:none; opacity:1; transform:none}
}

/* ===== Form panel (right) ===== */
.auth-formpanel{
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:40px 32px;
}
.auth-formwrap{width:100%; max-width:370px}

.auth-formbrand{display:flex; align-items:center; gap:12px; margin-bottom:40px}
.auth-formbrand .mark{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--amber),#ff7a33);
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(232,89,12,.32);
}
.auth-formbrand .mark svg{width:22px; height:22px}
.auth-formbrand b{font-family:Archivo; font-weight:800; font-size:18px; color:var(--ink); display:block; line-height:1.1}
.auth-formbrand span{font-size:10.5px; color:var(--mut); letter-spacing:.1em; text-transform:uppercase}

.auth-formwrap h2{font-family:Archivo; font-weight:800; font-size:25px; color:var(--ink); margin-bottom:6px}
.auth-formwrap .sub{color:var(--mut); font-size:13.5px; margin-bottom:26px}

.input-icon-wrap{position:relative}
.input-icon-wrap input{padding-left:40px; padding-right:14px; background:#fff}
.input-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--mut2); display:flex; pointer-events:none;
}
.input-icon svg{width:16px; height:16px}
.input-icon-wrap input#pwInput{padding-right:42px}
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:6px;
  display:grid; place-items:center; color:var(--mut2);
}
.pw-toggle svg{width:17px; height:17px}
.pw-toggle:hover{background:var(--grey-soft); color:var(--mut)}
.pw-toggle.is-on{color:var(--amber)}

.remember-row{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--mut); margin:2px 0 22px; cursor:pointer;
}
.remember-row input{width:15px; height:15px; cursor:pointer}

.btn-signin{position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease}
.btn-signin:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(232,89,12,.35)}
.btn-signin:active{transform:translateY(0)}

.auth-foot{
  margin-top:24px; text-align:center;
  font-size:12px; color:var(--mut2);
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brandpanel{display:none}
}