/* ── Knowledge Lecture pages ─────────────────────────────────────────────── */
/* Reuses .subj-hero, .grade-group, .grade-group-head etc. from subject.css   */

/* ── Index page hero ─────────────────────────────────────────────────────── */
.lec-idx-hero {
    position: relative; margin-top: -64px; padding: 100px 0 80px;
    background: linear-gradient(180deg, #f5f0ff 0%, #ede4ff 20%, #f8f5ff 60%, #faf8ff 100%);
    overflow: hidden;
}
/* main content — white backdrop below hero */
.lec-idx-main { padding: 60px 0 80px; background: #fff; }
.lec-idx-bg-shape { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* decorative dots — randomly scattered */
.lec-idx-dots { position: absolute; inset: 0; pointer-events: none; }
.lec-idx-dots span {
    position: absolute; border-radius: 50%; background: rgba(155,89,182,0.1);
}
.lec-idx-dots span:nth-child(1)  { width:6px;height:6px;top:12%;left:8% }
.lec-idx-dots span:nth-child(2)  { width:4px;height:4px;top:22%;left:22% }
.lec-idx-dots span:nth-child(3)  { width:8px;height:8px;top:10%;left:72% }
.lec-idx-dots span:nth-child(4)  { width:5px;height:5px;top:45%;left:90% }
.lec-idx-dots span:nth-child(5)  { width:7px;height:7px;top:65%;left:6% }
.lec-idx-dots span:nth-child(6)  { width:5px;height:5px;top:55%;left:55% }
.lec-idx-dots span:nth-child(7)  { width:6px;height:6px;top:78%;left:82% }
.lec-idx-dots span:nth-child(8)  { width:4px;height:4px;top:35%;left:35% }
.lec-idx-dots span:nth-child(9)  { width:8px;height:8px;top:88%;left:38% }
.lec-idx-dots span:nth-child(10) { width:5px;height:5px;top:18%;left:48% }

.lec-idx-hero-body { display: flex; align-items: center; gap: 48px; position: relative; z-index: 1; }
.lec-idx-hero-text { flex: 1 1 50%; min-width: 0; }
.lec-idx-tag {
    display: inline-block; padding: 5px 16px; border-radius: var(--pk-radius-pill);
    font-size: 13px; font-weight: 700; background: rgba(155,89,182,0.1); color: var(--pk-purple);
    margin-bottom: 18px; letter-spacing: 0.5px;
}
.lec-idx-hero-text h1 {
    font-size: 46px; font-weight: 900; line-height: 1.2; margin-bottom: 14px; letter-spacing: -1px;
}
.lec-idx-hero-text h1 em {
    background: linear-gradient(135deg, var(--pk-purple), #7c3aed);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-style: normal;
}
.lec-idx-hero-text p { font-size: 15px; color: var(--pk-text-soft); line-height: 1.7; }
.lec-idx-stats { display: flex; gap: 36px; margin-top: 22px; }
.lec-idx-stat { display: flex; align-items: baseline; gap: 6px; }
.lec-idx-stat em {
    font-size: 36px; font-weight: 900; font-style: normal;
    background: linear-gradient(135deg, var(--pk-purple), #7c3aed);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.lec-idx-stat span { font-size: 14px; color: var(--pk-text-soft); }

/* hero visual — layered offset cards */
.lec-idx-hero-visual { flex: 0 0 260px; position: relative; height: 220px; }
.lec-idx-visual-card {
    position: absolute; border-radius: 20px; background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lec-idx-visual-card span { font-size: 28px; }
.lec-idx-visual-card small { font-size: 11px; color: var(--pk-text-soft); font-weight: 600; }
.lec-idx-visual-card--1 {
    width: 120px; height: 120px; top: 5px; left: 10px; z-index: 3;
    transform: rotate(-5deg);
}
.lec-idx-visual-card--2 {
    width: 96px; height: 96px; top: 85px; left: 115px; z-index: 2;
    transform: rotate(8deg);
}
.lec-idx-visual-card--3 {
    width: 84px; height: 84px; top: 20px; left: 140px; z-index: 1;
    transform: rotate(-3deg);
}
.lec-idx-visual-card:hover {
    transform: rotate(0deg) scale(1.08);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12); z-index: 10;
}

/* ── Index section header (left-aligned variant) ─────────────────────────── */
.pk-section-header--left { text-align: left; }
.pk-section-header--left .pk-section-subtitle { margin-left: 0; margin-right: auto; }

/* ── Index subject grid body ─────────────────────────────────────────────── */
.lec-idx-body { margin-top: 80px; }
.lec-idx-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 16px;
}
/* featured card (math) — spans 2 rows */
.lec-idx-card--featured { grid-row: 1 / 3; }
/* wide card (politics) — spans 2 cols on last row */
.lec-idx-card--wide { grid-column: 4 / 6; }

.lec-idx-card {
    position: relative; display: flex; flex-direction: column;
    justify-content: flex-end; min-height: 160px; padding: 24px;
    border-radius: 20px; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #f0f0f0;
    overflow: hidden; transition: all 0.3s;
}
.lec-idx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.1);
    border-color: var(--c, #ddd);
}
/* decorative circle inside card */
.lec-idx-card-shape {
    position: absolute; top: -30px; right: -20px;
    width: 120px; height: 120px; border-radius: 50%;
    background: var(--b, #f5f5f5); opacity: 0.5; transition: all 0.4s;
}
.lec-idx-card:hover .lec-idx-card-shape { transform: scale(1.4); opacity: 0.7; }
/* featured card bigger shape */
.lec-idx-card--featured .lec-idx-card-shape {
    width: 200px; height: 200px; top: -50px; right: -50px;
}

.lec-idx-card-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 14px;
}
.lec-idx-card-text { flex: 1; min-width: 0; }
.lec-idx-card-icon {
    width: 52px; height: 52px; border-radius: 14px; display: flex;
    align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.lec-idx-card--featured .lec-idx-card-inner {
    flex-direction: column; align-items: flex-start; gap: 12px;
}
.lec-idx-card--featured .lec-idx-card-icon {
    width: 72px; height: 72px; border-radius: 20px; font-size: 32px;
}
.lec-idx-card h3 { font-size: 16px; font-weight: 800; }
.lec-idx-card--featured h3 { font-size: 22px; }
.lec-idx-card-count { font-size: 13px; color: var(--pk-text-soft); }
.lec-idx-card-arrow {
    font-size: 18px; color: #ccc; flex-shrink: 0;
    transition: all 0.3s;
}
.lec-idx-card:hover .lec-idx-card-arrow {
    color: var(--c, var(--pk-purple)); transform: translate(3px, -3px);
}
.lec-idx-card--featured .lec-idx-card-arrow { font-size: 24px; }
/* colored bottom bar */
.lec-idx-card-bar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lec-idx-card:hover .lec-idx-card-bar { transform: scaleX(1); }
.lec-idx-card--featured .lec-idx-card-bar { height: 4px; }

/* ── Recent lectures ─────────────────────────────────────────────────────── */
.lec-idx-recent { margin-top: 80px; }
.lec-idx-recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lec-idx-recent-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px; border-radius: 16px; text-decoration: none; color: inherit;
    background: rgba(255,255,255,0.7); backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.04); transition: all 0.2s;
}
.lec-idx-recent-card:hover {
    background: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.lec-idx-recent-subj {
    display: inline-block; align-self: flex-start;
    padding: 2px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700; color: #fff;
    background: var(--pk-purple);
}
.lec-idx-recent-card h4 {
    font-size: 15px; font-weight: 700; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lec-idx-recent-card p {
    font-size: 13px; color: var(--pk-text-soft); line-height: 1.5; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lec-idx-recent-date { font-size: 11px; color: #ccc; margin-top: auto; }

/* ── Highlights ──────────────────────────────────────────────────────────── */
.lec-idx-highlights { margin-top: 80px; }
.lec-idx-hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lec-idx-hl-card {
    padding: 28px 22px; border-radius: 18px;
    background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.2s;
}
.lec-idx-hl-card:hover {
    background: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.lec-idx-hl-icon { font-size: 32px; display: block; margin-bottom: 12px; }
.lec-idx-hl-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.lec-idx-hl-card p { font-size: 13px; color: var(--pk-text-soft); line-height: 1.6; margin: 0; }

/* ── Big numbers ─────────────────────────────────────────────────────────── */
.lec-idx-numbers {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    margin-top: 80px; padding: 36px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(155,89,182,0.04), rgba(77,150,255,0.04));
    border: 1px solid rgba(0,0,0,0.03);
}
.lec-idx-num-card { text-align: center; }
.lec-idx-num-val {
    display: block; font-size: 40px; font-weight: 900;
    background: linear-gradient(135deg, var(--pk-purple), #7c3aed);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.lec-idx-num-lbl { font-size: 14px; color: var(--pk-text-soft); margin-top: 4px; display: block; }

/* ── Popular lectures ────────────────────────────────────────────────────── */
.lec-idx-popular { margin-top: 80px; }
.lec-idx-popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lec-idx-popular-card {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 20px; border-radius: 16px; text-decoration: none; color: inherit;
    background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.2s;
}
.lec-idx-popular-card:hover {
    background: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.lec-idx-popular-rank { font-size: 28px; flex-shrink: 0; line-height: 1; }
.lec-idx-popular-info { min-width: 0; }
.lec-idx-popular-subj {
    font-size: 11px; color: var(--pk-text-soft); font-weight: 600;
    display: block; margin-bottom: 4px;
}
.lec-idx-popular-info h4 {
    font-size: 14px; font-weight: 700; line-height: 1.4; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lec-idx-popular-meta { font-size: 12px; color: #ccc; }

/* ── Learning path timeline ──────────────────────────────────────────────── */
.lec-idx-path { margin-top: 80px; }
.lec-idx-path-timeline {
    display: flex; gap: 0;
    border-radius: 20px; overflow: hidden;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.04);
}
.lec-idx-path-phase { flex: 1; padding: 28px 24px; }
.lec-idx-path-phase:nth-child(1) { background: rgba(107,203,119,0.06); }
.lec-idx-path-phase:nth-child(2) { background: rgba(77,150,255,0.05); }
.lec-idx-path-phase:nth-child(3) { background: rgba(255,107,107,0.05); }
.lec-idx-path-phase-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lec-idx-path-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.lec-idx-path-phase-head h4 { font-size: 16px; font-weight: 800; margin: 0; }
.lec-idx-path-grades { display: flex; gap: 8px; flex-wrap: wrap; }
.lec-idx-path-chip {
    display: inline-block; padding: 8px 18px; border-radius: var(--pk-radius-pill);
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: var(--pk-text-soft); background: rgba(255,255,255,0.7);
    transition: all 0.2s;
}
.lec-idx-path-chip:hover {
    background: var(--pc); color: #fff;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.lec-idx-cta { margin-top: 80px; }
.lec-idx-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 40px 36px; border-radius: 24px;
    background: linear-gradient(135deg, var(--pk-purple), #7c3aed);
    color: #fff;
}
.lec-idx-cta-inner h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.lec-idx-cta-inner p { font-size: 15px; opacity: 0.85; margin: 0; }

/* ── Index responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lec-idx-hero-body { flex-direction: column; gap: 28px; }
    .lec-idx-hero-text h1 { font-size: 30px; }
    .lec-idx-hero-visual { flex: 0 0 auto; width: 100%; height: 150px; }
    .lec-idx-visual-card--1 { width:90px;height:90px;top:0;left:5px }
    .lec-idx-visual-card--2 { width:70px;height:70px;top:55px;left:80px }
    .lec-idx-visual-card--3 { width:60px;height:60px;top:10px;left:105px }
    .lec-idx-stats { gap: 24px; }
    .lec-idx-stat em { font-size: 26px; }
    .lec-idx-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .lec-idx-card--featured { grid-row: auto; grid-column: 1 / -1; min-height: 120px; }
    .lec-idx-card--wide { grid-column: auto; }
    .lec-idx-card--featured .lec-idx-card-inner { flex-direction: row; align-items: center; }
    .lec-idx-card--featured .lec-idx-card-icon { width:52px;height:52px;border-radius:14px;font-size:24px }
    .lec-idx-card--featured h3 { font-size: 16px; }
    .lec-idx-recent-grid { grid-template-columns: repeat(2, 1fr); }
    .lec-idx-hl-grid { grid-template-columns: repeat(2, 1fr); }
    .lec-idx-recent { margin-top: 60px; }
    .lec-idx-highlights { margin-top: 60px; }
    .lec-idx-numbers { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 28px 20px; }
    .lec-idx-num-val { font-size: 32px; }
    .lec-idx-popular-grid { grid-template-columns: repeat(2, 1fr); }
    .lec-idx-popular { margin-top: 60px; }
}

/* ── Lecture hero ────────────────────────────────────────────────────────── */
.lec-hero {
    position: relative; margin-top: -64px; padding: 120px 0 64px;
    background: linear-gradient(160deg, var(--lec-bg, #f5f5f5) 0%, #fff 55%);
    overflow: hidden;
}
.lec-hero-shape {
    position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.06;
    background: var(--lec-color, #6BCB77);
}
.lec-hero-shape--1 { width: 360px; height: 360px; top: -120px; right: -80px; }
.lec-hero-shape--2 { width: 200px; height: 200px; bottom: -40px; left: -40px; }
.lec-hero-body {
    display: flex; align-items: center; gap: 56px; position: relative; z-index: 1;
}
.lec-hero-text { flex: 1; min-width: 0; }
.lec-hero-text h1 { font-size: 40px; font-weight: 900; margin: 12px 0; }
.lec-hero-text p { font-size: 16px; color: var(--pk-text-soft); max-width: 480px; line-height: 1.7; }

/* Hero stats row */
.lec-hero-stats { display: flex; gap: 32px; margin-top: 24px; }
.lec-hero-stat { display: flex; align-items: baseline; gap: 6px; }
.lec-hero-stat-num { font-size: 28px; font-weight: 900; color: var(--lec-color, var(--pk-coral)); }
.lec-hero-stat-label { font-size: 14px; color: var(--pk-text-soft); }

/* Hero visual — floating cards */
.lec-hero-visual {
    flex-shrink: 0; position: relative; width: 180px; height: 180px;
}
.lec-hero-card {
    position: absolute; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; border-radius: 20px;
    background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    font-size: 13px; font-weight: 700; color: var(--pk-text-soft);
    width: 120px; height: 120px; top: 30px; left: 30px; z-index: 2;
    animation: lecFloat 5s ease-in-out infinite;
}
.lec-hero-card-icon { font-size: 36px; }
.lec-hero-card--sm {
    width: 80px; height: 80px; top: 0; left: 100px; z-index: 1;
    animation-delay: 1.5s; border-radius: 16px;
}
.lec-hero-card--sm .lec-hero-card-icon { font-size: 28px; }
.lec-hero-card--xs {
    width: 64px; height: 64px; top: 100px; left: 0; z-index: 3;
    animation-delay: 3s; border-radius: 14px;
}
.lec-hero-card--xs .lec-hero-card-icon { font-size: 24px; }
@keyframes lecFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* legacy: kept for detail page */
.subj-hero-deco--lecture { position: relative; min-width: 140px; min-height: 140px; }
.lecture-hero-icon {
    font-size: 72px; display: flex; align-items: center; justify-content: center;
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.lec-stats-bar {
    display: flex; gap: 24px; margin-bottom: 40px;
    padding: 20px 28px; border-radius: 16px;
    background: var(--pk-bg); box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.lec-stat-item { display: flex; align-items: baseline; gap: 8px; }
.lec-stat-num { font-size: 28px; font-weight: 900; color: var(--pk-coral); }
.lec-stat-label { font-size: 14px; color: var(--pk-text-soft); }
.lec-stat-badge {
    padding: 4px 14px; border-radius: var(--pk-radius-pill);
    background: var(--pk-coral); color: #fff; font-weight: 700; font-size: 14px;
}

/* ── Difficulty badges ───────────────────────────────────────────────────── */
.lec-diff--easy { background: #e8f5e9; color: #2e7d32; }
.lec-diff--medium { background: #fff3e0; color: #e65100; }
.lec-diff--hard { background: #fce4ec; color: #c62828; }

/* ── List page: two-column layout ────────────────────────────────────────── */
.lec-list { padding: 40px 0 0; }
.lec-list-layout { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }

/* Left sidebar */
.lec-list-sidebar { position: sticky; top: 80px; }
.lec-list-sidebar-inner { display: flex; flex-direction: column; gap: 2px; }
.lec-list-sidebar-all {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 10px; text-decoration: none;
    font-size: 14px; font-weight: 700; color: var(--pk-text);
    background: var(--pk-bg); margin-bottom: 16px; transition: all 0.2s;
}
.lec-list-sidebar-all:hover { background: #eee; }
.lec-list-sidebar-all.active { background: var(--lec-color, var(--pk-purple)); color: #fff; }
.lec-list-sidebar-all.active .lec-list-sidebar-count { color: rgba(255,255,255,0.7); }

.lec-list-sidebar-group {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px 4px; font-size: 13px; font-weight: 700; color: var(--pk-text-soft);
}
.lec-list-sidebar-icon { font-size: 16px; }
.lec-list-sidebar-label { text-transform: uppercase; letter-spacing: 0.5px; }

.lec-list-sidebar-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px 8px 36px; border-radius: 8px; text-decoration: none;
    font-size: 14px; color: var(--pk-text-soft); transition: all 0.15s;
}
.lec-list-sidebar-link:hover { background: #f5f5f5; color: var(--pk-text); }
.lec-list-sidebar-link.active { background: rgba(0,0,0,0.04); color: var(--pk-text); font-weight: 700; }

.lec-list-sidebar-count {
    font-size: 11px; color: #ccc; font-weight: 500; min-width: 20px; text-align: right;
}

/* Tag cloud */
.lec-list-tag-cloud {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 0 14px; margin-top: 4px;
}
.lec-list-tag-chip {
    display: inline-block; padding: 3px 10px; border-radius: var(--pk-radius-pill);
    font-weight: 600; text-decoration: none; line-height: 1.4;
    color: var(--pk-text-soft); background: rgba(0,0,0,0.03);
    transition: all 0.15s;
}
.lec-list-tag-chip:hover { background: rgba(0,0,0,0.08); color: var(--pk-text); }
.lec-list-tag-chip.active {
    background: var(--lec-color, var(--pk-purple)); color: #fff;
}

/* Right main */

/* Card grid */
.lec-list-grid { display: flex; flex-direction: column; gap: 14px; }
.lec-list-card {
    display: flex; flex-direction: row; align-items: flex-start; gap: 20px;
    padding: 24px; border-radius: 16px; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #f0f0f0;
    transition: all 0.2s;
}
.lec-list-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lec-list-card:hover {
    border-color: var(--lec-color, #ddd);
    box-shadow: 2px 4px 16px rgba(0,0,0,0.05);
}
.lec-list-card-top { display: flex; align-items: center; gap: 8px; }
.lec-list-card-grade {
    padding: 3px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 700;
}
.lec-list-card-diff {
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700;
}
.lec-list-card h3 {
    font-size: 16px; font-weight: 800; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lec-list-card p {
    font-size: 13px; color: var(--pk-text-soft); line-height: 1.6; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lec-list-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lec-list-card-tags span {
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; background: rgba(0,0,0,0.04); color: var(--pk-text-soft);
}
.lec-list-card-foot {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #ccc; margin-top: auto;
}

@media (max-width: 768px) {
    .lec-list-layout { grid-template-columns: 1fr; }
    .lec-list-sidebar { position: static; }
    .lec-list-sidebar-inner { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .lec-list-sidebar-all { width: 100%; margin-bottom: 8px; }
    .lec-list-sidebar-group { display: none; }
    .lec-list-sidebar-link { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
    .lec-list-sidebar-link.active { background: var(--lec-color, var(--pk-purple)); color: #fff; }
    .lec-list-sidebar-link.active .lec-list-sidebar-count { color: rgba(255,255,255,0.7); }
    .lec-list-sidebar-count { display: none; }
    .lec-list-card { flex-direction: column; }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.lec-empty {
    text-align: center; padding: 80px 20px;
}
.lec-empty-icon { font-size: 64px; margin-bottom: 16px; }
.lec-empty h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.lec-empty p { font-size: 15px; color: var(--pk-text-soft); }

/* ── Detail page ─────────────────────────────────────────────────────────── */
.lec-detail-nav {
    margin-top: -64px; padding: 96px 0 0;
    background: var(--pk-bg); border-bottom: 1px solid #f0f0f0;
}
.lec-detail-nav .pk-container {
    display: flex; align-items: center; gap: 8px; padding: 16px 0; flex-wrap: wrap;
}
.lec-breadcrumb-sep { color: #ccc; font-size: 14px; }
.lec-breadcrumb-current { font-size: 14px; color: var(--pk-text-soft); font-weight: 600; }

.lec-article { padding: 40px 0 80px; }
.lec-article-layout {
    display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start;
}

/* ── Article header ──────────────────────────────────────────────────────── */
.lec-article-header { margin-bottom: 24px; }
.lec-article-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lec-badge {
    display: inline-block; padding: 4px 14px; border-radius: var(--pk-radius-pill);
    font-size: 13px; font-weight: 700;
}
.lec-badge--grade {
    background: var(--pk-sky); color: #fff;
}
.lec-badge--diff {
}
.lec-article-title {
    font-size: 32px; font-weight: 900; line-height: 1.3; margin-bottom: 12px;
}
.lec-article-summary {
    font-size: 16px; color: var(--pk-text-soft); line-height: 1.7; margin-bottom: 16px;
    padding-left: 16px; border-left: 3px solid var(--pk-mint);
}
.lec-article-meta {
    display: flex; gap: 16px; font-size: 14px; color: #bbb;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
.lec-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.lec-tag {
    padding: 4px 14px; border-radius: var(--pk-radius-pill);
    font-size: 13px; font-weight: 600;
    background: #f5f5f5; color: var(--pk-text-soft);
}

/* ── Content ─────────────────────────────────────────────────────────────── */
.lec-content {
    font-size: 16px; line-height: 1.9; color: var(--pk-text);
    margin-bottom: 40px;
}
.lec-content h2 { font-size: 24px; font-weight: 800; margin: 32px 0 16px; }
.lec-content h3 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; }
.lec-content p { margin-bottom: 16px; }
.lec-content ul, .lec-content ol { margin-bottom: 16px; padding-left: 24px; }
.lec-content li { margin-bottom: 8px; }
.lec-content img { max-width: 100%; border-radius: 12px; margin: 16px 0; }
.lec-content figure {
    margin: 28px 0; padding: 24px; text-align: center;
    background: #fafafa; border-radius: 14px; border: 1px solid #f0f0f0;
    overflow-x: auto;
}
.lec-content figure svg { display: block; margin: 0 auto; }
.lec-content figcaption {
    margin-top: 12px; font-size: 13px; color: var(--pk-text-soft);
    font-weight: 500;
}
/* KaTeX formula rendering */
.lec-content .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.lec-content .katex { font-size: 1.1em; }
.lec-content span.math { /* fallback: raw LaTeX before KaTeX renders */ }
.lec-content blockquote {
    border-left: 3px solid var(--pk-mint); padding: 12px 20px;
    margin: 20px 0; background: #fafafa; border-radius: 0 12px 12px 0;
    color: var(--pk-text-soft);
}
.lec-content code {
    background: #f5f5f5; padding: 2px 8px; border-radius: 4px;
    font-size: 0.9em; font-family: "SF Mono", "Fira Code", monospace;
}
.lec-content pre {
    background: #1e1e2e; color: #cdd6f4; padding: 20px; border-radius: 12px;
    overflow-x: auto; margin: 16px 0;
}
.lec-content table {
    width: 100%; border-collapse: collapse; margin: 16px 0;
}
.lec-content th, .lec-content td {
    padding: 10px 16px; border: 1px solid #eee; text-align: left;
}
.lec-content th { background: #fafafa; font-weight: 700; }
.lec-content .example {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-left: 4px solid #4caf50; padding: 16px 20px; margin: 20px 0;
    border-radius: 0 12px 12px 0;
}
.lec-content .solution {
    background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
    border-left: 4px solid #2196f3; padding: 16px 20px; margin: 16px 0 24px;
    border-radius: 0 12px 12px 0;
}
.lec-content .warning {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: #fff3e0; color: #e65100; font-weight: 700;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.lec-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid #f0f0f0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.lec-sidebar-card {
    background: #fff; border-radius: 16px; padding: 24px;
    border: 1px solid #f0f0f0; margin-bottom: 20px;
}
.lec-sidebar-title { font-size: 16px; font-weight: 800; margin-bottom: 16px; }

.lec-related-list { list-style: none; padding: 0; margin: 0; }
.lec-related-list li { margin-bottom: 8px; }
.lec-related-link {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--pk-text); padding: 8px;
    border-radius: 10px; transition: all 0.15s;
}
.lec-related-link:hover { background: #fafafa; }
.lec-related-diff {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.lec-related-diff.lec-diff--easy { background: #66bb6a; }
.lec-related-diff.lec-diff--medium { background: #ffa726; }
.lec-related-diff.lec-diff--hard { background: #ef5350; }
.lec-related-label {
    display: block; font-size: 14px; font-weight: 600; line-height: 1.3;
}
.lec-related-meta { font-size: 12px; color: #bbb; }

/* ── Subject mini grid ───────────────────────────────────────────────────── */
.lec-subject-mini-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lec-subject-mini-chip {
    padding: 6px 14px; border-radius: var(--pk-radius-pill);
    background: var(--pk-bg); font-size: 13px; font-weight: 600;
    color: var(--pk-text-soft); text-decoration: none; transition: all 0.15s;
}
.lec-subject-mini-chip:hover { background: var(--pk-mint); color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lec-hero-body { flex-direction: column; gap: 32px; }
    .lec-hero-text h1 { font-size: 28px; }
    .lec-hero-visual { width: 140px; height: 140px; }
    .lec-hero-card { width: 90px; height: 90px; top: 25px; left: 25px; }
    .lec-hero-card--sm { width: 64px; height: 64px; top: 0; left: 80px; }
    .lec-hero-card--xs { width: 50px; height: 50px; top: 80px; left: 0; }
    .lec-hero-stats { gap: 20px; }
    .lec-hero-stat-num { font-size: 22px; }
    .lec-stats-bar { display: none; }
    .lec-article-layout { grid-template-columns: 1fr; }
    .lec-article-sidebar { order: -1; }
    .lec-card-grid { grid-template-columns: 1fr; }
    .lec-article-title { font-size: 24px; }
    .subj-hero-deco--lecture { display: none; }
}