: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{ display:flex;align-items:center;justify-content:space-between; padding:14px 28px;border-bottom:1px solid var(--border); position:sticky;top:0;background:var(--bg);z-index:60; } /* .hero-bg-echo-soft sets position:relative, which would silently break the header's sticky positioning (position is a single-value property) — restore sticky 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:sticky;overflow:visible;} .fws-header.hero-bg-echo-soft::after{display:none;} .header-logo{display:flex;align-items:baseline;gap:10px;min-width:230px;flex-shrink:0;} .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{display:flex;align-items:center;justify-content:center;gap:20px;font-size:12px;color:var(--text-dim);transition:opacity .3s ease;flex:1;} .mantra-item{display:flex;align-items:center;gap:6px;white-space:nowrap;} .mantra-item i{font-size:12px;} .mantra-item strong{font-weight:800;} @media(max-width:1150px){ .header-mantra{display:none;} } .header-utils{display:flex;align-items:center;gap:10px;flex-shrink:0;} .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:1400px){ .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;} /* ===== IDENTITY STRIP ===== */ .identity-strip{ display:flex;gap:0;border-bottom:1px solid var(--border); background:var(--panel);position:sticky;top:65px;z-index:55; 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 ===== */ .fws-shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 110px);} .fws-sidebar{border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;gap:2px;} .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 ===== */ .fws-main{padding:28px 36px;} .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;} .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);} .dash-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;} .mode-toggle{display:flex;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:4px;} .mode-btn{ background:none;border:none;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; } .mode-btn.active{background:var(--panel-2);color:var(--text);} .mode-btn.active[data-mode="auto"]{color:var(--gold);} .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 Brain™ 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;} .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. */ #hsbZoneBand{position:absolute;left:0;right:60px;pointer-events:none;background:rgba(214,69,69,.12);border-top:1px solid rgba(214,69,69,.55);border-bottom:1px solid rgba(214,69,69,.55);z-index:2;} #hsbZoneBand .hsb-zone-label{position:absolute;left:8px;top:2px;font-size:9.5px;font-weight:700;color:#D64545;letter-spacing:.3px;} /* 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;} .fws-shell:has(#marketOverviewStub.focus-mode) .fws-sidebar{display:none;} .fws-shell:has(#marketOverviewStub.focus-mode){grid-template-columns:1fr;} /* 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:260px;max-height:340px; 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-bottom: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;} .trading-access-btns .btn-outline,.trading-access-btns .btn-primary{width:auto;flex:1;min-width:140px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:11px 14px;} .risk-disclaimer{font-size:10px;color:var(--text-dim);margin-top:12px;line-height:1.5;border-top:1px solid var(--border);padding-top:10px;} .tier-list{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;} .tier-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;} .tier-card.active-tier{border-color:var(--green);box-shadow:0 0 0 1px rgba(60,184,120,.15);} .tier-card.locked-tier{opacity:.94;} .tier-summary{ width:100%;background:none;border:none;color:var(--text);cursor:pointer; display:flex;align-items:center;gap:14px;padding:18px 20px;text-align:left; } .tier-summary:hover{background:var(--panel-2);} .tier-emoji{font-size:26px;} .tier-summary-text{flex:1;} .tier-summary-text h4{font-size:15px;margin-bottom:4px;} .tier-identity{font-size:11.5px;color:var(--text-dim);line-height:1.4;margin-bottom:6px;max-width:480px;} .tier-price{font-size:12.5px;color:var(--gold);font-weight:700;} .tier-price small{color:var(--text-dim);font-weight:500;} .tier-caret{font-size:12px;color:var(--text-dim);transition:transform .2s;} .tier-card.expanded .tier-caret{transform:rotate(180deg);} .tier-body{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 20px;} .tier-card.expanded .tier-body{max-height:900px;padding:0 20px 22px;} .tier-lock-note{font-size:10.5px;color:var(--text-dim);margin-bottom:14px;letter-spacing:.3px;} .tier-lock-note i{color:var(--gold);margin-right:5px;} .tier-col{margin-bottom:16px;} .tier-col h5{font-size:11px;letter-spacing:1px;color:var(--text-dim);margin-bottom:9px;text-transform:uppercase;} .plan-durations{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;} .plan-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);padding:7px 12px;border-radius:8px;font-size:11.5px;cursor:pointer;} .plan-btn.active{background:var(--gold);color:#0B0B0D;border-color:var(--gold);font-weight:700;} .tier-unlocks{list-style:none;display:flex;flex-direction:column;gap:8px;} .tier-unlocks li.milestone-done{color:var(--text);font-weight:600;} .tier-unlocks li{font-size:12.5px;color:var(--text-dim);padding-left:18px;position:relative;} .tier-unlocks li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;font-size:11px;} .tier-card .btn-outline:disabled{opacity:.6;cursor:default;color:var(--green);border-color:var(--green);} .tier-card .btn-outline:disabled:hover{border-color:var(--green);} /* Persistent sticky learning journey ladder */ .mem-ladder-sticky{position:sticky;top:118px;z-index:20;margin-bottom:16px;padding:14px 20px;backdrop-filter:blur(6px);} .mem-ladder-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .mem-ladder-label{font-size:10.5px;letter-spacing:1px;color:var(--text-dim);white-space:nowrap;flex-shrink:0;} .mem-ladder-label i{color:var(--gold);margin-right:5px;} .mem-ladder{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;} .mem-step{font-size:11.5px;color:var(--text-dim);white-space:nowrap;} .mem-step.current{color:var(--gold);font-weight:700;} .mem-arrow{font-size:8px;color:#4A4A50;} .btn-upgrade.compact{width:auto;padding:8px 16px;flex-shrink:0;} .tier-outcome{ font-size:14px;font-weight:600;color:var(--text);line-height:1.5; background:var(--panel-2);border-radius:10px;padding:13px 16px;margin-bottom:14px; } .tier-outcome i{color:var(--gold);margin-right:8px;} .tier-qa{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin-bottom:8px;} .tier-qa strong{color:var(--text);} .tier-inherit{ font-size:11.5px;color:var(--green);font-weight:600;margin:14px 0; display:flex;align-items:center;gap:7px; } .mode-limits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;} .mode-limit-card{background:var(--panel-2);border-radius:10px;padding:14px;} .mode-limit-card h6{font-size:11.5px;color:var(--text);margin-bottom:9px;display:flex;align-items:center;gap:7px;} .mode-limit-card h6 i{color:var(--gold);} .limit-list li::before{content:'✓';} .limit-list li.limit-no{color:#8a6a5a;} .limit-list li.limit-no::before{content:'✕';color:var(--red);} .tier-next{ font-size:12px;color:var(--text-dim);margin-top:14px;padding-top:14px; border-top:1px solid var(--border);line-height:1.5; } .tier-next i{color:var(--gold);margin-right:6px;} .tier-next strong{color:var(--text);} @media(max-width:700px){ .status-row{flex-direction:column;} .status-next{width:100%;} .mode-limits{grid-template-columns:1fr;} .mem-ladder-row{flex-direction:column;align-items:flex-start;} } /* ===== BUSINESS ===== */ .biz-hero{text-align:center;padding:36px 24px;margin-bottom:16px;background:linear-gradient(150deg,var(--panel),#151a17);} .biz-hero h2{font-size:28px;margin-bottom:8px;} .biz-tagline{font-size:14px;color:var(--gold);font-weight:600;margin-bottom:14px;} .biz-hero-copy{font-size:13.5px;color:var(--text-dim);max-width:620px;margin:0 auto 22px;line-height:1.6;} .biz-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .wwd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .wwd-item{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid transparent;border-radius:10px;padding:13px 14px;font-size:12.5px;color:var(--text);cursor:pointer;text-align:left;width:100%;font-family:inherit;} .wwd-item:hover{border-color:var(--gold);} .wwd-item i{font-size:15px;flex-shrink:0;} .hero-division-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px;} .hero-div-card{ background:var(--panel-2);border:1px solid var(--border);border-radius:12px; padding:16px 12px;text-align:center;cursor:pointer;display:flex;flex-direction:column; align-items:center;gap:6px;font-family:inherit; } .hero-div-card:hover{border-color:var(--gold);} .hd-emoji{font-size:24px;} .hero-div-card strong{font-size:11.5px;color:var(--text);line-height:1.3;} .hd-tag{font-size:10px;color:var(--gold);font-weight:600;} .ai-preview-demo{background:var(--panel-2);border-radius:12px;padding:14px 16px;margin-bottom:16px;position:relative;} .ai-preview-demo .chat-msg{max-width:100%;margin-bottom:10px;} .ai-preview-demo .chat-msg p{font-size:12.5px;} .ai-preview-demo .chat-msg .msg-body{padding:9px 12px;} .preview-label{font-size:10px;color:#5A5A60;font-style:italic;} @media(max-width:900px){ .wwd-grid{grid-template-columns:repeat(2,1fr);} .cred-grid{grid-template-columns:1fr;} .hero-division-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:500px){ .wwd-grid{grid-template-columns:1fr;} .hero-division-grid{grid-template-columns:1fr;} } .why-grid{display:flex;flex-direction:column;gap:16px;} .why-item{display:flex;gap:14px;align-items:flex-start;} .why-item i{color:var(--gold);font-size:17px;margin-top:2px;width:20px;text-align:center;flex-shrink:0;} .why-item strong{display:block;font-size:13.5px;margin-bottom:4px;} .why-item span{font-size:12.5px;color:var(--text-dim);line-height:1.5;} .biz-journey{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;} .bj-step{display:flex;align-items:center;gap:12px;background:var(--panel-2);border-radius:10px;padding:11px 20px;font-size:13px;width:100%;max-width:340px;} .bj-step.final{border:1px solid var(--green);} .bj-num{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#0B0B0D;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bj-step.final .bj-num{background:var(--green);} .bj-arrow{color:#4A4A50;font-size:11px;} .cred-card{margin-bottom:16px;} .cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;} .cred-item{display:flex;gap:12px;align-items:flex-start;background:var(--panel-2);border-radius:10px;padding:14px;} .cred-item i{font-size:17px;margin-top:2px;} .cred-item strong{display:block;font-size:13px;margin-bottom:3px;} .cred-item span{font-size:11.5px;color:var(--text-dim);} .founder-block{border-top:1px solid var(--border);margin-top:16px;padding-top:16px;} .founder-block h5{font-size:11px;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;} .founder-block .ai-note{margin-bottom:0;} /* ===== SPORTS ===== */ .sport-explain{ margin-top:14px;padding:13px 16px;background:var(--panel-2);border-radius:10px; font-size:12.5px;color:var(--text-dim);line-height:1.5; } .responsible-card{border-color:rgba(60,184,120,.3);background:linear-gradient(120deg,var(--panel),#0f1a14);} .spd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px;} .spd-item{background:var(--panel-2);border-radius:10px;padding:15px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;} .spd-item i{font-size:16px;} .spd-item strong{font-size:16px;color:var(--text);} .spd-item span{font-size:10px;color:var(--text-dim);} .spd-item.spd-next{grid-column:span 2;background:rgba(201,166,70,.08);border:1px solid rgba(201,166,70,.25);} @media(max-width:700px){ .spd-grid{grid-template-columns:repeat(2,1fr);} .spd-item.spd-next{grid-column:span 2;} } .sports-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border);} .sports-stat{display:flex;flex-direction:column;align-items:center;gap:6px;} .sports-stat i{font-size:18px;color:var(--gold);} .sports-stat strong{font-size:17px;color:var(--text);} .sports-stat span{font-size:10.5px;color:var(--text-dim);} .wwd-item.active-sport{border-color:var(--gold);background:rgba(201,166,70,.1);} .wwd-item.ws-future{opacity:.6;position:relative;cursor:default;} .wwd-item.ws-future small{margin-left:auto;font-size:9px;color:var(--gold);font-weight:700;text-transform:uppercase;} /* ===== NEW DASHBOARD (HOME) ===== */ .home-hero{ position:relative;overflow:hidden;text-align:center;padding:32px 24px;margin-bottom:18px; background:linear-gradient(150deg,var(--panel),#151a17); } .home-hero::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(circle at 15% 25%, rgba(225,74,59,.10) 0%, transparent 35%), radial-gradient(circle at 85% 20%, rgba(201,166,70,.10) 0%, transparent 35%), radial-gradient(circle at 50% 85%, rgba(60,184,120,.10) 0%, transparent 40%), repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, transparent 1px, transparent 32px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0px, transparent 1px, transparent 32px); animation:heroDrift 22s ease-in-out infinite; } .home-hero::after{ content:'';position:absolute;top:-40%;left:50%;width:160%;height:220%;pointer-events:none;z-index:0; background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(201,166,70,.05) 40deg, transparent 90deg, rgba(225,74,59,.05) 200deg, transparent 260deg, rgba(60,184,120,.05) 320deg, transparent 360deg); transform:translateX(-50%);animation:heroRayRotate 40s linear infinite; } @keyframes heroDrift{0%,100%{background-position:0 0,0 0,0 0,0 0,0 0;}50%{background-position:2% -2%,-2% 2%,1% -1%,4px 4px,-4px -4px;}} @keyframes heroRayRotate{from{transform:translateX(-50%) rotate(0deg);}to{transform:translateX(-50%) rotate(360deg);}} .home-hero > *{position:relative;z-index:1;} /* Reuses the exact same hero background animation (glow + light-ray sweep) at different intensities, so the platform shares one visual identity — Hero=100% (native rules), .hero-bg-echo-full=100% (reused elsewhere, e.g. Market Overview's chart), .hero-bg-echo=60%, .hero-bg-echo-soft=50%. Same slow, low-contrast, no-flash animation. */ .hero-bg-echo, .hero-bg-echo-soft, .hero-bg-echo-full, .hero-bg-echo-faint, .hero-bg-echo-whisper{position:relative;overflow:hidden;} .hero-bg-echo::before, .hero-bg-echo-soft::before, .hero-bg-echo-full::before, .hero-bg-echo-faint::before, .hero-bg-echo-whisper::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(circle at 15% 25%, rgba(225,74,59,.10) 0%, transparent 35%), radial-gradient(circle at 85% 20%, rgba(201,166,70,.10) 0%, transparent 35%), radial-gradient(circle at 50% 85%, rgba(60,184,120,.10) 0%, transparent 40%), repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, transparent 1px, transparent 32px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0px, transparent 1px, transparent 32px); animation:heroDrift 22s ease-in-out infinite; } .hero-bg-echo::after, .hero-bg-echo-soft::after, .hero-bg-echo-full::after, .hero-bg-echo-faint::after, .hero-bg-echo-whisper::after{ content:'';position:absolute;top:-40%;left:50%;width:160%;height:220%;pointer-events:none;z-index:0; background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(201,166,70,.05) 40deg, transparent 90deg, rgba(225,74,59,.05) 200deg, transparent 260deg, rgba(60,184,120,.05) 320deg, transparent 360deg); transform:translateX(-50%);animation:heroRayRotate 40s linear infinite; } .hero-bg-echo::before{opacity:.6;} .hero-bg-echo::after{opacity:.6;} .hero-bg-echo-soft::before{opacity:.5;} .hero-bg-echo-soft::after{opacity:.5;} .hero-bg-echo-full::before{opacity:1;} .hero-bg-echo-full::after{opacity:1;} .hero-bg-echo-faint::before{opacity:.13;} .hero-bg-echo-faint::after{opacity:.13;} .hero-bg-echo-whisper::before{opacity:.07;} .hero-bg-echo-whisper::after{opacity:.07;} .hero-bg-echo > *, .hero-bg-echo-soft > *, .hero-bg-echo-full > *, .hero-bg-echo-faint > *, .hero-bg-echo-whisper > *{position:relative;z-index:1;} /* Active sidebar item only — premium 55% animation. Other nav items stay clean with just a hover glow (existing .nav-item:hover rule). */ .nav-item.active{position:relative;overflow:hidden;} .nav-item.active::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(circle at 20% 30%, rgba(225,74,59,.14) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(201,166,70,.14) 0%, transparent 40%); opacity:.55;animation:heroDrift 22s ease-in-out infinite; } .nav-item.active > *{position:relative;z-index:1;} .home-welcome-row{display:flex;align-items:center;gap:14px;justify-content:flex-start;margin-bottom:18px;} .home-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);} .home-avatar-fallback{ width:44px;height:44px;border-radius:50%;background:var(--panel-2);border:2px solid var(--gold); display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px; } .home-welcome-text{text-align:left;} .home-welcome-label{font-size:11.5px;color:var(--text-dim);display:block;} .home-welcome-text h2{font-size:19px;margin:2px 0;} .home-welcome-sub{font-size:11px;color:var(--text-dim);} .home-oid-title{font-size:42px;font-weight:900;letter-spacing:1px;margin-bottom:10px;} .home-hero .hero-sub{font-size:13px;color:var(--text-dim);max-width:600px;margin:0 auto 26px;line-height:1.6;} .home-hero .hero-sub em{font-style:normal;color:var(--text);} .ai31-block{margin-bottom:30px;} .ai31-title{font-size:16px;letter-spacing:3.5px;color:var(--gold);font-weight:800;margin-bottom:14px;text-shadow:0 0 18px rgba(201,166,70,.5);} .ai31-engines{display:flex;justify-content:center;gap:36px;margin-bottom:14px;flex-wrap:wrap;} .ai31-engine{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;} .ai31-engine strong{color:var(--text);font-size:13px;} .ai31-engine i{font-size:9px;color:var(--text-dim);} .ai31-statement{font-size:12.5px;color:var(--text);max-width:520px;margin:0 auto;line-height:1.5;font-style:italic;} /* Enhanced OID rings — rotating halo + breathing pulse, evoking a "connected AI system" feel without heavy particle JS. */ .oid-ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;position:relative;} .ring-lg{width:108px;height:108px;font-size:36px;margin-bottom:16px;} .oid-ring::before{ content:'';position:absolute;inset:-10px;border-radius:50%; border:1.5px dashed currentColor;opacity:.35;animation:oidSpin 14s linear infinite; } .ring-lg{animation:oidBreathe 4s ease-in-out infinite;} @keyframes oidSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} @keyframes oidBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}} .ring-red{border:2px solid var(--red);color:var(--red);box-shadow:0 0 20px rgba(225,74,59,.25);} .ring-gold{border:2px solid var(--gold);color:var(--gold);box-shadow:0 0 20px rgba(201,166,70,.25);} .ring-green{border:2px solid var(--green);color:var(--green);box-shadow:0 0 20px rgba(60,184,120,.25);} .ring-lg.ring-red{box-shadow:0 0 34px rgba(225,74,59,.4);} .ring-lg.ring-gold{box-shadow:0 0 34px rgba(201,166,70,.4);} .ring-lg.ring-green{box-shadow:0 0 34px rgba(60,184,120,.4);} /* Gauge halo + trend arrows */ .gauge-wrap{position:relative;display:flex;justify-content:center;margin:8px 0 18px;} .gauge-halo{ position:absolute;width:170px;height:170px;border-radius:50%; background:conic-gradient(from 0deg,var(--gauge-glow-color, rgba(60,184,120,.25)),transparent 60%); animation:oidSpin 8s linear infinite; } .gauge-trend{color:var(--green);font-size:10px;letter-spacing:1px;margin-left:4px;} /* Brighter, more "illuminated" connecting arrows */ .oid-arrow{color:var(--gold);font-size:22px;font-weight:900;margin-top:42px;text-shadow:0 0 14px rgba(201,166,70,.7);} /* Market Sentiment — left/right split (gauge | confirmation list) */ .sentiment-split{display:flex;gap:20px;align-items:center;margin-bottom:16px;} .sentiment-gauge-col{flex-shrink:0;} .gauge-wrap-sm{margin:0;} .gauge-wrap-sm .gauge-halo{width:120px;height:120px;} .gauge-wrap-sm .gauge-ring{width:96px;height:96px;} .gauge-wrap-sm .gauge-inner{width:76px;height:76px;gap:1px;} .gauge-wrap-sm .gauge-inner strong{font-size:19px;} .gauge-wrap-sm .gauge-inner span:not(.gauge-trend){font-size:9.5px;font-weight:800;letter-spacing:.5px;} .gauge-wrap-sm .gauge-trend{display:block;margin-left:0;font-size:11px;} .sentiment-list-v2{list-style:none;display:flex;flex-direction:column;gap:11px;flex:1;margin-bottom:0;} .sentiment-list-v2 li{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);} .sentiment-list-v2 li strong{display:flex;align-items:center;gap:6px;font-size:12px;} .sentiment-list-v2 li i{font-size:10px;} /* Welcome card membership badge */ .home-badge{ margin-left:auto;background:rgba(201,166,70,.15);color:var(--gold);border:1px solid rgba(201,166,70,.4); padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.5px;align-self:flex-start; } /* Sideeq Brain mini-chat preview on the Dashboard */ .home-brain-preview{display:flex;flex-direction:column;} .home-brain-window{min-height:70px;max-height:110px;margin:10px 0;} .home-brain-window .chat-msg p{font-size:11.5px;} .home-brain-window .chat-msg .msg-body{padding:8px 11px;} /* 3-in-1 AI engines — fixed width columns for perfect alignment */ .ai31-engine{width:130px;} .oid-flow{display:flex;align-items:flex-start;justify-content:center;gap:24px;flex-wrap:wrap;} .oid-flow-lg{gap:32px;} .oid-step{width:160px;} .oid-flow-lg .oid-step{width:210px;} .oid-step h3{font-size:14px;letter-spacing:1.5px;margin-bottom:8px;} .oid-step p{font-size:11.5px;color:var(--text-dim);line-height:1.5;} .oid-step p strong{color:var(--text);font-weight:700;display:block;margin-bottom:4px;} .avatar-circle{ width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;color:#0B0B0D;border:2px solid var(--panel);margin-right:-10px; } .community-avatars{display:flex;margin-bottom:10px;} .ai-online{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--green);font-weight:700;} .ai-online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);} .home-top-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;} .home-ai-insight h4{font-size:15px;margin:8px 0 6px;} .ai-recommends{border-top:1px solid var(--border);margin-top:14px;padding-top:14px;} .ai-recommends-label{font-size:10px;letter-spacing:1px;color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:9px;} .ai-recommends-item{display:flex;align-items:center;gap:9px;background:var(--panel-2);border-radius:9px;padding:11px 13px;font-size:12px;} .ai-recommends-item span{transition:opacity .3s ease;} .ai-recommends-item i{color:var(--gold);font-size:13px;} /* Market Sentiment — premium circular gauge widget */ .sentiment-card{display:flex;flex-direction:column;} .gauge-wrap{display:flex;justify-content:center;margin:8px 0 18px;} .gauge-ring{ width:140px;height:140px;border-radius:50%; background:conic-gradient(var(--gauge-color, var(--green)) calc(var(--gauge-pct)*1%), var(--panel-2) 0); display:flex;align-items:center;justify-content:center; box-shadow:0 0 30px var(--gauge-shadow-color, rgba(60,184,120,.25)); animation:gaugeGlow 3s ease-in-out infinite; } @keyframes gaugeGlow{0%,100%{box-shadow:0 0 24px var(--gauge-shadow-color, rgba(60,184,120,.2));}50%{box-shadow:0 0 36px var(--gauge-shadow-color, rgba(60,184,120,.4));}} .gauge-inner{ width:106px;height:106px;border-radius:50%;background:var(--panel); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; } .gauge-inner strong{font-size:24px;font-weight:800;color:var(--text);} .gauge-inner span{font-size:11px;font-weight:700;color:var(--green);letter-spacing:.5px;} .sentiment-list-v2{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px;} .sentiment-list-v2 li{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);} .sentiment-list-v2 li span{display:flex;align-items:center;gap:7px;} .sentiment-list-v2 li i{font-size:10px;} .sentiment-bias{ background:var(--panel-2);border-radius:10px;padding:12px 14px;margin-bottom:14px; display:flex;flex-direction:column;gap:4px; } .sentiment-bias-label{font-size:10px;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;} .sentiment-bias strong{font-size:13.5px;} .sentiment-ai-insight{border-top:1px solid var(--border);padding-top:14px;} .sentiment-ai-insight p{font-size:11.5px;color:var(--text-dim);line-height:1.5;margin-top:8px;font-style:italic;} /* Quick Access — colored, glowing, animated icons per module */ .qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .qa-card{ background:var(--panel-2);border:1px solid var(--border);border-radius:11px; padding:18px 10px;text-align:center;cursor:pointer;display:flex;flex-direction:column; align-items:center;gap:10px;font-family:inherit;transition:transform .15s, border-color .15s; } .qa-card:hover{transform:translateY(-3px);} .qa-card i{font-size:26px;transition:filter .15s;} .qa-card span{font-size:11px;color:var(--text);} .qa-gold i{color:var(--gold);filter:drop-shadow(0 0 6px rgba(201,166,70,.4));} .qa-gold:hover{border-color:var(--gold);} .qa-gold:hover i{filter:drop-shadow(0 0 12px rgba(201,166,70,.7));} .qa-blue i{color:var(--blue);filter:drop-shadow(0 0 6px rgba(76,141,255,.4));} .qa-blue:hover{border-color:var(--blue);} .qa-blue:hover i{filter:drop-shadow(0 0 12px rgba(76,141,255,.7));} .qa-orange i{color:var(--orange);filter:drop-shadow(0 0 6px rgba(232,128,74,.4));} .qa-orange:hover{border-color:var(--orange);} .qa-orange:hover i{filter:drop-shadow(0 0 12px rgba(232,128,74,.7));} .qa-green i{color:var(--green);filter:drop-shadow(0 0 6px rgba(60,184,120,.4));} .qa-green:hover{border-color:var(--green);} .qa-green:hover i{filter:drop-shadow(0 0 12px rgba(60,184,120,.7));} .qa-purple i{color:var(--purple);filter:drop-shadow(0 0 6px rgba(166,108,224,.4));} .qa-purple:hover{border-color:var(--purple);} .qa-purple:hover i{filter:drop-shadow(0 0 12px rgba(166,108,224,.7));} .qa-cyan i{color:var(--cyan);filter:drop-shadow(0 0 6px rgba(61,201,216,.4));} .qa-cyan:hover{border-color:var(--cyan);} .qa-cyan:hover i{filter:drop-shadow(0 0 12px rgba(61,201,216,.7));} .qa-silver i{color:var(--silver);filter:drop-shadow(0 0 6px rgba(154,160,168,.35));} .qa-silver:hover{border-color:var(--silver);} .qa-silver:hover i{filter:drop-shadow(0 0 12px rgba(154,160,168,.6));} .home-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} .sports-preview-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;} .sp-chip{background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:9px 16px;font-size:12.5px;color:var(--text);} @media(max-width:1100px){ .home-top-grid{grid-template-columns:1fr;} } @media(max-width:900px){ .qa-grid{grid-template-columns:repeat(2,1fr);} .home-bottom-grid{grid-template-columns:1fr;} } @media(max-width:600px){ .oid-flow{flex-direction:column;} .oid-arrow{transform:rotate(90deg);margin-top:0;} .home-oid-title{font-size:28px;} } .clickable-tiers .tier-link{ display:flex;align-items:center;gap:14px;cursor:pointer;padding:9px 10px;border-radius:8px; } .clickable-tiers .tier-link:hover{background:var(--panel-2);} .clickable-tiers .tier-link i{margin-left:auto;font-size:11px;color:var(--text-dim);flex-shrink:0;} @media(max-width:600px){ .sports-stats-row{grid-template-columns:repeat(2,1fr);} } /* ===== SPORTS WORKSPACE™ V2 (Layer 2) ===== */ .workspace-view{padding:24px 36px;} .workspace-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;} .workspace-match-title{display:flex;align-items:center;gap:10px;font-size:14px;} .workspace-match-title .vs{color:var(--text-dim);font-size:12px;} .workspace-match-title .ws-minute{color:var(--gold);font-weight:700;font-size:12px;} .workspace-grid{display:grid;grid-template-columns:250px 1fr 280px;gap:16px;margin-bottom:18px;} .ws-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;} .ws-tab{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);padding:6px 11px;border-radius:7px;font-size:11px;cursor:pointer;} .ws-tab.active{background:var(--gold);color:#0B0B0D;border-color:var(--gold);font-weight:700;} .ws-match-list{list-style:none;display:flex;flex-direction:column;gap:8px;} .ws-match{background:var(--panel-2);border-radius:9px;padding:10px 12px;font-size:11.5px;cursor:pointer;border:1px solid transparent;} .ws-match.active{border-color:var(--gold);} .ws-match:hover{border-color:var(--gold);} .wm-league{display:block;color:var(--text-dim);font-size:10px;margin-bottom:5px;} .wm-teams{display:block;font-size:12px;margin-bottom:4px;} .wm-live{color:var(--green);font-weight:700;font-size:10.5px;} .wm-time{color:var(--text-dim);font-size:10.5px;} .ws-scoreboard{display:flex;align-items:center;justify-content:center;gap:28px;padding:22px 0;margin-bottom:16px;background:var(--panel-2);border-radius:12px;} .ws-team{display:flex;flex-direction:column;align-items:center;gap:8px;} .wt-badge{width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;} .ws-team strong{font-size:12.5px;} .ws-score{font-size:26px;font-weight:800;color:var(--gold);} .ws-center-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;} .ws-learn{margin-bottom:12px;} /* Shared layout components — same classes used on Trading Dashboard and Sports Workspace (and future workspaces). Specific classes like .watchlist-card / .ws-observe still carry their own detail styling; these carry the structural role so future workspaces can reuse them without redefining the pattern. */ .observe-panel{} .workspace-center{} .ai-reading-panel{} .learn-panel{} .ws-league-filter{margin-bottom:12px;} .ws-league-filter select{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:9px 11px;border-radius:8px;font-size:11.5px;} /* Custom scrollable dropdown — replaces native