/* ============================================================
   ep_portal.css — стилі порталу користувача (для проходження курсів)
   Відмінність від адмінки: немає sidebar, фокус на читанні контенту,
   центрований max-width 900px, типографіка для довгого тексту.
   ============================================================ */

:root {
    --epp-color-bg: #FAFBFC;
    --epp-color-surface: #FFFFFF;
    --epp-color-border: #E5E7EB;
    --epp-color-border-strong: #D1D5DB;
    --epp-color-text: #1F2937;
    --epp-color-text-muted: #6B7280;
    --epp-color-text-subtle: #9CA3AF;

    /* Бренд-палітра Ібіс */
    --epp-color-primary: #00785F;          /* Зелений Ібіс */
    --epp-color-primary-hover: #0F433B;    /* Вічнозелений */
    --epp-color-primary-tint: #E6F5EF;     /* світлий зелений tint */
    --epp-color-primary-text: #0F433B;

    --epp-color-accent: #FF612F;           /* Вогняний — логотип */
    --epp-color-accent-hover: #E04C1A;
    --epp-color-accent-tint: #FFEAE0;
    --epp-color-accent-text: #C2400F;

    --epp-color-success: #00AB78;          /* Травʼяний */
    --epp-color-success-bg: #DCF5EA;
    --epp-color-success-text: #006B45;
    --epp-color-warning-bg: #FFEAE0;
    --epp-color-warning-text: #C2400F;
    --epp-color-danger: #DC2626;
    --epp-color-danger-bg: #FEE2E2;

    --epp-radius-md: 8px;
    --epp-radius-lg: 12px;
    --epp-radius-xl: 16px;
    --epp-radius-pill: 999px;

    --epp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --epp-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.06);
    --epp-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);

    --epp-font: 'Ruberoid', -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    --epp-font-reading: 'Ruberoid', Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--epp-font);
    color: var(--epp-color-text);
    background: var(--epp-color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--epp-color-primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; }

/* ============================================================
   Impersonation banner (видно лише адміну в режимі "як користувач")
   ============================================================ */
.epp-impersonate-banner {
    background: linear-gradient(90deg, #FF612F, #E04C1A);
    color: #fff;
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 40;
}
.epp-impersonate-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.epp-impersonate-banner__inner svg { flex-shrink: 0; }
.epp-impersonate-banner__exit {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}
.epp-impersonate-banner__exit:hover { background: rgba(255, 255, 255, 0.3); }

/* ============================================================
   Top navbar (мінімальна, повна ширина)
   ============================================================ */
.epp-nav {
    background: var(--epp-color-surface);
    border-bottom: 1px solid var(--epp-color-border);
    position: sticky;
    top: 0;
    z-index: 30;
}
.epp-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.epp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--epp-color-text);
    font-weight: 700;
    font-size: 16px;
}
.epp-brand:hover { text-decoration: none; }
.epp-brand__logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--epp-color-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.epp-brand__logo--img {
    background: transparent;
    padding: 2px;
}
.epp-brand__logo--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.epp-nav__spacer { flex: 1; }
.epp-nav__link {
    color: var(--epp-color-text-muted);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
.epp-nav__link:hover { background: var(--epp-color-bg); color: var(--epp-color-text); text-decoration: none; }
.epp-nav__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--epp-color-bg);
    font-size: 14px;
}
.epp-nav__user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--epp-color-primary-tint);
    color: var(--epp-color-primary-text);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
}

/* ============================================================
   Page container
   ============================================================ */
.epp-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.epp-container--narrow { max-width: 820px; }

/* ============================================================
   Hero (на головній порталу + програма)
   ============================================================ */
