/* TehillimToken — sharp modern dark theme (gold + sky) */
:root {
  /* typography — Yakir 2026-05-14: geometric modern (Heebo Black / Aharoni feel)
     --font-display: punchy display for marketing headings (hero, section titles).
     --font-serif: kept for liturgical quotes (psalm verses) — stays traditional. */
  --font-body: 'Heebo', system-ui, sans-serif;
  --font-display: 'Heebo', system-ui, sans-serif;
  --font-serif: 'Frank Ruhl Libre', Georgia, serif;
  --tracking-display: -0.015em;

  /* backgrounds — warm beige */
  --bg: #f5f0e8;
  --bg-2: #ede6d6;
  --bg-3: #f0eadc;
  --bg-card: #ffffff;
  --bg-card-hover: #faf7f2;
  --bg-input: #faf8f4;

  /* accent */
  --gold: #d4a017;
  --gold-soft: #f0c850;
  --silver: #6b7280;
  --silver-light: #94a3b8;
  --sky: #0ea5e9;
  --sky-deep: #0284c7;
  --sky-glow: rgba(14, 165, 233, 0.12);
  --accent: #0ea5e9;
  --accent-2: #d4a017;

  /* text */
  --text: #1a1a2e;
  --muted: #6b7280;

  /* borders */
  --border: #e5ddd0;
  --line: #e5ddd0;
  --border-gold: rgba(212, 160, 23, 0.4);
  --border-sky: rgba(14, 165, 233, 0.35);

  /* shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-gold: 0 4px 18px rgba(212, 160, 23, 0.18);
  --shadow-sky: 0 4px 18px rgba(14, 165, 233, 0.15);

  /* gradients */
  --gradient-hero: linear-gradient(135deg, #f5f0e8 0%, #ede6d6 50%, #e8dfc9 100%);
  --gradient-gold: linear-gradient(135deg, #f0c850, #d4a017);
  --gradient-sky: linear-gradient(135deg, #38bdf8, #0284c7);
  --gradient-card: linear-gradient(145deg, #ffffff, #faf7f2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Heebo', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body { direction: rtl; min-height: 100vh; overflow-x: hidden; }
a { color: var(--sky); text-decoration: none; transition: color .15s; }
a:hover { color: var(--sky-deep); }
.serif { font-family: 'Frank Ruhl Libre', serif; }

/* ───── DailyChapterBadge — Yakir 2026-05-14: quiet habit signal ───── */
.daily-chapter-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 22px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 14px;
  max-width: 360px;
  margin: 0 auto;
  font-family: var(--font-body);
}
.daily-chapter-badge .dcb-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #e8d8b0;
}
.daily-chapter-badge .dcb-label {
  font-size: 13px;
  color: #a89fbf;
  letter-spacing: 0.3px;
}
.daily-chapter-badge .dcb-chapter {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--tracking-display);
  font-size: 24px;
  color: #f5d75c;
}
.daily-chapter-badge .dcb-done {
  color: #6dd692;
  font-size: 18px;
  font-weight: 800;
}
.daily-chapter-badge .dcb-soft {
  font-size: 12.5px;
  color: #a89fbf;
  font-style: italic;
  font-family: var(--font-serif);
}
.daily-chapter-badge .dcb-cta {
  margin-top: 4px;
  padding: 9px 22px;
  font-size: 14px;
  border-radius: 999px;
}

/* ───────── Nav ───────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.nav-row { display: flex; align-items: center; min-height: 36px; }
.nav-row-brand    { justify-content: center; }
.nav-row-controls { justify-content: space-between; gap: 12px; }
.nav .brand {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 26px;
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
}
@media (max-width: 820px) {
  /* RTL: flex-start = the RIGHT side. Burger pinned to the right. */
  .nav-row-controls { justify-content: flex-start; }
  .nav .brand { font-size: 24px; }
}
.nav .links a {
  margin-left: 18px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  transition: color .15s;
}
.nav .links a:hover { color: var(--sky); }

/* ───────── Hero ───────── */
.hero {
  min-height: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 50px 20px 40px;
  background: var(--gradient-hero);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-gold);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.08), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(240, 200, 80, 0.06), transparent 55%);
  pointer-events: none;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 78px);
  font-weight: 900;
  letter-spacing: var(--tracking-display);
  background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 50%, var(--sky-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px; line-height: 1.05;
  position: relative;
  text-shadow: 0 0 80px rgba(14, 165, 233, 0.28);
}
.hero p.lead {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--silver);
  max-width: 720px; margin-bottom: 22px;
  position: relative;
  letter-spacing: 0.3px;
}
.hero .verse {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--text);
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 700;
  opacity: 1;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  line-height: 1.35;
  position: relative;
}
.hero-invite {
  max-width: 560px;
  margin: 6px auto 22px;
  font-family: 'Heebo', sans-serif;
  font-size: clamp(14px, 2.2vw, 16px);
  color: #4b5563;
  line-height: 1.7;
  text-align: center;
}
.hero-features {
  margin: 22px auto 0;
  max-width: 760px;
  padding: 0 12px;
  width: 100%;
}
.hero-features-title {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #8b6508;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.hero-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) {
  .hero-features-grid { grid-template-columns: repeat(4, 1fr); }
}
.hero-feature-tile {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(168, 128, 10, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  text-align: start;
}
.hero-feature-tile:hover {
  background: rgba(212, 160, 23, 0.1);
  border-color: rgba(168, 128, 10, 0.55);
  transform: translateY(-1px);
}
.hero-feature-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.hero-feature-label { flex: 1; }
@media (max-width: 480px) {
  .hero-features-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-feature-tile { padding: 10px 12px; font-size: 13px; }
  .hero-feature-icon { font-size: 19px; }
}

/* ───────── Buttons ───────── */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border: none; cursor: pointer;
  background: var(--gradient-gold);
  color: #0a0e1a;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(240, 200, 80, 0.2);
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(240, 200, 80, 0.35);
}
.btn.ghost {
  background: transparent;
  color: var(--sky);
  border: 1px solid var(--border-sky);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--sky-glow);
  border-color: var(--sky);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ───────── Sections ───────── */
section { padding: 80px 20px; }
.container { max-width: 1100px; margin: 0 auto; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: var(--tracking-display);
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 900;
}
.section-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 48px;
  font-size: 15px;
  letter-spacing: 0.3px;
}

/* ───────── How it works ───────── */
.how { background: var(--bg-2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 22px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.step:hover {
  border-color: var(--border-sky);
  box-shadow: var(--shadow-sky);
  transform: translateY(-2px);
}
.step .ico { font-size: 40px; margin-bottom: 12px; }
.step h3 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 20px;
  letter-spacing: var(--tracking-display);
  margin-bottom: 8px;
  font-weight: 900;
}
.step p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ───────── Circles ───────── */
.circles { background: var(--bg-3); }
.circle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.circle-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s;
}
.circle-card:hover {
  border-color: var(--border-sky);
  box-shadow: var(--shadow-sky);
}
.circle-card h4 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 19px;
  letter-spacing: var(--tracking-display);
  font-weight: 800;
}
.circle-card .purpose { color: var(--text); font-size: 14px; min-height: 36px; }
.circle-card .meta { color: var(--muted); font-size: 12px; }
.progress {
  width: 100%; height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}
.progress > div {
  height: 100%;
  background: var(--gradient-sky);
  transition: width .6s ease;
  border-radius: 3px;
}
.progress-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--sky);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.complete-badge {
  display: inline-block; padding: 3px 10px;
  font-size: 11px; font-weight: 700;
  background: var(--gradient-gold);
  color: #0a0e1a;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* ───────── Tokenomics ───────── */
.tokenomics { background: var(--bg-2); }
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.tk-pie {
  width: 280px; height: 280px;
  border-radius: 50%;
  background: conic-gradient(
    var(--gold) 0% 40%,
    var(--sky) 40% 60%,
    var(--sky-deep) 60% 75%,
    #ff6b9d 75% 85%,
    #2ecc71 85% 95%,
    #c0c8d8 95% 100%
  );
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  position: relative;
}
.tk-pie::after {
  content: '1B THL';
  position: absolute; inset: 30%;
  background: var(--bg-2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--gold);
  font-size: 22px; font-weight: 900;
}
.tk-list { list-style: none; }
.tk-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.tk-list .dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.tk-list .pct {
  color: var(--muted); margin-right: auto;
  font-family: 'JetBrains Mono', monospace;
}

/* ───────── Stats ───────── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 900px; margin: 30px auto 0; }
.stat-box {
  text-align: center;
  padding: 20px 16px;
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .2s;
}
.stat-box:hover { border-color: var(--border-gold); }
.stat-box .v {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 30px;
  color: var(--gold);
  font-weight: 900;
}
.stat-box .l {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ───────── Modal ───────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  animation: fade .2s ease;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  max-width: 480px; width: 100%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  animation: slideUp .25s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h3 {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--gold);
  font-size: 22px;
  margin-bottom: 16px;
  font-weight: 700;
}
.modal label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 600;
}
.modal input, .modal textarea, .modal select {
  width: 100%; padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  outline: none;
  direction: rtl;
  transition: border-color .15s, box-shadow .15s;
}
.modal input:focus, .modal textarea:focus, .modal select:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 2px var(--sky-glow);
}
.modal .actions { display: flex; gap: 10px; margin-top: 22px; }
.modal .close-x {
  float: left;
  cursor: pointer;
  color: var(--muted);
  font-size: 22px;
  transition: color .15s;
}
.modal .close-x:hover { color: var(--sky); }
.modal.wide { max-width: 720px; }

/* ───────── Footer ───────── */
footer {
  background: var(--bg-3);
  padding: 50px 20px 30px;
  border-top: 1px solid var(--border);
  text-align: center;
}
footer .brand {
  font-family: 'Frank Ruhl Libre', serif;
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 22px; font-weight: 700;
  margin-bottom: 8px;
}
footer .links { display: flex; gap: 22px; justify-content: center; margin: 16px 0; }
footer .links a { color: var(--muted); font-size: 13px; }
footer .links a:hover { color: var(--sky); }
footer .copy { color: var(--muted); font-size: 11px; margin-top: 14px; letter-spacing: 0.5px; }

/* ───────── Animations ───────── */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: slideUp .5s ease both; }

