/* OSD Tools — Design System v1
* ============================================================
* Operator-grade visual system for the OSD tools site.
* Drop-in replacement for `osd-tools-shared.css`.
*
* Page integration:
*
*
* (default; theme JS may overwrite from localStorage)
*
* Themes: data-theme="light" (default) | "dark" (brand midnight) | "pitch" (OLED black)
*
* Type: IBM Plex Sans (body) + IBM Plex Mono (numerics, labels, code)
*
* Brand source: tools/favicon-* (deep navy plate, blue/green swoosh, gold star)
* ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");
/* ============================================================
* TOKENS — light (default)
* ============================================================ */
:root {
--bg: #f6f5f1;
--bg-1: #ffffff;
--bg-2: #f0eee8;
--bg-3: #e6e2d8;
--line: rgba(20, 25, 35, 0.09);
--line-strong: rgba(20, 25, 35, 0.16);
--line-faint: rgba(20, 25, 35, 0.05);
--ink: #14171c;
--ink-soft: #2c333d;
--ink-mute: #5b6573;
--ink-faint: #8b94a3;
--amber: #b45309;
--amber-soft: #d97706;
--amber-deep: #92400e;
--amber-bg: #fdf6e8;
--amber-glow: rgba(180, 83, 9, 0.10);
--green: #047857;
--green-bg: #ecfdf5;
--red: #b91c1c;
--red-bg: #fef2f2;
--blue: #1d4ed8;
--violet: #6d28d9;
/* Brand fills — sourced from the favicon. Vivid; intended for
fills/gauges/icons, not body text on white (would fail AA). */
--brand-navy: #06152f;
--brand-blue-fill: #3b82f6;
--brand-blue-soft: #60a5fa;
--brand-green-fill: #22c55e;
--brand-green-soft: #4ade80;
--brand-gold-fill: #fbbf24;
--grid: rgba(20, 25, 35, 0.025);
--shadow-sm: 0 1px 2px rgba(20, 25, 35, 0.04);
--shadow-md: 0 1px 3px rgba(20, 25, 35, 0.06), 0 6px 18px rgba(20, 25, 35, 0.04);
}
/* DARK — brand midnight (favicon plate color) */
[data-theme="dark"] {
--bg: #06152f;
--bg-1: #0c1d3b;
--bg-2: #122545;
--bg-3: #1a2f55;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.16);
--line-faint: rgba(255, 255, 255, 0.04);
--ink: #e8ebf1;
--ink-soft: #b9c0cb;
--ink-mute: #8b94a3;
--ink-faint: #5b6573;
--amber: #f5a524;
--amber-soft: #fbbf24;
--amber-deep: #b45309;
--amber-bg: rgba(245, 165, 36, 0.12);
--amber-glow: rgba(245, 165, 36, 0.20);
--green: #4ade80;
--green-bg: rgba(74, 222, 128, 0.10);
--red: #f87171;
--red-bg: rgba(248, 113, 113, 0.10);
--blue: #60a5fa;
--violet: #a78bfa;
--grid: rgba(255, 255, 255, 0.025);
--shadow-sm: 0 0 0 transparent;
--shadow-md: 0 0 0 transparent;
}
/* PITCH — pure black for OLED */
[data-theme="pitch"] {
--bg: #000000;
--bg-1: #0a0a0c;
--bg-2: #14141a;
--bg-3: #1f1f28;
--line: rgba(255, 255, 255, 0.07);
--line-strong: rgba(255, 255, 255, 0.14);
--line-faint: rgba(255, 255, 255, 0.035);
--ink: #ededee;
--ink-soft: #b0b0b6;
--ink-mute: #80808a;
--ink-faint: #50505a;
--amber: #f5a524;
--amber-soft: #fbbf24;
--amber-deep: #b45309;
--amber-bg: rgba(245, 165, 36, 0.10);
--amber-glow: rgba(245, 165, 36, 0.20);
--green: #4ade80;
--green-bg: rgba(74, 222, 128, 0.08);
--red: #f87171;
--red-bg: rgba(248, 113, 113, 0.08);
--blue: #60a5fa;
--violet: #a78bfa;
--grid: rgba(255, 255, 255, 0.025);
--shadow-sm: 0 0 0 transparent;
--shadow-md: 0 0 0 transparent;
}
/* Dark/pitch shared component overrides — places where
var-flipping isn't enough (need amber-filled marks on dark surfaces). */
:is([data-theme="dark"], [data-theme="pitch"]) .btn.primary {
background: var(--amber);
color: #0a0c10;
border-color: var(--amber);
}
:is([data-theme="dark"], [data-theme="pitch"]) .btn.primary:hover {
background: var(--amber-soft);
border-color: var(--amber-soft);
}
:is([data-theme="dark"], [data-theme="pitch"]) .btn.primary .kbd {
background: rgba(0, 0, 0, 0.18);
border-color: rgba(0, 0, 0, 0.28);
color: rgba(0, 0, 0, 0.55);
}
:is([data-theme="dark"], [data-theme="pitch"]) .copy-btn {
background: var(--amber);
color: #0a0c10;
border-color: var(--amber);
}
:is([data-theme="dark"], [data-theme="pitch"]) .copy-btn:hover {
background: var(--amber-soft);
}
:is([data-theme="dark"], [data-theme="pitch"]) .account-chip .avatar {
background: var(--amber);
color: #0a0c10;
}
:is([data-theme="dark"], [data-theme="pitch"]) .client-steps li::before {
background: var(--amber);
border-color: var(--amber);
color: #0a0c10;
}
:is([data-theme="dark"], [data-theme="pitch"]) .snippet {
background: var(--bg-2);
border-left-color: var(--amber);
}
:is([data-theme="dark"], [data-theme="pitch"]) .nav-link.active {
background: var(--amber-bg);
}
:is([data-theme="dark"], [data-theme="pitch"]) .flow-step::after {
background: var(--bg-1);
}
:is([data-theme="dark"], [data-theme="pitch"]) .meter {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
:is([data-theme="dark"], [data-theme="pitch"]) .meter-thumb {
background: #f3f4f6;
border-color: var(--bg-1);
}
:is([data-theme="dark"], [data-theme="pitch"]) .seg button.active {
background: var(--amber);
color: #0a0c10;
}
:is([data-theme="dark"], [data-theme="pitch"]) .theme-picker button[aria-checked="true"] {
background: var(--brand-blue-fill);
color: #06152f;
}
/* ============================================================
* RESET + BASE
* ============================================================ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--bg);
background-image: radial-gradient(var(--grid) 1px, transparent 1px);
background-size: 18px 18px;
background-position: 0 0;
min-height: 100vh;
font-feature-settings: "ss01", "cv11";
font-size: 14.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.mono, code {
font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-feature-settings: "zero" 1;
font-variant-numeric: tabular-nums;
}
.num {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* ============================================================
* TOPBAR
* ============================================================ */
.topbar {
display: grid;
grid-template-columns: 240px 1fr auto;
align-items: center;
height: 56px;
padding: 0 18px 0 0;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
border-right: 1px solid var(--line);
height: 100%;
text-decoration: none;
color: inherit;
}
.brand-mark {
width: 28px; height: 28px;
display: block;
overflow: hidden;
background: var(--brand-navy);
border: 1px solid var(--line);
border-radius: 6px;
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-name {
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
}
.brand-name span { color: var(--ink-mute); margin-left: 6px; font-weight: 500; }
.cmdbar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
margin: 0 18px;
height: 34px;
background: var(--bg);
border: 1px solid var(--line);
transition: border-color 120ms, background 120ms;
}
.cmdbar:focus-within {
border-color: var(--amber);
background: var(--bg-1);
box-shadow: 0 0 0 3px var(--amber-glow);
}
.cmdbar .prompt {
font-family: "IBM Plex Mono", monospace;
color: var(--amber);
font-size: 13px;
user-select: none;
font-weight: 600;
}
.cmdbar input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--ink);
font-family: "IBM Plex Mono", monospace;
font-size: 13px;
}
.cmdbar input::placeholder { color: var(--ink-faint); }
.cmdbar .kbd {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--ink-mute);
border: 1px solid var(--line-strong);
background: var(--bg-1);
padding: 2px 6px;
line-height: 1;
}
.topbar-right {
display: flex;
align-items: center;
gap: 16px;
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
color: var(--ink-mute);
}
.topbar-right .stat { display: flex; align-items: baseline; gap: 6px; }
.topbar-right .stat label {
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 10.5px;
}
.topbar-right .stat b { color: var(--ink-soft); font-weight: 500; }
.topbar-right .conn { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.topbar-right .conn .led {
width: 7px; height: 7px; background: var(--green); border-radius: 50%;
box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.18);
}
.account-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 6px;
border: 1px solid var(--line-strong);
background: var(--bg-1);
color: var(--ink);
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
cursor: pointer;
transition: border-color 120ms, background 120ms;
}
.account-chip:hover { border-color: var(--ink-mute); background: var(--bg); }
.account-chip .avatar {
width: 20px; height: 20px;
background: var(--ink);
color: var(--amber-soft);
display: grid; place-items: center;
font-weight: 700; font-size: 11px;
}
/* THEME PICKER — 3-way segmented (light / dark / pitch) */
.theme-picker {
display: inline-flex;
border: 1px solid var(--line-strong);
background: var(--bg-1);
}
.theme-picker button {
appearance: none;
border: 0;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
color: var(--ink-mute);
cursor: pointer;
padding: 0;
transition: color 120ms, background 120ms;
}
.theme-picker button + button { border-left: 1px solid var(--line-strong); }
.theme-picker button:hover { color: var(--ink); background: var(--bg); }
.theme-picker button:focus-visible { outline: 2px solid var(--brand-blue-fill); outline-offset: -2px; }
.theme-picker button[aria-checked="true"] { background: var(--ink); color: var(--bg-1); }
.theme-picker svg { width: 14px; height: 14px; display: block; }
/* ============================================================
* APP SHELL — nav + main
* ============================================================ */
.shell {
display: grid;
grid-template-columns: 240px 1fr;
min-height: calc(100vh - 56px);
}
.nav {
border-right: 1px solid var(--line);
background: var(--bg-1);
padding: 18px 0 24px;
position: sticky;
top: 56px;
align-self: start;
height: calc(100vh - 56px);
overflow-y: auto;
}
.nav-section { padding: 0 8px 18px; }
.nav-section + .nav-section { border-top: 1px solid var(--line-faint); padding-top: 18px; }
.nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px 10px;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute);
font-weight: 600;
}
.nav-header .count {
color: var(--ink-faint);
background: var(--bg);
border: 1px solid var(--line);
padding: 1px 6px;
font-size: 10px;
font-weight: 500;
}
.nav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 12px;
color: var(--ink-soft);
text-decoration: none;
font-size: 13.5px;
border-left: 2px solid transparent;
transition: background 120ms, color 120ms, border-color 120ms;
}
.nav-link:hover { background: var(--bg); color: var(--ink); }
.nav-link.active {
background: var(--amber-bg);
border-left-color: var(--amber);
color: var(--ink);
font-weight: 500;
}
.nav-link .meta {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--ink-faint);
}
.nav-link.active .meta { color: var(--amber); }
.nav-search { padding: 0 12px 14px; }
.nav-search input {
width: 100%;
background: var(--bg);
border: 1px solid var(--line);
color: var(--ink);
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
padding: 7px 10px;
outline: 0;
}
.nav-search input::placeholder { color: var(--ink-faint); }
.nav-search input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
main { padding: 22px 28px 60px; min-width: 0; }
/* Layout helper — single-column grid wrapper with auto-centered max width.
Apply to on dashboard pages that don't use the .shell
nav-rail layout. The base padding still applies. */
.layout {
display: grid;
gap: 18px;
min-width: 0;
max-width: 1280px;
margin: 0 auto;
}
/* ============================================================
* PAGE HEAD + CRUMBS + TITLE
* ============================================================ */
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 18px;
}
.page-title-group { min-width: 0; }
.crumbs {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-faint);
margin-bottom: 8px;
}
.crumbs span { color: var(--ink-mute); }
.crumbs .sep { color: var(--ink-faint); margin: 0 6px; }
h1.page-title {
margin: 0;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.15;
}
h1.page-title .subdued { color: var(--ink-mute); font-weight: 300; }
.page-head-actions { display: flex; align-items: center; gap: 8px; }
/* ============================================================
* BUTTONS
* ============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
appearance: none;
border: 1px solid var(--line-strong);
background: var(--bg-1);
color: var(--ink);
font: 500 13px/1 "IBM Plex Sans", sans-serif;
padding: 9px 14px;
cursor: pointer;
transition: border-color 120ms, background 120ms, color 120ms, transform 80ms;
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.btn:hover { border-color: var(--ink-mute); background: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand-blue-fill); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn .kbd {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--ink-mute);
border: 1px solid var(--line-strong);
background: var(--bg);
padding: 1px 5px;
line-height: 1;
}
.btn.primary {
background: var(--ink);
color: #f3f4f6;
border-color: var(--ink);
font-weight: 600;
}
.btn.primary:hover { background: #000; }
.btn.primary .kbd {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.20);
color: #d6dae0;
}
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg); }
/* ============================================================
* FORMS
* ============================================================ */
label {
display: block;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
margin-bottom: 6px;
font-weight: 600;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line-strong);
color: var(--ink);
font-family: "IBM Plex Sans", sans-serif;
font-size: 13.5px;
padding: 8px 10px;
outline: 0;
appearance: none;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--amber);
box-shadow: 0 0 0 3px var(--amber-glow);
}
textarea {
min-height: 92px;
resize: vertical;
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
line-height: 1.5;
}
/* ============================================================
* STATUS STRIP — top KPI row
* ============================================================ */
.strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
border: 1px solid var(--line);
background: var(--bg-1);
margin-bottom: 28px;
box-shadow: var(--shadow-sm);
}
.strip > div { padding: 16px 18px; border-right: 1px solid var(--line); }
.strip > div:last-child { border-right: 0; }
.strip label {
display: block;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
margin-bottom: 10px;
font-weight: 600;
}
.strip .v {
font-family: "IBM Plex Mono", monospace;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
}
.strip .v.up { color: var(--green); }
.strip .v.down { color: var(--red); }
.strip .delta {
margin-top: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
color: var(--ink-mute);
}
.strip .delta.up { color: var(--green); }
.strip .delta.down { color: var(--red); }
.strip .live-led {
display: inline-block;
width: 7px; height: 7px;
background: var(--amber);
border-radius: 50%;
margin-right: 6px;
box-shadow: 0 0 0 2px var(--amber-glow);
animation: osd-pulse 1.6s ease-in-out infinite;
vertical-align: middle;
}
@keyframes osd-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ============================================================
* SIGNAL WIDGETS — colorful percentile gauges
* ============================================================ */
.signals {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.widget {
border: 1px solid var(--line);
background: var(--bg-1);
padding: 18px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 14px;
}
.widget-head { display: flex; align-items: center; justify-content: space-between; }
.widget-head h3 {
margin: 0;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink);
font-weight: 600;
}
/* Segmented control */
.seg {
display: inline-flex;
border: 1px solid var(--line-strong);
background: var(--bg);
}
.seg button {
appearance: none;
border: 0;
background: transparent;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
color: var(--ink-mute);
cursor: pointer;
transition: color 120ms, background 120ms;
font-weight: 600;
}
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--ink); color: var(--bg-1); }
/* Gradient meter — red → brand-gold → brand-green */
.meter {
position: relative;
height: 8px;
border-radius: 999px;
background: linear-gradient(90deg, #ef4444 0%, var(--brand-gold-fill) 50%, var(--brand-green-fill) 100%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.meter-thumb {
position: absolute;
top: 50%;
width: 14px; height: 14px;
background: var(--ink);
border: 2px solid var(--bg-1);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
animation: osd-thumb-slide 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes osd-thumb-slide {
from { left: 0% !important; opacity: 0; }
to { opacity: 1; }
}
.meter-scale {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.02em;
}
.widget-stat {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 12px;
}
.widget-stat .stat-num {
font-family: "IBM Plex Mono", monospace;
font-size: 36px;
font-weight: 600;
letter-spacing: -0.035em;
color: var(--ink);
line-height: 1;
}
.widget-stat .stat-num sup {
font-size: 15px;
vertical-align: super;
font-weight: 500;
color: var(--ink-mute);
margin-left: 2px;
letter-spacing: 0;
}
.widget-stat .stat-label { font-size: 13px; color: var(--green); font-weight: 600; }
.widget-stat .stat-label.warn { color: var(--amber); }
.widget-stat .stat-label.bad { color: var(--red); }
.widget-stat .stat-meta {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--ink-mute);
}
.sub-meters {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
border-top: 1px solid var(--line);
padding-top: 14px;
}
.sub-meter { display: flex; flex-direction: column; gap: 7px; }
.sub-meter-head {
display: flex; justify-content: space-between; align-items: baseline;
font-family: "IBM Plex Mono", monospace;
}
.sub-meter-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
font-weight: 600;
}
.sub-meter-num { font-size: 14px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.sub-meter-num sup { font-size: 9px; color: var(--ink-mute); margin-left: 1px; font-weight: 500; }
.sub-meter .meter { height: 5px; }
.sub-meter .meter-thumb { width: 10px; height: 10px; border-width: 1.5px; }
/* ============================================================
* SECTIONS + PANELS + TOOL ROWS
* ============================================================ */
.section { margin-bottom: 32px; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 14px;
}
.section-head h2 {
margin: 0;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink);
font-weight: 600;
}
.section-head h2 .count { color: var(--ink-faint); margin-left: 8px; font-weight: 400; }
.section-head .meta {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--ink-mute);
}
.panel {
background: var(--bg-1);
border: 1px solid var(--line);
padding: 16px;
box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 16px; }
.tools {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.tool {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
text-decoration: none;
color: var(--ink);
transition: background 120ms;
cursor: pointer;
position: relative;
}
.tool:hover { background: var(--bg); }
.tool:hover .tool-arrow { color: var(--amber); transform: translateX(2px); }
.tool-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 4px; }
.tool-desc { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
.tool-meta {
text-align: right;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.tool-meta .badge {
display: inline-block;
padding: 2px 7px;
border: 1px solid var(--line-strong);
color: var(--ink-mute);
margin-bottom: 4px;
background: var(--bg);
}
.tool-meta .badge.live { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.tool-arrow {
position: absolute;
bottom: 14px;
right: 16px;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
color: var(--ink-faint);
transition: color 150ms, transform 150ms;
}
.tools.studio { grid-template-columns: repeat(3, 1fr); }
.tools.studio .tool { padding: 12px 14px; }
.tools.studio .tool-name { font-size: 13.5px; margin-bottom: 3px; }
.tools.studio .tool-desc { font-size: 12px; }
/* ============================================================
* ACTIVITY TICKER
* ============================================================ */
.ticker {
border: 1px solid var(--line);
background: var(--bg-1);
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
box-shadow: var(--shadow-sm);
}
.ticker .row {
display: grid;
grid-template-columns: 64px 80px 1fr 90px 80px;
gap: 14px;
padding: 9px 16px;
border-bottom: 1px solid var(--line-faint);
align-items: center;
}
.ticker .row:last-child { border-bottom: 0; }
.ticker .row:hover { background: var(--bg); }
.ticker .t { color: var(--ink-mute); }
.ticker .tag {
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 10.5px;
font-weight: 600;
}
.ticker .desc { color: var(--ink); }
.ticker .ev { text-align: right; }
.ticker .ev.pos { color: var(--green); font-weight: 600; }
.ticker .ev.neg { color: var(--red); font-weight: 600; }
.ticker .book { color: var(--ink-mute); text-align: right; font-size: 11.5px; }
/* ============================================================
* RIGHT-RAIL CARDS
* ============================================================ */
.rail-card {
border: 1px solid var(--line);
background: var(--bg-1);
padding: 16px;
box-shadow: var(--shadow-sm);
}
.rail-card + .rail-card { margin-top: 18px; }
.rail-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.rail-head h3 {
margin: 0;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink);
font-weight: 600;
}
.rail-head .meta { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-mute); }
.field { margin-bottom: 12px; }
.field label { margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line-strong);
padding: 5px 9px;
cursor: pointer;
transition: border-color 120ms, color 120ms, background 120ms;
}
.chip:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-bg); }
.chip .h { color: var(--ink-faint); margin-right: 4px; }
.kvs {
display: grid;
grid-template-columns: 1fr auto;
gap: 7px 16px;
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
}
.kvs .k { color: var(--ink-mute); }
.kvs .v { color: var(--ink); text-align: right; font-weight: 500; }
.kvs .v.up { color: var(--green); }
.kvs .v.down { color: var(--red); }
/* ============================================================
* MCP SETUP — hero, URL display, per-client cards, flow strip
* ============================================================ */
.mcp-hero {
border: 1px solid var(--line);
background: var(--bg-1);
padding: 32px;
margin-bottom: 28px;
box-shadow: var(--shadow-sm);
}
.mcp-hero .label {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute);
margin-bottom: 12px;
font-weight: 600;
}
.mcp-url-row {
display: flex;
align-items: stretch;
gap: 0;
margin-bottom: 16px;
}
.mcp-url {
flex: 1;
font-family: "IBM Plex Mono", monospace;
font-size: 19px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line-strong);
padding: 18px 20px;
}
.mcp-url .scheme { color: var(--ink-mute); }
.mcp-url .host { color: var(--amber); font-weight: 600; }
.mcp-url .path { color: var(--ink); }
.mcp-meta {
display: flex;
gap: 26px;
flex-wrap: wrap;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
color: var(--ink-mute);
}
.mcp-meta .item { display: flex; align-items: center; gap: 8px; }
.mcp-meta .item .led {
width: 7px; height: 7px; background: var(--green); border-radius: 50%;
box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.18);
}
.mcp-meta b { color: var(--ink); font-weight: 600; }
.clients {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 32px;
}
.client {
border: 1px solid var(--line);
background: var(--bg-1);
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: var(--shadow-sm);
}
.client-head { display: flex; align-items: center; justify-content: space-between; }
.client-name {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.client-tag {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
border: 1px solid var(--line-strong);
background: var(--bg);
padding: 3px 7px;
font-weight: 600;
}
.flow {
border: 1px solid var(--line);
background: var(--bg-1);
padding: 28px;
box-shadow: var(--shadow-sm);
}
.flow-head { margin-bottom: 22px; }
.flow-head h3 {
margin: 0 0 6px;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink);
font-weight: 600;
}
.flow-head p {
margin: 0;
color: var(--ink-mute);
font-size: 13.5px;
}
.flow-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.flow-step {
padding: 18px;
border-left: 1px solid var(--line);
position: relative;
}
.flow-step:first-child { border-left: 0; padding-left: 0; }
.flow-step .n {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--amber);
letter-spacing: 0.14em;
margin-bottom: 10px;
display: block;
font-weight: 700;
}
.flow-step .t {
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.flow-step .d {
font-size: 12.5px;
color: var(--ink-mute);
line-height: 1.5;
}
.copy-btn {
appearance: none;
border: 1px solid var(--ink);
background: var(--ink);
color: #f3f4f6;
font-family: "IBM Plex Mono", monospace;
font-size: 13.5px;
font-weight: 600;
padding: 0 26px;
cursor: pointer;
transition: background 120ms, border-color 120ms;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.copy-btn:hover { background: #000; }
.copy-btn.copied { background: var(--green); border-color: var(--green); }
.client-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
display: flex;
flex-direction: column;
gap: 10px;
}
.client-steps li {
counter-increment: step;
padding-left: 28px;
position: relative;
font-size: 13.5px;
color: var(--ink);
line-height: 1.5;
}
.client-steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 1px;
width: 20px; height: 20px;
background: var(--ink);
border: 1px solid var(--ink);
color: var(--amber-soft);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
font-weight: 700;
display: grid;
place-items: center;
}
.snippet {
background: #fbfaf6;
border: 1px solid var(--line);
border-left: 3px solid var(--amber);
padding: 12px 14px;
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
color: var(--ink);
overflow-x: auto;
white-space: pre;
line-height: 1.55;
margin: 0;
}
.snippet .k { color: var(--violet); }
.snippet .s { color: var(--green); }
.snippet .c { color: var(--ink-faint); font-style: italic; }
.flow-step::after {
content: "→";
position: absolute;
right: -7px; top: 18px;
font-family: "IBM Plex Mono", monospace;
font-size: 13px;
color: var(--amber);
background: var(--bg-1);
padding: 0 2px;
}
.flow-step:last-child::after { display: none; }
/* ============================================================
* TABLES
* ============================================================ */
.table-wrap {
margin-top: 12px;
overflow-x: auto;
border: 1px solid var(--line);
background: var(--bg-1);
box-shadow: var(--shadow-sm);
}
table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
th, td {
padding: 9px 10px;
border-bottom: 1px solid var(--line-faint);
text-align: left;
vertical-align: top;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.4;
font-size: 13px;
}
th {
position: sticky;
top: 0;
z-index: 1;
background: var(--bg-2);
color: var(--ink-mute);
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
white-space: normal;
}
tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }
:is([data-theme="dark"], [data-theme="pitch"]) tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
/* ============================================================
* FORM HELPERS — used across login + account flows
* ============================================================ */
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 12px;
}
.secret-row {
display: flex;
align-items: center;
gap: 8px;
}
.secret-row input { flex: 1; }
/* ============================================================
* STATUS PILLS / NOTES
* ============================================================ */
.status {
display: block;
margin-top: 8px;
padding: 8px 12px;
border: 1px solid var(--line-strong);
border-left: 3px solid var(--ink-faint);
font-size: 13px;
color: var(--ink-soft);
background: var(--bg);
}
.status.err {
color: var(--red);
background: var(--red-bg);
border-color: var(--red);
border-left-color: var(--red);
}
.status.ok {
color: var(--green);
background: var(--green-bg);
border-color: var(--green);
border-left-color: var(--green);
}
.help { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-mute); }
/* ============================================================
* SCROLLBARS + UTILITIES
* ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 25, 35, 0.16); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 25, 35, 0.28); }
:is([data-theme="dark"], [data-theme="pitch"]) ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }
:is([data-theme="dark"], [data-theme="pitch"]) ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.scrollshadow { animation: osd-fadeup 480ms ease both; }
@keyframes osd-fadeup {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* RESPONSIVE
* ============================================================ */
@media (max-width: 1100px) {
.signals { grid-template-columns: 1fr; }
.clients { grid-template-columns: 1fr; }
.flow-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.shell { grid-template-columns: 1fr; }
.nav { position: static; height: auto; }
.strip { grid-template-columns: repeat(2, 1fr); }
.strip > div:nth-child(2n) { border-right: 0; }
.tools, .tools.studio { grid-template-columns: 1fr; }
.topbar { grid-template-columns: 1fr auto; }
.cmdbar { display: none; }
.brand { border-right: 0; }
}
/* ============================================================
* PRINT
* ============================================================ */
@media print {
body { background: #fff !important; background-image: none !important; }
.nav, .topbar, .theme-picker, .cmdbar { display: none !important; }
.panel, .strip, .ticker, .widget, .rail-card, .table-wrap { box-shadow: none !important; }
table { width: 100% !important; }
th, td { padding: 6px 6px !important; font-size: 11px !important; }
th { position: static !important; }
thead { display: table-header-group; }
tr, td, th { break-inside: avoid; page-break-inside: avoid; }
}