/* fpMail Supreme — final polish layer: cleaner, calmer, more considered than Gmail. */
:root {
  --supreme-bg: #f4f7fb;
  --supreme-surface: #ffffff;
  --supreme-surface-soft: #f8fbff;
  --supreme-surface-ice: #eef6ff;
  --supreme-ink: #101524;
  --supreme-text: #263244;
  --supreme-muted: #738196;
  --supreme-line: #d8e4ef;
  --supreme-line-strong: #c4d6e6;
  --supreme-cyan: #0694c6;
  --supreme-blue: #2563eb;
  --supreme-violet: #635bff;
  --supreme-mint: #16b89e;
  --supreme-amber: #f4a928;
  --supreme-red: #d73b3b;
  --supreme-radius: 14px;
  --supreme-radius-sm: 10px;
  --supreme-shadow: 0 20px 44px -32px rgba(16, 21, 36, 0.45);
  --supreme-shadow-soft: 0 14px 36px -28px rgba(16, 21, 36, 0.38);
  --supreme-glow: 0 0 0 3px rgba(6, 148, 198, 0.22);
  --supreme-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

a, button, .button, input, textarea, select, .form-control, .custom-select,
.listing li > a, .folderlist li > a, .treelist li > a,
.messagelist tbody tr, .records-table tbody tr, .table tbody tr,
.popupmenu .listing li > a, .popover .menu li a,
#taskmenu a, .toolbar a.button, .toolbar button {
  transition: background-color var(--supreme-transition),
              color var(--supreme-transition),
              border-color var(--supreme-transition),
              box-shadow var(--supreme-transition),
              transform var(--supreme-transition);
}

body:not(.task-login),
body:not(.task-login) #layout {
  background:
    radial-gradient(960px 420px at 12% -16%, rgba(6, 148, 198, 0.11), transparent 58%),
    radial-gradient(840px 360px at 100% -8%, rgba(99, 91, 255, 0.09), transparent 56%),
    var(--supreme-bg) !important;
  color: var(--supreme-text) !important;
}

#layout { gap: 0 !important; }

#layout-menu, html.dark-mode #layout-menu {
  width: 90px;
  background: var(--supreme-surface) !important;
  border-right: 1px solid var(--supreme-line) !important;
  box-shadow: 14px 0 40px -38px rgba(16, 21, 36, 0.48) !important;
}

#layout-menu .popover-header, html.dark-mode #layout-menu .popover-header {
  height: 64px;
  padding: 10px 0 !important;
  background: var(--supreme-surface) !important;
  border-bottom: 1px solid var(--supreme-line) !important;
}

#layout-menu .popover-header img {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 10px 20px rgba(6, 148, 198, 0.18));
}

#taskmenu { padding: 8px 7px 12px; }

#taskmenu a, html.dark-mode #taskmenu a {
  height: 64px;
  margin: 4px 0;
  padding: 9px 4px;
  border-radius: var(--supreme-radius-sm);
  color: var(--supreme-muted) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#taskmenu a:before, html.dark-mode #taskmenu a:before {
  width: 100%;
  height: 26px;
  margin: 0 0 3px !important;
  float: none;
  color: var(--supreme-muted) !important;
  font-size: 1.5rem;
  line-height: 26px;
}

#taskmenu a .inner { display: block; color: inherit; line-height: 1.15; }

#taskmenu a:hover, #taskmenu a:focus,
html.dark-mode #taskmenu a:hover, html.dark-mode #taskmenu a:focus {
  background: var(--supreme-surface-ice) !important;
  color: var(--supreme-ink) !important;
  transform: translateY(-1px);
}

#taskmenu a:hover:before, #taskmenu a:focus:before,
html.dark-mode #taskmenu a:hover:before, html.dark-mode #taskmenu a:focus:before {
  color: var(--supreme-cyan) !important;
}

