:root {
  --newg-brand-red: #d52b1e;
  --newg-accent: var(--newg-brand-red);
  --newg-accent-hover: #b92217;
  --newg-ink: #1b1a19;
  --newg-muted: #57534d;
  --newg-line: #e6e3df;
  --newg-surface: #fff;
  --newg-paper: #f8f7f5;
  --newg-select: #fcf0ed;
  --newg-font: Inter, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.dark-mode {
  --newg-accent: #ff9385;
  --newg-accent-hover: #ffb4aa;
  --newg-ink: #f5f2ee;
  --newg-muted: #c1b9b0;
  --newg-line: #49413f;
  --newg-surface: #262120;
  --newg-paper: #1c1918;
  --newg-select: #4b2926;
}

body.task-login,
body.task-mail,
body.task-settings,
body.task-addressbook {
  font-family: var(--newg-font);
}

.task-login #layout-content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 30px 20px;
  color: var(--newg-ink);
  background: var(--newg-paper);
  text-align: start;
}

.newg-login {
  width: min(100%, 390px);
  border: 1px solid var(--newg-line);
  border-top: 3px solid var(--newg-brand-red);
  padding: clamp(23px, 6vw, 39px);
  background: var(--newg-surface);
}

.task-login .newg-login-heading #logo {
  display: block;
  position: static;
  width: 98px;
  height: auto;
  margin: -5px 0 8px -5px;
}

.newg-login-heading h1 {
  margin: 8px 0 7px;
  color: var(--newg-ink);
  font-size: 2rem;
  font-weight: 680;
  letter-spacing: -.045em;
}

.newg-login-heading p {
  margin: 0 0 24px;
  color: var(--newg-muted);
  font-size: .94rem;
}

.newg-login #login-form {
  top: auto;
  width: 100%;
  max-width: none;
  margin: 0;
}

.newg-login .form-control {
  height: 44px;
  border-radius: 4px;
  border-color: var(--newg-line);
  color: var(--newg-ink);
  background: var(--newg-surface);
}

.newg-login .form-control:focus {
  border-color: var(--newg-accent);
  box-shadow: 0 0 0 2px var(--newg-select);
}

.newg-login #rcmloginsubmit {
  min-height: 43px;
  border: 1px solid var(--newg-brand-red);
  border-radius: 4px;
  color: #fff;
  background: var(--newg-brand-red);
  font-weight: 650;
}

.newg-login #rcmloginsubmit:hover,
.newg-login #rcmloginsubmit:focus-visible {
  border-color: #b92217;
  background: #b92217;
}

.newg-login #login-footer:empty {
  display: none;
}

.newg-login-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 24px;
  padding-top: 15px;
  border-top: 1px solid var(--newg-line);
  font-size: .9rem;
}

.newg-login-links a {
  color: var(--newg-accent);
  text-underline-offset: .18em;
}

.newg-login-links a:hover {
  color: var(--newg-accent-hover);
}

#layout-menu #taskmenu .action-buttons a.compose {
  border-radius: 4px;
  background: var(--newg-brand-red);
  color: #fff;
}

#layout-menu #taskmenu .action-buttons a.compose:hover,
#layout-menu #taskmenu .action-buttons a.compose:focus-visible {
  background: #b92217;
}

#messagelist tbody tr.selected td,
#mailboxlist li.selected > a {
  background: var(--newg-select);
  color: var(--newg-ink);
}

#layout-menu #taskmenu .newg-archive::before {
  content: "\f187";
}

#layout-menu #taskmenu .newg-admin::before {
  content: "\f4fe";
}

#layout-menu .popover-header {
  background: var(--newg-surface) !important;
}

#layout-menu .popover-header img#logo {
  width: min(95%, 87px);
  max-width: none;
  height: auto;
  object-fit: contain;
}