/* The [hidden] attribute must always win over any class that sets its
   own display value (flex/grid/block/etc) - without !important here,
   whichever rule happens to be defined later in the stylesheet wins by
   CSS's normal cascade rules, which silently breaks "hidden" for any
   element that also has a layout class. This one rule guarantees
   hidden is never fought by anything else in this file. */
[hidden] { display: none !important; }

:root {
  --ink: #202b3a;
  --ink-soft: #5c6b7d;
  --paper: #faf6ec;
  --paper-dim: #efe7d4;
  --gold: #c9974c;
  --berry: #b8456f;
  --line: #d8cfb8;
  --radius: 10px;

  /* Dashboard "chrome" cards sit directly on the dark page background —
     data surfaces (member rows, wall cards) stay on --paper as before. */
  --card-bg: #1b2333;
  --card-bg-soft: #202a3d;
  --card-border: #313e58;
  --text-ondark: #f4f1ea;
  --text-ondark-soft: #93a1b8;
  --green: #4ade80;
  --green-dim: #1c7a3d;

  /* The two variables the theme toggle actually switches — everything
     else above is a "chrome card" color that already happens to look
     right against either page background once these two are set
     correctly, since dashboard cards are already one shade lighter
     than the page itself rather than an absolute color. */
  --page-bg: var(--ink);
  --page-text: var(--paper);
  /* For recessed/inset elements (text inputs, a copyable URL field) —
     deliberately a shade darker than --card-bg in dark mode (the usual
     "sunken field" look), and a shade of light gray in light mode
     rather than reusing --card-bg-soft's warm off-white, since a
     recessed field reads as "sunken" more clearly against a neutral
     gray than a same-toned cream. */
  --field-bg: #0e1521;
}

/* Applied to <html> (not body) by the inline script in <head>, so the
   right theme is set before the page paints at all — flipping it after
   first paint would flash the wrong theme for a moment on every load. */
:root[data-theme="light"] {
  --page-bg: #f4f1ea;
  --page-text: #202b3a;
  --card-bg: #ffffff;
  --card-bg-soft: #f6f3ec;
  --card-border: #e2ddd0;
  --text-ondark: #202b3a;
  --text-ondark-soft: #5c6b7d;
  --field-bg: #f0f0f0;
}

.admin-badge {
  background: var(--gold);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 4px;
}

.intake-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.intake-loading {
  text-align: center;
  color: var(--ink-soft, #6b7d92);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 60px 0;
}

.intake-layout {
  display: flex;
  align-items: flex-start;
}
.intake-layout .add-section { flex: 0 0 60%; min-width: 0; margin-right: 32px; margin-bottom: 0; }
.form-row.form-row-date { grid-template-columns: 1fr 1fr 1fr; }
.intake-preview {
  flex: 1 1 0;
  min-width: 0;
  position: sticky;
  top: 24px;
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 26px 24px;
}
.intake-preview-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.intake-preview-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-ondark);
  margin: 0 0 18px;
  line-height: 1.3;
}
.intake-preview-card {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  margin-bottom: 18px;
}
.intake-preview-desc {
  font-size: 14px;
  color: var(--text-ondark-soft);
  line-height: 1.6;
  margin: 0 0 18px;
}
.intake-wall-mock {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 18px 20px;
}
.intake-wall-mock-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.intake-wall-mock-msg {
  font-size: 13.5px;
  color: var(--text-ondark-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--card-border);
}
.intake-wall-mock-msg:last-of-type { border-bottom: none; padding-bottom: 4px; }
.intake-wall-mock-msg strong {
  display: block;
  color: var(--text-ondark);
  font-size: 13.5px;
  margin-bottom: 2px;
}
.intake-wall-mock-features {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}
.intake-wall-mock-features span {
  font-size: 12px;
  color: var(--text-ondark-soft);
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 12px;
  margin-right: 8px;
  margin-top: 6px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .intake-layout { flex-direction: column; }
  .intake-layout .add-section { margin-right: 0; margin-bottom: 32px; width: 100%; }
  .intake-preview { position: static; width: 100%; }
}

.section-note {
  color: var(--text-ondark-soft);
  font-size: 13px;
  margin: -8px 0 20px;
}
.section-note code {
  background: var(--field-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.code-row { display: flex; }

.thank-you {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
}
.thank-you h2 {
  font-family: 'Fraunces', serif;
  margin: 0 0 8px;
}
.thank-you p {
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.thank-you-link-box {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 20px;
  text-align: left;
}
.thank-you-link-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.thank-you-link-row {
  display: flex;
  gap: 8px;
}
.thank-you-link-row input {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.btn-secondary {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--gold); border-color: var(--gold); color: #1c1408; }

.consent-block {
  background: var(--paper-dim);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.consent-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 6px;
}
.checkbox-row input[type="checkbox"] {
  width: auto;
  padding: 0;
  accent-color: var(--gold);
}
.app-branding-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}
.app-branding-card .section-label { color: var(--gold); }
.app-branding-card .section-note { color: var(--ink-soft); }
.app-branding-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.app-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #fff;
}
.app-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  padding: 4px;
}
#app-logo-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reset-password-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
  margin-left: 8px;
}
.reset-password-btn:hover { background: rgba(201,151,76,0.12); }
.reset-flag {
  color: var(--berry);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  margin-left: 6px;
}


.logout-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: 1px solid #445267;
  color: #9fb0c3;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  cursor: pointer;
}
.logout-btn:hover { color: #fff; border-color: #6b7d92; }

.whoami-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: #6b7d92;
  margin: 8px 0 0;
}

.collapsible {
  margin-bottom: 20px;
}
.collapsible summary {
  cursor: pointer;
  color: var(--gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 10px 0;
  list-style: none;
}
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary:hover { color: #fff; }
.collapsible .card-form { margin-top: 12px; }

.admins-section { margin-top: 8px; }
.admins-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-row {
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-username {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  font-weight: 600;
}
.admin-role-tag {
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  margin-left: 8px;
}
.admin-role-tag.super { background: var(--gold); color: #fff; }
.admin-scope {
  font-size: 12px;
  color: var(--ink-soft);
}

.group-edit-form {
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 16px;
  margin-top: 8px;
}
.group-name-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-width: 0;
}
.group-name-btn:hover .group-name { text-decoration: underline; }
.group-card-info { min-width: 0; flex: 1; }


/* ---------- Tabs ---------- */
.tabs {
  max-width: 960px;
  margin: 0 auto 32px;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid #2c3a4d;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--text-ondark-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.tab-btn:hover { color: var(--text-ondark); }
.tab-panel { margin-bottom: 48px; }

/* ---------- Stat cards ---------- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-icon {
  font-size: 22px;
  margin-bottom: 2px;
}
.stat-icon[hidden] { display: none; }
.stat-card[hidden] {
  display: none;
}
.stat-number {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 600;
}
.stat-label {
  font-size: 12px;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.messages-today-card {
  background: var(--card-bg);
  color: var(--text-ondark);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.messages-today-card h3 {
  font-family: 'Fraunces', serif;
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text-ondark);
}
.messages-today-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.messages-today-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.channel-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text-ondark-soft);
  text-transform: uppercase;
}
.channel-breakdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.breakdown-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}
.breakdown-row .breakdown-count {
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
}
.breakdown-row.is-sent { color: var(--green); }
.breakdown-row.is-failed { color: #e8708f; }
.breakdown-row.is-pending { color: var(--gold); }
.breakdown-row.is-disabled { color: var(--text-ondark-soft); font-style: italic; }
.stat-subtitle {
  font-size: 10.5px;
  color: var(--text-ondark-soft);
  margin-top: 2px;
}

/* ---------- New item dropdown (replaces the flat Quick Actions bar) ---------- */
.new-item-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 24px 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.new-item-dropdown { position: relative; }
.new-item-btn {
  background: var(--card-bg);
  color: var(--text-ondark);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.new-item-btn:hover { border-color: var(--gold); }
.new-item-btn .caret { color: var(--gold); font-size: 11px; }
.new-item-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px;
  min-width: 220px;
  z-index: 20;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.new-item-menu-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
  margin: 2px 8px 8px;
}
.new-item-menu .quick-action-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-ondark);
  padding: 9px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
}
.new-item-menu .quick-action-btn:hover { background: var(--card-bg); color: var(--gold); }

/* ---------- Setup progress banner (dashboard) ---------- */
.setup-progress-banner {
  background: linear-gradient(155deg, var(--card-bg-soft), var(--card-bg));
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  color: var(--text-ondark);
}
.setup-progress-banner-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
}
.setup-progress-banner-top span:last-child {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
}
.setup-progress-track {
  height: 7px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.setup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}
.setup-progress-banner-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.setup-progress-banner-list li {
  font-size: 13px;
  color: var(--text-ondark-soft);
  margin-right: 18px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.setup-progress-banner-list li.done { color: var(--green); text-decoration: line-through; }
.setup-progress-banner-link {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}
.setup-progress-banner-link:hover { text-decoration: underline; }

/* ---------- Hero "Today's Celebrations" card ---------- */
.hero-today-card {
  background: linear-gradient(155deg, var(--card-bg-soft), var(--card-bg));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 20px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.hero-today-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ondark-soft);
  text-transform: uppercase;
}
.hero-today-main {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hero-today-emoji { font-size: 44px; line-height: 1; }
.hero-today-number {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--text-ondark);
  line-height: 1;
}
.hero-today-names {
  flex: 1;
  min-width: 200px;
  color: var(--text-ondark-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- Quick Look bar ---------- */
.quicklook-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 28px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-ondark-soft);
  font-size: 14px;
}
.ops-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  max-width: 1080px;
  margin: -14px auto 28px;
}
.ops-summary-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.ops-summary-item-alert {
  border-color: rgba(232,112,143,0.4);
}
.ops-summary-icon {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}
.ops-summary-value {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text-ondark);
  line-height: 1.1;
}
.ops-summary-label {
  display: block;
  font-size: 12px;
  color: var(--text-ondark-soft);
  margin-top: 4px;
}
.quicklook-label {
  font-weight: 700;
  color: var(--text-ondark);
  padding-right: 8px;
  border-right: 1px solid var(--card-border);
}
.quicklook-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quicklook-item strong {
  color: var(--gold);
  font-size: 16px;
  margin-left: 2px;
}

/* ---------- Upcoming digest (forward-looking, unlike the daily report which looks back) ---------- */
.upcoming-digest-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 28px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.upcoming-digest-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 12px;
  cursor: pointer;
  list-style: none;
}
.upcoming-digest-header::-webkit-details-marker { display: none; }
.upcoming-digest-header::marker { content: ''; }
.upcoming-digest-chevron {
  color: var(--text-ondark-soft);
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.15s ease;
}
details:not([open]) > .upcoming-digest-header .upcoming-digest-chevron { transform: rotate(-90deg); }
.upcoming-digest-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--gold);
  margin: 0;
}
.upcoming-digest-count {
  font-size: 12.5px;
  color: var(--text-ondark-soft);
  margin-left: auto;
}
.upcoming-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 480px) { .upcoming-summary-grid { grid-template-columns: 1fr; } }
.upcoming-summary-box {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.upcoming-summary-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
  margin: 0 0 8px;
}
.upcoming-summary-lines p {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-ondark);
}
.upcoming-summary-lines p:last-child { margin-bottom: 0; }
.upcoming-summary-empty { color: var(--text-ondark-soft); font-style: italic; }
.upcoming-digest-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--card-bg-soft);
}
.upcoming-digest-row:last-child { border-bottom: none; }
.upcoming-digest-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.upcoming-filter-btn {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-ondark-soft);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12.5px;
  cursor: pointer;
}
.upcoming-filter-btn:hover { border-color: var(--gold); color: var(--text-ondark); }
.upcoming-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1c1408;
  font-weight: 600;
}
.upcoming-digest-date {
  color: var(--text-ondark-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  width: 54px;
  flex-shrink: 0;
}
.upcoming-digest-name {
  color: var(--text-ondark);
  font-size: 14px;
  flex: 1;
  min-width: 0;
}
.upcoming-digest-group { color: var(--text-ondark-soft); font-size: 12.5px; }
.upcoming-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.upcoming-badge-landmark { background: rgba(201,151,76,0.16); color: var(--gold); }
.upcoming-badge-birthday { background: rgba(74,222,128,0.16); color: var(--green); }
.upcoming-badge-anniversary { background: rgba(107,182,245,0.16); color: #6bb6f5; }
@media (max-width: 480px) {
  .upcoming-digest-row { flex-wrap: wrap; }
  .upcoming-digest-name { flex-basis: 100%; order: 3; }
}

/* ---------- Delivery Health ---------- */
.section-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.8px;
  color: var(--text-ondark-soft);
  text-transform: uppercase;
  max-width: 1080px;
  margin: 0 auto 10px;
  padding: 0 4px;
}
.delivery-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto 28px;
}
.health-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 22px;
}
.health-card h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-ondark);
}
.donut-chart-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
}
.donut-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-ondark);
}
#success-donut-progress { transition: stroke-dashoffset 0.6s ease; }
.health-card-caption {
  text-align: center;
  color: var(--text-ondark);
  font-weight: 600;
  font-size: 13.5px;
}
.health-card-subtitle {
  display: block;
  color: var(--text-ondark-soft);
  font-weight: 400;
  font-size: 12.5px;
  margin-top: 2px;
}
.trend-number {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--text-ondark);
  margin-bottom: 8px;
}
.trend-chart {
  width: 100%;
  height: 90px;
  display: block;
}

/* ---------- Pending / Failures pill bar ---------- */
.pending-pill-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 12px 22px;
  margin-bottom: 28px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--gold);
}
.pending-pill-item strong {
  font-size: 14px;
  color: var(--text-ondark);
  margin: 0 3px;
}
.pending-pill-divider {
  width: 1px;
  height: 16px;
  background: var(--card-border);
}

/* ---------- AI Assistant ---------- */
.ai-assistant-card {
  background: linear-gradient(155deg, var(--card-bg-soft), var(--card-bg));
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
  /* Matches .messages-today-card exactly — without this, these two
     cards stretched to the full width of their container while the
     message summary card above them stayed capped at 1080px and
     centered, so the three no longer lined up on wide screens. */
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.ai-assistant-header {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.ai-assistant-header::-webkit-details-marker { display: none; }
.ai-assistant-header::marker { content: ''; }
.ai-assistant-chevron {
  color: var(--text-ondark-soft);
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.15s ease;
}
details:not([open]) > .ai-assistant-header .ai-assistant-chevron { transform: rotate(-90deg); }
.ai-assistant-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--text-ondark);
}
.ai-assistant-summary {
  color: var(--text-ondark-soft);
  font-size: 13.5px;
  font-style: italic;
  margin: 0 0 14px;
}
.ai-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
:root[data-theme="light"] .ai-suggestion-row { background: rgba(0,0,0,0.035); }
.ai-suggestion-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ai-suggestion-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  gap: 2px;
}
.ai-suggestion-text {
  color: var(--text-ondark-soft);
  font-size: 13px;
}
.ai-suggestion-title {
  color: var(--text-ondark);
  font-size: 13.5px;
  font-weight: 700;
}
.ai-suggestion-row-alert {
  background: rgba(232, 112, 143, 0.1);
  border: 1px solid rgba(232, 112, 143, 0.35);
}
.ai-suggestion-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.ai-suggestion-btn:hover { background: #d9a95c; }
.ai-suggestion-btn:disabled { opacity: 0.6; cursor: default; }
.ai-suggestion-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-suggestion-btn-secondary {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
}
.ai-suggestion-btn-secondary:hover { background: rgba(255,255,255,0.06); }
:root[data-theme="light"] .ai-suggestion-btn-secondary:hover { background: rgba(0,0,0,0.04); }

/* ---------- Birthday Wall ---------- */
.wall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.wall-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wall-header select {
  background: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink);
}

.wall-filters {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wall-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wall-filter-row select {
  width: auto;
  background: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink);
}
.wall-inline-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
}
.wall-inline-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

