/* =====================================================================
   frkhd webmail — v8 · IBM Plex everywhere, no truncation anywhere
   Font:    IBM Plex Sans (body, full Cyrillic)
            IBM Plex Mono (numerics: dates, sizes, counters)
            IBM Plex Sans 800 (wordmark `frkhd.`)
   Layout:  Rail 104px (was 128). List toolbar → icon-only (tooltip on
            hover). Message-view toolbar → short labels + chevron submenus.
   Column math @ 1440px viewport:
     rail 104 + (sidebar 2fr) + (list 3fr) + (content 6fr) on 1336 px
     sidebar ≈ 243 · list ≈ 364 · content ≈ 729
     list toolbar 364px needs to fit 4 controls at 40–44px each → 176px
     (plus 16px padding + gaps) — fits with a wide margin.
   ===================================================================== */

:root {
  --ink:         #0e1014;
  --ink-2:       #1a1d24;
  --ink-soft:    #2a2f3a;
  --muted:       #6a7380;
  --muted-2:     #9ba3af;

  --bg:          #ffffff;
  --canvas:      #f7f7f5;
  --soft:        #f1f1ee;
  --soft-2:      #e9e9e5;

  --hairline:    #ececea;
  --hairline-str:#dfdfdb;

  --accent:      #ff5a1f;
  --accent-2:    #e8470f;
  --accent-soft: #fff2ea;
  --accent-tint: #ffe0cf;

  --danger:      #c93c3c;
  --ok:          #0e7a52;
  --warn:        #b87108;

  --sel-grad:    linear-gradient(180deg, #fff1e7 0%, #ffe7d6 100%);
  --sel-ink:     #0e1014;
  --row-hover:   rgba(15,17,21,0.035);

  --rail-bg:     #0a0b0f;
  --rail-bg-2:   #0e1014;
  --rail-ink:    rgba(255,255,255,0.86);
  --rail-muted:  rgba(255,255,255,0.48);
  --rail-line:   rgba(255,255,255,0.06);

  --radius-xs:  8px;
  --radius-sm:  10px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  --shadow-xs:  0 1px 2px rgba(15,17,21,0.04);
  --shadow-sm:  0 2px 6px rgba(15,17,21,0.05);
  --shadow-md:  0 8px 24px rgba(15,17,21,0.06), 0 2px 6px rgba(15,17,21,0.04);
  --shadow-lg:  0 20px 60px rgba(15,17,21,0.10), 0 4px 10px rgba(15,17,21,0.04);
  --shadow-press: 0 8px 22px rgba(255,90,31,0.32), inset 0 1px 0 rgba(255,255,255,0.22);

  --font:        "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
                 "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --font-display:"IBM Plex Sans", system-ui, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rail:       104px;
  --row-h:      44px;
  --tool-h:     44px;
}

/* ---------- DARK ---------- */
html.dark-mode {
  --ink:         #ebedf1;
  --ink-2:       #f5f7fa;
  --ink-soft:    #c8ccd3;
  --muted:       #8a8f99;
  --muted-2:     #6b707a;

  --bg:          #111318;
  --canvas:      #07080b;
  --soft:        #171a20;
  --soft-2:      #1e2128;

  --hairline:    #1f2229;
  --hairline-str:#262932;

  --accent:      #ff6a35;
  --accent-2:    #ff8252;
  --accent-soft: #2a1b14;
  --accent-tint: #3a2219;

  --sel-grad:    linear-gradient(180deg, #2a1a11 0%, #3a2016 100%);
  --sel-ink:     #ffe4d6;
  --row-hover:   rgba(255,255,255,0.04);

  --rail-bg:     #050608;
  --rail-bg-2:   #090a0d;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.5);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.65), 0 4px 10px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
  html:not(.dark-mode):not(.light-mode) {
    --ink: #ebedf1; --ink-2: #f5f7fa; --ink-soft: #c8ccd3;
    --muted: #8a8f99; --muted-2: #6b707a;
    --bg: #111318; --canvas: #07080b;
    --soft: #171a20; --soft-2: #1e2128;
    --hairline: #1f2229; --hairline-str: #262932;
    --accent: #ff6a35; --accent-2: #ff8252;
    --accent-soft: #2a1b14; --accent-tint: #3a2219;
    --sel-grad: linear-gradient(180deg, #2a1a11 0%, #3a2016 100%);
    --sel-ink: #ffe4d6;
    --row-hover: rgba(255,255,255,0.04);
    --rail-bg: #050608; --rail-bg-2: #090a0d;
  }
}

/* =====================================================================
   BASE
   ===================================================================== */
html, body, .skin-elastic, input, button, select, textarea,
#taskmenu a .inner, .messagelist, .folderlist, .treelist {
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
  letter-spacing: -0.002em;
}
body { background: var(--canvas) !important; }

h1, h2, h3, h4, h5,
#messageheader h2.subject,
#layout-list > .header .header-title,
#layout-sidebar > .header .header-title,
.header-title, .popover-header {
  letter-spacing: -0.02em !important;
  color: var(--ink);
}

/* numerics → Plex Mono */
.messagelist .date,
.listingstatus,
.pagenav,
.messagelist .size,
#messageheader .date {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: -0.005em;
}

* { scrollbar-color: var(--hairline-str) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--hairline-str); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; border: 2px solid transparent; }

/* =====================================================================
   LOGO / WORDMARK
   ===================================================================== */
img#logo,
#layout-menu .popover-header img,
body.task-login img#logo { display: none !important; }

body.task-login #layout-content { position: relative; background: var(--canvas) !important; }
body.task-login #layout-content::before {
  content: "frkhd";
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin: 80px auto 8px;
}
body.task-login #layout-content::after {
  content: ".";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(calc(50% - 0.02em));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
}

#layout-menu .popover-header {
  position: relative !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--rail-line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
#layout-menu .popover-header::before {
  content: "frkhd";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: #fff;
}
#layout-menu .popover-header::after {
  content: ".";
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-left: 1px;
}
#layout-menu .popover-header a.cancel { display: none !important; }

/* =====================================================================
   LOGIN
   ===================================================================== */
body.task-login #login-footer,
#about-page .box, .credits { display: none !important; }
#login-form legend,
#login-form label { display: none !important; }
#login-form {
  max-width: 380px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* =====================================================================
   LEFT RAIL — 104px, dark, vertical flex column
   ===================================================================== */
#layout-menu {
  background: var(--rail-bg) !important;
  background-image: linear-gradient(180deg, var(--rail-bg-2) 0%, var(--rail-bg) 100%) !important;
  border-right: 1px solid var(--rail-line) !important;
  position: relative !important;
  left: auto !important;
  flex: 0 0 var(--rail) !important;
  width: var(--rail) !important;
  min-width: var(--rail) !important;
  max-width: var(--rail) !important;
  display: flex !important;
  flex-direction: column !important;
}
#layout { display: flex !important; }
#layout-sidebar { position: relative !important; left: auto !important; margin-left: 0 !important; }

#taskmenu {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  padding: 8px 8px 12px !important;
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#taskmenu > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

#taskmenu a.button,
#taskmenu > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--rail-ink) !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .14s ease, color .14s ease, transform .08s ease;
}
#taskmenu a:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
#taskmenu a:active { transform: translateY(0.5px); }
#taskmenu a.selected {
  background: rgba(255,90,31,0.14) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}

#taskmenu a.button::before,
#taskmenu a::before {
  font-size: 17px !important;
  line-height: 1 !important;
  display: block !important;
  margin: 0 auto !important;
  opacity: 0.92;
}

#taskmenu a .inner,
#taskmenu span.inner {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-width: calc(var(--rail) - 16px);
  color: inherit !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Compose pill */
#taskmenu .action-buttons { margin-bottom: 6px !important; }
#taskmenu a.button.compose,
#taskmenu a.compose {
  background: var(--accent) !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 12px 4px !important;
  min-height: 60px !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-press) !important;
}
#taskmenu a.button.compose:hover,
#taskmenu a.compose:hover { background: var(--accent-2) !important; color: #fff !important; }
#taskmenu a.compose::before { color: #fff !important; opacity: 1 !important; }
#taskmenu a.compose .inner {
  font-size: 0 !important;
  color: transparent !important;
}
#taskmenu a.compose .inner::before {
  content: "Написать";
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
}
html[lang="en"] #taskmenu a.compose .inner::before,
html[lang="en_US"] #taskmenu a.compose .inner::before { content: "Compose"; }

#taskmenu a.button.about,
#taskmenu .special-buttons a.about,
#taskmenu a.about { display: none !important; }

#taskmenu .special-buttons {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--rail-line) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
}
#taskmenu a.theme { color: var(--rail-muted) !important; }
#taskmenu a.theme:hover { color: #fff !important; }
#taskmenu a.logout { color: rgba(255,140,110,0.9) !important; }
#taskmenu a.logout:hover { color: #ff8866 !important; background: rgba(255,90,31,0.10) !important; }

#taskmenu .taskbar,
#taskmenu #taskmenu {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* =====================================================================
   SIDEBAR / FOLDERS
   ===================================================================== */
#layout-sidebar,
#layout-list,
#layout-content { background: var(--bg) !important; }

#layout-sidebar > .header,
#mailboxlist-header {
  padding: 20px 18px 14px 18px !important;
  border-bottom: 1px solid var(--hairline) !important;
  background: var(--bg) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 700 !important;
}

.folderlist,
.treelist,
#mailboxlist {
  padding: 10px 6px !important;
  background: transparent !important;
  border: none !important;
}
.folderlist li,
.treelist li { border: none !important; background: transparent !important; }

.folderlist li > a,
.treelist li > a,
#mailboxlist li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: var(--row-h) !important;
  border-radius: var(--radius-sm) !important;
  margin: 1px 8px !important;
  padding: 0 12px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
  border: none !important;
  background: transparent !important;
  transition: background .12s ease, color .12s ease;
}
.folderlist li > a:hover,
.treelist li > a:hover,
#mailboxlist li > a:hover { background: var(--soft) !important; color: var(--ink) !important; }

.folderlist li.selected > a,
.treelist li.selected > a,
#mailboxlist li.selected > a {
  background: var(--sel-grad) !important;
  color: var(--sel-ink) !important;
  font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}

.folderlist .unreadcount,
.treelist .unreadcount,
#mailboxlist .unreadcount {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-radius: 999px !important;
  padding: 1px 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  min-width: 22px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  margin-left: auto;
}
html.dark-mode .folderlist .unreadcount,
html.dark-mode .treelist .unreadcount,
html.dark-mode #mailboxlist .unreadcount { background: var(--ink); color: var(--canvas); }
.folderlist li.selected .unreadcount { background: var(--accent) !important; color: #fff !important; }

/* =====================================================================
   TOOLBARS — baseline
   message-view toolbar keeps labels. list toolbar goes icon-only below.
   ===================================================================== */
.toolbar,
#layout-content > .header,
#layout-list > .header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.toolbar a.button,
.toolbar-list a.button,
#layout-content > .header a.button,
#layout-list > .header a.button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--tool-h) !important;
  min-height: var(--tool-h) !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.toolbar a.button .inner,
#layout-content > .header a.button .inner,
#layout-list > .header a.button .inner {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.toolbar a.button::before,
#layout-content > .header a.button::before,
#layout-list > .header a.button::before {
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
.toolbar a.button:hover,
#layout-content > .header a.button:hover { background: var(--soft) !important; color: var(--ink) !important; }
.toolbar a.button:active { transform: translateY(0.5px); }
.toolbar a.button.disabled,
.toolbar a.button[aria-disabled=true] { color: var(--muted-2) !important; opacity: 1 !important; cursor: default !important; }
.toolbar a.button.disabled:hover { background: transparent !important; }

.toolbar .separator,
.toolbar .divider { background: var(--hairline) !important; width: 1px !important; height: 22px !important; margin: 0 6px !important; }

/* Header titles */
#layout-list > .header .header-title,
#layout-sidebar > .header .header-title,
#layout-content > .header .header-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.018em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* =====================================================================
   LIST TOOLBAR — icon-only (Select / Threads / Options / Refresh)
   The `.inner` label exists for a11y; visually hide it while keeping
   the title attribute for tooltip. 40×40 square targets.
   ===================================================================== */
#layout-list > .header a.button.select,
#layout-list > .header a.button.threads,
#layout-list > .header a.button.options,
#layout-list > .header a.button.refresh,
#layout-list > .header a.button.sidebar-menu,
.toolbar-list a.button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
#layout-list > .header a.button.select .inner,
#layout-list > .header a.button.threads .inner,
#layout-list > .header a.button.options .inner,
#layout-list > .header a.button.refresh .inner {
  /* accessible-hide: zero visible size, still readable by SR */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#layout-list > .header a.button.select::before,
#layout-list > .header a.button.threads::before,
#layout-list > .header a.button.options::before,
#layout-list > .header a.button.refresh::before { font-size: 17px !important; }

/* Sticky list header with glass */
#layout-list > .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: color-mix(in srgb, var(--bg) 80%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
}