/* ───────── Leaderboard ───────── */
.leaderboard { background: var(--bg-3); }
.lb-table {
  width: 100%; border-collapse: collapse;
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lb-table th {
  text-align: right; padding: 12px 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(229, 221, 208, 0.5);
  border-bottom: 1px solid var(--border);
}
.lb-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.5);
  font-size: 14px;
  color: var(--text);
}
.lb-table tr:last-child td { border-bottom: 0; }
.lb-table tr:hover td { background: var(--bg-card-hover); }
.lb-table tr.gold td { background: rgba(240, 200, 80, 0.06); }
.lb-table tr.silver td { background: rgba(192, 200, 216, 0.05); }
.lb-table tr.bronze td { background: rgba(205, 127, 50, 0.05); }
.lb-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 800;
  width: 60px;
}
.lb-rank.gold { color: var(--gold); }
.lb-rank.silver { color: var(--silver); }
.lb-rank.bronze { color: #cd7f32; }
.lb-name { font-weight: 600; }
.lb-thl {
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* ───────── GhostWork ───────── */
.ghostwork { background: var(--bg-2); }
.gw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 10px; }
.gw-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.gw-card:hover {
  border-color: var(--border-sky);
  box-shadow: var(--shadow-sky);
  transform: translateY(-2px);
}
.gw-ico { font-size: 32px; }
.gw-title {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
}
.gw-prices { display: flex; gap: 12px; align-items: baseline; margin: 4px 0; flex-wrap: wrap; }
.gw-old { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.gw-thl {
  color: var(--gold);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
}
.gw-save {
  background: rgba(240, 200, 80, 0.12);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-gold);
}
.gw-btn {
  margin-top: auto;
  padding: 10px 16px;
  background: var(--gradient-gold);
  color: #0a0e1a;
  border: none; border-radius: 4px;
  font-weight: 700;
  font-family: inherit;
  text-align: center; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none; display: block;
  font-size: 14px;
}
.gw-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold); color: #0a0e1a; }

/* ───────── Psalm display ───────── */
.psalm-box {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  margin: 14px 0;
  max-height: 280px;
  overflow-y: auto;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  line-height: 2;
  color: #1a1a2e;
}
.psalm-box.en { font-family: 'Heebo', sans-serif; direction: ltr; text-align: left; font-size: 14px; line-height: 1.7; color: var(--text); }
.psalm-box .ref {
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.lang-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.lang-toggle button {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.lang-toggle button:hover { color: var(--sky); border-color: var(--border-sky); }
.lang-toggle button.active {
  background: var(--gradient-gold);
  color: #0a0e1a;
  border-color: var(--gold);
  font-weight: 700;
}

/* ───────── Mic ───────── */
.mic-row { display: flex; gap: 14px; align-items: center; margin: 16px 0; }
.mic-btn {
  width: 60px; height: 60px;
  border-radius: 8px;
  background: var(--gradient-sky);
  border: none; cursor: pointer;
  color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35);
  transition: transform .15s, box-shadow .15s;
}
.mic-btn:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5); }
/* [yakir 2026-05-19] Recording mic: GREEN (was red).
   Yakir's feedback: red looks like emergency / blocking action.
   Green communicates "listening, all good" — same signal as Zoom/Slack mic. */
.mic-btn.recording {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}

/* [yakir 2026-05-19] Live waveform — appears while recording.
   Driven by Web Audio API analyser, see iosStartRec(). */
.mic-waveform {
  flex: 1;
  height: 40px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center;
}
.mic-waveform canvas { width: 100%; height: 100%; display: block; }
.mic-status { color: #1d4029; font-size: 15px; font-weight: 800; flex: 1; line-height: 1.5; }

/* ───────── Daily quote card (Yakir 2026-05-18) ───────── */
.daily-quote-card {
  max-width: 720px;
  margin: 14px auto;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, rgba(95,163,114,0.06) 0%, rgba(212,175,55,0.05) 100%);
  border: 1.5px solid rgba(95,163,114,0.30);
  border-radius: 14px;
  direction: rtl;
  text-align: right;
  font-family: 'Frank Ruhl Libre', serif;
  color: #1d4029;
  box-shadow: 0 2px 8px rgba(46,90,61,0.06);
}
.daily-quote-card .dq-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: #5a3d0a;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.daily-quote-card .dq-day {
  font-size: 14px;
  font-weight: 700;
  color: #2e5a3d;
  margin-bottom: 6px;
}
.daily-quote-card .dq-title {
  font-size: 18px;
  font-weight: 800;
  color: #1d4029;
  margin-bottom: 10px;
  line-height: 1.4;
}
.daily-quote-card .dq-body {
  font-size: 15px;
  line-height: 1.85;
  color: #2a2a2a;
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.daily-quote-card .dq-source {
  font-size: 12px;
  font-style: italic;
  color: #6d5d3d;
  margin-bottom: 6px;
}
.daily-quote-card .dq-credit {
  font-size: 11px;
  color: #8a8a95;
  border-top: 1px dashed rgba(95,163,114,0.30);
  padding-top: 6px;
  text-align: center;
}
@media (max-width: 480px) {
  .daily-quote-card { margin: 12px 10px; padding: 14px 16px 10px; }
  .daily-quote-card .dq-title { font-size: 16px; }
  .daily-quote-card .dq-body  { font-size: 14px; }
}

/* ───────── Chapter grid ───────── */
.ch-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin: 14px 0; }
.ch-cell {
  aspect-ratio: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--muted);
  cursor: default;
  font-family: 'JetBrains Mono', monospace;
}
.ch-cell.read {
  background: var(--gradient-gold);
  color: #0a0e1a;
  border-color: var(--gold);
  font-weight: 700;
}
.ch-cell.pending {
  background: var(--sky-glow);
  color: var(--sky);
  border-color: var(--border-sky);
}

/* ───────── Onboarding ───────── */
.onb-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.onb-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--border);
  transition: all .25s;
}
.onb-dot.active {
  background: var(--sky);
  width: 24px;
}

/* ───────── Chips ───────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  padding: 5px 12px;
  border: 1px solid var(--border-sky);
  background: rgba(56, 189, 248, 0.06);
  color: var(--sky);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  transition: all .15s;
}
.chip:hover { border-color: var(--sky); background: var(--sky-glow); }
.chip.selected, .chip.gold {
  background: rgba(240, 200, 80, 0.1);
  border-color: var(--border-gold);
  color: var(--gold);
  font-weight: 600;
}
.chip.selected:hover, .chip.gold:hover { border-color: var(--gold); }

/* ───────── Profile cards ───────── */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.profile-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex; flex-direction: column; gap: 10px;
}
.profile-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-sky);
  box-shadow: var(--shadow-sky);
}
.profile-head { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 48px; height: 48px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 22px;
  font-weight: 800;
  color: #0a0e1a;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.profile-name {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--gold);
  font-size: 19px;
  font-weight: 700;
}
.profile-loc { color: var(--muted); font-size: 12px; }
.profile-bio { color: var(--text); font-size: 14px; min-height: 38px; line-height: 1.6; }
.profile-mission { color: var(--gold-soft); font-size: 13px; font-style: italic; }
.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  padding: 3px 9px;
  background: rgba(192, 200, 216, 0.08);
  border-radius: 3px;
  font-size: 11px;
  color: var(--silver);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.badge.gold {
  color: var(--gold);
  border-color: var(--border-gold);
  background: rgba(240, 200, 80, 0.08);
}

/* ───────── Search bar ───────── */
.search-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.search-bar input, .search-bar select {
  flex: 1; min-width: 180px;
  padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  direction: rtl;
  transition: border-color .15s, box-shadow .15s;
}
.search-bar input:focus, .search-bar select:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 2px var(--sky-glow);
}

/* ───────── Wallet ───────── */
.wallet {
  background: linear-gradient(145deg, #ffffff, #faf5e8);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.wallet h3 {
  color: var(--gold);
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px;
  margin-bottom: 16px;
  font-weight: 700;
}
.token-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.token-row:hover {
  border-color: var(--border-gold);
  background: rgba(240, 200, 80, 0.03);
}
.token-icon {
  font-size: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240, 200, 80, 0.08);
  border-radius: 6px;
  border: 1px solid var(--border-gold);
}
.token-info { flex: 1; }
.token-symbol { color: var(--silver-light); font-weight: 700; font-size: 15px; }
.token-name { color: var(--muted); font-size: 11px; }
.token-balance {
  color: var(--gold-soft);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
}

/* ───────── Text tabs ───────── */
.text-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; justify-content: center; }
.text-tab {
  padding: 10px 18px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  transition: all .15s;
}
.text-tab:hover { border-color: var(--border-sky); color: var(--sky); }
.text-tab.active {
  background: rgba(240, 200, 80, 0.1);
  border-color: var(--border-gold);
  color: var(--gold);
  font-weight: 700;
}
.text-tab .ico { font-size: 16px; }
.text-tab .ch { color: var(--muted); font-size: 11px; font-family: 'JetBrains Mono', monospace; }

