/* =========================================================
   СДВГ База — Course Platform Styles
   Brand: cream bg, coral accents, MoiAmova handwriting font
   ========================================================= */

@font-face {
    font-family: 'MoiAmova';
    src: url('/fonts/moiamova-1.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-cream: #FDF5EF;
    --bg-white: #FFFFFF;
    --coral: #D98880;
    --coral-light: #F2D5D0;
    --coral-dark: #C07570;
    /* Шаг светлее, чем --coral-light: заливка БОЛЬШИХ поверхностей (карточки,
       плашки-подсказки). --coral-light калиброван под мелкие пятна — бейджи,
       ховеры, границы; на всю карточку он даёт розовое поле насыщеннее, чем
       фон ошибки (.chat-note), и спокойный блок читается как предупреждение. */
    --coral-wash: #FBEDE9;
    /* Коралловые ЧЕРНИЛА: --coral и --coral-dark задуманы как заливки, текстом
       на светлом они дают 3.5:1 — ниже AA. Этот тон читаем и на белом, и на
       --coral-wash (≥4.8:1). Для подписей и обводных кнопок. */
    --coral-ink: #9E524C;
    --mint: #7ea45e;
    /* Readable mint for TEXT on a light mint wash (the 0.13-alpha pills): plain
       --mint gives ~2.4:1 there, below AA. Overridden lighter for dark theme. */
    --mint-deep: #4A7330;
    --blue-soft: #85C1E9;
    --text-dark: #2C2C2B;
    --text-mid: #666;
    --text-light: #999;
    --gray-bg: #F1F1F0;
    --gray-border: #E5E5E5;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --radius: 12px;
    --radius-lg: 16px;
    --max-width: 700px;
    --font-body: 'Montserrat', 'Segoe UI', sans-serif;
    --font-hand: 'MoiAmova', 'Georgia', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    background-color: var(--bg-cream);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg-cream);
    color: var(--text-dark);
    line-height: 1.7;
    height: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---- Screens ---- */
.screen { display: none; min-height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* Loading splash — shown while checkAuth is pending */
.loading-splash {
    align-items: center;
    justify-content: center;
    background: var(--bg-main, #fdf8f5);
    min-height: 100vh;
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(217, 136, 128, 0.2);
    border-top-color: var(--coral, #d98880);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Top Bar ---- */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--gray-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
/* bar-title uses position:absolute, so top-bar needs a positioning context via sticky */
.bar-title {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--coral);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
    text-align: center;
    pointer-events: none;
}
/* Planner: bigger title in nav bar */
.course-planner .bar-title {
    font-size: 1.4rem;
}
.brand-small {
    font-family: var(--font-hand);
    color: var(--coral);
    font-size: 1.2rem;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius);
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-primary {
    background: var(--coral);
    color: white;
    width: 100%;
}
.btn-primary:hover { background: var(--coral-dark); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Quiet counterpart to btn-primary — the «cancel» half of a modal pair. Was
   used in markup long before it existed here, so those buttons rendered as
   raw browser default buttons. */
.btn-secondary {
    background: transparent;
    color: var(--text-mid);
    border: 1.5px solid var(--gray-border);
    width: auto;
}
.btn-secondary:hover { background: var(--gray-bg); }
.btn-secondary:active { transform: scale(0.98); }

.btn-nav {
    background: var(--gray-bg);
    color: var(--text-dark);
    padding: 12px 20px;
    font-size: 0.9rem;
}
.btn-nav:hover { background: var(--gray-border); }

.btn-icon {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-dark);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-icon:hover { background: var(--gray-bg); }

.btn-link {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 12px;
    font-family: var(--font-body);
}

/* Gift-certificate activation — a quiet borderless text link with a 🎁,
   kept to a single line. */
.btn-cert-link {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 6px 4px;
    background: none;
    border: none;
    color: var(--coral);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}
.btn-cert-link:hover {
    color: var(--coral-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.progress-badge {
    background: var(--coral-light);
    color: var(--coral-dark);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---- Progress Bar ---- */
.progress-bar-container {
    height: 3px;
    background: var(--gray-bg);
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--mint));
    transition: width 0.5s ease;
    border-radius: 0 2px 2px 0;
}

/* ---- Input Fields ---- */
.input-field {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--gray-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font-body);
    background: var(--bg-white);
    color: var(--text-dark);
    transition: border-color 0.2s;
    outline: none;
}
.input-field:focus { border-color: var(--coral); }
.input-field::placeholder { color: var(--text-light); }

.error-msg {
    color: #e74c3c;
    font-size: 0.85rem;
    min-height: 20px;
    margin-top: 8px;
}

/* =========== LOGIN =========== */
/* Auth-screen pattern — shared by login & gift-certificate activation.
   Any future auth-style screen (login / activation / recovery) gets the
   same centered card by adding the .auth-screen + .auth-card classes. */
.auth-screen {
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    min-height: 100vh;
}
.auth-card {
    background: var(--bg-white);
    border-radius: 20px;
    border: 1px solid var(--gray-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 400px;
}
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}
.heart-icon {
    font-size: 3rem;
    color: var(--coral);
    animation: heartbeat 2s infinite;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.brand-title {
    font-family: var(--font-hand);
    font-size: 3rem;
    font-weight: 700;
    color: var(--coral);
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1;
    white-space: nowrap;
}
.brand-subtitle {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 6px;
    margin-bottom: 0;
}

/* Shown by the boot watchdog in index.html when the app failed to start */
.boot-error-note {
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg-cream, #FDF5EF);
    border: 1px solid var(--gray-border);
}

/* Step breadcrumb */
.login-steps-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}
.login-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-border);
    transition: background 0.3s;
}
.login-step-dot.active { background: var(--coral); }
.login-step-line {
    width: 32px;
    height: 2px;
    background: var(--gray-border);
    border-radius: 1px;
}

.login-step { display: none; width: 100%; }
.login-step.active { display: flex; flex-direction: column; gap: 14px; }

.login-step-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 0;
    line-height: 1.4;
}
.login-step-sub {
    font-size: 0.85rem;
    color: var(--text-mid);
    text-align: center;
    margin-top: -6px;
}
.login-email-display {
    font-weight: 600;
    color: var(--text-dark);
}

/* OTP digits */
.otp-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--gray-border);
    border-radius: var(--radius);
    outline: none;
    font-family: var(--font-body);
    background: var(--bg-white);
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.otp-digit:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-light);
}

/* Resend area */
.resend-area {
    text-align: center;
    margin-top: 8px;
}
.resend-timer {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Contact footer inside card */
.login-contact {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-border);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.login-contact-label {
    font-size: 0.8rem;
    color: var(--text-light);
}
.login-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-mid);
    text-decoration: none;
    padding: 8px 16px;
    background: var(--gray-bg);
    border-radius: 20px;
    transition: background 0.2s, color 0.2s;
}
.login-contact-link:hover {
    background: var(--coral-light);
    color: var(--coral-dark);
}

/* =========== DASHBOARD =========== */
.dashboard-content {
    padding: 16px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}
.welcome-card {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.30), transparent 55%),
        radial-gradient(80% 60% at 0% 100%, rgba(192,117,112,0.35), transparent 60%),
        linear-gradient(135deg, #E29B95 0%, #C77B75 100%);
    border-radius: var(--radius-lg);
    padding: 24px;
    color: white;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
}
.welcome-card h2 {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.welcome-card p { opacity: 0.9; font-size: 0.9rem; }

.courses-grid { display: flex; flex-direction: column; gap: 16px; }

/* ---- Announcement Banner ---- */
.announcement-banner {
    background: linear-gradient(135deg, #fff7f5, #fceae6);
    border: 1px solid rgba(217, 136, 128, 0.3);
    border-left: 4px solid var(--coral);
    border-radius: var(--radius);
    padding: 14px 42px 14px 16px;
    margin-bottom: 12px;
    position: relative;
    animation: announcementSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-shadow: 0 2px 12px rgba(217, 136, 128, 0.12);
}
.announcement-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.announcement-banner-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.5;
}
.announcement-banner-text {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.55;
    flex: 1;
    min-width: 0;
}

/* Rich announcement body — shared by the banner and the popup. Admin text is
   markdown-ish (paragraphs, lists, bold, links), so it needs real block spacing
   instead of one run-on line. */
.ann-rich > *:first-child { margin-top: 0; }
.ann-rich > *:last-child { margin-bottom: 0; }
.ann-rich p { margin: 0 0 10px; }
.ann-rich ul, .ann-rich ol { margin: 8px 0 10px; padding-left: 22px; }
.ann-rich li { margin-bottom: 6px; }
.ann-rich li:last-child { margin-bottom: 0; }
.ann-rich li::marker { color: var(--coral-dark); font-weight: 700; }
.ann-rich a {
    color: var(--coral-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.ann-rich strong, .ann-rich b { font-weight: 700; }
.ann-rich code {
    background: var(--gray-bg);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 0.9em;
}
.ann-rich h3, .ann-rich h4 { font-size: 1rem; font-weight: 700; margin: 14px 0 6px; }
.ann-rich hr { border: none; border-top: 1px solid var(--gray-border); margin: 12px 0; }
.ann-rich blockquote {
    margin: 8px 0 10px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--coral-light);
    color: var(--text-mid);
}
.announcement-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(217, 136, 128, 0.12);
    color: var(--text-mid);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.announcement-banner-close:hover {
    background: rgba(217, 136, 128, 0.25);
    color: var(--coral-dark);
}
@keyframes announcementSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.announcement-banner.dismissing {
    animation: announcementFadeOut 0.3s ease forwards;
}
@keyframes announcementFadeOut {
    from { opacity: 1; transform: translateY(0); max-height: 200px; margin-bottom: 12px; }
    to   { opacity: 0; transform: translateY(-8px); max-height: 0; margin-bottom: 0; padding: 0; border-width: 0; overflow: hidden; }
}

/* ---- Announcement popup ---- */
/* Shown once per session so news gets read; ✕/Esc falls back to the banner. */
.ann-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ann-modal[hidden] { display: none; }
.ann-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 43, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ann-modal.open .ann-modal-backdrop { opacity: 1; }
.ann-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: min(80vh, 620px);
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    padding: 24px 24px 18px;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ann-modal.open .ann-modal-card { opacity: 1; transform: none; }
.ann-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 36px;
    margin-bottom: 14px;
}
.ann-modal-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--coral-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}
.ann-modal-heading { min-width: 0; }
.ann-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
}
.ann-modal-date { font-size: 0.75rem; color: var(--text-light); }
.ann-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-dark);
    padding-right: 4px;
}
.ann-modal-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-border);
}
.ann-modal-counter {
    font-size: 0.78rem;
    color: var(--text-light);
    white-space: nowrap;
}
.ann-modal-ok {
    width: auto;
    flex: 1;
    padding: 13px 22px;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0.2px;
}
.ann-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(217, 136, 128, 0.12);
    color: var(--text-mid);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.ann-modal-close:hover {
    background: rgba(217, 136, 128, 0.25);
    color: var(--coral-dark);
}
body.ann-modal-lock { overflow: hidden; }

/* Mobile: bottom sheet — thumb-reachable «Понятно», full-width text */
@media (max-width: 600px) {
    .ann-modal { padding: 0; align-items: flex-end; }
    .ann-modal-card {
        max-width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        padding: 20px 18px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(100%);
    }
    .ann-modal.open .ann-modal-card { transform: none; }
    .ann-modal-ok { padding: 15px 20px; }
}

.course-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.course-card:active { transform: scale(0.99); }

.course-card-cover {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--coral-light);
}
.course-card-body { padding: 16px; }
.course-card-body h3 {
    font-family: var(--font-hand);
    color: var(--coral);
    font-size: 1.3rem;
    margin-bottom: 6px;
}
/* Planner card: use brand yellow instead of coral for the title */
.course-card[data-slug="sdvg-planner"] .course-card-body h3 {
    color: #fac95d;
}
.course-card-body p { color: var(--text-mid); font-size: 0.85rem; margin-bottom: 12px; }
.course-card-progress {
    height: 6px;
    background: var(--gray-bg);
    border-radius: 3px;
    overflow: hidden;
}
.course-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--mint));
    border-radius: 3px;
    transition: width 0.5s;
}
.course-card-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 8px;
}

