/* Slice Консоль — плотная рабочая админка для компьютера. Цвета, шрифты и радиусы — из webapp/tokens.css (айдентика Slice);
   здесь только компоновка. Один образец на каждый тип элемента: кнопка, чип, сегмент, панель, таблица, диалог, состояние. */

:root {
  --side-w: 208px;
  --card-w: 560px;
  --row-h: 40px;
  --fs-base: 13px;
  --r: 10px;
  --r-s: 8px;
  --focus: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-brand-ink);
}
[data-theme="dark"] { --c-panel: #111113; --c-hover: rgba(255, 255, 255, .045); --c-sel: rgba(207, 243, 91, .09); }
[data-theme="light"] { --c-panel: #ffffff; --c-hover: rgba(11, 11, 15, .035); --c-sel: rgba(78, 102, 0, .07); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: var(--fw-regular) var(--fs-base)/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--c-text-2); }
.faint { color: var(--c-text-3); }
.num, .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-s); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- каркас */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100vh; }
.app.with-card { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--card-w); }
.side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--c-line); background: var(--c-panel); min-height: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: var(--fw-bold); font-size: 15px; }
.brand img { border-radius: 7px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--c-text-2); cursor: pointer; text-align: left; white-space: nowrap;
}
.nav-item:hover { background: var(--c-hover); color: var(--c-text); }
.nav-item[aria-current="page"] { background: var(--c-surface-2); color: var(--c-text); font-weight: var(--fw-medium); }
.nav-bottom { margin-top: auto; }
.side-foot { padding: 8px; }
.conn { display: flex; align-items: center; gap: 8px; color: var(--c-text-2); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-3); flex: none; }
.dot.ok { background: var(--c-ok); } .dot.warn { background: var(--c-warn); } .dot.err { background: var(--c-err); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--c-line); }
.search {
  flex: 1; max-width: 640px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px;
  border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-surface); color: var(--c-text-2);
}
.search:focus-within { border-color: var(--c-brand-ink); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--c-text); height: 100%; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.search input:focus-visible { box-shadow: none; }
kbd { font: 11px var(--font-num); color: var(--c-text-3); border: 1px solid var(--c-line); border-radius: 5px; padding: 1px 5px; }
.banners:empty { display: none; }
.banners { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px 0; }
.banner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r); background: var(--c-surface); border: 1px solid var(--c-line); }
.banner.warn { border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); }
.banner.err { border-color: color-mix(in srgb, var(--c-err) 55%, transparent); background: var(--c-err-soft); }
.banner .btn { margin-left: auto; }
.view { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.view > *, .card-body > * { flex: none; }

/* ---------------------------------------------------------------- кнопки, чипы, сегменты, поля */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-s); border: 1px solid transparent; cursor: pointer; white-space: nowrap; font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn-primary:hover:not(:disabled) { opacity: .9; }
.btn-brand { background: var(--c-brand); color: var(--c-on-brand); }
.btn-secondary { background: var(--c-surface-2); color: var(--c-text); }
.btn-secondary:hover:not(:disabled) { border-color: var(--c-line); }
.btn-ghost { background: none; color: var(--c-text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--c-hover); color: var(--c-text); }
.btn-danger { background: var(--c-err); color: #fff; }
.btn-danger-ghost { background: none; color: var(--c-err); border-color: color-mix(in srgb, var(--c-err) 40%, transparent); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--c-err-soft); }
.btn-s { height: 28px; padding: 0 10px; font-size: 12px; }
.icon-btn { width: 34px; padding: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--c-line); background: none;
  color: var(--c-text-2); cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--c-text); background: var(--c-hover); }
.chip[aria-pressed="true"] { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-s); background: var(--c-surface-2); }
.seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--c-text-2); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--c-thumb); color: var(--c-text); box-shadow: var(--shadow-1); }
.select select, .field input, .field textarea, .field select {
  height: 32px; padding: 0 10px; border-radius: var(--r-s); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text);
}
.select-s select { height: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; color: var(--c-text-2); }
.field textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus, .select select:focus { outline: none; border-color: var(--c-brand-ink); }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 140px; }
.hint { font-size: 12px; color: var(--c-text-3); }
.form-error { color: var(--c-err); margin: 0; }

