/* chysto.media — deferred styles v20260527 */

/* ============= GLOBAL FOCUS RING (a11y) ============= */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
  transition: none;
}
input:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Screen-reader only utility (для skip-links і live-regions) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============= A11Y SPRINT 2 — contrast + touch targets ==============
   Darker variant of brand teracota for small text on cream/light backgrounds
   where the regular --accent fails WCAG AA (4.5:1 for normal text).
   #C96A4A on #F6F2EE = 3.4:1, on #FDEEE7 = 3.29:1 — fails.
   #8B4A33 on the same backgrounds = ~5.2:1 — passes. Same hue, safer.
*/
:root {
  --accent-deep: #8B4A33;
  --ease-soft: cubic-bezier(.22,1,.36,1);
}

/* ============= MICRO-INTERACTIONS (Sprint micro-patch) ============= */

/* 1. btnPop — глобальний tactile feedback на тап */
@keyframes btnPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.lead-submit:active,
.wl-btn:active,
.topic-card-flat:active,
.ask-maria-card:active,
.tab:active,
.author-follow:active,
.author-follow-btn:active {
  animation: btnPop 240ms var(--ease-soft);
}

/* 2. heartPop — святкування лайку (одноразово) */
@keyframes heartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
#reader-like.is-popping svg {
  animation: heartPop 360ms var(--ease-soft);
  display: inline-block;
  transform-origin: center;
}

/* 3. mentalBreathe — тиха пульсація на дзеркалі (6 сек цикл) */
@keyframes mentalBreathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.mirror-avatar {
  animation: mentalBreathe 6s ease-in-out infinite;
}

/* 4. cubic-bezier на ключових transitions (apply via existing classes) */
.tab,
.lead-submit,
.wl-btn,
.brand,
.hdr-btn,
.topic-card-flat,
.ask-maria-card,
.lead-input {
  transition-timing-function: var(--ease-soft);
}

/* 5. prefers-reduced-motion — респект до WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mirror-avatar { animation: none !important; }
}

/* 6. Brand active-state scale (заміна hover, який не існує на mobile) */
.brand:active {
  transform: scale(0.96);
  transition: transform 80ms var(--ease-soft);
}

/* Contrast — Today eyebrow (was --text-faint #9A9089 = 3.12:1 fail) */
.today-eyebrow, .me-today-eyebrow { color: var(--text-soft); }
/* Contrast — Lead eyebrow on warm-soft bg (was --accent #C96A4A = 3.29:1 fail) */
.lead-eyebrow { color: var(--accent-deep); }

/* Touch targets — WCAG 2.5.5 (44x44 min) for everything tappable */
.brand { min-height: 44px; align-items: center; }
.hdr-btn { width: 44px; height: 44px; }
.section-link { min-height: 44px; padding: 6px 0; display: inline-flex; align-items: center; }
.pill { min-height: 44px; padding: 10px 16px; }
.author-follow, .author-follow-btn { min-height: 44px; padding: 10px 18px; }
.channel-btn { min-height: 44px; padding: 12px 14px; }
#reader-like, #reader-save { min-height: 44px; padding: 6px 8px; margin: -6px -2px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-serif); margin: 0; line-height: 1.2; color: var(--text); font-weight: 700; }
ul { list-style: none; margin: 0; padding: 0; }
input, textarea { font: inherit; color: inherit; font-size: 16px; }

/* ============= APP SHELL ============= */
.app {
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--bg);
  transition: background-color .2s ease, color .2s ease;
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden; /* iOS Safari: глушимо будь-який горизонтальний overflow
                         від дочірніх скролерів (.maria-quick, .scroller),
                         щоб сторінку не зсувало вбік при завантаженні */
}

/* ============= HEADER ============= */
.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  background: rgba(246,242,238,0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-soft);
  transition: background-color .2s ease, border-color .2s ease;
}
.brand {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex; align-items: baseline; gap: 1px;
}
.brand-dot {
  color: var(--accent);
  font-weight: 700;
  font-size: 22px;
  margin-left: 1px;
}
.hdr-actions { display: flex; gap: 6px; }
.hdr-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  transition: background .15s, color .15s;
}
.hdr-btn:hover { background: var(--accent-soft); color: var(--accent); }
.hdr-btn:active { transform: scale(0.92); }
.hdr-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ============= TAB BAR (BOTTOM NAV) ============= */
.tab-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateZ(0);
  width: 100%; max-width: var(--max-w);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: stretch; justify-content: space-around;
  z-index: 50;
  transition: transform 0.25s ease, background-color .2s ease, border-color .2s ease;
}
/* Hide tab bar while virtual keyboard is open to prevent overlap with input */
body.kb-open .tab-bar {
  transform: translateX(-50%) translateY(100%);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px;
  color: var(--text-soft); font-weight: 600;
  font-size: 11px;
  transition: color .15s;
  position: relative;
}
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tab.is-active { color: var(--accent-deep); }
.tab.is-active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; border-radius: 0 0 4px 4px; background: var(--accent-deep);
}

/* ============= PAGES ============= */
.pg { display: none; padding-bottom: 24px; }
.pg.is-active { display: block; }
.pg-pad { padding: 0 20px; }
.pg-pad-top { padding-top: 16px; }

/* ============= UI PRIMITIVES ============= */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: inline-block;
}
.eyebrow--muted { color: var(--text-soft); }

.section { margin-top: 32px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.section-h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.section-h2 em { font-style: italic; color: var(--text); }
.section-link {
  font-size: 13px; color: var(--accent); font-weight: 600;
}

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  background: var(--bg-card);
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
  transition: all .15s;
}
.pill.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.pill:hover { color: var(--text); }
.pill.is-active:hover { color: #fff; }

/* «Показати ще» — м'яка повноширинна кнопка під стрічкою */
.feed-more {
  display: block; width: 100%;
  margin: 18px 0 4px;
  min-height: 48px; padding: 13px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);   /* акцентний контур — кнопка більше не губиться */
  cursor: pointer;
  transition: background .15s, color .15s;
}
.feed-more:hover { background: var(--accent); color: #fff; }
.feed-more[hidden] { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  transition: transform .15s, background .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--cta-bg); color: #fff; }
.btn-primary:hover { background: #b35a3d; }
.btn-dark { background: var(--text); color: #fff; }
.btn-ghost { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }

/* ============= FEED PAGE ============= */
/* Today entry card */
.today-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  margin-top: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: transform .15s;
}
.today-card:active { transform: scale(0.99); }
.today-day {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 20px; font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.today-meta { flex: 1; }
.today-eyebrow {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}
.today-text {
  font-size: 14px; color: var(--text); margin-top: 2px;
  line-height: 1.35;
}
.today-text b { font-weight: 600; }
.today-card .arrow { color: var(--text-faint); flex-shrink: 0; }

/* Hero article */
.hero-art {
  display: block;
  margin-top: 20px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(135deg, #5a4a3e, #3a2e25);
  position: relative;
  aspect-ratio: 4/5;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.hero-art-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-art-overlay {
  position: absolute; inset: 0;
  /* smoother, lighter fade — фото «дихає», текст не задавлений плашкою */
  background: linear-gradient(180deg, transparent 22%, rgba(0,0,0,0.16) 50%, rgba(0,0,0,0.72) 100%);
}
.hero-art-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 22px 32px;
  color: #fff;
}
.hero-art-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); font-weight: 600;
  margin-bottom: 8px; display: block;
}
.hero-art-title {
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.25; font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.hero-art-meta {
  font-size: 13px; color: rgba(255,255,255,0.85);
  font-style: italic;
}

/* Article filter scroller */
.scroller {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 4px;
  margin: 0 -20px;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

/* Article list (vertical) */
.art-list { margin-top: 6px; }
.art-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.art-item:last-child { border-bottom: none; }
.art-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,#e8ddd2,#d4c2b0);
  position: relative;
}
.art-thumb img { width: 100%; height: 100%; object-fit: cover; }
.art-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.art-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin-bottom: 6px;
}
.art-title {
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--text);
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art-excerpt {
  font-size: 13px; color: var(--text); opacity: 0.8;  /* було --muted/--text-soft, бліде — піднято контраст (тема-безпечно) */
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art-meta {
  font-size: 12px; color: var(--text-faint);
  font-style: italic;
}

/* Editor quote */
.editor-quote {
  margin-top: 36px;
  padding: 24px 22px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.editor-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 16px;
}
.editor-quote-author { display: flex; align-items: center; gap: 10px; }
.editor-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: url('/images/Sofia.jpg') center top/cover no-repeat,
              linear-gradient(135deg, #c89878, #b8856a);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  color: transparent;       /* "С" fallback hidden but stays accessible */
  font-family: var(--font-serif); font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.editor-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: -.005em;
  line-height: 1.1;
}
.editor-role {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

/* Topics grid (Рубрики, які ти любиш) */
.topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.topic-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: #efe7df;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  color: var(--text);
}
.topic-card-illus { display: none; }
.topic-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20,15,8,0.78) 100%);
  pointer-events: none;
}
.topic-card-meta {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.topic-card-meta .topic-count { color: #fff; }
.topic-card-meta .topic-count-label { color: rgba(255,255,255,0.82); margin-top: 0; }
.topic-card .topic-name { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5); }
.topic-card .topic-card-meta { text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.topic-count {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em;
  position: relative; z-index: 1;
  line-height: 1;
  color: var(--text);
}
.topic-count-label {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; opacity: 0.8;
  margin-top: 4px;
  position: relative; z-index: 1;
  color: var(--text-soft);
}
.topic-name {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  margin-top: 8px;
  position: relative; z-index: 1;
  color: var(--text);
}

/* Popular numbered list */
.popular { margin-top: 36px; }
.pop-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.pop-item:last-child { border-bottom: none; }
.pop-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--text-faint);
  font-weight: 400;
  line-height: 1;
}
.pop-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
}
.pop-meta {
  font-size: 12px; color: var(--text-soft);
}

