/*!
 * Medialix Mail 3: Roundcube skin layer (on top of Elastic)
 * Desktop (3.0): white sidebar and header, quick settings (gear), Row or Column layout — see "Medialix Mail 3" below.
 * Desktop: night top bar (apps, search, account) · light icon rail · folder pane with "New mail" ·
 * light toolbars · avatar list with day groups and filter chips · reading pane card.
 * Phone: dark app bar · chips · avatar rows · bottom tabs · compose button.
 */

@font-face { font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --mx-night: #1b0a16;
  --mx-night-2: #2a1222;
  --mx-brand: #c60035;
  --mx-brand-dark: #a3002c;
  --mx-brand-soft: rgba(198, 0, 53, .08);
  --mx-brand-ink: #c60035;
  --mx-canvas: #f5f5f7;
  --mx-side: #efeff3;
  --mx-card: #ffffff;
  --mx-sunk: #f4f4f6;
  --mx-hover: rgba(127, 127, 140, .1);
  --mx-line: #e2e3e9;
  --mx-text: #1d1e20;
  --mx-muted: #6d7081;
  --mx-radius: 18px;
  --mx-bar-h: 56px;
}
html.dark-mode {
  --mx-night: #0c060b;
  --mx-night-2: #1d0e18;
  --mx-brand-soft: rgba(255, 90, 130, .14);
  --mx-brand-ink: #ff7a9c;
  --mx-canvas: #121218;
  --mx-side: #16161d;
  --mx-card: #1b1b23;
  --mx-sunk: #22222c;
  --mx-hover: rgba(255, 255, 255, .06);
  --mx-line: #2c2c38;
  --mx-text: #ececf1;
  --mx-muted: #9b9daf;
}

body, button, input, optgroup, select, textarea, .popover, .ui-dialog, .ui-widget {
  font-family: 'DM Sans', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { color: var(--mx-text); -webkit-font-smoothing: antialiased; }
a { color: var(--mx-brand-ink); }
a:hover { color: var(--mx-brand-dark); }

/* =====================================================================
   Top bar (desktop and tablet ≥ 769px)
   ===================================================================== */
#mx-bar { display: none; }
body.mx-has-bar { background: var(--mx-night); }

@media (min-width: 769px) {
  #mx-bar {
    position: relative; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    flex: none; height: var(--mx-bar-h);
    padding: 0 14px 0 10px;
    color: #fff;
    background:
      radial-gradient(60% 140% at 100% 0%, rgba(198, 0, 53, .35), transparent 60%),
      var(--mx-night);
  }
  .mx-bar-btn {
    width: 40px; height: 40px; flex: none;
    display: inline-grid; place-items: center;
    border: 0; border-radius: 999px; background: transparent;
    color: rgba(255, 255, 255, .86) !important; cursor: pointer; text-decoration: none !important;
  }
  .mx-bar-btn:hover, .mx-bar-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff !important; }
  .mx-bar-btn:focus-visible, .mx-avatar-btn:focus-visible { outline: 2px solid #ff7a9c; outline-offset: 2px; }
  .mx-bar-brand {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    margin-right: 6px; color: #fff !important; text-decoration: none !important;
    font-size: 18px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  }
  .mx-bar-brand img { width: 30px; height: 30px; border-radius: 8px; }
  .mx-bar-brand b { font-weight: 750; }
  .mx-theme-btn .mx-ic-sun { display: none; }
  html.dark-mode .mx-theme-btn .mx-ic-sun { display: block; }
  html.dark-mode .mx-theme-btn .mx-ic-moon { display: none; }

  /* The real Roundcube search box sits here on desktop (moved by medialix.js). */
  .mx-bar-search { flex: 0 1 620px; min-width: 0; margin: 0 auto 0 18px; }
  .mx-bar-search .searchbar {
    position: relative; display: flex; align-items: center;
    height: 40px; margin: 0 !important; padding: 0 6px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 999px !important;
    background: rgba(255, 255, 255, .08) !important;
  }
  .mx-bar-search .searchbar:focus-within { background: #fff !important; border-color: #fff !important; }
  .mx-bar-search .searchbar form { flex: 1; min-width: 0; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .mx-bar-search .searchbar input {
    width: 100%; height: 38px !important; padding: 0 12px 0 40px !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    background: transparent !important; color: #fff !important; font-size: 14.5px;
  }
  .mx-bar-search .searchbar input::placeholder { color: rgba(255, 255, 255, .62); }
  .mx-bar-search .searchbar:focus-within input { color: #1d1e20 !important; }
  .mx-bar-search .searchbar:focus-within input::placeholder { color: #8a8c99; }
  .mx-bar-search .searchbar a.button { color: rgba(255, 255, 255, .78) !important; background: transparent !important; border: 0 !important; }
  .mx-bar-search .searchbar:focus-within a.button { color: #6d7081 !important; }
  .mx-bar-search .searchbar a.button.search { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); }
  .mx-bar-search .searchbar a.button.unread { display: none !important; }
  .mx-bar-search .searchbar a.button:hover { color: #fff !important; }
  .mx-bar-search .searchbar:focus-within a.button:hover { color: var(--mx-brand) !important; }
  .mx-bar-search .searchbar .searchoptions {
    position: absolute !important; top: 46px !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-height: 70vh; overflow: auto;
    border: 1px solid var(--mx-line); border-radius: 18px; background: var(--mx-card) !important; color: var(--mx-text);
    box-shadow: 0 24px 48px -16px rgba(16, 24, 40, .35); padding: 14px 16px; z-index: 70;
  }
  body.mx-no-search .mx-bar-search { visibility: hidden; }

  .mx-bar-right { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
  .mx-avatar-btn { margin-left: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
  .mx-me-initial {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--mx-brand); color: #fff; font-weight: 700; font-size: 14px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .28);
  }
  .mx-me-big { width: 44px; height: 44px; font-size: 16px; box-shadow: none; }

  .mx-pop {
    position: absolute; top: calc(var(--mx-bar-h) - 4px); left: 10px; z-index: 80;
    width: 340px; padding: 12px;
    border: 1px solid var(--mx-line); border-radius: 18px;
    background: var(--mx-card); color: var(--mx-text);
    box-shadow: 0 24px 48px -16px rgba(16, 24, 40, .35);
  }
  .mx-pop[hidden] { display: none; }
  .mx-pop-right { left: auto; right: 12px; width: 280px; }
  .mx-pop-title { margin: 2px 6px 10px; font-size: 13px; font-weight: 700; color: var(--mx-muted); }
  .mx-me-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--mx-line); }
  .mx-me-head div { display: grid; min-width: 0; }
  .mx-me-head b { font-size: 12px; color: var(--mx-muted); font-weight: 600; }
  .mx-me-head span:not(.mx-me-initial) { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-pop-right > a { display: block; padding: 10px 12px; border-radius: 12px; color: var(--mx-text) !important; text-decoration: none !important; font-weight: 500; }
  .mx-pop-right > a:hover, .mx-pop-right > a:focus { background: var(--mx-sunk); }
  .mx-pop-right > a.mx-logout { color: var(--mx-brand-ink) !important; font-weight: 650; margin-top: 4px; border-top: 1px solid var(--mx-line); border-radius: 0 0 12px 12px; }

  /* Canvas under the bar: rounded light sheet, like the Medialix dashboards. */
  body.mx-has-bar > #layout {
    height: calc(100% - var(--mx-bar-h)) !important;
    width: auto !important;
    margin: 0 10px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: var(--mx-side);
  }
}

/* =====================================================================
   Desktop panes (≥ 769px)
   ===================================================================== */
@media (min-width: 769px) {
  /* --- Icon rail --- */
  body.mx-has-bar #layout-menu {
    background: var(--mx-side) !important;
    border-right: 1px solid var(--mx-line) !important;
  }
  body.mx-has-bar #layout-menu .popover-header { display: none !important; }
  body.mx-has-bar #taskmenu { padding-top: 10px; }
  body.mx-has-bar #taskmenu a {
    margin: 2px 8px; border-radius: 14px;
    color: var(--mx-muted) !important; background: transparent !important;
    font-size: 11.5px; font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
  }
  body.mx-has-bar #taskmenu a:before { color: inherit; }
  body.mx-has-bar #taskmenu a:hover { background: var(--mx-hover) !important; color: var(--mx-text) !important; }
  body.mx-has-bar #taskmenu a.selected { background: var(--mx-brand-soft) !important; color: var(--mx-brand-ink) !important; }
  body.mx-has-bar #taskmenu a.compose { display: none; }
  body.mx-has-bar #taskmenu a.theme { display: none; }
  body.mx-has-bar #taskmenu a.logout { color: var(--mx-muted) !important; }
  body.mx-has-bar #taskmenu a.logout:hover { color: var(--mx-brand-ink) !important; }

  /* --- Headers become light toolbars --- */
  body.mx-has-bar #layout > div > .header {
    background: var(--mx-card) !important; color: var(--mx-text) !important;
    border-bottom: 1px solid var(--mx-line) !important;
  }
  body.mx-has-bar #layout > #layout-sidebar > .header { background: var(--mx-side) !important; border-bottom: 0 !important; }
  body.mx-has-bar #layout > div > .header .header-title { color: var(--mx-text); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
  body.mx-has-bar #layout > div > .header a.button,
  body.mx-has-bar #layout > div > .header a.button:before { color: var(--mx-text) !important; }
  body.mx-has-bar #layout > div > .header a.button.disabled,
  body.mx-has-bar #layout > div > .header a.button.disabled:before { color: var(--mx-muted) !important; opacity: .55; }
  body.mx-has-bar #layout > div > .header a.button:not(.disabled):hover { background: var(--mx-hover) !important; border-radius: 10px; }
  body.mx-has-bar #layout > div > .header .dropbutton:after { color: var(--mx-muted) !important; }

  /* Toolbar buttons: icon + label side by side (ribbon style) */
  body.mx-has-bar #layout > div > .header { display: flex; align-items: center; }
  body.mx-has-bar #layout > div > .header .menu.toolbar { display: flex !important; align-items: center; gap: 2px; height: auto; margin: 0; }
  body.mx-has-bar #layout > div > .header .menu.toolbar li { display: inline-flex; height: auto; }
  body.mx-has-bar #layout > div > .header .menu.toolbar a,
  body.mx-has-bar #layout > div > .header a.toolbar-button {
    display: inline-flex !important; float: none !important; align-items: center; gap: 7px;
    height: 36px !important; min-width: 0 !important; max-width: none !important; padding: 0 10px !important; margin: 0 !important;
    border-radius: 10px; line-height: 1 !important; color: var(--mx-text) !important; white-space: nowrap;
  }
  body.mx-has-bar #layout > div > .header .menu.toolbar a:before,
  body.mx-has-bar #layout > div > .header a.toolbar-button:before {
    display: inline-block !important; height: auto !important; width: auto !important; margin: 0 !important;
    font-size: 15px !important; line-height: 1 !important; float: none !important; color: inherit !important;
  }
  body.mx-has-bar #layout > div > .header .menu.toolbar a span.inner,
  body.mx-has-bar #layout > div > .header a.toolbar-button span.inner { display: inline !important; position: static !important; font-size: 13.5px; font-weight: 550; }
  body.mx-has-bar #layout > div > .header .menu.toolbar a.disabled,
  body.mx-has-bar #layout > div > .header a.toolbar-button.disabled { color: var(--mx-muted) !important; opacity: .5; }
  body.mx-has-bar #layout > div > .header .menu.toolbar a:not(.disabled):hover,
  body.mx-has-bar #layout > div > .header a.toolbar-button:not(.disabled):hover { background: var(--mx-hover) !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton { display: inline-flex; align-items: center; border-radius: 10px; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a.dropdown { padding: 0 4px !important; margin-left: -4px !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a.dropdown:before { font-size: 10px !important; line-height: 1 !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a.dropdown span.inner { display: none !important; }
  body.mx-has-bar #layout-content > .header .menu.toolbar a.compose { display: none !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar { overflow: hidden; flex-wrap: nowrap; min-width: 0; }
  body.mx-has-bar #layout-content > .header { justify-content: flex-start; padding-left: 10px; }
  body.mx-has-bar #layout-content > .header .menu.toolbar { margin: 0 auto 0 0 !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar > .spacer { width: 1px; height: 22px; margin: 0 6px; background: var(--mx-line); }
  body.mx-has-bar #layout-menu { position: relative; }
  body.mx-has-bar #taskmenu .special-buttons { background: var(--mx-side) !important; width: 100%; padding-bottom: 6px; }
  /* Elastic clones list buttons into the reading-pane toolbar for small screens; keep them hidden here. */
  html.layout-large body.mx-has-bar #layout > div > .header .menu.toolbar a.hidden-large,
  html.layout-large body.mx-has-bar #layout > div > .header .menu.toolbar a.hidden-big,
  html.layout-normal body.mx-has-bar #layout > div > .header .menu.toolbar a.hidden-big,
  html.layout-normal body.mx-has-bar #layout > div > .header .menu.toolbar a.hidden-normal,
  body.mx-has-bar #layout > div > .header .menu.toolbar a.hidden { display: none !important; }

  /* --- Folder pane --- */
  body.mx-has-bar #layout-sidebar { background: var(--mx-side) !important; border-right: 1px solid var(--mx-line) !important; }
  body.mx-has-bar #layout-sidebar > .scroller,
  body.mx-has-bar #layout-sidebar > .footer { background: var(--mx-side) !important; border: 0 !important; }
  body.mx-has-bar #layout-sidebar .header .header-title.username { text-align: left; padding-left: 8px;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--mx-muted) !important;
  }
  .mx-newmail-wrap { padding: 4px 14px 10px; background: var(--mx-side); }
  a.mx-newmail {
    display: flex !important; align-items: center; justify-content: center; gap: 9px;
    height: 46px; border-radius: 999px; background: var(--mx-brand); color: #fff !important;
    font-weight: 700; font-size: 15px; text-decoration: none !important;
    box-shadow: 0 10px 22px -12px rgba(198, 0, 53, .9);
    transition: background-color .15s ease, transform .15s ease;
  }
  a.mx-newmail:before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  a.mx-newmail:hover { background: var(--mx-brand-dark); transform: translateY(-1px); }
  a.mx-newmail.disabled { opacity: .6; }
  a.mx-newmail .inner { display: inline !important; position: static !important; }

  /* --- Message list column --- */
  body.mx-has-bar #layout-list { background: var(--mx-card) !important; border-right: 1px solid var(--mx-line) !important; }
  body.mx-has-bar #layout-list > :not(.header) { background: var(--mx-card) !important; }
  body.mx-has-bar #layout-list > .scroller { padding: 0 !important; border: 0 !important; }
  body.mx-has-bar #layout-list > .footer { border-top: 1px solid var(--mx-line) !important; }

  /* --- Reading pane --- */
  body.mx-has-bar #layout-content { background: var(--mx-canvas) !important; }
  body.mx-has-bar #layout-content > :not(.header) { background: var(--mx-canvas) !important; }
  body.mx-has-bar #layout-content > .iframe-wrapper { padding: 12px !important; }
  body.mx-has-bar #layout-content > .iframe-wrapper > iframe {
    background: var(--mx-card); border-radius: 16px; box-shadow: 0 0 0 1px var(--mx-line);
  }
  body.mx-has-bar #layout-content > .content,
  body.mx-has-bar #layout-content > .formcontent { padding: 16px 20px; }

  /* Hide the bottom tabs on desktop */
  #mx-tabs { display: none !important; }
}

/* =====================================================================
   Folder list (all sizes)
   ===================================================================== */
#layout-sidebar > .scroller .listing li,
#layout-sidebar > .scroller .listing li a { color: var(--mx-text); }
#layout-sidebar > .scroller .listing li { background: transparent !important; border: 0 !important; }
#layout-sidebar > .scroller .listing li > a { margin: 1px 10px; border-radius: 10px; }
#layout-sidebar > .scroller .listing tr td { border-radius: 10px; }
#layout-sidebar > .scroller .listing li:hover > a { background: var(--mx-hover); }
#layout-sidebar > .scroller .listing li.selected > a,
#layout-sidebar > .scroller .listing tr.selected td {
  background: var(--mx-card) !important; color: var(--mx-text) !important; font-weight: 650;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px rgba(16, 24, 40, .03);
}
#layout-sidebar > .scroller .listing li.selected > a:before { color: var(--mx-brand-ink) !important; }
#layout-sidebar > .scroller .listing li a:before { color: var(--mx-muted); }
.folderlist li.mailbox .unreadcount {
  background: transparent !important; color: var(--mx-brand-ink) !important;
  font-weight: 750; font-size: .82rem; margin-right: 14px !important; padding: 0 !important;
}
.folderlist li.mailbox.unread > a { font-weight: 650; }
#layout-sidebar .quota-widget { color: var(--mx-muted); padding: 6px 4px; }
#layout-sidebar .quota-widget .count { font-size: 12px; }
#layout-sidebar .quota-widget .bar { border-radius: 99px; overflow: hidden; background: var(--mx-line) !important; height: 6px; }
#layout-sidebar .quota-widget .bar .value { background: var(--mx-brand) !important; }

/* =====================================================================
   Message list rows (all sizes)
   ===================================================================== */
.mx-chips { display: flex; gap: 6px; padding: 10px 14px 8px; overflow-x: auto; scrollbar-width: none; background: var(--mx-card); flex: none; }
.mx-chips::-webkit-scrollbar { display: none; }
.mx-chips button {
  flex: none; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--mx-line); background: var(--mx-card); color: var(--mx-text);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.mx-chips button:hover { border-color: var(--mx-brand); color: var(--mx-brand-ink); }
.mx-chips button.on { background: var(--mx-night); border-color: var(--mx-night); color: #fff; }
html.dark-mode .mx-chips button.on { background: var(--mx-brand); border-color: var(--mx-brand); }

#messagelist { background: var(--mx-card); }
#messagelist tbody tr { background: var(--mx-card); }
#messagelist tbody tr td { border-color: var(--mx-line) !important; background: transparent; }
#messagelist tbody tr.message td.subject {
  position: relative;
  padding-left: 66px !important; padding-right: 14px !important;
  padding-top: 11px !important; padding-bottom: 11px !important;
}
#messagelist tbody tr:hover { background: var(--mx-sunk); }
#messagelist tbody tr.selected,
#messagelist tbody tr.selected:hover { background: var(--mx-brand-soft) !important; }
#messagelist tbody tr.selected td { background: transparent !important; color: var(--mx-text) !important; }
#messagelist tbody tr.focused > td { outline: 0; }
#messagelist tbody tr.unread td.subject { box-shadow: inset 3px 0 0 var(--mx-brand); }

.mx-av {
  position: absolute; left: 16px; top: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; user-select: none;
}
tr.mx-gstart td.subject .mx-av { top: calc(12px + 34px); }