#taskmenu a.selected, #taskmenu a.mail.selected, #taskmenu a.contacts.selected, #taskmenu a.settings.selected,
html.dark-mode #taskmenu a.selected, html.dark-mode #taskmenu a.mail.selected, html.dark-mode #taskmenu a.contacts.selected, html.dark-mode #taskmenu a.settings.selected {
  background: linear-gradient(135deg, rgba(6, 148, 198, 0.14), rgba(99, 91, 255, 0.12)) !important;
  color: var(--supreme-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(6, 148, 198, 0.16);
}

#taskmenu a.selected:before, html.dark-mode #taskmenu a.selected:before { color: var(--supreme-cyan) !important; }

#taskmenu a.compose, #taskmenu a.compose.selected,
html.dark-mode #taskmenu a.compose, html.dark-mode #taskmenu a.compose.selected {
  height: 58px;
  margin: 10px 0 14px;
  background: linear-gradient(135deg, var(--supreme-cyan), var(--supreme-blue), var(--supreme-violet)) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 18px 36px -26px rgba(37, 99, 235, 0.85);
}

#taskmenu a.compose:hover, #taskmenu a.compose:focus,
html.dark-mode #taskmenu a.compose:hover, html.dark-mode #taskmenu a.compose:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 22px 44px -28px rgba(37, 99, 235, 0.95);
}

#taskmenu a.compose:before, html.dark-mode #taskmenu a.compose:before { color: #fff !important; }

#taskmenu .special-buttons a, html.dark-mode #taskmenu .special-buttons a { color: var(--supreme-muted) !important; }
#taskmenu .special-buttons a.logout, html.dark-mode #taskmenu .special-buttons a.logout { color: var(--supreme-red) !important; }

#layout-sidebar, html.dark-mode #layout-sidebar {
  min-width: 260px;
  background: var(--supreme-surface-soft) !important;
  border-right: 1px solid var(--supreme-line) !important;
  color: var(--supreme-text) !important;
}

#layout-sidebar > .header, #layout-sidebar > .footer,
html.dark-mode #layout-sidebar > .header, html.dark-mode #layout-sidebar > .footer {
  min-height: 64px;
  background: var(--supreme-surface-soft) !important;
  border-color: transparent !important;
  color: var(--supreme-ink) !important;
}

#layout-sidebar > .header .username, #layout-sidebar > .header .header-title,
html.dark-mode #layout-sidebar > .header .username, html.dark-mode #layout-sidebar > .header .header-title {
  padding-left: 18px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--supreme-ink) !important;
}

#layout-sidebar .scroller, html.dark-mode #layout-sidebar .scroller {
  padding: 6px 10px 14px;
  background: transparent !important;
}

.folderlist li > a, .treelist li > a,
html.dark-mode .folderlist li > a, html.dark-mode .treelist li > a {
  min-height: 42px;
  margin: 2px 0;
  padding: 0 14px;
  border-radius: var(--supreme-radius-sm);
  color: var(--supreme-text) !important;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 42px;
}

.folderlist li.mailbox > a:before, .treelist li > a:before,
html.dark-mode .folderlist li.mailbox > a:before, html.dark-mode .treelist li > a:before {
  color: var(--supreme-muted) !important;
  line-height: 42px;
}

.folderlist li.selected > a, .folderlist li > a:hover, .treelist li.selected > a, .treelist li > a:hover,
html.dark-mode .folderlist li.selected > a, html.dark-mode .folderlist li > a:hover, html.dark-mode .treelist li.selected > a, html.dark-mode .treelist li > a:hover {
  background: var(--supreme-surface-ice) !important;
  color: var(--supreme-ink) !important;
}

.folderlist li.mailbox.unread > a, html.dark-mode .folderlist li.mailbox.unread > a {
  background: transparent !important;
  color: var(--supreme-ink) !important;
  font-weight: 700;
}

.folderlist li.mailbox .unreadcount, html.dark-mode .folderlist li.mailbox .unreadcount {
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--supreme-cyan) !important;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 22px;
  box-shadow: 0 4px 10px -6px rgba(6, 148, 198, 0.6);
}

.quota-widget, html.dark-mode .quota-widget {
  margin: 10px 12px;
  padding: 10px 12px;
  border-radius: var(--supreme-radius-sm);
  background: var(--supreme-surface) !important;
  border: 1px solid var(--supreme-line) !important;
  color: var(--supreme-muted) !important;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--supreme-shadow-soft);
}

