/* CSS Reset & Variables */
/* 2026-07-30: production cache-bust after immutable cached stylesheet 404. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pull-to-refresh-status {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.5rem);
  left: 50%;
  z-index: var(--z-toast);
  transform: translate(-50%, var(--pull-distance, 0px));
  opacity: 0;
  pointer-events: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  transition: opacity 160ms ease, transform 160ms ease;
}

.pull-to-refresh-status[data-status="pulling"],
.pull-to-refresh-status[data-status="ready"],
.pull-to-refresh-status[data-status="refreshing"],
.pull-to-refresh-status[data-status="done"] {
  opacity: 1;
}

:root {
  /* NLC satellite brand + neutral surfaces (Member Hub aligned) */
  --color-brand: #04A9D2;
  --color-brand-hover: #0396BA;
  --color-brand-active: #0284A3;
  --color-brand-disabled: #04A9D266;
  --color-brand-subtle: color-mix(in srgb, #04A9D2 12%, transparent);
  --color-brand-muted: color-mix(in srgb, #04A9D2 8%, transparent);
  --color-brand-border: color-mix(in srgb, #04A9D2 24%, transparent);
  --color-brand-ring: color-mix(in srgb, #04A9D2 15%, transparent);

  /* Deliberately declared ONLY here, never overridden per theme: --color-brand
     and --color-danger are themselves the same hex in light/dark/warm, so the
     text that sits on their solid fill (primary/destructive Button/Badge)
     must also stay fixed — var(--text-primary) flips to near-white in dark
     theme and mid-brown in warm theme, which is correct for text on the
     theme's OWN background but breaks contrast against a fill that doesn't
     move with it. Measured 6.95:1 on --color-brand, 5.31:1 on --color-danger,
     in every theme. */
  --color-solid-fill-foreground: #0F0F0F;

  --color-white: #FAFAFA;
  --color-black: #0F0F0F;
  --color-success: #66F78F;
  --color-success-foreground: #1F8F52;
  --color-success-border: color-mix(in srgb, var(--color-success-foreground) 24%, transparent);
  --color-warning: #FE7615;
  --color-danger: #FC365A;
  --color-danger-foreground: #C92D49;
  --color-danger-muted: color-mix(in srgb, var(--color-danger) 62%, var(--text-secondary));
  --color-info: #4A4A4A;

  --bg-app: #FAFAFA;
  --bg-header: rgba(255, 255, 255, 0.92);
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --border-card: rgba(0, 0, 0, 0.1);
  --border-default: rgba(0, 0, 0, 0.1);
  /* Shadow scale — Tailwind / Member Hub aligned (shadow-sm, shadow-md, shadow-lg) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-up-md: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-up-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-none: none;
  --shadow-focus-ring: 0 0 0 3px var(--color-brand-subtle);
  --shadow-card: var(--shadow-sm);
  --shadow-hover: var(--shadow-sm);
  --text-primary: #0F0F0F;
  --text-secondary: rgba(15, 15, 15, 0.65);
  /* Was 0.45 — measured ~3.06:1 on --bg-app, fails AA body-text (4.5:1).
     0.6 measures ~4.96-5.02:1. */
  --text-muted: rgba(15, 15, 15, 0.6);

  /* Legacy aliases */
  --primary-color: var(--color-brand);
  --accent-color: var(--color-success);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --backdrop-blur: blur(8px);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography weights — Member Hub: medium (500) emphasis, normal (400) body */
  --type-weight-strong: 500;
  --type-weight-regular: 400;

  /* Popover / dropdown surface — shared by notification popover, options-dropdown */
  --surface-popover: var(--bg-card);
  --border-popover: var(--border-card);
  --popover-backdrop-blur: none;
  --popover-radius: var(--radius-lg);
  --popover-shadow: var(--shadow-lg);
  --popover-padding: 0.9rem 1.1rem;

  --skeleton-base: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card));
  --skeleton-highlight: color-mix(in srgb, var(--text-primary) 2%, var(--bg-card));
  --skeleton-on-dark-base: rgba(255, 255, 255, 0.14);
  --skeleton-on-dark-highlight: rgba(255, 255, 255, 0.32);

  --color-success-subtle: color-mix(in srgb, var(--color-success) 12%, transparent);
  --color-warning-subtle: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --color-danger-subtle: color-mix(in srgb, var(--color-danger) 12%, transparent);
  --color-achievement-subtle: color-mix(in srgb, #F59E0B 15%, transparent);
  --color-achievement: #F59E0B;

  --color-progress-track: color-mix(in srgb, var(--text-muted) 18%, transparent);
  --color-progress-fill: var(--color-brand);
  --color-progress-fill-success: var(--color-success);

  --color-icon-default: #0F0F0F;
  --color-icon-muted: #8A8A8A;
  --color-icon-inverse: #FAFAFA;
  --color-icon-brand: #04A9D2;
  --color-icon-achievement: #D97706;

  --icon-size-xs: 14px;
  --icon-size-sm: 18px;
  --icon-size-md: 22px;
  --icon-size-lg: 24px;
  --icon-size-nav: 23px;
  --icon-size-touch: 26px;
  --icon-size-hero: 48px;
  --icon-size-badge: 56px;

  --heatmap-level-0: rgba(148, 163, 184, 0.12);
  --heatmap-level-1: var(--color-brand-muted);
  --heatmap-level-2: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --heatmap-level-3: color-mix(in srgb, var(--color-brand) 65%, transparent);
  --heatmap-level-4: var(--color-brand);

  /* ═══ Z-INDEX STACKING LAYER MATRIX ══════════════════════════════════════
   * Single source of truth for all stacking contexts.
   * Rule: NEVER hardcode z-index values. Always use these tokens.
   *
   * Layer       Token                   Value   Components
   * ──────────────────────────────────────────────────────────────────────
   * Content     --z-content             1       Cards, plan progress bars
   * Sticky      --z-sticky              10      Sticky date carousel
   * Header      --z-header              300     .main-header, .mobile-nav-bar
   * Dropdown    --z-dropdown            400     .options-dropdown menus
   * Overlay     --z-overlay             500     Dimming backdrop (behind sheets)
   * Sheet       --z-sheet               600     .bottom-sheet-backdrop container
   * Modal       --z-modal               700     .full-page-overlay, modal dialogs
   * Toast       --z-toast               800     .toast-notification (always visible)
   * Critical    --z-critical            900     Irreversible confirm dialogs
   * ═══════════════════════════════════════════════════════════════════════ */
  --z-content:    1;
  --z-sticky:     10;
  --z-header:     300;
  --z-dropdown:   400;
  --z-overlay:    500;
  --z-sheet:      600;
  --z-modal:      700;
  --z-toast:      800;
  --z-critical:   900;
}

/* Dark Theme overrides */
body.dark-theme {
  --bg-app: #0F0F0F;
  --bg-header: rgba(15, 15, 15, 0.92);
  --bg-card: #1A1A1A;
  --bg-input: #1A1A1A;
  --border-card: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-up-md: 0 -4px 6px -1px rgb(0 0 0 / 0.35), 0 -2px 4px -2px rgb(0 0 0 / 0.25);
  --shadow-up-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.4), 0 -4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-card: var(--shadow-sm);
  --shadow-hover: var(--shadow-sm);
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250, 250, 250, 0.7);
  /* Was 0.45 — measured ~4.33-4.39:1, just under AA. 0.6 measures ~6.7-7:1. */
  --text-muted: rgba(250, 250, 250, 0.6);

  --color-brand: #04A9D2;
  --color-brand-hover: #26B8DC;
  --color-brand-active: #0396BA;
  --color-brand-subtle: color-mix(in srgb, #04A9D2 18%, transparent);
  --color-brand-muted: color-mix(in srgb, #04A9D2 10%, transparent);
  --color-brand-border: color-mix(in srgb, #04A9D2 30%, transparent);
  --color-brand-ring: color-mix(in srgb, #04A9D2 20%, transparent);

  --primary-color: var(--color-brand);

  --surface-popover: rgba(24, 24, 27, 0.74);
  --border-popover: rgba(255, 255, 255, 0.16);
  --popover-backdrop-blur: blur(28px) saturate(165%);

  --skeleton-base: rgba(255, 255, 255, 0.06);
  --skeleton-highlight: rgba(255, 255, 255, 0.14);
  --skeleton-on-dark-base: rgba(255, 255, 255, 0.12);
  --skeleton-on-dark-highlight: rgba(255, 255, 255, 0.28);

  --color-success-foreground: #7AEAA0;
  --color-success-border: color-mix(in srgb, var(--color-success-foreground) 30%, transparent);

  --color-danger-foreground: #FF7A93;
  --color-danger-muted: color-mix(in srgb, var(--color-danger) 70%, var(--text-secondary));

  --color-progress-track: color-mix(in srgb, var(--text-muted) 18%, transparent);
  --color-icon-default: #FAFAFA;
  --color-icon-muted: #8A8A8A;
  --color-icon-brand: #04A9D2;
  --color-icon-achievement: #FBBF24;
}


/* Typography scale (Member Hub aligned — font-medium emphasis, font-normal body) */
.type-page-title { font-size: 1.75rem; font-weight: var(--type-weight-strong); line-height: 1.25; letter-spacing: normal; color: var(--text-primary); }
.type-section-title { font-size: 1.25rem; font-weight: var(--type-weight-strong); line-height: 1.35; letter-spacing: normal; color: var(--text-primary); }
.type-card-title { font-size: 1.125rem; font-weight: var(--type-weight-strong); line-height: 1.4; letter-spacing: normal; color: var(--text-primary); }
.type-subsection-title { font-size: 1rem; font-weight: var(--type-weight-strong); line-height: 1.35; letter-spacing: normal; color: var(--text-primary); }
.type-label { font-size: 0.875rem; font-weight: var(--type-weight-strong); line-height: 1.375; color: var(--text-secondary); }
.type-nav { font-size: 0.875rem; font-weight: var(--type-weight-strong); line-height: 1.25; letter-spacing: normal; color: var(--text-primary); }
.type-lead { font-size: 1rem; font-weight: var(--type-weight-regular); line-height: 1.625; color: var(--text-secondary); }
.type-body { font-size: 1rem; font-weight: var(--type-weight-regular); line-height: 1.625; color: var(--text-primary); }
.type-body-muted { font-size: 1rem; font-weight: var(--type-weight-regular); line-height: 1.625; color: var(--text-muted); }
.type-caption { font-size: 0.875rem; font-weight: var(--type-weight-regular); line-height: 1.5; color: var(--text-muted); }
.type-emphasis { font-size: 1rem; font-weight: var(--type-weight-strong); line-height: 1.625; color: var(--text-primary); }
.type-brand-title { font-size: 0.875rem; font-weight: var(--type-weight-strong); line-height: 1; letter-spacing: normal; color: var(--text-primary); }

:root {
  --form-control-text-size: 1rem;
}

/* Stat bento cards */
.stat-card { border-radius: 1rem; padding: 1rem; border: 1px solid var(--border-default); display: flex; flex-direction: column; justify-content: space-between; min-height: 80px; text-align: left; }
.stat-card--primary { grid-column: span 2 / span 2; background: var(--color-brand-muted); border-color: var(--color-brand-border); min-height: 90px; }
.stat-card--neutral { background: var(--bg-card); }

/* Stat bento grid cells */
.stat-bento__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}
.stat-bento__value {
  font-size: 1.75rem;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.stat-bento__value--hero { font-size: 2.25rem; }
.stat-bento__value--status { font-size: 0.875rem; line-height: 1.2; }
.stat-bento__value--danger { color: var(--color-danger); }
.stat-bento__unit {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  margin-left: 0.15rem;
}
.stat-bento__value--danger .stat-bento__unit { color: var(--color-danger); }
.stat-bento__label {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}
.stat-bento__icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
}
.stat-bento__icon-wrap--brand { background: var(--color-brand-subtle); color: var(--color-brand); }
.stat-bento__icon-wrap--success { background: var(--color-success-subtle); color: var(--color-success-foreground); }
.stat-bento__icon-wrap--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.stat-bento__icon-wrap--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.stat-bento__icon-wrap--neutral { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--color-icon-muted); }
.stat-bento__icon-wrap .nlc-icon { color: inherit; }

/* Stats modal / profile stat cards */
.stat-value {
  font-size: 1.5rem;
  font-weight: var(--type-weight-strong);
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  color: var(--text-primary);
}
.stat-value--hero { font-size: 1.25rem; }
.stat-value--danger { color: var(--color-danger); }
.stat-value--brand { color: var(--color-brand); }
.stat-value--success { color: var(--color-success-foreground); }
.stat-value--muted { color: var(--text-secondary); }
.stat-value__unit {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
}
.stat-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-wrapper--sm { width: 36px; height: 36px; }
.stat-icon-wrapper--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.stat-icon-wrapper--brand { background: var(--color-brand-subtle); color: var(--color-brand); }
.stat-icon-wrapper--success { background: var(--color-success-subtle); color: var(--color-success-foreground); }
.stat-icon-wrapper--neutral { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--color-icon-muted); }
.stat-icon-wrapper .nlc-icon { color: inherit; }

.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-brand { color: var(--color-brand); }
.text-success-fg { color: var(--color-success-foreground); }
.stat-bento__icon-wrap--hero { width: 36px; height: 36px; font-size: 1.25rem; }
.bento-card:not(.stat-bento--danger-active) .stat-bento__value--danger,
.bento-card:not(.stat-bento--danger-active) .stat-bento__icon-wrap--danger-only {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.bento-card:not(.stat-bento--danger-active) .stat-bento__value--danger .stat-bento__unit {
  color: var(--text-muted);
}

/* Status badges (shadcn Badge pattern) */
.stat-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.stat-badge--brand {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
}
.stat-badge--success {
  color: var(--color-success-foreground);
  background: var(--color-success-subtle);
  border-color: var(--color-success-border);
}
.stat-badge--warning {
  color: var(--color-warning);
  background: var(--color-warning-subtle);
  border-color: color-mix(in srgb, var(--color-warning) 24%, transparent);
}
.stat-badge--danger {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
  border-color: color-mix(in srgb, var(--color-danger) 24%, transparent);
}
.stat-badge--neutral {
  color: var(--text-primary);
  background: var(--color-brand-muted);
  border-color: var(--color-brand-border);
}

/* Dashboard compact stat strip */
.dashboard-stat-strip {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.25rem;
  background: var(--color-brand-muted);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.dashboard-stat-strip:hover {
  background: var(--color-brand-subtle);
  transform: scale(1.01);
}
.dashboard-stat-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}
.dashboard-stat-strip__divider {
  width: 1px;
  background: var(--border-card);
  align-self: stretch;
  flex-shrink: 0;
}
.dashboard-stat-strip__value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.dashboard-stat-strip__value--warning {
  background: linear-gradient(135deg, #FE7615 30%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dashboard-stat-strip__value--brand {
  background: linear-gradient(135deg, #04A9D2 30%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dashboard-stat-strip__value--success {
  background: linear-gradient(135deg, var(--color-success-foreground) 30%, #66F78F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dashboard-stat-strip__value .nlc-icon {
  color: inherit;
}
.dashboard-stat-strip__icon { flex-shrink: 0; }
.dashboard-stat-strip__label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Group stats progress segments */
.progress-segment-track {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  margin-top: 0.35rem;
}
.progress-segment--behind { background: var(--color-danger); height: 100%; }
.progress-segment--on-schedule { background: var(--color-brand); height: 100%; }
.progress-segment--ahead { background: var(--color-success); height: 100%; }

/* Heatmap legend */
.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.heatmap-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.heatmap-legend__swatch--0 { background: var(--heatmap-level-0); }
.heatmap-legend__swatch--1 { background: var(--heatmap-level-1); }
.heatmap-legend__swatch--2 { background: var(--heatmap-level-2); }
.heatmap-legend__swatch--3 { background: var(--heatmap-level-3); }
.heatmap-legend__swatch--4 { background: var(--heatmap-level-4); }

/* Profile badges card */
.profile-badges-card {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Member Hub profile bridge */
.member-hub-profile-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-subtle);
}

.member-hub-profile-card--needs-org {
  border-color: color-mix(in srgb, var(--color-brand) 55%, var(--border-card));
  background: color-mix(in srgb, var(--color-brand) 8%, var(--bg-card));
}

.member-hub-profile-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.875rem;
}

.member-hub-profile-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--color-brand-border);
  color: var(--color-brand);
}

.member-hub-profile-card__heading {
  min-width: 0;
}

.member-hub-profile-card__title {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}

.member-hub-profile-card__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.member-hub-profile-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.member-hub-profile-card__cta {
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.member-hub-org-placement {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-input));
}

.member-hub-org-placement__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.member-hub-org-placement__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.member-hub-org-placement__label {
  display: block;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.member-hub-org-placement__value {
  display: block;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  overflow-wrap: anywhere;
}

.member-hub-org-placement__sync,
.member-hub-org-placement__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .member-hub-org-placement__grid {
    grid-template-columns: 1fr;
  }
}

.member-hub-form-notice {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-input));
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.member-hub-form-notice .nlc-icon {
  color: var(--color-icon-brand);
  background: transparent;
}

.member-hub-form-notice p {
  margin: 0;
}

.member-hub-form-notice__link {
  align-self: flex-start;
  font-size: 0.875rem;
}

.profile-summary-org-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--color-brand);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-summary-org-link:hover {
  color: color-mix(in srgb, var(--color-brand) 80%, var(--text-primary));
}

.avatar-dropdown .dropdown-item[href] {
  text-decoration: none;
  color: inherit;
}

.profile-badges-card.badge-wall .badge-wall__header {
  margin-bottom: 0.875rem;
  align-items: center;
}

.profile-badges-card.badge-wall .dashboard-panel-card__title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.badge-wall__count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.badge-wall__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  border: 1px dashed color-mix(in srgb, var(--text-muted) 35%, var(--border-card));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-input));
}

.badges-grid,
.profile-badges-card .badges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  width: 100%;
}

@media (max-width: 720px) {
  .badges-grid,
  .profile-badges-card .badges-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Honor badge hex medallions — achievement-toned fill + neutral gloss beam (Open Loyalty pattern) */
:root {
  --badge-hex-aspect: 100 / 115.47;
  /* Regular hex with softly filleted vertices (r≈5 in viewBox units) */
  --badge-hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47' shape-rendering='geometricPrecision'%3E%3Cpath d='M53.33 2.5L95.67 26.37Q100 28.87 100 33.87L100 81.6Q100 86.6 95.67 89.1L53.33 112.97Q50 115.47 46.67 112.97L4.33 89.1Q0 86.6 0 81.6L0 33.87Q0 28.87 4.33 26.37L45.67 2.5Q50 0 53.33 2.5Z'/%3E%3C/svg%3E");
  /* Neutral gloss accents only — rim, beam, dot highlights */
  --badge-gloss-edge: #FFFFFF;
  --badge-gloss-rim: rgb(255 255 255 / 0.82);
  --badge-gloss-beam-strong: rgb(255 255 255 / 0.68);
  --badge-gloss-beam-soft: rgb(255 255 255 / 0.16);
  --badge-gloss-dot: rgb(255 255 255 / 0.38);
  --badge-gloss-shadow: rgb(120 53 15 / 0.22);
  --badge-gloss-check-bg: #FFFBEB;
  --badge-gloss-check-border: rgb(255 255 255 / 0.85);
  /* Primary badge tone — warm gold achievement (body color, not brand cyan) */
  --badge-tone-top: #FDE68A;
  --badge-tone-mid: var(--color-achievement);
  --badge-tone-deep: #B45309;
  --badge-tone-icon: #78350F;
  --badge-tone-inner-shadow: rgb(120 53 15 / 0.28);
  /* Locked medals stay neutral gray with the same white gloss beam */
  --badge-gloss-locked-top: #F0F0F2;
  --badge-gloss-locked-mid: #E2E2E6;
  --badge-gloss-locked-deep: #D2D2D8;
  --badge-gloss-locked-dot: rgb(255 255 255 / 0.45);
  --badge-gloss-locked-shadow: rgb(15 15 15 / 0.1);
}

.honor-badge-hex-shell {
  position: relative;
  width: 3.25rem;
  aspect-ratio: var(--badge-hex-aspect);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px var(--badge-gloss-shadow));
}

.honor-badge-hex-shell--sm {
  width: 2.625rem;
  filter: drop-shadow(0 2px 5px var(--badge-gloss-shadow));
}

.honor-badge-hex-shell--hero {
  width: 5.5rem;
  filter: drop-shadow(0 6px 16px rgb(120 53 15 / 0.32));
}

.honor-badge-hex-shell:has(.honor-badge-hex--locked) {
  filter: drop-shadow(0 2px 6px var(--badge-gloss-locked-shadow));
}

.honor-badge-hex-shell--sm:has(.honor-badge-hex--locked) {
  filter: drop-shadow(0 2px 5px var(--badge-gloss-locked-shadow));
}

.honor-badge-hex-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--badge-gloss-edge);
  -webkit-mask: var(--badge-hex-mask) center / 100% 100% no-repeat;
  mask: var(--badge-hex-mask) center / 100% 100% no-repeat;
}

.honor-badge-hex {
  position: absolute;
  inset: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--badge-tone-icon);
  overflow: hidden;
  -webkit-mask: var(--badge-hex-mask) center / 100% 100% no-repeat;
  mask: var(--badge-hex-mask) center / 100% 100% no-repeat;
  background-color: var(--badge-tone-mid);
  background-image:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.22) 0%, transparent 58%),
    radial-gradient(circle, var(--badge-gloss-dot) 0.75px, transparent 0.75px),
    linear-gradient(
      155deg,
      var(--badge-tone-top) 0%,
      var(--badge-tone-mid) 44%,
      var(--badge-tone-deep) 100%
    );
  background-size: 100% 100%, 6px 6px, 100% 100%;
  box-shadow:
    inset 0 1px 0 var(--badge-gloss-rim),
    inset 0 -3px 8px var(--badge-tone-inner-shadow);
}

.honor-badge-hex::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    var(--badge-gloss-beam-strong) 0%,
    var(--badge-gloss-beam-soft) 32%,
    transparent 54%
  );
  -webkit-mask: var(--badge-hex-mask) center / 100% 100% no-repeat;
  mask: var(--badge-hex-mask) center / 100% 100% no-repeat;
}

.honor-badge-hex--unlocked {
  color: var(--badge-tone-icon);
}

.honor-badge-hex--locked {
  color: var(--color-icon-muted);
  background-color: var(--badge-gloss-locked-mid);
  background-image:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.18) 0%, transparent 58%),
    radial-gradient(circle, var(--badge-gloss-locked-dot) 0.75px, transparent 0.75px),
    linear-gradient(
      155deg,
      var(--badge-gloss-locked-top) 0%,
      var(--badge-gloss-locked-mid) 55%,
      var(--badge-gloss-locked-deep) 100%
    );
  background-size: 100% 100%, 6px 6px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -2px 6px var(--badge-gloss-locked-shadow);
  filter: saturate(0.7);
}

.honor-badge-hex--locked::after {
  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.5) 0%,
    rgb(255 255 255 / 0.12) 30%,
    transparent 50%
  );
}

.honor-badge-hex .nlc-icon {
  position: relative;
  z-index: 1;
  color: inherit;
  background: transparent;
  filter: drop-shadow(0 1px 1px rgb(67 20 7 / 0.18));
}

.honor-badge-hex__check {
  position: absolute;
  right: -0.05rem;
  bottom: 0.15rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--badge-gloss-check-bg);
  border: 1px solid var(--badge-gloss-check-border);
  color: var(--badge-tone-deep);
  box-shadow: 0 1px 4px rgb(120 53 15 / 0.18);
}

.honor-badge-hex__lock {
  position: absolute;
  top: -0.05rem;
  right: -0.05rem;
  z-index: 3;
  display: flex;
  color: var(--color-icon-muted);
}

.honor-badge-hex__level-pill {
  position: absolute;
  bottom: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  background: color-mix(in srgb, var(--text-primary) 72%, transparent);
  color: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--bg-card) 35%, transparent);
}

#badge-detail-hero .honor-badge-hex-shell::before {
  background: rgb(255 255 255 / 0.98);
}

#badge-detail-hero .honor-badge-hex--unlocked {
  background-image:
    radial-gradient(circle at 50% 34%, rgb(255 255 255 / 0.28) 0%, transparent 58%),
    radial-gradient(circle, rgb(255 255 255 / 0.32) 0.85px, transparent 0.85px),
    linear-gradient(
      155deg,
      #FDE68A 0%,
      var(--color-achievement) 42%,
      #92400E 100%
    );
  color: #78350F;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    inset 0 -4px 12px rgb(67 20 7 / 0.35);
}

#badge-detail-hero .honor-badge-hex--locked {
  background-image:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.14) 0%, transparent 58%),
    radial-gradient(circle, rgb(255 255 255 / 0.12) 0.85px, transparent 0.85px),
    linear-gradient(
      155deg,
      var(--badge-gloss-locked-top) 0%,
      var(--badge-gloss-locked-mid) 55%,
      var(--badge-gloss-locked-deep) 100%
    );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 8px var(--badge-gloss-locked-shadow);
}

body.dark-theme {
  --badge-gloss-edge: #FFFBEB;
  --badge-gloss-rim: rgb(255 251 235 / 0.55);
  --badge-gloss-beam-strong: rgb(255 255 255 / 0.42);
  --badge-gloss-beam-soft: rgb(255 255 255 / 0.1);
  --badge-gloss-dot: rgb(255 255 255 / 0.22);
  --badge-gloss-shadow: rgb(0 0 0 / 0.38);
  --badge-gloss-check-bg: #422006;
  --badge-gloss-check-border: rgb(255 255 255 / 0.35);
  --badge-tone-top: #FBBF24;
  --badge-tone-mid: #D97706;
  --badge-tone-deep: #92400E;
  --badge-tone-icon: #FEF3C7;
  --badge-tone-inner-shadow: rgb(0 0 0 / 0.35);
  --badge-gloss-locked-top: #404040;
  --badge-gloss-locked-mid: #333333;
  --badge-gloss-locked-deep: #262626;
  --badge-gloss-locked-dot: rgb(255 255 255 / 0.08);
  --badge-gloss-locked-shadow: rgb(0 0 0 / 0.28);
}

body.dark-theme .honor-badge-hex--unlocked {
  box-shadow:
    inset 0 1px 0 var(--badge-gloss-rim),
    inset 0 -3px 10px var(--badge-tone-inner-shadow);
}

body.dark-theme .honor-badge-hex--unlocked::after {
  background: linear-gradient(
    145deg,
    var(--badge-gloss-beam-strong) 0%,
    var(--badge-gloss-beam-soft) 30%,
    transparent 52%
  );
}

/* Honor badge wall items */
.honor-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.375rem;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: transform 0.2s ease;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.honor-badge-item--tile {
  padding: 0.5rem 0.375rem;
  gap: 0.5rem;
  min-height: 0;
}

.honor-badge-item--tile .honor-badge-hex-shell {
  width: 4.5rem;
}

.honor-badge-item.unlocked,
.honor-badge-item.locked {
  background: transparent;
  border: none;
  box-shadow: none;
}

.honor-badge-item.unlocked:hover {
  transform: translateY(-2px);
}

.honor-badge-item.unlocked:hover .honor-badge-hex-shell {
  filter: drop-shadow(0 4px 14px rgb(180 83 9 / 0.32));
}

.honor-badge-item__lock {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 4;
  color: var(--color-icon-muted);
}

.honor-badge-item__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
}

.honor-badge-item__icon,
.honor-badge-item__icon-wrap .nlc-icon {
  color: inherit;
  background: transparent;
}

.honor-badge-item__title {
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: var(--type-weight-strong);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.honor-badge-item.unlocked .honor-badge-item__title { color: var(--text-primary); }
.honor-badge-item.locked .honor-badge-item__title { color: var(--text-muted); }

.badge-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: 0.875rem;
  margin-top: -0.25rem;
}

.badge-star {
  display: inline-flex;
  color: var(--color-icon-muted);
  opacity: 0.52;
}

.badge-star .nlc-icon {
  --nlc-icon-size: 0.8125rem;
  width: var(--nlc-icon-size);
  height: var(--nlc-icon-size);
  color: inherit;
  fill: currentColor;
}

.badge-star--lit {
  color: var(--color-achievement);
  opacity: 1;
}

.badge-star--unlit {
  color: var(--color-icon-muted);
}

.badge-stars--compact {
  gap: 0.0625rem;
  min-height: 0.625rem;
  margin-top: 0.125rem;
}

/* ─── Prestige Badge Ratings (Diamonds & Crowns for Rounds 6~10+) ─── */
.badge-diamond {
  display: inline-flex;
  color: #38bdf8;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6));
}

.badge-diamond .nlc-icon {
  --nlc-icon-size: 0.875rem;
  width: var(--nlc-icon-size);
  height: var(--nlc-icon-size);
  color: #38bdf8;
  fill: rgba(56, 189, 248, 0.85);
}

.badge-crown {
  display: inline-flex;
  color: #f59e0b;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.75));
}

.badge-crown .nlc-icon {
  --nlc-icon-size: 0.9375rem;
  width: var(--nlc-icon-size);
  height: var(--nlc-icon-size);
  color: #fbbf24;
  fill: #f59e0b;
}

.badge-stars--compact .badge-diamond .nlc-icon {
  --nlc-icon-size: 0.625rem;
}

.badge-stars--compact .badge-crown .nlc-icon {
  --nlc-icon-size: 0.6875rem;
}

.badge-stars--compact .nlc-icon {
  --nlc-icon-size: 0.5625rem;
}

.honor-badge-hex__level-pill.is-unlit {
  background: color-mix(in srgb, var(--color-icon-muted) 72%, transparent);
  color: var(--bg-card);
}

/* Compact badge strip (dashboard / plan stats) */
.badge-strip-card {
  margin-bottom: 1.5rem;
}

.badge-strip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.badge-strip__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--type-weight-strong);
}

.badge-strip__link {
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
}

.badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.badge-strip__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.badge-strip__item.unlocked:hover,
.badge-strip__item.locked:hover {
  transform: translateY(-1px);
}

.badge-strip__item.unlocked:hover .honor-badge-hex-shell {
  filter: drop-shadow(0 3px 10px rgb(180 83 9 / 0.28));
}

.badge-strip__item .nlc-icon {
  color: inherit;
  background: transparent;
}

/* Badge detail — how to earn trigger card */
.badge-detail-trigger {
  margin: 0 1rem 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-input));
}

.badge-detail-trigger__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.badge-detail-trigger__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.secondary-btn.w-full { width: 100%; }

/* Lucide icons (via data-icon / renderIcon) */
.nlc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--color-icon-default);
  line-height: 0;
  background: transparent;
}
.nlc-icon svg,
.nlc-icon__svg {
  display: block;
  width: var(--nlc-icon-size, 1em);
  height: var(--nlc-icon-size, 1em);
  background: transparent;
}

/* Semantic icon size utilities */
.nlc-icon--xs { --nlc-icon-size: var(--icon-size-xs); width: var(--icon-size-xs); height: var(--icon-size-xs); }
.nlc-icon--sm { --nlc-icon-size: var(--icon-size-sm); width: var(--icon-size-sm); height: var(--icon-size-sm); }
.nlc-icon--md { --nlc-icon-size: var(--icon-size-md); width: var(--icon-size-md); height: var(--icon-size-md); }
.nlc-icon--lg { --nlc-icon-size: var(--icon-size-lg); width: var(--icon-size-lg); height: var(--icon-size-lg); }
.nlc-icon--nav { --nlc-icon-size: var(--icon-size-nav); width: var(--icon-size-nav); height: var(--icon-size-nav); }
.nlc-icon--touch { --nlc-icon-size: var(--icon-size-touch); width: var(--icon-size-touch); height: var(--icon-size-touch); }
.nlc-icon--hero { --nlc-icon-size: var(--icon-size-hero); width: var(--icon-size-hero); height: var(--icon-size-hero); }
.nlc-icon--badge { --nlc-icon-size: var(--icon-size-badge); width: var(--icon-size-badge); height: var(--icon-size-badge); }

/*
 * Icon + label color pairing: on controls and inline label rows, glyphs inherit
 * the surrounding text color. Standalone/decorative icons keep --color-icon-* tokens.
 */
