:root {
  color-scheme: light;
  --hb-bg: #eef7ff;
  --hb-surface: #ffffff;
  --hb-surface-soft: #f6fbff;
  --hb-line: #d8e7f7;
  --hb-text: #202124;
  --hb-muted: #5f6368;
  --hb-blue: #1a73e8;
  --hb-blue-hover: #1558b0;
  --hb-blue-soft: #e8f0fe;
  --hb-green: #188038;
  --hb-yellow: #fbbc04;
  --hb-red: #ea4335;
  --hb-shadow: 0 18px 50px rgba(60, 64, 67, 0.14);
  --hb-shadow-soft: 0 8px 24px rgba(60, 64, 67, 0.10);
  --hb-radius: 18px;
  --hb-radius-sm: 12px;
  --hb-page-gradient:
    radial-gradient(circle at 8% 6%, rgba(135, 206, 250, 0.30), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(232, 240, 254, 0.95), transparent 30rem),
    linear-gradient(135deg, #eef8ff 0%, #f7fbff 46%, #ffffff 100%);
  --hb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

html,
html.dark-mode,
body {
  color-scheme: light !important;
  background: var(--hb-bg) !important;
  color: var(--hb-text) !important;
  font-family: var(--hb-font) !important;
  letter-spacing: 0 !important;
}

body {
  background: var(--hb-page-gradient) !important;
}

html.dark-mode body,
html.dark-mode .popover,
html.dark-mode .popover-body,
html.dark-mode .popupmenu,
html.dark-mode .menu,
html.dark-mode .ui-widget,
html.dark-mode .ui-widget-content,
html.dark-mode .ui-widget-header,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-dialog .ui-dialog-buttonpane,
html.dark-mode .ui-menu,
html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-dialog__body,
html.dark-mode .tox .tox-dialog__footer,
html.dark-mode .tox .tox-dialog__header {
  background: var(--hb-surface) !important;
  border-color: var(--hb-line) !important;
  color: var(--hb-text) !important;
  box-shadow: var(--hb-shadow-soft) !important;
}

a,
.text-primary {
  color: var(--hb-blue) !important;
}

.btn,
button,
input,
select,
textarea,
.form-control,
.custom-select {
  font-family: var(--hb-font) !important;
}

.btn,
.button,
button {
  border-radius: 999px !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease,
    color 160ms ease, transform 160ms ease;
}

.btn-primary,
button[type="submit"],
.button.mainaction,
.toolbar a.compose,
#login-form button,
#login-form input[type="submit"] {
  background: var(--hb-blue) !important;
  border-color: var(--hb-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.24) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.button.mainaction:hover,
.toolbar a.compose:hover,
#login-form button:hover,
#login-form input[type="submit"]:hover {
  background: var(--hb-blue-hover) !important;
  border-color: var(--hb-blue-hover) !important;
}

.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: #fff !important;
  border: 1px solid var(--hb-line) !important;
  border-radius: var(--hb-radius-sm) !important;
  color: var(--hb-text) !important;
  box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--hb-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14) !important;
  outline: none !important;
}

/* Login */
body.task-login {
  min-height: 100vh;
  overflow: auto !important;
  background: var(--hb-page-gradient) !important;
}

body.task-login #layout {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100vh !important;
  height: auto !important;
  width: 100% !important;
  overflow: auto !important;
  padding: clamp(28px, 8vh, 76px) 16px !important;
  box-sizing: border-box !important;
}

body.task-login #layout-content.no-navbar {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  display: block !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 44px 40px 34px !important;
  box-sizing: border-box !important;
  background: var(--hb-surface) !important;
  border: 1px solid var(--hb-line) !important;
  border-radius: 28px !important;
  box-shadow: var(--hb-shadow) !important;
}

body.task-login #layout-content.no-navbar::before {
  content: none !important;
  display: none !important;
}

body.task-login #login-form::before {
  content: "haotianblog Mail";
  display: block;
  color: var(--hb-text);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 8px;
}

body.task-login #layout-content.no-navbar::after {
  content: none !important;
  display: none !important;
}

body.task-login #login-form table::before {
  content: "Use your haotianblog.com mailbox";
  display: block;
  color: var(--hb-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: -2px 0 26px;
}