/* =====================================================================
   MESSAGE-VIEW TOOLBAR — keep labels, but short ones; widen the primary
   Reply button so "Ответить" never truncates. "Ещё"/more menu absorbs
   replyall/replylist/spam/mark etc.
   ===================================================================== */
#layout-content > .header a.button.reply,
#layout-content > .header a.button.forward,
#layout-content > .header a.button.delete,
#layout-content > .header a.button.markmessage,
#layout-content > .header a.button.more,
#layout-content > .header a.button.back,
#layout-content > .header a.button.extwin {
  padding: 0 12px !important;
  min-width: 0 !important;
}

/* Force a sane, short label for the primary reply button.
   Elastic may render "Ответить в список рассылки" as the default when
   replyall-mode is set to list; we always want "Ответить" visible. */
#layout-content > .header a.button.reply .inner {
  font-size: 0 !important;
  color: transparent !important;
  display: inline-block !important;
  line-height: 1 !important;
}
#layout-content > .header a.button.reply .inner::before {
  content: "Ответить";
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
html[lang="en"] #layout-content > .header a.button.reply .inner::before,
html[lang="en_US"] #layout-content > .header a.button.reply .inner::before { content: "Reply"; }

/* "Назад" stays short — label is fine as-is */
#layout-content > .header a.button.back .inner,
#layout-content > .header a.button.forward .inner,
#layout-content > .header a.button.delete .inner,
#layout-content > .header a.button.more .inner {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: inherit !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* =====================================================================
   MESSAGE LIST — cards
   ===================================================================== */
.messagelist {
  background: var(--bg) !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  padding: 6px 10px !important;
}
.messagelist tr,
.messagelist .contact {
  border: none !important;
  background: var(--bg) !important;
  transition: background .12s ease, transform .06s ease;
}
.messagelist tr td:first-child { border-radius: var(--radius) 0 0 var(--radius) !important; }
.messagelist tr td:last-child  { border-radius: 0 var(--radius) var(--radius) 0 !important; }
.messagelist tr:hover { background: var(--soft) !important; }
.messagelist tr.selected {
  background: var(--sel-grad) !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
.messagelist tr.unread td {
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.messagelist td {
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
  border: none !important;
  vertical-align: middle !important;
}
.messagelist td.subject { letter-spacing: -0.006em !important; font-size: 13.5px !important; }
.messagelist tr.unread td.subject { font-size: 14px !important; letter-spacing: -0.01em !important; }
.messagelist .fromto { color: var(--ink) !important; font-weight: 500 !important; font-size: 12.5px !important; }
.messagelist tr.unread .fromto { font-weight: 600 !important; }
.messagelist .date { color: var(--muted) !important; font-weight: 500 !important; }
.messagelist .size { color: var(--muted-2) !important; }
.messagelist tr > td,
.messagelist tbody > tr:not(:last-child) > td { border-bottom: none !important; }

/* =====================================================================
   MESSAGE HEADER / BODY
   ===================================================================== */
.header-content {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 24px 28px !important;
}
#messageheader h2.subject {
  font-family: var(--font) !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}
#messageheader .short-header,
#messageheader .header-row { font-size: 13px !important; color: var(--muted) !important; }
#messageheader .header-row .header-title { color: var(--muted) !important; font-weight: 500 !important; }
#messageheader .header-row a { color: var(--ink) !important; text-decoration: none !important; font-weight: 500 !important; }
#messageheader .header-row a:hover { color: var(--accent) !important; }

#messagebody, #messagecontent, .message-htmlpart, .message-part {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* =====================================================================
   TOASTS
   ===================================================================== */
#message, .toast {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 420px !important;
  line-height: 1.45 !important;
  animation: toast-in .28s cubic-bezier(.2,.8,.2,1);
}
html.dark-mode #message,
html.dark-mode .toast { background: #1f232c !important; color: #f2f4f8 !important; border: 1px solid var(--hairline) !important; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
#message.confirmation { background: var(--ok) !important; color: #fff !important; }
#message.error        { background: var(--danger) !important; color: #fff !important; }
#message.warning      { background: var(--warn) !important; color: #fff !important; }
#message > .icon { filter: brightness(2) !important; opacity: 0.9; margin-right: 4px; }
#message .button.close { color: rgba(255,255,255,0.7) !important; background: transparent !important; border: none !important; }
#message .button.close:hover { color: #fff !important; }

/* =====================================================================
   BUTTONS / INPUTS
   ===================================================================== */
button, .btn, a.button.primary, input[type=submit] {
  font-family: var(--font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.btn-primary, a.button.primary {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  color: var(--bg) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--ink-2) !important; }
.btn-secondary, a.button.secondary {
  background: var(--bg) !important;
  border: 1px solid var(--hairline-str) !important;
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
  padding: 10px 16px !important;
}
.btn-secondary:hover { background: var(--soft) !important; }

input.form-control, textarea.form-control, select.form-control,
#compose-container input.form-control, #compose-container textarea {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline-str) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  transition: border-color .1s ease, box-shadow .1s ease;
}
input.form-control:focus, textarea.form-control:focus, select.form-control:focus,
#compose-container input.form-control:focus, #compose-container textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
  outline: none !important;
}
html.dark-mode input.form-control:focus,
html.dark-mode textarea.form-control:focus { box-shadow: 0 0 0 3px rgba(255,106,53,0.25) !important; }

/* =====================================================================
   POPOVERS / DROPDOWNS
   ===================================================================== */
.popover, .tooltip-inner, .dropdown-menu {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 4px !important;
}
.dropdown-menu a,
.popover a { color: var(--ink) !important; border-radius: var(--radius-xs) !important; padding: 8px 10px !important; }
.dropdown-menu a:hover { background: var(--soft) !important; color: var(--ink) !important; }

/* =====================================================================
   FOOTERS / PAGINATION
   ===================================================================== */
#layout > div > .footer,
#layout-list > .footer,
#layout-content > .footer,
#layout-sidebar > .footer,
.footer.toolbar,
.pagenav,
.toolbar.pagenav,
.listingstatus {
  background: var(--bg) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pagenav a.button,
.toolbar.pagenav a.button,
#layout-content > .footer a.button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.pagenav a.button:hover { background: var(--soft) !important; }
.pagenav a.button.disabled { color: var(--muted-2) !important; }

/* =====================================================================
   COLUMN DIVIDERS & narrow safety
   ===================================================================== */
#layout-sidebar, #layout-list { border-right: 1px solid var(--hairline) !important; }

@media (max-width: 1320px) {
  /* shrink message-view toolbar paddings a bit */
  #layout-content > .header a.button { padding: 0 8px !important; }
}

#about-page .box, .credits, #login-footer { display: none !important; }

/* =====================================================================
   v9 — desktop mobile-artifact cleanup
   Bugs fixed:
   1. "Меню"/"Папки" hamburgers bleeding onto desktop (Elastic hides
      them at min-width:1201px, but our earlier `.toolbar a.button`
      `display: inline-flex !important;` block re-showed them).
   2. "Обсуждение" still visible in list toolbar (icon-only failed to
      catch all variants).
   3. "Переслать"/"Предыдущее" truncation (missing flex-shrink:0).
   4. Rail bottom cluster centering.
   ===================================================================== */

/* 1. Kill Elastic mobile nav toggles on desktop, always, with specificity
   that beats our own `.toolbar a.button { display: inline-flex !important }`.
   These are ONLY meant for <1201px / <769px breakpoints. */
@media (min-width: 1024px) {
  a.menu-button,
  a.task-menu-button,
  button.task-menu-button,
  a.toolbar-menu-button,
  a.back-list-button,
  a.back-sidebar-button,
  a.toolbar-list-button,
  button.back-list-button,
  button.back-sidebar-button,
  .toolbar a.menu-button,
  .toolbar a.back-list-button,
  .toolbar a.back-sidebar-button,
  .toolbar a.toolbar-list-button,
  #layout-list > .header a.menu-button,
  #layout-list > .header a.back-sidebar-button,
  #layout-list > .header a.toolbar-menu-button,
  #layout-content > .header a.back-list-button,
  #layout-content > .header a.menu-button,
  #layout-sidebar > .header a.back-sidebar-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

/* 2. List toolbar: icon-only for Select / Threads (Обсуждение) / Options /
   Refresh regardless of which class variant Elastic emits. Catch-all
   rule: ANY .button in the list header that ISN'T the title gets the
   inner label visually hidden. Tooltip via native title attribute. */
#layout-list > .header a.button.select .inner,
#layout-list > .header a.button.threads .inner,
#layout-list > .header a.button.threadselector .inner,
#layout-list > .header a.button.threadmode .inner,
#layout-list > .header a.button.options .inner,
#layout-list > .header a.button.refresh .inner,
#layout-list > .header a.button.checkmail .inner,
#layout-list > .header a.button.sort .inner,
#layout-list > .header a.button.markall .inner,
#layout-list > .header a.button.import .inner,
#layout-list > .header a.button.export .inner,
#layout-list > .header a.button.search .inner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#layout-list > .header a.button.select,
#layout-list > .header a.button.threads,
#layout-list > .header a.button.threadselector,
#layout-list > .header a.button.threadmode,
#layout-list > .header a.button.options,
#layout-list > .header a.button.refresh,
#layout-list > .header a.button.checkmail,
#layout-list > .header a.button.sort,
#layout-list > .header a.button.markall,
#layout-list > .header a.button.import,
#layout-list > .header a.button.export,
#layout-list > .header a.button.search,
#layout-list > .header a.button.sidebar-menu {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
}

/* 3. Message-view toolbar: "Переслать", "Удалить", etc. must never
   truncate. Force flex-shrink:0 and an adequate min-width. */
#layout-content > .header a.button,
#layout-content > .header a.button.reply,
#layout-content > .header a.button.forward,
#layout-content > .header a.button.delete,
#layout-content > .header a.button.markmessage,
#layout-content > .header a.button.more,
#layout-content > .header a.button.back,
#layout-content > .header a.button.extwin,
#layout-content > .header a.button.print {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  padding: 0 14px !important;
  overflow: visible !important;
}
#layout-content > .header a.button .inner {
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

