:root {
  --bg: #f4f6f9; --panel: #ffffff; --panel2: #f8f9fb; --border: #e2e6ec;
  --border2: #edf0f4; --text: #111827; --muted: #667085; --muted2: #556070;
  --accent: #2563eb; --accent-dark: #1d4ed8; --accent-soft: #eaf1ff;
  --good: #11702f; --bad: #c02e24; --warn: #8f5b0a;
  --good-bg: #e7f6ec; --bad-bg: #fdeceb; --warn-bg: #fdf4df; --info-bg: #eef3fd;
  --row-hover: #f5f8fc; --th-bg: #f8f9fb;
  --shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 20px 48px rgba(16,24,40,0.18);
  --radius: 12px; --radius-sm: 8px;
  --sidebar-w: 236px;
  --font: 'IBM Plex Sans', 'Segoe UI', Roboto, system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #0c1016; --panel: #141a22; --panel2: #10151c; --border: #252d39;
  --border2: #1c232d; --text: #e7ecf3; --muted: #7c8797; --muted2: #a4aebc;
  --accent: #5b8def; --accent-dark: #4677e0; --accent-soft: rgba(91,141,239,0.15);
  --good: #45c283; --bad: #f06a5f; --warn: #e3ac42;
  --good-bg: rgba(69,194,131,0.13); --bad-bg: rgba(240,106,95,0.14); --warn-bg: rgba(227,172,66,0.14); --info-bg: rgba(91,141,239,0.12);
  --row-hover: #19212b; --th-bg: #171e28;
  --shadow: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); margin: 0; padding: 0; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--accent-soft); }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Каркас: боковое меню + контент ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 150; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.brand-logo .ico { width: 18px; height: 18px; stroke-width: 2; }
.brand-name { font-weight: 700; font-size: 14px; letter-spacing: -0.2px; line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--muted); }
.sidebar .tabs { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.nav-group { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 14px 10px 6px; }
.tabs button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--muted2); text-align: left; white-space: nowrap; transition: background 0.12s, color 0.12s; position: relative; }
.tabs button:hover { background: var(--panel2); color: var(--text); }
.tabs button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tabs button.active::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar-foot { border-top: 1px solid var(--border2); padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
body:not(.has-data) .sidebar .tabs { visibility: hidden; }
.side-hint { font-size: 11px; color: var(--muted); line-height: 1.4; flex: 1; }
body.has-data .side-hint { display: none; }

.app { margin-left: var(--sidebar-w); max-width: 1640px; padding: 18px 28px 48px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.18s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Шапка ---------- */
.app-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; min-height: 40px; }
.app-header h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -0.4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.app-header h1 .badge-ect { background: var(--accent-soft); color: var(--accent); font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 600; letter-spacing: 0.2px; align-self: center; }
.app-header .meta { color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.last-update { font-size: 11.5px; color: var(--muted); margin: 0 0 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#actionsData { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#actionsData.hidden { display: none !important; }
.btn, .actions button, .actions summary { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text); box-shadow: var(--shadow); transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; }
.actions button:hover, .actions summary:hover { background: var(--panel2); border-color: #c9d0da; }
[data-theme="dark"] .actions button:hover, [data-theme="dark"] .actions summary:hover { border-color: #36404e; }
.actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 2px rgba(37,99,235,0.3); }
.actions button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.actions .icon-btn { width: 34px; padding: 0; justify-content: center; }
.user-input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; width: 140px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.user-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.unit-toggle { display: inline-flex; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; height: 34px; }
.unit-toggle button, .actions .unit-toggle button { height: 26px; padding: 0 10px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--muted2); box-shadow: none; }
.unit-toggle button.active { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,0.12); }

/* выпадающие меню (Экспорт / Ещё) */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .chev { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.15s; }
.menu[open] summary .chev { transform: rotate(180deg); }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; z-index: 400; display: flex; flex-direction: column; gap: 1px; }
.menu-list button, .actions .menu-list button { justify-content: flex-start; width: 100%; height: 34px; border: none; box-shadow: none; background: transparent; border-radius: 6px; font-weight: 500; }
.actions .menu-list button:hover { background: var(--panel2); }
.menu-list .menu-sep { height: 1px; background: var(--border2); margin: 4px 2px; }
.menu-list .menu-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px 2px; font-weight: 600; }

/* ---------- Сегодня ---------- */
.today-widget { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tw-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border2); }
.tw-badge { font-weight: 700; color: var(--text); font-size: 14px; }
.tw-time { font-size: 12px; color: var(--muted2); }
.tw-status { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tw-status.ok { background: var(--good-bg); color: var(--good); }
.tw-status.warn { background: var(--warn-bg); color: var(--warn); }
.tw-status.bad { background: var(--bad-bg); color: var(--bad); }
.tw-status.neutral { background: var(--info-bg); color: var(--muted2); }
.tw-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tw-kpi { background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; padding: 10px 14px; position: relative; }
.tw-kpi.bad { background: var(--bad-bg); border-color: transparent; }
.tw-kpi.ok { background: var(--good-bg); border-color: transparent; }
.tw-kpi .tw-label { font-size: 11px; color: var(--muted2); font-weight: 500; }
.tw-kpi .tw-value { font-size: 24px; font-weight: 700; color: var(--text); margin-top: 2px; line-height: 1.15; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.tw-kpi.bad .tw-value { color: var(--bad); }
.tw-kpi .tw-value .u { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.tw-kpi .tw-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tw-delta { font-size: 12px; font-weight: 600; }
.tw-delta.up { color: var(--good); }
.tw-delta.down { color: var(--bad); }
.tw-delta.flat { color: var(--muted); }
.tw-spark-wrap { background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; padding: 10px 14px; }
.tw-spark-title { font-size: 11px; color: var(--muted2); font-weight: 500; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.tw-spark-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.tw-spark-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.tw-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding-bottom: 16px; }
.tw-bar { flex: 1; min-width: 8px; max-width: 42px; border-radius: 4px 4px 1px 1px; position: relative; cursor: pointer; transition: filter 0.15s, transform 0.15s; }
.tw-bar:hover { filter: brightness(0.92); transform: translateY(-2px); }
.tw-bar.target { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.tw-bar-label { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 30 дней: столбики уже, подписи на узком экране через один */
.tw-spark { gap: 3px; }
@media (max-width: 1100px) { .tw-spark .tw-bar:nth-child(even) .tw-bar-label { display: none; } }
@media (max-width: 600px) { .tw-spark { gap: 2px; } .tw-bar { min-width: 4px; } .tw-spark .tw-bar:not(:nth-child(5n+1)):not(:last-child) .tw-bar-label { display: none; } .tw-spark .tw-bar:nth-child(even) .tw-bar-label { display: none; } }
/* ---------- Инфопанели ---------- */
.supplier-changes, .anomaly-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 14px; font-size: 12.5px; position: relative; overflow: hidden; }
.supplier-changes::before, .anomaly-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warn); }
.anomaly-panel::before { background: var(--bad); }
.anomaly-panel.ok::before { background: var(--good); }
.supplier-changes h3, .anomaly-panel h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.supplier-changes h3 { color: var(--warn); }
.anomaly-panel h3 { color: var(--bad); }
.anomaly-panel.ok h3 { color: var(--good); margin: 0; }
.supplier-changes table, .anomaly-panel .anomaly-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.supplier-changes th, .supplier-changes td, .anomaly-panel .anomaly-table th, .anomaly-panel .anomaly-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border2); }
.supplier-changes tr:last-child td, .anomaly-panel .anomaly-table tr:last-child td { border-bottom: none; }
.supplier-changes th, .anomaly-panel .anomaly-table th { background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border); }
.supplier-changes .sc-tabs { display: inline-flex; gap: 2px; margin-bottom: 10px; background: var(--panel2); border: 1px solid var(--border2); padding: 3px; border-radius: 9px; }
.supplier-changes .sc-tab { padding: 5px 12px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--muted2); display: inline-flex; align-items: center; gap: 6px; }
.supplier-changes .sc-tab.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.supplier-changes .sc-count { background: var(--warn-bg); color: var(--warn); padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.supplier-changes .sc-empty { padding: 14px; font-size: 12.5px; color: var(--muted); text-align: center; background: var(--panel2); border-radius: 8px; }

.notif-banner { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.notif { padding: 10px 14px; border-radius: 10px; font-size: 12.5px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid transparent; }
.notif.error { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 20%, transparent); }
.notif.warning { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.notif.info { background: var(--info-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.notif .close { margin-left: auto; cursor: pointer; font-weight: 600; opacity: 0.55; }
.notif .close:hover { opacity: 1; }

/* ---------- Фильтры ---------- */
.sticky-bar { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 10px; margin: 0 0 16px; box-shadow: var(--shadow); }
.filters { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)) repeat(2, minmax(128px, 0.9fr)) auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.filters label { font-size: 11px; color: var(--muted2); font-weight: 500; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-field select, .density-table select { appearance: none; -webkit-appearance: none; padding-right: 26px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.filters select, .filters input { width: 100%; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; min-width: 0; background: var(--panel); color: var(--text); height: 32px; transition: border-color 0.12s, box-shadow 0.12s; }
.filters select { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.filters select:hover, .filters input:hover { border-color: #c9d0da; }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-theme="dark"] .filters input[type="date"] { color-scheme: dark; }
.filters button.reset { height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--muted2); }
.filters button.reset:hover { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.filter-extras { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border2); }
.quick-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.quick-filters button { height: 28px; padding: 0 12px; border: 1px solid var(--border); background: var(--panel); border-radius: 999px; cursor: pointer; font-size: 12px; color: var(--muted2); transition: 0.12s; }
.quick-filters button:hover { border-color: var(--accent); color: var(--accent); }
.quick-filters button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#presetsBar { margin: 0 0 0 auto !important; font-size: 12px !important; }
.crossfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.crossfilters .label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; }
.pill .x { cursor: pointer; opacity: 0.8; font-weight: 600; }
.pill .x:hover { opacity: 1; }
.pill.clear-all { background: var(--panel2); color: var(--muted2); border: 1px solid var(--border); cursor: pointer; }
.pill.clear-all:hover { color: var(--bad); border-color: var(--bad); }

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); cursor: pointer; position: relative; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi.primary { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.kpi .label { font-size: 11px; color: var(--muted2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .value { font-size: 22px; font-weight: 700; margin-top: 4px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.kpi .value .u { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-left: 3px; letter-spacing: 0; }
.kpi .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.kpi .trend { font-size: 12px; font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.kpi .trend.up { color: var(--good); }
.kpi .trend.down { color: var(--bad); }
.kpi .trend.flat { color: var(--muted); }
.kpi .copied { position: absolute; top: 8px; right: 8px; background: var(--good); color: #fff; font-size: 10.5px; padding: 1px 7px; border-radius: 8px; opacity: 0; transition: 0.2s; }
.kpi.copied-flash .copied { opacity: 1; }

/* ---------- Карточки и графики ---------- */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 8px; box-shadow: var(--shadow); position: relative; min-height: 60px; min-width: 0; }
.chart-card.full { grid-column: 1 / -1; }
.chart-card[style*="padding:12px"], .chart-card[style*="padding: 12px"] { padding: 18px 20px !important; }
.chart-card .chart-actions { position: absolute; top: 10px; right: 10px; opacity: 0; transition: 0.15s; z-index: 5; }
.chart-card:hover .chart-actions { opacity: 1; }
.chart-card .chart-actions button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-size: 12px; color: var(--muted2); box-shadow: var(--shadow); }
.chart-card .chart-actions button:hover { color: var(--accent); border-color: var(--accent); }
.chart-card h3, .card-title { font-size: 14px !important; font-weight: 700; color: var(--text); letter-spacing: -0.1px; }
.card-title { margin: 4px 4px 12px; display: flex; align-items: center; gap: 8px; }
.section-label { margin: 18px 4px 8px; font-size: 11px !important; font-weight: 600; color: var(--muted) !important; text-transform: uppercase; letter-spacing: 0.6px; }
.chart-card > div > table, .chart-card > table { margin-top: 2px; }

/* ---------- Таблицы ---------- */
table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.data-table th, table.data-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border2); }
table.data-table th { background: var(--th-bg); font-weight: 600; color: var(--muted2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data-table th:first-child { border-top-left-radius: 8px; }
table.data-table th:last-child { border-top-right-radius: 8px; }
table.data-table tbody tr { transition: background 0.1s; }
table.data-table td { white-space: nowrap; }
#allSamplesTable, #userTestsTable, #tableSuppliers, #tablePeriods, #tableGlueParams, #tableWorst, #tableWorstCombos, #tableAbcXyz, #tableRisks { overflow-x: auto; }
table.data-table tbody tr:hover { background: var(--row-hover); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tfoot td { background: var(--th-bg); font-weight: 600; color: var(--muted2); border-top: 1px solid var(--border); border-bottom: none; padding: 9px 10px; }
table.data-table th.sortable { cursor: pointer; user-select: none; padding-right: 22px; }
table.data-table th.sortable:hover { color: var(--accent); }
table.data-table th.sortable::after { content: '↕'; position: absolute; right: 8px; opacity: 0.35; font-size: 11px; }
table.data-table th.sortable.asc::after { content: '↑'; opacity: 1; color: var(--accent); }
table.data-table th.sortable.desc::after { content: '↓'; opacity: 1; color: var(--accent); }

.cell-good { background: var(--good-bg) !important; color: var(--good); font-weight: 600; }
.cell-warn { background: var(--warn-bg) !important; color: var(--warn); font-weight: 600; }
.cell-bad  { background: var(--bad-bg) !important; color: var(--bad); font-weight: 600; }
.cell-stale { background: var(--warn-bg) !important; color: var(--warn) !important; }

.hidden { display: none !important; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.badge.red { background: var(--bad-bg); color: var(--bad); }
.badge.green { background: var(--good-bg); color: var(--good); }
.badge.yellow { background: var(--warn-bg); color: var(--warn); }
.badge.gray { background: var(--panel2); color: var(--muted2); border: 1px solid var(--border2); }
.badge.odd { background: var(--warn-bg); color: var(--warn); }
.badge.dup { background: var(--bad-bg); color: var(--bad); }
.err { color: var(--bad); font-size: 12.5px; margin-top: 8px; }
.warn { color: var(--warn); font-size: 12px; margin-top: 6px; background: var(--warn-bg); padding: 8px 12px; border-radius: 8px; }
.placeholder { padding: 28px 18px; color: var(--muted); font-size: 13px; text-align: center; }
.placeholder .hint { display: block; margin-top: 6px; color: var(--muted2); font-size: 12px; }
.norm-cell { font-weight: 600; }
.norm-cell.bad { color: var(--bad); }
.norm-cell.good { color: var(--good); }
.mode-tabs, .period-toggle { display: inline-flex; gap: 2px; background: var(--panel2); border: 1px solid var(--border); padding: 3px; border-radius: 10px; }
.mode-tabs { margin-top: 8px; }
.period-toggle { margin-bottom: 14px; }
.mode-tabs button, .period-toggle button { padding: 6px 14px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--muted2); font-weight: 500; transition: 0.12s; }
.mode-tabs button:hover, .period-toggle button:hover { color: var(--text); }
.mode-tabs button.active, .period-toggle button.active { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,0.1), 0 0 0 1px var(--border2); }

/* сортировка и фильтр во всех таблицах */
table th.sortable { position: relative; cursor: pointer; user-select: none; padding-right: 22px !important; }
table th.sortable:hover { color: var(--accent); }
table:not(.data-table) th.sortable::after { content: '↕'; position: absolute; right: 8px; opacity: 0.35; font-size: 11px; }
table:not(.data-table) th.sortable.asc::after { content: '↑'; opacity: 1; color: var(--accent); }
table:not(.data-table) th.sortable.desc::after { content: '↓'; opacity: 1; color: var(--accent); }
.tf-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.tf-q { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; max-width: 340px; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.tf-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tf-q .ico { width: 14px; height: 14px; color: var(--muted2); flex: none; }
.tf-q input { border: 0; outline: none; background: transparent; color: var(--text); font-size: 12.5px; width: 100%; height: 100%; }
.tf-bar select { height: 30px !important; max-width: 200px; font-size: 12px !important; }
.tf-count { font-size: 11.5px; color: var(--muted2); font-variant-numeric: tabular-nums; }
.tf-reset { display: none; height: 26px; padding: 0 9px; }
.tf-bar.active .tf-reset { display: inline-flex; } .tf-bar.active .tf-count { color: var(--accent); font-weight: 600; }
.sv-comp { font-size: 12px; white-space: nowrap; color: var(--muted2); }
/* ---------- Загрузка файла ---------- */
.drop-zone { max-width: 620px; margin: 10vh auto 0; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 18px; padding: 44px 36px 36px; text-align: center; background: var(--panel); cursor: pointer; box-shadow: var(--shadow); transition: 0.15s; }
.drop-zone:hover, .drop-zone.hover { background: var(--accent-soft); border-color: var(--accent); }
.drop-zone .dz-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 16px; }
.drop-zone .dz-icon .ico { width: 26px; height: 26px; }
.drop-zone p { margin: 6px 0; color: var(--muted2); font-size: 13px; }
.drop-zone .dz-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.drop-zone .dz-btn { display: inline-flex; margin-top: 14px; height: 36px; align-items: center; padding: 0 16px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; }
.drop-zone .dz-foot { margin-top: 18px !important; font-size: 12px !important; color: var(--muted) !important; }
.drop-zone .last-file-hint { background: var(--info-bg); padding: 8px 12px; border-radius: 8px; font-size: 12px; color: var(--accent); margin-top: 14px; }

.delta-up { color: var(--good); font-weight: 600; }
.delta-down { color: var(--bad); font-weight: 600; }
.delta-flat { color: var(--muted); }
.risk-critical { background: var(--bad-bg) !important; }
.risk-warning { background: var(--warn-bg) !important; }
.risk-ok { background: var(--good-bg) !important; }

.abc-cell { padding: 12px; border-radius: 10px; text-align: center; font-size: 11.5px; margin: 3px; min-height: 64px; }

/* экран импорта при входе: быстрые кнопки «продолжить» */
.dz-continue { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.dz-continue:empty { display: none; }
.dz-cont { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 260px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.dz-cont b { font-size: 13.5px; } .dz-cont span { font-size: 12px; color: var(--muted2); }
.dz-cont:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dz-cont.primary { border-color: var(--accent); background: var(--accent-soft); } .dz-cont.primary b { color: var(--accent); }
/* ---------- Модальные окна и формы ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(12,18,28,0.5); backdrop-filter: blur(3px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.15s; }
.modal-overlay.hidden { display: none; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border2); position: sticky; top: 0; background: var(--panel); z-index: 3; }
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.modal-header .close { background: transparent; border: none; font-size: 22px; cursor: pointer; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; line-height: 1; }
.modal-header .close:hover { background: var(--panel2); color: var(--text); }
.modal-body { padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--border2); padding: 14px 22px; display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--panel); }
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.test-field { background: var(--panel2); border: 1px solid var(--border2); padding: 8px 12px; border-radius: 8px; }
.test-field .k { font-size: 11px; color: var(--muted); }
.test-field .v { font-size: 14px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.test-field.bad { background: var(--bad-bg); border-color: transparent; }
.test-field.bad .v { color: var(--bad); }
.modal-section-title, .form-section-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin: 18px 0 8px; }
.form-section-title:first-child { margin-top: 0; }
.comment-area { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; resize: vertical; background: var(--panel); color: var(--text); }
.comment-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.comment-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.modal-actions button, .modal-footer button { height: 36px; padding: 0 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.modal-actions .primary, .modal-footer .primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.modal-actions .primary:hover, .modal-footer .primary:hover { background: var(--accent-dark); }
.modal-actions .danger { background: var(--panel); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border)); }
.modal-actions .danger:hover { background: var(--bad-bg); }
.modal-actions .plain, .modal-footer .plain { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.modal-actions .plain:hover, .modal-footer .plain:hover { background: var(--panel2); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field span { font-size: 11.5px; color: var(--muted2); font-weight: 500; }
.form-field input, .form-field select { padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--panel); color: var(--text); height: 36px; transition: border-color 0.12s, box-shadow 0.12s; }
.form-field input:focus, .form-field select:focus, .density-table input:focus, .density-table select:focus, .cost-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mini-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--border); background: var(--panel); border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--muted2); font-weight: 500; transition: 0.12s; white-space: nowrap; }
.mini-btn:hover { background: var(--panel2); border-color: #c9d0da; color: var(--text); }
.mini-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mini-btn.primary:hover { background: var(--accent-dark); color: #fff; }
.mini-btn.danger { color: var(--bad); }
.mini-btn.danger:hover { background: var(--bad-bg); border-color: transparent; }
.user-test-hint { font-size: 12px; color: var(--muted); margin: 8px 4px; }

.density-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.density-table th { padding: 8px 10px; text-align: left; color: var(--muted2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; background: var(--th-bg); border-bottom: 1px solid var(--border); }
.density-table td { padding: 4px 5px; border-top: 1px solid var(--border2); }
.density-table td:first-child { padding-left: 10px; color: var(--muted); width: 56px; }
.density-table input, .density-table select { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; background: var(--panel); color: var(--text); }
.glue-result-box { margin-top: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 10px; padding: 12px 14px; }
.glue-result-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.glue-result-input { flex: 1; min-width: 120px; background: var(--panel); color: var(--accent); font-weight: 700; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; padding: 6px 12px; cursor: not-allowed; }
.glue-hint { font-size: 11.5px; color: var(--muted2); margin-top: 6px; line-height: 1.5; }

/* ---------- Настройки ---------- */
.settings-nav { display: inline-flex; gap: 2px; background: var(--panel2); border: 1px solid var(--border); padding: 3px; border-radius: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.settings-nav button { padding: 7px 14px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--muted2); font-weight: 500; }
.settings-nav button:hover { color: var(--text); }
.settings-nav button.active { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,0.1), 0 0 0 1px var(--border2); }
.dict-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--panel); border-radius: 7px; font-size: 12.5px; border: 1px solid var(--border2); cursor: grab; transition: border-color 0.12s; }
.dict-item:hover { border-color: var(--border); background: var(--panel2); }
.dict-item.dragging { opacity: 0.4; }
.dict-item.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.dict-handle { color: var(--muted); font-size: 14px; letter-spacing: -2px; cursor: grab; user-select: none; padding-right: 2px; opacity: 0.6; }
.dict-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }

/* справочники по вкладкам */
.dict-card { padding: 16px; }
.dict-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dict-head-a { display: flex; gap: 6px; flex-wrap: wrap; }
.dict-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.dict-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 9px 12px; font-weight: 600; font-size: 13px; color: var(--muted2); border-bottom: 2px solid transparent; cursor: pointer; }
.dict-tabs button .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dict-tabs button small { background: var(--panel2); border-radius: 8px; padding: 1px 6px; font-size: 11px; color: var(--muted2); }
.dict-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.dict-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted2); background: var(--panel2); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.dict-hint span { flex: 1; min-width: 200px; }
.dict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.dict-block { border: 1px solid var(--border2); border-radius: 8px; padding: 10px 12px; background: var(--panel2); display: flex; flex-direction: column; gap: 8px; }
.dict-block-h { font-size: 12px; font-weight: 600; color: var(--muted2); text-transform: uppercase; letter-spacing: .3px; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.dict-where { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: 11px; }
.dict-add { display: flex; gap: 6px; } .dict-add input { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; background: var(--panel); color: var(--text); }
.dict-block .dict-item { cursor: default; } .dict-block .dict-item .mini-btn { padding: 2px 8px; font-size: 11px; }
.dict-paper { margin-top: 12px; }
.dict-newcat { border: 2px dashed var(--border2); border-radius: 8px; background: transparent; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--muted2); font-size: 13px; font-weight: 600; }
.dict-newcat b { font-size: 26px; line-height: 1; color: var(--accent); } .dict-newcat small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.dict-newcat:hover { border-color: var(--accent); color: var(--accent); }
.dict-own { font-size: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 6px; margin-right: 6px; text-transform: none; letter-spacing: 0; }
/* колонки таблиц */
.cols-card { padding: 16px; }
.cols-list { display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.cols-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border2); border-radius: 8px; background: var(--panel); font-size: 13px; }
.cols-item[draggable="true"] { cursor: grab; }
.cols-item.off { opacity: .55; } .cols-item.off .cols-l { text-decoration: line-through; }
.cols-item.drag-over { border-color: var(--accent); } .cols-item.dragging { opacity: .4; }
.cols-n { width: 22px; color: var(--muted); font-size: 12px; text-align: right; }
.cols-l { flex: 1; font-weight: 600; }
.cols-vis { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted2); }
/* ---------- Уведомления ---------- */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--text); color: var(--panel); padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; pointer-events: auto; min-width: 240px; max-width: 400px; animation: slideIn 0.2s; border-left: 3px solid var(--accent); }
.toast.ok { border-left-color: var(--good); }
.toast.err { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
.toast .toast-close { float: right; cursor: pointer; opacity: 0.6; margin-left: 10px; font-weight: 600; }
@keyframes slideIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.to-top { position: fixed; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--border); cursor: pointer; font-size: 18px; box-shadow: var(--shadow-md); z-index: 200; opacity: 0; pointer-events: none; transition: 0.2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

.table-search { width: 100%; max-width: 380px; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; color: var(--text); margin-bottom: 12px; }
.table-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.paper-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.15); }
.pc-Бел { background: #f8f8f8; }
.pc-Бур { background: #8a5a2a; }
.pc-Серый { background: #9aa0a6; }
.pc-Коричневый { background: #6a4a2a; }

.reg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.reg-table th, .reg-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border2); }
.reg-table th { background: var(--th-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted2); border-bottom: 1px solid var(--border); }
.reg-table .coef-pos { color: var(--good); font-weight: 600; }
.reg-table .coef-neg { color: var(--bad); font-weight: 600; }

.streams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stream-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stream-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); }
.stream-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stream-kpi { background: var(--panel2); border: 1px solid var(--border2); padding: 10px 12px; border-radius: 8px; }
.stream-kpi .k { font-size: 11px; color: var(--muted); }
.stream-kpi .v { font-size: 18px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }

.comment-item { background: var(--panel); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; position: relative; }
.comment-item .cm-head { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
.comment-item .cm-text { font-size: 13px; line-height: 1.55; }

.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cost-field { background: var(--panel2); border: 1px solid var(--border2); padding: 10px 12px; border-radius: 8px; }
.cost-field .k { font-size: 11px; color: var(--muted2); font-weight: 500; }
.cost-field input { width: 100%; margin-top: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 13px; }

/* скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Адаптив ---------- */
@media (max-width: 1280px) { .filters { grid-template-columns: repeat(4, minmax(120px, 1fr)); } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 1100px) { .charts { grid-template-columns: 1fr; } .streams-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .sidebar { position: sticky; top: 0; inset: auto; width: 100%; height: auto; flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--border); }
  .brand { padding: 10px 12px; }
  .brand-text, .sidebar-foot, .nav-group { display: none; }
  .sidebar .tabs { flex-direction: row; overflow-x: auto; padding: 6px 8px; gap: 2px; }
  .tabs button { width: auto; padding: 7px 10px; font-size: 12.5px; }
  .tabs button.active::before { display: none; }
  .app { margin-left: 0; padding: 14px 16px 36px; }
  .drop-zone { margin-top: 24px; padding: 32px 20px; }
}
@media (max-width: 760px) {
  .app-header { flex-direction: column; align-items: flex-start; }
  .app-header h1 { font-size: 18px; }
  .actions { width: 100%; }
  .filters { grid-template-columns: 1fr 1fr; }
  table.data-table { font-size: 11.5px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print {
  .sidebar, .sticky-bar, .actions, .tabs, .chart-actions, .mode-tabs, .period-toggle, .crossfilters, .notif-banner, .to-top, .quick-filters, .toast-wrap, .table-search, .theme-btn { display: none !important; }
  body { background: #fff; padding: 0; }
  .app { padding: 0; max-width: none; margin: 0; }
  .chart-card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  .charts { grid-template-columns: 1fr; }
  .tab-panel { display: block !important; }
}

.ui-dialog { z-index: 2500; }
.ui-dialog-box { max-width: 440px; }
.ui-dialog-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.ui-dialog-msg { margin: 0; color: var(--muted2); font-size: 13px; line-height: 1.55; }
.ui-dialog-fields { display: grid; gap: 10px; margin-top: 10px; }
.modal-footer .danger-fill { background: var(--bad); border-color: var(--bad); }
.modal-footer .danger-fill:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }

.card-title .ico, .section-label .ico, .anomaly-panel h3 .ico, .supplier-changes h3 .ico, .tw-badge .ico { width: 17px; height: 17px; }
.card-title .ico, .tw-badge .ico { color: var(--muted); }
.settings-nav button, .supplier-changes .sc-tab, .period-toggle button { display: inline-flex; align-items: center; gap: 6px; }
.settings-nav .ico, .sc-tab .ico { width: 15px; height: 15px; }
.mini-btn .ico { width: 14px; height: 14px; }
.notif .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.tw-badge { display: inline-flex; align-items: center; gap: 8px; }
.last-file-hint .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* фактическая марка (расчёт) */
.fm { display: inline-block; font-weight: 700; padding: 1px 7px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; cursor: help; }
.fm.fm-ok { background: rgba(26,127,55,.12); color: var(--good); }
.fm.fm-bad { background: rgba(198,40,40,.12); color: var(--bad); }
.fm.fm-warn { background: rgba(214,140,0,.14); color: var(--warn); }
.fm.fm-n { background: var(--panel2); color: var(--text); }
.fm-t { font-size: 11px; white-space: nowrap; } .fm-t.fm-bad { color: var(--bad); } .fm-t.fm-ok { color: var(--good); } .fm-t.fm-warn { color: var(--warn); }
.fm-why { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.45; font-weight: 400; }
.fm-input { font-weight: 700; background: var(--bg) !important; cursor: default; }
.fm-info { margin-top: 4px; font-size: 12px; }
.test-field.fm-field { grid-column: span 2; }
@media (max-width: 640px) { .test-field.fm-field { grid-column: 1 / -1; } }
/* ---------- Отчёт ---------- */
body[data-tab="report"] #stickyBar, body[data-tab="report"] #notifBanner { display: none !important; }
.report-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.report-date { display: flex; align-items: center; gap: 6px; }
.report-date input { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 12.5px; }
[data-theme="dark"] .report-date input { color-scheme: dark; }
.report-actions { margin-left: auto; display: flex; gap: 6px; }
.report-sheet { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px 22px; max-width: 1080px; }
.rep-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--text); margin-bottom: 16px; }
.rep-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted2); }
.rep-title { margin: 4px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.rep-meta { font-size: 12px; color: var(--muted2); text-align: right; line-height: 1.5; }
.rep-summary { font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 75ch; }
.rep-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 22px; }
.rep-kpi { padding: 12px 14px; border-right: 1px solid var(--border2); }
.rep-kpi:last-child { border-right: none; }
.rep-kpi .k { font-size: 11px; color: var(--muted2); font-weight: 500; }
.rep-kpi .v { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rep-kpi .v .u { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.rep-kpi .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rep-kpi.bad { background: var(--bad-bg); } .rep-kpi.bad .v { color: var(--bad); }
.rep-kpi.good { background: var(--good-bg); } .rep-kpi.good .v { color: var(--good); }
.rep-block { margin-bottom: 22px; min-width: 0; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.rep-h { font-size: 13px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted2); }
.rep-table th, .rep-table td { padding: 7px 10px; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.bad-text { color: var(--bad); font-weight: 600; }
.rep-ok { display: flex; align-items: center; gap: 8px; color: var(--good); background: var(--good-bg); padding: 10px 14px; border-radius: 8px; margin: 0; }
.rep-comment { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.rep-comment-meta { font-size: 11.5px; color: var(--muted); }
.rep-foot { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border2); padding-top: 12px; }
.row-link { cursor: pointer; }
.sup-link { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 500; }
.sup-link:hover { text-decoration: underline; }
@media (max-width: 1100px) { .rep-kpis { grid-template-columns: repeat(3, 1fr); } .rep-kpi:nth-child(3) { border-right: none; } .rep-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--border2); } .rep-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .report-sheet { padding: 18px 16px; } .rep-head { flex-direction: column; align-items: flex-start; } .rep-meta { text-align: left; } .report-actions { margin-left: 0; } .rep-kpis { grid-template-columns: repeat(2, 1fr); } .report-sheet .data-table { display: block; overflow-x: auto; } }
@media print {
  body[data-tab="report"] .app-header, body[data-tab="report"] .last-update, body[data-tab="report"] .report-toolbar { display: none !important; }
  body[data-tab="report"] .tab-panel:not([data-tab="report"]) { display: none !important; }
  body[data-tab="report"] .report-sheet { border: none; box-shadow: none; padding: 0; max-width: none; }
  body[data-tab="report"] .rep-block, body[data-tab="report"] tr { page-break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ---------- Карточка поставщика ---------- */
#supplierModal { z-index: 950; }
.supplier-modal { max-width: 1000px; }
.supplier-modal .modal-header h2 { display: flex; align-items: center; gap: 10px; }
.sup-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sup-kpis .test-field .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sup-chart { border: 1px solid var(--border2); border-radius: 10px; padding: 6px; min-height: 60px; }
.table-scroll { overflow-x: auto; }
@media (max-width: 760px) { .sup-kpis { grid-template-columns: 1fr 1fr; } }

.menu-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted2); padding: 8px 10px; }
.menu-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.menu-status .dot.ok { background: var(--good); }

/* ---------- Раннее предупреждение ---------- */
.early-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.early-panel h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.early-panel h3 .ico { width: 17px; height: 17px; color: var(--warn); }
.early-panel.ok h3 .ico { color: var(--good); }
.early-ok { margin: 4px 0 0; color: var(--muted2); font-size: 12.5px; }
.early-hint { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.early-list { display: flex; flex-direction: column; }
.early-row { display: grid; grid-template-columns: 104px 64px 1fr 124px 80px; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--border2); cursor: pointer; border-radius: 6px; }
.early-row:hover { background: var(--row-hover); }
.early-code { font-variant-numeric: tabular-nums; }
.early-text { font-size: 12.5px; }
.early-date { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sev-pill { white-space: nowrap; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-align: center; }
.sev-pill.bad { background: var(--bad-bg); color: var(--bad); }
.sev-pill.warn { background: var(--warn-bg); color: var(--warn); }
.sev-pill.info { background: var(--info-bg); color: var(--accent); }
.spark .sp-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.spark .sp-norm { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.spark .sp-end { fill: var(--accent); }
.spark .sp-end.bad { fill: var(--bad); }
@media (max-width: 760px) { .early-row { grid-template-columns: auto 1fr; } .early-text { grid-column: 1 / -1; } .spark, .early-date { display: none; } }

.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-sub { font-size: 12px; color: var(--muted); margin-top: 4px; max-width: 75ch; line-height: 1.5; }
.req-table input { width: 100%; min-width: 70px; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12.5px; }
.req-table td { white-space: normal !important; padding: 5px 6px !important; }
.req-table .thick-cell { display: flex; gap: 4px; }
.req-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.req-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 8px; }
.req-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--border2); font-size: 12px; }
.req-item b { font-size: 15px; font-variant-numeric: tabular-nums; }
.req-item.ok { background: var(--good-bg); border-color: transparent; } .req-item.ok b { color: var(--good); }
.req-item.no { background: var(--bad-bg); border-color: transparent; } .req-item.no b { color: var(--bad); }
.req-item .muted, .muted { color: var(--muted); font-size: 11.5px; }
.tm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.passport-modal { max-width: 900px; display: flex; flex-direction: column; }
.passport-frame-wrap { background: var(--bg); padding: 16px; }
.passport-frame { width: 100%; height: 62vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

body[data-tab="journal"] #stickyBar, body[data-tab="journal"] #notifBanner, body[data-tab="settings"] #notifBanner { display: none !important; }
/* быстрый ввод */
.quick-modal { max-width: 620px; }
.quick-modal .modal-header h2 { display: flex; align-items: center; gap: 8px; }
.quick-modal .modal-header .ico { color: var(--warn); }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; }
.q-ect { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 8px; align-items: center; }
.q-ect input { height: 48px; font-size: 18px; font-weight: 600; text-align: center; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); min-width: 0; font-variant-numeric: tabular-nums; }
.q-ect input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.q-ect { margin-bottom: 12px; }
.modal-footer button, .modal-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.q-avg { font-size: 12.5px; color: var(--muted2); white-space: nowrap; padding-left: 4px; }
.actions .quick-btn .ico { color: var(--warn); }
@media (max-width: 760px) {
  .quick-overlay { padding: 0; align-items: stretch; }
  .quick-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .q-ect { grid-template-columns: repeat(5, 1fr); }
  .q-avg { grid-column: 1 / -1; }
  .q-grid input, .q-grid select { height: 44px !important; font-size: 16px !important; }
  .actions .full-add-btn { display: none; }
  .actions .quick-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
  .actions .quick-btn .ico { color: #fff; }
}
/* отчёт: смена */
.report-shift { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 12.5px; }
/* фото */
.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb { position: relative; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--panel2); cursor: zoom-in; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb.missing::after { content: 'нет файла'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0; transition: 0.15s; }
.photo-thumb:hover .photo-del { opacity: 1; }
@media (hover: none) { .photo-del { opacity: 1; } }
.photo-add { width: 104px; height: 104px; border-radius: 10px; border: 1.5px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--muted2); cursor: pointer; text-align: center; }
.photo-add:hover { border-color: var(--accent); color: var(--accent); }
.photo-add .ico { width: 22px; height: 22px; }
.lightbox { cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 8px; box-shadow: var(--shadow-lg); }
/* журнал */
.journal-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.journal-tools .table-search { margin: 0; }
.journal-tools select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }
.j-day { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 18px 0 6px; }
.j-row { display: grid; grid-template-columns: 52px 150px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 4px; border-top: 1px solid var(--border2); font-size: 13px; }
.j-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.j-type { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted2); justify-self: start; }
.j-type.t-tests { background: var(--accent-soft); color: var(--accent); }
.j-type.t-comments { background: var(--good-bg); color: var(--good); }
.j-type.t-norms { background: var(--warn-bg); color: var(--warn); }
.j-type.t-file { background: var(--info-bg); color: var(--accent); }
.j-detail { color: var(--muted2); }
.j-by { font-size: 12px; color: var(--muted2); white-space: nowrap; }
@media (max-width: 760px) { .j-row { grid-template-columns: 44px 1fr; } .j-type { display: none; } .j-by { grid-column: 2; } }
/* цена брака */
.defect-card { padding: 18px 20px !important; margin-top: 14px; }
.cost-bar { display: grid; grid-template-columns: 140px 1fr 120px 64px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.cb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cb-track { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.cb-track span { display: block; height: 100%; background: var(--bad); border-radius: 4px; opacity: 0.8; }
.cb-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-n { color: var(--muted); font-size: 11.5px; text-align: right; }

.env-table { max-width: 620px; }
.env-table th:not(:first-child) { text-align: center; }
.env-table td:first-child { width: 150px !important; color: var(--muted2) !important; font-weight: 500; white-space: nowrap; }
.env-table input { text-align: center; font-variant-numeric: tabular-nums; }
.env-view td:first-child { color: var(--muted2); }

.climate-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.climate-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.cl-card { border: 1px solid var(--border2); background: var(--panel2); border-radius: 10px; padding: 10px 14px; }
.cl-card .k { font-size: 11.5px; color: var(--muted2); font-weight: 500; }
.cl-card .v { font-size: 20px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.cl-card .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cl-card.good { background: var(--good-bg); border-color: transparent; } .cl-card.good .v { color: var(--good); }
.cl-card.bad { background: var(--bad-bg); border-color: transparent; } .cl-card.bad .v { color: var(--bad); }
.early-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted2); }
.early-tag .ico { width: 14px; height: 14px; }
@media (max-width: 760px) { .climate-sum { grid-template-columns: 1fr; } }

.paper-settings { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: flex-end; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; }
.paper-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted2); font-weight: 500; }
.paper-settings label span { display: flex; align-items: center; gap: 4px; }
.paper-settings input { width: 80px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 13px; }

.ov-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ov-duo > div:empty { display: none; }
.duo-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; height: 100%; display: flex; flex-direction: column; }
.duo-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.duo-card h3 .ico { width: 17px; height: 17px; color: var(--muted); }
.duo-muted { color: var(--muted); font-size: 12px; }
.duo-foot { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--muted); }
.goal-main { display: flex; gap: 16px; align-items: center; }
.goal-num { font-size: 40px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; min-width: 96px; }
.goal-num.good { color: var(--good); } .goal-num.bad { color: var(--bad); }
.goal-side { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.goal-bar { position: relative; height: 10px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 6px; }
.goal-bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 6px; }
.goal-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 1px; }
.goal-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.gm { text-align: center; }
.gm-bar { position: relative; height: 54px; background: var(--panel2); border-radius: 6px; overflow: hidden; }
.gm-bar span { position: absolute; left: 20%; right: 20%; bottom: 0; background: var(--border); border-radius: 4px 4px 0 0; }
.gm-bar span.ok { background: var(--good); opacity: 0.75; } .gm-bar span.no { background: var(--bad); opacity: 0.7; }
.gm-bar i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--muted2); }
.gm-v { font-size: 11.5px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.gm-l { font-size: 11px; color: var(--muted); }
.gm.cur .gm-l { color: var(--text); font-weight: 600; }
.plan-list { display: flex; flex-direction: column; }
.plan-row { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border2); font-size: 12.5px; }
.plan-dim { font-size: 11px; color: var(--muted); }
.plan-row.od .plan-txt { color: var(--bad); font-weight: 600; }
.plan-row.soon .plan-txt { color: var(--warn); font-weight: 600; }
.plan-lim { font-size: 11.5px; color: var(--muted); }
.plan-ok { margin: 0; color: var(--good); font-size: 13px; }
@media (max-width: 1100px) { .ov-duo { grid-template-columns: 1fr; } }

body[data-tab="claims"] #stickyBar, body[data-tab="capa"] #stickyBar, body[data-tab="devices"] #stickyBar, body[data-tab="incoming"] #stickyBar { display: none !important; }
body[data-tab="claims"] #notifBanner, body[data-tab="capa"] #notifBanner, body[data-tab="devices"] #notifBanner { display: none !important; }

.status-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.status-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-open { background: var(--bad-bg); color: var(--bad); } .st-investigating, .st-in_progress { background: var(--warn-bg); color: var(--warn); }
.st-closed, .st-done { background: var(--good-bg); color: var(--good); } .st-rejected { background: var(--panel2); color: var(--muted2); }
.j-type.t-claims { background: var(--bad-bg); color: var(--bad); } .j-type.t-capa { background: var(--good-bg); color: var(--good); }
.rec-list { display: flex; flex-direction: column; gap: 10px; }
.rec { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; background: var(--panel); }
.rec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-title { font-weight: 700; font-size: 14px; }
.rec-meta { font-size: 12px; color: var(--muted2); }
.rec-body { font-size: 13px; line-height: 1.5; margin-top: 6px; white-space: pre-wrap; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; margin-top: 8px; font-size: 12.5px; }
.rec-grid .k { color: var(--muted); font-size: 11.5px; }
.rec-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rec.overdue { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }

.capa-hint { background: var(--warn-bg); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin: 10px 0; line-height: 1.6; }
.capa-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.capa-strip a { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 13px; box-shadow: var(--shadow); color: var(--text); }
.capa-strip a:hover { border-color: var(--accent); }
.capa-strip .ico { width: 16px; height: 16px; color: var(--accent); }

.comp-cell { white-space: normal !important; }
.comp-chip { display: inline-block; background: var(--panel2); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 7px; font-size: 12px; margin: 1px 0; }
.comp-sep { color: var(--muted); margin: 0 4px; }
.good-text { color: var(--good); font-weight: 600; }
.eff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.eff-card { border: 1px solid var(--border2); background: var(--panel2); border-radius: 10px; padding: 10px 14px; }
.eff-card .k { font-size: 11.5px; color: var(--muted2); font-weight: 600; margin-bottom: 6px; }
.eff-row { display: grid; grid-template-columns: 80px 1fr 44px 24px; gap: 8px; align-items: center; font-size: 12.5px; padding: 2px 0; }
.eff-bar { height: 7px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.eff-bar span { display: block; height: 100%; border-radius: 4px; } .eff-bar .ok { background: var(--good); opacity: .75; } .eff-bar .no { background: var(--bad); opacity: .7; }
.calc-grid { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.calc-table select, .calc-table input { width: 100%; }
.calc-table td { white-space: nowrap; }
.paper-settings select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 13px; }
.calc-result { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--panel2); }
.calc-result .k { font-size: 12px; color: var(--muted2); }
.calc-result .v { font-size: 34px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.calc-result .v .u { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.calc-result .d { font-size: 12.5px; color: var(--muted2); }
.calc-result.good { background: var(--good-bg); border-color: transparent; } .calc-result.good .v { color: var(--good); }
.calc-result.warn { background: var(--warn-bg); border-color: transparent; } .calc-result.warn .v { color: var(--warn); }
.calc-result.bad { background: var(--bad-bg); border-color: transparent; } .calc-result.bad .v { color: var(--bad); }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.yoy td:first-child { color: var(--muted2); }

.nav-tools { padding: 0 12px 6px; }
.nav-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); color: var(--muted); }
.nav-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nav-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; color: var(--text); }
.nav-search .ico { width: 15px; height: 15px; }
body:not(.has-data) .nav-tools { visibility: hidden; }
.nav-mode-btn { display: none; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--text); }
body.has-data .nav-mode-btn { display: flex; }
.nav-mode-btn span { flex: 1; text-align: left; } .nav-mode-btn .chev { width: 14px; height: 14px; opacity: .6; }
.nav-mode-btn:hover { border-color: var(--accent); }
.nav-modes { display: grid; gap: 8px; }
.nav-mode { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.nav-mode.on { border-color: var(--accent); background: var(--accent-soft); }
.nav-mode span { font-size: 12px; color: var(--muted); }
.nav-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; font-size: 13px; }
.nav-custom label { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .nav-tools { display: none; } }

.backup-nag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; }
.backup-nag > div { flex: 1; min-width: 240px; }
.backup-nag .ico { width: 18px; height: 18px; color: var(--warn); }

.help-tip { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--muted2); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0; margin-left: 2px; flex: none; }
.help-tip:hover { border-color: var(--accent); color: var(--accent); }
.help-pop { position: absolute; z-index: 3500; background: var(--text); color: var(--panel); font-size: 12.5px; line-height: 1.55; padding: 12px 14px; border-radius: 10px; box-shadow: var(--shadow-lg); }
.tour-step { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin-bottom: 6px; }
.tour-dots { display: flex; gap: 6px; margin-top: 14px; } .tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .tour-dots span.on { background: var(--accent); width: 18px; border-radius: 4px; }
.more-row { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px; font-size: 12.5px; color: var(--muted2); }
.toast-link { color: inherit; text-decoration: underline; cursor: pointer; font-weight: 600; margin-left: 4px; }

.bell-wrap { position: relative; }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.bell-badge[hidden] { display: none; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 380px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); z-index: 420; padding: 6px; }
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; border-bottom: 1px solid var(--border2); margin-bottom: 4px; }
.bell-group { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 8px 4px; }
.bell-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--text); font-size: 12.5px; }
.bell-item:hover { background: var(--panel2); }
.bell-item.unread { background: var(--accent-soft); }
.bell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-text b { font-weight: 600; } .bell-text span { color: var(--muted2); font-size: 12px; }
.bell-dot { display: block; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--accent); }
.bell-dot.bad { background: var(--bad); } .bell-dot.warn { background: var(--warn); }
.bell-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bell-empty, .bell-foot { font-size: 12.5px; color: var(--muted2); padding: 14px 10px; line-height: 1.5; }
.bell-foot { border-top: 1px solid var(--border2); padding: 10px; font-size: 12px; }
/* ---------- Все образцы: фильтры и сортировка ---------- */
.sv-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-items: end; margin: 10px 0 8px; }
.sv-filters label { font-size: 11px; color: var(--muted2); font-weight: 500; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-filters select, .sv-filters input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; background: var(--panel); color: var(--text); min-width: 0; }
.sv-filters select { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.sv-filters select:focus, .sv-filters input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(37,99,235,.15)); }
.sv-filters button.reset { height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--muted2); }
.sv-filters button.reset:hover { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.sv-chips:empty { display: none; }
.sv-chips .pill .x { cursor: pointer; margin-left: 6px; opacity: .6; }
.sv-chips .pill .x:hover { opacity: 1; }
.sv-th { cursor: pointer; white-space: nowrap; user-select: none; }
.sv-th:hover { color: var(--accent); }
.sv-th.sorted { color: var(--accent); }
.sv-arrow { margin-left: 4px; opacity: .35; font-size: 10px; }
.sv-th.sorted .sv-arrow { opacity: 1; }
.sv-table td.num, .sv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .sv-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* компактная таблица «Все образцы» — чтобы помещалась по ширине */
.sv-table { font-size: 12px; }
.sv-table th, .sv-table td { padding: 5px 5px !important; }
.sv-table thead th { font-size: 10.5px; letter-spacing: .2px; }
.sv-table .sv-arrow { margin-left: 2px; }
.sv-table td { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-table td:last-child, .sv-table td:nth-last-child(2) { max-width: none; overflow: visible; }
.sv-table .sv-comp { font-size: 11.5px; }
.sv-table .badge { font-size: 10.5px !important; padding: 0 6px !important; height: 18px; }
.sv-table .help-tip { display: none; }
.sv-table .bc-chip { font-size: 11.5px; }
.sv-table thead th { text-transform: none; font-size: 11px; letter-spacing: 0; }
.sv-table td:nth-last-child(2) { white-space: normal; max-width: 120px; }
.sv-table td:nth-last-child(2) .badge { margin: 1px 0; }
/* ---------- Статистика, what-if, аномалии, сравнение ---------- */
.ss-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.ss-controls label { font-size: 11px; color: var(--muted2); font-weight: 500; display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.ss-controls select, .ss-controls input { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; background: var(--panel); color: var(--text); }
.ss-controls > .mini-btn { height: 32px; }
.ss-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ss-col { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel2); }
.ss-name { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.ss-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--border2); }
.ss-row:last-child { border-bottom: none; }
.ss-row span { color: var(--muted); }
.ss-verdict { border-radius: 10px; padding: 11px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 10px; border: 1px solid var(--border); background: var(--panel2); }
.ss-verdict.good { background: var(--good-bg); border-color: transparent; }
.ss-verdict.warn { background: var(--warn-bg); border-color: transparent; }
.ss-verdict.bad { background: var(--bad-bg); border-color: transparent; }
.ss-tests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; font-size: 12px; }
.ss-tests > div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.ss-tests span { color: var(--muted); }
.ss-h { font-size: 13px; margin: 16px 0 8px; }
.good-text { color: var(--good); font-weight: 600; }
.wi-table td { vertical-align: middle; }
.wi-input { display: flex; align-items: center; gap: 4px; }
.wi-input input { width: 72px; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); text-align: right; font-size: 12.5px; }
.wi-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.wi-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 12px 0 10px; }
.wi-result .rep-kpi .v { font-size: 20px; }
.rep-kpi.neutral { background: transparent; }
.an-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--border2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.an-bar.wide { width: 120px; }
.an-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.an-bar span.hi { background: var(--bad); }
.an-num { font-variant-numeric: tabular-nums; font-size: 12px; }
.cmp-modes { flex-wrap: wrap; margin: 10px 0 12px; }
.cmp-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cmp-t { border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--border); }
.cmp-t span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 12px; }
.cmp-t.a span { background: #2563eb; } .cmp-t.b span { background: #e8590c; }
.cmp-table td:first-child { color: var(--muted); }

/* ---------- Рекомендации и причины брака ---------- */
.advice-block { margin-bottom: 6px; }
.advice-list { margin: 4px 0 10px 18px; padding: 0; font-size: 12.5px; line-height: 1.6; }
.advice-table { font-size: 12px; }
.advice-table tr.advice-cur td { background: var(--bad-bg); font-weight: 600; }
.cause-list { display: flex; flex-direction: column; gap: 4px; }
.cause-row { display: grid; grid-template-columns: 76px 1fr auto auto auto; gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid var(--border2); border-radius: 8px; font-size: 12.5px; }
.cause-row.yes { background: var(--bad-bg); border-color: transparent; }
.cause-row.no { opacity: .55; }
.cause-grp { font-size: 11px; color: var(--muted2); }
.cause-stat { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.advice-pop { position: fixed; right: 22px; bottom: 90px; z-index: 2900; width: 330px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--bad); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 12.5px; animation: slideIn .2s; }
.advice-pop .ap-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.advice-pop .x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.advice-pop .ap-body { line-height: 1.5; color: var(--text); }
.advice-pop .ap-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ---------- Поиск по всему ---------- */
.gs-overlay { align-items: flex-start; padding-top: 10vh; }
.gs-box { width: 640px; max-width: calc(100vw - 32px); background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border); }
.gs-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.gs-input input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-size: 15px; min-width: 0; }
.gs-results { max-height: 56vh; overflow-y: auto; padding: 6px 0; }
.gs-group { display: flex; justify-content: space-between; padding: 8px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted2); }
.gs-item { padding: 7px 16px; cursor: pointer; border-left: 3px solid transparent; }
.gs-item:hover, .gs-item.active { background: var(--row-hover); border-left-color: var(--accent); }
.gs-t { font-size: 13px; font-weight: 500; }
.gs-s { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-more, .gs-empty { padding: 6px 16px; font-size: 12px; color: var(--muted); }
.gs-empty { padding: 18px 16px; }
.gs-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.gs-foot span:last-child { margin-left: auto; }
kbd { display: inline-block; font: 10.5px/1 var(--font); padding: 3px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: var(--panel2); margin-right: 2px; }
.actions .icon-btn.gs-btn { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; }
.gs-btn .gs-btn-t { font-size: 12.5px; }

/* ---------- Данные устарели ---------- */
.stale-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--warn-bg); color: var(--text); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; font-size: 13px; }
.stale-banner > .ico { color: var(--warn); flex: none; }
.stale-banner .sb-text { flex: 1; min-width: 220px; }
.stale-banner .sb-thr { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.stale-banner .sb-thr select { height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; }
.stale-banner .x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }

/* ---------- Массовые операции ---------- */
.sv-chk { width: 30px; text-align: center; }
.sv-chk input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
tr.sv-selected td { background: var(--accent-soft) !important; }
.sv-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; margin: 0 0 8px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; position: sticky; top: 0; z-index: 3; }
.sv-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sv-bulk .mini-btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 760px) {
  .ss-duo, .cmp-titles, .ss-tests, .wi-result { grid-template-columns: 1fr; }
  .cause-row { grid-template-columns: 1fr auto auto; }
  .cause-row .cause-grp, .cause-row .cause-stat { display: none; }
  .gs-btn .gs-btn-t, .gs-btn kbd { display: none; }
  .advice-pop { right: 16px; bottom: 80px; }
}
.cause-more { display: block; }
.cause-more > summary { cursor: pointer; font-size: 12px; color: var(--accent); padding: 4px 2px; list-style: none; }
.cause-more[open] > summary { margin-bottom: 4px; }
.cause-more > .cause-row { margin-bottom: 4px; }
/* ---------- Учёт брака ---------- */
.def-filters label { min-width: 120px; }
.def-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 14px; }
.def-table-wrap { max-height: 70vh; overflow: auto; }
.def-table { font-size: 12px; }
.def-table thead th { position: sticky; top: 0; z-index: 2; background: var(--th-bg); }
.def-table td.def-name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.def-row { cursor: pointer; }
.def-sub td { font-size: 12px; color: var(--muted); }
.def-sub td b { font-weight: 500; color: var(--text); }
.def-total td { border-top: 2px solid var(--border); background: var(--panel2); }
.def-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.def-calc { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); padding: 10px 12px; }
.def-calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; font-size: 12.5px; }
.def-calc-grid > div { display: flex; flex-direction: column; gap: 1px; }
.def-calc-grid span { color: var(--muted); font-size: 11px; }
.def-calc-grid > div:first-child { grid-column: 1 / -1; }
.danger-text { color: var(--bad) !important; }
.def-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin-bottom: 10px; }
.def-thick { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.def-thick label { font-size: 11px; color: var(--muted2); display: flex; flex-direction: column; gap: 3px; }
.def-thick input { width: 70px; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); }
.def-days { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.print-landscape { max-width: 1180px; }
.print-landscape .passport-frame { height: 70vh; }

/* ---------- Бланки для печати ---------- */
.forms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.form-card.wide { grid-column: 1 / -1; }
.form-card .ss-controls { margin: 0; }
.form-card .ss-controls label { min-width: 120px; }
.form-card label.chk { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); align-self: center; }
.form-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
@media (max-width: 760px) {
  .def-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .def-grid, .def-settings, .forms-grid, .def-calc-grid { grid-template-columns: 1fr; }
  .form-card.wide { grid-column: auto; }
}
/* общие фильтры тестов не относятся к этим разделам */
body[data-tab="defects"] #stickyBar, body[data-tab="forms"] #stickyBar, body[data-tab="recipes"] #stickyBar,
body[data-tab="defects"] #notifBanner, body[data-tab="forms"] #notifBanner, body[data-tab="recipes"] #notifBanner,
body[data-tab="defects"] #staleBanner, body[data-tab="forms"] #staleBanner { display: none !important; }
.def-text { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }

/* ---------- Лаборатория: бюджет, красочная ---------- */
body[data-tab="problems"] #stickyBar, body[data-tab="budget"] #stickyBar, body[data-tab="paint"] #stickyBar,
body[data-tab="problems"] #notifBanner, body[data-tab="budget"] #notifBanner, body[data-tab="paint"] #notifBanner,
body[data-tab="problems"] #staleBanner, body[data-tab="budget"] #staleBanner, body[data-tab="paint"] #staleBanner { display: none !important; }
select.bud-st { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; padding: 0 6px; }
select.bud-st.st-got { background: var(--good-bg); color: var(--good); } select.bud-st.st-ordered { background: var(--info-bg); } select.bud-st.st-rejected { color: var(--muted); text-decoration: line-through; }
.pnt-find input { height: 34px; width: 320px; max-width: 60vw; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }
.pnt-found { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 1px solid var(--border); background: var(--panel2); border-radius: 10px; padding: 10px 14px; margin: 8px 0 4px; font-size: 12.5px; line-height: 1.5; }
.pnt-found .k { font-size: 11px; color: var(--muted2); margin-bottom: 2px; }
.pnt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
.pnt-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }
.pnt-num, .pnt-text { height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12.5px; }
.pnt-num { width: 60px; text-align: right; } .pnt-text { width: 100%; min-width: 90px; }
.pnt-barrels select { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; }
.pnt-step { display: inline-flex; align-items: center; gap: 6px; } .pnt-step b { min-width: 22px; text-align: center; }
.pnt-racks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 6px; }
.pnt-rack { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--panel2); }
.pnt-rack-h { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; }
.pnt-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pnt-chip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnt-chip:hover { border-color: var(--accent); } .pnt-chip.dup { background: var(--warn-bg); border-color: transparent; }
.pnt-recipes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
.pnt-rscroll { max-height: 66vh; overflow: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.pnt-ritem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; text-align: left; border: 1px solid var(--border2); background: var(--panel); color: var(--text); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; }
.pnt-ritem.active { border-color: var(--accent); background: var(--accent-soft); }
.pnt-bar { display: flex; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--border2); } .pnt-bar i { display: block; height: 100%; }
.pnt-mix td, .pnt-mix th { font-size: 13px; }
.pnt-calc input { width: 90px; height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); text-align: right; }
.pnt-calc th input { width: 80px; margin-top: 3px; }
.pnt-calc td.pc-issue { background: #16a34a22; font-weight: 600; } .pnt-calc td.pc-left { background: #f59e0b22; }
@media (max-width: 900px) { .pnt-grid, .pnt-recipes, .pnt-found { grid-template-columns: 1fr; } }
.pnt-stack { display: flex; flex-direction: column; gap: 18px; } .pnt-barrels td:first-child { white-space: nowrap; }
.pnt-find { display: flex; gap: 6px; align-items: center; }

/* ---------- Вёдра на стеллажах ---------- */
.bk-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 8px 0 10px; }
.bk-cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 9px; background: var(--border2); font-size: 10.5px; line-height: 16px; }
.quick-filters button.active .bk-cnt { background: rgba(255,255,255,.25); }
.bk-sort { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bk-sort select { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; }
.bk-machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bk-mstat { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 12px; overflow: hidden; }
.bk-mstat b { font-size: 17px; } .bk-mstat i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 0 2px 2px 0; }
.bk-racks { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.bk-rack { border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); overflow: hidden; }
.bk-rack header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 12px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.bk-rack header b { font-size: 14px; color: var(--text); }
.bk-dupc { color: var(--warn); font-weight: 600; }
/* полка: вёдра стоят рядами, под каждым рядом — «доска» */
.bk-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); grid-auto-rows: 72px; gap: 12px 6px; padding: 12px 10px 10px; background-image: linear-gradient(to bottom, transparent 75px, var(--border) 75px, var(--border) 78px, transparent 78px); background-size: 100% 84px; background-position: 0 12px; }
.bk { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 0; height: 72px; padding: 6px 2px 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; transition: transform .1s, background .1s; }
.bk:hover { background: var(--panel); border-color: var(--border); transform: translateY(-1px); }
.bk-can { --paint: #cfd4dc; position: relative; width: 40px; height: 36px; border-radius: 3px 3px 9px 9px; background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(255,255,255,.18) 35%, rgba(0,0,0,.08) 80%), var(--paint); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.18); }
.bk-lid { position: absolute; left: -3px; right: -3px; top: -4px; height: 6px; border-radius: 3px; background: #9aa3ad; border: 1px solid rgba(0,0,0,.2); }
.bk.norec .bk-can { background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 4px, var(--border2) 4px, var(--border2) 8px); border-style: dashed; }
.bk-drop { position: absolute; right: 3px; bottom: 4px; width: 12px; height: 12px; fill: #3b9ae1; stroke: #fff; stroke-width: 1.5; }
.bk-n { position: absolute; top: -9px; right: -10px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--panel2); }
.bk-num { font-size: 13px; font-weight: 700; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-note { font-size: 10px; color: var(--muted); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk.dup .bk-num { color: var(--warn); }
.bk.dim { opacity: .25; } .bk.hit { background: var(--accent-soft); border-color: var(--accent); }
.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 11.5px; color: var(--muted); align-items: center; }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-can { display: inline-block; width: 12px; height: 12px; border-radius: 2px 2px 4px 4px; background: linear-gradient(90deg, #1f5fbf, #e0402a, #f5d020); border: 1px solid rgba(0,0,0,.2); }
.lg-can.norec { background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 2px, var(--border) 2px, var(--border) 4px); border-style: dashed; }
.lg-dup { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background: var(--warn); }
@media (max-width: 760px) { .bk-racks { grid-template-columns: 1fr; } }
.forms-grid .form-card .form-actions { margin-top: auto; }
/* учёт брака ГА */
.ga-card { padding: 16px 18px; margin-bottom: 12px; }
.ga-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ga-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.ga-kpi { background: var(--panel2); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--border2); }
.ga-kpi .k { font-size: 12px; color: var(--muted2); } .ga-kpi b { font-size: 20px; } .ga-kpi small { font-size: 11.5px; color: var(--muted); }
.ga-kpi.good { border-left-color: var(--good); } .ga-kpi.warn { border-left-color: var(--warn); } .ga-kpi.bad { border-left-color: var(--bad); }
.ga-filters { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ga-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; align-items: end; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin: 4px 0 10px; }
.ga-add label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted2); font-weight: 500; }
.ga-add label.wide { grid-column: span 2; }
.ga-add input, .ga-add select { height: 32px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; background: var(--panel); color: var(--text); min-width: 0; }
.ga-add .mini-btn.primary { height: 32px; }
.ga-table { font-size: 12.5px; } .ga-table td { white-space: nowrap; } .ga-table td.ga-com { white-space: normal; max-width: 260px; }
.ga-row-a { text-align: right; } .ga-row-a .mini-btn { margin-left: 3px; }
.ga-total td { font-weight: 700; border-top: 2px solid var(--border); }
.ga-brig { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.ga-chip { background: var(--panel2); border-radius: 999px; padding: 3px 10px; }
.ga-table thead th { text-transform: none; font-size: 11.5px; } .ga-table td { max-width: none; overflow: visible; }
.ga-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ga-kpi-total { background: var(--accent-soft); }
.ga-h { margin: 14px 0 6px; font-size: 13px; color: var(--muted2); text-transform: uppercase; letter-spacing: .3px; }
.ga-shifts td, .ga-shifts th { white-space: nowrap; }
.ga-part { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel2); }
.ga-part.p0 { background: #e0ecff; color: #1d4ed8; } .ga-part.p1 { background: #fdeccf; color: #9a5b00; } .ga-part.p2 { background: #e6f4ea; color: #1e6b45; }
.ga-add .ga-kgf input { font-weight: 600; }
.ga-add .ga-kgf.p0 { color: #2563eb; } .ga-add .ga-kgf.p1 { color: #b45309; } .ga-add .ga-kgf.p2 { color: #15803d; }
body[data-tab="ga"] #stickyBar, body[data-tab="ga"] #notifBanner, body[data-tab="ga"] #staleBanner { display: none !important; }
/* подбор композиции под марку */
.pm-ctl { align-items: end; } .pm-norm { font-size: 12px; color: var(--muted); align-self: center; }
.pm-best { margin: 10px 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(26,127,55,.08); border: 1px solid rgba(26,127,55,.25); font-size: 13.5px; line-height: 1.5; }
.pm-best.none { background: var(--panel2); border-color: var(--border); color: var(--muted); }
.pm-best .pm-comp { font-weight: 700; }
.pm-table tr.pm-top td { background: rgba(26,127,55,.06); }
/* брак ГА ↔ тесты */
.ga-tc .mini-btn { white-space: nowrap; font-size: 12px; } .ga-tc .ga-tc-bad { border-color: rgba(198,40,40,.4); color: var(--bad); }
.ga-cmp-box { margin-top: 6px; } .ga-cmp th small { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ga-tl-head { margin-bottom: 10px; font-size: 13.5px; }
.ga-in-test { margin: 8px 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ga-in-test.bad { border-color: rgba(198,40,40,.35); background: rgba(198,40,40,.06); }
/* резервные копии */
.bk-state { margin: 10px 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.bk-state.ok { background: rgba(26,127,55,.08); border: 1px solid rgba(26,127,55,.25); }
.bk-state.bad { background: rgba(198,40,40,.07); border: 1px solid rgba(198,40,40,.3); color: var(--bad); font-weight: 600; }
.bk-kv { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; } .bk-kv b { color: var(--text); }
.bk-card code { font-size: 12px; background: var(--panel2); padding: 1px 5px; border-radius: 4px; }
.pm-chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pm-chip small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.pm-sups { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.pm-sups b { color: var(--text); font-weight: 600; }
/* сводка за сутки */
body[data-tab="daily"] #stickyBar { display: none; }
.dly { padding: 18px 20px; }
.dly-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .dly-nav input[type=date] { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; background: var(--panel); color: var(--text); }
.dly-day { font-size: 15px; font-weight: 700; margin: 10px 0 12px; } .dly-day::first-letter { text-transform: uppercase; }
.dly-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dly-kpi { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--panel2); }
.dly-kpi span { display: block; font-size: 12px; color: var(--muted); } .dly-kpi b { display: block; font-size: 24px; margin: 2px 0; } .dly-kpi small { color: var(--muted); font-size: 11.5px; }
.dly-kpi.bad { border-color: rgba(198,40,40,.4); } .dly-kpi.bad b { color: var(--bad); } .dly-kpi.good b { color: var(--good); } .dly-kpi.warn b { color: var(--warn); }
.dly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px 20px; }
@media (max-width: 640px) { .dly-grid { grid-template-columns: 1fr; } }
.dly-sec h4 { margin: 0 0 8px; font-size: 13.5px; } .dly-sec h4 small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.dly-sec .dly-t { font-size: 12.5px; } .dly-ok { color: var(--good); font-size: 13px; padding: 6px 0; } .dly-ok.muted { color: var(--muted); }
.dly-line { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--border2); line-height: 1.45; } .dly-line.bad { color: var(--bad); } .dly-line.warn b { color: var(--warn); } .dly-line.good { color: var(--good); }
/* «Доступ»: здоровье сайта, кто на сайте, журнал администратора */
.acp-health { margin: 12px 0 4px; } .acp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.acp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.acp-t { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--panel); min-width: 0; }
.acp-t span { display: block; font-size: 11.5px; color: var(--muted); } .acp-t b { display: block; font-size: 17px; margin: 1px 0; } .acp-t small { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.acp-t.good b { color: var(--good); } .acp-t.bad { border-color: rgba(198,40,40,.4); } .acp-t.bad b { color: var(--bad); } .acp-t.warn b { color: var(--warn); }
.acp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); margin-right: 6px; vertical-align: 1px; } .acp-dot.on { background: var(--good); box-shadow: 0 0 0 3px rgba(26,127,55,.18); }
.acp-seen { display: block; font-size: 11px; }
.acp-inbar { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: rgba(214,140,0,.08); border: 1px solid rgba(214,140,0,.3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acp-ltools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .acp-ltools select { height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0 8px; }
.acp-k { display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 4px; background: var(--panel2); color: var(--muted); } .acp-k.admin { background: rgba(37,99,235,.12); color: var(--accent); }
.acp-log .acp-d { max-width: 520px; white-space: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .acp-tiles { grid-template-columns: 1fr 1fr; } .acp-log .acp-d { max-width: 240px; } .ac-users td, .ac-users th { white-space: normal; } }
/* «Доступ» на телефоне: таблица пользователей — карточками, без горизонтальной прокрутки страницы */
#accessPanel .table-wrap { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .ac-users thead { display: none; }
  .ac-users, .ac-users tbody { display: block; width: 100%; }
  .ac-users tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 4px; border-bottom: 1px solid var(--border2); }
  .ac-users td { display: block; padding: 0 !important; border: 0 !important; white-space: normal; }
  .ac-users td:nth-child(1) { grid-column: 1 / -1; }
  .ac-users td:nth-child(2)::before { content: 'Должность: '; color: var(--muted); }
  .ac-users td:nth-child(3) { grid-column: 1 / -1; }
  .ac-users td:nth-child(5) { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
  .ac-users td.ac-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .acp-log thead { display: none; } .acp-log, .acp-log tbody { display: block; } .acp-log tr { display: block; padding: 8px 2px; border-bottom: 1px solid var(--border2); } .acp-log td { display: inline; border: 0 !important; padding: 0 6px 0 0 !important; } .acp-log td.acp-d { display: block; max-width: none; }
}
/* админ-панель, часть 2 */
.appr-box { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 12px; margin: 0 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); font-size: 13px; }
.appr-box.on { border-color: rgba(26,127,55,.35); background: rgba(26,127,55,.07); } .appr-box.on b { color: var(--good); }
.appr-h { width: 100%; font-size: 12px; color: var(--muted); } .appr-h summary { cursor: pointer; } .appr-h div { padding: 2px 0; }
.req-miss { border-color: var(--bad) !important; box-shadow: 0 0 0 3px rgba(198,40,40,.15) !important; }
label.req-on > span::after, label.req-on::before { content: ''; } label.req-on > span::after { content: ' *'; color: var(--bad); font-weight: 700; }
.ap2-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin-top: 8px; font-size: 13px; } .ap2-menu label { display: flex; gap: 6px; align-items: center; }
.ap2-req { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; } .ap2-rc { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .ap2-rc b { display: block; margin-bottom: 6px; } .ap2-rc label { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 2px 0; }
.ap2-act tr.ap2-idle td { color: var(--muted); }
.cl-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border2); font-size: 13px; }
.onb p { font-size: 14px; } .onb-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.onb-t { text-align: left; border: 1px solid var(--border); background: var(--panel2); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text); } .onb-t:hover { border-color: var(--accent); } .onb-t b { display: block; font-size: 13px; } .onb-t span { font-size: 11.5px; color: var(--muted); }
.onb h4 { margin: 6px 0; } .onb-how { display: grid; grid-template-columns: 160px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border2); font-size: 13px; } @media (max-width: 640px) { .onb-how { grid-template-columns: 1fr; } }
.onb-open { margin-bottom: 10px; }
/* «Здоровье сайта»: состояние с «лентой самописца» и сводка показаний строками */
.acp-health { --acp-c: var(--good); margin: 14px 0 8px; font-variant-numeric: tabular-nums; }
.acp-health .acp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.acp-h h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.acp-upd { color: var(--muted2); font-size: 12px; }
.acp-sp { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.acp-sp button, .acp-ref { border: 0; background: var(--panel); color: var(--muted2); font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer; min-height: 30px; }
.acp-sp button + button { border-left: 1px solid var(--border); } .acp-sp button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.acp-ref { border: 1px solid var(--border); border-radius: 8px; font-size: 15px; padding: 3px 10px; }
.acp-sp button:focus-visible, .acp-ref:focus-visible, .acp-row[data-acp-act]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* состояние: цветная кромка слева, слово-вердикт, проблемы с подсказками, лента */
.acp-state { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 12px 20px; margin-bottom: 14px; overflow: hidden; }
.acp-state::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--acp-c); }
.acp-state.warn { --acp-c: var(--warn); } .acp-state.bad { --acp-c: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.acp-sw { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--acp-c); line-height: 1.2; }
.acp-sw i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acp-c); color: var(--panel); font-style: normal; font-size: 15px; }
.acp-state > p { margin: 4px 0 0 36px; color: var(--muted2); max-width: 70ch; }
.acp-pl { list-style: none; margin: 10px 0 0 36px; padding: 0; display: grid; gap: 8px; max-width: 80ch; }
.acp-pl li { background: none; border-radius: 0; margin: 0; display: grid; gap: 1px; padding-left: 12px; border-left: 2px solid var(--warn); } .acp-pl li.l-bad { border-left-color: var(--bad); }
.acp-pl b { font-weight: 600; } .acp-pl span { color: var(--muted2); font-size: 12.5px; }
.acp-tape { margin: 12px 0 0 36px; } .acp-tape svg { display: block; width: 100%; height: 22px; }
.acp-tape figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--muted2); } .acp-tape figcaption span:nth-child(2) { text-align: center; }
/* показания строками: значок | название | значение | график | пояснение | действие */
.acp-rd { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px; }
.acp-g + .acp-g { border-top: 1px solid var(--border); }
.acp-g h4 { margin: 12px 0 2px; font-size: 13px; font-weight: 600; color: var(--muted2); }
.acp-row { display: grid; grid-template-columns: 18px minmax(130px, 170px) minmax(90px, 120px) minmax(90px, 170px) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 7px 4px; border-radius: 8px; }
.acp-row + .acp-row { border-top: 1px dashed var(--border2); }
.acp-row[data-acp-act] { cursor: pointer; } .acp-row[data-acp-act]:hover { background: var(--panel2); } .acp-row[data-acp-act] .acp-d { color: var(--accent); }
.acp-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; color: var(--panel); background: transparent; }
.acp-row.l-good .acp-ic { background: var(--good); } .acp-row.l-warn .acp-ic { background: var(--warn); } .acp-row.l-bad .acp-ic { background: var(--bad); }
.acp-n { color: var(--muted2); } .acp-v { font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; }
.acp-row.l-warn .acp-v { color: var(--warn); } .acp-row.l-bad .acp-v { color: var(--bad); }
.acp-d { color: var(--muted2); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; } .acp-a .mini-btn { white-space: nowrap; }
.acp-spark { display: block; width: 100%; height: 22px; } .acp-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.acp-row.l-warn .acp-spark path { stroke: var(--warn); } .acp-row.l-bad .acp-spark path { stroke: var(--bad); }
.acp-foot { margin-top: 10px; }
/* средняя ширина (ноутбук с меню слева): пояснение — второй строкой под названием */
@media (min-width: 761px) and (max-width: 1360px) {
  .acp-row { grid-template-columns: 18px minmax(130px, 1fr) minmax(90px, auto) minmax(90px, 170px) auto; grid-template-areas: 'i n v s a' '. d d d d'; }
  .acp-ic { grid-area: i; } .acp-n { grid-area: n; } .acp-v { grid-area: v; } .acp-s { grid-area: s; } .acp-a { grid-area: a; } .acp-d { grid-area: d; }
}
/* средняя ширина (ноутбук с меню слева): пояснение — второй строкой под названием */
@media (min-width: 761px) and (max-width: 1360px) {
  .acp-row { grid-template-columns: 18px minmax(130px, 1fr) minmax(90px, auto) minmax(90px, 170px) auto; grid-template-areas: 'i n v s a' '. d d d d'; }
  .acp-ic { grid-area: i; } .acp-n { grid-area: n; } .acp-v { grid-area: v; } .acp-s { grid-area: s; } .acp-a { grid-area: a; } .acp-d { grid-area: d; }
}
@media (max-width: 760px) {
  .acp-sp { margin-left: 0; } .acp-sp button, .acp-ref { min-height: 40px; }
  .acp-state { padding: 12px 12px 10px 16px; } .acp-sw { font-size: 19px; } .acp-state > p, .acp-pl, .acp-tape { margin-left: 0; }
  .acp-tape figcaption span:nth-child(2) { display: none; }
  .acp-rd { padding: 2px 10px; }
  .acp-row { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: 'i n v' '. d d' '. s s' '. a a'; gap: 2px 10px; padding: 9px 0; }
  .acp-ic { grid-area: i; } .acp-n { grid-area: n; color: var(--text); } .acp-v { grid-area: v; } .acp-d { grid-area: d; font-size: 12px; } .acp-s { grid-area: s; } .acp-a { grid-area: a; }
  .acp-s:empty, .acp-a:empty { display: none; } .acp-a .mini-btn { min-height: 40px; margin-top: 4px; } .acp-foot .mini-btn { min-height: 40px; }
}
/* значки SVG, точка «сейчас» на графике, легенда ленты */
.acp-ic svg, .acp-sw i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acp-sw i svg { width: 18px; height: 18px; }
.acp-ref { display: inline-grid; place-items: center; } .acp-ref svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acp-spw { position: relative; display: block; } .acp-dot2 { position: absolute; right: -2px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.acp-row.l-warn .acp-dot2 { background: var(--warn); } .acp-row.l-bad .acp-dot2 { background: var(--bad); }
.acp-lg { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; } .acp-lg i { display: inline-block; width: 6px; border-radius: 1px; margin-left: 6px; }
.acp-lg i.g { height: 10px; background: var(--good); opacity: .55; } .acp-lg i.w { height: 14px; background: var(--warn); } .acp-lg i.b { height: 14px; background: var(--bad); } .acp-lg i.n { height: 10px; background: var(--border); }
.acp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.acp-a .mini-btn[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 760px) { .acp-sp button, .acp-ref, .acp-a .mini-btn, .acp-foot .mini-btn { min-height: 44px; } .acp-ref { min-width: 44px; } .acp-lg { display: none; } .acp-tape figcaption span:nth-child(2) { display: none; } }

/* «Учёт брака ГА» компактно: показатели строкой, фильтры и ввод в одну-две строки, плотные таблицы */
.ga-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin: 8px 0; }
.ga-kpi { padding: 6px 10px; border-radius: 8px; gap: 0; } .ga-kpi b { font-size: 16px; line-height: 1.3; } .ga-kpi .k { font-size: 11.5px; } .ga-kpi small { font-size: 11px; }
.ga-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 4px; } .ga-filters label { flex: 1 1 130px; max-width: 200px; font-size: 11.5px; }
.ga-filters select { height: 30px; font-size: 12.5px; }
.ga-h { margin: 10px 0 4px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.ga-shifts td, .ga-shifts th, .ga-table td, .ga-table th { padding: 4px 8px; } .ga-shifts, .ga-table { font-size: 12.5px; }
.ga-add { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 8px; padding: 8px 10px; margin: 8px 0 4px; }
.ga-add label { gap: 2px; } .ga-add input, .ga-add select, .ga-add .mini-btn.primary { height: 30px; }
.ga-rec { margin-top: 6px; } .ga-rec > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; list-style-position: inside; }
.ga-rec > summary .muted { font-weight: 400; margin-left: 6px; } .ga-rec-hint { font-size: 12px; }
.ga-rec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ga-brig { margin-top: 6px; }
table.data-table.ga-shifts td, table.data-table.ga-shifts th, table.data-table.ga-table td, table.data-table.ga-table th { padding-top: 4px; padding-bottom: 4px; line-height: 1.3; }
.ga-filters.sv-filters select { height: 30px; min-height: 30px; padding-top: 0; padding-bottom: 0; }
/* одна таблица по сменам: кнопки строки маленькие, комментарий в одну строку */
table.data-table.ga-table td.ga-row-a { padding-top: 2px; padding-bottom: 2px; white-space: nowrap; }
.ga-row-a .mini-btn { height: 24px; min-width: 24px; padding: 0 6px; font-size: 12px; }
table.data-table.ga-table td.ga-com { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-table .ga-tc .mini-btn { height: 24px; padding: 0 8px; }
/* ---------- Красочная: оформление ---------- */
.pnt-shell { display: flex; flex-direction: column; gap: 14px; }
.pnt-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }
.pnt-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #1f5fbf, #6a3fb5, #e0218a, #e0402a, #f08a1c, #f5d020, #1f9d55); }
.pnt-hero-t { display: flex; align-items: center; gap: 14px; }
.pnt-hero-t h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.pnt-hero-t .sec-sub::first-letter { text-transform: uppercase; }
.pnt-hero-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 38px; height: 38px; padding: 4px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); }
.pnt-hero-logo i { border-radius: 50%; }
.pnt-hero-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pnt-search { position: relative; display: flex; align-items: center; }
.pnt-search .ico { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.pnt-search input { height: 38px; width: 340px; max-width: 70vw; padding: 0 32px 0 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); color: var(--text); font-size: 13.5px; transition: border-color .12s, box-shadow .12s; }
.pnt-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); }
.pnt-search .x { position: absolute; right: 8px; border: none; background: none; color: var(--muted); font-size: 17px; cursor: pointer; }
.pnt-search.sm input { height: 32px; width: 100%; font-size: 12.5px; border-radius: 8px; }
.pnt-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pnt-kpi { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.pnt-kpi:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow); }
.pnt-kpi-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.pnt-kpi-ic .ico { width: 18px; height: 18px; }
.pnt-kpi.bad .pnt-kpi-ic { background: var(--bad-bg); color: var(--bad); } .pnt-kpi.bad .v { color: var(--bad); }
.pnt-kpi.good .pnt-kpi-ic { background: var(--good-bg); color: var(--good); }
.pnt-kpi-t { display: flex; flex-direction: column; min-width: 0; }
.pnt-kpi .k { font-size: 11.5px; color: var(--muted); } .pnt-kpi .v { font-size: 22px; font-weight: 700; line-height: 1.2; }
.pnt-kpi .d { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warn-t { color: var(--warn); font-weight: 600; }
.pnt-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); width: fit-content; max-width: 100%; }
.pnt-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: none; border-radius: 9px; background: transparent; color: var(--muted2); font-size: 13px; font-weight: 500; cursor: pointer; }
.pnt-tabs button .ico { width: 16px; height: 16px; }
.pnt-tabs button:hover { color: var(--text); background: var(--panel); }
.pnt-tabs button.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); font-weight: 600; }
.pnt-body { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }
.pnt-empty { padding: 36px 24px; text-align: center; } .pnt-empty h3 { margin: 12px 0 6px; } .pnt-empty p { color: var(--muted); max-width: 520px; margin: 0 auto 14px; }
.pnt-empty-art { display: flex; justify-content: center; gap: 14px; }
/* цветной кружок-образец */
.pnt-sw { --c: #ccc; display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.12); vertical-align: middle; }
.pnt-sw.none { background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 3px, var(--border) 3px, var(--border) 6px); }
.pnt-sw.sm { width: 14px; height: 14px; margin-right: 7px; } .pnt-sw.xl { width: 46px; height: 46px; } .pnt-sw.xxl { width: 72px; height: 72px; }
/* найденный пантон */
.pnt-found2 { display: grid; grid-template-columns: auto minmax(120px, .8fr) repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--accent); background: linear-gradient(0deg, var(--accent-soft), var(--accent-soft)), var(--panel); font-size: 12.5px; line-height: 1.5; }
.pf-title { font-size: 20px; font-weight: 700; } .pf-cell .k { display: block; font-size: 11px; color: var(--muted2); margin-bottom: 2px; }
.pf-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); margin: 0 3px 3px 0; }
.pf-spark { display: block; color: var(--accent); }
/* бочки */
.drum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 12px; }
.drum-card { display: flex; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel2); transition: border-color .12s; }
.drum-card.bad { border-color: var(--bad); background: linear-gradient(0deg, var(--bad-bg), var(--bad-bg)), var(--panel); }
.drum-card.warn { border-color: #e9b949; }
.drum { --c: #999; --lvl: 50%; position: relative; flex: none; width: 58px; height: 84px; border-radius: 10px / 7px; overflow: hidden; background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.25) 35%, rgba(0,0,0,.12) 85%), #d9dde2; border: 2px solid rgba(0,0,0,.25); }
.drum-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl); background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.22) 35%, rgba(0,0,0,.14) 85%), var(--c); transition: height .3s; }
.drum-ribs { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.28) calc(30% + 2px), transparent calc(30% + 2px), transparent 68%, rgba(0,0,0,.28) 68%, rgba(0,0,0,.28) calc(68% + 2px), transparent calc(68% + 2px)); }
.drum-lvl { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.drum.light .drum-lvl { color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.drum-tara { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #333; }
.drum-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.drum-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drum-name .muted { font-weight: 400; font-size: 11.5px; }
.drum-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drum-qty { font-size: 20px; min-width: 26px; text-align: center; }
.drum-st { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.drum-st.ok { background: var(--good-bg); color: var(--good); } .drum-st.warn { background: var(--warn-bg); color: var(--warn); } .drum-st.bad { background: var(--bad); color: #fff; }
.drum-stack { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 14px; }
.dr-mini { --c: #999; width: 10px; height: 13px; border-radius: 3px / 2px; background: var(--c); border: 1px solid rgba(0,0,0,.25); }
.dr-mini.res { outline: 1.5px solid var(--text); outline-offset: 1px; }
.dr-more { font-size: 11px; color: var(--muted); margin-left: 2px; }
.drum-levels { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--panel); border: 1px solid var(--border); width: fit-content; }
.drum-levels button { border: none; background: transparent; color: var(--muted2); font-size: 11px; padding: 2px 7px; border-radius: 5px; cursor: pointer; }
.drum-levels button.on { background: var(--accent); color: #fff; }
.drum-foot { display: flex; gap: 6px; align-items: center; } .drum-foot label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.drum-foot .pnt-num { width: 42px; height: 26px; } .drum-foot .pnt-text { height: 26px; font-size: 12px; }
/* рецепты */
.pnt-recipes { grid-template-columns: 290px minmax(0, 1fr) !important; } .pnt-rdetail { min-width: 0; }
.pnt-rsearch { display: flex; gap: 6px; margin-bottom: 8px; } .pnt-rsearch .pnt-search { flex: 1; }
.pnt-ritem2 { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }
.pnt-ritem2:hover { background: var(--panel2); } .pnt-ritem2.active { background: var(--accent-soft); border-color: var(--accent); }
.ri-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ri-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-tags, .rd-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ri-tag { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted2); white-space: nowrap; }
.ri-tag.rack { background: var(--good-bg); border-color: transparent; color: var(--good); } .ri-tag.water { background: #3b9ae122; border-color: transparent; color: #2b7fc0; } .ri-tag.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.rd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; } .rd-title h4 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.rd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: start; }
.rd-donut { position: relative; width: 170px; height: 170px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.rd-donut-in { position: absolute; inset: 34px; border-radius: 50%; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--border); }
.rd-donut-in b { font-size: 26px; line-height: 1; } .rd-donut-in span { font-size: 11px; color: var(--muted); }
.rd-kg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-bottom: 10px; }
.rd-kg label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted2); }
.rd-kg input#pntKg { width: 90px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600; }
.rd-kg .mini-btn { height: 32px; } .rd-water { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 12.5px !important; color: var(--text) !important; margin-left: 6px; align-self: center; }
.rd-row { display: grid; grid-template-columns: 170px minmax(60px, 1fr) 70px 90px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border2); font-size: 13px; }
.rd-c { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar { height: 10px; border-radius: 5px; background: var(--border2); overflow: hidden; } .rd-bar i { display: block; height: 100%; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.rd-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .rd-g { text-align: right; font-variant-numeric: tabular-nums; } .rd-g b { font-size: 15px; }
.rd-total { border-bottom: none; font-weight: 600; } .rd-total .rd-c { color: var(--muted2); }
.rd-cost { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); }
.rd-cost > div { display: flex; flex-direction: column; } .rd-cost .k { font-size: 11px; color: var(--muted); } .rd-cost b { font-size: 20px; } .rd-cost-note { font-size: 12px; color: var(--muted); margin-left: auto; }
/* расход: вёдра-пиктограммы */
.pb-row { display: inline-flex; gap: 3px; align-items: flex-end; vertical-align: middle; margin-right: 6px; }
.pb { --f: 100%; position: relative; width: 14px; height: 17px; border-radius: 2px 2px 4px 4px; border: 1.5px solid var(--text); background: linear-gradient(to top, var(--accent) var(--f), transparent var(--f)); opacity: .85; }
.pb::before { content: ""; position: absolute; left: -3px; right: -3px; top: -4px; height: 2px; border-radius: 1px; background: var(--text); }
.pb-more { font-size: 11px; font-weight: 700; } .pb-t { font-size: 12.5px; font-weight: 600; }
.pnt-calc td.pc-issue, .pnt-calc td.pc-left { white-space: nowrap; }
.pnt-calc td:first-child { white-space: nowrap; }
.pc-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pc-sum > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); }
.pc-sum .k { font-size: 11px; color: var(--muted); } .pc-sum b { font-size: 20px; } .pc-sum .warn-t { font-size: 11px; }
/* вязкость */
.vs-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .vs-bar .pnt-search { width: 260px; }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vs-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; transition: transform .12s, border-color .12s; }
.vs-card:hover { transform: translateY(-1px); border-color: var(--accent); } .vs-card.on { border-color: var(--accent); background: var(--accent-soft); }
.vs-top { display: flex; align-items: center; gap: 2px; font-size: 12.5px; } .vs-top b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-top .muted { font-size: 11px; }
.vs-avg { font-size: 24px; font-weight: 700; line-height: 1.1; } .vs-avg small { font-size: 12px; font-weight: 400; color: var(--muted); }
.vs-range { position: relative; height: 6px; border-radius: 3px; background: var(--border2); margin: 3px 0; }
.vs-range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); opacity: .45; }
.vs-range em { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; border-radius: 2px; background: var(--accent); }
.vs-spark { color: var(--accent); } .vs-last { font-size: 11px; color: var(--muted); }
.spark { display: block; overflow: visible; }
.vs-table td small { font-size: 10.5px; }
.fresh-tag { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--border); white-space: nowrap; }
.fresh-tag.f-све { background: var(--good-bg); color: var(--good); border-color: transparent; } .fresh-tag.f-со { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
/* выкрасы */
.vk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.vk-card { border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.vk-board { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; }
.vk-card.white .vk-board { background: repeating-linear-gradient(90deg, #f7f5f0, #f7f5f0 6px, #efece4 6px, #efece4 7px); }
.vk-card.kraft .vk-board { background: repeating-linear-gradient(90deg, #c9a071, #c9a071 6px, #bf9565 6px, #bf9565 7px); }
.vk-stroke { --c: transparent; width: 72%; height: 44px; border-radius: 22px 8px 26px 10px; background: var(--c); box-shadow: inset 0 -4px 8px rgba(0,0,0,.12); transform: rotate(-3deg); }
.vk-stroke:not([style]) { background: repeating-linear-gradient(45deg, rgba(0,0,0,.08), rgba(0,0,0,.08) 5px, transparent 5px, transparent 10px); border: 1.5px dashed rgba(0,0,0,.25); }
.vk-card.kraft .vk-stroke { mix-blend-mode: multiply; }
.vk-board-t { position: absolute; top: 6px; right: 8px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: rgba(255,255,255,.75); color: #444; }
.vk-info { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; font-size: 12px; }
.vk-info b { font-size: 15px; } .vk-c { color: var(--muted2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vk-a { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .vk-a a { margin-right: auto; }
/* цены и настройки */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.pr-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel2); }
.pr-row { display: grid; grid-template-columns: 20px 130px 70px minmax(0, 1fr) 60px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.pr-row .pnt-sw.sm { margin: 0; } .pr-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-bar { height: 10px; border-radius: 5px; background: var(--border2); overflow: hidden; } .pr-bar i { display: block; height: 100%; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.pr-bar .ri-tag { background: transparent; border: none; padding: 0; } .pr-row:has(.ri-tag) .pr-bar { background: none; height: auto; }
.pr-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pr-set label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted2); }
.pr-in { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow: hidden; }
.pr-in input { flex: 1; min-width: 0; height: 32px; border: none; padding: 0 10px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; }
.pr-in em { font-style: normal; font-size: 11px; color: var(--muted); padding: 0 10px; background: var(--panel2); align-self: stretch; display: flex; align-items: center; }
.pr-in.empty { border-color: var(--warn); }
@media (max-width: 1100px) { .pnt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pnt-found2 { grid-template-columns: auto 1fr 1fr; } }
@media (max-width: 760px) {
  .pnt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pnt-found2 { grid-template-columns: auto 1fr; }
  .rd-body, .pr-grid, .pc-sum { grid-template-columns: 1fr; } .rd-donut { margin: 0 auto; } .rd-row { grid-template-columns: 1fr 60px 70px; } .rd-bar { display: none; }
  .pnt-recipes { grid-template-columns: 1fr !important; } .pnt-search input { width: 100%; }
  .pnt-rscroll { max-height: 38vh; } .pnt-rdetail { min-width: 0; }
  .rd-row { grid-template-columns: minmax(0, 1fr) 62px 76px; } .rd-row .rd-bar { display: none; } .rd-total > span:nth-child(2) { display: none; }
  .rd-head { gap: 10px; } .rd-title h4 { font-size: 20px; } .pnt-sw.xxl { width: 54px; height: 54px; } .rd-kg .rd-water { margin-left: 0; }
  .pnt-hero-a { width: 100%; } .pnt-search { flex: 1; } .pnt-body { padding: 14px 12px; } .pnt-tabs button { padding: 0 10px; }
}
.pnt-shell, .pnt-body, .pnt-recipes > *, .rd-mix, .rd-title { min-width: 0; }
@media (max-width: 760px) { .rd-body { grid-template-columns: minmax(0, 1fr); } .rd-actions { width: 100%; } .rd-title .rd-tags { max-width: 100%; } }

/* ---------- Задания красочной ---------- */
.pnt-kpi.warn .pnt-kpi-ic { background: var(--warn-bg); color: var(--warn); }
.pnt-tab-n { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.pj-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.pj-top .sec-sub { flex: 1 1 380px; max-width: 760px; }
.pj-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-tools input { width: 260px; max-width: 100%; height: 32px; }
.pj-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pj-col { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-width: 0; transition: background .15s, border-color .15s; }
.pj-col.over { border-color: var(--accent); background: var(--accent-soft); }
.pj-col > header { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.pj-col > header b { font-size: 13.5px; }
.pj-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.c-work .pj-dot { background: var(--warn); } .c-done .pj-dot { background: var(--good); }
.pj-cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--muted2); }
.pj-list { display: flex; flex-direction: column; gap: 8px; }
.pj-empty { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.pj-card { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); cursor: grab; min-width: 0; transition: box-shadow .2s, transform .2s, opacity .2s; }
.pj-card.st-work { border-left-color: var(--warn); } .pj-card.st-done { border-left-color: var(--good); }
.pj-card.st-done .pj-name { color: var(--muted2); }
.pj-card.drag { opacity: .45; }
.pj-card.hi { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); transform: translateY(-1px); }
.pj-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pj-no { font-size: 11.5px; font-weight: 700; color: var(--muted2); }
.pj-name { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.pj-pz { font-size: 11.5px; color: var(--muted2); padding: 1px 7px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border2); }
.pj-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted2); }
.pj-meta .late { color: var(--bad); font-weight: 600; } .pj-meta .today { color: var(--warn); font-weight: 600; }
.pj-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pj-seg button { height: 26px; border: 1px solid var(--border); border-radius: 99px; background: var(--panel); color: var(--muted2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0 6px; white-space: nowrap; }
.pj-seg button:hover { border-color: var(--muted); color: var(--text); }
.pj-seg button.on.t-new { background: var(--accent); border-color: var(--accent); color: #fff; }
.pj-seg button.on.t-work { background: var(--warn); border-color: var(--warn); color: #fff; }
.pj-seg button.on.t-done { background: var(--good); border-color: var(--good); color: #fff; }
.pj-rows { display: flex; flex-direction: column; gap: 2px; }
.pj-row { display: flex; align-items: center; gap: 0; padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: 12.5px; min-width: 0; }
.pj-row:hover { background: var(--row-hover); }
.pj-row input { width: 16px; height: 16px; margin: 0 9px 0 0; accent-color: var(--good); flex: none; }
.pj-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-row.issued b { text-decoration: line-through; color: var(--muted); }
.pj-kg { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; font-size: 11.5px; color: var(--muted2); white-space: nowrap; }
.pj-row.issued .pj-kg { opacity: .5; }
.pj-prog { height: 5px; border-radius: 99px; background: var(--border2); overflow: hidden; }
.pj-prog i { display: block; height: 100%; background: var(--good); border-radius: 99px; transition: width .25s; }
.pj-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.pj-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.pj-acts .mini-btn { height: 26px; padding: 0 9px; font-size: 11.5px; }
.pj-note { font-size: 12px; background: var(--warn-bg); border-radius: 7px; padding: 6px 9px; white-space: pre-wrap; }
.pnt-empty-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--muted2); }
.pnt-empty-mini .ico.big { width: 40px; height: 40px; color: var(--muted); }
@media (max-width: 1100px) { .pj-board { grid-template-columns: 1fr; } }
.pj-tq { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pj-tq::before { content: 'Тираж'; font-size: 11.5px; color: var(--muted2); margin-right: 2px; }
.pj-tq button { height: 24px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.pj-tq button:hover { border-color: var(--accent); }
.pj-tq button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pj-row.skip { opacity: .45; }
.pj-kg small { color: var(--muted); font-weight: 400; margin-left: 2px; }
.pj-tsum { font-size: 12px; padding: 6px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--text); }
.pj-tsum.muted { background: transparent; padding: 0 2px; color: var(--muted); font-size: 11.5px; }
.pj-row b { flex: 0 0 auto; max-width: 48%; }
.pj-kg { min-width: 0; flex: 1 1 auto; justify-content: flex-end; overflow: hidden; }
.pj-kg .pb-row { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.pj-kg > span:last-child { flex: none; }
/* развеска: 100 г для просмотра, 5–20 кг или своё */
.rd-kg { align-items: center; gap: 8px; }
.rd-kg-l { font-size: 12px; color: var(--muted2); }
.rd-presets { display: inline-flex; background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.rd-presets button { height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rd-presets button:hover { color: var(--text); }
.rd-presets button.on { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }
.rd-kg label.rd-own { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
.rd-kg label.rd-own input#pntKg { width: 72px; height: 34px; font-size: 14px; }
.rd-kg label.rd-own.on input#pntKg { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------- Библиотека цветов ---------- */
.pl-top { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.pl-top .sec-sub { flex: 1 1 420px; max-width: 820px; }
.pl-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-file { cursor: pointer; display: inline-flex; align-items: center; }
.pl-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pl-search .pnt-search { flex: 1 1 260px; max-width: 420px; }
.pl-pick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--muted2); }
.pl-pick input { width: 28px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.pl-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 70vh; overflow: auto; padding: 2px; }
.pl-tile { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--panel); padding: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text); transition: transform .12s, box-shadow .12s; }
.pl-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pl-tile.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-tile i { display: block; height: 58px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.pl-tile b { font-size: 12px; padding: 5px 7px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tile span { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px 7px 6px; min-height: 22px; }
.pl-tile em { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 0 5px; border-radius: 4px; background: var(--panel2); color: var(--muted2); }
.pl-tile em.r { background: var(--good-bg); color: var(--good); } .pl-tile em.s { background: var(--info-bg); color: var(--accent); }
.pl-side { position: sticky; top: 10px; }
.pl-det { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
.pl-big { height: 140px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 14px; gap: 2px; }
.pl-big b { font-size: 20px; } .pl-big span { font-size: 12px; opacity: .8; font-family: ui-monospace, monospace; }
.pl-info { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; font-size: 12.5px; border-bottom: 1px solid var(--border2); }
.pl-info .k { display: inline-block; min-width: 100px; color: var(--muted2); }
.pl-sub { padding: 10px 14px; border-bottom: 1px solid var(--border2); }
.pl-sub h4 { margin: 0 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.pl-near { display: flex; flex-wrap: wrap; gap: 5px; }
.pl-near button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel2); color: var(--text); font: inherit; font-size: 11.5px; padding: 3px 7px 3px 3px; cursor: pointer; }
.pl-near button:hover { border-color: var(--accent); }
.pl-near i { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pl-near small { color: var(--muted); font-size: 10px; }
.pl-sub .sec-sub { margin-top: 6px; font-size: 11px; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px; }
@media (max-width: 1000px) { .pl-body { grid-template-columns: 1fr; } .pl-side { position: static; } .pl-grid { max-height: 50vh; } }

/* ---------- Учёт краски: факт, возвраты, партии, возраст, температура, совместимость ---------- */
.pj-rowx { display: flex; flex-wrap: wrap; gap: 4px; margin: -1px 0 4px 31px; }
.pj-ret { border: 1px dashed var(--good); background: var(--good-bg); color: var(--good); border-radius: 6px; font: inherit; font-size: 11px; font-weight: 600; padding: 1px 7px; cursor: pointer; }
.pj-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--panel2); color: var(--muted2); }
.pj-tag.ok { background: var(--good-bg); color: var(--good); } .pj-tag.warn { background: var(--warn-bg); color: var(--warn); } .pj-tag.bad { background: var(--bad-bg); color: var(--bad); }
.pj-fact { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: var(--muted2); padding: 6px 8px; border-radius: 7px; background: var(--panel2); }
.pj-fact b { color: var(--text); } .pj-fact em { font-style: normal; font-weight: 700; font-size: 11px; }
.pj-fact em.bad { color: var(--bad); } .pj-fact em.warn { color: var(--warn); } .pj-fact em.ok { color: var(--good); }
.jf-table input, .jf-table select { width: 66px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 0 6px; font: inherit; text-align: right; }
.jf-table select { width: auto; text-align: left; }
.jf-table .jf-res { font-size: 11.5px; min-width: 170px; text-align: left; white-space: normal; }
.jf-sum { margin-top: 10px; font-size: 13px; }
.pf-stats .ss-h { margin-top: 16px; }
.drum-batch { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 11.5px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border2); }
.drum-batch .exp { font-weight: 600; padding: 0 6px; border-radius: 5px; background: var(--good-bg); color: var(--good); }
.drum-batch .exp.warn { background: var(--warn-bg); color: var(--warn); } .drum-batch .exp.bad { background: var(--bad-bg); color: var(--bad); }
.drum-batch-acts { display: flex; gap: 4px; margin-left: auto; }
.drum-batch-acts .mini-btn { height: 24px; padding: 0 8px; font-size: 11px; }
.drum-card.exp-bad { box-shadow: 0 0 0 2px var(--bad) inset; } .drum-card.exp-warn { box-shadow: 0 0 0 2px var(--warn) inset; }
.bk-age { position: absolute; left: -4px; bottom: -4px; font-size: 9px; font-weight: 700; padding: 0 3px; border-radius: 4px; background: var(--panel); color: var(--muted2); border: 1px solid var(--border); line-height: 13px; }
.bk-age.check { background: var(--warn); color: #fff; border-color: transparent; } .bk-age.old { background: var(--bad); color: #fff; border-color: transparent; }
.vs-temp { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); margin-bottom: 12px; font-size: 12.5px; }
.vs-temp .quick-filters button:disabled { opacity: .45; cursor: not-allowed; }
.vs-t { font-size: 10.5px; color: var(--muted2); margin-left: 3px; } .vs-t.out { color: var(--bad); font-weight: 700; } .vs-t.none { color: var(--muted); }
.pu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; }
.pu-in { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted2); }
.pu-in input { width: 90px; } .pu-in small { font-size: 10.5px; color: var(--muted); }
.ic-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ic-add select, .ic-add input { height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); padding: 0 8px; font: inherit; font-size: 12.5px; }
.ic-add input { flex: 1; min-width: 140px; }
.ic-list { display: flex; flex-direction: column; gap: 4px; }
.ic-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border2); border-radius: 7px; }
.ic-row .muted { flex: 1; font-size: 11.5px; } .ic-row .pnt-sw.sm { margin-right: 0; }
.ic-flag { font-size: 12.5px; line-height: 1.7; }

/* ---------- стеллажи: шапки машин вместо отдельных плашек, кг ---------- */
.bk-machines { display: none !important; }
.bk-rack header { position: relative; }
.bk-hbar { position: absolute; left: 0; bottom: -1px; height: 3px; background: var(--accent); border-radius: 0 2px 2px 0; }
.bk-hkg { color: var(--text); font-weight: 600; }
.bk { position: relative; }
.bk-kg { font-size: 9.5px; color: var(--muted2); line-height: 1; margin-top: 1px; }
/* ---------- выданные ---------- */
.pnt-sw.md { width: 28px; height: 28px; }
.is-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.is-m { border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); overflow: hidden; }
.is-m > header { display: flex; justify-content: space-between; padding: 9px 12px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted2); }
.is-m > header b { color: var(--text); font-size: 14px; }
.is-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.is-card { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }
.is-card.long { border-left-color: var(--warn); }
.is-h { display: flex; gap: 10px; align-items: center; } .is-h > div { display: flex; flex-direction: column; } .is-h b { font-size: 14px; } .is-h .muted { font-size: 11.5px; }
.is-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.is-acts { display: flex; flex-wrap: wrap; gap: 5px; }
/* ---------- рециркуляция ---------- */
.rc-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.rc-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-right: 4px; } .rc-t .ico { width: 16px; height: 16px; }
.rc-slot { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); color: var(--muted2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.rc-slot.done { background: var(--good-bg); color: var(--good); border-color: transparent; }
.rc-slot.soon { border-color: var(--warn); color: var(--warn); }
.rc-slot.due { background: var(--bad); color: #fff; border-color: transparent; animation: rcPulse 1.6s ease-in-out infinite; }
@keyframes rcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,58,47,.5); } 50% { box-shadow: 0 0 0 6px rgba(214,58,47,0); } }
.rc-n { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted2); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rc-slot.due { animation: none; } }

