@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/exo2-600-5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/exo2-600-6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/exo2-600-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/exo2-600-8.woff2) format('woff2');
  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: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/exo2-600-9.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/exo2-600-5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/exo2-600-6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/exo2-600-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/exo2-600-8.woff2) format('woff2');
  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: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/exo2-600-9.woff2) format('woff2');
  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;
}

/* SPLUS — day theme: logo-blue surfaces + accents. Night = stock Elastic. */

#logo,
#layout-menu #logo,
img#logo {
  cursor: pointer !important;
}

/* Hide Roundcube/panel mark logo everywhere — brand bar wordmark only */
#layout-menu #logo,
#layout-menu .popover-header img#logo,
#layout-menu .popover-header #logo,
body.task-login #layout-content > #logo,
body.task-login img#logo,
#logo:not(.splus-brand-logo) {
  display: none !important;
}
#layout-menu .popover-header {
  /* keep close button on mobile; no logo block */
  min-height: 0;
}
@media screen and (min-width: 1025px) {
  #layout-menu .popover-header {
    display: none !important;
  }
}


/* Brand bar structure */
#splus-brand-bar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  padding: 0 1.15rem;
  z-index: 1200;
  width: 100%;
}
#splus-brand-bar .splus-brand-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: min(300px, 42vw);
  text-decoration: none;
  line-height: 0;
  padding-right: 1.15rem;
}
#splus-brand-bar .splus-brand-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
#splus-brand-bar .splus-brand-slogan {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.15rem 0 0.15rem 1.25rem;
  font-family: "Exo 2", "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html:not(.iframe) body {
  display: flex !important;
  flex-direction: column !important;
}
html:not(.iframe) body > #layout,
html:not(.iframe) body > #print-layout {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

@media screen and (max-width: 1100px) {
  #splus-brand-bar .splus-brand-slogan { font-size: 1.05rem; }
}
@media screen and (max-width: 900px) {
  #splus-brand-bar .splus-brand-slogan { font-size: 0.95rem; }
}
@media screen and (max-width: 640px) {
  #splus-brand-bar { height: 50px; min-height: 50px; padding: 0 0.75rem; }
  #splus-brand-bar .splus-brand-link { padding-right: 0.85rem; max-width: min(220px, 48vw); }
  #splus-brand-bar .splus-brand-logo { height: 24px; }
  #splus-brand-bar .splus-brand-slogan { font-size: 0.85rem; padding-left: 0.9rem; }
}
@media screen and (max-width: 480px) {
  #splus-brand-bar .splus-brand-slogan { display: none; }
}
@media print {
  #splus-brand-bar { display: none !important; }
}

#settings-menu li.splus-settings-about a:before,
#settings-menu li.about a:before {
  font-family: "Icons";
  font-weight: 900;
  content: "\f128";
}

/* ===== DAY: logo-family blues (not neutral gray) =====
   bg      #FFFFFF  content
   chrome  #E8F2FA  headers / sidebars / bars (logo tint)
   line    #C5D9EB  borders
   soft    #D6E8F6  hover / selected wash
   logo    #0D5FA6  accents
   menu    #0B3F70  left rail
*/
html:not(.dark-mode) {
  --splus-bg: #FFFFFF;
  --splus-chrome: #E8F2FA;
  --splus-line: #C5D9EB;
  --splus-soft: #D6E8F6;
  --splus-logo: #0D5FA6;
  --splus-logo-hover: #0A4A82;
  --splus-sky: #00AFCA;
  --splus-menu: #0B3F70;
  --splus-text: #1E2A30;
}

html:not(.dark-mode) body {
  color: var(--splus-text);
  background: var(--splus-bg);
}

/* Brand bar = same logo-tint chrome */
html:not(.dark-mode) #splus-brand-bar {
  background: var(--splus-chrome);
  border-bottom: 1px solid var(--splus-line);
}
html:not(.dark-mode) #splus-brand-bar .splus-brand-slogan {
  border-left: 3px solid var(--splus-logo);
  color: var(--splus-logo);
}