.epp-hero {
    background: linear-gradient(135deg, #00AB78 0%, #00785F 50%, #0F433B 100%);
    color: #fff;
    border-radius: var(--epp-radius-xl);
    padding: 40px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.epp-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}
.epp-hero__eyebrow {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}
.epp-hero__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.epp-hero__desc {
    font-size: 17px;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
.epp-hero__stats {
    display: flex;
    gap: 24px;
    font-size: 14px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}
.epp-hero__stat strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 2px;
}

/* ============================================================
   Program card (на головній)
   ============================================================ */
.epp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.epp-program-card {
    background: var(--epp-color-surface);
    border: 1px solid var(--epp-color-border);
    border-radius: var(--epp-radius-lg);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    color: var(--epp-color-text);
    display: flex;
    flex-direction: column;
}
.epp-program-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--epp-shadow-md);
    border-color: var(--epp-color-primary);
}
.epp-program-card__cover {
    height: 120px;
    background: linear-gradient(135deg, var(--epp-color-primary-tint), #fff);
    display: grid;
    place-items: center;
    color: var(--epp-color-primary);
}
.epp-program-card:hover .epp-program-card__cover {
    background: linear-gradient(135deg, var(--epp-color-accent-tint), #fff);
    color: var(--epp-color-accent-text);
}
.epp-program-card__cover svg { width: 48px; height: 48px; opacity: 0.6; }
.epp-program-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.epp-program-card__direction {
    display: inline-block;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--epp-color-primary-tint);
    color: var(--epp-color-primary-text);
    font-weight: 500;
    align-self: flex-start;
}
.epp-program-card__title {
    font-size: 18px;
    font-weight: 600;
    margin: 4px 0 0;
    color: var(--epp-color-text);
}
.epp-program-card__desc {
    color: var(--epp-color-text-muted);
    font-size: 14px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.epp-program-card__footer {
    margin-top: auto;
    padding-top: 12px;
    color: var(--epp-color-text-muted);
    font-size: 13px;
    display: flex;
    gap: 12px;
}

/* ============================================================
   Parts timeline (на сторінці програми — список секцій з нумерацією)
   ============================================================ */
.epp-timeline {
    background: var(--epp-color-surface);
    border: 1px solid var(--epp-color-border);
    border-radius: var(--epp-radius-lg);
    padding: 8px;
}
.epp-timeline__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--epp-radius-md);
    color: var(--epp-color-text);
    position: relative;
    transition: background 0.1s;
}
.epp-timeline__item + .epp-timeline__item {
    border-top: 1px solid var(--epp-color-border);
}
.epp-timeline__item:hover { background: var(--epp-color-bg); text-decoration: none; }

.epp-timeline__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--epp-color-primary-tint);
    color: var(--epp-color-primary-text);
    flex-shrink: 0;
}
.epp-timeline__item--done .epp-timeline__num {
    background: var(--epp-color-success-bg);
    color: var(--epp-color-success-text);
}

.epp-timeline__body { flex: 1; min-width: 0; }
.epp-timeline__name {
    font-weight: 500;
    margin-bottom: 2px;
    color: var(--epp-color-text);
}
.epp-timeline__meta {
    color: var(--epp-color-text-muted);
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.epp-timeline__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--epp-color-bg);
    color: var(--epp-color-text-muted);
    border: 1px solid var(--epp-color-border);
}
.epp-timeline__chip--video { background: var(--epp-color-accent-tint); color: var(--epp-color-accent-text); border-color: transparent; }
.epp-timeline__chip--test  { background: var(--epp-color-success-bg); color: var(--epp-color-success-text); border-color: transparent; }
.epp-timeline__chip svg { width: 11px; height: 11px; }

.epp-timeline__arrow {
    color: var(--epp-color-text-subtle);
    font-size: 18px;
}
.epp-timeline__item:hover .epp-timeline__arrow { color: var(--epp-color-primary); }

/* Locked / Done states */
.epp-timeline__item--done .epp-timeline__num {
    background: var(--epp-color-success-bg);
    color: var(--epp-color-success-text);
    font-size: 18px;
}
.epp-timeline__item--done .epp-timeline__name {
    color: var(--epp-color-text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.2);
}
.epp-timeline__item--locked {
    opacity: 0.6;
    cursor: not-allowed;
}
.epp-timeline__item--locked:hover { background: transparent; }
.epp-timeline__item--locked .epp-timeline__num {
    background: var(--epp-color-bg);
    color: var(--epp-color-text-subtle);
    border: 2px dashed var(--epp-color-border);
    font-size: 14px;
}
.epp-timeline__item--locked .epp-timeline__arrow { display: none; }

