/* ============================================================
   CONGIX CODE — тарифы и замки (js/plans.js)
   Отдельный файл: окно тарифов открывается и там, где нет pages.css, —
   в редакторе (помощник «Спросить ИИ» после пробных дней).
   ============================================================ */

/* Что у ученика открыто */
.acc-lines { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acc-lines li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  font-size: 0.86rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7);
}
.acc-lines li.on { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.35); color: #bbf7d0; }
.acc-lines li.on svg { color: #4ade80; }
.acc-lines li.off svg { color: rgba(255,255,255,0.45); }

/* Карточки тарифов */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 20px; border-radius: 28px;
  background: radial-gradient(80% 70% at 100% 0%, rgba(167,139,250,0.20), transparent 65%), rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
}
.plan.best { border-color: rgba(167,139,250,0.55); background: radial-gradient(90% 80% at 100% 0%, rgba(167,139,250,0.34), transparent 65%), rgba(255,255,255,0.05); }
.plan.focus { border-color: rgba(167,139,250,0.85); box-shadow: 0 0 0 1px rgba(167,139,250,0.45), 0 18px 40px rgba(109,74,255,0.25); }
.plan-badge {
  position: absolute; top: -11px; right: 18px;
  padding: 0.22rem 0.7rem; border-radius: 999px;
  background: var(--gradient-accent); color: #fff; font-size: 0.74rem; font-weight: 500;
  box-shadow: 0 6px 18px var(--color-accent-glow);
}
.plan-head { display: flex; align-items: center; gap: 12px; }
.plan-head b { display: block; font-size: 1.15rem; font-weight: 500; }
.plan-head small { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.58); margin-top: 2px; }
.plan-ic {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(167,139,250,0.35), rgba(109,74,255,0.08));
  border: 1px solid rgba(167,139,250,0.5); color: #e9e3ff;
}
.plan-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; color: rgba(255,255,255,0.78); }
.plan-points li svg { flex-shrink: 0; margin-top: 3px; color: #a78bfa; }
.plan-foot { display: flex; flex-direction: column; gap: 12px; }
.plan-price { font-size: 1.9rem; font-weight: 300; letter-spacing: -0.01em; white-space: nowrap; }
.plan-price small { font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.plan-buy { width: 100%; }
.plans-free { display: flex; gap: 8px; align-items: flex-start; margin: 1rem 0 0.2rem; font-size: 0.86rem; color: rgba(255,255,255,0.72); line-height: 1.45; }
.plans-free svg { flex-shrink: 0; margin-top: 2px; color: #4ade80; }
.plans-note { margin: 0.3rem 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.45; }
.plans-modal .plans { margin-top: 0.4rem; }
.plans-modal .plan { padding-top: 26px; }

@media (max-width: 1100px) { .set-sec .plans { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

:root[data-theme="light"] .acc-lines li { background: #fff; border-color: var(--color-border); color: var(--color-mid); }
:root[data-theme="light"] .acc-lines li.on { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.35); color: #166534; }
:root[data-theme="light"] .acc-lines li.on svg { color: #16a34a; }
:root[data-theme="light"] .plan { background: radial-gradient(80% 70% at 100% 0%, rgba(109,74,255,0.08), transparent 65%), #fff; border-color: var(--color-border); }
:root[data-theme="light"] .plan.best { border-color: rgba(109,74,255,0.45); }
:root[data-theme="light"] .plan-ic { color: var(--color-accent); }
:root[data-theme="light"] .plan-head small, :root[data-theme="light"] .plan-price small,
:root[data-theme="light"] .plans-note { color: var(--color-mid); }
:root[data-theme="light"] .plan-points li, :root[data-theme="light"] .plans-free { color: var(--color-text); }
:root[data-theme="light"] .plan-points li svg { color: var(--color-accent); }

/* Замок платного курса */
.paywall {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem;
  padding: 2rem 1.6rem 1.8rem; margin-bottom: 1.25rem;
}
.paywall .c-ic { color: #fcd34d; border-color: rgba(251,191,36,0.45); }
.paywall h2 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.paywall p { margin: 0 0 0.6rem; max-width: 52ch; color: rgba(255,255,255,0.68); line-height: 1.55; }
.paywall-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
:root[data-theme="light"] .paywall p { color: var(--color-mid); }
:root[data-theme="light"] .paywall .c-ic { color: #b45309; }

/* Плашка на странице заданий */
.paywall-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 20px; margin-bottom: 1.25rem; border-radius: 28px;
}
.paywall-note .c-ic { width: 42px; height: 42px; color: #fcd34d; }
.paywall-note b { display: block; font-weight: 500; }
.paywall-note span span { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
@media (max-width: 640px) {
  .paywall-note { grid-template-columns: auto minmax(0, 1fr); }
  .paywall-note .cta-ghost { grid-column: 1 / -1; justify-content: center; }
}
:root[data-theme="light"] .paywall-note span span { color: var(--color-mid); }

/* Возврат с Click: ожидание и результат */
.pay-wait { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0.8rem 0 1.2rem; text-align: center; }
.pay-spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(167,139,250,0.25); border-top-color: #a78bfa;
  animation: pay-spin 0.9s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pay-spin { animation-duration: 3s; } }
.pay-done { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; padding-top: 0.4rem; }
.pay-mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.4rem; }
.pay-mark.ok { background: rgba(74,222,128,0.14); border: 1px solid rgba(74,222,128,0.45); color: #4ade80; }
.pay-mark.no { background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.45); color: #f87171; }
.pay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; padding: 1rem 0 0.8rem; }
.pay-actions a.ui-btn { text-decoration: none; }