/* Accounts: restrained product UI. Цвета — из общих токенов style.css:
   обе темы (тёмная и светлая) работают без своих палиток. */
.accounts-screen {
  --account-surface: var(--card);
  --account-line: var(--line);
  --account-ink: var(--text);
  --account-soft: var(--tint);
  --account-accent: var(--accent);
  color: var(--account-ink);
}
.accounts-screen .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.outreach-nav { display: flex; gap: 24px; overflow-x: auto; padding: 0 0 16px; margin-bottom: 28px; border-bottom: 1px solid var(--account-line); }
.outreach-nav a { flex: 0 0 auto; text-decoration: none; font-size: var(--s1); color: var(--muted); padding: 4px 0; }
.outreach-nav a[aria-current] { color: var(--account-accent); font-weight: 650; }
.accounts-heading { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.accounts-heading h1 { font-size: var(--s4); font-weight: 600; letter-spacing: -.2px; }
.accounts-heading h1 .count { color: var(--faint); font-weight: 500; margin-left: 6px; }
.eyebrow { font-size: 10px; letter-spacing: 1.4px; color: var(--muted); font-weight: 650; }
.accounts-heading-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.archive-link { text-decoration: none; color: var(--muted); font-size: var(--s1); }
.archive-link span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.service-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; font-size: var(--s1); }
.service-strip::before { content: ""; width: 1px; height: 16px; background: var(--account-line); }
.service-strip > span:first-of-type { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
/* Полоска сетей: тот же .summary, что у диалогов, со значком канала. */
.channel-strip { margin-bottom: 14px; }
.channel-strip a { display: inline-flex; align-items: center; gap: 6px; }
.channel-strip .icon { color: var(--muted); }
.channel-strip a.on .icon { color: var(--account-accent); }
.accounts-list { border-bottom: 1px solid var(--account-line); }
.account-table { width: 100%; table-layout: auto; }
.account-table thead th { background: none; font-size: 11px; font-weight: 550; text-transform: none; letter-spacing: 0; color: var(--muted); padding: 0 10px 7px; }
.account-table td { padding: 10px; vertical-align: middle; border-color: var(--account-line); font-size: var(--s1); }
.account-table td:first-child { padding-left: 0; }
.account-table tbody tr:last-child td { border-bottom: 0; }
.account-table .account-identity { min-width: 200px; }
.account-identity > span { display: inline-flex; vertical-align: top; }
.account-mark { align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--account-soft); color: var(--account-accent); margin-right: 9px; }
.account-name { flex-direction: column; gap: 1px; max-width: 240px; }
.account-name b { font-size: var(--s2); font-weight: 600; overflow-wrap: anywhere; }
.account-name > .muted { font-size: 12px; }
.account-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 550; min-height: 22px; }
.state-invalid_session, .state-frozen, .state-proxy_down { color: var(--bad); }
.state-connected { color: var(--account-accent); }
/* Код привязки WhatsApp: его переписывают на телефон, поэтому крупно и моноширинно. */
.pairing { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pairing code { font: 600 18px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; color: var(--account-accent); }
.pairing span { color: var(--muted); font-size: 11px; max-width: 260px; }
.account-progress { display: block; font-size: 12px; margin-top: 4px; max-width: 280px; }
.code-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.code-form input { width: 110px; font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.code-form .muted { flex-basis: 100%; font-size: 11px; }
.creds-editor summary { list-style: none; cursor: pointer; display: block; padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--muted); }
.creds-editor summary:hover { background: var(--account-soft); color: inherit; }
.creds-editor summary::-webkit-details-marker { display: none; }
.creds-form { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 8px; min-width: 260px; }
.creds-form textarea { width: 100%; box-sizing: border-box; }
.creds-form textarea { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.account-note { display: inline; margin-left: 8px; max-width: 300px; }
.account-note summary, .proxy-editor > summary { list-style: none; font-size: 12px; color: var(--muted); cursor: pointer; width: fit-content; text-decoration: underline dotted var(--line-ctl); text-underline-offset: 3px; }
.account-note summary::-webkit-details-marker, .proxy-editor summary::-webkit-details-marker { display: none; }
.account-note p { color: var(--muted); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.proxy-geo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--s1); font-weight: 550; min-height: 22px; }
.country-flag { display: inline-block; flex: 0 0 auto; width: 22px; height: 16px; object-fit: cover; border-radius: 3px; border: 1px solid hsl(var(--t-border) / .6); }
.proxy-host { display: block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: nowrap; }
.proxy-editor { display: inline; }
/* «Не назначен» стоит в строку, поэтому ссылку отбиваем от него. */
.account-table td > span.muted + .proxy-editor { margin-left: 8px; }
.proxy-edit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; max-width: 300px; }
.proxy-edit-form select { width: 100%; min-width: 180px; font-size: 12px; }
.account-usage { white-space: nowrap; }
.limit-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 8px; max-width: 300px; white-space: normal; }
.limit-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.limit-form input { width: 90px; }
.limit-form > .muted { flex-basis: 100%; font-size: 11px; }
.account-usage b { font-size: var(--s2); font-weight: 600; }
.account-buttons { text-align: right; white-space: nowrap; }
.account-buttons > form, .account-actions { display: inline-block; vertical-align: top; }
.account-actions { position: relative; margin-left: 4px; text-align: left; }
.account-actions > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; cursor: pointer; font-size: 11px; letter-spacing: 1px; color: var(--muted); border: 1px solid transparent; border-radius: 6px; }
.account-actions > summary::-webkit-details-marker { display: none; }
.account-actions > summary:hover, .account-actions[open] > summary { background: var(--account-soft); border-color: var(--account-line); }
.account-action-list { position: absolute; top: 38px; right: 0; z-index: 5; min-width: 210px; padding: 6px; background: var(--account-surface); border: 1px solid var(--line-ctl); border-radius: 8px; }
.account-action-list button { width: 100%; justify-content: flex-start; text-align: left; font-size: 12px; }
.accounts-empty { text-align: center; padding: 28px 20px !important; font-size: var(--s2) !important; }
.accounts-empty span { display: block; margin-top: 6px; color: var(--muted); font-size: var(--s1); }
.account-setup { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; margin-top: 20px; }
.setup-panel { background: var(--account-surface); border: 1px solid var(--account-line); border-radius: 12px; }
.setup-panel > summary { display: flex; align-items: center; gap: 11px; list-style: none; padding: 14px 16px; cursor: pointer; font-size: var(--s2); font-weight: 600; }
.setup-panel > summary::-webkit-details-marker { display: none; }
.setup-panel > summary > .icon:last-child { margin-left: auto; color: var(--muted); transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.setup-panel[open] > summary > .icon:last-child { transform: rotate(180deg); }
.setup-symbol { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--account-line); border-radius: 9px; color: var(--account-accent); }
.setup-caption { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.setup-body { padding: 0 16px 16px; }
.account-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; min-height: 132px; padding: 16px; border: 1px dashed var(--line-ctl); border-radius: 8px; text-align: center; transition: background 180ms, border-color 180ms; }
.account-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-drop:hover, .account-drop:focus-within, .account-drop.is-dragging { background: var(--account-soft); border-color: var(--account-accent); }
.account-drop:focus-within { outline: 2px solid var(--account-accent); outline-offset: 3px; }
.account-drop.has-file { border-style: solid; border-color: var(--account-accent); }
.drop-symbol { color: var(--account-accent); margin-bottom: 2px; }
.drop-title { font-size: var(--s2); font-weight: 600; }
.drop-name { color: var(--muted); font-size: var(--s1); overflow-wrap: anywhere; max-width: 100%; }
.has-file .drop-name { color: var(--account-accent); }
.drop-format { font-size: 11px; color: var(--muted); margin-top: 6px; }
.setup-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.setup-footer > span { color: var(--muted); font-size: 11px; max-width: 200px; }
.setup-footer button { flex-shrink: 0; }
.setup-body textarea { font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 92px; padding: 12px; background: var(--account-surface); }
.upload-error { color: var(--bad); font-size: 12px; margin-top: 8px; }
/* Выбор сети при добавлении: радио скрыты, подписи — вкладки, форма показывается по :checked. */
.channel-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.channel-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.channel-picker label { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--account-line); border-radius: 999px; font-size: 12px; font-weight: 550; color: var(--muted); cursor: pointer; }
.channel-picker label:hover { background: var(--account-soft); }
.channel-forms > section { display: none; }
#add-telegram:checked ~ .channel-picker .pick-telegram, #add-whatsapp:checked ~ .channel-picker .pick-whatsapp,
#add-facebook:checked ~ .channel-picker .pick-facebook {
  color: var(--account-accent); border-color: hsl(var(--t-primary) / .5); background: hsl(var(--t-primary) / .08);
}
#add-telegram:checked ~ .channel-forms > [data-channel="telegram"], #add-whatsapp:checked ~ .channel-forms > [data-channel="whatsapp"],
#add-facebook:checked ~ .channel-forms > [data-channel="facebook"] { display: block; }
.channel-radio:focus-visible ~ .channel-picker label { outline: none; }
.chat-form .other-channels { margin-top: 10px; }
.chat-form textarea { min-height: 56px; }
.other-channels { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--account-line); }
.other-channels > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; color: var(--muted); font-size: 12px; }
.channel-hint { margin: 8px 0; }
.command-history { margin-top: 20px; font-size: 12px; color: var(--muted); }
.command-history > summary { cursor: pointer; }
.command-history p { margin-top: 8px; }
.accounts-screen summary:focus-visible { outline: 2px solid var(--account-accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 1050px) {
  .account-table .account-identity { min-width: 170px; }
  .account-name { max-width: 170px; }
  .account-table td { padding-right: 8px; padding-left: 8px; }
}
@media (max-width: 800px) {
  .outreach-nav { gap: 20px; margin-bottom: 20px; }
  .accounts-heading { align-items: flex-start; }
  .accounts-heading h1 { font-size: 24px; }
  .accounts-heading-actions { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .accounts-heading-actions .primary { font-size: 12px; padding-inline: 12px; }
  .archive-link { font-size: 12px; }
  .service-strip { font-size: 12px; gap: 6px; align-items: flex-start; flex-direction: column; }
  .service-strip::before { display: none; }
  .account-table thead { display: none; }
  .account-table tbody, .account-table tr { display: block; }
  .account-table tr { padding: 20px 0; border-bottom: 1px solid var(--account-line); }
  .account-table tr:last-child { border-bottom: 0; }
  .account-table td { display: block; border: 0; padding: 6px 0; text-align: left; }
  .account-table .account-identity { display: flex; align-items: center; margin-bottom: 8px; }
  .account-name { max-width: none; }
  .account-table td[data-l] { padding-left: 112px; position: relative; min-height: 32px; }
  .account-table td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 9px; font-size: 11px; color: var(--muted); text-transform: none; width: 100px; }
  .account-buttons { margin-top: 8px; }
  .account-action-list { right: auto; left: 0; }
  .account-setup { grid-template-columns: 1fr; gap: 12px; }
  .account-table .account-note { max-width: 100%; }
}
@media (max-width: 420px) {
  .accounts-heading { flex-wrap: wrap; gap: 14px; }
  .accounts-heading-actions { width: 100%; justify-content: space-between; }
  .setup-body { padding-inline: 16px; }
  .setup-panel > summary { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .setup-panel > summary > .icon:last-child, .account-drop { transition: none; }
}

.chat-form textarea { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.extra-channels { margin-top: 14px; }
.extra-channels > form, .extra-channels > section { margin-top: 12px; }

/* --- Строки ниже, лишний текст — в подсказку и меню «•••». --- */
.accounts-heading { justify-content: space-between; }
.service-strip::before { display: none; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 550; white-space: nowrap; background: var(--tint); color: var(--muted);
}
.acc-chip.is-on { color: var(--ok); background: hsl(var(--t-success) / .12); }
.acc-chip.is-off { color: var(--muted); }
.acc-chip.is-warn { color: hsl(var(--v-warn)); background: hsl(var(--v-warn) / .12); }
.archive-link { display: inline-flex; align-items: center; gap: 5px; }
.accounts-heading-actions { gap: 8px; }
.accounts-heading-actions form { margin: 0; }
.accounts-heading-actions .count { margin-left: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.account-table td { padding-top: 12px; padding-bottom: 12px; }
.account-state { font-size: 12px; }
/* Причина — одной строкой, целиком — в подсказке. */
.account-progress { display: block; max-width: 240px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Прокси и лимит: нажимаешь на значение — всплывает правка. */
.acc-pop-wrap { position: relative; display: inline-block; }
.acc-pop-wrap > summary {
  list-style: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer;
  padding: 4px 6px; margin: -4px -6px; border-radius: 8px; text-decoration: none; transition: background-color .15s;
}
.acc-pop-wrap > summary::-webkit-details-marker { display: none; }
.acc-pop-wrap > summary:hover, .acc-pop-wrap[open] > summary { background: var(--tint); }
.acc-pop {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: -6px; width: 280px; max-width: calc(100vw - 32px);
  margin: 0; padding: 12px; border-radius: 12px; background: hsl(var(--t-popover)); border: 1px solid var(--line-ctl);
  box-shadow: 0 16px 40px -16px hsl(var(--t-scrim) / .7); white-space: normal;
}
.proxy-edit-form.acc-pop, .limit-form.acc-pop { margin-top: 0; max-width: none; }
.limit-form.acc-pop label { flex: 1; }
.limit-form.acc-pop input { width: 100%; }
/* Кому пишет первым: «всем» — обычный текст, отведённый аккаунт — метка. */
.aud { display: inline-flex; align-items: center; gap: 5px; height: 24px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.aud-all { color: var(--muted); font-weight: 450; }
.aud-people, .aud-kol { padding: 0 9px 0 7px; border-radius: 999px; }
.aud-people { color: var(--text); background: var(--tint); }
.aud-kol { color: var(--accent); background: var(--accent-tint); }
.audience-form.acc-pop { width: 210px; padding: 6px; display: grid; gap: 2px; }
.aud-head { margin: 4px 8px 6px; font-size: 11px; color: var(--muted); }
.aud-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background-color .12s;
}
.aud-opt > span { flex: 1; }
.aud-opt .icon { color: var(--muted); }
.aud-opt:hover { background: var(--tint); }
.aud-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.aud-opt.is-on { font-weight: 600; }
.aud-opt.is-on .icon { color: var(--accent); }
.aud-note { margin: 6px 8px 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); }
.acc-use { display: inline-flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; }
.acc-use b { font-size: var(--s2); font-weight: 650; }
.account-usage .pg-acc-meter { width: 72px; }
.acc-menu-note { margin: 0 0 6px; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
  max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
.acc-menu-note span { display: block; margin-top: 3px; color: var(--faint); }
.account-action-list { min-width: 230px; }
@media (max-width: 800px) {
  .accounts-heading-actions { width: 100%; justify-content: flex-start; }
  .account-progress { max-width: 100%; white-space: normal; }
  .acc-pop { left: 0; }
}
@media (min-width: 801px) and (max-width: 1050px) {
  .account-progress { max-width: 160px; }
}
/* Беда прокси: метка у прокси и у аккаунта, сводка над таблицей. */
.px-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.px-badge.is-bad { color: var(--bad-bright); background: var(--bad-tint); }
.px-badge.is-warn { color: hsl(var(--v-warn)); background: hsl(var(--v-warn) / .12); }
.px-alert {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--bad-tint); border: 1px solid var(--bad-line);
}
.px-alert.is-warn { background: hsl(var(--v-warn) / .08); border-color: hsl(var(--v-warn) / .25); }
.px-alert-mark { display: inline-flex; padding-top: 1px; color: var(--bad-bright); }
.px-alert.is-warn .px-alert-mark { color: hsl(var(--v-warn)); }
.px-alert-body { flex: 1; min-width: 0; }
.px-alert-head { margin: 0; font-size: var(--s1); }
/* Сводка: страна, беда и аккаунты — тремя ровными столбцами. */
.px-alert-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: 8px 14px; font-size: 12px; }
.px-alert-list li { display: contents; }
.px-alert-list .proxy-geo { min-height: 20px; font-size: 12px; }
.px-alert-list .px-badge { justify-self: start; }
.px-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.px-who > .icon { flex: none; opacity: .8; }
.px-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Список прокси: строка — страна и состояние, под ними адрес и кто ходит;
   справа срок оплаты и проверка. */
.px-list { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--account-line); }
.px-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--account-line); }
.px-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.px-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.px-top .proxy-geo { min-height: 20px; }
.px-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.px-sub { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding-left: 30px; font-size: 12px; color: var(--muted); }
.px-addr { flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--faint); }
.px-users { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-users.is-free { color: var(--faint); }
.px-paid { flex: none; }
.px-paid > summary { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-paid > summary.is-set { color: var(--muted); }
.px-paid .acc-pop { left: auto; right: -6px; }
.px-row.is-warn .px-paid > summary { color: hsl(var(--v-warn)); }
.px-check { flex: none; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; color: var(--muted); }
.px-check:hover { color: var(--text); }

/* Добавить: поле, файл и кнопка одной строкой под ним. */
.px-add textarea { width: 100%; min-height: 0; }
.px-add-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.account-drop.px-file { flex-direction: row; min-height: 30px; padding: 4px 10px; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; max-width: 60%; }
.px-file .drop-name { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-count { flex: 1; min-width: 0; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-add-foot button { margin-left: auto; flex: none; }
@media (max-width: 800px) {
  .px-alert { flex-wrap: wrap; }
  .px-paid .acc-pop { right: auto; left: -6px; }
}
@media (max-width: 520px) {
  .px-alert-list { grid-template-columns: max-content minmax(0, 1fr); }
  .px-alert-list .px-who { grid-column: 1 / -1; margin: -4px 0 4px 30px; }
  .px-sub { flex-direction: column; gap: 1px; }
  .px-sub > * { max-width: 100%; }
  .px-addr { max-width: 100%; }
  .px-count { display: none; }
}