/* ============================================================
   teksa_ui — оформление почты ГК ТЕКСА для Roundcube 1.6 (elastic)

   ВАЖНО про историю файла: раньше здесь лежали ДВА набора цветов —
   тема ERP (голубой фон, тёмно-синие панели) и поверх неё тема
   в духе mail.ru. Второй перебивал первый, но не везде, и оформление
   разъезжалось. Первый набор удалён целиком, остался один.

   Цвета: белый список, чёрный текст, серый второстепенный,
   синий только на действиях и ссылках. Никакого стекла, размытия
   и градиентов: они мешали читать и по-разному вели себя в браузерах.

   Панель задач на широком экране скрыта, её место заняла панель
   папок с кнопкой написания сверху и настройками снизу. На узком
   экране полоса остаётся: там она работает выдвижным меню темы.
   ============================================================ */

/* ШРИФТ.

   Подключаем с сервера Google. Если он недоступен — а такое
   бывает: при проверке из песочницы пришёл отказ 403 — сработает
   запасной набор ниже, и интерфейс не сломается: буквы просто
   будут системные.

   Запасной набор подобран близким по рисунку: у всех шрифтов
   в нём гуманистический гротеск без засечек, как в эталоне. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

/* Палитра снята пипеткой прямо со скриншотов mail.ru, а не подобрана
   на глаз: серые, разделители, подсветка строк — те же значения.

   ЕДИНСТВЕННОЕ отличие — синий. У mail.ru он #0077FF, здесь оставлен
   фирменный #1e88d0 из ЕРП: тема почты собиралась в цветах компании.
   Если нужен в точности мальрушный — поменяйте две строки ниже
   (--tk-accent и --tk-accent-rgb), остальное подстроится само. */
:root{
  --tk-accent:#1e88d0;
  --tk-accent-2:#0d5fa0;
  --tk-accent-rgb:30,136,208;

  --tk-page:#F6F7F8;      /* фон страницы вокруг панелей */
  --tk-surface:#FFFFFF;   /* список, письмо, панели */
  --tk-surface2:#F6F7F8;  /* шапки, наведение */
  --tk-surface3:#EBECEF;  /* поля ввода */
  --tk-hover:#ECEDEF;     /* наведение на письмо — мятная подсветка */
  --tk-sel:#EBECEF;       /* выбранное галочкой письмо */
  --tk-border:#E0E2E7;
  --tk-border-2:#D0D2D8;

  --tk-text:#2C2D2E;
  --tk-text-2:#2C2D2E;
  --tk-muted:#87898F;
  --tk-muted-2:#A7A8AC;

  --tk-danger:#E64646;
  --tk-ok:#1B7A4B;
  --tk-warn:#FC8A15;

  --tk-shadow:0 8px 24px rgba(44,45,46,.14);
  --tk-r:8px;
  --tk-r-lg:10px;
  /* цвета фирменного знака — три оттенка из логотипа ЕРП */
  --tk-brand-1:#4FB3E8;
  --tk-brand-2:#1e88d0;
  --tk-brand-3:#0d5fa0;

  --tk-av:30px;           /* диаметр аватарки — измерен по снимку */
  --tk-row:46px;          /* высота строки письма */
  --tk-row-pad:9px;
}

body.tk-compact{ --tk-row-pad:5px; --tk-av:26px; }
body.tk-wide{ --tk-row-pad:14px; --tk-av:36px; }

body, input, select, textarea, button,
.listing, #messagelist, .header, .footer, .toolbar,
.popupmenu, .popover, .ui-dialog, .menu{
  font-family:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ============================================================
   1. ПОВЕРХНОСТИ
   ============================================================ */
html, body{ background:var(--tk-page) !important; color:var(--tk-text) !important; }
#layout{ background:var(--tk-page) !important; }

#layout-list,
#layout-content,
.contentbox, .uibox, .listbox, .scroller,
#folderlist-content{
  background-color:var(--tk-surface) !important;
  color:var(--tk-text) !important;
  border-color:var(--tk-border) !important;
}
#layout-sidebar{
  background-color:var(--tk-surface) !important;
  border-color:var(--tk-border) !important;
}
#layout > div{ border-color:var(--tk-border) !important; }
.watermark{ background-color:var(--tk-surface) !important; }

/* ============================================================
   2. ПАНЕЛЬ ЗАДАЧ И БОКОВАЯ ПАНЕЛЬ

   Узкая полоса задач слева обрезала подписи («Написать с…»,
   «О програм…») и ела место. На компьютере она скрыта, а нужное
   переехало в панель папок: кнопка написания сверху, настройки
   и выход снизу — как в mail.ru.

   На узком экране полоса остаётся: там она работает выдвижным
   меню темы, без неё телефон остался бы без навигации.
   ============================================================ */
@media (min-width:900px){
  html.tk-nomenu #layout-menu,
  html.tk-nomenu #taskmenu{ display:none !important; }
  html.tk-nomenu #layout{ padding-left:0 !important; }
}

/* полоса задач там, где она всё-таки показана */
#layout-menu, #taskmenu{
  background:#16243D !important;
  border-right:1px solid #16243D !important;
}
#taskmenu a{ color:#AFC0D8 !important; border-radius:var(--tk-r); transition:.15s; }
#taskmenu a:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
#taskmenu a.selected{
  color:#fff !important;
  background:rgba(var(--tk-accent-rgb),.3) !important;
  box-shadow:inset 3px 0 0 var(--tk-accent);
}
#taskmenu a.compose{
  background:var(--tk-accent) !important; color:#fff !important;
  border-radius:var(--tk-r); margin:6px;
}
#taskmenu a.compose:hover{ background:var(--tk-accent-2) !important; }
#taskmenu a.logout{ color:#EFA9A9 !important; }
#taskmenu a.theme{ display:none !important; }
#layout-menu .popover-header,
#layout-menu .footer{ background:transparent !important; color:#AFC0D8 !important; }

/* ---- кнопка «Написать письмо» ---- */
.tk-side-top{ padding:10px 12px 6px; }
.tk-write{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:11px 14px;
  border:1px solid var(--tk-border-2); border-radius:10px;
  background:#fff; color:var(--tk-text);
  font:600 14px/1.2 inherit; cursor:pointer;
  box-shadow:0 1px 2px rgba(26,26,26,.05);
  transition:background .13s, border-color .13s, box-shadow .13s;
}
.tk-write:hover{
  background:var(--tk-surface2); border-color:var(--tk-accent);
  box-shadow:0 2px 6px rgba(26,26,26,.09);
}
.tk-write:active{ background:#E8F1FB; }
.tk-write .tk-i{ color:var(--tk-accent); }

/* ---- настройки, контакты, выход внизу панели ---- */
#layout-sidebar{ display:flex !important; flex-direction:column !important; }
#layout-sidebar .scroller{ flex:1 1 auto !important; }

.tk-side-foot{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:1px;
  padding:8px 8px 10px;
  border-top:1px solid var(--tk-border);
  background:var(--tk-surface);
}
.tk-side-b{
  display:flex; align-items:center; gap:10px;
  border:0; background:none; cursor:pointer;
  padding:9px 12px; border-radius:8px;
  font:14px/1.2 inherit; color:var(--tk-text-2); text-align:left;
}
.tk-side-b:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-side-b .tk-i{ color:var(--tk-muted); }
.tk-side-b:hover .tk-i{ color:var(--tk-accent-2); }
.tk-side-b.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-side-b.dang:hover .tk-i{ color:var(--tk-danger); }

/* ============================================================
   3. ПАПКИ
   ============================================================ */
#folderlist li a,
.listing li a{ color:var(--tk-text) !important; border-radius:6px; margin:1px 6px; }
#folderlist li a:hover,
.listing li a:hover{ background:var(--tk-hover) !important; }
#folderlist li.selected > a,
.listing li.selected > a,
.listing li.focused > a{
  background:var(--tk-surface2) !important;
  color:var(--tk-text) !important; font-weight:600;
  box-shadow:inset 3px 0 0 var(--tk-accent);
}
.listing li a span.unreadcount{
  background:var(--tk-accent) !important; color:#fff !important;
  font-weight:600; border-radius:9px; padding:1px 7px;
}
.listing li, .listing li a{ border-color:var(--tk-border) !important; }

/* ============================================================
   4. ШАПКИ И ПАНЕЛИ ДЕЙСТВИЙ
   ============================================================ */
.header,
#layout-list .header,
#layout-content .header,
#layout-sidebar .header,
.footer{
  background:var(--tk-surface) !important;
  border-color:var(--tk-border) !important;
  color:var(--tk-text) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.header .header-title, .header .boxtitle{ color:var(--tk-text) !important; font-weight:600; }

.toolbar{ background:transparent !important; }
.header a.button, .header button,
.toolbar a.button, .toolbar button,
.footer a.button, .footer button{
  color:var(--tk-muted) !important; border-radius:6px;
}
.header a.button:hover, .header button:hover,
.toolbar a.button:hover, .toolbar button:hover,
.footer a.button:hover, .footer button:hover{
  background:var(--tk-surface2) !important; color:var(--tk-accent-2) !important;
}
.header a.button.disabled, .toolbar a.button.disabled{ color:var(--tk-muted-2) !important; }

.searchbar, #messagesearch, .searchbar form{
  background:var(--tk-surface3) !important;
  border:1px solid transparent !important;
  border-radius:var(--tk-r) !important;
  color:var(--tk-text) !important;
}
.searchbar input, .searchbar input:focus{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; color:var(--tk-text) !important;
}
.searchbar a.button{ color:var(--tk-muted) !important; }
#searchmenu, .searchmenu{ background:var(--tk-surface) !important; color:var(--tk-text) !important; }

.pagenav a.button{ color:var(--tk-muted) !important; }
.pagenav .pagenav-text{ color:var(--tk-muted) !important; }

/* ============================================================
   5. СПИСОК ПИСЕМ
   ============================================================ */
#messagelist{ background:var(--tk-surface) !important; color:var(--tk-text) !important; }

/* Шапка колонок «Тема | От | Дата | Размер» убрана: в почтовых
   веб-клиентах её нет, а сортировка живёт в панели над списком. */
#messagelist thead{ display:none !important; }

/* Размер письма в списке не нужен — он занимал целую колонку
   и вытеснял тему. Остаётся в свойствах письма.

   Селектор длинный намеренно: правило раскладки
   «tbody tr > td { display:flex }» специфичнее короткого
   «#messagelist td.size» и перебивало его даже с !important —
   размер вылезал ПЕРВОЙ колонкой, впереди отправителя. */
#messagelist td.size,
#messagelist span.size,
html.tk-list-mode #messagelist tbody tr > td.size,
html.tk-list-mode #messagelist thead tr > th.size,
html.tk-list-mode #messagelist tbody tr > td.threads,
html.tk-list-mode #messagelist thead tr > th.threads{ display:none !important; }
#messagelist tbody tr{
  background:var(--tk-surface) !important;
  border-bottom:1px solid var(--tk-border) !important;
}
#messagelist tbody tr:hover{ background:var(--tk-hover) !important; }
#messagelist tbody tr td{
  color:var(--tk-text) !important;
  padding-top:var(--tk-row-pad) !important;
  padding-bottom:var(--tk-row-pad) !important;
}
#messagelist span.subject{ color:var(--tk-text) !important; }
#messagelist span.fromto{ color:var(--tk-text-2) !important; }
#messagelist span.date,
#messagelist span.size,
#messagelist td.date,
#messagelist td.size{ color:var(--tk-muted) !important; font-variant-numeric:tabular-nums; }

/* непрочитанное: синяя точка и полужирная тема, строка остаётся белой */
#messagelist tbody tr.unread{ background:var(--tk-surface) !important; }
#messagelist tr.unread span.subject{ font-weight:700 !important; color:#000 !important; }
#messagelist tr.unread span.fromto{ font-weight:600 !important; color:#000 !important; }
#messagelist td.subject span.msgicon.status.unread:before{ color:var(--tk-accent) !important; }
#messagelist span.flagged{ color:var(--tk-warn) !important; }
#messagelist span.attachment{ color:var(--tk-muted-2) !important; }

#messagelist tbody tr.selected,
#messagelist tbody tr.selected td{
  background:#EAF2FB !important; color:var(--tk-text) !important;
}
#messagelist tbody tr.focused{ outline:0 !important; }

/* ============================================================
   6. ПИСЬМО
   ============================================================ */
#messageheader, #message-header{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:var(--tk-r-lg) !important;
  padding:14px 16px !important;
  color:var(--tk-text) !important;
  box-shadow:none !important;
}
#messageheader .subject, #message-header .subject{ color:var(--tk-text) !important; font-weight:700; }
#messageheader a, #message-header a{ color:var(--tk-accent-2) !important; }
#messageheader .rightcol, #messageheader .date, #messageheader .header-links a{ color:var(--tk-muted) !important; }

#messagecontframe, #messagepartframe, #messagebody,
.message-part, .message-htmlpart{
  background:#fff !important; color:var(--tk-text) !important;
  border-radius:var(--tk-r-lg) !important; box-shadow:none !important;
}
#messagebody{ padding:14px 16px !important; }
.message-part a{ color:var(--tk-accent-2) !important; }
.message-part blockquote{
  border-left:3px solid var(--tk-border-2) !important;
  background:var(--tk-surface2) !important; color:#4A4F5A !important;
  border-radius:0 6px 6px 0; padding:8px 12px !important;
}

#attachment-list li, .attachmentslist li{
  background:var(--tk-surface2) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:var(--tk-r) !important; box-shadow:none !important;
}
#attachment-list li:hover, .attachmentslist li:hover{ border-color:var(--tk-accent) !important; }
#attachment-list li a, .attachmentslist li a{ color:var(--tk-text) !important; }

/* ============================================================
   7. НАПИСАНИЕ ПИСЬМА
   ============================================================ */
#compose-content, #composeview-right, #compose-attachments{
  background:var(--tk-surface) !important; color:var(--tk-text) !important;
}
#compose-headers td, #compose-headers input{ color:var(--tk-text) !important; }
.recipient-input li.recipient{
  background:var(--tk-surface3) !important;
  border:1px solid var(--tk-border-2) !important;
  border-radius:6px !important; color:var(--tk-text) !important;
}
.mce-content-body, .cke_editable, #composebody{ background:#fff !important; color:var(--tk-text) !important; }
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox-editor-header{ background:var(--tk-surface2) !important; }

/* ============================================================
   8. ФОРМЫ, КНОПКИ, МЕНЮ
   ============================================================ */
a{ color:var(--tk-accent-2); }

input, select, textarea, .form-control{
  background:#fff !important; color:var(--tk-text) !important;
  border:1px solid var(--tk-border-2) !important; border-radius:var(--tk-r) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--tk-accent) !important;
  box-shadow:0 0 0 3px rgba(var(--tk-accent-rgb),.15) !important; outline:0 !important;
}
input::placeholder, textarea::placeholder{ color:var(--tk-muted-2) !important; }
input[type=checkbox], input[type=radio]{ accent-color:var(--tk-accent); }

.btn-primary, a.button.btn-primary, button.btn-primary, .mainaction{
  background:var(--tk-accent) !important; border:0 !important; color:#fff !important;
  border-radius:var(--tk-r) !important; box-shadow:none !important;
}
.btn-primary:hover, .mainaction:hover{ background:var(--tk-accent-2) !important; }
.btn-secondary, button.btn, a.button.btn{
  background:#fff !important; color:var(--tk-text) !important;
  border:1px solid var(--tk-border-2) !important; border-radius:var(--tk-r) !important;
}
.btn-secondary:hover, button.btn:hover, a.button.btn:hover{ background:var(--tk-surface2) !important; }
.btn-danger{ background:var(--tk-danger) !important; color:#fff !important; border:0 !important; }

.popupmenu, .popover, .ui-dialog, .ui-menu{
  background:#fff !important;
  border:1px solid var(--tk-border) !important;
  border-radius:var(--tk-r-lg) !important;
  box-shadow:var(--tk-shadow) !important;
  color:var(--tk-text) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.popupmenu li a, .popover li a, .ui-menu li a{ color:var(--tk-text) !important; border-radius:6px; }
.popupmenu li a:hover, .popover li a:hover, .ui-menu li a:hover{
  background:var(--tk-surface2) !important; color:var(--tk-accent-2) !important;
}
.popupmenu li.separator, .popover .listing li{ border-color:var(--tk-border) !important; }
.ui-dialog .ui-dialog-titlebar{
  background:transparent !important; border-bottom:1px solid var(--tk-border) !important;
  color:var(--tk-text) !important;
}
.ui-dialog .ui-dialog-buttonpane{ border-color:var(--tk-border) !important; }
.ui-widget-overlay{ background:rgba(26,26,26,.35) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* ============================================================
   9. НАСТРОЙКИ И АДРЕСНАЯ КНИГА
   ============================================================ */
.propform, .propform td, .propform th,
fieldset, legend, label, .prop, .boxtitle{
  color:var(--tk-text) !important; border-color:var(--tk-border) !important;
}
fieldset{ background:transparent !important; }
.contactfield, .contactfieldgroup, #contacthead{
  background:var(--tk-surface2) !important; border-radius:var(--tk-r); color:var(--tk-text) !important;
}
.boxwarning, .boxinformation, .boxconfirmation{
  background:var(--tk-surface2) !important; color:var(--tk-text) !important;
  border:1px solid var(--tk-border) !important; border-radius:var(--tk-r);
}
.boxerror{ background:#FDECEA !important; border:1px solid #E7B4B0 !important; color:#8E241F !important; }
.quota-widget .bar > span{ background:var(--tk-accent) !important; }

/* ============================================================
   10. СТРАНИЦА ВХОДА
   ============================================================ */
.task-login #layout, .task-login body{ background:var(--tk-page) !important; }
.task-login #login-form{
  background:#fff !important; border:1px solid var(--tk-border) !important;
  border-radius:12px !important; box-shadow:var(--tk-shadow) !important;
  color:var(--tk-text) !important;
}
.task-login #login-form .boxtitle, .task-login #login-form label{ color:var(--tk-text) !important; }

/* ============================================================
   11. МЕЛОЧИ
   ============================================================ */
td, th{ border-color:var(--tk-border) !important; }
.hint, .secondary, .subtitle, .text-muted{ color:var(--tk-muted) !important; }
hr{ border-color:var(--tk-border) !important; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#CFD4DC; border-radius:6px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:#B4BAC4; background-clip:content-box; }

/* ============================================================
   12. АВАТАРКИ
   ============================================================ */
#messagelist td.tk-cell{ position:relative !important; }
#messagelist span.tk-av, span.tk-av{
  position:absolute !important;
  left:8px !important; top:8px !important;
  width:var(--tk-av) !important; height:var(--tk-av) !important;
  min-width:var(--tk-av) !important; max-width:var(--tk-av) !important;
  min-height:var(--tk-av) !important; max-height:var(--tk-av) !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; margin:0 !important;
  color:#fff !important; font-size:12px !important; font-weight:600 !important;
  line-height:1 !important; text-align:center !important;
  overflow:hidden !important; white-space:nowrap !important;
  box-shadow:none !important;
  pointer-events:none !important; z-index:3 !important;
}
#messagelist tr.tk-has-av td.tk-cell{ padding-left:50px !important; }
body.tk-compact #messagelist tr.tk-has-av td.tk-cell{ padding-left:42px !important; }
body.tk-wide #messagelist tr.tk-has-av td.tk-cell{ padding-left:56px !important; }

/* ============================================================
   13. РАЗДЕЛИТЕЛИ ПО ДНЯМ — простая серая подпись
   ============================================================ */
/* Подпись группы — просто серый текст над первой строкой месяца,
   как в mail.ru. Раньше это была голубая плашка, которая висела
   посреди строки и читалась как выделенное письмо.

   Рисуется от СТРОКИ: строка занимает всю ширину списка, а ячейка
   с аватаркой — это узкая колонка «От», и подпись оказывалась
   не у левого края, а посреди списка. */
#messagelist tbody tr{ position:relative; }
#messagelist tr.tk-gstart > td{ padding-top:34px !important; }
#messagelist tr.tk-gstart::before{
  content:none;
  position:absolute; left:14px; top:6px;
  font-size:13px; font-weight:500; color:var(--tk-muted);
  pointer-events:none; white-space:nowrap; z-index:2;
}
/* запасной путь для разметки без атрибута на строке */
#messagelist tr.tk-gstart:not([data-tkgroup]) td.tk-cell::before{
  content:none;
  position:absolute; left:0; top:0; height:30px;
  display:flex; align-items:center; padding-left:14px;
  font-size:13px; font-weight:500; color:var(--tk-muted);
  pointer-events:none; white-space:nowrap;
}
#messagelist tr.tk-gstart span.tk-av{ top:38px !important; }
#messagelist tr.tk-gstart span.tk-more,
#messagelist tr.tk-gstart span.tk-quick{ top:calc(50% + 17px); }

/* верхняя граница у первой строки группы не нужна: разделяет уже подпись */
#messagelist tbody tr.tk-gstart{ border-top:0 !important; }

/* ============================================================
   14. МЕТКИ
   ============================================================ */
.tk-labels{ display:inline-flex; gap:5px; flex-wrap:wrap; vertical-align:middle; margin-left:8px; }
.tk-chip{
  display:inline-block; font-size:10.5px; font-weight:600; line-height:1.5;
  padding:1px 7px; border-radius:4px; white-space:nowrap; color:#fff;
}
.tk-labelbtn{ cursor:pointer; }
.tk-labelmenu{
  position:fixed; display:none; min-width:200px; padding:6px;
  border-radius:var(--tk-r-lg); background:#fff; border:1px solid var(--tk-border);
  box-shadow:var(--tk-shadow); z-index:2000;
}
.tk-labelmenu.show{ display:block; }
.tk-labelmenu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border:0; background:none; border-radius:6px;
  font-size:13.5px; text-align:left; cursor:pointer; color:var(--tk-text);
}
.tk-labelmenu button:hover{ background:var(--tk-surface2); color:var(--tk-accent-2); }
.tk-labelmenu button i{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; display:block; }

/* ============================================================
   15. ОТМЕНА ОТПРАВКИ
   ============================================================ */
.tk-undo{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(150%);
  display:flex; align-items:center; gap:14px;
  background:#1A1A1A; color:#fff; padding:12px 18px; border-radius:var(--tk-r-lg);
  font-size:13.5px; z-index:99998; box-shadow:var(--tk-shadow);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.tk-undo.show{ transform:translateX(-50%) translateY(0); }
.tk-undo-n{
  width:28px; height:28px; flex:0 0 28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); color:#8FC7F0;
  font-weight:700; font-size:12px; font-variant-numeric:tabular-nums;
}
.tk-undo button{ background:none; border:0; color:#8FC7F0; font-weight:600; cursor:pointer; font-size:13.5px; }
.tk-undo button:hover{ text-decoration:underline; }

/* ============================================================
   16. КОНТЕКСТНОЕ МЕНЮ
   ============================================================ */
.tk-ctx{
  position:fixed; z-index:99997; min-width:224px; max-height:80vh; overflow:auto;
  padding:6px; border-radius:var(--tk-r-lg);
  background:#fff; border:1px solid var(--tk-border); color:var(--tk-text);
  box-shadow:var(--tk-shadow);
  opacity:0; transform:scale(.98); transition:opacity .12s, transform .12s;
  font:13.5px/1.4 'Golos Text',system-ui,sans-serif;
}
.tk-ctx.show{ opacity:1; transform:none; }
.tk-ctx button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 11px; border:0; background:none; border-radius:6px;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.tk-ctx button:hover,.tk-ctx button:active{ background:var(--tk-surface2); color:var(--tk-accent-2); }
.tk-ctx button.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-ctx hr{ border:0; border-top:1px solid var(--tk-border); margin:5px 8px; }

/* ============================================================
   17. ПАНЕЛЬ САМОПРОВЕРКИ
   ============================================================ */
.tk-check{
  position:fixed; right:14px; bottom:14px; width:min(94vw,420px);
  background:#fff; color:var(--tk-text); border-radius:var(--tk-r-lg); padding:6px;
  font:12.5px/1.5 'Golos Text',system-ui,sans-serif; z-index:99999;
  border:1px solid var(--tk-border); box-shadow:var(--tk-shadow);
  max-height:70vh; overflow:auto;
}
.tk-check-h{
  display:flex; align-items:center; padding:8px 10px 10px;
  font-weight:700; font-size:13px; border-bottom:1px solid var(--tk-border); margin-bottom:4px;
}
.tk-check-h button{ margin-left:auto; background:none; border:0; color:var(--tk-muted); cursor:pointer; font-size:14px; }
.tk-check-r{ display:flex; align-items:baseline; gap:9px; padding:7px 10px; border-radius:6px; }
.tk-check-r:hover{ background:var(--tk-surface2); }
.tk-check-r i{ font-style:normal; width:14px; flex:0 0 14px; font-weight:700; }
.tk-check-r span{ flex:1; min-width:0; }
.tk-check-r em{ font-style:normal; color:var(--tk-muted-2); font-size:11.5px; text-align:right; }
.tk-check-r.ok i{ color:var(--tk-ok); }
.tk-check-r.bad i{ color:var(--tk-danger); }
.tk-check-r.bad span{ color:var(--tk-danger); }
.tk-check-r.wait i{ color:var(--tk-warn); }
.tk-check-r.wait span{ color:var(--tk-muted); }

.tk-checkbtn{
  position:fixed; right:14px; bottom:14px; z-index:99996;
  width:38px; height:38px; border-radius:50%; border:0;
  background:#1e88d0; color:#fff; font-weight:700; font-size:17px; line-height:38px;
  cursor:pointer; text-align:center; padding:0;
  box-shadow:0 4px 16px rgba(30,136,208,.5);
  opacity:.9; transition:opacity .15s, transform .15s;
}
.tk-checkbtn:active{ transform:scale(.94); }
.tk-checkbtn:hover,.tk-checkbtn:active{ opacity:1; }
.tk-laterbtn{ cursor:pointer; }

/* ============================================================
   18. РАСКЛАДКА ДЛЯ КОМПЬЮТЕРА

   elastic всегда держит три колонки: настройка layout на это
   не влияет (в meta.json темы supported_layouts = widescreen).
   Классы на документе ставит JS плагина.

   Ширины колонок и размеры даны через переменные и меняются
   ступенями по ширине окна — от ноутбука 1280 до большого монитора.
   ============================================================ */
@media (min-width:900px){

  :root{
    --tk-side:230px;      /* панель папок */
    --tk-from:190px;      /* колонка отправителя */
    --tk-date:96px;       /* колонка даты */
    --tk-read:900px;      /* ширина колонки чтения письма */
  }

  /* ---- панели ---- */
  html.tk-list-mode #layout-sidebar{
    display:flex !important;
    flex:0 0 var(--tk-side) !important;
    max-width:var(--tk-side) !important;
    min-width:var(--tk-side) !important;
  }
  html.tk-list-mode #layout-list{
    display:flex !important; flex:1 1 auto !important; max-width:none !important;
  }
  html.tk-list-mode #layout-content{ display:none !important; }

  /* В режиме чтения список папок ОБЯЗАН остаться: на записи он
     пропадал, и на экране было одно письмо во всю ширину. */
  html.tk-list-mode.tk-reading #layout-sidebar{
    display:flex !important;
    flex:0 0 var(--tk-side) !important;
    max-width:var(--tk-side) !important;
    min-width:var(--tk-side) !important;
  }
  html.tk-list-mode.tk-reading #layout-list{ display:none !important; }
  html.tk-list-mode.tk-reading #layout-content{
    display:flex !important; flex:1 1 auto !important; width:auto !important;
  }
  html.tk-list-mode.tk-reading #layout-content .back-list-button{
    display:inline-flex !important; align-items:center;
  }

  /* ---- строка письма в одну линию ----

     В разметке Roundcube колонки идут в порядке
     выделение → тема → отправитель → дата → размер → признаки.
     Нам нужен порядок mail.ru: отправитель, потом тема, дата справа.
     Меняем не разметку, а порядок показа: строка становится гибкой,
     каждой ячейке задаётся место. Сортировка и выделение в list.js
     работают по номерам ячеек и от этого не зависят. */
  html.tk-list-mode #messagelist,
  html.tk-list-mode #messagelist tbody{ display:block !important; width:100% !important; }

  html.tk-list-mode #messagelist tbody tr{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:var(--tk-row);
  }
  html.tk-list-mode #messagelist tbody tr > td{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Порядок задаём ВСЕМ колонкам. У ячейки без order он равен нулю,
     и она уезжает в самое начало строки — так размер письма оказывался
     впереди отправителя. */
  html.tk-list-mode #messagelist tbody tr > td{ order:5; }

  html.tk-list-mode #messagelist td.fromto,
  html.tk-list-mode #messagelist td.from{
    order:2;
    flex:0 0 var(--tk-from) !important;
    max-width:var(--tk-from) !important;
    padding-right:12px !important;
  }
  html.tk-list-mode #messagelist td.subject{
    order:3; flex:1 1 auto !important; max-width:none !important;
  }
  html.tk-list-mode #messagelist td.date{
    order:8; flex:0 0 var(--tk-date) !important; justify-content:flex-end !important;
    padding-right:6px !important;
  }
  html.tk-list-mode #messagelist td.flags,
  html.tk-list-mode #messagelist td.threads,
  html.tk-list-mode #messagelist td.attachment{
    order:9; flex:0 0 auto !important; justify-content:flex-end !important;
  }

  /* колонки шире строки быть не должны */
  html.tk-list-mode #messagelist td.subject span.subject{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  }

  /* ---- разметка без отдельных колонок (однострочный режим elasticlayouts) ----
     здесь всё лежит внутри td.subject, порядок задаём его содержимому */
  html.tk-list-mode #messagelist td.subject{
    flex-wrap:nowrap !important; padding-right:10px !important;
  }
  html.tk-list-mode #messagelist td.subject span.msgicon.status{ order:1; }
  html.tk-list-mode #messagelist td.subject > span.fromto{
    order:2; flex:0 0 var(--tk-from) !important; max-width:var(--tk-from) !important;
    padding-left:0 !important; padding-right:14px !important;
    font-size:100% !important; color:var(--tk-text) !important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  html.tk-list-mode #messagelist td.subject > span.subject{
    order:3; width:auto !important; flex:1 1 auto !important; min-width:0 !important;
  }
  html.tk-list-mode #messagelist td.subject span.attachment{ order:8; padding:0 6px; }
  html.tk-list-mode #messagelist td.subject > span.date{
    order:10; margin-left:auto !important; flex:0 0 auto !important;
    padding-left:10px !important; text-align:right;
  }

  /* ---- чтение письма: колонка не на всю ширину монитора ----
     Строка в 2000 пикселей нечитаема, глаз теряет начало следующей. */
  html.tk-list-mode.tk-reading #messagecontframe,
  html.tk-list-mode.tk-reading #messagepartframe,
  html.tk-list-mode.tk-reading #messagebody,
  html.tk-list-mode.tk-reading #messageheader,
  html.tk-list-mode.tk-reading #message-header{
    max-width:var(--tk-read) !important;
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* ---- ступени по ширине окна ---- */

