/* ============================================================ Panels — left watchlist panel shell (#leftPanel/#leftInner, tabs) and right Intel panel shell (#rightPanel, #intelTabBar, radar pane). ============================================================ */ #leftPanel.open { width: 280px; } #leftInner { width: 280px; overflow-y: auto; flex: 1; } .sectionHeader { padding: 12px 14px 6px; font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.12em; border-top: 1px solid rgba(255,255,255,0.04); font-family: 'Inter', sans-serif; font-weight: 700; } .sectionHeader:first-child { border-top: none; } .sidebarToggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; } #watchlistArrow { font-size: 9px; opacity: 0.5; } #groupTabs { display: flex; padding: 6px 8px 0; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .groupTab { /* PHASE 4 Task 3: rem, not px -- tab labels participate in the UI density setting (data-density on scales the root font-size these are relative to; see variables.css). 9px was today's Compact value: 9/16rem. */ flex: 1; text-align: center; padding: 5px 0 6px; font-size: 0.5625rem; color: var(--txt3); cursor: pointer; border-bottom: 2px solid transparent; font-family: 'Share Tech Mono', monospace; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.12s, border-color 0.12s; } .groupTab:hover { color: var(--txt1); } .groupTab.active { color: var(--gold); border-bottom-color: var(--gold); } /* ===== Trading Logs ===== */ #tradingLogs { padding: 6px 8px; } #chatList { width: 0; border-right: none; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; transition: width 0.2s ease; } #chatList.open { width: 110px; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.05); padding: 6px 5px; } #newChatBtn { background: var(--s2); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--txt2); font-family: 'Inter', sans-serif; font-size: 10px; text-align: center; padding: 6px 4px; cursor: pointer; transition: all 0.15s; } #newChatBtn:hover { background: var(--s3); color: var(--txt1); border-color: var(--blue); } .chatListItem { background: var(--s2); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--txt2); font-family: 'Inter', sans-serif; font-size: 10px; padding: 5px 6px; cursor: pointer; display: flex; align-items: center; gap: 3px; transition: all 0.12s; } .chatListItem:hover { background: var(--s3); color: var(--txt1); } .chatListItem.active { border-color: var(--blue); color: var(--txt1); background: rgba(41,98,255,0.08); } .chatListTitle { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chatListDel { flex-shrink: 0; color: #5d6068; font-size: 9px; padding: 1px 2px; border-radius: 2px; opacity: 0; transition: opacity 0.1s; } .chatListItem:hover .chatListDel { opacity: 1; } .chatListDel:hover { color: #f23645; background: rgba(242,54,69,0.12); } #chatHeader { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 10px; color: var(--txt2); font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } .chatHeaderTitleStack { display: flex; flex-direction: column; gap: 1px; } .chatBrandTitle { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; color: #d4af37; letter-spacing: 0.08em; } .chatBrandSub { font-size: 8px; color: #3a3d4d; font-family: 'Share Tech Mono', monospace; letter-spacing: 0.06em; } #chatMain { flex: 1; display: flex; flex-direction: column; min-width: 0; } #chatMessages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; } .msg { display: flex; flex-direction: column; } .msg .who { font-size: 8px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 4px; font-family: 'Inter', sans-serif; font-weight: 600; } .msg.user { align-items: flex-end; } .msg.user .who { color: var(--txt3); } .msg.user .bubble { background: rgba(41,98,255,0.12); border: 1px solid rgba(41,98,255,0.2); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); padding: 8px 12px; color: #c8d4ff; font-size: 12px; max-width: 85%; line-height: 1.55; word-break: break-word; font-family: 'Inter', sans-serif; } .msg.assistant { align-items: flex-start; } .msg.assistant .who { color: var(--gold); } .msg.assistant .bubble { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg); padding: 10px 13px; color: var(--txt2); font-size: 12px; max-width: 92%; line-height: 1.65; word-break: break-word; font-family: 'Inter', sans-serif; } .msg.assistant .bubble b, .msg.assistant .bubble strong { color: var(--txt1); } .msg.assistant .bubble code { background: rgba(255,255,255,0.05); border-radius: var(--r-xs); padding: 1px 5px; font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #7ea4ff; } /* Typing indicator */ .msg.assistant.typing .bubble { color: var(--txt3); font-style: italic; } #chatInputRow { display: flex; border-top: 1px solid rgba(255,255,255,0.05); padding: 10px; gap: 8px; align-items: flex-end; } #chatInput { flex: 1; background: var(--s1); border: 1px solid var(--border2); color: var(--txt1); border-radius: var(--r-md); padding: 9px 12px; font-size: 12px; resize: none; font-family: 'Inter', sans-serif; transition: border-color 0.15s, box-shadow 0.15s; line-height: 1.45; max-height: 120px; } #chatInput:focus { border-color: rgba(41,98,255,0.4); outline: none; box-shadow: 0 0 0 3px rgba(41,98,255,0.08); } #chatSendBtn { background: linear-gradient(135deg, var(--blue), #1a44cc); border: none; color: white; border-radius: var(--r-md); padding: 9px 14px; cursor: pointer; font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.04em; transition: opacity 0.12s, box-shadow 0.12s; flex-shrink: 0; } #chatSendBtn:hover { opacity: 0.85; } #chatSendBtn:disabled { opacity: 0.4; cursor: not-allowed; } /* ===== RIGHT PANEL — 4-tab INTEL ===== */ #rightPanel.open { width: 420px; } #intelHeader { display: flex; flex-direction: column; flex-shrink: 0; } #intelTabBar { display: flex; align-items: center; gap: 2px; flex-shrink: 0; background: var(--s0); padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); } .intelTab { /* PHASE 4 Task 3: rem so this tab label scales with the density setting (10px was today's Compact value: 10/16rem). */ flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 0.625rem; color: var(--txt2); cursor: pointer; padding: 5px 4px; border-radius: var(--r-sm); border-bottom: none; transition: all 0.15s; font-weight: 500; font-family: 'Inter', sans-serif; letter-spacing: 0.01em; } .intelTab:hover { background: var(--s2); color: var(--txt1); } .intelTab.active { background: rgba(212,175,55,0.1); color: var(--gold); } /* PHASE 3: was `.intelTab.active img` — every tab icon is now an (the Lucide sprite), so this needs to match svg too, or the active tab's icon glow silently stops working. */ .intelTab.active svg { opacity: 1 !important; filter: drop-shadow(0 0 4px rgba(212,175,55,0.5)); } /* `.intelTab svg` (below) sizes the Layers tab's own wide, non-square custom Arsenal mark by aspect ratio. The three Lucide icons (Trades/Engine/Chat) carry `.intelTabIcon` too, which needs to win over that generic rule — bumped via an extra `svg` type selector rather than !important. */ .intelTab svg.intelTabIcon { width: 12px; height: 12px; margin-right: 3px; opacity: 0.7; } .intelTab svg { height: 10px; width: auto; margin-right: 3px; vertical-align: middle; opacity: 0.8; } #intelCloseBtn { padding: 0 8px; background: none; border: none; cursor: pointer; color: var(--txt2); font-size: 13px; flex-shrink: 0; display: flex; align-items: center; border-radius: var(--r-xs); transition: all 0.15s; } #intelCloseBtn:hover { color: var(--red); background: rgba(242,54,69,0.1); } .intelPane { display: none; flex: 1; overflow-y: auto; flex-direction: column; min-height: 0; } .intelPane.active { display: flex; } /* TRADES pane */ #tradesPane { padding: 0; gap: 0; } .sip-closed { color: var(--gold) !important; } .sip-closed-bg { background: rgba(212,175,55,0.05) !important; border-left: 2px solid rgba(212,175,55,0.4) !important; } /* ENGINE pane */ #enginePane { padding: 0; gap: 0; flex-direction: column; overflow-y: auto; } #runDexterBtn { background: var(--gold-dim); border: 1px solid rgba(212,175,55,0.25); color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; padding: 9px 16px; border-radius: var(--r-md); cursor: pointer; transition: all 0.15s; flex: 1; } #runDexterBtn:hover { border-color: var(--gold); background: rgba(212,175,55,0.18); box-shadow: var(--glow-gold); } #runDexterBtn:disabled { opacity: 0.4; cursor: not-allowed; } #engineOverlayToggles { display: none; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } /* PHASE 1 FOUNDATION: engine context bar (symbol/TF/last-run) — was a bare inline-styled div; now a named class so it can be reasoned about the same way every other component is. */ .engineContextBar { display: flex; align-items: center; gap: 8px; padding: 8px 14px 7px; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; background: var(--s0); } #engineContextSym { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--gold); font-weight: 700; letter-spacing: 0.04em; } .engineContextSep { color: var(--border2); } #engineContextTf { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--txt2); } #engineLastRun { margin-left: auto; font-family: 'Inter', sans-serif; font-size: 8px; color: var(--txt3); } .engineContextBar .icon { width: 14px; height: 14px; opacity: 0.8; } .engineRunRow { display: flex; gap: 8px; align-items: center; padding: 10px 12px 4px; flex-shrink: 0; } .runDexterIcon { width: 15px; height: 15px; margin-right: 6px; opacity: 0.9; vertical-align: middle; } #engineStatus img { width: 13px; height: 13px; opacity: 0.5; } #engineStatus b { color: var(--txt2); } #engineStatus { font-size: 10px; font-family: 'Inter', sans-serif; text-align: center; padding: 3px 12px 6px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--txt3); flex-shrink: 0; } /* #hypHistorySection's own `display:none`/'' toggle is written at runtime by engine.js (loadHypothesisHistory) — that one property stays inline on purpose; everything else about its box is static and belongs here. */ #hypHistorySection { flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.05); padding: 0; } .hypHistoryHeader { display: flex; align-items: center; gap: 8px; padding: 8px 14px 6px; font-size: 9px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.12em; } .hypHistoryHeader .icon { width: 12px; height: 12px; opacity: 0.7; } #clearHypHistory { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 9px; color: var(--txt3); font-family: 'Inter', sans-serif; padding: 0; } #radarScanBtn .icon { width: 13px; height: 13px; margin-right: 5px; opacity: 0.85; } .engChk { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #787b86; font-family: 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; user-select: none; } .engChk input { accent-color: #d4af37; cursor: pointer; width: 10px; height: 10px; } #engineReadout { display: none; flex-direction: column; gap: 8px; padding: 10px; flex-shrink: 0; } .engineBlock { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 10px 12px; flex-shrink: 0; } .engineBlockTitle { font-size: 9px; color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .engineRow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 10px; } .engineLabel { color: var(--txt3); font-family: 'Share Tech Mono', monospace; } .engineVal { color: var(--txt2); font-family: 'Share Tech Mono', monospace; } .engineBar { height: 3px; background: var(--border); border-radius: var(--r-pill); margin: 3px 0 6px; overflow: hidden; } .engineBarFill { height: 100%; border-radius: var(--r-pill); transition: width 0.5s ease; } .engineHyp { font-size: 11px; color: var(--txt1); border-left: 2px solid var(--gold); padding: 5px 10px; margin-bottom: 6px; background: var(--gold-dim); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: 'Share Tech Mono', monospace; } .engineHypItem { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--txt2); padding: 2px 0; font-family: 'Share Tech Mono', monospace; } .engineHypDot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* LAYERS pane */ #layersPane { padding: 0; flex-direction: column; } .layersBrand { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(212,175,55,0.08); background: linear-gradient(180deg, rgba(212,175,55,0.04) 0%, transparent 100%); flex-shrink: 0; } .layersBrandTitle { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; color: var(--gold); letter-spacing: 0.08em; } .layersBrandSub { font-family: 'Share Tech Mono', monospace; font-size: 8px; color: rgba(212,175,55,0.3); margin-top: 2px; } .layersBrandSub .icon { width: 10px; height: 10px; margin-right: 2px; opacity: 0.7; } .layersBrand-logo { height: 26px; width: auto; opacity: 0.85; } #layersList { flex: 1; overflow-y: auto; padding: 6px 0; } .layerRow { display: flex; align-items: center; padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; } .layerRow:hover { background: var(--s1); } .layerRow.layerEmpty { opacity: 0.4; } .layerCheck { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; user-select: none; } .layerCheck input { accent-color: #d4af37; width: 12px; height: 12px; cursor: pointer; flex-shrink: 0; } .layerDot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .layerLabel { font-size: 11px; color: #9598a1; font-family: 'Share Tech Mono', monospace; } .layerCount { font-size: 9px; color: #5d6068; font-family: 'Share Tech Mono', monospace; margin-right: 6px; min-width: 16px; text-align: right; } .layerClear { background: none; border: none; color: #5d6068; cursor: pointer; font-size: 11px; padding: 2px 4px; flex-shrink: 0; } .layerClear:hover { color: #f23645; } .layersToolSep { padding: 6px 14px 3px; font-size: 9px; color: #5d6068; font-family: 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid #1e222d; flex-shrink: 0; margin-top: 4px; } /* Restyled 2026-07-05: was a wrapping grid of vertical-stack cards — Kev preferred the row style of #layersList above (colored dot + label, one per row), so this is now a vertical stack of horizontal rows instead. Same .layerToolBtn class, same ids on every child — no JS changed, only the shape. */ .layersToolGrid { display: flex; flex-direction: column; padding: 2px 0 8px; flex-shrink: 0; } .layerToolBtn { display: flex; flex-direction: row; align-items: center; gap: 9px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.04); border-radius: 0; padding: 7px 14px; cursor: default; transition: background 0.15s; } .layerToolBtn:hover { background: var(--s1); } /* Was background:#1a1c38 — nearly identical to the default, so "on" was barely distinguishable from "off" (2026-07-05 fix: a real gold tint + glow). */ .layerToolBtn.active { background: rgba(212,175,55,0.14); box-shadow: inset 0 0 0 1px rgba(212,175,55,0.3); } /* PHASE 1 FOUNDATION: the three dropdown-arrow tool rows (Fib/RSI/Trendline) need position:relative to anchor their arrow's popup — was repeated as an inline style on each; now one modifier class. */ .layerToolBtn.hasDropdown { position: relative; } .ltbDrop { display: flex; align-items: center; gap: 2px; } .ltbArrow { font-size: 9px; color: #5d6068; cursor: pointer; } .toolDot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Per-tool accent color, keyed off each tool's own card id (was inline background on the dot itself — same seven colors, now named to their tool instead of repeated). */ #lyrSrCard .toolDot { background: #f23645; } #lyrVpCard .toolDot { background: #2962ff; } #lyrAtrCard .toolDot { background: #9598a1; } #lyrFibCard .toolDot { background: #d4af37; } #lyrRsiCard .toolDot { background: #9b59b6; } #lyrPatCard .toolDot { background: #26c6da; } #lyrTlCard .toolDot { background: #ff9800; } /* Hide/show checkbox per tool row (added 2026-07-05) — brought over from the old #layersList's per-layer checkbox now that that list is gone. Disabled (and visually dimmed via :disabled) until that tool actually has something to hide, except ATR, which has no chart drawing to toggle — its checkbox instead controls whether the persistent info readout is shown at all. */ .toolVis { accent-color: #d4af37; width: 12px; height: 12px; cursor: pointer; flex-shrink: 0; } .toolVis:disabled { opacity: 0.3; cursor: default; } .layerToolBtn .ltbName { font-family: 'Share Tech Mono', monospace; font-weight: 700; font-size: 11px; color: #9598a1; letter-spacing: 0.04em; transition: color 0.12s; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layerToolBtn.active .ltbName { color: #d4af37; } .layerToolBtn .ltbDesc { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #4a4e68; margin-left: auto; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } /* VP "live" auto-refresh toggle — mirrors #engAutoLabel's compact style */ #lyrVpAutoLabel { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #4a4e68; font-family: 'Inter', sans-serif; letter-spacing: 0.03em; cursor: pointer; user-select: none; flex-shrink: 0; padding-left: 6px; } #lyrVpAutoLabel input { accent-color: #d4af37; cursor: pointer; width: 10px; height: 10px; } #lyrVpAutoLabel.active { color: #d4af37; } /* CHAT pane */ #chatPane { flex-direction: row; padding: 0; overflow: hidden; } #chatList { width: 0; border-right: none; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; transition: width 0.18s ease; } #chatList.open { width: 110px; overflow-y: auto; border-right: 1px solid #1e222d; padding: 6px 5px; } /* TRADES pane — account summary bar */ #tradesSummaryBar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--s0); border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink: 0; } .tsbBlock { display: flex; flex-direction: column; } .tsbLabel { font-size: 7px; color: var(--txt3); font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; } .tsbValue { font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--txt2); } #tsbBalance { color: var(--gold); } #tsbNetPnl.pos { color: var(--green); } #tsbNetPnl.neg { color: var(--red); } #tsbNetPnl.flat { color: var(--txt2); } .tsbSep { width: 1px; height: 24px; background: rgba(255,255,255,0.06); flex-shrink: 0; margin: 0 2px; } #resetBalance { background: rgba(242,54,69,0.06); border: 1px solid rgba(242,54,69,0.2); color: var(--red); padding: 3px 8px; border-radius: var(--r-pill); cursor: pointer; font-size: 9px; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 3px; transition: all 0.15s; } /* PHASE 6 Task 1: was the one button on this page with no hover feedback at all. */ #resetBalance:hover { background: rgba(242,54,69,0.14); border-color: rgba(242,54,69,0.4); } #resetBalance .icon { width: 12px; height: 12px; opacity: 0.8; } #janeBalanceLabel { font-size: 9px; color: var(--gold); font-family: monospace; opacity: 0.8; margin-left: 6px; } /* ===== BRAIN STATE BANNER ===== */ #brainStateBanner { display: none; flex-direction: column; gap: 0; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .radarHeader { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; } .radarHeaderTitle { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; } .radarHeaderSub { font-size: 9px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; } #radarGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; } .radarCard { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 9px 10px; transition: all 0.12s; cursor: pointer; } .radarCard:hover { background: var(--s2); border-color: rgba(212,175,55,0.3); } .radarCard.bull { border-top: 2px solid var(--green); } .radarCard.bear { border-top: 2px solid var(--red); } .radarCard.range { border-top: 2px solid var(--gold); } .radarCard.idle { border-top: 2px solid var(--border2); } .radarCard.scanning { opacity: 0.5; animation: radarPulse 1s ease infinite; } .radarCard.cooling { cursor: not-allowed; } .radarCard.cooling .radarCardTop { opacity: 0.55; } .radarCardTop { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; border-radius: var(--r-xs); transition: all 0.12s; } .radarSym { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; color: var(--txt1); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radarBias { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 8px; padding: 1px 5px; border-radius: var(--r-pill); } .radarBias.bull { color: var(--green); background: rgba(8,153,129,0.12); } .radarBias.bear { color: var(--red); background: rgba(242,54,69,0.12); } .radarBias.range { color: var(--gold); background: var(--gold-dim); } .radarBias.idle { color: var(--txt3); background: rgba(255,255,255,0.04); } .radarConf { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; } .radarConf.high { color: var(--green); } .radarConf.mid { color: var(--gold); } .radarConf.low { color: var(--txt2); } .radarHypName { font-size: 8px; color: var(--txt2); font-family: 'Share Tech Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .radarConfBar { height: 2px; border-radius: var(--r-pill); background: var(--border2); overflow: hidden; } .radarConfFill { height: 100%; border-radius: var(--r-pill); transition: width 0.4s ease; } .radarConfFill.bull { background: var(--green); } .radarConfFill.bear { background: var(--red); } .radarConfFill.range { background: var(--gold); } .radarCard:has(.radarHypoSlot .ideaCard) { grid-column: 1 / -1; } .radarHypoSlot:not(:empty) { margin-top: 8px; } .radarHypoLoading, .radarHypoError { font-size: 9px; font-family: 'Share Tech Mono', monospace; padding: 6px 2px; color: var(--txt3); } .radarHypoError { color: var(--red); } .radarHypoTagLabel { font-size: 8px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; margin: 2px 0 4px; } .radarHypoMeta { font-size: 8px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; margin-top: 4px; } .radarHypoReask { color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .radarHypoReask:hover { opacity: 0.8; } #radarEmpty { text-align: center; padding: 30px 20px; color: var(--txt3); font-size: 10px; font-family: 'Share Tech Mono', monospace; } #radarScanBtn { flex: 1; } #radarProgress { font-size: 9px; color: var(--txt2); font-family: 'Share Tech Mono', monospace; } .radarScanRow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .radarTfSelect { background: var(--s2); border: 1px solid var(--border2); color: var(--txt1); border-radius: var(--r-sm); padding: 3px 6px; font-size: 9px; font-family: 'Share Tech Mono', monospace; cursor: pointer; } /* ===== PROXIMITY ALERT pulse ===== */ @keyframes zonePulse { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.6), 0 0 0 0 rgba(212,175,55,0.4); border-color: rgba(212,175,55,0.7); } 50% { box-shadow: 0 0 0 6px rgba(212,175,55,0.15), 0 0 0 12px rgba(212,175,55,0.05); border-color: rgba(212,175,55,1); } 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0), 0 0 0 0 rgba(212,175,55,0); border-color: rgba(212,175,55,0.7); } }