/* Theme Variables */
:root {
  --color-primary: #6c63ff;
  --color-secondary: #00bfa6;
  --color-bg-start: #1f1c2c;
  --color-bg-end: #928dab;
  --color-white: #ffffff;
  --color-muted: rgba(255, 255, 255, 0.7);
  --color-soft: rgba(255, 255, 255, 0.15);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.2);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 12px;
  --transition-fast: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--color-white);
  background: linear-gradient(120deg, var(--color-bg-start), var(--color-bg-end));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Animated shifting gradient overlay */
.bg-animated {
  position: fixed;
  inset: 0;
  background: conic-gradient(from 180deg at 50% 50%, rgba(108,99,255,0.18), rgba(0,191,166,0.18), rgba(146,141,171,0.18), rgba(108,99,255,0.18));
  filter: blur(80px);
  animation: spinGradient 18s linear infinite;
  z-index: -2;
}
@keyframes spinGradient {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Floating particles */
.particles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.particles span {
  position: absolute; display: block; width: var(--s, 8px); height: var(--s, 8px);
  border-radius: 999px; background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,0.05));
  filter: blur(0.5px); opacity: 0.25; animation: floatUp var(--d, 12s) linear infinite;
}
@keyframes floatUp {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.3; }
  50% { opacity: 0.4; }
  100% { transform: translateY(-120vh) translateX(var(--x, 0)) scale(1.1); opacity: 0; }
}

/* Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.05));
  border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 20;
}
.brand { font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: inset 0 0 12px rgba(255,255,255,0.3), 0 8px 20px rgba(108,99,255,0.35);
}
.nav-actions a { color: var(--color-muted); text-decoration: none; margin-left: 14px; font-size: 14px; transition: color var(--transition-fast); }
.nav-actions a:hover { color: var(--color-white); }

/* Layout */
.main { min-height: 100dvh; display: grid; place-items: center; padding: 120px 16px 48px; }
.card {
  width: 100%; max-width: 420px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding: 28px; transform: translateY(6px) scale(0.985); opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow), box-shadow var(--transition-slow);
}
body.is-loaded .card { transform: translateY(0) scale(1); opacity: 1; }
.card-header { text-align: center; margin-bottom: 18px; }
.card-header h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; }
.card-header p { margin: 0; color: var(--color-muted); font-size: 14px; }

/* Form */
.form { display: grid; gap: 16px; margin-top: 12px; }
.field { position: relative; }
.input {
  width: 100%; padding: 16px; border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: var(--color-white); outline: none;
  transition: border var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.input::placeholder { color: transparent; }
.label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-muted); pointer-events: none; transition: all var(--transition-fast);
  background: transparent; padding: 0 6px;
}
/* Floating label */
.input:focus, .input:not(:placeholder-shown) { background: rgba(255,255,255,0.08); }
.input:focus { border-color: rgba(108,99,255,0.65); box-shadow: 0 0 0 8px rgba(108,99,255,0.12), 0 10px 25px rgba(0,0,0,0.25); }
.input:focus + .label, .input:not(:placeholder-shown) + .label {
  top: -8px; transform: none; font-size: 12px; color: #e5e7ff;
  background: linear-gradient(135deg, rgba(108,99,255,0.25), rgba(0,191,166,0.25)); border-radius: 6px;
}
.helper-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.helper-row a { color: #d7dbff; font-size: 13px; text-decoration: none; transition: opacity var(--transition-fast); }
.helper-row a:hover { opacity: 0.85; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; border: 0; border-radius: 999px; cursor: pointer; color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 10px 25px rgba(108,99,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), background-position 300ms ease;
  background-size: 200% 200%; background-position: 0% 50%;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 35px rgba(108,99,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.3); background-position: 100% 50%; }
.btn:active { transform: translateY(0) scale(0.99); }
.btn-secondary { background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); color: var(--color-white); border: 1px solid rgba(255,255,255,0.22); box-shadow: var(--shadow-soft); }
.btn-secondary:hover { filter: brightness(1.05); }

/* Divider */
.divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--color-muted); font-size: 12px; margin: 6px 0 2px; }
.divider:before, .divider:after { content: ''; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0)); }

/* Footer note */
.footer-note { text-align: center; font-size: 12px; color: var(--color-muted); margin-top: 10px; }

/* Alerts */
.toast {
  position: fixed; right: 20px; top: 84px; min-width: 260px; max-width: 420px; padding: 14px 16px;
  border-radius: var(--radius-md); color: white;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); transform: translateY(-10px) scale(0.98); opacity: 0; pointer-events: none;
  transition: transform var(--transition-slow), opacity var(--transition-slow); z-index: 50;
}
.toast.error { background: linear-gradient(135deg, rgba(231, 76, 60, 0.95), rgba(192, 57, 43, 0.95)); }
.toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* Page transitions */
body.page-exit .card { transform: translateY(8px) scale(0.985); opacity: 0; }

/* Responsive */
@media (max-width: 520px) {
  .card { padding: 22px; border-radius: 16px; }
  .card-header h1 { font-size: 24px; }
  .navbar { height: 60px; padding: 0 16px; }
  .brand .logo { width: 28px; height: 28px; border-radius: 10px; }
}

/* Utility */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.muted { color: var(--color-muted); }
.center { text-align: center; }
.small { font-size: 12px; }

/* Checkbox */
.checkbox { display: inline-flex; align-items: center; gap: 10px; user-select: none; }
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px; appearance: none; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px; background: rgba(255,255,255,0.05); position: relative; transition: all var(--transition-fast);
}
.checkbox input[type="checkbox"]:checked {
  border-color: rgba(108,99,255,0.85); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 0 0 6px rgba(108,99,255,0.15);
}
.checkbox input[type="checkbox"]:checked::after {
  content: ''; position: absolute; inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/14px 14px no-repeat;
}

/* Links */
.link { color: #d7dbff; text-decoration: none; }
.link:hover { text-decoration: underline; }