/* ============= TOPICS PAGE ============= */
.topics-head { padding-top: 24px; }
.topics-h1 {
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 400;
  line-height: 1.15;
  margin-top: 8px;
  letter-spacing: -0.01em;
}
.topics-h1 em { font-style: italic; color: var(--text); }
.topics-page-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* ── Сторінка «Рубрики»: гібрид — featured-фото + рядки ─────────────────────
   Головна продає настрій (фото-плитки), каталог допомагає знайти
   (одна featured-обкладинка + швидкий список). Спільна мова, різна роль. */
.topic-card-feature {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: #2a2420;          /* fallback поки фото не завантажилось */
  background-size: cover; background-position: center;
  padding: 16px 18px;
  text-decoration: none;
}
.topic-card-feature::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(20,15,8,0.72) 100%);
}
.topic-feature-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.topic-feature-name {
  position: relative; z-index: 1;
  font-family: var(--font-serif); font-weight: 700; font-size: 24px;
  color: #fff; line-height: 1.1; margin-top: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.topic-card-feature-meta {
  position: relative; z-index: 1; margin-top: 6px;
  color: rgba(255,255,255,0.9); text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.topic-card-feature-meta .topic-count {
  font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: inherit;
}
.topic-card-feature-meta .topic-count-label {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; color: inherit; margin: 0; display: inline;
}

.topic-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color .15s, transform .12s;
}
.topic-row:active { transform: scale(0.99); }
.topic-row:hover { border-color: var(--text-soft); }
.topic-row-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(201,106,74,0.10);
  display: grid; place-items: center;
}
.topic-row-ic svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.topic-row-name {
  flex: 1; min-width: 0;
  font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--text);
}
.topic-row-meta {
  flex-shrink: 0;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; color: var(--text-soft);
}
.topic-row-meta .topic-count {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: inherit;
}
.topic-row-meta .topic-count-label { color: inherit; margin: 0; display: inline; font-size: 11px; }
.topic-row-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-faint); }

/* «Сезонне» — добірка, не рубрика: пунктирна рамка + бейдж замість числа */
.topic-collection {
  background: transparent;
  border-style: dashed;
  border-color: var(--border);
}
.topic-collection .topic-row-ic { background: rgba(168,132,58,0.14); }
.topic-collection .topic-row-ic svg { stroke: var(--gold, #C9A24A); }
.topic-collection .topic-row-name { color: var(--text-soft); }
.topic-collection-badge {
  flex-shrink: 0;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  color: var(--gold, #C9A24A);
}
.topic-card-flat {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 22px 18px 20px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
}
.topic-card-flat:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.topic-card-icon {
  width: 44px; height: 44px;
  background: var(--bg-soft);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.topic-card-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.topic-card-flat .topic-name {
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}
.topic-card-flat .topic-count {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 700;
  color: var(--text);
}
.topic-card-flat .topic-count-label {
  color: var(--text-soft);
  margin-top: 2px;
}

/* ============= ARTICLE READER ============= */
.reader-cover {
  position: relative;
  aspect-ratio: 16/12;
  background: linear-gradient(135deg, #4a3e35, #2a2018);
  overflow: hidden;
}
.reader-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reader-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
}
.reader-back {
  position: absolute; top: 14px; left: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation: reader-back-in .45s ease both;
}
.reader-back:hover { background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04); }
.reader-back:active { transform: scale(0.9); }
.reader-back svg {
  width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  animation: reader-back-nudge 2.4s ease 0.5s 2;
}
@keyframes reader-back-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes reader-back-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  72%           { transform: translateX(-3px); }
  84%           { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reader-back, .reader-back svg { animation: none; }
}
.reader-cover-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px;
  color: #fff;
}
.reader-cover-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px; display: block;
}
.reader-cover-title {
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.25; font-weight: 700;
  color: #fff;
}
.reader-cover-meta {
  display: flex; gap: 18px;
  margin-top: 12px;
  font-size: 13px; color: rgba(255,255,255,0.85);
  font-style: italic;
}
.reader-cover-meta-num { font-style: normal; font-weight: 700; }

/* ============= READER — Варіант C (editorial hybrid) ============= */
.reader-body {
  padding: 28px 22px 40px;
  max-width: 580px;
  margin: 0 auto;
}
/* Перемикач розміру тексту */
.reader-textsize {
  display: flex; align-items: center; gap: 8px;
  max-width: 580px;
  margin: 0 auto;
  padding: 18px 22px 0;
}
.reader-textsize__lbl {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin-right: 2px;
}
.reader-textsize__btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  border-radius: 9px;
  color: var(--text);
  font-family: var(--font-serif-body);
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.reader-textsize__btn--sm { font-size: 13px; }
.reader-textsize__btn--md { font-size: 16px; }
.reader-textsize__btn--lg { font-size: 20px; }
.reader-textsize__btn[aria-pressed="true"] {
  background: var(--text); color: var(--bg-card); border-color: var(--text);
}
/* Body — серіф для довгої прози. Колонка ~580px = comfortable measure */
.reader-body p {
  font-family: var(--font-serif-body);
  font-size: var(--rb-fs, 18px);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 18px;
}
/* Розмір тексту: A−/A/A+ (масштабує тіло через --rb-fs) */
#reader-body[data-size="sm"] { --rb-fs: 16px; }
#reader-body[data-size="md"] { --rb-fs: 18px; }
#reader-body[data-size="lg"] { --rb-fs: 21px; }
/* Lead paragraph — більший, з drop-cap */
.reader-body p:first-child {
  font-size: calc(var(--rb-fs, 18px) + 1px);
  line-height: 1.6;
  margin-bottom: 22px;
}
.reader-body p:first-child::first-letter {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 700;
  float: left;
  line-height: 0.9;
  margin: 8px 10px 0 0;
  color: var(--accent-deep);
}
/* H2 — стрибок над body, чітка межа секції */
.reader-body h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 36px 0 16px;
  color: var(--text);
}
/* Pull-quote */
.reader-body blockquote {
  margin: 28px 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--text);
}
/* List — теракотові маркери */
.reader-body ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.reader-body li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-family: var(--font-serif-body);
  font-size: calc(var(--rb-fs, 18px) - 1px);
  line-height: 1.55;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.reader-body li:last-child { border-bottom: none; }
.reader-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 21px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
/* Soft section divider — для розриву коли треба «·  ·  ·» */
.reader-body .reader-divider {
  text-align: center;
  letter-spacing: 0.6em;
  color: var(--text-faint);
  margin: 28px 0;
  font-size: 14px;
}

/* ─── Inline callout cards: "Спробуй зараз" + "Якщо важко" ───────────────
   Magazine-style вставки всередині статті. Дві VIZUALNO відмінні форми:
   1. callout-try → акція, теплий терракотовий tint, конкретний крок
   2. callout-support → м'якість, кремове на кремовому, дозвіл нічого не робити
*/
.reader-body .callout {
  margin: 28px 0;
  padding: 20px 22px;
  border-radius: 14px;
  font-family: var(--font-sans);
  position: relative;
}
.reader-body .callout .callout-label {
  display: block;                  /* B2: гарантовано окремий рядок над текстом */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--accent);            /* B2: terracotta — узгоджено з системою */
}
.reader-body .callout .callout-text {
  display: block;                  /* B2: явно block — щоб <p> з markdown не склеювався */
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}
/* Type 1 — TRY (зробити одну дію зараз) */
.reader-body .callout.callout-try {
  background: #fbeee5;                 /* теплий світло-терракотовий */
  border: 1px solid #f0d4be;
}
.reader-body .callout.callout-try .callout-label {
  color: var(--accent);
}
.reader-body .callout.callout-try .callout-text {
  color: #5a3322;
  font-weight: 500;
}
/* Type 2 — SUPPORT (якщо немає сил, дозвіл нічого не робити) */
.reader-body .callout.callout-support {
  background: #f6f0e6;                 /* cream-on-cream — м'якший */
  border: 1px solid #e8dcc8;
}
.reader-body .callout.callout-support .callout-label {
  color: #8a6f4f;
}
.reader-body .callout.callout-support .callout-text {
  color: #5a4f44;
  font-style: italic;
}

