/* Starpets CRM — светлая тема RevenueHunters (токены из Projects/BloggerCrm/design/00-design-system.md) */
:root {
  --bg: #f6f5f2; --surface: #ffffff; --surface-rail: #ffffff; --surface-head: #faf9f6; --surface-soft: #f0eee9;
  --border: #ebe8e1; --border-strong: #dcd8d0; --text: #1c2430; --text-2: #4a5563; --muted: #6b7583; --muted-2: #9aa4b1;
  --brand: #0f7d72; --brand-soft: #eaf3f1; --brand-border: #cfe4df; --on-tone: #ffffff; --row-line: #f2f0ea;
  --card-shadow: 0 1px 2px rgba(28,36,48,.04);
  --bad: #c43f4f; --bad-chip: #fbeaec; --ok: #9f6900; --ok-chip: #f6efe0; --good: #12805f; --good-chip: #e6f2ec;
  --yt: #c4302b; --yt-chip: #fbecea; --email: #2f5fb3; --email-chip: #e9effa; --tt: #1c2430; --tt-chip: #eceef1;
  --ds: #5865f2; --ds-chip: #eceefe;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --panel-w: max(460px, 50vw);    /* 17.10 (ночь, владелец: «чат открывать шире, на пол экрана»); уже 460 px не делаем */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button, select, textarea, input { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

.loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand); z-index: 50; transition: width .4s ease, opacity .4s; opacity: 0; }
.loadbar.on { width: 70%; opacity: 1; }

.app { display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 100vh; }
.app.with-panel { grid-template-columns: 76px minmax(0, 1fr) var(--panel-w); }

/* --- рейл --- */
/* 18.10 (владелец): левое меню — как в кабинете Kurilo (RevenueHunters): размеры и отступы оттуда дословно */
.rail { background: var(--surface-rail); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 14px 0 16px; }
/* 18.10: фигурка без подложки — у картинки свой прозрачный фон, рамки вокруг быть не должно (владелец) */
.logo { width: 38px; height: 38px; margin-bottom: 18px; flex: none; object-fit: contain; }
.nav { display: flex; flex-direction: column; gap: 6px; flex: 1; width: 100%; padding: 0 8px; }
.nav-item { position: relative; width: 100%; border: 0; background: none; border-radius: 12px; padding: 9px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; font-family: inherit; }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; text-align: center; line-height: 1.3; }
.nav-item:hover { background: var(--surface-soft); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--bad); color: #fff; font: 700 9.5px/16px var(--mono); font-style: normal; text-align: center; }

