:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #f6efe6;
  --page-bg: #f6efe6;
  --page-glow-top: rgba(226, 183, 140, 0.34);
  --page-glow-bottom: rgba(145, 167, 187, 0.22);
  --surface: rgba(255,255,255,0.8);
  --surface-soft: rgba(255,255,255,0.68);
  --border-color: rgba(148,163,184,0.18);
  --text-muted: #64748b;
  --accent: #8b6a55;
  --accent-soft: rgba(139,106,85,0.12);
  --page-text: #1f2937;
  --surface-shadow: 0 25px 70px rgba(15,23,42,0.08);
  --shadow-soft: 0 30px 90px rgba(148,163,184,0.18);
  --glow-shadow: 0 24px 70px rgba(194, 153, 112, 0.16);
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, var(--page-glow-top), transparent 24%),
    radial-gradient(circle at bottom right, var(--page-glow-bottom), transparent 22%),
    var(--page-bg);
  color: var(--page-text);
  transition: background .25s ease, color .25s ease;
}

html.dark {
  color-scheme: dark;
  color: #e6e7ea;
  background: #12171f;
  --page-bg: #12171f;
  --page-glow-top: rgba(116,132,154,0.08);
  --page-glow-bottom: rgba(33,40,55,0.08);
  --surface: rgba(18,23,31,0.86);
  --surface-soft: rgba(18,23,31,0.72);
  --border-color: rgba(138,149,169,0.14);
  --text-muted: #a0aec0;
  --accent: #5c6f8c;
  --accent-soft: rgba(92,111,140,0.14);
  --page-text: #e6e7ea;
  --surface-shadow: 0 25px 70px rgba(15,23,42,0.22);
  --shadow-soft: 0 30px 90px rgba(30,38,55,0.25);
  --glow-shadow: 0 24px 70px rgba(44,60,80,0.08);
}

html.dark body {
  background: radial-gradient(circle at top left, var(--page-glow-top), transparent 24%),
    radial-gradient(circle at bottom right, var(--page-glow-bottom), transparent 22%),
    var(--page-bg);
  color: var(--page-text);
}

html {
  scroll-behavior: smooth;
}

.container {
  max-width: 1200px;
}

.surface,
.panel,
.card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(18px);
  box-shadow: var(--surface-shadow);
}

.surface-soft {
  background: var(--surface-soft);
}

.btn-gradient {
  background-image: linear-gradient(135deg, rgba(76,93,111,1), rgba(27,32,43,1));
}

.btn-gradient:hover {
  transform: translateY(-1px);
}

.glow {
  box-shadow: var(--glow-shadow);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.text-glow {
  text-shadow: 0 10px 25px rgba(123,156,198,0.1);
}

.card-hero {
  min-height: 220px;
}

.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(100%, 360px);
  z-index: 60;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  margin-top: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  background: rgba(30,38,55,0.85);
  color: #e2e8f0;
  box-shadow: 0 24px 110px rgba(30,38,55,0.15);
  animation: toastIn 0.36s ease both;
}

.toast-item.success {
  background: linear-gradient(135deg, #4a9d83, #6fa57d);
}

.toast-item.warning {
  background: linear-gradient(135deg, #c48454, #d4956a);
}

.toast-item.error {
  background: linear-gradient(135deg, #b85a5a, #c47575);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.skeleton {
  background: linear-gradient(90deg, rgba(160,174,192,0.08), rgba(160,174,192,0.2), rgba(160,174,192,0.08));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.page-title {
  letter-spacing: -0.02em;
}

.brand-gradient {
  background: linear-gradient(135deg, #5b8fc7, #a082b4);
  -webkit-background-clip: text;
  color: transparent;
}

@media (max-width: 768px) {
  .panel { border-radius: 1.5rem; }
  .auth-page-main {
    min-height: calc(100vh - 3rem);
    padding-bottom: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-page-main > div {
    width: 100%;
  }
  .auth-action-button {
    width: 100%;
    position: sticky;
    bottom: 1rem;
    z-index: 10;
  }
}