.quota-widget .bar, html.dark-mode .quota-widget .bar {
  background: var(--supreme-surface-ice);
  border-color: var(--supreme-line);
  border-radius: 999px;
}

.quota-widget .value, html.dark-mode .quota-widget .value {
  background: linear-gradient(90deg, var(--supreme-cyan), var(--supreme-blue)) !important;
  border-radius: 999px;
}

#layout-list, html.dark-mode #layout-list {
  min-width: 360px;
  background: var(--supreme-surface) !important;
  border-right: 1px solid var(--supreme-line) !important;
  color: var(--supreme-text) !important;
}

#layout-list > .header, html.dark-mode #layout-list > .header {
  min-height: 64px;
  padding: 0 14px;
  background: var(--supreme-surface) !important;
  border-bottom: 1px solid var(--supreme-line) !important;
  box-shadow: 0 14px 36px -36px rgba(16, 21, 36, 0.42) !important;
}

#layout-list > .header .header-title, html.dark-mode #layout-list > .header .header-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--supreme-ink) !important;
}

#layout-list .scroller, html.dark-mode #layout-list .scroller { background: var(--supreme-surface) !important; }
body.task-mail.action-none .searchbar, body.task-mail.action-show .searchbar,
html.dark-mode body.task-mail.action-none .searchbar, html.dark-mode body.task-mail.action-show .searchbar {
  margin: 12px 14px !important;
  padding: 0 !important;
}

body.task-mail.action-none .searchbar form, body.task-mail.action-show .searchbar form,
html.dark-mode body.task-mail.action-none .searchbar form, html.dark-mode body.task-mail.action-show .searchbar form {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  border: 1px solid var(--supreme-line) !important;
  border-radius: 999px !important;
  background: var(--supreme-surface-soft) !important;
  box-shadow: none !important;
}

body.task-mail.action-none .searchbar form:focus-within, body.task-mail.action-show .searchbar form:focus-within,
html.dark-mode body.task-mail.action-none .searchbar form:focus-within, html.dark-mode body.task-mail.action-show .searchbar form:focus-within {
  background: var(--supreme-surface) !important;
  border-color: rgba(6, 148, 198, 0.45) !important;
  box-shadow: 0 12px 34px -26px rgba(16, 21, 36, 0.42), var(--supreme-glow) !important;
}

body.task-mail.action-none .searchbar form:before, body.task-mail.action-show .searchbar form:before,
html.dark-mode body.task-mail.action-none .searchbar form:before, html.dark-mode body.task-mail.action-show .searchbar form:before {
  content: "" !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: 0 12px 0 2px !important;
  border: 2px solid var(--supreme-muted) !important;
  border-radius: 999px !important;
  box-shadow: 7px 7px 0 -5px var(--supreme-muted) !important;
  background: transparent !important;
}

body.task-mail .searchbar input, body.task-mail .searchbar .form-control,
html.dark-mode body.task-mail .searchbar input, html.dark-mode body.task-mail .searchbar .form-control {
  height: 44px !important;
  color: var(--supreme-ink) !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  background: transparent !important;
}

body.task-mail .searchbar input::placeholder, html.dark-mode body.task-mail .searchbar input::placeholder {
  color: var(--supreme-muted) !important;
  opacity: 0.8;
}

body.task-mail #messagelist-content, html.dark-mode body.task-mail #messagelist-content {
  padding: 2px 12px 14px !important;
  background: transparent !important;
}

body.task-mail .messagelist, html.dark-mode body.task-mail .messagelist {
  width: calc(100% - 8px) !important;
  margin: 4px !important;
  padding: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}

