:root {
  --font-sans: 'Golos Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-alt: #F7F8FA;
  --text: #15171C;
  --text-2: #3D424D;
  --text-3: #5B6170;
  --border: #E2E5EA;
  --border-soft: #EEF0F3;
  --border-ctl: #D5D9E0;
  --border-input: #C7CCD4;
  --accent: #2547D0;
  --accent-hover: #1C389F;
  --accent-soft: #EEF1FB;
  --accent-tint: #F3F5FD;
  --accent-line: #C9D2F3;
  --accent-ink: #1E2A5A;
  --danger: #B42318;
  --danger-fg: #9F1F14;
  --danger-bg: #FDEBEA;
  --danger-line: #F1B7B1;
  --ok-fg: #0F5C2B;
  --ok-bg: #E3F3E8;
  --ok-line: #B6DEC3;
  --warn-fg: #8A4300;
  --warn-bg: #FFF1E0;
  --idle-fg: #3F4552;
  --idle-bg: #EEF0F3;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --gap: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font-sans); color: var(--text); background: var(--bg); min-height: 100vh; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, p, dl, dd, ul, ol { margin: 0; }
ul.plain { padding: 0; list-style: none; }
pre { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--text-2); overflow-x: auto; white-space: pre-wrap; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nowrap-form, form.inline { display: inline; }

/* header */
header.top { background: var(--surface); border-bottom: 1px solid var(--border); }
.top-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 44px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { color: var(--text); }
.nav-main { display: flex; gap: 4px; margin-left: 12px; }
.nav-main a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm); color: var(--text-3); font-weight: 500; text-decoration: none; font-size: 15px; }
.nav-main a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-3); }
.userbox form { display: inline; }

main.wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: var(--gap); }