button .nlc-icon,
[role="button"] .nlc-icon,
.dropdown-item .nlc-icon,
.options-dropdown-item .nlc-icon,
.btn-with-icon .nlc-icon,
.label-with-icon .nlc-icon {
  color: inherit;
}

/* Nav-back chevrons — optical centering + heavier stroke in touch targets */
.nav-back-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: inherit;
}

.nav-back-chevron svg {
  stroke-width: 2.5;
}

.app-back-btn .nav-back-chevron,
.reader-back-btn .nav-back-chevron,
#badge-page-back-btn .nav-back-chevron,
.circular-action-btn .nav-back-chevron {
  transform: translateX(-1px);
}

.overlay-back-btn .nav-back-chevron {
  transform: translateX(-1px);
  margin-inline-end: -0.05rem;
}

.nlc-icon--inline svg {
  width: 1.05em;
  height: 1.05em;
}

/* Component icon size recipes */
.mobile-nav-btn .nlc-icon {
  --nlc-icon-size: var(--icon-size-nav);
  width: var(--icon-size-nav);
  height: var(--icon-size-nav);
}

.dashboard-stat-strip__icon {
  --nlc-icon-size: var(--icon-size-sm);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.stat-bento__icon-wrap .nlc-icon,
.stat-bento__icon-wrap--hero .nlc-icon {
  --nlc-icon-size: var(--icon-size-sm);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: inherit;
}

.honor-badge-item__icon .nlc-icon {
  --nlc-icon-size: var(--icon-size-md);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.search-icon-inside.nlc-icon,
.search-icon-inside .nlc-icon {
  --nlc-icon-size: var(--icon-size-sm);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-icon-muted);
}

#verse-card-toolbar .nlc-icon {
  --nlc-icon-size: var(--icon-size-md);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

#reader-view .floating-nav-btn .nlc-icon {
  --nlc-icon-size: var(--icon-size-touch);
  width: var(--icon-size-touch);
  height: var(--icon-size-touch);
}

#detail-icon.nlc-icon {
  --nlc-icon-size: var(--icon-size-hero);
  width: var(--icon-size-hero);
  height: var(--icon-size-hero);
}

/* Global Styles */
body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-weight: var(--type-weight-regular);
  min-height: 100vh;
  transition: var(--transition-smooth);
}

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header Design */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--backdrop-blur);
  z-index: 100;
  transition: var(--transition-smooth);
}

.header-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand,
.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--type-weight-strong);
  font-size: 0.875rem;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.brand:hover,
.brand-mark:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.brand-icon {
  width: 28px;
  height: 28px;
  color: var(--primary-color);
}

.brand-icon-img {
  height: 44px;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}


/* Global App Navigation */
.app-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0 0.8rem;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.app-back-btn:hover {
  color: var(--primary-color);
  border-color: var(--color-brand-border);
}

.app-back-btn.is-home svg,
.app-back-btn.is-home .nlc-icon {
  display: none;
}

.app-back-btn.is-home {
  color: var(--primary-color);
  background: var(--color-brand-muted);
}

/* Navigation Tabs */
.nav-tabs {
  display: flex;
  gap: 0.5rem;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-btn:hover {
  background-color: var(--color-brand-muted);
  color: var(--primary-color);
}

.tab-btn.active {
  background: var(--color-brand);
  color: #ffffff;
  box-shadow: var(--shadow-none);
}

.tab-btn--with-badge,
.mobile-nav-btn--with-badge {
  position: relative;
}

.care-reminder-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--bg-header);
  border-radius: 999px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.care-reminder-badge[hidden] {
  display: none;
}

.care-reminder-badge--desktop {
  top: 1px;
  right: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-badge.offline {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-badge.online {
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: #059669;
}

.status-badge .indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-badge.online .indicator {
  box-shadow: var(--shadow-none);
}

/* Theme Toggle Button */
.icon-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.icon-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-hover);
}

/* Verse card loading skeleton — full overlay until background image is ready */
#verse-card.is-loading {
  background: var(--skeleton-base);
}

#verse-card.is-loading #verse-card-overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#verse-card-skeleton,
#verse-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  flex: 1;
}

#verse-card-skeleton {
  display: none;
}

#verse-card.is-loading #verse-card-skeleton {
  display: flex;
}

#verse-card.is-loading #verse-card-body {
  display: none;
}

#card-bg {
  opacity: 0;
}

#verse-card:not(.is-loading) #card-bg {
  opacity: 1;
}

/* Verse card toolbar — icons on dark photo overlay inherit light button color */
#verse-card-toolbar button {
  gap: 0.25rem;
  min-height: auto;
  transition: color 0.15s ease, opacity 0.15s ease;
}

#verse-card-toolbar button:hover {
  color: #fff;
}

#verse-card-toolbar button:active {
  opacity: 0.72;
}

#verse-card-toolbar .nlc-icon {
  color: inherit;
  margin-bottom: 0;
}

#verse-card-toolbar .nlc-icon svg {
  stroke-width: 2.25;
}

#share-card-btn:disabled .nlc-icon svg {
  animation: verse-toolbar-spin 0.85s linear infinite;
}

@keyframes verse-toolbar-spin {
  to { transform: rotate(360deg); }
}

.theme-icon-sun {
  display: none;
}
.theme-icon-moon {
  display: block;
}

body.light-theme .theme-icon-sun {
  display: none !important;
}
body.light-theme .theme-icon-moon {
  display: block !important;
}

body.dark-theme .theme-icon-sun {
  display: block !important;
}
body.dark-theme .theme-icon-moon {
  display: none !important;
}

/* Hide Vercel Toolbar */
vercel-live-feedback,
#vercel-live-feedback,
.vercel-toolbar,
[data-vercel-feedback],
[id^="vercel-"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main Container Layout */
.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 70px auto 0 auto;
  padding: 2.5rem 2rem;
  position: relative;
}

/* View Pane Switching */
.view-pane {
  display: none;
  animation: fadeIn 0.4s ease-out forwards;
}

.view-pane.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glass Cards */
.glass-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  height: 100%;
}

/* Issue report FAB — flat brand chrome + token-driven position */
.issue-report-fab {
  align-items: center;
  background-color: var(--color-brand) !important;
  display: flex;
  height: 3.5rem;
  justify-content: center;
  position: fixed;
  width: 3.5rem;
  z-index: var(--z-sheet);
  color: #ffffff !important;
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(
    var(--app-bottom-nav-height, 72px) + var(--app-safe-bottom, 0px) + 0.75rem
  );
}
.issue-report-fab:hover {
  background-color: var(--color-brand-hover) !important;
}
.issue-report-fab:active {
  background-color: var(--color-brand-active) !important;
}
.issue-report-fab:focus-visible {
  box-shadow: var(--shadow-lg), var(--shadow-focus-ring);
}
@media (min-width: 769px) {
  .issue-report-fab {
    bottom: calc(var(--app-safe-bottom, 0px) + 1.5rem);
    right: max(1.5rem, env(safe-area-inset-right, 0px));
  }
}
.glass-card:hover {
  border-color: color-mix(in srgb, var(--color-brand) 30%, var(--border-card));
}

.card-title {
  font-size: 1.25rem;
  font-weight: var(--type-weight-strong);
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  margin-top: -1rem;
}

/* Grid Layout definitions */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.card-col {
  height: 100%;
}

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

/* Dashboard Specific Styles */
.dashboard-hero {
  background: var(--color-brand-muted);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.welcome-title {
  font-size: 2.25rem;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  font-family: 'Outfit', sans-serif;
}

.welcome-title span {
  background: var(--color-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.streak-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.streak-flame {
  font-size: 2.5rem;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-danger) 40%, transparent)); }
}

.streak-count {
  font-size: 2rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  line-height: 1.1;
  margin: 0.25rem 0;
  font-family: 'Outfit', sans-serif;
}

.streak-count .unit {
  font-size: 1rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
}

.streak-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: var(--type-weight-strong);
  text-transform: uppercase;
}

/* Dashboard list rankings */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background-color: var(--color-brand-muted);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.ranking-item:hover {
  background-color: var(--color-brand-muted);
  transform: translateX(3px);
}

.rank-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--type-weight-strong);
  font-size: 0.9rem;
  color: #ffffff;
  background: var(--text-muted);
}

.rank-number.rank-1 { background: #F59E0B; }
.rank-number.rank-2 { background: #94A3B8; }
.rank-number.rank-3 { background: #B45309; }

.rank-details {
  flex: 1;
}

.rank-name {
  font-weight: var(--type-weight-strong);
  font-size: 0.95rem;
}

.rank-value {
  font-weight: var(--type-weight-strong);
  color: var(--primary-color);
  font-size: 1.1rem;
  font-family: 'Outfit', sans-serif;
}

/* Form Styling */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: var(--type-weight-strong);
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-smooth);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-focus-ring);
}

/* ═══ Buttons (2025 Modern Redesign) ═══════════════════════════════════════ */

/* ─── Primary CTA — gradient + brand glow ─── */
.primary-btn {
  background: linear-gradient(135deg, #04A9D2 0%, #0284A3 100%);
  color: #ffffff;
  border: none;
  padding: 0.78rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* inner shine + glow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 16px -4px rgba(4,169,210,0.45);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.primary-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, transparent 55%);
  pointer-events: none;
}
.primary-btn:hover {
  background: linear-gradient(135deg, #26B8DC 0%, #04A9D2 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 6px 20px -4px rgba(4,169,210,0.55);
  transform: translateY(-1px);
}

/* ─── Secondary — frosted glass ─── */
.secondary-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.78rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
}
.secondary-btn:hover {
  background: rgba(4, 169, 210, 0.10);
  border-color: rgba(4, 169, 210, 0.35);
  transform: translateY(-1px);
}
/* Light-mode secondary override */
body:not(.dark-theme) .secondary-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
body:not(.dark-theme) .secondary-btn:hover {
  background: rgba(4, 169, 210, 0.08);
  border-color: rgba(4, 169, 210, 0.30);
}

/* ─── Shadcn UI Speech Preview Button ─── */
.shadcn-speech-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, var(--brand-primary, #04A9D2) 0%, color-mix(in srgb, var(--brand-primary, #04A9D2) 80%, #0284c7) 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(4, 169, 210, 0.35);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shadcn-speech-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(4, 169, 210, 0.45);
}

.shadcn-speech-btn--playing {
  background: linear-gradient(135deg, var(--status-danger, #ef4444) 0%, color-mix(in srgb, var(--status-danger, #ef4444) 80%, #000) 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

/* ─── Settings row — iOS-style list item ─── */
.settings-row-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
}
.settings-row-btn:hover {
  background: rgba(4, 169, 210, 0.08);
  border-color: rgba(4, 169, 210, 0.25);
  transform: translateY(-1px);
}
.settings-row-btn .settings-row-btn__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  flex-shrink: 0;
}
.settings-row-btn .settings-row-btn__label {
  flex: 1;
}
.settings-row-btn .settings-row-btn__chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}
body:not(.dark-theme) .settings-row-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body:not(.dark-theme) .settings-row-btn:hover {
  background: rgba(4, 169, 210, 0.06);
  border-color: rgba(4, 169, 210, 0.22);
}

/* ─── Focus rings ─── */
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.danger-btn:focus-visible,
.settings-row-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* ─── Active press states ─── */
.primary-btn:active,
.secondary-btn:active,
.danger-btn:active,
.settings-row-btn:active,
.tab-btn:active,
.mobile-nav-btn:active,
.reading-team-choice:active,
.reading-team-remind-btn:active {
  transform: scale(0.97) translateY(0);
  transition: transform 0.08s ease;
}

/* ─── Disabled ─── */
.primary-btn:disabled,
.secondary-btn:disabled,
.danger-btn:disabled,
.settings-row-btn:disabled {
  cursor: not-allowed;
  opacity: 0.50;
  transform: none !important;
}

/* ─── Danger — ghost red ─── */
.danger-btn {
  background: rgba(239, 68, 68, 0.10);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.22);
  padding: 0.78rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 1px 4px rgba(239,68,68,0.08);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
}
.danger-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.40);
  box-shadow: 0 2px 8px rgba(239,68,68,0.15);
  transform: translateY(-1px);
}

.circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  background-color: var(--bg-input);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.circle-btn:hover {
  border-color: var(--primary-color);
  background-color: var(--color-brand-muted);
}

.text-link-btn {
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-weight: var(--type-weight-strong);
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.text-link-btn:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preset-btn {
  background-color: var(--color-brand-muted);
  border: 1px solid var(--border-card);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.preset-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background-color: var(--color-brand-muted);
}

.preset-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

/* Bible Reader Layout */
/* ── Reader: compact pill bar + full-width layout ── */
.reader-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.reader-sidebar {
  position: sticky;
  top: 90px;
}

/* New compact reader layout */
#reader-view.active {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Pill bar — always-visible sticky strip */
.reader-pill-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
  position: sticky;
  top: 66px;
  z-index: 40;
  backdrop-filter: blur(12px);
  gap: 0.6rem;
}

.reader-pill-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.reader-pill-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.reader-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-pill-badge:hover,
.reader-pill-badge.active {
  background: var(--color-brand-subtle);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-1px);
}

.reader-menu-button {
  gap: 0.4rem;
  max-width: none;
  flex-shrink: 0;
}
.reader-menu-icon {
  font-size: 1rem;
  line-height: 1;
}
.reader-current-reference {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--text-primary);
  font-weight: var(--type-weight-strong);
  overflow: hidden;
}
.reader-current-reference #reader-pill-book-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.reader-current-reference #reader-pill-chapter-label {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}
.reader-pill-sep {
  color: var(--text-muted);
  font-size: 0.9rem;
  user-select: none;
}

.reader-pill-icon-btn {
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 0.2rem 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.reader-pill-icon-btn:hover {
  background: var(--bg-input);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.reader-pill-fontsize {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  min-width: 30px;
  text-align: center;
}

/* Collapsible navigation drawer */
.reader-nav-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin 0.3s ease;
  margin-bottom: 0;
}

.reader-nav-drawer.open {
  max-height: 200px;
  opacity: 1;
  margin-bottom: 0.8rem;
}

.reader-nav-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
}

.reader-nav-selects {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 0.5rem;
}

.reader-select-compact {
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
}

.reader-nav-arrows {
  display: flex;
  gap: 0.5rem;
}

.reader-nav-arrows .secondary-btn {
  flex: 1;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Floating Navigation Buttons */
.reader-floating-nav {
  pointer-events: none; /* Let clicks pass through container */
  position: fixed;
  bottom: 95px; /* Above the tab bar */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 1.2rem;
  z-index: 99;
}

.floating-nav-btn {
  pointer-events: auto; /* Re-enable clicks for buttons */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(30, 30, 46, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.8;
}

.floating-nav-btn:hover {
  opacity: 1;
  background: var(--primary-color);
  border-color: var(--primary-color);
  transform: scale(1.08);
}

.floating-nav-btn:active {
  transform: scale(0.95);
}

.floating-nav-btn .nlc-icon svg {
  stroke-width: 2.8px;
}


/* Full-width reader body */
.reader-body-full {
  width: 100%;
}

/* Keep legacy classes harmless */
.reader-nav-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.flex-btn {
  flex: 1;
}

.reader-nav-buttons .flex-btn {
  padding: 0.6rem 0.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.card-divider {
  border: 0;
  height: 1px;
  background-color: var(--border-card);
  margin: 1.5rem 0;
}

.settings-subtitle {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.typography-settings {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.font-size-indicator {
  font-weight: var(--type-weight-strong);
  font-size: 0.95rem;
}


/* Reader Card */
.reader-card {
  padding: 3rem;
  min-height: 500px;
}

.reader-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-card);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.bible-heading {
  font-size: 1.8rem;
  font-weight: var(--type-weight-strong);
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
}

.checkbox-btn {
  background: transparent;
  border: 1px solid var(--border-card);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: var(--type-weight-strong);
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.checkbox-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--color-success) 5%, transparent);
}

.checkbox-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.bible-verse.selected {
  background-color: rgba(255, 235, 59, 0.35); /* Yellow marker highlight */
}

.bible-verse.speaking-highlight {
  background-color: rgba(24, 119, 242, 0.12) !important;
  border-left: 3px solid var(--color-primary, #1877f2);
  padding-left: 0.5rem;
  border-radius: var(--radius-sm, 6px);
  transition: background-color 0.3s ease, border-left 0.3s ease;
  animation: speakingGlow 2s infinite alternate ease-in-out;
}

@keyframes speakingGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(24, 119, 242, 0);
  }
  100% {
    box-shadow: 0 0 8px 1px rgba(24, 119, 242, 0.25);
  }
}

.checkbox-btn.checked {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background-color: color-mix(in srgb, var(--color-success) 5%, transparent);
}

.checkbox-btn.checked .checkbox-box {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
}

.checkbox-btn.checked .checkbox-box::after {
  content: "✓";
  color: white;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}

.bible-verse.selected {
  background-color: rgba(255, 235, 59, 0.35); /* Yellow marker highlight */
}

.bible-verse.speaking-highlight {
  background-color: rgba(24, 119, 242, 0.12) !important;
  border-left: 3px solid var(--color-primary, #1877f2);
  padding-left: 0.5rem;
  border-radius: var(--radius-sm, 6px);
  transition: background-color 0.3s ease, border-left 0.3s ease;
  animation: speakingGlow 2s infinite alternate ease-in-out;
}

@keyframes speakingGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(24, 119, 242, 0);
  }
  100% {
    box-shadow: 0 0 8px 1px rgba(24, 119, 242, 0.25);
  }
}

/* Bible text formatting */
.bible-text-container {
  line-height: 1.8;
  color: var(--text-primary);
  font-weight: 400;
}

.bible-verse {
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.bible-verse:hover {
  background-color: var(--color-brand-muted);
}

.verse-num {
  font-weight: var(--type-weight-strong);
  color: var(--primary-color);
  margin-right: 0.5rem;
  font-family: 'Outfit', sans-serif;
}

.bible-verse.selected {
  background-color: rgba(255, 235, 59, 0.35); /* Yellow marker highlight */
}

/* Contextual Toolbar */
.context-toolbar {
  position: fixed;
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 50px;
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--backdrop-blur);
  z-index: 500;
  transform: translate(-50%, -100%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.context-toolbar.active {
  transform: translate(-50%, -120%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.toolbar-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: var(--transition-smooth);
}

.toolbar-action:hover {
  transform: scale(1.1);
}

/* ── Bible Version Picker Modal ── */
.version-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.version-picker-modal.hidden {
  display: none !important;
}

.version-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.version-picker-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  padding: 1.25rem 1.5rem 1.5rem;
  box-sizing: border-box;
  animation: versionPickerPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes versionPickerPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.version-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.version-picker-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.version-picker-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  line-height: 1;
}

.version-picker-close:hover {
  background: var(--bg-surface-hover, rgba(0, 0, 0, 0.05));
  color: var(--text-primary);
}

.version-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

.version-option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  margin-top: 0.4rem;
  border-radius: 12px;
  border: 1.5px solid var(--border-card, #e2e8f0);
  background: var(--bg-surface, #f8fafc);
  color: var(--text-primary, #0f172a);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.version-option-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  border-color: var(--color-primary-light, #93c5fd);
}

.version-option-btn .v-check {
  display: none;
  color: var(--color-primary, #1877f2);
  font-size: 1.1rem;
}

.version-option-btn.active {
  background: rgba(24, 119, 242, 0.08);
  border-color: var(--color-primary, #1877f2);
  color: var(--color-primary, #1877f2);
  font-weight: 700;
}

.version-option-btn.active .v-check {
  display: inline-block;
}

/* Plan setup layout */
.book-selection-box {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background-color: var(--bg-input);
  max-height: 180px;
  overflow-y: auto;
  padding: 0.75rem;
}

.checkbox-label-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label-block input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
}

.plan-summary-badge {
  background-color: var(--color-brand-muted);
  border-left: 4px solid var(--primary-color);
  padding: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Plan Progress Tracker */
.plan-progress-header {
  margin-bottom: 1.5rem;
}

.plan-progress-header > div:first-child > h4 {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-progress-wrapper {
  height: 10px;
  background-color: var(--color-progress-track);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.plan-progress-wrapper--compact {
  height: 4px;
  border-radius: 2px;
  margin-top: 0.4rem;
}

.plan-progress-bar {
  height: 100%;
  background: var(--color-progress-fill);
  width: 0%;
  transition: width 0.4s ease;
}

.day-section {
  border-bottom: 1px solid var(--border-card);
  padding: 1rem 0;
}

.day-title-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.day-title {
  font-weight: var(--type-weight-strong);
  font-size: 1.05rem;
}

.day-badge {
  font-size: 0.875rem;
  padding: 0.25rem 0.6rem;
  background-color: var(--border-card);
  border-radius: 50px;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
}

.day-badge.complete {
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success-foreground);
}

.day-chapters-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 0.5rem 0.2rem 0.5rem;
}

.chapter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.chapter-checkbox-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-color);
}

.chapter-checkbox-item.checked {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Statistics Overview */
.stats-overview-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stats-mini-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.stats-mini-card .label {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.stats-mini-card .value {
  font-size: 1.8rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

.chart-container {
  position: relative;
  height: 250px;
  width: 100%;
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.inline-select {
  max-width: 180px;
}

/* Tables */
.table-container {
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-card);
  text-transform: uppercase;
}

.data-table td {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-card);
  color: var(--text-secondary);
}

.data-table tbody tr:hover {
  background-color: var(--color-brand-muted);
}

/* Cloud sync screen details */
.auth-section {
  margin-top: 1.5rem;
}

.btn-group-auth {
  display: flex;
  gap: 0.5rem;
}

.btn-group-auth button {
  flex: 1;
}

.auth-user-info {
  background-color: color-mix(in srgb, var(--color-success) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}

.badge.success {
  background-color: var(--accent-color);
  color: white;
}

/* Utility Hidden */
.hidden {
  display: none !important;
}

.admin-team-status-disclosure > summary {
  list-style: none;
}

.admin-team-status-disclosure > summary::-webkit-details-marker {
  display: none;
}

.admin-team-status-toggle-label--closed {
  display: none;
}

.admin-team-status-disclosure:not([open]) .admin-team-status-toggle-label--open {
  display: none;
}

.admin-team-status-disclosure:not([open]) .admin-team-status-toggle-label--closed {
  display: inline;
}

#admin-team-status-toggle-icon {
  transition: transform 0.2s ease;
}

.admin-team-status-disclosure[open] #admin-team-status-toggle-icon {
  transform: rotate(180deg);
}

/* Footer Styling */
.main-footer {
  text-align: center;
  padding: 2.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--border-card);
  margin-top: auto;
}

/* Mobile Nav Bar - Hidden by default on Desktop */
.mobile-nav-bar {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .reader-layout {
    grid-template-columns: 1fr;
  }

  .reader-sidebar {
    position: static;
  }

  .grid-layout {
    display: flex;
    flex-direction: column;
  }

  .stats-overview-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .header-container {
    gap: 0.5rem;
  }

  .brand-text {
    display: none;
  }

  .brand-icon {
    width: 26px;
    height: 26px;
  }

  .app-back-btn {
    min-height: 38px;
    padding: 0 0.7rem;
    font-size: 0.875rem;
  }

  .status-badge {
    display: none;
  }

  .header-container {
    padding: 0 1rem;
  }

  .nav-tabs {
    display: none; /* Hide header tabs on mobile */
  }

  .main-content {
    padding: 1.5rem 1rem calc(var(--app-bottom-nav-height, 72px) + var(--app-safe-bottom, 0px) + 1rem) 1rem;
  }

  .main-footer {
    padding: 1.5rem 1rem;
    margin-bottom: calc(var(--app-bottom-nav-height, 72px) + var(--app-safe-bottom, 0px));
  }

  .dashboard-hero {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    text-align: center;
    padding: 1.5rem;
  }

  .streak-card {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Google Auth and Demo Switcher Styles */
#btn-google-login {
  transition: var(--transition-smooth);
}
#btn-google-login:hover {
  background-color: var(--color-brand-muted) !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-1px);
}


/* PWA and Auth UI animations */
@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

.auth-card {
  transition: all 0.3s ease;
}

/* Login Gate Style */
.login-gate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 1.5rem;
  box-sizing: border-box;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo-wrapper {
  width: 72px;
  height: 72px;
  background: var(--color-brand);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.login-logo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-title {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-size: 1.75rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.login-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.auth-environment-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-critical);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-page);
  background: rgba(15, 23, 42, 0.48);
}

.auth-environment-dialog__panel {
  width: min(100%, 420px);
  padding: 1.35rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.auth-environment-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  color: var(--color-brand);
  background: var(--bg-card);
}

.auth-environment-dialog__title {
  margin: 0 0 0.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.auth-environment-dialog__body,
.auth-environment-dialog__note,
.auth-environment-dialog__hint,
.auth-environment-dialog__status {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.auth-environment-dialog__note {
  margin-top: 0.65rem;
}

.auth-environment-dialog__hint {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.auth-environment-dialog__status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-brand);
}

.auth-environment-dialog__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 1.15rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-brand-foreground);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.auth-environment-dialog__primary:hover {
  background: var(--color-brand-hover);
}

.auth-environment-dialog__primary:active {
  background: var(--color-brand-active);
  transform: translateY(1px);
}

.auth-environment-dialog__manual {
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle, rgba(0,0,0,0.04));
}

.auth-environment-dialog__steps {
  margin: 0.35rem 0 0;
  padding-left: 1.4rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.auth-environment-dialog__steps li + li {
  margin-top: 0.1rem;
}

.auth-environment-dialog__steps strong {
  color: var(--color-brand);
  font-weight: 600;
}

/* Dark mode overrides for login gate */
.dark-theme .login-gate {
  background: var(--bg-app);
}

.dark-theme .login-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-lg);
}

/* Devotional Notes Card styles */
.devotional-card textarea:focus,
.devotional-textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-focus-ring);
  background-color: var(--bg-card);
}

/* ==========================================================================
   Dashboard panel cards — shadcn Card / Badge / Empty state patterns
   (announcements + devotional; behavior unchanged, IDs preserved)
   ========================================================================== */

.glass-card.dashboard-panel-card {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.glass-card.dashboard-panel-card:hover {
  border-color: var(--border-card);
}

.dashboard-panel-card__header {
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.dashboard-panel-card__title {
  margin: 0;
  gap: 0.625rem;
  font-size: 1.0625rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.3;
}

.dashboard-panel-card__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  color: var(--color-brand);
}

.dashboard-panel-card__title-icon .nlc-icon {
  color: inherit;
}

.dashboard-panel-card__title-text {
  align-self: center;
}

.dashboard-panel-card__action {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.dashboard-panel-card__action .nlc-icon {
  color: inherit;
}

/* Announcements */
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-height: none;
  overflow: visible;
}

.announcements-list__skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.announcement-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-card));
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.announcement-item:hover {
  border-color: color-mix(in srgb, var(--color-brand) 28%, var(--border-card));
  border-color: color-mix(in srgb, var(--brand-primary, #04A9D2) 35%, var(--border-card));
  background: color-mix(in srgb, var(--brand-primary, #04A9D2) 5%, var(--bg-card));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(4, 169, 210, 0.12);
}

/* Featured / Pinned Announcement Left Accent Glow */
.announcement-item--featured {
  border-left: 4px solid var(--brand-primary, #04A9D2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #04A9D2) 8%, var(--bg-card)) 0%, color-mix(in srgb, var(--bg-card) 98%, var(--text-primary)) 100%);
  box-shadow: 0 4px 16px rgba(4, 169, 210, 0.15);
}

.announcement-item--featured:hover {
  border-left-color: #38bdf8;
  box-shadow: 0 6px 20px rgba(4, 169, 210, 0.22);
}

.announcement-item--skeleton {
  gap: 0.65rem;
  pointer-events: none;
}

.announcement-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.announcement-item__header-left {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.announcement-item__icon-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--brand-primary, #04A9D2) 12%, transparent);
  color: var(--brand-primary, #04A9D2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #04A9D2) 25%, transparent);
}

.announcement-item__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.announcement-item__tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Badges for Categories */
.announcement-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.announcement-badge--danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.2) 100%);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.announcement-badge--info {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(2, 132, 199, 0.2) 100%);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.announcement-badge--success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--status-success) 15%, transparent) 0%, color-mix(in srgb, var(--status-success) 20%, transparent) 100%);
  color: var(--status-success);
  border: 1px solid color-mix(in srgb, var(--status-success) 30%, transparent);
}

.announcement-badge--warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.2) 100%);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.announcement-badge--default {
  background: color-mix(in srgb, var(--brand-primary, #04A9D2) 12%, transparent);
  color: var(--brand-primary, #04A9D2);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #04A9D2) 30%, transparent);
}

.announcement-item__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.announcement-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.announcement-item__time {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  white-space: nowrap;
}

.announcement-item__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.announcements-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--text-muted) 35%, var(--border-card));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-input));
}

.announcements-empty__icon {
  color: var(--color-icon-muted);
  opacity: 0.85;
}

.announcements-empty__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.announcement-form-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-input));
}

.announcement-form-panel__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}

.announcement-form-panel__input,
.announcement-form-panel__textarea {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.announcement-form-panel__textarea {
  min-height: 5rem;
  resize: vertical;
}

.announcement-form-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.announcement-form-panel__cancel,
.announcement-form-panel__submit {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Devotional panel */
.devotional-card .privacy-badge {
  font-size: 0.875rem;
  gap: 0.25rem;
}

.devotional-field {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.devotional-textarea {
  flex: 1;
  min-height: 8.75rem;
  resize: vertical;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}

.devotional-save-status {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--color-success-foreground);
  background: var(--bg-card);
  border: 1px solid var(--color-success-border);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.devotional-save-status__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-success-foreground);
  flex-shrink: 0;
}

.devotional-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-card);
}

.devotional-word-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.devotional-save-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .glass-card.dashboard-panel-card {
    padding: 1rem;
  }

  .dashboard-panel-card__header {
    flex-wrap: wrap;
  }

  .dashboard-panel-card__action {
    width: 100%;
    justify-content: center;
  }

  .devotional-footer {
    flex-wrap: wrap;
  }

  .devotional-save-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Today Progress Member list styles */
.member-progress-list::-webkit-scrollbar {
  width: 4px;
}
.member-progress-list::-webkit-scrollbar-track {
  background: transparent;
}
.member-progress-list::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 4px;
}
.member-progress-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.member-progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.member-progress-item:hover {
  border-color: var(--primary-color);
  background: var(--bg-card);
  transform: translateX(2px);
}

.member-progress-item .member-name-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.member-progress-item .member-name {
  font-size: 0.88rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}

.member-progress-item .member-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.progress-badge {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.progress-badge.completed {
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  color: var(--color-success-foreground);
  border: 1px solid color-mix(in srgb, var(--color-success) 15%, transparent);
}
.progress-badge.pending {
  background: var(--border-card);
  color: var(--text-muted);
  border: 1px solid var(--border-card);
}

/* Monthly Hall of Fame card styles */
.monthly-fame-card {
  padding: 2rem;
}

.monthly-fame-item {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.monthly-fame-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.monthly-fame-month {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: var(--type-weight-strong);
  color: var(--primary-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-card);
}

.fame-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
}
.fame-row:not(:last-child) {
  border-bottom: 1px dashed var(--border-card);
}

.fame-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--type-weight-strong);
  font-size: 0.875rem;
}
.fame-rank.gold {
  background: #F59E0B;
  color: #ffffff;
  box-shadow: var(--shadow-none);
}
.fame-rank.silver {
  background: #9CA3AF;
  color: #ffffff;
  box-shadow: var(--shadow-none);
}
.fame-rank.bronze {
  background: #D97706;
  color: #ffffff;
  box-shadow: var(--shadow-none);
}

.fame-name {
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  flex: 1;
}

.fame-value {
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Winding Pilgrimage Trail Styling */
.pilgrimage-card {
  padding: 1.5rem;
}
.trail-scroll-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--border-card) transparent;
}
.trail-scroll-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.trail-scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.trail-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 4px;
}
.trail-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Bible Reading Heatmap Grid */
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 10px);
  grid-auto-flow: column;
  grid-auto-columns: 10px;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  width: 100%;
}
.heatmap-grid::-webkit-scrollbar {
  height: 4px;
}
.heatmap-grid::-webkit-scrollbar-track {
  background: transparent;
}
.heatmap-grid::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 2px;
}