.messagelist td.subject span.fromto { color: var(--mx-text); font-size: 14px; }
.messagelist td.subject span.date,
.messagelist td.subject span.size { color: var(--mx-muted); font-size: 12px; }
.messagelist td.subject span.subject a { color: var(--mx-muted); font-size: 13.5px; }
.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject span.fromto * { font-weight: 750 !important; color: var(--mx-text) !important; }
.messagelist tr.unread td.subject span.subject a { color: var(--mx-text); font-weight: 650; }
.messagelist tr.unread td.subject span.date { color: var(--mx-brand-ink); font-weight: 700; }
.messagelist tr.unread span.msgicon.status:before,
.messagelist span.msgicon.status.unread:before { color: var(--mx-brand) !important; }
.messagelist span.flagged:before, .messagelist tr.flagged td.flags span.flag span:before { color: #e11d48 !important; }
.messagelist tr.flagged td.subject span.fromto { color: var(--mx-text); }

/* Day groups: label drawn above the first row of each group */
#messagelist tbody tr.mx-gstart td.subject { padding-top: calc(11px + 34px) !important; }
#messagelist tbody tr.mx-gstart td.subject:before {
  content: attr(data-mx-group);
  position: absolute; left: 0; right: 0; top: 0; height: 34px;
  display: flex; align-items: center; padding-left: 18px;
  background: var(--mx-card); border-bottom: 1px solid var(--mx-line);
  color: var(--mx-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
#messagelist tbody tr.mx-gstart:first-child td.subject:before { border-top: 0; }
#messagelist tbody tr.mx-gstart td.flags { position: relative; padding-top: 34px !important; }
#messagelist tbody tr.mx-gstart td.flags:before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background: var(--mx-card); border-bottom: 1px solid var(--mx-line);
}
/* Plain read messages don't need a status dot */
.messagelist tr:not(.unread) span.msgicon.status:not(.replied):not(.forwarded):not(.deleted):before { visibility: hidden; }

/* Quick actions on hover (desktop pointer only) */
.mx-qa { display: none; }
@media (hover: hover) and (min-width: 769px) {
  .mx-qa {
    position: absolute; right: 8px; bottom: 8px;
    display: none; gap: 2px; padding: 2px;
    border-radius: 10px; background: var(--mx-card);
    box-shadow: 0 0 0 1px var(--mx-line), 0 6px 14px -8px rgba(16, 24, 40, .3);
  }
  #messagelist tbody tr:hover .mx-qa { display: inline-flex; }
  .mx-qa button {
    width: 30px; height: 28px; display: grid; place-items: center;
    border: 0; border-radius: 8px; background: transparent; color: var(--mx-muted); cursor: pointer;
  }
  .mx-qa button:hover { background: var(--mx-sunk); color: var(--mx-text); }
  .mx-qa button[data-a=del]:hover { color: #e11d48; }
  .mx-qa button.on { color: #e11d48; }
}

.pagenav, .pagenav .pagenav-text { color: var(--mx-muted); }

/* =====================================================================
   Content frames (message view, settings sections, contacts)
   ===================================================================== */
html.iframe body { background: var(--mx-card) !important; color: var(--mx-text); }
html.iframe #layout-content > .header { background: var(--mx-card) !important; color: var(--mx-text) !important; border-bottom: 1px solid var(--mx-line) !important; }
html.iframe #layout-content > .header .header-title { color: var(--mx-text); }
html.iframe #layout-content > .header a.button, html.iframe #layout-content > .header a.button:before { color: var(--mx-text) !important; }
html.iframe #layout-content, html.iframe #layout-content > :not(.header) { background: var(--mx-card) !important; }
#message-header { padding-top: 10px; }
#message-header > .subject { font-weight: 700; font-size: 1.35rem; letter-spacing: -.015em; color: var(--mx-text); }
#message-header .header-links a, #message-header .header a { color: var(--mx-brand-ink); }
#message-header .contactphoto, #message-header img.contactphoto { border-radius: 50% !important; }
#message-header .mx-av-lg {
  float: left; width: 3.25rem; height: 3.25rem; margin-right: 1rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1rem;
}
#messagebody { color: var(--mx-text); }
.attachmentslist li { border-radius: 12px !important; }

/* =====================================================================
   Buttons, forms, popovers, dialogs
   ===================================================================== */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary, .btn.btn-primary, button.btn-primary, .ui-dialog .ui-dialog-buttonpane .btn-primary {
  background-color: var(--mx-brand) !important; border-color: var(--mx-brand) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--mx-brand-dark) !important; border-color: var(--mx-brand-dark) !important; }
.btn-secondary { border-radius: 999px; }
.form-control, .custom-select, select.form-control, textarea.form-control, input.form-control { border-radius: 12px; border-color: var(--mx-line); }
.form-control:focus, .custom-select:focus { border-color: var(--mx-brand) !important; box-shadow: 0 0 0 4px var(--mx-brand-soft) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label:before { background-color: var(--mx-brand) !important; border-color: var(--mx-brand) !important; }
.popover { border: 1px solid var(--mx-line); border-radius: 16px; box-shadow: 0 20px 44px -14px rgba(16, 24, 40, .28); overflow: hidden; }
.popover .menu a, .popover .listing a { border-radius: 10px; }
.ui-dialog { border-radius: 20px !important; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { border-bottom: 1px solid var(--mx-line); }
.ui.alert, .alert { border-radius: 14px; }
#messagestack div { border-radius: 14px; }
.floating-action-buttons a.button {
  background: var(--mx-brand) !important; border-radius: 18px !important;
  box-shadow: 0 12px 26px -10px rgba(198, 0, 53, .85);
}

/* Compose: tidy, roomy editor */
.task-mail.action-compose #layout-content > .formcontent { background: var(--mx-card) !important; }
#compose-headers .form-control, #compose-subject { border-radius: 12px; }
#compose-attachments .btn { border-radius: 999px; }

/* =====================================================================
   2.1 — layout fixes
   ===================================================================== */
@media (min-width: 769px) {
  /* Sheet touches the window edges */
  body.mx-has-bar > #layout { margin: 0 !important; border-radius: 0 !important; }

  /* Folder / group / settings pane header: title left, ⋮ right, both centred */
  body.mx-has-bar #layout-sidebar > .header {
    display: flex !important; align-items: center; gap: 4px;
    height: 52px; padding: 0 6px 0 18px !important; text-align: left !important;
  }
  body.mx-has-bar #layout-sidebar > .header .header-title {
    flex: 1; min-width: 0; position: static !important; margin: 0 !important; padding: 0 !important;
    text-align: left !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.mx-has-bar #layout-sidebar > .header a.button.sidebar-menu,
  body.mx-has-bar #layout-sidebar > .header a.button.toolbar-menu-button {
    position: static !important; flex: none; width: 36px; height: 36px; margin: 0 !important; padding: 0 !important;
    display: grid !important; place-items: center; border-radius: 999px !important;
  }
  body.mx-has-bar #layout-sidebar > .header a.button.sidebar-menu:before { margin: 0 !important; line-height: 1 !important; font-size: 16px; }
  body.mx-has-bar #layout-sidebar > .header a.button.sidebar-menu .inner { display: none !important; }

  /* Toolbar buttons as pills */
  body.mx-has-bar #layout > div > .header .menu.toolbar { gap: 6px !important; padding: 0 2px; }
  body.mx-has-bar #layout > div > .header .menu.toolbar a,
  body.mx-has-bar #layout > div > .header a.toolbar-button {
    height: 34px !important; padding: 0 14px !important;
    border: 1px solid var(--mx-line) !important; border-radius: 999px !important;
    background: var(--mx-card) !important;
  }
  body.mx-has-bar #layout > div > .header .menu.toolbar a:not(.disabled):hover,
  body.mx-has-bar #layout > div > .header a.toolbar-button:not(.disabled):hover {
    border-color: var(--mx-brand) !important; color: var(--mx-brand-ink) !important; background: var(--mx-brand-soft) !important;
  }
  body.mx-has-bar #layout > div > .header .menu.toolbar a.disabled { opacity: .45 !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton {
    gap: 0; border: 1px solid var(--mx-line); border-radius: 999px; background: var(--mx-card); overflow: hidden;
  }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a:first-child { padding-right: 8px !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a.dropdown { padding: 0 10px 0 6px !important; margin: 0 !important; border-left: 1px solid var(--mx-line) !important; }
  body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton:hover { border-color: var(--mx-brand); }
  body.mx-has-bar #layout > div > .header .menu.toolbar > .spacer { display: none; }
  body.mx-has-bar #layout > #layout-list > .header { padding: 0 10px; }

  /* Search box icons: centred, same size */
  .mx-bar-search .searchbar a.button {
    position: relative; width: 34px; height: 34px; flex: none;
    display: grid !important; place-items: center; padding: 0 !important; margin: 0 !important;
    line-height: 1 !important; border-radius: 999px !important;
  }
  .mx-bar-search .searchbar a.button:before { margin: 0 !important; line-height: 1 !important; font-size: 15px !important; height: auto !important; width: auto !important; }
  .mx-bar-search .searchbar a.button .inner { display: none !important; }
  .mx-bar-search .searchbar a.button.search { position: absolute !important; left: 4px; top: 50%; transform: translateY(-50%); }
  .mx-bar-search .searchbar a.button.reset { order: 2; }
  .mx-bar-search .searchbar a.button.options { order: 3; }
  .mx-bar-search .searchbar a.button:hover { background: rgba(255, 255, 255, .1) !important; }
  .mx-bar-search .searchbar:focus-within a.button:hover { background: var(--mx-sunk) !important; }
  .mx-bar-search .searchbar input { padding-left: 42px !important; }
  .mx-bar-search .searchbar:not(.active) a.button.reset { display: none !important; }
}

/* Selected rows everywhere: soft crimson pill, not a solid red bar */
#layout-list .listing tr.selected td,
#layout-list .listing li.selected,
#layout-list .listing li.selected > a,
#layout-sidebar .listing li.selected > a,
#layout-sidebar .listing tr.selected td {
  background: var(--mx-brand-soft) !important; color: var(--mx-text) !important;
}
#layout-list .listing tr.selected td:before,
#layout-list .listing li.selected > a:before,
#layout-list .listing tr.selected td a:before { color: var(--mx-brand-ink) !important; }
#layout-list .listing tr.focused > td, #layout-list .listing li.focused { outline: 0 !important; }

/* =====================================================================
   Apps launcher (desktop popover, phone bottom sheet)
   ===================================================================== */
.mx-pop-backdrop { display: none; }
.mx-apps-pop {
  position: fixed; z-index: 90; top: calc(var(--mx-bar-h) - 4px); left: 8px;
  width: 560px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--mx-bar-h) - 12px); overflow: auto;
  padding: 16px; border: 1px solid var(--mx-line); border-radius: 20px;
  background: var(--mx-card); color: var(--mx-text);
  box-shadow: 0 28px 60px -18px rgba(16, 24, 40, .4);
}
.mx-apps-pop[hidden] { display: none; }
.mx-apps-search {
  display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 0 14px; padding: 0 14px;
  border: 1px solid var(--mx-line); border-radius: 999px; background: var(--mx-sunk); color: var(--mx-muted); cursor: text;
}
.mx-apps-search:focus-within { border-color: var(--mx-brand); box-shadow: 0 0 0 4px var(--mx-brand-soft); background: var(--mx-card); }
.mx-apps-search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--mx-text); font-size: 14.5px; }
.mx-apps-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.mx-apps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 6px; }
.mx-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px;
  border-radius: 16px; color: var(--mx-text) !important; text-decoration: none !important; text-align: center;
  transition: background-color .15s ease;
}
.mx-app[hidden] { display: none; }
.mx-app:hover, .mx-app:focus-visible { background: var(--mx-sunk); outline: 0; }
.mx-app-ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  box-shadow: 0 8px 18px -10px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease;
}
.mx-app:hover .mx-app-ic { transform: translateY(-2px); }
.mx-app-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.mx-apps-empty { margin: 8px 4px 0; color: var(--mx-muted); font-size: 13.5px; }
.mx-apps-create { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--mx-line); }
.mx-apps-create[hidden] { display: none; }
.mx-apps-create .mx-pop-title { margin: 0 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--mx-muted); }
.mx-apps-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mx-create {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 2px;
  border-radius: 14px; color: var(--mx-text) !important; text-decoration: none !important; font-size: 12px; font-weight: 600; text-align: center;
}
.mx-create:hover, .mx-create:focus-visible { background: var(--mx-sunk); outline: 0; }
.mx-create-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--mx-line); color: var(--mx-text); }
.mx-create-ic i {
  position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mx-brand); color: #fff; font-style: normal; font-weight: 800; font-size: 13px; line-height: 1;
  box-shadow: 0 0 0 2px var(--mx-card);
}
.mx-apps-all {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  margin-top: 14px; padding: 12px 18px; border-radius: 16px;
  color: #fff !important; text-decoration: none !important;
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 107, 139, .45), transparent 55%), linear-gradient(135deg, #1b0a16, #5a0320 55%, #c60035);
}
.mx-apps-all span { font-weight: 700; font-size: 15px; }
.mx-apps-all small { grid-column: 1; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.mx-apps-all svg { grid-row: 1 / span 2; grid-column: 2; transition: transform .15s ease; }
.mx-apps-all:hover svg { transform: translateX(3px); }

@media (max-width: 768px) {
  body.mx-pop-open .mx-pop-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(27, 10, 22, .5); }
  .mx-apps-pop {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 86vh;
    border-radius: 24px 24px 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: mx-sheet .22s ease-out;
  }
  .mx-apps-pop:before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--mx-line); }
  .mx-apps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-app-ic { width: 52px; height: 52px; border-radius: 16px; }
}
@keyframes mx-sheet { from { transform: translateY(40px); opacity: .4; } }

/* =====================================================================
   Contacts
   ===================================================================== */
#contacts-table tbody tr td.name {
  position: relative; display: flex !important; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 14px !important; font-weight: 600; font-size: 14px; color: var(--mx-text);
}
#contacts-table tbody tr td.name:before { display: none !important; }
#contacts-table tbody tr td.name .mx-av { position: static; flex: none; width: 36px; height: 36px; font-size: 13px; }
#contacts-table .mx-av-group { background: var(--mx-sunk) !important; color: var(--mx-muted) !important; }
#contacts-table tbody tr { border-bottom: 1px solid var(--mx-line); }
#directorylist li > a, #settings-menu li > a { border-radius: 10px; }
#directorylist ul.groups li a { padding-left: 2.6rem; }

/* Contact card and edit form (inside the frame) */
.task-addressbook .formcontent { max-width: 920px; }
.task-addressbook .contact-header {
  display: flex !important; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 4px 0 18px; padding: 22px; border: 1px solid var(--mx-line); border-radius: 22px;
  background:
    radial-gradient(90% 140% at 100% 0%, var(--mx-brand-soft), transparent 60%),
    var(--mx-card);
}
.task-addressbook .contact-photo { flex: none; float: none !important; margin: 0 !important; width: auto !important; }
.task-addressbook #contactpic {
  position: relative; width: 104px !important; height: 104px !important; border-radius: 50% !important; overflow: hidden;
  background: var(--mx-sunk) !important; border: 0 !important; box-shadow: 0 0 0 4px var(--mx-card), 0 0 0 5px var(--mx-line);
}
.task-addressbook #contactpic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: transparent !important; }
.task-addressbook .mx-has-initials #contactpic img { display: none; }
.task-addressbook .mx-av-xl {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--mx-brand); color: #fff; font-size: 36px; font-weight: 750; letter-spacing: .01em;
}
.task-addressbook #contactpic.droptarget:after {
  content: "Change photo"; position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 0 9px;
  background: rgba(27, 10, 22, .55); color: #fff; font-size: 11px; font-weight: 700; text-align: center;
  opacity: 0; transition: opacity .15s ease;
}
.task-addressbook #contactpic.droptarget:hover:after { opacity: 1; }
.task-addressbook #contactpic a.delete { z-index: 2; border-radius: 50% !important; background: var(--mx-card) !important; color: var(--mx-text) !important; }
.task-addressbook #contacthead { flex: 1; min-width: 240px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.task-addressbook #contacthead > legend { display: none; }
.task-addressbook #contacthead.readonly .source { order: 3; margin: 6px 0 0 !important; }
.task-addressbook #contacthead.readonly .source .namefield {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--mx-sunk); color: var(--mx-muted); font-size: 12px; font-weight: 600;
}
.task-addressbook #contacthead.readonly .names { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--mx-text); line-height: 1.2; margin: 0; }
.task-addressbook #contacthead.readonly .organization .namefield,
.task-addressbook #contacthead.readonly .row .namefield:not(.source) { color: var(--mx-muted); font-size: 15px; font-weight: 500; }
.task-addressbook #contacthead.readonly { display: flex !important; flex-direction: column; }
.task-addressbook #contacthead.readonly .row { margin: 0 !important; }
.mx-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; order: 4; }
.mx-pillbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--mx-line); background: var(--mx-card); color: var(--mx-text) !important;
  font-weight: 650; font-size: 14px; text-decoration: none !important;
}
.mx-pillbtn:hover { border-color: var(--mx-brand); color: var(--mx-brand-ink) !important; }
.mx-pillbtn.is-primary { background: var(--mx-brand); border-color: var(--mx-brand); color: #fff !important; }
.mx-pillbtn.is-primary:hover { background: var(--mx-brand-dark); color: #fff !important; }

/* Edit form: name fields as a clean grid */
.task-addressbook form #contacthead .names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.task-addressbook form #contacthead .row.form-group { display: flex; flex-direction: column; margin: 0 0 10px !important; }
.task-addressbook form #contacthead .row.form-group > label { max-width: none; flex: none; width: auto; padding: 0 0 5px !important; font-size: 12.5px; font-weight: 650; color: var(--mx-muted); }
.task-addressbook form #contacthead .row.form-group > div { max-width: none; flex: none; width: 100%; padding: 0 !important; }
.task-addressbook form #contacthead .add-field,
.task-addressbook form #contacthead select { margin-top: 2px; }

/* Tabs as pills */
.task-addressbook .nav-tabs, .task-settings .nav-tabs, html.iframe .nav-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; border: 0 !important; margin: 4px 0 14px !important;
}
.task-addressbook .nav-tabs .nav-link, .task-settings .nav-tabs .nav-link, html.iframe .nav-tabs .nav-link {
  height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px !important;
  border: 1px solid var(--mx-line) !important; background: var(--mx-card); color: var(--mx-text) !important; font-weight: 600;
}
.task-addressbook .nav-tabs .nav-link.active, .task-settings .nav-tabs .nav-link.active, html.iframe .nav-tabs .nav-link.active {
  background: var(--mx-night) !important; border-color: var(--mx-night) !important; color: #fff !important;
}
html.dark-mode .nav-tabs .nav-link.active { background: var(--mx-brand) !important; border-color: var(--mx-brand) !important; }

/* Field groups as cards */
.task-addressbook #contacttabs fieldset.contactfieldgroup,
.task-addressbook #contacttabs fieldset.propform > fieldset {
  margin: 0 0 12px !important; padding: 14px 16px 10px !important;
  border: 1px solid var(--mx-line) !important; border-radius: 18px; background: var(--mx-card);
}
.task-addressbook #contacttabs fieldset > legend {
  float: left; width: 100%; margin: 0 0 8px !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 750 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--mx-muted);
}
.task-addressbook #contacttabs fieldset > legend + * { clear: both; }
.task-addressbook #contacttabs .readonly .row.input-group { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; flex-wrap: nowrap; }
.task-addressbook #contacttabs .readonly .input-group-prepend .input-group-text,
.task-addressbook #contacttabs .readonly .input-group-prepend label.input-group-text {
  min-width: 90px; padding: 0 !important; border: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important;
  color: var(--mx-muted) !important; font-size: 13px; font-weight: 600;
}
.task-addressbook #contacttabs .readonly .contactfieldcontent { padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 15px; font-weight: 550; }
.task-addressbook #contacttabs .readonly .contactfieldcontent a { color: var(--mx-brand-ink); text-decoration: none; }