body.task-mail .messagelist thead th, html.dark-mode body.task-mail .messagelist thead th {
  height: 34px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--supreme-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body.task-mail .messagelist tbody tr, html.dark-mode body.task-mail .messagelist tbody tr {
  background: transparent !important;
  box-shadow: none !important;
}

body.task-mail .messagelist tbody tr td, html.dark-mode body.task-mail .messagelist tbody tr td {
  padding: 13px 14px !important;
  border-top: 1px solid var(--supreme-line) !important;
  border-bottom: 1px solid var(--supreme-line) !important;
  background: var(--supreme-surface) !important;
  color: var(--supreme-text) !important;
  font-size: 0.94rem !important;
  box-shadow: 0 10px 24px -28px rgba(16, 21, 36, 0.35) !important;
}

body.task-mail .messagelist tbody tr td:first-child, html.dark-mode body.task-mail .messagelist tbody tr td:first-child {
  border-left: 1px solid var(--supreme-line) !important;
  border-radius: var(--supreme-radius-sm) 0 0 var(--supreme-radius-sm) !important;
}

body.task-mail .messagelist tbody tr td:last-child, html.dark-mode body.task-mail .messagelist tbody tr td:last-child {
  border-right: 1px solid var(--supreme-line) !important;
  border-radius: 0 var(--supreme-radius-sm) var(--supreme-radius-sm) 0 !important;
}

body.task-mail .messagelist tbody tr:hover td, html.dark-mode body.task-mail .messagelist tbody tr:hover td {
  border-color: rgba(6, 148, 198, 0.38) !important;
  background: var(--supreme-surface-soft) !important;
  box-shadow: 0 14px 34px -28px rgba(6, 148, 198, 0.22) !important;
}

body.task-mail .messagelist tbody tr.selected td, body.task-mail .messagelist tbody tr.focused td,
html.dark-mode body.task-mail .messagelist tbody tr.selected td, html.dark-mode body.task-mail .messagelist tbody tr.focused td {
  border-color: rgba(6, 148, 198, 0.42) !important;
  background: linear-gradient(90deg, rgba(6, 148, 198, 0.1), rgba(99, 91, 255, 0.08)), var(--supreme-surface) !important;
  box-shadow: 0 14px 36px -28px rgba(6, 148, 198, 0.28) !important;
}

body.task-mail .messagelist tr.unread td, body.task-mail .messagelist tr.unread td.subject, body.task-mail .messagelist tr.unread span.subject,
html.dark-mode body.task-mail .messagelist tr.unread td, html.dark-mode body.task-mail .messagelist tr.unread td.subject, html.dark-mode body.task-mail .messagelist tr.unread span.subject {
  color: var(--supreme-ink) !important;
  font-weight: 800 !important;
}

body.task-mail .messagelist td.subject span.subject, html.dark-mode body.task-mail .messagelist td.subject span.subject { font-size: 0.96rem; }
body.task-mail .messagelist span.date, body.task-mail .messagelist span.size,
html.dark-mode body.task-mail .messagelist span.date, html.dark-mode body.task-mail .messagelist span.size {
  color: var(--supreme-muted) !important;
  font-size: 0.82rem;
  font-weight: 600;
}

body.task-mail .messagelist td .msgicon.status:before, body.task-mail .messagelist span.attachment span:before, body.task-mail .messagelist span.flagged:before,
html.dark-mode body.task-mail .messagelist td .msgicon.status:before, html.dark-mode body.task-mail .messagelist span.attachment span:before, html.dark-mode body.task-mail .messagelist span.flagged:before {
  color: var(--supreme-cyan) !important;
}

#layout-content, html.dark-mode #layout-content {
  background:
    radial-gradient(900px 420px at 92% 6%, rgba(99, 91, 255, 0.07), transparent 56%),
    var(--supreme-surface-soft) !important;
  color: var(--supreme-text) !important;
}

#layout-content > .header, #layout-content > .footer,
html.dark-mode #layout-content > .header, html.dark-mode #layout-content > .footer {
  min-height: 64px;
  padding: 0 16px;
  background: var(--supreme-surface) !important;
  border-color: var(--supreme-line) !important;
  color: var(--supreme-ink) !important;
  box-shadow: 0 14px 36px -36px rgba(16, 21, 36, 0.42) !important;
}

#layout-content > .header .header-title, html.dark-mode #layout-content > .header .header-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--supreme-ink) !important;
}