/* controls */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-ctl); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { color: var(--text); border-color: var(--border-input); }
.button.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover, button.primary:hover { background: var(--accent-hover); color: #fff; }
.button.lg, button.lg { min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); font-size: 16px; }
.button.link, button.link { border-color: transparent; background: transparent; color: var(--accent); }
.button.outline { border-color: var(--accent); color: var(--accent); }
button.danger, .button.danger { border-color: #E8B4AE; color: var(--danger-fg); }
button.danger-solid, .button.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger-solid:hover, .button.danger-solid:hover { color: #fff; background: #8f1c12; }
button.ok { border-color: var(--ok-line); color: var(--ok-fg); }
button:disabled { background: var(--accent-line); border-color: var(--accent-line); color: #1C2E7A; cursor: default; }
button.sm { min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 500; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

label { display: block; font-size: 15px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .hint { font-size: 13px; font-weight: 400; color: var(--text-3); }
input[type="text"], input[type="password"], input:not([type]) { min-height: 46px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-input);
  font: inherit; font-size: 16px; color: var(--text); background: #fff; width: 100%; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; cursor: pointer; }
label.check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* cards and panels */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel h2 { font-size: 20px; font-weight: 600; }
.row-split { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.row-split > .grow { flex: 999 1 560px; min-width: 0; }
.row-split > .side { flex: 1 1 300px; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head h1 { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.page-head p.sub { margin-top: 6px; font-size: 16px; color: var(--text-3); }
.count { font-size: 15px; color: var(--text-3); margin-bottom: 20px; }
.count strong { color: var(--text); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card h2 { font-size: 19px; line-height: 1.3; font-weight: 600; }
.card .summary { font-size: 15px; line-height: 1.5; color: var(--text-2); flex-grow: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.card-foot .slug { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); overflow-wrap: anywhere; }
.empty { font-size: 16px; color: var(--text-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #F0F2F5; color: #4B5160; }

/* status chips */
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--idle-bg); color: var(--idle-fg); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8A909C; }
.status-running { background: var(--ok-bg); color: var(--ok-fg); }
.status-running::before { background: #17803D; }
.status-starting, .status-stopping { background: var(--warn-bg); color: var(--warn-fg); }
.status-starting::before, .status-stopping::before { background: #D97706; }
.status-error { background: var(--danger-bg); color: var(--danger-fg); }
.status-error::before { background: #C2321F; }
.status.lg { font-size: 14px; padding: 6px 12px; }
.badge { display: inline-flex; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--idle-bg); color: var(--idle-fg); }
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); }

/* notices */
.notice { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--accent-line); background: var(--accent-tint); border-radius: var(--radius-md); padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--accent-ink); }
.notice svg { flex: none; margin-top: 1px; }
.alert, .error-box { border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: var(--radius-md); padding: 12px 16px; font-size: 15px; color: var(--danger-fg); }
.alert-block { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.alert-block strong { font-size: 16px; }
.alert-block pre { background: #fff; border-color: var(--danger-line); }
.error { color: var(--danger-fg); }
.report { border: 1px solid var(--accent-line); background: var(--accent-tint); border-radius: var(--radius-md); padding: 14px 16px; font-size: 15px; color: var(--accent-ink); }
.report h3 { margin: 0 0 8px; font-size: 16px; }
.report ul { margin: 0; padding-left: 20px; }
.errlist { border: 1px solid var(--danger-line); border-radius: var(--radius-md); overflow: hidden; }
.errlist .head { padding: 10px 14px; background: var(--danger-bg); font-size: 14px; font-weight: 600; color: var(--danger-fg); }
.errlist li { padding: 12px 14px; border-top: 1px solid #F6D3CF; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--text-2); }
.errlist li .mono { font-size: 14px; font-weight: 500; color: var(--text); }

/* prototype page */
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; text-decoration: none; }
.hero { padding: 28px; gap: 18px; }
.hero-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero h1 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.hero .lead { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.actions form { display: inline; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; }
.facts > div { display: flex; gap: 6px; }
.facts dt { color: var(--text-3); }
.facts dd .mono { font-size: 14px; }
.prose { font-size: 16px; line-height: 1.6; color: #2A2E37; white-space: pre-wrap; }
.panel.big { padding: 28px; gap: 14px; }
.panel.big h2 { font-size: 21px; }
.panel.small { padding: 22px; gap: 12px; }
.panel.small h2 { font-size: 18px; }
.details { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.details dt { color: var(--text-3); }
aside.side { display: flex; flex-direction: column; gap: 16px; }

/* tables */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; color: var(--text-3); font-size: 14px; padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
td .name { font-weight: 600; }
td .sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
td.right, th.right { text-align: right; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.row-actions form { display: flex; gap: 8px; align-items: center; }
.row-actions input[type="password"] { min-height: 44px; width: 170px; font-size: 14px; }
table.wide-760 { min-width: 760px; }
table.wide-900 { min-width: 900px; }

.subnav { display: flex; gap: 4px; background: #E9ECF1; padding: 4px; border-radius: var(--radius-md); }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); color: #4B5160; font-weight: 500; font-size: 15px; text-decoration: none; }
.subnav a[aria-current="page"] { background: #fff; color: var(--text); font-weight: 600; }
.meter { height: 10px; border-radius: 999px; background: #E6EAF6; overflow: hidden; }
.meter > div { height: 100%; background: var(--accent); border-radius: 999px; }

/* centered pages: login, waiting, gate */
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.login-box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 24px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.login-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.login-form h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.login-form .sub { font-size: 15px; color: var(--text-3); }
.login-form button[type="submit"] { min-height: 48px; border-radius: var(--radius-md); background: var(--accent); border-color: var(--accent); color: #fff; font-size: 16px; }
.login-form button[type="submit"]:hover { background: var(--accent-hover); color: #fff; }
.login-foot { text-align: center; font-size: 14px; color: var(--text-3); }
.wait-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.wait-brand { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 15px; }
.wait-card h1 { font-size: 26px; line-height: 1.25; font-weight: 700; margin-bottom: 8px; }
.wait-card h1.is-error { color: var(--danger-fg); }
.wait-card .lead { font-size: 16px; color: var(--text-3); }
.progress { height: 8px; border-radius: 999px; background: #E6EAF6; overflow: hidden; }
.progress > div { width: 40%; height: 100%; border-radius: 999px; background: var(--accent); animation: farm-slide 1.6s ease-in-out infinite; }
@keyframes farm-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.steps { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.steps li { display: flex; align-items: center; gap: 12px; }
.steps li.pending { color: #6B7180; }
.steps li.current span { font-weight: 600; }
.gate { width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gate h1 { font-size: 28px; line-height: 1.25; font-weight: 700; }
.gate p.lead { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.gate .host { font-family: var(--font-mono); font-size: 14px; color: var(--text-3); }
.gate .icon-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--idle-bg); display: flex; align-items: center; justify-content: center; }
.spin { animation: farm-spin 1.1s linear infinite; }
@keyframes farm-spin { to { transform: rotate(360deg); } }
.budget-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }

/* stop dialog */
.overlay { position: fixed; inset: 0; z-index: 10; background: rgba(21, 23, 28, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dialog { width: 100%; max-width: 480px; background: #fff; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 60px rgba(21, 23, 28, 0.25); }
.dialog .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--warn-bg); display: flex; align-items: center; justify-content: center; }
.dialog h1 { font-size: 22px; line-height: 1.3; font-weight: 700; }
.dialog p { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.dialog .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.dialog .btns form { display: inline; }

@media (prefers-reduced-motion: reduce) { .progress > div, .spin { animation: none !important; } }

@media (max-width: 480px) {
  .userbox > span { display: none; }
}

@media (max-width: 600px) {
  .top-inner { padding: 12px 16px; }
  .top-inner { gap: 4px 12px; }
  .brand { order: 1; flex: 1 1 auto; }
  .userbox { order: 2; margin-left: auto; }
  .nav-main { margin-left: 0; order: 3; width: 100%; }
  main.wrap { padding: 24px 16px 48px; }
  .page-head h1 { font-size: 28px; }
  .hero { padding: 20px; }
  .hero h1 { font-size: 26px; }
  .panel.big { padding: 20px; }
  .login-form, .wait-card { padding: 24px; }
  .actions > a.button, .actions > form, .actions > form > button { width: 100%; }
  .dialog .btns .button, .dialog .btns button, .dialog .btns form { width: 100%; }
}

.live { display: contents; }