.heatmap-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.heatmap-cell:hover {
  transform: scale(1.3);
  filter: brightness(1.15);
  z-index: 10;
}


/* Profile Page */
.profile-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.2rem;
}

.profile-page-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  letter-spacing: 0;
}

.profile-page-subtitle {
  margin: 0.25rem 0 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: var(--type-weight-strong);
}

.profile-section-card {
  height: auto;
}

.profile-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.profile-section-title-row .card-title {
  margin-bottom: 0;
}

.profile-section-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: var(--color-brand-subtle);
  color: var(--primary-color);
  border: 1px solid var(--color-brand-border);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .profile-page-title {
    font-size: 1.35rem;
  }

  .profile-section-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.achievement-unlock-overlay div {
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
  0% { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* responsive zoom and scrolling fixes */
@media (max-width: 768px) {
  .heatmap-grid {
    padding-bottom: 0.8rem;
  }
}



.profile-summary-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 1.5rem;
  margin-bottom: 1rem;
}

.profile-summary-header__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.nlc-avatar--skeleton {
  overflow: hidden;
  background: var(--skeleton-base);
  border: 1px solid var(--border-card);
}
.nlc-avatar--skeleton .skeleton-shimmer {
  min-width: 100%;
  min-height: 100%;
}
.nlc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-weight: var(--type-weight-strong);
  user-select: none;
}

.nlc-avatar--header {
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
}

.nlc-avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}

.nlc-avatar--lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.8rem;
  box-shadow: var(--shadow-sm);
}

.nlc-avatar__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nlc-avatar__image--loaded {
  opacity: 1;
}

.nlc-avatar:has(.nlc-avatar__image--loaded) .nlc-avatar__fallback {
  opacity: 0;
}

.nlc-avatar__fallback {
  position: relative;
  z-index: 0;
  line-height: 1;
  transition: opacity 0.15s ease;
}

/* -----------------------------------------------------------------
   Header Avatar Dropdown
   ----------------------------------------------------------------- */
.user-avatar-container {
  position: relative;
  display: flex;
  align-items: center;
}

.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, border-color 0.18s ease;
  box-shadow: var(--shadow-none);
  user-select: none;
}

.avatar-btn:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.55);
}

.avatar-btn:active {
  transform: scale(0.97);
}

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: rgba(30, 32, 60, 0.92);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border-card, rgba(255,255,255,0.12));
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  overflow: hidden;
  animation: avatarDropIn 0.2s cubic-bezier(0.22,1,0.36,1) forwards;
  transform-origin: top right;
}

@keyframes avatarDropIn {
  from { opacity: 0; transform: scale(0.9) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.avatar-dropdown.hidden {
  display: none;
}

.dropdown-header {
  padding: 1rem 1.1rem 0.8rem;
  border-bottom: 1px solid var(--border-card, rgba(255,255,255,0.1));
}

.dropdown-user-name {
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-email {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-card, rgba(255,255,255,0.08));
  margin: 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: default;
}

.dropdown-item.role-item {
  color: var(--text-muted);
  font-size: 0.875rem;
  gap: 0.4rem;
}

.role-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  background: var(--color-brand-subtle);
  color: var(--primary-color);
  border: 1px solid var(--color-brand-border);
  letter-spacing: 0.02em;
}

button.logout-btn {
  cursor: pointer;
  color: var(--color-danger-foreground);
  font-weight: var(--type-weight-strong);
  transition: background 0.15s ease, color 0.15s ease;
  border-top: 1px solid var(--border-card);
}

button.logout-btn:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger-foreground);
}

.light-theme .avatar-dropdown {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.1);
  box-shadow: var(--shadow-lg);
}

.light-theme .dropdown-header {
  border-bottom-color: rgba(0,0,0,0.08);
}

.light-theme .dropdown-divider {
  background: rgba(0,0,0,0.07);
}

@media (max-width: 480px) {
  .avatar-dropdown {
    right: -8px;
    min-width: 200px;
  }
}

/* Progress Bar Animations for different rounds */
.plan-progress-bar.round-1 {
  background: var(--color-progress-fill);
}

.plan-progress-bar.round-2 {
  background: var(--color-brand);
  position: relative;
  overflow: hidden;
}
.plan-progress-bar.round-2::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  animation: pulse-glow 2s infinite;
}

.plan-progress-bar.round-3 {
  background: var(--color-warning);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-none);
}
.plan-progress-bar.round-3::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  animation: gold-shimmer 2.5s infinite linear;
}

.plan-progress-bar.round-4 {
  background: var(--color-brand);
  background-size: 200% 200%;
  animation: rainbow-flow 4s infinite linear;
}

@keyframes pulse-glow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes gold-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes rainbow-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================
   YOUVERSION APP STYLE REDESIGN
   ========================================== */

/* Red thin progress bars matching YouVersion */
.joined-plan-item-card .plan-progress-wrapper {
  height: 4px !important;
  background: var(--color-progress-track) !important;
  border-radius: 2px !important;
  overflow: hidden;
}
.joined-plan-item-card .plan-progress-bar {
  height: 100% !important;
  background: var(--color-progress-fill) !important;
  border-radius: 2px !important;
}

/* Horizontal scroll pills row */
.status-pills-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.4rem 0.1rem;
  margin-bottom: 1.2rem;
  scrollbar-width: none;
}
.status-pills-row::-webkit-scrollbar {
  display: none;
}
.pill-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.pill-btn.active {
  background: var(--text-primary);
  color: var(--bg-app);
  border-color: var(--text-primary);
}

/* ── Unified in-page segmented toggles (not primary app nav) ─────────── */
.segment-track,
.stats-inner-tab-row,
.capsule-segmented-control,
#bible-nav-overlay .bible-nav-sheet__tabs.segmented-control,
#bible-nav-overlay .bible-nav-sheet__toggle-group.view-mode-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-app));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  box-sizing: border-box;
}

.stats-inner-tab-row {
  margin-bottom: 1.2rem;
  width: 100%;
  padding: 0.28rem;
  border-radius: 14px;
}

.capsule-segmented-control {
  flex-shrink: 0;
  padding: 2px;
  border-radius: 9999px;
}

.segment-toggle-btn {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.segment-toggle-btn:hover:not(.active) {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.segment-toggle-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.segment-toggle-btn.active {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-sm);
}

.segment-toggle-btn.active[data-tab="admin"] {
  color: var(--color-warning);
  background: var(--color-warning-subtle);
  border-color: color-mix(in srgb, var(--color-warning) 24%, transparent);
}

.view-mode-btn.segment-toggle-btn,
#bible-nav-overlay .view-mode-btn.segment-toggle-btn {
  flex: 0 0 auto;
}

.capsule-segmented-control .segment-toggle-btn {
  flex: 0 0 auto;
  font-size: 0.875rem;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  min-height: 1.75rem;
}

.stats-inner-tab {
  padding: 0.5rem;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 0.875rem;
  white-space: nowrap;
  text-align: center;
}

/* Admin scope bar */
.stats-admin-scope-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 12px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.stats-admin-scope-bar label {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: #d97706;
  white-space: nowrap;
}


/* Header bar for plan details view */
.youversion-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
.circular-action-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.circular-action-btn:hover {
  background: var(--border-card);
  transform: scale(1.05);
}

.plan-search-panel {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  margin: 0 0 0.35rem;
  padding: 0.45rem 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--bg-input);
  box-shadow: var(--shadow-sm);
}

.plan-search-panel.hidden {
  display: none;
}

.plan-search-panel:focus-within {
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-focus-ring);
}

.plan-search-panel__icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

#plan-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
}

#plan-search-input::placeholder {
  color: var(--text-muted);
}

#plan-search-input::-webkit-search-cancel-button {
  display: none;
}

.plan-search-panel__clear {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}

.plan-search-panel__clear.hidden {
  display: none;
}

/* Plan thematic cover banner */
.plan-cover-card {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-md);
}
.plan-cover-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
}
.plan-cover-card .cover-title {
  font-size: 1.4rem;
  font-weight: var(--type-weight-strong);
  z-index: 2;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.plan-cover-card .cover-subtitle {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  opacity: 0.9;
  z-index: 2;
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Horizontal date carousel strip */
.date-carousel {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.6rem 0.1rem;
  margin-bottom: 1.2rem;
  scrollbar-width: none;
}
.date-carousel::-webkit-scrollbar {
  display: none;
}
.date-card {
  flex: 0 0 62px;
  height: 72px;
  background: var(--bg-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-card);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  position: relative;
}
.date-card.completed {
  background: color-mix(in srgb, var(--color-success) 5%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.date-card.completed.active {
  border: 2px solid var(--color-success-foreground);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  box-shadow: var(--shadow-none);
}
.date-card.completed::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--color-success-foreground);
}
.date-card.active {
  border: 2px solid var(--primary-color);
  background: var(--color-brand-subtle);
  box-shadow: var(--shadow-none);
}
/* 今天 */
.date-card.today {
  border: 2px solid #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  box-shadow: var(--shadow-none);
}
.date-card.today .day-num {
  color: #f59e0b;
}
.date-card.today .date-lbl {
  color: #f59e0b;
  font-weight: var(--type-weight-strong);
}
.date-card.today::before {
  content: "今";
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.4;
}
/* 過去日期 */
.date-card.past {
  opacity: 0.45;
}
.date-card.past .day-num {
  color: var(--text-muted);
}
/* 今天 + 已完成 優先顯示綠色 */
.date-card.today.completed {
  border: 2px solid var(--color-success-foreground);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  box-shadow: var(--shadow-none);
}
.date-card.today.completed .day-num,
.date-card.today.completed .date-lbl {
  color: var(--color-success-foreground);
}
.date-card .day-num {
  font-size: 1.2rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}
.date-card .date-lbl {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Custom YouVersion tasks styling */
.plan-task-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
}
.plan-task-item:last-child {
  border-bottom: none !important;
}
.plan-task-item:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}
.plan-task-item .task-read-toggle,
.plan-task-item .task-open-button {
  appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.plan-task-item .task-read-toggle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 48px;
  cursor: pointer;
  touch-action: manipulation;
}
.plan-task-item .task-open-button {
  min-width: 0;
  min-height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  text-align: left;
  cursor: pointer;
}
.plan-task-item .task-read-toggle:focus-visible,
.plan-task-item .task-open-button:focus-visible {
  outline: 2px solid var(--color-brand-ring);
  outline-offset: 2px;
}
.plan-task-item .task-read-toggle:active .task-checkbox {
  transform: scale(0.92);
}
.plan-task-item .task-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.28) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: transparent !important;
}
.plan-task-item .task-checkbox.checked {
  border: 1px solid var(--color-success-border) !important;
  background: var(--color-success-subtle) !important;
  color: var(--color-success-foreground) !important;
}
/* 第一遍完成，但當前處於第二或第三遍中 (還沒讀第二遍) */
.plan-task-item .task-checkbox.checked.round-1.dimmed {
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent) !important;
  background: color-mix(in srgb, var(--color-success) 6%, transparent) !important;
  color: color-mix(in srgb, var(--color-success) 45%, transparent) !important;
}
/* 第二遍完成：靛藍色雙勾 */
.plan-task-item .task-checkbox.checked.round-2 {
  border: 1px solid var(--color-brand-border) !important;
  background: var(--color-brand-subtle) !important;
  color: var(--color-brand) !important;
}
/* 第三遍完成：金色星星 */
.plan-task-item .task-checkbox.checked.round-3 {
  border: 1px solid color-mix(in srgb, #f59e0b 24%, transparent) !important;
  background: color-mix(in srgb, #f59e0b 12%, transparent) !important;
  color: #f59e0b !important;
}
.plan-task-item .task-checkbox svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 3.5;
  fill: none;
}
.plan-task-item .task-title {
  font-size: 1rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  flex-grow: 1;
}
.plan-task-item .task-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

/* 第n遍提示標籤 */
.task-round-label {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.task-round-label.round-2 {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
}
.task-round-label.round-3 {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Dropdown Menu for right options btn */
.options-menu-container {
  position: relative;
  display: inline-block;
}
.options-dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  background: var(--surface-popover);
  backdrop-filter: var(--popover-backdrop-blur);
  -webkit-backdrop-filter: var(--popover-backdrop-blur);
  border: 1px solid var(--border-popover);
  border-radius: var(--radius-md);
  width: 170px;
  box-shadow: var(--popover-shadow);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.options-dropdown-item {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.options-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.options-dropdown-item.danger-item {
  color: var(--color-danger);
}
.options-dropdown-item.danger-item:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

/* Centering plan details view on web/desktop viewports */
#plan-detail-subview {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Calendar Heatmap */
.calendar-heatmap {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 1rem;
  align-items: start;
}
.calendar-month {
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 0.75rem;
}
.calendar-month-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
}
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(22px, 1fr));
  grid-auto-rows: 22px;
  align-items: center;
  gap: 5px 6px;
}
.calendar-weekday {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}
.calendar-day {
  width: 100%;
  max-width: 30px;
  height: 22px;
  min-width: 0;
  justify-self: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.16);
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease, border-color 0.14s ease;
}
.calendar-day.blank {
  visibility: hidden;
  pointer-events: none;
}
.calendar-day.out-of-range {
  opacity: 0.32;
}
.calendar-day[data-level="1"] { background: rgba(20, 184, 166, 0.22); color: #0f766e; border-color: rgba(20, 184, 166, 0.22); }
.calendar-day[data-level="2"] { background: rgba(34, 197, 94, 0.32); color: #166534; border-color: rgba(34, 197, 94, 0.28); }
.calendar-day[data-level="3"] { background: rgba(245, 158, 11, 0.42); color: #92400e; border-color: rgba(245, 158, 11, 0.32); }
.calendar-day[data-level="4"] { background: color-mix(in srgb, var(--color-danger) 72%, transparent); color: #fff; border-color: color-mix(in srgb, var(--color-danger) 42%, transparent); }
.calendar-day:hover {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.05);
  z-index: 2;
}

/* Pastoral Bar Chart Race */
.bar-race-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.2rem;
}
.reading-team-ranking-header {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.reading-team-ranking-header::-webkit-details-marker {
  display: none;
}

.reading-team-ranking-header::marker {
  content: "";
}

.reading-team-ranking-card:not([open]) .reading-team-ranking-header {
  margin-bottom: 0;
}

.reading-team-ranking-copy,
.reading-team-ranking-header .card-title,
.reading-team-ranking-rule,
.reading-team-ranking-summary {
  display: block;
}

.reading-team-ranking-header .card-title {
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.reading-team-ranking-rule,
.reading-team-ranking-summary {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.reading-team-ranking-summary {
  color: var(--color-brand);
  font-weight: 500;
  margin-top: 0.3rem;
}

.reading-team-ranking-toggle {
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.875rem;
  gap: 0.3rem;
  min-height: 34px;
  padding: 0.35rem 0.6rem;
}

.reading-team-ranking-toggle .nlc-icon {
  transition: transform 0.18s ease;
}

.reading-team-ranking-card:not([open]) .reading-team-ranking-toggle .nlc-icon {
  transform: rotate(180deg);
}

.reading-team-ranking-toggle__collapsed {
  display: none;
}

.reading-team-ranking-card:not([open]) .reading-team-ranking-toggle__expanded {
  display: none;
}

.reading-team-ranking-card:not([open]) .reading-team-ranking-toggle__collapsed {
  display: inline;
}

.reading-team-ranking-list {
  max-height: 456px;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

.reading-team-ranking-list[hidden] {
  display: none;
}

.reading-team-ranking-list .bar-race-row--mine {
  background: color-mix(in srgb, var(--color-achievement) 18%, var(--bg-card));
  border: 2px solid color-mix(in srgb, var(--color-achievement) 72%, var(--border-card));
  border-left-width: 5px;
  border-radius: 12px;
  padding: 0.55rem;
}

.reading-team-ranking-list .bar-race-row--mine .bar-race-rank,
.reading-team-ranking-list .bar-race-row--mine .bar-race-bar {
  background: var(--color-achievement);
}

.reading-team-ranking-list .bar-race-row--mine .bar-race-rank {
  color: var(--color-black);
}

.reading-team-ranking-list .bar-race-row--mine .bar-race-name {
  color: var(--color-icon-achievement);
}

.bar-race-mine-badge {
  background: color-mix(in srgb, var(--color-achievement) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-achievement) 56%, transparent);
  border-radius: 999px;
  color: var(--color-icon-achievement);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

.bar-race-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-card);
}
.bar-race-title {
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}
.bar-race-subtitle {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}
.bar-race-replay {
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 0.38rem 0.7rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.bar-race-track {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bar-race-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.7rem;
  align-items: center;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.bar-race-row.is-running {
  transform: translateY(0);
  opacity: 1;
}
.bar-race-rank {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-weight: var(--type-weight-strong);
}
.bar-race-main {
  min-width: 0;
}
.bar-race-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.28rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}
.bar-race-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-race-members {
  color: var(--text-muted);
  white-space: nowrap;
}
.bar-race-bar-shell {
  position: relative;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
}
.bar-race-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-race-row.is-running .bar-race-bar {
  width: var(--target-width);
}
.bar-race-value {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}

.reading-team-ranking-list .bar-race-meta {
  align-items: center;
  margin-bottom: 0.4rem;
}

.reading-team-ranking-list .bar-race-percent {
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-strong);
}

.reading-team-ranking-list .bar-race-bar-shell {
  background: color-mix(in srgb, var(--text-primary) 14%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--text-primary) 25%, var(--border-card));
  border-radius: 999px;
  box-sizing: border-box;
  height: 10px;
}

body.dark-theme .reading-team-ranking-list .bar-race-bar-shell {
  background: color-mix(in srgb, var(--text-primary) 22%, var(--bg-card));
  border-color: color-mix(in srgb, var(--text-primary) 34%, var(--border-card));
}

.reading-team-ranking-list .bar-race-details {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.4rem;
  min-width: 0;
}

.reading-team-ranking-list .bar-race-members {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pastoral speed leaderboard — determinate progress cards */
.pastoral-race-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-gutter: stable;
}

.pastoral-race-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--border-card);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 0.85rem;
}

.pastoral-race-title {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
}

.pastoral-race-subtitle {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 0.2rem;
}

.pastoral-race-average-notice {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--border-card));
  border-radius: 0.75rem;
  color: var(--text-secondary);
  display: grid;
  font-size: 0.875rem;
  gap: 0.2rem;
  line-height: 1.55;
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem;
}

.pastoral-race-average-notice strong {
  color: var(--color-primary);
  font-weight: var(--type-weight-strong);
}

.pastoral-race-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.55rem;
}

.pastoral-race-count {
  background: var(--color-brand-muted);
  border: 1px solid var(--color-brand-border);
  border-radius: 999px;
  color: var(--color-brand);
  font-size: 0.875rem;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.pastoral-race-replay {
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.875rem;
  gap: 0.3rem;
  padding: 0.38rem 0.6rem;
}

.pastoral-race-replay:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card));
  border-color: color-mix(in srgb, var(--text-primary) 24%, var(--border-card));
}

.pastoral-race-replay:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.pastoral-race-track {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pastoral-race-empty {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 1rem 0.5rem;
  text-align: center;
}

.pastoral-race-unassigned {
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  color: var(--text-muted);
  display: flex;
  font-size: 0.875rem;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
}

.pastoral-race-unassigned .nlc-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.pastoral-race-unassigned strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-strong);
}
.pastoral-race-row {
  --pastoral-race-fill: var(--color-brand);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 34px minmax(0, 1fr);
  opacity: 0;
  padding: 0.8rem;
  transform: translateY(6px);
  transition: border-color 0.2s ease, opacity 0.4s ease, transform 0.4s ease;
}

.pastoral-race-row.is-running {
  opacity: 1;
  transform: translateY(0);
}

.pastoral-race-row:hover {
  border-color: color-mix(in srgb, var(--color-brand) 34%, var(--border-card));
}

.pastoral-race-row--mine {
  --pastoral-race-fill: var(--color-achievement);
  background: color-mix(in srgb, var(--color-achievement) 9%, var(--bg-card));
  border-color: color-mix(in srgb, var(--color-achievement) 42%, var(--border-card));
  border-left-width: 5px;
}

.pastoral-race-rank {
  align-items: center;
  align-self: stretch;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  color: var(--text-secondary);
  display: flex;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-strong);
  justify-content: center;
  min-height: 52px;
}

.pastoral-race-row--podium .pastoral-race-rank {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  color: var(--color-brand);
}

.pastoral-race-row--mine .pastoral-race-rank {
  background: var(--color-achievement);
  border-color: var(--color-achievement);
  color: var(--color-black);
}

.pastoral-race-main,
.pastoral-race-identity {
  min-width: 0;
}

.pastoral-race-heading,
.pastoral-race-progress-meta {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.pastoral-race-identity {
  align-items: baseline;
  display: flex;
  gap: 0.45rem;
}

.pastoral-race-name {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pastoral-race-mine-badge {
  background: color-mix(in srgb, var(--color-achievement) 24%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--color-achievement) 55%, var(--border-card));
  border-radius: 999px;
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  padding: 0.12rem 0.42rem;
}

.pastoral-race-members {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 0.875rem;
}

.pastoral-race-score {
  align-items: baseline;
  color: var(--text-primary);
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.2rem;
}

.pastoral-race-score strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-strong);
}

.pastoral-race-score span,
.pastoral-race-progress-meta {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.pastoral-race-progress-meta {
  margin: 0.45rem 0 0.28rem;
}

.pastoral-race-progress-meta strong {
  color: var(--pastoral-race-fill);
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-strong);
}

.pastoral-race-progress {
  background: color-mix(in srgb, var(--text-primary) 14%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--text-primary) 24%, var(--border-card));
  border-radius: 999px;
  box-sizing: border-box;
  height: 12px;
  overflow: hidden;
}

.pastoral-race-progress-fill {
  background: var(--pastoral-race-fill);
  border-radius: inherit;
  height: 100%;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  width: 0;
}

.pastoral-race-row.is-running .pastoral-race-progress-fill {
  width: var(--target-width);
}

body.dark-theme .pastoral-race-progress {
  background: color-mix(in srgb, var(--text-primary) 22%, var(--bg-card));
  border-color: color-mix(in srgb, var(--text-primary) 34%, var(--border-card));
}

@media (max-width: 600px) {
  .pastoral-race-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .pastoral-race-actions {
    justify-content: space-between;
    width: 100%;
  }

  .pastoral-race-row {
    gap: 0.65rem;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 0.7rem;
  }

  .pastoral-race-rank {
    min-height: 50px;
  }

  .pastoral-race-identity {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }
}
/* Stacked Percentage Bar */
.stacked-progress-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.stacked-progress-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}
.stacked-percent-bar {
  display: flex;
  width: 100%;
  min-height: 42px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
}
.stacked-segment {
  width: 0;
  min-width: 0;
  background: var(--segment-color);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.stacked-progress-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.stacked-legend-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}
.stacked-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.stacked-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .calendar-heatmap {
    grid-template-columns: minmax(206px, 1fr);
  }
  .stacked-progress-legend {
    grid-template-columns: 1fr;
  }
  .bar-race-toolbar,
  .stacked-progress-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* Refined progress distribution layout */
.distribution-redesign {
  gap: 1rem;
}
.distribution-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}
.distribution-metric-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.85rem 0.95rem;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
}
.distribution-metric-card.primary {
  background: var(--color-brand-muted);
  border-color: var(--color-brand-border);
}
.distribution-metric-card span {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}
.distribution-metric-card strong {
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}
.distribution-metric-card.primary strong {
  color: var(--primary-color);
}
.distribution-metric-card small {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}
.distribution-redesign .stacked-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  margin-bottom: -0.35rem;
}
.distribution-redesign .stacked-progress-summary span:nth-child(1) {
  color: var(--color-danger);
  text-align: left;
}
.distribution-redesign .stacked-progress-summary span:nth-child(2) {
  color: var(--text-muted);
  text-align: center;
}
.distribution-redesign .stacked-progress-summary span:nth-child(3) {
  color: var(--color-success-foreground);
  text-align: right;
}
.distribution-redesign .stacked-percent-bar {
  min-height: 50px;
  border-radius: 8px;
}
.distribution-redesign .stacked-segment.behind {
  background: var(--color-danger);
}
.distribution-redesign .stacked-segment.on {
  background: var(--text-muted);
}
.distribution-redesign .stacked-segment.ahead {
  background: var(--color-success);
}
.distribution-redesign .stacked-progress-legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.distribution-redesign .stacked-legend-item {
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
}
.distribution-redesign .stacked-legend-item.behind {
  border-color: color-mix(in srgb, var(--color-danger) 22%, transparent);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}
.distribution-redesign .stacked-legend-item.on {
  border-color: rgba(100, 116, 139, 0.22);
  background: rgba(100, 116, 139, 0.08);
}
.distribution-redesign .stacked-legend-item.ahead {
  border-color: color-mix(in srgb, var(--color-success) 22%, transparent);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
}

@media (max-width: 900px) {
  .distribution-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .distribution-metrics-grid,
  .distribution-redesign .stacked-progress-legend {
    grid-template-columns: 1fr;
  }
  .distribution-redesign .stacked-progress-summary {
    display: none;
  }
  .distribution-metric-card strong {
    font-size: 1.2rem;
  }
}
.distribution-metric-card.success strong {
  color: var(--color-success-foreground);
}
.distribution-metric-card.warning strong {
  color: #f59e0b;
}
.distribution-metrics-grid.merged-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 900px) {
  .distribution-metrics-grid.merged-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .distribution-metrics-grid.merged-stats {
    grid-template-columns: 1fr;
  }
}

/* Two-row stats layout for progress distribution */
.distribution-primary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.distribution-secondary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 560px;
}
.distribution-metric-card.compact {
  min-height: 96px;
}
.distribution-primary-stats .distribution-metric-card,
.distribution-secondary-stats .distribution-metric-card {
  justify-content: center;
}
@media (max-width: 900px) {
  .distribution-primary-stats {
    grid-template-columns: 1fr;
  }
  .distribution-secondary-stats {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
}
@media (max-width: 560px) {
  .distribution-secondary-stats {
    grid-template-columns: 1fr;
  }
}

/* Personal stats: aligned with profile tab personal stats layout */
#stats-personal-section > div:first-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch;
}
#stats-personal-section > div:first-child > div {
  min-width: 0;
  min-height: 84px !important;
}
@media (max-width: 900px) {
  #stats-personal-section > div:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 560px) {
  #stats-personal-section > div:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
  }
}

.reader-error-state {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
  border-radius: 10px;
  padding: 1rem;
  line-height: 1.7;
  font-weight: var(--type-weight-strong);
}

/* Clear plan detail return action */
.plan-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-subtle);
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.plan-back-button:hover {
  transform: translateY(-1px);
  background: var(--color-brand-subtle);
  border-color: var(--primary-color);
}
.plan-back-button svg {
  flex-shrink: 0;
}

/* Reader picker uses large tap targets instead of native dropdowns */
.reader-native-selects-hidden {
  display: none !important;
}
.reader-nav-drawer.open {
  max-height: min(72vh, 620px);
}
.reader-picker-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.reader-picker-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding: 0.2rem;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 12px;
}
.reader-picker-tab,
.reader-book-choice,
.reader-chapter-choice {
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.reader-picker-tab {
  min-height: 36px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}
.reader-picker-tab.active,
.reader-book-choice.active,
.reader-chapter-choice.active {
  background: var(--color-brand-subtle);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.reader-picker-tab:hover,
.reader-book-choice:hover,
.reader-chapter-choice:hover {
  transform: translateY(-1px);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.reader-picker-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.reader-picker-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}
.reader-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.45rem;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 0.15rem;
}
.reader-book-choice {
  min-height: 38px;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  text-align: center;
}
.reader-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 0.4rem;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 0.15rem;
}
.reader-chapter-choice {
  aspect-ratio: 1;
  min-height: 38px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}
@media (max-width: 560px) {
  .plan-back-button span {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .reader-nav-drawer.open {
    max-height: 76vh;
  }
  .reader-book-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    max-height: 240px;
  }
}
/* Compact plan detail layout: keep the daily checklist visible without vertical scrolling */
.plan-detail-compact {
  gap: 0.65rem !important;
}
.plan-detail-compact .youversion-detail-header {
  margin-bottom: 0.35rem;
  padding-bottom: 0.2rem;
}
.plan-detail-compact #plan-detail-title {
  font-size: clamp(0.95rem, 2.8vw, 1.12rem) !important;
}
.plan-detail-compact .plan-back-button {
  min-height: 34px;
  padding: 0.34rem 0.65rem;
  font-size: 0.875rem;
}
.plan-detail-compact .circular-action-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
}
.plan-detail-compact .plan-cover-card {
  aspect-ratio: 16 / 7.2;
  min-height: 138px;
  max-height: 230px;
  margin-bottom: 0.35rem;
  border-radius: 14px;
  padding: 1rem;
}
.plan-detail-compact .plan-cover-card .cover-title {
  font-size: clamp(1rem, 3vw, 1.25rem);
}
.plan-detail-compact .plan-cover-card .cover-subtitle {
  font-size: 0.875rem;
}
.plan-detail-tabs {
  margin-bottom: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  gap: 0.4rem !important;
}
.plan-detail-tabs .pill-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
}
.plan-detail-compact .date-carousel {
  gap: 0.45rem;
  padding: 0.25rem 0.1rem 0.35rem;
  margin-bottom: 0.45rem;
}
.plan-detail-compact .date-card {
  flex-basis: 58px;
  height: 60px;
  border-radius: 10px;
}
.plan-detail-compact .date-card .day-num {
  font-size: 1.02rem;
}
.plan-detail-compact .date-card .date-lbl {
  font-size: 0.875rem;
}
.plan-day-heading {
  margin-bottom: 0.8rem !important;
}
.plan-day-heading #plan-day-subtitle {
  font-size: 0.95rem !important;
  font-weight: var(--type-weight-strong) !important;
  color: var(--text-primary) !important;
}
.plan-day-heading #plan-day-status-pill {
  display: none !important;
}
.plan-tasks-list {
  gap: 0.38rem !important;
  max-height: min(34vh, 300px) !important;
  padding-right: 0.1rem !important;
}

#reader-view .reader-audio-timeline {
  position: sticky;
  top: var(--reader-toolbar-height, 56px);
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--border-color));
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

#reader-view .reader-audio-timeline.hidden {
  display: none;
}

.reader-audio-timeline__label {
  min-width: 6.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.reader-audio-timeline__track {
  position: relative;
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
}

.reader-audio-timeline__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--color-brand);
  transition: width 220ms ease;
}

/* Daily church quiz */
.daily-quiz-section {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--bg-card);
}

.reader-load-retry-state {
  width: min(100%, 420px);
  margin: 1.25rem auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.reader-load-retry-state__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-radius: 50%;
}

.reader-load-retry-state strong {
  font-size: 1rem;
  font-weight: var(--type-weight-strong);
}

.reader-load-retry-state p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.reader-load-retry-state__button {
  min-height: 44px;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.daily-quiz-entry-button {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--border-card));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-brand) 7%, var(--bg-card));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.daily-quiz-entry-button:hover,
.daily-quiz-entry-button:focus-visible {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, var(--bg-card));
}

.daily-quiz-entry-button:active {
  transform: scale(0.99);
}

.daily-quiz-entry-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-brand) 16%, var(--bg-card));
  color: var(--color-brand);
}

.daily-quiz-entry-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.daily-quiz-entry-copy strong {
  font-size: 17px;
  font-weight: 600;
}