#layout-content .toolbar a.button, #layout-content .toolbar button, #mailtoolbar a.button,
html.dark-mode #layout-content .toolbar a.button, html.dark-mode #layout-content .toolbar button, html.dark-mode #mailtoolbar a.button {
  min-width: 60px;
  height: 44px;
  border-radius: var(--supreme-radius-sm) !important;
  color: var(--supreme-muted) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#layout-content .toolbar a.button:before, #layout-content .toolbar button:before, #mailtoolbar a.button:before,
html.dark-mode #layout-content .toolbar a.button:before, html.dark-mode #layout-content .toolbar button:before, html.dark-mode #mailtoolbar a.button:before {
  color: var(--supreme-muted) !important;
}

#layout-content .toolbar a.button:not(.disabled):hover, #layout-content .toolbar button:not(.disabled):hover, #mailtoolbar a.button:not(.disabled):hover,
html.dark-mode #layout-content .toolbar a.button:not(.disabled):hover, html.dark-mode #layout-content .toolbar button:not(.disabled):hover, html.dark-mode #mailtoolbar a.button:not(.disabled):hover {
  background: var(--supreme-surface-ice) !important;
  color: var(--supreme-ink) !important;
}

#layout-content .toolbar a.button:not(.disabled):hover:before, #layout-content .toolbar button:not(.disabled):hover:before, #mailtoolbar a.button:not(.disabled):hover:before,
html.dark-mode #layout-content .toolbar a.button:not(.disabled):hover:before, html.dark-mode #layout-content .toolbar button:not(.disabled):hover:before, html.dark-mode #mailtoolbar a.button:not(.disabled):hover:before {
  color: var(--supreme-cyan) !important;
}

#message-header, html.dark-mode #message-header {
  background: var(--supreme-surface) !important;
  border-bottom: 1px solid var(--supreme-line) !important;
  padding: 18px 20px !important;
}

#message-header .subject, html.dark-mode #message-header .subject {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--supreme-ink) !important;
  line-height: 1.25;
}

.iframe-wrapper, html.dark-mode .iframe-wrapper {
  margin: 18px;
  border: 1px solid var(--supreme-line);
  border-radius: var(--supreme-radius);
  background: var(--supreme-surface) !important;
  box-shadow: var(--supreme-shadow) !important;
  overflow: hidden;
}

#messagecontframe, html.dark-mode #messagecontframe,
#messagebody, .message-htmlpart, .message-part,
html.dark-mode #messagebody, html.dark-mode .message-htmlpart, html.dark-mode .message-part {
  background: var(--supreme-surface) !important;
}

.floating-action-buttons a.button, html.dark-mode .floating-action-buttons a.button {
  width: 64px;
  height: 64px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--supreme-cyan), var(--supreme-blue), var(--supreme-violet)) !important;
  box-shadow: 0 22px 44px -26px rgba(37, 99, 235, 0.85) !important;
}

.floating-action-buttons a.button:hover, html.dark-mode .floating-action-buttons a.button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 26px 50px -28px rgba(37, 99, 235, 0.95) !important;
}
.popupmenu, .popover, .ui-dialog,
html.dark-mode .popupmenu, html.dark-mode .popover, html.dark-mode .ui-dialog {
  background: var(--supreme-surface) !important;
  border: 1px solid var(--supreme-line) !important;
  border-radius: var(--supreme-radius) !important;
  color: var(--supreme-text) !important;
  box-shadow: var(--supreme-shadow) !important;
}

.popupmenu .listing li > a, .popover .menu li a,
html.dark-mode .popupmenu .listing li > a, html.dark-mode .popover .menu li a {
  min-height: 38px;
  padding: 0 14px;
  color: var(--supreme-text) !important;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 38px;
}

.popupmenu .listing li > a:not(.disabled):hover, .popover .menu li a:hover,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover, html.dark-mode .popover .menu li a:hover {
  background: var(--supreme-surface-ice) !important;
  color: var(--supreme-ink) !important;
}

.formcontent, .frame-content,
.task-mail.action-compose #layout-content, .task-settings #layout-content, .task-addressbook #layout-content,
html.dark-mode .formcontent, html.dark-mode .frame-content,
html.dark-mode .task-mail.action-compose #layout-content, html.dark-mode .task-settings #layout-content, html.dark-mode .task-addressbook #layout-content {
  background: var(--supreme-surface) !important;
  color: var(--supreme-text) !important;
}