/* 4. Message-view footer: "Предыдущее / Следующее" — same nowrap rule. */
#layout-content > .footer a.button,
.pagenav a.button {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  overflow: visible !important;
}
#layout-content > .footer a.button .inner,
.pagenav a.button .inner {
  overflow: visible !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* 5. Rail bottom cluster centering — theme toggle + logout. */
#taskmenu .special-buttons {
  align-items: stretch !important;
}
#taskmenu .special-buttons a,
#taskmenu .special-buttons a.button,
#taskmenu a.theme,
#taskmenu a.logout {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#taskmenu .special-buttons a::before,
#taskmenu a.theme::before,
#taskmenu a.logout::before {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
#taskmenu .special-buttons a .inner,
#taskmenu a.theme .inner,
#taskmenu a.logout .inner {
  text-align: center !important;
  width: 100% !important;
}

/* 6. Safety: override any lingering universal `.button { display: inline-flex }`
   leak for the mobile toggles even outside media query, belt+suspenders. */
a.menu-button:not(.always-show),
a.back-list-button:not(.always-show),
a.back-sidebar-button:not(.always-show),
a.toolbar-list-button:not(.always-show) {
  /* Elastic's own rule is `display: none` base; we simply don't override it.
     Explicitly reaffirm at narrow widths only. */
}
@media (max-width: 1023px) {
  a.menu-button, a.back-list-button, a.back-sidebar-button,
  a.toolbar-list-button, a.toolbar-menu-button {
    display: inline-flex !important;
  }
}


/* ============ v10: lock toolbars to icons, kill mobile bleed ============ */

/* Force the right-column header toolbar to icon-only (labels overflow viewport) */
.task-mail .header .toolbar.listing.iconized a.button,
#mailview-right .toolbar a.button,
.menu.toolbar.listing.iconized a.button {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.task-mail .header .toolbar.listing.iconized a.button .inner,
#mailview-right .toolbar a.button .inner,
.menu.toolbar.listing.iconized a.button .inner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
}

/* Same for the message-view footer navigation (prev/reply/next) */
.footer.content-frame-navigation a.button {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
}
.footer.content-frame-navigation a.button .inner {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  font-size: 0 !important;
}
.footer.content-frame-navigation {
  justify-content: center !important;
  gap: 4px !important;
}

/* Ensure no toolbar has horizontal scroll / overflow leak */
.menu.toolbar {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Second sidebar header — don't let the sidebar-menu "⋮" overlap the account name */
#layout-sidebar .header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  min-height: 56px !important;
}
#layout-sidebar .header .sidebar-menu {
  margin-left: auto !important;
  flex: 0 0 32px !important;
}

/* The mail list header must not show labels either (belt-and-braces) */
.task-mail .header.menu.toolbar.listing.iconized > a.button > .inner {
  font-size: 0 !important;
}

/* Toast: push higher from the bottom so it doesn't collide with footer */
#message { bottom: 70px !important; }

/* Enforce layout width containment — no column can overflow its parent */
#layout-content, #layout-list, #layout-sidebar, #layout-menu {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ============ v11: correct selectors (buttons have no .button class) ============ */

/* Kill mobile menu button leaking through header */
a.task-menu-button, .task-menu-button {
  display: none !important;
}

/* Icon-only on listing toolbars — real selector (anchors don't carry .button class) */
ul.menu.toolbar.listing.iconized > li > a > .inner,
ul.menu.toolbar.listing.iconized > li > a.button > .inner,
.footer.content-frame-navigation .buttons > a > .inner,
.footer.content-frame-navigation .buttons > a.button > .inner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
}

/* Let toolbars size naturally — undo v10 clamps */
ul.menu.toolbar.listing.iconized {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
  white-space: nowrap !important;
  gap: 2px !important;
}
ul.menu.toolbar.listing.iconized > li {
  flex: 0 0 auto !important;
  list-style: none !important;
}
ul.menu.toolbar.listing.iconized > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 44px !important;
  padding: 0 !important;
}

/* Undo v10 container overflow:hidden */
.menu.toolbar { overflow: visible !important; }

/* Layout columns shouldn't globally overflow-hidden either */
#layout-content, #layout-list {
  overflow: visible !important;
}

/* ============ v12: nuke remaining leaks ============ */
/* Mobile menu button — hide unconditionally (was showing "Меню") */
html body a.task-menu-button,
html body .button.task-menu-button,
html body a.icon.task-menu-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
  padding: 0 !important; margin: 0 !important;
}

/* Hide ALL .inner labels anywhere inside listing toolbars, not just direct children */
ul.menu.toolbar.listing.iconized .inner,
ul.menu.toolbar.listing.iconized span.inner,
.footer.content-frame-navigation .inner,
.footer.content-frame-navigation span.inner {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
}

/* ============ v13: beat specificity of own rules ============ */
body #layout-list .header a.task-menu-button.icon,
body #layout-list .header a.task-menu-button.button,
body #layout-content .header a.task-menu-button,
body #layout-sidebar .header a.task-menu-button,
body .header a.button.task-menu-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
}

/* ============ v14: new font (Onest), bottom-rail polish, folder alignment ============ */

/* Swap font to Onest — Cyrillic-first, very different from IBM Plex */
html, body, body.skin-elastic,
body.skin-elastic *, body *,
input, textarea, button, select, option {
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-feature-settings: "cv11" 1, "ss01" 1;
}
/* Mono stays for numerics */
.messagelist .date, .messagelist .size, .pagenav .countdisplay,
.unreadcount, .badge {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-feature-settings: "tnum" 1;
}

/* Folder list: icon and text aligned on same baseline, consistent gap */
.folderlist li > a,
.treelist li > a,
#layout-sidebar .folderlist a,
#layout-sidebar .treelist a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
.folderlist li > a::before,
.treelist li > a::before {
  font-size: 16px !important;
  width: 18px !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
}

/* ============ Bottom rail buttons: Тёмный режим + Выход ============ */
/* Container — proper stacking + bottom padding */
#taskmenu .special-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 12px 10px 16px !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Both buttons: clean card-like chips */
#taskmenu .special-buttons a.button,
#taskmenu a.button.theme,
#taskmenu a.button.logout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 6px !important;
  border-radius: 10px !important;
  width: 100% !important;
  min-height: 56px !important;
  background: transparent !important;
  transition: background 0.12s !important;
}

/* Theme toggle: icon on top, subtle label */
#taskmenu a.button.theme {
  color: rgba(255,255,255,0.55) !important;
}
#taskmenu a.button.theme::before,
#taskmenu a.button.theme .inner::before {
  font-size: 16px !important;
  opacity: 0.85;
  line-height: 1 !important;
}
#taskmenu a.button.theme:hover {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.85) !important;
}
#taskmenu a.button.theme .inner {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

/* Logout: warm accent, cleaner, not harsh red-orange */
#taskmenu a.button.logout {
  color: rgba(255,255,255,0.45) !important;
}
#taskmenu a.button.logout::before,
#taskmenu a.button.logout .inner::before {
  font-size: 16px !important;
  opacity: 0.8;
  line-height: 1 !important;
}
#taskmenu a.button.logout:hover {
  background: rgba(255,90,31,0.08) !important;
  color: #ff7a45 !important;
}
#taskmenu a.button.logout .inner {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

/* ============ v15: center-floating toolbar icons, kill gray on rail, fix 3-dots sidebar-menu ============ */

/* 1) Toolbar icons (Select/Threads/Options) — lock icon to true center of the 40x44 cell */
ul.menu.toolbar.listing.iconized > li > a,
.task-mail .header ul.menu.toolbar.listing.iconized > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  width: 40px !important;
  height: 44px !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.55) !important;
}
ul.menu.toolbar.listing.iconized > li > a::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: center !important;
}
ul.menu.toolbar.listing.iconized > li > a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
}
ul.menu.toolbar.listing.iconized > li > a.disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
}
ul.menu.toolbar.listing.iconized > li > a.active,
ul.menu.toolbar.listing.iconized > li > a[aria-expanded="true"] {
  background: rgba(255,90,31,0.12) !important;
  color: #ff7a45 !important;
}

/* light theme variant for toolbar icons */
html:not(.dark-mode) ul.menu.toolbar.listing.iconized > li > a {
  color: rgba(20,24,32,0.55) !important;
}
html:not(.dark-mode) ul.menu.toolbar.listing.iconized > li > a:hover {
  background: rgba(20,24,32,0.05) !important;
  color: rgba(20,24,32,0.92) !important;
}

/* 2) special-buttons — force transparent container, kill inherited gray */
html body #taskmenu .special-buttons,
#taskmenu > .special-buttons {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 8px 14px !important;
}
html:not(.dark-mode) body #taskmenu .special-buttons {
  border-top: 1px solid rgba(20,24,32,0.08) !important;
}

/* Two-button row (icon+label horizontal, like the folder items) */
#taskmenu .special-buttons a.theme,
#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  height: auto !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  transition: background 0.12s, color 0.12s !important;
}
#taskmenu .special-buttons a::before {
  font-size: 16px !important;
  width: 18px !important;
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 0.75;
}
#taskmenu .special-buttons a .inner {
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
  /* undo v12 screen-reader hiding INSIDE taskmenu rail */
  position: static !important;
  width: auto !important; height: auto !important;
  padding: 0 !important; margin: 0 !important;
  overflow: visible !important; clip: auto !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  border: 0 !important;
}
#taskmenu .special-buttons a.theme:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.95) !important;
}
#taskmenu .special-buttons a.logout:hover {
  background: rgba(255,90,31,0.1) !important;
  color: #ff7a45 !important;
}
#taskmenu .special-buttons a.about { display: none !important; }

/* light theme rail */
html:not(.dark-mode) #taskmenu .special-buttons a.theme,
html:not(.dark-mode) #taskmenu .special-buttons a.logout {
  color: rgba(20,24,32,0.6) !important;
}
html:not(.dark-mode) #taskmenu .special-buttons a.theme:hover {
  background: rgba(20,24,32,0.05) !important;
  color: rgba(20,24,32,0.95) !important;
}

/* 3) Sidebar-menu 3-dots button — fix tiny squashed size, position, alignment */
#layout-list > .header a.button.icon.sidebar-menu,
.header a.button.icon.sidebar-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
  font-size: 0 !important;
}
#layout-list > .header a.button.icon.sidebar-menu::before,
.header a.button.icon.sidebar-menu::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
}
#layout-list > .header a.button.icon.sidebar-menu:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.95) !important;
}
#layout-list > .header a.button.icon.sidebar-menu.active {
  background: rgba(255,90,31,0.12) !important;
  color: #ff7a45 !important;
}
html:not(.dark-mode) .header a.button.icon.sidebar-menu {
  color: rgba(20,24,32,0.5) !important;
}
html:not(.dark-mode) .header a.button.icon.sidebar-menu:hover {
  background: rgba(20,24,32,0.05) !important;
  color: rgba(20,24,32,0.95) !important;
}

/* Make the header relative so absolute-positioned sidebar-menu works */
#layout-list > .header,
#layout-sidebar > .header,
#layout-content > .header {
  position: relative !important;
}

/* ============ v16: rail back to vertical (icon + tiny label), tone down active states ============ */

/* Bottom rail: vertical like the rest of taskmenu, not horizontal */
#taskmenu .special-buttons a.theme,
#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.button {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  min-height: 52px !important;
  width: 100% !important;
  text-align: center !important;
}
#taskmenu .special-buttons a::before {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}
#taskmenu .special-buttons a .inner {
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  text-transform: none !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tone down toolbar icon active state — no orange fill, just subtle */
ul.menu.toolbar.listing.iconized > li > a.active,
ul.menu.toolbar.listing.iconized > li > a[aria-expanded="true"] {
  background: transparent !important;
  color: rgba(20,24,32,0.88) !important;
}
html.dark-mode ul.menu.toolbar.listing.iconized > li > a.active,
html.dark-mode ul.menu.toolbar.listing.iconized > li > a[aria-expanded="true"] {
  color: rgba(255,255,255,0.9) !important;
}