/* Edit rows: type pill + input + quiet delete button */
.task-addressbook #contacttabs .input-group { flex-wrap: nowrap; }
.task-addressbook #contacttabs .input-group > .input-group-prepend .custom-select,
.task-addressbook #contacttabs .input-group > .input-group-prepend select,
.task-addressbook #contacttabs .input-group > .input-group-prepend .input-group-text {
  min-width: 112px; border-radius: 999px 0 0 999px !important; background-color: var(--mx-sunk) !important;
  border: 1px solid var(--mx-line) !important; color: var(--mx-text); font-weight: 600;
}
.task-addressbook #contacttabs .input-group .form-control { border-color: var(--mx-line) !important; }
.task-addressbook #contacttabs .input-group > .form-control:not(:first-child):not(:last-child),
.task-addressbook #contacttabs .input-group > .input-group-prepend + .form-control { border-radius: 0 !important; }
.task-addressbook #contacttabs .input-group > .input-group-append .btn,
.task-addressbook #contacttabs .input-group > .input-group-append a.delete,
.task-addressbook #contacttabs .input-group a.contactfieldbutton {
  border-radius: 0 999px 999px 0 !important; background: var(--mx-card) !important; color: var(--mx-muted) !important;
  border: 1px solid var(--mx-line) !important; border-left: 0 !important; box-shadow: none !important;
}
.task-addressbook #contacttabs .input-group > .input-group-append .btn:hover,
.task-addressbook #contacttabs .input-group a.contactfieldbutton:hover { color: #e11d48 !important; background: rgba(225, 29, 72, .08) !important; }
.task-addressbook #contacttabs .composite, .task-addressbook #contacttabs .content.composite,
.task-addressbook #contacttabs .input-group .composite .form-control,
.task-addressbook #contacttabs .input-group .composite input { border-color: var(--mx-line) !important; }
.task-addressbook #contacttabs .input-group .composite { border-color: var(--mx-line) !important; }
.task-addressbook select.addfieldmenu, .task-addressbook .add-field select, .task-addressbook select[name^="_add"] {
  border-radius: 999px !important; height: 36px; padding: 0 34px 0 14px; font-weight: 600; border-color: var(--mx-line) !important;
}
.task-addressbook .formbuttons, .task-settings .formbuttons, html.iframe .formbuttons {
  position: sticky; bottom: 0; z-index: 3; margin: 16px -4px 0 !important; padding: 12px 4px !important;
  background: linear-gradient(to top, var(--mx-card) 75%, transparent); border: 0 !important;
}
.formbuttons .btn { height: 42px; padding: 0 22px; border-radius: 999px; font-weight: 700; }

/* =====================================================================
   Settings
   ===================================================================== */
#sections-table tbody tr td.section, #sections-table tbody tr td {
  padding-top: 11px !important; padding-bottom: 11px !important; font-weight: 600;
}
#layout-list #sections-table tbody tr td, #layout-list .listing.settings-list li { border-color: var(--mx-line) !important; }
#settings-menu li > a { font-weight: 600; }

/* Preference forms (inside the frame): fieldsets become cards */
html.iframe.task-settings, html.iframe body.task-settings { background: var(--mx-canvas) !important; }
body.task-settings .formcontent > fieldset,
body.task-settings form > fieldset,
body.task-settings .propform > fieldset,
body.task-settings #preferences-details fieldset,
body.task-settings .formcontent fieldset.main {
  margin: 0 0 14px !important; padding: 16px 18px 8px !important;
  border: 1px solid var(--mx-line) !important; border-radius: 20px; background: var(--mx-card);
}
body.task-settings fieldset > legend {
  float: left; width: 100%; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important;
  font-size: 16px !important; font-weight: 750 !important; letter-spacing: -.01em; color: var(--mx-text);
}
body.task-settings fieldset > legend + * { clear: both; }
body.task-settings table.propform { width: 100%; }
body.task-settings table.propform tr { border-bottom: 1px solid var(--mx-line); }
body.task-settings table.propform tr:last-child { border-bottom: 0; }
body.task-settings table.propform td { padding: 11px 0 !important; vertical-align: middle; }
body.task-settings table.propform td.title { width: 45%; padding-right: 18px !important; color: var(--mx-text); font-weight: 550; }
body.task-settings table.propform td .custom-select, body.task-settings table.propform td select.form-control,
body.task-settings table.propform td input.form-control { max-width: 380px; border-radius: 999px; height: 38px; }
body.task-settings table.propform td textarea.form-control { border-radius: 14px; }
body.task-settings label.skinselection {
  display: flex !important; align-items: center; gap: 16px; width: 100%; margin: 0 0 8px; padding: 12px 16px;
  border: 1px solid var(--mx-line); border-radius: 18px; cursor: pointer; transition: border-color .15s, background-color .15s;
}
body.task-settings label.skinselection:hover { border-color: var(--mx-brand); }
body.task-settings label.skinselection:has(input:checked) { border-color: var(--mx-brand); background: var(--mx-brand-soft); }
body.task-settings label.skinselection > span.skinitem { display: block; float: none; margin: 0; padding: 0; border: 0; width: auto; }
body.task-settings label.skinselection > span.skinitem:last-child { flex: 1; min-width: 0; line-height: 1.45; }
body.task-settings label.skinselection input[type=radio] { accent-color: var(--mx-brand); width: 18px; height: 18px; }
body.task-settings img.skinthumbnail {
  width: 112px !important; height: 70px !important; object-fit: cover; object-position: top left; border-radius: 12px;
  border: 1px solid var(--mx-line) !important; box-shadow: none !important; background: var(--mx-sunk);
}
body.task-settings .skinname { font-weight: 750; font-size: 15px; }
body.task-settings .skinauthor, body.task-settings .skinlicense { color: var(--mx-muted); font-size: 12.5px; }
body.task-settings .skinlicense a { color: var(--mx-brand-ink); }
body.task-settings label.skinselection br { display: none; }
body.task-settings label.skinselection .skinitem:last-child > span { display: block; }

/* =====================================================================
   Phone: folder drawer and slide-in menu
   ===================================================================== */
.mx-acct-card { display: none; }
@media (max-width: 768px) {
  /* Folder drawer */
  #layout-sidebar > .header .header-title.username { font-size: 0 !important; }
  #layout-sidebar > .header .header-title.username:after { content: "Folders"; font-size: 19px; color: #fff; font-weight: 700; }
  .mx-acct-card {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 18px 12px;
    background: var(--mx-card); border-radius: 22px 22px 0 0;
  }
  .mx-acct-card .mx-me-initial { box-shadow: none; }
  .mx-acct-card div { display: grid; min-width: 0; }
  .mx-acct-card b { font-size: 15px; font-weight: 700; color: var(--mx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-acct-card small { color: var(--mx-muted); font-size: 12.5px; }
  #layout-sidebar .mx-acct-card + .mx-newmail-wrap { display: block; padding: 4px 18px 12px; background: var(--mx-card); }
  #layout-sidebar a.mx-newmail {
    display: flex !important; align-items: center; justify-content: center; gap: 9px; height: 48px; border-radius: 999px;
    background: var(--mx-brand); color: #fff !important; font-weight: 700; font-size: 15.5px; text-decoration: none !important;
    box-shadow: 0 10px 22px -12px rgba(198, 0, 53, .9);
  }
  #layout-sidebar a.mx-newmail .inner { display: inline !important; position: static !important; }
  body.task-mail #layout-sidebar > .scroller { border-radius: 0 !important; padding: 4px 8px 12px !important; }
  #layout-sidebar > .scroller .listing li > a {
    min-height: 50px; display: flex !important; align-items: center; margin: 2px 6px !important; padding-left: 52px !important;
    border-radius: 14px; font-size: 15.5px; font-weight: 600;
  }
  #layout-sidebar > .scroller .listing li > a:before {
    left: 10px !important; width: 32px !important; height: 32px; border-radius: 10px; display: grid !important; place-items: center;
    background: var(--mx-sunk); color: var(--mx-muted) !important; font-size: 15px !important; line-height: 32px !important; top: 9px !important;
  }
  #layout-sidebar > .scroller .listing li.selected > a:before { background: var(--mx-brand); color: #fff !important; }
  #layout-sidebar .folderlist li.mailbox .unreadcount {
    min-width: 26px; height: 22px; padding: 0 8px !important; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--mx-brand-soft) !important; color: var(--mx-brand-ink) !important; top: 14px !important;
  }
  #layout-sidebar > .footer { background: var(--mx-card) !important; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* Slide-in menu (hamburger) */
  #layout-menu.popover {
    width: min(320px, 86vw) !important; height: 100% !important; top: 0 !important; border: 0 !important;
    border-radius: 0 24px 24px 0 !important; overflow: hidden; box-shadow: 0 0 60px rgba(27, 10, 22, .45) !important;
  }
  #layout-menu.popover .popover-header {
    display: flex !important; align-items: center; gap: 10px; height: 64px !important; padding: 0 12px 0 16px !important; text-align: left !important;
  }
  #layout-menu.popover .popover-header img#logo { width: 36px !important; height: 36px !important; max-width: 36px !important; margin: 0 !important; border-radius: 10px; }
  #layout-menu.popover .popover-header:after { content: "Medialix Mail"; order: 1; flex: 1; color: #fff; font-size: 18px; font-weight: 700; }
  #layout-menu.popover .popover-header a.cancel { order: 2; position: static !important; width: 40px; height: 40px; display: grid !important; place-items: center; border-radius: 999px; color: #fff !important; }
  #layout-menu.popover .popover-header a.cancel:before { color: #fff !important; }
  #layout-menu.popover #taskmenu { padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; height: calc(100% - 64px); }
  #layout-menu.popover #taskmenu a {
    display: flex !important; align-items: center; gap: 14px; height: 52px; margin: 0 !important; padding: 0 12px !important;
    border-radius: 14px !important; border: 0 !important; font-size: 16px; font-weight: 600; text-align: left !important;
  }
  #layout-menu.popover #taskmenu a:before {
    width: 36px; height: 36px; border-radius: 11px; display: grid !important; place-items: center; margin: 0 !important; flex: none;
    background: var(--mx-sunk); color: var(--mx-muted); font-size: 16px !important; line-height: 36px !important;
  }
  #layout-menu.popover #taskmenu a.selected:before { background: var(--mx-brand); color: #fff !important; }
  #layout-menu.popover #taskmenu a.compose { background: var(--mx-brand) !important; color: #fff !important; justify-content: center; margin-bottom: 8px !important; }
  #layout-menu.popover #taskmenu a.compose:before { background: transparent; color: #fff !important; width: auto; }
  #layout-menu.popover #taskmenu .special-buttons {
    position: static !important; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mx-line);
    display: flex; flex-direction: column; gap: 2px; background: transparent !important; width: 100%;
  }
  #layout-menu.popover #taskmenu .special-buttons a { height: 46px; font-size: 15px; }
  #layout-menu.popover #taskmenu a.logout, #layout-menu.popover #taskmenu a.logout:before { color: #e11d48 !important; }

  /* Apps tab in the bottom bar */
  #mx-tabs button.mx-tab-apps {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; color: var(--mx-muted); font-size: 11.5px; font-weight: 650; cursor: pointer;
  }
  #mx-tabs button.mx-tab-apps[aria-expanded="true"] { color: var(--mx-brand-ink); }
}
.task-addressbook .mx-av-xl.is-empty { background: var(--mx-sunk) !important; color: var(--mx-muted); font-weight: 400; font-size: 42px; }

/* Shared pieces used on phone too */
.mx-me-initial {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--mx-brand); color: #fff; font-weight: 700; font-size: 14px;
}
.mx-me-big { width: 44px !important; height: 44px !important; font-size: 16px !important; }
a.mx-newmail:before {
  content: ""; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 768px) {
  #layout-menu.popover .popover-header { line-height: 1.2 !important; }
  #layout-menu.popover .popover-header:after { white-space: nowrap; line-height: 1.2; }
  #layout-sidebar > .scroller .listing li > a { padding-left: 14px !important; gap: 12px; }
  #layout-sidebar > .scroller .listing li > a:before { position: static !important; flex: none; margin: 0 !important; }
  #layout-sidebar .folderlist li.mailbox .unreadcount { position: absolute; right: 12px; top: 50% !important; transform: translateY(-50%); }
  #layout-sidebar > .scroller .listing li { position: relative; }
}
.mx-av, .mx-av-lg, .mx-av-xl, .mx-me-initial { line-height: 1 !important; }
#layout-menu.popover .popover-header a.cancel { margin-left: auto; align-self: center; }

/* =====================================================================
   2.2 — toolbar lines, bigger rail, dropdowns, compose
   ===================================================================== */
/* No list borders under toolbar pills */
#layout .header .menu.toolbar li,
#layout .header .menu.toolbar.listing li,
.menu.toolbar.listing li { border: 0 !important; box-shadow: none !important; background: transparent !important; }

/* Desktop rail: bigger icons and labels */
@media (min-width: 769px) {
  body.mx-has-bar #layout-menu { flex: 0 0 86px !important; width: 86px !important; min-width: 86px !important; }
  body.mx-has-bar #taskmenu a {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 68px; margin: 3px 8px !important; padding: 8px 2px !important;
    font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.15 !important;
  }
  body.mx-has-bar #taskmenu a:before { font-size: 21px !important; height: auto !important; line-height: 1 !important; margin: 0 !important; }
  body.mx-has-bar #taskmenu a .inner { display: block !important; position: static !important; font-size: 12.5px !important; font-weight: 650; }
  body.mx-has-bar #taskmenu .special-buttons a { min-height: 60px; }
}

