:root{ --bg:#0B0B0D; --panel:#131316; --panel-2:#1A1A1E; --border:#26262B; --text:#F2F2F0; --text-dim:#9A9AA1; --red:#E14A3B; --gold:#C9A646; --green:#3CB878; --blue:#4C8DFF; --purple:#A66CE0; --cyan:#3DC9D8; --orange:#E8804A; --silver:#9AA0A8; --radius:14px; } /* Light theme — same OID brand colors (red/gold/green stay identical for brand consistency), only the neutral surface/text scale flips. Applied via [data-theme="light"] on , toggled by the header theme selector; "System" mode sets this attribute automatically based on prefers-color-scheme and stays in sync if the OS changes. */ html[data-theme="light"]{ --bg:#F5F5F3; --panel:#FFFFFF; --panel-2:#F0F0EE; --border:#DDDDDA; --text:#16161A; --text-dim:#6B6B70; } html[data-theme="light"] body{-webkit-font-smoothing:auto;} *{margin:0;padding:0;box-sizing:border-box;} /* [hidden] must always win — without this, elements with their own `display` rule (like .fws-shell{display:grid}) can out-cascade the browser's default [hidden]{display:none}, since both have equal specificity and author CSS loads after the UA stylesheet. */ [hidden]{display:none !important;} body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;} /* Custom scrollbars everywhere — thin and dark instead of the browser's default thick/white ones, which clashed badly with the dark theme on scrollable panels (Watchlist, Recent Week History, Market Explorer results, etc). */ ::-webkit-scrollbar{width:7px;height:7px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} ::-webkit-scrollbar-thumb:hover{background:var(--gold);} *{scrollbar-width:thin;scrollbar-color:var(--border) transparent;} /* Core OID color utilities — used platform-wide (Dashboard, Business, Sports, Membership, everywhere). These went missing during an earlier edit; restoring them fixes every "text still shows white" report across the whole app, not just the Dashboard hero. */ .c-red{color:var(--red);} .c-gold{color:var(--gold);} .c-green{color:var(--green);} /* ===== HEADER ===== */ .fws-header{ /* FIX (2026-08-15): rebuilt from flex+flex-wrap to a genuine CSS Grid with named areas. flex-wrap (Round 6) reduced but did not eliminate overlap — user's screenshots confirmed collision persisted. Grid areas are structurally different: each zone (logo/mantra/utils) is assigned to an explicit, named region of the layout, which CANNOT overlap another named region by definition — there's no flex-math edge case where content can collide, because grid placement isn't computed from available remaining space the way flex-wrap is. At the width where all 3 zones genuinely can't fit on one line, the grid switches to 3 explicit stacked rows (one zone per row) rather than attempting a wrapped reflow that can still visually collide mid-transition. */ display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo mantra utils"; align-items:center;column-gap:20px; padding:14px 28px;border-bottom:1px solid var(--border); position:fixed;top:0;left:0;right:0;background:var(--bg);z-index:100; } /* Below 1450px, the 3-column single row genuinely doesn't have room for logo + mantra + the full utils zone (world clock + quote + 5 buttons) together — switch to 3 explicit stacked rows instead of letting them compete for horizontal space at all. This threshold is wider than the old 1150px mantra-hide breakpoint on purpose: mantra now stays visible by stacking, rather than disappearing. */ @media(max-width:1449px){ .fws-header{grid-template-columns:1fr;grid-template-areas:"logo" "mantra" "utils";row-gap:10px;padding:14px 20px;} } .header-logo{grid-area:logo;display:flex;align-items:baseline;gap:10px;min-width:0;flex-shrink:0;} /* .hero-bg-echo-soft sets position:relative, which would silently break the header's fixed positioning (position is a single-value property) — restore fixed explicitly after the shared class applies. Also override overflow:hidden back to visible — the header's language/theme dropdown menus render below the header's own box and would otherwise be clipped invisible when opened. The ray-sweep layer (::after) relies on that clipping to look right, so it's hidden here; the glow layer (::before) doesn't need clipping and still shows normally. */ .fws-header.hero-bg-echo-soft{position:fixed;top:0;left:0;right:0;overflow:visible;} .fws-header.hero-bg-echo-soft::after{display:none;} .header-logo span{font-size:24px;font-weight:800;letter-spacing:1px;} .logo-f{color:var(--red);} .logo-w{color:var(--gold);} .logo-s{color:var(--green);} .logo-meta{display:flex;flex-direction:column;line-height:1.2;margin-left:4px;} .logo-sub{font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--text-dim);} .logo-tag{font-size:8.5px;letter-spacing:1.5px;color:#5A5A60;} .header-mantra{grid-area:mantra;display:flex;align-items:center;justify-content:center;gap:20px;font-size:12px;color:var(--text-dim);transition:opacity .3s ease;flex-wrap:wrap;min-width:0;} .mantra-item{display:flex;align-items:center;gap:6px;white-space:nowrap;} .mantra-item i{font-size:12px;} .mantra-item strong{font-weight:800;} /* header-mantra no longer force-hidden at 1150px (Round 6 removed this once already per an earlier explicit request that it stay visible) — grid stacking above handles narrow widths instead. */ /* FIX (2026-08-15): flex-wrap added here too — header-utils on its own (world-clock + daily-motivation + lang/theme/share/notif/avatar buttons) is a lot of non-shrinking content; without its own wrap safety net it could still overflow/collide even after the header's own wrap kicks in. */ .header-utils{grid-area:utils;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;min-width:0;} @media(max-width:1449px){ .header-utils{justify-content:center;} } .world-clock{ display:flex;flex-direction:column;gap:5px;background:var(--panel-2);border:1px solid var(--border); padding:7px 14px;border-radius:10px;font-size:11px;color:var(--text-dim); } .wc-row{display:flex;align-items:center;gap:12px;} .wc-item{display:flex;align-items:center;gap:5px;white-space:nowrap;} .wc-item i{font-size:10px;color:var(--gold);} .wc-item strong{color:var(--text);font-weight:700;} .wc-sessions{display:flex;gap:10px;font-size:9.5px;} .wc-session{display:flex;align-items:center;gap:4px;white-space:nowrap;} .wc-session-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .wc-session-dot.session-open{background:var(--green);box-shadow:0 0 5px var(--green);} .wc-session-dot.session-soon{background:var(--gold);box-shadow:0 0 5px var(--gold);} .wc-session-dot.session-closed{background:#4A4A50;} .daily-motivation{font-size:11px;color:var(--text-dim);font-style:italic;white-space:nowrap;transition:opacity .3s ease;} .header-lang-select .util-btn{position:relative;} .header-lang-select .custom-select-list{right:0;left:auto;width:150px;} .notif-btn{position:relative;} .notif-count{ position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff; font-size:9px;font-weight:800;width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center;border:2px solid var(--bg); } @media(max-width:1150px){ .daily-motivation{display:none;} } @media(max-width:1150px){ .world-clock{display:none;} } .util-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:8px 13px;border-radius:10px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px;} .util-btn:hover{border-color:var(--gold);} .avatar-btn{width:36px;height:36px;border-radius:50%;background:var(--panel-2);border:1px solid var(--gold);color:var(--text);cursor:pointer;position:relative;} .avatar-status-dot{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);} .avatar-status-dot.on{background:var(--green);} .avatar-status-dot.off{background:#6a6a6e;} /* ===== IDENTITY STRIP ===== */ .identity-strip{ display:flex;gap:0;border-bottom:1px solid var(--border); background:var(--panel);position:fixed;top:var(--header-height, 65px);left:0;right:0;z-index:95; flex-wrap:wrap; } .identity-item{ flex:1 1 0;min-width:200px;background:none;border:none;border-right:1px solid var(--border); color:var(--text-dim);padding:11px 18px;display:flex;align-items:center;gap:9px; cursor:pointer;font-size:12.5px;transition:background .15s;justify-content:flex-start; } .identity-item:last-of-type{border-right:none;} .identity-item:hover{background:var(--panel-2);} .id-dot{width:7px;height:7px;border-radius:50%;background:#4A4A50;flex-shrink:0;} .id-text{display:flex;flex-direction:column;gap:1px;} .id-name{font-weight:700;color:var(--text);white-space:nowrap;font-size:13px;} .id-name sup{font-size:8px;} .id-role{color:var(--text-dim);white-space:nowrap;font-weight:700;font-size:10px;letter-spacing:.5px;text-transform:uppercase;} .identity-item[data-system="tradingview"] .id-role{color:var(--red);} .identity-item[data-system="brain"] .id-role{color:var(--gold);} .identity-item[data-system="mentor"] .id-role{color:var(--green);} .id-status{ margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.5px; color:var(--text-dim);white-space:nowrap;text-transform:uppercase; } /* Permanent per-system identity colors (design language: TradingView stays neutral always; Brain is always yellow-tinted; Mentor always green-tinted. "is-active" only intensifies glow — it never changes WHICH color a system is. */ .identity-item[data-system="tradingview"] i:not(.id-caret){color:#9AA0A8;} .identity-item[data-system="brain"] i:not(.id-caret){color:var(--gold);} .identity-item[data-system="mentor"] i:not(.id-caret){color:var(--green);} .identity-item[data-system="tradingview"].is-active .id-dot{background:var(--green);box-shadow:0 0 6px var(--green);} .identity-item[data-system="tradingview"].is-active .id-status{color:var(--green);} .identity-item[data-system="brain"].is-active .id-dot{background:var(--gold);box-shadow:0 0 8px var(--gold);} .identity-item[data-system="brain"].is-active .id-status{color:var(--gold);} .identity-item[data-system="brain"].is-active i:not(.id-caret){text-shadow:0 0 10px rgba(201,166,70,.5);} .identity-item[data-system="mentor"].is-active .id-dot{background:var(--green);box-shadow:0 0 8px var(--green);} .identity-item[data-system="mentor"].is-active .id-status{color:var(--green);} .identity-item[data-system="mentor"].is-active i:not(.id-caret){text-shadow:0 0 10px rgba(60,184,120,.5);} .identity-item.is-supporting .id-status{color:var(--text)!important;} .id-caret{font-size:9px;color:#5A5A60;margin-left:6px;transition:transform .15s;} .identity-item[aria-expanded="true"] .id-caret{transform:rotate(180deg);} .identity-explain{ width:100%;padding:12px 20px;font-size:12.5px;color:var(--text-dim); background:var(--panel-2);border-top:1px solid var(--border);line-height:1.5; } .identity-explain strong{color:var(--gold);} /* ===== SHELL / SIDEBAR ===== */ /* FIX (2026-08-14): .fws-shell no longer needs grid-template-columns to reserve sidebar space — now that .fws-sidebar is position:fixed, it's removed from normal document flow entirely (fixed elements never participate in grid/flex layout), so the old 230px grid column would otherwise sit empty. Sidebar spacing is now handled directly via .fws-main's margin-left instead. padding-top here clears the fixed header+identity-strip (110px total) so content doesn't start underneath them. */ /* FIX (2026-08-14): replaced the hardcoded 110px with a CSS variable set precisely by JS (measureFixedHeaderHeight() in shell.js) — user confirmed the OID status row was still clipped under the fixed header, meaning the real combined rendered height of header + identity-strip genuinely isn't exactly 110px (font metrics, icon sizing, and content wrapping all affect this in ways a hardcoded guess can't reliably match). Measuring the real DOM height on load removes the guesswork entirely. 110px stays as a fallback for the brief moment before JS runs. */ .fws-shell{padding-top:var(--fixed-top-height, 110px);min-height:100vh;} .fws-sidebar{ border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;gap:2px; /* FIX (2026-08-14): switched from position:sticky to position:fixed — sticky was confirmed NOT holding on scroll (user screenshot showed nav already scrolled out of view while still near the top of page content). Fixed pins directly to the viewport regardless of any parent container's properties, the same fix applied to the header above. */ position:fixed;top:var(--fixed-top-height, 110px);left:0;width:230px;height:calc(100vh - var(--fixed-top-height, 110px));overflow-y:auto;z-index:90; background:var(--bg);transition:width .2s ease; } /* FIX (2026-08-14): sidebar collapse toggle — desktop only (mobile/ tablet have their own off-canvas drawer + close button already). Collapsed state reuses the exact icon-only nav styling already built for the small-laptop breakpoint, rather than a second pattern. */ .sidebar-collapse-toggle{ display:none;background:none;border:1px solid var(--border);color:var(--text-dim); width:26px;height:26px;border-radius:7px;cursor:pointer;align-self:flex-end;margin-bottom:10px; } @media(min-width:1151px){ .sidebar-collapse-toggle{display:flex;align-items:center;justify-content:center;} } body.sidebar-collapsed .fws-sidebar{width:68px;padding:18px 8px;align-items:center;} body.sidebar-collapsed .fws-sidebar .nav-item{justify-content:center;padding:10px;font-size:0;gap:0;} body.sidebar-collapsed .fws-sidebar .nav-item i{font-size:17px;} body.sidebar-collapsed .fws-sidebar .sidebar-upgrade{display:none;} body.sidebar-collapsed .fws-sidebar .sidebar-collapse-toggle{align-self:center;} body.sidebar-collapsed .fws-main{margin-left:68px;} .nav-item{ display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px; color:var(--text-dim);text-decoration:none;font-size:13.5px;font-weight:500;position:relative; } .nav-item i:first-child{width:15px;text-align:center;} .nav-item:hover{background:var(--panel-2);color:var(--text);} .nav-item.active{background:var(--panel-2);color:var(--red);border-left:3px solid var(--red);padding-left:10px;} .badge-new{background:var(--green);color:#04140B;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;margin-left:auto;} .nav-lock{margin-left:auto;font-size:10.5px;color:#5A5A60;} .sidebar-upgrade{margin-top:auto;background:linear-gradient(160deg,#1E1806,var(--panel-2));border:1px solid var(--gold);border-radius:var(--radius);padding:15px;text-align:center;} .sidebar-upgrade i{color:var(--gold);font-size:18px;margin-bottom:8px;} .sidebar-upgrade p{font-size:11.5px;color:var(--text-dim);margin-bottom:11px;line-height:1.4;} .btn-upgrade{width:100%;background:var(--red);color:#fff;border:none;padding:9px;border-radius:8px;font-weight:700;font-size:12.5px;cursor:pointer;} .btn-upgrade:hover{filter:brightness(1.1);} /* ===== MAIN / STUBS ===== */ /* FIX (2026-08-14): margin-left added to compensate for .fws-sidebar now being position:fixed (230px wide) — without this, main content would render underneath the fixed sidebar instead of beside it. */ .fws-main{padding:28px 36px;margin-left:230px;transition:margin-left .2s ease;} .section-stub h2{font-size:22px;margin-bottom:10px;} .section-stub p{color:var(--text-dim);font-size:14px;max-width:560px;line-height:1.6;} /* ===== DASHBOARD ===== */ .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;} .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;} .ai-mentor-close-mobile{display:none;margin-left:auto;background:none;border:1px solid var(--border);color:var(--text-dim);width:26px;height:26px;border-radius:7px;cursor:pointer;flex-shrink:0;} .ai-mentor-reopen-pill{display:none;background:var(--panel-2);border:1px solid var(--gold);color:var(--gold);padding:10px 16px;border-radius:10px;font-size:12.5px;font-weight:600;cursor:pointer;width:100%;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;} .card-head h4{font-size:11.5px;letter-spacing:1.3px;color:var(--text-dim);display:flex;align-items:center;gap:7px;} .card-head h4 i{color:var(--gold);} /* FIX (2026-08-24): Option A visual reorder — tradePanel displays above moToolbar without either block's actual DOM position changing. Both need explicit order values since default order is 0 for everyone; without this, source order (moToolbar first) would still win visually despite the flex container. */ .mo-controls-order-wrap{display:flex;flex-direction:column;} .mo-controls-order-wrap #moToolbar{order:1;} .mo-controls-order-wrap #tradePanel{order:2;margin-top:14px;} /* FIX (2026-08-24): compact "terminal control bar" restyle — scoped directly to #moToolbar since .mode-btn/.account-btn/.mkt-tab are confirmed used nowhere else on the page (verified via grep before scoping this way, so this can't have an unintended effect elsewhere). Smaller padding/font, tighter gaps — a professional, compact row rather than large individual buttons. */ #moToolbar{gap:10px;margin-bottom:12px;} #moToolbar .mode-toggle{padding:3px;gap:4px;} #moToolbar .mode-btn{padding:6px 10px;font-size:11.5px;gap:5px;} #moToolbar .account-btn{padding:6px 10px;font-size:11.5px;} #moToolbar .market-tabs{gap:4px;} #moToolbar .mkt-tab{padding:6px 10px;font-size:11px;} /* FIX (2026-08-24): Trading Controls collapsible toggle — collapsed by default per explicit instruction. State is made visually obvious via the ▸/▾ icon plus a label-text change (handled in JS), not just a subtle arrow alone, so users don't mistake "collapsed" for "removed." */ .trade-controls-toggle{ width:100%;background:none;border:none;color:var(--text);cursor:pointer; display:flex;align-items:center;gap:8px;padding:4px 0; font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700; } .trade-controls-toggle:hover{color:var(--gold);} #tradeControlsToggleIcon{color:var(--gold);font-size:13px;transition:transform .15s ease;} .mode-toggle{display:flex;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:4px;} /* FIX (2026-08-30): requested desktop layout - Auto/Manual (left), Demo/Real (middle), 8 Core Markets (right), all in one row within the same card. Order matches the existing HTML exactly, so this is purely a display change, no markup reordering needed. The existing max-width:768px rule below already stacks these back into a column on mobile/tablet - untouched, still applies correctly since it targets this same .dash-toolbar class. */ .dash-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .mode-btn{ background:none;border:1px solid transparent;color:var(--text-dim);padding:8px 14px;border-radius:8px; font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px; transition:all .2s ease; } /* FIX (2026-08-11): Auto and Manual mode looked nearly identical when active — only Auto got a real color change, Manual's "active" state was barely different from inactive. Now each mode has its own unmistakable color, border, and glow when active, so it's instantly clear which one you're in without reading the label. */ .mode-btn.active[data-mode="auto"]{background:rgba(201,166,70,.15);color:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(201,166,70,.25);} .mode-btn.active[data-mode="manual"]{background:rgba(60,184,120,.15);color:var(--green);border-color:var(--green);box-shadow:0 0 12px rgba(60,184,120,.25);} .tier-chip{background:rgba(201,166,70,.15);color:var(--gold);font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;letter-spacing:.5px;} .market-tabs{display:flex;gap:6px;flex-wrap:wrap;} .mkt-tab{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;} .mkt-tab.active{background:var(--gold);color:#0B0B0D;border-color:var(--gold);} .mkt-tab.tab-loading{opacity:.65;} .dash-grid{display:grid;grid-template-columns:205px 1fr 215px;gap:16px;margin-bottom:18px;} .live-dot{color:var(--green);font-size:10.5px;font-weight:700;} .ref-data-badge{ color:var(--text-dim);font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; background:var(--panel-2);padding:3px 9px;border-radius:10px;border:1px solid var(--border); } .dev-mode-badge{ color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; background:rgba(201,166,70,.12);padding:4px 10px;border-radius:10px;border:1px solid rgba(201,166,70,.4); margin-left:auto; } .pulse-list{list-style:none;display:flex;flex-direction:column;gap:12px;} /* Market Watchlist — expanded table (Symbol/Value/Change/Chg%/Open/High/Low/Prev) */ .wl-table-wrap{overflow-x:auto;margin-bottom:10px;} /* Sideeq AI™ panel — 100% native, pure interpretation readout */ .sb-market-label{font-size:12.5px;color:var(--text-dim);margin-bottom:14px;} .sb-market-label strong{color:var(--gold);font-weight:800;} .sb-fields{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:14px;} .sb-fields li{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);} .sb-fields li strong{font-size:12px;font-weight:700;text-align:right;} .sb-updated{font-size:10.5px;color:var(--text-dim);border-top:1px solid var(--border);padding-top:12px;} .sb-updated span{color:var(--text);font-weight:700;} /* Chart now hosts TradingView's own Watchlist + Details panels internally, so it needs more vertical room than before. */ .chart-mount-tall{height:460px;} .wl-table-scroll{max-height:420px;overflow-y:auto;} .wl-table-scroll thead th{position:sticky;top:0;background:var(--panel);z-index:1;} .wl-extra .wl-symbol{color:var(--text-dim);font-weight:700;} .tv-attrib{color:var(--text-dim);opacity:.7;} .wl-table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap;} .wl-table th{text-align:left;padding:8px 10px;color:var(--text-dim);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);} .wl-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text-dim);} .wl-table tr{cursor:pointer;transition:background .15s;} .wl-table tr:hover{background:var(--panel-2);} .wl-table tr.wl-active{background:rgba(201,166,70,.08);} .wl-table tr.wl-active .wl-symbol{color:var(--gold);} .wl-symbol{font-weight:800;color:var(--text);} .wl-up{color:var(--green);} .wl-down{color:var(--red);} .pulse-list li{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px;border-radius:8px;} .pulse-list li.wl-active{background:var(--panel-2);} .pulse-list strong{display:block;font-size:12.5px;} .pulse-list span{font-size:10.5px;color:var(--text-dim);} .pulse-val{text-align:right;font-weight:600;font-size:12.5px;} .pulse-val.up{color:var(--green);} .pulse-val.down{color:var(--red);} .pulse-val small{display:block;font-weight:500;font-size:10px;} .card-foot{margin-top:12px;font-size:10px;color:#5A5A60;} .tf-toggle{display:flex;gap:4px;flex-wrap:wrap;} .tf{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:10.5px;padding:5px 9px;border-radius:6px;cursor:pointer;} .tf.active{background:var(--gold);color:#0B0B0D;border-color:var(--gold);font-weight:700;} .chart-mount{height:460px;border-radius:10px;overflow:hidden;background:var(--panel-2);margin-bottom:12px;position:relative;} .chart-placeholder{color:#5A5A60;font-size:12px;} .chart-legend{display:flex;gap:18px;font-size:11px;color:var(--text-dim);flex-wrap:wrap;} .chart-legend i{margin-right:5px;} /* Custom watchlist (2026-07-27) — see HTML comment above #fwsWatchlist for why this isn't TradingView's own widget. Sits alongside the chart, same height, own scroll if needed. */ /* FWS Chart Engine™ drawing toolbar (2026-07-27) */ .fws-draw-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;} .draw-tool{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);font-size:11px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;} .draw-tool:hover{border-color:var(--gold);color:var(--text);} .draw-tool.active{background:var(--gold);border-color:var(--gold);color:#0B0B0D;} .draw-hint{font-size:10.5px;color:var(--text-dim);font-style:italic;} /* HSB™ live reaction zone — filled band, not just two lines (revised 2026-07-27). Absolutely positioned over the chart, top/height recomputed on every price update, pan/zoom, and resize since it isn't a native chart primitive. pointer-events:none so it never blocks chart interaction or the drawing tool's click handler. */ /* FIX (2026-08-22): HSB™ zone now reacts to the REAL calculated structure direction (SideeqAIEngine.calculateStructure — Bullish/ Bearish/Consolidating/Transition/Awaiting Confirmation), not a fixed color. Base rule below is the neutral/observation state (gold) — used whenever structure isn't confirmed bullish or bearish specifically, never guessed. */ #hsbZoneBand{position:absolute;left:0;right:60px;pointer-events:none;background:rgba(201,166,70,.18);border-top:2px solid rgba(201,166,70,.7);border-bottom:2px solid rgba(201,166,70,.7);z-index:2;} #hsbZoneBand .hsb-zone-label{position:absolute;left:8px;top:2px;font-size:9.5px;font-weight:700;color:var(--gold);letter-spacing:.3px;} #hsbZoneBand.hsb-bullish{background:rgba(31,174,107,.18);border-top-color:rgba(31,174,107,.7);border-bottom-color:rgba(31,174,107,.7);} #hsbZoneBand.hsb-bullish .hsb-zone-label{color:var(--green);} #hsbZoneBand.hsb-bearish{background:rgba(214,69,69,.18);border-top-color:rgba(214,69,69,.7);border-bottom-color:rgba(214,69,69,.7);} #hsbZoneBand.hsb-bearish .hsb-zone-label{color:var(--red);} /* Live status bar (2026-07-28) — a running UTC clock (always visible, ticks every second) that switches to showing the hovered candle's OHLC + time while the crosshair is over the chart. Purely cosmetic/ informational — never blocks chart interaction underneath it. */ .fws-chart-status-bar{ position:absolute;left:8px;bottom:6px;z-index:3;pointer-events:none; font-size:10.5px;font-family:'Courier New',monospace;color:var(--text-dim); background:rgba(19,19,22,.75);padding:3px 9px;border-radius:6px;letter-spacing:.3px; } .fws-chart-status-bar .ohlc-o{color:var(--text-dim);} .fws-chart-status-bar .ohlc-up{color:#1FAE6B;} .fws-chart-status-bar .ohlc-down{color:#D64545;} .symbol-info-mount{margin-bottom:10px;border-radius:10px;overflow:hidden;min-height:70px;background:var(--panel-2);} .stale-data-banner{ display:flex;align-items:center;gap:9px;background:rgba(201,166,70,.12);border:1px solid rgba(201,166,70,.4); color:var(--gold);font-size:12px;font-weight:600;padding:9px 14px;border-radius:8px;margin-bottom:10px; } #fwsChartLoadingOverlay{ position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background:rgba(19,19,22,.92);border-radius:10px; } .chart-loading-spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--gold);animation:fwsSpin .8s linear infinite;} @keyframes fwsSpin{to{transform:rotate(360deg);}} .chart-loading-title{font-size:14px;font-weight:700;color:var(--text);} .chart-loading-step{font-size:12px;color:var(--text-dim);} .chart-workspace-row{display:flex;gap:10px;margin-bottom:12px;} .chart-workspace-row .chart-mount{flex:1;min-width:0;margin-bottom:0;} .fws-watchlist{width:148px;flex-shrink:0;height:460px;overflow-y:auto;background:var(--panel-2);border-radius:10px;padding:6px;} .wl-row{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;} .wl-row:hover{background:var(--panel);} .wl-row.active{background:var(--panel);border-color:var(--gold);} .wl-symbol{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--text);} .wl-price{font-size:12.5px;font-weight:600;} .wl-meta{font-size:9.5px;color:var(--text-dim);} .tag-brain{display:inline-block;background:rgba(201,166,70,.12);color:var(--gold);font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;} .ai-reading-card h4{font-size:15px;margin:10px 0 12px;} .reading-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:14px;} .reading-list li{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);} .reading-list strong{font-size:12px;} .ai-note{font-size:11.5px;color:var(--text-dim);line-height:1.55;margin-bottom:14px;} .ai-note i{color:var(--gold);margin-right:4px;} .btn-outline{width:100%;background:none;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:8px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;} .btn-outline:hover{border-color:var(--gold);} .hist-card{margin-bottom:18px;} /* ===== MARKET OVERVIEW — Phase 1 additions ===== */ .current-market-strip{ display:flex;gap:22px;flex-wrap:wrap;align-items:center; background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:12px 20px;margin-bottom:16px;font-size:12px;color:var(--text-dim); } .cms-item{display:flex;align-items:center;gap:7px;white-space:nowrap;} .cms-item strong{font-size:12.5px;} .ai-conclusion{font-size:12px;color:var(--text-dim);line-height:1.55;margin-bottom:12px;} .ai-conclusion strong{color:var(--text);} .why-toggle{ background:none;border:1px solid var(--border);color:var(--gold); padding:7px 13px;border-radius:8px;font-size:11.5px;cursor:pointer; display:flex;align-items:center;gap:6px;margin-bottom:12px; } .why-toggle i{font-size:9px;transition:transform .2s;} .why-toggle.open i{transform:rotate(180deg);} .why-reasoning{background:var(--panel-2);border-radius:9px;padding:12px 14px;margin-bottom:14px;} .why-reasoning p{font-size:11.5px;color:var(--text-dim);line-height:1.55;} .ai-recommends{border-top:1px solid var(--border);margin-top:14px;padding-top:14px;} /* FWS Workspace Engine™ (2026-07-27) */ .workspace-engine-card{margin-bottom:16px;} .we-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .we-col h5{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--text-dim);text-transform:uppercase;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;} .btn-snapshot{font-size:10.5px;padding:6px 10px;width:auto;} .we-notes-list,.we-snapshot-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;margin-bottom:10px;} .we-empty{font-size:11.5px;color:var(--text-dim);font-style:italic;padding:6px 0;} .we-note{background:var(--panel-2);border-radius:8px;padding:9px 11px;position:relative;} .we-note p{font-size:12px;line-height:1.5;margin:0 22px 4px 0;} .we-note-meta{font-size:9.5px;color:var(--text-dim);} .we-note-delete{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:11px;padding:2px 5px;} .we-note-delete:hover{color:var(--red);} .we-note-input-row{display:flex;gap:8px;} .we-note-input-row input{flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--text);} .we-note-input-row button{background:var(--gold);color:#0B0B0D;border:none;border-radius:8px;padding:0 13px;cursor:pointer;font-weight:700;} .we-snapshot{background:var(--panel-2);border-radius:8px;padding:10px 12px;font-size:11.5px;} .we-snapshot-head{display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim);margin-bottom:6px;} .we-snapshot-row{display:flex;justify-content:space-between;padding:1px 0;} .we-snapshot-row span:first-child{color:var(--text-dim);} @media(max-width:700px){ .we-grid{grid-template-columns:1fr;} } /* Community module (2026-07-28) */ .community-philosophy{text-align:center;padding:22px 16px;border-radius:var(--radius);margin-bottom:16px;} .community-philosophy h2{margin-bottom:6px;} .community-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0;} .community-stat{background:var(--panel-2);border-radius:10px;padding:14px 8px;text-align:center;} .community-stat strong{display:block;font-size:22px;color:var(--gold);} .community-stat span{font-size:10.5px;color:var(--text-dim);} .founder-message-body{display:flex;gap:16px;align-items:flex-start;} .founder-photo-placeholder{ flex-shrink:0;width:64px;height:64px;border-radius:50%;background:var(--panel-2); display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-dim);border:2px solid var(--gold); } .announcement-list{display:flex;flex-direction:column;gap:12px;} .announcement-item{background:var(--panel-2);border-radius:10px;padding:12px 14px;} .announcement-pin{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--gold);margin-bottom:6px;} .discussion-room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .discussion-room{ background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:14px 8px; display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);font-size:11.5px;font-weight:600;cursor:pointer; } .discussion-room:hover{border-color:var(--gold);} .discussion-room i{font-size:17px;color:var(--gold);} .rank-ladder{display:flex;justify-content:space-between;gap:6px;margin:14px 0 8px;flex-wrap:wrap;} .rank-step{flex:1;min-width:80px;background:var(--panel-2);border-radius:10px;padding:12px 6px;text-align:center;} .rank-step i{display:block;font-size:16px;color:var(--gold);margin-bottom:6px;} .rank-step span{font-size:10.5px;font-weight:700;} .leaderboard-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;} .leaderboard-row{display:grid;grid-template-columns:32px 1fr auto auto;gap:10px;align-items:center;background:var(--panel-2);border-radius:8px;padding:9px 12px;font-size:12px;} .leaderboard-row .lb-rank{color:var(--gold);font-weight:700;} .leaderboard-row .lb-level{color:var(--text-dim);font-size:10.5px;} .leaderboard-row .lb-xp{color:var(--green);font-weight:700;font-size:11px;} .activity-item{padding:8px 4px;font-size:12px;color:var(--text-dim);border-bottom:1px solid var(--border);} .activity-item:last-child{border-bottom:none;} .activity-item i{color:var(--gold);margin-right:8px;font-size:8px;} .room-panel{background:var(--panel-2);border-radius:10px;padding:14px;margin-top:10px;} .room-posts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:220px;overflow-y:auto;} .room-post{background:var(--panel);border-radius:8px;padding:9px 11px;} .room-post-author{font-size:10.5px;font-weight:700;color:var(--gold);} .room-post p{font-size:12px;margin-top:3px;} .room-post-form{display:flex;gap:8px;} .room-post-form input{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--text);} .profile-modal-card{width:420px;max-width:90vw;} .profile-header{display:flex;gap:14px;align-items:center;margin-bottom:16px;} .profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-dim);border:2px solid var(--gold);flex-shrink:0;} .profile-header h3{margin-bottom:2px;} .profile-header .profile-country{font-size:11.5px;color:var(--text-dim);} .profile-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;} .profile-stat-row .community-stat strong{font-size:17px;} .profile-field{margin-bottom:12px;} .profile-field label{display:block;font-size:10px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;} .profile-field p{font-size:12.5px;} .profile-field input,.profile-field textarea{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12.5px;color:var(--text);font-family:inherit;} .profile-field textarea{resize:vertical;min-height:60px;} .profile-actions{display:flex;gap:8px;margin-top:14px;} /* Certificates module (2026-07-30) */ .progress-ring-row{display:flex;gap:20px;align-items:center;margin-bottom:12px;flex-wrap:wrap;} .progress-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;} .progress-ring{ width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:conic-gradient(var(--gold) calc(var(--pct)*1%), var(--panel-2) 0);font-weight:700;font-size:16px; } .progress-ring::before{content:'';position:absolute;} .progress-ring span{background:var(--panel);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .progress-ring-label{font-size:10px;color:var(--text-dim);text-align:center;} .xp-bar-track{background:var(--panel-2);border-radius:20px;height:10px;overflow:hidden;margin-top:8px;} .xp-bar-track.small{height:6px;flex:1;margin:0;} .xp-bar-fill{background:linear-gradient(90deg,var(--gold),#E8C868);height:100%;border-radius:20px;transition:width .4s;} .oid-journey-row{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap;} .oid-journey-step{flex:1;min-width:80px;background:var(--panel-2);border-radius:10px;padding:14px 8px;text-align:center;opacity:.55;} .oid-journey-step[data-status="done"]{opacity:1;border:1px solid var(--green);} .oid-journey-step[data-status="active"]{opacity:1;border:1px solid var(--gold);} .oid-journey-step i{display:block;font-size:16px;color:var(--gold);margin-bottom:6px;} .oid-journey-step span{font-size:10.5px;font-weight:700;} .methodology-list{display:flex;flex-direction:column;gap:10px;} .methodology-row{display:grid;grid-template-columns:110px 1fr 36px;gap:10px;align-items:center;font-size:11.5px;} .methodology-pct{color:var(--text-dim);text-align:right;font-size:10.5px;} .cert-card{background:var(--panel-2);border-radius:12px;padding:16px;margin-bottom:10px;border:1px solid var(--border);} .cert-card.locked{opacity:.6;} .cert-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .cert-card-head h5{font-size:13px;} .cert-verify-ok{background:rgba(31,174,107,.12);border:1px solid rgba(31,174,107,.4);border-radius:8px;padding:12px;font-size:12px;} .cert-verify-fail{background:rgba(214,69,69,.12);border:1px solid rgba(214,69,69,.4);border-radius:8px;padding:12px;font-size:12px;color:var(--red);} .cert-preview{background:linear-gradient(145deg,#0B0B0D,#1a1a1e);border:2px solid var(--gold);border-radius:14px;padding:28px 20px;text-align:center;} .cert-preview-logo{font-size:22px;font-weight:800;color:var(--gold);letter-spacing:2px;margin-bottom:10px;} .cert-preview-title{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;} .cert-preview-name{font-size:19px;font-weight:700;margin:10px 0 4px;color:var(--text);} .cert-preview-course{font-size:10.5px;color:var(--text-dim);} .cert-preview-course-name{font-size:15px;font-weight:700;color:var(--gold);margin:4px 0 16px;} .cert-preview-footer{display:flex;justify-content:space-between;font-size:9px;color:var(--text-dim);border-top:1px solid var(--border);padding-top:10px;flex-wrap:wrap;gap:6px;} .member-id-card{display:flex;gap:16px;align-items:center;} .member-id-info h3{margin-bottom:4px;} .member-id-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;} .community-stat-chip{background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:10.5px;font-weight:600;color:var(--gold);} .cert-preview{position:relative;} .cert-preview-seal{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:14px;opacity:.7;} .cert-preview-qr{margin:10px auto 14px;width:44px;height:44px;border:1px dashed var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:18px;} .lesson-content-body{font-size:13px;line-height:1.7;color:var(--text);white-space:pre-line;margin:14px 0;max-height:320px;overflow-y:auto;padding-right:6px;} .lesson-objectives{list-style:none;display:flex;flex-direction:column;gap:6px;margin:10px 0;} .lesson-objectives li{font-size:12px;color:var(--text-dim);padding-left:18px;position:relative;} .lesson-objectives li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;} .edu-course-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s;} .edu-course-card:hover{border-color:var(--gold);} .edu-course-card h5{font-size:13.5px;margin-bottom:4px;} .edu-course-card p{font-size:11.5px;color:var(--text-dim);} @media(max-width:700px){ .community-stats-row{grid-template-columns:repeat(2,1fr);} .discussion-room-grid{grid-template-columns:repeat(2,1fr);} .rank-ladder{flex-direction:column;} .founder-message-body{flex-direction:column;align-items:center;text-align:center;} .leaderboard-row{grid-template-columns:24px 1fr auto;} .leaderboard-row .lb-level{display:none;} } .mo-secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} .account-btns{display:flex;gap:8px;} .account-btn{ display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:11px;font-weight:700; text-decoration:none;border:1px solid var(--border);white-space:nowrap; } .account-btn i{font-size:7px;} .account-demo{color:var(--text-dim);} .account-demo i{color:var(--text-dim);} .account-real{color:var(--green);border-color:rgba(60,184,120,.35);} .account-real i{color:var(--green);} .fin-cal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;} .fin-cal-tab{ background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim); padding:7px 12px;border-radius:8px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:6px; } .fin-cal-tab.active{background:var(--gold);color:#0B0B0D;border-color:var(--gold);font-weight:700;} .soon-badge{background:rgba(201,166,70,.2);color:var(--gold);font-size:8px;padding:2px 6px;border-radius:8px;font-weight:800;text-transform:uppercase;} .fin-cal-tab.active .soon-badge{background:rgba(11,11,13,.25);color:#0B0B0D;} .fin-cal-soon{text-align:center;padding:36px 20px;color:var(--text-dim);} .fin-cal-soon i{font-size:22px;color:var(--gold);margin-bottom:12px;display:block;} .fin-cal-soon p{font-size:12px;max-width:480px;margin:0 auto;line-height:1.6;} /* FWS Core Markets Intelligence — native educational table */ .fws-markets-table-wrap{overflow-x:auto;margin-bottom:10px;} .fws-markets-table{width:100%;border-collapse:collapse;font-size:11.5px;white-space:nowrap;} .fws-markets-table th{ text-align:left;padding:9px 12px;color:var(--text-dim);font-size:10px;text-transform:uppercase; letter-spacing:.5px;border-bottom:1px solid var(--border); } .fws-markets-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);} .fws-cell-symbol{font-weight:800;} .fws-cell-insight{white-space:normal;min-width:260px;color:var(--text-dim);font-size:11px;} .fws-market-row{cursor:pointer;transition:background .15s;} .fws-market-row:hover{background:var(--panel-2);} .fws-market-row.fws-row-active{background:rgba(201,166,70,.08);} .fws-market-row.fws-row-active .fws-cell-symbol{color:var(--gold);} /* Status dot icons for AI Intelligence rows */ .reading-list-dots li span{display:flex;align-items:center;gap:8px;} .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;} .status-dot.dot-green{background:var(--green);box-shadow:0 0 5px var(--green);} .status-dot.dot-gold{background:var(--gold);box-shadow:0 0 5px var(--gold);} .status-dot.dot-orange{background:#E8804A;box-shadow:0 0 5px #E8804A;} /* RWD active step glows/pulses gently */ .rwd-step.rwd-pending{animation:rwdPulse 2.2s ease-in-out infinite;} @keyframes rwdPulse{ 0%,100%{box-shadow:0 0 0 rgba(201,166,70,0);} 50%{box-shadow:0 0 16px rgba(201,166,70,.5);} } /* Asset (market tab) buttons glow softly when selected */ .mkt-tab.active{box-shadow:0 0 14px rgba(201,166,70,.4);} .ai-mentor-actions{display:flex;gap:10px;} .ai-mentor-actions .btn-outline{flex:1;} @media(max-width:500px){ .ai-mentor-actions{flex-direction:column;} } .chart-head-controls{display:flex;align-items:center;gap:10px;} .focus-mode-btn{ background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim); width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center; } .focus-mode-btn:hover{border-color:var(--gold);color:var(--gold);} /* Focus Mode — hides everything except the chart, restores on exit */ /* Focus Mode — enlarges the WHOLE Market Overview into a spacious full-screen workspace. Only the left nav sidebar and the toolbar's mode/account controls hide (to reclaim width) — every section stays visible: chart, AI Intelligence, FWS Markets, Market Explorer, RWD, Checklist, Weekly Structure, Financial Calendar. Nothing disappears, it all just gets more room, like a dedicated dealing-desk screen. */ #marketOverviewStub.focus-mode #moToolbar .mode-toggle, #marketOverviewStub.focus-mode #moToolbar .account-btns, #marketOverviewStub.focus-mode #moToolbar .market-tabs{display:none;} #marketOverviewStub.focus-mode .chart-mount{height:640px;} #marketOverviewStub.focus-mode .fws-main{padding:32px 48px;margin-left:0;} .fws-shell:has(#marketOverviewStub.focus-mode) .fws-sidebar{display:none;} /* Blur+unlock preview — shows real value before asking users to pay */ .locked-panel{position:relative;} .locked-preview-blur{filter:blur(5px);opacity:.5;pointer-events:none;user-select:none;} .locked-overlay{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:20px;text-align:center;background:rgba(11,11,13,.55);border-radius:var(--radius); } /* Demo login state (see initAuthGate/applyAuthState in shell.js) — once logged in, every gated preview unblurs and its lock overlay disappears, matching the real production behavior this stands in for. */ body.fws-logged-in .locked-preview-blur{filter:none;opacity:1;pointer-events:auto;user-select:auto;} body.fws-logged-in .locked-overlay{display:none;} body.fws-logged-in .nav-lock{display:none;} .rwd-steps{display:flex;gap:10px;margin-bottom:12px;} .rwd-step{ flex:1;display:flex;flex-direction:column;align-items:center;gap:6px; background:var(--panel-2);border-radius:10px;padding:12px 8px;font-size:11px;font-weight:700;letter-spacing:.5px; } .rwd-step i{font-size:16px;} .rwd-step.rwd-done{color:var(--green);} .rwd-step.rwd-done i{color:var(--green);} .rwd-step.rwd-pending{color:var(--gold);} .rwd-step.rwd-pending i{color:var(--gold);} .rwd-current{font-size:12.5px;color:var(--text-dim);} .mo-checklist{list-style:none;display:flex;flex-direction:column;gap:11px;} .mo-checklist li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-dim);} .mo-checklist li i{font-size:14px;color:#4A4A50;} .mo-checklist li.mo-check-done{color:var(--text);} .mo-checklist li.mo-check-done i{color:var(--green);} @media(max-width:700px){ .mo-secondary-grid{grid-template-columns:1fr;} .current-market-strip{gap:14px;} } .hist-tabs{display:flex;gap:6px;flex-wrap:wrap;} .hist-tab{background:none;border:1px solid var(--border);color:var(--text-dim);padding:7px 12px;border-radius:8px;font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:6px;} .dev-reset-btn{margin-left:auto;color:var(--gold);border-color:rgba(201,166,70,.4);border-style:dashed;} .dev-reset-btn:hover{background:rgba(201,166,70,.1);} .hist-tab.active{background:var(--panel-2);color:var(--text);border-color:var(--gold);} .hist-tab i{font-size:9.5px;color:#5A5A60;} .hist-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-dim);} .hist-row-clickable{cursor:pointer;padding-left:10px;padding-right:10px;margin:0 -10px;border-radius:6px;transition:background .15s;} .hist-row-clickable:hover{background:var(--panel-2);} .hist-row-clickable.hist-row-active{background:rgba(201,166,70,.1);} .hist-row-clickable.hist-row-active span{color:var(--gold);font-weight:700;} /* Weekly Structure Intelligence — full-width stacked rows, label on top, fuller description below, edge-to-edge instead of a narrow label/value pair. Room for real explanation, not just a short tag. */ .wsi-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--border);} .wsi-row:last-of-type{border-bottom:none;} .wsi-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;} .wsi-row strong{font-size:14px;font-weight:700;text-align:right;} /* Weekly Structure Intelligence became a full-width standalone section (no longer confined to a 3-column grid cell) — without this, .hist-row's space-between stretches label/value to opposite edges of a very wide card, leaving a huge empty gap between them. Capping the row width keeps it reading like a compact data table. */ .hist-card .hist-panel .hist-row{max-width:640px;} .hist-row strong{color:var(--text);} .locked-panel{text-align:center;padding:26px 20px;} .lock-icon{font-size:22px;color:var(--gold);margin-bottom:12px;display:block;} .locked-panel p{font-size:12.5px;color:var(--text-dim);max-width:380px;margin:0 auto 16px;line-height:1.5;} .locked-panel .btn-upgrade{width:auto;padding:10px 22px;} .edu-disclaimer{font-size:11px;color:#5A5A60;text-align:center;padding-top:6px;} .edu-disclaimer i{color:var(--gold);margin-right:5px;} @media(max-width:1150px){ .dash-grid{grid-template-columns:1fr;} } /* ===== AI HUB ===== */ .hub-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-bottom:18px;} .hub-chat-card{display:flex;flex-direction:column;} .lang-select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-size:11.5px;padding:6px 10px;border-radius:8px;} .topic-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;} .chip{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);padding:8px 13px;border-radius:20px;font-size:12px;cursor:pointer;} .chip:hover{border-color:var(--gold);color:var(--text);} .chat-window{ background:var(--panel-2);border-radius:10px;padding:16px;min-height:520px;max-height:640px; overflow-y:auto;display:flex;flex-direction:column;gap:14px;margin-bottom:14px; } .chat-msg{max-width:80%;} .chat-msg p{font-size:13px;line-height:1.55;margin:0 0 8px;} .chat-msg p:last-child{margin-bottom:0;} .msg-tag{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text-dim);margin-bottom:5px;} .msg-body{padding:11px 14px;border-radius:14px;} .msg-ai{align-self:flex-start;} .msg-ai .msg-body{background:var(--panel);border:1px solid var(--border);border-top-left-radius:4px;} .msg-ai .msg-tag{color:var(--green);} /* User bubble matches the AI bubble's dark background + light text — previously a solid bright-gold fill with dark text, which reads as visually "softer"/less sharp than light-on-dark (a real contrast- direction perception effect, not a literal blur). Same visual weight now, distinguished by alignment + a gold accent border + tag color, closer to how ChatGPT differentiates bubbles subtly rather than with a jarring color block. */ .msg-user{align-self:flex-end;} .msg-user .msg-body{background:var(--panel);border:1px solid var(--gold);border-top-right-radius:4px;color:var(--text);font-weight:400;} .msg-user .msg-tag{text-align:right;color:var(--gold);} .msg-thinking .msg-body{color:var(--text-dim);font-style:italic;} /* AI reply markdown formatting (formatAIText) — headers/bold/lists rendered instead of showing raw #, ##, **, - symbols. */ .msg-body .ai-h1{font-size:15px;font-weight:800;color:var(--gold);margin:2px 0 8px;} .msg-body .ai-h2{font-size:13.5px;font-weight:700;color:var(--green);margin:10px 0 6px;} .msg-body .ai-h3{font-size:13px;font-weight:700;color:var(--text);margin:8px 0 5px;} .msg-body .ai-h1:first-child,.msg-body .ai-h2:first-child,.msg-body .ai-h3:first-child{margin-top:0;} .msg-body strong{color:var(--gold);font-weight:700;} .msg-body .ai-list{margin:4px 0 8px;padding-left:18px;} .msg-body .ai-list li{font-size:13px;line-height:1.55;margin-bottom:4px;} .chat-input-row{display:flex;gap:10px;} .chat-input-row input{ flex:1;background:var(--panel-2);border:1px solid var(--border);color:var(--text); padding:12px 16px;border-radius:10px;font-size:13px; } .chat-input-row .btn-primary{width:46px;padding:0;display:flex;align-items:center;justify-content:center;} .hub-progress-card .panel-block h4{font-size:11px;letter-spacing:1.3px;color:var(--text-dim);margin-bottom:12px;} .tier-badge{font-size:13px;font-weight:700;margin-bottom:10px;} .progress-track{background:var(--panel-2);border-radius:20px;height:7px;overflow:hidden;margin-bottom:8px;} .progress-fill{background:linear-gradient(90deg,var(--red),var(--gold),var(--green));height:100%;border-radius:20px;} .progress-label{font-size:11px;color:var(--text-dim);} .next-lesson{display:flex;gap:12px;align-items:flex-start;} .next-lesson i{color:var(--gold);font-size:16px;margin-top:2px;} .next-lesson strong{display:block;font-size:12.5px;margin-bottom:3px;} .next-lesson span{font-size:11px;color:var(--text-dim);} .recent-topics{list-style:none;display:flex;flex-direction:column;gap:9px;} .recent-topics li{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:8px;} .recent-topics i{font-size:10px;color:#5A5A60;} .hub-progress-card hr{border:none;border-top:1px solid var(--border);margin:16px 0;} @media(max-width:1150px){ .hub-grid{grid-template-columns:1fr;} } /* ===== EDUCATION ===== */ .ladder-card{margin-bottom:20px;overflow-x:auto;} .ladder{display:flex;align-items:center;min-width:640px;padding:8px 4px;} .ladder-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:88px;text-align:center;} .ladder-dot{width:14px;height:14px;border-radius:50%;background:var(--panel-2);border:2px solid var(--border);} .ladder-step.current .ladder-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(201,166,70,.6);} .ladder-step strong{font-size:11.5px;} .ladder-step.current strong{color:var(--gold);} .ladder-step small{font-size:9.5px;color:var(--text-dim);} .ladder-step.current small{color:var(--green);font-weight:700;} .ladder-line{flex:1;height:2px;background:var(--border);min-width:20px;} .edu-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;} .edu-cats{display:flex;gap:6px;flex-wrap:wrap;} .edu-cat{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);padding:8px 14px;border-radius:8px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;} .edu-cat.active{background:var(--panel-2);color:var(--text);border-color:var(--gold);} .edu-cat i{font-size:9.5px;color:#5A5A60;} .edu-search{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:9px 14px;min-width:220px;} .edu-search i{color:var(--text-dim);font-size:12px;} .edu-search input{background:none;border:none;color:var(--text);font-size:12.5px;outline:none;width:100%;} .course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;} .course-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;} .course-card:hover{border-color:var(--gold);} .course-card i{font-size:20px;margin-bottom:10px;} .course-card h5{font-size:13px;margin-bottom:6px;line-height:1.35;} .course-meta{font-size:10.5px;color:var(--text-dim);} .locked-grid{grid-template-columns:1fr;} .locked-panel.small{padding:18px;} .yz-spotlight{background:linear-gradient(120deg,var(--panel),#1a1310);border-color:rgba(225,74,59,.3);margin-bottom:20px;} .yz-copy h4{font-size:19px;margin:10px 0 8px;} .yz-copy p{color:var(--text-dim);font-size:13.5px;max-width:560px;line-height:1.55;margin-bottom:16px;} .edu-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;} /* ===== FWS LIBRARY ===== */ .lib-card{margin-bottom:20px;} .lib-search{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:16px;} .lib-search i{color:var(--text-dim);font-size:13px;} .lib-search input{background:none;border:none;color:var(--text);font-size:13px;outline:none;width:100%;} .lib-topics{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;} .lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;} .lib-block h5{font-size:11px;letter-spacing:1px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;} .lib-block h5 i{color:var(--gold);margin-right:6px;} .continue-item{display:flex;gap:12px;align-items:flex-start;background:var(--panel-2);border-radius:10px;padding:14px;} .continue-item i{color:var(--gold);font-size:16px;margin-top:2px;} .continue-text{flex:1;} .continue-text strong{display:block;font-size:12.5px;margin-bottom:8px;} .continue-text .progress-track{margin-bottom:6px;} .continue-text span{font-size:10.5px;color:var(--text-dim);} .lib-tier-access{border-top:1px solid var(--border);padding-top:16px;} .lib-tier-access h5{font-size:11px;letter-spacing:1px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;} .lib-tier-list{list-style:none;display:flex;flex-direction:column;gap:9px;} .lib-tier-list li{display:flex;gap:14px;font-size:12px;color:var(--text-dim);align-items:baseline;} .lib-tier-name{flex:0 0 160px;color:var(--text);font-weight:600;} @media(max-width:700px){ .lib-grid{grid-template-columns:1fr;} .lib-tier-list li{flex-direction:column;gap:2px;} .lib-tier-name{flex:none;} } @media(max-width:900px){ .course-grid{grid-template-columns:repeat(2,1fr);} .edu-bottom-grid{grid-template-columns:1fr;} } @media(max-width:600px){ .course-grid{grid-template-columns:1fr;} } /* ===== MEMBERSHIP ===== */ .status-card{margin-bottom:16px;} .status-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;} .status-row h3{font-size:20px;margin:8px 0 8px;} .status-row .ai-note{max-width:420px;margin-bottom:0;} .status-next{background:var(--panel-2);border-radius:12px;padding:16px;min-width:260px;} .next-label{font-size:10.5px;letter-spacing:1px;color:var(--text-dim);display:block;margin-bottom:10px;} .status-next .next-lesson{margin-bottom:14px;} .status-next .btn-upgrade{width:100%;} .tier-intro{font-size:12.5px;color:var(--text-dim);max-width:720px;line-height:1.6;margin:0 auto 20px;} .about-tagline{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin:-10px 0 20px;} .about-explainer{font-size:15px;font-weight:600;line-height:1.5;max-width:680px;margin-bottom:10px;} .why-fws-exists{background:var(--panel-2);border-radius:12px;padding:18px 20px;margin-bottom:20px;display:flex;flex-direction:column;gap:6px;} .why-fws-exists p{font-size:14px;} .why-fws-exists p:last-child{color:var(--gold);} /* Contact rows (2026-07-31) — fully clickable, same premium black/gold treatment as the certificate preview for consistency. */ .contact-row-list{display:flex;flex-direction:column;gap:10px;} .contact-row{ display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text); background:linear-gradient(145deg,#0B0B0D,#1a1a1e);border:1px solid var(--border);border-radius:12px; padding:14px 16px;transition:border-color .2s,transform .2s; } .contact-row:hover{border-color:var(--gold);transform:translateX(2px);} .contact-row-icon{ width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(201,166,70,.12);border:1px solid var(--gold);color:var(--gold);font-size:17px; } .contact-row-text{display:flex;flex-direction:column;gap:2px;flex:1;} .contact-row-text strong{font-size:12.5px;} .contact-row-text span{font-size:11.5px;color:var(--text-dim);} .contact-row-go{color:var(--text-dim);font-size:11px;} .contact-row:hover .contact-row-go{color:var(--gold);} /* Support & Settings (2026-07-31) */ .support-search-wrap{position:relative;margin-bottom:16px;} .support-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-dim);} .support-search-wrap input{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px 12px 38px;font-size:13px;color:var(--text);} .support-search-wrap input:focus{border-color:var(--gold);outline:none;} .platform-status-list{display:flex;flex-direction:column;gap:8px;} .status-row{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;font-size:12px;padding:6px 0;} .status-dot{width:9px;height:9px;border-radius:50%;} .status-dot.status-ok{background:var(--green);box-shadow:0 0 6px var(--green);} .status-dot.status-warn{background:var(--gold);box-shadow:0 0 6px var(--gold);} .status-dot.status-off{background:var(--red);box-shadow:0 0 6px var(--red);} .status-label{color:var(--text-dim);font-size:10.5px;} .settings-form{display:flex;flex-direction:column;gap:12px;} .settings-form select,.settings-form textarea,.settings-form input[type="file"]{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--text);font-family:inherit;} .settings-form textarea{min-height:80px;resize:vertical;} .settings-toggle-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px;} .settings-toggle-row:last-child{border-bottom:none;} .settings-toggle{position:relative;width:38px;height:20px;flex-shrink:0;} .settings-toggle input{opacity:0;width:0;height:0;} .settings-toggle-slider{position:absolute;inset:0;background:var(--panel-2);border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:.2s;} .settings-toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--text-dim);border-radius:50%;transition:.2s;} .settings-toggle input:checked + .settings-toggle-slider{background:rgba(201,166,70,.2);border-color:var(--gold);} .settings-toggle input:checked + .settings-toggle-slider::before{transform:translateX(18px);background:var(--gold);} .contact-row-disabled{opacity:.5;cursor:default;} .contact-row-disabled:hover{border-color:var(--border);transform:none;} .support-footer{text-align:center;padding:24px 16px;background:linear-gradient(145deg,#0B0B0D,#1a1a1e);border:1px solid var(--gold);border-radius:14px;margin-top:20px;} .support-footer p{font-size:14px;font-weight:600;margin-bottom:12px;} .support-footer .btn-primary{display:inline-flex;align-items:center;gap:8px;width:auto;padding:11px 22px;text-decoration:none;} .trading-access-card{margin-bottom:16px;} .trading-access-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;} /* FWS TRADING WORKSPACE™ — trade ticket (2026-08-19). BUY green, SELL red, per explicit spec — these are fixed brand colors, not dynamic. The PRICE NUMBERS (not the buttons) flash briefly on a genuine tick up/down, driven only by real price changes from the connected broker — never a decorative animation running on its own. */ .trade-ticket{display:flex;gap:12px;} .trade-ticket-3col{display:grid;grid-template-columns:1fr 110px 1fr;gap:10px;align-items:stretch;} .trade-lot-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(201,166,70,.16);border:1px solid var(--gold);border-radius:14px;padding:10px;} .trade-lot-mid input{width:100%;text-align:center;background:var(--panel);border:1px solid var(--border);color:#fff;border-radius:8px;padding:8px 4px;font-size:14px;} /* FWS TRADING WORKSPACE™ bottom navigation (2026-08-19) */ .trade-bottom-nav{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px;margin-bottom:16px;} .trade-nav-btn{flex:1;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:10px 4px;border-radius:12px; display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;transition:background .15s;} .trade-nav-btn i{font-size:16px;} .trade-nav-btn:hover{background:var(--panel-2);} .trade-nav-btn.active{background:var(--panel-2);color:var(--gold);} /* Real data-freshness indicator (2026-08-22) — colors reflect genuine data age, computed from the actual last-update timestamp. */ .freshness-live{color:var(--green);} .freshness-delayed{color:var(--gold);} .freshness-stale{color:var(--red);} .trade-side-btn{ flex:1;border-radius:14px;border:none;cursor:pointer;padding:12px 16px; display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px; transition:filter .15s ease; } /* FIX (2026-08-24): the compact horizontal layout doesn't have enough room on narrow phone screens — confirmed via real mobile viewport testing (BUY card was getting cut off, SELL's placeholder text wrapped to 3 lines). Reverts to the original stacked layout below 480px, where there's more vertical room to work with than horizontal. */ @media(max-width:480px){ .trade-side-btn{flex-direction:column;gap:6px;padding:14px 10px;} } .trade-side-btn:hover{filter:brightness(1.1);} .trade-side-btn:disabled{opacity:.5;cursor:not-allowed;filter:none;} .trade-sell{background:rgba(214,69,69,.16);border:1px solid var(--red);} .trade-buy{background:rgba(31,174,107,.16);border:1px solid var(--green);} /* FIX (2026-08-22): buttons don't reliably inherit page-wide text color the way divs/spans do — many browsers give