/* ───────── Chat ───────── */
.chat-box {
  display: flex; flex-direction: column;
  height: 380px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.55;
}
.chat-bubble.mine {
  align-self: flex-end;
  background: rgba(240, 200, 80, 0.12);
  border: 1px solid var(--border-gold);
  color: var(--gold-soft);
}
.chat-bubble.theirs {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}
.chat-meta { display: flex; gap: 8px; font-size: 11px; margin-bottom: 4px; }
.chat-name { font-weight: 700; color: var(--sky); }
.chat-time { color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.chat-text { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.chat-input {
  display: flex; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: rgba(229, 221, 208, 0.4);
}
.chat-input input {
  flex: 1; padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  outline: none; direction: rtl;
  font-size: 14px;
  transition: border-color .15s;
}
.chat-input input:focus { border-color: var(--sky); }
.chat-input .btn { padding: 10px 18px; font-size: 13px; }

/* ───────── Marketplace ───────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 20px; }
.svc-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-gold);
}
.svc-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-sky);
  box-shadow: var(--shadow-sky);
}
.svc-cat {
  position: absolute; top: 14px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
}
.svc-title {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  padding-top: 22px;
}
.svc-desc {
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  min-height: 38px;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.svc-price .amt {
  color: var(--gold);
  font-size: 22px;
  font-weight: 800;
}
.svc-price .sym {
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 700;
}
.svc-provider {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.svc-provider:hover { color: var(--gold); }
.svc-provider:hover .svc-provider-name { text-decoration: underline; }
.svc-provider .avatar {
  width: 32px; height: 32px; font-size: 14px; border-radius: 50%;
  border: 1px solid var(--border); transition: border-color .15s;
}
.svc-provider .avatar img { border-radius: 50%; }
.svc-provider:hover .avatar { border-color: var(--gold); }
.svc-provider-name { font-weight: 600; }
.svc-btn {
  padding: 9px 16px;
  background: var(--gradient-gold);
  color: #0a0e1a;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  font-size: 13px;
  transition: transform .15s, box-shadow .15s;
}
.svc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold); }
.svc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ───────── Marketplace filter bar ───────── */
.mkt-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.mkt-filters input, .mkt-filters select {
  padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  direction: rtl;
  min-width: 160px;
  transition: border-color .15s, box-shadow .15s;
}
.mkt-filters input { flex: 1; min-width: 220px; }
.mkt-filters input:focus, .mkt-filters select:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 2px var(--sky-glow);
}

/* ───────── Status badges ───────── */
.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.status-pending { background: rgba(240, 200, 80, 0.12); color: var(--gold); border: 1px solid var(--border-gold); }
.status-accepted { background: var(--sky-glow); color: var(--sky); border: 1px solid var(--border-sky); }
.status-completed { background: rgba(46, 213, 115, 0.12); color: #2ecc71; border: 1px solid rgba(46, 213, 115, 0.3); }
.status-cancelled { background: rgba(255, 107, 157, 0.1); color: #ff6b9d; border: 1px solid rgba(255, 107, 157, 0.3); }

/* ───────── Mobile ───────── */
@media (max-width: 720px) {
  .steps, .stats-row, .tk-grid { grid-template-columns: 1fr; }
  .nav .links a { margin-left: 10px; font-size: 12px; }
  section { padding: 60px 16px; }
  .ch-grid { grid-template-columns: repeat(10, 1fr); }
  .lb-table th, .lb-table td { padding: 10px 8px; font-size: 12px; }
  .modal { padding: 24px; }
}


/* ── Live Reading Highlighter (2026-05-03) ── */
.psalm-highlight .pw {
  transition: color 0.25s ease, background-color 0.25s ease;
}
.psalm-highlight .pw-read {
  /* Per Damri 2026-05-11 (lev-hadavar pass 41): no font-weight change.
     Bold + padding caused layout reflow as the highlight advanced,
     pushing lines around and confusing readers. Color only. */
  color: #d4a017;
}
.psalm-highlight .pw-cur {
  /* Current word: color change + soft outline halo. NO padding, NO bold.
     The outline uses box-shadow (no layout impact) + bg tint. Width of
     the word stays identical to its non-highlighted state. */
  color: #1a1a2e;
  background: rgba(212, 160, 23, 0.35);
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.5);
}

/* C: ProfileCard share toast */
.card-share-toast {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 30, 0.94);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  animation: card-share-toast-in 0.18s ease-out;
  z-index: 5;
}
@keyframes card-share-toast-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* C: First Tanya landing page */
.tanya-landing {
  background: #0d0d18;
  color: #f1ecd8;
  font-family: 'Heebo', system-ui, -apple-system, sans-serif;
}
.tanya-landing .tl-h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 34px;
  color: #d4af37;
  margin: 0 0 22px;
  text-align: center;
}

/* HERO */
.tl-hero {
  position: relative;
  padding: 110px 20px 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(212,175,55,0.18), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(108,92,231,0.18), transparent 50%),
    linear-gradient(135deg, #0d0d18 0%, #1d1535 50%, #0d0d18 100%);
}
.tl-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.tl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: tl-float 12s ease-in-out infinite;
}
.tl-orb-a { width: 360px; height: 360px; background: #d4af37; top: -80px; left: -60px; }
.tl-orb-b { width: 280px; height: 280px; background: #6c5ce7; top: 30%; right: -40px; animation-delay: -4s; }
.tl-orb-c { width: 320px; height: 320px; background: #2ecc71; bottom: -120px; left: 30%; animation-delay: -8s; opacity: 0.35; }
@keyframes tl-float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(30px,-20px) scale(1.08); }
}
.tl-hero-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.tl-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 4px;
  color: #d4af37;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.4);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  text-transform: uppercase;
}
.tl-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.05;
  margin: 0 0 22px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.tl-shine {
  background: linear-gradient(90deg, #f6e7a8 0%, #d4af37 35%, #fff5cc 60%, #d4af37 85%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tl-shine 4s linear infinite;
}
@keyframes tl-shine {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.tl-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.75;
  color: #d8d3c0;
  max-width: 660px;
  margin: 0 auto 30px;
}
.tl-sub strong { color: #d4af37; }
.tl-cta-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-bottom: 24px;
}
.tl-cta-primary {
  background: linear-gradient(135deg, #f1c40f 0%, #d4af37 100%);
  color: #1a1a2e;
  border: none;
  padding: 16px 34px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(212,175,55,0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tl-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(212,175,55,0.5);
}
.tl-cta-ghost {
  border: 2px solid #d4af37 !important;
  color: #d4af37 !important;
  background: transparent !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.tl-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px;
  font-size: 13px;
  color: #a9a48f;
}
.tl-trust span { white-space: nowrap; }

/* STATS */
.tl-stats {
  max-width: 980px;
  margin: -40px auto 0;
  padding: 30px 28px 26px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.tl-stat { text-align: center; }
.tl-stat-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(26px, 3.5vw, 38px);
  color: #d4af37;
  font-weight: 700;
  line-height: 1.1;
}
.tl-stat-lbl {
  font-size: 13px;
  color: #a9a48f;
  margin-top: 4px;
}
.tl-progress-wrap {
  grid-column: 1 / -1;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.tl-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #d4af37 0%, #f1c40f 50%, #fff5cc 100%);
  border-radius: 999px;
  transition: width 0.6s ease;
  box-shadow: 0 0 12px rgba(241,196,15,0.6);
}
.tl-stats-foot {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: #d4af37;
  margin-top: 4px;
}

/* SECTIONS */
.tl-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 22px;
}

/* WHY CARDS */
.tl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.tl-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 16px;
  padding: 26px 22px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.06);
}
.tl-card-icon {
  font-size: 38px;
  margin-bottom: 10px;
}
.tl-card h3 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px;
  color: #fff;
  margin: 0 0 8px;
}
.tl-card p {
  color: #c8c2af;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.tl-card strong { color: #d4af37; }

/* HOW STEPS */
.tl-how { background: rgba(255,255,255,0.02); }
.tl-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  counter-reset: tl-step;
}
.tl-steps li {
  background: rgba(13,13,24,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
}
.tl-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37 0%, #f1c40f 100%);
  color: #1a1a2e;
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(212,175,55,0.35);
}
.tl-steps h4 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 6px;
}
.tl-steps p {
  color: #c8c2af;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* QUOTE */
.tl-quote {
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 28px;
  text-align: center;
  position: relative;
}
.tl-quote-mark {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 120px;
  line-height: 0.6;
  color: rgba(212,175,55,0.35);
  margin-bottom: 8px;
}
.tl-quote blockquote {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(22px, 3vw, 30px);
  color: #f3eed7;
  line-height: 1.55;
  margin: 0 0 14px;
  font-weight: 500;
}
.tl-quote cite {
  display: block;
  color: #d4af37;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 1px;
}

/* TOKEN */
.tl-token { background: linear-gradient(135deg, rgba(212,175,55,0.05), rgba(108,92,231,0.06)); }
.tl-token-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.tl-token-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #d8d3c0;
}
.tl-token-desc strong { color: #d4af37; }
.tl-bullets {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.tl-bullets li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(212,175,55,0.2);
  color: #f3eed7;
  font-size: 15px;
}
.tl-bullets li::before { content: '✦ '; color: #d4af37; }
.tl-coin-wrap { display: flex; justify-content: center; }
.tl-coin {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff5cc 0%, #d4af37 60%, #8b6508 100%);
  color: #1a1a2e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 92px;
  box-shadow: 0 20px 50px rgba(212,175,55,0.4), inset 0 -6px 14px rgba(0,0,0,0.3);
  animation: tl-coin-spin 16s linear infinite;
  font-family: 'Frank Ruhl Libre', serif;
}
.tl-coin span {
  font-size: 22px;
  letter-spacing: 4px;
  margin-top: -8px;
}
@keyframes tl-coin-spin {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(6deg) translateY(-6px); }
}

/* ABOUT */
.tl-about p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.65;
  color: #d8d3c0;
  text-align: center;
}

/* FINAL CTA */
.tl-final {
  margin-top: 20px;
  padding: 80px 22px 100px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.25), transparent 60%),
    linear-gradient(180deg, #0d0d18 0%, #1a1535 100%);
  text-align: center;
}
.tl-final-inner {
  max-width: 720px;
  margin: 0 auto;
}
.tl-final h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(30px, 4.5vw, 44px);
  color: #fff;
  margin: 0 0 14px;
}
.tl-final p {
  color: #d8d3c0;
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 26px;
}

