:root{
  color-scheme:dark;
  --auth-bg:#030404;
  --auth-ink:#f4f1e8;
  --auth-muted:rgba(244,241,232,.68);
  --auth-soft:rgba(244,241,232,.1);
  --auth-line:rgba(244,241,232,.14);
  --auth-accent:#96914b;
  --auth-panel:rgba(10,13,12,.78);
  --auth-danger:#ffb4a8;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 14% 0%, rgba(150,145,75,.26), transparent 28rem),
    radial-gradient(circle at 88% 14%, rgba(244,241,232,.10), transparent 34rem),
    linear-gradient(180deg,#030404,#0a0d0c 58%,#030404);
  color:var(--auth-ink);
  font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
.auth-shell{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  padding:clamp(24px,6vw,72px) 18px;
  isolation:isolate;
}
.auth-lattice{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.62;
  pointer-events:none;
  overflow:hidden;
}
.auth-lattice svg{
  position:absolute;
  inset:auto -8vw -5vh auto;
  width:min(980px,94vw);
  height:min(620px,70vh);
  opacity:.72;
}
.auth-lattice path{
  fill:none;
  stroke:rgba(150,145,75,.42);
  stroke-width:.42;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.auth-card{
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,480px);
  gap:clamp(24px,6vw,72px);
  align-items:center;
}
.auth-brand{
  max-width:540px;
  min-height:min(560px,72vh);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(24px,5vh,62px);
}
.auth-kicker{
  margin:0 0 18px;
  color:var(--auth-accent);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
}
.auth-logo{
  width:clamp(138px,14vw,204px);
  height:auto;
  display:block;
  position:absolute;
  left:50%;
  top:30%;
  transform:translate(-50%,-50%);
  margin:0;
  color:var(--auth-ink);
  filter:none;
  opacity:.98;
}
.auth-brand h1{
  margin:0;
  font-size:clamp(2.05rem,5.8vw,4.55rem);
  line-height:.9;
  letter-spacing:-.075em;
}
.auth-brand p{
  max-width:34rem;
  color:var(--auth-muted);
  font-size:clamp(1rem,2vw,1.14rem);
  margin:24px 0 0;
}
.panel.login{
  margin:0;
  background:var(--auth-panel);
  border:1px solid var(--auth-line);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
  backdrop-filter:blur(22px);
  padding:clamp(22px,4vw,34px);
}
.panel.login h1{
  margin:0 0 12px;
  font-size:clamp(2rem,5vw,3.1rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.muted{color:var(--auth-muted)}
.error{
  color:var(--auth-danger);
  background:rgba(255,180,168,.08);
  border:1px solid rgba(255,180,168,.22);
  border-radius:14px;
  padding:10px 12px;
}
form{display:grid;gap:14px;margin-top:18px}
label{display:grid;gap:7px;color:var(--auth-muted);font-weight:700}
input{
  width:100%;
  border:1px solid var(--auth-line);
  background:rgba(244,241,232,.07);
  color:var(--auth-ink);
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
  outline:none;
}
input:focus{
  border-color:rgba(150,145,75,.74);
  box-shadow:0 0 0 4px rgba(150,145,75,.15);
}
button,.button{
  appearance:none;
  border:0;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--auth-accent);
  color:#030404;
  text-decoration:none;
  border-radius:999px;
  padding:13px 18px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
}
.button.secondary{
  background:rgba(244,241,232,.08);
  color:var(--auth-ink);
  border:1px solid var(--auth-line);
}
.auth-links{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.auth-links .muted{
  margin:0;
  text-align:center;
}
a{color:var(--auth-ink)}
strong{color:var(--auth-ink)}
@media (max-width:820px){
  .auth-card{grid-template-columns:1fr}
  .auth-brand{
    min-height:auto;
    display:block;
    padding-bottom:0;
  }
  .auth-brand h1{font-size:clamp(2.55rem,13vw,4.35rem)}
  .auth-logo{
    position:static;
    transform:none;
    width:82px;
    margin:0 0 18px;
  }
  .auth-brand p{margin-top:16px}
}
