/* assets/login.css */
/* Offline-safe: use installed system fonts; no internet font dependency. */

:root{
  --bg1:#0f172a;        /* slate-900 */
  --bg2:#1e293b;        /* slate-800 */
  --card:#0b1224cc;     /* translucent */
  --primary:#6366f1;    /* indigo-500 */
  --primary-2:#8b5cf6;  /* violet-500 */
  --accent:#22d3ee;     /* cyan-400 */
  --text:#e5e7eb;       /* gray-200 */
  --muted:#94a3b8;      /* slate-400 */
  --danger:#ef4444;     /* red-500 */
  --success:#22c55e;    /* green-500 */
  --shadow: 0 20px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, #1b1f3b 0%, transparent 60%),
    radial-gradient(1000px 600px at 120% 20%, #1a2648 0%, transparent 55%),
    linear-gradient(160deg,var(--bg1) 0%, var(--bg2) 100%);
  display:grid;
  place-items:center;
  overflow:auto;
}

.login-wrap{
  width:min(960px,96vw);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:2rem;
  align-items:stretch;
  padding:2rem;
}

.hero{
  position:relative;
  padding:2.2rem;
  border-radius:1.25rem;
  background:linear-gradient(135deg, rgba(20, 28, 55, .65), rgba(11, 18, 36, .65));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(400px 220px at 30% 0%, rgba(99,102,241,.25) 0%, transparent 65%),
    radial-gradient(380px 200px at 80% 20%, rgba(34,211,238,.20) 0%, transparent 65%),
    radial-gradient(500px 340px at 40% 110%, rgba(139,92,246,.22) 0%, transparent 65%);
  filter: blur(24px);
  z-index:0;
}
.brand{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.85rem; margin-bottom:1.25rem;
}
.brand img{
  width:44px; height:44px; object-fit:contain; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.brand h1{
  margin:0; font-size:1.3rem; letter-spacing:.2px; font-weight:700;
}

.hero h2{
  position:relative; z-index:1;
  margin:.25rem 0 1rem;
  font-size:2rem; font-weight:700;
  line-height:1.15;
}
.points{
  position:relative; z-index:1;
  margin:1.25rem 0 0; padding:0; list-style:none; color:var(--muted);
}
.points li{margin:.55rem 0; display:flex; align-items:flex-start; gap:.6rem}
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px; font-size:.8rem; font-weight:600;
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(34,211,238,.18));
  color:#c7d2fe;
}

.card{
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, rgba(12, 15, 32, .7), rgba(10, 12, 26, .65));
  border:1px solid rgba(148,163,184,.15);
  border-radius:1.25rem;
  padding:2rem;
  box-shadow: var(--shadow);
  position:relative;
}

.card h3{
  margin:0 0 1.25rem; font-size:1.35rem; letter-spacing:.2px;
}

.form{display:grid; gap:1rem}
.field{display:grid; gap:.5rem}
label{font-size:.9rem; color:var(--muted)}
.input{
  width:100%;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(2,6,23,.6);
  color:var(--text);
  border-radius:.9rem;
  padding:.9rem 1rem;
  outline:none;
  transition:border .15s, box-shadow .15s, transform .05s;
}
.input:focus{
  border-color: rgba(99,102,241,.7);
  box-shadow:0 0 0 4px rgba(99,102,241,.18);
}

.actions{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.5rem}
.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:.9rem; padding:.85rem 1rem; font-weight:700;
  transition: transform .08s ease, box-shadow .15s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white; box-shadow:0 10px 24px rgba(99,102,241,.32);
}
.btn-outline{
  background:transparent; color:var(--text);
  border:1px solid rgba(148,163,184,.25);
}
.meta{font-size:.86rem; color:var(--muted)}
.error{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fecaca; padding:.8rem 1rem; border-radius:.75rem;
}
.success{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#bbf7d0; padding:.8rem 1rem; border-radius:.75rem;
}

/* tiny animation accents */
.floaty{
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

/* Responsive */
@media (max-width: 820px){
  .login-wrap{ grid-template-columns: 1fr; gap:1.2rem; padding:1rem }
  .hero{ order:2 }
  .card{ order:1 }
}