.task-mail.action-compose #layout-content > .header, html.dark-mode .task-mail.action-compose #layout-content > .header {
  border-bottom: 1px solid var(--supreme-line);
  box-shadow: none;
}

.task-mail.action-compose .formcontent, html.dark-mode .task-mail.action-compose .formcontent { padding: 20px 26px; }

.task-mail.action-compose .form-control, .task-mail.action-compose .custom-select, .task-mail.action-compose select, .task-mail.action-compose textarea, .task-mail.action-compose input,
html.dark-mode .task-mail.action-compose .form-control, html.dark-mode .task-mail.action-compose .custom-select, html.dark-mode .task-mail.action-compose select, html.dark-mode .task-mail.action-compose textarea, html.dark-mode .task-mail.action-compose input {
  min-height: 42px;
  background: var(--supreme-surface-soft) !important;
  border: 1px solid var(--supreme-line) !important;
  border-radius: var(--supreme-radius-sm) !important;
  color: var(--supreme-ink) !important;
}

.task-mail.action-compose .form-control:focus, .task-mail.action-compose textarea:focus, .task-mail.action-compose input:focus,
html.dark-mode .task-mail.action-compose .form-control:focus, html.dark-mode .task-mail.action-compose textarea:focus, html.dark-mode .task-mail.action-compose input:focus {
  background: var(--supreme-surface) !important;
  border-color: rgba(6, 148, 198, 0.5) !important;
  box-shadow: var(--supreme-glow) !important;
}

.task-mail.action-compose #composebodycontainer, .tox-tinymce,
html.dark-mode .task-mail.action-compose #composebodycontainer, html.dark-mode .tox-tinymce {
  border-radius: var(--supreme-radius) !important;
  overflow: hidden;
  box-shadow: var(--supreme-shadow) !important;
}

.task-mail.action-compose .tox .tox-toolbar, .task-mail.action-compose .tox .tox-toolbar__primary, .task-mail.action-compose .tox .tox-menubar,
html.dark-mode .task-mail.action-compose .tox .tox-toolbar, html.dark-mode .task-mail.action-compose .tox .tox-toolbar__primary, html.dark-mode .task-mail.action-compose .tox .tox-menubar {
  background: var(--supreme-surface-soft) !important;
  border-color: var(--supreme-line) !important;
}

.task-mail.action-compose a.button.send, .task-mail.action-compose button.send,
html.dark-mode .task-mail.action-compose a.button.send, html.dark-mode .task-mail.action-compose button.send {
  min-width: 96px;
  height: 44px;
  border-radius: var(--supreme-radius-sm) !important;
  background: linear-gradient(135deg, var(--supreme-cyan), var(--supreme-blue), var(--supreme-violet)) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 14px 28px -20px rgba(37, 99, 235, 0.85);
}

.nav-tabs, html.dark-mode .nav-tabs { border-color: var(--supreme-line) !important; }
.nav-tabs .nav-link, html.dark-mode .nav-tabs .nav-link {
  color: var(--supreme-muted) !important;
  font-weight: 600;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active,
html.dark-mode .nav-tabs .nav-link:hover, html.dark-mode .nav-tabs .nav-link.active {
  background: var(--supreme-surface) !important;
  border-color: var(--supreme-line) !important;
  color: var(--supreme-cyan) !important;
}

.ui.alert, html.dark-mode .ui.alert {
  border-radius: var(--supreme-radius-sm);
  border: 1px solid var(--supreme-line);
  box-shadow: var(--supreme-shadow-soft);
}
.ui.alert.alert-success, .ui.alert.boxinformation,
html.dark-mode .ui.alert.alert-success, html.dark-mode .ui.alert.boxinformation {
  background: rgba(22, 184, 158, 0.08);
  border-color: rgba(22, 184, 158, 0.22);
}
.ui.alert.alert-warning, .ui.alert.boxwarning,
html.dark-mode .ui.alert.alert-warning, html.dark-mode .ui.alert.boxwarning {
  background: rgba(244, 169, 40, 0.08);
  border-color: rgba(244, 169, 40, 0.24);
}
.ui.alert.alert-danger, .ui.alert.boxerror,
html.dark-mode .ui.alert.alert-danger, html.dark-mode .ui.alert.boxerror {
  background: rgba(215, 59, 59, 0.08);
  border-color: rgba(215, 59, 59, 0.24);
}

/* Login page final polish */
body.task-login #layout {
  background:
    radial-gradient(880px 560px at 16% 108%, rgba(6, 148, 198, 0.22), transparent 58%),
    radial-gradient(760px 480px at 112% -18%, rgba(99, 91, 255, 0.24), transparent 54%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 96px),
    #05070e;
}
body.task-login #layout:before { opacity: 0.55; }
body.task-login #layout-content:after { color: rgba(255, 255, 255, 0.055); font-weight: 700; }

