/* ========= Base Typography & Layout ========= */
:root{
  /* Light mode palette */
  --bg-grad-1:#e3f2fd;
  --bg-grad-2:#bbdefb;
  --bg-grad-3:#90caf9;

  --txt:#1a237e;
  --muted:#37417b;
  --accent:#1976d2;
  --accent-dark:#1565c0;
  --border:rgba(255,255,255,0.4);
  --card-bg:rgba(255,255,255,0.3);
  --shadow-1:0 15px 35px rgba(31,38,135,0.3), 0 5px 15px rgba(31,38,135,0.2);
  --shadow-2:0 20px 40px rgba(31,38,135,0.4), 0 10px 20px rgba(31,38,135,0.3);

  /* Dark mode palette */
  --dm-bg-1:hsl(232 25% 11%);
  --dm-bg-spot-1:rgba(99,102,241,.18);
  --dm-bg-spot-2:rgba(56,189,248,.10);
  --dm-card:linear-gradient(180deg, rgba(35,42,85,.75), rgba(30,36,73,.7));
  --dm-text:hsl(220 27% 90%);
  --dm-sub:hsl(220 15% 70%);
  --dm-border:hsl(232 20% 22%);
  --dm-ac:hsl(222 86% 60%);
  --dm-ac-2:hsl(210 100% 70%);
  --dm-ring:hsl(222 100% 66%);
  --dm-shadow:0 18px 50px rgba(0,0,0,.65);
}

*{ box-sizing:border-box; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s; }

body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(145deg, var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3));
  background-attachment: fixed;
  margin:0; padding:0;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  color:var(--txt);
}

/* ========= Card / Glass ========= */
.glass-container{
  position:relative;
  background: var(--card-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius:20px;
  padding:30px 20px;
  max-width:400px; width:90%;
  box-shadow: var(--shadow-1), inset 0 0 20px rgba(255,255,255,0.3);
  color:var(--txt);
  text-align:center;
  border:1px solid var(--border);
  transform: translateY(0);
  transition: transform .3s ease, box-shadow .3s ease;
  margin:20px;
}
.glass-container:hover{ transform: translateY(-5px); box-shadow: var(--shadow-2), inset 0 0 20px rgba(255,255,255,0.4); }

/* Droplet gloss */
.glass-container::before{
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%);
  border-radius:20px 20px 0 0; z-index:-1;
}

/* ========= Dark Mode ========= */
body.dark-mode{
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--dm-bg-spot-1), transparent 50%),
    radial-gradient(900px 500px at 120% 20%, var(--dm-bg-spot-2), transparent 55%),
    var(--dm-bg-1);
  color:var(--dm-text);
}
body.dark-mode .glass-container{
  background: var(--dm-card);
  color:var(--dm-text);
  border:1px solid var(--dm-border);
  box-shadow: var(--dm-shadow);
  backdrop-filter: blur(8px);
}
body.dark-mode .glass-container:hover{ box-shadow: 0 22px 56px rgba(0,0,0,.7); }
body.dark-mode .glass-container::before{
  background: linear-gradient(to bottom, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 100%);
}

/* ========= Top Right Theme Button ========= */
.dark-mode-btn{
  position:absolute; top:15px; right:15px;
  background: rgba(255,255,255,0.2);
  color: var(--txt);
  border:1px solid var(--border);
  border-radius:20px; padding:8px 12px;
  cursor:pointer; font-size:14px; backdrop-filter: blur(5px);
}
.dark-mode-btn:hover{ background: rgba(255,255,255,0.3); transform: translateY(-2px); }
body.dark-mode .dark-mode-btn{ background: rgba(255,255,255,.08); color:var(--dm-text); border-color:var(--dm-border); }
body.dark-mode .dark-mode-btn:hover{ background: rgba(255,255,255,.12); }

