/* Free-mode cabinet — стили блока + правила скрытия остального кабинета. */

.free-mode-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* Когда юзер в free-режиме, прячем платные секции, чтобы кабинет не выглядел
   полупустым. Skill-tree, прогресс, методички, league и т.д. появятся
   автоматически после первой оплаты. */
body.free-mode-active #planSection,
body.free-mode-active #streakBlock,
body.free-mode-active #cabQuickActions,
body.free-mode-active #leagueBlock,
body.free-mode-active #srsReviewBlock,
body.free-mode-active #skillTreeBlock,
body.free-mode-active #progressBlock,
body.free-mode-active #nextActionsBlock,
body.free-mode-active #allScalesBlock,
body.free-mode-active #recommendedCatalogBlock,
body.free-mode-active #allCatalogBlock,
body.free-mode-active #methodologyBlock,
body.free-mode-active #sectionLinksBlock,
body.free-mode-active #factflashTodayBlock,
body.free-mode-active #knowledgeGapsBlock,
body.free-mode-active #personalRecsBlock,
body.free-mode-active #emptyCabinetMsg,
body.free-mode-active #clinicalToolsBlock,
body.free-mode-active .pussy-power-hero {
  display: none !important;
}

/* Hero — выбор предмета / продолжить демо-урок */
.fm-hero {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.06), rgba(13, 148, 136, 0.02));
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px);
  padding: 20px;
}
.fm-hero h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
}
.fm-hero .fm-hero-sub {
  margin: 0 0 14px;
  color: var(--text-secondary, #6b7280);
  font-size: 0.9rem;
}
.fm-subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.fm-subject-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.fm-subject-card:hover {
  border-color: var(--accent, #0d9488);
  background: rgba(13, 148, 136, 0.04);
}
.fm-subject-card-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text, #111827);
}
.fm-subject-card-lesson {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.4;
}

.fm-picked-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.fm-picked-hero-body {
  flex: 1 1 auto;
}
.fm-picked-name {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 2px;
}
.fm-picked-lesson {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text, #111827);
}
.fm-picked-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent, #0d9488);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.fm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #111827);
  font-weight: 500;
  font-size: 0.88rem;
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.fm-btn-primary--lg {
  padding: 14px 22px;
  font-size: 1rem;
  border-radius: 12px;
}

/* Paywall-hero — для юзеров, добивших 3 акта демо (DEMO48). Главный CTA — оплата,
   бесплатный урок остаётся доступен второстепенной кнопкой. */
.fm-hero--paywall { padding: 0; overflow: hidden; }
.fm-paywall {
  padding: 22px 24px 20px;
  background: linear-gradient(135deg, rgba(13,148,136,0.08), rgba(13,148,136,0.02));
  border-radius: var(--radius, 14px);
}
.fm-paywall-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent, #0d9488);
  background: rgba(13,148,136,0.12);
  border-radius: 999px;
  margin-bottom: 12px;
}
.fm-paywall-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text, #111827);
  line-height: 1.3;
}
.fm-paywall-sub {
  margin: 0 0 18px;
  color: var(--text-muted, #6b7280);
  font-size: 0.94rem;
  line-height: 1.5;
}
.fm-paywall-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.fm-paywall-price-old {
  color: var(--text-muted, #6b7280);
  text-decoration: line-through;
  font-size: 1rem;
}
.fm-paywall-price-new {
  color: var(--text, #111827);
  font-size: 1.6rem;
  font-weight: 700;
}
.fm-paywall-pct {
  color: var(--accent, #0d9488);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 3px 8px;
  background: rgba(13,148,136,0.12);
  border-radius: 6px;
}
.fm-paywall-timer {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--text-muted, #6b7280);
}
.fm-paywall-timer strong { color: var(--text, #111827); }
.fm-paywall-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fm-paywall-guarantee {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
}

/* Acts progress */
.fm-acts {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px);
  padding: 18px 20px;
}
.fm-acts h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
}
.fm-acts-tiers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fm-acts-tier {
  flex: 1 1 0;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
}
.fm-acts-tier.is-done {
  border-color: var(--correct, #16a34a);
  background: rgba(22, 163, 74, 0.06);
}
.fm-acts-tier.is-current {
  border-color: var(--accent, #0d9488);
  background: rgba(13, 148, 136, 0.08);
}
.fm-acts-tier-percent {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent, #0d9488);
}
.fm-acts-tier.is-done .fm-acts-tier-percent {
  color: var(--correct, #16a34a);
}
.fm-acts-tier-label {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 2px;
}
.fm-acts-countdown {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}
.fm-acts-countdown strong {
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
}

/* Streak — 7 кружков */
.fm-streak {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px);
  padding: 18px 20px;
}
.fm-streak-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.fm-streak-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.fm-streak-day-counter {
  font-size: 0.82rem;
  color: var(--text-secondary, #6b7280);
}
.fm-streak-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.fm-streak-dot {
  flex: 1 1 0;
  height: 8px;
  border-radius: 4px;
  background: rgba(13, 148, 136, 0.1);
}
.fm-streak-dot.is-done {
  background: var(--accent, #0d9488);
}
.fm-streak-dot.is-current {
  background: rgba(13, 148, 136, 0.45);
}
.fm-quest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(13, 148, 136, 0.04);
  border: 1px dashed rgba(13, 148, 136, 0.35);
}
.fm-quest-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #111827);
}
.fm-quest-sub {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}
.fm-quest-done {
  font-weight: 600;
  color: var(--correct, #16a34a);
  font-size: 0.9rem;
}

/* Sticky CTA */
.fm-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.fm-sticky-cta-text {
  font-size: 0.88rem;
  color: var(--text, #111827);
  flex: 1 1 auto;
  line-height: 1.35;
}
.fm-sticky-cta-text strong { color: var(--accent, #0d9488); }
.fm-sticky-cta-text .fm-sticky-cta-old {
  color: var(--text-secondary, #6b7280);
  text-decoration: line-through;
  margin-right: 6px;
}
.fm-sticky-cta-btn {
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--accent, #0d9488);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

@media (max-width: 640px) {
  .fm-picked-hero { flex-direction: column; }
  .fm-sticky-cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .fm-sticky-cta-btn { text-align: center; }
}

/* Чтобы sticky-CTA не перекрывал контент */
body.free-mode-active { padding-bottom: 96px; }