/* Every dropdown menu (popovers) */
.popover {
  padding: 6px !important; border: 1px solid var(--mx-line) !important; border-radius: 18px !important;
  background: var(--mx-card) !important; color: var(--mx-text) !important;
  box-shadow: 0 24px 50px -16px rgba(16, 24, 40, .35), 0 2px 6px rgba(16, 24, 40, .06) !important;
}
html.dark-mode .popover { box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .7) !important; }
.popover > .arrow { display: none !important; }
.popover .popover-body { padding: 0 !important; background: transparent !important; }
.popover .popover-header { border-radius: 12px 12px 0 0; }
.popover ul.menu.listing li, .popover ul.listing li { border: 0 !important; background: transparent !important; }
.popover ul.menu.listing li.separator { height: 1px; margin: 5px 8px; background: var(--mx-line) !important; }
.popover ul.menu.listing li a, .popover ul.listing li > a {
  display: flex !important; align-items: center; gap: 12px; min-height: 42px; margin: 1px 0;
  padding: 0 14px 0 8px !important; border-radius: 12px !important;
  color: var(--mx-text) !important; font-size: 14px; font-weight: 550; text-decoration: none !important; white-space: nowrap;
}
.popover ul.menu.listing li a:before, .popover ul.listing li > a:before {
  position: static !important; flex: none; width: 30px !important; height: 30px; margin: 0 !important;
  display: grid !important; place-items: center; border-radius: 9px;
  background: var(--mx-sunk); color: var(--mx-muted) !important; font-size: 13px !important; line-height: 30px !important;
  transition: background-color .15s ease, color .15s ease;
}
.popover ul.menu.listing li a:not(.disabled):hover, .popover ul.menu.listing li a:not(.disabled):focus,
.popover ul.listing li > a:not(.disabled):hover { background: var(--mx-brand-soft) !important; color: var(--mx-brand-ink) !important; }
.popover ul.menu.listing li a:not(.disabled):hover:before, .popover ul.listing li > a:not(.disabled):hover:before { background: var(--mx-brand); color: #fff !important; }
.popover ul.menu.listing li a.disabled, .popover ul.listing li > a.disabled { opacity: .45; }
.popover ul.menu.listing li a.selected, .popover ul.listing li > a.selected { color: var(--mx-brand-ink) !important; font-weight: 700; }
/* Menus whose items have no icon (e.g. Cc / Bcc) */
#headers-menu ul.menu li a:before, .popover ul.menu li a.recipient:before { display: none !important; }
#headers-menu ul.menu li a { padding-left: 14px !important; }
/* Forms inside popovers (search options, list options) */
.popover .formcontent, .popover .propform { color: var(--mx-text); }
.popover .formbuttons { background: transparent !important; position: static !important; }

/* ---------- Compose ---------- */
body.task-mail.action-compose #layout-content > .header { background: var(--mx-card) !important; }
body.action-compose #compose-content { background: var(--mx-canvas) !important; }
body.action-compose #compose-content > form.formcontent { max-width: 1040px; margin: 0 auto; padding: 18px 22px 8px !important; }
/* Header fields: one card, a row per field, label on the left */
body.action-compose #compose-headers {
  margin: 0 0 14px; padding: 2px 6px; border: 1px solid var(--mx-line); border-radius: 20px; background: var(--mx-card);
}
body.action-compose #compose-headers .form-group.row {
  display: flex; align-items: center; flex-wrap: nowrap; margin: 0 !important; padding: 6px 8px;
  border-bottom: 1px solid var(--mx-line);
}
body.action-compose #compose-headers .form-group.row:last-child { border-bottom: 0; }
body.action-compose #compose-headers .form-group.row > label {
  flex: 0 0 86px; max-width: 86px; padding: 0 0 0 6px !important; margin: 0;
  color: var(--mx-muted); font-size: 13.5px; font-weight: 650;
}
body.action-compose #compose-headers .form-group.row > div { flex: 1; max-width: none; min-width: 0; padding: 0 !important; }
body.action-compose #compose-headers .form-control,
body.action-compose #compose-headers .custom-select,
body.action-compose #compose-headers ul.recipient-input {
  min-height: 40px; border: 0 !important; border-radius: 12px !important; background-color: transparent !important;
  box-shadow: none !important; color: var(--mx-text); font-size: 15px; padding-left: 8px;
}
body.action-compose #compose-headers .form-control:focus,
body.action-compose #compose-headers ul.recipient-input.focus { background-color: var(--mx-sunk) !important; }
body.action-compose #compose-subject { font-size: 16px !important; font-weight: 650; }
/* Recipient chips */
body.action-compose ul.recipient-input li.recipient {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 4px 6px 4px 0; padding: 0 6px 0 12px;
  border-radius: 999px; background: var(--mx-brand-soft) !important; border: 1px solid transparent !important;
  color: var(--mx-text); font-size: 13.5px; font-weight: 600;
}
body.action-compose ul.recipient-input li.recipient a.button { border-radius: 999px; color: var(--mx-muted) !important; }
/* Small round icon buttons next to fields (identities, add contact, Cc/Bcc) */
body.action-compose #compose-headers .input-group-append .input-group-text,
body.action-compose #compose-headers .input-group > a.input-group-text {
  width: 36px; height: 36px; margin-left: 4px; padding: 0 !important; display: grid !important; place-items: center;
  border: 1px solid var(--mx-line) !important; border-radius: 999px !important;
  background: var(--mx-card) !important; color: var(--mx-muted) !important;
}
body.action-compose #compose-headers .input-group-append .input-group-text:before { margin: 0 !important; color: inherit !important; font-size: 14px; }
body.action-compose #compose-headers .input-group-append .input-group-text:hover { border-color: var(--mx-brand) !important; color: var(--mx-brand-ink) !important; background: var(--mx-brand-soft) !important; }
body.action-compose #compose-headers .input-group-append .input-group-text .inner { display: none; }
body.action-compose #compose-headers .input-group { align-items: center; flex-wrap: nowrap; }
/* Message body: a clean writing card */
body.action-compose #composebodycontainer {
  position: relative; border: 1px solid var(--mx-line); border-radius: 20px; background: var(--mx-card); overflow: hidden;
}
body.action-compose #composebodycontainer .editor-toolbar,
body.action-compose #composebodycontainer .mce-top-part, body.action-compose #composebodycontainer .tox .tox-editor-header {
  background: var(--mx-card) !important; border: 0 !important; border-bottom: 1px solid var(--mx-line) !important; box-shadow: none !important;
}
body.action-compose #composebodycontainer .editor-toolbar { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 10px; position: relative; top: auto; left: auto; right: auto; }
body.action-compose #composebodycontainer .editor-toolbar a {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--mx-muted) !important; background: transparent !important;
}
body.action-compose #composebodycontainer .editor-toolbar a:hover { background: var(--mx-sunk) !important; color: var(--mx-text) !important; }
body.action-compose #composebodycontainer .editor-toolbar a:after { content: "Switch to HTML"; margin-left: 4px; }
body.action-compose #composebodycontainer .editor-toolbar a { width: auto; padding: 0 12px; gap: 8px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; border: 1px solid var(--mx-line); border-radius: 999px; }
body.action-compose #composebody {
  min-height: 46vh; padding: 18px 22px !important; border: 0 !important; border-radius: 0 !important; background: var(--mx-card) !important;
  color: var(--mx-text); font-size: 15px; line-height: 1.6; box-shadow: none !important;
}
body.action-compose #composebodycontainer .tox-tinymce { border: 0 !important; border-radius: 0 !important; }
/* Bottom bar: Send + save + new window */
body.action-compose #compose-content > .formbuttons {
  position: sticky; bottom: 0; max-width: 1040px; margin: 0 auto !important; padding: 12px 22px 16px !important;
  display: flex; align-items: center; gap: 10px; background: linear-gradient(to top, var(--mx-canvas) 70%, transparent) !important; border: 0 !important;
}
body.action-compose #compose-content > .formbuttons .btn.send {
  height: 46px; padding: 0 28px 0 22px; border-radius: 999px; font-size: 15.5px; font-weight: 750;
  display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 12px 24px -12px rgba(198, 0, 53, .9);
}
body.action-compose #compose-content > .formbuttons .float-right { margin-left: auto; float: none !important; }
body.action-compose #compose-content > .formbuttons a.extwin {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--mx-line); border-radius: 999px;
  color: var(--mx-text) !important; background: var(--mx-card); text-decoration: none !important; font-weight: 600;
}
body.action-compose #compose-content > .formbuttons a.extwin:hover { border-color: var(--mx-brand); color: var(--mx-brand-ink) !important; }
/* Options & attachments panel */
body.action-compose #layout-sidebar { background: var(--mx-side) !important; }
body.action-compose #layout-sidebar > .header .header-title { font-size: 16px !important; font-weight: 750 !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--mx-text) !important; }
body.action-compose #layout-sidebar > .scroller { padding: 4px 14px 16px !important; background: var(--mx-side) !important; }
body.action-compose #compose-attachments {
  margin: 0 0 14px; padding: 18px 16px; border: 1.5px dashed var(--mx-line) !important; border-radius: 20px; background: var(--mx-card) !important; text-align: center;
}
body.action-compose #compose-attachments.hover, body.action-compose #compose-attachments.active { border-color: var(--mx-brand) !important; background: var(--mx-brand-soft) !important; }
body.action-compose #compose-attachments .upload-form { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.action-compose #compose-attachments .upload-form:before {
  content: ""; width: 48px; height: 48px; border-radius: 16px; background: var(--mx-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c60035' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.1-8.9 8.9a6 6 0 0 1-8.5-8.5l8.9-8.9a4 4 0 0 1 5.7 5.7l-8.9 8.9a2 2 0 0 1-2.8-2.8l8.2-8.2'/%3E%3C/svg%3E") center / 22px no-repeat;
}
body.action-compose #compose-attachments .hint { order: 3; color: var(--mx-muted); font-size: 12.5px; }
body.action-compose #compose-attachments .btn.attach {
  height: 40px; padding: 0 18px; border-radius: 999px; background: var(--mx-card) !important; color: var(--mx-brand-ink) !important;
  border: 1.5px solid var(--mx-brand) !important; font-weight: 700;
}
body.action-compose #compose-attachments .btn.attach:hover { background: var(--mx-brand) !important; color: #fff !important; }
body.action-compose #compose-attachments:after, body.action-compose #compose-attachments .upload-form + :empty:after { display: none !important; }
body.action-compose #compose-attachments ul.attachmentslist li { border-radius: 12px; background: var(--mx-sunk); margin-top: 8px; text-align: left; }
body.action-compose #compose-options {
  padding: 4px 16px !important; border: 1px solid var(--mx-line); border-radius: 20px; background: var(--mx-card) !important;
}
body.action-compose #compose-options .form-group.row { display: flex; align-items: center; margin: 0 !important; padding: 10px 0; border-bottom: 1px solid var(--mx-line); }
body.action-compose #compose-options .form-group.row:last-child { border-bottom: 0; }
body.action-compose #compose-options .col-form-label { font-weight: 600; color: var(--mx-text); padding: 0 !important; }
body.action-compose #compose-options .col-6:last-child { display: flex; justify-content: flex-end; }
body.action-compose #compose-options .custom-select { border-radius: 999px; height: 36px; }
@media (min-width: 769px) {
  body.mx-has-bar #taskmenu a.compose, body.mx-has-bar #taskmenu a.theme { display: none !important; }
}
body.action-compose #compose-content > .formbuttons { justify-content: flex-start !important; text-align: left !important; }
body.action-compose #composebodycontainer { display: flex; flex-direction: column; }
body.action-compose #composebodycontainer .editor-toolbar { order: -1; position: static !important; width: auto !important; }
body.action-compose #composebodycontainer > #composebody { order: 1; }
body.action-compose #composebodycontainer .editor-toolbar a.mce-i-html:before { font-size: 13px; }
body.action-compose #compose-content > .formbuttons { width: 100% !important; box-sizing: border-box; }
/* ---------- Login ---------- */
body.task-login { background: var(--mx-canvas); }
.task-login #layout-content.mlx-login {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  width: 100%;
  min-height: 100vh;
  padding: 0;
  text-align: left !important;
  background: var(--mx-card) !important;
}
.task-login #layout { background: var(--mx-card); }
.mlx-login__main { display: flex; flex-direction: column; min-width: 0; padding: 0 clamp(20px, 5vw, 64px); }
.mlx-login__top { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; }
.mlx-login__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mx-text) !important; text-decoration: none !important; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.mlx-login__brand img { width: 36px; height: 36px; border-radius: 10px; }
.mlx-login__theme { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--mx-line); background: var(--mx-card); color: var(--mx-text); display: inline-grid; place-items: center; cursor: pointer; }
.mlx-login__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0 40px; }
.mlx-login__card { width: 100%; max-width: 420px; }
.mlx-login__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin-bottom: 16px; border-radius: 999px; background: var(--mx-brand-soft); color: var(--mx-brand); font-size: .78rem; font-weight: 650; }
html.dark-mode .mlx-login__eyebrow { color: #ff7a9c; }
.mlx-login__title { margin: 0 0 8px; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--mx-text); }
.mlx-login__lead { margin: 0 0 26px; color: var(--mx-muted); font-size: 1rem; line-height: 1.55; }
.task-login #login-form { width: 100%; max-width: none; margin: 0; }
.task-login #login-form table { width: 100%; margin: 0; }
.task-login #login-form tr.form-group { display: block; margin: 0 0 14px; }
.task-login #login-form td.title { display: none !important; }
.task-login #login-form td.input { display: flex !important; width: 100%; padding: 0; flex-wrap: nowrap; }
.task-login #login-form .input-group-prepend .input-group-text,
.task-login #login-form .input-group > .input-group-text {
  background: var(--mx-sunk);
  border: 1px solid var(--mx-line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  color: var(--mx-muted);
  min-width: 46px;
  justify-content: center;
}
.task-login #login-form input.form-control {
  height: 48px;
  border-radius: 0 12px 12px 0;
  background: var(--mx-sunk);
  border: 1px solid var(--mx-line);
  color: var(--mx-text);
  font-size: 1rem;
}
.task-login #login-form input.form-control:focus { background: var(--mx-card); }
.task-login #login-form .formbuttons { margin: 6px 0 0; padding: 0; }
.task-login #login-form .formbuttons button,
.task-login #login-form #rcmloginsubmit {
  width: 100%;
  height: 50px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  background: var(--mx-brand) !important;
  border-color: var(--mx-brand) !important;
  box-shadow: 0 10px 22px -10px rgba(198, 0, 53, .7);
}
.task-login #login-form #rcmloginsubmit:hover { background: var(--mx-brand-dark) !important; }
.task-login #login-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mx-line);
  color: var(--mx-muted); font-size: .88rem;
}
.task-login #login-footer a { color: var(--mx-brand); font-weight: 600; }
.mlx-login__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 20px 0 26px; color: var(--mx-muted); font-size: .8rem; }
.mlx-login__foot span { margin-right: auto; }
.mlx-login__foot a { color: inherit !important; text-decoration: none; }
.mlx-login__foot a:hover { color: var(--mx-brand) !important; }
.task-login #logo { display: none !important; }

.mlx-login__aside {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 12px 12px 12px 0; border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, #ff6b4a 0%, rgba(255, 107, 74, 0) 52%),
    radial-gradient(90% 80% at 0% 100%, #1b0a16 0%, rgba(27, 10, 22, 0) 62%),
    linear-gradient(150deg, #c10d45 0%, #8d0632 55%, #4a0a2e 100%);
}
.mlx-login__aside:before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, rgba(0, 0, 0, .25) 70%);
  mask-image: linear-gradient(160deg, #000 0%, rgba(0, 0, 0, .25) 70%);
}
.mlx-login__aside-inner { position: relative; max-width: 500px; padding: 40px clamp(28px, 4vw, 56px); }
.mlx-login__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: .8rem; font-weight: 600; }
.mlx-login__badge i { width: 7px; height: 7px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 4px rgba(255, 209, 102, .25); }
.mlx-login__inbox { margin: 28px 0 30px; display: grid; gap: 10px; }
.mlx-login__mail {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); color: #1c1324;
  box-shadow: 0 14px 30px -14px rgba(60, 3, 24, .45);
}
.mlx-login__mail:nth-child(2) { margin-left: 28px; }
.mlx-login__mail:nth-child(3) { margin-left: 12px; opacity: .92; }
.mlx-login__mail b { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: .85rem; }
.mlx-login__mail span { display: grid; min-width: 0; line-height: 1.3; }
.mlx-login__mail strong { font-size: .88rem; }
.mlx-login__mail small { font-size: .78rem; color: #6d7081; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlx-login__mail em { margin-left: auto; font-style: normal; font-size: .72rem; color: #6d7081; white-space: nowrap; }
.mlx-login__aside h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.mlx-login__aside p { margin: 0 0 18px; color: rgba(255, 255, 255, .82); font-size: 1rem; line-height: 1.6; }
.mlx-login__aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mlx-login__aside li { position: relative; padding-left: 30px; color: rgba(255, 255, 255, .94); font-weight: 500; }
.mlx-login__aside li:before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
@media (max-width: 991.98px) {
  .task-login #layout-content.mlx-login { grid-template-columns: minmax(0, 1fr); background: var(--mx-canvas) !important; }
  .mlx-login__aside { display: none; }
  .mlx-login__card { padding: 30px 24px; border: 1px solid var(--mx-line); border-radius: 22px; background: var(--mx-card); }
}
@media (max-width: 575.98px) {
  .mlx-login__main { padding: 0 16px; }
  .mlx-login__top { padding: 16px 0; }
  .mlx-login__body { align-items: flex-start; padding-top: 6px; }
  .mlx-login__card { padding: 24px 18px; border-radius: 18px; }
  .task-login #login-form input.form-control { font-size: 16px; }
  .mlx-login__foot { justify-content: center; text-align: center; }
  .mlx-login__foot span { margin-right: 0; width: 100%; }
}


/* =====================================================================
   Phones and small tablets (≤ 768px): dark app bar, chips, avatar rows, bottom tabs
   ===================================================================== */
#mx-tabs { display: none; }
@media (max-width: 768px) {
  body.mx-has-bar, body:not(.task-login) { background: var(--mx-night); }
  #layout { background: var(--mx-night); }

  /* App bars */
  #layout > div > .header {
    background: var(--mx-night) !important; color: #fff !important; border-bottom: 0 !important;
  }
  #layout > div > .header .header-title { color: #fff; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
  #layout > div > .header a.button,
  #layout > div > .header a.button:before { color: rgba(255, 255, 255, .9) !important; }
  #layout > div > .header a.button.disabled { opacity: .4; }
  #layout > div > .header .toolbar,
  #layout > div > .header .menu.toolbar { border: 0 !important; background: transparent !important; box-shadow: none !important; }

  /* Sheets under the bar */
  #layout-sidebar > :not(.header),
  #layout-list > :not(.header),
  #layout-content > :not(.header) { background: var(--mx-card) !important; }
  #layout-list > .searchbar { margin: 0 !important; padding: 12px 12px 4px !important; border: 0 !important; height: auto !important; border-radius: 22px 22px 0 0; }
  #layout-list > .searchbar input {
    height: 42px; border-radius: 999px !important; background: var(--mx-sunk) !important;
    border: 1px solid var(--mx-line) !important; color: var(--mx-text) !important;
  }
  #layout-list > .searchbar input:focus { border-color: var(--mx-brand) !important; box-shadow: 0 0 0 4px var(--mx-brand-soft) !important; }
  #layout-list > .searchbar a.button.unread { display: none !important; }
  #layout-list > .searchbar { position: relative; display: flex; align-items: center; }
  #layout-list > .searchbar form { flex: 1; margin: 0 !important; }
  #layout-list > .searchbar input { width: 100% !important; padding-left: 42px !important; padding-right: 42px !important; }
  #layout-list > .searchbar a.button.search { position: absolute; left: 22px; top: calc(50% + 4px); transform: translateY(-50%); z-index: 2; color: var(--mx-muted) !important; }
  #layout-list > .searchbar a.button.options { position: absolute; right: 22px; top: calc(50% + 4px); transform: translateY(-50%); z-index: 2; color: var(--mx-muted) !important; }
  #layout-list > .searchbar a.button.reset { position: absolute; right: 52px; top: calc(50% + 4px); transform: translateY(-50%); z-index: 2; }
  #layout-list > .scroller { padding: 0 !important; border: 0 !important; }
  #layout-sidebar > .scroller { border-radius: 22px 22px 0 0; padding-top: 8px; }
  .mx-newmail-wrap { display: none; }
  #layout-content > .iframe-wrapper { padding: 0 !important; }
  .mx-chips { padding: 6px 12px 8px; }

  #messagelist tbody tr.message td.subject { padding-left: 62px !important; padding-right: 12px !important; }
  .mx-av { left: 12px; width: 40px; height: 40px; font-size: 15px; }

  /* Task menu popover (opened from the app bar) */
  #layout-menu.popover { background: var(--mx-card) !important; }
  #layout-menu.popover .popover-header { background: var(--mx-night) !important; }
  #layout-menu.popover #taskmenu a { color: var(--mx-text) !important; border-radius: 12px; margin: 2px 8px; }
  #layout-menu.popover #taskmenu a.selected { background: var(--mx-brand-soft) !important; color: var(--mx-brand-ink) !important; }
  #layout-menu.popover #taskmenu a.compose { background: var(--mx-brand) !important; color: #fff !important; }

  /* Bottom tabs */
  body.mx-has-tabs > #layout { height: calc(100% - 62px - env(safe-area-inset-bottom, 0px)) !important; }
  body.action-compose.mx-has-tabs > #layout, body.mx-has-tabs:has(#layout-list.hidden):has(#layout-content:not(.hidden)) > #layout { height: 100% !important; }
  #mx-tabs {
    display: flex; flex: none; justify-content: space-around; align-items: stretch;
    height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--mx-card); border-top: 1px solid var(--mx-line); position: relative; z-index: 40;
  }
  #mx-tabs a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--mx-muted) !important; text-decoration: none !important; font-size: 11.5px; font-weight: 650;
  }
  #mx-tabs a svg { transition: transform .15s ease; }
  #mx-tabs a.on { color: var(--mx-brand-ink) !important; }
  #mx-tabs a.on svg { transform: translateY(-1px); }
  #mx-tabs a.on:before {
    content: ""; position: absolute; top: 0; width: 34px; height: 3px; border-radius: 0 0 4px 4px; background: var(--mx-brand);
  }
  #mx-tabs a { position: relative; }
  /* Writing or reading takes the whole screen */
  body.action-compose #mx-tabs,
  body:has(#layout-list.hidden):has(#layout-content:not(.hidden)) #mx-tabs { display: none; }

  /* Compose button sits above the tabs */
  .floating-action-buttons { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  body.action-compose .floating-action-buttons,
  body:has(#layout-list.hidden):has(#layout-content:not(.hidden)) .floating-action-buttons { bottom: 20px !important; }
}

/* Small polish carried over from v1 */
.task-login #login-form { position: static !important; top: auto !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
.task-login #login-form #rcmloginsubmit { text-transform: none !important; }
.task-login #layout-content > * { top: auto !important; }

/* =====================================================================
   2.3 — settings list, framed save bar, phone drawer, phone search,
         floating button, login footer
   ===================================================================== */

/* Settings sections list: smaller, calmer text */
#sections-table tbody tr td,
#sections-table tbody tr td.section,
#layout-sidebar .listing.settings-list li a {
  font-size: 13.5px !important; font-weight: 550 !important; letter-spacing: 0;
}
#sections-table tbody tr td { height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle; }
#sections-table tbody tr td:before { font-size: 15px !important; }
@media (max-width: 1200px) {
  #sections-table tbody tr td,
  #sections-table tbody tr td.section,
  #layout-sidebar .listing.settings-list li a { font-size: 14.5px !important; }
  #sections-table tbody tr td { height: 52px !important; }
}

/* Save bar inside settings frames: no sideways overflow (it made a scrollbar) */
.task-addressbook .formbuttons, .task-settings .formbuttons, html.iframe .formbuttons {
  margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  max-width: 100%; box-sizing: border-box;
}
html.iframe body, body.task-settings.action-edit-prefs, body.task-settings.action-edit-folder, body.task-settings.action-edit-identity { overflow-x: hidden; }

/* Tablet rail: labels never clipped */
@media (min-width: 769px) {
  body.mx-has-bar #taskmenu a { width: auto !important; max-width: none !important; overflow: visible !important; }
  body.mx-has-bar #taskmenu a .inner { white-space: nowrap; overflow: visible; text-overflow: clip; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  #layout-list > .header, #layout-sidebar > .header { display: flex !important; align-items: center; }
  #layout-list > .header .header-title, #layout-sidebar > .header .header-title { flex: 1; text-align: center; line-height: 1.2 !important; margin: 0 !important; }
  #layout-list > .header a.back-sidebar-button, #layout-sidebar > .header a.back-sidebar-button,
  #layout-list > .header a.back-list-button { position: static !important; display: grid !important; place-items: center; height: 40px; }
}

@media (max-width: 768px) {
  /* ---------- Slide-in menu ---------- */
  #layout-menu.popover .popover-header { padding: 0 10px 0 16px !important; border-bottom: 1px solid rgba(255,255,255,.08); }
  #layout-menu.popover .popover-header a.cancel { width: 40px !important; height: 40px !important; margin: 0 0 0 auto !important; padding: 0 !important; }
  #layout-menu.popover .popover-header a.cancel:before { margin: 0 !important; line-height: 1 !important; width: auto !important; height: auto !important; font-size: 18px; }
  #layout-menu.popover .popover-header a.cancel:hover { background: rgba(255,255,255,.1); }
  #layout-menu.popover #taskmenu { padding: 16px 12px !important; gap: 4px; }
  #layout-menu.popover #taskmenu a {
    height: 50px !important; min-height: 50px; padding: 0 10px !important; gap: 14px !important;
    font-size: 15.5px !important; line-height: 1 !important; width: auto !important;
  }
  #layout-menu.popover #taskmenu a .inner { display: block !important; position: static !important; line-height: 1.2; font-size: inherit; }
  #layout-menu.popover #taskmenu a:before {
    width: 36px !important; height: 36px !important; min-width: 36px; flex: 0 0 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    line-height: 1 !important; font-size: 15px !important; margin: 0 !important; padding: 0 !important;
    text-align: center !important; border-radius: 11px; position: static !important; top: auto !important;
  }
  #layout-menu.popover #taskmenu a.compose {
    height: 50px !important; justify-content: center !important; gap: 10px !important; margin: 0 0 10px !important;
    border-radius: 999px !important; font-weight: 700; box-shadow: 0 10px 22px -12px rgba(198, 0, 53, .8);
  }
  #layout-menu.popover #taskmenu a.compose:before { width: 20px !important; height: 20px !important; min-width: 20px; flex: 0 0 20px !important; background: transparent !important; font-size: 16px !important; }
  #layout-menu.popover #taskmenu .special-buttons { padding-top: 12px !important; gap: 2px !important; }
  #layout-menu.popover #taskmenu .special-buttons a { height: 46px !important; min-height: 46px; font-size: 15px !important; }
  #layout-menu.popover #taskmenu a.logout:before { background: rgba(225, 29, 72, .12) !important; }

  /* App-bar buttons: no sticky red square after a tap */
  #layout > div > .header a.button:hover,
  #layout > div > .header a.button:focus,
  #layout > div > .header a.button:active { background: rgba(255, 255, 255, .1) !important; border-radius: 12px; }

  /* ---------- Search ---------- */
  #layout-list > .searchbar { padding: 12px 16px 6px !important; gap: 0; }
  #layout-list > .searchbar form { position: relative; display: block; min-width: 0; }
  #layout-list > .searchbar form:before {
    position: absolute !important; left: 16px; top: 50%; transform: translateY(-50%);
    margin: 0 !important; line-height: 1 !important; font-size: 15px; width: auto !important; height: auto !important;
    color: var(--mx-muted); pointer-events: none; z-index: 2;
  }
  #layout-list > .searchbar input {
    margin: 0 !important; height: 44px !important; padding-left: 44px !important; padding-right: 48px !important;
    font-size: 15px !important; box-sizing: border-box;
  }
  #layout-list > .searchbar a.button.search { display: none !important; }
  #layout-list > .searchbar a.button.options,
  #layout-list > .searchbar a.button.reset {
    top: calc(50% + 3px) !important; width: 36px !important; height: 36px !important; padding: 0 !important;
    display: grid !important; place-items: center; border-radius: 999px; transform: translateY(-50%) !important;
  }
  #layout-list > .searchbar a.button.options { right: 22px !important; }
  #layout-list > .searchbar a.button.reset { right: 58px !important; }
  #layout-list > .searchbar:not(.active) a.button.reset { display: none !important; }
  #layout-list > .searchbar a.button:before { margin: 0 !important; line-height: 1 !important; width: auto !important; height: auto !important; }
  #layout-list > .searchbar a.button .inner { display: none !important; }
  .mx-chips { padding: 8px 16px 10px !important; }

  /* ---------- Floating button: same gap from the right edge and the bar below ---------- */
  .floating-action-buttons { padding: 0 !important; width: auto !important; height: auto !important; right: 16px !important; bottom: calc(var(--mx-pagenav, 35px) + 16px) !important; background: transparent !important; }
  .floating-action-buttons a.button { width: 56px !important; height: 56px !important; margin: 0 !important; display: grid !important; place-items: center; }
  .floating-action-buttons a.button:before { margin: 0 !important; line-height: 1 !important; }
  body.action-compose .floating-action-buttons,
  body:has(#layout-list.hidden):has(#layout-content:not(.hidden)) .floating-action-buttons { bottom: 16px !important; }
}