/* Sidebar-menu 3-dots: tone down too, no orange square */
#layout-list > .header a.button.icon.sidebar-menu.active,
.header a.button.icon.sidebar-menu.active {
  background: transparent !important;
  color: rgba(20,24,32,0.85) !important;
}
html.dark-mode .header a.button.icon.sidebar-menu.active {
  color: rgba(255,255,255,0.9) !important;
}

/* toolbar-list-button (right-side 3-dots) — match the toolbar icons */
.header a.button.icon.toolbar-list-button,
#layout-list .header a.button.toolbar-list-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(20,24,32,0.55) !important;
  font-size: 0 !important;
}
.header a.button.icon.toolbar-list-button::before,
#layout-list .header a.button.toolbar-list-button::before {
  font-size: 18px !important;
  width: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.header a.button.icon.toolbar-list-button:hover,
.header a.button.icon.toolbar-list-button.active {
  background: rgba(20,24,32,0.05) !important;
  color: rgba(20,24,32,0.9) !important;
}
html.dark-mode .header a.button.icon.toolbar-list-button {
  color: rgba(255,255,255,0.55) !important;
}
html.dark-mode .header a.button.icon.toolbar-list-button:hover,
html.dark-mode .header a.button.icon.toolbar-list-button.active {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* v17: force rail labels to fit — smaller type, zero h-padding on inner */
#taskmenu .special-buttons a.theme,
#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.button {
  padding: 8px 2px !important;
}
#taskmenu .special-buttons a .inner {
  font-size: 9px !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* also apply to main taskmenu items if they ever get clipped */
#taskmenu ul.iconized > li > a .inner {
  max-width: 100% !important;
  overflow: visible !important;
}


/* ============ v19: light-theme invisibility audit + toast restyle + alignment polish ============ */

/* --- 19.1: Toolbar icons — light mode MUST be dark text. Override any leakage. --- */
html:not(.dark-mode) ul.menu.toolbar.listing.iconized > li > a,
html:not(.dark-mode) .task-mail .header ul.menu.toolbar.listing.iconized > li > a,
html:not(.dark-mode) body ul.menu.toolbar.listing.iconized > li > a {
  color: rgba(20,24,32,0.62) !important;
}
html:not(.dark-mode) ul.menu.toolbar.listing.iconized > li > a:hover {
  background: rgba(20,24,32,0.05) !important;
  color: rgba(20,24,32,0.95) !important;
}
html:not(.dark-mode) ul.menu.toolbar.listing.iconized > li > a.active,
html:not(.dark-mode) ul.menu.toolbar.listing.iconized > li > a[aria-expanded="true"] {
  color: rgba(20,24,32,0.92) !important;
  background: rgba(20,24,32,0.06) !important;
}

/* 19.2: Any header toolbar icon in light mode — dark ink */
html:not(.dark-mode) .header a.button.icon,
html:not(.dark-mode) #layout-list > .header a.button.icon,
html:not(.dark-mode) .header a.button.icon.toolbar-list-button,
html:not(.dark-mode) .header a.button.icon.sidebar-menu {
  color: rgba(20,24,32,0.62) !important;
}
html:not(.dark-mode) .header a.button.icon:hover,
html:not(.dark-mode) .header a.button.icon.toolbar-list-button:hover,
html:not(.dark-mode) .header a.button.icon.sidebar-menu:hover {
  background: rgba(20,24,32,0.06) !important;
  color: rgba(20,24,32,0.95) !important;
}

/* 19.3: Kill any leftover white-on-X text in non-rail non-dark areas */
html:not(.dark-mode) .toolbar a:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  color: rgba(20,24,32,0.78) !important;
}

/* 19.4: Taskmenu rail — give it a real subtle surface so white-on-transparent stops in light mode */
html:not(.dark-mode) #taskmenu {
  background: linear-gradient(180deg, #0d0f13 0%, #0a0b0e 100%) !important;
  color: rgba(255,255,255,0.86) !important;
}
html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #taskmenu .special-buttons a.theme,
html:not(.dark-mode) #taskmenu .special-buttons a.logout {
  color: rgba(255,255,255,0.62) !important;
}
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu .special-buttons a.theme:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.96) !important;
}
html:not(.dark-mode) #taskmenu .special-buttons a.logout:hover {
  background: rgba(255,90,31,0.14) !important;
  color: #ff9166 !important;
}
html:not(.dark-mode) #taskmenu ul.iconized > li > a.selected,
html:not(.dark-mode) #taskmenu ul.iconized > li > a.active,
html:not(.dark-mode) #taskmenu ul.iconized > li > a[aria-selected="true"] {
  background: rgba(255,90,31,0.14) !important;
  color: #ffb08a !important;
}

/* 19.5: Toast / messagestack modern restyle */
#messagestack {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  left: auto !important;
  top: auto !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 10px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}
#messagestack > div {
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 12px 16px 12px 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(20,24,32,0.06) !important;
  box-shadow: 0 8px 28px rgba(10,12,16,0.14), 0 2px 6px rgba(10,12,16,0.06) !important;
  font-family: 'Onest', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  position: relative !important;
  backdrop-filter: saturate(1.2) blur(8px) !important;
  -webkit-backdrop-filter: saturate(1.2) blur(8px) !important;
  animation: frkhd-toast-in 180ms cubic-bezier(.2,.9,.3,1.2) !important;
}
@keyframes frkhd-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Accent dot / icon on left */
#messagestack > div::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  opacity: 0.85 !important;
  flex: none !important;
  font-size: 0 !important;
  display: block !important;
}

/* Info / notice / loading — neutral */
#messagestack > div.notice,
#messagestack > div.loading {
  background: rgba(255,255,255,0.96) !important;
  color: #20252d !important;
  border-color: rgba(20,24,32,0.08) !important;
}
#messagestack > div.notice::before,
#messagestack > div.loading::before {
  background: #ff5a1f !important;
}

/* Confirmation — accent orange tint */
#messagestack > div.confirmation {
  background: rgba(255,247,242,0.98) !important;
  color: #7a2d0e !important;
  border-color: rgba(255,90,31,0.22) !important;
}
#messagestack > div.confirmation::before {
  background: #ff5a1f !important;
}

/* Error — red */
#messagestack > div.error {
  background: rgba(255,241,240,0.98) !important;
  color: #7c1d1b !important;
  border-color: rgba(225,60,55,0.24) !important;
}
#messagestack > div.error::before {
  background: #e13c37 !important;
}

/* Warning — amber */
#messagestack > div.warning {
  background: rgba(255,250,232,0.98) !important;
  color: #6b4a00 !important;
  border-color: rgba(220,160,20,0.28) !important;
}
#messagestack > div.warning::before {
  background: #d9a015 !important;
}

/* Dark-mode toasts */
html.dark-mode #messagestack > div.notice,
html.dark-mode #messagestack > div.loading {
  background: rgba(22,25,31,0.96) !important;
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode #messagestack > div.confirmation {
  background: rgba(40,22,14,0.96) !important;
  color: #ffd3b8 !important;
  border-color: rgba(255,90,31,0.28) !important;
}
html.dark-mode #messagestack > div.error {
  background: rgba(42,18,18,0.96) !important;
  color: #ffbfbd !important;
  border-color: rgba(225,60,55,0.32) !important;
}
html.dark-mode #messagestack > div.warning {
  background: rgba(38,30,10,0.96) !important;
  color: #ffe29a !important;
  border-color: rgba(220,160,20,0.32) !important;
}

/* Close button inside toast */
#messagestack > div a.button.close,
#messagestack > div .close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: inherit !important;
  opacity: 0.55 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
#messagestack > div a.button.close:hover,
#messagestack > div .close:hover {
  opacity: 1 !important;
  background: rgba(20,24,32,0.08) !important;
}
html.dark-mode #messagestack > div a.button.close:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* 19.6: Alignment polish — ensure toolbar buttons center their ::before icons */
.header a.button.icon > *:not(::before):not(.inner),
ul.menu.toolbar.listing.iconized > li > a > .inner {
  /* keep inner visible for a11y but don't let it push icon off-center */
}
ul.menu.toolbar.listing.iconized > li > a {
  vertical-align: middle !important;
}
ul.menu.toolbar.listing.iconized > li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
}

/* 19.7: Bottom rail labels — keep readable width, prevent ellipsis cut of Russian "Темный режим" */
#taskmenu .special-buttons a.theme .inner,
#taskmenu .special-buttons a.logout .inner {
  font-size: 9.5px !important;
  letter-spacing: 0.01em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
  text-align: center !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

/* 19.8: Final safety — any element with rgba color alpha < 0.4 on near-white bg gets floor */
/* (explicit fixes above cover the known cases) */

/* ============================================================
 * v20 — PALETTE UNIFICATION + CROSS-TASK OVERHAUL
 * Contacts / Settings / Compose / Message-read / Menuitems
 * Kills leftover Roundcube blues, normalizes borders, selections
 * ============================================================ */

/* v20.1: Unified CSS variable palette */
:root {
  --frkhd-accent: #ff5a1f;
  --frkhd-accent-hover: #ff7043;
  --frkhd-accent-soft: rgba(255, 90, 31, 0.10);
  --frkhd-accent-softer: rgba(255, 90, 31, 0.06);
  --frkhd-accent-ring: rgba(255, 90, 31, 0.30);
  --frkhd-bg: #ffffff;
  --frkhd-surface: #fafaf9;
  --frkhd-surface-2: #f4f4f2;
  --frkhd-border: rgba(20, 24, 32, 0.08);
  --frkhd-border-strong: rgba(20, 24, 32, 0.14);
  --frkhd-text: #14161c;
  --frkhd-text-soft: rgba(20, 24, 32, 0.62);
  --frkhd-text-faint: rgba(20, 24, 32, 0.40);
}
html.dark-mode {
  --frkhd-bg: #0a0b0f;
  --frkhd-surface: #14161c;
  --frkhd-surface-2: #1c1e26;
  --frkhd-border: rgba(255, 255, 255, 0.08);
  --frkhd-border-strong: rgba(255, 255, 255, 0.14);
  --frkhd-text: #f0f2f5;
  --frkhd-text-soft: rgba(255, 255, 255, 0.65);
  --frkhd-text-faint: rgba(255, 255, 255, 0.40);
  --frkhd-accent-soft: rgba(255, 90, 31, 0.16);
  --frkhd-accent-softer: rgba(255, 90, 31, 0.08);
}

/* v20.2: Kill ALL leftover Roundcube blue selections.
 * Settings list (.listitem.selected had bg rgb(235,249,255), border-left rgb(157,223,255))
 * Any listbox row / identity / folder / filter / profile row */
.listing li.selected,
.listing li.selected > a,
.listbox .listing li.selected,
.listbox .listing li.selected > a,
#settings-sections li.selected,
#settings-sections li.selected > a,
#sections-table tr.selected > td,
#sections-table tr.focused > td,
#sections-table tr.selected td.section,
#identities-table tr.selected > td,
#identities-table tr.focused > td,
#folderlist-content li.selected > a,
#filterslist li.selected,
#filtersetslist li.selected,
#responseslist li.selected,
.contactgroup.selected,
ul.listing li.selected a,
ul.listing li.focused a {
  background-color: var(--frkhd-accent-soft) !important;
  background-image: none !important;
  color: var(--frkhd-text) !important;
  border-left-color: var(--frkhd-accent) !important;
  border-color: transparent !important;
  box-shadow: inset 3px 0 0 var(--frkhd-accent) !important;
}