/* ноутбук 1280–1439 */
@media (min-width:1280px){
  :root{ --tk-side:240px; --tk-from:210px; --tk-date:104px; }
}
/* монитор 1440–1919 */
@media (min-width:1440px){
  :root{ --tk-side:260px; --tk-from:240px; --tk-date:112px; --tk-read:960px; }
}
/* большой монитор 1920 и шире */
@media (min-width:1920px){
  :root{ --tk-side:280px; --tk-from:270px; --tk-date:120px; --tk-read:1040px; --tk-row:50px; }
}
/* 2560 и шире: список не должен растягиваться на всю стену */
@media (min-width:2200px){
  :root{ --tk-side:300px; --tk-from:300px; --tk-read:1120px; }
  html.tk-list-mode #layout-list .scroller > table#messagelist{
    max-width:1900px; margin:0 auto;
  }
}
/* узкий ноутбук 900–1279: экономим на колонке отправителя */
@media (min-width:900px) and (max-width:1279px){
  :root{ --tk-side:210px; --tk-from:160px; --tk-date:88px; }
  #messagelist span.tk-snip{ display:none; }
}

/* ============================================================
   21. ОКНО НАПИСАНИЯ ПИСЬМА

   Написание открывается окном поверх списка, а не отдельной
   страницей. Размеры подобраны под мониторы от 1280 и шире:
   окно не должно ни упираться в края, ни теряться в середине
   большого экрана.
   ============================================================ */
.tk-compose{
  position:fixed; inset:0; z-index:99990;
  display:none; align-items:flex-start; justify-content:center;
}
.tk-compose.show{ display:flex; }

.tk-compose-back{
  position:absolute; inset:0;
  background:rgba(26,26,26,.34);
}

.tk-compose-win{
  position:relative;
  display:flex; flex-direction:column;
  width:min(96vw, 900px);
  height:min(88vh, 760px);
  margin-top:max(2vh, 24px);
  background:#fff;
  border-radius:12px;
  box-shadow:0 24px 64px rgba(26,26,26,.28);
  overflow:hidden;
}
@media (min-width:1440px){
  .tk-compose-win{ width:min(92vw, 1000px); height:min(86vh, 820px); }
}
@media (min-width:1920px){
  .tk-compose-win{ width:min(88vw, 1100px); height:min(84vh, 880px); }
}

.tk-compose-win.full{
  width:calc(100vw - 32px); height:calc(100vh - 32px); margin-top:16px;
}

.tk-compose-h{
  flex:0 0 auto;
  display:flex; align-items:center; gap:4px;
  padding:10px 10px 10px 18px;
  border-bottom:1px solid var(--tk-border);
  background:var(--tk-surface2);
}
.tk-compose-t{
  flex:1 1 auto; min-width:0;
  font:600 14px/1.3 inherit; color:var(--tk-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tk-compose-h button{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 32px;
  border:0; background:none; border-radius:8px;
  color:var(--tk-muted); cursor:pointer;
}
.tk-compose-h button:hover{ background:#E4E7EC; color:var(--tk-text); }
.tk-compose-h .tk-cw-close:hover{ background:#FDECEA; color:var(--tk-danger); }

.tk-compose-f{
  flex:1 1 auto;
  width:100%; border:0; display:block; background:#fff;
}

/* ============================================================
   19. ТЁМНЫЙ РЕЖИМ ТЕМЫ

   elastic включает его сам по настройке системы. Правильное
   лечение — dark_mode_support = false в конфиге; это подстраховка.
   ============================================================ */
html.dark-mode, html.dark-mode body{ background:var(--tk-page) !important; color:var(--tk-text) !important; }
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode .contentbox,
html.dark-mode .uibox,
html.dark-mode .listbox,
html.dark-mode .scroller,
html.dark-mode .header,
html.dark-mode .footer,
html.dark-mode #messagelist,
html.dark-mode #messagelist tbody tr{
  background-color:var(--tk-surface) !important; color:var(--tk-text) !important;
}
html.dark-mode td, html.dark-mode th, html.dark-mode label, html.dark-mode legend,
html.dark-mode .listing li a, html.dark-mode #messagelist span.subject,
html.dark-mode .header .header-title, html.dark-mode .propform td,
html.dark-mode .boxtitle{ color:var(--tk-text) !important; }
html.dark-mode .hint, html.dark-mode #messagelist span.fromto,
html.dark-mode #messagelist span.date{ color:var(--tk-muted) !important; }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea{
  background:#fff !important; color:var(--tk-text) !important; border-color:var(--tk-border-2) !important;
}
html.dark-mode .popupmenu, html.dark-mode .popover, html.dark-mode .ui-dialog{
  background:#fff !important; color:var(--tk-text) !important;
}

/* ============================================================
   20. ТЕЛЕФОН
   ============================================================ */
@media (max-width:768px){
  :root{ --tk-av:28px; }
  #messagelist tr.tk-has-av td.tk-cell{ padding-left:44px !important; }
  #messagelist span.tk-av{ left:6px !important; top:7px !important; }
  .tk-check{ right:8px; left:8px; width:auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   ОДНОСТРОЧНЫЙ РЕЖИМ (плагин elasticlayouts)

   Отступ сверху у строки-начала группы и подпись группы заданы
   один раз выше, в разделе «разделители». Здесь их повторять нельзя:
   второе правило перебивало первое и подпись налезала на письмо.
   ============================================================ */
/* Класса layout-list в Roundcube нет — правила под него удалены.
   Размер круга задан один раз выше и одинаков во всех режимах. */

.tk-check-head{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:#5C7BA6; padding:12px 10px 4px;
}
.tk-check{ width:min(94vw,460px); }

/* круг с фотографией: инициалы прячем, тень мягче */
#messagelist span.tk-av.tk-av-photo{
  box-shadow:inset 0 0 0 1px rgba(21,59,102,.12), 0 1px 3px rgba(21,59,102,.18) !important;
}

/* ============================================================
   ДЕЙСТВИЯ В СТРОКЕ ПИСЬМА
   ============================================================ */

/* Кнопки строки живут в ПОСЛЕДНЕЙ ячейке, у правого края.
   Раньше они садились в ячейку с аватаркой — то есть в узкую
   колонку «От» — и закрывали собой имя отправителя. */
#messagelist td.tk-actcell{ position:relative !important; overflow:visible !important; }

#messagelist span.tk-more,
#messagelist span.tk-quick{
  position:absolute !important;
  top:50%; transform:translateY(-50%);
  z-index:6;
}

/* три точки — всегда доступны, в том числе на телефоне */
#messagelist span.tk-more{
  right:2px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:var(--tk-muted);
  cursor:pointer;
  opacity:.55;
  background:var(--tk-surface);
  transition:opacity .14s, background .14s, color .14s;
}
#messagelist tr:hover span.tk-more{ opacity:1; }
#messagelist span.tk-more:hover{ background:#E8F1FB; color:var(--tk-accent-2); }

/* быстрые действия при наведении мышью */
#messagelist span.tk-quick{
  right:32px;
  display:none;
  align-items:center;
  gap:1px;
  padding-left:10px;
  /* растушёвка слева: кнопки накрывают дату, а не обрывают её */
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--tk-surface) 14px);
}
#messagelist tr:hover span.tk-quick{ display:flex; }
#messagelist tr:hover span.tk-quick,
#messagelist tr:hover span.tk-more{
  background-color:var(--tk-hover);
}
#messagelist tr.selected:hover span.tk-quick,
#messagelist tr.selected:hover span.tk-more{
  background-color:#EAF2FB;
}
#messagelist span.tk-qa{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  color:var(--tk-muted);
  cursor:pointer;
  transition:background .13s, color .13s;
}
#messagelist span.tk-qa:hover{ background:#E8F1FB; color:var(--tk-accent-2); }
#messagelist span.tk-qa.on{ color:var(--tk-danger); }

/* значок в кнопке не должен ловить события сам */
.tk-i{ pointer-events:none; display:block; flex:0 0 auto; }

/* ============================================================
   ПАНЕЛЬ НАД СПИСКОМ
   ============================================================ */
.tk-listbar{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  background:#F4F9FD;
  border-bottom:1px solid #DCE8F4;
  flex-wrap:wrap;
}
.tk-listbar button{
  border:0;
  background:none;
  padding:6px 10px;
  border-radius:8px;
  font:500 12.5px/1.3 inherit;
  color:#3A6291;
  cursor:pointer;
  white-space:nowrap;
  transition:background .13s, color .13s;
}
.tk-listbar button:hover{ background:#E3F0FB; color:#0d5fa0; }
.tk-listbar button:last-child{ margin-left:auto; }

/* ============================================================
   ПАНЕЛЬ ОТКРЫТОГО ПИСЬМА
   Скрытые кнопки не удалены — команды и клавиши работают,
   просто убраны с глаз в меню «⋯».
   ============================================================ */
.tk-hidden-btn{ display:none !important; }

.tk-msgmore{
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:#3A6291;
}
.tk-msgmore:hover{ color:#0d5fa0; }

/* ============================================================
   ПАНЕЛЬ АККАУНТА
   ============================================================ */
.tk-accbtn{
  border:0; background:none; cursor:pointer;
  color:#3A6291; font-size:13px; line-height:1;
  padding:4px 6px; border-radius:6px;
}
.tk-accbtn:hover{ background:#E3F0FB; color:#0d5fa0; }

.tk-acc{
  position:fixed; z-index:99998;
  width:min(92vw,320px); max-height:80vh; overflow:auto;
  background:#fff; border:1px solid #D6E3F0; border-radius:14px;
  box-shadow:0 18px 46px rgba(21,59,102,.22);
  font:13.5px/1.45 'Golos Text',system-ui,sans-serif; color:#1D3C61;
  padding:12px;
}
.tk-acc-me{ display:flex; align-items:center; gap:11px; padding:2px 2px 12px; }
.tk-acc-av{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  background:linear-gradient(135deg,#1e88d0,#0d5fa0); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px;
}
.tk-acc-txt b{ display:block; font-weight:600; font-size:13.5px; }
.tk-acc-txt small{ color:#7E9BB8; font-size:11.5px; }

.tk-acc-q{ padding:10px 2px 12px; border-top:1px solid #EAF1F8; }
.tk-acc-qt{ font-size:12.5px; color:#5C7BA6; margin-bottom:6px; }
.tk-acc-bar{ height:6px; border-radius:4px; background:#E7EFF7; overflow:hidden; }
.tk-acc-bar i{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#1e88d0,#0d5fa0); }

.tk-acc-links{ display:flex; flex-direction:column; gap:1px;
  padding-top:8px; border-top:1px solid #EAF1F8; }
.tk-acc-links button{
  border:0; background:none; text-align:left; cursor:pointer;
  padding:9px 10px; border-radius:8px; font:inherit; color:#1D3C61;
}
.tk-acc-links button:hover{ background:#F0F7FD; }
.tk-acc-links button.dang{ color:#C2352F; }
.tk-acc-links button.dang:hover{ background:rgba(194,53,47,.08); }

.tk-acc-h{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#8FA9C4; font-weight:700; padding:12px 10px 6px;
  border-top:1px solid #EAF1F8; margin-top:8px;
}
.tk-acc-list{ display:flex; flex-direction:column; gap:1px; }
.tk-acc-list button{
  display:flex; align-items:center; gap:9px;
  border:0; background:none; text-align:left; cursor:pointer;
  padding:7px 10px; border-radius:8px; font:inherit; font-size:13px; color:#1D3C61;
}
.tk-acc-list button:hover{ background:#F0F7FD; }
.tk-acc-av2{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:#DCE8F4; color:#3A6291;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:10.5px;
}

/* ============================================================
   ОТПИСКА ОТ РАССЫЛОК
   ============================================================ */
.tk-unsub{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px;
  background:#FFF8E9; border:1px solid #F0DFB8; border-radius:10px;
  font-size:13px; color:#7A5A12;
}
.tk-unsub-t{ flex:1; min-width:180px; }
.tk-unsub button{
  border:0; border-radius:8px; cursor:pointer;
  background:#1e88d0; color:#fff; font:600 12.5px/1 inherit;
  padding:8px 14px; white-space:nowrap;
}
.tk-unsub button:hover{ background:#0d5fa0; }
.tk-unsub button:disabled{ background:#9DB6CE; cursor:default; }
.tk-unsub.done{ background:#EEF7EE; border-color:#CBE4CB; color:#2C6B2C; }

/* ============================================================
   НАЧАЛО ТЕКСТА ПИСЬМА
   Показывается рядом с темой приглушённым цветом,
   как в почтовых клиентах: тема — главное, текст — подсказка.
   ============================================================ */
#messagelist span.tk-snip{
  color:#8FA9C4;
  font-weight:400;
  margin-left:8px;
  font-size:.95em;
}
#messagelist tr.unread span.tk-snip{ color:#7E9BB8; }
#messagelist tr.selected span.tk-snip{ color:#6D8CAD; }

/* на узком экране начало текста только мешает */
@media (max-width:620px){
  #messagelist span.tk-snip{ display:none; }
}

/* подсказка клавиши в пункте меню */
.tk-ctx button .tk-key{
  margin-left:auto;
  font-style:normal;
  font-size:11px;
  color:#9DB3CA;
  padding-left:14px;
  white-space:nowrap;
}
.tk-ctx button:hover .tk-key{ color:#6D8CAD; }

/* ============================================================
   22. ДОВОДКА ПО ЭТАЛОНУ

   Размеры и цвета в этом разделе не подобраны на глаз: они сняты
   со скриншотов, которые дал заказчик. Высота строки, диаметр
   аватарки и расстояние между разделителями измерены по пикселям,
   цвета взяты пипеткой.

   Раздел идёт последним намеренно — он должен побеждать всё, что
   выше, включая правила темы elastic.
   ============================================================ */

/* ---- строка письма ---- */
#messagelist tbody tr{
  border-bottom:1px solid var(--tk-border) !important;
  background:var(--tk-surface) !important;
}
#messagelist tbody tr > td{
  height:var(--tk-row) !important;
  padding-top:0 !important; padding-bottom:0 !important;
  font-size:14px !important;
}

/* наведение — мятная подсветка, выбор галочкой — серая.
   Так в эталоне: это два разных состояния, и путать их нельзя. */
#messagelist tbody tr:hover,
#messagelist tbody tr:hover > td{ background:var(--tk-hover) !important; }
#messagelist tbody tr.selected,
#messagelist tbody tr.selected > td{ background:var(--tk-sel) !important; }
#messagelist tbody tr.focused{ outline:0 !important; }

/* ---- признак непрочитанного: синяя точка вместо конверта ----
   elastic рисует здесь значок шрифтом; гасим его содержимое
   и оставляем кружок. */
#messagelist td.subject span.msgicon.status,
#messagelist span.msgicon.status{
  width:8px !important; height:8px !important;
  min-width:8px !important; max-width:8px !important;
  border-radius:50% !important;
  background:transparent !important;
  margin:0 10px 0 2px !important; padding:0 !important;
  flex:0 0 8px !important;
  font-size:0 !important; line-height:0 !important;
}
#messagelist span.msgicon.status::before,
#messagelist span.msgicon.status::after{
  content:"" !important; display:none !important;
}
#messagelist tr.unread span.msgicon.status{
  background:var(--tk-accent) !important;
}

/* ---- отправитель и тема ---- */
#messagelist span.fromto,
#messagelist td.fromto{
  font-size:14px !important; color:var(--tk-text) !important;
}
#messagelist tr.unread span.fromto{ font-weight:600 !important; }
#messagelist span.subject{ font-weight:400 !important; color:var(--tk-text) !important; }
#messagelist tr.unread span.subject{ font-weight:600 !important; }

/* начало текста письма идёт сразу за темой серым — как в эталоне */
#messagelist span.tk-snip{
  color:var(--tk-muted) !important;
  font-weight:400 !important;
  margin-left:10px !important;
  font-size:14px !important;
}

/* ---- дата ---- */
#messagelist span.date,
#messagelist td.date{
  color:var(--tk-muted-2) !important;
  font-size:13px !important;
  font-weight:400 !important;
}
#messagelist tr.unread span.date{ color:var(--tk-muted) !important; }

/* ---- подпись месяца ---- */
#messagelist tr.tk-gstart > td{ padding-top:30px !important; }
#messagelist tr.tk-gstart > td{ height:calc(var(--tk-row) + 30px) !important; }
#messagelist tr.tk-gstart::before{
  left:16px; top:7px;
  font-size:14px; font-weight:400; color:var(--tk-muted);
}

/* ---- аватарка ---- */
#messagelist span.tk-av{
  top:50% !important; transform:translateY(-50%) !important;
  font-size:12px !important; font-weight:500 !important;
}
#messagelist tr.tk-gstart span.tk-av{
  top:calc(50% + 15px) !important;
}

/* ---- боковая панель ---- */
#layout-sidebar{ background:var(--tk-page) !important; }
#layout-sidebar .header{ background:var(--tk-page) !important; border-bottom:0 !important; }
.tk-side-top{ background:var(--tk-page); }
.tk-side-foot{ background:var(--tk-page); border-top-color:var(--tk-border); }
#folderlist li a,
.listing li a{ font-size:14px !important; padding-top:8px !important; padding-bottom:8px !important; }
#folderlist li.selected > a,
.listing li.selected > a{
  background:#E3E5EA !important; color:var(--tk-text) !important;
  box-shadow:none !important; border-radius:8px !important;
}
.listing li a span.unreadcount{
  background:transparent !important; color:var(--tk-muted) !important;
  font-weight:400 !important; padding:0 !important;
}

/* ---- верхняя строка над списком ----
   На эталоне слева выбор и отметка прочитанным, справа фильтр
   со стрелкой. Кнопки крупные и с воздухом, чтобы попадать пальцем. */
.tk-lb-filter{ margin-left:auto !important; }
.tk-lb-filter .tk-i:last-child{ margin-left:2px; color:var(--tk-muted-2); }

.tk-listbar{
  background:var(--tk-surface) !important;
  border-bottom:1px solid var(--tk-border) !important;
  padding:8px 14px !important;
  gap:6px !important;
}
.tk-listbar button{
  display:flex; align-items:center; gap:8px;
  color:var(--tk-text) !important;
  font:400 14px/1.3 inherit !important;
  padding:8px 12px !important;
  border-radius:8px !important;
  min-height:36px;              /* удобно попадать пальцем */
  white-space:nowrap;
}
.tk-listbar button:hover{ background:var(--tk-hover) !important; color:var(--tk-text) !important; }
.tk-listbar button .tk-i{ color:var(--tk-muted); }

/* ---- окно написания ---- */
.tk-compose-back{ background:rgba(44,45,46,.45); }
.tk-compose-h{ background:var(--tk-surface) !important; }
.tk-compose-win{ border-radius:10px; }

/* ============================================================
   23. ОТМЕТКА ПИСЕМ НА КРУГЕ

   В эталоне отдельного столбца с квадратиками нет: отметка живёт
   на аватарке и проступает при наведении. Прячем столбец темы
   и учим круг переключаться.
   ============================================================ */
/* Скрывать нужно ИМЕННО таким селектором. Правило раскладки выше
   («tbody tr > td { display:flex }») специфичнее короткого
   «#messagelist td.selection» и перебивало его даже с !important —
   столбец с квадратиками оставался на экране. */
#messagelist td.selection,
#messagelist th.selection,
html.tk-list-mode #messagelist tbody tr > td.selection,
html.tk-list-mode #messagelist thead tr > th.selection{ display:none !important; }

/* Отметка КВАДРАТНАЯ — так на эталоне. Размер 15 пикселей и заливка
   сняты со снимка пипеткой. При наведении на круг проступает пустой
   квадратик, при выборе он заливается цветом и получает галочку. */
#messagelist span.tk-av{ cursor:pointer; overflow:visible; }
/* Дети круга не должны ловить нажатие сами.

   В list.js есть is_event_target: он пропускает мимо выделения только
   тот элемент, у которого ЕСТЬ собственный onclick, и смотрит именно
   на цель события, а не на её родителей. Обработчик висит на круге,
   поэтому нажатие по квадратику внутри проходило мимо этой проверки:
   список успевал выделить строку на mouseup, а наш обработчик следом
   снимал отметку — выделение «мигало» и не оставалось.

   Гасим события у детей: целью становится сам круг с обработчиком. */
#messagelist span.tk-av .tk-av-i,
#messagelist span.tk-av .tk-av-box,
#messagelist span.tk-av img{ pointer-events:none !important; }

#messagelist span.tk-av .tk-av-i{ font-style:normal; transition:opacity .12s; }

#messagelist span.tk-av .tk-av-box{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
  border:1.5px solid var(--tk-border-2);
  background:#fff; color:#fff;
  opacity:0; transition:opacity .12s, background .12s, border-color .12s;
}
#messagelist span.tk-av .tk-av-box .tk-i{ opacity:0; transition:opacity .1s; }

#messagelist tr:hover span.tk-av .tk-av-box{ opacity:1; }
#messagelist tr:hover span.tk-av .tk-av-i{ opacity:0; }
#messagelist tr:hover span.tk-av{ background:transparent !important; }

/* выбранное письмо: квадрат залит и держится без наведения */
#messagelist tr.tk-picked span.tk-av{ background:transparent !important; }
#messagelist tr.tk-picked span.tk-av .tk-av-box{
  opacity:1;
  background:var(--tk-accent);
  border-color:var(--tk-accent);
}
#messagelist tr.tk-picked span.tk-av .tk-av-box .tk-i{ opacity:1; }
#messagelist tr.tk-picked span.tk-av .tk-av-i{ opacity:0; }

/* фотография отправителя под квадратиком не должна просвечивать */
#messagelist tr:hover span.tk-av img,
#messagelist tr.tk-picked span.tk-av img{ opacity:0; }

/* Панель темы, убранная скриптом. Отдельный класс нужен потому, что
   правило по идентификатору зависело от ширины окна и специфичности
   и на узком мониторе не срабатывало. */
.tk-off{ display:none !important; }
#messagelist tr.tk-picked,
#messagelist tr.tk-picked > td{ background:var(--tk-sel) !important; }

/* ============================================================
   24. ВЕРХНЯЯ СТРОКА ДЕЙСТВИЙ

   Родная панель темы с крупными значками и подписями снизу
   в эталоне отсутствует — над списком там только выбор, отметка
   прочитанным и фильтр, а при отметке писем строка сменяется
   набором действий. Родную прячем, свою показываем.
   ============================================================ */
@media (min-width:900px){
  html.tk-list-mode #layout-list #messagetoolbar,
  html.tk-list-mode #layout-content > .header #messagetoolbar,
  html.tk-list-mode #messagetoolbar{ display:none !important; }
}

.tk-listbar{ position:relative; }
.tk-listbar .tk-listbar-sel{
  display:none;
  align-items:center; gap:6px;
  flex:1 1 auto;
  justify-content:flex-start;   /* иначе «Прочитать» уезжало к правому краю */
}
.tk-listbar.sel-mode > button{ display:none !important; }
.tk-listbar.sel-mode .tk-listbar-sel{ display:flex; }

.tk-listbar-sel button{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:6px 10px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-listbar-sel button:hover{ background:var(--tk-hover); }
.tk-listbar-sel button .tk-i{ color:var(--tk-muted); }
.tk-listbar-sel button.tk-lb-x{ padding:6px; }
/* Счётчик отмеченных: кружок с галочкой и обычная цифра —
   как на эталоне. Синей плашки там нет. */
.tk-listbar-sel .tk-lb-cnt{
  display:inline-flex; align-items:center; gap:7px;
  padding:0 6px 0 4px; color:var(--tk-muted);
}
.tk-listbar-sel .tk-lb-n{
  font:400 14px/1 inherit; color:var(--tk-text); font-style:normal;
}
.tk-listbar-sel .tk-lb-more{ padding:6px 10px !important; }

/* ============================================================
   25. НАСТРОЙКИ, КОНТАКТЫ И ПРОЧИЕ СТРАНИЦЫ

   Раньше скрипт подключался только в почте, и эти страницы
   оставались с тёмной полосой задач. Теперь на них та же светлая
   тема, а вместо полосы — строка перехода сверху.
   ============================================================ */
@media (min-width:900px){
  html.tk-other #layout{ padding-left:0 !important; }
}

.tk-nav{
  display:flex; align-items:center; gap:4px;
  padding:8px 12px;
  background:var(--tk-page);
  border-bottom:1px solid var(--tk-border);
}
.tk-nav-b{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:7px 12px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text-2);
}
.tk-nav-b:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-nav-b.on{ background:#E3E5EA; color:var(--tk-text); font-weight:600; }
.tk-nav-b .tk-i{ color:var(--tk-muted); }
.tk-nav-b.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-side-b.on{ background:#E3E5EA; font-weight:600; color:var(--tk-text); }

/* списки настроек и контактов — те же цвета, что и в почте */
#settings-menu li a,
#sections-table td,
#contacts-table td,
#directorylist li a{
  color:var(--tk-text) !important;
  font-size:14px !important;
}
#settings-menu li.selected > a,
#directorylist li.selected > a,
#sections-table tr.selected td,
#contacts-table tr.selected td{
  background:#E3E5EA !important; color:var(--tk-text) !important;
}
#contacts-table tr:hover td,
#sections-table tr:hover td,
#settings-menu li a:hover{ background:var(--tk-hover) !important; }

/* ============================================================
   26. ПАНЕЛЬ ОТКРЫТОГО ПИСЬМА

   Значок и подпись в одну строку, слева стрелка возврата,
   справа переход к соседним письмам — как на эталоне.
   Родные кнопки темы остаются в разметке скрытыми: Roundcube
   продолжает включать и выключать их сам, мы их нажимаем.
   ============================================================ */
.tk-hidden-btn{ display:none !important; }

.tk-msgbar{
  display:flex; align-items:center; gap:2px;
  width:100%; padding:6px 10px;
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
}
.tk-msgbar-r{ margin-left:auto; display:flex; align-items:center; gap:2px; }

.tk-mb{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:7px 12px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
  white-space:nowrap;
}
.tk-mb:hover{ background:var(--tk-hover); }
.tk-mb .tk-i{ color:var(--tk-muted); }
.tk-mb:hover .tk-i{ color:var(--tk-accent-2); }
.tk-mb.ico{ padding:8px; }
.tk-mb.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-mb.dang:hover .tk-i{ color:var(--tk-danger); }
.tk-mb.tk-up .tk-i{ transform:rotate(180deg); }

/* ============================================================
   27. МЕНЮ СО ЗНАЧКАМИ И КЛАВИШАМИ
   ============================================================ */
.tk-ctx button{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:9px 14px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
  background:none; border:0; cursor:pointer; text-align:left;
}
.tk-ctx button:hover{ background:var(--tk-hover); }
.tk-ctx button.dang{ color:var(--tk-danger); }
.tk-ctx button .tk-i{ color:var(--tk-muted); flex:0 0 auto; }
.tk-ctx button.dang .tk-i{ color:var(--tk-danger); }
.tk-ctx .tk-m-l{ flex:1 1 auto; min-width:0; }
.tk-ctx .tk-key{
  font-style:normal; color:var(--tk-muted-2); font-size:13px; flex:0 0 auto;
}
.tk-ctx .tk-m-dot{
  width:14px; height:14px; border-radius:3px; flex:0 0 14px; display:block;
}
.tk-ctx .tk-m-arr{ transform:rotate(-90deg); color:var(--tk-muted-2); }
.tk-ctx hr{ border:0; border-top:1px solid var(--tk-border); margin:5px 0; }

/* «Ещё»: редкие пункты спрятаны, пока не нажали */
.tk-ctx.has-more .tk-m-more{ display:none !important; }
.tk-ctx .tk-m-expand{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:9px 14px;
  border:0; border-top:1px solid var(--tk-border);
  background:none; cursor:pointer;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-ctx .tk-m-expand:hover{ background:var(--tk-hover); }
.tk-ctx .tk-m-expand .tk-i{ color:var(--tk-muted); }
.tk-ctx:not(.has-more) .tk-m-expand{ display:none; }

/* ============================================================
   28. ФИРМЕННЫЙ ЗНАК

   Птичка ГК ТЕКСА на месте, где у эталона стоит его логотип.
   Цвета берутся из переменных темы, поэтому знак меняется
   вместе с фирменным цветом.
   ============================================================ */
.tk-brand{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px 4px;
  cursor:pointer; user-select:none;
}
.tk-brand b{
  font:700 17px/1 inherit; letter-spacing:.02em; color:var(--tk-text);
}
.tk-brand:hover b{ color:var(--tk-accent-2); }
.tk-brand-sm{ padding:0 14px 0 2px; }
.tk-brand-sm b{ font-size:15px; }
.tk-brand-i{ display:block; flex:0 0 auto; }

/* ============================================================
   29. ДВЕ ПАНЕЛИ ВМЕСТО ТРЁХ

   На эталоне экран всегда поделён надвое: слева папки или меню,
   справа содержимое. Третья колонка появлялась пустой и тёмной,
   потому что её показывала тема, а класть в неё было нечего.
   ============================================================ */
@media (min-width:900px){

  /* ---- открытое письмо ---- */
  html.tk-msg-mode #layout-list{ display:none !important; }
  html.tk-msg-mode #layout-sidebar{
    display:flex !important;
    flex:0 0 var(--tk-side) !important;
    max-width:var(--tk-side) !important;
    min-width:var(--tk-side) !important;
  }
  html.tk-msg-mode #layout-content{
    display:flex !important; flex:1 1 auto !important;
    width:auto !important; max-width:none !important;
    background:var(--tk-surface) !important;
  }
  /* текст письма не растягиваем на весь монитор — читать невозможно */
  html.tk-msg-mode #layout-content .scroller > *{
    max-width:var(--tk-read); margin-left:auto; margin-right:auto; width:100%;
  }

}

/* ---- настройки и контакты: пустую колонку убираем ----
   Без ограничения по ширине окна: пустая тёмная колонка мешает
   на любом мониторе, а не только на широком. */
html.tk-other.tk-empty #layout-content{ display:none !important; }
html.tk-other #layout-list{ flex:1 1 auto !important; max-width:none !important; }
html.tk-other #layout-content{ background:var(--tk-surface) !important; }
html.tk-other #layout-content .watermark,
html.tk-other #layout-content iframe{ background:var(--tk-surface) !important; }

/* ============================================================
   30. ЧИТАЕМОСТЬ

   Жалоба «сложно читается» справедлива: тема красит прочитанные
   письма светло-серым, а поверх ещё и тёмный режим системы.
   Тема письма — основной текст списка, она обязана быть чёрной.
   ============================================================ */
#messagelist td.subject span.subject,
#messagelist td.subject span.subject a,
#messagelist td.subject span.subject a span,
#messagelist span.subject a{
  color:var(--tk-text) !important;
  opacity:1 !important;
}
#messagelist tr td,
#messagelist tr span.fromto,
#messagelist tr span.fromto span{ color:var(--tk-text) !important; }
#messagelist span.tk-snip{ color:var(--tk-muted) !important; }
#messagelist span.date, #messagelist td.date{ color:var(--tk-muted) !important; }

