:root {
  --swarmi: #EC962C;
  --swarmi-dark: #B07020;
  --swarmi-light: rgba(236,150,44,0.10);
  --fresh: #26C72E;
  --fresh-dark: #1B8F20;
  --fresh-light: rgba(38,199,46,0.10);
  --accent-blue: #2C83EC;
  --accent-blue-light: rgba(44,131,236,0.10);
  --pink: #EC2DE2;
  --pink-light: rgba(236,45,226,0.10);
  --surface: #F2F2F7;
  --card: #FFFFFF;
  --card-hover: #FAFAFA;
  --text: #1C1C1E;
  --text-secondary: #636366;
  --label: #8E8E93;
  --separator: rgba(60,60,67,0.12);
  --warning: #FF9F0A;
  --urgent: #FF453A;
  --purple: #AF52DE;
  --teal: #5AC8FA;
  --fill-tertiary: rgba(118,118,128,0.12);
  --fill-quaternary: rgba(118,118,128,0.08);
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.14);
  --glass: rgba(242,242,247,0.75);
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --muted: #71717A;
  --muted-foreground: #A1A1AA;
  --ring: rgba(0,0,0,0.08);
  --glass-card: rgba(255,255,255,0.68);
  --glass-card-strong: rgba(255,255,255,0.82);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --swarmi: #F4A840;
    --swarmi-dark: #D09030;
    --swarmi-light: rgba(244,168,64,0.10);
    --fresh: #30D838;
    --fresh-dark: #26C72E;
    --fresh-light: rgba(48,216,56,0.12);
    --accent-blue: #4A9AF4;
    --accent-blue-light: rgba(74,154,244,0.12);
    --pink: #F450EA;
    --pink-light: rgba(244,80,234,0.12);
    --surface: #000000;
    --card: #1C1C1E;
    --card-hover: #2C2C2E;
    --text: #F5F5F7;
    --text-secondary: #AEAEB2;
    --label: #8E8E93;
    --separator: rgba(84,84,88,0.65);
    --fill-tertiary: rgba(118,118,128,0.24);
    --fill-quaternary: rgba(118,118,128,0.18);
    --border: rgba(255,255,255,0.10);
    --border-hover: rgba(255,255,255,0.16);
    --glass: rgba(0,0,0,0.75);
    --muted: #A1A1AA;
    --muted-foreground: #71717A;
    --ring: rgba(255,255,255,0.10);
    --glass-card: rgba(28,28,30,0.72);
    --glass-card-strong: rgba(28,28,30,0.85);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.12);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15);
  }
}

:root[data-theme="dark"] {
  --swarmi: #F4A840;
  --swarmi-dark: #D09030;
  --swarmi-light: rgba(244,168,64,0.10);
  --fresh: #30D838;
  --fresh-dark: #26C72E;
  --fresh-light: rgba(48,216,56,0.12);
  --accent-blue: #4A9AF4;
  --accent-blue-light: rgba(74,154,244,0.12);
  --pink: #F450EA;
  --pink-light: rgba(244,80,234,0.12);
  --surface: #000000;
  --card: #1C1C1E;
  --card-hover: #2C2C2E;
  --text: #F5F5F7;
  --text-secondary: #AEAEB2;
  --label: #8E8E93;
  --separator: rgba(84,84,88,0.65);
  --fill-tertiary: rgba(118,118,128,0.24);
  --fill-quaternary: rgba(118,118,128,0.18);
  --border: rgba(255,255,255,0.10);
  --border-hover: rgba(255,255,255,0.16);
  --glass: rgba(0,0,0,0.75);
  --muted: #A1A1AA;
  --muted-foreground: #71717A;
  --ring: rgba(255,255,255,0.10);
  --glass-card: rgba(28,28,30,0.72);
  --glass-card-strong: rgba(28,28,30,0.85);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--swarmi-dark); text-decoration: none; }
a:active { opacity: 0.6; }

input, textarea, select, button { font-family: inherit; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}