:root {
  /* ── Type scale: 1.25 major-third, base 16 px ────────────── */
  --fs-caption:    11px;
  --fs-small:      13px;
  --fs-body:       14px;
  --fs-body-large: 16px;
  --fs-h4:         18px;
  --fs-h3:         22px;
  --fs-h2:         26px;
  --fs-h1:         32px;
  --fs-display:    40px;
  --background: #e8e2d6;
  --panel: #f4efe3;
  --ink: #1c2412;
  --muted: #6a7850;
  --line: #c4bba6;
  --green: #5c7a2a;
  --green-dark: #3d5018;
  --green-light: #d8e8b0;
  --text: var(--ink);
  --shadow: 0 24px 65px rgba(28, 36, 18, 0.10);
  font-family: Inter, "Avenir Next", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
}

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: #18181b; padding: 12px; }

/* Rounded card that contains all page content */
.page-frame {
  border-radius: 16px;
  overflow: hidden;
  background: var(--background);
  min-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
}

/* Mailbox/settings: .mailbox handles its own rounding; page-frame is a passthrough */
body.mailbox-view .page-frame,
body.settings-view .page-frame {
  background: transparent;
  border-radius: 0;
  min-height: 0;
  overflow: visible;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(92, 122, 42,0.24);
  outline-offset: 3px;
}
.hidden { display: none !important; }

.site-header {
  height: 72px;
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); font-size: var(--fs-h3); font-weight: 800; text-decoration: none; }
.brand-mark { display: block; width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 8px 18px rgba(92, 122, 42,.18); }
.header-actions { align-items: center; display: flex; gap: 14px; }
.pill { font-size: var(--fs-body); color: var(--green); background: var(--green-light); padding: 8px 16px; border-radius: 999px; }
.header-signin {
  background: #0DCE04;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(13, 206, 4,.18);
  color: #000;
  font-size: var(--fs-body-large);
  font-weight: 800;
  min-height: 42px;
  padding: 0 22px;
  transition: filter .16s ease, transform .16s ease;
}
.header-signin:hover { filter: brightness(1.04); transform: translateY(-1px); }

.landing {
  height: calc(100vh - 72px);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 122, 42, 0.1), transparent 30%),
    linear-gradient(180deg, #f7fbf5 0%, #ffffff 100%);
  color: #1c2412;
}