.advanced-filters-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 4px 18px;
  margin-bottom: 4px;
}
.advanced-filters-header {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  color: var(--text-ondark);
  font-weight: 600;
  font-size: 14px;
}
.advanced-filters-chevron { color: var(--gold); font-size: 12px; }
.advanced-filters-body {
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wall-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
  margin: 0;
  padding-right: 8px;
  border-right: 1px solid var(--card-border);
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text-ondark);
  font-size: 13px;
}
.toggle-switch input { display: none; }
.toggle-slider {
  width: 34px;
  height: 19px;
  background: var(--card-border);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}
.toggle-switch input:checked + .toggle-slider { background: var(--gold); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(15px); }

.wall-settings-dropdown { position: relative; }
.wall-settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px;
  min-width: 220px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.wall-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
}
.wall-settings-field select { width: 100%; }

.wall-inline-label input[type="number"] {
  width: 56px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 2px 4px;
  font-size: 13px;
}
.wall-inline-label select {
  width: auto;
  background: none;
  border: none;
  font-size: 13px;
}

.wall-grid {
  /* Centred, like the downloaded poster: a short list sits in the middle. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.wall-grid > * { flex: 0 1 190px; min-width: 150px; }

/* ---------- Card Design tab ---------- */
.carddesign-preset-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.carddesign-preset-card label {
  color: var(--text-ondark-soft);
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.3px;
}

.carddesign-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.carddesign-preview-col {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
}
.carddesign-col-title {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-ondark-soft);
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 14px;
}
.carddesign-preview-frame {
  aspect-ratio: 1 / 1;
  background: #c9d0dc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 16px;
}
.carddesign-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.carddesign-preview-btn { width: 100%; margin-bottom: 4px; }
.carddesign-custom-upload {
  border-top: 1px solid var(--card-border);
  margin-top: 14px;
  padding-top: 12px;
}
.carddesign-dropzone-hint {
  color: var(--text-ondark-soft) !important;
  margin: 0 0 8px !important;
}
.carddesign-dropzone {
  position: relative;
}
.carddesign-dropzone-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px dashed var(--card-border);
  border-radius: 10px;
  padding: 22px 12px;
  cursor: pointer;
  color: var(--text-ondark-soft);
  font-size: 13px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.carddesign-dropzone-label:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.carddesign-dropzone-label.drag-active {
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
  background: var(--card-bg-soft);
}
.carddesign-dropzone-icon { font-size: 22px; }
.carddesign-dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.carddesign-remove-custom-btn { margin-top: 8px; }

.wall-card {
  background: var(--paper);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
}
.wall-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
  border: 3px solid var(--paper-dim);
}
.wall-avatar-placeholder {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 28px;
  color: var(--ink-soft);
  margin: 0 auto 10px;
  border: 3px solid var(--line);
}
.wall-card.anniversary .wall-avatar-placeholder {
  background: repeating-linear-gradient(45deg, var(--paper-dim) 0 6px, var(--paper) 6px 12px);
}
.wall-card.birthday .wall-avatar-placeholder {
  background: var(--paper-dim);
}
.wall-name {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 2px;
}
.wall-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 0;
}
.wall-emoji { font-size: 13px; }

/* ---------- Today card extras ---------- */
.delivery-status {
  font-size: 11.5px;
  opacity: 0.85;
  margin: -8px 0 10px;
}
.celebration-card-preview {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
  display: block;
}
.today-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.download-btn {
  text-decoration: none;
  display: inline-block;
}
.whatsapp-direct-sent-note {
  font-size: 12.5px;
  color: var(--text-ondark-soft);
  align-self: center;
}

/* ---------- Groups ---------- */
.groups-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.group-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  flex-wrap: wrap;
}
.group-card-main {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.group-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.group-logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.join-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-dim);
  border-radius: 14px;
  padding: 3px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  margin-top: 4px;
  max-width: 100%;
}
.join-link-badge > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.join-link-badge .join-link-copy { flex-shrink: 0; }

.join-qr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.join-qr-thumb {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}
.join-qr-download {
  color: var(--gold);
  font-size: 12px;
  text-decoration: underline;
}

.share-group-card {
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 20px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.share-group-qr {
  width: 84px;
  height: 84px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
}
.share-group-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
  margin: 0 0 4px;
}
.share-group-url {
  color: var(--text-ondark);
  font-size: 13.5px;
  margin: 0 0 10px;
  word-break: break-all;
}
.share-group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.join-link-copy {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  text-decoration: underline;
  padding: 0;
}


.group-name {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  margin: 0 0 4px;
}
.member-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 400;
}
.group-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Templates ---------- */
.templates-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 14px;
}
.templates-header-row h3 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  margin: 0;
  color: var(--text-ondark);
}
.template-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-pill-dark {
  background: var(--card-bg-soft);
  color: var(--text-ondark-soft);
  border: 1px solid var(--card-border);
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
}
.filter-pill-dark.active {
  background: var(--gold);
  color: #1c1408;
  border-color: var(--gold);
  font-weight: 600;
}

.templates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
  border-radius: 10px;
  padding: 14px 18px;
}
.template-row-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.template-row-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.template-row-preview {
  flex: 1;
  min-width: 120px;
  margin: 0;
  color: var(--text-ondark-soft);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.template-row-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}
.template-tag {
  background: var(--card-border);
  color: var(--text-ondark);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.template-tag.scope { background: var(--gold); color: #1c1408; }
.template-tag.occasion-birthday { background: #e0a86e; color: #3a2408; }
.template-tag.occasion-anniversary { background: #c9a3e0; color: #2f1a3d; }
.template-tag.channel-sms { background: #93a1b8; color: #14202f; }
.template-tag.channel-email { background: #6fa3d8; color: #0c2035; }
.template-tag.channel-whatsapp { background: var(--green); color: #0a2312; }
.template-tag.channel-whatsapp_individual { background: #7fd9c4; color: #0a2312; }
.template-tag.tone-tag {
  background: var(--card-bg-soft);
  color: var(--text-ondark);
  text-transform: none;
  border: 1px solid var(--card-border);
}
.template-tag.creator-tag {
  background: none;
  color: var(--text-ondark-soft);
  text-transform: none;
  border: 1px dashed var(--card-border);
}
.template-row-detail textarea,
.template-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  resize: vertical;
  margin-bottom: 10px;
}
.template-actions { display: flex; gap: 8px; align-items: center; }

.variable-token-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.variable-token {
  background: var(--card-bg-soft);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 4px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  cursor: pointer;
}
.variable-token:hover { background: var(--gold); color: #1c1408; }
#template-form .variable-token-row {
  background: none;
}
#template-form .variable-token {
  background: var(--paper-dim);
  color: var(--berry);
  border: 1px solid var(--berry);
}
#template-form .variable-token:hover { background: var(--berry); color: var(--paper); }

/* ---------- Delivery history ---------- */
.messages-directory-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 22px;
}

.history-filters {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Ledger filters and pagination ---------- */
.ledger-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ledger-filters input, .ledger-filters select {
  width: auto;
}
#ledger-search-input {
  flex: 1;
  min-width: 180px;
}
.ledger-created-before-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-ondark-soft);
  white-space: nowrap;
}
.ledger-created-before-label input { width: auto; }
#ledger-day-input {
  width: 80px;
  flex: none;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.pagination-page-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
}
.pagination-bar .filter-pill:disabled {
  opacity: 0.4;
  cursor: default;
}

.card-select-checkbox {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}
.card-select-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.ledger-batch-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--text-ondark-soft);
}
.ledger-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-ondark-soft);
}
.ledger-select-all input {
  width: 16px;
  height: 16px;
}
.ledger-selected-count {
  font-weight: 600;
  color: var(--text-ondark);
}

.history-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-pill {
  background: var(--paper);
  color: var(--ink-soft);
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12.5px;
  cursor: pointer;
}
.filter-pill.active {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
}
.history-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.history-filter-row select {
  width: auto;
  min-width: 130px;
}
#history-search-input {
  flex: 1;
  min-width: 180px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  background: none;
  color: var(--text-ondark);
  border-radius: 10px;
  overflow: hidden;
}
.history-table th, .history-table td {
  text-align: left;
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--card-border);
}
.history-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
}
.sortable-th {
  cursor: pointer;
  user-select: none;
}
.sortable-th:hover { color: var(--gold); }
.status-pill {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
}
.status-sent { background: rgba(74,222,128,0.18); color: var(--green); }
.status-failed { background: rgba(184,69,111,0.22); color: #e8708f; }
.status-skipped { background: rgba(201,151,76,0.2); color: var(--gold); }
.status-shared { background: rgba(74,222,128,0.18); color: var(--green); }

.view-attempts-btn {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-ondark-soft);
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.view-attempts-btn:hover { border-color: var(--gold); color: var(--gold); }
.attempts-single {
  font-size: 11.5px;
  color: var(--text-ondark-soft);
}
.attempts-detail-row td {
  background: var(--card-bg-soft);
  padding: 10px 14px;
}
.attempts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attempt-line {
  font-size: 12.5px;
  color: var(--text-ondark-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.completion-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}
.completion-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.completion-percent {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-ondark);
}
.completion-bar-track {
  background: var(--card-border);
  border-radius: 8px;
  height: 14px;
  overflow: hidden;
}
.completion-bar-fill {
  background: linear-gradient(90deg, var(--gold), var(--green));
  height: 100%;
  border-radius: 8px;
  transition: width 0.4s ease;
}
.completion-caption {
  font-size: 12px;
  color: var(--text-ondark-soft);
  margin: 6px 0 0;
}



.topbar-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto 16px;
  padding: 0 24px;
}
.app-logo {
  order: 0;
  flex-shrink: 0;
  height: 60px;
  width: auto;
  max-width: 200px;
  border-radius: 10px;
  object-fit: contain;
}
.org-logo {
  order: 2;
  flex-shrink: 0;
  height: 60px;
  width: auto;
  max-width: 110px;
  border-radius: 10px;
  object-fit: contain;
}
.org-logo.org-logo-leftpos {
  order: 0;
}

.welcome-block {
  max-width: 640px;
  margin: 0 auto 8px;
  padding: 0 24px;
  text-align: center;
}
.welcome-block h1 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}
.welcome-block p {
  color: #b9c6d6;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 28px;
}



* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.topbar {
  padding: 48px 24px 32px;
  text-align: center;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  flex: 1;
  min-width: 0;
  order: 1;
}

.brand-mark {
  color: var(--gold);
  font-size: 22px;
}

.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.3px;
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  /* "CelebrationHub" is one unbreakable word — a flex sibling (a
     group's uploaded logo) can correctly shrink this box per normal
     flex rules, but the text itself has no word-boundary to wrap at,
     so it was rendering at full width regardless and visually bleeding
     behind the logo sitting right where flex layout believed this box
     legitimately ended. Shrinking the text itself, rather than relying
     on word-wrap as the only defense, is what actually keeps it fully
     visible next to a real logo on a narrow phone screen. */
  .brand-name { font-size: 22px; }
  .brand-mark { font-size: 16px; }
  .app-logo, .org-logo { max-width: 70px; height: 44px; }
}

.tagline {
  color: var(--text-ondark-soft);
  font-size: 15px;
  font-style: italic;
  font-family: 'Fraunces', serif;
  margin: 0;
}

/* ---------- Public join page: plain-text header (no pill container),
   matching the exact mockup layout: brand name, then the group name as a
   separate gold subtitle when on a branded join link, then one welcome
   sentence, with any logos shown small and centered below ---------- */
.group-name-subtitle {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 4px 0 10px;
}
/* ---------- Public join page: form sections ---------- */
.form-section-heading {
  font-family: 'Fraunces', serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-section-heading:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.form-section-heading .optional { font-family: 'Inter', sans-serif; font-weight: 400; }

.occasion-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.occasion-toggle-btn {
  flex: 1;
  background: #fff;
  border: none;
  border-right: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  color: var(--ink-soft);
}
.occasion-toggle-btn:last-child { border-right: none; }
.occasion-toggle-btn.active {
  background: var(--paper-dim);
  color: var(--ink);
  font-weight: 600;
}

.toggle-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.toggle-slider-wrap {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle-slider-wrap input { display: none; }
.toggle-slider-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.toggle-slider-track::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}
.toggle-slider-wrap input:checked + .toggle-slider-track { background: var(--gold); }
.toggle-slider-wrap input:checked + .toggle-slider-track::before { transform: translateX(16px); }

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper-dim);
  color: var(--ink-soft);
  font-size: 11px;
  cursor: help;
  flex-shrink: 0;
}

.icon-field-wrap { position: relative; }
.icon-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}
.icon-field-wrap input { padding-left: 34px; }

.photo-upload-row {
  margin-bottom: 18px;
}
.photo-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
  padding: 24px 16px;
  width: 100%;
  border: 2px dashed var(--line);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.photo-upload-icon {
  font-size: 22px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.photo-upload-text-main {
  font-size: 13.5px;
  color: var(--ink-soft);
}
.photo-upload-subtext {
  font-size: 11.5px;
  color: var(--ink-soft);
  opacity: 0.75;
}
.photo-upload-zone.drag-active {
  border-color: var(--gold);
  border-style: solid;
  background: var(--paper-dim);
}
.photo-upload-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.checkbox-row-circle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--ink-soft);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.checkbox-row-circle input[type="checkbox"]:checked {
  border-color: var(--gold);
  background: var(--gold);
}
.checkbox-row-circle input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #1c1408;
}

.form-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.form-footer-row .form-hint { margin: 0; }

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ---------- Admin sidebar shell (public/admin/index.html only) ---------- */
.admin-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.admin-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 28px;
}
.admin-sidebar-brand .brand-mark { color: var(--gold); font-size: 18px; }
.admin-sidebar-brand .brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--text-ondark);
}
.sidebar-app-logo {
  /* No border or shadow — the text mark it replaces never had a boxed
     look either, so this should sit flush and native in the sidebar,
     not read as an uploaded image with a frame around it. */
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  display: block;
}
.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 0 12px;
}
.admin-sidebar-nav .tab-btn {
  text-align: left;
  border-bottom: none;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.admin-sidebar-nav .tab-btn.active {
  background: var(--gold);
  color: var(--ink);
  border-bottom-color: transparent;
}
.admin-sidebar-nav .tab-btn:hover:not(.active) { color: var(--text-ondark); background: rgba(255,255,255,0.05); }
:root[data-theme="light"] .admin-sidebar-nav .tab-btn:hover:not(.active) { background: rgba(0,0,0,0.04); }
.admin-nav-divider {
  height: 1px;
  background: var(--card-border);
  margin: 10px 12px;
}
.admin-sidebar-footer {
  padding: 16px 24px 0;
  border-top: 1px solid var(--card-border);
  margin-top: 12px;
}
.admin-sidebar-identity { margin-bottom: 10px; }
.admin-sidebar-name {
  color: var(--text-ondark);
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}
.admin-sidebar-group {
  color: var(--gold);
  font-size: 12.5px;
  margin: 2px 0 0;
}
.admin-sidebar-logout-btn {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-ondark-soft);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  cursor: pointer;
}
.admin-sidebar-logout-btn:hover { color: var(--text-ondark); border-color: var(--gold); }
.admin-theme-toggle-btn { display: block; width: 100%; margin-top: 8px; }

.admin-main {
  flex: 1;
  min-width: 0;
}
/* The base `main` rule (shared with the public landing page) centers a
   960px column with auto margins — great on a full-width page, but next
   to the sidebar it leaves a huge lopsided gap since it centers within
   whatever space is left over, not within the viewport. Here it should
   just hug the sidebar with a fixed gutter and use the room it's given. */
.admin-main main {
  max-width: 1200px;
  margin: 0;
  padding: 0 32px 80px;
}
.admin-main-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.admin-main-header .app-logo,
.admin-main-header .org-logo {
  height: 44px;
  max-width: 180px;
  /* The uploaded banner has its own dark background baked in rather
     than being transparent — in dark mode that already blends with the
     page; in light mode, without this, it would read as a stray dark
     rectangle rather than an intentional badge. A light border plus a
     soft shadow reads as "this is a badge" in either mode, rather than
     needing a second, separately-uploaded light-mode image. */
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
:root[data-theme="light"] .admin-main-header .app-logo {
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.admin-main-greeting {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: 17px;
}
.admin-main-header .new-item-dropdown { margin-left: auto; }

.theme-segmented-control {
  display: inline-flex;
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.theme-segment-btn {
  background: none;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-ondark-soft);
  cursor: pointer;
  white-space: nowrap;
}
.theme-segment-btn:hover { color: var(--text-ondark); }
.theme-segment-btn.active {
  background: var(--gold);
  color: #1c1408;
}
@media (max-width: 700px) {
  .theme-segmented-control { order: 3; margin-left: 0; }
}

/* Hidden on desktop — only shown under the mobile breakpoint below. */
.sidebar-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-toggle-btn span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--text-ondark);
  border-radius: 1px;
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 190;
}

