/* contenthub — панель владельца. Светлая тема, без внешних зависимостей.
 * Порядок: база → шапка → сетки и плитки → таблицы → бейджи → формы и кнопки → разделы → мобильная вёрстка (в конце,
 * один блок @media (max-width: 800px): шапка-«бургер», карточный вид таблиц .cards, тап-цели ≥ 40 px). */
:root {
  --bg: #f5f6f8; --card: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb;
  --accent: #2563eb; --accent-dark: #1d4ed8; --danger: #dc2626; --ok: #16a34a; --warn: #d97706;
  --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 16px 0 8px; }
p { margin: 8px 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
img, svg, video { max-width: 100%; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
pre { background: #f3f4f6; padding: 10px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* шапка */
.topbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 17px; color: var(--text); white-space: nowrap; }
.brand span { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 4px; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-items: center; }
.topbar nav a { padding: 6px 12px; border-radius: 6px; color: var(--text); }
.topbar nav a:hover { background: var(--bg); text-decoration: none; }
.topbar nav a.active { background: #e0e7ff; color: var(--accent-dark); }
.topbar nav a.nav-cta { background: var(--accent); color: #fff; margin-left: auto; }
.topbar nav a.nav-cta:hover { background: var(--accent-dark); }
.logout { margin: 0; }
.nav-toggle { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 20px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }
footer a { color: var(--muted); text-decoration: underline; }

/* сообщения */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.flash.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flash.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.flash.small { font-size: 13px; padding: 6px 10px; }
.flash a { color: inherit; text-decoration: underline; }

/* карточки и сетки */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0; }
.card.narrow { max-width: 640px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cols > *, .kpis > *, .stats > *, .choose > *, .variants > *, .phones > *, .row-between > * { min-width: 0; }

/* плитки-показатели: .stat (Главная, Ответы, ИИ, база знаний) и .kpi (аналитика) — один стиль */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat, .kpi { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; color: var(--text); box-shadow: var(--shadow); }
a.stat:hover { text-decoration: none; border-color: var(--accent); }
.stat b, .kpi b { display: block; font-size: 26px; line-height: 1.1; font-weight: 600; overflow-wrap: anywhere; }
.stat span, .kpi span.lbl { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat.stat-err b, .kpi.kpi-warn b { color: var(--danger); }
.stat.stat-warn b { color: var(--warn); }
.stat.stat-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.choice { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; color: var(--text); }
.choice:hover { border-color: var(--accent); text-decoration: none; }

/* таблицы */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { background: #f9fafb; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafafa; }
tr.dim { opacity: .6; }
tr.lvl-error td { background: #fff7f7; }
.nowrap { white-space: nowrap; }
.wrap { word-break: break-word; max-width: 420px; }
.actions { white-space: nowrap; }
.actions form, .actions .btn { margin: 2px 2px 2px 0; }
.card .table-wrap { border: 0; margin: 0; }
.rows-compact td { padding: 6px 10px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num a, th a { color: inherit; }
th a.sorted { color: var(--accent-dark); }
th a.sorted::after { content: " ↓"; }
.pager { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* превью */
.thumb-cell { width: 56px; }
.thumb { width: 48px; height: 72px; object-fit: cover; border-radius: 6px; display: block; background: #e5e7eb; }
.thumb.empty { display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 18px; }
.player { width: 100%; max-height: 420px; background: #000; border-radius: 8px; margin-bottom: 8px; }

/* бейджи: один вид для статусов роликов/постов (s-*), ответов (r-*), здоровья (h-*), телефонов (d-*), базы знаний (kb-*) */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #e5e7eb; color: #374151; vertical-align: middle; line-height: 1.5; }
.badge.s-new, .badge.r-pending, .badge.d-unauthorized, .badge.kb-policy, .badge.i-fallback, .badge.lvl-warning, .badge.w-interrupted { background: #fef3c7; color: #92400e; }
.badge.s-approved, .badge.kb-product { background: #dbeafe; color: #1e40af; }
.badge.s-processing, .badge.s-publishing, .badge.r-sending, .badge.kb-tone, .badge.w-running { background: #ede9fe; color: #5b21b6; }
.badge.s-scheduled, .badge.s-queued { background: #e0f2fe; color: #075985; }
.badge.s-done, .badge.s-published, .badge.s-ready, .badge.r-replied, .badge.h-ok, .badge.d-online, .badge.kb-faq, .badge.w-done { background: #dcfce7; color: #166534; }
.badge.s-failed, .badge.r-failed, .badge.h-suspicious, .badge.lvl-error, .badge.w-error { background: #fee2e2; color: #991b1b; }
.badge.s-rejected, .badge.s-cancelled, .badge.r-skipped { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }
.badge.s-pending, .badge.r-new, .badge.h-na, .badge.d-offline, .badge.i-failed, .badge.lvl-info, .badge.w-stopped { background: #f3f4f6; color: #6b7280; }

/* площадки (контраст с белым текстом ≥ 4,5:1) */
.pf { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #fff; background: #6b7280; vertical-align: middle; line-height: 1.5; }
.pf-youtube { background: #dc2626; }
.pf-instagram { background: #c026d3; }
.pf-tiktok { background: #111827; }
.pf-vk { background: #0062d6; }
.pf-dzen { background: #374151; }
.pf-telegram { background: #0284c7; }
.pf-mini { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; margin: 1px 2px 1px 0; color: #fff; background: #6b7280; }
.pf-mini.s-published { outline: 2px solid #16a34a; outline-offset: -2px; }
.pf-mini.s-failed { outline: 2px solid #dc2626; outline-offset: -2px; }
.pf-mini.s-queued { opacity: .8; }

/* вкладки и фильтры */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a { padding: 5px 11px; border-radius: 6px; color: var(--text); background: var(--card); border: 1px solid var(--border); font-size: 14px; }
.tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabs a small { color: inherit; opacity: .7; }
.tab-note { align-self: center; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; min-width: 0; }
.week-nav { display: flex; gap: 6px; flex-wrap: wrap; }

/* формы */
label { display: block; font-size: 14px; }
label small { display: block; }
.stack > label, .stack > div, .stack > h3, .stack > p, .stack > details, .stack > fieldset { margin-bottom: 12px; }
input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search],
input[type=date], input[type=month], input[type=time], input[type=datetime-local], input[type=file], textarea, select {
  width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; background: #fff; color: var(--text); margin-top: 4px;
}
input[type=text].short { width: 130px; margin: 0; display: inline-block; padding: 4px 8px; font-size: 13px; }
/* одинаковые списки в браузерах и в окне приложения: своя стрелка вместо системного вида */
select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6'/%3E%3C/svg%3E"); }
input:focus, textarea:focus, select:focus { outline: 2px solid #bfdbfe; border-color: var(--accent); }
textarea { resize: vertical; }
.inline { display: inline-block; margin: 0; }
.inline input[type=datetime-local] { width: auto; display: inline-block; margin: 0; padding: 4px 6px; font-size: 13px; }
.inline-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.inline-row input[type=text] { margin: 0; flex: 1 1 160px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check { display: inline-flex; align-items: center; gap: 6px; }
.check input { margin: 0; }
.check.disabled { color: var(--muted); }
.label { font-size: 14px; margin-bottom: 4px; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.props { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.props dt { color: var(--muted); }
.props dd { margin: 0; word-break: break-word; }
.pre { white-space: pre-wrap; }
fieldset.group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px 4px; margin: 0 0 14px; min-width: 0; }
fieldset.group legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
fieldset.group > label, fieldset.group > div, fieldset.group > p { margin-bottom: 12px; }

/* кнопки */
.btn { display: inline-block; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; line-height: 1.2; text-align: center; }
.btn:hover { background: #f3f4f6; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger { color: var(--danger); border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
button { font: inherit; }

/* календарь */
table.calendar td { min-width: 130px; height: 48px; }
table.calendar tr.today th { background: #eff6ff; color: var(--accent-dark); }
.cal-item { font-size: 12px; padding: 3px 6px; border-radius: 5px; margin-bottom: 3px; background: #f3f4f6; border-left: 3px solid #6b7280; }
.cal-item.s-published { border-left-color: var(--ok); }
.cal-item.s-failed { border-left-color: var(--danger); background: #fef2f2; }
.cal-item.s-queued { border-left-color: var(--accent); }
.cal-item.s-publishing { border-left-color: #7c3aed; }
.cal-item .small { color: var(--muted); }
.cal-list { display: none; }
.cal-list .cal-day { margin-bottom: 12px; }
.cal-list .cal-day h3 { margin: 0 0 6px; }
.cal-list .cal-day.today h3 { color: var(--accent-dark); }
.cal-list .cal-item { font-size: 14px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* прогрев */
.warmup-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin-bottom: 8px; }
.warmup-live { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.warmup-live:first-of-type { border-top: 0; }
.warmup-live-details { flex-basis: 100%; }
.warmup-details { display: grid; gap: 6px; margin: 8px 0 12px; }
.warmup-details ul { margin: 4px 0; padding-left: 18px; }
.warmup-count .unconfirmed { color: #b45309; font-weight: 600; }
.warmup-check { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.warmup-check:first-of-type { border-top: 0; }
.badge.a-confirmed { background: #dcfce7; color: #166534; }
.badge.a-unconfirmed { background: #fef3c7; color: #92400e; }
.badge.a-skipped, .badge.a-done { background: #f1f5f9; color: #475569; }
.warmup-log { max-height: 420px; overflow: auto; margin: 0; font-size: 13px; }
.warmup-form label[hidden], .btn[hidden] { display: none; }

/* элементы, видимые только в карточном виде таблиц на телефоне */
.cards-only { display: none; }

/* разное */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err-text { color: var(--danger); }
.note-text { color: var(--muted); }
.crumbs { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 7px 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }
details summary { cursor: pointer; }
.login-box { max-width: 380px; margin: 60px auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.login-box h1 { font-size: 20px; }
.login-box .btn { width: 100%; margin-top: 12px; }
.empty { color: var(--muted); padding: 14px 16px; background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); }

/* ---------------------------------------------------------------- аналитика */
.subnav { margin-bottom: 10px; }
.period-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.period-bar .tabs { margin: 0; }
.period-bar form { display: flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.period-bar input[type=date], .period-bar input[type=month] { width: auto; max-width: 150px; padding: 4px 6px; font: inherit; font-size: 13px; margin: 0; }
.period-label { color: var(--muted); font-size: 13px; }
.delta { display: inline-block; font-size: 12px; margin-top: 4px; }
.delta.up { color: #006300; }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--muted); }
.chart { display: block; width: 100%; max-width: 100%; height: auto; font-family: inherit; }
.chart .hit:hover { fill: rgba(37, 99, 235, .07); }
.chart .cell:hover { stroke: #1f2937; stroke-width: 1.5; }
.chart .bar:hover path, .chart .bar:hover rect:not(.hit) { opacity: .85; }
.spark { display: block; }
.chart-card h2 { margin-bottom: 4px; }
.chart-card .muted.small { margin-bottom: 8px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ladder { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.ladder li { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--muted); }
.ladder li b { display: block; color: var(--text); }
.ladder li.reached { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ladder li.reached b { color: #065f46; }
.ladder li.next { border-color: var(--accent); color: var(--accent-dark); }
.meter { height: 8px; background: #dbeafe; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.meter span { display: block; height: 100%; background: var(--accent); }
.bonus { font-size: 28px; font-weight: 600; }
.slot-rec { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.slot-rec form { margin: 0; }
.rec-time { font-size: 20px; font-weight: 600; }
.title-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-cell.wrap { white-space: normal; }
.best-cell { min-width: 220px; }
.slot-rec > div:first-child { flex: 1 1 260px; min-width: 0; }

/* ---------------------------------------------------------------- телефоны */
.phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
.phone-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.phone-tile.dim { opacity: .7; }
.phone-screen { position: relative; background: #0b0f19; aspect-ratio: 9 / 16; width: 100%; overflow: hidden; }
.phone-screen.big { aspect-ratio: auto; height: min(78vh, 960px); border-radius: 8px; }
.phone-canvas { display: block; width: 100%; height: 100%; object-fit: contain; cursor: crosshair; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.phone-canvas:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.phone-canvas.dim { opacity: .35; filter: grayscale(1); }
.phone-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #e5e7eb; font-size: 14px; background: rgba(11, 15, 25, .55); pointer-events: none; }
.phone-overlay[hidden] { display: none; }
.phone-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.phone-accounts { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; }
.phone-accounts a { text-decoration: none; }
.status-line { min-height: 20px; font-size: 13px; color: var(--muted); margin: 8px 0 4px; word-break: break-word; }
.status-line.ok { color: #166534; }
.status-line.err { color: var(--danger); }
.status-line.busy { color: var(--accent-dark); }
.device-layout { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 16px; align-items: start; }
.device-layout > * { min-width: 0; }
.device-panel .card { margin-bottom: 16px; }
.pad { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pad .btn { padding: 9px 6px; text-align: center; white-space: nowrap; }
.app-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.action-log li { padding: 4px 0; color: var(--muted); border-bottom: 0; }
.action-log li.err { color: var(--danger); }
.action-log li time { color: #6b7280; margin-right: 6px; font-variant-numeric: tabular-nums; }
.checks.column { flex-direction: column; gap: 6px; align-items: flex-start; }
.setup-hint ol { padding-left: 20px; margin: 0; }
.setup-hint li { margin-bottom: 10px; }
.setup-hint pre { margin: 6px 0; }

/* ---------------------------------------------------------------- ответы на комментарии */
table.replies td { font-size: 13px; }
table.replies tr.r-failed td { background: #fff7f7; }
table.replies tr.r-skipped { opacity: .65; }
table.replies td.wrap { min-width: 150px; }
table.replies .reply-text { white-space: pre-wrap; }
.reply-form { min-width: 220px; }
.reply-form textarea { margin: 0 0 6px; font-size: 13px; }
.reply-form > * { margin-bottom: 0; }
.reply-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.reply-actions form { margin: 0; }
.parse-cell { font-size: 12px; min-width: 150px; }
.parse-cell .line { margin-top: 3px; }
.parse-cell .lbl { color: var(--muted); }
ul.interactions li { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px 12px; align-items: start; }
ul.interactions .when { color: var(--muted); font-size: 12px; white-space: nowrap; }
ul.interactions .reply { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* phone operator */
.reply-op { border-left: 4px solid var(--accent); margin-bottom: 16px; }
.reply-op-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr); gap: 16px; align-items: start; }
.reply-op-grid > * { min-width: 0; }
.reply-op-author { margin: 4px 0; }
.reply-op-text { margin: 0 0 8px; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--border); border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.reply-op-draft textarea { width: 100%; margin: 4px 0 8px; }
.reply-op-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.reply-op-buttons form { margin: 0; }
.reply-op-steps { padding-left: 20px; margin: 0; }
.reply-op-steps li { margin-bottom: 4px; }
.reply-op-steps li.done { text-decoration: line-through; opacity: .6; }
.reply-op-steps li.current { color: var(--text); font-weight: 600; }

/* insights */
.card.insights { border-left: 4px solid #7c3aed; }
.card.insights .insight-meta { margin-top: -6px; }
.insight-list { margin: 6px 0 10px; padding-left: 22px; }
.insight-list li { margin-bottom: 6px; }
.card.insights h3 { margin: 10px 0 4px; font-size: 14px; color: var(--muted); }

/* knowledge */
table.kb td { font-size: 13px; vertical-align: top; }
table.kb td.kb-content { min-width: 220px; max-width: 420px; color: var(--muted); }
table.kb tr.dim td { opacity: .6; }

/* ai page */
.ai-off { border-left: 4px solid var(--danger); }
.ai-off h3 { margin-top: 0; }
.ai-off ol { padding-left: 20px; margin: 6px 0 0; }
.ai-off li { margin-bottom: 6px; }
.stat b.ai-model { font-size: 20px; padding-top: 4px; word-break: break-all; }
.key-mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ai-actions { flex-wrap: wrap; margin-bottom: 18px; }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ai-grid > * { min-width: 0; }
.ai-grid .card h3 { margin-top: 0; }
.ai-days { max-height: 360px; overflow-y: auto; }
table.ai-calls td { font-size: 13px; vertical-align: top; }
table.ai-calls tr.c-err td { background: #fff7f7; }

/* replies ai */
.ai-cell { min-width: 150px; font-size: 12px; }
.ai-cell .intent, .parse-cell .intent { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 600; background: #ede9fe; color: #5b21b6; white-space: nowrap; }
.intent.i-spam { background: #f3f4f6; color: #6b7280; }
.intent.i-praise { background: #dcfce7; color: #166534; }
.intent.i-complaint, .intent.i-returns { background: #fee2e2; color: #991b1b; }
.intent.i-link_request { background: #dbeafe; color: #1e40af; }
.ai-cell .conf, .parse-cell .conf { color: var(--muted); margin-left: 4px; white-space: nowrap; }
.ai-cell .human, .parse-cell .human { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; background: #fef3c7; color: #92400e; font-weight: 600; }
.ai-cell .facts, .parse-cell .facts { color: var(--muted); margin-top: 2px; }
.ai-cell .guards, .parse-cell .guards { color: #6b7280; margin-top: 2px; word-break: break-word; }
.example-form summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.example-form .stack { margin-top: 6px; min-width: 200px; }
.example-form select, .example-form textarea { font-size: 13px; margin: 0 0 6px; }
.example-form label.check { font-size: 13px; margin-bottom: 6px; }
.example-form.done summary { color: var(--muted); }
.phone-actions .btn { display: inline-block; margin-bottom: 4px; }
.ai-quality { margin-bottom: 16px; }
.ai-quality table { font-size: 13px; }
.ai-quality .ready td { background: #ecfdf5; }
.ai-quality .meter { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; min-width: 90px; }
.ai-quality .meter span { display: block; height: 100%; background: var(--ok); }
table.eval tr.eval-bad td { background: #fff7f7; }
table.eval code.bad { color: var(--danger); }

/* ---------------------------------------------------------------- планшет */
@media (max-width: 900px) {
  .device-layout, .reply-op-grid { grid-template-columns: 1fr; }
  .phone-screen.big { height: 70vh; }
}

/* ---------------------------------------------------------------- телефон (≤ 800 px) */
@media (max-width: 800px) {
  main { padding: 12px; overflow-x: clip; }
  .cols, .ai-grid { grid-template-columns: 1fr; }
  .props { grid-template-columns: 1fr; gap: 2px; }
  .props dt { margin-top: 6px; }
  .actions { white-space: normal; }
  .wrap, .title-cell { max-width: none; }
  .title-cell { white-space: normal; }
  h1 { font-size: 21px; margin-bottom: 12px; }
  .kpi b, .stat b { font-size: 22px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat, .kpi { padding: 10px 12px; }

  /* шапка: логотип + «Меню»; список разделов раскрывается под ними */
  .topbar { padding: 6px 12px; gap: 8px; }
  .brand { flex: 1; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
  .nav-toggle .bars { font-size: 18px; line-height: 1; }
  .topbar nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 6px; border-top: 1px solid var(--border); margin-top: 4px; }
  .topbar.open nav { display: flex; }
  .topbar nav a { min-height: 44px; display: flex; align-items: center; padding: 8px 10px; font-size: 16px; }
  .topbar nav a.nav-cta { margin-left: 0; margin-top: 6px; justify-content: center; }
  .logout { display: none; flex-basis: 100%; }
  .topbar.open .logout { display: block; }
  .topbar.open .logout .btn { width: 100%; min-height: 44px; }

  /* тап-цели ≥ 40 px */
  .btn, .btn.sm, .tabs a, select, .nav-toggle { min-height: 40px; }
  .btn.sm { padding: 9px 12px; font-size: 14px; }
  .tabs a { display: inline-flex; align-items: center; padding: 6px 12px; }
  .pager a { display: inline-block; padding: 10px 6px; }
  td > a:not(.btn), .plain li a:not(.btn), .crumbs a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
  td.card-title > a { display: inline; padding: 0; margin: 0; }
  input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search],
  input[type=date], input[type=month], input[type=time], input[type=datetime-local], textarea, select { font-size: 16px; min-height: 42px; }
  input[type=text].short { width: 100%; display: block; margin: 4px 0; padding: 8px 10px; font-size: 16px; }
  .inline input[type=datetime-local] { width: 100%; font-size: 16px; margin-bottom: 4px; }
  .inline, .actions form { display: block; margin-bottom: 4px; }
  .actions .btn { width: 100%; }
  .actions form.inline { width: 100%; }
  .check { min-height: 40px; }
  .check input[type=checkbox], .check input[type=radio] { width: 22px; height: 22px; }
  .example-form summary { padding: 10px 0; }
  details summary { min-height: 40px; display: flex; align-items: center; }
  .filters { gap: 8px; }
  .filters label { flex: 1 1 45%; }
  .filters .btn { flex: 1 1 100%; }
  .period-bar form input { flex: 1 1 120px; max-width: none; }
  .week-nav .btn { flex: 1 1 auto; }
  .row-between h1 { flex-basis: 100%; }
  .thumb-cell { width: auto; }

  /* таблицы: обычные прокручиваются внутри .table-wrap без сжатия букв, .cards превращаются в карточки */
  .table-wrap table:not(.cards) { min-width: 640px; }
  .table-wrap table.calendar { min-width: 720px; }
  table.cards { min-width: 0; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { padding: 10px 12px; border-bottom: 6px solid var(--bg); }
  table.cards tr:last-child { border-bottom: 0; }
  table.cards tbody tr:hover { background: transparent; }
  table.cards td { border: 0; padding: 3px 0; max-width: none; min-width: 0; white-space: normal; text-align: left; }
  table.cards td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
  table.cards td.card-title { font-size: 15px; padding-bottom: 6px; }
  table.cards td.card-title[data-label]::before { display: none; }
  table.cards td.actions { padding-top: 8px; }
  table.cards td.actions .btn { width: auto; min-width: 44%; }
  table.cards td.actions form.inline { width: auto; display: inline-block; }
  /* список роликов: миниатюра слева, всё остальное — колонкой справа */
  table.cards.contents tr { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; }
  table.cards.contents td { grid-column: 2; }
  table.cards.contents td.thumb-cell { grid-column: 1; grid-row: 1 / span 8; width: 56px; padding: 0; }
  table.cards.contents td.thumb-cell .thumb { width: 56px; height: 84px; }
  table.cards.contents td.card-title { padding-top: 0; }
  table.cards td:empty, table.cards td.cards-hide { display: none; }
  table.cards .cards-only { display: inline; }
  table.cards td .reply-form { min-width: 0; }
  table.cards td.parse-cell { font-size: 13px; }

  /* календарь: список по дням вместо сетки */
  .cal-desktop { display: none; }
  .cal-list { display: block; }

  /* телефоны */
  .phones { grid-template-columns: 1fr 1fr; gap: 10px; }
  .phone-screen.big { height: 62vh; }
  .pad { grid-template-columns: repeat(2, 1fr); }
  ul.interactions li { grid-template-columns: 1fr; }
  .stat b.ai-model { font-size: 17px; }
}
@media (max-width: 420px) {
  .phones { grid-template-columns: 1fr; }
  .stats, .kpis { grid-template-columns: 1fr 1fr; }
}