/* ============================================================
   Part page — детальний перегляд секції
   ============================================================ */
.epp-breadcrumb {
    font-size: 14px;
    color: var(--epp-color-text-muted);
    margin-bottom: 16px;
}
.epp-breadcrumb a { color: var(--epp-color-text-muted); }
.epp-breadcrumb__sep { margin: 0 8px; color: var(--epp-color-text-subtle); }

.epp-part-hero {
    margin-bottom: 24px;
}
.epp-part-hero__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
}
.epp-part-hero__desc {
    color: var(--epp-color-text-muted);
    font-size: 16px;
    margin: 0;
    max-width: 720px;
}

/* Video block — full-width above content */
.epp-video-block {
    background: #000;
    border-radius: var(--epp-radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
}
.epp-video-block video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 70vh;
}

/* ============================================================
   Кастомний плеєр (без перемотування вперед, з аналітикою)
   ============================================================ */
.ep-player {
    position: relative;
    background: #000;
    border-radius: var(--epp-radius-lg);
    overflow: hidden;
    user-select: none;
}
.ep-player__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.ep-player__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.ep-player__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1;
}
.ep-player.is-playing .ep-player__overlay { opacity: 0; }
.ep-player.is-loading .ep-player__overlay::after {
    content: 'Завантаження...';
    font-size: 16px;
}
.ep-player__bigplay {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 97, 47, 0.95);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s;
}
.ep-player__bigplay:hover { transform: scale(1.06); }
.ep-player__bigplay svg { width: 32px; height: 32px; }
.ep-player.is-playing .ep-player__bigplay { display: none; }
.ep-player.is-loading .ep-player__bigplay { display: none; }

/* Watermark при першому показі: інформаційна плашка про правила */
.ep-player__rule-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.ep-player.is-playing .ep-player__rule-badge { opacity: 1; }

/* Контролі знизу */
.ep-player__controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 18px 14px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s;
}
.ep-player.is-playing.is-idle .ep-player__controls { opacity: 0; }
.ep-player:hover .ep-player__controls { opacity: 1; }

.ep-player__btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s;
}
.ep-player__btn:hover { background: rgba(255, 255, 255, 0.2); }
.ep-player__btn svg { width: 16px; height: 16px; }

/* Часова шкала */
.ep-player__timeline {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    overflow: visible;
}
.ep-player__track-watched {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: rgba(255, 97, 47, 0.35);
    border-radius: 999px;
    pointer-events: none;
}
.ep-player__track-current {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: #FF612F;
    border-radius: 999px;
    pointer-events: none;
}
.ep-player__thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    pointer-events: none;
}
.ep-player__track-locked {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 4px,
        rgba(255,255,255,0.15) 4px,
        rgba(255,255,255,0.15) 8px
    );
    border-radius: 0 999px 999px 0;
    pointer-events: none;
}

.ep-player__time {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.95);
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
}

/* "Просмотрено повністю" бейдж */
.ep-player__seen-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 171, 120, 0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 999px;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 4px;
}
.ep-player__seen-badge svg { width: 12px; height: 12px; }
.ep-player.is-saw .ep-player__seen-badge { display: inline-flex; }

/* Flash при спробі перемотати вперед */
.ep-player__flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 97, 47, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.ep-player.is-blocked .ep-player__flash { opacity: 1; }

/* ============================================================
   Test taking + locked test block
   ============================================================ */
.epp-test-block--locked {
    background: var(--epp-color-warning-bg);
    color: var(--epp-color-warning-text);
}
.epp-test-block--locked .epp-test-block__icon {
    background: rgba(255, 97, 47, 0.2);
    color: var(--epp-color-warning-text);
}
.epp-test-block--locked .epp-test-block__title,
.epp-test-block--locked .epp-test-block__desc { color: var(--epp-color-warning-text); }
.epp-test-block__hint {
    font-size: 13px;
    margin: 6px 0 0;
    opacity: 0.95;
}

/* Test taking form */
.epp-test-hero {
    background: var(--epp-color-surface);
    border: 1px solid var(--epp-color-border);
    border-radius: var(--epp-radius-lg);
    padding: 28px;
    margin-bottom: 24px;
}
.epp-test-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; }
.epp-test-hero__desc { color: var(--epp-color-text-muted); margin: 0 0 16px; }
.epp-test-hero__meta {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 14px;
}
.epp-test-hero__meta .chip {
    background: var(--epp-color-primary-tint);
    color: var(--epp-color-primary-text);
    padding: 4px 10px; border-radius: 999px;
    font-weight: 500;
}

.epp-question {
    background: var(--epp-color-surface);
    border: 1px solid var(--epp-color-border);
    border-radius: var(--epp-radius-lg);
    padding: 20px 24px;
    margin-bottom: 12px;
}
.epp-question__header {
    display: flex; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.epp-question__num {
    color: var(--epp-color-text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.epp-question__points {
    color: var(--epp-color-primary-text);
    font-size: 13px;
    font-weight: 500;
    background: var(--epp-color-primary-tint);
    padding: 2px 10px;
    border-radius: 999px;
}
.epp-question__text {
    font-size: 17px;
    margin: 0 0 16px;
    line-height: 1.45;
}
.epp-question__images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
}
.epp-question__image {
    margin: 0;
    flex: 0 1 auto;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.epp-question__image img {
    max-width: 100%;
    max-height: 280px;
    border-radius: 8px;
    border: 1px solid var(--epp-color-border);
    background: var(--epp-color-bg);
    object-fit: contain;
    display: block;
}
.epp-question__image figcaption {
    font-size: 13px;
    color: var(--epp-color-text-muted);
    text-align: center;
    line-height: 1.3;
}
.epp-question__videos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 16px;
}
.epp-question__video {
    margin: 0;
    flex: 1 1 480px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.epp-question__video video {
    width: 100%;
    max-height: 420px;
    background: #000;
    border-radius: 8px;
    border: 1px solid var(--epp-color-border);
    display: block;
}
.epp-question__video figcaption {
    font-size: 13px;
    color: var(--epp-color-text-muted);
    text-align: center;
    line-height: 1.3;
}
.epp-option {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--epp-color-border);
    border-radius: var(--epp-radius-md);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}
.epp-option:hover { border-color: var(--epp-color-primary); background: var(--epp-color-primary-tint); }
.epp-option input { margin: 0; flex-shrink: 0; accent-color: var(--epp-color-primary); }
.epp-option input:checked + span { font-weight: 500; }
.epp-option input:checked ~ * { color: var(--epp-color-primary-text); }
.epp-option:has(input:checked) {
    border-color: var(--epp-color-primary);
    background: var(--epp-color-primary-tint);
}

.epp-test-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--epp-color-border);
}

