:root{
  --bg:#050507;
  --ink:#FFFFFF;
  --ink-2:#A9A5B8;
  --ink-3:#6E6A7E;
  --magenta:#FF2BD6;
  --violet:#7B4DFF;
  --cyan:#19E3FF;
  --gold:#C8A96B;
  --gold-2:#E8D5A3;
  --danger:#FF4D5E;
  --card:rgba(8,8,10,.88);
  --field:rgba(6,6,8,.92);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(200,169,107,.35);
  --display:'Unbounded',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* ── Scene ── */
.scene{position:fixed;inset:0;z-index:0;background:#000 url("../img/login-bg.png") center center / cover no-repeat}
.scene::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(270deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.06) 48%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.48) 100%)}
.scene .glow{display:none}

/* ── Chrome ── */
.page{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:40px 48px 36px}
.portal{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.portal i{width:10px;height:10px;background:var(--gold);display:inline-block}
.brand-m{display:none}
.status{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.status i{width:6px;height:6px;background:var(--magenta);box-shadow:0 0 12px var(--magenta);display:inline-block}

/* ── Card: right side — door + carpet stay visible ── */
.stage{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:24px 0;
  width:100%;
}
.card{
  width:min(420px,100%);
  padding:44px 40px 36px;
  border-radius:0;
  background:rgba(6,6,8,.90);
  border:1px solid rgba(200,169,107,.22);
  backdrop-filter:blur(28px) saturate(120%);
  -webkit-backdrop-filter:blur(28px) saturate(120%);
  box-shadow:
    0 32px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2) 20%, var(--gold) 50%, var(--gold-2) 80%, transparent);
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:2px;height:100%;
  background:linear-gradient(180deg, var(--gold), transparent 70%);
  pointer-events:none;
  opacity:.55;
}
.panel{animation:in .4s cubic-bezier(.22,1,.36,1) both}
.panel[hidden]{display:none}
@keyframes in{from{opacity:0;transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}

h1{
  font-family:var(--display);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.sub{
  color:var(--ink-2);
  font-size:14px;
  margin:10px 0 32px;
  letter-spacing:.01em;
  font-weight:400;
}

.field{display:block;margin-bottom:20px}
.field .lbl{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
  opacity:.85;
}
.field input{
  width:100%;
  height:50px;
  padding:0 16px;
  border-radius:0;
  background:var(--field);
  border:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(200,169,107,.28);
  color:var(--ink);
  font-size:15px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder{color:#5A5766}
.field input[type=password]{letter-spacing:.22em}
.field input[type=password]:placeholder-shown{letter-spacing:0}
.field input.dots:placeholder-shown{letter-spacing:.3em}
.field input:hover{
  border-color:rgba(200,169,107,.35);
  background:rgba(10,10,12,.95);
}
.field input:focus{
  outline:0;
  border-color:var(--gold);
  border-bottom-color:var(--gold-2);
  background:rgba(10,10,12,.98);
  box-shadow:inset 0 -1px 0 var(--gold);
}
.field.code input{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.field .err{display:none;font-size:12.5px;color:var(--danger);margin-top:8px;letter-spacing:.02em}
.field.has-error .lbl{color:var(--danger);opacity:1}
.field.has-error input{border-color:var(--danger);box-shadow:none}
.field.has-error .err{display:block}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:52px;
  margin-top:32px;
  border:0;
  border-radius:0;
  cursor:pointer;
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#07070A;
  transition:background .2s, color .2s, letter-spacing .2s, box-shadow .25s;
}
.btn:hover{letter-spacing:.18em}
.btn:active{transform:none;opacity:.92}
.btn-white{
  background:linear-gradient(180deg, #F5EFE3 0%, #E8D5A3 45%, #C8A96B 100%);
  color:#0A0A0C;
  box-shadow:0 8px 28px rgba(200,169,107,.22);
}
.btn-white:hover{
  background:linear-gradient(180deg, #FFF8EC 0%, #F0E0B8 45%, #D4B87A 100%);
  box-shadow:0 10px 36px rgba(200,169,107,.32);
}
.btn-beam{
  background:linear-gradient(90deg, #E8D5A3, #C8A96B 50%, #A8884A);
  box-shadow:0 10px 32px rgba(200,169,107,.28);
}
.btn-beam:hover{box-shadow:0 12px 40px rgba(200,169,107,.4)}
.btn[disabled]{opacity:.65;cursor:progress}

.foot{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:13.5px;
  color:var(--ink-2);
  letter-spacing:.01em;
}
.foot a{
  color:var(--gold-2);
  text-decoration:none;
  border-bottom:1px solid rgba(200,169,107,.4);
  padding-bottom:1px;
  transition:border-color .15s, color .15s;
}
.foot a:hover{
  color:#fff;
  border-bottom-color:var(--gold-2);
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Mobile ── */
@media (max-width:900px){
  .stage{justify-content:flex-end}
  .card{width:min(400px,100%)}
}
@media (max-width:720px){
  .scene{background-position:center 35%;background-size:cover}
  .scene::after{background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.40) 40%, rgba(0,0,0,.78) 100%)}
  .page{padding:48px 20px 36px;text-align:center}
  .portal{display:none}
  .brand-m{display:block}
  .brand-m b{display:block;font-family:var(--display);font-weight:800;font-size:32px;line-height:1;letter-spacing:.06em}
  .brand-m span{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
  .stage{padding:28px 0 20px;justify-content:center}
  .card{text-align:left;padding:36px 24px 28px;width:100%}
  .card::after{display:none}
  .status{justify-content:center}
  h1{font-size:20px;letter-spacing:.05em}
  .field input,.btn{height:50px}
}

/* Large screens: form on right third, door clear in center */
@media (min-width:1100px){
  .page{padding:48px 64px 40px}
  .stage{padding-right:min(4vw,48px)}
  .card{width:420px}
}

/* WP notices */
.ah-banner{
  margin:0 0 22px;
  padding:12px 14px;
  border-radius:0;
  font-size:13px;
  line-height:1.45;
  border:1px solid var(--line);
  letter-spacing:.02em;
}
.ah-banner.is-error{background:rgba(255,77,94,.10);border-color:rgba(255,77,94,.35);color:#FFB4BB}
.ah-banner.is-ok{background:rgba(200,169,107,.10);border-color:rgba(200,169,107,.35);color:var(--gold-2)}
body.ah-auth{overflow-x:hidden}