/* Палитра общая с MES ТММ и CRM: значения оттуда, имена свои — переименование
   в `--color-*` задело бы весь файл, а на экране не изменило бы ничего. */
:root { --bg: #f4f6f8; --panel: #fff; --surface-2: #f8fafc; --ink: #1c2430; --muted: #6b7684;
        --line: #dfe4ea; --border-strong: #c2cad3;
        --accent: #1f6feb; --accent-dark: #1857bd; --warn: #b8860b; --err: #c0392b; --ok: #1e8e4a;
        --space: 8px; --radius: 6px;
        --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
        --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.header { display: flex; gap: 16px; align-items: center; height: 52px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
/* Пункты меню серые, а не акцентные: цветом выделен только текущий раздел,
   иначе шапка пестрит и «где я» приходится вычитывать. */
.header nav { display: flex; gap: 2px; }
.header nav a { padding: 6px 12px; border-radius: var(--radius); color: var(--muted); font-weight: 500; }
.header nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.header nav a.active { background: #e8f0fe; color: var(--accent); }
.header .spacer { flex: 1; } .header .user { color: var(--muted); }
/* `display: flex` сильнее правила браузера для [hidden], и на экране входа
   шапка оставалась пустой белой полосой. */
.header[hidden] { display: none; }
/* Бренд по формуле соседей: система, разделитель, имя репозитория. Цвет задан
   явно — общее правило для ссылок иначе перекрасило бы его при наведении. */
.header__brand { font-weight: 700; letter-spacing: -.2px; color: var(--accent); white-space: nowrap; text-decoration: none; }
.header__brand:hover { text-decoration: underline; }
.header__version { margin-left: 6px; font-size: 10px; font-weight: 500; color: var(--muted); vertical-align: middle; }
/* Точка связи: серая — ещё не проверяли, зелёная — сервер ответил, красная — нет. */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; vertical-align: middle; background: #9ca3af; cursor: pointer; transition: background .3s; }
.live-dot--ok { background: var(--ok); } .live-dot--error { background: var(--err); }
.main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.toolbar { display: flex; gap: var(--space); align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar h2 { margin: 0 12px 0 0; font-size: 18px; }
/* Граница у полей и кнопок заметнее фоновой: на белой карточке светлая `--line`
   сливается с подложкой, и поле выглядит нарисованным, а не активным. */
.input, select.input, textarea.input { padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; background: var(--panel); color: var(--ink); }
.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 111, 235, .15); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; font-weight: 500; }
.btn:hover { background: var(--surface-2); } .btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--danger { color: var(--err); border-color: #e6b8b2; } .btn--danger:hover { background: #fdf2f0; }
.btn--small { padding: 3px 8px; font-size: 12px; } .btn--wide { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: default; }
.table { width: 100%; border-collapse: collapse; background: var(--panel); }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.table th { background: var(--surface-2); color: var(--muted); font-weight: 600; padding: 8px 10px; white-space: nowrap; } .table tr.dimmed td { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 12px; background: #e8f0fe; color: var(--accent); }
.badge--warn { background: #fbf1dc; color: var(--warn); } .badge--err { background: #f9e3e1; color: var(--err); } .badge--ok { background: #e3f1e4; color: var(--ok); }
.muted { color: var(--muted); }
.alerts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.alert { padding: 8px 12px; border-radius: var(--radius); background: #e8f0fe; border: 1px solid var(--line); }
.alert--error { background: #f9e3e1; } .alert--warning { background: #fbf1dc; } .alert--ok { background: #e3f1e4; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.modal { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 420px; max-width: 90vw; max-height: 90vh; overflow: auto; }
.modal h3 { margin-top: 0; } .form-row { display: flex; gap: var(--space); align-items: center; margin-bottom: 8px; }
.form-row label { min-width: 140px; color: var(--muted); }
.tree-indent { display: inline-block; width: 18px; }
/* Панели плоские: тень у соседей носят только модалка и карточка входа, а
   тень на каждом блоке превращает страницу в россыпь карточек. */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
/* Экран входа: карточка по центру окна на градиенте — как в CRM и MES. */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #eef2f7, #dde5ee); }
.login__box { width: 320px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 28px 26px; }
.login__brand { font-size: 22px; font-weight: 700; letter-spacing: .4px; margin-bottom: 22px; text-align: center; }
.login__brand span { color: var(--accent); }
.login__error { color: var(--err); min-height: 18px; font-size: 13px; margin: 4px 0 10px; }
/* Подпись над полем, а не слева: колонка в 140 px разъезжается на узких окнах. */
.field { display: block; margin-bottom: 12px; }
.field__label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.field .input { width: 100%; }
pre.code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); padding: 8px; overflow: auto; }