:root{
  --ink:#2f2b28;
  --paper:#eae3d8;
  --gold:#9d846a;
  --gold-deep:#8f6e3e;
  --gold-light:#f7c67c;
  --brown:#4a2b23;
  --mist:rgba(234,227,216,.78);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;}
.login-body{
  min-height:100vh;
  color:var(--paper);
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  background:#2f2b28;
  overflow-x:hidden;
}

/* Moving blurred backdrop */
.login-stage{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.login-blur-layer{
  position:absolute;inset:-18%;
  filter:blur(72px) saturate(1.15);
  transform:scale(1.12);
  animation:login-drift 28s ease-in-out infinite alternate;
}
.orb{
  position:absolute;border-radius:50%;
  will-change:transform;
}
.orb-a{
  width:52vmax;height:52vmax;left:-8%;top:-12%;
  background:radial-gradient(circle at 35% 40%,#f7c67c 0%,#8f6e3e 42%,transparent 70%);
  animation:orb-a 22s ease-in-out infinite alternate;
  opacity:.9;
}
.orb-b{
  width:46vmax;height:46vmax;right:-14%;top:8%;
  background:radial-gradient(circle at 60% 45%,#3d4f46 0%,#1c2822 48%,transparent 72%);
  animation:orb-b 26s ease-in-out infinite alternate;
  opacity:.95;
}
.orb-c{
  width:40vmax;height:40vmax;left:18%;bottom:-18%;
  background:radial-gradient(circle at 50% 40%,#b7a47c 0%,#4a4030 45%,transparent 70%);
  animation:orb-c 24s ease-in-out infinite alternate;
  opacity:.75;
}
.orb-d{
  width:28vmax;height:28vmax;right:18%;bottom:6%;
  background:radial-gradient(circle at 40% 40%,#7d8b82 0%,#24302b 55%,transparent 72%);
  animation:orb-d 20s ease-in-out infinite alternate;
  opacity:.7;
}
.haze{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.08),transparent 45%),
    radial-gradient(ellipse at 80% 70%,rgba(196,176,134,.12),transparent 50%);
  mix-blend-mode:soft-light;
  animation:haze-pulse 14s ease-in-out infinite;
}
.login-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center,transparent 20%,rgba(8,9,7,.55) 78%,rgba(8,9,7,.82) 100%),
    linear-gradient(180deg,rgba(8,9,7,.25),rgba(8,9,7,.55));
  backdrop-filter:blur(1.5px);
}

@keyframes login-drift{
  from{transform:scale(1.08) translate3d(-1.5%,1%,0) rotate(-1.5deg)}
  to{transform:scale(1.16) translate3d(2%,-1.5%,0) rotate(2deg)}
}
@keyframes orb-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(8%,6%,0) scale(1.12)}
}
@keyframes orb-b{
  from{transform:translate3d(0,0,0) scale(1.05)}
  to{transform:translate3d(-10%,8%,0) scale(1)}
}
@keyframes orb-c{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(6%,-10%,0) scale(1.08)}
}
@keyframes orb-d{
  from{transform:translate3d(0,0,0) scale(.95)}
  to{transform:translate3d(-8%,-6%,0) scale(1.1)}
}
@keyframes haze-pulse{
  0%,100%{opacity:.55}
  50%{opacity:.9}
}
@keyframes rise-in{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

.login-shell{
  position:relative;z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,5vw,72px);
  align-items:center;
  padding:clamp(28px,6vw,72px);
  max-width:1180px;
  margin:0 auto;
}

