/* ═══ GradeOS LIGHT — the white-glass theme ══════════════════════════════════ Opt-in: add class="gx-light" to and link this file LAST in . Every rule is scoped to html.gx-light so it overrides each page's dark styles by specificity (no order dependence). Flips the design tokens (page-level AND gradeos-brand.css --gos-*), turns every dark panel into a frosted white-glass holder, floats the header, and keeps the holographic bg3d band (dark base set in gradeos-bg3d.js when html.gx-light). Dark theme is untouched. */ /* ── TOKENS ───────────────────────────────────────────────────────────────── */ html.gx-light{ /* page-level tokens (devices/inventory/lot/console/account/stats use these) */ --bg:#eef1f5; --panel:rgba(255,255,255,.62); --panel-2:rgba(255,255,255,.5); --panel2:rgba(255,255,255,.5); --panel3:rgba(255,255,255,.46); --surface:rgba(255,255,255,.58); /* elevated/card/row tokens many pages use — flip them so every token-driven box turns white instead of staying dark (inventory/marketplace/dashboard) */ --bg-card:rgba(255,255,255,.72); --bg-elevated:rgba(255,255,255,.7); --bg-elev:rgba(255,255,255,.7); --bg-row:rgba(255,255,255,.5); --bg-2:rgba(255,255,255,.6); --bg2:rgba(255,255,255,.6); --bg-3:rgba(255,255,255,.5); --bg3:rgba(255,255,255,.5); --card:rgba(255,255,255,.72); --card2:rgba(255,255,255,.6); --ink:#11151c; --well:rgba(18,24,38,.04); --border:rgba(18,24,38,.10); --border-s:rgba(18,24,38,.14); --border-strong:rgba(18,24,38,.17); --hair:rgba(18,24,38,.09); --hair-faint:rgba(18,24,38,.055); --text:#11151c; --dim:#454d5e; --text-dim:#454d5e; --faint:#79808f; --text-faint:#79808f; --accent:#5f7d00; --gA:#6b8e00; --green:#2f9e5b; --amber:#b07818; --red:#cf3b3b; --ice:#2f7fb8; /* gradeos-brand.css tokens */ --gos-bg:#eef1f5; --gos-bg-2:rgba(255,255,255,.7); --gos-bg-3:rgba(255,255,255,.6); --gos-text:#11151c; --gos-text-dim:#454d5e; --gos-text-faint:#79808f; --gos-border:rgba(18,24,38,.10); --gos-border-strong:rgba(18,24,38,.17); --gos-accent:#6b8e00; --gos-accent-2:#7da300; --gos-accent-glow:rgba(120,160,0,.4); /* white surface on ; body stays TRANSPARENT so the #gxBgPane shows through */ background: radial-gradient(ellipse 130% 80% at 50% -14%, #ffffff 0%, rgba(255,255,255,0) 56%), linear-gradient(180deg,#f5f7fa 0%,#e9edf2 62%,#e4e9ef 100%) !important; } html.gx-light #gxAtmo{display:none !important} html.gx-light body{background:transparent !important; color:var(--text)} /* page grids / dotted overlays → dark-on-light */ html.gx-light body::before, html.gx-light .page::before{ background-image: radial-gradient(circle,rgba(18,24,38,.05) 1px,transparent 1px), linear-gradient(rgba(18,24,38,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(18,24,38,.03) 1px,transparent 1px) !important; } /* ── NAV → floating glass bar pinned to the BOTTOM (like the command dock) ── This frees the top entirely so the masthead + holographic band never collide with a header, and dodges the injected-nav dark/overlap mess. Strong selectors (incl. nav#gos-app-nav which has an inline dark bg) so the white wins. ── */ html.gx-light nav#gos-app-nav, html.gx-light nav.gx-navstrip, html.gx-light nav:not(.gx-navclu), html.gx-light .nav, html.gx-light header.nav, html.gx-light .topbar{ position:fixed !important; bottom:14px !important; top:auto !important; left:16px !important; right:16px !important; transform:none !important; width:auto !important; max-width:none !important; z-index:60; border-radius:18px; height:56px !important; padding:0 22px !important; overflow-x:auto; overflow-y:hidden; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px; isolation:isolate; background:rgba(255,255,255,.74) !important; -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6); border:1px solid rgba(255,255,255,.82) !important; box-shadow:0 16px 44px rgba(20,32,56,.18), 0 0 0 1px rgba(200,255,0,.08), inset 0 1px 0 rgba(255,255,255,.95); } /* ── animated GradeOS lime border travelling around the bottom nav glass ── a conic-gradient ring masked to a 1.6px edge; @property animates the angle. */ @property --gxNavAng{syntax:"";inherits:false;initial-value:0deg} @keyframes gxNavBorder{to{--gxNavAng:360deg}} html.gx-light nav#gos-app-nav::before, html.gx-light nav.gx-navstrip::before, html.gx-light nav.gx-nav-bottom::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none; background:conic-gradient(from var(--gxNavAng,0deg) at 50% 50%, rgba(200,255,0,0) 0deg, rgba(200,255,0,0) 188deg, rgba(200,255,0,.95) 250deg, rgba(143,209,79,.65) 292deg, rgba(200,255,0,0) 340deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:gxNavBorder 3.6s linear infinite; } @media (prefers-reduced-motion:reduce){ html.gx-light nav.gx-nav-bottom::before{animation:none; background:conic-gradient(rgba(200,255,0,.4),transparent 60%)}} /* links spread across the full-width bar */ html.gx-light nav.gx-nav-bottom .gx-nl, html.gx-light nav.gx-nav-bottom > a{ flex:0 0 auto; padding:6px 12px !important; border-radius:9px; white-space:nowrap} html.gx-light nav.gx-nav-bottom .gx-nl:hover, html.gx-light nav.gx-nav-bottom > a:hover{ background:rgba(200,255,0,.14) !important; color:#39490a !important} html.gx-light nav a, html.gx-light nav#gos-app-nav a, html.gx-light .topbar a{color:#454d5e !important} html.gx-light nav a.active,html.gx-light nav a.is-active{color:#11151c !important} /* command dock floats just above the bottom nav so they don't overlap */ html.gx-light #gxcDock{bottom:80px !important} /* the holographic band becomes a slim DECORATIVE bottom strip on the white pages (a footer-grade flourish) so it never sits behind primary content / loose text — that collision is what made content read as a muddy dark box. */ html.gx-light #gxBgPane{height:34vh !important} /* the injected top nav STRIP (gradeos-nav.js, .gx-navstrip) is the real header on many pages — make it light glass IN PLACE (don't reposition → no overlap). */ html.gx-light .gx-navstrip, html.gx-light header.gx-navstrip, html.gx-light .gx-topbar{ background:rgba(255,255,255,.66) !important; border-color:rgba(255,255,255,.78) !important; border-bottom:1px solid rgba(18,24,38,.08) !important; -webkit-backdrop-filter:blur(20px) saturate(1.45); backdrop-filter:blur(20px) saturate(1.45); } html.gx-light .gx-navstrip a, html.gx-light .gx-navclu{background:transparent !important; position:static !important; transform:none !important} html.gx-light .gx-navstrip .gx-nl, html.gx-light .gx-navclu .gx-nl{color:#454d5e !important} html.gx-light .gx-navstrip .gx-nl.active,html.gx-light .gx-navclu .gx-nl.active, html.gx-light .gx-navstrip .gx-nl:hover,html.gx-light .gx-navclu .gx-nl:hover{color:#11151c !important} html.gx-light .gx-navstrip .gx-brand,html.gx-light .gx-brand{color:#11151c !important} html.gx-light .gx-kchip,html.gx-light .gx-navstrip .gx-kchip{background:rgba(18,24,38,.06) !important;border:1px solid rgba(18,24,38,.16) !important;color:#454d5e !important} html.gx-light .wrap, html.gx-light .page, html.gx-light .layout{padding-top:28px !important; padding-bottom:104px !important; position:relative; z-index:1} /* the spray-paint canvas (gradeos-spray.js) sits at z-index:0 behind content — keep masthead/body content above it so slogans only show through plain white */ html.gx-light main, html.gx-light header, html.gx-light .masthead, html.gx-light .gx-mast, html.gx-light section.hero{position:relative; z-index:1} html.gx-light #gxSprayCanvas{z-index:-1 !important} /* dark action/filter bars (lot-toolbar, filters, segmented bars) → light glass */ html.gx-light .lot-toolbar, html.gx-light .filters, html.gx-light .seg, html.gx-light .segmented, html.gx-light .tabbar{ background:rgba(255,255,255,.6) !important; border:1px solid rgba(255,255,255,.72) !important; -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 10px 28px rgba(20,32,56,.08); color:var(--text) !important; } html.gx-light .filter, html.gx-light .seg-btn, html.gx-light .tab{ background:rgba(18,24,38,.04) !important; color:#454d5e !important; border:1px solid rgba(18,24,38,.12) !important; } html.gx-light .filter.active, html.gx-light .seg-btn.active, html.gx-light .tab.active{background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important} /* keep bare credential/section text dark + readable over the band */ html.gx-light .gx-credbar span, html.gx-light .gx-rail span, html.gx-light .gx-kicker, html.gx-light .gx-mast-status{color:#2a313e !important} html.gx-light .sub,html.gx-light .page-sub,html.gx-light .lede{color:#454d5e !important} /* ── search / filter bars + inputs → light ────────────────────────────────── */ html.gx-light .inv-searchbar, html.gx-light .searchbar, html.gx-light .search-wrap{ background:rgba(255,255,255,.6) !important; border:1px solid rgba(255,255,255,.72) !important; -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 10px 28px rgba(20,32,56,.08); } html.gx-light input, html.gx-light .inv-search, html.gx-light .search input, html.gx-light textarea{ background:rgba(18,24,38,.04) !important; color:#11151c !important; border:1px solid rgba(18,24,38,.14) !important; } html.gx-light input::placeholder,html.gx-light textarea::placeholder{color:#8a909c !important} /* ── FROSTED WHITE-GLASS HOLDERS — ONLY true standalone panels ───────────── NB: deliberately NOT .grid / .stat / .gx-skel / generic containers — frosting those put a needless box around bare text (empty states, section bodies) and double-held cards. A holder wraps a panel of content, never loose text. ── */ html.gx-light .card, html.gx-light .tile, html.gx-light .kpis, html.gx-light .panel, html.gx-light .gos-card, html.gx-light .live-card, html.gx-light .toolbar, html.gx-light .lot-card, html.gx-light .inv-tile, html.gx-light .gate-card, html.gx-light .result-card, html.gx-light .device-tile, html.gx-light .device, html.gx-light .qr-card, html.gx-light .specimen, html.gx-light .unit-card, html.gx-light .grade-card, html.gx-light .stat-card{ background:rgba(255,255,255,.7) !important; -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(255,255,255,.78) !important; border-radius:14px; box-shadow:0 12px 32px rgba(20,32,56,.09), inset 0 1px 0 rgba(255,255,255,.85); color:var(--text); } /* device-card text → dark ink (model / price / serial / meta) so it reads on the white-glass card — this is exactly the "black text on dark card" bug. */ html.gx-light .device-tile *, html.gx-light .device *{color:#2a313e} html.gx-light .device-tile-model, html.gx-light .device-model{color:#11151c !important} html.gx-light .device-tile-meta, html.gx-light .device-tile-defects, html.gx-light .device-cond, html.gx-light .device-tile .mono, html.gx-light .device .mono{color:#5a6273 !important} /* the device-card thumbnail areas often have their own dark bg → neutral light */ html.gx-light .device-tile-thumb, html.gx-light .device-image{background:rgba(18,24,38,.04) !important} html.gx-light .kpis.minor{background:none !important; border:0 !important; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none} /* containers stay transparent (no box around their text/children) */ html.gx-light .grid, html.gx-light .empty, html.gx-light .devices, html.gx-light #devices, html.gx-light .gx-skel{background:transparent !important; background-image:none !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none} html.gx-light .grid, html.gx-light .devices, html.gx-light #devices{border:0 !important} /* inventory: the batch cards + skeleton-loader shimmers were dark gradients on white (the "black boxes" in the loading state) → white glass + light shimmer */ html.gx-light .batch{ background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.6)) !important; border:1px solid rgba(18,24,38,.1) !important; box-shadow:0 8px 22px rgba(20,32,56,.06) !important} html.gx-light .gx-sk, html.gx-light .skeleton, html.gx-light [class*="-sk"]:not([class*="-skel"]):not(.gx-skel){ background:linear-gradient(90deg,rgba(18,24,38,.05) 0%,rgba(18,24,38,.11) 50%,rgba(18,24,38,.05) 100%) !important} /* device-ledger (devices ≥980px): a single glass frame ONLY when it holds card rows (:has) — never an empty-state box; rows stay transparent inside it. */ @media (min-width:980px){ html.gx-light #grid:has(.card){ background:rgba(255,255,255,.55) !important; border:1px solid rgba(255,255,255,.7) !important; border-radius:14px; box-shadow:0 12px 32px rgba(20,32,56,.08); -webkit-backdrop-filter:blur(14px) saturate(1.25); backdrop-filter:blur(14px) saturate(1.25); } html.gx-light #grid .card{background:transparent !important; box-shadow:none !important; border-radius:0 !important; -webkit-backdrop-filter:none; backdrop-filter:none; border:0 !important; border-bottom:1px solid rgba(18,24,38,.08) !important} } html.gx-light .gx-ledger-head{color:#79808f} /* ── MASTHEAD (shared brand system) ───────────────────────────────────────── */ html.gx-light .gx-mast-meta{border-bottom-color:rgba(18,24,38,.1)} html.gx-light .gx-rail{border-top-color:rgba(18,24,38,.1)} html.gx-light .gx-rail span{border-left-color:rgba(18,24,38,.08)} html.gx-light .gx-kicker .gx-k-rule{background:linear-gradient(90deg,rgba(107,142,0,.5),rgba(18,24,38,.12) 34%,rgba(18,24,38,.04) 100%)} html.gx-light .gx-display{color:#11151c} html.gx-light .gx-machined{ -webkit-text-fill-color:transparent; color:#11151c; text-shadow:none; background-image:linear-gradient(170deg,#2c3340 0%,#11151c 32%,#3b4453 50%,#11151c 70%,#2c3340 100%) !important; -webkit-background-clip:text; background-clip:text; } html.gx-light .gx-ink, html.gx-light .serif-em, html.gx-light h1 em{color:#5f7d00} /* ── WHITE-THEME CLEANUP ─────────────────────────────────────────────────── Kill the dark emboss/drop-shadows on machined numbers (they read as a heavy smudge on white), drop the BLACK DNA showcase box (it can't flow into white + is redundant with the holographic band), and remove the duplicate custody rail. Net: clean, transparent, flows into the white canvas. */ html.gx-light .gx-machined, html.gx-light .kpi,html.gx-light .kpi *, html.gx-light .k-val,html.gx-light .kpi-val,html.gx-light .kval, html.gx-light #st-total,html.gx-light #st-value,html.gx-light #st-cond, html.gx-light [class*="machined"]{text-shadow:none !important; filter:none !important} /* stat/KPI numbers: solid dark ink, NO metal gradient / sweep animation (that shimmer ghosted on white). The big display headline keeps its dark metal. */ html.gx-light .kpi-value, html.gx-light .k-val, html.gx-light .kpi-value *{ -webkit-text-fill-color:#11151c !important; color:#11151c !important; background:none !important; background-image:none !important; text-shadow:none !important; animation:none !important; } html.gx-light .kpi-value .kpi-unit, html.gx-light .k-val small{-webkit-text-fill-color:#5a6273 !important; color:#5a6273 !important} /* the black DNA "live core" showcase → gone on the white theme (band carries the brand motion) */ html.gx-light .gx-dna-stage{display:none !important} /* duplicate nav chrome: the custody rail (CONSOLE·STATION·BENCH·PASSPORT) repeats the nav */ html.gx-light .gxc-rail, html.gx-light #gxCustodyRail{display:none !important} /* ── BUTTONS / PILLS ──────────────────────────────────────────────────────── */ html.gx-light .btn, html.gx-light .btn-hdr, html.gx-light .btn-export, html.gx-light .gos-btn, html.gx-light .act, html.gx-light .chip{ background:rgba(255,255,255,.55) !important; color:#454d5e !important; border:1px solid rgba(18,24,38,.16) !important; } html.gx-light .btn-hdr.primary, html.gx-light .chip.active, html.gx-light a.btn-hdr.primary{background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important} html.gx-light .pill{background:rgba(255,255,255,.5) !important; color:#454d5e !important; border-color:rgba(18,24,38,.16) !important} /* ── LIME HOVER (consistent across every interactive control) ────────────── The brand lime (#c8ff00) reads as a glow/border accent on white — every button, pill, chip, tab, filter and nav link lights up the SAME lime on hover with a smooth lift, so interaction feel is uniform site-wide. */ html.gx-light .btn:hover, html.gx-light .btn-hdr:hover, html.gx-light .btn-export:hover, html.gx-light .gos-btn:hover, html.gx-light .act:hover, html.gx-light .chip:hover, html.gx-light .pill:hover, html.gx-light .filter:hover, html.gx-light .seg-btn:hover, html.gx-light .tab:hover, html.gx-light .gx-kchip:hover, html.gx-light .gxc-kbtn:hover, html.gx-light .gxc-qa a:hover, html.gx-light button.icon-btn:hover, html.gx-light .btn-hdr.primary:hover, html.gx-light a.btn-hdr.primary:hover{ border-color:#c8ff00 !important; color:#39490a !important; background:linear-gradient(180deg,rgba(200,255,0,.16),rgba(200,255,0,.07)) !important; box-shadow:0 0 0 1px rgba(200,255,0,.55), 0 8px 22px rgba(160,210,0,.28), inset 0 1px 0 rgba(255,255,255,.7) !important; transform:translateY(-1px); transition:border-color .18s, box-shadow .22s, background .18s, transform .18s, color .18s !important} /* primary buttons already carry the fill — on hover deepen to full lime */ html.gx-light .btn-hdr.primary:hover, html.gx-light a.btn-hdr.primary:hover, html.gx-light .btn.primary:hover, html.gx-light .chip.active:hover{ background:linear-gradient(180deg,#d4ff3a,#c8ff00) !important; color:#1a1f05 !important; box-shadow:0 0 0 1px rgba(200,255,0,.7), 0 10px 26px rgba(160,210,0,.4) !important} /* give every control a base transition so the hover eases in even when not themed above */ html.gx-light .btn,html.gx-light .btn-hdr,html.gx-light .gos-btn,html.gx-light .act, html.gx-light .chip,html.gx-light .pill,html.gx-light .filter,html.gx-light .seg-btn, html.gx-light .tab{transition:border-color .18s, box-shadow .22s, background .18s, transform .18s, color .18s} /* ── MACHINED ODOMETER (console "the pulse" lifetime counter) ────────────── The dark "drum shading" (rgba(10,10,11)) read as a BLACK BOX around the number on white. Make the drum a soft WHITE curvature (digits fade into the page like a real wheel) and switch the digits to GREEN (per CJ). */ html.gx-light #gxOdometer, html.gx-light .gx-odo-face, html.gx-light .gx-odo-sep{color:#1f9e54 !important; -webkit-text-fill-color:#1f9e54 !important} html.gx-light .gx-odo-col::before{ background:linear-gradient(180deg, rgba(244,247,250,.97) 0%, rgba(244,247,250,.72) 16%, rgba(244,247,250,.22) 30%, rgba(244,247,250,0) 42%, rgba(244,247,250,0) 58%, rgba(244,247,250,.22) 70%, rgba(244,247,250,.72) 84%, rgba(244,247,250,.97) 100%) !important} html.gx-light .gx-odo-col::after{ background:linear-gradient(180deg,rgba(31,158,84,.16),transparent 30%,transparent 70%,rgba(31,158,84,.16)) !important} html.gx-light .gx-odo-boot{color:rgba(31,158,84,.3) !important} /* ── TELEMETRY RAIL — sleek makeover (matches the operator-console polish) ── crisp hairline dividers, a lime-accented lead cell, soft hover lift, and a thin lime top-edge so the rail reads as one machined instrument strip. */ html.gx-light .kpis#kpiStrip, html.gx-light .kpis{ position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6)) !important; border:1px solid rgba(18,24,38,.09) !important; border-radius:18px !important; box-shadow:0 16px 40px rgba(20,32,56,.08), inset 0 1px 0 rgba(255,255,255,.9) !important} html.gx-light .kpis::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,rgba(200,255,0,.55),transparent);opacity:.8} html.gx-light .kpis .kpi{position:relative; border-left:1px solid rgba(18,24,38,.07) !important; transition:background .25s, transform .25s cubic-bezier(.16,1,.3,1)} html.gx-light .kpis .kpi:first-child{border-left:none !important} html.gx-light .kpis .kpi:hover{background:rgba(200,255,0,.05) !important} html.gx-light .kpis .kpi.accent{background:linear-gradient(180deg,rgba(200,255,0,.07),transparent) !important} html.gx-light .kpis .kpi.accent::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px; border-radius:2px;background:linear-gradient(180deg,#c8ff00,rgba(200,255,0,.2))} html.gx-light .kpi-label{color:#6b7280 !important; letter-spacing:.16em} html.gx-light .kpi-sub{color:#8a909c !important} /* ── DEVICES BLEND INTO THE PAGE (no holder, transparent) ────────────────── Device photos are shot on a white studio sweep — `mix-blend-mode:multiply` drops that white into the white page so the device appears to float on the canvas with no box behind it. Applied to every device/render/viewer image. */ html.gx-light .hero-render img, html.gx-light .render-tile img, html.gx-light .device-image img, html.gx-light .device-tile-thumb img, html.gx-light .device-img img, html.gx-light .spin-stage img, html.gx-light .viewer img, html.gx-light #viewerImg, html.gx-light .vk-frame img, html.gx-light .surface-img img{ mix-blend-mode:multiply; background:transparent !important} /* and strip the white boxes / heavy shadows that used to hold them */ html.gx-light .hero-render, html.gx-light .render-tile, html.gx-light .device-image, html.gx-light .device-tile-thumb, html.gx-light .spin-stage, html.gx-light .viewer-stage{ background:transparent !important; box-shadow:none !important} /* ── DEVICE PASSPORT — remodel for the white theme ───────────────────────── Drop the black DNA hero band + the dark grade card; float the device with no holder; the additive helix can't glow on white so it's hidden and the sprayed "SEALED" slogan + a soft halo carry the brand motion on the sides. */ html.gx-light .grade-row{ background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.62)) !important; border:1px solid rgba(18,24,38,.1) !important; box-shadow:0 12px 30px rgba(20,32,56,.08) !important} html.gx-light .grade-sub{color:#5a6273 !important} /* the remaining dark passport boxes (action bar, signature card, reasoning) */ html.gx-light .actions{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.56)) !important; border:1px solid rgba(18,24,38,.1) !important} html.gx-light .sig-card{background:linear-gradient(120deg,rgba(200,255,0,.08),rgba(255,255,255,.62) 60%) !important; border:1px solid rgba(95,125,0,.22) !important} html.gx-light .sig-card .title{color:#11151c !important} html.gx-light .sig-card .hash{color:#5a6273 !important} html.gx-light .sig-card .hash strong{color:#11151c !important} html.gx-light .buyer{background:rgba(200,255,0,.06) !important; border:1px solid rgba(95,125,0,.2) !important; color:#2a313e !important} html.gx-light .reasoning{background:rgba(255,255,255,.6) !important; border:1px solid rgba(18,24,38,.1) !important; color:#454d5e !important} html.gx-light .reasoning .step{border-bottom-color:rgba(18,24,38,.08) !important} html.gx-light .hero-render .badge-360{background:rgba(255,255,255,.8) !important; color:#5f7d00 !important; border-color:rgba(95,125,0,.4) !important} html.gx-light .hero-render .badge-360:hover{background:rgba(200,255,0,.18) !important; color:#39490a !important} html.gx-light .pp-dna{background:transparent !important; border:none !important; min-height:0 !important; height:auto !important; margin-bottom:10px !important; overflow:visible !important} html.gx-light .pp-dna .gx-dna3d{display:none !important} html.gx-light .pp-dna-cap{position:static !important; transform:none !important; max-width:none !important; padding:0 !important} html.gx-light .pp-dna-title{color:#11151c !important} html.gx-light .pp-dna-title em{color:#5f7d00 !important} html.gx-light .pp-dna-eyebrow{color:#6b8e00 !important} html.gx-light .pp-dna-sub{color:#5a6273 !important} /* ── LOT "◆ SEALED" stamp — was clipped (right:-4px under overflow:hidden) and dark; bring it inside the card and ink it olive-lime so it reads on white. */ html.gx-light .lot-card[data-gx-sealed]::after{ right:9px !important; top:9px !important; color:#5f7d00 !important; background:rgba(200,255,0,.14) !important; border:1px solid rgba(95,125,0,.5) !important; text-shadow:none !important; box-shadow:0 2px 8px rgba(95,125,0,.16) !important} /* the device sits in a soft radial halo instead of a hard white card */ html.gx-light .hero-render::before{content:"";position:absolute;inset:6%;border-radius:50%; background:radial-gradient(ellipse at 50% 55%,rgba(95,125,0,.06),transparent 70%);z-index:0;pointer-events:none} /* ── GLASS OVERLAYS (condensed bar) + DOCK → light glass ──────────────────── */ html.gx-light .gx-glassbar{background:rgba(255,255,255,.7) !important} html.gx-light .gx-glassbar .gx-gb-title{color:#11151c} html.gx-light #gxcDock .gxc-glass{ background:rgba(255,255,255,.62) !important; border-color:rgba(255,255,255,.78) !important; box-shadow:0 12px 30px rgba(20,32,56,.14), inset 0 1px 0 rgba(255,255,255,.9); } html.gx-light #gxcDock .gxc-qa a{color:#3a4150} html.gx-light #gxcDock .gxc-kbtn{color:#2a313e} /* ── PRESENCE back button (shared, dark) → light glass ────────────────────── */ html.gx-light .gx-back, html.gx-light .gxp-back, html.gx-light [class*="back"]{--gx-back-bg:rgba(255,255,255,.62)} /* ── footers / hairlines / dim text already flip via tokens ───────────────── */ html.gx-light footer{border-top-color:rgba(18,24,38,.1)} @media (max-width:820px){ html.gx-light nav,html.gx-light .nav,html.gx-light header.nav{top:8px;width:calc(100% - 16px)} html.gx-light .wrap,html.gx-light .page,html.gx-light .layout{padding-top:78px !important} } /* ═══ NAV CHOREOGRAPHY (white theme, driven by gradeos-light.js) ═══════════════ GRADEOS brand dropped from the nav; the counter + ⌘K chip live in a fixed TOP bar; the nav itself collapses behind a bottom-left trigger and pops out on click. */ #gxTopBar{position:fixed;top:14px;right:16px;z-index:62;display:flex;align-items:center;gap:9px} #gxTopBar > *{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:11px; background:rgba(255,255,255,.68) !important;-webkit-backdrop-filter:blur(20px) saturate(1.45);backdrop-filter:blur(20px) saturate(1.45); border:1px solid rgba(255,255,255,.8) !important;box-shadow:0 10px 28px rgba(20,32,56,.12),inset 0 1px 0 rgba(255,255,255,.92); font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;white-space:nowrap;cursor:default} /* counter → green + styled (keeps its original live dot) */ #gxTopBar .gx-counter-green,#gxTopBar .gx-counter-green *{color:#1f9e54 !important;font-weight:700} #gxTopBar .gx-counter-green{box-shadow:0 10px 28px rgba(31,158,84,.12),inset 0 1px 0 rgba(255,255,255,.92);border-color:rgba(31,158,84,.28) !important} #gxTopBar .gx-counter-green:empty{display:none} /* a live green dot before the counter (the "original animation" it had in the nav) */ #gxTopBar .gx-counter-green:not(:empty)::before{content:"";width:7px;height:7px;border-radius:50%;background:#1fbf5e; box-shadow:0 0 0 0 rgba(31,191,94,.55);animation:gxCtrPulse 2.4s ease-in-out infinite;flex:none} @keyframes gxCtrPulse{0%{box-shadow:0 0 0 0 rgba(31,191,94,.5)}70%{box-shadow:0 0 0 7px rgba(31,191,94,0)}100%{box-shadow:0 0 0 0 rgba(31,191,94,0)}} #gxTopBar .gx-kchip{cursor:pointer;color:#3a4150 !important}#gxTopBar .gx-kchip b{color:#5f7d00 !important} #gxTopBar .gx-kchip:hover{border-color:rgba(95,125,0,.45) !important;color:#11151c !important} /* ── PERSISTENT bottom nav (gradeos-light.js adds .gx-nav-bottom + re-homes the nav onto so fixed positioning hits the viewport, not the transformed body). A FULL-WIDTH glass bar that RUNS ACROSS the bottom with an animated GradeOS lime glow around the glass. No trigger/popup — that was the buggy part. */ html.gx-light #gxFbChip{left:auto !important; right:16px !important; bottom:74px !important} html.gx-light nav#gos-app-nav.gx-nav-bottom, html.gx-light nav.gx-nav-bottom{ position:fixed !important; left:16px !important; right:16px !important; bottom:16px !important; top:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; transform:none !important; height:56px !important; min-height:56px !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:2px !important; padding:0 16px !important; overflow-x:auto !important; overflow-y:hidden !important; border-radius:18px !important; z-index:60; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; background:rgba(255,255,255,.74) !important; -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); border:1px solid rgba(255,255,255,.82) !important; animation:gxNavGlow 3s ease-in-out infinite} @keyframes gxNavGlow{ 0%,100%{box-shadow:0 16px 40px rgba(20,32,56,.14), 0 0 0 1px rgba(200,255,0,.3), 0 0 18px rgba(200,255,0,.12)} 50%{box-shadow:0 18px 44px rgba(20,32,56,.16), 0 0 0 1.6px rgba(200,255,0,.6), 0 0 36px rgba(200,255,0,.34)}} /* a lime sweep running along the top edge of the bar */ html.gx-light nav.gx-nav-bottom::after{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(200,255,0,.85),transparent);background-size:40% 100%; animation:gxNavSweep 2.6s linear infinite;pointer-events:none} @keyframes gxNavSweep{0%{background-position:-40% 0}100%{background-position:140% 0}} /* links flow HORIZONTALLY across the bar */ html.gx-light nav.gx-nav-bottom .gx-nl, html.gx-light nav.gx-nav-bottom > a, html.gx-light nav.gx-nav-bottom #gxBack, html.gx-light nav.gx-nav-bottom .gx-back{ display:inline-flex !important; align-items:center; width:auto !important; flex:none !important; padding:8px 13px !important; border-radius:10px !important; text-align:center !important; color:#454d5e !important; white-space:nowrap; transition:background .16s,color .16s !important} html.gx-light nav.gx-nav-bottom .gx-nl:hover, html.gx-light nav.gx-nav-bottom > a:hover{background:rgba(200,255,0,.16) !important; color:#3a4d00 !important} html.gx-light nav.gx-nav-bottom .gx-nl.gx-on, html.gx-light nav.gx-nav-bottom .gx-nl.active{background:rgba(95,125,0,.12) !important; color:#11151c !important} /* defensive: drop any brand mark that lives INSIDE the nav (scoped to nav only, so the page masthead kicker brand is untouched) — covers timing where gradeos-nav.js injects the brand after gradeos-light.js runs. */ html.gx-light nav.gx-nav-bottom .gx-brand, html.gx-light nav.gx-nav-bottom .brand{display:none !important} /* ═══ CROSS-PAGE CONSISTENCY — every dark holding box → white glass ════════════ Per-page fixes weren't propagating because each page names its dark boxes differently. This converts the remaining offenders SITE-WIDE so every page matches console.html: the ⌘K palette, inventory metrics + terminal, the marketplace cards, device-tile action strips, and device-image shading. */ /* ── COMMAND PALETTE (⌘K, gradeos-command.js is shared → fixes it on every page) ── */ html.gx-light #gxcOverlay, html.gx-light .gxc-overlay{background:rgba(228,233,240,.5) !important; -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2)} html.gx-light .gxc-panel{ background:rgba(255,255,255,.85) !important; border:1px solid rgba(255,255,255,.92) !important; -webkit-backdrop-filter:blur(30px) saturate(1.5); backdrop-filter:blur(30px) saturate(1.5); box-shadow:0 30px 80px rgba(20,32,56,.22), inset 0 1px 0 rgba(255,255,255,.95) !important} html.gx-light .gxc-in input{color:#11151c !important} html.gx-light .gxc-in input::placeholder{color:#8a909c !important} html.gx-light .gxc-sec{color:#8a909c !important} html.gx-light .gxc-it{color:#2a313e !important} html.gx-light .gxc-it .gxc-sub,html.gx-light .gxc-sub,html.gx-light .gxc-hint{color:#79808f !important} html.gx-light .gxc-it[aria-selected="true"]{background:rgba(200,255,0,.18) !important; color:#11151c !important; box-shadow:inset 0 0 0 1px rgba(95,125,0,.4) !important} html.gx-light .gxc-kbd,html.gx-light .gxc-esc,html.gx-light .gxc-it kbd{ background:rgba(18,24,38,.05) !important; color:#5a6273 !important; border-color:rgba(18,24,38,.14) !important} /* ── INVENTORY: metric cards + the "INVENTORY · LIVE" terminal window ── */ html.gx-light .metric{ background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.62)) !important; border:1px solid rgba(18,24,38,.1) !important; box-shadow:0 12px 30px rgba(20,32,56,.07) !important} html.gx-light .metric-value{color:#11151c !important} html.gx-light .metric-label{color:#6b7280 !important} html.gx-light .hero-frame{background:rgba(255,255,255,.7) !important; border:1px solid rgba(18,24,38,.1) !important; box-shadow:0 24px 60px rgba(20,32,56,.12) !important} html.gx-light .hero-chrome{background:rgba(248,250,252,.82) !important; border-bottom:1px solid rgba(18,24,38,.08) !important} html.gx-light .hero-body{background:rgba(255,255,255,.5) !important} html.gx-light .hero-amount,html.gx-light .hero-h,html.gx-light .hero-frame .gx-machined{ color:#11151c !important; -webkit-text-fill-color:#11151c !important; background:none !important} /* ── device-tile action strip (PASSPORT / LABEL / QR) → light glass ── */ html.gx-light .tile-actions{background:rgba(255,255,255,.66) !important; border-top:1px solid rgba(18,24,38,.08) !important} html.gx-light .tile-act{background:rgba(18,24,38,.05) !important; color:#454d5e !important; border:1px solid rgba(18,24,38,.12) !important} html.gx-light .tile-act.primary,html.gx-light .tile-actions .tile-act:first-child{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important} /* ── MARKETPLACE: sold-cascade card + cross-list composer + dev rows ── */ html.gx-light .hero-flow,html.gx-light .composer,html.gx-light .dev-row{ background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.58)) !important; border:1px solid rgba(18,24,38,.1) !important; box-shadow:0 12px 30px rgba(20,32,56,.07) !important} html.gx-light .cmp-url,html.gx-light .cmp-price,html.gx-light .composer input{ background:rgba(18,24,38,.04) !important; color:#11151c !important; border-color:rgba(18,24,38,.14) !important} html.gx-light .composer .chan,html.gx-light .chan-pill,html.gx-light .composer .pill{ background:rgba(255,255,255,.6) !important; color:#454d5e !important; border:1px solid rgba(18,24,38,.14) !important} /* ── DEVICE IMAGES: consistent across the grid (kill shadow variance) ── uniform multiply blend + normalising filter so every photographed device reads the same regardless of how it was lit; the holder drops its own drop-shadow. */ html.gx-light .tile-thumb,html.gx-light .dev-thumb,html.gx-light .card-thumb{ background:#fff !important; box-shadow:none !important} html.gx-light .tile-thumb img,html.gx-light .dev-thumb img,html.gx-light .card-thumb img, html.gx-light .card img{mix-blend-mode:multiply; filter:contrast(1.04) brightness(1.02) saturate(.98); object-fit:contain !important} /* ── TELEMETRY RAIL spans the full content width ── */ html.gx-light .kpis#kpiStrip,html.gx-light .kpis{width:100% !important; max-width:none !important} /* ═══ READABILITY + BUTTONS + GRADES + LOADING (CJ round) ══════════════════════ */ /* ── 1 · WHITE-ON-WHITE text: force a dark base color on every converted box so any inherited white text becomes readable (accents keep their own colors) ── */ html.gx-light .grade-row, html.gx-light .grade-row .grade-label, html.gx-light .grade-label, html.gx-light .metric, html.gx-light .hero-flow, html.gx-light .composer, html.gx-light .dev-row, html.gx-light .hero-body, html.gx-light .hero-frame, html.gx-light .gxc-panel, html.gx-light .sig-card, html.gx-light .actions, html.gx-light .reasoning, html.gx-light .buyer, html.gx-light .card, html.gx-light .tile, html.gx-light .panel, html.gx-light .gos-card, html.gx-light .result-card, html.gx-light .gate-card, html.gx-light .lot-card, html.gx-light .device-tile, html.gx-light .device, html.gx-light .specimen, html.gx-light .stat-card{ color:#11151c} html.gx-light .grade-label, html.gx-light .dev-row .title, html.gx-light .composer label, html.gx-light .hero-flow *:not([class*="flag"]):not([class*="sold"]):not([class*="accent"]){color:#2a313e} /* generic hardcoded near-white text inside content → dark (defensive sweep) */ html.gx-light .card-title, html.gx-light .tile-title, html.gx-light .row-title, html.gx-light .item-title, html.gx-light .name, html.gx-light .label-strong{color:#11151c !important} /* ── 2 · TELEMETRY RAIL across the FULL screen (edge to edge) ── center a 100vw element on the viewport regardless of its padded container, and clip any sub-pixel/scrollbar overflow so it never makes a h-scrollbar. */ html.gx-light body{overflow-x:clip} /* the telemetry rail lives in the RIGHT column of a 2-col `.gx-rail` grid → collapse that grid to one column so the rail spans the full width, then bleed it to the page edges with the canonical full-bleed margins. */ html.gx-light .gx-rail:has(.kpis){display:block !important} html.gx-light .kpis#kpiStrip, html.gx-light .kpis{ width:100% !important; max-width:none !important; transform:none !important; left:auto !important; margin:0 !important; border-radius:0 !important} /* NO negative-margin bleed on phones: a fixed -20px overshot pages with 16px padding (console) and clipped the first KPI off the viewport edge, and width:100% doesn't grow with the bleed, so it also read asymmetric. The base rule's margin:0 keeps the rail symmetric edge-to-padding on phones. */ /* ── 3 · ALL BUTTONS → glass/transparent (grade letters are the exception below) ── */ html.gx-light button:not(.gxnt-i):not(#gxNavTrigger):not(.seg):not(.gx-odo-col), html.gx-light .btn, html.gx-light .btn-hdr, html.gx-light .btn-export, html.gx-light .gos-btn, html.gx-light .act, html.gx-light .chip, html.gx-light .pill, html.gx-light .tile-act, html.gx-light .cmp-btn, html.gx-light .seg-btn, html.gx-light .tab, html.gx-light .filter, html.gx-light a.btn, html.gx-light a.btn-hdr, html.gx-light .composer .chan{ background:rgba(255,255,255,.4) !important; -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border:1px solid rgba(255,255,255,.6) !important; color:#2a313e !important; box-shadow:0 6px 18px rgba(20,32,56,.06), inset 0 1px 0 rgba(255,255,255,.7) !important} /* make every button IDENTICAL to the operator-console standard: glass PILL + JetBrains Mono uppercase. Shape/type only — sizes stay per-button. */ html.gx-light .btn, html.gx-light .btn-hdr, html.gx-light .btn-export, html.gx-light .gos-btn, html.gx-light .act, html.gx-light .chip, html.gx-light .pill, html.gx-light .cmp-btn, html.gx-light .tile-act, html.gx-light button:not(.gxnt-i):not(#gxNavTrigger):not(.seg):not(.gx-odo-col):not(.tab-btn):not(.gxc-it){ border-radius:999px !important; font-family:'JetBrains Mono',ui-monospace,monospace !important; text-transform:uppercase !important; letter-spacing:.13em !important; font-weight:600 !important; display:inline-flex; align-items:center; justify-content:center; gap:7px} /* primary / active actions → lime-tinted glass (still glass, just signalled) */ html.gx-light .btn.primary, html.gx-light .btn-hdr.primary, html.gx-light a.btn-hdr.primary, html.gx-light .btn.go, html.gx-light .chip.active, html.gx-light .tile-act.primary, html.gx-light .filter.active, html.gx-light .seg-btn.active, html.gx-light .tab.active, html.gx-light .composer .chan.on, html.gx-light .cross-list, html.gx-light .btn-primary{ background:linear-gradient(180deg,rgba(200,255,0,.34),rgba(200,255,0,.2)) !important; border:1px solid rgba(200,255,0,.6) !important; color:#2a3a00 !important; box-shadow:0 6px 20px rgba(160,210,0,.2), inset 0 1px 0 rgba(255,255,255,.5) !important} /* ── 4 · GRADE LETTERS fully FILLED (the one exception to glass) ── */ html.gx-light .device-tile-grade, html.gx-light .grade, html.gx-light .grade-badge, html.gx-light .card-grade, html.gx-light .tile-grade-badge{ border:none !important; font-weight:800 !important; -webkit-text-fill-color:initial} html.gx-light .device-tile-grade.A, html.gx-light .grade.A, html.gx-light .grade-badge.A, html.gx-light .device-tile-grade.BN, html.gx-light .grade.BN, html.gx-light .card-grade.A{ background:#c8ff00 !important; color:#1a1f05 !important; border-color:#c8ff00 !important} html.gx-light .device-tile-grade.B, html.gx-light .grade.B, html.gx-light .grade-badge.B, html.gx-light .card-grade.B{ background:#8fd14f !important; color:#10210a !important} html.gx-light .device-tile-grade.C, html.gx-light .grade.C, html.gx-light .grade-badge.C, html.gx-light .card-grade.C{ background:#e6b800 !important; color:#231c00 !important} html.gx-light .device-tile-grade.D, html.gx-light .grade.D, html.gx-light .grade-badge.D, html.gx-light .card-grade.D{ background:#e08a3c !important; color:#fff !important} html.gx-light .device-tile-grade.F, html.gx-light .grade.F, html.gx-light .grade-badge.F, html.gx-light .card-grade.F{ background:#ff5d5d !important; color:#fff !important} /* ── 5 · LOADING shimmer — neutral light sweep (no rainbow, per CJ) ── */ @keyframes gxShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} html.gx-light .gx-sk, html.gx-light .skeleton{ background:linear-gradient(100deg,rgba(18,24,38,.045) 30%,rgba(18,24,38,.1) 50%,rgba(18,24,38,.045) 70%) !important; background-size:200% 100% !important; animation:gxShimmer 1.6s linear infinite !important} /* ── 6 · REMOVE redundant chrome: the floating command DOCK duplicates the nav (its Bench/Inventory/Console icons) AND the top-bar ⌘K chip (its Command btn). The ⌘K palette still opens from the top-bar chip + the keyboard shortcut. ── */ html.gx-light #gxcDock{display:none !important} /* ── 7 · DEVICE THUMBNAIL — opaque white plate, neutral phone, QR sits BESIDE the device (in-flow, never clipped by the thumb's overflow). ── */ html.gx-light .device-tile-thumb, html.gx-light .tile-thumb, html.gx-light .device-image, html.gx-light .dev-thumb, html.gx-light .card-thumb{ background:#ffffff !important; gap:7%; overflow:hidden} html.gx-light .device-tile-thumb::before, html.gx-light .device-tile-thumb::after, html.gx-light .tile-thumb::before, html.gx-light .tile-thumb::after{ background:none !important; content:none !important} /* kill any dark stage backdrop */ html.gx-light .gx-phone-tpl{width:30%; min-width:54px; max-width:84px; flex:none} html.gx-light .gx-tile-qr{position:static !important; right:auto !important; bottom:auto !important; width:30% !important; min-width:46px; max-width:74px; flex:none; aspect-ratio:1 !important; background:#fff !important; padding:5px; border-radius:8px; border:1px solid rgba(18,24,38,.1); box-shadow:0 4px 12px rgba(20,32,56,.12); mix-blend-mode:normal !important; filter:none !important} /* ═══ DEVICE THUMBNAILS → uniform PHONE TEMPLATE + passport QR (CJ choice) ═══════ Real device photos vary with lighting/shadow; replace them with a consistent phone silhouette (injected by gradeos-devicecard.js) and drop the device's scannable passport QR in the corner — every tile reads identical. */ html.gx-light .device-tile-thumb, html.gx-light .tile-thumb, html.gx-light .device-image, html.gx-light .dev-thumb, html.gx-light .card-thumb{ position:relative !important; overflow:hidden; background:linear-gradient(160deg,#f7f9fc,#eceff4) !important; display:flex !important; align-items:center; justify-content:center} /* hide the inconsistent real photo (kept in the DOM for the 360 viewer link) */ html.gx-light .device-tile-thumb > img:not(.gx-tile-qr), html.gx-light .tile-thumb > img:not(.gx-tile-qr), html.gx-light .device-image > img:not(.gx-tile-qr), html.gx-light .dev-thumb > img:not(.gx-tile-qr), html.gx-light .card-thumb > img:not(.gx-tile-qr){display:none !important} /* the consistent phone silhouette */ html.gx-light .gx-phone-tpl{display:block; width:32%; max-width:92px; aspect-ratio:64/128; filter:drop-shadow(0 8px 18px rgba(20,32,56,.1)); pointer-events:none} html.gx-light .gx-phone-tpl svg{display:block; width:100%; height:100%} /* the passport QR — dropped in the corner, "next to" the device */ /* QR sits IN-FLOW beside the phone (never clipped by the thumb's overflow) */ html.gx-light .gx-tile-qr{position:static !important; right:auto !important; bottom:auto !important; width:30% !important; max-width:74px; min-width:46px; height:auto !important; aspect-ratio:1 !important; flex:none; display:block !important; background:#fff !important; padding:5px; border-radius:8px; box-shadow:0 4px 12px rgba(20,32,56,.12); border:1px solid rgba(18,24,38,.1); mix-blend-mode:normal !important; filter:none !important; image-rendering:pixelated} /* ═══ PREMIUM ENTERPRISE PASS — coordinate grid + glassmorphism + smoothing ═════ Funding-ready "enterprise cyberpunk": a precise technical coordinate grid base, heavy frosted-glass tiles that float over it (and over the bottom topographic mesh), crisp 1px glass borders, and smooth antialiased type. */ /* smooth, crisp type everywhere */ html.gx-light body, html.gx-light .wrap, html.gx-light .page, html.gx-light .layout{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility} /* PRECISE COORDINATE GRID — fine minor lines (26px) + stronger major lines (130px), like a CAD blueprint. Replaces the soft dotted overlay. */ html.gx-light body::before, html.gx-light .page::before, html.gx-light .layout::before{ background-image: linear-gradient(rgba(18,24,38,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(18,24,38,.05) 1px, transparent 1px), linear-gradient(rgba(18,24,38,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(18,24,38,.022) 1px, transparent 1px) !important; background-size:130px 130px, 130px 130px, 26px 26px, 26px 26px !important; background-position:0 0 !important; } /* HEAVY FROSTED GLASS TILES — more transparent so the grid + mesh read THROUGH them (true glassmorphism), heavier blur, crisp 1px edge + inner highlight. */ html.gx-light .card, html.gx-light .tile, html.gx-light .kpis, html.gx-light .panel, html.gx-light .gos-card, html.gx-light .live-card, html.gx-light .lot-card, html.gx-light .inv-tile, html.gx-light .gate-card, html.gx-light .result-card, html.gx-light .device-tile, html.gx-light .device, html.gx-light .metric, html.gx-light .stat-card, html.gx-light .hero-flow, html.gx-light .composer, html.gx-light .specimen, html.gx-light .qr-card, html.gx-light .grade-card{ background:rgba(255,255,255,.54) !important; -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); border:1px solid rgba(255,255,255,.72) !important; box-shadow:0 16px 42px rgba(20,32,56,.1), inset 0 1px 0 rgba(255,255,255,.92), inset 0 0 0 1px rgba(255,255,255,.05) !important; } /* a hairline lime top-edge on key panels = the chartreuse status accent */ html.gx-light .kpis::after, html.gx-light .panel.accent::after{content:none} /* ── REPLACED the off-brand blue/purple topographic mesh with an on-brand animated depth field (gradeos-bgfield.js — the slate+lime proof constellation). Hide the old #gxBgPane terrain entirely on the white theme. */ html.gx-light #gxBgPane{display:none !important} /* ═══ DIRECTORY → pops out of a glass button (CJ: hide the nav, pop on click) ════ The full-width bottom nav is HIDDEN (slid below the viewport) until the glass DIRECTORY button is tapped; then it slides up and displays as the full bar. Id-qualified so it beats the base `nav#gos-app-nav{transform:none}` rule. */ html.gx-light nav#gos-app-nav.gx-nav-bottom, html.gx-light nav.gx-navstrip.gx-nav-bottom, html.gx-light nav.gx-nav-bottom{ transform:translateY(155%) !important; opacity:0; pointer-events:none; transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease !important} html.gx-light nav#gos-app-nav.gx-nav-bottom.gx-nav-open, html.gx-light nav.gx-navstrip.gx-nav-bottom.gx-nav-open, html.gx-light nav.gx-nav-bottom.gx-nav-open{ transform:translateY(0) !important; opacity:1; pointer-events:auto} /* the glass DIRECTORY button — bottom-centre, matches the button standard */ #gxNavTrigger{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:61; cursor:pointer; display:inline-flex; align-items:center; gap:11px; height:46px; padding:0 22px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#2a313e; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); border:1px solid rgba(255,255,255,.72); box-shadow:0 12px 30px rgba(20,32,56,.16), inset 0 1px 0 rgba(255,255,255,.92); transition:transform .26s cubic-bezier(.16,1,.3,1), opacity .26s, border-color .2s, box-shadow .2s} #gxNavTrigger:hover{border-color:#c8ff00; color:#39490a; box-shadow:0 0 0 1px rgba(200,255,0,.55), 0 12px 30px rgba(160,210,0,.26), inset 0 1px 0 rgba(255,255,255,.92); transform:translateX(-50%) translateY(-2px)} #gxNavTrigger.hidden{opacity:0; pointer-events:none; transform:translateX(-50%) translateY(16px)} #gxNavTrigger .gxnt-ico{display:inline-flex; flex-direction:column; gap:3px} #gxNavTrigger .gxnt-ico i{display:block; width:15px; height:1.8px; border-radius:2px; background:currentColor} #gxNavTrigger b{font-weight:600}