/* ---------- Login footer ---------- */
.task-login #login-footer { font-size: .95rem !important; flex-direction: column; align-items: center; gap: 8px; }
.task-login #login-footer a.mlx-login__plans { color: var(--mx-muted) !important; font-weight: 500; text-decoration: none; text-align: center; line-height: 1.45; }
.task-login #login-footer a.mlx-login__plans strong { color: var(--mx-brand-ink, var(--mx-brand)); font-weight: 700; }
.task-login #login-footer a.mlx-login__plans:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.mlx-login__foot { align-items: center; justify-content: space-between; gap: 10px 24px; font-size: .84rem !important; }
.mlx-login__foot .mlx-login__copy { margin-right: auto; }
.mlx-login__links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .92rem; font-weight: 600; }
@media (max-width: 575.98px) {
  .mlx-login__foot { flex-direction: column-reverse; justify-content: center; text-align: center; }
  .mlx-login__foot .mlx-login__copy { margin-right: 0; line-height: 1.5; }
  .mlx-login__links { justify-content: center; }
}
@media (max-width: 768px) {
  .floating-action-buttons a.button { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; font-size: 0 !important; }
  .floating-action-buttons a.button:before { font-size: 20px !important; position: static !important; width: auto !important; height: auto !important; top: auto !important; }
  .floating-action-buttons a.button .inner { display: none !important; }
}
.mlx-login__links { margin-left: auto; justify-content: flex-end; font-size: .95rem; }
.mlx-login__links a { color: var(--mx-text) !important; opacity: .82; }
.mlx-login__links a:hover { opacity: 1; }
@media (max-width: 575.98px) { .mlx-login__links { margin-left: 0; justify-content: center; } }
@media (min-width: 769px) and (max-width: 1200px) {
  #layout-list > .header a.back-sidebar-button:before, #layout-sidebar > .header a.back-sidebar-button:before,
  #layout-list > .header a.back-list-button:before { margin: 0 !important; line-height: 1 !important; height: auto !important; }
  #layout-list > .header a.back-sidebar-button .inner { display: none !important; }
  #layout-list > .header .header-title { padding-right: 28px; }
}

/* ---------- Compose: centred buttons, full width, no inner scrollbar ---------- */
body.action-compose #compose-content > form.formcontent,
body.action-compose #compose-content > .formbuttons { max-width: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
@media (min-width: 769px) {
  body.action-compose #compose-content > form.formcontent {
    display: flex !important; flex-direction: column; overflow: hidden !important; flex: 1 1 auto; min-height: 0;
  }
  body.action-compose #compose-content > form.formcontent > * { flex: none; }
  body.action-compose #compose-content > form.formcontent #composebodycontainer,
  body.action-compose #compose-content > form.formcontent > :has(#composebodycontainer) { flex: 1 1 auto !important; min-height: 160px; height: auto !important; margin-bottom: 0 !important; }
  body.action-compose #composebodycontainer > #composebody,
  body.action-compose #composebodycontainer > .tox-tinymce { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; resize: none; }
}
/* Send: icon and label on one centre line */
body.action-compose #compose-content > .formbuttons .btn.send { justify-content: center; line-height: 1 !important; padding: 0 26px 0 22px !important; }
body.action-compose #compose-content > .formbuttons .btn.send:before {
  margin: 0 !important; line-height: 1 !important; height: auto !important; width: auto !important;
  font-size: 16px !important; position: static !important; top: auto !important; transform: none !important;
}
body.action-compose #compose-content > .formbuttons a.extwin { line-height: 1 !important; }
body.action-compose #compose-content > .formbuttons a.extwin:before { margin: 0 !important; line-height: 1 !important; height: auto !important; width: auto !important; position: static !important; }
/* Switch to HTML pill */
body.action-compose #composebodycontainer .editor-toolbar a.mce-i-html {
  height: 32px !important; margin: 0 !important; padding: 0 14px 0 12px !important; gap: 8px !important;
  display: inline-flex !important; align-items: center !important; line-height: 1 !important; width: auto !important;
}
body.action-compose #composebodycontainer .editor-toolbar a.mce-i-html:before {
  margin: 0 !important; line-height: 1 !important; height: auto !important; width: auto !important;
  position: static !important; top: auto !important; left: auto !important; font-size: 13px !important;
}
body.action-compose #composebodycontainer .editor-toolbar a.mce-i-html:after { margin: 0 !important; line-height: 1; }
/* Dark, slim scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--mx-line) transparent; }
html.dark-mode *, html.dark-mode { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
body.action-compose #composebodycontainer .editor-toolbar { height: 46px !important; min-height: 46px; flex: 0 0 46px !important; padding: 0 8px !important; }
@media (min-width: 769px) { body.action-compose #compose-content > form.formcontent { overflow-y: auto !important; overflow-x: hidden !important; } }

/* Top-bar search: one magnifier only, no bright circle behind it */
.mx-bar-search .searchbar form:before { content: none !important; display: none !important; }
.mx-bar-search .searchbar a.button.search {
  left: 6px !important; width: 32px !important; height: 32px !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important; outline: 0 !important;
}
.mx-bar-search .searchbar a.button.search:hover,
.mx-bar-search .searchbar a.button.search:focus,
.mx-bar-search .searchbar a.button.search:active { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.mx-bar-search .searchbar:focus-within a.button.search:hover,
.mx-bar-search .searchbar:focus-within a.button.search:focus { background: var(--mx-sunk) !important; color: var(--mx-brand) !important; }
.mx-bar-search .searchbar input { padding-left: 44px !important; margin: 0 !important; }
.mx-bar-search .searchbar form { padding-left: 0 !important; }


/* =====================================================================
   Sender pictures (logo / letters / off) and the select dropdown
   ===================================================================== */
.mx-av.mx-av-logo, .mx-av-lg.mx-av-logo { background: #fff !important; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .1); overflow: hidden; }
.mx-av.mx-av-logo img { width: 24px; height: 24px; object-fit: contain; }
.mx-av-lg.mx-av-logo img { width: 60%; height: 60%; object-fit: contain; }
html.mx-av-off .mx-av, html.mx-av-off .mx-av-lg, html.mx-av-off #message-header img.contactphoto { display: none !important; }
html.mx-av-off #messagelist tbody tr.message td.subject { padding-left: 20px !important; }

.mx-me-opt { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--mx-line); }
.mx-me-opt > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--mx-muted); }
.mx-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--mx-sunk); }
.mx-seg button {
  flex: 1; padding: 6px 4px; border: 0; border-radius: 999px; background: transparent;
  color: var(--mx-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.mx-seg button:hover { color: var(--mx-text); }
.mx-seg button.on { background: var(--mx-card); color: var(--mx-brand-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }

/* Dropdowns that replace <select> (sorting, list options, settings): a plain list with a tick on the chosen one,
   not the icon tiles used by menus. */
.popover.select-menu ul.listing li > a {
  gap: 10px; min-height: 38px; padding: 0 14px 0 10px !important; font-weight: 500;
}
.popover.select-menu ul.listing li > a:before,
.popover.select-menu ul.listing li > a:not(.disabled):hover:before {
  content: "" !important; width: 18px !important; height: 18px; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
}
.popover.select-menu ul.listing li > a.selected,
.popover.select-menu ul.listing li > a.selected:hover { background: var(--mx-brand-soft) !important; color: var(--mx-brand-ink) !important; font-weight: 650; }
.popover.select-menu ul.listing li > a.selected:before,
.popover.select-menu ul.listing li > a.selected:hover:before {
  background: var(--mx-brand-ink) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* =====================================================================
   Medialix Mail 3: clean layout (desktop and tablet ≥ 769px)
   White sidebar with brand, New message and folders · white header with search, apps, quick settings and account ·
   Row layout (full-width list, message opens over it) or Column layout (list + message), chosen in the gear menu.
   ===================================================================== */
:root { --mx3-side-w: 256px; --mx3-bar-h: 64px; --mx3-active: #f0f0f4; --mx3-row-h: 50px; }
html.dark-mode { --mx3-active: rgba(255, 255, 255, .07); }

@media (min-width: 769px) {
  body.mx-has-bar { background: var(--mx-card) !important; }

  /* ---------- Header ---------- */
  body.mx-has-bar #mx-bar {
    height: var(--mx3-bar-h); padding: 0 16px 0 0; gap: 8px;
    background: var(--mx-card) !important; color: var(--mx-text);
  }
  body.mx-has-bar #mx-bar:after { content: ""; position: absolute; left: var(--mx3-side-w); right: 0; bottom: 0; height: 1px; background: var(--mx-line); }
  body.mx-has-bar .mx-bar-brand {
    flex: none; align-self: stretch; width: var(--mx3-side-w); margin: 0; padding: 0 20px;
    border-right: 1px solid var(--mx-line); color: var(--mx-text) !important;
    font-size: 17px; font-weight: 750; letter-spacing: -.01em;
  }
  body.mx-has-bar .mx-bar-brand img { width: 28px; height: 28px; }
  body.mx-has-bar .mx-bar-brand span { display: inline-flex; align-items: center; }
  body.mx-has-bar .mx-bar-brand i { display: inline-block; width: 1px; height: 16px; margin: 0 9px; background: var(--mx-line); }
  body.mx-has-bar .mx-bar-brand b { font-weight: 500; color: var(--mx-muted); }
  body.mx-has-bar .mx-bar-btn {
    width: 40px; height: 40px; border: 1px solid var(--mx-line);
    color: var(--mx-text) !important; background: var(--mx-card);
  }
  body.mx-has-bar .mx-bar-btn:hover, body.mx-has-bar .mx-bar-btn[aria-expanded="true"] { background: var(--mx3-active) !important; color: var(--mx-text) !important; }
  body.mx-has-bar .mx-bar-btn:focus-visible, body.mx-has-bar .mx-avatar-btn:focus-visible { outline-color: var(--mx-brand); }
  body.mx-has-bar .mx-bar-right { gap: 8px; margin-left: auto; }
  body.mx-has-bar .mx-me-initial { box-shadow: none; }
  body.mx-has-bar .mx-avatar-btn { margin-left: 2px; }

  /* Search box */
  body.mx-has-bar .mx-bar-search { flex: 0 1 560px; margin: 0 auto 0 20px; }
  body.mx-has-bar .mx-bar-search .searchbar {
    height: 44px; border: 1px solid var(--mx-line) !important; border-radius: 12px !important;
    background: var(--mx-card) !important;
  }
  body.mx-has-bar .mx-bar-search .searchbar:hover { border-color: #c9cad3 !important; }
  body.mx-has-bar .mx-bar-search .searchbar:focus-within { border-color: var(--mx-brand) !important; box-shadow: 0 0 0 3px var(--mx-brand-soft); background: var(--mx-card) !important; }
  body.mx-has-bar .mx-bar-search .searchbar input,
  body.mx-has-bar .mx-bar-search .searchbar:focus-within input { height: 42px !important; color: var(--mx-text) !important; }
  body.mx-has-bar .mx-bar-search .searchbar input::placeholder,
  body.mx-has-bar .mx-bar-search .searchbar:focus-within input::placeholder { color: var(--mx-muted); }
  body.mx-has-bar .mx-bar-search .searchbar a.button,
  body.mx-has-bar .mx-bar-search .searchbar a.button:hover { color: var(--mx-muted) !important; }
  body.mx-has-bar .mx-bar-search .searchbar a.button:hover { color: var(--mx-text) !important; }

  /* ---------- Page under the header ---------- */
  body.mx-has-bar > #layout {
    height: calc(100% - var(--mx3-bar-h)) !important; margin: 0 !important; border-radius: 0 !important;
    background: var(--mx-card) !important;
  }
  body.mx-has-bar #layout-menu { display: none !important; }
  body.task-mail.mx-has-bar #layout > #layout-sidebar.hidden, body.task-mail.action-none.mx-has-bar #layout > #layout-list.hidden { display: flex !important; }

  /* ---------- Sidebar ---------- */
  body.mx-has-bar #layout-sidebar {
    flex: 0 0 var(--mx3-side-w) !important; width: var(--mx3-side-w) !important; min-width: 0 !important; max-width: none !important;
    background: var(--mx-card) !important; border-right: 1px solid var(--mx-line) !important;
  }
  body.mx-has-bar #layout-sidebar > .scroller,
  body.mx-has-bar #layout-sidebar > .footer { background: var(--mx-card) !important; }
  body.task-mail.mx-has-bar #layout-sidebar > .header { display: none !important; }
  body.mx-has-bar #layout-sidebar .mx-acct-card { display: none !important; }
  body.mx-has-bar .mx-newmail-wrap,
  body.mx-has-bar #layout-sidebar .mx-acct-card + .mx-newmail-wrap { display: block; padding: 16px 16px 14px !important; background: var(--mx-card) !important; }
  body.mx-has-bar a.mx-newmail {
    height: 44px; border-radius: 12px; box-shadow: none; font-size: 15px; font-weight: 650;
  }
  body.mx-has-bar a.mx-newmail:hover { transform: none; }

  body.mx-has-bar #layout-sidebar > .scroller .listing li > a,
  body.mx-has-bar .mx-sidenav a {
    display: flex !important; align-items: center; height: 42px; margin: 1px 12px; border-radius: 10px;
    color: var(--mx-text) !important; font-size: 14.5px; font-weight: 500; box-shadow: none !important;
  }
  body.mx-has-bar #layout-sidebar > .scroller .listing li > a:before { color: var(--mx-text) !important; opacity: .85; }
  body.mx-has-bar #layout-sidebar > .scroller .listing li:hover > a,
  body.mx-has-bar .mx-sidenav a:hover { background: var(--mx3-active) !important; }
  body.mx-has-bar #layout-sidebar > .scroller .listing li.selected > a,
  body.mx-has-bar .mx-sidenav li.on > a {
    background: var(--mx3-active) !important; color: var(--mx-text) !important; font-weight: 650; box-shadow: none !important;
  }
  body.mx-has-bar #layout-sidebar > .scroller .listing li.selected > a:before { color: var(--mx-text) !important; opacity: 1; }
  body.mx-has-bar .folderlist li.mailbox .unreadcount {
    top: 50% !important; transform: translateY(-50%); right: 10px !important; margin: 0 !important;
    min-width: 22px; height: 22px; padding: 0 6px !important; border-radius: 999px;
    display: inline-grid; place-items: center; line-height: 1 !important;
    background: var(--mx-brand) !important; color: #fff !important; font-size: 11.5px; font-weight: 700;
  }
  body.mx-has-bar .folderlist li.mailbox.unread > a { font-weight: 650; }

  .mx-folders-head {
    position: relative; display: flex; align-items: center; gap: 4px; height: 42px; margin: 8px 12px 0; padding: 0 4px 0 14px;
    color: var(--mx-text); font-size: 14.5px; font-weight: 500;
  }
  .mx-folders-head:before {
    content: ""; flex: none; width: 19px; height: 19px; margin-right: 12px; background: currentColor; opacity: .85;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .mx-folders-head > span { flex: 1; }
  .mx-folders-head a {
    display: inline-grid !important; place-items: center; width: 30px !important; height: 30px !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; border-radius: 8px; color: var(--mx-muted) !important; background: transparent !important;
  }
  .mx-folders-head a:hover { background: var(--mx3-active) !important; color: var(--mx-text) !important; }
  .mx-folders-head a.sidebar-menu:before { margin: 0 !important; font-size: 14px !important; line-height: 1 !important; }
  .mx-folders-head a.sidebar-menu .inner { display: none !important; }

  .mx-sidenav { list-style: none; margin: 0 0 12px; padding: 0; }
  .mx-sidenav a { gap: 12px; padding: 0 14px; text-decoration: none !important; }
  .mx-sidenav a svg { flex: none; opacity: .85; }
  .mx-sidenav-top { padding: 16px 16px 6px; border-bottom: 1px solid var(--mx-line); margin-bottom: 8px; }
  .mx-sidenav-top a.mx-newmail { margin-bottom: 12px; }
  .mx-sidenav-top .mx-sidenav { margin: 0 -12px 6px; }

  /* ---------- Message list ---------- */
  body.mx-has-bar #layout-list { background: var(--mx-card) !important; border-right: 1px solid var(--mx-line) !important; }
  body.task-mail.mx-has-bar #layout-list > .header { display: none !important; }
  body.mx-has-bar #layout-list > .pagenav { display: none !important; }

  .mx-listhead { flex: none; padding: 18px 24px 0; background: var(--mx-card); }
  .mx-listtitle { display: flex; align-items: center; gap: 8px; }
  .mx-listtitle h1 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--mx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-back-btn { display: none; }
  .mx-listbar { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 -24px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--mx-line); }
  .mx-selall { position: relative; display: inline-flex; align-items: center; flex: none; }
  .mx-selall label { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0; cursor: pointer; }
  .mx-selall input, html.mx-row #messagelist td.selection input { width: 17px; height: 17px; margin: 0; accent-color: var(--mx-brand); cursor: pointer; }
  .mx-selmenu-btn { display: inline-grid; place-items: center; width: 22px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--mx-muted); cursor: pointer; }
  .mx-selmenu-btn:hover { background: var(--mx3-active); color: var(--mx-text); }
  .mx-selmenu {
    position: absolute; top: 32px; left: 0; z-index: 30; min-width: 160px; padding: 6px;
    display: grid; border: 1px solid var(--mx-line); border-radius: 14px; background: var(--mx-card);
    box-shadow: 0 18px 40px -14px rgba(16, 24, 40, .35);
  }
  .mx-selmenu[hidden] { display: none; }
  .mx-selmenu button { height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--mx-text); text-align: left; font-size: 14px; cursor: pointer; }
  .mx-selmenu button:hover { background: var(--mx3-active); }
  .mx-listbar-chips { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .mx-listbar-chips .mx-chips { padding: 0; background: transparent; gap: 6px; }
  .mx-listbar-chips .mx-chips button { height: 30px; padding: 0 13px; font-size: 13px; font-weight: 600; }
  .mx-listbar-chips .mx-chips button.on { background: var(--mx-text); border-color: var(--mx-text); color: var(--mx-card); }
  html.dark-mode .mx-listbar-chips .mx-chips button.on { background: var(--mx-brand); border-color: var(--mx-brand); color: #fff; }
  .mx-listbar-right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
  .mx-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--mx-muted); cursor: pointer; }
  .mx-icon-btn:hover { background: var(--mx3-active); color: var(--mx-text); }
  .mx-listbar-pages .pagenav { display: flex !important; align-items: center; gap: 0; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; position: static !important; }
  .mx-listbar-pages .pagenav a.firstpage, .mx-listbar-pages .pagenav a.lastpage, .mx-listbar-pages .pagenav .rcpagejumper { display: none !important; }
  .mx-listbar-pages .pagenav .pagenav-text { order: -1; margin-right: 4px; color: var(--mx-muted); font-size: 12.5px; white-space: nowrap; }
  .mx-listbar-pages .pagenav a { width: 30px !important; height: 30px !important; min-width: 0 !important; padding: 0 !important; border-radius: 999px; display: inline-grid !important; place-items: center; }
  .mx-listbar-pages .pagenav a:before { margin: 0 !important; line-height: 1 !important; }
  .mx-listbar-pages .pagenav a .inner { display: none !important; }
  .mx-listbar-pages .pagenav a.disabled { opacity: .35; }

  /* Rows (both layouts) */
  body.mx-has-bar #layout-list > .scroller { padding: 0 !important; }
  body.mx-has-bar #messagelist thead { display: none; }
  body.mx-has-bar #messagelist td.selection { display: table-cell !important; width: 44px; padding: 0 0 0 24px !important; vertical-align: middle; }
  body.mx-has-bar #messagelist tbody tr:hover { background: var(--mx-sunk); }
  body.mx-has-bar #messagelist tbody tr.selected, body.mx-has-bar #messagelist tbody tr.selected:hover { background: var(--mx-brand-soft) !important; }

  /* Row layout: one line per message across the full width */
  html.mx-row body.task-mail.action-none.mx-has-bar #layout-list { flex: 1 1 auto !important; max-width: none !important; width: auto !important; border-right: 0 !important; }
  html.mx-row body.task-mail.action-none.mx-has-bar #layout > #layout-content { display: none !important; }
  html.mx-row body.task-mail.action-none.mx-has-bar.mx-reading #layout > #layout-list { display: none !important; }
  html.mx-row body.task-mail.action-none.mx-has-bar.mx-reading #layout > #layout-content { display: flex !important; flex: 1 1 auto !important; max-width: none !important; }

  html.mx-row #messagelist tbody tr { display: flex; align-items: center; min-height: var(--mx3-row-h); border-bottom: 1px solid var(--mx-line); }
  html.mx-row #messagelist tbody tr td { border: 0 !important; }
  html.mx-row #messagelist tbody tr td.selection { order: 1; display: block !important; flex: none; width: auto; padding: 0 0 0 24px !important; line-height: 0; }
  html.mx-row #messagelist tbody tr td.flags { order: 2; flex: none; display: flex !important; align-items: center; width: auto !important; padding: 0 0 0 14px !important; position: static !important; }
  html.mx-row #messagelist tbody tr td.flags span.attachment { display: none !important; }
  html.mx-row #messagelist tbody tr td.subject {
    order: 3; flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 14px;
    height: var(--mx3-row-h); padding: 0 20px 0 14px !important; box-shadow: none !important; position: relative;
  }
  html.mx-row #messagelist tbody tr td.subject .mx-av { position: static; flex: none; width: 30px; height: 30px; font-size: 12px; }
  html.mx-row #messagelist tbody tr td.subject .mx-av.mx-av-logo img { width: 20px; height: 20px; }
  html.mx-row #messagelist tbody tr td.subject span.fromto { order: 1; flex: 0 0 210px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  html.mx-row #messagelist tbody tr td.subject span.subject { order: 2; flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; overflow: hidden; white-space: nowrap; }
  html.mx-row #messagelist tbody tr td.subject span.subject a { overflow: hidden; text-overflow: ellipsis; color: var(--mx-text) !important; font-size: 14px; }
  html.mx-row #messagelist tbody tr td.subject span.subject span.msgicon.status { display: none !important; }
  html.mx-row #messagelist tbody tr.unread td.subject span.subject:before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--mx-brand); }
  html.mx-row #messagelist tbody tr.unread td.subject span.fromto,
  html.mx-row #messagelist tbody tr.unread td.subject span.subject a { font-weight: 700 !important; }
  html.mx-row #messagelist tbody tr:not(.unread) td.subject span.fromto { font-weight: 500; }
  html.mx-row #messagelist tbody tr td.subject span.size { display: none !important; }
  html.mx-row #messagelist tbody tr td.subject span.date { order: 3; flex: none; position: static !important; margin: 0 !important; color: var(--mx-muted) !important; font-size: 12.5px; font-weight: 500 !important; }
  html.mx-row #messagelist tbody tr.unread td.subject span.date { color: var(--mx-text) !important; font-weight: 650 !important; }
  html.mx-row #messagelist tbody tr td.subject .mx-qa { top: 50%; right: 14px; transform: translateY(-50%); }
  /* No day groups in the row layout */
  html.mx-row #messagelist tbody tr.mx-gstart td.subject { padding-top: 0 !important; }
  html.mx-row #messagelist tbody tr.mx-gstart td.subject:before,
  html.mx-row #messagelist tbody tr.mx-gstart td.flags:before { display: none !important; }
  html.mx-row #messagelist tbody tr.mx-gstart td.flags { padding-top: 0 !important; }

  /* Column layout: list on the left */
  html.mx-col body.task-mail.action-none.mx-has-bar #layout-list { flex: 0 0 420px !important; max-width: 40% !important; min-width: 340px !important; }
  html.mx-col body.task-mail.action-none.mx-has-bar #messagelist tbody tr.message td.subject { padding-left: 60px !important; }
  html.mx-col body.task-mail.action-none.mx-has-bar #messagelist td.selection { padding: 0 0 0 16px !important; }
  html.mx-col body.task-mail.action-none.mx-has-bar #messagelist .mx-av { left: 6px; }
  html.mx-col .mx-listhead { padding: 16px 16px 0; }
  html.mx-col .mx-listbar { flex-wrap: wrap; margin: 0 -16px; padding: 6px 10px 8px 16px; row-gap: 6px; }
  html.mx-col .mx-listbar-chips { order: 5; flex: 1 0 100%; overflow-x: auto; }
  html.mx-col .mx-listbar-pages .pagenav .pagenav-text { display: none; }

  /* ---------- Reading pane ---------- */
  body.mx-has-bar #layout-content { background: var(--mx-card) !important; }
  body.mx-has-bar #layout-content > :not(.header) { background: var(--mx-card) !important; }
  body.mx-has-bar #layout-content > .iframe-wrapper { padding: 0 !important; }
  body.mx-has-bar #layout-content > .iframe-wrapper > iframe { border-radius: 0; box-shadow: none; }
  body.mx-has-bar #layout-content > .header { height: 58px; padding: 0 16px !important; border-bottom: 1px solid var(--mx-line) !important; }
  html.mx-row body.task-mail.action-none.mx-has-bar #layout-content > .header a.back-list-button {
    display: inline-flex !important; align-items: center; justify-content: center; flex: none;
    width: 38px !important; height: 38px !important; min-width: 0 !important; margin: 0 6px 0 0 !important; padding: 0 !important;
    border-radius: 999px; color: var(--mx-text) !important;
  }
  html.mx-row body.task-mail.action-none.mx-has-bar #layout-content > .header a.back-list-button:hover { background: var(--mx3-active) !important; }
  html.mx-row body.task-mail.action-none.mx-has-bar #layout-content > .header a.back-list-button:before { margin: 0 !important; font-size: 16px !important; line-height: 1 !important; }
  html.mx-row body.task-mail.action-none.mx-has-bar #layout-content > .header a.back-list-button .inner { display: none !important; }

  /* ---------- Quick settings (gear) ---------- */
  .mx-gear-pop { width: 330px !important; padding: 8px !important; }
  .mx-gear-row {
    display: flex !important; align-items: center; gap: 12px; min-height: 44px; margin: 0 !important; padding: 0 12px !important;
    border-radius: 12px !important; color: var(--mx-text) !important; font-size: 14.5px; font-weight: 500 !important; text-decoration: none !important; cursor: pointer;
  }
  .mx-gear-row:hover { background: var(--mx3-active) !important; }
  .mx-gear-row svg { flex: none; color: var(--mx-text); }
  .mx-gear-row > span { flex: 1; min-width: 0; }
  .mx-gear-row small { color: var(--mx-muted); font-size: 13px; }
  .mx-gear-pick select {
    flex: none; max-width: 150px; height: 32px; padding: 0 26px 0 10px; border: 0; border-radius: 8px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c60035' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 6px center / 14px no-repeat;
    color: var(--mx-brand-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: right; cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .mx-gear-pick select:focus-visible { outline: 2px solid var(--mx-brand); }
  .mx-gear-pick select option { color: var(--mx-text); background: var(--mx-card); }
  .mx-gear-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mx-line); }
  .mx-gear-label { margin: 6px 12px 4px; color: var(--mx-muted); font-size: 13px; font-weight: 600; }
  .mx-gear-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 0 12px; border-radius: 12px; color: var(--mx-text); font-size: 14.5px; font-weight: 500; cursor: pointer; }
  .mx-gear-opt:hover { background: var(--mx3-active); }
  .mx-gear-opt span { flex: 1; }
  .mx-gear-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--mx-brand); cursor: pointer; }
  .mx-lay { flex: none; position: relative; width: 62px; height: 40px; padding: 5px; border: 1px solid var(--mx-line); border-radius: 8px; background: var(--mx-sunk); display: grid; gap: 3px; align-content: start; }
  .mx-lay b { display: block; height: 4px; border-radius: 2px; background: var(--mx-line); }
  .mx-lay-row b { width: 100%; }
  .mx-lay-col { grid-template-columns: 22px 1fr; grid-auto-rows: 4px; }
  .mx-lay-col b { grid-column: 1; }
  .mx-lay-col em { grid-column: 2; grid-row: 1 / span 4; height: 28px; border-radius: 3px; background: var(--mx-line); }
  .mx-gear-opt input:checked ~ .mx-lay { border-color: var(--mx-brand); background: var(--mx-brand-soft); }
  .mx-gear-opt input:checked ~ .mx-lay b, .mx-gear-opt input:checked ~ .mx-lay em { background: rgba(198, 0, 53, .35); }
}