/* Подписи полей в поиске и настройках тема красит тёмной плашкой —
   на светлом фоне это выглядит как дыра. */
#searchmenu label,
#searchmenu .proplist td,
.propform td.title,
.propform th.title,
table.propform td.title{
  background:transparent !important;
  color:var(--tk-text-2) !important;
  font-weight:500 !important;
}

/* ============================================================
   31. ТЁМНАЯ ТЕМА

   Раньше тёмный режим просто гасился — это было лечение симптома:
   elastic красил поля и панели тёмным поверх наших светлых цветов,
   и читать становилось тяжело. Теперь у плагина своя тёмная палитра,
   и обе темы читаемы.

   Контраст проверен по требованию WCAG AA (4.5:1 для обычного текста):
     светлая — текст #2C2D2E на белом = 13.6:1, второстепенный
       #6F7178 на белом = 5.4:1;
     тёмная  — текст #E8E9EB на #1C1D20 = 13.1:1, второстепенный
       #9EA0A7 на #1C1D20 = 6.6:1.
   Оба значения второстепенного текста чуть темнее и светлее эталона
   соответственно: у mail.ru там 4.0:1, что ниже нормы и на плохом
   мониторе действительно плохо читается.
   ============================================================ */

:root{ --tk-muted:#6F7178; }

html.dark-mode{
  --tk-page:#141518;
  --tk-surface:#1C1D20;
  --tk-surface2:#232427;
  --tk-surface3:#26282C;
  --tk-hover:#1E2E28;      /* та же мятная подсветка, но приглушённая */
  --tk-sel:#2A2C31;
  --tk-border:#2E3034;
  --tk-border-2:#3A3D42;

  --tk-text:#E8E9EB;
  --tk-text-2:#D2D4D8;
  --tk-muted:#9EA0A7;
  --tk-muted-2:#82848B;

  /* фирменный синий на тёмном фоне светлее: исходный #1e88d0
     даёт всего 3.1:1 и читается плохо */
  --tk-accent:#57ABE8;
  --tk-accent-2:#8CC6F2;
  --tk-accent-rgb:87,171,232;

  --tk-danger:#F08A82;
  --tk-ok:#6BC38F;
  --tk-warn:#E8A857;

  --tk-shadow:0 8px 24px rgba(0,0,0,.55);

  color-scheme:dark;
}

/* Панели и поля тема красит своими цветами — переводим на наши.
   Иначе получается светлый текст на светлом поле. */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode .scroller,
html.dark-mode #messagelist,
html.dark-mode #messagelist tbody tr,
html.dark-mode #messagelist tbody tr > td,
html.dark-mode .contentbox,
html.dark-mode .uibox,
html.dark-mode .formcontent,
html.dark-mode .propform,
html.dark-mode .boxtitle,
html.dark-mode .watermark{
  background-color:var(--tk-surface) !important;
  color:var(--tk-text) !important;
}
html.dark-mode #layout-sidebar,
html.dark-mode .tk-side-top,
html.dark-mode .tk-side-foot,
html.dark-mode #layout-sidebar .header,
html.dark-mode .tk-nav{ background-color:var(--tk-page) !important; }

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control,
html.dark-mode #searchmenu,
html.dark-mode .tk-ctx,
html.dark-mode .tk-compose-win,
html.dark-mode .tk-check{
  background-color:var(--tk-surface2) !important;
  color:var(--tk-text) !important;
  border-color:var(--tk-border) !important;
}

html.dark-mode .tk-write{
  background:var(--tk-surface2) !important;
  border-color:var(--tk-border-2) !important;
  color:var(--tk-text) !important;
}
html.dark-mode .tk-write:hover{ background:var(--tk-surface3) !important; }

/* Текст письма приходит из чужой вёрстки и часто задан чёрным.
   На тёмном фоне это нечитаемо, поэтому подложку письма оставляем
   светлой — так делают и почтовые клиенты с тёмной темой. */
html.dark-mode #messagebody,
html.dark-mode #message-content .message-part,
html.dark-mode #messagecontframe{
  background:#FFFFFF !important;
  color:#2C2D2E !important;
}

/* выбранная папка и отмеченное письмо на тёмном */
html.dark-mode #folderlist li.selected > a,
html.dark-mode .listing li.selected > a,
html.dark-mode .tk-side-b.on,
html.dark-mode .tk-nav-b.on{
  background:var(--tk-sel) !important; color:var(--tk-text) !important;
}
html.dark-mode #messagelist tbody tr:hover,
html.dark-mode #messagelist tbody tr:hover > td{ background:var(--tk-hover) !important; }
html.dark-mode #messagelist tbody tr.tk-picked,
html.dark-mode #messagelist tbody tr.tk-picked > td{ background:var(--tk-sel) !important; }
html.dark-mode #messagelist span.tk-av .tk-av-box{
  background:var(--tk-surface2); border-color:var(--tk-border-2);
}

/* Знак ТЕКСА и значки наследуют цвет текста, отдельной правки не нужно.
   Проверять читаемость обеих тем: node contrast.js */

/* ============================================================
   32. ОКНО НАПИСАНИЯ ИЗНУТРИ

   Внутри окна работает обычная страница написания Roundcube.
   Приводим её к виду с видео: строка вложений под полями,
   синяя кнопка отправки внизу, без заголовка и кнопки меню —
   они дублировали шапку самого окна.
   ============================================================ */
html.tk-inmodal #layout-content > .header .task-menu-button,
html.tk-inmodal #layout-content > .header > .header-title{ display:none !important; }

html.tk-inmodal #layout-content > .header{
  background:var(--tk-surface) !important;
  border-bottom:1px solid var(--tk-border) !important;
  min-height:auto !important;
}
/* Панель в окне письма БОЛЬШЕ НЕ ПОКАЗЫВАЕМ.

   Здесь задавалась видимость — я оформлял её, когда думал, что
   она нужна. Потом решил убрать (разделы 86 и 88), но это
   правило осталось и перебивало пряталку: оно специфичнее.

   Оформление оставляем на случай, если панель когда-нибудь
   понадобится, но видимость ей не задаём. */
html.tk-inmodal #messagetoolbar.toolbar{
  flex-wrap:wrap; gap:2px;
  padding:4px 8px !important;
}
html.tk-inmodal #messagetoolbar a{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:7px 12px !important; border-radius:8px;
  color:var(--tk-text) !important; font-size:14px !important;
}
html.tk-inmodal #messagetoolbar a:hover{ background:var(--tk-hover) !important; }

/* поля «Кому» и «Тема» — крупнее и с воздухом, как на видео */
html.tk-inmodal #compose-headers td,
html.tk-inmodal .compose-headers .form-group{ padding:4px 0 !important; }
html.tk-inmodal #compose-headers input,
html.tk-inmodal .compose-headers input{
  font-size:15px !important; padding:8px 10px !important;
}

/* подвал с кнопками: отправка — основным цветом */
html.tk-inmodal #layout-content > .footer{
  background:var(--tk-surface) !important;
  border-top:1px solid var(--tk-border) !important;
  padding:10px 14px !important;
}
html.tk-inmodal #layout-content > .footer a.send,
html.tk-inmodal #layout-content > .footer button.send,
html.tk-inmodal .buttons a.send{
  background:var(--tk-accent) !important; color:#fff !important;
  border-radius:8px !important; padding:10px 22px !important;
  font-weight:600 !important;
}
html.tk-inmodal #layout-content > .footer a.send:hover{ background:var(--tk-accent-2) !important; }

/* боковая колонка вложений и настроек внутри окна уже; на широком
   экране она полезна, на узком — мешает и уезжает за край */
@media (max-width:1100px){
  html.tk-inmodal #layout-sidebar.sidebar-right{ display:none !important; }
}

/* ============================================================
   33. ШАПКА И НИЗ ОТКРЫТОГО ПИСЬМА
   ============================================================ */
html.tk-msg-mode #message-header{
  padding:18px 24px 12px !important;
  background:var(--tk-surface) !important;
  border-bottom:1px solid var(--tk-border) !important;
}
html.tk-msg-mode #message-header h2.subject{
  font:600 22px/1.3 inherit !important;
  color:var(--tk-text) !important;
  margin:0 0 14px !important;
}
html.tk-msg-mode #message-header .header .contactphoto{
  width:40px !important; height:40px !important;
  border-radius:50% !important; overflow:hidden; flex:0 0 40px !important;
}
html.tk-msg-mode #message-header .header-summary,
html.tk-msg-mode #message-header .header-headers{
  font-size:14px !important; color:var(--tk-text) !important;
}
html.tk-msg-mode #message-header .header-headers .header-title{
  color:var(--tk-muted) !important;
}

/* нижняя полоса действий под письмом */
.tk-msgfoot{
  position:sticky; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  padding:10px 20px;
  background:var(--tk-surface2);
  border-top:1px solid var(--tk-border);
}
.tk-mf{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:8px 14px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-mf:hover{ background:var(--tk-hover); }
.tk-mf .tk-i{ color:var(--tk-muted); }

/* ============================================================
   34. СТРАНИЦЫ НАСТРОЕК

   На видео это не таблица, а карточка: крупный заголовок раздела,
   подзаголовки, описания серым, поля с воздухом.
   ============================================================ */
html.tk-other #layout-list .scroller,
html.tk-other #layout-content .scroller{ background:var(--tk-page) !important; }

html.tk-other .formcontent,
html.tk-other .contentbox,
html.tk-other .uibox,
html.tk-other fieldset.propform{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:12px !important;
  padding:20px 24px !important;
  margin:14px 16px !important;
  box-shadow:none !important;
}
html.tk-other legend,
html.tk-other .boxtitle,
html.tk-other h2.boxtitle{
  font:600 19px/1.3 inherit !important;
  color:var(--tk-text) !important;
  background:transparent !important;
  border:0 !important;
  padding:0 0 12px !important;
}
html.tk-other .propform td.title,
html.tk-other .propform th.title{
  width:auto !important; min-width:220px;
  color:var(--tk-text-2) !important;
  font-weight:400 !important;
  padding:9px 14px 9px 0 !important;
}
html.tk-other .propform td{ padding:9px 0 !important; }
html.tk-other input[type=text],
html.tk-other input[type=password],
html.tk-other input[type=email],
html.tk-other select,
html.tk-other textarea{
  border:1px solid var(--tk-border-2) !important;
  border-radius:8px !important;
  padding:9px 12px !important;
  font-size:14px !important;
  background:var(--tk-surface) !important;
  color:var(--tk-text) !important;
}
html.tk-other input:focus,
html.tk-other select:focus,
html.tk-other textarea:focus{
  border-color:var(--tk-accent) !important;
  outline:2px solid rgba(var(--tk-accent-rgb),.18) !important;
  outline-offset:0 !important;
}
html.tk-other .formbuttons button,
html.tk-other .footer button.submit,
html.tk-other button.save{
  background:var(--tk-accent) !important; color:#fff !important;
  border:0 !important; border-radius:8px !important;
  padding:10px 22px !important; font-weight:600 !important;
}
html.tk-other .formbuttons button:hover{ background:var(--tk-accent-2) !important; }

/* ============================================================
   35. РАЗДЕЛЕНИЕ ПАНЕЛЕЙ И ТЁМНАЯ ТЕМА НА ДЕЛЕ

   На записи всё сливалось в одно серое полотно: панель папок,
   список и письмо шли без границ и без разницы в фоне.
   Разводим их по слоям, как в эталоне.
   ============================================================ */
#layout-sidebar{
  background:var(--tk-page) !important;
  border-right:1px solid var(--tk-border) !important;
}
#layout-list{ background:var(--tk-surface) !important; }
#layout-content{
  background:var(--tk-surface) !important;
  border-left:1px solid var(--tk-border) !important;
}

/* В тёмной теме разница фонов должна быть заметнее: на глаз
   два соседних тёмных оттенка почти не различаются. */
html.dark-mode #layout-sidebar{ background:#101114 !important; }
html.dark-mode #layout-list,
html.dark-mode #layout-content{ background:#1C1D20 !important; }
html.dark-mode #layout-sidebar,
html.dark-mode #layout-content{ border-color:#2E3034 !important; }

/* Ячейки папок были слишком высокими — список не влезал на экран. */
#folderlist li a,
.listing li a{
  padding-top:7px !important; padding-bottom:7px !important;
  min-height:auto !important;
  line-height:1.35 !important;
}
#layout-sidebar .scroller{ padding:2px 8px !important; }
#folderlist li,
.listing li{ border:0 !important; }

/* Кнопка смены темы */
.tk-theme .tk-i{ color:var(--tk-accent) !important; }

/* ============================================================
   36. ПРАВЫЙ КРАЙ СТРОКИ И ПОМЕТКИ

   На записи справа шёл столбец скрепок — по одной у каждого письма,
   даже без вложения, — а флажок пропал совсем. Это родные колонки
   темы: скрепка там рисуется всегда, флажок теряется под нашими
   кнопками. Прячем обе и рисуем сами, по данным письма.
   ============================================================ */
/* Прячем БЕЗУСЛОВНО, а не только в нашей раскладке. Пока условие
   стояло, столбец скрепок оставался везде, где класс раскладки
   ещё не проставлен — при загрузке, в поиске, в других папках. */
#messagelist td.attachment,
#messagelist th.attachment,
#messagelist td.flag,
#messagelist th.flag,
#messagelist td.flags,
#messagelist th.flags,
#messagelist tbody tr > td.attachment,
#messagelist thead tr > th.attachment,
#messagelist tbody tr > td.flags,
#messagelist thead tr > th.flags,
#messagelist tbody tr > td.flag,
html.tk-list-mode #messagelist tbody tr > td.attachment,
html.tk-list-mode #messagelist thead tr > th.attachment,
html.tk-list-mode #messagelist tbody tr > td.flags,
html.tk-list-mode #messagelist thead tr > th.flags,
html.tk-list-mode #messagelist tbody tr > td.flag{ display:none !important; }

/* и та же скрепка, когда она лежит внутри ячейки темы */
#messagelist td.subject span.attachment,
#messagelist span.subject span.attachment{ display:none !important; }

/* свои пометки — слева от даты, только когда они есть */
#messagelist .tk-marks{
  display:inline-flex; align-items:center; gap:5px;
  margin-right:8px; vertical-align:middle;
}
#messagelist .tk-mark-att{ color:var(--tk-muted-2); }
#messagelist .tk-mark-flag{ color:var(--tk-danger); }

/* Своя ячейка под кнопки: раньше они лезли в колонку вложений,
   скрепка перекрывала удаление, и оно не срабатывало. */
html.tk-list-mode #messagelist tbody tr > td.tk-actcell{
  order:10 !important;
  flex:0 0 auto !important;
  position:relative !important;
  overflow:visible !important;
  width:34px; min-width:34px;
  padding:0 !important;
}

/* ============================================================
   37. РАЗДЕЛЫ НАСТРОЕК ОТКРЫВАЮТСЯ НА МЕСТЕ СПИСКА

   Раньше выбранный раздел вылезал третьей колонкой справа
   и уезжал за край экрана. Теперь он занимает место списка:
   слева меню, справа раздел.
   ============================================================ */
html.tk-other.tk-other-open #layout-list{ display:none !important; }
html.tk-other.tk-other-open #layout-content{
  display:flex !important;
  flex:1 1 auto !important;
  width:auto !important; max-width:none !important;
}
html.tk-other.tk-other-open #layout-content .back-list-button,
html.tk-other.tk-other-open #layout-content .back-sidebar-button{
  display:inline-flex !important; align-items:center;
}

/* ============================================================
   38. СТРАНИЦА ВХОДА

   Собрана по образцу входа в ЕРП: спокойный голубой фон, белая
   карточка строго по центру экрана, знак ТЕКСА сверху, синяя кнопка
   во всю ширину. Всё лишнее, что рисует тема, убрано: собственный
   логотип Roundcube, подпись «Roundcube Webmail», серые плашки
   со значками у полей и полоса перехода.
   ============================================================ */
html.tk-login,
html.tk-login body{
  background:#D6E6F5 !important;
  color:var(--tk-text) !important;
  min-height:100%;
  margin:0 !important;
}

/* Карточку центрируем на всём экране. Раньше центрирование стояло
   на нескольких вложенных блоках сразу, и они спорили друг с другом —
   карточка уезжала вправо и вниз. Теперь центрует ОДИН блок. */
/* Центрирование задано ОДИН раз, ниже в разделе 43.
   Здесь оно стояло вторым, блоки спорили — карточка съезжала. */
html.tk-login #layout-content,
html.tk-login #layout-content > .content{
  display:block !important;
  flex:0 0 auto !important;
  width:auto !important; max-width:none !important;
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible !important;
}

/* лишнее с чужой страницы */
html.tk-login #layout-menu,
html.tk-login #layout-sidebar,
html.tk-login #layout-list,
html.tk-login #tk-nav,
html.tk-login .header,
html.tk-login .footer,
html.tk-login #logo,
html.tk-login .logo,
/* Подпись «Roundcube Webmail» лежит в #login-footer, а не в .product-name —
   это видно по шаблону login.html темы. Прежний селектор мимо. */
html.tk-login #login-footer,
html.tk-login #login-form .product-name,
html.tk-login .product-name,
html.tk-login .support-link,
html.tk-login #message,
html.tk-login label > .input-group-prepend,
html.tk-login .input-group-prepend,
html.tk-login .input-group-text{ display:none !important; }

html.tk-login #login-form,
html.tk-login .box-inner,
html.tk-login form[name=form]{
  width:min(92vw, 370px);
  background:#fff !important;
  border:1px solid #C7DAEC !important;
  border-radius:14px !important;
  padding:32px 32px 28px !important;
  box-shadow:0 12px 36px rgba(20,60,100,.16) !important;
  margin:0 auto !important;
  box-sizing:border-box;
}

.tk-login-mark{
  display:flex; flex-direction:column; align-items:center;
  gap:6px; margin-bottom:26px; text-align:center;
}
.tk-login-mark b{
  font:700 20px/1.15 inherit; letter-spacing:.16em; color:#0d5fa0;
}
.tk-login-mark span{ font-size:12px; color:var(--tk-muted); }

