/* ============================================================
   LEARN · LMS REDESIGN 2026
   Шар дизайн-системи освітнього порталу. Грузиться ОСТАННІМ
   після cabinet.css + learn.css і перевизначає каскад через
   селектори `.learn-body .X` (0,2,0) > одиночні класи (0,1,0).
   Бренд НЕ змінюється: navy #1a365d / #1e3a5f + gold #d4af37.
   Логіка, маршрути, імена полів форм та JS-хуки не зачіпаються.
   ============================================================ */

.learn-body,
.learn-login-page {
    --ln-navy:        #1a365d;
    --ln-navy-2:      #1e3a5f;
    --ln-navy-deep:   #152a47;
    --ln-gold:        #d4af37;
    --ln-gold-deep:   #b8941f;
    --ln-gold-soft:   rgba(212, 175, 55, 0.14);
    --ln-gold-line:   rgba(212, 175, 55, 0.45);

    --ln-bg:          #eef1f6;
    --ln-card:        #ffffff;
    --ln-border:      #e2e8f0;
    --ln-border-strong:#d4dbe6;
    --ln-text:        #1f2937;
    --ln-text-2:      #475569;
    --ln-muted:       #6b7280;

    --ln-radius:      10px;
    --ln-radius-lg:   16px;
    --ln-radius-pill: 999px;

    --ln-shadow-sm:   0 1px 2px rgba(26, 54, 93, 0.06);
    --ln-shadow:      0 4px 16px rgba(26, 54, 93, 0.08);
    --ln-shadow-lg:   0 14px 40px rgba(26, 54, 93, 0.14);

    --ln-ease:        cubic-bezier(.4, 0, .2, 1);

    background: var(--ln-bg);
}

.learn-body *,
.learn-login-page * { box-sizing: border-box; }

.learn-body .container { max-width: 1180px; }

/* ════════════════════════════════════════════════
   1. LMS-ОБОЛОНКА: бічна навігація + topbar + main
════════════════════════════════════════════════ */
.learn-body { min-height: 100vh; }
.learn-body.learn-no-scroll { overflow: hidden; }

.learn-sidebar {
    --side-w: 266px;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--side-w);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 50% at 0% 0%, rgba(212, 175, 55, .10), transparent 60%),
        linear-gradient(185deg, #1e3a5f 0%, #16263f 100%);
    border-right: 1px solid rgba(212, 175, 55, .22);
    box-shadow: 4px 0 24px rgba(15, 28, 48, .14);
}

/* Бренд */
.learn-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.learn-sidebar-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    padding: 3px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
}

.learn-sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.learn-sidebar-brand-text strong { color: #fff; font-size: .98rem; font-weight: 700; }
.learn-sidebar-brand-text small {
    color: var(--ln-gold);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Навігація */
.learn-nav {
    flex: 1;
    overflow-y: auto;
    padding: .85rem .7rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.learn-nav-group { display: flex; flex-direction: column; gap: .15rem; }

.learn-nav-label {
    padding: 0 .7rem .35rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.learn-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: background .16s var(--ln-ease), color .16s var(--ln-ease);
}

.learn-nav-item svg { flex-shrink: 0; opacity: .85; }
.learn-nav-item span { flex: 1; min-width: 0; }

.learn-nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.learn-nav-item.is-active {
    background: linear-gradient(90deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .07));
    color: #fff;
}
.learn-nav-item.is-active svg { opacity: 1; color: var(--ln-gold); }
.learn-nav-item.is-active::before {
    content: "";
    position: absolute;
    left: -.7rem; top: 50%;
    width: 4px; height: 22px;
    transform: translateY(-50%);
    border-radius: 0 4px 4px 0;
    background: var(--ln-gold);
}

.learn-nav-item.is-disabled {
    color: rgba(255, 255, 255, .38);
    cursor: default;
}
.learn-nav-item.is-disabled:hover { background: transparent; color: rgba(255, 255, 255, .38); }

.learn-nav-soon {
    flex: 0 0 auto;
    font-size: .6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, .16);
    color: var(--ln-gold);
}

.learn-nav-logout { color: #f4c9c9; }
.learn-nav-logout:hover { background: rgba(220, 80, 80, .2); color: #fff; }

/* Блок користувача */
.learn-sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.learn-user-avatar {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: .95rem;
    font-weight: 800;
    color: #3a2e07;
    background: linear-gradient(135deg, var(--ln-gold), var(--ln-gold-deep));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.learn-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.learn-user-meta strong {
    color: #fff; font-size: .85rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.learn-user-meta small { color: rgba(255, 255, 255, .55); font-size: .74rem; }

/* Overlay (мобільний drawer) */
.learn-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(15, 28, 48, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Оболонка контенту */
.learn-shell {
    margin-left: 266px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.learn-topbar {
    position: sticky;
    top: 0;
    z-index: 850;
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 58px;
    padding: 0 1.4rem;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--ln-border);
}

.learn-topbar-title {
    flex: 1;
    min-width: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ln-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.learn-role-chip {
    flex-shrink: 0;
    font-size: .74rem;
    font-weight: 700;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(30, 58, 95, .08);
    color: var(--ln-navy-2);
    border: 1px solid var(--ln-border);
}
.learn-role-chip.is-teacher {
    background: var(--ln-gold-soft);
    color: var(--ln-gold-deep);
    border-color: var(--ln-gold-line);
}

/* Бургер */
.learn-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px; height: 40px;
    margin-left: -.4rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 9px;
}
.learn-burger span {
    display: block;
    width: 20px; height: 2px;
    border-radius: 2px;
    background: var(--ln-navy);
    transition: transform .2s var(--ln-ease), opacity .2s var(--ln-ease);
}
.learn-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.learn-burger.is-open span:nth-child(2) { opacity: 0; }
.learn-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Main + inner */
.learn-body .learn-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.learn-main-inner {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.7rem 1.6rem 2.4rem;
}

.learn-foot {
    padding: 1.1rem 1.6rem;
    text-align: center;
    color: var(--ln-muted);
    font-size: .8rem;
    border-top: 1px solid var(--ln-border);
}
.learn-foot p { margin: .1rem 0; }
.learn-foot a { color: var(--ln-navy-2); text-decoration: none; font-weight: 600; }
.learn-foot a:hover { color: var(--ln-gold-deep); }

/* ────────────────────────────────────────────────
   3. Хлібні крихти
──────────────────────────────────────────────── */
.learn-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 1.1rem;
    font-size: .82rem;
    color: var(--ln-muted);
}

.learn-crumbs a {
    color: var(--ln-navy-2);
    text-decoration: none;
    font-weight: 500;
    padding: .12rem .15rem;
    border-radius: 5px;
    transition: color .15s var(--ln-ease);
}

.learn-crumbs a:hover { color: var(--ln-gold-deep); text-decoration: underline; }

.learn-crumbs .sep { color: var(--ln-border-strong); }

.learn-crumbs .current {
    color: var(--ln-text-2);
    font-weight: 600;
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Стара кнопка «← Назад» лишається сумісною, але приглушена */
.learn-body .learn-back-link {
    color: var(--ln-navy-2);
    font-weight: 500;
}

/* ────────────────────────────────────────────────
   4. Hero сторінки
──────────────────────────────────────────────── */
.learn-hero {
    position: relative;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(212, 175, 55, .10), transparent 55%),
        linear-gradient(180deg, #ffffff, #fbfcfe);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    padding: 1.05rem 1.25rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--ln-shadow-sm);
    overflow: hidden;
}

.learn-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ln-gold), var(--ln-gold-deep));
}

.learn-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ln-gold-deep);
    margin-bottom: .35rem;
}

.learn-body .learn-hero .learn-page-title,
.learn-hero-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ln-navy);
    letter-spacing: -.01em;
}

.learn-hero-sub {
    margin: .35rem 0 0;
    color: var(--ln-text-2);
    font-size: .9rem;
    max-width: none;
}

.learn-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.learn-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    border-radius: var(--ln-radius-pill);
    background: #fff;
    border: 1px solid var(--ln-border);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ln-text-2);
}

.learn-chip svg { color: var(--ln-navy-2); }

.learn-chip-gold {
    background: var(--ln-gold-soft);
    border-color: var(--ln-gold-line);
    color: var(--ln-gold-deep);
}

.learn-chip-gold svg { color: var(--ln-gold-deep); }

/* ────────────────────────────────────────────────
   5. Панель інструментів (фільтр + дії)
──────────────────────────────────────────────── */
.learn-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.learn-search {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.learn-search svg {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ln-muted);
    pointer-events: none;
}

.learn-search input {
    width: 100%;
    padding: .62rem .9rem .62rem 2.3rem;
    border: 1px solid var(--ln-border-strong);
    border-radius: var(--ln-radius);
    background: #fff;
    font-size: .92rem;
    color: var(--ln-text);
    transition: border-color .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}

.learn-search input::placeholder { color: var(--ln-muted); }

.learn-search input:focus {
    outline: none;
    border-color: var(--ln-navy-2);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}

.learn-toolbar-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

.learn-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    border: 1px solid var(--ln-border-strong);
    border-radius: var(--ln-radius);
    background: #fff;
    color: var(--ln-text-2);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--ln-ease), border-color .15s var(--ln-ease), color .15s var(--ln-ease);
}

.learn-ghost-btn:hover {
    background: #f8fafc;
    border-color: var(--ln-navy-2);
    color: var(--ln-navy);
}

/* ────────────────────────────────────────────────
   6. Картки курсів / предметів
──────────────────────────────────────────────── */
.learn-body .learn-course-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 1rem;
}

.learn-body .learn-course-cards-4col {
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    grid-auto-rows: 1fr;
}

.learn-body .learn-course-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.1rem;
    background: var(--ln-card);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-sm);
    color: var(--ln-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s var(--ln-ease), box-shadow .2s var(--ln-ease), border-color .2s var(--ln-ease);
}

.learn-body .learn-course-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ln-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .22s var(--ln-ease);
}

.learn-body .learn-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-shadow);
    border-color: var(--ln-gold-line);
}

.learn-body .learn-course-card:hover::before { transform: scaleY(1); }

.learn-body .learn-course-card:focus-visible {
    outline: none;
    border-color: var(--ln-navy-2);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .18);
}

.learn-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--ln-navy-2), var(--ln-navy));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 10px rgba(26, 54, 93, .22);
    letter-spacing: .01em;
}

.learn-card-icon-gold {
    background: linear-gradient(135deg, var(--ln-gold), var(--ln-gold-deep));
    color: #3a2e07;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 10px rgba(184, 148, 31, .3);
}

.learn-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.learn-body .learn-course-card-subject {
    font-weight: 650;
    font-size: .98rem;
    line-height: 1.3;
    color: var(--ln-navy);
}

.learn-card-meta {
    font-size: .8rem;
    color: var(--ln-muted);
}

.learn-card-arrow {
    flex-shrink: 0;
    color: var(--ln-border-strong);
    transition: color .18s var(--ln-ease), transform .18s var(--ln-ease);
}

.learn-body .learn-course-card:hover .learn-card-arrow {
    color: var(--ln-gold-deep);
    transform: translateX(2px);
}

.learn-empty-filter {
    display: none;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ln-muted);
    font-size: .92rem;
}

/* Результати пошуку дисциплін (дашборд) */
.learn-disc-results {
    background: var(--ln-card);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.4rem;
}
.learn-disc-results[hidden] { display: none; }

.learn-disc-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    text-decoration: none;
    color: var(--ln-text);
    border-bottom: 1px solid var(--ln-border);
    transition: background .15s var(--ln-ease);
}
.learn-disc-item:last-child { border-bottom: none; }
.learn-disc-item:hover { background: #f6f9fd; }

.learn-disc-icon { color: var(--ln-navy-2); flex-shrink: 0; }
.learn-disc-name {
    flex: 1;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ln-text);
}
.learn-disc-item:hover .learn-disc-name { color: var(--ln-navy); }
.learn-disc-item .learn-card-arrow { color: var(--ln-muted); flex-shrink: 0; }
.learn-disc-item:hover .learn-card-arrow { color: var(--ln-navy-2); }

.learn-disc-empty {
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--ln-muted);
    font-size: .9rem;
}
.learn-disc-empty[hidden] { display: none; }

/* ────────────────────────────────────────────────
   7. Сторінка предмета — оболонка з оглавленням
──────────────────────────────────────────────── */
.learn-body .subj-page { max-width: none; }

.subj-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Оглавлення (зміст тем) */
.subj-toc {
    position: sticky;
    top: calc(58px + 1.2rem);
    background: var(--ln-card);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-sm);
    overflow: hidden;
    max-height: calc(100vh - 58px - 2.6rem);
    display: flex;
    flex-direction: column;
}

.subj-toc-title {
    padding: .85rem 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ln-muted);
    border-bottom: 1px solid var(--ln-border);
    background: #fafbfd;
}

.subj-toc-list {
    list-style: none;
    margin: 0;
    padding: .4rem;
    overflow-y: auto;
}

.subj-toc-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ln-text-2);
    font-size: .86rem;
    line-height: 1.3;
    transition: background .15s var(--ln-ease), color .15s var(--ln-ease);
}

.subj-toc-link:hover { background: #f1f5fb; color: var(--ln-navy); }

.subj-toc-link.is-active {
    background: var(--ln-gold-soft);
    color: var(--ln-navy);
    font-weight: 600;
}

.subj-toc-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(30, 58, 95, .08);
    color: var(--ln-navy-2);
}

.subj-toc-link.is-active .subj-toc-num {
    background: var(--ln-gold);
    color: #3a2e07;
}

.subj-toc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subj-toc-count {
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--ln-muted);
}

.subj-content { min-width: 0; }

/* ────────────────────────────────────────────────
   8. Hero предмета
──────────────────────────────────────────────── */
.learn-body .subj-header { margin-bottom: 1.3rem; }

.learn-body .subj-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ln-navy);
    line-height: 1.25;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}

.learn-body .subj-meta {
    margin-top: .7rem;
    gap: .55rem;
}

.learn-body .subj-meta-item {
    padding: .28rem .65rem;
    border-radius: var(--ln-radius-pill);
    background: #fff;
    border: 1px solid var(--ln-border);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ln-text-2);
}

.learn-body .subj-meta-item svg { color: var(--ln-navy-2); }
.learn-body .subj-meta-sep { display: none; }

.learn-body .mgmt-teacher-badge {
    background: var(--ln-gold-soft);
    border-color: var(--ln-gold-line);
    color: var(--ln-gold-deep);
    font-weight: 700;
    font-size: .74rem;
    padding: .26rem .6rem;
    margin-left: 0;
}

/* ────────────────────────────────────────────────
   9. Інтерфейс викладача — на бренді (navy + gold)
   (структурні правила раніше були інлайном у subject.html
    — перенесені сюди як єдине джерело істини)
──────────────────────────────────────────────── */
.learn-body .mgmt-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.learn-body .mgmt-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

.learn-body .mgmt-panel { display: none; }
.learn-body .mgmt-panel.mgmt-open { display: block; }

.learn-body .mgmt-panel-title {
    font-weight: 700;
    text-transform: uppercase;
}

.learn-body .mgmt-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.learn-body .mgmt-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
    min-width: 170px;
}

.learn-body .mgmt-field label { font-size: .8rem; }

.learn-body .mgmt-field input[type="text"],
.learn-body .mgmt-field input[type="url"],
.learn-body .mgmt-field select,
.learn-body .mgmt-field input[type="file"] {
    background: #fff;
    color: var(--ln-text);
    width: 100%;
}

.learn-body .mgmt-submit {
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.learn-body .mgmt-hint {
    margin: .7rem 0 0;
    font-size: .78rem;
    color: var(--ln-muted);
}

.learn-body .mgmt-teacher-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--ln-radius-pill);
    border: 1px solid var(--ln-gold-line);
}

/* Кнопки редагування/видалення (показуються лише в режимі редагування) */
.learn-body .subj-file-edit,
.learn-body .subj-file-del,
.learn-body .subj-cat-edit,
.learn-body .subj-cat-del {
    background: none;
    border: none;
    cursor: pointer;
    padding: .2rem .35rem;
    color: var(--ln-muted);
    flex-shrink: 0;
    display: none;
    align-items: center;
    border-radius: 6px;
}
.learn-body .subj-file-edit:hover,
.learn-body .subj-cat-edit:hover { color: var(--ln-navy); background: var(--ln-gold-soft); }
.learn-body .subj-file-del:hover,
.learn-body .subj-cat-del:hover { color: #dc2626; background: #fee2e2; }

.learn-body .subj-edit-mode .subj-file-edit,
.learn-body .subj-edit-mode .subj-file-del,
.learn-body .subj-edit-mode .subj-cat-edit,
.learn-body .subj-edit-mode .subj-cat-del { display: inline-flex; }

/* Перетягування матеріалів: зміна порядку + переміщення між категоріями */
.learn-body .subj-edit-mode .subj-file { cursor: grab; }
.learn-body .subj-edit-mode .subj-file:active { cursor: grabbing; }
.learn-body .subj-file.is-dragging {
    opacity: .5;
    background: var(--ln-gold-soft);
    box-shadow: inset 3px 0 0 var(--ln-gold);
}

/* Плаваюча панель збереження розташування */
.learn-body .lm-orderbar {
    position: fixed;
    left: 50%;
    bottom: 1.4rem;
    transform: translate(-50%, 130%);
    z-index: 180;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem .7rem 1.1rem;
    background: #fff;
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-pill);
    box-shadow: var(--ln-shadow-lg);
    transition: transform .25s var(--ln-ease);
}
.learn-body .lm-orderbar.is-visible { transform: translate(-50%, 0); }
.learn-body .lm-orderbar > svg { color: var(--ln-gold-deep); flex-shrink: 0; }
.learn-body .lm-orderbar-text {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ln-navy);
    margin-right: .3rem;
}
.learn-body .lm-orderbar .lm-btn-ghost,
.learn-body .lm-orderbar .lm-btn-primary { border-radius: var(--ln-radius-pill); }

@media (max-width: 600px) {
    .learn-body .lm-orderbar {
        left: .8rem;
        right: .8rem;
        bottom: .8rem;
        transform: translateY(130%);
        justify-content: center;
        flex-wrap: wrap;
    }
    .learn-body .lm-orderbar.is-visible { transform: translateY(0); }
}

/* Модальне вікно редагування */
.learn-body .lm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    transition: opacity .18s var(--ln-ease);
}
.learn-body .lm-modal-overlay.is-open { opacity: 1; }
.learn-body .lm-modal-overlay[hidden] { display: none; }

.learn-body .lm-modal {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-lg);
    transform: translateY(8px) scale(.98);
    transition: transform .18s var(--ln-ease);
}
.learn-body .lm-modal-overlay.is-open .lm-modal { transform: translateY(0) scale(1); }

.learn-body .lm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--ln-border);
}
.learn-body .lm-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ln-navy);
}
.learn-body .lm-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ln-muted);
    padding: .25rem;
    border-radius: 6px;
    display: inline-flex;
    transition: color .15s var(--ln-ease), background .15s var(--ln-ease);
}
.learn-body .lm-modal-close:hover { color: var(--ln-navy); background: var(--ln-border); }

.learn-body #emForm { padding: 1.2rem 1.3rem 1.3rem; }
.learn-body .lm-field { margin-bottom: 1rem; }
.learn-body .lm-field[hidden] { display: none; }
.learn-body .lm-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ln-text-2);
    margin-bottom: .35rem;
}
.learn-body .lm-field input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--ln-border-strong);
    border-radius: var(--ln-radius);
    font-size: .92rem;
    color: var(--ln-text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}
.learn-body .lm-field input:focus {
    outline: none;
    border-color: var(--ln-gold);
    box-shadow: 0 0 0 3px var(--ln-gold-soft);
}

.learn-body .lm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.3rem;
}
.learn-body .lm-btn-ghost,
.learn-body .lm-btn-primary {
    padding: .55rem 1.1rem;
    border-radius: var(--ln-radius);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}
.learn-body .lm-btn-ghost {
    background: #fff;
    border-color: var(--ln-border-strong);
    color: var(--ln-text-2);
}
.learn-body .lm-btn-ghost:hover { background: var(--ln-bg); }
.learn-body .lm-btn-primary {
    background: var(--ln-navy-2);
    color: #fff;
}
.learn-body .lm-btn-primary:hover { background: var(--ln-navy-deep); box-shadow: 0 4px 12px rgba(26, 54, 93, .2); }

.learn-body .mgmt-bar {
    gap: .5rem;
    padding: .8rem;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-sm);
    margin-bottom: 1.2rem;
}

.learn-body .mgmt-btn {
    padding: .55rem 1rem;
    border-radius: var(--ln-radius);
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid var(--ln-border-strong);
    background: #fff;
    color: var(--ln-text-2);
    transition: background .15s var(--ln-ease), border-color .15s var(--ln-ease), color .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}

.learn-body .mgmt-btn:hover {
    opacity: 1;
    background: #f1f5fb;
    border-color: var(--ln-navy-2);
    color: var(--ln-navy);
}