/* --- контент --- */
.main { min-width: 0; display: flex; flex-direction: column; padding: 26px 30px 0; overflow: hidden; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); }
h1 { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.head-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sort { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
select, .btn { height: 32px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); padding: 0 10px; }
/* 18.10: у выпадающих списков своя стрелка — внутри поля, с отступом от края. Родная стрелка браузера стоит вплотную к
   правому краю и у округлых «таблеток» фильтров вылезала за рамку. Фон в классах ниже — только background-color:
   сокращённое background стёрло бы стрелку. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236b7583' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px;
  padding-right: 28px; cursor: pointer;
}
select:focus, textarea:focus, .btn:focus-visible { outline: none; border-color: var(--brand); }
.btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-tone); }
.btn.primary:hover { filter: brightness(1.06); color: var(--on-tone); }
.btn.small { height: 26px; font-size: 11.5px; padding: 0 9px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.status-pill { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-2); }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.status-pill.ok .dot { background: var(--good); box-shadow: 0 0 0 3px var(--good-chip); }
.status-pill.busy .dot { background: var(--brand); animation: pulse 1.2s ease-in-out infinite; }
.status-pill.err .dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-chip); }
@keyframes pulse { 50% { opacity: .35; } }

.subbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 12px; font-size: 12px; color: var(--muted); }
.subbar .sep { width: 1px; height: 16px; background: var(--border-strong); margin: 0 4px; }
.subbar .note { color: var(--muted-2); }
.banner { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--bad-chip); color: var(--bad); font-size: 12.5px; }

/* --- чипы --- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: var(--surface-soft); color: var(--text-2); }
.chip .ico { width: 11px; height: 11px; }
.src-yt_comment { background: var(--yt-chip); color: var(--yt); }
.src-email { background: var(--email-chip); color: var(--email); }
.src-tt_comment { background: var(--tt-chip); color: var(--tt); }
.src-discord { background: var(--ds-chip); color: var(--ds); }
.sc-enthusiasm { background: var(--good-chip); color: var(--good); }
.sc-neutral { background: var(--surface-soft); color: var(--text-2); }
.sc-refusal { background: var(--ok-chip); color: var(--ok); }
.sc-negative_refusal { background: var(--bad-chip); color: var(--bad); }
.tg-discord { background: var(--ds-chip); color: var(--ds); }
.tg-other_contact { background: var(--ok-chip); color: var(--ok); }
.tg-future_maybe { background: var(--surface-soft); color: var(--text-2); }
.tg-negative { background: var(--bad-chip); color: var(--bad); }
.tg-good_result, .tg-working { background: var(--good-chip); color: var(--good); }
.tg-not_responding { background: var(--ok-chip); color: var(--ok); }
.tg-stopped { background: var(--bad-chip); color: var(--bad); }
.chip.wait { background: var(--bad-chip); color: var(--bad); }
.chip.fresh { background: var(--brand); color: var(--on-tone); }
.chip.manual { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); }
.chip.pending { background: var(--brand-soft); color: var(--brand); }
.chip.pending::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--brand); border-right-color: transparent; animation: spin .8s linear infinite; }
.chip.count { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-weight: 500; }
.chip.count b { font-family: var(--mono); font-weight: 700; color: var(--text); }
.chip.count.zero { opacity: .55; }

/* --- доска --- */
.view { flex: 1; min-height: 0; }
.board { height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 16px; }
.col { background: var(--surface-soft); border-radius: 15px; padding: 10px; display: flex; flex-direction: column; min-height: 0; border: 1.5px solid transparent; }
.col.drop { background: var(--brand-soft); border: 1.5px dashed var(--brand-border); }
.col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 9px; }
.col-title { font-size: 13px; font-weight: 600; }
.col-count { font: 700 13px var(--mono); color: var(--muted); }
.col-body { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 30px; padding: 1px; }
.col-empty { text-align: center; font-size: 11px; color: var(--muted-2); padding: 10px 0 6px; }
.col.refused .col-title { color: var(--muted); }
.col.refused .card { opacity: .82; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 11px 9px; box-shadow: var(--card-shadow); cursor: pointer; display: flex; flex-direction: column; gap: 7px; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--border-strong); box-shadow: 0 3px 10px rgba(28,36,48,.06); }
.card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.card.waiting { box-shadow: inset 3px 0 0 var(--bad), var(--card-shadow); }
.card.dragging { opacity: .5; }
.card.fresh-anim { animation: freshIn 2.4s ease-out 1; }
@keyframes freshIn { 0% { box-shadow: 0 0 0 3px rgba(15,125,114,.45); } 100% { box-shadow: 0 0 0 0 rgba(15,125,114,0); } }
.card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-age { font: 500 11px var(--mono); color: var(--muted-2); white-space: nowrap; }
.card-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.views { display: inline-flex; align-items: center; gap: 3px; font: 600 11px var(--mono); color: var(--text-2); }
.views svg { width: 12px; height: 12px; fill: none; stroke: var(--muted-2); stroke-width: 2; }
.card-reason { font-size: 11.5px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.skel { height: 74px; border-radius: 12px; background: linear-gradient(90deg, var(--surface) 25%, var(--bg) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- задачи --- */
.tasks { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 14px; padding-bottom: 16px; }
.tasks .col-body { gap: 10px; }
.task { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--card-shadow); }
.task.open.reply { box-shadow: inset 3px 0 0 var(--bad), var(--card-shadow); }
.task.open.discord { box-shadow: inset 3px 0 0 var(--ds), var(--card-shadow); }
.task.done { opacity: .78; }
.task-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ttype { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ttype.reply { color: var(--bad); }
.ttype.discord { color: var(--ds); }
.ttype.contact { color: var(--ok); }
.task.done .ttype { color: var(--muted); }
.task-lead { display: flex; align-items: center; gap: 6px; font-weight: 600; flex-wrap: wrap; }
.task-ctx { font-size: 12px; color: var(--text-2); background: var(--surface-head); border: 1px solid var(--row-line); border-radius: 9px; padding: 7px 9px; word-break: break-word; }
.task-ctx .copy { margin-left: 6px; }
.task-note { font-size: 11.5px; color: var(--muted); }
.task-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* --- правая панель: переписка --- */
.panel { border-left: 1px solid var(--border); background: var(--surface); min-width: 0; height: 100vh; }
.panel-inner { height: 100%; display: flex; flex-direction: column; }
.ph { padding: 16px 18px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.ph-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ph-name { font-size: 17px; font-weight: 700; line-height: 1.25; word-break: break-word; }
.ph-sub { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.icon-btn { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; flex: none; }
.icon-btn:hover { background: var(--surface-soft); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ph-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ph-where { font-size: 12px; color: var(--text-2); background: var(--surface-head); border: 1px solid var(--row-line); border-radius: 10px; padding: 8px 10px; }
.ph-where b { color: var(--text); }
.ph-ai { font-size: 12px; color: var(--text-2); border-radius: 10px; padding: 8px 10px; background: var(--brand-soft); border: 1px solid var(--brand-border); }
.ph-ai .lbl { font-weight: 600; color: var(--brand); }
.ph-ai .notes { color: var(--muted); margin-top: 2px; font-size: 11.5px; }
.stage-select { height: 26px; font-size: 12px; border-radius: 8px; padding: 0 24px 0 8px; background-position: right 7px center; }
.ph-tasks { display: flex; flex-direction: column; gap: 6px; }
.ph-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 6px 8px; border-radius: 9px; background: var(--bad-chip); color: var(--bad); }
.ph-task.discord { background: var(--ds-chip); color: var(--ds); }
.ph-task.contact { background: var(--ok-chip); color: var(--ok); }

.thread { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; background: var(--bg); }
.day { align-self: center; font-size: 10.5px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 2px; }
.msg { max-width: 86%; display: flex; flex-direction: column; gap: 3px; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 8px 11px; border-radius: 13px; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.45; }
.msg.in .bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 4px; }
.msg.out .bubble { background: var(--brand-soft); border: 1px solid var(--brand-border); border-top-right-radius: 4px; }
.msg.failed .bubble { background: var(--bad-chip); border-color: #f2c9cf; }
.msg.notext .bubble { font-style: italic; color: var(--muted); }
.msg.crm .bubble { border-style: dashed; }
.bubble .subj { font-weight: 600; margin-bottom: 3px; }
.meta { font-size: 10.5px; color: var(--muted-2); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.meta .ch { font-weight: 600; }
.meta .ch.yt_comment { color: var(--yt); }
.meta .ch.email { color: var(--email); }
.meta .ch.discord { color: var(--ds); }
.meta .warn { color: var(--bad); font-weight: 600; }
.meta .seen { color: var(--good); }
.meta .unseen { color: var(--bad); }
.meta .ai-mark { color: var(--muted-2); }
.event { align-self: center; max-width: 92%; text-align: center; font-size: 11.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; }
.event.transition { background: var(--ds-chip); color: var(--ds); border-color: transparent; font-weight: 600; }
.event.transition.email { background: var(--email-chip); color: var(--email); }
.event.start { background: var(--surface-head); border-style: dashed; border-radius: 10px; color: var(--muted); }
.event.after { border-style: dashed; border-radius: 10px; color: var(--muted); background: transparent; }

.composer { border-top: 1px solid var(--border); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 7px; background: var(--surface); }
.composer-to { font-size: 11.5px; color: var(--muted); }
.composer-to b { color: var(--text-2); }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 9px 11px; background: var(--surface); line-height: 1.4; }
.composer-note { font-size: 10.5px; color: var(--muted-2); }

/* --- перевод переписки (17.10) --- */
.ph-top .tr-all { margin-left: auto; flex: none; }
.lnk { border: 0; background: none; padding: 0; color: var(--brand); cursor: pointer; font-size: 10.5px; }
.lnk:hover { text-decoration: underline; }
.crm-src { margin-top: 4px; font-size: 11px; color: var(--muted); }

/* --- помощник ответа: черновик → язык блогера + риск фильтра YouTube (17.10) --- */
.draft { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--brand-border); background: var(--brand-soft); border-radius: 11px; padding: 9px 10px; }
.draft-head { font-size: 12px; color: var(--text-2); }
.draft textarea { resize: vertical; min-height: 54px; max-height: 200px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 10px; background: var(--surface); line-height: 1.4; }
.draft-ru { font-size: 12px; color: var(--text-2); }
.draft-ru .lbl, .draft-safer .lbl { font-weight: 600; color: var(--brand); }
.draft-ru .stale { color: var(--ok); }
.draft-err { font-size: 12px; color: var(--bad); }
.risk { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.risk.low { background: var(--good-chip); color: var(--good); }
.risk.medium { background: var(--ok-chip); color: var(--ok); }
.risk.high { background: var(--bad-chip); color: var(--bad); }
.risk-na { font-size: 11px; color: var(--muted); }
.risk-why { margin: 0; padding-left: 18px; font-size: 11.5px; color: var(--text-2); }
.draft-safer { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: var(--surface); border: 1px dashed var(--brand-border); border-radius: 9px; padding: 7px 9px; font-size: 12px; }
.draft-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 12.5px; z-index: 60; box-shadow: 0 8px 22px rgba(16,22,30,.24); }

/* --- мобайл (<860px) --- */
@media (max-width: 859px) {
  .app, .app.with-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail { flex-direction: row; padding: 8px 12px; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; width: auto; }
  .main { padding: 14px 12px 0; }
  .board { grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  .col { scroll-snap-align: start; }
  .tasks { grid-template-columns: 1fr; overflow-y: auto; }
  .panel { position: fixed; inset: 0; z-index: 40; height: 100%; }
}

/* --- качество переписки --- */
#view-quality { overflow-y: auto; }
.quality { padding: 4px 2px 32px; max-width: 1180px; }
.q-empty { color: var(--muted); padding: 40px 0; }
.q-intro { color: var(--text-2); font-size: 12.5px; line-height: 1.55; margin: 2px 0 14px; }
.q-at { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); margin-left: 6px; }
.q-cards { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 14px; margin-bottom: 12px; }
.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--card-shadow); }
.q-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.q-card-title { font-weight: 700; font-size: 13px; }
.q-card-sub { color: var(--muted); font-size: 11.5px; }
.q-big { display: flex; align-items: baseline; gap: 10px; }
.q-big b { font-size: 30px; line-height: 1.1; color: var(--text); }
.q-big span { color: var(--text-2); font-size: 12px; }
.q-rescue .q-big b { color: var(--good); }
.q-n { color: var(--muted); font-size: 11.5px; margin: 6px 0 8px; }
.q-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-soft); gap: 2px; }
.q-bar i { display: block; height: 100%; }
.q-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; font-size: 11.5px; color: var(--text-2); }
.q-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.q-legend .muted { color: var(--muted); }
.q-note { margin-top: 10px; font-size: 11.5px; color: var(--ok); background: var(--ok-chip); border-radius: 8px; padding: 7px 9px; }
.q-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--text-2); margin: 6px 0; }
.q-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 14px 0 18px; font-size: 12px; }
.q-table th { text-align: left; font-weight: 600; color: var(--muted-2); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-head); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.q-table td { padding: 7px 10px; border-bottom: 1px solid var(--row-line); }
.q-table tr.fix td { background: var(--brand-soft); }
.q-table td.good { color: var(--good); font-weight: 600; }
.q-table td.muted { color: var(--muted); }
.chip.q-fix { background: var(--brand); color: var(--on-tone); }
.q-sub { font-weight: 700; margin: 4px 0 8px; }
.q-exs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-ex { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 12px; }
.q-ex.link { cursor: pointer; }
.q-ex.link:hover { border-color: var(--brand-border); }
.q-ex-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.q-ex-top .meta { color: var(--muted); font-size: 11px; }
.q-ex-msg { color: var(--text); }
.q-ex-reply { color: var(--text-2); margin-top: 4px; }
.q-ex-why { color: var(--muted); margin-top: 5px; font-size: 11.5px; }
.chip.q-ok { background: var(--good-chip); color: var(--good); }
.chip.q-off { background: var(--ok-chip); color: var(--ok); }
.chip.q-hidden { background: var(--bad-chip); color: var(--bad); }
.chip.q-missed { background: var(--surface-soft); color: var(--text-2); }
@media (max-width: 1100px) { .q-cards { grid-template-columns: 1fr; } .q-exs { grid-template-columns: 1fr; } }