/* поля: подпись сверху, поле во всю ширину, без плашек со значками */
html.tk-login .form-group,
html.tk-login .input-group{
  display:block !important; width:100% !important; margin:0 !important;
}
html.tk-login label{
  display:block !important;
  font-size:13px; color:var(--tk-muted);
  margin:0 0 6px !important; padding:0 !important;
  text-align:left; background:none !important; border:0 !important;
  width:auto !important; height:auto !important;
}
html.tk-login input[type=text],
html.tk-login input[type=password],
html.tk-login input.form-control{
  width:100% !important; box-sizing:border-box;
  border:1px solid #C7DAEC !important; border-radius:9px !important;
  padding:11px 13px !important; font-size:15px !important;
  background:#FBFDFF !important; color:var(--tk-text) !important;
  margin:0 0 16px !important;
  box-shadow:none !important;
}
html.tk-login input:focus{
  border-color:var(--tk-accent) !important;
  outline:2px solid rgba(var(--tk-accent-rgb),.16) !important;
  outline-offset:0 !important;
}
html.tk-login button[type=submit],
html.tk-login .btn-primary,
html.tk-login input[type=submit]{
  width:100% !important;
  background:#0d5fa0 !important; color:#fff !important;
  border:0 !important; border-radius:9px !important;
  padding:12px 18px !important; margin:6px 0 0 !important;
  font:600 15px/1.2 inherit !important;
  letter-spacing:.02em; text-transform:none !important;
  cursor:pointer; box-shadow:none !important;
}
html.tk-login button[type=submit]:hover{ background:#0a4e85 !important; }

/* на входе тёмная тема не применяется: карточка задумана светлой */
html.tk-login.dark-mode,
html.tk-login.dark-mode body{ background:#D6E6F5 !important; }
html.tk-login.dark-mode #login-form{ background:#fff !important; }

/* ---- поле пароля с глазиком и «Запомнить меня» ---- */
html.tk-login .tk-pass-wrap{ position:relative; display:block; }
html.tk-login .tk-pass-wrap input{ padding-right:44px !important; }
/* Глазик по центру поля, а не привязан к верхнему краю:
   при разной высоте поля он съезжал. */
.tk-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:8px;
  color:var(--tk-muted); cursor:pointer; padding:0;
}
.tk-eye:hover{ background:#EDF4FB; color:var(--tk-accent-2); }
.tk-eye.on{ color:var(--tk-accent-2); }

.tk-remember{
  display:flex !important; align-items:center; gap:12px;
  width:100%; box-sizing:border-box;
  margin:2px 0 20px !important; padding:0 2px !important;
  font-size:14px !important; color:var(--tk-text) !important;
  cursor:pointer; user-select:none;
}
.tk-remember input{
  /* Тема рисует галочку своим способом и на входе получался чёрный
     квадрат, а подпись сливалась с белым фоном. Рисуем сами. */
  appearance:none !important; -webkit-appearance:none !important;
  width:18px !important; height:18px !important;
  flex:0 0 18px !important; margin:0 !important;
  border:1.5px solid var(--tk-border-2) !important;
  border-radius:5px !important;
  background:#fff !important;
  cursor:pointer; position:relative; opacity:1 !important;
}
.tk-remember input:checked{
  background:#0d5fa0 !important; border-color:#0d5fa0 !important;
}
.tk-remember input:checked::after{
  content:''; position:absolute; left:5px; top:1px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.tk-remember span{
  color:var(--tk-text) !important; font-size:14px;
}


/* ============================================================
   39. БЕЗ МИГАНИЯ ЧУЖОГО ВИДА

   Классы раскладки теперь приходят с сервера (см. early_classes
   в teksa_ui.php), поэтому фон и панели красятся с первого кадра.
   Здесь — только фон документа, чтобы не мелькала белая вспышка
   при переходах в тёмной теме.
   ============================================================ */
html.tk-early{ background:var(--tk-page); }
html.tk-early.dark-mode{ background:#141518; }
html.tk-early body{ background:var(--tk-page); }
html.tk-early.dark-mode body{ background:#141518; }
html.tk-early.tk-login,
html.tk-early.tk-login body{ background:#D6E6F5 !important; }

/* Полосу задач прячем сразу, а не после запуска скрипта. */
html.tk-early.tk-nomenu #layout-menu,
html.tk-early.tk-nomenu #taskmenu{ display:none !important; }


/* ============================================================
   40. ОКНО НАПИСАНИЯ ДОЛЖНО БЫТЬ ВИДНО

   На записи окно создавалось, но оставалось невидимым: тема
   elastic держит собственные слои с высоким z-index, и окно
   уходило под них. Поднимаем выше и не даём наследовать
   ограничения родителя.
   ============================================================ */
.tk-compose{
  z-index:2147483000 !important;   /* выше любых слоёв темы */
  position:fixed !important;
  inset:0 !important;
}
.tk-compose.show{ display:flex !important; }
.tk-compose-win{
  position:relative !important;
  min-width:320px; min-height:320px;
  max-height:none;
}

/* Пока окно открыто, страница под ним не прокручивается. */
html.tk-composing, html.tk-composing body{ overflow:hidden !important; }

/* ============================================================
   41. ЧИТАЕМОСТЬ: РАЗБОР ПО СНИМКАМ С СЕРВЕРА

   Всё ниже правится не «на глаз», а по конкретным местам,
   которые видно на снимках обхода.
   ============================================================ */

/* ---- 41.1 Настройки: текст в полях обрезался снизу ----
   На снимке «Пользовательский интерфейс» строки «Определять
   автоматически», «07:30», «2026-07-24» срезаны по нижнему краю.
   Причина: тема задаёт полям жёсткую высоту, а мой отступ
   выталкивал текст за неё. Задаём высоту от содержимого. */
html.tk-other input[type=text],
html.tk-other input[type=password],
html.tk-other input[type=email],
html.tk-other input[type=number],
html.tk-other select,
html.tk-other textarea{
  height:auto !important;
  min-height:40px !important;
  line-height:1.4 !important;
  padding:9px 12px !important;
  box-sizing:border-box !important;
}
html.tk-other select{ padding-right:30px !important; }

/* ---- 41.2 Настройки: подпись и поле разъезжались по краям ----
   Подпись у левого края, поле у правого, между ними полметра
   пустоты — глазу приходится прыгать. Сводим в читаемую колонку. */
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .propform{
  max-width:900px !important;
}
html.tk-other .propform td.title,
html.tk-other .propform th.title{
  width:44% !important; max-width:360px !important;
  vertical-align:middle !important;
}
html.tk-other .propform td{ vertical-align:middle !important; }

/* ---- 41.3 Настройки: колонка меню была шире содержимого ---- */
@media (min-width:900px){
  html.tk-other #layout-sidebar{
    flex:0 0 240px !important;
    max-width:240px !important;
    min-width:240px !important;
  }
}

/* ---- 41.4 Тёмная тема: панели сливались в одно полотно ----
   На снимке список и папки почти неразличимы, границ не видно.
   Разводим фоны заметнее и делаем разделители видимыми. */
html.dark-mode #layout-sidebar{ background:#0D0E11 !important; }
html.dark-mode #layout-list,
html.dark-mode #layout-content{ background:#1A1B1F !important; }
html.dark-mode #layout-sidebar,
html.dark-mode #layout-content{ border-color:#33363C !important; }
html.dark-mode{ --tk-border:#33363C; }
html.dark-mode #messagelist tbody tr{
  border-bottom:1px solid #2A2C31 !important;
}

/* шапка со строкой поиска и панелью действий — на полтона светлее,
   чтобы отделялась от списка */
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode .tk-listbar,
html.dark-mode .tk-msgbar{
  background:#232529 !important;
  border-bottom:1px solid #33363C !important;
}

/* ---- 41.5 Тёмная тема: непрочитанное должно быть заметно ---- */
html.dark-mode #messagelist tr.unread span.subject,
html.dark-mode #messagelist tr.unread span.fromto{
  color:#FFFFFF !important; font-weight:600 !important;
}
html.dark-mode #messagelist span.tk-snip{ color:#9EA0A7 !important; }
html.dark-mode #messagelist span.date,
html.dark-mode #messagelist td.date{ color:#9EA0A7 !important; }

/* ---- 41.6 Пустая шапка над разделом настроек ----
   Наверху висела полоса с одинокой стрелкой и пустотой. */
html.tk-other #layout-content > .header:empty,
html.tk-other #layout-list > .header:empty{ display:none !important; }

/* ---- 41.7 Кнопка «Сохранить» прижималась к краю ---- */
html.tk-other .formbuttons{
  padding:14px 24px !important;
  border-top:1px solid var(--tk-border) !important;
  background:var(--tk-surface) !important;
}

/* ============================================================
   42. ОКНО НАПИСАНИЯ: СВЕРКА С ЭТАЛОНОМ

   Что на снимке 89 расходится с образцом:
   — «Отправить» белая и незаметная, в образце это синяя кнопка;
   — панель темы рисует крупные значки с подписями снизу,
     в образце — компактная строка;
   — рядом с отправкой нет «Отменить».
   ============================================================ */

/* Кнопка отправки. Прежнее правило целилось в «a.send внутри подвала»,
   а тема рисует её иначе — потому и не срабатывало. Целимся по команде,
   это надёжнее любого предположения о вёрстке. */
html.tk-inmodal a.send,
html.tk-inmodal button.send,
html.tk-inmodal [data-command="send"],
html.tk-inmodal .buttons .send{
  background:var(--tk-accent) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:9px !important;
  padding:11px 26px !important;
  font-weight:600 !important;
  font-size:15px !important;
  box-shadow:none !important;
}
html.tk-inmodal a.send:hover,
html.tk-inmodal button.send:hover,
html.tk-inmodal [data-command="send"]:hover{
  background:var(--tk-accent-2) !important;
}
html.tk-inmodal a.send .inner,
html.tk-inmodal [data-command="send"] .inner{ color:#fff !important; }

/* Остальные кнопки подвала — спокойные, рядом с синей */
html.tk-inmodal [data-command="savedraft"],
html.tk-inmodal a.savedraft,
html.tk-inmodal button.savedraft{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border-2) !important;
  border-radius:9px !important;
  padding:11px 20px !important;
  color:var(--tk-text) !important;
}

/* Панель темы: значок и подпись в одну строку, а не столбиком */
html.tk-inmodal #messagetoolbar a,
html.tk-inmodal #messagetoolbar button{
  flex-direction:row !important;
  gap:8px !important;
  font-size:14px !important;
}
html.tk-inmodal #messagetoolbar a .inner,
html.tk-inmodal #messagetoolbar button .inner{
  font-size:14px !important;
  display:inline !important;
  margin:0 !important;
}

/* Поля «От / Кому / Тема»: подпись и поле ближе друг к другу */
html.tk-inmodal #compose-headers td.title,
html.tk-inmodal .compose-headers label{
  width:88px !important; min-width:88px !important;
  color:var(--tk-muted) !important;
  font-size:14px !important;
  padding-right:10px !important;
}
html.tk-inmodal #compose-headers input,
html.tk-inmodal .compose-headers input{
  border:1px solid var(--tk-border) !important;
  border-radius:8px !important;
  min-height:40px !important;
  height:auto !important;
  line-height:1.4 !important;
}

/* «Отменить» рядом с отправкой — её добавляет плагин, у темы такой нет */
.tk-cancel{
  background:var(--tk-surface); border:1px solid var(--tk-border-2);
  border-radius:9px; padding:11px 20px; margin-left:8px;
  font:400 15px/1.2 inherit; color:var(--tk-text); cursor:pointer;
}
.tk-cancel:hover{ background:var(--tk-hover); }


/* ============================================================
   43. ВХОД: ЧЁРНЫЙ ПРЯМОУГОЛЬНИК И СЪЕХАВШАЯ КАРТОЧКА

   На телефоне над карточкой висел чёрный прямоугольник, а сама
   карточка стояла ниже середины. Прямоугольник — пустая область
   темы, которую в тёмном режиме красит системная тема; карточку
   же прижимало вниз, потому что центрировался не тот блок.

   Вход всегда светлый: он в цветах ЕРП, тёмная тема к нему
   не применяется вовсе.
   ============================================================ */
/* Прозрачным делаем ОБЁРТКИ, но не саму карточку: из-за этого
   правила она лишилась белого фона и повисла прямо на голубом. */
html.tk-login,
html.tk-login body,
html.tk-login #layout,
html.tk-login #layout-content,
html.tk-login #layout-content > *:not(form):not(.content),
html.tk-login .content,
html.tk-login .content > *:not(form){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--tk-text) !important;
}
html.tk-login,
html.tk-login body{ background:#D6E6F5 !important; }

/* всё, кроме самой формы, с экрана входа убираем */
html.tk-login #layout > *:not(#layout-content),
html.tk-login #layout-content > *:not(.content):not(form),
html.tk-login .content > *:not(form):not(#login-form),
html.tk-login iframe,
html.tk-login .watermark,
html.tk-login #messagestack{ display:none !important; }

/* карточка строго по центру: центрирует ОДИН блок, остальные не мешают */
html.tk-login #layout{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  padding:24px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
html.tk-login #layout-content,
html.tk-login .content{
  display:block !important;
  width:auto !important; max-width:100% !important;
  min-height:0 !important; height:auto !important;
  padding:0 !important; margin:0 !important;
  position:static !important;
  overflow:visible !important;
}

/* на телефоне карточка шире и с большими полями ввода */
@media (max-width:520px){
  html.tk-login #login-form,
  html.tk-login form[name=form]{
    width:100% !important; max-width:400px !important;
    padding:26px 22px 24px !important;
  }
  html.tk-login input[type=text],
  html.tk-login input[type=password]{
    font-size:16px !important;     /* меньше 16 — телефон приближает экран */
    min-height:46px !important;
  }
  html.tk-login button[type=submit]{ min-height:48px !important; }
}

/* «Запомнить меня» — подпись была почти не видна */
.tk-remember span{
  color:var(--tk-text) !important;
  font-size:14px !important;
  opacity:1 !important;
}

/* Класс приходит с сервера: вход не должен мигнуть тёмным. */
html.tk-force-light,
html.tk-force-light body{
  background:#D6E6F5 !important;
  color-scheme:light !important;
}
html.tk-force-light.dark-mode{ background:#D6E6F5 !important; }

/* ============================================================
   44. БОКОВАЯ ПАНЕЛЬ И ВЕРХ СПИСКА — СВЕРКА С ЭТАЛОНОМ

   Что расходилось на снимке 1920-10-список:
   — над списком висела панель действий письма, которой на эталоне
     там нет вовсе: она должна появляться только при чтении;
   — служебные папки назывались по-английски (Outbox, Snoozed);
   — не было кнопки «Новая папка» внизу списка папок.
   ============================================================ */

/* панель действий письма показывается только в режиме чтения */
.tk-msgbar-idle{ display:none !important; }
html.tk-reading .tk-msgbar-idle{ display:flex !important; }

/* Шапку колонки письма НЕ прячем: в ней живёт панель действий.
   Прежнее правило убирало её целиком, и письмо открывалось
   без кнопок вообще. */

/* «Новая папка» */
.tk-newfolder{
  display:flex; align-items:center; gap:9px;
  width:calc(100% - 16px); margin:6px 8px 10px;
  padding:9px 12px; border:0; border-radius:8px;
  background:none; cursor:pointer;
  font:400 14px/1.3 inherit; color:var(--tk-muted);
  text-align:left;
}
.tk-newfolder:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-newfolder .tk-i{ color:var(--tk-muted); }

/* счётчик непрочитанных — как на эталоне, справа и неярко */
#folderlist li a .unreadcount,
.listing li a .unreadcount{
  margin-left:auto !important;
  background:transparent !important;
  color:var(--tk-muted) !important;
  font-weight:400 !important;
  font-size:13px !important;
  padding:0 !important; min-width:0 !important;
}
#folderlist li a,
.listing li a{ display:flex !important; align-items:center; gap:10px; }


/* Карточка входа держит свой вид поверх любых обёрточных правил */
html.tk-login #login-form,
html.tk-login form[name=form],
html.tk-login .box-inner{
  background:#fff !important;
  border:1px solid #C7DAEC !important;
  box-shadow:0 12px 36px rgba(20,60,100,.16) !important;
}

/* Высота во всю страницу — иначе центрировать нечего */
html.tk-login, html.tk-login body{ height:100% !important; }

/* ============================================================
   45. СПИСОК ПАПОК ПО ЭТАЛОНУ

   На эталоне у каждой папки свой значок, подчинённые идут
   с отступом, а у родителя есть стрелка раскрытия. Тема же
   рисует плоский список с одинаковыми иконками.
   ============================================================ */
#folderlist .tk-fi{
  flex:0 0 auto; color:var(--tk-muted);
}
#folderlist li.selected > a .tk-fi,
#folderlist li a:hover .tk-fi{ color:var(--tk-accent-2); }

/* родные иконки темы убираем — вместо них наши */
#folderlist li a > span.icon,
#folderlist li a::before{ display:none !important; }

/* подчинённые папки с отступом */
#folderlist li.tk-sub > a{ padding-left:34px !important; }
#folderlist li.tk-sub li > a{ padding-left:52px !important; }

/* стрелка раскрытия у родителя */
.tk-fold{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:-4px;
  color:var(--tk-muted-2); cursor:pointer; flex:0 0 18px;
  transition:transform .15s;
}
.tk-fold:hover{ color:var(--tk-text); }
#folderlist li.tk-collapsed > ul{ display:none !important; }
#folderlist li.tk-collapsed .tk-fold{ transform:rotate(-90deg); }

/* строка папки: значок, название, счётчик справа */
#folderlist li > a{
  padding:8px 12px !important;
  border-radius:8px !important;
  gap:11px !important;
  font-size:14px !important;
}

/* ============================================================
   46. МЕНЮ ПИСЬМА: СВЕРКА С ЭТАЛОНОМ

   На снимке 13б расходилось три вещи:
   — разделители между группами не видны, меню читается сплошняком;
   — значки пометок серые, в эталоне синяя точка и красный флажок;
   — над списком висела кнопка «Обновить», которой в эталоне нет.
   ============================================================ */

/* разделители между группами — в эталоне они заметны */
.tk-ctx hr{
  border:0 !important;
  border-top:1px solid var(--tk-border) !important;
  margin:6px 0 !important;
  height:0 !important;
  opacity:1 !important;
  display:block !important;
}

/* цветные значки пометок */
.tk-ctx .tk-i-accent{ color:var(--tk-accent) !important; }
.tk-ctx .tk-i-danger{ color:var(--tk-danger) !important; }

/* «Обновить» над списком: в эталоне его нет, список обновляется сам.

   ВАЖНО: прячем только саму строку с кнопкой обновления, а не всю
   шапку колонки. Прежнее правило убирало шапку целиком — вместе
   с ней исчезала панель действий открытого письма, и из письма
   нельзя было ни ответить, ни вернуться назад. */
html.tk-list-mode:not(.tk-reading) #layout-list > .header > a.button.refresh,
html.tk-list-mode:not(.tk-reading) #layout-list > .header > .refresh{
  display:none !important;
}
html.tk-list-mode:not(.tk-reading) #layout-list > .header:not(:has(#tk-listbar)){
  min-height:0 !important; padding:0 !important; border:0 !important;
}

/* ============================================================
   47. НАСТРОЙКИ: ПУСТАЯ ПОЛОСА СВЕРХУ

   Над разделом висела полоса высотой в кнопку, а в ней —
   одинокая стрелка возврата. Ни заголовка, ни смысла.
   Делаем полосу нормальной шапкой с подписью.
   ============================================================ */
html.tk-other #layout-content > .header{
  min-height:auto !important;
  padding:10px 24px !important;
  background:var(--tk-page) !important;
  border-bottom:1px solid var(--tk-border) !important;
  display:flex !important; align-items:center; gap:10px;
}
html.tk-other #layout-content > .header .header-title{
  font:600 17px/1.3 inherit !important;
  color:var(--tk-text) !important;
}
html.tk-other #layout-content > .header a.back-list-button,
html.tk-other #layout-content > .header a.back-sidebar-button{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  color:var(--tk-muted) !important;
}
html.tk-other #layout-content > .header a.back-list-button:hover{
  background:var(--tk-hover) !important; color:var(--tk-text) !important;
}

/* карточка раздела шире: справа оставалась половина экрана пустой */
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .propform{ max-width:1100px !important; }

/* «Сохранить» держится у нижнего края и не отрывается от карточки */
html.tk-other .formbuttons{
  position:sticky; bottom:0; z-index:2;
  margin:0 !important;
}

/* ============================================================
   48. ПИСЬМО ИЗНУТРИ

   Приводим к эталону: крупная тема, круглая аватарка отправителя,
   имя жирным, дата и «Кому» серым, действия справа значками.
   ============================================================ */
html.tk-reading #layout-content,
html.tk-msg-mode #layout-content{ background:var(--tk-surface) !important; }

#messageheader, #message-header{
  padding:20px 26px 16px !important;
  border-bottom:1px solid var(--tk-border) !important;
  background:var(--tk-surface) !important;
}
#messageheader .subject, #message-header .subject,
#messageheader h2, #message-header h2{
  font:600 22px/1.32 inherit !important;
  color:var(--tk-text) !important;
  margin:0 0 16px !important;
  display:block !important;
}

/* строка отправителя */
#messageheader .header-links,
#message-header .header-summary{ font-size:14px !important; }
#messageheader .contactphoto,
#message-header .contactphoto,
.message-partheaders .contactphoto{
  width:40px !important; height:40px !important; flex:0 0 40px !important;
  border-radius:50% !important; overflow:hidden !important;
  background:var(--tk-surface2) !important;
}
#messageheader .rcmContactAddress,
#message-header .rcmContactAddress,
#messageheader .adr{ font-weight:600 !important; color:var(--tk-text) !important; }
#messageheader .date, #message-header .date{ color:var(--tk-muted) !important; }
#messageheader .header-title, #message-header .header-title{
  color:var(--tk-muted) !important; font-weight:400 !important;
}

/* тело письма: колонка чтения, а не во всю ширину монитора */
#messagebody, #message-content .message-part{
  max-width:var(--tk-read) !important;
  margin:0 auto !important;
  padding:22px 26px 40px !important;
  font-size:15px !important; line-height:1.55 !important;
}

/* цепочка переписки под письмом */
#messagelist.thread tr,
.message-thread .message{
  border-bottom:1px solid var(--tk-border) !important;
}

/* ============================================================
   49. ОКНО НАПИСАНИЯ: ПАНЕЛЬ ОФОРМЛЕНИЯ И ВЛОЖЕНИЯ
   ============================================================ */
html.tk-inmodal .mce-toolbar,
html.tk-inmodal .tox-toolbar,
html.tk-inmodal .tox-editor-header{
  background:var(--tk-surface2) !important;
  border-bottom:1px solid var(--tk-border) !important;
}
html.tk-inmodal .tox-tinymce{
  border:1px solid var(--tk-border) !important;
  border-radius:8px !important;
}
html.tk-inmodal #compose-attachments,
html.tk-inmodal .attachmentslist li{
  font-size:14px !important; color:var(--tk-text) !important;
}
html.tk-inmodal #layout-sidebar.sidebar-right{
  border-left:1px solid var(--tk-border) !important;
  background:var(--tk-surface) !important;
}

/* ============================================================
   50. КОНТАКТЫ
   ============================================================ */
html.tk-other #contacts-table td,
html.tk-other #directorylist li a{
  padding:9px 14px !important; font-size:14px !important;
}
html.tk-other #contacts-table tr.selected td{
  background:var(--tk-sel) !important;
}
html.tk-other #contact-frame,
html.tk-other #contacthead{
  background:var(--tk-surface) !important;
  padding:18px 22px !important;
}
html.tk-other #contacthead .names .namefield{
  font:600 20px/1.3 inherit !important; color:var(--tk-text) !important;
}

/* ============================================================
   51. ТЁМНАЯ ТЕМА — ОСТАЛЬНЫЕ ЭКРАНЫ

   Раньше правилась только на списке. Здесь — письмо, окно
   написания, меню, контакты и настройки.
   ============================================================ */
html.dark-mode #messageheader,
html.dark-mode #message-header,
html.dark-mode #messagelist.thread tr{
  background:#1A1B1F !important;
  border-color:#33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode .tk-ctx,
html.dark-mode .tk-acc,
html.dark-mode .tk-check,
html.dark-mode .tk-labelmenu{
  background:#232529 !important;
  border:1px solid #33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode .tk-ctx button{ color:var(--tk-text) !important; }
html.dark-mode .tk-ctx button:hover{ background:#2E3136 !important; }
html.dark-mode .tk-ctx hr{ border-top-color:#33363C !important; }

html.dark-mode .tk-compose-win{ background:#1A1B1F !important; }
html.dark-mode .tk-compose-h{
  background:#232529 !important; border-bottom-color:#33363C !important;
}
html.dark-mode .tk-compose-t{ color:var(--tk-text) !important; }

html.dark-mode #contacts-table td,
html.dark-mode #directorylist li a,
html.dark-mode #contacthead{
  background:#1A1B1F !important; color:var(--tk-text) !important;
}
html.dark-mode .formcontent,
html.dark-mode fieldset.propform,
html.dark-mode .contentbox{
  background:#1A1B1F !important;
  border-color:#33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode legend,
html.dark-mode .boxtitle{ color:var(--tk-text) !important; }
html.dark-mode .tk-newfolder,
html.dark-mode .tk-side-b,
html.dark-mode .tk-nav-b{ color:var(--tk-text-2) !important; }
html.dark-mode .tk-msgfoot{
  background:#232529 !important; border-top-color:#33363C !important;
}
html.dark-mode .tk-listbar button{ color:var(--tk-text) !important; }
html.dark-mode .tk-undo{
  background:#232529 !important; color:var(--tk-text) !important;
  border:1px solid #33363C !important;
}


/* ============================================================
   52. ЧТО НАШЛОСЬ НА ЖИВОМ ПИСЬМЕ

   — панель действий не показывалась вовсе;
   — внизу справа было ДВЕ кнопки «?»: наша самопроверка
     и родная справка темы;
   — аватарка отправителя оставалась серой заглушкой.
   ============================================================ */

/* панель действий письма видна всегда, когда письмо открыто */
html.tk-reading .tk-msgbar,
html.tk-msg-mode .tk-msgbar{ display:flex !important; }
html.tk-reading #layout-content > .header,
html.tk-msg-mode #layout-content > .header{
  display:flex !important;
  align-items:center;
  background:var(--tk-surface) !important;
  border-bottom:1px solid var(--tk-border) !important;
}

/* Родную кнопку справки прячем: наша самопроверка на том же месте,
   и внизу справа висели две одинаковые круглые кнопки «?». */
#taskmenu a.about,
a.button.help,
a.help.button,
.floating-action-buttons a,
.floating-action-buttons button,
#layout-content > .footer a.help{ display:none !important; }

/* наша кнопка самопроверки остаётся */
.tk-checkbtn{ display:flex !important; }

/* аватарка отправителя: круг с инициалами вместо серой заглушки */
#messageheader .contactphoto span,
#message-header .contactphoto span{
  display:flex !important; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:var(--tk-accent) !important; color:#fff !important;
  font:600 15px/1 inherit !important;
}
#messageheader .contactphoto img[src*="watermark"],
#message-header .contactphoto img[src*="watermark"]{ display:none !important; }

/* ============================================================
   53. ПАНЕЛЬ ЯЩИКА, ПОИСК, ФИЛЬТРЫ — ОСТАТОК ИНТЕРФЕЙСА
   ============================================================ */

/* пункты панели ящика — со значками, как в эталоне */
.tk-acc-links button{
  display:flex !important; align-items:center; gap:11px;
  width:100%; padding:10px 16px !important;
  border:0; background:none; cursor:pointer; text-align:left;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-acc-links button:hover{ background:var(--tk-hover); }
.tk-acc-links button .tk-i{ color:var(--tk-muted); flex:0 0 auto; }
.tk-acc-links button.dang{ color:var(--tk-danger); }
.tk-acc-links button.dang .tk-i{ color:var(--tk-danger); }

/* список чужих ящиков был бесконечным — ограничиваем и прокручиваем */
.tk-acc-list{
  max-height:280px !important; overflow-y:auto !important;
  border-top:1px solid var(--tk-border);
}
.tk-acc-list::-webkit-scrollbar{ width:8px; }
.tk-acc-list::-webkit-scrollbar-thumb{
  background:var(--tk-border-2); border-radius:4px;
}
.tk-acc{ max-height:82vh !important; overflow:hidden !important; }

/* поиск: поле и условия читаемыми, без тёмных плашек */
#searchmenu{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:12px !important;
  box-shadow:var(--tk-shadow) !important;
  padding:14px 16px !important;
}
#searchmenu li, #searchmenu label{
  color:var(--tk-text) !important; font-size:14px !important;
  background:transparent !important;
}
#searchmenu input[type=text], #searchmenu select{
  border:1px solid var(--tk-border-2) !important;
  border-radius:8px !important; padding:8px 11px !important;
  background:var(--tk-surface) !important; color:var(--tk-text) !important;
}
.searchbar input, #rcmqsearchbox{
  border:0 !important; background:transparent !important;
  font-size:14px !important; color:var(--tk-text) !important;
}

/* фильтры и автоответчик: формы плагина managesieve */
html.tk-other #filter-form,
html.tk-other #vacation-form,
html.tk-other .propform.filterform{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:12px !important;
  padding:20px 24px !important;
  margin:14px 16px !important;
}
html.tk-other #filter-form select,
html.tk-other #filter-form input[type=text]{
  min-height:40px !important; height:auto !important;
  border:1px solid var(--tk-border-2) !important;
  border-radius:8px !important; padding:8px 11px !important;
}
html.tk-other #filterslist li,
html.tk-other #vacationform li{
  padding:9px 14px !important; font-size:14px !important;
  color:var(--tk-text) !important;
}

/* тёмная тема для этих же экранов */
html.dark-mode #searchmenu,
html.dark-mode #filter-form,
html.dark-mode #vacation-form{
  background:#232529 !important; border-color:#33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode #searchmenu input,
html.dark-mode #searchmenu select,
html.dark-mode #filter-form input,
html.dark-mode #filter-form select{
  background:#1A1B1F !important; color:var(--tk-text) !important;
  border-color:#33363C !important;
}
html.dark-mode .tk-acc-list{ border-top-color:#33363C !important; }

/* ============================================================
   54. ВСЕ ОКНА И ДИАЛОГИ РАЗОМ

   Roundcube показывает диалоги через jQuery UI: создание папки,
   правило фильтра, выбор контакта, свойства, подтверждения.
   Все они шли в исходном виде темы — серые заголовки, квадратные
   углы, кнопки вразнобой. Приводим к общему виду один раз,
   а не по одному окну.
   ============================================================ */

.ui-dialog,
.popupmenu,
.popover,
#rcmKSearchpane{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:12px !important;
  box-shadow:var(--tk-shadow) !important;
  overflow:hidden !important;
  color:var(--tk-text) !important;
}

