:root {
  --bg: var(--tg-theme-bg-color, #14161c);
  --card-bg: var(--tg-theme-secondary-bg-color, #1f222b);
  --text: var(--tg-theme-text-color, #eef0f5);
  --muted: var(--tg-theme-hint-color, #969cb0);
  --accent: var(--tg-theme-button-color, #6c7cff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --line: rgba(255, 255, 255, 0.1);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent; }
.app { max-width: 600px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 14px; }
.head { text-align: center; padding: 8px 0 0; }
.head h1 { margin: 0; font-size: 26px; }
.status { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.card { background: var(--card-bg); border-radius: 16px; padding: 16px; }

.field-label { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.field-label + .chips, .field-label + textarea { margin-top: 0; }

.chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { flex: 1 1 0; min-width: 90px; padding: 11px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 15px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.chip.is-active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }

textarea { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 16px; resize: vertical; font-family: inherit; margin-bottom: 12px; }

.primary { width: 100%; padding: 14px; border: none; border-radius: 14px; background: var(--accent); color: var(--accent-text); font-size: 16px; font-weight: 600; cursor: pointer; }
.primary:disabled { opacity: 0.6; }
.secondary { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.muted { color: var(--muted); font-size: 14px; }

.result { display: flex; flex-direction: column; gap: 12px; }
.result-actions { display: flex; flex-direction: column; gap: 8px; }
.reading { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.name-item { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.name-name { font-size: 19px; font-weight: 700; }
.name-meaning { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.reading .line { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.reading .line:first-child { margin-top: 2px; }

/* Скелетон-плейсхолдер карточек на время ожидания AI-подбора. */
.name-item.skeleton { pointer-events: none; }
.sk-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 25%, rgba(255,255,255,0.18) 37%, var(--line) 63%); background-size: 400% 100%; animation: sk-shimmer 1.2s ease-in-out infinite; }
.sk-name { height: 18px; width: 42%; margin-bottom: 8px; }
.sk-meaning { width: 80%; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

.teaser { border: 1px solid var(--accent); }
.teaser-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.teaser-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.teaser-list li { font-size: 14px; line-height: 1.45; }

.history h2, .pro h2 { margin: 0 0 8px; font-size: 18px; }
.hist-item { padding: 12px 0; border-top: 1px solid var(--line); }
.hist-item:first-child { border-top: none; padding-top: 4px; }
.hist-q { font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.hist-a { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

.plan { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.plan-popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-title { font-weight: 600; }
.plan-badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; color: var(--accent-text); background: var(--accent); white-space: nowrap; }
.plan-desc { font-size: 13px; color: var(--muted); }
.plan-price { font-weight: 600; color: var(--accent); }
.plan-save { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.plan-group-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 14px 0 2px; }
.plan-group-h:first-child { margin-top: 4px; }
/* «Подарить Pro другу» — вторичная кнопка под списком планов. */
.gift-pro-btn { margin-top: 16px; }
.gift-pro-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }

.foot { text-align: center; padding: 4px 8px; }
.disclaimer { font-size: 12px; line-height: 1.5; }

.hidden { display: none; }

/* --- Вкладки --- */
.tabs { display: flex; gap: 6px; background: var(--card-bg); padding: 4px; border-radius: 14px; }
.tab { flex: 1 1 0; padding: 10px 6px; border: none; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tab.is-active { background: var(--accent); color: var(--accent-text); }
.tab-page { display: flex; flex-direction: column; gap: 14px; }
.card-h { margin: 0 0 4px; font-size: 18px; }
.small { font-size: 12px; }

/* --- Расширенные критерии --- */
.more-toggle { width: 100%; padding: 11px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.criteria { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.chips.wrap { flex-wrap: wrap; }
.chips.wrap .chip { flex: 0 1 auto; min-width: 0; padding: 8px 14px; font-size: 14px; }
.text-input { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 16px; margin-bottom: 12px; font-family: inherit; }
.criteria .text-input { background: var(--card-bg); }
.select { appearance: none; }
.criteria-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.criteria-row .text-input { flex: 1 1 140px; margin-bottom: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
/* Согласие на обработку ПДн: чекбокс с многострочной подписью — выравниваем по верху, фиксируем чекбокс. */
.consent-check { align-items: flex-start; margin-top: 10px; line-height: 1.45; }
.consent-check input { flex: 0 0 auto; margin-top: 2px; }

/* --- Карточки имён в результате/шортлисте --- */
.name-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.name-body { flex: 1 1 auto; cursor: pointer; min-width: 0; }
.name-name { font-size: 19px; font-weight: 700; }
.name-meaning { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.name-hint { font-size: 12px; color: var(--accent); margin-top: 6px; opacity: 0.85; }
.fav-btn { flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 10px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; transition: transform 0.1s, color 0.15s; }
.fav-btn:active { transform: scale(0.86); }
.fav-btn.is-fav { color: #ffce4f; }
.reading .line { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.reading .line:first-child { margin-top: 2px; }

/* --- Шортлист --- */
.fav-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.fav-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.fav-item .name-body { order: 0; }
.fav-item .fav-btn { order: 1; }
.fav-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* --- Недавно открытые имена (история просмотров, ctx.history kind:"name") --- */
.name-history .nh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nh-badge { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--accent); background: rgba(108, 124, 255, 0.15); white-space: nowrap; }
.nh-row { display: flex; gap: 10px; margin: 12px 0 0; padding: 2px 2px 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.nh-row::-webkit-scrollbar { height: 4px; }
.nh-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.nh-item { flex: 0 0 auto; width: 116px; scroll-snap-align: start; padding: 12px 12px 11px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: transform 0.1s, border-color 0.15s; }
.nh-item:active { transform: scale(0.96); border-color: var(--accent); }
.nh-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.nh-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 800; color: var(--accent-text); background: linear-gradient(135deg, #6c7cff, #b86bff); }
.nh-dot { font-size: 16px; margin-left: auto; }
.nh-name { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-date { margin-top: 4px; font-size: 12px; color: var(--muted); }
.nh-empty { margin: 12px 0 0; }

/* --- Календарь именин (святцы) --- */
.namedays .nd-next { margin: 12px 0 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(108, 124, 255, 0.22), rgba(184, 107, 255, 0.22)); border: 1px solid rgba(108, 124, 255, 0.4); }
.nd-next-eyebrow { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.nd-next-count { font-size: 24px; font-weight: 800; margin-top: 3px; background: linear-gradient(135deg, #8c9bff, #d49bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nd-next-name { font-size: 14px; color: var(--text); margin-top: 2px; }
.nd-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nd-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: transform 0.1s, border-color 0.15s; }
.nd-item:active { transform: scale(0.98); border-color: var(--accent); }
.nd-item.nd-unknown { opacity: 0.72; }
.nd-body { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nd-icon { font-size: 16px; flex: 0 0 auto; }
.nd-name { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-right { flex: 0 0 auto; text-align: right; }
.nd-dates { font-size: 13px; color: var(--text); }
.nd-dates.nd-na { color: var(--muted); font-style: italic; }
.nd-count { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nd-count.is-soon { color: var(--accent); font-weight: 700; }
.nd-empty { margin: 12px 0 0; }

/* --- Пригласи друга (рефералка) --- */
.referral { border: 1px solid rgba(108, 124, 255, 0.35); }
.referral h2 { margin: 0 0 8px; }
.referral .ref-stats { margin: 8px 0 0; }
.referral .ref-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* --- Топ имён (discovery) --- */
.top-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.top-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.top-rank { flex: 0 0 auto; width: 26px; text-align: center; font-size: 14px; font-weight: 800; color: var(--accent); }
.top-item .fav-btn { width: 34px; height: 34px; font-size: 20px; }
.top-body { flex: 1 1 auto; min-width: 0; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.top-name { font-size: 17px; font-weight: 700; }
.top-tier { font-size: 12px; color: var(--muted); }

/* --- Инструменты проверки --- */
.tool-result { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.tool-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.tool-score { font-size: 28px; font-weight: 800; color: var(--accent); }
.tool-verdict { font-size: 15px; margin-top: 8px; }
.tool-notes { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.tool-notes li { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tool-comment { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--card-bg); font-size: 14px; line-height: 1.5; }
.pro-hint { margin-top: 12px; cursor: pointer; }
.score-bar { height: 10px; border-radius: 6px; background: var(--card-bg); overflow: hidden; margin-top: 8px; }
.score-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #6c7cff, #b86bff); transition: width 0.3s; }

/* --- Модалка карточки имени --- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
/* .hidden объявлен ВЫШE .modal и при равной специфичности проигрывает — поэтому скрытый модал
   рендерился display:flex и пустым полноэкранным оверлеем перехватывал тапы по странице. Двухклассовое
   правило возвращает скрытому модалу display:none (и для записи видео, и для реальных тапов). */
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.modal-card { position: relative; width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto; background: var(--card-bg); border-radius: 20px 20px 0 0; padding: 20px 18px 28px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4); animation: slideUp 0.2s ease; }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 16px; cursor: pointer; }
.detail-name { margin: 4px 40px 14px 0; font-size: 26px; }
.detail-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.detail-block.num { flex-direction: row; align-items: center; gap: 14px; }
.num-circle { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--accent-text); background: linear-gradient(135deg, #6c7cff, #b86bff); }
.num-meaning { font-size: 14px; line-height: 1.45; margin-top: 2px; }
.detail-row { font-size: 14px; line-height: 1.5; }
.detail-row.warn { color: #ffb27d; }
.muted.warn { color: #ffb27d; }
.detail-label { font-weight: 700; color: var(--text); }
.detail-block.pop .pop-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pop-badge { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #6c7cff, #b86bff); }
.detail-block.pop-rare .pop-badge { background: linear-gradient(135deg, #b86bff, #ff6bd6); }
.detail-block.pop-common .pop-badge { background: linear-gradient(135deg, #6c7cff, #6bc9ff); }
.pop-rank { font-size: 13px; font-weight: 700; color: var(--muted); }
.detail-pro { padding: 14px; border-radius: 12px; border: 1px solid var(--accent); display: flex; flex-direction: column; gap: 8px; }
.detail-pro-title { font-size: 16px; font-weight: 700; }
.small-btn { width: auto; align-self: flex-start; padding: 10px 18px; font-size: 14px; margin-top: 4px; }
.detail-actions { margin-top: 8px; }

/* --- Детальная карточка «значение имени»: структурированные секции --- */
.card-sections { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.card-sec { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.card-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.card-sec-ico { font-size: 16px; line-height: 1; }
.card-sec-title { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
.card-sec-body { font-size: 14px; line-height: 1.5; }
.sec-text { margin-top: 2px; }
.sec-text + .sec-text { margin-top: 6px; }
.sec-key { font-weight: 700; color: var(--text); }
.sec-empty { font-size: 13px; color: var(--muted); font-style: italic; }
.card-sec .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.card-sec .chip { flex: 0 0 auto; min-width: 0; padding: 5px 11px; font-size: 13px; border-radius: 999px; cursor: default; background: var(--card-bg); border: 1px solid var(--line); }
.card-sec .chip.chip-sm { padding: 2px 9px; font-weight: 700; color: var(--accent); }

/* --- Свайп имён --- */
#swipeStart textarea { margin-bottom: 12px; }
.swipe-deck { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.swipe-progress { font-size: 13px; color: var(--muted); text-align: center; }
.swipe-card {
  position: relative; min-height: 180px; display: flex; flex-direction: column; justify-content: center;
  gap: 10px; padding: 24px 20px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line);
  text-align: center; cursor: pointer; user-select: none; touch-action: pan-y;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.swipe-card.swipe-out-like { transform: translateX(120%) rotate(12deg); opacity: 0; }
.swipe-card.swipe-out-nope { transform: translateX(-120%) rotate(-12deg); opacity: 0; }
.swipe-card.swipe-in { animation: swipeIn 0.18s ease; }
@keyframes swipeIn { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.swipe-card-name { font-size: 30px; font-weight: 800; }
.swipe-card-meaning { font-size: 15px; color: var(--muted); line-height: 1.5; }
.swipe-card-tap { margin-top: 4px; opacity: 0.8; }
.swipe-actions { display: flex; gap: 14px; justify-content: center; }
.swipe-btn {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--line); background: var(--card-bg);
  font-size: 26px; line-height: 1; cursor: pointer; transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.swipe-btn:active { transform: scale(0.88); }
.swipe-btn.nope { color: #ff7a7a; }
.swipe-btn.nope:active { border-color: #ff7a7a; }
.swipe-btn.like { color: #ffce4f; }
.swipe-btn.like:active { border-color: #ffce4f; }
.swipe-done { display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 8px 0; }
.swipe-done-title { font-size: 20px; font-weight: 700; }

/* Имя дня — компактный ежедневный крючок над подбором */
.name-of-day { border: 1px solid var(--accent); cursor: pointer; transition: transform 0.1s; }
.name-of-day:active { transform: scale(0.99); }
.nod-eyebrow { font-size: 13px; color: var(--accent); font-weight: 600; }
.nod-name { font-size: 26px; font-weight: 800; margin-top: 2px; }
.nod-meaning { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.nod-foot { font-size: 13px; color: var(--text); margin-top: 8px; opacity: 0.9; }
.nod-hint { margin-top: 6px; color: var(--accent); opacity: 0.85; }

/* «Путь к имени»: прогресс + ачивки (retention) */
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.progress-level { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--accent-text); background: var(--accent); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.progress-bar { height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: 10px 0 6px; }
.progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
.ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.ach { padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); text-align: center; opacity: 0.55; }
.ach.earned { opacity: 1; border-color: var(--accent); }
.ach-emoji { font-size: 24px; line-height: 1; filter: grayscale(1); }
.ach.earned .ach-emoji { filter: none; }
.ach-title { font-size: 13px; font-weight: 700; margin-top: 4px; }
.ach-hint { margin-top: 2px; line-height: 1.3; }

/* Авторитетная утилита скрытия: объявлена ПОСЛЕДНЕЙ, чтобы при равной специфичности побеждать
   любые одноклассовые display-правила компонентов (корень бага .hidden-специфичности). 2-классовые
   show-правила и инлайн-стили НЕ перебивает (без !important). */
.hidden { display: none; }