/* ---------- ведро на стеллаже: прежний значок, не сжимается, подпись видна ---------- */
.bk-shelf { grid-auto-rows: 118px; gap: 12px 8px; background-image: linear-gradient(to bottom, transparent 119px, var(--border) 119px, var(--border) 122px, transparent 122px); background-size: 100% 130px; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.bk { height: 118px; padding: 12px 2px 2px; gap: 2px; }
.bk > span { flex: none; }
.bk-can { flex: none; }
.bk-age { z-index: 2; left: -12px; top: -12px; bottom: auto; font-size: 9.5px; line-height: 14px; padding: 0 4px; box-shadow: 0 0 0 2px var(--panel2); }
.bk-n { z-index: 2; }
.bk-num { font-size: 13.5px; margin-top: 1px; }
.bk-note { font-size: 10.5px; color: var(--muted2); white-space: normal; text-align: center; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bk-kg { font-size: 10px; font-weight: 600; color: var(--muted2); }
.bk-job { position: absolute; right: -9px; bottom: -6px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel2); }
.bk-job svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bk-jobt { color: var(--accent); font-weight: 700; }
.bk.in-job { background: var(--accent-soft); border-color: transparent; }
/* значки по углам ведра — каждый в своём углу, не пересекаются */
.bk { padding-top: 14px; }
.bk-can .bk-age { left: -17px; top: -13px; bottom: auto; right: auto; }
.bk-can .bk-n { right: -17px; top: -13px; left: auto; }
.bk-can .bk-job { right: -11px; bottom: -7px; top: auto; left: auto; width: 17px; height: 17px; }
.bk-can .bk-job svg { width: 11px; height: 11px; }
.bk-drop { left: 5px; right: auto; bottom: 4px; }
.bk-can .bk-age, .bk-can .bk-n { height: 16px; line-height: 16px; font-size: 9.5px; padding: 0 4px; min-width: 0; border-radius: 8px; }

/* ---------- Выданные: период и метрики ---------- */
.is-per { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.is-per label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted2); }
.is-per input[type=date] { height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); padding: 0 8px; font: inherit; }
.is-per-l { font-size: 12.5px; color: var(--muted2); }
.is-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 8px; }
.is-d { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--muted2); white-space: nowrap; }
.is-d.up { color: var(--good); } .is-d.down { color: var(--bad); }
.rep-kpi.warn .v { color: var(--warn); }
.is-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.is-chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border2); color: var(--muted2); }
.is-chip b { color: var(--text); } .is-chip.ok { background: var(--good-bg); border-color: transparent; } .is-chip.bad { background: var(--bad-bg); border-color: transparent; } .is-chip.warn { background: var(--warn-bg); border-color: transparent; }
.is-ana { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.is-box { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 12px 14px; min-width: 0; }
.is-box.wide { grid-column: 1 / -1; }
.is-chart { display: flex; flex-direction: column; gap: 6px; }
.is-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-bottom: 16px; }
.is-bar { flex: 1; min-width: 4px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.is-bar > i.iss { display: flex; flex-direction: column; justify-content: flex-end; background: var(--accent); opacity: .85; border-radius: 3px 3px 0 0; min-height: 0; }
.is-bar i.ret { display: block; background: var(--warn); border-radius: 3px 3px 0 0; }
.is-bar > span { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.is-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted2); }
.is-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .is-legend i.iss { background: var(--accent); } .is-legend i.ret { background: var(--warn); }
.is-row { display: grid; grid-template-columns: auto minmax(60px, 90px) 1fr auto auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.is-row > .pnt-sw.sm { margin: 0; } .is-row:not(:has(.pnt-sw)) { grid-template-columns: minmax(60px, 110px) 1fr auto auto; }
.is-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-rb { height: 9px; background: var(--border2); border-radius: 99px; overflow: hidden; }
.is-rb > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .is-rb > i > i { display: block; height: 100%; background: var(--warn); }
.is-rv { font-weight: 600; white-space: nowrap; } .is-rp { font-size: 11.5px; color: var(--muted2); white-space: nowrap; }
@media (max-width: 1000px) { .is-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .is-ana { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .is-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.is-per .period-toggle { flex-wrap: wrap; max-width: 100%; }
.pl-count { font-size: 12px; color: var(--muted2); margin: -4px 0 8px; }
.pl-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 8px 0; }

/* ===== Замер цвета (спектрофотометр) ===== */
.sp-wrap { display: flex; flex-direction: column; gap: 14px; }
.sp-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.sp-f input, .sp-in3 input, .sp-actions input { height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: var(--panel); color: var(--text); font-size: 13px; min-width: 0; }
.sp-f input:focus, .sp-in3 input:focus, .sp-actions input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sp-fp { width: 220px; } .sp-fs { width: 110px; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-card h4 { margin: 0; font-size: 13px; font-weight: 700; }
.sp-wait { color: var(--muted); font-size: 13px; }
.sp-in3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-in3 label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.sp-in3 input { font-size: 16px; font-weight: 600; height: 40px; font-variant-numeric: tabular-nums; }
.sp-mode { align-self: flex-start; }
.sp-vals { display: grid; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-vals .k { display: inline-block; min-width: 92px; color: var(--muted); font-size: 12px; }
.sp-res { display: grid; grid-template-columns: 220px 1fr auto; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-left: 5px solid var(--muted2); border-radius: 12px; padding: 14px 16px; }
.sp-res.sp-ok { border-left-color: var(--good); } .sp-res.sp-warn { border-left-color: var(--warn); } .sp-res.sp-bad { border-left-color: var(--bad); }
.sp-sw { display: grid; grid-template-columns: 1fr 1fr; height: 130px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.sp-sw div { position: relative; } .sp-sw span { position: absolute; left: 6px; bottom: 5px; font-size: 10px; background: rgba(255,255,255,.85); color: #222; padding: 1px 6px; border-radius: 6px; }
.sp-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-de { display: flex; align-items: baseline; gap: 6px; } .sp-de b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; } .sp-de span { color: var(--muted); font-size: 13px; }
.sp-sub { color: var(--muted); font-size: 12px; }
.sp-badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.sp-badge.good { background: var(--good-bg); color: var(--good); } .sp-badge.warn { background: var(--warn-bg); color: var(--warn); } .sp-badge.bad { background: var(--bad-bg); color: var(--bad); }
.sp-desc { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.sp-k { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-style: normal; font-size: 11px; font-weight: 700; margin-right: 7px; }
.sp-plot { width: 240px; height: 180px; }
.sp-box { fill: var(--panel2); stroke: var(--border); } .sp-ax { stroke: var(--border); } .sp-t { font-size: 9px; fill: var(--muted); }
.sp-tol { fill: var(--good-bg); stroke: var(--good); stroke-dasharray: 3 3; opacity: .9; }
.sp-vec { stroke: var(--text); stroke-width: 1.5; } .sp-ref { fill: var(--panel); stroke: var(--text); stroke-width: 2; } .sp-smp { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.sp-lbar { fill: var(--panel2); stroke: var(--border); } .sp-lref { stroke: var(--text); stroke-width: 2; }
.sp-tab td, .sp-tab th { padding: 6px 8px !important; font-size: 12.5px; } .sp-hi { font-weight: 700; color: var(--text); } .sp-sep td { border-top: 2px solid var(--border); }
.sp-acts ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.45; }
.sp-proc { background: var(--panel2); border-radius: 8px; padding: 10px 12px; font-size: 13px; } .sp-proc ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.sp-note { font-size: 11.5px; color: var(--muted); }
.sp-actions { display: flex; gap: 8px; align-items: center; } .sp-actions input { flex: 1; }
.sp-hh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sp-hh .period-toggle { margin-left: auto; }
.sp-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.12); }
.pl-spbtn { margin: 10px 0 2px; } .pl-spbtn .mini-btn { display: inline-flex; align-items: center; gap: 6px; } .pl-spbtn .ico { width: 15px; height: 15px; }
@media (max-width: 1100px) { .sp-res { grid-template-columns: 180px 1fr; } .sp-plot { grid-column: 1 / -1; justify-self: center; } }
@media (max-width: 760px) { .sp-grid { grid-template-columns: 1fr; } .sp-res { grid-template-columns: 1fr; } .sp-fp { width: 100%; } .sp-fs { width: calc(50% - 5px); } .sp-actions { flex-wrap: wrap; } .sp-actions input { flex-basis: 100%; } }
.sp-in3 label { min-width: 0; } .sp-in3 input { width: 100%; box-sizing: border-box; }
.sp-plot { width: 258px; }
.sp-tw { overflow-x: auto; max-width: 100%; } @media (max-width: 760px) { .sp-tab td:nth-child(2), .sp-tab th:nth-child(2) { display: none; } }
/* замер цвета → рецепты и черновик */
.sp-new { margin-left: auto; }
.sp-bar { display: flex; height: 8px; width: 160px; border-radius: 4px; overflow: hidden; background: var(--panel2); border: 1px solid var(--border); }
.sp-bar i { display: block; height: 100%; }
.sp-small { font-size: 11.5px; margin-top: 2px; }
.sp-est { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); vertical-align: middle; }
.sp-est.big { width: 34px; height: 34px; margin-left: auto; }
.sp-rtab td { vertical-align: middle; } .sp-rb { white-space: nowrap; } .sp-rb .mini-btn + .mini-btn { margin-left: 4px; }
.sp-rtab tr.sp-cur td { background: var(--accent-soft); }
.sp-draftrow td:first-child b { color: var(--accent); }
.sp-draft { border-color: var(--accent); border-style: dashed; }
.sp-dgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.sp-dg input.sp-g { width: 90px; height: 30px; text-align: right; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; background: var(--panel); color: var(--text); }
.sp-dg select { max-width: 190px; } .sp-dg tfoot td { border-top: 2px solid var(--border); }
.sp-tries { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; max-height: 260px; overflow: auto; }
.sp-apply { border: 1px dashed var(--accent); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; background: var(--accent-soft); }
.sp-apply div { display: flex; flex-wrap: wrap; gap: 6px; } .sp-apply .muted { font-size: 11.5px; }
.sp-dact { justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 760px) { .sp-dgrid { grid-template-columns: 1fr; } .sp-bar { width: 100px; } }
.sp-rtab td:nth-child(2) { white-space: normal; min-width: 180px; max-width: 360px; } .sp-rtab td:nth-child(2) .sp-small { line-height: 1.35; } .sp-card > .table-wrap { overflow-x: auto; max-width: 100%; }
.sp-fixed { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--panel2); }
.sp-fixed .sp-hh b { font-size: 13px; }
.sp-ftab td, .sp-ftab th { padding: 5px 8px !important; font-size: 13px; } .sp-ftab tfoot td { border-top: 2px solid var(--border); font-weight: 600; }
.sp-fbtn { display: flex; justify-content: flex-end; }
.sp-pasterow { display: flex; gap: 8px; align-items: flex-end; } .sp-pasterow .sp-paste { flex: 1; }
.sp-paste textarea { min-height: 34px; height: 34px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.sp-paste textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sp-pasterow .mini-btn { height: 34px; white-space: nowrap; }
.sp-start { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-newbox { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.sp-newrow { display: flex; gap: 8px; width: 100%; max-width: 420px; margin-top: 6px; }
.sp-newrow input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: var(--panel); color: var(--text); font-size: 13px; }
.sp-newrow .mini-btn { height: 34px; white-space: nowrap; }
.sp-newbtn { height: 34px; align-self: flex-end; }
@media (max-width: 760px) { .sp-start { grid-template-columns: 1fr; } .sp-newrow { flex-wrap: wrap; } }
.sp-fb { width: 150px; }
.sp-batch { display: flex; gap: 4px; }
.sp-batch input { flex: 1; min-width: 0; }
.sp-batch select { width: 62px; flex: none; padding-right: 20px !important; background-position: right 6px center !important; }
/* пустые вёдра — белое ведро как на стеллажах */
.drum-pail { flex: none; width: 58px; height: 84px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.drum-pail .bk-can { width: 56px; height: 62px; border-radius: 4px 4px 13px 13px; border-color: rgba(0,0,0,.22); }
.drum-pail .bk-lid { left: -4px; right: -4px; top: -7px; height: 9px; border-radius: 4px; background: #c9ced6; }
.drum-pail .drum-tara { font-size: 19px; color: #3a4250; padding-top: 4px; }
/* примерный рецепт */
.est-box { background: var(--panel2); border-radius: 12px; padding: 12px 14px; }
.est-top { display: flex; gap: 14px; align-items: center; margin: 6px 0 10px; flex-wrap: wrap; }
.est-sw { display: flex; flex-direction: column; align-items: center; gap: 2px; } .est-sw span { display: inline-block; width: 44px; height: 22px; } .est-sw span:first-child { border-radius: 8px 8px 0 0; } .est-sw span:nth-child(2) { border-radius: 0 0 8px 8px; } .est-sw small { font-size: 10.5px; color: var(--muted); }
.est-tab { max-width: 380px; margin-bottom: 6px; } .est-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }
.est-sum td { font-weight: 700; border-top: 2px solid var(--border); }
/* ---------- Метрология, клиенты, смены, планирование ---------- */
body[data-tab="metro"] #stickyBar, body[data-tab="clients"] #stickyBar, body[data-tab="shifts"] #stickyBar,
body[data-tab="metro"] #notifBanner, body[data-tab="clients"] #notifBanner, body[data-tab="shifts"] #notifBanner,
body[data-tab="metro"] #staleBanner, body[data-tab="clients"] #staleBanner, body[data-tab="shifts"] #staleBanner { display: none !important; }

small.pm { color: var(--muted); font-weight: 400; font-size: .82em; margin-left: 2px; white-space: nowrap; }
.cell-good { background: var(--good-bg); color: var(--good); font-weight: 600; }

/* метрология */
.mt-details { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel2); }
.mt-details > summary { cursor: pointer; padding: 9px 12px; font-weight: 500; }
.mt-details[open] > summary { border-bottom: 1px solid var(--border); }
.mt-details .table-scroll { max-height: 360px; overflow: auto; }
.ref-hist { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ref-pt { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: var(--panel); border: 1px solid var(--border); color: var(--muted2); }
.ref-pt.ok { background: var(--good-bg); color: var(--good); border-color: transparent; }
.ref-pt.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.var-split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--border2); min-width: 120px; }
.var-split i { display: block; height: 100%; }
.var-split i.p { background: var(--warn); }
.var-split i.b { background: var(--accent); }

/* поля метрологии в формах */
.tm-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 9px 12px; margin: 0 0 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--panel2); font-size: 12.5px; }
.tm-cond { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tm-cond input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
input.tm-h { width: 46px; height: 26px; padding: 0 6px; text-align: center; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; }
.tm-dev { display: inline-flex; align-items: center; gap: 6px; color: var(--muted2); }
.tm-dev select { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 0 6px; font: inherit; }
.tm-block { margin: 12px 0; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); border-left: 4px solid var(--muted); background: var(--panel2); display: flex; flex-direction: column; gap: 6px; }
.tm-block.ok { border-left-color: var(--good); }
.tm-block.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.tm-block.unknown { border-left-color: var(--warn); }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.tm-row .k { min-width: 150px; color: var(--muted2); }
.tm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.tm-seg button { border: 0; background: var(--panel); color: var(--muted2); padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.tm-seg button + button { border-left: 1px solid var(--border); }
.tm-seg button.on { background: var(--accent); color: #fff; }
.tm-warn { color: var(--bad); font-size: 12px; font-weight: 500; }
.tm-okline { color: var(--good); font-size: 12px; }

/* клиенты — список */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.cl-card { text-align: left; display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.cl-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cl-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cl-top b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-abc { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 12px; flex: none; }
.a-A { background: var(--good-bg); color: var(--good); }
.a-B { background: var(--info-bg); color: var(--accent); }
.a-C { background: var(--border2); color: var(--muted2); }
.cl-meta { font-size: 12px; color: var(--muted2); }
.cl-nums { display: flex; gap: 12px; font-size: 12px; color: var(--muted2); }
.cl-nums b { color: var(--text); font-size: 14px; margin-right: 2px; }
.cl-nums .bad-text b { color: var(--bad); }
.cl-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border2); padding-top: 7px; }
.cl-seg { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cl-seg.good { background: var(--good-bg); color: var(--good); }
.cl-seg.bad { background: var(--bad-bg); color: var(--bad); }
.cl-seg.info { background: var(--info-bg); color: var(--accent); }
.cl-seg.muted { background: var(--border2); color: var(--muted2); }
.bad-text { color: var(--bad); }

/* клиенты — карточка */
.cc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cc-head h3 { margin: 0; font-size: 18px; }
.cc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--panel); min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.cc-box.wide { grid-column: 1 / -1; }
.cc-box h4 { margin: 0 0 4px; font-size: 13px; }
.cc-mark { display: grid; grid-template-columns: 54px 1fr 30px 42px; align-items: center; gap: 8px; }
.cc-mark > span:first-child { font-weight: 600; }
.cc-mark i { display: block; height: 8px; border-radius: 99px; background: var(--accent); opacity: .75; min-width: 3px; }
.cc-mark b { text-align: right; }
.cc-mark > span:last-child { text-align: right; font-size: 11.5px; }
.cc-req { border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--panel2); margin-bottom: 6px; }
.cc-req-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cc-req-h .mini-btn { margin-left: auto; }
.cc-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cc-ver { display: inline-flex; flex-direction: column; padding: 4px 9px; border-radius: 7px; background: var(--panel); border: 1px solid var(--border); font-size: 12px; }
.cc-ver .muted { font-size: 10.5px; }
.cc-ver.cur { border-color: var(--accent); background: var(--accent-soft); }
.cc-arrow { color: var(--muted); }

/* ABC / RFM */
.abc-strip { display: flex; gap: 3px; border-radius: 10px; overflow: hidden; margin: 10px 0 12px; }
.abc-seg { padding: 9px 12px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abc-seg b { font-size: 15px; margin-right: 4px; }
.rfm-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.rfm-seg { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); border-top: 3px solid var(--muted); background: var(--panel); }
.rfm-seg.good { border-top-color: var(--good); }
.rfm-seg.bad { border-top-color: var(--bad); }
.rfm-seg.info { border-top-color: var(--accent); }
.rfm-seg .v { font-size: 22px; font-weight: 700; }
.rfm-seg .muted { font-size: 11px; line-height: 1.3; }
.rfm-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; }
.rfm-dot.s1 { background: #c9d0db; color: #445; }
.rfm-dot.s2 { background: #a6b7d6; }
.rfm-dot.s3 { background: #7d9be0; }
.rfm-dot.s4 { background: #4d7de6; }
.rfm-dot.s5 { background: #2455d6; }

/* план-факт, «что тестировать сегодня», смены */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pf-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; background: var(--panel); display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.pf-item .pf-h { display: flex; justify-content: space-between; gap: 6px; }
.pf-item .pf-h b { font-size: 13px; }
.pf-bar { position: relative; height: 9px; border-radius: 99px; background: var(--border2); overflow: hidden; }
.pf-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 99px; }
.pf-bar i.fc { background: var(--accent); opacity: .25; }
.pf-bar u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .5; }
.pf-item.late { border-color: var(--warn); background: var(--warn-bg); }
.pf-item.done { border-color: transparent; background: var(--good-bg); }
.pf-item.done .pf-bar i { background: var(--good); }
.todo-list { display: flex; flex-direction: column; gap: 6px; }
.todo-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--panel); }
.todo-item .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; }
.todo-item.hi .n { background: var(--bad-bg); color: var(--bad); }
.todo-item .why { font-size: 11.5px; color: var(--muted2); }
.todo-item .tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.sh-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius); background: var(--info-bg); border: 1px solid var(--border); margin-bottom: 12px; font-size: 12.5px; }
.sh-banner b { font-size: 13px; }
.sh-list { display: flex; flex-direction: column; gap: 8px; }
.sh-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sh-card .sh-h { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.sh-card .sh-h b { font-size: 14px; }
.sh-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-nums span { padding: 2px 9px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border2); font-size: 11.5px; color: var(--muted2); }
.sh-nums span b { color: var(--text); }
.sh-nums span.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.sh-nums span.bad b { color: var(--bad); }
.sh-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12.5px; }
.sh-text > div { background: var(--panel2); border-radius: var(--radius-sm); padding: 7px 9px; white-space: pre-wrap; min-width: 0; }
.sh-text > div > span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.hint-warn { margin-top: 4px; padding: 6px 9px; border-radius: 7px; background: var(--warn-bg); color: var(--warn); font-size: 12px; line-height: 1.35; }