/* ========= Headings ========= */
h2{ margin-bottom:20px; font-weight:600; color:#0d47a1; }
body.dark-mode h2{ color:var(--dm-text); }

/* ========= Forms ========= */
.form-group{ margin-bottom:15px; text-align:left; }
.form-group label{ display:block; margin-bottom:5px; font-size:14px; color:#0d47a1; }
body.dark-mode .form-group label{ color:var(--dm-sub); }

.form-group input,
.form-group select{
  width:100%; padding:12px; border:none; border-radius:8px;
  background: rgba(255,255,255,0.8);
  font-size:14px; color:var(--txt);
  box-shadow: 0 4px 8px rgba(31,38,135,0.15);
  transform: translateY(0);
}
.form-group input:focus,
.form-group select:focus{
  outline:none;
  box-shadow: 0 6px 12px rgba(31,38,135,0.25);
  transform: translateY(-2px);
  background: rgba(255,255,255,0.9);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--dm-text);
  border:1px solid var(--dm-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 14px rgba(0,0,0,.35);
}
body.dark-mode .form-group input::placeholder{ color:rgba(227,242,253,.6); }
body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus{
  border-color: var(--dm-ring);
  box-shadow: 0 0 0 3px rgba(99,102,241,.35), 0 10px 18px rgba(0,0,0,.45);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* ========= Buttons ========= */
.btn{
  width:100%; padding:12px; border:none; border-radius:8px;
  background-color: var(--accent); color:#fff; font-size:16px;
  cursor:pointer; margin-top:10px;
  box-shadow: 0 4px 8px rgba(25,118,210,0.3);
  transform: translateY(0);
}
.btn:hover{ background-color: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(25,118,210,0.4); }
.btn:active{ transform: translateY(-1px); box-shadow: 0 2px 4px rgba(25,118,210,0.3); }

body.dark-mode .btn{
  background: linear-gradient(180deg, var(--dm-ac), hsl(222 82% 52%));
  color:#fff;
  border:1px solid rgba(59,130,246,.5);
  box-shadow: 0 10px 20px rgba(59,130,246,.28);
}
body.dark-mode .btn:hover{
  background: linear-gradient(180deg, hsl(222 90% 66%), hsl(222 86% 58%));
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(59,130,246,.34);
}

/* ========= Links & Messages ========= */
.toggle-link{ display:block; margin-top:15px; color:#1976d2; text-decoration:none; font-size:14px; cursor:pointer; }
.toggle-link:hover{ text-decoration:underline; }
body.dark-mode .toggle-link{ color:var(--dm-ac-2); }

.message{ padding:10px; border-radius:8px; margin-bottom:15px; font-size:14px; color:var(--txt); }
.error{ background-color: rgba(244,67,54,0.2); }
.success{ background-color: rgba(76,175,80,0.2); }
body.dark-mode .message{ color:var(--dm-text); }
body.dark-mode .error{
  background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.10));
  border:1px solid rgba(239,68,68,.35);
}
body.dark-mode .success{
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(34,197,94,.10));
  border:1px solid rgba(34,197,94,.35);
}

/* ========= Loader ========= */
.loader-overlay{
  position:fixed; inset:0;
  background: rgba(255,255,255,0.7);
  display:none; justify-content:center; align-items:center; z-index:9999;
}
body.dark-mode .loader-overlay{ background: rgba(0,0,0,0.7); }

.spinner{
  border:8px solid #f3f3f3;
  border-top:8px solid #1976d2;
  border-radius:50%;
  width:60px; height:60px;
  animation: spin 1s linear infinite;
}
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ========= Form links row ========= */
.form-links{ display:flex; justify-content:space-between; margin-top:15px; }
.form-links .toggle-link{ flex:1; text-align:center; padding:5px 0; }

/* ========= Password eye icon ========= */
.password-container{ position:relative; width:100%; }
.password-container input{ width:100%; padding-right:40px; }
.password-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.password-toggle:hover{ background-color: rgba(0,0,0,0.1); }
body.dark-mode .password-toggle:hover{ background-color: rgba(255,255,255,0.1); }
.eye-icon{ width:24px; height:24px; fill: var(--txt); }
body.dark-mode .eye-icon{ fill: var(--dm-text); }

/* ========= Select defaults ========= */
select, option{ color:#1a237e; background-color: rgba(255,255,255,0.7); }
body.dark-mode select, body.dark-mode option{
  background-color: rgba(41,53,147,0.5); color:var(--dm-text);
}

/* ========= CAPTCHA inline: image | input | tiny refresh ========= */
.captcha-row{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
#captchaImg{
  width:140px; height:48px; object-fit:contain;
  border-radius:6px; background: rgba(255,255,255,0.6);
  box-shadow: 0 2px 6px rgba(31,38,135,0.15);
}
.form-group .captcha-row input#captcha{
  width:120px !important; max-width:120px !important; padding:8px 10px;
}
.captcha-refresh{
  width:32px; height:32px; padding:0; font-size:14px; line-height:32px;
  border-radius:6px;
  border:1px solid rgba(25,118,210,0.35);
  background: rgba(25,118,210,0.08);
  color:#0d47a1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.captcha-refresh:hover{ background: rgba(25,118,210,0.15); }
body.dark-mode #captchaImg{ background: rgba(255,255,255,.04); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
body.dark-mode .captcha-refresh{
  border-color: rgba(255,255,255,0.35);
  background: rgba(59,130,246,.12);
  color: var(--dm-ac-2);
}
body.dark-mode .captcha-refresh:hover{ background: rgba(59,130,246,.18); }

/* ========= Responsive ========= */
@media (max-width:480px){
  .glass-container{ padding:20px 15px; }
  .captcha-row{ gap:6px; }
  #captchaImg{ width:120px; height:42px; }
  .form-group .captcha-row input#captcha{
    width:100px !important; max-width:100px !important; padding:6px 8px;
  }
  .captcha-refresh{ width:28px; height:28px; font-size:13px; }
}