/* ---------------------------------------------------------------- панели и таблицы */
.panel { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; flex-wrap: wrap; }
.panel-head h2, .h2 { margin: 0; font-size: 14px; font-weight: var(--fw-bold); }
.panel-head .seg { margin-left: auto; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-right { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.table-panel { display: flex; flex-direction: column; min-height: 0; }
.table-meta { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--c-line); font-size: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: var(--fw-medium); font-size: 11px; color: var(--c-text-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; background: var(--c-panel); border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
td { padding: 0 12px; height: var(--row-h); border-bottom: 1px solid var(--c-line); white-space: nowrap; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--c-hover); }
tbody tr.sel { background: var(--c-sel); }
td.wrap { white-space: normal; padding-top: 8px; padding-bottom: 8px; line-height: 1.4; }
.who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who b { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.who small { color: var(--c-text-3); font: 11px var(--font-num); }
.badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
td .badges { flex-wrap: nowrap; }
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: var(--fw-medium);
  background: var(--c-surface-2); color: var(--c-text-2); white-space: nowrap;
}
.badge.brand { background: var(--c-brand); color: var(--c-on-brand); }
.badge.ok { background: color-mix(in srgb, var(--c-ok) 18%, transparent); color: var(--c-ok); }
.badge.warn { background: color-mix(in srgb, var(--c-warn) 18%, transparent); color: var(--c-warn); }
.badge.err { background: var(--c-err-soft); color: var(--c-err); }
.plus { color: var(--c-ok); } .minus { color: var(--c-err); }
.more { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--c-line); }

/* состояния */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--c-text-2); }
.state b { color: var(--c-text); font-weight: var(--fw-medium); }
.state.err b { color: var(--c-err); }
.skel { display: flex; flex-direction: column; gap: 0; }
.skel div { height: var(--row-h); border-bottom: 1px solid var(--c-line); position: relative; }
.skel div::after { content: ""; position: absolute; left: 12px; right: 40%; top: 14px; height: 12px; border-radius: 6px; background: var(--c-surface-2); }
.skel div:nth-child(2n)::after { right: 55%; }