/* ---- Locked Course Card (placeholder) ---- */
.course-card-locked {
    position: relative;
    cursor: not-allowed !important;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.course-card-locked:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}
.course-card-locked:active {
    transform: none !important;
}
.course-card-locked .course-card-body {
    position: relative;
    z-index: 3;
}
.course-card-locked .course-card-body h3 {
    color: #d4991a;
}
.course-card-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.course-card-locked-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
    animation: lockPulse 2.5s ease-in-out infinite;
}
.course-card-locked-text {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: #8B6914;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(255,255,255,0.7);
}
@keyframes lockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ---- Cover wrap (needed for absolute-positioned badge) ---- */
.course-card-cover-wrap {
    position: relative;
    overflow: hidden;
}

/* ---- Preview badge on course card cover ---- */
.preview-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 4;
    letter-spacing: 0.3px;
    animation: previewBadgeIn 0.35s ease-out both;
}
@keyframes previewBadgeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Locked Promo Card (clickable, replaces static "Скоро" card) ---- */
.course-card-locked-promo {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: auto;
    -webkit-user-select: auto;
    display: block;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.course-card-locked-promo:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 24px rgba(218, 165, 32, 0.25) !important;
}
.course-card-locked-promo:active {
    transform: scale(0.98) !important;
}

.locked-promo-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-border);
}
.locked-promo-cta {
    font-size: 0.95rem;
    font-weight: 600;
    color: #E07060;
    letter-spacing: 0.2px;
}
.locked-promo-code {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fff8e1, #ffe082);
    padding: 4px 10px;
    border-radius: 6px;
    color: #8B6914;
}
.locked-promo-code strong {
    font-weight: 800;
    letter-spacing: 1px;
}

/* ---- Planner upsell buttons (planner_only 990 / media_bundle 2000) ---- */
.promo-buy-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 11px 14px;
    border-radius: 12px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.promo-buy-btn-planner {
    background: linear-gradient(135deg, #fac95d, #e6b347);
    color: #5c4708;
    box-shadow: 0 3px 12px rgba(218, 165, 32, 0.3);
}
.promo-buy-btn-planner:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(218, 165, 32, 0.4);
}
.promo-buy-btn-bundle {
    background: #fff8e1;
    color: #8B6914;
    border: 1.5px solid rgba(218, 165, 32, 0.45);
}
.promo-buy-btn-bundle:hover {
    transform: translateY(-2px);
    background: #ffefc2;
}
.promo-buy-btn-soon {
    cursor: default;
    opacity: 0.65;
    background: var(--bg-subtle, #f3f0ea);
    color: var(--text-light);
    border: 1.5px dashed var(--gray-border);
}
.promo-buy-btn-soon:hover { transform: none; background: var(--bg-subtle, #f3f0ea); }
/* Третичная ссылка под кнопкой покупки: «сначала почитать». Намеренно без
   рамки, фона и жирного — она не должна конкурировать с CTA, только давать
   выход тому, кто не готов платить вслепую. */
.promo-secondary-link {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-mid);
    text-decoration: none;
    padding: 2px 0;
    transition: color 0.2s;
}
.promo-secondary-link:hover {
    color: var(--coral-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
[data-theme="dark"] .promo-buy-btn-bundle {
    background: #2A2520;
    color: #f0d68a;
}
[data-theme="dark"] .promo-buy-btn-soon {
    background: #211E1A;
    color: var(--text-light);
}

/* =========== MY TIER (dashboard) =========== */
.my-tier-section { margin-top: 0; }

/* Profile entry point in the dashboard top-bar + dropdown that holds
   the "Мой тариф" card (mirrors .header-more-menu pattern). */
.profile-btn { position: relative; display: inline-flex; }
.profile-tier-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    color: var(--coral-dark);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1.5px solid var(--bg-white);
    pointer-events: none;
    white-space: nowrap;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: min(340px, calc(100vw - 24px));
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(217, 136, 128, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 200;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1),
                transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.profile-menu.open { display: block; opacity: 1; transform: translateY(0); }
/* The card fills the glass panel — drop its own frame to avoid double-framing. */
.profile-menu .tier-card { box-shadow: none; background: transparent; padding: 16px 18px; }
.tier-empty { color: var(--text-light); font-size: 0.92rem; padding: 4px 0; }
[data-theme="dark"] .profile-menu {
    background: #1C1917;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .profile-tier-badge {
    background: linear-gradient(135deg, #332420, #3D2A25);
    border-color: #1C1917;
}
.tier-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 18px 20px;
}
.tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tier-head h3 { margin: 0; font-size: 1.05rem; }
.tier-badge {
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    color: var(--coral-dark);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 20px;
}
.tier-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.tier-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.93rem;
}
.tier-list .tier-ic { width: 1.2em; text-align: center; flex-shrink: 0; }
.tier-list .tier-on { color: var(--text-mid); }
.tier-list .tier-off { color: var(--text-light); }
.tier-meta { color: var(--text-light); font-size: 0.82rem; }
.tier-consult {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tier-consult-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.93rem;
    font-weight: 600;
}
.tier-ctas {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-theme="dark"] .tier-card { background: #1C1917; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .tier-badge { background: linear-gradient(135deg, #332420, #3D2A25); }

/* =========== COURSE SECTIONS =========== */
.sections-list {
    padding: 16px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}
.section-block {
    margin-bottom: 16px;
}
.section-header {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--coral);
    padding: 12px 0;
    border-bottom: 2px solid var(--coral-light);
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section-header::after { content: '▾'; font-size: 0.8rem; color: var(--text-light); }
.section-header.collapsed::after { content: '▸'; }

.download-header {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--coral);
    padding: 12px 0;
    border-bottom: 2px solid var(--coral-light);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
}
.download-header:hover { opacity: 0.8; }
/* Planner chat link: body font + same border as section-header */
.course-planner .download-header {
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom-color: var(--coral-light);
}

.section-lessons { display: flex; flex-direction: column; gap: 4px; }
.section-header.collapsed + .section-lessons { display: none; }

.lesson-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}
.lesson-item:hover { background: var(--coral-light); }
.lesson-item:active { background: var(--gray-border); }

/* Lesson icon + completion badge */
.lesson-icon-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lesson-icon-placeholder {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gray-border);
}
.lesson-done-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--mint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: white;
    border: 2px solid var(--bg-cream);
    line-height: 1;
}
.lesson-item.completed {
    background: rgba(126, 164, 94, 0.08);
}
.lesson-item.completed .lesson-item-title {
    color: var(--text-mid);
}
.lesson-item-title {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-dark);
}
.lesson-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
.lesson-item-time {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Bookmark star in TOC */
.lesson-bookmark-star {
    font-size: 0.75rem;
    flex-shrink: 0;
    line-height: 1;
    animation: bookmarkStarIn 0.35s ease-out both;
    filter: drop-shadow(0 1px 2px rgba(217, 136, 128, 0.3));
}
@keyframes bookmarkStarIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

/* =========== LESSON =========== */
.lesson-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px 120px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}
.lesson-title {
    font-family: var(--font-hand);
    font-size: 1.8rem;
    color: var(--coral);
    margin-bottom: 20px;
    line-height: 1.3;
}

/* =========== LESSON AUDIO BUTTON =========== */
/* Single "Listen" button replaces inline audio player */
.lesson-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    border: 1.5px solid rgba(217, 136, 128, 0.35);
    border-radius: 32px;
    padding: 12px 22px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--coral-dark);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(217, 136, 128, 0.18);
    margin-bottom: 20px;
    width: 100%;
    justify-content: center;
}
.lesson-audio-btn:hover {
    background: linear-gradient(135deg, #fce4e0, #f9d0cc);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(217, 136, 128, 0.28);
}
.lesson-audio-btn:active { transform: scale(0.98); }
.lesson-audio-btn .lab-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--coral);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    font-size: 0; /* hide emoji text */
}
/* Play triangle in lesson button */
.lesson-audio-btn .lab-icon::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent white;
    margin-left: 2px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
/* Pause bars in lesson button */
.lesson-audio-btn.playing .lab-icon::after {
    width: 3px; height: 11px;
    border: 0;
    border-style: none;
    border-width: 0;
    border-color: transparent;
    background: var(--coral-dark);
    box-shadow: 6px 0 0 0 var(--coral-dark);
    margin-left: 0;
    transform: translateX(-3px);
    border-radius: 1px;
}
.lesson-audio-btn.playing .lab-icon {
    background: white;
}
.lesson-audio-btn.playing {
    background: linear-gradient(135deg, var(--coral), var(--coral-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(217, 136, 128, 0.4);
}

/* =========== GLOBAL MINI-PLAYER =========== */
#mini-player {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 500;
    background: white;
    border-top: 1px solid var(--gray-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#mini-player.visible { transform: translateY(0); }

.mp-progress-bar-wrap {
    height: 8px;
    background: var(--gray-bg);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
/* Invisible expanded touch target above & below the bar */
.mp-progress-bar-wrap::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    bottom: -6px;
    z-index: 1;
}
.mp-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--mint));
    transition: width 0.15s linear;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}
@media (max-width: 600px) {
    .mp-progress-bar-wrap {
        height: 12px;
    }
    .mp-progress-bar-wrap::before {
        top: -10px;
        bottom: -4px;
    }
}
.mp-body {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
.mp-info { flex: 1; min-width: 0; }
.mp-track-title {
    font-size: 0.85rem; font-weight: 600; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-section-title {
    font-size: 0.72rem; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.mp-time { font-size: 0.72rem; color: var(--text-light); white-space: nowrap; flex-shrink: 0; }
.mp-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.mp-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--text-dark);
    transition: background 0.15s, transform 0.1s; flex-shrink: 0;
}
.mp-btn:hover { background: var(--gray-bg); }
.mp-btn:active { transform: scale(0.9); }
.mp-play-btn {
    width: 42px !important; height: 42px !important;
    background: var(--coral) !important; color: white !important;
    font-size: 0 !important; /* hide any text */
    box-shadow: 0 2px 10px rgba(217,136,128,0.35);
    position: relative;
}
.mp-play-btn:hover { background: var(--coral-dark) !important; }
/* CSS play triangle */
.mp-play-btn::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent white;
    margin-left: 2px; /* optical center */
    background: none;
    box-shadow: none;
    border-radius: 0;
}
/* CSS pause bars */
.mp-play-btn.is-playing::after {
    width: 4px; height: 16px;
    border: 0;
    border-style: none;
    border-width: 0;
    border-color: transparent;
    background: white;
    box-shadow: 8px 0 0 0 white;
    margin-left: 0;
    transform: translateX(-4px);
    border-radius: 1px;
}
.mp-close-btn { color: var(--text-light); font-size: 0.85rem; }
.mp-speed-btn {
    font-size: 0.72rem !important;
    font-weight: 700;
    color: var(--coral-dark) !important;
    min-width: 36px;
    letter-spacing: -0.5px;
}

/* Restore bubble when mini-player is closed */
#mp-restore-bubble {
    position: fixed; bottom: 90px; right: 24px; z-index: 499;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--coral); color: white; border: none; cursor: pointer;
    display: none; align-items: center; justify-content: center; font-size: 1.3rem;
    box-shadow: 0 4px 18px rgba(217,136,128,0.45); transition: transform 0.2s;
}
#mp-restore-bubble.visible { display: flex; animation: mpBubbleIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
#mp-restore-bubble:hover { transform: scale(1.1); }
@keyframes mpBubbleIn {
    from { opacity:0; transform:scale(0.5); }
    to   { opacity:1; transform:scale(1); }
}