.daily-quiz-entry-copy small {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.daily-quiz-entry-action {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .daily-quiz-entry-button {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .daily-quiz-entry-action {
    grid-column: 2;
    justify-self: start;
  }
}

.daily-quiz-heading,
.admin-daily-quiz-heading,
.admin-daily-quiz-toolbar,
.admin-daily-quiz-version-title,
.admin-daily-quiz-version-actions,
.admin-daily-quiz-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.daily-quiz-heading h3,
.admin-daily-quiz-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
}

.daily-quiz-eyebrow,
.daily-quiz-publisher-copy,
.admin-daily-quiz-note {
  margin: 0 0 0.3rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.daily-quiz-status,
.daily-quiz-score,
.admin-daily-quiz-request-count {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.875rem;
  white-space: nowrap;
}

.daily-quiz-publisher-notice {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.daily-quiz-form,
.daily-quiz-review-list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.daily-quiz-question,
.daily-quiz-review-item,
.admin-daily-quiz-question {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-surface);
}

.daily-quiz-question legend,
.admin-daily-quiz-question legend {
  padding: 0 0.35rem;
  color: var(--text-primary);
  font-weight: 500;
}

.daily-quiz-verse-ref,
.daily-quiz-explanation {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.daily-quiz-options {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.daily-quiz-options label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  cursor: pointer;
}

.daily-quiz-options input {
  margin-top: 0.2rem;
}

.daily-quiz-submit,
.daily-quiz-publish {
  width: 100%;
  justify-content: center;
}

.daily-quiz-answer-correct { color: var(--success-color, #15803d); }
.daily-quiz-answer-wrong { color: var(--danger-color, #b91c1c); }

.admin-daily-quiz-toolbar {
  margin-bottom: 1rem;
}

.admin-daily-quiz-toolbar label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.admin-daily-quiz-block {
  padding: 1rem;
  margin-bottom: 1rem;
}

.admin-daily-quiz-versions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.admin-daily-quiz-version {
  padding: 0.9rem;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-surface);
}

.admin-daily-quiz-editor-wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-app, #0f0f0f);
}

body.admin-quiz-editor-open {
  overflow: hidden;
}

.admin-daily-quiz-editor-shell {
  width: 100%;
  min-height: 100dvh;
  background: var(--bg-app, #0f0f0f);
}

.admin-daily-quiz-editor-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-card);
}

.admin-daily-quiz-editor-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
}

.admin-daily-quiz-editor-scroll {
  padding: 1rem max(1rem, calc((100vw - 72rem) / 2));
  padding-bottom: max(6rem, calc(2rem + env(safe-area-inset-bottom)));
}

.admin-daily-quiz-editor,
.admin-daily-quiz-options,
.admin-daily-quiz-groups {
  display: grid;
  gap: 0.75rem;
}

.admin-daily-quiz-editor {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}

.admin-daily-quiz-editor .admin-daily-quiz-question {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-daily-quiz-carousel-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.admin-daily-quiz-carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-daily-quiz-carousel-dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-card);
  cursor: pointer;
}

.admin-daily-quiz-carousel-dots button.active {
  width: 1.4rem;
  border-radius: 999px;
  background: var(--color-brand);
}

.admin-daily-quiz-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.admin-daily-quiz-carousel-track::-webkit-scrollbar {
  display: none;
}

.admin-daily-quiz-question-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.admin-daily-quiz-carousel-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 0.75rem;
  background: var(--bg-app, #0f0f0f);
  box-shadow: 0 -0.75rem 1.5rem var(--bg-app, #0f0f0f);
}

.admin-daily-quiz-carousel-actions > :only-child,
.admin-daily-quiz-carousel-actions [data-quiz-slide-save] {
  grid-column: 1 / -1;
}

.admin-daily-quiz-carousel-actions .primary-btn,
.admin-daily-quiz-carousel-actions .secondary-btn {
  min-height: 3rem;
  justify-content: center;
}

.admin-daily-quiz-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.7rem 0;
}

.admin-daily-quiz-question label {
  display: grid;
  gap: 0.3rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.admin-daily-quiz-answer-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.admin-daily-quiz-group {
  border-top: 1px solid var(--border-card);
  padding: 0.75rem 0;
}

.admin-daily-quiz-group summary {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr);
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.admin-daily-quiz-scope-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.admin-daily-quiz-scope-row select {
  min-width: 140px;
}

.admin-quiz-publish-step {
  margin-top: 1rem;
}

.admin-quiz-publish-step-label {
  margin: 0 0 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.admin-quiz-version-choice {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.admin-quiz-version-btn.active {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
}

.admin-quiz-custom-editor-slot {
  margin-top: 0.75rem;
}

.admin-quiz-custom-question legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#admin-quiz-publish-btn,
.daily-quiz-publish {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}

.admin-daily-quiz-group summary small {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
}

.admin-daily-quiz-group-status,
.admin-daily-quiz-empty {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.admin-daily-quiz-results {
  margin-top: 0.8rem;
  padding: 0.8rem;
  background: var(--bg-input);
  border-radius: 10px;
}

.admin-daily-quiz-member-list {
  margin-top: 0.7rem;
}

.admin-daily-quiz-member-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.admin-daily-quiz-error {
  color: var(--danger-color, #b91c1c);
  font-size: 0.875rem;
  word-break: break-word;
}

.admin-daily-quiz-load-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0.9rem;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.admin-daily-quiz-load-error__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
}

.admin-daily-quiz-load-error__icon .nlc-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.admin-daily-quiz-load-error__content h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.admin-daily-quiz-load-error__content p {
  margin: 0.3rem 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.admin-daily-quiz-version--load-failed {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  min-height: 9.5rem;
}

.admin-daily-quiz-version--load-failed .admin-daily-quiz-version-actions {
  align-self: end;
  margin-top: auto;
}

@media (max-width: 760px) {
  .admin-daily-quiz-versions,
  .admin-daily-quiz-options,
  .admin-daily-quiz-answer-row {
    grid-template-columns: 1fr;
  }
  .admin-daily-quiz-group summary {
    grid-template-columns: 1fr;
  }
  .admin-daily-quiz-editor-scroll {
    padding-inline: 0.75rem;
  }
  .admin-daily-quiz-version--load-failed .secondary-btn {
    width: 100%;
    justify-content: center;
  }
}
.plan-detail-compact .plan-task-item {
  min-height: 50px;
  padding: 0.62rem 0.8rem;
  margin-bottom: 0 !important;
  border-radius: 12px;
  gap: 0.72rem;
}
.plan-detail-compact .plan-task-item .task-checkbox {
  width: 24px;
  height: 24px;
}
.plan-detail-compact .plan-task-item .task-title {
  font-size: 0.98rem;
  line-height: 1.25;
}
.plan-detail-compact .plan-task-item .task-arrow {
  font-size: 1rem;
}
@media (max-width: 640px) {
  #plan-detail-subview.plan-detail-compact {
    max-width: none;
    min-height: calc(100dvh - 122px);
    gap: 0.5rem !important;
  }
  .plan-detail-compact .youversion-detail-header {
    margin-bottom: 0.15rem;
  }
  .plan-detail-compact .plan-back-button span {
    display: none;
  }
  .plan-detail-compact .plan-cover-card {
    aspect-ratio: 16 / 8.2;
    min-height: 118px;
    max-height: 170px;
    padding: 0.85rem;
  }
  .plan-detail-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .plan-detail-tabs::-webkit-scrollbar {
    display: none;
  }
  .plan-detail-tabs .pill-btn {
    flex: 0 0 auto;
    padding: 0.32rem 0.58rem;
    font-size: 0.875rem;
  }
  .plan-detail-compact .date-card {
    flex-basis: 52px;
    height: 56px;
  }
  .plan-tasks-list {
    max-height: calc(100dvh - 500px) !important;
    min-height: 180px;
  }
  .plan-detail-compact .plan-task-item {
    min-height: 48px;
    padding: 0.55rem 0.72rem;
  }
}
@media (max-height: 760px) and (max-width: 640px) {
  .plan-detail-compact .plan-cover-card {
    aspect-ratio: 16 / 6.7;
    min-height: 96px;
    max-height: 128px;
  }

  .plan-detail-compact .date-card {
    flex-basis: 48px;
    height: 50px;
  }
  .plan-detail-compact .date-card .day-num {
    font-size: 0.95rem;
  }
  .plan-detail-compact .date-card .date-lbl {
    font-size: 0.875rem;
  }
  .plan-tasks-list {
    max-height: calc(100dvh - 410px) !important;
    min-height: 170px;
  }
}
/* Group sub-navigation visibility is owned exclusively by PlanPageController. */
.plan-detail-tabs {
  display: flex;
}
#plan-options-dropdown {
  min-width: 220px;
  padding: 0.55rem;
  border-radius: var(--popover-radius);
  background: var(--surface-popover);
  border: 1px solid var(--border-popover);
  box-shadow: var(--popover-shadow);
  backdrop-filter: var(--popover-backdrop-blur);
  -webkit-backdrop-filter: var(--popover-backdrop-blur);
}
#plan-options-dropdown .options-dropdown-item {
  min-height: 44px;
  padding: 0.62rem 0.75rem;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.94rem;
  font-weight: var(--type-weight-strong);
  gap: 0.7rem;
}
#plan-options-dropdown .options-dropdown-item:hover {
  background: color-mix(in srgb, var(--text-primary) 7%, var(--surface-popover));
}
#plan-options-dropdown .options-dropdown-item .menu-icon {
  width: 1.35rem;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  background: transparent;
  color: var(--text-secondary);
}
#plan-options-dropdown .options-dropdown-item.danger-item {
  color: #ff6b6b;
}
#plan-options-dropdown .options-dropdown-item.danger-item:hover {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
}

.joined-plan-schedule-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.joined-plan-schedule-summary .nlc-icon {
  color: var(--color-icon-muted);
  flex-shrink: 0;
}


/* ==========================================================================
   Reader Top Navbar (Screenshot Mockup Design)
   ========================================================================== */
.reader-top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
  position: sticky;
  top: 66px;
  z-index: 40;
  backdrop-filter: blur(12px);
  gap: 0.6rem;
}

.reader-nav-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reader-nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reader-pill-btn {
  background: rgba(128, 128, 128, 0.15);
  border: 1px solid transparent;
  color: var(--text-primary);
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.reader-pill-btn:hover {
  background: rgba(128, 128, 128, 0.25);
}

.reader-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.reader-icon-btn:hover {
  background: rgba(128, 128, 128, 0.15);
  color: var(--text-primary);
}
.reader-icon-btn.active {
  background: var(--primary-color);
  color: #ffffff !important;
}

.reader-settings-container {
  position: relative;
}

.reader-settings-dropdown {
  position: absolute;
  top: 42px;
  right: 0;
  width: 220px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 0.85rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.reader-settings-dropdown.hidden {
  display: none !important;
}

.setting-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.setting-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.setting-options-row {
  display: flex;
  gap: 0.35rem;
}

.setting-btn {
  flex: 1;
  padding: 0.35rem 0.25rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.setting-btn:hover {
  background: rgba(128, 128, 128, 0.15);
}
.setting-btn.active {
  background: var(--primary-color);
  color: #ffffff !important;
  border-color: var(--primary-color);
}

.theme-btn.bg-white {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid var(--border-card);
}
.theme-btn.bg-warm {
  background: #f4ecd8 !important;
  color: #5c4731 !important;
  border: 1px solid #d3c4ac;
}
.theme-btn.bg-dark {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #475569;
}

/* ==========================================================================
   Badge Detail Page (theme via CSS, not JS hex)
   ========================================================================== */
#badge-detail-page {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  background: var(--bg-app);
  color: var(--text-primary);
  z-index: var(--z-modal);
}

#badge-page-back-btn {
  min-width: 4.5rem;
  color: var(--text-primary) !important;
  font-weight: 500;
}

.badge-detail-back-label {
  font-size: 0.95rem;
  line-height: 1;
}

#badge-detail-hero {
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem 1rem 1.5rem 1rem;
  background: #171717;
  border: 1px solid #262626;
  color: #FAFAFA;
}

#detail-shield {
  position: relative;
  margin: 0 auto;
}

#detail-shield.badge-shield--unlocked,
#detail-shield.badge-shield--locked {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.dark-theme #detail-shield.badge-shield--unlocked,
body.dark-theme #detail-shield.badge-shield--locked {
  background: transparent;
  border: none;
}

#detail-shield .nlc-icon,
#detail-icon.nlc-icon {
  color: inherit;
  background: transparent;
}

.badge-milestone-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-card);
  width: 100%;
  box-sizing: border-box;
}

.badge-milestone-circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  flex-shrink: 0;
}

.badge-milestone-circle--unlocked {
  background: color-mix(in srgb, var(--color-icon-achievement) 20%, transparent);
  color: var(--color-icon-achievement);
}

.badge-milestone-circle--locked {
  background: var(--color-progress-track);
  color: var(--color-icon-muted);
}

.badge-milestone-done {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}

.badge-milestone-remaining {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
}

.badge-milestone-track {
  width: 100px;
  height: 5px;
  background: var(--color-progress-track);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.35rem;
}

.badge-milestone-fill {
  height: 100%;
  background: var(--color-icon-achievement);
  border-radius: 9999px;
}

.btn-danger-soft {
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.plan-progress-wrapper--spaced {
  margin-top: 1rem;
}

/* ==========================================================================
   Warm Theme (Sepia) Variables
   ========================================================================== */
body.warm-theme {
  --bg-app: #F4ECD8;
  --bg-header: rgba(244, 236, 216, 0.95);
  --bg-card: #FDF6E3;
  --bg-input: #FDF6E3;
  --border-card: rgba(139, 115, 85, 0.25);
  --border-default: rgba(139, 115, 85, 0.25);
  --shadow-sm: 0 1px 2px 0 rgb(92 71 49 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(92 71 49 / 0.1), 0 2px 4px -2px rgb(92 71 49 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(92 71 49 / 0.12), 0 4px 6px -4px rgb(92 71 49 / 0.08);
  --shadow-card: var(--shadow-sm);
  --shadow-hover: var(--shadow-sm);
  --text-primary: #5C4731;
  --text-secondary: #70583F;
  /* Was #9C8A77 — measured 2.82:1 on --bg-app, failed even the 3:1 floor.
     #6B5B48 measures 5.55:1. */
  --text-muted: #6B5B48;

  --color-brand: #04A9D2;
  --color-brand-hover: #0396BA;
  --color-brand-active: #0284A3;
  --color-brand-subtle: color-mix(in srgb, #04A9D2 15%, transparent);
  --color-brand-muted: color-mix(in srgb, #04A9D2 10%, transparent);
  --primary-color: var(--color-brand);

  --color-success-foreground: #2A7A48;
  --color-success-border: color-mix(in srgb, var(--color-success-foreground) 28%, transparent);

  --color-danger-foreground: #C92D49;
  --color-danger-muted: color-mix(in srgb, var(--color-danger) 58%, var(--text-secondary));

  --color-progress-track: color-mix(in srgb, var(--text-muted) 18%, transparent);
  --color-icon-default: #5C4731;
  --color-icon-muted: #9C8A77;
  --color-icon-brand: #04A9D2;
  --color-icon-achievement: #D97706;

  --skeleton-base: color-mix(in srgb, var(--text-primary) 8%, var(--bg-card));
  --skeleton-highlight: color-mix(in srgb, var(--text-primary) 3%, var(--bg-card));
  --skeleton-on-dark-base: rgba(255, 255, 255, 0.14);
  --skeleton-on-dark-highlight: rgba(255, 255, 255, 0.3);
}
body.warm-theme .glass-card,
body.warm-theme .reader-top-navbar,
body.warm-theme .avatar-dropdown {
  background: rgba(253, 246, 227, 0.85) !important;
  border: 1px solid rgba(211, 196, 172, 0.5) !important;
}

/* ==========================================================================
   Keyword Search Panel inside Reader
   ========================================================================== */
.reader-search-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  animation: slideDown 0.25s ease-out;
}
.reader-search-panel.hidden {
  display: none !important;
}
.reader-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 0.2rem;
  outline: none;
  border-bottom: 1px solid var(--border-card);
}
.bible-verse mark {
  background: #fef08a; /* Soft Yellow Highlight */
  color: #854d0e;
  border-radius: 2px;
  padding: 0 1px;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Native-like PWA App Shell */
:root {
  --app-top-bar-height: 64px;
  --app-bottom-nav-height: 72px;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body,
body * {
  user-select: none;
  -webkit-user-select: none;
}

input,
textarea,
select,
.bible-text-container,
.bible-text-container * {
  user-select: text;
  -webkit-user-select: text;
}

.app-layout {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

.main-header {
  height: calc(var(--app-top-bar-height) + var(--app-safe-top));
  padding-top: var(--app-safe-top);
  z-index: var(--z-header); /* token: --z-header = 300 */
}

.header-container {
  max-width: 100%;
  padding: 0 0.85rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "leading title actions";
  gap: 0.4rem;
  align-items: center;
}

.header-leading {
  grid-area: leading;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  min-width: 0;
}

/* Back navigation replaces the home logo in the leading slot */
.header-leading:has(.app-back-btn:not(.is-home)) .brand-mark {
  display: none;
}

.brand-mark {
  justify-content: center;
  pointer-events: auto;
}

.brand-icon,
.main-footer {
  display: none !important;
}

.header-actions {
  grid-area: actions;
  display: flex !important;
  justify-self: end;
  align-self: center;
  gap: 0.5rem;
}

.header-actions #connection-status,
.header-actions .user-avatar-container {
  display: none !important;
}

.app-back-btn.is-home {
  display: none !important;
}

#top-bar-title-area {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  justify-self: center;
}

.brand-text {
  grid-area: title;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  letter-spacing: normal;
  text-align: center;
  justify-self: center;
}

.app-back-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  gap: 0;
  border-radius: 999px;
  box-shadow: none;
  flex-shrink: 0;
}

.app-back-btn:not(.is-home) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-back-btn .nlc-icon {
  display: inline-flex;
  color: inherit;
}

.app-back-btn #global-back-label {
  display: none;
}

.app-back-btn.is-home .nlc-icon {
  display: none;
}

.main-content {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--app-top-bar-height) + var(--app-safe-top));
  bottom: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom));
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1rem clamp(0.85rem, 3vw, 1.4rem) 1.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.mobile-nav-bar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom));
  padding: 0.35rem 0.35rem calc(0.35rem + var(--app-safe-bottom));
  background-color: var(--bg-header);
  border-top: 1px solid var(--border-card);
  box-shadow: var(--shadow-up-md);
  backdrop-filter: var(--backdrop-blur);
  z-index: var(--z-header); /* token: --z-header = 300, same tier as top bar */
  justify-content: space-around;
  align-items: stretch;
  gap: 0.2rem;
}

.care-reminder-badge--mobile {
  top: 4px;
  left: calc(50% + 7px);
}

.mobile-nav-btn {
  min-width: 44px;
  min-height: 44px;
  flex: 1 1 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.15s ease, background 0.15s ease;
}

.mobile-nav-btn .nlc-icon {
  color: var(--color-icon-muted);
}

.mobile-nav-btn.active {
  color: var(--primary-color);
  background: var(--color-brand-subtle);
}

.mobile-nav-btn.active .nlc-icon {
  color: var(--color-icon-brand);
}

/* Icon-only controls: shadcn-style square touch targets for close/search/back actions. */
.icon-button {
  appearance: none;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.08s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.icon-button:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
}

.icon-button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}

.icon-button:active {
  transform: scale(0.96);
}

.icon-button--subtle,
.dialog-close-button {
  background: transparent;
  border-color: transparent;
}

.icon-button--ghost {
  background: transparent;
}

.icon-button--danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 22%, transparent);
}

button,
[role="button"],
.tab-btn,
.icon-btn,
.primary-btn,
.secondary-btn,
.pill-btn,
.danger-btn,
.avatar-btn,
.circular-action-btn,
.reader-pill-badge,
.reader-pill-icon-btn,
.floating-nav-btn,
.options-dropdown-item,
.plan-task-item,
.date-card {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:active,
[role="button"]:active,
.tab-btn:active,
.icon-btn:active,
.primary-btn:active,
.secondary-btn:active,
.pill-btn:active,
.danger-btn:active,
.avatar-btn:active,
.circular-action-btn:active,
.reader-pill-badge:active,
.reader-pill-icon-btn:active,
.floating-nav-btn:active,
.options-dropdown-item:active,
.plan-task-item:active,
.date-card:active,
.mobile-nav-btn:active {
  transform: scale(0.96);
  transition: transform 0.08s ease !important;
}

button:focus,
button:focus-visible,
.mobile-nav-btn:focus,
.mobile-nav-btn:focus-visible,
.app-back-btn:focus,
.app-back-btn:focus-visible {
  outline: none;
}

@media (min-width: 769px) {
  .mobile-nav-bar {
    display: none;
  }

  .header-container {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "leading title nav actions";
  }

  .nav-tabs {
    grid-area: nav;
    display: flex !important;
    gap: 0.35rem;
    justify-self: end;
    align-self: center;
    flex-shrink: 0;
  }

  .header-container .tab-btn:not(#admin-edit-region-btn):not(#admin-edit-zone-btn):not(#admin-edit-group-btn) {
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
  }

  .main-content {
    bottom: 0;
    padding-bottom: 1.4rem;
    padding-left: max(1.4rem, calc((100vw - 1180px) / 2));
    padding-right: max(1.4rem, calc((100vw - 1180px) / 2));
  }

  body.reader-page .main-content,
  .app-layout.reader-mode .main-content,
  .app-layout:has(#reader-view.active) .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 420px) {
  .mobile-nav-btn {
    font-size: 0.875rem;
  }

  .mobile-nav-btn .icon {
    width: 21px;
    height: 21px;
  }
}

#like-btn.is-liked .nlc-icon {
  color: var(--color-danger);
}



/* ==========================================================================
   Bible Navigation Shell, Global Search & Typography Bottom Sheet
   ========================================================================== */

.full-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-app);
  z-index: 500;
  display: flex;
  flex-direction: column;
  animation: fadeInOverlay 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.full-page-overlay.hidden {
  display: none !important;
}

@keyframes fadeInOverlay {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.overlay-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.85rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  flex-shrink: 0;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

.overlay-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  padding: 0.5rem 0.2rem;
  min-height: 44px;
}
.overlay-back-btn:active {
  transform: scale(0.95) !important;
  opacity: 0.85;
}

.overlay-title {
  font-size: 1.08rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  text-align: center;
  flex: 1;
}

.overlay-version {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  background: rgba(128, 128, 128, 0.08);
  padding: 0.25rem 0.55rem;
  border-radius: 20px;
  cursor: pointer;
}

/* Segmented Tab Control */
.segmented-control {
  display: flex;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  padding: 0;
  height: 48px;
  flex-shrink: 0;
}

.segmented-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  min-height: 44px;
}
.segmented-tab:active {
  transform: scale(0.95) !important;
  background: rgba(128, 128, 128, 0.04);
}
.segmented-tab.active:not(.segment-toggle-btn) {
  color: var(--color-danger);
  border-bottom-color: var(--color-danger);
}

/* Mode Selector Bar */
.mode-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-card);
  flex-shrink: 0;
}

.toggle-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 750;
  color: var(--text-secondary);
}

.view-mode-container {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 750;
  color: var(--text-secondary);
}

.view-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.view-mode-btn:active {
  transform: scale(0.95) !important;
}
.view-mode-btn.active {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-sm);
}

/* Scroll Container */
.overlay-scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: var(--bg-app);
  -webkit-overflow-scrolling: touch;
}

/* Switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.28);
  transition: .15s ease;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .15s ease;
}
input:checked + .slider {
  background-color: var(--color-danger);
}
input:checked + .slider:before {
  transform: translateX(20px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

/* Section Header in catalog */
.bible-nav-section-title {
  padding: 0.55rem 0.85rem;
  background: rgba(128, 128, 128, 0.04);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* 5 Column Grid View */
.bible-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border-card);
  border-left: 1px solid var(--border-card);
}

.grid-item-book {
  aspect-ratio: 1;
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.grid-item-book:active {
  background: rgba(128, 128, 128, 0.08);
  transform: scale(0.95) !important;
}
.grid-item-book.active {
  background: color-mix(in srgb, var(--color-danger) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
}
.grid-item-book.active .abbrev-title {
  color: var(--color-danger);
}
.grid-item-book .abbrev-title {
  font-size: 1.15rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  margin-bottom: 0.05rem;
}
.grid-item-book .full-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* List View for Books */
.bible-nav-list {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.list-item-book {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-card);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.list-item-book:active {
  background: rgba(128, 128, 128, 0.06);
  transform: scale(0.98) !important;
}
.list-item-book.active {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 3%, transparent);
}
.list-item-book .abbrev-badge {
  font-size: 0.875rem;
  background: rgba(128, 128, 128, 0.08);
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  color: var(--text-muted);
  font-weight: var(--type-weight-strong);
}

/* Chapter and Verse grids */
.chapter-nav-grid, .verse-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border-card);
  border-left: 1px solid var(--border-card);
}

.grid-item-number {
  aspect-ratio: 1;
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.grid-item-number:active {
  background: rgba(128, 128, 128, 0.08);
  transform: scale(0.95) !important;
}
.grid-item-number.active {
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
}

/* Search Header styling */
.search-header {
  gap: 0.75rem;
}
.search-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.search-icon-inside {
  position: absolute;
  left: 10px;
  color: var(--color-icon-muted);
  pointer-events: none;
}
.search-icon-inside.nlc-icon,
.search-icon-inside .nlc-icon {
  color: var(--color-icon-muted);
}
.search-input-field {
  width: 100%;
  height: 36px;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding-left: 32px;
  padding-right: 32px;
  font-size: 0.9rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  outline: none;
}
.search-input-field:focus {
  border-color: var(--color-brand);
  background: var(--bg-input);
}
.search-clear-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-cancel-btn {
  background: transparent;
  border: none;
  color: var(--color-danger);
  font-size: 0.92rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  white-space: nowrap;
  padding: 0.2rem 0;
  min-height: 44px;
}
.search-cancel-btn:active {
  transform: scale(0.95) !important;
}

.search-results-info {
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-card);
}

/* Search results items */
.search-result-item {
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  cursor: pointer;
}
.search-result-item:active {
  background: rgba(128, 128, 128, 0.05);
}
.search-result-ref {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--color-danger);
  margin-bottom: 0.2rem;
}
.search-result-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-primary);
  user-select: text;
  -webkit-user-select: text;
}
.search-result-text mark {
  background: #fef08a;
  color: #854d0e;
  border-radius: 2px;
  padding: 0 1px;
}

/* ==========================================================================
   Bottom Sheet (Typography / Color Customization drawer)
   ========================================================================== */
.bottom-sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 600;
  display: flex;
  align-items: flex-end;
  animation: fadeInBackdrop 0.18s ease-out;
}
.bottom-sheet-backdrop.hidden {
  display: none !important;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bottom-sheet-container {
  width: min(34rem, 92vw);
  margin-inline: auto;
  background: var(--bg-card);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: var(--shadow-up-lg);
  padding: 0 0.85rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.bottom-sheet-drag-handle {
  width: 36px;
  height: 5px;
  background-color: var(--text-muted);
  opacity: 0.3;
  border-radius: 3px;
  margin: 8px auto 10px;
  flex-shrink: 0;
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  flex-shrink: 0;
  padding-top: 0;
}
.bottom-sheet-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}
.bottom-sheet-close-x {
  color: var(--text-muted);
  inline-size: 48px;
  block-size: 48px;
  min-inline-size: 48px;
  min-block-size: 48px;
}

/* Reader settings is a centered dialog, not a draggable bottom sheet. */
.reader-settings-dialog-backdrop {
  align-items: center;
  justify-content: center;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
}

.reader-settings-dialog {
  width: min(34rem, 90vw);
  max-height: min(82dvh, 44rem);
  margin: 0;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  animation: readerSettingsDialogIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reader-settings-footer {
  flex: 0 0 auto;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-card);
}

.reader-settings-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-brand);
  border-radius: 0.875rem;
  background: var(--color-brand);
  color: var(--color-brand-foreground, #fff);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.reader-settings-apply-btn:hover,
.reader-settings-apply-btn:focus-visible {
  filter: brightness(1.06);
}

.reader-settings-apply-btn:active {
  transform: scale(0.98);
}

@keyframes readerSettingsDialogIn {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bottom-sheet-close-x .nlc-icon,
.bottom-sheet-close-x svg {
  width: 1.75rem;
  height: 1.75rem;
}

.bottom-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding-right: 2px;
}

.sheet-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sheet-section-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  text-transform: uppercase;
}

.sheet-options-row {
  display: flex;
  gap: 0.45rem;
}

.sheet-option-btn {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--border-card);
  background: rgba(128, 128, 128, 0.05);
  color: var(--text-primary);
  border-radius: 10px;
  font-weight: var(--type-weight-strong);
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.sheet-option-btn:active {
  transform: scale(0.95) !important;
}
.sheet-option-btn.active {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: var(--color-brand);
}
.sheet-option-btn .size-num {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.05rem;
  font-weight: var(--type-weight-strong);
}
.sheet-option-btn.active .size-num {
  color: var(--color-brand);
}

.sheet-divider {
  height: 1px;
  background-color: var(--border-card);
  margin: 0.15rem 0;
}

/* Native Bible Reader Module */
:root {
  --reader-font-size: 20px;
  --reader-accent: #ef5b55;
  --reader-layer-bg: #fbfbfc;
  --reader-layer-card: #ffffff;
  --reader-layer-line: rgba(31, 41, 55, 0.1);
}

body.reader-modal-open .main-content {
  overflow: hidden !important;
}

.native-reader-toolbar {
  min-height: 56px;
  border-radius: 0;
  border-width: 0 0 1px;
  margin: -0.2rem -0.2rem 0.75rem;
  padding: 0.35rem 0.55rem;
  top: 0;
  background: var(--bg-app);
}

.native-toolbar-btn,
.reader-icon-btn.native-toolbar-btn {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  font-size: 1.25rem;
}

.reader-ref-chip {
  min-height: 44px;
  max-width: min(44vw, 260px);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0.35rem;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.reader-ref-chip:active {
  transform: scale(0.95);
  opacity: 0.82;
}

#reader-nav-ref-label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.15;
}

.reader-version-inline {
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}

.reader-version-btn {
  min-height: 44px;
  padding: 0 0.7rem;
  font-size: 0.875rem;
  background: rgba(128, 128, 128, 0.1);
}

.reader-nav-spacer {
  flex: 1 1 auto;
}

.reader-body-full,
.reader-card {
  min-height: 0;
}

.bible-text-container {
  font-size: var(--reader-font-size, 20px) !important;
  line-height: 1.82;
  transition: font-size 0.16s ease;
}

#reader-view .bible-text-container,
#reader-view .verse-text,
#reader-view .verse-num {
  font-size: var(--reader-font-size, 20px) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#reader-view .verse-text,
#reader-view .verse-num {
  transition: font-size 0.16s ease;
}

.bible-verse {
  scroll-margin-top: 76px;
}

.full-page-overlay {
  z-index: 650;
  background: var(--reader-layer-bg);
  color: #1f2937;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.bible-native-overlay-header,
.search-header {
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--reader-layer-card);
  border-bottom-color: var(--reader-layer-line);
}

