/* ОКРУГ ЦККБ — экраны: Пачка (плитка), Участки, Таблицы, Аналитика, Удалённые,
 * Настройки, Округ, вход. Только токены ds.css; цвет — по смыслу. */

.crit-t { color: var(--crit); } .warn-t { color: var(--warn); } .ok-t { color: var(--ok); }
.lead { max-width: 920px; margin: -8px 0 var(--s5); font-size: 14px; line-height: 21px; color: var(--body); }
.fresh { font-size: 13px; color: var(--mute); white-space: nowrap; }
.fresh.crit { color: var(--crit); font-weight: 560; }
.kick { font-size: 12px; font-weight: 600; color: var(--mute); }
.cmd { display: block; font-family: var(--mono); font-size: 13px; padding: 10px 12px; border-radius: var(--r-btn); background: var(--surface-2); color: var(--ink);
  overflow-x: auto; white-space: nowrap; user-select: all; }
.cmd.big { font-size: 22px; font-weight: 600; letter-spacing: .04em; padding: 16px; text-align: center; }
.form-err { margin: 0; font-size: 13.5px; color: var(--crit); min-height: 0; }
.form-err:empty { display: none; }

/* ── знак: штрихкод пачки ── */
.bc-panel { padding: 18px 22px 14px; margin-bottom: var(--s4); }
.bc-h { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.bc-leg { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.bc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.bc-leg i, .leg i { display: inline-block; width: 4px; height: 12px; border-radius: 1px; }
.lg-ink { background: var(--ink); } .lg-soft { background: var(--line-control); } .lg-del { background: var(--line-control); height: 5px !important; align-self: flex-end; } .lg-oth { background: var(--other); height: 3px !important; width: 12px !important; }
.bc-def { margin-left: auto; }
.bc { position: relative; }
.bc-cv { display: block; width: 100%; cursor: crosshair; touch-action: pan-y; border-radius: var(--r-btn); }
.bc-cv:focus-visible { box-shadow: var(--ring); }
.bc-cap { min-height: 20px; margin-top: 2px; font-size: 13px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-cap .mono { font-size: 12.5px; color: var(--ink); }
.bc-empty { display: grid; gap: 4px; padding: 18px 0 8px; }
.bc-empty span { color: var(--mute); font-size: 13.5px; }

.sig { margin-bottom: var(--s4); background: var(--surface); border-radius: var(--r-sheet); box-shadow: var(--sh-1); padding: 4px 6px; gap: 0; }
.sig .note { background: transparent; box-shadow: none; padding: 8px 10px; border-radius: 0; color: var(--body); }
.sig .note + .note { box-shadow: inset 0 1px 0 var(--line); }
.sig .note.crit::before { background: var(--crit-x); } .sig .note.warn::before { background: var(--warn-x); }
.sig .note.crit > span:first-child { color: var(--crit); font-weight: 560; }
.sig .note .btn { height: 30px; }
.note-act { margin-left: auto; display: inline-flex; gap: var(--s2); flex-wrap: wrap; }
.note-act .btn { margin-left: 0; }

/* ── панель списков и фильтров ── */
.bar-tools { display: grid; gap: 10px; margin: var(--s2) 0 var(--s4); }
.bar-tools > .seg { justify-self: start; }
.bar-tools .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bar-tools .sel { width: auto; min-width: 170px; }
.lists, .subs { display: flex; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 24px; }
.prog:empty { display: none; }
.meter { display: inline-block; width: 160px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform var(--dur-3) var(--spring-glide); }
.keys { margin-left: auto; }

/* ── плитка ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: 14px; align-items: start; }
.bh { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; padding: 14px 2px 0; }
.bh.rev .h-block { color: var(--crit); }
.card { background: var(--surface); border-radius: var(--r-sheet); box-shadow: var(--sh-1); overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  position: relative; transition: box-shadow var(--dur-2) var(--ease-out); }
.card.on { box-shadow: var(--sh-1), 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
.card.hit { animation: hit 1.4s var(--ease-out) 1; }
@keyframes hit { 0% { box-shadow: 0 0 0 0 var(--focus); } 30% { box-shadow: 0 0 0 4px var(--focus); } 100% { box-shadow: var(--sh-1); } }
.c-ph { all: unset; box-sizing: border-box; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.c-ph:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.c-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-ph.none { cursor: default; display: grid; place-items: center; }
.c-noph { display: grid; justify-items: center; gap: 6px; color: var(--mute); font-size: 12.5px; }
.c-noph .ic { width: 26px; height: 26px; }
.c-tags { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.c-tags .tag { box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
.c-tags .tag:not(.crit):not(.warn):not(.line) { background: var(--ink); color: var(--on-ink); }
.c-tags .tag.line { background: var(--surface); }
.c-cnt { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px;
  background: rgb(10 10 10 / .62); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-cnt .ic { width: 13px; height: 13px; }
.c-nav { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / .9); color: #0d0d0e; opacity: 0; cursor: pointer; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); }
.c-nav.l { left: 8px; } .c-nav.r { right: 8px; }
.c-nav:active { transform: scale(.9); }
.c-ph:hover .c-nav, .c-ph:focus-visible .c-nav { opacity: 1; }
@media (hover: none) { .c-nav { opacity: 1; } }
.c-b { padding: 12px 14px 8px; display: grid; gap: 4px; min-width: 0; }
.c-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c-id { all: unset; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); cursor: copy; border-radius: 4px; }
.c-id:focus-visible { box-shadow: var(--ring); }
.c-t { font-size: 14.5px; line-height: 20px; font-weight: 560; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-o { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-rev { font-size: 13px; line-height: 18px; color: var(--ink); background: var(--surface-2); border-radius: var(--r-btn); padding: 8px 10px; margin-top: 4px; }
.c-rev b { color: var(--crit); font-weight: 600; }
.c-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--mute); margin-top: 2px; }
.c-meta .hi { color: var(--warn); font-weight: 560; }
.c-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--body); background: var(--surface-2); border-radius: var(--r-btn); padding: 7px 9px; margin: 4px 0 0; }
.c-note .ic { width: 14px; height: 14px; margin-top: 3px; color: var(--mute); }
.c-uchrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.c-uch { height: 34px; flex: 1 1 auto; font-weight: 560; font-size: 13.5px; }
.c-uch.edited { box-shadow: inset 0 0 0 1.5px var(--ink); }
.c-conf { font-size: 12px; color: var(--mute); white-space: nowrap; }
.c-conf.low { color: var(--warn); font-weight: 560; }
.c-marks { display: flex; gap: 6px; margin-top: 6px; }
.c-marks .chip { height: 30px; font-size: 12.5px; }
.c-f { display: flex; align-items: center; gap: 2px; padding: 4px 8px 8px 14px; margin-top: auto; border-top: 1px solid var(--line); }
.c-f .ic-btn { width: 34px; height: 34px; color: var(--mute); }
.c-f .ic-btn:hover { color: var(--ink); }
.c-f .ic-btn.on { color: var(--ink); background: var(--surface-2); }
.c-f .ic-btn.dng:hover { color: var(--crit); background: var(--crit-bg); }
.c-seen { flex: 1; font-size: 12px; color: var(--mute); }
.c-seen.ok { color: var(--ok); font-weight: 560; }
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--s5); }
.pager .sel { width: auto; }
.pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pages .btn { min-width: 36px; padding: 0 10px; }

/* окно рассылки */
.send-list { display: grid; gap: 2px; margin: 8px 0; }
.send-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-sheet); background: var(--surface); }
.send-row .ic { color: var(--mute); }
.send-row.off { opacity: .72; }
.send-t { display: grid; gap: 2px; min-width: 0; }
.dlg .notes, .dlg .note { margin-bottom: 8px; }
.lb { display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r-sheet); overflow: hidden; }
.lb img { max-height: 66vh; width: auto; display: block; }
.lb-cap { margin-top: 8px; font-size: 13px; color: var(--mute); }