/* v20.3: Hover for non-selected list rows in settings/contacts/folders */
.listing li:not(.selected):hover,
.listing li:not(.selected) > a:hover,
#sections-table tr:not(.selected):hover > td,
#identities-table tr:not(.selected):hover > td,
#folderlist-content li:not(.selected):hover > a,
#filterslist li:not(.selected):hover,
#responseslist li:not(.selected):hover {
  background-color: var(--frkhd-accent-softer) !important;
  color: var(--frkhd-text) !important;
}

/* v20.4: Reset all left-borders Roundcube put on TDs/LIs */
#sections-table td.section,
#identities-table td,
.listing li,
.listing li > a {
  border-left-color: transparent !important;
}

/* v20.5: Compose recipient input — kill Bootstrap focus blue (#37beff),
 * default gray UA border, and normalize to frkhd palette */
ul.recipient-input,
ul.recipient-input.focus,
ul.ac-input,
ul.ac-input.focus,
.form-control.recipient-input,
.form-control.recipient-input.focus,
input[name="_to"], input[name="_cc"], input[name="_bcc"],
input[name="_replyto"], input[name="_followupto"],
input[name="_subject"] {
  border: 1px solid var(--frkhd-border) !important;
  background: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
ul.recipient-input.focus,
ul.ac-input.focus,
.form-control.recipient-input.focus,
input[name="_to"]:focus, input[name="_cc"]:focus, input[name="_bcc"]:focus,
input[name="_subject"]:focus,
.form-control:focus,
.form-control.focus,
textarea:focus, input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, input[type=search]:focus {
  border-color: var(--frkhd-accent) !important;
  box-shadow: 0 0 0 3px var(--frkhd-accent-ring) !important;
  outline: none !important;
}

/* v20.6: Recipient chips (ac-input li.recipient) — neutral, not blue */
ul.ac-input li.recipient,
ul.recipient-input li.recipient {
  background: var(--frkhd-surface-2) !important;
  color: var(--frkhd-text) !important;
  border: 1px solid var(--frkhd-border) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
}
ul.ac-input li.recipient .email,
ul.recipient-input li.recipient .email {
  color: var(--frkhd-text) !important;
}

/* v20.7: "Открыть в новом окне" btn-link — was rgb(0,172,255) */
a.btn-link, a.btn.btn-link, .btn-link,
a.extwin, a.btn-link.extwin,
#compose-links a, #compose-links a:link, #compose-links a:visited {
  color: var(--frkhd-accent) !important;
  text-decoration: none !important;
}
a.btn-link:hover, .btn-link:hover, a.extwin:hover {
  color: var(--frkhd-accent-hover) !important;
  text-decoration: underline !important;
}

/* v20.8: Generic anchor color reset — kill any <a> that didn't
 * get explicit override and is using browser default or Roundcube
 * pale blue. We target only content-area links, not rail. */
#layout-content a:not(.button):not([class*="task"]):not(.toolbar-button):not(.icon):link,
#layout-content a:not(.button):not([class*="task"]):not(.toolbar-button):not(.icon):visited,
.rcmBody a:link, .rcmBody a:visited,
.messagelist a, .message-part a,
.uibox a:link, .uibox a:visited {
  color: var(--frkhd-accent);
}
#layout-content a:hover, .rcmBody a:hover,
.uibox a:hover {
  color: var(--frkhd-accent-hover);
}

/* v20.9: ALL form-controls use the palette */
.form-control, .pretty-select, select.form-control, textarea.form-control,
input.form-control, input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], input[type=url], textarea {
  background-color: var(--frkhd-bg) !important;
  border: 1px solid var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
  border-radius: 10px !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--frkhd-text-faint) !important;
}

/* v20.10: Message-read view (full overhaul) */
#messageheader, .header-title, #messagebody, .message-part,
.messageheaderbox, .headers-table, #full-headers {
  background: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
  border-color: var(--frkhd-border) !important;
}
#messageheader {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--frkhd-border) !important;
  background: var(--frkhd-bg) !important;
}
#messageheader .header-title,
#messageheader .subject {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--frkhd-text) !important;
  margin-bottom: 12px !important;
}
#messageheader .headers-table td,
#messageheader .headers-table th {
  color: var(--frkhd-text) !important;
  background: transparent !important;
  border: none !important;
  padding: 3px 6px !important;
  font-size: 13px !important;
}
#messageheader .headers-table th {
  color: var(--frkhd-text-faint) !important;
  font-weight: 500 !important;
  width: 80px !important;
  text-align: left !important;
}
#messageheader .rcmContactAddress,
#messageheader .adr {
  color: var(--frkhd-text) !important;
}
#messageheader .rcmContactAddress a,
#messageheader .adr a {
  color: var(--frkhd-text) !important;
  text-decoration: none !important;
}
#messagebody {
  padding: 24px !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--frkhd-text) !important;
}
#messagebody blockquote, .message-part blockquote {
  border-left: 3px solid var(--frkhd-border-strong) !important;
  background: var(--frkhd-surface) !important;
  color: var(--frkhd-text-soft) !important;
  padding: 8px 14px !important;
  margin: 12px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}
/* Attachment chips in message read */
#attachment-list, .attachmentslist {
  background: transparent !important;
  border: none !important;
  padding: 8px 24px !important;
}
#attachment-list li, .attachmentslist li {
  background: var(--frkhd-surface) !important;
  border: 1px solid var(--frkhd-border) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin: 0 8px 8px 0 !important;
  color: var(--frkhd-text) !important;
}
#attachment-list li a, .attachmentslist li a {
  color: var(--frkhd-text) !important;
}

/* v20.11: Compose attachments panel + right sidebar */
#compose-attachments, #compose-options,
.uibox, .formcontent, .tabbed, .tab-content {
  background: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
  border-color: var(--frkhd-border) !important;
}
.uibox .boxtitle, .boxtitle, .formbox-title {
  background: var(--frkhd-surface) !important;
  color: var(--frkhd-text) !important;
  border-bottom: 1px solid var(--frkhd-border) !important;
  font-weight: 600 !important;
}
#filedrop, .filedrop {
  background: var(--frkhd-surface) !important;
  border: 2px dashed var(--frkhd-border-strong) !important;
  border-radius: 12px !important;
  color: var(--frkhd-text-soft) !important;
}

/* v20.12: Labels / form-group text */
.propform label, .propform .title, label.col-form-label,
fieldset legend, .formcontent label {
  color: var(--frkhd-text-soft) !important;
  font-weight: 500 !important;
}

/* v20.13: TinyMCE / HTML editor chrome */
.mce-panel, .mce-tinymce, .mce-toolbar, .mce-menubar,
.mce-btn, .mce-btn-group, .mce-btn button {
  background-color: var(--frkhd-surface) !important;
  border-color: var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
}
.mce-btn:hover, .mce-btn.mce-active, .mce-btn:focus {
  background-color: var(--frkhd-accent-soft) !important;
  color: var(--frkhd-text) !important;
  border-color: transparent !important;
}
.mce-ico, .mce-i-html {
  color: var(--frkhd-text) !important;
}
#html-editor-area, .mce-edit-area iframe {
  background: var(--frkhd-bg) !important;
}

/* v20.14: Settings tabs (top bar: Настройки / Папки / Профили / Ответы)
 * Stock is display:block, padding:0 7px. Make them flex pills. */
#settings-tabs, .tabsbar, #settings-sections {
  background: transparent !important;
  border-bottom: 1px solid var(--frkhd-border) !important;
  display: flex !important;
  gap: 4px !important;
  padding: 0 8px !important;
}
#settings-tabs a, .tabsbar a, #settings-sections > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 10px 10px 0 0 !important;
  color: var(--frkhd-text-soft) !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
#settings-tabs a:hover, .tabsbar a:hover, #settings-sections > li > a:hover {
  color: var(--frkhd-text) !important;
  background: var(--frkhd-accent-softer) !important;
}
#settings-tabs a.selected, #settings-tabs li.selected a,
.tabsbar a.selected, .tabsbar .active a,
#settings-sections > li.selected > a, #settings-sections > li.active > a {
  color: var(--frkhd-text) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--frkhd-accent) !important;
  box-shadow: none !important;
}

/* v20.15: Top toolbar icon buttons (inbox, contacts, folders)
 * Currently raw anchors with no chrome. Make them hoverable circles. */
.header .buttons > li > a,
.header .toolbar > li > a,
ul.toolbar > li > a,
.toolbar > a.button,
#messagemenu li a,
.header a.button.icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  color: var(--frkhd-text-soft) !important;
  transition: background-color .12s, color .12s !important;
  padding: 0 !important;
  margin: 0 2px !important;
}
.header .buttons > li > a:hover:not(.disabled),
.header .toolbar > li > a:hover:not(.disabled),
ul.toolbar > li > a:hover:not(.disabled),
.header a.button.icon:hover:not(.disabled) {
  background-color: var(--frkhd-accent-softer) !important;
  color: var(--frkhd-text) !important;
}
.header .buttons > li > a.disabled,
ul.toolbar > li > a.disabled,
.header a.button.icon.disabled {
  opacity: 0.35 !important;
  cursor: default !important;
}
.header .buttons > li > a.active:not(.disabled),
ul.toolbar > li > a.active:not(.disabled) {
  background-color: var(--frkhd-accent-soft) !important;
  color: var(--frkhd-accent) !important;
}
/* Buttons-with-labels in toolbar (e.g. Junk/NotJunk "buttonPas") keep their
 * width but align icon + label consistently */
ul.toolbar > li > a.buttonPas,
ul.toolbar > li > a.button[class*="button"]:not(.icon) {
  width: auto !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

/* v20.16: Dropdown toggles next to split buttons (reply-all/forward/export)
 * Previously display:block, padding awkward. */
ul.toolbar > li > a.dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 40px !important;
  padding: 0 !important;
  color: var(--frkhd-text-soft) !important;
  border-radius: 0 10px 10px 0 !important;
}
ul.toolbar > li > a.dropdown:hover:not(.disabled) {
  background-color: var(--frkhd-accent-softer) !important;
  color: var(--frkhd-text) !important;
}
ul.toolbar > li > a[class*="reply-all"],
ul.toolbar > li > a[class*="forward"],
ul.toolbar > li > a[class*="export"] {
  border-radius: 10px 0 0 10px !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
}