@media (max-width: 720px) {
  .tl-token-grid { grid-template-columns: 1fr; gap: 24px; }
  .tl-stats { grid-template-columns: 1fr; gap: 14px; padding: 22px 18px; }
  .tl-section { padding: 56px 18px; }
  .tl-coin { width: 170px; height: 170px; font-size: 70px; }
}


/* === ReadModal chapter picker (added 2026-05-03 — collision-safe append) === */
.rm-chapter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.rm-chapter-current {
  font-weight: 700; font-size: 16px; color: #d4af37;
}
.rm-chapter-toggle { padding: 6px 14px; font-size: 13px; }
.rm-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  max-height: 280px; overflow-y: auto;
  padding: 10px; margin: 8px 0 14px;
  background: rgba(26, 26, 46, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
}
.rm-ch-cell {
  background: #fff; border: 1px solid #ece4d3; border-radius: 8px;
  padding: 8px 4px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .12s; color: #1a1a2e;
  font-family: inherit; min-height: 48px;
  position: relative;
}
.rm-ch-cell .rm-ch-num { line-height: 1.1; }
.rm-ch-cell .rm-ch-tier {
  /* [yakir 2026-05-18] tier coin badge, bottom-right corner of the cell */
  position: absolute; bottom: 1px; right: 2px;
  font-size: 9px; font-weight: 700; color: #8b6508;
  background: rgba(212,175,55,0.18);
  padding: 1px 4px; border-radius: 6px; line-height: 1.2;
  pointer-events: none;
}
.rm-ch-cell .rm-ch-avatar {
  /* [yakir 2026-05-18] reader initial, bottom-left corner of the cell */
  position: absolute; bottom: 1px; left: 2px;
  width: 14px; height: 14px;
  font-size: 9px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}
