:root {
  --color-bg-start: #667eea;
  --color-bg-end: #764ba2;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fa;
  --color-border: #e0e0e0;
  --color-border-strong: #667eea;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-subtle: #999999;
  --color-primary: #667eea;
  --color-primary-strong: #5568d3;
  --color-accent: #28a745;
  --color-accent-strong: #218838;
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffc107;
  --color-warning-text: #856404;
  --color-danger-bg: #f8d7da;
  --color-danger-border: #dc3545;
  --color-danger-text: #721c24;
  --color-info-bg: #e8f4fd;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.3);
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-chip: 6px;
  --toast-bg: rgba(0, 0, 0, 0.85);
}

[data-theme='dark'] {
  --color-bg-start: #1e1e38;
  --color-bg-end: #0f0f1f;
  --color-surface: #222238;
  --color-surface-muted: #2a2a44;
  --color-border: #3a3a55;
  --color-border-strong: #8b8bff;
  --color-text: #f0f0f5;
  --color-text-muted: #b8b8c7;
  --color-text-subtle: #8a8aa0;
  --color-primary: #8b8bff;
  --color-primary-strong: #9a9aff;
  --color-accent: #4bd37b;
  --color-accent-strong: #39c06a;
  --color-warning-bg: #3a3622;
  --color-warning-border: #ffc107;
  --color-warning-text: #ffd968;
  --color-danger-bg: #3c2024;
  --color-danger-border: #e95d6a;
  --color-danger-text: #ffb4ba;
  --color-info-bg: #22314a;
  --color-success-bg: #1e3a28;
  --color-success-text: #9fe0b5;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.55);
  --toast-bg: rgba(255, 255, 255, 0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg-start: #1e1e38;
    --color-bg-end: #0f0f1f;
    --color-surface: #222238;
    --color-surface-muted: #2a2a44;
    --color-border: #3a3a55;
    --color-border-strong: #8b8bff;
    --color-text: #f0f0f5;
    --color-text-muted: #b8b8c7;
    --color-text-subtle: #8a8aa0;
    --color-primary: #8b8bff;
    --color-primary-strong: #9a9aff;
    --color-accent: #4bd37b;
    --color-accent-strong: #39c06a;
    --color-warning-bg: #3a3622;
    --color-warning-border: #ffc107;
    --color-warning-text: #ffd968;
    --color-danger-bg: #3c2024;
    --color-danger-border: #e95d6a;
    --color-danger-text: #ffb4ba;
    --color-info-bg: #22314a;
    --color-success-bg: #1e3a28;
    --color-success-text: #9fe0b5;
    --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.55);
    --toast-bg: rgba(255, 255, 255, 0.92);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background 0.3s ease;
}

.container {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow-card);
  max-width: 560px;
  width: 100%;
  position: relative;
}

h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--color-text);
  text-align: center;
}

.subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  font-size: 14px;
}

.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--color-primary);
  transform: rotate(15deg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  display: none;
}

.section.show {
  display: block;
}