/* Login + Register pages. Same look as the home page (index.php). */
:root{
  --bg:#070b14; --bg-2:#0b1120; --panel:#0d1424;
  --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#e8edf6; --muted:#8b97ad; --lime:#a3e635; --cyan:#22d3ee; --gold:#fbbf24;
  --grad:linear-gradient(120deg,#a3e635 0%,#34d399 45%,#22d3ee 100%);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text); font-size:16px; line-height:1.6;
  font-family:'Plus Jakarta Sans','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.hi{ font-family:'Noto Sans Devanagari','Plus Jakarta Sans',sans-serif; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:14px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:15px; line-height:1.4; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-main{ background:var(--grad); color:#06120a; box-shadow:0 10px 30px -8px rgba(52,211,153,.55); }
.btn-main:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(52,211,153,.7); }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--surface-2); border-color:rgba(163,230,53,.5); }
.btn-sm{ padding:9px 16px; font-size:14px; border-radius:12px; }
.btn-block{ width:100%; }
.btn:focus-visible, .field input:focus-visible, .field select:focus-visible, .pw-toggle:focus-visible, .auth-card a:focus-visible{
  outline:2px solid var(--lime); outline-offset:2px;
}

/* Header */
.auth-nav{ position:relative; z-index:5; border-bottom:1px solid var(--line); background:rgba(7,11,20,.82); }
.auth-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:74px; }
.brand{ display:flex; align-items:center; background:#fff; border-radius:12px; padding:5px 10px; box-shadow:0 6px 20px -6px rgba(163,230,53,.35); flex-shrink:0; }
.brand img{ height:30px; width:auto; }
.auth-nav-cta{ display:flex; gap:10px; }

/* Page */
.auth-main{ position:relative; flex:1 0 auto; display:flex; align-items:center; padding:56px 0; }
.auth-glow{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.auth-glow::before{ content:""; position:absolute; width:720px; height:720px; left:-220px; top:-260px; border-radius:50%; background:radial-gradient(circle,rgba(163,230,53,.18),transparent 65%); }
.auth-glow::after{ content:""; position:absolute; width:760px; height:760px; right:-260px; bottom:-300px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.14),transparent 65%); }
.auth-gridbg{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
}
.auth-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
.auth-grid.is-wide{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }

/* Left side */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--line-2); font-size:13.5px; font-weight:600; }
.eyebrow b{ background:var(--grad); color:#06120a; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.auth-side h1{ font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(2.2rem,4.2vw,3.5rem); line-height:1.06; letter-spacing:-.03em; margin:22px 0 16px; }
.auth-lead{ color:var(--muted); font-size:1.05rem; max-width:500px; margin:0 0 28px; }
.auth-points{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:14px; }
.auth-points li{ display:flex; align-items:flex-start; gap:12px; font-weight:600; font-size:15px; }
.auth-points i{ width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; color:var(--lime); background:rgba(163,230,53,.12); border:1px solid rgba(163,230,53,.25); }
.auth-points small{ display:block; color:var(--muted); font-weight:500; font-size:13.5px; }
.auth-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.auth-chips span{ padding:7px 13px; border-radius:11px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:13.5px; font-weight:600; }

/* Form card */
.auth-card{
  width:100%; max-width:460px; justify-self:end; padding:34px; border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) , var(--panel);
  border:1px solid var(--line-2); box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.is-wide .auth-card{ max-width:580px; }
.auth-card h2{ font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 6px; }
.auth-card-sub{ color:var(--muted); font-size:14.5px; margin:0 0 24px; }
.field{ display:block; margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 14px; }
.field-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; font-size:13.5px; font-weight:700; }
.field-label a{ color:var(--lime); font-weight:700; font-size:13px; }
.field-label a:hover{ text-decoration:underline; }
.field-box{ position:relative; display:block; }
.field-box > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:16px; pointer-events:none; }
.field input, .field select{
  width:100%; height:50px; padding:0 14px 0 42px; border-radius:13px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--text);
  font-family:inherit; font-size:15px; font-weight:500;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder{ color:#6f7b91; }
.field input:focus, .field select:focus{ border-color:var(--lime); background:rgba(255,255,255,.07); box-shadow:0 0 0 3px rgba(163,230,53,.15); outline:0; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; }
.field select option{ background:var(--panel); color:var(--text); }
.field-box.has-select::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); pointer-events:none; }
.field input.has-toggle{ padding-right:48px; }
.field input:-webkit-autofill, .field input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 60px #151c2e inset; caret-color:var(--text); }
.pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pw-toggle:hover{ color:var(--text); background:var(--surface-2); }
.auth-card .btn-main{ margin-top:6px; height:50px; }
.auth-alt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.auth-alt .btn{ padding:11px 10px; font-size:14px; }
.auth-switch{ margin:18px 0 0; text-align:center; color:var(--muted); font-size:14.5px; }
.auth-switch a{ color:var(--lime); font-weight:700; }
.auth-switch a:hover{ text-decoration:underline; }
.auth-note{ display:flex; align-items:center; gap:8px; margin:0 0 16px; padding:10px 12px; border-radius:11px; background:rgba(163,230,53,.09); border:1px solid rgba(163,230,53,.25); font-size:13.5px; font-weight:600; }
.auth-note i{ color:var(--lime); }

/* Footer */
.auth-foot{ position:relative; border-top:1px solid var(--line); background:var(--bg-2); padding:18px 0; color:var(--muted); font-size:13.5px; }
.auth-foot .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; }
.auth-foot nav{ display:flex; gap:18px; }
.auth-foot a:hover{ color:var(--lime); }

/* Popups from login.php / register.php */
.swal2-popup{ background:#0d1424 !important; color:var(--text) !important; border:1px solid var(--line-2) !important; border-radius:20px !important; }
.swal2-title{ color:var(--text) !important; }
.swal2-html-container, .swal2-content{ color:var(--muted) !important; }
.swal2-styled.swal2-confirm{ background:var(--grad) !important; color:#06120a !important; font-weight:700 !important; border-radius:12px !important; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

@media (max-width:960px){
  .auth-main{ padding:32px 0 44px; align-items:flex-start; }
  .auth-grid, .auth-grid.is-wide{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .auth-card, .is-wide .auth-card{ order:1; justify-self:center; max-width:560px; }
  .auth-side{ order:2; max-width:560px; margin:0 auto; width:100%; text-align:center; }
  .auth-side .eyebrow, .auth-side h1, .auth-lead, .auth-points{ display:none; }
  .auth-chips{ justify-content:center; }
}
@media (max-width:560px){
  .wrap{ padding:0 16px; }
  .auth-nav .wrap{ height:64px; }
  .brand img{ height:26px; }
  .auth-card{ padding:24px 18px; border-radius:20px; }
  .field-row, .auth-alt{ grid-template-columns:minmax(0,1fr); }
  .auth-nav-cta .btn-ghost{ display:none; }
  .auth-foot .wrap{ justify-content:center; text-align:center; }
}