.landing .eyebrow { color: #1D6617; }
.landing .hero h1 { color: #1c2412; }
.landing .privacy-cta p { color: #4a5e32; }
.landing .cta-link { background: transparent; border-color: #b0c078; color: #3d5018; }
.landing .cta-link:hover { background: #e8f0d0; border-color: #8aaa40; }

.hero {
  max-width: 1240px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 4vw, 48px) clamp(24px, 8vw, 112px) 0;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: var(--fs-small);
}

.hero h1 {
  max-width: 800px;
  margin: 0 auto clamp(20px, 3vw, 34px);
  font: italic 700 clamp(34px, 4.5vw, 56px) / 1.05 Georgia, serif;
  letter-spacing: 0;
}

.privacy-cta {
  display: grid;
  gap: clamp(34px, 4vw, 52px);
  justify-items: center;
  margin: 0 auto;
  max-width: 1120px;
}

.privacy-cta p {
  color: #596477;
  font-size: clamp(var(--fs-body-large), 1.6vw, var(--fs-h3));
  line-height: 1.5;
  margin: 0;
  max-width: 1080px;
}

.cta-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
}

.cta-primary {
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(92, 122, 42,0.22);
  font-size: var(--fs-body-large);
  min-height: 50px;
  padding: 0 38px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cta-primary:hover { background: #09b503; box-shadow: 0 22px 46px rgba(13, 206, 4,0.28); transform: translateY(-1px); }

.cta-link {
  align-items: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(92, 122, 42,.18);
  border-radius: 999px;
  color: var(--green-dark);
  display: inline-flex;
  font-size: var(--fs-body-large);
  font-weight: 800;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.cta-link:hover { background: #fff; border-color: rgba(92, 122, 42,.34); transform: translateY(-1px); }

.cta-link span {
  font-size: var(--fs-h1);
  line-height: 0.75;
  transform: translateY(-1px);
}

.signin-page {
  min-height: calc(100vh - 72px);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 88px) 72px;
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 122, 42,0.1), transparent 30%),
    linear-gradient(180deg, #f7fbf5 0%, #ffffff 100%);
}

.signin-shell {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 420px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.signin-copy .eyebrow {
  margin-bottom: 18px;
}

.signin-copy h2 {
  margin: 0 0 12px;
  font: italic 700 clamp(22px, 2.8vw, 34px) / 1.04 Georgia, serif;
  letter-spacing: 0;
  color: var(--text);
}

.signin-copy p:not(.eyebrow) {
  margin: 0 0 20px;
  max-width: 560px;
  color: #1D6617;
  font-size: var(--fs-body-large);
  line-height: 1.6;
}
.signin-copy .eyebrow { color: #1D6617; }
.auth-card #register-note { color: #1D6617; }

.signin-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 14px;
}

.signin-points li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-weight: 600;
}

.signin-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  box-shadow: 0 0 0 5px rgba(92, 122, 42,0.12);
}

.return-home {
  appearance: none;
  border: 1px solid rgba(92, 122, 42,0.18);
  background: rgba(255, 255, 255, 0.82);
  color: var(--green);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.return-home:hover {
  transform: translateY(-1px);
  border-color: rgba(92, 122, 42,0.3);
  background: #ffffff;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  justify-self: end;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(92, 122, 42,0.12);
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);
  padding: 28px;
  backdrop-filter: blur(16px);
}

.tabs { display: grid; grid-template-columns: 1fr 1fr; background: #f0f1ed; border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.tab { background: transparent; height: 36px; border-radius: 7px; color: var(--muted); }
.tab.active { background: white; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px #dfe2dd; }
label { color: #344153; display: grid; gap: 10px; font-size: var(--fs-body); font-weight: 600; margin-bottom: 22px; }
input, textarea {
  width: 100%;
  color: var(--ink);
  background: white;
  border: 1px solid #d4dad6;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18, 98, 74, .12); }
.primary { background: #0DCE04; color: #000; border-radius: 10px; min-height: 42px; padding: 0 18px; font-weight: 650; }
.primary:hover { background: #09b503; }
.auth-card .primary { margin-top: 8px; width: 100%; }
.secondary { border: 1px solid var(--line); color: var(--ink); background: transparent; padding: 11px 17px; border-radius: 10px; transition: background .16s ease, border-color .16s ease; }
.secondary:hover { background: #fff; border-color: #cbd3cd; }
.note, .status { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); min-height: 18px; }
.status.error { color: #a32929; }
.status.success { color: var(--green); }

body.mailbox-view .site-header, body.settings-view .site-header, body.create-account-view .site-header, body.invite-view .site-header { display: none; }
body.mailbox-view main, body.settings-view main, body.create-account-view main, body.invite-view main { min-height: 100vh; }

.create-account-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 122, 42, 0.1), transparent 30%),
    linear-gradient(180deg, #f7fbf5 0%, #ffffff 100%);
  color: var(--ink);
}

.create-account-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 clamp(20px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #e0ddd8;
  position: sticky;
  top: 0;
  z-index: 5;
}

.create-account-brand {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: var(--fs-h3);
  font-weight: 800;
  gap: 10px;
  text-decoration: none;
}

.create-account-signin {
  background: #0DCE04;
  border: none;
  border-radius: 999px;
  color: #000;
  font-size: var(--fs-body-large);
  font-weight: 800;
  min-height: 38px;
  padding: 0 18px;
}

.create-account-hero {
  display: grid;
  justify-items: center;
  padding: clamp(28px, 4vw, 60px) 24px clamp(20px, 3vw, 44px);
  text-align: center;
}

.create-account-hero h1 {
  color: #112018;
  font-family: Georgia, serif;
  font-size: clamp(var(--fs-h3), 2.8vw, var(--fs-h1));
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 0;
  max-width: 1040px;
}

.create-account-shell {
  align-items: start;
  display: grid;
  gap: clamp(42px, 7vw, 118px);
  grid-template-columns: minmax(360px, 760px) minmax(320px, 470px);
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 96px) clamp(58px, 8vw, 120px);
}

.create-account-form-panel h2 {
  color: #112018;
  font-family: Georgia, serif;
  font-size: clamp(var(--fs-body-large), 1.8vw, var(--fs-h3));
  font-style: italic;
  font-weight: 700;
  margin: 0 0 16px;
}

.checkout-plan-banner {
  text-align: center;
}

.checkout-plan-banner .checkout-plan-heading {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  margin: 0 0 6px;
}

.checkout-plan-name {
  color: #1D6617;
  font-size: var(--fs-h3);
  font-weight: 800;
  margin: 0;
}

.free-account-form {
  display: grid;
  gap: 18px;
}

.free-account-form label {
  color: #112018;
  font-size: var(--fs-body-large);
  font-weight: 800;
  margin: 0;
}

.username-field,
.password-field {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid rgba(92, 122, 42,0.32);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 44px;
  overflow: hidden;
}

.username-field:focus-within,
.password-field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(92, 122, 42,.12);
}

.username-field input,
.password-field input {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: 44px;
  padding: 0 12px;
}

.username-field span,
.password-field span {
  color: var(--green-dark);
  font-size: var(--fs-body-large);
  font-weight: 700;
  padding: 0 14px;
}

.create-account-primary {
  background: #0DCE04;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(13,206,4,0.22);
  color: #000;
  font-size: var(--fs-body-large);
  font-weight: 700;
  justify-self: center;
  margin-top: 8px;
  min-height: 42px;
  padding: 0 24px;
  transition: transform .16s ease, box-shadow .16s ease;
}

.create-account-primary:hover {
  background: #09b503;
  box-shadow: 0 22px 40px rgba(13,206,4,0.27);
  transform: translateY(-1px);
}

.create-account-login {
  color: #112018;
  font-size: var(--fs-body);
  margin: 14px 0 0;
  text-align: center;
}

.create-account-login button {
  background: transparent;
  color: #1D6617;
  font-weight: 800;
  text-decoration: underline;
}

.create-account-terms {
  color: #727e78;
  font-size: var(--fs-body-large);
  line-height: 1.5;
  margin: 18px auto 0;
  max-width: 650px;
  text-align: center;
}

.create-account-terms a {
  color: #56625c;
}

.privacy-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(92, 122, 42,0.22);
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(21, 29, 44, 0.08);
  padding: clamp(28px, 3vw, 42px);
}

.privacy-card h2 {
  color: #112018;
  font-family: Georgia, serif;
  font-size: var(--fs-h4);
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

.privacy-card ul {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.privacy-card li {
  align-items: start;
  color: #68756f;
  display: grid;
  font-size: var(--fs-body);
  gap: 10px;
  grid-template-columns: 20px 1fr;
  line-height: 1.35;
}

.privacy-card li span {
  color: var(--green);
  font-size: var(--fs-body-large);
  line-height: 1;
}
.privacy-card li svg {
  color: #073B05;
  flex-shrink: 0;
  height: 17px;
  margin-top: 1px;
  stroke: #073B05;
  width: 17px;
}

.privacy-card p {
  color: #112018;
  font-size: var(--fs-body-large);
  line-height: 1.35;
  margin: 20px 0 0;
}

.mailbox {
  --mail-accent: #073B05;
  --logo-green: #073B05;
  --mail-selected: #dce8b8;
  --mail-canvas: #f5f8f3;
  background: var(--mail-canvas);
  color: #2b2523;
  display: grid;
  grid-template-areas: "header header header" "sidebar list reader";
  grid-template-columns: 280px minmax(0, 1fr) 420px;
  grid-template-rows: 72px calc(100vh - 72px);
  height: 100vh;
  overflow: hidden;
}
.mail-header {
  align-items: center;
  background: var(--mail-canvas);
  display: grid;
  gap: 16px;
  grid-area: header;
  grid-template-columns: 260px minmax(180px, 400px) 1fr auto;
  min-height: 72px;
  padding: 0 24px;
}
.mail-brand { align-items: center; color: var(--logo-green); display: flex; font: italic 700 22px Georgia, serif; gap: 8px; text-decoration: none; }
.mail-brand-mark {
  display: block; height: 32px; width: 32px; border-radius: 8px;
}
.mail-search {
  align-items: center; background: #dce8c4; border-radius: 10px; color: #3e584c; display: flex;
  font-size: var(--fs-body-large); gap: 10px; height: 36px; margin: 0; padding: 0 12px;
}
.mail-search input { background: transparent; border: 0; box-shadow: none; color: #453d3a; font-size: var(--fs-body); padding: 0; }
.sync-state { border-right: 2px solid #d8ceca; display: grid; font-size: var(--fs-small); gap: 2px; justify-self: end; padding-right: 18px; }
.app-nav { align-items: center; display: flex; gap: 8px; font-size: var(--fs-body); white-space: nowrap; }
.app-nav span { border-radius: 10px; padding: 10px 13px; }
.app-nav .current { background: #e8eeea; color: var(--mail-accent); }
.sidebar {
  background: #f9faf7; display: flex; flex-direction: column; gap: 16px; grid-area: sidebar; overflow-y: auto; padding: 10px 14px 14px 18px;
}
.compose-main {
  background: #dce8c4; border-radius: 12px; color: #3e584c; font-size: var(--fs-body); font-weight: 700; height: 42px; width: 100%;
}
.sidebar h2 { font-size: var(--fs-caption); margin: 2px 8px 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.folder-nav { display: grid; gap: 2px; }
.nav-item {
  align-items: center; background: transparent; border-radius: 7px; color: #342d2b; display: flex; font-size: var(--fs-body);
  gap: 12px; padding: 9px 10px; text-align: left; width: 100%;
}
.nav-item svg, .sidebar-link svg {
  color: #625956; fill: none; flex: 0 0 auto; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px;
}
.nav-item.active { background: var(--mail-selected); color: var(--mail-accent); }
.nav-item.active svg { color: var(--mail-accent); }
.nav-badge {
  background: var(--logo-green); border-radius: 999px; color: white;
  font-size: var(--fs-caption); font-weight: 700; line-height: 1;
  margin-left: auto; min-width: 20px; padding: 3px 6px; text-align: center;
}
.nav-badge.hidden { display: none; }
.sidebar-section { border-top: 1px solid #e6ddda; display: grid; gap: 6px; padding: 12px 6px 0; }
.sidebar-section strong { color: #39302e; font-size: var(--fs-caption); }
.sidebar-link { align-items: center; background: transparent; color: #443c39; display: flex; font-size: var(--fs-small); gap: 12px; padding: 5px 0; text-align: left; }
.folders-panel {
  display: grid;
  gap: 12px;
  padding: 6px 10px 0;
}
.folders-header { align-items: center; display: grid; gap: 10px; grid-template-columns: 1fr 34px 34px; }
.folders-toggle {
  align-items: center;
  background: transparent;
  border-radius: 7px;
  color: #342d2b;
  display: flex;
  font-size: var(--fs-body);
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  text-align: left;
}
.folders-toggle:hover { background: var(--mail-selected); color: var(--mail-accent); }
.folder-chevron { color: #625956; font-size: var(--fs-h4); transition: transform .16s ease; }
.folders-toggle:hover .folder-chevron { color: var(--mail-accent); }
.folders-panel.collapsed .folder-chevron,
.labels-panel.collapsed .folder-chevron { transform: rotate(-90deg); }
.folder-action {
  align-items: center;
  background: transparent;
  border-radius: 8px;
  color: #625956;
  display: grid;
  font-size: var(--fs-h1);
  height: 38px;
  justify-items: center;
  line-height: 1;
  padding: 0;
  width: 38px;
}
.folder-action:hover { background: var(--mail-selected); color: var(--mail-accent); }
.folder-action svg {
  color: currentColor;
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 26px;
}
.custom-folders-list { color: #443c39; display: grid; gap: 7px; padding-left: 18px; }
.folders-panel.collapsed .custom-folders-list,
.labels-panel.collapsed .custom-folders-list { display: none; }
.no-folders { color: #716764; font-size: var(--fs-small); padding: 0 0 0 2px; }
.custom-folder-row {
  align-items: center; display: flex; gap: 2px;
}
.folder-row-chevron {
  align-items: center; background: transparent; border-radius: 5px; color: #a08880;
  cursor: pointer; display: flex; flex-shrink: 0; height: 22px; justify-content: center;
  padding: 0 3px; transition: color .12s, background .12s; width: 18px;
}
.folder-row-chevron:hover { background: var(--mail-selected); color: var(--mail-accent); }
.folder-dots-wrap { flex-shrink: 0; position: relative; }
.folder-dots-btn {
  align-items: center; background: transparent; border-radius: 6px; color: #a08880;
  cursor: pointer; display: flex; height: 28px; justify-content: center; opacity: 0;
  padding: 0 6px; transition: opacity .12s, background .12s, color .12s;
}
.custom-folder-row:hover .folder-dots-btn { opacity: 1; }
.folder-dots-btn:hover { background: var(--mail-selected); color: var(--mail-accent); }
.folder-add-row {
  align-items: center; display: flex; gap: 4px; padding: 2px 0;
}
.folder-add-input {
  background: white; border: 1px solid var(--mail-accent); border-radius: 7px;
  color: #2a2320; flex: 1; font-size: var(--fs-body-large); min-width: 0; outline: none; padding: 5px 8px;
}
.folder-add-confirm, .folder-add-cancel {
  background: transparent; border-radius: 6px; cursor: pointer; flex-shrink: 0;
  font-size: var(--fs-body-large); height: 28px; padding: 0 6px;
}
.folder-add-confirm { color: var(--mail-accent); }
.folder-add-confirm:hover { background: var(--mail-selected); }
.folder-add-cancel { color: #888; }
.folder-add-cancel:hover { background: #f0e8e6; }
.folder-add-status { color: #c0392b; font-size: var(--fs-small); }
.custom-folder-button {
  align-items: center;
  background: transparent;
  border-radius: 9px;
  color: #443c39;
  display: flex;
  flex: 1;
  font-size: var(--fs-small);
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 9px 8px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-icon { color: var(--mail-accent); flex-shrink: 0; }
.custom-folder-button.active { background: var(--mail-selected); color: var(--mail-accent); }
.custom-folder-button.active .folder-icon { color: var(--mail-accent); }
.sidebar .secondary { margin-top: auto; }
.list-pane {
  background: #f1f4f1; display: flex; flex-direction: column; gap: 8px; grid-area: list; min-width: 0; padding: 10px 14px 14px 8px;
}
.list-toolbar {
  align-items: center; background: white; border-radius: 10px; display: flex; gap: 8px; height: 44px; justify-content: space-between; padding: 0 14px;
}
.list-toolbar h1 { color: #443b38; flex: 1; font-size: var(--fs-body); font-weight: 650; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-all-checkbox { accent-color: var(--mail-accent); cursor: pointer; flex-shrink: 0; height: 16px; width: 16px; }
.tool-button { background: transparent; color: #514743; flex-shrink: 0; font-size: var(--fs-h2); padding: 7px; user-select: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.tool-button.refreshing { animation: spin .7s linear infinite; pointer-events: none; }
.bulk-bar {
  align-items: center; background: var(--mail-selected); border: 1px solid var(--mail-accent); border-radius: 12px;
  display: flex; gap: 8px; padding: 8px 14px;
}
.bulk-bar.hidden { display: none; }
#bulk-count { color: var(--mail-accent); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.bulk-action-btn {
  background: white; border: 1px solid #d4cac6; border-radius: 7px; color: #3a3330; cursor: pointer; font-size: var(--fs-small); padding: 5px 12px;
}
.bulk-action-btn:hover { border-color: var(--mail-accent); color: var(--mail-accent); }
.bulk-action-btn.bulk-danger:hover { border-color: #c0392b; color: #c0392b; }
.bulk-move-select {
  appearance: none; background: white; border: 1px solid #d4cac6; border-radius: 7px; color: #3a3330;
  cursor: pointer; font-size: var(--fs-small); height: 31px; padding: 0 10px;
}
.bulk-clear-btn { background: transparent; color: #888; cursor: pointer; font-size: var(--fs-body-large); margin-left: auto; padding: 4px 6px; }
.bulk-clear-btn:hover { color: #333; }
/* Empty folder button */
.empty-folder-btn { background: transparent; border: 1px solid #d4cac6; border-radius: 7px; color: #c0392b; cursor: pointer; font-size: var(--fs-small); padding: 3px 10px; transition: background .12s, border-color .12s; white-space: nowrap; }
.empty-folder-btn:hover { background: #fdecea; border-color: #c0392b; }

.messages { display: grid; gap: 2px; overflow-y: auto; }
.empty { align-items: center; background: white; border-radius: 12px; color: var(--muted); display: flex; flex-direction: column; font-size: var(--fs-body); gap: 6px; line-height: 1.55; padding: 48px 24px; text-align: center; }
.empty-icon { color: #c8d6cc; height: 52px; margin-bottom: 6px; width: 52px; }
.empty-title { color: #342d2b; font-size: var(--fs-body-large); font-weight: 650; margin: 0; }
.empty p { margin: 0; max-width: 280px; }

/* Message list row */
.message {
  align-items: center; background: white; border-radius: 8px; display: grid; gap: 6px;
  grid-template-columns: 16px 34px minmax(0, 1fr);
  min-height: 52px; padding: 6px 12px 6px 8px; transition: background .1s; width: 100%;
}
.message:hover { background: #f7faf7; }
.message-checkbox {
  accent-color: var(--mail-accent); cursor: pointer; height: 15px; opacity: 0; transition: opacity .12s; width: 15px;
}
.message:hover .message-checkbox, .message-checkbox:checked { opacity: 1; }

/* Sender avatar */
.msg-avatar {
  align-items: center; border-radius: 50%; color: white; display: flex; flex-shrink: 0;
  font-size: var(--fs-caption); font-weight: 700; height: 30px; justify-content: center;
  letter-spacing: -.02em; width: 30px;
}

.message-open {
  align-items: center; background: transparent; color: inherit; display: grid; gap: 10px;
  grid-template-columns: minmax(120px, 22%) minmax(0, 1fr) auto;
  padding: 5px 0 4px; text-align: left; width: 100%;
}
.message.selected { background: var(--mail-selected); }
.message.selected:hover { background: var(--mail-selected); }
.message.unread .address, .message.unread .subject { font-weight: 800; }
.message.unread { box-shadow: inset 3px 0 0 var(--logo-green); }
.message .address { font-size: var(--fs-small); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message .preview { min-width: 0; }
.message .subject { display: block; font-size: var(--fs-small); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message .body, .message .verify, .message .draft-label { display: none; }
.verify { color: var(--green); display: block; font-size: var(--fs-caption); margin-top: 4px; }
.draft-label { color: var(--mail-accent); display: block; font-size: var(--fs-caption); margin-top: 4px; }

/* Message meta: lock + clip + time + star */
.msg-meta { align-items: center; display: flex; flex-direction: column; flex-shrink: 0; gap: 4px; }
.msg-lock, .msg-attachment { color: #9bb0a4; display: flex; }
.msg-star { background: transparent; color: #c8bdb8; font-size: var(--fs-body); line-height: 1; padding: 2px; }
.msg-star.active { color: #e0a52e; }
.message time { color: #6e6460; font-size: var(--fs-caption); white-space: nowrap; }

/* Secure-mailbox rows have no checkbox column (avatar + content only), so
   override the 3-column .message grid to a 2-column layout. */
#secure-mailbox-list .message { grid-template-columns: 34px minmax(0, 1fr); }

.reading-pane { display: flex; flex-direction: column; grid-area: reader; overflow: hidden; }
.reader-empty {
  align-content: center; color: #8a9e94; display: grid; gap: 8px;
  height: 100%; justify-items: center; padding: 40px 24px; text-align: center;
}
.reader-empty-icon { color: #c8d8cc; }
.reader-empty-icon svg { height: 64px; width: 64px; }
.reader-empty h2 { color: #342d2b; font-size: var(--fs-h4); font-weight: 650; margin: 0; }
.reader-empty p { font-size: var(--fs-body); margin: 0; max-width: 240px; }
.reader-message { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Reader toolbar */
.reader-tools {
  align-items: center; background: white; border-bottom: 1px solid #eee5e1;
  display: flex; flex-shrink: 0; gap: 0; justify-content: space-between; min-height: 46px; padding: 0 12px;
}
.reader-tools-left, .reader-tools-right { align-items: center; display: flex; gap: 2px; }
.reader-action-btn {
  align-items: center; background: transparent; border-radius: 7px; color: #4a4340;
  cursor: pointer; display: flex; font-size: var(--fs-small); font-weight: 500; gap: 5px;
  min-height: 32px; padding: 0 8px; transition: background .12s, color .12s;
  white-space: nowrap;
}
.reader-action-btn svg { flex-shrink: 0; stroke: currentColor; }
.reader-action-btn:hover { background: #f2f4f2; color: var(--mail-accent); }
.reader-action-danger:hover { color: #c0392b !important; background: #fdf0ee !important; }
.reader-action-btn.active { color: var(--mail-accent); }
.reader-move-select {
  appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 6px center;
  border: 1px solid #d4cac6; border-radius: 7px; color: #4a3e3a; cursor: pointer; font-size: var(--fs-small);
  height: 30px; padding: 0 22px 0 8px; white-space: nowrap;
}
.reader-move-select:hover { background-color: #f2f4f2; border-color: var(--mail-accent); }
.load-more-btn {
  background: transparent; border: 1px solid #d4cac6; border-radius: 10px; color: #4a3e3a;
  cursor: pointer; display: block; font-size: var(--fs-small); margin: 12px auto; padding: 8px 20px;
  transition: background .15s;
}
.load-more-btn:hover { background: var(--mail-selected); border-color: var(--mail-accent); }
.reader-scroll { display: flex; flex: 1; flex-direction: column; overflow-y: auto; }
.reader-content { flex: 1; margin: 20px auto 0; max-width: 660px; padding: 0 28px 32px; width: 100%; }
.reader-content h2 { color: #2a2320; font-size: clamp(var(--fs-body-large), 1.8vw, var(--fs-h3)); font-weight: 600; line-height: 1.2; margin: 0 0 14px; }

/* Reader sender row */
.reader-meta { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.reader-sender { align-items: center; display: flex; gap: 10px; min-width: 0; }
.reader-meta strong { color: #2d2724; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-meta time { color: #716865; flex-shrink: 0; font-size: var(--fs-small); }

#reader-body { color: #302925; font-size: var(--fs-body-large); line-height: 1.7; margin-top: 18px; white-space: pre-wrap; }

/* Quick reply */
.reader-attachments-list { border-top: 1px solid #e8e0dc; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 32px 0 0; padding: 24px 0 0; }
.reader-attachment-btn {
  align-items: center; background: #f5f3f1; border: 1px solid #e0d9d5; border-radius: 10px;
  color: #3a3330; display: flex; font-size: var(--fs-body); gap: 8px; padding: 10px 14px; text-align: left;
  transition: background .15s;
}
.reader-attachment-btn:hover { background: var(--mail-selected); border-color: var(--mail-accent); }
.reader-attachment-btn:disabled { opacity: .6; }
.attachment-name { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { color: #716764; font-size: var(--fs-small); }
.compose-attach-row { margin-top: 8px; }
.compose-attach-label {
  align-items: center; background: transparent; border: 1px dashed #c8c0bd; border-radius: 8px;
  color: #625956; cursor: pointer; display: inline-flex; font-size: var(--fs-body); font-weight: 500;
  gap: 6px; padding: 7px 14px; transition: border-color .15s, background .15s;
}
.compose-attach-label:hover { background: var(--mail-selected); border-color: var(--mail-accent); color: var(--mail-accent); }
#attach-input { display: none; }
.compose-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.compose-attachments.hidden { display: none; }
.compose-attachment-item {
  align-items: center; background: #f5f3f1; border: 1px solid #e0d9d5; border-radius: 8px;
  display: flex; font-size: var(--fs-body); gap: 8px; justify-content: space-between; padding: 7px 12px;
}
.compose-attachment-remove {
  background: transparent; border-radius: 50%; color: #9e8f8b; font-size: var(--fs-h4);
  height: 24px; line-height: 1; padding: 0; width: 24px;
}
.compose-attachment-remove:hover { background: #e8deda; color: #5a2020; }

/* ── Compose window ─────────────────────────────── */
.compose {
  position: fixed; z-index: 100; right: clamp(16px, 3vw, 40px); bottom: 0;
  width: min(640px, calc(100vw - 32px));
  height: calc(100vh - 88px); max-height: 920px;
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 40px rgba(15,143,87,.13), 0 0 0 1px rgba(0,0,0,.08);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Visual order: header → fields → body → attachments → link result → toolbar → bottom bar */
.compose-header { order: 0; }
.compose-fields { order: 1; }
.compose-body { order: 2; }
.compose-attachments { order: 3; }
.secure-link-result { order: 4; }
.compose-toolbar { order: 5; }
.compose-bottom-bar { order: 6; }
.compose.compose-minimized {
  height: auto; max-height: none;
}
.compose.compose-minimized .compose-fields,
.compose.compose-minimized .compose-toolbar,
.compose.compose-minimized .compose-body,
.compose.compose-minimized .compose-attachments,
.compose.compose-minimized #secure-link-result,
.compose.compose-minimized .compose-bottom-bar { display: none !important; }
.compose.compose-expanded { width: min(900px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none; }
.compose-header {
  background: #073B05; color: #fff; border-radius: 16px 16px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; flex-shrink: 0;
}
.compose-title { font-size: var(--fs-body); font-weight: 600; }
.compose-win-btns { display: flex; gap: 2px; }
.compose-win-btn {
  background: rgba(255,255,255,.12); border: 0; border-radius: 6px; color: #fff;
  cursor: pointer; font-size: var(--fs-small); height: 26px; width: 26px;
  display: flex; align-items: center; justify-content: center; transition: background .14s;
}
.compose-win-btn:hover { background: rgba(255,255,255,.24); }
.compose-fields { flex-shrink: 0; border-bottom: 1px solid #e8ede9; }
.compose-field-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; min-height: 38px; }
.compose-field-border { border-top: 1px solid #f0f3f1; }
.compose-field-lbl { color: #8a9790; font-size: var(--fs-small); font-weight: 600; min-width: 38px; flex-shrink: 0; }
.compose-field-input { background: none; border: 0; color: #1a2320; flex: 1; font-size: var(--fs-body); outline: none; padding: 0; min-width: 0; }
.compose-from-addr { background: none; border: none; color: #1a2320; font-size: var(--fs-body); flex: 1; outline: none; cursor: pointer; padding: 0; }
.compose-subject-input { font-size: var(--fs-body); font-weight: 500; }
.compose-cc-btns { display: flex; gap: 4px; flex-shrink: 0; }
.compose-cc-toggle { background: none; border: 1px solid #d8e0dc; border-radius: 5px; color: #5a7068; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 2px 8px; transition: background .13s; }
.compose-cc-toggle:hover, .compose-cc-toggle.active { background: #e8f2ec; border-color: #1D6617; color: #073B05; }
.compose-toolbar {
  align-items: center; background: #f8faf9; border-top: 1px solid #e8ede9;
  display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 1px; padding: 5px 10px;
}
.compose-font-select, .compose-size-select {
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: #2a3a32; cursor: pointer; font-size: var(--fs-small); outline: none; padding: 3px 4px;
}
.compose-font-select { min-width: 90px; }
.compose-size-select { min-width: 54px; }
.compose-font-select:hover, .compose-size-select:hover { background: #edf2ef; border-color: #d0ddd6; }
.compose-tb-sep { background: #d8e4de; border-radius: 2px; height: 18px; margin: 0 3px; width: 1px; flex-shrink: 0; }
.compose-tb-btn {
  align-items: center; background: none; border: 1px solid transparent; border-radius: 6px;
  color: #3a4e44; cursor: pointer; display: flex; font-size: var(--fs-small);
  height: 28px; justify-content: center; min-width: 28px; padding: 0 4px; transition: background .12s;
}
.compose-tb-btn:hover { background: #e4ede8; border-color: #c8d8d0; }
.compose-tb-btn.active { background: #d4eadd; border-color: #1D6617; color: #073B05; }
.compose-tb-bold b { font-size: var(--fs-body); font-weight: 700; }
.compose-tb-italic i { font-size: var(--fs-body); font-style: italic; }
.compose-tb-under u { font-size: var(--fs-body); }
.compose-tb-strike s { font-size: var(--fs-body); text-decoration: line-through; }
.compose-body {
  color: #1a2320; flex: 1; font-family: Arial, sans-serif; font-size: var(--fs-body);
  line-height: 1.6; min-height: 160px; outline: none; overflow-y: auto; padding: 12px 16px;
}
.compose-body:empty::before { content: attr(data-placeholder); color: #aab8b2; pointer-events: none; display: block; }
.compose-body blockquote { border-left: 3px solid #1D6617; color: #4a5e55; margin: 4px 0 4px 8px; padding: 2px 10px; }
.compose-bottom-bar {
  align-items: center; background: #f8faf9; border-top: 1px solid #e8ede9;
  display: flex; flex-shrink: 0; gap: 8px; justify-content: space-between; padding: 10px 14px;
}
.compose-bottom-left { align-items: center; display: flex; gap: 10px; flex: 0 0 auto; }
.compose-bottom-right { align-items: center; display: flex; gap: 8px; }
/* Bigger, evenly-spaced action buttons (encrypt, delete, attach, color, more) */
.compose-action-btn {
  align-items: center; background: none; border: 1px solid transparent; border-radius: 9px;
  color: #4a5e55; cursor: pointer; display: flex; height: 40px; width: 40px; margin: 0;
  justify-content: center; padding: 0; position: relative; transition: background .12s, color .12s;
}
.compose-action-btn:hover { background: #e4ede8; border-color: #c8d8d0; color: #073B05; }
.compose-action-btn.active { background: #d4eadd; border-color: #1D6617; color: #073B05; }
.compose-action-btn input { display: none; }
.compose-action-btn .compose-color-btn { background: none; border: 0; cursor: pointer; color: inherit; display: flex; padding: 0; }
.compose-bottom-btn {
  align-items: center; background: none; border: 1px solid transparent; border-radius: 6px;
  color: #4a5e55; cursor: pointer; display: flex; height: 30px; justify-content: center; padding: 0 6px; transition: background .12s;
}
.compose-bottom-btn:hover { background: #e4ede8; border-color: #c8d8d0; }
.compose-attach-btn input { display: none; }
.compose-color-wrap { position: relative; }
#compose-text-color-input { bottom: 0; cursor: pointer; height: 100%; left: 0; opacity: 0; position: absolute; width: 100%; }
.compose-draft-btn { background: none; border: 1px solid #c8d8d0; border-radius: 8px; color: #2a3a32; cursor: pointer; font-size: var(--fs-small); font-weight: 500; padding: 5px 14px; transition: background .12s; }
.compose-draft-btn:hover { background: #e4ede8; }
.compose-send-btn { background: #073B05; border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-size: var(--fs-body); font-weight: 600; padding: 7px 22px; transition: background .14s; }
.compose-send-btn:hover { background: #165412; }
.compose-bottom-right .status { font-size: var(--fs-small); max-width: 180px; }
.compose-popup {
  background: #fff; border: 1px solid #dce6e0; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 6px; position: absolute; z-index: 200;
}
/* "More options" menu (three-dots) */
.compose-more-menu {
  bottom: 64px; left: 14px; min-width: 230px; padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.compose-more-opt {
  align-items: center; background: none; border: 0; border-radius: 7px; color: #1f2c26;
  cursor: pointer; display: flex; font-size: var(--fs-body); gap: 10px; padding: 9px 12px; text-align: left;
  transition: background .12s; width: 100%;
}
.compose-more-opt:hover { background: #eef4f0; }
.compose-more-opt span { flex: 1; }
.compose-more-lead { color: #4a5e55; flex-shrink: 0; }
.compose-more-check { color: #073B05; flex-shrink: 0; opacity: 0; }
.compose-more-opt.active .compose-more-check { opacity: 1; }
.compose-more-sep { background: #eef1ef; height: 1px; margin: 4px 2px; }

/* Shared compose dialogs (encrypt / delete-draft) */
.io-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(16,23,19,.45); padding: 24px;
}
.io-modal-card {
  background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(13,34,24,.32);
  width: min(420px, 100%); padding: 26px 28px 24px; box-sizing: border-box; position: relative;
}
.io-modal-close-btn { position: absolute; top: 14px; right: 14px; background: none; border: none; color: #073B05; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; }
.io-modal-close-btn:hover { background: rgba(7,59,5,.1); color: #073B05; }
.io-modal-title { color: #0d1f17; font-size: clamp(var(--fs-h4), 4vw, var(--fs-h3)); font-weight: 700; margin: 0 0 12px; }
.io-modal-desc { color: #46554d; font-size: var(--fs-body-large); line-height: 1.5; margin: 0 0 10px; }
.io-modal-desc strong { color: #0d1f17; }
.io-modal-meta { color: #46554d; font-size: var(--fs-body-large); line-height: 1.5; margin: 0 0 18px; }
.io-modal-meta a { color: #073B05; text-decoration: underline; cursor: pointer; }
.io-field-label { align-items: center; color: #0d1f17; display: flex; font-size: var(--fs-body-large); font-weight: 700; gap: 6px; margin: 6px 0 7px; }
.io-field-info { color: #073B05; display: inline-flex; }
.io-field-optional { color: #8a9790; font-size: var(--fs-small); font-weight: 500; margin-left: auto; }
.io-input-row { display: flex; gap: 8px; align-items: stretch; }
.io-input-wrap {
  align-items: center; background: #fff; border: 1.5px solid #d7e0db; border-radius: 9px;
  display: flex; flex: 1; gap: 6px; padding: 0 10px; transition: border-color .14s, box-shadow .14s;
}
.io-input-wrap:focus-within { border-color: #1D6617; box-shadow: 0 0 0 3px rgba(29,102,23,.18); }
.io-input-wrap input { background: none; border: 0; color: #0d1f17; flex: 1; font-size: var(--fs-body-large); outline: none; padding: 11px 0; min-width: 0; }
.io-input-icon-btn { background: none; border: 0; color: #6a7a72; cursor: pointer; display: flex; padding: 4px; }
.io-input-icon-btn:hover { color: #0d1f17; }
.io-input-aux-btn {
  align-items: center; background: #fff; border: 1.5px solid #d7e0db; border-radius: 9px; color: #4a5e55;
  cursor: pointer; display: flex; justify-content: center; width: 46px; transition: background .12s, border-color .12s;
}
.io-input-aux-btn:hover { background: #eef4f0; border-color: #1D6617; color: #0d1f17; }
.io-modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.io-btn {
  border: 0; border-radius: 10px; cursor: pointer; font-size: var(--fs-body-large); font-weight: 600;
  min-height: 50px; padding: 0 18px; transition: filter .14s, background .14s;
}
.io-btn-primary { background: #1D6617; color: #fff; }
.io-btn-primary:hover { background: #165412; }
.io-btn-danger { background: #cf3f57; color: #fff; }
.io-btn-danger:hover { background: #b8344a; }
.io-btn-secondary { background: #fff; border: 1.5px solid #d7e0db; color: #1f2c26; }
.io-btn-secondary:hover { background: #f1f5f3; }
.io-modal-callout { border-left: 4px solid #cf3f57; padding: 2px 0 2px 16px; margin: 4px 0 0; }
.io-modal-callout p { color: #1f2c26; font-size: var(--fs-body-large); line-height: 1.45; margin: 0; }
.compose-align-opt { align-items: center; background: none; border: 1px solid transparent; border-radius: 6px; color: #2a3a32; cursor: pointer; display: inline-flex; height: 30px; justify-content: center; padding: 0 8px; transition: background .12s; }
.compose-align-opt:hover { background: #e4ede8; }
.compose-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-width: 244px; padding: 8px; }
.compose-emoji-btn-item { background: none; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: var(--fs-h4); height: 32px; line-height: 1; padding: 0; transition: background .1s; }
.compose-emoji-btn-item:hover { background: #e4ede8; }
.icon { color: var(--muted); background: none; font-size: var(--fs-body-large); }
.secure-link-result {
  background: #f1fbf5;
  border: 1px solid #caead8;
  border-radius: 12px;
  color: var(--green-dark);
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px;
}
.secure-link-result a {
  color: var(--green-dark);
  overflow-wrap: anywhere;
}
.secure-link-result button {
  background: var(--green);
  border-radius: 999px;
  color: white;
  font-weight: 800;
  justify-self: start;
  min-height: 36px;
  padding: 0 16px;
}
.compose-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.compose-actions .status { flex: 1; margin: 0; }

.secure-link-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(92, 122, 42,0.10), transparent 36%),
    linear-gradient(180deg, #f4efe3 0%, #eef5f0 100%);
}

.secure-link-shell {
  display: grid;
  min-height: calc(100vh - 86px);
  padding: clamp(32px, 6vw, 80px) 24px;
  place-items: center;
}

.secure-link-card {
  background: #ffffff;
  border: 1px solid #dfe7e1;
  border-radius: 24px;
  box-shadow: var(--shadow);
  max-width: 720px;
  padding: clamp(30px, 5vw, 58px);
  width: 100%;
}

.secure-link-card h1 {
  color: #112018;
  font-size: clamp(var(--fs-h3), 3vw, var(--fs-h1));
  line-height: 1.1;
  margin: 0 0 12px;
}

.secure-link-meta {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 28px;
}

.secure-link-card form {
  display: grid;
  gap: 18px;
}

.secure-link-card .primary {
  justify-self: start;
}

.secure-link-message {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 26px;
}

.secure-link-message h2 {
  color: #112018;
  font-size: clamp(var(--fs-h4), 2vw, var(--fs-h2));
  margin: 0 0 10px;
}

.secure-link-message p {
  color: #302925;
  font-size: var(--fs-body);
  line-height: 1.7;
  white-space: pre-wrap;
}

.settings-page {
  --settings-dark: #073B05;
  --settings-mid: #3d5018;
  --settings-glow: #8db848;
  background: white;
  color: #11131b;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}
.settings-sidebar {
  background: var(--settings-dark);
  color: #f4fff8;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 14px 12px 10px;
}
.settings-brand {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 32px 1fr 26px;
  margin-bottom: 18px;
}
.settings-brand-mark {
  display: block;
  height: 28px;
  width: 28px;
  border-radius: 7px;
}
.settings-brand strong { font-size: var(--fs-body-large); }
.settings-grid {
  background:
    radial-gradient(circle, #b9e8cb 3px, transparent 4px) 0 0 / 15px 15px;
  height: 34px;
  opacity: .8;
}
.settings-back {
  background: #3d5018;
  border-radius: 8px;
  color: white;
  font-size: var(--fs-body);
  height: 34px;
  margin-bottom: 12px;
  text-align: center;
  width: 100%;
}
.settings-nav {
  display: grid;
  gap: 2px;
  overflow-y: auto;
  padding-right: 4px;
}
.settings-nav p {
  color: #9ab868;
  font-size: var(--fs-caption);
  margin: 12px 10px 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.settings-nav button {
  align-items: center;
  background: transparent;
  border-radius: 7px;
  color: #f2fff8;
  display: flex;
  font-size: var(--fs-body);
  gap: 10px;
  padding: 8px 12px;
  text-align: left;
}
.settings-nav button.active, .settings-nav button:hover { background: rgba(255, 255, 255, .1); }
.settings-nav button svg {
  color: #bfe9cc;
  fill: none;
  flex: 0 0 auto;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  width: 18px;
}
.settings-nav .settings-icon-row { font-size: var(--fs-body); padding: 10px 12px; }
.settings-nav .settings-icon-row.active { background: #28503e; font-weight: 700; }
.settings-storage {
  color: #b9d8c4;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  margin-top: auto;
  padding: 18px 2px 0;
}
.settings-storage span {
  background: linear-gradient(90deg, #1D6617 0 74%, #3f6a55 74%);
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 5px;
}
.settings-storage small:first-of-type { color: #b8d870; font-weight: 700; }
.settings-main { background: #fff; min-width: 0; }
.settings-topbar {
  align-items: center;
  border-bottom: 1px solid #e5e6e3;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(200px, 500px) 130px max-content 36px;
  height: 58px;
  padding: 0 14px 0 10px;
}
.settings-search {
  align-items: center;
  background: #f1f4f1;
  border-radius: 8px;
  color: #4f5b54;
  display: flex;
  font-size: var(--fs-body-large);
  gap: 10px;
  height: 36px;
  margin: 0;
  padding: 0 12px;
}
.settings-search input { background: transparent; border: 0; box-shadow: none; font-size: var(--fs-body); padding: 0; }
.upgrade-button {
  background: white;
  border: 1.5px solid #1D6617;
  border-radius: 8px;
  color: #183226;
  font-size: var(--fs-body);
  height: 36px;
}
.settings-search-result {
  background: none;
  border: 1px solid #e0e8e4;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}
.settings-search-result:hover { background: #f1f4f1; }
.settings-search-result strong { font-size: var(--fs-body); }
.settings-search-result span { color: #666; font-size: var(--fs-small); }
.settings-account { display: grid; font-size: var(--fs-small); text-align: right; }
.settings-account span { color: #666; }
.settings-avatar {
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  display: grid;
  font-size: var(--fs-body-large);
  height: 32px;
  place-items: center;
  width: 32px;
}
.settings-content {
  margin-left: clamp(24px, 3vw, 48px);
  max-width: 640px;
  padding-top: 32px;
}
.settings-content h1 {
  font-size: clamp(var(--fs-h4), 1.8vw, var(--fs-h3));
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 12px;
}
.settings-lede {
  color: #5d5f65;
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0 0 14px;
}
.settings-lede a { color: #073B05; }
.settings-block { margin-top: 16px; }
/* Custom filters block */
.cf-filter-list { margin-bottom: 16px; }
.cf-empty { color: #9ab5a6; font-size: var(--fs-body); margin: 4px 0 8px; }
.cf-filter-row { align-items: center; border-bottom: 1px solid #eaf0ec; display: flex; gap: 12px; justify-content: space-between; padding: 12px 0; }
.cf-filter-row:last-child { border-bottom: none; }
.cf-filter-info { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }
.cf-filter-name { color: #1a2e22; font-size: var(--fs-body-large); font-weight: 600; }
.cf-filter-detail { color: #7a867f; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
/* Spam/Block/Allow list block */
.sbl-desc-list { color: #3b403d; font-size: var(--fs-body); line-height: 1.7; margin: 4px 0 18px 18px; padding: 0; }
.sbl-add-wrap { position: relative; margin-bottom: 18px; display: inline-block; }
.sbl-add-menu { background: #fff; border: 1px solid #dce8e2; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.1); display: flex; flex-direction: column; left: 0; min-width: 180px; overflow: hidden; position: absolute; top: calc(100% + 6px); z-index: 30; }
.sbl-add-menu.hidden { display: none; }
.sbl-add-menu-item { background: none; border: none; color: #1a2e22; cursor: pointer; font-size: var(--fs-body); padding: 10px 16px; text-align: left; }
.sbl-add-menu-item:hover { background: #f0f7f3; }
.sbl-search-wrap { align-items: center; background: #fff; border: 1px solid #d4dad6; border-radius: 10px; display: flex; gap: 10px; margin-bottom: 16px; padding: 10px 14px; }
.sbl-search { background: none; border: none; color: #1a2e22; flex: 1; font-size: var(--fs-body-large); outline: none; }
.sbl-search::placeholder { color: #9ab5a6; }
.sbl-tabs { border-bottom: 2px solid #eaf0ec; display: flex; gap: 0; margin-bottom: 0; }
.sbl-tab { background: none; border: none; border-bottom: 2px solid transparent; color: #7a867f; cursor: pointer; font-size: var(--fs-body); font-weight: 500; margin-bottom: -2px; padding: 8px 16px 10px; transition: color .15s, border-color .15s; }
.sbl-tab.active { border-bottom-color: #073B05; color: #073B05; font-weight: 600; }
.sbl-tab:hover:not(.active) { color: #1a2e22; }
.sbl-table-wrap { margin-top: 0; }
.sbl-table-header { align-items: center; border-bottom: 1px solid #eaf0ec; color: #9ab5a6; display: grid; font-size: var(--fs-small); font-weight: 600; grid-template-columns: 1fr 120px 60px; padding: 10px 4px; }
.sbl-table-row { align-items: center; border-bottom: 1px solid #eaf0ec; display: grid; grid-template-columns: 1fr 120px 60px; padding: 14px 4px; position: relative; }
.sbl-table-row:last-child { border-bottom: none; }
.sbl-col-email { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbl-email-text { color: #1a2e22; }
.sbl-col-list { }
.sbl-col-edit { display: flex; justify-content: flex-end; position: relative; }
.sbl-badge { border-radius: 6px; font-size: var(--fs-small); font-weight: 700; padding: 3px 10px; }
.sbl-badge-spam { background: #fff3e0; color: #c05800; }
.sbl-badge-block { background: #fdecea; color: #c0392b; }
.sbl-badge-allow { background: #d8f3e6; color: #0c7a47; }
.sbl-empty { color: #9ab5a6; font-size: var(--fs-body); padding: 24px 4px; text-align: center; }
.sbl-dots-btn { align-items: center; background: none; border: 1px solid #d4dad6; border-radius: 7px; color: #7a867f; cursor: pointer; display: flex; height: 32px; justify-content: center; padding: 0; width: 36px; }
.sbl-dots-btn:hover { background: #f0f7f3; border-color: #073B05; color: #073B05; }
.sbl-dots-menu { background: #fff; border: 1px solid #dce8e2; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.1); display: flex; flex-direction: column; min-width: 160px; overflow: hidden; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; }
.sbl-dots-menu.hidden { display: none; }
.sbl-dots-item { background: none; border: none; color: #1a2e22; cursor: pointer; font-size: var(--fs-body); padding: 10px 16px; text-align: left; }
.sbl-dots-item:hover { background: #f0f7f3; }
.sbl-dots-remove { color: #c0392b !important; }
.sbl-dots-remove:hover { background: #fdecea !important; }

.filter-item { align-items: center; border-bottom: 1px solid #edf0ec; display: flex; gap: 12px; justify-content: space-between; max-width: 620px; padding: 14px 0; }
.filter-item-label { color: #3b403d; font-size: var(--fs-body-large); flex: 1; }
.filter-delete-btn { background: transparent; border: 1px solid #d4cac6; border-radius: 7px; color: #c0392b; cursor: pointer; font-size: var(--fs-small); padding: 5px 12px; }
.filter-delete-btn:hover { background: #fdecea; border-color: #c0392b; }
.filter-form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin-top: 12px; }
.filter-form label { color: #3b403d; display: flex; flex-direction: column; font-size: var(--fs-body-large); gap: 6px; }
.filter-form input[type=text], .filter-form select {
  border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; font-size: var(--fs-body-large); padding: 9px 12px; width: 100%;
}
.filter-form fieldset { border: 1px solid #e0dbd8; border-radius: 10px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.filter-form legend { color: #5a4e4a; font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; padding: 0 4px; text-transform: uppercase; }
.filter-checkbox-label { flex-direction: row !important; align-items: center; gap: 10px !important; }
.filter-form-status { color: var(--mail-accent); font-size: var(--fs-body); margin: 0; min-height: 1.2em; }
.identity-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin-top: 12px; }
.identity-form label { color: #3b403d; display: flex; flex-direction: column; font-size: var(--fs-body-large); gap: 6px; }
.identity-form textarea { border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; font-size: var(--fs-body-large); padding: 10px 12px; resize: vertical; width: 100%; }
.identity-form-actions { align-items: center; display: flex; gap: 10px; }
.alias-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-width: 520px; }
.alias-empty { color: #8a9790; font-size: var(--fs-body); margin: 0; }
.alias-row { align-items: center; background: #f5f7f5; border: 1px solid #e0e8e2; border-radius: 8px; display: flex; gap: 10px; justify-content: space-between; padding: 8px 12px; }
.alias-label { color: #1a2320; font-size: var(--fs-body); word-break: break-all; }
.alias-delete { padding: 4px 10px; font-size: var(--fs-small); }
.alias-form { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 560px; }
.alias-local-input { background: #fff; border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; font-size: var(--fs-body); min-width: 80px; outline: none; padding: 9px 12px; width: 140px; }
.alias-local-input:focus { border-color: #3a7a5a; }
.alias-at { color: #8a9790; font-size: var(--fs-body); font-weight: 600; flex-shrink: 0; }
.alias-domain-select { background: #fff; border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; cursor: pointer; font-size: var(--fs-body); outline: none; padding: 9px 12px; flex: 1; min-width: 140px; }
.alias-domain-select:focus { border-color: #3a7a5a; }
.alias-add-btn { flex-shrink: 0; }
.alias-no-domains { color: #8a9790; font-size: var(--fs-body); margin: 12px 0 0; }
.alias-domain-link { background: none; border: none; color: #2a7a50; cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; }
.settings-secondary { background: transparent; border: 1px solid #d0cac6; border-radius: 8px; color: #4a3e3a; cursor: pointer; font-size: var(--fs-body); padding: 9px 16px; }
.settings-danger { background: transparent; border: 1px solid #d0533a; border-radius: 8px; color: #c0402a; cursor: pointer; font-size: var(--fs-body); padding: 9px 16px; }
.settings-danger:hover { background: #fdf0ee; }
.settings-block h2 { font-size: var(--fs-body-large); letter-spacing: 0; margin: 0 0 8px; }
.settings-row {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 48px;
  max-width: 360px;
}
.settings-row strong { font-size: var(--fs-body-large); }
.settings-feature-row {
  align-items: center;
  border-bottom: 1px solid #edf0ec;
  color: #3b403d;
  display: flex;
  font-size: var(--fs-small);
  justify-content: space-between;
  max-width: 560px;
  min-height: 32px;
}
.settings-feature-row:first-of-type { border-top: 1px solid #edf0ec; }
.settings-toggle {
  background: #b7b7b4;
  border-radius: 999px;
  height: 26px;
  padding: 3px;
  width: 46px;
}
.settings-toggle span {
  background: white;
  border-radius: 50%;
  display: block;
  height: 20px;
  transition: transform .18s ease;
  width: 20px;
}
.settings-toggle.enabled { background: #1D6617; }
.settings-toggle.enabled span { transform: translateX(20px); }
.settings-toggle-locked { align-items: center; background: #e4e2dd; color: #8a8a83; cursor: pointer; display: flex; justify-content: center; }
.settings-toggle-locked:hover { background: #d8d6d0; }
[data-theme="dark"] .settings-toggle-locked { background: #35443b; color: #9fb0a4; }
[data-theme="dark"] .settings-toggle-locked:hover { background: #405145; }
.settings-primary {
  background: #1D6617;
  border-radius: 8px;
  color: white;
  font-size: var(--fs-body);
  margin-top: 14px;
  min-height: 32px;
  padding: 0 14px;
}
.labels-block { margin-top: 40px; }

/* ── Folders & Labels management table ────────────── */
.org-section { margin-top: 8px; }
.org-section-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.org-section-title { font-size: var(--fs-h4); font-weight: 700; margin: 0; flex: 1 1 auto; }
.org-inline-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  user-select: none;
}
.org-toggle-label { color: var(--muted, #657087); font-size: var(--fs-small); }
.org-add-btn { margin-top: 0 !important; }
.org-info-btn {
  background: none;
  border: none;
  color: var(--muted, #8090a0);
  cursor: pointer;
  font-size: var(--fs-small);
  line-height: 1;
  padding: 0 2px;
  vertical-align: middle;
}
.org-table {
  border: 1px solid #e4e8e3;
  border-radius: 10px;
  max-width: 680px;
  overflow: hidden;
}
.org-thead {
  background: #f7f8f7;
  border-bottom: 1px solid #e4e8e3;
  display: grid;
  grid-template-columns: 32px 1fr 110px 90px;
  padding: 0 4px;
}
.org-th {
  color: #6b7280;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .05em;
  padding: 8px 6px;
  text-transform: uppercase;
}
.org-tbody { display: flex; flex-direction: column; }
.org-row {
  align-items: center;
  border-bottom: 1px solid #eef0ed;
  display: grid;
  grid-template-columns: 32px 1fr 110px 90px;
  padding: 0 4px;
  transition: background .12s;
}
.org-row:last-child { border-bottom: none; }
.org-row:hover { background: #fafbf9; }
.org-cell { align-items: center; display: flex; gap: 8px; padding: 10px 6px; }
.org-drag-handle {
  color: #c0c6bc;
  cursor: grab;
  justify-content: center;
  padding: 10px 4px;
}
.org-drag-handle:hover { color: #8a9089; }
.org-drag-handle:active { cursor: grabbing; }
.org-item-icon { color: #6b7280; flex-shrink: 0; }
.org-item-name { color: #2c3530; font-size: var(--fs-body); font-weight: 500; }
.org-col-drag { justify-content: center; }
.org-col-notif { justify-content: flex-start; }
.org-col-actions { justify-content: flex-end; }
.org-empty {
  color: #9aa09a;
  font-size: var(--fs-small);
  padding: 20px 16px;
  text-align: center;
}
.org-add-form {
  align-items: center;
  border-bottom: 1px solid #eef0ed;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
}
.org-add-form .folder-add-input { flex: 1; margin: 0; min-width: 0; }
.org-add-form .folder-add-status { font-size: var(--fs-small); }

/* Split edit button */
.org-split-btn { display: flex; position: relative; }
.org-split-edit {
  background: transparent;
  border: 1px solid #d0d5ce;
  border-radius: 6px 0 0 6px;
  border-right: none;
  color: #3b403d;
  font-size: var(--fs-small);
  padding: 5px 10px;
  transition: background .12s, border-color .12s;
}
.org-split-edit:hover { background: #f2f5f1; border-color: #b0b5ae; }
.org-split-arrow {
  align-items: center;
  background: transparent;
  border: 1px solid #d0d5ce;
  border-left: 1px solid #d0d5ce;
  border-radius: 0 6px 6px 0;
  color: #6b7280;
  display: flex;
  justify-content: center;
  padding: 5px 7px;
  transition: background .12s, border-color .12s;
}
.org-split-arrow:hover { background: #f2f5f1; border-color: #b0b5ae; }
.org-dropdown-menu {
  background: #fff;
  border: 1px solid #e0e4df;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 120px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
}
.org-dropdown-item {
  background: none;
  border: none;
  border-radius: 5px;
  color: #2c3530;
  cursor: pointer;
  display: block;
  font-size: var(--fs-small);
  padding: 7px 12px;
  text-align: left;
  width: 100%;
}
.org-dropdown-item:hover { background: #f2f5f1; }
.org-dropdown-danger { color: #c0392b !important; }
.org-dropdown-danger:hover { background: #fdecea !important; }

/* Labels sidebar panel */
.labels-panel { padding: 4px 0; }
.label-sidebar-btn {
  align-items: center;
  display: flex;
  gap: 8px;
  width: 100%;
}
.label-sidebar-btn svg { color: #6b7280; flex-shrink: 0; }

/* Screen-reader only */
.sr-only { border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px; }

/* Security settings section */
.sec-status-row { align-items: center; display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sec-badge { border-radius: 6px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .03em; padding: 3px 10px; text-transform: uppercase; white-space: nowrap; }
.sec-badge-on { background: #d4f5e6; color: #0d7a48; }
.sec-badge-off { background: #f0ecea; color: #6b5e58; }
.sec-desc { color: #5d5f65; font-size: var(--fs-body); line-height: 1.5; margin: 0 0 10px; max-width: 560px; }
.sec-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.sec-danger { border-color: #d9443c !important; color: #c0392b !important; }
.sec-danger:hover { background: #fdecea !important; }
.sec-danger-btn { background: #c0392b !important; }
.sec-danger-btn:hover { background: #a93226 !important; }

/* Credential cards */
.cred-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; max-width: 620px; }
.cred-card { align-items: center; background: #fff; border: 1px solid #e8e4e0; border-radius: 12px; display: flex; gap: 14px; padding: 14px 16px; }
.cred-icon { font-size: var(--fs-h2); flex-shrink: 0; }
.cred-info { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.cred-name { color: #1a1714; font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-date { color: #8a8580; font-size: var(--fs-small); }
.cred-actions { display: flex; flex-shrink: 0; gap: 8px; }
.cred-btn { background: transparent; border: 1px solid #d0cac6; border-radius: 7px; color: #4a3e3a; cursor: pointer; font-size: var(--fs-small); padding: 5px 12px; white-space: nowrap; }
.cred-btn:hover { background: #f5f2f0; }
.cred-btn-danger { border-color: #d4cac6; color: #c0392b; }
.cred-btn-danger:hover { background: #fdecea; border-color: #c0392b; }

/* TOTP setup modal */
.sec-modal-card { color: #25201d; max-width: 480px; padding: 24px 28px 22px; width: min(480px, 100%); }
.sec-modal-card h2 { font-size: var(--fs-h4); margin: 0 0 14px; padding-right: 28px; }
.totp-setup-step { display: flex; flex-direction: column; gap: 10px; }
.totp-qr-wrap { align-self: center; background: #fff; border: 1px solid #e0dbd8; border-radius: 12px; line-height: 0; padding: 12px; }
.totp-qr-wrap svg { border-radius: 4px; display: block; height: 180px; width: 180px; }
.totp-open-link { color: #073B05; display: inline-block; font-size: var(--fs-small); margin: 0; text-decoration: none; text-align: center; }
.totp-open-link:hover { text-decoration: underline; }
.totp-manual-label { color: #3b403d; font-size: var(--fs-body-large); margin: 0; }
.totp-key-box { align-items: center; background: #f5f2f0; border: 1px solid #e0dbd8; border-radius: 10px; display: flex; gap: 12px; justify-content: space-between; padding: 12px 16px; }
.totp-key-text { color: #1a1714; font-family: monospace; font-size: var(--fs-body); letter-spacing: .06em; word-break: break-all; }
.totp-copy-btn { flex-shrink: 0; }
.totp-divider { border: none; border-top: 1px solid #e8e4e0; margin: 16px 0; }
.totp-code-label { color: #3b403d; display: block; font-size: var(--fs-body-large); margin-bottom: 10px; }
.totp-code-row { display: flex; gap: 10px; }
.totp-code-input { border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; font-size: var(--fs-body-large); letter-spacing: .1em; padding: 8px 12px; text-align: center; width: 120px; }
.totp-verify-btn { font-size: var(--fs-body-large) !important; margin-top: 0 !important; min-height: 44px !important; padding: 0 18px !important; }
.totp-status { color: #c0392b; font-size: var(--fs-body); margin: 8px 0 0; min-height: 1.2em; }
.backup-codes-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 16px 0; }
.backup-code { background: #f5f2f0; border: 1px solid #e0dbd8; border-radius: 8px; color: #1a1714; font-family: monospace; font-size: var(--fs-body-large); letter-spacing: .06em; padding: 8px 12px; text-align: center; }

/* MFA modal (login step-2) */
.mfa-card { color: #25201d; max-width: 380px; padding: 24px 26px 20px; width: min(380px, 100%); }
.mfa-card h2 { font-size: var(--fs-h4); margin: 0 0 8px; }
.mfa-desc { color: #5d5f65; font-size: var(--fs-small); margin: 0 0 16px; }
.mfa-webauthn-btn { font-size: var(--fs-body) !important; margin-top: 0 !important; width: 100%; }
.mfa-or { color: #8a8580; font-size: var(--fs-small); margin: 10px 0; text-align: center; }
.mfa-code-label { color: #3b403d; display: block; font-size: var(--fs-small); margin-bottom: 5px; }
.mfa-code-input { border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; font-size: var(--fs-h4); letter-spacing: .12em; margin-bottom: 10px; padding: 9px 12px; text-align: center; width: 100%; }
.mfa-submit-btn { font-size: var(--fs-body-large) !important; margin-top: 0 !important; min-height: 44px !important; width: 100%; }
.mfa-error { color: #c0392b; font-size: var(--fs-body); margin: 10px 0 0; min-height: 1.2em; text-align: center; }
.mfa-cancel-btn { background: transparent; color: #8a8580; cursor: pointer; font-size: var(--fs-body); margin-top: 14px; text-align: center; width: 100%; }
.mfa-cancel-btn:hover { color: #4a3e3a; }
.keep-loggedin-row { align-items: center; color: var(--ink); cursor: pointer; display: flex; font-size: var(--fs-body); font-weight: 600; gap: 10px; margin-top: 16px; }
.keep-loggedin-row input[type="checkbox"] { accent-color: var(--green); cursor: pointer; flex-shrink: 0; height: 16px; width: 16px; }
.keep-loggedin-hint { color: var(--muted); display: block; font-size: var(--fs-small); margin-top: 4px; padding-left: 26px; }

.unlock-screen {
  align-items: center;
  background: linear-gradient(180deg, #f7fbf5 0%, #eef5ea 100%);
  display: flex;
  inset: 0;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px 20px;
  position: fixed;
}
.unlock-card {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(92,122,42,0.12);
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(15,23,42,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 380px;
  padding: 36px 32px 28px;
  text-align: center;
  width: 100%;
}
.unlock-avatar {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border-radius: 999px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  height: 64px;
  line-height: 64px;
  margin-bottom: 14px;
  width: 64px;
}
.unlock-address { color: var(--ink); font-size: var(--fs-body-large); font-weight: 700; margin: 0 0 6px; }
.unlock-tagline { color: var(--muted); font-size: var(--fs-small); margin: 0 0 22px; }
.unlock-pw-label { display: grid; gap: 10px; font-size: var(--fs-body); font-weight: 600; margin-bottom: 14px; text-align: left; width: 100%; color: #344153; }
.unlock-card .primary { margin-top: 0; width: 100%; }
.unlock-card .status { margin: 8px 0 0; min-height: 1.2em; }
.unlock-card .trouble-link { background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-small); margin-top: 16px; }
.unlock-card .trouble-link:hover { color: var(--ink); }

.modal {
  align-items: center;
  background: rgba(16, 23, 19, .42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: fixed;
  z-index: 10;
}
.modal-card {
  background: #fbf8f6;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  position: relative;
}
.modal-close {
  background: transparent;
  color: #5d5652;
  font-size: var(--fs-h3);
  position: absolute;
  right: 22px;
  top: 18px;
}
.upgrade-modal-card {
  color: #25201d;
  max-width: 1120px;
  padding: 30px 34px 32px;
  width: min(1120px, 100%);
}
.upgrade-modal-card h2 {
  font-size: var(--fs-h3);
  margin: 0 0 6px;
  padding-right: 28px;
}
.upgrade-modal-card .settings-lede { margin: 0; }
.key-card {
  color: #25201d;
  max-width: 720px;
  padding: 24px 28px 20px;
  width: min(720px, 100%);
}
.key-hero {
  align-items: center;
  background: white;
  border-radius: 12px;
  display: grid;
  justify-items: center;
  margin-bottom: 20px;
  padding: 36px 20px 24px;
  text-align: center;
}
.key-hero svg {
  color: #557064;
  fill: none;
  height: 56px;
  margin-bottom: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 56px;
}
.key-hero h2 { font-size: var(--fs-h3); font-weight: 500; margin: 0 0 14px; }
.key-hero p { font-size: var(--fs-body-large); margin: 0; }
.key-card h3 {
  font-size: var(--fs-body);
  letter-spacing: .01em;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.verification-code-card {
  background: white;
  border-radius: 12px;
  display: grid;
  justify-items: center;
  padding: 24px 28px 28px;
}
.verification-qr {
  --qr-cell: 7px;
  background: white;
  display: grid;
  grid-template-columns: repeat(29, var(--qr-cell));
  grid-template-rows: repeat(29, var(--qr-cell));
  margin-bottom: 32px;
}
.verification-qr span.black { background: #050505; }
.verification-identity {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 28px 1fr auto;
  justify-self: stretch;
}
.verified-badge {
  background: #4e9a68;
  border-radius: 50%;
  color: white;
  display: grid;
  font-size: var(--fs-h4);
  height: 25px;
  place-items: center;
  width: 25px;
}
.verification-identity strong { font-size: var(--fs-h4); overflow-wrap: anywhere; }
.copy-button {
  background: transparent;
  border: 2px solid #302b27;
  border-radius: 6px;
  color: #302b27;
  font-size: var(--fs-small);
  padding: 6px 10px;
}
#verification-fingerprint,
#contact-verification-fingerprint,
#contact-safety-number {
  background: transparent;
  color: #25201d;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-body);
  justify-self: stretch;
  line-height: 1.55;
  margin: 16px 0 8px 40px;
  white-space: pre-wrap;
}
#contact-safety-number {
  border-top: 1px solid #eee5e1;
  margin-top: 12px;
  padding-top: 24px;
}
.verification-code-card p {
  font-size: var(--fs-body);
  justify-self: stretch;
  margin: 0 0 0 40px;
}
.verification-code-card .settings-primary {
  justify-self: stretch;
  margin: 16px 0 0 40px;
}
.verification-code-card .settings-primary:disabled {
  cursor: default;
  opacity: .65;
}
.verification-note {
  font-size: var(--fs-body);
  line-height: 1.45;
  margin: 30px auto 0;
  max-width: 760px;
  text-align: center;
}
.recovery-card {
  color: #25201d;
  max-width: 480px;
  padding: 24px;
  width: min(480px, 100%);
}
.recovery-card h2 {
  font-size: clamp(var(--fs-h4), 3.5vw, var(--fs-h3));
  margin: 0 0 10px;
}
.recovery-card p {
  color: #565f59;
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 16px;
}
.recovery-codes-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 16px;
}
.recovery-codes-list code {
  background: #f1f4f1;
  border: 1px solid #dce8c4;
  border-radius: 7px;
  color: #183226;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-small);
  padding: 9px;
  text-align: center;
}

@media (max-width: 900px) {
  .landing {
    display: block;
  }

  .hero {
    padding-top: 0;
    margin-bottom: 48px;
  }

  .cta-actions {
    gap: 16px;
  }

  .cta-primary {
    min-height: 48px;
    padding: 0 22px;
  }

  .cta-link {
    justify-content: center;
    width: 100%;
  }

  .signin-shell {
    grid-template-columns: 1fr;
  }

  .auth-card {
    justify-self: stretch;
    max-width: 100%;
  }

  .create-account-header {
    gap: 12px;
    min-height: 60px;
  }

  .create-account-brand {
    font-size: var(--fs-h3);
  }

  .create-account-hero {
    padding-top: 34px;
  }

  .create-account-shell {
    grid-template-columns: 1fr;
  }

  .mailbox { display: grid; grid-template-areas: "header" "sidebar" "list"; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(320px, auto); }
  .mail-header { grid-template-columns: 1fr; padding: 18px; }
  .sync-state, .app-nav { display: none; }
  .sidebar { padding: 18px; }
  .folder-nav { grid-template-columns: repeat(3, 1fr); }
  .nav-item { display: grid; font-size: var(--fs-body); gap: 5px; justify-content: center; padding: 10px 4px; text-align: center; }
  .sidebar-section { display: none; }
  .sidebar .secondary { align-self: end; margin-top: 0; }
  .list-pane { margin: 0; padding: 14px; }
  .settings-page { grid-template-columns: 1fr; }
  .settings-sidebar { min-height: auto; }
  .settings-topbar { grid-template-columns: 1fr; height: auto; padding: 16px; }
  .upgrade-button, .settings-account, .settings-avatar { display: none; }
  .settings-content { margin: 0; padding: 28px 20px; }
  .key-card { padding: 28px 20px; }
  .verification-qr { --qr-cell: 7px; }
  .verification-identity { grid-template-columns: 28px 1fr; }
  .copy-button { grid-column: 2; justify-self: start; }
  #verification-fingerprint, .verification-code-card p { margin-left: 0; }
  .recovery-codes-list { grid-template-columns: 1fr; }
}

.plans-page {
  min-height: calc(100vh - 72px);
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 56px) clamp(54px, 6vw, 82px);
  background: #ffffff;
}

.plans-shell {
  width: min(100%, 1920px);
  margin: 0 auto;
  display: grid;
  gap: clamp(32px, 4vw, 52px);
}

.plans-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.plans-segmented,
.plans-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem;
  border: 1px solid #dfe5e1;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(21, 29, 44, 0.04);
}

.plans-tab,
.plans-billing-option {
  border: 0;
  background: transparent;
  color: #4d586a;
  min-width: 110px;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-size: clamp(var(--fs-small), 1vw, var(--fs-h4));
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.plans-tab.active,
.plans-billing-option.active {
  background: #eef2ef;
  color: var(--ink);
}

.plans-billing-badge {
  padding: 0.7rem 0.8rem;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0;
  font-size: clamp(var(--fs-small), 0.85vw, var(--fs-body-large));
}

.plans-page.billing-monthly .plans-billing-badge,
.plans-page.billing-monthly .plan-discount-badge,
.plans-page.billing-monthly .plan-price-old,
.plans-page.billing-monthly .plan-savings {
  display: none;
}

.plans-page.business-mode {
  background:
    linear-gradient(145deg, rgba(21, 201, 183, 0.12), transparent 34%),
    linear-gradient(180deg, #f2f6f4 0%, #ffffff 56%, #e8efec 100%);
}

.plans-page.business-mode .plans-segmented,
.plans-page.business-mode .plans-billing-toggle {
  border-color: rgba(17, 32, 24, 0.14);
  box-shadow: 0 18px 40px rgba(17, 32, 24, 0.08);
}

.plans-page.business-mode .plans-tab.active,
.plans-page.business-mode .plans-billing-option.active {
  background: #dfe8e2;
  color: #112018;
}

.business-plans-title {
  display: none;
  margin: clamp(26px, 4vw, 48px) auto clamp(22px, 3vw, 34px);
  max-width: 940px;
  color: #14251f;
  font-size: clamp(var(--fs-h3), 3vw, var(--fs-display));
  font-weight: 800;
  line-height: 1.04;
  text-align: center;
}

.plans-page.business-mode .business-plans-title {
  display: block;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2vw, 32px);
  align-items: stretch;
}

.plans-page .plans-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
}

.plan-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 24px;
  border: 2px solid #d9dee2;
  background: #ffffff;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.plans-page.business-mode .plan-card {
  background: #172a24;
  border-color: #29463d;
  box-shadow: 0 18px 44px rgba(9, 25, 20, 0.18);
}

.plans-page.business-mode .plan-card-recommended {
  border-color: #67dfe8;
}

.plans-page.business-mode .plan-recommended-bar,
.plans-page.business-mode .plan-button-solid {
  background: linear-gradient(135deg, #173d2a 0%, #0d281c 100%);
}

.plans-page.business-mode .plan-button-outline {
  background: transparent;
  border-color: #67dfe8;
  color: #ecfffb;
}

.plans-page.business-mode .plan-discount-badge {
  background: rgba(103, 223, 232, 0.16);
  color: #9ff4ef;
}

.plans-page.business-mode .plan-card-heading h2,
.plans-page.business-mode .plan-price,
.plans-page.business-mode .plan-price-unit {
  color: #f8fffc;
}

.plans-page.business-mode .plan-card-heading p,
.plans-page.business-mode .product-icons span,
.plans-page.business-mode .plan-price-old,
.plans-page.business-mode .plan-features li {
  color: #c8d7d2;
}

.plans-page.business-mode .product-icons strong,
.plans-page.business-mode .plan-savings,
.plans-page.business-mode .plan-features li::before {
  color: #9ff4ef;
}

.plan-card-body {
  display: grid;
  align-content: start;
  flex: 1;
  grid-template-rows: auto auto auto auto 1fr;
  padding: clamp(20px, 2.2vw, 36px);
}

.plan-card-heading h2 {
  margin: 0;
  color: #26304b;
  font: italic 700 clamp(20px, 2vw, 28px) / 1.08 Georgia, serif;
  line-height: 1.05;
}

.plan-card-heading p {
  margin: 1.5rem 0 0;
  color: #4d586a;
  font-size: var(--fs-body-large);
  font-weight: 700;
  line-height: 1.55;
}

.plan-card-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.product-icons {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.product-icons span {
  align-items: center;
  color: #4d586a;
  display: grid;
  font-size: var(--fs-small);
  gap: 8px;
  justify-items: center;
}

.product-icons strong {
  color: var(--green);
  display: block;
  font-size: var(--fs-body-large);
  margin-bottom: 12px;
}

.product-icon {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e1e6e4;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(21, 29, 44, .06);
  color: #ffffff;
  display: inline-grid;
  font-size: var(--fs-caption);
  font-style: normal;
  font-weight: 800;
  height: 38px;
  justify-items: center;
  line-height: 1;
  place-items: center;
  width: 38px;
}

.product-mail { background: linear-gradient(135deg, #f4fff8 0 18%, #36b678 18% 54%, #4a6b22 54%); }
.product-cal { background: linear-gradient(135deg, #e9fff0, #21a2f2 58%, #3672f4); }
.product-vpn { background: linear-gradient(135deg, #eafff2, #2cc0a0 48%, #4a6b22); }
.product-drive { background: linear-gradient(135deg, #eafff2, #2bbf86 52%, #6adf9f); }
.product-docs { background: linear-gradient(135deg, #eef7ff, #36a3dd 55%, #2677bd); }
.product-sheets { background: linear-gradient(135deg, #f0fff4, #20b867 55%, #0b8f52); }
.product-pass { background: linear-gradient(135deg, #eafff5, #5c7a2a 48%, #7adba9); }

.product-icons-split {
  align-items: stretch;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px;
}

.product-icons-split > div {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.product-icons-split > div:first-child {
  border-right: 1px solid #dfe5e1;
  padding-right: 14px;
}

.product-icons-split strong {
  flex-basis: 100%;
}

.product-icons-premium strong {
  flex-basis: 100%;
}

.plan-discount-badge {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 700;
  font-size: var(--fs-small);
}

.plan-price-block {
  margin: clamp(14px, 2vw, 24px) 0 clamp(12px, 1.5vw, 20px);
  transition: margin .2s ease;
}

.plan-price-old {
  color: #7a887f;
  text-decoration: line-through;
  font-size: clamp(var(--fs-small), 1vw, var(--fs-h4));
  margin-bottom: 0.3rem;
}

.plan-price-row {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
}

.plan-price {
  color: #26304b;
  font-size: clamp(var(--fs-h2), 2.5vw, var(--fs-h1));
  line-height: 1;
  font-weight: 500;
  transition: color .2s ease, transform .2s ease;
}

.plan-price-unit {
  color: #26304b;
  font-size: clamp(var(--fs-body), 1.1vw, var(--fs-h4));
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.plan-savings {
  margin-top: 0.5rem;
  color: var(--green);
  font-size: clamp(var(--fs-small), 1vw, var(--fs-body-large));
  font-weight: 600;
}

.plan-card-tagline {
  margin: 0.6rem 0 0;
  color: #4d586a;
  font-size: var(--fs-body-large);
  font-weight: 700;
  line-height: 1.55;
}

.plan-button {
  width: 100%;
  border-radius: 999px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  font-size: clamp(var(--fs-small), 1vw, var(--fs-body-large));
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.plan-button:hover {
  transform: translateY(-1px);
}

.plan-button-outline {
  border: 3px solid var(--green);
  background: #ffffff;
  color: var(--green-dark);
}

.plan-button-outline:hover {
  background: #f7fbf7;
  box-shadow: 0 12px 24px rgba(92, 122, 42,0.16);
}

.plan-button-solid {
  border: 0;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #ffffff;
  box-shadow: 0 18px 30px rgba(92, 122, 42,0.25);
}

.plan-button-secondary {
  margin-top: 0.8rem;
  border: 3px solid var(--green);
  background: #ffffff;
  color: var(--green-dark);
}

.plans-page.business-mode .plan-button-secondary {
  background: transparent;
  border-color: #67dfe8;
  color: #ecfffb;
}

.plan-features {
  align-content: start;
  align-self: start;
  list-style: none;
  margin: clamp(14px, 1.5vw, 22px) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.plan-features li {
  position: relative;
  padding-left: 1.4rem;
  color: #4d586a;
  font-size: clamp(var(--fs-small), 0.9vw, var(--fs-body));
  line-height: 1.5;
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 800;
}

.plan-card-recommended {
  border: 3px solid var(--green);
  overflow: hidden;
}

.plan-recommended-bar {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: 0;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 800;
  font-size: clamp(var(--fs-small), 1vw, var(--fs-body-large));
  padding: 0.9rem 1rem;
}

.plans-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.plans-back-button {
  border: 0;
  background: transparent;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  transition: background .16s ease;
}
.plans-back-button:hover { background: rgba(92, 122, 42,.08); }

@media (max-width: 1100px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }

  .plan-card {
    min-height: 900px;
  }

  .plan-card-body {
    grid-template-rows: none;
  }
}

@media (max-width: 520px) {
  .create-account-header {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 18px;
  }

  .create-account-signin {
    align-self: flex-start;
  }

  .create-account-hero h1 {
    font-size: var(--fs-h2);
  }

  .username-field,
  .password-field {
    grid-template-columns: 1fr;
  }

  .username-field span,
  .password-field span {
    padding: 0 16px 14px;
  }

  .create-account-primary {
    justify-self: stretch;
    padding-inline: 18px;
  }

  .plans-page {
    padding: 1.5rem 1rem 2.5rem;
  }

  .plans-tab,
  .plans-billing-option,
  .plans-billing-badge {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
  }

  .plan-card-body {
    padding: 1.5rem;
  }

  .plan-card {
    min-height: auto;
  }

  .plan-price-row {
    flex-wrap: wrap;
  }

  .plan-price {
    font-size: var(--fs-display);
  }

  .plan-button {
    min-height: 58px;
  }

  .plan-features li {
    font-size: var(--fs-body-large);
  }
}

/* Plans embedded in settings Upgrade section */
.settings-plans-embed {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}
/* Let the upgrade plans break out of the 640px text column so 3 columns fit. */
.settings-content:has(.settings-plans-embed) { max-width: 1100px; }

.settings-plans-embed .plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.settings-plans-embed .plan-card {
  border-radius: 18px;
}
.settings-plans-embed .plan-card-body {
  padding: 28px 24px;
}
.settings-plans-embed .plan-card-heading h2 {
  font-size: var(--fs-h3);
}
.settings-plans-embed .plan-card-heading p {
  font-size: var(--fs-small);
  margin-top: 0.5rem;
}
.settings-plans-embed .plan-card-heading-row { gap: 0.5rem; }
.settings-plans-embed .plan-price {
  font-size: var(--fs-h1);
}
.settings-plans-embed .plan-price-unit {
  font-size: var(--fs-body);
}
.settings-plans-embed .plan-savings {
  font-size: var(--fs-small);
}
.settings-plans-embed .plan-button {
  min-height: 42px;
  font-size: var(--fs-body);
  margin-top: 4px;
}
.settings-plans-embed .plan-features li {
  font-size: var(--fs-small);
  padding-left: 22px;
}
.settings-plans-embed .plan-features {
  gap: 0.65rem;
  margin-top: 20px;
}
.settings-plans-embed .plan-recommended-bar {
  font-size: var(--fs-small);
  padding: 0.6rem;
}
.settings-plans-embed .plan-price-block {
  margin: 16px 0 18px;
}
/* Scaled-down app badges */
.settings-plans-embed .product-icons { gap: 6px; margin-top: 12px; }
.settings-plans-embed .product-icons span { font-size: var(--fs-caption); gap: 4px; }
.settings-plans-embed .product-icon { width: 26px; height: 26px; font-size: var(--fs-caption); border-radius: 8px; }
.settings-plans-embed .product-icons strong { font-size: var(--fs-caption); margin-bottom: 8px; }
.settings-plans-embed .product-icons-split { gap: 10px; }
.settings-plans-embed .product-icons-split > div { gap: 6px; }
.settings-plans-embed .product-icons-split > div:first-child { padding-right: 10px; }
.settings-plans-embed .plan-discount-badge { font-size: var(--fs-caption); padding: 3px 7px; }
.settings-plans-embed .plans-tab,
.settings-plans-embed .plans-billing-option {
  font-size: var(--fs-small);
  padding: 0.5rem 0.9rem;
}
.settings-plans-embed.billing-monthly .plans-billing-badge,
.settings-plans-embed.billing-monthly .plan-discount-badge,
.settings-plans-embed.billing-monthly .plan-price-old,
.settings-plans-embed.billing-monthly .plan-savings { display: none; }
.settings-plans-embed.business-mode { background: none; }
.settings-plans-embed.business-mode .plans-segmented,
.settings-plans-embed.business-mode .plans-billing-toggle { border-color: rgba(17,32,24,.14); box-shadow: 0 18px 40px rgba(17,32,24,.08); }
.settings-plans-embed.business-mode .plans-tab.active,
.settings-plans-embed.business-mode .plans-billing-option.active { background: #dfe8e2; color: #112018; }
.settings-plans-embed.business-mode .business-plans-title { display: block; }
.settings-plans-embed.business-mode .plan-card { background: #172a24; border-color: #29463d; box-shadow: 0 18px 44px rgba(9,25,20,.18); }
.settings-plans-embed.business-mode .plan-card-recommended { border-color: #67dfe8; }
.settings-plans-embed.business-mode .plan-recommended-bar,
.settings-plans-embed.business-mode .plan-button-solid { background: linear-gradient(135deg,#173d2a 0%,#0d281c 100%); }
.settings-plans-embed.business-mode .plan-button-outline { background: transparent; border-color: #67dfe8; color: #ecfffb; }
.settings-plans-embed.business-mode .plan-discount-badge { background: rgba(103,223,232,.16); color: #9ff4ef; }
.settings-plans-embed.business-mode .plan-card-heading h2,
.settings-plans-embed.business-mode .plan-price,
.settings-plans-embed.business-mode .plan-price-unit { color: #f8fffc; }
.settings-plans-embed.business-mode .plan-card-heading p,
.settings-plans-embed.business-mode .product-icons span,
.settings-plans-embed.business-mode .plan-price-old,
.settings-plans-embed.business-mode .plan-features li { color: #c8d7d2; }
.settings-plans-embed.business-mode .product-icons strong,
.settings-plans-embed.business-mode .plan-savings,
.settings-plans-embed.business-mode .plan-features li::before { color: #9ff4ef; }
.settings-plans-embed .business-plans-title { display: none; }

/* Dark mode */
[data-theme="dark"] {
  --background: #1e2d27;
  --panel: #263830;
  --ink: #eaf2ec;
  --muted: #8ab5a0;
  --line: #2e4438;
  --text: var(--ink);
  --shadow: 0 24px 65px rgba(0,0,0,.32);
}
[data-theme="dark"] body { background: #18181b; color: #eaf2ec; }
[data-theme="dark"] .page-frame { background: #1e2d27; }

/* ── Dark mode: global text override (handles all hardcoded light colors) ── */
[data-theme="dark"] .hero h1,
[data-theme="dark"] .privacy-cta p,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .signin-copy h2,
[data-theme="dark"] .auth-heading,
[data-theme="dark"] .auth-label,
[data-theme="dark"] .create-account-hero h1,
[data-theme="dark"] .privacy-card h2,
[data-theme="dark"] .privacy-card p,
[data-theme="dark"] .privacy-card li,
[data-theme="dark"] .secure-link-card h1,
[data-theme="dark"] .secure-link-message h2,
[data-theme="dark"] .secure-link-message p,
[data-theme="dark"] .plan-card-heading h2,
[data-theme="dark"] .plan-price,
[data-theme="dark"] .plan-price-unit,
[data-theme="dark"] .plan-card-heading p,
[data-theme="dark"] .plan-features li,
[data-theme="dark"] .business-plans-title,
[data-theme="dark"] .list-toolbar h1,
[data-theme="dark"] .empty-title,
[data-theme="dark"] .empty p,
[data-theme="dark"] .message,
[data-theme="dark"] .reader-empty h2,
[data-theme="dark"] .reader-empty p,
[data-theme="dark"] .reader-content h2,
[data-theme="dark"] #reader-body,
[data-theme="dark"] .reader-meta strong,
[data-theme="dark"] .reader-meta time,
[data-theme="dark"] .compose-field-lbl,
[data-theme="dark"] .compose-from-addr,
[data-theme="dark"] .compose-field-input,
[data-theme="dark"] .compose-body,
[data-theme="dark"] .compose-font-select,
[data-theme="dark"] .compose-size-select,
[data-theme="dark"] .compose-tb-btn,
[data-theme="dark"] .compose-bottom-btn,
[data-theme="dark"] .compose-draft-btn,
[data-theme="dark"] .compose-align-opt,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .key-hero h2,
[data-theme="dark"] .key-hero p,
[data-theme="dark"] .key-card h3,
[data-theme="dark"] .totp-key-text,
[data-theme="dark"] .totp-code-label,
[data-theme="dark"] .totp-manual-label,
[data-theme="dark"] .recovery-card h2,
[data-theme="dark"] .recovery-card p,
[data-theme="dark"] .verification-code-card p,
[data-theme="dark"] .verification-identity strong,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .sidebar-link,
[data-theme="dark"] .sidebar h2,
[data-theme="dark"] .folders-toggle,
[data-theme="dark"] .custom-folder-button,
[data-theme="dark"] .no-folders,
[data-theme="dark"] .app-nav,
[data-theme="dark"] .mail-brand,
[data-theme="dark"] .sync-state,
[data-theme="dark"] .mail-search,
[data-theme="dark"] .mail-search input,
[data-theme="dark"] .tool-button,
[data-theme="dark"] .reader-action-btn,
[data-theme="dark"] .reader-move-select,
[data-theme="dark"] .org-section-title { color: #eaf2ec; }
[data-theme="dark"] .org-table { border-color: #2a3a30; }
[data-theme="dark"] .org-thead { background: #1e2a22; border-color: #2a3a30; }
[data-theme="dark"] .org-th { color: #6a9070; }
[data-theme="dark"] .org-row { border-color: #2a3a30; }
[data-theme="dark"] .org-row:hover { background: #1e2a22; }
[data-theme="dark"] .org-item-name { color: #d8e8da; }
[data-theme="dark"] .org-item-icon { color: #6a9070; }
[data-theme="dark"] .org-drag-handle { color: #3a5040; }
[data-theme="dark"] .org-drag-handle:hover { color: #6a9070; }
[data-theme="dark"] .org-empty { color: #5a7060; }
[data-theme="dark"] .org-split-edit,
[data-theme="dark"] .org-split-arrow { background: transparent; border-color: #3a4a40; color: #a8c8a8; }
[data-theme="dark"] .org-split-edit:hover,
[data-theme="dark"] .org-split-arrow:hover { background: #1e2a22; }
[data-theme="dark"] .org-dropdown-menu { background: #1e2a22; border-color: #2a3a30; }
[data-theme="dark"] .org-dropdown-item { color: #d8e8da; }
[data-theme="dark"] .org-dropdown-item:hover { background: #243028; }
[data-theme="dark"] .org-toggle-label { color: #6a9070; }
[data-theme="dark"] .org-info-btn { color: #5a8060; }
[data-theme="dark"] .org-add-form { border-color: #2a3a30; }
[data-theme="dark"] .acct-dn-text,
[data-theme="dark"] .settings-content h1,
[data-theme="dark"] .settings-lede,
[data-theme="dark"] .settings-block h2,
[data-theme="dark"] .settings-feature-row,
[data-theme="dark"] .filter-item-label,
[data-theme="dark"] .filter-form label,
[data-theme="dark"] .identity-form label,
[data-theme="dark"] .cp-label { color: #eaf2ec; }

/* Elements that stay their specific colors */
[data-theme="dark"] .status.error,
[data-theme="dark"] .folder-add-status,
[data-theme="dark"] .sec-danger,
[data-theme="dark"] .filter-delete-btn,
[data-theme="dark"] .acct-inline-status,
[data-theme="dark"] .rec-error,
[data-theme="dark"] .totp-status,
[data-theme="dark"] .mfa-error,
[data-theme="dark"] .acct-delete-btn { color: #f08080 !important; }

[data-theme="dark"] .settings-primary,
[data-theme="dark"] .plan-button-solid,
[data-theme="dark"] .plan-recommended-bar,
[data-theme="dark"] .nav-badge,
[data-theme="dark"] .msg-avatar,
[data-theme="dark"] .reader-avatar,
[data-theme="dark"] .verified-badge,
[data-theme="dark"] .rec-primary-btn { color: #ffffff !important; }

[data-theme="dark"] .header-signin,
[data-theme="dark"] .cta-primary { color: #000 !important; }

[data-theme="dark"] a { color: #6dd9a8; }
[data-theme="dark"] .settings-lede a { color: #6dd9a8; }
[data-theme="dark"] .mail-brand { color: var(--logo-green); }

/* ── Settings ── */
[data-theme="dark"] .settings-page { background: #1e2d27; color: #eaf2ec; }
[data-theme="dark"] .settings-sidebar { background: #163126; }
[data-theme="dark"] .settings-main { background: #1e2d27; color: #eaf2ec; }
[data-theme="dark"] .settings-row strong { color: #eaf2ec; }
[data-theme="dark"] .settings-feature-row span { color: #eaf2ec; }
[data-theme="dark"] .settings-feature-row { color: #eaf2ec; }
[data-theme="dark"] .settings-topbar { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .settings-search { background: #263830; }
[data-theme="dark"] .settings-search input { background: transparent; border: 0; color: #eaf2ec; }
[data-theme="dark"] .settings-feature-row { border-color: #2e4438; }
[data-theme="dark"] .settings-secondary { border-color: #2e4438; color: #b0c4ba; }
[data-theme="dark"] .settings-icon-row { color: #9bb0a4; }
[data-theme="dark"] .settings-icon-row.active,
[data-theme="dark"] .settings-icon-row:hover { background: #223229; color: #eaf2ec; }
[data-theme="dark"] .settings-avatar { border-color: #2e4438; }
[data-theme="dark"] .upgrade-button { background: #263830; border-color: #5c7a2a; color: #eaf2ec; }
[data-theme="dark"] .filter-item { border-color: #2e4438; }
[data-theme="dark"] .filter-form input[type=text],
[data-theme="dark"] .filter-form select { background: #223229; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .cf-filter-name { color: #eaf2ec; }
[data-theme="dark"] .cf-filter-detail { color: #6a9a80; }
[data-theme="dark"] .cf-filter-row { border-color: #2e4438; }
[data-theme="dark"] .sbl-desc-list { color: #b0ccc0; }
[data-theme="dark"] .sbl-add-menu { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .sbl-add-menu-item { color: #eaf2ec; }
[data-theme="dark"] .sbl-add-menu-item:hover { background: #1e3828; }
[data-theme="dark"] .sbl-search-wrap { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .sbl-search { color: #eaf2ec; }
[data-theme="dark"] .sbl-tabs { border-color: #2e4438; }
[data-theme="dark"] .sbl-tab { color: #6a9a80; }
[data-theme="dark"] .sbl-tab:hover:not(.active) { color: #eaf2ec; }
[data-theme="dark"] .sbl-table-header { border-color: #2e4438; color: #4a7060; }
[data-theme="dark"] .sbl-table-row { border-color: #2e4438; }
[data-theme="dark"] .sbl-email-text { color: #eaf2ec; }
[data-theme="dark"] .sbl-dots-btn { border-color: #2e4438; color: #6a9a80; }
[data-theme="dark"] .sbl-dots-btn:hover { background: #1e3828; color: #6dd9a8; }
[data-theme="dark"] .sbl-dots-menu { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .sbl-dots-item { color: #eaf2ec; }
[data-theme="dark"] .sbl-dots-item:hover { background: #1e3828; }
[data-theme="dark"] .sbl-empty { color: #4a7060; }
[data-theme="dark"] .cp-input { background: #223229; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .settings-search-result { border-color: #2e4438; }
[data-theme="dark"] .settings-search-result:hover { background: #223229; }
[data-theme="dark"] .settings-search-result span { color: #8ab5a0; }

/* ── Modal ── */
[data-theme="dark"] .modal-card { background: #263830; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .key-hero { background: #1e2d27; }
[data-theme="dark"] .verification-code-card { background: #1e2d27; }
[data-theme="dark"] .totp-key-box { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .totp-qr-wrap { background: #fff; border-color: #2e4438; }
[data-theme="dark"] .backup-code { background: #1e2d27; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .recovery-codes-list code { background: #1e2d27; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .sec-badge-on { background: #0d3a22; color: #6dd9a8; }
[data-theme="dark"] .sec-badge-off { background: #1e2d27; color: #8ab5a0; }
[data-theme="dark"] .copy-button { border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .mfa-card { background: #263830; }
[data-theme="dark"] .mfa-code-input { background: #1e2d27; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .totp-code-input { background: #1e2d27; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] #verification-fingerprint,
[data-theme="dark"] #contact-verification-fingerprint,
[data-theme="dark"] #contact-safety-number { color: #eaf2ec; border-color: #2e4438; }

/* ── Mailbox ── */
[data-theme="dark"] .mailbox { background: #1a2822; color: #eaf2ec; }
[data-theme="dark"] .mail-header { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .mail-search { background: #263830; }
[data-theme="dark"] .sync-state { border-color: #2e4438; }
[data-theme="dark"] .app-nav .current { background: #223229; }
[data-theme="dark"] .sidebar { background: #192f24; }
[data-theme="dark"] .secondary:hover { background: #fff; color: #1a201d; border-color: #cbd3cd; }
[data-theme="dark"] .compose-main { background: #2e5040; color: #eaf2ec; }
[data-theme="dark"] .nav-item { color: #d8ece0; }
[data-theme="dark"] .nav-item.active { background: #223229; color: #eaf2ec; }
[data-theme="dark"] .nav-item svg, [data-theme="dark"] .sidebar-link svg { color: #8ab5a0; }
[data-theme="dark"] .nav-item.active svg { color: #eaf2ec; }
[data-theme="dark"] .sidebar-section { border-color: #2e4438; }
[data-theme="dark"] .sidebar-section strong { color: #8ab5a0; }
[data-theme="dark"] .sidebar-link { color: #d8ece0; }
[data-theme="dark"] .folders-toggle { color: #d8ece0; }
[data-theme="dark"] .folders-toggle:hover { background: #223229; color: #eaf2ec; }
[data-theme="dark"] .folder-chevron { color: #8ab5a0; }
[data-theme="dark"] .folder-action { color: #8ab5a0; }
[data-theme="dark"] .folder-action:hover { background: #223229; color: #eaf2ec; }
[data-theme="dark"] .custom-folder-button { color: #d8ece0; }
[data-theme="dark"] .custom-folder-button.active { background: #223229; color: #eaf2ec; }
[data-theme="dark"] .list-pane { background: #1a2822; }
[data-theme="dark"] .list-toolbar { background: #263830; }
[data-theme="dark"] .tool-button { color: #8ab5a0; }
[data-theme="dark"] .bulk-bar { background: #1e3828; border-color: #2e5040; }
[data-theme="dark"] .bulk-action-btn { background: #263830; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .bulk-move-select { background: #263830; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .message { background: #263830; }
[data-theme="dark"] .message:hover { background: #2d4a3a; }
[data-theme="dark"] .message.selected { background: #1e3828; }
[data-theme="dark"] .message time { color: #6a9a80; }
[data-theme="dark"] .msg-lock, [data-theme="dark"] .msg-attachment { color: #5a8a70; }
[data-theme="dark"] .msg-star { color: #4a7060; }
[data-theme="dark"] .empty { background: #263830; }
[data-theme="dark"] .empty-icon { color: #3a6050; }
[data-theme="dark"] .load-more-btn { background: #263830; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .reading-pane { background: #1e2d27; }
[data-theme="dark"] .reader-tools { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .reader-action-btn { color: #d8ece0; }
[data-theme="dark"] .reader-action-btn:hover { background: #2d4a3a; color: #eaf2ec; }
[data-theme="dark"] .reader-move-select { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .reader-enc-e2e { background: #0d3a22; color: #6dd9a8; }
[data-theme="dark"] .reader-enc-verified { background: #0d3a22; color: #6dd9a8; }
[data-theme="dark"] .reader-enc-external { background: #2a2010; color: #c8a050; }
[data-theme="dark"] .reader-attachment-btn { background: #263830; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .reader-attachment-btn:hover { background: #2d4a3a; }
[data-theme="dark"] .attachment-size { color: #6a9a80; }
[data-theme="dark"] .reader-empty { color: #5a8a70; }
[data-theme="dark"] .reader-empty-icon { color: #2e4438; }
[data-theme="dark"] .reader-scroll { background: #1e2d27; }

/* Change password modal form */
.change-password-form { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.cp-label { color: #3b403d; display: flex; flex-direction: column; font-size: var(--fs-body-large); gap: 6px; }
.cp-input { border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; font-size: var(--fs-body-large); padding: 9px 12px; width: 100%; }
.cp-input:focus { border-color: #1D6617; outline: none; }
.cp-hint { color: #7a867f; font-size: var(--fs-body); line-height: 1.5; margin: 0; }
.cp-actions { display: flex; gap: 12px; margin-top: 6px; }
.cp-actions .settings-primary { margin-top: 0; font-size: var(--fs-body); min-height: 34px; }

/* Encryption keys fingerprint */
.enc-fingerprint { flex-direction: column !important; align-items: flex-start !important; gap: 4px; padding: 10px 0; }
.fp-code { background: #f0f2f0; border-radius: 6px; color: #2a4035; font-size: var(--fs-small); letter-spacing: .06em; padding: 6px 10px; word-break: break-all; }

/* Toast notification — see bottom of file for full system */

/* Pref toggle rows (messages-composing, email-privacy) */
.pref-desc { color: #7a867f; font-size: var(--fs-small); line-height: 1.4; margin: 2px 0 0; }
.pref-row { align-items: flex-start !important; }

/* Email privacy toggle rows */
.ep-block { display: flex; flex-direction: column; gap: 0; }
.ep-toggle-row { align-items: flex-start; border-top: 1px solid #eaf0ec; display: flex; gap: 16px; justify-content: space-between; padding: 20px 0; }
.ep-block .ep-toggle-row:first-of-type { border-top: none; }
.ep-toggle-left { flex: 1; min-width: 0; }
.ep-label-row { align-items: center; display: flex; gap: 6px; margin-bottom: 6px; }
.ep-label-row strong { color: #1a2e22; font-size: var(--fs-body-large); font-weight: 600; }
.ep-desc { color: #7a867f; font-size: var(--fs-small); line-height: 1.5; margin: 0; }
.ep-info-btn { background: none; border: none; color: #9ab5a6; cursor: pointer; flex-shrink: 0; height: 20px; padding: 0; position: relative; width: 20px; display: flex; align-items: center; justify-content: center; }
.ep-info-btn:hover { color: #073B05; }
.ep-tooltip { background: #1a2e22; border-radius: 10px; bottom: calc(100% + 8px); color: #dbe9e1; font-size: var(--fs-small); font-weight: 400; left: 50%; line-height: 1.5; max-width: 280px; min-width: 200px; opacity: 0; padding: 10px 14px; pointer-events: none; position: absolute; transform: translateX(-50%); transition: opacity .15s; white-space: normal; width: max-content; z-index: 40; }
.ep-tooltip::after { border: 6px solid transparent; border-top-color: #1a2e22; bottom: -12px; content: ""; left: 50%; margin-left: -6px; position: absolute; }
.ep-tooltip.visible { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .ep-label-row strong { color: #eaf2ec; }
[data-theme="dark"] .ep-desc { color: #6a9a80; }
[data-theme="dark"] .ep-toggle-row { border-top-color: #2e4438; }
[data-theme="dark"] .ep-info-btn { color: #4a7060; }
[data-theme="dark"] .ep-info-btn:hover { color: #6dd9a8; }

/* Home section quick-action links */
.home-action-link { background: none; color: #073B05; font-size: var(--fs-body-large); padding: 0; text-align: left; text-decoration: underline; }
.home-action-link:hover { color: #0d7a48; }

/* Compact sidebar */
.mailbox.compact-sidebar { grid-template-columns: 56px minmax(0, 1fr); }
.mailbox.compact-sidebar .sidebar { padding: 8px 4px; gap: 10px; }
.mailbox.compact-sidebar #current-address,
.mailbox.compact-sidebar .sidebar h2,
.mailbox.compact-sidebar .sidebar-section,
.mailbox.compact-sidebar .folders-panel { display: none; }
.mailbox.compact-sidebar .compose-main { border-radius: 50%; font-size: 0; height: 36px; justify-self: center; min-height: unset; padding: 0; width: 36px; }
.mailbox.compact-sidebar .nav-item { font-size: 0; gap: 0; justify-content: center; padding: 8px; position: relative; }
.mailbox.compact-sidebar .nav-badge:not(.hidden) { display: block; font-size: var(--fs-caption); min-width: 16px; padding: 1px 4px; position: absolute; right: 4px; top: 4px; }

/* Dark mode additions */
[data-theme="dark"] .pref-desc { color: #6a9a80; }
[data-theme="dark"] .fp-code { background: #223229; color: #8ab5a0; }
[data-theme="dark"] .enc-fingerprint span { color: #8ab5a0; }
[data-theme="dark"] .home-action-link { color: #6dd9a8; }
[data-theme="dark"] .home-action-link:hover { color: #9fedc8; }
[data-theme="dark"] .settings-content h1 { color: #eaf2ec; }
[data-theme="dark"] .settings-lede { color: #8ab5a0; }
[data-theme="dark"] .sec-desc { color: #8ab5a0; }
[data-theme="dark"] .identity-form label { color: #8ab5a0; }
[data-theme="dark"] .identity-form textarea { background: #223229; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .totp-input { background: #223229; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .cred-card { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .cred-name { color: #eaf2ec; }
[data-theme="dark"] .cred-date { color: #6a9a80; }
[data-theme="dark"] .cred-btn { background: transparent; border-color: #2e4438; color: #8ab5a0; }
[data-theme="dark"] .cred-btn:hover { background: #223229; }

/* Recovery option rows (Proton-style clickable list) */
/* Recovery page spans the full settings width */
.settings-content:has(.rec-option-list) { max-width: none; padding-right: clamp(24px, 3vw, 48px); }
.settings-content:has(.rec-option-list) .rec-option-list { max-width: none; }
.settings-content:has(.rec-option-list) .sec-desc { max-width: none; }
.rec-option-list { border: 1px solid #e4ebe6; border-radius: 14px; margin-top: 16px; max-width: 720px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,40,30,.04); }
.rec-option-row { align-items: center; background: white; border-bottom: 1px solid #eef2ef; cursor: pointer; display: flex; justify-content: space-between; padding: 16px 18px; transition: background .12s; }
.rec-option-row:last-child { border-bottom: none; }
.rec-option-row:hover { background: #f5f9f6; }
.rec-option-left { align-items: center; display: flex; gap: 14px; min-width: 0; }
.rec-option-icon { align-items: center; color: #3a5249; display: flex; flex-shrink: 0; height: 24px; width: 24px; }
.rec-option-icon svg { height: 22px; width: 22px; }
.rec-option-label { color: #1f2c26; font-size: var(--fs-body-large); font-weight: 600; }
.rec-option-right { align-items: center; display: flex; gap: 10px; }
.rec-option-status { align-items: center; display: flex; font-size: var(--fs-body); gap: 10px; }
.rec-chevron { color: #b3c1ba; display: flex; flex-shrink: 0; }
.rec-note { color: #6a7a72; font-size: var(--fs-body); white-space: nowrap; }
/* Status pills */
.rec-pill { align-items: center; border-radius: 999px; display: inline-flex; font-size: var(--fs-body); font-weight: 700; gap: 5px; padding: 4px 12px 4px 9px; white-space: nowrap; }
.rec-pill svg { flex-shrink: 0; }
.rec-pill-on { background: #d8f3e6; color: #0c7a47; }
.rec-pill-warn { background: #fdeccd; color: #9a6500; }
.rec-badge-warn { background: #fff3e0; border-radius: 6px; color: #8b5e00; font-size: var(--fs-small); font-weight: 600; letter-spacing: .03em; padding: 3px 10px; }
/* ── Email verification sub-page ─────────────────────────────────── */
.evp-header { align-items: center; display: flex; gap: 14px; margin-bottom: 18px; }
.evp-back-btn { align-items: center; background: none; border: none; border-radius: 8px; color: #3d4840; cursor: pointer; display: flex; padding: 6px 8px; }
.evp-back-btn:hover { background: #edf4f0; color: #073B05; }
.evp-title { font-size: clamp(var(--fs-h4), 1.8vw, var(--fs-h3)); font-weight: 700; letter-spacing: -.01em; margin: 0; }
.evp-desc { color: #5d6860; font-size: var(--fs-body); line-height: 1.6; margin: 0 0 10px; max-width: 560px; }
.evp-warn { color: #3d4840; font-size: var(--fs-body); line-height: 1.6; margin: 0 0 22px; max-width: 560px; }
.evp-card { background: #fff; border: 1px solid #dce8e2; border-radius: 12px; margin-bottom: 14px; max-width: 560px; overflow: hidden; padding: 18px 20px; }
.evp-card-label { color: #2a3530; font-size: var(--fs-body); font-weight: 700; margin-bottom: 10px; }
.evp-learn { color: #073B05; cursor: pointer; text-decoration: underline; }
/* Device data backup sub-page */
.settings-content:has(.dbp-card) { max-width: none; padding-right: clamp(24px, 3vw, 48px); }
.evp-hero { align-items: flex-start; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 8px; }
.evp-hero .evp-desc { max-width: 620px; }
.dbp-illo { flex-shrink: 0; }
.dbp-card { background: #fff; border: 1px solid #dce8e2; border-radius: 16px; margin-top: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,40,30,.04); }
.dbp-row { align-items: center; display: flex; gap: 16px; justify-content: space-between; padding: 20px 24px; }
.dbp-row + .dbp-row { border-top: 1px solid #eef2ef; }
.dbp-row-title { color: #1f2c26; font-size: var(--fs-body-large); font-weight: 700; }
.dbp-stored { align-items: center; color: #1f2c26; display: flex; font-size: var(--fs-body-large); gap: 12px; }
.dbp-stored-check { align-items: center; background: #1D6617; border-radius: 50%; color: #fff; display: flex; flex-shrink: 0; height: 22px; justify-content: center; width: 22px; }
.dbp-stored-off { background: #c9342f; }
.evp-email-row { align-items: center; display: flex; gap: 10px; }
.evp-email-input { background: #f4f8f5; border: 1px solid #d0dfd8; border-radius: 8px; color: #1a1f1d; flex: 1; font-size: var(--fs-body); padding: 9px 12px; outline: none; }
.evp-email-input[readonly] { cursor: default; }
.evp-email-input-active { background: #fff; border-color: #1D6617; box-shadow: 0 0 0 3px rgba(29,102,23,.12); cursor: text; }
.evp-icon-btn { align-items: center; background: none; border: none; border-radius: 7px; color: #7a9a8a; cursor: pointer; display: flex; padding: 7px; }
.evp-icon-btn:hover { background: #edf4f0; color: #3d4840; }
.evp-icon-btn-danger:hover { background: #fdf0ee; color: #c0392b; }
.evp-err { color: #c0392b; font-size: var(--fs-small); margin: 6px 0 0; }
.evp-save-row { display: flex; gap: 8px; margin-top: 12px; }
.evp-save-btn { background: #1D6617; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 8px 18px; }
.evp-save-btn:hover { background: #159958; }
.evp-save-btn:disabled { opacity: .6; cursor: default; }
.evp-cancel-btn { background: none; border: 1px solid #c8d4ce; border-radius: 8px; color: #5d6860; cursor: pointer; font-size: var(--fs-small); padding: 8px 14px; }
.evp-cancel-btn:hover { background: #f0f5f2; }
.evp-verified-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.evp-verified-badge { align-items: center; background: #d4f5e6; border-radius: 20px; color: #0d7a48; display: inline-flex; font-size: var(--fs-small); font-weight: 600; gap: 5px; padding: 4px 12px; }
/* Saved but not yet code-checked. Amber, matching the "Add an email address"
   attention pills on the Recovery index, so pending never reads as done. */
.evp-pending-badge { align-items: center; background: #fdf0d5; border-radius: 20px; color: #8a5a00; display: inline-flex; font-size: var(--fs-small); font-weight: 600; gap: 5px; padding: 4px 12px; }
.evp-add-link { background: none; border: none; color: #073B05; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 0; }
.evp-add-link:hover { text-decoration: underline; }
.evp-toggle-card { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.evp-toggle-left { flex: 1; }
.evp-toggle-title { color: #2a3530; font-size: var(--fs-body); font-weight: 700; margin-bottom: 4px; }
.evp-toggle-desc { color: #5d6860; font-size: var(--fs-small); line-height: 1.5; }
.evp-action-card { padding: 0; overflow: hidden; }
.evp-action-btn { align-items: center; background: #1D6617; border: none; border-radius: 0; color: #fff; cursor: pointer; display: flex; font-size: var(--fs-body); font-weight: 600; gap: 8px; padding: 16px 20px; width: 100%; }
.evp-action-btn:hover { background: #159958; }
.evp-action-btn-outline { background: none; border: none; border-radius: 0; color: #073B05; }
.evp-action-btn-outline:hover { background: #f0faf5; color: #159958; }
.evp-emergency-row { align-items: center; border-bottom: 1px solid #dce8e2; display: flex; justify-content: space-between; padding: 12px 4px; }
.evp-emergency-row:last-child { border-bottom: none; }
.evp-emergency-name { color: #2a3530; font-size: var(--fs-body); }
[data-theme="dark"] .evp-toggle-title { color: #eaf2ec; }
[data-theme="dark"] .evp-toggle-desc { color: #8ab5a0; }
[data-theme="dark"] .evp-action-btn-outline { color: #4ade80; }
[data-theme="dark"] .evp-action-btn-outline:hover { background: #1a2e22; }
[data-theme="dark"] .evp-emergency-row { border-color: #2e4438; }
[data-theme="dark"] .evp-emergency-name { color: #eaf2ec; }

/* ── SMS verification page phone picker ──────────────────────────────── */
.svp-phone-row { display: flex; }
.svp-country-wrap { flex-shrink: 0; position: relative; }
.svp-country-btn {
  align-items: center; background: #f4f8f5; border: 1px solid #d0dfd8; border-right: 0;
  border-radius: 8px 0 0 8px; color: #2a3530; cursor: pointer; display: flex;
  font-size: var(--fs-body); gap: 5px; height: 42px; padding: 0 10px; white-space: nowrap;
}
.svp-country-btn:hover { background: #edf4f0; }
.svp-flag { font-size: var(--fs-h4); line-height: 1; }
.svp-dial { font-size: var(--fs-small); font-weight: 600; min-width: 32px; }
.svp-country-menu {
  background: #fff; border: 1px solid #d0dfd8; border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.13); max-height: 264px; overflow-y: auto;
  position: absolute; top: calc(100% + 6px); left: 0; width: 236px; z-index: 60;
}
.svp-country-opt {
  align-items: center; background: none; border: none; border-bottom: 1px solid #f0f5f2;
  cursor: pointer; display: flex; font-size: var(--fs-small); gap: 8px; padding: 9px 12px;
  text-align: left; width: 100%;
}
.svp-country-opt:last-child { border-bottom: none; }
.svp-country-opt:hover { background: #f5f9f6; }
.svp-country-opt.active { background: #ebf7f2; color: #0d7a48; }
.svp-country-name { color: #6b8070; flex: 1; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svp-number-input {
  border: 1px solid #d0dfd8; border-radius: 0 8px 8px 0; color: #1a1f1d; flex: 1;
  font-size: var(--fs-body-large); height: 42px; min-width: 0; outline: none; padding: 0 12px;
}
.svp-number-input:focus { border-color: #1D6617; box-shadow: 0 0 0 3px rgba(29,102,23,.1); position: relative; z-index: 1; }
.svp-number-input::placeholder { color: #a0b4ac; }
.svp-add-btn {
  align-items: center; background: #1D6617; border: none; border-radius: 8px; color: #fff;
  cursor: pointer; display: inline-flex; font-size: var(--fs-body); font-weight: 700; gap: 7px;
  min-height: 38px; padding: 0 18px; transition: background .14s;
}
.svp-add-btn:hover { background: #165412; }
.svp-add-btn:disabled { opacity: .55; cursor: default; }
.svp-remove-btn { color: #c0392b !important; border-color: #f0ccc8 !important; }
.svp-remove-btn:hover { background: #fdf0ee !important; }

[data-theme="dark"] .svp-country-btn { background: #1a2e22; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .svp-country-btn:hover { background: #223229; }
[data-theme="dark"] .svp-country-menu { background: #1a2e22; border-color: #2e4438; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
[data-theme="dark"] .svp-country-opt { border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .svp-country-opt:hover { background: #2d4a3a; }
[data-theme="dark"] .svp-country-opt.active { background: #1e3828; color: #6dd9a8; }
[data-theme="dark"] .svp-country-name { color: #6a9a80; }
[data-theme="dark"] .svp-number-input { background: #1a2e22; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .svp-number-input:focus { border-color: #5c7a2a; }
[data-theme="dark"] .svp-number-input::placeholder { color: #4a7060; }
[data-theme="dark"] .evp-back-btn { color: #b0ccc0; }
[data-theme="dark"] .evp-back-btn:hover { background: #2a3e32; color: #4ade80; }
[data-theme="dark"] .evp-title { color: #eaf2ec; }
[data-theme="dark"] .evp-desc { color: #8ab5a0; }
[data-theme="dark"] .evp-warn { color: #b0ccc0; }
[data-theme="dark"] .evp-card { background: #1a2e22; border-color: #2e4438; }
[data-theme="dark"] .evp-card-label { color: #eaf2ec; }
[data-theme="dark"] .evp-email-input { background: #142018; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .evp-email-input-active { background: #1a2e22; border-color: #5c7a2a; }
[data-theme="dark"] .evp-icon-btn { color: #6a9a7a; }
[data-theme="dark"] .evp-icon-btn:hover { background: #2a3e32; color: #eaf2ec; }
[data-theme="dark"] .evp-icon-btn-danger:hover { background: #3e2420; color: #f08070; }
[data-theme="dark"] .evp-cancel-btn { border-color: #2e4438; color: #8ab5a0; }
[data-theme="dark"] .evp-cancel-btn:hover { background: #2a3e32; }
[data-theme="dark"] .evp-verified-badge { background: #0d3a22; color: #3fb950; }
[data-theme="dark"] .evp-pending-badge { background: #3a2c0d; color: #d9a441; }
/* The light-mode #073B05 is 1.12:1 on the dark card — effectively invisible.
   #3fb950 is the green already used for dark-mode badge text, at 5.67:1. */
[data-theme="dark"] .evp-add-link { color: #3fb950; }
[data-theme="dark"] .evp-toggle-title { color: #eaf2ec; }
[data-theme="dark"] .evp-toggle-desc { color: #8ab5a0; }
[data-theme="dark"] .dbp-card { background: #1a2e22; border-color: #2e4438; }
[data-theme="dark"] .dbp-row + .dbp-row { border-color: #2e4438; }
[data-theme="dark"] .dbp-row-title { color: #eaf2ec; }
[data-theme="dark"] .dbp-stored { color: #eaf2ec; }
[data-theme="dark"] .evp-learn { color: #4ade80; }

/* Toggle dialog + emergency contacts list */
.rec-toggle-row { align-items: center; display: flex; justify-content: space-between; margin: 16px 0 4px; }
.rec-emergency-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.rec-emergency-item { align-items: center; background: #f5f9f6; border: 1px solid #e4ebe6; border-radius: 8px; display: flex; justify-content: space-between; padding: 8px 12px; }
.rec-emergency-remove { background: none; border: 0; color: #b8344a; cursor: pointer; font-size: var(--fs-small); font-weight: 600; }
.rec-emergency-remove:hover { text-decoration: underline; }

[data-theme="dark"] .rec-option-list { border-color: #2e4438; }
[data-theme="dark"] .rec-option-row { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .rec-option-row:hover { background: #2d4a3a; }
[data-theme="dark"] .rec-option-label { color: #eaf2ec; }
[data-theme="dark"] .rec-option-icon { color: #8fc6ab; }
[data-theme="dark"] .rec-option-status { color: #6a9a80; }
[data-theme="dark"] .rec-note { color: #8ab5a0; }
[data-theme="dark"] .rec-pill-on { background: #0d3a22; color: #6dd9a8; }
[data-theme="dark"] .rec-pill-warn { background: #2a1e00; color: #e0b066; }
[data-theme="dark"] .rec-badge-warn { background: #2a1e00; color: #d4a560; }
[data-theme="dark"] .rec-emergency-item { background: #1f2d27; border-color: #2e4438; }

/* Account & password section — Proton-inspired row layout */
.acct-block { border: 1px solid #e6ede9; border-radius: 14px; overflow: hidden; padding: 0; margin-top: 28px; }
.acct-block-title { border-bottom: 1px solid #e6ede9; font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; margin: 0; padding: 16px 22px; }
.acct-danger-block { border-color: #f5ddd9; }
.acct-danger-title { border-bottom-color: #f5ddd9; color: #b03020; }
.acct-section-desc { color: #5d6860; font-size: var(--fs-body); line-height: 1.55; margin: 0; padding: 14px 22px 0; }
.acct-table { display: flex; flex-direction: column; }
.acct-row { align-items: center; border-top: 1px solid #e6ede9; display: grid; grid-template-columns: 220px 1fr auto; min-height: 56px; padding: 0 22px; transition: background .12s; }
.acct-row:hover { background: #f9fbfa; }
.acct-row-editing { background: #f2faf6 !important; border-left: 3px solid #1D6617; padding-left: 19px; }
.acct-label { color: #3d4840; font-size: var(--fs-body); font-weight: 600; }
.acct-value { color: #5d6860; font-size: var(--fs-body); display: flex; align-items: center; gap: 10px; }
.acct-action { display: flex; align-items: center; justify-content: flex-end; min-width: 100px; }
.acct-mono { color: #25201d; font-family: ui-monospace, 'SF Mono', monospace; font-size: var(--fs-small); letter-spacing: .02em; }
.acct-muted { color: #9da8a2; font-style: italic; }
.acct-dn-text { color: #25201d; font-size: var(--fs-body); }
.acct-edit-link { background: none; border: none; color: #073B05; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 2px 0; text-decoration: none; }
.acct-edit-link:hover { text-decoration: underline; }
.acct-inline-form { align-items: center; display: flex; gap: 8px; flex-wrap: wrap; }
.acct-inline-input { border: 1px solid #b2ccc0; border-radius: 7px; color: #1a1f1d; font-size: var(--fs-body); outline: none; padding: 6px 10px; width: 190px; }
.acct-inline-input:focus { border-color: #1D6617; box-shadow: 0 0 0 3px rgba(29,102,23,.12); }
.acct-inline-save { background: #1D6617; border: none; border-radius: 7px; color: #fff; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 6px 14px; }
.acct-inline-save:hover { background: #159958; }
.acct-inline-save:disabled { opacity: .6; cursor: default; }
.acct-inline-cancel { background: none; border: 1px solid #c8d4ce; border-radius: 7px; color: #5d6860; cursor: pointer; font-size: var(--fs-small); padding: 6px 12px; }
.acct-inline-cancel:hover { background: #f0f5f2; }
.acct-inline-status { color: #c0392b; font-size: var(--fs-small); }
.acct-change-btn { align-items: center; background: none; border: 1px solid #c8d4ce; border-radius: 8px; color: #3d4840; cursor: pointer; display: flex; font-size: var(--fs-small); font-weight: 500; gap: 6px; padding: 7px 12px; white-space: nowrap; }
.acct-change-btn:hover { background: #f0f5f2; border-color: #a0b8ae; }
.acct-info-icon { background: none; border: none; color: #9da8a2; cursor: default; font-size: var(--fs-body); line-height: 1; padding: 0; }
.acct-info-icon:hover { color: #073B05; }
.acct-status-badge { border-radius: 6px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; padding: 3px 9px; text-transform: uppercase; white-space: nowrap; }
.acct-badge-on { background: #d4f5e6; color: #0d7a48; }
.acct-badge-off { background: #f0f2f1; color: #7a867f; }
.acct-label-wrap { display: flex; align-items: center; gap: 6px; }
.acct-right { display: flex; align-items: center; gap: 12px; }
.acct-count-label { color: #7a8e86; font-size: var(--fs-small); }
[data-theme="dark"] .acct-count-label { color: #6a8e7a; }
.acct-delete-btn { background: none; border: 1.5px solid #c0392b; border-radius: 8px; color: #c0392b; cursor: pointer; font-size: var(--fs-body); font-weight: 500; margin: 16px 22px 18px; padding: 9px 20px; }
.acct-delete-btn:hover { background: #fdf0ee; }
.acct-delete-warn { background: #fff5f4; border-radius: 8px; border: 1px solid #f5ddd9; color: #6b2018; font-size: var(--fs-body); line-height: 1.55; margin: 0 0 18px; padding: 12px 16px; }
[data-theme="dark"] .acct-block { border-color: #2e4438; }
[data-theme="dark"] .acct-block-title { border-bottom-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .acct-row { border-top-color: #2e4438; }
[data-theme="dark"] .acct-row:hover { background: #2d4a3a; }
[data-theme="dark"] .acct-row-editing { background: #1e3828 !important; }
[data-theme="dark"] .acct-label { color: #b0ccc0; }
[data-theme="dark"] .acct-value { color: #8ab5a0; }
[data-theme="dark"] .acct-mono { color: #eaf2ec; }
[data-theme="dark"] .acct-dn-text { color: #eaf2ec; }
[data-theme="dark"] .acct-inline-input { background: #223229; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .acct-section-desc { color: #8ab5a0; }
[data-theme="dark"] .acct-danger-block { border-color: #3e2420; }
[data-theme="dark"] .acct-danger-title { color: #d07060; }

/* ── Password eye toggle ─────────────────────────────────────────── */
.pw-field-wrap { position: relative; display: flex; align-items: center; }
.pw-field-wrap input { padding-right: 42px; }
.pw-eye-btn { position: absolute; right: 10px; background: none; border: none; color: #8a9a92; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 5px; }
.pw-eye-btn:hover { color: #073B05; background: rgba(7,59,5,.08); }
.password-field .pw-eye-btn { position: static; padding: 0 12px; color: var(--green-dark); }
.password-field .pw-eye-btn:hover { color: var(--green); background: none; }

/* ── Auth footer (Back + Trouble link) ───────────────────────────── */
.auth-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; gap: 8px; }
.trouble-link { background: none; border: none; color: #073B05; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 4px 0; text-decoration: none; }
.trouble-link:hover { text-decoration: underline; }

/* ── Recovery flow panel ─────────────────────────────────────────── */
.recovery-flow { display: flex; flex-direction: column; gap: 0; }
.rec-flow-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.rec-back-btn { align-items: center; background: none; border: 1px solid #dde4df; border-radius: 8px; color: #4d5e57; cursor: pointer; display: flex; font-size: var(--fs-small); font-weight: 600; gap: 4px; padding: 6px 12px; }
.rec-back-btn:hover { background: #f4f7f5; border-color: #b8ccc3; }
.rec-steps { align-items: center; display: flex; gap: 0; }
.rec-step { align-items: center; background: #e8eeed; border-radius: 50%; color: #8a9e96; display: flex; font-size: var(--fs-small); font-weight: 700; height: 26px; justify-content: center; width: 26px; }
.rec-step.active { background: #1D6617; color: white; }
.rec-step.done { background: #d4f5e6; color: #0d7a48; }
.rec-step-line { background: #e0eae4; height: 2px; width: 22px; }
.rec-step-line.active { background: #1D6617; }
.rec-title { font-size: clamp(var(--fs-body-large), 1.6vw, var(--fs-h3)); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; color: #1a201d; }
.rec-desc { color: #5d6e66; font-size: var(--fs-body); line-height: 1.55; margin: 0 0 18px; }
.rec-tabs { border-bottom: 2px solid #e8eeed; display: flex; gap: 0; margin-bottom: 18px; }
.rec-tab { background: none; border: none; border-bottom: 2px solid transparent; color: #6b7c74; cursor: pointer; font-size: var(--fs-body); font-weight: 600; margin-bottom: -2px; padding: 8px 20px 10px; }
.rec-tab.active { border-bottom-color: #073B05; color: #073B05; }
.rec-form { display: flex; flex-direction: column; gap: 14px; }
.rec-label { color: #344153; display: flex; flex-direction: column; font-size: var(--fs-body); font-weight: 600; gap: 8px; }
.rec-input { border: 1.5px solid #d4dad6; border-radius: 10px; color: #1a201d; font-size: var(--fs-body-large); outline: none; padding: 10px 12px; width: 100%; background: white; }
.rec-input:focus { border-color: #1D6617; box-shadow: 0 0 0 3px rgba(29,102,23,.12); }
.rec-code-input { font-family: ui-monospace, monospace; font-size: var(--fs-h3); letter-spacing: .18em; text-align: center; }
.rec-primary-btn { background: #1D6617; border: none; border-radius: 10px; color: white; cursor: pointer; font-size: var(--fs-body-large); font-weight: 700; min-height: 44px; padding: 0 18px; transition: background .15s; width: 100%; }
.rec-primary-btn:hover { background: #159958; }
.rec-primary-btn:disabled { opacity: .6; cursor: default; }
.rec-error { color: #c0392b; font-size: var(--fs-small); min-height: 1em; margin: 0; }
.rec-hint-badge { align-items: center; background: #f0faf5; border: 1px solid #b8e8d4; border-radius: 8px; color: #1a6645; display: flex; font-size: var(--fs-small); gap: 6px; margin: 0 0 6px; padding: 9px 12px; }
.rec-phone-note { color: #c0392b; font-size: var(--fs-small); margin: 0; min-height: 1em; }
.rec-resend { color: #6b7c74; font-size: var(--fs-small); margin: 0; text-align: center; }
.rec-resend-btn { background: none; border: none; color: #073B05; cursor: pointer; font-size: var(--fs-small); font-weight: 600; padding: 0; }
.rec-resend-btn:disabled { color: #8a9e96; cursor: default; }
.rec-warn-box { align-items: flex-start; background: #fff8ee; border: 1px solid #f5ddaa; border-radius: 9px; color: #7a4e00; display: flex; font-size: var(--fs-small); gap: 8px; line-height: 1.5; margin-bottom: 6px; padding: 11px 14px; }
.rec-warn-box svg { flex-shrink: 0; margin-top: 1px; stroke: #c08020; }
.rec-strength { align-items: center; background: #f0f4f2; border-radius: 3px; display: flex; gap: 8px; height: 3px; margin-top: -6px; overflow: visible; position: relative; width: 100%; }
.rec-strength-label { color: #6b7c74; font-size: var(--fs-small); font-weight: 600; position: absolute; right: 0; top: 6px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — FULL SITE COVERAGE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Site header ── */
[data-theme="dark"] .site-header { background: rgba(30,45,39,0.97); border-color: #2e4438; }
[data-theme="dark"] .brand { color: #eaf2ec; }
[data-theme="dark"] .pill { background: #1e3828; color: #6dd9a8; }
[data-theme="dark"] .cta-link { background: rgba(38,56,48,.8); border-color: rgba(15,143,87,.3); color: #eaf2ec; }
[data-theme="dark"] .cta-link:hover { background: #263830; border-color: rgba(15,143,87,.5); }
[data-theme="dark"] .cta-link span { color: #eaf2ec; }

/* ── Landing page ── */
[data-theme="dark"] .landing {
  background:
    linear-gradient(135deg, rgba(15,143,87,.08) 0%, transparent 38%),
    linear-gradient(180deg, #1e2d27 0%, #192822 100%);
}
[data-theme="dark"] .privacy-cta p { color: #9abcac; }
[data-theme="dark"] .stat-value { color: #eaf2ec; }
[data-theme="dark"] .stat-label { color: #8ab5a0; }
[data-theme="dark"] .privacy-card { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .privacy-card h2 { color: #eaf2ec; }
[data-theme="dark"] .privacy-card p { color: #b0ccc0; }
[data-theme="dark"] .privacy-card li { color: #9abcac; }
[data-theme="dark"] .privacy-card li span { color: #6dd9a8; }

/* ── Sign-in page ── */
[data-theme="dark"] .signin-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(15,143,87,.08), transparent 30%),
    linear-gradient(180deg, #1e2d27 0%, #192822 100%);
}
[data-theme="dark"] .signin-copy h2 { color: #eaf2ec; }
[data-theme="dark"] .signin-copy p { color: #8ab5a0; }
[data-theme="dark"] .auth-card { background: rgba(255,255,255,0.98); border-color: rgba(15,143,87,0.15); box-shadow: 0 28px 64px rgba(0,0,0,.45); }
[data-theme="dark"] .signin-copy .eyebrow { color: #6dd9a8; }
[data-theme="dark"] #register-note,
[data-theme="dark"] .auth-card .note { color: #5a7060; }
[data-theme="dark"] .auth-toggle { color: var(--green); }
[data-theme="dark"] .trouble-link { color: var(--green); }
[data-theme="dark"] .rec-back-btn { background: transparent; border-color: #2e4438; color: #b0ccc0; }
[data-theme="dark"] .rec-back-btn:hover { background: #263830; }
[data-theme="dark"] .rec-step { background: #263830; color: #8ab5a0; }
[data-theme="dark"] .rec-step.done { background: #1e3828; color: #6dd9a8; }
[data-theme="dark"] .rec-step-line { background: #2e4438; }
[data-theme="dark"] .rec-title { color: #eaf2ec; }
[data-theme="dark"] .rec-desc { color: #8ab5a0; }
[data-theme="dark"] .rec-label { color: #b0ccc0; }
[data-theme="dark"] .rec-input { background: #1e2d27; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .rec-hint-badge { background: #1e3828; border-color: #2e5040; color: #6dd9a8; }
[data-theme="dark"] .rec-warn-box { background: #281e00; border-color: #4a3800; color: #c8a050; }
[data-theme="dark"] .rec-resend { color: #6a9a80; }
[data-theme="dark"] .rec-strength { background: #2e4438; }
[data-theme="dark"] .rec-strength-label { color: #6a9a80; }
[data-theme="dark"] .rec-tabs { border-color: #2e4438; }
[data-theme="dark"] .rec-tab { color: #8ab5a0; }
[data-theme="dark"] .rec-tab.active { border-bottom-color: #6dd9a8; color: #6dd9a8; }

/* ── Create account page ── */
[data-theme="dark"] .create-account-page { background: #1e2d27; }
[data-theme="dark"] .create-account-header { background: rgba(30,45,39,.97); border-color: #2e4438; }
[data-theme="dark"] .create-account-brand { color: #eaf2ec; }
[data-theme="dark"] .create-account-hero h1 { color: #eaf2ec; }
[data-theme="dark"] .create-account-hero p { color: #8ab5a0; }
[data-theme="dark"] .create-account-shell { background: #1e2d27; }
[data-theme="dark"] .username-field,
[data-theme="dark"] .password-field { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .username-field input,
[data-theme="dark"] .password-field input { color: #eaf2ec; background: transparent; }
[data-theme="dark"] .username-field span,
[data-theme="dark"] .password-field span { color: #6a9a80; border-color: #2e4438; }
[data-theme="dark"] .create-account-form label { color: #b0ccc0; }
[data-theme="dark"] .create-account-login { color: #8ab5a0; }
[data-theme="dark"] .create-account-terms { color: #6a9a80; }
[data-theme="dark"] .create-account-terms a { color: #6dd9a8; }
[data-theme="dark"] .privacy-card { background: #263830; border-color: #2e4438; }

/* ── Plans page ── */
[data-theme="dark"] .plans-page { background: #1e2d27; }
[data-theme="dark"] .plans-page.business-mode {
  background:
    linear-gradient(145deg, rgba(15,143,87,.1), transparent 34%),
    linear-gradient(180deg, #1a2f24 0%, #1e2d27 56%, #192822 100%);
}
[data-theme="dark"] .plans-segmented,
[data-theme="dark"] .plans-billing-toggle { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .plans-tab,
[data-theme="dark"] .plans-billing-option { color: #8ab5a0; }
[data-theme="dark"] .plans-tab.active,
[data-theme="dark"] .plans-billing-option.active { background: #1e2d27; color: #eaf2ec; }
[data-theme="dark"] .plans-billing-badge { color: #6dd9a8; }
[data-theme="dark"] .plan-card { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .plan-card-heading h2 { color: #eaf2ec; }
[data-theme="dark"] .plan-card-heading p { color: #8ab5a0; }
[data-theme="dark"] .plan-price { color: #eaf2ec; }
[data-theme="dark"] .plan-price-unit { color: #eaf2ec; }
[data-theme="dark"] .plan-price-old { color: #5a8a70; }
[data-theme="dark"] .plan-features li { color: #9abcac; }
[data-theme="dark"] .plan-features li::before { color: #6dd9a8; }
[data-theme="dark"] .plan-discount-badge { background: #1e3828; color: #6dd9a8; }
[data-theme="dark"] .plan-button-outline { background: #263830; border-color: var(--green); color: #eaf2ec; }
[data-theme="dark"] .plan-button-outline:hover { background: #2d4a3a; }
[data-theme="dark"] .plan-button-secondary { background: #263830; border-color: var(--green); color: #eaf2ec; }
[data-theme="dark"] .plans-back-button { color: #6dd9a8; }
[data-theme="dark"] .plans-back-button:hover { background: rgba(15,143,87,.1); }
[data-theme="dark"] .business-plans-title { color: #eaf2ec; }
[data-theme="dark"] .product-icon { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .product-icons-split > div:first-child { border-color: #2e4438; }
[data-theme="dark"] .plan-card-recommended { border-color: #6dd9a8; }
/* Embedded plans in settings */
[data-theme="dark"] .settings-plans-embed .plan-card { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .settings-plans-embed .plan-card-heading h2 { color: #eaf2ec; }
[data-theme="dark"] .settings-plans-embed .plan-features li { color: #9abcac; }
[data-theme="dark"] .settings-plans-embed .plans-segmented,
[data-theme="dark"] .settings-plans-embed .plans-billing-toggle { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .settings-plans-embed .plans-tab,
[data-theme="dark"] .settings-plans-embed .plans-billing-option { color: #8ab5a0; }
[data-theme="dark"] .settings-plans-embed .plans-tab.active,
[data-theme="dark"] .settings-plans-embed .plans-billing-option.active { background: #1e2d27; color: #eaf2ec; }

/* ── Compose (new rich-text design) ── */
[data-theme="dark"] .compose { background: #263830; }
[data-theme="dark"] .compose-fields { border-color: #2e4438; }
[data-theme="dark"] .compose-field-row { border-color: #2e4438; }
[data-theme="dark"] .compose-field-lbl { color: #6a9a80; }
[data-theme="dark"] .compose-field-input { color: #eaf2ec; }
[data-theme="dark"] .compose-field-input::placeholder { color: #4a7060; }
[data-theme="dark"] .compose-from-addr { color: #eaf2ec; background: none; }
[data-theme="dark"] .alias-row { background: #1e3828; border-color: #2e4438; }
[data-theme="dark"] .alias-label { color: #eaf2ec; }
[data-theme="dark"] .alias-local-input { background: #1a2e24; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .alias-local-input:focus { border-color: #5c9a7a; }
[data-theme="dark"] .alias-domain-select { background: #1a2e24; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .alias-domain-select:focus { border-color: #5c9a7a; }
[data-theme="dark"] .alias-at { color: #6a9a80; }
[data-theme="dark"] .alias-empty { color: #6a9a80; }
[data-theme="dark"] .alias-no-domains { color: #6a9a80; }
[data-theme="dark"] .alias-domain-link { color: #6dd9a8; }
[data-theme="dark"] .compose-cc-toggle { border-color: #2e4438; color: #8ab5a0; }
[data-theme="dark"] .compose-cc-toggle:hover,
[data-theme="dark"] .compose-cc-toggle.active { background: #1e3828; border-color: #5c7a2a; color: #6dd9a8; }
[data-theme="dark"] .compose-toolbar { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .compose-tb-sep { background: #2e4438; }
[data-theme="dark"] .compose-font-select,
[data-theme="dark"] .compose-size-select { color: #eaf2ec; background: transparent; }
[data-theme="dark"] .compose-font-select:hover,
[data-theme="dark"] .compose-size-select:hover { background: #2d4a3a; }
[data-theme="dark"] .compose-tb-btn { color: #b0ccc0; }
[data-theme="dark"] .compose-tb-btn:hover { background: #2d4a3a; border-color: #3a5548; }
[data-theme="dark"] .compose-tb-btn.active { background: #1e3828; border-color: #5c7a2a; color: #6dd9a8; }
[data-theme="dark"] .compose-body { background: #263830; color: #eaf2ec; }
[data-theme="dark"] .compose-body:empty::before { color: #4a7060; }
[data-theme="dark"] .compose-body blockquote { border-left-color: #5c7a2a; color: #8ab5a0; }
[data-theme="dark"] .compose-bottom-bar { background: #1e2d27; border-color: #2e4438; }
[data-theme="dark"] .compose-bottom-btn { color: #8ab5a0; }
[data-theme="dark"] .compose-bottom-btn:hover { background: #2d4a3a; border-color: #3a5548; }
[data-theme="dark"] .compose-draft-btn { background: transparent; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .compose-draft-btn:hover { background: #2d4a3a; }
[data-theme="dark"] .compose-attach-label { border-color: #2e4438; color: #8ab5a0; }
[data-theme="dark"] .compose-attachment-item { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .compose-attachment-remove { color: #6a9a80; }
[data-theme="dark"] .compose-popup { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .compose-align-opt { color: #b0ccc0; }
[data-theme="dark"] .compose-align-opt:hover { background: #2d4a3a; }
[data-theme="dark"] .compose-emoji-btn-item:hover { background: #2d4a3a; }
[data-theme="dark"] .compose-subject-input { color: #eaf2ec; }
[data-theme="dark"] .secure-link-result { background: #1e3828; border-color: #2e5040; color: #6dd9a8; }
[data-theme="dark"] .secure-link-result a { color: #6dd9a8; }

/* ── Secure link page ── */
[data-theme="dark"] .secure-link-page {
  background:
    linear-gradient(135deg, rgba(15,143,87,.08), transparent 36%),
    linear-gradient(180deg, #1e2d27 0%, #192822 100%);
}
[data-theme="dark"] .secure-link-card { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .secure-link-card h1 { color: #eaf2ec; }
[data-theme="dark"] .secure-link-meta { color: #8ab5a0; }
[data-theme="dark"] .secure-link-message h2 { color: #eaf2ec; }
[data-theme="dark"] .secure-link-message p { color: #b0ccc0; }
[data-theme="dark"] .secure-link-message { border-color: #2e4438; }

/* ── Recovery flow in dark mode ── */
[data-theme="dark"] .recovery-flow { color: #eaf2ec; }
[data-theme="dark"] .pw-eye-btn { color: #5a8a70; }
[data-theme="dark"] .pw-eye-btn:hover { color: #6dd9a8; background: rgba(24,165,102,.12); }

/* ── Toast notification system ── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px 13px 14px;
  border-radius: 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(21,29,44,.12), 0 1px 4px rgba(21,29,44,.07);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink);
  pointer-events: all;
  opacity: 0;
  transform: translateX(16px);
  transition: none;
  will-change: opacity, transform;
}
.toast.toast-in {
  animation: toast-enter .22s cubic-bezier(.25,.8,.25,1) forwards;
}
.toast.toast-out {
  animation: toast-leave .18s ease-in forwards;
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-leave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

.toast-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-icon svg { width: 18px; height: 18px; }

.toast-success .toast-icon { color: var(--green); }
.toast-error   .toast-icon { color: #c0392b; }
.toast-warning .toast-icon { color: #b45309; }
.toast-info    .toast-icon { color: #2563eb; }

.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid #c0392b; }
.toast-warning { border-left: 3px solid #d97706; }
.toast-info    { border-left: 3px solid #3b82f6; }

.toast-msg { flex: 1; }

.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: var(--fs-body-large);
  line-height: 1;
  color: var(--muted);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  margin-top: -1px;
  margin-right: -2px;
  padding: 0;
}
.toast-close:hover { background: var(--line); color: var(--ink); }

/* ── Confirm dialog ── */
.toast-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,29,44,.45);
  backdrop-filter: blur(2px);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: toast-confirm-in .16s ease;
}
.toast-confirm-overlay.toast-confirm-out {
  animation: toast-confirm-out .14s ease forwards;
}
@keyframes toast-confirm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes toast-confirm-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.toast-confirm-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(21,29,44,.18);
  padding: 24px 24px 20px;
  width: 340px;
  max-width: calc(100vw - 32px);
  animation: toast-confirm-rise .18s cubic-bezier(.25,.8,.25,1);
}
@keyframes toast-confirm-rise {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);    opacity: 1; }
}

.toast-confirm-msg {
  margin: 0 0 20px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

.toast-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.toast-confirm-cancel {
  padding: 9px 16px;
  font-size: var(--fs-small);
}

.toast-confirm-ok {
  padding: 9px 16px;
  font-size: var(--fs-small);
  border-radius: 9px;
  font-weight: 600;
}

.toast-confirm-danger {
  background: #c0392b;
  color: #fff;
  border-radius: 9px;
}
.toast-confirm-danger:hover { background: #a32929; }

/* ── Dark mode toasts ── */
[data-theme="dark"] .toast {
  background: #1e2a24;
  border-color: #2e4438;
  color: #eaf2ec;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] .toast-close:hover { background: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .toast-confirm-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .toast-confirm-box { background: #1e2a24; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .toast-confirm-msg { color: #eaf2ec; }
.flex-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   EcoVerse redesign — structural UI overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── Site header ── */
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid #e0ddd8; }
.brand-mark { border-radius: 10px; box-shadow: 0 4px 12px rgba(42,56,24,.30); }
.pill { background: #d8e8b0; color: #3d5018; font-weight: 600; }
.header-signin { background: #0DCE04; color: #000; box-shadow: 0 6px 16px rgba(13,206,4,.22); }
.header-signin:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Landing hero ── */
.hero { padding-top: clamp(32px, 6vw, 72px); }
.hero h1 { line-height: 1.02; letter-spacing: -.02em; }
.cta-primary { background: #0DCE04; color: #000; font-weight: 700; letter-spacing: .01em; }
.cta-primary:hover { background: #09b503; }

/* ── Auth card ── */
.auth-card { border-color: #c4bba6; border-radius: 24px; box-shadow: 0 32px 80px rgba(28,36,18,.14); padding: 36px 32px; }
.tabs { background: #efefef; border-radius: 12px; }
.tab.active { box-shadow: 0 2px 8px rgba(28,36,18,.12); }

/* ── Mailbox header: dark forest ── */
.mail-header { background: #1D6617; border-bottom: 1px solid rgba(255,255,255,.07); color: #0DCE04; }
.mail-brand { color: #0DCE04; font-style: italic; }
.mail-brand-mark { border-radius: 9px; }
.mail-search { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; color: #0DCE04; height: 38px; }
.mail-search input { color: #0DCE04; }
.mail-search input::placeholder { color: rgba(139,208,42,.55); }
.sync-state { border-right-color: rgba(255,255,255,.12); color: #0DCE04; }
.sync-state strong { color: #0DCE04; }
.app-nav span { color: #0DCE04; border-radius: 8px; }
.app-nav .current { background: rgba(255,255,255,.13); color: #0DCE04; font-weight: 700; }

/* ── Sidebar: cream editorial panel ── */
.sidebar { background: #f4efe3; border-right: 1px solid #c4bba6; gap: 8px; }
.compose-main {
  background: #0DCE04; border-radius: 12px; color: #073B05;
  font-weight: 800; font-size: var(--fs-body-large); letter-spacing: .01em;
  height: 46px; box-shadow: 0 4px 12px rgba(42,56,24,.28);
}
.compose-main:hover { background: #7ab81f; box-shadow: 0 6px 20px rgba(42,56,24,.36); }
.sidebar h2 { color: #073B05; font-size: var(--fs-caption); letter-spacing: .12em; }
.nav-item { color: #073B05; border-radius: 10px; padding: 10px 12px; font-size: var(--fs-body); gap: 10px; }
.nav-item:hover { background: rgba(7,59,5,.08); color: #1c2412; }
.nav-item.active { background: rgba(7,59,5,.12); color: #1c2412; font-weight: 700; }
.nav-item svg, .sidebar-link svg { color: #073B05; }
.nav-item.active svg { color: #073B05; }
.nav-badge { background: #1D6617; color: #fff; }
.sidebar-section { border-top-color: #c4bba6; }
.sidebar-section strong { color: #073B05; }
.sidebar-link { color: #073B05; }
.sidebar-link svg { color: #073B05; }
.folders-toggle { color: #073B05; border-radius: 10px; }
.folders-toggle:hover { background: rgba(7,59,5,.08); color: #1c2412; }
.folder-chevron { color: #073B05; }
.folder-action { color: #073B05; border-radius: 8px; }
.folder-action:hover { background: rgba(7,59,5,.10); color: #073B05; }
.custom-folder-button { color: #073B05; border-radius: 8px; }
.custom-folder-button.active { background: rgba(7,59,5,.12); color: #1c2412; }
.no-folders { color: #9aab8a; }
.folder-add-input { background: #fff; border-color: #c4bba6; color: #073B05; }
.sidebar .secondary {
  background: transparent; border: 1px solid #b0c078;
  color: #3d5018; border-radius: 10px; font-weight: 600;
}
.sidebar .secondary:hover { background: rgba(92,122,42,.08); border-color: #8aaa40; color: #073B05; }

/* ── List pane: warm canvas + card rows ── */
.list-pane { background: #f5f8f3; padding: 10px 12px 12px 6px; }
.list-toolbar {
  background: #f4efe3; border: 1px solid #c4bba6; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(28,36,18,.06); margin-bottom: 8px;
  min-height: 50px; padding: 0 16px;
}
.list-toolbar h1 { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-h4); color: #1c2412; font-weight: 700; letter-spacing: -.01em; }
.tool-button { color: #073B05; font-size: var(--fs-h3); }
.messages { gap: 5px; }
.message {
  background: #f4efe3; border: 1px solid rgba(196,187,166,.55);
  border-radius: 12px; box-shadow: 0 1px 4px rgba(28,36,18,.05);
  min-height: 60px; padding: 11px 14px 11px 10px;
  transition: box-shadow .14s ease, background .12s ease, transform .12s ease;
}
.message:hover { background: #faf6ee; box-shadow: 0 4px 18px rgba(28,36,18,.11); border-color: #c4bba6; transform: translateY(-1px); }
.message.selected { background: #dce8b8; border-color: #b0c870; }
.message.selected:hover { background: #dce8b8; transform: none; }
.message.unread { background: #ffffff; box-shadow: inset 3px 0 0 #073B05, 0 1px 4px rgba(28,36,18,.08); }
.empty { background: #f4efe3; border: 1px solid rgba(196,187,166,.5); border-radius: 14px; margin-top: 8px; }
.empty-title { font-family: Georgia, serif; color: #1c2412; }
.bulk-bar { background: #dce8b8; border-color: #b0c870; border-radius: 10px; }

/* ── Reading pane: full-width editorial view ── */

/* Expand reader to fill right side when open */
.mailbox.has-reader .list-pane { display: none; }
.mailbox.has-reader {
  grid-template-areas: "header header" "sidebar reader";
  grid-template-columns: 280px minmax(0, 1fr);
}

.reading-pane { background: #f5f8f3; }
.reader-scroll { background: #f5f8f3; }
.reader-empty { background: #f5f8f3; }
.reader-empty h2 { font-family: Georgia, serif; color: #1c2412; }

/* Hide the back bar — sidebar always visible on desktop */
.reader-back-bar { display: none; }

/* Toolbar: compact, full-width */
.reader-tools {
  background: #f4efe3;
  border-bottom: 1px solid #c4bba6;
  min-height: 56px;
  padding: 0 28px;
  gap: 12px;
}
.reader-tools-left { gap: 4px; }
.reader-tools-right { gap: 2px; margin-left: auto; }

/* Left side: Reply/Forward keep icon+text */
.reader-tools-left .reader-action-btn {
  background: transparent;
  border: 1px solid rgba(92,122,42,.25);
  border-radius: 8px;
  color: #3d5018;
  font-size: var(--fs-small);
  font-weight: 600;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
}
.reader-tools-left .reader-action-btn:hover { background: #dce8b8; border-color: #8aaa40; color: #073B05; }
.reader-tools-left .reader-action-btn svg { height: 15px; width: 15px; }

/* Right side: action buttons icon-only */
.reader-tools-right .reader-action-btn {
  border-radius: 8px;
  color: #073B05;
  font-size: 0;
  gap: 0;
  min-height: 36px;
  padding: 0 10px;
}
.reader-tools-right .reader-action-btn svg { height: 17px; width: 17px; }
.reader-tools-right .reader-action-btn:hover { background: #dce8b8; color: #073B05; }
.reader-action-danger:hover { background: rgba(180,50,40,.10) !important; color: #b03020 !important; }

/* Move-to select */
.reader-move-select { border-color: rgba(92,122,42,.25); border-radius: 8px; color: #3d5018; font-size: var(--fs-small); }

/* Content area — full width, editorial */
.reader-content {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  max-width: 780px;
  padding: 36px 48px 40px;
  width: 100%;
}

/* Large serif subject */
.reader-content h2 {
  color: #1c2412;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 22px;
}

/* Sender card — Gmail-style */
.reader-meta {
  background: #f4efe3;
  border: 1px solid #c4bba6;
  border-radius: 12px;
  margin-bottom: 28px;
  padding: 14px 18px;
}
.reader-meta strong { color: #1c2412; font-size: var(--fs-body); }
.reader-meta time { color: #6a7850; font-size: var(--fs-small); }
.reader-addr-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reader-addr-row { align-items: baseline; display: flex; gap: 6px; font-size: var(--fs-small); }
.reader-addr-label { color: #6a7850; flex-shrink: 0; font-weight: 600; width: 32px; }
.reader-addr-wrap { display: inline-block; min-width: 0; position: relative; }
.reader-addr-pill {
  background: none; border: none; color: #1c2412; cursor: pointer;
  font-size: var(--fs-body); font-weight: 700; max-width: 320px; overflow: hidden;
  padding: 0; text-decoration: underline dotted; text-overflow: ellipsis; white-space: nowrap;
}
.reader-addr-pill:hover { color: #073B05; }
.reader-meta-right { align-items: center; display: flex; flex-shrink: 0; gap: 10px; }
.reader-star-btn, .reader-inbox-btn {
  align-items: center; background: none; border: none; color: #9ab5a6;
  cursor: pointer; display: flex; height: 22px; justify-content: center; padding: 0; width: 22px;
}
.reader-star-btn { font-size: 18px; }
.reader-inbox-btn svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 18px; }
.reader-star-btn:hover, .reader-inbox-btn:hover { color: #073B05; }
.reader-star-btn.active { color: #e0a52e; }
.org-dropdown-menu.align-left { left: 0; min-width: 200px; right: auto; white-space: nowrap; }

/* Body text */
#reader-body { color: #2a3018; font-size: 15px; line-height: 1.72; }


/* ── Compose window ── */
.compose-header { background: #073B05; border-radius: 16px 16px 0 0; }
.compose { box-shadow: 0 -6px 48px rgba(42,56,24,.16), 0 0 0 1px rgba(0,0,0,.07); }
.compose-toolbar { background: #f0ebe0; border-top-color: #c4bba6; }
.compose-bottom-bar { background: #f0ebe0; border-top-color: #c4bba6; }
.compose-send-btn { background: #1D6617; border-radius: 10px; }
.compose-send-btn:hover { background: #165412; }

/* ── Settings sidebar ── */
.settings-sidebar { background: #073B05; }
.settings-back { background: #3d5018; border-radius: 8px; }
.settings-brand-mark { border-radius: 7px; }
.settings-grid { background: radial-gradient(circle, #b8d870 3px, transparent 4px) 0 0 / 15px 15px; }
.settings-nav p { color: #7a9a50; }
.settings-nav button { color: #c0d0a8; }
.settings-nav button.active, .settings-nav button:hover { background: rgba(255,255,255,.10); color: #ede8d8; }
.settings-nav button svg { color: #7a9a50; }
.settings-nav .settings-icon-row.active { background: rgba(255,255,255,.13); font-weight: 700; color: #ede8d8; }
.settings-storage span { background: linear-gradient(90deg, #1D6617 0 74%, rgba(255,255,255,.15) 74%); }
.settings-storage small:first-of-type { color: #b8d870; }
.settings-main { background: #f4efe3; }
.settings-topbar { border-bottom: 1px solid #c4bba6; background: #f4efe3; }
.settings-search { background: #e8e2d6; }
.upgrade-button { background: #f4efe3; border-color: #1D6617; color: #073B05; font-weight: 600; }

/* ── Plans page ── */
.plans-page { background: #f5f8f3; }
.plan-card { background: #ffffff; border-color: #d0d0d0; }
.plan-card:hover { box-shadow: 0 12px 40px rgba(28,36,18,.12); }
.plan-card-recommended { border-color: #0DCE04; border-width: 2px; }
.plan-recommended-bar { background: #0DCE04; color: #000000; }
.plan-button-solid { background: #0DCE04; box-shadow: 0 18px 30px rgba(13,206,4,.25); color: #000000; }
.plan-button-solid:hover { background: #09b503; }
.plan-button-outline { background: #e8e8e8; border-color: #0DCE04; }
.plan-button-outline:hover { background: #dcdcdc; }
.plans-billing-badge { color: #1D6617; }
.plan-savings { color: #1D6617; }
.plan-features li { color: #000000; font-weight: 700; }
.plan-features li::before { color: #0DCE04; }

/* ── Toast overrides ── */
.toast { background: #efefef; border-color: #d8d8d8; }
.toast-success .toast-icon { color: #1D6617; }
.toast-success { border-left-color: #1D6617; }

/* ═══════════════════════════════════════════════════════════════
   EcoVerse Physical Layout v3 — structural spatial redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Landing: bold editorial hero ── */
.landing { padding: 0; }
.hero { padding: clamp(40px,8vw,96px) clamp(24px,8vw,112px) 0; }
.hero h1 {
  font-size: clamp(44px, 5.8vw, 76px);
  letter-spacing: -0.028em;
  line-height: 1.0;
  max-width: 860px;
}
.privacy-cta p { font-size: clamp(var(--fs-body-large), 1.6vw, 21px); max-width: 620px; }
.cta-primary {
  border-radius: 8px;
  font-size: var(--fs-h4);
  font-weight: 700;
  min-height: 56px;
  padding: 0 44px;
}
.cta-link { border-radius: 8px; min-height: 50px; padding: 0 28px; }

/* ── Site header ── */
.header-signin { border-radius: 8px; min-height: 40px; padding: 0 20px; }

/* ── Mailbox: 3-pane layout already set in base grid above ── */
/* Override list-pane and reading-pane area assignments */
.list-pane { grid-area: list; }
.reading-pane {
  border-left: 1px solid rgba(196,187,166,.7);
  display: flex;
  flex-direction: column;
  grid-area: reader;
  overflow: hidden;
}

/* ── Mailbox header items ── */
.mail-brand { font-size: 19px; gap: 10px; }
.mail-search { border-radius: 10px; height: 40px; }

/* ── Sidebar: generous editorial spacing ── */
.sidebar { padding: 16px 16px 16px 20px; gap: 12px; }
.compose-main {
  border-radius: 10px;
  font-size: var(--fs-body-large);
  font-weight: 700;
  height: auto;
  letter-spacing: 0.015em;
  min-height: 52px;
  padding: 0 18px;
  text-align: left;
  width: 100%;
}
.nav-item {
  border-radius: 10px;
  font-size: var(--fs-body);
  gap: 13px;
  min-height: 44px;
  padding: 11px 14px;
}
.nav-item svg, .sidebar-link svg { height: 19px; width: 19px; }
.folders-toggle { border-radius: 10px; min-height: 40px; padding: 0 14px; }
.sidebar .secondary { border-radius: 8px; min-height: 40px; padding: 0 14px; font-size: var(--fs-body); }

/* ── Message list toolbar ── */
.list-toolbar { border-radius: 12px; min-height: 52px; padding: 0 18px; }
.list-toolbar h1 { font-family: Georgia, serif; font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }

/* ── Message rows: 2-row editorial card layout ── */
.messages { gap: 6px; }
.message {
  align-items: center;
  border-radius: 14px;
  gap: 0 12px;
  grid-template-columns: 20px 42px minmax(0, 1fr);
  min-height: 74px;
  padding: 12px 16px 12px 12px;
}
.msg-avatar { border-radius: 10px; font-size: var(--fs-small); height: 38px; width: 38px; }

/* 2-row grid inside each message-open button */
.message-open {
  align-items: center;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  padding: 2px 0;
  text-align: left;
  width: 100%;
}
.message .address {
  color: #1c2412;
  font-size: var(--fs-body);
  font-weight: 700;
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message .preview {
  display: flex;
  flex-direction: column;
  gap: 1px;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.message .subject {
  color: #073B05;
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message .body {
  color: #6a7850;
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 5px;
  grid-column: 2;
  grid-row: 1 / 3;
  justify-content: center;
  min-width: 52px;
}
.message time { color: #6a7850; font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.msg-star { font-size: var(--fs-body-large); padding: 1px; }
.message .address { font-weight: 400; }
.message .subject { font-weight: 400; }
.message.unread .address { color: #1c2412; font-weight: 800; }
.message.unread .subject { font-weight: 700; }

/* ── Reading pane panel ── */
.reader-tools { flex-shrink: 0; min-height: 54px; padding: 0 16px; }
.reader-scroll { flex: 1; overflow-y: auto; }
.reader-content { margin: 20px 16px 0; padding: 28px 28px 36px; }
.reader-content h2 { font-size: clamp(var(--fs-h4), 1.8vw, var(--fs-h2)); line-height: 1.15; margin: 0 0 16px; }
.reader-empty { height: 100%; padding: 56px 24px; }

/* ── Auth card: editorial proportions ── */
.auth-card { border-radius: 20px; padding: 40px 36px; }
.tabs { margin-bottom: 28px; }
.tab { font-size: var(--fs-body); height: 40px; }
input, textarea { border-radius: 10px; font-size: var(--fs-body); padding: 11px 14px; }
.primary { border-radius: 8px; font-size: var(--fs-body-large); font-weight: 700; min-height: 48px; }
.return-home { border-radius: 8px; }
.create-account-primary { border-radius: 8px; font-size: var(--fs-body-large); min-height: 48px; }
.create-account-signin { border-radius: 8px; }

/* ── Settings: match sidebar width ── */
.settings-page { grid-template-columns: 280px minmax(0, 1fr); }

/* ── Responsive: collapse reader to 2-pane on medium screens ── */
@media (max-width: 1200px) {
  .mailbox {
    grid-template-areas: "header header" "sidebar list";
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: 72px calc(100vh - 72px);
  }
  .mail-header { grid-template-columns: 260px minmax(160px, 360px) 1fr auto; }
  .reading-pane { display: none !important; }
}

/* ── Responsive: compact for mobile (supplements existing block) ── */
@media (max-width: 900px) {
  .mailbox { grid-template-rows: auto auto minmax(300px, auto); }
  .mail-header { min-height: 64px; }
  .compose-main { min-height: 46px; }
  .message { min-height: 64px; padding: 10px 14px 10px 10px; }
  .settings-page { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Settings page — editorial redesign
   Flipped: cream sidebar + dark banner header + card content
   ═══════════════════════════════════════════════════════════════ */

.settings-page {
  background: #f5f8f3;
  grid-template-columns: 300px minmax(0, 1fr);
}

/* ── Sidebar: cream editorial index panel ── */
.settings-sidebar {
  background: #f4efe3;
  border-right: 1px solid #c4bba6;
  color: #1c2412;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
}

/* Brand header — dark forest, matches mail header */
.settings-brand {
  align-items: center;
  background: #1D6617;
  display: flex;
  gap: 12px;
  height: 72px;
  flex-shrink: 0;
  padding: 0 20px;
}
.settings-brand strong {
  color: #0DCE04;
  font-style: italic;
  font-size: var(--fs-body-large);
  font-weight: 700;
}
.settings-grid { display: none; }

/* Back button — matches compose-main green button */
.settings-back {
  background: #0DCE04;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(42,56,24,.28);
  color: #073B05;
  font-size: var(--fs-body-large);
  font-weight: 800;
  height: 46px;
  letter-spacing: .01em;
  margin: 14px 14px 4px;
  padding: 0 18px;
  text-align: center;
  width: calc(100% - 28px);
}
.settings-back:hover { background: #7ab81f; box-shadow: 0 6px 20px rgba(42,56,24,.36); }

/* Nav scroll container */
.settings-nav {
  gap: 2px;
  overflow-y: auto;
  padding: 4px 14px 8px;
}

/* Category headings — match sidebar h2 */
.settings-nav p {
  color: #073B05;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .12em;
  margin: 12px 8px 4px;
  text-transform: uppercase;
}

/* Nav items — identical to mailbox-view nav-item */
.settings-nav button,
.settings-nav .settings-icon-row {
  align-items: center;
  background: transparent;
  border-radius: 10px;
  color: #52525b;
  display: flex;
  font-size: var(--fs-body);
  font-weight: 400;
  gap: 13px;
  min-height: 40px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
.settings-nav button svg,
.settings-nav .settings-icon-row svg {
  color: #a1a1aa;
  fill: none;
  flex-shrink: 0;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 18px;
}
.settings-nav button:hover,
.settings-nav .settings-icon-row:hover {
  background: rgba(0,0,0,.04);
  color: #52525b;
}
.settings-nav button.active,
.settings-nav .settings-icon-row.active {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
  color: #18181b;
  font-weight: 600;
}
.settings-nav button.active svg,
.settings-nav .settings-icon-row.active svg { color: #16a34a; }

/* Storage bar at bottom */
.settings-storage {
  border-top: 1px solid #c4bba6;
  color: #6a7850;
  font-size: var(--fs-small);
  gap: 8px;
  margin-top: auto;
  padding: 20px 24px;
}
.settings-storage span {
  background: linear-gradient(90deg, #1D6617 0 74%, #c4bba6 74%);
  border-radius: 4px;
  height: 4px;
}
.settings-storage small:first-of-type { color: #3d5018; font-weight: 700; }

/* ── Main panel: dark banner header + cream card content ── */
.settings-main {
  background: #f5f8f3;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* Dark forest banner replaces the thin topbar */
.settings-topbar {
  align-items: center;
  background: #073B05;
  border-bottom: none;
  color: #ede8d8;
  display: flex;
  gap: 16px;
  grid-template-columns: unset;
  height: 72px;
  padding: 0 32px;
}
.settings-search {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #ede8d8;
  flex: 1;
  font-size: var(--fs-body);
  gap: 10px;
  height: 42px;
  max-width: 480px;
  padding: 0 16px;
}
.settings-search input { color: #ede8d8; font-size: var(--fs-body); }
.settings-search input::placeholder { color: #7a9a50; }
.upgrade-button {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 8px;
  color: #d8e8b0;
  font-size: var(--fs-body);
  font-weight: 600;
  height: 40px;
  padding: 0 18px;
  white-space: nowrap;
}
.upgrade-button:hover { background: rgba(255,255,255,.20); color: #ede8d8; }
.settings-account { color: #073B05; font-size: var(--fs-small); text-align: right; }
.settings-account span { color: #073B05; }
.settings-avatar {
  background: #1D6617;
  border: none;
  border-radius: 10px;
  color: #ede8d8;
  font-size: var(--fs-body-large);
  font-weight: 700;
  height: 38px;
  width: 38px;
}

/* Content panel: lifted card on the canvas */
.settings-content {
  background: #f4efe3;
  border: 1px solid #c4bba6;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(28,36,18,.08);
  margin: 28px 28px 28px 12px;
  max-width: 700px;
}
body.mailbox-view .settings-content,
body.settings-view .settings-content {
  padding: 56px;
}
.settings-content h1 {
  color: #1c2412;
  font-family: Georgia, serif;
  font-size: clamp(var(--fs-h3), 2.2vw, var(--fs-h2));
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.settings-lede {
  color: #5c6b42;
  font-size: var(--fs-body-large);
  line-height: 1.6;
  margin: 0 0 28px;
}
.settings-lede a { color: #073B05; }
.settings-block { margin-top: 20px; }

/* ── Mass email finder ──────────────────────────────────────────────────── */
/* NOTE: --ink and --line are deliberately NOT used in this block. Both flip to
   light values under [data-theme="dark"], but this panel's surface
   (--im-canvas) has no dark variant and stays #f0f0f2 — so the tokens would
   paint light text on a light background. Literals only for those two. The
   --green* tokens are safe: they have no dark override.

/* CSP here is style-src 'self' with no unsafe-inline, so every rule the
   lead-finder UI needs must live here as a real class — inline style=""
   attributes are silently dropped by the browser, not just discouraged.
   That is also why the confidence meter's width is a pre-generated 5%-step
   class rather than a computed inline width.

   Colours are drawn from the app's own tokens (--ink / --green-dark / --line)
   rather than the one-off greens this panel used to carry. Every text pair
   below was measured against the panel surface #f4efe3: body/secondary text
   clears 4.5:1 and UI strokes clear 3:1. */
/* Panel header. Previously injected as `<h1 style="...">` inside innerHTML,
   which this page's CSP silently drops — leaving the title unstyled and
   invisible against the dark theme's inherited text colour. Real classes. */
.lf-page-head { margin-bottom: 20px; }
.lf-page-title { color: #1c2412; font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; margin: 0 0 6px; }
.lf-page-lede { color: #5c6b42; font-size: var(--fs-body-large); line-height: 1.5; margin: 0 0 20px; max-width: 62ch; }

.lf-row { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 8px; }
.lf-field { flex: 2; min-width: 220px; }
.lf-field-narrow { min-width: 140px; flex: 1; }
.lf-field-count input { width: 90px; }
.lf-label { color: #4a5636; display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 4px; }
.lf-label .lf-hint { color: #5c6b42; font-weight: 400; }
.lf-mode-block { margin-top: 10px; }
.lf-segmented { border: 1px solid #c4bba6; border-radius: 8px; display: inline-flex; overflow: hidden; }
.lf-seg { background: #fff; border: none; color: #1c2412; cursor: pointer; font: inherit; font-size: var(--fs-small); padding: 7px 12px; transition: background .18s ease, color .18s ease; }
.lf-seg + .lf-seg { border-left: 1px solid #c4bba6; }
.lf-seg:hover { background: var(--green-light); }
.lf-seg.on { background: var(--green-dark); color: #fff; }
.lf-seg:focus-visible, .lf-chip:focus-visible, .lf-filter:focus-visible,
.lf-select:focus-visible, .lf-send-btn:focus-visible, .lf-btn-sm:focus-visible {
  outline: 2px solid var(--green-dark); outline-offset: 2px;
}
.lf-mode-hint { color: #5c6b42; font-size: var(--fs-small); margin: 6px 0 0; }
/* Plain inline-block flow, not flex. As flex items these labels could shrink
   below their nowrap content width and overlap each other; inline-block simply
   wraps to the next line when it runs out of room. */
.lf-toggles { margin-top: 10px; }
/* Deliberately NOT display:flex. These labels hold bare text nodes alongside
   the checkbox, and flex turns each text run into its own item that wraps
   independently — which shattered "Verify deliverability / DNS MX, no SMTP
   probing" into stacked fragments. Block keeps the text as normal inline flow. */
.lf-toggle { color: #4a5636; cursor: pointer; display: inline-block; font-size: var(--fs-small); font-weight: 600; margin: 0 22px 6px 0; white-space: nowrap; }
/* The global `input, textarea { width: 100% }` rule also catches checkboxes,
   which made this one compute to 305px and shove its own label out of the box.
   Checkboxes must be reset to their intrinsic width. */
.lf-toggle input[type="checkbox"],
.lf-tmpl-html-label input[type="checkbox"] { width: auto; }
.lf-toggle input { margin-right: 6px; vertical-align: middle; }
.lf-toggle .lf-hint { color: #5c6b42; font-weight: 400; }

/* Run row + live readout ------------------------------------------------- */
.lf-run-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lf-readout { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.lf-stat { display: flex; flex-direction: column; line-height: 1.15; }
.lf-stat-label { color: #5c6b42; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; }
/* Tabular figures so the counters don't jitter as they tick upward. */
.lf-stat-val { color: #1c2412; font-size: var(--fs-body-large); font-variant-numeric: tabular-nums; font-weight: 600; }
.lf-status-row { align-items: baseline; display: flex; gap: 8px; margin: 10px 0 0; min-height: 18px; }
.lf-status { color: #5c6b42; font-size: var(--fs-small); margin: 0; }
/* State is carried by the text as well as the dot's colour — never colour alone. */
.lf-dot { border-radius: 50%; flex: none; height: 7px; transform: translateY(-1px); width: 7px; }
.lf-dot-idle { background: #c4bba6; }
.lf-dot-running { animation: lf-pulse 1.1s ease-in-out infinite; background: var(--green-dark); }
.lf-dot-done { background: var(--green-dark); }
.lf-dot-error { background: #a3341f; }
@keyframes lf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.lf-hidden { display: none; }

/* Ledger ----------------------------------------------------------------- */
.lf-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lf-toolbar-spacer { flex: 1; }
.lf-filter { border: 1px solid #c4bba6; border-radius: 6px; font-size: var(--fs-small); min-width: 140px; padding: 6px 8px; }
.lf-chips { display: inline-flex; gap: 4px; }
.lf-chip { background: #fff; border: 1px solid #c4bba6; border-radius: 999px; color: #1c2412; cursor: pointer; font: inherit; font-size: var(--fs-caption); padding: 5px 10px; transition: background .18s ease, color .18s ease; }
.lf-chip:hover { background: var(--green-light); }
.lf-chip.on { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.lf-select-label { color: #4a5636; font-size: var(--fs-small); }
.lf-select { background: #fff; border: 1px solid #c4bba6; border-radius: 6px; font-size: var(--fs-small); margin-left: 4px; padding: 5px 8px; }
.lf-count { color: #1c2412; font-size: var(--fs-body); }
/* Explicit colours rather than inheriting .secondary: the global dark-theme
   rules would otherwise give these light text on this always-light surface. */
.lf-btn-sm { background: #fff; border: 1px solid #c4bba6; color: #1c2412; font-size: var(--fs-small); min-height: 30px; padding: 0 12px; }
.lf-btn-sm:hover { background: var(--green-light); }
.lf-table-wrap { overflow-x: auto; }
.lf-table { border-collapse: collapse; font-size: var(--fs-small); min-width: 860px; table-layout: fixed; width: 100%; }
/* Type needs ~95px at the 860px min-width so the "personal" pill isn't
   ellipsed; the width taken back comes from Company and Phone, which wrap
   gracefully. Sums to 100. */
.lf-col-idx { width: 4%; } .lf-col-email { width: 20%; } .lf-col-type { width: 11%; }
.lf-col-conf { width: 12%; } .lf-col-src { width: 7%; } .lf-col-co { width: 14%; }
.lf-col-phone { width: 11%; } .lf-col-dom { width: 13%; } .lf-col-action { width: 8%; }
.lf-table th { border-bottom: 1px solid #c4bba6; color: #4a5636; font-weight: 600; padding: 6px 8px; text-align: left; }
.lf-table td { border-bottom: 1px solid #e6e0d0; color: #1c2412; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap; }
.lf-table tbody tr:hover td { background: #faf7ef; }
.lf-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.lf-table td.muted { color: #616e46; }
.lf-table td a { color: var(--green-dark); }
.lf-type-tag { border-radius: 999px; font-size: var(--fs-caption); padding: 2px 8px; }
.lf-type-tag.role { background: var(--green-light); color: #33450f; }
.lf-type-tag.personal { background: #ece5f7; color: #4a2f7a; }
.lf-conf { align-items: center; display: flex; gap: 6px; }
.lf-conf-track { background: #e0dac9; border-radius: 3px; flex: 1; height: 5px; overflow: hidden; }
.lf-conf-fill { background: var(--green-dark); height: 100%; }
.lf-conf-fill.low { background: #8a6a12; }
.lf-conf-fill-0 { width: 0%; } .lf-conf-fill-5 { width: 5%; } .lf-conf-fill-10 { width: 10%; }
.lf-conf-fill-15 { width: 15%; } .lf-conf-fill-20 { width: 20%; } .lf-conf-fill-25 { width: 25%; }
.lf-conf-fill-30 { width: 30%; } .lf-conf-fill-35 { width: 35%; } .lf-conf-fill-40 { width: 40%; }
.lf-conf-fill-45 { width: 45%; } .lf-conf-fill-50 { width: 50%; } .lf-conf-fill-55 { width: 55%; }
.lf-conf-fill-60 { width: 60%; } .lf-conf-fill-65 { width: 65%; } .lf-conf-fill-70 { width: 70%; }
.lf-conf-fill-75 { width: 75%; } .lf-conf-fill-80 { width: 80%; } .lf-conf-fill-85 { width: 85%; }
.lf-conf-fill-90 { width: 90%; } .lf-conf-fill-95 { width: 95%; } .lf-conf-fill-100 { width: 100%; }
.lf-conf-num { color: #5c6b42; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.lf-send-btn { font-size: var(--fs-caption); min-height: 26px; padding: 0 12px; }
.lf-send-btn:disabled { cursor: not-allowed; opacity: .45; }
.lf-empty { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 12px 0 0; }
.lf-empty.lf-hidden { display: none; }
.lf-empty p { color: #5c6b42; font-size: var(--fs-body); margin: 0; }
.lf-empty button { cursor: not-allowed; font-size: var(--fs-caption); min-height: 26px; opacity: .45; padding: 0 12px; }

/* Template editor -------------------------------------------------------- */
.lf-tmpl-h2 { font-size: var(--fs-body-large); margin: 0 0 4px; }
.lf-tmpl-hint { color: #5c6b42; font-size: var(--fs-small); margin: 0 0 10px; }
.lf-tmpl-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lf-tmpl-pick { min-width: 160px; }
/* Same text-node-splitting reason as .lf-toggle above — keep this out of flex. */
.lf-tmpl-html-label { color: #4a5636; display: block; font-size: var(--fs-small); margin-left: auto; white-space: nowrap; }
.lf-tmpl-html-label input { margin-right: 5px; vertical-align: middle; }
.lf-tmpl-input { display: block; font-family: inherit; margin-bottom: 8px; width: 100%; }
.lf-tmpl-body { resize: vertical; }
.lf-tmpl-save-row { margin-top: 8px; }
.lf-tmpl-status { color: #33450f; font-size: var(--fs-small); margin-left: 10px; }

/* Narrow screens: the readout drops below the run button rather than
   squeezing it, and the ledger scrolls inside its own container. */
@media (max-width: 640px) {
  .lf-readout { gap: 14px; margin-left: 0; width: 100%; }
  .lf-toolbar-spacer { display: none; }
  .lf-filter { flex: 1; }
  /* nowrap exists to stop these labels overlapping on wide layouts; at phone
     width there is no room for it and the hint would clip off-screen. */
  .lf-toggle { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-dot-running { animation: none; }
  .lf-seg, .lf-chip { transition: none; }
}

/* No dark-theme block here, deliberately. This panel renders inside
   .mailbox-feature-panel, whose background is var(--im-canvas, #f0f0f2) — a
   token defined once with NO dark override, so the surface is light in every
   theme. The [data-theme="dark"] .lf-* rules that used to live here therefore
   painted #eaf2ec text onto a #f0f0f2 background: a measured contrast ratio of
   1.00, i.e. invisible. Restoring them requires giving --im-canvas a dark
   variant first. */

/* ── Sidebar footer: Tools / Settings / Sign out ── */
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.09);
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 10px;
}
.sidebar-footer .nav-item {
  color: #073B05;
  font-weight: 500;
  margin-top: 0;
}
.sidebar-footer .nav-item:hover { background: rgba(7,59,5,.08); color: #1c2412; }
.sidebar-footer .nav-item svg { color: #073B05; }
.sidebar-footer .nav-item:hover svg { color: #073B05; }
.sidebar-logout { color: #073B05 !important; }
.sidebar-logout:hover { background: rgba(7,59,5,.08) !important; color: #1c2412 !important; }
.sidebar-logout svg { color: #073B05 !important; }
.sidebar-logout:hover svg { color: #073B05 !important; }

/* ── Folders / Labels section headers ── */
.folders-panel { padding: 2px 4px 0; }
.folders-header { gap: 6px; grid-template-columns: 1fr 28px 28px; }
.folders-toggle {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6a8a50;
  min-height: 32px;
  padding: 0 10px;
}
.folders-toggle:hover { color: #c0d8a0; }
.folder-chevron { font-size: 10px; }
.folder-row-chevron { color: #5a7840; }
.folder-row-chevron:hover { background: rgba(255,255,255,.10) !important; color: #b8d870 !important; }
.folder-action {
  border-radius: 6px;
  color: #5a7840;
  height: 28px;
  width: 28px;
}
.folder-action svg { height: 16px; width: 16px; }
.folder-action:hover { background: rgba(255,255,255,.10); color: #b8d870; }
.no-folders { font-size: var(--fs-caption); color: #4e6438; padding: 2px 10px 6px; }
.labels-panel { padding-top: 0; }

/* ── Reading pane: only visible when a message is open ── */
.mailbox:not(.has-reader) .reading-pane { display: none; }
.mailbox:not(.has-reader) {
  grid-template-areas: "header header" "sidebar list";
  grid-template-columns: 280px minmax(0, 1fr);
}

/* Wide reader: hide email list and expand reader across its space */
.mailbox.has-reader {
  grid-template-areas: "header header" "sidebar reader";
  grid-template-columns: 280px minmax(0, 1fr);
}
.mailbox.has-reader .list-pane { display: none; }
.reader-back-bar {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid #e4dfd8;
  display: none;
  padding: 10px 20px;
}
.reader-back-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: #073B05;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 10px;
  transition: background .14s;
}
.reader-back-btn:hover { background: #edf2e6; color: #3e5a1a; }
.reader-back-btn svg { flex-shrink: 0; }
[data-theme="dark"] .reader-back-bar { border-color: #2e4438; }
[data-theme="dark"] .reader-back-btn { color: #6dd9a8; }
[data-theme="dark"] .reader-back-btn:hover { background: #1e3828; }

/* ── Custom domain management ────────────────────────────────────────────── */
.domain-list { margin-bottom: 16px; }
.domain-empty { color: #9ab5a6; font-size: var(--fs-body); margin: 4px 0 8px; }

.domain-row { border-bottom: 1px solid #eaf0ec; padding: 14px 0; }
.domain-row:last-child { border-bottom: none; }
.domain-row-top { align-items: center; display: flex; gap: 12px; }
.domain-row-left { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; }
.domain-name { color: #1a2e22; font-size: var(--fs-body-large); font-weight: 600; }
.domain-row-meta { align-items: center; display: flex; gap: 8px; flex-wrap: wrap; }

.domain-badge { border-radius: 6px; font-size: var(--fs-small); font-weight: 700; padding: 3px 10px; white-space: nowrap; }
.domain-badge-verified { background: #d8f3e6; color: #0c7a47; }
.domain-badge-pending { background: #fff3e0; color: #c05800; }

.domain-row-actions { align-items: center; display: flex; gap: 6px; flex-shrink: 0; }
.domain-dns-btn { background: transparent; border: 1px solid #c8d8cc; border-radius: 7px; color: #3e6840; cursor: pointer; font-size: var(--fs-small); padding: 5px 11px; transition: background .12s, border-color .12s; }
.domain-dns-btn:hover { background: #edf5ee; border-color: #073B05; }
.domain-verify-btn { background: transparent; border: 1px solid #c8d8cc; border-radius: 7px; color: #3e6840; cursor: pointer; font-size: var(--fs-small); padding: 5px 11px; transition: background .12s, border-color .12s; }
.domain-verify-btn:hover { background: #edf5ee; border-color: #073B05; }
.domain-verify-btn:disabled { opacity: .55; cursor: not-allowed; }
.domain-remove-btn { background: transparent; border: 1px solid #d4cac6; border-radius: 7px; color: #c0392b; cursor: pointer; font-size: var(--fs-small); padding: 5px 11px; transition: background .12s, border-color .12s; }
.domain-remove-btn:hover { background: #fdecea; border-color: #c0392b; }

.domain-dns-panel { background: #f8fdf8; border: 1px solid #d8ead8; border-radius: 10px; display: none; margin-top: 12px; padding: 14px 16px; }
.domain-dns-panel.open { display: block; }
.domain-dns-heading { color: #3e6840; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; margin: 0 0 12px; text-transform: uppercase; }
.domain-dns-note { color: #5d7a62; font-size: var(--fs-small); line-height: 1.5; margin: 0 0 14px; }

.domain-dns-record { background: white; border: 1px solid #dce8dc; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.domain-dns-record:last-child { margin-bottom: 0; }
.domain-dns-record-head { align-items: center; display: flex; gap: 10px; padding: 10px 14px 6px; }
.domain-dns-type { background: #e8f4ea; border-radius: 5px; color: #2a6040; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; text-transform: uppercase; }
.domain-dns-purpose { color: #4a5e50; font-size: var(--fs-small); font-weight: 600; }
.domain-dns-fields { border-top: 1px solid #edf5ed; display: grid; gap: 0; }
.domain-dns-field { align-items: baseline; border-bottom: 1px solid #edf5ed; display: grid; gap: 8px; grid-template-columns: 56px 1fr auto; padding: 7px 14px; }
.domain-dns-field:last-child { border-bottom: none; }
.domain-dns-field-label { color: #7a9a80; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.domain-dns-field-value { color: #1a2e22; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; }
.domain-dns-copy { background: transparent; border: 1px solid #c8d8cc; border-radius: 5px; color: #3e6840; cursor: pointer; font-size: 11px; flex-shrink: 0; padding: 2px 8px; transition: background .1s; }
.domain-dns-copy:hover { background: #e8f4ea; }
.domain-dns-copy.copied { background: #d8f3e6; border-color: #0c7a47; color: #0c7a47; }

.domain-add-form { align-items: flex-start; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.domain-add-input { border: 1px solid #d0cac6; border-radius: 8px; color: #2a2320; flex: 1; font-size: var(--fs-body-large); min-width: 200px; padding: 9px 12px; transition: border-color .15s; }
.domain-add-input:focus { border-color: #1D6617; outline: none; }
.domain-add-input::placeholder { color: #a8b2aa; }
.domain-add-status { color: #c0392b; font-size: var(--fs-body); margin-top: 6px; min-height: 1.2em; }
.domain-add-status.ok { color: #0c7a47; }

.domain-how-steps { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin: 4px 0 8px; }
.domain-how-step { border-right: 1px solid #edf0ec; padding: 12px 16px 12px 0; }
.domain-how-step:last-child { border-right: none; padding-right: 0; }
.domain-how-num { align-items: center; background: #1D6617; border-radius: 50%; color: white; display: flex; font-size: 11px; font-weight: 800; height: 22px; justify-content: center; margin-bottom: 8px; width: 22px; }
.domain-how-title { color: #1a2e22; font-size: var(--fs-body); font-weight: 600; margin-bottom: 2px; }
.domain-how-desc { color: #7a867f; font-size: var(--fs-small); line-height: 1.4; }

.domain-badge-neutral { background: #eef2ee; color: #4a5e50; }

/* ── Organizations settings section ──────────────────────────────────────── */
.orgz-tab-panel { margin-top: 16px; }
.orgz-subheading { color: #1a2e22; font-size: var(--fs-body-large); font-weight: 600; margin: 20px 0 8px; }
.orgz-subheading:first-child { margin-top: 0; }

.orgz-invite-card { align-items: center; background: #f5f7f5; border: 1px solid #e0e8e2; border-radius: 8px; display: flex; gap: 12px; justify-content: space-between; margin-top: 12px; padding: 12px 16px; }
.orgz-invite-card-info { display: flex; flex-direction: column; gap: 2px; }
.orgz-invite-card-info strong { color: #1a2e22; font-size: var(--fs-body-large); }
.orgz-invite-card-info span { color: #7a867f; font-size: var(--fs-small); }
.orgz-invite-card-actions { display: flex; flex-shrink: 0; gap: 8px; }

.orgz-member-row { border-bottom: 1px solid #eaf0ec; display: flex; flex-direction: column; gap: 10px; padding: 16px 0; }
.orgz-member-row:last-child { border-bottom: none; }
.orgz-member-top { align-items: center; display: flex; gap: 10px; }
.orgz-member-perms { display: flex; flex-wrap: wrap; gap: 20px; }
.orgz-member-perm { align-items: center; display: flex; gap: 10px; }
.orgz-member-perm span { color: #3b403d; font-size: var(--fs-body); }
.orgz-member-ident-form { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 0; max-width: none; }
.orgz-member-ident-form label { flex: 1; font-size: var(--fs-small); min-width: 160px; }
.orgz-member-ident-form .settings-secondary { align-self: flex-end; margin: 0; }
.orgz-member-actions { display: flex; gap: 8px; }

.orgz-logo-wrap { align-items: center; display: flex; gap: 14px; margin-top: 8px; }
.orgz-logo-preview { background: #fff; border: 1px solid #e0dbd8; border-radius: 8px; max-height: 64px; max-width: 160px; object-fit: contain; padding: 6px; }

/* dark mode */
[data-theme="dark"] .domain-badge-neutral { background: #22322a; color: #8ab5a0; }
[data-theme="dark"] .orgz-subheading { color: #eaf2ec; }
[data-theme="dark"] .orgz-invite-card { background: #1e3828; border-color: #2e4438; }
[data-theme="dark"] .orgz-invite-card-info strong { color: #eaf2ec; }
[data-theme="dark"] .orgz-invite-card-info span { color: #8ab5a0; }
[data-theme="dark"] .orgz-member-row { border-color: #2e4438; }
[data-theme="dark"] .orgz-member-perm span { color: #eaf2ec; }
[data-theme="dark"] .orgz-logo-preview { background: #1e2d27; border-color: #2e4438; }

/* dark mode */
[data-theme="dark"] .domain-name { color: #eaf2ec; }
[data-theme="dark"] .domain-empty { color: #4a7060; }
[data-theme="dark"] .domain-row { border-color: #2e4438; }
[data-theme="dark"] .domain-badge-verified { background: #1a4a34; color: #6dd9a8; }
[data-theme="dark"] .domain-badge-pending { background: #3a2c10; color: #f0b060; }
[data-theme="dark"] .domain-dns-panel { background: #182820; border-color: #2e4438; }
[data-theme="dark"] .domain-dns-heading { color: #6dd9a8; }
[data-theme="dark"] .domain-dns-note { color: #6a9a80; }
[data-theme="dark"] .domain-dns-record { background: #1e3028; border-color: #2e4438; }
[data-theme="dark"] .domain-dns-record-head { }
[data-theme="dark"] .domain-dns-type { background: #1a3a28; color: #6dd9a8; }
[data-theme="dark"] .domain-dns-purpose { color: #8ab5a0; }
[data-theme="dark"] .domain-dns-fields { border-color: #2e4438; }
[data-theme="dark"] .domain-dns-field { border-color: #2e4438; }
[data-theme="dark"] .domain-dns-field-label { color: #4a7060; }
[data-theme="dark"] .domain-dns-field-value { color: #b0e8c0; }
[data-theme="dark"] .domain-dns-copy { border-color: #2e4438; color: #6dd9a8; }
[data-theme="dark"] .domain-dns-copy:hover { background: #1a3828; }
[data-theme="dark"] .domain-dns-copy.copied { background: #1a4a34; border-color: #6dd9a8; }
[data-theme="dark"] .domain-dns-btn,
[data-theme="dark"] .domain-verify-btn { border-color: #2e4438; color: #6dd9a8; }
[data-theme="dark"] .domain-dns-btn:hover,
[data-theme="dark"] .domain-verify-btn:hover { background: #1a3828; border-color: #3e6050; }
[data-theme="dark"] .domain-add-input { background: #1e3028; border-color: #2e4438; color: #eaf2ec; }
[data-theme="dark"] .domain-add-input:focus { border-color: #5c9a50; }
[data-theme="dark"] .domain-add-status { color: #f08080; }
[data-theme="dark"] .domain-add-status.ok { color: #6dd9a8; }
[data-theme="dark"] .domain-how-step { border-color: #2e4438; }
[data-theme="dark"] .domain-how-title { color: #eaf2ec; }
[data-theme="dark"] .domain-how-desc { color: #5a8a70; }

/* ═══════════════════════════════════════════════════════════════
   Platform UI Refresh — "Dark Frame, Light Canvas"
   System fonts only (CSP compliant). Cosmetic overrides only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
body.mailbox-view,
body.settings-view {
  --im-frame:        #18181b;
  --im-sidebar:      #f4f4f5;
  --im-canvas:       #f0f0f2;
  --im-surface:      #ffffff;
  --im-border:       #e4e4e7;
  --im-border-strong:#d4d4d8;
  --im-text-1:       #18181b;
  --im-text-2:       #52525b;
  --im-text-muted:   #a1a1aa;
  --im-green:        #16a34a;
  --im-green-bright: #0DCE04;
  --im-badge-orange: #f97316;
  --im-shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --im-shadow-md:    0 4px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
  --im-shadow-nav:   0 2px 8px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
  --im-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ── 1. Dark charcoal outer frame ── */
body.mailbox-view,
body.settings-view {
  background: var(--im-frame);
  box-sizing: border-box;
  padding: 12px;
}
body.mailbox-view main,
body.settings-view main {
  background: transparent;
  box-sizing: border-box;
  min-height: calc(100dvh - 24px);
  padding: 0;
}

/* ── 2. Mailbox: floating rounded card + rail column ── */
body.mailbox-view .mailbox {
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.05);
  height: calc(100dvh - 24px);
  grid-template-rows: 72px calc(100dvh - 72px - 24px);
}
body.mailbox-view .mailbox:not(.has-reader):not(.has-feature-panel) {
  grid-template-areas: "header header header" "rail sidebar list";
  grid-template-columns: 52px 220px minmax(0,1fr);
}
body.mailbox-view .mailbox.has-reader {
  grid-template-areas: "header header header" "rail sidebar reader";
  grid-template-columns: 52px 220px minmax(0,1fr);
}
body.mailbox-view .mailbox.has-feature-panel:not(.has-reader) {
  grid-template-areas: "header header" "rail feature";
  grid-template-columns: 52px minmax(0,1fr);
}
body.mailbox-view .mailbox.has-feature-panel .sidebar { display: none; }

.mailbox-feature-panel {
  grid-area: feature;
  display: none;
  overflow-y: auto;
  background: var(--im-canvas, #f0f0f2);
  padding: 40px 56px;
}
.mailbox-feature-panel:not(.hidden) { display: block; }

/* ── Icon rail ── */
.icon-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 6px;
  background: var(--im-canvas, #f0f0f2);
  border-right: 1px solid var(--im-border, #e4e4e7);
  gap: 0;
  overflow: visible;
  position: relative;
  z-index: 10;
}
body.mailbox-view .icon-rail { grid-area: rail; }

.icon-rail-top,
.icon-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: var(--im-surface, #fff);
  border-radius: 10px;
  border: 1px solid var(--im-border, #e4e4e7);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 6px 5px;
}

.rail-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--im-text-2, #52525b);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
  flex-shrink: 0;
}
.rail-btn:hover {
  background: rgba(0,0,0,.10);
  color: var(--im-text-1, #18181b);
}
.rail-btn.rail-btn-active,
.rail-btn.active {
  background: var(--im-surface, #fff);
  box-shadow: var(--im-shadow-nav, 0 2px 8px rgba(0,0,0,.10));
  color: var(--im-green, #16a34a);
}
.rail-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

/* Tooltip */
.rail-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--im-text-1, #18181b);
  color: #fff;
  font-family: var(--im-font, -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 200;
}
.rail-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--im-text-1, #18181b);
}
.rail-btn:hover .rail-tooltip { opacity: 1; }

/* Settings page: add rail column */
body.mailbox-view .settings-page,
body.settings-view .settings-page {
  display: grid;
  grid-template-areas: "brand brand brand" "rail sidebar main";
  grid-template-columns: 52px 200px minmax(0,1fr);
  grid-template-rows: 72px 1fr;
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.05);
  min-height: calc(100dvh - 24px);
  overflow: clip;
}
body.mailbox-view .settings-brand,
body.settings-view .settings-brand { grid-area: brand; }
body.mailbox-view .settings-page .icon-rail,
body.settings-view .settings-page .icon-rail {
  grid-area: rail;
  min-height: 100%;
  border-right: 1px solid var(--im-border, #e4e4e7);
}
body.mailbox-view .settings-sidebar,
body.settings-view .settings-sidebar { grid-area: sidebar; }
body.mailbox-view .settings-main,
body.settings-view .settings-main { grid-area: main; }
body.mailbox-view .settings-page .rail-btn.rail-btn-active,
body.settings-view .settings-page .rail-btn.rail-btn-active {
  background: transparent;
  box-shadow: none;
  color: var(--im-text-2, #52525b);
}

/* ── 3. Typography: system UI font stack ── */
body.mailbox-view .mailbox,
body.mailbox-view .mailbox * {
  font-family: var(--im-font);
}
body.mailbox-view .mail-brand {
  font-family: var(--im-font) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}
body.mailbox-view .reader-body,
body.mailbox-view .reader-body * {
  font-family: Georgia, 'Times New Roman', serif;
}

/* ── 4. Header ── */
body.mailbox-view .mail-header {
  background: var(--im-surface);
  border-bottom: 1px solid var(--im-border);
  color: var(--im-text-1);
}
body.mailbox-view .mail-brand { color: #15803d; }
body.mailbox-view .mail-brand-mark { border-radius: 9px; }
body.mailbox-view .mail-search {
  background: var(--im-sidebar);
  border: 1.5px solid var(--im-border-strong);
  color: var(--im-text-1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
body.mailbox-view .mail-search input { color: var(--im-text-1); }
body.mailbox-view .mail-search input::placeholder { color: var(--im-text-muted); }
body.mailbox-view .mail-search svg { color: var(--im-text-muted); }
body.mailbox-view .sync-state {
  border-right-color: var(--im-border);
  color: var(--im-text-muted);
}
body.mailbox-view .sync-state strong { color: var(--im-green); }
body.mailbox-view .app-nav span {
  color: var(--im-text-2);
  border-radius: 8px;
}
body.mailbox-view .app-nav span:hover { background: var(--im-sidebar); }
body.mailbox-view .app-nav button {
  font: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  border-radius: 10px;
  padding: 10px 13px;
}
body.mailbox-view .app-nav .current {
  background: var(--im-green-bright);
  box-shadow: none;
  color: #0a2e08;
  font-weight: 600;
}
body.mailbox-view .app-nav .current:hover { background: #09b503; }
body.mailbox-view .header-icon-btn,
body.mailbox-view .reader-action-btn { color: var(--im-text-muted); }
body.mailbox-view .header-icon-btn:hover { background: var(--im-sidebar); color: var(--im-text-2); }

/* ── 5. Sidebar ── */
body.mailbox-view .sidebar {
  background: var(--im-sidebar);
  border-right: 1px solid var(--im-border);
  gap: 2px;
}
body.mailbox-view .sidebar-section { border-top-color: var(--im-border-strong); padding-top: 10px; }
body.mailbox-view .sidebar-section strong {
  color: var(--im-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.mailbox-view .sidebar h2 { color: var(--im-text-muted); font-size: 12px; }

/* Nav items */
body.mailbox-view .nav-item {
  color: var(--im-text-2);
  border-radius: 8px;
  font-family: var(--im-font);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
body.mailbox-view .nav-item:hover {
  background: rgba(0,0,0,.06);
  box-shadow: none;
  color: var(--im-text-1);
  transform: none;
}
body.mailbox-view .nav-item.active {
  background: var(--im-surface);
  box-shadow: var(--im-shadow-nav);
  color: var(--im-text-1);
  font-weight: 600;
}
body.mailbox-view .nav-item.active:hover { background: var(--im-surface); transform: none; }

/* Nav icons — neutral gray, green on active */
body.mailbox-view .nav-item svg,
body.mailbox-view .sidebar-link svg {
  color: var(--im-text-muted);
  opacity: 1;
  transition: color .12s ease;
}
body.mailbox-view .nav-item:hover svg { color: var(--im-text-2); }
body.mailbox-view .nav-item.active svg { color: var(--im-green); opacity: 1; }

/* Nav badge — orange rounded-square chip */
body.mailbox-view .nav-badge {
  background: var(--im-badge-orange);
  color: #fff;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
  letter-spacing: 0;
}

body.mailbox-view .sidebar-link { color: var(--im-text-2); }
body.mailbox-view .folders-panel,
body.mailbox-view .labels-panel { padding-left: 10px; padding-right: 4px; }
body.mailbox-view .folders-header { grid-template-columns: 36px 1fr 28px 28px; gap: 0; }
body.mailbox-view .folders-toggle { color: var(--im-text-2); width: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
body.mailbox-view .folders-toggle:hover { background: rgba(0,0,0,.05); color: var(--im-text-1); }
body.mailbox-view .folders-section-label { color: var(--im-text-2); font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
body.mailbox-view .folder-icon { color: var(--im-text-muted); opacity: 1; }
body.mailbox-view .folders-panel.collapsed .folder-chevron,
body.mailbox-view .labels-panel.collapsed .folder-chevron,
body.mailbox-view .folder-chevron { transform: none; transition: none; display: flex; align-items: center; justify-content: center; }
body.mailbox-view .folder-chevron,
body.mailbox-view .folder-action { color: var(--im-text-muted); height: 28px; width: 28px; font-size: 18px; }
body.mailbox-view .folder-action svg { height: 15px; width: 15px; }
body.mailbox-view .folder-action:hover { background: rgba(0,0,0,.06); color: var(--im-text-2); }
body.mailbox-view .folder-dots-btn { color: var(--im-text-muted); opacity: 1; }
body.mailbox-view .folder-dots-btn:hover { background: rgba(0,0,0,.06); color: var(--im-text-2); }
body.mailbox-view .custom-folder-button { color: var(--im-text-2); }
body.mailbox-view .custom-folder-button.active {
  background: var(--im-surface);
  box-shadow: var(--im-shadow-nav);
  color: var(--im-text-1);
}
body.mailbox-view .no-folders { color: var(--im-text-muted); }
body.mailbox-view .folder-add-input {
  background: var(--im-surface);
  border-color: var(--im-border-strong);
  color: var(--im-text-1);
}
body.mailbox-view .sidebar .secondary {
  background: transparent;
  border: 1px solid var(--im-border-strong);
  border-radius: 8px;
  color: var(--im-text-2);
}
body.mailbox-view .sidebar .secondary:hover {
  background: rgba(0,0,0,.04);
  border-color: var(--im-text-muted);
}

/* Compose button */
body.mailbox-view .compose-main {
  background: var(--im-green-bright);
  box-shadow: 0 2px 8px rgba(13,206,4,.22);
  color: #0a2e08;
  font-family: var(--im-font);
  font-weight: 600;
  border-radius: 10px;
}
body.mailbox-view .compose-main:hover {
  background: #09b503;
  box-shadow: 0 4px 14px rgba(13,206,4,.34);
}

/* Sidebar footer — same as main nav */
body.mailbox-view .sidebar-footer .nav-item { color: var(--im-text-2) !important; }
body.mailbox-view .sidebar-footer .nav-item svg { color: var(--im-text-muted) !important; opacity: 1; }
body.mailbox-view .sidebar-footer .nav-item:hover { background: rgba(0,0,0,.05) !important; color: var(--im-text-1) !important; }
body.mailbox-view .sidebar-footer .nav-item:hover svg { color: var(--im-text-2) !important; }
body.mailbox-view .sidebar-footer .nav-item.active svg { color: var(--im-green) !important; opacity: 1; }
body.mailbox-view .sidebar-logout { color: var(--im-text-2) !important; }
body.mailbox-view .sidebar-logout svg { color: var(--im-text-muted) !important; opacity: 1; }
body.mailbox-view .sidebar-logout:hover { background: rgba(0,0,0,.05) !important; color: var(--im-text-1) !important; }
body.mailbox-view .sidebar-logout:hover svg { color: var(--im-text-2) !important; }

/* ── 6. List pane ── */
body.mailbox-view .list-pane { background: var(--im-canvas); padding: 10px; }
body.mailbox-view .list-toolbar {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: 12px;
  box-shadow: var(--im-shadow-sm);
}
body.mailbox-view .list-toolbar h1 {
  color: var(--im-text-1);
  font-family: var(--im-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
body.mailbox-view .tool-button { color: var(--im-text-muted); }
body.mailbox-view .tool-button:hover { background: rgba(0,0,0,.06); color: var(--im-text-2); }
body.mailbox-view .messages { gap: 4px; }
body.mailbox-view .message {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: 12px;
  box-shadow: var(--im-shadow-sm);
}
body.mailbox-view .message:hover {
  background: var(--im-surface);
  border-color: var(--im-border-strong);
  box-shadow: var(--im-shadow-md);
  transform: translateY(-1px);
}
body.mailbox-view .message.selected {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 1px 4px rgba(22,163,74,.12);
}
body.mailbox-view .message.selected:hover { background: #f0fdf4; transform: none; }
body.mailbox-view .message.unread {
  background: var(--im-surface);
  border-color: var(--im-border);
  box-shadow: inset 3px 0 0 var(--im-green), var(--im-shadow-sm);
}
body.mailbox-view .empty {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: 14px;
}
body.mailbox-view .empty-title {
  color: var(--im-text-1);
  font-family: var(--im-font);
}
body.mailbox-view .bulk-bar {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

/* ── 7. Reading pane ── */
body.mailbox-view .reading-pane {
  background: var(--im-canvas);
  border-left: 1px solid var(--im-border);
}
body.mailbox-view .reader-scroll { background: var(--im-surface); }
body.mailbox-view .reader-empty { background: var(--im-canvas); }
body.mailbox-view .reader-empty h2 {
  color: var(--im-text-2);
  font-family: var(--im-font);
}
body.mailbox-view .reader-tools {
  background: var(--im-surface);
  border-bottom: 1px solid var(--im-border);
}
body.mailbox-view .reader-tools-left .reader-action-btn {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: 8px;
  color: var(--im-text-2);
}
body.mailbox-view .reader-tools-left .reader-action-btn:hover {
  background: var(--im-canvas);
  border-color: var(--im-border-strong);
  color: var(--im-text-1);
}
body.mailbox-view .reader-tools-right .reader-action-btn {
  border-radius: 8px;
  color: var(--im-text-muted);
}
body.mailbox-view .reader-tools-right .reader-action-btn:hover {
  background: var(--im-canvas);
  color: var(--im-text-2);
}
body.mailbox-view .reader-action-danger:hover {
  background: rgba(239,68,68,.08) !important;
  color: #dc2626 !important;
}
body.mailbox-view .reader-move-select {
  border-color: var(--im-border-strong);
  border-radius: 8px;
  color: var(--im-text-2);
}
body.mailbox-view .reader-content h2 {
  color: var(--im-text-1);
  font-family: var(--im-font);
  letter-spacing: -.02em;
}
body.mailbox-view .reader-meta {
  background: var(--im-canvas);
  border: 1px solid var(--im-border);
  border-radius: 12px;
}
body.mailbox-view .reader-meta strong { color: var(--im-text-1); }
body.mailbox-view .reader-meta time { color: var(--im-text-muted); }
body.mailbox-view .reader-addr-label { color: var(--im-text-muted); }
body.mailbox-view .reader-addr-pill { color: var(--im-text-2); }
body.mailbox-view .reader-addr-pill:hover { color: var(--im-text-1); }
body.mailbox-view .reader-star-btn,
body.mailbox-view .reader-inbox-btn { color: var(--im-text-muted); }
body.mailbox-view .reader-star-btn:hover,
body.mailbox-view .reader-inbox-btn:hover { color: var(--im-text-2); }
body.mailbox-view .reader-star-btn.active { color: #f97316; }

/* ── 8. Compose window ── */
body.mailbox-view .compose-window {
  background: var(--im-surface);
  border: 1px solid var(--im-border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
body.mailbox-view .compose-header {
  background: var(--im-canvas);
  border-bottom: 1px solid var(--im-border);
  border-radius: 14px 14px 0 0;
}
body.mailbox-view .compose-title { color: var(--im-text-1); }
body.mailbox-view .compose-close { color: var(--im-text-muted); }
body.mailbox-view .compose-close:hover { background: rgba(0,0,0,.06); color: var(--im-text-1); }
body.mailbox-view .compose-body { background: var(--im-surface); }
body.mailbox-view .compose-field { border-bottom: 1px solid var(--im-border); }
body.mailbox-view .compose-field input,
body.mailbox-view .compose-field .to-field { background: transparent; color: var(--im-text-1); }
body.mailbox-view .compose-label { color: var(--im-text-muted); }
body.mailbox-view .compose-editor { color: var(--im-text-1); }
body.mailbox-view .compose-toolbar {
  background: var(--im-canvas);
  border-radius: 0 0 14px 14px;
  border-top: 1px solid var(--im-border);
}
body.mailbox-view .compose-toolbar-btn { color: var(--im-text-muted); }
body.mailbox-view .compose-toolbar-btn:hover { background: rgba(0,0,0,.06); color: var(--im-text-2); }

/* ── 9. Modals and overlays ── */
body.mailbox-view .modal-overlay { background: rgba(0,0,0,.40); backdrop-filter: blur(6px); }
body.mailbox-view .modal {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: 14px;
  box-shadow: 0 24px 72px rgba(0,0,0,.24);
}
body.mailbox-view .modal-header {
  background: var(--im-canvas);
  border-bottom: 1px solid var(--im-border);
  border-radius: 14px 14px 0 0;
}
body.mailbox-view .modal h2,
body.mailbox-view .modal-title { color: var(--im-text-1); }
body.mailbox-view .modal-close,
body.mailbox-view .close-btn { color: var(--im-text-muted); }
body.mailbox-view .modal-close:hover,
body.mailbox-view .close-btn:hover { background: rgba(0,0,0,.06); color: var(--im-text-1); }

/* ── 10. Settings page ── */
body.mailbox-view .settings-page,
body.settings-view .settings-page {
  background: var(--im-canvas);
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.05);
}

body.mailbox-view .settings-sidebar,
body.settings-view .settings-sidebar {
  background: var(--im-sidebar);
  border-right: 1px solid var(--im-border);
  min-height: unset;
}
body.mailbox-view .settings-brand,
body.settings-view .settings-brand {
  align-items: center;
  background: var(--im-surface);
  border-bottom: 1px solid var(--im-border);
  display: flex;
  gap: 10px;
  padding: 0 16px;
}
body.mailbox-view .settings-brand strong,
body.settings-view .settings-brand strong {
  color: #15803d;
  flex: 0 0 188px;
  font-family: var(--im-font);
  font-style: normal;
  font-weight: 700;
}
body.mailbox-view .settings-brand .settings-search,
body.settings-view .settings-brand .settings-search {
  flex: 0 0 auto;
  width: clamp(160px, 22vw, 340px);
}
body.mailbox-view .settings-brand .upgrade-button,
body.settings-view .settings-brand .upgrade-button {
  margin-left: auto;
}
body.mailbox-view .settings-topbar,
body.settings-view .settings-topbar { display: none; }
body.mailbox-view .settings-back,
body.settings-view .settings-back {
  background: var(--im-green-bright);
  border-bottom: 1px solid var(--im-border);
  color: #0a2e08;
  height: 72px;
}
body.mailbox-view .settings-back:hover,
body.settings-view .settings-back:hover { background: #09b503; }

body.mailbox-view .settings-nav p,
body.settings-view .settings-nav p {
  color: var(--im-text-1);
  font-family: var(--im-font);
  font-size: var(--fs-body);
  font-weight: 700;
}
body.mailbox-view .settings-nav button,
body.mailbox-view .settings-nav .settings-icon-row,
body.settings-view .settings-nav button,
body.settings-view .settings-nav .settings-icon-row {
  color: var(--im-text-2);
}
body.mailbox-view .settings-nav button svg,
body.mailbox-view .settings-nav .settings-icon-row svg,
body.settings-view .settings-nav button svg,
body.settings-view .settings-nav .settings-icon-row svg { color: var(--im-text-muted); }
body.mailbox-view .settings-nav button:hover,
body.mailbox-view .settings-nav .settings-icon-row:hover,
body.settings-view .settings-nav button:hover,
body.settings-view .settings-nav .settings-icon-row:hover {
  background: rgba(0,0,0,.05);
  color: var(--im-text-1);
}
body.mailbox-view .settings-nav button.active,
body.mailbox-view .settings-nav .settings-icon-row.active,
body.settings-view .settings-nav button.active,
body.settings-view .settings-nav .settings-icon-row.active {
  background: var(--im-surface);
  box-shadow: var(--im-shadow-nav);
  color: var(--im-text-1);
  font-weight: 600;
}
body.mailbox-view .settings-nav button.active svg,
body.mailbox-view .settings-nav .settings-icon-row.active svg,
body.settings-view .settings-nav button.active svg,
body.settings-view .settings-nav .settings-icon-row.active svg { color: var(--im-green); }
body.mailbox-view .settings-storage,
body.settings-view .settings-storage {
  border-top-color: var(--im-border);
  color: var(--im-text-muted);
}
body.mailbox-view .settings-storage span,
body.settings-view .settings-storage span {
  background: linear-gradient(90deg, var(--im-green) 0 74%, var(--im-border) 74%);
}
body.mailbox-view .settings-storage small:first-of-type,
body.settings-view .settings-storage small:first-of-type { color: var(--im-green); }
body.mailbox-view .settings-main,
body.settings-view .settings-main { background: var(--im-canvas); }
body.mailbox-view .settings-topbar,
body.settings-view .settings-topbar {
  background: var(--im-surface);
  border-bottom: 1px solid var(--im-border);
  color: var(--im-text-1);
  height: 72px;
}
body.mailbox-view .upgrade-button,
body.settings-view .upgrade-button {
  background: var(--im-green-bright);
  border-color: transparent;
  color: #0a2e08;
  font-weight: 600;
}
body.mailbox-view .upgrade-button:hover,
body.settings-view .upgrade-button:hover { background: #09b503; color: #0a2e08; }
body.mailbox-view .settings-search,
body.settings-view .settings-search {
  background: var(--im-surface);
  border: 1.5px solid var(--im-border-strong);
  border-radius: 8px;
  color: var(--im-text-1);
}
body.mailbox-view .settings-search input,
body.settings-view .settings-search input { color: var(--im-text-1); }
body.mailbox-view .settings-search input::placeholder,
body.settings-view .settings-search input::placeholder { color: var(--im-text-muted); }
body.mailbox-view .settings-panel,
body.settings-view .settings-panel { background: var(--im-canvas); }
body.mailbox-view .settings-card,
body.settings-view .settings-card {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: 14px;
  box-shadow: var(--im-shadow-sm);
}
body.mailbox-view .settings-card-header,
body.settings-view .settings-card-header { border-bottom: 1px solid var(--im-border); }
body.mailbox-view .settings-lede,
body.settings-view .settings-lede { color: var(--im-text-muted); }
body.mailbox-view .settings-lede a,
body.settings-view .settings-lede a { color: var(--im-green); }

/* Settings content card padding (specificity: 0,2,1 beats main's 0,1,2) */
body.mailbox-view .settings-content,
body.settings-view .settings-content { padding: 56px; }

/* ── 11. Dividers ── */
body.mailbox-view .sidebar-section { border-top-color: var(--im-border-strong); }
body.mailbox-view .inbox-divider,
body.mailbox-view .section-break { background: var(--im-border-strong); }

/* ── 12. Mass email / workflows inline sections ── */
body.mailbox-view #mailbox-mass-email,
body.mailbox-view #mailbox-workflows { background: var(--im-canvas) !important; }

/* ── 13. Compose window updates ── */
/* Corner buttons: white bg, dark-green icon */
.compose-win-btn {
  background: #fff;
  color: #073B05;
}
.compose-win-btn:hover { background: #e8f2ec; }

/* Bottom action bar: match formatting toolbar */
.compose-bottom-bar {
  background: var(--im-canvas, #f0f0f2);
  border-top: 1px solid var(--im-border, #e4e4e7);
}
.compose-action-btn { color: var(--im-text-muted, #71717a); }
.compose-action-btn:hover { background: rgba(0,0,0,.06); border-color: var(--im-border, #e4e4e7); color: var(--im-text-1, #18181b); }
.compose-action-btn.active { background: rgba(0,0,0,.09); border-color: var(--im-border, #e4e4e7); color: var(--im-text-1, #18181b); }
/* Draft button: same look as Send */
.compose-draft-btn {
  background: #0DCE04;
  border: none;
  border-radius: 8px;
  color: #0a2e08;
  font-weight: 600;
}
.compose-draft-btn:hover { background: #09b503; }
/* Send button: bright green */
.compose-send-btn { background: #0DCE04; color: #0a2e08; }
.compose-send-btn:hover { background: #09b503; }

/* Expand: covers folder sidebar + list, leaves header + rail visible */
.compose.compose-expanded {
  top: 84px;
  left: 64px;
  right: 12px;
  bottom: 12px;
  width: auto;
  height: auto;
  max-height: none;
  border-radius: 0 0 12px 0;
}

/* Site footer */
.site-footer {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 20px 16px;
  width: 100%;
  background: #ffffff;
}
.site-footer__legal {
  font-size: var(--fs-small);
  color: #000;
  text-decoration: none;
  background: #0DCE04;
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  font-weight: 650;
  transition: background 0.15s;
}
.site-footer__legal:hover {
  background: #09b503;
}

/* ── 14. Organization invite page ── */
.invite-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(92, 122, 42,0.10), transparent 36%),
    linear-gradient(180deg, #f4efe3 0%, #eef5f0 100%);
  color: var(--ink);
}

.invite-shell {
  display: grid;
  min-height: calc(100vh - 66px);
  padding: clamp(32px, 6vw, 80px) 24px;
  place-items: center;
}

.invite-card {
  background: #ffffff;
  border: 1px solid #dfe7e1;
  border-radius: 24px;
  box-shadow: var(--shadow);
  max-width: 720px;
  min-width: 0;
  padding: clamp(30px, 5vw, 58px);
  width: 100%;
}

.invite-card h1 {
  color: #112018;
  font-size: clamp(var(--fs-h3), 3vw, var(--fs-h1));
  line-height: 1.1;
  margin: 0 0 22px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.invite-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 4px;
}

[data-theme="dark"] .invite-page {
  background:
    linear-gradient(135deg, rgba(15,143,87,.08), transparent 36%),
    linear-gradient(180deg, #1e2d27 0%, #192822 100%);
}
[data-theme="dark"] .invite-card { background: #263830; border-color: #2e4438; }
[data-theme="dark"] .invite-card h1 { color: #eaf2ec; }
[data-theme="dark"] .invite-card label { color: #b0ccc0; }

@media (max-width: 520px) {
  .invite-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .invite-actions .primary,
  .invite-actions .secondary {
    justify-content: center;
    width: 100%;
  }
}

/* ── Subscription section ── */
.settings-primary-danger {
  background: #fff0f0;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  margin-top: 12px;
}
.settings-primary-danger:hover { background: #fee2e2; }
.plan-button-subscribed {
  border: 2px solid var(--green, #16a34a);
  background: #f0fdf4;
  color: var(--green, #16a34a);
  cursor: default;
  opacity: 0.85;
}