.overlay-back-btn,
.overlay-version,
.segmented-tab,
.view-mode-btn,
.grid-item-book,
.grid-item-number,
.list-item-book,
.search-cancel-btn,
.search-clear-btn,
.sheet-option-btn,
.bottom-sheet-close-x {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.overlay-back-btn,
.overlay-version,
.view-mode-btn,
.search-cancel-btn,
.search-clear-btn {
  min-width: 44px;
  min-height: 44px;
}

.overlay-back-btn {
  color: #1f2937;
  font-size: 1rem;
}

.overlay-title {
  color: #1f2937;
  font-size: 1.12rem;
  font-weight: var(--type-weight-strong);
}

.overlay-version {
  border: 0;
  background: transparent;
  color: #4b5563;
}

.segmented-control {
  background: var(--reader-layer-card);
  border-bottom-color: var(--reader-layer-line);
}

.segmented-tab {
  color: #374151;
  font-size: 1rem;
}

.segmented-tab.active:not(.segment-toggle-btn) {
  color: var(--reader-accent);
  border-bottom-color: var(--reader-accent);
}

.mode-selector-bar {
  min-height: 56px;
  background: var(--reader-layer-card);
  color: #1f2937;
  border-bottom-color: var(--reader-layer-line);
}

.toggle-container,
.view-mode-container {
  color: #1f2937;
  font-size: 0.98rem;
}

.view-mode-btn {
  color: #1f2937;
  font-size: 1.35rem;
}

.view-mode-btn.active {
  color: var(--reader-accent);
  background: transparent;
}

.overlay-scroll-content {
  background: var(--reader-layer-bg);
  overscroll-behavior: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.bible-nav-section-title {
  min-height: 36px;
  display: flex;
  align-items: center;
  background: #f0f1f3;
  color: #4b5563;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

.bible-nav-grid,
.chapter-nav-grid,
.verse-nav-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-color: var(--reader-layer-line);
}

.grid-item-book,
.grid-item-number {
  min-height: 72px;
  background: var(--reader-layer-card);
  border-color: var(--reader-layer-line);
  color: #1f2937;
  transition: transform 0.12s ease, background 0.12s ease;
}

.grid-item-book .abbrev-title {
  color: #1f2937;
  font-size: 1.35rem;
}

.grid-item-book .full-title {
  color: #374151;
  font-size: 0.875rem;
}

.grid-item-book.active,
.grid-item-number.active {
  color: var(--reader-accent);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.grid-item-book.active .abbrev-title {
  color: var(--reader-accent);
}

.bible-nav-list {
  background: transparent;
}

.list-item-book {
  min-height: 58px;
  color: #1f2937;
  font-size: 1.08rem;
  border-color: var(--reader-layer-line);
}

.list-item-book.active {
  color: var(--reader-accent);
  background: color-mix(in srgb, var(--color-danger) 5%, transparent);
}

.search-input-field {
  height: 42px;
  background: #f2f3f5;
  border: 0;
  color: #111827;
  font-size: 1rem;
}

.search-input-field:focus {
  background: #eef0f3;
  border: 0;
}

.search-icon-inside {
  color: #6b7280;
}

.search-clear-btn {
  right: 4px;
  width: 44px;
  height: 44px;
  color: #9ca3af;
}

.search-cancel-btn {
  color: var(--reader-accent);
  font-size: 1rem;
}

.search-results-info {
  background: var(--reader-layer-bg);
  color: #6b7280;
}

.search-result-item {
  min-height: 64px;
  background: var(--reader-layer-card);
  border-color: var(--reader-layer-line);
}

.search-result-ref {
  color: var(--reader-accent);
}

.search-result-text {
  color: #1f2937;
}

.bottom-sheet-backdrop {
  z-index: 700;
  overscroll-behavior: contain;
}
.bottom-sheet-backdrop:not(.hidden) .bottom-sheet-container {
  transform: translateY(0) !important;
}

.bottom-sheet-backdrop:not(.hidden) .reader-settings-dialog {
  transform: translateY(0) scale(1) !important;
}

/* (merged into primary .bottom-sheet-container rule above) */

.sheet-option-btn {
  min-height: 72px;
  border-radius: 14px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.sheet-option-btn:active {
  transform: scale(0.95);
}

.reader-font-size-control {
  gap: 0.65rem;
}

.reader-font-size-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#reader-font-size-value {
  min-width: 3.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.reader-font-size-slider {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.reader-font-size-ticks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
}

.reader-font-size-tick {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.reader-font-size-tick.active {
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
}

.reader-font-size-tick:focus-visible,
.reader-font-size-slider:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .reader-version-btn {
    display: none;
  }

  .reader-ref-chip {
    max-width: 48vw;
  }

  .grid-item-book,
  .grid-item-number {
    min-height: 68px;
  }
}


/* Reader page uses its own top app bar */
body.reader-page .main-header {
  display: none !important;
}

body.reader-page .main-content {
  top: 0 !important;
  padding: 0 !important;
  background: var(--bg-app);
}

body.reader-page #reader-view.active {
  min-height: 100%;
  background: var(--bg-app);
}

body.reader-page .native-reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 310;
  margin: 0 0 0.75rem;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 0.65rem 0.35rem;
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-header);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-radius: 0;
}

.reader-back-btn {
  display: inline-flex !important;
}

body:not(.reader-page) .reader-back-btn {
  display: none !important;
}

body.reader-page .reader-ref-chip {
  max-width: min(34vw, 220px);
}

@media (max-width: 420px) {
  body.reader-page .native-toolbar-btn,
  body.reader-page .reader-icon-btn.native-toolbar-btn {
    width: 42px;
    min-width: 42px;
  }

  body.reader-page .reader-ref-chip {
    max-width: 32vw;
  }
}


/* Reader catalog/search visual refresh: project-native, no legacy drawer */
.reader-hidden-state-controls,
.reader-nav-drawer,
.reader-picker-panel {
  display: none !important;
}

:root {
  --reader-accent: var(--primary-color, var(--color-brand));
  --reader-layer-bg: var(--bg-app);
  --reader-layer-card: var(--bg-card);
  --reader-layer-line: var(--border-card);
}

.full-page-overlay {
  background: radial-gradient(circle at 50% -10%, var(--color-brand-subtle), transparent 30%), var(--bg-app) !important;
  color: var(--text-primary) !important;
}

.bible-native-overlay-header,
.search-header,
.segmented-control,
.mode-selector-bar {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

.overlay-back-btn,
.overlay-title,
.segmented-tab,
.toggle-container,
.view-mode-container,
.view-mode-btn,
.search-cancel-btn {
  color: var(--text-primary) !important;
}

.overlay-version {
  color: var(--text-secondary) !important;
  background: var(--color-brand-subtle) !important;
  border: 1px solid var(--color-brand-border) !important;
  border-radius: 999px;
}

.segmented-tab.active:not(.segment-toggle-btn),
.view-mode-btn.active:not(.segment-toggle-btn),
.grid-item-book.active .abbrev-title,
.grid-item-number.active,
.list-item-book.active,
.search-cancel-btn {
  color: var(--reader-accent) !important;
}

.segmented-tab.active:not(.segment-toggle-btn) {
  border-bottom-color: var(--reader-accent) !important;
}

.overlay-scroll-content {
  background: transparent !important;
}

.bible-nav-section-title {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}

.grid-item-book,
.grid-item-number,
.list-item-book,
.search-result-item {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
}

.grid-item-book .abbrev-title,
.grid-item-book .full-title,
.search-result-text {
  color: var(--text-primary) !important;
}

.grid-item-book .full-title,
.search-results-info {
  color: var(--text-muted) !important;
}

.grid-item-book.active,
.grid-item-number.active,
.list-item-book.active {
  background: var(--color-brand-subtle) !important;
  border-color: var(--color-brand-border) !important;
}

.search-input-field {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-input)) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-card) !important;
}

.search-input-field:focus {
  background: color-mix(in srgb, var(--text-primary) 9%, var(--bg-input)) !important;
  border-color: var(--color-brand-border) !important;
}

.search-icon-inside,
.search-clear-btn {
  color: var(--text-muted) !important;
}

.search-results-info {
  background: rgba(255, 255, 255, 0.025) !important;
  border-bottom: 1px solid var(--border-card);
}

.search-result-ref {
  color: var(--reader-accent) !important;
}


/* Mobile full-bleed Bible reading surface */
@media (max-width: 640px) {
  .app-layout.reader-mode .main-content,
  .app-layout:has(#reader-view.active) .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg-app);
  }

  #reader-view.active {
    min-height: 100%;
    background: var(--bg-app);
  }

  body.reader-page .native-reader-toolbar,
  .app-layout.reader-mode .native-reader-toolbar,
  .app-layout:has(#reader-view.active) .native-reader-toolbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    border-radius: 0 !important;
  }

  #reader-view .reader-body,
  #reader-view .reader-body-full {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg-app);
  }

  #reader-view .reader-card,
  #reader-view .glass-card.reader-card {
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #reader-view .reader-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  #reader-view .reader-header {
    padding: 1.05rem 20px 0.45rem !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #reader-view .bible-heading {
    font-size: 0.95rem !important;
    color: var(--text-muted) !important;
    font-weight: var(--type-weight-strong) !important;
    letter-spacing: 0 !important;
  }

  #reader-view .bible-text-container {
    width: 100%;
    padding: 0.35rem 20px calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    background: transparent !important;
  }

  #reader-view .bible-verse {
    margin: 0 !important;
    padding: 0.72rem 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1.9;
  }

  #reader-view .bible-verse + .bible-verse {
    border-top: 1px solid rgba(148, 163, 184, 0.08) !important;
  }

  #reader-view .bible-verse:hover {
    background: transparent !important;
    transform: none !important;
  }

  #reader-view .bible-verse.selected {
    background: var(--color-brand-subtle) !important;
    border-radius: 12px !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  #reader-view .verse-num {
    min-width: 2.2rem;
    color: var(--primary-color) !important;
    opacity: 0.9;
    font-weight: var(--type-weight-strong);
  }

  #reader-view .verse-text {
    color: var(--text-primary);
    letter-spacing: 0;
  }
}


/* Reader page flattened app layout, all viewport sizes */
.app-layout.reader-mode .main-content,
.app-layout:has(#reader-view.active) .main-content,
body.reader-page .main-content {
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--bg-app);
}

#reader-view.active {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg-app);
}

.app-layout.reader-mode .native-reader-toolbar,
.app-layout:has(#reader-view.active) .native-reader-toolbar,
body.reader-page .native-reader-toolbar {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

#reader-view .reader-body,
#reader-view .reader-body-full {
  flex: 1 1 auto;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg-app);
}

#reader-view .reader-reading-surface {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg-app) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#reader-view .reader-header {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

#reader-view .bible-text-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
  border: 0 !important;
  background: transparent !important;
}

#reader-view .reader-card,
#reader-view .glass-card.reader-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* Smart reader interaction fixes: closed layers must never block taps. */
.full-page-overlay.hidden,
.bottom-sheet-backdrop.hidden,
.reader-search-panel.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.full-page-overlay:not(.hidden),
.bottom-sheet-backdrop:not(.hidden) {
  pointer-events: auto;
  visibility: visible;
}

body.reader-modal-open #reader-view .reader-floating-nav,
body.reader-modal-open #reader-view .floating-nav-btn {
  pointer-events: none !important;
}

#reader-view .native-reader-toolbar {
  position: relative;
  z-index: 120;
  pointer-events: auto;
}

#reader-view .reader-reading-surface {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Smart floating chapter navigation: quiet while reading, available on wake. */
#reader-view .reader-floating-nav {
  position: fixed !important;
  inset: 0 !important;
  z-index: 320 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#reader-view .floating-nav-btn {
  position: fixed !important;
  top: 50% !important;
  width: 46px !important;
  min-width: 44px !important;
  height: 64px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-primary) !important;
  background: color-mix(in srgb, var(--bg-card) 72%, transparent) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  opacity: 0.2 !important;
  transform: translateY(-50%) !important;
  transition: opacity 0.22s ease, transform 0.16s ease, background 0.22s ease, border-color 0.22s ease !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#reader-view .floating-nav-btn.prev {
  left: max(0px, env(safe-area-inset-left, 0px)) !important;
}

#reader-view .floating-nav-btn.next {
  right: max(0px, env(safe-area-inset-right, 0px)) !important;
}

#reader-view .floating-nav-btn .nlc-icon svg {
  stroke-width: 2.8px;
}

#reader-view .floating-nav-btn:hover {
  background: rgba(30, 41, 59, 0.58) !important;
  border-color: rgba(129, 140, 248, 0.42) !important;
  transform: translateY(-50%) !important;
}

#reader-view .floating-nav-btn:active {
  transform: translateY(-50%) scale(0.95) !important;
}

body.reader-nav-awake #reader-view .floating-nav-btn {
  opacity: 0.62 !important;
}

body.reader-nav-hidden #reader-view .floating-nav-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep support chrome out of the scripture surface. The mobile nav bar is
   deliberately NOT in this always-hidden list — it uses the scroll-based
   show/hide rules below instead, so it stays visible until the user actually
   starts scrolling to read (easy to switch tabs right after entering). */
body.reader-page .issue-report-fab,
#reader-view .reader-bottom-action-bar {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile nav bar: visible by default so it's easy to switch tabs right after
   entering the reader. Deliberately its OWN one-way class (not the floating
   buttons' reader-nav-hidden/reader-nav-awake) — once scrolling starts it
   stays hidden for the rest of that chapter view, with no idle-timeout or
   tap reveal, so it can't flicker in in the middle of reading or slide in
   over an in-progress verse long-press/selection. It resets to visible the
   next time the reader renders (new chapter / re-entering the tab). */
body.reader-page .mobile-nav-bar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.reader-navbar-hidden.reader-page .mobile-nav-bar,
.app-layout.reader-mode body.reader-navbar-hidden .mobile-nav-bar {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  #reader-view .floating-nav-btn {
    width: 44px !important;
    height: 58px !important;
  }
}

/* Original Premium Bible navigation styles (Pill Slider & Frameless Grid) */
.segmented-control.bible-native-tabs {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  padding: 4px;
  display: flex;
  position: relative;
  margin: 1.2rem 1rem;
}
body.light-theme .segmented-control.bible-native-tabs {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.05);
}
.segmented-control.bible-native-tabs .segmented-tab {
  border-radius: 9999px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  flex: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  font-weight: var(--type-weight-strong);
  font-size: 0.94rem;
  cursor: pointer;
  z-index: 1;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.segmented-control.bible-native-tabs .segmented-tab.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
body.light-theme .segmented-control.bible-native-tabs .segmented-tab.active {
  color: var(--primary-color) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Magazine-style Asymmetrical Split List items */
.book-list-item-asym {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.light-theme .book-list-item-asym {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
.book-list-item-asym:active {
  background: rgba(255, 255, 255, 0.02);
}
.book-list-item-asym.active {
  background: var(--color-brand-muted);
}
.book-brand-box {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1.02rem;
  font-weight: var(--type-weight-strong);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
body.light-theme .book-brand-box {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
.book-list-item-asym.active .book-brand-box {
  background: var(--color-brand);
  border-color: transparent;
  color: white !important;
  box-shadow: var(--shadow-none);
}
.book-names-box {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}
.book-full-title {
  font-size: 1.02rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}
.book-english-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Frameless Grid selections */
.chapter-nav-grid, .verse-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  padding: 1.2rem;
}
.grid-item-number {
  border: none !important;
  background: transparent !important;
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: var(--type-weight-strong);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.grid-item-number:active {
  transform: scale(0.9);
}
.grid-item-number::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background: var(--color-brand-subtle);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: -1;
}
.grid-item-number:active::after {
  transform: scale(1.1);
  opacity: 1;
}
.grid-item-number.active {
  background: var(--color-brand) !important;
  color: white !important;
  box-shadow: var(--shadow-none) !important;
}

/* ==========================================================================
   Global Shimmer Skeleton UI Loader Styles
   ========================================================================== */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-base) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.6s infinite linear !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.skeleton-on-dark .skeleton-shimmer,
.verse-card-skeleton .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--skeleton-on-dark-base) 25%,
    var(--skeleton-on-dark-highlight) 50%,
    var(--skeleton-on-dark-base) 75%
  ) !important;
  background-size: 200% 100% !important;
}

.skeleton-card {
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-card);
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}

/* Base sizing and styles for skeleton items inside shimmer wrappers */
.skeleton-wrapper,
.skeleton-wrapper * {
  pointer-events: none !important;
  user-select: none !important;
}



/* Immersive reader routing: hide app bottom navigation in full-screen reading mode. */
.route-plan-card {
  cursor: pointer;
  touch-action: manipulation;
}

.route-plan-card:active,
.plan-task-item:active {
  transform: scale(0.98);
}

/* NOTE: mobile-nav-bar visibility in reader-view is now controlled by
   body.reader-nav-hidden / body.reader-nav-awake classes (set by bible.js scroll events).
   See the reader-nav-hidden section above for the actual rules. */

body.reader-page .main-content,
.app-layout.reader-mode .main-content {
  bottom: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom)) !important;
}

@media (max-width: 640px) {
  .app-layout.reader-mode .main-content,
  .app-layout:has(#reader-view.active) .main-content {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ==========================================================================
   Sticky Bottom Action Bar inside Reader
   ========================================================================== */
.reader-bottom-action-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 24px;
  margin: 3rem auto 1.5rem auto;
  z-index: 99;
  width: 92%;
  max-width: 440px;
  pointer-events: none;
}

.reader-bottom-action-bar .progress-indicator {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

.reader-bottom-action-bar .capsule-action-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 26px;
  font-size: 0.96rem;
  font-weight: var(--type-weight-strong);
  box-shadow: var(--shadow-sm);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.reader-bottom-action-bar .capsule-action-btn:active {
  transform: scale(0.95);
}

/* Scenario A: Free Reading (Low-profile border button) */
.reader-bottom-action-bar.scenario-a .capsule-action-btn {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-card) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
body.dark-theme .reader-bottom-action-bar.scenario-a .capsule-action-btn {
  background-color: rgba(30, 41, 59, 0.7) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

/* Scenario B: Plan Normal (Primary Brand purple/indigo) */
.reader-bottom-action-bar.scenario-b .capsule-action-btn {
  background: var(--color-brand) !important;
  border: none !important;
  color: white !important;
}

/* Scenario C: Catching Up (Warning Orange) */
.reader-bottom-action-bar.scenario-c .capsule-action-btn {
  background: var(--color-warning) !important;
  border: none !important;
  color: white !important;
  box-shadow: var(--shadow-none) !important;
}

/* ==========================================================================
   Modern Collapsible Monthly Calendar Grid Component
   ========================================================================== */

/* Calendar container styling */
.calendar-component {
  background: var(--bg-card);
  border: none !important;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: max-height 0.3s ease;
  overflow: visible;
}

/* Header bar inside calendar */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-month-title {
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.calendar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav-btn {
  background: transparent;
  border: none !important;
  color: var(--text-primary);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.calendar-nav-btn:hover {
  background: var(--color-brand-subtle);
  border-color: var(--primary-color);
}

.calendar-toggle-view-btn {
  background: var(--color-brand-muted);
  border: none;
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-smooth);
}

.calendar-toggle-view-btn:hover {
  background: var(--color-brand-subtle);
}

/* Weekday header row (plan calendar only) */
.plan-calendar .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 0.4rem;
  border-bottom: none !important;
  padding-bottom: 0.4rem;
}

.plan-calendar .calendar-weekdays div {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Plan calendar container overrides */
.plan-calendar.calendar-component {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.plan-calendar .calendar-scroll-container {
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.plan-calendar .calendar-scroll-container::-webkit-scrollbar {
  display: none;
}

/* Plan calendar grid */
.plan-calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 4px;
  padding: 8px 0;
  transition: all 0.3s ease;
}

/* Plan day cell — square, shadcn-inspired */
.plan-calendar .plan-day-cell {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  max-width: 44px;
  max-height: 44px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow: 0 0 0 2px transparent;
}

.plan-calendar button.plan-day-cell:focus {
  outline: none;
}

.plan-calendar button.plan-day-cell:focus-visible {
  box-shadow: 0 0 0 2px var(--color-brand), var(--shadow-focus-ring);
  z-index: 1;
}

.plan-calendar .plan-day-cell .day-number {
  font-size: 0.92rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  color: var(--text-primary);
}

.plan-calendar button.plan-day-cell:hover:not(.plan-day-cell--muted) {
  background: var(--color-brand-muted);
}

.plan-calendar button.plan-day-cell:active:not(.plan-day-cell--muted) {
  transform: scale(0.96);
}

/* Selected day */
.plan-calendar .plan-day-cell.active {
  background: color-mix(in srgb, #dc2626 14%, var(--surface-card));
  color: #b91c1c;
  box-shadow:
    0 0 0 2px #dc2626,
    0 0 0 5px color-mix(in srgb, #dc2626 18%, transparent),
    var(--shadow-sm);
  z-index: 2;
}

.plan-calendar .plan-day-cell.active .day-number {
  color: #b91c1c;
}

/* Today — NLC brand ring */
.plan-calendar .plan-day-cell.today {
  box-shadow: 0 0 0 2px var(--color-brand);
}

.plan-calendar .plan-day-cell.today .day-number {
  color: var(--text-primary);
  font-weight: var(--type-weight-strong);
}

/* Today + selected */
.plan-calendar .plan-day-cell.today.active {
  background: color-mix(in srgb, #dc2626 16%, var(--surface-card));
  box-shadow:
    0 0 0 2px #dc2626,
    0 0 0 5px color-mix(in srgb, #dc2626 20%, transparent),
    var(--shadow-sm);
}

body.dark-theme .plan-calendar .plan-day-cell.active {
  background: color-mix(in srgb, #ef4444 22%, var(--surface-card));
  color: #fecaca;
  box-shadow:
    0 0 0 2px #f87171,
    0 0 0 5px color-mix(in srgb, #ef4444 24%, transparent),
    var(--shadow-sm);
}

body.dark-theme .plan-calendar .plan-day-cell.active .day-number {
  color: #fecaca;
}

/* Past unread / behind */
.plan-calendar .plan-day-cell.past-unread .day-number {
  color: #ea580c;
}

body.dark-theme .plan-calendar .plan-day-cell.past-unread .day-number {
  color: #fb923c;
}

/* Completed */
.plan-calendar .plan-day-cell.completed {
  background: color-mix(in srgb, #22c55e 12%, transparent);
  animation: pulseCompleted 0.4s ease-out;
}

.plan-calendar .plan-day-cell.completed .day-number {
  font-weight: var(--type-weight-strong);
}

.plan-calendar .plan-day-cell.today.completed {
  background: color-mix(in srgb, #22c55e 12%, var(--color-brand-muted));
}

/* Non-plan / muted days */
.plan-calendar .plan-day-cell--muted {
  cursor: default;
  pointer-events: none;
}

.plan-calendar .plan-day-cell.other-month {
  opacity: 0.35;
}

.plan-calendar .plan-day-cell.other-month .day-number {
  color: var(--text-muted);
}

/* Micro progress bar */
.plan-calendar .plan-day-cell .micro-progress-container {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 2px;
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 1px;
  overflow: hidden;
}

.plan-calendar .plan-day-cell .micro-progress-bar {
  height: 100%;
  background: var(--primary-color);
  border-radius: 1px;
}

/* Status dots */
.plan-calendar .plan-day-cell .day-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}

.plan-calendar .plan-day-cell .day-status-dot.dot-completed {
  background-color: #22c55e;
}

.plan-calendar .plan-day-cell .day-status-dot.dot-behind {
  background-color: var(--color-danger);
}

.plan-calendar .plan-day-cell .day-status-dot.dot-grey {
  background-color: var(--text-muted);
}

body.dark-theme .plan-calendar .plan-day-cell .day-status-dot.dot-grey {
  background-color: color-mix(in srgb, var(--text-muted) 70%, #fff);
}

/* Micro pulse animation for completed cells */
@keyframes pulseCompleted {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* Today Floating Button (glassmorphic, shifted down to prevent overlap) */
.calendar-today-btn {
  position: absolute;
  bottom: -58px;
  right: 16px;
  background: color-mix(in srgb, var(--color-brand) 75%, transparent) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  box-shadow: var(--shadow-sm) !important;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}

.calendar-today-btn.hidden {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}

.calendar-today-btn:hover {
  background: var(--color-brand-hover) !important;
}

.calendar-today-btn:active {
  transform: scale(0.95);
}

/* Hide scrollbars for the calendar scroll container in Webkit browsers */
.calendar-scroll-container::-webkit-scrollbar {
  display: none !important;
}

/* Daily Verse Skeleton & Flip Animations */
.animate-pulse {
  animation: pulse-skeleton 1.8s ease-in-out infinite;
}

@keyframes pulse-skeleton {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.1)); }
  50% { opacity: 0.6; filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.35)); }
}

.animate-fadeIn {
  animation: fadeIn-verse 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn-verse {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Card Flip Animation Styles */
.daily-verse-card.flipped #daily-verse-card-inner {
  transform: rotateY(180deg);
}

.daily-verse-card.flipped #daily-verse-face-content {
  transform: rotateY(180deg);
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Micro Heatmap Layout Overrides */
#bible-heatmap-container .calendar-heatmap {
  display: flex;
  overflow-x: auto;
  gap: 0.75rem;
  width: 100%;
  scrollbar-width: none;
  justify-content: flex-start;
  align-items: stretch;
}
#bible-heatmap-container .calendar-heatmap::-webkit-scrollbar {
  display: none;
}
#bible-heatmap-container .calendar-month {
  flex: 1 0 160px;
  max-width: 220px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
#bible-heatmap-container .calendar-month-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  margin-bottom: 0.4rem;
}
#bible-heatmap-container .calendar-month-grid {
  grid-template-columns: repeat(7, minmax(18px, 1fr));
  grid-auto-rows: 18px;
  gap: 3px;
}
#bible-heatmap-container .calendar-day {
  height: 18px;
  max-width: 18px;
  border-radius: 9999px;
  font-size: 0.875rem;
  border: none;
  justify-self: center;
}
#bible-heatmap-container .calendar-day[data-level="0"] {
  background: var(--heatmap-level-0);
}
#bible-heatmap-container .calendar-day[data-level="1"] {
  background: var(--heatmap-level-1);
}
#bible-heatmap-container .calendar-day[data-level="2"] {
  background: var(--heatmap-level-2);
}
#bible-heatmap-container .calendar-day[data-level="3"] {
  background: var(--heatmap-level-3);
}
#bible-heatmap-container .calendar-day[data-level="4"] {
  background: var(--heatmap-level-4);
  color: var(--text-on-brand, #fff);
}
#bible-heatmap-container .calendar-weekday {
  font-size: 0.875rem;
  height: 14px;
}

/* Group Heatmap Overrides */
#grp-bible-heatmap-container .calendar-heatmap {
  display: flex;
  overflow-x: auto;
  gap: 0.75rem;
  width: 100%;
  scrollbar-width: none;
  justify-content: flex-start;
  align-items: stretch;
}
#grp-bible-heatmap-container .calendar-heatmap::-webkit-scrollbar {
  display: none;
}
#grp-bible-heatmap-container .calendar-month {
  flex: 1 0 160px;
  max-width: 220px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
#grp-bible-heatmap-container .calendar-month-title {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  margin-bottom: 0.4rem;
}
#grp-bible-heatmap-container .calendar-month-grid {
  grid-template-columns: repeat(7, minmax(18px, 1fr));
  grid-auto-rows: 18px;
  gap: 3px;
}
#grp-bible-heatmap-container .calendar-day {
  height: 18px;
  max-width: 18px;
  border-radius: 9999px;
  font-size: 0.875rem;
  border: none;
  justify-self: center;
}
#grp-bible-heatmap-container .calendar-day[data-level="0"] {
  background: var(--heatmap-level-0);
}
#grp-bible-heatmap-container .calendar-day[data-level="1"] {
  background: var(--heatmap-level-1);
}
#grp-bible-heatmap-container .calendar-day[data-level="2"] {
  background: var(--heatmap-level-2);
}
#grp-bible-heatmap-container .calendar-day[data-level="3"] {
  background: var(--heatmap-level-3);
}
#grp-bible-heatmap-container .calendar-day[data-level="4"] {
  background: var(--heatmap-level-4);
  color: var(--text-on-brand, #fff);
}
#grp-bible-heatmap-container .calendar-weekday {
  font-size: 0.875rem;
  height: 14px;
}

/* Fluid Bento Shell Styles */
.bento-card {
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 84px;
  text-align: left;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  background-color: var(--bg-card);
}

.dark-theme .bento-card {
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

/* Upgraded Glass Card container */
.glass-card-upgrade {
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  background-color: var(--bg-card);
}

.dark-theme .glass-card-upgrade {
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

/* Segmented Capsule Control — track styling via .segment-track above */

/* Icon + label utilities (UX writing upgrade) */
.btn-with-icon,
.label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
  background: transparent;
}

.btn-with-icon .nlc-icon,
.label-with-icon .nlc-icon {
  background: transparent;
  color: inherit;
}

.member-list-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  gap: 1rem;
}

@media (max-width: 600px) {
  .member-list-header-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .member-list-header-wrapper .card-title {
    width: 100%;
  }
  .member-list-header-wrapper .member-search-wrapper {
    max-width: 100%;
  }
}

.member-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
}

.member-search-wrapper .search-icon-inside {
  position: absolute;
  left: 0.65rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

.member-search-wrapper input {
  width: 100%;
  padding: 0.4rem 0.8rem 0.4rem 2rem;
  font-size: 0.875rem;
  border-radius: 8px;
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-primary);
  font-weight: 500;
}

/* ==========================================================================
   Bible Nav Overlay — shadcn/ui sheet patterns (scoped to #bible-nav-overlay)
   Flat surfaces, muted tabs/toggles, bordered grid cells. Behavior unchanged.
   ========================================================================== */

#bible-nav-overlay.full-page-overlay {
  background: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

#bible-nav-overlay .bible-nav-sheet__header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: calc(3.5rem + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 1rem 0;
}

#bible-nav-overlay .bible-nav-sheet__back {
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.625rem;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  transition: background 0.15s ease;
}

#bible-nav-overlay .bible-nav-sheet__back:hover {
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

#bible-nav-overlay .bible-nav-sheet__back:active {
  transform: none !important;
  opacity: 1;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

#bible-nav-overlay .bible-nav-sheet__title {
  font-size: 0.9375rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary) !important;
  letter-spacing: -0.01em;
}

#bible-nav-overlay .bible-nav-sheet__badge {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-app)) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--text-secondary) !important;
  min-width: auto;
  min-height: auto;
}

#bible-nav-overlay .bible-nav-sheet__tabs.segmented-control {
  flex-shrink: 0;
  height: auto;
  border-bottom: none !important;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-app)) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-md) !important;
  margin: 0.75rem 1rem 0 !important;
  padding: 0.25rem !important;
}

#bible-nav-overlay .bible-nav-sheet__tabs .segmented-tab {
  border-bottom: none !important;
  border-radius: calc(var(--radius-md) - 2px) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  min-height: 2.25rem;
}

#bible-nav-overlay .bible-nav-sheet__tabs .segmented-tab:active {
  transform: none !important;
}

#bible-nav-overlay .bible-nav-sheet__toolbar.mode-selector-bar {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  background: var(--bg-app) !important;
  border-bottom: 1px solid var(--border-card) !important;
  padding: 0.5rem 1rem 0.625rem !important;
  min-height: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#bible-nav-overlay .bible-nav-sheet__view-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

#bible-nav-overlay .bible-nav-sheet__toggle-label {
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

#bible-nav-overlay .bible-nav-sheet__toggle-group.view-mode-container {
  margin-left: 0;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-app));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 0.1875rem;
  gap: 0.1875rem;
}

#bible-nav-overlay .bible-nav-sheet__toggle-group .view-mode-btn {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#bible-nav-overlay .bible-nav-sheet__toggle-group .view-mode-btn .nlc-icon {
  color: inherit;
}

#bible-nav-overlay .bible-nav-sheet__toggle-group .view-mode-btn .nlc-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

#bible-nav-overlay .bible-nav-sheet__toggle-group .view-mode-btn:active {
  transform: none !important;
}

#bible-nav-overlay .bible-nav-sheet__body.overlay-scroll-content {
  background: var(--bg-app) !important;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

#bible-nav-overlay .bible-nav-section-title {
  padding: 1rem 1rem 0.375rem;
  background: transparent !important;
  border: none !important;
  min-height: auto;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-muted) !important;
  text-transform: none;
  letter-spacing: 0.04em;
}

#bible-nav-overlay .bible-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.5rem 1rem 1rem;
  border: none !important;
}

#bible-nav-overlay .bible-nav-grid .grid-item-book {
  aspect-ratio: 1;
  min-height: 0;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-sm);
  background: var(--bg-card) !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

#bible-nav-overlay .bible-nav-grid .grid-item-book:active {
  transform: scale(0.97) !important;
  background: var(--color-brand-muted) !important;
}

#bible-nav-overlay .bible-nav-grid .grid-item-book.active {
  background: var(--color-brand-subtle) !important;
  border-color: var(--color-brand-border) !important;
}

#bible-nav-overlay .bible-nav-grid .grid-item-book.active .abbrev-title {
  color: var(--color-brand) !important;
}

#bible-nav-overlay .bible-nav-grid .grid-item-book .abbrev-title {
  font-size: 1rem;
  color: var(--text-primary) !important;
}

#bible-nav-overlay .bible-nav-grid .grid-item-book .full-title {
  font-size: 0.875rem;
  color: var(--text-muted) !important;
}

