/* ============================================================ ThetaQuill — Brand-Aligned Global Styles Brand spec: dark base + antique gold + IBM Plex Mono everywhere. Color tokens deliberately match the master brand sheet so any new page picks up the brand correctly without per-page CSS overrides. ============================================================ */ :root { /* Surfaces (darkest → progressively lighter) */ --bg-primary: #0B0B0D; /* base (body background) */ --bg-secondary: #14171C; /* cards, panels */ --bg-tertiary: #1E2127; /* raised elements */ --bg-card: #14171C; --bg-hover: #2A2F36; /* hover/active states */ --border-color: #2A2F36; /* subtle 1px borders */ /* Text */ --text-primary: #F5F5F5; /* off-white */ --text-secondary: #8B949E; /* muted gray */ --text-muted: #6E7681; /* Accent — antique gold (the brand color) */ --accent-primary: #D4AF37; --accent-hover: #E2C158; --accent-soft: rgba(212, 175, 55, 0.12); /* Sidebar — slightly darker than the body so it reads as the deepest surface. Overridden in [data-bs-theme="light"] below. */ --sidebar-bg: #050507; /* Trading P/L */ --color-profit: #3FB950; --color-loss: #F85149; --color-neutral: #8B949E; --color-profit-bg: rgba(63, 185, 80, 0.15); --color-loss-bg: rgba(248, 81, 73, 0.15); /* Layout */ --sidebar-width: 250px; --sidebar-collapsed-width: 60px; --content-padding: 24px; --card-padding: 20px; --card-radius: 12px; --transition-speed: 0.3s; /* Typography stack — IBM Plex Mono is the brand voice */ --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; min-height: 100vh; overflow-x: hidden; } /* Bootstrap dark-mode tokens shim — keeps Bootstrap utility classes (.text-muted, .border-secondary, .table, .card, etc.) painting with brand colors instead of Bootstrap defaults. */ [data-bs-theme="dark"], :root[data-bs-theme="dark"] { --bs-body-bg: var(--bg-primary); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); --bs-secondary-bg: var(--bg-secondary); --bs-tertiary-bg: var(--bg-tertiary); --bs-primary: var(--accent-primary); --bs-primary-rgb: 212, 175, 55; --bs-link-color: var(--accent-primary); --bs-link-hover-color: var(--accent-hover); } /* Light theme — re-skins the same tokens so every page-specific stylesheet that reads var(--bg-primary) / var(--text-primary) / etc. flips with one attribute change on . Brand gold accent stays the same in both modes (it's the brand color); only surfaces + text invert. */ [data-bs-theme="light"], :root[data-bs-theme="light"] { --bg-primary: #FAFAF8; --bg-secondary: #FFFFFF; --bg-tertiary: #F0EFEC; --bg-card: #FFFFFF; --bg-hover: #E8E6E1; --border-color: #DDD9D0; --text-primary: #1A1A1A; --text-secondary: #4A4A4A; --text-muted: #6E6E6E; --accent-soft: rgba(212, 175, 55, 0.18); /* Sidebar in light mode: a hair darker than the page so the rail still stands apart, but stays warm — never going to true black. */ --sidebar-bg: #EDEAE2; --bs-body-bg: var(--bg-primary); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); --bs-secondary-bg: var(--bg-secondary); --bs-tertiary-bg: var(--bg-tertiary); --bs-primary: var(--accent-primary); --bs-primary-rgb: 212, 175, 55; --bs-link-color: #B08A1F; --bs-link-hover-color: var(--accent-primary); } /* Bootstrap card overrides so .card uses ThetaQuill surface palette */ .card { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); border-radius: var(--card-radius); } .card-header { background-color: transparent; border-bottom-color: var(--border-color); color: var(--text-primary); } .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-table-hover-bg: var(--bg-hover); --bs-table-hover-color: var(--text-primary); color: var(--text-primary); } /* Primary action button — gold on dark, with dark text for contrast */ .btn-primary, .btn-success { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-primary); font-weight: 600; } .btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-primary); } .btn-outline-primary { color: var(--accent-primary); border-color: var(--accent-primary); } .btn-outline-primary:hover { background-color: var(--accent-primary); color: var(--bg-primary); } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); } .btn-outline-secondary:hover { background-color: var(--bg-hover); border-color: var(--border-color); color: var(--text-primary); } /* Form controls inherit the brand */ .form-control, .form-select { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); font-family: var(--font-mono); } .form-control:focus, .form-select:focus { background-color: var(--bg-tertiary); border-color: var(--accent-primary); color: var(--text-primary); box-shadow: 0 0 0 0.2rem var(--accent-soft); } .form-control::placeholder { color: var(--text-muted); } /* Number-heavy classes get tabular alignment so columns line up */ .text-mono, .table td.text-mono, .fw-bold { font-variant-numeric: tabular-nums; } /* Brand color helpers */ .text-accent { color: var(--accent-primary) !important; } .bg-accent { background-color: var(--accent-primary) !important; } .text-profit { color: var(--color-profit) !important; } .text-loss { color: var(--color-loss) !important; } .bg-profit { background-color: var(--color-profit-bg) !important; } .bg-loss { background-color: var(--color-loss-bg) !important; } /* ============================================================ Sidebar ============================================================ */ .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); z-index: 1000; transition: width var(--transition-speed) ease; display: flex; flex-direction: column; overflow-x: hidden; } .sidebar.collapsed { width: var(--sidebar-collapsed-width); } .sidebar-header { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); min-height: 60px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; color: var(--accent-primary); font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; } .sidebar-brand i { font-size: 1.4rem; min-width: 28px; text-align: center; } .sidebar-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; border-radius: 6px; } .sidebar.collapsed .brand-text { display: none; } .sidebar-toggle { color: var(--text-secondary); padding: 4px 8px; font-size: 1.1rem; text-decoration: none; } .sidebar-toggle:hover { color: var(--text-primary); } .sidebar.collapsed .sidebar-toggle { margin: 0 auto; } .sidebar-nav { list-style: none; padding: 8px 0; margin: 0; flex: 1; overflow-y: auto; } .sidebar-nav .nav-item { margin: 2px 8px; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text-secondary); text-decoration: none; border-radius: 8px; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; font-size: 0.9rem; } .sidebar-nav .nav-link:hover { background: var(--bg-tertiary); color: var(--text-primary); } .sidebar-nav .nav-link i { font-size: 1.1rem; min-width: 24px; text-align: center; } .sidebar-nav .nav-item.active .nav-link { background: rgba(88, 166, 255, 0.1); color: var(--accent-primary); font-weight: 600; } .sidebar.collapsed .nav-link span { display: none; } .nav-divider { height: 1px; background: var(--border-color); margin: 8px 16px; } .nav-section-label { padding: 12px 20px 4px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted, #8b949e); } .sidebar.collapsed .nav-section-label { display:none; } .sidebar-user { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; } .sidebar-user-avatar i { font-size: 1.6rem; color: var(--accent-primary); } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-weight: 600; color: var(--text-primary); line-height: 1.1; } .sidebar-user-logout { color: var(--text-secondary); text-decoration: none; padding: 6px 8px; border-radius: 4px; transition: background .15s; } .sidebar-user-logout:hover { background: rgba(248,81,73,.1); color: #f85149; } .sidebar.collapsed .sidebar-user-info { display:none; } .sidebar { display: flex; flex-direction: column; } .sidebar-nav { flex: 1; } /* Plan badge sits next to the username */ .sidebar-plan-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; } /* Free-tier usage meter — only renders for free users, shows X/50 + a slim progress bar with an inline Upgrade link. */ .sidebar-plan-meter { padding: 10px 16px 8px; border-top: 1px solid var(--border-color, #2A2F36); font-size: 0.72rem; } .sidebar-plan-meter-label { display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary, #8b949e); margin-bottom: 4px; } .sidebar-plan-upgrade { color: var(--accent-primary, #D4AF37); text-decoration: none; font-weight: 600; } .sidebar-plan-upgrade:hover { text-decoration: underline; } .sidebar-plan-meter-bar { height: 4px; background: var(--bg-tertiary, #1E2127); border-radius: 999px; overflow: hidden; } .sidebar-plan-meter-fill { height: 100%; background: var(--accent-primary, #D4AF37); width: 0%; transition: width .3s ease, background-color .3s ease; } .sidebar-plan-meter-fill.over-threshold { background: var(--color-loss, #F85149); } .sidebar.collapsed .sidebar-plan-meter { display: none; } /* ============================================================ Main Content ============================================================ */ .main-content { margin-left: var(--sidebar-width); padding: var(--content-padding); min-height: 100vh; transition: margin-left var(--transition-speed) ease; } .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed-width); } /* Account picker bar — sits above page-header. Subtle so it doesn't compete with the page title, but always visible so the user knows which account they're viewing. */ .account-bar { border-bottom: 1px solid var(--bs-border-color, #30363d); font-size: 0.85rem; } .account-bar select { background: transparent; } /* ============================================================ Page Header ============================================================ */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .page-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; } .page-subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-top: 2px; } /* ============================================================ Cards ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--card-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .card-header { background: transparent; border-bottom: 1px solid var(--border-color); padding: 16px var(--card-padding); font-weight: 600; } .card-body { padding: var(--card-padding); } /* ============================================================ Stat Cards ============================================================ */ .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: 20px; display: flex; align-items: flex-start; gap: 16px; transition: border-color 0.2s ease; } .stat-card:hover { border-color: var(--accent-primary); } .stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .stat-icon.profit { background: var(--color-profit-bg); color: var(--color-profit); } .stat-icon.loss { background: var(--color-loss-bg); color: var(--color-loss); } .stat-icon.info { background: rgba(88, 166, 255, 0.15); color: var(--accent-primary); } .stat-icon.warning { background: rgba(255, 193, 7, 0.15); color: #ffc107; } .stat-content { flex: 1; min-width: 0; } .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .stat-title { color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .stat-subtitle { font-size: 0.8rem; margin-top: 4px; } .stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; } .stat-trend.up { color: var(--color-profit); } .stat-trend.down { color: var(--color-loss); } /* ============================================================ P/L Colors ============================================================ */ .text-profit { color: var(--color-profit) !important; } .text-loss { color: var(--color-loss) !important; } .text-neutral { color: var(--color-neutral) !important; } .bg-profit { background-color: var(--color-profit-bg) !important; } .bg-loss { background-color: var(--color-loss-bg) !important; } /* ============================================================ Filter Bar ============================================================ */ .filter-bar { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: 16px 20px; margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .filter-group .form-control, .filter-group .form-select { min-width: 140px; background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); font-size: 0.85rem; } .filter-group .form-control:focus, .filter-group .form-select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); } .filter-actions { display: flex; gap: 8px; align-items: flex-end; } /* ============================================================ Tables ============================================================ */ .table { color: var(--text-primary); --bs-table-bg: transparent; --bs-table-hover-bg: rgba(88, 166, 255, 0.05); --bs-table-striped-bg: rgba(255, 255, 255, 0.02); margin-bottom: 0; } .table thead th { background: var(--bg-tertiary); border-bottom: 2px solid var(--border-color); color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; padding: 12px 16px; white-space: nowrap; } .table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 0.875rem; } .table tbody tr:hover { background: rgba(88, 166, 255, 0.05); } /* ============================================================ Badges ============================================================ */ .badge-side { padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; } .badge-long { background: var(--color-profit-bg); color: var(--color-profit); } .badge-short { background: var(--color-loss-bg); color: var(--color-loss); } .badge-tag { padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin: 1px 2px; display: inline-block; } .badge-open { background: rgba(255, 193, 7, 0.15); color: #ffc107; } .badge-closed { background: rgba(88, 166, 255, 0.15); color: var(--accent-primary); } /* Options badges (global so they work on dashboard + options pages) */ .badge-call { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } .badge-put { background: rgba(188, 140, 255, 0.15); color: #bc8cff; border: 1px solid rgba(188, 140, 255, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } .badge-sto { background: rgba(248, 81, 73, 0.15); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } .badge-bto { background: var(--accent-soft); color: var(--accent-primary); border: 1px solid rgba(212, 175, 55, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } .badge-outcome-btc, .badge-outcome-stc { background: rgba(56, 173, 169, 0.15); color: #39d2c0; border: 1px solid rgba(56, 173, 169, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } .badge-outcome-expired { background: rgba(139, 148, 158, 0.15); color: #8b949e; border: 1px solid rgba(139, 148, 158, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } .badge-outcome-assigned { background: rgba(210, 153, 34, 0.15); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.3); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; } /* ============================================================ Buttons ============================================================ */ .btn-primary { background: var(--accent-primary); border-color: var(--accent-primary); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); } .btn-outline-secondary:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--text-secondary); } /* ============================================================ Forms ============================================================ */ .form-control, .form-select { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); } .form-control:focus, .form-select:focus { background: var(--bg-tertiary); border-color: var(--accent-primary); color: var(--text-primary); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); } .form-label { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; } /* ============================================================ Toast Customization ============================================================ */ .toast { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); } .toast-success { border-left: 4px solid var(--color-profit); } .toast-error { border-left: 4px solid var(--color-loss); } .toast-info { border-left: 4px solid var(--accent-primary); } /* ============================================================ Chart Containers ============================================================ */ .chart-container { position: relative; height: 300px; width: 100%; } .chart-container.tall { height: 400px; } .chart-container.short { height: 200px; } /* ============================================================ DataTables Dark Theme Override ============================================================ */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--text-secondary) !important; padding: 12px 0; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: 6px; padding: 4px 8px; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-secondary) !important; background: transparent !important; border: 1px solid var(--border-color) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--accent-primary) !important; color: white !important; border-color: var(--accent-primary) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; } table.dataTable.no-footer { border-bottom: 1px solid var(--border-color) !important; } /* ============================================================ Utility Classes ============================================================ */ .cursor-pointer { cursor: pointer; } .text-mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; } .gap-grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grid-7 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ============================================================ Scrollbar ============================================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================================ Empty State ============================================================ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state i { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; } .empty-state h5 { color: var(--text-secondary); margin-bottom: 8px; } .empty-state p { max-width: 400px; margin: 0 auto; } /* ============================================================ Loading Spinner ============================================================ */ .loading-spinner { display: flex; align-items: center; justify-content: center; padding: 40px; } .loading-spinner .spinner-border { color: var(--accent-primary); } /* ============================================================ Print Styles ============================================================ */ @media print { .sidebar, .filter-bar, .btn, .toast-container { display: none !important; } .main-content { margin-left: 0 !important; padding: 0 !important; } body { background: white; color: black; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 992px) { /* Mobile/tablet: always show the sidebar as a clean icon-only rail — the same look as the desktop "collapsed" state — regardless of the saved expand preference. The full-width nav (labels, plan meter, user block) doesn't fit a phone and was overflowing the 60px rail before. */ .sidebar { width: var(--sidebar-collapsed-width) !important; } .sidebar .brand-text, .sidebar .nav-link span, .sidebar .nav-section-label, .sidebar-plan-meter, .sidebar-user-info { display: none; } /* Nothing to toggle on a phone — the rail is fixed icon-only. */ .sidebar-toggle { display: none; } .sidebar-header { justify-content: center; } /* Stack the user actions vertically so theme/shortcuts/logout all fit the 60px rail (a horizontal row clipped the logout button before). The avatar is dropped on mobile to keep the footer short. */ .sidebar-user { flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; } .sidebar-user-avatar { display: none; } .main-content { margin-left: var(--sidebar-collapsed-width) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } .grid-7 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .main-content { padding: 12px; } .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } .page-header { flex-direction: column; align-items: flex-start; gap: 8px; } /* Defensive: any table not already wrapped in .table-responsive still scrolls horizontally instead of overflowing the viewport. */ .card-body > table, .card > table { display: block; overflow-x: auto; } /* Buttons in groups should wrap rather than push siblings off-screen. */ .btn-group, .btn-group-sm { flex-wrap: wrap; } /* Date-range / preset controls in page headers stack tidily. */ .page-header .btn-group, .page-header .form-control { width: 100%; } } /* Touch targets: bump small buttons + form controls to ~44px on coarse pointer devices (phones, tablets) so they're not fiddly. */ @media (pointer: coarse) { .btn-sm, .form-control-sm, .form-select-sm { min-height: 38px; } .nav-tabs .nav-link { padding: 10px 14px; } } /* ============================================================ Flatpickr Dark Override ============================================================ */ .flatpickr-calendar { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; } /* ============================================================ Action Buttons (shared) ============================================================ */ .act-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; font-size: 0.7rem; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; transition: all 0.15s ease; text-decoration: none; padding: 0; } .act-btn:hover { color: var(--accent-primary); background: rgba(88, 166, 255, 0.1); } .act-btn.act-del:hover { color: var(--color-loss); background: rgba(248, 81, 73, 0.1); } /* Live-demo banner — shown across the app when browsing the read-only demo. */ .demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, rgba(212,175,55,.16), rgba(212,175,55,.04)); border: 1px solid var(--accent-primary, #D4AF37); color: var(--text-primary); border-radius: 8px; padding: 8px 14px; margin-bottom: 14px; font-size: 0.9rem; } .demo-banner-actions { display: flex; align-items: center; gap: 12px; } .demo-banner-exit { color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; white-space: nowrap; } .demo-banner-exit:hover { color: var(--text-primary); text-decoration: underline; }