/* Elite Quant M·A — web client. * * Three things this stylesheet is doing that are not obvious: * * 1. The experience tier is a `data-experience` attribute on , and * density is expressed as CSS variables underneath it. Switching tier is * one attribute change, not a re-render, and no component needs to know * which tier it is in. * 2. Refusals are styled as first-class content, not as errors. The scanner * showing "no opportunity" is the product working; it should not look like * something broke. * 3. Money is right-aligned and tabular everywhere. Columns of numbers that * do not line up are how people misread their own balance. */ :root { color-scheme: dark; --bg: #0b0e14; --surface: #121722; --surface-2: #1a2030; --line: #232b3d; --text: #e6eaf2; --muted: #8d97ab; --accent: #6a7dff; --up: #37b26b; --down: #e0526b; --warn: #d9a02b; --radius: 10px; /* The chart reads these off the canvas rather than hard-coding colours, so an experience tier restyles it without chart.js knowing tiers exist. --ink is the strongest foreground; the watermark uses it at low alpha. */ --ink: #e6eaf2; --chart-grid: rgba(141, 151, 171, .16); /* density, overridden per experience */ --pad: 16px; --row-pad: 10px; --font-size: 15px; --table-size: 14px; } body[data-experience="institutional"] { --accent: #94a3c4; --pad: 12px; --row-pad: 6px; --font-size: 14px; --table-size: 12.5px; } body[data-experience="premium_warm"] { --accent: #6a7dff; } body[data-experience="sanctuary_full"] { --accent: #2fb3a3; --pad: 22px; --row-pad: 15px; --font-size: 16px; --table-size: 15px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--font-size)/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* The `hidden` attribute is a browser default of `display: none`, and a browser default loses to any class that sets `display` itself. `.topbar` sets `display: flex`, so `