/* Force the `hidden` attribute to actually hide elements even when an
inline `display` is set on them. Browsers ship `[hidden] { display: none }`
in their user-agent stylesheet, but inline styles have higher specificity
and silently win, which made the upgrade banner render despite `hidden`. */
[hidden] { display: none !important; }
/* =========================================================================
* theme.css - TradeByBar design system
*
* Lucid-Trading-inspired green-forward dark palette with a refined typography
* scale and tighter spacing. Loaded LAST so it wins over site.css /
* admin.css / trader.css. Light theme available via `data-theme="light"`
* on the element; dark is the default and is applied inline by
* each page's script to prevent flash.
* ========================================================================= */
/* ── Design tokens (dark, default) ─────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
/* Surfaces - neutral grayscale dark canvas with a faint blue cast */
--bg: #0a0a0c;
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(96, 165, 250, 0.14), transparent 55%),
radial-gradient(1000px 620px at 8% 42%, rgba(37, 99, 235, 0.09), transparent 55%),
#0a0a0c;
--bg-sidebar: #0c0c0e;
--bg-elev-1: #141518;
--bg-elev-2: #1c1d21;
--bg-input: #111114;
--bg-hover: #202126;
--bg-soft: #141518;
/* Glass surfaces (Showroom skin): translucent fills so the ambient canvas
glow reads through every panel, same language as the homepage hero. */
--glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
--glass-line: rgba(255, 255, 255, 0.07);
--glass-strong: rgba(255, 255, 255, 0.05);
--glass-chrome: rgba(16, 17, 20, 0.60);
/* Text */
--text: #e7e8ec;
--text-strong: #ffffff;
--text-muted: #8b8e97;
/* Dim is the de-emphasized tier but still carries real copy (hints, nav
section labels), so it must clear WCAG AA 4.5:1 on the elevated card
background (#141518), not just the page background. */
--text-dim: #7b7e88;
/* Lines */
--line: #26272d;
--line-soft: #1d1e23;
--line-strong: #343640;
/* Primary accent - imperial blue metallic */
--accent: #2563eb;
--accent-2: #3b82f6;
--accent-dark: #1d4ed8;
--accent-soft: rgba(37, 99, 235, 0.14);
--accent-glow: rgba(37, 99, 235, 0.40);
/* Brand gradient - blue, matches Lucid's launch button */
--accent-grad: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
--accent-grad-hover: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
/* Secondary - kept indigo so we have a sibling accent */
--indigo: #818cf8;
--indigo-soft: rgba(129, 140, 248, 0.14);
/* Status - green stays for positive states (Active pills, profit cells) */
--ok: #22c55e;
--ok-soft: rgba(34, 197, 94, 0.16);
--warn: #f59e0b;
--warn-soft: rgba(245, 158, 11, 0.16);
--danger: #ef4444;
--danger-soft: rgba(239, 68, 68, 0.16);
--info: #60a5fa;
/* Effects */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 4px 24px rgba(0, 0, 0, 0.35);
--shadow-elev: 0 10px 40px rgba(0, 0, 0, 0.50);
--shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.70);
--ring: 0 0 0 3px var(--accent-soft);
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-pill: 999px;
/* Layout */
--sidebar-w: 240px;
--topbar-h: 62px;
--announce-h: 40px;
color-scheme: dark;
}
:root[data-theme="light"] {
--bg: #f5f5f7;
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(37, 99, 235, 0.07), transparent 55%),
radial-gradient(1000px 620px at 8% 42%, rgba(37, 99, 235, 0.045), transparent 55%),
#f5f5f7;
--bg-sidebar: #ffffff;
--glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.60));
--glass-line: rgba(17, 17, 20, 0.08);
--glass-strong: rgba(17, 17, 20, 0.05);
--glass-chrome: rgba(255, 255, 255, 0.72);
--bg-elev-1: #ffffff;
--bg-elev-2: #f1f1f4;
--bg-input: #ffffff;
--bg-hover: #ededf1;
--bg-soft: #f7f7f9;
--text: #1a1b1e;
--text-strong: #0a0a0c;
--text-muted: #5c5e66;
/* Same AA constraint as the dark theme's dim tier, against the light
elevated background (#f1f1f4). */
--text-dim: #696b74;
--line: #e2e2e7;
--line-soft: #ececf0;
--line-strong: #cfcfd6;
--accent: #1d4ed8;
--accent-2: #2563eb;
--accent-dark: #1e40af;
--accent-soft: rgba(29, 78, 216, 0.10);
--accent-glow: rgba(29, 78, 216, 0.22);
--accent-grad: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
--accent-grad-hover: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
--indigo: #4f52d4;
--indigo-soft: rgba(79, 82, 212, 0.10);
--ok: #15803d;
--ok-soft: rgba(21, 128, 61, 0.10);
--warn: #b45309;
--warn-soft: rgba(180, 83, 9, 0.10);
--danger: #b91c1c;
--danger-soft: rgba(185, 28, 28, 0.10);
--info: #1d4ed8;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-card: 0 2px 14px rgba(15, 23, 42, 0.06);
--shadow-elev: 0 10px 40px rgba(15, 23, 42, 0.12);
--shadow-modal: 0 24px 80px rgba(15, 23, 42, 0.20);
color-scheme: light;
}
/* ── Accent palettes (user-selectable) ──────────────────────────────────
* Users pick an accent in the dashboard's Customize panel (and on the
* Account settings Appearance tab). The choice is stored in localStorage
* (tbb_prefs.accent) and applied pre-paint as data-accent on .
* Blue is the default and needs no attribute. Each palette overrides the
* accent token family only; surfaces, text, and status colors are shared.
* NOTE: each palette needs BOTH blocks. These sit after the light-theme
* block, so without the [data-theme="light"][data-accent] pair a light-mode
* user would get the dark-tuned shades (equal specificity, later wins). */
:root[data-accent="violet"] {
--accent: #8b5cf6;
--accent-2: #a78bfa;
--accent-dark: #7c3aed;
--accent-soft: rgba(139, 92, 246, 0.15);
--accent-glow: rgba(139, 92, 246, 0.40);
--accent-grad: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
--accent-grad-hover: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(139, 92, 246, 0.15), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(139, 92, 246, 0.09), transparent 55%), #0a0a0c;
}
:root[data-theme="light"][data-accent="violet"] {
--accent: #7c3aed;
--accent-2: #8b5cf6;
--accent-dark: #6d28d9;
--accent-soft: rgba(124, 58, 237, 0.10);
--accent-glow: rgba(124, 58, 237, 0.22);
--accent-grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
--accent-grad-hover: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(124, 58, 237, 0.07), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(124, 58, 237, 0.045), transparent 55%), #f5f5f7;
}
:root[data-accent="emerald"] {
--accent: #10b981;
--accent-2: #34d399;
--accent-dark: #059669;
--accent-soft: rgba(16, 185, 129, 0.15);
--accent-glow: rgba(16, 185, 129, 0.40);
--accent-grad: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
--accent-grad-hover: linear-gradient(135deg, #a7f3d0 0%, #34d399 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(16, 185, 129, 0.15), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(16, 185, 129, 0.09), transparent 55%), #0a0a0c;
}
:root[data-theme="light"][data-accent="emerald"] {
--accent: #047857;
--accent-2: #059669;
--accent-dark: #065f46;
--accent-soft: rgba(4, 120, 87, 0.10);
--accent-glow: rgba(4, 120, 87, 0.22);
--accent-grad: linear-gradient(135deg, #34d399 0%, #047857 100%);
--accent-grad-hover: linear-gradient(135deg, #6ee7b7 0%, #059669 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(4, 120, 87, 0.07), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(4, 120, 87, 0.045), transparent 55%), #f5f5f7;
}
:root[data-accent="amber"] {
--accent: #f59e0b;
--accent-2: #fbbf24;
--accent-dark: #d97706;
--accent-soft: rgba(245, 158, 11, 0.15);
--accent-glow: rgba(245, 158, 11, 0.40);
--accent-grad: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
--accent-grad-hover: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(245, 158, 11, 0.15), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(245, 158, 11, 0.09), transparent 55%), #0a0a0c;
}
:root[data-theme="light"][data-accent="amber"] {
--accent: #b45309;
--accent-2: #d97706;
--accent-dark: #92400e;
--accent-soft: rgba(180, 83, 9, 0.10);
--accent-glow: rgba(180, 83, 9, 0.22);
--accent-grad: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
--accent-grad-hover: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(180, 83, 9, 0.07), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(180, 83, 9, 0.045), transparent 55%), #f5f5f7;
}
:root[data-accent="rose"] {
--accent: #f43f5e;
--accent-2: #fb7185;
--accent-dark: #e11d48;
--accent-soft: rgba(244, 63, 94, 0.15);
--accent-glow: rgba(244, 63, 94, 0.40);
--accent-grad: linear-gradient(135deg, #fda4af 0%, #f43f5e 100%);
--accent-grad-hover: linear-gradient(135deg, #fecdd3 0%, #fb7185 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(244, 63, 94, 0.15), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(244, 63, 94, 0.09), transparent 55%), #0a0a0c;
}
:root[data-theme="light"][data-accent="rose"] {
--accent: #be123c;
--accent-2: #e11d48;
--accent-dark: #9f1239;
--accent-soft: rgba(190, 18, 60, 0.10);
--accent-glow: rgba(190, 18, 60, 0.22);
--accent-grad: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
--accent-grad-hover: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(190, 18, 60, 0.07), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(190, 18, 60, 0.045), transparent 55%), #f5f5f7;
}
:root[data-accent="cyan"] {
--accent: #06b6d4;
--accent-2: #22d3ee;
--accent-dark: #0891b2;
--accent-soft: rgba(6, 182, 212, 0.15);
--accent-glow: rgba(6, 182, 212, 0.40);
--accent-grad: linear-gradient(135deg, #67e8f9 0%, #06b6d4 100%);
--accent-grad-hover: linear-gradient(135deg, #a5f3fc 0%, #22d3ee 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(6, 182, 212, 0.15), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(6, 182, 212, 0.09), transparent 55%), #0a0a0c;
}
:root[data-theme="light"][data-accent="cyan"] {
--accent: #0e7490;
--accent-2: #0891b2;
--accent-dark: #155e75;
--accent-soft: rgba(14, 116, 144, 0.10);
--accent-glow: rgba(14, 116, 144, 0.22);
--accent-grad: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%);
--accent-grad-hover: linear-gradient(135deg, #67e8f9 0%, #0891b2 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(14, 116, 144, 0.07), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(14, 116, 144, 0.045), transparent 55%), #f5f5f7;
}
:root[data-accent="graphite"] {
--accent: #64748b;
--accent-2: #94a3b8;
--accent-dark: #475569;
--accent-soft: rgba(100, 116, 139, 0.18);
--accent-glow: rgba(100, 116, 139, 0.40);
--accent-grad: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
--accent-grad-hover: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(100, 116, 139, 0.15), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(100, 116, 139, 0.09), transparent 55%), #0a0a0c;
}
:root[data-theme="light"][data-accent="graphite"] {
--accent: #475569;
--accent-2: #64748b;
--accent-dark: #334155;
--accent-soft: rgba(71, 85, 105, 0.10);
--accent-glow: rgba(71, 85, 105, 0.22);
--accent-grad: linear-gradient(135deg, #94a3b8 0%, #475569 100%);
--accent-grad-hover: linear-gradient(135deg, #cbd5e1 0%, #64748b 100%);
--bg-grad: radial-gradient(900px 480px at 55% -12%, rgba(71, 85, 105, 0.07), transparent 55%), radial-gradient(1000px 620px at 8% 42%, rgba(71, 85, 105, 0.045), transparent 55%), #f5f5f7;
}
/* Custom accent: the whole family derives from one hue. trader.js (and the
* pre-paint scripts) set data-accent="custom" plus --accent-h (0-359) inline
* on ; the saturation/lightness pairs below are tuned to sit alongside
* the preset palettes. The 221 fallback is the default imperial-blue hue. */
:root[data-accent="custom"] {
--accent: hsl(var(--accent-h, 221) 83% 53%);
--accent-2: hsl(var(--accent-h, 221) 88% 62%);
--accent-dark: hsl(var(--accent-h, 221) 78% 46%);
--accent-soft: hsl(var(--accent-h, 221) 83% 53% / 0.15);
--accent-glow: hsl(var(--accent-h, 221) 83% 53% / 0.40);
--accent-grad: linear-gradient(135deg, hsl(var(--accent-h, 221) 90% 72%) 0%, hsl(var(--accent-h, 221) 83% 53%) 100%);
--accent-grad-hover: linear-gradient(135deg, hsl(var(--accent-h, 221) 92% 80%) 0%, hsl(var(--accent-h, 221) 88% 62%) 100%);
--bg-grad: radial-gradient(1100px 560px at 12% -8%, hsl(var(--accent-h, 221) 83% 53% / 0.07), transparent 60%), #0a0a0c;
}
:root[data-theme="light"][data-accent="custom"] {
--accent: hsl(var(--accent-h, 221) 76% 42%);
--accent-2: hsl(var(--accent-h, 221) 80% 50%);
--accent-dark: hsl(var(--accent-h, 221) 74% 34%);
--accent-soft: hsl(var(--accent-h, 221) 76% 42% / 0.10);
--accent-glow: hsl(var(--accent-h, 221) 76% 42% / 0.22);
--accent-grad: linear-gradient(135deg, hsl(var(--accent-h, 221) 80% 56%) 0%, hsl(var(--accent-h, 221) 76% 42%) 100%);
--accent-grad-hover: linear-gradient(135deg, hsl(var(--accent-h, 221) 84% 66%) 0%, hsl(var(--accent-h, 221) 80% 50%) 100%);
--bg-grad: radial-gradient(1100px 560px at 12% -8%, hsl(var(--accent-h, 221) 76% 42% / 0.05), transparent 60%), #f5f5f7;
}
/* ── Baseline ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
background: var(--bg) !important;
color: var(--text) !important;
margin: 0;
padding: 0;
overflow-x: clip;
}
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: var(--bg-grad) !important;
background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-strong) !important;
font-family: "Inter", system-ui, sans-serif !important;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 16px; line-height: 1.3; }
p { margin: 0; color: var(--text); }
a { color: var(--accent-2); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection { background: var(--accent-soft); color: var(--text-strong); }
/* ── Site header (landing / auth) ─────────────────────────────────────── */
.site-header {
background: rgba(10, 10, 12, 0.72);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom: 1px solid var(--line-soft) !important;
position: sticky; top: 0; z-index: 50;
}
:root[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.75); }
.site-brand {
color: var(--text-strong) !important;
display: inline-flex !important;
align-items: center;
gap: 10px;
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: -0.02em;
}
.site-brand img {
width: 30px !important;
height: 30px !important;
border-radius: 8px;
object-fit: contain;
flex: 0 0 auto;
}
.site-brand:hover { color: var(--accent-2) !important; text-decoration: none; }
.site-nav { display: flex; gap: 12px; align-items: center; }
.site-nav a { color: var(--text-muted) !important; font-weight: 500 !important; transition: color .15s; }
.site-nav a:hover { color: var(--text-strong) !important; text-decoration: none; }
/* ── Theme toggle ─────────────────────────────────────────────────────── */
.theme-toggle,
.icon-btn {
background: var(--bg-elev-1);
border: 1px solid var(--line-strong);
color: var(--text);
width: 36px; height: 36px;
border-radius: var(--r-md);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 17px;
transition: background .15s, color .15s, border-color .15s, transform .12s;
padding: 0;
}
.theme-toggle:hover,
.icon-btn:hover {
color: var(--accent-2);
border-color: var(--accent);
background: var(--accent-soft);
transform: translateY(-1px);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary, .btn-primary-sm,
.btn-save, .btn-save-setting {
background: var(--accent-grad) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
font-weight: 700 !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 6px 22px rgba(96, 165, 250, 0.35);
transition: transform .12s, box-shadow .15s, filter .15s, background .15s !important;
cursor: pointer;
}
.btn-primary {
padding: 11px 22px;
border-radius: var(--r-md);
font-size: 14px;
}
.btn-primary-sm, .btn-save, .btn-save-setting {
padding: 8px 16px;
border-radius: var(--r-md);
font-size: 13.5px;
}
.btn-primary:hover, .btn-primary-sm:hover,
.btn-save:hover, .btn-save-setting:hover {
background: var(--accent-grad-hover) !important;
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset,
0 10px 28px rgba(96, 165, 250, 0.55);
color: #ffffff !important;
text-decoration: none;
}
.btn-secondary, .btn-secondary-sm, .btn-cancel {
background: transparent !important;
color: var(--text-strong) !important;
border: 1px solid var(--line-strong) !important;
font-weight: 500 !important;
padding: 10px 20px;
border-radius: var(--r-md);
font-size: 14px;
transition: background .15s, border-color .15s;
cursor: pointer;
}
.btn-secondary-sm, .btn-cancel { padding: 7px 14px; font-size: 13px; }
.btn-secondary:hover, .btn-secondary-sm:hover, .btn-cancel:hover {
background: var(--bg-hover) !important;
border-color: var(--accent) !important;
text-decoration: none;
color: var(--text-strong) !important;
}
.btn-edit {
background: var(--indigo-soft) !important;
color: var(--indigo) !important;
border: 0 !important;
}
.btn-del, .btn-danger-sm {
background: var(--danger-soft) !important;
color: var(--danger) !important;
border: 0 !important;
}
/* ── Landing hero + features ──────────────────────────────────────────── */
body.marketing { min-height: 100vh; }
.hero { padding: 80px 32px 40px !important; max-width: 920px !important; }
.hero h1 {
font-size: clamp(38px, 6vw, 56px) !important;
font-weight: 800 !important;
letter-spacing: -0.035em;
background: linear-gradient(180deg, #ffffff 0%, var(--text-muted) 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .hero h1 {
background: linear-gradient(180deg, #0b1024 0%, #5e6781 140%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero .lede { color: var(--text-muted) !important; font-size: 18px !important; }
.hero-actions { gap: 14px !important; margin-top: 4px; }
.features {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 16px !important;
max-width: 1120px !important;
margin: 40px auto 60px !important;
padding: 0 32px !important;
}
.feature {
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--bg-elev-1) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-lg) !important;
padding: 24px !important;
color: var(--text);
transition: border-color .15s, transform .15s, box-shadow .15s;
position: relative;
overflow: hidden;
}
.feature::before {
content: "";
position: absolute; inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--accent-glow), transparent 50%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .25s;
pointer-events: none;
}
.feature:hover { transform: translateY(-2px); border-color: var(--line-strong) !important; }
.feature:hover::before { opacity: 1; }
.feature h3 { color: var(--text-strong) !important; margin: 0 0 8px !important; font-size: 15.5px !important; }
.feature p { color: var(--text-muted) !important; font-size: 13.5px !important; line-height: 1.55; }
.site-footer {
border-top: 1px solid var(--line-soft) !important;
color: var(--text-muted) !important;
background: transparent !important;
padding: 24px 32px !important;
}
/* ── Auth pages (login / signup / 404) ────────────────────────────────── */
body.auth-page {
min-height: 100vh;
display: flex !important;
align-items: center;
justify-content: center;
padding: 32px;
}
.auth-card {
background: var(--bg-elev-1) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-xl) !important;
padding: 32px 34px !important;
box-shadow: var(--shadow-elev) !important;
max-width: 440px !important;
width: 100%;
position: relative;
}
.auth-card::before {
content: "";
position: absolute; inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--accent), transparent 40%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0.4;
pointer-events: none;
}
.auth-card .site-brand { font-size: 18px !important; margin-bottom: 22px !important; }
.auth-card h1 { font-size: 24px !important; margin: 0 0 20px !important; }
.auth-card label {
color: var(--text-muted) !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.auth-card input {
background: var(--bg-input) !important;
border: 1px solid var(--line) !important;
color: var(--text) !important;
padding: 11px 13px !important;
border-radius: var(--r-md) !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: normal !important;
text-transform: none !important;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-card input:focus {
outline: none;
border-color: var(--accent) !important;
box-shadow: var(--ring) !important;
background: var(--bg-elev-2) !important;
}
.auth-card .hint { color: var(--text-dim) !important; }
.auth-alt { color: var(--text-muted) !important; }
.form-error {
background: var(--danger-soft) !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
color: var(--danger) !important;
border-radius: var(--r-md) !important;
padding: 10px 12px !important;
font-size: 13px;
}
/* ── App shell (admin + dashboard pages) ──────────────────────────────── */
/* Sidebar */
#header {
background: var(--bg-sidebar) !important;
border-right: 1px solid var(--line-soft) !important;
width: var(--sidebar-w) !important;
/* No top padding: a sticky child can't rise above its containing block's
content box, so any padding-top here becomes a gap above the pinned brand
that scrolled nav items show through. The brand carries the top spacing
itself (padding-top) so it sticks flush to the very top edge instead. */
padding: 0 14px 18px !important;
z-index: 100 !important;
}
/* Soft fade at the top and bottom of the scrollable sidebar so a long nav list
dissolves into the chrome instead of hard-clipping at the edge. Only shown
when the nav actually overflows the viewport (class toggled by theme.js):
on tall screens with a short nav the fade would otherwise sit halfway up
the sidebar, dimming reachable items. pointer-events:none keeps the nav
links beneath the fade clickable. */
#header.nav-overflow::before,
#header.nav-overflow::after {
content: "";
position: sticky;
display: block;
height: 44px;
/* #header is a column flex container, so these pseudo-elements are flex
items. The nav can't shrink below its content, so when the list overflows
(the only time the fades exist) all the shrinkage lands here, collapsing
the fades to 0 while their negative margins keep pulling the nav up under
the brand and clipping the last item. */
flex: none;
pointer-events: none;
z-index: 2;
transition: opacity .2s ease;
}
/* At either end of the scroll there is nothing more to hint at, and the fade
would just dim the first/last reachable item (theme.js toggles these). */
#header.nav-overflow.nav-at-top::before { opacity: 0; }
#header.nav-overflow.nav-at-bottom::after { opacity: 0; }
#header.nav-overflow::before {
top: -18px;
margin-bottom: -44px;
background: linear-gradient(to top, transparent, var(--bg-sidebar) 85%);
}
#header.nav-overflow::after {
bottom: -18px;
margin-top: -44px;
background: linear-gradient(to bottom, transparent, var(--bg-sidebar) 85%);
}
@media (max-width: 991.98px) {
#header {
width: var(--sidebar-w) !important;
left: calc(var(--sidebar-w) * -1) !important;
transition: left .3s ease !important;
}
/* Slide the sidebar in when the hamburger flips body.mobile-nav-active.
Needs !important to beat the off-screen rule above (which is also
!important); without it the menu never appears. */
.mobile-nav-active #header { left: 0 !important; }
/* Scrim behind the open drawer: dims the page and gives the outside-tap
close target (core/main.js). Sits under #header (100) and the floating
toggle (200). */
body.mobile-nav-active::before {
content: "";
position: fixed;
inset: 0;
background: rgba(8, 11, 18, 0.45);
z-index: 99;
}
}
@media (min-width: 992px) {
#main { margin-left: var(--sidebar-w) !important; }
}
.sidebar-brand {
display: flex !important;
align-items: center;
gap: 10px;
/* Top padding absorbs the header's former padding-top so the brand keeps its
visual spacing while sticking flush to the header's top edge (top:0). */
padding: 18px 8px;
margin-bottom: 6px;
font-weight: 700;
font-size: 17px;
color: var(--text-strong) !important;
letter-spacing: -0.02em;
text-decoration: none;
border-bottom: 1px solid var(--line-soft);
/* Pin the brand to the top of the scrollable sidebar so a long nav list
(the dashboard has more items than admin) can never push it off-screen
or let the top fade clip it. Opaque background + z-index above the
nav-overflow ::before fade keeps it crisp while links scroll beneath. */
position: sticky;
top: 0;
z-index: 4;
background: var(--bg-sidebar);
}
.sidebar-brand:hover { color: var(--accent-2) !important; text-decoration: none; }
.sidebar-brand img {
width: 32px !important;
height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
border-radius: 8px;
background: var(--bg);
border: 1px solid var(--line);
object-fit: contain;
padding: 3px;
flex: 0 0 auto;
}
/* Nav menu pills */
#header .nav-menu a,
#header .nav-menu a:focus {
background: transparent !important;
color: var(--text-muted) !important;
height: 38px !important;
padding: 8px 12px !important;
margin-bottom: 2px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
border-radius: 8px !important;
letter-spacing: -0.01em;
position: relative;
transition: background .15s, color .15s !important;
}
#header .nav-menu a i { font-size: 17px !important; opacity: 0.85; }
#header .nav-menu a span {
padding-left: 10px !important;
color: inherit !important;
}
#header .nav-menu a:hover,
#header .nav-menu li:hover > a {
background: var(--bg-hover) !important;
color: var(--text-strong) !important;
}
#header .nav-menu a:hover i,
#header .nav-menu .active i { opacity: 1; }
#header .nav-menu .active,
#header .nav-menu .active:focus {
background: var(--accent-soft) !important;
color: var(--accent-2) !important;
font-weight: 600 !important;
}
#header .nav-menu .active::before {
content: "";
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
background: var(--accent);
border-radius: 0 3px 3px 0;
}
#header .nav-menu a:hover span,
#header .nav-menu .active span { color: inherit !important; }
#header .nav-menu .nav-section-label,
#header .nav-menu .nav-section-label span {
color: var(--text-dim) !important;
border-top-color: transparent !important;
margin: 16px 0 4px !important;
padding: 0 12px !important;
font-size: 10.5px !important;
letter-spacing: 1.2px;
font-weight: 700 !important;
text-transform: uppercase;
background: transparent !important;
}
/* The inner span otherwise inherits the li's 16px/4px margins from the rule
above, doubling the vertical space around every section label. */
#header .nav-menu .nav-section-label span {
margin: 0 !important;
padding: 0 !important;
}
#header .nav-menu .nav-section-label:first-of-type { margin-top: 8px !important; }
.mobile-nav-toggle {
color: var(--text-strong) !important;
background: var(--bg-elev-1) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-md) !important;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
z-index: 200;
}
.mobile-nav-active .mobile-nav-toggle { background: var(--accent) !important; color: #0a0d12 !important; }
/* Line the fixed toggle up with the floating glass topbar (core/style.css
parks it at 10px/10px, the viewport corner): same 10px top inset the bar
sticks at, vertically centered on the bar's height, and inset past the
bar's 16px side margin so it reads as one of the bar's own icons. The
bar's <992px padding-right reserves this footprint. */
.mobile-nav-toggle {
top: calc(10px + (var(--topbar-h) - 40px) / 2);
right: 27px;
}
/* The toggle markup uses Bootstrap's d-xl-none (visible <1200px), but the
sidebar only goes off-canvas below 992px. Hide the toggle in the
992–1199px window where it would float dead over the topbar icons. */
@media (min-width: 992px) {
.mobile-nav-toggle { display: none !important; }
}
/* ── Topbar (dashboard / admin) ───────────────────────────────────────── */
/* Plain block-flow element, NOT negative-margined like before. Lives at
the top of #main and stays sticky as the user scrolls. */
/* Floating glass bar, detached from the edges like the marketing chrome. */
.app-topbar {
position: sticky;
top: 10px;
z-index: 50;
display: flex;
align-items: center;
gap: 14px;
padding: 0 18px;
height: var(--topbar-h);
background: var(--glass-chrome);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid var(--glass-line);
border-radius: 16px;
margin: 10px 16px 22px;
}
.app-topbar-title {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
margin: 0;
color: var(--text-strong) !important;
/* The title is the row's designated shrink absorber: it may ellipsize on
narrow screens so the session tracker and icon buttons (kept at natural
size below) never get crushed or spill past the bar's padding edge. */
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-topbar-spacer { flex: 1 1 auto; }
.app-topbar .icon-btn,
.app-topbar .theme-toggle,
.app-topbar .session-tracker { flex: 0 0 auto; }
/* ── Topbar status strip ──────────────────────────────────────────────── */
/* Always-on vitals next to the page title: engine heartbeat, armed
assignments, today's P&L, and the flatten-all escape hatch. The dashboard
feeds it from trader.js (stripSetEngine / stripSetSummary). */
.topbar-status {
display: flex;
align-items: center;
gap: 8px;
flex: 0 1 auto;
min-width: 0;
}
.tb-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: var(--r-pill);
background: var(--bg-elev-2);
border: 1px solid var(--line);
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: var(--text-muted);
cursor: pointer;
white-space: nowrap;
transition: border-color .15s, color .15s, background .15s;
}
.tb-pill:hover { border-color: var(--line-strong); color: var(--text); background: var(--bg-hover); }
.tb-pill i { font-size: 15px; line-height: 1; }
.tb-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.tb-pill.is-ok { color: var(--ok); }
.tb-pill.is-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft), 0 0 10px var(--ok); }
.tb-pill.is-warn { color: var(--warn); }
.tb-pill.is-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.tb-pill.is-danger { color: var(--danger); }
.tb-pill.is-danger .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.tb-pill.is-pos { color: var(--ok); }
.tb-pill.is-neg { color: var(--danger); }
.tb-pill-danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); }
.tb-pill-danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
/* The strip is desktop chrome: on narrow screens the title and session pill
already fill the bar, and the same numbers live on the Home widgets. */
@media (max-width: 1099.98px) { .topbar-status { display: none; } }
/* Account settings inside the app shell: the page's own .settings-page
column (site.css) centers itself with auto margins; under the sticky
topbar its 60px top margin double-spaces, so collapse it. */
.admin-main .settings-page { margin-top: 0; }
.market-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--bg-elev-2);
border: 1px solid var(--line);
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
}
.market-pill .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px var(--ok-soft), 0 0 8px var(--accent-glow);
animation: tbb-pulse 2.6s ease-in-out infinite;
}
@keyframes tbb-pulse {
0%, 100% { box-shadow: 0 0 0 3px var(--ok-soft), 0 0 8px var(--accent-glow); }
50% { box-shadow: 0 0 0 6px transparent, 0 0 14px var(--accent-glow); }
}
.market-pill.closed .dot { background: var(--text-dim); animation: none; box-shadow: none; }
/* ── FX session tracker (topbar) ──────────────────────────────────────── */
.session-tracker {
display: inline-flex;
align-items: center;
gap: 8px;
}
.session-select {
appearance: none;
-webkit-appearance: none;
background: var(--bg-elev-2);
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--text-muted);
font-size: 12.5px;
font-weight: 500;
padding: 6px 26px 6px 12px;
cursor: pointer;
/* caret */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a93a6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.session-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.session-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--bg-elev-2);
border: 1px solid var(--line);
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
}
.session-pill .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px var(--ok-soft), 0 0 8px var(--accent-glow);
animation: tbb-pulse 2.6s ease-in-out infinite;
}
.session-pill.closed .dot { background: var(--text-dim); animation: none; box-shadow: none; }
/* The pill is tappable everywhere: it opens the session-details popover. */
.session-pill { cursor: pointer; transition: border-color .15s; }
.session-pill:hover { border-color: var(--line-strong); }
.session-pill:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* Caret signals the pill is the session picker (it opens the chooser popover). */
.session-pill-caret { font-size: 14px; line-height: 1; margin-left: -2px; color: var(--text-dim); }
@media (max-width: 575.98px) {
.app-topbar { padding: 0 14px; gap: 10px; }
.app-topbar-title { font-size: 16px !important; }
.market-pill span:nth-child(2) { display: none; }
/* On phones the full label + caret can't fit alongside the palette, bell,
discord and the hamburger reservation. Collapse the pill to a bare
tappable dot - tapping it opens the session-details popover, which carries
the full session chooser. */
.session-tracker .session-pill .session-pill-label,
.session-tracker .session-pill .session-pill-caret { display: none; }
.session-tracker .session-pill { padding: 7px; }
}
/* ── Session details popover (topbar dot → modal) ─────────────────────────── */
.sess-list { display: flex; flex-direction: column; gap: 6px; }
.sess-row {
display: flex; align-items: center; gap: 12px;
width: 100%; text-align: left;
padding: 11px 12px;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: var(--bg-elev-2);
color: var(--text-strong);
cursor: pointer;
transition: border-color .12s, background .12s;
}
.sess-row:hover { border-color: var(--line-strong); }
.sess-row.is-tracked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sess-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); }
.sess-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.sess-dot.off { background: var(--text-dim); }
.sess-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.sess-name { font-weight: 600; font-size: 13.5px; }
.sess-win { font-size: 11.5px; }
.sess-status { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.sess-status.on { color: var(--ok); font-weight: 600; }
.sess-status.off { color: var(--text-muted); }
/* While the sidebar is off-canvas the fixed hamburger (40px + 10px inset)
owns the viewport's top-right corner; pad the sticky topbar so its
bell/discord icons stop short of it once the bar pins on scroll. Placed
after the phone block above so it also beats its `padding: 0 14px`. */
@media (max-width: 991.98px) {
.app-topbar { padding-right: 62px; }
}
/* ── Announcement strip ───────────────────────────────────────────────── */
/* Floats with the same inset + radius as the glass topbar above it. */
.announce-strip {
display: flex;
align-items: center;
gap: 14px;
height: var(--announce-h);
padding: 0 18px;
margin: -12px 16px 22px;
background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 65%);
border: 1px solid var(--glass-line);
border-radius: 12px;
font-size: 13px;
color: var(--text-muted);
overflow: hidden;
}
.announce-strip[hidden] { display: none; }
.announce-strip .announce-icon {
color: var(--accent-2);
flex: 0 0 auto;
font-size: 14px;
display: inline-flex;
/* The marquee track sits immediately to the right and its left mask fades
in over ~80px - on narrow viewports scrolling text gets close enough to
the icon that the accent-on-accent-soft color combo blurs. A soft dark
halo lifts the icon off the strip background and keeps it readable. */
text-shadow:
0 0 4px var(--bg-sidebar, #0c0c0e),
0 0 8px var(--bg-sidebar, #0c0c0e);
position: relative;
z-index: 1;
}
:root[data-theme="light"] .announce-strip .announce-icon {
text-shadow:
0 0 4px rgba(255, 255, 255, 0.9),
0 0 8px rgba(255, 255, 255, 0.7);
}
.announce-strip .announce-track {
flex: 1 1 auto;
display: flex;
gap: 40px;
white-space: nowrap;
overflow: hidden;
animation: announce-marquee 50s linear infinite;
/* Soft fade on both edges so text dissolves into the strip rather than
clipping against the border. ~80px ramp on each side. */
-webkit-mask-image: linear-gradient(90deg,
transparent 0,
rgba(0,0,0,0.15) 20px,
rgba(0,0,0,0.6) 50px,
#000 80px,
#000 calc(100% - 80px),
rgba(0,0,0,0.6) calc(100% - 50px),
rgba(0,0,0,0.15) calc(100% - 20px),
transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0,
rgba(0,0,0,0.15) 20px,
rgba(0,0,0,0.6) 50px,
#000 80px,
#000 calc(100% - 80px),
rgba(0,0,0,0.6) calc(100% - 50px),
rgba(0,0,0,0.15) calc(100% - 20px),
transparent 100%);
}
.announce-strip .announce-track > span { flex: 0 0 auto; }
.announce-strip .announce-track > span::before {
content: "•";
margin-right: 14px;
color: var(--accent-2);
}
.announce-strip:hover .announce-track { animation-play-state: paused; }
@keyframes announce-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.announce-strip .announce-close {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
font-size: 18px; line-height: 1;
padding: 0 4px;
transition: color .15s;
}
.announce-strip .announce-close:hover { color: var(--text-strong); }
/* ── Page header ──────────────────────────────────────────────────────── */
.admin-main { padding: 0 0 60px !important; }
.admin-main > .section {
display: none;
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
}
.admin-main > .section.active { display: block; }
@media (max-width: 575.98px) { .admin-main > .section { padding: 0 14px; } }
/* The upgrade + Discord banners are direct children of .admin-main (so they'd
otherwise span full-bleed). This wrapper gives them the same centered,
max-width box as the content sections so they line up with the cards. */
.dash-banner-zone { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 575.98px) { .dash-banner-zone { padding: 0 14px; } }
/* No top padding on mobile either: the sticky .app-topbar reserves room for
the fixed hamburger on its right, so the bar hugs the viewport top from the
start instead of leaving the hamburger floating alone above it until the
first scroll pins them together. */
@media (max-width: 991.98px) { .admin-main { padding: 0 0 40px !important; } }
.page-header {
margin-bottom: 22px !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.page-header h1 {
font-size: 26px !important;
font-weight: 800 !important;
text-transform: none !important;
letter-spacing: -0.03em !important;
color: var(--text-strong) !important;
margin: 0 0 6px !important;
padding-bottom: 0 !important;
}
.page-header h1::before { display: none !important; }
.page-header p {
color: var(--text-muted) !important;
font-size: 14px !important;
margin: 0 !important;
}
/* ── Stat cards ───────────────────────────────────────────────────────── */
.stats-row {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 14px !important;
margin: 4px 0 22px !important;
}
.stat-card {
background: var(--glass-bg) !important;
border: 1px solid var(--glass-line) !important;
border-radius: 14px !important;
padding: 18px 20px !important;
text-align: left !important;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
transition: border-color .15s, transform .15s;
}
.stat-card:hover { border-color: var(--line-strong) !important; transform: translateY(-1px); }
.stat-card::after {
content: "";
position: absolute; right: -40px; top: -40px;
width: 120px; height: 120px;
background: radial-gradient(circle, var(--accent-soft), transparent 70%);
border-radius: 50%;
pointer-events: none;
opacity: 0.6;
}
.stat-card .label {
color: var(--text-muted) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.6px;
text-transform: uppercase;
margin-top: 4px;
}
.stat-card .num {
color: var(--text-strong) !important;
font-size: 28px !important;
font-weight: 800 !important;
letter-spacing: -0.025em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* ── Cards (generic) ──────────────────────────────────────────────────── */
/* Glass panels: translucent over the ambient canvas glow instead of opaque
paint, with the homepage's accent light-streak across the top edge. */
.card {
position: relative;
background: var(--glass-bg) !important;
border: 1px solid var(--glass-line) !important;
border-radius: 16px !important;
box-shadow: var(--shadow-card) !important;
margin-bottom: 18px !important;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
opacity: 0.55;
pointer-events: none;
}
.card-header-custom {
padding: 16px 20px !important;
border-bottom: 1px solid var(--glass-line) !important;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.card-header-custom h3 {
color: var(--text-strong) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
margin: 0 !important;
}
/* Loose content in a card body gets comfortable padding so text and buttons
never sit flush against the card edge. A body that is purely a scrollable
table (or a single form) keeps zero padding so the table bleeds edge-to-edge
the way the data tables are designed to. Forms supply their own inset. */
.card-body-custom { padding: 18px 22px; }
.card-body-custom > form { padding: 22px 24px; }
.card-body-custom:has(> .table-responsive:only-child),
.card-body-custom:has(> form) { padding: 0; }
/* ── Tables ───────────────────────────────────────────────────────────── */
/* Ensure wide tables scroll inside the card instead of bleeding past it.
The Bootstrap default for .table-responsive is overflow-x: auto, but we
set it explicitly here so the horizontal-clip on html/body doesn't hide
the overflow (a horizontally clipped element with overflowing children
inside an overflow:visible parent loses its content past the edge). */
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
border-radius: 0 0 var(--r-lg) var(--r-lg);
/* Never let the scroll container be stretched wider than its card by a
wide table; this is what guarantees the overflow scrolls instead of
spilling past the card edge and getting clipped by overflow-x:clip on
html/body (which is what made the rightmost column look cut off). */
width: 100%;
max-width: 100%;
}
.data-table { width: 100%; border-collapse: collapse; }
/* Let the action-button cluster wrap onto a second line on tight widths
instead of forcing the whole row (and table) wider than the card.
IMPORTANT: must stay display:table-cell on desktop - a flexed
breaks
out of table layout, so its background no longer stretches with the row
and the tr:hover highlight renders a mis-sized patch on the Actions
column. The buttons are inline-blocks; they wrap naturally inside a
table-cell, with margins standing in for flex gap. (The <640px stacked
mode below overrides this with its own flex layout.) */
.data-table .row-actions {
display: table-cell;
white-space: normal;
}
.data-table .row-actions > * {
margin: 2px 6px 2px 0;
vertical-align: middle;
}
.data-table th {
background: var(--bg-elev-2) !important;
color: var(--text-muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase;
padding: 10px 16px !important;
border-bottom: 1px solid var(--line-soft) !important;
white-space: nowrap;
text-align: left;
}
.data-table td {
padding: 13px 16px !important;
border-bottom: 1px solid var(--line-soft) !important;
color: var(--text) !important;
font-size: 13.5px !important;
vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none !important; }
.data-table tr:hover td { background: var(--bg-hover) !important; }
/* ── Responsive stacked tables (mobile) ───────────────────────────────────
A wide table inside .table-responsive scrolls horizontally on phones, which
hides the rightmost columns (notably the Actions cluster) until the user
scrolls sideways. Below 640px we collapse each row into a self-contained
labelled card so every field, including the actions, is visible with no
horizontal scroll. Per-cell labels come from data-label, which
assets/js/responsive-tables.js copies from each column's
. Opt a table
out with class "no-stack" (dense numeric or custom-layout tables). */
@media (max-width: 640px) {
.data-table:not(.no-stack),
.data-table:not(.no-stack) > tbody,
.data-table:not(.no-stack) > tbody > tr,
.data-table:not(.no-stack) > tbody > tr > td {
display: block;
width: 100%;
}
.data-table:not(.no-stack) > thead { display: none; }
.data-table:not(.no-stack) > tbody > tr {
margin: 0 0 10px;
padding: 2px 0;
border: 1px solid var(--line-soft) !important;
border-radius: 10px;
background: var(--bg-elev-1);
}
.data-table:not(.no-stack) > tbody > tr:last-child { margin-bottom: 0; }
.data-table:not(.no-stack) > tbody > tr > td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
text-align: right;
padding: 7px 13px !important;
border-bottom: 1px solid var(--line-soft) !important;
font-size: 13.5px !important;
}
.data-table:not(.no-stack) > tbody > tr > td:last-child { border-bottom: none !important; }
/* The account-name cell is the card's title, not a label:value pair. Stack it
left-aligned (name + badges on top, risk-cap chips wrapping beneath) and
drop the redundant "Account" pseudo-label so the row stops fighting the
risk chip for horizontal space. */
.data-table:not(.no-stack) > tbody > tr > td.acct-name-cell {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 6px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.data-table:not(.no-stack) > tbody > tr > td.acct-name-cell::before { display: none; }
/* A cell whose value is a block (e.g. a signal payload) can't sit
beside its label without overflowing the card. Stack the label on top and
let the code wrap full-width inside the box. */
.data-table:not(.no-stack) > tbody > tr > td:has(> code) {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 4px;
}
.data-table:not(.no-stack) > tbody > tr > td code {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
.data-table:not(.no-stack) > tbody > tr > td[data-label]::before {
content: attr(data-label);
flex: 0 0 auto;
margin-right: 12px;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
/* Placeholder / empty rows (a single colspan cell) span the card full width
and centre, with no pseudo-label. */
.data-table:not(.no-stack) > tbody > tr > td[colspan] {
justify-content: center;
text-align: center;
/* Stack, don't row-flex: demo-empty cells hold a message + action button,
which side-by-side squeezes the button into one-word-per-line. */
flex-direction: column;
}
/* Folder header rows are colspan cells too, but they hold a real flex row
(grip, chevron, name, count, actions): the centered-column placeholder
treatment above squeezed that row into a wrapped pillar. Keep them
left-aligned rows and let the action cluster wrap beneath the name. */
.data-table:not(.no-stack) > tbody > tr > td.tbb-folder-cell {
flex-direction: row;
justify-content: flex-start;
text-align: left;
}
.data-table:not(.no-stack) .tbb-folder-head { flex-wrap: wrap; row-gap: 2px; }
/* Actions cell: the buttons are direct children of td.row-actions (no nested
wrapper), so a value-right layout would spread them awkwardly. Instead put
the "Actions" label on its own line, then let the button cluster wrap
full-width beneath it. */
.data-table:not(.no-stack) > tbody > tr > td.row-actions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 6px;
text-align: left;
}
/* The desktop inline-wrap margins double up with the flex gap here. */
.data-table:not(.no-stack) > tbody > tr > td.row-actions > * { margin: 0; }
.data-table:not(.no-stack) > tbody > tr > td.row-actions::before {
flex: 0 0 100%;
margin: 0 0 2px;
}
.data-table:not(.no-stack) > tbody > tr:hover > td { background: transparent !important; }
}
.muted, .muted.small, .small.muted, .small { color: var(--text-muted) !important; }
code {
background: var(--bg-elev-2) !important;
color: var(--accent-2) !important;
font-size: 12.5px;
padding: 2px 6px;
border-radius: 5px;
border: 1px solid var(--line-soft);
}
/* ── Inputs / selects / textareas (shared) ────────────────────────────── */
/* Use background-color (not the `background` shorthand) so the select-caret
background-image set in the rule below isn't reset by the cascade. */
.form-control, .form-select,
.manual-grid input, .manual-grid select,
form#backtest-form input, form#backtest-form select, form#backtest-form textarea,
.trader-modal-card input, .trader-modal-card select, .trader-modal-card textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], textarea, select {
background-color: var(--bg-input) !important;
color: var(--text) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-md) !important;
padding: 9px 12px !important;
font-size: 13.5px !important;
transition: border-color .15s, box-shadow .15s, background-color .15s !important;
}
.form-control:focus, .form-select:focus,
.manual-grid input:focus, .manual-grid select:focus,
form#backtest-form input:focus, form#backtest-form select:focus, form#backtest-form textarea:focus,
.trader-modal-card input:focus, .trader-modal-card select:focus, .trader-modal-card textarea:focus,
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--accent) !important;
box-shadow: var(--ring) !important;
background-color: var(--bg-elev-2) !important;
}
/* Exception: the Customize panel's hue slider is a range input; the generic
chrome above would bury its rainbow gradient track (trader.css) under
--bg-input and pad it like a text field. */
.trader-modal-card input.cz-hue-range,
.trader-modal-card input.cz-hue-range:focus {
background-color: transparent !important;
padding: 0 !important;
border-radius: 999px !important;
}
/* Placeholder text: keep visible but obviously secondary so users can
distinguish placeholder hints from real values. */
::placeholder { color: var(--text-muted); opacity: 0.85; }
/* Chrome autofill paints the field a yellow/olive color by default which
looks broken on a dark theme. Re-skin it to match our input chrome. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
caret-color: var(--text) !important;
transition: background-color 9999s ease-in-out 0s;
}
/* Site-wide