/* ============================================================ NEWSROOM // MONITOR — Newspaper Noir Light + Dark themes. Persisted via [data-theme] on . ============================================================ */ :root { /* DARK (default) */ --bg: #0A0A0B; --surface1: #14141A; --surface2: #1C1C24; --surface3: #232330; --border: #2A2A35; --border-strong: #3D3D4A; --text1: #EAEAEA; --text2: #B8B8C0; --text3: #888893; --text4: #5A5A65; --masthead: #C8102E; --masthead-soft: rgba(200, 16, 46, 0.12); --gold: #C9A961; --gold-soft: rgba(201, 169, 97, 0.14); --ok: #4ADE80; --warn: #FBBF24; --err: #EF4444; --info: #38BDF8; --terminal: #00FF9C; --ok-soft: rgba(74, 222, 128, 0.14); --warn-soft: rgba(251, 191, 36, 0.14); --err-soft: rgba(239, 68, 68, 0.14); --info-soft: rgba(56, 189, 248, 0.14); --serif: "Playfair Display", "Lora", Georgia, serif; --sans: "Inter", "Geist", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "Geist Mono", Menlo, monospace; --scrollbar: #2A2A35; } [data-theme="light"] { --bg: #F2EEE4; /* newsprint cream */ --surface1: #FAF7EF; --surface2: #FFFFFF; --surface3: #F4F0E5; --border: #D9D2BF; --border-strong: #B8AE92; --text1: #14141A; --text2: #3D3D4A; --text3: #6B6B75; --text4: #9A9A9F; --masthead: #B00C25; --masthead-soft: rgba(176, 12, 37, 0.10); --gold: #8C7434; --gold-soft: rgba(140, 116, 52, 0.12); --ok: #166534; --warn: #B45309; --err: #B91C1C; --info: #0369A1; --terminal: #00FF9C; --ok-soft: rgba(22, 101, 52, 0.10); --warn-soft: rgba(180, 83, 9, 0.10); --err-soft: rgba(185, 28, 28, 0.10); --info-soft: rgba(3, 105, 161, 0.10); --scrollbar: #C9C2AE; } * { box-sizing: border-box; } html, body, #root { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text1); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { transition: background-color 180ms ease, color 180ms ease; } /* scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* base typography */ .serif { font-family: var(--serif); } .sans { font-family: var(--sans); } .mono { font-family: var(--mono); } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } /* utility classes */ .t1 { color: var(--text1); } .t2 { color: var(--text2); } .t3 { color: var(--text3); } .t4 { color: var(--text4); } .bg1 { background: var(--surface1); } .bg2 { background: var(--surface2); } /* layout chrome */ .app { display: grid; grid-template-rows: 48px 1fr; grid-template-columns: var(--sidebar-w, 224px) 1fr; grid-template-areas: "topbar topbar" "sidebar main"; height: 100vh; width: 100vw; } .app[data-sidebar="collapsed"] { --sidebar-w: 56px; } .topbar { grid-area: topbar; display: flex; align-items: stretch; background: var(--surface1); border-bottom: 1px solid var(--border); position: relative; z-index: 20; } .topbar .brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; width: var(--sidebar-w, 224px); border-right: 1px solid var(--border); font-family: var(--serif); color: var(--masthead); font-weight: 700; letter-spacing: 0.02em; font-size: 14px; white-space: nowrap; overflow: hidden; } .topbar .brand .slash { color: var(--text3); margin: 0 2px; font-weight: 400; } .topbar .brand small { font-family: var(--mono); color: var(--text3); font-size: 9px; letter-spacing: 0.18em; } .topbar .health { display: flex; align-items: center; gap: 22px; padding: 0 22px; flex: 1; border-right: 1px solid var(--border); } .topbar .health .item { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text2); } .topbar .health .item .lbl { color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; } .topbar .health .item b { color: var(--text1); font-weight: 600; } .topbar .actions { display: flex; align-items: center; gap: 6px; padding: 0 12px; } .topbar .actions button.iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; color: var(--text2); position: relative; } .topbar .actions button.iconbtn:hover { background: var(--surface2); color: var(--text1); border-color: var(--border); } .topbar .actions .cmdk { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text3); font-family: var(--mono); font-size: 11px; } .topbar .actions .cmdk:hover { color: var(--text1); border-color: var(--border-strong); } .topbar .actions .cmdk kbd { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text2); background: var(--surface1); } .notif-dot { position: absolute; top: 6px; right: 6px; background: var(--masthead); color: white; font-size: 9px; font-family: var(--mono); width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; } /* sidebar */ .sidebar { grid-area: sidebar; background: var(--surface1); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .sidebar .navlist { flex: 1; display: flex; flex-direction: column; padding: 12px 8px; gap: 1px; overflow-y: auto; } .sidebar .navitem { display: flex; align-items: center; gap: 12px; padding: 8px 10px; color: var(--text2); border-radius: 5px; border-left: 2px solid transparent; position: relative; font-size: 13px; cursor: pointer; white-space: nowrap; } .sidebar .navitem:hover { background: var(--surface2); color: var(--text1); } .sidebar .navitem.active { background: var(--surface2); color: var(--text1); border-left-color: var(--masthead); padding-left: 8px; } .sidebar .navitem .icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar .navitem .badge-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text3); } .sidebar .section-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text4); padding: 14px 12px 6px 12px; } .sidebar .last-run { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; } .sidebar .last-run .label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 9px; color: var(--text4); } .sidebar .last-run .row { display: flex; align-items: center; gap: 8px; font-family: var(--mono); color: var(--text1); } [data-sidebar="collapsed"] .sidebar .navitem .lbl, [data-sidebar="collapsed"] .sidebar .navitem .badge-count, [data-sidebar="collapsed"] .sidebar .last-run, [data-sidebar="collapsed"] .sidebar .section-label, [data-sidebar="collapsed"] .topbar .brand .full { display: none; } [data-sidebar="collapsed"] .sidebar .navitem { justify-content: center; padding: 8px; } /* main */ .main { grid-area: main; overflow-y: auto; overflow-x: hidden; background: var(--bg); position: relative; } .page { padding: 22px 26px 60px; max-width: 1700px; } .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .page-header h1 { font-family: var(--serif); font-weight: 700; font-size: 28px; margin: 0; letter-spacing: -0.01em; } .page-header .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); display: block; margin-bottom: 4px; } .page-header .meta { font-family: var(--mono); font-size: 11px; color: var(--text3); display: flex; align-items: center; gap: 14px; } /* card */ .card { background: var(--surface1); border: 1px solid var(--border); border-radius: 6px; } .card.bg2 { background: var(--surface2); } .card.flush { padding: 0; } .card.pad { padding: 20px; } .card.pad-sm { padding: 14px; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .card-head .title { font-family: var(--serif); font-size: 15px; font-weight: 600; } .card-head .kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text3); margin-right: 8px; } .card-head .meta { font-family: var(--mono); font-size: 10.5px; color: var(--text3); } .card-body { padding: 18px; } /* grid utility */ .grid { display: grid; gap: 16px; } .row { display: flex; gap: 16px; } /* metric / KPI */ .kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .kpi .kpi-label { font-family: var(--serif); font-style: italic; color: var(--text3); font-size: 13px; } .kpi .kpi-val { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -0.02em; } .kpi .kpi-val .unit { font-size: 18px; color: var(--text3); margin-left: 4px; font-weight: 500; } .kpi .kpi-delta { font-family: var(--mono); font-size: 11px; display: inline-flex; align-items: center; gap: 6px; } .kpi .kpi-delta.up { color: var(--ok); } .kpi .kpi-delta.down { color: var(--err); } .kpi .kpi-delta.flat { color: var(--text3); } .kpi .sparkline { margin-top: 6px; height: 28px; } /* badge / chip */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; font-family: var(--mono); font-size: 10.5px; border-radius: 3px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); letter-spacing: 0.02em; white-space: nowrap; } .chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .chip.err { background: var(--err-soft); color: var(--err); border-color: transparent; } .chip.info { background: var(--info-soft); color: var(--info); border-color: transparent; } .chip.gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; } .chip.masthead { background: var(--masthead-soft); color: var(--masthead); border-color: transparent; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* status dot */ .statusdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .statusdot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .statusdot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } .statusdot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); } .statusdot.idle { background: var(--text4); } .statusdot.run { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* table */ table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.dt th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface1); position: sticky; top: 0; } table.dt td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: middle; } table.dt tr:last-child td { border-bottom: none; } table.dt tr.row-link { cursor: pointer; transition: background-color 80ms ease; } table.dt tr.row-link:hover td { background: var(--surface2); color: var(--text1); } table.dt tr.row-link.active td { background: var(--surface2); } table.dt td .truncate { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.dt td.num { font-family: var(--mono); color: var(--text1); text-align: right; } table.dt td.headline { font-family: var(--serif); color: var(--text1); font-weight: 500; font-size: 13.5px; } /* funnel */ .funnel { display: flex; flex-direction: column; gap: 6px; } .funnel .stage { display: grid; grid-template-columns: 130px 1fr 90px 70px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); } .funnel .stage:last-child { border-bottom: none; } .funnel .stage .name { font-family: var(--serif); font-size: 14px; color: var(--text1); } .funnel .stage .bar-wrap { height: 22px; background: var(--surface2); border: 1px solid var(--border); position: relative; overflow: hidden; border-radius: 2px; } .funnel .stage .bar { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 100%); opacity: 0.55; } .funnel .stage .bar.s1 { background: #4f6dd9; } .funnel .stage .bar.s2 { background: #6a5acd; } .funnel .stage .bar.s3 { background: var(--gold); } .funnel .stage .bar.s4 { background: #5fbf8f; } .funnel .stage .bar.s5 { background: var(--ok); } .funnel .stage .bar-label { position: relative; z-index: 2; font-family: var(--mono); font-size: 11px; color: var(--text1); padding: 0 10px; display: flex; align-items: center; height: 100%; mix-blend-mode: difference; color: white; } .funnel .stage .num { font-family: var(--serif); font-size: 20px; font-weight: 600; text-align: right; color: var(--text1); } .funnel .stage .pct { font-family: var(--mono); font-size: 11px; color: var(--text3); text-align: right; } .funnel .stage .pct.drop { color: var(--err); } /* pipeline list */ .plist { display: flex; flex-direction: column; } .plist .pitem { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); } .plist .pitem:last-child { border-bottom: none; } .plist .pitem .name { font-family: var(--sans); font-size: 13px; color: var(--text1); } .plist .pitem .model { font-family: var(--mono); font-size: 10px; color: var(--text3); } .plist .pitem .meta { font-family: var(--mono); font-size: 11px; color: var(--text3); } /* anomaly banner */ .anomaly { border: 1px solid var(--err); background: var(--err-soft); color: var(--text1); padding: 14px 16px; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; } .anomaly .top { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--err); font-weight: 600; } .anomaly .head { font-family: var(--serif); font-size: 16px; color: var(--text1); line-height: 1.3; } .anomaly .body { font-size: 12px; color: var(--text2); } .anomaly .body b { color: var(--text1); } /* sparkline mini */ .spark { display: block; width: 100%; height: 100%; } /* gantt */ .gantt { display: grid; grid-template-columns: 130px 1fr; gap: 0; font-size: 11px; } .gantt .row { display: contents; } .gantt .lane-name { padding: 6px 12px 6px 0; border-bottom: 1px dashed var(--border); font-family: var(--mono); font-size: 10.5px; color: var(--text2); display: flex; align-items: center; white-space: nowrap; } .gantt .lane-track { position: relative; height: 32px; border-bottom: 1px dashed var(--border); background: linear-gradient(to right, transparent 0%, transparent calc(100% - 1px), var(--border) calc(100% - 1px)); } .gantt .lane-track:nth-child(even) { background-color: rgba(125,125,140,0.025); } .gantt .lane-bar { position: absolute; top: 6px; height: 20px; border-radius: 2px; background: var(--info); display: flex; align-items: center; padding: 0 6px; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.92); white-space: nowrap; overflow: hidden; } .gantt .lane-bar.collector { background: #5b8def; } .gantt .lane-bar.cooldown { background: #ad7eea; } .gantt .lane-bar.trends { background: #d685c3; } .gantt .lane-bar.editor { background: var(--gold); color: #14141A; } .gantt .lane-bar.extractor { background: #67b8d4; } .gantt .lane-bar.writer-a { background: #4ec9b0; } .gantt .lane-bar.writer-b { background: #2a9c87; } .gantt .lane-bar.selector { background: #c98c4e; } .gantt .lane-bar.fact { background: #5b8def; } .gantt .lane-bar.quality { background: #b87e2c; } .gantt .lane-bar.seo { background: #8a82a7; } .gantt .lane-bar.publisher { background: var(--ok); color: #0d2f1c; } .gantt .lane-bar.failed { background: var(--err); opacity: 0.7; } .gantt .axis { grid-column: 2; display: flex; justify-content: space-between; padding-top: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--text3); } /* heatmap */ .heatmap { display: grid; grid-template-columns: 180px repeat(15, 1fr); gap: 3px; } .heatmap .hm-row-label { font-family: var(--mono); font-size: 10px; color: var(--text2); padding: 6px 8px; text-align: right; white-space: nowrap; } .heatmap .hm-cell { aspect-ratio: 1; border-radius: 2px; background: var(--surface2); position: relative; cursor: default; } /* candidate score bar */ .scorebar { display: flex; height: 18px; width: 100%; border-radius: 2px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); } .scorebar .seg { height: 100%; } .scorebar .seg.source { background: #5b8def; } .scorebar .seg.freshness { background: var(--gold); } .scorebar .seg.relevance { background: #4ec9b0; } .scorebar .seg.trends { background: #d685c3; } .scorebar .seg.gemini { background: #c98c4e; } /* legend */ .legend { display: flex; gap: 14px; flex-wrap: wrap; } .legend .lg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--text3); } .legend .lg .sw { width: 10px; height: 10px; border-radius: 2px; } /* article (newspaper page) */ .newspaper { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 32px 38px 40px; color: var(--text1); font-family: var(--serif); } [data-theme="dark"] .newspaper { background: #16161D; } [data-theme="light"] .newspaper { background: #FFFBF2; border-color: #E0D7BD; } .newspaper .nameplate { text-align: center; border-top: 2px solid var(--text1); border-bottom: 2px solid var(--text1); padding: 10px 0 12px; margin-bottom: 18px; } .newspaper .nameplate .title { font-family: var(--serif); font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: 0.04em; color: var(--text1); } .newspaper .nameplate .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text3); display: flex; justify-content: center; gap: 12px; margin-top: 4px; } .newspaper .nameplate .sub span { display: inline-block; } .newspaper h1.headline { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.1; text-align: center; margin: 0 0 8px; letter-spacing: -0.01em; } .newspaper .deck { text-align: center; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--text2); margin-bottom: 12px; line-height: 1.4; } .newspaper .byline { text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); padding: 6px 0; margin-bottom: 20px; } .newspaper .body-cols { column-count: 2; column-gap: 28px; column-rule: 1px solid var(--border); font-size: 14.5px; line-height: 1.62; color: var(--text1); text-align: justify; hyphens: auto; } .newspaper .body-cols p:first-of-type::first-letter { font-size: 48px; font-weight: 700; float: left; line-height: 0.9; margin: 4px 6px 0 0; font-family: var(--serif); } .newspaper .body-cols h2 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 16px 0 6px; break-after: avoid; } .newspaper .body-cols p { margin: 0 0 12px; } .newspaper .article-mark { font-style: italic; background-image: linear-gradient(to bottom, transparent 0%, transparent 88%, var(--warn) 88%, var(--warn) 100%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 2px; } .newspaper .article-strike { text-decoration: line-through; text-decoration-color: var(--err); color: var(--text3); } /* visor / git-log */ .visor { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } .gitlog { background: var(--surface1); border: 1px solid var(--border); border-radius: 6px; padding: 16px 14px; position: sticky; top: 22px; } .gitlog .gl-title { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; } .gitlog .gl-node { display: grid; grid-template-columns: 26px 1fr; cursor: pointer; position: relative; } .gitlog .gl-node .gl-track { display: flex; flex-direction: column; align-items: center; } .gitlog .gl-node .gl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface3); border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-family: var(--mono); font-size: 9px; color: var(--text1); z-index: 2; } .gitlog .gl-node .gl-dot.rej { border-color: var(--err); background: var(--err-soft); color: var(--err); } .gitlog .gl-node .gl-dot.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); } .gitlog .gl-node.active .gl-dot { box-shadow: 0 0 0 3px var(--info-soft); } .gitlog .gl-node .gl-line { flex: 1; width: 0; border-left: 1px dashed var(--border-strong); min-height: 22px; margin-top: 2px; } .gitlog .gl-node:last-child .gl-line { display: none; } .gitlog .gl-node .gl-content { padding: 0 0 18px 6px; } .gitlog .gl-node .gl-att { font-family: var(--serif); font-size: 14px; color: var(--text1); font-weight: 600; } .gitlog .gl-node.active .gl-att { color: var(--masthead); } .gitlog .gl-node .gl-model { font-family: var(--mono); font-size: 10px; color: var(--text2); margin-top: 2px; } .gitlog .gl-node .gl-status { margin-top: 4px; } .gitlog .gl-node .gl-dur { font-family: var(--mono); font-size: 9.5px; color: var(--text3); margin-top: 3px; } /* tabs */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .tabs .tab { padding: 10px 16px; font-family: var(--sans); font-size: 13px; color: var(--text3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .tabs .tab:hover { color: var(--text1); } .tabs .tab.active { color: var(--text1); border-bottom-color: var(--masthead); } .tabs .tab.approved { color: var(--ok); } .tabs .tab.approved.active { border-bottom-color: var(--ok); } /* terminal */ .terminal-shell { background: #0A0A0B; color: var(--terminal); border: 1px solid #1f1f28; border-radius: 0; font-family: var(--mono); font-size: 12px; min-height: 70vh; display: flex; flex-direction: column; } [data-theme="light"] .terminal-shell { background: #0A0A0B; } .terminal-bar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid #1f1f28; font-size: 11px; color: #888893; background: #14141A; } .terminal-bar .connected { display: inline-flex; align-items: center; gap: 6px; color: var(--terminal); } .terminal-bar .connected .ledot { width: 7px; height: 7px; border-radius: 50%; background: var(--terminal); animation: pulse 1.2s ease-in-out infinite; } .terminal-bar input.search-in { background: #0A0A0B; border: 1px solid #1f1f28; color: #B8B8C0; padding: 4px 8px; border-radius: 3px; font-family: var(--mono); font-size: 11px; width: 200px; } .terminal-bar select { background: #0A0A0B; border: 1px solid #1f1f28; color: #B8B8C0; padding: 4px 8px; border-radius: 3px; font-family: var(--mono); font-size: 11px; } .terminal-lines { flex: 1; overflow-y: auto; padding: 12px 14px; scroll-behavior: smooth; } .terminal-lines .ln { display: grid; grid-template-columns: 110px 70px 1fr; gap: 10px; padding: 1.5px 0; white-space: pre-wrap; line-height: 1.45; } .terminal-lines .ln .ts { color: #5A5A65; } .terminal-lines .ln .lv { font-weight: 600; } .terminal-lines .ln.info .lv { color: var(--terminal); } .terminal-lines .ln.warn .lv { color: var(--warn); } .terminal-lines .ln.error .lv { color: var(--err); } .terminal-lines .ln.step .lv { color: var(--info); } .terminal-lines .ln .msg { color: #B8B8C0; } .terminal-lines .ln.error .msg { color: #ffdada; } /* arena hero */ .arena-hero { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 0; align-items: stretch; background: var(--surface1); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .arena-hero .side { padding: 24px 28px; } .arena-hero .side.leader { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-soft), transparent 70%); } .arena-hero .side .model { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 6px; } .arena-hero .side .winrate { font-family: var(--serif); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .arena-hero .side .stats { display: flex; gap: 22px; margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--text3); } .arena-hero .side .stats b { color: var(--text1); font-weight: 600; } .arena-hero .vs { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--text3); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } /* score breakdown donut (svg) */ .donut-wrap { display: flex; align-items: center; gap: 22px; } .donut-wrap svg { flex-shrink: 0; } .donut-wrap .legends { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .donut-wrap .legends .ll { display: grid; grid-template-columns: 12px 1fr 60px; align-items: center; gap: 10px; } .donut-wrap .legends .sw { width: 10px; height: 10px; border-radius: 2px; } .donut-wrap .legends .nm { color: var(--text2); } .donut-wrap .legends .vl { font-family: var(--mono); color: var(--text1); text-align: right; } /* command palette modal */ .cmd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; z-index: 100; backdrop-filter: blur(3px); } .cmd-modal { width: min(640px, 92vw); background: var(--surface1); border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .cmd-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .cmd-input-wrap input { background: transparent; border: none; outline: none; color: var(--text1); font-family: var(--sans); font-size: 15px; width: 100%; } .cmd-input-wrap input::placeholder { color: var(--text4); } .cmd-list { max-height: 380px; overflow-y: auto; } .cmd-group-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text4); padding: 12px 16px 6px; } .cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text2); } .cmd-item:hover, .cmd-item.cmd-sel { background: var(--surface2); color: var(--text1); } .cmd-item .icon { width: 16px; height: 16px; color: var(--text3); } .cmd-item.cmd-sel .icon { color: var(--masthead); } .cmd-item .sub { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text4); } /* sheet */ .sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; display: flex; justify-content: flex-end; } .sheet { width: min(900px, 100vw); height: 100vh; background: var(--bg); border-left: 1px solid var(--border); overflow-y: auto; animation: slidein 200ms ease-out; } @keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* toast */ .toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .toast { background: var(--surface1); border: 1px solid var(--border-strong); border-radius: 6px; padding: 12px 16px; font-size: 13px; display: flex; align-items: center; gap: 10px; min-width: 260px; animation: slidein 200ms ease-out; } .toast .icon { color: var(--info); } .toast.ok .icon { color: var(--ok); } .toast.warn .icon { color: var(--warn); } .toast.err .icon { color: var(--err); } /* tooltip */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--surface3); color: var(--text1); border: 1px solid var(--border-strong); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; padding: 4px 8px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 10; } [data-tip]:hover::after { opacity: 1; } /* helpers */ .rule { border-top: 1px solid var(--border); margin: 22px 0; } .thin-rule { border-top: 1px dashed var(--border); margin: 14px 0; } .italic-label { font-family: var(--serif); font-style: italic; color: var(--text3); font-size: 12.5px; } .bordered-left-gold { border-left: 3px solid var(--gold); padding-left: 14px; } .bordered-left-mast { border-left: 3px solid var(--masthead); padding-left: 14px; } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: var(--text3); text-align: center; gap: 8px; } .empty .ico { font-size: 24px; } .skeleton { background: linear-gradient(90deg, var(--surface2), var(--surface3), var(--surface2)); background-size: 200% 100%; animation: shim 1.4s ease-in-out infinite; border-radius: 3px; } @keyframes shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* svg gpu gauge */ .gauge { width: 30px; height: 14px; display: inline-block; position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; } .gauge > i { display: block; height: 100%; background: linear-gradient(to right, var(--ok), var(--warn) 70%, var(--err)); }