/* =========== CUSTOM VIDEO PLAYER =========== */
.vp-container {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #000;
    /* Force GPU compositing layer so border-radius properly clips video edges */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.vp-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: inherit;
    overflow: hidden;
}
.vp-video {
    width: 100%;
    display: block;
    border-radius: 0;
    cursor: pointer;
}
/* Big center play button */
.vp-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    transition: opacity 0.3s;
    cursor: pointer;
    z-index: 3;
}
.vp-overlay.hidden { opacity: 0; pointer-events: none; }
.vp-big-play {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--coral);
    color: white;
    font-size: 0; /* hide emoji text — use CSS triangle via ::after */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    transition: transform 0.2s, background 0.2s;
    position: relative;
}
.vp-big-play::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 11px 0 11px 20px;
    border-color: transparent transparent transparent white;
    margin-left: 4px; /* optical nudge right for visual center */
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.vp-big-play:hover { background: var(--coral-dark); transform: scale(1.1); }
/* Bottom controls bar */
.vp-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding-top: 24px;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s;
}
.vp-wrapper:hover .vp-controls,
.vp-wrapper.vp-paused .vp-controls { opacity: 1; }
/* Progress bar */
.vp-progress-wrap {
    height: 6px;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    margin: 0 12px;
    border-radius: 3px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.vp-progress-wrap::before {
    content: '';
    position: absolute;
    top: -10px; left: 0; right: 0; bottom: -10px;
    z-index: 1;
}
.vp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--mint));
    border-radius: 3px;
    transition: width 0.1s linear;
    pointer-events: none;
}
/* Controls row */
.vp-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}
.vp-spacer { flex: 1; }
.vp-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.vp-btn:hover { background: rgba(255,255,255,0.15); }
.vp-play-btn { font-size: 1.1rem; }
.vp-speed-btn {
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 38px;
    border-radius: 6px;
    letter-spacing: -0.5px;
    color: var(--coral-light);
}
.vp-fullscreen-btn { font-size: 1.2rem; }
.vp-time {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Speed popup */
.vp-speed-popup {
    position: absolute;
    bottom: 100%;
    right: 48px;
    background: rgba(30,28,26,0.95);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 80px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    z-index: 10;
    display: none;
}
.vp-speed-popup.visible { display: block; }
.vp-speed-option {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    font-weight: 500;
}
.vp-speed-option:hover { background: rgba(255,255,255,0.1); }
.vp-speed-option.active { color: var(--coral); font-weight: 700; }
/* Volume control */
.vp-volume-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}
.vp-volume-btn { font-size: 1rem; }
.vp-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 3px;
    opacity: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: width 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    vertical-align: middle;
    accent-color: var(--coral);
}
/* Show slider on hover — only on devices with pointer (desktop) */
@media (hover: hover) {
    .vp-volume-wrap:hover .vp-volume-slider {
        width: 64px;
        opacity: 1;
    }
}
.vp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* Mobile: bigger touch targets */
@media (max-width: 600px) {
    .vp-progress-wrap { height: 8px; margin: 0 8px; }
    .vp-controls-row { padding: 6px 8px; gap: 4px; }
    .vp-big-play { width: 56px; height: 56px; font-size: 1.3rem; }
}

/* =========== KINESCOPE EMBED PLAYER =========== */
.kinescope-container {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    /* Пока грузится плеер — мягкая заглушка вместо пустой «дырки» */
    background: var(--bg-cream);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Убираем -webkit-mask-image так как он дает пиксельную лесенку по краям в Chrome */
    /* Держим пропорции 16:9 до появления iframe */
    aspect-ratio: 16 / 9;
}
/* Спиннер-заглушка под плеером: виден, пока iframe/постер не подгрузились.
   Как только они появляются (z-index 1 и 2) — перекрывают его. */
.kinescope-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid var(--gray-border);
    border-top-color: var(--coral);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 0;
    pointer-events: none;
}
/* После инициализации JS контейнер получает padding-top и position:relative */
.kinescope-container[data-ks-init] {
    aspect-ratio: unset;
    background: #000;
}
.kinescope-container iframe {
    border: none;
    display: block;
}


/* =========== PODCAST PAGE =========== */
.podcast-content {
    padding: 16px; max-width: var(--max-width);
    margin: 0 auto; width: 100%; padding-bottom: 120px;
}
.podcast-intro {
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px;
    border: 1px solid rgba(217,136,128,0.2);
}
.podcast-intro h2 { font-family: var(--font-hand); color: var(--coral); font-size: 1.4rem; margin-bottom: 6px; }
.podcast-intro p { color: var(--text-mid); font-size: 0.9rem; }

.podcast-section-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-light); font-weight: 600;
    padding: 16px 0 8px;
    border-bottom: 1px solid var(--gray-border); margin-bottom: 4px;
}
.podcast-track {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 10px; border-radius: var(--radius);
    cursor: pointer; transition: background 0.15s; position: relative;
}
.podcast-track:hover { background: var(--coral-light); }
.podcast-track:active { background: var(--gray-border); }
.podcast-track.is-current { background: rgba(217,136,128,0.1); }

.podcast-track-badge {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0;  /* hide emoji text */
    background: var(--gray-bg); border: 2px solid var(--gray-border);
    transition: background 0.2s, border-color 0.2s;
    position: relative;
}
/* Default: headphones = play triangle (new track) */
.podcast-track-badge::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--text-light);
    margin-left: 2px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
/* In-progress: play triangle (coral) */
.podcast-track.in-progress .podcast-track-badge::after {
    border-color: transparent transparent transparent var(--coral);
}
/* Listened: checkmark ✓ via text */
.podcast-track.listened .podcast-track-badge::after {
    content: '✓';
    display: block;
    width: auto; height: auto;
    border: 0; border-style: none; border-width: 0; border-color: transparent;
    background: none; box-shadow: none;
    font-size: 1rem; font-weight: 700;
    color: var(--mint);
    margin-left: 0;
}
/* Current track — paused: show play triangle (white), invite to resume */
.podcast-track.is-current .podcast-track-badge::after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent white;
    background: none;
    box-shadow: none;
    margin-left: 2px;
}
/* Current track — actually playing: show pause bars (white) */
.podcast-track.is-current.is-playing .podcast-track-badge::after {
    content: '';
    width: 3px; height: 12px;
    border: 0; border-style: none; border-width: 0; border-color: transparent;
    background: white;
    box-shadow: 6px 0 0 0 white;
    margin-left: 0;
    transform: translateX(-3px);
    border-radius: 1px;
}
.podcast-track.listened .podcast-track-badge { background: rgba(126,164,94,0.15); border-color: var(--mint); }
.podcast-track.in-progress .podcast-track-badge { background: rgba(217,136,128,0.12); border-color: var(--coral); }
.podcast-track.is-current .podcast-track-badge {
    background: var(--coral); border-color: var(--coral);
    animation: mpBadgePulse 2s ease-in-out infinite;
}
@keyframes mpBadgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(217,136,128,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(217,136,128,0); }
}
.podcast-track-info { flex: 1; min-width: 0; }
.podcast-track-title {
    font-size: 0.9rem; font-weight: 600; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.podcast-track.listened .podcast-track-title { color: var(--text-mid); }
.podcast-track-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.podcast-track-status {
    font-size: 0.72rem; font-weight: 600;
    padding: 2px 7px; border-radius: 10px;
}
.status-listened { background: rgba(125,206,160,0.18); color: #3d9970; }
.status-in-progress { background: rgba(217,136,128,0.18); color: var(--coral-dark); }
.status-new { background: var(--gray-bg); color: var(--text-light); }
.podcast-track-duration { font-size: 0.72rem; color: var(--text-light); }

.podcast-track-prog {
    position: absolute; bottom: 4px; left: 58px; right: 10px;
    height: 2px; background: var(--gray-bg); border-radius: 1px;
    overflow: hidden; display: none;
}
.podcast-track.in-progress .podcast-track-prog,
.podcast-track.is-current .podcast-track-prog { display: block; }
.podcast-track-prog-fill { height: 100%; background: var(--coral); border-radius: 1px; }

/* Extra bottom padding when mini-player is open */
body.mini-player-open .lesson-content-wrapper,
body.mini-player-open .sections-list,
body.mini-player-open .podcast-content { padding-bottom: 120px; }

/* Lift AI fab above mini-player when it's open */
body.mini-player-open .ai-fab { bottom: 84px; }

/* Shrink AI chat panel to not overlap the mini-player */
body.mini-player-open .ai-chat-panel {
    height: calc(100% - 66px - env(safe-area-inset-bottom, 0px));
}

/* =========== MINI-PLAYER PLAYLIST PANEL =========== */
.mp-playlist-panel {
    position: fixed;
    bottom: 64px;
    left: 0; right: 0;
    max-height: 0;
    overflow: hidden;
    background: white;
    z-index: 501;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s;
    box-shadow: none;
}
.mp-playlist-panel.expanded {
    max-height: 55vh;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    border-top: 1px solid var(--gray-border);
}
.mp-playlist-panel .podcast-content {
    padding: 8px 12px 12px;
}
.mp-playlist-panel .podcast-intro { display: none; }
.mp-playlist-panel .podcast-section-label {
    padding: 10px 0 4px;
    font-size: 0.7rem;
}
.mp-playlist-panel .podcast-track {
    padding: 8px 8px;
    gap: 10px;
}
.mp-playlist-panel .podcast-track-badge {
    width: 30px; height: 30px; font-size: 0.85rem;
}
.mp-playlist-panel .podcast-track-title {
    font-size: 0.82rem;
}

/* Keep .audio-player class for backwards compat (hidden now) */
.audio-player {
    background: linear-gradient(135deg, #fff5f3, #fce8e4);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(217, 136, 128, 0.15);
    border: 1px solid rgba(217, 136, 128, 0.2);
}
.audio-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.audio-play-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: none;
    background: var(--coral);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
    box-shadow: 0 2px 8px rgba(217, 136, 128, 0.3);
    padding-bottom: 2px;
    padding-left: 2px;
}
.audio-play-btn:hover {
    transform: scale(1.08);
    background: var(--coral-dark);
}
.audio-progress-wrap {
    flex: 1;
    height: 8px;
    background: rgba(217, 136, 128, 0.2);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.audio-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--coral), var(--coral-dark));
    border-radius: 4px;
    transition: width 0.1s linear;
}
.audio-time {
    font-size: 0.8rem;
    color: var(--coral-dark);
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}
.audio-label {
    font-size: 0.8rem;
    color: var(--text-mid);
    font-style: italic;
    margin-top: 8px;
    text-align: center;
}

/* Lesson body — styled content */
.lesson-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-dark);
    /* Ensure text can be selected on mobile */
    -webkit-user-select: text;
    user-select: text;
}
.lesson-body h2 {
    font-family: var(--font-hand);
    font-size: 1.8rem;
    color: var(--coral);
    margin: 24px 0 6px;
}
.lesson-body h3 {
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: var(--coral-dark);
    margin: 24px 0 8px;
}
.lesson-body p { margin-bottom: 8px; }
.lesson-body strong { color: var(--text-dark); }
/* Бионическое чтение: префикс слова — жирный, хвост гасим до нормального веса,
   чтобы контраст работал даже на уже-жирном тексте (strong, оглавление). */
.lesson-body b.br { font-weight: 700; color: inherit; }
.lesson-body .br-rest { font-weight: 400; }
.lesson-body em { color: var(--text-mid); }
.lesson-body a {
    color: var(--mint);
    text-decoration: underline;
    text-decoration-color: rgba(126, 164, 94, 0.3);
    text-underline-offset: 3px;
}
.lesson-body a:hover { text-decoration-color: var(--mint); }

/* Callout blocks */
.lesson-body blockquote {
    background: var(--coral-light);
    border-left: 4px solid var(--coral);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 16px 20px;
    margin: 20px 0;
    font-style: italic;
}
.lesson-body ul, .lesson-body ol {
    padding-left: 24px;
    margin-bottom: 16px;
}
.lesson-body li { margin-bottom: 8px; }
.lesson-body li::marker { color: var(--coral); }

