page {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  --color-primary: #FF6B35;
  --color-primary-light: #FF8C5A;
  --color-primary-gradient: linear-gradient(135deg, #FF6B35, #FF4D6D);
  --color-accent: #7209B7;
  --color-bg: #F5F5F7;
  --color-card: #FFFFFF;
  --color-text: #1D1D1F;
  --color-text-secondary: #86868B;
  --color-border: #E5E5EA;
  --color-nav-bg: rgba(245,245,247,0.95);
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  --color-input-bg: #f8f8fa;
  --color-active-bg: #FFF0EB;
  --color-divider: #F0F0F0;
  background: var(--color-bg);
  color: var(--color-text);
}
page[data-theme="dark"] {
  --color-bg: #1C1C1E;
  --color-card: #2C2C2E;
  --color-text: #F5F5F7;
  --color-text-secondary: #98989D;
  --color-border: #38383A;
  --color-nav-bg: rgba(28,28,30,0.95);
  --color-accent: #BB86FC;
  --color-error: #FF453A;
  --color-input-bg: #3A3A3C;
  --color-active-bg: #3A3A3C;
  --color-divider: #38383A;
}

.card { background: var(--color-card); border-radius: 12px; margin: 8px 16px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.btn-primary { width: 100%; padding: 14px; background: var(--color-primary-gradient); color: white; border: none; border-radius: 10px; font-size: 17px; font-weight: 600; text-align: center; }
.input-field { width: 100%; padding: 14px 16px; background: var(--color-input-bg); border: 1px solid var(--color-border); border-radius: 10px; font-size: 17px; }
.page-title { font-size: 28px; font-weight: 600; padding: 20px 16px 8px; }
.page-subtitle { font-size: 15px; color: var(--color-text-secondary); padding: 0 16px 20px; }