/* One logo-tint chrome for bars / sidebar / footer / search */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #layout-content > .header,
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #messagelist-header,
html:not(.dark-mode) .searchbar,
html:not(.dark-mode) #layout > div > .footer,
html:not(.dark-mode) .pagenav,
html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar,
html:not(.dark-mode) .popover-header:not(#layout-menu .popover-header),

html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content {
  border-color: var(--splus-line) !important;
}

/* Content panes white */
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #messagelist-content,
html:not(.dark-mode) .iframe-wrapper,
html:not(.dark-mode) #folderlist-content,
html:not(.dark-mode) #layout-sidebar .scroller {
  background-color: var(--splus-bg) !important;
}

/* Sidebar header matches other headers */
html:not(.dark-mode) #layout-sidebar > .header {
  background-color: var(--splus-chrome) !important;
}

/* Links */
html:not(.dark-mode) .iframe-wrapper a,
html:not(.dark-mode) .ui-dialog a,
html:not(.dark-mode) .ui-widget-content a,
html:not(.dark-mode) #messagebody a,
html:not(.dark-mode) .formcontent a,
html:not(.dark-mode) .propform a,
html:not(.dark-mode) #login-footer a,
html:not(.dark-mode) .support-link,
html:not(.dark-mode) .messagelist td.subject a,
html:not(.dark-mode) .contactlist li a {
  color: var(--splus-logo);
}
html:not(.dark-mode) .iframe-wrapper a:hover,
html:not(.dark-mode) .messagelist td.subject a:hover {
  color: var(--splus-logo-hover);
}

/* Buttons */
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .button.mainaction,
html:not(.dark-mode) .formbuttons .btn-primary,
html:not(.dark-mode) button.btn.btn-primary,
html:not(.dark-mode) a.btn.btn-primary,
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane button.btn-primary,
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane button.mainaction,
html:not(.dark-mode) #login-form .button,
html:not(.dark-mode) .floating-action-buttons a.button {
  background-color: var(--splus-logo) !important;
  border-color: var(--splus-logo) !important;
  color: #fff !important;
}
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .button.mainaction:hover,
html:not(.dark-mode) #login-form .button:hover,
html:not(.dark-mode) .floating-action-buttons a.button:hover {
  background-color: var(--splus-logo-hover) !important;
  border-color: var(--splus-logo-hover) !important;
}

/* Soft selection — one wash */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected,
html:not(.dark-mode) .messagelist tr.selected,
html:not(.dark-mode) .messagelist tr.selected td,
html:not(.dark-mode) .contactlist li.selected,
html:not(.dark-mode) .folderlist li.selected > a,
html:not(.dark-mode) #mailboxlist li.selected > a,
html:not(.dark-mode) #settings-menu li.selected > a,
html:not(.dark-mode) #directorylist li.selected > a,
html:not(.dark-mode) .popupmenu .menu a.active,
html:not(.dark-mode) .popupmenu .menu a:hover,
html:not(.dark-mode) .popover:not(#layout-menu) .menu a.active,
html:not(.dark-mode) .popover:not(#layout-menu) .menu a:hover {
  background-color: var(--splus-soft) !important;
  color: var(--splus-logo) !important;
}
html:not(.dark-mode) .folderlist li.selected > a,
html:not(.dark-mode) #mailboxlist li.selected > a,
html:not(.dark-mode) #settings-menu li.selected > a,
html:not(.dark-mode) #directorylist li.selected > a {
  box-shadow: inset 3px 0 0 var(--splus-logo);
}
html:not(.dark-mode) .folderlist li.selected > a:before,
html:not(.dark-mode) #mailboxlist li.selected > a:before,
html:not(.dark-mode) #settings-menu a:before,
html:not(.dark-mode) .folderlist li a:before,
html:not(.dark-mode) #mailboxlist li a:before,
html:not(.dark-mode) #directorylist li a:before,
html:not(.dark-mode) .popupmenu .menu a:before,
html:not(.dark-mode) .popover:not(#layout-menu) .menu a:before {
  color: var(--splus-logo) !important;
}