.rm-ch-cell.cur .rm-ch-tier { background: rgba(212,175,55,0.35); color: #fff; }
.rm-ch-cell:hover { transform: translateY(-1px); border-color: #d4af37; }
.rm-ch-cell.read {
  background: #d4af37; color: #1a1a2e; border-color: #b8941f; opacity: 0.85;
}
.rm-ch-cell.cur {
  background: #1a1a2e; color: #fff; border-color: #1a1a2e;
  box-shadow: 0 0 0 2px #d4af37;
}
.rm-ch-cell.read.cur { background: #1a1a2e; color: #d4af37; }
@media (max-width: 480px) {
  .rm-chapter-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); max-height: 240px; }
  .rm-ch-cell { padding: 6px 2px; font-size: 12px; min-height: 32px; }
}


/* === Hamburger nav (added 2026-05-03) === */
.nav-burger {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px; gap: 5px; flex-direction: column;
  width: 40px; height: 40px;
}
.nav-burger span {
  display: block; height: 3px; width: 22px; background: #d4af37; border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-drawer-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 998; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.nav-drawer-bg.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 280px; max-width: 85vw;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  z-index: 999; padding: 56px 0 24px;
  transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 24px rgba(0,0,0,.4);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-close {
  position: absolute; top: 12px; left: 12px; background: transparent; border: 0;
  color: #d4af37; font-size: 32px; cursor: pointer; padding: 4px 12px; line-height: 1;
}
.nav-drawer-brand {
  text-align: center; color: #d4af37; font-weight: 800; font-size: 22px;
  padding: 0 20px 18px; border-bottom: 1px solid rgba(212,175,55,.2);
  margin-bottom: 12px;
}
.nav-drawer-links {
  display: flex; flex-direction: column;
}
.nav-drawer-links a {
  color: #f4f1eb; padding: 14px 24px; cursor: pointer; font-size: 16px;
  border-right: 3px solid transparent; transition: background .15s, border-color .15s;
}
.nav-drawer-links a:hover { background: rgba(212,175,55,.08); }
.nav-drawer-links a.active {
  color: #d4af37; background: rgba(212,175,55,.12); border-right-color: #d4af37;
  font-weight: 700;
}
@media (max-width: 820px) {
  .nav-links-desktop { display: none !important; }
  .nav-burger { display: flex; }
}
@media (min-width: 821px) {
  .nav-burger, .nav-drawer, .nav-drawer-bg { display: none !important; }
}
.btn.ghost.recording { background: #ff6b9d; color: #fff; }

/* === Unified landing copy (round 6) === */
.tl-intro { padding-top: 50px; padding-bottom: 16px; }
.tl-lead {
  font-size: clamp(15px, 2vw, 18px);
  color: #d8d3c0;
  line-height: 1.65;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.tl-lead strong { color: #d4af37; }
.tl-uses { padding-top: 30px; }
.tl-steps-bullets {
  list-style: none;
  padding: 0;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tl-steps-bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 14px;
  padding: 16px 20px;
  color: #d8d3c0;
  font-size: 15px;
  line-height: 1.55;
}
.tl-steps-bullets li strong { color: #d4af37; }
.tl-bullet-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

/* === Round 7: Read modal redesign === */
.mic-row-top {
  /* [yakir 2026-05-18 pass3] strip the cream box — plain row, bold status text. */
  margin: 10px 0 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.psalm-box-large {
  max-height: 420px;
  font-size: 18px;
  line-height: 2.1;
  padding: 22px 24px;
}
@media (max-width: 720px) {
  .psalm-box-large { max-height: 320px; font-size: 17px; line-height: 2.0; padding: 18px 20px; }
}
.rm-meta-strip {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 4px 0 10px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: #6b6b6b;
  font-weight: 600;
}
.rm-meta-strip span {
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(168,128,10,0.22);
  border-radius: 999px;
  padding: 5px 14px;
}
.transcript-large {
  min-height: 140px;
  font-size: 15px;
  line-height: 1.6;
}

/* === Circles section header + reveal-all (Damri round 5 — top 3 default) === */
.circles-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 880px;
  margin: 22px auto 8px;
  padding: 0 4px;
  font-family: 'Frank Ruhl Libre', serif;
}
.circles-section-icon { font-size: 22px; line-height: 1; }
.circles-section-title {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a2e;
  flex: 1;
}
.circles-section-sub {
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: #6b6b6b;
}
.circles-reveal-row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.circles-reveal-btn {
  background: transparent;
  border: 1px solid rgba(168, 128, 10, 0.45);
  border-radius: 10px;
  padding: 12px 26px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #8b6508;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.circles-reveal-btn:hover {
  background: rgba(212, 160, 23, 0.08);
  border-color: rgba(168, 128, 10, 0.8);
  transform: translateY(-1px);
}

/* === Circles Phase 2 — CTAs, filter, avatars (2026-05-04) === */
.circles-cta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 28px auto 16px;
  max-width: 720px;
}
@media (min-width: 600px) {
  .circles-cta-row { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.circles-cta-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: #fff;
  border: 2px solid rgba(168, 128, 10, 0.28);
  border-radius: 14px;
  padding: 14px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s, border-color .15s, box-shadow .15s, background .15s;
  min-height: 86px;
}
.circles-cta-btn:hover {
  border-color: rgba(168, 128, 10, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(168, 128, 10, 0.12);
}
.circles-cta-btn.active {
  border-color: #d4a017;
  background: rgba(212, 160, 23, 0.08);
}
.circles-cta-btn.primary {
  background: var(--gradient-gold);
  border-color: transparent;
  color: #fff;
}
.circles-cta-btn.primary .circles-cta-sub { color: rgba(255,255,255,0.85); }
.circles-cta-btn.primary:hover { box-shadow: 0 10px 26px rgba(168, 128, 10, 0.3); }
.circles-cta-icon { font-size: 22px; line-height: 1; }
.circles-cta-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}
.circles-cta-sub {
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  color: #6b6b6b;
}

.circle-filters { margin: 14px auto 6px; max-width: 880px; }
.circle-filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 12px;
}
.circle-chip {
  background: #fff;
  border: 1px solid rgba(168, 128, 10, 0.3);
  border-radius: 20px;
  padding: 7px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: #1a1a2e;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.circle-chip:hover { background: rgba(212, 160, 23, 0.08); }
.circle-chip.active {
  background: var(--gradient-gold);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.circle-filter-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: center; padding: 0 8px;
}
.circle-search {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  background: #fff;
  border: 1px solid rgba(168, 128, 10, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a2e;
  direction: rtl;
}
.circle-search:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}
.circle-toggle {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
}
.circle-toggle input { cursor: pointer; }

/* Member avatars on circle cards */
.circle-members {
  display: flex; align-items: center; gap: 4px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.circle-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  user-select: none;
}
.circle-avatar + .circle-avatar { margin-right: -8px; }
.circle-avatar-more {
  background: #4b5563 !important;
  font-size: 11px !important;
  font-weight: 600;
}
.circle-members-count {
  margin-right: 12px;
  font-size: 12px;
  color: #6b6b6b;
  font-family: 'Heebo', sans-serif;
}

/* === Journey (8-step user flow, added 2026-05-04) === */
.journey {
  padding: 60px 16px 70px;
  background: linear-gradient(180deg, rgba(245, 240, 232, 0.4) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-top: 1px solid rgba(168, 128, 10, 0.15);
}
.journey .container { max-width: 880px; margin: 0 auto; }
.journey-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .journey-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.journey-step {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(168, 128, 10, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.journey-step:hover {
  border-color: rgba(168, 128, 10, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(168, 128, 10, 0.08);
}
.journey-step.done {
  background: rgba(212, 160, 23, 0.06);
  border-color: rgba(168, 128, 10, 0.45);
}
.journey-step-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 17px;
  font-family: 'Heebo', sans-serif;
}
.journey-step.done .journey-step-num {
  background: #2d6a4f;
  color: #fff;
}
.journey-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.journey-step-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.35;
}
.journey-step-ico { font-size: 20px; line-height: 1; }
.journey-step-desc {
  font-family: 'Heebo', sans-serif;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.6;
}
.journey-step-cta {
  margin-top: 6px;
  align-self: flex-start;
  background: transparent;
  color: #8b6508;
  border: 1px solid rgba(168, 128, 10, 0.45);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.journey-step-cta:hover {
  background: rgba(212, 160, 23, 0.1);
  border-color: rgba(168, 128, 10, 0.7);
}
.journey-step-cta:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 480px) {
  .journey-step { padding: 14px; gap: 12px; }
  .journey-step-num { width: 34px; height: 34px; font-size: 15px; }
  .journey-step-title { font-size: 15.5px; }
  .journey-step-desc { font-size: 13px; }
}

/* === A: Vision Page === */
.vision-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 18px 60px;
  color: var(--text);
}
.vision-hero { text-align: center; padding: 24px 12px 8px; }
.vision-hero h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 36px;
  color: var(--gold);
  margin: 0 0 10px;
}
.vision-summary { color: var(--text); font-size: 16px; margin: 0; }
.vision-empty-cta { color: var(--muted); font-size: 14px; }
.vision-loading { text-align: center; padding: 40px 0; color: var(--muted); }

.vision-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 28px 0 22px;
}
.vision-horizon-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.vision-horizon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.vision-horizon-head h3 {
  margin: 0;
  font-size: 17px;
  color: var(--gold);
  font-family: 'Frank Ruhl Libre', serif;
}
.vision-horizon-count {
  background: rgba(212, 160, 23, 0.15);
  color: var(--gold);
  font-size: 11px;
  border-radius: 10px;
  padding: 2px 9px;
  font-family: 'JetBrains Mono', monospace;
}
.vision-horizon-hint {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.vision-milestone-list { list-style: none; padding: 0; margin: 0 0 8px; }
.vision-milestone-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.vision-milestone-item:first-child { border-top: 0; }
.vision-milestone-item.done .vision-milestone-title {
  text-decoration: line-through;
  opacity: 0.6;
}
.vision-milestone-check {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  flex: 0 0 auto;
  padding: 0;
}
.vision-milestone-item.done .vision-milestone-check {
  background: var(--gold);
  color: #fff;
}
.vision-milestone-body { flex: 1 1 auto; min-width: 0; }
.vision-milestone-title { font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.vision-milestone-date { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.vision-milestone-del {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  flex: 0 0 auto;
}
.vision-milestone-del:hover { color: #d63b75; }
.vision-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 6px 0;
}

.vision-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.vision-add-row input[type="text"] {
  flex: 1 1 120px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 13px;
}
.vision-add-row input[type="date"] {
  flex: 0 0 130px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 12px;
}
.vision-add-row .btn { padding: 6px 12px; font-size: 13px; }

.vision-progress {
  margin: 18px 0 26px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
}
.vision-progress-label {
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  margin-bottom: 8px;
}
.vision-progress-bar {
  background: var(--bg-input);
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
}
.vision-progress-fill {
  height: 100%;
  background: var(--gradient-gold);
  transition: width 0.4s ease;
}

.vision-reflect {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.vision-reflect h3 {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: 'Frank Ruhl Libre', serif;
}
.vision-reflect textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.vision-reflect .btn { margin-top: 4px; }
.vision-reflect-list { margin-top: 16px; }
.vision-reflect-list-title { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.vision-reflect-item {
  padding: 10px 12px;
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 8px;
}
.vision-reflect-date { color: var(--gold); font-size: 11px; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }
.vision-reflect-text { color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

.vision-retake {
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vision-error {
  color: #d63b75;
  font-size: 13px;
  margin: 8px 0;
}

/* Tile inside MyProfile, until Damri adds Nav entry */
.vision-entry-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.10), rgba(212, 160, 23, 0.03));
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vision-entry-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}
.vision-entry-tile-icon { font-size: 28px; flex: 0 0 auto; }
.vision-entry-tile-text { flex: 1 1 auto; min-width: 0; }
.vision-entry-tile-title { color: var(--gold); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.vision-entry-tile-sub { color: var(--muted); font-size: 12px; }
.vision-entry-tile-arrow { color: var(--gold); font-size: 20px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .vision-timeline { grid-template-columns: 1fr; }
  .vision-page { padding: 18px 12px 40px; }
  .vision-hero h1 { font-size: 28px; }
}


/* ───────── Toast notifications (inline, no alert/prompt) ───────── */
.thl-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a2e;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(212,175,55,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 9999;
  direction: rtl;
  font-family: 'Frank Ruhl Libre', system-ui, sans-serif;
  max-width: 90vw;
  text-align: center;
}
.thl-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ───────── Share modal (desktop fallback, mobile uses native) ───────── */
.share-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,30,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
  padding: 20px;
}
.share-modal {
  background: #fafaf7;
  color: #1a1a2e;
  border-radius: 16px;
  padding: 22px 24px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  direction: rtl;
  font-family: 'Frank Ruhl Libre', serif;
}
.share-modal h3 {
  margin: 0 0 6px;
  color: #8b6508;
  font-size: 18px;
}
.share-modal .share-link {
  background: #fff;
  border: 1px solid #e0d8c3;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #555;
  word-break: break-all;
  margin: 12px 0;
  font-family: monospace;
}
.share-modal .share-row {
  display: flex; gap: 10px; margin-top: 14px;
  flex-wrap: wrap;
}
.share-modal .share-btn {
  flex: 1 1 100px;
  min-width: 100px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 80ms;
}
.share-modal .share-btn:active { transform: scale(0.97); }
.share-modal .share-btn.wa  { background: #25d366; color: #fff; }
.share-modal .share-btn.tg  { background: #2aabee; color: #fff; }
.share-modal .share-btn.copy { background: #d4af37; color: #1a1a2e; }
.share-modal .share-close {
  margin-top: 14px; width: 100%;
  background: none; border: 1px solid #d0c8b0;
  padding: 9px; border-radius: 8px;
  color: #555; cursor: pointer; font-family: inherit;
}


/* ━━━━━━ Marketplace v2 — Yakir spec 2026-05-05 ━━━━━━ */
.amount-input-wrap{position:relative;display:flex;align-items:center;margin-bottom:12px}
.amount-input-big{
  flex:1;
  font-size:28px !important;
  font-weight:800 !important;
  font-family:'Frank Ruhl Libre',serif !important;
  text-align:center !important;
  padding:14px 70px 14px 14px !important;
  border:2px solid #e6dba8 !important;
  border-radius:12px !important;
  background:#fffdf5 !important;
  color:#7a5a06 !important;
  width:100% !important;
  box-sizing:border-box !important;
  letter-spacing:.5px;
}
.amount-input-big:focus{border-color:#d4af37 !important;outline:none !important;box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.amount-input-suffix{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-family:'Heebo',sans-serif; font-size:14px; font-weight:700;
  color:#b8860b; background:rgba(212,175,55,.12);
  padding:5px 10px; border-radius:6px; pointer-events:none; letter-spacing:.5px;
}
.req-mark{color:#c0392b;font-weight:800;margin-right:3px}

.svc-price-big{
  background:linear-gradient(135deg,#fffdf5,#fff7e6);
  border:1.5px solid #e6dba8; border-radius:12px;
  padding:10px 14px; margin:10px 0;
  display:flex; align-items:baseline; justify-content:center; gap:6px;
}
.svc-price-big .amt{
  font-family:'Frank Ruhl Libre',serif; font-size:30px; font-weight:800;
  color:#7a5a06; line-height:1;
}
.svc-price-big .sym{font-size:14px;font-weight:700;color:#b8860b;letter-spacing:.5px}

.svc-appreciation{
  display:flex; align-items:flex-start; gap:8px;
  background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.28);
  border-radius:9px; padding:9px 12px; margin-top:8px;
  font-size:13px; line-height:1.55; color:#1e6d3d;
}
.svc-appreciation-icon{flex-shrink:0;font-size:16px;line-height:1.2}
.svc-appreciation-txt{flex:1;font-weight:500}

.req-price-big{
  font-family:'Frank Ruhl Libre',serif; font-size:26px; font-weight:800;
  color:#7a5a06; background:rgba(212,175,55,.12);
  padding:6px 14px; border-radius:9px; letter-spacing:.5px;
}

.pay-slider-wrap{
  margin:14px 0; background:rgba(255,255,255,.04);
  border:1px solid rgba(212,175,55,.25); border-radius:11px;
  padding:12px 14px;
}
.pay-slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.pay-slider-head label{margin:0;font-size:13px;font-weight:600}
.pay-slider-value{font-size:13px;color:#8a8da8}
.pay-slider-value strong{color:#d4af37;font-family:'Frank Ruhl Libre',serif;font-size:16px;font-weight:800}
.pay-slider-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pay-slider-btn{
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  color:#c8c8d8; padding:9px 4px; border-radius:9px;
  font-family:'Heebo',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; transition:all .15s;
}
.pay-slider-btn:hover{border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.08)}
.pay-slider-btn.active{
  background:linear-gradient(135deg,#b8860b,#d4af37);
  border-color:#d4af37; color:#fff;
  box-shadow:0 4px 12px rgba(184,134,11,.3);
}
.pay-slider-note{
  margin-top:9px; font-size:12.5px; color:#fcd34d;
  background:rgba(245,158,11,.08); padding:7px 10px;
  border-radius:7px; border:1px solid rgba(245,158,11,.25);
  line-height:1.5;
}

.svc-card.wish-promoted{
  background:linear-gradient(180deg,rgba(212,175,55,.06),rgba(212,175,55,.02)) !important;
  border:1.5px solid rgba(212,175,55,.35) !important;
  position:relative;
}
.wish-promo-badge{
  position:absolute; top:-9px; right:14px;
  background:linear-gradient(135deg,#b8860b,#d4af37);
  color:#fff; padding:3px 11px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 2px 8px rgba(184,134,11,.35);
}


/* ═══════════════════════════════════════════════════════════════════
 * orientation rotation support — added [yakir pass 39] 2026-05-13
 *
 * Goal: enable comfortable reading on tablets in landscape, and prevent
 * the modal from breaking on phones in landscape.
 *
 * The existing breakpoints are WIDTH-based (480/640/720/820), but a phone
 * in landscape has WIDTH > 720 (desktop styles apply) and HEIGHT < 500
 * (vertical space catastrophically reduced). Without these rules the
 * modal max-height: 90vh = 351px on iPhone 14 landscape — and the
 * psalm-box-large alone wants 420px. The modal would overflow / clip
 * the submit button below the fold.
 *
 * Two separate concerns:
 *   1. SHORT screens (any device whose height ≤ 500px): tighten chrome,
 *      keep psalm visible, keep submit reachable.
 *   2. WIDE tablet landscape (min-width:768 + orientation:landscape):
 *      a richer canvas — wider modal, generous reading area.
 * ═══════════════════════════════════════════════════════════════════ */

/* ---- SHORT screens: phone landscape, small tablets in landscape ---- */
@media (max-height: 500px) {
  .modal-bg { padding: 10px; }
  .modal {
    max-height: 96vh;
    padding: 20px 24px;
  }
  .modal h3 { font-size: 18px; margin-bottom: 10px; }
  .modal label { margin: 8px 0 4px; }

  /* [yakir pass 43] Reading: bumped 16→18px for comfort in landscape.
     Compensated max-height 48vh→44vh so submit button stays reachable. */
  .psalm-box-large {
    max-height: 44vh;
    font-size: 18px;
    line-height: 1.95;
    padding: 14px 20px;
  }
  .psalm-box-large + div { font-size: 11px; }  /* "קרי וכתיב" hint */

  /* Mic stays prominent but smaller */
  .mic-btn { width: 52px; height: 52px; font-size: 22px; }
  .mic-status { font-size: 12px; }

  /* Chapter picker: tighter grid */
  .rm-chapter-grid { max-height: 140px; }

  /* Post-chapter doors: switch from vertical stack to 2-column grid
     so all 6 (5 buttons + 1 about link) are reachable without scroll. */
  .gate-doors {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .gate-doors > button, .gate-doors > a {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
}

/* ---- TINY screens (older phones, height ≤ 380px) ---- */
@media (max-height: 380px) {
  .psalm-box-large { max-height: 38vh; font-size: 16px; line-height: 1.85; }
  .modal h3 { font-size: 16px; }
  .gate-doors > button, .gate-doors > a {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ---- TABLET landscape: the sweet spot ---- */
@media (min-width: 768px) and (orientation: landscape) and (min-height: 500px) {
  .modal.wide {
    max-width: 880px;  /* wider canvas - more text per line, less scrolling */
  }
  .psalm-box-large {
    max-height: 58vh;  /* generous reading area */
    font-size: 21px;
    line-height: 2.2;
    padding: 26px 30px;
  }
  /* Doors: 2-column grid on tablet landscape too - feels balanced on wide screen */
  .gate-doors {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
}

/* ---- LARGE tablet landscape (iPad Pro, etc) ---- */
@media (min-width: 1024px) and (orientation: landscape) {
  .modal.wide { max-width: 980px; }
  .psalm-box-large { font-size: 22px; line-height: 2.25; }
}


/* [yakir pass 42] Mosaic celebration animation - the just-completed chapter
 * blooms from tiny+invisible to its full bright form, with a brief peak
 * scale to celebrate completion. */
@keyframes mosaicBloom {
  0%   { transform: scale(0.3); opacity: 0; box-shadow: 0 0 0 rgba(243,198,74,0); }
  55%  { transform: scale(1.35); opacity: 1; box-shadow: 0 0 24px rgba(243,198,74,0.95); }
  100% { transform: scale(1.0); opacity: 1; box-shadow: 0 0 14px rgba(243,198,74,0.85); }
}


/* User size overrides — applied to .psalm-box-large AND its inner
   .psalm-highlight + .pw spans. The HighlightedPsalm component renders
   the text inside an inline <span class="psalm-highlight"> with each
   word as <span class="pw">. font-size cascades through inheritance,
   but to be bulletproof across all browser quirks we set it explicitly
   at all three levels.
   .user-size-md is the default - no rule needed (responsive CSS handles it). */
.psalm-box-large.user-size-sm,
.psalm-box-large.user-size-sm .psalm-highlight,
.psalm-box-large.user-size-sm .psalm-highlight .pw {
  font-size: 15px !important;
  line-height: 1.95 !important;
}
.psalm-box-large.user-size-lg,
.psalm-box-large.user-size-lg .psalm-highlight,
.psalm-box-large.user-size-lg .psalm-highlight .pw {
  font-size: 23px !important;
  line-height: 2.20 !important;
}

/* On really tiny screens, even the lg size needs to come down a touch
   so the submit button stays reachable. */
@media (max-height: 380px) {
  .psalm-box-large.user-size-lg,
  .psalm-box-large.user-size-lg .psalm-highlight,
  .psalm-box-large.user-size-lg .psalm-highlight .pw {
    font-size: 19px !important;
    line-height: 2.0 !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
 * [yakir pass 46] Reader controls - REDESIGN for unmistakable clarity.
 * Two stacked controls above the chapter text:
 *   1. AUDIO play row (full-width, emerald) - the big obvious play
 *   2. SIZE pill (gold) with - / current / + pattern
 * Inline style on .psalm-highlight (via HighlightedPsalm props) makes
 * the size change immune to CSS inheritance quirks.
 * ═══════════════════════════════════════════════════════════════════ */

.reader-controls {
  /* [yakir 2026-05-18 pass3] play + size MUST share one row. nowrap + min-width:0 on items. */
  display: flex; flex-direction: row; align-items: stretch;
  gap: 8px;
  margin: 8px 0 8px;
  flex-wrap: nowrap;
  direction: rtl;
}

/* AUDIO play row - big, obvious, emerald */
.reader-play-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(95,163,114,0.12) 0%, rgba(46,90,61,0.08) 100%);
  border: 2px solid rgba(46,90,61,0.45);
  border-radius: 12px;
  color: #1d4029;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  height: 50px;  /* [yakir pass 47] explicit height matches size row */
}
.reader-play-row:hover, .reader-play-row:active {
  background: linear-gradient(135deg, rgba(95,163,114,0.22) 0%, rgba(46,90,61,0.14) 100%);
}
.reader-play-row:active { transform: scale(0.98); }
.reader-play-row.speaking {
  background: linear-gradient(135deg, #5fa372 0%, #3a8050 100%);
  border-color: #1d4029;
  color: #fff;
  animation: playPulse 1.5s ease-in-out infinite;
}
.reader-play-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  font-size: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.40);
  color: #1d4029;
}
.reader-play-row.speaking .reader-play-icon {
  background: rgba(255,255,255,0.60);
}
.reader-play-label { letter-spacing: 0.3px; }

@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95,163,114,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(95,163,114,0); }
}

/* SIZE row - explicit - / current / + pattern */
.reader-size-row {
  /* [yakir 2026-05-18 pass3] compact, fixed-content size so it shares the row with play. */
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, rgba(184,148,31,0.04) 100%);
  border: 2px solid rgba(212,175,55,0.40);
  border-radius: 12px;
  gap: 12px;
}
.reader-size-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 14px; font-weight: 700;
  color: #5a3d0a;
}
.reader-size-pill {
  display: inline-flex; align-items: stretch;
  background: rgba(212,175,55,0.10);
  border: 1.5px solid rgba(212,175,55,0.55);
  border-radius: 100px;
  overflow: hidden;
}
.reader-size-step {
  width: 32px; height: 30px;
  padding: 0; margin: 0;
  background: transparent;
  border: none;
  font-size: 22px; font-weight: 800;
  color: #5a3d0a;
  cursor: pointer;
  font-family: 'Frank Ruhl Libre', serif;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: rgba(212,175,55,0.30);
  line-height: 1;
}
.reader-size-step:hover:not(:disabled),
.reader-size-step:active:not(:disabled) {
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  color: #1a1a2e;
}
.reader-size-step:disabled {
  opacity: 0.30;
  cursor: default;
}
.reader-size-state {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 50px; padding: 0 10px; height: 30px;
  background: linear-gradient(135deg, rgba(212,175,55,0.18) 0%, rgba(184,148,31,0.12) 100%);
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 14px; font-weight: 700;
  color: #5a3d0a;
  border-left: 1.5px solid rgba(212,175,55,0.55);
  border-right: 1.5px solid rgba(212,175,55,0.55);
  letter-spacing: 0.4px;
}

/* === Multi-part Tanya picker (Damri 2026-05-16) === */
/* Outer wrapper takes the role the flat .rm-chapter-grid used to play:
   it's the scrollable container with the gold border. Each section
   inside has its own contained grid with no border so the outer frame
   reads as one continuous "book" rather than fragmented boxes. */
.rm-multipart-wrap {
  max-height: 320px; overflow-y: auto;
  padding: 4px 8px 8px;
  background: rgba(26, 26, 46, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  margin: 8px 0 14px;
}
.rm-part-section { margin: 0 0 10px; }
.rm-part-section:last-child { margin-bottom: 0; }
/* Dashed gold divider between parts — visible but light, the שערים feel.
   Only between parts (not above the first), achieved via adjacent-sibling. */
.rm-part-section + .rm-part-section {
  border-top: 1px dashed rgba(212, 175, 55, 0.40);
  padding-top: 12px;
}
/* Sticky header inside the scroll container. As the reader scrolls through
   53 cells of לקוטי אמרים and enters the next part, the header swaps
   smoothly — "📗 שער היחוד והאמונה" — without the reader losing context. */
.rm-part-header {
  position: sticky; top: -4px; z-index: 2;
  margin: 0 -2px;
  padding: 8px 6px 6px;
  background: linear-gradient(180deg, rgba(255,253,247,0.97) 0%, rgba(255,253,247,0.90) 100%);
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 14px; font-weight: 700;
  color: #5a3d0a;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rm-part-icon { font-size: 18px; line-height: 1; }
.rm-part-name { font-weight: 700; }
.rm-part-count {
  font-size: 11.5px; font-weight: 500;
  color: #8a6d3a; font-style: italic;
  margin-inline-start: auto;
}
/* Reset the per-section grid: the outer wrap already has the background +
   border + padding, so inner grids should be transparent and tight. */
.rm-part-section .rm-chapter-grid {
  background: transparent;
  border: 0;
  padding: 6px 0 4px;
  margin: 0;
  max-height: none;
  overflow: visible;
}
@media (max-width: 480px) {
  .rm-multipart-wrap { max-height: 260px; }
  .rm-part-header { font-size: 13px; }
  .rm-part-icon { font-size: 16px; }
}

/* === Tanya landing — five-parts visualization (Damri 2026-05-16) === */
/* Sits between tl-stats and tl-intro on /tanya. The grid auto-fits 1–3 cards
   per row depending on viewport. Cards are quiet — gold accent on icon, name
   in Frank Ruhl Libre, small shaar line in muted italic. The point isn't
   sales; it's letting the visitor SEE that the book is bigger than they
   thought and that they get to pick where to enter. */
.tl-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 6px auto 18px;
}
.tl-part-card {
  text-align: right;
  padding: 18px 16px 14px;
  background: linear-gradient(160deg, rgba(255, 253, 247, 0.04) 0%, rgba(212, 175, 55, 0.06) 100%);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  color: #e8e6f0;
}
.tl-part-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.10);
}
.tl-part-card-icon {
  font-size: 36px; line-height: 1;
  margin-bottom: 10px;
}
.tl-part-card-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 19px; font-weight: 700;
  color: #d4af37;
  margin-bottom: 6px;
  line-height: 1.25;
}
.tl-part-card-shaar {
  font-size: 13px; line-height: 1.55;
  color: #c8c6d8;
  margin-bottom: 10px;
  min-height: 38px;
  font-weight: 500;
}
.tl-part-card-count {
  font-size: 12px; font-weight: 700;
  color: #8a8597; letter-spacing: 0.2px;
}
.tl-parts-foot {
  text-align: center;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 16px; font-weight: 500;
  color: #d4af37;
  margin: 18px auto 0; max-width: 720px;
  font-style: italic;
}
.tl-parts-foot strong { color: #f5d75c; font-weight: 700; font-style: normal; }
@media (max-width: 480px) {
  .tl-parts-grid { gap: 10px; grid-template-columns: 1fr; }
  .tl-part-card { padding: 14px 14px 12px; }
  .tl-part-card-icon { font-size: 30px; margin-bottom: 8px; }
  .tl-part-card-name { font-size: 17px; }
  .tl-part-card-shaar { min-height: 0; }
}

/* === Per-circle delete button (Yakir 2026-05-16) === */
/* Same ghost base; a muted red hover so accidental hovers read as
   "destructive" without screaming on the default state. */
.circle-delete-btn {
  opacity: 0.65;
  transition: opacity .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.circle-delete-btn:hover {
  opacity: 1;
  border-color: rgba(220, 90, 90, 0.55);
  background: rgba(220, 90, 90, 0.08);
  color: #b94545;
}

/* ============================================================
   FeaturedCircleBadge — home hero entry to "המעגל הנבחר"
   (Yakir 2026-05-17). Replaces the older DailyChapterBadge slot.
   Compact card, gentle gold border, hover lifts; whole card is
   a tap target so the click language reads as "enter the circle"
   not "act on a control inside the card".
   ============================================================ */
.featured-circle-badge {
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 22px 16px;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.06) 0%, rgba(184, 148, 31, 0.10) 100%);
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  user-select: none;
}
.featured-circle-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.85);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.10) 0%, rgba(184, 148, 31, 0.15) 100%);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.18);
}
.featured-circle-badge:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.85);
  outline-offset: 3px;
}
.fcb-eyebrow {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: #b8941f;
  text-transform: none;
  margin-bottom: 8px;
  font-style: italic;
}
.fcb-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: #d4af37;
  margin: 0 0 6px;
  letter-spacing: 0.3px;
}
.fcb-sub {
  font-size: 13.5px;
  font-weight: 500;
  color: #c8c6d8;
  margin-bottom: 10px;
}
.fcb-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 6px;
  font-size: 12.5px; color: #8a8597;
  margin-bottom: 12px;
}
.fcb-stats strong { color: #d4af37; font-weight: 700; }
.fcb-dot { opacity: 0.5; }
.fcb-cta {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: #d4af37; letter-spacing: 0.3px;
  background: rgba(26, 26, 46, 0.20);
  transition: background .15s ease, border-color .15s ease;
}
.featured-circle-badge:hover .fcb-cta {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.75);
}
@media (max-width: 480px) {
  .featured-circle-badge { padding: 16px 18px 14px; }
  .fcb-name { font-size: 24px; }
}

/* ============================================================
   FeaturedCircleHero — top of /tanya, the "this is happening
   right now" first impression (Yakir 2026-05-17). Much larger
   visual weight than the home badge so a /tanya visitor sees
   the circle as the entry point of the project, then scrolls
   down through book context / how-it-works / 5-parts grid.
   ============================================================ */
.featured-circle-hero {
  position: relative;
  padding: 70px 24px 56px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 0%,  rgba(212, 175, 55, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(184, 148, 31, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #100920 0%, #1a0d2e 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  text-align: center;
}
.fch-bg { position: absolute; inset: 0; pointer-events: none; }
.fch-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.fch-orb-a {
  top: -8%; right: 8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.45), transparent 70%);
}
.fch-orb-b {
  bottom: -10%; left: 4%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(116, 90, 200, 0.40), transparent 70%);
}
.fch-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  z-index: 1;
}
.fch-eyebrow {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 2px;
  color: #d4af37;
  font-style: italic;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.fch-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: #f5e9c4;
  margin: 0 0 14px;
  text-shadow: 0 2px 30px rgba(212, 175, 55, 0.25);
}
.fch-book {
  font-size: 15px; font-weight: 600;
  color: #d4af37; letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.fch-purpose {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 17px;
  font-style: italic;
  color: #c8c6d8;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 26px;
}
.fch-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 28px;
  margin: 30px auto 32px;
}
.fch-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 110px;
}
.fch-stat-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 36px; font-weight: 700;
  color: #d4af37; line-height: 1;
  margin-bottom: 6px;
}
.fch-stat-lbl {
  font-size: 13px; font-weight: 600;
  color: #c8c6d8;
}
.fch-stat-sub {
  font-size: 11px;
  color: #8a8597;
  font-style: italic;
  margin-top: 3px;
}
.fch-cta-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.fch-cta-primary {
  padding: 16px 44px !important;
  font-size: 17px !important;
  font-weight: 700;
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
  color: #1a0d2e !important;
  border: none;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.30);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  font-family: inherit;
}
.fch-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.42);
}
.fch-cta-secondary {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #b8941f !important;
  font-size: 13.5px !important;
  font-style: italic;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.40);
  text-underline-offset: 4px;
  font-family: 'Frank Ruhl Libre', serif !important;
}
.fch-cta-secondary:hover { color: #d4af37 !important; text-decoration-color: #d4af37; }
@media (max-width: 480px) {
  .featured-circle-hero { padding: 50px 18px 42px; }
  .fch-stats { gap: 18px; margin: 24px auto 26px; }
  .fch-stat-num { font-size: 30px; }
  .fch-stat { min-width: 90px; }
  .fch-purpose { font-size: 15px; }
}

/* ============================================================
   FeaturedCircleHero — Pass 3 polish (Yakir 2026-05-17)
   Progress bar + completion celebration + near-end signal +
   /tanya CTA "פתחו מעגל משלכם" section. Animations respect
   prefers-reduced-motion (set elsewhere via the useCountUp hook).
   ============================================================ */

/* Progress bar — sits under the stat blocks. The fill animates
   from 0 width to the actual percentage over ~1.2s, so visitor
   SEES the project filling in rather than reading a static fact. */
.fch-progress-wrap {
  max-width: 520px;
  margin: 14px auto 28px;
  text-align: center;
}
.fch-progress-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.18) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.fch-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8941f 0%, #d4af37 40%, #f3c64a 100%);
  box-shadow: 0 0 14px rgba(243, 198, 74, 0.50);
  transition: width 1.2s cubic-bezier(.4, .0, .2, 1);
  position: relative;
}
/* Subtle moving shimmer on the bar so it feels alive, not static */
.fch-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%, rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.0) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: fch-shimmer 3.5s ease-in-out infinite;
  border-radius: 999px;
  pointer-events: none;
}
@keyframes fch-shimmer {
  0%, 100% { background-position: -150% 0; }
  50%      { background-position:  150% 0; }
}
.fch-progress-caption {
  margin-top: 10px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 13.5px;
  font-style: italic;
  color: #d4b878;
  line-height: 1.6;
}
.fch-progress-caption strong {
  color: #f3c64a; font-weight: 700; font-style: normal;
  margin-inline: 2px;
}