.login-hero{
  animation:rise-in .9s ease both;
}
.login-hero-logo{
  display:block;
  width:min(520px,92%);
  height:auto;
  margin:0 0 22px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.login-lead{
  margin:0;
  max-width:32ch;
  font-size:1rem;
  line-height:1.55;
  color:rgba(234,227,216,.72);
  font-weight:300;
}

.login-panel{
  width:min(420px,100%);
  justify-self:end;
  padding:28px 26px 22px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  animation:rise-in .9s .12s ease both;
}
.login-panel-brand{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.login-mark{
  width:48px;height:48px;border-radius:15px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#d3c19a,#8e7d5b);
  color:#17150f;font-weight:700;letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(142,125,91,.35);
}
.login-mark-img{
  width:48px;height:48px;object-fit:contain;border-radius:14px;
  background:#2f2b28;padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  border:1px solid rgba(196,176,134,.28);
}
.login-panel-brand h2{
  margin:0;font-size:1.2rem;font-weight:500;color:#f7f2e7;
}
.login-panel-brand p{
  margin:3px 0 0;font-size:.86rem;color:rgba(243,239,230,.62);font-weight:300;
}

.login-error{
  margin:0 0 14px;padding:10px 12px;border-radius:12px;
  background:rgba(179,76,72,.18);border:1px solid rgba(179,76,72,.35);
  color:#f3d4d2;font-size:.88rem;
}
.login-form{display:grid;gap:14px}
.login-field{display:grid;gap:7px}
.login-field span{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(243,239,230,.58);font-weight:500;
}
.login-field input{
  width:100%;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(12,13,11,.42);color:#f7f2e7;padding:0 14px;
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.login-field input::placeholder{color:rgba(247,242,231,.35)}
.login-field input:focus{
  border-color:rgba(196,176,134,.7);
  box-shadow:0 0 0 3px rgba(196,176,134,.18);
  background:rgba(12,13,11,.55);
}
.login-actions-row{
  display:flex;justify-content:flex-end;margin-top:-2px;
}
.login-link{
  color:rgba(212,190,150,.92);text-decoration:none;font-size:.84rem;font-weight:500;
}
.login-link:hover{text-decoration:underline;color:#f0e2c4}
.login-hint{
  margin:0;font-size:.78rem;line-height:1.45;color:rgba(243,239,230,.55);font-weight:300;
}
.login-ok{
  margin:0 0 14px;padding:10px 12px;border-radius:12px;
  background:rgba(47,125,91,.18);border:1px solid rgba(47,125,91,.38);
  color:#d7efe3;font-size:.88rem;line-height:1.45;
}
.login-error code{font-size:.8em;opacity:.9}
.login-submit{
  margin-top:4px;height:48px;border:0;border-radius:13px;cursor:pointer;
  background:linear-gradient(135deg,#d0be95,#8e7d5b);
  color:#17150f;font-weight:600;letter-spacing:.02em;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow:0 14px 30px rgba(142,125,91,.28);
}
.login-submit:hover{transform:translateY(-1px);filter:brightness(1.04)}
.login-submit:active{transform:translateY(0)}
.login-foot{
  margin:16px 0 0;text-align:center;
  font-size:.75rem;color:rgba(243,239,230,.45);letter-spacing:.04em;
}
.login-foot .login-link{font-size:.82rem}

@media (max-width:900px){
  .login-shell{
    grid-template-columns:1fr;
    align-content:end;
    min-height:100dvh;
    padding:max(20px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
    gap:20px;
  }
  .login-panel{justify-self:stretch;width:100%;padding:20px 16px 18px;border-radius:20px}
  .login-hero{text-align:center}
  .login-hero-logo{width:min(360px,92vw);margin-inline:auto}
  .login-lead{max-width:34ch;margin-inline:auto;font-size:.92rem}
  .login-blur-layer{filter:blur(48px);inset:-10%}
  .orb-a,.orb-b{width:70vmax;height:70vmax;opacity:.75}
  .orb-c,.orb-d{opacity:.45}
  .login-field input{height:48px;font-size:16px}
  .login-submit{height:50px;width:100%}
}
@media (max-width:560px){
  .login-panel-brand{gap:10px}
  .login-panel-brand h2{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .login-blur-layer,.orb,.haze,.login-hero,.login-panel{animation:none !important}
}