Spaces:
Running
Running
Khanna, Videh Rakesh Rakesh
Force 1D range-only, volatility-scaled ML caps, sector-mode Top Picks, self-learning throttle + collapsible panel
17b15cc | /* ── Reset & base ─────────────────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #0d0f17; | |
| --bg2: #13161f; | |
| --bg3: #1c2030; | |
| --bg4: #242840; | |
| --border: #2a2e42; | |
| --border2: #353a54; | |
| --text: #e2e8f0; | |
| --text-muted: #8892a4; | |
| --text-dim: #5a6278; | |
| --accent: #6366f1; | |
| --accent2: #818cf8; | |
| --accent-dim: rgba(99,102,241,0.15); | |
| --green: #22c55e; | |
| --green-dim: rgba(34,197,94,0.12); | |
| --red: #ef4444; | |
| --red-dim: rgba(239,68,68,0.12); | |
| --yellow: #f59e0b; | |
| --yellow-dim: rgba(245,158,11,0.12); | |
| --blue: #38bdf8; | |
| --sidebar-w: 220px; | |
| --topbar-h: 48px; | |
| --radius: 10px; | |
| --radius-sm: 6px; | |
| --radius-lg: 14px; | |
| --shadow: 0 4px 24px rgba(0,0,0,0.5); | |
| --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); | |
| font-size: 14px; | |
| } | |
| html, body { height: 100%; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| display: flex; | |
| overflow: hidden; | |
| } | |
| /* ── Sidebar ────────────────────────────────────────────────────────────────── */ | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| min-height: 100vh; | |
| background: var(--bg2); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| overflow-y: auto; | |
| } | |
| .sidebar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 20px 16px 18px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .brand-mark { | |
| font-size: 20px; | |
| color: var(--accent); | |
| line-height: 1; | |
| } | |
| .brand-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.3px; } | |
| .brand-sub { display: block; font-size: 10px; color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase; } | |
| .sidebar-nav { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 12px 8px; | |
| gap: 2px; | |
| flex: 1; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: background .12s, color .12s; | |
| cursor: pointer; | |
| } | |
| .nav-item:hover { background: var(--bg3); color: var(--text); } | |
| .nav-item.active { | |
| background: var(--accent-dim); | |
| color: var(--accent2); | |
| } | |
| .nav-icon { font-size: 12px; opacity: 0.7; width: 16px; text-align: center; } | |
| .nav-item.active .nav-icon { opacity: 1; } | |
| .sidebar-footer { | |
| padding: 14px 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .sidebar-footer-text { font-size: 10px; color: var(--text-dim); letter-spacing: .3px; } | |
| /* ── Main wrapper ───────────────────────────────────────────────────────────── */ | |
| .main-wrapper { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| /* ── Global Market Bar ──────────────────────────────────────────────────────── */ | |
| .global-market-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 0; | |
| background: var(--bg2); | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 24px; | |
| height: var(--topbar-h); | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| flex-shrink: 0; | |
| } | |
| .market-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 0 20px 0 0; | |
| margin-right: 20px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .market-item:last-child { border-right: none; margin-right: 0; padding-right: 0; } | |
| .market-item--right { margin-left: auto; } | |
| .market-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; } | |
| .market-value { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } | |
| .market-ok { color: var(--green); } | |
| .market-warn { color: var(--yellow); } | |
| .market-bad { color: var(--red); } | |
| /* ── Views ──────────────────────────────────────────────────────────────────── */ | |
| .view { display: none; padding: 28px 28px 60px; width: 100%; box-sizing: border-box; } | |
| .view.active { display: block; } | |
| .hidden { display: none ; } | |
| .view-header { margin-bottom: 24px; } | |
| .view-header--row { display: flex; align-items: flex-start; justify-content: space-between; } | |
| .view-title { font-size: 22px; font-weight: 700; letter-spacing: -.5px; } | |
| .view-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; max-width: 680px; } | |
| .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } | |
| .section-title { font-size: 15px; font-weight: 600; } | |
| /* ── Toolbar ────────────────────────────────────────────────────────────────── */ | |
| .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } | |
| .toolbar-hint { font-size: 12px; color: var(--text-muted); } | |
| .toolbar-search { flex: 1; min-width: 240px; max-width: 380px; } | |
| /* ── Buttons ────────────────────────────────────────────────────────────────── */ | |
| .btn-primary { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| background: var(--accent); color: #fff; | |
| border: none; border-radius: var(--radius-sm); | |
| padding: 9px 18px; font-size: 13px; font-weight: 600; | |
| cursor: pointer; transition: background .12s, opacity .12s; | |
| white-space: nowrap; | |
| } | |
| .btn-primary:hover { background: var(--accent2); } | |
| .btn-primary:disabled { opacity: .45; cursor: not-allowed; } | |
| .btn-ghost { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| background: transparent; color: var(--text-muted); | |
| border: 1px solid var(--border2); border-radius: var(--radius-sm); | |
| padding: 8px 14px; font-size: 12px; font-weight: 500; | |
| cursor: pointer; transition: background .12s, color .12s; | |
| white-space: nowrap; text-decoration: none; | |
| } | |
| .btn-ghost:hover { background: var(--bg3); color: var(--text); } | |
| .btn-sm { padding: 5px 10px; font-size: 11px; } | |
| .btn-danger { | |
| background: transparent; color: var(--red); | |
| border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-sm); | |
| padding: 5px 10px; font-size: 11px; cursor: pointer; transition: background .12s; | |
| } | |
| .btn-danger:hover { background: var(--red-dim); } | |
| .btn-icon { font-size: 11px; } | |
| /* ── Info Callout ───────────────────────────────────────────────────────────── */ | |
| .info-callout { | |
| display: flex; gap: 12px; align-items: flex-start; | |
| background: var(--accent-dim); border: 1px solid rgba(99,102,241,.25); | |
| border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; | |
| } | |
| .callout-icon { font-size: 16px; color: var(--accent2); flex-shrink: 0; margin-top: 1px; } | |
| .info-callout p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } | |
| .info-callout strong { color: var(--text); } | |
| /* ── Form ───────────────────────────────────────────────────────────────────── */ | |
| .form-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 24px; | |
| } | |
| .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } | |
| .form-group:last-child { margin-bottom: 0; } | |
| .form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .3px; text-transform: uppercase; } | |
| input[type="text"], | |
| input[type="number"], | |
| input[type="date"], | |
| select { | |
| background: var(--bg3); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); color: var(--text); | |
| padding: 9px 12px; font-size: 13px; width: 100%; | |
| transition: border-color .12s; | |
| outline: none; | |
| } | |
| input:focus, select:focus { border-color: var(--accent); } | |
| input::placeholder { color: var(--text-dim); } | |
| .form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| /* ── Timeframe Pills ────────────────────────────────────────────────────────── */ | |
| .tf-pills { display: flex; gap: 6px; } | |
| .tf-pill { | |
| padding: 7px 20px; border-radius: 20px; | |
| border: 1px solid var(--border2); | |
| background: transparent; color: var(--text-muted); | |
| font-size: 13px; font-weight: 600; cursor: pointer; | |
| transition: background .12s, color .12s, border-color .12s; | |
| } | |
| .tf-pill:hover { background: var(--bg3); color: var(--text); } | |
| .tf-pill.active { | |
| background: var(--accent-dim); color: var(--accent2); | |
| border-color: var(--accent); | |
| } | |
| /* ── Ticker Tag Input ───────────────────────────────────────────────────────── */ | |
| .ticker-input-wrap { position: relative; } | |
| .suggestions { | |
| position: absolute; top: calc(100% + 4px); left: 0; right: 0; | |
| background: var(--bg3); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); z-index: 100; | |
| max-height: 200px; overflow-y: auto; box-shadow: var(--shadow); | |
| } | |
| .suggestion-item { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 9px 12px; cursor: pointer; transition: background .1s; | |
| } | |
| .suggestion-item:hover { background: var(--bg4); } | |
| .suggestion-ticker { font-family: monospace; font-size: 12px; font-weight: 700; color: var(--accent2); } | |
| .suggestion-name { font-size: 12px; color: var(--text-muted); } | |
| .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 0; } | |
| .tag { | |
| display: inline-flex; align-items: center; gap: 5px; | |
| background: var(--accent-dim); color: var(--accent2); | |
| border: 1px solid rgba(99,102,241,.25); border-radius: 4px; | |
| padding: 3px 8px; font-size: 11px; font-family: monospace; font-weight: 600; | |
| } | |
| .tag-remove { cursor: pointer; color: var(--text-muted); transition: color .1s; font-size: 13px; line-height: 1; } | |
| .tag-remove:hover { color: var(--red); } | |
| /* ── Loading ────────────────────────────────────────────────────────────────── */ | |
| .loading-block { | |
| display: flex; flex-direction: column; align-items: center; | |
| gap: 16px; padding: 60px 0; text-align: center; color: var(--text-muted); | |
| } | |
| .loading-inline { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| color: var(--text-muted); font-size: 13px; padding: 8px 0; | |
| } | |
| .spinner { | |
| width: 36px; height: 36px; border-radius: 50%; | |
| border: 3px solid var(--border); border-top-color: var(--accent); | |
| animation: spin .7s linear infinite; | |
| } | |
| .spinner-sm { | |
| width: 16px; height: 16px; border-radius: 50%; | |
| border: 2px solid var(--border); border-top-color: var(--accent); | |
| animation: spin .7s linear infinite; display: inline-block; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ── Skeleton loading shimmer ───────────────────────────────────────────────── */ | |
| .skel-row { | |
| height: 13px; border-radius: 6px; margin-bottom: 10px; width: 100%; | |
| background: linear-gradient(90deg, var(--border) 25%, var(--bg3) 50%, var(--border) 75%); | |
| background-size: 200% 100%; | |
| animation: skel-shimmer 1.4s ease-in-out infinite; | |
| } | |
| .skel-row--sm { width: 55%; height: 10px; } | |
| .skel-row--wide { width: 88%; } | |
| @keyframes skel-shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* ── Dashboard Strip ────────────────────────────────────────────────────────── */ | |
| .dashboard-strip { | |
| display: grid; grid-template-columns: repeat(5, 1fr); | |
| gap: 12px; margin-bottom: 28px; | |
| } | |
| .strip-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 16px; | |
| display: flex; flex-direction: column; gap: 6px; | |
| } | |
| .strip-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } | |
| .strip-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } | |
| /* ── Picks Grid (Top 5 / Dashboard preview) ─────────────────────────────────── */ | |
| .picks-grid { display: flex; flex-direction: column; gap: 16px; } | |
| /* Streaming progress banner shown above ready top-pick cards while more compute. */ | |
| .top5-stream-banner { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 10px 14px; border-radius: var(--radius); | |
| background: rgba(59, 130, 246, 0.08); | |
| border: 1px solid rgba(59, 130, 246, 0.25); | |
| color: var(--text-muted); font-size: 13px; font-weight: 500; | |
| } | |
| .pick-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); overflow: hidden; | |
| transition: border-color .15s; | |
| } | |
| .pick-card:hover { border-color: var(--border2); } | |
| .pick-card.bullish { border-color: rgba(34,197,94,.2); } | |
| .pick-card.bearish { border-color: rgba(239,68,68,.2); } | |
| .pick-header { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 12px 16px; border-bottom: 1px solid var(--border); | |
| } | |
| .pick-rank { font-size: 20px; font-weight: 800; color: var(--text-dim); width: 28px; flex-shrink: 0; } | |
| /* Stock identity block */ | |
| .pick-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; } | |
| .pick-symbol-row { display: flex; align-items: baseline; gap: 6px; } | |
| .pick-symbol { font-family: monospace; font-size: 14px; font-weight: 700; color: var(--accent2); letter-spacing: .02em; } | |
| .pick-exchange { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; | |
| color: var(--text-dim); background: var(--bg3); border: 1px solid var(--border); | |
| border-radius: 3px; padding: 1px 4px; position: relative; top: -1px; } | |
| .pick-name { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } | |
| .pick-price-badge { font-size: 11px; font-weight: 600; color: var(--text-dim); | |
| background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; | |
| padding: 2px 6px; white-space: nowrap; flex-shrink: 0; align-self: center; margin-left: 4px; } | |
| /* legacy — kept for pred-card compatibility */ | |
| .pick-ticker { font-family: monospace; font-size: 16px; font-weight: 700; color: var(--accent2); } | |
| .pick-company { font-size: 12px; color: var(--text-muted); margin-top: 2px; } | |
| .pick-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; } | |
| /* Compact stock cell for trade tables */ | |
| .sc-wrap { display: flex; flex-direction: column; gap: 1px; } | |
| .sc-sym-row { display: flex; align-items: baseline; gap: 5px; } | |
| .sc-sym { font-family: monospace; font-size: 12px; font-weight: 700; color: var(--accent2); letter-spacing: .02em; } | |
| .sc-exch { font-size: 8px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; | |
| color: var(--text-dim); background: var(--bg3); border: 1px solid var(--border); | |
| border-radius: 3px; padding: 1px 3px; position: relative; top: -1px; } | |
| .sc-name { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } | |
| .pick-body { display: grid; grid-template-columns: 1fr 320px; gap: 0; } | |
| .pick-signals { padding: 12px 16px; } | |
| .wl-summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 6px; | |
| margin-bottom: 10px; | |
| } | |
| .wl-summary-item { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 6px 8px; | |
| transition: border-color .15s; | |
| } | |
| .wl-summary-item[onclick]:hover { border-color: var(--border2); } | |
| .wl-summary-label { | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| } | |
| .wl-summary-value { | |
| margin-top: 2px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .tf-grid { | |
| display: grid; grid-template-columns: repeat(2, 1fr); | |
| gap: 6px; margin-bottom: 12px; | |
| } | |
| .tf-cell { | |
| background: var(--bg3); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; | |
| display: flex; flex-direction: column; align-items: center; justify-content: flex-start; | |
| gap: 4px; | |
| } | |
| .tf-cell--best { | |
| border-color: var(--green); | |
| background: rgba(34, 197, 94, 0.06); | |
| } | |
| .tf-cell--loading { | |
| justify-content: center; | |
| opacity: .75; | |
| } | |
| .tf-cell-spinner { | |
| font-size: 20px; | |
| color: var(--text-muted); | |
| animation: tf-spin .9s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes tf-spin { to { transform: rotate(360deg); } } | |
| .best-tf-badge { | |
| display: inline-flex; align-items: center; | |
| font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; | |
| color: var(--green); | |
| background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); | |
| border-radius: 3px; padding: 1px 5px; margin-bottom: 2px; | |
| } | |
| .tf-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } | |
| .tf-final-call { | |
| display: inline-flex; align-items: center; gap: 3px; | |
| font-size: 9px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; | |
| color: var(--yellow); | |
| background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.3); | |
| border-radius: 3px; padding: 1px 5px; margin: 1px 0 2px; | |
| } | |
| .tf-cell--final { border-color: rgba(234, 179, 8, 0.35); } | |
| .tf-return { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } | |
| .no-trade-label { font-size: 13px; font-weight: 500; color: var(--text-muted); font-style: italic; } | |
| .tf-no-trade-reason { | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| line-height: 1.35; | |
| max-width: 150px; | |
| } | |
| .tf-forecast { font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-top: 2px; } | |
| .tf-ai-target { font-size: 12px; font-weight: 700; letter-spacing: .2px; margin-top: 2px; border-top: 1px solid var(--border); padding-top: 3px; font-variant-numeric: tabular-nums; } | |
| .tf-ai-note { font-size: 10px; color: var(--text-dim); margin-top: 3px; } | |
| .tf-ai-forecast { font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-top: 2px; } | |
| .tf-ai-reason { font-size: 10px; color: var(--text-muted); font-style: italic; margin-top: 2px; white-space: normal; word-break: break-word; max-width: 100%; } | |
| .ai-buy-chip { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 1px 5px; border-radius: 3px; margin-right: 3px; vertical-align: middle; } | |
| .ai-buy-yes { background: rgba(34,197,94,.18); color: #22c55e; } | |
| .ai-buy-no { background: rgba(107,114,128,.18); color: var(--text-muted); } | |
| .ai-buy-sell { background: rgba(239,68,68,.18); color: #ef4444; } | |
| .ai-buy-hold { background: rgba(107,114,128,.18); color: var(--text-muted); } | |
| /* "AI" / "ML" section tags inside the forecast banner */ | |
| .fc-tag { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: .5px; padding: 1px 4px; border-radius: 3px; margin-right: 4px; vertical-align: middle; text-transform: uppercase; } | |
| .fc-tag-ai { background: rgba(99,102,241,.20); color: var(--accent, #818cf8); } | |
| .fc-tag-ml { background: rgba(56,189,248,.18); color: #38bdf8; } | |
| /* ML line sitting directly beneath the AI line inside the AI banner */ | |
| .tf-ml-forecast-line { font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-top: 2px; } | |
| /* ── ML vs AI two-row forecast block ─────────────────────────────────────── */ | |
| .tf-fc-block { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--border); } | |
| /* Big labelled divider that separates the AI section (top) from the ML section (below) */ | |
| .tf-ai-ml-sep { | |
| width: 100%; display: flex; align-items: center; gap: 8px; | |
| margin: 8px 0 4px; | |
| color: #38bdf8; font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; | |
| } | |
| .tf-ai-ml-sep::before, .tf-ai-ml-sep::after { | |
| content: ""; flex: 1; height: 2px; border-radius: 2px; | |
| } | |
| .tf-ai-ml-sep::before { background: linear-gradient(90deg, transparent, rgba(56,189,248,.5)); } | |
| .tf-ai-ml-sep::after { background: linear-gradient(90deg, rgba(56,189,248,.5), transparent); } | |
| .tf-ai-ml-sep-lbl { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } | |
| .tf-ml-block { position: relative; } | |
| .tf-ml-slot { min-height: 15px; } | |
| .tf-ml-forecast { font-size: 11px; font-weight: 600; letter-spacing: .3px; } | |
| .tf-ml-target { font-size: 12px; font-weight: 700; letter-spacing: .2px; font-variant-numeric: tabular-nums; } | |
| .tf-ml-head { font-size: 12px; font-weight: 700; letter-spacing: .2px; margin-bottom: 1px; font-variant-numeric: tabular-nums; } | |
| .tf-ml-price { font-size: 12px; font-weight: 700; letter-spacing: .2px; font-variant-numeric: tabular-nums; margin-top: 1px; } | |
| .tf-ml-dir { font-size: 11px; font-weight: 600; letter-spacing: .3px; display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 1px; } | |
| .tf-ml-conf { font-size: 11px; font-weight: 700; letter-spacing: .4px; margin-top: 1px; } | |
| .tf-ml-conf-lbl { color: var(--text-dim); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } | |
| .tf-ml-conf.conf-high { color: var(--green); } | |
| .tf-ml-conf.conf-medium { color: var(--yellow); } | |
| .tf-ml-conf.conf-low { color: var(--red); } | |
| .tf-ml-return { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } | |
| .tf-ml-mini-loader { font-size: 10px; color: var(--text-muted); opacity: .8; } | |
| .tf-ml-note { font-size: 8px; font-weight: 700; letter-spacing: .3px; margin-left: 4px; padding: 0 4px; border-radius: 3px; background: var(--bg3); color: var(--text-muted); vertical-align: middle; } | |
| .tf-ml-gone { background: rgba(234,179,8,.18); color: var(--yellow, #eab308); } | |
| .tf-ml-hold { background: rgba(107,114,128,.18); color: var(--text-muted); } | |
| .tf-ml-hiconv { background: rgba(139,92,246,.20); color: var(--purple, #8b5cf6); font-weight: 800; } | |
| .tf-agree-slot { min-height: 0; } | |
| .tf-agree { font-size: 9px; font-weight: 700; letter-spacing: .3px; margin-top: 2px; padding: 1px 5px; border-radius: 3px; display: inline-block; } | |
| .tf-agree-yes { background: rgba(34,197,94,.15); color: #22c55e; } | |
| .tf-agree-no { background: rgba(234,179,8,.15); color: var(--yellow, #eab308); } | |
| .tf-agree-soft { background: rgba(148,163,184,.15); color: var(--text-muted, #94a3b8); } | |
| /* ── Top-pick ranking toggle (AI / Blend / ML) ───────────────────────────── */ | |
| .top5-sort-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; grid-column: 1 / -1; } | |
| .top5-sort-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: .3px; } | |
| .top5-sort-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 6px; cursor: pointer; background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim); } | |
| .top5-sort-btn:hover { border-color: var(--border2); } | |
| .top5-sort-btn.active { background: var(--accent, #6366f1); border-color: var(--accent, #6366f1); color: #fff; } | |
| .top5-sort-hint { font-size: 10px; color: var(--text-dim); font-style: italic; margin-left: auto; } | |
| /* ── Validation model source toggle (AI / ML / Both) ─────────────────────── */ | |
| .val-source-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } | |
| .val-source-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: .3px; } | |
| .val-source-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 6px; cursor: pointer; background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim); } | |
| .val-source-btn:hover { border-color: var(--border2); } | |
| .val-source-btn.active { background: var(--accent, #6366f1); border-color: var(--accent, #6366f1); color: #fff; } | |
| .val-source-hint { font-size: 11px; color: var(--text-muted); margin-left: auto; font-weight: 600; } | |
| .news-ai-divergence { margin-top: 8px; font-size: 11px; color: var(--text-muted); line-height: 1.35; } | |
| .tf-prices { font-size: 12px; font-family: monospace; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); } | |
| .tf-mid-target { font-size: 10px; color: var(--text-muted); margin-top: 1px; } | |
| .tf-range-bound { font-style: italic; color: var(--text-dim, #94a3b8); } | |
| .tf-dir { font-size: 11px; color: var(--text-muted); } | |
| .tf-dir-row { display: flex; align-items: center; gap: 4px; justify-content: center; } | |
| .tf-chips { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; } | |
| /* Direction dot */ | |
| .dir-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } | |
| .dir-dot-BULLISH { background: var(--green); box-shadow: 0 0 4px var(--green); } | |
| .dir-dot-SLIGHTLY-BULLISH { background: #86efac; } | |
| .dir-dot-NEUTRAL { background: var(--text-dim); } | |
| .dir-dot-SLIGHTLY-BEARISH { background: #fca5a5; } | |
| .dir-dot-BEARISH { background: var(--red); box-shadow: 0 0 4px var(--red); } | |
| .dir-dot-NO-TRADE { background: var(--yellow); } | |
| /* Risk block: Entry / SL / Target rows */ | |
| .tf-risk { | |
| width: 100%; font-size: 11px; font-family: monospace; | |
| display: flex; flex-direction: column; gap: 3px; | |
| background: var(--bg4); border-radius: 4px; padding: 6px 8px; | |
| margin-top: 2px; | |
| } | |
| .tf-risk-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; } | |
| .tf-entry-lbl, .tf-sl-lbl, .tf-tgt-lbl { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; } | |
| .tf-entry-val { color: var(--text); font-weight: 600; } | |
| .tf-sl-val { color: var(--red); font-weight: 600; } | |
| .tf-tgt-lbl { color: var(--text-dim); } | |
| .tf-risk.rr-ok .tf-tgt-val { color: var(--green); font-weight: 600; } | |
| .tf-risk.rr-miss .tf-tgt-val { color: #f59e0b; font-weight: 600; } | |
| .tf-tgt-val { font-weight: 600; } | |
| /* R:R progress bar */ | |
| .rr-bar { width: 100%; height: 3px; background: var(--bg); border-radius: 2px; margin-top: 3px; overflow: hidden; } | |
| .rr-bar-fill { height: 100%; background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%); border-radius: 2px; } | |
| /* Confidence bar (AI = bucket %, ML = calibrated probability) */ | |
| .tf-conf-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; } | |
| .tf-conf-lbl { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; } | |
| .conf-bar { flex: 1; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; } | |
| .conf-bar-fill { height: 100%; border-radius: 2px; background: var(--accent); } | |
| .conf-bar-fill.conf-high { background: var(--green); } | |
| .conf-bar-fill.conf-medium { background: var(--yellow); } | |
| .conf-bar-fill.conf-low { background: var(--red); } | |
| .conf-bar-fill.conf-ml { background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%); } | |
| .tf-conf-val { font-size: 11px; font-weight: 700; letter-spacing: .4px; white-space: nowrap; } | |
| .tf-conf-val.conf-high { color: var(--green); } | |
| .tf-conf-val.conf-medium { color: var(--yellow); } | |
| .tf-conf-val.conf-low { color: var(--red); } | |
| /* ML risk block: buy / SL / target, shown beneath the AI risk block */ | |
| .tf-ml-risk { | |
| width: 100%; font-size: 11px; font-family: monospace; | |
| display: flex; flex-direction: column; gap: 3px; | |
| background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; | |
| margin-top: 3px; | |
| } | |
| .tf-ml-risk-hdr { color: var(--text-dim); font-size: 10px; font-weight: 600; letter-spacing: .3px; } | |
| .tf-ml-risk-title { | |
| color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .5px; | |
| text-transform: uppercase; margin-bottom: 2px; | |
| } | |
| /* +N more chip indicator */ | |
| .sig-more { font-size: 10px; color: var(--text-dim); padding: 2px 4px; } | |
| .pick-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } | |
| .pick-signals-row { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .pick-chart { border-left: 1px solid var(--border); } | |
| /* ── Signal Chips ───────────────────────────────────────────────────────────── */ | |
| .sig-chip { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| padding: 2px 7px; border-radius: 4px; font-size: 10px; | |
| font-weight: 700; letter-spacing: .3px; | |
| } | |
| .sig-chip.active { background: var(--accent-dim); color: var(--accent2); border: 1px solid rgba(99,102,241,.3); } | |
| .sig-chip.inactive { background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); } | |
| .sig-chip-sm { font-size: 11px; padding: 2px 7px; } | |
| /* ── Confidence / Direction ─────────────────────────────────────────────────── */ | |
| .conf-pill { | |
| display: inline-flex; align-items: center; | |
| padding: 2px 8px; border-radius: 12px; | |
| font-size: 10px; font-weight: 700; letter-spacing: .3px; | |
| } | |
| .conf-HIGH { background: rgba(34,197,94,.15); color: var(--green); border: 1px solid rgba(34,197,94,.3); } | |
| .conf-MEDIUM { background: rgba(245,158,11,.15); color: var(--yellow); border: 1px solid rgba(245,158,11,.3); } | |
| .conf-LOW { background: var(--bg3); color: var(--text-muted); border: 1px solid var(--border); } | |
| .dir-badge { | |
| display: inline-flex; align-items: center; | |
| padding: 2px 7px; border-radius: 4px; | |
| font-size: 10px; font-weight: 700; | |
| } | |
| .dir-BULLISH { color: var(--green); background: var(--green-dim); } | |
| .dir-SLIGHTLY-BULLISH { color: #86efac; background: rgba(134,239,172,.1); } | |
| .dir-NEUTRAL { color: var(--text-muted); background: var(--bg3); } | |
| .dir-SLIGHTLY-BEARISH { color: #fca5a5; background: rgba(252,165,165,.1); } | |
| .dir-BEARISH { color: var(--red); background: var(--red-dim); } | |
| .dir-NO-TRADE, | |
| .dir-BLOCKED { color: var(--yellow); background: var(--yellow-dim); } | |
| /* ── Prediction Cards (Predict view) ────────────────────────────────────────── */ | |
| .results-grid { display: flex; flex-direction: column; gap: 16px; } | |
| .pred-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); overflow: hidden; | |
| } | |
| .pred-card.bullish { border-color: rgba(34,197,94,.2); } | |
| .pred-card.bearish { border-color: rgba(239,68,68,.2); } | |
| .pred-card.blocked { border-color: rgba(245,158,11,.2); } | |
| .pred-header { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 10px 14px; border-bottom: 1px solid var(--border); | |
| } | |
| .pred-ticker { font-family: monospace; font-size: 15px; font-weight: 700; color: var(--accent2); } | |
| .pred-company { font-size: 11px; color: var(--text-muted); margin-top: 1px; } | |
| .pred-actions { margin-left: auto; display: flex; gap: 6px; } | |
| .pred-body { display: grid; grid-template-columns: 1fr 320px; } | |
| .pred-info { padding: 12px 14px; } | |
| /* Entry + target price block */ | |
| .price-targets { | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .pt-row { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .pt-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| color: var(--text-dim); | |
| min-width: 40px; | |
| } | |
| .pt-entry { | |
| font-family: monospace; | |
| font-size: 18px; | |
| font-weight: 800; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text); | |
| } | |
| .pt-range { | |
| font-family: monospace; | |
| font-size: 15px; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .pt-target { | |
| font-family: monospace; | |
| font-size: 15px; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .pt-pct { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .pred-period { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } | |
| .pred-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } | |
| /* ── Risk Strip (stop loss + target) ────────────────────────────────────────── */ | |
| .risk-strip { | |
| display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; | |
| } | |
| .risk-item { | |
| flex: 1; border-radius: var(--radius-sm); padding: 8px 10px; | |
| display: flex; flex-direction: column; gap: 2px; | |
| } | |
| .risk-sl { background: var(--red-dim); border: 1px solid rgba(239,68,68,.25); } | |
| .risk-tgt { background: var(--green-dim); border: 1px solid rgba(34,197,94,.25); } | |
| .risk-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); } | |
| .risk-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } | |
| .risk-sl .risk-val { color: var(--red); } | |
| .risk-tgt .risk-val { color: var(--green); } | |
| .risk-pct { font-size: 11px; color: var(--text-muted); } | |
| .rr-warn { | |
| width: 100%; font-size: 11px; color: #f59e0b; | |
| background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); | |
| border-radius: var(--radius-sm); padding: 5px 10px; margin-top: 4px; | |
| } | |
| .pred-section { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 10px; } | |
| .ml-bar-wrap { display: flex; align-items: center; gap: 8px; } | |
| .ml-bar-track { flex: 1; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; } | |
| .ml-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s; } | |
| .ml-score-lbl { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; } | |
| .news-block { | |
| background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); | |
| padding: 8px 10px; margin-top: 8px; transition: border-color .15s; | |
| } | |
| .news-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; } | |
| .news-sum { font-size: 12px; color: var(--text-muted); line-height: 1.5; } | |
| .news-block:hover { border-color: var(--border2); } | |
| /* News modal */ | |
| .news-modal-list { display: flex; flex-direction: column; gap: 10px; } | |
| .news-modal-item { display: flex; gap: 10px; align-items: flex-start; } | |
| .news-modal-num { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-muted); width: 16px; padding-top: 1px; } | |
| .news-modal-text { font-size: 13px; color: var(--text); line-height: 1.5; } | |
| .earnings-warn { | |
| background: var(--yellow-dim); border: 1px solid rgba(245,158,11,.3); | |
| border-radius: var(--radius-sm); padding: 6px 10px; margin-top: 8px; | |
| font-size: 11px; color: var(--yellow); | |
| } | |
| .key-levels { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } | |
| .kl-item { font-size: 11px; color: var(--text-muted); } | |
| .kl-val { font-family: monospace; font-weight: 600; color: var(--text); } | |
| .alloc-block { | |
| background: var(--green-dim); border: 1px solid rgba(34,197,94,.2); | |
| border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 10px; | |
| font-size: 12px; color: var(--green); | |
| } | |
| .pred-chart { border-left: 1px solid var(--border); } | |
| .tv-chart-container { | |
| width: 100%; | |
| height: 260px; | |
| background: var(--bg3); | |
| } | |
| /* ── Chart wrap + interval toggle ────────────────────────────────────────── */ | |
| .chart-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .chart-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 6px 10px; | |
| background: var(--bg2); | |
| border-bottom: 1px solid var(--border); | |
| font-size: 11px; | |
| } | |
| .chart-ticker-label { color: var(--text-muted); font-weight: 600; } | |
| .chart-delay { font-weight: 400; opacity: .7; } | |
| .chart-iv-pills { display: flex; gap: 4px; } | |
| .chart-iv-pill { | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: background .15s, color .15s; | |
| } | |
| .chart-iv-pill.active, | |
| .chart-iv-pill:hover { | |
| background: var(--accent); | |
| color: #fff; | |
| border-color: var(--accent); | |
| } | |
| /* ── Rank Table ─────────────────────────────────────────────────────────────── */ | |
| .rank-section { margin-bottom: 24px; } | |
| .rank-section-title { | |
| font-size: 13px; font-weight: 600; margin-bottom: 10px; | |
| padding: 6px 0; border-bottom: 1px solid var(--border); | |
| } | |
| .rank-section-title.good { color: var(--green); } | |
| .rank-section-title.bad { color: var(--red); } | |
| .rank-section-title.warn { color: var(--yellow); } | |
| .rank-table { width: 100%; border-collapse: collapse; } | |
| .rank-table th { | |
| text-align: left; padding: 9px 12px; | |
| font-size: 11px; color: var(--text-dim); font-weight: 600; | |
| text-transform: uppercase; letter-spacing: .4px; | |
| background: var(--bg2); border-bottom: 1px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| .rank-table td { | |
| padding: 11px 12px; border-bottom: 1px solid var(--border); | |
| font-size: 13px; vertical-align: middle; | |
| } | |
| .rank-table tr:hover td { background: rgba(255,255,255,.02); } | |
| .rank-table tr:last-child td { border-bottom: none; } | |
| .rank-num { font-size: 14px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } | |
| .rank-ticker { font-family: monospace; font-weight: 700; color: var(--accent2); font-size: 13px; } | |
| .rank-co { font-size: 11px; color: var(--text-muted); margin-top: 1px; } | |
| .rank-ret { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } | |
| .ml-mini { display: flex; align-items: center; gap: 6px; } | |
| .ml-mini-bar { width: 48px; height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; } | |
| .ml-mini-fill { height: 100%; background: var(--accent); border-radius: 2px; } | |
| .ml-mini-score { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-muted); } | |
| /* ── Watchlist ──────────────────────────────────────────────────────────────── */ | |
| .watchlist-list { display: flex; flex-direction: column; gap: 8px; } | |
| .wl-row { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); overflow: hidden; | |
| } | |
| .wl-row-header { | |
| display: flex; align-items: center; gap: 14px; | |
| padding: 14px 16px; cursor: pointer; user-select: none; | |
| transition: background .12s; | |
| } | |
| .wl-row-header:hover { background: var(--bg3); } | |
| .wl-ticker { font-family: monospace; font-size: 14px; font-weight: 700; color: var(--accent2); } | |
| .wl-name { font-size: 12px; color: var(--text-muted); } | |
| .wl-actions { margin-left: auto; display: flex; gap: 8px; } | |
| .wl-chevron { color: var(--text-dim); font-size: 12px; transition: transform .2s; } | |
| .wl-row.open .wl-chevron { transform: rotate(90deg); } | |
| .wl-expanded { display: none; border-top: 1px solid var(--border); } | |
| .wl-row.open .wl-expanded { display: block; } | |
| .wl-expanded-body { display: flex; flex-direction: column; } | |
| .wl-tf-bar { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 12px 16px; border-bottom: 1px solid var(--border); | |
| background: var(--bg3); | |
| } | |
| .wl-tf-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; } | |
| .wl-chart-area { height: 340px; } | |
| .wl-pred-area { padding: 8px 0; } | |
| .wl-pred-area .pred-card { border-radius: 0; border-left: none; border-right: none; border-bottom: none; } | |
| /* ── Portfolio / Trade Tables ───────────────────────────────────────────────── */ | |
| .portfolio-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } | |
| .ptab { | |
| padding: 10px 18px; background: none; border: none; | |
| color: var(--text-muted); font-size: 13px; font-weight: 500; | |
| cursor: pointer; border-bottom: 2px solid transparent; | |
| transition: color .12s, border-color .12s; | |
| } | |
| .ptab:hover { color: var(--text); } | |
| .ptab.active { color: var(--accent2); border-bottom-color: var(--accent); } | |
| .ptab-content { display: none; } | |
| .ptab-content.active { display: block; } | |
| /* ── Validation view ────────────────────────────────────────────────────────── */ | |
| .validation-stats { | |
| display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .vstat-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 16px 18px; | |
| display: flex; flex-direction: column; gap: 4px; | |
| } | |
| .vstat-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; } | |
| .vstat-val { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; } | |
| .vstat-sub { font-size: 11px; color: var(--text-muted); } | |
| .validation-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } | |
| .vtab { | |
| background: none; border: none; padding: 8px 16px 10px; | |
| font-size: 13px; font-weight: 500; color: var(--text-muted); | |
| cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; | |
| transition: color .15s; display: flex; align-items: center; gap: 6px; | |
| } | |
| .vtab:hover { color: var(--text); } | |
| .vtab.active { color: var(--accent2); border-bottom-color: var(--accent2); } | |
| .vtab-content { display: none; } | |
| .vtab-content.active { display: block; } | |
| .validation-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 14px 16px; | |
| margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; | |
| } | |
| .val-header { | |
| display: flex; align-items: center; gap: 10px; | |
| } | |
| .val-ticker { font-size: 13px; font-weight: 700; color: var(--text); } | |
| .val-tf { font-size: 10px; color: var(--text-muted); text-transform: uppercase; } | |
| .val-conf { | |
| font-size: 10px; font-weight: 600; text-transform: uppercase; | |
| padding: 2px 8px; border-radius: 4px; | |
| } | |
| .val-conf.HIGH { background: rgba(34,197,94,0.15); color: var(--green); } | |
| .val-conf.MEDIUM { background: rgba(245,158,11,0.15); color: var(--yellow); } | |
| .val-conf.LOW { background: rgba(239,68,68,0.15); color: var(--red); } | |
| .val-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } | |
| .val-item { display: flex; flex-direction: column; gap: 4px; } | |
| .val-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; } | |
| .val-price { font-size: 14px; font-weight: 600; color: var(--text); } | |
| .val-range { font-size: 13px; color: var(--accent2); font-weight: 500; } | |
| .val-date { font-size: 12px; color: var(--text-muted); } | |
| .validation-card.val-overdue { border-left: 3px solid var(--yellow); } | |
| .val-overdue-badge { | |
| font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; | |
| padding: 2px 6px; border-radius: 4px; | |
| background: rgba(245,158,11,0.2); color: var(--yellow); | |
| } | |
| .val-toast { | |
| position: fixed; bottom: 24px; right: 24px; z-index: 9999; | |
| background: var(--bg2); border: 1px solid var(--green); border-radius: var(--radius); | |
| color: var(--text); font-size: 13px; font-weight: 600; | |
| padding: 10px 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); | |
| animation: fadeInUp 0.3s ease; | |
| } | |
| .val-toast-hit { color: var(--green); } | |
| .val-toast-miss { color: var(--red, #e55); } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(12px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .ai-learn-panel { | |
| background: var(--bg2); border: 1px solid var(--accent); | |
| border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; | |
| } | |
| .ai-learn-panel.hidden { display: none; } | |
| .ai-learn-toggle { | |
| display: flex; align-items: center; gap: 10px; | |
| cursor: pointer; user-select: none; | |
| } | |
| .ai-learn-toggle-title { font-weight: 700; font-size: 13px; color: var(--accent); } | |
| .ai-learn-toggle-meta { font-size: 12px; color: var(--text2); margin-left: auto; } | |
| .ai-learn-chevron { | |
| font-size: 12px; color: var(--text2); | |
| transition: transform 0.15s ease; | |
| } | |
| .ai-learn-panel:not(.collapsed) .ai-learn-chevron { transform: rotate(90deg); } | |
| .ai-learn-body { margin-top: 12px; } | |
| .ai-learn-panel.collapsed .ai-learn-body { display: none; } | |
| .ai-learn-header { | |
| display: flex; align-items: center; gap: 12px; margin-bottom: 10px; | |
| } | |
| .ai-learn-header--ml { | |
| margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); | |
| } | |
| .ai-learn-title { font-weight: 700; font-size: 13px; color: var(--accent); } | |
| .ai-learn-accuracy { font-size: 12px; color: var(--text2); } | |
| .ai-learn-notes { | |
| margin: 0; padding: 0 0 0 16px; list-style: disc; | |
| } | |
| .ai-learn-notes li { | |
| font-size: 12px; color: var(--text1); padding: 2px 0; line-height: 1.5; | |
| } | |
| .ai-learn-notes li.warn { color: var(--red); } | |
| .ai-learn-notes li.caution { color: var(--yellow); } | |
| .ai-learn-notes li.ok { color: var(--green); } | |
| .validation-history-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 14px 16px; | |
| margin-bottom: 12px; | |
| } | |
| .validation-history-card.hit { border-left: 4px solid var(--green); } | |
| .validation-history-card.miss { border-left: 4px solid var(--red); } | |
| .vh-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } | |
| .vh-ticker { font-size: 13px; font-weight: 700; color: var(--text); } | |
| .vh-tf { font-size: 10px; color: var(--text-muted); text-transform: uppercase; } | |
| .vh-result { | |
| font-size: 11px; font-weight: 700; text-transform: uppercase; | |
| padding: 3px 8px; border-radius: 4px; | |
| } | |
| .vh-result.vh-hit { background: rgba(34,197,94,0.2); color: var(--green); } | |
| .vh-result.vh-miss { background: rgba(239,68,68,0.2); color: var(--red); } | |
| .vh-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } | |
| .vh-item { display: flex; flex-direction: column; gap: 4px; } | |
| .vh-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; } | |
| .vh-range { font-size: 12px; color: var(--text-muted); font-weight: 500; } | |
| .vh-price { font-size: 13px; font-weight: 600; color: var(--text); } | |
| .vh-actual { font-size: 13px; font-weight: 600; color: var(--text); } | |
| .vh-actual-pct { font-size: 11px; font-weight: 400; color: var(--text-muted); } | |
| .vh-date { font-size: 12px; color: var(--text-muted); } | |
| .vh-miss-detail { font-size: 11px; color: var(--text-muted); margin-top: 4px; padding: 6px 8px; background: rgba(239,68,68,0.06); border-radius: 4px; } | |
| .vh-footer { display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } | |
| .miss-reason-badge { | |
| font-size: 10px; font-weight: 600; text-transform: uppercase; | |
| padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; | |
| } | |
| .src-tag { | |
| font-size: 10px; font-weight: 700; text-transform: uppercase; | |
| padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; | |
| } | |
| .src-tag--ai { background: rgba(59,130,246,0.18); color: #93c5fd; } | |
| .src-tag--ml { background: rgba(139,92,246,0.18); color: #c4b5fd; } | |
| .miss-reason--wrong-dir { background: rgba(239,68,68,0.2); color: var(--red); } | |
| .miss-reason--fell-short { background: rgba(245,158,11,0.18); color: var(--yellow); } | |
| .miss-reason--overbullish { background: rgba(34,197,94,0.15); color: var(--green); } | |
| .miss-reason--overbearish { background: rgba(139,92,246,0.18); color: #a78bfa; } | |
| .miss-reason--outperformed { background: rgba(59,130,246,0.18); color: #93c5fd; } | |
| .vh-hit-note { background: rgba(59,130,246,0.08); color: #93c5fd; } | |
| .vh-pct { font-size: 11px; color: var(--text-muted); } | |
| /* Graded price-hit badges (midpoint-hit priority → range → miss) */ | |
| .grade-badge { | |
| font-size: 10px; font-weight: 700; text-transform: uppercase; | |
| padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; | |
| } | |
| .grade--midpoint { background: rgba(34,197,94,0.20); color: var(--green); } | |
| .grade--range { background: rgba(245,158,11,0.20); color: var(--yellow); } | |
| .grade--miss { background: rgba(239,68,68,0.18); color: var(--red); } | |
| /* HIGH-conviction badge (watchlist) — the 95-97% price-hit / profit bucket */ | |
| .conviction-badge { | |
| display: inline-block; margin-bottom: 10px; | |
| font-size: 11px; font-weight: 700; letter-spacing: .4px; | |
| padding: 4px 10px; border-radius: 6px; | |
| background: linear-gradient(90deg, rgba(34,197,94,0.22), rgba(16,185,129,0.14)); | |
| color: var(--green); border: 1px solid rgba(34,197,94,0.35); | |
| } | |
| /* ML-selection verdict badge (ML pick · AI confirmed / disagrees) */ | |
| .ml-verdict { | |
| display: inline-block; margin-bottom: 10px; margin-left: 6px; | |
| font-size: 11px; font-weight: 700; letter-spacing: .3px; | |
| padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; | |
| } | |
| .ml-verdict-ok { background: rgba(99,102,241,0.16); color: #818cf8; border-color: rgba(99,102,241,0.35); } | |
| .ml-verdict-bad { background: rgba(234,179,8,0.14); color: var(--yellow, #eab308); border-color: rgba(234,179,8,0.32); } | |
| .ml-verdict-neutral { background: var(--bg3); color: var(--text-muted); border-color: var(--border); } | |
| .vstat-card--highconf { | |
| border: 1px solid rgba(34,197,94,0.35); | |
| background: rgba(34,197,94,0.06); | |
| } | |
| /* Watchlist HIGH-conviction filter toggle */ | |
| #wl-highconf-filter[data-active="true"] { | |
| background: rgba(34,197,94,0.18); color: var(--green); | |
| border-color: rgba(34,197,94,0.4); | |
| } | |
| .miss-breakdown { | |
| display: flex; align-items: center; gap: 10px; flex-wrap: wrap; | |
| padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); margin-bottom: 16px; | |
| } | |
| .miss-breakdown-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-right: 4px; } | |
| .validation-loading { | |
| display: flex; flex-direction: column; align-items: center; gap: 16px; | |
| padding: 40px 20px; text-align: center; | |
| } | |
| .validation-loading.hidden { display: none; } | |
| .portfolio-cards { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .portfolio-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| .portfolio-card-head { | |
| display: flex; | |
| gap: 10px; | |
| align-items: stretch; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .portfolio-card-main { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: minmax(220px, 1.1fr) 2fr 24px; | |
| gap: 12px; | |
| align-items: center; | |
| padding: 14px 16px; | |
| background: transparent; | |
| border: none; | |
| color: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .portfolio-card-main:hover { background: var(--bg3); } | |
| .portfolio-id-block { min-width: 0; } | |
| .portfolio-name { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .portfolio-symbol-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-top: 2px; | |
| } | |
| .portfolio-symbol { | |
| font-family: monospace; | |
| font-weight: 700; | |
| font-size: 14px; | |
| color: var(--accent2); | |
| } | |
| .portfolio-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .portfolio-stat { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 7px 8px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .portfolio-stat span { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| color: var(--text-dim); | |
| } | |
| .portfolio-stat strong { | |
| font-size: 12px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .portfolio-chevron { | |
| color: var(--text-dim); | |
| transition: transform .18s ease; | |
| } | |
| .portfolio-card.open .portfolio-chevron { transform: rotate(90deg); } | |
| .portfolio-card-actions { | |
| padding: 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .portfolio-meta-row { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 8px; | |
| padding: 8px 16px; | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .portfolio-expand { display: none; } | |
| .portfolio-card.open .portfolio-expand { display: block; } | |
| .portfolio-expand-grid { | |
| display: grid; | |
| grid-template-columns: 1.2fr 1fr; | |
| min-height: 340px; | |
| } | |
| .portfolio-insight { | |
| padding: 14px 16px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .portfolio-chart { | |
| background: var(--bg3); | |
| width: 100%; | |
| flex: 1; | |
| min-height: 300px; | |
| } | |
| .port-insight-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .port-insight-primary { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .port-insight-row { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 8px 10px; | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 6px; | |
| font-size: 12px; | |
| } | |
| .port-insight-row span { | |
| color: var(--text-dim); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| } | |
| .port-insight-timeframes { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .port-tf-cell { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 8px; | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .port-tf-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: .5px; | |
| color: var(--text-dim); | |
| } | |
| .port-tf-dir { font-size: 11px; font-weight: 700; } | |
| .port-tf-ret, .port-tf-ai { font-size: 11px; color: var(--text-muted); } | |
| .trade-insight-ts { | |
| margin-top: 8px; | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| } | |
| .trade-table { width: 100%; border-collapse: collapse; } | |
| .trade-table th { | |
| text-align: left; padding: 9px 12px; | |
| font-size: 11px; color: var(--text-dim); font-weight: 600; | |
| text-transform: uppercase; letter-spacing: .4px; | |
| background: var(--bg2); border-bottom: 1px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| .trade-table td { | |
| padding: 11px 12px; border-bottom: 1px solid var(--border); | |
| font-size: 12px; vertical-align: middle; | |
| } | |
| .trade-table tr:hover td { background: rgba(255,255,255,.02); } | |
| .pnl-pos { color: var(--green); font-weight: 700; } | |
| .pnl-neg { color: var(--red); font-weight: 700; } | |
| .pnl-zero { color: var(--text-muted); } | |
| .result-badge { padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; } | |
| .result-WIN { background: var(--green-dim); color: var(--green); } | |
| .result-LOSS { background: var(--red-dim); color: var(--red); } | |
| .result-LIMIT { background: rgba(255,180,0,.15); color: #f0a500; } | |
| .result-OPEN { background: rgba(99,179,237,.15); color: #63b3ed; } | |
| /* dir-badge colours for LONG / SHORT trades */ | |
| .dir-LONG { color: var(--green); background: var(--green-dim); } | |
| .dir-SHORT { color: var(--red); background: var(--red-dim); } | |
| .pending-count { | |
| display: inline-block; background: #f0a500; color: #000; | |
| border-radius: 10px; font-size: 10px; font-weight: 700; | |
| padding: 1px 6px; margin-left: 5px; vertical-align: middle; | |
| } | |
| /* ── Open Position Cards (dashboard mini) ────────────────────────────────────── */ | |
| .pos-cards { display: flex; flex-direction: column; gap: 10px; } | |
| .pos-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 14px 16px; | |
| transition: border-color .15s; | |
| } | |
| .pos-card:hover { border-color: var(--border2); } | |
| .pos-card-header { | |
| display: flex; align-items: flex-start; justify-content: space-between; | |
| gap: 12px; margin-bottom: 10px; | |
| } | |
| .pos-card-id { | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .pos-ticker { font-size: 14px; font-weight: 700; font-family: monospace; color: var(--accent2); } | |
| .pos-name { font-size: 11px; color: var(--text-muted); margin-left: 2px; } | |
| .pos-card-right { | |
| display: flex; align-items: center; gap: 14px; flex-shrink: 0; | |
| } | |
| .pos-shares { font-size: 11px; color: var(--text-dim); } | |
| .pos-prices { | |
| display: flex; align-items: center; gap: 8px; | |
| font-size: 12px; margin-bottom: 10px; flex-wrap: wrap; | |
| } | |
| .pos-price-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; } | |
| .pos-price-val { font-weight: 600; font-variant-numeric: tabular-nums; } | |
| .pos-price-arrow { color: var(--text-dim); font-size: 13px; } | |
| .pos-price-sep { color: var(--border2); margin: 0 2px; } | |
| .pos-price-target { color: var(--blue); } | |
| .pos-price-sl { color: var(--red); } | |
| .pos-price-current-up { color: var(--green); } | |
| .pos-price-current-down { color: var(--red); } | |
| .pos-price-current-flat { color: var(--text-muted); } | |
| .pos-progress-wrap { | |
| display: flex; align-items: center; gap: 10px; | |
| } | |
| .pos-progress-track { | |
| flex: 1; height: 5px; background: var(--bg4); | |
| border-radius: 3px; overflow: hidden; min-width: 80px; | |
| } | |
| .pos-progress-fill { | |
| height: 100%; border-radius: 3px; | |
| transition: width .4s ease; | |
| } | |
| .pos-progress-fill-green { background: var(--green); } | |
| .pos-progress-fill-red { background: var(--red); } | |
| .pos-progress-label { | |
| font-size: 10px; color: var(--text-muted); white-space: nowrap; | |
| } | |
| .empty-state { | |
| text-align: center; padding: 48px 24px; | |
| color: var(--text-muted); font-size: 13px; | |
| } | |
| .empty-icon { font-size: 32px; margin-bottom: 10px; opacity: .4; } | |
| /* ── Modal ──────────────────────────────────────────────────────────────────── */ | |
| .modal-overlay { | |
| position: fixed; inset: 0; z-index: 200; | |
| background: rgba(0,0,0,.65); backdrop-filter: blur(4px); | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .modal { | |
| background: var(--bg2); border: 1px solid var(--border2); | |
| border-radius: var(--radius-lg); width: 520px; max-width: calc(100vw - 32px); | |
| box-shadow: var(--shadow); overflow: hidden; | |
| } | |
| .modal--sm { width: 380px; } | |
| .modal--news { width: 560px; } | |
| .modal-body--scroll { max-height: 60vh; overflow-y: auto; } | |
| .modal-header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 18px 22px; border-bottom: 1px solid var(--border); | |
| } | |
| .modal-title { font-size: 16px; font-weight: 700; } | |
| .modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; } | |
| .modal-close:hover { color: var(--text); } | |
| .modal-body { padding: 20px 22px; } | |
| .modal-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; } | |
| .modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--border); } | |
| /* ── Market bar (Rank result) ───────────────────────────────────────────────── */ | |
| .market-bar { | |
| display: flex; gap: 20px; align-items: center; | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 10px 16px; margin-bottom: 16px; | |
| } | |
| .market-bar .market-item { border: none; padding: 0; margin: 0; } | |
| /* ── Error card ─────────────────────────────────────────────────────────────── */ | |
| .error-card { | |
| background: var(--red-dim); border: 1px solid rgba(239,68,68,.3); | |
| border-radius: var(--radius); padding: 14px 16px; | |
| color: var(--red); font-size: 13px; | |
| } | |
| .ai-retry-banner { | |
| display: flex; align-items: center; gap: 10px; | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 10px 14px; | |
| font-size: 13px; color: var(--text-muted); | |
| margin-bottom: 12px; | |
| } | |
| .ai-retry-banner .ai-retry-secs { font-variant-numeric: tabular-nums; } | |
| .ai-retry-banner .ai-retry-now { | |
| margin-left: auto; font-size: 11px; padding: 3px 10px; | |
| border: 1px solid var(--border); border-radius: 4px; | |
| background: var(--bg3); color: var(--text); cursor: pointer; | |
| } | |
| .ai-retry-banner .ai-retry-now:hover { background: var(--bg4, var(--bg3)); } | |
| .card-retry-btn { | |
| display: block; width: 100%; margin: 8px 0 4px; | |
| padding: 7px 0; font-size: 12px; font-weight: 600; | |
| border: 1px solid var(--border); border-radius: 6px; | |
| background: var(--bg3); color: var(--accent, #4a9eff); | |
| cursor: pointer; letter-spacing: .03em; | |
| transition: background .15s, opacity .15s; | |
| } | |
| .card-retry-btn:hover:not(:disabled) { background: var(--bg4, var(--bg2)); } | |
| .card-retry-btn:disabled { opacity: .55; cursor: not-allowed; } | |
| /* ── Mobile nav bar ─────────────────────────────────────────────────────────── */ | |
| :root { --mobile-nav-h: 58px; } | |
| .mobile-nav { display: none; } | |
| /* ── Responsive: tablet (≤900px) ────────────────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .pred-body, .pick-body { grid-template-columns: 1fr; } | |
| .pred-chart, .pick-chart { border-left: none; border-top: 1px solid var(--border); } | |
| .dashboard-strip { grid-template-columns: repeat(3, 1fr); } | |
| .wl-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .portfolio-card-main { grid-template-columns: 1fr; } | |
| .portfolio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .portfolio-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .portfolio-expand-grid { grid-template-columns: 1fr; } | |
| .portfolio-insight { border-right: none; border-bottom: 1px solid var(--border); } | |
| } | |
| /* ── Responsive: mobile (≤640px) ────────────────────────────────────────────── */ | |
| @media (max-width: 640px) { | |
| /* Layout */ | |
| :root { --sidebar-w: 0px; } | |
| .sidebar { display: none; } | |
| /* main-wrapper is already overflow-y:auto; add bottom clearance for fixed mobile nav */ | |
| .main-wrapper { padding-bottom: var(--mobile-nav-h); } | |
| /* Market bar — horizontal scroll on mobile */ | |
| .global-market-bar { | |
| padding: 0 12px; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| flex-wrap: nowrap; | |
| scrollbar-width: none; | |
| } | |
| .global-market-bar::-webkit-scrollbar { display: none; } | |
| .market-item { flex-shrink: 0; } | |
| /* Views */ | |
| .view { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); } | |
| .view-title { font-size: 18px; } | |
| .view-header { margin-bottom: 16px; } | |
| .view-header--row { flex-wrap: wrap; gap: 10px; align-items: center; } | |
| /* Dashboard strip */ | |
| .dashboard-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; } | |
| .strip-card { padding: 10px 12px; } | |
| .strip-val { font-size: 16px; } | |
| /* Grids */ | |
| .form-row.two-col { grid-template-columns: 1fr; } | |
| .wl-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .portfolio-meta-row, | |
| .port-insight-primary, | |
| .port-insight-timeframes { grid-template-columns: 1fr; } | |
| /* Timeframe grid — stack on mobile */ | |
| .tf-grid { grid-template-columns: 1fr; min-height: unset; } | |
| .tf-cell { min-height: 100px; padding: 12px; } | |
| .tf-return { font-size: 22px; } | |
| /* Tables — horizontal scroll */ | |
| .rank-section { overflow-x: auto; -webkit-overflow-scrolling: touch; } | |
| .rank-table { min-width: 540px; } | |
| .ptab-content { overflow-x: auto; -webkit-overflow-scrolling: touch; } | |
| .trade-table { min-width: 560px; } | |
| /* Portfolio tabs — scroll on mobile */ | |
| .portfolio-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } | |
| .portfolio-tabs::-webkit-scrollbar { display: none; } | |
| .ptab { flex-shrink: 0; } | |
| /* Watchlist toolbar */ | |
| .toolbar { flex-direction: column; align-items: stretch; } | |
| .toolbar-search { max-width: 100%; min-width: 0; } | |
| /* Section headers */ | |
| .section-header { flex-wrap: wrap; gap: 8px; } | |
| /* Picks grid */ | |
| .picks-grid { gap: 12px; } | |
| /* Modal — full-width, anchored to bottom on mobile */ | |
| .modal-overlay { align-items: flex-end; } | |
| .modal { | |
| width: 100%; | |
| max-width: 100%; | |
| border-radius: var(--radius-lg) var(--radius-lg) 0 0; | |
| max-height: 92dvh; | |
| overflow-y: auto; | |
| } | |
| .modal--sm { width: 100%; max-width: 100%; } | |
| .modal-body { padding: 16px; } | |
| .modal-footer { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); } | |
| /* Validation — missing breakpoints */ | |
| .validation-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; } | |
| .validation-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } | |
| .validation-tabs::-webkit-scrollbar { display: none; } | |
| .vtab { flex-shrink: 0; } | |
| /* Portfolio card — keep chevron inline instead of stacking below stats */ | |
| .portfolio-card-main { | |
| grid-template-columns: 1fr 28px; | |
| grid-template-rows: auto auto; | |
| gap: 6px 0; | |
| padding: 12px 12px; | |
| } | |
| .portfolio-id-block { grid-column: 1; grid-row: 1; } | |
| .portfolio-stats { grid-column: 1; grid-row: 2; } | |
| .portfolio-chevron { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; } | |
| /* Keep open-state rotation */ | |
| .portfolio-card.open .portfolio-chevron { transform: rotate(90deg); } | |
| /* Pick / pred card headers — wrap buttons onto new line on narrow screens */ | |
| .pick-header { padding: 12px 14px; flex-wrap: wrap; } | |
| .pred-header { padding: 12px 14px; flex-wrap: wrap; } | |
| .pick-actions { flex-shrink: 1; flex-wrap: wrap; } | |
| .pred-actions { flex-shrink: 1; flex-wrap: wrap; } | |
| /* Company name — remove hard max-width so it can use available space */ | |
| .pick-name { max-width: 100%; } | |
| .sc-name { max-width: 100%; } | |
| /* Market bar item spacing — reduce to prevent overcrowding */ | |
| .market-item { margin-right: 12px; padding-right: 12px; } | |
| } | |
| /* ── Mobile nav bar ─────────────────────────────────────────────────────────── */ | |
| @media (max-width: 640px) { | |
| .mobile-nav { | |
| display: flex; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| background: var(--bg2); | |
| border-top: 1px solid var(--border); | |
| height: var(--mobile-nav-h); | |
| padding-bottom: env(safe-area-inset-bottom); | |
| -webkit-padding-bottom: env(safe-area-inset-bottom); | |
| } | |
| .mobile-nav-item { | |
| flex: 1; | |
| display: flex ; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 3px; | |
| padding: 6px 4px ; | |
| border-radius: 0 ; | |
| background: transparent ; | |
| color: var(--text-dim) ; | |
| text-decoration: none; | |
| font-size: 10px; | |
| transition: color .12s; | |
| min-width: 0; | |
| } | |
| .mobile-nav-item.active { | |
| color: var(--accent2) ; | |
| background: transparent ; | |
| } | |
| .mobile-nav-icon { | |
| font-size: 16px; | |
| line-height: 1; | |
| opacity: 0.7; | |
| width: auto ; | |
| } | |
| .mobile-nav-item.active .mobile-nav-icon { opacity: 1; } | |
| .mobile-nav-label { font-size: 10px; font-weight: 500; letter-spacing: .2px; } | |
| } | |
| /* ── Very small screens (≤390px) ────────────────────────────────────────────── */ | |
| @media (max-width: 390px) { | |
| .dashboard-strip { grid-template-columns: 1fr 1fr; } | |
| .wl-summary-grid { grid-template-columns: 1fr 1fr; } | |
| .validation-stats { grid-template-columns: 1fr; } | |
| .tf-return { font-size: 20px; } | |
| .view { padding: 12px 10px calc(16px + env(safe-area-inset-bottom)); } | |
| /* Dashboard strip values need more breathing room */ | |
| .strip-val { font-size: 14px; } | |
| .strip-label { font-size: 10px; } | |
| /* Portfolio card on very small phones */ | |
| .portfolio-stats { grid-template-columns: repeat(2, 1fr); } | |
| } | |