@media (min-width: 769px) {
  html.mx-row #messagelist tbody tr td.subject { flex-wrap: nowrap !important; width: auto !important; }
  html.mx-row #messagelist tbody tr td.subject span.subject { width: auto !important; }
  html.mx-row #messagelist tbody tr td.flags { width: 34px !important; justify-content: center; padding: 0 !important; margin-left: 6px; }
  body.mx-has-bar #layout-sidebar > .scroller .listing li > a { width: auto !important; padding: 0 44px 0 12px !important; gap: 12px; }
  body.mx-has-bar .mx-sidenav a { padding: 0 12px !important; }
  body.mx-has-bar .mx-folders-head { padding-left: 12px; }
  body.mx-has-bar .mx-folders-head:before { width: 20px; height: 20px; }
  body.mx-has-bar #mailboxlist li.mailbox > a:before {
    content: "" !important; position: static !important; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important;
    background: currentColor; opacity: .85; font-size: 0 !important;
    -webkit-mask: var(--mx-ic) center / contain no-repeat; mask: var(--mx-ic) center / contain no-repeat;
  }
  body.mx-has-bar #mailboxlist li.mailbox > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); }
  body.mx-has-bar #mailboxlist li.mailbox.inbox > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E"); }
  body.mx-has-bar #mailboxlist li.mailbox.drafts > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
  body.mx-has-bar #mailboxlist li.mailbox.sent > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E"); }
  body.mx-has-bar #mailboxlist li.mailbox.junk > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E"); }
  body.mx-has-bar #mailboxlist li.mailbox.trash > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
  body.mx-has-bar #mailboxlist li.mailbox.archive > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4'/%3E%3C/svg%3E"); }
}
@media (min-width: 769px) {
  .mx-gear-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-gear-pick select { max-width: 130px; }
  /* Row layout: the star is always there (outline until starred) */
  html.mx-row #messagelist tbody tr td.flags span.flag span:before { visibility: visible !important; }
  html.mx-row #messagelist tbody tr:not(.flagged) td.flags span.flag span:before { color: #b5b7c3 !important; }
  html.mx-row #messagelist tbody tr:not(.flagged) td.flags span.flag:hover span:before { color: var(--mx-text) !important; }
  /* Column layout keeps the card rows: tick boxes appear only after "Select" */
  html.mx-col body.task-mail.action-none.mx-has-bar #messagelist:not(.withselection) td.selection { display: none !important; }
  html.mx-col body.task-mail.action-none.mx-has-bar #messagelist td.selection { border: 0 !important; }
}
@media (min-width: 769px) {
  body.mx-has-bar #layout > #layout-sidebar > .header { background: var(--mx-card) !important; border-bottom: 0 !important; }
  body.mx-has-bar #layout-sidebar > .header .header-title { font-size: 13px !important; font-weight: 700 !important; color: var(--mx-muted) !important; letter-spacing: .02em; }
  .mx-sidenav-top { border-bottom: 1px solid var(--mx-line); margin-bottom: 0; padding-bottom: 8px; }
}
/* Phone keeps its own layout: the desktop-only pieces stay hidden */
@media (max-width: 768px) {
  .mx-listhead, .mx-folders-head, .mx-sidenav, .mx-sidenav-top { display: none !important; }
}
@media (min-width: 769px) {
  .mx-selactions { display: none; align-items: center; gap: 2px; }
  .mx-listbar.mx-has-sel .mx-selactions { display: flex; }
  .mx-listbar.mx-has-sel .mx-listbar-chips { display: none; }
  .mx-selcount { margin: 0 8px 0 2px; color: var(--mx-text); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
}
@media (min-width: 769px) {
  html.mx-row #messagelist tbody tr td.selection, html.mx-row #messagelist tbody tr td.flags { background: transparent !important; }
}

/* =====================================================================
   Medialix Mail 3 — phase 2: message view, compose, contacts, settings
   ===================================================================== */
@media (min-width: 769px) {
  /* Toolbars: quiet buttons, no outlines */
  html body.mx-has-bar #layout > div > .header { background: var(--mx-card) !important; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar { gap: 2px !important; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar a,
  html body.mx-has-bar #layout > div > .header a.toolbar-button {
    height: 38px !important; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important;
    background: transparent !important; color: var(--mx-text) !important;
  }
  html body.mx-has-bar #layout > div > .header .menu.toolbar a:before { font-size: 14px !important; opacity: .85; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar a:not(.disabled):hover,
  html body.mx-has-bar #layout > div > .header a.toolbar-button:not(.disabled):hover {
    background: var(--mx3-active) !important; color: var(--mx-text) !important; border: 0 !important;
  }
  html body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton { border: 0 !important; border-radius: 10px; background: transparent !important; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton:hover { background: var(--mx3-active) !important; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a:hover { background: transparent !important; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar .dropbutton a.dropdown { border-left: 0 !important; padding: 0 8px 0 0 !important; }
  html body.mx-has-bar #layout > div > .header .menu.toolbar a.disabled { opacity: .38 !important; }
  html body.mx-has-bar #layout > div > .header { height: 58px !important; min-height: 58px; border-bottom: 1px solid var(--mx-line) !important; }

  /* Full-page message: back arrow */
  body.task-mail.action-show.mx-has-bar #layout-content > .header a.back-list-button {
    display: inline-flex !important; align-items: center; justify-content: center; flex: none;
    width: 38px !important; height: 38px !important; min-width: 0 !important; margin: 0 6px 0 0 !important; padding: 0 !important;
    border-radius: 999px; color: var(--mx-text) !important;
  }
  body.task-mail.action-show.mx-has-bar #layout-content > .header a.back-list-button:hover { background: var(--mx3-active) !important; }
  body.task-mail.action-show.mx-has-bar #layout-content > .header a.back-list-button:before { margin: 0 !important; font-size: 16px !important; line-height: 1 !important; }
  body.task-mail.action-show.mx-has-bar #layout-content > .header a.back-list-button .inner { display: none !important; }
  body.task-mail.action-show.mx-has-bar #layout-sidebar > .header { display: none !important; }
  body.mx-has-bar .mx-bar-search:empty { visibility: hidden; }
}

/* ---------- Open message (reading pane frame and full page; all sizes) ---------- */
body.task-mail.action-show #message-header,
body.task-mail.action-preview #message-header { padding: 26px 32px 6px !important; border: 0 !important; }
body.task-mail #message-header > .subject {
  margin: 0 0 22px !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3; letter-spacing: -.015em;
}
body.task-mail #message-header > .header { display: flex !important; align-items: flex-start; gap: 14px; }
body.task-mail #message-header .mx-av-lg { float: none; flex: none; width: 44px; height: 44px; margin: 0; font-size: 16px; }
body.task-mail #message-header .header-content { flex: 1; min-width: 0; margin: 0 !important; }
body.task-mail #message-header .header-summary { padding-top: 1px; }
body.task-mail #message-header .header-summary > span {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; font-size: 0 !important; color: var(--mx-muted);
}
body.task-mail #message-header .header-summary > span > .adr { font-size: 15px; }
body.task-mail #message-header .header-summary > span > .adr a.rcmContactAddress { color: var(--mx-text) !important; font-weight: 700; text-decoration: none; }
body.task-mail #message-header .header-summary > span > .adr a.rcmContactAddress:after {
  content: " <" attr(title) ">"; color: var(--mx-muted); font-weight: 400; font-size: 13.5px;
}
body.task-mail #message-header .header-summary > span > .adr a.rcmaddcontact { margin-left: 4px; font-size: 12px; opacity: .6; }
body.task-mail #message-header .header-summary > span > .text-nowrap { margin-left: auto; font-size: 13px; color: var(--mx-muted); }
body.task-mail #message-header .mx-msgto { margin-top: 2px; color: var(--mx-muted); font-size: 13px; }
body.task-mail #message-header .header-links { margin-top: 8px !important; display: flex; gap: 14px; flex-wrap: wrap; }
body.task-mail #message-header .header-links a { color: var(--mx-muted) !important; font-size: 12.5px; font-weight: 500; text-decoration: none; }
body.task-mail #message-header .header-links a:hover { color: var(--mx-brand-ink) !important; }
body.task-mail #message-header .header-links a:before { font-size: 11px; color: inherit !important; }
body.task-mail #message-header .header-headers { margin-top: 10px; font-size: 13px; }
body.task-mail.action-show #message-content,
body.task-mail.action-preview #message-content { padding: 10px 32px 0 !important; }
body.task-mail #messagebody { font-size: 15px; line-height: 1.6; }
body.task-mail #messagebody .message-part, body.task-mail #messagebody .message-htmlpart { padding: 0 !important; }
.mx-replybar { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 40px; }
.mx-reply-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border: 1px solid var(--mx-line); border-radius: 999px; background: var(--mx-card); color: var(--mx-text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.mx-reply-btn:hover { background: var(--mx3-active); border-color: #c9cad3; }
.mx-reply-btn:focus-visible { outline: 2px solid var(--mx-brand); outline-offset: 2px; }
html.dark-mode .mx-reply-btn:hover { border-color: var(--mx-line); }
body.task-mail #message-header .header-summary > span { column-gap: 0 !important; }
body.task-mail #message-header .header-summary > span > .text-nowrap { padding-left: 12px; }
body.task-mail #message-header .header-content { padding: 0 !important; }

/* ---------- Compose: one white sheet ---------- */
@media (min-width: 769px) {
  body.action-compose.mx-has-bar .mx-bar-brand { border-right: 0; }
  body.action-compose.mx-has-bar #mx-bar:after { left: 0; }
  body.action-compose.mx-has-bar #layout-content > .header .header-title {
    display: block !important; position: static !important; flex: none; margin: 0 14px 0 8px !important; padding: 0 !important;
    font-size: 18px !important; font-weight: 700 !important; color: var(--mx-text) !important; width: auto !important; letter-spacing: -.01em;
  }
  body.action-compose.mx-has-bar #layout-sidebar {
    flex: 0 0 300px !important; width: 300px !important; min-width: 0 !important; max-width: none !important;
    background: var(--mx-card) !important; border-left: 1px solid var(--mx-line) !important; border-right: 0 !important;
  }
  body.action-compose.mx-has-bar #layout-sidebar > .header { display: flex !important; height: 58px; border-bottom: 1px solid var(--mx-line) !important; }
  body.action-compose.mx-has-bar #layout-sidebar > .header .header-title { font-size: 14px !important; font-weight: 700 !important; color: var(--mx-text) !important; }
}
body.action-compose #compose-content { background: var(--mx-card) !important; }
body.action-compose #compose-content > form.formcontent { max-width: none; padding: 8px 28px 0 !important; }
body.action-compose #compose-headers { margin: 0; padding: 0; border: 0; border-radius: 0; }
body.action-compose #compose-headers .form-group.row { padding: 6px 0; }
body.action-compose #compose-headers .form-group.row:last-child { border-bottom: 1px solid var(--mx-line); }
body.action-compose #compose-headers .form-group.row > label { flex-basis: 76px; max-width: 76px; padding-left: 0 !important; font-weight: 600; }
body.action-compose #compose-headers .form-control:focus,
body.action-compose #compose-headers ul.recipient-input.focus { background-color: transparent !important; }
body.action-compose #compose-headers .input-group-append .input-group-text,
body.action-compose #compose-headers .input-group > a.input-group-text { border: 0 !important; }
body.action-compose #compose-headers .input-group-append .input-group-text:hover { background: var(--mx3-active) !important; color: var(--mx-text) !important; }
body.action-compose ul.recipient-input li.recipient { background: var(--mx3-active) !important; border-radius: 8px; }
body.action-compose #composebodycontainer { border: 0; border-radius: 0; overflow: visible; }
body.action-compose #composebodycontainer .editor-toolbar { height: 48px; padding: 0; border-bottom: 1px solid var(--mx-line) !important; }
body.action-compose #composebodycontainer .editor-toolbar a { border: 0 !important; border-radius: 8px; padding: 0 10px; }
body.action-compose #composebodycontainer .editor-toolbar a:hover { background: var(--mx3-active) !important; }
body.action-compose #composebody { padding: 18px 0 !important; min-height: 50vh; }
body.action-compose #compose-content > .formbuttons {
  max-width: none; padding: 12px 28px 14px !important; background: var(--mx-card) !important; border-top: 1px solid var(--mx-line) !important;
}
body.action-compose #compose-content > .formbuttons .btn.send { height: 44px; border-radius: 12px; box-shadow: none; font-weight: 700; }
body.action-compose #compose-content > .formbuttons a.extwin { border: 0; height: 40px; border-radius: 10px; color: var(--mx-muted) !important; }
body.action-compose #compose-content > .formbuttons a.extwin:hover { background: var(--mx3-active); color: var(--mx-text) !important; }
body.action-compose #layout-sidebar > .scroller { padding: 16px !important; background: var(--mx-card) !important; }
body.action-compose #compose-attachments { border-radius: 14px; border-width: 1px !important; }
body.action-compose #compose-attachments .btn.attach { border-radius: 10px; border-width: 1px !important; }
body.action-compose #compose-options { border-radius: 14px; }
body.action-compose #compose-options .col-form-label { font-weight: 500; font-size: 14px; }
body.action-compose #compose-options .custom-select { border-radius: 10px; }

