/* ============================================= Quincy Ventures Merchant Portal — Theme System Themes are applied via data-theme on ============================================= */ /* ── QV Merchant Portal Theme (default) ── Purple gradient, warm accent — the original look */ body[data-theme="qv"], body:not([data-theme]) { --t-accent: #667eea; --t-accent-hover: #5a6fd8; --t-accent-pressed: #4e60c6; --t-accent-bg: rgba(102,126,234,.08); --t-accent-border: rgba(102,126,234,.2); --t-accent-rgb: 102,126,234; --t-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --t-gradient-subtle: linear-gradient(135deg, rgba(102,126,234,.08) 0%, rgba(118,75,162,.08) 100%); --t-success: #107C10; --t-success-bg: #DFF6DD; --t-error: #C42B1C; --t-error-bg: #FDE7E9; --t-warning: #F7630C; --t-warning-bg: #FFF9F5; --t-text-primary: #1A1A1A; --t-text-secondary: #606060; --t-text-tertiary: #909090; --t-text-on-accent: #FFFFFF; --t-bg-page: #FAFAFA; --t-bg-card: #FFFFFF; --t-bg-subtle: #F5F5F5; --t-bg-hover: #F3F3F3; --t-bg-input: #FAFAFA; --t-border: #E5E5E5; --t-border-strong: #D1D1D1; --t-shadow-sm: 0 2px 8px rgba(0,0,0,.08); --t-shadow-md: 0 4px 16px rgba(0,0,0,.12); --t-shadow-lg: 0 8px 32px rgba(0,0,0,.16); --t-radius-sm: 6px; --t-radius: 8px; --t-radius-lg: 12px; --t-radius-xl: 16px; --t-topbar-bg: #FFFFFF; --t-topbar-border: #E5E5E5; --t-focus-ring: 0 0 0 4px rgba(102,126,234,.15); --t-overlay-bg: rgba(0,0,0,.5); --t-overlay-blur: blur(10px); --t-modal-shadow: 0 20px 60px rgba(0,0,0,.3); --t-font: 'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; } /* ── Microsoft Fluent 2 Theme ── Official Fluent 2 tokens — blue accent, clean surfaces */ body[data-theme="fluent"] { --t-accent: #0F6CBD; --t-accent-hover: #115EA3; --t-accent-pressed: #0F548C; --t-accent-bg: rgba(15,108,189,.08); --t-accent-border: rgba(15,108,189,.2); --t-accent-rgb: 15,108,189; --t-gradient: linear-gradient(135deg, #0F6CBD 0%, #115EA3 100%); --t-gradient-subtle: linear-gradient(135deg, rgba(15,108,189,.06) 0%, rgba(17,94,163,.06) 100%); --t-success: #0E7A0D; --t-success-bg: #DFF6DD; --t-error: #BC2F32; --t-error-bg: #FDE7E9; --t-warning: #9D5D00; --t-warning-bg: #FFF9F5; --t-text-primary: #242424; --t-text-secondary: #616161; --t-text-tertiary: #ADADAD; --t-text-on-accent: #FFFFFF; --t-bg-page: #F5F5F5; --t-bg-card: #FFFFFF; --t-bg-subtle: #FAFAFA; --t-bg-hover: #F0F0F0; --t-bg-input: #FFFFFF; --t-border: #E0E0E0; --t-border-strong: #D1D1D1; --t-shadow-sm: 0 2px 4px rgba(0,0,0,.06); --t-shadow-md: 0 4px 8px rgba(0,0,0,.1); --t-shadow-lg: 0 8px 16px rgba(0,0,0,.14); --t-radius-sm: 4px; --t-radius: 6px; --t-radius-lg: 8px; --t-radius-xl: 12px; --t-topbar-bg: #FFFFFF; --t-topbar-border: #E0E0E0; --t-focus-ring: 0 0 0 3px rgba(15,108,189,.2); --t-overlay-bg: rgba(0,0,0,.4); --t-overlay-blur: blur(12px); --t-modal-shadow: 0 16px 48px rgba(0,0,0,.2); --t-font: 'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; } /* ── Windows 11 Theme ── Windows 11 / WinUI 3 design — light Mica surfaces, rounded corners, system blue accent, airy spacing */ body[data-theme="win11"] { --t-accent: #005FB8; --t-accent-hover: #004C99; --t-accent-pressed: #003D7A; --t-accent-bg: rgba(0,95,184,.06); --t-accent-border: rgba(0,95,184,.18); --t-accent-rgb: 0,95,184; --t-gradient: #005FB8; --t-gradient-subtle: rgba(0,95,184,.05); --t-success: #0F7B0F; --t-success-bg: #DFF6DD; --t-error: #C42B1C; --t-error-bg: #FDE7E9; --t-warning: #9D5D00; --t-warning-bg: #FFF4CE; --t-text-primary: #1A1A1A; --t-text-secondary: #5C5C5C; --t-text-tertiary: #9E9E9E; --t-text-on-accent: #FFFFFF; --t-bg-page: #F3F3F3; --t-bg-card: rgba(255,255,255,.85); --t-bg-subtle: rgba(249,249,249,.8); --t-bg-hover: rgba(0,0,0,.03); --t-bg-input: rgba(255,255,255,.7); --t-border: rgba(0,0,0,.06); --t-border-strong: rgba(0,0,0,.1); --t-shadow-sm: 0 2px 4px rgba(0,0,0,.04), 0 0 2px rgba(0,0,0,.06); --t-shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 0 2px rgba(0,0,0,.04); --t-shadow-lg: 0 8px 16px rgba(0,0,0,.08), 0 0 2px rgba(0,0,0,.04); --t-radius-sm: 6px; --t-radius: 8px; --t-radius-lg: 12px; --t-radius-xl: 16px; --t-topbar-bg: rgba(243,243,243,.92); --t-topbar-border: rgba(0,0,0,.06); --t-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #005FB8; --t-overlay-bg: rgba(243,243,243,.65); --t-overlay-blur: blur(40px) saturate(180%); --t-modal-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 2px rgba(0,0,0,.06); --t-font: 'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; } /* ── Amazon Theme ── Inspired by Amazon.com — dark navy topbar, orange accent, warm neutrals */ body[data-theme="amazon"] { --t-accent: #FF9900; --t-accent-hover: #E88B00; --t-accent-pressed: #CC7A00; --t-accent-bg: rgba(255,153,0,.08); --t-accent-border: rgba(255,153,0,.25); --t-accent-rgb: 255,153,0; --t-gradient: linear-gradient(135deg, #FF9900 0%, #E88B00 100%); --t-gradient-subtle: linear-gradient(135deg, rgba(255,153,0,.06) 0%, rgba(232,139,0,.06) 100%); --t-success: #067D62; --t-success-bg: #D5F5ED; --t-error: #CC0C39; --t-error-bg: #FDE8ED; --t-warning: #C45500; --t-warning-bg: #FFF4E6; --t-text-primary: #0F1111; --t-text-secondary: #565959; --t-text-tertiary: #999999; --t-text-on-accent: #0F1111; --t-bg-page: #EAEDED; --t-bg-card: #FFFFFF; --t-bg-subtle: #F7F8F8; --t-bg-hover: #F0F2F2; --t-bg-input: #FFFFFF; --t-border: #D5D9D9; --t-border-strong: #A6ACAF; --t-shadow-sm: 0 2px 5px rgba(15,17,17,.08); --t-shadow-md: 0 4px 11px rgba(15,17,17,.12); --t-shadow-lg: 0 8px 24px rgba(15,17,17,.18); --t-radius-sm: 4px; --t-radius: 8px; --t-radius-lg: 8px; --t-radius-xl: 12px; --t-topbar-bg: #131921; --t-topbar-border: #232F3E; --t-focus-ring: 0 0 0 3px rgba(255,153,0,.35); --t-overlay-bg: rgba(15,17,17,.55); --t-overlay-blur: blur(10px); --t-modal-shadow: 0 20px 60px rgba(15,17,17,.35); --t-font: 'Amazon Ember','Arial',sans-serif; } /* =========================== Shared themed component styles =========================== */ body { font-family: var(--t-font); background: var(--t-bg-page); color: var(--t-text-primary); } /* Topbar */ .topbar { background: var(--t-topbar-bg) !important; border-bottom-color: var(--t-topbar-border) !important; box-shadow: var(--t-shadow-sm) !important; } .portal-logo { color: var(--t-text-primary) !important; } .logo-icon { background: var(--t-gradient) !important; } .user-avatar { background: var(--t-gradient) !important; } .profile-avatar-large { background: var(--t-gradient) !important; } .search-input { border-color: var(--t-border) !important; background: var(--t-bg-input) !important; } .search-input:focus { border-color: var(--t-accent) !important; box-shadow: var(--t-focus-ring) !important; } body[data-theme="fluent"] .search-input { border: 1px solid var(--t-border-strong) !important; } body[data-theme="fluent"] .search-input:focus { border-color: var(--t-border-strong) !important; border-bottom: 2px solid var(--t-accent) !important; box-shadow: none !important; } .icon-btn:hover { background: var(--t-bg-hover) !important; } .user-profile-btn:hover { background: var(--t-bg-hover) !important; } /* Profile dropdown */ .profile-dropdown { box-shadow: var(--t-shadow-lg) !important; } .profile-header { border-bottom-color: var(--t-border) !important; } .profile-menu-item:hover { background: var(--t-bg-hover) !important; } .profile-menu-item i { color: var(--t-text-secondary) !important; } .profile-footer { border-top-color: var(--t-border) !important; } .sign-out-btn { background: var(--t-accent) !important; } .sign-out-btn:hover { background: var(--t-accent-hover) !important; } /* Cards */ .content-card, .card, .stat-card { background: var(--t-bg-card) !important; border-radius: var(--t-radius-lg) !important; box-shadow: var(--t-shadow-sm) !important; } /* Buttons */ .btn-create, .btn-primary { background: var(--t-gradient) !important; border-radius: var(--t-radius) !important; } .btn-create:hover, .btn-primary:hover { box-shadow: 0 4px 12px rgba(var(--t-accent-rgb),.35) !important; } /* Tables */ .users-table { border-radius: var(--t-radius-lg) !important; box-shadow: var(--t-shadow-sm) !important; } .users-table th { background: var(--t-bg-subtle) !important; border-bottom-color: var(--t-border) !important; } .users-table td { border-bottom-color: var(--t-bg-subtle) !important; } .users-table tr:hover td { background: var(--t-bg-subtle) !important; } .user-cell .avatar { background: var(--t-gradient) !important; } /* Form inputs */ .fi, .fs, .filter-input, .filter-select { border-color: var(--t-border) !important; border-radius: var(--t-radius) !important; } .fi:focus, .filter-input:focus { border-color: var(--t-accent) !important; box-shadow: var(--t-focus-ring) !important; } /* Fluent theme: bottom-border accent line instead of focus ring */ body[data-theme="fluent"] .fi, body[data-theme="fluent"] .fs, body[data-theme="fluent"] .filter-input, body[data-theme="fluent"] .filter-select { border: 1px solid var(--t-border-strong) !important; border-radius: var(--t-radius) !important; } body[data-theme="fluent"] .fi:focus, body[data-theme="fluent"] .filter-input:focus { border-color: var(--t-border-strong) !important; border-bottom: 2px solid var(--t-accent) !important; box-shadow: none !important; } /* App launcher */ .app-launcher-btn.active { background: var(--t-accent) !important; } /* Hamburger → X animated icon */ .hamburger-icon{width:20px;height:16px;position:relative;display:flex;flex-direction:column;justify-content:space-between;} .hamburger-icon span{display:block;height:2px;width:100%;background:currentColor;border-radius:1px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center;} .app-launcher-btn.active .hamburger-icon span:nth-child(1){transform:translateY(7px) rotate(45deg);} .app-launcher-btn.active .hamburger-icon span:nth-child(2){opacity:0;transform:scaleX(0);} .app-launcher-btn.active .hamburger-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Amazon theme: dark topbar requires light text and controls */ body[data-theme="amazon"] .portal-logo { color: #FFFFFF !important; } body[data-theme="amazon"] .icon-btn { color: #FFFFFF !important; } body[data-theme="amazon"] .icon-btn:hover { background: rgba(255,255,255,.1) !important; } body[data-theme="amazon"] .user-profile-btn:hover { background: rgba(255,255,255,.1) !important; } body[data-theme="amazon"] .user-name { color: #FFFFFF !important; } body[data-theme="amazon"] .user-profile-btn .fa-chevron-down { color: #999999 !important; } body[data-theme="amazon"] .admin-badge { background: #FF9900 !important; color: #0F1111 !important; } body[data-theme="amazon"] .app-launcher-btn { color: #FFFFFF !important; } body[data-theme="amazon"] .app-launcher-btn.active { background: #FF9900 !important; color: #0F1111 !important; } body[data-theme="amazon"] .theme-btn { color: #FFFFFF !important; } body[data-theme="amazon"] .theme-btn:hover { background: rgba(255,255,255,.1) !important; } body[data-theme="amazon"] .search-input { background: #FFFFFF !important; border-color: #FF9900 !important; border-radius: var(--t-radius) !important; } body[data-theme="amazon"] .search-input:focus { border-color: #FF9900 !important; box-shadow: 0 0 0 3px rgba(255,153,0,.35) !important; } body[data-theme="amazon"] .notification-badge { background: #FF9900 !important; border-color: #131921 !important; } body[data-theme="amazon"] .notif-dropdown { background: var(--t-bg-card) !important; } body[data-theme="amazon"] .sign-out-btn { color: #0F1111 !important; } body[data-theme="amazon"] .logo-icon { background: linear-gradient(135deg, #FF9900, #E88B00) !important; } /* Windows 11 theme: Windows 11 light Mica-style overrides */ body[data-theme="win11"] .topbar { backdrop-filter: blur(60px) saturate(150%) !important; -webkit-backdrop-filter: blur(60px) saturate(150%) !important; } /* Windows 11 Acrylic full-page overlay for app launcher */ body[data-theme="win11"] .app-launcher-overlay { background: rgba(243,243,243,.65) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; } /* Windows 11 input style — flat sides, accent bottom-border on focus */ body[data-theme="win11"] .search-input, body[data-theme="win11"] .fi, body[data-theme="win11"] .fs, body[data-theme="win11"] .fi-ta, body[data-theme="win11"] input[type="text"]:not(.fui-combo-search), body[data-theme="win11"] input[type="password"], body[data-theme="win11"] input[type="email"], body[data-theme="win11"] input[type="number"], body[data-theme="win11"] input[type="tel"], body[data-theme="win11"] input[type="url"], body[data-theme="win11"] input[type="search"], body[data-theme="win11"] textarea, body[data-theme="win11"] select { background: rgba(255,255,255,.7) !important; border: 1px solid rgba(0,0,0,.06) !important; border-bottom: 2px solid rgba(0,0,0,.1) !important; border-radius: var(--t-radius) !important; transition: border-color .15s, background .15s !important; } body[data-theme="win11"] .search-input:focus, body[data-theme="win11"] .fi:focus, body[data-theme="win11"] .fs:focus, body[data-theme="win11"] .fi-ta:focus, body[data-theme="win11"] input[type="text"]:not(.fui-combo-search):focus, body[data-theme="win11"] input[type="password"]:focus, body[data-theme="win11"] input[type="email"]:focus, body[data-theme="win11"] input[type="number"]:focus, body[data-theme="win11"] input[type="tel"]:focus, body[data-theme="win11"] input[type="url"]:focus, body[data-theme="win11"] input[type="search"]:focus, body[data-theme="win11"] textarea:focus, body[data-theme="win11"] select:focus { border-color: rgba(0,0,0,.06) !important; border-bottom: 2px solid var(--t-accent) !important; box-shadow: none !important; background: rgba(255,255,255,.9) !important; outline: none !important; } body[data-theme="win11"] .content-card, body[data-theme="win11"] .card, body[data-theme="win11"] .stat-card { backdrop-filter: blur(30px) saturate(125%) !important; -webkit-backdrop-filter: blur(30px) saturate(125%) !important; border: 1px solid rgba(255,255,255,.5) !important; } body[data-theme="win11"] .logo-icon { background: #005FB8 !important; } body[data-theme="win11"] .user-avatar, body[data-theme="win11"] .profile-avatar-large { background: #005FB8 !important; } body[data-theme="win11"] .user-cell .avatar { background: #005FB8 !important; } body[data-theme="win11"] .app-icon { color: #FFFFFF !important; } /* Windows 11 preset accent palette — official personalization colors */ body[data-theme="win11"] [href*="Admin/Default"] .app-icon { background: #D13438 !important; } body[data-theme="win11"] [href*="Users"] .app-icon { background: #744DA9 !important; } body[data-theme="win11"] [href*="CreateAccount"] .app-icon { background: #10893E !important; } body[data-theme="win11"] [href*="type=agent"] .app-icon { background: #018574 !important; } body[data-theme="win11"] [href*="PortalSettings"] .app-icon { background: #515C6B !important; } body[data-theme="win11"] [href*="AuditLog"] .app-icon { background: #CA5010 !important; } body[data-theme="win11"] [href*="BillingPlans"] .app-icon { background: #FF8C00 !important; } body[data-theme="win11"] [href*="PaymentProcessor"] .app-icon { background: #0063B1 !important; } body[data-theme="win11"] [href*="EPXMerchant"] .app-icon { background: #E81123 !important; } body[data-theme="win11"] [href*="PricingTemplate"] .app-icon { background: #EA005E !important; } body[data-theme="win11"] [href*="Notification"] .app-icon { background: #8764B8 !important; } body[data-theme="win11"] [href*="SecurityCenter"] .app-icon { background: #567C73 !important; } body[data-theme="win11"] [href*="Reports"] .app-icon { background: #F7630C !important; } body[data-theme="win11"] [href*="GatewayManagement"] .app-icon{ background: #0078D4 !important; } body[data-theme="win11"] [href*="GatewayFee"] .app-icon { background: #C30052 !important; } body[data-theme="win11"] [href*="BillingScheduler"] .app-icon { background: #498205 !important; } body[data-theme="win11"] [href*="MerchantFee"] .app-icon { background: #881798 !important; } body[data-theme="win11"] [href*="ACHVirtualTerminal"] .app-icon { background: #B146C2 !important; } body[data-theme="win11"] [href*="NewMerchant"] .app-icon { background: #0099BC !important; } body[data-theme="win11"] [href*="DocumentUpload"] .app-icon { background: #E74856 !important; } body[data-theme="win11"] [href*="Support"] .app-icon { background: #DA3B01 !important; } body[data-theme="win11"] [href*="StatementAnalyzer"] .app-icon{ background: #2D7D9A !important; } body[data-theme="win11"] [href*="Billing"] .app-icon { background: #FFB900 !important; } body[data-theme="win11"] [href*="NorthEnrollment"] .app-icon { background: #E3008C !important; } body[data-theme="win11"] [href*="NMAGateway"] .app-icon { background: #6B69D6 !important; } body[data-theme="win11"] [href*="Dashboard"] .app-icon { background: #0078D4 !important; } body[data-theme="win11"] [href*="ACHBilling"] .app-icon { background: #00B294 !important; } body[data-theme="win11"] [href*="ACHVerify"] .app-icon { background: #038387 !important; } body[data-theme="win11"] .about-modal-header { background: #005FB8 !important; } body[data-theme="win11"] .about-version-badge { background: rgba(0,95,184,.05) !important; } /* Windows 11 flat buttons — no gradients, solid accent with subtle hover */ body[data-theme="win11"] .btn-primary, body[data-theme="win11"] .btn-create { background: #005FB8 !important; box-shadow: none !important; } body[data-theme="win11"] .btn-primary:hover, body[data-theme="win11"] .btn-create:hover { background: #004C99 !important; box-shadow: none !important; transform: none !important; } body[data-theme="win11"] .btn-primary:active, body[data-theme="win11"] .btn-create:active { background: #003D7A !important; } body[data-theme="win11"] .btn-charge { background: #0F7B0F !important; } body[data-theme="win11"] .btn-charge:hover { background: #0C6A0C !important; box-shadow: none !important; } body[data-theme="win11"] .btn-verify { background: #005FB8 !important; } body[data-theme="win11"] .btn-verify:hover { background: #004C99 !important; box-shadow: none !important; } body[data-theme="win11"] .btn-secondary { box-shadow: none !important; } body[data-theme="win11"] .btn-secondary:hover { transform: none !important; } body[data-theme="win11"] .sign-out-btn { background: #005FB8 !important; } body[data-theme="win11"] .sign-out-btn:hover { background: #004C99 !important; } /* Windows 11 flat icon containers */ body[data-theme="win11"] .pm-icon, body[data-theme="win11"] .sd-item-icon { background: rgba(0,95,184,.08) !important; color: #005FB8 !important; } body[data-theme="win11"] .app-launcher-btn.active { background: #005FB8 !important; } body[data-theme="win11"] .admin-badge { background: #005FB8 !important; } body[data-theme="win11"] .notification-badge { background: #C42B1C !important; } /* Windows 11 flat modal buttons */ body[data-theme="win11"] .btn-modal-primary { background: #005FB8 !important; box-shadow: none !important; } body[data-theme="win11"] .btn-modal-primary:hover { background: #004C99 !important; box-shadow: none !important; transform: none !important; } body[data-theme="win11"] .btn-modal-primary:active { background: #003D7A !important; transform: none !important; } /* Windows 11 dropdown triggers — match input bottom-border style */ body[data-theme="win11"] .fui-sel-trigger, body[data-theme="win11"] .fui-select-trigger { background: rgba(255,255,255,.7) !important; border: 1px solid rgba(0,0,0,.06) !important; border-bottom: 2px solid rgba(0,0,0,.1) !important; border-radius: var(--t-radius) !important; transition: border-color .15s, background .15s !important; } body[data-theme="win11"] .fui-sel.open .fui-sel-trigger, body[data-theme="win11"] .fui-select.open .fui-select-trigger { border-color: rgba(0,0,0,.06) !important; border-bottom: 2px solid var(--t-accent) !important; background: rgba(255,255,255,.9) !important; } body[data-theme="win11"] .fui-sel-trigger:hover, body[data-theme="win11"] .fui-select-trigger:hover { border-color: rgba(0,0,0,.06) !important; border-bottom: 2px solid rgba(0,0,0,.18) !important; } /* Windows 11 dropdown listbox — Acrylic panel */ body[data-theme="win11"] .fui-sel-listbox, body[data-theme="win11"] .fui-select-listbox { background: rgba(252,252,252,.85) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,.6) !important; } /* Windows 11 flat dropdown icon pills */ body[data-theme="win11"] .fui-sel-icon, body[data-theme="win11"] .fui-select-icon { background: #005FB8 !important; } /* Windows 11 Acrylic dropdowns — frosted glass menus */ body[data-theme="win11"] .theme-dropdown { background: rgba(252,252,252,.8) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,.6) !important; } body[data-theme="win11"] .profile-dropdown { background: rgba(252,252,252,.8) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,.6) !important; } /* Windows 11 Acrylic modal overlays + panels */ body[data-theme="win11"] .modal-overlay, body[data-theme="win11"] .about-modal-overlay { background: rgba(243,243,243,.65) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; } body[data-theme="win11"] .modal-container, body[data-theme="win11"] .about-modal { background: rgba(252,252,252,.85) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; border: 1px solid rgba(255,255,255,.6) !important; box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 2px rgba(0,0,0,.06) !important; } /* About Modal */ .about-modal-header { background: var(--t-gradient) !important; } .about-version-badge { background: var(--t-gradient-subtle) !important; border-color: var(--t-accent-border) !important; color: var(--t-accent) !important; } /* Misc */ .page-subtitle { color: var(--t-text-secondary) !important; } /* =========================== Theme Switcher Component =========================== */ .theme-switcher { position: relative; display: flex; align-items: center; } .theme-btn { width: 36px; height: 36px; border-radius: var(--t-radius); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--t-text-primary); font-size: 16px; transition: all .2s ease; } .theme-btn:hover { background: var(--t-bg-hover); } .theme-dropdown { position: absolute; top: 48px; right: 0; width: 240px; background: var(--t-bg-card); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-lg); border: 1px solid var(--t-border); z-index: 1050; opacity: 0; pointer-events: none; transform: scale(.95) translateY(-6px); transition: all .15s ease; } .theme-dropdown.show { opacity: 1; pointer-events: all; transform: scale(1) translateY(0); } .theme-dropdown-header { padding: 12px 16px 8px; font-size: 11px; font-weight: 600; color: var(--t-text-tertiary); text-transform: uppercase; letter-spacing: .5px; } .theme-option { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background .15s; text-decoration: none; color: var(--t-text-primary); } .theme-option:hover { background: var(--t-bg-hover); } .theme-option.active { background: var(--t-accent-bg); } .theme-swatch { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; border: 2px solid var(--t-border); } .theme-option.active .theme-swatch { border-color: var(--t-accent); box-shadow: 0 0 0 2px rgba(var(--t-accent-rgb),.25); } .theme-option-label { font-size: 13px; font-weight: 500; } .theme-option-desc { font-size: 11px; color: var(--t-text-tertiary); } .theme-dropdown-footer { padding: 8px 16px 12px; border-top: 1px solid var(--t-border); margin-top: 4px; } .theme-dropdown-footer p { font-size: 10px; color: var(--t-text-tertiary); margin: 0; } /* ── Portal Modal — inline icon + title layout ── */ .modal-header { display: flex; align-items: flex-start; gap: 16px; } .modal-header-text { flex: 1; min-width: 0; } .modal-header .modal-icon { width: 44px; height: 44px; background: var(--t-gradient); border-radius: var(--t-radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-header .modal-icon i { font-size: 20px; color: var(--t-text-on-accent); }