/* Icon lists (chapters with icons) */
.lesson-body .icon-list {
    list-style: none;
    padding-left: 0;
}
.lesson-body .icon-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.lesson-body .icon-list li img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
}

/* Figures */
.lesson-body figure {
    margin: 20px 0;
    text-align: center;
}
.lesson-body figure img {
    margin: 0 auto;
}

.lesson-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
}
/* Responsive table wrapper — JS injects this, but CSS also handles inline tables */
.lesson-body .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: var(--radius);
}
.lesson-body .table-wrap table {
    margin: 0;
    min-width: 380px;
}
/* Globally wrap all tables in lesson body via JS (see app.js) */
@media (max-width: 600px) {
    .lesson-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: normal;
        width: 100%;
        min-width: 0;
    }
    .lesson-body td,
    .lesson-body th {
        min-width: 90px;
        font-size: 0.72rem;
        padding: 5px 6px;
        overflow-wrap: break-word;
        hyphens: none;
        word-break: normal;
    }
}
.lesson-body th {
    background: var(--coral);
    color: white;
    padding: 10px 12px;
    text-align: left;
}
.lesson-body td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-border);
}
.lesson-body tr:nth-child(even) { background: var(--gray-bg); }

.lesson-body img {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 16px 0;
}

/* Lesson nav */
.lesson-nav {
    display: flex;
    gap: 8px;
    padding: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.lesson-nav .btn {
    flex: 1;
    text-align: center;
    white-space: normal;
    font-size: 12px;
    padding: 10px 10px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lesson-nav #btn-mark-read {
    flex: 0 0 100%;
    order: 10;
    font-size: 13px;
    padding: 12px 16px;
    margin-top: 4px;
}
/* Mobile adjustments for nav row */
@media (max-width: 480px) {
    .lesson-nav #btn-prev,
    .lesson-nav #btn-next {
        flex: 0 0 auto;
        min-width: 72px;
        padding: 10px 10px;
    }
    .lesson-nav .btn-toc {
        flex: 1;
    }
}
.btn-toc {
    background: #b4d1eb;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
.btn-toc:hover { opacity: 0.85; }
.btn-complete-bottom { white-space: normal; }

/* Video player */
.video-container {
    margin: 24px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    position: relative;
}
.video-container video {
    width: 100%;
    display: block;
    /* Show background while loading — fixes vertical videos with no poster on mobile */
    background: #1a1a1a;
}
/* Vertical video: keep natural aspect ratio on mobile */
@media (max-width: 600px) {
    .video-container video[style*="aspect-ratio"],
    .video-container video {
        max-height: 70vh;
        object-fit: contain;
    }
}

/* Collapsible summary */
.collapsible-summary {
    margin: 16px 0;
    border-left: 4px solid #ec8384;
    border-radius: 0 8px 8px 0;
    background: #FDF5EF;
}
.collapsible-summary summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    color: #555;
    list-style: none;
}
.collapsible-summary summary::before {
    content: '▶ ';
    font-size: 0.8em;
}
.collapsible-summary[open] summary::before {
    content: '▼ ';
}
.collapsible-summary .summary-content {
    padding: 0 16px 16px;
}

/* Lesson actions in header */
.lesson-actions { display: flex; gap: 4px; }
.lesson-actions .btn-icon.active { color: var(--coral); }
.header-menu-wrap { position: relative; }
.header-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(217, 136, 128, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 220px;
    display: none;
    flex-direction: column;
    padding: 8px;
    z-index: 200;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-more-menu.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
.header-more-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    width: 100%;
}
.header-more-menu .menu-item:hover {
    background: rgba(217, 136, 128, 0.08);
}
/* Locked menu item — visible but visually disabled (audio for tier_base). */
.header-more-menu .menu-item.menu-item-locked {
    opacity: 0.45;
    color: var(--text-light);
}
.header-more-menu .menu-item.menu-item-locked:hover {
    background: transparent;
}
.header-more-menu .menu-item.menu-item-locked .mi-icon { filter: grayscale(1); }
.header-more-menu .menu-item.menu-item-locked .mi-text::after {
    content: " 🔒";
    font-size: 0.85em;
    opacity: 0.7;
}
.header-more-menu .menu-item:active {
    background: rgba(217, 136, 128, 0.15);
}
.header-more-menu .menu-item.bookmarked {
    background: rgba(217, 136, 128, 0.08);
}
.header-more-menu .menu-item.bookmarked .mi-text {
    color: var(--coral-dark);
}
.header-more-menu .menu-divider {
    height: 1px;
    background: var(--gray-border);
    margin: 4px 0;
}
.header-more-menu .mi-icon {
    font-size: 1.25rem;
    min-width: 26px;
    text-align: center;
    transition: filter 0.2s;
}
/* =========== AI CHAT — SIDE PANEL =========== */
.ai-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--coral);
    color: white;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(217, 136, 128, 0.4);
    z-index: 200;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* For abs-positioned badge */
    overflow: visible;
}
.ai-fab:hover { transform: scale(1.1); }

/* Support FAB — shown in Planner course instead of AI FAB */
.support-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fac95d;
    color: #1a1a1a;
    font-size: 1.4rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(250, 201, 93, 0.5);
    z-index: 200;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.support-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(250, 201, 93, 0.65); }
body.mini-player-open .support-fab { bottom: 84px; }
@media (min-width: 601px) {
    .support-fab { bottom: 32px; right: 32px; }
}

/* Global support FAB — bottom-RIGHT, shown on non-lesson screens (dashboard,
   chapter list, bookmarks…). On lesson screens the in-lesson FAB handles chat
   (guide: AI ✨ with a support tab; planner: support 💬), so this one hides
   there and never doubles up. Inherits .support-fab positioning (right).
   Coral, matching the AI FAB — NOT the yellow support styling. */
.support-fab-global {
    background: var(--coral);
    color: #fff;
    box-shadow: 0 4px 20px rgba(217, 136, 128, 0.4);
}
.support-fab-global:hover { box-shadow: 0 6px 28px rgba(217, 136, 128, 0.55); }

/* Backdrop (darkened overlay behind the panel) */
.ai-chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 290;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.ai-chat-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Side panel */
.ai-chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    background: var(--bg-white);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.ai-chat-panel.open {
    transform: translateX(0);
}

/* Tablet */
@media (max-width: 1024px) {
    .ai-chat-panel { width: 45%; }
}
/* Mobile */
@media (max-width: 600px) {
    .ai-chat-panel {
        width: 100%;
        /* Высота управляется через JS (visualViewport), но fallback: */
        height: 100%;
        top: 0;
    }
}

.ai-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: none;
    flex-shrink: 0;
}
.ai-chat-header h3 {
    font-family: var(--font-hand);
    color: var(--coral);
    font-size: 1.5rem;
}

/* ---- Chat mode tabs (AI / Support) ---- */
.ai-chat-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-border);
    flex-shrink: 0;
    padding: 0 12px;
    gap: 4px;
}
.ai-tab {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    white-space: nowrap;
}
.ai-tab:hover {
    color: var(--text-mid);
}
.ai-tab.active[data-mode="ai"] {
    color: var(--coral);
    border-bottom-color: var(--coral);
}
.ai-tab.active[data-mode="support"] {
    color: #5B9BD5;
    border-bottom-color: #5B9BD5;
}

/* Unread badge on Support tab */
.support-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    animation: fadeIn 0.2s ease;
}

/* Unread badge on FAB button */
.support-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid white;
    animation: fadeIn 0.2s ease;
}

/* Subscription warning badge on FAB (amber, distinct from support red badge) */
/* Quiet nudge dot on the ✨ FAB — deliberately smaller and calmer than the
   subscription badge: it's a suggestion, not a warning. No pulse. */
.nudge-fab-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--coral, #E8917C);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(232, 145, 124, 0.5);
}
.ai-nudge-hook {
    margin-top: 6px;
    color: var(--text-mid, #666);
    font-size: 0.9rem;
    line-height: 1.5;
}
.ai-nudge .ai-nudge-open {
    margin-top: 10px;
}

.sub-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid white;
    animation: subBadgePulse 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
@keyframes subBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 3px 12px rgba(245, 158, 11, 0.6); }
}

/* Support mode message styling — admin replies get blue tint */
.ai-msg.bot.support-msg {
    background: #EBF3FB;
    border-left: 3px solid #5B9BD5;
}
.ai-msg.user.support-msg {
    background: #5B9BD5;
}
/* Support welcome message */
.ai-msg.support-welcome {
    background: linear-gradient(135deg, #EBF3FB, #D6E9F8);
    border: 1px solid rgba(91, 155, 213, 0.25);
    border-radius: 16px !important;
    max-width: 92% !important;
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.5;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ai-msg.bot {
    background: var(--gray-bg);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
/* AI disclaimer footer — always set apart from the answer: divider + smaller, muted text */
/* Закреплённая сноска под полем ввода — одна на весь чат вместо дисклеймера
   под каждым ответом. */
.ai-foot-note {
    padding: 0 16px 10px;
    font-size: 0.7rem;
    line-height: 1.35;
    text-align: center;
    color: var(--text-muted, #8a8a8a);
    flex-shrink: 0;
}

/* «📍 Источник: …» — служебная сноска, а не часть ответа: мельче, приглушённая
   и отделена линией. Ссылка внутри остаётся кликабельной и заметной. */
.ai-msg.bot .ai-source {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted, #8a8a8a);
}
.ai-msg.bot .ai-source a {
    color: var(--coral);
    text-decoration: underline;
}
/* Сноска и дисклеймер идут подряд — вторая линия была бы лишней */
.ai-msg.bot .ai-source + .ai-disclaimer {
    border-top: none;
    padding-top: 2px;
    margin-top: 4px;
}
.ai-msg.bot .ai-disclaimer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted, #8a8a8a);
    font-style: italic;
}
.ai-msg.user {
    background: var(--coral);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.ai-msg.loading {
    background: var(--gray-bg);
    align-self: flex-start;
}
.ai-msg.loading::after {
    content: '●●●';
    animation: dots 1.5s infinite;
    letter-spacing: 4px;
}
@keyframes dots {
    0%, 20% { opacity: 0.2; }
    50% { opacity: 1; }
    80%, 100% { opacity: 0.2; }
}

/* Markdown inside bot messages */
.ai-msg.bot p { margin: 0 0 8px; }
.ai-msg.bot p:last-child { margin-bottom: 0; }
.ai-msg.bot ul, .ai-msg.bot ol {
    margin: 4px 0 8px;
    padding-left: 20px;
}
.ai-msg.bot li { margin-bottom: 4px; }
.ai-msg.bot li::marker { color: var(--coral); }
.ai-msg.bot strong { color: var(--text-dark); font-weight: 600; }
.ai-msg.bot em { color: var(--text-mid); }
.ai-msg.bot code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.88em;
}
.ai-msg.bot pre {
    background: rgba(0,0,0,0.06);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 0.88em;
}
.ai-msg.bot pre code { background: none; padding: 0; }
.ai-msg.bot blockquote {
    border-left: 3px solid var(--coral);
    margin: 8px 0;
    padding: 4px 12px;
    color: var(--text-mid);
}
.ai-msg.bot h1, .ai-msg.bot h2, .ai-msg.bot h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 8px 0 4px;
    color: var(--text-dark);
}

/* Subscription-expired message */
.ai-sub-expired {
    background: linear-gradient(135deg, #fff5f0, #ffe8e0) !important;
    border: 1.5px solid rgba(217, 136, 128, 0.35);
    border-radius: 16px !important;
    max-width: 92% !important;
}
.ai-sub-expired p {
    margin: 0 0 14px;
    line-height: 1.6;
    color: var(--text-dark);
}
.ai-renew-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--coral);
    color: #fff;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 12px rgba(217, 136, 128, 0.35);
}
.ai-renew-btn:hover {
    background: var(--coral-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(217, 136, 128, 0.45);
}
.ai-renew-btn:active {
    transform: scale(0.97);
}

/* Two-button payment layout in AI chat */
.ai-pay-btns {
    display: flex;
    gap: 8px;
    margin: 10px 0 6px;
    flex-direction: column;
}
.ai-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, transform 0.15s;
    line-height: 1.3;
    white-space: nowrap;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}
.ai-pay-btn-ru {
    background: var(--coral);
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(217, 136, 128, 0.35);
}
.ai-pay-btn-ru:hover {
    background: var(--coral-dark);
    transform: translateY(-1px);
}
.ai-pay-btn-intl {
    background: var(--gray-bg);
    color: var(--text-dark) !important;
    border: 1.5px solid var(--gray-border);
}
.ai-pay-btn-intl:hover {
    background: var(--gray-border);
    transform: translateY(-1px);
}
.ai-pay-oferta {
    font-size: 0.72rem;
    color: var(--text-light);
    margin: 2px 0 0;
    line-height: 1.4;
}
.ai-pay-oferta a {
    color: var(--coral);
    text-decoration: underline;
}

/* Subscription expiry warning (soft, non-blocking) */
.ai-sub-warning {
    background: linear-gradient(135deg, #fffbea, #fff3cd) !important;
    border: 1.5px solid rgba(255, 193, 7, 0.35);
    border-radius: 16px !important;
    max-width: 92% !important;
}
.ai-sub-warning p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-dark);
    font-size: 0.9rem;
}
.ai-sub-warning a {
    color: var(--coral);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Disabled input when subscription is inactive */
.ai-input-bar .ai-field:disabled {
    background: var(--gray-bg);
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.7;
}
.ai-input-bar .btn-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Quick-action chips */
.ai-chips {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ai-chips::-webkit-scrollbar { display: none; }
.ai-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--coral);
    background: transparent;
    color: var(--coral);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.ai-chip:hover {
    background: var(--coral);
    color: #fff;
    transform: translateY(-1px);
}
.ai-chip:active {
    transform: scale(0.96);
}
.ai-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Refund flow inside the support chat. Its chips wrap (unlike the horizontal
   .ai-chips strip) — the labels here are sentences, not one-word prompts. */
.refund-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 4px 6px;
}
.refund-chips .ai-chip {
    white-space: normal;
    text-align: left;
}
.refund-chip {
    border-color: #5B9BD5;
    color: #5B9BD5;
}
.refund-chip:hover {
    background: #5B9BD5;
    color: #fff;
}
.refund-confirm textarea {
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1.5px solid var(--gray-border);
    border-radius: 12px;
    background: var(--bg-white);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.refund-confirm textarea:focus {
    outline: none;
    border-color: #5B9BD5;
}

.ai-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-border);
    background: var(--bg-white);
    flex-shrink: 0;
    /* Safe area для iPhone (нижняя полоска) */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.ai-input-preview-container {
    padding: 8px 16px;
    background: var(--gray-bg);
    border-top: 1px solid var(--gray-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-dark);
}
.support-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    font-weight: 500;
}
.btn-attach {
    margin: 0;
    padding: 0 4px;
    color: var(--text-mid);
    opacity: 0.8;
}
.btn-attach:hover {
    opacity: 1;
}
.ai-field { border-radius: 24px; padding: 12px 18px; }
.btn-send {
    width: 48px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}