#bible-nav-overlay .book-list-item-asym {
  margin: 0 0.75rem 0.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  border-bottom: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#bible-nav-overlay .book-list-item-asym:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}

#bible-nav-overlay .book-list-item-asym.active {
  background: var(--color-brand-subtle) !important;
  border-color: var(--color-brand-border);
}

#bible-nav-overlay .book-list-item-asym .book-brand-box {
  border-radius: var(--radius-sm);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9375rem;
}

#bible-nav-overlay .book-list-item-asym.active .book-brand-box {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border-color: transparent;
}

#bible-nav-overlay .chapter-nav-grid,
#bible-nav-overlay .verse-nav-grid {
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: 0.5rem;
  padding: 1rem;
  border: none !important;
}

#bible-nav-overlay .chapter-nav-grid .grid-item-number,
#bible-nav-overlay .verse-nav-grid .grid-item-number {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0 !important;
  max-width: none;
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-card) !important;
  font-size: 0.9375rem;
  color: var(--text-primary) !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

#bible-nav-overlay .chapter-nav-grid .grid-item-number::after,
#bible-nav-overlay .verse-nav-grid .grid-item-number::after {
  display: none;
}

#bible-nav-overlay .chapter-nav-grid .grid-item-number:active,
#bible-nav-overlay .verse-nav-grid .grid-item-number:active {
  transform: scale(0.97) !important;
  background: var(--color-brand-muted) !important;
}

#bible-nav-overlay .chapter-nav-grid .grid-item-number.active,
#bible-nav-overlay .verse-nav-grid .grid-item-number.active {
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: var(--color-white) !important;
  box-shadow: var(--shadow-none) !important;
}

/* Unified segment toggle — wins over reader-layer accent overrides */
.segment-toggle-btn.active {
  color: var(--color-brand) !important;
  background: var(--color-brand-subtle) !important;
  border-color: var(--color-brand-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.segment-toggle-btn.active[data-tab="admin"] {
  color: var(--color-warning) !important;
  background: var(--color-warning-subtle) !important;
  border-color: color-mix(in srgb, var(--color-warning) 24%, transparent) !important;
}

.profile-personal-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.profile-personal-stats-grid .profile-stat-card--primary {
  grid-column: 1 / -1;
}

.profile-stat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.profile-stat-card__value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.profile-stat-card--primary .profile-stat-card__value {
  font-size: 2.2rem;
}

.profile-stat-card__unit {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 0.15rem;
}

.profile-stat-card__label {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text-secondary);
}

@media (max-width: 420px) {
  .profile-personal-stats-grid {
    gap: 0.6rem;
  }

  .profile-stat-card__value {
    font-size: 1.25rem;
  }

  .profile-stat-card--primary .profile-stat-card__value {
    font-size: 1.85rem;
  }
}

.plan-view-mode-toggle {
  display: inline-flex;
  align-self: center;
  gap: 0.25rem;
  margin: 0.25rem auto 0.75rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
}

.plan-view-mode-toggle .segment-toggle-btn {
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
}

/* Plan detail tab-strip architecture */
.plan-detail-tab-strip {
  position: sticky;
  /* .main-content has ~1rem top padding; pin a small even gap below the top bar.
     The matching negative top margin keeps the unpinned gap identical, so the
     tabs don't jump when they start sticking, while staying uncramped. */
  top: -0.4rem;
  z-index: 12;
  margin: -0.4rem 0 1rem;
  padding: 0;
  /* Solid, opaque page-background token (--bg-main was never defined, so the
     bar rendered transparent once the backdrop-blur was removed). */
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-card);
}
/* Extend the same solid fill up into the sticky offset above the bar so scrolled
   content never peeks through as a thin "crack" between the top bar and the tabs.
   The scroll container's overflow clips this at the top bar, so it works at any
   breakpoint regardless of the container's exact top padding. */
.plan-detail-tab-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 4rem;
  background: var(--bg-app);
  pointer-events: none;
}
.plan-detail-tab-strip__scroller {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  padding: 0;
}
.plan-detail-tab-strip__scroller::-webkit-scrollbar { display: none; }
.plan-detail-tab-btn {
  position: relative;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.5rem 0.15rem 0.55rem;
  transition: color 0.2s ease;
}
.plan-detail-tab-btn:hover { color: var(--text-primary); }
.plan-detail-tab-btn.active { color: var(--color-brand); }
.plan-detail-tab-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -3px; border-radius: 8px; }
/* shadcn line-variant style: slim flat 2px underline sitting on the baseline. */
#tab-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--color-brand);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.plan-detail-tabs { display: none !important; }
@media (max-width: 380px) {
  .plan-detail-tab-btn { font-size: 0.875rem; padding-inline: 0.05rem; }
}
.plan-view-window { width: 100%; overflow: hidden; }
#plan-view-wrapper { display: flex; width: 100%; transform: translateX(0%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.plan-page-panel { width: 100%; min-width: 100%; flex: 0 0 100%; padding: 0 0.05rem 1.25rem; }
.plan-calendar .plan-day-cell.active, .plan-calendar .plan-day-cell.today.active { background: color-mix(in srgb, #ef4444 24%, var(--surface-card)); color: #991b1b; border-color: #ef4444; box-shadow: 0 0 0 2px #ef4444, 0 0 0 6px color-mix(in srgb, #ef4444 22%, transparent), var(--shadow-sm); }
.plan-calendar .plan-day-cell.active .day-number, .plan-calendar .plan-day-cell.today.active .day-number { color: #991b1b; font-weight: var(--type-weight-strong); }
body.dark-theme .plan-calendar .plan-day-cell.active, body.dark-theme .plan-calendar .plan-day-cell.today.active { background: color-mix(in srgb, #ef4444 34%, var(--surface-card)); color: #fee2e2; border-color: #f87171; }
body.dark-theme .plan-calendar .plan-day-cell.active .day-number, body.dark-theme .plan-calendar .plan-day-cell.today.active .day-number { color: #fee2e2; }


/* Plan entry eligibility gate: blocks plan-view until name/pastoral zone are complete. */
#plan-view.plan-view--gated > *:not(#plan-eligibility-gate) {
  display: none !important;
}

.plan-eligibility-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 180px);
  padding: 1.5rem;
}

.plan-eligibility-gate__card {
  width: 100%;
  max-width: 380px;
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.plan-eligibility-gate__icon {
  color: var(--color-brand);
  margin-bottom: 0.5rem;
}

.plan-eligibility-gate__desc {
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.plan-eligibility-gate__hub-link {
  width: 100%;
  text-decoration: none;
}

/* Calendar-only today reading: no inner list/calendar switcher. */
#plan-view-mode-toggle {
  display: none !important;
}


/* ============================================================
   21st.dev Premium Design Upgrades & Bento Grid Effects
   ============================================================ */

/* 1. Gradient Text Clipping */
.gradient-text {
  background: linear-gradient(135deg, var(--color-brand) 30%, var(--color-success-foreground) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #FDE68A 30%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

/* 2. Glassmorphic Bento Cards with Glow Shadows */
.bento-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-brand) 20%, rgba(0, 0, 0, 0.3)), 0 4px 12px -5px color-mix(in srgb, var(--color-brand) 10%, rgba(0, 0, 0, 0.15));
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--border-card));
}

/* 3. Border Beam Glow Animation */
.bento-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-brand), var(--color-success), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: border-beam-flow 3s linear infinite;
}

.bento-card:hover::before {
  opacity: 1;
}

@keyframes border-beam-flow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 4. Holographic Shine Effect for Badge Detail Pages */
.holographic-shine {
  position: relative;
  overflow: hidden;
}

.holographic-shine::after {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 55%
  );
  transform: rotate(-15deg);
  transition: transform 0.8s ease-in-out;
  pointer-events: none;
}

.badge-detail-open .holographic-shine::after {
  animation: holo-shine-sweep 1.8s ease-in-out forwards;
}

@keyframes holo-shine-sweep {
  0% {
    transform: translate(-30%, -30%) rotate(-15deg);
  }
  100% {
    transform: translate(30%, 30%) rotate(-15deg);
  }
}

/* Premium Brand Gradient Button */
.brand-gradient-btn {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-success) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(4, 169, 210, 0.2) !important;
  transition: all 0.3s ease !important;
}

.brand-gradient-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(4, 169, 210, 0.35) !important;
  filter: brightness(1.08);
}

.brand-gradient-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

/* 21st.dev / Shadcn inspired premium action button */
.premium-action-btn {
  position: relative;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  background-color: rgb(24, 24, 27) !important; /* zinc-900 */
  color: #f4f4f5 !important; /* zinc-100 */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important; /* subtle top border lip highlight */
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  outline: none !important;
}

.premium-action-btn:hover {
  background-color: rgb(39, 39, 42) !important; /* zinc-800 */
  border-color: rgba(4, 169, 210, 0.5) !important; /* subtle brand color glow on border */
  box-shadow: 0 0 12px 1px rgba(4, 169, 210, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-0.5px) !important;
}

.premium-action-btn:active {
  background-color: rgb(24, 24, 27) !important;
  transform: translateY(0.5px) !important;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

/* Each campaign award keeps a dedicated SVG frame; stars only track completed rounds. */
.honor-badge-hex-shell:has(.campaign-medal-stage-1) { --campaign-medal-frame: url("assets/badges/complete/rock-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-2) { --campaign-medal-frame: url("assets/badges/complete/iron-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-3) { --campaign-medal-frame: url("assets/badges/complete/copper-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-4) { --campaign-medal-frame: url("assets/badges/complete/bronze-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-5) { --campaign-medal-frame: url("assets/badges/complete/silver-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-6) { --campaign-medal-frame: url("assets/badges/complete/gold-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-7) { --campaign-medal-frame: url("assets/badges/complete/adamantine-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-8) { --campaign-medal-frame: url("assets/badges/complete/ophir-gold-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-9) { --campaign-medal-frame: url("assets/badges/complete/fire-gold-badge.svg?v=20260730_badge_vector_quality"); }
.honor-badge-hex-shell:has(.campaign-medal-stage-10) { --campaign-medal-frame: url("assets/badges/complete/new-jerusalem-badge.svg?v=20260730_badge_vector_quality"); }

.honor-badge-hex-shell:has([class*="campaign-medal-stage-"]) {
  aspect-ratio: 200 / 240;
  /* SVG already contains its own shadow. A second shell filter rasterizes the
     whole medallion and softens it when displayed on high-DPI screens. */
  filter: none;
}

.honor-badge-item--tile .honor-badge-hex-shell:has([class*="campaign-medal-stage-"]) {
  width: min(6.5rem, 100%);
  margin-bottom: 0.2rem;
}

.badge-strip__item .honor-badge-hex-shell--sm:has([class*="campaign-medal-stage-"]) {
  width: 3.15rem;
}

#badge-detail-hero .honor-badge-hex-shell--hero:has([class*="campaign-medal-stage-"]) {
  width: 7.5rem;
}

.honor-badge-hex-shell:has([class*="campaign-medal-stage-"]) .honor-badge-hex {
  opacity: 0;
  pointer-events: none;
}

.honor-badge-item:has([class*="campaign-medal-stage-"]) .honor-badge-item__title {
  display: none;
}

.honor-badge-item:has([class*="campaign-medal-stage-"]) .badge-stars {
  margin-top: 0.1rem;
}

.honor-badge-hex-shell:has([class*="campaign-medal-stage-"])::after {
  content: "";
  position: absolute;
  inset: -13%;
  z-index: 1;
  pointer-events: none;
  background: var(--campaign-medal-frame) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.28));
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.campaign-medal-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 240;
  object-fit: contain;
  image-rendering: auto;
}

#badge-detail-hero .campaign-medal-image {
  position: absolute;
  inset: -15%;
  width: 130%;
  max-width: none;
  height: 130%;
}

.campaign-medal-image.hidden {
  display: none;
}

.honor-badge-hex-shell:has([class*="campaign-medal-stage-"]) .honor-badge-hex {
  z-index: 1;
}

.honor-badge-hex-shell:has(.honor-badge-hex--locked[class*="campaign-medal-stage-"])::after {
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.08);
  opacity: 0.72;
}

.honor-badge-hex-shell--hero:has([class*="campaign-medal-stage-"])::after {
  inset: -15%;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
}

.honor-badge-hex-shell--hero:has(.honor-badge-hex--locked[class*="campaign-medal-stage-"])::after {
  filter: grayscale(1) saturate(0) brightness(0.7) contrast(1.08);
}

/* Campaign medal material is fixed by the award configured for each stage. */
.honor-badge-hex.campaign-medal-stage-1 {
  --badge-tone-top: #CBD5E1;
  --badge-tone-mid: #64748B;
  --badge-tone-deep: #1E293B;
  --badge-tone-icon: #F8FAFC;
  inset: 8%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28), inset 0 -5px 9px rgb(15 23 42 / 0.52);
}

.honor-badge-hex.campaign-medal-stage-2 {
  --badge-tone-top: #E5E7EB;
  --badge-tone-mid: #4B5563;
  --badge-tone-deep: #111827;
  --badge-tone-icon: #F9FAFB;
  inset: 7.5%;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.24), inset 0 -5px 10px rgb(3 7 18 / 0.58);
}

.honor-badge-hex.campaign-medal-stage-3 {
  --badge-tone-top: #FFD4B8;
  --badge-tone-mid: #C66A32;
  --badge-tone-deep: #6B2D16;
  --badge-tone-icon: #FFF1E8;
  inset: 7%;
  box-shadow: inset 0 0 0 1px rgb(255 239 226 / 0.45), inset 0 -5px 10px rgb(92 38 17 / 0.48);
}

.honor-badge-hex.campaign-medal-stage-4 {
  --badge-tone-top: #F4C39A;
  --badge-tone-mid: #9A4B20;
  --badge-tone-deep: #4E2411;
  --badge-tone-icon: #FFE8D2;
  inset: 6.5%;
  box-shadow: inset 0 0 0 2px rgb(255 226 197 / 0.38), inset 0 -5px 10px rgb(70 30 12 / 0.5);
}

.honor-badge-hex.campaign-medal-stage-5 {
  --badge-tone-top: #FFFFFF;
  --badge-tone-mid: #A8B3C4;
  --badge-tone-deep: #475569;
  --badge-tone-icon: #FFFFFF;
  inset: 6%;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.62), inset 0 -5px 11px rgb(51 65 85 / 0.42), 0 0 7px rgb(203 213 225 / 0.44);
}

.honor-badge-hex.campaign-medal-stage-6 {
  --badge-tone-top: #FFF4A8;
  --badge-tone-mid: #D99A08;
  --badge-tone-deep: #754000;
  --badge-tone-icon: #FFFBE6;
  inset: 5.5%;
  box-shadow: inset 0 0 0 2px rgb(255 245 170 / 0.66), inset 0 -5px 11px rgb(105 55 0 / 0.44), 0 0 8px rgb(217 154 8 / 0.4);
}

.honor-badge-hex.campaign-medal-stage-7 {
  --badge-tone-top: #FFFCE0;
  --badge-tone-mid: #F0C93D;
  --badge-tone-deep: #98630A;
  --badge-tone-icon: #FFFFFF;
  inset: 5%;
  box-shadow: inset 0 0 0 2px rgb(255 255 231 / 0.76), inset 0 -5px 12px rgb(128 82 7 / 0.42), 0 0 10px rgb(240 201 61 / 0.48);
}

.honor-badge-hex.campaign-medal-stage-8 {
  --badge-tone-top: #FFF0A3;
  --badge-tone-mid: #C88A09;
  --badge-tone-deep: #5E3500;
  --badge-tone-icon: #FFF8D6;
  inset: 4.5%;
  box-shadow: inset 0 0 0 2px rgb(255 240 163 / 0.72), inset 0 -6px 12px rgb(84 43 0 / 0.5), 0 0 11px rgb(200 138 9 / 0.5);
}

.honor-badge-hex.campaign-medal-stage-9 {
  --badge-tone-top: #FFF1A8;
  --badge-tone-mid: #E18113;
  --badge-tone-deep: #8C2505;
  --badge-tone-icon: #FFF8DC;
  inset: 4%;
  box-shadow: inset 0 0 0 2px rgb(255 241 168 / 0.74), inset 0 -6px 13px rgb(118 31 3 / 0.52), 0 0 13px rgb(225 94 19 / 0.58);
}

.honor-badge-hex.campaign-medal-stage-10 {
  --badge-tone-top: #FFFFFF;
  --badge-tone-mid: #DCCBFF;
  --badge-tone-deep: #7C6BC7;
  --badge-tone-icon: #FFFFFF;
  inset: 3.5%;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.82), inset 0 -6px 14px rgb(73 55 139 / 0.42), 0 0 16px rgb(124 107 199 / 0.58);
}

.honor-badge-hex[class*="campaign-medal-stage-"]::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: 0;
  border: 2px solid rgb(255 255 255 / 0.42);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  pointer-events: none;
}

.honor-badge-hex-shell:has(.campaign-medal-stage-1)::before { background: #94A3B8; }
.honor-badge-hex-shell:has(.campaign-medal-stage-2)::before { background: #6B7280; }
.honor-badge-hex-shell:has(.campaign-medal-stage-3)::before { background: #E39A67; }
.honor-badge-hex-shell:has(.campaign-medal-stage-4)::before { background: #B86A3A; }
.honor-badge-hex-shell:has(.campaign-medal-stage-5)::before { background: #E2E8F0; }
.honor-badge-hex-shell:has(.campaign-medal-stage-6)::before { background: #FFE27A; }
.honor-badge-hex-shell:has(.campaign-medal-stage-7)::before { background: #FFF3A3; }
.honor-badge-hex-shell:has(.campaign-medal-stage-8)::before { background: #E8B43F; }
.honor-badge-hex-shell:has(.campaign-medal-stage-9)::before { background: #F3A132; }
.honor-badge-hex-shell:has(.campaign-medal-stage-10)::before { background: #E9DDFF; }

.honor-badge-hex--locked[class*="campaign-medal-stage-"] {
  color: var(--color-icon-muted);
  background-color: var(--badge-gloss-locked-mid);
  background-image:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.18) 0%, transparent 58%),
    radial-gradient(circle, var(--badge-gloss-locked-dot) 0.75px, transparent 0.75px),
    linear-gradient(155deg, var(--badge-gloss-locked-top) 0%, var(--badge-gloss-locked-mid) 55%, var(--badge-gloss-locked-deep) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 6px var(--badge-gloss-locked-shadow);
}

.honor-badge-hex-shell:has(.honor-badge-hex--locked[class*="campaign-medal-stage-"])::before,
#badge-detail-hero .honor-badge-hex-shell:has(.honor-badge-hex--locked[class*="campaign-medal-stage-"])::before {
  background: var(--badge-gloss-locked-mid);
}

#badge-detail-hero .honor-badge-hex--unlocked[class*="campaign-medal-stage-"] {
  color: var(--badge-tone-icon);
  background-image:
    radial-gradient(circle at 50% 34%, rgb(255 255 255 / 0.32) 0%, transparent 58%),
    radial-gradient(circle, rgb(255 255 255 / 0.28) 0.85px, transparent 0.85px),
    linear-gradient(155deg, var(--badge-tone-top) 0%, var(--badge-tone-mid) 44%, var(--badge-tone-deep) 100%);
  box-shadow: inherit;
}

#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-1)::before { background: #94A3B8; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-2)::before { background: #6B7280; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-3)::before { background: #E39A67; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-4)::before { background: #B86A3A; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-5)::before { background: #E2E8F0; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-6)::before { background: #FFE27A; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-7)::before { background: #FFF3A3; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-8)::before { background: #E8B43F; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-9)::before { background: #F3A132; }
#badge-detail-hero .honor-badge-hex-shell:has(.campaign-medal-stage-10)::before { background: #E9DDFF; }

#badge-detail-hero .honor-badge-hex-shell:has(.honor-badge-hex--locked[class*="campaign-medal-stage-"])::before {
  background: var(--badge-gloss-locked-mid);
}

/* Congratulations Medal Modal Styles */
.congrats-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.congrats-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  padding: 2.5rem;
  width: 90%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.congrats-confetti-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0.6;
}

.congrats-confetti-p1 {
  position: absolute; width: 8px; height: 8px; background: #fbbf24; border-radius: 50%; top: 10%; left: 15%; animation: float 3s infinite ease-in-out;
}
.congrats-confetti-p2 {
  position: absolute; width: 6px; height: 12px; background: #6366f1; transform: rotate(45deg); top: 20%; right: 20%; animation: float 4s infinite ease-in-out 1s;
}
.congrats-confetti-p3 {
  position: absolute; width: 10px; height: 10px; background: #ec4899; transform: rotate(15deg); bottom: 15%; left: 25%; animation: float 3.5s infinite ease-in-out 0.5s;
}
.congrats-confetti-p4 {
  position: absolute; width: 8px; height: 8px; background: var(--color-success); border-radius: 50%; bottom: 25%; right: 15%; animation: float 4.5s infinite ease-in-out 1.5s;
}

.congrats-medal-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 8px 16px rgba(251, 191, 36, 0.35));
  animation: pulseMedal 2s infinite ease-in-out;
}

.congrats-svg-ribbon-left {
  fill: #ef4444;
}

.congrats-svg-ribbon-right {
  fill: #3b82f6;
}

.congrats-svg-glow-ring {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 4;
  stroke-dasharray: 6,3;
}

.congrats-svg-gold-circle {
  fill: url(#goldGradient);
  stroke: #f59e0b;
  stroke-width: 1.5;
}

.congrats-svg-inner-circle {
  fill: none;
  stroke: #d97706;
  stroke-width: 1;
  opacity: 0.3;
}

.congrats-svg-star {
  fill: #fff;
}

.congrats-stop-1 {
  stop-color: #fef08a;
}

.congrats-stop-2 {
  stop-color: #f59e0b;
}

.congrats-stop-3 {
  stop-color: #b45309;
}

.congrats-upgrade-btn {
  width: 100%;
  /* The second gradient stop used to reference a hover token that was never
     declared anywhere in this file. An unresolvable var() with no fallback
     makes the WHOLE `background` shorthand invalid, so the browser dropped
     it entirely — the button rendered fully transparent. That's invisible
     in light theme (white #fff text sitting on the white
     .congrats-modal-box background behind it) but happened to still read
     fine in dark theme (dark modal background behind it), which is why
     this only got reported for light mode. */
  background: linear-gradient(135deg, var(--primary-color), var(--color-brand-hover));
  border: none;
  border-radius: 12px;
  padding: 0.85rem;
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.congrats-later-btn {
  width: 100%;
  background: var(--bg-card-active);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.congrats-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.congrats-desc-primary {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.congrats-desc-secondary {
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.congrats-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.congrats-inline-banner {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.congrats-banner-btn {
  margin-top: 0.5rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.88rem;
  /* Same fix as .congrats-upgrade-btn above — the removed second gradient
     stop was never a defined token, which invalidated this whole
     `background` shorthand and made the button transparent. */
  background: linear-gradient(135deg, var(--primary-color), var(--color-brand-hover));
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}


.plan-persistent-upgrade-entry {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
  background: var(--color-brand-muted);
}

.plan-persistent-upgrade-entry[hidden],
.plan-persistent-upgrade-entry.hidden {
  display: none !important;
}

.plan-persistent-upgrade-entry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--primary-color);
  background: var(--bg-card);
}

.plan-persistent-upgrade-entry__copy {
  display: grid;
  flex: 1 1 auto;
  gap: 0.2rem;
  min-width: 0;
}

.plan-persistent-upgrade-entry__copy strong {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}

.plan-persistent-upgrade-entry__copy span {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.plan-persistent-upgrade-entry__action {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .plan-persistent-upgrade-entry {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .plan-persistent-upgrade-entry__copy {
    flex-basis: calc(100% - 3.3rem);
  }

  .plan-persistent-upgrade-entry__action {
    width: 100%;
  }
}
/* The upgrade decision blocks the progress page until scheduling has finished. */
.plan-upgrade-gate {
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
}

.plan-upgrade-gate__panel {
  max-width: 420px;
}

.plan-upgrade-gate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
}

.plan-upgrade-gate__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}

.plan-upgrade-gate__status {
  min-height: 1.4rem;
  margin: -0.65rem 0 1rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.plan-upgrade-gate__status.is-error {
  color: var(--color-danger);
}

.plan-upgrade-gate .congrats-upgrade-btn:disabled,
.plan-upgrade-gate .congrats-later-btn:disabled {
  cursor: wait;
  opacity: 0.55;
}

.plan-upgrade-gate.is-busy .plan-upgrade-gate__icon {
  animation: planUpgradePulse 1.1s ease-in-out infinite;
}

@keyframes planUpgradePulse {
  50% { transform: scale(1.06); opacity: 0.75; }
}

/* Keep reporting and global navigation out of the inline reading surface.
   The inline previous/next chapter controls remain available. */
body.plan-inline-reader-open .issue-report-fab,
body.plan-inline-reader-open .mobile-nav-bar {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Admin campaign round editor */
.campaign-rule-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.6rem;
}

.campaign-rule-section-heading h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
}

.campaign-rule-section-heading p {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.campaign-rule-section-heading--schedule {
  margin-top: 1.25rem;
}

.campaign-add-stage-btn {
  min-height: 40px;
  padding: 0.55rem 0.85rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.campaign-editor-table {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-color: var(--border-card) transparent;
}

.campaign-stage-columns,
.campaign-stage-row {
  display: grid;
  grid-template-columns: 64px minmax(180px, 1.35fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(190px, 1.1fr) minmax(150px, 1fr) 48px;
  gap: 0.45rem;
  min-width: 1080px;
  align-items: center;
}

.campaign-segment-columns,
.campaign-segment-row {
  display: grid;
  grid-template-columns: 64px 130px minmax(155px, 1fr) minmax(155px, 1fr) minmax(330px, 2.2fr);
  gap: 0.45rem;
  min-width: 900px;
  align-items: center;
}

.campaign-stage-columns,
.campaign-segment-columns {
  padding: 0 0.2rem 0.4rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}

#campaign-stage-rows,
#campaign-segment-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.campaign-stage-row,
.campaign-segment-row {
  padding: 0.45rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-input);
}

.campaign-stage-row .form-control,
.campaign-segment-row .form-control {
  min-width: 0;
  background: var(--bg-card);
}

.campaign-stage-remove {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.campaign-stage-remove:hover {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
}

.campaign-stage-remove:active {
  transform: scale(0.96);
}

.campaign-stage-remove:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 720px) {
  .campaign-rule-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-add-stage-btn {
    width: 100%;
  }
}

/* Admin feature availability controls */
.admin-feature-settings-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-feature-settings-card__copy {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.admin-feature-settings-card__copy .card-title,
.admin-feature-settings-card__copy p {
  margin: 0;
}

.admin-feature-settings-card__copy p {
  margin-top: 0.3rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.admin-feature-settings-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: var(--color-brand-muted);
  color: var(--color-icon-brand);
}

.admin-feature-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-input);
}

.admin-feature-setting-row__label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.admin-feature-setting-row__label strong {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 500;
}

.admin-feature-setting-row__label span,
/* React report manager follows the active app theme instead of forcing dark slate. */
#admin-reports-root .admin-report-view {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow-md) !important;
}

#admin-reports-root .admin-report-view [class~="bg-slate-950"],
#admin-reports-root .admin-report-view [class*="bg-slate-950/"],
#admin-reports-root .admin-report-view [class~="bg-slate-900"],
#admin-reports-root .admin-report-view [class*="bg-slate-900/"],
#admin-reports-root .admin-report-view [class~="bg-slate-800"],
#admin-reports-root .admin-report-view [class*="bg-slate-800/"] {
  background-color: var(--bg-input) !important;
}

#admin-reports-root .admin-report-view [class*="bg-slate-950/80"] {
  background-color: color-mix(in srgb, var(--color-black) 55%, transparent) !important;
}

#admin-reports-root .admin-report-view [class~="text-slate-100"] {
  color: var(--text-primary) !important;
}

#admin-reports-root .admin-report-view [class~="text-slate-200"],
#admin-reports-root .admin-report-view [class~="text-slate-300"] {
  color: var(--text-secondary) !important;
}

#admin-reports-root .admin-report-view [class~="text-slate-400"],
#admin-reports-root .admin-report-view [class~="text-slate-500"] {
  color: var(--text-muted) !important;
}

#admin-reports-root .admin-report-view [class~="border-slate-800"],
#admin-reports-root .admin-report-view [class~="border-slate-700"],
#admin-reports-root .admin-report-view [class~="border-slate-600"],
#admin-reports-root .admin-report-view [class*="divide-slate-800"] {
  border-color: var(--border-card) !important;
}

#admin-reports-root .admin-report-view table,
#admin-reports-root .admin-report-view tbody,
#admin-reports-root .admin-report-view tr {
  background-color: transparent;
  color: var(--text-primary);
}

#admin-reports-root .admin-report-view thead {
  background-color: color-mix(in srgb, var(--text-primary) 5%, var(--bg-card)) !important;
  color: var(--text-secondary) !important;
}

#admin-reports-root .admin-report-view tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-brand) 6%, var(--bg-card)) !important;
}

#admin-reports-root .admin-report-view select,
#admin-reports-root .admin-report-view textarea {
  color-scheme: light;
}

body.dark-theme #admin-reports-root .admin-report-view select,
body.dark-theme #admin-reports-root .admin-report-view textarea {
  color-scheme: dark;
}

.admin-feature-setting-feedback {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}

.feature-switch {
  position: relative;
  width: 48px;
  height: 28px;
  min-width: 48px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.feature-switch[aria-checked="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.feature-switch:disabled {
  cursor: wait;
  opacity: 0.55;
}

.feature-switch:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.feature-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}

.feature-switch[aria-checked="true"] .feature-switch__thumb {
  transform: translateX(20px);
}

.admin-feature-setting-feedback {
  margin: -0.25rem 0 0;
  color: var(--color-danger);
}

/* ── Custom App Confirm Dialog ────────────────────────────── */
.custom-confirm-overlay {
  background: rgba(15, 15, 15, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.dark-theme .custom-confirm-overlay {
  background: rgba(0, 0, 0, 0.64);
}
.custom-confirm-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  width: 100%;
  max-width: 340px;
  padding: 24px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 22%);
  transform: scale(0.9);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.custom-confirm-overlay.active .custom-confirm-card {
  transform: scale(1);
}
.custom-confirm-title {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}
.custom-confirm-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.custom-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}
.custom-confirm-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.custom-confirm-actions button:active {
  transform: scale(0.97);
}

/* ── Custom Elegant Scrollbars (App-like) ────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
}
@media (max-width: 640px) {
  /* Hide scrollbars on mobile layout for cleaner App appearance */
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
/* ─── App-Style Grouped Settings List (Shadcn & 21st.dev Inspired) ─── */
.app-settings-group {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.app-settings-group__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0 0.25rem;
}

.app-settings-group__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
}

.app-settings-group__header-text h3 {
  color: var(--text-primary);
  font-weight: var(--type-weight-strong);
  font-size: 0.875rem;
}

.app-settings-group__header-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.app-settings-group__header-text p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* 列表容器：合併成一個圓角卡片，並加上邊框與背景 */
.app-settings-list {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

/* 列表項目 */
.app-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  text-decoration: none;
  background: transparent;
  transition: var(--transition-smooth);
  border: none;
  border-bottom: 1px solid var(--border-default);
  outline: none;
}

.app-settings-item:last-child {
  border-bottom: none;
}

.app-settings-item:hover {
  background: color-mix(in srgb, var(--color-brand) 5%, var(--bg-card));
  text-decoration: none;
}

.app-settings-item:active {
  transform: scale(0.995);
  background: color-mix(in srgb, var(--color-brand) 10%, var(--bg-card));
}

.app-settings-item__leading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

/* 左側圖示裝飾背景 */
.app-settings-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.app-settings-icon-wrap--brand {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

.app-settings-icon-wrap--neutral {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-secondary);
}

.app-settings-icon-wrap--danger {
  background: rgba(252, 54, 90, 0.12);
  color: var(--color-danger);
}

/* 設定文字區域 */
.app-settings-item__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  min-width: 0;
}

.app-settings-item__title {
  font-size: 0.9rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
  line-height: 1.25;
}