/* Below this width, the sidebar becomes a slide-in drawer (toggled by
   #sidebar-toggle-btn) instead of staying in the page flow — the
   earlier approach kept it in-flow as a horizontal scrolling strip
   across the top, which on an actual phone clipped the brand name and
   crammed every nav item, the "New Celebration" button, and the group
   logo into one unreadable row. A proper off-canvas drawer means the
   header only ever has to fit the hamburger button, logo, and greeting
   — everything else lives in a full-height panel that's entirely
   offscreen until opened. */
@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .sidebar-toggle-btn { display: flex; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }
  .admin-sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop:not([hidden]) { display: block; }
  .admin-sidebar-brand { margin-bottom: 28px; padding: 0 24px; }
  .admin-sidebar-nav { flex-direction: column; padding: 0 12px; }
  .admin-sidebar-nav .tab-btn { white-space: normal; }
  .admin-nav-divider { width: auto; height: 1px; margin: 10px 12px; }
  .admin-sidebar-footer {
    padding: 16px 24px 0;
    border-top: 1px solid var(--card-border);
    border-left: none;
    margin-top: 12px;
    margin-left: 0;
    display: block;
  }
  .admin-sidebar-identity { margin-bottom: 10px; }
  .admin-main-header { padding: 18px 16px; }
  .admin-main main { padding: 0 16px 60px; }
}

.section-label {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.5px;
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 20px;
}

/* ---------- Today section ---------- */
.today-section { margin-bottom: 48px; }

.today-section-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 32px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.today-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.today-header .section-label { margin-bottom: 0; }

.run-check-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  cursor: pointer;
}
.run-check-btn:hover { background: rgba(201,151,76,0.12); }
.run-check-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Quick Actions ---------- */
.quick-actions {
  max-width: 960px;
  margin: -8px auto 24px;
  padding: 0 24px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.quick-action-btn {
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.quick-action-btn:hover { background: #fff; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay[hidden] {
  display: none;
}
.modal-box {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
}
.modal-box h3 {
  font-family: 'Fraunces', serif;
  margin: 0 0 6px;
  font-size: 19px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#celebration-history-modal .modal-box {
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.celebration-history-list {
  overflow-y: auto;
  margin: 16px 0;
  padding-right: 4px;
}
.celebration-history-year {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.celebration-history-year:last-child { margin-bottom: 0; }
.celebration-history-year-heading {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 8px;
}
.celebration-history-landmark {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(201,151,76,0.15);
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
}
.celebration-history-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
.celebration-history-board-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--gold);
}

/* ---------- Today work queue (compact rows, click to expand) ---------- */
.today-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.queue-row {
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
}
.queue-row-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.queue-emoji { font-size: 22px; flex-shrink: 0; }
.queue-name-block { flex: 1; min-width: 160px; }
.queue-name {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  margin: 0;
}
.queue-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 2px 0 0;
}
.queue-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.status-badge.status-sent { background: #dff5e6; color: #1c7a3d; }
.status-badge.status-failed { background: #fceef2; color: var(--berry); }
.status-badge.status-skipped { background: var(--paper-dim); color: var(--ink-soft); }
.status-badge.status-pending { background: #fff4de; color: #9a6b12; }
.queue-open-btn {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.queue-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-dim);
  display: none;
}
.queue-row.expanded .queue-detail { display: block; }
.queue-detail .celebration-card-preview { max-width: 280px; }
.queue-detail textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  resize: vertical;
  margin-bottom: 10px;
}

.today-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.today-card {
  background: linear-gradient(155deg, var(--berry), #8a3157);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.today-card.anniversary {
  background: linear-gradient(155deg, var(--gold), #916230);
}

.today-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  margin: 0 0 4px;
}

.today-card .occasion {
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 14px;
}

.today-card textarea {
  width: 100%;
  min-height: 100px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  padding: 10px;
  resize: vertical;
}

.copy-btn {
  margin-top: 10px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border: none;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.copy-btn:hover { background: #fff; }

/* ---------- Form ---------- */
.add-section { margin-bottom: 56px; }

.card-form {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 28px;
}

/* ---------- Public join page: dark/gold theme, matching the admin
   dashboard's color scheme — scoped to #person-form specifically so the
   admin dashboard's own light-cream forms (which also use .card-form)
   are completely unaffected ---------- */
#person-form {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
}
#person-form label { color: var(--text-ondark-soft); }
#person-form .optional { color: var(--text-ondark-soft); opacity: 0.8; }
#person-form input[type="text"],
#person-form input[type="tel"],
#person-form input[type="email"],
#person-form input[type="number"],
#person-form select {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
}
#person-form input::placeholder { color: var(--text-ondark-soft); opacity: 0.6; }
#person-form .form-section-heading {
  color: var(--gold);
  border-top-color: var(--card-border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
#person-form .form-section-heading .optional { text-transform: none; letter-spacing: normal; }
#person-form .occasion-toggle {
  border-color: var(--card-border);
}
#person-form .occasion-toggle-btn {
  background: var(--card-bg-soft);
  color: var(--text-ondark-soft);
  border-right-color: var(--card-border);
}
#person-form .occasion-toggle-btn.active {
  background: var(--gold);
  color: #1c1408;
}
#person-form .icon-field-wrap input { padding-left: 34px; }
#person-form .photo-upload-icon { color: var(--gold); }
#person-form .photo-upload-zone { color: var(--text-ondark-soft); border-color: var(--gold); }
#person-form .photo-upload-text-main { color: var(--text-ondark-soft); }
#person-form .photo-upload-subtext { color: var(--text-ondark-soft); }
#person-form .photo-upload-zone.drag-active { background: var(--card-bg-soft); }
#person-form .consent-block {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
}
#person-form .consent-title,
#person-form .consent-subtitle { color: var(--text-ondark); }
#person-form .checkbox-row-circle { color: var(--text-ondark-soft); }
#person-form .checkbox-row-circle input[type="checkbox"] { border-color: var(--gold); }
#person-form .checkbox-row-circle input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
#person-form .checkbox-row-circle input[type="checkbox"]:checked::after { color: #1c1408; }
#person-form .toggle-slider-track { background: var(--card-border); }
#person-form .info-icon { background: var(--card-bg-soft); color: var(--text-ondark-soft); border: 1px solid var(--card-border); }
#person-form .form-hint { color: var(--text-ondark-soft); }
#person-form #year-toggle-label { color: var(--text-ondark-soft); }
#person-form .btn-primary {
  background: var(--gold);
  color: #1c1408;
}
#person-form .btn-primary:hover { background: #b8863f; }
#person-form .form-footer-row .form-hint { color: var(--text-ondark-soft); }

#template-form {
  background: var(--card-bg);
  color: var(--text-ondark);
  border: 1px solid var(--card-border);
}
#template-form .form-hint { color: var(--text-ondark-soft); }
#template-form .form-hint code {
  background: var(--card-border);
  color: var(--text-ondark);
  padding: 1px 5px;
  border-radius: 4px;
}
.template-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-field-full { grid-column: 1 / -1; }

.checkbox-inline-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
  cursor: pointer;
}
.checkbox-inline-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.link-btn {
  background: none;
  border: none;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.provision-admin-section {
  border-top: 1px dashed var(--line);
  margin-top: 8px;
  padding-top: 16px;
}
.provision-admin-heading {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  color: var(--ink);
}

.optional {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12px;
}

input, select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  resize: vertical;
}
/* Matches the height of a single-line input beside it (e.g. Welcome
   headline) while staying resize:vertical from the shared rule above —
   scoped to this one field rather than a global textarea height, since
   other textareas across the app (template bodies, message previews)
   are deliberately multi-row via their own rows="" attribute, which an
   explicit global height would silently override. */
.group-settings-panel textarea[name="welcome_message"] { height: 42px; }

/* select elements can render at a different height than text/number
   inputs even with identical padding (a common cross-browser quirk in
   how native dropdowns compute their own height) — pin both to the same
   explicit height specifically in the date row, rather than risk a
   global height on every input type across the app (checkboxes, file
   inputs, etc. have their own sizing needs). */
.form-row-date input,
.form-row-date select {
  height: 42px;
}
.form-row-4col input,
.form-row-4col select {
  height: 42px;
}

input:focus, select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.file-label input { padding: 7px 12px; }

.form-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 4px 0 16px;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 12px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: #34455c; }

.form-error {
  color: #b8456f;
  background: #fceef2;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 12px;
}
.form-error.form-success {
  color: #1c7a3d;
  background: #dff5e6;
}

.report-test-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.send-test-report-result {
  font-size: 13px;
  color: var(--text-ondark-soft);
}
.send-test-report-result.send-test-report-ok { color: var(--green); }
.send-test-report-result.send-test-report-warn { color: #e8708f; }
.send-test-digest-result {
  font-size: 13px;
  color: var(--text-ondark-soft);
}
.send-test-digest-result.send-test-report-ok { color: var(--green); }
.send-test-digest-result.send-test-report-warn { color: #e8708f; }

.group-admins-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}
.group-admins-heading {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-ondark);
  margin: 0 0 10px;
}
.group-admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.group-admin-row:last-child { border-bottom: none; }
.group-admin-name { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-admin-username { color: var(--ink-soft); font-size: 12px; }
.group-admin-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.group-admin-status-active { background: rgba(74,222,128,0.16); color: var(--green); }
.group-admin-status-disabled { background: rgba(232,112,143,0.14); color: #e8708f; }
.group-invite-admin-details { margin-top: 12px; }

.group-settings-panel {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 18px;
}
.group-panel-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.form-row-4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .form-row-4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .form-row-4col { grid-template-columns: 1fr; } }
.group-panel-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.group-invite-subheading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 0 12px;
}
@media (max-width: 600px) {
  .group-card { padding: 14px; }
  .group-settings-panel { padding: 16px; }
  .join-link-badge { font-size: 10.5px; }
  .group-admin-row { flex-wrap: wrap; }
  .group-admin-name { flex-basis: 100%; white-space: normal; }
  .group-panel-actions .btn-primary { width: 100%; }
}

/* ---------- Ledger grid ---------- */
.ledger-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.export-members-btn { margin-left: auto; text-decoration: none; }

.count-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--text-ondark-soft);
}

.members-directory-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 22px;
}
.members-directory-card .ledger-header { margin-bottom: 18px; }
.members-directory-card .ledger-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  color: var(--text-ondark);
  margin: 0;
}

.members-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.members-table thead th {
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
  padding: 0 14px 6px;
  font-weight: 600;
}
.member-row { background: var(--paper); }
.member-row td {
  padding: 12px 14px;
  color: var(--ink);
  font-size: 13.5px;
  vertical-align: middle;
}
.member-row td:first-child { border-radius: 10px 0 0 10px; }
.member-row td:last-child { border-radius: 0 10px 10px 0; }
.member-select-cell { width: 34px; }
.member-cell-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar-sm, .avatar-placeholder-sm {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}
.avatar-sm { object-fit: cover; border: 2px solid var(--line); }
.avatar-placeholder-sm {
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.member-name {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.member-name-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.member-no-contact {
  font-style: italic;
  color: var(--ink-soft);
}
.member-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.row-menu-wrap { position: relative; }
.row-menu-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.row-menu-btn:hover { border-color: var(--ink); color: var(--ink); }
.row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  min-width: 150px;
  z-index: 15;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.row-menu-item:hover { background: var(--paper-dim); }
.row-menu-item-danger { color: var(--berry); }
.member-edit-row td {
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 16px;
}

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}

.person-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: transform 0.15s ease;
}
.person-card:hover { transform: rotate(-0.4deg) translateY(-2px); }

.card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 26px;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-dim);
  border: 2px solid var(--line);
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper-dim);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.card-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  margin: 0;
}

.card-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 2px 0 0;
}

.postmark {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px dashed var(--berry);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--berry);
  text-align: center;
  line-height: 1.1;
}

.postmark.anniversary { border-color: var(--gold); color: var(--gold); }

.card-meta {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.card-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.edit-person-btn, .generate-card-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
}
.edit-person-btn:hover, .generate-card-btn:hover { border-color: var(--ink); color: var(--ink); }
.download-pdf-link {
  font-size: 11.5px;
  color: var(--ink-soft);
  text-decoration: underline;
}
.person-edit-form {
  background: var(--paper-dim);
  border-radius: 8px;
  padding: 14px;
  margin-top: 10px;
}
.person-edit-form .form-row {
  grid-template-columns: 1fr;
}
.person-edit-form .form-error { margin-top: 8px; }


