:root {
  --ink: #202326;
  --muted: #545b5d;
  --line: #d9dcdb;
  --paper: #ffffff;
  --canvas: #f0f1ef;
  --forest: #202326;
  --forest-2: #343a3c;
  --coral: #3b464a;
}

.sidebar {
  background: linear-gradient(180deg, #2c3032, #17191b);
  border-right: 3px solid #a9afb0;
  overflow-y: auto;
}

.brand { gap: 13px; }
.brand-mark {
  width: 76px;
  height: 89px;
  flex: 0 0 76px;
  padding: 3px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .13);
}
.brand-mark img,
.welcome-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand strong { font-size: 16px; line-height: 1.2; }
.brand span { color: #d1d4d3; }
.login-screen { background: linear-gradient(135deg, #191c1e, #50575a); }
.login-brand .brand-mark { width: 102px; height: 119px; flex-basis: 102px; }
.login-brand strong { font-size: 18px; color: var(--forest); }
.login-brand span { color: #64726b; }
.login-card { border-top: 5px solid #202326; }

.welcome-card {
  background: linear-gradient(118deg, #373d3f, #191c1e);
  padding-right: 205px;
}
.welcome-card .eyebrow { color: #f1f1ed; }
.welcome-card .button { margin-right: 125px; white-space: nowrap; }
.welcome-card > .welcome-logo {
  position: absolute;
  right: 30px;
  bottom: 23px;
  width: 130px;
  height: 152px;
  padding: 5px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.nav-item.active { background: #fff; color: var(--forest); }
.button.light { background: #fff; color: var(--forest); }
.breadcrumb span, .eyebrow { color: var(--coral); }

.public-branded { background: linear-gradient(135deg, #191c1e, #50575a); }
.public-branded .signup-card,
.public-branded .application-card { border-top: 5px solid #202326; }
.signup-brand img,
.application-brand img {
  display: block;
  flex: 0 0 78px;
  width: 78px;
  height: 92px;
  object-fit: contain;
  padding: 3px;
  background: #fff;
  border: 1px solid #dce5dd;
  border-radius: 9px;
}
.public-branded .signup-brand strong,
.public-branded .application-brand strong { font-size: 17px; }
.smtp-settings-panel { margin-top: 18px; padding: 24px; }
.smtp-settings-panel h3 { font: 700 20px Georgia, serif; margin: 14px 0 6px; }
.smtp-settings-panel p { max-width: 760px; color: var(--muted); line-height: 1.55; }
.smtp-actions { flex-wrap: wrap; }
.smtp-result { min-height: 1.4em; margin-top: 14px; color: var(--forest); font-weight: 700; }
.login-card .legal-links { margin-top: 14px; text-align: center; }
.login-card .legal-links a { color: var(--forest); font-weight: 700; }
.sidebar-footer .legal-links { padding: 7px 12px; }
.sidebar-footer .legal-links a { color: #fff; }
.public-legal-links { display: flex; justify-content: center; gap: 20px; margin: 20px auto; }
.public-legal-links a { color: #fff; font-weight: 700; }
.nav-item:hover { background: #454b4d; color: #fff; }
.button.secondary { background: #e8ebea; color: #202326; }
.filter.active { background: #dce0df; color: #202326; }
.tip-card { background: #e3e6e5; color: #202326; }
body:not(.poll-public) { font-size: 15px; }
.button { font-size: 14px; }
.button.small { font-size: 13px; }
.toast { background: #202326; }
.meeting-hero { background: #eceeed; }
.task-assignee,.member-avatar,.settings-icon { background: #e0e4e3; color: #202326; }
.tag.upcoming { background: #ebe6d7; color: #4b412b; }
.tag.past { background: #e4e7e6; color: #424a4a; }
.tip-card p { color: #454e50; }
.theme-preview { margin-top: 20px; border: 2px solid #555b5d; border-radius: 12px; padding: 22px; min-height: 130px; }
.theme-preview strong { display: block; font: 700 21px Georgia, serif; }
.theme-preview p { margin: 8px 0 14px; line-height: 1.45; }
.theme-preview span { display: inline-block; border-radius: 7px; padding: 9px 13px; color: #fff; font-weight: 700; }
#themeForm input[type=color] { min-height: 48px; padding: 4px; cursor: pointer; }
#themeForm .modal-footer { flex-wrap: wrap; }

@media (max-width: 760px) {
  .welcome-card { padding-right: 26px; padding-bottom: 150px; }
  .welcome-card .button { margin-right: 0; }
  .welcome-card > .welcome-logo { right: 20px; bottom: 17px; width: 100px; height: 117px; }
  .sidebar .brand { padding-left: 0; padding-right: 0; }
}