/* Cloud Ninza webmail = the Cloud Ninza customer dashboard look (owner, 2026-11-14: "exactly like the customer
   dashboard: left sidebar menus, theme, font size, buttons, colours, compact"). Values copied from the dashboard's
   computed styles (public/css/console*.css + dash-theme.css): dark #16191F top bar, white 252px-style sidebar with
   30 px pill rows at 13.5 px, the pastel gradient tint on the current item, #F4F4F7 page, Commissioner 14 px,
   solid #7C3AED primary pills and violet-outlined secondary pills, #E6E6EE hairlines.
   Loaded after cloudninza-elastic.css (Elastic recoloured at install). Gmail-style mailboxes (body.cn-g) keep cn-gmail.css. */

/* ---------- Everywhere (also inside the message and compose frames) ---------- */
body, input, select, textarea, button, .popover, .ui-dialog, .toolbar a, .menu a, #layout-menu a, .listing li,
table.records-table, table.messagelist, .formcontent, .header-title, h1, h2, h3, .boxtitle, legend, label {
  font-family: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { font-size: 14px; }
/* Buttons exactly like the dashboard: pills, 2px border, 600 weight */
.btn, button.btn, .button, a.button.btn, input.button, .ui-dialog .ui-button, .ui-dialog-buttonset .btn {
  border-radius: 999px !important; font-weight: 600 !important; font-size: 14px !important;
}
.btn-primary, .button.mainaction, button.mainaction, input.mainaction, .ui-dialog .mainaction, .btn.mainaction {
  background: #7C3AED !important; border: 2px solid #7C3AED !important; color: #fff !important; box-shadow: none !important;
}
.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover, .ui-dialog .mainaction:hover, .btn.mainaction:hover { background: #6D28D9 !important; border-color: #6D28D9 !important; color: #fff !important; }
.btn-secondary, .ui-dialog .ui-button:not(.mainaction), .btn.cancel, button.cancel, .formbuttons .btn:not(.btn-primary):not(.mainaction) {
  background: #fff !important; border: 2px solid #7C3AED !important; color: #7C3AED !important; box-shadow: none !important;
}
.btn-secondary:hover, .ui-dialog .ui-button:not(.mainaction):hover, .formbuttons .btn:not(.btn-primary):not(.mainaction):hover { background: #F1ECFD !important; }
/* Fields like the dashboard */
.form-control, input[type=text], input[type=password], input[type=email], input[type=search], select.custom-select, textarea {
  border-radius: 10px !important; border-color: #E6E6EE !important; font-size: 14px !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: #7C3AED !important; box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; outline: 0 !important; }
a, .link { color: #673DE6; }
/* Never mention the engine; no About entry */
.about-link, a[href*="roundcube.net"], #rcmloginfooter, #login-footer, .support-link a[href*="roundcube.net"], #taskmenu a.about, .menu a.about, a.about { display: none !important; }

/* ---------- Sign-in screen (direct sign-in with the mailbox password) ---------- */
body.task-login { background: linear-gradient(120deg, #FBE7EF 0%, #F1E7FC 50%, #E4EDFF 100%) !important; }
body.task-login #layout-content { background: transparent !important; }
body.task-login form { background: #fff; border-radius: 22px; padding: 28px 26px; box-shadow: 0 24px 60px -30px rgba(103,61,230,.45); }
body.task-login #logo { max-width: 240px; }

/* ---------- Large and normal screens: the dashboard layout ---------- */
html:is(.layout-large,.layout-normal) body:not(.cn-g):not(.task-login) { background: #F4F4F7 !important; color: #1C1C26; }

/* One dark top bar across the window, like the dashboard's: every pane header is part of it */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu .popover-header {
  background: #16191F !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
  height: 52px !important; min-height: 52px !important; line-height: 52px !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .header-title { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 52px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.icon,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .dropbutton:after {
  color: #B4B8C4 !important; background: transparent !important; border: 0 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a {
  font-size: 11px !important; font-weight: 500 !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important;
  padding: 5px 8px 4px !important; margin: 4px 1px 0 !important; border-radius: 10px !important; min-width: 0 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a:before { display: block !important; font-size: 15px !important; height: 18px !important; line-height: 18px !important; margin: 0 auto 1px !important; color: inherit !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a:not(.disabled):hover,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a:not(.disabled):focus { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a.disabled { color: #6B7080 !important; opacity: .7 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar-menu-button, html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.icon { color: #fff !important; }

/* Left menu = the dashboard sidebar */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu {
  width: 220px !important; min-width: 220px !important; max-width: 220px !important; flex: 0 0 220px !important;
  background: #fff !important; border-right: 1px solid #E6E6EE !important; padding: 0 !important; position: relative !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu .popover-header { padding: 0 18px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu #logo { max-width: 118px !important; max-height: 24px !important; width: auto !important; margin: 0 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu { padding: 10px 8px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important;
  width: auto !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; box-sizing: border-box !important;
  height: 30px !important; min-height: 30px !important; line-height: 18px !important; padding: 5px 10px !important; margin: 1px 0 !important;
  border-radius: 999px !important; text-align: left !important; white-space: nowrap;
  font-size: 13.5px !important; font-weight: 400 !important; color: #0A0A10 !important; background: transparent !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a:before {
  position: static !important; display: inline-block !important; float: none !important; width: 17px !important; height: 18px !important;
  margin: 0 !important; font-size: 14px !important; line-height: 18px !important; text-align: center !important; color: #1C1C26 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a .inner { display: inline !important; position: static !important; font-size: 13.5px !important; line-height: 18px !important; margin: 0 !important; overflow: visible !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a:hover { background: #F2F1F7 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.selected {
  background: linear-gradient(90deg, rgba(244,114,182,.14), rgba(167,139,250,.14), rgba(56,189,248,.12)) !important; font-weight: 600 !important; color: #0A0A10 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.selected:before { color: #673DE6 !important; }
/* Compose = the dashboard's "Create app" button */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.compose {
  justify-content: center !important; height: 36px !important; min-height: 36px !important; margin: 0 0 10px !important;
  background: #7C3AED !important; color: #fff !important; font-weight: 600 !important; border: 0 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.compose:before { color: #fff !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.compose:hover { background: #6D28D9 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important;
  background: #fff !important; border-top: 1px solid #E6E6EE !important; padding: 8px 8px 10px !important; margin: 0 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons a.about { display: none !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.logout, html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.logout:before { color: #C4183C !important; }

/* Folders = more sidebar rows */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-sidebar { width: 210px !important; min-width: 210px !important; flex: 0 0 210px !important; background: #fff !important; border-right: 1px solid #E6E6EE !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-sidebar .scroller, html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content { background: #fff !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content > ul { padding: 10px 8px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li, html:is(.layout-large,.layout-normal) body:not(.cn-g) #settings-menu li, html:is(.layout-large,.layout-normal) body:not(.cn-g) #directorylist li { border: 0 !important; background: transparent !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #settings-menu li a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #directorylist li a {
  display: flex !important; align-items: center !important; height: 30px !important; box-sizing: border-box !important;
  padding: 5px 10px !important; margin: 1px 6px !important; border-radius: 999px !important;
  font-size: 13.5px !important; line-height: 18px !important; font-weight: 400 !important; color: #0A0A10 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li a:before,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #settings-menu li a:before { color: #1C1C26 !important; font-size: 14px !important; width: 17px !important; margin-right: 10px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li a:hover,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #settings-menu li a:hover,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #directorylist li a:hover { background: #F2F1F7 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li.selected > a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #settings-menu li.selected > a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #directorylist li.selected > a {
  background: linear-gradient(90deg, rgba(244,114,182,.14), rgba(167,139,250,.14), rgba(56,189,248,.12)) !important; font-weight: 600 !important; color: #0A0A10 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li.selected > a:before { color: #673DE6 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content .unreadcount {
  position: static !important; transform: none !important; margin-left: auto !important; display: inline-block !important;
  background: #7C3AED !important; color: #fff !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important;
  height: 18px !important; line-height: 18px !important; padding: 0 7px !important; min-width: 0 !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li.unread > a { font-weight: 600 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#layout-sidebar, #layout-list) > .footer { background: #fff !important; border-top: 1px solid #E6E6EE !important; height: 40px !important; min-height: 40px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) .quota-widget .bar { background: #EEF0F4 !important; border-radius: 999px !important; height: 6px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) .quota-widget .bar .value { background: linear-gradient(90deg, #F472B6, #A78BFA, #38BDF8) !important; border-radius: 999px !important; }

/* Message list: white, compact rows, dashboard hover and selection */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list { width: 380px !important; background: #fff !important; border-right: 1px solid #E6E6EE !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar { height: 44px !important; background: #fff !important; border-bottom: 1px solid #E6E6EE !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar input { background: #F4F4F7 !important; border: 1px solid #E6E6EE !important; border-radius: 999px !important; height: 32px !important; font-size: 13.5px !important; margin-top: 6px; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td { padding: 7px 12px !important; font-size: 13px !important; line-height: 1.35 !important; border-bottom: 1px solid #F0F0F5 !important; background: #fff; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.fromto, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.date { line-height: 18px !important; height: 18px !important; font-size: 12px !important; color: #4A4A5C !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.subject, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.subject * { line-height: 20px !important; font-size: 13px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.subject { height: 20px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td.flags span { line-height: 18px !important; height: 18px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr:hover td { background: #F2F1F7 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.selected td, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.focused td { background: #EFECFB !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.focused td:first-child, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.selected td:first-child { box-shadow: inset 3px 0 0 #7C3AED !important; border-left-color: transparent !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.unread td span.subject a, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.unread td span.fromto { font-weight: 700 !important; color: #0A0A10 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.unread td span.msgicon.status:before { color: #7C3AED !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-content { background: #F4F4F7 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-content > .content, html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-content .iframe-wrapper { background: #F4F4F7 !important; }
/* Records tables (contacts, settings lists) like the dashboard tables */
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.records-table td { font-size: 13.5px !important; padding: 8px 12px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.records-table tr.selected td { background: #EFECFB !important; color: #0A0A10 !important; }
.formcontent .boxtitle, fieldset legend { font-size: 14px !important; font-weight: 700 !important; color: #0A0A10 !important; }
.compose-content .formcontent, .formcontainer .formcontent { border-radius: 18px; }

/* ---------- Dark mode: the dashboard's dark palette ---------- */
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g):not(.task-login) { background: #14101F !important; color: #F2F0F8; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu .popover-header { background: #0D0F12 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#layout-menu, #layout-sidebar, #layout-list, #layout-sidebar .scroller, #folderlist-content, #layout-list .searchbar, #layout-sidebar > .footer, #layout-list > .footer) { background: #1C1730 !important; border-color: #312A4E !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a:not(.compose), html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#folderlist-content, #settings-menu, #directorylist) li a { color: #F2F0F8 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a:not(.compose):before, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content li a:before { color: #D6D2E6 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#taskmenu a:not(.compose), #folderlist-content li a, #settings-menu li a, #directorylist li a):hover { background: #2A2345 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#taskmenu a.selected, #folderlist-content li.selected > a, #settings-menu li.selected > a, #directorylist li.selected > a) { background: #34295C !important; color: #fff !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons { border-color: #312A4E !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.logout, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.logout:before { color: #FF8FA3 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td { background: #1C1730 !important; border-color: #272040 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr:hover td { background: #2A2345 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.selected td { background: #34295C !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.fromto, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.date { color: #A49CC4 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.unread td span.subject a, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.unread td span.fromto { color: #fff !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#layout-content, #layout-content > .content, #layout-content .iframe-wrapper) { background: #14101F !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar input { background: #221C39 !important; border-color: #312A4E !important; color: #F2F0F8 !important; }
html.dark-mode .btn-secondary, html.dark-mode .formbuttons .btn:not(.btn-primary):not(.mainaction) { background: transparent !important; border-color: #9B7BFF !important; color: #C7B4FF !important; }
/* Refresh sits outside the toolbar list: same size as its neighbours */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh {
  color: #B4B8C4 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important;
  padding: 5px 8px 4px !important; margin: 4px 1px 0 !important; border-radius: 10px !important; background: transparent !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh:before { display: block !important; font-size: 15px !important; height: 18px !important; line-height: 18px !important; margin: 0 auto 1px !important; color: inherit !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.selected td, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.focused td { border-left-color: #7C3AED !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-sidebar > .scroller { padding-top: 8px !important; }
.recipient-input.focus, .form-control.focus, .input-group .form-control:focus { border-color: #7C3AED !important; box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; outline: 0 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.focused td, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.selected td { background: #34295C !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.focused td span.subject a, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist tr.focused td span.fromto { color: #fff !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons { background: #1C1730 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons a.theme, html.dark-mode:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons a.theme:before { color: #F2F0F8 !important; }

/* ---------- Compact scale (owner, 2026-11-14: "still looks big — make it as compact as the dashboard"): about 0.82 ×
   the dashboard's 100 % sizes, which is how the dashboard appears in the owner's browser. Later rules win. ---------- */
html { font-size: 13.5px !important; } /* Elastic sizes most things in rem */
body { font-size: 12.5px !important; }
.btn, button.btn, .button, a.button.btn, input.button, .ui-dialog .ui-button, .ui-dialog-buttonset .btn { font-size: 12px !important; padding: 4px 14px !important; line-height: 18px !important; }
.form-control, input[type=text], input[type=password], input[type=email], input[type=search], select.custom-select, textarea { font-size: 12.5px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu .popover-header { height: 48px !important; min-height: 48px !important; line-height: 48px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .header-title { font-size: 12.5px !important; line-height: 48px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh { font-size: 10px !important; padding: 4px 7px 3px !important; margin: 4px 0 0 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a:before,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh:before { font-size: 13px !important; height: 16px !important; line-height: 16px !important; }
/* Menu */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu { width: 196px !important; min-width: 196px !important; max-width: 196px !important; flex: 0 0 196px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu #logo { max-width: 104px !important; max-height: 20px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu { padding: 8px 7px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a { height: 25px !important; min-height: 25px !important; padding: 3px 9px !important; gap: 8px !important; font-size: 11.5px !important; line-height: 16px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a .inner { font-size: 11.5px !important; line-height: 16px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a:before { font-size: 12px !important; width: 15px !important; height: 16px !important; line-height: 16px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.compose { height: 30px !important; min-height: 30px !important; margin: 0 0 8px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu .special-buttons { padding: 6px 7px 8px !important; }
/* Folders, settings and contacts lists */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-sidebar { width: 186px !important; min-width: 186px !important; flex: 0 0 186px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content > ul { padding: 8px 6px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#folderlist-content, #settings-menu, #directorylist) li a { height: 25px !important; padding: 3px 9px !important; margin: 1px 4px !important; font-size: 11.5px !important; line-height: 16px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#folderlist-content, #settings-menu) li a:before { font-size: 12px !important; width: 15px !important; margin-right: 8px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #folderlist-content .unreadcount { font-size: 9.5px !important; height: 15px !important; line-height: 15px !important; padding: 0 6px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) :is(#layout-sidebar, #layout-list) > .footer { height: 34px !important; min-height: 34px !important; font-size: 11px !important; }
/* Message list */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list { width: 330px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar { height: 38px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar input { height: 26px !important; font-size: 11.5px !important; margin-top: 5px; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td { padding: 5px 10px !important; font-size: 11.5px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.fromto, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.date { font-size: 10.5px !important; line-height: 15px !important; height: 15px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.subject, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.subject * { font-size: 11.5px !important; line-height: 17px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.subject { height: 17px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td.flags span { line-height: 15px !important; height: 15px !important; font-size: 11px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.records-table td { font-size: 11.5px !important; padding: 6px 10px !important; }
/* Message rows: room for the sender line (was clipped) */
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.fromto, html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td span.date { line-height: 16px !important; height: 16px !important; overflow: hidden !important; margin: 0 !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) table.messagelist td.subject { padding-top: 6px !important; padding-bottom: 6px !important; align-content: center !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-sidebar > .header .header-title { font-size: 11.5px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-sidebar { width: 206px !important; min-width: 206px !important; flex: 0 0 206px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar a.button, html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-list .searchbar .options { line-height: 38px !important; height: 38px !important; }

/* ---------- One column (owner, 2026-11-14): folders under Mail in the left menu, Contacts/Settings at the foot
   (cn-layout.js adds body.cn-menu2 everywhere and body.cn-onecol on the mail list). ---------- */
html:is(.layout-large,.layout-normal) body.cn-menu2:not(.cn-g) #taskmenu { display: flex !important; flex-direction: column !important; height: calc(100% - 48px) !important; box-sizing: border-box !important; overflow: hidden !important; padding-bottom: 0 !important; }
html:is(.layout-large,.layout-normal) body.cn-menu2:not(.cn-g) #taskmenu .special-buttons { position: static !important; margin-top: auto !important; flex: none !important; padding: 6px 0 8px !important; }
html:is(.layout-large,.layout-normal) body.cn-menu2:not(.cn-g) #taskmenu .special-buttons a { display: flex !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol:not(.cn-g) #layout-sidebar { display: none !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol:not(.cn-g) #layout-list { width: 460px !important; min-width: 360px !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #cn-folders { flex: 1 1 auto; min-height: 60px; overflow-y: auto; margin: 0 0 6px; }
html:is(.layout-large,.layout-normal) body.cn-onecol #cn-folders #folderlist-content { background: transparent !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #cn-folders #folderlist-content > ul { padding: 2px 0 0 12px !important; margin: 0 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #cn-folders #folderlist-content li a { margin: 1px 0 !important; height: 24px !important; font-size: 11.5px !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #cn-folders #folderlist-content li ul { padding-left: 12px !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol .cn-manage-folders { display: block; margin: 4px 0 0 22px; font-size: 11px; color: #673DE6; text-decoration: none; }
html:is(.layout-large,.layout-normal) body.cn-onecol .cn-manage-folders:hover { text-decoration: underline; }
html:is(.layout-large,.layout-normal) body.cn-onecol .cn-acct { padding: 2px 9px 8px; margin: 0 0 6px; border-bottom: 1px solid #E6E6EE; }
html:is(.layout-large,.layout-normal) body.cn-onecol .cn-acct-name { font-size: 11px; font-weight: 600; color: #4A4A5C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
html:is(.layout-large,.layout-normal) body.cn-onecol .cn-acct .footer { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; border: 0 !important; background: none !important; padding: 0 !important; font-size: 10.5px !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol .cn-acct .footer * { font-size: 10.5px !important; }
html.dark-mode:is(.layout-large,.layout-normal) body.cn-onecol .cn-acct { border-color: #312A4E; }
html.dark-mode:is(.layout-large,.layout-normal) body.cn-onecol .cn-acct-name { color: #A49CC4; }
/* Folders inside the menu: a vertical list (the menu's own row styles must not apply) */
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders ul { display: block !important; width: auto !important; flex: none !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders li { display: block !important; width: auto !important; float: none !important; position: relative !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li a {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; gap: 0 !important;
  background: transparent !important; color: #0A0A10 !important; font-weight: 400 !important; padding: 3px 9px !important; border-radius: 999px !important;
}
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li a:hover { background: #F2F1F7 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li.selected > a { background: linear-gradient(90deg, rgba(244,114,182,.14), rgba(167,139,250,.14), rgba(56,189,248,.12)) !important; font-weight: 600 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li.unread > a { font-weight: 600 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li a:before { width: 15px !important; margin-right: 8px !important; font-size: 12px !important; color: #1C1C26 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li.selected > a:before { color: #673DE6 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders a.cn-manage-folders { display: block !important; height: auto !important; min-height: 0 !important; padding: 2px 0 0 !important; margin: 4px 0 0 22px !important; background: transparent !important; color: #673DE6 !important; font-size: 11px !important; font-weight: 500 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders a.cn-manage-folders:before { display: none !important; }
html:is(.layout-large,.layout-normal) body.cn-menu2 #taskmenu .special-buttons a.about { display: none !important; }
html.dark-mode:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li a { color: #F2F0F8 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li a:before { color: #D6D2E6 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li a:hover { background: #2A2345 !important; }
html.dark-mode:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders #folderlist-content li.selected > a { background: #34295C !important; color: #fff !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders li { line-height: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders li a, html:is(.layout-large,.layout-normal) body.cn-onecol #taskmenu #cn-folders li a * { line-height: 16px !important; }

/* ---------- Owner, 2026-11-14: hover menu centred; logo a bit bigger; Compose smaller; lower, neater top bar ---------- */
/* Message hover menu (size · flag · delete): one pill, everything on one centred line */
.messagelist + .listing-hover-menu, .listing-hover-menu {
  display: flex !important; align-items: center !important; gap: 2px !important; height: 28px !important; padding: 0 6px 0 10px !important;
  border: 1px solid #E6E6EE !important; border-radius: 999px !important; box-shadow: 0 4px 14px rgba(22,25,31,.10) !important; background: #fff !important;
}
.listing-hover-menu span.txt { margin: 0 6px 0 0 !important; font-size: 10.5px !important; line-height: 1 !important; color: #4A4A5C !important; vertical-align: middle !important; }
.listing-hover-menu a.button, .listing-hover-menu a.button.btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important;
  padding: 0 !important; margin: 0 !important; line-height: 1 !important; font-size: 12px !important; border-radius: 999px !important; color: #1C1C26 !important; border: 0 !important; background: transparent !important;
}
.listing-hover-menu a.button:before { margin: 0 !important; line-height: 1 !important; font-size: 12px !important; }
.listing-hover-menu a.button:hover { background: #F2F1F7 !important; color: #673DE6 !important; }
.listing-hover-menu a.button.delete:hover { color: #C4183C !important; }
.listing-hover-menu a.button.d-none { display: none !important; }
html.dark-mode .listing-hover-menu { background: #1C1730 !important; border-color: #312A4E !important; }
html.dark-mode .listing-hover-menu a.button { color: #F2F0F8 !important; }
html.dark-mode .listing-hover-menu span.txt { color: #A49CC4 !important; }

/* Top bar: 42 px, a thin brand-gradient line underneath */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu .popover-header {
  height: 42px !important; min-height: 42px !important; line-height: 42px !important;
  box-shadow: inset 0 -2px 0 0 transparent !important; position: relative !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header:after,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu .popover-header:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #F472B6, #A78BFA 50%, #38BDF8); opacity: .9; pointer-events: none;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .header-title { line-height: 42px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh {
  display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  height: 34px !important; padding: 0 8px !important; margin: 4px 1px 0 !important; font-size: 9.5px !important; letter-spacing: .01em; border-radius: 9px !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a:before,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh:before { font-size: 12.5px !important; height: 15px !important; line-height: 15px !important; margin: 0 0 2px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a:not(.disabled):hover,
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header a.button.refresh:hover { background: rgba(167,139,250,.16) !important; color: #fff !important; }
html:is(.layout-large,.layout-normal) body.cn-menu2:not(.cn-g) #taskmenu { height: calc(100% - 42px) !important; }

/* Logo a bit bigger; Compose smaller */
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout-menu #logo { max-width: 128px !important; max-height: 24px !important; }
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.compose {
  height: 26px !important; min-height: 26px !important; margin: 2px 14px 8px !important; font-size: 11px !important; gap: 6px !important;
  box-shadow: 0 4px 12px -6px rgba(124,58,237,.6) !important;
}
html:is(.layout-large,.layout-normal) body:not(.cn-g) #taskmenu a.compose:before { font-size: 11px !important; }
/* Keep webmail's own per-screen-size hiding of toolbar buttons (the inline-flex rule above must not un-hide them) */
html.layout-large body:not(.cn-g) #layout > div > .header .toolbar a:is(.hidden, .hidden-large, .hidden-big),
html.layout-normal body:not(.cn-g) #layout > div > .header .toolbar a:is(.hidden, .hidden-normal, .hidden-big),
html:is(.layout-large,.layout-normal) body:not(.cn-g) #layout > div > .header .toolbar a.d-none { display: none !important; }

/* ---------- Mail health panel (cn-layout.js + plugin.cnhealth) ---------- */
#taskmenu a.cn-health:before { content: "\f21e" !important; font-family: 'Icons' !important; font-weight: 900 !important; }
.cn-health-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; background: #F4F4F7; display: flex; flex-direction: column; font-family: 'Commissioner', system-ui, sans-serif; }
.cn-health-panel .cnh-head { height: 42px; flex: none; background: #16191F; color: #fff; display: flex; align-items: center; gap: 8px; padding: 0 16px; position: relative; }
.cn-health-panel .cnh-head:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #F472B6, #A78BFA 50%, #38BDF8); }
.cn-health-panel .cnh-title { font-weight: 700; font-size: 13px; margin-right: auto; }
.cn-health-panel .cnh-back { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; cursor: pointer; }
.cn-health-panel .cnh-back:hover { background: rgba(167,139,250,.25); }
.cn-health-panel .cnh-body { overflow: auto; padding: 16px 20px 40px; }
.cn-health-panel .cnh-hero { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid #E6E6EE; border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; max-width: 980px; }
.cn-health-panel .cnh-hero h2 { margin: 0 0 2px; font-size: 16px; }
.cn-health-panel .cnh-ring { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 6px solid #D7D8DF; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cn-health-panel .cnh-ring b { font-size: 22px; line-height: 1; } .cn-health-panel .cnh-ring small { color: #6E6E82; font-size: 10px; }
.cn-health-panel .cnh-ring.good { border-color: #22C55E; } .cn-health-panel .cnh-ring.ok { border-color: #F59E0B; } .cn-health-panel .cnh-ring.bad { border-color: #EF4444; }
.cn-health-panel .cnh-sub { color: #6E6E82; font-size: 12px; margin: 2px 0 8px; }
.cn-health-panel .cnh-test { font-size: 12px !important; padding: 4px 14px !important; }
.cn-health-panel .cnh-testres { margin: 8px 0 0; font-size: 12px; } .cn-health-panel .cnh-testres.good { color: #15803D; } .cn-health-panel .cnh-testres.bad { color: #B91C1C; }
.cn-health-panel .cnh-card { background: #fff; border: 1px solid #E6E6EE; border-radius: 16px; padding: 12px 18px; margin-bottom: 12px; max-width: 980px; }
.cn-health-panel .cnh-card h3 { font-size: 12.5px; margin: 2px 0 6px; color: #4A4A5C; text-transform: none; }
.cn-health-panel .cnh-list { list-style: none; margin: 0; padding: 0; }
.cn-health-panel .cnh-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F0F0F5; } .cn-health-panel .cnh-list li:last-child { border-bottom: 0; }
.cn-health-panel .cnh-list strong { font-size: 12.5px; } .cn-health-panel .cnh-list p { margin: 2px 0 0; font-size: 12px; color: #4A4A5C; }
.cn-health-panel .cnh-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; background: #D7D8DF; }
.cn-health-panel li.good .cnh-dot { background: #22C55E; } .cn-health-panel li.ok .cnh-dot { background: #F59E0B; } .cn-health-panel li.bad .cnh-dot { background: #EF4444; }
.cn-health-panel .cnh-bar { height: 6px; border-radius: 999px; background: #EEF0F4; margin-top: 6px; max-width: 320px; overflow: hidden; } .cn-health-panel .cnh-bar i { display: block; height: 100%; background: linear-gradient(90deg, #F472B6, #A78BFA, #38BDF8); }
.cn-health-panel .cnh-fix { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #F7F5FF; border-radius: 10px; padding: 6px 8px; }
.cn-health-panel .cnh-fixl { font-size: 11px; color: #673DE6; font-weight: 600; } .cn-health-panel .cnh-fix code { font-size: 11.5px; word-break: break-all; color: #1C1C26; background: none; }
.cn-health-panel .cnh-copy { margin-left: auto; border: 1px solid #7C3AED; color: #7C3AED; background: #fff; border-radius: 999px; font-size: 11px; padding: 2px 10px; cursor: pointer; }
.cn-health-panel .cnh-kv { display: flex; gap: 10px; font-size: 12px; margin: 4px 0; } .cn-health-panel .cnh-kv span { width: 130px; color: #6E6E82; }
.cn-health-panel .cnh-err { color: #B91C1C; }
html.dark-mode .cn-health-panel { background: #14101F; color: #F2F0F8; }
html.dark-mode .cn-health-panel :is(.cnh-hero, .cnh-card) { background: #1C1730; border-color: #312A4E; }
html.dark-mode .cn-health-panel .cnh-list li { border-color: #272040; } html.dark-mode .cn-health-panel .cnh-list p, html.dark-mode .cn-health-panel .cnh-card h3 { color: #D6D2E6; }
html.dark-mode .cn-health-panel .cnh-fix { background: #221C39; } html.dark-mode .cn-health-panel .cnh-fix code { color: #F2F0F8; }