/* Result page */
.epp-result-hero {
    background: linear-gradient(135deg, var(--epp-color-success), #00CB89);
    color: #fff;
    border-radius: var(--epp-radius-xl);
    padding: 36px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.epp-result-hero--failed {
    background: linear-gradient(135deg, #E55A2B, #FF7A4D);
}
.epp-result-hero__score {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    min-width: 160px;
    text-align: center;
}
.epp-result-hero__body h1 { margin: 0 0 6px; font-size: 28px; }
.epp-result-hero__body p { margin: 0; opacity: 0.95; }

.epp-result-question {
    background: var(--epp-color-surface);
    border-left: 4px solid var(--epp-color-border);
    padding: 16px 20px;
    margin-bottom: 10px;
    border-radius: 0 var(--epp-radius-md) var(--epp-radius-md) 0;
}
.epp-result-question--correct { border-left-color: var(--epp-color-success); background: var(--epp-color-success-bg); }
.epp-result-question--wrong { border-left-color: #E55A2B; background: #FFEAE0; }
.epp-result-question__head {
    display: flex; justify-content: space-between;
    font-size: 13px;
    color: var(--epp-color-text-muted);
    margin-bottom: 6px;
}
.epp-result-question__text { font-weight: 500; margin: 0 0 10px; }
.epp-result-option {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.05);
    margin: 2px 4px 2px 0;
    font-size: 13px;
}
.epp-result-option--selected { background: var(--epp-color-primary-tint); color: var(--epp-color-primary-text); font-weight: 500; }
.epp-result-option--correct { background: var(--epp-color-success-bg); color: var(--epp-color-success-text); font-weight: 500; }
.epp-result-option--miss { background: #FFEAE0; color: #C2400F; font-weight: 500; }

/* Markdown rendered content */
.epp-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--epp-color-text);
}
.epp-content h1, .epp-content h2, .epp-content h3, .epp-content h4 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.epp-content h1 { font-size: 28px; }
.epp-content h2 { font-size: 24px; }
.epp-content h3 { font-size: 20px; }
.epp-content p { margin: 16px 0; }
.epp-content ul, .epp-content ol { padding-left: 28px; margin: 16px 0; }
.epp-content li { margin: 6px 0; }
.epp-content img {
    max-width: 100%;
    border-radius: var(--epp-radius-md);
    margin: 20px 0;
    display: block;
}
.epp-content video {
    max-width: 100%;
    border-radius: var(--epp-radius-md);
    margin: 20px 0;
    display: block;
}
.epp-content blockquote {
    border-left: 4px solid var(--epp-color-primary);
    padding: 4px 18px;
    margin: 20px 0;
    color: var(--epp-color-text-muted);
    background: var(--epp-color-primary-tint);
    border-radius: 0 var(--epp-radius-md) var(--epp-radius-md) 0;
}
.epp-content code {
    background: var(--epp-color-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
    color: var(--epp-color-danger);
}
.epp-content pre {
    background: #1F2937;
    color: #E5E7EB;
    padding: 16px 20px;
    border-radius: var(--epp-radius-md);
    overflow-x: auto;
}
.epp-content pre code { background: transparent; color: inherit; padding: 0; }
.epp-content a { color: var(--epp-color-primary-text); }
.epp-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}
.epp-content th, .epp-content td {
    border: 1px solid var(--epp-color-border);
    padding: 8px 12px;
    text-align: left;
}
.epp-content th { background: var(--epp-color-bg); font-weight: 600; }
.epp-content tbody tr:nth-child(2n) td { background: #FAFAFB; }

/* Очистка плаваючих елементів — щоб заголовки не "заїжджали" на align-left/right */
.epp-content h1, .epp-content h2, .epp-content h3, .epp-content h4, .epp-content hr {
    clear: both;
}

/* Image alignment classes (Phase 3 — синтаксис attr_list: ![alt](url){.align-x width=N}) */
.epp-content img.align-inline { display: inline-block; margin: 0 4px; vertical-align: middle; }
.epp-content img.align-left {
    float: left;
    margin: 8px 24px 12px 0;
    max-width: 50%;
}
.epp-content img.align-right {
    float: right;
    margin: 8px 0 12px 24px;
    max-width: 50%;
}
.epp-content img.align-center {
    display: block;
    margin: 20px auto;
}
.epp-content img.align-full {
    display: block;
    width: 100%;
    max-width: none;
    margin: 20px 0;
}
/* Абсолютне позиціонування — контейнер контенту виступає за позиційний контекст */
.epp-content { position: relative; }
.epp-content img.align-absolute {
    position: absolute;
    margin: 0;
    z-index: 2;
}
/* Якщо style вказав object-fit — гарантуємо, що бра́мка має задані розміри */
.epp-content img[style*="object-fit"] {
    display: block;
    background: #F3F4F6;
}

/* Task lists (markdown extra) */
.epp-content ul li input[type="checkbox"] {
    margin-right: 8px;
    transform: translateY(1px);
}
.epp-content ul.task-list, .epp-content li.task-list-item { list-style: none; }
.epp-content li.task-list-item { padding-left: 0; }

/* Admonitions / callouts (markdown admonition) */
.epp-content .admonition {
    border-left: 4px solid var(--epp-color-primary);
    background: var(--epp-color-primary-tint);
    border-radius: 0 var(--epp-radius-md) var(--epp-radius-md) 0;
    padding: 14px 18px;
    margin: 20px 0;
}
.epp-content .admonition-title {
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--epp-color-primary-text);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.epp-content .admonition.note    { border-left-color: #6B7280; background: #F3F4F6; }
.epp-content .admonition.note .admonition-title    { color: #4B5563; }
.epp-content .admonition.info    { border-left-color: #2563EB; background: #EFF6FF; }
.epp-content .admonition.info .admonition-title    { color: #1D4ED8; }
.epp-content .admonition.tip,
.epp-content .admonition.success { border-left-color: #16A34A; background: #ECFDF5; }
.epp-content .admonition.tip .admonition-title,
.epp-content .admonition.success .admonition-title { color: #15803D; }
.epp-content .admonition.warning { border-left-color: #D97706; background: #FFFBEB; }
.epp-content .admonition.warning .admonition-title { color: #B45309; }
.epp-content .admonition.danger,
.epp-content .admonition.error   { border-left-color: #DC2626; background: #FEF2F2; }
.epp-content .admonition.danger .admonition-title,
.epp-content .admonition.error .admonition-title   { color: #B91C1C; }

/* Code highlight (Pygments via codehilite) */
.epp-content .epp-codehilite {
    background: #1F2937;
    border-radius: var(--epp-radius-md);
    margin: 20px 0;
    overflow: hidden;
}
.epp-content .epp-codehilite pre {
    margin: 0;
    border-radius: 0;
    background: transparent;
}
/* Базові кольори токенів (Pygments) під темну тему */
.epp-content .epp-codehilite .k,  .epp-content .epp-codehilite .kn { color: #C792EA; }     /* keyword */
.epp-content .epp-codehilite .nf, .epp-content .epp-codehilite .nc { color: #82AAFF; }     /* function/class */
.epp-content .epp-codehilite .s,  .epp-content .epp-codehilite .s1,
.epp-content .epp-codehilite .s2                                   { color: #C3E88D; }     /* strings */
.epp-content .epp-codehilite .c,  .epp-content .epp-codehilite .c1 { color: #6B7280; font-style: italic; } /* comments */
.epp-content .epp-codehilite .mi, .epp-content .epp-codehilite .mf { color: #F78C6C; }     /* numbers */
.epp-content .epp-codehilite .o                                    { color: #89DDFF; }     /* operator */

/* Test block (preview / call-to-action) */
.epp-test-block {
    margin-top: 40px;
    padding: 28px;
    background: var(--epp-color-success-bg);
    border-radius: var(--epp-radius-lg);
    display: flex;
    align-items: center;
    gap: 20px;
}
.epp-test-block__icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.2);
    color: var(--epp-color-success-text);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.epp-test-block__icon svg { width: 28px; height: 28px; }
.epp-test-block__body { flex: 1; }
.epp-test-block__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--epp-color-success-text);
    margin: 0 0 4px;
}
.epp-test-block__desc { color: var(--epp-color-success-text); opacity: 0.85; font-size: 14px; margin: 0; }

/* Buttons */
.epp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--epp-radius-md);
    border: 1px solid var(--epp-color-border);
    background: var(--epp-color-surface);
    color: var(--epp-color-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.epp-btn:hover { background: var(--epp-color-bg); text-decoration: none; }
.epp-btn--primary {
    background: var(--epp-color-primary);
    color: #fff;
    border-color: var(--epp-color-primary);
}
.epp-btn--primary:hover { background: var(--epp-color-primary-hover); border-color: var(--epp-color-primary-hover); }
.epp-btn--lg { padding: 14px 28px; font-size: 16px; }

/* Part nav (prev/next at bottom) */
.epp-part-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--epp-color-border);
}
.epp-part-nav__btn {
    flex: 1;
    max-width: 320px;
    padding: 16px 20px;
    border: 1px solid var(--epp-color-border);
    border-radius: var(--epp-radius-lg);
    background: var(--epp-color-surface);
    color: var(--epp-color-text);
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}
.epp-part-nav__btn:hover { border-color: var(--epp-color-primary); text-decoration: none; }
.epp-part-nav__btn--next { text-align: right; }
.epp-part-nav__hint { display: block; font-size: 12px; color: var(--epp-color-text-muted); margin-bottom: 4px; }
.epp-part-nav__name { font-weight: 600; }
.epp-part-nav__btn--disabled { opacity: 0.4; pointer-events: none; }

/* Empty state */
.epp-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--epp-color-text-muted);
}
.epp-empty__title { font-size: 22px; font-weight: 600; color: var(--epp-color-text); margin: 12px 0; }

/* ============================================================
   Dark theme — портал.
   Палітра адаптована з бренд-кольорів Ібіс (бренд-бук не має
   темної версії — це наша інтерпретація).
   Базовий фон — глибокий зелено-чорний (від Вічнозеленого).
   Primary піднято до Травʼяного для контрасту, accent —
   Вогняний з невеликим освітленням.
   ============================================================ */
[data-theme="dark"] {
    --epp-color-bg: #0E1A17;
    --epp-color-surface: #16241F;
    --epp-color-border: #233731;
    --epp-color-border-strong: #324A42;
    --epp-color-text: #E6EDE9;
    --epp-color-text-muted: #9BAAA3;
    --epp-color-text-subtle: #6B7972;

    /* Primary = бренд Зелений Ібіс. На великих заливних блоках (hero,
       кнопки) #00AB78 виходить надто неоновим — тримаємо бренд-тон.
       Для текстових акцентів є окремий primary-text. */
    --epp-color-primary: #00785F;
    --epp-color-primary-hover: #00966F;
    --epp-color-primary-tint: rgba(0, 171, 120, 0.14);
    --epp-color-primary-text: #5FD1AC;

    --epp-color-accent: #FF612F;
    --epp-color-accent-hover: #FF7E55;
    --epp-color-accent-tint: rgba(255, 97, 47, 0.18);
    --epp-color-accent-text: #FF8E68;

    /* Success — приглушуємо: solid-fill теж не повинен сяяти */
    --epp-color-success: #00966F;
    --epp-color-success-bg: rgba(0, 171, 120, 0.14);
    --epp-color-success-text: #5FD1AC;
    --epp-color-warning-bg: rgba(255, 97, 47, 0.16);
    --epp-color-warning-text: #FFA988;
    --epp-color-danger: #F87171;
    --epp-color-danger-bg: rgba(248, 113, 113, 0.16);

    --epp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --epp-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
    --epp-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* Hero (велике зелене панно з прогресом) має hardcoded градієнт — на
   світлій темі це гарний бренд-сплеск, на тёмному надто яскраво. */
[data-theme="dark"] .epp-hero {
    background: linear-gradient(135deg, #0F433B 0%, #0A2C24 60%, #061915 100%);
}
[data-theme="dark"] .epp-hero::after {
    background: rgba(0, 171, 120, 0.08);
}

/* Тест-картка (.epp-test-block) у тёмному — м’який success tint */
[data-theme="dark"] .epp-test-block {
    background: rgba(0, 171, 120, 0.10);
}
[data-theme="dark"] .epp-test-block__icon {
    background: rgba(0, 171, 120, 0.20);
}

/* Cover програма-картки: був світлий градієнт з #fff — на тёмному робимо тонкий */
[data-theme="dark"] .epp-program-card__cover {
    background: linear-gradient(135deg, var(--epp-color-primary-tint), var(--epp-color-surface));
}

/* Inputs / textareas / selects — браузерні дефолти не успадковують */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--epp-color-surface);
    color: var(--epp-color-text);
    border-color: var(--epp-color-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--epp-color-text-subtle);
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--epp-color-surface) inset;
    -webkit-text-fill-color: var(--epp-color-text);
    caret-color: var(--epp-color-text);
}

/* Програма-картка має градієнт-cover у світлій темі — на тёмному вирівнюємо. */
[data-theme="dark"] .epp-program-card__cover {
    background: linear-gradient(135deg, var(--epp-color-primary-tint), var(--epp-color-surface));
}

/* ============================================================
   Theme toggle — портал
   ============================================================ */
.epp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--epp-color-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.epp-theme-toggle:hover {
    background: var(--epp-color-bg);
    color: var(--epp-color-text);
}
.epp-theme-toggle svg { width: 18px; height: 18px; }
.epp-theme-toggle .epp-theme-toggle__icon-dark { display: none; }
[data-theme="dark"] .epp-theme-toggle .epp-theme-toggle__icon-light { display: none; }
[data-theme="dark"] .epp-theme-toggle .epp-theme-toggle__icon-dark { display: block; }

/* ============================================================
   Smart color adaptation в контенті секції (.epp-content)

   Користувачі копіпастять текст з Word/Notion/Google Docs зі своїми
   інлайн-кольорами (typically чорний #000 на білому). На тёмному це
   робить текст невидимим. Без правок в HTML/markdown — CSS filter:
     invert(1) hue-rotate(180deg)
   Перевертає світлість, зберігаючи відтінок. Чорний → білий, білий →
   чорний, темно-червоний → світло-рожевий (читабельно на тёмному).

   Подвійна інверсія для img/video відновлює оригінальні кольори
   медіа всередині кольорових span'ів.
   ============================================================ */
[data-theme="dark"] .epp-content [style*="color"],
[data-theme="dark"] .epp-content font[color] {
    filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .epp-content [style*="color"] img,
[data-theme="dark"] .epp-content [style*="color"] video,
[data-theme="dark"] .epp-content font[color] img,
[data-theme="dark"] .epp-content font[color] video {
    filter: invert(1) hue-rotate(180deg);
}

/* ============================================================
   Фото-карусель (:::carousel у markdown секції)
   Активний слайд — великий, сусідні визирають меншими (peek).
   Клік по фото — лайтбокс зі збільшенням і листанням.
   ============================================================ */
.epp-carousel {
    position: relative;
    margin: 16px 0;
}
.epp-carousel__track {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 10%;
    scrollbar-width: thin;
    scrollbar-color: var(--epp-color-border-strong) transparent;
}
.epp-carousel__slide {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: center;
    max-width: min(78%, 640px);
    transform: scale(0.86);
    opacity: 0.65;
    transition: transform .25s ease, opacity .25s ease;
}
.epp-carousel__slide.is-active {
    transform: scale(1);
    opacity: 1;
}
.epp-carousel__slide img {
    display: block;
    height: 340px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--epp-color-border);
    user-select: none;
    cursor: zoom-in;
}
.epp-carousel__caption {
    margin-top: 6px;
    font-size: 12px;
    color: var(--epp-color-text-muted);
    text-align: center;
}
.epp-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--epp-color-border);
    background: color-mix(in srgb, var(--epp-color-surface) 88%, transparent);
    color: var(--epp-color-text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity .15s ease, background .15s ease;
}
.epp-carousel__nav:hover { background: var(--epp-color-surface); }
.epp-carousel__nav--prev { left: 8px; }
.epp-carousel__nav--next { right: 8px; }
.epp-carousel__nav[data-hidden] { opacity: 0; pointer-events: none; }
.epp-carousel__counter {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
    pointer-events: none;
}
@media (max-width: 640px) {
    .epp-carousel__slide img { height: 230px; }
    .epp-carousel__track { padding: 8px 6%; }
}
[data-theme="dark"] .epp-carousel__nav {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------- Лайтбокс: збільшення фото + листання ---------- */
.epp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 13, 0.92);
}
.epp-lightbox[hidden] { display: none; }
.epp-lightbox__img {
    max-width: min(92vw, 1400px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    user-select: none;
}
.epp-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.epp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.epp-lightbox__nav--prev { left: 18px; }
.epp-lightbox__nav--next { right: 18px; }
.epp-lightbox__close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.epp-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.epp-lightbox__bar {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80vw;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.7);
    color: #E5E7EB;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ширший контейнер для сторінок тесту */
.epp-container--wide { max-width: 1100px; }