/* ---------- Contacts and Settings ---------- */
@media (min-width: 769px) {
  body.task-addressbook.mx-has-bar #layout-list > .header .header-title,
  body.task-settings.mx-has-bar #layout-list > .header .header-title {
    display: block !important; position: static !important; flex: 1; min-width: 0; margin: 0 !important; padding: 0 0 0 10px !important;
    text-align: left !important; font-size: 18px !important; font-weight: 700 !important; color: var(--mx-text) !important; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto !important;
  }
  body.task-addressbook.mx-has-bar #layout-list > .header, body.task-settings.mx-has-bar #layout-list > .header { padding: 0 10px !important; }
  body.task-addressbook.mx-has-bar #layout-list > .header .toolbar { margin-left: auto !important; }
  body.task-addressbook.mx-has-bar #layout-list, body.task-settings.mx-has-bar #layout-list { flex: 0 0 340px !important; max-width: 340px !important; min-width: 0 !important; }
  /* Rows */
  body.mx-has-bar #layout-list .listing tbody tr td, body.mx-has-bar #layout-list .listing li { border-color: var(--mx-line) !important; }
  body.task-addressbook.mx-has-bar #layout-list .listing tr.selected td,
  body.task-settings.mx-has-bar #layout-list .listing tr.selected td,
  body.task-settings.mx-has-bar #layout-list .listing li.selected,
  body.task-settings.mx-has-bar #layout-list .listing li.selected > a {
    background: var(--mx3-active) !important; color: var(--mx-text) !important; font-weight: 650;
  }
  body.task-addressbook.mx-has-bar #layout-list .listing tr.selected td:before,
  body.task-settings.mx-has-bar #layout-list .listing tr.selected td:before,
  body.task-settings.mx-has-bar #layout-list .listing li.selected > a:before { color: var(--mx-text) !important; }
  body.mx-has-bar #layout-list .listing tr.focused > td, body.mx-has-bar #layout-list .listing li.focused { outline: 0 !important; }
  body.mx-has-bar #layout-list #contacts-table tbody tr td { height: 56px; border-left: 0 !important; box-shadow: none !important; }
  body.mx-has-bar #layout-list #contacts-table tbody tr:hover td, body.task-settings.mx-has-bar #layout-list .listing tr:hover td { background: var(--mx-sunk); }
  body.task-settings.mx-has-bar #sections-table tbody tr td { height: 50px; font-size: 14.5px; }
  body.mx-has-bar #layout-list .listing tr td { border-left: 0 !important; }
  body.mx-has-bar #layout-list .listing tr.selected td:first-child { box-shadow: none !important; }
  /* Sidebar lists (address books, settings sections) */
  body.mx-has-bar #directorylist li > a, body.mx-has-bar #settings-menu li > a, body.mx-has-bar #savedsearchlist li > a {
    display: flex !important; align-items: center; gap: 12px; height: 42px; margin: 1px 12px; padding: 0 12px !important; border-radius: 10px;
    color: var(--mx-text) !important; font-size: 14.5px; font-weight: 500; width: auto !important;
  }
  body.mx-has-bar #directorylist li > a:before, body.mx-has-bar #settings-menu li > a:before {
    content: "" !important; position: static !important; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important;
    background: currentColor; opacity: .85; font-size: 0 !important;
    -webkit-mask: var(--mx-ic) center / contain no-repeat; mask: var(--mx-ic) center / contain no-repeat;
  }
  body.mx-has-bar #directorylist li, body.mx-has-bar #settings-menu li { background: transparent !important; border: 0 !important; }
  body.mx-has-bar #directorylist li > a:hover, body.mx-has-bar #settings-menu li > a:hover { background: var(--mx3-active) !important; }
  body.mx-has-bar #directorylist li.selected > a, body.mx-has-bar #settings-menu li.selected > a {
    background: var(--mx3-active) !important; color: var(--mx-text) !important; font-weight: 650; box-shadow: none !important;
  }
  body.mx-has-bar #directorylist li ul li > a { padding-left: 44px !important; }
  body.mx-has-bar #directorylist li.contactgroup > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18.5 20a6.5 6.5 0 0 0-3-5.5'/%3E%3C/svg%3E"); }
  body.mx-has-bar #directorylist li.addressbook > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5z'/%3E%3Ccircle cx='11' cy='10' r='2.5'/%3E%3Cpath d='M7.5 16a3.5 3.5 0 0 1 7 0M19 8h2M19 12h2M19 16h2'/%3E%3C/svg%3E"); }
  body.mx-has-bar #settings-menu li > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
  body.mx-has-bar #settings-menu li.preferences > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
  body.mx-has-bar #settings-menu li.folders > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); }
  body.mx-has-bar #settings-menu li.identities > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16a3 3 0 0 1 6 0M14 10h4M14 14h3'/%3E%3C/svg%3E"); }
  body.mx-has-bar #settings-menu li.responses > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E"); }
  /* Contact card: flat */
  body.task-addressbook .contact-header, body.task-addressbook #contacthead { background: var(--mx-card) !important; }
}

@media (min-width: 769px) {
  body.task-settings.mx-has-bar #sections-table tbody tr td.section { display: flex !important; align-items: center; gap: 12px; padding-left: 16px !important; }
  body.task-settings.mx-has-bar #sections-table tbody tr td.section:before {
    content: "" !important; position: static !important; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important;
    background: currentColor; opacity: .85; font-size: 0 !important; color: var(--mx-text) !important;
    -webkit-mask: var(--mx-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E")) center / contain no-repeat; mask: var(--mx-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E")) center / contain no-repeat;
  }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowgeneral td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowmailbox td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowmailview td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowcompose td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowaddressbook td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18.5 20a6.5 6.5 0 0 0-3-5.5'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowfolders td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowserver td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tr#rcmrowencryption td.section { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
  body.task-settings.mx-has-bar #sections-table tbody tr td.section:before { background-color: var(--mx-text) !important; }
  body.task-settings.mx-has-bar #layout-content > .header:not(:has(.toolbar)) { display: none !important; }
  body.task-settings.mx-has-bar #layout-content { border-left: 0; }
}
/* Preference pages: white page, sections instead of cards */
html.iframe.task-settings, html.iframe body.task-settings, html.iframe body.task-addressbook { background: var(--mx-card) !important; }
html.iframe body.task-settings .formcontent, html.iframe body.task-settings form.propform { max-width: 880px; }
html.iframe body.task-settings .formcontent { padding: 24px 32px 0 !important; }
body.task-settings .formcontent > fieldset, body.task-settings form > fieldset, body.task-settings .propform > fieldset,
body.task-settings #preferences-details fieldset, body.task-settings .formcontent fieldset.main {
  margin: 0 0 28px !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent;
}
body.task-settings fieldset > legend { font-size: 17px !important; margin-bottom: 6px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--mx-line) !important; }
body.task-settings table.propform td .custom-select, body.task-settings table.propform td select.form-control,
body.task-settings table.propform td input.form-control { border-radius: 10px; }
.task-addressbook .formbuttons, .task-settings .formbuttons, html.iframe .formbuttons {
  margin: 0 !important; padding: 12px 32px !important; background: var(--mx-card) !important; border-top: 1px solid var(--mx-line) !important;
}
.formbuttons .btn { border-radius: 12px; box-shadow: none !important; }
html.dark-mode body.task-mail #messagebody .message-htmlpart { padding: 16px 18px !important; border-radius: 12px; }
@media (max-width: 768px) {
  body.task-mail.action-show #message-header, body.task-mail.action-preview #message-header { padding: 18px 16px 4px !important; }
  body.task-mail.action-show #message-content, body.task-mail.action-preview #message-content { padding: 8px 16px 0 !important; }
  body.task-mail #message-header .header-summary > span > .adr a.rcmContactAddress:after { content: none; }
  body.task-mail #message-header .header-summary > span > .text-nowrap { flex-basis: 100%; margin-left: 0; padding-left: 0; }
}

/* =====================================================================
   Medialix Mail 3 — phase 3: phone in the clean look, dark mode polish
   ===================================================================== */
html.dark-mode { color-scheme: dark; }
html:not(.dark-mode) { color-scheme: light; }
html.dark-mode .mx-lay { background: rgba(255, 255, 255, .04); }
html.dark-mode .mx-gear-opt input:checked ~ .mx-lay b, html.dark-mode .mx-gear-opt input:checked ~ .mx-lay em { background: rgba(255, 122, 156, .45); }
html.dark-mode body.mx-has-bar .mx-bar-search .searchbar:hover { border-color: #3a3a48 !important; }
html.dark-mode .mx-listbar-chips .mx-chips button:not(.on) { background: transparent; }
html.dark-mode body.task-addressbook .contact-header, html.dark-mode body.task-addressbook #contacthead { background: var(--mx-card) !important; }

@media (max-width: 768px) {
  body.mx-has-bar, body:not(.task-login), #layout { background: var(--mx-card) !important; }
  #layout > div > .header {
    background: var(--mx-card) !important; color: var(--mx-text) !important;
    border-bottom: 1px solid var(--mx-line) !important;
  }
  #layout > div > .header .header-title { color: var(--mx-text) !important; font-size: 18px; }
  #layout > div > .header a.button,
  #layout > div > .header a.button:before { color: var(--mx-text) !important; }
  #layout > div > .header a.button:active { background: var(--mx3-active) !important; }
  #layout-list > .searchbar { border-radius: 0; }
  #layout-sidebar > .scroller { border-radius: 0; }
  #layout-list > .searchbar input { border-radius: 12px !important; background: var(--mx-card) !important; }
  .mx-chips button.on { background: var(--mx-text); border-color: var(--mx-text); color: var(--mx-card); }
  html.dark-mode .mx-chips button.on { background: var(--mx-brand); border-color: var(--mx-brand); color: #fff; }
  #layout-menu.popover .popover-header { background: var(--mx-card) !important; color: var(--mx-text) !important; border-bottom: 1px solid var(--mx-line); }
  #layout-menu.popover .popover-header a, #layout-menu.popover .popover-header a:before { color: var(--mx-text) !important; }
  #layout-menu.popover #taskmenu a.selected { background: var(--mx3-active) !important; color: var(--mx-text) !important; }
  /* Folder drawer: grey highlight like the desktop */
  #layout-sidebar > .scroller .listing li.selected > a { background: var(--mx3-active) !important; box-shadow: none !important; }
  .folderlist li.mailbox .unreadcount { background: var(--mx-brand) !important; color: #fff !important; border-radius: 999px; padding: 0 7px !important; min-width: 22px; text-align: center; }
  /* Rows: no coloured stripe, unread shown by the dot and bold text */
  #messagelist tbody tr.unread td.subject { box-shadow: none !important; }
  .floating-action-buttons a { border-radius: 16px !important; }
}
@media (max-width: 768px) {
  .footer.content-frame-navigation, #layout > div > .footer.toolbar { background: var(--mx-card) !important; border-top: 1px solid var(--mx-line) !important; }
  .footer.content-frame-navigation a.button, .footer.content-frame-navigation a.button:before,
  #layout > div > .footer.toolbar a.button, #layout > div > .footer.toolbar a.button:before { color: var(--mx-text) !important; }
  .footer.content-frame-navigation a.button.disabled, #layout > div > .footer.toolbar a.button.disabled { opacity: .35; }
}
.task-addressbook .contact-header { background: var(--mx-card) !important; }

/* Folder icons on phones too (same outline set as the desktop) */
#mailboxlist li.mailbox > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); }
#mailboxlist li.mailbox.inbox > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E"); }
#mailboxlist li.mailbox.drafts > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
#mailboxlist li.mailbox.sent > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E"); }
#mailboxlist li.mailbox.junk > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E"); }
#mailboxlist li.mailbox.trash > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
#mailboxlist li.mailbox.archive > a { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4'/%3E%3C/svg%3E"); }
@media (max-width: 768px) {
  #layout-sidebar #mailboxlist li.mailbox > a:before {
    content: "" !important; width: 20px !important; height: 20px !important; min-width: 0 !important; border-radius: 0 !important;
    background: var(--mx-text) !important; opacity: .85; font-size: 0 !important; box-shadow: none !important;
    -webkit-mask: var(--mx-ic) center / contain no-repeat; mask: var(--mx-ic) center / contain no-repeat;
  }
  #layout-sidebar #mailboxlist li.mailbox.selected > a:before { opacity: 1; }
  html body #layout-sidebar .folderlist li.mailbox .unreadcount {
    background: var(--mx-brand) !important; color: #fff !important; border-radius: 999px !important; font-weight: 700;
  }
  #layout-sidebar a.mx-newmail { border-radius: 14px !important; box-shadow: none !important; }
}
@media (max-width: 768px) {
  html body #layout-sidebar .folderlist li.mailbox .unreadcount { top: 50% !important; transform: translateY(-50%); margin: 0 12px 0 0 !important; line-height: 22px !important; min-width: 22px; height: 22px; padding: 0 7px !important; }
  #layout-sidebar > .scroller .listing li > a { margin-right: 14px !important; }
}

@media (min-width: 769px) {
  .mx-listbar-chips { overflow-x: auto !important; scrollbar-width: none; }
  .mx-listbar-chips::-webkit-scrollbar { display: none; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .mx-listbar-pages .pagenav .pagenav-text { display: none; }
  html.mx-row #messagelist tbody tr td.subject span.fromto { flex-basis: 160px; }
}
@media (min-width: 769px) {
  body.task-addressbook.mx-has-bar #layout-list > .header, body.task-settings.mx-has-bar #layout-list > .header { flex-wrap: nowrap !important; }
  body.task-addressbook.mx-has-bar #layout-list > .header a.button.toolbar-list-button,
  body.task-addressbook.mx-has-bar #layout-list > .header a.button.back-sidebar-button,
  body.task-settings.mx-has-bar #layout-list > .header a.button.back-sidebar-button {
    position: static !important; flex: none; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important;
    display: grid !important; place-items: center; border-radius: 999px; color: var(--mx-text) !important;
  }
  body.task-addressbook.mx-has-bar #layout-list > .header a.button:before, body.task-settings.mx-has-bar #layout-list > .header a.button:before { margin: 0 !important; line-height: 1 !important; }
  body.task-addressbook.mx-has-bar #layout-list > .header a.button .inner, body.task-settings.mx-has-bar #layout-list > .header a.button .inner { display: none !important; }
  html.layout-large body.task-addressbook.mx-has-bar #layout-list > .header a.button.toolbar-list-button { display: none !important; }
}
/* Header round buttons: Elastic adds .btn padding to them, which pushed the icons off-centre */
#mx-bar .mx-bar-btn, #mx-bar .mx-avatar-btn { padding: 0 !important; line-height: 0 !important; display: inline-grid !important; place-items: center; }
#mx-bar .mx-bar-btn svg { display: block; margin: 0; }