/* =========== BOOKMARKS =========== */
.bookmarks-content {
    padding: 16px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}
.bookmark-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s;
}
.bookmark-card:hover { transform: translateY(-1px); }
.bookmark-card h4 { color: var(--coral); font-size: 0.95rem; margin-bottom: 4px; }
.bookmark-card p { color: var(--text-light); font-size: 0.8rem; }

/* =========== LOADING =========== */
.skeleton {
    background: linear-gradient(90deg, var(--gray-bg) 25%, var(--bg-white) 50%, var(--gray-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 18px; margin-bottom: 12px; width: 80%; }
.skeleton-title { height: 28px; margin-bottom: 16px; width: 60%; }
.skeleton-block { height: 200px; margin-bottom: 16px; }

/* =========== DESKTOP ADJUSTMENTS =========== */
@media (min-width: 768px) {
    .auth-card { padding: 40px; }
    .brand-title { font-size: 3rem; }
    .lesson-content-wrapper { padding: 32px 24px 120px; }
    .lesson-title { font-size: 2.2rem; }
    .lesson-body { font-size: 1.1rem; }
    .otp-digit { width: 56px; height: 64px; font-size: 1.8rem; }
    .ai-fab { bottom: 32px; right: 32px; }
    .explain-btn { opacity: 0.6; }
    .explain-btn:hover { opacity: 1; }
}

/* =========================================================
   Highlighter — marks & popup
   ========================================================= */

/* Mark colors */
.hl-mark {
    border-radius: 3px;
    padding: 1px 0;
    cursor: pointer;
    transition: filter 0.15s;
    position: relative;
}
.hl-mark:hover { filter: brightness(0.92); }

.hl-yellow { background-color: rgba(255, 235, 59, 0.45); }
.hl-green  { background-color: rgba(129, 199, 132, 0.45); }
.hl-pink   { background-color: rgba(244, 143, 177, 0.45); }
.hl-blue   { background-color: rgba(100, 181, 246, 0.45); }
.hl-orange { background-color: rgba(255, 183, 77, 0.45); }

/* Note indicator */
.hl-mark.has-note::after {
    content: '📝';
    font-size: 0.6rem;
    position: absolute;
    top: -8px;
    right: -4px;
    pointer-events: none;
}

/* Popup */
.hl-popup {
    position: fixed;
    z-index: 99999;
    display: none;
    align-items: center;
    gap: 2px;
    background: #fff;
    border-radius: 24px;
    padding: 6px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    animation: hlFadeIn 0.15s ease;
    /* Prevent popup from extending offscreen */
    max-width: calc(100vw - 20px);
}
@keyframes hlFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hl-popup-colors {
    display: flex;
    gap: 5px;
    margin-right: 6px;
}
.hl-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.hl-color-dot:hover {
    transform: scale(1.2);
    border-color: rgba(0,0,0,0.2);
}

.hl-color-yellow { background: #ffeb3b; }
.hl-color-green  { background: #81c784; }
.hl-color-pink   { background: #f48fb1; }
.hl-color-blue   { background: #64b5f6; }
.hl-color-orange { background: #ffb74d; }

.hl-popup-btn {
    background: none;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.hl-popup-btn:hover {
    background: rgba(0,0,0,0.06);
}
.hl-popup-delete {
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Correct SVG vertical alignment inside popup */
    margin-left: 2px;
    margin-right: 2px;
}
.hl-popup-delete:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* =========================================================
   My Notes / Highlights screen
   ========================================================= */

.notes-content {
    padding: 16px;
    max-width: 700px;
    margin: 0 auto;
}

.notes-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-mid);
}
.notes-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.notes-empty-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 8px;
}

.notes-group {
    margin-bottom: 28px;
}
.notes-group-header {
    margin-bottom: 10px;
}
.notes-section {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}
.notes-lesson-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--coral-dark);
    cursor: pointer;
    margin: 0;
    transition: color 0.15s;
}
.notes-lesson-title:hover {
    color: var(--coral);
}

.notes-card {
    position: relative;
    padding: 12px 36px 12px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: opacity 0.3s, transform 0.3s;
}
.notes-card.hl-yellow { border-left-color: #ffeb3b; background: rgba(255, 235, 59, 0.12); }
.notes-card.hl-green  { border-left-color: #81c784; background: rgba(129, 199, 132, 0.12); }
.notes-card.hl-pink   { border-left-color: #f48fb1; background: rgba(244, 143, 177, 0.12); }
.notes-card.hl-blue   { border-left-color: #64b5f6; background: rgba(100, 181, 246, 0.12); }
.notes-card.hl-orange { border-left-color: #ffb74d; background: rgba(255, 183, 77, 0.12); }

.notes-card:hover {
    filter: brightness(0.97);
}

.notes-card-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-dark);
}

.notes-card-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.notes-card:hover .notes-card-delete {
    opacity: 1;
}
.notes-card-delete:hover {
    color: #e74c3c;
}

/* Notes button in course header */
.notes-btn {
    font-size: 1.2rem;
    margin-left: auto;
    margin-right: 4px;
}

/* =========== NO ACCESS CARD =========== */
.no-access-card {
    max-width: 420px;
    margin: 40px auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.35s ease;
}
.no-access-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.no-access-title {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: var(--coral);
    margin-bottom: 8px;
}
.no-access-text {
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.no-access-buy {
    display: block;
    text-decoration: none;
    margin-bottom: 24px;
    text-transform: none;
    font-size: 1.05rem;
    letter-spacing: 0;
}
.no-access-support {
    background: var(--bg-cream);
    border-radius: var(--radius);
    padding: 16px;
}
.no-access-support > p {
    color: var(--text-mid);
    font-size: 0.85rem;
    margin-bottom: 10px;
}
.no-access-contacts {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.no-access-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--coral-dark);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.15s;
}
.no-access-link:hover {
    color: var(--coral);
}
/* When inside login error container, reset overflow */
.error-msg .no-access-card {
    margin-top: 16px;
}

/* =========== QUIZ MODALS (embedded in lesson content) =========== */
/* Fix 5-option quiz buttons on mobile — reduce inner padding */
@media (max-width: 480px) {
    /* Quiz modal container adjustments */
    [id$="-modal"] > div {
        max-height: calc(100dvh - 24px) !important;
    }
    /* Inner scroll area: reduce side padding */
    [id$="-modal"] [style*="overflow-y:auto"] {
        padding: 12px 10px !important;
    }
    /* Quiz modal header: reduce padding */
    [id$="-modal"] [style*="padding:20px 24px"] {
        padding: 14px 14px !important;
    }
    /* Each question row with 5 answer buttons: tighten gaps */
    [id$="-modal"] [style*="display:flex;gap:4px"],
    [id$="-modal"] [style*="display:flex;gap:8px"] {
        gap: 3px !important;
    }
    /* Answer button divs: reduce padding, allow text to wrap */
    [id$="-modal"] label > div[style*="min-height:48px"],
    [id$="-modal"] label > div[style*="min-height:44px"] {
        padding: 6px 1px !important;
        font-size: 10px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
    }
    /* Quiz submit button full width */
    [id$="-modal"] button[onclick*="calculate"] {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

/* =========================================================
   PLANNER COURSE THEME
   Activated via body.course-planner class
   Bright yellow #FAC95D replaces coral; black text on yellow backgrounds
   ========================================================= */
body.course-planner {
    --coral: #FAC95D;
    --coral-light: #FFF8E6;
    --coral-wash: #FFFBF2;
    --coral-ink: #8A6A16;
    --coral-dark: #E6B347;
}
/* Black text on yellow buttons/badges */
body.course-planner .btn-primary,
body.course-planner .btn-complete-bottom {
    color: #1a1a1a;
}
body.course-planner .welcome-card {
    background: linear-gradient(135deg, #FAC95D, #E6B347);
    color: #1a1a1a;
}
body.course-planner .welcome-card * {
    color: #1a1a1a;
}
body.course-planner .course-card-body h3 {
    color: #8B6818;
}
body.course-planner .progress-badge {
    background: #FFF8E6;
    color: #8B6818;
}
body.course-planner .course-card-progress-fill {
    background: linear-gradient(90deg, #FAC95D, var(--mint));
}
body.course-planner .progress-bar {
    background: linear-gradient(90deg, #FAC95D, var(--mint));
}
body.course-planner .section-header {
    color: #1a1a1a;
    font-size: 1.4rem;
    border-bottom-color: rgba(0,0,0,0.15);
}
body.course-planner .btn-toc {
    color: #1a1a1a;
}
/* Planner — dark theme overrides */
[data-theme="dark"] body.course-planner {
    --coral: #FAC95D;
    --coral-light: #3D3820;
    --coral-dark: #E6B347;
}
[data-theme="dark"] body.course-planner .btn-primary,
[data-theme="dark"] body.course-planner .btn-complete-bottom {
    color: #1a1a1a;
}
[data-theme="dark"] body.course-planner .welcome-card {
    background: linear-gradient(135deg, #C49A15, #8B6914);
    color: #fff;
}
[data-theme="dark"] body.course-planner .welcome-card * {
    color: #fff;
}
[data-theme="dark"] body.course-planner .course-card-body h3 {
    color: #FAC95D;
}
[data-theme="dark"] body.course-planner .section-header {
    color: #FAC95D;
}

/* =========================================================
   DARK THEME
   Activated via [data-theme="dark"] on <html>
   ========================================================= */
[data-theme="dark"] {
    --bg-cream: #1C1917;
    --bg-white: #262220;
    --text-dark: #EDE9E4;
    --text-mid: #A89F98;
    --text-light: #6B6360;
    --gray-bg: #2C2826;
    --gray-border: #3D3835;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --coral-light: #3D2A27;
    --coral-wash: #2E2825;
    --coral-ink: #E5A9A2;
    --mint-deep: #9BC47B;
    /* coral, coral-dark, mint, blue-soft — keep as-is (brand colors look great on dark) */
}

/* Mini-player & modal backgrounds in dark mode */
[data-theme="dark"] #mini-player {
    background: #1C1917;
    border-top-color: var(--gray-border);
}
[data-theme="dark"] .mp-playlist-panel {
    background: #1C1917;
}
[data-theme="dark"] .ai-chat-panel {
    background: var(--bg-white);
}
[data-theme="dark"] .ai-msg.bot {
    background: var(--gray-bg);
    color: var(--text-dark);
}
[data-theme="dark"] .ai-msg.user {
    background: var(--coral);
    color: #fff;
}

/* Announcement banner in dark mode */
[data-theme="dark"] .announcement-banner {
    background: linear-gradient(135deg, #2C2220, #332824);
    border-color: rgba(217, 136, 128, 0.2);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .announcement-banner-close {
    background: rgba(217, 136, 128, 0.15);
}

/* Announcement popup in dark mode (--bg-white already flips; the shadow and
   the backdrop need to go deeper than the light-theme values) */
[data-theme="dark"] .ann-modal-card {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .ann-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .ann-modal-close {
    background: rgba(217, 136, 128, 0.15);
}

/* Welcome card keeps its gradient — white text is fine */

/* Lesson audio button */
[data-theme="dark"] .lesson-audio-btn {
    background: linear-gradient(135deg, #332420, #3D2A25);
    border-color: rgba(217, 136, 128, 0.25);
    color: var(--coral);
}
[data-theme="dark"] .lesson-audio-btn:hover {
    background: linear-gradient(135deg, #3D2A25, #4A3230);
}
[data-theme="dark"] .lesson-audio-btn.playing {
    background: linear-gradient(135deg, var(--coral), var(--coral-dark));
    color: #fff;
}

/* Input fields */
[data-theme="dark"] .input-field {
    background: var(--gray-bg);
    border-color: var(--gray-border);
    color: var(--text-dark);
}
[data-theme="dark"] .otp-digit {
    background: var(--gray-bg);
    border-color: var(--gray-border);
    color: var(--text-dark);
}

/* Lesson content inline elements adapt via variables automatically */
/* Images — keep as-is */
/* Arrow icons on dark bg might need inversion */
[data-theme="dark"] .lesson-body img[src*="arrow-right"] {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Video player container dark borders */
[data-theme="dark"] .vp-container {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
[data-theme="dark"] .kinescope-container {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Header menu dark mode */
[data-theme="dark"] .header-more-menu {
    background: var(--bg-white);
    border-color: var(--gray-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .menu-item:hover {
    background: var(--gray-bg);
}

/* Restore bubble */
[data-theme="dark"] #mp-restore-bubble {
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

/* Course card locked — dark overlay */
[data-theme="dark"] .course-card-locked-overlay {
    background: rgba(28, 25, 23, 0.55);
}
[data-theme="dark"] .course-card-locked-text {
    color: #C9A848;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Details/summary blocks in lesson content */
[data-theme="dark"] .lesson-body details {
    background: var(--bg-cream);
    border-color: var(--gray-border);
}
[data-theme="dark"] .lesson-body details summary {
    color: var(--text-dark);
}

/* AI Chat */
[data-theme="dark"] .ai-chat-header {
    background: var(--gray-bg);
    border-bottom-color: var(--gray-border);
}
[data-theme="dark"] .ai-input-bar {
    border-top-color: var(--gray-border);
    background: var(--bg-white);
}
[data-theme="dark"] .ai-chip {
    background: var(--gray-bg);
    color: var(--text-dark);
    border-color: var(--gray-border);
}
[data-theme="dark"] .ai-chat-backdrop {
    background: rgba(0,0,0,0.6);
}

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--text-dark);
}
.theme-toggle-btn:hover {
    background: var(--gray-bg);
}

/* Podcast page cards */
[data-theme="dark"] .podcast-card,
[data-theme="dark"] .podcast-track {
    background: var(--bg-white);
    border-color: var(--gray-border);
}

/* Notes / highlights */
[data-theme="dark"] .note-card {
    background: var(--bg-white);
    border-color: var(--gray-border);
}

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-cream);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-border);
}

/* =========================================================
   DARK THEME — Embedded Quiz/Test Modals (AAMM etc.)
   These use heavy inline styles, so !important is needed.
   ========================================================= */

/* Modal backdrop — already fine (rgba overlay) */

/* Quiz container (outer coral wrapper) — keep coral gradient header */

/* Scrollable quiz body: white → dark */
[data-theme="dark"] [id$="-test-modal"] [style*="overflow-y:auto"] {
    background: var(--bg-white) !important;
}

/* Question text color */
[data-theme="dark"] [id$="-test-modal"] [data-q] p {
    color: var(--text-dark) !important;
}
[data-theme="dark"] [id$="-test-modal"] [data-q] strong {
    color: var(--text-dark) !important;
}

/* Dividers between questions */
[data-theme="dark"] [id$="-test-modal"] [data-q] {
    border-bottom-color: var(--gray-border) !important;
}

/* Answer option buttons — base styles for BOTH themes
   (JS onclick clears inline styles to '' so CSS takes over) */
[id$="-test-modal"] label > div {
    background: white;
    border-color: #e8ddd7;
    color: #333;
}
[data-theme="dark"] [id$="-test-modal"] label > div {
    background: var(--bg-cream) !important;
    border-color: var(--gray-border) !important;
    color: var(--text-dark) !important;
}

/* Selected answer — coral stays, but ensure white text */
[data-theme="dark"] [id$="-test-modal"] label > div[style*="background: rgb(236, 131, 132)"],
[data-theme="dark"] [id$="-test-modal"] label > div[style*="background:#ec8384"],
[data-theme="dark"] [id$="-test-modal"] label > div[style*="background: #ec8384"] {
    background: #ec8384 !important;
    border-color: #ec8384 !important;
    color: white !important;
}

/* Submit / calculate button — keeps coral gradient, no change needed */


/* Result display area */
[data-theme="dark"] [id$="-test-modal"] [id$="-test-result"] {
    color: var(--text-dark);
}
[data-theme="dark"] [id$="-test-modal"] [id$="-test-result"] > div {
    background: linear-gradient(135deg, var(--bg-cream), var(--bg-white)) !important;
}
[data-theme="dark"] [id$="-test-modal"] [id$="-test-result"] p {
    color: var(--text-mid) !important;
}

/* Validation warning for unanswered questions */
[data-theme="dark"] [id$="-test-modal"] [data-q][style*="background: rgb(255, 245, 245)"],
[data-theme="dark"] [id$="-test-modal"] [data-q][style*="background:#fff5f5"] {
    background: rgba(236, 131, 132, 0.15) !important;
}
[data-theme="dark"] #masking-validation-msg {
    background: linear-gradient(135deg, #2C2220, #332420) !important;
    border-color: var(--gray-border) !important;
}
[data-theme="dark"] #masking-validation-msg p {
    color: var(--text-mid) !important;
}

/* =========================================================
   DARK THEME — Lesson body inline-style overrides
   Legacy lesson HTML contains hardcoded colors (#FDF5EF, #ec8384 etc.)
   that don't adapt to dark mode. These rules use !important to fix them.
   ========================================================= */

/* Info blocks with hardcoded cream background */
[data-theme="dark"] .lesson-body div[style*="background: #FDF5EF"],
[data-theme="dark"] .lesson-body div[style*="background:#FDF5EF"] {
    background: var(--bg-white) !important;
}

/* Headings with hardcoded coral color */
[data-theme="dark"] .lesson-body h2[style*="color: #ec8384"],
[data-theme="dark"] .lesson-body h2[style*="color:#ec8384"] {
    color: var(--coral) !important;
}

/* TOC links with hardcoded coral */
[data-theme="dark"] .lesson-body a[style*="color: #ec8384"],
[data-theme="dark"] .lesson-body a[style*="color:#ec8384"] {
    color: var(--coral) !important;
}

/* TOC number spans with hardcoded coral */
[data-theme="dark"] .lesson-body span[style*="color: #ec8384"],
[data-theme="dark"] .lesson-body span[style*="color:#ec8384"] {
    color: var(--coral) !important;
}

/* Links with hardcoded green (mint) */
[data-theme="dark"] .lesson-body a[style*="color: #7ea45e"],
[data-theme="dark"] .lesson-body a[style*="color:#7ea45e"] {
    color: var(--mint) !important;
}

/* Numbered circles with hardcoded blue background */
[data-theme="dark"] .lesson-body span[style*="background: #b4d1eb"],
[data-theme="dark"] .lesson-body span[style*="background:#b4d1eb"] {
    background: var(--blue-soft) !important;
}

/* Grey caption text */
[data-theme="dark"] .lesson-body p[style*="color: #999"],
[data-theme="dark"] .lesson-body p[style*="color:#999"] {
    color: var(--text-light) !important;
}
[data-theme="dark"] .lesson-body em[style*="color: #999"],
[data-theme="dark"] .lesson-body em[style*="color:#999"] {
    color: var(--text-light) !important;
}

/* Hardcoded white backgrounds on spectrum/info blocks */
[data-theme="dark"] .lesson-body div[style*="background: white"],
[data-theme="dark"] .lesson-body div[style*="background: #fff"],
[data-theme="dark"] .lesson-body div[style*="background:#fff"] {
    background: var(--bg-white) !important;
}

/* =========== PWA INSTALL BANNER =========== */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 600;
    background: var(--bg-white);
    border-top: 1px solid var(--gray-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
    pointer-events: none;
}
.pwa-install-banner.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.pwa-install-banner.dismissing {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.pwa-install-body {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.pwa-install-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(217, 136, 128, 0.15);
}
.pwa-install-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pwa-install-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pwa-install-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}
.pwa-install-text span {
    font-size: 0.8rem;
    color: var(--text-mid);
    line-height: 1.3;
}

.pwa-install-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    background: var(--coral);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.pwa-install-btn:hover {
    background: var(--coral-dark);
}
.pwa-install-btn:active {
    transform: scale(0.96);
}

.pwa-install-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.pwa-install-close:hover {
    background: var(--gray-bg);
    color: var(--text-mid);
}

/* iOS instructions */
.pwa-ios-instructions {
    max-width: var(--max-width);
    margin: 12px auto 0;
    padding-top: 12px;
    border-top: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: pwaIosSlideIn 0.3s ease both;
}
@keyframes pwaIosSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pwa-ios-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.4;
}
.pwa-ios-num {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--coral);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.pwa-ios-share-icon {
    display: inline-block;
    vertical-align: middle;
    color: var(--coral);
    margin: 0 2px;
}

/* Dark theme */
[data-theme="dark"] .pwa-install-banner {
    background: #1C1917;
    border-top-color: var(--gray-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .pwa-install-icon {
    background: linear-gradient(135deg, #332420, #3D2A25);
}
[data-theme="dark"] .pwa-install-close:hover {
    background: var(--gray-bg);
}

/* =========== LOCKED LESSON ITEMS (preview enrollment) =========== */
.lesson-item.locked {
    opacity: 0.7;
    cursor: pointer;
}
.lesson-item.locked:hover {
    background: rgba(217, 136, 128, 0.1);
}
.lesson-item.locked:active {
    background: var(--gray-border);
}
.lesson-lock-placeholder {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
}
.lesson-item-locked-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #E07060;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========== REFUND-GUARANTEE DEMO =========== */
/* The welcome banner shown for the 3-day money-back window. Kept on tokens (it
   used to be inline styles with a pinned light background — in dark theme the
   themed text colours turned it into white-on-white). */
.demo-welcome {
    background: linear-gradient(180deg, #FFFAF8, #FFF6F3);
    border: 1px solid var(--coral-light);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}
.demo-welcome p {
    margin: 0 0 8px;
    color: var(--text-mid);
    font-size: 0.92rem;
    line-height: 1.55;
}
.demo-welcome-paid {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(126, 164, 94, 0.13);
    color: var(--mint-deep);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.demo-welcome-hi {
    font-weight: 700;
    font-size: 1.06rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}
/* Points at the «Доступна» badges in the chapter list — quieter than the copy
   above it, but still body-contrast: it carries a real instruction. */
.demo-welcome p.demo-welcome-hint {
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0 0 12px;
}
.demo-welcome p.demo-welcome-cta-note {
    color: var(--text-dark);
    font-weight: 600;
    margin: 0 0 10px;
}
.demo-welcome-foot {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    justify-content: space-between;
    color: var(--text-light);
    font-size: 0.82rem;
}
.demo-welcome-refund {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* The «open full access» confirmation — the point of no return for the refund
   window, so it has to be legible in both themes (it used to be a #fff card
   with a themed <h3>: invisible heading on dark). */
.waive-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.waive-modal-card {
    background: var(--bg-white);
    color: var(--text-dark);
    border-radius: var(--radius-lg);
    max-width: 540px;
    width: 100%;
    padding: 28px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.waive-modal-card h3 {
    margin: 0 0 14px;
    color: var(--text-dark);
}
.waive-modal-text {
    margin: 0 0 22px;
    color: var(--text-mid);
    font-size: 0.98rem;
    line-height: 1.6;
}
.waive-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.waive-modal-fine {
    margin: 18px 0 0;
    color: var(--text-light);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}
.waive-modal-offer {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

[data-theme="dark"] .demo-welcome {
    background: linear-gradient(180deg, #2A2523, #262220);
}
/* --text-light sits at ~2.7:1 on the dark card — too dim for terms the buyer is
   agreeing to. */
[data-theme="dark"] .waive-modal-fine {
    color: var(--text-mid);
}
/* --text-light is near-invisible on the dark card; the refund line has to stay
   findable. */
[data-theme="dark"] .demo-welcome-foot {
    color: var(--text-mid);
}

/* Refund-demo: marks the handful of chapters that ARE open, so the one buried
   inside «Дополнительные темы» is findable. Same pill as the banner's «Оплата
   прошла» chip, so the two read as one "this is yours" signal. Also rendered
   inline inside the banner's hint text. */
.lesson-open-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mint-deep, #4A7330);
    background: rgba(126, 164, 94, 0.13);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* A completed row is already washed mint (0.08) — lift the pill off it. */
.lesson-item.completed .lesson-open-label {
    background: var(--bg-white);
}

/* =========== UPSELL / PAYWALL BANNER =========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.upsell-banner {
    max-width: 420px;
    margin: 40px auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.35s ease;
}
.upsell-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}
.upsell-banner h3 {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--coral);
    margin-bottom: 8px;
}
.upsell-banner > p {
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.upsell-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.upsell-old-price {
    text-decoration: line-through;
    color: var(--text-light);
    font-size: 1rem;
}
.upsell-new-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--coral);
    white-space: nowrap;
}
.upsell-promo {
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: var(--text-mid);
}
.promo-code-badge {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    color: var(--coral-dark);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
}
.upsell-btn {
    text-decoration: none;
    text-transform: none;
    font-size: 1.05rem;
    letter-spacing: 0;
    margin-bottom: 12px;
}
.upsell-note {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 4px;
}
/* Inline variant (appended at end of lesson content — Task 6) */
.upsell-banner-inline {
    margin-top: 40px;
}
/* Refund-demo CTA banners — wider than the preview upsell so the copy breathes. */
.upsell-banner.demo-cta {
    max-width: 560px;
    padding: 32px 36px;
}

/* Dark theme support */
[data-theme="dark"] .upsell-banner {
    background: #1C1917;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .promo-code-badge {
    background: linear-gradient(135deg, #332420, #3D2A25);
}
[data-theme="dark"] .lesson-item.locked:hover {
    background: rgba(217, 136, 128, 0.15);
}

/* =========== LOCKED MEDIA (tier_base: audio/pdf gated) =========== */
.media-locked {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-white);
    border: 1.5px dashed rgba(217, 136, 128, 0.4);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
}
.media-locked-icon {
    position: relative;
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
    filter: grayscale(0.3);
}
.media-locked-badge {
    position: absolute;
    right: -8px;
    bottom: -6px;
    font-size: 0.85rem;
}
.media-locked-body { flex: 1; min-width: 0; }
.media-locked-title {
    font-weight: 700;
    color: var(--text-mid);
    font-size: 0.98rem;
    margin-bottom: 2px;
}
.media-locked-text {
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.4;
}
.media-locked-cta {
    flex-shrink: 0;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(135deg, #fff0ee, #fce4e0);
    border: 1.5px solid rgba(217, 136, 128, 0.35);
    color: var(--coral-dark);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 16px;
    border-radius: 24px;
    transition: background 0.2s, transform 0.15s;
}
.media-locked-cta:hover {
    background: linear-gradient(135deg, #fce4e0, #f9d0cc);
    transform: translateY(-1px);
}
[data-theme="dark"] .media-locked {
    background: #1C1917;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .media-locked-cta {
    background: linear-gradient(135deg, #332420, #3D2A25);
}

/* =========== SUBSCRIBE SCREEN =========== */
.subscribe-content {
    padding: 20px 16px 60px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

.subscribe-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.subscribe-card-warn {
    border: 2px solid #f39c12;
}

.subscribe-status-icon {
    font-size: 2.8rem;
    line-height: 1;
    animation: heartbeat 3s infinite;
}

.subscribe-title {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--coral);
    margin: 0;
}

.subscribe-detail {
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.subscribe-access {
    background: var(--coral-light);
    color: var(--coral-dark);
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.subscribe-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.subscribe-pay-btn {
    width: 100%;
    font-size: 0.95rem;
    padding: 14px 20px;
    text-decoration: none;
    white-space: nowrap;
}

.subscribe-pay-btn-intl {
    background: var(--gray-bg);
    color: var(--text-dark);
    border: 2px solid var(--gray-border);
}
.subscribe-pay-btn-intl:hover {
    background: var(--gray-border);
}

.subscribe-cancel-btn {
    width: 100%;
    background: transparent;
    color: #c0392b;
    border: 2px solid #e74c3c;
    font-size: 0.9rem;
    padding: 12px 20px;
    margin-top: 4px;
}
.subscribe-cancel-btn:hover {
    background: #fdf0ef;
}
.subscribe-cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.subscribe-hint {
    color: var(--text-light);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
}

.subscribe-oferta {
    color: var(--text-light);
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.5;
}
.subscribe-oferta a {
    color: var(--coral);
    text-decoration: underline;
}

/* Dark theme */
[data-theme="dark"] .subscribe-card {
    background: #2A2522;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
[data-theme="dark"] .subscribe-access {
    background: rgba(217, 136, 128, 0.15);
    color: var(--coral-light);
}
[data-theme="dark"] .subscribe-pay-btn-intl {
    background: #2A2522;
    color: var(--text-light);
    border-color: #444;
}
[data-theme="dark"] .subscribe-cancel-btn {
    color: #e74c3c;
    border-color: #8B2020;
}
[data-theme="dark"] .subscribe-cancel-btn:hover {
    background: rgba(231, 76, 60, 0.1);
}

/* =========================================================
   DARK THEME — Additional fixes (2025-04)
   ========================================================= */

/* 1. Plus / Minus PNG icons (black on transparent background).
      In dark mode invert them so they appear white/light.    */
[data-theme="dark"] img[src*="minus.webp"],
[data-theme="dark"] img[src*="plus.webp"] {
    filter: invert(1) brightness(1.1);
}

/* 2. Planner promo cards that use a hardcoded warm-white gradient */
[data-theme="dark"] .dl-template-card[style*="linear-gradient"] {
    background: linear-gradient(135deg, #2A2620, #302C22) !important;
    border-color: rgba(250, 201, 93, 0.3) !important;
}

/* 3. RSD / ЧЧО quiz modals (id="rsd-test1-modal", "rsd-test2-modal", etc.)
      These end in "-modal" (not "-test-modal"), so existing CSS misses them. */

/* Scrollable quiz body */
[data-theme="dark"] [id$="-modal"] > div > div[style*="background:white"],
[data-theme="dark"] [id$="-modal"] > div > div[style*="background: white"] {
    background: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

/* Question text */
[data-theme="dark"] [id$="-modal"] [data-q] p {
    color: var(--text-dark) !important;
}
[data-theme="dark"] [id$="-modal"] [data-q] strong {
    color: var(--text-dark) !important;
}

/* Dividers between questions */
[data-theme="dark"] [id$="-modal"] [data-q] {
    border-bottom-color: var(--gray-border) !important;
}

/* Answer buttons — dark-mode defaults for unselected state.
   NO !important on background/color — JS onclick sets inline
   background:#ec8384 / color:white on the selected button,
   and those must win. Only border-color needs !important to
   beat the hardcoded inline border:2px solid #e8ddd7.         */
[data-theme="dark"] [id$="-modal"] label > div {
    background: var(--bg-cream);
    border-color: var(--gray-border) !important;
    color: var(--text-dark);
}

/* Result box — override the light gradient background.
   Don't override text colors: the JS-generated green/orange/red
   level indicators carry semantic meaning and read fine on dark. */
[data-theme="dark"] [id$="-modal"] [id$="-result"] > div {
    background: linear-gradient(135deg, var(--bg-cream), var(--bg-white)) !important;
}

/* Unanswered question highlight */
[data-theme="dark"] [id$="-modal"] [data-q][style*="background: rgb(255, 245, 245)"],
[data-theme="dark"] [id$="-modal"] [data-q][style*="background:#fff5f5"] {
    background: rgba(236, 131, 132, 0.15) !important;
}


/* ============ PLANNER GALLERY GLOBALS ============ */
/* ── Planner Gallery ── */
  .planner-gallery {
    margin: 32px 0 24px;
  }
  .planner-gallery-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-hand, 'Caveat', cursive);
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--text-dark);
  }
  .planner-gallery-title img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .planner-gallery-viewport {
    position: relative;
  }
  .planner-gallery-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    padding: 8px 4px 20px;
    scrollbar-width: none;
  }
  .planner-gallery-scroll::-webkit-scrollbar {
    display: none;
  }
  .planner-gallery-card {
    flex: 0 0 72%;
    max-width: 340px;
    scroll-snap-align: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    background: var(--bg-white);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .planner-gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  }
  .planner-gallery-card img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
  }
  .planner-gallery-card:first-child {
    margin-left: auto;
  }
  .planner-gallery-card:last-child {
    margin-right: auto;
  }

  /* ── Arrow buttons (inline gallery) ── */
  .planner-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bg-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-dark);
    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
    opacity: 0.9;
  }
  .planner-gallery-arrow:hover {
    background: #fac95d;
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    opacity: 1;
  }
  .planner-gallery-arrow.arrow-left { left: -6px; }
  .planner-gallery-arrow.arrow-right { right: -6px; }
  .planner-gallery-arrow.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Dot indicators ── */
  .planner-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }
  .planner-gallery-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-light, #ccc);
    opacity: 0.4;
    transition: opacity 0.3s, transform 0.3s;
    cursor: pointer;
  }
  .planner-gallery-dots .dot.active {
    opacity: 1;
    transform: scale(1.3);
    background: #fac95d;
  }

  /* ── Hint text ── */
  .planner-gallery-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-light, #999);
    margin-top: 8px;
    opacity: 0.7;
  }

  /* ── Download link section ── */
  .planner-download-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bg-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: var(--text-dark);
  }
  .planner-download-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.14);
  }
  .planner-download-link img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 0;
  }
  .planner-download-link span {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
  }

  /* ── Fullscreen lightbox with navigation ── */
  .planner-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .planner-lightbox.open {
    display: flex;
  }
  .planner-lightbox img {
    max-width: 94vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    transform: scale(0.92);
    transition: transform 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
  }
  .planner-lightbox.open img {
    transform: scale(1);
  }
  .planner-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
  }
  .planner-lightbox-arrow:hover {
    background: rgba(250,201,93,0.5);
  }
  .planner-lightbox-arrow.lb-left { left: 16px; }
  .planner-lightbox-arrow.lb-right { right: 16px; }
  .planner-lightbox-arrow.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .planner-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    font-weight: 500;
    pointer-events: none;
  }
  .planner-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
  }
  .planner-lightbox-close:hover {
    background: rgba(255,255,255,0.25);
  }

  /* ── Zoom button in lightbox ── */
  .planner-lightbox-zoom {
    position: absolute;
    top: 16px;
    right: 68px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
  }
  .planner-lightbox-zoom:hover {
    background: rgba(250,201,93,0.5);
  }

  /* ── Image wrapper for zoom/scroll ── */
  .planner-lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 94vw;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 8px;
  }
  .planner-lightbox-img-wrap.zoomed {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: grab;
    max-width: 95vw;
    max-height: 92vh;
    border-radius: 0;
  }
  .planner-lightbox-img-wrap.zoomed img {
    max-width: none;
    max-height: none;
    width: 240%;
    cursor: grab;
    transform: scale(1);
    transition: none;
    border-radius: 4px;
  }

  /* ── Dark theme ── */
  [data-theme="dark"] .planner-gallery-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  }
  [data-theme="dark"] .planner-gallery-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  [data-theme="dark"] .planner-gallery-arrow {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  }
  [data-theme="dark"] .planner-download-link {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }

  /* ── Responsive ── */
  @media (min-width: 600px) {
    .planner-gallery-card {
      flex: 0 0 48%;
      max-width: 380px;
    }
  }
  @media (min-width: 900px) {
    .planner-gallery-card {
      flex: 0 0 35%;
      max-width: 400px;
    }
  }
  @media (hover: none) and (pointer: coarse) {
    .planner-gallery-arrow { display: none; }
  }

/* ============ PLANNER BONUS BLOCK + MICROSTEP ACCORDION ============ */
.bonus-block { margin: 32px 0; }
.bonus-block-title {
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 1.6rem;
  margin: 0 0 16px;
  color: var(--text-dark);
}
.bonus-section-subtitle {
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 1.35rem;
  margin: 24px 0 12px;
  color: var(--text-dark);
}
.bonus-hint-box {
  background: rgba(250,201,93,0.10);
  border-left: 3px solid #fac95d;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 20px;
  color: var(--text-dark);
}
.bonus-hint-label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--text-dark);
}
.bonus-hint-box ul { margin: 0; padding-left: 20px; }
.bonus-hint-box li { font-size: 0.9rem; line-height: 1.5; color: var(--text-dark); }

.prokrast-table-wrap { overflow-x: auto; margin: 12px 0 6px; }
.prokrast-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.88rem;
}
.prokrast-table th,
.prokrast-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-border);
  color: var(--text-dark);
}
.prokrast-table thead tr { background: rgba(250,201,93,0.18); }
.prokrast-table th { font-weight: 700; }
.table-hint {
  font-size: 0.75rem;
  color: var(--text-dark);
  opacity: 0.6;
  text-align: center;
  margin: 4px 0 24px;
}

/* Микрошаги — аккордеон */
.microstep-details {
  margin: 0 0 8px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--gray-border);
  box-shadow: 0 1px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}
.microstep-details:hover { box-shadow: 0 3px 14px rgba(0,0,0,0.1); }
.microstep-details[open] { box-shadow: 0 3px 16px rgba(0,0,0,0.1); }
.microstep-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s;
  color: var(--text-dark);
}
.microstep-summary::-webkit-details-marker { display: none; }
.microstep-summary::marker { display: none; }
.microstep-summary:hover { background: rgba(250,201,93,0.08); }
.microstep-details[open] > .microstep-summary { border-bottom: 1px solid var(--gray-border); }
.microstep-summary-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.microstep-summary-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
}
.microstep-summary-chevron {
  color: #fac95d;
  font-size: 0.8rem;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.microstep-details[open] > .microstep-summary .microstep-summary-chevron { transform: rotate(180deg); }

.microstep-body { padding: 6px 16px 14px; }
.microstep-list { list-style: none; padding: 0; margin: 0; }
.microstep-list li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dark);
  border-bottom: 1px solid var(--gray-border);
}
.microstep-list li:last-child { border-bottom: none; }
.microstep-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid #fac95d;
  background: transparent;
}
.microstep-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(250,201,93,0.10);
  font-size: 0.85rem;
  color: var(--text-dark);
  opacity: 0.85;
  font-style: italic;
  line-height: 1.55;
}
.microstep-sublist { list-style: none; padding: 2px 0 0 0; margin: 4px 0 0; }
.microstep-sublist li {
  padding: 2px 0 2px 16px;
  font-size: 0.88rem;
  border: none;
  color: var(--text-dark);
  opacity: 0.85;
}
.microstep-sublist li::before { display: none; }

[data-theme="dark"] .prokrast-table thead tr { background: rgba(250,201,93,0.22); }
[data-theme="dark"] .bonus-hint-box { background: rgba(250,201,93,0.06); }
[data-theme="dark"] .microstep-note { background: rgba(250,201,93,0.06); }
[data-theme="dark"] .microstep-summary:hover { background: rgba(250,201,93,0.05); }

/* ============ ROW CARD ============ */
/* One shape for the things a buyer *gets* rather than reads: the PDF download
   and the buyers' chats. Anything with that job uses this row, so the guide's
   header reads as one list of possessions instead of a link, a card and a
   banner.

   Не карточки, а строки одной плиты. Цветной прямоугольник во всю ширину с
   тенью — это форма уведомления, и блок читался как тревожное сообщение, чем
   бы мы его ни заливали: правки оттенка внутри этой формы ощущение не снимали.
   Здесь плита нейтральная и одна на всех, цвет остался только в подписи
   действия и в подсветке строки под курсором. Побочная выгода — масштаб:
   третья и четвёртая строка не превращают экран в стену плашек.

   Colour comes from --coral(-ink|-wash), which body.course-planner already
   re-points at the planner's yellow — so the row is guide-coral in the guide
   and planner-yellow in the planner without a single per-course branch. */
/* Не коробка, а линованный список. Текст главы лежит прямо на кремовом фоне,
   без карточки, — поэтому белая плита с рамкой и радиусом читалась как чужой
   объект, вставленный в страницу. Осталась разлиновка: волосяная линия сверху,
   снизу и между строками. */
.row-plate {
    border-top: 1px solid var(--gray-border);
    border-bottom: 1px solid var(--gray-border);
}
.row-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* Без боковых отступов: строки идут по той же вертикали, что и текст. */
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--gray-border);
    background: transparent;
    color: var(--text-dark);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
}
/* Разделитель — на каждой строке, кроме первой. Второй селектор для строк,
   приезжающих внутри слота (чат подставляется в свою обёртку). */