/* ── участки ── */
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.unit { display: flex; flex-direction: column; gap: 12px; }
.unit .panel-h { margin: 0; align-items: center; }
.pct { margin-left: auto; display: inline-flex; align-items: baseline; gap: 1px; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.pct.ok { background: var(--ok-bg); color: var(--ok); } .pct.warn { background: var(--warn-bg); color: var(--warn); } .pct.crit { background: var(--crit-bg); color: var(--crit); }
.pct b { color: inherit; font-weight: 650; }
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.kpis4 > div { display: grid; gap: 2px; }
.kpis4 dt { margin: 0; } .kpis4 dd { margin: 0; }
.kpi-v { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.04em; color: var(--ink); }
.mini-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; display: grid; border-top: 1px solid var(--line); }
.mini { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.mini:hover { background: var(--hover); }
.mini img, .mini-noph { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2); display: block; }
.mini-t { display: grid; min-width: 0; }
.mini-t b { font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-t small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-empty { padding: 16px 2px; }
.unit-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.unit-f .k { flex: 1 1 100%; }
.unit-f .btn:first-of-type { margin-left: auto; }
.sheet-prev { border-radius: var(--r-sheet); box-shadow: var(--sh-1); background: var(--surface); overflow: hidden; }
.sp-k { font-size: 12px; font-weight: 600; color: var(--mute); padding: 16px 18px 0; }
.sp-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 4px 18px 12px; border-bottom: 1px solid var(--line); }
.sp-h b { font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.sp-f { padding: 12px 18px; }

/* ── таблицы ── */
.sched { margin: -10px 0 var(--s4); }
.sheet-like { padding: 18px 0 8px; }
.sheet-like .panel-h { padding: 0 22px; margin-bottom: 4px; }
.sheet-like .panel-h .k { margin-left: auto; }
.sheet-t { font-size: 22px; font-weight: 600; letter-spacing: -.035em; padding: 0 22px 12px; }
.sheet-like .tbl-wrap { border-radius: 0; }
.sheet-like .tbl th:first-child, .sheet-like .tbl td:first-child { padding-left: 22px; }
.sheet-like .tbl th:last-child, .sheet-like .tbl td:last-child { padding-right: 22px; }
.sheet-f { padding: 10px 22px 6px; }
.tbl th.wrap { white-space: normal; min-width: 76px; max-width: 132px; line-height: 15px; vertical-align: bottom; }
.tbl td.nw, .tbl th.nw { white-space: nowrap; }
.tbl td.warn-t { color: var(--warn); font-weight: 600; } .tbl td.ok-t { color: var(--ok); font-weight: 600; } .tbl td.crit-t { color: var(--crit); }
.tbl td.big { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--ink); }
.tbl .pct { margin: 0; }
.tbl tr.today td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tbl td .tag { margin-left: 8px; }
.tbl .row-a { text-align: right; white-space: nowrap; }
.tbl .row-a .btn + .btn { margin-left: 6px; }