/* --- ИИ-пайплайн: последний обмен на карточке --- */
.board.ai { grid-auto-columns: minmax(260px, 1fr); }
.snip { font-size: 11.5px; line-height: 1.35; color: var(--text-2); margin-top: 6px; padding: 5px 7px; border-radius: 7px;
  background: var(--surface-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.snip b { color: var(--text); font-weight: 600; }
.snip.out { background: var(--brand-soft); }
.snip.out.bad { background: var(--bad-chip); color: var(--bad); }
.snip.out.none { background: transparent; color: var(--muted); font-style: italic; padding-top: 0; padding-bottom: 0; }
.snip-flag { font-weight: 600; white-space: nowrap; }
.chip.ai-st { background: var(--surface-soft); color: var(--text-2); }
.chip.ai-has_reply { background: var(--bad-chip); color: var(--bad); }
.chip.ai-replied { background: var(--good-chip); color: var(--good); }
.chip.ai-no_reply { background: var(--ok-chip); color: var(--ok); }

/* --- панель лида: сворачиваемый верхний блок --- */
.ph-more { display: flex; flex-direction: column; gap: 8px; }
.ph-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--muted); font: 600 11.5px var(--sans);
  padding: 2px 0; cursor: pointer; }
.ph-toggle:hover { color: var(--brand); }
.ph-toggle-tasks { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--bad-chip); color: var(--bad); }