/* Near-end state (progress ≥ 80%, not yet complete) — the eyebrow
   and name pulse gently to signal "we're close, finish with us". */
.featured-circle-hero.near-end .fch-eyebrow {
  color: #f5d75c;
  animation: fch-eyebrow-pulse 2.6s ease-in-out infinite;
}
@keyframes fch-eyebrow-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1.0;  text-shadow: 0 0 14px rgba(245, 215, 92, 0.45); }
}

/* Completion mode — circle hit 100%. Whole hero shifts into a
   shared-achievement celebration: golden tint, sparkles, the
   progress bar settles at full with a brighter glow. */
.featured-circle-hero.completed {
  background:
    radial-gradient(ellipse at 30% 0%,  rgba(243, 198, 74, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(212, 175, 55, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, #1d1226 0%, #2a1a3a 100%);
  border-bottom-color: rgba(243, 198, 74, 0.55);
  animation: fch-completed-glow 4s ease-in-out infinite;
}
@keyframes fch-completed-glow {
  0%, 100% { box-shadow: inset 0 0 80px rgba(243, 198, 74, 0.08); }
  50%      { box-shadow: inset 0 0 100px rgba(243, 198, 74, 0.18); }
}
.featured-circle-hero.completed .fch-eyebrow {
  color: #f5d75c;
  font-size: 14px;
  letter-spacing: 2.5px;
  text-shadow: 0 0 18px rgba(243, 198, 74, 0.40);
}
.featured-circle-hero.completed .fch-name {
  color: #f8e9c0;
  text-shadow: 0 2px 40px rgba(243, 198, 74, 0.45);
}
.featured-circle-hero.completed .fch-progress-fill {
  background: linear-gradient(90deg, #f3c64a 0%, #ffe190 50%, #f3c64a 100%);
  box-shadow: 0 0 22px rgba(243, 198, 74, 0.75), 0 0 36px rgba(243, 198, 74, 0.40);
}
.featured-circle-hero.completed .fch-progress-caption {
  color: #f0e2bc;
  font-weight: 500;
}

/* Sparkles overlay — only visible in completion mode. */
.fch-sparkle {
  position: absolute;
  font-size: 22px;
  color: #f5d75c;
  text-shadow: 0 0 16px rgba(243, 198, 74, 0.85);
  animation: fch-twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.fch-sparkle-1 { top: 18%;  left: 12%; animation-delay: 0s;   }
.fch-sparkle-2 { top: 55%;  right: 14%; font-size: 16px; animation-delay: 0.8s; }
.fch-sparkle-3 { bottom: 22%; left: 28%; font-size: 14px; animation-delay: 1.5s; }
@keyframes fch-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9) rotate(0deg); }
  50%      { opacity: 1.0;  transform: scale(1.15) rotate(8deg); }
}

/* /tanya — "פתחו מעגל משלכם" primary CTA below the 5-parts grid */
.tl-parts-open-cta {
  text-align: center;
  margin: 26px auto 4px;
  max-width: 520px;
}
.tl-parts-open-btn {
  padding: 16px 42px !important;
  font-size: 17px !important;
  font-weight: 700;
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
  color: #1a0d2e !important;
  border: none;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.30);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  font-family: inherit;
}
.tl-parts-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.45);
}
.tl-parts-open-sub {
  margin-top: 12px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 13.5px;
  font-style: italic;
  color: #b8a47a;
}