.delete-btn {
  background: none;
  border: none;
  color: var(--berry);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.empty-state {
  color: var(--text-ondark-soft);
  font-style: italic;
  font-family: 'Fraunces', serif;
}

.footer {
  text-align: center;
  color: var(--text-ondark-soft);
  font-size: 12.5px;
  padding: 24px;
  border-top: 1px solid #2c3a4d;
}

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row.form-row-date { grid-template-columns: 1fr; }
  .delivery-health-grid { grid-template-columns: 1fr; }
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Boards tab: dark/gold theme, scoped to this tab specifically
   (matching the provided mockup) rather than changing the rest of the
   admin dashboard's light-card convention used elsewhere ---------- */
.board-admin-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 20px;
  color: var(--text-ondark);
}
.board-admin-card-highlight {
  border: 2px solid var(--gold);
}
.board-admin-heading {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.board-admin-note {
  color: var(--text-ondark-soft);
  font-size: 14px;
  margin: 0 0 18px;
}
.board-admin-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.board-admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.board-admin-field span {
  font-size: 13px;
  color: var(--text-ondark-soft);
}
.board-admin-field input,
.board-admin-filter select {
  background: var(--field-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-ondark);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  height: auto;
}
.board-admin-field input::placeholder { color: #5c6b7d; }

.board-admin-btn {
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}
.board-admin-btn-gold { background: var(--gold); color: #1c1408; }
.board-admin-btn-gold:hover { filter: brightness(1.05); }
/* These two are deliberately dark-backgrounded regardless of the app's
   own light/dark theme (same reasoning as the red danger button below
   never changing either) — so their text has to be a fixed light color
   too, not var(--text-ondark), which would otherwise flip to dark navy
   in light mode and become nearly unreadable against a background that
   never got any lighter. */
.board-admin-btn-muted { background: #3a4558; color: #f4f1ea; }
.board-admin-btn-muted:hover { background: #46536a; }
.board-admin-btn-dark { background: #16202f; color: #f4f1ea; border: 1px solid var(--card-border); }
.board-admin-btn-dark:hover { background: #1e2b3d; }
.board-admin-btn-danger { background: #7a2e22; color: #f4dfd8; }
.board-admin-btn-danger:hover { background: #90372a; }

.board-admin-link-btn {
  background: none;
  border: none;
  color: var(--text-ondark-soft);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}
.board-admin-link-btn:hover { color: var(--gold); }

.board-admin-detail-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.board-admin-detail-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--text-ondark);
  margin: 0;
}
.board-admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: #16202f;
  color: #f4f1ea;
}
.board-admin-status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7686;
}
.board-admin-status-pill.board-admin-status-open::before { background: #4caf6d; }
.board-admin-status-pill.board-admin-status-closed::before { background: #8a94a3; }
.board-admin-status-pill.board-admin-status-delivered::before { background: var(--gold); }

/* ---------- Boards data table ---------- */
.board-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.board-filter-tab {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark-soft);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.board-filter-tab:hover { border-color: var(--gold); color: var(--text-ondark); }
.board-filter-tab.active { background: rgba(201, 151, 76, 0.14); border-color: var(--gold); color: var(--gold); }

.board-table-wrap {
  margin-top: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
}
.board-table-header-row, .board-table-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 22px;
}
.board-table-header-row {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-ondark-soft);
  border-bottom: 1px solid var(--card-border);
}
.board-table-row {
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
}
.board-table-row:last-child { border-bottom: none; }
.board-table-row:hover { background: rgba(201, 151, 76, 0.06); }
.board-table-col-contributions { color: var(--text-ondark-soft); font-size: 13.5px; }
.board-table-col-actions a {
  color: var(--gold);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.board-table-col-actions a:hover { text-decoration: underline; }
.board-table-empty { padding: 30px 22px; color: var(--text-ondark-soft); }
.board-table-sortable {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.board-table-sortable:hover { color: var(--gold); }
.board-sort-arrow {
  font-size: 10px;
  color: var(--gold);
  width: 10px;
  display: inline-block;
}
@media (max-width: 820px) {
  .board-table-header-row { display: none; }
  .board-table-row { grid-template-columns: 1fr; gap: 6px; }
}

.board-admin-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.board-admin-share-label {
  color: var(--text-ondark-soft);
  font-size: 14px;
  flex-shrink: 0;
}
.board-admin-share-url {
  flex: 1;
  min-width: 180px;
  background: var(--field-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-ondark);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-admin-share-url:hover { border-color: var(--gold); }

.board-admin-qr {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  margin: 0 0 18px;
  display: block;
}

.board-admin-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 480px;
}
.board-admin-actions-grid .board-admin-btn { flex: 0 0 calc(50% - 6px); }

.board-admin-error {
  color: #e39a8a;
  font-size: 14px;
  margin: 14px 0 0;
}

.board-admin-messages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 16px;
}
.board-admin-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-admin-filter span {
  color: var(--text-ondark-soft);
  font-size: 14px;
}
.board-admin-filter select { padding: 8px 10px; }

.board-admin-message-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  display: flex;
  gap: 18px;
}
.board-admin-message-photo {
  width: 100px;
  height: 120px;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  border-radius: 10px;
  object-fit: cover;
}
.board-admin-message-body { flex: 1; min-width: 0; }
.board-admin-message-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.board-admin-message-name {
  color: var(--gold);
  font-weight: 700;
  font-size: 15px;
}
.board-admin-message-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-ondark);
}
.board-admin-message-actions {
  display: flex;
  gap: 18px;
}
.board-admin-message-action-link {
  background: none;
  border: none;
  color: var(--text-ondark-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.board-admin-message-action-link:hover { color: var(--gold); }
.board-admin-message-action-link.board-admin-message-action-danger { color: #d9734e; }
.board-admin-message-action-link.board-admin-message-action-danger:hover { color: #e88b64; }

.board-admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.board-admin-page-btn {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
}
.board-admin-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.board-admin-page-label {
  color: var(--text-ondark-soft);
  font-size: 14px;
}

#boards-list .board-admin-message-card,
#boards-list-wrap .board-admin-board-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 12px;
  color: var(--text-ondark);
  cursor: pointer;
}
.board-admin-board-row:hover { border-color: var(--gold); }
.board-admin-board-row-title {
  color: var(--text-ondark);
  font-weight: 700;
  font-size: 15px;
}
.board-admin-board-row-meta {
  color: var(--text-ondark-soft);
  font-size: 13px;
  margin: 4px 0 0;
}

/* Keeps wide data tables (members ledger, message history) scrollable
   within their own card on narrow screens, instead of overflowing past
   the card's edge - the table itself keeps its natural column widths
   (so cells never get squished unreadably), the container just clips
   and scrolls horizontally when there isn't enough room. */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Settings tab (System Settings & Diagnostics) ---------- */
.settings-header { margin-bottom: 20px; }
.settings-title {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--text-ondark);
  margin: 0 0 6px;
}
.settings-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 24px;
}
.settings-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.appearance-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.appearance-radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ondark);
  cursor: pointer;
}
.appearance-radio-row input[type="radio"] {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.settings-card-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.settings-card-title-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-ondark-soft);
  text-transform: none;
  letter-spacing: 0;
}
.env-health-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.env-health-badge-ok { color: var(--green); background: rgba(74,222,128,0.14); }
.env-health-badge-warn { color: #e8708f; background: rgba(184,69,111,0.16); }

.env-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .env-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .env-grid { grid-template-columns: 1fr; } }
.env-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.env-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.env-item-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-ondark);
}
.env-item-status {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.env-item-ok { color: var(--green); }
.env-item-bad { color: #e8708f; }
.env-item-var {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--text-ondark-soft);
  margin: 0;
}

.retention-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.retention-input-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-ondark-soft);
}
.retention-input-label input {
  width: 220px;
  background: var(--card-bg-soft);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-ondark);
  font-size: 15px;
  text-align: center;
}
.retention-hint { margin: 0; align-self: flex-end; padding-bottom: 8px; }

