/* =========================================================================== Apex-Auto Control Panel — dark fintech theme =========================================================================== */ /* --------------------------------------------------------------------------- Theme system. All base/surface/line colors are driven by CSS custom properties so the whole app recolors by swapping variable values via a data-theme attribute on . DEFAULT = black-base (near-black base with dark-grey surfaces). data-theme="grey-base" reverses it (dark-grey base with near-black surfaces). Accent + semantic P&L colors stay constant across modes. --------------------------------------------------------------------------- */ :root, :root[data-theme="black-base"] { --bg: #0a0a0a; /* near-black app background */ --surface: #1a1a1a; /* dark-grey cards */ --surface-2: #242424; /* nested / hover / elevated */ --line: #2a2a2a; /* hairlines */ --line-2: #383838; --header-bg: rgba(10,10,10,.82); --nav-bg: rgba(26,26,26,.96); } :root[data-theme="grey-base"] { --bg: #1e1e1e; /* dark-grey base */ --surface: #101010; /* near-black highlights / cards */ --surface-2: #0a0a0a; /* more elevated = darker */ --line: #2f2f2f; --line-2: #3d3d3d; --header-bg: rgba(30,30,30,.82); --nav-bg: rgba(16,16,16,.96); } :root { /* text + semantic colors are theme-independent */ --text: #e8e8ea; --muted: #78787e; --muted-2: #6a6a70; --accent: #9fb3c8; /* muted steel blue — interactive/active states only */ --accent-hover:#b6c6d6; --accent-dim: #1b2531; /* dark steel tint for active backgrounds */ --accent-line: #34455a; /* steel border on accented chrome */ --accent-ink: #0a0f14; /* dark text on solid-accent buttons */ --up: #34d399; /* green — P&L gain (financial semantic, kept) */ --down: #f87171; /* red — P&L loss (financial semantic, kept) */ --amber: #fbbf24; --danger: #ef4444; --radius: 14px; --radius-sm: 10px; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } /* The [hidden] attribute must always win over component display rules (.login uses display:grid, .view uses display:flex, etc.). Without this override those class rules keep the element visible after toggling hidden. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.45; } .num, .kpi-value, .data-table td.num, .data-table th.num { font-variant-numeric: tabular-nums lining-nums; font-family: var(--mono); } .muted { color: var(--muted); } .tiny { font-size: 12px; } h1,h2,h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 14px; color: var(--text); } a.link { color: var(--accent); font-size: 12px; text-decoration: none; cursor: pointer; } a.link:hover { text-decoration: underline; } /* ---------- buttons ---------- */ .btn { font-family: var(--sans); font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm); padding: 10px 16px; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--surface-2); } .btn-amber { background: transparent; color: var(--amber); border-color: #5a4a17; } .btn-amber:hover { background: #2a230e; } .btn-danger { background: transparent; color: var(--down); border-color: #5a2222; } .btn-danger:hover { background: #2a1414; } /* ---------- login ---------- */ .login { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--surface) 0%, var(--bg) 60%); } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .brand { display: flex; align-items: center; gap: 14px; } .brand h1 { font-size: 22px; } .brand p { margin: 2px 0 0; } .logo { width: 34px; height: 34px; color: var(--accent); flex: none; } .field-label { display: block; font-size: 12px; color: var(--muted); margin: 22px 0 6px; text-transform: uppercase; letter-spacing: .06em; } #token-input, .select { width: 100%; background: var(--bg); border: 1px solid var(--line-2); color: var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--mono); font-size: 14px; } #token-input:focus, .select:focus { outline: none; border-color: var(--accent); } #login .btn-primary { width: 100%; margin-top: 16px; padding: 12px; } .login-error { color: var(--down); font-size: 13px; margin: 12px 0 0; } .login-card .muted.tiny { margin-top: 16px; text-align: center; } /* ---------- dashboard shell ---------- */ .dashboard { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; height: 100dvh; } .sidebar { grid-row: 1 / -1; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; overflow-y: auto; overscroll-behavior: contain; } .brand-sm { padding: 4px 8px 16px; } .brand-sm .logo { width: 26px; height: 26px; } .brand-name { font-weight: 700; letter-spacing: -.01em; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; color: var(--muted); font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; } .nav-item .ic { width: 18px; text-align: center; opacity: .9; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-dim); color: var(--accent); } .logout { margin-top: auto; color: var(--muted-2); } .logout:hover { color: var(--down); } .header { grid-column: 2; position: sticky; top: 0; z-index: 10; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; gap: 12px; } .header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .header-right { display: flex; align-items: center; gap: 12px; } .pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 100px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line-2); color: var(--muted); } .pill-ok { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); } .pill-warn { color: var(--amber); border-color: #4a3c17; background: #231c0e; } .pill-err { color: var(--down); border-color: #4a2020; background: #231010; } .pill-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); } #pause-pill { color: var(--amber); border-color: #4a3c17; background: #231c0e; } .main { grid-column: 2; overflow-y: auto; overscroll-behavior: contain; padding: 22px; } .view { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; } /* ---------- cards & KPIs ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .kpi { display: flex; flex-direction: column; gap: 8px; padding: 16px; } .kpi-label { font-size: 12px; color: var(--muted); } .kpi-value { font-size: 22px; font-weight: 700; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mini-list { display: flex; flex-direction: column; } .mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 13px; } .mini-row:first-child { border-top: none; } .mini-row .sym { font-family: var(--mono); font-weight: 700; } .mini-row .meta { color: var(--muted); font-size: 12px; } .up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); } .controls-card .control-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .control-result { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; } .control-result.ok { border-color: #1d4a3a; } .control-result.no { border-color: #4a3c17; } /* ---------- toolbar ---------- */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .toolbar .field-label { margin: 0; } .select { width: auto; min-width: 150px; padding: 8px 12px; } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; overscroll-behavior: contain; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0 14px 10px; position: sticky; top: 0; background: var(--surface); } .data-table td { padding: 11px 14px; border-top: 1px solid var(--line); } .data-table td.num, .data-table th.num { text-align: right; } .data-table tbody tr:hover { background: var(--surface-2); } .sym-cell { font-family: var(--mono); font-weight: 700; } .tag { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); } .tag.buy { color: var(--up); border-color: #1d4a3a; } .tag.sell { color: var(--down); border-color: #4a2020; } .empty { text-align: center; color: var(--muted); padding: 28px 12px; font-size: 14px; } /* ---------- decision feed ---------- */ .feed { display: flex; flex-direction: column; gap: 0; padding: 6px 0; } .feed-item { display: grid; grid-template-columns: 74px 116px 1fr; gap: 12px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--line); } .feed-item:first-child { border-top: none; } .feed-time { font-family: var(--mono); font-size: 12px; color: var(--muted); } .feed-badge { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; text-align: center; background: var(--surface-2); border: 1px solid var(--line-2); } .b-PROPOSAL { color: #93c5fd; border-color: #243a5a; } .b-VERDICT { color: #c4b5fd; border-color: #392a5a; } .b-CONFER { color: var(--accent); border-color: var(--accent-line); } .b-CONSENSUS { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); } .b-TIE_BREAKER { color: var(--amber); border-color: #4a3c17; } .b-ORDER_SENT { color: #6ee7b7; border-color: #1d4a3a; } .b-FILL { color: var(--up); border-color: #1d4a3a; } .b-MEMORY { color: #9ca3af; border-color: var(--line-2); } .b-NOTICE { color: var(--muted); border-color: var(--line-2); } .feed-msg { font-size: 13px; } .feed-detail { margin-top: 6px; } .feed-detail summary { cursor: pointer; color: var(--muted); font-size: 12px; } .feed-detail pre { margin: 8px 0 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; font-family: var(--mono); font-size: 12px; color: #b8c4d4; } /* ---------- chat ---------- */ .view-chat { height: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 0; } .chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; } .chat-msg { display: flex; } .chat-msg.me { justify-content: flex-end; } .bubble { max-width: 78%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .chat-msg.bot .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .chat-msg.me .bubble { background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--text); border-bottom-right-radius: 4px; } .bubble .consensus-note { margin-top: 8px; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line-2); padding-top: 8px; } .chat-input { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .chat-input input { flex: 1; background: var(--bg); border: 1px solid var(--line-2); color: var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--sans); font-size: 14px; } .chat-input input:focus { outline: none; border-color: var(--accent); } /* ---------- skeletons ---------- */ .skeleton-row { height: 16px; margin: 10px 2px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, #20293400 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ---------- mobile bottom nav ---------- */ .bottom-nav { display: none; } /* =========================================================================== Responsive — phone =========================================================================== */ @media (max-width: 820px) { .dashboard { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .sidebar { display: none; } .header { grid-column: 1; padding: 14px 16px; } .main { grid-column: 1; padding: 16px 14px calc(78px + env(safe-area-inset-bottom)); } .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-value { font-size: 19px; } .row-2 { grid-template-columns: 1fr; } .feed-item { grid-template-columns: 64px 100px 1fr; gap: 8px; padding: 12px 14px; } .view-chat { height: calc(100dvh - 56px - 78px - env(safe-area-inset-bottom)); } .bottom-nav { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--nav-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); } .bn-item { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; color: var(--muted-2); font-family: var(--sans); font-size: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .bn-item span { font-size: 10px; font-weight: 600; } .bn-item.active { color: var(--accent); } } @media (max-width: 420px) { .kpi-grid { grid-template-columns: 1fr 1fr; } } /* ---------- settings: ops grid (F2) ---------- */ .ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 6px; } .ops-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .ops-field .select { width: 100%; min-width: 0; } /* ---------- connections (F4) ---------- */ .conn-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .conn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); flex-wrap: wrap; } .conn-info { display: flex; flex-direction: column; gap: 2px; } .conn-name { font-family: var(--mono); font-weight: 700; font-size: 13px; } .conn-mask { font-family: var(--mono); font-size: 12px; color: var(--muted); } .conn-mask.unset { color: var(--muted-2); font-style: italic; } .conn-mask.revealed { color: var(--amber); word-break: break-all; } .conn-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .conn-input { min-width: 160px; } /* ---------- usage / cost table (read-only) ---------- */ .usage-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .usage-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 0.8fr; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .usage-head { background: transparent; border-color: transparent; padding-bottom: 2px; color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .usage-total { background: var(--accent-dim); border-color: var(--accent-line); font-weight: 700; } .usage-name { font-weight: 600; font-size: 13px; } .usage-num { font-family: var(--mono); font-size: 12px; text-align: right; } .usage-refill-cell { text-align: right; } .usage-refill { color: var(--accent); font-size: 12px; text-decoration: none; } .usage-refill:hover { color: var(--accent-hover); text-decoration: underline; } /* ---------- universe sub-tabs (Firefox-style strip) ---------- */ .subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .subtab { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 10px 14px; margin-bottom: -1px; cursor: pointer; transition: color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; } .subtab:hover { color: var(--text); } .subtab.active { color: var(--accent); border-bottom-color: var(--accent); } .subtab .pill { font-size: 10px; padding: 3px 8px; } .subtab.active .pill { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); } /* ---------- trade chart modal (F3) ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(4,8,12,.72); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 18px; width: min(780px, 100%); max-height: 92vh; overflow: auto; } .modal-head-actions { display: flex; align-items: center; gap: 12px; } .ind-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; } #chart-canvas { width: 100%; height: auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 4px; } .chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; font-family: var(--mono); } .chart-legend .lg-entry { color: var(--up); } .chart-legend .lg-exit { color: var(--down); } .chart-legend .lg-ind { color: var(--amber); } .btn-chart { padding: 4px 8px; font-size: 14px; } /* ---------- settings tabs (F2) ---------- */ .settings-panel { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; } #settings-tabs { margin-bottom: 4px; } /* ---------- pipeline toggles + stats (F1/F4) ---------- */ .pipeline-row { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .pipeline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pipeline-name { font-family: var(--mono); font-weight: 700; font-size: 13px; } .pipeline-name .env-off { color: var(--muted-2); font-family: var(--sans); font-weight: 600; font-size: 11px; margin-left: 8px; } .pipeline-actions { display: flex; align-items: center; gap: 8px; } .pipeline-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .pstat { display: flex; flex-direction: column; gap: 2px; } .pstat-label { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; } .pstat-value { font-family: var(--mono); font-size: 13px; font-weight: 700; } /* ---------- large chart modal (F7) ---------- */ .modal-card-lg { width: min(960px, 100%); } .chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; } .chart-timeframes { display: flex; gap: 4px; flex-wrap: wrap; } .tf-btn { padding: 5px 10px; font-size: 12px; } .tf-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); } .chart-indicators { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .lwchart { width: 100%; height: 360px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 4px; } .lwchart-sub { height: 140px; margin-top: 8px; } .chart-news-side { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } .chart-news-side .news-head { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; } .chart-news-side a { color: var(--accent); font-size: 12px; text-decoration: none; } .chart-news-side a:hover { text-decoration: underline; } /* ---------- fix36: round-trip history terminal + chart upgrades ---------- */ .kpi-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); } } .equity-chart { height: 200px; } .trips-toolbar { row-gap: 8px; } .trips-toolbar #trips-symbol { width: 130px; } #trips-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } #trips-table th.sortable:hover { color: var(--text); } #trips-table th.sorted::after { content: " \25be"; opacity: .75; } #trips-table th.sorted[data-dir="asc"]::after { content: " \25b4"; } .row-actions { white-space: nowrap; } .modal-head-actions { display: flex; align-items: center; gap: 10px; } .quote-strip { font-family: var(--mono); font-size: 13px; display: inline-flex; align-items: center; gap: 10px; } .chart-ohlc { min-height: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 14px; padding: 2px 4px 6px; flex-wrap: wrap; } .select-sm { padding: 4px 8px; font-size: 12px; } .dossier-body { max-height: 62vh; overflow: auto; } .dossier-body pre { font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 0; } /* ---------- fix37: Performance tab ---------- */ .tf-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .tf-pill { background: var(--card, #16181d); color: var(--text, #e8eaed); border: 1px solid var(--line, #2a2d34); border-radius: 999px; padding: 5px 14px; font-size: 12px; cursor: pointer; letter-spacing: .04em; } .tf-pill:hover { border-color: var(--accent, #4f8cff); } .tf-pill.active { background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff); color: #fff; } .bench-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #9aa0a6); cursor: pointer; } .bench-toggle input { accent-color: var(--accent, #4f8cff); } #view-performance .note { margin: -6px 0 14px 2px; } #perf-equity-chart { height: 240px; }