/* Mobile niceties */
@media (max-width: 480px) {
  .fch-progress-wrap { margin: 12px auto 22px; }
  .fch-sparkle { font-size: 18px; }
  .tl-parts-open-btn { padding: 14px 32px !important; font-size: 15px !important; }
}

/* prefers-reduced-motion: disable the constant animations */
@media (prefers-reduced-motion: reduce) {
  .fch-progress-fill::after { animation: none; }
  .featured-circle-hero.near-end .fch-eyebrow { animation: none; opacity: 1; }
  .featured-circle-hero.completed { animation: none; }
  .fch-sparkle { animation: none; opacity: 0.7; }
}

/* ═══ Rebbe Chat — added by tehillim_integration/apply.sh ═══ */
/* ───────────────────────────────────────────────────────────────────────
   <RebbeChat /> styles — RTL Hebrew, matches bayitdavid.com palette
   ─────────────────────────────────────────────────────────────────────── */

.rebbe-chat-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  direction: rtl;
  font-family: 'Heebo', system-ui, sans-serif;
  color: #1a1a2e;
}

.rebbe-chat-header {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ece9f2;
}

.rebbe-chat-header h2 {
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #1a1a2e;
}

.rebbe-chat-header p {
  font-size: 0.95rem;
  color: #5b5972;
  margin: 0;
  line-height: 1.5;
}

