:root { color-scheme: dark; /* Neutral near-black base (not navy) + a restrained accent — reads as a precision ops console rather than a generic dark-blue AI dashboard. */ --bg:#0a0a0c; --glow:oklch(0.24 0.03 45 / 0.45); --panel:oklch(0.185 0.004 60); --panel2:oklch(0.155 0.004 60); --panel3:oklch(0.145 0.004 60); --head:oklch(0.21 0.004 60); --border:oklch(1 0 0 / 0.055); --border2:oklch(1 0 0 / 0.09); --hover:oklch(1 0 0 / 0.045); --field:oklch(0 0 0 / 0.28); --track:oklch(1 0 0 / 0.09); --text:oklch(0.96 0.005 60); --t2:oklch(0.81 0.005 60); --dim:oklch(0.66 0.005 60); --faint:oklch(0.53 0.005 60); --accent:oklch(0.8 0.13 45); --accent-border:oklch(0.72 0.13 45 / 0.4); --accent-bg:oklch(0.72 0.13 45 / 0.14); --accent-ink:#0a0a0c; --success:oklch(0.83 0.13 160); --success-border:oklch(0.78 0.12 160 / 0.3); --success-bg:oklch(0.78 0.12 160 / 0.1); --danger:oklch(0.7 0.17 28); --warning:oklch(0.83 0.14 85); --r1:7px; --r2:8px; --r3:12px; --shadow:0 10px 30px rgba(0,0,0,.55); } /* --- Theming --------------------------------------------------------------- Every color is a token on :root, so a theme is just a token override — and a white-label deploy is the same move (swap --accent + the neutrals + the brand). data-theme on forces a theme; with none set, the OS preference wins ("system"). A tiny inline script in index.html applies the saved choice before first paint to avoid a flash. */ :root[data-theme="dark"] { color-scheme: dark; } /* Light theme tokens (forced, and as the system default when the OS is light). */ :root[data-theme="light"], :root[data-theme="system"] { } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg:#ece9e3; --glow:oklch(0.85 0.05 45 / 0.32); --panel:#ffffff; --panel2:#f7f5f1; --panel3:#efece6; --head:#ffffff; --border:oklch(0.2 0.01 60 / 0.14); --border2:oklch(0.2 0.01 60 / 0.22); --hover:oklch(0.2 0.01 60 / 0.05); --field:#ffffff; --track:oklch(0.2 0.01 60 / 0.14); --text:oklch(0.21 0.01 60); --t2:oklch(0.36 0.01 60); --dim:oklch(0.46 0.01 60); --faint:oklch(0.55 0.01 60); --accent:oklch(0.53 0.15 42); --accent-border:oklch(0.6 0.14 42 / 0.4); --accent-bg:oklch(0.72 0.13 45 / 0.13); --accent-ink:#ffffff; --success:oklch(0.5 0.12 160); --success-border:oklch(0.55 0.11 160 / 0.35); --success-bg:oklch(0.7 0.12 160 / 0.14); --danger:oklch(0.55 0.19 28); --warning:oklch(0.62 0.13 75); --shadow:0 6px 20px rgba(30,28,24,.13), 0 1px 2px rgba(30,28,24,.07); } } :root[data-theme="light"] { color-scheme: light; --bg:#ece9e3; --glow:oklch(0.85 0.05 45 / 0.32); --panel:#ffffff; --panel2:#f7f5f1; --panel3:#efece6; --head:#ffffff; --border:oklch(0.2 0.01 60 / 0.14); --border2:oklch(0.2 0.01 60 / 0.22); --hover:oklch(0.2 0.01 60 / 0.05); --field:#ffffff; --track:oklch(0.2 0.01 60 / 0.14); --text:oklch(0.21 0.01 60); --t2:oklch(0.36 0.01 60); --dim:oklch(0.46 0.01 60); --faint:oklch(0.55 0.01 60); --accent:oklch(0.53 0.15 42); --accent-border:oklch(0.6 0.14 42 / 0.4); --accent-bg:oklch(0.72 0.13 45 / 0.13); --accent-ink:#ffffff; --success:oklch(0.5 0.12 160); --success-border:oklch(0.55 0.11 160 / 0.35); --success-bg:oklch(0.7 0.12 160 / 0.14); --danger:oklch(0.55 0.19 28); --warning:oklch(0.62 0.13 75); --shadow:0 6px 20px rgba(30,28,24,.13), 0 1px 2px rgba(30,28,24,.07); } * { box-sizing:border-box; } body { margin:0; font:13.5px/1.45 Geist,ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--text); display:flex; flex-direction:column; height:100vh; background:radial-gradient(110% 70% at 8% -12%, var(--glow), transparent 62%), var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h2 { letter-spacing:-.012em; } /* Geist Mono for micro-labels/data — the design's signature. */ .mono, .kpi .l, .h, .subh, th, .tag, .metaline, .stat .n, .gstat .gn, .toksub, .plan-tag { font-family:"Geist Mono",ui-monospace,Menlo,monospace; } /* Thin, unobtrusive scrollbars — a small polish that makes dense panels feel considered rather than default-chrome. */ * { scrollbar-width:thin; scrollbar-color:var(--border2) transparent; } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; border:2.5px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover { background:var(--faint); background-clip:padding-box; } /* Preact mounts the whole app here; it is the flex column the panes fill. */ #app { flex:1; min-height:0; display:flex; flex-direction:column; } header { display:flex; align-items:center; background:var(--head); border-bottom:1px solid var(--border2); overflow-x:auto; } /* Brand + KPI cells never shrink below their content — otherwise, when the header is tight, labels wrap ("IN-\nFLIGHT") and adjacent values collide ("$0.000$0.008"). If the row genuinely overflows, the header scrolls. */ /* Acronym on the left, the expansion stacked in two lines to its right. */ .brand { flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:11px; padding:11px 20px 11px 22px; } .brand .logo { flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:1px solid var(--accent-border); background:var(--accent-bg); display:grid; place-items:center; } .brand .logo svg { display:block; } .brand .nm { font-weight:650; font-size:17px; letter-spacing:-.025em; line-height:1; } .brand .tag2 { font-family:"Geist Mono",ui-monospace,monospace; font-size:9px; color:var(--faint); text-transform:uppercase; letter-spacing:.1em; line-height:1.15; white-space:nowrap; } .kpi { flex:0 0 auto; padding:1px 0 1px 14px; margin-left:14px; border-left:1px solid var(--border); display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:88px; } .kpi .l { font-size:9.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; } .kpi .v { font-size:19px; font-weight:600; letter-spacing:-.035em; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1; } .grow { flex:1; } /* Button primitive — one definition, token-driven, used everywhere. */ .btn { background:var(--accent); color:var(--accent-ink); border:0; border-radius:var(--r2); padding:7px 14px; font:inherit; font-weight:600; cursor:pointer; transition:filter .14s ease, border-color .14s ease, background .14s ease; } .btn:hover { filter:brightness(1.08); } .btn:active { filter:brightness(.96); } .btn.alt { background:var(--panel2); color:var(--text); border:1px solid var(--border2); } .btn.alt:hover { filter:none; border-color:var(--faint); } input.keyinput { background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:6px; padding:5px 8px; font:inherit; width:120px; } /* Mask the key inputs as text (not type=password) so password managers don't detect a login field and paste their icon over them. */ input.keyinput { -webkit-text-security:disc; text-security:disc; } header .btn { background:var(--accent); color:var(--accent-ink); border:0; border-radius:var(--r2); padding:7px 14px; font:inherit; font-weight:600; cursor:pointer; margin-right:12px; } header .btn:hover { filter:brightness(1.08); } header .btn.alt { background:var(--panel2); color:var(--text); border:1px solid var(--border2); } header .btn.alt:hover { border-color:var(--faint); filter:none; } /* Loopback status pill (design) */ .looppill { display:flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; border:1px solid var(--border2); background:var(--panel2); font-family:"Geist Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); white-space:nowrap; margin-right:4px; } .looppill .dot { width:6px; height:6px; border-radius:999px; background:var(--accent); } .idrole { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--dim); background:color-mix(in srgb, var(--dim) 16%, transparent); padding:2px 6px; border-radius:5px; } .idrole.adm { color:var(--success); background:color-mix(in srgb, var(--success) 18%, transparent); } /* --- user menu (consolidated header account/settings) --- */ .usermenu { position:relative; display:flex; align-items:center; padding:0 14px; flex:0 0 auto; } .umtrigger { display:flex; align-items:center; gap:8px; margin-right:0; padding:6px 12px; line-height:1.2; } .umtrigger.on { border-color:var(--accent); } .umava { display:inline-grid; place-items:center; width:21px; height:21px; border-radius:6px; background:linear-gradient(155deg, var(--accent), oklch(0.45 0.06 300)); color:#fff; font-size:11px; font-weight:700; } .umlabel { font-size:13px; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .umcaret { color:var(--faint); font-size:10px; } .ummenu { position:fixed; width:288px; background:var(--panel); border:1px solid var(--border2); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.5); padding:8px; z-index:60; } .umsec { padding:8px 6px; border-top:1px solid var(--border); } .umsec:first-child { border-top:0; } .umh { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); margin:2px 4px 8px; } .umfield { display:flex; align-items:center; gap:8px; margin:6px 0; } .umfield > span { font-size:12px; color:var(--dim); width:64px; flex:0 0 auto; } .umfield .keyinput { flex:1; min-width:0; } .umitem { display:block; width:100%; text-align:left; background:none; border:0; border-radius:7px; color:var(--text); font:inherit; font-size:13px; padding:8px 10px; cursor:pointer; text-decoration:none; } .umitem:hover { background:var(--panel2); } .umitem.danger:hover { color:var(--danger); } .umid { padding:10px 8px 12px; } .umid-main { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .umid-mail { font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .umid-sub { font-size:11.5px; color:var(--dim); line-height:1.45; margin:2px 2px 10px; } .umsignin { display:block; width:100%; text-align:center; text-decoration:none; } /* Passwordless email magic-link sign-in form (SSO-anonymous state). */ .emailsignin { display:flex; flex-direction:column; gap:7px; margin:2px 2px 4px; } .emailinput { width:100%; box-sizing:border-box; background:var(--panel2); border:1px solid var(--border2); border-radius:var(--r2); color:var(--text); font:inherit; font-size:13px; padding:8px 10px; } .emailinput:disabled { opacity:.6; } .emailerr { font-size:11.5px; color:var(--danger); margin:1px 2px; } .emailsent { padding:2px 2px 6px; } .emailsent-h { font-size:13px; font-weight:600; color:var(--text); margin-bottom:5px; } /* "or" divider between email and SSO sign-in. */ .umor { display:flex; align-items:center; gap:8px; margin:8px 2px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em; } .umor::before, .umor::after { content:""; flex:1; height:1px; background:var(--border2); } /* Appearance segmented control (system / dark / light). */ .themeseg { display:flex; gap:2px; background:var(--panel2); border:1px solid var(--border2); border-radius:var(--r2); padding:2px; } .themeopt { flex:1; text-transform:capitalize; background:none; border:0; color:var(--dim); font:inherit; font-size:12px; padding:5px 6px; border-radius:calc(var(--r2) - 3px); cursor:pointer; } .themeopt:hover { color:var(--text); } .themeopt.on { background:var(--panel); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.3); } /* Consistent keyboard focus across interactive elements. */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:1px; } input:focus, textarea:focus, select:focus { border-color:var(--accent); outline:none; } .tabs { display:flex; gap:2px; padding:0 12px; background:var(--panel); border-bottom:1px solid var(--border); } .tab { padding:9px 16px; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; font-size:13px; transition:color .15s ease, border-color .15s ease; } .tab.active { color:var(--text); border-bottom-color:var(--accent); } .tab:hover { color:var(--text); } /* First enterprise tab: push the governance cluster right + a divider before it. */ .tab.tabright { margin-left:auto; border-left:1px solid var(--border2); padding-left:18px; } .tab.tabent { color:var(--dim); } .tab.tabent.active { color:var(--text); } .tab.tabent:hover { color:var(--text); } /* "Launch Apps" sits next to Config but links to a separate page (not a hash pane) — no underline, and a subtle divider marks it as a link-out. */ .tab-link { text-decoration:none; } .pane { flex:1; min-height:0; display:none; } .pane.active { display:flex; } /* Row tracks never shrink a panel below ~2 rows + header (see UX.md). */ main { flex:1; display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:minmax(130px,1fr) minmax(130px,0.7fr); gap:12px; padding:12px; overflow:auto; min-height:0; width:100%; } section { background:var(--panel); border:1px solid var(--border2); border-radius:var(--r3); display:flex; flex-direction:column; min-height:130px; overflow:hidden; } .h { font-size:10.5px; color:var(--t2); text-transform:uppercase; letter-spacing:.14em; padding:10px 14px; border-bottom:1px solid var(--border2); background:var(--panel2); display:flex; align-items:center; gap:10px; } .h .ttl { flex:1; } .search { background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:5px; padding:3px 8px; font:11px/1.4 system-ui,sans-serif; width:120px; text-transform:none; letter-spacing:0; } .search::placeholder { color:var(--faint); } .body { overflow-y:auto; padding:10px 14px; } /* Overview stacks a top row (Hosts | Models) over a full-width Requests panel, each a flex child so a collapsed panel shrinks and its siblings expand. Hosts + Models collapse together: the whole top row shrinks to two header bars and Requests expands into the freed height. */ main.ov { display:flex; flex-direction:column; gap:12px; } .ov .top-row { display:flex; gap:12px; min-height:0; flex:1.4; } .ov .top-row.collapsed { flex:0 0 auto; } /* both collapsed → header-bar height */ .ov #hostsSec:not(.collapsed) { flex:1.5; min-width:0; } .ov #modelsSec:not(.collapsed) { flex:1; min-width:0; } .ov .top-row.collapsed section { flex:1; min-width:0; } .ov .top-row section.collapsed.vbar { flex:0 0 44px; } /* Models vertical strip → Hosts widens */ .ov #reqSec:not(.collapsed) { flex:1; } /* full width, below the row */ .ov section.collapsed { flex:0 0 auto; min-height:0; } .ov section.collapsed > .body { display:none; } .collapse { background:none; border:0; color:var(--dim); cursor:pointer; font-size:15px; padding:0; margin-right:3px; line-height:1; } .collapse:hover { color:var(--text); } .livetoggle { cursor:pointer; border:1px solid var(--border2); background:var(--panel2); user-select:none; } .livetoggle:hover { border-color:var(--dim); } .livetoggle.on { color:var(--accent); border-color:var(--accent-border); } .livetoggle.off { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); } .collapsebar { flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px 0; cursor:pointer; color:var(--dim); font-size:12px; } .collapsebar:hover { color:var(--text); } .collapsebar .vlabel { writing-mode:vertical-rl; text-transform:uppercase; font-size:10px; letter-spacing:.06em; } .subh { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; margin:4px 0 8px; } .subh.coll { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; width:fit-content; } .subh.coll:hover { color:var(--text); } .subh .scaret { font-size:13px; color:var(--dim); line-height:1; } .subh.coll:hover .scaret { color:var(--text); } .host { border:1px solid var(--border); border-radius:var(--r3); padding:9px 11px; margin-bottom:10px; background:color-mix(in srgb, var(--panel2) 40%, transparent); transition:border-color .16s ease, box-shadow .16s ease; } .host:hover { border-color:var(--border2); box-shadow:0 2px 10px rgba(0,0,0,.18); } .host.off { opacity:.55; } .host .top { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:6px; } .host .top .tag { font-size:9px; padding:1px 5px; } .host b { font-size:14px; } .tag { font-size:9.5px; color:var(--dim); background:var(--panel3); border:0; padding:2px 7px; border-radius:5px; letter-spacing:.08em; text-transform:uppercase; } .tag.live { color:var(--accent); background:var(--accent-bg); } .busy { color:var(--warning); font-weight:600; } .stat { display:grid; grid-template-columns:56px 1fr auto; gap:8px; align-items:center; font-size:12px; margin:1.5px 0; } .stat .n { color:var(--dim); } .stat .val { color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; } /* compact single line of host scalars (load/disk/temp/free) */ .metaline { font-size:11px; color:var(--dim); margin:5px 0 6px; display:flex; flex-wrap:wrap; gap:4px 10px; font-variant-numeric:tabular-nums; } .metaline b { color:var(--faint); font-weight:500; } /* per-GPU cells, stacked (cards are narrow tiles) */ .gpugrid { display:grid; grid-template-columns:1fr; gap:2px; margin-top:2px; } .gstat { display:grid; grid-template-columns:34px 1fr auto; gap:6px; align-items:center; font-size:11px; } .gstat .gn { color:var(--faint); } .gstat .gv { color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; } /* HOSTS: tile cards in a responsive grid so many fit per row (denser). */ /* Flex-wrap (not grid): cards grow to fill the row edge-to-edge so they stay lined up when Hosts widens (Models collapsed), yet shrink to fit 3-per-row when it's narrow. A CSS grid can't do both here — the full-width ONLINE/ OFFLINE subheads occupy every track, defeating auto-fit's track collapsing. */ /* Uniform card grid: every host card is the same width, and cards in a row stretch to the same height (align-items:stretch by default) — so a short card (few metrics) matches a tall one (many GPUs) instead of looking ragged. auto-fill packs MORE equal columns as width grows rather than widening each. */ #hosts { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; align-content:start; } #hosts .subh { grid-column:1 / -1; margin:4px 0 0; } /* section headers span all columns */ #hosts .host { min-width:0; margin-bottom:0; } #hosts .gstat .gv, #hosts .stat .val { white-space:nowrap; } .bar { height:7px; background:var(--panel2); border-radius:99px; overflow:hidden; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border2) 50%, transparent); } .bar > i { display:block; height:100%; border-radius:99px; background:var(--accent); transition:width .35s cubic-bezier(.4,0,.2,1); } .bar > i.warn { background:var(--warning); } .bar > i.hot { background:var(--danger); } .inst { display:flex; align-items:center; justify-content:space-between; margin-top:8px; background:var(--panel2); border-radius:6px; padding:5px 9px; font-size:12px; } .inst .meta { color:var(--dim); font-size:11px; } button.ghost { background:var(--panel2); color:var(--dim); border:1px solid var(--border2); border-radius:5px; padding:3px 9px; font-size:11px; cursor:pointer; } button.ghost:hover { color:var(--text); } button.ghost:disabled { color:var(--faint); cursor:not-allowed; opacity:.6; } button.ghost:disabled:hover { color:var(--faint); } .model { display:flex; align-items:center; justify-content:space-between; padding:4px 8px; border-radius:6px; } .model:hover { background:var(--panel2); } .model.on b { color:var(--accent); } .model b { font-weight:500; } table { width:100%; border-collapse:collapse; font-size:12px; } th { text-align:left; color:var(--faint); font-weight:500; text-transform:uppercase; font-size:10px; letter-spacing:.05em; padding:5px 10px; position:sticky; top:0; background:var(--panel); } tbody tr { transition:background .12s ease; } tbody tr:hover td { background:color-mix(in srgb, var(--panel2) 55%, transparent); } td { padding:4px 10px; border-top:1px solid var(--border); font-variant-numeric:tabular-nums; } td.t, td.n { color:var(--dim); } /* 200 is the normal case → neutral pill (no green). Color marks exceptions: only errors get the red pill. Keeps green reserved for meaningful positives. */ td .ok { color:var(--dim); background:var(--panel3); padding:1px 8px; border-radius:99px; font-weight:500; font-size:11px; } td .bad { color:var(--danger); background:color-mix(in srgb, var(--danger) 13%, transparent); padding:1px 8px; border-radius:99px; font-weight:600; font-size:11px; } .empty { color:var(--faint); padding:10px 4px; } /* cloud providers */ .faint { color:var(--faint); } /* Providers render as a grid table (not free-flow rows): every row shares one column template, so name/used-by/status/actions line up down the list. Capped width keeps it readable instead of stretching across a wide panel. */ #providers { max-width:920px; } .provnote { line-height:1.6; } .prov { margin-bottom:5px; } /* used-by column widened + made flexible so "N models · in M chains" no longer overflows into the status column. */ .provrow { display:grid; grid-template-columns:minmax(140px,1.4fr) minmax(150px,1fr) 92px 210px; column-gap:12px; align-items:center; font-size:13px; padding:8px 11px; border:1px solid var(--border2); border-radius:8px; } /* Bigger provider cards (both the Compute and Providers tabs): each row gets real card presence — more height, a larger name, a surface + shadow — while keeping the aligned columns. Applied via .provbig on the #providers grid. */ #providers.provbig { max-width:1150px; } .provbig { display:flex; flex-direction:column; gap:10px; } .provbig .provrow { padding:16px 18px; font-size:14px; background:var(--panel); box-shadow:var(--shadow); border-radius:10px; } .provbig .provrow.provhead { padding:2px 18px 0; background:none; box-shadow:none; } .provbig .pname b { font-size:15.5px; } .provbig .pstatus { font-size:11px; padding:3px 11px; } .provrow.provhead { border:0; padding:2px 11px 5px; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.05em; } .provrow.off { opacity:.55; } .provrow > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .provrow .pname b { color:var(--text); } .provrow .purl { color:var(--faint); font-size:11px; margin-left:7px; } /* Left-edge disclosure triangle for the provider's routed-model tree (a tree affordance, distinct from the ▶ "test" action over on the right). */ .pcaret { display:inline-block; width:14px; margin-right:1px; color:var(--faint); cursor:pointer; user-select:none; font-size:10px; line-height:1; } .pcaret:hover { color:var(--text); } .pcaret.empty { cursor:default; opacity:.35; } .ub { justify-self:start; color:var(--accent); cursor:pointer; border-bottom:1px dotted currentColor; } .ub.none { color:var(--warning); cursor:default; border-bottom:0; } .ubsub { color:var(--faint); border-bottom:0; font-size:11px; } /* Status as a scannable pill (was uncolored text — pcls's ok/warn/faint had no global color rule). Colour marks the state at a glance across both provider tabs. */ .pstatus { justify-self:start; font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:2px 9px; border-radius:99px; border:1px solid var(--border2); color:var(--dim); background:var(--panel3); white-space:nowrap; text-transform:lowercase; } .pstatus.ok { color:var(--success); background:var(--success-bg); border-color:var(--success-border); } .pstatus.warn { color:var(--warning); background:color-mix(in srgb, var(--warning) 12%, transparent); border-color:color-mix(in srgb, var(--warning) 34%, transparent); } .pstatus.faint{ color:var(--dim); background:var(--panel3); border-color:var(--border2); } .ccap { color:var(--dim); font-size:12px; } .prices { margin:4px 0 8px 14px; border-left:2px solid var(--border2); padding-left:10px; } .prow { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--dim); padding:2px 0; } .prow .pm { font-family:ui-monospace,Menlo,monospace; flex:1; } .prow .pp { color:var(--faint); font-variant-numeric:tabular-nums; } .prow .psrc { color:var(--faint); font-size:10px; } .prow .prm { background:none; border:0; color:var(--faint); cursor:pointer; font-size:11px; padding:0 2px; line-height:1; } .prow .prm:hover { color:var(--danger); } .provacts { display:flex; gap:3px; justify-content:flex-end; } .provacts button { background:none; border:1px solid transparent; color:var(--t2); cursor:pointer; font-size:13px; width:28px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; } .provacts button:hover { background:var(--panel2); border-color:var(--border2); color:var(--text); } .provacts button:disabled { color:var(--faint); cursor:not-allowed; opacity:.55; } .provacts button:disabled:hover { background:none; border-color:transparent; color:var(--faint); } /* Actions & toggles wear the brand ACCENT (not the semantic success-green, which is reserved for status). "test" is a subtle accent outline; "launch" is the primary action → a filled accent button; the enable toggle is accent too. */ .provacts button.test { color:var(--accent); width:auto; padding:0 10px; font-size:11px; border-color:var(--accent-border); } .provacts button.launch { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); width:auto; padding:0 13px; font-size:11.5px; font-weight:600; } .provacts button.launch:hover { filter:brightness(1.08); background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .provacts button.launch:disabled { color:var(--faint); background:var(--panel3); border-color:var(--border2); } .provacts .enable { width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .provacts .enable input { cursor:pointer; width:15px; height:15px; accent-color:var(--accent); margin:0; } .provacts button.del:hover { background:color-mix(in srgb, var(--danger) 16%, transparent); border-color:var(--danger); color:var(--danger); } .provtest { margin-top:6px; font-size:11px; padding:6px 9px; border-radius:6px; background:var(--panel2); } .provtest.ok { color:var(--success); } .provtest.bad { color:var(--danger); } /* modal */ #modalWrap { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50; align-items:center; justify-content:center; } #modalWrap.open { display:flex; } #modal { background:var(--panel); border:1px solid var(--border); border-radius:12px; width:min(920px,94vw); max-height:86vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.5); } #modal .mh, #modal .mf { display:flex; align-items:center; gap:8px; padding:12px 16px; } #modal .mh { border-bottom:1px solid var(--border); } #modal .mf { border-top:1px solid var(--border); } #modalBody { padding:14px 16px; overflow:auto; } #modalBody textarea { width:100%; min-height:280px; background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:10px; font-family:ui-monospace,Menlo,monospace; font-size:12px; resize:vertical; } #modalBody input.mkey { width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:9px 11px; font-size:13px; } #modalBody label { display:block; font-size:11px; color:var(--dim); margin:0 0 6px; } #modalMsg.bad { color:var(--danger); } #modalMsg.ok { color:var(--success); } /* Every button inside a modal is themed by default, so a bare