/* ---------------------------------------------------------------- новые пользователи */
.newbies-list { display: flex; gap: 10px; overflow-x: auto; padding: 12px 14px 14px; scroll-snap-type: x proximity; }
.nb {
  flex: 0 0 236px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r); border: 1px solid var(--c-line);
  background: var(--c-surface); scroll-snap-align: start;
}
.nb-top { display: flex; align-items: baseline; gap: 6px; justify-content: space-between; }
.nb-name { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-when { color: var(--c-text-3); font-size: 12px; white-space: nowrap; }
.nb-src { color: var(--c-text-2); font-size: 12px; min-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-bal { font-size: 12px; color: var(--c-text-2); }
.nb-actions { display: flex; gap: 6px; margin-top: 2px; }
.nb-actions .btn { flex: 1; }
.newbies-list .state { padding: 14px; flex: 1; align-items: flex-start; text-align: left; }

/* ---------------------------------------------------------------- карточка пользователя */
.card { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--c-line); background: var(--c-panel); }
.card-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 10px; }
.card-title { display: flex; align-items: flex-start; gap: 10px; }
.card-title h2 { margin: 0; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.25; overflow-wrap: anywhere; }
.card-title .close { margin-left: auto; }
.card-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--c-text-2); font-size: 12px; }
.copy { border: 0; background: none; color: var(--c-text-2); cursor: pointer; padding: 2px 4px; border-radius: 5px; font: 12px var(--font-num); }
.copy:hover { background: var(--c-hover); color: var(--c-text); }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card-tabs { padding: 10px 16px 0; }
.card-body { flex: 1; overflow: auto; padding: 12px 16px 28px; display: flex; flex-direction: column; gap: 12px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.fact { background: var(--c-panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact span { font-size: 11px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
.fact b { font: var(--fw-medium) 16px var(--font-num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact small { color: var(--c-text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sect { border: 1px solid var(--c-line); border-radius: var(--r); }
.sect > h3 { margin: 0; padding: 10px 12px; font-size: 12px; font-weight: var(--fw-bold); color: var(--c-text-2); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: 8px; }
.sect > h3 .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.kv { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.kv > div { padding: 7px 12px; border-bottom: 1px solid var(--c-line); min-width: 0; overflow-wrap: anywhere; }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.kv > .k { color: var(--c-text-2); }
.sect .table-wrap td, .sect .table-wrap th { padding-left: 12px; padding-right: 12px; }
.sect .state { padding: 18px 12px; }
.list .item { padding: 10px 12px; border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.list .item:last-child { border-bottom: 0; }
.item-top, .item-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.item-top b { font-weight: var(--fw-medium); }
.item-right { margin-left: auto; }
.item-err { color: var(--c-err); font-size: 12px; overflow-wrap: anywhere; }
.danger-zone { border-color: color-mix(in srgb, var(--c-err) 35%, transparent); }
.danger-zone p { margin: 0; padding: 10px 12px; color: var(--c-text-2); }
.danger-zone .row { display: flex; gap: 8px; padding: 0 12px 12px; flex-wrap: wrap; }
.card-back { display: none; }

/* ---------------------------------------------------------------- сводка */
.beta-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi span { font-size: 11px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi b { font: var(--fw-medium) 24px/1.15 var(--font-num); }
.kpi small { color: var(--c-text-2); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: start; }
.svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.svc > div { display: flex; gap: 8px; align-items: baseline; padding: 9px 14px; border-top: 1px solid var(--c-line); min-width: 0; }
.svc .dot { transform: translateY(-1px); }
.svc small { display: block; color: var(--c-text-3); font-size: 12px; overflow-wrap: anywhere; }
.grp td { color: var(--c-text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; height: 30px; padding-top: 6px; }

/* мелкие модификаторы вместо атрибута style (его запрещает политика CSP страницы) */
.check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--c-brand-ink); }
.lines.pad { padding: 10px 14px 14px; }
.panel-head.ph-pad { padding-bottom: 10px; }
.panel-head.ph-pad-s { padding-bottom: 6px; }
.kv.kv-top { border-top: 1px solid var(--c-line); }

/* ---------------------------------------------------------------- «Сегодня» */
.nav-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-err); color: #fff;
  font: var(--fw-medium) 11px/20px var(--font-num); text-align: center;
}
.att { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.att-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--c-line); cursor: pointer; min-width: 0; }
.att-item:last-child { border-bottom: 0; }
.att-item:hover { background: var(--c-hover); }
.att-item:focus-visible { border-radius: 0; }
.att-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.att-main b { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.att-main span { color: var(--c-text-2); font-size: 12px; overflow-wrap: anywhere; }
.att-when { color: var(--c-text-3); font-size: 12px; white-space: nowrap; }
.att-go { color: var(--c-text-3); display: inline-flex; }
.att-go svg { width: 16px; height: 16px; }
.att + .state, .panel > .state.ok { border-top: 1px solid var(--c-line); }
.state.ok b { color: var(--c-ok); }
.panel-head.plain { padding: 4px 2px 0; }
.push { margin-left: auto; }
.kpi.kpi-warn b { color: var(--c-warn); }

/* ---------------------------------------------------------------- «Ролики» */
.field-inline input {
  height: 32px; width: 170px; padding: 0 10px; border-radius: var(--r-s); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text);
}
.field-inline input:focus { outline: none; border-color: var(--c-brand-ink); }
.linkish { border: 0; background: none; padding: 2px 4px; margin: 0 -4px; border-radius: 5px; color: var(--c-text); cursor: pointer; text-align: left; font-weight: var(--fw-medium); }
.linkish:hover { background: var(--c-hover); text-decoration: underline; text-underline-offset: 2px; }
.linkish small { color: var(--c-text-3); font-weight: var(--fw-regular); }
.who small.ui { font-family: var(--font-ui); }
.table-meta:has(> span:empty:only-child) { display: none; }
.clip-reason { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callout { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--c-line); overflow-wrap: anywhere; }
.callout.err { border-color: color-mix(in srgb, var(--c-err) 45%, transparent); background: var(--c-err-soft); }
.callout.err b { color: var(--c-err); }
.callout.warn { border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); background: color-mix(in srgb, var(--c-warn) 10%, transparent); }
.mono-s { font: 12px/1.45 var(--font-num); color: var(--c-text-2); }
.clip-pane { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-height: 120px; }
.clip-pane > .state { align-self: stretch; border: 1px dashed var(--c-line); border-radius: var(--r); }
.clip-video { width: 100%; }
.dlg .clip-video video { max-height: 56vh; display: block; margin: 0 auto; }
.dlg pre.report { width: 100%; max-height: 50vh; padding: 10px 12px; border-radius: var(--r-s); background: var(--c-surface-2); }
.row-end { display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------------- поиск ⌘K */
.search-wrap { position: relative; flex: 1; max-width: 640px; display: flex; }
.search-wrap .search { max-width: none; }
.sr-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: min(70vh, 560px); overflow: auto;
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: 6px;
}
.sr-group + .sr-group { border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 6px; }
.sr-head { padding: 4px 8px; font-size: 11px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
.sr-item {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border: 0; border-radius: var(--r-s);
  background: none; cursor: pointer; text-align: left;
}
.sr-item .who { flex: 1; }
.sr-item .who b { max-width: none; }
.sr-item .who small { font-family: var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item:hover, .sr-item.active { background: var(--c-hover); }
.sr-item.active { box-shadow: inset 0 0 0 1px var(--c-line); }
.sr-state { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; color: var(--c-text-2); }
.sr-state b { color: var(--c-text); font-weight: var(--fw-medium); }
.sr-state.err b { color: var(--c-err); }
.sr-foot { padding: 6px 8px 2px; font-size: 11px; color: var(--c-text-3); border-top: 1px solid var(--c-line); margin-top: 6px; }

/* ---------------------------------------------------------------- диалог */
.dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--c-line); border-radius: 14px;
  background: var(--c-panel); color: var(--c-text); box-shadow: var(--shadow-2); overflow: hidden;
}
.dlg::backdrop { background: var(--c-scrim); }
.dlg-in { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dlg-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 10px; }
.dlg-head h2 { margin: 0; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.35; }
.dlg-head .icon-btn { margin-left: auto; margin-top: -4px; }
.dlg-body { padding: 4px 18px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.dlg-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--c-line); }
.dlg-foot .left { margin-right: auto; }
.lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--c-text-2); }
.lines li { padding-left: 14px; position: relative; }
.lines li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-3); }
.msg-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--c-surface-2); max-height: 260px; overflow: auto; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.result { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r); background: color-mix(in srgb, var(--c-ok) 12%, transparent); }
.result b { color: var(--c-ok); }
.dlg video { width: 100%; max-height: 70vh; background: #000; border-radius: var(--r-s); }
.dlg pre { margin: 0; white-space: pre-wrap; font: 12px/1.5 var(--font-num); max-height: 60vh; overflow: auto; }
.dlg.wide { width: min(760px, calc(100vw - 32px)); }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; padding: 10px 14px; border-radius: var(--r);
  background: var(--c-text); color: var(--c-bg); box-shadow: var(--shadow-2); max-width: calc(100vw - 32px);
}