.app-settings-item__subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-settings-item__chevron {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

/* 登出特殊樣式 */
.app-settings-item--danger:hover {
  background: var(--color-danger-subtle);
}

.app-settings-item--danger:active {
  background: color-mix(in srgb, var(--color-danger) 16%, var(--bg-card));
}

.text-danger {
  color: var(--color-danger-foreground) !important;
}

.text-danger-muted {
  color: var(--color-danger-muted) !important;
}

.profile-settings-logout {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.profile-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.25;
  color: var(--color-danger-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.profile-logout-btn:hover {
  color: var(--color-danger-foreground);
  background: var(--color-danger-subtle);
}

.profile-logout-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent);
}

.profile-logout-btn .nlc-icon {
  color: currentColor;
}

/* Onboarding alert state for the Member Hub card when user needs to setup pastoral structure */
.app-settings-group__header.member-hub-profile-card--needs-org {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--border-card));
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}

.app-settings-group__header.member-hub-profile-card--needs-org .app-settings-group__header-icon {
  color: var(--color-warning);
}

/* ─── Profile Segmented Tabs Switcher (iOS / Shadcn UI style) ─── */
.profile-tabs-list {
  display: flex;
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 3px;
  margin: 1rem 0 1.25rem 0;
  gap: 2px;
}

.profile-tab-trigger {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  border-radius: calc(var(--radius-md) - 3px);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: var(--transition-smooth);
  outline: none;
}

.profile-tab-trigger:hover {
  color: var(--text-primary);
}

.profile-tab-trigger.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.profile-tab-content.hidden {
  display: none !important;
}

.profile-preferences-group {
  margin-bottom: 1rem;
}

.profile-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.25rem 0;
}

.profile-theme-option {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.profile-theme-option.active {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
  color: var(--text-primary);
}

.profile-theme-option__swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(100, 116, 139, 0.32);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.16);
}

.profile-theme-option__swatch--light { background: #ffffff; }
.profile-theme-option__swatch--dark { background: #1e293b; }

/* Plan cards: one card, clear hierarchy, stable action area */
.plan-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.plan-card:hover {
  border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-card));
  box-shadow: var(--shadow-md);
}

.plan-card:active {
  transform: scale(0.997);
}

.plan-cover-thumbnail {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1px solid color-mix(in srgb, var(--border-card) 88%, transparent) !important;
  border-radius: 8px !important;
  color: var(--color-black);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.plan-cover-thumbnail--icon {
  font-size: 0.9rem !important;
}

.plan-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.plan-card__header {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.plan-card__eyebrow {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.25;
}

.plan-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.02rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

.plan-card__meta span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0.05rem 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}

.plan-card__status {
  display: grid;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.plan-card__status-row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.plan-card__status-row .nlc-icon {
  margin-top: 0.08rem;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.plan-card__status-row--brand,
.plan-card__status-row--brand .nlc-icon {
  color: var(--primary-color);
}

.plan-card__status-row--success,
.plan-card__status-row--success .nlc-icon {
  color: var(--color-success-foreground);
}

.plan-card__status-row--warning,
.plan-card__status-row--warning .nlc-icon {
  color: var(--color-warning);
}

.plan-card__status-row--danger,
.plan-card__status-row--danger .nlc-icon {
  color: var(--color-danger);
}

.plan-card__status-label {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.plan-card__status-value {
  min-width: 0;
}

.plan-card__actions,
.plan-card-team-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.plan-card__primary-action,
.plan-card__secondary-action {
  min-height: 2.25rem;
  margin: 0;
  padding: 0.46rem 0.7rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.plan-card .primary-btn::after {
  content: none;
}

.plan-card__primary-action,
.plan-card .primary-btn.plan-card-action-btn {
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--color-white);
  box-shadow: none;
}

.plan-card__secondary-action,
.plan-card .secondary-btn.plan-card-action-btn {
  border: 1px solid color-mix(in srgb, var(--primary-color) 45%, var(--border-card));
  background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-card));
  color: var(--primary-color);
  box-shadow: none;
}

.plan-card__primary-action:hover,
.plan-card__secondary-action:hover,
.plan-card .primary-btn.plan-card-action-btn:hover,
.plan-card .secondary-btn.plan-card-action-btn:hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card));
  box-shadow: none;
  transform: none;
}

.plan-card__primary-action:hover,
.plan-card .primary-btn.plan-card-action-btn:hover {
  background: var(--primary-color);
  color: var(--color-white);
}

.plan-card__primary-action:focus-visible,
.plan-card__secondary-action:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}

.plan-card-team-controls {
  gap: 0.35rem;
  margin-top: -0.1rem;
}

@media (max-width: 640px) {
  .plan-card {
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
  }

  .plan-card__main {
    gap: 0.65rem;
  }

  .plan-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-card--available .plan-card__actions,
  .plan-card--available-upcoming .plan-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-card__primary-action,
  .plan-card__secondary-action {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }
}

.plan-team-invite-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-card);
}

.plan-team-invite-shortcut__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.plan-team-invite-shortcut__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  flex: 0 0 auto;
}

.plan-team-invite-shortcut__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.plan-team-invite-shortcut__copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.plan-team-invite-shortcut__copy span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.plan-team-invite-shortcut__action,
.plan-card-action-btn {
  min-height: 44px;
  white-space: normal;
}

.plan-card-participation-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.65rem;
}

.plan-card-action-btn {
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .plan-team-invite-shortcut {
    align-items: stretch;
    flex-direction: column;
  }

  .plan-team-invite-shortcut__action {
    width: 100%;
    justify-content: center;
  }

  .plan-card-participation-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .plan-card-action-btn {
    width: 100%;
    justify-content: center;
  }
}

.plan-card {
  --plan-card-spacing: 0.75rem;
}

.plan-card-participation-slot {
  margin-top: 0.25rem;
  min-width: 0;
}

/* Light Item row — NOT a nested card: a hairline divider separates it from the
   card body above, with no inner border, fill, or card radius. */
.plan-card-participation-item {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  margin-top: 0.5rem;
  min-width: 0;
  padding-top: 0.625rem;
}

.plan-card-participation-item__media {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-radius: var(--radius-sm);
  color: var(--primary-color);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.plan-card-participation-item__content {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.plan-card-participation-item__title {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.plan-card-participation-item__description {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card-participation-item__actions {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 0;
}

.plan-card-participation-item__button {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.625rem;
  white-space: nowrap;
}

.plan-card-participation-item__button:hover,
.plan-card-participation-item__button:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--primary-color) 26%, var(--border-card));
}

.plan-card-participation-item__button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}

.plan-card-participation-item--success .plan-card-participation-item__media {
  background: color-mix(in srgb, var(--color-success-foreground) 10%, transparent);
  color: var(--color-success-foreground);
}

.plan-card-participation-item__hint {
  color: var(--text-secondary);
  display: block;
  font-size: 0.875rem;
  padding: 0.375rem 0;
}

.plan-card-participation-item__hint--danger {
  color: var(--color-danger);
}

@media (max-width: 640px) {
  .plan-card-participation-item {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .plan-card-participation-item__actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .plan-card-participation-item__button {
    min-height: 2rem;
  }
}

/* ==================== 🔔 Notification Bell & Dropdown CSS ==================== */
.notification-bell-badge {
  position: absolute;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  background-color: var(--color-danger, #FC365A);
  border: 2px solid var(--bg-header, #12121e);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(252, 54, 90, 0.2);
  pointer-events: none;
}

.notification-bell-badge[hidden] {
  display: none;
}

#btn-notification-bell,
.notification-menu-container {
  overflow: visible;
}

.notification-popover {
  position: absolute;
  top: 48px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-card);
  border-radius: var(--popover-radius);
  box-shadow: var(--popover-shadow);
  display: flex;
  flex-direction: column;
  z-index: var(--z-dropdown);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.notification-popover.hidden {
  display: none !important;
}

.notification-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--popover-padding);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
}

.notification-popover__title {
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  color: var(--text-primary);
}

.notification-popover__read-all-btn {
  background: transparent;
  border: none;
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.notification-popover__read-all-btn:hover {
  background: var(--color-brand-subtle);
}

.notification-popover__content {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem 0;
  background: transparent;
}

.notification-popover__empty {
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Individual Notification Item */
.notification-item {
  display: flex;
  flex-direction: column;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-popover) 40%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background-color: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.notification-item--unread {
  background-color: var(--color-brand-muted);
}

.notification-item--unread::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-brand);
  border-radius: 50%;
}

.notification-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.notification-item__sender {
  font-weight: var(--type-weight-strong);
  color: var(--text-secondary);
}

.notification-item__time {
  font-size: 0.875rem;
}

.notification-item__body {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-primary, #f4f4f5);
  margin: 0;
  word-break: break-all;
}

.release-onboarding-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 700);
}

.release-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.release-onboarding-dialog {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, 34rem);
  max-height: min(88dvh, 42rem);
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: var(--shadow-up-lg, 0 -10px 24px rgba(0, 0, 0, 0.18));
  padding: 1.1rem;
}

.release-onboarding-dialog__close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

.release-onboarding-dialog__close:focus-visible,
.release-onboarding-action__button:focus-visible,
.release-onboarding-dialog__footer-btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}

.release-onboarding-dialog__header {
  padding-right: 2.25rem;
}

.release-onboarding-dialog__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.release-onboarding-dialog__title {
  margin: 0 2rem 0.75rem 0;
  font-size: 1.25rem;
  line-height: 1.35;
}

.release-onboarding-dialog__body {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.release-onboarding-dialog__actions {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.release-onboarding-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-card));
}

.release-onboarding-action__icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

.release-onboarding-action__content {
  min-width: 0;
}

.release-onboarding-action__content h3 {
  margin: 0 0 0.25rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  line-height: 1.35;
}

.release-onboarding-action__content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}

.release-onboarding-action__button {
  grid-column: 2;
  justify-self: start;
  min-height: 2.25rem;
  margin-top: 0.25rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--primary-color);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}

.release-onboarding-install-guide {
  grid-column: 1 / -1;
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 45%, var(--border-card));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-card));
  color: var(--text-primary);
}

.release-onboarding-install-guide:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}

.release-onboarding-install-guide[hidden] {
  display: none;
}

.release-onboarding-install-guide strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
}

.release-onboarding-install-guide__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.release-onboarding-install-guide__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 1.35rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
}

.release-onboarding-install-guide p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.release-onboarding-install-guide__status {
  margin: 0.55rem 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}

.release-onboarding-install-guide__status[hidden] {
  display: none;
}

.release-onboarding-install-guide__steps {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.release-onboarding-install-guide__steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  min-height: 2rem;
  line-height: 1.45;
}

.release-onboarding-install-guide__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-card));
  color: var(--primary-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.release-onboarding-install-guide__step-icon svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.release-onboarding-install-guide__support {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.release-onboarding-install-guide__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}

.release-onboarding-install-guide__links a {
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  text-decoration: none;
}

.release-onboarding-install-guide__links a:hover {
  text-decoration: underline;
}

.release-onboarding-install-guide__links a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.release-onboarding-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.release-onboarding-dialog__footer {
  margin-top: 0.8rem;
  justify-content: space-between;
}

.release-onboarding-dialog__footer-btn {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.45rem 0.2rem;
}

@media (min-width: 768px) {
  .release-onboarding-dialog {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    border-bottom: 1px solid var(--border-card);
    border-radius: 8px;
    box-shadow: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.22));
    padding: 1.25rem;
  }
}

/* Mobile form control font-size safety net */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select,
.form-control,
.reader-search-input,
#plan-search-input,
.inline-select,
.reader-select-compact,
.announcement-form-panel__input,
.announcement-form-panel__textarea,
.devotional-textarea,
.member-search-wrapper input {
  font-size: var(--form-control-text-size);
}


/* Management information architecture */
.admin-primary-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  max-width: 32rem;
  margin: 0 auto 1.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-input);
}

.admin-primary-tab {
  min-height: 2.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.admin-primary-tab.active {
  background: var(--bg-card);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.admin-plan-management {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-plan-feature-menu {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 3px solid var(--color-brand);
}

.admin-plan-feature-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-plan-feature-menu__header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 500;
}

.admin-plan-feature-menu__header p {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.admin-plan-feature-menu__hint {
  flex: 0 0 auto;
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 500;
}

.admin-plan-feature-menu .admin-plan-subtabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.admin-plan-feature-menu .admin-plan-subtab {
  justify-content: center;
  min-width: 0;
  min-height: 3rem;
  border: 1px solid transparent;
  white-space: normal;
  text-align: center;
}

.admin-plan-feature-menu .admin-plan-subtab:not(.active) {
  border-color: var(--border-card);
  background: var(--bg-card);
}

.admin-plan-feature-menu .admin-plan-subtab.active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.admin-plan-subtabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-input);
  overflow-x: auto;
  scrollbar-width: none;
}

/* Below this width the tab labels (icon + Chinese text × 4-5 tabs) reliably
   overflow, so fading the trailing edge is a safe static hint that there's
   more to swipe to. Skipped above it so a fully-visible tab set on wider
   screens doesn't show a fade that isn't actually hiding anything. */
@media (max-width: 900px) {
  .admin-plan-subtabs {
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 2rem), transparent 100%);
  }
}

.admin-plan-subtabs::-webkit-scrollbar {
  display: none;
}

.admin-plan-subtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.admin-plan-subtab .nlc-icon {
  font-size: 1rem;
}

.admin-plan-subtab.active {
  background: var(--bg-card);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.admin-plan-subtab-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Clears the fixed .issue-report-fab (bottom-right chat bubble), which
     otherwise sits on top of whatever this panel's last row scrolls to. */
  padding-bottom: calc(3.5rem + var(--app-bottom-nav-height, 72px) + var(--app-safe-bottom, 0px) + 1.5rem);
}

.admin-plan-filter-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-plan-filter-card label {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.admin-plan-filter-card select {
  min-width: 0;
  max-width: 32rem;
}

.admin-plan-filter-card--org {
  align-items: flex-start;
}

.admin-plan-filter-disclosure {
  flex: 1;
  min-width: 0;
}

.admin-plan-filter-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.admin-plan-filter-summary::-webkit-details-marker {
  display: none;
}

.admin-plan-filter-summary > span:first-child {
  color: var(--color-brand);
  flex-shrink: 0;
}

#admin-plan-filter-summary-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-plan-filter-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.admin-plan-filter-disclosure[open] .admin-plan-filter-chevron {
  transform: rotate(90deg);
}

.admin-plan-filter-disclosure[open] .admin-plan-filter-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#admin-plan-org-filter-slot {
  padding: 0.7rem 0.1rem 0.1rem;
}

.admin-plan-refresh-btn {
  flex-shrink: 0;
  padding: 0.55rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.875rem;
}

.admin-unjoined-plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-card);
}

.admin-unjoined-plan-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-unjoined-plan-card__header p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.admin-unjoined-plan-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex: 0 0 auto;
}

#admin-unjoined-plan-invite-all {
  min-width: 7.5rem;
  white-space: nowrap;
}

#admin-unjoined-plan-invite-all:disabled {
  cursor: default;
  opacity: 0.65;
}

.admin-unjoined-plan-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--color-brand-muted);
  color: var(--primary-color);
  padding: 0.3rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.admin-unjoined-plan-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.65rem;
}

.admin-unjoined-plan-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-input);
}

.admin-unjoined-plan-member__identity {
  flex: 1;
  min-width: 0;
}

.admin-unjoined-plan-member__name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-unjoined-plan-member__scope {
  overflow: hidden;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-joined-plan-member__meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.admin-plan-invite-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-plan-invite-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.admin-unjoined-plan-empty {
  grid-column: 1 / -1;
  padding: 1.25rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 640px) {
  .admin-plan-feature-menu {
    gap: 0.75rem;
  }

  .admin-plan-feature-menu__hint {
    display: none;
  }

  .admin-plan-feature-menu .admin-plan-subtabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .admin-plan-feature-menu .admin-plan-subtab {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.55rem 0.65rem;
  }

  .admin-unjoined-plan-card__header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-unjoined-plan-card__actions {
    justify-content: space-between;
    width: 100%;
  }
}
.admin-management-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-management-section__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 500;
}

.admin-team-status-disclosure > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.admin-team-status-disclosure > summary .card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.admin-team-status-disclosure > summary .nlc-icon {
  color: var(--primary-color);
}

.admin-team-status-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.admin-team-status-disclosure > div {
  margin-top: 1.2rem;
}

@media (max-width: 640px) {
  .admin-plan-filter-card {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-plan-filter-card select {
    width: 100%;
    max-width: none;
  }

  /* The collapsible org-filter trigger truncates its own text via ellipsis,
     so — unlike the plain "計畫篩選" label+select card above — it stays
     paired with the refresh button in one row instead of stacking. */
  .admin-plan-filter-card--org {
    flex-direction: row;
    align-items: flex-start;
  }

  #admin-plan-org-filter-slot .admin-daily-quiz-scope-row,
  #members-organization-controls {
    flex-direction: column;
    align-items: stretch;
  }

  #members-organization-controls select {
    width: 100%;
    max-width: none;
  }
}


/* Spacing between 6-person team card and pastoral ranking card */
.pastoral-ranking-card {
  margin-top: 1.2rem;
}
#reader-view .bible-verse.reader-start-selected {
  position: relative;
  outline: 2px solid var(--color-brand) !important;
  outline-offset: -2px;
  border-radius: 8px !important;
}

#reader-view .bible-verse.reader-start-selected::after {
  content: "朗讀起點";
  display: none !important;
}

#reader-view .bible-verse.reader-start-selected:focus-visible {
  outline-width: 3px !important;
}

/* Long-press multi-verse range selection (copy/share) — must stay visually
   distinct from .reader-start-selected (outline) and .speaking-highlight
   (blue bg + left border) so the three states never look ambiguous */
#reader-view .bible-verse.multi-selected {
  background-color: color-mix(in srgb, var(--color-brand) 14%, transparent) !important;
  outline: 1px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
  outline-offset: -1px;
  border-radius: var(--radius-sm, 8px);
}

.youversion-action-bar--multi .yv-section-label {
  font-weight: var(--type-weight-medium, 500);
}

.youversion-action-bar .yv-multi-cancel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.youversion-action-bar .yv-multi-cancel-button:hover,
.youversion-action-bar .yv-multi-cancel-button:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 20%, var(--border-card));
  color: var(--text-primary);
}

/* Sticky Bottom Context Action Bar for Verse Selection, Highlighter, Copy & Share */
.context-toolbar {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 990;
  width: calc(100% - 2rem);
  max-width: 480px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.15));
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  padding: 0.75rem 1rem;
}