/* v20.17: Context menus / popup menus (li[role="menuitem"] normalization) */
.popupmenu, .popover-body, .menu.popupmenu,
.ui-menu, .rcmContextMenu {
  background: var(--frkhd-bg) !important;
  border: 1px solid var(--frkhd-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  padding: 4px !important;
}
html.dark-mode .popupmenu,
html.dark-mode .popover-body,
html.dark-mode .menu.popupmenu,
html.dark-mode .ui-menu,
html.dark-mode .rcmContextMenu {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.popupmenu li, .popupmenu li[role="menuitem"],
.ui-menu li, .rcmContextMenu li {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.popupmenu li > a,
.popupmenu li[role="menuitem"] > a,
.ui-menu li > a,
.ui-menu li > .ui-menu-item-wrapper,
.rcmContextMenu li > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  color: var(--frkhd-text) !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.popupmenu li > a::before,
.popupmenu li[role="menuitem"] > a::before,
.ui-menu li > a::before,
.rcmContextMenu li > a::before {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--frkhd-text-soft) !important;
  text-align: center !important;
}
.popupmenu li > a:hover,
.popupmenu li[role="menuitem"] > a:hover,
.ui-menu li > a:hover,
.ui-menu li > .ui-menu-item-wrapper:hover,
.rcmContextMenu li > a:hover {
  background-color: var(--frkhd-accent-soft) !important;
  color: var(--frkhd-text) !important;
}
.popupmenu li.active > a,
.popupmenu li[role="menuitem"].active > a,
.popupmenu li > a.active,
.popupmenu li.selected > a {
  background-color: var(--frkhd-accent-soft) !important;
  color: var(--frkhd-accent) !important;
}
.popupmenu li.separator, .popupmenu li.divider,
.ui-menu .ui-menu-divider, .rcmContextMenu li.separator {
  height: 1px !important;
  margin: 4px 6px !important;
  background: var(--frkhd-border) !important;
  padding: 0 !important;
}

/* v20.18: Page-jumper / pagination controls (bottom of list) */
.pagenav, .pagenav a, .countdisplay, .folder-count,
.rcmpagejumper, .navigation, .navigation a {
  color: var(--frkhd-text-soft) !important;
  background: transparent !important;
  border: none !important;
}
.pagenav a.button, .navigation a.button {
  width: 32px !important; height: 32px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 8px !important;
  color: var(--frkhd-text-soft) !important;
}
.pagenav a.button:hover:not(.disabled),
.navigation a.button:hover:not(.disabled) {
  background: var(--frkhd-accent-softer) !important;
  color: var(--frkhd-text) !important;
}
.pagenav a.button.disabled { opacity: 0.3 !important; }
input.rcmpagejumper, .form-control.rcmpagejumper {
  width: 44px !important; text-align: center !important;
  border-radius: 8px !important;
  background: var(--frkhd-bg) !important;
  border: 1px solid var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
}

/* v20.19: Contact page — address book list sidebar */
#directorylist, #directorylist li a,
#savedsearchlist, #savedsearchlist li a {
  color: var(--frkhd-text) !important;
}
#directorylist li a, #savedsearchlist li a,
.listing.iconized li a, #directorylist.listing li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  margin: 1px 6px !important;
  color: var(--frkhd-text) !important;
  text-decoration: none !important;
}
#directorylist li a:hover,
.listing.iconized li a:hover {
  background: var(--frkhd-accent-softer) !important;
}
#directorylist li.selected > a,
.listing.iconized li.selected > a {
  background: var(--frkhd-accent-soft) !important;
  color: var(--frkhd-text) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  border-left: none !important;
}
#directorylist li a::before,
.listing.iconized li a::before {
  flex: 0 0 18px !important;
  width: 18px !important; height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--frkhd-text-soft) !important;
}

/* v20.20: Contact cards / contact view pane */
#contact-details, #contactpic, .contactphoto,
#contacthead, .contacthead, .contactfieldgroup {
  background: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
  border-color: var(--frkhd-border) !important;
}
.contactfieldgroup legend, .contacthead .names {
  color: var(--frkhd-text) !important;
  font-weight: 600 !important;
}
.contactphoto, #contactpic img {
  border-radius: 12px !important;
  border: 1px solid var(--frkhd-border) !important;
}

/* v20.21: Switch/toggle controls (settings on/off) — orange when on */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked + label::before,
.form-check-input:checked {
  background-color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
}
.form-check-input:focus, .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--frkhd-accent-ring) !important;
  border-color: var(--frkhd-accent) !important;
}

/* v20.22: Table headers in folders / identities lists */
.records-table thead th, table.listing thead th,
#sections-table th, #identities-table th, #folderlist thead th {
  background: var(--frkhd-surface) !important;
  color: var(--frkhd-text-soft) !important;
  border-bottom: 1px solid var(--frkhd-border) !important;
  border-top: none !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 14px !important;
}
.records-table tbody td, #sections-table td,
#identities-table td, #folderlist tbody td {
  border-color: var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
  padding: 10px 14px !important;
}

/* v20.23: Primary/secondary buttons (Send, Save, Delete) */
button.btn-primary, a.btn-primary, .btn.btn-primary,
a.button.primary, button.button.primary,
a.primary.send, a.send.primary {
  background: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  box-shadow: none !important;
}
button.btn-primary:hover, a.btn-primary:hover, .btn.btn-primary:hover,
a.button.primary:hover, a.primary.send:hover {
  background: var(--frkhd-accent-hover) !important;
  border-color: var(--frkhd-accent-hover) !important;
  color: #ffffff !important;
}
button.btn-secondary, .btn.btn-secondary, a.btn-secondary,
button.btn.btn-outline-secondary, a.btn.btn-outline-secondary,
button.btn-default, .btn.btn-default {
  background: var(--frkhd-bg) !important;
  border: 1px solid var(--frkhd-border-strong) !important;
  color: var(--frkhd-text) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}
button.btn-secondary:hover, a.btn-secondary:hover,
button.btn-default:hover {
  background: var(--frkhd-surface) !important;
  border-color: var(--frkhd-text-soft) !important;
}
button.btn-danger, .btn.btn-danger, a.btn.btn-danger {
  background: #ef4444 !important; border-color: #ef4444 !important;
  color: #fff !important; border-radius: 10px !important;
}

/* v20.24: Bottom "Отправить/Prev/Next" footer in compose (currently visible) */
.footerform, .footerbuttons, .form-footer, .formbuttons {
  background: var(--frkhd-bg) !important;
  border-top: 1px solid var(--frkhd-border) !important;
  padding: 12px 18px !important;
}

/* v20.25: Login screen residuals (if any remain) */
#login-form, .login-form {
  background: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
}

/* v20.26: "Списoк пуст" empty-state text, "Select a message to read" */
.listing-empty, .listbox .listing li.empty, .noresults,
#messagecontframe-body .noresults, .empty-text {
  color: var(--frkhd-text-faint) !important;
  font-weight: 400 !important;
}

/* v20.27: Popover headers / dropdown labels */
.popover, .popover-header, .dropdown-menu, .dropdown-header {
  background: var(--frkhd-bg) !important;
  border: 1px solid var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.dropdown-item {
  color: var(--frkhd-text) !important;
  padding: 8px 14px !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--frkhd-accent-soft) !important;
  color: var(--frkhd-text) !important;
}
.dropdown-divider { border-color: var(--frkhd-border) !important; }

/* v20.28: Kill stray Bootstrap badge blues */
.badge, .badge-primary, .badge-info, .badge-secondary {
  background: var(--frkhd-surface-2) !important;
  color: var(--frkhd-text) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
}
.badge.unread, .badge.new {
  background: var(--frkhd-accent) !important;
  color: #fff !important;
}

/* v20.29: Search input in contacts / folders - style the `.no-bs` _q */
input#quicksearchbox, input[name="_q"].no-bs, input[name="_q"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
}
input#quicksearchbox:focus, input[name="_q"]:focus {
  border-bottom-color: var(--frkhd-accent) !important;
  box-shadow: none !important;
}

/* v20.30: Kill any remaining `color: #0085c9` / `#037` / Bootstrap blues
 * via attribute selectors as last resort */
a[style*="color: #0085c9"], a[style*="color:#0085c9"],
a[style*="color: rgb(0, 133, 201)"],
*[style*="color: #037"], *[style*="color:#037"],
a[style*="color: #00acff"], a[style*="color:#00acff"],
a[style*="color: rgb(0, 172, 255)"] {
  color: var(--frkhd-accent) !important;
}

/* v20.31: Dark mode — ensure every white bg gets dark overlay */
html.dark-mode #messageheader,
html.dark-mode #messagebody,
html.dark-mode .message-part,
html.dark-mode #compose-attachments,
html.dark-mode #compose-options,
html.dark-mode .uibox,
html.dark-mode .formcontent,
html.dark-mode #contact-details,
html.dark-mode .tab-content,
html.dark-mode #attachment-list li,
html.dark-mode .attachmentslist li,
html.dark-mode .popover,
html.dark-mode .dropdown-menu,
html.dark-mode .popupmenu,
html.dark-mode .rcmContextMenu,
html.dark-mode .form-control,
html.dark-mode input[type=text],
html.dark-mode input[type=email],
html.dark-mode input[type=password],
html.dark-mode input[type=search],
html.dark-mode textarea,
html.dark-mode ul.recipient-input,
html.dark-mode ul.ac-input {
  background-color: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
  border-color: var(--frkhd-border) !important;
}
html.dark-mode #messagebody, html.dark-mode .message-part {
  background-color: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
}
html.dark-mode .uibox .boxtitle,
html.dark-mode .boxtitle {
  background: var(--frkhd-surface) !important;
  color: var(--frkhd-text) !important;
}
html.dark-mode #messagebody blockquote,
html.dark-mode .message-part blockquote {
  background: var(--frkhd-surface) !important;
  color: var(--frkhd-text-soft) !important;
}

/* v20.32: Toolbar + header container backgrounds use surface */
.header, .toolbar, .footer, .folder-header, .header.boxtitle {
  background: var(--frkhd-bg) !important;
  color: var(--frkhd-text) !important;
  border-color: var(--frkhd-border) !important;
}
.header .header-title, .folder-header .header-title {
  color: var(--frkhd-text) !important;
  font-weight: 600 !important;
}

/* v20.33: Generic border sweep — any .content / .uibox that still
 * uses default Bootstrap #dee2e6 */
.content, .uibox, .formcontent, .tab-content, .card, .panel,
#sections-table, #identities-table, #folderlist, #filterslist {
  border-color: var(--frkhd-border) !important;
}

/* v20.34: Fieldset propform layout polish */
fieldset.propform {
  border: 1px solid var(--frkhd-border) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  background: var(--frkhd-bg) !important;
}
fieldset.propform legend {
  color: var(--frkhd-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0 8px !important;
}

/* v20.35: Stop the browser default <select> border (rgb 118,118,118) */
select, select.form-control, select.custom-select {
  background-color: var(--frkhd-bg) !important;
  border: 1px solid var(--frkhd-border) !important;
  color: var(--frkhd-text) !important;
  border-radius: 10px !important;
  padding: 6px 32px 6px 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23808080' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
select:focus { border-color: var(--frkhd-accent) !important; box-shadow: 0 0 0 3px var(--frkhd-accent-ring) !important; outline: none !important; }

/* v20.36: Scrollbar tint for Firefox/WebKit */
* { scrollbar-color: var(--frkhd-border-strong) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--frkhd-border-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--frkhd-text-faint); }
*::-webkit-scrollbar-track { background: transparent; }

/* =========================================================================
 * v21 — Bootstrap-blue eradication, link reset, toolbar split-button polish,
 *        and message body font / skin-license link fix. Appended only.
 * v20 got 95% there; user screenshots showed these leaks:
 *  1. Skin license "Creative Commons…" links → #00ACFF
 *  2. "Зарегистрировать обработчик mailto:" link → #00ACFF
 *  3. Focus outline on form-switch checkboxes → #005FCC
 *  4. Toolbar dropdown-caret touches main icon in .btn-group
 *  5. Bootstrap-native .btn-primary / .form-check-input safety-net
 *     (in case any page we haven't rescoped yet uses the defaults)
 *  6. <pre> in message body → monospace; force Onest for plain-text mail
 * ========================================================================= */

/* v21.1: Bootstrap primary button safety net. Any .btn-primary that slipped
 * past our previously-scoped selectors must still be accent orange. */
.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background-color: var(--frkhd-accent-hover, #e04a10) !important;
  border-color: var(--frkhd-accent-hover, #e04a10) !important;
  color: #fff !important;
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--frkhd-accent-ring) !important;
}

/* v21.2: Bootstrap form-check (checkbox + radio) accent colour. This is the
 * native HTML accent-color property which covers the radio dot and any
 * checkboxes that aren't wrapped in Roundcube's custom-switch pseudo. */
input[type="checkbox"],
input[type="radio"],
input.form-check-input,
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
  accent-color: var(--frkhd-accent);
}
/* And the :checked bg for Bootstrap's own toggle (not the Elastic one,
 * which already uses pseudo-elements on .custom-control-label). */