html:not(.dark-mode) #mailboxlist li a,
html:not(.dark-mode) .folderlist li a,
html:not(.dark-mode) #settings-menu a,
html:not(.dark-mode) #directorylist li a {
  color: var(--splus-text) !important;
}
html:not(.dark-mode) #mailboxlist li a:hover,
html:not(.dark-mode) .folderlist li a:hover,
html:not(.dark-mode) #settings-menu a:hover,
html:not(.dark-mode) #directorylist li a:hover {
  background-color: var(--splus-soft) !important;
  color: var(--splus-logo-hover) !important;
}

/* Focus / quota / counters */
html:not(.dark-mode) input:focus,
html:not(.dark-mode) textarea:focus,
html:not(.dark-mode) select:focus,
html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .custom-select:focus,
html:not(.dark-mode) .searchbar input:focus {
  border-color: var(--splus-logo) !important;
  box-shadow: 0 0 0 0.15rem rgba(13, 95, 166, 0.18) !important;
}
html:not(.dark-mode) #layout-content .header a.button.icon:not(.disabled):hover,
html:not(.dark-mode) #layout-list .header a.button.icon:not(.disabled):hover,
html:not(.dark-mode) #messagelist-header a.button.icon:not(.disabled):hover,
html:not(.dark-mode) .menu.toolbar a:not(.disabled):hover {
  background-color: var(--splus-soft) !important;
}
html:not(.dark-mode) input[type="checkbox"]:checked,
html:not(.dark-mode) input[type="radio"]:checked {
  accent-color: var(--splus-logo);
}
html:not(.dark-mode) .quota-widget .bar .value,
html:not(.dark-mode) #quotadisplay .bar .value {
  background-color: var(--splus-logo) !important;
}
html:not(.dark-mode) .quota-widget .bar {
  background-color: var(--splus-soft) !important;
  border-color: var(--splus-line) !important;
}
html:not(.dark-mode) .folderlist span.unreadcount,
html:not(.dark-mode) .treelist span.unreadcount,
html:not(.dark-mode) #mailboxlist span.unreadcount {
  background-color: var(--splus-logo) !important;
  color: #fff !important;
}

/* Popups */
html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .popover:not(#layout-menu) {
  background: var(--splus-bg) !important;
  border: 1px solid var(--splus-line) !important;
  box-shadow: 0 8px 24px rgba(30, 42, 48, 0.1) !important;
}
html:not(.dark-mode) .popupmenu .menu a,
html:not(.dark-mode) .popover:not(#layout-menu) .menu a {
  color: var(--splus-text) !important;
}

html:not(.dark-mode) .nav-tabs .nav-link.active,
html:not(.dark-mode) .tablink.selected {
  color: var(--splus-logo) !important;
  border-bottom-color: var(--splus-logo) !important;
}
html:not(.dark-mode) ::selection {
  background: rgba(13, 95, 166, 0.22);
}