/* Reading progress bar — fixed top */
.reader-progress {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  height: 3px;
  z-index: 60;
  background: rgba(110,80,60,0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.reader-progress.is-visible { opacity: 1; }
.reader-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .08s linear;
}

/* lime-partner-band removed */
.lime-partner-band-disclaimer {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 8px;
  font-style: italic;
}

/* Stats bar (likes, comments, time) */
.reader-stats {
  display: flex; gap: 22px; align-items: center;
  padding: 16px 22px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin: 0 -22px;
  font-size: 13px; color: var(--text-soft);
}
.reader-stat { display: inline-flex; align-items: center; gap: 6px; }
.reader-stat svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.reader-stat-time { margin-left: auto; }

/* Author follow card */
.author-card {
  margin: 24px 0 0;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.author-card-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c89878, #b8856a) center top/cover no-repeat;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600; font-size: 18px;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.author-card-name {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 600; color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -.005em;
}
.author-card-role {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.author-card-bio {
  font-family: var(--font-serif);
  font-size: 14px; color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 14px;
}
.author-follow {
  background: var(--text); color: #fff;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em;
}
.author-follow.is-following {
  background: var(--bg-soft); color: var(--text-soft);
}

/* Read more */
.read-more { margin-top: 32px; }
.read-more-h {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 600;
  margin-bottom: 14px;
}
.read-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rm-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.rm-card-img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #e8ddd2, #c8b09a);
  position: relative;
  overflow: hidden;
}
.rm-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rm-card-body { padding: 12px 14px 14px; }
.rm-card-eyebrow {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin-bottom: 6px;
}
.rm-card-title {
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============= TODAY PAGE ============= */
.today-head { padding-top: 24px; }
.today-date {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 600;
}
.today-h1 {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 400;
  line-height: 1.2;
  margin-top: 8px;
}
.today-h1 em { font-style: italic; color: var(--text); }
.today-h1 .num { font-style: italic; }

/* Tasks card */
.tasks-card {
  margin-top: 24px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.tasks-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 6px;
}
.tasks-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--text);
}
.tasks-counter {
  font-size: 12px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.tasks-list { padding: 4px 0 0; }
.task-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft);
  align-items: flex-start;
  cursor: pointer;
}
.task-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
}
.task-check.is-done {
  background: var(--accent);
  border-color: var(--accent);
}
.task-check.is-done::after {
  content: ''; width: 8px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0,-1px);
}
.task-title {
  font-size: 15px; color: var(--text);
  line-height: 1.35;
  margin-bottom: 2px;
}
.task-row.is-done .task-title {
  color: var(--text-faint);
  text-decoration: line-through;
}
.task-meta { font-size: 12px; color: var(--text-soft); }
.task-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 18px 18px;
  padding: 12px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: #fff;
  font-size: 13px; font-weight: 600;
}
.task-add svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Reading on today */
.reading-h {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 600;
}
.reading-sub {
  font-family: var(--font-serif);
  font-size: 22px; font-style: italic;
  font-weight: 400;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.reading-sub em { font-style: italic; color: var(--text); }

/* ============= AI MARIA ============= */
.maria-page { padding-top: 24px; padding-bottom: 110px; max-width: 100%; overflow-x: hidden; }
.maria-head { text-align: center; padding: 0 20px 20px; }
.maria-avatar-big {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: url('/images/Maria.jpg') center/cover, linear-gradient(135deg, #d4a890, #b8856a);
  margin: 0 auto 12px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  font-family: var(--font-serif); font-size: 26px; font-weight: 700;
  overflow: hidden;
}
.maria-avatar-big::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--secondary);
  border: 2.5px solid var(--bg);
}
.maria-name {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 700;
  margin-bottom: 4px;
}
.maria-role {
  font-size: 13px; color: var(--text-soft);
  margin-bottom: 16px;
}
.maria-modes {
  display: inline-flex;
  background: var(--bg-card);
  border-radius: var(--radius-pill);
  padding: 4px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.maria-mode {
  padding: 8px 16px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--text-soft);
  transition: all .15s;
  touch-action: manipulation;
}
.maria-mode.is-active {
  background: var(--text);
  color: #fff;
  font-weight: 600;
}
.maria-mode-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px; color: var(--text-soft);
  margin: 14px 24px 0;
  line-height: 1.5;
}

.chat {
  padding: 14px 20px 8px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.bubble--maria {
  align-self: flex-start;
  background: var(--bg-card);
  border-bottom-left-radius: 6px;
  border: 1px solid var(--border-soft);
  color: var(--text);
}
.bubble--user {
  align-self: flex-end;
  background: var(--text);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble--typing { color: var(--text-soft); font-style: italic; }

/* Markdown-рендер у бабблах Марії (marked + DOMPurify) */
.bubble--maria p { margin: 0 0 0.6em; }
.bubble--maria p:last-child { margin-bottom: 0; }
.bubble--maria strong { font-weight: 600; color: var(--text); }
.bubble--maria em { font-style: italic; }
.bubble--maria ol,
.bubble--maria ul {
  padding-left: 1.4em;
  margin: 0.4em 0 0.6em;
}
.bubble--maria li { margin-bottom: 0.3em; }
.bubble--maria li:last-child { margin-bottom: 0; }
.bubble--maria code {
  background: var(--bg-soft, #f0e8e0);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}
.bubble--maria a {
  color: var(--accent, #d4614a);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bubble--maria h3,
.bubble--maria h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.6em 0 0.3em;
}
.bubble--maria blockquote {
  border-left: 3px solid var(--border-soft);
  margin: 0.5em 0;
  padding-left: 0.8em;
  color: var(--text-soft);
}

.maria-quick {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 4px;
  margin: 0;
  scrollbar-width: none;
}
.maria-quick::-webkit-scrollbar { display: none; }
.quick-chip {
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: manipulation;
}
.quick-chip:active { background: var(--accent-soft); color: var(--accent); }

.maria-input-wrap {
  position: fixed;
  bottom: var(--kb-bottom, calc(var(--tab-h) + env(safe-area-inset-bottom)));
  /* Center via left/right/margin instead of translateX: on iOS Safari a fixed
     element combining translateX(-50%) with backdrop-filter mispositions
     horizontally (shifts right) on some devices. translateZ(0) still promotes
     it to its own GPU layer so keyboard animation stays smooth. */
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateZ(0);
  width: 100%;
  max-width: var(--max-w);
  box-sizing: border-box;
  padding: 10px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: rgba(246,242,238,0.96);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--border-soft);
  z-index: 45;
  display: none;
  will-change: bottom;
  transition: bottom 0.15s ease-out;
}
.maria-input-wrap.is-shown { display: block; }
.maria-input {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-card);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--border-soft);
}
.maria-input input {
  flex: 1;
  min-width: 0;        /* Safari flex bug: prevents input from overflowing container */
  flex-shrink: 1;
  -webkit-appearance: none;
  box-sizing: border-box;
  border: none;
  font-size: 16px;
  padding: 8px 0;
  background: transparent;
}
.maria-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cta-bg);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
}
.maria-send svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ===== MARIA — повноекранний flex-чат (надійно на iOS, без position:fixed) =====
   Коли активна сторінка Марії, .app стає колонкою на всю висоту видимого
   в'юпорта: шапка зверху, стрічка повідомлень скролиться, поле вводу
   приклеєне до низу ПОТОКОМ (а не fixed). Це прибирає iOS-баг зі зміщенням
   фіксованого поля. Висоту дає JS через --app-h = visualViewport.height,
   тож при відкритті клавіатури колонка стискається й поле лишається над нею. */
body.maria-active { overflow: hidden; }
body.maria-active .app {
  /* 100dvh (dynamic) замість svh: коли в iOS Safari згортається адресний рядок,
     dvh підлаштовується під реальну висоту → колонка не «з'їжджає» вгору з
     порожнечею знизу. JS уточнює --app-h = visualViewport.height. */
  height: var(--app-h, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* місце під фіксований таб-бар (коли клавіатура закрита) */
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
body.maria-active.kb-open .app { padding-bottom: 0; }
body.maria-active .app-header { position: static; flex: 0 0 auto; }
body.maria-active #app-main {
  flex: 1 1 auto;
  min-width: 0;          /* фікс горизонтального overflow у flex-колонці */
  max-width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.maria-active #pg-maria.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
body.maria-active .maria-head { flex: 0 0 auto; padding: 16px 20px 12px; }
body.maria-active #maria-chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;    /* довге повідомлення не розпирає колонку вшир */
  -webkit-overflow-scrolling: touch;
}
body.maria-active #maria-quick { flex: 0 0 auto; }
body.maria-active #maria-input-wrap {
  position: static;
  flex: 0 0 auto;
  /* width:100% + box-sizing → інпут рівно по ширині колонки, кнопка → не тікає */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  bottom: auto;
  transform: none;
  will-change: auto;
  transition: none;
}

/* ============= SHOP ============= */
.shop-manifest {
  padding: 32px 22px 28px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}