/* ---------------------------------------------------------------- вход */
.login-page { overflow: auto; }
.login { max-width: 400px; margin: 12vh auto 40px; padding: 0 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.login h1 { margin: 6px 0 0; font-size: 22px; }
.login-mark { border-radius: 13px; }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
.login-form .btn { height: 36px; }

/* ---------------------------------------------------------------- узкое окно */
@media (max-width: 1700px) {
  .with-card .col-act, .with-card .col-tags, .with-card .col-style, .with-card .col-src, .with-card .col-took { display: none; }
}
@media (max-width: 1240px) {
  :root { --card-w: 480px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  :root { --side-w: 60px; }
  .brand-name, .nav-item span, .conn-text { display: none; }
  .brand { justify-content: center; padding: 4px 0 16px; }
  .nav-item { justify-content: center; padding: 0; }
  .side-foot { display: flex; justify-content: center; }
  .app.with-card { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .card { position: fixed; inset: 0 0 0 var(--side-w); z-index: 20; border-left: 0; }
  .card-back { display: inline-flex; }
  .card-title .close { display: none; }
  .top { padding: 10px 14px; }
  .view { padding: 12px 14px 28px; }
  .banners { padding: 8px 14px 0; }
  .toolbar-right { margin-left: 0; width: 100%; }
  .toolbar-right .select { flex: 1; }
  .toolbar-right .select select { width: 100%; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: 140px minmax(0, 1fr); }
  .col-src, .col-took { display: none; }
  .field-inline { flex: 1; }
  .field-inline input { width: 100%; }
  .nav-item { position: relative; }
  .nav-count { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv > .k { border-bottom: 0; padding-bottom: 0; }
  .search kbd { display: none; }
}

/* «Напомнить о монтаже» */
.remind-pick { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.remind-opt { padding: 10px 12px; min-height: 40px; }
.remind-opt + .remind-opt { border-top: 1px solid var(--c-line); }
.remind-opt span { flex: 1; }
.remind-opt b { font-weight: 600; }
.remind-sample { display: flex; flex-direction: column; gap: 4px; }
.remind-sample + .remind-sample { margin-top: 8px; }

/* «Маркетинг»: кампании карточками (на узком окне — в одну колонку), ссылки и код с кнопкой «Копировать» */
#view-marketing { display: flex; flex-direction: column; gap: 12px; }
.mk-rules { margin: 0; max-width: 760px; }
.mk-h { margin: 4px 2px 0; }
#view-marketing .toolbar-right { flex-wrap: wrap; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.mk-camp { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-camp-head { display: flex; align-items: flex-start; gap: 8px; }
.mk-camp-head h3 { margin: 0; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mk-camp-head .badge { flex: none; }
.mk-camp-who { display: flex; flex-direction: column; gap: 2px; color: var(--c-text-2); font-size: 12px; }
.mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-s); overflow: hidden; }
.mk-stat { background: var(--c-panel); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-stat b { font: var(--fw-medium) 16px var(--font-num); }
.mk-stat span { font-size: 11px; color: var(--c-text-3); }
.mk-links { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--r-s); overflow: hidden; }
.mk-link { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; min-height: 34px; }
.mk-link + .mk-link { border-top: 1px solid var(--c-line); }
.mk-link-k { font-size: 12px; color: var(--c-text-2); }
.mk-link-v { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-link .copy { font-family: var(--font-ui, inherit); white-space: nowrap; }
.result .mk-links { background: var(--c-panel); }
@media (max-width: 640px) {
  .mk-link { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-link-k { grid-column: 1 / -1; padding-top: 4px; }
  .mk-lists { grid-template-columns: minmax(0, 1fr); }
  #view-marketing .toolbar-right .btn { flex: 1 1 100%; }
}
.mk-head { display: flex; flex-direction: column; gap: 8px; }
.mk-head > .btn { align-self: flex-start; gap: 4px; }
.mk-head > .btn svg { width: 16px; height: 16px; }
.mk-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-title h2 { margin: 0; font-size: 20px; font-weight: var(--fw-bold); }
#view-marketing > .seg { align-self: flex-start; max-width: 100%; overflow-x: auto; }
#view-marketing .kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); }
#view-marketing .toolbar > .seg { max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------- «Сообщения» (макет design/console_v2/messages.html)
   Список переписок | переписка | о человеке. На телефоне — список, по нажатию переписка на весь экран с «Назад». */
[data-theme="light"] { --c-bubble-in: #ffffff; --c-bubble-out: #0b0b0f; --c-on-bubble-out: #ffffff;
  --p1: #e6f4c2; --p2: #dfe7fb; --p3: #f6e3ef; --p4: #fbead6; --p5: #dff1ec; --p6: #ece6fa; }
[data-theme="dark"] { --c-bubble-in: #1c1c20; --c-bubble-out: #ececf1; --c-on-bubble-out: #0b0b0f;
  --p1: #d5e8a3; --p2: #c9d6f5; --p3: #ecc9dc; --p4: #f1d6b4; --p5: #c6e5dc; --p6: #d8cff3; }
#view-messages { padding: 0; overflow: hidden; gap: 0; }
.msg { display: grid; grid-template-columns: 330px minmax(0, 1fr) 290px; flex: 1; min-height: 0; height: 100%; }
.msg .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: var(--fw-medium);
  background: var(--c-surface-2); color: var(--c-text-2); white-space: nowrap; flex: none; }
.msg .tag.brand { background: var(--c-brand); color: var(--c-on-brand); }
.msg .tag.ok { background: color-mix(in srgb, var(--c-ok) 14%, transparent); color: var(--c-ok); }
.msg .tag.warn { background: color-mix(in srgb, var(--c-warn) 14%, transparent); color: var(--c-warn); }
.msg .tag.err { background: var(--c-err-soft); color: var(--c-err); }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; font-size: 13px; color: #1b1b1f; background: var(--p1); }
.av.p2 { background: var(--p2); } .av.p3 { background: var(--p3); } .av.p4 { background: var(--p4); } .av.p5 { background: var(--p5); } .av.p6 { background: var(--p6); }
.av.gray { background: var(--c-surface-2); color: var(--c-text-3); }
.warn-t { color: var(--c-warn); } .ok-t { color: var(--c-ok); }

.dl { border-right: 1px solid var(--c-line); background: var(--c-panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dl-head { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--c-line); }
.dl-head h1 { margin: 0; font-size: 18px; font-weight: var(--fw-bold); }
.fsearch { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: var(--r-s); background: var(--c-surface-2); color: var(--c-text-3); }
.fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--c-text); height: 100%; }
.fsearch input:focus-visible { box-shadow: none; }
.fsearch:focus-within { box-shadow: 0 0 0 1px var(--c-brand-ink); }
.dl-head .chip { height: 26px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.dl-head .chip .n { font-family: var(--font-num); font-size: 12px; opacity: .75; }
.dl-list { overflow: auto; flex: 1; min-height: 0; }
.dl-sec { padding: 10px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); }
.di { display: flex; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--c-line); background: none; align-items: flex-start;
  color: inherit; text-align: left; cursor: pointer; font: inherit; }
.di:hover { background: var(--c-hover); }
.di:focus-visible { border-radius: 0; }
.di[aria-current="true"] { background: var(--c-sel); box-shadow: inset 3px 0 0 var(--c-brand-ink); }
.di .b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.di .n { display: flex; align-items: center; gap: 6px; min-width: 0; }
.di .n svg { width: 12px; height: 12px; color: var(--c-brand-ink); }
.di .n strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.di .n time { margin-left: auto; font: 11px var(--font-num); color: var(--c-text-3); flex: none; padding-left: 4px; }
.di .s { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.di .s .txt { flex: 1; min-width: 0; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di .s b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-err); color: #fff; font: 600 10px/18px var(--font-ui); text-align: center; flex: none; }
.di.unread .n strong, .di.unread .s .txt { color: var(--c-text); }
.di.pin { background: color-mix(in srgb, var(--c-brand) 14%, var(--c-panel)); }
.di.dim { opacity: .62; }
.dl-list .state { padding: 28px 16px; }

.cv { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--c-bg); }
.cv-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--c-line); background: var(--c-panel); min-width: 0; }
.cv-head .who { min-width: 0; flex: 1; }
.cv-head .who-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-head .who-n strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-head .who-s { font-size: 12px; color: var(--c-text-2); overflow-wrap: anywhere; }
.cv-head .acts { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.cv-head .back { display: none; }
.mob-t, .mob-only { display: none; }
.more-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; padding: 6px;
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow-2); }
.menu button { height: 34px; padding: 0 10px; border: 0; background: none; border-radius: var(--r-s); text-align: left; cursor: pointer; color: var(--c-text); white-space: nowrap; }
.menu button:hover:not(:disabled) { background: var(--c-hover); }
.menu button.danger { color: var(--c-err); }
.menu button:disabled { opacity: .45; cursor: default; }
.docbar { display: flex; align-items: center; gap: 8px; padding: 8px 20px; font-size: 12px; color: var(--c-text-2); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.docbar svg { width: 16px; height: 16px; }
.cv-body { flex: 1; min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cv-body:focus-visible { box-shadow: inset 0 0 0 2px var(--c-brand-ink); border-radius: 0; }
.cv-body > * { flex: none; }
.more-up { align-self: center; }
.cv-empty { justify-content: center; }
.msg:not(.chat-open) .pc { visibility: hidden; }
.day { align-self: center; font-size: 11px; color: var(--c-text-3); background: var(--c-surface-2); padding: 2px 10px; border-radius: 10px; }
.bub { max-width: 64%; padding: 9px 12px 6px; border-radius: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.bub .txt, .bub .cap { white-space: pre-wrap; }
.bub .meta { display: flex; gap: 6px; justify-content: flex-end; font-size: 11px; margin-top: 3px; color: var(--c-text-3); }
.bub.in { align-self: flex-start; background: var(--c-bubble-in); border: 1px solid var(--c-line); border-bottom-left-radius: 4px; }
.bub.out { align-self: flex-end; background: var(--c-bubble-out); color: var(--c-on-bubble-out); border-bottom-right-radius: 4px; }
.bub.out .meta, .bub.out .via { color: color-mix(in srgb, var(--c-on-bubble-out) 62%, transparent); }
.bub.out.fail { background: var(--c-surface-2); color: var(--c-text); border: 1px dashed var(--c-err); }
.bub.out.fail .meta { color: var(--c-err); }
.bub.out.fail .via { color: var(--c-text-3); }
.bub .via { font-size: 11px; font-weight: var(--fw-medium); margin-bottom: 2px; color: var(--c-text-3); }
.bub.photo { padding: 4px; }
.bub.photo .via { padding: 4px 8px 0; }
.bub .ph { display: block; border-radius: 11px; overflow: hidden; }
.bub .ph img { display: block; width: 280px; max-width: 100%; height: auto; max-height: 300px; object-fit: cover; background: var(--c-surface-2); }
.bub .ph-miss { display: grid; place-items: center; width: 280px; max-width: 100%; height: 170px; border-radius: 11px; font-size: 12px; color: #4a4a55;
  background: linear-gradient(135deg, #dfe7fb, #f6e3ef 60%, #e6f4c2); text-align: center; padding: 10px; }
.bub.photo .cap { padding: 6px 8px 2px; }
.bub.photo .meta { padding: 0 8px 2px; }
.fatt { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.fatt-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-text-2); flex: none; }
.bub.out .fatt-ic { background: color-mix(in srgb, var(--c-on-bubble-out) 14%, transparent); color: inherit; }
.fatt-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fatt-t span { font-size: 12px; color: var(--c-text-3); }
.bub audio { display: block; width: 260px; max-width: 100%; height: 34px; margin-top: 6px; }
.dl-link { font-size: 12px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sys { align-self: center; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-2); padding: 6px 12px;
  border: 1px dashed var(--c-line); border-radius: 10px; background: var(--c-panel); max-width: 80%; }
.sys time { font: 11px var(--font-num); flex: none; }
.cmp { border-top: 1px solid var(--c-line); background: var(--c-panel); padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.cmp .tpl { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp .tpl .chip { height: 26px; font-size: 12px; padding: 0 10px; }
.cmp .box { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--c-line); border-radius: 12px; padding: 6px 6px 6px 6px; background: var(--c-surface); }
.cmp .box:focus-within { border-color: var(--c-brand-ink); }
.cmp textarea { flex: 1; min-width: 0; min-height: 34px; max-height: 200px; padding: 7px 4px; border: 0; outline: 0; resize: none; background: none; color: var(--c-text);
  line-height: 1.45; font: inherit; }
.cmp textarea:focus-visible { box-shadow: none; }
.cmp textarea:disabled { opacity: .55; }
.cmp-photo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-2); }
.cmp-photo img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.hint-row { display: flex; gap: 10px; font-size: 11px; color: var(--c-text-3); }
.hint-row .kbd-hint { margin-left: auto; white-space: nowrap; }
.cmp-hint.warn-t { color: var(--c-warn); font-size: 12px; }

.pc { border-left: 1px solid var(--c-line); background: var(--c-panel); overflow: auto; min-height: 0; }
.pc section { padding: 14px 16px; border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 6px; }
.pc .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); }
.pc dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 4px 0 0; }
.pc dt { color: var(--c-text-2); } .pc dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pc dd.num { font-family: var(--font-num); }
.pc .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pc .note { margin: 0; color: var(--c-text-2); line-height: 1.45; }
.pc textarea { width: 100%; min-height: 64px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-text); resize: vertical; line-height: 1.45; }
.pc textarea:focus { outline: none; border-color: var(--c-brand-ink); }
.pc .linkish { align-self: flex-start; padding: 0; color: var(--c-text-2); }

/* карточка человека поверх «Сообщений», а не четвёртой колонкой */
#app[data-view="messages"].with-card { grid-template-columns: var(--side-w) minmax(0, 1fr); }
#app[data-view="messages"] .card { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--card-w), 100vw); z-index: 25; box-shadow: var(--shadow-2); }

@media (max-width: 1440px) { .msg { grid-template-columns: 300px minmax(0, 1fr) 260px; } }
@media (max-width: 1180px) { .msg { grid-template-columns: 300px minmax(0, 1fr); } .pc { display: none; } }
@media (max-width: 760px) {
  .msg { grid-template-columns: minmax(0, 1fr); }
  .msg .cv { display: none; }
  .msg.chat-open .dl { display: none; }
  .msg.chat-open .cv { display: flex; }
  .dl-head { padding: 14px 16px 10px; }
  .di { padding: 12px 16px; }
  .cv-head { padding: 10px 12px; gap: 8px; }
  .cv-head .back { display: inline-flex; }
  .cv-head .desk, .desk-t, .kbd-hint { display: none; }
  .mob-t { display: inline; }
  .menu .mob-only { display: block; }
  .cv-body { padding: 14px 12px; }
  .bub { max-width: 84%; }
  .bub .ph img, .bub .ph-miss { width: 220px; }
  .sys { max-width: 100%; }
  .cmp { padding: 8px 10px 10px; }
  .cmp .tpl { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .docbar { padding: 8px 12px; }
  #app[data-view="messages"] .top { display: none; }
  .hint-row:has(.cmp-hint.info) { display: none; }
}
@media (max-width: 360px) {
  .cv-head .av { display: none; }
}

/* ---------------------------------------------------------------- телефон: нижнее меню вместо боковой полосы (как в макете) */
.nav-more { display: none; }
.more-sheet { display: none; }
@media (max-width: 640px) {
  :root { --side-w: 0px; --tab-h: 64px; }
  .app, .app.with-card { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--tab-h)); }
  .side { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tab-h); z-index: 30; flex-direction: row; align-items: stretch; gap: 0;
    padding: 0 4px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--c-line); }
  .brand, .side-foot { display: none; }
  .nav { display: contents; }
  .nav-item, .nav-more { position: relative; flex: 1 1 0; min-width: 0; height: auto; flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px;
    border-radius: 0; background: none; font-size: 11px; }
  .nav-item span { display: block; font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-item[aria-current="page"], .nav-more.on { background: none; color: var(--c-text); font-weight: var(--fw-bold); }
  .nav-more { display: flex; }
  .nav-count { position: absolute; top: 6px; left: calc(50% + 4px); right: auto; }
  .nav-extra { display: none; }
  .card { inset: 0 0 var(--tab-h) 0 !important; width: auto !important; }
  .more-open .more-sheet { display: flex; flex-direction: column; position: fixed; left: 8px; right: 8px; bottom: calc(var(--tab-h) + 8px); z-index: 31;
    padding: 6px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow-2); }
  .more-sheet button { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none;
    color: var(--c-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  .more-sheet button[aria-current="page"] { background: var(--c-surface-2); font-weight: var(--fw-medium); }
}