.ui-dialog .ui-dialog-titlebar{
  background:var(--tk-surface) !important;
  border:0 !important;
  border-bottom:1px solid var(--tk-border) !important;
  padding:16px 20px !important;
  border-radius:0 !important;
}
.ui-dialog .ui-dialog-title{
  font:600 18px/1.3 inherit !important;
  color:var(--tk-text) !important;
}
.ui-dialog .ui-dialog-titlebar-close{
  width:34px !important; height:34px !important;
  border-radius:8px !important; border:0 !important;
  background:none !important; color:var(--tk-muted) !important;
  right:12px !important; top:50% !important;
  transform:translateY(-50%) !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover{
  background:var(--tk-hover) !important; color:var(--tk-text) !important;
}

.ui-dialog .ui-dialog-content{
  padding:20px !important;
  background:var(--tk-surface) !important;
  color:var(--tk-text) !important;
}
.ui-dialog .ui-dialog-buttonpane{
  background:var(--tk-surface) !important;
  border:0 !important;
  border-top:1px solid var(--tk-border) !important;
  padding:14px 20px !important;
  margin:0 !important;
}

/* кнопки в окнах: основная синяя, прочие спокойные */
.ui-dialog .ui-button,
.ui-dialog button.mainaction,
.popupmenu .mainaction{
  border-radius:9px !important;
  padding:10px 20px !important;
  font:400 15px/1.2 inherit !important;
  border:1px solid var(--tk-border-2) !important;
  background:var(--tk-surface) !important;
  color:var(--tk-text) !important;
  margin-left:8px !important;
}
.ui-dialog .ui-button.mainaction,
.ui-dialog button.mainaction,
.ui-dialog .ui-button-primary{
  background:var(--tk-accent) !important;
  border-color:var(--tk-accent) !important;
  color:#fff !important;
  font-weight:600 !important;
}
.ui-dialog .ui-button.mainaction:hover{ background:var(--tk-accent-2) !important; }
.ui-dialog .ui-button:not(.mainaction):hover{ background:var(--tk-hover) !important; }

/* поля внутри окон — те же, что и везде */
.ui-dialog input[type=text],
.ui-dialog input[type=password],
.ui-dialog select,
.ui-dialog textarea{
  min-height:40px !important; height:auto !important;
  border:1px solid var(--tk-border-2) !important;
  border-radius:8px !important;
  padding:9px 12px !important;
  font-size:14px !important;
  background:var(--tk-surface) !important;
  color:var(--tk-text) !important;
  box-sizing:border-box !important;
}
.ui-dialog label,
.ui-dialog td.title{
  color:var(--tk-text-2) !important; font-weight:400 !important;
}

/* подложка под окном */
.ui-widget-overlay{
  background:rgba(44,45,46,.42) !important; opacity:1 !important;
}

/* всплывающие меню темы (выбор папки, вложения, параметры) */
.popupmenu li a,
.popover li a,
.listing.iconized li a{
  padding:9px 14px !important;
  font-size:14px !important;
  color:var(--tk-text) !important;
  border-radius:8px !important;
}
.popupmenu li a:hover,
.popover li a:hover{ background:var(--tk-hover) !important; }

/* полоса сообщений: «Письмо отправлено», «Ошибка» и прочее */
#messagestack div,
.toast{
  border-radius:10px !important;
  padding:12px 16px !important;
  font-size:14px !important;
  box-shadow:var(--tk-shadow) !important;
  border:0 !important;
}
#messagestack div.confirmation{ background:var(--tk-ok) !important; color:#fff !important; }
#messagestack div.error{ background:var(--tk-danger) !important; color:#fff !important; }
#messagestack div.warning{ background:var(--tk-warn) !important; color:#fff !important; }
#messagestack div.loading{
  background:var(--tk-surface) !important; color:var(--tk-text) !important;
  border:1px solid var(--tk-border) !important;
}

/* окно выбора контактов при написании письма */
#contacts-dialog .listing li a,
#rcmKSearchpane li{
  padding:9px 14px !important; font-size:14px !important;
  color:var(--tk-text) !important;
}
#rcmKSearchpane li.selected,
#rcmKSearchpane li:hover{ background:var(--tk-hover) !important; }

/* просмотр служебных заголовков и исходного текста */
#messageheaders, #source-content, .messageheaderbox{
  background:var(--tk-surface) !important;
  color:var(--tk-text) !important;
  font-size:13px !important; line-height:1.5 !important;
}

/* ---- те же окна в тёмной теме ---- */
html.dark-mode .ui-dialog,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode #rcmKSearchpane{
  background:#232529 !important;
  border-color:#33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-dialog .ui-dialog-content,
html.dark-mode .ui-dialog .ui-dialog-buttonpane{
  background:#232529 !important;
  border-color:#33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode .ui-dialog input,
html.dark-mode .ui-dialog select,
html.dark-mode .ui-dialog textarea{
  background:#1A1B1F !important; color:var(--tk-text) !important;
  border-color:#33363C !important;
}
html.dark-mode .ui-dialog .ui-button:not(.mainaction){
  background:#1A1B1F !important; color:var(--tk-text) !important;
  border-color:#33363C !important;
}
html.dark-mode .popupmenu li a:hover,
html.dark-mode .popover li a:hover{ background:#2E3136 !important; }
html.dark-mode #messagestack div.loading{
  background:#232529 !important; color:var(--tk-text) !important;
  border-color:#33363C !important;
}
html.dark-mode #messageheaders,
html.dark-mode #source-content{
  background:#1A1B1F !important; color:var(--tk-text) !important;
}

/* ============================================================
   55. НАШИ СОБСТВЕННЫЕ ОКНА — ЕДИНЫЙ ВИД

   Самопроверка, метки, отсрочка, отписка и полоса отмены
   отправки рисовались каждое по-своему. Сводим к одному виду
   с диалогами Roundcube: та же рамка, тот же радиус, та же тень.
   ============================================================ */
.tk-check,
.tk-acc,
.tk-labelmenu,
.tk-ctx,
.tk-undo{
  border-radius:12px !important;
  border:1px solid var(--tk-border) !important;
  box-shadow:var(--tk-shadow) !important;
  background:var(--tk-surface) !important;
}

/* заголовки наших окон */
.tk-check-h,
.tk-acc-h{
  padding:15px 18px !important;
  border-bottom:1px solid var(--tk-border) !important;
  font:600 16px/1.3 inherit !important;
  color:var(--tk-text) !important;
  display:flex !important; align-items:center; justify-content:space-between;
}
.tk-check-h button{
  width:30px; height:30px; border:0; border-radius:8px;
  background:none; color:var(--tk-muted); cursor:pointer;
  font-size:16px; line-height:1;
}
.tk-check-h button:hover{ background:var(--tk-hover); color:var(--tk-text); }

/* полоса отмены отправки — как всплывающее сообщение, а не панель */
.tk-undo{
  position:fixed !important; left:50% !important;
  bottom:26px !important; top:auto !important;
  transform:translateX(-50%) !important;
  display:none; align-items:center; gap:14px;
  padding:13px 18px !important;
  z-index:2147483001 !important;
  min-width:340px;
}
.tk-undo.show{ display:flex !important; }
.tk-undo-n{
  width:30px; height:30px; flex:0 0 30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--tk-accent); color:#fff;
  font:600 14px/1 inherit;
}
.tk-undo-t{ flex:1 1 auto; color:var(--tk-text); font-size:14px; }
.tk-undo button{
  border:1px solid var(--tk-border-2); background:var(--tk-surface);
  color:var(--tk-accent-2); border-radius:8px;
  padding:8px 16px; font:600 14px/1.2 inherit; cursor:pointer;
}
.tk-undo button:hover{ background:var(--tk-hover); }

/* полоса отписки от рассылки */
.tk-unsub{
  background:#FFF7E6 !important;
  border:1px solid #F0D9A8 !important;
  border-radius:10px !important;
  padding:11px 16px !important;
  margin:12px 20px !important;
  display:flex !important; align-items:center; gap:14px;
  font-size:14px !important; color:var(--tk-text) !important;
}
.tk-unsub button{
  margin-left:auto;
  background:var(--tk-accent) !important; color:#fff !important;
  border:0 !important; border-radius:8px !important;
  padding:8px 16px !important; font:600 14px/1.2 inherit !important;
  cursor:pointer;
}

html.dark-mode .tk-unsub{
  background:#2A2519 !important; border-color:#4A3F22 !important;
  color:var(--tk-text) !important;
}
html.dark-mode .tk-undo{
  background:#232529 !important; border-color:#33363C !important;
}
html.dark-mode .tk-undo button{
  background:#1A1B1F !important; border-color:#33363C !important;
  color:var(--tk-accent) !important;
}
html.dark-mode .tk-check-h,
html.dark-mode .tk-acc-h{
  border-bottom-color:#33363C !important; color:var(--tk-text) !important;
}

/* ============================================================
   56. ОСТАВШИЕСЯ ЭКРАНЫ — ФИНАЛЬНЫЙ ПРОХОД

   Всё, до чего не доходили руки: низ списка, пустая папка,
   результаты поиска, ожидание, контакты, разделы настроек.
   ============================================================ */

/* ---- 56.1 Низ списка: страницы ----
   Тема рисует их вразнобой; в эталоне это спокойная строка
   по центру с цифрой текущей страницы. */
#messagelist + .footer,
#layout-list > .footer,
.pagenav{
  background:var(--tk-surface) !important;
  border-top:1px solid var(--tk-border) !important;
  padding:8px 14px !important;
  min-height:46px !important;
}
.pagenav a.button,
#layout-list > .footer a.button{
  border:0 !important; background:none !important;
  color:var(--tk-muted) !important;
  width:34px !important; height:34px !important;
  border-radius:8px !important;
}
.pagenav a.button:hover{ background:var(--tk-hover) !important; color:var(--tk-text) !important; }
.pagenav a.button.disabled{ opacity:.35 !important; }
.pagenav .pagenav-text,
#layout-list > .footer .count{
  color:var(--tk-muted) !important; font-size:13px !important;
}
#rcmcountdisplay, .pagenav input{
  border:1px solid var(--tk-border-2) !important;
  border-radius:7px !important;
  min-width:44px; text-align:center;
  color:var(--tk-text) !important;
  background:var(--tk-surface) !important;
}

/* ---- 56.2 Пустая папка ----
   Тема показывает сухую строку у левого края. Ставим по центру
   и добавляем воздуха, чтобы не выглядело поломкой. */
#messagelist tbody tr.nomessages td,
.watermark,
#messagelist td.nomessages{
  text-align:center !important;
  color:var(--tk-muted) !important;
  padding:60px 20px !important;
  font-size:15px !important;
  background:var(--tk-surface) !important;
}

/* ---- 56.3 Ожидание ----
   Полоса «Загрузка…» перекрывала список тёмным прямоугольником. */
#messagestack div.loading,
.ui-dialog .loading{
  background:var(--tk-surface) !important;
  color:var(--tk-text) !important;
  border:1px solid var(--tk-border) !important;
}
#messagelist.loading tbody{ opacity:.55; transition:opacity .15s; }

/* ---- 56.4 Результаты поиска ----
   В эталоне сверху видно, что показан поиск, и есть выход из него. */
.searchbar.active,
#layout-list.search-active > .header{
  background:var(--tk-surface2) !important;
}
a.button.reset,
#searchreset,
.searchbar a.reset{
  color:var(--tk-muted) !important; border-radius:8px !important;
}
a.button.reset:hover{ background:var(--tk-hover) !important; color:var(--tk-text) !important; }

/* ---- 56.5 Контакты ----
   Список слева, карточка справа — как в эталоне. */
html.tk-other #directorylist,
html.tk-other #contacts-table{
  background:var(--tk-surface) !important;
}
html.tk-other #directorylist li a{
  display:flex !important; align-items:center; gap:10px;
  border-radius:8px !important; margin:2px 6px;
}
html.tk-other #directorylist li.selected > a,
html.tk-other #contacts-table tr.selected td{
  background:var(--tk-sel) !important; color:var(--tk-text) !important;
}
html.tk-other #contacts-table tr td{
  border-bottom:1px solid var(--tk-border) !important;
  padding:10px 14px !important;
}
html.tk-other #contacts-table tr:hover td{ background:var(--tk-hover) !important; }

/* карточка контакта */
html.tk-other #contacthead{
  border-bottom:1px solid var(--tk-border) !important;
  display:flex !important; align-items:center; gap:16px;
}
html.tk-other #contacthead .contactphoto{
  width:64px !important; height:64px !important; flex:0 0 64px !important;
  border-radius:50% !important; overflow:hidden;
  background:var(--tk-surface2) !important;
}
html.tk-other #contacthead .names{ display:flex; flex-direction:column; gap:3px; }
html.tk-other #contacthead .namefield{
  font:600 20px/1.25 inherit !important; color:var(--tk-text) !important;
}
html.tk-other #contacthead .jobtitle,
html.tk-other #contacthead .organization{
  color:var(--tk-muted) !important; font-size:14px !important;
}
html.tk-other .contactfieldgroup{
  border:1px solid var(--tk-border) !important;
  border-radius:10px !important;
  padding:14px 18px !important;
  margin:12px 16px !important;
  background:var(--tk-surface) !important;
}
html.tk-other .contactfieldgroup legend{
  font:600 15px/1.3 inherit !important; padding:0 0 8px !important;
}

/* ---- 56.6 Разделы настроек: переключатели ----
   В эталоне это тумблеры с подписью слева и пояснением снизу. */
html.tk-other .propform .proplist li,
html.tk-other .form-check{
  display:flex !important; align-items:center; gap:12px;
  padding:9px 0 !important;
}
html.tk-other .custom-switch .custom-control-label::before,
html.tk-other .form-check-input{
  width:38px !important; height:22px !important;
  border-radius:11px !important;
  border:0 !important;
  background:var(--tk-border-2) !important;
}
html.tk-other .custom-control-input:checked ~ .custom-control-label::before{
  background:var(--tk-accent) !important;
}
html.tk-other .propform .hint,
html.tk-other .form-text{
  display:block; color:var(--tk-muted) !important;
  font-size:13px !important; margin-top:4px;
}

/* ---- 56.7 Фильтры: список правил ---- */
html.tk-other #filterslist li a,
html.tk-other #filtersetslist li a{
  display:flex !important; align-items:center; gap:10px;
  padding:10px 14px !important; border-radius:8px !important;
  margin:2px 6px;
}
html.tk-other #filterslist li.selected > a{
  background:var(--tk-sel) !important;
}
html.tk-other #filterslist li.disabled a{ opacity:.5 !important; }

/* ---- 56.8 те же экраны в тёмной теме ---- */
html.dark-mode #messagelist + .footer,
html.dark-mode #layout-list > .footer,
html.dark-mode .pagenav{
  background:#1A1B1F !important; border-top-color:#33363C !important;
}
html.dark-mode #rcmcountdisplay,
html.dark-mode .pagenav input{
  background:#232529 !important; color:var(--tk-text) !important;
  border-color:#33363C !important;
}
html.dark-mode #directorylist,
html.dark-mode #contacts-table,
html.dark-mode #contacthead,
html.dark-mode .contactfieldgroup,
html.dark-mode #filterslist li a{
  background:#1A1B1F !important; color:var(--tk-text) !important;
  border-color:#33363C !important;
}
html.dark-mode #contacts-table tr td{ border-bottom-color:#2A2C31 !important; }
html.dark-mode #messagelist tbody tr.nomessages td,
html.dark-mode .watermark{
  background:#1A1B1F !important; color:var(--tk-muted) !important;
}

/* ============================================================
   57. ВХОД: ДВА УПРЯМЫХ МЕСТА

   1. «Запомнить меня» — квадратик вплотную к подписи.
      Виновато моё же правило html.tk-login label{display:block}.
      Оно специфичнее (.tk-remember — один класс, у того ещё
      и элемент), поэтому перебивало display:flex вместе с gap.
      Лечится тем, что делаем селектор специфичнее правила-обидчика.

   2. Карточка не по центру. Центрирование через родителя зависит
      от того, какие display и flex-direction поставит тема, а она
      их меняет. Ставим карточку по центру ЭКРАНА напрямую —
      это не зависит ни от одного родителя.
   ============================================================ */

html.tk-login label.tk-remember,
html.tk-login .tk-remember{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  margin:2px 0 20px !important;
  padding:0 !important;
  text-align:left !important;
  cursor:pointer;
}
html.tk-login label.tk-remember span,
html.tk-login .tk-remember span{
  color:var(--tk-text) !important;
  font-size:14px !important;
  margin:0 !important;
  padding:0 !important;
}
html.tk-login label.tk-remember input,
html.tk-login .tk-remember input{
  margin:0 !important;
  flex:0 0 18px !important;
}

/* Карточка по центру экрана — без оглядки на родителей */
@media (min-height:420px){
  html.tk-login #login-form,
  html.tk-login form[name=form]{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
    max-height:88vh;
    overflow-y:auto;
  }
}

/* Родителям запрещаем растягивать и сдвигать: карточка уже
   позиционирована сама, любые их отступы только мешают. */
html.tk-login #layout,
html.tk-login #layout-content,
html.tk-login .content{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}

/* Квадратик просел ниже подписи: у него своя высота 18px, а строка
   текста выше, и по нижнему краю они не сходились. Выравниваем оба
   по центру строки и убираем сдвиг, который тема даёт полям ввода. */
html.tk-login label.tk-remember,
html.tk-login .tk-remember{
  align-items:center !important;
  line-height:1.25 !important;
}
html.tk-login label.tk-remember input,
html.tk-login .tk-remember input{
  align-self:center !important;
  vertical-align:middle !important;
  position:relative !important;
  top:0 !important;
  transform:none !important;
}
html.tk-login label.tk-remember span,
html.tk-login .tk-remember span{
  align-self:center !important;
  line-height:1.25 !important;
  display:inline-block !important;
}

/* ============================================================
   58. КВАДРАТИК ПОЯВЛЯЕТСЯ ТОЛЬКО НА САМОМ КРУГЕ

   Было: правило висело на СТРОКЕ (tr:hover), и квадратик
   проступал, стоило навести курсор на любое место письма.
   В эталоне он появляется, только когда курсор на круге —
   иначе строка «мигает» при каждом движении мыши.
   ============================================================ */

/* отменяем прежнее поведение по всей строке */
#messagelist tbody tr:hover span.tk-av .tk-av-box{ opacity:0 !important; }
#messagelist tbody tr:hover span.tk-av .tk-av-i{ opacity:1 !important; }
#messagelist tbody tr:hover span.tk-av img{ opacity:1 !important; }

/* и включаем только на самом круге */
#messagelist span.tk-av:hover .tk-av-box{ opacity:1 !important; }
#messagelist span.tk-av:hover .tk-av-i{ opacity:0 !important; }
#messagelist span.tk-av:hover img{ opacity:0 !important; }

/* отмеченное письмо держит квадратик всегда — это состояние,
   а не наведение */
#messagelist tbody tr.tk-picked span.tk-av .tk-av-box{ opacity:1 !important; }
#messagelist tbody tr.tk-picked span.tk-av .tk-av-i,
#messagelist tbody tr.tk-picked span.tk-av img{ opacity:0 !important; }

/* круг под курсором слегка подсвечиваем — понятно, что он нажимается */
#messagelist span.tk-av{ transition:box-shadow .12s; }
#messagelist span.tk-av:hover{
  box-shadow:0 0 0 2px rgba(var(--tk-accent-rgb),.35);
}

/* ============================================================
   59. ОКНО НАПИСАНИЯ: ПОДПИСИ КНОПОК ОБРЕЗАЛИСЬ

   На снимке видно «Сохран», «Вложит», «Подпи», «Ответь» —
   тема режет подписи по ширине. В эталоне они целые.
   ============================================================ */
html.tk-inmodal #messagetoolbar a,
html.tk-inmodal #messagetoolbar button{
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
html.tk-inmodal #messagetoolbar a .inner,
html.tk-inmodal #messagetoolbar button .inner,
html.tk-inmodal #messagetoolbar a span{
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}

/* сама строка переносится, если кнопки не помещаются */
html.tk-inmodal #messagetoolbar.toolbar{
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap:4px !important;
}

/* «Метка» стояла ниже прочих: у неё нет значка, и подпись
   выравнивалась по другому краю */
html.tk-inmodal #messagetoolbar a.button{
  align-items:center !important;
  min-height:38px !important;
}

/* вторая кнопка справки внизу — она тут вообще ни к чему */
html.tk-inmodal .floating-action-buttons,
html.tk-inmodal a.button.help{ display:none !important; }

/* ============================================================
   60. ПАНЕЛЬ ОФОРМЛЕНИЯ В ОКНЕ ПИСЬМА

   На снимке было «✕ ↶ ↷ 🔗 🖼 Абзац» — и это не бедный набор,
   а СВЁРНУТЫЙ. У редактора включён режим выдвижного ящика
   (toolbar_drawer: sliding): когда кнопки не помещаются по
   ширине, он прячет их за многоточие. В окне поверх списка
   ширины не хватает, и панель схлопывалась почти целиком.

   Заставляем её переноситься на вторую строку вместо сворачивания —
   тогда видно всё: Ж, К, Ч, выравнивание, шрифт, размер, цвет.
   ============================================================ */
html.tk-inmodal .tox .tox-toolbar,
html.tk-inmodal .tox .tox-toolbar__primary,
html.tk-inmodal .tox .tox-toolbar-overlord{
  flex-wrap:wrap !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  background:var(--tk-surface2) !important;
  border-bottom:1px solid var(--tk-border) !important;
  padding:4px 6px !important;
}

/* кнопка «ещё» больше не нужна: всё и так видно */
html.tk-inmodal .tox .tox-tbtn--select[aria-label*="More"],
html.tk-inmodal .tox .tox-toolbar__overflow-button,
html.tk-inmodal .tox-toolbar__overflow{
  display:none !important;
}

/* сами кнопки: спокойные, с подсветкой при наведении */
html.tk-inmodal .tox .tox-tbtn{
  height:32px !important; margin:2px 1px !important;
  border-radius:7px !important;
  color:var(--tk-text) !important;
}
html.tk-inmodal .tox .tox-tbtn:hover{ background:var(--tk-hover) !important; }
html.tk-inmodal .tox .tox-tbtn--enabled{
  background:rgba(var(--tk-accent-rgb),.16) !important;
  color:var(--tk-accent-2) !important;
}
html.tk-inmodal .tox .tox-tbtn svg{ fill:var(--tk-text) !important; }

/* выпадающие: шрифт, размер, стиль абзаца */
html.tk-inmodal .tox .tox-tbtn--select{
  padding:0 8px !important; min-width:auto !important;
}
html.tk-inmodal .tox .tox-tbtn__select-label{
  font-size:13px !important; color:var(--tk-text) !important;
}

/* разделители между группами — как в эталоне */
html.tk-inmodal .tox .tox-toolbar__group{
  padding:0 4px !important;
  border-right:1px solid var(--tk-border) !important;
}
html.tk-inmodal .tox .tox-toolbar__group:last-child{ border-right:0 !important; }

/* поле ввода письма */
html.tk-inmodal .tox .tox-edit-area,
html.tk-inmodal .tox-edit-area__iframe{
  background:var(--tk-surface) !important;
}
html.tk-inmodal .tox.tox-tinymce{
  border:1px solid var(--tk-border) !important;
  border-radius:9px !important;
  overflow:hidden !important;
}

/* выпадающие списки редактора поверх окна письма */
.tox .tox-menu, .tox-collection{
  background:var(--tk-surface) !important;
  border:1px solid var(--tk-border) !important;
  border-radius:10px !important;
  box-shadow:var(--tk-shadow) !important;
  z-index:2147483002 !important;
}
.tox .tox-collection__item{ color:var(--tk-text) !important; }
.tox .tox-collection__item--active{ background:var(--tk-hover) !important; }

html.dark-mode.tk-inmodal .tox .tox-toolbar,
html.dark-mode .tox .tox-menu{
  background:#232529 !important; border-color:#33363C !important;
}
html.dark-mode .tox .tox-tbtn{ color:var(--tk-text) !important; }
html.dark-mode .tox .tox-tbtn svg{ fill:var(--tk-text) !important; }

/* строка вложений под темой — как в эталоне */
.tk-attrow{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 0 10px;
}
.tk-att{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:8px 12px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
  white-space:nowrap;
}
.tk-att:hover{ background:var(--tk-hover); }
.tk-att .tk-i{ color:var(--tk-muted); }
.tk-att:hover .tk-i{ color:var(--tk-accent-2); }

/* «Копия» и «Скрытая» справа от темы */
.tk-cc{ display:inline-flex; gap:14px; margin-left:12px; float:right; }
.tk-cc button{
  border:0; background:none; cursor:pointer; padding:0;
  font:400 14px/1.3 inherit; color:var(--tk-accent-2);
}
.tk-cc button:hover{ text-decoration:underline; }
.tk-cc button.on{ color:var(--tk-muted); text-decoration:none; cursor:default; }

html.dark-mode .tk-att{ color:var(--tk-text) !important; }

/* ============================================================
   61. НАСТРОЙКИ ПО ЭТАЛОНУ (кадр 11)

   Устройство эталона: слева меню без рамок, справа белая
   карточка со скруглением. Внутри — крупный заголовок раздела,
   подзаголовки групп, а каждая настройка отдельной строкой:
   значок слева, название, под ним пояснение серым, стрелка справа.

   У нас была таблица «подпись — поле», что на такое не похоже
   совсем.
   ============================================================ */

/* левое меню: без рамок и разделителей, как в эталоне */
html.tk-other #layout-sidebar{
  background:var(--tk-page) !important;
  border-right:0 !important;
}
html.tk-other #settings-menu li,
html.tk-other #layout-sidebar .listing li{ border:0 !important; }
html.tk-other #settings-menu li a,
html.tk-other #layout-sidebar .listing li a{
  border-radius:9px !important;
  margin:2px 10px !important;
  padding:10px 14px !important;
  font-size:14.5px !important;
  color:var(--tk-text) !important;
}
html.tk-other #settings-menu li.selected a,
html.tk-other #layout-sidebar .listing li.selected a{
  background:var(--tk-sel) !important;
  font-weight:500 !important;
}

/* содержимое — одна белая карточка с воздухом */
html.tk-other #layout-content > .scroller{
  background:var(--tk-page) !important;
  padding:18px !important;
}
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .contentbox,
html.tk-other .uibox{
  border-radius:14px !important;
  padding:28px 34px !important;
  margin:0 auto 18px !important;
  max-width:960px !important;
  border:0 !important;
  box-shadow:0 1px 3px rgba(20,40,70,.07) !important;
}

/* заголовок раздела — крупный, как в эталоне */
html.tk-other #layout-content > .header .header-title{
  font:600 26px/1.25 inherit !important;
  color:var(--tk-text) !important;
}
html.tk-other #layout-content > .header{
  padding:20px 34px 6px !important;
  border-bottom:0 !important;
  background:var(--tk-page) !important;
}

/* подзаголовки групп внутри карточки */
html.tk-other legend,
html.tk-other .boxtitle,
html.tk-other h2.boxtitle,
html.tk-other fieldset > legend{
  font:600 19px/1.3 inherit !important;
  color:var(--tk-text) !important;
  padding:0 0 4px !important;
  margin:6px 0 14px !important;
  border:0 !important;
  background:none !important;
  width:100%;
}