body.task-login #logo {
  position: static !important;
  top: auto !important;
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  max-height: none !important;
  margin: 0 auto 22px !important;
  border-radius: 14px !important;
  padding: 9px !important;
  background:
    linear-gradient(90deg, var(--hb-blue) 0 25%, var(--hb-red) 25% 50%, var(--hb-yellow) 50% 75%, var(--hb-green) 75%) !important;
  object-fit: contain !important;
  box-shadow: 0 6px 18px rgba(60, 64, 67, 0.18) !important;
}

body.task-login #login-form {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
}

body.task-login #login-form tr {
  margin: 0 0 16px !important;
}

body.task-login #login-form td.title {
  margin: 16px 0 8px !important;
  color: var(--hb-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.task-login #login-form td.input {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.task-login #login-form td.input::before,
body.task-login #login-form td.input::after {
  content: none !important;
  display: none !important;
}

body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append,
body.task-login #login-form .input-group-text,
body.task-login #login-form .icon {
  display: none !important;
}

body.task-login #login-form .form-control {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons {
  margin-top: 26px !important;
  text-align: right !important;
}

body.task-login #login-form button,
body.task-login #login-form input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 112px !important;
  height: 42px !important;
  padding: 0 22px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

body.task-login #login-footer {
  margin-top: 30px !important;
  color: var(--hb-muted) !important;
  font-size: 13px !important;
  text-align: center !important;
  flex: none !important;
}

/* App shell */
#layout,
#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
  background: transparent !important;
  color: var(--hb-text) !important;
}

#layout {
  background: var(--hb-page-gradient) !important;
}

#layout-menu {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  border-right: 1px solid var(--hb-line) !important;
  box-shadow: 4px 0 20px rgba(60, 64, 67, 0.06) !important;
}

#layout-menu .popover-header,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--hb-line) !important;
  color: var(--hb-text) !important;
  backdrop-filter: blur(12px);
}

html.dark-mode #layout,
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 #layout-menu .popover-header,
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
  border-color: var(--hb-line) !important;
  color: var(--hb-text) !important;
}

html.dark-mode #layout {
  background: var(--hb-page-gradient) !important;
}

html.dark-mode #layout-menu {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar .scroller,
html.dark-mode #layout-list .scroller,
html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #messagebody {
  background: var(--hb-surface) !important;
}

.header-title,
.username {
  color: var(--hb-text) !important;
  font-weight: 600 !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
  border-color: var(--hb-line) !important;
  background: var(--hb-surface) !important;
}

#layout-sidebar .scroller,
#layout-list .scroller,
#layout-content .iframe-wrapper,
#messagebody {
  background: var(--hb-surface) !important;
}

#layout-list {
  background: var(--hb-surface) !important;
  border-left: 1px solid var(--hb-line) !important;
  border-right: 1px solid var(--hb-line) !important;
}

#layout-content {
  background: #fff !important;
}

.searchbar,
#mailsearchform {
  background: var(--hb-surface-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  margin: 10px 14px !important;
  box-shadow: none !important;
}

.searchbar input,
#mailsearchform input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.listing li,
.listing tbody tr {
  border-color: #edf1f7 !important;
  background: #fff !important;
  color: var(--hb-text) !important;
}

.listing li:hover,
.listing tbody tr:hover {
  background: #f8fbff !important;
}

.listing li.selected,
.listing tbody tr.selected,
.messagelist tr.selected,
.folderlist li.selected > a,
.folderlist li.mailbox.selected > a {
  background: var(--hb-blue-soft) !important;
  color: var(--hb-text) !important;
}

html.dark-mode .listing,
html.dark-mode .listing li,
html.dark-mode .listing tbody tr,
html.dark-mode .messagelist,
html.dark-mode .messagelist tr,
html.dark-mode .messagelist td,
html.dark-mode .messagelist td.subject a,
html.dark-mode .folderlist,
html.dark-mode .treelist,
html.dark-mode .contactlist,
html.dark-mode .attachmentslist,
html.dark-mode .attachmentslist li,
html.dark-mode .table,
html.dark-mode .table td,
html.dark-mode .table th {
  background: #fff !important;
  border-color: var(--hb-line) !important;
  color: var(--hb-text) !important;
}