.row-plate > .row-card:first-child,
.row-plate > :first-child > .row-card:first-child { border-top: 0; }

/* Подсветка ровно по колонке текста: вылези она за неё — разъехалась бы с
   разлиновкой, которая идёт по той же вертикали. */
.row-card--action { cursor: pointer; transition: background 0.15s; }
.row-card--action:hover { background: var(--coral-wash); }
.row-card--action:active { background: var(--coral-light); }
.row-card--action:focus-visible {
    outline: 2px solid var(--coral-dark);
    outline-offset: -2px;
}
.row-card[disabled] { cursor: progress; opacity: 0.75; }
/* Инертная строка (статус, а не действие) — просто без ховера. */
.row-card--muted { cursor: default; }

/* Демо: строка на месте, но брать нечего. Приглушаем, а не прячем — покупатель
   должен видеть, что именно откроется. Ссылки в разметке нет вообще, а отказ
   даёт сервер (см. mountGuideGifts). */
.row-card--locked { cursor: default; }
.row-card--locked .row-card-icon { opacity: 0.45; filter: grayscale(1); }
.row-card--locked .row-card-name,
.row-card--locked .row-card-desc { color: var(--text-light); }
.row-card-lock { flex-shrink: 0; font-size: 1rem; line-height: 1; opacity: 0.6; }
.row-card-locked-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-light);
}

