:root {
  --bg: #f4f5fb; --card: #fff; --line: #e4e6f0; --line2: #f0f1f6; --ink: #181a24;
  --muted: #545a70; --accent: #5b4bdb; --accent-ink: #3d2fc0; --accent-bg: #eeebff;
  --warn-bg: #fffaf0; --warn-line: #f3dfb2; --warn-ink: #8a5a00;
  --bad-bg: #fdf1f1; --bad-line: #f1c9c9; --bad-ink: #9b2323;
  --ok: #1f9d6b; --ok-ink: #11683f; --navy: #2b2f6b;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.good { color: var(--ok-ink); }
h1 { margin: 0; font-size: 26px; line-height: 1.2; }
h2 { margin: 0; font-size: 16px; }
p { margin: 0; }

/* Top bar */
.top { background: var(--card); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 24px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand em { font-style: normal; color: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tab { padding: 8px 12px; border-radius: 8px; color: var(--muted); }
.tab:hover { background: var(--bg); text-decoration: none; }
.tab.on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.top-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); color: var(--ink); }
.avatar { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu .menu-body { position: absolute; right: 0; top: 40px; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 200px; box-shadow: 0 10px 30px rgba(24, 26, 36, .12); }
.menu-body a, .menu-body button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; }
.menu-body a:hover, .menu-body button:hover { background: var(--bg); text-decoration: none; }

/* Buttons */
.btn, .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.btn { background: var(--accent); color: #fff; border: 0; }
.btn:hover { background: var(--accent-ink); text-decoration: none; }
.btn2 { background: var(--card); color: var(--ink); border: 1px solid #d9dceb; font-weight: 500; }
.btn2:hover { background: var(--bg); text-decoration: none; }
.btn.dark { background: var(--ink); }
.btn[disabled] { background: #b9b4ea; cursor: not-allowed; }

/* Layout */
.page { max-width: 1280px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.split > .main { flex: 3 1 520px; min-width: 0; }
.split > .side { flex: 2 1 320px; min-width: 0; }
.split > .list-col { flex: 1 1 340px; max-width: 440px; min-width: 0; }
.split > .detail-col { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.card.flush { padding: 0; overflow: hidden; }
.card.stack { display: flex; flex-direction: column; gap: 14px; }
.card-h { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line2); }
.stat .l { color: var(--muted); }
.stat .v { font-size: 30px; font-weight: 600; margin: 4px 0; }
.stat .n { color: var(--muted); font-size: 13px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.kv:last-child { border-bottom: 0; }
.kv > :first-child { color: var(--muted); }

/* Notices */
.notice { border-radius: 10px; padding: 12px 16px; border: 1px solid; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.warn b { color: var(--warn-ink); }
.notice.bad { background: var(--bad-bg); border-color: var(--bad-line); }
.notice.bad b { color: var(--bad-ink); }
.notice.ok { background: #effaf4; border-color: #bfe6d1; }
.notice.info { background: var(--accent-bg); border-color: #d9d3ff; }

/* Job list */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line2); }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.chip:hover { text-decoration: none; background: var(--bg); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.jr { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line2); color: var(--ink); }
.jr:last-child { border-bottom: 0; }
.jr:hover { background: #fafaff; text-decoration: none; }
.jr.sel { background: #f6f4ff; box-shadow: inset 3px 0 0 var(--accent); }
.jr .r1 { flex: 1; min-width: 0; }
.jr .t { display: block; font-weight: 600; }
.jr .s { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.jr .time { color: var(--muted); font-size: 13px; font-family: var(--mono); white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: #8d93a8; }
.dot.waiting { background: #e0a100; } .dot.booting { background: var(--accent); }
.dot.running, .dot.succeeded { background: var(--ok); } .dot.failed { background: #c43d3d; }
.empty { padding: 28px 18px; color: var(--muted); text-align: center; }

/* Badges */
.badge { display: inline-block; border-radius: 999px; padding: 4px 11px; font-weight: 600; font-size: 12px; white-space: nowrap; background: #eceef5; color: #4a5068; }
.badge.waiting { background: #fff4dc; color: var(--warn-ink); }
.badge.booting, .badge.running { background: var(--accent-bg); color: var(--accent-ink); }
.badge.succeeded { background: #e3f6ec; color: var(--ok-ink); }
.badge.failed { background: #fde8e8; color: var(--bad-ink); }

/* Timeline */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; }
.ic { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: #d6d9e6; }
.ic.done { background: var(--ok); } .ic.now { background: #e0a100; } .ic.failed { background: #c43d3d; }
.step .st { flex: 1; min-width: 0; }
.step .a { font-weight: 600; }
.step.todo .a { color: var(--muted); }
.step .b { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }

/* Tables */
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 600px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 10px 18px; background: #f8f9fc; font-size: 13px; white-space: nowrap; }
td { padding: 12px 18px; border-top: 1px solid var(--line2); vertical-align: top; }
th.right, td.right { text-align: right; }

/* Charts (inline SVG) */
.bar { display: block; width: 100%; height: 12px; border-radius: 6px; margin: 12px 0; }
.bar.tall { height: 40px; border-radius: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 13px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.c1 { background: var(--navy); fill: var(--navy); } .c2 { background: #4f56a8; fill: #4f56a8; }
.c3 { background: #9aa0d8; fill: #9aa0d8; } .c4 { background: var(--accent); fill: var(--accent); }
.c5 { background: #c9c4f7; fill: #c9c4f7; } .c6 { background: #7a6ee6; fill: #7a6ee6; }
.chart { display: block; width: 100%; height: 200px; margin-top: 16px; }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.parts .v { font-family: var(--mono); font-size: 20px; margin-top: 4px; }

/* Forms */
.amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.amounts label { flex: 1 1 90px; }
.amounts input { position: absolute; opacity: 0; pointer-events: none; }
.amounts span { display: block; text-align: center; border: 1px solid #d9dceb; border-radius: 10px; padding: 12px; font-weight: 600; cursor: pointer; }
.amounts input:checked + span { border: 2px solid var(--accent); background: #f6f4ff; color: var(--accent-ink); padding: 11px; }
.amounts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.field input { min-height: 40px; border: 1px solid #d9dceb; border-radius: 8px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--card); }
.field input:disabled, .search input:disabled { background: var(--bg); color: var(--muted); }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.controls .field > span:first-child { color: var(--ink); }
fieldset.allow { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
fieldset.allow legend { padding: 0 6px; }
.check { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line2); }
.search input[type=search] { flex: 1 1 260px; min-width: 0; min-height: 40px; border: 1px solid #d9dceb; border-radius: 8px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--card); }
.notice.flat { border-radius: 0; border-width: 0 0 1px; }
.loglines { padding: 8px 0; font-size: 12.5px; line-height: 1.6; overflow-x: auto; }
.loglines > div { display: flex; gap: 14px; padding: 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.loglines > div:hover { background: #fafaff; }
.loglines .ln { color: var(--muted); min-width: 5ch; text-align: right; flex: none; user-select: none; }
.code { background: #14161f; color: #e6e8f0; border-radius: 10px; padding: 14px 16px; font-family: var(--mono); font-size: 13px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.code .del { background: #3a1d22; color: #ffb3b3; display: block; }
.code .add { background: #163626; color: #a8f0c6; display: block; }

/* Sign-in */
.signin { display: flex; flex-wrap: wrap; min-height: 100vh; }
.signin .left { flex: 1 1 480px; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 48px clamp(24px, 8vw, 120px); }
.signin .right { flex: 1 1 380px; background: var(--accent-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 48px 24px; }
.signin h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.signin .lead { color: var(--muted); font-size: 17px; max-width: 520px; }
.signin .hero { width: 96px; height: 96px; }
.signin .card { width: min(420px, 100%); }

@media (max-width: 640px) {
  .top { padding: 10px 16px; }
  .page { padding: 16px; }
  .top-right { margin-left: 0; }
  .stat .v { font-size: 24px; }
}

/* Public landing page */
.lnav { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 24px; }
.lnav nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.lnav nav a { color: var(--muted); font-weight: 500; }
.landing { display: block; }
.landing h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.01em; }
.landing h3 { margin: 0 0 6px; font-size: 16px; }
.landing .lead { color: var(--muted); font-size: 17px; max-width: 720px; }
.landing .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.big, .btn2.big { min-height: 48px; padding: 0 22px; font-size: 15px; }
.eyebrow, .label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); }
.hero { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) 24px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero-text { flex: 1 1 520px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero-text h1 { font-size: clamp(36px, 5.5vw, 60px); line-height: 1.04; letter-spacing: -.02em; }
.hero-text h1 span { display: block; color: var(--accent); }
.hero-side { flex: 1 1 360px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.strip { padding: 0 max(0px, calc((100% - 1200px) / 2)); background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; }
.strip > div { background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.strip b { font-size: 26px; color: var(--accent-ink); }
.strip span { color: var(--muted); font-size: 13px; }
.sec { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 24px; display: flex; flex-direction: column; gap: 18px; }
.sec.alt { max-width: none; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec.alt > * { width: 100%; max-width: 1152px; margin-left: auto; margin-right: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); gap: 1px; margin-top: 10px; }
.tile { background: var(--card); padding: 24px; }
.tile p { color: var(--muted); }
.tile.soon { background: #faf9ff; }
.tag { display: inline-block; margin-left: 6px; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; background: var(--accent-bg); color: var(--accent-ink); vertical-align: middle; }
.notyet { border: 1px dashed #cfd2e3; border-radius: 14px; padding: 18px 22px; }
.notyet ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.howto { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.howto li { display: flex; gap: 14px; }
.howto .n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.howto p { color: var(--muted); overflow-wrap: anywhere; }
.sub { margin-top: 24px !important; }
.compare td:first-child { color: var(--muted); }
.compare td:nth-child(2), .compare th:nth-child(2) { background: #f6f4ff; font-weight: 600; }
.about { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.about > div:first-child { flex: 2 1 480px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.about p { max-width: 720px; }
.addr { flex: 1 1 280px; }
address { font-style: normal; line-height: 1.6; }
.final { text-align: center; padding: clamp(56px, 8vw, 96px) 24px; background: var(--accent-bg); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.final .cta { justify-content: center; }

/* Footer */
.foot { border-top: 1px solid var(--line); background: var(--card); padding: 32px 24px; margin-top: 24px; }
.landing + .foot { margin-top: 0; }
.foot-in { max-width: 1200px; margin: 0 auto 20px; display: flex; flex-wrap: wrap; gap: 24px 64px; }
.foot-in > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; color: var(--muted); }
.foot nav { display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.foot nav a { color: var(--muted); }
.foot > p { max-width: 1200px; margin: 0 auto; }

/* Legal pages */
.legal { max-width: 760px; width: 100%; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; }
.legal h2 { margin-top: 14px; font-size: 18px; }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 640px) {
  .lnav { padding: 10px 16px; }
  .lnav nav { order: 3; margin-left: 0; width: 100%; }
  .lnav .btn { margin-left: auto; }
  .hero, .sec { padding-left: 16px; padding-right: 16px; }
  .foot { padding: 24px 16px; }
}

/* Job metrics (line charts) */
.card-h0 { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; }
.mcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.mchart { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mchart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mchart .plot { position: relative; padding-left: 44px; }
.mchart svg { display: block; width: 100%; height: 140px; overflow: visible; }
.mchart .ymax, .mchart .ymin { position: absolute; left: 0; width: 38px; text-align: right; font-size: 11px; color: var(--muted); }
.mchart .ymax { top: -6px; } .mchart .ymin { bottom: -6px; }
.mchart .xaxis { display: flex; justify-content: space-between; padding-left: 44px; font-size: 11px; }
.mchart .grid { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mchart .base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mchart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mchart .ln.s1 { stroke: var(--accent); } .mchart .ln.s2 { stroke: #eb6834; }
.mchart .area.s1 { fill: var(--accent); fill-opacity: .12; }
.sw.s1 { background: var(--accent); } .sw.s2 { background: #eb6834; }
.mchart .hit { fill: transparent; }
.mchart .xh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mchart .tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 8px; white-space: nowrap; pointer-events: none; z-index: 2; }
.mchart details summary { cursor: pointer; }
table.mini td, table.mini th { padding: 6px 12px; }