/* строка настройки: название, пояснение снизу, поле справа */
html.tk-other .propform td.title,
html.tk-other .propform th.title{
  width:52% !important; max-width:none !important;
  padding:14px 22px 14px 0 !important;
  font-size:15px !important;
  color:var(--tk-text) !important;
  font-weight:400 !important;
  vertical-align:middle !important;
  line-height:1.4 !important;
}
html.tk-other .propform td{
  padding:14px 0 !important;
  border-bottom:1px solid var(--tk-border) !important;
  vertical-align:middle !important;
}
html.tk-other .propform tr:last-child td{ border-bottom:0 !important; }

/* пояснение серым под названием — как в эталоне */
html.tk-other .propform td.title .hint,
html.tk-other .propform .hint,
html.tk-other .form-text,
html.tk-other td.title small{
  display:block !important;
  color:var(--tk-muted) !important;
  font-size:13px !important;
  font-weight:400 !important;
  margin-top:4px !important;
  line-height:1.4 !important;
}

/* поля справа, ровной колонкой */
html.tk-other .propform td input[type=text],
html.tk-other .propform td input[type=password],
html.tk-other .propform td select,
html.tk-other .propform td textarea{
  width:100% !important; max-width:340px !important;
  margin-left:auto !important;
  display:block !important;
}

/* кнопка сохранения — как основная в эталоне */
html.tk-other .formbuttons{
  max-width:960px !important;
  margin:0 auto !important;
  background:transparent !important;
  border:0 !important;
  padding:6px 0 22px !important;
}
html.tk-other .formbuttons button,
html.tk-other button.save{
  padding:12px 30px !important;
  border-radius:10px !important;
  font-size:15px !important;
}

html.dark-mode.tk-other #layout-content > .scroller,
html.dark-mode.tk-other #layout-content > .header{
  background:#141518 !important;
}
html.dark-mode.tk-other .formcontent,
html.dark-mode.tk-other fieldset.propform{
  background:#1A1B1F !important; box-shadow:none !important;
}
html.dark-mode.tk-other .propform td{ border-bottom-color:#2A2C31 !important; }

/* ============================================================
   62. ШАПКА ПИСЬМА ПО ЭТАЛОНУ (кадр 04)

   В эталоне: тема крупно, под ней строка отправителя —
   круглая аватарка, имя жирным, дата серым, «Кому: вам».
   Справа значки: закладка, архив, печать, три точки.
   ============================================================ */
.tk-hdr-icons{
  display:flex; align-items:center; gap:2px;
  margin-left:auto; flex:0 0 auto;
}
.tk-hi{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:8px;
  color:var(--tk-muted); cursor:pointer; padding:0;
}
.tk-hi:hover{ background:var(--tk-hover); color:var(--tk-accent-2); }

/* строка отправителя раскладывается в линию, значки уходят вправо */
html.tk-reading #messageheader .header-links,
html.tk-msg-mode #messageheader .header-links,
html.tk-reading #message-header .header-summary,
html.tk-msg-mode #message-header .header-summary{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap;
}

/* «Кому: вам» отдельной строкой под именем — как в эталоне */
html.tk-reading #messageheader .header-headers,
html.tk-msg-mode #messageheader .header-headers{
  font-size:13.5px !important;
  color:var(--tk-muted) !important;
  width:100%;
  margin-top:2px;
}

/* нижняя полоса прижата к низу и на всю ширину, как в эталоне */
.tk-msgfoot{
  background:var(--tk-surface2) !important;
  border-top:1px solid var(--tk-border) !important;
  padding:12px 24px !important;
}
.tk-mf{
  border:1px solid var(--tk-border-2) !important;
  background:var(--tk-surface) !important;
  border-radius:9px !important;
  padding:9px 16px !important;
}
.tk-mf:hover{ background:var(--tk-hover) !important; }

html.dark-mode .tk-hi:hover{ background:#2E3136 !important; }
html.dark-mode .tk-mf{
  background:#1A1B1F !important; border-color:#33363C !important;
}

/* ============================================================
   63. ФИЛЬТРЫ ПО ЭТАЛОНУ (кадры 14–15)

   В эталоне: страница «Правила фильтрации» с синей кнопкой
   «Добавить фильтр», а само создание — белым окном поверх,
   с крупным заголовком, рядами условий и синей «Сохранить».
   ============================================================ */

/* заголовок страницы фильтров */
html.tk-other #filter-form,
html.tk-other #filtersetslist,
html.tk-other #filterslist{
  background:var(--tk-surface) !important;
}

/* кнопка «Добавить фильтр» — основная, синяя */
html.tk-other a.button.create,
html.tk-other [data-command="plugin.managesieve-add"],
html.tk-other a.create.button{
  background:var(--tk-accent) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:9px !important;
  padding:11px 22px !important;
  font-weight:500 !important;
}
html.tk-other a.button.create:hover{ background:var(--tk-accent-2) !important; }

/* окно создания фильтра */
.ui-dialog[aria-describedby*="filter"] .ui-dialog-content,
#filter-form-dialog,
.ui-dialog .propform.filterform{
  padding:24px 28px !important;
}
.ui-dialog .ui-dialog-title{ font-size:22px !important; }

/* «Если выполнено условие» — подзаголовок внутри окна */
.ui-dialog fieldset legend,
#filter-form legend{
  font:600 17px/1.3 inherit !important;
  color:var(--tk-text) !important;
  padding:0 0 12px !important;
  border:0 !important;
}

/* ряд условия: поле, сравнение, значение, крестик */
#filter-form .rule,
.ui-dialog .rule,
#filter-form .actionrow{
  display:flex !important;
  align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0 !important;
}
#filter-form .rule select,
.ui-dialog .rule select,
#filter-form .rule input[type=text]{
  min-height:42px !important; height:auto !important;
  border-radius:9px !important;
  border:1px solid var(--tk-border-2) !important;
  padding:9px 12px !important;
  font-size:14px !important;
}
#filter-form .rule a.button.del,
.ui-dialog .rule a.del{
  width:34px; height:34px; border-radius:8px;
  color:var(--tk-muted) !important;
}

/* «Добавить условие» — ссылка, а не кнопка */
#filter-form a.add,
.ui-dialog a.add{
  color:var(--tk-accent-2) !important;
  font-size:14px !important;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 0 !important;
  background:none !important; border:0 !important;
}

/* ============================================================
   64. ЧИП КАТЕГОРИИ СПРАВА ОТ ТЕМЫ (кадр 04)
   ============================================================ */
html.tk-reading #messageheader .tk-labels,
html.tk-msg-mode #messageheader .tk-labels{
  margin-left:auto; flex:0 0 auto;
}
html.tk-reading #messageheader .tk-chip,
html.tk-msg-mode #messageheader .tk-chip{
  border:1px solid var(--tk-border-2) !important;
  border-radius:16px !important;
  padding:5px 12px !important;
  font-size:13px !important;
  background:var(--tk-surface) !important;
}

/* ============================================================
   65. ЦЕПОЧКА ПЕРЕПИСКИ ПОД ПИСЬМОМ (кадр 09)
   ============================================================ */
html.tk-reading #messagelist.threads tr,
html.tk-msg-mode .message-thread > div{
  display:flex !important; align-items:center; gap:12px;
  padding:11px 24px !important;
  border-bottom:1px solid var(--tk-border) !important;
  cursor:pointer;
}
html.tk-reading #messagelist.threads tr:hover{ background:var(--tk-hover) !important; }
html.tk-reading #messagelist.threads .subject{
  color:var(--tk-muted) !important; font-size:14px !important;
}

/* ============================================================
   66. ПОДРАГИВАНИЕ ПРИ ПЕРЕХОДЕ

   Панели строит скрипт: сначала браузер рисует страницу в виде
   темы, потом мы её перестраиваем — отсюда рывок на глазах.

   Прячем то, что будет перестроено, до готовности. Класс
   tk-ready ставит скрипт, когда всё на месте. Если скрипт
   почему-то не отработает, через полсекунды всё покажется
   само — почта не должна остаться пустой из-за оформления.
   ============================================================ */
html.tk-early:not(.tk-ready) #layout-sidebar,
html.tk-early:not(.tk-ready) #layout-list > .header,
html.tk-early:not(.tk-ready) #messagelist{
  opacity:0;
}
html.tk-ready #layout-sidebar,
html.tk-ready #layout-list > .header,
html.tk-ready #messagelist{
  opacity:1;
  transition:opacity .12s ease-out;
}

/* страховка: показываем через 0.6 сек, даже если скрипт молчит */
@keyframes tkShowAnyway{ to{ opacity:1; } }
html.tk-early:not(.tk-ready) #layout-sidebar,
html.tk-early:not(.tk-ready) #messagelist{
  animation:tkShowAnyway .1s ease-out .6s forwards;
}

/* полосы прокрутки не должны прыгать при смене страниц */
html.tk-early{ scrollbar-gutter:stable; }

/* кнопки-значки в панели над списком: обновить и плотность */
.tk-lb-icon{
  padding:8px !important;
  min-width:36px;
  justify-content:center;
}
.tk-lb-icon .tk-i{ color:var(--tk-muted); }
.tk-lb-icon:hover .tk-i{ color:var(--tk-accent-2); }

/* плотный список: строки ниже, отступы меньше */
html.tk-compact #messagelist tbody tr > td{ padding-top:5px !important; padding-bottom:5px !important; }
html.tk-compact #messagelist span.tk-av{ width:24px !important; height:24px !important; }
html.tk-compact #messagelist .tk-snip{ display:none !important; }

/* ============================================================
   67. ЧТО ВИДНО НА ЖИВЫХ СНИМКАХ

   Разбор по кадрам с рабочего места, а не по догадкам.
   ============================================================ */

/* ---- 67.1 Подписи в панели окна письма всё ещё резались ----
   «Сохран», «Вложит», «Подпи», «Ответь». Прежнее правило целилось
   в .inner, а тема режет текст на самой ссылке — там и стоит
   ограничение ширины с многоточием. */
html.tk-inmodal #messagetoolbar a.button,
html.tk-inmodal #messagetoolbar a.button *,
html.tk-inmodal #messagetoolbar button,
html.tk-inmodal #messagetoolbar button *{
  max-width:none !important;
  width:auto !important;
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-indent:0 !important;
}
/* «Метка» шла без значка и потому висела ниже прочих */
html.tk-inmodal #messagetoolbar a.button{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:7px !important;
  height:auto !important;
  min-height:36px !important;
  padding:6px 11px !important;
}

/* ---- 67.2 Папки: тумблеры уезжали к дальнему краю экрана ----
   Список занимал всю ширину монитора, и переключатель оказывался
   в двух тысячах пикселей от названия папки. */
html.tk-other #folders-table,
html.tk-other #subscription-table{
  max-width:820px !important;
  margin:0 auto !important;
}
html.tk-other #folders-table td,
html.tk-other #subscription-table td{
  padding:11px 14px !important;
  border-bottom:1px solid var(--tk-border) !important;
}
html.tk-other #folders-table tr:hover td{ background:var(--tk-hover) !important; }
html.tk-other #subscription-table td.subscription{
  width:60px !important; text-align:right !important;
}

/* ---- 67.3 Фильтры: набор и правила ----
   Имена «#1 #2 #3» приходят из самого правила sieve — переименовать
   их можно только там. Но выглядеть они должны как список, а не
   как строки без полей. */
html.tk-other #filterslist,
html.tk-other #filtersetslist{
  max-width:820px !important;
  margin:0 auto !important;
  padding:8px 0 !important;
}
html.tk-other #filterslist li{
  border-bottom:1px solid var(--tk-border) !important;
}
html.tk-other #filterslist li:last-child{ border-bottom:0 !important; }

/* «Действия» в шапке — подпись обрезалась так же, как в письме */
html.tk-other #layout-content > .header a.button,
html.tk-other #layout-content > .header a.button *{
  max-width:none !important; width:auto !important;
  overflow:visible !important; text-overflow:clip !important;
  white-space:nowrap !important;
}

/* ---- 67.4 Полоса отписки: длинный адрес не должен ломать строку ---- */
.tk-unsub-t{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:calc(100% - 160px);
}

/* ============================================================
   68. НИЧЕГО НЕ РЕЖЕТСЯ — ОДНО ПРАВИЛО НА ВСЁ

   Тема elastic режет подписи кнопок ВЕЗДЕ: она задаёт им узкую
   ширину и многоточие. Я чинил это по одному месту — в письме,
   в фильтрах, в настройках, — и каждый раз находилось новое.

   Причина одна, значит и правило должно быть одно. Снимаем
   ограничения ширины со всех подписей интерфейса разом.
   ============================================================ */

.toolbar a.button,
.toolbar a.button *,
.toolbar button,
.toolbar button *,
#layout-content > .header a.button,
#layout-content > .header a.button *,
#layout-list > .header a.button,
#layout-list > .header a.button *,
#layout-sidebar .header a.button,
.header a.button .inner,
.formbuttons button,
.formbuttons button *,
.ui-dialog .ui-button,
.ui-dialog .ui-button *,
.popupmenu li a,
.popupmenu li a *{
  max-width:none !important;
  min-width:0 !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-indent:0 !important;
}

/* Подписи темы идут отдельным слоем .inner — у него своя ширина */
.header .inner,
.toolbar .inner,
a.button > .inner,
button > .inner{
  display:inline !important;
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:inherit !important;
}

/* Панели, где кнопки не помещаются, переносят их, а не режут */
.toolbar,
#layout-content > .header,
#layout-list > .header{
  flex-wrap:wrap !important;
  height:auto !important;
  min-height:auto !important;
  overflow:visible !important;
}

/* ============================================================
   69. ШИРИНА И РАСПОЛОЖЕНИЕ КАК В ЭТАЛОНЕ

   В эталоне содержимое НЕ растягивается на весь монитор:
   у списка писем и у страниц настроек есть предел ширины,
   дальше идут поля. На широком экране без этого строка
   тянется на две тысячи пикселей и читать невозможно.
   ============================================================ */
@media (min-width:1500px){
  /* список писем: строка не шире удобного для чтения */
  html.tk-list-mode #messagelist{
    max-width:1600px;
    margin:0 auto;
  }
  /* содержимое настроек и контактов — колонкой по центру */
  html.tk-other #layout-content > .scroller > *,
  html.tk-other #layout-list > .scroller > *{
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Ничего не должно съезжать за край: всё, что шире места,
   переносится или сжимается, но не вылезает. */
#layout, #layout-list, #layout-content, #layout-sidebar{
  min-width:0 !important;
  overflow-x:hidden !important;
}
#messagelist td,
.propform td,
#folders-table td{
  min-width:0 !important;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Длинные имена и адреса обрезаются многоточием ТОЛЬКО там,
   где это осмысленно: отправитель и тема письма. В кнопках
   и подписях — никогда. */
#messagelist td.fromto span,
#messagelist td.subject span.subject{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

/* ============================================================
   70. ЦВЕТА РОВНО ПО ЭТАЛОНУ

   Значения сняты пипеткой с кадров 02 и 11, а не подобраны:
     панель папок  #F6F7F8
     список писем  #FFFFFF   (не серый — именно белый)
     под курсором  #EBECEF
     разделители   #EBECEF
     страница настроек #FFFFFF, меню слева #F6F7F8

   Раньше у нас список был слегка серым, а разделители темнее
   эталонных — отсюда ощущение «не такой».
   ============================================================ */
:root{
  --tk-surface:#FFFFFF;      /* список писем и карточки — белые */
  --tk-page:#F6F7F8;         /* панель папок и фон страниц */
  --tk-hover:#EBECEF;        /* строка под курсором */
  --tk-sel:#EBECEF;          /* выбранная строка */
  --tk-border:#EBECEF;       /* разделители строк */
}

/* список писем на белом, как в эталоне */
#layout-list,
#messagelist,
#messagelist tbody tr,
#messagelist tbody tr > td{
  background-color:#FFFFFF !important;
}
#messagelist tbody tr{
  border-bottom:1px solid #EBECEF !important;
}
#messagelist tbody tr:hover,
#messagelist tbody tr:hover > td{
  background-color:#EBECEF !important;
}

/* панель папок и фон страниц */
#layout-sidebar{ background-color:#F6F7F8 !important; }
html.tk-other #layout-content > .scroller,
html.tk-other #layout-content > .header{ background-color:#FFFFFF !important; }
html.tk-other #layout-sidebar{ background-color:#F6F7F8 !important; }

/* карточка настроек на белом — без своей заливки и тени,
   в эталоне она не выделяется фоном, только полями */
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .contentbox{
  background-color:#FFFFFF !important;
  box-shadow:none !important;
  border:0 !important;
}

/* выбранная папка и пункт меню */
#folderlist li.selected > a,
html.tk-other #settings-menu li.selected a{
  background-color:#EBECEF !important;
  color:#2C2D2E !important;
}

/* ============================================================
   71. КВАДРАТИК ПРИ НАВЕДЕНИИ НА КРУГ

   Не появлялся вовсе — только при выделении. Виновато моё же
   правило: «наведение на СТРОКУ прячет квадратик» оказалось
   специфичнее, чем «наведение на КРУГ показывает». А строка
   под курсором всегда, когда курсор на круге, — значит пряталка
   выигрывала каждый раз.

   Лечится тем, что делаем показ не менее специфичным.
   ============================================================ */
#messagelist tbody tr span.tk-av:hover .tk-av-box{
  opacity:1 !important;
}
#messagelist tbody tr span.tk-av:hover .tk-av-i,
#messagelist tbody tr span.tk-av:hover img{
  opacity:0 !important;
}

/* ============================================================
   72. ПЕРЕСЫЛКА ПИСЕМ

   Кнопка «Добавить пересылку» рядом с «Добавить фильтр» и окно
   с полем адреса — по образцу эталона.
   ============================================================ */
.tk-fwd-btn{
  border:1px solid var(--tk-border-2);
  background:var(--tk-surface);
  color:var(--tk-text);
  border-radius:9px;
  padding:11px 20px;
  margin-left:10px;
  font:400 15px/1.2 inherit;
  cursor:pointer;
  white-space:nowrap;
}
.tk-fwd-btn:hover{ background:var(--tk-hover); }
.tk-fwd-btn.on{
  border-color:var(--tk-accent);
  color:var(--tk-accent-2);
  font-weight:500;
}

.tk-fwd-back{
  position:fixed; inset:0; z-index:2147483003;
  background:rgba(44,45,46,.42);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.tk-fwd-win{
  background:var(--tk-surface);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(20,40,70,.24);
  width:min(94vw, 420px);
  padding:22px 24px 20px;
}
.tk-fwd-h{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.tk-fwd-h b{ font:600 20px/1.3 inherit; color:var(--tk-text); }
.tk-fwd-x{
  width:32px; height:32px; border:0; background:none;
  border-radius:8px; color:var(--tk-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tk-fwd-x:hover{ background:var(--tk-hover); color:var(--tk-text); }

.tk-fwd-t{
  color:var(--tk-muted); font-size:14px; line-height:1.45;
  margin-bottom:16px;
}
.tk-fwd-i{
  width:100%; box-sizing:border-box;
  border:1px solid var(--tk-border-2); border-radius:9px;
  padding:11px 13px; font-size:15px;
  background:var(--tk-surface); color:var(--tk-text);
  margin-bottom:18px;
}
.tk-fwd-i:focus{
  border-color:var(--tk-accent);
  outline:2px solid rgba(var(--tk-accent-rgb),.16); outline-offset:0;
}

.tk-fwd-f{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tk-fwd-ok{
  background:var(--tk-accent); color:#fff; border:0;
  border-radius:9px; padding:11px 24px;
  font:600 15px/1.2 inherit; cursor:pointer;
}
.tk-fwd-ok:hover{ background:var(--tk-accent-2); }
.tk-fwd-no{
  background:var(--tk-surface2); color:var(--tk-text);
  border:0; border-radius:9px; padding:11px 20px;
  font:400 15px/1.2 inherit; cursor:pointer;
}
.tk-fwd-no:hover{ background:var(--tk-hover); }
.tk-fwd-off{
  margin-left:auto; background:none; border:0;
  color:var(--tk-danger); font:400 14px/1.2 inherit;
  cursor:pointer; padding:11px 4px;
}
.tk-fwd-off:hover{ text-decoration:underline; }

html.dark-mode .tk-fwd-win{ background:#232529 !important; }
html.dark-mode .tk-fwd-i{
  background:#1A1B1F !important; border-color:#33363C !important;
  color:var(--tk-text) !important;
}
html.dark-mode .tk-fwd-no{ background:#1A1B1F !important; color:var(--tk-text) !important; }

/* ============================================================
   73. НАСТРОЙКИ: ТЕКСТ ПЕРЕСТАЁТ РЕЗАТЬСЯ

   Прежнее правило снимало обрезание с КНОПОК. А в настройках
   режется другое: подписи полей, названия разделов, пояснения,
   названия папок и профилей. Там своя вёрстка — таблица с
   жёсткой шириной колонки, и длинная подпись уходит в многоточие.

   Здесь запрет для всего, что есть на страницах настроек.
   ============================================================ */

html.tk-other td,
html.tk-other th,
html.tk-other label,
html.tk-other legend,
html.tk-other .boxtitle,
html.tk-other .hint,
html.tk-other .form-text,
html.tk-other li a,
html.tk-other li a span,
html.tk-other .listing td,
html.tk-other .propform td.title,
html.tk-other #settings-menu li a,
html.tk-other #folders-table td,
html.tk-other #identities-table td,
html.tk-other #responses-table td,
html.tk-other #filterslist li a,
html.tk-other #contacts-table td{
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  max-width:none !important;
  text-indent:0 !important;
  word-break:normal;
  overflow-wrap:break-word;
  line-height:1.45 !important;
}

/* Подпись поля может занять две строки — это лучше, чем многоточие.
   Ячейка при этом растёт, а не режет содержимое. */
html.tk-other .propform td,
html.tk-other .propform th{
  height:auto !important;
  vertical-align:middle !important;
}

/* Заголовки разделов и групп: длинные названия переносятся */
html.tk-other #layout-content > .header .header-title,
html.tk-other legend,
html.tk-other .boxtitle{
  white-space:normal !important;
  overflow:visible !important;
  height:auto !important;
  max-width:none !important;
}

/* Списки папок, профилей, ответов и фильтров — то же самое */
html.tk-other .listing li a,
html.tk-other .listing li span,
html.tk-other #directorylist li a{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  height:auto !important;
  min-height:38px;
  display:flex !important;
  align-items:center;
}

/* Поля ввода не должны прятать введённое: если текст длиннее
   поля, он прокручивается, а не обрезается насовсем. */
html.tk-other input[type=text],
html.tk-other input[type=email],
html.tk-other input[type=password],
html.tk-other select,
html.tk-other textarea{
  text-overflow:clip !important;
}

/* Строка «Пересылка: адрес@почта.ру» на кнопке тоже целиком */
.tk-fwd-btn{
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
}

/* ============================================================
   74. ФИЛЬТРЫ: ТРИ СТОЛБЦА, ОБРУБКИ ПОЛЕЙ, НАЕЗД КНОПОК

   На странице фильтров тема разворачивает СВОЮ трёхколоночную
   раскладку: слева меню, посередине список правил, справа форма.
   Наши правила её не касались — они писались для двухколоночного
   вида почты, а сюда не доставали.

   Плюс сама форма правила свёрстана таблицей с фиксированными
   ширинами: поля сжимаются в обрубки, а кнопки «Добавить» и
   «Удалить» накладываются друг на друга.
   ============================================================ */

/* ---- 74.1 Форма занимает место списка, а не третий столбец ---- */
html.tk-other #layout-content{
  flex:1 1 auto !important;
  max-width:none !important;
  width:auto !important;
  border-left:1px solid var(--tk-border) !important;
}
html.tk-other.tk-other-open #layout-list{ display:none !important; }

/* когда открыта форма правила, список правил уступает ей место */
html.tk-other #filter-form-frame,
html.tk-other #preferences-frame{
  width:100% !important;
  max-width:none !important;
}

/* ---- 74.2 Форма правила: поля нормального размера ---- */
html.tk-other #filter-form fieldset,
html.tk-other #filter-form .propform{
  max-width:900px !important;
  margin:0 auto !important;
}

/* строка условия и строка действия — в линию, с переносом */
html.tk-other #filter-form .rulerow,
html.tk-other #filter-form .actionrow,
html.tk-other #filter-form div.rule,
html.tk-other #filter-form div.action{
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  padding:10px 0 !important;
  width:100% !important;
}

/* поля внутри строки: тянутся, но не схлопываются в обрубок */
html.tk-other #filter-form .rulerow select,
html.tk-other #filter-form .rulerow input,
html.tk-other #filter-form .actionrow select,
html.tk-other #filter-form .actionrow input,
html.tk-other #filter-form .actionrow textarea{
  flex:1 1 170px !important;
  min-width:150px !important;
  max-width:none !important;
  width:auto !important;
  min-height:42px !important;
  height:auto !important;
  box-sizing:border-box !important;
}

/* поле значения шире прочих: туда пишут адрес или текст */
html.tk-other #filter-form input.rule-value,
html.tk-other #filter-form .actionrow textarea{
  flex:2 1 260px !important;
}

/* ---- 74.3 Кнопки «Добавить» и «Удалить» перестают наезжать ---- */
html.tk-other #filter-form a.button.add,
html.tk-other #filter-form a.button.del,
html.tk-other #filter-form .rulerow .buttons,
html.tk-other #filter-form .actionrow .buttons{
  position:static !important;
  float:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
}
html.tk-other #filter-form a.button.add{
  background:var(--tk-accent) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:9px !important;
  padding:11px 18px !important;
  white-space:nowrap !important;
}
html.tk-other #filter-form a.button.del{
  background:none !important;
  color:var(--tk-muted) !important;
  border:0 !important;
  width:38px !important; height:38px !important;
  border-radius:8px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
}
html.tk-other #filter-form a.button.del:hover{
  background:var(--tk-hover) !important; color:var(--tk-danger) !important;
}

/* ---- 74.4 Сообщение об ошибке под полем, а не поверх ---- */
html.tk-other #filter-form .error,
html.tk-other span.error{
  display:block !important;
  position:static !important;
  color:var(--tk-danger) !important;
  font-size:13px !important;
  margin:4px 0 0 !important;
  width:100% !important;
}
html.tk-other input.error,
html.tk-other select.error{
  border-color:var(--tk-danger) !important;
}

/* ============================================================
   75. ШАГ СТРОКИ ПИСЬМА — 48 ПИКСЕЛЕЙ, КАК В ЭТАЛОНЕ

   Значение не на глаз: на кадре 02 найдены аватарки и измерено
   расстояние между их серединами. Вышло ровно 48 пикселей
   (шаги по 88 — это места, где между строками стоит разделитель
   дня, их в счёт не берём).

   У нас было 51 — строки чуть выше нужного. Разница набегала
   из отступов ячейки: 9 сверху и 9 снизу при содержимом 33.
   ============================================================ */
#messagelist tbody tr[id^=rcmrow]{
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  box-sizing:border-box !important;
}
#messagelist tbody tr[id^=rcmrow] > td{
  padding-top:7px !important;
  padding-bottom:7px !important;
  height:auto !important;
  box-sizing:border-box !important;
}

/* Начало текста и тема должны уместиться в одну строку:
   при высоте 48 вторая строка вылезет за край. */
#messagelist tbody tr[id^=rcmrow] td.subject,
#messagelist .tk-snip{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.35 !important;
}

/* В плотном режиме — 40, как и было задумано */
html.tk-compact #messagelist tbody tr[id^=rcmrow]{
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
}
html.tk-compact #messagelist tbody tr[id^=rcmrow] > td{
  padding-top:4px !important;
  padding-bottom:4px !important;
}

