/* Фабрика контента — стили интерфейса.
   Внимание: сайт работает под CSP `style-src 'self'`, поэтому в разметке нет style="…";
   цветом, шириной и видимостью управляют только классы, <progress> и атрибут hidden. */

/* ───────── переменные ───────── */
:root {
  --bg: #f5f6f3;
  --surface: #ffffff;
  --ink: #1b302b;
  --muted: #5b6760;
  --faint: #6f7a73;
  --line: #e3e7e1;
  --line-soft: #edf0ea;
  --field-line: #c9d1ca;
  --green: #256653;
  --green-dark: #1c4f40;
  --light: #edf4ee;
  --bar: #588872;
  --warn-bg: #faf5e6;
  --warn-line: #e3d4a8;
  --warn-ink: #66491b;
  --bad: #9b2c20;
  --bad-bg: #fbeae7;
  --bad-line: #efc4be;
  --ok-bg: #e6f2ea;
  --ok-line: #bcd9c7;
  --ok-ink: #1c5a3c;
  --info-bg: #e9f0f6;
  --info-line: #c5d6e5;
  --info-ink: #274a69;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(20, 50, 40, 0.16);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ───────── основа ───────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[hidden] { display: none !important; }

h1 { margin: 6px 0 10px; font-size: 32px; line-height: 1.17; font-weight: 600; letter-spacing: -1px; overflow-wrap: anywhere; }
h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 650; }
p { margin: 6px 0 14px; }
a { color: var(--green); }
pre { margin: 6px 0 0; padding: 8px 10px; max-height: 240px; overflow: auto; background: #f7f9f6; border-radius: 6px; font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.eyebrow { margin: 0; color: var(--green); font-size: 10px; letter-spacing: 1.9px; font-weight: 700; }
.dot { color: #75a588; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { padding: 24px; text-align: center; }
.boot { padding: 60px 20px; text-align: center; color: var(--muted); }

:focus-visible { outline: 3px solid #7fb39a; outline-offset: 2px; }
h1:focus { outline: none; }

/* ───────── кнопки и поля ───────── */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:hover,
.button:hover { background: var(--green-dark); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button.secondary,
.button.secondary { background: #fff; color: var(--ink); border-color: var(--field-line); }
button.secondary:hover,
.button.secondary:hover { background: #f3f6f2; }
button.danger { background: var(--bad); }
button.danger:hover { background: #7e2118; }
button.small { min-height: 32px; padding: 5px 11px; font-size: 12px; }

.link-button,
.icon-button,
.th-button,
.toast-close {
  background: none;
  border: 0;
  color: inherit;
  min-height: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
}
.link-button { display: inline; color: var(--green); font-weight: 650; text-decoration: underline; }
.link-button:hover,
.icon-button:hover,
.th-button:hover,
.toast-close:hover { background: none; color: var(--green); }
.icon-button { color: var(--muted); padding: 8px; font-size: 18px; line-height: 1; }

.input {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
textarea.input { resize: vertical; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.hint { display: block; color: var(--muted); font-size: 12px; }
.hint-warn { color: var(--warn-ink); font-weight: 600; }
.form-error { margin: 8px 0 0; color: var(--bad); font-weight: 650; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 10px 0 8px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.check input,
.mode-option input { margin: 0; accent-color: var(--green); }
.extras { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.extras legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 650; }

/* ───────── каркас: меню слева, содержимое справа ───────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 240px;
  padding: 28px 18px 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--line);
}
.brand { padding: 0 6px; color: var(--ink); font-size: 30px; font-weight: 750; letter-spacing: -1.5px; text-decoration: none; }
.workspace-label { margin: 34px 10px 10px; color: var(--faint); font-size: 10px; letter-spacing: 1.4px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 9px; color: #46534c; font-weight: 500; text-decoration: none; }
.nav-link:hover { background: #f3f6f1; }
.nav-link.active { background: var(--light); color: var(--green); font-weight: 650; }
.nav-icon { width: 18px; text-align: center; }
.sidebar-bottom { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.me-info { min-width: 0; flex: 1; }
.me-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-info small { color: var(--muted); }

.avatar { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eaf0e6; color: var(--green); font-size: 13px; font-weight: 650; }
.av-0 { background: #e3eee6; color: #245f4a; }
.av-1 { background: #f1ebdc; color: #7a5a24; }
.av-2 { background: #e4ecf3; color: #2f5170; }
.av-3 { background: #f3e6e4; color: #8a3b30; }
.av-4 { background: #ebe6f1; color: #5a3f7a; }
.av-5 { background: #e1f0ee; color: #1f6760; }

.main { margin-left: 240px; min-width: 0; }
.topbar { height: 64px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #79a485; }
.page { max-width: 1500px; margin: 0 auto; padding: 32px 40px 48px; }
.heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.heading-text { min-width: 0; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.view > * + *,
.results > * + * { margin-top: 20px; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 32px; color: var(--faint); font-size: 11px; }

/* ───────── карточки, панели, метрики ───────── */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; overflow: hidden; }
.panel.flush { padding: 0; }
.panel-pad { padding: 22px 22px 14px; }
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.badge { flex: none; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.table-note { margin: 0; padding: 12px 22px 16px; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { display: block; margin: 6px 0 2px; font-size: 32px; font-weight: 550; line-height: 1.15; letter-spacing: -1px; overflow-wrap: anywhere; }
.metric-value.is-null { color: var(--muted); }
.metric-caption,
.metric-detail { color: var(--muted); font-size: 11px; line-height: 1.4; }
.metric-detail { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.bar-row { display: grid; grid-template-columns: minmax(100px, 170px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; margin: 12px 0; font-size: 13px; }
.bar-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 550; }
.bar-row a:hover { color: var(--green); text-decoration: underline; }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }

progress { width: 100%; height: 12px; border: 0; border-radius: 3px; overflow: hidden; background: #eaf0e8; }
progress::-webkit-progress-bar { background: #eaf0e8; }
progress::-webkit-progress-value { background: var(--bar); }
progress::-moz-progress-bar { background: var(--bar); }
.coverage progress { height: 16px; margin: 10px 0 14px; }
.coverage-label { margin: 0 0 6px; font-weight: 650; }

.kv { display: grid; margin: 12px 0 0; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.kv-row dt { color: var(--muted); }
.kv-row dd { margin: 0; font-weight: 650; text-align: right; }
.kv-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 28px; margin-top: 4px; }

/* ───────── карточки креаторов ───────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.creator-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.creator-card:hover { border-color: #9fc3b0; box-shadow: 0 4px 18px rgba(30, 80, 60, 0.1); }
.creator-card h2 { margin: 4px 0 0; font-size: 16px; }
.stat-line { display: flex; gap: 28px; margin: 10px 0 8px; }
.stat-line b { display: block; font-size: 24px; font-weight: 550; letter-spacing: -0.5px; }
.stat-line small { color: var(--muted); font-size: 11px; }
.creator-card .tags { margin-top: 6px; }
.creator-head,
.greeting-row { display: flex; align-items: center; gap: 16px; }
.creator-head-text { min-width: 0; }
.creator-head-text p { margin: 2px 0; }
.greeting h2 { font-size: 22px; }
.greeting p { margin: 2px 0 0; }
.back-link { display: inline-block; font-weight: 650; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ───────── таблицы ───────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: -3px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th,
td { padding: 11px 14px; text-align: left; vertical-align: middle; white-space: nowrap; }
th { background: #fafbf8; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: 0.5px; text-transform: uppercase; }
td { border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: #f8faf7; }
tbody tr:last-child td { border-bottom: 0; }
th.num,
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.cell-wrap { min-width: 180px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
tfoot th,
tfoot td { background: #fafbf8; border-top: 2px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.row-flagged { background: #fdf8e9; }
th[aria-sort="ascending"] .th-button,
th[aria-sort="descending"] .th-button { color: var(--green); }
.th-button { display: inline-flex; align-items: center; gap: 5px; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.sort-mark { font-size: 11px; opacity: 0.7; }
.person { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.person:hover { color: var(--green); text-decoration: underline; }
.code { font: 12px/1.4 var(--mono); letter-spacing: 0.2px; }
.sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.nil { color: var(--muted); font-size: 12px; }
.changed { font-weight: 650; }
.same { color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ───────── метки и плашки ───────── */
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 650; line-height: 1.3; white-space: nowrap; }
.tag-ok { background: #dff0e5; color: #19563a; }
.tag-warn { background: #fbefd2; color: #6e4b10; }
.tag-bad { background: #fbe3df; color: #8f2619; }
.tag-info { background: #e4edf6; color: #234667; }
.tag-muted { background: #eceee9; color: #46514a; }

.notice { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 11px 15px; border: 1px solid var(--warn-line); border-radius: 9px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; }
.notice-label { flex: none; font-size: 10px; font-weight: 750; letter-spacing: 0.8px; text-transform: uppercase; }
.notice-body { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.notice-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.notice-list { display: grid; gap: 8px; }
.notice-list + .panel-top,
.panel-top + .notice-list { margin-top: 4px; }

.empty-inline { margin: 8px 0; color: var(--muted); }
.plain-list { margin: 0; padding-left: 18px; }
.plain-list li { margin: 4px 0; }

/* ───────── четыре состояния экрана ───────── */
.state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 38px 20px; background: #fff; border: 1px dashed var(--field-line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.state-title { color: var(--ink); font-size: 16px; }
.state-text { max-width: 600px; margin: 0; overflow-wrap: anywhere; }
.state-error { background: #fff8f7; border-color: var(--bad-line); }
.state-error .state-title { color: var(--bad); }
.state-forbidden { background: #fffdf5; border-color: var(--warn-line); }
.state-loading { align-items: stretch; text-align: left; }
.state-head { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; }
.skeleton-rows { display: grid; gap: 10px; width: 100%; }
.skeleton { height: 16px; border-radius: 6px; background: linear-gradient(90deg, #edf0ea 25%, #f7f9f5 50%, #edf0ea 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton.short { width: 60%; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #c9d8cf; border-top-color: var(--green); border-radius: 50%; animation: spin 0.7s linear infinite; }
button .spinner { flex: none; border-color: rgba(255, 255, 255, 0.45); border-top-color: #fff; }
button.secondary .spinner { border-color: #c9d8cf; border-top-color: var(--green); }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .spinner { animation: none; }
}

/* ───────── фильтры, режим атрибуции ───────── */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.toolbar .field { flex: 1 1 160px; }
.toolbar .field.grow { flex: 2 1 240px; }
.toolbar-note { margin-left: auto; align-self: center; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 10px 14px; background: #eaf3ee; border: 1px solid #bcd6c6; border-radius: 9px; font-size: 13px; }
.filterbar-text { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.mode-switch { min-width: 0; margin: 0; padding: 12px 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.mode-switch legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.mode-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mode-option { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 13px; background: #fff; border: 1px solid var(--field-line); border-radius: 9px; cursor: pointer; }
.mode-option.is-active { background: var(--light); border-color: #94bba6; font-weight: 650; }
.mode-help { margin: 8px 0 0; }

/* ───────── загрузки ───────── */
.dropzone { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; background: #fafcf9; border: 2px dashed #b3c6ba; border-radius: var(--radius); cursor: pointer; }
.dropzone:focus-within,
.dropzone.is-over { background: var(--light); border-color: var(--green); }
.dropzone-title { font-size: 15px; font-weight: 650; }
.file-input { max-width: 100%; margin-top: 8px; }
.preview h3:first-child { margin-top: 4px; }
.count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.count-box { padding: 12px 14px; background: #fafbf8; border: 1px solid var(--line); border-radius: 10px; }
.count-box dt { color: var(--muted); font-size: 12px; }
.count-box dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; }
.count-box.is-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.fold { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; }
.fold > summary { padding: 11px 14px; font-weight: 650; cursor: pointer; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > p { margin: 0; padding: 10px 14px; }
td .fold { margin: 0; min-width: 160px; }
td .fold > summary { padding: 4px 10px; font-weight: 600; font-size: 12px; }
td .fold > div { padding: 8px 10px; }
.commit-note { flex: 1 1 280px; margin: 0; color: var(--warn-ink); font-weight: 600; }
.result-host { margin-top: 16px; }
.result-host > * + * { margin-top: 14px; }
.delta > * + * { margin-top: 16px; }

/* ───────── диалог причины и уведомления ───────── */
.dialog { width: min(480px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(10, 30, 20, 0.3); color: var(--ink); }
.dialog::backdrop { background: rgba(18, 36, 30, 0.5); }
.dialog-form { padding: 22px; }
.dialog-form h2 { margin: 0 0 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #1b302b; border-radius: 10px; box-shadow: var(--shadow); color: #fff; font-size: 13px; }
.toast-text { flex: 1; overflow-wrap: anywhere; }
.toast-bad { background: var(--bad); }
.toast-close { color: inherit; font-size: 18px; line-height: 1; padding: 0 4px; }
.toast-close:hover { color: #fff; }

/* ───────── экран входа ───────── */
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: #fff; }
.login-card { align-self: center; max-width: 540px; margin: auto; padding: 50px; }
.login-card h1 { font-size: 45px; letter-spacing: -2px; }
.login-card button { display: flex; margin: 18px 0 20px; }
.brandmark { margin-bottom: 55px; color: var(--green); font-size: 50px; font-weight: 750; }
.login-state { min-height: 3.2em; color: var(--muted); overflow-wrap: anywhere; }
.login-state a { font-weight: 650; }
.login-state-error { color: var(--bad); font-weight: 650; }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: center; margin: 20px; padding: 55px; overflow: hidden; background: #244e3e; border-radius: 20px; color: #d0dec8; }
.login-art::after { content: ""; position: absolute; right: -100px; bottom: -200px; width: 420px; height: 420px; border: 1px solid #6d927b; border-radius: 50%; box-shadow: 0 0 0 60px #ffffff04, 0 0 0 120px #ffffff04; }
.art-word { z-index: 1; font-size: clamp(32px, 4vw, 70px); font-weight: 650; letter-spacing: -3px; line-height: 1.2; }
.art-foot { position: absolute; bottom: 40px; font-size: 12px; opacity: 0.75; }

/* ───────── планшет и телефон ───────── */
@media (min-width: 1500px) {
  .page { padding-top: 44px; }
  .metrics { gap: 22px; }
  .metric { padding: 26px; }
}

@media (max-width: 1100px) {
  .sidebar { width: 200px; padding: 24px 12px 16px; }
  .main { margin-left: 200px; }
  .page { padding: 24px; }
  .topbar { padding: 0 24px; }
  .header-right { display: none; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  input,
  select,
  textarea,
  .input { font-size: 16px; }

  /* Меню — горизонтальная лента под логотипом; шапка остаётся при прокрутке */
  .sidebar { position: sticky; top: 0; right: auto; bottom: auto; left: auto; width: auto; padding: 10px 14px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand user" "nav nav"; align-items: center; gap: 2px 8px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { grid-area: brand; font-size: 24px; }
  .workspace-label,
  .me-info,
  .topbar { display: none; }
  .sidebar-bottom { grid-area: user; margin: 0; padding: 0; border: 0; }
  .avatar { width: 34px; height: 34px; font-size: 12px; }
  .nav { grid-area: nav; flex-direction: row; gap: 4px; padding: 4px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-link { flex: none; padding: 9px 13px; white-space: nowrap; }
  .nav-icon { display: none; }
  .main { margin-left: 0; }

  .page { padding: 20px 14px 36px; }
  .heading { flex-direction: column; gap: 12px; }
  .heading h1 { font-size: 26px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; }
  .panel { padding: 16px; }
  .panel-pad { padding: 16px 16px 10px; }
  .table-note { padding: 10px 16px 14px; }
  .metrics { gap: 10px; }
  .metric { padding: 14px; }
  .metric-value { font-size: 26px; }
  .toolbar { gap: 10px; padding: 12px; }
  .toolbar .field,
  .toolbar .field.grow { flex: 1 1 100%; }
  .toolbar-note { margin-left: 0; }
  .bar-row { grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 8px; }
  .stat-line { gap: 22px; }
  .creator-head,
  .greeting-row { align-items: flex-start; }
  .state { padding: 28px 14px; }
  .toasts { right: 10px; bottom: 10px; width: calc(100vw - 20px); }

  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { display: none; }
  .login-card { padding: 28px 20px; }
  .login-card h1 { font-size: 34px; }
  .brandmark { margin-bottom: 40px; }
}

.production-stack{display:grid;gap:20px}.production-panel{padding:24px}.production-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}.production-form label{display:grid;gap:6px;font-size:12px;color:#738078}.production-form input,.production-form select,.production-form textarea,.production-stack>input,.production-panel>textarea{width:100%;border:1px solid #dce4dd;border-radius:8px;padding:10px;background:white;color:#193c2d;font:inherit}.production-form textarea{min-height:90px}.production-form button{align-self:end}.production-form .small{grid-column:1/-1}.production-panel>textarea{min-height:160px}.production-panel p{white-space:pre-wrap;overflow-wrap:anywhere}.production-panel button{margin:4px}.production-panel a{overflow-wrap:anywhere}

/* Оформление по утверждённому визуальному образцу, 20.10.2026. */
:root { --bg:#f4efe4; --surface:#fcfaf4; --ink:#151c19; --muted:#77796f; --faint:#85867a; --line:#e7e0d3; --line-soft:#eee7db; --field-line:#d9cdb5; --green:#315f4e; --green-dark:#173d30; --light:#f1ead8; --bar:#315f4e; --warn-bg:#f6eee2; --warn-line:#e8dccb; --warn-ink:#8e3830; --gold:#c5aa68; }
body { background:#f4efe4; }
.main { background:linear-gradient(90deg,rgba(246,242,232,.94),rgba(246,242,232,.22)),url('/assets/landscape.png') right top / 1050px auto no-repeat; min-height:100vh; }
.sidebar { width:232px; padding:22px 20px 20px; background:linear-gradient(180deg,rgba(9,33,25,.97) 55%,rgba(9,33,25,.72)),url('/assets/landscape.png') 70% bottom / auto 450px no-repeat; border-right:1px solid #34483a; color:#e6e8df; box-shadow:inset 8px 0 0 rgba(255,255,255,.025); }
.brand { font-size:40px; letter-spacing:-2px; color:#f4f5ef; padding:0 10px; line-height:1.35; }
.dot { color:#659d85; }
.workspace-label { margin:0 10px 28px; font-size:13px; color:#abb5a8; font-weight:400; letter-spacing:1.1px; }
.nav { gap:7px; }
.sidebar .nav-link { min-height:49px; padding:10px 13px; color:#e0e4da; font-size:13px; font-weight:400; border:1px solid transparent; border-radius:9px; }
.sidebar .nav-link:hover { background:rgba(185,164,104,.12); }
.sidebar .nav-link.active { background:linear-gradient(110deg,rgba(192,170,106,.32),rgba(192,170,106,.23)); border-color:rgba(208,183,114,.33); box-shadow:inset 0 1px 0 #bba26430,0 2px 8px #0002; color:#fffdf3; font-weight:500; }
.nav-icon { width:26px; flex:none; color:var(--gold); font-size:27px; line-height:1; font-weight:400; }
.sidebar-bottom { border-color:#ac945351; padding:16px 5px 0; gap:10px; }
.sidebar-bottom .avatar { background:transparent; color:#d7bd77; border:1px solid #bba365; font-weight:400; }
.sidebar .me-info small { color:#b4bdaf; }
.sidebar .me-info strong { font-size:11px; font-weight:400; }
.sidebar .icon-button { color:#c5aa68; }
.main { margin-left:232px; }
.topbar { height:62px; padding:0 30px; background:rgba(250,247,239,.4); color:#272f28; }
.header-right { color:#202a25; }
.status-dot { background:#538c73; width:8px; height:8px; }
.page { padding:20px 30px 40px; max-width:1600px; }
.heading { margin-bottom:17px; min-height:95px; }
.heading h1 { font-size:46px; font-weight:750; letter-spacing:-1.6px; color:#0b100d; margin:2px 0 4px; }
.heading .eyebrow { font-size:12px; color:#776236; letter-spacing:1px; }
.heading .muted { font-size:14px; }
.workflow { display:flex; align-items:center; gap:17px; margin:0 0 23px; min-height:33px; color:#292e26; }
.workflow span { display:flex; align-items:center; gap:11px; font-size:24px; }
.workflow b { font-size:12px; font-weight:400; }
.workflow i { font-size:24px; font-style:normal; color:#b3a17c; }
.panel,.metric,.mode-switch { background:rgba(255,253,248,.77); border-color:#e8e1d4; box-shadow:0 3px 16px #6c572404; }
.panel { padding:18px; }
.mode-switch { padding:12px 18px; }
.mode-switch legend { color:#20251f; font-size:14px; }
.mode-option { border-radius:6px; background:#fffdf8a8; }
.mode-option.is-active { background:#f4eddd; border-color:#cdbb99; }
.mode-option input { accent-color:#8b713d; }
.view > * + *, .results > * + * { margin-top:12px; }
.plaque-host:empty { display:none; }
.metrics { gap:10px; }
.metric { position:relative; padding:16px 17px 12px; min-height:147px; overflow:hidden; }
.metric:before { content:'➤'; display:grid; place-items:center; position:absolute; left:13px; top:12px; width:48px; height:48px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#1b4b38,#0c2b20); box-shadow:0 2px 3px #213e2520; color:#d4b96e; font-size:25px; }
.metric:nth-child(2):before { content:'🛒'; font-size:22px; }
.metric:nth-child(3):before { content:'▤'; }
.metric:nth-child(4):before { content:'◇'; }
.metric:after { content:'▥'; position:absolute; right:15px; top:12px; color:#cbbb9828; font-size:55px; line-height:1; pointer-events:none; }
.metric-label { margin-left:60px; color:#30362e; z-index:1; }
.metric-value { margin:0 0 2px 56px; color:#111610; font-size:34px; font-weight:650; z-index:1; }
.metric-caption { margin-top:4px; }
.metric-detail { font-size:10px; }
.grid-2 { gap:12px; }
.panel h2 { font-size:16px; font-weight:700; }
progress,progress::-webkit-progress-bar { background:#e3e0d6; }
progress::-webkit-progress-value { background:linear-gradient(90deg,#244f3d,#3c6b56); }
.notice { background:#f6eee3a8; }
.login { background:#f3eee3; }
.login-art { background:linear-gradient(0deg,#10362cd9,#10362c36),url('/assets/landscape.png') center / cover; }
.login-card .brandmark { background:#163c2e; color:#dcc385; }
@media(min-width:1600px){ .heading h1 { font-size:50px; } }
@media(max-width:1100px) and (min-width:761px){ .sidebar{width:205px;padding:22px 12px}.brand{font-size:35px}.main{margin-left:205px}.page{padding:20px}.heading h1{font-size:37px}.workflow{gap:10px}.workflow span{gap:5px}.workflow b{font-size:11px}.metric-value{margin-left:49px}.metric-label{margin-left:49px}.metric:before{width:40px;height:40px} }
@media(max-width:760px){ .sidebar{position:sticky;width:auto;padding:10px 14px 0;display:grid;background:#102c22}.main{margin-left:0}.brand{font-size:28px;padding:0}.workspace-label{display:none}.sidebar .nav-link{min-height:38px;padding:7px 10px;font-size:12px}.nav-icon{font-size:20px;width:20px}.sidebar-bottom{padding:0;border:0}.sidebar .me-info strong{font-size:10px}.page{padding:20px 16px 32px}.heading{min-height:0;gap:8px}.heading h1{font-size:32px;letter-spacing:-1px}.heading .muted{font-size:12px}.workflow{gap:7px;flex-wrap:wrap;margin-bottom:18px}.workflow span{gap:5px;font-size:19px}.workflow b{font-size:10px}.workflow i{font-size:17px}.metric{padding:12px;min-height:145px}.metric:before{width:32px;height:32px;left:10px;top:12px;font-size:18px}.metric-label{margin-left:36px;font-size:10px}.metric-value{margin-left:36px;font-size:25px;margin-top:4px}.metric:after{display:none}.metric-caption{font-size:10px}.metric-detail{font-size:9px}.main{background-size:900px auto}.topbar{display:none} }
.metric:before { content:''; background-image:url('/assets/cursor.svg'),radial-gradient(circle at 30% 30%,#1b4b38,#0c2b20); background-position:center; background-size:26px 26px,100% 100%; background-repeat:no-repeat; }
.metric:nth-child(2):before { content:''; background-image:url('/assets/cart.svg'),radial-gradient(circle at 30% 30%,#1b4b38,#0c2b20); }
.metric:nth-child(3):before { content:''; background-image:url('/assets/orders.svg'),radial-gradient(circle at 30% 30%,#1b4b38,#0c2b20); }
.metric:nth-child(4):before { content:''; background-image:url('/assets/box.svg'),radial-gradient(circle at 30% 30%,#1b4b38,#0c2b20); }
.nav-link[data-section="overview"] .nav-icon,.nav-link[data-section="stats"] .nav-icon { font-size:0; height:26px; background:url('/assets/bars.svg') center/26px no-repeat; }
@media(max-width:760px){.metric:before{background-size:21px 21px,100% 100%}}
.main { background-image:linear-gradient(180deg,rgba(246,242,232,.08) 0,rgba(246,242,232,.5) 230px,#f4efe4 430px),linear-gradient(90deg,#f4efe4 0,rgba(246,242,232,.15) 85%),url('/assets/landscape.png'); background-position:right top; background-size:auto,auto,760px auto; background-repeat:no-repeat; background-color:#f4efe4; }
.brand { font-size:36px; letter-spacing:-1.6px; padding:0 8px; }
@media(max-width:760px){.brand{font-size:28px;padding:0}.main{background-size:auto,auto,650px auto}}