#login-form {
  padding: 34px;
  background: rgba(8, 13, 28, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--supreme-radius);
  box-shadow:
    0 32px 80px -46px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(6, 148, 198, 0.1) inset;
  backdrop-filter: blur(20px) saturate(1.1);
}

#login-form td.title label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
}

#login-form .form-control {
  min-height: 50px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--supreme-radius-sm);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
#login-form .form-control:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(35, 196, 245, 0.55);
  box-shadow: 0 0 0 4px rgba(6, 148, 198, 0.16);
}
#login-form .form-control::placeholder { color: rgba(255, 255, 255, 0.42); }

#rcmloginsubmit {
  min-height: 50px;
  border-radius: var(--supreme-radius-sm);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--supreme-cyan), var(--supreme-blue), var(--supreme-violet)) !important;
  box-shadow: 0 18px 34px -24px rgba(37, 99, 235, 0.85);
}
#rcmloginsubmit:hover {
  filter: brightness(1.05) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 22px 40px -24px rgba(37, 99, 235, 0.95);
}

.fpmail-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  font-weight: 500;
}
.fpmail-login-options a { color: #fff !important; font-weight: 600; }
.fpmail-login-options a:hover { color: #23c4f5 !important; }

#login-footer {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
}
.fpmail-login-meta {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Selection, focus, scrollbars */
::selection { background: rgba(6, 148, 198, 0.25); color: inherit; }
input:focus, textarea:focus, select:focus, .form-control:focus, .custom-select:focus,
button:focus, .button:focus, a.button:focus { outline: none !important; }
button:focus-visible, .button:focus-visible, a.button:focus-visible,
#taskmenu a:focus-visible, .folderlist li > a:focus-visible, .messagelist tbody tr:focus-visible td {
  box-shadow: var(--supreme-glow) !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(115, 129, 150, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(6, 148, 198, 0.65); border: 2px solid transparent; background-clip: padding-box; }
/* Mobile polish */
@media screen and (max-width: 880px) {
  #layout-menu, html.dark-mode #layout-menu {
    width: auto;
    box-shadow: 0 -8px 30px -28px rgba(16, 21, 36, 0.5) !important;
  }
  #taskmenu a, html.dark-mode #taskmenu a { height: 56px; margin: 2px 4px; }
  #taskmenu a.compose, html.dark-mode #taskmenu a.compose { height: 52px; margin: 6px 0 10px; }
  #layout-sidebar, #layout-list, html.dark-mode #layout-sidebar, html.dark-mode #layout-list { min-width: 0; }
  body.task-mail .messagelist, html.dark-mode body.task-mail .messagelist { border-spacing: 0 6px !important; }
  body.task-mail .messagelist tbody tr td, html.dark-mode body.task-mail .messagelist tbody tr td {
    padding: 11px 12px !important;
    font-size: 0.9rem !important;
  }
  .iframe-wrapper, html.dark-mode .iframe-wrapper {
    margin: 12px;
    border-radius: var(--supreme-radius-sm);
  }
  body.task-login #login-form {
    padding: 26px;
    border-radius: var(--supreme-radius-sm);
  }
}

