:root{
  --bg:#0b1220; --bg2:#10182b;
  --diag1:#152240; --diag2:#1a2c55;
  --card:rgba(255,255,255,.10); --glass:blur(12px);
  --text:#eaf2ff; --muted:#9fb0cc;
  --stroke:rgba(255,255,255,.12);
  --brand:#6aa6ff; --brand2:#3cfaa0;
  --accent:#2a66ff;
  --shadow:0 18px 60px rgba(0,0,0,.4);
}
html[data-theme="light"]{
  --bg:#f6f8ff; --bg2:#eff3ff;
  --diag1:#dfe7ff; --diag2:#f1f5ff;
  --card:rgba(255,255,255,.65); --glass:blur(10px);
  --text:#0f1629; --muted:#596680;
  --stroke:rgba(15,22,41,.12);
  --brand:#2a66ff; --brand2:#36ffa8;
  --accent:#1e4fff;
  --shadow:0 18px 60px rgba(30,64,255,.18);
}

/* Root */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial}

/* Background diagonals + noise */
.auth-bg{position:fixed;inset:0;z-index:-2}
.auth-gradient{
  position:absolute;inset:0;
  background:
   linear-gradient(160deg, color-mix(in srgb,var(--brand) 12%, transparent) 0 25%, transparent 25% 100%),
   linear-gradient(-20deg, var(--diag1) 0 55%, var(--diag2) 55% 100%);
  mask-image:radial-gradient(70% 110% at 80% -10%, #000 60%, transparent 100%);
}
.auth-noise{
  position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 10 10'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='1' cy='1' r='.25'/%3E%3Ccircle cx='5' cy='2' r='.18'/%3E%3Ccircle cx='8' cy='5' r='.22'/%3E%3Ccircle cx='2' cy='7' r='.16'/%3E%3C/g%3E%3C/svg%3E");
}

/* Layout shell */
.auth-shell{
  min-height:100dvh; display:grid; grid-template-columns: 1.1fr 1fr;
  gap:24px; padding:40px clamp(14px,3vw,32px);
}
@media (max-width: 980px){ .auth-shell{grid-template-columns:1fr; padding-top:24px} }

/* LEFT panel */
.auth-left{
  position:relative; border:1px solid var(--stroke); border-radius:22px;
  padding:28px; backdrop-filter:var(--glass); background:var(--card); box-shadow:var(--shadow);
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
}
.auth-brand{display:flex; flex-direction:column; gap:10px}
.auth-logo{width:156px; height:156px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow)}
.auth-brand-title{font-size:clamp(26px,3.3vw,34px); margin:4px 0 0}
.auth-brand-sub{margin:0; color:var(--muted); font-weight:600}

.auth-rail{position:relative; margin:18px 0 10px}
.rail-svg{width:100%; height:120px; display:block; opacity:.9}
.auth-train{
  position:absolute; left:0px; top:51px; width:120px; height:20px; border-radius:7px;
  background:linear-gradient(90deg,var(--brand2), transparent 60%);
  filter:drop-shadow(0 0 16px color-mix(in srgb, var(--brand2) 60%, transparent));
  animation:train 4.8s linear infinite;
}
@keyframes train{to{transform:translateX(calc(100% + 740px))}}

.auth-footer{display:flex; gap:10px; align-items:center}
.ghost-btn, .ghost-select{
  height:40px; padding:0 12px; border:1px solid var(--stroke); border-radius:12px;
  background:color-mix(in srgb, var(--card) 80%, transparent); color:var(--text); backdrop-filter:var(--glass);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.ghost-btn{width:40px; justify-content:center}
.ghost-select select{background:transparent; border:none; color:inherit; font-weight:700}

/* RIGHT area */
.auth-right{display:grid; place-items:center}
.auth-card{
  width:min(520px, 94vw); border:1px solid var(--stroke); border-radius:22px;
  background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:var(--glass);
  padding:24px 22px; box-shadow:var(--shadow); 
}
.auth-card-head{margin-bottom:6px; text-align: center;}
.auth-card-head h2{margin:0 0 6px}
.muted{color:var(--muted)}

/* Form */
.auth-form{display:grid; gap:12px; margin-top:10px}
.auth-field{display:grid; gap:8px}
.lbl{font-weight:800}
.inp{
  display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:0;
  border:1px solid var(--stroke); border-radius:14px; background:rgba(0,0,0,.06);
}
.inp i{opacity:.9; display:grid; place-items:center; color:var(--brand)}
.inp input{
  border:none; outline:none; background:transparent; color:var(--text);
  padding:12px 10px; font-size:16px;
}
.peek{border:none; background:transparent; color:var(--muted); cursor:pointer; height:100%}
.peek:hover{color:var(--brand)}

.auth-actions{display:flex; justify-content:space-between; align-items:center}
.remember{display:flex; gap:8px; align-items:center; font-weight:600}

.auth-btn{
  height:48px; width:100%; border-radius:14px; border:1px solid var(--stroke);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  color:#fff; font-weight:900; letter-spacing:.2px; box-shadow:var(--shadow); cursor:pointer;
}
.auth-btn:active{transform:translateY(1px)}

.auth-alert{
  margin:6px 0; padding:10px 12px; border-radius:12px;
  border:1px solid color-mix(in srgb, #ff4d4f 30%, var(--stroke));
  background:color-mix(in srgb, #ff4d4f 14%, transparent);
}

/* Loader */
.auth-loader{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; gap:12px;
  background:color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter:blur(6px); z-index:20;
}
.auth-loader .bar{width:min(360px,72vw); height:8px; border:1px solid var(--stroke); border-radius:6px; background:rgba(255,255,255,.15); overflow:hidden}
.auth-loader .fill{display:block; width:0; height:100%; background:linear-gradient(90deg, var(--brand), var(--brand2)); animation:loading 1.4s ease-in-out infinite}
.auth-loader .txt{color:var(--muted); font-weight:900; letter-spacing:.3px}
@keyframes loading{0%{width:0}60%{width:94%}100%{width:100%}}

/* Mobile */
@media (max-width: 520px){
  .auth-left{display:none}
  .auth-shell{padding:20px 12px}
}