/* ============================================================
   76. ПОЧЕМУ ПРАВИЛА НЕ ДЕЙСТВОВАЛИ ВНУТРИ ФОРМЫ ФИЛЬТРА

   Форма правила открывается ВО ФРЕЙМЕ — это отдельный документ.
   Класс tk-other стоит на странице-родителе, а внутри фрейма
   его нет. Значит все мои правила, начинавшиеся с html.tk-other,
   до формы не доставали вовсе — сколько их ни пиши.

   Здесь то же самое, но БЕЗ приставки: правила действуют
   и в основном окне, и внутри фрейма.
   ============================================================ */

/* поля формы: нормальный размер, ничего не режется */
#filter-form input[type=text],
#filter-form input[type=email],
#filter-form select,
#filter-form textarea,
#vacation-form input,
#vacation-form select,
#vacation-form textarea{
  min-height:42px !important;
  height:auto !important;
  border:1px solid #D9DBDF !important;
  border-radius:9px !important;
  padding:9px 12px !important;
  font-size:14px !important;
  box-sizing:border-box !important;
  max-width:none !important;
  text-overflow:clip !important;
}

/* подписи полей целиком, с переносом */
#filter-form td,
#filter-form th,
#filter-form label,
#filter-form legend,
#vacation-form td,
#vacation-form label{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
  line-height:1.45 !important;
  padding:10px 12px 10px 0 !important;
}

/* строка условия и действия — в линию, поля тянутся */
#filter-form .rulerow,
#filter-form .actionrow{
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  padding:10px 0 !important;
  width:100% !important;
}
#filter-form .rulerow select,
#filter-form .rulerow input,
#filter-form .actionrow select,
#filter-form .actionrow input,
#filter-form .actionrow textarea{
  flex:1 1 170px !important;
  min-width:150px !important;
  width:auto !important;
}
#filter-form input.rule-value,
#filter-form .actionrow textarea{ flex:2 1 260px !important; }

/* кнопки не наезжают друг на друга */
#filter-form a.button.add,
#filter-form a.button.del,
#filter-form .rulerow .buttons,
#filter-form .actionrow .buttons{
  position:static !important;
  float:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center; gap:6px;
}
#filter-form a.button.add{
  background:#0F7BC4 !important; color:#fff !important;
  border:0 !important; border-radius:9px !important;
  padding:11px 18px !important; white-space:nowrap !important;
}
#filter-form a.button.del{
  background:none !important; color:#6F7178 !important;
  border:0 !important; width:38px !important; height:38px !important;
  border-radius:8px !important; padding:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}

/* ошибка под полем, а не поверх него */
#filter-form .error,
#vacation-form .error{
  display:block !important; position:static !important;
  color:#D64B4B !important; font-size:13px !important;
  margin:4px 0 0 !important; width:100% !important;
}

/* форма во фрейме занимает всю ширину, а не жмётся столбцом */
body.iframe #filter-form,
body.iframe .formcontent,
html body #filter-form{
  max-width:900px !important;
  margin:0 auto !important;
  padding:20px 24px !important;
}

/* подключение ящика: кнопка и заголовок списка */
.tk-acc-add{ border-top:1px solid var(--tk-border); }
.tk-acc-add button{ color:var(--tk-accent-2) !important; }
.tk-acc-add button .tk-i{ color:var(--tk-accent-2) !important; }
.tk-acc-t{
  padding:12px 16px 6px; font-size:12px; letter-spacing:.04em;
  color:var(--tk-muted-2); text-transform:uppercase;
}

/* ============================================================
   77. НАДПИСИ НАЛЕЗАЮТ НА СОДЕРЖИМОЕ

   На кадрах видно: «Назад», «Создать», «Удалить», «Действия»
   висят ПОВЕРХ списка, а «Метка» в окне письма перекрывает
   соседние кнопки.

   Причина не в обрезании, а в раскладке: тема ставит шапке
   position:absolute и нулевую высоту, а кнопки внутри
   разлетаются. Раньше я снимал ограничения ширины — от этого
   надписи стали целыми, но полезли друг на друга.

   Лечим иначе: шапка занимает СВОЁ место в потоке, содержимое
   начинается под ней.
   ============================================================ */

/* #messagetoolbar здесь БЫЛ и всё ломал.

   Он попал в список принудительного показа, когда я боролся
   с наложением надписей. И перебивал все пряталки: в окне
   написания панель оставалась видной, сколько её ни прячь.

   Нашлось разбором всех страниц разом: из четырнадцати чужая
   панель осталась ровно на одной, и виновником оказалось моё
   же правило отсюда. */
/* И «.header .toolbar» тоже задевал панель: она лежит ВНУТРИ
   шапки, то есть подходит под этот селектор как потомок.
   Исключаем страницу написания — там панель не нужна. */
html:not(.tk-compose-page):not(.tk-inmodal) #layout-content > .header,
html:not(.tk-compose-page):not(.tk-inmodal) #layout-list > .header,
html:not(.tk-compose-page):not(.tk-inmodal) #layout-sidebar > .header,
/* «.header .toolbar» убран из этого списка совсем.

   Он ловил панель темы как потомка шапки и показывал её в окне
   написания — сколько её ни прячь другими правилами. Оформление
   шапок от этого не страдает: они перечислены выше поимённо. */
html:not(.tk-compose-page):not(.tk-inmodal) #layout-sidebar > .header{
  position:relative !important;
  height:auto !important;
  min-height:52px !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  padding:7px 14px !important;
  box-sizing:border-box !important;
  z-index:2 !important;
  background:var(--tk-surface) !important;
  border-bottom:1px solid var(--tk-border) !important;
}

/* кнопки внутри шапки не вылезают за её границы */
#layout-content > .header > *,
#layout-list > .header > *,
.header .toolbar > *,
#messagetoolbar > *{
  position:relative !important;
  float:none !important;
  top:auto !important; left:auto !important;
  right:auto !important; bottom:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

/* содержимое начинается ПОД шапкой, а не заезжает под неё */
#layout-content > .scroller,
#layout-list > .scroller{
  position:relative !important;
  z-index:1 !important;
  margin-top:0 !important;
  padding-top:0 !important;
}

/* «Назад» и стрелка возврата — обычная кнопка в ряду */
.header a.back-list-button,
.header a.back-sidebar-button,
.header .back{
  position:relative !important;
  float:none !important;
  margin:0 6px 0 0 !important;
  order:-1;
}

/* подпись под значком не растягивает кнопку и не лезет вбок */
.header a.button,
.toolbar a.button,
#messagetoolbar a.button{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:7px !important;
  height:auto !important;
  min-height:38px !important;
  padding:7px 11px !important;
  line-height:1.25 !important;
}
.header a.button .inner,
.toolbar a.button .inner{
  position:static !important;
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.25 !important;
}

/* ============================================================
   78. ФОРМА ФИЛЬТРА: КНОПКИ НАД ПОЛЯМИ

   На кадре «Добавить» и «Удалить» стояли поверх полей ввода —
   у них absolute от темы. Возвращаем в поток.
   ============================================================ */
/* Только на широком экране: на телефоне тема раскладывает
   форму сама, и общий запрет её разваливает — проверено
   на снимках, там всё поехало. */
@media (min-width:900px){
  #filter-form a.button,
  #filter-form .buttons,
  #vacation-form a.button,
  #vacation-form .buttons{
    position:static !important;
    float:none !important;
  }
  #filter-form .rulerow,
  #filter-form .actionrow,
  #vacation-form .rulerow{
    position:relative !important;
  }
}


/* ============================================================
   79. ПОЧЕМУ ЗДЕСЬ БОЛЬШЕ НЕТ ЗАПРЕТА «ВИСЕТЬ ПОВЕРХ»

   Здесь стояло правило position:static для всего подряд —
   я так боролся с наложениями надписей.

   Оно сделало ХУЖЕ. Тема elastic держит на «висеть поверх»
   всю раскладку: и мобильный вид, и выпадающие панели, и
   кнопки в шапках. Отняв это разом, я развалил интерфейс:
   на телефоне «Меню» задвоилось, панели разъехались, кнопки
   легли друг на друга.

   Правило снято. Наложения надо чинить точечно — там, где
   они есть, и с оглядкой на ширину экрана. Общий запрет
   для чужой темы не работает.
   ============================================================ */

/* Точечно: только кнопки в шапке НАШИХ разделов на широком
   экране. На узком тема раскладывает их сама, и трогать
   нельзя — иначе получится то, что было на снимках. */
@media (min-width:900px){
  html.tk-other #layout-content > .header > a.button,
  html.tk-other #layout-content > .header > button{
    position:relative !important;
    float:none !important;
  }
}

/* ============================================================
   81. ТЁМНАЯ ТЕМА: ТЕКСТ ПИСЬМА НЕ ВИДНО

   На снимке письмо в тёмной теме: подложка тёмная, а текст
   письма чёрный — он написан отправителем и о теме не знает.
   Читать невозможно.

   Правильное решение: подложку письма держать СВЕТЛОЙ даже
   в тёмной теме. Так делают все почтовые клиенты — иначе
   чужая вёрстка с чёрным текстом становится нечитаемой.
   ============================================================ */
html.dark-mode #messagebody,
html.dark-mode #message-content .message-part,
html.dark-mode #messagecontframe,
html.dark-mode .message-htmlpart,
html.dark-mode .message-part,
html.dark-mode #messagebody *,
html.dark-mode .message-part *{
  background-color:#FFFFFF !important;
  color:#2C2D2E !important;
}

/* ссылки внутри письма остаются синими */
html.dark-mode #messagebody a,
html.dark-mode .message-part a{
  color:#0F7BC4 !important;
}

/* сам кадр письма светлый */
html.dark-mode iframe#messagecontframe,
html.dark-mode #message-content{
  background:#FFFFFF !important;
}

/* Простой текст письма — тоже на светлом */
html.dark-mode #messagebody pre,
html.dark-mode .message-part pre,
html.dark-mode div.message-part div{
  background:#FFFFFF !important;
  color:#2C2D2E !important;
}

/* Шапка письма остаётся тёмной: она наша, не отправителя */
html.dark-mode #messageheader,
html.dark-mode #message-header,
html.dark-mode .tk-msgbar,
html.dark-mode .tk-msgfoot{
  background:#1A1B1F !important;
  color:var(--tk-text) !important;
}
html.dark-mode #messageheader *,
html.dark-mode #message-header *{
  background:transparent !important;
}
html.dark-mode #messageheader .subject,
html.dark-mode #message-header .subject{
  color:var(--tk-text) !important;
}

/* ============================================================
   82. ЛИШНИЕ ПАНЕЛИ ТЕМЫ НА УЗКОМ ЭКРАНЕ

   На снимке сверху развёрнута ЧУЖАЯ панель: «Написать
   сообщение, Ответить, Ответить всем, Параметры ответа всем,
   Переслать, Опции пересылки, Удалить, Архив, СПАМ, Пометить,
   Ещё». Ниже — «Меню ⋮ ⋮ ⋮».

   Это раскрытое меню темы. У нас все эти действия уже есть:
   в строке письма, в меню по нажатию, в панели над списком.
   Чужая панель их только повторяет и занимает пол-экрана.

   Раньше её прятало правило, которое я снял вместе с тем,
   что ломало телефон. Возвращаю — но прицельно, пряча
   только саму панель, а не раскладку вокруг.
   ============================================================ */

/* БЕЗ приставки tk-nomenu.

   Правило висело под классом tk-nomenu, а его на странице может
   не быть — он ставится сервером и только для части экранов.
   Оттого панель и оставалась видна: правило до неё не доставало.

   По разметке темы (mail-menu.html) панель называется #mailtoolbar
   и имеет классы toolbar menu. Прячем именно её. */
#mailtoolbar,
#layout-menu,
#taskmenu,
#messagetoolbar.popupmenu,
.popupmenu.toolbarmenu,
#markmessagemenu,
#messagemenu,
#replyall-menu,
#forward-menu,
#markmessage-menu{
  display:none !important;
}

/* Кнопка, которая её раскрывает, тоже не нужна */
a#messagemenulink,
a#markmessagemenulink,
a#replyallmenulink,
a#forwardmenulink,
a.button.menu,
a[data-popup="mailtoolbar"],
a[data-popup="markmessage-menu"]{
  display:none !important;
}

/* «Меню» с тремя точками — их у нас заменяют свои кнопки.
   Тоже без приставки: она не всегда есть. */
#layout-list > .header > a.menu-button,
#layout-content > .header > a.menu-button,
a.menuthreads,
a.menusearch,
.header > a[data-popup],
.header > span.dropbutton{
  display:none !important;
}

/* на узком экране прячем и родную полосу действий:
   всё то же есть в строке письма и в меню по нажатию */
@media (max-width:899px){
  .toolbar.footer,
  #layout-list > .header > .toolbar{
    display:none !important;
  }
}

/* Наши панели при этом остаются: они и есть замена */
/* Наши панели остаются: они и есть замена */
#tk-listbar,
.tk-listbar,
#tk-msgbar:not(.tk-msgbar-idle),
.tk-side-top,
.tk-side-foot{
  display:flex !important;
}

/* ============================================================
   83. ТЕЛЕФОН: ПАНЕЛЬ ПАПОК ДОЛЖНА УЕЗЖАТЬ

   На снимке с телефона панель папок занимает половину экрана,
   списку остаётся полоска: темы обрезаны до «CD…», даты налезают
   на них, «Меню» задвоено.

   Мои правила ширины стоят под @media (min-width:900px) — на
   телефон не действуют. Но и тема свою мобильную раскладку не
   разворачивает: мешают наши классы tk-list-mode и прочие.

   Здесь — раскладка для узкого экрана: панель уезжает за край
   и выдвигается кнопкой, список занимает всю ширину.
   ============================================================ */

@media (max-width:899px){

  /* панель папок за краем, выезжает по кнопке */
  html.tk-list-mode #layout-sidebar,
  html.tk-msg-mode #layout-sidebar,
  html.tk-other #layout-sidebar{
    position:fixed !important;
    top:0 !important; bottom:0 !important; left:0 !important;
    width:min(84vw, 320px) !important;
    max-width:min(84vw, 320px) !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    z-index:1000 !important;
    transform:translateX(-102%);
    transition:transform .18s ease-out;
    box-shadow:2px 0 16px rgba(20,40,70,.18);
  }

  html.tk-side-open #layout-sidebar{ transform:translateX(0) !important; }

  /* затемнение под выдвинутой панелью */
  html.tk-side-open body::after{
    content:''; position:fixed; inset:0;
    background:rgba(44,45,46,.4); z-index:999;
  }

  /* список и письмо — во всю ширину */
  html.tk-list-mode #layout-list,
  html.tk-msg-mode #layout-list,
  html.tk-other #layout-content{
    flex:1 1 100% !important;
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
  }

  /* строка письма: отправитель, тема, дата умещаются */
  #messagelist tbody tr[id^=rcmrow]{
    height:auto !important;
    min-height:64px !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:38px 1fr auto !important;
    grid-template-areas:'ав от дата' 'ав тема тема' !important;
    align-items:center !important;
    gap:2px 10px !important;
    padding:9px 12px !important;
  }
  #messagelist tbody tr[id^=rcmrow] span.tk-av{ grid-area:ав !important; }
  #messagelist tbody tr[id^=rcmrow] td.fromto{ grid-area:от !important; }
  #messagelist tbody tr[id^=rcmrow] td.subject{
    grid-area:тема !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #messagelist tbody tr[id^=rcmrow] td.date{
    grid-area:дата !important;
    text-align:right !important;
    font-size:12.5px !important;
    white-space:nowrap !important;
  }
  /* на узком начало текста прячем: места нет */
  #messagelist .tk-snip{ display:none !important; }
  /* лишние ячейки не занимают место */
  #messagelist tbody tr[id^=rcmrow] td.flag,
  #messagelist tbody tr[id^=rcmrow] td.attachment,
  #messagelist tbody tr[id^=rcmrow] td.threads,
  #messagelist tbody tr[id^=rcmrow] td.size{ display:none !important; }

  /* задвоенное «Меню» и чужие кнопки шапки */
  #layout-list > .header > a.button:not(.tk-side-toggle),
  #layout-content > .header > a.button.menu,
  a.task-menu-button,
  a.folders-button{
    display:none !important;
  }
}

/* кнопка «Папки» — только на узком экране */
.tk-side-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:0; background:none; border-radius:9px;
  color:var(--tk-text); cursor:pointer; padding:0;
  flex:0 0 auto;
}
@media (max-width:899px){
  .tk-side-toggle{ display:inline-flex !important; }
}
.tk-side-toggle:hover{ background:var(--tk-hover); }

/* ============================================================
   84. ЧУЖАЯ ПАНЕЛЬ СВЕРХУ — ОКОНЧАТЕЛЬНО

   На кадре 1920 сверху висит полоса темы: «Меню · Выбрать ·
   Обсуждения · Параметры · Метка · Написать · Ответить ·
   Ответить всем · Переслать · Удалить · Архив · СПАМ · Меню».
   Подписи обрезаны, всё налезает друг на друга.

   Я прятал её несколько раз, и каждый раз она возвращалась.
   Причина найдена: моё ЖЕ правило (раздел 77) принудительно
   показывает шапку принудительно. Оно перебивает
   пряталку, потому что стоит позже.

   Здесь правило сильнее: в режиме списка шапка колонки писем
   скрыта целиком. Всё, что в ней было, у нас есть своё —
   панель «Выделить все · Отметить прочитанными · Фильтр».
   ============================================================ */

html.tk-list-mode:not(.tk-reading) #layout-list > .header,
html.tk-list-mode:not(.tk-reading) #layout-content > .header,
html.tk-list-mode:not(.tk-reading) .header > .toolbar,
html.tk-list-mode:not(.tk-reading) #mailtoolbar,
html.tk-list-mode:not(.tk-reading) #mailtoolbar *{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Наша панель и поиск остаются — они не в той шапке */
html.tk-list-mode #tk-listbar,
html.tk-list-mode .searchbar,
html.tk-list-mode #layout-list > .searchbar{
  display:flex !important;
  height:auto !important;
  min-height:44px !important;
}

/* В режиме чтения шапка нужна: там панель действий письма */
html.tk-reading #layout-content > .header{
  display:flex !important;
  height:auto !important;
  min-height:52px !important;
  overflow:visible !important;
}

/* ============================================================
   85. РАЗДЕЛИТЕЛЬ ДНЯ НАЛЕЗАЕТ НА ПЕРВОЕ ПИСЬМО

   «На этой неделе» стоит поверх строки Vince-Vince. Он висит
   absolute от темы и не занимает своего места.
   ============================================================ */
#messagelist tbody tr.msgheader,
#messagelist .tk-daysep,
#messagelist tbody tr[class*="date-sep"]{
  position:relative !important;
  display:table-row !important;
  height:auto !important;
}
#messagelist tbody tr.msgheader td,
#messagelist .tk-daysep td{
  padding:14px 20px 6px !important;
  font-size:13px !important;
  color:var(--tk-muted) !important;
  background:var(--tk-surface) !important;
  border:0 !important;
  line-height:1.3 !important;
}

/* ============================================================
   86. ОКНО ПИСЬМА: ВЕРХНЯЯ ПОЛОСА ТЕМЫ

   На кадре 16 сверху висит полоса: «Сохра · Влож · Подп ·
   Ответ · Метка» — подписи обрезаны, «Метка» без значка.
   В эталоне её нет вовсе: там заголовок «Новое письмо»,
   крестик, и всё.

   Убираем. Всё, что она даёт, у нас есть:
     Сохранить → «Отправить» и автосохранение черновика
     Вложить   → «Прикрепить файл» в строке под темой
     Подпись   → там же
     Ответить  → это не нужно в НОВОМ письме
     Метка     → задаётся из списка писем
   ============================================================ */
html.tk-inmodal #messagetoolbar,
html.tk-inmodal .header > .toolbar,
html.tk-inmodal #layout-content > .header,
#tk-compose #messagetoolbar,
#tk-compose .header > .toolbar{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Наша шапка окна остаётся: название и кнопки справа */
#tk-compose .tk-compose-h,
.tk-compose-h{
  display:flex !important;
  height:auto !important;
  min-height:48px !important;
}

/* поля начинаются сразу под шапкой, без пустой полосы */
html.tk-inmodal #compose-content,
html.tk-inmodal .formcontent,
#tk-compose .formcontent{
  padding-top:14px !important;
  margin-top:0 !important;
}

/* кнопка справки в окне письма ни к чему — она перекрывала
   «Отменить» */
#tk-compose .tk-checkbtn,
html.tk-inmodal .tk-checkbtn,
html.tk-inmodal .floating-action-buttons{
  display:none !important;
}

/* ============================================================
   87. РАЗДЕЛ ФИЛЬТРОВ ПО ЭТАЛОНУ (кадр 14)

   На снимке: список правил зажат в узкую полосу посередине,
   слева и справа пусто; пункты меню раздулись в карточки по
   46 пикселей; заголовка раздела нет вовсе.

   В эталоне: заголовок «Правила фильтрации», под ним список
   правил на всю ширину, слева компактное меню.
   ============================================================ */

/* меню разделов: компактный список, а не карточки */
html.tk-other #settings-menu li a,
html.tk-other #layout-sidebar .listing li a{
  min-height:40px !important;
  padding:8px 14px !important;
  margin:1px 8px !important;
  font-size:14px !important;
  border-radius:8px !important;
  gap:11px !important;
}
html.tk-other #settings-menu li a .tk-i,
html.tk-other #settings-menu li a svg{
  width:18px !important; height:18px !important;
  flex:0 0 18px !important;
}

/* список правил — на всю ширину области, с полями */
html.tk-other #filterslist,
html.tk-other #filtersetslist,
html.tk-other #layout-list > .scroller > table,
html.tk-other #layout-list .listing{
  width:auto !important;
  max-width:none !important;
  margin:0 18px !important;
  display:block !important;
}
html.tk-other #filterslist li,
html.tk-other #filtersetslist li{
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  min-height:44px !important;
  padding:0 !important;
  border-bottom:1px solid var(--tk-border) !important;
}
html.tk-other #filterslist li a{
  flex:1 1 auto !important;
  padding:11px 14px !important;
  margin:0 !important;
  border-radius:0 !important;
  min-height:44px !important;
}

/* набор фильтров сверху — как подпись, а не как строка списка */
html.tk-other #filtersetslist{
  border-bottom:1px solid var(--tk-border) !important;
  margin-bottom:8px !important;
}

/* колонка со списком занимает своё место, а не жмётся полоской */
html.tk-other #layout-list{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
}
html.tk-other #layout-list > .scroller{
  padding:12px 0 !important;
}

/* заголовок раздела — крупно, как в эталоне */
.tk-sect{
  font:600 24px/1.25 inherit;
  color:var(--tk-text);
  padding:8px 18px 16px;
}
html.dark-mode .tk-sect{ color:var(--tk-text) !important; }

/* ============================================================
   88. ПАНЕЛЬ ТЕМЫ В ОКНЕ НАПИСАНИЯ — БЕЗ ОГЛЯДКИ НА КЛАСС

   Разбор всех страниц (стенд pages.js) показал: из четырнадцати
   страниц чужая панель остаётся видной ровно на одной — в окне
   написания письма. Та самая полоса «Сохра · Влож · Подп ·
   Ответ · Метка» с обрезанными подписями.

   Правило пряталось под классом tk-inmodal, а он ставится
   скриптом и только когда окно открыто НАШИМ способом. Открыл
   человек письмо иначе — класса нет, панель на месте.

   Прячем по самой странице написания: там эта панель не нужна
   никогда, всё её содержимое у нас есть своим.
   ============================================================ */
/* ТОЛЬКО на странице написания. Прежний вариант включал
   #messagetoolbar.toolbar.menu без оглядки на страницу — и
   задевал открытое письмо: там эта же панель нужна, рядом с
   ней стоят наши кнопки действий. Стенд это поймал. */
body.task-mail.action-compose #messagetoolbar,
body.action-compose #messagetoolbar,
#compose-content #messagetoolbar,
html.tk-compose-page #messagetoolbar,
html.tk-inmodal #messagetoolbar.toolbar.menu{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Но в ОТКРЫТОМ ПИСЬМЕ панель нужна: там наши кнопки действий
   лежат рядом с ней, и общий запрет их бы тоже снёс. */
/* И здесь исключаем страницу написания: правило показывало
   панель и там тоже. В окне письма её быть не должно —
   всё её содержимое у нас своё. */
html.tk-reading:not(.tk-compose-page) #messagetoolbar:not(.toolbar.menu),
html.tk-msg-mode:not(.tk-compose-page) #tk-msgbar{
  display:flex !important;
}

/* ============================================================
   89. ПАНЕЛЬ В ОКНЕ ПИСЬМА — ПОСЛЕДНЕЕ СЛОВО

   Разбор всех страниц показал: панель темы остаётся видной
   ровно в окне написания. Я снял её показ в трёх местах, и
   каждый раз находилось четвёртое: правила накопились за
   восемьдесят разделов и перебивают друг друга.

   Поэтому пряталка стоит В САМОМ КОНЦЕ файла и с длинным
   селектором. При равной силе побеждает последнее правило —
   значит это. Спорить с ней больше нечему.
   ============================================================ */
