/* ══ VOLURR AGI — DASHBOARD (owner's 2026-08-10 design handoff) ══════════════════════════════════ The design ships its palette in `:root`, and its variable NAMES collide head-on with the app's own globals — --bg, --card, --text, --line, --accent, --pos, --neg, --muted all exist already and are read by every other section. Dropping the design's :root in would have repainted the whole platform. So the tokens live on the dashboard's own root instead: custom properties inherit, so #v-dash and everything inside it sees the design palette while the rest of the app keeps its own. Light theme rides the same [data-theme] attribute the app already toggles. Numerals are JetBrains Mono and UI text is Archivo, exactly as the handoff specifies. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ #v-dash.agid{ --hair:255,236,216; --ink:244,237,229; --d-bg:#02040B; --d-bg2:#02040B; --d-card:#02040B; --d-card2:#070A12; --d-panel:#0c0a09; --d-glow:rgba(226,59,59,.07); --d-line:rgba(var(--hair),.10); --d-line2:rgba(var(--hair),.18); --d-text:#f4ede5; --d-muted:rgba(var(--ink),.58); --d-muted2:rgba(var(--ink),.49); --d-high:#ff4a3d; --d-med:#ff9d2e; --d-low:#ffd24a; --d-mon:#6aa7ff; --d-pos:#4fd18b; --d-neg:#ff6a5c; --d-accent:#e23b3b; --d-onAccent:#1a0f0b; --d-r:10px; background:var(--d-bg); background-image:radial-gradient(1200px 700px at 78% -10%,var(--d-glow),transparent 60%); color:var(--d-text); font-family:Archivo,system-ui,sans-serif; -webkit-font-smoothing:antialiased; } /* [2026-08-11 owner: «مود ابيض من دشبورد نفس اقسام اخرا استعملا حتا لا فرق»] THE LIGHT THEME IS THE APP'S. The dark ground stays the owner's own #02040B — that request is untouched — but in light the dashboard had been carrying a warm cream family of its own (#f4f1ec ground, #f6f3f0 panel, a 26,19,14 brown ink), so walking from Market WHY into the Dashboard changed the colour of the page, the column, the header and the strip. Every light value below is now lifted from base.css's own light theme (:27 --bg #eef0f4 / --bg2 #f6f7fa / --card #ffffff / --card2 #f3f5f8 / --line #e4e7ee / --muted #6b7185 / --txt #14161c) so the two sections are one surface with no seam. */ html[data-theme="light"] #v-dash.agid{ --hair:60,66,84; --ink:20,22,28; --d-bg:#eef0f4; --d-bg2:#f6f7fa; --d-card:#ffffff; --d-card2:#f3f5f8; --d-line:#e4e7ee; --d-line2:#d7dbe4; --d-panel:rgba(248,250,252,.85); --d-glow:rgba(214,47,47,.07); --d-text:#14161c; --d-muted:#565c6e; --d-muted2:#686e82; --d-high:#c8291a; --d-med:#9e5a0d; --d-low:#7d6100; --d-mon:#2a63c9; --d-pos:#0e7448; --d-neg:#c4372a; --d-accent:#d62f2f; --d-onAccent:#ffffff; } /* numerals: every price, time, countdown and percentage — never the UI text */ #v-dash.agid .mono, #v-dash.agid [data-mono]{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} #v-dash.agid .up{color:var(--d-pos)} #v-dash.agid .dn{color:var(--d-neg)} /* ── shell + grid ───────────────────────────────────────────────────────────────────────────── */ #v-dash.agid .agid-main{max-width:1660px;margin:0 auto;padding:0 18px 26px} #v-dash.agid .agid-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} #v-dash.agid .agid-grid > .wide{grid-column:1 / -1} #v-dash.agid .trio{display:grid;grid-template-columns:1.25fr .9fr 1fr;gap:14px} @media (max-width:1180px){ #v-dash.agid .trio{grid-template-columns:1fr} } @media (max-width:1080px){ #v-dash.agid .agid-grid{grid-template-columns:1fr} } /* ── card + header ──────────────────────────────────────────────────────────────────────────── */ /* [ULTRA audit, F1] the first-generation card block that used to live here is DELETED — .agid-card, .cbody and .ch .act have zero references in the shipped JS or HTML, and .ch / .ch .dot / .ch .sp are re-declared live further down this file. It was not merely dead: its `.ch .dot` carried `animation:agidPulse`, which SURVIVED the live rule below (same specificity, and nothing there cancels an animation) — and an animation-origin declaration outranks a normal one, so the design's steady `box-shadow:0 0 9px var(--accent)` never painted on any of the ten card dots. The keyframes also hard-coded the DARK accent, so the ripple ran off-hue in light mode. */ /* ── the honest dash: a value with no source is never invented ──────────────────────────────── */ #v-dash.agid .nosrc{color:var(--d-muted2);font-family:'JetBrains Mono',ui-monospace,monospace} /* ── small primitives shared by the cards ───────────────────────────────────────────────────── */ #v-dash.agid .klabel{font:600 9px/1.2 Archivo;letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted2)} #v-dash.agid .kval{font:700 13px/1.2 'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} #v-dash.agid .bar{height:3px;border-radius:3px;background:rgba(var(--hair),.10);overflow:hidden} #v-dash.agid .bar > i{display:block;height:100%;background:var(--d-accent);border-radius:3px} #v-dash.agid .chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--d-line); border-radius:6px;padding:2px 7px;font:700 9.5px/1.4 'JetBrains Mono',ui-monospace,monospace} /* ── TICKER — scrolling real quotes from /api/assets, clock ticking Date.now() ─────────────── */ /* [ULTRA audit, F4] the first-generation ticker port (.agid-ticker/.agid-tq/.agid-tk*/.agid-clock) is DELETED — zero references in the shipped JS or HTML; the live strip is the design's own #ticker/.tk/.tclock further down this file. */ /* ── SIX-TILE STRIP — the design's #ohlc row, every value sourced or honestly dashed ────────── */ #v-dash.agid .agid-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--d-line); border:1px solid var(--d-line);border-radius:var(--d-r);overflow:hidden;margin-bottom:12px} @media (max-width:1180px){ #v-dash.agid .agid-strip{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ #v-dash.agid .agid-strip{grid-template-columns:repeat(2,1fr)} } #v-dash.agid .agid-tile{background:var(--d-card);padding:11px 14px;min-width:0} #v-dash.agid .agid-tile:hover{background:var(--d-card2)} #v-dash.agid .agid-tile .tl{font:700 8.5px/1 Archivo;letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted2);margin-bottom:7px} #v-dash.agid .agid-tile .tv{font:800 15px/1.2 Archivo;letter-spacing:.01em} #v-dash.agid .agid-tile .tv.mono{font-family:'JetBrains Mono',monospace} #v-dash.agid .agid-tile .ts{font:500 9.5px/1.5 Archivo;color:var(--d-muted);margin-top:5px} #v-dash.agid .agid-needle{position:relative;height:4px;border-radius:4px;margin-top:8px; background:linear-gradient(90deg,var(--d-neg),rgba(var(--hair),.2),var(--d-pos))} #v-dash.agid .agid-needle i{position:absolute;top:-3px;width:2px;height:10px;background:var(--d-text);border-radius:2px} #v-dash.agid .agid-segs{display:flex;gap:3px;margin-top:8px} #v-dash.agid .agid-segs i{flex:1;height:4px;border-radius:3px;background:rgba(var(--hair),.12)} #v-dash.agid .agid-segs i.on{background:var(--d-accent)} #v-dash.agid .agid-dots{display:flex;gap:5px;margin-top:8px} #v-dash.agid .agid-dots i{width:7px;height:7px;border-radius:50%;background:rgba(var(--hair),.14)} #v-dash.agid .agid-dots i.u{background:var(--d-pos)} #v-dash.agid .agid-dots i.d{background:var(--d-neg)} #v-dash.agid .agid-vbars{display:flex;align-items:flex-end;gap:3px;height:16px;margin-top:6px} #v-dash.agid .agid-vbars i{flex:1;background:rgba(var(--hair),.16);border-radius:2px 2px 0 0} #v-dash.agid .agid-vbars i.hot{background:var(--d-med)} #v-dash.agid .agid-ticks{display:flex;gap:3px;margin-top:8px} #v-dash.agid .agid-ticks i{width:14px;height:5px;border-radius:2px;background:rgba(var(--hair),.12)} #v-dash.agid .agid-ticks i.on{background:var(--d-high)} #v-dash.agid .agid-cta{display:flex;flex-direction:column;justify-content:center;cursor:pointer; background:linear-gradient(135deg,rgba(226,59,59,.12),var(--d-card))} #v-dash.agid .agid-cta .tv{color:var(--d-accent);font-size:12.5px} #v-dash.agid .agid-cta:hover .tv{text-decoration:underline} #v-dash.agid .agid-foot{grid-column:1/-1;background:var(--d-card);padding:5px 14px; font:500 9px/1.4 Archivo;color:var(--d-muted2);border-top:1px solid var(--d-line)} /* ── THE ATOM — the design's 3D core, built natively: SVG orbits + SMIL electrons + a dotted sphere core. No three.js: the CSP allows no CDN and the visual needs no library. The wordmark is SVG , so the font-load race that left the canvas logo permanently wrong in the prototype (rasterized once in system-ui, never re-rendered) cannot exist here - SVG text re-renders itself when Archivo arrives. ─────────────────────────────────────────────────── */ #v-dash.agid .agid-atom{position:relative;display:grid;place-items:center;padding:6px 0 2px} #v-dash.agid .agid-atom svg{width:min(200px,60vw);height:auto;display:block} #v-dash.agid .agid-atom .orb{transform-origin:130px 120px;animation:agidOrb 14s linear infinite} #v-dash.agid .agid-atom .orb.o2{animation-duration:19s;animation-direction:reverse} #v-dash.agid .agid-atom .orb.o3{animation-duration:24s} @keyframes agidOrb{from{transform:rotate(0)}to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ #v-dash.agid .agid-atom .orb{animation:none} } /* ── GLOBE — canvas over the flat map card; reduced-motion keeps the flat map (honest a11y) ── */ #v-dash.agid .agid-globe{display:block;width:100%;height:min(340px,52vw);cursor:grab;border-radius:8px; background:radial-gradient(600px 300px at 50% 10%,rgba(226,59,59,.05),transparent 70%)} #v-dash.agid .agid-globe:active{cursor:grabbing} #v-dash.agid .gmap.has-globe .worldimg,#v-dash.agid .gmap.has-globe .node,#v-dash.agid .gmap.has-globe picture{display:none} /* ── PRECEDENCE over the legacy dashboard theme (measured 2026-08-11): dashboard.css paints the page via `body[data-view="dash"] #v-dash` (0,2,1) and `html:not([data-theme=light]) #v-dash` (0,2,1) - both outrank #v-dash.agid (0,1,1), so the design's canvas never showed. Same prefixes + the skin class = (0,2,2) / (0,3,2); the design background wins WITHOUT !important, and only while the .agid skin is on. ─────────────────────────────────────────────────────── */ body[data-view="dash"] #views>#v-dash.agid.on, body[data-view="dash"] #v-dash.agid, html:not([data-theme="light"]) #v-dash.agid{ background:var(--d-bg); background-image:radial-gradient(1200px 700px at 78% -10%,var(--d-glow),transparent 60%); } /* In LIGHT the dashboard paints no canvas at all — it goes transparent so the app's own body background (base.css:41: two soft radials over --bg #eef0f4) is what the customer sees, exactly as in every other section. dashboard.css still paints the prototype's #f6f8fb on the light body, the active view and #v-dash (three rules, 0,2,0 / 0,3,1); the chains below outrank each of them without !important and only while the .agid skin is on. */ html[data-theme="light"] body[data-view="dash"] #views>#v-dash.agid.on, html[data-theme="light"] body[data-view="dash"] #v-dash.agid, html[data-theme="light"] #v-dash.agid{ background:transparent; background-image:none; } /* NOT :has(#v-dash.agid) — .agid is added by dashboard.js:968 at render time, so a :has() gate would let the prototype's #f6f8fb flash on the first paint of the view. data-view is set by the shell before the view renders, which is the moment the ground must already be right. */ html[data-theme="light"] body[data-view="dash"]{ background: radial-gradient(1100px 500px at 80% -5%, rgba(214,47,47,.07), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(225,229,238,.5), transparent 55%), var(--bg); } html[data-theme="light"] body[data-view="dash"] #views>#v-dash.agid.on{background:transparent} /* ══ THE DESIGN'S OWN TOKEN NAMES, scoped + outranking the legacy theme (same chains as the canvas fix): every ported rule below says var(--card)/var(--line)/... and must read the DESIGN values inside the dashboard - while dashboard.css's own #v-dash-scoped --card/--line keep ruling the moment .agid is absent. Nothing here touches :root. ═══════════════════════════ */ body[data-view="dash"] #views>#v-dash.agid.on, body[data-view="dash"] #v-dash.agid, html:not([data-theme="light"]) #v-dash.agid, #v-dash.agid{ --hair:255,236,216; --tint:255,255,255; --ink:244,237,229; /* [2026-08-11 owner: «شوف بطاقات انت نسيته حتاكامل دمج»] the merge now reaches the SUB-surfaces. The first pass merged the 12 outer cards and stopped there — but the six-tile strip cells, the dirbox, the stat grids and every inset control still carried the old lighter fills (#141110 / #100e0d), so they floated as tiles inside merged cards. The token FAMILY is the ground now: hairlines and borders carry all separation; --card2 keeps one step of lift so hover still answers. Dark theme only — light keeps its own family. */ --bg:#02040B; --bg2:#02040B; --card:#02040B; --card2:#070A12; --panel:#02040B; --glow:rgba(226,59,59,.08); --line:rgba(var(--hair),.10); --line2:rgba(var(--hair),.18); /* [2026-08-11] measured, not chosen: the design's faintest tier (.32 alpha) flattens to #4F4F51 on the #02040B ground — 2.51:1, and it carries 162 of the dashboard's micro-labels at 7-9px. The alpha that reaches WCAG AA on this ground is .49 (4.55:1); --muted moves .52→.58 (5.5:1) so the two tiers stay visibly ordered instead of collapsing into one. Hue and structure are untouched. */ --text:#f4ede5; --muted:rgba(var(--ink),.58); --muted2:rgba(var(--ink),.49); --high:#ff4a3d; --med:#ff9d2e; --low:#ffd24a; --mon:#6aa7ff; /* [2026-08-11 owner: «لون احمر او شعار فلور»] THE ACCENT IS THE BRAND'S RED, not the design bundle's orange. #e23b3b is what this platform already calls --crimson / --shield-2 / --accent everywhere else (tokens.css:48, base.css:20) — the colour of the shield in the logo — while the handoff shipped #e23b3b, an orange that belonged to the prototype and to nothing else here. The DIRECTION colours are deliberately left alone: --neg stays the design's coral #ff6a5c so «down» and «brand» remain two different reds, which is the COLOR LAW's whole point. */ --pos:#4fd18b; --neg:#ff6a5c; --accent:#e23b3b; --onAccent:#ffffff; --lvl-high:#ff4a3d; --lvl-med:#ff9d2e; --lvl-low:#ffd24a; --lvl-mon:#6aa7ff; --r:10px; color:var(--text); } html[data-theme="light"] body[data-view="dash"] #views>#v-dash.agid.on, html[data-theme="light"] body[data-view="dash"] #v-dash.agid, html[data-theme="light"] #v-dash.agid{ --hair:60,66,84; --tint:0,0,0; --ink:20,22,28; /* the light ground is the APP's (base.css:27), not a dashboard invention — so a customer moving between sections sees no change of furniture. Cards stay white and carry the app's hairline. */ --bg:#eef0f4; --bg2:#f6f7fa; --card:#ffffff; --card2:#f3f5f8; --line:#e4e7ee; --line2:#d7dbe4; --panel:#eef0f4; --glow:rgba(214,47,47,.07); /* [2026-08-11] The INK tiers are solved, not chosen. A sweep of all 589 visible text nodes in the light dashboard measured every foreground against the surface it actually lands on; 240 of them were under WCAG AA. This type is 7–11.5px, so AA is 4.5:1 with no large-text exemption, and the grey that survives 4.5:1 on near-white is about #6b7185 — there is no room for a SECOND, lighter quiet tier. So the hierarchy moves one step down as a pair: --muted is the readable secondary and --muted2 sits where the app's own --muted sits (base.css:29 #6b7185, ±3 units for the chip surface). Every colour below clears 4.5:1 on its worst measured background; the brand --accent #d62f2f is the app's own and is NOT moved. */ --text:#14161c; --muted:#565c6e; --muted2:#686e82; --high:#c8291a; --med:#9e5a0d; --low:#7d6100; --mon:#2a63c9; --pos:#0e7448; --neg:#c4372a; --accent:#d62f2f; --onAccent:#ffffff; --lvl-high:#c8291a; --lvl-med:#9e5a0d; --lvl-low:#7d6100; --lvl-mon:#2a63c9; } /* ══ THE DESIGN'S COMPONENT RULES, ported 1:1 (371 selectors, each scoped to #v-dash.agid) ═══ */ #v-dash.agid .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} #v-dash.agid .up{color:var(--pos)} #v-dash.agid .dn{color:var(--neg)} #v-dash.agid .rspace{flex:1} #v-dash.agid #ticker{display:flex;align-items:stretch;gap:0;height:56px;padding:0;overflow:hidden; border-bottom:1px solid var(--line);background:var(--panel)} /* [2026-08-11 owner: «شريط اسعر من اعلاء ليش مباشر لا تشغل»] THE TAPE RUNS. It was a static overflow-x strip: on a 1536 screen eight instruments simply did not fit, so the last two lived off the right edge and nothing ever brought them into view — a ticker that does not tick. It is a real marquee now: the row is emitted TWICE and translated by exactly -50%, so the seam lands on an identical copy and the loop is invisible. Duration is set from the measured content width, so the speed is constant whatever the instrument count. It transforms one composited layer — no layout, no paint per frame — pauses on hover so a price can be read, and the browser stops the animation on its own when the tab is not rendering. */ #v-dash.agid #quotes{display:flex;align-items:stretch;flex:1;min-width:0;overflow:hidden} #v-dash.agid .tkdup{display:flex;align-items:stretch} #v-dash.agid .tkrun{display:flex;align-items:stretch;flex:none;will-change:transform; animation:agidTape var(--tkdur,60s) linear infinite} #v-dash.agid #quotes:hover .tkrun{animation-play-state:paused} @keyframes agidTape{from{transform:translateX(0)}to{transform:translateX(-50%)}} html[dir="rtl"] #v-dash.agid .tkrun{animation-name:agidTapeR} @keyframes agidTapeR{from{transform:translateX(0)}to{transform:translateX(50%)}} @media (prefers-reduced-motion:reduce){ #v-dash.agid .tkrun{animation:none} #v-dash.agid .tkdup{display:none} /* the seam copy exists only for the moving loop — a stopped strip must not list every instrument twice */ #v-dash.agid #quotes{overflow-x:auto;scrollbar-width:none} #v-dash.agid #quotes::-webkit-scrollbar{display:none} } #v-dash.agid .tk{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--line); white-space:nowrap;flex:none;transition:background .18s} #v-dash.agid .tk:hover{background:rgba(var(--tint),.035)} /* [2026-08-11 owner, light-mode side-by-side: «نفس صوره ثاني الوان»] the chip used to carry its colours INLINE — text at the full hue over a 12% fill — and those hues were chosen against the dark card. On the light theme's warm off-white the same gold (#e0a72c on #ece7e0) falls to about 1.9:1: a chip you can see but not read. The hue is now the only thing the JS emits, as --tk, and each theme decides its own treatment: full hue on dark, the hue pulled toward the ink with a firmer fill and border on light — one source of colour, two legible results. */ #v-dash.agid .tsym{width:26px;height:26px;border-radius:7px;flex:none;text-decoration:none; display:grid;place-items:center;border:1px solid;font:800 9.5px/1 Archivo;letter-spacing:.02em; color:var(--tk,var(--accent)); border-color:color-mix(in srgb,var(--tk,var(--accent)) 20%,transparent); background:color-mix(in srgb,var(--tk,var(--accent)) 12%,transparent)} html[data-theme="light"] #v-dash.agid .tsym{ /* 55% hue measured 3.88:1 against its own fill — under the 4.5 minimum for 9.5px type. 40% */ color:color-mix(in srgb,var(--tk,var(--accent)) 40%,#1a130e); border-color:color-mix(in srgb,var(--tk,var(--accent)) 45%,transparent); background:color-mix(in srgb,var(--tk,var(--accent)) 22%,transparent)} /* the design's one warm word in the header */ body[data-view="dash"] .hdr-title .vhd-name{font-style:normal;color:var(--d-accent,#e23b3b)} #v-dash.agid .tkm{display:flex;flex-direction:column;gap:5px} #v-dash.agid .tk b{font:700 9px/1 Archivo;letter-spacing:.15em;color:var(--muted)} #v-dash.agid .tk em{font:700 9.5px/1 'JetBrains Mono',monospace;font-style:normal;letter-spacing:.02em} #v-dash.agid .tkv{font:700 15px/1 'JetBrains Mono',monospace;font-style:normal;font-variant-numeric:tabular-nums; letter-spacing:-.01em;color:var(--text)} #v-dash.agid #top{display:flex;align-items:center;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap} #v-dash.agid #top h1{margin:0;font:700 22px/1.1 Archivo;letter-spacing:-.015em} #v-dash.agid #top h1 em{font-style:normal;color:var(--accent)} #v-dash.agid #top p{margin:6px 0 0;font:400 12px/1 Archivo;color:var(--muted)} #v-dash.agid .pill{display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:100px; border:1px solid var(--line2);font:700 9.5px/1 Archivo;letter-spacing:.13em;color:var(--muted);white-space:nowrap} #v-dash.agid .pill s{width:6px;height:6px;border-radius:50%;background:var(--pos);text-decoration:none;box-shadow:0 0 8px var(--pos);animation:pulse 1.8s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} #v-dash.agid .ibtn{position:relative;width:36px;height:36px;border-radius:9px;background:var(--bg2); border:1px solid var(--line);color:var(--muted);cursor:pointer;display:grid;place-items:center; font:600 11px/1 'JetBrains Mono',monospace} #v-dash.agid .ibtn:hover{color:var(--text);border-color:var(--line2)} #v-dash.agid .ibtn u{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--high);color:var(--onAccent);font:700 9px/17px Archivo;text-decoration:none;text-align:center} /* Market overview and intelligence map are peers. Equal tracks keep their outer edges, headers and content frames balanced in both LTR and RTL; the former 1:1.05 split visibly swapped the larger card when direction changed. */ #v-dash.agid #grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 0 26px;width:100%;min-width:0;align-items:stretch} #v-dash.agid .wide{grid-column:1/-1} /* [2026-08-11 owner: «شوف بطاقات حتا دمج صفحه»] THE CARDS MERGE WITH THE PAGE. They were a lighter fill (#141110) floating on the ground; now they share the frame's own #02040B and are defined by their HAIRLINE instead — the border does the work the fill used to. This is the institutional reading of a card: an outline on one continuous surface, not a raised tile. The hairline is raised a step because it is now carrying the whole separation on its own. */ #v-dash.agid .card{background:var(--bg);border:1px solid rgba(255,236,216,.13); border-radius:var(--r);overflow:hidden;min-width:0;display:flex;flex-direction:column} #v-dash.agid .mo{flex:1} #v-dash.agid .ch{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line)} #v-dash.agid .ch h2{margin:0;font:700 10.5px/1 Archivo;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap} #v-dash.agid .ch .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent)} #v-dash.agid .ch .sp{flex:1} #v-dash.agid .ch a, #v-dash.agid .ch .lnk{font:700 9.5px/1 Archivo;letter-spacing:.13em;color:var(--med);cursor:pointer;white-space:nowrap} #v-dash.agid .sel{height:28px;padding:0 10px;border-radius:6px;background:var(--bg2);border:1px solid var(--line2); color:var(--text);font:600 10px/1 Archivo;letter-spacing:.1em;text-transform:uppercase;cursor:pointer} #v-dash.agid .exp{width:28px;height:28px;border-radius:6px;background:var(--bg2);border:1px solid var(--line); color:var(--muted);cursor:pointer;font-size:11px} #v-dash.agid .exp:hover{color:var(--text)} #v-dash.agid .foot{padding:9px 15px;border-top:1px solid var(--line);font:500 9.5px/1.4 'JetBrains Mono',monospace;color:var(--muted2)} #v-dash.agid #ohlc{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)} @media (max-width:1180px){ #v-dash.agid #ohlc{grid-template-columns:repeat(3,1fr)} } @media (max-width:720px){ #v-dash.agid #ohlc{grid-template-columns:repeat(2,1fr)} } #v-dash.agid #ohlc>div{background:var(--card);padding:12px 15px 13px;display:flex;flex-direction:column;gap:8px;min-width:0} #v-dash.agid #ohlc u{text-decoration:none;font:700 8.5px/1 Archivo;letter-spacing:.18em;color:var(--muted2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} #v-dash.agid #ohlc b{font:700 15px/1 'JetBrains Mono',monospace;white-space:nowrap} #v-dash.agid #ohlc b .unit{font:700 10px/1 Archivo;letter-spacing:.1em;color:var(--muted)} #v-dash.agid #ohlc em{font:700 9px/1 Archivo;letter-spacing:.1em;font-style:normal;color:var(--muted); display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden} #v-dash.agid #ohlc .cta{justify-content:center;align-items:flex-start;background:linear-gradient(120deg,rgba(226,59,59,.16),rgba(226,59,59,.04));cursor:pointer} #v-dash.agid #ohlc .cta b{font:700 11px/1.35 Archivo;letter-spacing:.13em;color:var(--accent);white-space:normal} #v-dash.agid #ohlc .cta u{overflow:visible;text-overflow:clip} #v-dash.agid #ohlc .cta:hover{background:linear-gradient(120deg,rgba(226,59,59,.26),rgba(226,59,59,.06))} #v-dash.agid .bipolar{position:relative;height:4px;border-radius:4px;margin-top:1px; background:linear-gradient(90deg,rgba(255,106,92,.55),rgba(var(--hair),.14) 50%,rgba(79,209,139,.55))} #v-dash.agid .bipolar i{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(var(--hair),.28)} /* the marker was hard-coded to the POSITIVE token, so a reading of -80 sat on the red end of the track painted green — the position said one thing and the colour the opposite. It carries the sign of its own reading now (COLOR LAW: green/red = direction only). */ #v-dash.agid .bipolar s{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:var(--muted);box-shadow:0 0 10px var(--muted);text-decoration:none} #v-dash.agid .bipolar s.up{background:var(--pos);box-shadow:0 0 10px var(--pos)} #v-dash.agid .bipolar s.dn{background:var(--neg);box-shadow:0 0 10px var(--neg)} #v-dash.agid .segs{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;height:5px;margin-top:1px} #v-dash.agid .segs i{border-radius:1px;background:rgba(var(--hair),.13)} #v-dash.agid .segs i.on{background:var(--pos)} #v-dash.agid .segs i.on:nth-child(-n+3){background:color-mix(in oklab,var(--pos) 70%,var(--med))} #v-dash.agid .breadth{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:5px;margin-top:1px} #v-dash.agid .breadth i{border-radius:1px} #v-dash.agid .breadth i.up{background:var(--pos)} #v-dash.agid .breadth i.dn{background:var(--neg);opacity:.75} #v-dash.agid .vbars{display:flex;align-items:flex-end;gap:3px;height:20px} #v-dash.agid .vbars i{flex:1;background:rgba(var(--hair),.16);border-radius:1px;min-height:2px} #v-dash.agid .vbars i.on{background:var(--med);box-shadow:0 0 9px -2px var(--med)} #v-dash.agid .impact{display:flex;align-items:center;gap:4px;height:20px} #v-dash.agid .impact s{width:5px;height:12px;border-radius:1px;background:var(--med);text-decoration:none} #v-dash.agid .impact s:nth-child(2){opacity:.7} #v-dash.agid .impact s:nth-child(3){opacity:.4} #v-dash.agid .impact span{margin-left:5px;font:700 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--med)} #v-dash.agid .trio{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(318px,.9fr) minmax(0,1fr);gap:16px} #v-dash.agid .trio>.card{display:flex;flex-direction:column} #v-dash.agid .xh{gap:9px} #v-dash.agid .pico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none; background:linear-gradient(140deg,rgba(255,210,74,.22),rgba(226,59,59,.14)); border:1px solid rgba(255,210,74,.28);color:var(--low);font-size:12px} #v-dash.agid .pair{display:flex;flex-direction:column;gap:3px;line-height:1} #v-dash.agid .pair b{font:700 12px/1 Archivo;letter-spacing:.06em} #v-dash.agid .pair u{text-decoration:none;font:700 9px/1 Archivo;letter-spacing:.13em;color:var(--muted)} #v-dash.agid .last{font:700 20px/1 'JetBrains Mono',monospace;letter-spacing:-.02em;margin-left:6px} #v-dash.agid .chg{font:700 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.04em} #v-dash.agid .tfrow{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid var(--line)} #v-dash.agid .tfs{display:flex;gap:3px;padding:3px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);flex:1} #v-dash.agid .tfs button{flex:1;height:24px;border:0;border-radius:6px;background:transparent;cursor:pointer; color:var(--muted);font:700 9.5px/1 Archivo;letter-spacing:.1em} #v-dash.agid .tfs button:hover{color:var(--text)} #v-dash.agid .tfs button.on{background:var(--accent);color:#fff;box-shadow:0 0 14px -4px var(--accent)} #v-dash.agid #chart{flex:1;min-height:250px;position:relative} #v-dash.agid #chart svg{display:block;width:100%;height:100%} #v-dash.agid .ctip{display:none;position:absolute;z-index:5;flex-direction:column;gap:4px;pointer-events:none; background:color-mix(in srgb,var(--card) 88%,#000 12%);border:1px solid var(--line-strong,var(--line)); border-radius:8px;padding:8px 10px;box-shadow:0 8px 24px -8px rgba(0,0,0,.55);backdrop-filter:blur(6px);min-width:118px} #v-dash.agid .ctip u{text-decoration:none;font:700 8px/1 Archivo;letter-spacing:.14em;color:var(--muted2);margin-bottom:2px} #v-dash.agid .ctip span{display:flex;justify-content:space-between;gap:12px;font:500 9px/1 'JetBrains Mono',monospace;color:var(--muted)} #v-dash.agid .ctip b{font-weight:700;color:var(--text)} #v-dash.agid .cfoot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)} #v-dash.agid .cfoot span{background:var(--card);padding:9px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0} #v-dash.agid .cfoot u{text-decoration:none;font:700 8px/1 Archivo;letter-spacing:.17em;color:var(--muted2)} #v-dash.agid .cfoot b{font:700 12px/1 'JetBrains Mono',monospace} #v-dash.agid .core{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 16px;text-align:center} #v-dash.agid .atom{position:relative;width:100%;max-width:340px;aspect-ratio:1/1;flex:none; cursor:grab;touch-action:none} #v-dash.agid .core h3{margin:0;font:700 13px/1.2 Archivo;letter-spacing:.11em} #v-dash.agid .core p{margin:0;font:400 10px/1.5 Archivo;color:var(--muted);max-width:270px} #v-dash.agid .mchips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px} #v-dash.agid .mchips i{font:700 8.5px/1 Archivo;letter-spacing:.12em;font-style:normal;padding:5px 8px;border-radius:20px; border:1px solid var(--line2);color:var(--muted);background:var(--bg2)} #v-dash.agid .cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);width:100%; border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:auto} #v-dash.agid .cstats div{background:var(--card);padding:11px 4px;display:flex;flex-direction:column;gap:6px;align-items:center} #v-dash.agid .cstats b{font:700 12px/1 'JetBrains Mono',monospace} #v-dash.agid .cstats u{text-decoration:none;font:700 9px/1 Archivo;letter-spacing:.1em;color:var(--muted);white-space:nowrap} #v-dash.agid .cbtn{width:100%;min-height:38px;padding:0 12px;border:1px solid rgba(226,59,59,.3);border-radius:8px;cursor:pointer; background:linear-gradient(120deg,rgba(226,59,59,.16),rgba(226,59,59,.04));color:var(--accent); font:700 10px/1.3 Archivo;letter-spacing:.13em;display:flex;align-items:center;justify-content:center;gap:10px; text-wrap:balance} /* [ULTRA audit, confirmed] PHYSICAL properties inside a UI that boots RTL. `margin-left:auto` is a no-op in RTL — the news timestamp and the CTA arrow stopped pushing to the row's end and clumped mid-row (measured ~340px from where they belong) — and `text-align:right` points the wrong way, so the WEIGHT header sat at one edge of its 74px track while the pips under it sat at the other. Both files already use the logical forms elsewhere (.tclock margin-inline-start, .fago); these were the ones that had not been converted. `end`/`inline-start` resolve correctly in BOTH directions, which is why deleting the rules would have been wrong. */ #v-dash.agid .cbtn span{margin-inline-start:auto;margin-inline-end:2px} #v-dash.agid .cbtn:hover{background:linear-gradient(120deg,rgba(226,59,59,.28),rgba(226,59,59,.07))} #v-dash.agid .dirbox{display:flex;align-items:center;gap:14px;margin:14px 15px;padding:14px 16px; border:1px solid var(--line);border-radius:10px;background:var(--bg2)} #v-dash.agid .atabs{display:flex;gap:4px;padding:11px 15px 0} #v-dash.agid .atabs button{flex:1;height:27px;border-radius:7px;border:1px solid var(--line);background:transparent; color:var(--muted);font:700 8.5px/1 Archivo;letter-spacing:.10em;cursor:pointer;transition:all .15s;padding:0 2px} #v-dash.agid .atabs button:hover{color:var(--text);border-color:var(--line2)} #v-dash.agid .atabs button.on{background:rgba(255,74,61,.12);border-color:rgba(255,74,61,.45);color:var(--high)} #v-dash.agid .dirbox>div:first-child{display:flex;flex-direction:column;gap:8px;min-width:0} #v-dash.agid .dirbox u{text-decoration:none;font:700 8.5px/1 Archivo;letter-spacing:.17em;color:var(--muted2)} /* the reference sets the verdict in CAPS (BULLISH); the engine returns it sentence-cased and localised, so the case is a presentation rule here — a no-op for Arabic and Kurdish. */ /* [ULTRA audit] NEUTRAL is the widest verdict at 125.3px and struck the donut's 9px outer arc by up to 32.7px between ~1181 and ~1290px — the last glyph sat under the ring. Addressed where the band actually is; untouched at the owner's 1536, which clears by 24px. (A clamp on vw does NOT work here: 2.2vw at 1190 is 26.2px, which clamps straight back to 25.) */ #v-dash.agid .dirbox b{font:700 25px/1 Archivo;letter-spacing:.02em;text-transform:uppercase} @media (max-width:1300px){ #v-dash.agid .dirbox b{font-size:19px} } #v-dash.agid .dirbox span{font:400 9.5px/1 Archivo;color:var(--muted)} #v-dash.agid .donut{position:relative;width:118px;height:118px;flex:none;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px;text-align:center} #v-dash.agid .donut svg{position:absolute;inset:0;width:100%;height:100%} #v-dash.agid .donut b{position:relative;font:700 18px/1 'JetBrains Mono',monospace} #v-dash.agid .donut u{position:relative;text-decoration:none;font:700 9px/1.3 Archivo;letter-spacing:.08em;color:var(--muted)} #v-dash.agid .sumrows{flex:1;display:flex;flex-direction:column} #v-dash.agid .sumrows div{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 16px;border-top:1px solid var(--line)} #v-dash.agid .sumrows span{font:700 9.5px/1 Archivo;letter-spacing:.13em;color:var(--muted);white-space:nowrap} #v-dash.agid .sumrows b{font:700 11px/1 'JetBrains Mono',monospace} @media (max-width:1440px){ #v-dash.agid .cstats{grid-template-columns:repeat(2,1fr)} } #v-dash.agid .mo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)} @media (max-width:820px){ #v-dash.agid .mo{grid-template-columns:repeat(2,minmax(0,1fr))} } #v-dash.agid .moc{background:var(--card);padding:14px 15px 13px;display:flex;flex-direction:column;gap:11px; position:relative;transition:background .18s} #v-dash.agid .moc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;transition:opacity .18s} #v-dash.agid .moc:hover::before{opacity:.75} #v-dash.agid .moh .sp{flex:1} #v-dash.agid .trend{font:700 13px/1 Archivo} #v-dash.agid .vm{display:inline-flex;gap:2px;margin-right:7px;vertical-align:middle} #v-dash.agid .vm i{width:4px;height:9px;border-radius:1px;display:block} #v-dash.agid .moc:hover{background:var(--card2)} #v-dash.agid .moh{display:flex;align-items:center;gap:10px} #v-dash.agid .moh s{width:30px;height:30px;border-radius:50%;text-decoration:none;flex:none;display:grid;place-items:center; font:700 11px/1 Archivo;background:var(--bg2);border:1px solid var(--line2)} #v-dash.agid .moh b{font:700 12.5px/1 Archivo;letter-spacing:.04em;display:block} #v-dash.agid .moh i{font:400 9.5px/1.2 Archivo;font-style:normal;color:var(--muted2);display:block;margin-top:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px} #v-dash.agid .mop{display:flex;align-items:baseline;gap:6px} #v-dash.agid .mop b{font:700 19px/1 'JetBrains Mono',monospace;letter-spacing:-.02em} #v-dash.agid .mop u{text-decoration:none;font:500 9px/1 'JetBrains Mono',monospace;color:var(--muted2)} #v-dash.agid .tag{display:inline-flex;align-items:center;gap:5px;font:700 9.5px/1 Archivo;letter-spacing:.1em} #v-dash.agid .mor{display:flex;justify-content:space-between;font:500 9.5px/1 'JetBrains Mono',monospace;color:var(--muted)} #v-dash.agid .mor em{font-style:normal;font-weight:700;color:var(--text)} #v-dash.agid .spark{height:46px;width:100%;display:block;margin-top:auto} #v-dash.agid .mou{font:500 8.5px/1 'JetBrains Mono',monospace;color:var(--muted2);display:flex;align-items:center;gap:6px} #v-dash.agid .mou s{width:5px;height:5px;border-radius:50%;background:var(--pos);text-decoration:none} #v-dash.agid #globewrap{position:relative;height:392px;background: radial-gradient(120% 90% at 56% 44%,#1c0b0e 0%,#0d060a 46%,#02040B 100%)} #v-dash.agid .globe-load{position:absolute;inset:0;display:grid;place-items:center;background:#141110; font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.28em;color:var(--muted2);transition:opacity .7s} #v-dash.agid .globe-load.gone{opacity:0;pointer-events:none} #v-dash.agid .glab{position:absolute;transform:translate(-50%,-100%);padding-bottom:10px;cursor:pointer;pointer-events:auto} #v-dash.agid .gbox{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px 7px;border-radius:5px; background:rgba(20,17,15,.82);border:1px solid var(--line);backdrop-filter:blur(9px);white-space:nowrap; transition:border-color .25s,transform .25s} #v-dash.agid .glab:hover .gbox{border-color:var(--line2);transform:translateY(-2px)} #v-dash.agid .gnm{font:700 9px/1 Archivo;letter-spacing:.15em;color:rgba(var(--ink),.72)} #v-dash.agid .gst{font:700 7px/1 'JetBrains Mono',monospace;letter-spacing:.2em} #v-dash.agid .gvl{font:700 17px/1 'JetBrains Mono',monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #v-dash.agid .gdt{font:500 9px/1 'JetBrains Mono',monospace} #v-dash.agid .gstem{position:absolute;left:50%;bottom:0;width:1px;height:10px;background:linear-gradient(180deg,var(--line2),transparent)} #v-dash.agid #glegend{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px); padding:8px 13px;border-radius:100px;background:rgba(20,17,15,.72);border:1px solid var(--line);backdrop-filter:blur(12px)} #v-dash.agid #glegend div{display:flex;align-items:center;gap:6px;font:700 8px/1 Archivo;letter-spacing:.14em;color:var(--muted)} #v-dash.agid #glegend s{width:6px;height:6px;border-radius:50%;text-decoration:none;box-shadow:0 0 8px currentColor} /* [ULTRA audit] the controls shared the legend's line and drew over it; in English the legend's own min-content (370.7px) also broke below ~429px. Controls to the top corner, legend wraps. */ #v-dash.agid #gctl{position:absolute;inset-inline-end:12px;top:12px;bottom:auto;right:auto;display:flex;gap:7px;z-index:3} #v-dash.agid #gctl button{height:28px;padding:0 11px;border-radius:6px;background:rgba(20,17,15,.72);border:1px solid var(--line); color:var(--muted);cursor:pointer;backdrop-filter:blur(12px);font:700 8.5px/1 Archivo;letter-spacing:.14em;text-transform:uppercase} #v-dash.agid #gctl button:hover{color:var(--text);border-color:var(--line2)} #v-dash.agid #gctl button.on{color:var(--med);border-color:rgba(255,157,46,.42)} #v-dash.agid #rlist{position:absolute;top:12px;left:12px;width:196px;background:rgba(20,17,15,.70);border:1px solid var(--line); border-radius:8px;backdrop-filter:blur(14px);overflow:hidden} #v-dash.agid #rlist .rr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 11px 8px;cursor:pointer; border-bottom:1px solid rgba(var(--hair),.05)} #v-dash.agid #rlist .rr:last-child{border-bottom:0} #v-dash.agid #rlist .rr:hover{background:rgba(var(--tint),.04)} #v-dash.agid #rlist .rr.on{background:rgba(255,157,46,.09)} #v-dash.agid #rlist .nm{display:flex;align-items:center;gap:7px;font:700 9px/1 Archivo;letter-spacing:.11em} #v-dash.agid #rlist .nm s{width:6px;height:6px;border-radius:50%;text-decoration:none;box-shadow:0 0 8px currentColor;flex:none} #v-dash.agid #rlist .vl{font:700 11px/1 'JetBrains Mono',monospace;text-align:end} #v-dash.agid #rlist .dt{font:500 8.5px/1 'JetBrains Mono',monospace;text-align:end} #v-dash.agid #rlist .bar{grid-column:1/-1;height:2px;margin-top:5px;background:rgba(var(--hair),.08);border-radius:2px;overflow:hidden} #v-dash.agid #rlist .bar i{display:block;height:100%} #v-dash.agid #kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)} #v-dash.agid #kpis div{background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:7px;min-width:0} #v-dash.agid #kpis b{font:700 24px/1 'JetBrains Mono',monospace;letter-spacing:-.02em} #v-dash.agid #kpis u{text-decoration:none;font:700 8.5px/1 Archivo;letter-spacing:.18em;color:var(--muted2)} /* [ULTRA audit] four counters in one row stopped fitting at ~548px and the fourth was simply clipped away — a KPI the customer never knew was there. Two rows on a phone. */ @media (max-width:560px){ #v-dash.agid #kpis{grid-template-columns:repeat(2,1fr)} } #v-dash.agid .an{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line)} #v-dash.agid .anc{background:var(--card);padding:14px 12px 15px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center} #v-dash.agid .anc.pend{background:repeating-linear-gradient(135deg,var(--card),var(--card) 7px,rgba(var(--hair),.014) 7px,rgba(var(--hair),.014) 14px)} #v-dash.agid .anc.lead{background:linear-gradient(180deg,rgba(226,59,59,.10),var(--card) 62%)} #v-dash.agid .anc.lead .av{box-shadow:0 0 0 3px rgba(226,59,59,.16),0 0 26px -4px rgba(226,59,59,.75)} #v-dash.agid .anc.pend .av{border-style:dashed} #v-dash.agid .rank{align-self:flex-start;width:19px;height:19px;border-radius:5px;display:grid;place-items:center; font:700 10px/1 'JetBrains Mono',monospace;background:var(--bg2);border:1px solid var(--line2);color:var(--muted)} #v-dash.agid .rank.first{background:var(--high);border-color:var(--high);color:var(--onAccent)} #v-dash.agid .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 Archivo; background:radial-gradient(circle at 34% 30%,#ffb0a4,#c9382a);color:#2a0f0a} #v-dash.agid .av.ph{background:none;border:1px dashed var(--line2);color:var(--muted2);font-size:17px} #v-dash.agid .anc b{font:700 12px/1 Archivo;letter-spacing:.03em} #v-dash.agid .anc .pt{font:700 8.5px/1 Archivo;letter-spacing:.15em;color:var(--muted2)} #v-dash.agid .anc .nt{font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--muted)} #v-dash.agid .anc .meta{font:400 8.5px/1.35 Archivo;color:var(--muted2)} #v-dash.agid .anc .kv{display:flex;gap:14px;justify-content:center;font:500 8.5px/1 'JetBrains Mono',monospace;color:var(--muted2)} #v-dash.agid .anc .kv em{font-style:normal;color:var(--text);font-weight:700} #v-dash.agid .dg{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(320px,1.25fr) minmax(240px,1fr);gap:1px;background:var(--line)} /* [2026-08-11] These grids draw their hairlines by filling with --line and letting a 1px gap show through, so EVERY cell must be opaque or the fill becomes the text's background. Nine cells (.dv, .sc.live, six .anc.pend, .cta) had no fill of their own. In dark that was invisible — --line is rgba(255,236,216,.10) over #02040B, near enough to the ground — but in light --line is a solid #e4e7ee, so those nine read as grey slabs and their text fell to 3.2:1. State variants keep winning: they carry a second class and outrank this. */ #v-dash.agid .dg>*,#v-dash.agid .ses>*,#v-dash.agid .radar>*,#v-dash.agid .cstats>*, #v-dash.agid .rstats>*,#v-dash.agid .mo>*,#v-dash.agid .an>*,#v-dash.agid .cfoot>*, #v-dash.agid #kpis>*,#v-dash.agid #ohlc>*,#v-dash.agid .chohlc>*{background:var(--card)} #v-dash.agid .dv{background:linear-gradient(180deg,rgba(226,59,59,.10),var(--card) 65%);padding:18px 18px 16px; display:flex;flex-direction:column;gap:12px} #v-dash.agid .dv>u{text-decoration:none;font:700 9px/1 Archivo;letter-spacing:.19em;color:var(--muted2)} #v-dash.agid .dv>b{font:800 34px/1 Archivo;letter-spacing:.01em} #v-dash.agid .conv{display:flex;flex-direction:column;gap:7px} #v-dash.agid .cbar{height:6px;border-radius:6px;background:rgba(var(--hair),.10);overflow:hidden} #v-dash.agid .cbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--med),var(--high))} #v-dash.agid .conv span{font:700 9px/1 Archivo;letter-spacing:.14em;color:var(--muted)} #v-dash.agid .conv em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text)} #v-dash.agid .dvf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} #v-dash.agid .dvf u{display:block;text-decoration:none;font:700 8px/1 Archivo;letter-spacing:.15em;color:var(--muted2);margin-bottom:6px} #v-dash.agid .dvf b{font:700 12px/1 'JetBrains Mono',monospace} #v-dash.agid .dsig{background:var(--card);display:flex;flex-direction:column} #v-dash.agid .dsh{display:grid;grid-template-columns:1fr auto 74px;gap:12px;padding:11px 18px; border-bottom:1px solid var(--line);font:700 8px/1 Archivo;letter-spacing:.19em;color:var(--muted2)} #v-dash.agid .dsh span:last-child{text-align:end} #v-dash.agid .dr{display:grid;grid-template-columns:1fr auto 74px;gap:12px;align-items:center;padding:11px 18px; border-bottom:1px solid rgba(var(--hair),.05)} #v-dash.agid .dr:last-child{border-bottom:0} #v-dash.agid .dr>span{font:700 9.5px/1 Archivo;letter-spacing:.12em;color:var(--muted)} #v-dash.agid .dr>b{font:700 11px/1 'JetBrains Mono',monospace;white-space:nowrap} #v-dash.agid .w{display:flex;gap:3px;justify-content:flex-end} #v-dash.agid .w s{width:9px;height:5px;border-radius:1px;text-decoration:none} #v-dash.agid .w.up s{background:var(--pos)} #v-dash.agid .w.n s{background:var(--muted2)} #v-dash.agid .dctx{background:var(--card);display:grid;grid-template-rows:repeat(4,1fr)} #v-dash.agid .dctx>div{padding:12px 18px;border-bottom:1px solid rgba(var(--hair),.05);display:flex;flex-direction:column;gap:5px} #v-dash.agid .dctx>div:last-child{border-bottom:0} #v-dash.agid .dctx u{text-decoration:none;font:700 8px/1 Archivo;letter-spacing:.17em;color:var(--muted2)} #v-dash.agid .dctx b{font:700 12px/1 Archivo;letter-spacing:.03em} #v-dash.agid .dctx span{font:400 9.5px/1.3 Archivo;color:var(--muted)} @media (max-width:1180px){ #v-dash.agid .dg{grid-template-columns:minmax(0,1fr)} } #v-dash.agid .tabs{display:flex;gap:6px;padding:11px 15px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} #v-dash.agid .tabs::-webkit-scrollbar{display:none} #v-dash.agid .tab{height:27px;padding:0 12px;border-radius:100px;background:transparent;border:1px solid var(--line); color:var(--muted);cursor:pointer;font:600 10px/1 Archivo;letter-spacing:.06em;white-space:nowrap} #v-dash.agid .tab:hover{color:var(--text)} /* --chip-fill, NOT --high: white on the design's #ff4a3d is 3.33:1. These two are the only places a level colour is used as a FILL under white text, so the fill darkens for them alone (4.55:1) and every other reading of --high — text, bars, rings — keeps the design's exact hue. Light already passes (--high #c8291a = 5.54:1) and inherits the same token unchanged. */ #v-dash.agid{--chip-fill:#d63d32} html[data-theme="light"] #v-dash.agid{--chip-fill:var(--high)} #v-dash.agid .tab.on{background:var(--chip-fill);border-color:var(--chip-fill);color:var(--onAccent);font-weight:700} #v-dash.agid .news{padding:0 15px} #v-dash.agid .ni{position:relative;padding:14px 10px 14px 16px;border-bottom:1px solid rgba(var(--hair),.06); cursor:pointer;transition:background .16s;border-radius:0 8px 8px 0} #v-dash.agid .ni::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2.5px;border-radius:3px; background:var(--line2);transition:background .16s} #v-dash.agid .ni.med::before{background:linear-gradient(180deg,var(--med),rgba(255,157,46,.15))} #v-dash.agid .ni.info::before{background:linear-gradient(180deg,var(--mon),rgba(106,167,255,.15))} #v-dash.agid .ni:hover{background:rgba(var(--tint),.03)} #v-dash.agid .ni:hover p{color:var(--accent)} #v-dash.agid .ni:last-child{border-bottom:0} #v-dash.agid .nrow{display:flex;align-items:center;gap:6px;margin-bottom:9px} #v-dash.agid .chip{font:700 8px/1 Archivo;letter-spacing:.14em;padding:4px 6px;border-radius:4px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap} #v-dash.agid .chip.med{color:var(--med);border-color:rgba(255,157,46,.35)} #v-dash.agid .chip.info{color:var(--mon);border-color:rgba(106,167,255,.32)} #v-dash.agid .chip.trusted{color:var(--pos);border-color:rgba(79,209,139,.32)} #v-dash.agid .nrow .ago{margin-inline-start:auto;display:flex;align-items:center;gap:6px; font:500 9.5px/1 'JetBrains Mono',monospace;color:var(--muted2)} #v-dash.agid .nrow .ago s{width:5px;height:5px;border-radius:50%;background:var(--pos);text-decoration:none; box-shadow:0 0 7px var(--pos);animation:pulse 1.8s infinite} #v-dash.agid .ni p{margin:0 0 10px;font:600 13.5px/1.45 Archivo;text-wrap:pretty;letter-spacing:.005em;transition:color .16s} #v-dash.agid .ni p:last-child{margin-bottom:0} #v-dash.agid .syms{display:flex;gap:6px;flex-wrap:wrap} #v-dash.agid .sym{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.06em;padding:4px 7px;border-radius:4px; background:var(--bg2);border:1px solid var(--line);color:var(--muted);transition:all .15s} #v-dash.agid .ni:hover .sym{border-color:rgba(226,59,59,.35);color:var(--text)} #v-dash.agid table{width:100%;border-collapse:collapse} #v-dash.agid thead th{font:700 8.5px/1 Archivo;letter-spacing:.16em;color:var(--muted2);text-align:left; padding:10px 14px;border-bottom:1px solid var(--line)} #v-dash.agid tbody td{padding:11px 14px;border-bottom:1px solid rgba(var(--hair),.055);font:500 11.5px/1 Archivo} #v-dash.agid tbody tr:last-child td{border-bottom:0} #v-dash.agid tbody tr.next{background:linear-gradient(90deg,rgba(255,74,61,.14),transparent 70%); box-shadow:inset 2.5px 0 0 var(--high)} #v-dash.agid tbody tr.next td.c{color:var(--high);font-weight:700} #v-dash.agid tbody tr:hover{background:rgba(var(--tint),.028)} #v-dash.agid td.t, #v-dash.agid td.f, #v-dash.agid td.c{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums} #v-dash.agid td.c{color:var(--med);text-align:right} #v-dash.agid .ev{display:flex;align-items:center;gap:8px;font-weight:600} #v-dash.agid .badge{font:700 7.5px/1 Archivo;letter-spacing:.14em;padding:3px 5px;border-radius:3px;background:var(--chip-fill);color:var(--onAccent)} #v-dash.agid .cur{display:flex;align-items:center;gap:7px} #v-dash.agid .cc{text-decoration:none;font:800 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.06em; padding:4px 7px;border-radius:4px;border:1px solid color-mix(in srgb,currentColor 40%,transparent); background:color-mix(in srgb,currentColor 12%,transparent)} #v-dash.agid .impbars{display:inline-flex;gap:2.5px;vertical-align:middle} #v-dash.agid .impbars i{width:4.5px;border-radius:1px;background:rgba(var(--hair),.14)} #v-dash.agid .impbars i:nth-child(1){height:5px} #v-dash.agid .impbars i:nth-child(2){height:7px} #v-dash.agid .impbars i:nth-child(3){height:9px} #v-dash.agid .impbars i:nth-child(4){height:11px} #v-dash.agid .impbars i:nth-child(5){height:13px} #v-dash.agid .impbars{align-items:flex-end} #v-dash.agid .impbars i.on{background:var(--high);box-shadow:0 0 6px -1px var(--high)} #v-dash.agid #tl{position:relative;padding:14px 18px 16px 18px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(226,59,59,.045),transparent)} #v-dash.agid #tlscale{position:relative;height:10px;margin-left:78px; font:500 8.5px/1 'JetBrains Mono',monospace;color:var(--muted2)} #v-dash.agid #tlscale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} #v-dash.agid #tlrows{display:flex;flex-direction:column;gap:5px;margin-top:8px} #v-dash.agid .tlrow{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:0} #v-dash.agid .tlrow u{text-decoration:none;font:700 8px/1 Archivo;letter-spacing:.14em;color:var(--muted2);white-space:nowrap} #v-dash.agid .tltrack{position:relative;height:17px;border-radius:3px;background:rgba(var(--hair),.045);overflow:hidden} #v-dash.agid .tltrack>i{position:absolute;top:0;bottom:0;width:1px;background:rgba(var(--hair),.07)} #v-dash.agid .band{position:absolute;top:0;bottom:0;border-radius:3px;display:flex;align-items:center;padding:0 7px; background:color-mix(in oklab,var(--c) 26%,transparent);border:1px solid color-mix(in oklab,var(--c) 55%,transparent)} #v-dash.agid .band span{font-size:8px;letter-spacing:.06em;color:rgba(var(--ink),.72);white-space:nowrap} #v-dash.agid .band.live{box-shadow:0 0 16px -4px var(--c) inset,0 0 10px -6px var(--c)} #v-dash.agid .band.hatch{background:repeating-linear-gradient(115deg,color-mix(in oklab,var(--c) 30%,transparent), color-mix(in oklab,var(--c) 30%,transparent) 5px,transparent 5px,transparent 10px)} #v-dash.agid #now{position:absolute;top:26px;bottom:14px;left:50%;width:1px;background:var(--text); margin-left:78px;pointer-events:none;transition:left 1s linear;box-shadow:0 0 10px rgba(var(--tint),.5)} #v-dash.agid #now b{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:8.5px;letter-spacing:.06em; padding:2px 5px;border-radius:3px;background:var(--text);color:var(--bg);white-space:nowrap} #v-dash.agid .ses{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)} #v-dash.agid .sc{background:var(--card);padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;position:relative} #v-dash.agid .sc.live{background:linear-gradient(180deg,rgba(79,209,139,.05),var(--card) 60%)} #v-dash.agid .schead{display:flex;align-items:center;gap:8px} #v-dash.agid .led{width:7px;height:7px;border-radius:50%;text-decoration:none;box-shadow:0 0 9px currentColor} #v-dash.agid .sc.live .led{animation:pulse 1.8s infinite} #v-dash.agid .prog{height:3px;border-radius:3px;background:rgba(var(--hair),.10);overflow:hidden} #v-dash.agid .prog i{display:block;height:100%;border-radius:3px;transition:width 1s linear} #v-dash.agid .actrow{display:flex;align-items:baseline;justify-content:space-between} #v-dash.agid .sc h3{margin:0;font:700 13px/1 Archivo;letter-spacing:.1em} #v-dash.agid .sc .city{font:400 9.5px/1 Archivo;color:var(--muted2)} #v-dash.agid .sc .state{font:700 9.5px/1 Archivo;letter-spacing:.15em} #v-dash.agid .sc .cd{font:700 19px/1 'JetBrains Mono',monospace;letter-spacing:-.01em} #v-dash.agid .sc .utc{font:500 8.5px/1 'JetBrains Mono',monospace;color:var(--muted2)} #v-dash.agid .sc .lbl{font:400 8.5px/1 Archivo;color:var(--muted2)} #v-dash.agid .meter{display:flex;gap:3px} #v-dash.agid .meter i{flex:1;height:5px;border-radius:2px;background:rgba(var(--hair),.10)} #v-dash.agid .radar{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);gap:1px;background:var(--line)} #v-dash.agid .rmain{background:var(--card);display:flex;flex-direction:column} #v-dash.agid .tape{padding:18px 20px 16px;border-bottom:1px solid var(--line)} #v-dash.agid .tphead{display:flex;align-items:flex-end;gap:14px;margin-bottom:22px} #v-dash.agid .tphead .sp{flex:1} #v-dash.agid .tphead u{display:block;text-decoration:none;font:700 8.5px/1 Archivo;letter-spacing:.18em;color:var(--muted2);margin-bottom:7px} #v-dash.agid .tphead b{font:700 14px/1 'JetBrains Mono',monospace} #v-dash.agid .tphead .rt{text-align:end} #v-dash.agid .track{position:relative;height:10px;border-radius:10px;margin:0 2px 30px; background:linear-gradient(90deg,rgba(var(--hair),.10),rgba(var(--hair),.16))} #v-dash.agid .track .fill{position:absolute;top:0;bottom:0;border-radius:10px; background:linear-gradient(90deg,var(--pos),color-mix(in oklab,var(--pos) 55%,var(--med)))} #v-dash.agid .track .mk{position:absolute;top:-5px;width:3px;height:20px;border-radius:2px;text-decoration:none; transform:translateX(-1.5px)} #v-dash.agid .track .mk.o{background:var(--muted)} #v-dash.agid .track .mk.c{background:var(--text);box-shadow:0 0 0 3px rgba(var(--tint),.10)} #v-dash.agid .track .pos{position:absolute;top:24px;transform:translateX(-50%);font:700 10px/1 'JetBrains Mono',monospace; color:var(--text);white-space:nowrap} #v-dash.agid .tpfoot{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} #v-dash.agid .tpfoot span{display:flex;align-items:center;gap:7px;font:700 8.5px/1 Archivo;letter-spacing:.14em;color:var(--muted2);min-width:0} #v-dash.agid .tpfoot b{font:700 11px/1 'JetBrains Mono',monospace;color:var(--text)} #v-dash.agid .tpfoot .d{width:7px;height:7px;border-radius:2px;flex:none} #v-dash.agid .tpfoot .d.lo{background:var(--neg);opacity:.65} #v-dash.agid .tpfoot .d.op{background:var(--muted)} #v-dash.agid .tpfoot .d.cl{background:var(--pos)} #v-dash.agid .tpfoot .d.hi{background:var(--med);opacity:.8} #v-dash.agid .rstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);flex:1} #v-dash.agid .rstats>div{background:var(--card);padding:14px 16px 15px;display:flex;flex-direction:column;gap:9px} #v-dash.agid .rstats u{text-decoration:none;font:700 8.5px/1 Archivo;letter-spacing:.16em;color:var(--muted2)} @media (max-width:560px){ #v-dash.agid .rstats,#v-dash.agid .tpfoot{grid-template-columns:repeat(2,1fr)} #v-dash.agid .rstats>div{min-width:0} } #v-dash.agid .rstats b{font:700 20px/1 'JetBrains Mono',monospace;letter-spacing:-.02em} #v-dash.agid .rstats b em{font:700 11px/1 Archivo;font-style:normal;color:var(--muted)} #v-dash.agid .rstats .mini{height:3px;border-radius:3px;background:rgba(var(--hair),.12);overflow:hidden} #v-dash.agid .rstats .mini i{display:block;height:100%;border-radius:3px;background:var(--text)} #v-dash.agid .rstats span{font:400 9px/1.35 Archivo;color:var(--muted)} #v-dash.agid .rside{background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:12px} #v-dash.agid .rside .kv{display:flex;flex-direction:column;gap:5px;padding-bottom:11px;border-bottom:1px solid rgba(var(--hair),.06)} #v-dash.agid .rside .kv:last-child{border-bottom:0;padding-bottom:0} #v-dash.agid .rside u{text-decoration:none;font:700 8px/1 Archivo;letter-spacing:.16em;color:var(--muted2)} #v-dash.agid .rside b{font:700 12px/1 Archivo} #v-dash.agid .rside .sub{font:400 9px/1.4 Archivo;color:var(--muted2)} #v-dash.agid #gctl button{white-space:nowrap;flex:none;overflow:visible;min-width:max-content} /* the emblem's stage: a faint crimson heart (the shield's red at low light) falling to the frame's #02040B — the card melts into the page and the only warmth left is the brand's own */ #v-dash.agid .core{background:radial-gradient(120% 90% at 50% 34%,#1c0b0e 0%,#0e060a 52%,#02040B 100%)} #v-dash.agid .hbar{display:flex;gap:8px;align-items:center} #v-dash.agid .ibtn svg{width:19px;height:19px;display:block} #v-dash.agid .ibtn.wide{width:auto;padding:0 10px;gap:7px;display:flex;align-items:center; font:700 10.5px/1 Archivo;letter-spacing:.1em;color:var(--text)} #v-dash.agid .ibtn.wide svg{width:17px;height:17px;color:var(--muted)} #v-dash.agid .caret{width:5px;height:5px;border-right:1.6px solid var(--muted2);border-bottom:1.6px solid var(--muted2); transform:rotate(45deg) translate(-1px,-1px)} #v-dash.agid .ibtn svg.i-sun{display:none} #v-dash.agid .lang{position:relative} #v-dash.agid .lmenu{position:absolute;top:44px;right:0;z-index:60;min-width:212px;margin:0;padding:6px; list-style:none;background:var(--bg2);border:1px solid var(--line);border-radius:12px; box-shadow:0 22px 48px rgba(0,0,0,.34);display:none} #v-dash.agid .lang.open .lmenu{display:block} #v-dash.agid .lmenu li{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer; font:600 13px/1 Archivo;color:var(--text)} #v-dash.agid .lmenu li:hover{background:rgba(var(--tint),.05)} #v-dash.agid .lmenu li.on{background:color-mix(in oklab,var(--high) 14%,transparent);color:var(--high)} #v-dash.agid .lmenu li s{text-decoration:none;flex:none;min-width:22px;font:800 10.5px/1 'JetBrains Mono',monospace; letter-spacing:.02em;color:var(--text)} #v-dash.agid .lmenu li s.gb{color:var(--high)} #v-dash.agid .lmenu li s.ku{color:var(--low)} #v-dash.agid .lmenu li span{flex:1} #v-dash.agid .lmenu li b{font:700 13px/1 Archivo;color:var(--high)} @media (max-width:1180px){ #v-dash.agid #grid{grid-template-columns:minmax(0,1fr)} #v-dash.agid .an{grid-template-columns:repeat(3,1fr)} #v-dash.agid .radar{grid-template-columns:minmax(0,1fr)} #v-dash.agid .ses{grid-template-columns:1fr 1fr} #v-dash.agid .trio{grid-template-columns:minmax(0,1fr)} } /* ══ BRIDGES — existing dashboard markup adopting the design's skin without rewriting every render function: the app card/head/feed classes map onto the ported design styles. ════════ */ #v-dash.agid .card, #v-dash.agid .icard, #v-dash.agid .feedcard{ background:var(--card);border:1px solid var(--line);border-radius:var(--r)} /* [ULTRA audit, F2] .vd2-head / .fh are DELETED — zero references, and they were the only other consumer of @keyframes agidPulse, so the keyframes go with them. */ #v-dash.agid .vd2-more{font:700 9.5px/1 Archivo;letter-spacing:.1em;color:var(--accent); background:none;border:0;cursor:pointer;text-transform:uppercase} #v-dash.agid .chfoot{border-top:1px solid var(--line);background:var(--card)} #v-dash.agid .chohlc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)} #v-dash.agid .chohlc>span{background:var(--card);padding:9px 14px;display:flex;flex-direction:column;gap:5px; font:700 12px/1 'JetBrains Mono',monospace} #v-dash.agid .chohlc>span>u,#v-dash.agid .chohlc>span>i{font:700 8px/1 Archivo;letter-spacing:.17em; color:var(--muted2);text-decoration:none;font-style:normal;text-transform:uppercase} #v-dash.agid .fton{font:600 10.5px/1 Archivo;color:var(--muted);background:transparent; border:1px solid var(--line);border-radius:16px;padding:6px 12px;cursor:pointer} #v-dash.agid .fton.on{background:var(--accent);color:#fff;border-color:var(--accent)} #v-dash.agid .last{min-width:0} #v-dash.agid .pico{width:26px;height:26px;border-radius:8px;background:rgba(226,59,59,.14); display:grid;place-items:center;color:var(--accent);font-size:13px} #v-dash.agid select, #v-dash.agid .mapsel, #v-dash.agid .cal-sel{ background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:7px; font:600 10.5px Archivo;padding:5px 8px} /* card surfaces must be the design's --card, outranking the legacy gradient painters */ body[data-view="dash"] #v-dash.agid .card, html:not([data-theme="light"]) #v-dash.agid .card, body[data-view="dash"] #v-dash.agid .icard, html:not([data-theme="light"]) #v-dash.agid .icard, body[data-view="dash"] #v-dash.agid .feedcard, html:not([data-theme="light"]) #v-dash.agid .feedcard{ background:var(--card);border-color:var(--line)} html[data-theme="light"] body[data-view="dash"] #v-dash.agid .card, html[data-theme="light"] body[data-view="dash"] #v-dash.agid .icard, html[data-theme="light"] body[data-view="dash"] #v-dash.agid .feedcard{ background:var(--card);border-color:var(--line)} /* the deepest legacy painter: html:not(light) #v-dash .vd2 article.card|.feedcard (0,2,4) paints a blue-black gradient + the feedcard a solid #05070d. Same chain + .agid ⇒ (0,2,5) wins. */ html:not([data-theme="light"]) #v-dash.agid .vd2 article.card, html:not([data-theme="light"]) #v-dash.agid .vd2 article.feedcard, html:not([data-theme="light"]) #v-dash.agid .vd2 article.feedcard.vd2-news{ background:var(--card);border-color:var(--line);box-shadow:none} html:not([data-theme="light"]) #v-dash.agid .vd2 article.card:hover{border-color:var(--line2)} html[data-theme="light"] body[data-view="dash"] #v-dash.agid .vd2 article.card, html[data-theme="light"] body[data-view="dash"] #v-dash.agid .vd2 article.feedcard{ background:var(--card);border-color:var(--line);box-shadow:0 8px 24px rgba(16,24,40,.06)} /* the APP's global ticker hides on the dashboard only - the design ships its own #ticker there. Deliberate shell exception, scoped by view, documented: everywhere else the app strip stays. */ body[data-view="dash"] .ticker{display:none} /* ── THE STRIP SITS ABOVE THE GREETING, which is where the design draws it ───────────────────── [2026-08-11 owner side-by-side] the reference's first row is #ticker and the greeting header is the SECOND. The port had them the other way round, and not by a styling slip: the design's strip was rendered inside #v-dash, which begins BELOW the app's sticky .topbar, while the app's own (hidden) marquee still reserved its 28px band at the very top. So the owner's screen read: empty black bar - greeting - quotes. The design's strip now OWNS that band. It is lifted out of flow to the top of the viewport and the reserved height is raised from the marquee's 28px to the design's 56px, so .topbar/.side/.sidetog begin underneath it. Every rule here is scoped to body[data-view="dash"] / #v-dash.agid: no other view's chrome is touched, and the app marquee stays hidden on this view exactly as before. The .view entrance fade animates TRANSFORM, and an ancestor with a transform makes position:fixed resolve against that ancestor instead of the viewport - so during those 300ms the strip would render 8px low and clipped inside the pane on every entry. The dashboard pane opts out of the fade rather than ship that jump; the design has no entrance fade either. */ #v-dash.agid{animation:none} #v-dash.agid #ticker{position:fixed;top:var(--wco-h,0px);inset-inline:0;z-index:60;margin:0; border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--panel)} body[data-view="dash"] .app{padding-top:calc(56px + var(--wco-h,0px))} body[data-view="dash"] .side{top:calc(56px + var(--wco-h,0px))} body[data-view="dash"] .topbar{top:calc(56px + var(--wco-h,0px))} /* the toggle is centred in the header it sits in, not pinned to its top edge: 56 strip + (70-28)/2 */ body[data-view="dash"] .sidetog{top:calc(77px + var(--wco-h,0px))} /* the strip carries EIGHT instruments, not the reference's six. At 1536 logical - the owner's own 1920/125% screen - the reference's 16px gutters overrun the band by ~220px and the last quote is cut through its price. The gutters tighten so all eight fit; the strip keeps the design's overflow-x for anything narrower still. */ @media (max-width:1600px){ #v-dash.agid .tk{padding:0 7px;gap:7px} #v-dash.agid .tsym{width:24px;height:24px} #v-dash.agid .tkv{font-size:14px} #v-dash.agid .tclock{padding:0 12px} } #v-dash.agid .agid-stripcard{margin-bottom:12px} #v-dash.agid #ticker .nosrc{color:var(--muted2)} /* ── THE GREETING HEADER = the design's #top ─────────────────────────────────────────────────── The design's second row is a warm-black header: Archivo 22px greeting over a 12px subtitle, two STAT stacks on the right (a letter-spaced micro-label above a mono value, each opened by a hairline), then 36px square controls. The app's .topbar carries exactly those parts already (.hdr-title / .hdr-sub / .hdr-status / .hdr-acts) — what it did NOT carry was the design: the 2026-07 "parity sprint" had painted it in the old blue-black (#05070d, #ff3131, 40px pill buttons), so on the owner's side-by-side the strip and the cards were warm and the header between them was cold. Same DOM, same behaviour, design skin. The design's palette is spelled out here because .topbar lives OUTSIDE #v-dash, where the --d-* tokens do not reach. */ body[data-view="dash"] .topbar{ --d-panel:#0c0a09; --d-bg2:#100e0d; --d-text:#f4ede5; --d-line:rgba(255,236,216,.10); --d-line2:rgba(255,236,216,.18); --d-muted:rgba(244,237,229,.52); --d-muted2:rgba(244,237,229,.32); --d-pos:#4fd18b; --d-neg:#ff6a5c; height:auto;min-height:70px;padding:12px 22px;gap:18px; background:var(--d-panel);border-bottom:1px solid var(--d-line);box-shadow:none; font-family:Archivo,system-ui,sans-serif; } html[data-theme="light"] body[data-view="dash"] .topbar{ --d-panel:#f6f3f0; --d-bg2:#ffffff; --d-text:#1a130e; --d-line:rgba(26,19,14,.13); --d-line2:rgba(26,19,14,.22); --d-muted:rgba(26,19,14,.62); --d-muted2:rgba(26,19,14,.45); --d-pos:#12915a; --d-neg:#cf3b2e; background:var(--d-panel);border-bottom:1px solid var(--d-line);box-shadow:none; } /* dashboard.css:1449-1459 carries its own LIGHT block for these same children — cool greys and gradient pill buttons — at a specificity the dark rules above cannot reach. Each is answered in kind, or the owner's light mode keeps a cold header between a warm strip and warm cards. */ html[data-theme="light"] body[data-view="dash"] .hdr-title{color:var(--d-text)} html[data-theme="light"] body[data-view="dash"] .hdr-sub{color:var(--d-muted)} html[data-theme="light"] body[data-view="dash"] .hdr-status .hsl{color:var(--d-muted2)} html[data-theme="light"] body[data-view="dash"] .ha{ background:var(--d-bg2);border-color:var(--d-line);color:var(--d-muted);box-shadow:none} html[data-theme="light"] body[data-view="dash"] .ha:hover{color:var(--d-text);border-color:var(--d-line2)} body[data-view="dash"] .hdr-title{font:700 22px/1.15 Archivo,system-ui,sans-serif;letter-spacing:-.015em;color:var(--d-text)} body[data-view="dash"] .hdr-sub{font:400 12px/1.2 Archivo,system-ui,sans-serif;color:var(--d-muted);margin-top:6px} /* flex-direction is spelled out because charts-page.css:76 sets .hdr-status to a COLUMN globally — inherit that here and the two stats stack, which is what pushed the header to 94px tall. */ /* [ULTRA audit, P4-3] the row stayed unshrinkable on phones: English + signed-in needs 481px of min-content and 360 offers 360, so 121px went off-screen and the burger was squeezed to 20x42 with its glyph deformed inside an 18px box. The two stat stacks are a DESKTOP flourish — below 1051px they simply do not run, and the header fits again. */ @media (min-width:1051px){ body[data-view="dash"] .hdr-status{display:flex;flex-direction:row;align-items:center;gap:18px; padding-inline:0;border-inline-end:0} } @media (max-width:1050px){ body[data-view="dash"] .hdr-status{display:none} } /* the design's .stat: label over value. MARKET STATUS keeps its live dot, so it is a 2x2 grid with the label spanning — a plain column would have stacked the 8px dot as a third row of its own. */ body[data-view="dash"] .hdr-mkt{ display:grid;grid-template-columns:auto auto;grid-template-areas:"l l" "v d"; gap:5px 6px;align-items:center;justify-content:start; padding:0 0 0 18px;border-radius:0;background:none;border:0;border-inline-start:1px solid var(--d-line)} body[data-view="dash"] .hdr-mkt .hsl{grid-area:l} body[data-view="dash"] .hdr-mkt .hsv{grid-area:v} body[data-view="dash"] .hdr-mkt .dot{grid-area:d} body[data-view="dash"] .hdr-next{ display:flex;flex-direction:column;align-items:flex-start;gap:5px; padding-inline-start:18px;border-inline-start:1px solid var(--d-line)} body[data-view="dash"] .hdr-status .hsl{ font:700 8.5px/1 Archivo,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--d-muted2);white-space:nowrap} body[data-view="dash"] .hdr-status .hsv{ font:700 12px/1 'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--d-text)} body[data-view="dash"] .hdr-status .hsv.up{color:var(--d-pos)} body[data-view="dash"] .hdr-status .hsv.down{color:var(--d-neg)} body[data-view="dash"] .ha{ width:36px;height:36px;border-radius:9px;background:var(--d-bg2); border:1px solid var(--d-line);color:var(--d-muted);box-shadow:none} body[data-view="dash"] .ha:hover{color:var(--d-text);border-color:var(--d-line2);background:var(--d-bg2)} body[data-view="dash"] .ha-lang{width:auto;min-width:0;padding:0 10px;gap:7px} /* the pane's own floor assumed the OLD chrome (28px strip + 57px bar). It is 56 + 70 now, and a stale floor is a scrollbar that appears with nothing under it. */ body[data-view="dash"] #v-dash{min-height:calc(100dvh - 126px)} /* ── D5-D9 structural ports (2026-08-11): bridges that let REAL components live inside the design's markup ── */ /* the design's cards carry no card-level padding — children own their spacing (kills the legacy .vd2-market padding) */ #v-dash.agid #grid>.card{padding:0} #v-dash.agid #grid>.card>.ch h2{min-width:0;overflow:hidden;text-overflow:ellipsis} /* market overview: the project's premium coin badges inside the design's .moh circle; real sparks sized like .spark */ #v-dash.agid .moh s.mobdg{padding:0;overflow:hidden} #v-dash.agid .moh s.mobdg svg{width:100%;height:100%;display:block;border-radius:50%} #v-dash.agid .moc .hspark{height:46px;width:100%;margin-top:auto} #v-dash.agid .moc .hspark svg{width:100%;height:100%;display:block} #v-dash.agid .moc{cursor:pointer} #v-dash.agid .moc .hvol{font-style:normal} /* analysts: real avatar photos inside the design's .av circle */ #v-dash.agid .av{overflow:hidden} #v-dash.agid .av img{width:100%;height:100%;border-radius:50%;object-fit:cover} #v-dash.agid .anc{cursor:pointer} #v-dash.agid .nt.up{color:var(--pos)}#v-dash.agid .nt.dn{color:var(--neg)} @media (max-width:720px){#v-dash.agid .an{grid-template-columns:repeat(2,1fr)}} /* calendar: day separators + the event's real flag beside the design's currency chip + RTL header alignment */ #v-dash.agid tr.evday2 td{font:700 8.5px/1 Archivo;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);background:var(--bg2)} #v-dash.agid .cur svg,#v-dash.agid .cur img{width:16px;height:11px;border-radius:2px;display:block;flex:none} html[dir="rtl"] #v-dash.agid thead th{text-align:right} html[dir="rtl"] #v-dash.agid td.c{text-align:left} #v-dash.agid .ev-count.rel{color:var(--muted2)} /* session clock: the NOW line is positioned in px from the real track rect each second (never the prototype's 78px guess) */ #v-dash.agid #tl{direction:ltr} #v-dash.agid #now{left:0;margin-left:0} #v-dash.agid .sc .cd b{font:inherit} /* globe card: flat world raster stays as loading backdrop / reduced-motion surface; the canvas fills the design frame */ #v-dash.agid #globewrap .worldimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #v-dash.agid #globewrap .agid-globe{position:absolute;inset:0;width:100%;height:100%;border-radius:0} #v-dash.agid #rlist{max-height:calc(100% - 60px);overflow-y:auto;scrollbar-width:thin} @media (max-width:720px){#v-dash.agid #rlist{width:158px}} /* measured 6px page overflow at 1271px RTL: the six .atabs buttons refuse to shrink below min-content */ #v-dash.agid .atabs button{min-width:0} #v-dash.agid .sumrows b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%} /* legacy host-container layouts that would trap the design's DOM (measured: #tl squeezed into one cell of the old 4-col session grid; the radar into a 2-col gauge grid). Same id+class weight, later stylesheet wins. */ #v-dash.agid .vd2-sessionclock #dFeedSess{display:block} #v-dash.agid .vd2-volatility #dVolMonitor{display:block} @media(max-width:1180px){ #v-dash.agid .vd2-summary #dAISummary{display:flex;flex-direction:column;grid-template-columns:none} #v-dash.agid .vd2-volatility #dVolMonitor{display:block;grid-template-columns:none;height:auto} } /* the trio row: explicit zero-floor tracks — a grid whose columns can NEVER exceed its container (measured: the legacy vd2-top minmax floors overflowed the row by 12px at 1271 RTL) */ #v-dash.agid .vd2-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1fr);gap:12px;align-items:stretch} @media(max-width:1180px){#v-dash.agid .vd2-top{grid-template-columns:minmax(0,1fr)}} /* These are the only two dashboard visual stages with a dedicated light palette. Keep them in the platform's neutral white family: the former cream/brown stage made them look like a third theme beside the otherwise white dashboard. Dark mode and every other card remain untouched. */ html[data-theme="light"] #v-dash.agid #globewrap{background:radial-gradient(120% 90% at 56% 44%,#fff 0%,#f7f9fc 52%,#edf1f6 100%)} html[data-theme="light"] #v-dash.agid .core{background:radial-gradient(120% 90% at 50% 34%,#fff 0%,#f8fafc 58%,#eef2f7 100%)} html[data-theme="light"] #v-dash.agid .gbox{background:rgba(255,255,255,.94);border-color:#d7dbe4;box-shadow:0 10px 24px rgba(16,24,40,.10)} html[data-theme="light"] #v-dash.agid #rlist,html[data-theme="light"] #v-dash.agid #glegend{background:rgba(255,255,255,.94);border-color:#d7dbe4;box-shadow:0 10px 26px rgba(16,24,40,.10)} html[data-theme="light"] #v-dash.agid .globe-load{background:#f3f5f8} html[data-theme="light"] #v-dash.agid #gctl button{background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(16,24,40,.09)} html[data-theme="light"] #v-dash.agid .atabs button.on{background:var(--high);border-color:var(--high);color:var(--onAccent)} #v-dash.agid #gctl button{white-space:nowrap;flex:none;overflow:visible;min-width:max-content} /* 2026-08-11 owner screenshot round: ticker/emblem/chart-chrome fixes */ /* an honest-empty ticker collapses — never a hollow bordered frame; and it always spans the row */ #v-dash.agid .vd2>#ticker{width:100%;align-self:stretch} #v-dash.agid #ticker:empty{display:none} /* the gyroscope emblem fills the design's .atom slot */ #v-dash.agid .agid-gyro{width:100%;height:100%;display:block} #v-dash.agid volurr-mark{width:100%;height:100%;display:block;position:relative} /* reduced motion is handled where it works — the animation elements are not EMITTED (dash-agi.js); display:none never stops SMIL */ /* chart header: price + the two design .chg spans sit on one baseline with the reference gap */ #v-dash.agid #chPrice{display:flex;align-items:baseline;gap:7px} /* the design's chart tooltip lives on #dCandles (its own positioning context) */ /* [2026-08-11 owner: «شوف بطاقة شمعة»] and the plot must GROW into the card. The reference says #chart{flex:1;min-height:250px} — but this app's plot container is #dCandles, so that one rule was ported against an id that does not exist here and the plot was left at flex:0 1 auto with min-height:0. Its height then came from the SVG, whose height came from measuring the container: a self-referential collapse that settled at 176px inside a 603px card — MEASURED 278.6px of dead black below the OHLC footer, which is exactly what the owner photographed. The plot now takes the card's free space, and _chObserve()'s ResizeObserver redraws the series at the new height, so the candles are re-laid-out rather than stretched (the SVG carries preserveAspectRatio="none"). */ #v-dash.agid #dCandles{position:relative;flex:1;min-height:250px} /* the same miss, twice more, found by auditing every card for the gap between its own height and the sum of its children: the calendar sits beside the taller feed and stretches to match it, but nothing inside it grew — so 196.5px of black hung BELOW the footnote, which reads as a broken card rather than a short table. The body takes the slack and the footnote returns to the card's bottom edge, which is what the design's flex-column cards are shaped for. (#dHeat: 9.4px, same cause, and the market tiles absorb it evenly.) */ #v-dash.agid .vd2-calendar #dEvents{flex:1} #v-dash.agid .vd2-market #dHeat{flex:1} #v-dash.agid #dCandles .candles{display:block;width:100%;height:100%} /* ── 2026-08-11 adversarial-review fixes (verified findings, docs/dashboard/evidence/review-2026-08-11.json) ── */ /* the ticker clock: the JS emits .tclock/, the mechanical port had carried the reference's #clock selectors, so the clock block was rendering UNSTYLED (no border, wrong sizes) beside a fully-styled quote strip. */ #v-dash.agid .tclock{flex:none;margin-inline-start:auto;display:flex;flex-direction:column;justify-content:center; gap:5px;padding:0 18px;border-inline-start:1px solid var(--line);background:var(--panel)} #v-dash.agid .tclock b{font:700 15px/1 'JetBrains Mono',monospace;letter-spacing:.02em;color:var(--text)} #v-dash.agid .tclock u{text-decoration:none;font:500 10px/1 'JetBrains Mono',monospace;color:var(--muted2)} /* the impact pips carry a real tier: unlit pips must READ unlit — no `.off` rule existed, so a 1/3 tier drew as a full 3/3 (the reference's pips were static decoration; ours encode gold_impact). */ #v-dash.agid .impact s.off{background:rgba(var(--hair),.16);box-shadow:none} #v-dash.agid .impact s:nth-child(2),#v-dash.agid .impact s:nth-child(3){opacity:1} #v-dash.agid .impact s.off{opacity:.55} /* the trio cards live OUTSIDE #grid, so the design's zero-padding card reset never reached them — their .ch borders, .cfoot grid and .core radial were inset by the legacy padding instead of running edge to edge. */ #v-dash.agid .vd2-top>.card{padding:0} /* an empty weight cell keeps the row's grid column (no reading → no pips, but the column still aligns) */ #v-dash.agid .dr .w:empty{min-height:5px} /* [CONFIRMED, high] `hidden` on a card was inert: .card{display:flex} outranks the UA's [hidden]{display:none}, so the Strongest-Analysis card stayed visible (and empty) exactly when the engine had no reading to show. */ #v-dash.agid .card[hidden],#v-dash.agid [hidden]{display:none!important} /* the emblem canvas fills the design's .atom slot (the reference logo, ported geometry-for-geometry) */ /* the emblem responds to POINTER MOVE (parallax tilt) only — it cannot be dragged, and the card behind it navigates to the AGI room on click, so a grab cursor promised a drag that would have thrown the customer off the dashboard instead */ #v-dash.agid .agid-atom{width:100%;max-width:340px;aspect-ratio:1/1;padding:0;cursor:inherit} #v-dash.agid volurr-mark, #v-dash.agid volurr-mark canvas{width:100%;height:100%;display:block} /* the measurement-window tag that every % change now carries (24h · 60t · 6h · brk) — a quiet qualifier, never competing with the number it qualifies */ #v-dash.agid .tkw,#v-dash.agid .mvw{text-decoration:none;font:700 7px/1 'JetBrains Mono',monospace; letter-spacing:.08em;color:var(--muted2);margin-inline-start:5px;vertical-align:1px} /* [ULTRA audit, P4-7] touch targets. The visual size is the design's and does not change — a pseudo-element expands the HIT AREA to the 44px minimum on coarse pointers only, so nothing moves on a mouse-driven screen. */ @media (pointer:coarse){ #v-dash.agid .tab,#v-dash.agid .atabs button,#v-dash.agid .tfs button,#v-dash.agid .exp, #v-dash.agid .sel,#v-dash.agid #gctl button,#v-dash.agid .ch .lnk,#v-dash.agid .vd2-fs, #v-dash.agid .rr{position:relative} #v-dash.agid .tab::before,#v-dash.agid .atabs button::before,#v-dash.agid .tfs button::before, #v-dash.agid .exp::before,#v-dash.agid .sel::before,#v-dash.agid #gctl button::before, #v-dash.agid .ch .lnk::before,#v-dash.agid .vd2-fs::before,#v-dash.agid .rr::before{ content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%); min-width:44px;pointer-events:auto} } /* [ULTRA audit, P4-1] the calendar's own min-content in ENGLISH is 537.8px against 505px available at 1280 — 33px hard-clipped by the card's overflow:hidden, with no scrollbar to reveal it. (Arabic clears by 41px, so the owner's default language never met it, and his 1536 has 636px.) The table gets its own scroller instead of losing a column. */ #v-dash.agid #dEvents{overflow-x:auto;-webkit-overflow-scrolling:touch} #v-dash.agid #dEvents>table{min-width:100%} /* ── THE NAV COLUMN AND THE PAGE BEHIND IT ───────────────────────────────────────────────────── [2026-08-11 owner: «نفس الوان شريط عمود بس كلها فقط قليل اسود»] Measured, the mismatch was not a matter of taste: the sidebar ran linear-gradient(#0d1018,#0a0c12) and the page behind it #05070d — BLUE-blacks, blue channel highest — while every surface the design owns is a WARM black: the strip rgb(12,10,9) and the cards rgb(20,17,16), red highest. A cold column beside a warm terminal is the same defect that was fixed in the header earlier in this campaign, one element to the left. The column takes the design's own panel family and sits a HAIR darker than the strip, so it still reads as recessed rather than flush ("قليل اسود"). Scoped to the dashboard view — every other section keeps the app's blue chrome. */ /* [2026-08-11 owner, naming the colour: «كلها استخدام هذا حتا دصفحه دمج #02040B حتا واحد سياقه»] ONE GROUND FOR THE WHOLE FRAME. He picked the value himself, so it is used exactly — #02040B, no gradient on the column and no separate tone for the page, because a gradient or a second value is precisely what put a seam between them. The chrome (page · column · strip · header) is now a single continuous surface and the CARDS keep their own tone on top of it: that separation is what makes a card read as a card, and merging it away would flatten the terminal into one sheet. This supersedes the warm blacks committed an hour earlier — his colour, his call. */ /* [2026-08-11 owner: «مود ابيض شريط اعلا مو صحيح»] THE FRAME IS A TOKEN, NOT A LITERAL. Writing #02040B straight onto these five surfaces gave the dark theme exactly what he asked for and left the LIGHT theme with a black strip under a cream header — a hard-coded value cannot switch. The colour he chose is now the dark value of --frame, the light theme carries its own, and every surface reads the token. One declaration per theme; the ground is still one colour. */ /* [2026-08-11 owner: «مود ابيض من دشبورد نفس اقسام اخرا استعملا حتا لا فرق»] LIGHT MODE IS THE APP'S, NOT THE DASHBOARD'S. The dark ground is the owner's own #02040B and stays exactly that — but in light the dashboard had invented a warm cream of its own, so moving from Market WHY to the Dashboard changed the colour of the furniture. The light values here are now the app's own (base.css:27 --bg #eef0f4, .side white→#f2f4f8, .topbar rgba(248,250,252,.85), --line #e4e7ee): one platform, one light mode, no seam between sections. */ body[data-view="dash"]{ --frame:#02040B; --frame-line:rgba(255,236,216,.08); } html[data-theme="light"] body[data-view="dash"]{ --frame:#eef0f4; --frame-line:#e4e7ee; } body[data-view="dash"] .side{ background:var(--frame); border-inline-end:1px solid var(--frame-line); } body[data-view="dash"] .app{background:var(--frame)} body[data-view="dash"] .topbar{background:var(--frame)} #v-dash.agid #ticker,#v-dash.agid .tclock{background:var(--frame)} #v-dash.agid{--bg:var(--frame)} /* in light the column and the header are the APP's — the same white-to-#f2f4f8 column and the same translucent header every other section shows (base.css:63 and :50). Nothing dashboard-specific. */ html[data-theme="light"] body[data-view="dash"] .side{background:linear-gradient(180deg,#ffffff,#f2f4f8)} /* dashboard.css:1524 paints the calendar countdown the prototype's orange #e05a20 — 3.62:1 at 11.5px. The orange is gone from this dashboard anyway; this is the same amber --med carries. */ html[data-theme="light"] body[data-view="dash"] #v-dash.agid .vd2-calendar .ev-count{color:#9e5a0d} /* the strip is the app's ticker (base.css:69), not a dashboard tone */ html[data-theme="light"] #v-dash.agid #ticker, html[data-theme="light"] #v-dash.agid .tclock{background:linear-gradient(90deg,#ffffff,#f3f5f9)} html[data-theme="light"] body[data-view="dash"] .topbar{background:rgba(248,250,252,.85)} html[data-theme="light"] body[data-view="dash"] .app{background:transparent} /* [2026-08-11] THE MERGE HAD TO OUT-SPECIFY dashboard.css. That older stylesheet still paints the cards through `html:not([data-theme="light"]) #v-dash .vd2 article.card` and three more variants for the calendar and session-clock cards — all blue-black gradients from the pre-design era, all at a specificity the plain `#v-dash.agid .card` rule cannot reach, which is why the first attempt at merging them changed nothing on screen. Answered in kind, and once: every card, every variant, one ground. */ html:not([data-theme="light"]) body[data-view="dash"] #v-dash.agid .vd2 article.card, html:not([data-theme="light"]) body[data-view="dash"] #v-dash.agid .vd2 > .card, html:not([data-theme="light"]) body[data-view="dash"] #v-dash.agid .vd2 section.card, html:not([data-theme="light"]) body[data-view="dash"] #v-dash.agid .card{ background:var(--frame); border:1px solid var(--frame-line); } /* light keeps its cards WHITE against the cream frame — merging them there would erase the card entirely (white-on-white has no hairline to fall back on the way the dark ground does) */ html[data-theme="light"] body[data-view="dash"] #v-dash.agid .vd2 article.card, html[data-theme="light"] body[data-view="dash"] #v-dash.agid .vd2 > .card, html[data-theme="light"] body[data-view="dash"] #v-dash.agid .vd2 section.card, html[data-theme="light"] body[data-view="dash"] #v-dash.agid .card{ background:#ffffff; border:1px solid var(--frame-line); } /* ══ [2026-08-11] TINTED CELLS KEEP THEIR OWN GROUND ═════════════════════════════════════════════ .dv, .sc.live, .anc.pend and #ohlc .cta each paint a TRANSLUCENT tint through the `background` shorthand, which resets background-color to transparent. They sit in grids that draw their hairlines by filling with --line and letting a 1px gap show through, so the tint was floating over that fill: in light --line is a solid #e4e7ee and their labels fell to 3.9-4.1:1. Restoring the colour layer under the tint puts them back on the card (4.9-6.6:1) and leaves the tint itself, the gradients and the hairlines exactly as designed. Dark is unaffected — --line is rgba(255,236,216,.10) over #02040B there, which is already the card's own tone. */ #v-dash.agid .dv, #v-dash.agid .sc.live, #v-dash.agid .anc.pend, #v-dash.agid #ohlc .cta{background-color:var(--card)}