.row-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.row-card-icon img { width: 28px; height: 28px; object-fit: contain; }

/* Плита плюс то, что живёт под ней: микро-ссылка на зеркало, карточка
   апселла, если PDF заперт. */
.row-card-stack { display: grid; gap: 10px; margin-bottom: 20px; }

.row-card-body { flex: 1; min-width: 0; display: block; }
/* Названия набраны легче, чем заголовки главы: это подпись к строке, а не
   заголовок раздела — иначе блок спорит с текстом, среди которого стоит. */
.row-card-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 1px;
}
.row-card-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--text-mid);
    line-height: 1.35;
}
/* Не кнопка, а подпись действия: нажимается вся строка. Залитая пилюля здесь
   читалась как «опасное действие» — сплошное красноватое пятно; и она же
   дублировала .btn-primary, за которым закреплены настоящие первичные кнопки
   («Купить»). --coral-ink вместо --coral: акцент как заливка даёт текстом
   ~3.5:1, ниже AA. Стрелка — псевдоэлементом: JS переписывает textContent
   пилюли («Открыть ещё раз»), вложенный span она бы стёрла. */
.row-card-action {
    flex-shrink: 0;
    color: var(--coral-ink);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.row-card-action::after {
    content: '→';
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s;
}
.row-card--action:hover .row-card-action::after { transform: translateX(3px); }

/* Same dashed micro-link as the mirror links in the download lesson. */
.row-card-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.74rem;
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    line-height: 1.2;
}
.row-card-link:hover { color: var(--coral-ink); }
/* Зеркало живёт под плитой, а не в строке: внутри оно ломало ритм строк.
   Отступ снаружи задаёт gap самой пачки — свой margin тут удваивался бы. */
.row-card-stack > .row-card-link { justify-self: start; margin-top: 0; }
.row-card-stack > .chat-note { margin-top: 0; }

.chat-note {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: rgba(231, 76, 60, 0.08);
    color: #c0392b;
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Guidance, not failure — the linking step is expected, not an error. */
.chat-note--info {
    background: var(--coral-wash);
    color: var(--text-mid);
}

/* Тёмной теме плита ничего отдельного не должна: --bg-white, --gray-border,
   --coral-wash и --coral-ink уже перекрыты в её :root. */
[data-theme="dark"] .chat-note--info { background: var(--gray-bg); color: var(--text-mid); }
[data-theme="dark"] .chat-note { background: rgba(231, 76, 60, 0.14); color: #ff8a7a; }

/* Narrow screens: the action drops under the text instead of squeezing it. */
@media (max-width: 420px) {
    .row-card { flex-wrap: wrap; padding: 14px 15px; }
    .row-card-body { flex: 1 1 60%; }
    .row-card-action { margin-left: 54px; margin-top: 4px; }
}