html.dark-mode .listing li:hover,
html.dark-mode .listing tbody tr:hover,
html.dark-mode .messagelist tr:hover,
html.dark-mode .contactlist li:hover {
  background: #f8fbff !important;
  color: var(--hb-text) !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing tbody tr.selected,
html.dark-mode .messagelist tr.selected,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li.mailbox.selected > a {
  background: var(--hb-blue-soft) !important;
  color: var(--hb-text) !important;
}

.folderlist li a,
.treelist li a {
  border-radius: 999px !important;
  margin: 2px 8px !important;
  color: #3c4043 !important;
}

.folderlist li a:hover,
.treelist li a:hover {
  background: #f1f3f4 !important;
}

.taskmenu,
.taskmenu li,
.taskmenu a,
#layout-menu .menu,
#layout-menu .menu li,
#layout-menu .menu a {
  background: transparent !important;
  color: var(--hb-muted) !important;
}

.taskmenu a:hover,
.taskmenu a.selected,
.taskmenu li.selected > a,
#layout-menu .menu a:hover,
#layout-menu .menu li.selected > a {
  background: var(--hb-blue-soft) !important;
  color: var(--hb-blue) !important;
}

.taskmenu a:before,
.taskmenu a .inner,
#layout-menu a:before,
#layout-menu a .inner {
  color: inherit !important;
}

.toolbar a,
.button.icon,
a.button {
  color: var(--hb-muted) !important;
}

.toolbar a:hover,
.button.icon:hover,
a.button:hover {
  background: #f1f3f4 !important;
  color: var(--hb-text) !important;
}

.popupmenu,
.popover,
.menu {
  border-color: var(--hb-line) !important;
  border-radius: var(--hb-radius) !important;
  box-shadow: var(--hb-shadow-soft) !important;
}

.quota-widget,
#quotadisplay {
  color: var(--hb-muted) !important;
}

.message-part,
.message-header,
.contact-header,
.formcontainer,
.preferences,
.settingsbox,
.formcontent,
.frame-content,
.message-partheaders,
.recipient-input,
.multi-input > .content {
  background: #fff !important;
  border-color: var(--hb-line) !important;
  color: var(--hb-text) !important;
}

.iframe-wrapper iframe {
  background: #fff !important;
}

html.dark-mode .form-control,
html.dark-mode .custom-file-label,
html.dark-mode .custom-select,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .recipient-input,
html.dark-mode .multi-input > .content,
html.dark-mode .tox .tox-textfield,
html.dark-mode .tox .tox-selectfield select {
  background: #fff !important;
  border-color: var(--hb-line) !important;
  color: var(--hb-text) !important;
}

html.dark-mode .header-title,
html.dark-mode .username,
html.dark-mode .message-header,
html.dark-mode .message-header *,
html.dark-mode .message-part,
html.dark-mode .message-part *,
html.dark-mode .contact-header,
html.dark-mode .contact-header *,
html.dark-mode .listing span.secondary,
html.dark-mode .listing-info,
html.dark-mode .attachmentslist .attachment-name,
html.dark-mode .attachmentslist .attachment-size,
html.dark-mode .folderlist li a,
html.dark-mode .treelist li a,
html.dark-mode .toolbar a,
html.dark-mode .button.icon,
html.dark-mode a.button,
html.dark-mode ::placeholder {
  color: var(--hb-text) !important;
}

html.dark-mode .listing span.secondary,
html.dark-mode .listing-info,
html.dark-mode .attachmentslist .attachment-size,
html.dark-mode ::placeholder {
  color: var(--hb-muted) !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c6ccd7;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 800px) {
  body.task-login #layout-content.no-navbar {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-top: 0 !important;
    padding: 34px 24px 28px !important;
    border-radius: 22px !important;
  }

  body.task-login #login-form::before {
    font-size: 26px;
  }

  body.task-login #login-form .formbuttons,
  body.task-login #login-form p.formbuttons {
    text-align: stretch !important;
  }

  body.task-login #login-form button,
  body.task-login #login-form input[type="submit"] {
    width: 100% !important;
  }

  #layout-menu {
    box-shadow: none !important;
  }

  .searchbar,
  #mailsearchform {
    margin: 8px !important;
  }
}

@media (max-width: 560px) {
  body.task-login #layout {
    justify-content: flex-start !important;
    padding: 24px 16px !important;
    overflow-x: hidden !important;
  }

  body.task-login #layout-content.no-navbar {
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 32px 22px 28px !important;
  }
}