.rebbe-chat-subtitle {
  font-style: italic;
}

.rebbe-close {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.05);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  color: #5b5972;
}
.rebbe-close:hover { background: rgba(0,0,0,0.1); }

.rebbe-back {
  background: transparent;
  border: none;
  color: #4a4a6a;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
}
.rebbe-back:hover { color: #1a1a2e; }

.rebbe-lineage-hint {
  background: linear-gradient(135deg, #fef9e7 0%, #f9efce 100%);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  color: #6b5a16;
  line-height: 1.55;
}

/* ─── Grid of Rebbes ──────────────────────────────────────────────── */

.rebbe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.rebbe-card {
  background: #fff;
  border: 1px solid #e6e3ee;
  border-radius: 14px;
  padding: 16px 14px;
  cursor: pointer;
  text-align: right;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  position: relative;
  font-family: inherit;
}
.rebbe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,26,46,0.08);
  border-color: #c5bedb;
}
.rebbe-card-recommended {
  border-color: #d4a017;
  background: linear-gradient(135deg, #fff 0%, #fef9e7 100%);
}

.rebbe-card-name {
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #1a1a2e;
}
.rebbe-card-dynasty {
  font-size: 0.78rem;
  color: #8a8aa0;
  margin-bottom: 8px;
}
.rebbe-card-blurb {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a4a6a;
}
.rebbe-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #d4a017;
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 700;
}

/* ─── Conversation ─────────────────────────────────────────────────── */

.rebbe-conversation {
  min-height: 220px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 16px;
  background: #faf9fc;
  border-radius: 14px;
  margin-bottom: 12px;
}

.rebbe-empty-hint {
  color: #8a8aa0;
  text-align: center;
  font-style: italic;
  padding: 40px 16px;
  font-size: 0.95rem;
}

.rebbe-msg {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}
.rebbe-msg-user {
  align-items: flex-start;
}
.rebbe-msg-user .rebbe-msg-text {
  background: #1a1a2e;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 80%;
  line-height: 1.5;
}
.rebbe-msg-rebbe {
  align-items: flex-end;
}
.rebbe-msg-rebbe .rebbe-msg-text {
  background: #fff;
  border: 1px solid #ece9f2;
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  max-width: 85%;
  line-height: 1.6;
  font-size: 1.02rem;
}
.rebbe-msg-sources {
  font-size: 0.75rem;
  color: #8a8aa0;
  margin-top: 4px;
  padding: 0 8px;
}

.rebbe-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8a8aa0;
  font-style: italic;
  padding: 10px;
}
.rebbe-dots {
  display: inline-flex;
  gap: 4px;
}
.rebbe-dots span {
  width: 6px; height: 6px;
  background: #8a8aa0;
  border-radius: 50%;
  animation: rebbe-pulse 1.2s ease-in-out infinite;
}
.rebbe-dots span:nth-child(2) { animation-delay: 0.15s; }
.rebbe-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebbe-pulse {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.rebbe-error {
  background: #fde6e6;
  color: #9b2c2c;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 8px 0;
  font-size: 0.9rem;
}

/* ─── Input ────────────────────────────────────────────────────────── */

.rebbe-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.rebbe-input {
  flex: 1;
  background: #fff;
  border: 1px solid #d8d3e3;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  direction: rtl;
}
.rebbe-input:focus {
  outline: none;
  border-color: #6b5dd3;
  box-shadow: 0 0 0 3px rgba(107,93,211,0.12);
}
.rebbe-input:disabled {
  opacity: 0.6;
  background: #f5f3f9;
}

.rebbe-send {
  background: linear-gradient(135deg, #6b5dd3 0%, #4a3eb1 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 28px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  min-width: 80px;
}
.rebbe-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74,62,177,0.3);
}
.rebbe-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rebbe-input-hint {
  font-size: 0.75rem;
  color: #aaa;
  text-align: left;
  margin-top: 4px;
  font-style: italic;
}

/* [yakir 2026-05-18] Collapsible picker legend
   Shows the counts row by default; opens to reveal the color/badge key.
   ──────────────────────────────────────────────────────────────────── */
.rm-picker-legend {
  margin-bottom: 8px;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 8px;
  background: rgba(212,175,55,0.05);
  direction: rtl;
}
.rm-picker-legend > summary {
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: #3a3a4a;
  font-weight: 500;
  user-select: none;
}
.rm-picker-legend > summary::-webkit-details-marker { display: none; }
.rm-picker-legend > summary::marker { content: ''; }
.rm-picker-legend > summary .rm-legend-toggle {
  margin-inline-start: auto;
  color: #8b6508;
  font-weight: 700;
  font-size: 12px;
}
.rm-picker-legend[open] > summary .rm-legend-toggle::after { content: ' ▲'; }
.rm-picker-legend:not([open]) > summary .rm-legend-toggle::after { content: ' ▼'; }
.rm-legend-body {
  padding: 4px 12px 12px;
  font-size: 12.5px;
  color: #3a3a4a;
  line-height: 1.65;
  border-top: 1px dashed rgba(212,175,55,0.30);
}
.rm-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.rm-legend-swatch {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid #ece4d3;
  flex-shrink: 0;
}
.rm-legend-swatch.swatch-current  { background: #1a1a2e; border-color: #1a1a2e; box-shadow: 0 0 0 2px #d4af37; }
.rm-legend-swatch.swatch-mine     { background: #d4af37; border-color: #b8941f; opacity: 0.85; }
.rm-legend-swatch.swatch-others   { background: rgba(154,160,184,0.18); border-color: rgba(154,160,184,0.40); }
.rm-legend-swatch.swatch-empty    { background: #fff; border-color: #ece4d3; }
.rm-legend-demo {
  /* Inline demo badges in the legend rows — match cell badges visually. */
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}
.rm-legend-demo-coin {
  font-size: 9px; color: #8b6508;
  background: rgba(212,175,55,0.22);
  padding: 2px 6px; border-radius: 6px;
  min-width: 22px;
}
.rm-legend-demo-avatar {
  width: 22px; height: 22px;
  font-size: 11px; color: #fff;
  border-radius: 50%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}