.shop-manifest-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.shop-manifest-h1 {
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 400;
  line-height: 1.2;
  margin: 12px 0;
}
.shop-manifest-h1 em { font-style: italic; }
.shop-manifest-text {
  font-size: 13px; color: var(--text-soft);
  line-height: 1.55;
  max-width: 320px; margin: 0 auto;
}
.shop-grid {
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.product {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.product-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f0e8de, #d8c8b8);
  display: flex; align-items: center; justify-content: center;
}
.product-img svg { width: 50%; height: 50%; opacity: 0.4; }
.product-body { padding: 12px 14px 14px; }
.product-tag {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secondary); font-weight: 600;
}
.product-name {
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 700;
  margin: 6px 0 4px;
  line-height: 1.3;
}
.product-desc { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.product-price {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
  color: var(--text);
}
.product-cta {
  margin-top: 8px; width: 100%;
  padding: 9px;
  background: var(--text); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   ME / «Твоя дорога» — editorial belonging surface (Concept C)
   ════════════════════════════════════════════════════════════════════════ */
.me-hero {
  padding: 36px 24px 28px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.me-hero-date {
  font: 11px var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.me-hero-line {
  font: 400 26px/1.25 var(--font-serif);
  color: var(--text);
  letter-spacing: -.005em;
  margin: 0;
}
.me-hero-line em {
  color: var(--accent);
  font-style: normal;
  font-weight: 400;
}

.me-block {
  padding: 24px 24px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.me-block:last-of-type { border-bottom: none; }
.me-block-eyebrow {
  font: 700 11px var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.me-block-h {
  font: 400 18px/1.3 var(--font-serif);
  color: var(--text);
  margin: 0 0 14px;
}

/* — лишилось на потім (unread card) — */
.me-unread-card {
  display: block;
  padding: 14px 16px;
  background: var(--paper, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}
.me-unread-card:hover { background: var(--bg-soft); border-color: var(--border); }
.me-unread-tag {
  font: 700 10.5px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.me-unread-title {
  font: 500 15.5px/1.35 var(--font-serif);
  color: var(--text);
  margin-bottom: 4px;
}
.me-unread-meta {
  font: 12px var(--font-sans);
  color: var(--text-faint);
}

/* — листи Софії — */
.me-letters-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.me-letter {
  display: block;
  padding: 12px 14px;
  background: var(--paper, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.me-letter:hover { background: var(--bg-soft); }
.me-letter-date {
  font: 11px var(--font-sans);
  color: var(--text-faint);
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.me-letter-title {
  font: 500 14.5px/1.35 var(--font-serif);
  color: var(--text);
}
.me-block-link {
  display: inline-block;
  font: 600 13px var(--font-sans);
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
}
.me-block-link:hover { color: var(--accent-deep, #8B4A33); }

/* — поличка збереженого — */
.me-shelf {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.me-shelf-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--paper, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.me-shelf-item:hover { background: var(--bg-soft); }
.me-shelf-thumb {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--bg-soft) center/cover no-repeat;
  flex-shrink: 0;
}
.me-shelf-body { flex: 1; min-width: 0; }
.me-shelf-tag {
  font: 700 10px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.me-shelf-title {
  font: 500 14px/1.3 var(--font-serif);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.me-shelf-empty p {
  font: italic 13.5px/1.5 var(--font-serif);
  color: var(--text-soft);
  text-align: center;
  margin: 8px 0;
}

/* — тихий ритуал (час-залежне) — */
.me-quiet-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 18px;
}
.me-quiet-text {
  font: italic 14.5px/1.55 var(--font-serif);
  color: var(--text-soft);
  margin: 0;
}

/* ─── Mood check-in (Як ти зараз) ───────────────────────────────────────── */
.me-mood { padding: 20px 24px 18px; border-bottom: 1px solid var(--border-soft); }
.me-mood-q {
  font: 400 15px/1.4 var(--font-serif);
  color: var(--text-soft);
  margin-bottom: 14px;
}
.me-mood-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mood-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}
.mood-card-emoji { font-size: 22px; line-height: 1; }
.mood-card-icon {
  width: 26px;
  height: 26px;
  stroke: var(--text-soft);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .15s, transform .15s var(--ease-soft);
}
.mood-card.active .mood-card-icon { stroke: var(--accent); }
.mood-card:hover .mood-card-icon { stroke: var(--accent); }
.mood-card-label { font-size: 12px; color: var(--text-soft); line-height: 1.2; }
.mood-card:hover,
.mood-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.mood-card.active .mood-card-label { color: var(--text); }
/* answered state — hide buttons, show bubble */
.me-mood.is-answered .me-mood-q,
.me-mood.is-answered .me-mood-cards { display: none; }
.me-mood-reply { display: none; }
.me-mood.is-answered .me-mood-reply { display: block; }
.me-mood-bubble {
  padding: 16px;
  background: var(--paper, #fdfcf9);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}
.me-mood-bubble-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.me-mood-bubble-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url('/images/Sofia.jpg') center top/cover no-repeat;
  flex-shrink: 0;
}
.me-mood-bubble-name {
  font: 600 12px var(--font-sans);
  color: var(--text);
}
.me-mood-bubble-role {
  font: 11px var(--font-sans);
  color: var(--text-soft);
}
.me-mood-bubble-msg {
  font: 400 15px/1.5 var(--font-serif);
  color: var(--text);
  margin-bottom: 6px;
}
.me-mood-bubble-msg b { font-style: normal; color: var(--accent); }
.me-mood-bubble-sub {
  font: 13px/1.5 var(--font-sans);
  color: var(--text-soft);
  margin-bottom: 10px;
}
.me-mood-reset {
  background: none;
  border: none;
  padding: 0;
  font: 12px var(--font-sans);
  color: var(--text-faint);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  display: inline-block;
}
.me-mood-reset:hover { color: var(--text-soft); }

/* — escape hatch «якщо важко» — */
.me-block--hard { padding: 18px 24px 14px; }
.me-hard-link {
  display: block;
  font: 13.5px/1.55 var(--font-sans);
  color: var(--text-soft);
  text-decoration: none;
  text-align: center;
}
.me-hard-link strong {
  color: var(--accent);
  font-weight: 600;
}
.me-hard-link:hover strong { color: var(--accent-deep, #8B4A33); }

/* — Letter overlay (повний лист поверх будь-якої сторінки) — */
.letter-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: stretch;
  justify-content: center;
}
.letter-overlay.is-open { display: flex; }
.letter-overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(46, 42, 38, 0.55);
  backdrop-filter: blur(2px);
  animation: lovFade .25s ease;
}
.letter-overlay-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 100vh;
  overflow-y: auto;
  background: var(--paper, #fff);
  padding: 36px 28px 48px;
  box-shadow: 0 0 60px rgba(0,0,0,.25);
  animation: lovSlide .3s cubic-bezier(.22,1,.36,1);
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 600px) {
  .letter-overlay-card { padding: 48px 56px 64px; }
}
@media (max-width: 480px) {
  .letter-overlay-card { padding: 32px 22px 40px; }
}
.letter-overlay-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  border: none; background: var(--bg-soft);
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.letter-overlay-close:hover { background: var(--cta-bg); color: #fff; }
.lov-eyebrow {
  font: 700 11px var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.lov-title {
  font: 400 26px/1.25 var(--font-serif);
  color: var(--text);
  margin: 0 0 22px;
}
.lov-title em {
  font-style: normal;
  background: var(--tint-warm, #f6f0e6);
  padding: 0 6px;
  border-radius: 4px;
}
.lov-body p {
  font: 16px/1.7 var(--font-serif);
  color: var(--text);
  margin-bottom: 18px;
}
.lov-sig {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font: italic 16px var(--font-serif);
  color: var(--text);
}
.lov-sig-role {
  font: 11px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-style: normal;
  margin-top: 4px;
}
.lov-ps {
  margin-top: 20px; padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 10px;
  font: 14.5px/1.55 var(--font-serif);
  color: var(--text-soft);
  font-style: italic;
}
/* ─── Editorial card design (per design-агент: Paper from Sofia + Marginalia) ─── */

/* Header row: portrait + eyebrow поряд */
.lov-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.lov-portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-soft) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  background-image: url('/images/Sofia.jpg');
  background-position: center top;
}
.lov-header .lov-eyebrow {
  margin-bottom: 0;
  line-height: 1.4;
}

/* Flourish — невеликий завиток між заголовком і body */
.lov-flourish {
  display: block;
  width: 64px;
  height: 18px;
  margin: 18px 0 22px;
  color: var(--accent);
  opacity: .65;
}

/* Marginalia — тонка терракотова лінія по лівому краю body */
.lov-body {
  position: relative;
  padding-left: 18px;
  border-left: 1px solid rgba(201, 106, 74, 0.55);
}

/* Підпис блок з портретом-міні */
.lov-sig {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.lov-sig-portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: url('/images/Sofia.jpg') center top/cover no-repeat;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.lov-sig-text { flex: 1; }
.lov-sig-name {
  font: italic 22px/1 var(--font-serif);
  color: var(--accent);
  letter-spacing: -.005em;
  /* Псевдо-«ручний» підпис: серіф + курсив + кольоровий, поки не буде сканованого */
}
.lov-sig-role {
  font: 11px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}

/* List view (усі листи) — карточки у скрол-сторінці */
.lov-list-sub {
  font: italic 14px/1.5 var(--font-serif);
  color: var(--text-soft);
  margin: 0 0 22px;
}
.lov-list { display: flex; flex-direction: column; gap: 10px; }
.lov-list-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.lov-list-item:hover {
  background: var(--paper, #fff);
  border-color: var(--accent);
}
.lov-list-item:active { transform: scale(.99); }
.lov-list-date {
  font: 700 11px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.lov-list-title {
  font: 500 16px/1.35 var(--font-serif);
  color: var(--text);
}

@keyframes lovFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lovSlide { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* — me-letter як button (не <a>) — */
button.me-letter {
  width: 100%;
  text-align: left;
  background: var(--paper, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
button.me-letter:hover { background: var(--bg-soft); }

/* — quiet footer — */
.me-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px 32px;
  flex-wrap: wrap;
}
.me-footer-link {
  background: none;
  border: none;
  font: 13px var(--font-sans);
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 8px;
  transition: color .15s;
}
.me-footer-link:hover { color: var(--accent); }
.me-footer-dot { color: var(--text-faint); opacity: .5; }

/* ============= AUTHOR PAGE ============= */
.author-page-head {
  position: relative;
  padding: 32px 22px 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border-soft);
}
.author-back {
  position: absolute; top: 14px; left: 14px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
}
.author-back svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.author-portrait {
  width: 96px; height: 96px;
  border-radius: 50%;
  background-color: #d4a890;
  background-size: cover;
  background-position: center top;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-serif); font-size: 36px; font-weight: 700;
}
.author-name {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 700;
  margin-bottom: 4px;
}
.author-role {
  font-size: 13px; color: var(--text-soft);
  margin-bottom: 14px;
}
.author-bio {
  font-size: 14px; color: var(--text-soft);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto 16px;
}
.author-follow-btn {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--text); color: #fff;
  font-size: 13px; font-weight: 600;
}
.author-follow-btn.is-following {
  background: var(--bg-soft); color: var(--text-soft);
  border: 1px solid var(--border-soft);
}
.author-stats {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 18px;
  font-size: 12px; color: var(--text-faint);
  letter-spacing: 0.04em;
}
.author-stats b { color: var(--text); font-weight: 700; }

/* ============= PWA chip in Я ============= */
.pwa-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  margin: 12px 20px 0;
  background: rgba(143,175,157,0.08);
  border: 1px solid rgba(143,175,157,0.25);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.pwa-chip:hover { background: rgba(143,175,157,0.14); }
.pwa-chip-icon {
  width: 38px; height: 38px;
  background: var(--secondary);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.pwa-chip-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.pwa-chip-text { flex: 1; }
.pwa-chip-title { font-size: 14px; font-weight: 600; color: var(--text); }
.pwa-chip-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.pwa-chip-arrow { color: var(--text-faint); }

/* C3: Search modal */
.search-modal {
  position: fixed; inset: 0;
  background: rgba(38,32,28,0.78);
  display: none; align-items: flex-start; justify-content: center;
  padding: 60px 16px 16px;
  z-index: 260;
}
.search-modal.is-open { display: flex; }
.search-modal-card {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%; max-width: 560px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.search-modal-row {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.search-modal-icon { width: 18px; height: 18px; color: var(--text-soft); flex-shrink: 0; }
.search-modal-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font: 16px var(--font-sans);
  color: var(--text);
}
.search-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.search-modal-close svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.search-modal-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.search-modal-hint {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
}
.search-result {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.search-result:hover, .search-result:focus {
  background: var(--bg-soft);
}
.search-result-eyebrow {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.search-result-title {
  font: 600 14px/1.4 var(--font-serif);
  color: var(--text);
}
.search-result-excerpt {
  margin-top: 4px;
  font: 12px var(--font-sans);
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* PWA modal (iOS instructions) */
.pwa-modal {
  position: fixed; inset: 0;
  background: rgba(38,32,28,0.9);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 250;
}
.pwa-modal.is-open { display: flex; }
.pwa-modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  max-width: 360px; width: 100%;
  text-align: center;
}
.pwa-modal-h { font-family: var(--font-serif); font-size: 20px; margin-bottom: 8px; }
.pwa-modal-text { font-size: 14px; color: var(--text-soft); line-height: 1.5; margin-bottom: 18px; }
.pwa-modal-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.pwa-modal-step-num {
  width: 24px; height: 24px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.pwa-modal-close {
  margin-top: 16px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--text); color: #fff;
  font-size: 13px; font-weight: 600;
}

/* ============= TOPIC DETAIL ============= */
.topic-page-head {
  padding: 24px 22px 18px;
}
.topic-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-soft);
  margin-bottom: 14px;
}
.topic-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topic-title-h1 {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.01em;
}
.topic-meta {
  font-size: 13px; color: var(--text-soft);
  margin-top: 6px;
}

/* ============= SELF PAGE (Для себе) ============= */
.self-head {
  padding: 28px 22px 12px;
  text-align: center;
}
.self-h1 {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 400;
  line-height: 1.2;
  margin-top: 8px;
}
.self-h1 em { font-style: italic; color: var(--secondary); }
.self-aff-card {
  margin: 22px 20px 8px;
  padding: 26px 22px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.self-aff-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--secondary); font-weight: 700;
  margin-bottom: 12px;
}
.self-aff-text {
  font-family: var(--font-serif);
  font-style: italic; font-size: 19px;
  line-height: 1.4;
  color: var(--text);
}
.self-aff-shuffle {
  margin-top: 14px;
  font-size: 12px; color: var(--text-faint);
  background: none; border: none;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.self-practices {
  padding: 20px 20px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.self-p-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 24px 16px 22px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.self-p-card:active { transform: scale(0.98); }
.self-p-card:hover { border-color: var(--secondary); }

/* Підсвітка практики, рекомендованої під настрій з Дзеркала */
.self-p-card.is-suggested {
  border-color: var(--secondary);
  background: linear-gradient(135deg, #f1f7f3 0%, #e8f1ec 100%);
  position: relative;
  box-shadow: 0 0 0 0 rgba(143,175,157, 0.45);
  animation: suggestPulse 2.4s var(--ease-soft) infinite;
}
.self-p-card.is-suggested::before {
  content: 'Радимо сьогодні';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(110,80,60,0.12);
}
@keyframes suggestPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143,175,157, 0.40); }
  50%      { box-shadow: 0 0 0 8px rgba(143,175,157, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .self-p-card.is-suggested { animation: none; }
}

/* Inline-натяк у відповіді Дзеркала: міні-картки практик з «Тиша» панелі */
.mirror-suggest-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.mirror-suggest-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
  margin-bottom: 10px;
}
.mirror-suggest-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mirror-suggest-cards.is-single {
  grid-template-columns: 1fr;
}
.mirror-suggest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f1f7f3 0%, #e8f1ec 100%);
  border: 1px solid #d4e3d8;
  border-radius: var(--radius-card);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  min-height: 64px;
  transition: transform .12s var(--ease-soft), border-color .15s;
}
.mirror-suggest-card:active { transform: scale(0.98); }
.mirror-suggest-card:hover { border-color: var(--secondary); }
.mirror-suggest-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(143,175,157,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mirror-suggest-card-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--secondary);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mirror-suggest-card-text {
  flex: 1;
  min-width: 0;
}
.mirror-suggest-card-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 2px;
}
.mirror-suggest-card-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.3;
}
.self-p-icon {
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  background: rgba(143,175,157,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.self-p-icon svg { width: 22px; height: 22px; stroke: var(--secondary); fill: none; stroke-width: 1.6; }
.self-p-name {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.self-p-time {
  font-size: 12px; color: var(--text-soft);
  letter-spacing: 0.04em;
}
.self-support {
  margin: 24px 20px 8px;
  padding: 22px 20px;
  background: rgba(143,175,157,0.08);
  border-radius: var(--radius-card);
  border-left: 3px solid var(--secondary);
}
.self-support-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--secondary); font-weight: 700;
  margin-bottom: 8px;
}
.self-support-h {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 700;
  margin-bottom: 6px;
}
.self-support-p {
  font-size: 14px; color: var(--text-soft);
  line-height: 1.5;
}

/* ── Practice overlay (modal) ──────────────────────── */
.practice-overlay {
  position: fixed; inset: 0;
  background: rgba(38, 32, 28, 0.92);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 32px 24px;
  text-align: center;
}
.practice-overlay.is-open { display: flex; }
.practice-overlay-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.practice-overlay-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.practice-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); font-weight: 700;
  margin-bottom: 14px;
}
.practice-h {
  font-family: var(--font-serif);
  font-size: 26px; color: #fff;
  margin-bottom: 8px;
}
.practice-instr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px; color: rgba(255,255,255,0.7);
  max-width: 320px;
  margin: 0 auto 36px;
  line-height: 1.5;
}

/* Breath circle */
.breath-circle {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,175,157,0.4), rgba(143,175,157,0.1));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 22px;
  margin-bottom: 28px;
  transition: transform 4s ease-in-out, background 4s ease-in-out;
  transform: scale(0.7);
}
.breath-circle.breath-in { transform: scale(1.15); background: radial-gradient(circle, rgba(143,175,157,0.7), rgba(143,175,157,0.2)); }
.breath-circle.breath-hold { transform: scale(1.15); background: radial-gradient(circle, rgba(212,168,144,0.55), rgba(212,168,144,0.15)); transition-duration: 2s; }
.breath-circle.breath-out { transform: scale(0.7); }
.breath-stage {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px; color: #fff;
  letter-spacing: 0.02em;
}
.breath-counter {
  font-family: var(--font-sans);
  font-size: 13px; color: rgba(255,255,255,0.55);
  margin-top: 6px;
}

/* Silence/timer */
.silence-time {
  font-family: var(--font-serif);
  font-size: clamp(72px, 14vw, 120px);
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.silence-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px; color: rgba(255,255,255,0.7);
  max-width: 280px;
  margin: 0 auto;
}

/* Journal */
.journal-text {
  width: 100%; max-width: 480px;
  min-height: 200px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.journal-text::placeholder { color: rgba(255,255,255,0.4); font-style: italic; }
.journal-save {
  margin-top: 16px;
  padding: 12px 28px;
  background: var(--secondary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700;
}

/* Music links */
.music-links {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 360px;
}
.music-link {
  padding: 14px 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.music-link span { color: rgba(255,255,255,0.5); font-size: 12px; }

/* ── Я (Me) — Today + profile combined ──────────── */
.me-today-block {
  padding: 6px 20px 0;
}
.me-today-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 700;
  margin: 18px 0 6px;
}
.me-today-line {
  font-family: var(--font-serif);
  font-size: 20px; font-style: italic;
  color: var(--text);
  margin-bottom: 12px;
}
.me-today-line em { font-style: italic; color: var(--accent); }

/* ============= MIRROR (Дзеркало) ============= */
.mirror {
  margin: 18px 0 28px;
  padding: 24px 22px 22px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.mirror-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
  margin-bottom: 6px;
}
.mirror-author {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.mirror-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8a08c, #8e7560) center/cover;
  background-image: url(/images/Maria.jpg);
  background-position: center top;
  background-size: cover;
  flex-shrink: 0;
}
.mirror-author-name { font-size: 13px; font-weight: 600; color: var(--text); }
.mirror-author-role { font-size: 11px; color: var(--text-soft); }
.mirror-q {
  font-family: var(--font-serif);
  font-size: 18px; font-style: italic;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 18px;
}
.mirror-colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.mirror-color {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
}
.mirror-color:hover { transform: scale(1.08); }
.mirror-color.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--bg);
}
.mirror-color-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.mirror-color-label {
  font-size: 10px; color: var(--text-soft);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Reply (after color picked) */
.mirror-reply {
  display: none;
  animation: mirror-fade .35s ease-out;
}
.mirror.is-answered .mirror-colors,
.mirror.is-answered .mirror-color-labels,
.mirror.is-answered .mirror-q { display: none; }
.mirror.is-answered .mirror-reply { display: block; }
@keyframes mirror-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mirror-reply-bubble {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px; line-height: 1.5;
  color: var(--text);
  background: var(--bg-soft);
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.mirror-reply-bubble b { font-style: normal; font-weight: 700; color: var(--accent); }
.mirror-action {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border-radius: 14px;
  margin-bottom: 14px;
}
.mirror-action-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 8px;
}
.mirror-action-text {
  font-size: 14px; line-height: 1.45;
  color: var(--text);
}
.mirror-action-text b { font-weight: 700; }
.mirror-pattern {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg);
  border-left: 2px solid var(--secondary);
  border-radius: 6px;
  margin-bottom: 14px;
}
.mirror-pattern-text {
  font-size: 13px; line-height: 1.5;
  color: var(--text-soft);
  font-style: italic;
  font-family: var(--font-serif);
}
.mirror-actions-row {
  display: flex; gap: 10px;
}
.mirror-btn {
  flex: 1;
  padding: 11px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  text-align: center;
  transition: transform .15s, background .15s;
}
.mirror-btn:active { transform: scale(0.97); }
.mirror-btn--primary {
  background: var(--text); color: #fff;
}
.mirror-btn--ghost {
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
}
.mirror-reset {
  display: flex; align-items: center; gap: 7px;
  width: fit-content;
  margin: 18px auto 4px;            /* відсунуто нижче від кнопок дій */
  min-height: 42px;
  padding: 10px 18px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-soft);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s;
  animation: mirrorResetHint 2s ease 0.7s 3;  /* делікатний пульс при появі, потім спокій */
}
.mirror-reset svg { width: 14px; height: 14px; opacity: .8; }
.mirror-reset:hover {
  color: var(--text);
  border-color: var(--text-soft);
  background: var(--bg-card);
}
@keyframes mirrorResetHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,106,74,0); border-color: var(--border-soft); }
  50%      { box-shadow: 0 0 0 5px rgba(201,106,74,0.12); border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .mirror-reset { animation: none; }
}

/* ============= CHANNELS (TG / VIBER) ============= */
.channels-card {
  margin-top: 36px;
  padding: 22px 20px 20px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.channels-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
  margin-bottom: 8px;
}
.channels-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px; line-height: 1.45;
  color: var(--text-soft);
  margin: 0 0 16px;
}
.channels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.channel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-soft);
  transition: transform .15s, background .15s;
}
.channel-btn:active { transform: scale(0.97); }
.channel-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; }
.channel-btn--tg { color: #0088cc; border-color: #b8dff0; }
.channel-btn--tg:hover { background: #f0f8fc; }
.channel-btn--vb { color: #7360f2; border-color: #d4ccfa; }
.channel-btn--vb:hover { background: #f5f3fc; }

/* Compact inline channel row (footer-of-page) */
.channels-inline {
  margin-top: 28px;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-soft);
  flex-wrap: wrap;
}
.channels-inline-text {
  font-style: italic;
  font-family: var(--font-serif);
  margin: 0 6px 0 0;
}
.channels-inline a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
}
.channels-inline a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.channels-inline a.ch-tg { color: #0088cc; border-color: #b8dff0; }
.channels-inline a.ch-vb { color: #7360f2; border-color: #d4ccfa; }

/* ============= LEAD-MAGNET FORM ============= */
.lead-card {
  margin-top: 28px;
  padding: 24px 22px 20px;
  background: var(--accent-soft);
  border-radius: var(--radius-card);
  border: 1px solid #f5d8c8;
}
.lead-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
  margin-bottom: 8px;
}
.lead-h {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
  color: var(--text);
}
.lead-sub {
  font-size: 13px; color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 16px;
}
.lead-form { display: flex; gap: 8px; }
.lead-input {
  flex: 1;
  background: #fff;
  border: 1px solid #f0d4c2;
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-size: 16px;
  color: var(--text);
}
.lead-input:focus { border-color: var(--accent); }
.lead-input::placeholder { color: var(--text-faint); }
.lead-submit {
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg); color: #fff;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}
.lead-submit:hover { background: #b35a3d; }
.lead-submit:active { transform: scale(0.97); }
.lead-submit:disabled { opacity: 0.6; cursor: default; }
.lead-success {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text);
  padding: 12px 6px 4px;
  font-size: 14px;
}
.lead-success-leaf {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.done-spark {
  width: 18px;
  height: 18px;
  vertical-align: -2px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============= WEEKLY LETTER (Лист тижня) ============= */
.weekly-letter { margin-top: 32px; }
.wl-photo {
  height: 200px;
  margin: -22px -22px 18px;            /* виходить за padding картки — фото на всю ширину */
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.wl-card {
  position: relative;
  /* Полотно через токен (не хардкод #f5efe2 — то був dark-mode баг).
     Ледь помітна паперова текстура — чистий CSS, без зображення. */
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.5) 0, transparent 38%),
    repeating-linear-gradient(0deg, rgba(120,90,60,.018) 0 1px, transparent 1px 4px),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-soft);
}
.wl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.wl-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
/* Рукописний байлайн «Софія пише —» (інтимність варіанта A) */
.wl-byline {
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}
.wl-stamp {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  transform: rotate(-6deg) scale(0.76);  /* менша на ~24% — менше конкурує із заголовком */
  transform-origin: top right;
  opacity: 0.55;                          /* тихіша, декоративна */
  text-align: center;
  line-height: 1;
}
.wl-stamp-arc {
  font-size: 9px;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.wl-stamp-num {
  font-size: 16px;
  font-weight: 700;
}
/* Маленька думка — відчужуваний share-блок (рукописом), щоб хотілось заскрінити */
.wl-think {
  margin: 20px 0 4px;
  padding: 18px 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  text-align: center;
}
.wl-think-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 8px;
}
.wl-think-q {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.28;
  color: var(--text);
}
/* Тема тижня — тонкий eyebrow-гачок під заголовком */
.wl-theme {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
  margin: -4px 0 12px;
}
/* Мікро-дія — чек-ліст «Цього тижня спробую» */
.wl-checklist {
  margin: 20px 0 4px;
  padding: 16px 16px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
}
.wl-checklist-title {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--text);
  margin: 0 0 8px;
}
.wl-check-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 10px 0;
  background: none; border: none; cursor: pointer;
  border-top: 1px solid var(--border-soft);
}
.wl-check-item:first-of-type { border-top: none; }
.wl-check-box {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.wl-check-box svg { width: 13px; height: 13px; }
.wl-check-label {
  font-size: 14px; color: var(--text-soft); line-height: 1.4;
  transition: color .15s;
}
.wl-check-item.is-done .wl-check-box {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.wl-check-item.is-done .wl-check-label {
  color: var(--text-faint); text-decoration: line-through;
}
.wl-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
  margin: 4px 0 14px;
}
.wl-title em {
  font-style: italic;
  font-weight: 400;
}

/* ─── Editorial details (per design-агент: portrait + flourish + marginalia) ─── */
.wl-portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: url('/images/Sofia.jpg') center top/cover no-repeat;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
  margin-right: 10px;
}
.wl-flourish {
  display: block;
  width: 56px;
  height: 16px;
  margin: -2px 0 16px;
  color: var(--accent);
  opacity: .65;
}
.wl-body {
  position: relative;
  padding-left: 16px;
  border-left: 1px solid rgba(201, 106, 74, 0.5);
}
.wl-sign {
  margin-top: 32px;   /* більше повітря — підпис не зливається з останнім абзацом */
  display: flex;
  align-items: center;
  gap: 12px;
}
.wl-sign-invite {
  margin-left: auto;
  text-align: right;
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 17px;
  line-height: 1.15;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}
.wl-sign-portrait {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: url('/images/Sofia.jpg') center top/cover no-repeat;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.wl-sign-text { flex: 1; min-width: 0; }
.wl-sign-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
  margin: 0;
  letter-spacing: -.005em;
  line-height: 1.1;
}
.wl-sign-role {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 3px 0 0;
}
.wl-mark {
  background: linear-gradient(transparent 65%, #f0d9bf 65%);
  padding: 0 4px;
}
.wl-body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.wl-body p { margin: 0 0 12px; }
.wl-body p:last-child { margin-bottom: 0; }
.wl-ink {
  /* прибрано пунктир-«хвильку» — лишаємо тільки фон-маркер (.wl-mark) як акцент */
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
/* старі .wl-sign / .wl-sign-name / .wl-sign-role перевизначені нижче
   (з підтримкою фото — див. блок «Editorial details») */
.wl-divider {
  margin: 16px 0 14px;
  border-top: 1px dashed rgba(110,80,60,0.28);
}
.wl-ps {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 18px;
}
.wl-ps b {
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
}
.wl-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.wl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .15s, color .15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wl-btn--block {
  display: flex;
  width: 100%;
  padding: 16px 24px;
  font-size: 15px;
  margin-top: 22px;
  white-space: normal;       /* full-width CTA must wrap, not overflow */
  text-align: center;
  overflow-wrap: anywhere;   /* break overly long words safely */
  line-height: 1.3;
}
.wl-btn--ghost {
  background: transparent;
  border-color: #d8c9b1;
  color: var(--text);
}
.wl-btn--ghost:hover { background: #ece2cf; }
.wl-btn--primary {
  background: var(--text);
  border-color: var(--text);
  color: #f5efe2;
}
.wl-btn--primary:hover { background: #1a1a1a; }
.wl-btn:active { transform: scale(0.98); }

/* Secondary text-link (save) — quiet, не конкурує з primary */
.wl-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 8px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-faint, #6e5040);
  cursor: pointer;
  transition: color .15s;
}
.wl-link:hover { color: var(--accent); }
.wl-link.is-saved { color: var(--accent); }

/* Subscribe panel — відокремлений блок з конверсаційним заголовком */
.wl-subscribe {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(110,80,60,0.12);
}
.wl-subscribe-q {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-style: italic;
  color: var(--text-soft, #5a504a);
  margin: 0 0 12px;
  text-align: center;
}
.wl-form {
  display: flex;
  gap: 8px;
}
.wl-form .lead-input { background: #fff; border-color: #d8c9b1; }
.wl-subscribe-tg {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft, #5a504a);
}
.wl-subscribe-tg a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* Трійка винесень листа — Факт / Думка / Ритуал тижня */
.wl-trio {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(110,80,60,0.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wl-trio-card {
  background: var(--tint-warm, #f6f0e6);
  border: 1px solid var(--border, #e2d8c6);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wl-trio-ic { color: var(--accent); }
.wl-trio-ic svg { width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; }
.wl-trio-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold, #a8843a);
}
.wl-trio-text {
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-soft, #5a504a);
}
@media (max-width: 380px) {
  .wl-trio { grid-template-columns: 1fr; gap: 8px; }
  .wl-trio-card { flex-direction: row; text-align: left; gap: 10px; }
}

/* ============= ASK MARIA bridge card ============= */
.bridge-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 20px 0;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  color: var(--text);
  min-height: 44px;
  transition: border-color .15s, transform .15s;
}
.bridge-cta:hover { border-color: var(--accent); }
.bridge-cta:active { transform: scale(0.99); }
.bridge-cta-text { font-size: 14px; line-height: 1.4; }
.bridge-cta-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; }

.ask-maria-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  text-align: left;
  min-height: 44px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.ask-maria-card:hover { border-color: var(--accent); }
.ask-maria-card:active { transform: scale(0.99); }
.ask-maria-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 700;
}
.ask-maria-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ask-maria-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-deep, var(--accent)); font-weight: 700;
}
.ask-maria-title {
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.3;
  color: var(--text);
}
.ask-maria-arrow {
  color: var(--text-faint);
  display: inline-flex;
  flex-shrink: 0;
}

/* Skeleton state — поки JS не загрузить лист тижня */
.wl-card.is-loading > *:not(.wl-skeleton):not(.wl-head) { display: none; }
.wl-card.is-loading .wl-stamp { display: none; }
.wl-card.is-loading .wl-eyebrow { color: var(--text-faint); }
.wl-card:not(.is-loading) .wl-skeleton { display: none; }
.wl-skeleton { padding-top: 4px; }

@media (max-width: 420px) {
  .wl-title { font-size: 22px; }
  .wl-form { flex-direction: column; }
  .wl-form .lead-submit { width: 100%; }
  .wl-actions { flex-direction: column; }
  .wl-btn { width: 100%; }
}

/* ============= LOADING / EMPTY ============= */
.skeleton {
  background: linear-gradient(90deg, var(--border-soft) 25%, var(--border) 50%, var(--border-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-art {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}
.skel-thumb { aspect-ratio: 1; }
.skel-lines > div { height: 14px; margin-bottom: 8px; }
.skel-lines > div:last-child { width: 70%; }

.empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-soft);
  font-style: italic;
  font-family: var(--font-serif);
}

/* ============= TOASTS ============= */
.toast {
  position: fixed;
  bottom: calc(var(--tab-h) + 24px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  z-index: 100;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============= SAFETY ============= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (min-width: 600px) {
  .app { box-shadow: 0 0 60px rgba(0,0,0,0.06); }
}
/* ============= DAY PAGE — segmented tabs + unified cards ============= */

/* Сегментований перемикач режимів дня — Ранок / Зробити / Тиша */
.day-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 8px 16px 14px;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 70%, rgba(246,242,238,0));
  margin: 6px -20px 0;
}
.day-tab {
  flex: 1;
  min-height: 40px;
  padding: 9px 8px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .2s var(--ease-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.day-tab:active { transform: scale(0.97); }
.day-tab.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.day-tab .day-tab-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Панелі — показуємо одну за раз */
.day-panel { display: none; padding-top: 4px; }
.day-panel.is-active { display: block; animation: dayPanelFade .25s var(--ease-soft); }
@keyframes dayPanelFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Уніфіковані стилі карток за призначенням */
.card-action {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.card-passive {
  background: var(--bg-soft);
  border: 1px solid #f3e2d7;
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
.card-support {
  background: #ecf3ee;
  border: 1px solid #d4e3d8;
  border-radius: var(--radius-card);
  padding: 18px 20px;
}

/* Hero-task — велика акцент-задача (перша на сьогодні) */
.hero-task {
  background: linear-gradient(135deg, #fbeee5 0%, #f6e3d4 100%);
  border-radius: var(--radius-card);
  padding: 20px 20px 18px;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.hero-task-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.hero-task-title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.hero-task-meta {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 16px;
}
.hero-task-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition: transform .15s var(--ease-soft);
  min-height: 44px;
}
.hero-task-cta:active { transform: scale(0.96); }
.hero-task-cta.is-done {
  background: var(--secondary);
  color: #fff;
}
.hero-task-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 4px;
}
.hero-task-rest {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.hero-task-rest-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hero-task-rest-arrow { font-size: 15px; line-height: 1; }
.hero-task-rest:active { opacity: 0.6; }

/* Streak-strip — компактна версія для Ранок-панелі */
.streak-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  margin-bottom: 18px;
}
.streak-flame {
  line-height: 1;
  display: inline-flex;
}
.streak-flame svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.streak-compact-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-style: italic;
}
.streak-compact-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
}
.streak-compact-week {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  color: var(--text-soft);
}
.streak-compact-week b {
  color: var(--text);
  font-weight: 700;
}

/* ============= ARTICLE FLOATING ACTIONS — like + telegram-sticky ============= */

/* Floating like — фіксована справа в зоні великого пальця, з'являється коли скрол >35% */
.float-like {
  position: fixed;
  right: 14px;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 90px);
  z-index: 44;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  box-shadow: 0 8px 22px rgba(110,80,60,0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
  pointer-events: none;
}
.float-like.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.float-like:active { transform: scale(0.92); }
.float-like svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  color: var(--text-soft);
  transition: color .15s, fill .15s;
}
.float-like.is-liked svg {
  color: var(--accent);
  fill: var(--accent);
}
.float-like-count {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: -1px;
  line-height: 1;
}
.float-like.is-liked .float-like-count { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .float-like { transition: none; }
}

/* Sticky Telegram banner — з'являється коли скрол >60%, для тих хто не дочитав */
.float-tg {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 43;
  background: var(--text);
  color: #fff;
  padding: 11px 14px 11px 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  max-width: calc(var(--max-w) - 28px);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
  pointer-events: none;
}
.float-tg.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.float-tg-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #229ED9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.float-tg-icon svg { width: 16px; height: 16px; fill: #fff; stroke: #fff; }
.float-tg-text {
  flex: 1;
  min-width: 0;
}
.float-tg-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4a89a;
  font-weight: 700;
  margin-bottom: 1px;
}
.float-tg-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.float-tg-cta {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}
.float-tg-cta:active { transform: scale(0.94); }
.float-tg-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d4a89a;
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 300;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .float-tg { transition: none; }
}

/* ============= RUBRIC COUNTER + DRAWER + HINT ============= */

/* Лічильник у правому верхньому куті статті: "2 / 7 · Із дітьми ↓" */
.rubric-counter {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 45;
  background: rgba(40, 30, 22, 0.62);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background .2s var(--ease-soft), transform .15s var(--ease-soft);
}
.rubric-counter:active { transform: scale(0.96); }
.rubric-counter.is-open {
  background: var(--accent);
  border-color: var(--accent);
}
.rubric-counter[hidden] { display: none; }
.rubric-counter .rc-arrow {
  font-size: 13px;
  line-height: 1;
  margin-left: 1px;
  transition: transform .25s var(--ease-soft);
  display: inline-block;
}
.rubric-counter.is-open .rc-arrow { transform: rotate(180deg); }

/* Tooltip для першого візиту */
.rubric-hint {
  position: fixed;
  top: 56px;
  right: 12px;
  z-index: 46;
  background: #2A2419;
  color: #fff;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  max-width: 220px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  animation: rhBounce 2.2s ease-in-out infinite;
}
.rubric-hint::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #2A2419;
}
.rubric-hint-text { display: block; margin-bottom: 6px; }
.rubric-hint-close {
  display: inline-block;
  font-size: 10px;
  color: #d4a89a;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.rubric-hint[hidden] { display: none; }
@keyframes rhBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .rubric-hint { animation: none; }
}

/* Шторка з усіма статтями рубрики */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 22, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 60;
  animation: drawerFade .25s ease;
}
.drawer-backdrop[hidden] { display: none; }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerSlide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.rubric-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 61;
  background: var(--bg);
  border-radius: 0 0 18px 18px;
  padding: 14px 18px 18px;
  box-shadow: 0 16px 32px rgba(40, 30, 22, 0.18);
  animation: drawerSlide .32s var(--ease-soft);
  max-height: 86dvh;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: var(--max-w);
  margin: 0 auto;
}
.rubric-drawer[hidden] { display: none; }
.drawer-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 12px;
  gap: 12px;
}
.drawer-h-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  flex: 1;
}
.drawer-h-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.drawer-h-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 22px;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.drawer-h-close:active { transform: scale(0.92); }
.drawer-list { display: flex; flex-direction: column; }
.drawer-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
  text-align: left;
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.drawer-item:last-child { border-bottom: none; }
.drawer-item:active { transform: scale(0.99); }
.drawer-item-num {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  padding-top: 3px;
}
.drawer-item.is-current .drawer-item-num { color: var(--accent); }
.drawer-item-body { flex: 1; min-width: 0; }
.drawer-item-title {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 3px;
}
.drawer-item.is-current .drawer-item-title { color: var(--accent-deep); }
.drawer-item-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-sans);
}
.drawer-item-marker {
  display: block;
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}
.drawer-divider {
  margin: 16px 0 12px;
  height: 1px;
  background: var(--border-soft);
}
.drawer-other-h {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 10px;
  font-family: var(--font-sans);
}
.drawer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.drawer-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
}
.drawer-chip:active { transform: scale(0.96); }
.drawer-chip-num {
  color: var(--text-faint);
  font-weight: 500;
  font-size: 11px;
}

/* Continuous scroll — наступна стаття inline */
.next-article {
  margin-top: 36px;
  padding-top: 20px;
  border-top: none;
  position: relative;
}
.next-article-divider {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 18px;
  position: relative;
  padding: 0 14px;
}
.next-article-divider::before,
.next-article-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22%;
  height: 1px;
  background: var(--border);
}
.next-article-divider::before { left: 4%; }
.next-article-divider::after  { right: 4%; }
.next-article-end {
  margin: 32px 18px 8px;
  padding: 18px;
  border-radius: var(--radius-card);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.next-article-end strong {
  display: block;
  font-family: var(--font-serif);
  color: var(--text);
  font-size: 16px;
  margin-bottom: 4px;
}
.next-article-end-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}


/* ============= INLINE SUBSCRIBE CARD (after 2nd article in feed) ============= */
.art-subscribe-card {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 18px;
  text-align: center;
  margin: 4px 0;
}
.art-subscribe-leaf {
  margin-bottom: 8px;
  line-height: 1;
}
.art-subscribe-leaf svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art-subscribe-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.35;
}
.art-subscribe-sub {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 14px;
  line-height: 1.5;
}
.art-subscribe-form {
  justify-content: center;
}