@media (max-width: 760px) {
  .cc-grid, .sh-text { grid-template-columns: 1fr; }
  .cc-head .mini-btn.primary { width: 100%; }
  .todo-item { grid-template-columns: 26px 1fr; }
  .todo-item .tags { grid-column: 2; justify-content: flex-start; }
}
.mini-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted2); }
.mini-lab select { height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); padding: 0 8px; font: inherit; }
.ov-plan { align-items: start; }

/* поле со списком и кнопкой «в справочник» */
.combo { position: relative; display: flex; align-items: stretch; min-width: 0; }
.combo > input { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.combo > button { flex: none; width: 34px; border: 1px solid var(--border); border-left: 0; background: var(--panel2); color: var(--muted2); cursor: pointer; display: grid; place-items: center; padding: 0; }
.combo > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.combo > button:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.combo > .combo-add { border-radius: 0 8px 8px 0; color: var(--accent); }
.combo > .combo-add:disabled { color: var(--muted); cursor: default; opacity: .6; }
.combo > .combo-add.done { color: var(--good); opacity: 1; }
.combo.open > .combo-dd svg { transform: rotate(180deg); }
.combo-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: max(100%, 260px); max-height: 240px; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-lg); padding: 4px; }
.combo-pop button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.combo-pop button:hover, .combo-pop button:focus { background: var(--row-hover); outline: none; }
.combo-pop button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.combo-pop small { color: var(--muted); font-size: 11px; white-space: nowrap; flex: none; }
.combo-empty { padding: 10px; color: var(--muted); font-size: 12px; }

/* цвет картона */
.bc-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bc-chip i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.bc-chip.auto { color: var(--muted2); }
.bc-chip small { font-size: 10px; color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; padding: 0 4px; }
.bc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel2); font-size: 12.5px; }
.bc-line .k { color: var(--muted2); min-width: 110px; }
.bc-line select { margin-left: auto; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 0 6px; font: inherit; }

/* справочник ГОСТ */
.gd-shell { padding: 18px 20px; }
.gd-wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; }
.gd-nav { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - 40px); overflow: auto; padding-right: 4px; }
.gd-nav input { height: 34px; margin-bottom: 6px; }
.gd-ng { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 10px 6px 3px; }
.gd-nav button { text-align: left; border: 1px solid transparent; background: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; color: var(--text); font: inherit; }
.gd-nav button b { font-size: 13px; font-weight: 600; }
.gd-nav button span { font-size: 11px; color: var(--muted2); line-height: 1.3; }
.gd-nav button:hover { background: var(--row-hover); }
.gd-nav button.on { background: var(--accent-soft); border-color: var(--accent); }
.gd-nav button.on b { color: var(--accent); }
.gd-main { min-width: 0; }
.gd-art { display: flex; flex-direction: column; gap: 12px; }
.gd-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.gd-h h3 { margin: 2px 0; font-size: 20px; }
.gd-grp { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.gd-stds { display: flex; flex-direction: column; gap: 5px; }
.gd-std { display: grid; grid-template-columns: minmax(170px, auto) 1fr auto; gap: 4px 12px; align-items: baseline; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); font-size: 12.5px; }
.gd-std b { white-space: nowrap; }
.gd-std em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.gd-std em.ok { background: var(--good-bg); color: var(--good); } .gd-std em.bad { background: var(--bad-bg); color: var(--bad); } .gd-std em.q { background: var(--warn-bg); color: var(--warn); }
.gd-what { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 900px; }
.gd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gd-grid:empty { display: none; }
.gd-block, .gd-dev { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--panel); min-width: 0; font-size: 12.8px; line-height: 1.5; }
.gd-block h4, .gd-dev h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.gd-block p { margin: 0; }
.gd-block ul, .gd-block ol, .gd-dev ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.gd-block ol li::marker { color: var(--accent); font-weight: 700; }
.gd-calc { background: var(--info-bg); border-color: transparent; }
.gd-err { border-left: 3px solid var(--bad); } .gd-chk { border-left: 3px solid var(--good); }
.gd-devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gd-dev h4 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; }
.gd-note { padding: 8px 12px; border-radius: 8px; background: var(--panel2); border-left: 3px solid var(--muted); font-size: 12.5px; }
.gd-note.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.gd-dash { font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); }
.gd-q { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--warn); border: 1px dashed var(--warn); border-radius: 4px; padding: 0 5px; margin: 0 2px; white-space: nowrap; }
.gd-table td, .gd-table th { padding: 6px 10px; }
@media (max-width: 900px) { .gd-wrap { grid-template-columns: 1fr; } .gd-nav { position: static; max-height: 260px; } .gd-grid, .gd-devs { grid-template-columns: 1fr; } .gd-std { grid-template-columns: 1fr; } }
body[data-tab="guide"] #stickyBar, body[data-tab="guide"] #notifBanner, body[data-tab="guide"] #staleBanner { display: none !important; }

/* ресурс расходников */
.mini-sel { height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0 8px; font: inherit; font-size: 12.5px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 12px; }
.cs-card { border: 1px solid var(--border); border-left: 4px solid var(--good); border-radius: 10px; padding: 11px 13px; background: var(--panel); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cs-card.st-warn { border-left-color: var(--warn); } .cs-card.st-over { border-left-color: var(--bad); background: var(--bad-bg); } .cs-card.st-nolimit { border-left-color: var(--muted); }
.cs-h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cs-h b { font-size: 14px; }
.cs-meta { font-size: 11.5px; color: var(--muted2); }
.cs-bar { position: relative; height: 9px; border-radius: 99px; background: var(--border2); overflow: visible; }
.cs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--good); }
.st-warn .cs-bar i { background: var(--warn); } .st-over .cs-bar i { background: var(--bad); } .st-nolimit .cs-bar i { background: var(--muted); }
.cs-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .35; }
.cs-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted2); }
.cs-nums b { color: var(--text); }
.cs-avg { font-size: 12px; padding: 5px 9px; border-radius: 7px; background: var(--info-bg); }
.cs-note { font-size: 12px; color: var(--muted2); white-space: pre-wrap; }
.cs-hist summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.cs-hist table { margin-top: 6px; font-size: 12px; }
.cs-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.cs-empty { margin-top: 12px; padding: 18px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted2); text-align: center; font-size: 13px; }
.cs-h .badge { white-space: nowrap; flex: none; }
/* ===== Единый вид выпадающих списков во всём дашборде =====
   Подключается последним и перебивает разрозненные правила из 05–21.
   Обычный размер — 34px, компактный (таблицы, строки, панели) — 30px.
   Ширину не трогаем: её задают сами блоки. */
select:where(:not([multiple]):not([size])) {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  box-sizing: border-box;
  height: 34px !important; min-height: 0 !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  background-color: var(--panel) !important; color: var(--text) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px 6px !important;
  font: inherit; font-size: 13px !important; line-height: normal !important; font-weight: 500;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  cursor: pointer; box-shadow: none; outline: none;
  transition: border-color .15s, box-shadow .15s;
  vertical-align: middle;
}
select:where(:not([multiple]):not([size])):hover { border-color: var(--muted2) !important; }
select:where(:not([multiple]):not([size])):focus,
select:where(:not([multiple]):not([size])):focus-visible { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
select:where(:not([multiple]):not([size])):disabled { opacity: .55; cursor: not-allowed; background-color: var(--panel2) !important; }
select option { background: var(--panel); color: var(--text); }

/* Компактный вариант: внутри таблиц, строк стеллажа, мини-панелей */
.data-table select:where(:not([multiple])), .jf-table select:where(:not([multiple])), .density-table select:where(:not([multiple])),
.tm-dev select, .bc-line select, select.mini-sel, .mini-sel select, .mini-lab select,
.bk-sort select, .pnt-barrels select, .ic-add select, .sb-thr select, select.bud-st,
.ss-controls select, .sv-filters select, .journal-tools select, .paper-settings select,
td select:where(:not([multiple])), .pnt-hero select, .is-per select, .pj-card select {
  height: 30px !important; font-size: 12.5px !important; padding: 0 26px 0 9px !important;
  background-position: right 9px center !important; border-radius: 7px !important;
}

/* Высота совпадает с соседними полями ввода */
.form-field select:where(:not([multiple])) { height: 36px !important; }
.filters select:where(:not([multiple])) { height: 32px !important; font-size: 12.5px !important; }

/* Статусы бюджета оставляем цветными, но в той же форме */
select.bud-st { font-weight: 600; }
select.bud-st.st-got { background-color: var(--good-bg) !important; color: var(--good) !important; }
select.bud-st.st-ordered { background-color: var(--info-bg) !important; }
select.bud-st.st-rejected { color: var(--muted) !important; text-decoration: line-through; }

/* На телефоне крупнее — удобнее попадать пальцем, и iOS не зумит при фокусе */
@media (max-width: 760px) {
  select:where(:not([multiple]):not([size])) { height: 40px !important; font-size: 16px !important; }
  .q-grid select { height: 44px !important; }
  .data-table select, .jf-table select, .density-table select, td select,
  .bk-sort select, select.bud-st, .mini-lab select, select.mini-sel { height: 34px !important; font-size: 14px !important; }
}

/* ===== Поля с подсказками (input list) — выглядят и раскрываются как обычный список ===== */
input.dl-input {
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px 6px !important;
  cursor: pointer;
}
input.dl-input::-webkit-calendar-picker-indicator { display: none !important; }

/* Одинаковое раскрытое меню: и для подсказок, и для «клиента» с кнопкой «+» */
.dl-pop, .combo-pop {
  position: fixed; z-index: 3000; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border2, var(--border)); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16); padding: 4px 0;
  font-size: 13px;
}
.combo-pop { position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%; max-height: 268px; padding: 4px 0 !important; border-radius: 8px !important; }
.dl-pop[hidden], .combo-pop[hidden] { display: none; }
.dl-opt, .combo-pop button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 26px; padding: 3px 12px !important; line-height: 1.35; cursor: pointer;
  border-radius: 0 !important; font-size: 13px !important; font-weight: 400 !important;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-opt small, .combo-pop small { color: var(--muted); font-size: 11px; flex: none; }
.dl-opt:hover, .combo-pop button:hover, .combo-pop button:focus { background: var(--row-hover) !important; color: var(--text) !important; }
.dl-opt.on, .combo-pop button.on { background: var(--accent) !important; color: #fff !important; }
.dl-opt.on small, .combo-pop button.on small { color: rgba(255,255,255,.8); }
.brand-build { font-size: 10px; color: var(--muted2); margin-top: 1px; letter-spacing: .02em; } .sidebar.collapsed .brand-build { display: none; }
/* ===== Единые статусы: зелёный — в норме, жёлтый — погранично, красный — брак =====
   Одна форма «таблетки» с точкой-маркером (различимо и без цвета) для всех меток статуса. */
.warn-text { color: var(--warn); font-weight: 600; }
.good-text { color: var(--good); font-weight: 600; } .bad-text { color: var(--bad); font-weight: 600; }

.st-pill,
.sev-pill, .pj-tag, .drum-st, .sp-badge, .tw-status, .badge.red, .badge.green, .badge.yellow,
.ri-tag.warn, .ri-tag.rack {
  display: inline-flex !important; align-items: center; gap: 5px;
  height: 21px; padding: 0 9px 0 8px !important; border-radius: 999px !important; border: 0 !important;
  font-size: 11.5px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap; vertical-align: middle;
  background: var(--panel2); color: var(--muted2);
}
.st-pill::before,
.sev-pill.bad::before, .sev-pill.warn::before, .pj-tag.ok::before, .pj-tag.warn::before, .pj-tag.bad::before,
.drum-st.ok::before, .drum-st.warn::before, .drum-st.bad::before, .sp-badge::before, .tw-status::before,
.badge.red::before, .badge.green::before, .badge.yellow::before, .ri-tag.warn::before, .ri-tag.rack::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
/* цвета — только из общих токенов */
.st-pill.good, .pj-tag.ok, .drum-st.ok, .sp-badge.good, .tw-status.ok, .badge.green, .ri-tag.rack { background: var(--good-bg) !important; color: var(--good) !important; }
.st-pill.warn, .sev-pill.warn, .pj-tag.warn, .drum-st.warn, .sp-badge.warn, .tw-status.warn, .badge.yellow, .ri-tag.warn { background: var(--warn-bg) !important; color: var(--warn) !important; }
.st-pill.bad, .sev-pill.bad, .pj-tag.bad, .drum-st.bad, .sp-badge.bad, .tw-status.bad, .badge.red { background: var(--bad-bg) !important; color: var(--bad) !important; }
.tw-status { height: 26px; font-size: 12px !important; }

/* ячейки таблиц: те же три уровня */
.cell-good, .cell-warn, .cell-bad { font-variant-numeric: tabular-nums; }

/* легенда */
.st-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-legend { align-items: center; } .st-legend .st-pill { cursor: help; margin: 0 !important; position: static !important; transform: none !important; }

/* ===== Пустые состояния: значок, что случилось, что сделать, кнопка ===== */
.placeholder.es, .cs-empty, .pnt-empty-mini {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 18px !important; margin: 4px 0; text-align: center;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--panel2);
  color: var(--muted2); font-size: 13px;
}
.placeholder.es .es-ico, .pnt-empty-mini .ico.big { width: 30px; height: 30px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; }
.placeholder.es.es-ok .es-ico { stroke: var(--good); }
.placeholder.es.es-filter .es-ico { stroke: var(--accent); }
.placeholder.es .es-t, .pnt-empty-mini b { color: var(--text); font-weight: 600; font-size: 13.5px; }
.placeholder.es .es-h, .placeholder .hint { display: block; max-width: 460px; margin: 0; color: var(--muted2); font-size: 12.5px; line-height: 1.45; }
.placeholder.es .es-a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.chart-box .placeholder.es, .card .card-body > .placeholder.es { min-height: 140px; }
.bell-empty { text-align: center; }
.st-pill.warn, .sev-pill.warn, .pj-tag.warn, .drum-st.warn, .sp-badge.warn, .tw-status.warn, .ri-tag.warn { margin-top: 0 !important; } /* глобальный .warn (плашка-предупреждение) не должен сдвигать метки */
/* ===== «Обзор»: шапка-карточка с фильтрами + плитки со значками ===== */
.ov-shell { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ov-hero::before { background: linear-gradient(90deg, var(--accent), #6a3fb5, #0ea5a4, #22a06b) !important; }
.ov-hero-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; }
.ov-hero-logo .ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.ov-hero-meta { font-size: 12px; color: var(--muted2); margin-right: 4px; }
.ov-hero-filters { flex-basis: 100%; border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 2px; }
.ov-hero-filters:empty { display: none; }
#stickyBar.in-hero { position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; top: auto !important; }

.ov-shell .kpi-grid { margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ov-kpi { position: relative; box-shadow: none; align-items: center; min-width: 0; }
.ov-kpi.primary { background: var(--panel); }
.ov-kpi .v { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ov-kpi .v .value { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.ov-kpi .v small.u { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ov-kpi .v .trend { font-size: 11.5px; font-weight: 600; margin-left: 2px; }
.ov-kpi .k.label { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ov-kpi.warn .v .value { color: var(--warn); } .ov-kpi.bad .v .value { color: var(--bad); }
.ov-kpi.warn .d { color: var(--warn); } .ov-kpi.bad .d { color: var(--bad); } .ov-kpi.good .d { color: var(--good); }
.ov-kpi .copied { top: 6px; right: 6px; }
@media (max-width: 1100px) { .ov-shell .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ov-shell .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-hero .pnt-hero-a { width: 100%; } .ov-kpi .v .value { font-size: 19px; } }
.ov-kpi .d .trend { font-size: 11px; font-weight: 700; margin: 0; } .ov-kpi .d .trend.up { color: var(--good); } .ov-kpi .d .trend.down { color: var(--bad); }
.ov-kpi .d { white-space: normal; line-height: 1.35; }

/* ===== «Все образцы»: та же шапка ===== */
.sv-shell .sv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-kpi { cursor: default; }
.sv-kpi.clickable { cursor: pointer; }
.sv-kpi:not(.clickable):hover { transform: none; border-color: var(--border); box-shadow: none; }
.sv-kpi.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sv-kpi.good .pnt-kpi-ic { background: var(--good-bg); color: var(--good); }
/* заголовок и кнопки таблицы теперь в шапке — в карточке таблицы оставляем счётчик и легенду */
#svShell ~ #allSamplesTable .sec-head .card-title, #svShell ~ #allSamplesTable .sec-head > div:last-child:not(:first-child) { display: none; }
@media (max-width: 1100px) { .sv-shell .sv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#svShell ~ #allSamplesTable .sec-head > div:has(> .mini-btn) { display: none !important; }
/* глобальный .warn (плашка) не должен влиять на плитки */
.pnt-kpi.warn { margin-top: 0 !important; padding: 12px 14px !important; background: var(--panel) !important; border-radius: 12px !important; color: var(--text) !important; font-size: inherit !important; }
/* ===== Чек-лист контролёра: заполнение на сайте ===== */
.cl-fill { margin-top: 14px; padding: 16px 18px !important; }
.cl-fill .sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-top input[type=date] { height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; background: var(--panel); color: var(--text); }
.cl-prog { width: 140px; height: 8px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--border); overflow: hidden; display: inline-block; vertical-align: middle; }
.cl-prog i { display: block; height: 100%; background: var(--good); border-radius: 6px; transition: width .2s; }
.cl-prog.sm { width: 70px; height: 6px; }
.cl-pct { font-variant-numeric: tabular-nums; }
.cl-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.cl-table col.cl-labcol { width: 44%; }
.cl-table td { padding: 3px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cl-sec th { text-align: left; padding: 12px 6px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted2); border-bottom: 2px solid var(--border); }
.cl-sec th span { margin-right: 10px; } .cl-sec .cl-all { height: 22px; padding: 0 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.cl-hdr td { text-align: center; font-size: 11.5px; color: var(--muted2); font-weight: 600; border-bottom: 1px dashed var(--border); }
.cl-item { padding-left: 8px !important; }
.cl-c { text-align: center; }
.cl-lab { text-align: center; font-size: 11.5px; color: var(--muted2); }
.cl-nb { border-bottom-color: transparent !important; }
.cl-tog { width: 100%; max-width: 64px; height: 30px; border: 1px dashed var(--border2, var(--border)); border-radius: 7px; background: var(--panel); cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; color: var(--muted); transition: background .12s, border-color .12s; }
.cl-tog:hover { border-color: var(--accent); background: var(--accent-soft); }
.cl-tog.ok { border: 1px solid transparent; background: var(--good-bg); color: var(--good); }
.cl-tog.no { border: 1px solid transparent; background: var(--bad-bg); color: var(--bad); }
.cl-num { width: 100%; max-width: 80px; height: 30px; text-align: center; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-variant-numeric: tabular-nums; }
.cl-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-selw { display: flex; gap: 6px; align-items: center; }
.cl-selw select { flex: 0 0 200px; }
.cl-sel.ok { background-color: var(--good-bg) !important; color: var(--good) !important; border-color: transparent !important; }
.cl-sel.warn { background-color: var(--warn-bg) !important; color: var(--warn) !important; border-color: transparent !important; }
.cl-sel.no { background-color: var(--bad-bg) !important; color: var(--bad) !important; border-color: transparent !important; }
.cl-note { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; background: var(--panel); color: var(--text); font-size: 12.5px; }
.cl-sign { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cl-h4 { margin: 20px 0 8px; font-size: 14px; }
.cl-hist tr.cl-cur td { background: var(--accent-soft); }
.cl-hist td.cl-iss { font-size: 12px; min-width: 260px; max-width: 460px; white-space: normal !important; line-height: 1.4; }
@media (max-width: 760px) { .cl-table col.cl-labcol { width: 38%; } .cl-table { font-size: 12px; } .cl-selw { flex-wrap: wrap; } .cl-selw select { flex-basis: 100%; } .cl-tog { height: 34px; } }

/* ===== Документы и техкарта на сайте ===== */
.doc-card { padding: 16px 18px !important; }
.doc-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.doc-tools .table-search { flex: 1; min-width: 220px; margin: 0; }
.doc-kind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; margin-right: 6px; background: var(--accent-soft); color: var(--accent); }
.doc-kind.cl { background: var(--panel2); color: var(--muted2); border: 1px solid var(--border); }
.doc-table td { white-space: nowrap; }
.doc-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tc-grid { width: 100%; min-width: 1050px; border-collapse: collapse; table-layout: fixed; font-size: 12px; margin-top: 8px; }
.tc-grid td { border: 1px solid var(--border2, var(--border)); padding: 2px 3px; text-align: center; vertical-align: middle; height: 26px; }
.tc-grid td.h { font-weight: 700; background: var(--panel2); font-size: 12.5px; }
.tc-grid td.s, .tc-grid td.tc-lab { font-size: 11px; color: var(--muted2); }
.tc-grid td.h.tc-lab { color: var(--text); }
.tc-in { width: 100%; box-sizing: border-box; height: 26px; border: 1px solid transparent; border-radius: 5px; background: var(--panel2); color: var(--text); padding: 0 6px; font-size: 12.5px; text-align: center; }
.tc-in:focus, .tc-area:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 2px var(--accent-soft); }
.tc-in.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.tc-text { position: relative; } .tc-text .tc-pz { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 6px; }
.tc-area { width: 100%; height: 100%; min-height: 60px; box-sizing: border-box; resize: vertical; border: 1px solid transparent; border-radius: 6px; background: var(--panel2); color: var(--text); padding: 6px 8px; font: inherit; font-size: 12.5px; }
.tc-grid td.tc-area { padding: 3px; vertical-align: top; }
.tc-grid .cl-tog { max-width: none; height: 22px; font-size: 13px; }
.tc-grid select { width: 100%; height: 26px !important; font-size: 12px !important; }
.tc-chk { width: 100%; text-align: left; border: 1px dashed var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 3px 8px; cursor: pointer; font-size: 12px; }
.tc-chk b { display: inline-block; width: 16px; } .tc-chk.ok { background: var(--good-bg); border-color: transparent; } .tc-chk.ok b { color: var(--good); } .tc-chk.no { background: var(--bad-bg); border-color: transparent; } .tc-chk.no b { color: var(--bad); }
.tc-back { min-width: 700px; max-width: 900px; }
body[data-tab="docs"] #stickyBar, body[data-tab="forms"] #stickyBar { display: none !important; } /* фильтры тестов тут ни к чему */
.ov-shell .kpi-grid.sv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
@media (max-width: 1100px) { .ov-shell .kpi-grid.sv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-pick select { font-weight: 600; }
.tc-testpick { max-width: 320px; }
/* заказы теста в «Все образцы» */
.t-orders { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.t-order { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 7px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--border); font-weight: 600; font-size: 12px; white-space: nowrap; }
.t-order small { font-weight: 400; color: var(--muted2); font-size: 11px; }
.t-order i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent); }
.t-order.has-tc { cursor: pointer; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.t-order.has-tc:hover { background: var(--accent-soft); }
.tc-slots { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; order: 10; margin-top: 4px; }
.tc-slot { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px dashed var(--border); border-radius: 10px; background: var(--panel2); flex: 1; min-width: 380px; }
.tc-slot > b { font-size: 12px; min-width: 70px; }
.tc-slot .tc-testpick { flex: 1; max-width: none; min-width: 0; }
.tc-slot.on { border-style: solid; } .tc-slot.good { border-color: var(--good); background: var(--good-bg); } .tc-slot.warn { border-color: var(--warn); background: var(--warn-bg); } .tc-slot.bad { border-color: var(--bad); background: var(--bad-bg); }
.tc-slot-v { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ===== Читаемость: техкарта и чек-лист ===== */
/* подписи — спокойный фон, поля для заполнения — белые с явной рамкой, заполненное — жирным */
.tc-grid { font-size: 13px; }
.tc-grid td { border-color: color-mix(in srgb, var(--text) 22%, var(--border)); height: 30px; padding: 3px 4px; }
.tc-grid td.tc-lab, .tc-grid td.s { background: var(--panel2); color: var(--text); font-size: 12px; font-weight: 500; }
.tc-grid td.h, .tc-grid td.h.tc-lab { background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.tc-grid td.tc-empty { background: var(--panel2); }
.tc-in, .tc-area { background: var(--panel) !important; border: 1px solid color-mix(in srgb, var(--text) 18%, var(--border)) !important; color: var(--text); font-weight: 600; font-size: 13px; }
.tc-in { height: 28px; }
.tc-in:hover, .tc-area:hover { border-color: var(--accent) !important; }
.tc-in::placeholder, .tc-area::placeholder { color: var(--muted); font-weight: 400; font-style: italic; opacity: .75; }
.tc-in:placeholder-shown, .tc-area:placeholder-shown { background: var(--panel) !important; }
.tc-area { font-weight: 500; line-height: 1.4; }
.tc-grid select { font-size: 12px !important; padding: 0 20px 0 6px !important; background-position: right 6px center !important; font-weight: 600; }
.tc-grid .cl-tog { border: 1px solid color-mix(in srgb, var(--text) 18%, var(--border)); border-style: solid; background: var(--panel); height: 24px; font-size: 15px; }
.tc-grid td.tc-tog { background: var(--panel); }
.tc-chk { border: 1px solid color-mix(in srgb, var(--text) 18%, var(--border)); font-size: 12.5px; font-weight: 500; padding: 4px 8px; }
.tc-chk b { font-size: 14px; }
.tc-grid td.tc-empty:empty { background: var(--panel2); }
.tc-back td { height: 32px; }

/* чек-лист */
.cl-table { font-size: 14px; }
.cl-table td { padding: 5px 6px; border-bottom-color: color-mix(in srgb, var(--text) 12%, var(--border)); }
.cl-table tr:not(.cl-sec):not(.cl-hdr):hover td { background: var(--row-hover); }
.cl-item { font-weight: 500; color: var(--text); }
.cl-sec th { padding: 16px 10px 8px !important; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-left: 4px solid var(--accent); border-bottom: 1px solid var(--border); }
.cl-hdr td { font-size: 12.5px; color: var(--text); background: var(--panel2); }
.cl-tog { height: 34px; max-width: 72px; border: 1px solid color-mix(in srgb, var(--text) 20%, var(--border)); border-style: solid; font-size: 18px; }
.cl-tog:not(.ok):not(.no) { background: var(--panel); }
.cl-tog.ok, .cl-tog.no { font-size: 18px; }
.cl-num { height: 34px; border-color: color-mix(in srgb, var(--text) 20%, var(--border)); font-weight: 600; font-size: 14px; }
.cl-lab { color: var(--text); font-weight: 600; font-size: 12.5px; }
.cl-sum { font-size: 15px; }
.cl-sel { font-size: 13px !important; font-weight: 600; }
.cl-note { height: 34px; font-size: 13px; border-color: color-mix(in srgb, var(--text) 20%, var(--border)); }

/* ===== Визуальная доработка: документы ===== */
:root { --z-in: #2563eb; --z-setup: #7c3aed; --z-proc: #d97706; --z-out: #16a34a; }
[data-theme="dark"] { --z-in: #5b8def; --z-setup: #a78bfa; --z-proc: #f0b44c; --z-out: #45c283; }
.doc-card { background: var(--panel); }
.tc-head { position: sticky; top: 0; z-index: 6; flex-direction: column; align-items: stretch !important; gap: 8px !important; margin: -16px -18px 10px !important; padding: 12px 18px 10px; background: var(--panel); border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; box-shadow: 0 6px 12px -10px rgba(15,23,42,.25); }
.tc-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-title { display: flex; flex-direction: column; gap: 1px; }
.tc-title .card-title { font-size: 17px; }
.tc-head .tc-slots { order: 0; margin: 0; }
.tc-meters { gap: 18px; }
.tc-meter { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted2); }
.tc-meter b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; } .tc-meter b small { color: var(--muted); font-weight: 500; font-size: 11px; }
.tc-meter em { font-style: normal; font-weight: 700; color: var(--bad); }
.tc-mbar { display: flex; width: 90px; height: 7px; border-radius: 6px; overflow: hidden; background: var(--panel2); border: 1px solid var(--border); }
.tc-mbar i.ok { background: var(--good); } .tc-mbar i.no { background: var(--bad); }
.tc-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted2); }
.tc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.tc-legend .lg-in { background: var(--z-in); } .tc-legend .lg-setup { background: var(--z-setup); } .tc-legend .lg-proc { background: var(--z-proc); } .tc-legend .lg-out { background: var(--z-out); }
.tc-tip { font-size: 12px; color: var(--muted2); margin: 0 0 8px; }
.tc-paper { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); overflow-x: auto; }
.tc-paper .tc-grid { margin: 0; }
/* зоны бланка: заголовки цветом своей зоны */
.tc-grid td.h.z-in { background: color-mix(in srgb, var(--z-in) 13%, var(--panel)); color: color-mix(in srgb, var(--z-in) 70%, var(--text)); }
.tc-grid td.h.z-setup { background: color-mix(in srgb, var(--z-setup) 13%, var(--panel)); color: color-mix(in srgb, var(--z-setup) 70%, var(--text)); }
.tc-grid td.h.z-proc { background: color-mix(in srgb, var(--z-proc) 15%, var(--panel)); color: color-mix(in srgb, var(--z-proc) 65%, var(--text)); }
.tc-grid td.h.z-out { background: color-mix(in srgb, var(--z-out) 13%, var(--panel)); color: color-mix(in srgb, var(--z-out) 65%, var(--text)); }
.tc-grid td.zone-top.z-in { box-shadow: inset 0 3px 0 var(--z-in); } .tc-grid td.zone-top.z-setup { box-shadow: inset 0 3px 0 var(--z-setup); }
.tc-grid td.zone-top.z-proc { box-shadow: inset 0 3px 0 var(--z-proc); } .tc-grid td.zone-top.z-out { box-shadow: inset 0 3px 0 var(--z-out); }
.tc-grid td.zone-top { font-size: 14px !important; text-transform: uppercase; letter-spacing: .04em; height: 34px; }
.tc-grid td.tc-lab.z-proc:not(.h) { font-variant-numeric: tabular-nums; }
.tc-grid tr:nth-child(n+6):nth-child(-n+25) td.z-proc.tc-tog { background: var(--panel); }
.tc-grid .cl-tog.ok { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.tc-grid .cl-tog.no { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.tc-grid td.z-top.tc-lab { font-weight: 600; }
/* чек-лист: прогресс по разделу, липкая строка итога */
.cl-fill .sec-head { position: sticky; top: 0; z-index: 5; background: var(--panel); margin: -16px -18px 12px !important; padding: 14px 18px 10px; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; box-shadow: 0 6px 12px -10px rgba(15,23,42,.25); }
.cl-sec th { white-space: nowrap; }
.cl-secp { display: inline-block; vertical-align: middle; width: 90px; height: 6px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--border); overflow: hidden; margin: 0 8px 0 4px; }
.cl-secp i { display: block; height: 100%; background: var(--accent); } .cl-secp.full i { background: var(--good); }
.cl-secn { font-size: 11.5px; color: var(--muted2); margin-right: 10px; text-transform: none; letter-spacing: 0; font-weight: 600; } .cl-secn b { color: var(--bad); }
.cl-prog { height: 10px; width: 180px; }
.cl-pct { font-size: 16px; }
@media (max-width: 760px) { .tc-legend { display: none; } .tc-meters { gap: 10px; } .cl-secp { width: 50px; } }
/* чек-лист внутри «Документов» — без второй рамки */
#docClHost .cl-fill { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: transparent; }
#docClHost .cl-fill .sec-head { margin: 0 0 12px !important; padding: 10px 0 10px; border-radius: 0; }
/* аналитика документов */
.ds-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.ds-card { padding: 14px 16px !important; min-width: 0; }
.ds-lines, .ds-inc { grid-column: 1 / -1; }
.ds-grid .ds-lines { grid-column: 1; } .ds-grid .ds-lines + .ds-card { grid-column: 2; }
.ds-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ds-h h4 { margin: 0; font-size: 14px; }
.ds-table td { vertical-align: middle; }
.ds-bar { position: relative; width: 110px; height: 20px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.ds-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 5px; }
.ds-bar span { position: relative; padding-left: 7px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-who { white-space: normal !important; max-width: 220px; font-size: 12.5px; }
.ds-cal { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ds-day { height: 30px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text); background: var(--panel2); }
.ds-day.good { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); }
.ds-day.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.ds-day.bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.ds-day.none { color: var(--muted); }
.ds-day.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.ds-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--muted2); }
.ds-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; background: var(--panel2); border: 1px solid var(--border); }
.ds-legend i.good { background: var(--good); border: 0; } .ds-legend i.warn { background: var(--warn); border: 0; } .ds-legend i.bad { background: var(--bad); border: 0; }
.ds-incrow { display: grid; grid-template-columns: 110px 140px 80px 40px 1fr; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.ds-incrow:hover { background: var(--row-hover); }
.ds-miss { font-size: 12px; color: var(--warn); }
@media (max-width: 1100px) { .ds-grid { grid-template-columns: 1fr; } .ds-grid .ds-lines, .ds-grid .ds-lines + .ds-card { grid-column: 1; } .ds-incrow { grid-template-columns: 1fr 1fr; } }
.ds-legend i.lg-good { background: var(--good); border: 0; } .ds-legend i.lg-warn { background: var(--warn); border: 0; } .ds-legend i.lg-bad { background: var(--bad); border: 0; }
.ds-table .st-pill { white-space: nowrap; }
.ds-bar { width: 80px; }
.ds-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.ds-table th, .ds-table td { padding-left: 8px !important; padding-right: 8px !important; }
/* ===== Доступ и пользователи ===== */
/* экран входа */
.ac-gate { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: var(--bg, var(--panel2)); background-image: radial-gradient(circle at 20% 10%, var(--accent-soft), transparent 45%), radial-gradient(circle at 90% 90%, var(--accent-soft), transparent 40%); }
.ac-gate[hidden] { display: none; }
body.ac-locked-app { overflow: hidden; }
.ac-gate-box { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 26px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.ac-gate-box h2 { margin: 4px 0 0; font-size: 22px; text-align: center; }
.ac-gate-box > .sec-sub { text-align: center; margin-top: -6px; }
.ac-gate-logo { width: 52px; height: 52px; margin: 0 auto; border-radius: 14px; display: grid; place-items: center; background: var(--accent); }
.ac-gate-logo .ico { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; }
.ac-gate-box .form-field { display: flex; flex-direction: column; gap: 4px; }
.ac-gate-box .form-field span { font-size: 12px; color: var(--muted2); font-weight: 600; }
.ac-gate-box input, .ac-gate-box select { height: 38px; font-size: 14px; }
.ac-gate-go { height: 40px; font-size: 14px; margin-top: 4px; }
.ac-gate-guest { font-size: 12.5px; }
.ac-gate-msg { display: none; padding: 8px 10px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-size: 12.5px; font-weight: 600; }
.ac-gate-msg.show { display: block; }
.ac-gate-foot { font-size: 11.5px; color: var(--muted); text-align: center; }
.ac-seg { display: flex; background: var(--panel2); border-radius: 10px; padding: 3px; gap: 3px; }
.ac-seg button { flex: 1; border: 0; background: transparent; border-radius: 8px; height: 30px; font-weight: 600; color: var(--muted2); cursor: pointer; }
.ac-seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

/* пользователь в шапке */
.ac-chip-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.ac-chip-wrap[hidden] { display: none; }
.ac-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); cursor: pointer; position: relative; color: var(--text); }
.ac-chip:hover { border-color: var(--accent); }
.ac-av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700; flex: none; }
.ac-who { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.ac-who b { font-size: 12.5px; } .ac-who small { font-size: 10.5px; color: var(--muted); }
.ac-dot { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.ac-viewas { font-size: 12px; background: var(--warn-bg); color: var(--warn); padding: 4px 6px 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.ac-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 240px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.ac-menu-h { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.ac-menu-h small { color: var(--muted); font-size: 11.5px; }
.ac-menu button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.ac-menu button:hover { background: var(--row-hover, var(--panel2)); }
.ac-menu button.danger { color: var(--bad); }
input.ac-locked { background: var(--panel2); color: var(--muted2); cursor: default; }
.ac-perm-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.ac-perm-list > div { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; border-bottom: 1px solid var(--border); }

/* только просмотр */
.ac-ro-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.ac-ro-banner .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ac-ro-banner span { color: var(--text); opacity: .8; }
body.ac-no-tests [onclick^="openTestForm"], body.ac-no-tests [onclick^="openQuickForm"], body.ac-no-tests #addTestBtn { display: none !important; }

/* админ-панель */
.ac-hero { margin-bottom: 12px; }
.ac-kpis { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.ac-kpi { background: var(--panel2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--border2); }
.ac-kpi .v { font-size: 22px; font-weight: 700; } .ac-kpi .k { font-size: 12px; color: var(--muted2); }
.ac-kpi.good { border-left-color: var(--good); } .ac-kpi.warn { border-left-color: var(--warn); } .ac-kpi.bad { border-left-color: var(--bad); }
.ac-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); margin-bottom: 12px; font-size: 13px; }
.ac-pending .ico { width: 18px; height: 18px; fill: none; stroke: var(--warn); stroke-width: 2; }
.ac-pend-u { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); padding: 3px 4px 3px 10px; border-radius: 999px; }
.ac-subtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ac-subtabs button { border: 0; background: transparent; padding: 9px 14px; font-weight: 600; color: var(--muted2); border-bottom: 2px solid transparent; cursor: pointer; font-size: 13px; }
.ac-subtabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.ac-subtabs small { background: var(--panel2); border-radius: 8px; padding: 1px 6px; margin-left: 4px; font-size: 11px; color: var(--muted2); }
.ac-tools { display: flex; gap: 8px; margin-bottom: 8px; }
.ac-tools .tf-q { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; background: var(--panel); }
.ac-tools .tf-q input { border: 0; background: transparent; height: 32px; min-width: 240px; outline: none; }
.ac-tools .tf-q .ico { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; }
.ac-u { display: flex; align-items: center; gap: 10px; }
.ac-u small { display: block; color: var(--muted); font-size: 11.5px; }
.ac-adm { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }
.ac-grp { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); white-space: nowrap; }
.ac-act { white-space: nowrap; text-align: right; } .ac-act .mini-btn { margin-left: 3px; }
.ac-users td { vertical-align: middle; }
.ac-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; font-size: 12px; }
.ac-note .ico { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; margin-top: 1px; }

/* матрица прав */
.ac-mx-help { font-size: 12.5px; color: var(--muted2); margin-bottom: 8px; }
.ac-mx-wrap { overflow: auto; max-height: 72vh; }
.ac-mx th, .ac-mx td { text-align: center; padding: 4px 6px !important; }
.ac-mx th:first-child, .ac-mx td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 190px; }
.ac-mx thead th { position: sticky; top: 0; background: var(--th-bg, var(--panel2)); z-index: 2; vertical-align: top; }
.ac-mx thead th:first-child { z-index: 3; }
.ac-mx-h { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 110px; }
.ac-mx-h b { font-size: 12px; } .ac-mx-h small { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.ac-mx-h select { font-size: 11px; height: 24px; max-width: 130px; }
.ac-mx-h input[type=color] { width: 26px; height: 18px; border: 0; padding: 0; background: none; cursor: pointer; }
.ac-mx-a { display: flex; gap: 2px; } .ac-mx-a .mini-btn { padding: 0 6px; height: 22px; font-size: 11px; }
.ac-mx-g td { background: var(--panel2) !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted2); text-align: left !important; }
.ac-row-lbl { border: 0; background: none; padding: 0; cursor: pointer; color: var(--text); font-size: 13px; text-align: left; }
.ac-row-lbl:hover { color: var(--accent); text-decoration: underline; }
.ac-lv { width: 34px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel2); cursor: pointer; font-size: 13px; color: var(--muted); }
.ac-lv.edit { background: var(--good-bg); color: var(--good); border-color: transparent; font-weight: 700; }
.ac-lv.view { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.ac-lv.none { background: var(--panel); }
.ac-lv.inh { background: transparent; border-style: dashed; }
.ac-cell.adm { color: var(--accent); font-weight: 700; }

/* редактирование пользователя */
.ac-edit { max-width: 720px; }
.ac-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ac-edit-grid .form-field { display: flex; flex-direction: column; gap: 4px; } .ac-edit-grid .form-field span { font-size: 12px; color: var(--muted2); font-weight: 600; }
.ac-check { display: flex; align-items: center; gap: 8px; font-size: 13px; align-self: end; padding-bottom: 8px; }
.ac-lbl { font-size: 12px; color: var(--muted2); font-weight: 600; margin: 14px 0 6px; }
.ac-grp-pick { display: flex; flex-wrap: wrap; gap: 6px; } .ac-grp-pick .ac-grp { cursor: pointer; padding: 4px 10px; }
.ac-over { margin-top: 14px; } .ac-over summary { cursor: pointer; font-weight: 600; font-size: 13px; } .ac-over summary small { color: var(--muted); font-weight: 400; }
.ac-over-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; margin-top: 8px; max-height: 40vh; overflow: auto; }
.ac-over-grid label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; border-bottom: 1px solid var(--border); padding: 3px 0; }
.ac-over-grid select { font-size: 12px; height: 26px; max-width: 170px; }