/* Dark mode cohesion */
html.dark-mode body:not(.task-login), html.dark-mode body:not(.task-login) #layout {
  background:
    radial-gradient(960px 420px at 12% -16%, rgba(6, 148, 198, 0.16), transparent 58%),
    radial-gradient(840px 360px at 100% -8%, rgba(99, 91, 255, 0.13), transparent 56%),
    #05070e !important;
}

html.dark-mode #layout-menu, html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content,
html.dark-mode #layout > div > .header, html.dark-mode #layout > div > .footer,
html.dark-mode .popupmenu, html.dark-mode .popover, html.dark-mode .ui-dialog,
html.dark-mode .formcontent, html.dark-mode .frame-content {
  background: #08101d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e8effa !important;
}

html.dark-mode #layout-sidebar, html.dark-mode .task-mail.action-compose #layout-sidebar, html.dark-mode .task-mail.action-compose #compose-attachments {
  background: #0a1420 !important;
}

html.dark-mode #taskmenu a { color: rgba(232, 239, 250, 0.72) !important; }
html.dark-mode #taskmenu a:before { color: rgba(232, 239, 250, 0.55) !important; }
html.dark-mode #taskmenu a:hover, html.dark-mode #taskmenu a:focus {
  background: rgba(6, 148, 198, 0.15) !important;
  color: #fff !important;
}
html.dark-mode #taskmenu a:hover:before, html.dark-mode #taskmenu a:focus:before { color: var(--supreme-cyan) !important; }
html.dark-mode #taskmenu a.selected {
  background: rgba(6, 148, 198, 0.2) !important;
  color: #fff !important;
}

html.dark-mode .folderlist li > a, html.dark-mode .treelist li > a, html.dark-mode .messagelist td,
html.dark-mode .records-table td, html.dark-mode .table td,
html.dark-mode #layout-content .toolbar a.button, html.dark-mode #layout-content .toolbar button, html.dark-mode #mailtoolbar a.button,
html.dark-mode .popupmenu .listing li > a, html.dark-mode .popover .menu li a, html.dark-mode .nav-tabs .nav-link {
  color: #e8effa !important;
}

html.dark-mode .messagelist tbody tr td, html.dark-mode body.task-mail .messagelist tbody tr td {
  background: #0c1524 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html.dark-mode .messagelist tbody tr:hover td, html.dark-mode body.task-mail .messagelist tbody tr:hover td {
  background: #101d30 !important;
  border-color: rgba(6, 148, 198, 0.4) !important;
}
html.dark-mode .messagelist tbody tr.selected td, html.dark-mode body.task-mail .messagelist tbody tr.selected td {
  background: linear-gradient(90deg, rgba(6, 148, 198, 0.16), rgba(99, 91, 255, 0.12)), #0c1524 !important;
  border-color: rgba(6, 148, 198, 0.45) !important;
}

html.dark-mode .searchbar form,
html.dark-mode body.task-mail.action-none .searchbar form, html.dark-mode body.task-mail.action-show .searchbar form {
  background: #0c1524 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark-mode .searchbar form:focus-within,
html.dark-mode body.task-mail.action-none .searchbar form:focus-within, html.dark-mode body.task-mail.action-show .searchbar form:focus-within {
  background: #111e33 !important;
  border-color: rgba(6, 148, 198, 0.5) !important;
}

html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode select, html.dark-mode textarea,
html.dark-mode input[type="text"], html.dark-mode input[type="password"], html.dark-mode input[type="email"], html.dark-mode input[type="search"],
html.dark-mode .task-mail.action-compose .form-control, html.dark-mode .task-mail.action-compose .custom-select, html.dark-mode .task-mail.action-compose select, html.dark-mode .task-mail.action-compose textarea, html.dark-mode .task-mail.action-compose input {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html.dark-mode .form-control:focus, html.dark-mode .task-mail.action-compose .form-control:focus, html.dark-mode .task-mail.action-compose input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(6, 148, 198, 0.55) !important;
}

html.dark-mode ::-webkit-scrollbar-thumb { background: rgba(115, 129, 150, 0.35); }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(6, 148, 198, 0.55); }