.form-check-input:checked {
  background-color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
}
.form-check-input:focus {
  border-color: var(--frkhd-accent) !important;
  box-shadow: 0 0 0 0.25rem var(--frkhd-accent-ring) !important;
  outline: none !important;
}

/* v21.3: Focus outline on Roundcube's Elastic switch-inputs. The native
 * input is visually hidden behind custom-control-label pseudo, but the
 * browser still draws a blue focus outline on the input itself. Kill it. */
.custom-control-input:focus,
.custom-control-input:focus-visible,
input.form-check-input.custom-control-input:focus {
  outline-color: var(--frkhd-accent) !important;
  outline-style: none !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  border-color: var(--frkhd-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--frkhd-accent-ring) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
}

/* v21.4: Skin-license links ("Creative Commons …"), mailto handler link,
 * and any other stray <a> inside the preferences body. Roundcube's Elastic
 * skin sets these to #00ACFF via skinlicense rules. Override explicitly. */
.skinlicense a,
.skinlicense a:link,
.skinlicense a:visited,
.skinlicense a:hover,
span.skinlicense > a,
#mailtoprotohandler,
a#mailtoprotohandler,
table.propform a,
.formcontent a,
.tabsbar + .tab-content a,
#preferences-box a,
.settingsbox a {
  color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-accent) !important;
  text-decoration: none !important;
}
.skinlicense a:hover,
#mailtoprotohandler:hover,
table.propform a:hover,
.formcontent a:hover {
  color: var(--frkhd-accent-hover, #e04a10) !important;
  text-decoration: underline !important;
}

/* v21.5: Message body plain-text <pre> -> Onest. Roundcube wraps plain
 * text email in <pre> which picks up browser monospace default. Only
 * code-y children (inline <code>, .code class) keep monospace. */
#messagebody pre,
#messagebody .message-part pre,
#messagebody div.message-htmlpart pre,
div.message-part pre,
.messageview #messagebody pre {
  font-family: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  color: var(--frkhd-text) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}
#messagebody pre code,
#messagebody pre .code,
#messagebody code,
#messagebody .code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
}

/* v21.6: Toolbar split-button (reply-all / forward) spacing. The main-icon
 * and the dropdown-caret sit in a .btn-group; Bootstrap zeroes the gap
 * between them. Put breathing room back, tidy caret width. */
#messagetoolbar .btn-group,
.toolbar .btn-group,
.toolbarmenu .btn-group {
  gap: 2px !important;
  margin-right: 6px !important;
}
#messagetoolbar .btn-group > .btn,
.toolbar .btn-group > .btn,
#messagetoolbar .btn-group > a.button,
.toolbar .btn-group > a.button {
  border-radius: 8px !important;
}
#messagetoolbar .btn-group > .dropdown-toggle,
.toolbar .btn-group > .dropdown-toggle,
#messagetoolbar a.button.dropdown,
.toolbar a.button.dropdown {
  min-width: 22px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  margin-left: 0 !important;
}
#messagetoolbar .btn-group > .dropdown-toggle::after,
.toolbar .btn-group > .dropdown-toggle::after {
  margin-left: 0 !important;
}
/* Give every top-level toolbar button a consistent outer gap. */
#messagetoolbar > a.button,
#messagetoolbar > .btn,
#messagetoolbar > .btn-group,
.toolbar > a.button,
.toolbar > .btn {
  margin-right: 4px !important;
}

/* v21.7: Message header icons (envelope, info, external-link) colour.
 * Roundcube hangs these off <a> which we orange'd above; explicit for
 * the "subject external-link" (.extwin) and details/headers toggles. */
#messageheader a,
#messageheader a:link,
#messageheader a:visited,
#messageheader .headers-details a,
#messageheader a.extwin,
#messageheader a.envelope,
#messageheader a.iconlink,
.message-header a {
  color: var(--frkhd-accent) !important;
}
#messageheader a i,
#messageheader a .fa,
#messageheader a svg,
#messageheader .fa-envelope,
#messageheader .fa-info-circle,
#messageheader .fa-external-link-alt,
#messageheader .fa-external-link {
  color: inherit !important;
  fill: currentColor !important;
}

/* v21.8: Global <a> safety net — LAST so the explicit regional scopes
 * (folder list, menu items) we set earlier still win via their own
 * explicit selectors. Anything else will inherit accent orange. */
a:not([class]),
a.normal-link {
  color: var(--frkhd-accent);
}
a:not([class]):hover {
  color: var(--frkhd-accent-hover, #e04a10);
}

/* v21.9: Misc Bootstrap blues that can still slip through on modals,
 * pagination, tooltips & file upload buttons. */
.page-link, .page-item.active .page-link {
  color: var(--frkhd-accent) !important;
  border-color: var(--frkhd-border) !important;
}
.page-item.active .page-link {
  background: var(--frkhd-accent) !important;
  color: #fff !important;
  border-color: var(--frkhd-accent) !important;
}
.custom-file-label::after {
  background: var(--frkhd-accent) !important;
  color: #fff !important;
  border-color: var(--frkhd-accent) !important;
}
.alert-info, .alert-primary {
  border-color: var(--frkhd-accent) !important;
}
.text-primary, .text-info { color: var(--frkhd-accent) !important; }
.bg-primary, .bg-info { background-color: var(--frkhd-accent) !important; }
.border-primary { border-color: var(--frkhd-accent) !important; }

/* v21.10: Any remaining raw Bootstrap :root variables -> alias to accent. */
:root {
  --bs-primary: var(--frkhd-accent);
  --bs-primary-rgb: 255, 90, 31;
  --bs-link-color: var(--frkhd-accent);
  --bs-link-hover-color: var(--frkhd-accent-hover, #e04a10);
}

/* =========================================================================
 * v22 — message-read hardening (append-only).
 *
 * v21 actually holds up in live probes: the five load-bearing items in the
 * message-read view (subject ext-link icon, sender email link, Подробности,
 * Заголовки, body text) already resolve to accent / neutral. The only real
 * blue that the v22 probe found was `a.button.icon.cancel` — an off-canvas
 * mobile "Закрыть" button at rgb(0,172,255). We pin it, along with high-
 * specificity restatements of the message-read rules so any future Elastic
 * re-scoping can't beat us.
 * ========================================================================= */

/* Mobile / responsive "Закрыть" cancel button — only remaining Elastic blue. */
html body a.button.icon.cancel,
html body a.button.icon.cancel > .inner,
html body a.button.cancel,
html body .popover a.button.cancel,
html body .menu a.button.cancel {
  color: var(--frkhd-accent) !important;
}
html body a.button.icon.cancel::before,
html body a.button.icon.cancel .inner::before {
  color: var(--frkhd-accent) !important;
}

/* Message-read header — maximum-specificity restatements. */
html body #messageheader a,
html body #messageheader a:link,
html body #messageheader a:visited,
html body #messageheader a:hover,
html body #messageheader a:focus,
html body #messageheader a.extwin,
html body #messageheader a.envelope,
html body #messageheader a.headers,
html body #messageheader a.iconlink,
html body #messageheader .rcmaddr a,
html body #messageheader .subject a,
html body .message-partheaders a,
html body #message-header a {
  color: var(--frkhd-accent) !important;
  text-decoration-color: var(--frkhd-accent) !important;
}

html body #messageheader a i,
html body #messageheader a .fa,
html body #messageheader a svg,
html body #messageheader a::before,
html body #messageheader i.fa,
html body #messageheader i::before,
html body #messageheader .fa-envelope,
html body #messageheader .fa-envelope::before,
html body #messageheader .fa-info-circle,
html body #messageheader .fa-info-circle::before,
html body #messageheader .fa-external-link-alt,
html body #messageheader .fa-external-link-alt::before,
html body #messageheader .fa-external-link,
html body #messageheader .fa-external-link::before {
  color: inherit !important;
  fill: currentColor !important;
}

/* Message body — keep Onest / sans, never monospace by accident. */
html body #messagebody,
html body #messagebody .message-part,
html body #messagebody .message-htmlpart,
html body #messagebody .pre,
html body #messagebody div.pre,
html body #messagebody pre {
  font-family: "Onest", -apple-system, system-ui, "Segoe UI", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* Any link inside the message body that tries to render blue. */
html body #messagebody a,
html body #messagebody a:link,
html body #messagebody a:visited,
html body #messagebody a:hover {
  color: var(--frkhd-accent) !important;
}

/* Final sweep — anything with the stock Elastic blue literal still slipping
 * through gets retargeted. These are the five Elastic brand-blue values we
 * actually observed in probes across 22 iterations. */
html body [style*="rgb(0, 172, 255)"],
html body [style*="color:#1d82c7"],
html body [style*="color: #1d82c7"] {
  color: var(--frkhd-accent) !important;
}

/* v23: tighten message-read padding — header-content + messagebody */
html body .content.frame-content,
html body #messagecontframe-container .content {
  padding: 0 !important;
}
html body .header-content {
  padding: 0 !important;
}
html body #messagebody {
  padding: 10px 22px 24px !important;
}
html body #messagebody .message-part,
html body #messagebody .message-htmlpart {
  padding: 0 !important;
  margin: 0 !important;
}

/* ===================================================================
 * v26 — Lucide icon swap (stroke-based, mask-image + currentColor).
 * Overrides Roundcube Elastic "Icons" font glyphs with inline SVGs.
 * Both light + dark themes inherit via currentColor.
 * =================================================================== */

/* Shared baseline for every ::before we override.
 * We keep the existing layout (Elastic positions the ::before absolutely
 * for rail/toolbar buttons), only swap the visual:
 *   - blank out the font glyph (content stays, font becomes inherit so
 *     nothing renders even if the char was valid)
 *   - render an SVG via mask-image with background-color = currentColor
 */
html body a.compose::before,
html body a.mail::before,
html body a.contacts::before,
html body a.settings::before,
html body a.theme::before,
html body a.logout::before,
html body a.back-list-button::before,
html body a.sidebar-menu::before,
html body .mailbox.inbox > a::before,
html body .mailbox.sent > a::before,
html body .mailbox.drafts > a::before,
html body .mailbox.trash > a::before,
html body .mailbox.junk > a::before,
html body .mailbox.archive > a::before,
html body li.inbox > a::before,
html body li.sent > a::before,
html body li.drafts > a::before,
html body li.trash > a::before,
html body li.junk > a::before,
html body li.archive > a::before,
html body a.select::before,
html body a.threads::before,
html body a.options::before,
html body a.refresh::before,
html body a.toolbar-list-button::before,
html body a.toolbar-menu-button::before,
html body a.unread::before,
html body a.firstpage::before,
html body a.prevpage::before,
html body a.nextpage::before,
html body a.lastpage::before,
html body a.reply::before,
html body a.reply-all::before,
html body a.forward::before,
html body a.delete::before,
html body a.junk:not(.mailbox)::before,
html body a.notjunk::before,
html body a.markmessage::before,
html body a.more::before,
html body a.prev::before,
html body a.next::before,
html body a.dropdown::before,
html body a.print::before,
html body a.download::before,
html body a.search-create::before,
html body a.export::before,
html body a.import::before,
html body a.add::before,
html body a.addcontact::before,
html body a.flag::before,
html body a.extwin::before,
html body a.envelope::before,
html body a.headers::before {
  font-family: inherit !important;
  content: "" !important;
  background-color: currentColor !important;
  color: inherit !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-size: contain !important;
          mask-size: contain !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Folder list ::before in rail — Roundcube uses li > a::before positioned.
 * Folder icons are a bit smaller. */
html body .mailbox.inbox > a::before,
html body .mailbox.sent > a::before,
html body .mailbox.drafts > a::before,
html body .mailbox.trash > a::before,
html body .mailbox.junk > a::before,
html body .mailbox.archive > a::before,
html body li.inbox > a::before,
html body li.sent > a::before,
html body li.drafts > a::before,
html body li.trash > a::before,
html body li.junk > a::before,
html body li.archive > a::before {
  width: 18px !important;
  height: 18px !important;
}

/* --- Lucide SVG masks (URL-encoded) --- */

/* inbox — lucide/inbox */
html body .mailbox.inbox > a::before,
html body li.inbox > a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>") !important;
}