/* ── аналитика ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: var(--s4); }
.kpi { background: var(--surface); border-radius: var(--r-sheet); box-shadow: var(--sh-1); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.kpi-big { font-size: 38px; line-height: 42px; font-weight: 600; letter-spacing: -.05em; color: var(--ink); }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-top: var(--s4); }
.an-grid .span2 { grid-column: 1 / -1; }
.chart { display: block; width: 100%; height: 140px; }
.chart .b-ink { fill: var(--ink); } .chart .b-soft { fill: var(--line-strong); }
.an-grid .panel:not(.span2) .chart { height: 90px; }
.x-lab { display: flex; justify-content: space-between; gap: 2px; margin-top: 6px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.x-lab span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.leg { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--mute); }
.leg span { display: inline-flex; align-items: center; gap: 6px; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hbars li { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.hb-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--body); }
.hb-t { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.hb-b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform var(--dur-4) var(--spring-glide); }
.hb-b.warn { background: var(--warn-x); } .hb-b.crit { background: var(--crit-x); }
.hb-v { color: var(--ink); font-weight: 560; white-space: nowrap; }

/* ── удалённые ── */
.dgroups { display: grid; gap: 14px; }
.dgroup { padding: 18px 20px 6px; }
.dgroup .panel-h { margin-bottom: 8px; }
.drows { display: grid; }
.drow { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.drow.ack { opacity: .66; }
.drow-n { display: grid; gap: 2px; }
.drow-n .mono { font-size: 14px; font-weight: 600; color: var(--ink); }
.drow-t { display: grid; gap: 4px; min-width: 0; }
.drow-t .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.drow-t b { font-weight: 560; }
.drow-a { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.drow-ph { all: unset; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; cursor: zoom-in; display: block; }
.drow-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── настройки ── */
.sets { display: grid; gap: 14px; }
.set .panel-h { margin-bottom: 14px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; align-items: start; }
.set-grid .span2, .set-grid .sw-row { grid-column: 1 / -1; }
.set-grid .sw-row { justify-content: flex-start; gap: 14px; }
.set-grid .sw-row > span { order: 2; }
.set-f { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.set-f .form-err { margin-right: auto; }
.mu-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mu-row .k { margin-right: auto; }

/* ── округ ── */
.add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 16px 0 0; margin-top: 8px; border-top: 1px solid var(--line); }
.add-row .field { min-width: 180px; flex: 1 1 180px; }

/* ── вход и смена пароля: две половины — чёрная со знаком, светлая с формой ── */
body.auth { margin: 0; min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); }
.auth-art { background: #0a0a0b; color: #f4f4f4; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6); overflow: hidden; }
.auth-top { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #9b9b9e; }
.auth-top .brand-mark { background: #f4f4f4; }
.auth-top .brand-mark svg rect:not(:last-child) { fill: #0a0a0b; }
.auth-word { align-self: center; display: grid; gap: 22px; }
.auth-word h1 { color: #f4f4f4; font-family: var(--display); font-weight: 500; font-size: clamp(54px, 7vw, 112px); line-height: .95; letter-spacing: -.05em; }
/* штрихкод на входе — иллюстрация, не данные: чистый CSS, aria-hidden */
.auth-code { display: block; width: 100%; height: clamp(72px, 9vw, 120px); }
.auth-lead { margin: 0; max-width: 520px; font-size: 15px; line-height: 22px; color: #a9a9ae; }
.auth-lead b { color: #f4f4f4; font-weight: 600; }
.auth-form { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--canvas); }
.auth-card { width: 100%; max-width: 400px; display: grid; gap: var(--s4); }
.auth-card h2 { font-family: var(--display); font-size: clamp(30px, 3vw, 42px); line-height: 1; font-weight: 500; letter-spacing: -.05em; }
.auth-card p.k { font-size: 14px; line-height: 20px; }
.auth-card .field input { height: 52px; font-size: 16px; padding: 0 16px; border-radius: 12px; }
.auth-card .btn { height: 52px; border-radius: 12px; font-size: 15px; margin-top: var(--s2); }
.auth-err { background: var(--crit-bg); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 20px; animation: shake 420ms var(--ease-out); }
.auth-err:empty { display: none; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ── телефон: своя композиция ── */
@media (max-width: 900px) {
  .head-act { width: 100%; margin-left: 0; }
  .head-act .btn.main { flex: 1 1 auto; }
  .fresh { width: 100%; }
  .bc-panel { padding: 14px 14px 10px; }
  .bc-def, .keys { display: none; }
  .bar-tools > .seg { justify-self: start; }
.bar-tools .row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .bar-tools .row::-webkit-scrollbar { display: none; }
  .bar-tools .search { min-width: 220px; }
  .chips { flex-wrap: nowrap; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .c-f .ic-btn { width: 44px; height: 44px; }
  .units, .an-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-big { font-size: 32px; line-height: 36px; }
  .drow { grid-template-columns: 1fr; gap: 8px; }
  .drow-a { justify-content: flex-start; }
  .send-row { grid-template-columns: 22px minmax(0, 1fr); }
  .send-row .btn { grid-column: 1 / -1; }
  .dlg > header, .dlg .dlg-b, .dlg > footer { padding-left: 18px; padding-right: 18px; }
  .dlg > footer .btn { flex: 1 1 auto; }
  .auth-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-art { gap: var(--s4); padding: 20px 20px 24px; grid-template-rows: auto auto; }
  .auth-word h1 { font-size: 44px; }
  .auth-code { height: 52px; }
  .auth-lead { display: none; }
  .auth-form { place-items: start center; padding: 28px 20px 40px; }
}