:root {
color-scheme: dark;

--color-primary: #0a84ff !important;
--color-background: #000000 !important;
--color-surface: #000000 !important;
--color-surface-elevated: #2c2c2e !important;
--color-text: #ffffff !important;
--color-text-muted: #8e8e93 !important;
--color-success: #32d74b !important;
--color-warning: #ffd60a !important;
--color-danger: #ff3b30 !important;
--color-info: #2ec4b6 !important;
--radius-sm: 10px !important;
--radius-md: 12px !important;
--radius-lg: 14px !important;
--spacing-base: 1rem !important;
--spacing-xs: 0.25rem !important;
--spacing-sm: 0.5rem !important;
--spacing-md: 1rem !important;
--spacing-lg: 1.5rem !important;
--studio-container-margin-top: 32px !important;
--font-size-sm: 0.875rem !important;
--font-size-md: 1rem !important;
--font-size-lg: 1.125rem !important;
--border-width: 0.5px !important;
--animation-speed: 0.2s !important;
--surface-bg: var(--color-background) !important;
--surface-card: var(--color-surface) !important;
--surface-elevated: #2c2c2e !important;
--text-primary: var(--color-text) !important;
--text-muted: var(--color-text-muted) !important;
--action-primary-bg: var(--color-primary) !important;
--action-primary-fg: #ffffff !important;
--action-primary-hover: #409cff !important;
--nav-bg: rgba(0, 0, 0, 0.88) !important;
--nav-text: var(--color-text) !important;
--nav-border: var(--theme-separator) !important;
--nav-backdrop: none !important;
--custom-feed-card-bg: rgba(28, 28, 30, 0.96) !important;
--feed-card-bg: rgba(28, 28, 30, 0.96) !important;
--custom-feed-card-border: var(--ios-separator) !important;
--feed-card-border: var(--ios-separator) !important;
--custom-feed-composer-input-bg: rgba(44, 44, 46, 0.5) !important;
--feed-composer-input-bg: rgba(44, 44, 46, 0.5) !important;
--custom-feed-composer-input-focus-bg: rgba(44, 44, 46, 0.7) !important;
--feed-composer-input-focus-bg: rgba(44, 44, 46, 0.7) !important;
--custom-feed-submit-btn-fg: #ffffff !important;
--feed-submit-btn-fg: #ffffff !important;
--custom-feed-submit-btn-hover: #1a8cff !important;
--feed-submit-btn-hover: #1a8cff !important;
--custom-feed-post-avatar-bg: rgba(44, 44, 46, 0.5) !important;
--feed-post-avatar-bg: rgba(44, 44, 46, 0.5) !important;
--custom-feed-delete-btn-bg: rgba(255, 59, 48, 0.15) !important;
--feed-delete-btn-bg: rgba(255, 59, 48, 0.15) !important;
--custom-feed-comment-input-bg: rgba(44, 44, 46, 0.5) !important;
--feed-comment-input-bg: rgba(44, 44, 46, 0.5) !important;
--custom-feed-comment-submit-hover: #1a8cff !important;
--feed-comment-submit-hover: #1a8cff !important;
--custom-feed-overlay-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent) !important;
--feed-overlay-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent) !important;
--custom-feed-truncate-gradient: linear-gradient(to bottom, transparent, rgba(28, 28, 30, 0.96)) !important;
--feed-truncate-gradient: linear-gradient(to bottom, transparent, rgba(28, 28, 30, 0.96)) !important;
--custom-feed-card-gradient-start: rgba(32, 38, 29, 0.96) !important;
--feed-card-gradient-start: rgba(32, 38, 29, 0.96) !important;
--custom-feed-card-gradient-end: rgba(23, 28, 21, 0.94) !important;
--feed-card-gradient-end: rgba(23, 28, 21, 0.94) !important;
--custom-feed-card-border-emerald: rgba(255, 247, 220, 0.08) !important;
--feed-card-border-emerald: rgba(255, 247, 220, 0.08) !important;
--custom-feed-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
--feed-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
--custom-feed-muted-text: #dbdbdb !important;
--feed-muted-text: #dbdbdb !important;
--custom-feed-content-text: #f9f0d3 !important;
--feed-content-text: #f9f0d3 !important;
--custom-feed-action-hover-bg: rgba(255, 247, 220, 0.08) !important;
--feed-action-hover-bg: rgba(255, 247, 220, 0.08) !important;
--custom-feed-action-liked-bg: rgba(255, 255, 255, 0.84) !important;
--feed-action-liked-bg: rgba(255, 255, 255, 0.84) !important;
--custom-feed-action-liked-color: #ffe8a6 !important;
--feed-action-liked-color: #ffe8a6 !important;
--custom-profile-contact-card-bg: rgba(28, 28, 30, 0.96) !important;
--profile-contact-card-bg: rgba(28, 28, 30, 0.96) !important;
--custom-profile-contact-card-avatar-border: rgba(221, 183, 74, 0.24) !important;
--profile-contact-card-avatar-border: rgba(221, 183, 74, 0.24) !important;
--custom-profile-action-btn-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important;
--profile-action-btn-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important;
--custom-profile-wall-composer-bg: rgba(28, 28, 30, 0.96) !important;
--profile-wall-composer-bg: rgba(28, 28, 30, 0.96) !important;
--custom-profile-wall-composer-placeholder-bg: rgba(44, 44, 46, 0.5) !important;
--profile-wall-composer-placeholder-bg: rgba(44, 44, 46, 0.5) !important;
--custom-profile-wall-composer-placeholder-text: var(--ios-secondary-label) !important;
--profile-wall-composer-placeholder-text: var(--ios-secondary-label) !important;
--custom-daw-top-bar-bg: #000000 !important;
--daw-top-bar-bg: #000000 !important;
--custom-daw-top-bar-border: #b38b3c !important;
--daw-top-bar-border: #b38b3c !important;
--custom-daw-top-bar-ink: #d4af37 !important;
--daw-top-bar-ink: #d4af37 !important;
--custom-daw-top-bar-title: rgba(255, 255, 255, 0.76) !important;
--daw-top-bar-title: rgba(255, 255, 255, 0.76) !important;
--custom-daw-bottom-bar-bg: #000000 !important;
--daw-bottom-bar-bg: #000000 !important;
--custom-daw-bottom-bar-border: #b38b3c !important;
--daw-bottom-bar-border: #b38b3c !important;
--custom-daw-bottom-bar-ink: #d4af37 !important;
--daw-bottom-bar-ink: #d4af37 !important;
--custom-daw-shell-bg: #3dffd8 !important;
--daw-shell-bg: #3dffd8 !important;
--custom-daw-body-bg: #000 !important;
--daw-body-bg: #000 !important;
--custom-daw-score-bg: #ff0000 !important;
--daw-score-bg: #ff0000 !important;
--custom-daw-sheet-bg: linear-gradient(135deg, #f9f8dd 0%, #e8e8e8 100%) !important;
--daw-sheet-bg: linear-gradient(135deg, #f9f8dd 0%, #e8e8e8 100%) !important;
--custom-daw-sheet-ink: #180024 !important;
--daw-sheet-ink: #180024 !important;
--custom-daw-circle-btn-bg: linear-gradient(to bottom, #d49f4f 0%, #855e28 100%) !important;
--daw-circle-btn-bg: linear-gradient(to bottom, #d49f4f 0%, #855e28 100%) !important;
--custom-daw-circle-btn-fg: #fcebc5 !important;
--daw-circle-btn-fg: #fcebc5 !important;
--custom-daw-circle-btn-border: #b38b3c !important;
--daw-circle-btn-border: #b38b3c !important;
--custom-daw-circle-btn-hover-bg: linear-gradient(to bottom, #e0b15f 0%, #956a31 100%) !important;
--daw-circle-btn-hover-bg: linear-gradient(to bottom, #e0b15f 0%, #956a31 100%) !important;
--custom-daw-circle-btn-hover-border: #d4af37 !important;
--daw-circle-btn-hover-border: #d4af37 !important;
--custom-daw-circle-btn-active-bg: linear-gradient(to bottom, #be8c43 0%, #6f4c21 100%) !important;
--daw-circle-btn-active-bg: linear-gradient(to bottom, #be8c43 0%, #6f4c21 100%) !important;
--custom-daw-circle-btn-active-border: #a88236 !important;
--daw-circle-btn-active-border: #a88236 !important;
--custom-daw-nav-btn-hover-bg: rgba(255, 255, 255, 0.08) !important;
--daw-nav-btn-hover-bg: rgba(255, 255, 255, 0.08) !important;
--custom-daw-nav-btn-hover-color: #f1ce8e !important;
--daw-nav-btn-hover-color: #f1ce8e !important;
--custom-daw-nav-btn-active-bg: rgba(0, 0, 0, 0.35) !important;
--daw-nav-btn-active-bg: rgba(0, 0, 0, 0.35) !important;
--custom-daw-speed-btn-hover-bg: rgba(212, 175, 55, 0.2) !important;
--daw-speed-btn-hover-bg: rgba(212, 175, 55, 0.2) !important;
--custom-daw-speed-btn-active-bg: #d4af37 !important;
--daw-speed-btn-active-bg: #d4af37 !important;
--custom-daw-speed-btn-active-color: #152755 !important;
--daw-speed-btn-active-color: #152755 !important;
--custom-daw-piano-roll-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--daw-piano-roll-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--custom-daw-roll-bg: #0a0a1a !important;
--daw-roll-bg: #0a0a1a !important;
--custom-daw-roll-ink: #ffde66 !important;
--daw-roll-ink: #ffde66 !important;
--custom-practice-modal-overlay: rgba(6, 8, 5, 0.72) !important;
--practice-modal-overlay: rgba(6, 8, 5, 0.72) !important;
--custom-practice-modal-bg: linear-gradient(180deg, rgba(32, 38, 29, 0.98), rgba(23, 28, 21, 0.98)) !important;
--practice-modal-bg: linear-gradient(180deg, rgba(32, 38, 29, 0.98), rgba(23, 28, 21, 0.98)) !important;
--custom-practice-modal-border: rgba(221, 183, 74, 0.18) !important;
--practice-modal-border: rgba(221, 183, 74, 0.18) !important;
--custom-practice-modal-shadow: 0 28px 56px rgba(0, 0, 0, 0.42) !important;
--practice-modal-shadow: 0 28px 56px rgba(0, 0, 0, 0.42) !important;
--custom-practice-modal-radius: 24px !important;
--practice-modal-radius: 24px !important;
--custom-practice-modal-padding: 18px 18px 16px !important;
--practice-modal-padding: 18px 18px 16px !important;
--custom-practice-modal-max-width: 420px !important;
--practice-modal-max-width: 420px !important;
--custom-practice-modal-gap: 16px !important;
--practice-modal-gap: 16px !important;
--custom-practice-modal-title-color: #ffe29a !important;
--practice-modal-title-color: #ffe29a !important;
--custom-practice-modal-title-size: 1.6rem !important;
--practice-modal-title-size: 1.6rem !important;
--custom-practice-modal-part-color: #ffffff !important;
--practice-modal-part-color: #ffffff !important;
--custom-practice-modal-part-shadow: 0 3px 14px rgba(0, 0, 0, 0.35) !important;
--practice-modal-part-shadow: 0 3px 14px rgba(0, 0, 0, 0.35) !important;
--custom-practice-modal-part-size: clamp(2.5rem, 9vw, 4.6rem) !important;
--practice-modal-part-size: clamp(2.5rem, 9vw, 4.6rem) !important;
--custom-practice-modal-actions-gap: 10px !important;
--practice-modal-actions-gap: 10px !important;
--custom-practice-modal-actions-width: 320px !important;
--practice-modal-actions-width: 320px !important;
--custom-practice-modal-change-width: 260px !important;
--practice-modal-change-width: 260px !important;
--custom-practice-modal-text: #f4f1e8 !important;
--practice-modal-text: #f4f1e8 !important;
--custom-practice-modal-icon-color: #ffffff !important;
--practice-modal-icon-color: #ffffff !important;
--custom-enable-notifications-btn-bg: #ff3b30 !important;
--enable-notifications-btn-bg: #ff3b30 !important;
--custom-enable-notifications-btn-fg: #ffffff !important;
--enable-notifications-btn-fg: #ffffff !important;
--custom-stats-card-bg: rgba(255, 0, 247, 0.19) !important;
--stats-card-bg: rgba(255, 0, 247, 0.19) !important;
--custom-stats-orb-card-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.45) 0%, rgba(192, 132, 252, 0.30) 100%) !important;
--stats-orb-card-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.45) 0%, rgba(192, 132, 252, 0.30) 100%) !important;
--custom-orb-glow-enabled: 0 !important;
--orb-glow-enabled: 0 !important;
--custom-orb-glow: #0088ff !important;
--orb-glow: #0088ff !important;
--custom-orb-glow-rehearsals: #7df4a6 !important;
--orb-glow-rehearsals: #7df4a6 !important;
--custom-orb-glow-attendance: #ffb563 !important;
--orb-glow-attendance: #ffb563 !important;
--custom-orb-glow-events: #8cc9ff !important;
--orb-glow-events: #8cc9ff !important;
--custom-orb-glow-songs: #d38cff !important;
--orb-glow-songs: #d38cff !important;
--custom-orb-glow-minutes: #73f6e7 !important;
--orb-glow-minutes: #73f6e7 !important;
--custom-orb-glow-score: #fbe07f !important;
--orb-glow-score: #fbe07f !important;
--custom-orb-glow-login: #ffd46a !important;
--orb-glow-login: #ffd46a !important;
--custom-orb-glow-games: #0062ff !important;
--orb-glow-games: #0062ff !important;
--custom-orb-glow-posts: #ff9ad6 !important;
--orb-glow-posts: #ff9ad6 !important;
--custom-var---color-game-primary: rgba(0, 125, 179, 0.50) !important;
--var---color-game-primary: rgba(0, 125, 179, 0.50) !important;
--custom-wa-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--wa-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--custom-wa-bg-dark: #000000 !important;
--wa-bg-dark: #000000 !important;
--custom-wa-received: #3b2065 !important;
--wa-received: #3b2065 !important;
--custom-wa-header: #000000 !important;
--wa-header: #000000 !important;
--custom-wa-input: #8c4add !important;
--wa-input: #8c4add !important;
--custom-stats-contact-card-bg: transparent !important;
--stats-contact-card-bg: transparent !important;
--custom-hero-bg: rgba(0, 0, 0, 0.00) !important;
--hero-bg: rgba(0, 0, 0, 0.00) !important;
--custom-feature-card-bg: linear-gradient(135deg, rgba(238, 58, 214, 0.41) 0%, #300061 100%) !important;
--feature-card-bg: linear-gradient(135deg, rgba(238, 58, 214, 0.41) 0%, #300061 100%) !important;
--custom-news-card-bg: linear-gradient(135deg, #7c3aed 0%, rgba(192, 132, 252, 0.00) 100%) !important;
--news-card-bg: linear-gradient(135deg, #7c3aed 0%, rgba(192, 132, 252, 0.00) 100%) !important;
--custom-stats-level-strip-bg: linear-gradient(135deg, #e2ee3a 0%, #f95db0 100%) !important;
--stats-level-strip-bg: linear-gradient(135deg, #e2ee3a 0%, #f95db0 100%) !important;
--custom-stats-level-fill-bg: rgba(255, 255, 255, 0.49) !important;
--stats-level-fill-bg: rgba(255, 255, 255, 0.49) !important;
--custom-stats-level-track-bg: rgba(0, 0, 0, 0.37) !important;
--stats-level-track-bg: rgba(0, 0, 0, 0.37) !important;
--custom-app-bg: linear-gradient(135deg, #000000 0%, #140029 100%) !important;
--app-bg: linear-gradient(135deg, #000000 0%, #140029 100%) !important;
--custom-stats-contact-card-border: rgba(0, 0, 0, 0.00) !important;
--stats-contact-card-border: rgba(0, 0, 0, 0.00) !important;
--custom-studio-container-all-link-bg: rgba(139, 61, 255, 0.46) !important;
--studio-container-all-link-bg: rgba(139, 61, 255, 0.46) !important;
--custom-orb-gradient: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--orb-gradient: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--custom-rehearsal-home-notes-bubble-bg: linear-gradient(135deg, #362791 0%, #7746be 100%) !important;
--rehearsal-home-notes-bubble-bg: linear-gradient(135deg, #362791 0%, #7746be 100%) !important;
--custom-rehearsal-home-card-bg: linear-gradient(135deg, #191558 0%, #502c8d 100%) !important;
--rehearsal-home-card-bg: linear-gradient(135deg, #191558 0%, #502c8d 100%) !important;
--custom-studio-container-margin-top: 100px !important;
--studio-container-margin-top: 100px !important;
--custom-music-page-container-bg: transparent !important;
--music-page-container-bg: transparent !important;
--custom-btn-primary-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--btn-primary-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--custom-notification-badge-system: #6e6e6e !important;
--notification-badge-system: #6e6e6e !important;
--custom-notification-item-bg: linear-gradient(135deg, #7c3aed 0%, rgba(192, 132, 252, 0.30) 100%) !important;
--notification-item-bg: linear-gradient(135deg, #7c3aed 0%, rgba(192, 132, 252, 0.30) 100%) !important;
--custom-font-size-footnote: 1rem !important;
--font-size-footnote: 1rem !important;
--custom-ios-secondary-label: #b8b8b8 !important;
--ios-secondary-label: #b8b8b8 !important;
--custom-custom-daw-top-bar-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--custom-daw-top-bar-bg: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
--custom-daw-counter-bg: #370042 !important;
--daw-counter-bg: #370042 !important;
--custom-custom-daw-score-bg: #000000 !important;
--custom-daw-score-bg: #000000 !important;
--custom-note: #42ff68 !important;
--note: #42ff68 !important;
--custom-custom-daw-roll-bg: #000000 !important;
--custom-daw-roll-bg: #000000 !important;
--custom-wa-search-bar: #302136 !important;
--wa-search-bar: #302136 !important;
--custom-custom-feed-action-liked-bg: #5c5c5c !important;
--custom-feed-action-liked-bg: #5c5c5c !important;
--custom-custom-feed-action-liked-color: #ff00a2 !important;
--custom-feed-action-liked-color: #ff00a2 !important;
--custom-feed-action-liked-bg-token: var(--custom-feed-action-liked-bg, rgba(221, 183, 74, 0.16)) !important;
--feed-action-liked-bg-token: var(--custom-feed-action-liked-bg, rgba(221, 183, 74, 0.16)) !important;
--custom-surface-card: #242424 !important;
--surface-card: #242424 !important;
--theme-separator: rgba(142, 142, 147, 0.35) !important;

/* Useful defaults for old inline styles */
--primary-color: var(--action-primary-bg) !important;
--primary-hover: var(--action-primary-hover) !important;
}

html[data-theme="dark"] {
color-scheme: dark;
}

html[data-theme="light"] {
color-scheme: light;

/* Minimal readable fallback if user forces light mode */
--surface-bg: #f5f5f7;
--surface-card: #ffffff;
--surface-elevated: #ffffff;
--text-primary: #1d1d1f;
--text-muted: #636366;
--nav-bg: rgba(255, 255, 255, 0.88);
--nav-text: #1d1d1f;
--nav-border: rgba(60, 60, 67, 0.29);
--theme-separator: rgba(60, 60, 67, 0.29);
}