/* sent — lucide/send */
html body .mailbox.sent > a::before,
html body li.sent > a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4Z'/><path d='M22 2 11 13'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4Z'/><path d='M22 2 11 13'/></svg>") !important;
}

/* drafts — lucide/file-edit */
html body .mailbox.drafts > a::before,
html body li.drafts > a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>") !important;
}

/* trash — lucide/trash-2 */
html body .mailbox.trash > a::before,
html body li.trash > a::before,
html body a.delete::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>") !important;
}

/* junk — lucide/shield-alert (for folder and spam toolbar) */
html body .mailbox.junk > a::before,
html body li.junk > a::before,
html body a.junk:not(.mailbox)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='M12 8v4'/><path d='M12 16h.01'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='M12 8v4'/><path d='M12 16h.01'/></svg>") !important;
}

/* not-junk — lucide/shield-check */
html body a.notjunk::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>") !important;
}

/* archive — lucide/archive */
html body .mailbox.archive > a::before,
html body li.archive > a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='5' x='2' y='3' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/><path d='M10 12h4'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='5' x='2' y='3' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/><path d='M10 12h4'/></svg>") !important;
}

/* compose — lucide/pen-square */
html body a.compose::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/></svg>") !important;
}

/* mail task — lucide/mail */
html body a.mail::before,
html body a.envelope::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") !important;
}

/* contacts — lucide/users */
html body a.contacts::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") !important;
}

/* settings — lucide/settings */
html body a.settings::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
}

/* theme toggle — dark class = moon, default = sun */
html body a.theme.dark::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>") !important;
}
html body a.theme:not(.dark)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='m4.93 4.93 1.41 1.41'/><path d='m17.66 17.66 1.41 1.41'/><path d='M2 12h2'/><path d='M20 12h2'/><path d='m6.34 17.66-1.41 1.41'/><path d='m19.07 4.93-1.41 1.41'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='m4.93 4.93 1.41 1.41'/><path d='m17.66 17.66 1.41 1.41'/><path d='M2 12h2'/><path d='M20 12h2'/><path d='m6.34 17.66-1.41 1.41'/><path d='m19.07 4.93-1.41 1.41'/></svg>") !important;
}

/* logout — lucide/log-out */
html body a.logout::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>") !important;
}

/* back — lucide/arrow-left */
html body a.back-list-button::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>") !important;
}

/* folder-ops / sidebar-menu — lucide/more-horizontal */
html body a.sidebar-menu::before,
html body a.toolbar-menu-button::before,
html body a.toolbar-list-button::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/></svg>") !important;
}

/* select — lucide/check-square */
html body a.select::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 11 3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 11 3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>") !important;
}

/* threads — lucide/message-circle */
html body a.threads::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>") !important;
}

/* options / sliders — lucide/sliders-horizontal */
html body a.options::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' x2='14' y1='4' y2='4'/><line x1='10' x2='3' y1='4' y2='4'/><line x1='21' x2='12' y1='12' y2='12'/><line x1='8' x2='3' y1='12' y2='12'/><line x1='21' x2='16' y1='20' y2='20'/><line x1='12' x2='3' y1='20' y2='20'/><line x1='14' x2='14' y1='2' y2='6'/><line x1='8' x2='8' y1='10' y2='14'/><line x1='16' x2='16' y1='18' y2='22'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' x2='14' y1='4' y2='4'/><line x1='10' x2='3' y1='4' y2='4'/><line x1='21' x2='12' y1='12' y2='12'/><line x1='8' x2='3' y1='12' y2='12'/><line x1='21' x2='16' y1='20' y2='20'/><line x1='12' x2='3' y1='20' y2='20'/><line x1='14' x2='14' y1='2' y2='6'/><line x1='8' x2='8' y1='10' y2='14'/><line x1='16' x2='16' y1='18' y2='22'/></svg>") !important;
}

/* refresh — lucide/refresh-cw */
html body a.refresh::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>") !important;
}

/* unread filter — lucide/mail-open */
html body a.unread::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/><path d='m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/><path d='m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10'/></svg>") !important;
}

/* Pager: chevrons */
html body a.firstpage::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m11 17-5-5 5-5'/><path d='m18 17-5-5 5-5'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m11 17-5-5 5-5'/><path d='m18 17-5-5 5-5'/></svg>") !important;
}
html body a.prevpage::before,
html body a.prev::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>") !important;
}
html body a.nextpage::before,
html body a.next::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") !important;
}
html body a.lastpage::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 17 5-5-5-5'/><path d='m13 17 5-5-5-5'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 17 5-5-5-5'/><path d='m13 17 5-5-5-5'/></svg>") !important;
}

/* reply — lucide/reply */
html body a.reply::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 17 4 12 9 7'/><path d='M20 18v-2a4 4 0 0 0-4-4H4'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 17 4 12 9 7'/><path d='M20 18v-2a4 4 0 0 0-4-4H4'/></svg>") !important;
}

/* reply-all — lucide/reply-all */
html body a.reply-all::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 17 2 12 7 7'/><polyline points='12 17 7 12 12 7'/><path d='M22 18v-2a4 4 0 0 0-4-4H7'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 17 2 12 7 7'/><polyline points='12 17 7 12 12 7'/><path d='M22 18v-2a4 4 0 0 0-4-4H7'/></svg>") !important;
}

/* forward — lucide/forward */
html body a.forward::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 17 20 12 15 7'/><path d='M4 18v-2a4 4 0 0 1 4-4h12'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 17 20 12 15 7'/><path d='M4 18v-2a4 4 0 0 1 4-4h12'/></svg>") !important;
}

/* mark / flag — lucide/flag */
html body a.markmessage::before,
html body a.flag::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' x2='4' y1='22' y2='15'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' x2='4' y1='22' y2='15'/></svg>") !important;
}

/* "more" menu — lucide/more-horizontal */
html body a.more::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/></svg>") !important;
}

/* dropdown caret inside split buttons — chevron-down */
html body a.dropdown::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
  width: 14px !important;
  height: 14px !important;
}

/* print / download */
html body a.print::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect width='12' height='8' x='6' y='14'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect width='12' height='8' x='6' y='14'/></svg>") !important;
}
html body a.download::before,
html body a.export::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' x2='12' y1='15' y2='3'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' x2='12' y1='15' y2='3'/></svg>") !important;
}
html body a.import::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' x2='12' y1='3' y2='15'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' x2='12' y1='3' y2='15'/></svg>") !important;
}

/* contacts: add / new contact — lucide/user-plus */
html body a.addcontact::before,
html body a.add::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' x2='20' y1='8' y2='14'/><line x1='23' x2='17' y1='11' y2='11'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' x2='20' y1='8' y2='14'/><line x1='23' x2='17' y1='11' y2='11'/></svg>") !important;
}

/* external-link */
html body a.extwin::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>") !important;
}

/* headers (info) */
html body a.headers::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>") !important;
}

/* Search inputs — lucide/search on search-create icon & searchbar form */
html body form.searchbar::before {
  font-family: inherit !important;
  content: "" !important;
  background-color: currentColor !important;
  color: inherit !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-size: 16px 16px !important;
          mask-size: 16px 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* Folder tree expand caret — lucide/chevron-right.
 * Roundcube uses div.treetoggle::before for the expand caret. */
html body div.treetoggle::before,
html body .treetoggle::before {
  font-family: inherit !important;
  content: "" !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;  mask-position: center !important;
  -webkit-mask-size: contain !important;      mask-size: contain !important;
  width: 12px !important; height: 12px !important;
  display: inline-block !important;
}
html body div.treetoggle.expanded::before,
html body .treetoggle.expanded::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
}

/* Safety: hide any Icons-font character Roundcube inserts as ::after on
 * these same links (e.g. dropdown carets). */
html body a.compose::after,
html body a.mail::after,
html body a.contacts::after,
html body a.settings::after,
html body a.theme::after,
html body a.logout::after { font-family: inherit !important; }

/* v26.1 — icon sizing specificity fix for #taskmenu rail + searchbar */
html body #taskmenu a.compose::before,
html body #taskmenu a.mail::before,
html body #taskmenu a.contacts::before,
html body #taskmenu a.settings::before,
html body #taskmenu a.theme::before,
html body #taskmenu a.logout::before,
html body #taskmenu a.button::before {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 auto 4px auto !important;
  background-color: currentColor !important;
  opacity: 0.92 !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-size: contain !important;
          mask-size: contain !important;
}

/* Folder list: Roundcube wraps folders in `li.mailbox.inbox > a::before`.
 * "Deleted Messages" arrives as a plain .mailbox (no .trash) — treat any
 * folder whose href contains known IMAP names. */
html body ul.treelist li.mailbox[class*="Deleted"] > a::before,
html body ul.treelist li.mailbox > a[href*="_mbox=Deleted"]::before,
html body ul.treelist li.mailbox > a[href*="_mbox=Trash"]::before {
  content: "" !important;
  font-family: inherit !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;  mask-position: center !important;
  -webkit-mask-size: contain !important;      mask-size: contain !important;
  width: 18px !important; height: 18px !important;
  display: inline-block !important;
}

/* Folder fallback — ANY mailbox entry without a matching class-icon
 * should still get an inbox-ish folder glyph rather than a broken font char. */
html body ul.treelist li.mailbox > a::before {
  font-family: inherit !important;
}
html body ul.treelist li.mailbox:not(.inbox):not(.sent):not(.drafts):not(.trash):not(.junk):not(.archive) > a::before {
  content: "" !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;  mask-position: center !important;
  -webkit-mask-size: contain !important;      mask-size: contain !important;
  width: 18px !important; height: 18px !important;
  display: inline-block !important;
}

/* Searchbar form ::before — selector form.searchbar.menu inside toolbar */
html body form[role="search"]::before,
html body .searchbar::before,
html body form.searchbar::before {
  font-family: inherit !important;
  content: "" !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;  mask-position: center !important;
  -webkit-mask-size: 16px 16px !important;   mask-size: 16px 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  color: inherit !important;
}

/* Dropbutton .dropdown carets are usually siblings — use small size */
html body #taskmenu a.dropdown::before,
html body a.dropdown::before {
  width: 12px !important;
  height: 12px !important;
}

/* v26.2 — polish: dedupe search icon, tighten folder icon alignment,
 * ensure folder fallback doesn't hijack .inbox/.sent etc. already styled. */

/* Reset the generic form[role=search]::before we added (it doubles up with
 * form.searchbar::before). Roundcube's searchbar is <form class="searchbar">,
 * and Elastic already includes a .search-icon (.searchbar::before). Keep
 * only the most specific selector. */
html body form[role="search"]::before { display: none !important; content: none !important; }
html body .searchbar::before { display: none !important; content: none !important; }
html body form.searchbar::before {
  display: inline-block !important;
  content: "" !important;
  font-family: inherit !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;  mask-position: center !important;
  -webkit-mask-size: contain !important;      mask-size: contain !important;
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  opacity: 0.7;
}