/* ===========================
   Dark Blue Theme (no externals)
   =========================== */

/* ---- Color system ---- */
:root{
  /* Core dark blues */
  --bg-900: #0b1220;     /* page */
  --bg-800: #0f172a;     /* deep panel */
  --bg-700: #141e34;     /* card base */
  --bg-600: #182745;     /* hovered card / inputs */
  --stroke: rgba(148, 163, 184, 0.18);

  /* Accent gradient (blue -> indigo) */
  --ac-1: #5ea2ff;
  --ac-2: #466ef6;

  /* Text */
  --text-100: #e6edf6;
  --text-300: #b8c4d6;
  --muted:    #8aa0bd;

  /* States */
  --success: #34d399;
  --error:   #f87171;

  /* Shadows / glass */
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.09);

  /* Focus ring */
  --ring: rgba(94, 162, 255, 0.65);

  /* Heading scale */
  --fs-h1: clamp(1.85rem, 2.2vw + 1rem, 2.35rem);
  --fs-h2: clamp(1.4rem,  1.6vw + 0.9rem, 1.8rem);
  --fs-h3: clamp(1.15rem, 1.0vw + 0.8rem, 1.4rem);
}

/* ---- Base reset ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text-100);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(1100px 500px at 20% 0%, #0f1b36 0, transparent 60%),
    radial-gradient(900px 500px at 80% 10%, #142247 0, transparent 60%),
    var(--bg-900);
}

/* Decorative blur blobs (GPU friendly) */
.bg::before,.bg::after{
  content:'';
  position:fixed; inset:auto auto 8% -8%;
  width:50vw; height:50vw; filter:blur(100px); opacity:.22;
  background: conic-gradient(from 160deg at 50% 50%, #5ea2ff, #7286ff, #36c6f0, #5ea2ff);
  transform: translateZ(0);
}

/* ---- Layout ---- */
main{min-height:100dvh; display:grid; place-items:center; padding:48px 16px}

/* ---- Card ---- */
.card{
  width:min(440px, 94vw);
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:28px 24px;
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,.28);
  box-shadow:
    0 16px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6{
  margin:0 0 .75rem 0;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--text-100);
}
h1{font-size:var(--fs-h1); font-weight:750}
h2{font-size:var(--fs-h2); font-weight:650; color:var(--text-100)}
h3{font-size:var(--fs-h3); font-weight:650; color:var(--text-100)}
.card h1{margin-bottom:.6rem}

/* ---- Logo / icon ---- */
.logo{font-size:42px; line-height:1; margin-bottom:10px; filter:drop-shadow(0 4px 10px rgba(94,162,255,.25))}

/* ---- Text bits ---- */
.tiny{margin-top:12px; color:var(--muted); font-size:12px}
.hint{font-size:12px; color:var(--muted)}
.error{
  color:var(--error);
  background:rgba(248,113,113,.07);
  border:1px solid rgba(248,113,113,.28);
  padding:10px 12px; border-radius:10px; margin-bottom:8px;
}
.success{
  color:var(--success);
  background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.30);
  padding:10px 12px; border-radius:10px; margin-bottom:8px;
}

/* ---- Forms ---- */
.form{display:flex; flex-direction:column; gap:12px}
label{font-size:13px; color:var(--text-300)}

input, select{
  width:100%; padding:12px 14px;
  border-radius:12px; outline:none;
  background: linear-gradient(180deg, rgba(24,39,69,.85), rgba(20,30,52,.85));
  border:1px solid rgba(148,163,184,.22);
  color:var(--text-100);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{color:#8aa0bd}

input:hover, select:hover{
  border-color: rgba(148,163,184,.32);
  background: linear-gradient(180deg, rgba(26,43,77,.92), rgba(22,34,60,.92));
}
input:focus, select:focus{
  border-color: rgba(94,162,255,.7);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Two-column helper (login 2FA code + hint) */
.two-col{display:flex; gap:12px; align-items:end}
@media (max-width:460px){ .two-col{flex-direction:column; align-items:stretch} }

/* ---- Buttons ---- */
button{
  margin-top:4px;
  padding:12px 14px;
  border-radius:12px; border:1px solid transparent;
  background: linear-gradient(180deg, var(--ac-1), var(--ac-2));
  color:white; font-weight:700; letter-spacing:.01em;
  cursor:pointer;
  box-shadow:
    0 6px 22px rgba(70,110,246,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(70,110,246,.45), inset 0 1px 0 rgba(255,255,255,.18) }
button:active{ transform: translateY(0); filter: brightness(.98) }

button.secondary{
  background: linear-gradient(180deg, rgba(27,43,78,.8), rgba(22,34,60,.8));
  border-color: rgba(148,163,184,.32);
  color: var(--text-100);
  box-shadow:none;
}
button.secondary:hover{
  border-color: rgba(148,163,184,.45);
  background: linear-gradient(180deg, rgba(31,50,90,.9), rgba(26,41,73,.9));
}

/* ---- Links ---- */
a.link{
  display:inline-block; margin-top:8px;
  color: var(--ac-1); text-decoration: none; font-weight: 600;
}
a.link:hover{ text-decoration: underline }

/* ---- QR holder (2FA) ---- */
.qr{display:grid; place-items:center; margin:14px 0}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}