/* --- неудачные попытки комментария подряд — одной строкой --- */
.failed-run { align-self: stretch; border: 1px dashed var(--border-strong); border-radius: 9px; background: var(--surface-soft);
  padding: 6px 10px; font-size: 12px; color: var(--muted); }
.failed-run summary { cursor: pointer; color: var(--bad); }
.failed-run[open] { display: flex; flex-direction: column; gap: 8px; }

/* --- задачи: цитата блогера открывает переписку --- */
.task-ctx.link { cursor: pointer; }
.task-ctx.link:hover { border-color: var(--brand-border); }
.task-ctx .open-link { color: var(--brand); font-weight: 600; white-space: nowrap; font-size: 11.5px; }

/* --- фильтры над пайплайнами --- */
.filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: -4px 0 12px; }
.fgroup { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.flabel { font-size: 10.5px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.fchip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); border-radius: 99px; padding: 7px 13px; font: 600 11.5px var(--sans); cursor: pointer; white-space: nowrap; }
.fchip:hover { border-color: var(--brand-border); }
.fchip.on { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand); }
.fchip.reset { color: var(--bad); border-color: var(--bad-chip); }
.fsel { height: auto; border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--muted); border-radius: 99px; padding: 6px 30px 6px 13px; font: 600 11.5px var(--sans); cursor: pointer; background-position: right 12px center; }
.fsel.on { background-color: var(--brand-soft); border-color: var(--brand-border); color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230f7d72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fsearch { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 10px; padding: 7px 12px; font: 500 12.5px var(--sans); }
.fsearch { width: 200px; }
.fcount { font-size: 11.5px; color: var(--muted); }

/* --- прогноз ответа фермы --- */
.fplan { font-size: 11.5px; margin-top: 6px; padding: 4px 7px; border-radius: 7px; line-height: 1.3; }
.fplan.will { background: var(--good-chip); color: var(--good); }
.fplan.wont { background: var(--ok-chip); color: var(--ok); }
.fplan.clash { background: var(--bad-chip); color: var(--bad); }
.ph-row .fplan { margin-top: 0; }

/* --- очередь отправки (18.10): только существующие переменные темы, как у остальных блоков --- */
.banner.send-off { background: var(--ok-chip); color: var(--ok); }

/* плашки статусов очереди — подписи из контракта, цвета как у чипов скоринга */
.chip.ob-queued { background: var(--brand-soft); color: var(--brand); }
.chip.ob-held { background: var(--ok-chip); color: var(--ok); }
.chip.ob-handed_off { background: var(--surface-soft); color: var(--text-2); }
.chip.ob-sent { background: var(--good-chip); color: var(--good); }
.chip.ob-failed { background: var(--bad-chip); color: var(--bad); }
.chip.ob-skipped { background: var(--bad-chip); color: var(--bad); }
.chip.ob-canceled { background: var(--surface-soft); color: var(--muted-2); }
.chip.ob-p1 { background: var(--bad-chip); color: var(--bad); }
.chip.ob-p2 { background: var(--surface-soft); color: var(--text-2); }
.chip.ob-p3 { background: var(--surface-soft); color: var(--muted-2); }
.chip.ob-ch-yt_comment { background: var(--yt-chip); color: var(--yt); }
.chip.ob-ch-email { background: var(--email-chip); color: var(--email); }
.chip.ob-ch-discord { background: var(--ds-chip); color: var(--ds); }
.chip.ob-ch-tt_comment { background: var(--tt-chip); color: var(--tt); }
.ob-why { font-size: 11.5px; color: var(--bad); }
.ob-due { font-size: 11.5px; color: var(--text-2); }
.ob-prio-sel { height: 24px; font-size: 11.5px; border-radius: 7px; padding: 0 22px 0 7px; background-position: right 6px center; background-size: 11px 11px; }
.ob-off { color: var(--ok); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* блок «Очередь» в панели лида */
.ob-panel { border-top: 1px solid var(--border); padding: 9px 14px 10px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); max-height: 36vh; overflow-y: auto; flex: none; }
.ob-panel-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ob-item { border: 1px solid var(--border); border-radius: 11px; padding: 8px 10px; background: var(--surface-head);
  display: flex; flex-direction: column; gap: 5px; }
.ob-item.queued { box-shadow: inset 3px 0 0 var(--brand); }
.ob-item.held { box-shadow: inset 3px 0 0 var(--ok); }
.ob-item.held .ob-why { color: var(--ok); }
.ob-item.failed, .ob-item.skipped { box-shadow: inset 3px 0 0 var(--bad); }
.ob-item.sent, .ob-item.canceled { opacity: .78; }
.ob-item-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ob-text { font-size: 12px; color: var(--text-2); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ob-target { font-size: 11px; color: var(--muted); }
.ob-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* раздел «Очередь» в левом меню: таблица, сгруппированная по аккаунту */
#view-outbox { overflow-y: auto; }
.outbox { padding: 2px 2px 28px; max-width: 1280px; display: flex; flex-direction: column; gap: 16px; }
.ob-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; }
.ob-group-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 13px; background: var(--surface-head); border-bottom: 1px solid var(--border); }
.ob-acc { font-weight: 700; font-size: 13px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ob-limit { font-size: 11.5px; color: var(--text-2); }
.ob-limit b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ob-limit b.zero { color: var(--bad); }
.ob-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.ob-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; padding: 7px 10px;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.ob-table td { padding: 7px 10px; border-bottom: 1px solid var(--row-line); vertical-align: top; word-break: break-word; }
.ob-table tbody tr:last-child td { border-bottom: 0; }
.ob-table td.ob-lead { font-weight: 600; cursor: pointer; }
.ob-table td.ob-lead:hover { color: var(--brand); }
.ob-table td.ob-lead .chip { margin-left: 5px; }
.ob-table td.ob-cell-text { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-table td.ob-acts { text-align: right; }
.ob-table td.ob-acts .btn { margin: 0 0 3px 4px; }
.ob-table tr.ob-sent, .ob-table tr.ob-canceled { opacity: .78; }
.ob-sub { font-size: 10.5px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-empty { padding: 13px; color: var(--muted); font-size: 12px; }
.ob-done { border-top: 1px solid var(--row-line); padding: 7px 12px; font-size: 12px; color: var(--muted); }
.ob-done summary { cursor: pointer; }
.ob-done[open] { padding-bottom: 0; }

/* приоритет в карточке черновика */
.ob-draft-prio { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); margin-right: auto; }

@media (max-width: 859px) {
  .ob-table { table-layout: auto; }
  .ob-table td.ob-cell-text { white-space: normal; -webkit-line-clamp: 2; }
  .ob-group-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* --- 18.10: входы, роли и раздел «Менеджеры» --- */
.rail-user { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font: 700 11px/1 var(--mono); }
.rail-name { font-size: 9px; font-weight: 600; color: var(--text-2); max-width: 66px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.mgr { background: var(--brand-soft); color: var(--brand); }
.chip.mgr.none { background: var(--bad-chip); color: var(--bad); }
.banner.warn { background: var(--ok-chip); color: var(--ok); }

#view-managers { overflow-y: auto; }
.managers { padding: 2px 2px 32px; max-width: 1440px; }
.mg-wrap { overflow-x: auto; }
.mg-table { margin-top: 4px; white-space: nowrap; }
.mg-table th.num, .mg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mg-table th.st { max-width: 86px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.mg-table td.st { color: var(--text-2); }
.mg-table td .muted, .mg-table td.muted { color: var(--muted-2); }
.mg-table td .bad { color: var(--bad); font-weight: 700; }
.mg-table .mg-cap { color: var(--muted-2); }
.mg-table .mg-n { color: var(--muted-2); font-size: 10.5px; margin-left: 5px; }
.mg-table .mg-name { font-weight: 600; }
.mg-table tr.me td { background: var(--brand-soft); }
.mg-table tr.off td { color: var(--muted); }
.mg-table tr.none td { background: var(--surface-head); color: var(--text-2); }
.mg-table tr.total td { font-weight: 700; border-top: 1px solid var(--border-strong); border-bottom: 0; }
.mg-table tr.link { cursor: pointer; }
.mg-table tr.link:hover td { background: var(--surface-soft); }
.mg-admin { margin-top: 6px; }
.mg-cap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
.mg-cap-row input { width: 74px; height: 26px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; }
.mg-cap-row .muted { color: var(--muted); font-size: 11.5px; }
.mg-acc td { vertical-align: middle; }
.mg-acc .mg-name-in { height: 26px; width: 180px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; margin-right: 6px; }
.mg-acc .muted { color: var(--muted); }

.modal { position: fixed; inset: 0; background: rgba(16, 22, 30, .36); display: grid; place-items: center; z-index: 70; }
.modal-card { width: min(440px, calc(100vw - 32px)); background: var(--surface); border-radius: 14px; padding: 18px 20px; box-shadow: 0 18px 48px rgba(16,22,30,.28); }
.modal-pass { font-size: 22px; font-weight: 700; letter-spacing: .04em; padding: 12px 14px; margin: 10px 0; border-radius: 10px; background: var(--surface-soft); text-align: center; user-select: all; }

/* --- вход: дословно как в кабинетах RevenueHunters (Kurilo, «единый дизайн отчётов»); знак — персонаж Starpets --- */
.login{position:fixed;inset:0;display:grid;grid-template-columns:380px 1fr;z-index:60;background:#10141c}
.login-aside{background:linear-gradient(160deg,#14181f,#1c2a2b);color:#fff;padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between}
.login-brand{font-size:15px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.login-logo{width:32px;height:32px;object-fit:contain}
.login-form-wrap{display:grid;place-items:center;padding:24px}
.login-form{width:100%;max-width:320px;display:grid;gap:12px}
.login-form h2{font-size:22px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;color:#eef2f7}
.login-input{width:100%;padding:11px 13px;border-radius:11px;background:#0b0e13;border:1px solid #2d3543;color:#eef2f7;font-family:inherit;font-size:12.5px;box-sizing:border-box}
.login-input:focus{outline:2px solid rgba(76,207,224,.4);outline-offset:-1px}
.login-btn{border:none;border-radius:10px;padding:11px 18px;background:#4ccfe0;color:#10141c;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.login-btn:disabled{opacity:.6;cursor:default}
.login-err{font-size:11.5px;color:#ff626d;min-height:15px}
.login-hint{font-size:11.5px;color:#5f6a78;line-height:1.6}
.login-input::placeholder{color:#5f6a78}
@media (max-width:760px){.login{grid-template-columns:1fr}.login-aside{display:none}}

/* --- 18.10 (вечер): язык интерфейса (static/i18n.js) --- */
/* английская страница скрыта, пока статичная разметка не переведена (без вспышки русского текста) */
html.i18n-pending body { visibility: hidden; }
.lang-switch { display: flex; gap: 2px; padding: 2px; margin: 0 0 12px; border-radius: 9px; background: var(--surface-soft); flex: none; }
.lang-switch button { border: 0; background: none; border-radius: 7px; padding: 3px 7px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); cursor: pointer; }
.lang-switch button:hover { color: var(--text); }
.lang-switch button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(28,36,48,.1); }
.login-form-wrap { position: relative; }
.login .lang-switch { position: absolute; top: 22px; right: 24px; margin: 0; background: rgba(255,255,255,.06); }
.login .lang-switch button { color: #8b96a5; }
.login .lang-switch button:hover { color: #eef2f7; }
.login .lang-switch button.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
@media (max-width: 859px) { .app .lang-switch { margin: 0 8px; align-self: center; } }

/* 18.10: правила сообщений и скрытый ответ менеджера */
.rules { padding: 4px 2px 32px; max-width: 1180px; }
.r-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; align-items: start; }
.r-big { display: flex; align-items: baseline; gap: 10px; color: var(--text-2); font-size: 12.5px; }
.r-big b { font-size: 30px; color: var(--bad); }
.r-sub { color: var(--muted); font-size: 12px; margin: 4px 0 6px; }
.r-advice { font-weight: 600; font-size: 13px; margin: 2px 0 14px; }
.r-scroll { max-height: 560px; overflow: auto; }
.r-scroll .q-table { margin-top: 0; }
.q-table tr.bad td { color: var(--bad); }
.rules-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
.rule { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--card-shadow); }
.rule-dont { font-weight: 700; color: var(--bad); font-size: 13px; }
.rule-why { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.rule-do { font-size: 12.5px; color: var(--good); font-weight: 600; }
.task.open.rewrite { box-shadow: inset 3px 0 0 var(--bad), var(--card-shadow); }
.ttype.rewrite { color: var(--bad); }
.task-why { font-size: 12px; color: var(--text-2); background: var(--bad-chip); border-radius: 9px; padding: 7px 9px; }
.task-why ul { margin: 4px 0 0 16px; padding: 0; }
.task-advice { margin-top: 5px; font-weight: 600; color: var(--text); }
.sent-mark { color: var(--good); }
@media (max-width: 1100px) { .r-grid, .rules-list { grid-template-columns: 1fr; } }