/* ---------- THEME VARIABLES ---------- */

:root {
  --bg: #f3f6fc;
  --fg: #111;
  --muted: #445;
  --card-bg: rgba(255,255,255,0.45);
  --card-border: rgba(255,255,255,0.7);
  --radius: 20px;

  --primary1: #8b5cf6;
  --primary2: #6366f1;
  --glow: rgba(139,92,246,0.45);
}

html.dark {
  --bg: #05060b;
  --fg: #e3e8ff;
  --muted: #a9b4d4;
  --card-bg: rgba(20,20,30,0.45);
  --card-border: rgba(255,255,255,0.1);
  --glow: rgba(139,92,246,0.55);
}

/* ---------- RESET ---------- */
*{
  margin:0; padding:0; box-sizing:border-box;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  min-height:100vh;
}

/* ---------- TOP BAR ---------- */
.topbar {
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding:1rem 1.4rem;
}
.brand {
  font-weight:800;
  font-size:1.2rem;
}
.theme-btn {
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background: linear-gradient(135deg, var(--primary1), var(--primary2));
  box-shadow:0 0 14px var(--glow);
}

/* ---------- BACKGROUND BLOBS ---------- */
.bg {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.bg-blobs{
  width:140%;
  height:140%;
  object-fit:cover;
  opacity:0.5;
  animation: float 22s infinite alternate ease-in-out;
  filter: blur(70px);
}
@keyframes float {
  from { transform: translate(-5%, -5%) scale(1); }
  to   { transform: translate(-10%, -8%) scale(1.1); }
}

/* ---------- MAIN PANEL ---------- */
.container {
  min-height:calc(100vh - 70px);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1.2rem;
}

.panel {
  width:min(420px, 100%);
  background: var(--card-bg);
  border-radius: var(--radius);
  border:1px solid var(--card-border);
  backdrop-filter: blur(20px) saturate(170%);
  padding:2rem;
  box-shadow:0 0 32px var(--glow);
}

h1 {
  text-align:center;
  font-size:1.9rem;
  margin-bottom:.6rem;
}

.gradient {
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  -webkit-background-clip: text;
  color:transparent;
}

.subtitle {
  text-align:center;
  color:var(--muted);
  margin-bottom:1.8rem;
}

/* ---------- FORM ---------- */
.form {
  display:grid;
  gap:1.2rem;
}

label {
  color:var(--muted);
  font-size:.9rem;
}

input {
  width:100%;
  padding:.9rem 1rem;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.2);
  color:var(--fg);
  font-size:1rem;
  backdrop-filter: blur(6px);
  transition:.25s;
}
html.dark input {
  background:rgba(0,0,0,0.3);
  border-color:rgba(255,255,255,0.1);
}
input:focus {
  outline:none;
  border-color:var(--primary1);
  box-shadow: 0 0 12px var(--glow);
}

/* ---------- BUTTONS ---------- */
.btn {
  padding:.85rem 1rem;
  border-radius: var(--radius);
  border:none;
  cursor:pointer;
  transition:.25s;
  font-weight:600;
  text-align:center;
}

.btn.primary {
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  color:white;
  box-shadow:0 0 16px var(--glow);
}

.btn.primary:hover {
  box-shadow:0 0 22px var(--glow);
}

.btn.link {
  background:none;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
}
.btn.link:hover {
  text-decoration:underline;
  color:var(--fg);
}

/* ---------- MOBILE ---------- */
@media (max-width:480px) {
  h1 {
    font-size:1.6rem;
  }
  .panel {
    padding:1.5rem;
  }
}