/* ============================================================================= * Fleet Terminal -- PHOSPHOR * * Read-only quant fleet monitoring terminal. Dual-theme (dark default / light), * one semantic token set; [data-theme] on only swaps values. Everything * mono, tabular-nums on all numerics. Status is NEVER color alone: a [OK]/[STALE] * /[DOWN] text tag + a glowing dot accompany every state. Zero emoji anywhere -- * status/emphasis is dot + glow + text prefix + font weight + color only. * * Motion is compositor-friendly (opacity / transform / box-shadow / filter) and * fully disabled under prefers-reduced-motion. The board consumes the unchanged * read-only backend (/api/snapshot, /api/stream SSE, /api/curves) -- no write * path exists in this stylesheet's UI. * ========================================================================== */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/vendor/fonts/jetbrains-mono-var.woff2") format("woff2"); } /* --- design tokens: dark (default -- "PHOSPHOR") ------------------------- */ :root, :root[data-theme="dark"] { --bg: #070908; --bg2: #0b0e0d; --panel: #0d1110; --panel2: #101615; --raise: #131a18; --line: #1b2422; --line2: #27332f; --hair: rgba(255, 255, 255, 0.04); --fg: #cfe0db; --fg2: #9aaca6; --dim: #5d706a; --faint: #3e4b47; --accent: #f2a93b; --accent2: #46d6c4; --glow: rgba(242, 169, 59, 0.45); --glow2: rgba(70, 214, 196, 0.4); --ok: #4fd67e; --okdim: rgba(79, 214, 126, 0.12); --okline: rgba(79, 214, 126, 0.28); --stale: #f2c14e; --staledim: rgba(242, 193, 78, 0.12); --staleline: rgba(242, 193, 78, 0.3); --down: #ff5c63; --downdim: rgba(255, 92, 99, 0.1); --downline: rgba(255, 92, 99, 0.32); --up: #4fd67e; --dn: #ff5c63; --chip: rgba(255, 255, 255, 0.022); --grad: rgba(255, 255, 255, 0.015); --shadow: 0 10px 34px rgba(0, 0, 0, 0.45); --scan: 0.05; } /* --- design tokens: light ("PHOSPHOR light") ---------------------------- */ :root[data-theme="light"] { --bg: #e8e6df; --bg2: #efece5; --panel: #fbfaf6; --panel2: #f4f1ea; --raise: #ffffff; --line: #dcd6ca; --line2: #c8bdac; --hair: rgba(0, 0, 0, 0.05); --fg: #1c2220; --fg2: #515b55; --dim: #8a938b; --faint: #b3b0a4; --accent: #bd6f0c; --accent2: #0c8478; --glow: rgba(189, 111, 12, 0.22); --glow2: rgba(12, 132, 120, 0.18); --ok: #0f7a37; --okdim: rgba(15, 122, 55, 0.09); --okline: rgba(15, 122, 55, 0.28); --stale: #a9760a; --staledim: rgba(169, 118, 10, 0.1); --staleline: rgba(169, 118, 10, 0.32); --down: #c5302d; --downdim: rgba(197, 48, 45, 0.07); --downline: rgba(197, 48, 45, 0.3); --up: #0f7a37; --dn: #c5302d; --chip: rgba(0, 0, 0, 0.022); --grad: rgba(0, 0, 0, 0.012); --shadow: 0 8px 26px rgba(90, 80, 55, 0.13); --scan: 0; /* scanline off in light */ } /* --- reset / base ------------------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { margin: 0; min-height: 100vh; background: radial-gradient(120% 80% at 50% -10%, var(--bg2), var(--bg)); color: var(--fg); font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .num, .mono, td.num, th.num { font-variant-numeric: tabular-nums; } button { font-family: inherit; } button:focus-visible, .topo-node:focus-visible, .table-scroll:focus-visible, .tool-btn:focus-visible, .legend-toggle:focus-visible, .exception-item:focus-visible, .drawer-close:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* fixed CRT scanline overlay (dark only via --scan; off in light) */ .scanline { position: fixed; inset: 0; height: 40px; background: linear-gradient(180deg, var(--glow), transparent); opacity: var(--scan); animation: scan 8s linear infinite; pointer-events: none; z-index: 50; } /* --- scrollbars --------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } /* --- status tri-state primitives ---------------------------------------- */ /* Every status surface dual-encodes: a glowing .dot + an [OK]/[STALE]/[DOWN] * .tag, never color alone. .s-* sets the text color; unavailable maps to .down. */ .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .dot.ok { background: var(--ok); box-shadow: 0 0 7px var(--ok); } .dot.stale { background: var(--stale); box-shadow: 0 0 7px var(--stale); } .dot.down { background: var(--down); box-shadow: 0 0 7px var(--down); } .dot.idle { background: var(--dim); } .dot.sm { width: 6px; height: 6px; } .tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; } .tag.ok, .s-ok { color: var(--ok); } .tag.stale, .s-stale { color: var(--stale); } .tag.down, .s-down { color: var(--down); } .pnl-pos { color: var(--up); } .pnl-neg { color: var(--dn); } .pnl-zero, .value-deferred { color: var(--faint); } /* error callout: a down source's reason text, never swallowed */ .callout { font-size: 10.5px; color: var(--down); background: var(--downdim); border-left: 2px solid var(--down); padding: 9px 11px; border-radius: 0 6px 6px 0; line-height: 1.5; word-break: break-word; } .callout .callout-age { color: var(--dim); margin-top: 5px; } .section-note { font-size: 10px; letter-spacing: 0.04em; color: var(--dim); margin: 0 0 9px; } .empty-note { padding: 26px 14px; text-align: center; color: var(--dim); font-size: 11px; letter-spacing: 0.05em; } /* ============================================================================= * HEADER (sticky chrome: brand + host badges + meta + topology + tabs) * ========================================================================== */ header#chrome { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .hdr-row { display: flex; align-items: center; gap: 14px; padding: 10px 18px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 9px; } .logo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--glow); animation: pulse 1.5s ease-in-out infinite; } .logo-dot.tick { animation: pulse 1.5s ease-in-out infinite, logoTick 0.5s ease-out; } .brand-name { font-weight: 800; letter-spacing: 0.11em; font-size: 14px; text-shadow: 0 0 12px var(--glow); } .brand-name .sep { color: var(--dim); } .vrule { width: 1px; height: 18px; background: var(--line2); } .badges { display: flex; gap: 7px; flex-wrap: wrap; } .hbadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--chip); font-size: 11px; letter-spacing: 0.03em; white-space: nowrap; } .hbadge .label { color: var(--fg2); } .hdr-meta { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--dim); flex-wrap: wrap; } .hdr-meta .et .sess { color: var(--fg); } .sse { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--okline); border-radius: 6px; background: var(--okdim); } .sse .dot { animation: sse 1.4s ease-in-out infinite; } .sse.reconnecting { border-color: var(--staleline); background: var(--staledim); } .sse.reconnecting .dot { animation: blink 1.4s ease-in-out infinite; } .sse .label { font-weight: 700; letter-spacing: 0.04em; } .updated { font-variant-numeric: tabular-nums; min-width: 104px; } .theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line2); border-radius: 6px; background: var(--chip); color: var(--fg2); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; } .theme-btn:hover { color: var(--fg); border-color: var(--accent); } /* --- topology ----------------------------------------------------------- */ .topo { padding: 13px 18px 15px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--grad), transparent); } .topo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; } .topo-title { font-size: 10px; letter-spacing: 0.22em; color: var(--dim); } .topo-hint { font-size: 10px; color: var(--faint); } .topo-rows { display: flex; flex-direction: column; gap: 11px; overflow-x: auto; } .topo-chain { display: flex; align-items: flex-start; min-width: 760px; } .topo-env { flex: 0 0 58px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; margin-top: 9px; } .topo-env.prod { color: var(--accent); } .topo-env.test { color: var(--dim); } .topo-track { flex: 1; display: flex; align-items: flex-start; } .topo-node { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 72px; cursor: pointer; } .topo-node.changed .topo-pill { animation: stateChanged 0.7s ease-out; } .topo-pill { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); } .topo-pill.stale { border-color: var(--staleline); background: var(--staledim); } .topo-pill.down { border-color: var(--downline); background: var(--downdim); } .topo-pill.unknown { border-color: var(--line2); background: var(--panel2); } /* idle = off service hours: neutral grey + dimmed, an expected quiet, NOT the in-hours 'no hb' fault (which keeps the red dot via the .dot.down class). */ .topo-pill.idle { border-color: var(--line2); background: var(--panel2); opacity: 0.65; } .topo-pill .name { font-size: 11px; color: var(--fg); } .topo-pill.stale .name { color: var(--stale); } .topo-pill.down .name { color: var(--down); } .topo-pill.unknown .name { color: var(--dim); } .topo-pill.idle .name { color: var(--dim); } .topo-age { font-size: 9px; font-variant-numeric: tabular-nums; color: var(--dim); } .topo-age.stale { color: var(--stale); } .topo-age.down { color: var(--down); } .topo-age.idle { color: var(--dim); } .topo-conn { flex: 1; height: 2px; position: relative; margin-top: 17px; min-width: 22px; } .topo-conn::before { content: ""; position: absolute; inset: 0; border-top: 1.5px dashed var(--line2); } .topo-conn .flow { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 9px var(--glow2); animation: flowDot 2.4s linear infinite; } /* --- tab nav ------------------------------------------------------------ */ nav#tabs { display: flex; gap: 2px; padding: 0 18px; border-top: 1px solid var(--line); overflow-x: auto; } .tab-btn { padding: 11px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; white-space: nowrap; } .tab-btn .meta { margin-left: 7px; font-size: 10px; color: var(--dim); font-weight: 500; } .tab-btn:hover { color: var(--fg2); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .ops-rail { max-width: 2100px; margin: 0 auto; padding: 12px 18px 0; } .exception-lane { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; } .exception-ok, .exception-item { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--fg2); padding: 7px 10px; white-space: nowrap; } .exception-item { cursor: pointer; font: inherit; } .exception-item.down { border-color: var(--downline); background: var(--downdim); } .exception-item.stale { border-color: var(--staleline); background: var(--staledim); } .exception-item b, .exception-ok b { color: var(--fg); } /* ============================================================================= * MAIN / panels * ========================================================================== */ main#content { padding: 18px; max-width: 2100px; margin: 0 auto; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: panelIn 0.2s ease-out; } /* --- card base ---------------------------------------------------------- */ .card { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); min-width: 0; } .card.tinted { background: linear-gradient(180deg, var(--grad), var(--panel)); } .card-head { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .card-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; } .card-sub { font-size: 10px; color: var(--dim); } .table-tools, .chart-controls { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; } .tool-btn, .chart-controls button, .drawer-close { border: 1px solid var(--line2); border-radius: 6px; background: var(--chip); color: var(--fg2); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 8px; cursor: pointer; } .tool-btn:hover, .chart-controls button:hover, .drawer-close:hover, .chart-controls button[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); } .column-menu { position: relative; } .column-menu summary { list-style: none; } .column-menu summary::-webkit-details-marker { display: none; } .column-menu[open] { z-index: 20; } .column-menu label { display: flex; gap: 6px; align-items: center; margin-top: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); color: var(--fg2); white-space: nowrap; } .card-pad { padding: 14px 15px; } .card.stale { opacity: 0.72; } .card.down { border-color: var(--downline); } /* fresh-data accent wash (opacity-only), restarted by re-adding .updated */ .card.updated { animation: dataWash 0.6s ease-out; } .card.drill { animation: ring 1.3s ease-out 2; box-shadow: 0 0 0 2px var(--glow), var(--shadow); } .grid-infra { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 14px; } .span-2 { grid-column: span 2; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 16px; } /* --- generic data table ------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: 11px; } thead tr { position: sticky; top: 0; z-index: 2; background: var(--panel2); } th { text-align: left; padding: 8px 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--dim); border-bottom: 1px solid var(--line2); white-space: nowrap; } th.num, td.num { text-align: right; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--fg2); } th.sorted-desc::after { content: " \25BC"; color: var(--accent); } th.sorted-asc::after { content: " \25B2"; color: var(--accent); } th[aria-sort] { color: var(--accent); } td { padding: 8px 12px; border-bottom: 1px solid var(--hair); } tbody tr:hover { background: var(--chip); } .pos-table th:first-child, .pos-table td:first-child, .quotes-table th:first-child, .quotes-table td:first-child { position: sticky; left: 0; z-index: 3; background: var(--panel); box-shadow: 1px 0 0 var(--line); } .pos-table thead th:first-child, .quotes-table thead th:first-child { z-index: 5; background: var(--panel2); } .table-scroll { max-height: min(52vh, 340px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 8px 8px; box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); } .table-scroll.tall { max-height: min(58vh, 360px); } .table-scroll.short { max-height: min(44vh, 300px); } .table-scroll:hover { border-color: var(--line2); } .table-scroll:focus-visible { border-color: var(--accent2); box-shadow: 0 0 0 2px var(--glow2); } [data-density="compact"] .table-scroll td, [data-density="compact"] .table-scroll th { padding-top: 5px; padding-bottom: 5px; } /* ============================================================================= * TRADING * ========================================================================== */ .env-card .age { margin-left: auto; font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; } .hero-label { font-size: 10px; letter-spacing: 0.12em; color: var(--dim); margin-bottom: 5px; } .hero-row { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; } .hero-value { font-size: 34px; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; animation: refresh 1.5s steps(30) infinite; } .hero-value.pnl-pos { text-shadow: 0 0 18px var(--glow2); } .hero-value.pnl-neg { text-shadow: 0 0 18px var(--downline); } .mini-stats { display: flex; gap: 16px; } .mini-stat .k { font-size: 9.5px; color: var(--dim); } .mini-stat .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .broker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .broker.one { grid-template-columns: 1fr; } .broker .k { font-size: 9px; color: var(--dim); letter-spacing: 0.05em; } .broker .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 20px; background: transparent; } .chip.on { background: var(--chip); } .chip .k { color: var(--dim); } .chip .v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--dim); } .chip.on .v { color: var(--accent2); } /* positions */ .pos-filter { margin-left: auto; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: 7px; background: var(--bg); padding: 5px 9px; } .pos-filter svg { flex: 0 0 auto; } .pos-filter input { border: 0; background: transparent; color: var(--fg); font-family: inherit; font-size: 11px; outline: none; width: 150px; } .pos-filter:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 2px var(--glow2); } .pos-group + .pos-group { border-top: 1px solid var(--line); } .group-head { display: flex; align-items: center; gap: 9px; padding: 9px 15px; background: var(--panel2); } .group-head .env { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--fg2); } .group-head .cnt { font-size: 10px; color: var(--dim); } .pos-table { min-width: 1060px; table-layout: fixed; } .pos-table th, .pos-table td, .quotes-table th, .quotes-table td { vertical-align: middle; } .pos-table td.num, .quotes-table td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .pos-table col[data-pos-col="pair"] { width: 8ch; } .pos-table col[data-pos-col="spread"] { width: 17ch; } .pos-table col[data-pos-col="underlying"], .pos-table col[data-pos-col="strike"], .pos-table col[data-pos-col="entry"], .pos-table col[data-pos-col="combo"] { width: 11ch; } .pos-table col[data-pos-col="exp"] { width: 12ch; } .pos-table col[data-pos-col="unreal"] { width: 31ch; } .pos-table col[data-pos-col="phase"] { width: 12ch; } .pos-table col[data-pos-col="dte"] { width: 7ch; } .pos-table [data-pos-col="pair"], .quotes-table [data-quote-col="symbol"] { font-weight: 700; color: var(--fg2); } .pos-table th[data-pos-col="spread"], .pos-table td[data-pos-col="spread"] { text-align: left; } .pos-table td[data-pos-col="spread"], .quotes-table td[data-quote-col="symbol"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pos-table th[data-pos-col="underlying"], .pos-table th[data-pos-col="strike"], .pos-table th[data-pos-col="entry"], .pos-table th[data-pos-col="combo"], .pos-table th[data-pos-col="unreal"], .pos-table th[data-pos-col="dte"], .quotes-table th[data-quote-col="last"], .quotes-table th[data-quote-col="bid"], .quotes-table th[data-quote-col="ask"], .quotes-table th[data-quote-col="age"] { text-align: right; } .quotes-table col[data-quote-col="symbol"] { width: 14ch; } .quotes-table col[data-quote-col="last"], .quotes-table col[data-quote-col="bid"], .quotes-table col[data-quote-col="ask"] { width: 11ch; } .quotes-table col[data-quote-col="age"] { width: 12ch; } .ref-tgt .ref { color: var(--fg); } .ref-tgt .arr { color: var(--dim); } .ref-tgt .tgt { color: var(--accent2); font-weight: 600; } .phase { font-size: 9.5px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line2); color: var(--accent2); background: var(--chip); white-space: nowrap; } .phase.post { color: var(--accent); border-color: var(--staleline); } .dte-warn { color: var(--stale); } .leg-pnl-stack { display: inline-grid; justify-items: end; row-gap: 2px; max-width: 30ch; white-space: normal; line-height: 1.25; text-align: right; } .leg-pnl-total { font-weight: 650; white-space: nowrap; } .leg-pnl-legs { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; font-size: 9.5px; } .leg-pnl-leg { white-space: nowrap; } .pos-row { cursor: pointer; } .pos-row:hover, .pos-row:focus, .pos-row.is-expanded { background: var(--chip); } .pos-row:hover td:first-child, .pos-row:focus td:first-child, .pos-row.is-expanded td:first-child { box-shadow: inset 2px 0 0 var(--accent2), 1px 0 0 var(--line); } .pos-row-detail { display: none; } .pos-row.is-expanded + .pos-row-detail, .pos-row-detail:hover { display: table-row; } .pos-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 10px 8px; padding: 8px 10px; border-left: 2px solid var(--line2); color: var(--fg2); background: var(--panel2); } .pos-detail-grid span { display: grid; gap: 2px; min-width: 0; } .pos-detail-grid b { color: var(--dim); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; } [data-hide-underlying="true"] [data-pos-col="underlying"], [data-hide-entry="true"] [data-pos-col="entry"], [data-hide-phase="true"] [data-pos-col="phase"], [data-hide-dte="true"] [data-pos-col="dte"] { display: none; } /* charts */ .chart-card { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); padding: 15px 16px; margin-bottom: 16px; } .chart-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .chart-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; } .chart-axis-note { font-size: 9px; color: var(--faint); } .legend { display: flex; gap: 14px; margin-left: auto; font-size: 10px; flex-wrap: wrap; } .legend .item { display: inline-flex; align-items: center; gap: 6px; color: var(--fg2); border: 0; background: transparent; font: inherit; padding: 0; cursor: pointer; } .legend .item.muted { opacity: 0.42; } .legend .swatch { width: 14px; height: 2px; } .legend .item b { font-variant-numeric: tabular-nums; } .chart-wrap { position: relative; height: 200px; } .chart-wrap.infra { height: 190px; } .chart-wrap.market { height: 210px; } .chart-foot { display: flex; justify-content: space-between; font-size: 9px; color: var(--faint); margin-top: 6px; } .state-empty { margin: 10px 12px; padding: 18px 16px; border: 1px dashed var(--line2); border-radius: 8px; background: var(--chip); } .state-title { color: var(--fg); font-weight: 800; letter-spacing: 0.04em; margin-bottom: 4px; } .state-body, .state-action { color: var(--dim); font-size: 10.5px; } .state-action { margin-top: 6px; color: var(--accent2); } .node-drawer { position: fixed; top: 0; right: 0; width: min(390px, 92vw); height: 100vh; z-index: 60; background: var(--panel); border-left: 1px solid var(--line2); box-shadow: -18px 0 48px rgba(0, 0, 0, 0.38); padding: 16px; } .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; } .drawer-k { color: var(--dim); font-size: 10px; letter-spacing: 0.18em; } .drawer-head h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: 0.04em; } .drawer-status { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); } .drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .drawer-grid div { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip); } .drawer-grid span { display: block; color: var(--dim); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; } .drawer-grid b { display: block; margin-top: 3px; color: var(--fg); word-break: break-word; } .status-changed, .status-changed .logo-dot { animation: stateChanged 0.7s ease-out; } /* ============================================================================= * INFRA * ========================================================================== */ .kv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; } .kv-head .name { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; } .kv-head .right { margin-left: auto; font-size: 10px; color: var(--dim); } .host-cpu { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 13px; } .host-cpu .k { font-size: 9px; color: var(--dim); letter-spacing: 0.06em; margin-bottom: 3px; } .host-cpu .v { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; animation: refresh 1.5s steps(30) infinite; } .bar-row { margin-bottom: 11px; } .bar-row:last-child { margin-bottom: 0; } .bar-label { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 5px; } .bar-label .k { color: var(--dim); } .bar-label .v { font-variant-numeric: tabular-nums; } .bar { height: 5px; border-radius: 3px; background: var(--bg); overflow: hidden; } .bar > span { display: block; height: 100%; } .bar > span.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .bar > span.stale { background: var(--stale); box-shadow: 0 0 8px var(--stale); } .bar > span.down { background: var(--down); box-shadow: 0 0 8px var(--down); } .kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 10px; } .kv-grid > div { min-width: 0; /* allow cells to shrink below content so long unbreakable keys wrap, not overflow */ } .kv-grid .k { font-size: 9px; color: var(--dim); } .kv-grid .v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; /* break long colon-joined Redis keys (ws_options_budget:straddle_split) */ } .kv-grid .v.accent2 { color: var(--accent2); } .kv-grid .v.ok { color: var(--ok); } .kv-grid .v.stale { color: var(--stale); } .svc-chain { display: flex; flex-direction: column; gap: 12px; } .svc-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .svc-env { flex: 0 0 46px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; margin-top: 7px; } .svc-env.prod { color: var(--accent); } .svc-env.test { color: var(--dim); } .svc-list { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; } .svc { display: flex; flex-direction: column; gap: 4px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--chip); min-width: 96px; } .svc.down { border-color: var(--downline); background: var(--downdim); } .svc.stale { border-color: var(--staleline); background: var(--staledim); } .svc.drill { animation: ring 1.3s ease-out 2; box-shadow: 0 0 0 2px var(--glow); } .svc-top { display: flex; align-items: center; gap: 6px; } .svc-top .name { font-size: 11px; font-weight: 700; color: var(--fg2); } .svc.down .svc-top .name { color: var(--down); } .svc.stale .svc-top .name { color: var(--stale); } .svc-top .tag { margin-left: auto; font-size: 8.5px; } .svc-age { font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums; word-break: break-word; } .svc.down .svc-age { color: var(--down); } .svc.stale .svc-age { color: var(--stale); } .cont-row.exited { opacity: 0.55; } .cont-state .lbl { color: var(--dim); } /* ============================================================================= * MARKET * ========================================================================== */ .market-grid { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; } .market-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .feeds { padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; } .feed { border: 1px solid var(--line); border-radius: 8px; background: var(--chip); padding: 10px 12px; } .feed.stale { border-color: var(--staleline); background: var(--staledim); } .feed.down { border-color: var(--downline); background: var(--downdim); } .feed-top { display: flex; align-items: center; gap: 8px; } .feed-top .name { font-size: 11.5px; font-weight: 700; } .feed-top .env { font-size: 9px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } .feed-top .tag { margin-left: auto; } .feed-quote { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; } .feed-quote .k { font-size: 9px; color: var(--dim); } .feed-quote .v { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .quotes-table { min-width: 520px; font-size: 12px; } .quotes-table td { padding: 9px 16px; } .quotes-table th { padding: 9px 16px; } tr.q-stale { opacity: 0.46; } .q-stale-prefix { font-size: 9px; font-weight: 700; color: var(--stale); margin-left: 4px; } /* ============================================================================= * animations (all compositor-friendly; disabled under reduced-motion) * ========================================================================== */ @keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } } @keyframes logoTick { 0% { box-shadow: 0 0 0 0 var(--glow); } 100% { box-shadow: 0 0 16px 3px transparent; } } @keyframes flowDot { 0% { left: -5%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 105%; opacity: 0; } } @keyframes scan { 0% { transform: translateY(-40px); } 100% { transform: translateY(100vh); } } @keyframes refresh { 0% { filter: brightness(1.7); } 18% { filter: brightness(1); } 100% { filter: brightness(1); } } @keyframes sse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.35; } } @keyframes ring { 0% { box-shadow: 0 0 0 0 var(--glow); } 70% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } @keyframes panelIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes dataWash { 0% { box-shadow: 0 0 0 1px var(--glow2), var(--shadow); } 100% { box-shadow: 0 0 0 1px transparent, var(--shadow); } } @keyframes stateChanged { 0% { filter: brightness(1.8); } 100% { filter: brightness(1); } } /* ============================================================================= * responsive * ========================================================================== */ @media (max-width: 900px) { .span-2 { grid-column: span 1; } } @media (max-width: 760px) { .market-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { main#content { padding: 12px; } .hdr-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px 12px; } .brand-name { font-size: 12px; letter-spacing: 0.08em; } .vrule { display: none; } .badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; } .hbadge { justify-content: center; gap: 4px; min-width: 0; padding: 4px 7px; font-size: 10px; } .hbadge .label { overflow: hidden; text-overflow: ellipsis; } .hbadge .tag { display: none; } .hdr-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; width: 100%; margin-left: 0; font-size: 10px; } .updated { justify-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-btn { justify-self: end; padding: 4px 7px; font-size: 10px; letter-spacing: 0.02em; } .topo { padding: 9px 12px 10px; } .topo-head { margin-bottom: 8px; } .topo-hint { display: none; } .topo-chain { min-width: 620px; align-items: center; } .topo-env { flex-basis: 44px; font-size: 9px; margin-top: 4px; } .topo-rows { gap: 7px; } .topo-track { align-items: center; } .topo-node { min-width: 56px; } .topo-pill { gap: 4px; padding: 3px 6px; } .topo-age { display: none; } nav#tabs { padding: 0 12px; } .tab-btn { flex: 1 0 auto; padding: 9px 10px; font-size: 11px; text-align: center; } .tab-btn .meta { display: block; margin: 2px 0 0; font-size: 9px; } .grid-cards, .grid-infra { grid-template-columns: 1fr; gap: 12px; } .market-grid { grid-template-columns: 1fr; } .card-head { align-items: flex-start; } .card-sub { flex-basis: 100%; } .card-pad { padding: 12px; } .ops-rail { padding: 8px 12px 0; } .exception-lane { gap: 6px; } .exception-ok, .exception-item { padding: 6px 8px; font-size: 10px; } .table-tools { width: 100%; margin-left: 0; } .tool-btn, .chart-controls button { padding: 4px 7px; font-size: 9px; } .hero-value { font-size: 28px; } .pos-filter { width: 100%; margin-left: 0; } .pos-filter input { min-width: 0; width: 100%; } .legend { width: 100%; margin-left: 0; gap: 8px; } .table-scroll, .table-scroll.tall { max-height: min(46vh, 320px); } .table-scroll.short { max-height: min(38vh, 260px); } .chart-card { padding: 12px; border-radius: 8px; } .chart-wrap, .chart-wrap.infra, .chart-wrap.market { height: 180px; } [data-watch-mode="compact"] .topo, [data-watch-mode="compact"] .chart-foot, [data-watch-mode="compact"] .card-sub { display: none; } [data-watch-mode="compact"] main#content { padding-top: 8px; } [data-watch-mode="compact"] .grid-cards { gap: 8px; } [data-watch-mode="compact"] .card, [data-watch-mode="compact"] .chart-card { box-shadow: none; } [data-watch-mode="compact"] .node-drawer { width: 100vw; } } @media (min-width: 1960px) { main#content { max-width: 2280px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }