/* ── English Level Tester — Styles ── */

/* Тонкий липкий бар тесту (blank-сторінка): бренд + «Вийти з тесту» */
.eld-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e6e8ec;
}
.eld-topbar__brand {
    font-weight: 700;
    color: #6b7280;
    text-decoration: none;
    letter-spacing: .02em;
}
.eld-topbar__logo {
    height: 30px;
    width: auto;
    display: block;
}
.eld-topbar__exit {
    font-size: 14px;
    line-height: 1;
    color: #6b7280;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: background .15s, color .15s, border-color .15s;
}
.eld-topbar__exit:hover {
    background: #f9eaea;
    color: #ef4444;
    border-color: #ef4444;
}
/* Зсув під WP admin bar — лише для залогінених адмінів. На десктопі адмін-бар
   фіксований (32px); на мобільному (≤782px) він absolute і скролиться геть,
   тож там топбар лишаємо у top:0 (інакше зайвий зазор). Звичайні юзери адмін-бару
   не мають — для них топбар завжди у top:0. */
body.admin-bar .eld-topbar { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .eld-topbar { top: 0; }
}

/* Hide WordPress page title on plugin pages */
.eld-plugin-page .entry-title,
.eld-plugin-page .page-title {
    display: none;
}

.eld-plugin-page .entry-header,
.eld-plugin-page .page-header {
    display: none;
}

/* Прибрати зайвий верхній зазор Divi-обгортки НАД КОНТЕНТОМ ТЕСТУ (топбар липкий, далі
   одразу .eld-wrap). ⚠️ Scoped через :has(.eld-wrap) — ЛИШЕ тест-сторінки; звіти й кабінет
   (.eld-dashboard, .eld-staff-report тощо) зберігають штатний верхній відступ Divi.
   (Раніше било по всіх .eld-plugin-page → звіти лишались без верхнього паддінга.) */
.eld-plugin-page #main-content:has(.eld-wrap),
.eld-plugin-page #content-area:has(.eld-wrap),
.eld-plugin-page #left-area:has(.eld-wrap),
.eld-plugin-page .container:has(.eld-wrap),
.eld-plugin-page article .entry-content:has(.eld-wrap),
.eld-plugin-page .et_pb_section:first-child:has(.eld-wrap),
.eld-plugin-page .et-l--post:has(.eld-wrap) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Звіти, кабінет, Staff Space (НЕ тест-сторінки) — явний верхній відступ над контентом:
   приховані .entry-header/.page-title прибирають природний зазор Divi, тож додаємо свій.
   #main-content — єдиний зовнішній контейнер → без стекання. Тест-сторінки виключені. */
.eld-plugin-page #main-content:not(:has(.eld-wrap)) {
    padding-top: 40px !important;
}

/* Лише ТЕСТ-сторінки (мають .eld-wrap): прибираємо Divi width:80% → повна ширина,
   а центрування й гутери задає сам .eld-wrap (max 600px, 16px). ⚠️ Scoped через
   :has(.eld-wrap) — щоб НЕ зачепити портал/кабінет (.eld-dashboard) і футер
   (.et_pb_row): без цього їх контент притискався до країв на мобільному. */
.eld-plugin-page .container:has(.eld-wrap),
.eld-plugin-page #left-area:has(.eld-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.eld-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    box-sizing: border-box;
    min-height: calc(100vh - 250px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a2e;
}

/* ── Screens ── */
.eld-screen  { display: none; }
.eld-active  { display: block; }
.eld-hidden  { display: none !important; }

/* ── Hero ── */
/* ── Demo intro screen (rebuilt 2026-05-08) ── */
/* ── Result screen (express test, rebuilt May 2026) ─────────────────── */
.eld-result {
    max-width: 540px;
    margin: 0 auto;
    padding: 8px 0 32px;
}

/* Hero — compact 2-col layout: badge on the left, info on the right */
.eld-result__hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px 22px;
}
.eld-result__hero-badge {
    flex-shrink: 0;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(37,99,235,.22);
}
.eld-result__hero-level {
    line-height: 1;
}
.eld-result__hero-info {
    flex: 1;
    min-width: 0;
}
.eld-result__hero-sub {
    font-size: 14px;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}