/* Left rail — only saturated surface */
html:not(.dark-mode) #layout-menu,
html:not(.dark-mode) #layout-menu.popover,
html:not(.dark-mode) #layout-menu .popover-header,
html:not(.dark-mode) #layout-menu #taskmenu,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons,
html:not(.dark-mode) #layout-menu #taskmenu .action-buttons {
  background: var(--splus-menu) !important;
}
html:not(.dark-mode) #layout-menu {
  border-right: 1px solid #083258 !important;
}
html:not(.dark-mode) #layout-menu #taskmenu a,
html:not(.dark-mode) #layout-menu #taskmenu a .inner,
html:not(.dark-mode) #layout-menu #taskmenu a:before,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons a,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons a:before,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons a .inner {
  color: #EAF2F8 !important;
}
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons a:not(:focus):not(:hover) {
  background: transparent !important;
}
html:not(.dark-mode) #layout-menu #taskmenu a:hover,
html:not(.dark-mode) #layout-menu #taskmenu a:focus,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons a:hover,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons a:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
html:not(.dark-mode) #layout-menu #taskmenu a.selected,
html:not(.dark-mode) #layout-menu #taskmenu a.selected:hover {
  background: rgba(0, 175, 202, 0.25) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--splus-sky) !important;
}
html:not(.dark-mode) #layout-menu #taskmenu a.compose,
html:not(.dark-mode) #layout-menu #taskmenu a.compose:before,
html:not(.dark-mode) #layout-menu #taskmenu a.compose .inner {
  color: #fff !important;
}
html:not(.dark-mode) #layout-menu #taskmenu a.compose:hover,
html:not(.dark-mode) #layout-menu #taskmenu a.compose.selected {
  background: var(--splus-logo) !important;
  box-shadow: inset 3px 0 0 var(--splus-sky) !important;
}

/* Flatten Elastic default chrome patches in day */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) .header,
html:not(.dark-mode) .searchbar,
html:not(.dark-mode) .footer {
  background-image: none !important;
}

/* Night: stock Elastic dark chrome + visible gray logo (= slogan color) */
html.dark-mode {
  --splus-night-fg: #8B9FA7;
  --splus-night-bg: #21292c;
  --splus-night-line: #4d6066;
}

html.dark-mode #splus-brand-bar {
  background: var(--splus-night-bg) !important;
  border-bottom: 1px solid var(--splus-night-line) !important;
}

html.dark-mode #splus-brand-bar .splus-brand-slogan {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--splus-night-fg) !important;
  -webkit-text-fill-color: var(--splus-night-fg) !important;
  border-left: 3px solid var(--splus-night-fg) !important;
  position: relative;
  z-index: 2;
}

/* Logo: keep real image, recolor to exact slogan gray via filter */
html.dark-mode #splus-brand-bar .splus-brand-link {
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html.dark-mode #splus-brand-bar .splus-brand-link::after {
  content: none !important;
  display: none !important;
}
html.dark-mode #splus-brand-bar .splus-brand-logo {
  opacity: 1 !important;
  display: block !important;
  height: 30px;
  width: auto;
  max-width: 100%;
  /* black → #8B9FA7 (same as slogan) */
  filter: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(421%) hue-rotate(152deg) brightness(93%) contrast(87%);
}

/* Toolbars / headers / sidebars: same dark bg as body (fix light leftovers) */
html.dark-mode #layout > div > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode #messagelist-header,
html.dark-mode .searchbar,
html.dark-mode #layout > div > .footer,
html.dark-mode .pagenav,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-color: var(--splus-night-bg) !important;
  border-color: var(--splus-night-line) !important;
  color: #c5d1d3 !important;
}

html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .header a.button:before,
html.dark-mode #layout-list > .header a.button,
html.dark-mode #layout-list > .header a.button:before,
html.dark-mode #layout-content > .header a.button,
html.dark-mode #layout-content > .header a.button:before,
html.dark-mode #messagelist-header a.button,
html.dark-mode #messagelist-header a.button:before,
html.dark-mode .menu.toolbar a,
html.dark-mode .menu.toolbar a:before,
html.dark-mode .menu.toolbar a .inner,
html.dark-mode .header .toolbar a,
html.dark-mode .header .toolbar a:before,
html.dark-mode .header .toolbar a .inner {
  color: #c5d1d3 !important;
}

html.dark-mode .menu.toolbar a:hover,
html.dark-mode .menu.toolbar a:focus,
html.dark-mode #layout > div > .header a.button:hover,
html.dark-mode #layout-content > .header a.button:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #e8eef0 !important;
}

