/**
 * learning.css — KAAI Learning Tab Styles
 * =========================================
 * Designed by: Johnny Black | KAAI v1.0
 */

/* ── Panel container ──────────────────────────────────────────────────────── */
#panel-learning {
    height: 100%;
    overflow: hidden;
}

.panel-container.active#panel-learning {
    display: flex;
    flex-direction: column;
}

/* ── Root layout ──────────────────────────────────────────────────────────── */
.ln-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
    font-family: var(--font-primary, 'Inter', sans-serif);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.ln-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    flex-shrink: 0;
}

.ln-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #e8e8f0);
}

.ln-subtitle {
    font-size: 12px;
    color: var(--text-muted, #666);
    margin-left: 8px;
}

.ln-header-actions {
    display: flex;
    gap: 8px;
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.ln-stats-bar {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ln-stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 110px;
}

.ln-stat-icon { font-size: 18px; }

.ln-stat-body {
    display: flex;
    flex-direction: column;
}

.ln-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #e8e8f0);
    line-height: 1.1;
}

.ln-stat-lbl {
    font-size: 10px;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Body: 2-column layout ────────────────────────────────────────────────── */
.ln-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Knowledge Impact Banner  (.ln-ki-*)
   Sits between the stat cards and the course body; shows KnowledgeImpactAnalyzer
   output:  health strip ▸ impact feed ▸ gap radar ▸ suggested actions
══════════════════════════════════════════════════════════════════════════════ */

.ln-ki-banner {
    border-top: 1px solid var(--border-color, #2a2a3a);
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    background: linear-gradient(135deg, #0d0d1a 0%, #12122a 100%);
    padding: 10px 20px 12px;
    flex-shrink: 0;
}

.ln-ki-loading {
    color: var(--text-muted, #666);
    font-size: 12px;
    padding: 6px 0;
}

/* Header row */
.ln-ki-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ln-ki-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #e8e8f0);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ln-ki-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ln-ki-ts {
    font-size: 10px;
    color: var(--text-muted, #555);
}

/* Status badge */
.ln-ki-status-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #333;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ln-ki-status-healthy         { color: #4ade80; border-color: #14532d; background: #052e16; }
.ln-ki-status-needs-attention { color: #fbbf24; border-color: #713f12; background: #1c1003; }
.ln-ki-status-no-data         { color: #888;    border-color: #333;    background: #111;    }

/* ── Health strip ────────────────────────────────────────────────────────── */
.ln-ki-health-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
}

/* Section divider label inside the health strip (🧠 / 📚) */
.ln-ki-strip-divider {
    font-size: 13px;
    color: #555;
    padding: 0 2px;
    user-select: none;
    flex-shrink: 0;
    line-height: 1;
}

.ln-ki-card {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0f0f20;
    border: 1px solid #2a2a3a;
    border-radius: 7px;
    padding: 5px 12px;
    min-width: 90px;
}

.ln-ki-card-icon { font-size: 15px; }

.ln-ki-card-body {
    display: flex;
    flex-direction: column;
}

.ln-ki-card-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #e8e8f0);
    line-height: 1.1;
}

.ln-ki-card-lbl {
    font-size: 9px;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Three-column impact grid ────────────────────────────────────────────── */
.ln-ki-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 10px;
}

.ln-ki-col {
    background: #0a0a18;
    border: 1px solid #1e1e30;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 90px;
    max-height: 160px;
    overflow-y: auto;
}

.ln-ki-col-title {
    font-size: 10px;
    font-weight: 700;
    color: #7c6fcd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Impact feed */
.ln-ki-feed-item,
.ln-ki-suggestion-item {
    font-size: 11px;
    color: #c0c0d8;
    padding: 3px 0;
    border-bottom: 1px solid #1a1a2a;
    line-height: 1.45;
}
.ln-ki-feed-item:last-child,
.ln-ki-suggestion-item:last-child { border-bottom: none; }

/* ── Smart suggestion cards (typed, gap-driven) ──────────────────────────── */
.ln-ki-suggestion-card {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 6px 8px;
    margin-bottom: 5px;
    border-radius: 5px;
    border-left: 3px solid transparent;
    background: #0f0f1a;
    font-size: 11px;
    line-height: 1.5;
}
.ln-ki-suggestion-card:last-child { margin-bottom: 0; }

/* 🎯 Gap-targeted: weak area matched to enrolled course */
.ln-ki-sug-gap {
    border-left-color: #e05252;
    background: #1a0f0f;
}
/* 📥 Harvest: un-ingested notes from a course */
.ln-ki-sug-harvest {
    border-left-color: #5293e0;
    background: #0f131a;
}
/* 🔍 Uncovered: weak area with no enrolled course */
.ln-ki-sug-uncovered {
    border-left-color: #e0a832;
    background: #1a160a;
}
/* 🧠 Memory ingest suggestions */
.ln-ki-sug-memory {
    border-left-color: #7c6fcd;
    background: #100f1a;
}

.ln-ki-sug-icon {
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ln-ki-sug-text {
    color: #c8c8e0;
    flex: 1;
    word-break: break-word;
}

/* Sub-source label inside the feed ("🧠 From Memory Ingest" / "📚 From Course Notes") */
.ln-ki-source-label {
    font-size: 9px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.ln-ki-feed-empty {
    font-size: 11px;
    color: #555;
    font-style: italic;
}

/* Per-note importance tinting inside the knowledge feed */
.ln-ki-note-critical  { color: #fca5a5; }
.ln-ki-note-important { color: #fde68a; }
.ln-ki-note-quiz      { color: #c4b5fd; }
.ln-ki-note-normal    { color: #c0c0d8; }

/* "✓ in memory" badge — shown when note is harvested */
.ln-ki-mem-badge {
    display: inline-block;
    font-size: 9px;
    color: #4ade80;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Section/lecture context label below note text */
.ln-ki-note-ctx {
    display: block;
    font-size: 9px;
    color: #555;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Topics row at the bottom of the knowledge feed */
.ln-ki-topics-row {
    color: #7c6fcd !important;
    font-size: 10px !important;
    padding-top: 4px !important;
}
.ln-ki-topics-row em { font-style: normal; }

/* Gap radar — course coverage row (📚) */
.ln-ki-course-cover td { color: #60a5fa; }

/* Gap radar table */
.ln-ki-radar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ln-ki-radar-table thead tr {
    border-bottom: 1px solid #2a2a3a;
}
.ln-ki-radar-table th {
    text-align: left;
    color: #666;
    font-weight: 600;
    padding: 2px 4px;
    font-size: 10px;
}
.ln-ki-radar-table td {
    padding: 2px 4px;
    color: #c0c0d8;
    border-bottom: 1px solid #111120;
    white-space: nowrap;
}
.ln-ki-radar-table tr:last-child td { border-bottom: none; }

.ln-ki-filled td { color: #4ade80; }
.ln-ki-weak   td { color: #f87171; }

/* No-data state */
.ln-ki-no-data {
    font-size: 11px;
    color: #555;
    padding: 6px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}


/* ── Left sidebar — course list ───────────────────────────────────────────── */
.ln-sidebar {
    width: 280px;
    min-width: 220px;
    border-right: 1px solid var(--border-color, #2a2a3a);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.ln-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    flex-shrink: 0;
}

.ln-sidebar-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.ln-course-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ln-course-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.ln-course-item:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
}

.ln-course-item.active {
    background: rgba(124, 111, 205, 0.15);
    border-left-color: #7c6fcd;
}

.ln-course-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ln-course-info {
    flex: 1;
    overflow: hidden;
}

.ln-course-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e8e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-course-meta {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-top: 2px;
}

.ln-course-id {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted, #666);
    margin-left: 4px;
}

.ln-course-prog-bar {
    height: 3px;
    background: var(--border-color, #2a2a3a);
    border-radius: 2px;
    margin-top: 5px;
    overflow: hidden;
}

.ln-course-prog-fill {
    height: 100%;
    background: #7c6fcd;
    border-radius: 2px;
    transition: width 0.3s;
}

.ln-course-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.ln-status-active    { background: rgba(124,111,205,0.2); color: #a89ce0; }
.ln-status-completed { background: rgba(74,222,128,0.15); color: #4ade80; }
.ln-status-paused    { background: rgba(251,191,36,0.15);  color: #fbbf24; }

/* ── Right panel — course detail ──────────────────────────────────────────── */
.ln-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable area below the tab bar — one tab panel visible at a time */
.ln-detail-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Lectures tab panel: must fill the scroll container's viewport height so the
   inner column flex layout (sections list / notes list) gets a bounded height. */
#ln-tab-lectures-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Practice tab panel: grows to content height; #ln-detail-scroll scrolls it. */
#ln-tab-practice-panel {
    min-height: 100%;
}

/* Empty state */
.ln-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #666);
    gap: 12px;
    text-align: center;
    padding: 40px;
}

.ln-empty-icon {
    font-size: 52px;
    opacity: 0.4;
}

.ln-empty-state p {
    font-size: 14px;
    max-width: 280px;
    line-height: 1.5;
}

/* Detail header */
.ln-detail-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    flex-shrink: 0;
}

.ln-detail-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.ln-detail-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.ln-detail-titles {
    flex: 1;
    overflow: hidden;
}

.ln-detail-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #e8e8f0);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ln-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid;
}

.ln-badge-platform { border-color: #7c6fcd; color: #a89ce0; background: rgba(124,111,205,0.1); }
.ln-badge-category { border-color: #38bdf8; color: #7dd3fc; background: rgba(56,189,248,0.1); }
.ln-badge-url a    { color: #a89ce0; text-decoration: none; }
.ln-badge-url a:hover { text-decoration: underline; }

.ln-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Progress summary */
.ln-progress-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ln-progress-track {
    flex: 1;
    height: 6px;
    background: var(--border-color, #2a2a3a);
    border-radius: 3px;
    overflow: hidden;
}

.ln-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c6fcd, #4ade80);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ln-progress-label {
    font-size: 12px;
    color: var(--text-muted, #888);
    white-space: nowrap;
}

/* ── Course ingestion pipeline bars (TKT-069) ────────────────────────────── */
.ln-pipeline-compact {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.ln-pip-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ln-pip-label {
    font-size: 9px;
    font-weight: 600;
    width: 10px;
    text-align: center;
    flex-shrink: 0;
}

.ln-pip-s1 { color: #3b82f6; }
.ln-pip-s2 { color: #22c55e; }

.ln-pip-track {
    flex: 1;
    height: 3px;
    background: var(--border-color, #2a2a3a);
    border-radius: 2px;
    overflow: hidden;
}

.ln-pip-fill1 {
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.ln-pip-fill2 {
    height: 100%;
    background: #22c55e;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.ln-pip-pct {
    font-size: 9px;
    color: var(--text-muted, #666);
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.ln-pip-ready-badge {
    font-size: 9px;
    color: #4ade80;
    font-weight: 600;
    white-space: nowrap;
}

.ln-pip-queue-badge {
    font-size: 9px;
    color: #fbbf24;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 6px;
}

@keyframes ln-pip-shine {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.ln-pip-fill1.ln-pip-active {
    background: linear-gradient(90deg, #3b82f6 30%, #93c5fd 60%, #3b82f6 90%);
    background-size: 200% 100%;
    animation: ln-pip-shine 1.5s linear infinite;
}

.ln-pip-fill2.ln-pip-active {
    background: linear-gradient(90deg, #22c55e 30%, #86efac 60%, #22c55e 90%);
    background-size: 200% 100%;
    animation: ln-pip-shine 1.5s linear infinite;
}

/* Detail-panel pipeline block */
.ln-pipeline-detail-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.ln-pip-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ln-pip-detail-label {
    font-size: 11px;
    color: var(--text-muted, #888);
    width: 100px;
    flex-shrink: 0;
}

.ln-pip-detail-track {
    flex: 1;
    height: 5px;
    background: var(--border-color, #2a2a3a);
    border-radius: 3px;
    overflow: hidden;
}

.ln-pip-detail-pct {
    font-size: 11px;
    color: var(--text-muted, #888);
    width: 90px;
    text-align: right;
    flex-shrink: 0;
}

/* Detail ready badge — larger than sidebar variant */
.ln-pipeline-detail-wrap .ln-pip-ready-badge {
    font-size: 12px;
    margin-top: 2px;
}

/* Detail body: sections + notes side by side.
   min-height:0 (not 320px) because height is now supplied by #ln-tab-lectures-panel
   which uses min-height:100% to fill #ln-detail-scroll's viewport. */
.ln-detail-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    gap: 0;
}

/* ── Sections column ──────────────────────────────────────────────────────── */
.ln-sections-col {
    width: 50%;
    border-right: 1px solid var(--border-color, #2a2a3a);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ln-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    flex-shrink: 0;
}

.ln-col-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.ln-sections-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ln-section-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s;
}

.ln-section-row:hover {
    background: var(--hover-bg, rgba(255,255,255,0.04));
}

.ln-section-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-color, #444);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    font-size: 10px;
}

.ln-section-check.done {
    background: #4ade80;
    border-color: #4ade80;
    color: #000;
}

.ln-section-check:not(.done):hover {
    border-color: #7c6fcd;
}

.ln-section-info {
    flex: 1;
    overflow: hidden;
}

.ln-section-title {
    font-size: 13px;
    color: var(--text-primary, #e8e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.ln-section-row.completed .ln-section-title {
    color: var(--text-muted, #666);
    text-decoration: line-through;
}

.ln-section-dur {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-top: 1px;
}

.ln-section-delete {
    opacity: 0;
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.15s, background 0.15s;
}

.ln-section-row:hover .ln-section-delete {
    opacity: 1;
}

.ln-section-delete:hover {
    background: rgba(248,113,113,0.15);
}

/* 🧩 Quiz Solver shortcut button — one per section row */
.ln-quiz-open-btn {
    opacity: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 5px;
    border-radius: 4px;
    transition: opacity 0.15s, background 0.15s;
    color: #a78bfa;
    flex-shrink: 0;
}
.ln-section-row:hover .ln-quiz-open-btn {
    opacity: 1;
}
.ln-quiz-open-btn:hover {
    background: rgba(167,139,250,0.15);
}

/* Add section inline form */
.ln-add-section-form {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color, #2a2a3a);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.ln-input {
    background: var(--input-bg, #12121e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 6px;
    color: var(--text-primary, #e8e8f0);
    font-size: 13px;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.ln-input:focus {
    outline: none;
    border-color: #7c6fcd;
}

.ln-input-row {
    display: flex;
    gap: 6px;
}

.ln-input-row .ln-input {
    flex: 1;
}

/* ── Notes column ─────────────────────────────────────────────────────────── */
.ln-notes-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ln-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ln-note-card {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 8px;
    padding: 10px 12px;
    position: relative;
}

.ln-note-card.imp-important {
    border-left: 3px solid #fbbf24;
}

.ln-note-card.imp-critical {
    border-left: 3px solid #f87171;
}

.ln-note-text {
    font-size: 13px;
    color: var(--text-primary, #e8e8f0);
    line-height: 1.5;
    word-break: break-word;
}

.ln-note-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ln-note-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(124,111,205,0.15);
    color: #a89ce0;
}

.ln-note-time {
    font-size: 10px;
    color: var(--text-muted, #555);
    margin-left: auto;
}

.ln-note-harvested {
    font-size: 10px;
    color: #4ade80;
}

.ln-note-delete {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 2px 4px;
}

.ln-note-card:hover .ln-note-delete {
    opacity: 1;
}

/* Add note form */
.ln-add-note-form {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color, #2a2a3a);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.ln-note-textarea {
    background: var(--input-bg, #12121e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 6px;
    color: var(--text-primary, #e8e8f0);
    font-size: 13px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 62px;
    max-height: 120px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s;
}

.ln-note-textarea:focus {
    outline: none;
    border-color: #7c6fcd;
}

.ln-note-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ln-importance-select {
    background: var(--input-bg, #12121e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 6px;
    color: var(--text-muted, #888);
    font-size: 12px;
    padding: 5px 8px;
}

/* ── Harvest button & status ──────────────────────────────────────────────── */
.ln-harvest-btn {
    background: linear-gradient(135deg, #7c6fcd, #4ade80);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.ln-harvest-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.ln-harvest-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ── Modal — Add / Edit Course ─────────────────────────────────────────────── */
.ln-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ln-modal-box {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 12px;
    padding: 24px;
    width: 480px;
    max-width: 96vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.ln-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #e8e8f0);
    margin: 0 0 6px;
}

/* ── Lecture meta row (subtitle + duration) ──────────────────────────────── */
.ln-lec-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}
.ln-lec-meta-label {
    font-size: 11px;
    color: var(--text-muted, #666);
}
.ln-lec-dur-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted, #777);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: text;
}
.ln-dur-input {
    width: 52px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #e8e8f0);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    /* remove spin buttons */
    -moz-appearance: textfield;
}
.ln-dur-input::-webkit-outer-spin-button,
.ln-dur-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ln-dur-input:focus { color: #60a5fa; }
.ln-dur-unit {
    font-size: 11px;
    color: var(--text-muted, #666);
}
.ln-dur-human {
    font-size: 11px;
    color: #4ade80;
    min-width: 0;
}

.ln-form-row {
    margin-bottom: 14px;
}

.ln-form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.ln-platform-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ln-platform-btn {
    background: var(--input-bg, #12121e);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 6px;
    color: var(--text-muted, #888);
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ln-platform-btn:hover,
.ln-platform-btn.active {
    background: rgba(124,111,205,0.2);
    border-color: #7c6fcd;
    color: #a89ce0;
}

.ln-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ── Buttons (shared) ─────────────────────────────────────────────────────── */
.btn-ln-primary {
    background: #7c6fcd;
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-ln-primary:hover    { opacity: 0.85; }
.btn-ln-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ln-secondary {
    background: transparent;
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 7px;
    color: var(--text-muted, #888);
    font-size: 13px;
    padding: 7px 16px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.btn-ln-secondary:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
    color: var(--text-primary, #e8e8f0);
}

.btn-ln-danger {
    background: transparent;
    border: 1px solid #f87171;
    border-radius: 7px;
    color: #f87171;
    font-size: 13px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-ln-danger:hover { background: rgba(248,113,113,0.12); }

.btn-sm-ln {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 5px;
}

/* ── Empty list state ─────────────────────────────────────────────────────── */
.ln-list-empty {
    color: var(--text-muted, #666);
    font-size: 13px;
    text-align: center;
    padding: 24px;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.ln-spinner {
    color: var(--text-muted, #666);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

/* ── URL Import Box (in Add Course modal) ─────────────────────────────────── */
.ln-import-box {
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 4px;
}

/* Folder import variant — green tint */
.ln-folder-import-box {
    background: rgba(52, 211, 153, 0.06);
    border-color: rgba(52, 211, 153, 0.28);
    margin-top: 8px;
}
.ln-folder-import-box .ln-import-label {
    color: #6ee7b7;
}

.ln-import-label {
    font-size: 12px;
    font-weight: 600;
    color: #7dd3fc;
}

.ln-import-status {
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px;
    line-height: 1.5;
}

.ln-import-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: var(--text-muted, #555);
    font-size: 11px;
}

.ln-import-divider::before,
.ln-import-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #2a2a3a);
}

/* ── Section hierarchy: parent section headers vs lecture sub-rows ────────── */
.ln-section-row.is-section {
    background: rgba(168, 156, 224, 0.07);
    border-left: 2px solid rgba(168, 156, 224, 0.35);
}
.ln-section-row.is-section .ln-section-title {
    font-weight: 600;
    font-size: 12.5px;
    color: #c4b8f8;
}
.ln-section-row.is-lecture {
    padding-left: 14px;
    background: transparent;
}
.ln-section-row.is-lecture .ln-section-title {
    font-size: 11.5px;
    color: #94a3b8;
}
.ln-lec-arrow {
    color: #444;
    margin-right: 3px;
    font-size: 11px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Per-lecture note / transcript button ─────────────────────────────────── */
.ln-lec-note-btn {
    flex-shrink: 0;
    min-width: 28px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #444;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.15s;
    padding: 0 5px;
}
.ln-lec-note-btn:hover {
    background: rgba(124, 111, 205, 0.15);
    color: #a89ce0;
    border-color: rgba(124, 111, 205, 0.3);
}
.ln-lec-note-btn.has-notes {
    color: #7c6fcd;
    border-color: rgba(124, 111, 205, 0.3);
    background: rgba(124, 111, 205, 0.08);
}
.ln-lec-note-btn.has-transcript {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}
.ln-lec-note-count {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

/* ── Transcript note styles ───────────────────────────────────────────────── */
.ln-transcript-label {
    font-size: 10px;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ln-note-text.is-transcript {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 7px 10px;
    max-height: 140px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.55;
    color: #b0bec5;
}
.ln-note-card.imp-transcript {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

/* ── Quiz note styles ─────────────────────────────────────────────────────── */
.ln-quiz-label {
    font-size: 10px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ln-note-text.is-quiz {
    font-size: 12px;
    background: rgba(124, 111, 205, 0.08);
    border-radius: 4px;
    padding: 7px 10px;
    max-height: 140px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.5;
    color: #e0d9ff;
}
.ln-note-card.imp-quiz {
    border-left: 3px solid #7c6fcd;
    background: rgba(124, 111, 205, 0.06);
}

/* ── Section label inside note card ──────────────────────────────────────── */
.ln-note-section-label {
    font-size: 10px;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.07);
    border-radius: 3px;
    padding: 1px 6px;
    border: 1px solid rgba(74, 222, 128, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ── Assets section (inside per-lecture notes modal) ─────────────────────── */
.ln-assets-section {
    border-top: 1px solid var(--border-color, #2a2a3a);
    margin-top: 16px;
    padding-top: 14px;
}
.ln-assets-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ln-assets-title {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
}
.ln-assets-subtitle {
    font-size: 11px;
    color: #555;
    flex: 1;
}
.ln-assets-upload-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
    cursor: pointer;
}
.ln-assets-list {
    min-height: 32px;
}
.ln-assets-empty {
    font-size: 12px;
    color: #444;
    background: #0d0d1a;
    border-radius: 6px;
    padding: 10px 12px;
}
.ln-assets-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}
.ln-asset-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 6px;
    padding: 7px 10px;
    transition: background 0.15s;
}
.ln-asset-card:hover {
    background: rgba(124, 111, 205, 0.08);
    border-color: rgba(124, 111, 205, 0.25);
}
.ln-asset-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.ln-asset-body {
    flex: 1;
    min-width: 0;
}
.ln-asset-name {
    display: block;
    font-size: 12px;
    color: #7dd3fc;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ln-asset-name:hover {
    text-decoration: underline;
    color: #93c5fd;
}
.ln-asset-meta {
    font-size: 10px;
    color: #555;
    margin-top: 2px;
}
.ln-asset-delete {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
    transition: all 0.15s;
}
.ln-asset-delete:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}
.ln-asset-upload-status {
    font-size: 11px;
    margin-top: 6px;
    min-height: 16px;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
.ln-course-list::-webkit-scrollbar,
.ln-sections-list::-webkit-scrollbar,
.ln-notes-list::-webkit-scrollbar,
.ln-detail-scroll::-webkit-scrollbar { width: 4px; }

.ln-course-list::-webkit-scrollbar-track,
.ln-sections-list::-webkit-scrollbar-track,
.ln-notes-list::-webkit-scrollbar-track,
.ln-detail-scroll::-webkit-scrollbar-track { background: transparent; }

.ln-course-list::-webkit-scrollbar-thumb,
.ln-sections-list::-webkit-scrollbar-thumb,
.ln-notes-list::-webkit-scrollbar-thumb,
.ln-detail-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color, #333);
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Emoji Picker  (.ln-emoji-*
   Inline dropdown below the "Icon" row in the Add/Edit Course modal.
   No external libraries — fully self-contained.
══════════════════════════════════════════════════════════════════════════════ */

/* Icon field row: preview + trigger button */
.ln-emoji-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ln-emoji-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 26px;
    background: #0f0f20;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    flex-shrink: 0;
    line-height: 1;
    cursor: default;
    user-select: none;
}

.ln-emoji-trigger {
    font-size: 12px !important;
}

/* Dropdown container */
.ln-emoji-picker {
    background: #0d0d1e;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    padding: 10px;
    margin-top: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    position: relative;
    z-index: 10;
}

/* Search */
.ln-emoji-search-row {
    margin-bottom: 8px;
}

.ln-emoji-search {
    width: 100%;
    background: #12122a;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 6px 10px;
    color: #e8e8f0;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
}
.ln-emoji-search::placeholder { color: #555; }
.ln-emoji-search:focus { border-color: #7c6fcd; }

/* Category tabs */
.ln-emoji-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.ln-emoji-tab {
    background: #1a1a2e;
    border: 1px solid #2a2a3a;
    border-radius: 5px;
    color: #888;
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.ln-emoji-tab:hover {
    border-color: #7c6fcd;
    color: #a89ce0;
}
.ln-emoji-tab.active {
    background: #7c6fcd22;
    border-color: #7c6fcd;
    color: #a89ce0;
    font-weight: 600;
}

/* Emoji grid */
.ln-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
    padding: 2px;
}

.ln-emoji-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, transform 0.08s;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}
.ln-emoji-btn:hover {
    background: #7c6fcd22;
    border-color: #7c6fcd55;
    transform: scale(1.18);
}
.ln-emoji-btn:active {
    transform: scale(0.92);
    background: #7c6fcd44;
}

/* Scrollbar inside grid */
.ln-emoji-grid::-webkit-scrollbar { width: 4px; }
.ln-emoji-grid::-webkit-scrollbar-track { background: transparent; }
.ln-emoji-grid::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════
   AI Course-Knowledge Summary Cards  (.ln-ki-course-summary / .ln-ki-cs-*)
   Rendered in Col 1 of the Knowledge Impact grid when Ollama summaries are ready.
   Replaces raw note-text display with per-course grouped bullet points.
══════════════════════════════════════════════════════════════════════════════ */

/* Container for one course's summary block */
.ln-ki-course-summary {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a1a2a;
}
.ln-ki-course-summary:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Course icon + title row */
.ln-ki-cs-header {
    font-size: 10px;
    font-weight: 700;
    color: #7c6fcd;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ln-ki-cs-header em { font-style: normal; }

/* Individual bullet point */
.ln-ki-cs-bullet {
    font-size: 11px;
    color: #c8c8e0;
    line-height: 1.48;
    padding: 1px 0 1px 8px;
    word-break: break-word;
}
.ln-ki-cs-bullet:before { content: ''; }

/* Spinner keyframes used by the "Generating AI summary…" indicator */
@keyframes ln-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Scope badge: shown in col title when impact is filtered to a specific course ── */
.ln-ki-scope-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #1e1e3a;
    border: 1px solid #7c6fcd55;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 500;
    color: #9d8fe0;
    vertical-align: middle;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🧠 Quiz Solver overlay  (.lqs-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal root — full-screen fixed overlay */
#ln-quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
}

/* Inner dialog box */
.lqs-box {
    max-width: 960px !important;
    width: 96vw !important;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 26px;
    border-radius: 14px;
    background: #0e0e1e;
    border: 1px solid #2a2a3a;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
}

/* Header row */
.lqs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e1e2e;
}

.lqs-course-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    background: #1a1a30;
    border: 1px solid #7c6fcd44;
    border-radius: 10px;
    font-size: 11px;
    color: #9d8fe0;
    vertical-align: middle;
}

.lqs-close-btn {
    font-size: 16px;
    padding: 3px 10px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid #2a2a3a;
    color: #777;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lqs-close-btn:hover { background: #1a1a2e; color: #eee; }

/* URL fetch row */
.lqs-url-row {
    background: #09090f;
    border: 1px solid #1e2a2e;
    border-radius: 8px;
    padding: 12px 14px;
}

/* Two-column workspace */
.lqs-workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    flex: 1;
    min-height: 240px;
}
@media (max-width: 700px) {
    .lqs-workspace { grid-template-columns: 1fr; }
}

.lqs-col { display: flex; flex-direction: column; gap: 6px; }

/* Questions textarea */
.lqs-textarea {
    flex: 1;
    min-height: 220px;
    max-height: 360px;
    resize: vertical;
    background: #09090f;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 12px;
    font-family: 'Consolas', 'Courier New', monospace;
    line-height: 1.55;
    padding: 10px 12px;
    outline: none;
    transition: border-color .2s;
}
.lqs-textarea:focus { border-color: #7c6fcd; }

/* Answers output pane */
.lqs-output {
    flex: 1;
    min-height: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: #040408;
    border: 1px solid #1e1e2e;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #d4ffd4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Action bar */
.lqs-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #1e1e2e;
}

/* Status line (inline text) */
.lqs-status-line {
    font-size: 12px;
    color: #888;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pass / Fail result row */
.lqs-result-row {
    background: #0a0a18;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 12px 14px;
}

/* ── Per-question answer blocks ─────────────────────────────────────────── */

/* Output pane override when per-Q mode is active */
.lqs-output.lqs-per-q-mode {
    white-space: normal;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
}

.lqs-q-block {
    background: #07071a;
    border: 1px solid #1e1e2e;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 7px;
    transition: border-color .2s, background .2s;
}
.lqs-q-block:last-child { margin-bottom: 0; }

.lqs-q-block.lqs-q-correct {
    border-color: #166534;
    background: #052012;
}
.lqs-q-block.lqs-q-wrong {
    border-color: #7f1d1d;
    background: #140303;
}
.lqs-q-block.lqs-q-retried {
    border-color: #713f12;
    background: #150c00;
}

.lqs-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.lqs-q-num {
    font-size: 11px;
    font-weight: 700;
    color: #9d8fe0;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.lqs-q-btns {
    display: flex;
    gap: 5px;
    align-items: center;
}

.lqs-q-btn-correct,
.lqs-q-btn-wrong {
    font-size: 10px;
    padding: 2px 9px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    transition: opacity .15s;
    font-family: inherit;
}
.lqs-q-btn-correct {
    background: #052012;
    border-color: #166534;
    color: #4ade80;
}
.lqs-q-btn-wrong {
    background: #140303;
    border-color: #7f1d1d;
    color: #f87171;
}
.lqs-q-btn-correct:hover { opacity: .75; }
.lqs-q-btn-wrong:hover   { opacity: .75; }

.lqs-q-answer {
    font-size: 12px;
    color: #d4ffd4;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
}

/* Question text + options from CEO's input (shown above Bond's answer) */
.lqs-q-text {
    font-size: 12px;
    color: #c4b5fd;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    margin: 0 0 6px 0;
    padding: 6px 8px;
    background: #0a0816;
    border: 1px solid #2a1f4a;
    border-radius: 5px;
}

/* "🤖 Bond's answer:" label above the answer */
.lqs-q-answer-lbl {
    font-size: 10px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

/* Per-question hint row (inside correction panel) */
.lqs-q-hint-row {
    margin-top: 8px;
}
.lqs-q-hint-lbl {
    display: block;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
    margin-bottom: 4px;
}
.lqs-q-hint-ta {
    width: 100%;
    min-height: 54px;
    max-height: 100px;
    resize: vertical;
    background: #0d0b00;
    border: 1px solid #2a2a1a;
    border-radius: 5px;
    color: #fef3c7;
    font-size: 11px;
    line-height: 1.5;
    padding: 6px 8px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
}
.lqs-q-hint-ta:focus { border-color: #f59e0b; }

/* Correction panel (revealed on ❌ Wrong) */
.lqs-q-correction {
    margin-top: 8px;
    background: #0d0508;
    border: 1px solid #7f1d1d44;
    border-radius: 6px;
    padding: 8px 10px;
}

.lqs-q-correction-label {
    font-size: 11px;
    color: #f87171;
    margin-bottom: 5px;
    font-weight: 600;
}

.lqs-q-correction-ta {
    width: 100%;
    min-height: 76px;
    max-height: 150px;
    resize: vertical;
    background: #0a0a18;
    border: 1px solid #2a2a3a;
    border-radius: 5px;
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.5;
    padding: 6px 8px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
}
.lqs-q-correction-ta:focus { border-color: #7c6fcd; }

/* Ghost button used for close & clear */
.btn-ln-ghost {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: #888;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-ln-ghost:hover { background: #1a1505; color: #ccc; }

/* Success / danger small buttons (pass / fail) */
.btn-ln-success {
    background: #052e16;
    border: 1px solid #166534;
    color: #4ade80;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.btn-ln-success:hover:not(:disabled) { background: #064e3b; }
.btn-ln-success:disabled { opacity: .5; cursor: not-allowed; }

.btn-ln-danger {
    background: #2d0a0a;
    border: 1px solid #7f1d1d;
    color: #f87171;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.btn-ln-danger:hover:not(:disabled) { background: #450a0a; }
.btn-ln-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ── Agentic Practice Mode — new elements ──────────────────────────────────── */

/* "KAAI is the student" info note at top of task list */
.ln-practice-kaai-note {
    background: linear-gradient(90deg, #0a1a10 0%, #0a0f1a 100%);
    border: 1px solid #1a3a1a;
    border-left: 3px solid #4ade80;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11px;
    color: #7c8baa;
    margin-bottom: 10px;
    line-height: 1.5;
}
.ln-practice-kaai-note strong { color: #4ade80; }

/* Empty state (no plan yet) */
.ln-practice-empty {
    padding: 20px;
    text-align: center;
    color: #7c8baa;
    font-size: 13px;
    border: 1px dashed #1e2a3a;
    border-radius: 8px;
    margin-top: 6px;
}

/* ⏹ Stop Practice — danger button shown while queue is running */
.ln-practice-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid #7f1d1d;
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    color: #fca5a5;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ln-practice-stop-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    border-color: #ef4444;
    box-shadow: 0 0 8px #ef444440;
}
.ln-practice-stop-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ⏸ Pause Practice — amber/orange button shown while queue is running */
.ln-practice-pause-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid #92400e;
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    color: #fcd34d;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ln-practice-pause-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-color: #f59e0b;
    box-shadow: 0 0 8px #f59e0b40;
}
.ln-practice-pause-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ▶ Resume Practice — green accent button shown while queue is paused */
.ln-practice-resume-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid #15803d;
    background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
    color: #86efac;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ln-practice-resume-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    border-color: #4ade80;
    box-shadow: 0 0 8px #4ade8040;
}
.ln-practice-resume-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* KAAI Practice Now — primary CTA button */
.ln-practice-run-btn {
    font-size: 13px !important;
    padding: 6px 16px !important;
    background: linear-gradient(135deg, #166534 0%, #14532d 100%) !important;
    border-color: #16a34a !important;
    color: #4ade80 !important;
    font-weight: 700 !important;
}
.ln-practice-run-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 8px #4ade8040 !important;
}
.ln-practice-run-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Ticket progress summary bar */
.ln-practice-ticket-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #070d14;
    border: 1px solid #1a2a3a;
    border-radius: 6px;
    padding: 7px 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ln-ticket-prog-bar {
    flex: 1;
    min-width: 80px;
    height: 5px;
    background: #1a2a3a;
    border-radius: 3px;
    overflow: hidden;
}
.ln-ticket-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, #16a34a, #4ade80);
    border-radius: 3px;
    transition: width .4s ease;
}
.ln-ticket-stat {
    font-size: 11px;
    white-space: nowrap;
}
.ln-ts-done { color: #4ade80; }
.ln-ts-prog { color: #fbbf24; }
.ln-ts-pend { color: #7c8baa; }
.ln-ts-fail { color: #f87171; }

/* Task card — assigned state (blue frame) */
.ln-practice-task.assigned {
    border-color: #3b82f6;
    background: #060c18;
}

/* Task card — running state pulse */
.ln-practice-task.running {
    border-color: #fbbf24;
    animation: ln-task-pulse 2s infinite;
}
@keyframes ln-task-pulse {
    0%, 100% { border-color: #fbbf24; box-shadow: none; }
    50%       { border-color: #f59e0b; box-shadow: 0 0 6px #fbbf2430; }
}

/* Ticket status badge — inline in task header */
.ln-tkt-badge {
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ln-tkt-queued   { background: #1a2030; color: #7c8baa;  border: 1px solid #2a3a4a; }
.ln-tkt-assigned { background: #0d1a30; color: #60a5fa;  border: 1px solid #1e3a5f; }
.ln-tkt-running  { background: #1a1500; color: #fbbf24;  border: 1px solid #713f12; animation: ln-task-pulse 2s infinite; }
.ln-tkt-done     { background: #0a1a10; color: #4ade80;  border: 1px solid #166534; }
.ln-tkt-fail     { background: #1a0a0a; color: #f87171;  border: 1px solid #7f1d1d; }
.ln-tkt-cancelled { background: #111827; color: #9ca3af; border: 1px solid #374151; }

/* Score badge */
.ln-practice-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 20px;
    background: #0d1a2e;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #60a5fa;
    flex-shrink: 0;
}

/* Phase 7/9 — Live P&L and backtest result badges */
.ln-live-pnl {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ln-live-win  { background: rgba(16,185,129,.15); border: 1px solid #10b981; color: #10b981; }
.ln-live-loss { background: rgba(239,68,68,.15);  border: 1px solid #ef4444; color: #ef4444; }
.ln-live-be   { background: rgba(156,163,175,.15); border: 1px solid #6b7280; color: #9ca3af; }
.ln-bt-verified { background: rgba(59,130,246,.12); border: 1px solid #3b82f6; color: #60a5fa; }

/* ── Phase 9 — Live P&L Monitor panel ─────────────────────────────────────── */
.ln-live-pnl-monitor {
    margin-top: 10px;
    border: 1px solid rgba(124,58,237,.35);
    border-radius: 8px;
    background: rgba(14,9,28,.85);
    overflow: hidden;
}
.ln-live-monitor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(124,58,237,.12);
    border-bottom: 1px solid rgba(124,58,237,.25);
    font-size: 12px;
    font-weight: 700;
    color: #c4b5fd;
}
.ln-live-tier-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(59,130,246,.15);
    border: 1px solid #3b82f6;
    color: #60a5fa;
}
.ln-tier5-badge {
    background: rgba(239,68,68,.12);
    border-color: #ef4444;
    color: #f87171;
}
.ln-live-monitor-note {
    padding: 6px 14px;
    font-size: 10.5px;
    color: #4b5563;
    border-bottom: 1px solid rgba(124,58,237,.12);
    line-height: 1.6;
}
.ln-live-monitor-note strong { color: #6b7280; }
.ln-live-pnl-table-wrap {
    padding: 10px 14px;
    overflow-x: auto;
}
/* Summary stats row */
.ln-live-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ln-live-stat {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid #374151;
    color: #9ca3af;
    background: rgba(15,15,30,.6);
}
.ln-live-stat-win  { border-color: #10b981; color: #10b981; background: rgba(16,185,129,.1); }
.ln-live-stat-loss { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
.ln-live-stat-open { border-color: #60a5fa; color: #60a5fa; background: rgba(59,130,246,.08); }
/* Outcomes table */
.ln-live-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.ln-live-table th {
    background: #0a0a18;
    color: #4b5563;
    font-weight: 600;
    font-size: 10px;
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #1a1a2e;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ln-live-table td {
    padding: 6px 10px;
    color: #9ca3af;
    border-bottom: 1px solid #0f0f1e;
    vertical-align: middle;
    white-space: nowrap;
}
.ln-live-table tr:hover td { background: rgba(124,58,237,.06); }
.ln-live-row-win  td { color: #d1fae5; }
.ln-live-row-win  { border-left: 3px solid #10b981; }
.ln-live-row-loss td { color: #fee2e2; }
.ln-live-row-loss { border-left: 3px solid #ef4444; }
/* Source badges */
.ln-src-badge {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 8px;
    font-size: 10px; font-weight: 600;
}
.ln-src-live { background: rgba(239,68,68,.12); border: 1px solid #ef4444; color: #f87171; }
.ln-src-bt   { background: rgba(59,130,246,.12); border: 1px solid #3b82f6; color: #60a5fa; }
.ln-src-none { color: #374151; font-size: 10px; }
/* Empty state */
.ln-live-empty {
    padding: 14px;
    color: #4b5563;
    font-size: 11.5px;
    line-height: 1.8;
}
.ln-live-empty span { display: block; font-size: 10.5px; color: #374151; }

/* Ticket ID below task meta */
.ln-tkt-id {
    font-size: 10px;
    color: #374151;
    font-family: monospace;
    margin-top: 2px;
}

/* Bond's work section — expandable */
.ln-bond-work-section {
    background: #06090f;
    border: 1px solid #1a3a3a;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 4px;
}
.ln-bond-work-header {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #60a5fa;
    cursor: pointer;
    user-select: none;
    background: #0a1020;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ln-bond-work-header:hover { background: #0d1530; }
.ln-bond-work-body {
    padding: 8px 10px;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}
.ln-bond-work-body::-webkit-scrollbar { width: 3px; }
.ln-bond-work-body::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 2px; }

/* Bond working animation */
.ln-bond-working-anim {
    font-size: 11px;
    color: #fbbf24;
    padding: 6px 10px;
    animation: ln-pulse 1.8s infinite;
}

/* ── Practice Banner (outer container) ──────────────────────────────────── */
.ln-practice-banner {
    background: linear-gradient(135deg, #07100a 0%, #070d14 100%);
    border: 1px solid #1a3a1a;
    border-left: 3px solid #16a34a;
    border-radius: 8px;
    padding: 12px 14px 10px;
    margin-bottom: 12px;
}
/* Mid-course variant — amber accent instead of green */
.ln-practice-banner.ln-practice-banner-mid {
    background: linear-gradient(135deg, #0d0a02 0%, #0d0b04 100%);
    border-color: #3a2e00;
    border-left-color: #ca8a04;
}
.ln-practice-banner.ln-practice-banner-mid .ln-practice-banner-title {
    color: #fbbf24;
}
.ln-practice-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: #4ade80;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.ln-practice-howto-toggle {
    margin-left: auto;
    font-size: 11px;
    background: transparent;
    border: 1px solid #1a3a2a;
    color: #4ade80;
    border-radius: 5px;
    padding: 2px 8px;
    cursor: pointer;
}
.ln-practice-howto-toggle:hover { background: #0a2010; }
.ln-practice-banner-sub {
    font-size: 11px;
    color: #7c8baa;
    margin-bottom: 8px;
}

/* ── How It Works collapsible panel ────────────────────────────────────── */
.ln-practice-howto-panel {
    background: #050d08;
    border: 1px solid #1a2a1a;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 11px;
}
.ln-howto-section { margin-bottom: 10px; }
.ln-howto-section:last-child { margin-bottom: 0; }
.ln-howto-heading {
    font-size: 11px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 5px;
}
.ln-howto-text {
    color: #94a3b8;
    line-height: 1.6;
}
.ln-howto-steps { display: flex; flex-direction: column; gap: 4px; }
.ln-howto-step {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #94a3b8;
    line-height: 1.5;
}
.ln-howto-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #1a2a3a;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #60a5fa;
    flex-shrink: 0;
    margin-top: 1px;
}
.ln-howto-types { display: flex; flex-direction: column; gap: 4px; }
.ln-howto-type {
    display: flex;
    gap: 8px;
    color: #94a3b8;
    line-height: 1.5;
}
.ln-howto-type span:first-child {
    font-weight: 600;
    color: #fbbf24;
    white-space: nowrap;
    min-width: 120px;
}

/* ── MT5 broker status row ──────────────────────────────────────────────── */
.ln-practice-broker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}
.ln-practice-broker-label {
    font-size: 11px;
    color: #7c8baa;
}
.ln-practice-broker-status {
    font-size: 11px;
    font-weight: 600;
}
.ln-practice-pw-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* ── Action buttons row ─────────────────────────────────────────────────── */
.ln-practice-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ── Protocol container — no inner scroll; #ln-detail-scroll handles all ── */
/* Previously had max-height:420px + inner scroll which caused dual-scroll   */
/* confusion and made lectures content appear "stuck" below practice banner. */
.ln-practice-protocol-container {
    padding-right: 4px;
    margin-top: 6px;
}

/* ── Mid-course practice prompt (shown on Lectures tab when done > 0) ───── */
.ln-midcourse-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: linear-gradient(135deg, #0d0a02 0%, #0d0b04 100%);
    border: 1px solid #3a2e00;
    border-left: 3px solid #ca8a04;
    border-radius: 6px;
    padding: 9px 14px;
    margin: 8px 0 4px;
    flex-shrink: 0;
}
.ln-midcourse-prompt-text {
    font-size: 12px;
    color: #fbbf24;
    line-height: 1.5;
}
.ln-midcourse-prompt-text strong { color: #fff; }

/* Loading state */
.ln-practice-loading {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: #4ade80;
    animation: ln-pulse 1.8s infinite;
}

/* ── Tasks grid ─────────────────────────────────────────────────────────── */
.ln-practice-tasks-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Individual task card ───────────────────────────────────────────────── */
.ln-practice-task {
    background: #06090f;
    border: 1px solid #1a2a3a;
    border-radius: 7px;
    padding: 10px 12px;
    transition: border-color .2s;
}
.ln-practice-task.logged {
    border-color: #166534;
    background: #06100a;
}
.ln-practice-task-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.ln-practice-type-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.ln-practice-task-title {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
    min-width: 0;
}
.ln-practice-diff {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.ln-practice-task-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ln-practice-desc {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}
.ln-practice-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
    color: #4b5563;
}
.ln-practice-based { color: #374151; }
.ln-practice-tool-badge {
    background: #0d1a2e;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    color: #60a5fa;
}
.ln-practice-criteria { color: #374151; font-style: italic; }


/* ── Detail View Tabs (Lectures ↔ Practice) ──────────────────────────────── */
.ln-detail-tabs {
    display: flex;
    gap: 2px;
    padding: 0 16px;
    background: #0b0f1a;
    border-bottom: 1px solid #1e2a3a;
    flex-shrink: 0;
}
.ln-detail-tab {
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.ln-detail-tab:hover {
    color: #94a3b8;
}
.ln-detail-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
}

/* ── Graduation Certificate ──────────────────────────────────────────────── */

/* Certificate button — neutral state */
.btn-ln-cert {
    background: transparent;
    border: 1px solid #4b5563;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-size: 12px;
    padding: 4px 10px;
}
.btn-ln-cert:hover {
    background: #1a1505;
    border-color: #f59e0b;
    color: #fcd34d;
}

/* Certificate button — uploaded/filled state */
.btn-ln-cert.ln-cert-uploaded {
    border-color: #fbbf24;
    color: #fbbf24;
}
.btn-ln-cert.ln-cert-uploaded:hover {
    background: #1a1505;
    border-color: #f59e0b;
    color: #fcd34d;
}

/* Certificate badge in the title row */
.ln-cert-badge {
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
    cursor: pointer;
    transition: background 0.15s;
}
.ln-cert-badge:hover {
    background: #1a1505 !important;
}

/* Certificate modal — current cert display */
.ln-cert-current-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #0d1523;
    border: 1px solid #fbbf2440;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.ln-cert-icon-big {
    font-size: 28px;
    flex-shrink: 0;
}
.ln-cert-current-info {
    flex: 1;
    min-width: 0;
}
.ln-cert-current-name {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ln-cert-current-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.ln-cert-replace-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTI — Course Tool Intelligence styles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tool badge strip (under progress bar) ──────────────────────────────── */
.ln-tools-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 14px 8px;
    background: #0a0c14;
    border-bottom: 1px solid #1a1e2e;
    font-size: 12px;
}
.ln-tools-strip-label {
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ln-tools-strip-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
}
.ln-tools-scan-btn {
    background: transparent;
    border: 1px solid #334155;
    border-radius: 5px;
    color: #60a5fa;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.ln-tools-scan-btn:hover { background: #1e293b; border-color: #60a5fa; }

/* ── Tool pill variants ──────────────────────────────────────────────────── */
.ln-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: opacity .15s;
    white-space: nowrap;
}
.ln-tool-pill:hover { opacity: .8; }
.ln-tool-pill-available  { background: #052e16; border-color: #166534; color: #4ade80; }
.ln-tool-pill-pending    { background: #1c1207; border-color: #78350f; color: #fbbf24; }
.ln-tool-pill-requested  { background: #0f172a; border-color: #1e3a5f; color: #60a5fa; }
.ln-tool-pill-installing { background: #0f172a; border-color: #1e3a5f; color: #93c5fd; }
.ln-tool-pill-skip       { background: #111827; border-color: #374151; color: #6b7280; }
.ln-tool-pill-unknown    { background: #1e1b2e; border-color: #4c1d95; color: #a78bfa; }

/* ── CTI tag panel (inside lecture note modal) ───────────────────────────── */
.ln-cti-tag-panel {
    background: #0b0e1a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0 6px;
}
.ln-cti-tag-title {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.ln-cti-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.ln-cti-tag-row:last-child { margin-bottom: 0; }
.ln-cti-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 160px;
}
.ln-cti-check-label input[type="checkbox"] { accent-color: #fbbf24; cursor: pointer; }
.ln-cti-name-input {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 5px;
    color: #e2e8f0;
    font-size: 12px;
    padding: 3px 8px;
    flex: 1;
    min-width: 120px;
}
.ln-cti-name-input:focus { outline: none; border-color: #fbbf24; }
.ln-cti-save-btn {
    background: #78350f;
    border: 1px solid #92400e;
    border-radius: 5px;
    color: #fbbf24;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.ln-cti-save-btn:hover { background: #92400e; }

/* ── Practice tool-gate banner (amber — pending tools warning) ───────────── */
.ln-practice-banner.ln-practice-banner-tool-gate {
    background: linear-gradient(135deg, #0d0a02 0%, #0d0b04 100%);
    border-color: #3a2e00;
    border-left-color: #f59e0b;
    margin-bottom: 12px;
}
.ln-practice-banner.ln-practice-banner-tool-gate .ln-practice-banner-title { color: #f59e0b; }
.ln-practice-banner.ln-practice-banner-tool-gate .ln-practice-banner-sub   { color: #a16207; }

.ln-tool-gate-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
}
.ln-tool-gate-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: #0f0b02;
    border-radius: 6px;
    border: 1px solid #292100;
}
.ln-tool-gate-name {
    font-weight: 600;
    color: #fbbf24;
    font-size: 12px;
    flex: 1;
    min-width: 120px;
}
.ln-tool-gate-type {
    font-size: 10px;
    color: #78716c;
    background: #1c1207;
    border: 1px solid #292100;
    border-radius: 4px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   AKI-1 — Target Agent Toggle Buttons (Course Modal)
   ══════════════════════════════════════════════════════════════════════════ */
.ln-agent-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ln-agent-btn {
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    transition: all .15s;
}
.ln-agent-btn:hover { border-color: #555; color: #ccc; }
.ln-agent-btn.active {
    background: #0d1a0d;
    border-color: #22c55e;
    color: #6ee7b7;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   AKI-4 — Bar Exam Dashboard
   ══════════════════════════════════════════════════════════════════════════ */
.ln-bar-exam-panel {
    margin: 0 16px 16px;
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
}

.ln-bar-exam-wrap {
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 16px;
}

.ln-bar-exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ln-bar-exam-title {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
}

.ln-exam-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.ln-exam-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ln-exam-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ln-exam-agent-name {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}

/* Clearance stage badges */
.ln-clearance-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ln-clearance-sandbox {
    background: #1c1c00; color: #facc15; border: 1px solid #3a3a00;
}
.ln-clearance-demo {
    background: #001a1c; color: #22d3ee; border: 1px solid #003a3f;
}
.ln-clearance-production {
    background: #001a0d; color: #22c55e; border: 1px solid #00402a;
}

.ln-exam-tools-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 20px;
}

.ln-exam-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ln-exam-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}
.ln-exam-stage   { color: #888; min-width: 70px; }
.ln-exam-score   { font-weight: 600; }
.ln-exam-score.pass    { color: #22c55e; }
.ln-exam-score.fail    { color: #f87171; }
.ln-exam-score.pending { color: #fbbf24; }
.ln-exam-date    { color: #555; font-size: 10px; }

.ln-exam-approve-btn {
    font-size: 10px !important;
    padding: 2px 8px !important;
}

.ln-exam-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Score modal task rows */
.ln-score-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #1a1a1a;
    font-size: 13px;
}
.ln-score-task-num  { color: #6366f1; font-weight: 700; min-width: 50px; }
.ln-score-task-desc { flex: 1; color: #aaa; }
.ln-score-pass      { display: flex; align-items: center; gap: 6px; color: #6ee7b7; cursor: pointer; }


/* ══════════════════════════════════════════════════════════════════════════════
   Training Log Window  (.ln-training-log-win / .ln-tlog-*
   Slides up from bottom-right while ZTH training runs after a practice cycle.
   Disappears automatically when training finishes and next cycle auto-starts.
══════════════════════════════════════════════════════════════════════════════ */

/* Root fixed-position panel — starts off-screen, slides in on .visible */
.ln-training-log-win {
    position: fixed;
    bottom: -440px;           /* off-screen by default */
    right: 24px;
    width: 450px;
    max-width: calc(100vw - 32px);
    background: #080818;
    border: 1px solid #1e1e40;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(124,111,205,0.15);
    z-index: 8500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-primary, 'Inter', sans-serif);
}

.ln-training-log-win.visible {
    bottom: 0;
}

/* Collapsed: hides body + footer, only header + status visible */
.ln-training-log-win.collapsed .ln-tlog-body,
.ln-training-log-win.collapsed .ln-tlog-footer {
    display: none;
}

/* Header row */
.ln-tlog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 9px;
    background: linear-gradient(90deg, #0a0a22 0%, #120e2a 100%);
    border-bottom: 1px solid #1e1e40;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

.ln-tlog-title {
    font-size: 13px;
    font-weight: 700;
    color: #d4ccff;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Spinning cog icon in the title — reuses the existing ln-spin keyframes */
.ln-tlog-spinner {
    display: inline-block;
    font-style: normal;
    animation: ln-spin 1.6s linear infinite;
    flex-shrink: 0;
}

.ln-tlog-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Override ghost button for tighter look inside the window */
.ln-tlog-collapse-btn,
.ln-tlog-close-btn {
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
}

/* Status row — pulsing dot + one-liner */
.ln-tlog-status-row {
    padding: 7px 14px;
    font-size: 11px;
    color: #7c8baa;
    background: #05050f;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #0d0d22;
    flex-shrink: 0;
}

/* Animated pulsing dot */
.ln-tlog-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c6fcd;
    flex-shrink: 0;
    animation: ln-tlog-pulse-anim 1.8s ease-in-out infinite;
}

@keyframes ln-tlog-pulse-anim {
    0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 0 rgba(124,111,205,0.4); }
    50%       { opacity: 0.7; transform: scale(1.25); box-shadow: 0 0 0 5px transparent; }
}

/* Scrollable log body */
.ln-tlog-body {
    flex: 1;
    max-height: 270px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}

.ln-tlog-loading,
.ln-tlog-empty {
    font-size: 12px;
    color: #333;
    text-align: center;
    padding: 18px;
    font-style: italic;
}

/* Individual log entry card */
.ln-tlog-entry {
    background: #0a0a1e;
    border: 1px solid #1e1e32;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 11px;
    transition: border-color 0.2s;
}

.ln-tlog-entry-error {
    border-color: #7f1d1d;
    background: #110508;
}

.ln-tlog-entry-success {
    border-color: #14532d;
    background: #050f09;
}

.ln-tlog-entry-title {
    color: #c4b5fd;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.45;
    word-break: break-word;
}

.ln-tlog-entry-error   .ln-tlog-entry-title { color: #fca5a5; }
.ln-tlog-entry-success .ln-tlog-entry-title { color: #86efac; }

.ln-tlog-entry-body {
    color: #7c8baa;
    font-size: 10.5px;
    line-height: 1.45;
    margin-bottom: 2px;
    word-break: break-word;
    white-space: pre-wrap;
}

.ln-tlog-entry-ts {
    font-size: 9.5px;
    color: #333;
    margin-top: 3px;
}

/* Footer strip */
.ln-tlog-footer {
    padding: 5px 14px;
    font-size: 10px;
    color: #2a2a44;
    background: #05050e;
    border-top: 1px solid #0d0d22;
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar */
.ln-tlog-body::-webkit-scrollbar { width: 4px; }
.ln-tlog-body::-webkit-scrollbar-track { background: transparent; }
.ln-tlog-body::-webkit-scrollbar-thumb { background: #1e1e32; border-radius: 2px; }


/* ── Aviation Practice Modal ─────────────────────────────────── */
.avi-practice-modal {
    max-width: 860px !important;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.avi-practice-modal .ln-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.avi-practice-loading,
.avi-practice-empty {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 14px;
}
.avi-practice-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #0d0d1a;
    border: 1px solid #1a1a2e;
    border-radius: 6px;
    font-size: 13px;
    color: #ccc;
    flex-wrap: wrap;
    gap: 8px;
}

/* Tier accordion */
.avi-practice-tiers { display: flex; flex-direction: column; gap: 10px; }

.avi-practice-tier {
    border: 1px solid #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
}
.avi-practice-tier-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #0d0d1a;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.avi-practice-tier-header:hover { background: #111122; }

.avi-tier-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 3px 8px;
    flex-shrink: 0;
}
.avi-tier-name { font-size: 13px; font-weight: 600; color: #ddd; flex: 1; }
.avi-tier-count { font-size: 12px; color: #666; }
.avi-tier-chevron { color: #555; font-size: 11px; transition: transform .2s; }
.avi-practice-tier-body.collapsed { display: none; }
.avi-practice-tier-body.collapsed + .avi-tier-chevron { transform: rotate(-90deg); }

/* Exercise cards */
.avi-practice-tier-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #080810;
    padding: 8px;
    gap: 8px;
}
.avi-exercise-card {
    background: #0d0d1a;
    border: 1px solid #1a1a2e;
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.avi-exercise-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.avi-exercise-num {
    font-size: 11px;
    color: #555;
    font-family: monospace;
    min-width: 28px;
}
.avi-exercise-type {
    font-size: 11px;
    background: #1a1a2e;
    color: #888;
    border-radius: 4px;
    padding: 2px 7px;
    text-transform: capitalize;
}
.avi-cite-badge {
    font-size: 11px;
    background: rgba(240,98,146,.12);
    color: #f06292;
    border-radius: 4px;
    padding: 2px 7px;
}
.avi-exercise-loc {
    font-size: 11px;
    color: #4fc3f7;
    margin-left: auto;
}
.avi-exercise-brief {
    font-size: 13px;
    color: #ccc;
    line-height: 1.6;
}
.avi-exercise-source {
    font-size: 12px;
}
.avi-exercise-source summary {
    color: #555;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.avi-exercise-source summary:hover { color: #888; }
.avi-exercise-source-text {
    margin-top: 8px;
    padding: 10px 12px;
    background: #050508;
    border: 1px solid #111;
    border-radius: 4px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    font-family: monospace;
}

/* ── Aviation Practice — Citation Card (shown on every exercise) ─────────── */
.avi-citation-card {
    margin: 8px 0 4px;
    padding: 8px 12px;
    background: rgba(79,195,247,.06);
    border: 1px solid rgba(79,195,247,.18);
    border-left: 3px solid #4fc3f7;
    border-radius: 5px;
}
.avi-citation-card.avi-citation-required {
    background: rgba(240,98,146,.06);
    border-color: rgba(240,98,146,.2);
    border-left-color: #f06292;
}
.avi-citation-card-header {
    font-size: 11px;
    font-weight: 600;
    color: #4fc3f7;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.avi-citation-required .avi-citation-card-header { color: #f06292; }
.avi-cite-req-badge {
    font-size: 10px;
    font-weight: 400;
    background: rgba(240,98,146,.15);
    color: #f06292;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: auto;
}
.avi-citation-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.avi-cite-book {
    font-size: 12px;
    color: #e2e8f0;
    font-weight: 500;
}
.avi-cite-chapter {
    font-size: 11px;
    color: #4fc3f7;
    background: rgba(79,195,247,.08);
    border-radius: 3px;
    padding: 1px 6px;
}
.avi-cite-section {
    font-size: 11px;
    color: #aaa;
    font-style: italic;
}
.avi-cite-pages {
    font-size: 11px;
    color: #81c784;
    font-weight: 600;
    margin-left: auto;
}

/* View Practice button outline variant */
.btn-avi-sm-outline {
    background: transparent;
    border-color: #2a3a4a;
    color: #4fc3f7;
}
.btn-avi-sm-outline:hover { background: rgba(79,195,247,.08); }

.btn-avi-sm-danger {
    background: transparent;
    border-color: #5a2a2a;
    color: #ef9a9a;
}
.btn-avi-sm-danger:hover { background: rgba(239,83,80,.12); border-color: #ef5350; color: #ff8a80; }

/* ═══════════════════════════════════════════════════════════════════════════
   ✈️  AVIATION LIBRARY — Main Panel CSS
   Panel layout: avi-panel-inner > avi-panel-header + avi-body
   Body columns: avi-books-sidebar | avi-chapters-pane | avi-qa-pane
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   📖 BOOKS LIBRARY
   ═══════════════════════════════════════════════════════════════════════════ */
.ln-books-panel {
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}
.ln-books-wrap {
    background: #06060f;
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 900px;
}
.ln-books-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.ln-books-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ln-book-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #0a0a18;
    border: 1px solid #1a1a2e;
    border-radius: 6px;
    transition: background .15s;
}
.ln-book-card:hover { background: #0d0d1e; }
.ln-book-card.ln-book-linked { border-color: #2d5a3a; }
.ln-book-icon { font-size: 22px; line-height: 1; flex-shrink: 0; padding-top: 2px; }
.ln-book-info { flex: 1; min-width: 0; }
.ln-book-title { font-size: 14px; font-weight: 600; color: #e2e8f0; margin-bottom: 3px; }
.ln-book-meta  { font-size: 12px; color: #64748b; margin-bottom: 2px; }
.ln-book-linked-badge {
    font-size: 12px;
    color: #4caf7a;
    margin-top: 4px;
}
.ln-book-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}
.ln-book-link-select {
    background: #0f0f1e;
    border: 1px solid #2a2a40;
    color: #c9d1d9;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 200px;
}
.ln-book-link-select:focus { outline: none; border-color: #4caf7a; }

/* ── Container ────────────────────────────────────────────────────────────── */
.ln-avi-panel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.avi-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #06060f;
    border-radius: 8px;
    overflow: hidden;
}
/* ── Header ──────────────────────────────────────────────────────────────── */
.avi-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #0a0a18;
    border-bottom: 1px solid #1a1a2e;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.avi-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #e8eaf6;
    white-space: nowrap;
}
.avi-subtitle {
    font-size: 11px;
    color: #5a6a8a;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avi-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
/* ── Body (3-column layout) ──────────────────────────────────────────────── */
.avi-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* ── Left: Books sidebar ──────────────────────────────────────────────────── */
.avi-books-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1a1a2e;
    overflow-y: auto;
    background: #07070e;
}
.avi-books-sidebar::-webkit-scrollbar { width: 4px; }
.avi-books-sidebar::-webkit-scrollbar-track { background: transparent; }
.avi-books-sidebar::-webkit-scrollbar-thumb { background: #1e1e32; border-radius: 2px; }
.avi-sidebar-label {
    padding: 8px 12px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #4a5470;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}
/* ── Book card ─────────────────────────────────────────────────────────────── */
.avi-book-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid #0f0f1e;
    transition: background .15s;
}
.avi-book-card:hover { background: #0e0e20; }
.avi-book-card.active { background: #0d1428; border-left: 2px solid #4fc3f7; }
.avi-book-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
}
.avi-book-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.avi-book-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #c8d0e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avi-book-meta {
    font-size: 10px;
    color: #5a6a8a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avi-book-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.avi-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    font-weight: 500;
    background: #1a1a2e;
    color: #7c8baa;
}
.avi-status-ingested  { background: #0a2818; color: #4ade80; }
.avi-status-pending   { background: #1a1510; color: #facc15; }
.avi-status-parsing   { background: #0d1428; color: #60a5fa; }
.avi-status-embedding { background: #0d1428; color: #a78bfa; }
.avi-status-error     { background: #280a0a; color: #f87171; }

/* Professional Textbook badge */
.avi-prof-badge {
    display: inline-block;
    font-size: 9px;
    background: #2d1b4e;
    color: #c084fc;
    border: 1px solid #6d28d9;
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Professional Textbook toggle */
.avi-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin-bottom: 2px;
}
.avi-toggle-check { accent-color: #7c3aed; cursor: pointer; }
.avi-toggle-label { font-size: 10px; color: #a78bfa; }

/* Train button */
.btn-avi-train {
    background: #2d1b4e;
    border-color: #7c3aed;
    color: #c084fc;
}
.btn-avi-train:hover { background: #3b1f6a; border-color: #a78bfa; }
.btn-avi-train:disabled { opacity: 0.5; cursor: not-allowed; }

.avi-book-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    border-top: 1px solid #0f0f1e;
}
.avi-empty {
    padding: 20px 12px;
    font-size: 11px;
    color: #3a4a60;
    text-align: center;
    line-height: 1.5;
}
/* ── Middle: Chapters pane ─────────────────────────────────────────────────── */
.avi-chapters-pane {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1a1a2e;
    background: #07070e;
    overflow: hidden;
}
.avi-chapters-header {
    padding: 8px 12px;
    font-size: 11px;
    color: #a0b0cc;
    border-bottom: 1px solid #0f0f1e;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.avi-chapters-header strong {
    font-size: 11.5px;
    color: #c8d0e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avi-book-type-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    background: #0d2040;
    color: #4fc3f7;
    border: 1px solid #1a3a5c;
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 2px;
}
.avi-chapters-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.avi-chapters-list::-webkit-scrollbar { width: 4px; }
.avi-chapters-list::-webkit-scrollbar-track { background: transparent; }
.avi-chapters-list::-webkit-scrollbar-thumb { background: #1e1e32; border-radius: 2px; }
.avi-chapter-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 12px;
    font-size: 10px;
    border-bottom: 1px solid #0a0a18;
    transition: background .12s;
    cursor: default;
}
.avi-chapter-row:hover { background: #0e0e20; }
.avi-chapter-code {
    font-family: monospace;
    font-size: 10px;
    color: #4fc3f7;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 40px;
}
.avi-chapter-title {
    flex: 1;
    color: #8090a8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avi-chapter-pages {
    color: #4a5470;
    font-size: 9.5px;
    flex-shrink: 0;
    white-space: nowrap;
}
.avi-chapter-chunks {
    color: #3a4456;
    font-size: 9.5px;
    flex-shrink: 0;
}
/* ── Right: Captain Q&A pane ─────────────────────────────────────────────── */
.avi-qa-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #06060f;
}
.avi-qa-header {
    padding: 10px 14px 6px;
    border-bottom: 1px solid #0f0f1e;
    flex-shrink: 0;
}
.avi-qa-header strong {
    font-size: 13px;
    color: #c8d0e8;
}
.avi-qa-subtitle {
    display: block;
    font-size: 10.5px;
    color: #4a5878;
    margin-top: 3px;
}
.avi-qa-examples {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid #0a0a18;
    flex-shrink: 0;
}
.avi-qa-example-label {
    font-size: 10px;
    color: #4a5470;
    flex-shrink: 0;
}
.avi-qa-chip {
    font-size: 10px;
    padding: 3px 9px;
    background: #0d1428;
    border: 1px solid #1a2d48;
    border-radius: 12px;
    color: #7ab8d8;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.avi-qa-chip:hover { background: #112040; border-color: #4fc3f7; color: #b8e4f7; }
.avi-qa-input-row {
    display: flex;
    gap: 8px;
    padding: 8px 14px;
    flex-shrink: 0;
    align-items: flex-start;
}
.avi-qa-input {
    flex: 1;
    background: #08081a;
    border: 1px solid #1a2040;
    border-radius: 6px;
    color: #c8d0e8;
    font-size: 12px;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color .15s;
}
.avi-qa-input:focus { outline: none; border-color: #4fc3f7; }
.avi-qa-input::placeholder { color: #3a4a60; }
.avi-qa-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.avi-select {
    background: #0a0a18;
    border: 1px solid #1a2040;
    border-radius: 5px;
    color: #a0b0cc;
    font-size: 11px;
    padding: 5px 8px;
    cursor: pointer;
}
.avi-select:focus { outline: none; border-color: #4fc3f7; }
/* Q&A result area */
.avi-qa-result {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 10px;
    min-height: 0;
}
.avi-qa-result::-webkit-scrollbar { width: 4px; }
.avi-qa-result::-webkit-scrollbar-track { background: transparent; }
.avi-qa-result::-webkit-scrollbar-thumb { background: #1e1e32; border-radius: 2px; }
.avi-qa-loading {
    padding: 14px;
    font-size: 12px;
    color: #4a6080;
    text-align: center;
}
.avi-qa-error {
    padding: 10px;
    font-size: 12px;
    color: #f87171;
    background: #1a0808;
    border: 1px solid #3a1515;
    border-radius: 5px;
    margin: 8px 0;
}
.avi-qa-answer-block {
    background: #08081a;
    border: 1px solid #1a2040;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 8px 0;
}
.avi-qa-answer-text {
    font-size: 12.5px;
    color: #c0cce0;
    line-height: 1.65;
}
.avi-citations-header {
    font-size: 10.5px;
    font-weight: 600;
    color: #4a6080;
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.avi-citation-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}
/* Inline citation within Q&A answer */
.avi-citation-cards .avi-citation-card {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #0a1628;
    border: 1px solid #1e3058;
    border-left: 3px solid #3b82f6;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 10.5px;
}
.avi-cit-book    { color: #60a5fa; font-weight: 600; }
.avi-cit-chapter { color: #93c5fd; }
.avi-cit-section { color: #7c8baa; font-style: italic; }
.avi-cit-page    { color: #4a6080; font-size: 10px; }
.avi-cit-score   {
    font-size: 9.5px;
    background: #0d2040;
    color: #4fc3f7;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: auto;
}
.avi-ref-icon { color: #4fc3f7; }
.btn-avi-copy {
    background: transparent;
    border: 1px solid #1a2a40;
    border-radius: 3px;
    color: #5a7090;
    font-size: 10px;
    padding: 1px 5px;
    cursor: pointer;
    margin-left: auto;
}
.btn-avi-copy:hover { background: #0d2040; color: #4fc3f7; border-color: #4fc3f7; }
.avi-qa-latency {
    font-size: 10px;
    color: #3a4a60;
    padding: 3px 0;
    text-align: right;
}
/* Q&A History */
.avi-qa-history-header {
    padding: 6px 14px 3px;
    font-size: 10px;
    font-weight: 600;
    color: #4a5470;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.avi-qa-history {
    flex-shrink: 0;
    border-top: 1px solid #0f0f1e;
    max-height: 120px;
    overflow-y: auto;
}
.avi-qa-history::-webkit-scrollbar { width: 4px; }
.avi-qa-history::-webkit-scrollbar-track { background: transparent; }
.avi-qa-history::-webkit-scrollbar-thumb { background: #1e1e32; border-radius: 2px; }
.avi-hist-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 14px;
    border-bottom: 1px solid #0a0a18;
    cursor: pointer;
    transition: background .12s;
}
.avi-hist-row:hover { background: #0d0d1f; }
.avi-hist-q {
    font-size: 11px;
    color: #8090a8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avi-hist-meta {
    font-size: 9.5px;
    color: #3a4a60;
}
.avi-hist-empty {
    padding: 10px 14px;
    font-size: 11px;
    color: #3a4a60;
}
/* ── Aviation Buttons (full-size) ────────────────────────────────────────── */
.btn-avi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.btn-avi-primary {
    background: #0d2a4a;
    border-color: #1e4a7c;
    color: #7fc8f0;
}
.btn-avi-primary:hover { background: #112f52; border-color: #4fc3f7; color: #b8e4f7; }
.btn-avi-secondary {
    background: #0e0e20;
    border-color: #2a2a44;
    color: #8090a8;
}
.btn-avi-secondary:hover { background: #14142a; border-color: #4a4a70; color: #c0cce0; }
.btn-avi-danger {
    background: #2a0d0d;
    border-color: #5a1a1a;
    color: #f87171;
}
.btn-avi-danger:hover { background: #380f0f; border-color: #ef5350; color: #ff8a80; }
/* ── Token Manager ─────────────────────────────────────────────────────────── */
.avi-token-create-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.avi-token-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.avi-token-table th {
    background: #0a0a18;
    color: #6a7a90;
    font-weight: 600;
    font-size: 10.5px;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #1a1a2e;
}
.avi-token-table td {
    padding: 6px 10px;
    color: #8090a8;
    border-bottom: 1px solid #0f0f1e;
    vertical-align: middle;
}
.avi-token-table tr:hover td { background: #0a0a1c; }
.avi-tok-revoked td { color: #3a4a60; text-decoration: line-through; opacity: .65; }
/* ── Audit Stats ────────────────────────────────────────────────────────────── */
.avi-audit-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 8px 0 12px;
    font-size: 12px;
    color: #8090a8;
    border-bottom: 1px solid #0f0f1e;
    margin-bottom: 10px;
}
.avi-audit-stats strong { color: #c0cce0; }

/* ── Revoke-token inline button (token table) ─────────────── */
.btn-avi-danger-sm {
    background: #2a0808;
    border: 1px solid #5a1515;
    border-radius: 4px;
    color: #f87171;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-avi-danger-sm:hover { background: #380a0a; border-color: #ef5350; color: #ff8a80; }

/* ── Training progress bar ──────────────────────────────────────────────────── */
.avi-train-progress {
    margin-top: 6px;
}
.avi-train-bar-wrap {
    height: 5px;
    background: #0f0f1e;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.avi-train-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 3px;
    transition: width 0.6s ease;
}
@keyframes avi-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}
.avi-train-bar-pulse {
    animation: avi-pulse 1.4s ease-in-out infinite;
}
.avi-train-bar-label {
    font-size: 10.5px;
    color: #8090a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ── Stop-training button ───────────────────────────────────────────────────── */
.btn-avi-stop {
    background: #2a0a0a;
    border: 1px solid #7f1d1d;
    border-radius: 4px;
    color: #fca5a5;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-avi-stop:hover { background: #3b0f0f; border-color: #ef4444; color: #ff8a80; }