.eld-result__hero-source {
    font-size: 11px;
    color: #94a3b8;
    margin: 1px 0 6px;
    line-height: 1.3;
    font-weight: 500;
}
.eld-result__hero-line {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}
.eld-result__hero-level-name { font-weight: 800; color: #0f172a; }
.eld-result__level-divider { margin: 0 8px; color: #cbd5e1; }
.eld-result__score-pct { font-weight: 800; color: #2563eb; }

/* Disclaimer */
.eld-result__disclaimer {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 22px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.55;
}

/* Section title (shared) */
.eld-result__section-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

/* Skill bars */
.eld-result__skills {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.eld-result__skill-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 2fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}
.eld-result__skill-name {
    font-size: 13.5px;
    color: #0f172a;
    font-weight: 600;
}
.eld-result__skill-bar {
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}
.eld-result__skill-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.eld-result__skill-pct {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    min-width: 36px;
    text-align: right;
}
.eld-result__skill-pct--na {
    color: #cbd5e1;
    font-weight: 600;
    cursor: help;
}

/* AI feedback block */
.eld-result__ai {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.eld-result__ai .eld-result__section-title { color: #5b21b6; }
.eld-result__ai-text {
    font-size: 14px;
    color: #4c1d95;
    line-height: 1.6;
    margin: 0;
}

/* Breakdown accordion */
.eld-result__breakdown {
    margin-bottom: 22px;
}
.eld-result__breakdown-toggle {
    width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.eld-result__breakdown-toggle:hover {
    border-color: #2563eb;
    background: #f8fafc;
}
.eld-result__breakdown-arrow {
    font-size: 14px;
    color: #64748b;
}
.eld-result__breakdown-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eld-result__bd-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #94a3b8;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
}
.eld-result__bd-item--ok { border-left-color: #16a34a; }
.eld-result__bd-item--no { border-left-color: #dc2626; }
.eld-result__bd-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.eld-result__bd-icon {
    font-weight: 800;
    font-size: 14px;
    width: 18px;
    text-align: center;
}
.eld-result__bd-item--ok .eld-result__bd-icon { color: #16a34a; }
.eld-result__bd-item--no .eld-result__bd-icon { color: #dc2626; }
.eld-result__bd-num {
    color: #94a3b8;
    font-weight: 700;
}
.eld-result__bd-tags {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: auto;
}
.eld-result__bd-text {
    color: #0f172a;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.45;
}
.eld-result__bd-detail {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.55;
}
.eld-result__bd-detail > div + div { margin-top: 2px; }
.eld-result__bd-detail strong { color: #0f172a; font-weight: 700; }

/* CTA card */
.eld-result__cta {
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1.5px solid #93c5fd;
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(37,99,235,.08);
}
.eld-result__cta-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}
.eld-result__cta-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 12px;
}
.eld-result__cta-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 13px;
    color: #1e293b;
}
.eld-result__cta-benefits li {
    padding: 4px 0;
    line-height: 1.45;
}

/* Divider between primary CTA and the email-later fallback inside the same card */
.eld-result__cta-divider {
    text-align: center;
    margin: 16px 0 10px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
}
.eld-result__cta-divider::before,
.eld-result__cta-divider::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: #cbd5e1;
    vertical-align: middle;
    margin: 0 8px;
}
.eld-result__cta-email-title {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 10px;
}

/* Email-result form (now lives inside .eld-result__cta as the email-later fallback) */
.eld-result__email-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 0;
}
.eld-result__email-success {
    margin-top: 10px;
    padding: 10px 14px;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 8px;
    font-size: 13.5px;
}
.eld-result__email-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13.5px;
}

@media (max-width: 480px) {
    .eld-result__skills,
    .eld-result__ai,
    .eld-result__cta,
    .eld-result__email { padding: 14px; }
    .eld-result__skill-row { grid-template-columns: minmax(95px, 1fr) 1.6fr auto; gap: 8px; }
    .eld-result__skill-name { font-size: 12.5px; }
    .eld-result__email-form { grid-template-columns: 1fr; }
    .eld-result__bd-tags { font-size: 10px; }
}

/* Debug badge — admin-only, shows level + skill of current question */
.eld-debug-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.eld-demo-intro {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px 28px;
    text-align: center;
}

.eld-demo-intro__badge {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 5px 14px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.eld-demo-intro__overline {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 14px;
    margin: 0 0 14px;
    line-height: 1;
}

.eld-demo-intro__title {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.eld-demo-intro__sub {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 24px;
}

.eld-demo-intro__divider {
    height: 1px;
    background: #e2e8f0;
    margin: 24px 0;
}

/* Form wrapper: one outer card containing DOB block + CTA block.
   This unifies the "fill DOB → start test" flow visually as a single unit,
   separating it from the alternative "send-link-by-email" card below. */
.eld-demo-form {
    border: 1.5px solid #c7d2fe;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}

.eld-demo-dob {
    margin-bottom: 14px;
}

.eld-demo-dob__info {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #1e3a8a;
    line-height: 1.55;
    text-align: left;
}

.eld-demo-dob__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
    text-align: left;
}

.eld-demo-dob__selects {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.eld-demo-dob__select {
    width: 100%;
    box-sizing: border-box;
}

.eld-demo-dob__hint {
    font-size: 12.5px;
    color: #64748b;
    margin: 0 0 18px;
    text-align: left;
    line-height: 1.5;
}

.eld-demo-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13.5px;
    text-align: left;
}

.eld-demo-intro__disclaimer {
    margin-top: 18px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.55;
    text-align: left;
}

/* CTA block: groups primary "start" button with the direct level picker.
   No standalone border — sits inside .eld-demo-form which provides the
   single outer card around DOB + CTA together. Top divider visually
   separates "fill DOB" zone from "choose how to start" zone. */
.eld-demo-cta-block {
    border-top: 1px solid #cbd5e1;
    padding-top: 14px;
    margin-top: 14px;
}

/* Direct level picker — under the primary "start with simplest" CTA */
.eld-demo-levels__label {
    margin: 14px 0 8px;
    font-size: 12.5px;
    color: #64748b;
    text-align: center;
}

.eld-demo-levels {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.eld-demo-levels__btn {
    flex: 1;
    padding: 14px 0;
    border: 1.5px solid #818cf8;
    border-radius: 10px;
    background: #fff;
    color: #4338ca;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
}

.eld-demo-levels__btn:hover {
    border-color: #4338ca;
    background: #eef2ff;
}

.eld-demo-levels__btn:active {
    transform: scale(0.97);
}

/* Primary CTA inside the form: tone down a notch so it doesn't dwarf
   the level buttons sitting right under it. */
#eld-btn-demo-start {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 15px;
}

/* Secondary CTA: send link by email */
.eld-demo-email-block {
    margin-top: 24px;
    padding: 18px 16px 16px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    text-align: left;
}

.eld-demo-email-block__title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.eld-demo-email-block__sub {
    font-size: 13px;
    color: #475569;
    margin: 0 0 12px;
    line-height: 1.5;
}

.eld-demo-email-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 0;
}

/* Higher specificity to defeat theme (Divi) input style overrides that
   strip horizontal padding and make the placeholder hug the left edge. */
.eld-demo-email-block .eld-demo-email-form__input,
#eld-result-email-form .eld-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    line-height: 1.4;
}

.eld-demo-email-form__btn {
    white-space: nowrap;
    padding: 10px 18px;
}

.eld-demo-email-success {
    margin-top: 10px;
    padding: 10px 14px;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
}

.eld-demo-email-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .eld-demo-email-form { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .eld-demo-intro { padding: 16px 14px 18px; }
    .eld-demo-intro__overline { margin-bottom: 10px; padding: 4px 12px; font-size: 11px; }
    .eld-demo-intro__title { font-size: 1.3rem; margin-bottom: 8px; }
    .eld-demo-intro__sub { font-size: 0.9rem; margin-bottom: 14px; }
    .eld-demo-dob__info { padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; }
    .eld-demo-dob__label { font-size: 13px; margin-bottom: 6px; }
    .eld-demo-dob__selects {
        grid-template-columns: 1fr 1.4fr 1fr;
        gap: 6px;
    }
    .eld-demo-dob__select { font-size: 13px; padding: 8px 6px; }
    .eld-demo-intro__disclaimer { margin-top: 12px; padding: 10px 12px; font-size: 12px; }
    .eld-demo-email-block { margin-top: 16px; padding: 14px 12px 12px; }
}

.eld-hero {
    text-align: center;
    padding: 40px 20px;
}

.eld-hero__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}

.eld-hero__sub {
    color: #6b7280;
    margin: 0 0 32px;
    font-size: 0.95rem;
}

/* ── Audience buttons ── */
.eld-audience-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}

/* ── Warning ── */
.eld-warning {
    display: flex;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.eld-warning__icon { font-size: 1.2rem; flex-shrink: 0; }

.eld-warning p { margin: 0; color: #1e40af; font-size: 0.9rem; line-height: 1.5; }

.eld-warning__actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Progress bar ── */
.eld-progress-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-bottom: 16px;
    overflow: hidden;
}

.eld-progress-bar__fill {
    height: 100%;
    background: #4c6ef5;
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0;
}

.eld-counter {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 20px;
    text-align: right;
}

/* ── Question ── */
.eld-question__text {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ── Options ── */
.eld-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.eld-option {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
}

.eld-option:hover {
    border-color: #4c6ef5;
    background: #eff1ff;
}

.eld-option--selected {
    border-color: #4c6ef5;
    background: #eff1ff;
    font-weight: 600;
}

/* ── Reading-comprehension passage (optional, shown above question text) ── */
.eld-reading-passage {
    background: #f8fafc;
    border-left: 3px solid #4c6ef5;
    padding: 14px 18px;
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
    border-radius: 4px;
    white-space: pre-line;
}

/* ── Listening block (audio player + play counter, above MC options) ── */
.eld-listening {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 20px;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.eld-listening audio {
    display: none;  /* custom UI only — hide native controls */
}
.eld-listening-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #4c6ef5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.eld-listening-play:hover:not(.eld-listening-play--disabled) {
    background: #4263eb;
}
.eld-listening-play:active:not(.eld-listening-play--disabled) {
    transform: scale(0.98);
}
.eld-listening-play--disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}
.eld-listening-play__icon {
    font-size: 1.1rem;
    line-height: 1;
}
.eld-listening-play--loading {
    cursor: wait;
    opacity: 0.85;
}
.eld-listening-play--loading .eld-listening-play__icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eld-listening-spin 0.7s linear infinite;
    color: transparent;
    font-size: 0;
}
@keyframes eld-listening-spin {
    to { transform: rotate(360deg); }
}
.eld-listening-error {
    width: 100%;
    max-width: 420px;
    margin-top: 4px;
    padding: 10px 14px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
}

/* Admin debug banner — sticky red bar shown on tests opened with ?debug=1 */
.eld-admin-debug-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    padding: 8px 16px;
    background: #b91c1c;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.eld-listening-progress {
    width: 100%;
    max-width: 360px;
    height: 6px;
    background: #dbeafe;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.eld-listening-progress__fill {
    height: 100%;
    width: 0;
    background: #4c6ef5;
    border-radius: 3px;
    transition: width 0.1s linear;
}
.eld-listening-timer {
    font-size: 0.8rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.eld-listening-timer__sep { opacity: 0.5; margin: 0 3px; }
.eld-listening-counter {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Anti-cheat (teacher feedback Apr 2026) ── */
/* Prevent copying question text, passage and options. Listening options also protected. */
.eld-question__text,
.eld-reading-passage,
.eld-options,
.eld-option,
.eld-listening-counter,
.eld-listening-play__label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Intro-screen notice (shallow + deep) — small muted footnote below CTA */
.eld-test-intro-notice {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 16px 0 0;
    line-height: 1.5;
    text-align: center;
}

/* Flash shown when user attempts to copy (Ctrl+C / context menu) */
.eld-copy-warning {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc2626;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.eld-copy-warning--visible { opacity: 1; }

/* ── Voice prompt ── */
.eld-voice-prompt {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
}

.eld-voice-prompt__text {
    font-weight: 600;
    margin: 0 0 8px;
}

.eld-voice-prompt__level {
    font-size: 0.9rem;
    font-weight: 600;
    color: #15803d;
    margin: 0 0 10px;
}

.eld-voice-prompt__hint {
    color: #059669;
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0 0 6px;
}

.eld-voice-prompt__note {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
}

/* ── Voice recorder ── */
.eld-voice-recorder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.eld-btn--record {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.eld-btn--record:hover { background: #15803d; }

.eld-mic-icon { font-size: 1.1rem; }

.eld-btn--stop {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.eld-btn--stop:hover { background: #b91c1c; }

.eld-btn--sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.eld-voice-recording {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.eld-voice-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #dc2626;
}

.eld-voice-dot {
    width: 10px;
    height: 10px;
    background: #dc2626;
    border-radius: 50%;
    animation: eld-pulse 1s ease-in-out infinite;
}

@keyframes eld-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.eld-voice-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 0.9rem;
}

.eld-voice-done {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.95rem;
}

.eld-voice-done__icon {
    font-size: 1.1rem;
}

.eld-voice-result {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
    text-align: center;
}

.eld-voice-result__score {
    margin-bottom: 10px;
}

.eld-voice-result__score-num {
    font-size: 2rem;
    font-weight: 700;
    color: #059669;
    line-height: 1;
}

.eld-voice-result__score-max {
    font-size: 1rem;
    color: #6b7280;
}

.eld-voice-result__transcription {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 8px;
}

.eld-voice-result__comment {
    font-size: 0.875rem;
    color: #065f46;
    font-weight: 500;
    margin: 0;
}

.eld-voice-wave {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    height: 40px;
    border-radius: 6px;
    background: #f3f4f6;
}

.eld-voice-error {
    width: 100%;
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ── Voice skip button ── */
.eld-voice-skip-btn {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #9ca3af;
    padding: 4px 0;
    background: none;
    border: none;
}
.eld-voice-skip-btn:hover { color: #6b7280; text-decoration: underline; }

/* ── Voice preview (playback before submit) ── */
.eld-voice-preview {
    width: 100%;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eld-voice-audio {
    width: 100%;
    height: 40px;
    border-radius: 8px;
}

.eld-voice-preview__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.eld-voice-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.9rem;
}

/* ── Nav ── */
.eld-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.eld-nav #eld-btn-next { margin-left: auto; }

.eld-nav-secondary {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.eld-btn--sm {
    font-size: 0.8rem;
    padding: 6px 14px;
    color: #9ca3af;
}
.eld-btn--sm:hover { color: #6b7280; }

/* ── Modal ── */
.eld-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.eld-modal.eld-hidden { display: none !important; }
.eld-modal__box {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.eld-modal__text {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 24px;
    color: #1a1a2e;
}
.eld-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ── Loader ── */
.eld-loader {
    text-align: center;
    padding: 60px 20px;
}

/* ── Level-loading (before speaking task) ── */
.eld-level-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 60px 20px;
    text-align: center;
}

.eld-level-loading__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 360px;
}

.eld-level-loading__step {
    font-size: 0.95rem;
    color: #9ca3af;
    transition: color 0.3s, font-weight 0.3s;
    margin: 0;
}

.eld-level-loading__step--active {
    color: #1a1a2e;
    font-weight: 600;
}

.eld-level-loading__step--done {
    color: #15803d;
}

.eld-level-loading__step--done::before {
    content: '✓ ';
}

.eld-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #4c6ef5;
    border-radius: 50%;
    animation: eld-spin 0.7s linear infinite;
    margin: 0 auto 16px;
}

@keyframes eld-spin { to { transform: rotate(360deg); } }

/* ── Result ── */
.eld-result { padding: 8px 0; }

.eld-result__level-badge {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, #4c6ef5, #7950f2);
    border-radius: 16px;
    color: #fff;
    margin-bottom: 24px;
}

.eld-result__level-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eld-result__level {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.eld-result__level-name {
    display: block;
    font-size: 1.1rem;
    margin-top: 6px;
    opacity: 0.9;
}

.eld-result__desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 20px;
}

/* ── MIN-логіка: блок «Слабка / Найсильніша ланка» ── */
.eld-result__min-note {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1d4ed8;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 22px;
}
.eld-result__min-note-lead {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}
.eld-result__min-note-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eld-result__min-note-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0f172a;
}
.eld-result__min-note-icon { font-size: 16px; }
.eld-result__min-note-label { font-weight: 600; color: #475569; }
.eld-result__min-note-value { font-weight: 700; }
.eld-result__min-note-row--weak   .eld-result__min-note-value { color: #b91c1c; }
.eld-result__min-note-row--strong .eld-result__min-note-value { color: #15803d; }

/* Підсвітка слабкої / сильної навички у списку */
.eld-skill.eld-skill--weak {
    background: #fef2f2;
    border-left: 3px solid #b91c1c;
    padding-left: 8px;
    border-radius: 0 6px 6px 0;
}
.eld-skill.eld-skill--strong {
    background: #f0fdf4;
    border-left: 3px solid #15803d;
    padding-left: 8px;
    border-radius: 0 6px 6px 0;
}

.eld-result__warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    color: #92400e;
}
.eld-result__warning p { margin: 0 0 12px; }
.eld-result__warning .eld-btn { margin-top: 4px; }

.eld-result__accuracy {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
}

.eld-result__accuracy-title {
    font-weight: 600;
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.eld-result__accuracy-desc {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.eld-result__accuracy--cta {
    background: #fffbeb;
    border-color: #f59e0b;
}

.eld-result__accuracy--cta .eld-result__accuracy-desc {
    color: #92400e;
    font-weight: 500;
}

.eld-result__register-note {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin: -4px 0 0;
}

.eld-result__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

/* ── Upsell cards ── */
.eld-upsell { margin-bottom: 28px; }

.eld-upsell__title {
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

.eld-upsell__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media ( max-width: 480px ) {
    .eld-upsell__cards { grid-template-columns: 1fr; }
}

.eld-upsell__card {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    position: relative;
}

.eld-upsell__card--featured {
    border-color: #4c6ef5;
    background: #f5f7ff;
}

.eld-upsell__card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #4c6ef5;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.eld-upsell__card-title {
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1rem;
}

.eld-upsell__card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: #374151;
}

.eld-upsell__card-list li {
    padding: 4px 0;
}

.eld-upsell__card-list li::before {
    content: '✓ ';
    color: #4c6ef5;
    font-weight: 700;
}

/* ── Free materials ── */
.eld-result__free {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}

.eld-result__free-title {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 12px;
}

.eld-result__free-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eld-result__free-item {
    display: block;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, border-color 0.15s;
}

.eld-result__free-item:hover {
    background: #eff1ff;
    border-color: #4c6ef5;
    color: #4c6ef5;
}

/* ── Blocked ── */
.eld-blocked {
    text-align: center;
    padding: 40px 20px;
}

.eld-blocked p { margin-bottom: 20px; color: #6b7280; }

/* ── Child options screen ── */
.eld-child-options {
    padding: 32px 20px;
}

.eld-btn--back {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 0.9em;
    cursor: pointer;
    padding: 0 0 16px;
    display: block;
}

.eld-btn--back:hover { color: #6b7280; }

.eld-child-options__title {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 24px;
    color: #1a1a2e;
}

.eld-child-options__cards {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.eld-child-options__divider {
    text-align: center;
    color: #9ca3af;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 8px 0;
    position: relative;
}

.eld-child-options__divider::before,
.eld-child-options__divider::after {
    content: '';
    display: inline-block;
    width: 40%;
    height: 1px;
    background: #e5e7eb;
    vertical-align: middle;
    margin: 0 8px;
}

.eld-child-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
}

.eld-child-card__icon {
    display: block;
    font-size: 36px;
    margin-bottom: 10px;
}

.eld-child-card__label {
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    font-size: 1em;
}

.eld-child-card__desc {
    color: #6b7280;
    font-size: 0.9em;
    margin: 0 0 16px;
    line-height: 1.5;
}

.eld-child-email-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eld-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.eld-input:focus { border-color: #6366f1; }

.eld-child-email-success {
    color: #059669;
    font-size: 0.95em;
    font-weight: 600;
    padding: 8px 0;
}

.eld-child-email-error {
    color: #dc2626;
    font-size: 0.85em;
    padding: 6px 0;
}

/* ── Voice intro card ── */
.eld-voice-intro {
    text-align: center;
    padding: 8px 0 16px;
}

.eld-voice-intro__icon {
    display: block;
    font-size: 40px;
    margin-bottom: 12px;
}

.eld-voice-intro__title {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1a1a2e;
}

.eld-voice-intro__level {
    display: inline-block;
    background: #f0fdf4;
    border: 1px solid #bbf7d0 !important;
    border-bottom: 1px solid #bbf7d0 !important;
    color: #15803d;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    margin: 0 0 12px;
    text-decoration: none !important;
}

.eld-voice-intro__desc {
    color: #6b7280;
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0 0 24px;
}

.eld-voice-intro__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
}

.eld-btn--ghost {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px;
}

.eld-btn--ghost:hover { color: #6b7280; }

/* ── Deep test intro ── */
.eld-deep-intro {
    padding: 12px 0 24px;
}

.eld-student-badge {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 14px;
    margin-bottom: 16px;
}

.eld-deep-intro__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px;
}

.eld-deep-intro__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eld-deep-intro__list li {
    font-size: 0.95rem;
    color: #374151;
}

/* ── Info page link ── */
.eld-intro-info-link {
    text-align: center;
    margin-top: 12px;
}

.eld-intro-info-link a {
    font-size: 0.88rem;
    color: #64748b;
    text-decoration: none;
    border-bottom: 1px dashed #cbd5e1;
    transition: color .15s ease, border-color .15s ease;
}

.eld-intro-info-link a:hover {
    color: #2563eb;
    border-bottom-color: #93c5fd;
}

/* ── Adaptive retest notice ── */
.eld-adaptive-notice {
    margin: 16px 0 0;
    padding: 10px 14px;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    color: #1e40af;
    line-height: 1.5;
}

/* ── Deep test header ── */
.eld-deep-header {
    text-align: center;
    margin-bottom: 20px;
}

.eld-deep-header__badge {
    display: inline-block;
    background: linear-gradient(135deg, #4c6ef5, #7950f2);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
/* Shallow-варіант шапки тесту: синій badge під бренд експрес-тесту (deep лишається фіолетовим). */
.eld-deep-header--shallow .eld-deep-header__badge {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.eld-deep-header__note {
    margin: 0;
    line-height: 1.6;
}
.eld-deep-header__note-primary {
    display: block;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
}
.eld-deep-header__note-secondary {
    display: block;
    color: #9ca3af;
    font-size: 0.8rem;
}

/* ── Skills breakdown ── */
.eld-skills {
    margin-bottom: 24px;
}

.eld-skills__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eld-skill {
    margin-bottom: 14px;
}

.eld-skill__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.eld-skill__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.eld-skill__pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4c6ef5;
}

.eld-skill__bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.eld-skill__fill {
    height: 100%;
    background: linear-gradient(90deg, #4c6ef5, #7950f2);
    border-radius: 4px;
    width: 0;
    transition: width 0.6s ease;
}

/* ── AI Feedback ── */
.eld-ai-feedback {
    background: #f8f7ff;
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.eld-ai-feedback__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.eld-ai-feedback__icon { font-size: 1.1rem; }

.eld-ai-feedback__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eld-ai-feedback__loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 0.9rem;
}

.eld-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;
}

/* ── Monthly Report ── */

.eld-monthly-report {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a2e;
}

.eld-monthly-report__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.eld-monthly-report__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

.eld-monthly-report__export-btns {
    display: flex;
    gap: 8px;
}

.eld-monthly-report__export {
    font-size: 0.85rem !important;
}

.eld-monthly-report__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.eld-monthly-report__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #374151;
}

.eld-monthly-report__filter-group label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.eld-monthly-report__filter-group input[type="text"],
.eld-monthly-report__filter-group select {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
}

.eld-monthly-report__filter-group--actions {
    flex-direction: row;
    align-items: center;
}

.eld-monthly-report__filter-group--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: #374151;
    cursor: pointer;
    padding-bottom: 2px;
}

.eld-monthly-report__summary {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: #6b7280;
}

.eld-monthly-report__empty {
    color: #6b7280;
    padding: 20px 0;
}

.eld-monthly-report__table-wrap {
    overflow-x: auto;
}

.eld-monthly-report__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.eld-monthly-report__table thead tr {
    background: #f3f4f6;
}

.eld-monthly-report__table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.eld-monthly-report__table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

/* Teacher rows */
.eld-mr-teacher-row {
    background: #fff;
    font-weight: 500;
}

.eld-mr-teacher-row:hover {
    background: #f9fafb;
}

.eld-mr-teacher-name {
    font-weight: 600;
    color: #111827;
}

/* Student rows */
.eld-mr-students-header th {
    background: #f8f5ff;
    font-size: 0.75rem;
    color: #7c3aed;
    padding: 6px 12px;
    border-bottom: 1px solid #ede9fe;
}

.eld-mr-student-row {
    background: #fafafa;
}

.eld-mr-student-row:hover {
    background: #f5f3ff;
}

.eld-mr-student-indent {
    color: #c4b5fd;
    font-size: 0.8rem;
    padding-left: 16px !important;
}

.eld-mr-student-name {
    color: #374151;
    padding-left: 8px;
}

.eld-mr-student--untested td {
    color: #9ca3af;
}

.eld-mr-no-test {
    font-style: italic;
    color: #9ca3af;
    font-size: 0.82rem;
}

/* Toggle button */
.eld-mr-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.eld-mr-toggle:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Column widths */
.eld-mr-col--toggle  { width: 36px; text-align: center; }
.eld-mr-col--name    { min-width: 160px; }
.eld-mr-col--edvibe  { width: 70px; text-align: center; color: #9ca3af; }
.eld-mr-col--tested  { width: 90px; text-align: center; }
.eld-mr-student-row .eld-mr-col--tested { text-align: left; color: #6b7280; font-size: 0.85rem; }
.eld-mr-col--coverage{ width: 80px; text-align: center; }
.eld-mr-col--score   { width: 76px; text-align: right; }
.eld-mr-col--delta-score { width: 76px; text-align: right; }
.eld-mr-col--level   { width: 80px; text-align: center; }
.eld-mr-col--delta-level { width: 90px; text-align: center; }

.eld-mr-total {
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 400;
}

.eld-ai-feedback__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #374151;
    margin: 0;
}

/* ── Deep result: cabinet CTA ── */
.eld-result__cabinet-cta {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
    margin-top: 8px;
    text-align: center;
}

.eld-result__cabinet-cta__text {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.eld-result__cabinet-cta__sub {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 16px;
}

/* ── Blocked: action buttons column ── */
.eld-blocked__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 280px;
    margin: 0 auto;
}

/* ── Buttons ── */
.eld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    line-height: 1;
}

.eld-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.eld-btn:active:not(:disabled) { transform: scale(0.98); }

.eld-btn--primary {
    background: #4c6ef5;
    color: #fff;
}

.eld-btn--primary:hover:not(:disabled) {
    background: #3b5bdb;
    color: #fff;
}

.eld-btn--outline {
    background: transparent;
    color: #4c6ef5;
    border: 2px solid #4c6ef5;
}

.eld-btn--outline:hover:not(:disabled) {
    background: #eff1ff;
}

.eld-btn--full { width: 100%; }

.eld-btn--audience {
    background: #f3f4f6;
    color: #1a1a2e;
    border: 2px solid #e5e7eb;
    padding: 16px 20px;
    font-size: 1rem;
    border-radius: 12px;
}

.eld-btn--audience:hover {
    border-color: #4c6ef5;
    background: #eff1ff;
}

/* ── Dashboard: Мої тести ── */
.eld-dashboard {
    max-width: 680px;
}

.eld-dashboard__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111827;
}

.eld-dashboard__block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

/* ── Teacher binding widget (Мої тести, постійний) ── */
.eld-teacher-banner {
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
/* Коли вже привʼязано — менш «алярмово»: нейтральний фон, тонше */
.eld-teacher-banner--bound {
    background: #f9fafb;
    border-color: #e5e7eb;
    padding: 14px 18px;
}
.eld-teacher-banner--bound .eld-teacher-banner__title { color: #1f2937; }
.eld-teacher-banner__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.eld-teacher-banner__icon { font-size: 1.5rem; flex-shrink: 0; }
.eld-teacher-banner__title {
    font-weight: 700;
    font-size: 1rem;
    color: #1e40af;
    margin-bottom: 4px;
}
.eld-teacher-banner__sub {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}
.eld-teacher-banner__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.eld-teacher-banner__select {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
}

/* Searchable combobox (text-input + dropdown) у банері викладача */
.eld-tb-combo { position: relative; flex: 1; min-width: 200px; }
.eld-tb-combo-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.eld-tb-combo-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba( 37, 99, 235, .15 );
}
.eld-tb-combo-list {
    position: absolute;
    z-index: 50;
    top: calc( 100% + 4px );
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba( 15, 23, 42, .08 );
}
.eld-tb-combo-list,
.eld-tb-combo-list .eld-tb-combo-opt { list-style: none !important; }
.eld-tb-combo-opt {
    padding: 7px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #1f2937;
}
.eld-tb-combo-opt::before,
.eld-tb-combo-opt::marker { content: '' !important; display: none !important; }
.eld-tb-combo-opt:hover,
.eld-tb-combo-opt.is-active { background: #eff6ff; color: #1d4ed8; }
.eld-teacher-banner__msg {
    margin-top: 10px;
    font-size: 0.875rem;
    color: #475569;
}
.eld-teacher-banner__msg--ok { color: #15803d; }
.eld-teacher-banner__msg--err { color: #b91c1c; }
@media (max-width: 560px) {
    .eld-teacher-banner__form { flex-direction: column; align-items: stretch; }
    .eld-teacher-banner__select { width: 100%; }
}

.eld-dashboard__block-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
}

.eld-dashboard__result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.eld-dashboard__date {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.eld-dashboard__empty {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: #6b7280;
}

.eld-dashboard__empty p {
    margin-bottom: 16px;
}

.eld-dashboard__next-test {
    text-align: center;
}

.eld-dashboard__next-test__label {
    margin-bottom: 12px;
    color: #374151;
}

.eld-dashboard__next-test__hint {
    margin-top: 10px;
    font-size: 13px;
    color: #9ca3af;
}

.eld-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.eld-dashboard__history-scroll {
    overflow-x: scroll;
    margin: 0 -24px;
    padding: 0 24px 6px;
    position: relative;
    /* Always-visible scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #c7d2fe #f3f4f6;
}

.eld-dashboard__history-scroll::-webkit-scrollbar {
    height: 6px;
}

.eld-dashboard__history-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.eld-dashboard__history-scroll::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 3px;
}

.eld-dashboard__history-scroll::-webkit-scrollbar-thumb:hover {
    background: #a5b4fc;
}


.eld-dashboard__history {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.eld-dashboard__history th,
.eld-dashboard__history td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}

.eld-dashboard__history th {
    color: #6b7280;
    font-weight: 500;
}

.eld-dashboard__history tbody tr:hover {
    background: #f9fafb;
}

/* ── History footer ── */

.eld-dashboard__history-footer {
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
}

.eld-dashboard__history-all {
    font-size: 0.875rem;
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.eld-dashboard__history-all:hover {
    text-decoration: underline;
}

.eld-all-tests-page {
    max-width: 900px;
}

.eld-all-tests-page__back {
    display: inline-block;
    font-size: 0.875rem;
    color: #4f46e5;
    text-decoration: none;
    margin-bottom: 16px;
}

.eld-all-tests-page__back:hover {
    text-decoration: underline;
}

.eld-all-tests-page__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}

/* ── Skills: radar + bars layout ── */

.eld-skills__inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: center;
}

.eld-skills__radar {
    width: 100%;
    max-width: 260px;
}

.eld-skills__radar canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.eld-skills__bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 560px) {
    .eld-skills__inner {
        grid-template-columns: 1fr;
    }
    .eld-skills__radar {
        max-width: 200px;
        margin: 0 auto;
    }
}

/* ── Progress chart header + period selector ── */

.eld-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.eld-progress-header .eld-dashboard__block-title {
    margin-bottom: 0;
}

.eld-progress-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.eld-progress-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 8px 0 4px;
    padding-left: 45px; /* align with chart area start (past Y-axis labels) */
}

.eld-progress-period {
    font-size: 0.8125rem;
    font-family: inherit;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px 28px 5px 10px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px;
}

.eld-progress-period:focus {
    outline: none;
    border-color: #4f46e5;
}

/* ── Goal selector ── */

.eld-goal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.eld-goal-row .eld-progress-period {
    width: auto;
}

.eld-goal-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.eld-goal-status {
    font-size: 0.75rem;
    color: #9ca3af;
    transition: color 0.2s;
}

.eld-goal-status--saving { color: #9ca3af; }
.eld-goal-status--saved  { color: #16a34a; }

/* ── Progress line chart ── */

.eld-progress-chart {
    position: relative;
    height: 200px;
}

.eld-progress-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ── Info tooltip ── */

.eld-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}

.eld-info-tip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    line-height: 1;
    user-select: none;
}

.eld-info-tip__box {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(260px, 80vw);
    background: #1e1b4b;
    color: #e0e7ff;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 8px;
    white-space: normal;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* Arrow */
.eld-info-tip__box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e1b4b;
}

.eld-info-tip:hover .eld-info-tip__box,
.eld-info-tip__icon:focus + .eld-info-tip__box,
.eld-info-tip.is-open .eld-info-tip__box {
    display: block;
}

/* ── Reminder notice (result screen) ── */

.eld-reminder-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #15803d;
    margin-top: 16px;
}

.eld-reminder-notice__icon {
    flex-shrink: 0;
}

.eld-reminder-notice__link {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.eld-reminder-notice__link:hover {
    text-decoration: underline;
}

/* ── Reminder block (dashboard) ── */

.eld-reminder-block__current {
    font-size: 0.9375rem;
    color: #374151;
    margin: 0 0 12px;
}

.eld-reminder-block__none {
    color: #9ca3af;
}

.eld-reminder-block__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eld-reminder-block__label {
    font-size: 0.875rem;
    color: #6b7280;
    white-space: nowrap;
}

.eld-reminder-block__input {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    cursor: pointer;
}

.eld-reminder-block__input:focus {
    outline: none;
    border-color: #4f46e5;
}

.eld-reminder-block__status {
    font-size: 0.8125rem;
    margin: 8px 0 0;
    min-height: 1.2em;
    color: #9ca3af;
}

.eld-reminder-block__status--saved  { color: #16a34a; }
.eld-reminder-block__status--error  { color: #dc2626; }

/* ── Cabinet inline tabs ── */
/* Active class: is-active (set by eld-cabinet.js).        */
/* Panel visibility: .eld-hidden (set by eld-cabinet.js).  */

/* ── DOB Screen ── */
.eld-dob-screen {
    padding: 40px 20px;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.eld-dob-screen__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: #111827;
}

.eld-dob-screen__sub {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 28px;
    line-height: 1.6;
}

.eld-dob-screen__field {
    text-align: left;
    margin-bottom: 20px;
}

.eld-dob-screen__field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.eld-dob-selects {
    display: flex;
    gap: 8px;
}

.eld-dob-selects__select {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    appearance: auto;
    min-width: 0;
}

.eld-dob-screen__error {
    color: #dc2626;
    font-size: 0.875rem;
    margin: -12px 0 16px;
    text-align: left;
}

.eld-dob-screen__warning {
    background: #fef3c7;
    border-left: 3px solid #d97706;
    color: #78350f;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 10px 14px;
    margin: -8px 0 16px;
    border-radius: 4px;
    text-align: left;
}

/* ── Equipment check (deep-test gate) ── */
.eld-equipment {
    padding: 32px 20px;
    max-width: 560px;
    margin: 0 auto;
}
.eld-equipment__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    text-align: center;
}
.eld-equipment__sub {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 20px;
    text-align: center;
}
.eld-equipment__card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.eld-equipment__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 6px;
}
.eld-equipment__card-icon { font-size: 1.25rem; }
.eld-equipment__card-title { flex: 1; }
.eld-equipment__card-status { font-size: 1.1rem; }
.eld-equipment__card-desc {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 0 12px;
}
.eld-equipment__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.eld-equipment__recording {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.9rem;
}
.eld-equipment__error {
    color: #b91c1c;
    font-size: 0.875rem;
    margin-top: 8px;
}
.eld-equipment__hint {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 12px 0 0;
    text-align: center;
}

/* ── Name Screen ── */
.eld-name-screen {
    padding: 40px 20px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.eld-name-screen__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.eld-name-screen__sub {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 28px;
}

.eld-name-screen__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.eld-name-screen__field {
    text-align: left;
}

.eld-name-screen__field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.eld-name-screen__field input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.eld-name-screen__field input[type="text"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.eld-name-screen__error {
    color: #dc2626;
    font-size: 0.875rem;
    margin: -12px 0 16px;
    text-align: left;
}

/* ── Confirm Screen (verifies name + DOB before each deep test) ── */
.eld-confirm-screen {
    padding: 40px 20px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.eld-confirm-screen__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.eld-confirm-screen__sub {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 28px;
    line-height: 1.55;
}

.eld-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    margin-bottom: 10px;
    text-align: left;
}

.eld-confirm-row__label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    flex-shrink: 0;
}

.eld-confirm-row__value {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    text-align: right;
    word-break: break-word;
}

#eld-confirm-read button + button {
    margin-top: 8px;
}

#eld-confirm-read > button:first-of-type {
    margin-top: 18px;
}

#eld-confirm-edit > .eld-name-screen__field,
#eld-confirm-edit > .eld-dob-screen__field {
    margin-bottom: 16px;
}

/* ── Student Screen ── */
.eld-student-screen {
    padding: 40px 20px;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}

.eld-student-screen__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: #111827;
}

.eld-student-screen__sub {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 28px;
    line-height: 1.6;
}

.eld-student-screen__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.eld-student-teacher-wrap {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}

.eld-student-teacher-wrap__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.eld-teacher-search-wrap {
    position: relative;
}

.eld-teacher-search-wrap__input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.eld-teacher-search-wrap__input:focus {
    border-color: #4c6ef5;
    box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.12);
}

.eld-teacher-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 100;
}

.eld-teacher-suggestions li {
    padding: 10px 14px;
    font-size: 0.95rem;
    color: #111827;
    cursor: pointer;
    transition: background 0.1s;
}

.eld-teacher-suggestions li:hover {
    background: #eff1ff;
    color: #4c6ef5;
}

.eld-teacher-suggestions__not-found {
    color: #9ca3af;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
    padding-top: 10px;
    font-size: 0.875rem;
}

.eld-teacher-suggestions__not-found:hover {
    background: #f9fafb;
    color: #6b7280;
}

.eld-teacher-no-list-hint {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eld-teacher-no-list-cancel {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    color: #4c6ef5;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eld-student-screen__error {
    color: #dc2626;
    font-size: 0.875rem;
    margin: 4px 0 0;
    text-align: left;
}

/* ── Staff Report ── */
.eld-staff-report {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a2e;
    padding-bottom: 48px;
}

.eld-staff-report__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.eld-staff-report__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.eld-staff-report__export-btns {
    display: flex;
    gap: 8px;
}

.eld-staff-report__export {
    font-size: 0.875rem !important;
    text-decoration: none !important;
}

/* Пагінація для звітів — used by results-report.php */
.eld-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0;
    padding: 12px 0;
}
.eld-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .12s, border-color .12s;
}
.eld-pagination__btn:hover {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1d4ed8;
}
.eld-pagination__btn--current {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    cursor: default;
}
.eld-pagination__btn--current:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.eld-pagination__gap {
    color: #94a3b8;
    padding: 0 4px;
    font-weight: 500;
}

.eld-staff-report__filters {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.eld-staff-report__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eld-staff-report__filter-group label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
}

.eld-staff-report__filter-group input[type="text"],
.eld-staff-report__filter-group input[type="date"],
.eld-staff-report__filter-group select {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
}

.eld-staff-report__filter-group--actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.eld-staff-report__filter-group--actions button[type="submit"],
.eld-monthly-report__filter-group--actions button[type="submit"] {
    height: 34px;
    padding: 0 16px;
    border: 1px solid #6366f1;
    border-radius: 6px;
    background: #6366f1;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    transition: background 0.15s, border-color 0.15s;
    line-height: 34px;
}

.eld-staff-report__filter-group--actions button[type="submit"]:hover,
.eld-monthly-report__filter-group--actions button[type="submit"]:hover {
    background: #4f46e5;
    border-color: #4f46e5;
}

.eld-staff-report__filter-group--actions a.button,
.eld-monthly-report__filter-group--actions a.button {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.9rem;
    line-height: 34px;
    box-shadow: none;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.eld-staff-report__filter-group--actions a.button:hover,
.eld-monthly-report__filter-group--actions a.button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.eld-staff-report__count {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 12px;
}

/* Пагінація звіту */
.eld-staff-report__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 18px 0 4px;
}
.eld-staff-report__pager .eld-pager__num,
.eld-staff-report__pager .eld-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #3b3b5c;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
    transition: background .15s, border-color .15s;
}
.eld-staff-report__pager .eld-pager__num:hover,
.eld-staff-report__pager .eld-pager__btn:hover {
    background: #f3f4f6;
    border-color: #cbd0da;
}
.eld-staff-report__pager .eld-pager__num--current,
.eld-staff-report__pager .eld-pager__num--current:hover {
    background: #5a4ff3;
    border-color: #5a4ff3;
    color: #fff;
    font-weight: 600;
}
.eld-staff-report__pager .eld-pager__gap {
    padding: 0 4px;
    color: #9ca3af;
}

.eld-staff-report__empty {
    color: #6b7280;
    font-size: 0.95rem;
}

.eld-staff-report__table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.eld-staff-report__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.eld-staff-report__table thead th {
    background: #f3f4f6;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    border-bottom: 1px solid #e5e7eb;
}

.eld-staff-report__table thead th.eld-col--first { background: #dbeafe; color: #1d4ed8; }
.eld-staff-report__table thead th.eld-col--last  { background: #bbf7d0; color: #15803d; }
.eld-staff-report__table tbody td.eld-col--first  { background: #eff6ff; }
.eld-staff-report__table tbody td.eld-col--last   { background: #f0fdf4; }

.eld-staff-report__table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.eld-staff-report__table tbody tr:last-child {
    border-bottom: none;
}

.eld-staff-report__table tbody tr:hover {
    background: #fafafa;
}

.eld-staff-report__table td {
    padding: 10px 14px;
    vertical-align: middle;
}

.eld-staff-report__name {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.eld-staff-report__email {
    color: #6b7280;
    font-size: 0.8125rem;
}

/* Компактні колонки звіту по студентах — 12 колонок мають влазити без горизонтального скролу на ПК.
   (feedback-звіт має власні nth-child ширини з вищою специфічністю → не зачіпається.) */
.eld-staff-report__table { font-size: 0.85rem; }
.eld-staff-report__table thead th { padding: 9px 8px; font-size: 0.75rem; }
.eld-staff-report__table td        { padding: 9px 8px; }
/* Імʼя — дозволяємо перенос (довгі ПІБ більше не розпирають таблицю) */
.eld-staff-report__name  { white-space: normal; max-width: 150px; }
/* Email — переносимо довгі адреси замість розширення колонки */
.eld-staff-report__email {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 160px;
    font-size: 0.78rem;
}
/* Згруповані (перший/останній тест) + дельта/тестів — компактні, по центру */
.eld-staff-report__table th.eld-col--first,
.eld-staff-report__table th.eld-col--last,
.eld-staff-report__table td.eld-col--first,
.eld-staff-report__table td.eld-col--last { text-align: center; white-space: nowrap; }
.eld-staff-report__table thead th:last-child,
.eld-staff-report__table tbody td:last-child,            /* Тестів */
.eld-staff-report__table thead th:nth-last-child(2),
.eld-staff-report__table tbody td:nth-last-child(2) {    /* Дельта */
    text-align: center;
}
.eld-staff-report__table .eld-sort-link { gap: 2px; }

/* Delta */
.eld-delta {
    font-weight: 700;
    font-size: 1rem;
}

.eld-delta--up   { color: #16a34a; }
.eld-delta--down { color: #dc2626; }
.eld-delta--same { color: #9ca3af; }

/* ── Feedback button ── */
.eld-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.eld-feedback-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.eld-feedback-btn__icon {
    font-size: 1rem;
    line-height: 1;
}

/* Dashboard title row with feedback button */
.eld-dashboard__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.eld-dashboard__title-row .eld-dashboard__title {
    margin-bottom: 0;
}

/* ── Feedback modal ── */
.eld-feedback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.eld-feedback-modal {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 460px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.eld-feedback-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.eld-feedback-modal__close:hover {
    color: #374151;
    background: #f3f4f6;
}

.eld-feedback-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
}

.eld-feedback-modal__section-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 20px;
}

.eld-feedback-modal__stars {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.eld-star {
    background: none;
    border: none;
    font-size: 2rem;
    color: #d1d5db;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.1s, transform 0.1s;
}

.eld-star:hover,
.eld-star--active {
    color: #f59e0b;
    transform: scale(1.15);
}

.eld-feedback-modal__stars-hint {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0 0 16px;
}

.eld-feedback-modal__textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9375rem;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 16px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.eld-feedback-modal__textarea:focus {
    outline: none;
    border-color: #6366f1;
}

.eld-feedback-modal__status {
    margin-top: 10px;
    font-size: 0.875rem;
    min-height: 1.2em;
}

.eld-feedback-modal__status--ok  { color: #16a34a; }
.eld-feedback-modal__status--err { color: #dc2626; }

body.eld-no-scroll { overflow: hidden; }

/* ── Feedback report ── */
.eld-feedback-report__avg-stars {
    color: #f59e0b;
    font-size: 1rem;
    margin-left: 4px;
}

.eld-feedback-report__stars {
    white-space: nowrap;
    font-size: 1rem;
}

.eld-feedback-report__stars-filled { color: #f59e0b; }
.eld-feedback-report__stars-empty  { color: #d1d5db; }

.eld-feedback-report__comment {
    font-size: 0.875rem;
    color: #374151;
    width: 100%;
}

.eld-feedback-report .eld-staff-report__table th:nth-child(1),
.eld-feedback-report .eld-staff-report__table td:nth-child(1) { width: 120px; white-space: nowrap; }

.eld-feedback-report .eld-staff-report__table th:nth-child(2),
.eld-feedback-report .eld-staff-report__table td:nth-child(2) { width: 160px; }

.eld-feedback-report .eld-staff-report__table th:nth-child(3),
.eld-feedback-report .eld-staff-report__table td:nth-child(3) { width: 150px; white-space: nowrap; }

.eld-feedback-report .eld-staff-report__table th:nth-child(4),
.eld-feedback-report .eld-staff-report__table td:nth-child(4) { width: 100px; white-space: nowrap; }

/* ── Sortable column headers ── */
.eld-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.eld-sort-link:hover {
    text-decoration: underline;
}

.eld-sort-icon {
    font-size: 0.75rem;
    line-height: 1;
}

.eld-sort-icon--idle  { color: #d1d5db; }
.eld-sort-icon--asc   { color: #2563eb; }
.eld-sort-icon--desc  { color: #2563eb; }

/* ── Results Report ── */
.eld-results-report__student-row {
    background: #f0fdf4;
}

.eld-results-report__student-row:hover {
    background: #dcfce7 !important;
}

.eld-results-report__school-col {
    text-align: center;
}

.eld-results-report__school-badge {
    color: #16a34a;
    font-weight: 700;
    font-size: 1rem;
}

.eld-results-report__no-school {
    color: #d1d5db;
}



/* ── Table scroll arrows ── */

.eld-dashboard__history-scroll-wrap {
    position: relative;
    overflow: visible;
}

.eld-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4f46e5;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}

.eld-scroll-arrow:hover {
    background: #f5f3ff;
    border-color: #a5b4fc;
}

.eld-scroll-arrow--left  { left: -20px; }
.eld-scroll-arrow--right { right: -20px; }

/* ── Mobile: compact dashboard blocks ── */

@media ( max-width: 400px ) {
    .eld-dashboard__block {
        padding: 16px;
        /* overflow: hidden removed — it clips absolutely positioned tooltips */
    }

    .eld-dashboard__history-scroll-wrap {
        overflow: hidden;  /* clip negative-margin scroll, not the whole block */
    }

    .eld-dashboard__history-scroll {
        margin: 0 -16px;
        padding: 0 16px;
    }

    .eld-scroll-arrow--left  { left: -12px; }
    .eld-scroll-arrow--right { right: -12px; }

    .eld-goal-row .eld-progress-period {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }
}