/* ============= DARK MODE — повні оверрайди компонентів ============= */
[data-theme="dark"] .app-header {
  background: var(--bg);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .tab-bar {
  background: var(--bg);
  border-top-color: var(--border);
}
[data-theme="dark"] .art-item,
[data-theme="dark"] .art-subscribe-card {
  background: var(--bg-card);
}
/* Лист тижня — раніше селектор був .wl-letter (не існує), тож картка лишалась
   світло-кремовою у темній темі = світлий текст на світлому фоні. Клас — .wl-card. */
[data-theme="dark"] .wl-card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .wl-btn--primary {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: #fff;
}
[data-theme="dark"] .wl-btn--primary:hover { background: var(--accent); }
[data-theme="dark"] .wl-btn--ghost { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .wl-btn--ghost:hover { background: var(--bg-warm); }
[data-theme="dark"] .wl-mark {
  background: linear-gradient(transparent 65%, rgba(212,114,78,0.30) 65%);
}
[data-theme="dark"] .hero-art {
  background: var(--bg-card);
}
[data-theme="dark"] img {
  opacity: .90;
}
[data-theme="dark"] .lead-input,
[data-theme="dark"] .subscribe-input {
  background: var(--bg-warm);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .lead-input::placeholder {
  color: var(--text-faint);
}
[data-theme="dark"] .mirror-bubble,
[data-theme="dark"] .maria-bubble {
  background: var(--bg-card);
  color: var(--text);
}
[data-theme="dark"] .maria-bubble.user {
  background: var(--accent-soft);
}
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background: var(--bg-warm);
  color: var(--text);
  border-color: var(--border);
}

/* ── Dark mode: filled «активні»/primary елементи ──────────────────────────
   У світлій темі вони = темний чип (var(--text)) + білий текст. У темній
   var(--text) стає світлим → світлий чип + білий текст = нечитабельно.
   Інвертуємо: лишаємо світлий чип, текст робимо темним (var(--bg)). */
[data-theme="dark"] .pill.is-active,
[data-theme="dark"] .pill.is-active:hover,
[data-theme="dark"] .day-tab.is-active,
[data-theme="dark"] .maria-mode.is-active,
[data-theme="dark"] .author-follow,
[data-theme="dark"] .author-follow-btn,
[data-theme="dark"] .task-add,
[data-theme="dark"] .pwa-modal-close,
[data-theme="dark"] .mirror-btn--primary,
[data-theme="dark"] .toast {
  color: var(--bg);
}
[data-theme="dark"] .task-add svg { stroke: var(--bg); }

/* Промо-бар Telegram — у темній робимо акцентним (іконка біла, читається) */
[data-theme="dark"] .float-tg {
  background: var(--cta-bg);
  color: #fff;
}

/* Хардкод-світлі поверхні → темні відповідники */
[data-theme="dark"] .card-support {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .hero-task {
  background: linear-gradient(135deg, #3a2c20 0%, #2c2118 100%);
}
[data-theme="dark"] .mirror-suggest-card {
  background: var(--bg-warm);
  border-color: var(--border);
}
[data-theme="dark"] .self-p-card.is-suggested {
  background: var(--bg-warm);
  border-color: var(--secondary);
}
[data-theme="dark"] .reader-back {
  background: rgba(28,24,20,0.85);
}
[data-theme="dark"] .float-like {
  background: rgba(42,36,32,0.96);
  border-color: var(--border);
}
[data-theme="dark"] .maria-input-wrap {
  background: rgba(28,24,20,0.96);
  border-top-color: var(--border);
}
[data-theme="dark"] .topic-card { background-color: var(--bg-card); }

/* Callout cards — light-baked colors fix */
[data-theme="dark"] .reader-body .callout.callout-try { background: var(--accent-soft); border-color: var(--border); }
[data-theme="dark"] .reader-body .callout.callout-try .callout-label { color: var(--accent); }
[data-theme="dark"] .reader-body .callout.callout-try .callout-text { color: var(--text); }
[data-theme="dark"] .reader-body .callout.callout-support { background: var(--bg-warm); border-color: var(--border); }
[data-theme="dark"] .reader-body .callout.callout-support .callout-label { color: var(--text-soft); }
[data-theme="dark"] .reader-body .callout.callout-support .callout-text { color: var(--text-soft); }

/* Hero-task eyebrow — dark brown on dark gradient = invisible */
[data-theme="dark"] .hero-task-eyebrow { color: var(--accent); }
/* Hero-task rest-link — same fix: accent-deep is invisible on dark gradient */
[data-theme="dark"] .hero-task-rest { color: var(--accent); }

/* Channel buttons — pale borders + near-white hover on dark surface */
[data-theme="dark"] .channel-btn--tg,
[data-theme="dark"] .channels-inline a.ch-tg { color: #3aa6e0; border-color: var(--border); }
[data-theme="dark"] .channel-btn--tg:hover { background: var(--bg-card); }
[data-theme="dark"] .channel-btn--vb,
[data-theme="dark"] .channels-inline a.ch-vb { color: #9d8dff; border-color: var(--border); }
[data-theme="dark"] .channel-btn--vb:hover { background: var(--bg-card); }