/* ---------- Apps launcher: soft tinted tiles with duotone icons ---------- */
.mx-app-ic {
  width: 52px; height: 52px; border-radius: 16px; box-shadow: none !important;
  background: color-mix(in srgb, var(--c1) 11%, var(--mx-card)) !important; color: var(--c1);
  outline: 1px solid color-mix(in srgb, var(--c1) 14%, transparent); outline-offset: -1px;
  transition: transform .15s ease, background-color .15s ease;
}
.mx-app-ic svg { width: 26px; height: 26px; }
html.dark-mode .mx-app-ic { background: color-mix(in srgb, var(--c2) 14%, var(--mx-card)) !important; color: var(--c2); outline-color: color-mix(in srgb, var(--c2) 20%, transparent); }
.mx-app:hover .mx-app-ic, .mx-app:focus-visible .mx-app-ic { transform: translateY(-2px); background: color-mix(in srgb, var(--c1) 17%, var(--mx-card)) !important; }
html.dark-mode .mx-app:hover .mx-app-ic { background: color-mix(in srgb, var(--c2) 22%, var(--mx-card)) !important; }
.mx-app:hover, .mx-app:focus-visible { background: transparent; }
.mx-app-name { font-weight: 550; color: var(--mx-text); }
.mx-apps-search { border-radius: 12px; }
.mx-create-ic {
  width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--mx-sunk); color: var(--mx-text);
  transition: background-color .15s ease, color .15s ease;
}
.mx-create:hover .mx-create-ic, .mx-create:focus-visible .mx-create-ic { background: var(--mx-brand-soft); color: var(--mx-brand-ink); }
.mx-create:hover, .mx-create:focus-visible { background: transparent; }
.mx-create-ic i { right: -4px; bottom: -4px; width: 18px; height: 18px; font-size: 12px; }
.mx-apps-all { border-radius: 14px; }
@media (min-width: 769px) {
  body.mx-has-bar .mx-apps-pop { left: auto; right: 12px; top: calc(var(--mx3-bar-h) - 2px); width: 520px; }
}
/* Header brand: MEDIALIX wordmark | Mail */
#mx-bar .mx-bar-brand img.mx-wm { width: auto !important; height: 17px !important; border-radius: 0 !important; display: block; }
#mx-bar .mx-bar-brand .mx-wm-white { display: none !important; }
html.dark-mode #mx-bar .mx-bar-brand .mx-wm-ink { display: none !important; }
html.dark-mode #mx-bar .mx-bar-brand .mx-wm-white { display: block !important; }
#mx-bar .mx-bar-brand { gap: 0 !important; }
#mx-bar .mx-bar-brand span { font-size: 17px; }
#mx-bar .mx-bar-brand i { margin: 0 10px 0 11px !important; height: 18px !important; }

/* ---------- Search options: dropdown card under the header search box ---------- */
@media (min-width: 769px) {
  body.mx-has-bar .mx-bar-search { position: relative; }
  body.mx-has-bar .mx-bar-search > #searchmenu {
    position: absolute !important; top: 52px; left: 0; right: 0; z-index: 70; width: auto !important; height: auto !important;
    max-height: calc(100vh - 90px); overflow: auto; margin: 0 !important; padding: 18px 20px 16px !important;
    border: 1px solid var(--mx-line) !important; border-radius: 16px; background: var(--mx-card) !important; color: var(--mx-text);
    box-shadow: 0 24px 50px -16px rgba(16, 24, 40, .35);
  }
  html.dark-mode body.mx-has-bar .mx-bar-search > #searchmenu { box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .7); }
  body.mx-has-bar .mx-bar-search > #searchmenu.hidden { display: none !important; }
  #searchmenu .formcontent { padding: 0 !important; background: transparent !important; }
  /* "Search in": toggle chips */
  #searchmenu ul.proplist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px !important; padding: 0 !important; list-style: none; }
  #searchmenu ul.proplist:before { content: "Search in"; flex: 1 0 100%; margin-bottom: 2px; color: var(--mx-muted); font-size: 12.5px; font-weight: 650; }
  #searchmenu ul.proplist li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  #searchmenu ul.proplist .custom-control { position: relative; min-height: 0; padding: 0 !important; margin: 0; }
  #searchmenu ul.proplist .custom-control-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  #searchmenu ul.proplist .custom-control-label {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; margin: 0;
    border: 1px solid var(--mx-line); border-radius: 999px; background: var(--mx-card); color: var(--mx-text);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
  }
  #searchmenu ul.proplist .custom-control-label:before, #searchmenu ul.proplist .custom-control-label:after { display: none !important; }
  #searchmenu ul.proplist .custom-control-label:hover { border-color: #c9cad3; }
  #searchmenu ul.proplist .custom-control-input:checked + .custom-control-label { background: var(--mx-brand-soft); border-color: var(--mx-brand); color: var(--mx-brand-ink); }
  #searchmenu ul.proplist .custom-control-input:checked + .custom-control-label { padding-left: 10px; }
  #searchmenu ul.proplist .custom-control-input:checked + .custom-control-label:before {
    display: block !important; content: "" !important; position: static !important; width: 14px; height: 14px; border: 0 !important; box-shadow: none !important;
    background: currentColor !important; border-radius: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #searchmenu ul.proplist .custom-control-input:disabled + .custom-control-label { opacity: .5; cursor: default; }
  #searchmenu ul.proplist .custom-control-input:focus-visible + .custom-control-label { outline: 2px solid var(--mx-brand); outline-offset: 2px; }
  /* Type / Date / Scope: label on the left, plain select on the right */
  #searchmenu .input-group { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; margin: 0 !important; padding: 8px 0; border-top: 1px solid var(--mx-line); }
  #searchmenu .input-group-prepend { flex: 0 0 110px; margin: 0 !important; }
  #searchmenu .input-group-prepend .input-group-text {
    width: 100%; height: auto; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: var(--mx-muted) !important; font-size: 13.5px; font-weight: 600; justify-content: flex-start;
  }
  #searchmenu .input-group .custom-select {
    flex: 1; min-width: 0; height: 38px; border: 1px solid var(--mx-line) !important; border-radius: 10px !important;
    background-color: var(--mx-card) !important; color: var(--mx-text) !important; font-size: 14px; box-shadow: none !important;
  }
  #searchmenu .input-group .custom-select:focus { border-color: var(--mx-brand) !important; box-shadow: 0 0 0 3px var(--mx-brand-soft) !important; }
  #searchmenu .formbuttons {
    position: static !important; display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 0 !important; padding: 12px 0 0 !important;
    border-top: 1px solid var(--mx-line) !important; background: transparent !important;
  }
  #searchmenu .formbuttons .btn { width: auto !important; height: 40px; padding: 0 22px; border-radius: 10px !important; font-size: 14px; }
}

/* ---------- Compose opens beside the folders, in place of the inbox list ---------- */
@media (min-width: 769px) {
  html[class] body.task-mail.action-none.mx-has-bar.mx-composing #layout > #layout-content { display: flex !important; flex: 1 1 auto !important; max-width: none !important; }
  /* The inbox list steps aside while writing: folders on the left, the new email fills the rest */
  html[class] body.task-mail.action-none.mx-has-bar.mx-composing #layout > #layout-list { display: none !important; }
  html[class] body.task-mail.action-none.mx-has-bar.mx-composing #layout-content > .header { display: none !important; }
  html[class] body.task-mail.action-none.mx-has-bar.mx-composing #layout-content > .iframe-wrapper { height: 100% !important; top: 0 !important; }
  /* In the narrower list, the row layout drops the avatar and squeezes the sender */
  html.mx-row body.mx-composing #messagelist tbody tr td.subject span.fromto { flex-basis: 130px; }
  html.mx-row body.mx-composing #messagelist tbody tr td.subject .mx-av { display: none; }
  html.mx-row body.mx-composing .mx-listbar-pages .pagenav .pagenav-text { display: none; }
}
/* The compose page inside that pane */
html.mx-compose-pane body.action-compose #layout-sidebar { display: none !important; }
html.mx-compose-pane.mx-opts-open body.action-compose #layout-sidebar {
  display: flex !important; position: absolute; top: 58px; right: 0; bottom: 0; z-index: 20; width: 300px !important;
  box-shadow: -18px 0 40px -20px rgba(16, 24, 40, .35);
}
html.mx-compose-pane body.action-compose #layout-content { flex: 1 1 auto !important; max-width: none !important; width: 100% !important; }
html.mx-compose-pane body.action-compose #layout-content > .header {
  display: flex !important; align-items: center; height: 58px; padding: 0 10px 0 6px !important; background: var(--mx-card) !important;
  border-bottom: 1px solid var(--mx-line) !important;
}
html.mx-compose-pane body.action-compose #layout-content > .header .header-title {
  display: block !important; position: static !important; margin: 0 10px 0 10px !important; font-size: 17px !important; font-weight: 700 !important; color: var(--mx-text) !important; width: auto !important;
}
html.mx-compose-pane body.action-compose #layout-content > .header a.task-menu-button { display: none !important; }
html.mx-compose-pane #messagetoolbar { display: flex !important; align-items: center; gap: 2px; margin: 0 !important; }
html.mx-compose-pane #messagetoolbar a {
  display: inline-flex !important; align-items: center; gap: 7px; height: 36px !important; padding: 0 10px !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: var(--mx-text) !important; font-size: 13.5px; min-width: 0 !important; width: auto !important;
}
html.mx-compose-pane #messagetoolbar a:before { position: static !important; margin: 0 !important; font-size: 14px !important; line-height: 1 !important; height: auto !important; width: auto !important; }
html.mx-compose-pane #messagetoolbar a .inner { display: inline !important; position: static !important; }
html.mx-compose-pane #messagetoolbar a:not(.disabled):hover { background: var(--mx3-active) !important; }
html.mx-compose-pane #messagetoolbar a.disabled { opacity: .4; }
html.mx-compose-pane #messagetoolbar a.options { display: inline-flex !important; }
html.mx-compose-pane.mx-opts-open #messagetoolbar a.options { background: var(--mx3-active) !important; }
html.mx-compose-pane #messagetoolbar .spacer { display: none; }
.mx-compose-close {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: auto; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--mx-muted); cursor: pointer;
}
.mx-compose-close:hover { background: var(--mx3-active); color: var(--mx-text); }
html.mx-compose-pane body.action-compose #compose-content > form.formcontent { padding: 6px 22px 0 !important; }
html.mx-compose-pane body.action-compose #compose-content > .formbuttons { padding: 12px 22px 14px !important; }
html.mx-compose-pane #mx-tabs, html.mx-compose-pane .floating-action-buttons { display: none !important; }
html.mx-compose-pane, html.mx-compose-pane body.action-compose { height: 100%; }
html.mx-compose-pane body.action-compose { display: flex; flex-direction: row; margin: 0; overflow: hidden; position: relative; }
html.mx-compose-pane body.action-compose #layout-content,
html.mx-compose-pane body.action-compose #layout-content.hidden { display: flex !important; flex-direction: column; height: 100%; min-width: 0; }
html.mx-compose-pane body.action-compose #layout-content > #compose-content { flex: 1; min-height: 0; overflow: auto; }
/* Elastic folds the compose toolbar into a "⋮" menu inside the frame; show it as a normal toolbar instead */
html.mx-compose-pane body.action-compose #layout-content > .header > a.toolbar-menu-button,
html.mx-compose-pane body.action-compose #layout-content > .header > a.toolbar-list-button { display: none !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar {
  display: flex !important; position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important;
  align-items: center; gap: 2px; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
  width: auto !important; height: auto !important; list-style: none;
}
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar li { display: inline-flex !important; border: 0 !important; background: transparent !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar li.spacer { display: none !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a {
  display: inline-flex !important; align-items: center; gap: 7px; height: 36px !important; padding: 0 10px !important; margin: 0 !important;
  border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--mx-text) !important;
  font-size: 13.5px; font-weight: 550; white-space: nowrap; min-width: 0 !important; width: auto !important;
}
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a:before { position: static !important; margin: 0 !important; font-size: 14px !important; line-height: 1 !important; width: auto !important; height: auto !important; color: inherit !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a .inner { display: inline !important; position: static !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a:not(.disabled):hover { background: var(--mx3-active) !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a.disabled { opacity: .4; }
html.mx-compose-pane.mx-opts-open body.action-compose #layout-content > .header ul.toolbar a.options { background: var(--mx3-active) !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar li { flex: none !important; width: auto !important; max-width: none !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a .inner { overflow: visible !important; text-overflow: clip !important; width: auto !important; max-width: none !important; }
html.mx-compose-pane.mx-opts-open body.action-compose #layout-sidebar, html.mx-compose-pane.mx-opts-open body.action-compose #layout-sidebar > .scroller { background: var(--mx-card) !important; }
html.mx-compose-pane.mx-opts-open body.action-compose #layout-sidebar { border-left: 1px solid var(--mx-line) !important; flex-direction: column; }
html.mx-compose-pane.mx-opts-open body.action-compose #layout-sidebar > .header { display: none !important; }
html.mx-compose-pane.mx-opts-open body.action-compose #layout-sidebar > .scroller { flex: 1; overflow: auto; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar { overflow: visible !important; padding-right: 8px !important; }
/* Compose toolbar in the pane: vertically centred, full labels */
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar { align-self: center !important; height: auto !important; align-items: center !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar li { align-items: center !important; height: auto !important; }
html.mx-compose-pane body.action-compose #layout-content > .header ul.toolbar a { max-width: none !important; min-width: 0 !important; flex: none !important; justify-content: center; }
html.mx-compose-pane body.action-compose #layout-content > .header .header-title { line-height: 1.2 !important; align-self: center; }
/* Recipient chips in compose: name and ✕ on one centred line */
body.action-compose ul.recipient-input li.recipient { display: inline-flex !important; align-items: center !important; gap: 6px; height: 30px; line-height: 1 !important; padding: 0 6px 0 12px !important; vertical-align: middle; }
body.action-compose ul.recipient-input li.recipient span.name { display: block; line-height: 1 !important; }
body.action-compose ul.recipient-input li.recipient span.email { display: none !important; }
body.action-compose ul.recipient-input li.recipient a.button.remove {
  display: block !important; flex: none; position: static !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important;
  border-radius: 999px; background: currentColor !important; color: var(--mx-muted) !important; opacity: .8; font-size: 0 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat;
}
body.action-compose ul.recipient-input li.recipient a.button.remove:before { display: none !important; }
body.action-compose ul.recipient-input li.recipient a.button.remove:hover { opacity: 1; color: var(--mx-text) !important; }

/* Search dropdown: chip labels centred (selected = filled, no tick), Search button centred */
@media (min-width: 769px) {
  #searchmenu ul.proplist .custom-control-label { justify-content: center; line-height: 1 !important; padding: 0 14px !important; }
  #searchmenu ul.proplist .custom-control-input:checked + .custom-control-label { padding: 0 14px !important; background: var(--mx-brand) !important; border-color: var(--mx-brand) !important; color: #fff !important; }
  #searchmenu ul.proplist .custom-control-input:checked + .custom-control-label:before { display: none !important; }
  #searchmenu .formbuttons { justify-content: center !important; text-align: center !important; }
  #searchmenu .formbuttons .btn { min-width: 160px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; float: none !important; }
  #searchmenu .input-group-prepend .input-group-text { align-items: center; display: flex; }
}
@media (min-width: 769px) {
  #searchmenu .formbuttons { justify-content: flex-end !important; text-align: right !important; }
  #searchmenu .formbuttons .btn { min-width: 0; padding: 0 20px !important; gap: 8px; line-height: 1 !important; }
  #searchmenu .formbuttons .btn:before {
    position: static !important; display: block !important; float: none !important; margin: 0 !important; padding: 0 !important;
    width: auto !important; height: auto !important; line-height: 1 !important; font-size: 15px !important; transform: none !important;
  }
}
@media (min-width: 769px) {
  #searchmenu .formbuttons { justify-content: flex-start !important; text-align: left !important; }
}
/* Phone menu header: MEDIALIX wordmark | Mail (same as the desktop header) */
@media (max-width: 768px) {
  #layout-menu.popover .popover-header img#logo { display: none !important; }
  #layout-menu.popover .popover-header:before {
    content: "" !important; display: block !important; position: static !important; order: 0; flex: none; width: 112px !important; height: 17px !important; margin: 0 !important;
    background: url("../images/medialix-wordmark.png") left center / contain no-repeat !important;
  }
  html.dark-mode #layout-menu.popover .popover-header:before { background-image: url("../images/medialix-wordmark-white.png") !important; }
  #layout-menu.popover .popover-header:after {
    content: "Mail" !important; order: 1; flex: 1; margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--mx-line);
    color: var(--mx-muted) !important; font-size: 17px !important; font-weight: 500 !important; line-height: 18px;
  }
  #layout-menu.popover .popover-header a.cancel, #layout-menu.popover .popover-header a.cancel:before { color: var(--mx-text) !important; }
}

/* =====================================================================
   Phone 3.2: outline app-bar icons, left title, compact pager, Compose pill
   ===================================================================== */
@media (max-width: 768px) {
  #layout > div > .header { height: 56px !important; padding: 0 6px !important; }
  #layout > div > .header a.button.task-menu-button,
  #layout > div > .header a.button.back-sidebar-button,
  #layout > div > .header a.button.toolbar-menu-button,
  #layout > div > .header a.button.toolbar-button.refresh,
  #layout > div > .header a.button.back-list-button,
  #layout > div > .header a.button.back-content-button,
  #layout > div > .header a.button.sidebar-menu {
    width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; border-radius: 999px;
    display: inline-grid !important; place-items: center;
  }
  #layout > div > .header a.button.task-menu-button:before,
  #layout > div > .header a.button.back-sidebar-button:before,
  #layout > div > .header a.button.toolbar-menu-button:before,
  #layout > div > .header a.button.toolbar-button.refresh:before,
  #layout > div > .header a.button.back-list-button:before,
  #layout > div > .header a.button.back-content-button:before,
  #layout > div > .header a.button.sidebar-menu:before,
  #layout > div > .header a.button.toolbar-list-button:before {
    content: "" !important; display: block !important; position: static !important; width: 22px !important; height: 22px !important; margin: 0 !important;
    background: var(--mx-text) !important; font-size: 0 !important;
    -webkit-mask: var(--mx-ic) center / contain no-repeat; mask: var(--mx-ic) center / contain no-repeat;
  }
  #layout > div > .header a.button .inner { display: none !important; }
  #layout > div > .header a.button:active { background: var(--mx3-active) !important; }
  #layout > div > .header a.button.task-menu-button { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.back-sidebar-button { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.toolbar-menu-button { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='18.5' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.toolbar-button.refresh { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.back-list-button { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.back-content-button { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.sidebar-menu { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='18.5' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
  #layout > div > .header a.button.toolbar-list-button { --mx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='18.5' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
  /* Title on the left, like an app */
  #layout > div > .header .header-title {
    position: static !important; flex: 1; min-width: 0; margin: 0 4px !important; padding: 0 !important; text-align: left !important;
    font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #layout > div > .header { display: flex !important; align-items: center; gap: 0; }
  /* Rows: no size, quieter day labels */
  #messagelist tbody tr td.subject span.size { display: none !important; }
  #messagelist tbody tr.mx-gstart td.subject:before { font-size: 12px; letter-spacing: 0; background: var(--mx-card); }
  /* Pager: one small line */
  #layout-list > .pagenav { height: 40px !important; padding: 0 8px !important; border-top: 1px solid var(--mx-line) !important; background: var(--mx-card) !important; }
  #layout-list > .pagenav a.firstpage, #layout-list > .pagenav a.lastpage, #layout-list > .pagenav .rcpagejumper { display: none !important; }
  #layout-list > .pagenav .pagenav-text { color: var(--mx-muted); font-size: 12.5px; }
  /* Compose: a crimson pill with a label */
  .floating-action-buttons a.button.compose, .floating-action-buttons a.compose {
    width: auto !important; height: 52px !important; padding: 0 20px 0 16px !important; border-radius: 16px !important;
    display: inline-flex !important; align-items: center; gap: 10px; background: var(--mx-brand) !important; color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(198, 0, 53, .8) !important; text-decoration: none !important;
  }
  .floating-action-buttons a.compose:before {
    content: "" !important; display: block !important; position: static !important; width: 20px !important; height: 20px !important; margin: 0 !important;
    background: #fff !important; font-size: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .floating-action-buttons a.compose .inner { display: inline !important; position: static !important; font-size: 15px; font-weight: 700; color: #fff; }
}
@media (max-width: 768px) {
  #layout > div > .header a.button.toolbar-list-button { width: 44px !important; height: 44px !important; padding: 0 !important; place-items: center; border-radius: 999px; }
}