.context-toolbar.active {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.context-toolbar.hidden {
  display: none !important;
}

.context-toolbar .toolbar-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.context-toolbar .toolbar-palette {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.context-toolbar .palette-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
}

.context-toolbar .color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.context-toolbar .color-dot-yellow { background-color: #fef08a; }
.context-toolbar .color-dot-green { background-color: #bbf7d0; }
.context-toolbar .color-dot-pink { background-color: #fbcfe8; }
.context-toolbar .color-dot-blue { background-color: #bfdbfe; }

.context-toolbar .color-dot:hover {
  transform: scale(1.2);
}

.context-toolbar .clear-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}

.context-toolbar .clear-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.context-toolbar .toolbar-actions-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.1));
}

.context-toolbar .toolbar-action-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.15));
  background: var(--bg-surface, rgba(255, 255, 255, 0.05));
  color: var(--text-primary, #f8fafc);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.context-toolbar .toolbar-action-pill:hover {
  background: var(--color-brand-subtle, rgba(4, 169, 210, 0.15));
  color: var(--color-brand, #04A9D2);
}

.context-toolbar .toolbar-action-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.context-toolbar .toolbar-action-close:hover {
  color: var(--text-primary, #ffffff);
}

/* Bible Verse Selection & Highlighter Separation */
.bible-verse.selected {
  outline: 2px solid var(--color-brand, #04A9D2) !important;
  outline-offset: -1px;
  border-radius: 8px !important;
}

/* Preset and user-defined verse highlights share the same theme-aware rendering. */
#reader-view .bible-verse[data-highlight],
.bible-verse[data-highlight] {
  background-color: color-mix(in srgb, var(--verse-highlight-color, #fef08a) 65%, transparent) !important;
  border-radius: 4px;
}

.profile-settings-section-label {
  padding: 0 0.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.02em;
}

[data-theme="dark"] #reader-view .bible-verse[data-highlight],
[data-theme="dark"] .bible-verse[data-highlight] {
  background-color: color-mix(in srgb, var(--verse-highlight-color, #fef08a) 22%, transparent) !important;
}

/* Bible Version Picker Modal Design System */
.version-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.version-picker-modal.hidden {
  display: none !important;
}

.version-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
}

.version-picker-card {
  position: relative;
  z-index: 10001;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card, #18181b);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  padding: 1.5rem;
  color: var(--text-primary, #f8fafc);
  animation: modalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.version-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.version-picker-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  margin: 0;
}

.version-picker-close {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.version-picker-close:hover {
  color: var(--text-primary, #ffffff);
  background: var(--bg-surface, rgba(255, 255, 255, 0.1));
}

.version-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 0.6rem;
}

.version-option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.12));
  background: var(--bg-surface, rgba(255, 255, 255, 0.05)) !important;
  color: var(--text-primary, #f8fafc) !important;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
}

.version-option-btn:hover {
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.1)) !important;
  border-color: var(--border-card-hover, rgba(255, 255, 255, 0.3));
}

.version-option-btn .v-name {
  color: var(--text-primary, #f8fafc) !important;
}

.version-option-btn .v-check {
  display: none;
  color: var(--color-brand, #04A9D2) !important;
  font-weight: bold;
}

.version-option-btn.active {
  border-color: var(--color-brand, #04A9D2) !important;
  background: var(--color-brand-subtle, rgba(4, 169, 210, 0.15)) !important;
}

.version-option-btn.active .v-name {
  color: var(--color-brand, #04A9D2) !important;
  font-weight: 600;
}

.version-option-btn.active .v-check {
  display: inline-block !important;
}

/* Reader verse selection bar — compact card inspired by shadcn/ui primitives. */
.youversion-action-bar {
  position: fixed;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: var(--z-modal, 9990);
  width: min(calc(100vw - 1.5rem), 26rem);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease-out, opacity 0.16s ease;
  opacity: 0;
  padding: 0.75rem;
  color: var(--text-primary);
}

.youversion-action-bar.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.youversion-action-bar .yv-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin-bottom: 0.65rem;
}

.youversion-action-bar .yv-selection-label,
.youversion-action-bar .yv-section-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-secondary);
}

.youversion-action-bar .yv-close-button,
.youversion-action-bar .yv-dot-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.youversion-action-bar .yv-close-button:hover,
.youversion-action-bar .yv-close-button:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  color: var(--text-primary);
}

.youversion-action-bar .yv-content-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.youversion-action-bar .yv-content-row::-webkit-scrollbar {
  display: none;
}

.youversion-action-bar .yv-highlight-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-width: max-content;
  gap: 0.5rem;
}

.youversion-action-bar .yv-highlight-popover {
  position: absolute;
  bottom: calc(100% + 0.625rem);
  left: clamp(8.75rem, var(--yv-highlight-anchor-x, 50%), calc(100% - 8.75rem));
  z-index: 1;
  width: min(20rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: 0.875rem;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: yvHighlightPopoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  flex-direction: column;
  align-items: flex-start;
}

.youversion-action-bar .yv-highlight-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.375rem;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-card);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes yvHighlightPopoverIn {
  from { opacity: 0; transform: translateX(-50%) translateY(0.375rem) scale(0.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .youversion-action-bar .yv-highlight-popover {
    animation: none;
  }
}

.youversion-action-bar .yv-color-capsule {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.25rem 0;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.youversion-action-bar .yv-dot {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.youversion-action-bar .yv-dot:hover,
.youversion-action-bar .yv-dot:focus-visible {
  transform: scale(1.08);
}

.youversion-action-bar .yv-dot.is-active,
.youversion-action-bar .yv-dot[aria-pressed="true"] {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--color-brand);
}

.youversion-action-bar .yv-dot-yellow { background-color: var(--hl-yellow, #fef08a); }
.youversion-action-bar .yv-dot-cyan { background-color: var(--hl-blue, #a5f3fc); }
.youversion-action-bar .yv-dot-green { background-color: var(--hl-green, #bbf7d0); }
.youversion-action-bar .yv-dot-dual { background-color: var(--hl-orange, #fed7aa); }
.youversion-action-bar .yv-dot-pink { background-color: #fecdd3; }
.youversion-action-bar .yv-dot-purple { background-color: #ddd6fe; }
.youversion-action-bar .yv-custom-color {
  position: relative;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-card);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444);
  box-shadow: inset 0 0 0 3px var(--bg-card);
}

.youversion-action-bar .yv-custom-color input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.youversion-action-bar .yv-section-divider {
  width: 1px;
  height: 1.5rem;
  background: var(--border-card);
  margin: 0 0.125rem;
}
.youversion-action-bar .yv-dot-clear:hover,
.youversion-action-bar .yv-dot-clear:focus-visible {
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: var(--color-brand);
  border-color: color-mix(in srgb, var(--color-brand) 32%, var(--border-card));
}

.youversion-action-bar .yv-action-group {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.youversion-action-bar .yv-tile {
  flex: 0 0 auto;
  min-width: 4.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.youversion-action-bar .yv-tile:hover,
.youversion-action-bar .yv-tile:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 20%, var(--border-card));
}

.youversion-action-bar .yv-tile-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
}

.youversion-action-bar .yv-tile.is-active {
  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ─── Verse note badge (top-right marker on an annotated verse) ─── */
.bible-verse {
  position: relative;
}

.verse-note-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.35rem;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  pointer-events: none;
}

.verse-note-badge .nlc-icon,
.verse-note-badge svg {
  width: 0.72rem;
  height: 0.72rem;
}

/* ─── Verse Note Editor (full-screen annotation editor) ───
   Built on the app's existing .full-page-overlay / .overlay-header /
   .overlay-back-btn shell (same one used by the bible-nav and search
   overlays) instead of a bespoke fixed-position layout, so it inherits
   the already mobile-safe-area-tested positioning and a clearly labelled
   icon+text back button rather than a small icon-only close button. */
.verse-note-editor-overlay {
  z-index: var(--z-modal);
}

.verse-note-editor-save {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--color-brand);
  font-size: 0.95rem;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  padding: 0.5rem 0.4rem;
  min-height: 44px;
}

.verse-note-editor-quote {
  flex-shrink: 0;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-card);
  background: var(--color-brand-subtle);
}

.verse-note-editor-reference {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--type-weight-strong);
  color: var(--color-brand);
  margin-bottom: 0.3rem;
}

.verse-note-editor-verse-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.verse-note-editor-textarea {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 1.25rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
}

.verse-note-editor-textarea::placeholder {
  color: var(--text-muted);
}

.verse-note-editor-footer {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border-card);
}

.verse-note-editor-delete {
  font-size: 0.875rem;
}

body.verse-note-editor-open {
  overflow: hidden;
}

@media (max-width: 360px) {
  .youversion-action-bar {
    width: calc(100vw - 1rem);
    padding: 0.625rem;
  }

  .youversion-action-bar .yv-tile {
    padding: 0 0.25rem;
    gap: 0.25rem;
  }
}

/* ─── Prestige Badge Ratings (Diamonds & Crowns for Rounds 6~10+) ─── */
.badge-diamond {
  display: inline-flex;
  color: #38bdf8;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6));
}

.badge-diamond .nlc-icon {
  --nlc-icon-size: 0.875rem;
  width: var(--nlc-icon-size);
  height: var(--nlc-icon-size);
  color: #38bdf8;
  fill: rgba(56, 189, 248, 0.85);
}

.badge-crown {
  display: inline-flex;
  color: #f59e0b;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.75));
}

.badge-crown .nlc-icon {
  --nlc-icon-size: 0.9375rem;
  width: var(--nlc-icon-size);
  height: var(--nlc-icon-size);
  color: #fbbf24;
  fill: #f59e0b;
}

.badge-stars--compact .badge-diamond .nlc-icon {
  --nlc-icon-size: 0.625rem;
}

.badge-stars--compact .badge-crown .nlc-icon {
  --nlc-icon-size: 0.6875rem;
}

/* ─── TTS Voice Package Guide Modal Overlay ─── */
.tts-guide-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tts-guide-modal-overlay:not(.hidden) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.tts-guide-modal-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Universal High-Contrast Dark Theme Headings Safeguard */
[data-theme="dark"] .card-title,
[data-theme="dark"] #grp-heatmap-title,
[data-theme="dark"] #grp-daily-active-chart-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
body.dark-theme .card-title,
body.dark-theme #grp-heatmap-title,
body.dark-theme #grp-daily-active-chart-title,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark .card-title,
body.dark #grp-heatmap-title,
body.dark #grp-daily-active-chart-title,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4 {
  color: #F8FAFC !important;
}

[data-theme="dark"] .glass-card-upgrade,
body.dark-theme .glass-card-upgrade,
body.dark .glass-card-upgrade {
  color: #F8FAFC !important;
}

/* ─── TTS Speech Settings Modal Design System Styles ─── */
.speech-voice-select {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.875rem;
  min-height: 38px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.speech-voice-select:focus,
.speech-voice-select:hover {
  border-color: var(--color-brand, #04A9D2);
}

.speech-preview-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid var(--color-brand, #04A9D2);
  background: color-mix(in srgb, var(--color-brand, #04A9D2) 8%, transparent);
  color: var(--color-brand, #04A9D2);
  cursor: pointer;
  transition: all 0.18s ease;
}

.speech-preview-btn .nlc-icon,
.speech-preview-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.speech-voice-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.speech-voice-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  min-width: 0;
}

.tts-guide-button {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 35%, var(--border-card));
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-brand) 9%, var(--bg-card));
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}

.tts-guide-button:hover,
.tts-guide-button:focus-visible {
  background: color-mix(in srgb, var(--color-brand) 16%, var(--bg-card));
  border-color: var(--color-brand);
}

.tts-guide-button:active {
  transform: scale(0.98);
}

.speech-preview-btn:hover {
  background: color-mix(in srgb, var(--color-brand, #04A9D2) 18%, transparent);
  box-shadow: 0 2px 8px rgba(4, 169, 210, 0.2);
}

.speech-preview-btn:active {
  transform: scale(0.98);
}

.speech-preview-btn.shadcn-speech-btn--playing {
  background: var(--color-brand, #04A9D2) !important;
  color: #ffffff !important;
  border-color: var(--color-brand, #04A9D2) !important;
  box-shadow: 0 3px 10px rgba(4, 169, 210, 0.35) !important;
}

/* ─── Issue Report & Input Form Textarea High-Contrast Typing Safeguard ─── */
#reply-message-textarea,
#description,
textarea {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--text-primary, #F8FAFC) !important;
}

#reply-message-textarea::placeholder,
#description::placeholder,
textarea::placeholder {
  color: var(--text-muted, #94A3B8) !important;
  opacity: 0.8 !important;
}



.admin-registration-statistics {
  display: grid;
  gap: 1rem;
}

.admin-registration-statistics__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-registration-statistics__header p {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.admin-registration-statistics__eyebrow {
  color: var(--color-brand) !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.admin-registration-statistics__filter {
  display: grid;
  gap: 0.4rem;
  max-width: 28rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.admin-registration-statistics__tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.admin-registration-statistics__summary {
  display: grid;
  gap: 0.55rem;
}

.admin-registration-statistics__summary h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.admin-registration-statistics__summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-registration-statistics__summary-item {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
  background: var(--bg-input);
}

.admin-registration-statistics__summary-item span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}

.admin-registration-statistics__summary-item strong {
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 500;
}

.admin-registration-statistics__summary-item--total {
  border-color: var(--color-brand-border);
  background: var(--color-brand-muted);
}

.admin-registration-statistics__summary-item--total strong {
  color: var(--color-brand);
}

.admin-registration-statistics__table-section {
  min-width: 0;
}

.admin-registration-statistics__table-section h4 {
  margin: 0 0 0.55rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.admin-registration-statistics__table-scroll {
  overflow: auto;
  max-height: 24rem;
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
}

.admin-registration-statistics table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.admin-registration-statistics th,
.admin-registration-statistics td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
  text-align: left;
  white-space: nowrap;
}

.admin-registration-statistics th {
  position: sticky;
  top: 0;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-weight: 500;
}

.admin-registration-statistics td {
  color: var(--text-primary);
}

.admin-registration-statistics tbody tr:last-child td {
  border-bottom: 0;
}

.admin-registration-statistics__empty {
  padding: 1.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.admin-user-directory {
  padding: 0;
  overflow: hidden;
}

.admin-user-directory__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.admin-user-directory__summary::-webkit-details-marker,
.admin-user-directory__card-summary::-webkit-details-marker {
  display: none;
}

.admin-user-directory__summary::after,
.admin-user-directory__card-summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.admin-user-directory[open] > .admin-user-directory__summary::after,
.admin-user-directory__card[open] > .admin-user-directory__card-summary::after {
  transform: rotate(225deg);
}

.admin-user-directory__body {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.admin-user-directory__toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.admin-user-directory__search {
  flex: 1 1 32rem;
  max-width: 40rem;
}

.admin-user-directory__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.05rem;
}

.admin-user-directory__count {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--color-brand-muted);
  color: var(--color-brand);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.admin-user-directory__org-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-user-directory__org-filters[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.admin-user-directory__org-filters legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: -0.25rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.admin-user-directory__org-filter {
  display: grid;
  gap: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.admin-user-directory__org-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

.admin-user-directory__org-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.admin-user-directory__org-picker > summary::-webkit-details-marker {
  display: none;
}

.admin-user-directory__org-picker > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.admin-user-directory__org-picker[open] > summary::after {
  transform: rotate(225deg);
}

.admin-user-directory__org-options {
  display: grid;
  gap: 0.35rem;
  max-height: 14rem;
  margin-top: 0.4rem;
  padding: 0.45rem;
  overflow-y: auto;
  border: 1px solid var(--border-card);
  border-radius: 0.65rem;
  background: var(--bg-input);
}

.admin-user-directory__org-option,
.admin-user-directory__org-clear {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}

.admin-user-directory__org-option {
  cursor: pointer;
}

.admin-user-directory__org-option:has(input:checked) {
  background: var(--color-brand-muted);
  color: var(--color-brand);
}

.admin-user-directory__org-option input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.admin-user-directory__org-clear {
  width: 100%;
  cursor: pointer;
}

.admin-user-directory__org-clear:hover,
.admin-user-directory__org-clear:focus-visible {
  background: var(--bg-surface-hover);
}

.admin-user-directory__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-user-directory__filters legend {
  width: 100%;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.admin-user-directory__filters label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-card);
  border-radius: 0.65rem;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.78rem;
  cursor: pointer;
}

.admin-user-directory__filters input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.admin-user-directory__filters label:has(input:checked) {
  border-color: var(--color-brand-border);
  background: var(--color-brand-muted);
  color: var(--color-brand);
}

.admin-user-directory__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.75rem;
}

.admin-user-directory__card {
  min-width: 0;
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
  background: var(--bg-input);
  overflow: hidden;
}

.admin-user-directory__card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.admin-user-directory__identity {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.admin-user-directory__identity strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-directory__identity span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.admin-user-directory__detail-panel {
  padding: 0.85rem 0.9rem 0.9rem;
  border-top: 1px solid var(--border-card);
}

.admin-user-directory__status {
  flex: 0 0 auto;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
}

.admin-user-directory__status--active {
  background: var(--color-success-subtle);
  color: var(--color-success-foreground);
}

.admin-user-directory__status--inactive {
  background: var(--bg-card);
  color: var(--text-muted);
}

.admin-user-directory__status--disabled {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.admin-user-directory__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
  margin: 0;
}

.admin-user-directory__details div {
  min-width: 0;
}

.admin-user-directory__details dt {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.admin-user-directory__details dd {
  margin: 0.15rem 0 0;
  color: var(--text-primary);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-user-directory__name-review {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-card);
}

.admin-user-directory__name-review-reason {
  margin: 0 0 0.5rem;
  color: var(--color-warning);
  font-size: 0.78rem;
  line-height: 1.5;
}

.admin-user-directory__name-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-user-directory__name-review-input {
  flex: 1 1 100%;
}

.admin-user-directory__empty {
  grid-column: 1 / -1;
  padding: 1.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.admin-managed-scopes {
  display: grid;
  gap: 1rem;
}

.admin-managed-scopes__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.admin-managed-scopes__summary strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-primary);
  font-weight: 500;
}

.admin-managed-scopes__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.55rem;
  max-height: 20rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
}

.admin-managed-scopes__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.55rem;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.82rem;
}

.admin-managed-scopes__option input {
  width: 1rem;
  height: 1rem;
}

.admin-managed-scopes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-managed-scopes__help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.admin-managed-scopes__empty {
  grid-column: 1 / -1;
  padding: 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.82rem;
}

.admin-org-permissions {
  padding: 0;
  overflow: hidden;
}

.admin-org-permissions__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.admin-org-permissions__summary::-webkit-details-marker {
  display: none;
}

.admin-org-permissions__count {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.admin-org-permissions__tree {
  display: grid;
  gap: 0.6rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--border-card);
  padding-top: 1rem;
}

.admin-org-permissions__whole-church {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-brand-border);
  border-radius: 0.65rem;
  background: var(--color-brand-muted);
  color: var(--color-brand);
  font-size: 0.82rem;
  font-weight: 500;
}

.admin-org-permissions__region,
.admin-org-permissions__zone {
  border: 1px solid var(--border-card);
  border-radius: 0.65rem;
  background: var(--bg-input);
  overflow: hidden;
}

.admin-org-permissions__zone {
  margin: 0.5rem 0.6rem 0.6rem;
}

.admin-org-permissions__region > summary,
.admin-org-permissions__zone > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  list-style: none;
}

.admin-org-permissions__region > summary::-webkit-details-marker,
.admin-org-permissions__zone > summary::-webkit-details-marker {
  display: none;
}

.admin-org-permissions__region > summary {
  font-weight: 600;
}

.admin-org-permissions__unit-name {
  color: var(--text-primary);
  font-size: 0.85rem;
}

.admin-org-permissions__leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-org-permissions__leader-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-brand-border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--color-brand);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-org-permissions__leader-chip:hover,
.admin-org-permissions__leader-chip:focus-visible {
  background: var(--color-brand);
  color: #ffffff;
}

.admin-org-permissions__unassigned {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  font-size: 0.72rem;
}

.admin-org-permissions__groups {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.6rem 0.8rem 0.75rem;
  list-style: none;
  border-top: 1px solid var(--border-card);
}

.admin-org-permissions__group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

@media (max-width: 720px) {
  .admin-user-directory__toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  .admin-user-directory__search {
    flex-basis: auto;
    max-width: none;
  }

  .admin-user-directory__actions {
    justify-content: flex-end;
  }

  .admin-user-directory__org-filters {
    grid-template-columns: 1fr;
  }

  .admin-user-directory__filters label {
    width: 100%;
  }

  .admin-user-directory__details {
    grid-template-columns: 1fr;
  }

  .admin-registration-statistics__header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-registration-statistics__header .secondary-btn {
    justify-content: center;
    width: 100%;
  }

  .admin-registration-statistics__tables {
    grid-template-columns: 1fr;
  }

  .admin-registration-statistics__summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-managed-scopes__summary {
    grid-template-columns: 1fr;
  }

  .admin-managed-scopes__actions > button {
    justify-content: center;
    width: 100%;
  }
}

/* Dark theme explicit contrast overrides for Plan Registration Statistics */
[data-theme="dark"] .admin-registration-statistics__summary h4,
[data-theme="dark"] .admin-registration-statistics__table-section h4,
body.dark-theme .admin-registration-statistics__summary h4,
body.dark-theme .admin-registration-statistics__table-section h4 {
  color: #F8FAFC !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

[data-theme="dark"] .admin-registration-statistics__summary-item span,
body.dark-theme .admin-registration-statistics__summary-item span {
  color: rgba(203, 213, 225, 0.95) !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .admin-registration-statistics__summary-item strong,
body.dark-theme .admin-registration-statistics__summary-item strong {
  color: #F8FAFC !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .admin-registration-statistics th,
body.dark-theme .admin-registration-statistics th {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #334155 !important;
}

[data-theme="dark"] .admin-registration-statistics td,
body.dark-theme .admin-registration-statistics td {
  color: #F8FAFC !important;
}

[data-theme="dark"] .admin-registration-statistics__summary-item,
body.dark-theme .admin-registration-statistics__summary-item {
  background: #0F172A !important;
  border-color: #334155 !important;
}


.reading-team-overlay {
  --reading-team-accent: color-mix(in srgb, var(--color-brand-active, #0284a3) 88%, var(--text-primary, #0f0f0f));
  --reading-team-on-accent: #fff;
  --reading-team-accent-soft: color-mix(in srgb, var(--reading-team-accent) 9%, transparent);
  --reading-team-accent-border: color-mix(in srgb, var(--reading-team-accent) 28%, transparent);
  --reading-team-sheet: var(--bg-app, #fafafa);
  --reading-team-surface: color-mix(in srgb, var(--text-primary, #0f0f0f) 4%, var(--bg-card, #fff));
  --reading-team-surface-raised: var(--bg-card, #fff);
  --reading-team-separator: color-mix(in srgb, var(--text-primary, #0f0f0f) 11%, transparent);
  align-items: center;
  background: rgb(15 15 15 / 46%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  position: fixed;
  z-index: var(--z-modal, 700);
}

body.dark-theme .reading-team-overlay {
  --reading-team-accent: var(--color-brand, #04a9d2);
  --reading-team-on-accent: #06272f;
  --reading-team-accent-soft: color-mix(in srgb, var(--reading-team-accent) 14%, transparent);
  --reading-team-accent-border: color-mix(in srgb, var(--reading-team-accent) 34%, transparent);
  --reading-team-surface: color-mix(in srgb, var(--text-primary, #fafafa) 7%, var(--bg-card, #1a1a1a));
  background: rgb(0 0 0 / 64%);
}

body.warm-theme .reading-team-overlay {
  --reading-team-accent: color-mix(in srgb, var(--color-brand-active, #0284a3) 88%, var(--text-primary, #3d3328));
  --reading-team-surface: color-mix(in srgb, var(--text-primary, #3d3328) 5%, var(--bg-card, #fdf6e3));
}

body.reading-team-modal-open .main-content {
  overflow: hidden;
}

.reading-team-dialog {
  background: var(--reading-team-sheet);
  border: 1px solid var(--reading-team-separator);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 22%);
  color: var(--text-primary, #f4f4f4);
  max-height: min(84dvh, 760px);
  max-width: 720px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  position: relative;
  scrollbar-gutter: stable;
  width: 100%;
}

.reading-team-dialog__header,
.reading-team-dialog__footer,
.reading-team-member__title,
.reading-team-member__meta,
.reading-team-section-title,
.reading-team-summary,
.reading-team-invite,
.reading-team-ready,
.reading-team-loading {
  align-items: center;
  display: flex;
}

.reading-team-dialog__header {
  justify-content: space-between;
  margin-bottom: 10px;
}

.reading-team-back-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  margin: -0.35rem 0 0.25rem -0.6rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-brand);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  touch-action: manipulation;
}

.reading-team-back-button:hover {
  background: var(--color-brand-subtle);
}

.reading-team-back-button:focus-visible {
  outline: 2px solid var(--color-brand-ring);
  outline-offset: 2px;
}

.reading-team-dialog h3,
.reading-team-dialog h4,
.reading-team-dialog p {
  margin-top: 0;
}

.reading-team-dialog h3 {
  font-size: 1.22rem;
  font-weight: 500;
  margin-bottom: 0;
}

.reading-team-eyebrow {
  color: var(--reading-team-accent);
  font-size: .72rem;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

.reading-team-dialog__intro,
.reading-team-form-card p,
.reading-team-section-title span {
  color: var(--text-secondary, #a8a8a8);
  font-size: .86rem;
  line-height: 1.6;
}

.plan-join-confirmation-overlay {
  padding: 1rem;
  background: rgb(15 23 42 / 0.42);
}

.plan-join-confirmation-dialog {
  width: min(100%, 420px);
  max-height: min(80dvh, 520px);
  overflow: auto;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 20px 44px rgb(15 23 42 / 0.18);
  padding: 1rem;
}

.plan-join-confirmation-dialog__header {
  display: grid;
  gap: 0.45rem;
}

.plan-join-confirmation-dialog__eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.plan-join-confirmation-dialog h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
}

.plan-join-confirmation-dialog p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

.plan-join-confirmation-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.plan-join-confirmation-dialog__footer button {
  min-height: 44px;
  border-radius: 10px;
}

.plan-join-confirmation-dialog__cancel.secondary-btn,
.plan-join-confirmation-dialog__confirm.primary-btn {
  box-shadow: none;
  transform: none;
}

.plan-join-confirmation-dialog__cancel.secondary-btn {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--text-primary);
}

.plan-join-confirmation-dialog__cancel.secondary-btn:hover,
.plan-join-confirmation-dialog__cancel.secondary-btn:focus-visible {
  background: var(--bg-secondary);
  border-color: var(--border-strong, var(--border-card));
  box-shadow: none;
  transform: none;
}

.plan-join-confirmation-dialog__confirm.primary-btn {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-button-text, #fff);
}

.plan-join-confirmation-dialog__confirm.primary-btn::after {
  content: none;
}

.plan-join-confirmation-dialog__confirm.primary-btn:hover,
.plan-join-confirmation-dialog__confirm.primary-btn:focus-visible {
  background: var(--color-brand-active, var(--color-brand));
  border-color: var(--color-brand-active, var(--color-brand));
  box-shadow: none;
  transform: none;
}

@media (max-width: 640px) {
  .plan-join-confirmation-overlay {
    align-items: flex-end !important;
    padding: 0.75rem;
  }

  .plan-join-confirmation-dialog {
    width: 100%;
    max-height: 72dvh;
  }

  .plan-join-confirmation-dialog__footer {
    flex-direction: column-reverse;
  }

  .plan-join-confirmation-dialog__footer button {
    width: 100%;
  }
}

.reading-team-choice-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.reading-team-choice-grid {
  background: var(--reading-team-surface-raised);
  border: 1px solid var(--reading-team-separator);
  border-radius: 20px;
  gap: 2px;
  grid-template-columns: 1fr;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 6px;
}

.reading-team-division-choice-grid {
  background: var(--reading-team-surface-raised);
  border: 1px solid var(--reading-team-separator);
  border-radius: 16px;
  display: grid;
  gap: 6px;
  margin: 16px 0;
  padding: 6px;
}

.reading-team-choice,
.reading-team-division-choice,
.reading-team-form-card {
  border-radius: 16px;
  color: var(--text-primary, #f4f4f4);
  padding: 18px;
  text-align: left;
}

.reading-team-form-card {
  background: var(--reading-team-surface);
  border: 1px solid var(--reading-team-separator);
}

.reading-team-choice,
.reading-team-division-choice {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  min-height: 84px;
  position: relative;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
  width: 100%;
}

.reading-team-choice:hover,
.reading-team-choice:focus-visible,
.reading-team-division-choice:hover,
.reading-team-division-choice:focus-visible,
.reading-team-division-choice.is-selected {
  background: var(--reading-team-accent-soft);
  border-color: var(--reading-team-accent);
  outline: none;
}

.reading-team-choice:active,
.reading-team-division-choice:active {
  transform: scale(.985);
}

.reading-team-choice__icon,
.reading-team-form-card__icon {
  align-items: center;
  background: var(--reading-team-accent-soft);
  border-radius: 12px;
  color: var(--reading-team-accent);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.reading-team-choice__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.reading-team-choice strong {
  font-size: 1rem;
  font-weight: 500;
}

.reading-team-choice__description {
  color: var(--text-secondary, #aaa);
  font-size: .78rem;
  line-height: 1.45;
}

.reading-team-choice__arrow {
  color: var(--color-icon-muted, var(--text-secondary, #aaa));
  display: inline-flex;
  flex: 0 0 auto;
}

.reading-team-division-choice {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 76px;
}

.reading-team-registration-tabs {
  background: var(--reading-team-surface);
  border: 1px solid var(--reading-team-separator);
  border-radius: 13px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0 12px;
  padding: 4px;
}

.reading-team-registration-tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  font: inherit;
  min-height: 42px;
}

.reading-team-registration-tabs button[aria-selected="true"] {
  background: var(--reading-team-surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--reading-team-accent);
  font-weight: 500;
}

.reading-team-registration-panel {
  margin-top: 0;
}

.reading-team-registration-panel[hidden] {
  display: none;
}

.reading-team-registration-panel__heading {
  align-items: center;
  display: flex;
  gap: 12px;
}

.reading-team-registration-panel__heading > div {
  min-width: 0;
}

.reading-team-field-label,
.reading-team-form-hint,
.reading-team-registration-privacy {
  color: var(--text-secondary, #aaa);
  font-size: .78rem;
  line-height: 1.5;
}

.reading-team-division-switch {
  background: var(--reading-team-surface);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0 12px;
  padding: 4px;
}

.reading-team-division-switch button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  padding: 10px;
}

.reading-team-division-switch button[aria-checked="true"] {
  background: var(--reading-team-accent);
  color: var(--reading-team-on-accent);
  font-weight: 500;
}

.reading-team-form-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reading-team-form-card h4,
.reading-team-form-card p {
  margin-bottom: 0;
}

.reading-team-form-card label {
  color: var(--text-secondary, #aaa);
  font-size: .78rem;
}

.reading-team-form-card .form-control {
  background: var(--reading-team-sheet);
  border: 1px solid var(--reading-team-separator);
  border-radius: 10px;
  color: var(--text-primary, #f4f4f4);
  min-height: 44px;
  padding: 0 12px;
}

.reading-team-registration-panel .reading-team-division-switch {
  margin: 0;
}

.reading-team-submit {
  justify-content: center;
  min-height: 48px;
  width: 100%;
}

.reading-team-registration-privacy {
  margin: 14px 2px 0;
}

.reading-team-code-input {
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reading-team-subview-switch {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
}

.reading-team-subview-switch.hidden {
  display: none;
}

.reading-team-subview-switch label {
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 500;
}

.reading-team-subview-switch .form-control {
  background: var(--bg-input);
  color: var(--text-primary);
  min-height: 40px;
  min-width: min(220px, 58vw);
}

.reading-team-inline {
  --reading-team-accent: var(--color-brand, #04a9d2);
  --reading-team-accent-soft: color-mix(in srgb, var(--reading-team-accent) 10%, transparent);
  --reading-team-separator: var(--border-card);
  --reading-team-surface: var(--bg-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  color: var(--text-primary);
  padding: 16px;
}

.reading-team-inline.hidden {
  display: none;
}

.reading-team-inline__header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.reading-team-inline__header h3,
.reading-team-inline__header p {
  margin: 0;
}

.reading-team-inline__header p {
  color: var(--text-secondary);
  font-size: .78rem;
  margin-top: 4px;
}

.reading-team-inline .reading-team-summary {
  margin-top: 0;
}

.reading-team-stat-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 18px;
}

.reading-team-stat-card {
  background: var(--reading-team-surface);
  border: 1px solid var(--reading-team-separator);
  border-radius: 14px;
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 14px;
  position: relative;
}

.reading-team-stat-card--primary {
  background: var(--reading-team-accent-soft);
  border-color: color-mix(in srgb, var(--reading-team-accent) 38%, var(--reading-team-separator));
  grid-column: 1 / -1;
}

.reading-team-stat-card > span:first-child {
  color: var(--text-secondary);
  font-size: .76rem;
}

.reading-team-stat-card > strong {
  align-self: end;
  font-size: 1.55rem;
  font-weight: 500;
}

.reading-team-stat-card small {
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 400;
  margin-left: 4px;
}

.reading-team-stat-card > .nlc-icon {
  color: var(--reading-team-accent);
  position: absolute;
  right: 13px;
  top: 13px;
}

.reading-team-summary {
  background: var(--reading-team-surface);
  border: 1px solid var(--reading-team-separator);
  border-radius: 14px;
  justify-content: space-between;
  margin: 18px 0 12px;
  padding: 14px 16px;
}

.reading-team-summary > div:first-child,
.reading-team-summary__progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.reading-team-summary__progress {
  align-items: flex-end;
}

.reading-team-summary span,
.reading-team-member__meta,
.reading-team-invite span {
  color: var(--text-secondary, #aaa);
  font-size: .76rem;
}

.reading-team-summary strong {
  font-size: 1.12rem;
  font-weight: 500;
}

.reading-team-invite,
.reading-team-ready {
  background: color-mix(in srgb, var(--reading-team-accent) 10%, var(--reading-team-surface));
  border: 1px solid color-mix(in srgb, var(--reading-team-accent) 38%, var(--reading-team-separator));
  border-radius: 14px;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 12px 14px;
}

.reading-team-invite > div {
  display: flex;
  flex-direction: column;
}

.reading-team-invite strong {
  font-size: 1.1rem;
  letter-spacing: .12em;
}

.reading-team-ready {
  color: var(--reading-team-accent);
  justify-content: flex-start;
}

.reading-team-section-title {
  justify-content: space-between;
  margin-bottom: 8px;
}

.reading-team-section-title h4 {
  font-weight: 500;
  margin-bottom: 0;
}

.reading-team-member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reading-team-member {
  align-items: center;
  border: 1px solid var(--reading-team-separator);
  border-radius: 13px;
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  padding: 11px 12px;
}

.reading-team-member__actions,
.reading-team-roster__actions {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.reading-team-remove-btn,
.reading-team-remind-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  flex: 0 0 38px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

.reading-team-remove-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  background: color-mix(in srgb, var(--color-danger, #dc4c64) 9%, var(--reading-team-surface)) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border: 1px solid color-mix(in srgb, var(--color-danger, #dc4c64) 35%, var(--reading-team-separator)) !important;
  color: #dc4c64 !important;
  color: var(--color-danger, #dc4c64) !important;
}

.reading-team-remove-btn:hover,
.reading-team-remove-btn:focus-visible {
  background: rgba(239, 68, 68, 0.16) !important;
  background: color-mix(in srgb, var(--color-danger, #dc4c64) 16%, var(--reading-team-surface)) !important;
  border-color: #dc4c64 !important;
  border-color: var(--color-danger, #dc4c64) !important;
}

.reading-team-remind-btn {
  background: rgba(4, 169, 210, 0.08) !important;
  background: color-mix(in srgb, var(--color-brand, #04a9d2) 9%, var(--reading-team-surface)) !important;
  border: 1px solid rgba(4, 169, 210, 0.25) !important;
  border: 1px solid color-mix(in srgb, var(--color-brand, #04a9d2) 35%, var(--reading-team-separator)) !important;
  color: #04a9d2 !important;
  color: var(--color-brand, #04a9d2) !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.reading-team-remind-btn:hover,
.reading-team-remind-btn:focus-visible {
  background: rgba(4, 169, 210, 0.16) !important;
  background: color-mix(in srgb, var(--color-brand, #04a9d2) 16%, var(--reading-team-surface)) !important;
  border-color: #04a9d2 !important;
  border-color: var(--color-brand, #04a9d2) !important;
  transform: translateY(-1px) !important;
}

.reading-team-member--me {
  border-color: color-mix(in srgb, var(--reading-team-accent) 55%, var(--reading-team-separator));
}

.reading-team-member--behind {
  border-color: color-mix(in srgb, var(--color-danger, #dc4c64) 45%, var(--reading-team-separator)) !important;
  background-color: color-mix(in srgb, var(--color-danger, #dc4c64) 3%, transparent) !important;
}

.reading-team-remind-btn__label {
  display: none;
}

.reading-team-inline--stats .reading-team-remind-btn {
  block-size: 38px;
  border-radius: 50% !important;
  gap: 0;
  inline-size: 38px;
  min-block-size: 38px;
  min-inline-size: 38px;
  max-inline-size: 38px;
  padding: 0 !important;
  width: 38px !important;
  height: 38px !important;
}

.reading-team-inline--stats .reading-team-remind-btn__label {
  display: none !important;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.reading-team-member__avatar {
  align-items: center;
  background: var(--reading-team-surface);
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.reading-team-member__body {
  min-width: 0;
}

.reading-team-member__title,
.reading-team-member__meta {
  gap: 7px;
  justify-content: flex-start;
}

.reading-team-member__title strong,
.reading-team-member__percent {
  font-weight: 500;
}

.reading-team-me {
  color: var(--reading-team-accent);
  font-size: .7rem;
}

.reading-team-progress {
  background: var(--reading-team-surface);
  border-radius: 999px;
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
}

.reading-team-progress span {
  background: var(--reading-team-accent);
  display: block;
  height: 100%;
}

.reading-team-dialog__footer {
  border-top: 1px solid var(--reading-team-separator);
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
}

.reading-team-danger-link {
  background: transparent;
  border: 0;
  color: var(--color-danger, #e36b6b);
  cursor: pointer;
  margin-right: auto;
}

.reading-team-form-error,
.reading-team-empty-error {
  color: var(--color-danger, #e36b6b);
  font-size: .82rem;
  margin: 12px 0 0;
}

.reading-team-loading {
  gap: 10px;
  justify-content: center;
  min-height: 180px;
}

.reading-team-roster-scroll {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.reading-team-roster {
  min-width: 660px;
}

.reading-team-roster__head,
.reading-team-roster__row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(150px, 1fr) 76px 76px 64px 104px 96px;
  text-align: center;
}

.reading-team-roster__head {
  border-bottom: 1px solid var(--reading-team-separator);
  color: var(--text-secondary);
  font-size: .74rem;
  padding: 10px 8px;
}

.reading-team-roster__head span:first-child {
  text-align: left;
}

.reading-team-roster__head span:nth-child(2),
.reading-team-roster__streak {
  color: var(--color-danger, #dc4c64);
}

.reading-team-roster__head span:nth-child(3),
.reading-team-roster__completed {
  color: var(--color-success-foreground, #168458);
}

.reading-team-roster__head span:nth-child(4),
.reading-team-roster__makeup {
  color: var(--color-warning-text, #d97706);
}

.reading-team-roster__head span:nth-child(5) {
  color: var(--reading-team-accent);
}

.reading-team-roster__row {
  border-bottom: 1px solid var(--reading-team-separator);
  min-height: 58px;
  padding: 8px;
}

.reading-team-roster__row--me {
  background: var(--reading-team-accent-soft);
  border-radius: 12px;
}

.reading-team-roster__row--behind {
  border: 1px solid color-mix(in srgb, var(--color-danger, #dc4c64) 45%, var(--reading-team-separator)) !important;
  background-color: color-mix(in srgb, var(--color-danger, #dc4c64) 3%, transparent) !important;
  border-radius: 12px;
}

.reading-team-roster__person {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
  text-align: left;
}

.reading-team-roster__person strong {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-team-roster__status {
  font-size: .78rem;
}

.reading-team-status--ahead,
.reading-team-status--current {
  color: var(--color-success-foreground, #168458);
}

.reading-team-status--behind {
  color: var(--color-danger, #dc4c64);
}

.reading-team-status--muted,
.reading-team-roster__self {
  color: var(--text-muted);
}

.reading-team-roster__row .reading-team-remind-btn {
  margin: 0;
}

@media (max-width: 640px) {
  .reading-team-overlay {
    align-items: flex-end;
    padding: max(16px, env(safe-area-inset-top)) 0 0;
  }

  .reading-team-dialog {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }

  .reading-team-dialog::before {
    background: var(--border-strong, #555);
    border-radius: 999px;
    content: "";
    display: block;
    height: 4px;
    margin: 0 auto 14px;
    width: 38px;
  }

  .reading-team-dialog--choice .reading-team-dialog__header {
    align-items: flex-start;
  }

  .reading-team-choice-grid {
    grid-template-columns: 1fr;
  }

  .reading-team-dialog--choice {
    background: var(--reading-team-sheet);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -16px 48px rgb(0 0 0 / 24%);
    max-width: 100%;
  }

  .reading-team-dialog--choice .reading-team-dialog__intro {
    margin-bottom: 0;
  }

  .reading-team-choice-grid {
    margin-top: 16px;
  }

  .reading-team-choice {
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    min-height: 78px;
    padding: 12px;
  }

  .reading-team-member__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .reading-team-subview-switch {
    align-items: stretch;
    flex-direction: column;
  }

  .reading-team-subview-switch .form-control {
    min-width: 0;
    width: 100%;
  }

  .reading-team-inline {
    padding: 12px;
  }

  .reading-team-inline--stats .reading-team-member {
    align-items: center;
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    grid-template-rows: auto auto;
  }

  .reading-team-inline--stats .reading-team-member__avatar {
    grid-row: 1 / 3;
  }

  .reading-team-inline--stats .reading-team-member__body {
    grid-column: 2 / 4;
    min-width: 0;
  }

  .reading-team-inline--stats .reading-team-member__percent {
    grid-column: 2;
    justify-self: start;
  }

  .reading-team-inline--stats .reading-team-remind-btn {
    block-size: 44px;
    border-radius: 50%;
    grid-column: 3;
    inline-size: 44px;
    justify-self: end;
    max-inline-size: 44px;
    min-width: 44px;
    padding: 0;
  }

  .reading-team-inline--stats .reading-team-member__actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  .reading-team-inline--stats .reading-team-remind-btn__label {
    display: none;
  }

  /* Roster card layout for mobile screens to prevent horizontal scroll */
  .reading-team-roster {
    min-width: 100% !important;
  }

  .reading-team-roster__head {
    display: none !important;
  }

  .reading-team-roster__row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) 92px !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    align-items: center !important;
    text-align: left !important;
    background: var(--reading-team-surface) !important;
    border: 1px solid var(--reading-team-separator) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: auto !important;
  }

  .reading-team-roster__row--me {
    background: var(--reading-team-accent-soft) !important;
    border-color: var(--reading-team-accent-border) !important;
  }

  .reading-team-roster__person {
    grid-column: 1 / 4 !important;
    grid-row: 1 !important;
  }

  .reading-team-roster__status {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding-bottom: 2px !important;
  }

  .reading-team-roster__streak {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .reading-team-roster__completed {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .reading-team-roster__makeup {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }

  .reading-team-roster__actions,
  .reading-team-roster__self {
    grid-column: 4 !important;
    grid-row: 1 / 4 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .reading-team-roster__streak,
  .reading-team-roster__completed,
  .reading-team-roster__makeup {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    background: var(--reading-team-surface-raised, #ffffff) !important;
    border: 1px solid var(--reading-team-separator) !important;
    padding: 6px 4px !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  body.dark-theme .reading-team-roster__streak,
  body.dark-theme .reading-team-roster__completed,
  body.dark-theme .reading-team-roster__makeup {
    background: color-mix(in srgb, var(--reading-team-surface) 30%, var(--reading-team-sheet)) !important;
  }

  .reading-team-roster__streak::before {
    content: "最高連續" !important;
    font-size: 0.68rem !important;
    color: var(--text-secondary) !important;
    font-weight: normal !important;
    margin-bottom: 3px !important;
  }

  .reading-team-roster__completed::before {
    content: "累計完成" !important;
    font-size: 0.68rem !important;
    color: var(--text-secondary) !important;
    font-weight: normal !important;
    margin-bottom: 3px !important;
  }

  .reading-team-roster__makeup::before {
    content: "補讀天數" !important;
    font-size: 0.68rem !important;
    color: var(--text-secondary) !important;
    font-weight: normal !important;
    margin-bottom: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-team-choice {
    transition: none;
  }
}


.reading-team-dialog--choice {
  max-width: 560px;
}

.reading-team-dialog--choice .reading-team-choice__icon {
  border: 1px solid var(--reading-team-accent-border);
  height: 46px;
  width: 46px;
}

.reading-team-dialog--choice .reading-team-choice:hover .reading-team-choice__arrow,
.reading-team-dialog--choice .reading-team-choice:focus-visible .reading-team-choice__arrow {
  color: var(--reading-team-accent);
  transform: translateX(2px);
}


@media (prefers-contrast: more) {
  .reading-team-overlay {
    --reading-team-separator: color-mix(in srgb, var(--text-primary) 24%, transparent);
  }

  .reading-team-choice:focus-visible {
    box-shadow: 0 0 0 3px var(--color-brand-ring);
  }
}