:root {
  --ink: oklch(19% .018 225);
  --ink-2: oklch(29% .02 225);
  --surface: oklch(98% .008 83);
  --surface-2: oklch(95% .012 83);
  --line: oklch(86% .015 83);
  --line-strong: oklch(75% .02 83);
  --muted: oklch(43% .022 225);
  --orange: oklch(70% .17 47);
  --orange-dark: oklch(53% .16 43);
  --orange-soft: oklch(94% .035 53);
  --green: oklch(52% .125 157);
  --green-soft: oklch(94% .035 157);
  --yellow: oklch(67% .13 77);
  --yellow-soft: oklch(95% .04 80);
  --amber: oklch(43% .09 77);
  --amber-soft: var(--yellow-soft);
  --red: oklch(52% .19 25);
  --red-soft: oklch(95% .035 25);
  --blue: oklch(50% .11 245);
  --blue-soft: oklch(95% .025 245);
  --font: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --text-caption: .75rem;
  --text-secondary: .875rem;
  --text-body: 1rem;
  --text-subheading: 1.25rem;
  --sidebar: 250px;
  --shadow: 0 20px 55px oklch(15% .02 225 / .12);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface-2); }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: var(--font); font-size: var(--text-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
svg { flex: 0 0 auto; }
:focus-visible { outline: 3px solid color-mix(in oklch, var(--orange) 75%, white); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: -50px; left: 16px; padding: 10px 14px; background: var(--ink); color: var(--surface); }
.skip-link:focus { top: 12px; }
.eyebrow { color: var(--orange-dark); font: 700 var(--text-caption)/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); padding: 0 16px; background: var(--surface); color: var(--ink); font-size: var(--text-secondary); font-weight: 700; text-decoration: none; }
.button:hover { border-color: var(--ink); }
.button.primary { border-color: var(--orange); background: var(--orange); }
.button.primary:hover { background: oklch(65% .18 44); }
.button.danger { border-color: var(--red); background: var(--red); color: var(--surface); }
.button.danger:hover { background: oklch(46% .19 25); }
.button:disabled { opacity: .55; cursor: wait; }

.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; background: var(--ink); color: var(--surface); }
.boot img { width: 88px; margin-bottom: 28px; }
.boot strong { margin-top: 16px; font-size: 1rem; letter-spacing: .02em; }
.boot p { color: oklch(76% .02 225); font-size: var(--text-secondary); }
.boot-mark { width: 34px; height: 34px; border: 2px solid oklch(44% .02 225); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.login { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, 1.15fr) minmax(430px, .85fr); background: var(--surface); }
.login-story { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(36px, 6vw, 82px); overflow: hidden; position: relative; background: var(--ink); color: oklch(96% .01 83); }
.login-story::after { content: ""; width: 65vw; height: 65vw; position: absolute; right: -38vw; bottom: -34vw; border: 1px solid oklch(55% .03 225 / .35); border-radius: 50%; box-shadow: 0 0 0 7vw oklch(22% .018 225), 0 0 0 calc(7vw + 1px) oklch(55% .03 225 / .25), 0 0 0 14vw oklch(21% .018 225); }
.story-brand { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.story-brand img { width: 94px; }
.story-brand span { padding-left: 18px; border-left: 1px solid oklch(65% .02 225 / .35); color: oklch(78% .02 225); font: 700 var(--text-caption) var(--font); letter-spacing: .15em; }
.story-copy { max-width: 690px; position: relative; z-index: 1; }
.story-copy .eyebrow { color: var(--orange); }
.story-copy h1 { max-width: 11ch; margin: 20px 0 24px; font-size: clamp(2.6rem, 5.8vw, 5.8rem); line-height: .96; letter-spacing: -.065em; }
.story-copy p { max-width: 590px; margin: 0; color: oklch(80% .022 225); font-size: 1.125rem; line-height: 1.7; }
.story-path { display: flex; align-items: center; gap: 15px; position: relative; z-index: 1; color: oklch(76% .02 225); font: 700 var(--text-caption) var(--font); letter-spacing: .08em; text-transform: uppercase; }
.story-path i { width: clamp(24px, 5vw, 76px); height: 1px; background: oklch(58% .03 225); }
.login-story > small { position: absolute; right: 38px; top: 50%; z-index: 1; transform: rotate(90deg) translateX(50%); transform-origin: right top; color: oklch(66% .025 225); font: 600 var(--text-caption) var(--font); letter-spacing: .1em; }
.login-action { display: grid; place-items: center; padding: clamp(28px, 6vw, 88px); background: linear-gradient(135deg, var(--surface), var(--surface-2)); }
.auth-card { width: min(430px, 100%); }
.auth-symbol { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 34px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--orange-dark); }
.auth-card h2 { margin: 12px 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.055em; }
.auth-card > p { margin: 0 0 30px; color: var(--muted); font-size: var(--text-body); line-height: 1.65; }
.auth-button { width: 100%; min-height: 56px; justify-content: flex-start; padding: 0 18px; font-size: var(--text-secondary); }
.auth-button svg { margin-left: auto; }
.auth-provider { width: 27px; height: 27px; display: grid; place-items: center; background: var(--ink); color: var(--surface); font: 700 .7rem var(--font); }
.auth-assurance { display: flex; gap: 12px; margin-top: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--green); }
.auth-assurance span { display: grid; color: var(--ink-2); font-size: var(--text-secondary); }
.auth-assurance small { margin-top: 3px; color: var(--muted); font-size: var(--text-caption); }
.auth-card .sso-note { margin: 16px 0; font-size: var(--text-secondary); }
.preview-label { display: inline-block; margin-top: 8px; color: var(--muted); font: 700 var(--text-caption) var(--font); letter-spacing: .08em; }
.auth-error { margin: -10px 0 18px; border: 1px solid color-mix(in oklch, var(--red) 40%, var(--line)); padding: 12px; background: var(--red-soft); color: var(--red); font-size: var(--text-secondary); }

.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { min-height: 100vh; display: flex; flex-direction: column; position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--sidebar); background: var(--ink); color: oklch(91% .01 83); }
.brand { height: 76px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; border-bottom: 1px solid oklch(65% .02 225 / .2); padding: 0 20px; background: transparent; color: inherit; text-align: left; }
.brand img { width: 66px; }
.brand > span { display: flex; align-items: center; min-height: 28px; padding-left: 14px; border-left: 1px solid oklch(65% .02 225 / .25); }
.brand strong { font-size: 1rem; line-height: 1; }
.nav-label { color: oklch(68% .02 225); font: 700 var(--text-caption)/1.2 var(--font); letter-spacing: .11em; text-transform: uppercase; }
.sidebar nav { display: grid; align-content: start; gap: 3px; padding: 24px 16px 18px; }
.nav-label { padding: 0 16px 6px; }
.nav-item + .nav-label { margin-top: 17px; }
.nav-item { width: 100%; min-height: 44px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 14px; border: 0; padding: 0 16px; background: transparent; color: oklch(76% .02 225); font-size: .9375rem; font-weight: 500; line-height: 1.2; text-align: left; transition: background-color .16s ease, color .16s ease; }
.nav-item svg { justify-self: center; }
.nav-item:hover { background: oklch(24% .022 225); color: var(--surface); }
.nav-item.active { background: oklch(26% .027 225); color: var(--surface); box-shadow: inset 3px 0 var(--orange); font-weight: 600; }
.sidebar-foot { margin-top: auto; display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 9px; padding: 16px; border-top: 1px solid oklch(65% .02 225 / .18); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--orange); color: var(--ink); font: 700 .625rem var(--font); }
.sidebar-foot > span:nth-child(2) { min-width: 0; display: grid; }
.sidebar-foot strong, .sidebar-foot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot strong { font-size: var(--text-secondary); }.sidebar-foot small { color: oklch(70% .02 225); font-size: var(--text-caption); }
.sidebar-foot button { border: 0; padding: 5px; background: none; color: oklch(62% .02 225); }
.workspace { min-width: 0; grid-column: 2; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--line); padding: 0 28px; background: oklch(98% .008 83 / .96); backdrop-filter: blur(12px); }
.topbar > div { display: flex; align-items: center; gap: 14px; }
.topbar strong { font-size: var(--text-secondary); text-transform: capitalize; }
.secure-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font: 700 var(--text-caption) var(--font); letter-spacing: .06em; }
.role-badge { border-left: 1px solid var(--line-strong); padding-left: 13px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }.role-badge.admin { color: var(--orange-dark); }
.read-only-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }.role-restricted { color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
.top-actions { color: var(--muted); font-size: var(--text-caption); }
.live { display: flex; align-items: center; gap: 7px; }.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); }
.nav-toggle, .nav-backdrop { display: none; }
#main { padding: clamp(24px, 3.2vw, 48px); }
.page-head { min-height: 112px; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.page-head > div:first-child { min-width: 0; flex: 1; }
.page-head h1 { margin: 8px 0 7px; font-size: clamp(2rem, 3.2vw, 3.15rem); line-height: 1; letter-spacing: -.055em; }
.page-head p { max-width: none; margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.6; }

.overview-lead, .summary { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); margin-bottom: 22px; border-block: 1px solid var(--line-strong); background: var(--surface); }
.overview-lead > div, .summary > div, .app-health { min-height: 92px; display: grid; align-content: center; padding: 15px 20px; border-right: 1px solid var(--line); }
.overview-lead > div:first-child { grid-template-columns: 12px 1fr; column-gap: 8px; }
.overview-lead > div:first-child small { grid-column: 2; }
.overview-lead span, .summary small { color: var(--muted); font-size: var(--text-caption); }
.overview-lead strong, .summary strong { margin: 2px 0; font-size: 1.45rem; }
.overview-lead > div:first-child strong { font-size: var(--text-body); }
.overview-lead small { color: var(--muted); font-size: var(--text-caption); }
.signal { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }.signal.good { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.foundation-note { min-height: 340px; display: grid; align-content: end; position: relative; padding: clamp(28px, 5vw, 64px); overflow: hidden; background: var(--ink); color: var(--surface); }
.foundation-note::after { content: "01"; position: absolute; right: -10px; bottom: -78px; color: oklch(28% .02 225); font: 700 19rem/1 var(--font); font-variant-numeric: tabular-nums; }
.foundation-note > span, .foundation-note > h2, .foundation-note > p, .foundation-note > div { position: relative; z-index: 1; }
.foundation-note > span { color: var(--orange); font: 700 var(--text-caption) var(--font); letter-spacing: .1em; }
.foundation-note h2 { max-width: 13ch; margin: 12px 0; font-size: clamp(2rem, 4.5vw, 4.4rem); line-height: .98; letter-spacing: -.06em; }
.foundation-note p { max-width: 65ch; color: oklch(78% .02 225); font-size: var(--text-body); line-height: 1.65; }
.foundation-note > div { display: flex; gap: 22px; margin-top: 20px; color: oklch(86% .02 225); font-size: var(--text-secondary); }.foundation-note > div span { display: flex; gap: 8px; }

.summary { grid-template-columns: repeat(4, 1fr) 1.4fr; }
.summary > div { grid-template-columns: 28px 1fr; column-gap: 9px; }
.summary > div strong, .summary > div small { grid-column: 2; }
.summary-icon { width: 26px; height: 26px; grid-row: 1 / span 2; display: grid; place-items: center; align-self: center; border-radius: 50%; }.summary-icon.running { background: var(--yellow-soft); color: oklch(47% .1 75); }.summary-icon.failed { background: var(--red-soft); color: var(--red); }.summary-icon.queued { background: var(--blue-soft); color: var(--blue); }.summary-icon.passed { background: var(--green-soft); color: var(--green); }
.app-health { grid-template-columns: 24px 1fr; border: 0; color: var(--green); }.app-health > svg { grid-row: 1 / span 2; margin-top: 2px; }.app-health strong, .app-health small { grid-column: 2; }.app-health strong { color: var(--ink); font-size: var(--text-secondary); }.app-health small { color: var(--muted); }.app-health small b { color: var(--ink-2); font-weight: 600; }
.quota { --quota-color: var(--green); grid-template-rows: auto auto 4px; }.quota.warning { --quota-color: var(--yellow); color: oklch(58% .12 77); }.quota.critical { --quota-color: var(--red); color: var(--red); }.quota.unavailable, .quota.pending { color: var(--muted); }.quota-meter { width: 100%; height: 4px; grid-column: 1 / -1; margin-top: 9px; overflow: hidden; border: 0; border-radius: 0; appearance: none; background: var(--line); color: var(--quota-color); }.quota-meter::-webkit-progress-bar { background: var(--line); }.quota-meter::-webkit-progress-value { background: var(--quota-color); transition: transform .25s ease-out; }.quota-meter::-moz-progress-bar { background: var(--quota-color); }
.repo-ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 18px; border-block: 1px solid var(--line-strong); background: var(--surface); }
.repo-ribbon button { min-height: 76px; display: grid; align-content: center; gap: 4px; border: 0; border-right: 1px solid var(--line); padding: 12px 14px; background: transparent; text-align: left; }.repo-ribbon button:hover { background: var(--surface-2); }.repo-ribbon button.selected { background: var(--ink); color: var(--surface); box-shadow: inset 0 -3px var(--orange); }.repo-ribbon strong { font-size: var(--text-secondary); }.repo-ribbon small { color: var(--muted); font-size: var(--text-caption); }.repo-ribbon .selected small { color: oklch(72% .02 225); }
.skeleton-row { grid-template-columns: repeat(5, 1fr); padding: 14px; gap: 10px; }.skeleton-row i, .run-skeleton, .loading-line { display: block; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }.skeleton-row i { height: 38px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.workflow-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .7fr); gap: 17px; align-items: start; }
.run-panel { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.run-panel > header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }.run-panel h2 { margin: 5px 0 0; font-size: var(--text-subheading); }.run-panel header > small { color: var(--muted); font-size: var(--text-caption); }
.run-row { width: 100%; min-height: 98px; display: grid; grid-template-columns: minmax(0, 1fr) 96px 92px; align-items: center; gap: 16px; border: 0; border-top: 1px solid var(--line); padding: 14px 18px; background: transparent; text-align: left; }.run-row:first-child { border: 0; }.run-row:hover { background: var(--surface-2); }.run-row.selected { background: var(--orange-soft); box-shadow: inset 3px 0 var(--orange); }
.run-row > span:first-child { min-width: 0; display: grid; }.run-row strong { overflow: hidden; font-size: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }.run-row small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }.run-row em { margin-top: 6px; color: var(--muted); font: normal var(--text-caption)/1.4 var(--mono); }.run-row > span:nth-child(2) { display: grid; }.run-row > span:nth-child(2) strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.status { min-width: 88px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; align-self: center; color: var(--muted); font-size: var(--text-caption); font-weight: 700; line-height: 1; }.status svg { width: 24px; height: 24px; flex: 0 0 24px; box-sizing: border-box; padding: 3px; border-radius: 50%; stroke-width: 2.1; }.status.running { color: oklch(61% .12 75); }.status.running svg { background: var(--yellow-soft); }.status.queued { color: var(--blue); }.status.queued svg { background: var(--blue-soft); }.status.passed { color: var(--green); }.status.passed svg { background: var(--green-soft); }.status.failed { color: var(--red); }.status.failed svg { background: var(--red-soft); }
.run-skeleton { height: 82px; margin: 10px; }.empty-runs { min-height: 230px; display: grid; place-content: center; justify-items: center; color: var(--muted); }.empty-runs span { color: var(--ink); font-size: var(--text-body); font-weight: 700; }.empty-runs small { margin-top: 6px; font-size: var(--text-caption); }
.inspector { position: sticky; top: 82px; border-top: 3px solid var(--orange); background: var(--ink); color: oklch(94% .01 83); box-shadow: var(--shadow); }.inspector > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 1px solid oklch(70% .02 225 / .2); }.inspector .eyebrow { color: oklch(72% .03 225); }.inspector h2 { margin: 7px 0 5px; font-size: var(--text-subheading); line-height: 1.35; }.inspector p { margin: 0; color: oklch(72% .02 225); font-size: var(--text-caption); }.inspector > .button { margin: 16px 22px 4px; border-color: oklch(70% .02 225 / .3); background: transparent; color: oklch(90% .01 83); }.inspector .status { min-width: 88px; flex: 0 0 88px; margin-top: 1px; }.inspector .status svg { background: color-mix(in oklch, currentColor 18%, transparent); }
.job-heading { display: flex; justify-content: space-between; margin: 20px 22px 9px; color: oklch(72% .02 225); font-size: var(--text-caption); text-transform: uppercase; }.job { min-height: 72px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 88px; align-items: center; gap: 12px; border-top: 1px solid oklch(70% .02 225 / .14); padding: 12px 22px; color: inherit; text-decoration: none; }.job:hover { background: oklch(23% .02 225); }.job > i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid oklch(50% .02 225); border-radius: 50%; color: oklch(72% .02 225); font: 500 var(--text-caption) var(--font); font-variant-numeric: tabular-nums; }.job > span { min-width: 0; display: grid; }.job strong { overflow: hidden; font-size: var(--text-secondary); line-height: 1.35; text-overflow: ellipsis; }.job small { margin-top: 4px; color: oklch(70% .02 225); font-size: var(--text-caption); }.job .status { justify-self: end; }.job .status svg { background: color-mix(in oklch, currentColor 18%, transparent); }
.loading-line { height: 56px; margin: 9px 22px; background: linear-gradient(90deg, oklch(24% .02 225), oklch(31% .02 225), oklch(24% .02 225)); }.empty-jobs { padding: 30px 22px; color: oklch(72% .02 225); font-size: var(--text-secondary); }.read-only { display: flex; gap: 10px; margin-top: 12px; padding: 17px 22px; border-top: 1px solid oklch(70% .02 225 / .2); color: var(--green); }.read-only span { color: oklch(75% .02 225); font-size: var(--text-caption); line-height: 1.55; }.read-only strong { display: block; color: oklch(90% .01 83); }
.empty-inspector { min-height: 250px; display: grid; place-content: center; justify-items: center; color: oklch(60% .02 225); }.empty-inspector strong { margin-top: 10px; color: oklch(86% .01 83); }.empty-inspector p { margin-top: 5px; }
.pairing-panel { display: grid; grid-template-columns: minmax(280px, 1.25fr) minmax(330px, .75fr); align-items: end; gap: 22px 36px; margin-bottom: 22px; border-top: 3px solid var(--orange); padding: 26px 28px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); }
.pairing-panel h2 { margin: 7px 0 5px; font-size: var(--text-subheading); }.pairing-panel p { max-width: 64ch; margin: 0; color: oklch(74% .02 225); font-size: var(--text-secondary); }.pairing-panel label { display: grid; gap: 7px; color: oklch(82% .02 225); font-size: var(--text-caption); font-weight: 700; }.pairing-panel input { min-height: 48px; border: 1px solid oklch(55% .02 225); padding: 0 14px; background: oklch(24% .02 225); color: var(--surface); font-family: var(--mono); font-size: var(--text-secondary); letter-spacing: .04em; text-transform: uppercase; }.pairing-panel input::placeholder { color: oklch(58% .02 225); }.pairing-panel .pairing-message { grid-column: 2; color: oklch(78% .12 25); }.pairing-actions { grid-column: 2; display: flex; justify-content: flex-end; gap: 9px; }.pairing-panel .button.secondary { border-color: oklch(55% .02 225); background: transparent; color: var(--surface); }
.fleet-summary { display: grid; grid-template-columns: 1.2fr repeat(3, .8fr) 1.2fr; margin-bottom: 22px; border-block: 1px solid var(--line-strong); background: var(--surface); }.fleet-summary > div { min-height: 84px; display: grid; grid-template-columns: 13px 1fr; align-content: center; column-gap: 8px; border-right: 1px solid var(--line); padding: 14px 20px; }.fleet-summary > div:first-child, .fleet-summary > div:last-child { grid-template-columns: 1fr; }.fleet-summary span, .fleet-summary small { color: var(--muted); font-size: var(--text-caption); }.fleet-summary strong { grid-column: 2; font-size: var(--text-subheading); }.fleet-summary > div:first-child strong, .fleet-summary > div:last-child strong { grid-column: 1; }.fleet-dot { width: 8px; height: 8px; align-self: center; border-radius: 50%; }.fleet-dot.online { background: var(--green); }.fleet-dot.stale { background: var(--yellow); }.fleet-dot.offline { background: var(--muted); }
.fleet-panel { border: 1px solid var(--line); background: var(--surface); }.fleet-panel > header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 20px; border-bottom: 1px solid var(--line); }.fleet-panel h2 { margin: 4px 0 0; font-size: var(--text-subheading); }.fleet-panel-actions { display: flex; align-items: center; gap: 10px; }.fleet-search { min-height: 42px; min-width: min(330px, 32vw); display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); padding: 0 12px; background: var(--surface); color: var(--muted); }.fleet-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--text-secondary); }.appliance-columns, .appliance-row { display: grid; grid-template-columns: minmax(220px, 1.7fr) minmax(110px, .8fr) minmax(105px, .75fr) minmax(100px, .65fr) minmax(90px, .55fr) minmax(170px, auto); align-items: center; gap: 16px; padding-inline: 20px; }.appliance-columns { min-height: 42px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-caption); font-weight: 600; }.appliance-columns > span:last-child { text-align: right; }.appliance-row { min-height: 92px; border-bottom: 1px solid var(--line); }.appliance-entry:last-child .appliance-row:not(.expanded) { border-bottom: 0; }.appliance-row > div:not(.appliance-identity, .appliance-actions, .unpair-confirm) { display: grid; }.appliance-row strong { font-size: var(--text-secondary); }.appliance-row small, .cell-label { color: var(--muted); font-size: var(--text-caption); }.cell-label { display: none; }.appliance-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }.appliance-identity > span { width: 36px; height: 36px; display: grid; flex: 0 0 36px; place-items: center; background: var(--surface-2); color: var(--ink-2); }.appliance-identity > div { min-width: 0; display: grid; }.appliance-identity strong, .appliance-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.connection { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-secondary); font-weight: 700; }.connection i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }.connection.online { color: var(--green); }.connection.stale, .connection.awaiting_connection { color: oklch(57% .13 77); }.connection.offline { color: var(--muted); }.appliance-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }.appliance-admin-link { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: var(--text-caption); font-weight: 700; text-decoration: none; white-space: nowrap; }.appliance-admin-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }.appliance-admin-unavailable { color: var(--muted); font-size: var(--text-caption); white-space: nowrap; }.unpair-trigger { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; border: 0; padding: 8px 0; background: transparent; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }.unpair-trigger:hover { color: var(--red); }.unpair-confirm { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 -20px; border-top: 1px solid color-mix(in oklch, var(--red) 30%, var(--line)); padding: 14px 20px; background: var(--red-soft); }.unpair-confirm > span { min-width: 0; display: grid; margin-right: auto; }.unpair-confirm strong { color: var(--red); }.fleet-skeleton { height: 72px; margin: 10px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }.empty-fleet { min-height: 280px; display: grid; place-content: center; justify-items: center; padding: 30px; color: var(--muted); text-align: center; }.empty-fleet span { color: var(--ink); font-size: var(--text-body); font-weight: 700; }.empty-fleet small { margin: 7px 0 18px; font-size: var(--text-secondary); }
.runner-summary { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); margin-bottom: 18px; border-block: 1px solid var(--line-strong); background: var(--surface); }.runner-summary > div { min-height: 86px; display: grid; align-content: center; border-right: 1px solid var(--line); padding: 14px 20px; }.runner-summary > div:first-child span, .runner-summary small { color: var(--muted); font-size: var(--text-caption); }.runner-summary strong { font-size: var(--text-subheading); }.runner-summary > div:not(:first-child) { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }.runner-summary > div:not(:first-child) .runner-state { grid-row: 1; }.runner-summary > div:not(:first-child) > strong { grid-column: 2; grid-row: 1; font-size: 1.45rem; }
.runner-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-caption); font-weight: 700; white-space: nowrap; }.runner-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }.runner-state.busy { color: var(--green); }.runner-state.idle { color: var(--blue); }.runner-state.starting { color: oklch(58% .13 77); }.runner-state.offline { color: var(--muted); }
.runner-warning { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; border: 1px solid color-mix(in oklch, var(--yellow) 45%, var(--line)); padding: 13px 16px; background: var(--yellow-soft); color: oklch(48% .1 77); }.runner-warning span { display: grid; color: var(--ink-2); font-size: var(--text-secondary); }.runner-warning strong { color: oklch(45% .11 77); }
.runner-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }.runner-toolbar label { min-height: 44px; min-width: min(440px, 50%); display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); padding: 0 13px; background: var(--surface); color: var(--muted); }.runner-toolbar input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--text-secondary); }.runner-filters { display: flex; border: 1px solid var(--line-strong); background: var(--surface); }.runner-filters button { min-height: 42px; border: 0; border-right: 1px solid var(--line); padding: 0 13px; background: transparent; color: var(--muted); font-size: var(--text-caption); font-weight: 700; }.runner-filters button:last-child { border: 0; }.runner-filters button:hover { color: var(--ink); }.runner-filters button.selected { background: var(--ink); color: var(--surface); }
.runner-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); align-items: start; gap: 17px; }.runner-groups { min-width: 0; display: grid; gap: 12px; }.runner-group { border: 1px solid var(--line); background: var(--surface); }.runner-group-head { width: 100%; min-height: 72px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 100px; align-items: center; gap: 10px; border: 0; padding: 12px 17px; background: transparent; text-align: left; }.runner-group-head:hover { background: var(--surface-2); }.runner-group-head > span:nth-child(2) { display: grid; }.runner-group-head strong { font-size: var(--text-body); }.runner-group-head small { color: var(--muted); font-size: var(--text-caption); }.group-chevron { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); }.group-chevron svg { transition: transform .22s cubic-bezier(.2,.8,.2,1); }.runner-group.expanded .group-chevron svg { transform: rotate(180deg); }.group-activity, .group-total { color: var(--muted); font-size: var(--text-caption); }.group-activity b, .group-total b { color: var(--ink); font-size: var(--text-secondary); }
.runner-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.2,.8,.2,1); }.runner-group-body > div { min-height: 0; overflow: hidden; }.runner-group.expanded .runner-group-body { grid-template-rows: 1fr; }.runner-columns, .runner-row { display: grid; grid-template-columns: minmax(175px, 1.1fr) 104px minmax(155px, .9fr) minmax(190px, 1.25fr) minmax(95px, .65fr) 24px; align-items: center; gap: 14px; padding-inline: 17px; }.runner-columns { min-height: 38px; border-block: 1px solid var(--line); color: var(--muted); font-size: var(--text-caption); font-weight: 600; }.runner-row { width: 100%; min-height: 82px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.runner-row:last-child { border-bottom: 0; }.runner-row:hover { background: var(--surface-2); }.runner-row.selected { background: var(--orange-soft); box-shadow: inset 3px 0 var(--orange); }.runner-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }.runner-identity > span:first-child { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; background: var(--surface-2); }.runner-identity > span:last-child, .runner-assignment, .runner-machine { min-width: 0; display: grid; }.runner-row strong, .runner-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.runner-row strong { font-size: var(--text-secondary); }.runner-row small { color: var(--muted); font-size: var(--text-caption); }.runner-assignment strong { font-weight: 600; }.runner-row-labels { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }.runner-label, .runner-label-more { max-width: 100%; overflow: hidden; border: 1px solid var(--line-strong); padding: 4px 7px; background: var(--surface-2); color: var(--ink-2); font-size: var(--text-caption); font-weight: 650; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }.runner-label-more { flex: 0 0 auto; border-color: transparent; background: transparent; color: var(--muted); }.runner-label-empty { color: var(--muted); font-size: var(--text-caption); }.row-arrow { color: var(--muted); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; }.runner-row:hover .row-arrow, .runner-row.selected .row-arrow { transform: translateX(2px); opacity: 1; }
.runner-inspector { position: sticky; top: 82px; border-top: 3px solid var(--orange); background: var(--ink); color: oklch(94% .01 83); box-shadow: var(--shadow); }.runner-inspector > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; border-bottom: 1px solid oklch(70% .02 225 / .2); }.runner-inspector .eyebrow { color: oklch(72% .03 225); }.runner-inspector h2 { margin: 7px 0 4px; overflow-wrap: anywhere; font-size: var(--text-subheading); }.runner-inspector header p { margin: 0; color: oklch(72% .02 225); font-size: var(--text-caption); }.runner-inspector .runner-state { flex: 0 0 auto; margin-top: 2px; }.assignment-detail, .runner-facts { padding: 22px; border-bottom: 1px solid oklch(70% .02 225 / .18); }.assignment-detail h3 { margin: 11px 0 5px; font-size: var(--text-body); line-height: 1.4; }.assignment-detail > p, .no-assignment p { margin: 0; color: oklch(72% .02 225); font-size: var(--text-caption); }.assignment-detail dl, .runner-facts dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }.assignment-detail dl div, .runner-facts dl div { display: grid; }.assignment-detail dt, .runner-facts dt { color: oklch(64% .02 225); font-size: var(--text-caption); }.assignment-detail dd, .runner-facts dd { margin: 2px 0 0; overflow: hidden; font-size: var(--text-secondary); text-overflow: ellipsis; }.runner-inspector .button { border-color: oklch(70% .02 225 / .35); background: transparent; color: var(--surface); }.no-assignment { margin-top: 14px; padding: 18px 0 4px; }.no-assignment strong { font-size: var(--text-body); }.runner-facts dl { grid-template-columns: 1fr 1fr; }.runner-label-heading { display: block; margin: 18px 0 8px; color: oklch(64% .02 225); font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; }.runner-labels { display: flex; flex-wrap: wrap; gap: 6px; }.runner-labels span { padding: 5px 8px; background: oklch(25% .02 225); color: oklch(78% .02 225); font-size: var(--text-caption); }.runner-facts > .runner-label-empty { margin: 0; color: oklch(64% .02 225); }.empty-runner-inspector { min-height: 270px; display: grid; place-content: center; justify-items: center; color: oklch(58% .02 225); }.empty-runner-inspector strong { margin-top: 10px; color: oklch(88% .01 83); }.empty-runner-inspector p { margin: 4px 0 0; color: oklch(68% .02 225); font-size: var(--text-caption); }.runner-group-skeleton { height: 94px; background: linear-gradient(90deg, var(--surface), var(--line), var(--surface)); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }.empty-runner-group { min-height: 72px; display: grid; place-items: center; color: var(--muted); font-size: var(--text-secondary); }.empty-runners { min-height: 260px; display: grid; place-content: center; justify-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }.empty-runners span { color: var(--ink); font-weight: 700; }.empty-runners small { margin-top: 5px; }.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.page-error { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 16px; border: 1px solid color-mix(in oklch, var(--red) 40%, var(--line)); padding: 14px 16px; background: var(--red-soft); color: var(--red); font-size: var(--text-secondary); }.page-error button { border: 0; background: none; color: inherit; font-weight: 700; }
.appliance-columns, .appliance-row { grid-template-columns: minmax(190px, 1.1fr) 120px minmax(370px, 1.85fr) 80px minmax(160px, auto) 24px; }
.appliance-row { position: relative; cursor: pointer; transition: background .16s ease-out; }.appliance-row:hover, .appliance-row.expanded { background: var(--surface-2); }.appliance-row:focus-visible { z-index: 1; outline: 2px solid var(--blue); outline-offset: -2px; }.appliance-name { width: fit-content; overflow: hidden; border: 0; padding: 0; background: transparent; color: var(--blue); font: inherit; font-size: var(--text-secondary); font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.appliance-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }.appliance-name:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }.appliance-connection { gap: 3px; }.appliance-connection small { padding-left: 15px; }.appliance-actions { position: relative; z-index: 2; }.appliance-row-arrow { display: grid; place-items: center; color: var(--muted); opacity: .72; transition: opacity .16s ease-out, transform .16s ease-out; }.appliance-row:hover .appliance-row-arrow, .appliance-row.expanded .appliance-row-arrow { transform: translateX(2px); opacity: 1; }
.controller-metrics { display: grid; grid-template-columns: repeat(5, minmax(52px, 1fr)); gap: 8px; }.controller-metric { --gauge-color: var(--green); --gauge-track-color: oklch(87% .018 205); min-width: 0; display: grid; justify-items: center; gap: 6px; }.controller-metric > i { width: 48px; aspect-ratio: 1; display: grid; position: relative; place-items: center; font-style: normal; }.controller-metric svg { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }.controller-metric circle { fill: none; stroke-width: 6; }.controller-metric .gauge-track { stroke: var(--gauge-track-color); }.controller-metric .gauge-value { stroke: var(--gauge-color); stroke-linecap: round; }.controller-metric small { overflow: hidden; color: var(--muted); font-size: var(--text-caption); font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }.controller-metric strong { z-index: 1; color: var(--ink); font-size: var(--text-secondary); font-variant-numeric: tabular-nums; line-height: 1; }.controller-metric strong b { margin-left: 1px; font-size: .58em; font-weight: 700; }.controller-metric.warning { --gauge-color: var(--yellow); }.controller-metric.critical { --gauge-color: var(--red); }.controller-metric.unknown { --gauge-color: var(--gauge-track-color); color: var(--muted); }
.appliance-row-arrow svg { transition: transform .18s ease-out; }.appliance-row.expanded .appliance-row-arrow svg { transform: rotate(180deg); }.devkit-drawer { border-bottom: 1px solid var(--line-strong); background: color-mix(in oklch, var(--surface-2) 76%, var(--surface)); }.devkit-drawer > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--line); }.devkit-drawer > header > div { display: flex; align-items: baseline; gap: 10px; }.devkit-drawer > header strong { font-size: var(--text-secondary); }.devkit-drawer > header small { color: var(--muted); font-size: var(--text-caption); }.devkit-table-scroll { overflow-x: auto; }.devkit-table { min-width: 1180px; }.devkit-columns, .devkit-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) 100px 145px 145px minmax(260px, 1.6fr) 90px 90px 90px 76px; align-items: center; gap: 14px; padding-inline: 20px; }.devkit-columns { min-height: 36px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-caption); font-weight: 700; }.devkit-row { min-height: 84px; border-bottom: 1px solid var(--line); background: var(--surface); }.devkit-row:last-child { border-bottom: 0; }.devkit-row > div:not(.devkit-usage) { min-width: 0; display: grid; }.devkit-row > span, .devkit-row strong, .devkit-row small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.devkit-row > span { color: var(--ink-2); font-size: var(--text-secondary); }.devkit-row strong { font-size: var(--text-secondary); }.devkit-row small { color: var(--muted); font-size: var(--text-caption); }.devkit-platform { width: fit-content; max-width: 100%; padding: 5px 8px; background: var(--blue-soft); color: var(--blue) !important; font-weight: 700; }.devkit-usage { display: grid; grid-template-columns: repeat(6, minmax(34px, 1fr)); gap: 7px; }.devkit-usage .controller-metric { gap: 4px; }.devkit-usage .controller-metric > i { width: 34px; }.devkit-usage .controller-metric strong { font-size: .625rem; }.devkit-usage .controller-metric small { font-size: .5625rem; }.devkit-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; background: var(--surface-2); color: var(--muted); font-size: var(--text-caption); font-weight: 700; }.devkit-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.devkit-pill.idle, .devkit-pill.online, .devkit-pill.healthy { background: var(--green-soft); color: var(--green); }.devkit-pill.busy { background: var(--blue-soft); color: var(--blue); }.devkit-pill.offline, .devkit-pill.unhealthy { color: var(--muted); }.devkit-connect { display: flex; justify-content: flex-end; }.devkit-connect button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); padding: 0 9px; background: var(--surface); color: var(--ink-2); font-size: var(--text-caption); font-weight: 700; }.devkit-connect button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }.devkit-connect button:disabled { opacity: .5; cursor: not-allowed; }.empty-devkits { min-height: 100px; display: grid; place-content: center; justify-items: center; padding: 20px; color: var(--muted); }.empty-devkits strong { color: var(--ink-2); }.empty-devkits small { margin-top: 4px; }
.devkit-table > .devkit-columns, .devkit-table > .devkit-row { grid-template-columns: minmax(150px, .75fr) 100px minmax(210px, 1.15fr) 145px minmax(260px, 1.6fr) 90px 90px 90px 76px; }
.appliance-entry.deemphasized > .appliance-row { opacity: .42; filter: saturate(.2); transition: opacity .18s ease-out, filter .18s ease-out, background .16s ease-out; }.appliance-entry.deemphasized > .appliance-row:hover, .appliance-entry.deemphasized > .appliance-row:focus-within { opacity: .78; filter: saturate(.65); }
.dialog-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: clamp(18px, 4vw, 52px); background: oklch(12% .015 225 / .68); }.appliance-dialog { width: min(1080px, 100%); max-height: calc(100vh - clamp(36px, 8vw, 104px)); overflow-y: auto; border-top: 3px solid var(--orange); background: var(--ink); color: oklch(94% .01 83); box-shadow: 0 28px 70px oklch(10% .02 225 / .42); }.appliance-dialog > header { min-height: 104px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 24px; border-bottom: 1px solid oklch(70% .02 225 / .2); }.appliance-dialog .eyebrow { color: oklch(70% .03 225); }.appliance-dialog h2 { margin: 7px 0 4px; font-size: var(--text-heading); }.appliance-dialog header p { max-width: 68ch; margin: 0; overflow: hidden; color: oklch(70% .02 225); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }.dialog-actions { display: flex; align-items: center; gap: 12px; }.appliance-dialog .connection { flex: 0 0 auto; }.appliance-dialog .icon-button { border-color: oklch(70% .02 225 / .3); background: transparent; color: oklch(86% .01 83); }.appliance-dialog .button.secondary { border-color: oklch(70% .02 225 / .3); background: transparent; color: oklch(92% .01 83); }
.controller-detail-metrics { display: grid; grid-template-columns: repeat(5, minmax(86px, 1fr)); gap: 14px; border-bottom: 1px solid oklch(70% .02 225 / .2); padding: 22px 24px; }.controller-detail-metrics .controller-metric { --gauge-track-color: oklch(34% .025 205); align-content: center; gap: 9px; }.controller-detail-metrics .controller-metric > i { width: 72px; }.controller-detail-metrics .controller-metric circle { stroke-width: 5; }.controller-detail-metrics .controller-metric small { color: oklch(70% .02 225); }.controller-detail-metrics .controller-metric strong { color: oklch(94% .01 83); font-size: var(--text-body); }
.controller-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.controller-detail-grid > section { min-width: 0; padding: 24px; border-right: 1px solid oklch(70% .02 225 / .18); }.controller-detail-grid > section:last-child { border-right: 0; }.detail-title { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }.detail-title strong { font-size: var(--text-body); }.detail-title > span:not(.release-state) { color: oklch(70% .02 225); font-size: var(--text-caption); }.release-state { padding: 5px 8px; background: oklch(29% .02 225); color: oklch(72% .02 225); font-size: var(--text-caption); font-weight: 700; text-transform: capitalize; }.release-state.update { background: oklch(35% .07 65); color: oklch(85% .12 75); }.release-state.current { color: oklch(75% .13 153); }.controller-detail-grid dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 17px 0 0; }.controller-detail-grid dl div { min-width: 0; display: grid; }.controller-detail-grid dt { color: oklch(62% .02 225); font-size: var(--text-caption); }.controller-detail-grid dd { margin: 3px 0 0; overflow: hidden; color: oklch(88% .01 83); font-size: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }.controller-detail-grid code { color: inherit; }
#toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: 360px; transform: translateY(18px); opacity: 0; padding: 14px 17px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); font-size: var(--text-secondary); pointer-events: none; transition: opacity .2s, transform .2s; }#toast.show { transform: none; opacity: 1; }

@media (max-width: 900px) {
  :root { --sidebar: 190px; }
  .login { grid-template-columns: 1fr; }.login-story { min-height: 47vh; }.story-copy h1 { font-size: clamp(2.5rem, 9vw, 4.6rem); }.story-path { display: none; }.login-action { min-height: 53vh; }
  .workflow-layout { grid-template-columns: 1fr; }.inspector { position: static; }.summary { grid-template-columns: repeat(2, 1fr); }.app-health { grid-column: 1 / -1; }
  .pairing-panel { grid-template-columns: 1fr; }.pairing-panel .pairing-message, .pairing-actions { grid-column: 1; }.fleet-summary { grid-template-columns: repeat(2, 1fr); }.fleet-summary > div:first-child { grid-column: 1 / -1; }.fleet-panel > header { align-items: flex-start; flex-direction: column; }.fleet-panel-actions { width: 100%; }.fleet-search { min-width: 0; flex: 1; }.appliance-columns { display: none; }.appliance-row { grid-template-columns: minmax(180px, 1fr) 110px minmax(300px, 1.6fr) 24px; padding-block: 14px; }.appliance-row > div:nth-child(4), .appliance-row > div:nth-child(5) { display: none; }.cell-label { display: block; }.controller-detail-grid { grid-template-columns: 1fr; }.controller-detail-grid > section { border-right: 0; border-bottom: 1px solid oklch(70% .02 225 / .18); }.controller-detail-grid > section:last-child { border-bottom: 0; }
  .runner-summary { grid-template-columns: repeat(2, 1fr); }.runner-summary > div:first-child { grid-column: 1 / -1; }.runner-toolbar { align-items: stretch; flex-direction: column; }.runner-toolbar label { min-width: 100%; }.runner-filters { align-self: flex-start; }.runner-layout { grid-template-columns: 1fr; }.runner-inspector { position: static; }.runner-columns, .runner-row { grid-template-columns: minmax(175px, 1.1fr) 104px minmax(145px, .85fr) minmax(190px, 1fr) 24px; }.runner-columns span:nth-child(5), .runner-machine { display: none; }
}

@media (max-width: 640px) {
  :root { --sidebar: 0px; }.shell { display: block; }.sidebar { width: min(84vw, 320px); height: 100dvh; min-height: 100dvh; inset: 0 auto 0 0; flex-direction: column; transform: translateX(-100%); box-shadow: none; transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; }.shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: 16px 0 40px oklch(12% .015 225 / .32); }.nav-backdrop { position: fixed; z-index: 19; inset: 0; border: 0; background: oklch(12% .015 225 / .44); opacity: 0; pointer-events: none; transition: opacity .2s ease; }.shell.sidebar-open .nav-backdrop { display: block; opacity: 1; pointer-events: auto; }.nav-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; margin-left: -9px; background: transparent; color: var(--ink); }.sidebar nav { width: 100%; padding: 24px 16px 18px; overflow-y: auto; }.nav-label { display: block; }.nav-item { width: 100%; min-height: 44px; }.workspace { padding-bottom: 0; }.topbar { padding: 0 15px; }.topbar > div:first-child strong { display: none; }#main { padding: 22px 15px; }.page-head { min-height: 130px; flex-direction: column; gap: 14px; }.overview-lead, .summary { grid-template-columns: 1fr 1fr; }.overview-lead > div, .summary > div { min-height: 78px; }.overview-lead > div:first-child { grid-column: 1 / -1; }.app-health { grid-column: 1 / -1; }.run-row { grid-template-columns: 1fr auto; }.run-row > span:nth-child(2) { display: none; }.run-row > .status { min-width: 24px; }.run-row > .status span { display: none; }.login-story { min-height: 42vh; padding: 28px; }.story-copy h1 { margin: 14px 0; font-size: 2.6rem; }.story-copy p { font-size: var(--text-body); }.login-story > small { display: none; }.login-action { min-height: 58vh; padding: 32px 24px; }.auth-symbol { display: none; }
  .pairing-panel { padding: 22px 18px; }.pairing-actions { justify-content: stretch; }.pairing-actions .button { flex: 1; }.fleet-summary { grid-template-columns: 1fr 1fr; }.fleet-summary > div:last-child { grid-column: 1 / -1; }.fleet-panel-actions { align-items: stretch; flex-direction: column; }.fleet-panel-actions .button { justify-content: center; }.appliance-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }.appliance-row > div:not(.appliance-identity, .controller-metrics, .unpair-confirm) { display: none; }.controller-metrics { grid-column: 1 / -1; }.appliance-row-arrow { grid-column: 2; grid-row: 1; opacity: 1; }.unpair-confirm { grid-column: 1 / -1; flex-wrap: wrap; }.unpair-confirm > span { flex-basis: 100%; }.unpair-confirm .button { flex: 1; }.devkit-drawer > header { align-items: flex-start; flex-direction: column; gap: 4px; }.appliance-dialog > header { align-items: stretch; flex-direction: column; }.dialog-actions { flex-wrap: wrap; }.controller-detail-metrics { grid-template-columns: repeat(3, 1fr); }.controller-detail-grid dl { grid-template-columns: 1fr; }
  .runner-summary { grid-template-columns: 1fr 1fr; }.runner-summary > div { min-height: 74px; padding: 11px 13px; }.runner-summary > div:first-child { grid-column: 1 / -1; }.runner-filters { width: 100%; overflow-x: auto; }.runner-filters button { flex: 1 0 auto; }.runner-group-head { grid-template-columns: 28px minmax(0, 1fr) 72px; }.group-activity { display: none; }.runner-columns { display: none; }.runner-row { grid-template-columns: minmax(0, 1fr) auto 20px; padding-block: 13px; }.runner-row-labels { grid-column: 1 / -1; }.runner-assignment, .runner-machine { display: none; }.assignment-detail dl { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.ssh-panel { position: fixed; z-index: 80; inset: auto 20px 20px calc(var(--sidebar) + 20px); height: min(66vh, 720px); min-height: 280px; display: flex; flex-direction: column; background: #172126; color: #e5ebe8; border: 1px solid #445860; box-shadow: 0 12px 48px #10202745; }
.ssh-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #34454c; }
.ssh-header > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; min-width: 0; }
.ssh-title { font-size: 14px; overflow-wrap: anywhere; }
.ssh-status { color: #add2b9; font-size: 13px; }
.ssh-status.is-error { color: #ffbcae; }
.ssh-close { flex-shrink: 0; background: #24353d; color: #e5ebe8; border: 1px solid #657b84; padding: 6px 12px; font-size: 13px; }
.ssh-close:hover { background: #354b56; }
.ssh-screen { flex: 1; min-height: 0; overflow: hidden; padding: 14px 18px 8px; }
.ssh-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 8px 18px; border-top: 1px solid #34454c; color: #b8c5c7; font-size: 11px; }
@media (max-width: 1000px) { .ssh-panel { left: 12px; right: 12px; bottom: 12px; } }
@media (max-width: 600px) { .ssh-panel { inset: 8px; height: auto; } .ssh-header { align-items: flex-start; } .ssh-screen { padding: 10px; } }

.unpair-backdrop { background: oklch(12% .015 225 / .76); }
.unpair-dialog { width: min(500px, 100%); overflow: hidden; border-top: 4px solid var(--red); background: var(--surface); box-shadow: 0 30px 80px oklch(10% .02 225 / .48); }
.unpair-dialog > header { display: flex; align-items: center; gap: 16px; padding: 26px 28px 18px; }
.unpair-symbol { width: 48px; height: 48px; display: grid; flex: 0 0 48px; place-items: center; background: var(--red-soft); color: var(--red); }
.unpair-dialog .eyebrow { color: var(--red); }
.unpair-dialog h2 { margin: 4px 0 0; font-size: var(--text-subheading); line-height: 1.25; }
.unpair-dialog > p { margin: 0; padding: 0 28px 20px; color: var(--ink-2); font-size: var(--text-secondary); }
.unpair-dialog-note { display: grid; gap: 2px; margin: 0 28px 24px; border-left: 2px solid var(--line-strong); padding-left: 14px; }
.unpair-dialog-note strong { font-size: var(--text-secondary); }
.unpair-dialog-note span { color: var(--muted); font-size: var(--text-caption); }
.unpair-dialog > footer { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); padding: 18px 28px; background: var(--surface-2); }

@media (max-width: 640px) {
  .unpair-dialog > header { align-items: flex-start; padding: 22px 20px 16px; }
  .unpair-dialog > p { padding: 0 20px 18px; }
  .unpair-dialog-note { margin: 0 20px 22px; }
  .unpair-dialog > footer { align-items: stretch; flex-direction: column-reverse; padding: 16px 20px 20px; }
  .unpair-dialog .button { width: 100%; }
}

.appliance-entry.expanded { position: relative; overflow: hidden; background: color-mix(in oklch, var(--surface-2) 50%, var(--surface)); }
.appliance-entry.expanded > .appliance-row { border-bottom: 0; background: var(--surface-2); }
.appliance-entry.expanded > .devkit-drawer { position: relative; margin: 14px 20px 22px 64px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 8px 24px oklch(22% .02 225 / .07); }
.appliance-entry.expanded > .devkit-drawer::before { content: ""; width: 27px; height: 1px; position: absolute; z-index: 2; top: 25px; left: -27px; background: color-mix(in oklch, var(--orange) 55%, var(--line-strong)); }
.appliance-entry.expanded > .devkit-drawer::after { content: ""; width: 1px; height: 80px; position: absolute; z-index: 2; top: -55px; left: -27px; background: color-mix(in oklch, var(--orange) 55%, var(--line-strong)); }
.appliance-entry.expanded > .devkit-drawer > header { min-height: 50px; background: color-mix(in oklch, var(--orange-soft) 30%, var(--surface-2)); }
.appliance-entry.expanded > .devkit-drawer .devkit-columns { background: var(--surface-2); }

@media (max-width: 900px) {
  .appliance-entry.expanded > .devkit-drawer { margin-left: 52px; }
  .appliance-entry.expanded > .devkit-drawer::before, .appliance-entry.expanded > .devkit-drawer::after { left: -20px; }
  .appliance-entry.expanded > .devkit-drawer::before { width: 20px; }
}

@media (max-width: 640px) {
  .appliance-entry.expanded > .devkit-drawer { margin: 10px 12px 18px; }
  .appliance-entry.expanded > .devkit-drawer::before, .appliance-entry.expanded > .devkit-drawer::after { display: none; }
}

.devkit-row:is(.offline, :has(.devkit-pill.health.offline)) .controller-metric { --gauge-color: var(--gauge-track-color); }
.devkit-row:is(.offline, :has(.devkit-pill.health.offline)) .controller-metric strong, .devkit-row:is(.offline, :has(.devkit-pill.health.offline)) .controller-metric small { color: var(--muted); }
.devkit-row:is(.offline, :has(.devkit-pill.health.offline)) .devkit-pill.work:not(.in-maintenance) { background: var(--surface-2); color: var(--muted); }

.devkit-details-link { border: 0; padding: 0; background: none; color: var(--ink); text-align: left; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.devkit-details-link:hover { color: var(--orange-dark); }
.device-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.device-dialog::backdrop { background: oklch(19% .018 225 / .45); }
.device-dialog > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px; }
.device-dialog h2 { margin: 4px 0; font-size: 24px; overflow-wrap: anywhere; }
.device-context { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.device-dialog-tabs { display: flex; padding: 0 24px; border-bottom: 1px solid var(--line); gap: 24px; }
.device-dialog-tabs button { border: 0; border-bottom: 3px solid transparent; background: none; padding: 12px 0; color: var(--muted); font-weight: 600; }
.device-dialog-tabs [aria-selected="true"] { border-color: var(--orange); color: var(--ink); }
.device-dialog [role="tabpanel"] { padding: 24px; }
.device-intro { margin: 0 0 28px; color: var(--muted); }
.device-power-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.device-power-row p, .device-cycle p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.device-power-switch { width: 54px; height: 32px; flex: 0 0 54px; border: 0; border-radius: 99px; padding: 3px; background: var(--line-strong); }
.device-power-switch span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.device-power-switch[aria-checked="true"] { background: var(--green); }
.device-power-switch[aria-checked="true"] span { transform: translateX(22px); }
.device-power-switch:disabled { opacity: .5; cursor: not-allowed; }
.device-power-explicit { display: flex; gap: 12px; margin-top: 16px; }
.device-cycle { margin-top: 32px; }
.device-cycle p { margin-top: 14px; max-width: 48ch; }
.device-dialog footer { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; }
.device-power-feedback { margin: 0; font-size: 13px; color: var(--muted); }
.device-dialog footer .button { flex-shrink: 0; }
.device-dialog [hidden] { display: none; }
@media (max-width: 480px) { .device-dialog > header, .device-dialog [role="tabpanel"] { padding: 20px; } .device-dialog footer { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .device-power-switch span { transition: none; } }

/* Reserve room for actionable state; keep platform versions compact. */
.devkit-table > .devkit-columns, .devkit-table > .devkit-row { grid-template-columns: minmax(160px, 1fr) 100px minmax(120px, .65fr) 130px minmax(260px, 1.6fr) 140px 120px 90px 76px; }
.devkit-pools { display: grid; gap: 24px; padding: 20px; }
.devkit-pool { min-width: 0; border: 1px solid var(--line-strong); background: var(--surface); }
.devkit-pool-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: var(--surface-2); border-bottom: 2px solid var(--line-strong); }
.devkit-pool-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.devkit-pool-heading .eyebrow { flex-basis: 100%; color: var(--muted); }
.devkit-pool-heading h3 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.devkit-pool-heading small { color: var(--muted); white-space: nowrap; }
.devkit-pool-heading button { flex-shrink: 0; }
@media (max-width: 700px) { .devkit-pools { padding: 12px; gap: 20px; } .devkit-pool-heading { padding: 14px; } }

.maintenance-device-list { display: grid; gap: 12px; margin: 20px 0; }
.maintenance-device-list label { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.maintenance-device-list input { width: auto; }
.maintenance-reason-input { display: block; width: 100%; margin: 8px 0 24px; padding: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.maintenance-feedback { color: var(--muted); line-height: 1.5; font-size: 14px; }
.maintenance-switch[aria-checked="true"], .devkit-pill.in-maintenance { background: var(--amber-soft); color: var(--amber); }
.maintenance-enabled .maintenance-label { color: var(--amber); }
.device-dialog > .maintenance-panel { padding: 24px; }
.maintenance-device-list { max-height: 240px; overflow-y: auto; }

/* Pool focus is visual only: every pool and its controls remain available. */
.pool-focus-button { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pool-focus-button:hover, .pool-focus-button[aria-pressed="true"] { color: var(--blue); }
.pool-focus-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.devkit-pool.pool-focused { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.pool-focused .devkit-pool-heading { background: var(--blue-soft); border-bottom-color: var(--blue); }
.devkit-pool { cursor: pointer; }
.devkit-pool.pool-muted { filter: grayscale(1); border-color: var(--line); background: var(--surface); }
.pool-muted .devkit-pool-heading { background: var(--surface); border-bottom-color: var(--line); }
.pool-muted .devkit-pool-heading > div, .pool-muted .devkit-table-scroll { opacity: .55; }
.pool-muted .devkit-pool-heading > .button { opacity: .65; }
.pool-muted:focus-within { outline: 2px solid var(--line-strong); outline-offset: 2px; }

.appliance-metadata-fields select, .appliance-role-config select { width: 190px; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid oklch(55% .02 225); background: oklch(24% .02 225); color: var(--surface); font: inherit; }
.appliance-metadata-fields { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.appliance-metadata-fields label, .appliance-role-config label { display: grid; gap: 7px; }
.appliance-metadata-fields small { flex-basis: 100%; font-weight: 400; color: oklch(74% .02 225); }
.appliance-role-config { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 20px 24px; border-bottom: 1px solid oklch(70% .02 225 / .18); }
.appliance-role-config label { font-weight: 700; }
.appliance-role-config p { flex-basis: 100%; margin: 0; color: oklch(74% .02 225); }