/* настройки */
.ac-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ac-set-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ac-set-card h4 { margin: 0; font-size: 14px; }
.ac-set { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.ac-set span { display: flex; flex-direction: column; } .ac-set small { color: var(--muted); font-size: 11.5px; }
.ac-set.num input, .ac-set.num select { width: 84px; height: 30px; flex: none; }
.ac-row { display: flex; gap: 6px; }

/* первое включение */
.ac-setup { max-width: 760px; margin: 10px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ac-setup > h3, .ac-setup > p, .ac-setup-ic { grid-column: 1 / -1; margin: 0; }
.ac-setup-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; }
.ac-setup-ic .ico { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 2; }
.ac-setup-f { display: flex; flex-direction: column; gap: 8px; }
.ac-setup-f .form-field { display: flex; flex-direction: column; gap: 4px; } .ac-setup-f .form-field span { font-size: 12px; color: var(--muted2); font-weight: 600; }
.ac-setup-list { background: var(--panel2); border-radius: 12px; padding: 14px; font-size: 13px; }
.ac-setup-list ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; color: var(--muted2); }
@media (max-width: 720px) { .ac-setup { grid-template-columns: 1fr; } .ac-who { display: none; } }
body[data-tab="access"] #stickyBar, body[data-tab="access"] #notifBanner, body[data-tab="access"] #staleBanner { display: none !important; }
body.ac-on #userName { display: none; }
.ac-setup-f button[type=submit] { height: 38px; margin-top: 6px; }
/* ===== Конструктор FEFCO (CAD) — в стиле сайта ===== */
.fx { --fx-cut: var(--text); --fx-crease: #d63a2f; --fx-rcrease: #2563eb; --fx-perf: #16803c; --fx-half: #b77714; --fx-dim: #0e7490; display: flex; flex-direction: column; gap: 12px; }
[data-theme="dark"] .fx { --fx-crease: #f06a5f; --fx-rcrease: #5b8def; --fx-perf: #45c283; --fx-half: #e3ac42; --fx-dim: #38bdf8; }
.fx .ico, #fxModal .ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fx-title h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.fx-codebadge { background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 6px; letter-spacing: 0.3px; }
.fx-name { color: var(--muted2); font-size: 13px; }
.fx-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fx-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text); box-shadow: var(--shadow); white-space: nowrap; list-style: none; }
.fx-btn:hover { background: var(--panel2); }
.fx-menu { position: relative; }
.fx-menu summary { list-style: none; } .fx-menu summary::-webkit-details-marker { display: none; }
.fx-menu .chev { width: 13px; height: 13px; opacity: 0.6; }
.fx-menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; z-index: 400; display: flex; flex-direction: column; gap: 1px; }
.fx-menu-list button { display: flex; align-items: center; width: 100%; height: 32px; padding: 0 10px; border: none; background: transparent; border-radius: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; }
.fx-menu-list button:hover { background: var(--panel2); }
.fx-menu-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 6px 10px 2px; font-weight: 600; }
.fx-menu-sep { height: 1px; background: var(--border2); margin: 4px 2px; }
.fx-layers { min-width: 190px; left: 0; right: auto; }
.fx-layers button::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border); margin-right: 8px; flex: none; }
.fx-layers button.active::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--panel); }

.fx-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.fx-side { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 16px; max-height: calc(100vh - 150px); overflow-y: auto; position: sticky; top: 12px; }
.fx-sec { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fx-sec:first-child { margin-top: 0; }
.fx-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-f span { font-size: 11.5px; color: var(--muted2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-f input, .fx-f select, #fxLType { height: 32px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--panel); color: var(--text); width: 100%; min-width: 0; font-family: inherit; font-variant-numeric: tabular-nums; }
.fx-f input:focus, .fx-f select:focus, #fxLType:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-f input:disabled { background: var(--panel2); color: var(--muted); }
.fx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; margin-bottom: 8px; }
.fx-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.fx-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); padding: 4px 0; cursor: pointer; }
.fx-muted { color: var(--muted); font-size: 11.5px; }
.fx-typeinfo { font-size: 12.5px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 10px; margin-top: 8px; line-height: 1.45; }
.fx-stats { background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.fx-stats > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.fx-stats > div span { color: var(--muted2); }
.fx-stats > div b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fx-warn { font-size: 11.5px; color: var(--warn); background: var(--warn-bg); border-radius: 7px; padding: 6px 9px; margin-top: 6px; }
.fx-good { color: var(--good); } .fx-bad { color: var(--bad); } .fx-warn b, b.fx-warn { color: var(--warn); }

.fx-seg { display: inline-flex; gap: 2px; background: var(--panel2); border: 1px solid var(--border); padding: 3px; border-radius: 10px; }
.fx-seg button { padding: 6px 13px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--muted2); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.fx-seg button:hover { color: var(--text); }
.fx-seg button.active { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.1), 0 0 0 1px var(--border2); }
.fx-seg-sm { padding: 2px; border-radius: 8px; } .fx-seg-sm button { padding: 2px 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.fx-seg-ic button { padding: 5px 7px; }

.fx-picker { position: relative; }
.fx-search { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.fx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-search .ico { color: var(--muted); width: 15px; height: 15px; }
.fx-search input { border: 0; outline: none; background: transparent; color: var(--text); font-size: 13px; width: 100%; height: 100%; font-family: inherit; }
.fx-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); max-height: 380px; overflow-y: auto; z-index: 300; display: none; }
.fx-list.open { display: block; }
.fx-lg { position: sticky; top: 0; background: var(--panel2); font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 7px 12px 5px; border-bottom: 1px solid var(--border2); display: flex; justify-content: space-between; }
.fx-lo { display: flex; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; align-items: baseline; }
.fx-lo b { min-width: 38px; font-variant-numeric: tabular-nums; }
.fx-lo span { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-lo:hover, .fx-lo.active { background: var(--accent-soft); color: var(--accent); }
.fx-lo.cur b { color: var(--accent); }
.fx-empty { padding: 16px; text-align: center; color: var(--muted); }

.fx-main { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.fx-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border2); }
.fx-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.fx-tools #fxLType { width: auto; height: 30px; font-size: 12px; }
.fx-tb { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--border); background: var(--panel); border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--muted2); font-weight: 500; font-family: inherit; list-style: none; }
.fx-tb:hover { color: var(--text); background: var(--panel2); }
.fx-tb.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fx-tb:disabled { opacity: .4; cursor: default; }
.fx-tb.fx-ic { padding: 0 7px; }
.fx-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.fx-zoom { font-size: 11.5px; color: var(--muted); min-width: 40px; font-variant-numeric: tabular-nums; }
.fx-stage { position: relative; height: calc(100vh - 230px); min-height: 520px; background: var(--panel); }
.fx-status { display: flex; gap: 12px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--border2); font-size: 11.5px; color: var(--muted2); font-variant-numeric: tabular-nums; min-height: 30px; flex-wrap: wrap; }
.fx-status b { color: var(--text); }
.fx-st-hint { color: var(--muted); }
.fx-chip { background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 0 7px; font-size: 11px; }
.fx-edits[hidden] { display: none; }
.fx-edits { padding: 6px 12px; border-top: 1px solid var(--border2); font-size: 12px; color: var(--warn); background: var(--warn-bg); display: flex; align-items: center; gap: 8px; }

