:root {
    --dark-bg: #1a1a2e;
    --dark-surface: #16213e;
    --dark-border: #2a2a4a;
    --dark-border-light: #3a3a5a;
    --dark-text: #ffffff;
    --dark-dim: #333333;
    --dark-hover: #2a2a4a;
}

body { font-family: 'Inter', sans-serif; }
main.max-w-4xl { max-width: 60rem; }

nav.overflow-x-auto::-webkit-scrollbar { height: 3px; }
nav.overflow-x-auto::-webkit-scrollbar-track { background: transparent; }
nav.overflow-x-auto::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
nav.overflow-x-auto { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }

[data-theme="dark"] body { background: var(--dark-bg); color: var(--dark-text); }
[data-theme="dark"] .bg-white { background: var(--dark-surface) !important; }
[data-theme="dark"] .bg-gray-50 { background: var(--dark-bg) !important; }
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .hover\:bg-gray-100:hover { background: var(--dark-hover) !important; }
[data-theme="dark"] .bg-gray-200 { background: var(--dark-border-light) !important; }
[data-theme="dark"] .border-gray-200 { border-color: var(--dark-border) !important; }
[data-theme="dark"] .border-gray-300 { border-color: var(--dark-border-light) !important; }
[data-theme="dark"] .hover\:border-gray-500:hover { border-color: #4a4a7a !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-400 { color: var(--dark-text) !important; }
[data-theme="dark"] .hover\:text-gray-900:hover,
[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--dark-text) !important; }
[data-theme="dark"] #group-notes .text-gray-700,
[data-theme="dark"] #group-notes .text-gray-900,
[data-theme="dark"] #group-notes .text-yellow-800 { color: var(--dark-dim) !important; }
[data-theme="dark"] .group-name { color: var(--dark-dim) !important; }
[data-theme="dark"] input[name="daily_target"],
[data-theme="dark"] input[name="total_target"] { color: var(--dark-dim) !important; }
[data-theme="dark"] .outline-group-header,
[data-theme="dark"] .outline-item { color: var(--dark-text) !important; }
[data-theme="dark"] .outline-item.selected-event { color: var(--dark-dim) !important; }