:root {
  --bg:#f6f7fb;
  --card:#fff;
  --text:#172033;
  --muted:#647084;
  --line:#dde3ee;
  --primary:#1f5eff;
  --primary-dark:#1648c9;
  --danger:#b42318;
  --success:#067647;
  --shadow:0 12px 28px rgba(20,32,55,.06);
  --radius:18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
button, input, textarea, select { font: inherit; }
button, .as-link {
  border:0;
  border-radius:12px;
  padding:11px 16px;
  font-weight:750;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  text-align:center;
}
button:disabled { opacity:.65; cursor:wait; }

.topbar {
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 28px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:5;
}
.brand a { font-weight:800; color:var(--text); font-size:18px; white-space:nowrap; }
.topnav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.topnav a { font-weight:650; color:var(--text); }
.user-pill { background:#eef2ff; color:#243b7a; border-radius:999px; padding:6px 10px; font-size:13px; white-space:nowrap; }
.link-button { background:none; color:var(--primary); padding:0; min-height:auto; }

.container { max-width:1280px; margin:28px auto; padding:0 20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-bottom:22px; }
.login-card { max-width:420px; margin:80px auto; }
h1,h2 { margin:0 0 12px; line-height:1.15; }
h1 { font-size:30px; }
h2 { font-size:22px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.hidden { display:none !important; }

label { display:block; font-weight:650; margin:14px 0 6px; }
input, textarea, select { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; min-height:44px; }
textarea { resize:vertical; min-height:220px; }
input:focus, textarea:focus, select:focus { outline:3px solid rgba(31,94,255,.16); border-color:var(--primary); }
.primary { background:var(--primary); color:#fff; margin-top:16px; }
.secondary { background:#eef2ff; color:#243b7a; margin-top:16px; }
.danger { background:#fff0f0; color:var(--danger); border:1px solid #ffd1d1; margin-top:16px; }
.small-btn { padding:7px 10px; margin-top:0; font-size:13px; min-height:36px; }

.grid.two { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:22px; align-items:start; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checks { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; }
.checks label { margin:0; font-weight:500; display:flex; align-items:center; gap:8px; }
.checks input { width:auto; min-height:auto; }
.actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.actions.left { justify-content:flex-start; }
.header-line { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.compact-header { align-items:center; }

.alert { background:#fff0f0; color:var(--danger); border:1px solid #ffd1d1; padding:12px 14px; border-radius:12px; margin:12px 0; overflow-wrap:anywhere; }
.alert.success { background:#ecfdf3; color:var(--success); border-color:#abefc6; }
.alert.error { background:#fff0f0; color:var(--danger); border-color:#ffd1d1; }

.job-list { display:grid; gap:10px; }
.job-item { border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; gap:4px; color:var(--text); background:#fff; }
.job-item span { color:var(--muted); }

.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px; }
.summary div { background:#f7f9ff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.summary span { display:block; color:var(--muted); font-size:14px; }
.summary strong { display:block; font-size:22px; margin-top:4px; overflow-wrap:anywhere; }

.console { background:#101828; color:#d1fadf; padding:16px; border-radius:14px; min-height:260px; max-height:520px; overflow:auto; white-space:pre-wrap; font-family:"JetBrains Mono", Consolas, monospace; font-size:13px; line-height:1.5; }
.live-indicator { color:var(--muted); font-size:13px; align-self:center; }

.table-wrap { overflow:auto; -webkit-overflow-scrolling:touch; border-radius:14px; border:1px solid var(--line); }
table { border-collapse:collapse; width:100%; min-width:1100px; background:#fff; }
th, td { border-bottom:1px solid var(--line); padding:11px 10px; vertical-align:middle; text-align:left; }
th { background:#f7f9ff; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:#344054; }
tr:last-child td { border-bottom:0; }
.error-cell { color:var(--danger); max-width:260px; overflow-wrap:anywhere; }
.table-wrap.compact table { min-width:760px; }
.table-wrap.compact th, .table-wrap.compact td { padding:9px 8px; }
.mobile-hint { display:none; color:var(--muted); font-size:13px; margin:8px 0 0; }

@media (max-width: 900px) {
  .topbar { min-height:auto; padding:14px 16px; align-items:flex-start; flex-direction:column; gap:10px; }
  .topnav { width:100%; justify-content:flex-start; gap:10px; }
  .topnav a, .topnav form, .user-pill { font-size:14px; }
  .topnav a { background:#f7f9ff; border:1px solid var(--line); border-radius:999px; padding:7px 10px; }
  .grid.two, .summary { grid-template-columns:1fr; }
  .header-line { flex-direction:column; }
  .actions { justify-content:flex-start; }
  .container { margin:18px auto; padding:0 14px; }
}

@media (max-width: 640px) {
  body { background:#fff; }
  .container { margin:12px auto; padding:0 10px calc(16px + env(safe-area-inset-bottom)); }
  .card { border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:none; }
  .login-card { margin:26px auto; }
  h1 { font-size:24px; }
  h2 { font-size:19px; }
  .brand a { font-size:17px; }
  .topbar { position:static; padding:12px 14px; }
  .topnav { gap:8px; }
  .user-pill { order:10; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .form-row { grid-template-columns:1fr; gap:0; }
  textarea { min-height:260px; rows:unset; }
  .checks { display:grid; grid-template-columns:1fr; gap:10px; }
  .actions, .actions.left { display:grid; grid-template-columns:1fr; width:100%; }
  .actions > *, .actions.left > *, button, .as-link { width:100%; }
  .primary, .secondary, .danger { margin-top:10px; }
  .summary { gap:8px; }
  .summary div { padding:12px; }
  .summary strong { font-size:20px; }
  .console { min-height:220px; max-height:55vh; padding:12px; font-size:12px; border-radius:12px; }
  .mobile-hint { display:block; }

  /* Таблицы на телефоне превращаются в карточки. */
  .table-wrap { overflow:visible; border:0; border-radius:0; }
  table, .table-wrap.compact table { min-width:0; width:100%; border-collapse:separate; border-spacing:0 10px; background:transparent; }
  thead { display:none; }
  tbody, tr, td { display:block; width:100%; }
  tr { background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px 10px; }
  td { border-bottom:0; padding:8px 0; display:grid; grid-template-columns:minmax(118px, 42%) minmax(0, 1fr); gap:10px; align-items:start; }
  td::before { content:attr(data-label); color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
  td:empty::after { content:'—'; color:var(--muted); }
  .error-cell { max-width:none; }
}

@media (max-width: 380px) {
  td { grid-template-columns:1fr; gap:2px; }
  .topnav a { width:100%; text-align:center; }
}