/* чертёж */
.fx-svg { width: 100%; height: 100%; display: block; background: var(--panel); user-select: none; touch-action: none; }
.fx-svg .fx-l { stroke-width: 1.4; }
.fx-svg .fx-l-crease, .fx-svg .fx-l-rcrease { stroke-width: 1.2; }
.fx-gridl line { stroke: var(--border2); stroke-width: 1; vector-effect: non-scaling-stroke; } .fx-gridl line.maj { stroke: var(--border); }
.fx-names text { fill: var(--muted); font-family: var(--font); pointer-events: none; opacity: .85; }
.fx-dim line { stroke: var(--fx-dim); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.fx-dim text, .fx-ptitle { fill: var(--fx-dim); font-family: var(--font); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-ptitle { fill: var(--text); }
.fx-stamp rect, .fx-stamp line { fill: none; stroke: var(--muted2); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.fx-stamp text { fill: var(--text); font-family: var(--font); } .fx-stamp .k { fill: var(--muted); }
.fx-hov { stroke: var(--accent); stroke-width: 5; stroke-opacity: .35; }
.fx-selL { stroke: var(--accent); stroke-width: 3; }
.fx-rub { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-dasharray: 5 3; }
.fx-meas { stroke: #d946ef; stroke-width: 1.5; }
.fx-rubt { fill: var(--accent); font-family: var(--font); font-weight: 600; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.fx-snap { fill: none; stroke: #d946ef; stroke-width: 1.5; }
.fx-cur { fill: var(--accent); }
.fx-props { position: absolute; top: 12px; right: 12px; width: 230px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 10px 12px; font-size: 12.5px; }
.fx-props-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fx-x { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.fx-kv { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; color: var(--muted2); font-variant-numeric: tabular-nums; }
.fx-kv b, .fx-kv span:last-child { color: var(--text); }
.fx-kv select { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; font-family: inherit; }
.fx-props-a { margin-top: 8px; display: flex; justify-content: flex-end; }

/* 3D */
.fx-3d { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, var(--panel) 0%, var(--panel2) 70%, var(--bg) 100%); overflow: hidden; }
.fx-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.fx-3panel { position: absolute; top: 12px; left: 12px; width: 236px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; backdrop-filter: blur(6px); }
.fx-3row { display: flex; justify-content: space-between; align-items: baseline; }
.fx-lbl { font-size: 11px; color: var(--muted2); }
.fx-3panel input[type=range] { width: 100%; accent-color: var(--accent); }
.fx-3btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 4px; }
.fx-3btns .mini-btn { justify-content: center; padding: 0 6px; }
.fx-3opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; font-size: 12px; }
.fx-3opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.fx-3steps { position: absolute; top: 12px; right: 12px; width: 250px; max-height: calc(100% - 70px); overflow-y: auto; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; backdrop-filter: blur(6px); }
.fx-3steps-h { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 4px 6px 6px; }
.fx-stepb { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: none; background: transparent; padding: 6px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--text); font-family: inherit; }
.fx-stepb span { width: 20px; height: 20px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; flex: none; color: var(--muted2); }
.fx-stepb:hover { background: var(--panel2); }
.fx-stepb.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .fx-stepb.active span { background: var(--accent); color: #fff; border-color: var(--accent); }
.fx-3tip { position: absolute; bottom: 12px; left: 12px; background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--muted2); max-width: calc(100% - 24px); }
.fx-3load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* раскладка */
.fx-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12px; gap: 8px; }
.fx-sheet-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fx-sheet-bar .fx-f { width: 110px; }
.fx-sheet-kpi { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.fx-sheet-kpi > div { background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; padding: 6px 12px; display: flex; flex-direction: column; min-width: 96px; }
.fx-sheet-kpi span { font-size: 11px; color: var(--muted2); } .fx-sheet-kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.fx-sheet-svg { flex: 1; min-height: 0; width: 100%; }
.fx-sheet-rect { fill: color-mix(in srgb, #c8a06b 18%, var(--panel)); stroke: var(--muted2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fx-sheet-m { fill: none; stroke: var(--border); stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.fx-sheet-svg line { stroke-width: 1; }

/* отчёт */
.fx-report { position: absolute; inset: 0; overflow-y: auto; padding: 16px 18px 24px; }
.fx-rep-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.fx-rep-head h3 { margin: 0 0 3px; font-size: 16px; }
.fx-rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.fx-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.fx-card.fx-wide { grid-column: 1 / -1; }
.fx-card-t { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.fx-card .data-table td, .fx-card .data-table th { padding: 6px 8px; }
.fx-steps-ol { margin: 0; padding-left: 20px; line-height: 1.8; }

/* каталог / библиотека */
.fx-modal.wide { max-width: 1180px; }
.fx-cat-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; position: sticky; top: -18px; background: var(--panel); padding: 6px 0; z-index: 2; }
.fx-cat-bar .fx-search { flex: 1; min-width: 200px; }
.fx-cat-g { font-size: 12px; font-weight: 700; color: var(--muted2); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .4px; }
.fx-cat-g small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.fx-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fx-cat-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); }
.fx-cat-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-cat-card.cur { border-color: var(--accent); }
.fx-cat-card b { font-size: 13px; } .fx-cat-card span { font-size: 11px; color: var(--muted2); line-height: 1.3; }
.fx-cat-card i.badge { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 10px; }
.fx-del { position: absolute; top: 4px; right: 8px; font-style: normal; font-size: 18px; color: var(--bad); cursor: pointer; }
.fx-thumb { width: 100%; background: var(--panel2); border-radius: 6px; margin-bottom: 4px; }
.fx-thumb line { vector-effect: non-scaling-stroke; stroke-width: 1; }
.fx-thumb .c { stroke: var(--text); } .fx-thumb .k { stroke: #d63a2f; stroke-dasharray: 3 2; }
.fx-toast { position: fixed; bottom: 22px; right: 22px; background: var(--text); color: var(--panel); padding: 10px 16px; border-radius: 10px; z-index: 3000; font-size: 13px; box-shadow: var(--shadow-lg); }

#fxPrint { display: none; }
@media print {
  body.fx-printing > *:not(#fxPrint) { display: none !important; }
  body.fx-printing #fxPrint { display: block !important; }
  #fxPrint svg { width: 100%; height: auto; max-height: 100vh; }
  #fxPrint .fx-print-rep button { display: none; }
  @page { size: A4 landscape; margin: 10mm; }
}
@media (max-width: 980px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-side { position: static; max-height: none; }
  .fx-stage { height: 70vh; min-height: 420px; }
  .fx-3steps { display: none; }
  .fx-3panel { width: 200px; }
}
@media (max-width: 600px) { .fx-row3 { grid-template-columns: 1fr 1fr; } .fx-tools { margin-left: 0; } }
.fx-catpdf { display: inline-flex; align-items: center; margin-top: 6px; text-decoration: none; }
/* телефон: виды в две строки, редкие инструменты — под кнопкой «Ещё», кнопка «Показать чертёж» */
.fx-mob-only, .fx-tools-tg { display: none; }
@media (max-width: 600px) {
  #fxViews { display: flex; flex-wrap: wrap; width: 100%; }
  #fxViews button { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
  .fx-mob-only { display: block; width: 100%; margin: 0 0 8px; }
  .fx-tools-tg { display: inline-flex; }
  .fx-tools-tg .chev { transition: transform .15s; } .fx-tools.open .fx-tools-tg .chev { transform: rotate(180deg); }
  #fxTools:not(.open) > :not(.fx-keep) { display: none !important; }
}
.fx-dlg-in { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--panel); color: var(--text); font-family: inherit; }
.fx-dlg-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-dlg-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.fx-dlg-a .mini-btn { height: 32px; padding: 0 14px; }

body[data-tab="fefco"] #stickyBar, body[data-tab="fefco"] #notifBanner, body[data-tab="fefco"] #staleBanner { display: none !important; }
#fefcoPanel .fx-title h2 { display: none; }
#fefcoPanel .fx-stage { height: calc(100vh - 290px); }
#fefcoPanel .fx-side { max-height: calc(100vh - 170px); }
/* элементы на панелях, ручки, направление гофры */
.fx-sub { border-left: 2px solid var(--border); padding: 4px 0 4px 10px; margin: 2px 0 8px; }
.fx-feat { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: var(--panel2); }
.fx-feat > select { width: 100%; margin: 4px 0 6px; }
.fx-feat-h { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.fx-feat-x { border: none; background: transparent; color: var(--muted2); font-size: 16px; cursor: pointer; line-height: 1; }
.fx-feat-x:hover { color: var(--bad, #d03b3b); }
.fx-feat-add { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.fx-flute { stroke: rgba(150, 110, 60, .28); stroke-width: 2; }
/* инструменты черчения */
.fx-win { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1; }
.fx-win.cross { fill: color-mix(in srgb, #16a34a 8%, transparent); stroke: #16a34a; stroke-dasharray: 5 3; }
.fx-hov-trim { stroke: #dc2626; stroke-opacity: .55; }
.fx-dim-sel line { stroke: var(--accent); stroke-width: 2; }
.fx-dim-sel text { fill: var(--accent); }
.fx-param { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted2); }
.fx-param input { width: 64px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0 6px; font-family: inherit; }
.fx-param[hidden] { display: none; }
.fx-pe { display: grid; grid-template-columns: 1fr 64px 64px; gap: 4px 6px; align-items: center; padding: 4px 0; color: var(--muted2); font-size: 12px; }
.fx-pe input { width: 100%; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 0 5px; font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.fx-free-help { font-size: 12px; line-height: 1.5; color: var(--muted2); display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fx-free-help b { color: var(--text); font-weight: 600; }
.fx-free-help code { background: var(--panel2); border-radius: 4px; padding: 0 4px; font-size: 11.5px; }
/* настройки панелей */
.fx-pov > summary { cursor: pointer; list-style: none; }
.fx-pov > summary::before { content: '▸ '; } .fx-pov[open] > summary::before { content: '▾ '; }
.fx-pov-t { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 6px; }
.fx-pov-t th { text-align: left; font-weight: 500; color: var(--muted2); padding: 2px 4px; font-size: 11px; }
.fx-pov-t td { padding: 2px 4px; vertical-align: middle; }
.fx-pov-t td:first-child label { display: flex; gap: 6px; align-items: center; line-height: 1.25; }
.fx-pov-t input[type=number] { width: 64px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 0 5px; font-family: inherit; font-size: 12px; }
.fx-pov-t tr.off td:first-child { color: var(--muted2); text-decoration: line-through; }
/* сворачиваемые разделы левой панели */
#fxSide > .fx-sec.fx-coll { cursor: pointer; user-select: none; }
#fxSide > .fx-sec.fx-coll::before { content: '▾'; display: inline-block; width: 12px; color: var(--muted2); transition: transform .15s; }
#fxSide > .fx-sec.fx-coll.closed::before { transform: rotate(-90deg); }
#fxSide .fx-hid { display: none !important; }
#fxSide > .fx-sec.fx-coll { justify-content: flex-start; gap: 6px; }
#fxSide > .fx-sec.fx-coll > .fx-seg, #fxSide > .fx-sec.fx-coll > .fx-muted { margin-left: auto; }
.fx-dbl { margin: 0 0 8px 24px; }
.fx-dbl .fx-f span { white-space: nowrap; }
/* каталог: фильтры, избранное, фото, размеры, история */
.fx-cat-f { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fx-cat-f button { border: 1px solid var(--border); background: var(--panel); color: var(--muted2); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.fx-cat-f button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.fx-star { position: absolute; top: 6px; left: 8px; z-index: 1; font-style: normal; font-size: 16px; color: var(--muted2); line-height: 1; padding: 2px; }
.fx-star.on { color: #e8a317; }
.fx-cat-ph { display: block; width: 100%; height: 96px; border-radius: 6px; overflow: hidden; background: var(--panel2); }
.fx-cat-ph img { width: 100%; height: 100%; object-fit: cover; }
.fx-catside { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.fx-catside-row { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-catside-row label.mini-btn { cursor: pointer; }
.fx-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-ph { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; background: var(--panel2); }
.fx-ph img { width: 100%; height: 100%; object-fit: cover; }
.fx-ph i { position: absolute; top: 2px; right: 2px; font-style: normal; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 12px; cursor: pointer; }
.fx-hist summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.fx-hist-t { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.fx-hist-t td { padding: 3px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.fx-hist-t tr:hover td { background: var(--panel2); }
.fx-hist-t tr.same td { color: var(--accent); font-weight: 600; }
.fx-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; align-items: center; }
.fx-size { border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 12px; cursor: pointer; background: var(--panel); font-variant-numeric: tabular-nums; }
.fx-size:hover { border-color: var(--accent); }
.fx-size.cur { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.fx-size i { font-style: normal; margin-left: 5px; color: var(--muted2); }
.fx-cmp-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fx-cmp-bar select { max-width: 420px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-family: inherit; }
.good-text { color: #16803c; font-weight: 600; } .bad-text { color: #c2410c; font-weight: 600; }
.fx-clamped { outline: 2px solid #e8a317; }
.fx-pdim line { stroke: #8b5cf6; } .fx-pdim text { fill: #8b5cf6; font-weight: 500; }
.fx-exp-opt { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; font-size: 12px; color: var(--muted2); }
.fx-exp-opt select { height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.fx-exp-opt label { display: inline-flex; gap: 4px; align-items: center; }
.fx-fit { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.fx-fit-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.fx-fit-m { font-size: 12px; padding: 4px 0; display: block !important; }
.fx-fit-m > b { margin-right: 6px; } .fx-fit-m.ok > b { color: var(--good); } .fx-fit-m.bad > b { color: var(--bad); }
.fx-fit-m.ok span, .fx-fit-m.bad > span { color: var(--muted); font-weight: 400; }
.fx-fit-fix { margin: 3px 0 0 14px; font-weight: 400; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fx-fit-fix.muted { color: var(--muted); }
.fx-stats > .fx-fit { display: block; } .fx-stats > .fx-fit b { text-align: left; }
/* перфорация: линия-подложка бледная, поверх — реальные резы (рез / перемычка в мм) */
.fx-l.fx-l-perf { stroke-opacity: .28; stroke-dasharray: none; }
.fx-perfseg { fill: none; stroke-width: 2.6; stroke-linecap: butt; pointer-events: none; }
.fx-perfpre { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.fx-perfpre .mini-btn.active { border-color: var(--fx-perf); color: var(--fx-perf); font-weight: 700; }
/* проверка сборки */
.fx-chk-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0 2px; font-size: 12px; }
.fx-chk-modal { max-width: 860px; width: calc(100vw - 24px); }
.fx-chk-modal .modal-body { max-height: 72vh; overflow: auto; }
.fx-chk-prog { margin-bottom: 8px; font-size: 13px; }
.fx-chk-k { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; margin-right: 4px; }
.fx-chk-k.k-out { background: #fef3c7; color: #92400e; } .fx-chk-k.k-lay { background: #e0e7ff; color: #3730a3; } .fx-chk-k.k-hit { background: #fee2e2; color: #991b1b; }
.fx-fltab { margin: 6px 0; font-size: 12px; } .fx-fltab summary { cursor: pointer; font-weight: 600; }
.fx-fltab-w { max-height: 280px; overflow: auto; margin: 4px 0; } .fx-fltab table { font-size: 11.5px; }
.fx-fltab tr.fx-fl-bad td { background: #fee2e2; } [data-theme="dark"] .fx-fltab tr.fx-fl-bad td { background: #4c1d1d; }
.fx-warn-t { color: var(--bad); font-weight: 600; }
.fx-fl-row { display: flex; flex-direction: column; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.fx-fl-row b { font-weight: 600; } .fx-fl-row b i { font-weight: 400; color: var(--muted2); font-style: normal; }
.fx-fl-row span { color: var(--muted2); } .fx-fl-row em { font-style: normal; color: var(--text); }
.fx-fl-row.bad { background: #fee2e2; } [data-theme="dark"] .fx-fl-row.bad { background: #4c1d1d; }
/* ---------- Оснастка и маршрут (конструктор FEFCO) ---------- */
.tl .tl-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.tl .tl-head h3 { margin: 0 0 2px; font-size: 16px; }
.tl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .tl-grid { grid-template-columns: 1fr; } }
.tl-form .fx-f { margin-bottom: 8px; }
.tl-form textarea, .tl-form input, .tl-form select { width: 100%; box-sizing: border-box; }
.tl-colors-h { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 2px; }
.tl-color { border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin-bottom: 6px; background: var(--panel2); }
.tl-color-h { display: flex; gap: 6px; align-items: center; }
.tl-color-h input { flex: 1; }
.tl-area { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted, #777); }
.tl-area input { width: 90px; }
.tl-rect { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.tl-rect input { width: 90px; }
.tl-x { border: none; background: transparent; color: var(--muted2); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
.tl-x:hover { color: var(--bad, #d03b3b); }
.tl-res { display: grid; gap: 12px; }
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.tl-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tl-kpi span { font-size: 11.5px; color: var(--muted2); }
.tl-kpi b { font-size: 18px; }
.tl-kpi i { font-style: normal; font-size: 11.5px; color: var(--muted2); }
.tl-kpi-main { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tl-route { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-step { background: var(--accent-soft, rgba(37,99,235,.1)); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: 12.5px; }
.tl-arr { color: var(--muted2); }
.tl-mt td.tl-ok { color: var(--good, #16803c); text-align: center; font-weight: 600; }
.tl-mt td.tl-no { color: var(--bad, #d03b3b); font-size: 12px; }
.tl-diebox { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.tl-diebox table { flex: 1; min-width: 260px; }
.tl-die { max-width: 100%; height: auto; }
.tl-die-b { fill: var(--panel2); stroke: var(--border2, #bbb); }
.tl-cap { fill: rgba(127,127,127,.18); }
.tl-up { fill: rgba(37,99,235,.14); stroke: var(--accent); stroke-width: 1; }
.tl-list { margin-bottom: 12px; }
.tl-list-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.tl-list-h input { flex: 1; min-width: 180px; }
.tl-cfg h4 { margin: 14px 0 6px; }
.tl-cfg-p { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 10px; }
.tl-cfg td.tl-r { white-space: nowrap; }
.tl-cfg td input[type=number] { width: 66px; }
.tl-ncol { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted2); }
.tl-ncol select { width: auto; }
.tl-tpls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: -2px 0 8px; } .tl-star { color: #e0a100; } .mini-btn.on { color: #e0a100; }
.tl-pal .fx-card-t { display: flex; align-items: center; gap: 8px; }
.tl-pal-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; margin-bottom: 8px; }
.tl-pal-set .fx-chk { grid-column: 1 / -1; }
.tl-pal-vis { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: center; margin: 6px 0 10px; }
.pal-svg { max-width: 100%; height: auto; }
.pal-base { fill: #b98a55; } .pal-plank { fill: #d9b37c; stroke: #a87a46; stroke-width: .6; }
.pal-stack { fill: #e7cfa3; stroke: #7a5a32; stroke-width: 1; } .pal-stack.rot { fill: #dcc08c; }
.pal-n { font-size: 10px; text-anchor: middle; fill: #5b4223; font-weight: 600; }
.pal-dim { font-size: 10px; text-anchor: middle; fill: var(--muted, #777); } .pal-cap { font-size: 11px; text-anchor: middle; fill: var(--muted, #777); }
.pal-dimln { stroke: var(--muted, #888); stroke-width: 1; }
.pal-w.top { fill: #d6ad73; } .pal-w.r { fill: #a97a43; } .pal-w.l { fill: #bf9058; } .pal-w { stroke: #7e5a30; stroke-width: .5; stroke-linejoin: round; }
.pal-c.top { fill: #ecd6ad; } .pal-c.r { fill: #c9a26c; } .pal-c.l { fill: #dcbb86; } .pal-c { stroke: #6e5130; stroke-width: .6; stroke-linejoin: round; }
.pal-cap3.top { fill: #f3f3f3; } .pal-cap3.r { fill: #cfcfcf; } .pal-cap3.l { fill: #e0e0e0; } .pal-cap3 { stroke: #888; stroke-width: .5; }
.pal-band { fill: none; stroke: #2f6fd6; stroke-width: 1.2; opacity: .8; }
/* красочная+: закупка, инвентаризация, QR, средний расход */
.buy-set { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.buy-set label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.buy-set .pnt-num, .buy-t .pnt-num { width: 70px; }
.buy-t tr.buy-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); } .buy-t tr.buy-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.buy-left.bad b { color: var(--bad); } .buy-left.warn b { color: var(--warn); }
.buy-ord.on { font-weight: 700; border-color: var(--accent, #2563eb); }
.bk-first { position: absolute; left: -4px; bottom: -4px; background: #1a7f37; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 6px; line-height: 1.3; }
.pnt-qrbar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin: 4px 0 8px; }
.inv-start { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); }
.inv-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); margin-bottom: 10px; position: sticky; top: 0; z-index: 2; }
.inv-prog { height: 6px; width: 220px; max-width: 100%; background: var(--border); border-radius: 4px; margin: 6px 0 2px; overflow: hidden; } .inv-prog i { display: block; height: 100%; background: var(--good, #1a7f37); }
.inv-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.inv-m { border: 1px solid var(--border); border-radius: 12px; padding: 8px; } .inv-m header { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .inv-m header span { color: var(--muted); font-size: 12px; flex: 1; }
.inv-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; border: 1px solid transparent; }
.inv-row + .inv-row { margin-top: 3px; } .inv-row.yes { background: rgba(26,127,55,.08); border-color: rgba(26,127,55,.25); } .inv-row.no { background: rgba(198,40,40,.08); border-color: rgba(198,40,40,.3); }
.inv-p { flex: 1; min-width: 0; display: flex; flex-direction: column; } .inv-p .muted { font-size: 11.5px; }
.inv-btns { display: flex; gap: 4px; } .inv-kg { width: 64px; } .mini-btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.is-avg { margin: 14px 0 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.is-avg-tabs { margin-bottom: 6px; }
.tl-paint .fx-card-t { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .inv-grid { grid-template-columns: 1fr; } .inv-btns .mini-btn { padding: 8px 12px; } .inv-kg { width: 72px; font-size: 16px; } }
.pnt-calc th.pc-task input { display: block; width: 100%; min-width: 124px; margin-top: 3px; }
.pnt-calc th.pc-task input[data-tpz], .pnt-calc th.pc-task input[data-tsz] { font-weight: 500; text-transform: none; text-align: left; }
.pj-tasks { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.pj-task { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border2); }
.bk.bk-flash { animation: bkFlash 0.65s ease-in-out 4; border-radius: 10px; }
@keyframes bkFlash { 50% { box-shadow: 0 0 0 4px #22a06b; background: rgba(34,160,107,.15); } }
/* доводка ведра */
.tn-box { margin-top: 10px; } .tn-box.on { border-color: var(--accent, #2563eb); }
.tn-de { font-size: 13px; margin: 4px 0 8px; } .tn-de span { font-weight: 700; } .tn-de span.now { color: var(--accent, #2563eb); }
.tn-adds { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .tn-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tn-add > span:nth-child(2) { flex: 1; min-width: 140px; } .tn-add .pnt-num { width: 72px; }
.tn-small { font-size: 11.5px; } .tn-log { margin: 6px 0; } .tn-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .tn-hist { margin-top: 8px; font-size: 12px; color: var(--muted); } .tn-hist b { display: block; color: var(--text); margin-bottom: 2px; }
/* подбор цвета */
.mt-in { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 8px 0 12px; } .mt-n input { width: 84px; } .mt-paste textarea { width: 220px; min-height: 34px; }
.mt-sw { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--border); }
.mt-pair { display: inline-flex; } .mt-pair i { width: 22px; height: 22px; display: block; } .mt-pair i:first-child { border-radius: 6px 0 0 6px; } .mt-pair i:last-child { border-radius: 0 6px 6px 0; }
.mt-mix { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--accent, #2563eb); border-radius: 12px; margin-bottom: 10px; background: var(--accent-soft, rgba(37,99,235,.06)); }
.mt-sws { display: flex; } .mt-sws span { width: 40px; height: 56px; display: block; } .mt-sws span:first-child { border-radius: 8px 0 0 8px; } .mt-sws span:last-child { border-radius: 0 8px 8px 0; }
.mt-parts { font-size: 12px; color: var(--muted); }
/* фото выкраса */
.vk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; border-radius: inherit; } .vk-board { position: relative; overflow: hidden; }
.vk-photo.sm { position: static; width: 56px; height: 56px; border-radius: 8px; margin-right: 4px; }
/* отчёт */
.rp-screen { margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.rp-scr .rp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rp-scr .rk { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; } .rp-scr .rk .k, .rp-scr .rk .d { font-size: 11.5px; color: var(--muted); } .rp-scr .rk .v { font-size: 20px; font-weight: 700; } .rp-scr .rk.bad .v { color: var(--bad); }
.rp-scr .rp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .rp-scr h3 { font-size: 14px; margin: 12px 0 6px; }
.rp-scr .rb { width: 100%; border-collapse: collapse; } .rp-scr .rb td { padding: 3px 4px; font-size: 12.5px; } .rp-scr .rb-l { width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .rp-scr .rb-b i { display: block; height: 12px; background: #4a7bd0; border-radius: 3px; } .rp-scr .rb-v { white-space: nowrap; text-align: right; width: 32%; }
.rp-scr .rt { width: 100%; border-collapse: collapse; font-size: 12.5px; } .rp-scr .rt td, .rp-scr .rt th { border: 1px solid var(--border); padding: 4px 6px; text-align: left; } .rp-scr .m { color: var(--muted); }
/* инвентаризация по QR */
.inv-row.bk-flash { animation: bkFlash 0.65s ease-in-out 4; }
.inv-qr { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: var(--accent); color: #fff; vertical-align: 1px; letter-spacing: .03em; }
.inv-scan .modal-header h2 { display: flex; align-items: center; gap: 8px; }
.inv-cam { position: relative; background: #000; aspect-ratio: 4 / 3; overflow: hidden; }
.inv-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-aim { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.85); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); pointer-events: none; }
.inv-cam-msg { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; text-align: center; font-size: 13px; text-shadow: 0 1px 3px #000; }
.inv-cam-msg:empty { display: none; }
.inv-scan-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; }
.inv-scan-bar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.inv-scan-log { max-height: 140px; overflow: auto; padding: 0 16px 10px; font-size: 13px; }
.inv-scan-log div { padding: 3px 0; border-bottom: 1px dashed var(--border2); }
.inv-row.out { background: rgba(214,140,0,.08); border-color: rgba(214,140,0,.28); }
.inv-out header span { font-size: 11.5px; }

/* Telegram: подписки */
.tg-opts { display: grid; gap: 6px; margin: 8px 0 12px; }
.tg-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* ===== Компактный вид: данные выше, без повторов ===== */

/* плашки — одной тонкой строкой */
.kp-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.kp-alerts:has(> #staleBanner:empty):has(> #notifBanner.hidden) { display: none; }
.kp-alerts > #staleBanner.stale-banner { flex: 1 1 520px; min-width: 0; margin: 0; padding: 5px 8px 5px 12px; gap: 8px; font-size: 12.5px; flex-wrap: nowrap; }
.kp-alerts .stale-banner .sb-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-alerts .stale-banner .mini-btn { height: 26px; padding: 0 10px; font-size: 12px; }
.kp-alerts .stale-banner .sb-thr select { height: 26px; font-size: 12px; }
.kp-alerts > #notifBanner { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; }
.kp-alerts > #notifBanner .notif { padding: 6px 10px; align-items: center; }

/* общие фильтры свёрнуты: кнопка + выбранные значения в строке быстрых фильтров */
#stickyBar.kp-flt { display: flex; flex-direction: column; }
#stickyBar.kp-flt .filter-extras { order: -1; border-top: 0; padding-top: 0; }
#stickyBar.kp-flt.kp-open .filter-extras { padding-bottom: 10px; border-bottom: 1px solid var(--border2); margin-bottom: 10px; }
#stickyBar.kp-flt:not(.kp-open) > .filters { display: none; }
#stickyBar.kp-flt:not(.in-hero) { padding: 8px 12px; }
.kp-flt-btn, .kp-sv-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; }
.kp-flt-btn .ico, .kp-sv-btn .ico { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.kp-flt-btn .ico:last-child, .kp-sv-btn .ico:last-child { transition: transform .15s; }
#stickyBar.kp-open .kp-flt-btn .ico:last-child, .kp-sv-btn[aria-expanded="true"] .ico:last-child { transform: rotate(180deg); }
.kp-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.kp-chips { display: contents; }
.kp-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--info-bg); color: var(--accent); font-size: 12px; }
.kp-chip b { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; }
.kp-chip button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.kp-sheet-h, .kp-done { display: none; }

/* заголовок раздела не повторяется в карточке (он в шапке), дата — в шапке */
.ov-hero > .pnt-hero-t, .ov-hero .ov-hero-meta { display: none; }
.ov-hero .ov-hero-filters { border-top: 0; padding-top: 0; margin-top: 0; }
.kp-date { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--muted2); }
.kp-date::first-letter { text-transform: uppercase; }

/* «Все образцы»: фильтры таблицы под кнопкой */
.kp-sv-btn { margin: 0 0 8px; }
.sv-filters.kp-sv:not(.kp-open) { display: none; }

/* нижнее меню — только на телефоне */
.kp-mob-nav, .kp-backdrop, .kp-mob-only { display: none; }

@media (max-width: 760px) {
  /* шапка: только главное, остальное в «⋯» */
  #actionsData .user-input, #actionsData .unit-toggle, #undoBtn, #actionsData .kp-export, .app-header .theme-btn, .app-header .full-add-btn { display: none !important; }
  .kp-mob-only { display: block; }
  .kp-mob-only button { width: 100%; }
  .last-update { display: none; }
  .kp-date { display: block; margin: 2px 0 0; font-size: 12px; }

  /* плашки: переносятся, без лишних кнопок */
  .kp-alerts > #staleBanner.stale-banner { flex-wrap: wrap; flex-basis: 100%; }
  .kp-alerts .stale-banner .sb-text { white-space: normal; }
  .kp-alerts .stale-banner .sb-thr, .kp-alerts .stale-banner .mini-btn:not(.primary) { display: none; }

  /* фильтры — панелью снизу */
  body.kp-sheet #stickyBar.kp-open > .filters { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2600; max-height: 78vh; overflow: auto; margin: 0;
    background: var(--panel); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  body.kp-sheet .kp-sheet-h { display: block; grid-column: 1 / -1; font-weight: 700; font-size: 16px; }
  body.kp-sheet .kp-done { display: block; grid-column: 1 / -1; height: 44px; }
  #stickyBar.kp-open .filter-extras { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
  .kp-backdrop { position: fixed; inset: 0; z-index: 2450; background: rgba(0, 0, 0, .35); }
  body.kp-sheet .kp-backdrop, body.kp-menu-open .kp-backdrop { display: block; }
  #stickyBar .filter-extras > * { min-width: 0; max-width: 100%; }
  .quick-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .quick-filters button { flex: none; }

  /* меню: снизу 4 раздела + «Ещё»; полный список — выдвижной панелью */
  body.has-data .kp-mob-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500;
    background: var(--panel); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .kp-mob-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 2px; border: 0; background: none;
    color: var(--muted2); font-size: 10.5px; line-height: 1.15; cursor: pointer; }
  .kp-mob-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kp-mob-nav .ico { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .kp-mob-nav button.active { color: var(--accent); font-weight: 600; }
  body.has-data .sidebar { display: none; }
  body.has-data.kp-menu-open .sidebar { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); height: auto; z-index: 2550;
    overflow-y: auto; border-right: 1px solid var(--border); border-bottom: 0; background: var(--panel); }
  body.kp-menu-open .sidebar .tabs { flex-direction: column; overflow: visible; padding: 8px; }
  body.kp-menu-open .sidebar .tabs button { width: 100%; padding: 10px 12px; font-size: 14px; }
  body.kp-menu-open .brand-text, body.kp-menu-open .nav-group, body.kp-menu-open .sidebar-foot { display: block; }
  body.has-data .app { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* уведомления — сверху, во всю ширину, короче */
  .toast-wrap { top: 8px; bottom: auto; left: 8px; right: 8px; align-items: stretch; }
  .toast { min-width: 0; max-width: none; padding: 8px 12px; font-size: 12.5px; }
}
@media print { .kp-mob-nav, .kp-backdrop, .kp-flt-btn, .kp-chips, .kp-sv-btn, .kp-date { display: none !important; } }
/* узкий экран: блоки не распирают страницу по ширине */
@media (max-width: 760px) {
  .ov-hero > *, .ov-hero-filters, #stickyBar.in-hero, #stickyBar .filter-extras { min-width: 0; max-width: 100%; }
  #dailyBox, #dailyBox * { min-width: 0; }
  #dailyBox .table-scroll { max-width: 100%; overflow-x: auto; }
}

/* доступность: на телефоне кнопки не меньше 44 px по высоте, мелкие подписи — не меньше 12 px */
@media (max-width: 760px) {
  .app-header .icon-btn, .app-header summary.icon-btn, .app-header .quick-btn, #acChip .ac-chip, .bell-wrap > button { min-width: 44px; min-height: 44px; }
  .menu-list button, .ac-menu button { min-height: 44px; }
  .mini-btn, .kp-flt-btn, .kp-sv-btn, .quick-filters button { min-height: 40px; }
  .kp-chip { height: 40px; } .kp-chip button { width: 32px; height: 32px; }
  .filters select, .filters input, .sv-filters select, .sv-filters input { min-height: 44px; font-size: 16px; }
  .ov-kpi .k.label, .ov-kpi .d, .ov-kpi .v small.u, .sec-sub, .menu-label, .ov-hero-meta, table.data-table { font-size: 12px; }
}
/* подписи «Сегодня» на цветном фоне — темнее, чтобы читались */
.tw-kpi .tw-sub, .tw-bar-label { color: var(--muted2); }
/* мелкие кнопки («?», «×») на телефоне: вид тот же, а нажимать можно в радиусе пальца */
@media (max-width: 760px) {
  .help-tip, .stale-banner .x, .notif .close { position: relative; }
  .help-tip::before, .stale-banner .x::before, .notif .close::before { content: ''; position: absolute; inset: -12px; }
  .stale-banner .x { min-width: 32px; min-height: 32px; }
}
/* мелкие кнопки («?», «×») на телефоне: вид тот же, а нажимать можно в радиусе пальца */
@media (max-width: 760px) {
  .help-tip, .stale-banner .x, .notif .close { position: relative; }
  .help-tip::before, .stale-banner .x::before, .notif .close::before { content: ''; position: absolute; inset: -12px; }
  .stale-banner .x { min-width: 32px; min-height: 32px; }
}
/* «Обновления»: список изменений по дням */
.cl-card { padding: 18px 20px; }
.cl-day { margin-top: 16px; } .cl-day h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; } .cl-day h4::first-letter { text-transform: uppercase; }
.cl-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 110ch; }
.cl-day li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.45; }
.cl-t { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; text-align: center; background: var(--panel2); color: var(--muted2); }
.cl-t.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); } .cl-t.info { color: var(--accent); background: var(--accent-soft); }
.cl-t.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .cl-t.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
#tabs button.cl-unseen span::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
@media (max-width: 640px) { .cl-day li { grid-template-columns: 1fr; gap: 2px; } .cl-t { justify-self: start; } }
/* карта контроля: выбор марки, список нарушений */
.spc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 12px 0; font-size: 12.5px; }
.spc-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted2); }
.spc-bar select { height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0 8px; }
.spc-list { padding: 0 12px 12px; } .spc-h { font-weight: 600; font-size: 13px; margin: 4px 0 6px; } .spc-h .muted { font-weight: 400; margin-left: 4px; }
table.data-table.spc-t td, table.data-table.spc-t th { padding-top: 5px; padding-bottom: 5px; }
/* брак и сырьё */
.raw-card { padding: 18px 20px; margin-bottom: 14px; } .raw-sum { margin: 8px 0; font-size: 13px; color: var(--muted2); }
.raw-h { margin: 12px 0 6px; font-size: 13px; } .raw-h .muted { font-weight: 400; margin-left: 4px; }
.raw-more { margin-top: 10px; } .raw-more > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
table.data-table.raw-t td, table.data-table.raw-t th { padding-top: 5px; padding-bottom: 5px; } .raw-t td:nth-child(2) { white-space: normal; }
/* работа лаборатории */
.lo-card { padding: 18px 20px; margin-bottom: 14px; }
.lo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; margin-top: 6px; }
.lo-grid h4 { margin: 12px 0 6px; font-size: 13px; } .lo-grid h4 small { font-weight: 400; color: var(--muted2); margin-left: 4px; }
.lo-days { display: flex; align-items: flex-end; gap: 2px; height: 64px; border-bottom: 1px solid var(--border); }
.lo-days i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-width: 3px; } .lo-days i.we { opacity: .55; } .lo-days i.z { background: var(--border); }
.lo-dl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted2); margin-top: 3px; }
.lo-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.lo-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lo-row b { text-align: right; font-variant-numeric: tabular-nums; }
.lo-bar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; } .lo-bar i { display: block; height: 100%; background: var(--accent); }
.lo-bar.warn i { background: var(--warn); }
table.data-table.lo-t td, table.data-table.lo-t th { padding-top: 4px; padding-bottom: 4px; }

/* Панель начальника цеха: линейка допуска — главный элемент; остальное тихо, зонами */
.sh-card { padding: 20px 22px 22px; }
.sh-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.sh-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.sh-range { color: var(--muted); margin-top: 2px; }
.sh-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-nav .period-toggle { flex-wrap: wrap; }

.sh-hero { --st: var(--text); display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px 36px; align-items: center; padding: 18px 20px; border: 1px solid var(--border); border-left: 4px solid var(--st); border-radius: var(--radius); background: var(--panel2); }
.sh-hero.s-good { --st: var(--good); } .sh-hero.s-warn { --st: var(--warn); } .sh-hero.s-bad { --st: var(--bad); }
.sh-h-k { color: var(--muted2); font-size: 13px; }
.sh-h-v { display: block; font-size: 44px; line-height: 1.05; font-weight: 600; color: var(--st); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 2px 0 4px; }
.sh-h-verdict { font-size: 15px; font-weight: 600; }
.sh-h-sub { color: var(--muted2); margin-top: 4px; }

.sh-ruler { position: relative; padding: 34px 0 0; }
.sh-r-track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--bad) 30%, var(--panel2)); }
.sh-r-track i { display: block; height: 100%; }
.sh-r-track .z-ok { background: color-mix(in srgb, var(--good) 30%, var(--panel2)); }
.sh-r-track .z-warn { background: color-mix(in srgb, var(--warn) 30%, var(--panel2)); }
.sh-r-track .z-bad { flex: 1; }
.sh-r-lim { position: absolute; top: 18px; bottom: 22px; border-left: 2px solid var(--text); }
.sh-r-lim b { position: absolute; top: -18px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 600; }
.sh-r-pin { position: absolute; top: 53px; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; background: var(--panel); border: 1.5px solid var(--muted); color: var(--text); }
.sh-r-pin.s-good { border-color: var(--good); } .sh-r-pin.s-warn { border-color: var(--warn); } .sh-r-pin.s-bad { border-color: var(--bad); color: var(--bad); }
.sh-r-pin::before { content: ''; position: absolute; left: 50%; top: -9px; height: 8px; border-left: 1.5px solid currentColor; opacity: .5; }
.sh-r-now, .sh-r-prev { position: absolute; top: 28px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: var(--st, var(--text)); }
.sh-r-now { top: 24px; height: 24px; width: 6px; margin-left: -3px; background: var(--text); box-shadow: 0 0 0 2px var(--panel2); }
.sh-r-prev { background: transparent; border: 1.5px dashed var(--muted); width: 6px; margin-left: -3px; }
.sh-r-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; color: var(--muted); font-size: 12px; }
.sh-r-legend i { display: inline-block; vertical-align: -2px; margin-right: 5px; width: 4px; height: 12px; border-radius: 2px; background: var(--text); }
.sh-r-legend .lg-prev { width: 6px; background: none; border: 1.5px dashed var(--muted); }
.sh-r-legend .lg-pin { width: 12px; border-radius: 6px; background: var(--panel); border: 1.5px solid var(--muted); }

.sh-ros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 14px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sh-ro { position: relative; padding: 12px 14px 12px 16px; border-left: 1px solid var(--border2); }
.sh-ro:first-child { border-left: 0; }
.sh-ro::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: transparent; }
.sh-ro.s-good::before { background: var(--good); } .sh-ro.s-warn::before { background: var(--warn); } .sh-ro.s-bad::before { background: var(--bad); }
.sh-ro b { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sh-ro b small { font-size: 14px; color: var(--muted); font-weight: 500; }
.sh-ro.s-bad b { color: var(--bad); }
.sh-ro > span { display: block; color: var(--muted2); font-size: 12.5px; }
.sh-ro > small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sh-ro[role="button"] { cursor: pointer; }
.sh-ro[role="button"]:hover { background: var(--row-hover); }
.sh-ro[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sh-zone { margin-top: 26px; }
.sh-zone-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.sh-zone-h h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sh-zone-h span { color: var(--muted); }
.sh-sub-h { font-weight: 600; margin: 14px 0 6px; }
.sh-sub-h small { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 12px; }
.sh-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 24px; }
.sh-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-chart { min-height: 260px; }

.sh-heat { border-collapse: separate; border-spacing: 4px; margin: 0 -4px; }
.sh-heat th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; padding: 2px 8px; }
.sh-heat th.num { text-align: center; }
.sh-heat td { padding: 0 8px; height: 32px; white-space: nowrap; }
.sh-heat td:first-child { color: var(--muted2); font-variant-numeric: tabular-nums; }
.sh-heat tr.is-today td:first-child { color: var(--text); font-weight: 600; }
.sh-heat .sh-c { min-width: 92px; text-align: center; border-radius: 6px; font-variant-numeric: tabular-nums; font-weight: 600; background: var(--panel2); }
.sh-heat .sh-c.s-good { background: var(--good-bg); color: var(--good); }
.sh-heat .sh-c.s-warn { background: var(--warn-bg); color: var(--warn); }
.sh-heat .sh-c.s-bad { background: var(--bad); color: #fff; }
.sh-heat td.muted { text-align: center; }
.sh-c[role="button"] { cursor: pointer; transition: box-shadow .12s; }
.sh-c[role="button"]:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent); }
.sh-c[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sh-pill { display: inline-block; min-width: 62px; padding: 2px 8px; border-radius: 10px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.sh-pill.s-good { background: var(--good-bg); color: var(--good); } .sh-pill.s-warn { background: var(--warn-bg); color: var(--warn); } .sh-pill.s-bad { background: var(--bad-bg); color: var(--bad); }
.sh-rank td, .sh-rank th, .sh-lt td { white-space: nowrap; }

.sh-par { margin-bottom: 10px; }
.sh-par-h { color: var(--muted2); font-size: 12.5px; margin: 2px 0 4px; }
.sh-par-row { display: grid; grid-template-columns: minmax(70px, 110px) 1fr 48px; gap: 0 8px; align-items: center; margin: 6px 0; }
.sh-par-row small { grid-column: 1 / -1; font-size: 12px; }
.sh-par-row b { text-align: right; font-variant-numeric: tabular-nums; }
.sh-par-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-par .lo-bar i { background: var(--warn); }
.sh-par-row:first-of-type .lo-bar i { background: var(--bad); }

.sh-link { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-lk { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel2); border: 1px solid var(--border2); }
.sh-lk b { display: block; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-lk.s-bad b { color: var(--bad); } .sh-lk.s-good b { color: var(--good); }
.sh-lk > span { display: block; color: var(--muted2); font-size: 12.5px; }
.sh-lk > small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sh-note { margin: 8px 0 0; max-width: 64ch; }

.sh-list { list-style: none; margin: 0; padding: 0; }
.sh-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0 7px 12px; border-bottom: 1px solid var(--border2); position: relative; }
.sh-list li::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--border); }
.sh-list li.s-bad::before { background: var(--bad); } .sh-list li.s-warn::before { background: var(--warn); }
.sh-list li.row-link { cursor: pointer; } .sh-list li.row-link:hover { background: var(--row-hover); }
.sh-more { display: inline-block; margin-top: 8px; }
.sh-act { flex: none; height: 26px; padding: 0 9px; font-size: 12px; }
.sh-act:hover { color: var(--accent); border-color: var(--accent); }

.sh-price { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--muted2); }
.sh-price input { width: 110px; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); }
.sh-grid > *, .sh-cols > *, .sh-hero > * { min-width: 0; }

.sh-modal { max-width: 760px; width: calc(100vw - 32px); }
.sh-modal .modal-body { max-height: 70vh; overflow: auto; }
.sh-mod-sum { margin-bottom: 8px; }
.sh-mod-h { margin: 12px 0 4px; }

@media (max-width: 1100px) { .sh-ros { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sh-ro:nth-child(3n+1) { border-left: 0; } .sh-ro:nth-child(n+4) { border-top: 1px solid var(--border2); } .sh-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sh-hero { grid-template-columns: 1fr; } .sh-cols, .sh-cols-2, .sh-link { grid-template-columns: 1fr; } .sh-ros { grid-template-columns: 1fr 1fr; } .sh-ro { border-left: 0 !important; } .sh-ro:nth-child(odd) { border-right: 1px solid var(--border2); } .sh-ro:nth-child(n+3) { border-top: 1px solid var(--border2); } .sh-h-v { font-size: 38px; } .sh-card { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .sh-c[role="button"] { transition: none; } }
body[data-tab="shop"] #stickyBar { display: none; } /* общие фильтры на панель цеха не действуют */
/* ===================================================================
   ВИД САЙТА (слой поверх остальных стилей)
   • надписи без ЗАГЛАВНЫХ: группы меню, заголовки таблиц, подписи разделов — обычным регистром;
   • цифры одной ширины (столбцы чисел ровные);
   • карточки плоские: рамка без тени, заголовки чуть крупнее;
   • фирменная деталь — профиль гофры (бумага · волна · бумага) вместо радужной полосы в шапке «Обзора».
   =================================================================== */
:root { --kraft: #a8773f; --flute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 .75H20M0 9.25H20' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M0 8.6C5 8.6 5 1.4 10 1.4S15 8.6 20 8.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
[data-theme="dark"] { --kraft: #c9a071; }

/* --- регистр и разрядка --- */
.nav-group, .menu-list .menu-label, table.data-table th, .section-label, .modal-section-title, .form-section-title, .density-table th, .reg-table th,
.supplier-changes th, .anomaly-panel .anomaly-table th, .bell-group, .gs-group, .j-day, .rep-eyebrow, .rep-h, .ga-h, .dict-block-h, .pl-sub h4,
.gd-ng, .gd-grp, .gd-block h4, .gd-dev h4, .cl-sec th, .fx-menu-l, .fx-sec, .fx-lg, .fx-3steps-h, .tour-step, .sh-text > div > span {
  text-transform: none !important; letter-spacing: normal !important;
}
.nav-group { font-size: 12px; font-weight: 600; color: var(--muted); padding: 16px 10px 4px; }
table.data-table th { font-size: 12px; font-weight: 600; color: var(--muted2); }
.section-label { font-size: 12.5px !important; }

/* --- числа --- */
.num, td.num, .data-table td, .kpi .value, .dly-kpi b, .rep-kpi .v, .pnt-kpi .v { font-variant-numeric: tabular-nums; }

/* --- карточки --- */
.chart-card { box-shadow: none; }
.chart-card h3, .card-title { font-size: 15px !important; font-weight: 600; letter-spacing: -0.01em; }

/* --- боковое меню: активный пункт — метка слева, без заливки --- */
.tabs button.active { background: var(--panel2); }
.tabs button .ico { opacity: .85; }
.tabs button.active .ico { opacity: 1; }

/* --- шапка «Обзора»: профиль гофры вместо радуги --- */
.ov-hero::before { height: 10px !important; background: var(--kraft) !important; -webkit-mask: var(--flute) repeat-x left center / 20px 10px; mask: var(--flute) repeat-x left center / 20px 10px; opacity: .75; }
.ov-hero-logo { background: var(--text); color: var(--panel); }

@media (prefers-reduced-motion: reduce) { .tab-panel.active { animation: none; } }

/* --- редактор левого меню --- */
.nav-edit-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--muted2); cursor: pointer; }
.nav-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav-edit-btn[hidden] { display: none; }
.nav-ed-bar { margin: 4px 10px 6px; padding: 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 8px; }
.nav-ed-t { font-size: 12px; color: var(--text); line-height: 1.4; }
.nav-ed-a { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-ed-a .mini-btn { flex: 1; justify-content: center; }
#tabs.nav-edit button[data-tab], #tabs.nav-edit .nav-group { cursor: grab; border-radius: 8px; }
#tabs.nav-edit button[data-tab] { border: 1px dashed transparent; }
#tabs.nav-edit button[data-tab]:hover { border-color: var(--border); background: var(--panel2); }
#tabs.nav-edit button.active::before { display: none; }
#tabs.nav-edit .nav-group { display: flex !important; align-items: center; justify-content: space-between; margin-top: 6px; padding: 8px 10px 6px; background: var(--panel2); color: var(--text); }
#tabs .nav-gx { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); font-size: 16px; cursor: pointer; }
#tabs .nav-gx:hover { color: var(--bad); background: var(--bad-bg); }
#tabs .nav-eye { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
#tabs .nav-eye:hover { color: var(--accent); background: var(--accent-soft); }
#tabs.nav-edit button.nav-off { opacity: .45; }
#tabs.nav-edit button.nav-off span:not(.nav-eye) { text-decoration: line-through; }
#tabs .nav-dragging { opacity: .4; }
#tabs .nav-drop-before { box-shadow: inset 0 2px 0 var(--accent); }
#tabs .nav-drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.nav-editing .nav-tools { display: none; }

/* --- «Здоровье сайта»: группы карточками в две колонки, пояснение под названием, кнопка у проблемы --- */
.acp-health .acp-rd { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 12px; align-items: start; background: none; border: 0; padding: 0; }
.acp-health .acp-g { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 2px 14px 6px; }
.acp-health .acp-g + .acp-g { border-top: 1px solid var(--border); }
.acp-health .acp-g h4 { margin: 12px 0 4px; font-size: 13.5px; color: var(--text); }
.acp-health .acp-row { grid-template-columns: 18px minmax(0, 1fr) minmax(70px, 120px) minmax(64px, auto) auto; grid-template-areas: 'i nd s v a'; gap: 4px 12px; padding: 9px 2px; }
.acp-health .acp-ic { grid-area: i; align-self: start; margin-top: 2px; } .acp-nd { grid-area: nd; min-width: 0; } .acp-health .acp-s { grid-area: s; } .acp-health .acp-v { grid-area: v; } .acp-health .acp-a { grid-area: a; }
.acp-health .acp-row.l-none .acp-ic { background: none; box-shadow: inset 0 0 0 1.5px var(--border); }
.acp-nd .acp-n { display: block; color: var(--text); font-weight: 500; }
.acp-nd .acp-d { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; }
.acp-health .acp-s:empty { display: block; }
.acp-pl li { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
.acp-pl li > div { display: grid; gap: 1px; min-width: 0; }
.acp-pl li .mini-btn { flex: none; }
.acp-upd::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--good); vertical-align: 1px; }
@media (max-width: 600px) {
  .acp-health .acp-row { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: 'i nd v' '. s s' '. a a'; }
  .acp-health .acp-s:empty { display: none; }
  .acp-pl li { flex-direction: column; align-items: flex-start !important; }
}
.acp-health .acp-pl { max-width: none; margin-right: 0; }
.acp-pl li > div { flex: 1; }

/* --- доска (канбан) для действий и проблем --- */
.kb-view { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 6px 8px 8px 0; vertical-align: middle; }
.kb-view button { border: 0; background: var(--panel); color: var(--muted2); font: inherit; font-size: 12.5px; padding: 5px 14px; cursor: pointer; min-height: 30px; }
.kb-view button + button { border-left: 1px solid var(--border); }
.kb-view button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.kb-col { background: var(--panel2); border: 1px solid var(--border2); border-radius: 12px; padding: 8px; min-height: 160px; transition: box-shadow .12s; }
.kb-col.over { box-shadow: inset 0 0 0 2px var(--accent); }
.kb-col header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; }
.kb-col header span { min-width: 22px; text-align: center; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 12px; color: var(--muted2); }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card:hover { border-color: var(--accent); }
.kb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kb-card.late { border-left: 3px solid var(--bad); }
.kb-card.drag { opacity: .45; }
.kb-t { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.kb-m { color: var(--muted2); font-size: 12px; margin-top: 4px; }
.kb-sel { margin-top: 8px; width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel2); color: var(--text); font: inherit; font-size: 12.5px; }
.kb-empty { color: var(--muted); text-align: center; padding: 18px 0; font-size: 12.5px; }
@media (max-width: 760px) { .kb { grid-template-columns: 1fr; } .kb-sel { height: 40px; } }

/* --- календарь --- */
.cal-card { padding: 18px 20px !important; }
.cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-title { min-width: 150px; text-align: center; text-transform: capitalize; font-size: 15px; }
.cal-late { margin: 6px 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-h { font-size: 12px; color: var(--muted); padding: 0 6px 2px; }
.cal-c { position: relative; min-height: 92px; padding: 6px; border: 1px solid var(--border2); border-radius: 8px; background: var(--panel); text-align: left; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-c.out { background: transparent; border-color: transparent; cursor: default; }
.cal-c.we { background: var(--panel2); }
.cal-c:hover { border-color: var(--accent); }
.cal-c.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-n { font-weight: 600; font-size: 13px; }
.cal-c.today .cal-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; }
.cal-tn { position: absolute; top: 6px; right: 6px; font-size: 11px; color: var(--muted2); background: var(--panel2); border-radius: 8px; padding: 0 5px; }
.cal-ev { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-ev i { font-style: normal; font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--info-bg); color: var(--accent); }
.cal-ev i.c-bad { background: var(--bad-bg); color: var(--bad); } .cal-ev i.c-warn { background: var(--warn-bg); color: var(--warn); } .cal-ev i.c-muted { background: var(--panel2); color: var(--muted); } .cal-ev i.more { background: none; color: var(--muted); }
.cal-day { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--panel); position: sticky; top: 12px; }
.cal-day h4 { margin: 0 0 8px; font-size: 14px; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-list li { padding-left: 10px; border-left: 3px solid var(--accent); }
.cal-list li.c-bad { border-left-color: var(--bad); } .cal-list li.c-warn { border-left-color: var(--warn); } .cal-list li.c-muted { border-left-color: var(--border); }
.cal-k { display: block; font-size: 11.5px; color: var(--muted); }
.cal-line { margin-bottom: 8px; }
.cal-lg { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted2); }
.cal-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; background: var(--info-bg); border: 1px solid var(--accent); }
.cal-lg i.c-bad { background: var(--bad-bg); border-color: var(--bad); } .cal-lg i.c-warn { background: var(--warn-bg); border-color: var(--warn); }
@media (max-width: 1000px) { .cal-wrap { grid-template-columns: 1fr; } .cal-day { position: static; } }
@media (max-width: 600px) { .cal-c { min-height: 48px; padding: 4px; } .cal-ev { flex-direction: row; gap: 2px; } .cal-ev i { width: 7px; height: 7px; padding: 0; font-size: 0; border-radius: 50%; } .cal-ev i.more { display: none; } .cal-tn { display: none; } }
body[data-tab="calendar"] #stickyBar { display: none; } /* общие фильтры на календарь не действуют */
@media (max-width: 600px) { .cal-ev i { background: var(--accent); } .cal-ev i.c-bad { background: var(--bad); } .cal-ev i.c-warn { background: var(--warn); } .cal-ev i.c-muted { background: var(--muted); } }

/* --- карточка заказа и марки --- */
.oc-card { padding: 18px 20px !important; }
.oc-search { display: flex; gap: 6px; }
.oc-search input, .oc-acts select { height: 32px; min-width: 220px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }
.oc-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.oc-li { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.oc-li:hover { border-color: var(--accent); } .oc-li span { color: var(--muted2); } .oc-li small { color: var(--muted); font-size: 12px; }
.oc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.oc-pz { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.oc-cl { color: var(--muted2); margin-top: 2px; }
.oc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.oc-s { position: relative; padding: 10px 12px 10px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.oc-s::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; }
.oc-s.good::before { background: var(--good); } .oc-s.warn::before { background: var(--warn); } .oc-s.bad::before { background: var(--bad); }
.oc-s span { display: block; font-size: 12.5px; color: var(--muted2); } .oc-s b { display: block; font-size: 19px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; } .oc-s small { display: block; font-size: 12px; color: var(--muted); }
.oc-s.bad b { color: var(--bad); } .oc-s.good b { color: var(--good); }
.oc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px 20px; }
.oc-grid > * { min-width: 0; }
.oc-sec h4 { margin: 10px 0 6px; font-size: 14px; } .oc-wide { grid-column: 1 / -1; }
.oc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; } .oc-dl dt { color: var(--muted2); } .oc-dl dd { margin: 0; }
.oc-note { font-size: 12px; margin-top: 6px; }
.oc-t td, .oc-t th, .mc-t td, .mc-t th { white-space: nowrap; }
.oc-sec .sh-list li small { color: var(--muted2); }
@media (max-width: 600px) { .oc-search { width: 100%; } .oc-search input, .oc-acts select { min-width: 0; flex: 1; } }

/* --- карта цеха --- */
.fl-card { padding: 18px 20px !important; }
.fl-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fl-m { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 12px 18px; background: var(--panel); cursor: pointer; }
.fl-m::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 12px 0 0 12px; background: var(--good); }
.fl-m.fl-warn::before { background: var(--warn); } .fl-m.fl-bad::before { background: var(--bad); }
.fl-m.fl-bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.fl-m:hover { box-shadow: var(--shadow-md); } .fl-m:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-m header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.fl-m h4 { margin: 0; font-size: 16px; }
.fl-st { font-size: 12px; color: var(--good); font-weight: 600; } .fl-warn .fl-st { color: var(--warn); } .fl-bad .fl-st { color: var(--bad); }
.fl-shifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; margin-bottom: 8px; }
.fl-sh { border-radius: 8px; padding: 6px 8px; background: var(--panel2); } .fl-sh span, .fl-sh small { display: block; font-size: 11.5px; color: var(--muted2); } .fl-sh b { font-size: 18px; font-variant-numeric: tabular-nums; }
.fl-sh.s-good { background: var(--good-bg); } .fl-sh.s-good b { color: var(--good); } .fl-sh.s-warn { background: var(--warn-bg); } .fl-sh.s-warn b { color: var(--warn); } .fl-sh.s-bad { background: var(--bad); } .fl-sh.s-bad b, .fl-sh.s-bad span, .fl-sh.s-bad small { color: #fff; }
.fl-none { color: var(--muted); font-size: 12.5px; }
.fl-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--border2); } .fl-row span { color: var(--muted2); } .fl-row b { font-variant-numeric: tabular-nums; }
.fl-pant { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; } .fl-pant i { font-style: normal; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--border2); } .fl-pant i.old { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.fl-p { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 12px; }
.fl-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--muted2); }
.fl-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; background: var(--good); } .fl-lg i.fl-warn { background: var(--warn); } .fl-lg i.fl-bad { background: var(--bad); }
/* режим телевизора: без меню и шапки, крупно */
body.fl-tv .sidebar, body.fl-tv .app-header, body.fl-tv #stickyBar, body.fl-tv .bottom-nav, body.fl-tv .toast-wrap, body.fl-tv [class*="banner"] { display: none !important; }
body.fl-tv .app { margin-left: 0; max-width: none; padding: 16px 20px; }
body.fl-tv .fl-card { font-size: 16px; } body.fl-tv .fl-m h4 { font-size: 22px; } body.fl-tv .fl-sh b { font-size: 26px; } body.fl-tv .fl-map { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
body[data-tab="floor"] #stickyBar, body[data-tab="order"] #stickyBar, body[data-tab="markcard"] #stickyBar { display: none; }
body.fl-tv .app > :not(#dashboard), body.fl-tv #dashboard > :not(.tab-panel) { display: none !important; }

/* --- карта цеха: схема, лента, телевизор --- */
.fl-map { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-auto-flow: dense; }
.fl-m.fl-s2x1 { grid-column: span 2; } .fl-m.fl-s1x2 { grid-row: span 2; } .fl-m.fl-s2x2 { grid-column: span 2; grid-row: span 2; }
.fl-m.fl-hid { opacity: .45; }
.fl-editing .fl-m { cursor: grab; border-style: dashed; }
.fl-editing .fl-m.fl-drag { opacity: .4; }
.fl-m.fl-over-b { box-shadow: -4px 0 0 var(--accent); } .fl-m.fl-over-a { box-shadow: 4px 0 0 var(--accent); }
.fl-ed { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 8px; } .fl-ed select { height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; }
.fl-edhint { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--text); font-size: 12.5px; }
.fl-sprow { align-items: center; } .fl-spark { width: 140px; height: 30px; flex: none; } .fl-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; } .fl-spark .lim { stroke: var(--bad); stroke-dasharray: 3 3; stroke-width: 1; }
.fl-tests { list-style: none; margin: 2px 0 6px; padding: 0; } .fl-tests li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; } .fl-tests li:hover { background: var(--row-hover); } .fl-tests li.s-bad b { color: var(--bad); }
.fl-next { font-size: 12px; color: var(--muted2); margin: -2px 0 4px; }
.fl-act { margin-top: 8px; }
.fl-feed { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; } .fl-feed h4 { margin: 0 0 6px; font-size: 14px; }
.fl-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .fl-feed li { display: grid; grid-template-columns: 96px 100px minmax(0, 1fr); gap: 8px; padding: 5px 4px; border-bottom: 1px dashed var(--border2); }
.fl-feed time { color: var(--muted); font-variant-numeric: tabular-nums; } .fl-fk { color: var(--muted2); } .fl-feed li.s-bad .fl-fk { color: var(--bad); font-weight: 600; } .fl-feed li.s-warn .fl-fk { color: var(--warn); font-weight: 600; }
.fl-clock b { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 12px; } .fl-clock span { color: var(--muted2); font-size: 16px; }
.fl-nolink { margin: 0 0 10px; padding: 10px 14px; border-radius: 8px; background: var(--bad); color: #fff; font-weight: 600; }
body.fl-tv .fl-feed li { font-size: 15px; } body.fl-tv .fl-act { display: none; }
@media (max-width: 760px) { .fl-m.fl-s2x1, .fl-m.fl-s2x2 { grid-column: auto; } .fl-m.fl-s1x2, .fl-m.fl-s2x2 { grid-row: auto; } .fl-feed li { grid-template-columns: 52px minmax(0, 1fr); } .fl-fk { display: none; } }
.fl-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px; }
.fl-sum-i { position: relative; padding: 8px 12px 8px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.fl-sum-i::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--border); }
.fl-sum-i.s-good::before { background: var(--good); } .fl-sum-i.s-warn::before { background: var(--warn); } .fl-sum-i.s-bad::before { background: var(--bad); }
.fl-sum-i span { display: block; font-size: 12px; color: var(--muted2); } .fl-sum-i b { font-size: 18px; font-variant-numeric: tabular-nums; } .fl-sum-i.s-bad b { color: var(--bad); }
.fl-per { flex-wrap: wrap; }
body.fl-tv .fl-sum-i b { font-size: 24px; }
@media (max-width: 600px) { .oc-s b { font-size: 16px; } .oc-pz { font-size: 19px; } }
/* красочная: свой расход для заказа */
.pc-own { margin-top: -4px; }
.pc-own label { min-width: 120px; }
.pc-own-note { font-size: 12px; color: var(--muted2); align-self: center; }
/* красочная: план/факт, фактический расход, нехватка */
.ppf-hint { display: block; font-size: 11px; color: var(--muted2); margin-top: 3px; white-space: nowrap; }
.ppf-hint.on { color: var(--accent, #2563eb); }
.ppf-hint em { font-style: normal; font-weight: 600; }
.ppf-short { margin: 10px 0 6px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--panel); }
.ppf-short summary { cursor: pointer; font-size: 13px; }
.ppf-short table { margin-top: 8px; }
.ppf-box { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--panel); }
.ppf-box > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ppf-head { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.ppf-per { display: inline-flex; gap: 4px; }
.ppf-per button { border: 1px solid var(--border); background: transparent; border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; color: var(--text); }
.ppf-per button.on { background: var(--accent, #2563eb); border-color: transparent; color: #fff; }
.ppf-kpis { margin-bottom: 10px; }
.ppf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.ppf-grid > div { min-width: 0; }
.pj-short { font-style: normal; font-size: 11px; font-weight: 600; color: var(--bad, #c0392b); margin-left: 4px; }

/* красочная: замес, бочки в кг, вязкость, резерв, очередь, ванна, отходы, версии рецепта */
.drk-kg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted2); margin-top: 6px; }
.drk-kg label { display: inline-flex; align-items: center; gap: 4px; }
.drk-kg input { width: 64px; }
.vs-table td.vs-out { color: var(--bad); font-weight: 700; background: var(--bad-bg); }
.vs-table td.vs-in { color: var(--ok, #16a34a); }
.vs-m { color: var(--muted2); font-weight: 400; }
.vs-norm { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); }
.vs-norm summary { cursor: pointer; }
.vs-norm-g { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 4px; }
.vs-norm-g label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.vs-norm-g input { width: 52px; }
.bk-res { position: absolute; right: -8px; bottom: -4px; z-index: 2; font-size: 9px; font-weight: 700; padding: 1px 3px; border-radius: 4px; background: #7c3aed; color: #fff; line-height: 1.2; }
.bk.res .bk-can { outline: 2px dashed #7c3aed; outline-offset: 2px; }
.pj-res-on { border-color: #7c3aed !important; color: #7c3aed; }
.pq-mode { margin-right: 6px; }
.pq-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pq-col { border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); padding: 8px; min-width: 0; }
.pq-col > header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 2px 4px 8px; font-size: 13px; }
.pq-col > header span { font-size: 12px; color: var(--muted2); }
.pq-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-top: 1px solid var(--border); font-size: 13px; }
.pq-row.dim { opacity: .35; }
.pq-pos { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.pq-main { flex: 1; min-width: 0; }
.pq-when { font-size: 11px; padding: 0 5px; border-radius: 4px; background: var(--panel); color: var(--muted2); }
.pq-when.late { background: var(--bad-bg); color: var(--bad); }
.pq-when.today { background: var(--warn-bg, #fef3c7); color: var(--warn, #b45309); }
.pq-when.tom { color: var(--accent, #2563eb); }
.pq-st { font-size: 11px; color: var(--muted2); }
.pq-pants { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 12px; }
.pq-pants span { display: inline-flex; align-items: center; gap: 3px; }
.pq-pants span.done { opacity: .45; text-decoration: line-through; }
.pq-btns { flex: none; display: flex; gap: 2px; }
.pbf-bath { font-size: 12px; color: var(--muted2); margin: 4px 0 8px; }
.pbf-bath b { color: var(--text); }
.pw-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 10px; }
.pw-top label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted2); }
.pw-kpi { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pw-kpi > div { padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); min-width: 130px; display: flex; flex-direction: column; }
.pw-kpi span, .pw-kpi small { font-size: 11px; color: var(--muted2); }
.pw-kpi b { font-size: 18px; }
.pw-by { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 10px; font-size: 12px; }
.pw-by > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rh-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0; }
.rh-bar label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted2); }
.rh-bar input { width: 52px; }
.rh-modal { max-width: 640px; width: calc(100vw - 24px); }
.rh-modal .modal-body { max-height: 70vh; overflow: auto; }
.rh-ver { border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-bottom: 10px; }
.rh-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-bottom: 6px; font-size: 13px; }
.rh-t tr.ch td { background: var(--warn-bg, #fef3c7); font-weight: 600; }
/* красочная: остатки в дело, ходовые цвета */
.lo-box, .tp-box { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); }
.tp-box { margin-top: 14px; }
.lo-box summary, .tp-box summary { cursor: pointer; }
.lo-box .sec-sub, .tp-box .filter-pills { margin: 6px 0; }
.lo-act { white-space: nowrap; display: flex; gap: 4px; }
.tp-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--border); vertical-align: middle; overflow: hidden; }
.tp-bar i { display: block; height: 100%; background: var(--accent, #2563eb); }
.tp-t tr.tp-low td { background: var(--warn-bg, #fef3c7); }
.pnt-stack > div > .sec-head > div { flex-wrap: wrap; justify-content: flex-end; }
/* красочная: меню ведра для телефона */
.bs-modal { max-width: 520px; width: calc(100vw - 20px); }
.bs-modal h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.bs-info { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted2); margin-bottom: 12px; }
.bs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bs-btn { min-height: 50px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.bs-btn:hover { border-color: var(--accent, #2563eb); }
.bs-btn.primary { grid-column: 1 / -1; background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; font-size: 17px; }
.bs-btn.danger { color: var(--bad); }

/* ---------- Красочная: визуальная полировка ---------- */
.drum-card { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--c, transparent) 9%, transparent), transparent 70px), var(--panel2); transition: border-color .15s, box-shadow .15s, transform .15s; }
.drum-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--border)); opacity: .9; }
.drum-card:hover { border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--border)); box-shadow: var(--shadow); }
.drum-card.bad { background: linear-gradient(0deg, var(--bad-bg), var(--bad-bg)), var(--panel); }
.drum-card.warn { background: linear-gradient(0deg, var(--warn-bg), var(--warn-bg)), var(--panel2); }
.drum-card .drum { box-shadow: 0 3px 8px rgba(0,0,0,.14); }
.drum-info { gap: 5px; }
.drum-name { font-size: 14px; }
.drum-levels button { min-height: 24px; transition: background .12s, color .12s; }
.drum-levels button:not(.on):hover { background: var(--panel2); color: var(--text); }
.drum-st { white-space: nowrap; }
.drum-foot .pnt-text { flex: 1; min-width: 0; }
.drum-batch { margin-top: 2px; }
.pnt-tabs { position: relative; }
.pnt-tabs button { transition: background .12s, color .12s; }
.pnt-tabs button:focus-visible, .drum-levels button:focus-visible, .pnt-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pnt-kpi .v { font-variant-numeric: tabular-nums; }
/* график выдачи: при одном-двух днях столбики не растягиваются на всю ширину */
.is-bars { justify-content: center; } .is-bar { max-width: 56px; }
.is-bars { background-image: linear-gradient(to top, var(--border2) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 -16px; }
@media (max-width: 760px) {
  .pnt-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .pnt-tabs::-webkit-scrollbar { display: none; }
  .pnt-tabs button { flex: none; height: 40px; }
  .pnt-kpis { gap: 8px; } .pnt-kpi { padding: 10px 12px; } .pnt-kpi-ic { display: none; } .pnt-kpi .v { font-size: 20px; }
  .drum-card { gap: 10px; padding: 12px 10px; } .drum { width: 48px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .pnt-tabs { scroll-behavior: auto; } .drum-card, .pnt-kpi { transition: none; } }

/* ---------- Командный режим ---------- */
.subline { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.subline .last-update { margin: 0; }
.team-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted2); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px 2px 8px; letter-spacing: 0; align-self: center; }
.team-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.team-status.ok .dot { background: var(--good); }
.team-status.ro .dot { background: var(--muted); }
.team-status.err .dot { background: var(--bad); }
/* на сайте печать работает — кнопки печати не скрываем */
#backupNag { display: none !important; }
/* ---------- Сайт на сервере ---------- */
.srv-wait .app, .srv-wait #dropZone, .srv-wait .sticky-bar { visibility: hidden; }
.team-status.ro .dot { background: var(--muted2); }
/* меню ведра кнопками */
.bm-dlg .modal-header h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.bm-info > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--border, #dde3ea); border-radius: 10px; min-width: 0; }
.bm-info span { font-size: 12px; } .bm-info b { font-size: 15px; overflow-wrap: anywhere; } .bm-info small { color: var(--muted, #6b7785); font-size: 12px; }
.bm-warn { font-weight: 700; color: #b45309; margin: 2px 0 6px; }
.bm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.bm-btn { min-height: 52px; font-size: 16px; font-weight: 600; border-radius: 12px; border: 1px solid var(--border, #cfd7e0); background: var(--card, #fff); color: inherit; cursor: pointer; padding: 8px; }
.bm-btn.primary { grid-column: 1 / -1; background: var(--accent, #2563eb); border-color: transparent; color: #fff; min-height: 58px; font-size: 18px; }
.bm-btn.danger { color: #b91c1c; border-color: #f0b4b4; }
.bm-btn:active { transform: scale(0.98); }
@media (max-width: 760px) { .bm-dlg { padding: 8px; align-items: flex-end; } .bm-dlg .modal { max-height: 94vh; overflow: auto; } }

/* ---------- задания: закрепление, перетаскивание, фильтры, «Ещё» ---------- */
.pj-card[hidden] { display: none !important; }
.pj-card { cursor: default; }
.pj-h { align-items: center; }
.pj-grip { display: inline-grid; place-items: center; width: 22px; height: 26px; margin-left: -4px; border-radius: 5px; color: var(--muted); cursor: grab; touch-action: none; flex: none; }
.pj-grip .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pj-grip:hover { background: var(--panel2); color: var(--text); }
.pj-pin { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.pj-pin .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pj-pin:hover { background: var(--panel2); color: var(--text); }
.pj-pin.on { color: var(--accent); } .pj-pin.on .ico { fill: currentColor; }
.pj-card.pinned { box-shadow: inset 0 3px 0 var(--accent), var(--shadow); }
.pj-card.late { background: linear-gradient(0deg, var(--bad-bg), var(--bad-bg)), var(--panel); border-left-color: var(--bad); }
.pj-card.drag { opacity: .35; }
.pj-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; box-shadow: var(--shadow-lg); opacity: .95; }
body.pj-dragging { user-select: none; cursor: grabbing; }
.pj-hkg { margin-left: auto; font-size: 12px; color: var(--muted2); font-weight: 600; }
.pj-hkg + .pj-cnt { margin-left: 6px; }
.pj-filt { margin: 0 0 10px; }
.pj-filt .pj-urg.active { background: var(--bad); border-color: var(--bad); color: var(--panel); }
.pj-acts { align-items: center; }
.pj-more { position: relative; }
.pj-more > summary { list-style: none; } .pj-more > summary::-webkit-details-marker { display: none; }
.pj-more .menu-list { min-width: 170px; }
.pj-more .menu-list button { display: flex; align-items: center; height: 34px; padding: 0 10px; border: none; background: transparent; color: var(--text); font-size: 12.5px; text-align: left; cursor: pointer; border-radius: 6px; }
.pj-more .menu-list button:hover { background: var(--panel2); }
.pj-more .menu-list button.danger { color: var(--bad); }

/* шапка: поиск → инструменты данных → служебное → пользователь */
#actionsData { display: contents; }
#gsBtn { order: 1; }
:where(#actionsData) > * { order: 2; }
#actionsData > details.menu ~ details.menu, .app-header .bell-wrap, .app-header .theme-btn { order: 4; }
#acChip { order: 5; }
.app-header .bell-wrap { margin-left: 8px; }
.unit-toggle.unit-th { height: auto; padding: 2px; margin-left: 6px; vertical-align: middle; border-radius: 6px; }
.unit-toggle.unit-th button { height: 18px; padding: 0 6px; font-size: 10.5px; text-transform: none; letter-spacing: 0; border-radius: 4px; }

/* задания: сколько осталось */
.pj-sum { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13px; }
.pj-left { margin-top: 5px; font-size: 12.5px; color: var(--text); }
.pj-left.ok { color: var(--good); font-weight: 600; }
.pj-rl { margin: -3px 0 3px 31px; font-size: 11.5px; color: var(--muted); }
.pj-rl b { color: var(--text); }
.pj-cl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pj-cc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel2); font-size: 12px; }