Spaces:
Running on Zero
Running on Zero
deveshc23
feat: Add Free Gradio Space support, Git LFS tracking for data artifacts, and Quant Allocator
3e33e2e | /* DRIFT QUANT NSE RESEARCH LAB - INSTITUTIONAL THEME */ | |
| :root { | |
| color-scheme: dark; | |
| --bg-app: #080d14; | |
| --bg-surface: #0e1622; | |
| --bg-surface-elevated: #141f2e; | |
| --bg-surface-hover: #1a283b; | |
| --border-subtle: #1c2a3a; | |
| --border-default: #24354a; | |
| --border-focus: #3b82f6; | |
| --text-main: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --color-brand: #38bdf8; | |
| --color-brand-glow: rgba(56, 189, 248, 0.2); | |
| --color-positive: #10b981; | |
| --color-positive-bg: rgba(16, 185, 129, 0.12); | |
| --color-negative: #f43f5e; | |
| --color-negative-bg: rgba(244, 63, 94, 0.12); | |
| --color-warning: #f59e0b; | |
| --color-warning-bg: rgba(245, 158, 11, 0.12); | |
| --color-info: #0ea5e9; | |
| --color-info-bg: rgba(14, 165, 233, 0.12); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| font-feature-settings: "tnum" 1; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--bg-app); | |
| color: var(--text-main); | |
| overflow: hidden; | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| /* ========================================================================== | |
| WORKSTATION SHELL LAYOUT | |
| ========================================================================== */ | |
| .workstation-container { | |
| display: flex; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* SIDEBAR RAIL */ | |
| .terminal-sidebar { | |
| width: 230px; | |
| background-color: var(--bg-surface); | |
| border-right: 1px solid var(--border-subtle); | |
| display: flex; | |
| flex-direction: column; | |
| transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| user-select: none; | |
| z-index: 100; | |
| flex-shrink: 0; | |
| } | |
| .terminal-sidebar.collapsed { | |
| width: 64px; | |
| } | |
| .sidebar-brand { | |
| height: 52px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 16px; | |
| gap: 12px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .brand-icon { | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| background: transparent; | |
| } | |
| .brand-monogram-logo { | |
| display: block; | |
| transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| .sidebar-brand:hover .brand-monogram-logo { | |
| transform: scale(1.08) rotate(-2deg); | |
| } | |
| .brand-text strong { | |
| display: block; | |
| font-size: 13px; | |
| letter-spacing: 0.08em; | |
| color: #fff; | |
| font-weight: 700; | |
| } | |
| .brand-text small { | |
| display: block; | |
| font-size: 9.5px; | |
| letter-spacing: 0.12em; | |
| color: var(--color-brand); | |
| font-weight: 600; | |
| } | |
| .sidebar-nav { | |
| flex: 1; | |
| padding: 12px 8px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| overflow-y: auto; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px 12px; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: var(--text-secondary); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| text-align: left; | |
| transition: all 0.15s ease; | |
| width: 100%; | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-surface-elevated); | |
| color: var(--text-main); | |
| border-color: var(--border-subtle); | |
| } | |
| .nav-item.active { | |
| background: rgba(56, 189, 248, 0.12); | |
| color: var(--color-brand); | |
| border-color: rgba(56, 189, 248, 0.3); | |
| font-weight: 600; | |
| } | |
| .nav-icon { | |
| font-size: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| } | |
| .nav-label { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .nav-badge { | |
| font-size: 10px; | |
| padding: 1px 6px; | |
| background: var(--bg-surface-hover); | |
| border: 1px solid var(--border-default); | |
| border-radius: 10px; | |
| color: var(--text-secondary); | |
| } | |
| .sidebar-footer { | |
| padding: 10px 12px; | |
| border-top: 1px solid var(--border-subtle); | |
| } | |
| .collapse-toggle-btn { | |
| width: 100%; | |
| padding: 6px 10px; | |
| background: transparent; | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 11px; | |
| transition: all 0.15s ease; | |
| } | |
| .collapse-toggle-btn:hover { | |
| background: var(--bg-surface-elevated); | |
| color: var(--text-main); | |
| border-color: var(--border-default); | |
| } | |
| /* MAIN SHELL */ | |
| .workstation-shell { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| background-color: var(--bg-app); | |
| } | |
| /* TOPBAR */ | |
| .global-topbar { | |
| height: 52px; | |
| background-color: var(--bg-surface); | |
| border-bottom: 1px solid var(--border-subtle); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 24px; | |
| flex-shrink: 0; | |
| } | |
| .topbar-breadcrumbs { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13.5px; | |
| } | |
| .crumb-root { | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .crumb-sep { | |
| color: var(--border-default); | |
| font-size: 11px; | |
| } | |
| .crumb-active { | |
| color: var(--text-main); | |
| font-weight: 600; | |
| } | |
| .crumb-strat { | |
| color: var(--color-brand); | |
| font-weight: 600; | |
| } | |
| .topbar-subtitle { | |
| margin: 0; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .topbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .topbar-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 4px 10px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| .currency-pill { | |
| background: rgba(16, 185, 129, 0.08); | |
| border-color: rgba(16, 185, 129, 0.25); | |
| color: var(--color-positive); | |
| font-weight: 600; | |
| } | |
| .status-pill.status-live { | |
| border-color: rgba(16, 185, 129, 0.3); | |
| } | |
| .status-pill.status-warning { | |
| border-color: rgba(245, 158, 11, 0.3); | |
| } | |
| .pill-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| } | |
| .pill-dot.live { | |
| background: var(--color-positive); | |
| box-shadow: 0 0 8px var(--color-positive); | |
| } | |
| .pill-dot.warn { | |
| background: var(--color-warning); | |
| box-shadow: 0 0 8px var(--color-warning); | |
| } | |
| .pill-dot.brand { | |
| background: var(--color-brand); | |
| } | |
| /* CONTENT CONTAINER */ | |
| .workstation-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px 24px; | |
| } | |
| .page-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| max-width: 1680px; | |
| margin: 0 auto; | |
| } | |
| .page-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 2px; | |
| } | |
| .page-header h2 { | |
| margin: 0 0 4px; | |
| font-size: 18px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| color: var(--text-main); | |
| } | |
| .page-subtext { | |
| margin: 0; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* FOOTER */ | |
| .workstation-footer { | |
| height: 28px; | |
| background-color: var(--bg-surface); | |
| border-top: 1px solid var(--border-subtle); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 24px; | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| flex-shrink: 0; | |
| letter-spacing: 0.04em; | |
| } | |
| .footer-left { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| /* ========================================================================== | |
| CARDS & CONTAINERS | |
| ========================================================================== */ | |
| .terminal-card { | |
| background-color: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card-header { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .card-title-group h3 { | |
| margin: 0; | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| .card-subtitle { | |
| margin: 2px 0 0; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .card-body { | |
| padding: 16px; | |
| } | |
| /* RESEARCH BANNER */ | |
| .research-banner { | |
| background: linear-gradient(135deg, rgba(14, 22, 34, 0.98), rgba(20, 31, 46, 0.95)); | |
| border: 1px solid rgba(56, 189, 248, 0.28); | |
| border-radius: 8px; | |
| padding: 14px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| } | |
| .banner-badge { | |
| flex-shrink: 0; | |
| } | |
| .banner-text { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .banner-text strong { | |
| font-size: 13.5px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| letter-spacing: -0.01em; | |
| } | |
| .banner-text span { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| } | |
| .banner-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| } | |
| /* KPI GRID & CARDS */ | |
| .kpi-grid-dense { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 12px; | |
| width: 100%; | |
| } | |
| @media (max-width: 1440px) { | |
| .kpi-grid-dense { | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| .kpi-grid-dense { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .kpi-grid-dense { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); | |
| gap: 12px; | |
| } | |
| .kpi-card, | |
| .terminal-kpi-card { | |
| background-color: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 12px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| min-height: 84px; | |
| transition: all 0.15s ease; | |
| position: relative; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .kpi-card:hover, | |
| .terminal-kpi-card:hover { | |
| border-color: var(--border-default); | |
| background-color: var(--bg-surface-elevated); | |
| transform: translateY(-1px); | |
| } | |
| .kpi-card.clickable { | |
| cursor: pointer; | |
| } | |
| .kpi-card.tone-positive { | |
| border-left: 3px solid var(--color-positive); | |
| } | |
| .kpi-card.tone-negative { | |
| border-left: 3px solid var(--color-negative); | |
| } | |
| .kpi-card.tone-brand { | |
| border-left: 3px solid var(--color-brand); | |
| } | |
| .kpi-card.tone-warning { | |
| border-left: 3px solid var(--color-warning); | |
| } | |
| .kpi-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .kpi-label { | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .kpi-value-row { | |
| display: flex; | |
| align-items: baseline; | |
| margin: 3px 0 1px; | |
| } | |
| .kpi-value { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| letter-spacing: -0.01em; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; | |
| } | |
| .kpi-subtext { | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| } | |
| .tone-positive .kpi-value, | |
| .positive-text { | |
| color: var(--color-positive) ; | |
| } | |
| .tone-negative .kpi-value, | |
| .negative-text { | |
| color: var(--color-negative) ; | |
| } | |
| .tone-warning .kpi-value, | |
| .warning-text { | |
| color: var(--color-warning) ; | |
| } | |
| .tone-brand .kpi-value { | |
| color: var(--color-brand) ; | |
| } | |
| /* GRIDS */ | |
| .grid-two-columns { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| } | |
| @media (max-width: 1080px) { | |
| .grid-two-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ========================================================================== | |
| TABLES | |
| ========================================================================== */ | |
| .table-responsive { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .terminal-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| text-align: left; | |
| } | |
| .terminal-table th { | |
| padding: 8px 10px; | |
| background-color: var(--bg-surface-elevated); | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| border-bottom: 1px solid var(--border-default); | |
| white-space: nowrap; | |
| } | |
| .terminal-table td { | |
| padding: 8px 10px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| color: var(--text-main); | |
| white-space: nowrap; | |
| } | |
| .terminal-table tbody tr:hover { | |
| background-color: var(--bg-surface-hover); | |
| } | |
| .clickable-row { | |
| cursor: pointer; | |
| } | |
| /* ========================================================================== | |
| BUTTONS & BADGES | |
| ========================================================================== */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| font-family: inherit; | |
| font-weight: 500; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| border: 1px solid transparent; | |
| white-space: nowrap; | |
| user-select: none; | |
| outline: none; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| background: var(--color-brand); | |
| color: #031525; | |
| font-weight: 600; | |
| border-color: var(--color-brand); | |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.25); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: #7dd3fc; | |
| border-color: #7dd3fc; | |
| box-shadow: 0 0 14px rgba(56, 189, 248, 0.4); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-surface-elevated); | |
| color: var(--text-main); | |
| border-color: var(--border-default); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: var(--bg-surface-hover); | |
| border-color: #38bdf8; | |
| color: #fff; | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border-color: var(--border-default); | |
| } | |
| .btn-outline:hover:not(:disabled) { | |
| background: rgba(56, 189, 248, 0.08); | |
| color: var(--color-brand); | |
| border-color: rgba(56, 189, 248, 0.4); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border-color: transparent; | |
| } | |
| .btn-ghost:hover:not(:disabled) { | |
| background: var(--bg-surface-elevated); | |
| color: var(--text-main); | |
| } | |
| .btn-danger { | |
| background: rgba(244, 63, 94, 0.15); | |
| color: var(--color-negative); | |
| border-color: rgba(244, 63, 94, 0.3); | |
| } | |
| .btn-danger:hover:not(:disabled) { | |
| background: rgba(244, 63, 94, 0.25); | |
| } | |
| .btn-xs { | |
| padding: 3px 8px; | |
| font-size: 11px; | |
| height: 24px; | |
| } | |
| .btn-sm { | |
| padding: 5px 12px; | |
| font-size: 12px; | |
| height: 30px; | |
| } | |
| .btn-md { | |
| padding: 8px 16px; | |
| font-size: 13px; | |
| height: 36px; | |
| } | |
| .btn-lg { | |
| padding: 10px 20px; | |
| font-size: 14px; | |
| height: 42px; | |
| } | |
| .terminal-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| border: 1px solid var(--border-default); | |
| background: var(--bg-surface-elevated); | |
| color: var(--text-main); | |
| } | |
| .terminal-btn:hover { | |
| background: var(--bg-surface-hover); | |
| border-color: var(--color-brand); | |
| } | |
| .terminal-link-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--color-brand); | |
| cursor: pointer; | |
| font-size: 11.5px; | |
| padding: 0; | |
| font-weight: 500; | |
| } | |
| .terminal-link-btn:hover { | |
| text-decoration: underline; | |
| } | |
| /* BADGES */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 7px; | |
| border-radius: 4px; | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| border: 1px solid transparent; | |
| line-height: 1.3; | |
| } | |
| .badge-sm { | |
| padding: 1px 5px; | |
| font-size: 9.5px; | |
| } | |
| .badge-positive, | |
| .badge-success { | |
| background: rgba(16, 185, 129, 0.12); | |
| color: #10b981; | |
| border-color: rgba(16, 185, 129, 0.28); | |
| } | |
| .badge-negative, | |
| .badge-danger { | |
| background: rgba(244, 63, 94, 0.12); | |
| color: #f43f5e; | |
| border-color: rgba(244, 63, 94, 0.28); | |
| } | |
| .badge-warning { | |
| background: rgba(245, 158, 11, 0.12); | |
| color: #f59e0b; | |
| border-color: rgba(245, 158, 11, 0.28); | |
| } | |
| .badge-brand { | |
| background: rgba(56, 189, 248, 0.12); | |
| color: #38bdf8; | |
| border-color: rgba(56, 189, 248, 0.28); | |
| } | |
| .badge-neutral { | |
| background: rgba(148, 163, 184, 0.1); | |
| color: #94a3b8; | |
| border-color: rgba(148, 163, 184, 0.2); | |
| } | |
| .badge-info { | |
| background: rgba(14, 165, 233, 0.12); | |
| color: #0ea5e9; | |
| border-color: rgba(14, 165, 233, 0.28); | |
| } | |
| /* FORM CONTROLS */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| margin-bottom: 12px; | |
| } | |
| .form-group label { | |
| font-size: 11.5px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .param-range { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .form-control { | |
| background-color: var(--bg-app); | |
| border: 1px solid var(--border-default); | |
| border-radius: 4px; | |
| color: var(--text-main); | |
| padding: 6px 10px; | |
| font-size: 12.5px; | |
| outline: none; | |
| transition: border-color 0.15s ease; | |
| } | |
| .form-control:focus { | |
| border-color: var(--color-brand); | |
| } | |
| .select-lg { | |
| padding: 8px 12px; | |
| font-size: 13px; | |
| min-width: 320px; | |
| } | |
| /* BADGES */ | |
| .terminal-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 1px 7px; | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| border: 1px solid transparent; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .badge-default { | |
| background: var(--bg-surface-elevated); | |
| border-color: var(--border-default); | |
| color: var(--text-secondary); | |
| } | |
| .badge-info { | |
| background: var(--color-info-bg); | |
| border-color: rgba(14, 165, 233, 0.3); | |
| color: var(--color-info); | |
| } | |
| .badge-success { | |
| background: var(--color-positive-bg); | |
| border-color: rgba(16, 185, 129, 0.3); | |
| color: var(--color-positive); | |
| } | |
| .badge-danger { | |
| background: var(--color-negative-bg); | |
| border-color: rgba(244, 63, 94, 0.3); | |
| color: var(--color-negative); | |
| } | |
| .badge-warning { | |
| background: var(--color-warning-bg); | |
| border-color: rgba(245, 158, 11, 0.3); | |
| color: var(--color-warning); | |
| } | |
| /* ========================================================================== | |
| STRATEGY LAB PAGE | |
| ========================================================================== */ | |
| .lab-grid { | |
| display: grid; | |
| grid-template-columns: 380px 1fr; | |
| gap: 16px; | |
| } | |
| @media (max-width: 1024px) { | |
| .lab-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .strategy-selector-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .strategy-item-btn { | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 5px; | |
| padding: 12px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .strategy-item-btn:hover { | |
| border-color: var(--border-default); | |
| background: var(--bg-surface-hover); | |
| } | |
| .strategy-item-btn.selected { | |
| border-color: var(--color-brand); | |
| background: rgba(56, 189, 248, 0.08); | |
| } | |
| .strat-btn-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| } | |
| .strat-btn-desc { | |
| margin: 0 0 8px; | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| .strat-btn-meta { | |
| display: flex; | |
| gap: 6px; | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| } | |
| .strategy-spec-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .spec-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .spec-label { | |
| width: 180px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| } | |
| .indicator-tags { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .ind-pill { | |
| padding: 2px 7px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-default); | |
| border-radius: 3px; | |
| font-size: 11px; | |
| } | |
| .spec-notice { | |
| margin-top: 6px; | |
| padding: 10px; | |
| background: rgba(245, 158, 11, 0.08); | |
| border: 1px solid rgba(245, 158, 11, 0.25); | |
| border-radius: 4px; | |
| font-size: 11.5px; | |
| color: #fbbf24; | |
| } | |
| .spec-notice p { | |
| margin: 4px 0 0; | |
| color: var(--text-secondary); | |
| } | |
| .execution-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 12px; | |
| } | |
| .full-width { | |
| grid-column: 1 / -1; | |
| } | |
| .universe-toggle-group { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 8px; | |
| } | |
| .toggle-option { | |
| padding: 10px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: all 0.15s ease; | |
| } | |
| .toggle-option strong { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-main); | |
| } | |
| .toggle-option small { | |
| display: block; | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| } | |
| .toggle-option.active { | |
| border-color: var(--color-brand); | |
| background: rgba(56, 189, 248, 0.1); | |
| } | |
| .simulation-actions { | |
| margin-top: 14px; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .backtest-error-banner { | |
| margin-top: 12px; | |
| padding: 10px; | |
| background: var(--color-negative-bg); | |
| border: 1px solid rgba(244, 63, 94, 0.3); | |
| border-radius: 4px; | |
| color: var(--color-negative); | |
| font-size: 12px; | |
| } | |
| .result-kpis-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 10px; | |
| } | |
| /* ========================================================================== | |
| BACKTEST RESULTS PAGE | |
| ========================================================================== */ | |
| .results-top-control-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 10px 16px; | |
| flex-wrap: wrap; | |
| } | |
| .experiment-picker { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .experiment-picker label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .results-action-buttons { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .results-meta-banner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| } | |
| .results-meta-banner h3 { | |
| margin: 0 0 4px; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .meta-subtext { | |
| margin: 0; | |
| font-size: 11.5px; | |
| color: var(--text-muted); | |
| } | |
| .meta-right-caps { | |
| display: flex; | |
| gap: 16px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .config-inspector-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 12px; | |
| } | |
| .config-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| padding: 8px 10px; | |
| background: var(--bg-surface-elevated); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .config-key { | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| } | |
| .config-val { | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| } | |
| /* ========================================================================== | |
| EXPERIMENT COMPARE PAGE | |
| ========================================================================== */ | |
| .compare-checkbox-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 10px; | |
| } | |
| .compare-checkbox-card { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .compare-checkbox-card.checked { | |
| border-color: var(--color-brand); | |
| background: rgba(56, 189, 248, 0.08); | |
| } | |
| .checkbox-card-content strong { | |
| display: block; | |
| font-size: 12.5px; | |
| } | |
| .card-sub-info { | |
| display: flex; | |
| gap: 6px; | |
| font-size: 11px; | |
| margin: 2px 0; | |
| } | |
| .disparity-warning-banner { | |
| padding: 10px 14px; | |
| background: rgba(245, 158, 11, 0.1); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| border-radius: 4px; | |
| color: #fbbf24; | |
| font-size: 12px; | |
| } | |
| /* ========================================================================== | |
| TRADE EXPLORER PAGE | |
| ========================================================================== */ | |
| .trade-filter-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 10px 16px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .filter-item label { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .filter-stats { | |
| margin-left: auto; | |
| font-size: 11.5px; | |
| color: var(--text-muted); | |
| } | |
| .pagination-bar { | |
| margin-top: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .pagination-info { | |
| font-size: 11.5px; | |
| color: var(--text-muted); | |
| } | |
| .pagination-buttons { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| /* TRADE TICKET MODAL */ | |
| .trade-ticket-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .ticket-header-pill { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 12px; | |
| background: var(--bg-surface-elevated); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .ticket-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .ticket-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: 8px 10px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| } | |
| .ticket-field.full-span { | |
| grid-column: 1 / -1; | |
| } | |
| .ticket-field label { | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| } | |
| .ticket-footer-note { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| border-top: 1px solid var(--border-subtle); | |
| padding-top: 10px; | |
| } | |
| /* ========================================================================== | |
| DATA QUALITY PAGE | |
| ========================================================================== */ | |
| .anomaly-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .anomaly-item { | |
| padding: 10px 12px; | |
| background: var(--bg-surface-elevated); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .anomaly-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| } | |
| .anomaly-item p { | |
| margin: 0; | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| .disclosure-box { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .disclosure-item { | |
| padding: 8px 10px; | |
| background: var(--bg-surface-elevated); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .disclosure-item strong { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--color-brand); | |
| margin-bottom: 3px; | |
| } | |
| .disclosure-item p { | |
| margin: 0; | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| /* ========================================================================== | |
| RESEARCH REPORTS PAGE | |
| ========================================================================== */ | |
| .reports-layout-grid { | |
| display: grid; | |
| grid-template-columns: 340px 1fr; | |
| gap: 16px; | |
| } | |
| @media (max-width: 1024px) { | |
| .reports-layout-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .report-items-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .report-item-btn { | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| padding: 12px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .report-item-btn:hover { | |
| background: var(--bg-surface-hover); | |
| border-color: var(--border-default); | |
| } | |
| .report-item-btn.selected { | |
| border-color: var(--color-brand); | |
| background: rgba(56, 189, 248, 0.08); | |
| } | |
| .rep-item-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 6px; | |
| margin-bottom: 4px; | |
| } | |
| .rep-item-summary { | |
| margin: 0 0 6px; | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| } | |
| .rep-item-date { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .report-content-body { | |
| font-size: 13px; | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| } | |
| .report-section-heading { | |
| font-size: 15px; | |
| color: var(--color-brand); | |
| margin: 18px 0 8px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| padding-bottom: 4px; | |
| } | |
| .report-subsection-heading { | |
| font-size: 13.5px; | |
| color: var(--text-main); | |
| margin: 14px 0 6px; | |
| } | |
| .report-paragraph { | |
| margin: 0 0 10px; | |
| } | |
| .report-list { | |
| margin: 0 0 12px; | |
| padding-left: 20px; | |
| } | |
| .report-list li { | |
| margin-bottom: 4px; | |
| } | |
| /* ========================================================================== | |
| SYSTEM HEALTH PAGE | |
| ========================================================================== */ | |
| .diagnostics-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .diag-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 10px; | |
| background: var(--bg-surface-elevated); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .diag-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .diag-path { | |
| font-size: 11px; | |
| } | |
| /* ========================================================================== | |
| MODAL | |
| ========================================================================== */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(4, 7, 12, 0.75); | |
| backdrop-filter: blur(4px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| padding: 20px; | |
| } | |
| .modal-card { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: 8px; | |
| width: 100%; | |
| max-width: 580px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); | |
| overflow: hidden; | |
| } | |
| .modal-header { | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .modal-header h3 { | |
| margin: 0; | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .modal-close-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 18px; | |
| cursor: pointer; | |
| } | |
| .modal-close-btn:hover { | |
| color: var(--text-main); | |
| } | |
| .modal-body { | |
| padding: 18px; | |
| } | |
| /* ========================================================================== | |
| LIVE SIMULATION COCKPIT & SPEED CONTROLS | |
| ========================================================================== */ | |
| .lab-topbar-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| margin-bottom: 4px; | |
| } | |
| .preset-shortcuts { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .preset-label { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .preset-btn { | |
| padding: 5px 11px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| font-size: 11.5px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .preset-btn:hover { | |
| border-color: var(--color-brand); | |
| color: var(--text-main); | |
| background: var(--bg-surface-hover); | |
| } | |
| .preset-btn.active { | |
| background: rgba(56, 189, 248, 0.15); | |
| border-color: var(--color-brand); | |
| color: var(--color-brand); | |
| font-weight: 600; | |
| box-shadow: 0 0 8px rgba(56, 189, 248, 0.2); | |
| } | |
| .execution-compact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| } | |
| .slider-input-group { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .launcher-universe-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .date-picker-compact { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .date-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .date-box label { | |
| font-size: 11.5px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .custom-input-wrap { | |
| margin-top: 8px; | |
| } | |
| .launch-buttons-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 14px; | |
| } | |
| /* LIVE COCKPIT PROGRESS BAR */ | |
| .live-progress-container { | |
| position: relative; | |
| height: 22px; | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-default); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 14px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .live-progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, #0284c7, #38bdf8); | |
| transition: width 0.15s ease; | |
| } | |
| .live-progress-bar.pulsing { | |
| box-shadow: 0 0 12px #38bdf8; | |
| animation: pulse-glow 1.5s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0% { filter: brightness(1); } | |
| 50% { filter: brightness(1.3); } | |
| 100% { filter: brightness(1); } | |
| } | |
| .live-progress-text { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: #fff; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); | |
| letter-spacing: 0.05em; | |
| pointer-events: none; | |
| } | |
| /* LIVE HUD CARDS */ | |
| .live-hud-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| } | |
| @media (max-width: 900px) { | |
| .live-hud-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| .live-hud-card { | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .hud-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| } | |
| .hud-val { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| } | |
| .hud-val.text-sm { | |
| font-size: 12.5px; | |
| } | |
| .hud-sub { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .live-chart-wrap { | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 10px; | |
| margin-bottom: 14px; | |
| } | |
| /* LIVE TRADES TICKER STREAM */ | |
| .live-trades-stream { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 14px; | |
| padding: 10px 12px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| } | |
| .stream-heading { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| .stream-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: #10b981; | |
| box-shadow: 0 0 8px #10b981; | |
| animation: pulse-dot 1s infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0% { transform: scale(0.9); opacity: 0.7; } | |
| 50% { transform: scale(1.2); opacity: 1; } | |
| 100% { transform: scale(0.9); opacity: 0.7; } | |
| } | |
| .stream-items { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .stream-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-default); | |
| border-radius: 4px; | |
| font-size: 11.5px; | |
| } | |
| .pill-sym { | |
| font-weight: 700; | |
| color: var(--text-main); | |
| } | |
| .pill-time { | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| } | |
| .completed-kpis-panel { | |
| margin-top: 14px; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--border-subtle); | |
| } | |
| /* ========================================================================== | |
| MARKET EXPLORER & SECTOR-WISE WORKSTATION | |
| ========================================================================== */ | |
| .market-explorer-page { | |
| gap: 16px; | |
| } | |
| /* SECTOR NAVIGATION SECTION */ | |
| .sector-nav-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 8px; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); | |
| } | |
| .sector-nav-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .sector-nav-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .sector-nav-title .nav-icon { | |
| font-size: 20px; | |
| } | |
| .sector-nav-title h3 { | |
| margin: 0; | |
| font-size: 14.5px; | |
| font-weight: 700; | |
| color: #fff; | |
| letter-spacing: -0.01em; | |
| } | |
| .sector-nav-title small { | |
| display: block; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .sector-filter-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .filter-pill-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-default); | |
| color: var(--text-secondary); | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .filter-pill-btn:hover { | |
| background: var(--bg-surface-hover); | |
| color: #fff; | |
| border-color: #38bdf8; | |
| } | |
| .filter-pill-btn.active { | |
| background: rgba(16, 185, 129, 0.12); | |
| border-color: rgba(16, 185, 129, 0.35); | |
| color: #10b981; | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); | |
| } | |
| .search-box-compact { | |
| position: relative; | |
| width: 240px; | |
| } | |
| .search-box-compact .search-input { | |
| width: 100%; | |
| padding: 6px 28px 6px 12px; | |
| font-size: 12px; | |
| border-radius: 6px; | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-default); | |
| color: var(--text-main); | |
| outline: none; | |
| } | |
| .search-box-compact .search-input:focus { | |
| border-color: var(--color-brand); | |
| box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); | |
| } | |
| .clear-search-btn { | |
| position: absolute; | |
| right: 8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 11px; | |
| padding: 2px 4px; | |
| } | |
| .clear-search-btn:hover { | |
| color: var(--text-main); | |
| } | |
| /* SECTOR TABS RAIL */ | |
| .sector-tabs-rail { | |
| display: flex; | |
| gap: 8px; | |
| overflow-x: auto; | |
| padding-bottom: 4px; | |
| scrollbar-width: thin; | |
| } | |
| .sector-tabs-rail::-webkit-scrollbar { | |
| height: 4px; | |
| } | |
| .sector-tabs-rail::-webkit-scrollbar-thumb { | |
| background: var(--border-default); | |
| border-radius: 2px; | |
| } | |
| .sector-tab-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 14px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| font-size: 12px; | |
| font-weight: 500; | |
| transition: all 0.15s ease; | |
| user-select: none; | |
| } | |
| .sector-tab-btn:hover { | |
| background: var(--bg-surface-hover); | |
| color: var(--text-main); | |
| border-color: var(--border-default); | |
| } | |
| .sector-tab-btn.active { | |
| background: rgba(56, 189, 248, 0.14); | |
| color: var(--color-brand); | |
| border-color: rgba(56, 189, 248, 0.4); | |
| font-weight: 600; | |
| box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); | |
| } | |
| .tab-icon { | |
| font-size: 13px; | |
| } | |
| .tab-label { | |
| font-size: 12px; | |
| } | |
| .tab-count-badge { | |
| background: var(--bg-app); | |
| color: var(--text-muted); | |
| padding: 1px 6px; | |
| border-radius: 10px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .sector-tab-btn.active .tab-count-badge { | |
| background: rgba(56, 189, 248, 0.2); | |
| color: var(--color-brand); | |
| border-color: rgba(56, 189, 248, 0.3); | |
| } | |
| /* SECTOR INSTRUMENTS BELT */ | |
| .sector-ticker-belt { | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 10px; | |
| min-height: 80px; | |
| } | |
| .loading-ticker-strip, | |
| .empty-ticker-strip { | |
| padding: 18px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .btn-link { | |
| background: transparent; | |
| border: none; | |
| color: var(--color-brand); | |
| cursor: pointer; | |
| text-decoration: underline; | |
| font-size: 12px; | |
| padding: 0; | |
| } | |
| .ticker-cards-scroll { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); | |
| gap: 8px; | |
| max-height: 240px; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| } | |
| .instrument-ticker-card { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 8px 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: all 0.15s ease; | |
| user-select: none; | |
| } | |
| .instrument-ticker-card:hover { | |
| background: var(--bg-surface-elevated); | |
| border-color: var(--border-default); | |
| transform: translateY(-1px); | |
| } | |
| .instrument-ticker-card.selected { | |
| background: rgba(56, 189, 248, 0.12); | |
| border-color: #38bdf8; | |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.25); | |
| } | |
| .card-top-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .sym-ticker { | |
| font-size: 12.5px; | |
| font-weight: 700; | |
| color: #fff; | |
| letter-spacing: 0.02em; | |
| } | |
| .fast-tag { | |
| font-size: 9.5px; | |
| font-weight: 700; | |
| color: #10b981; | |
| background: rgba(16, 185, 129, 0.14); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(16, 185, 129, 0.25); | |
| } | |
| .cold-tag { | |
| font-size: 9px; | |
| color: var(--text-muted); | |
| background: rgba(148, 163, 184, 0.08); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| } | |
| .card-bottom-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .sym-sector-tag { | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| /* ACTIVE SYMBOL WORKSPACE */ | |
| .market-workspace { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .active-symbol-banner { | |
| background: linear-gradient(135deg, rgba(14, 22, 34, 0.98), rgba(20, 31, 46, 0.95)); | |
| border: 1px solid rgba(56, 189, 248, 0.3); | |
| border-radius: 8px; | |
| padding: 14px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); | |
| } | |
| .banner-left { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .symbol-headline { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .symbol-headline h2 { | |
| margin: 0; | |
| font-size: 22px; | |
| font-weight: 800; | |
| color: #fff; | |
| letter-spacing: -0.02em; | |
| } | |
| .symbol-date-range { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| .symbol-date-range strong { | |
| color: #fff; | |
| } | |
| .range-meta { | |
| color: var(--color-brand); | |
| font-weight: 500; | |
| } | |
| .banner-right-metrics { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .metric-pill { | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 6px; | |
| padding: 6px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| min-width: 90px; | |
| } | |
| .metric-lbl { | |
| font-size: 9.5px; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| } | |
| .metric-val { | |
| font-size: 13.5px; | |
| font-weight: 700; | |
| color: #fff; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; | |
| } | |
| /* CHART CONTROLS PANEL */ | |
| .chart-controls-panel { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 8px; | |
| } | |
| .controls-flex-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .ctrl-heading { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| letter-spacing: 0.05em; | |
| } | |
| .presets-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .preset-buttons { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .preset-btn { | |
| padding: 4px 10px; | |
| background: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-default); | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| font-size: 11px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .preset-btn:hover { | |
| background: var(--bg-surface-hover); | |
| color: #fff; | |
| border-color: #38bdf8; | |
| } | |
| .btn-group-segmented { | |
| display: inline-flex; | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-default); | |
| border-radius: 5px; | |
| padding: 2px; | |
| gap: 2px; | |
| } | |
| .btn-seg { | |
| padding: 4px 10px; | |
| background: transparent; | |
| border: none; | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| font-size: 11px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-seg:hover { | |
| color: #fff; | |
| } | |
| .btn-seg.active { | |
| background: var(--bg-surface-elevated); | |
| color: var(--color-brand); | |
| font-weight: 600; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | |
| } | |
| .indicators-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .checkbox-pills { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .checkbox-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 9px; | |
| background: var(--bg-app); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 4px; | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| user-select: none; | |
| transition: all 0.15s ease; | |
| } | |
| .checkbox-pill.active { | |
| border-color: var(--color-brand); | |
| color: var(--color-brand); | |
| background: rgba(56, 189, 248, 0.08); | |
| } | |
| .checkbox-pill input { | |
| accent-color: #38bdf8; | |
| cursor: pointer; | |
| } | |
| .chart-actions-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .active-obs-tag { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| /* COLD ARCHIVE NOTICE */ | |
| .cold-archive-notice { | |
| background: rgba(14, 22, 34, 0.95); | |
| border: 1px dashed var(--border-default); | |
| border-radius: 8px; | |
| padding: 30px 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| max-width: 600px; | |
| margin: 20px auto; | |
| } | |
| .notice-icon { | |
| font-size: 28px; | |
| flex-shrink: 0; | |
| } | |
| .notice-content h4 { | |
| margin: 0 0 6px; | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: #fff; | |
| } | |
| .notice-content p { | |
| margin: 0 0 12px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| .notice-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |