@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

: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);
  --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); }

.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; gap: 13px; 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: grid; padding-left: 12px; border-left: 1px solid oklch(65% .02 225 / .25); }
.brand strong { font-size: 1rem; }
.brand small { color: oklch(70% .02 225); font-size: var(--text-caption); }
.nav-label { color: oklch(68% .02 225); font: 700 var(--text-caption) var(--font); letter-spacing: .09em; text-transform: uppercase; }
.sidebar nav { padding: 20px 10px; }
.nav-label { padding: 0 9px 8px; }
.nav-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; border: 0; padding: 0 10px; background: transparent; color: oklch(76% .02 225); font-size: var(--text-secondary); text-align: left; }
.nav-item:hover { color: var(--surface); }
.nav-item.active { background: oklch(25% .025 225); color: var(--surface); box-shadow: inset 2px 0 var(--orange); }
.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; }
.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); }
#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; }
.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; }
#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; }
}

@media (max-width: 640px) {
  :root { --sidebar: 0px; }.shell { display: block; }.sidebar { width: 100%; height: 58px; min-height: 0; inset: auto 0 0; flex-direction: row; }.brand, .sidebar-foot { display: none; }.sidebar nav { width: 100%; display: flex; justify-content: space-around; padding: 6px; }.nav-label { display: none; }.nav-item { width: auto; min-height: 44px; }.workspace { padding-bottom: 58px; }.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; }
}

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