html.tk-compose-page #messagetoolbar,
html.tk-compose-page .toolbar.menu,
html.tk-inmodal #messagetoolbar,
html.tk-inmodal .toolbar.menu,
body.action-compose #messagetoolbar,
body.action-compose .toolbar.menu{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* ============================================================
   90. ОКНО ПИСЬМА ОТКРЫВАЕТСЯ ВО ФРЕЙМЕ

   Разгадка, которая стоила мне пяти заходов.

   Шаблон compose.html задаёт СВОЙ класс страницы — «iframe».
   Он стирает наш tk-compose-page, поставленный сервером. Значит
   все правила с приставками html.tk-* туда просто не доходят —
   сколько их ни пиши и куда ни ставь.

   Проверено разбором: класс страницы там «iframe», и прямое
   правило html.tk-compose-page #messagetoolbar под панель
   не подходит вовсе.

   Поэтому здесь — БЕЗ приставок, по признакам самой страницы
   написания: её разметка узнаётся по полям «Кому» и «Тема».
   ============================================================ */

html.iframe #messagetoolbar,
html.iframe .toolbar.menu,
body:has(#compose-subject) #messagetoolbar,
body:has(#_to) #messagetoolbar{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Внутри фрейма шапка тоже не нужна: наша своя, с названием
   окна и кнопками справа, стоит снаружи. */
html.iframe #layout-content > .header,
html.iframe .header > .toolbar{
  display:none !important;
}

/* А поля письма начинаются сразу, без пустой полосы сверху */
html.iframe #compose-content,
html.iframe .formcontent{
  padding-top:12px !important;
  margin-top:0 !important;
}

/* ============================================================
   91. ФОРМЫ НАСТРОЕК ВО ФРЕЙМЕ — ПО ЭТАЛОНУ

   Осмотр изнутри (стенд inside.js) показал три расхождения,
   которых не видно было ни на шаблонах, ни на снимках:

     рамка поля   прозрачная — поля сливаются с карточкой
     подпись      16px вместо 15
     «Сохранить»  белая вместо синей

   Формы открываются во фрейме, поэтому правила без приставок:
   класса tk-other там нет.
   ============================================================ */

/* поля видны: рамка, а не пустота */
.formcontent input[type=text],
.formcontent input[type=email],
.formcontent input[type=password],
.formcontent input[type=number],
.formcontent select,
.formcontent textarea,
fieldset.propform input[type=text],
fieldset.propform select,
body.iframe input[type=text],
body.iframe select,
body.iframe textarea{
  border:1px solid #D9DBDF !important;
  border-radius:9px !important;
  min-height:40px !important;
  padding:9px 12px !important;
  font-size:14px !important;
  background:#FFFFFF !important;
  color:#2C2D2E !important;
  box-sizing:border-box !important;
}
.formcontent input:focus,
.formcontent select:focus,
body.iframe input:focus,
body.iframe select:focus{
  border-color:#0F7BC4 !important;
  outline:2px solid rgba(15,123,196,.16) !important;
  outline-offset:0 !important;
}

/* подписи полей — 15px, как в эталоне */
.formcontent td.title,
.formcontent label,
fieldset.propform td.title,
body.iframe td.title,
body.iframe label{
  font-size:15px !important;
  color:#2C2D2E !important;
  font-weight:400 !important;
  line-height:1.4 !important;
}

/* пояснение под подписью — серым и мельче */
.formcontent .hint,
body.iframe .hint,
body.iframe .form-text{
  font-size:13px !important;
  color:#6F7178 !important;
  display:block !important;
  margin-top:4px !important;
}

/* «Сохранить» — основная кнопка, синяя */
.formbuttons button.save,
.formbuttons button.mainaction,
.formbuttons input[type=submit],
body.iframe button.save,
body.iframe .formbuttons button:first-child{
  background:#0F7BC4 !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:10px !important;
  padding:12px 30px !important;
  font:600 15px/1.2 inherit !important;
  cursor:pointer;
}
.formbuttons button.save:hover,
body.iframe button.save:hover{ background:#0D5FA0 !important; }

/* прочие кнопки формы — спокойные */
.formbuttons button:not(.save):not(.mainaction),
body.iframe .formbuttons button:not(:first-child){
  background:#F0F1F3 !important;
  color:#2C2D2E !important;
  border:0 !important;
  border-radius:10px !important;
  padding:12px 24px !important;
}

/* Кнопка «Сохранить» зовётся btn-primary submit — так её
   называет Roundcube. Прежние правила целились в .save и
   .mainaction, которых у неё нет. Проверено осмотром изнутри. */
.formbuttons button.submit,
.formbuttons button.btn-primary,
button.btn.btn-primary.submit,
body.iframe button.btn-primary{
  background:#0F7BC4 !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:10px !important;
  padding:12px 30px !important;
  font:600 15px/1.2 inherit !important;
}
.formbuttons button.submit:hover,
body.iframe button.btn-primary:hover{ background:#0D5FA0 !important; }

/* Заголовок группы полей — 19px, как в эталоне.
   Подписи же самих полей лежат в td.title, они 15px. */
.formcontent legend,
fieldset legend,
body.iframe legend{
  font-size:19px !important;
  font-weight:600 !important;
  color:#2C2D2E !important;
  padding:0 0 4px !important;
  margin:6px 0 14px !important;
  border:0 !important;
}

/* ============================================================
   92. СПИСКИ ПАПОК, ПРОФИЛЕЙ И КОНТАКТОВ

   Осмотр изнутри показал: строки без отступов и разделителей,
   область без предела ширины. В эталоне строки с воздухом,
   разделены линиями, а список не растянут на весь монитор.

   Разметка у всех одна: таблица с классом listing, строки
   с опознавательным номером. Правим по ней.
   ============================================================ */

table.listing tbody tr > td,
#identities-table tbody tr > td,
#contacts-table tbody tr > td,
#subscription-table tbody tr > td,
#folderslist li > a{
  padding:12px 16px !important;
  font-size:14px !important;
  line-height:1.4 !important;
  color:#2C2D2E !important;
  vertical-align:middle !important;
}

table.listing tbody tr,
#identities-table tbody tr,
#contacts-table tbody tr,
#subscription-table tbody tr{
  border-bottom:1px solid #EBECEF !important;
}
table.listing tbody tr:last-child{ border-bottom:0 !important; }

table.listing tbody tr:hover > td,
#contacts-table tbody tr:hover > td,
#identities-table tbody tr:hover > td{
  background:#EBECEF !important;
  cursor:pointer;
}
table.listing tbody tr.selected > td,
#contacts-table tbody tr.selected > td,
#identities-table tbody tr.selected > td{
  background:#EBECEF !important;
  font-weight:500 !important;
}

/* Список не растягивается на весь монитор: в эталоне у него
   есть предел, дальше идут поля. */
#layout-list > .scroller > table.listing,
#layout-list > .scroller > .listing{
  max-width:820px !important;
  margin:0 auto !important;
}

/* Тумблер подписки — рядом с названием, а не у дальнего края.
   На широком мониторе он уезжал за две тысячи пикселей. */
#subscription-table td.subscription,
#folderslist td.subscription{
  width:72px !important;
  text-align:right !important;
  padding-right:16px !important;
}

/* «Создать» — основная кнопка раздела */
#layout-list > .header a.button.create,
#layout-content > .header a.button.create{
  background:#0F7BC4 !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:9px !important;
  padding:10px 20px !important;
  font-weight:500 !important;
}

/* Разделители строк — В КОНЦЕ файла: раньше их перебивало
   правило, снимающее рамки со всей таблицы. При равной силе
   побеждает последнее, значит это.

   И контакты: их ячейки правились отдельным блоком выше,
   с отступами 8×14 вместо 12×16. Приводим к одному виду. */
#identities-table tbody tr,
#contacts-table tbody tr,
#subscription-table tbody tr,
#responses-table tbody tr,
table.listing tbody tr{
  border-bottom:1px solid #EBECEF !important;
}
#identities-table tbody tr:last-child,
#contacts-table tbody tr:last-child,
table.listing tbody tr:last-child{
  border-bottom:0 !important;
}
#contacts-table tbody tr > td,
#responses-table tbody tr > td{
  padding:12px 16px !important;
  color:#2C2D2E !important;
}

/* ============================================================
   93. ПЕРЕКЛЮЧАТЕЛИ В НАСТРОЙКАХ

   Осмотр изнутри показал: галочки остались обычными квадратиками
   браузера, а в эталоне это тумблеры — овал с кружком, синий
   когда включено.

   И между строками настроек нет разделителей: они сливаются
   в сплошное полотно.

   Формы во фрейме, поэтому без приставок.
   ============================================================ */

/* сама галочка превращается в тумблер */
.propform input[type=checkbox],
.formcontent input[type=checkbox],
body.iframe input[type=checkbox],
fieldset input[type=checkbox]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:38px !important;
  height:22px !important;
  min-height:22px !important;
  border-radius:11px !important;
  background:#C7DAEC !important;
  border:0 !important;
  position:relative !important;
  cursor:pointer;
  flex:0 0 38px !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:middle;
  transition:background .15s;
}

/* кружок внутри */
.propform input[type=checkbox]::after,
.formcontent input[type=checkbox]::after,
body.iframe input[type=checkbox]::after{
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#FFFFFF;
  transition:left .15s;
  box-shadow:0 1px 3px rgba(20,40,70,.2);
}

/* включено — синий, кружок вправо */
.propform input[type=checkbox]:checked,
.formcontent input[type=checkbox]:checked,
body.iframe input[type=checkbox]:checked{
  background:#0F7BC4 !important;
}
.propform input[type=checkbox]:checked::after,
.formcontent input[type=checkbox]:checked::after,
body.iframe input[type=checkbox]:checked::after{
  left:18px;
}

/* строки настроек: разделители и воздух */
.propform tbody tr,
.formcontent tbody tr,
body.iframe .propform tbody tr{
  border-bottom:1px solid #EBECEF !important;
}
.propform tbody tr:last-child,
.formcontent tbody tr:last-child{
  border-bottom:0 !important;
}
.propform tbody tr > td,
.formcontent tbody tr > td{
  padding:14px 12px 14px 0 !important;
  vertical-align:middle !important;
}

/* подпись слева, поле справа — как в эталоне */
.propform td.title,
.formcontent td.title{
  width:52% !important;
  padding-right:24px !important;
}

/* Те же переключатели и строки в тёмной теме */
html.dark-mode .propform input[type=checkbox],
html.dark-mode .formcontent input[type=checkbox],
html.dark-mode.iframe input[type=checkbox]{
  background:#33363C !important;
}
html.dark-mode .propform input[type=checkbox]:checked,
html.dark-mode .formcontent input[type=checkbox]:checked{
  background:#3B93D9 !important;
}
html.dark-mode .propform tbody tr,
html.dark-mode .formcontent tbody tr{
  border-bottom-color:#2A2C31 !important;
}
html.dark-mode .formcontent input[type=text],
html.dark-mode .formcontent select,
html.dark-mode.iframe input[type=text],
html.dark-mode.iframe select{
  background:#1A1B1F !important;
  border-color:#33363C !important;
  color:#E8E9EB !important;
}
html.dark-mode .formcontent td.title,
html.dark-mode .formcontent legend,
html.dark-mode.iframe td.title,
html.dark-mode.iframe legend{
  color:#E8E9EB !important;
}

/* ============================================================
   94. КАРТОЧКА КОНТАКТА

   Осмотр изнутри показал три расхождения с эталоном:

     фотография   без размера и без круга
     имя          16px обычным начертанием вместо крупного
     группы полей без рамок и отступов — сливаются в полотно

   Карточка открывается во фрейме, поэтому без приставок.
   ============================================================ */

/* фотография — круг 96px, как в эталоне */
#contactpic,
.contactpic,
#contacthead .contactpic,
body.iframe #contactpic{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:#EBECEF !important;
  flex:0 0 96px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
#contactpic img,
.contactpic img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Шапка карточки — это fieldset.contact-head (проверено
   осмотром). В форме СОЗДАНИЯ там поля ввода, а не подпись:
   крупное имя появляется только при просмотре готового
   контакта. Поэтому правило для имени ниже — про просмотр. */
#contacthead,
fieldset.contact-head,
body.iframe #contacthead{
  display:flex !important;
  align-items:center !important;
  gap:20px !important;
  padding:20px 0 24px !important;
  border-bottom:1px solid #EBECEF !important;
  margin-bottom:20px !important;
}

/* имя — крупно */
#contacthead .names,
#contacthead .namefield,
.contactname,
body.iframe .names{
  font-size:22px !important;
  font-weight:600 !important;
  color:#2C2D2E !important;
  line-height:1.3 !important;
}
#contacthead .jobtitle,
#contacthead .organization{
  font-size:14px !important;
  font-weight:400 !important;
  color:#6F7178 !important;
}

/* группы полей — карточками с рамкой, как в эталоне */
.contactfieldgroup,
body.iframe fieldset.contactfieldgroup,
#contact-details fieldset{
  border:1px solid #EBECEF !important;
  border-radius:10px !important;
  padding:16px 20px !important;
  margin:0 0 14px !important;
  background:#FFFFFF !important;
}
.contactfieldgroup legend,
#contact-details fieldset legend{
  font-size:15px !important;
  font-weight:600 !important;
  color:#2C2D2E !important;
  padding:0 0 10px !important;
  margin:0 !important;
}

/* подписи полей внутри группы */
.contactfieldgroup label,
.contactfieldgroup .contactfieldlabel{
  font-size:13px !important;
  color:#6F7178 !important;
  display:block !important;
  margin-bottom:4px !important;
}

html.dark-mode .contactfieldgroup,
html.dark-mode #contacthead{
  background:#1A1B1F !important;
  border-color:#2A2C31 !important;
}
html.dark-mode #contacthead .names,
html.dark-mode .contactfieldgroup legend{ color:#E8E9EB !important; }
html.dark-mode #contactpic{ background:#2A2C31 !important; }

/* ============================================================
   95. ОТКРЫТОЕ ПИСЬМО — ПО ЭТАЛОНУ (кадр 04)

   Осмотр изнутри показал:
     фон шапки  прозрачный — она сливается со страницей
     тема       24px, в эталоне 22
     низ шапки  без разделительной линии

   Аватарка 40px кругом и тело письма колонкой — уже верно.
   ============================================================ */

#messageheader,
#message-header,
body.iframe #messageheader{
  background:#FFFFFF !important;
  border-bottom:1px solid #EBECEF !important;
  padding:20px 26px 16px !important;
}

/* Тема письма — это h2.subject, и лежит она НЕ внутри шапки,
   а рядом. Прежний селектор искал её как потомка #messageheader
   и не находил: она оставалась 24px вместо 22 по эталону.
   Найдено осмотром живой страницы. */
h2.subject,
#messageheader .subject,
#message-header .subject,
body.iframe h2.subject{
  font-size:22px !important;
  font-weight:600 !important;
  line-height:1.32 !important;
  color:#2C2D2E !important;
  margin:0 0 16px !important;
}

/* строка отправителя: имя жирным, дата и «Кому» серым */
#messageheader .rcmContactAddress,
#message-header .rcmContactAddress,
#messageheader .adr{
  font-weight:600 !important;
  color:#2C2D2E !important;
  font-size:14px !important;
}
#messageheader .date,
#message-header .date,
#messageheader .header-title{
  color:#6F7178 !important;
  font-weight:400 !important;
  font-size:13.5px !important;
}

/* цепочка переписки под письмом */
#messagelist.threads tbody tr,
.message-thread > div{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:11px 26px !important;
  border-bottom:1px solid #EBECEF !important;
  cursor:pointer;
}
#messagelist.threads tbody tr:hover,
.message-thread > div:hover{ background:#EBECEF !important; }

html.dark-mode #messageheader,
html.dark-mode #message-header{
  background:#1A1B1F !important;
  border-bottom-color:#2A2C31 !important;
}
html.dark-mode #messageheader .subject{ color:#E8E9EB !important; }

/* ============================================================
   96. РАЗРЕШЕНИЯ: ФИЛЬТРЫ И НАСТРОЙКИ

   Проверка показала: для фильтров написано 95 правил и НИ ОДНОГО
   под разные экраны. Всё держалось на единственной границе
   в 900 точек — между ней и 1280 провал, там форма и разъезжается.

   Ступеней должно быть больше, и каждая — про конкретную беду.
   ============================================================ */

/* ---- узкий экран: одна колонка, поля во всю ширину ---- */
@media (max-width:767px){
  #filter-form,
  #vacation-form,
  html.tk-other .formcontent{
    padding:14px !important;
    margin:0 !important;
    max-width:none !important;
  }

  /* условие и действие — столбиком: в ряд они не помещаются */
  #filter-form .rulerow,
  #filter-form .actionrow{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:12px 0 !important;
    border-bottom:1px solid #EBECEF !important;
  }
  #filter-form .rulerow select,
  #filter-form .rulerow input,
  #filter-form .actionrow select,
  #filter-form .actionrow input,
  #filter-form .actionrow textarea{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* кнопки строки — в ряд под полями, а не сбоку */
  #filter-form .rulerow .buttons,
  #filter-form .actionrow .buttons{
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
    width:100% !important;
  }

  /* подпись над полем, а не слева: слева места нет */
  html.tk-other .propform td.title,
  .formcontent td.title,
  body.iframe td.title{
    display:block !important;
    width:100% !important;
    padding:0 0 6px !important;
  }
  html.tk-other .propform tbody tr,
  .formcontent tbody tr{
    display:block !important;
    padding:12px 0 !important;
  }
  html.tk-other .propform tbody tr > td,
  .formcontent tbody tr > td{
    display:block !important;
    width:100% !important;
    padding:0 !important;
  }
  .formcontent input[type=text],
  .formcontent select,
  body.iframe input[type=text],
  body.iframe select{
    width:100% !important;
    max-width:none !important;
  }
}

/* ---- средний экран: то, что раньше проваливалось ---- */
@media (min-width:768px) and (max-width:1279px){
  #filter-form,
  #vacation-form{
    max-width:none !important;
    padding:18px 20px !important;
  }
  #filter-form .rulerow,
  #filter-form .actionrow{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  /* поле значения занимает всю оставшуюся строку */
  #filter-form input.rule-value,
  #filter-form .actionrow textarea{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  html.tk-other .formcontent,
  html.tk-other fieldset.propform{
    max-width:none !important;
    padding:20px 24px !important;
  }
  html.tk-other .propform td.title{ width:44% !important; }
}

/* ---- широкий: колонкой по центру, как в эталоне ---- */
@media (min-width:1280px){
  #filter-form,
  #vacation-form{
    max-width:900px !important;
    margin:0 auto !important;
  }
  html.tk-other .formcontent,
  html.tk-other fieldset.propform{
    max-width:960px !important;
    margin:0 auto 18px !important;
  }
}

/* ---- очень широкий: не растягиваем дальше ---- */
@media (min-width:1800px){
  #filter-form,
  #vacation-form,
  html.tk-other .formcontent{
    max-width:1000px !important;
  }
}

/* ============================================================
   97. ШРИФТ

   В стилях был назван Golos Text, но НИГДЕ НЕ ЗАГРУЖАЛСЯ:
   браузер его не находил и молча брал запасной. Всё это время
   интерфейс шёл шрифтом системы — оттого и «шрифт не такой».

   Golos Text — открытый шрифт студии Артемия Лебедева,
   бесплатный для любого использования, близок по духу к тому,
   что в эталоне. Загружаем его с сервера шрифтов Google.

   Если сеть недоступна, сработает запасной набор — интерфейс
   не сломается, просто буквы будут системные.
   ============================================================ */

/* Подключение шрифта уже стоит в строке 18: правило требует,
   чтобы @import был в САМОМ НАЧАЛЕ файла, иначе браузер его
   отбрасывает. Второй здесь был бы мёртвым. */

/* Шрифт применяется ВЕЗДЕ, а не только к перечисленным местам.
   Прежний список пропускал заголовки, ссылки, ячейки таблиц —
   они шли системным, и вид получался разнобойным. */
html, body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
a, span, div, td, th, li, label, legend, p{
  font-family:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Кроме тела письма: там шрифт задаёт отправитель, и менять
   его нельзя — письмо должно выглядеть так, как задумано. */
#messagebody, #messagebody *,
.message-part, .message-part *,
#messagecontframe{
  font-family:revert !important;
}

/* Начертания по эталону: обычный 400, полужирный 600.
   Заголовки — 600, не 700: жирнее выглядит грубо. */
h1, h2, h3, legend, .tk-sect,
#messageheader .subject, h2.subject{
  font-weight:600 !important;
}
strong, b, .unread .subject{ font-weight:600 !important; }

/* Ровные цифры в датах и счётчиках: без них столбец дат
   «пляшет», потому что единица уже восьмёрки. */
#messagelist td.date,
.tk-lb-cnt, .unreadcount, .pagenav{
  font-variant-numeric:tabular-nums !important;
}

/* ============================================================
   98. ОДИН ТУМБЛЕР НА ВЕСЬ ИНТЕРФЕЙС

   Переключатели описаны в трёх местах разными правилами:
   на входе одни, в настройках другие, у подписки третьи.
   Оттого они и выглядят по-разному и криво.

   Здесь ОДИН вид для всех — и он стоит последним, чтобы
   перебить прежние описания.

   Размеры взяты как у большинства современных интерфейсов:
   44×24 при кружке 20 и ходе 20. Это заметно крупнее прежних
   38×22 — в такой удобнее попадать, особенно пальцем.
   ============================================================ */

input[type=checkbox].tk-sw,
.tk-remember input[type=checkbox],
.propform input[type=checkbox],
.formcontent input[type=checkbox],
body.iframe input[type=checkbox],
fieldset input[type=checkbox],
#subscription-table input[type=checkbox],
.custom-switch input[type=checkbox]{
  appearance:none !important;
  -webkit-appearance:none !important;

  width:44px !important;
  height:24px !important;
  min-width:44px !important;
  min-height:24px !important;
  max-width:44px !important;
  flex:0 0 44px !important;

  border-radius:12px !important;
  border:0 !important;
  background:#C4C9D2 !important;
  position:relative !important;
  cursor:pointer !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:middle !important;
  box-shadow:inset 0 1px 2px rgba(20,40,70,.10) !important;
  transition:background .18s ease !important;
  accent-color:auto !important;
}

/* кружок */
input[type=checkbox].tk-sw::after,
.tk-remember input[type=checkbox]::after,
.propform input[type=checkbox]::after,
.formcontent input[type=checkbox]::after,
body.iframe input[type=checkbox]::after,
fieldset input[type=checkbox]::after,
#subscription-table input[type=checkbox]::after,
.custom-switch input[type=checkbox]::after{
  content:'' !important;
  position:absolute !important;
  top:2px !important;
  left:2px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#FFFFFF !important;
  box-shadow:0 1px 3px rgba(20,40,70,.28), 0 1px 1px rgba(20,40,70,.16) !important;
  transition:left .18s cubic-bezier(.4,0,.2,1) !important;
}

/* включено */
.tk-remember input[type=checkbox]:checked,
.propform input[type=checkbox]:checked,
.formcontent input[type=checkbox]:checked,
body.iframe input[type=checkbox]:checked,
fieldset input[type=checkbox]:checked,
#subscription-table input[type=checkbox]:checked,
.custom-switch input[type=checkbox]:checked{
  background:#0F7BC4 !important;
}
.tk-remember input[type=checkbox]:checked::after,
.propform input[type=checkbox]:checked::after,
.formcontent input[type=checkbox]:checked::after,
body.iframe input[type=checkbox]:checked::after,
fieldset input[type=checkbox]:checked::after,
#subscription-table input[type=checkbox]:checked::after,
.custom-switch input[type=checkbox]:checked::after{
  left:22px !important;
}

/* под курсором и с клавиатуры */
.tk-remember input[type=checkbox]:hover,
.propform input[type=checkbox]:hover,
.formcontent input[type=checkbox]:hover{ background:#B4BAC5 !important; }
.tk-remember input[type=checkbox]:checked:hover,
.propform input[type=checkbox]:checked:hover,
.formcontent input[type=checkbox]:checked:hover{ background:#0D5FA0 !important; }

.tk-remember input[type=checkbox]:focus-visible,
.propform input[type=checkbox]:focus-visible,
.formcontent input[type=checkbox]:focus-visible{
  outline:2px solid rgba(15,123,196,.45) !important;
  outline-offset:2px !important;
}

/* выключенный — приглушён, но виден */
.propform input[type=checkbox]:disabled,
.formcontent input[type=checkbox]:disabled{
  opacity:.5 !important;
  cursor:default !important;
}

/* тёмная тема */
html.dark-mode .tk-remember input[type=checkbox],
html.dark-mode .propform input[type=checkbox],
html.dark-mode .formcontent input[type=checkbox],
html.dark-mode.iframe input[type=checkbox]{
  background:#3A3E45 !important;
}
html.dark-mode .propform input[type=checkbox]:checked,
html.dark-mode .formcontent input[type=checkbox]:checked,
html.dark-mode .tk-remember input[type=checkbox]:checked{
  background:#3B93D9 !important;
}
html.dark-mode .propform input[type=checkbox]::after,
html.dark-mode .tk-remember input[type=checkbox]::after{
  background:#F0F1F3 !important;
}

/* «Запомнить меня»: тумблер и подпись в одну линию */
html.tk-login label.tk-remember{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* ============================================================
   99. КОЛОНКИ СПИСКА РАЗЪЕХАЛИСЬ

   На снимке с широкого монитора: заголовок «От» стоит на 430,
   а имена отправителей начинаются на 950 — между ними пустота
   в пол-экрана. Справа тоже пусто. И заголовки колонок налезают
   на первую строку писем.

   Причина: ширины заданы в точках (--tk-from:190px и подобные),
   а строка при этом разложена по-своему. На узком совпадало,
   на широком разъехалось.

   Здесь строка раскладывается ЯВНО: круг, отправитель, тема,
   дата — каждому своё место, и оно считается от ширины окна.
   ============================================================ */

@media (min-width:900px){
  #messagelist tbody tr[id^=rcmrow]{
    display:grid !important;
    grid-template-columns:
      var(--tk-av, 30px)            /* круг с буквами   */
      var(--tk-from, 190px)         /* отправитель      */
      1fr                            /* тема и начало текста */
      auto                           /* значки           */
      var(--tk-date, 96px);         /* дата             */
    align-items:center !important;
    gap:0 12px !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
  }

  /* Круг лежит ВНУТРИ ячейки отправителя, а не прямо в строке —
     поэтому «> span.tk-av» не находил ничего. Даём ему место
     через саму ячейку. */
  #messagelist tbody tr[id^=rcmrow] span.tk-av{
    grid-column:1 !important;
    justify-self:center !important;
  }
  #messagelist tbody tr[id^=rcmrow] > td.fromto{
    grid-column:2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:0 !important;
  }
  #messagelist tbody tr[id^=rcmrow] > td.subject{
    grid-column:3 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:0 !important;
  }
  #messagelist tbody tr[id^=rcmrow] > .tk-marks,
  #messagelist tbody tr[id^=rcmrow] > .tk-actcell{
    grid-column:4 !important;
    padding:0 !important;
  }
  #messagelist tbody tr[id^=rcmrow] > td.date{
    grid-column:5 !important;
    text-align:right !important;
    padding:0 !important;
    white-space:nowrap !important;
  }

  /* остальные ячейки места не занимают */
  #messagelist tbody tr[id^=rcmrow] > td.flag,
  #messagelist tbody tr[id^=rcmrow] > td.attachment,
  #messagelist tbody tr[id^=rcmrow] > td.threads,
  #messagelist tbody tr[id^=rcmrow] > td.size,
  #messagelist tbody tr[id^=rcmrow] > td.status,
  #messagelist tbody tr[id^=rcmrow] > td.priority{
    display:none !important;
  }

  /* ЗАГОЛОВКИ КОЛОНОК: на снимке они налезали на первое письмо.
     Они не нужны — в эталоне их нет вовсе, а сортировка
     доступна из панели «Фильтр». */
  #messagelist thead,
  #messagelist > thead tr,
  #messagelist .rcmheader{
    display:none !important;
  }
}

/* На очень широком мониторе список не растягиваем бесконечно:
   строка в две тысячи точек нечитаема, глаз теряет строку. */
@media (min-width:1700px){
  html.tk-list-mode #messagelist{
    max-width:1500px !important;
    margin:0 auto !important;
  }
  :root{ --tk-from:230px; --tk-date:110px; }
}

/* ============================================================
   100. ФИЛЬТРЫ: СПИСОК ЗАЖАТ, СПРАВА ПУСТО

   На снимке правила «#1 #2 #3» жмутся к левому краю узкой
   полосой, а две трети экрана пустуют. Причина: тема делит
   страницу на три колонки, и списку достаётся средняя — узкая.

   В эталоне список правил идёт во всю ширину под заголовком.
   ============================================================ */

@media (min-width:900px){
  /* список правил занимает всё место, а не среднюю колонку */
  html.tk-other #layout-list{
    flex:1 1 auto !important;
    max-width:none !important;
    width:auto !important;
    min-width:0 !important;
  }

  /* правая колонка появляется только когда есть что показывать */
  html.tk-other #layout-content:empty,
  html.tk-other #layout-content:not(:has(form)):not(:has(iframe)){
    display:none !important;
  }

  /* сами правила — строками во всю ширину, с воздухом */
  html.tk-other #filterslist,
  html.tk-other #filtersetslist{
    max-width:900px !important;
    margin:0 !important;
    padding:0 18px !important;
  }
  html.tk-other #filterslist li{
    min-height:46px !important;
    border-bottom:1px solid #EBECEF !important;
  }
  html.tk-other #filterslist li a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:12px 14px !important;
    min-height:46px !important;
    font-size:14px !important;
  }
  html.tk-other #filterslist li:hover a{ background:#EBECEF !important; }
  html.tk-other #filterslist li.selected a{
    background:#EBECEF !important;
    font-weight:500 !important;
  }

  /* набор фильтров сверху — подписью, а не строкой списка */
  html.tk-other #filtersetslist{
    border-bottom:1px solid #EBECEF !important;
    padding:10px 18px !important;
    margin-bottom:6px !important;
  }
}

/* Заголовки колонок в списках настроек тоже налезали */
html.tk-other #filterslist thead,
html.tk-other .listing thead{ display:none !important; }