@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════════════════ Brand layer — the shared design system of the trading platform (tradingplatform/assets/css/app.css + polish.css), loaded LAST on every trader / investor / public page so all three products look like one brand. Part 1 (tokens + base) is identical in every project. Part 2 maps this project's existing markup onto those tokens; markup and behaviour are unchanged. Theme: html.dark / [data-theme] / [data-bs-theme] → dark or light Tone: html[data-tone="neutral"] → plain white / black surfaces, flat buttons. html[data-tone="sahmee"] → the sahmeeai.com look: navy ink / slate surfaces, Poppins. Otherwise ("colorful") surfaces are tinted by the palette's main colour. Palette: --primary, --primary-2 (second), --cyan (accent), --buy, --sell. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Part 1 · Tokens (identical across projects) ─────────────────────────── */ :root { --primary: #7c6cff; --primary-2: #4f8bff; --cyan: #22d3ee; --buy: #0aa574; --sell: #e5304f; --amber: #d98a00; --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--cyan) 100%); --buy-bg: color-mix(in srgb, var(--buy) 12%, transparent); --sell-bg: color-mix(in srgb, var(--sell) 10%, transparent); --amber-bg: color-mix(in srgb, var(--amber) 12%, transparent); --focus: color-mix(in srgb, var(--primary) 28%, transparent); /* colorful light */ --bg: color-mix(in srgb, var(--primary) 6%, #f6f7fa); --bg-2: color-mix(in srgb, var(--primary) 8%, #eef0f5); --surface: #ffffff; --surface-2: color-mix(in srgb, var(--primary) 4%, #f7f8fb); --surface-3: color-mix(in srgb, var(--primary) 10%, #ebeef3); --border: color-mix(in srgb, var(--primary) 14%, #dde1e8); --text: #161b26; --muted: #647087; --shadow: 0 1px 2px rgba(20, 30, 60, .08); --shadow-lg: 0 10px 30px rgba(40, 55, 120, .12); --btn-glow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent); --radius: 10px; --radius-sm: 8px; --t: .14s ease; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color-scheme: light; } :root.dark, :root[data-theme="dark"], :root[data-bs-theme="dark"] { --buy: #14c38e; --sell: #ff5470; --amber: #ffb020; --buy-bg: color-mix(in srgb, var(--buy) 14%, transparent); --sell-bg: color-mix(in srgb, var(--sell) 14%, transparent); --amber-bg: color-mix(in srgb, var(--amber) 14%, transparent); /* colorful dark */ --bg: color-mix(in srgb, var(--primary) 7%, #090c12); --bg-2: color-mix(in srgb, var(--primary) 9%, #0d1118); --surface: color-mix(in srgb, var(--primary) 8%, #10141c); --surface-2: color-mix(in srgb, var(--primary) 11%, #161b25); --surface-3: color-mix(in srgb, var(--primary) 16%, #1e2531); --border: color-mix(in srgb, var(--primary) 16%, #222937); --text: #e8ecf3; --muted: #8b95a8; --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-lg: 0 10px 30px rgba(3, 6, 20, .45); color-scheme: dark; } /* Neutral surface style: plain white / black and greys, no glow. Only the backgrounds change: buttons keep the palette gradient, and buy / sell colours still come from the palette. */ :root[data-tone="neutral"] { --bg: #f5f5f6; --bg-2: #fafafa; --surface: #ffffff; --surface-2: #f6f6f7; --surface-3: #ececee; --border: #e4e4e7; --text: #18181b; --muted: #6b6b73; --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .08); --btn-glow: none; } :root[data-tone="neutral"]:is(.dark, [data-theme="dark"], [data-bs-theme="dark"]) { --bg: #000000; --bg-2: #0a0a0b; --surface: #111112; --surface-2: #19191b; --surface-3: #232326; --border: #27272a; --text: #ededef; --muted: #8b8b92; --shadow: none; --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); } /* Sahmee surface style (the sahmeeai.com / sahmeeinvest look): navy ink in dark mode, slate / white in light mode, Poppins, flat brand-colour buttons with a soft brand glow. */ :root[data-tone="sahmee"] { --bg: #f1f5f9; --bg-2: #f8fafc; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #e2e8f0; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --grad: linear-gradient(0deg, var(--primary), var(--primary)); --btn-glow: 0 10px 24px color-mix(in srgb, var(--primary-2) 25%, transparent); --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .05); --shadow-lg: 0 20px 40px rgba(15, 23, 42, .12); --font: 'Poppins', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root[data-tone="sahmee"]:is(.dark, [data-theme="dark"], [data-bs-theme="dark"]) { --bg: #051628; --bg-2: #030e1b; --surface: #0a1f38; --surface-2: #12294a; --surface-3: #1e3557; --border: #1b3150; --text: #e2e8f0; --muted: #94a3b8; --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 50px rgba(1, 8, 20, .55); } html[lang="ar"] { --font: 'Cairo', 'Inter', system-ui, sans-serif; } /* ── Part 1 · Base ───────────────────────────────────────────────────────── */ html body { font-family: var(--font); color: var(--text); letter-spacing: 0; -webkit-font-smoothing: antialiased; } ::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); } * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } :root ::-webkit-scrollbar-track { background: transparent; } :root ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; } :root ::-webkit-scrollbar-thumb:hover { background: var(--muted); } :focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Part 2 · Invest bridge — maps the Tailwind utilities and portal classes already in the markup onto the tokens above. ═══════════════════════════════════════════════════════════════════════════ */ /* Palette: the admin's Trader Layout colours (Branding.applyColors sets --trader-* inline, which wins). */ :root { --trader-primary: #7c6cff; --trader-secondary: #4f8bff; --trader-accent: #22d3ee; --primary: var(--trader-primary); --primary-2: var(--trader-secondary); --cyan: var(--trader-accent); } /* ── Page & surfaces ─────────────────────────────────────────────────────── */ html:root, html:root > body, html:root > body:is(.bg-slate-50, .bg-gray-50, .bg-gray-100, .bg-white) { background: var(--bg); } :root .bg-white, :root .focus\:bg-white:focus, :root .hover\:bg-white:hover { background-color: var(--surface); } :root .bg-gray-50, :root .bg-slate-50 { background-color: var(--surface-2); } :root .bg-gray-50\/80, :root .bg-gray-50\/40 { background-color: color-mix(in srgb, var(--surface-2) 80%, transparent); } :root .bg-gray-100, :root .bg-slate-100 { background-color: var(--surface-3); } :root .hover\:bg-gray-50:hover, :root .hover\:bg-slate-50:hover { background-color: var(--surface-2); } :root .hover\:bg-gray-100:hover, :root .hover\:bg-slate-100:hover { background-color: var(--surface-3); } :root .border-gray-100, :root .border-gray-100\/80, :root .border-gray-200, :root .border-gray-300, :root .border-slate-200, :root .border-slate-300, :root .hover\:border-gray-200:hover { border-color: var(--border); } :root .hover\:border-gray-300:hover, :root .hover\:border-slate-300:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); } :root .divide-gray-50 > :not([hidden]) ~ :not([hidden]), :root .divide-gray-100 > :not([hidden]) ~ :not([hidden]), :root .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); } :root .shadow-sm, :root .shadow { box-shadow: var(--shadow); } :root .rounded-2xl, :root .rounded-3xl { border-radius: var(--radius); } :root .rounded-xl { border-radius: var(--radius-sm); } /* ── Text ────────────────────────────────────────────────────────────────── */ :root .text-gray-900, :root .text-gray-800, :root .text-slate-900, :root .text-slate-800, :root .hover\:text-gray-800:hover, :root .hover\:text-gray-900:hover, :root .hover\:text-slate-700:hover { color: var(--text); } :root .text-gray-700, :root .text-slate-700 { color: color-mix(in srgb, var(--text) 82%, var(--muted)); } :root .text-gray-600, :root .text-gray-500, :root .text-slate-600, :root .text-slate-500, :root .hover\:text-gray-600:hover { color: var(--muted); } :root .text-gray-400, :root .text-slate-400 { color: color-mix(in srgb, var(--muted) 85%, transparent); } :root .text-gray-300, :root .text-slate-300 { color: color-mix(in srgb, var(--muted) 60%, transparent); } :root input::placeholder, :root textarea::placeholder { color: var(--muted); opacity: .7; } /* Native dropdown lists (e.g. the language switcher): options must follow the theme too, or light text on the browser's white option list makes every language except the selected one invisible in dark mode. */ :root select option, :root select optgroup { background-color: var(--surface); color: var(--text); } /* ── Brand colour (blue / indigo utilities → palette) ───────────────────── */ :root .bg-blue-600, :root .bg-blue-500, :root .bg-indigo-600, :root .bg-indigo-500 { background-color: var(--primary); } :root .hover\:bg-blue-700:hover, :root .hover\:bg-indigo-700:hover { background-color: color-mix(in srgb, var(--primary) 88%, #000); } :root .bg-blue-50, :root .bg-indigo-50, :root .hover\:bg-blue-50:hover { background-color: color-mix(in srgb, var(--primary) 12%, transparent); } :root .bg-blue-100, :root .bg-indigo-100 { background-color: color-mix(in srgb, var(--primary) 18%, transparent); } :root .text-blue-500, :root .text-blue-600, :root .text-blue-700, :root .text-indigo-500, :root .text-indigo-600, :root .text-indigo-700, :root .hover\:text-blue-600:hover, :root .hover\:text-blue-700:hover, :root .hover\:text-indigo-700:hover, :root .text-\[var\(--trader-primary\)\] { color: var(--primary-2); } :root .border-blue-200, :root .border-indigo-200 { border-color: color-mix(in srgb, var(--primary) 30%, transparent); } :root .focus\:border-blue-400:focus, :root .focus\:border-blue-500:focus, :root .focus\:border-indigo-500:focus, :root .focus\:border-\[var\(--trader-primary\)\]:focus { border-color: var(--primary); } :root [class*="focus:ring-"]:focus { --tw-ring-color: var(--focus); } :root .from-blue-500, :root .from-indigo-500 { --tw-gradient-from: var(--primary) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } :root .to-indigo-600, :root .to-blue-600 { --tw-gradient-to: var(--primary-2) var(--tw-gradient-to-position); } /* Blue / indigo gradient banners and tiles → the brand gradient */ :root :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b):is(.from-blue-500, .from-blue-600, .from-indigo-500, .from-indigo-600) { background-image: var(--grad); box-shadow: var(--btn-glow); } /* ── Buy / sell (green / red utilities → palette) ───────────────────────── */ :root .text-emerald-500, :root .text-emerald-600, :root .text-emerald-700, :root .text-green-600, :root .text-green-700 { color: var(--buy); } :root .text-red-500, :root .text-red-600, :root .text-red-700, :root .hover\:text-red-500:hover, :root .hover\:text-red-600:hover { color: var(--sell); } :root .bg-emerald-50, :root .bg-green-50, :root .bg-emerald-100, :root .bg-green-100 { background-color: var(--buy-bg); } :root .bg-red-50, :root .bg-red-100, :root .hover\:bg-red-50:hover { background-color: var(--sell-bg); } :root .bg-emerald-500, :root .bg-green-500 { background-color: var(--buy); } :root .bg-red-500, :root .bg-red-600 { background-color: var(--sell); } :root .hover\:bg-red-600:hover { background-color: color-mix(in srgb, var(--sell) 88%, #000); } :root .border-emerald-200, :root .border-green-200 { border-color: color-mix(in srgb, var(--buy) 30%, transparent); } :root .border-red-200 { border-color: color-mix(in srgb, var(--sell) 30%, transparent); } :root .bg-amber-50 { background-color: var(--amber-bg); } :root .text-amber-500, :root .text-amber-600 { color: var(--amber); } /* ── Buttons & inputs ────────────────────────────────────────────────────── */ :root .btn-primary, :root .login-submit-btn { background: var(--grad); color: #fff !important; border: 0; box-shadow: var(--btn-glow); transition: filter var(--t), box-shadow var(--t); } :root .btn-primary:hover:not(:disabled), :root .login-submit-btn:hover:not(:disabled) { background: var(--grad); filter: brightness(1.1); transform: none; box-shadow: var(--btn-glow); } :root .btn-primary:active:not(:disabled), :root .login-submit-btn:active:not(:disabled) { filter: brightness(.95); transform: none; } :root .btn-primary:disabled { background: var(--surface-3); color: var(--muted) !important; box-shadow: none; } :root input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):focus, :root select:focus, :root textarea:focus { border-color: var(--primary); } :root input[type="checkbox"], :root input[type="radio"] { accent-color: var(--primary); } /* ── Header ──────────────────────────────────────────────────────────────── */ :root .admin-header { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; } :root #theme-toggle, :root #broker-connect-btn { border-radius: 9px; } /* ── Sidebar (trader / investor / admin): surface panel, gradient pill for the active link ── */ :root .trader-sidebar, :root .investor-sidebar, :root .admin-sidebar { background: var(--surface); border-inline-end: 1px solid var(--border); } :root .trader-accent, :root .investor-accent, :root .sidebar-accent { display: none; } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) :is(.text-slate-500, .text-slate-400) { color: var(--muted); } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .nav-link { color: var(--muted); font-weight: 600; border-radius: 11px; transition: color var(--t), background var(--t); } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .nav-link:hover { color: var(--text); background: var(--surface-2); } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .nav-icon-wrap { background: transparent; } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .nav-link.active-nav { background: var(--grad) !important; color: #fff !important; box-shadow: var(--btn-glow); } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .nav-link.active-nav::before { display: none; } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .nav-link.active-nav .nav-icon-wrap { background: transparent !important; } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) .text-white { color: var(--text); } :root :is(.trader-sidebar, .investor-sidebar, .admin-sidebar) :is(.active-nav .text-white, .bg-gradient-to-br .text-white) { color: #fff; } :root .admin-sidebar :is(.border-white\/10, .border-white\/\[0\.07\]) { border-color: var(--border); } :root .admin-sidebar .bg-gradient-to-br { background: var(--grad); box-shadow: var(--btn-glow); } :root #sidebar-collapse-btn { color: var(--muted); border-top-color: var(--border); } :root #sidebar-collapse-btn:hover { color: var(--text); background: var(--surface-2); } :root #sidebar.sidebar-collapsed .nav-link:hover::after { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-lg); } :root #sidebar-toggle { background: var(--surface-2); border-color: var(--border); color: var(--muted); } /* ── Account summary bar → the trading platform's stat strip ─────────────── */ :root .trader-footer, :root .investor-footer { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; } :root :is(.trader-footer-logo, .investor-footer-logo) { filter: none; } :root.dark :is(.trader-footer-logo, .investor-footer-logo) { filter: brightness(0) invert(1); } :root .footer-divider { background: var(--border); } :root .footer-stat { background: transparent; border: 0; border-radius: var(--radius-sm); padding: 5px 12px; } :root .footer-stat:hover { background: var(--surface-2); border-color: transparent; } :root .footer-stat-icon { width: 28px; height: 28px; border-radius: 9px; --c: var(--primary); color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); } :root .footer-stat-icon.balance { --c: var(--primary-2); } :root .footer-stat-icon.equity { --c: var(--cyan); background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); } :root .footer-stat-icon.upl.up { --c: var(--buy); background: var(--buy-bg); color: var(--buy); } :root .footer-stat-icon.upl.down { --c: var(--sell); background: var(--sell-bg); color: var(--sell); } :root .footer-stat-icon.upl.flat { --c: var(--muted); background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); } :root .footer-stat-icon.free-margin { --c: var(--buy); background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); } :root .footer-stat-icon.used-margin { --c: var(--amber); background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); } :root .footer-stat-icon.margin-level { --c: var(--primary); background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); } :root .footer-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); } :root[dir="rtl"] .footer-stat-label { text-transform: none; letter-spacing: 0; font-size: 11px; } :root .footer-stat-value { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } :root .footer-stat-value.upl-up { color: var(--buy); } :root .footer-stat-value.upl-down { color: var(--sell); } /* ── Cards ───────────────────────────────────────────────────────────────── */ :root .chart-card, :root .stat-card, :root .quick-action-card { border-color: var(--border); box-shadow: var(--shadow); } :root .stat-card:hover, :root .quick-action-card:hover, :root .chart-card:hover { transform: none; box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); } :root.dark #charts-section .chart-card { background: var(--surface); border-color: var(--border); } :root .welcome-banner { background: var(--grad); border-radius: var(--radius); box-shadow: var(--btn-glow); } /* Icon chips: tinted square with a coloured glyph (the trading platform's .ph-ic / .stat-ic) */ :root .stat-icon-area { width: 44px; height: 44px; border-radius: 11px; --c: var(--primary); background: color-mix(in srgb, var(--c) 15%, transparent); box-shadow: none; color: var(--c); } :root .stat-icon-area :is(svg, .text-white) { color: var(--c); } :root .stat-icon-area.blue { --c: var(--primary-2); } :root .stat-icon-area.emerald, :root .stat-icon-area.teal { --c: var(--buy); } :root .stat-icon-area.amber { --c: var(--amber); } :root .stat-icon-area.violet { --c: var(--primary); } :root .stat-icon-area.rose { --c: var(--sell); } :root .stat-icon-area:is(.blue, .emerald, .amber, .violet, .rose, .teal) { background: color-mix(in srgb, var(--c) 15%, transparent); box-shadow: none; } :root .detail-row { border-bottom-color: var(--border); } :root .perf-col-track { background: var(--surface-2); border: 1px solid var(--border); } :root .perf-col-track::before { background: var(--border); } :root .perf-month { color: var(--muted); } :root .perf-line.up, :root .perf-line.down { background: currentColor; } :root .perf-line.up, :root .perf-value.up { color: var(--buy); } :root .perf-line.down, :root .perf-value.down { color: var(--sell); } :root .perf-fill.up { background: linear-gradient(180deg, color-mix(in srgb, var(--buy) 42%, transparent), color-mix(in srgb, var(--buy) 5%, transparent)); } :root .perf-fill.down { background: linear-gradient(180deg, color-mix(in srgb, var(--sell) 5%, transparent), color-mix(in srgb, var(--sell) 42%, transparent)); } :root .sparkline-bar, :root .sparkline-bar-today { background: var(--grad); box-shadow: none; } /* ── Tables, badges, skeletons ───────────────────────────────────────────── */ :root thead th { color: var(--muted); } :root tbody tr:hover { background-color: var(--surface-2); } :root .badge-success { background: var(--buy-bg); color: var(--buy); } :root .badge-danger { background: var(--sell-bg); color: var(--sell); } :root .badge-warning { background: var(--amber-bg); color: var(--amber); } :root .badge-info { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-2); } :root .badge-neutral { background: var(--surface-3); color: var(--muted); } :root .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; } /* ── Mobile shell (trader/mobile, investor/mobile) ───────────────────────── */ :root .mobile-body, :root.dark body.mobile-body { background: var(--bg); } :root .mheader, :root.dark .mheader { background: var(--surface); border-bottom-color: var(--border); } :root .mheader-title h1, :root.dark .mheader-title h1 { color: var(--text); } :root .mheader-date { color: var(--muted); } :root .mheader-icon-btn, :root.dark .mheader-icon-btn { background: var(--surface-2); border-color: var(--border); color: var(--muted); } :root .mnav, :root.dark .mnav { background: var(--surface); border-top-color: var(--border); } :root .mnav-item { color: var(--muted); } :root .mnav-item.active, :root.dark .mnav-item.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } :root .mwt5-strip { background: var(--surface); border-bottom: 1px solid var(--border); } :root .mwt5-status { color: var(--muted); background: var(--surface-2); } :root .mwt5-stat { background: var(--surface-2); border-color: var(--border); } :root .mwt5-label { color: var(--muted); } :root .mwt5-value { color: var(--text); } :root .mwt5-value.upl-up { color: var(--buy); } :root .mwt5-value.upl-down { color: var(--sell); } :root .mwt5-upl-icon.up { background: var(--buy); } :root .mwt5-upl-icon.down { background: var(--sell); } /* ── Login / landing pages ───────────────────────────────────────────────── */ :root .login-input { background: var(--surface-2); border-color: var(--border); color: var(--text); } :root .login-input:focus { background: var(--surface-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); --tw-ring-color: transparent; } :root .auth-link { color: var(--primary-2); } :root.dark .auth-link { color: color-mix(in srgb, var(--primary-2) 55%, #fff) !important; } :root .landing-accent { background: var(--grad); animation: none; } /* ═══════════════════════════════════════════════════════════════════════════ Part 3 · Layout patterns — identical sizes to the trading platform's admin (sidebar 250px / 18px 14px, links 10px 12px r11, header 14px 24px with a 19px title, content 22px 24px 40px, cards r10 p18, KPI tiles 30px/800 + tinted circle). ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { :root :is(.admin-sidebar, .trader-sidebar, .investor-sidebar):not(.sidebar-collapsed) { width: 250px; } } :root :is(.admin-sidebar, .trader-sidebar, .investor-sidebar) > nav { padding: 18px 14px; } :root :is(.admin-sidebar, .trader-sidebar, .investor-sidebar) .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 4px; } :root :is(.admin-sidebar, .trader-sidebar, .investor-sidebar) .nav-link { padding: 10px 12px; gap: 11px; } :root :is(.admin-sidebar, .trader-sidebar, .investor-sidebar) .nav-link .text-sm { font-size: 14px; font-weight: 600; } :root :is(.admin-sidebar, .trader-sidebar, .investor-sidebar) p.uppercase { font-size: 11px; letter-spacing: .06em; padding-inline: 12px; color: var(--muted); } :root .admin-header { padding: 14px 24px; } :root .admin-header h2 { font-size: 19px; font-weight: 700; line-height: 1.3; } :root main.overflow-y-auto:is(.p-4, .p-5, .p-6) { padding: 22px 24px 40px; } :root .grid:is(.gap-3, .gap-4, .gap-5, .gap-6) { gap: 16px; } :root .rounded-2xl:is(.p-4, .p-5, .p-6), :root .rounded-xl.p-5 { padding: 18px; } :root .rounded-2xl :is(h3, h4).text-base, :root .rounded-2xl h3.text-lg { font-size: 16px; font-weight: 700; } /* KPI tiles */ :root .stat-card { position: relative; overflow: hidden; --c: var(--primary); } :root .stat-card::after { content: ''; position: absolute; inset-inline-end: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--c); opacity: .16; pointer-events: none; } :root .stat-card:has(.stat-icon-area.blue) { --c: var(--primary-2); } :root .stat-card:has(.stat-icon-area.emerald), :root .stat-card:has(.stat-icon-area.teal) { --c: var(--buy); } :root .stat-card:has(.stat-icon-area.amber) { --c: var(--amber); } :root .stat-card:has(.stat-icon-area.rose) { --c: var(--sell); } :root .stat-card .text-3xl { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } :root .stat-card p.text-sm { font-size: 12.5px; font-weight: 600; color: var(--muted); } :root .stat-card .rounded-full:is(.text-xs) { border-radius: 6px; font-size: 11.5px; font-weight: 700; } /* Hero / welcome banners → a regular card (the trading platform has no gradient heroes; colour is kept for buttons, the active menu item and accents). */ :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) { background: var(--surface) !important; color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow) !important; border-inline-start: 4px solid var(--primary); } :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) :is(.text-white, [class*="text-white\/"]) { color: var(--text); } :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) :is([class*="text-white\/7"], [class*="text-white\/8"], [class*="text-white\/6"]) { color: var(--muted); } /* Pale-on-gradient text (text-blue-100 / -200 …) would vanish on the card's light surface */ :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) :is([class*="text-blue-1"], [class*="text-blue-2"], [class*="text-indigo-1"], [class*="text-indigo-2"]) { color: var(--muted); } :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) [class*="border-white\/"] { border-color: var(--border); } :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) [class*="bg-white\/"] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } :root :is(.welcome-banner, main .bg-gradient-to-r.rounded-2xl) .bg-white { background: var(--primary); } :root .stat-card > * { position: relative; z-index: 1; } /* ── In-page tab menus (admin Settings) → the trading platform's menu items ── */ :root #settings-tabs > div { padding: 10px; gap: 4px; } :root #settings-tabs p.uppercase { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); padding: 12px 12px 6px; } :root .settings-tab { padding: 10px 12px; gap: 11px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--muted); border-inline-start: 0; } :root .settings-tab:hover { background: var(--surface-2); color: var(--text); } :root .settings-tab.bg-blue-50, :root.dark .settings-tab.bg-blue-50 { background: var(--grad) !important; color: #fff !important; border-inline-start: 0; padding-inline-start: 12px; box-shadow: var(--btn-glow); } :root .settings-tab > div:first-child { width: auto; height: auto; background: transparent !important; box-shadow: none; } :root .settings-tab > div:first-child svg { color: currentColor; } :root .settings-tab span { background: transparent; color: inherit; } /* Card headers with an icon chip → the trading platform's pane head (14px 18px, 36px tinted chip) */ :root .rounded-xl > .border-b:first-child, :root .rounded-2xl > .border-b:first-child { padding: 14px 18px; } :root .rounded-xl > .border-b:first-child .w-10.h-10, :root .rounded-2xl > .border-b:first-child .w-10.h-10 { width: 36px; height: 36px; border-radius: 11px; } :root .rounded-xl > .border-b:first-child h3, :root .rounded-2xl > .border-b:first-child h3 { font-size: 16px; font-weight: 700; } @media (min-width: 1024px) { :root #settings-tabs .settings-tab { width: 100%; } } /* ── List pages (logs, users, orders…) → the trading platform's Logs page ── */ :root main :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], input:not([type]), select, textarea):not(.login-input) { background-color: var(--surface-2); border-color: var(--border); border-radius: var(--radius-sm); box-shadow: none; color: var(--text); } :root main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); } :root main table thead tr { background: var(--surface); border-color: var(--border); } :root main table thead th { padding: 9px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } :root main table tbody td { padding: 9px 12px; font-size: 13px; } :root main table tbody tr { transition: background var(--t); } /* ── Settings page layout → the trading platform's: a segmented switch on top (like its Logs categories), full-width section cards below. Same tabs, same JS. ── */ :root main .max-w-5xl:has(#settings-tabs) { max-width: none; } :root main .flex:has(> #settings-tabs) { flex-direction: column; align-items: stretch; gap: 16px; } :root #settings-tabs { width: 100%; position: static; } :root #settings-tabs > div { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; box-shadow: none; width: auto; max-width: 100%; } :root #settings-tabs > div > div { display: contents; } :root #settings-tabs p.uppercase { display: none !important; } :root #settings-tabs .settings-tab, :root.dark #settings-tabs .settings-tab { width: auto; padding: 7px 13px; gap: 0; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); background: none; box-shadow: none; } :root #settings-tabs .settings-tab:hover { color: var(--text); background: none; } :root #settings-tabs .settings-tab.bg-blue-50, :root.dark #settings-tabs .settings-tab.bg-blue-50 { background: var(--grad) !important; color: #fff !important; box-shadow: none; } :root #settings-tabs .settings-tab > div:first-child { display: none; } :root main .flex:has(> #settings-tabs) > :not(#settings-tabs) { width: 100%; } :root main .flex:has(> #settings-tabs) > .max-w-2xl { max-width: none; } /* Account summary strip collapsed (no broker streaming): drop the space reserved for it — the shells reserve it with margin-top, which the app.css collapse rule (padding-top) missed. */ body:has(#wt5-footer-group.hidden) :is(.trader-shell, .investor-shell) { margin-top: 0; height: 100vh; } /* ── Profile & Account pages (trader + investor): real cards + the trading platform's form fields ── */ :root :is(.prf-card, .acc-card), :root.dark :is(.prf-card, .acc-card) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } :root .acc-card { padding: 22px; } /* Identity card: soft palette band behind the avatar */ :root .prf-card:has(.prf-avatar-wrap) { position: relative; overflow: hidden; padding-top: 56px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 24%, transparent), color-mix(in srgb, var(--primary-2) 16%, transparent) 55%, color-mix(in srgb, var(--cyan) 10%, transparent)) top / 100% 84px no-repeat, var(--surface); } :root .prf-avatar-wrap .prf-avatar { box-shadow: 0 0 0 4px var(--surface); background: var(--grad); color: #fff; } :root .prf-avatar-edit, :root.dark .prf-avatar-edit { background: var(--grad); border-color: var(--surface); color: #fff; } :root #prf-name { font-size: 19px; font-weight: 700; color: var(--text); } /* Form fields */ :root :is(.prf-label, .acc-label), :root.dark :is(.prf-label, .acc-label) { font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); margin-bottom: 6px; } :root :is(.prf-input, .prf-textarea, .acc-input, .acc-input-pw), :root.dark :is(.prf-input, .prf-textarea, .acc-input, .acc-input-pw) { padding: 11px 13px; font-size: 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); } :root :is(.prf-input, .prf-textarea, .acc-input, .acc-input-pw):focus, :root.dark :is(.prf-input, .prf-textarea, .acc-input, .acc-input-pw):focus { background: var(--surface-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); } :root .prf-hint { font-size: 12px; color: var(--muted); } :root .prf-err { color: var(--sell); } /* Language switch → the trading platform's segmented control */ :root #prf-lang-tabs { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; } :root .prf-lang-tab { border-radius: 8px; padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--muted); background: none; box-shadow: none; } :root .prf-lang-tab:hover { color: var(--text); } :root .prf-lang-tab.bg-white { background: var(--grad); color: #fff; box-shadow: none; } /* ── Logo: one image for both themes. Dark mode turns it white with a filter (as the trading platform's .logo-white does); light mode shows it as uploaded. Overrides the per-page rules and the admin sidebar's inline always-white filter. ── */ :root img:is([data-app-logo], [data-app-logo-override]) { filter: none !important; } :root.dark img:is([data-app-logo], [data-app-logo-override]) { filter: brightness(0) invert(1) !important; } /* ── Dark mode: light-only leftovers → theme surfaces, so nothing stays white / dark-on-dark ── */ /* Pale tints with no mapping above (icons, hover rows, admin tiles): a soft tint of the same hue. */ :root.dark :is(.bg-violet-50, .group:hover .group-hover\:bg-violet-100) { background-color: rgba(139, 92, 246, .14); } :root.dark :is(.bg-pink-50, .bg-rose-50) { background-color: rgba(236, 72, 153, .14); } :root.dark :is(.hover\:bg-emerald-50:hover, .group:hover .group-hover\:bg-emerald-100) { background-color: var(--buy-bg); } :root.dark :is(.hover\:bg-amber-50:hover, .bg-yellow-50) { background-color: var(--amber-bg); } :root.dark :is(.hover\:bg-indigo-50:hover, .bg-blue-50\/60, .group:hover .group-hover\:bg-blue-100) { background-color: color-mix(in srgb, var(--primary) 12%, transparent); } :root.dark :is(.bg-slate-50\/40, .hover\:bg-slate-50\/60:hover, .hover\:bg-slate-50\/70:hover, .group:hover .group-hover\:bg-slate-100) { background-color: var(--surface-2); } :root.dark .bg-gray-300 { background-color: var(--surface-3); } :root.dark :is(.border-gray-50, .border-red-100, .border-indigo-100, .border-blue-100, .border-yellow-200) { border-color: var(--border); } /* Dark text utilities that would vanish on a dark surface */ :root.dark :is(.text-blue-900, .text-blue-800) { color: var(--primary-2); } :root.dark :is(.text-red-800) { color: var(--sell); } :root.dark :is(.text-green-800) { color: var(--buy); } :root.dark :is(.text-amber-700, .text-yellow-800) { color: var(--amber); } :root.dark :is(.hover\:text-gray-700:hover, .group:hover .group-hover\:text-slate-700) { color: var(--text); } /* Toasts float over the page: a solid surface under the status tint, readable text. */ :root.dark #toast-container > div { background: linear-gradient(color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 12%, transparent)), var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-lg); } :root.dark #toast-container > div.bg-green-50 { background: linear-gradient(var(--buy-bg), var(--buy-bg)), var(--surface); border-color: color-mix(in srgb, var(--buy) 35%, transparent); } :root.dark #toast-container > div.bg-red-50 { background: linear-gradient(var(--sell-bg), var(--sell-bg)), var(--surface); border-color: color-mix(in srgb, var(--sell) 35%, transparent); } :root.dark #toast-container > div.bg-yellow-50 { background: linear-gradient(var(--amber-bg), var(--amber-bg)), var(--surface); border-color: color-mix(in srgb, var(--amber) 35%, transparent); } /* jquery-confirm dialogs are always opened with theme:'light' → follow the site theme instead. */ :root.dark .jconfirm.jconfirm-light .jconfirm-box { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } :root.dark .jconfirm.jconfirm-light .jconfirm-title-c { color: var(--text); } :root.dark .jconfirm.jconfirm-light .jconfirm-content { color: var(--muted); } :root.dark .jconfirm .jconfirm-buttons button.btn-default { background: var(--surface-2); color: var(--text); border-color: var(--border); } :root.dark .jconfirm .jconfirm-bg { background-color: rgba(0, 0, 0, .6); } /* Mobile trader / investor pages: light-only defaults in their inline CSS with no dark rule. :where() keeps these at the page rule's own weight, so .active / [data-tab] / [data-origin] variants still win (brand.css loads after the page's