[data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-alt: #1c2128; --surface-hover: #21262d; --surface-glow: radial-gradient(circle at 20% 20%, rgba(0, 200, 150, 0.04), transparent 38%), radial-gradient(circle at 80% 0%, rgba(99, 179, 237, 0.03), transparent 40%), linear-gradient(180deg, #161b22 0%, #0d1117 100%); --text: #f0f6fc; --text-muted: #8b949e; --text-secondary: #7d8590; --text-tertiary: #6b7280; --border: #30363d; --border-color: var(--border); --accent: #00c896; --accent-bg: rgba(0, 200, 150, 0.12); --accent-color: var(--accent); --accent-rgb: 0, 200, 150; --accent-text: #0d1117; --am-medium-green: #00c896; --success: #56d364; --success-rgb: 86, 211, 100; --success-bright: #7ee787; --success-bright-rgb: 126, 231, 135; --danger: #ff7b72; --danger-rgb: 255, 123, 114; --danger-bright: #ffa198; --warning: #e3b341; --warning-rgb: 227, 179, 65; --warning-bright: #f0d660; --warning-bg: rgba(227, 179, 65, 0.15); --info: #58a6ff; --info-rgb: 88, 166, 255; --info-dark: #79c0ff; --info-light: rgba(88, 166, 255, 0.12); --purple: #a371f7; --purple-bg: rgba(163, 113, 247, 0.12); --shadow-soft: 0 16px 48px -16px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.35); --shadow-strong: 0 32px 64px -24px rgba(0, 0, 0, 0.75), 0 16px 32px -16px rgba(0, 0, 0, 0.45); --tub-bg: #161b22; --tub-bg-glow: var(--surface-glow); --tub-bg-surface: #1c2128; --tub-border: var(--border); --tub-shadow: 0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.24); --tub-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32); --tub-shadow-inset: inset 0 1px 4px rgba(0, 0, 0, 0.24); --modal-accent: var(--accent); --hover-bg: var(--surface-hover); --glass-light: rgba(22, 27, 34, 0.72); --glass-dark: rgba(13, 17, 23, 0.72); scrollbar-color: var(--border) var(--bg); }
[data-theme="dark"] { --backdrop: rgba(0, 0, 0, 0.6); --backdrop-subtle: rgba(0, 0, 0, 0.45); --overlay-backdrop-bg-mobile: color-mix(in srgb, var(--backdrop-subtle) 90%, transparent); --overlay-backdrop-bg-desktop: color-mix(in srgb, var(--backdrop-subtle) 82%, transparent); --overlay-backdrop-blur-mobile: blur(7px); --overlay-backdrop-blur-desktop: blur(16px); --sheet-shadow: 0 -8px 60px color-mix(in srgb, var(--mix-black) 50%, transparent); }
[data-theme="dark"] .about-modal__tech-item { border-color: var(--border); }
[data-theme="dark"] .about-modal__version { background: var(--surface); }
[data-theme="dark"] .account-selector { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .account-selector:hover { border-color: var(--accent); }
[data-theme="dark"] .alert { background: var(--surface); }
[data-theme="dark"] .auth-alert { border-color: rgba(240, 246, 252, 0.2); }
[data-theme="dark"] .auth-alert-info { background: rgba(88, 166, 255, 0.15); border-color: var(--info); }
[data-theme="dark"] .auth-alert-success { background: rgba(63, 185, 80, 0.15); border-color: var(--success); }
[data-theme="dark"] .auth-alert-warning { background: rgba(210, 153, 34, 0.15); border-color: var(--warning); }
[data-theme="dark"] .auth-alert.u-text-danger { background: rgba(248, 81, 73, 0.15); border-color: var(--danger); }
[data-theme="dark"] .auth-card { background: color-mix(in srgb, var(--surface) 97%, #0b1119); border-color: color-mix(in srgb, var(--border) 92%, #0a111b); box-shadow: 0 12px 20px -18px rgba(0, 0, 0, 0.58); }
[data-theme="dark"] .auth-layout { background: radial-gradient(circle at 20% 18%, rgba(0, 200, 150, 0.07), transparent 36%), radial-gradient(circle at 84% 0%, rgba(88, 166, 255, 0.05), transparent 40%), linear-gradient(180deg, #0d1117 0%, #010409 100%); }
[data-theme="dark"] .auth-layout--skeuo { --auth-skeuo-surface-top: color-mix(in srgb, var(--surface) 93%, #202838); --auth-skeuo-surface-mid: color-mix(in srgb, var(--surface) 94%, #151c29); --auth-skeuo-surface-bottom: color-mix(in srgb, var(--surface-alt) 90%, #0d131d); --auth-skeuo-border: color-mix(in srgb, var(--border) 82%, #0a111b); --auth-skeuo-field-bg: color-mix(in srgb, var(--surface-alt) 86%, #0b1119); --auth-skeuo-field-border: color-mix(in srgb, var(--border) 90%, #0a111b); }
[data-theme="dark"] .auth-layout--skeuo .auth-card::before { content: none; }
[data-theme="dark"] .auth-layout--skeuo .auth-field-picker .currency-selector__dropdown, [data-theme="dark"] .auth-layout--skeuo .auth-field-picker .timezone-selector__dropdown { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 93%, #202838) 0%, color-mix(in srgb, var(--surface-alt) 90%, #0d131d) 100%); border-color: color-mix(in srgb, var(--border) 90%, #0a111b); }
[data-theme="dark"] .auth-layout--skeuo .auth-password-strength { background: color-mix(in srgb, var(--surface-alt) 84%, #0d131d); border-color: color-mix(in srgb, var(--border) 90%, #0a111b); box-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.05); }
[data-theme="dark"] .auth-layout--skeuo .auth-password-toggle { background: color-mix(in srgb, var(--surface-alt) 84%, #0c1119); border-color: color-mix(in srgb, var(--border) 90%, #0a111b); }
[data-theme="dark"] .auth-layout-origin { color: #8b949e; }
[data-theme="dark"] .auth-layout-origin__flag { filter: saturate(1.08); }
[data-theme="dark"] .auth-link-button:hover { color: color-mix(in srgb, var(--accent) 88%, var(--mix-white)); }
[data-theme="dark"] .auth-link-label, [data-theme="dark"] .auth-password-hint, [data-theme="dark"] .auth-subtitle, [data-theme="dark"] .auth-trust { color: #a6b4c2; }
[data-theme="dark"] .auth-password-rule--idle { color: #9aa9b8; }
[data-theme="dark"] .auth-password-strength { background: color-mix(in srgb, var(--surface-alt) 88%, var(--mix-black)); border-color: color-mix(in srgb, var(--border) 84%, var(--mix-black)); box-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.05); }
[data-theme="dark"] .auth-password-strength__bar { background: color-mix(in srgb, var(--surface-hover) 88%, var(--mix-black)); border-color: color-mix(in srgb, var(--border) 82%, var(--mix-black)); }
[data-theme="dark"] .auth-password-strength__message { color: #9aa9b8; }
[data-theme="dark"] .auth-password-toggle:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
[data-theme="dark"] .avatar-image { border-color: var(--border); }
[data-theme="dark"] .avatar-upload-label { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .badge { border-color: var(--border); }
[data-theme="dark"] .balance-card { background: var(--surface-alt); border-color: var(--border); }
[data-theme="dark"] .balance-card:hover { background: var(--surface-hover); border-color: var(--accent); }
[data-theme="dark"] .brutalist-empty { background: var(--surface); box-shadow: var(--shadow-soft); }
[data-theme="dark"] .brutalist-item { background: transparent; border-bottom-color: var(--border); }
[data-theme="dark"] .brutalist-item.unread { background: var(--surface); }
[data-theme="dark"] .brutalist-item:hover { background: var(--surface-hover); }
[data-theme="dark"] .btn { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .btn--primary { border-color: transparent; }
[data-theme="dark"] .btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--mix-white)); }
[data-theme="dark"] .btn--secondary { background: var(--surface); }
[data-theme="dark"] .btn--secondary:hover { background: var(--surface-hover); }
[data-theme="dark"] .btn:disabled { background: var(--surface); opacity: 0.5; }
[data-theme="dark"] .btn:hover { background: var(--surface-hover); }
[data-theme="dark"] .captcha-question { background: color-mix(in srgb, var(--surface-alt) 88%, var(--mix-black)); border-color: color-mix(in srgb, var(--border) 84%, var(--mix-black)); }
[data-theme="dark"] .captcha-refresh { background: color-mix(in srgb, var(--surface-alt) 86%, var(--mix-black)); border-color: color-mix(in srgb, var(--border) 84%, var(--mix-black)); color: #98a7b6; }
[data-theme="dark"] .captcha-refresh:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
[data-theme="dark"] .checkout-message--canceled { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
[data-theme="dark"] .checkout-message--success { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
[data-theme="dark"] .dropdown-sheet { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .empty-state { background: var(--surface); }
[data-theme="dark"] .fab-action { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .fab-action:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
[data-theme="dark"] .fab-button { box-shadow: var(--tub-shadow); }
[data-theme="dark"] .fab-button.expanded { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .fab-button:hover { box-shadow: var(--tub-shadow-hover); }
[data-theme="dark"] .feature-comparison { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .feature-row { border-bottom-color: var(--border); }
[data-theme="dark"] .field__input { background: var(--surface-alt); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .field__input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .global-search__footer { background: var(--surface-alt); }
[data-theme="dark"] .global-search__shortcut kbd { background: var(--surface-alt); }
[data-theme="dark"] .header-action-tub .notification-button { color: var(--text-muted); }
[data-theme="dark"] .header-action-tub .notification-button.has-unread { color: var(--danger); }
[data-theme="dark"] .header-action-tub .theme-toggle .notification-button { color: var(--text-muted); }
[data-theme="dark"] .header-dropdown__handle { background: rgba(139, 148, 158, 0.55); }
[data-theme="dark"] .input-base { background: var(--surface-alt); border-color: var(--border); }
[data-theme="dark"] .invoice-item { background: var(--surface-alt); border: 1px solid var(--border); }
[data-theme="dark"] .invoices-section { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .list-item--selected { background: var(--surface-hover); }
[data-theme="dark"] .list-item:hover, [data-theme="dark"] .list-item--focused { background: var(--surface-hover); }
[data-theme="dark"] .logo-dark { display: block; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .modal-actions { background: var(--surface); border-top-color: var(--border); }
[data-theme="dark"] .modal-content { background: var(--surface); }
[data-theme="dark"] .modal-content .tub__body, [data-theme="dark"] .modal-content > form > .tub, [data-theme="dark"] .modal-content > form > .txn-modal, [data-theme="dark"] .modal-content .picker { background: var(--surface); }
[data-theme="dark"] .modal-content > form { background: var(--surface); }
[data-theme="dark"] .modal-handle { background: var(--border); }
[data-theme="dark"] .plan-change-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .plan-change-card--recommended { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: var(--accent); }
[data-theme="dark"] .plan-change-section { background: var(--surface-alt); }
[data-theme="dark"] .pricing-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pricing-card--selected { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: var(--accent); }
[data-theme="dark"] .pricing-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
[data-theme="dark"] .progress-bar { background: linear-gradient(180deg, var(--surface-alt) 0%, color-mix(in srgb, var(--surface-alt) 70%, var(--mix-black)) 100%); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
[data-theme="dark"] .progress-bar--segmented .progress-bar__segment { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.25); }
[data-theme="dark"] .progress-bar--segmented .progress-bar__segment--inactive { opacity: 0.15; }
[data-theme="dark"] .rate-input { background: var(--surface-alt); border-color: var(--border); }
[data-theme="dark"] .rate-input:focus { background: var(--surface); border-color: var(--accent); }
[data-theme="dark"] .search-bar { background: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] .settings-action { background: var(--surface-alt); }
[data-theme="dark"] .settings-action__icon { background: var(--surface); }
[data-theme="dark"] .settings-toggle { background: var(--surface-alt); }
[data-theme="dark"] .settings-toggle__icon { background: var(--surface); }
[data-theme="dark"] .subscription-status { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .subscription-status__cancel-notice, [data-theme="dark"] .subscription-status__trial { background: var(--surface-alt); border: 1px solid var(--border); }
[data-theme="dark"] .subscription-status__icon { background: var(--surface-alt); }
[data-theme="dark"] .tub { background: var(--tub-bg); border-color: var(--tub-border); }
[data-theme="dark"] .tub__header { border-bottom-color: var(--border); }
[data-theme="dark"] .tub__percentage { background: linear-gradient(180deg, var(--surface-alt) 0%, color-mix(in srgb, var(--surface-alt) 70%, var(--mix-black)) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .tub__percentage--critical { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 20%, var(--surface)) 0%, color-mix(in srgb, var(--danger) 30%, var(--surface)) 100%); border-color: var(--danger); color: var(--danger-bright); }
[data-theme="dark"] .tub__percentage--good { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 20%, var(--surface)) 0%, color-mix(in srgb, var(--success) 30%, var(--surface)) 100%); border-color: var(--success); color: var(--success-bright); }
[data-theme="dark"] .tub__percentage--warning { background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 20%, var(--surface)) 0%, color-mix(in srgb, var(--warning) 30%, var(--surface)) 100%); border-color: var(--warning); color: var(--warning-bright); }
[data-theme="dark"] .tub__status-badge { background: linear-gradient(180deg, var(--surface-alt) 0%, color-mix(in srgb, var(--surface-alt) 70%, var(--mix-black)) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .tub__status-badge--critical { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 20%, var(--surface)) 0%, color-mix(in srgb, var(--danger) 30%, var(--surface)) 100%); border-color: var(--danger); color: var(--danger-bright); }
[data-theme="dark"] .tub__status-badge--good { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 20%, var(--surface)) 0%, color-mix(in srgb, var(--success) 30%, var(--surface)) 100%); border-color: var(--success); color: var(--success-bright); }
[data-theme="dark"] .tub__status-badge--warning { background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 20%, var(--surface)) 0%, color-mix(in srgb, var(--warning) 30%, var(--surface)) 100%); border-color: var(--warning); color: var(--warning-bright); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--border) 60%, var(--text-muted)); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] code { background: rgba(0, 200, 150, 0.1); color: var(--accent); }
[data-theme="dark"] hr { border-color: var(--border); }
[data-theme="dark"] pre { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 12px; }
[data-theme="dark"] table { border-color: var(--border); }
[data-theme="dark"] td { border-color: var(--border); }
[data-theme="dark"] th { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] tr:hover td { background: var(--surface-hover); }
html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--bg); color: var(--text); }