.learn-body .mgmt-btn svg { color: var(--ln-navy-2); transition: color .15s var(--ln-ease); }
.learn-body .mgmt-btn:hover svg { color: var(--ln-navy); }

/* Головна дія — завантаження — заповнена navy */
.learn-body .mgmt-btn-upload {
    background: var(--ln-navy-2);
    border-color: var(--ln-navy-2);
    color: #fff;
    margin-right: auto;
}
.learn-body .mgmt-btn-upload svg { color: #fff; }
.learn-body .mgmt-btn-upload:hover {
    background: var(--ln-navy-deep);
    border-color: var(--ln-navy-deep);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 54, 93, .22);
}
.learn-body .mgmt-btn-upload:hover svg { color: #fff; }

.learn-body .mgmt-btn-link,
.learn-body .mgmt-btn-cat { background: #fff; }

/* Режим редагування — золотий акцент при активації */
.learn-body .mgmt-btn-edit { margin-left: auto; }
.learn-body .mgmt-btn-edit.is-active {
    background: var(--ln-gold);
    border-color: var(--ln-gold-deep);
    color: #3a2e07;
}
.learn-body .mgmt-btn-edit.is-active svg { color: #3a2e07; }

/* Панелі */
.learn-body .mgmt-panel {
    background: #fff;
    border: 1px solid var(--ln-border);
    border-left: 3px solid var(--ln-gold);
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-sm);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
}

.learn-body .mgmt-panel-title {
    color: var(--ln-navy);
    font-size: .76rem;
    letter-spacing: .08em;
    margin-bottom: .9rem;
}

.learn-body .mgmt-field label { color: var(--ln-text-2); font-weight: 600; }

.learn-body .mgmt-field input[type="text"],
.learn-body .mgmt-field input[type="url"],
.learn-body .mgmt-field select {
    padding: .55rem .7rem;
    border: 1px solid var(--ln-border-strong);
    border-radius: 8px;
    font-size: .88rem;
    transition: border-color .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}

.learn-body .mgmt-field input:focus,
.learn-body .mgmt-field select:focus {
    outline: none;
    border-color: var(--ln-navy-2);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}

.learn-body .mgmt-field input[type="file"] {
    padding: .5rem;
    border: 1px dashed var(--ln-border-strong);
    border-radius: 8px;
    background: #fafbfd;
    cursor: pointer;
}

.learn-body .mgmt-submit {
    padding: .58rem 1.1rem;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    background: var(--ln-navy-2);
    transition: background .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}
.learn-body .mgmt-submit:hover { background: var(--ln-navy-deep); box-shadow: 0 4px 12px rgba(26, 54, 93, .2); }
.learn-body .mgmt-submit-green { background: #15803d; }
.learn-body .mgmt-submit-green:hover { background: #126b33; }
.learn-body .mgmt-submit-purple { background: var(--ln-navy-2); }
.learn-body .mgmt-submit-purple:hover { background: var(--ln-navy-deep); }

/* ────────────────────────────────────────────────
   10. Акордеон категорій (теми)
──────────────────────────────────────────────── */
.learn-body .subj-cats { gap: .7rem; }

.learn-body .subj-cat {
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    box-shadow: var(--ln-shadow-sm);
    transition: box-shadow .2s var(--ln-ease), border-color .2s var(--ln-ease);
    scroll-margin-top: calc(58px + 1rem);
}

.learn-body .subj-cat:hover { box-shadow: var(--ln-shadow); }

.learn-body .subj-cat.subj-cat-open { border-color: var(--ln-gold-line); }

.learn-body .subj-cat-head {
    padding: .95rem 1.1rem;
    gap: .85rem;
}

.learn-body .subj-cat-head:hover { background: #f8fafc; }

.learn-body .subj-cat-idx {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ln-navy-2), var(--ln-navy));
    font-size: .82rem;
    box-shadow: 0 3px 8px rgba(26, 54, 93, .2);
}

.learn-body .subj-cat-open .subj-cat-idx {
    background: linear-gradient(135deg, var(--ln-gold), var(--ln-gold-deep));
    color: #3a2e07;
}

.learn-body .subj-cat-name {
    font-size: .98rem;
    font-weight: 650;
    color: var(--ln-navy);
}

.learn-body .subj-cat-count {
    background: rgba(30, 58, 95, .08);
    color: var(--ln-navy-2);
    padding: .22rem .6rem;
    font-weight: 700;
}

.learn-body .subj-cat-open .subj-cat-count {
    background: var(--ln-gold-soft);
    color: var(--ln-gold-deep);
}

.learn-body .subj-cat-arrow { color: var(--ln-muted); }

/* ────────────────────────────────────────────────
   11. Рядки файлів + іконографіка типів
──────────────────────────────────────────────── */
.learn-body .subj-file {
    padding: .7rem 1.1rem .7rem 1rem;
    gap: .8rem;
    min-height: 56px;
}

.learn-body .subj-file:hover { background: #f6f9fd; }

.learn-body .subj-file-badge {
    min-width: 42px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .12);
}

/* Конвенційні кольори типів файлів (впізнаваність, лишаємо) */
.learn-body .subj-ext-pdf  { background: #dc2626; }
.learn-body .subj-ext-doc,
.learn-body .subj-ext-docx { background: #1d4ed8; }
.learn-body .subj-ext-xls,
.learn-body .subj-ext-xlsx { background: #15803d; }
.learn-body .subj-ext-ppt,
.learn-body .subj-ext-pptx { background: #c2410c; }
.learn-body .subj-ext-zip,
.learn-body .subj-ext-rar  { background: #7c3aed; }
.learn-body .subj-ext-txt  { background: #475569; }
.learn-body .subj-ext-jpg,
.learn-body .subj-ext-jpeg,
.learn-body .subj-ext-png,
.learn-body .subj-ext-webp { background: #0e7490; }
.learn-body .subj-ext-mp4,
.learn-body .subj-ext-avi,
.learn-body .subj-ext-mov  { background: #be123c; }
.learn-body .subj-ext-file { background: #64748b; }

/* Посилання — на бренді (golden) замість фіолетового */
.learn-body .subj-ext-url {
    background: var(--ln-gold) !important;
    color: #3a2e07 !important;
}

.learn-body .subj-file-name {
    font-size: .92rem;
    color: var(--ln-text);
    font-weight: 500;
}

.learn-body .subj-file:hover .subj-file-name { color: var(--ln-navy); }

.learn-body .subj-file-action { color: var(--ln-navy-2); }

.learn-body .subj-cat-empty {
    padding: .85rem 1.1rem;
    color: var(--ln-muted);
    font-size: .85rem;
    font-style: italic;
}

/* Кнопки видалення в режимі редагування */
.learn-body .subj-file-del,
.learn-body .subj-cat-del { border-radius: 6px; }

/* ────────────────────────────────────────────────
   12. Порожні стани
──────────────────────────────────────────────── */
.learn-body .subj-empty {
    background: var(--ln-card);
    border: 1px dashed var(--ln-border-strong);
    border-radius: var(--ln-radius-lg);
    padding: 3rem 1.5rem;
}

.learn-body .subj-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto .9rem;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    background: var(--ln-gold-soft);
    border: 1px solid var(--ln-gold-line);
}

.learn-body .subj-empty p { color: var(--ln-text-2); font-size: .95rem; margin: 0; }

/* Скелетон для станів завантаження (опційно) */
.learn-skeleton {
    border-radius: var(--ln-radius);
    background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%);
    background-size: 400% 100%;
    animation: learn-shimmer 1.3s ease infinite;
}

@keyframes learn-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ────────────────────────────────────────────────
   13. Логін
──────────────────────────────────────────────── */
.learn-login-page {
    min-height: 100vh;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(212, 175, 55, .12), transparent 60%),
        linear-gradient(160deg, #16263f, #1e3a5f 55%, #16263f);
}

.learn-login-page .cabinet-login-container {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.learn-login-page .learn-login-box {
    width: 100%;
    max-width: 410px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    box-shadow: var(--ln-shadow-lg);
    padding: 2.2rem 2rem 1.8rem;
    position: relative;
    overflow: hidden;
}

.learn-login-page .learn-login-box::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ln-gold), var(--ln-gold-deep));
}

.learn-login-page .cabinet-login-header { text-align: center; margin-bottom: 1.4rem; }

.learn-login-page .cabinet-login-logo {
    height: 58px;
    width: auto;
    margin-bottom: .8rem;
    filter: drop-shadow(0 4px 10px rgba(26, 54, 93, .2));
}

.learn-login-page .cabinet-login-header h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ln-navy);
}

.learn-login-page .cabinet-login-header p {
    color: var(--ln-muted);
    font-size: .86rem;
    margin-top: .4rem;
    line-height: 1.45;
}

.learn-login-page .cabinet-form-group { margin-bottom: 1rem; }

.learn-login-page .cabinet-form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ln-text-2);
    margin-bottom: .35rem;
}

.learn-login-page .cabinet-login-form input {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--ln-border-strong);
    border-radius: 10px;
    font-size: .95rem;
    transition: border-color .15s var(--ln-ease), box-shadow .15s var(--ln-ease);
}

.learn-login-page .cabinet-login-form input:focus {
    outline: none;
    border-color: var(--ln-navy-2);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .14);
}

.learn-login-page .cabinet-btn-block {
    width: 100%;
    justify-content: center;
    padding: .8rem;
    border-radius: 10px;
    font-size: .98rem;
    font-weight: 600;
    background: var(--ln-navy-2);
    border-color: var(--ln-navy-2);
    margin-top: .3rem;
    transition: background .15s var(--ln-ease), box-shadow .15s var(--ln-ease), transform .12s var(--ln-ease);
}

.learn-login-page .cabinet-btn-block:hover {
    background: var(--ln-navy-deep);
    box-shadow: 0 8px 20px rgba(26, 54, 93, .28);
}

.learn-login-page .cabinet-btn-block:active { transform: translateY(1px); }

.learn-login-page .cabinet-login-footer {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ln-border);
    text-align: center;
    font-size: .85rem;
}

.learn-login-page .cabinet-login-footer a { color: var(--ln-navy-2); text-decoration: none; font-weight: 600; }
.learn-login-page .cabinet-login-footer a:hover { color: var(--ln-gold-deep); text-decoration: underline; }

/* ────────────────────────────────────────────────
   14. Flash-повідомлення
──────────────────────────────────────────────── */
.learn-body .cabinet-flash-message {
    border-radius: var(--ln-radius);
    border-left-width: 4px;
    box-shadow: var(--ln-shadow-sm);
}

/* ────────────────────────────────────────────────
   15. Доступність — фокус
──────────────────────────────────────────────── */
.learn-body a:focus-visible,
.learn-body button:focus-visible,
.learn-body .subj-cat-head:focus-visible,
.learn-body .subj-toc-link:focus-visible {
    outline: 2px solid var(--ln-gold-deep);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ────────────────────────────────────────────────
   16. Адаптив
──────────────────────────────────────────────── */
.learn-overlay[hidden] { display: none; }

/* ── Планшет/мобільний: бічна навігація → drawer ── */
@media (max-width: 1024px) {
    .learn-sidebar {
        transform: translateX(-100%);
        transition: transform .25s var(--ln-ease);
    }
    .learn-sidebar.is-open { transform: none; }
    .learn-shell { margin-left: 0; }
    .learn-burger { display: flex; }

    .subj-shell { grid-template-columns: 1fr; }
    .subj-toc {
        position: static;
        max-height: none;
        margin-bottom: 1.2rem;
    }
    .subj-toc-list { max-height: 240px; }
}

@media (max-width: 768px) {
    .learn-main-inner { padding: 1.2rem 1.05rem 2rem; }
    .learn-topbar { padding: 0 1rem; }
    .learn-body .learn-course-cards,
    .learn-body .learn-course-cards-4col { grid-template-columns: 1fr; }
    .learn-body .learn-course-cards-4col { grid-auto-rows: auto; }
    .learn-hero { padding: .95rem 1.05rem; }
    .learn-body .learn-hero .learn-page-title,
    .learn-hero-title { font-size: 1.2rem; }
    .learn-body .subj-title { font-size: 1.3rem; }
    .learn-toolbar-actions { width: 100%; }
    .learn-toolbar-actions .learn-ghost-btn { flex: 1; justify-content: center; }
    .learn-body .mgmt-btn-upload,
    .learn-body .mgmt-btn-edit { margin: 0; }
}

@media (max-width: 480px) {
    .learn-body .learn-course-card { padding: .9rem; gap: .7rem; }
    .learn-card-icon { width: 42px; height: 42px; }
    .learn-role-chip { display: none; }
    .learn-progress-hero { flex-direction: column; align-items: flex-start; }
}

/* ────────────────────────────────────────────────
   17. Зменшена анімація
──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .learn-body *,
    .learn-body *::before,
    .learn-body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}