/* Left task menu — same family as Elastic night */
html.dark-mode #layout-menu,
html.dark-mode #layout-menu.popover,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu #taskmenu,
html.dark-mode #layout-menu #taskmenu .special-buttons,
html.dark-mode #layout-menu #taskmenu .action-buttons {
  background: #2f3a3f !important;
  border-color: var(--splus-night-line) !important;
}
html.dark-mode #layout-menu #taskmenu a,
html.dark-mode #layout-menu #taskmenu a:before,
html.dark-mode #layout-menu #taskmenu a .inner,
html.dark-mode #layout-menu #taskmenu .special-buttons a,
html.dark-mode #layout-menu #taskmenu .special-buttons a:before {
  color: #c5d1d3 !important;
}
html.dark-mode #layout-menu #taskmenu .special-buttons a:not(:focus):not(:hover) {
  background: transparent !important;
}
html.dark-mode #layout-menu #taskmenu a:hover,
html.dark-mode #layout-menu #taskmenu .special-buttons a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
html.dark-mode #layout-menu #taskmenu a.selected {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #8B9FA7;
}

/* ===== Login page brand stack ===== */
body.task-login #splus-brand-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Login: center horizontally + vertically */
html:has(body.task-login),
body.task-login {
  height: 100% !important;
  min-height: 100vh !important;
  overflow: auto !important;
}
body.task-login #layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  height: 100% !important;
  width: 100% !important;
}
body.task-login #layout-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
  height: auto !important;
  padding: 1.5rem 1rem !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}
body.task-login #login-form {
  position: relative !important;
  top: 0 !important;
  margin: 0 auto !important;
  width: 95% !important;
  max-width: 320px !important;
}



html:not(.dark-mode) body.task-login,
html:not(.dark-mode) body.task-login #layout,
html:not(.dark-mode) body.task-login #layout-content,
html:not(.dark-mode) body.task-login #login-form {
  background: #E8F2FA !important;
  background-image: none !important;
}
body.task-login #layout > *:not(#layout-content) {
  display: none !important;
}

body.task-login .splus-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  margin: 0 auto 1.75rem;
  max-width: 360px;
  padding: 0 1rem;
}

body.task-login .splus-login-logo {
  display: block !important;
  height: 42px;
  width: auto;
  max-width: min(300px, 80vw);
  object-fit: contain;
  margin: 0 auto;
}

body.task-login .splus-login-slogan {
  margin: 0;
  padding: 0;
  color: #0D5FA6;
  font-family: "Exo 2", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

body.task-login .splus-login-subtitle {
  margin: 1.1rem 0 0;
  padding: 0;
  color: #5a6570;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

body.task-login #login-form {
  top: 0 !important;
  margin-top: 0 !important;
}

body.task-login #login-footer {
  display: none !important;
}

/* Night login */
html.dark-mode body.task-login,
html.dark-mode body.task-login #layout,
html.dark-mode body.task-login #layout-content {
  background: #21292c !important;
}
html.dark-mode body.task-login .splus-login-slogan {
  color: #8B9FA7 !important;
}
html.dark-mode body.task-login .splus-login-subtitle {
  color: #8B9FA7 !important;
}
html.dark-mode body.task-login .splus-login-logo {
  filter: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(421%) hue-rotate(152deg) brightness(93%) contrast(87%);
}

@media screen and (max-width: 480px) {
  body.task-login #layout-content {
    padding: 1rem !important;
  }
  body.task-login .splus-login-logo {
    height: 34px;
  }
  body.task-login .splus-login-slogan {
    font-size: 0.92rem;
  }
  body.task-login .splus-login-subtitle {
    font-size: 0.85rem;
  }
}

/* Hide product name under login form */
body.task-login #login-footer,
body.task-login #login-form .product-name,
body.task-login #login-form .login-footer,
body.task-login .formbuttons + div,
body.task-login #layout-content > .product-name {
  display: none !important;
}