.audit-table-wrap { overflow-x: auto; }
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.audit-table thead th {
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-ondark-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.audit-table tbody td {
  padding: 12px 14px;
  color: var(--text-ondark);
  border-bottom: 1px solid var(--card-border);
}
.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-role { color: var(--text-ondark-soft); font-size: 12px; }
.audit-action { color: #6bb6f5; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.audit-timestamp { color: var(--text-ondark-soft); font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }

.settings-card-danger { border-color: var(--berry); margin-top: 8px; }
.settings-card-title-danger { color: var(--berry); }
.danger-zone-heading {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-ondark);
  margin: 12px 0 6px;
}

/* ---------- Danger Zone (group account deletion) ---------- */
.danger-zone {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--berry);
}
.danger-zone-title {
  color: var(--berry);
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}
.danger-zone-card {
  background: var(--card-bg);
  border: 1px solid var(--berry);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 14px;
  max-width: 560px;
}
.danger-zone-card p { margin: 0 0 10px; }
.danger-zone-card p:last-of-type { margin-bottom: 0; }
.btn-danger {
  background: var(--berry);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.btn-danger:hover { opacity: 0.9; }


/* ---------- Structured status cards (join link expired / not found) ---------- */
.status-card-wrap {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}
.status-card {
  width: 100%;
  max-width: 460px;
  background: #1E293B;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
}
.status-card-brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--text-ondark);
  margin: 0 0 28px;
}
.status-card-badge {
  display: inline-block;
  background: #0e1521;
  border: 2px solid;
  border-radius: 12px;
  padding: 28px 36px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.status-badge-gold { border-color: var(--gold); color: var(--gold); }
.status-badge-blue { border-color: #4f9fd9; color: #4f9fd9; }
.status-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-ondark);
  margin: 0 0 12px;
}
.status-card-desc {
  font-size: 14px;
  color: var(--text-ondark-soft);
  line-height: 1.6;
  margin: 0 0 28px;
}
.status-card-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.status-btn-primary, .status-btn-secondary {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}
.status-btn-primary { background: var(--gold); color: #1c1408; }
.status-btn-secondary { background: #0e1521; color: var(--text-ondark); border: 1px solid var(--card-border); }
.status-card-footer {
  font-size: 12.5px;
  color: #6b7d92;
  margin: 0;
}

/* ---------- Card Design: library layout ---------- */
.carddesign-page-title {
  font-family: 'Cambria', 'Georgia', serif;
  font-size: 26px;
  color: var(--text-ondark);
  margin: 0 0 16px;
}
#carddesign-logo-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
#carddesign-logo-form input[type="file"] {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 480px) {
  #carddesign-logo-form { flex-wrap: wrap; }
}
.cd-upload-logo-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cd-upload-logo-btn:hover { background: rgba(201, 151, 76, 0.1); }
.cd-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 20px;
}
.cd-left-col { flex: 1.6 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cd-right-col {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 380px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
@media (max-width: 860px) {
  .cd-layout { flex-direction: column; }
  .cd-right-col {
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.cd-preset-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.cd-preset-row > label { flex: 1 1 220px; }

.cd-gallery-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}
.cd-gallery-header h3 { flex-shrink: 0; margin-right: 20px; }
.cd-collapsible-header {
  justify-content: space-between;
}
.cd-collapsible-header .slot-field-group-chevron {
  color: var(--gold);
  font-size: 18px;
}
.slot-designer-toggle-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  justify-content: space-between;
}
.slot-designer-toggle-header .slot-field-group-chevron {
  font-size: 20px;
  color: var(--gold);
}
.cd-gallery-filter-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.cd-gallery-filter-label {
  color: var(--text-ondark-soft);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10px;
}
.cd-gallery-filter-wrap select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* ---------- Upload zone ---------- */
.cd-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px dashed var(--gold);
  border-radius: 12px;
  padding: 22px 16px;
  cursor: pointer;
  text-align: center;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}
.cd-upload-dropzone:hover { background: rgba(201, 151, 76, 0.06); }
.cd-upload-dropzone.drag-active { background: rgba(201, 151, 76, 0.1); }
.cd-upload-icon { font-size: 18px; }
.cd-upload-hint { font-weight: 400; font-size: 11.5px; color: var(--text-ondark-soft); }

.cd-upload-staging {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.cd-upload-staging-filename {
  font-size: 12.5px;
  color: var(--text-ondark-soft);
  margin: 0 0 12px;
  word-break: break-all;
}
.cd-upload-staging-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cd-upload-staging-row > label { flex: 1 1 160px; }
.cd-upload-staging-actions { display: flex; gap: 10px; }

/* ---------- Gallery grid ---------- */
.cd-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .cd-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .cd-gallery-grid { grid-template-columns: 1fr; } }

.slot-designer-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.55);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px;
}
.slot-designer-fullscreen-card {
  background: var(--page-bg, #0e1521);
  border-radius: 20px;
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  min-height: calc(100vh - 32px);
  /* Deliberately no overflow:hidden here — an ancestor with any
     overflow value other than visible becomes position:sticky's
     containing block, and this one doesn't itself scroll, so a sticky
     descendant would compute against a static box instead of the real
     scrolling container and just never move. The header's own
     border-radius already gives the rounded-top look without needing
     the parent to clip anything. */
}
.slot-designer-fullscreen-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--card-bg);
  padding: 18px 32px;
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--card-border);
  border-radius: 20px 20px 0 0;
}
.slot-designer-fullscreen-body {
  padding: 24px 32px 60px;
}
.slot-designer-fullscreen-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  margin: 0;
  flex: 1;
  color: var(--text-ondark);
}
.slot-designer-layout {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  max-width: 1300px;
  align-items: flex-start;
}
.slot-designer-options { flex: 0 0 calc(50% - 10px); min-width: 0; }
@media (max-width: 800px) { .slot-designer-layout { flex-direction: column; } }
.slot-field-group {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 4px 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.slot-field-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  text-align: left;
}
.slot-field-group-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
}
.slot-field-group-chevron {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-ondark-soft);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.slot-field-group-body { padding-bottom: 12px; }
.slot-field-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-ondark-soft);
  margin-bottom: 8px;
  flex: 1;
  min-width: 140px;
}
.slot-field-label input, .slot-field-label select {
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark);
}
.slot-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.slot-designer-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.slot-designer-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}
.slot-designer-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  margin: 0;
  color: var(--text-ondark);
}
.slot-designer-header-actions { display: flex; gap: 10px; flex-shrink: 0; }
.slot-designer-preview {
  flex: 0 0 calc(50% - 10px);
  min-width: 0;
  background: var(--card-bg-soft);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 18px;
}
.slot-designer-preview-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}
.slot-preview-state-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-ondark-soft);
  white-space: nowrap;
}
.slot-preview-state-label select { width: auto; }
.slot-safe-badge {
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
}
.slot-optional-hint {
  font-weight: 400;
  color: var(--text-ondark-soft);
  font-size: 11.5px;
}
.slot-designer-preview-frame {
  background: #0f172a;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slot-designer-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cm-preview-frame {
  background: #0f172a;
  border: 1px solid var(--gold);
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  padding: 6px;
}
.cm-preview-card {
  height: 100%;
  width: 100%;
  background: linear-gradient(160deg, #241a3a, #100c1e);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
.cm-preview-photo {
  width: 30%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.cm-preview-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.cm-preview-message {
  font-style: italic;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 90%;
  overflow-wrap: break-word;
}
.cm-preview-org {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold);
  margin: 0;
}
.cm-message-card {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cm-message-card:hover { border-color: var(--gold); }
.cm-message-text {
  font-size: 13px;
  color: var(--text-ondark);
  margin: 0 0 8px;
  line-height: 1.5;
}
.cm-message-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.cm-message-meta {
  font-size: 11.5px;
  color: var(--text-ondark-soft);
  margin: 0;
}
.cm-scope-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(232,184,75,0.15);
  color: var(--gold);
  white-space: nowrap;
}
.slot-qc-panel {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}
.slot-qc-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
  margin: 0 0 6px;
}
.slot-qc-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-ondark-soft);
  margin: 0 0 8px;
  line-height: 1.5;
}
.slot-qc-check:last-child { margin-bottom: 0; }
.slot-qc-check-icon { flex-shrink: 0; font-weight: 700; width: 14px; }
.slot-qc-check-safe .slot-qc-check-icon { color: #4ade80; }
.slot-qc-check-warning .slot-qc-check-icon { color: #e8b84b; }
.slot-qc-check-info .slot-qc-check-icon { color: var(--text-ondark-soft); }
.slot-qc-check strong { color: var(--text-ondark); }

.cd-gallery-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.cd-gallery-card.active-birthday { border-color: var(--gold); }
.cd-gallery-card.active-anniversary { border-color: #4f9fd9; }
.cd-gallery-card-selectable { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.cd-gallery-card-selectable:hover { border-color: var(--gold); transform: translateY(-1px); }
.cd-gallery-thumb {
  height: 110px;
  background: #0e1521;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cd-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.slot-tpl-thumb-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.slot-tpl-thumb-clickable:hover, .slot-tpl-thumb-clickable:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
  outline: none;
}
.slot-tpl-thumb-placeholder {
  color: var(--text-ondark-soft);
  font-size: 12px;
  text-align: center;
  padding: 0 12px;
}
.cd-gallery-card-footer { padding: 10px 12px; }
.cd-gallery-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cd-gallery-card-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-ondark);
  margin: 0;
}
.cd-gallery-card-occasion {
  font-size: 11px;
  color: var(--text-ondark-soft);
  margin: 2px 0 8px;
}
.cd-active-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.cd-shared-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-ondark-soft);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.cd-upload-shared-hint {
  font-size: 12px;
  color: var(--gold);
  background: rgba(201, 151, 76, 0.1);
  border: 1px solid rgba(201, 151, 76, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0 0;
}
.cd-select-hint {
  color: var(--text-ondark-soft);
  font-size: 11.5px;
  font-style: italic;
  white-space: nowrap;
}
.cd-delete-btn {
  background: none;
  border: none;
  color: var(--text-ondark-soft);
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.cd-delete-btn:hover { color: #e07a5f; }

/* ---------- Live preview panel ---------- */
.cd-preview-panel { position: sticky; top: 20px; }
.cd-occasion-toggle {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}
.cd-occasion-btn {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-ondark-soft);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cd-occasion-btn.active { background: var(--gold); border-color: var(--gold); color: #1c1408; }
.cd-preview-frame { margin-bottom: 14px; }
.carddesign-preview-frame.cd-preview-frame {
  border: 2px solid var(--gold);
  background: #0e1521;
}
.cd-save-btn { width: 100%; margin-top: 14px; }
.cd-rotate-toggle-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-ondark);
  cursor: pointer;
  margin-bottom: 4px;
}
.cd-rotate-toggle-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
  cursor: pointer;
}
.cd-design-source-row {
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.cd-design-source-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-ondark);
  cursor: pointer;
  margin-top: 8px;
}
.cd-option-inline {
  align-items: center;
}
.cd-option-text { flex: 0 0 auto; }
.cd-info-btn {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 1px solid var(--text-ondark-soft);
  background: none;
  color: var(--text-ondark-soft);
  font-size: 10px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cd-info-btn:hover, .cd-info-btn.cd-info-btn-active {
  border-color: var(--gold);
  color: var(--gold);
}
.cd-info-popover {
  position: absolute;
  z-index: 600;
  max-width: 280px;
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.cd-info-popover p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-ondark);
}
.cd-design-source-option input[type="radio"] {
  accent-color: var(--gold);
  cursor: pointer;
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
}
.cd-design-source-option input[type="checkbox"] {
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.cd-design-source-warning-box {
  background: rgba(220, 90, 90, 0.1);
  border: 1px solid rgba(220, 90, 90, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
}
.cd-design-source-warning-title {
  font-size: 13px;
  font-weight: 700;
  color: #e88888;
  margin: 0;
}
.cd-design-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.cd-design-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg-soft);
  border: 2px solid var(--card-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-ondark);
  cursor: pointer;
  min-width: 0;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cd-design-picker-item.is-selected {
  border-color: var(--gold);
  background: rgba(232, 184, 75, 0.12);
}
.cd-design-picker-item input[type="checkbox"] {
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.cd-design-picker-item img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.cd-design-picker-item .cd-picker-check-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #1c1408;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.cd-design-picker-item.is-selected .cd-picker-check-badge {
  display: flex;
}
.cd-design-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.cd-rotate-hint {
  margin: 0 0 14px;
  font-size: 12px;
}

/* ==================== Celebration Impact Report ==================== */
.report-header-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 1080px;
}
.report-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.report-period-controls select {
  width: auto;
  min-width: 120px;
}
.report-period-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.report-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin-bottom: 20px;
}
.report-overview-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.report-overview-stat .stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-ondark);
  display: block;
}
.report-overview-stat .stat-label {
  font-size: 12px;
  color: var(--text-ondark-soft);
}
.report-section-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 1080px;
}
.report-section-title {
  font-family: 'Fraunces', serif;
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text-ondark);
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.report-table th, .report-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--card-border);
  font-size: 13px;
  color: var(--text-ondark);
}
.report-table th {
  color: var(--text-ondark-soft);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 480px) {
  /* Smaller cells mean more columns fit before a table needs to
     scroll at all — worth doing since the Attention table's action
     buttons (the whole point of that row) were confirmed to sit just
     past the visible edge on a phone-width screen otherwise. */
  .report-table th, .report-table td { padding: 6px 6px; font-size: 12px; }
  .report-table th { font-size: 10px; }
  .attention-fix-btn, .attention-request-btn { display: block; margin: 2px 0; }
}
.report-coverage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 13px;
}
.report-coverage-row > span:first-child {
  flex-shrink: 0;
  padding-right: 10px;
}
.report-coverage-row > span:last-child {
  text-align: right;
  min-width: 0;
  flex: 0 1 auto;
}
.report-coverage-row:last-child { border-bottom: none; }
.report-coverage-pct {
  font-weight: 700;
  color: var(--gold);
}
.report-engagement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
.report-engagement-item {
  text-align: center;
  background: var(--card-bg-soft);
  border-radius: 8px;
  padding: 10px;
}
.report-engagement-item .stat-value { font-size: 20px; font-weight: 700; display: block; color: var(--text-ondark); }
.report-engagement-item .stat-label { font-size: 11px; color: var(--text-ondark-soft); }
.report-attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 13px;
}
.report-attention-row:last-child { border-bottom: none; }
.report-empty-note { font-size: 13px; color: var(--text-ondark-soft); margin: 8px 0; }
.report-trend-chart {
  width: 100%;
  height: 160px;
  display: block;
}
.report-trend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-ondark-soft);
  margin-top: 4px;
  padding: 0 2px;
}
.design-usage-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.design-usage-bar-label {
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-ondark);
}
.design-usage-bar-track {
  flex: 1;
  background: var(--card-bg-soft);
  border-radius: 4px;
  height: 16px;
  overflow: hidden;
}
.design-usage-bar-fill {
  background: var(--gold);
  height: 100%;
  border-radius: 4px;
}
.design-usage-bar-count {
  width: 28px;
  text-align: right;
  color: var(--text-ondark-soft);
  flex-shrink: 0;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.health-category {
  background: var(--card-bg-soft);
  border-radius: 10px;
  padding: 14px;
}
.health-category-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-ondark-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-ondark);
  padding: 3px 0;
}
.health-row .health-dot { font-size: 11px; }
.deletion-bell-wrap {
  position: relative;
}
.deletion-bell-btn {
  position: relative;
  background: var(--card-bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-ondark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deletion-bell-btn:hover { border-color: var(--gold); }
.deletion-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #d9534f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.deletion-requests-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 500;
}

/* ==================== Report redesign: two-column dashboard layout ==================== */
.report-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 20px;
  max-width: 1080px;
  align-items: start;
  margin-bottom: 20px;
}
.report-col-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.report-col-main .report-section-card { margin-bottom: 0; max-width: none; }
.report-col-side {
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
}
.report-side-subhead {
  margin: 18px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  font-size: 13px;
}
.report-section-card--alert {
  border: 1px solid #c0574f;
}
.report-export-btn {
  text-decoration: none;
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.report-export-btn:hover { background: var(--gold); color: #1c1408; }
.report-overview-grid--dense {
  /* Exactly 8 stats always render here (7 counts + community
     contributions) — a fixed 4-column grid means they form a clean
     4-and-4 layout every time, rather than auto-fit computing however
     many columns fit the container width and leaving the 8th item
     orphaned alone on a second row (stretched or misaligned depending
     on viewport width, which is exactly what was reported: 7 fit on
     row one, the 8th sat alone on row two not lining up with them).
     max-width intentionally NOT overridden here — this used to set it
     to none, which let the grid stretch wider than every other report
     card (all of which keep the base 1080px max-width), which is
     exactly the mismatch that got reported.
  */
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.report-overview-grid--dense .report-overview-stat { padding: 10px 8px; }
.report-overview-grid--dense .stat-value { font-size: 20px; }
.report-overview-grid--dense .stat-label { font-size: 10px; }
@media (max-width: 700px) {
  .report-overview-grid--dense { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .report-two-col { grid-template-columns: 1fr; }
}

/* ==================== Report: collapsible sections + green "all clear" state ==================== */
details.report-section-card {
  padding: 20px;
}
details.report-section-card > summary.report-section-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.report-section-card > summary.report-section-summary::-webkit-details-marker { display: none; }
details.report-section-card > summary.report-section-summary::after {
  content: '\25BC';
  font-size: 11px;
  color: var(--text-ondark-soft);
  margin-left: 10px;
  transition: transform 0.15s;
}
details.report-section-card:not([open]) > summary.report-section-summary::after {
  transform: rotate(-90deg);
}
details.report-section-card:not([open]) > summary.report-section-summary {
  margin-bottom: 0;
}
.report-section-card--ok {
  border: 1px solid var(--green);
}

/* ==================== Compare with Previous Period ==================== */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.comparison-item {
  background: var(--card-bg-soft);
  border-radius: 10px;
  padding: 14px;
}
.comparison-item .stat-value { font-size: 22px; font-weight: 700; color: var(--text-ondark); display: block; }
.comparison-item .stat-label { font-size: 11px; color: var(--text-ondark-soft); text-transform: uppercase; }
.comparison-delta { font-size: 13px; font-weight: 700; margin-top: 4px; }
.comparison-delta--up { color: var(--green); }
.comparison-delta--down { color: #e0776e; }
.comparison-delta--flat { color: var(--text-ondark-soft); }

/* Card Designs: revert-to-built-in control under the preview label */
.cd-use-builtin-btn { margin: 0 0 12px; font-size: 13px; padding: 7px 14px; }

.cd-brand-color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cd-brand-color-row input[type="color"] { width: 44px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }
.cd-brand-btn { font-size: 13px; padding: 6px 12px; }

/* ======================= Platform Traction (super admin) ======================= */
.tr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tr-title { margin: 0 0 4px; font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--text-ondark); }
.tr-sub { margin: 0; color: var(--text-ondark-soft); font-size: 14px; }
.tr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-print-btn { background: linear-gradient(180deg, #e3bd77, #c9974c); color: #1c1408; border: none; padding: 10px 20px; border-radius: 24px; font-size: 14px; font-weight: 700; cursor: pointer; }
.tr-print-btn:hover { filter: brightness(1.06); }
.tr-loading { color: var(--text-ondark-soft); }
.tr-h { margin: 28px 0 12px; font-size: 17px; color: var(--text-ondark); font-weight: 600; }
.tr-hint { font-size: 12.5px; font-weight: 400; color: var(--text-ondark-soft); margin-left: 6px; }
.tr-note { font-size: 13px; color: var(--text-ondark-soft); margin: 10px 0 0; line-height: 1.5; }
.tr-muted { color: var(--text-ondark-soft); font-size: 12.5px; }
.tr-bad { color: #e5675c; font-weight: 600; }

.tr-impact { background: linear-gradient(135deg, #1b2333, #2a2416); border: 1px solid rgba(201,151,76,0.55); border-radius: 16px; padding: 20px 22px; color: #f4f1ea; }
.tr-impact-eyebrow { margin: 0 0 12px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tr-impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tr-impact-grid strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 36px; color: #f0d38e; line-height: 1.1; }
.tr-impact-grid span { font-size: 13.5px; color: #c9d0db; }

.tr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tr-kpis-sm { grid-template-columns: repeat(2, 1fr); }
.tr-kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; }
.tr-kpi strong { display: block; font-size: 26px; color: var(--text-ondark); line-height: 1.15; }
.tr-kpi span { display: block; font-size: 13px; color: var(--text-ondark-soft); margin-top: 2px; }
.tr-kpi em { display: block; font-style: normal; font-size: 12px; color: var(--gold); margin-top: 6px; }

.tr-funnel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 16px; }
.tr-step { display: grid; grid-template-columns: 1fr 190px 60px 60px; gap: 12px; align-items: center; padding: 8px 0; }
.tr-step + .tr-step { border-top: 1px solid var(--card-border); }
.tr-step-bar { height: 10px; border-radius: 999px; background: var(--card-bg-soft); overflow: hidden; }
.tr-step-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9974c, #f0cf86); border-radius: 999px; }
.tr-step-label { color: var(--text-ondark); font-size: 14px; order: -1; }
.tr-step strong { color: var(--text-ondark); text-align: right; }
.tr-step em { font-style: normal; color: var(--text-ondark-soft); text-align: right; font-size: 13px; }

.tr-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tr-chart { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px 10px; }
.tr-chart-head { display: flex; justify-content: space-between; color: var(--text-ondark-soft); font-size: 13.5px; margin-bottom: 10px; }
.tr-chart-head strong { color: var(--text-ondark); }
.tr-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; height: 128px; padding-top: 18px; align-items: end; }
.tr-bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.tr-bar i { display: block; width: 100%; min-height: 2px; background: linear-gradient(180deg, #e3bd77, #c9974c); border-radius: 4px 4px 0 0; }
.tr-bar b { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-ondark-soft); transform: translateY(-100%); pointer-events: none; }
.tr-bar-labels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 6px; }
.tr-bar-labels span { font-size: 10.5px; color: var(--text-ondark-soft); white-space: nowrap; }

.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tr-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; font-size: 14px; }
.tr-table th { text-align: left; padding: 10px 14px; color: var(--text-ondark-soft); font-weight: 600; font-size: 12.5px; background: var(--card-bg-soft); }
.tr-table td { padding: 10px 14px; color: var(--text-ondark); border-top: 1px solid var(--card-border); }
.tr-meter { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.tr-meter-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: var(--text-ondark); }
.tr-meter em { display: block; font-style: normal; font-size: 12px; color: var(--text-ondark-soft); margin-top: 6px; }
.tr-defs dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.tr-defs dt { color: var(--gold); font-weight: 600; }
.tr-defs dd { margin: 0; color: var(--text-ondark-soft); }

.tr-manage { background: var(--card-bg); border: 1px dashed var(--gold); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.tr-manage h4 { margin: 12px 0 8px; color: var(--text-ondark); }
.tr-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tr-manage label.tr-src { display: flex !important; flex-direction: row; gap: 10px; align-items: center; padding: 6px 0; margin: 0; color: var(--text-ondark); font-size: 14px; font-weight: 500; cursor: pointer; }
.tr-manage label.tr-src input[type="checkbox"] { width: 18px !important; height: 18px; margin: 0 !important; flex-shrink: 0; display: inline-block !important; accent-color: #c9974c; }
.tr-manage label.tr-src span { font-weight: 600; }
.tr-manage label.tr-src em { font-style: normal; color: var(--text-ondark-soft); font-size: 12.5px; font-weight: 400; }

@media (max-width: 900px) {
  .tr-impact-grid, .tr-kpis { grid-template-columns: repeat(2, 1fr); }
  .tr-charts, .tr-two, .tr-manage-grid { grid-template-columns: 1fr; }
  .tr-step { grid-template-columns: 1fr 70px 50px 50px; }
}

/* Print / Save as PDF: just the traction report, on white. */
@media print {
  body.tr-printing .admin-sidebar, body.tr-printing .admin-main-header, body.tr-printing .sidebar-toggle-btn,
  body.tr-printing .sidebar-backdrop, body.tr-printing .tab-panel:not(#tab-traction), body.tr-printing .tr-actions,
  body.tr-printing .tr-manage { display: none !important; }
  body.tr-printing { background: #fff !important; }
  /* Paper is always light, whatever theme the dashboard is in (dark
     cards and white headings would print as invisible text). */
  body.tr-printing {
    --page-bg: #ffffff; --page-text: #202b3a;
    --card-bg: #ffffff; --card-bg-soft: #f6f3ec; --card-border: #e2ddd0;
    --text-ondark: #202b3a; --text-ondark-soft: #5c6b7d;
    color: #202b3a;
  }
  /* Keep the desktop layout on paper (the narrow-screen rules would
     otherwise kick in at A4 width) and never leave a heading alone at
     the bottom of a page. */
  body.tr-printing .tr-impact-grid, body.tr-printing .tr-kpis { grid-template-columns: repeat(4, 1fr) !important; }
  body.tr-printing .tr-kpis-sm { grid-template-columns: repeat(2, 1fr) !important; }
  body.tr-printing .tr-charts, body.tr-printing .tr-two { grid-template-columns: 1fr 1fr !important; }
  body.tr-printing .tr-step { grid-template-columns: 1fr 150px 50px 50px !important; }
  body.tr-printing .tr-h { break-after: avoid; page-break-after: avoid; }
  body.tr-printing .tr-two > div, body.tr-printing .tr-charts { break-inside: avoid; }
  body.tr-printing #tab-traction { display: block !important; }
  body.tr-printing .tr-kpi, body.tr-printing .tr-chart, body.tr-printing .tr-funnel, body.tr-printing .tr-meter,
  body.tr-printing .tr-table, body.tr-printing .tr-impact { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.tr-src-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--card-border); padding: 4px 0; }
.tr-manage .tr-src-select { font-size: 12.5px; padding: 5px 8px; border-radius: 7px; width: auto !important; max-width: 240px; margin: 0 !important; }
.tr-src-tag { font-size: 12px; color: var(--text-ondark-soft); }

.tr-headline { margin: 0 0 10px; font-size: 15.5px; color: var(--text-ondark); }
.tr-headline strong { color: var(--gold); font-size: 17px; }
.tr-lifecycle { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 6px 16px; }
.tr-life-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.tr-life-n { width: 22px; height: 22px; border-radius: 11px; background: var(--card-bg-soft); color: var(--gold); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tr-life-stage { color: var(--text-ondark); font-size: 14px; }
.tr-life-row strong { color: var(--text-ondark); font-size: 15px; }
@media (max-width: 900px) { .tr-lifecycle { grid-template-columns: 1fr; } }
@media print { body.tr-printing .tr-lifecycle { grid-template-columns: 1fr 1fr !important; break-inside: avoid; } }

/* Product story strip + registration-to-memory flow (page 1 of the report) */
.tr-story { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.tr-story-item { flex: 1; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; text-align: center; }
.tr-story-item strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--gold); line-height: 1.1; }
.tr-story-item span { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-ondark); margin-top: 4px; }
.tr-story-item em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-ondark-soft); margin-top: 2px; }
.tr-story-arrow, .tr-flow-arrow { display: flex; align-items: center; color: var(--gold); font-size: 18px; }
.tr-flow { display: flex; align-items: stretch; gap: 6px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px; }
.tr-flow-step { flex: 1; text-align: center; padding: 6px 4px; }
.tr-flow-step strong { display: block; font-size: 30px; color: var(--text-ondark); line-height: 1.1; }
.tr-flow-step span { display: block; font-size: 13px; color: var(--text-ondark-soft); margin-top: 4px; }
.tr-table-compact th, .tr-table-compact td { padding: 8px 10px; font-size: 13px; }
@media (max-width: 900px) {
  .tr-story, .tr-flow { flex-wrap: wrap; }
  .tr-story-item { flex: 1 1 40%; } .tr-story-arrow { display: none; }
  .tr-flow-step { flex: 1 1 28%; } .tr-flow-arrow { display: none; }
}
@media print { body.tr-printing .tr-story, body.tr-printing .tr-flow { flex-wrap: nowrap !important; break-inside: avoid; }
  body.tr-printing .tr-story-arrow, body.tr-printing .tr-flow-arrow { display: flex !important; } }

/* ======================= Product Traction dashboard (tx-) ======================= */
.tx { --tx-gold: #c9974c; --tx-gold-2: #f0cf86; }
.tx-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 16px; border: 1px solid rgba(201,151,76,0.55);
  background: radial-gradient(circle at 15% 20%, rgba(201,151,76,0.12), transparent 40%), linear-gradient(135deg, #18213a, #10172a); color: #f4f1ea; }
.tx-hero::before, .tx-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(circle, #e8c47c 1.2px, transparent 1.6px), radial-gradient(circle, #f25f7a 1.2px, transparent 1.6px), radial-gradient(circle, #5ec4f2 1.2px, transparent 1.6px);
  background-size: 140px 90px, 190px 120px, 230px 80px; background-position: 10px 10px, 60px 40px, 120px 20px; }
.tx-hero::after { opacity: 0.25; background-size: 90px 70px, 160px 100px, 120px 140px; background-position: 40px 30px, 0 60px, 80px 0; }
.tx-hero > * { position: relative; }
.tx-hero-brand { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 24px; }
.tx-hero-brand img { width: 34px; height: 34px; }
.tx-hero-title { margin: 0; text-align: center; font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 600; color: var(--tx-gold-2); }
.tx-hero-meta { text-align: right; font-size: 13.5px; color: #c9d0db; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tx-hero-period { color: #f0d38e; font-weight: 600; }
.tx-hero-actions { margin-top: 4px; }
.tx-gold-btn { background: linear-gradient(180deg, #e3bd77, #c9974c); color: #1c1408; border: 0; padding: 9px 16px; border-radius: 9px; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.tx-ghost-btn { background: transparent; color: #f0d38e; border: 1px solid rgba(201,151,76,0.6); padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.tx-gold-btn:hover, .tx-ghost-btn:hover { filter: brightness(1.08); }

.tx-filters { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; gap: 10px 14px; align-items: end; margin: 14px 0 6px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(201,151,76,0.55); background: var(--card-bg); }
.tx-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-ondark-soft); margin: 0; }
.tx-filters select { width: 100% !important; margin: 0 !important; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }
.tx-filter-actions { display: flex; gap: 8px; }
.tx-chips { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.tx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; color: var(--text-ondark);
  border: 1px solid rgba(201,151,76,0.6); background: rgba(201,151,76,0.1); }
.tx-chip button { background: none; border: 0; color: var(--tx-gold); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }
.tx-filter-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--text-ondark-soft); }

.tx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tx-col { min-width: 0; }
.tx-h { margin: 22px 0 10px; font-size: 20px; font-weight: 600; color: var(--text-ondark); font-family: 'Fraunces', Georgia, serif; }
.tx-hint { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 400; color: var(--text-ondark-soft); margin-left: 6px; }
.tx-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.tx-card-title { margin: 0 0 10px; font-size: 14.5px; font-weight: 600; color: var(--text-ondark); }

.tx-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tx-kpi, .tx-tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 12px 14px; }
.tx-overview .tx-kpi:nth-child(-n+2) { border-color: rgba(201,151,76,0.75); }
.tx-kpi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.tx-kpi strong, .tx-tile strong { font-size: 30px; line-height: 1.1; color: var(--tx-gold-2); font-weight: 700; }
.tx-kpi span, .tx-tile > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-ondark); }
.tx-kpi em { display: block; font-style: normal; margin-top: 6px; font-size: 12px; color: var(--text-ondark-soft); }
.tx-delta { display: inline-block; flex-shrink: 0; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.tx-delta.up { background: rgba(74,222,128,0.14); color: #5fd88f; }
.tx-delta.down { background: rgba(229,103,92,0.15); color: #f08a80; }
.tx-delta.flat { background: rgba(147,161,184,0.15); color: var(--text-ondark-soft); }
.tx-dot { font-size: 11.5px; color: #5fd88f; white-space: nowrap; }

.tx-vital { padding: 7px 0; }
.tx-vital + .tx-vital { border-top: 1px solid var(--card-border); }
.tx-vital-top { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-ondark); margin-bottom: 6px; }
.tx-bar { height: 7px; border-radius: 999px; background: var(--card-bg-soft); overflow: hidden; flex: 1; }
.tx-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9974c, #f0cf86); }
.tx-bar-lg { height: 12px; }

.tx-funnel-step { width: var(--w); margin: 0 auto; text-align: center; padding: 10px 8px; border-radius: 12px;
  background: linear-gradient(180deg, #26324c, #1c2539); border: 1px solid rgba(201,151,76,0.35); color: #f4f1ea; }
.tx-funnel-step strong { display: block; font-size: 22px; color: #f0d38e; line-height: 1.1; }
.tx-funnel-step span { font-size: 12.5px; }
.tx-funnel-step em { font-style: normal; color: #93a1b8; }
.tx-funnel-link { display: flex; justify-content: center; height: 22px; position: relative; }
.tx-funnel-link::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dotted rgba(201,151,76,0.6); }
.tx-funnel-link span { position: relative; align-self: center; font-size: 11px; font-weight: 700; color: #1c1408; background: #e3bd77; padding: 1px 8px; border-radius: 999px; }

.tx-ret-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tx-ret-row div { border-left: 1px solid var(--card-border); padding-left: 8px; }
.tx-ret-row div:first-child { border-left: 0; padding-left: 0; }
.tx-ret-row span { display: block; font-size: 11.5px; color: var(--text-ondark-soft); }
.tx-ret-row strong { font-size: 22px; color: var(--text-ondark); }
.tx-ret-headline { margin: 10px 0 0; font-size: 13.5px; color: var(--text-ondark); }
.tx-ret-headline strong { color: var(--tx-gold-2); }
.tx-act { display: grid; grid-template-columns: 1fr 70px 26px 40px; gap: 8px; align-items: center; padding: 4px 0; font-size: 12.5px; color: var(--text-ondark); }
.tx-act strong { text-align: right; } .tx-act em { font-style: normal; color: var(--text-ondark-soft); text-align: right; }

.tx-ops-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tx-ops-head .tx-card-title { margin: 0; }
.tx-status { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tx-status.ok { background: rgba(74,222,128,0.14); color: #5fd88f; }
.tx-status.warn { background: rgba(240,196,106,0.16); color: #f0c46a; }
.tx-ops-table th, .tx-ops-table td { padding: 7px 8px; font-size: 12.5px; }
.tx-chart-card .tr-bars { height: 110px; }
.tx-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-ondark-soft); margin-bottom: 4px; }
.tx-trend { font-size: 12px; }

.tx-life { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.tx-life-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--card-border); font-size: 14px; color: var(--text-ondark); }
.tx-life-row strong { font-size: 15px; }
.tx-ico { width: 18px; height: 18px; fill: var(--tx-gold); }

.tx-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.tx-tile strong { font-size: 26px; }
.tx-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tx-meter { background: linear-gradient(180deg, rgba(201,151,76,0.16), rgba(201,151,76,0.06)); border: 1px solid rgba(201,151,76,0.55); border-radius: 12px; padding: 12px 14px; }
.tx-meter-top { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-ondark); margin-bottom: 8px; }
.tx-meter-top strong { color: var(--tx-gold-2); }
.tx-meter em { display: block; font-style: normal; font-size: 12px; color: var(--text-ondark-soft); margin-top: 6px; }
.tx-sources .tx-src { display: grid; grid-template-columns: 220px 1fr 30px 50px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; color: var(--text-ondark); }
.tx-src strong { text-align: right; } .tx-src em { font-style: normal; color: var(--text-ondark-soft); text-align: right; }

.tx-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.tx-def { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.tx-def p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-ondark-soft); }
.tx-pill { display: inline-block; justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1c1408; background: linear-gradient(180deg, #e3bd77, #c9974c); }
.tx-def-full { grid-column: 1 / -1; }
.tx-footer { margin: 12px 0 0; font-size: 12px; color: var(--text-ondark-soft); text-align: center; }

:root[data-theme="light"] .tx-funnel-step { background: linear-gradient(180deg, #2a3550, #1f2840); }
:root[data-theme="light"] .tx-kpi strong, :root[data-theme="light"] .tx-tile strong, :root[data-theme="light"] .tx-meter-top strong, :root[data-theme="light"] .tx-ret-headline strong { color: #a87a33; }

@media (max-width: 1150px) {
  .tx-grid { grid-template-columns: 1fr 1fr; }
  .tx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tx-hero { grid-template-columns: 1fr; text-align: center; }
  .tx-hero-meta { align-items: center; text-align: center; }
  .tx-grid, .tx-life, .tx-glossary, .tx-meters, .tx-overview { grid-template-columns: 1fr; }
  .tx-tiles { grid-template-columns: 1fr 1fr; }
  .tx-filters { grid-template-columns: 1fr; }
  .tx-sources .tx-src { grid-template-columns: 1fr 60px 24px 40px; }
}
@media print {
  body.tr-printing .tx-filters .tx-filter-actions, body.tr-printing .tx-hero-actions, body.tr-printing .tx-chips button { display: none !important; }
  body.tr-printing .tx-filters select { border: 0; appearance: none; -webkit-appearance: none; background: none; padding: 2px 0; font-weight: 600; }
  /* A4 is too narrow for three columns: two columns on paper, and the
     filter summary on one line rather than the stacked phone layout. */
  body.tr-printing .tx-grid { display: block !important; }
  body.tr-printing .tx-overview { grid-template-columns: repeat(4, 1fr) !important; }
  body.tr-printing .tx-funnel-step { --w: 70%; }
  body.tr-printing .tx-funnel-link { height: 16px; }
  body.tr-printing .tx-hero-title { font-size: 26px; }
  body.tr-printing .tx-def { grid-template-columns: 115px 1fr !important; }
  body.tr-printing .tx-filters { grid-template-columns: repeat(4, 1fr) !important; padding: 8px 12px; }
  body.tr-printing .tx-filter-note { font-size: 10.5px; }
  body.tr-printing .tx-hero { grid-template-columns: auto 1fr auto !important; text-align: left; }
  body.tr-printing .tx-hero-meta { align-items: flex-end !important; text-align: right !important; }
  body.tr-printing .tx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.tr-printing .tx-meters { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.tr-printing .tx-life, body.tr-printing .tx-glossary { grid-template-columns: 1fr 1fr !important; }
  body.tr-printing .tx-card, body.tr-printing .tx-kpi, body.tr-printing .tx-tile, body.tr-printing .tx-meter, body.tr-printing .tx-hero { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.tr-printing .tx-h { break-after: avoid; }
  body.tr-printing .tx-kpi strong, body.tr-printing .tx-tile strong, body.tr-printing .tx-meter-top strong { color: #a87a33 !important; }
}

/* Report title + collapsible definitions */
.tx-hero-brand img { width: 46px; height: 46px; }
.tx-hero-title { font-size: 28px; line-height: 1.2; }
.tx-hero-eyebrow { display: block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #c9d0db; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; margin-bottom: 4px; }
.tx-details { margin-top: 22px; }
.tx-summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; user-select: none; }
.tx-summary::-webkit-details-marker { display: none; }
.tx-summary::before { content: '\25B8'; color: var(--tx-gold); font-size: 16px; transition: transform .15s ease; display: inline-block; }
.tx-details[open] > .tx-summary::before { transform: rotate(90deg); }
.tx-summary:focus-visible { outline: 2px solid var(--tx-gold); outline-offset: 4px; border-radius: 4px; }
.tx-details .tx-when-open { display: none; }
.tx-details[open] .tx-when-open { display: inline; }
.tx-details[open] .tx-when-closed { display: none; }
@media (max-width: 760px) { .tx-hero-title { font-size: 22px; } .tx-hero-brand { justify-content: center; } .tx-hero-actions { justify-content: center; } }
@media print {
  body.tr-printing .tx-hero-title { font-size: 22px !important; }
  body.tr-printing .tx-summary-hint { display: none; }
  /* Closed definitions aren't printed at all (no heading with nothing under
     it); no trailing spacing that would spill onto an empty last page. */
  body.tr-printing .tx-details:not([open]) { display: none !important; }
  body.tr-printing #tab-traction, body.tr-printing #tr-body, body.tr-printing main { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  body.tr-printing .tx-footer { margin-bottom: 0; }
  body.tr-printing .tx-summary::before { display: none; }
}

.tx-link-btn { display: inline-block; text-decoration: none; }
.tx-email-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 2px 0; font-size: 13px; color: var(--text-ondark-soft); }
.tx-email-toggle { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; color: var(--text-ondark); font-weight: 500; }
.tx-email-toggle input { width: auto !important; margin: 0 !important; accent-color: #c9974c; }
.tx-text-btn { background: none; border: 0; padding: 0; color: #e0b876; font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; }
:root[data-theme="light"] .tx-text-btn { color: #a87a33; }
.tx-email-status { font-size: 12.5px; }
@media print { body.tr-printing .tx-email-row { display: none !important; } }

/* Keepsake email message (Templates tab) */
.km-card { margin-top: 28px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 18px 20px; }
.km-title { margin: 0 0 4px; font-size: 18px; color: var(--text-ondark); }
.km-row { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.km-row label { display: flex; flex-direction: column; gap: 4px; min-width: 240px; color: var(--text-ondark-soft); font-size: 13px; }
.km-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(147,161,184,0.15); color: var(--text-ondark-soft); margin-bottom: 6px; }
.km-badge.is-custom { background: rgba(201,151,76,0.18); color: #c9974c; }
.km-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; color: var(--text-ondark-soft); font-size: 13px; }
.km-field textarea { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.55; }
.km-placeholders { font-size: 12.5px; color: var(--text-ondark-soft); margin: 4px 0 12px; }
.km-placeholders button { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--card-border); background: var(--card-bg-soft); color: var(--text-ondark); cursor: pointer; margin: 2px 2px; }
.km-hint { display: block; margin-top: 4px; }
.km-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.km-save { background: linear-gradient(180deg, #e3bd77, #c9974c); color: #1c1408; border: 0; padding: 10px 18px; border-radius: 24px; font-weight: 700; cursor: pointer; }
.km-status { font-size: 13px; color: var(--text-ondark-soft); }
.km-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.km-modal-box { background: #fff; border-radius: 14px; width: min(680px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.km-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e6e1d6; color: #1f2633; font-size: 13px; }
.km-modal-head span { flex: 1; color: #5c6b7d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-modal-head button { border: 0; background: none; font-size: 24px; cursor: pointer; color: #5c6b7d; }
#km-frame { flex: 1; border: 0; width: 100%; }

.acct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.acct-row input[type="email"] { width: 300px !important; max-width: 100%; margin: 0 !important; }
.acct-status { font-size: 13px; color: var(--text-ondark-soft); }
.acct-group-pick { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; margin: 10px 0 0 !important; font-size: 13px; color: var(--text-ondark-soft); }
.acct-group-pick select { width: auto !important; min-width: 220px; margin: 0 !important; }
#tab-settings .checkbox-inline-label input[type="checkbox"] { width: auto !important; margin: 0 !important; flex-shrink: 0; }

.delivery-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.delivery-delivered { background: rgba(74,222,128,0.15); color: #2fa863; }
.delivery-bounced, .delivery-undelivered { background: rgba(229,103,92,0.15); color: #d9534a; }
.delivery-delayed { background: rgba(240,196,106,0.18); color: #b98a2e; }

.dr-row { border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.dr-row.is-in-use { border-color: rgba(201,151,76,0.7); }
.dr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-ondark); font-size: 14px; }
.dr-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(201,151,76,0.18); color: #c9974c; }
.dr-seen { margin-left: auto; font-size: 12px; color: var(--text-ondark-soft); }
.dr-url { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dr-url code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12px; padding: 6px 8px; border-radius: 6px; background: var(--card-bg-soft); color: var(--text-ondark); }
.dr-steps { margin: 6px 0 0 !important; }

.tx-small { font-size: 11px; }
.tx-ops-table td { vertical-align: top; }

.wp-options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.wp-option { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-ondark); line-height: 1.45; }
.wp-option input { width: auto !important; margin: 3px 0 0 !important; flex-shrink: 0; accent-color: #c9974c; }
.wp-option:has(input:checked) { border-color: rgba(201,151,76,0.8); background: rgba(201,151,76,0.06); }

.acct-group-pick[hidden] { display: none !important; }

/* ======================= Billing ======================= */
.bl-title { margin: 0 0 14px; font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: var(--text-ondark); }
.bl-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; color: var(--text-ondark); }
.bl-card-title { margin: 0 0 10px; font-weight: 600; font-size: 15px; }
.bl-card-title .section-note { display: block; font-weight: 400; margin-top: 2px; }
.bl-switch-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bl-switch-state { margin: 0 0 4px; font-size: 16px; }
.bl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #93a1b8; margin-right: 6px; }
.bl-dot.on { background: #4ade80; }
.bl-btn { background: linear-gradient(180deg, #e3bd77, #c9974c); color: #1c1408; border: 0; padding: 10px 18px; border-radius: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bl-btn.is-danger { background: transparent; color: #e5675c; border: 1px solid #e5675c; }
.bl-btn:disabled { opacity: 0.6; cursor: default; }
.bl-table-wrap { overflow-x: auto; }
.bl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bl-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--text-ondark-soft); padding: 8px; border-bottom: 1px solid var(--card-border); white-space: nowrap; }
.bl-table td { padding: 6px 8px; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
.bl-in { width: 100% !important; min-width: 90px; margin: 0 !important; padding: 6px 8px !important; font-size: 13px !important; }
.bl-num { max-width: 110px; }
.bl-c { text-align: center; }
.bl-c input { width: auto !important; margin: 0 !important; }
.bl-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.bl-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(147,161,184,0.15); color: var(--text-ondark-soft); }
.bl-trial { background: rgba(94,196,242,0.15); color: #3aa7d6; }
.bl-active { background: rgba(74,222,128,0.15); color: #2fa863; }
.bl-grace { background: rgba(240,196,106,0.18); color: #b98a2e; }
.bl-paused { background: rgba(229,103,92,0.15); color: #d9534a; }
.bl-interval { display: inline-flex; border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; margin: 4px 0 14px; }
.bl-int { background: transparent; border: 0; padding: 8px 16px; color: var(--text-ondark-soft); font-weight: 600; cursor: pointer; }
.bl-int span { font-size: 11px; color: #c9974c; margin-left: 4px; }
.bl-int.is-on { background: rgba(201,151,76,0.18); color: var(--text-ondark); }
.bl-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bl-plan { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 18px 16px; text-align: center; color: var(--text-ondark); }
.bl-plan.is-recommended { border-color: #c9974c; box-shadow: 0 0 0 1px rgba(201,151,76,0.4); }
.bl-plan.is-small { opacity: 0.55; }
.bl-rec { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #c9974c; color: #1c1408; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.bl-plan-name { margin: 4px 0 2px; font-size: 18px; font-weight: 700; }
.bl-plan-limit { margin: 0 0 10px; font-size: 13px; color: var(--text-ondark-soft); }
.bl-plan-price { margin: 0 0 12px; font-size: 26px; font-weight: 700; color: #c9974c; }
.bl-plan-price span { font-size: 13px; color: var(--text-ondark-soft); font-weight: 500; }
.bl-banner { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.bl-banner a { font-weight: 700; color: inherit; }
.bl-banner-trial { background: rgba(94,196,242,0.12); color: #3aa7d6; }
.bl-banner-grace { background: rgba(240,196,106,0.15); color: #b98a2e; }
.bl-banner-paused { background: rgba(229,103,92,0.12); color: #d9534a; }

/* Numbered list pager (System Audit Trail) */
.list-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 14px 0 6px; }
.list-pager[hidden] { display: none; }
.lp-info { font-size: 13px; color: var(--text-ondark-soft); margin-right: 8px; }
.lp-btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-ondark); font-weight: 600; cursor: pointer; }
.lp-btn.is-on { background: linear-gradient(180deg, #e3bd77, #c9974c); color: #1c1408; border-color: transparent; }
.lp-btn:disabled { opacity: 0.4; cursor: default; }
.lp-gap { color: var(--text-ondark-soft); padding: 0 2px; }

/* In-page dialog */
.adm-dialog-backdrop { position: fixed; inset: 0; background: rgba(5,8,15,0.6); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.adm-dialog { width: min(440px, 100%); background: var(--card-bg, #1b2333); color: var(--text-ondark, #f4f1ea); border: 1px solid var(--card-border, #2c3548); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); text-align: center; }
.adm-dialog-icon { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; background: rgba(147,161,184,0.18); color: #93a1b8; }
.adm-dialog-success .adm-dialog-icon { background: rgba(74,222,128,0.16); color: #2fa863; }
.adm-dialog-warning .adm-dialog-icon { background: rgba(240,196,106,0.18); color: #c9974c; }
.adm-dialog h3 { margin: 0 0 8px; font-size: 18px; }
.adm-dialog-msg { font-size: 14.5px; line-height: 1.55; color: var(--text-ondark-soft, #c3cbd8); }
.adm-dialog-msg p { margin: 0 0 8px; }
.adm-dialog-sub { margin-top: 10px !important; font-weight: 600; }
.adm-dialog-list { list-style: none; padding: 0; margin: 4px 0 0; }
.adm-dialog-list li { display: inline-block; margin: 3px; padding: 4px 10px; border-radius: 999px; background: rgba(201,151,76,0.15); color: #c9974c; font-size: 13px; font-weight: 600; }
.adm-dialog-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.adm-dialog-btn { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--card-border, #3a455c); background: transparent; color: var(--text-ondark, #f4f1ea); font-weight: 700; cursor: pointer; }
.adm-dialog-btn.is-primary { background: linear-gradient(180deg, #e3bd77, #c9974c); color: #1c1408; border-color: transparent; }

/* ======================= Templates tab (redesign) ======================= */
.tp-head { margin-bottom: 14px; }
.tp-title { margin: 0 0 4px; font-size: 24px; color: var(--text-ondark); }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .tp-grid { grid-template-columns: 1fr; } }
.tp-card { position: relative; border: 1.5px solid rgba(201,151,76,0.75) !important; border-radius: 16px !important; box-shadow: 0 0 0 1px rgba(201,151,76,0.12), 0 14px 36px rgba(0,0,0,0.25); overflow: hidden; }
.tp-card > * { position: relative; z-index: 1; }
.tp-festive::before { content: ''; position: absolute; top: 0; right: 0; width: 260px; height: 190px; z-index: 0; pointer-events: none; opacity: 0.9;
  background-repeat: no-repeat; background-position: top right; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 190'%3E%3Cg fill='%23d9ad62'%3E%3Crect x='200' y='14' width='12' height='5' rx='2' transform='rotate(35 206 16)'/%3E%3Crect x='150' y='40' width='10' height='4' rx='2' transform='rotate(-20 155 42)'/%3E%3Crect x='232' y='70' width='12' height='5' rx='2' transform='rotate(60 238 72)'/%3E%3Crect x='110' y='12' width='9' height='4' rx='2' transform='rotate(15 114 14)'/%3E%3Crect x='186' y='96' width='10' height='4' rx='2' transform='rotate(-45 191 98)'/%3E%3Crect x='244' y='140' width='9' height='4' rx='2' transform='rotate(25 248 142)'/%3E%3Crect x='70' y='30' width='8' height='4' rx='2' transform='rotate(-60 74 32)'/%3E%3C/g%3E%3Cg fill='%23f0d38e'%3E%3Cpath d='M170 70l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M235 30l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3Ccircle cx='130' cy='60' r='1.6'/%3E%3Ccircle cx='215' cy='120' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.tp-card-title { margin: 0 0 12px; font-size: 20px; color: var(--text-ondark); }
.tp-left #template-form, .tp-right .km-card { margin: 0; }
.tp-saved { margin-top: 20px; }
.tp-saved .templates-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-saved-title { margin: 0; font-size: 18px; }
.tp-saved .template-row { border: 1px solid var(--card-border); border-radius: 12px; margin-bottom: 8px; background: var(--card-bg); }
.tp-saved .template-row-summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.tp-saved .template-row-tags { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; max-width: 46%; }
.tp-saved .template-row-preview { flex: 1; min-width: 0; margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-saved .template-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tp-saved .template-edit-toggle-btn { text-decoration: underline; color: #e0b876; font-weight: 600; }
.tp-saved .template-tag { font-size: 10.5px; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }
@media (max-width: 700px) {
  .tp-saved .template-row-summary { flex-wrap: wrap; }
  .tp-saved .template-row-tags { max-width: 100%; }
  .tp-saved .template-row-preview { white-space: normal; flex-basis: 100%; }
}
.tp-card label { color: var(--text-ondark-soft); font-weight: 600; }
.tp-card label .optional { font-weight: 400; }
.tp-card .form-hint { color: var(--text-ondark-soft); }
.tp-saved .template-row { padding: 0 !important; }
.tp-saved .template-row-detail { padding: 0 12px 12px; }

.wall-pdf-orientation { width: auto !important; margin: 0 !important; padding: 8px 10px; border-radius: 10px; }
#wall-month-picker-row, #wall-quarter-picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
#wall-month-picker-row[hidden], #wall-quarter-picker-row[hidden] { display: none; }
/* Templates: equal-height cards, aligned dropdowns, full-width list */
.tp-grid { align-items: stretch !important; }
.tp-left, .tp-right { display: flex; flex-direction: column; }
.tp-left > .tp-card, .tp-right > .tp-card { flex: 1 1 auto; }
.tp-card .form-row { align-items: start; }
.tp-card .form-row > label { display: flex; flex-direction: column; gap: 6px; }
.tp-hint { display: block; font-size: 11.5px; line-height: 1.4; margin-top: 2px; color: var(--text-ondark-soft); font-weight: 400; }
.tp-suggest-btn { display: block; width: 100%; margin: 4px 0 14px; padding: 12px 18px !important; text-align: center; }
.tp-saved-full { margin-top: 24px; }

.bl-trial-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bl-trial-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0 !important; color: var(--text-ondark); font-size: 14px; }
.bl-trial-label input { width: 90px !important; }
.bl-trial-apply { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 13.5px; color: var(--text-ondark-soft); }
.bl-trial-apply input { width: auto !important; margin: 0 !important; accent-color: #c9974c; }
/* Keep the confetti in the corner, clear of the cards' text */
.tp-festive::before { width: 170px !important; height: 110px !important; opacity: 0.7 !important; }
.tp-card .tp-card-title, .tp-card .km-title { padding-right: 120px; }
#bl-trial-note { margin-top: 12px !important; }

/* Side menu icons */
.admin-sidebar-nav .tab-btn { display: flex !important; align-items: center; gap: 12px; }
.tab-ico { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.admin-sidebar-nav .tab-btn.active .tab-ico { opacity: 1; }
.tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================= Billing redesign ======================= */
#tab-billing { position: relative; }
#tab-billing::before { content: ''; position: absolute; inset: -10px -14px; pointer-events: none; z-index: 0; opacity: 0.9;
  background-image:
    radial-gradient(circle, rgba(243,213,142,0.9) 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(243,213,142,0.7) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(243,213,142,0.8) 0 1.6px, transparent 2.2px);
  background-size: 260px 210px, 190px 330px, 410px 270px; background-position: 12px 40px, 120px 160px, 300px 20px; }
#tab-billing > * { position: relative; z-index: 1; }
#tab-billing .bl-card { background: linear-gradient(160deg, rgba(37,46,66,0.96), rgba(27,34,50,0.98)); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; padding: 20px 22px; box-shadow: 0 12px 34px rgba(0,0,0,0.22); }
#tab-billing .bl-switch-card { background: linear-gradient(120deg, #1b2440, #151c30); border-color: rgba(201,151,76,0.35); }
#tab-billing .bl-switch-state { font-weight: 700; font-size: 18px; }
#tab-billing .bl-card-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.bl-periods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .bl-periods { grid-template-columns: 1fr; } }
.bl-period { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.bl-period-k { margin: 0 0 10px; font-weight: 700; color: #e0b876; font-size: 14px; }
#tab-billing .bl-in { background: #121826 !important; border: 1px solid #2f3a50 !important; border-radius: 10px !important; color: #f4f1ea !important; padding: 9px 12px !important; }
#tab-billing .bl-in:focus { border-color: #e0b876 !important; box-shadow: 0 0 0 2px rgba(224,184,118,0.25); }
#tab-billing .bl-table th { text-transform: none; font-size: 13px; color: #a9b3c4; }
#tab-billing .bl-table td { border-bottom-color: rgba(255,255,255,0.06); padding: 8px; }
#tab-billing .bl-c input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px !important; height: 22px; border-radius: 6px; border: 1.5px solid #4a5468; background: #121826; cursor: pointer; position: relative; vertical-align: middle; }
#tab-billing .bl-c input[type="checkbox"]:checked { background: #3b6fd8; border-color: #3b6fd8; }
#tab-billing .bl-c input[type="checkbox"]:checked::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; }
/* "Offered": gold chip */
#tab-billing .bl-c input[data-k="active"] { width: 54px !important; height: 34px; border-radius: 9px; border-color: rgba(224,184,118,0.5); background: rgba(201,151,76,0.12); }
#tab-billing .bl-c input[data-k="active"]:checked { background: linear-gradient(180deg, #ecd08a, #c9974c); border-color: transparent; }
#tab-billing .bl-c input[data-k="active"]:checked::after { color: #1c1408; }
#tab-billing .bl-org { font-weight: 600; color: #f4f1ea; }
.bl-footer { text-align: center; color: #8b96aa; font-size: 13px; margin: 18px 0 4px; }

/* Traction: floating header + filters */
.tx-float { position: sticky; top: 0; z-index: 40; padding-top: 6px; background: linear-gradient(180deg, var(--page-bg, #161d2b) 82%, rgba(22,29,43,0)); }
.tx-float-sentinel { height: 1px; }
.tx-float .tx-hero, .tx-float .tx-filters { transition: padding 0.2s, margin 0.2s; }
.tx-float.is-stuck { box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.tx-float.is-stuck .tx-hero { padding-top: 10px !important; padding-bottom: 10px !important; margin-bottom: 8px !important; }
.tx-float.is-stuck .tx-hero-brand img { width: 36px; height: 36px; }
.tx-float.is-stuck .tx-hero-title { font-size: 22px !important; }
.tx-float.is-stuck .tx-hero-eyebrow, .tx-float.is-stuck .tx-filter-note, .tx-float.is-stuck #tx-today { display: none !important; }
.tx-float.is-stuck .tx-filters { padding-top: 10px !important; padding-bottom: 10px !important; margin-bottom: 6px !important; }
@media print { .tx-float { position: static !important; box-shadow: none !important; background: none !important; } }
@media (max-width: 760px) { .tx-float { position: static; } }
/* Trial/grace boxes: room between the row and its note */
.bl-period .bl-trial-row { margin-bottom: 4px; row-gap: 10px; }
.bl-period .section-note { margin: 12px 0 0 !important; line-height: 1.5; }
.bl-period { display: flex; flex-direction: column; }

/* Subscription status panel (organization admins) */
.sub-panel { max-width: 1080px; margin: 14px auto 0; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(201,151,76,0.5); background: linear-gradient(160deg, rgba(37,46,66,0.96), rgba(27,34,50,0.98)); color: var(--text-ondark); box-sizing: border-box; }
.sub-paused { border-color: rgba(229,103,92,0.55); }
.sub-back { border-color: rgba(74,196,126,0.55); }
.sub-head { display: flex; gap: 12px; align-items: flex-start; }
.sub-head > div { flex: 1; } .sub-head strong { font-size: 16px; } .sub-head p { margin: 4px 0 0; color: var(--text-ondark-soft); font-size: 14px; line-height: 1.5; }
.sub-icon { font-size: 22px; line-height: 1.2; }
.sub-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 14px 0 0; }
.sub-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 13.5px; }
.sub-rows b { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; }
.sub-rows b.ok { background: rgba(74,196,126,0.15); color: #4ac47e; } .sub-rows b.off { background: rgba(229,103,92,0.15); color: #f08a80; }
.sub-skipped { margin: 12px 0 0; font-size: 13.5px; color: #e8b04a; font-weight: 600; }
.sub-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; } .sub-actions span { font-size: 13px; color: var(--text-ondark-soft); flex: 1; min-width: 220px; }
.sub-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sub-list li { font-size: 13px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); } .sub-list li b { color: #e0b876; margin-right: 4px; } .sub-list li span { color: var(--text-ondark-soft); font-size: 12px; }

/* Subscription panel redesign */
.sub-panel { position: relative; border: 1.5px solid rgba(224,184,118,0.75) !important; border-radius: 18px; padding: 20px 22px !important; }
.sub-panel::before { content: ''; position: absolute; inset: -26px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(243,213,142,0.95) 0 1.3px, transparent 2px), radial-gradient(circle, rgba(243,213,142,0.7) 0 1px, transparent 1.6px);
  background-size: 170px 120px, 230px 90px; background-position: 6px 4px, 60px 50px;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude;
  -webkit-mask-clip: padding-box, border-box; padding: 22px; }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .sub-grid { grid-template-columns: 1fr; } }
.sub-warn { width: 30px; height: 30px; flex-shrink: 0; fill: #e3b04a; stroke: #1c1408; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sub-title { color: #f0c96a; font-size: 21px !important; font-family: Georgia, 'Times New Roman', serif; }
.sub-panel .sub-rows { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.sub-panel .sub-rows > div { align-items: center; min-width: 0; }
.sub-panel .sub-rows > div span { min-width: 0; }
.sub-panel .sub-rows b { flex-shrink: 0; white-space: nowrap; }
.sub-skipped { color: #f0c96a !important; font-size: 15px !important; }
.sub-aside { display: flex; flex-direction: column; gap: 10px; }
.sub-aside .bl-btn { width: 100%; padding: 12px 16px; font-size: 15px; }
.sub-aside p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-ondark-soft); }
/* Today's card: repeated names */
.hero-occ { color: var(--text-ondark-soft); font-size: 0.9em; }
.hero-dup { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(232,176,74,0.16); color: #e8b04a; font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.sub-panel .sub-rows { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
.sub-panel { margin-bottom: 18px !important; }
.sub-panel .sub-rows > div { flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: 7px; }

/* Hidden menu items stay hidden (the icon layout must not override [hidden]) */
.admin-sidebar-nav .tab-btn[hidden] { display: none !important; }

/* Paused subscription: disabled controls + notice */
body.is-sub-paused [aria-disabled="true"] { opacity: 0.42 !important; filter: grayscale(0.6); cursor: not-allowed !important; }
.paused-note { max-width: 1080px; margin: 0 auto 14px; padding: 10px 14px; border-radius: 12px; background: rgba(229,103,92,0.1); border: 1px solid rgba(229,103,92,0.4); color: var(--text-ondark); font-size: 14px; box-sizing: border-box; }
.paused-note button { background: none; border: 0; color: #e0b876; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 0 0 6px; }

#paused-watermark { position: fixed; inset: 0; z-index: 2300; pointer-events: none; background-repeat: repeat; }
@media print {
  body.is-sub-paused > * { display: none !important; }
  body.is-sub-paused::after { content: "Printing is unavailable while this organization\2019s CelebrationHub subscription has expired."; display: block; padding: 60px; font: 18px Helvetica, Arial, sans-serif; color: #000; }
}

/* Plan member usage */
.bl-usage { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.bl-usage-top { display: flex; justify-content: space-between; gap: 10px; } .bl-usage-top span { color: var(--text-ondark-soft); font-size: 13px; }
.bl-usage-track { height: 8px; border-radius: 999px; background: rgba(147,161,184,0.2); margin: 10px 0 8px; overflow: hidden; }
.bl-usage-track > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9974c, #ecd08a); }
.bl-usage.is-near .bl-usage-track > div { background: #e8b04a; } .bl-usage.is-over { border-color: rgba(229,103,92,0.5); } .bl-usage.is-over .bl-usage-track > div { background: #e5675c; }

.bl-exempt-switch { display: inline-flex !important; align-items: center; gap: 7px; cursor: pointer; margin: 0 !important; font-size: 13px; color: var(--text-ondark-soft); }
.bl-exempt-switch input { appearance: none; -webkit-appearance: none; width: 36px !important; height: 20px; border-radius: 999px; background: #3a455c; position: relative; margin: 0 !important; cursor: pointer; transition: background 0.2s; }
.bl-exempt-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.bl-exempt-switch input:checked { background: #c9974c; } .bl-exempt-switch input:checked::after { left: 18px; }
.bl-pill.bl-exempt { background: rgba(201,151,76,0.15); color: #e0b876; }

/* Payment history */
.pay-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pay-title { margin: 0 0 4px; font-size: 24px; color: var(--text-ondark); }
.pay-filter { width: auto !important; min-width: 220px; }
.pay-card { background: linear-gradient(160deg, rgba(37,46,66,0.96), rgba(27,34,50,0.98)); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; }
.pay-sub { margin: 6px 0 10px; font-size: 18px; color: var(--text-ondark); }
.pay-table td { vertical-align: middle; }
.pay-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-ondark-soft); }
.pay-int { font-size: 12px; color: var(--text-ondark-soft); }
.pay-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pay-paid { background: rgba(74,196,126,0.15); color: #4ac47e; } .pay-pending { background: rgba(232,176,74,0.15); color: #e8b04a; } .pay-off { background: rgba(147,161,184,0.15); color: #a9b3c4; }
.pay-until { display: block; font-size: 11.5px; color: var(--text-ondark-soft); margin-top: 3px; }
.pay-receipt { color: #e0b876; font-weight: 700; }
.pay-events { list-style: none; margin: 0; padding: 0; }
.pay-events li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13.5px; }
.pay-events li:last-child { border-bottom: 0; }
.pay-ev-date { color: #e0b876; font-weight: 600; } .pay-ev-by { color: var(--text-ondark-soft); font-size: 12px; }
@media (max-width: 640px) { .pay-events li { grid-template-columns: 1fr; gap: 2px; } }

/* Support CelebrationHub */
.sp-card { max-width: 860px; background: linear-gradient(160deg, rgba(37,46,66,0.96), rgba(27,34,50,0.98)); border: 1px solid rgba(201,151,76,0.45); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; color: var(--text-ondark); }
.sp-head { display: flex; gap: 14px; align-items: flex-start; }
.sp-icon { width: 34px; height: 34px; flex-shrink: 0; fill: none; stroke: #c9974c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 4px; }
.sp-head h2 { margin: 0; font-size: 22px; } .sp-sub { margin: 6px 0 0; color: var(--text-ondark-soft); }
.sp-text { font-size: 16px; line-height: 1.7; margin: 16px 0; }
.sp-note { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 14px 18px; }
.sp-note p { margin: 0; } .sp-note span { color: #c9974c; } .sp-note-sub { margin-top: 6px !important; color: var(--text-ondark-soft); font-size: 14px; }
.sp-thanks { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(74,196,126,0.12); border: 1px solid rgba(74,196,126,0.4); }
.sp-thanks.is-off { background: rgba(147,161,184,0.1); border-color: rgba(147,161,184,0.35); }
.sp-give { margin-top: 20px; } .sp-give-k { margin: 0 0 10px; font-weight: 700; }
.sp-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-preset { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(224,184,118,0.55); background: transparent; color: #f4f1ea; font-weight: 700; cursor: pointer; }
.sp-preset.is-on { background: linear-gradient(180deg, #ecd08a, #c9974c); color: #1c1408; border-color: transparent; }
.sp-custom { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
.sp-custom label { font-size: 13px; color: var(--text-ondark-soft); }
.sp-go { padding: 12px 26px !important; font-size: 16px !important; }
.sp-h3 { margin: 0 0 10px; font-size: 17px; }
.sp-history { list-style: none; margin: 0; padding: 0; }
.sp-history li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sp-history li:last-child { border-bottom: 0; }
.sp-custom label { display: block !important; flex-direction: row !important; }
.sp-custom input { max-width: 280px; }
.sp-go { display: inline-block; margin-top: 4px; }
#sp-msg { margin: 12px 0 0 !important; }
/* Notes under titles on the billing/payments/support screens: no negative
   margin pulling them into the title above. */
#tab-billing .section-note, #tab-payments .section-note, #tab-support .section-note { margin-top: 6px !important; }
#tab-billing .bl-switch-state { margin: 0 0 2px !important; line-height: 1.3; }
.bl-exempt-switch { flex-direction: row !important; white-space: nowrap; }
#bl-support-card .bl-trial-row { align-items: center; }

/* ---- Support CelebrationHub redesign ---- */
#tab-support .sp-main { position: relative; max-width: 900px; margin: 0 auto 18px; padding: 30px 34px; border: 1.5px solid rgba(224,184,118,0.65); background: linear-gradient(165deg, #1f2738, #171d2c); box-shadow: 0 0 40px rgba(201,151,76,0.12); overflow: hidden; }
#tab-support .sp-main > *:not(.sp-sparkle) { position: relative; z-index: 1; }
.sp-sparkle { position: absolute; top: 0; right: 0; width: 240px; height: 260px; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='260'%3E%3Cg fill='%23f3d58e'%3E%3Cpath d='M190 40l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Ccircle cx='150' cy='90' r='1.5'/%3E%3Ccircle cx='170' cy='120' r='1.8'/%3E%3Ccircle cx='195' cy='150' r='1.4'/%3E%3Ccircle cx='215' cy='180' r='1.8'/%3E%3Ccircle cx='228' cy='210' r='1.2'/%3E%3Ccircle cx='160' cy='105' r='1'/%3E%3Ccircle cx='205' cy='165' r='1'/%3E%3C/g%3E%3Cg fill='%23d9ad62'%3E%3Crect x='214' y='22' width='10' height='5' rx='2' transform='rotate(35 219 24)'/%3E%3Crect x='222' y='110' width='9' height='4' rx='2' transform='rotate(-30 226 112)'/%3E%3Crect x='200' y='240' width='9' height='4' rx='2' transform='rotate(60 204 242)'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; }
#tab-support .sp-head h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; color: #f4f1ea; }
#tab-support .sp-icon { width: 46px; height: 46px; stroke: #e0b876; }
#tab-support .sp-sub { font-size: 15px; }
#tab-support .sp-note { border: 1.5px solid rgba(224,184,118,0.55); background: rgba(255,255,255,0.04); padding: 14px 20px; }
.sp-note-ico { width: 18px; height: 18px; fill: none; stroke: #e0b876; stroke-width: 2; vertical-align: -3px; }
#tab-support .sp-give-k { font-size: 16px; margin-top: 6px; }
#tab-support .sp-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 4px; }
#tab-support .sp-preset { position: relative; padding: 30px 10px; border-radius: 14px; border: 1.5px solid rgba(224,184,118,0.5); background: rgba(10,14,22,0.35); color: #f4f1ea; font: 700 28px 'Fraunces', Georgia, serif; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
#tab-support .sp-preset:hover { border-color: #e0b876; transform: translateY(-1px); }
#tab-support .sp-preset.is-on { background: linear-gradient(180deg, #ecd08a, #c9974c); color: #1c1408; border-color: transparent; box-shadow: 0 10px 26px rgba(201,151,76,0.3); }
.sp-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: linear-gradient(180deg, #f4dfa6, #d9b46a); color: #3a2a10; font: 600 12.5px 'Inter', system-ui, sans-serif; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
#tab-support .sp-custom { max-width: 470px; margin: 22px 0 26px; }
#tab-support .sp-custom label { font-size: 15px; color: #e3e7ee; }
.sp-amount-wrap { position: relative; }
.sp-sym { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #e0b876; font-weight: 700; font-size: 18px; pointer-events: none; }
#tab-support .sp-amount-wrap input { width: 100%; box-sizing: border-box; max-width: none !important; padding: 13px 14px 13px 38px !important; border-radius: 10px !important; background: rgba(10,14,22,0.45) !important; border: 1.5px solid rgba(224,184,118,0.5) !important; color: #f4f1ea !important; font-size: 16px; }
.sp-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#tab-support .sp-go { padding: 15px 44px !important; font-size: 18px !important; border-radius: 12px !important; background: linear-gradient(180deg, #ecd08a, #c9974c) !important; color: #1c1408 !important; }
.sp-min { flex: 1; min-width: 180px; margin: 0 !important; color: var(--text-ondark-soft); font-size: 14px; line-height: 1.5; }
.sp-secure { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,0.06); color: #e3e7ee; font-size: 11px; }
.sp-secure > span { display: flex; flex-direction: column; line-height: 1.2; } .sp-secure strong { font-size: 15px; }
.sp-secure svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
#sp-history-card { max-width: 900px; margin: 0 auto 18px; }
@media (max-width: 760px) { #tab-support .sp-presets { grid-template-columns: repeat(2, 1fr); } #tab-support .sp-main { padding: 22px 18px; } #tab-support .sp-head h2 { font-size: 24px; } #tab-support .sp-preset { font-size: 22px; padding: 22px 8px; } }

/* Group logo field */
.group-logo-field { display: flex; flex-direction: column; gap: 6px; }
.group-logo-field-k { font-size: 13px; font-weight: 600; color: var(--text-ondark-soft); }
.group-logo-field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.group-logo-current { height: 46px; width: auto; max-width: 140px; border-radius: 8px; background: #fff; padding: 3px; object-fit: contain; }
.group-logo-none { font-size: 13px; color: var(--text-ondark-soft); }
.group-logo-remove { padding: 8px 14px !important; }

/* Support card: fixed light text on its dark card, in light and dark mode */
#tab-support .sp-card { color: #e9edf3 !important; }
#tab-support .sp-card h2, #tab-support .sp-card h3, #tab-support .sp-card strong, #tab-support .sp-text, #tab-support .sp-note p, #tab-support .sp-give-k, #tab-support .sp-custom label, #tab-support .sp-history li { color: #f4f1ea !important; }
#tab-support .sp-sub, #tab-support .sp-note-sub, #tab-support .sp-min, #tab-support #sp-msg, #tab-support .sp-history li span:first-child { color: #a9b3c4 !important; }
#tab-support .sp-card:not(.sp-main) { background: linear-gradient(165deg, #1f2738, #171d2c) !important; }
#tab-support .sp-amount-wrap input::placeholder { color: #8b96aa; }
#tab-support .sp-secure { color: #e3e7ee !important; background: rgba(255,255,255,0.08); }

/* Update request sent */
.urs { width: min(460px, 100%); text-align: center; color: #e9edf3; background: linear-gradient(170deg, #222a3d, #161c2a); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 26px 24px 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.urs-seal { width: 74px; height: 74px; filter: drop-shadow(0 6px 16px rgba(201,151,76,0.45)); }
.urs h3 { margin: 10px 0 8px; font-size: 22px; color: #f4f1ea; }
.urs-msg { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #c3cbd8; }
.urs-msg strong { color: #f4f1ea; } .urs-name { color: #f0d38e !important; }
.urs-k { margin: 0 0 12px; font-weight: 700; color: #d6dbe4; }
.urs-box { padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.urs-box ul { list-style: none; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(229,103,92,0.6); background: rgba(229,103,92,0.06); text-align: left; }
.urs-box li { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 15px; color: #f4f1ea; }
.urs-box li b { color: #f08a80; font-weight: 600; }
.urs-warn { font-size: 16px; }
.urs-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; }
.urs-ok { min-width: 150px; padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; font-size: 16px; color: #1c1408; background: linear-gradient(180deg, #ecd08a, #c9974c); box-shadow: 0 8px 20px rgba(201,151,76,0.3); }
.urs-copy { padding: 13px 22px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; color: #f4f1ea; background: transparent; border: 1.5px solid rgba(224,184,118,0.6); }
.urs-foot { margin: 0; font-size: 12.5px; color: #8b96aa; } .urs-foot a { color: #c9d0db; }

/* v76: Template Designer additions */
.slot-tpl-thumb-clickable img { object-fit: contain; }
.slot-bg-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.slot-field-label input[type="text"] { width: 100%; box-sizing: border-box; }