/* /admin/assets/css/auth.css */
/* ---------- Theme tokens ---------- */
:root{
  --bg1:#0ea5e9;   /* sky-500 */
  --bg2:#6366f1;   /* indigo-500 */
  --bg3:#8b5cf6;   /* violet-500 */
  --ink:#0f172a;   /* slate-900 */
  --muted:#64748b; /* slate-500 */
  --card:#ffffff;
  --border:#e5e7eb;
  --ring:#6366f1;
}

/* ---------- Resets / base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 55%,var(--bg3));
}

/* ---------- Shell & layout ---------- */
.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.auth-wrap{
  width:100%;
  max-width:1000px;
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* hero | form */
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  background:transparent;
}

/* ---------- Left hero panel ---------- */
.hero{
  position:relative;
  color:#fff;
  padding:36px 40px;
  background:
    radial-gradient(1200px 600px at -20% -10%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(800px 500px at 120% 110%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  backdrop-filter: blur(.5px);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:40px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.brand span{ font-weight:700; letter-spacing:.2px; }

.hero-body{ margin-top:48px; max-width:520px; }
.hero h1{ margin:0 0 10px 0; font-size:40px; line-height:1.05; letter-spacing:-.02em; }
.hero p{ margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.9); }

.hero-footer{
  position:absolute; left:40px; right:40px; bottom:28px;
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(255,255,255,.85); font-size:13px;
}
.chip{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  padding:6px 10px;
  border-radius:999px;
  font-weight:600;
}

/* ---------- Right form panel ---------- */
.form-side{
  background:var(--card);
  padding:38px 40px;
  border-left:1px solid rgba(255,255,255,.08);
}
.form-head h3{ margin:0; font-size:28px; letter-spacing:-.02em; }
.form-head p{ margin:6px 0 0 0; color:var(--muted); font-size:14px; }

.alert{
  margin:16px 0 0 0;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  border:1px solid transparent;
}
.alert-danger{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }

.form{ margin-top:18px; }
.field{ margin:14px 0; }
.label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:#111827; }
.control{ position:relative; }

.input{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s;
  background:#fff;
}
.input:focus{ border-color:var(--ring); box-shadow:0 0 0 4px rgba(99,102,241,.15); }
.input.with-btn{ padding-right:92px; }

.show-pass{
  position:absolute; right:6px; top:6px;
  height:32px; padding:0 10px;
  border:1px solid var(--border);
  background:#fff; border-radius:8px;
  font-size:12px; font-weight:600;
  color:#374151; cursor:pointer;
}

.row-remember{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.help a{ color:#4f46e5; text-decoration:none; font-weight:600; }
.help a:hover{ text-decoration:underline; }

/* ---------- Buttons ---------- */
.btn-primary{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border:0; border-radius:10px; cursor:pointer;
  font-weight:700; color:#fff; font-size:15px; letter-spacing:.2px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  box-shadow:0 8px 20px rgba(79,70,229,.35);
  transition: transform .04s ease, box-shadow .15s ease, opacity .2s ease;
}
.btn-primary:hover{ box-shadow:0 10px 26px rgba(79,70,229,.45); }
.btn-primary:active{ transform:translateY(1px); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .auth-wrap{ grid-template-columns:1fr; }
  .hero{ display:none; }
}