html {
    height: auto;
    overflow-y: scroll;
}

body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 20px;
    padding-bottom: 80px;
}

#app {
    display: block;
    height: auto;
    overflow: visible;
}

.header {
    position: static !important;
    z-index: auto;
    margin-bottom: 0;
}

.container {
    overflow: visible !important;
}

.course-selection {
    overflow: visible;
}

/* Hide any slide-related content on course selection page */
#courseSelection .key-points,
#courseSelection .info-box,
#courseSelection .quiz-container,
#courseSelection .quiz-options,
#courseSelection .slide-content,
.course-presentation[style*="display: none"] * {
    display: none !important;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.course-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, hsl(40,60%, 50%), hsl(40,60%, 40%));
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: hsl(40,60%, 50%);
}

.course-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, hsl(40,65%, 95%), hsl(40,50%, 98%));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.course-icon i {
    font-size: 1.75rem;
    color: hsl(40,65%, 35%);
}

.course-card h3 {
    color: hsl(40,65%, 25%);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.course-card p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.course-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.slides-count {
    font-size: 0.85rem;
    color: #94a3b8;
}

.completion-badge {
    display: none;
    color: hsl(40,60%, 45%);
}

.course-duration {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Objectives / source / author / review date / crops, on the course detail
   header. Empty and hidden — via :empty — for every seeded course today;
   see _renderCourseProvenance() in learning-navigation.js. */
.course-provenance:empty { display: none; }
.course-provenance { margin: 0.75rem 0 0; }
.course-prov-objectives { margin-bottom: 0.5rem; }
.course-prov-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}
.course-prov-objectives ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.course-prov-meta {
    font-size: 0.82rem;
    color: #94a3b8;
}

.completion-badge.completed {
    display: block;
}

.intro-section {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, hsl(40,65%, 96%), white);
}

.intro-section h2 {
    color: hsl(40,65%, 25%);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.intro-section p {
    color: #64748b;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.slide-container {
    padding: 2rem;
    padding-bottom: 100px;
    background: #f8fafc;
    overflow: visible;
}

.slide-content {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    min-height: 400px;
}

.slide-content h2 {
    color: hsl(40,65%, 25%);
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    border-bottom: 3px solid hsl(40,60%, 50%);
    padding-bottom: 0.75rem;
}

.slide-content h3 {
    color: hsl(40,55%, 35%);
    margin: 1.5rem 0 1rem;
    font-size: 1.25rem;
}

.slide-content p {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.slide-content ul, .slide-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
    color: #475569;
}

.slide-content li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.info-box {
    background: linear-gradient(135deg, hsl(40,70%, 96%), hsl(40,60%, 98%));
    border-left: 4px solid hsl(40,60%, 45%);
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.info-box.warning {
    background: linear-gradient(135deg, hsl(45, 90%, 96%), hsl(45, 80%, 98%));
    border-left-color: hsl(45, 90%, 45%);
}

.info-box.example {
    background: linear-gradient(135deg, hsl(210, 70%, 96%), hsl(210, 60%, 98%));
    border-left-color: hsl(210, 60%, 45%);
}

.navigation-controls {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    border-top: 1px solid #e2e8f0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.navigation-controls.visible {
    display: flex;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prev-btn {
    background: #f1f5f9;
    color: #475569; /* 6.9:1 on the slate tint; #64748b was 4.3 (css_contrast_test) */
}

.prev-btn:hover:not(:disabled) {
    background: #e2e8f0;
}

.next-btn {
    background: linear-gradient(135deg, hsl(40,60%, 50%), hsl(40,60%, 40%));
    color: white;
}

.next-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 164, 92, 0.3);
}

.slide-dots {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 400px;
}

.slide-dot {
    /* Real <button>s now (keyboard focus, an accessible name) — reset the
       native chrome that comes with the tag. */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    font: inherit;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
}
.slide-dot:focus-visible {
    outline: 2px solid hsl(40,60%,45%);
    outline-offset: 2px;
}

.slide-dot.active {
    background: hsl(40,60%, 45%);
    transform: scale(1.2);
}

/* Visited, not completed — reaching a slide is not the same as answering the
   quiz correctly. See updateSlideDots() in learning-navigation.js. */
.slide-dot.visited {
    background: hsl(40,60%, 70%);
}

/* The quiz slide's own dot, once the course record says it was passed — the
   one dot allowed to claim understanding rather than attendance. */
.slide-dot.quiz-passed {
    background: hsl(145,55%,45%);
}
.slide-dot.quiz-passed::after {
    content: '\2713';
    display: block;
    font-size: 8px;
    line-height: 12px;
    text-align: center;
    color: #fff;
}

.slide-counter {
    font-weight: 600;
    color: #475569; /* as .prev-btn */
    background: #f1f5f9;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.course-progress .progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.course-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(40,60%, 50%), hsl(40,60%, 40%));
    transition: width 0.3s ease;
    border-radius: 3px;
}

.quiz-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 1.5rem;
}

.quiz-question {
    margin-bottom: 1.5rem;
}

.quiz-question h4 {
    color: hsl(40,65%, 25%);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.quiz-option:hover {
    border-color: hsl(40,60%, 50%);
    background: hsl(40,70%, 98%);
}

.quiz-option.selected {
    border-color: hsl(40,60%, 45%);
    background: hsl(40,70%, 94%);
    box-shadow: 0 0 0 3px hsla(145, 60%, 45%, 0.2);
}

.quiz-option.selected::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1rem;
    color: hsl(40,60%, 45%);
}

.quiz-option {
    position: relative;
}

.quiz-option.correct {
    border-color: hsl(40,70%, 40%);
    background: hsl(40,70%, 94%);
}

/* Wraps onto its own line inside the flex row rather than squeezing beside
   the radio + option text. Empty and absent for every seeded question today
   — explanation_en/nl are new columns (20260907000000), null until authored. */
.quiz-option-explain {
    flex-basis: 100%;
    margin: 0.4rem 0 0;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(0,0,0,0.12);
    font-size: 0.85rem;
    line-height: 1.45;
}

.quiz-option.incorrect {
    border-color: hsl(0, 70%, 50%);
    background: hsl(0, 70%, 96%);
}

.quiz-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: hsl(40,60%, 45%);
}

.submit-quiz-btn {
    margin-top: 1.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, hsl(40,60%, 50%), hsl(40,60%, 40%));
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-quiz-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 164, 92, 0.3);
}

.quiz-result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
}

.quiz-result.passed {
    background: hsl(40,70%, 94%);
    border: 2px solid hsl(40,60%, 45%);
}

.quiz-result.failed {
    background: hsl(45, 90%, 94%);
    border: 2px solid hsl(45, 80%, 50%);
}

.quiz-result h3 {
    margin-bottom: 0.5rem;
}

.completion-message {
    text-align: center;
    padding: 3rem;
}

.completion-message i {
    font-size: 4rem;
    color: hsl(40,60%, 45%);
    margin-bottom: 1.5rem;
}

.completion-message h3 {
    color: hsl(40,65%, 25%);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.home-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.home-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 1rem;
}

.course-title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-to-overview-btn {
    background: linear-gradient(135deg, hsl(40,60%, 50%), hsl(40,60%, 40%));
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.back-to-overview-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 164, 92, 0.3);
}

.presentation-header {
    background: white;
    padding: 1rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    position: static !important;
    flex-shrink: unset !important;
}

.course-presentation {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
}

.key-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.key-point {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid hsl(40,60%, 45%);
}

.key-point h4 {
    color: hsl(40,55%, 35%);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.key-point p {
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 768px) {
    .courses-grid {
        grid-template-columns: 1fr;
    }

    .slide-content {
        padding: 1.5rem;
    }

    .navigation-controls {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .slide-dots {
        order: 3;
        width: 100%;
    }
}

/* Slide images uploaded via Supabase Storage */
.slide-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
    display: block;
}

/* Loading / error states for course grid */
.loading-courses {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* Skeleton loading cards */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.course-card--skeleton {
    pointer-events: none;
    cursor: default;
}
.course-card--skeleton:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.skeleton-icon,
.skeleton-line,
.skeleton-bar,
.skeleton-btn {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--surface) 50%, var(--bg-card) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-xs);
}

.skeleton-icon               { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.skeleton-line               { height: 0.85rem; margin-bottom: 0.6rem; }
.skeleton-line--title        { height: 1.1rem; width: 70%; margin-bottom: 0.75rem; }
.skeleton-line--body         { width: 90%; }
.skeleton-line--short        { width: 60%; }
.skeleton-line--stat         { width: 4rem; height: 0.75rem; }
.skeleton-bar                { height: 4px; width: 100%; margin: 0.75rem 0; border-radius: 2px; }
.skeleton-footer             { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; }
.skeleton-btn                { width: 5rem; height: 1.6rem; border-radius: var(--radius-sm); }

/* Error state */
.error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

/* ============================================================
   Dark theme adjustments — match dashboard / tools page style.
   Appended after all original light-mode rules so these win on
   the same specificity. Surfaces and text colours only — layout,
   spacing, and accent green are unchanged.
   ============================================================ */

/* Container / intro */
.intro-section {
  background: linear-gradient(135deg, rgba(201,164,92,0.12), rgba(15,33,23,0.6));
}
.intro-section h2  { color: var(--text-primary); }
.intro-section p   { color: var(--text-secondary); }

/* Course grid cards */
.course-card {
  background: var(--bg-card);
  border-color: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.course-card:hover {
  background: var(--bg-card-hover);
  border-color: hsl(40,60%, 50%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.course-card h3            { color: var(--text-primary); }
.course-card p             { color: var(--text-secondary); }
.course-icon               { background: linear-gradient(135deg, rgba(201,164,92,0.20), rgba(201,164,92,0.08)); }
.course-icon i             { color: hsl(40,60%, 55%); }
.slides-count              { color: var(--text-muted); }

/* Slide container & content card */
.slide-container { background: var(--bg-deep); }
.slide-content {
  background: var(--bg-card);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.slide-content h2 {
  color: var(--text-primary);
  border-bottom-color: hsl(40,60%, 50%);
}
.slide-content h3 { color: hsl(40,50%, 65%); }
.slide-content p,
.slide-content ul,
.slide-content ol { color: var(--text-secondary); }
.slide-content li { color: var(--text-secondary); }

/* Info boxes — tinted overlays on dark instead of pastel pages */
.info-box {
  background: linear-gradient(135deg, rgba(201,164,92,0.12), rgba(201,164,92,0.04));
  color: var(--text-primary);
}
.info-box.warning {
  background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.04));
}
.info-box.example {
  background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(59,130,246,0.04));
}

/* Bottom navigation strip */
.navigation-controls {
  background: var(--bg-card);
  border-top-color: var(--bg-card-hover);
}
.prev-btn {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}
.prev-btn:hover:not(:disabled) { background: #2a3548; }

.slide-dot                       { background: var(--bg-card-hover); }
.slide-counter {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}
.course-progress .progress-bar   { background: var(--bg-card-hover); }

/* Quiz */
.quiz-container { background: var(--bg-card-hover); }
.quiz-option {
  background: var(--bg-card);
  border-color: var(--bg-card-hover);
  color: var(--text-primary);
}
.quiz-option:hover           { background: rgba(201,164,92,0.08); }
.quiz-option.selected        { background: rgba(201,164,92,0.15); }
.quiz-option.correct         { background: rgba(34,197,94,0.15); }
.quiz-option.incorrect       { background: rgba(239,68,68,0.15); }
.quiz-question h4            { color: var(--text-primary); }
.quiz-option-explain         { border-top-color: var(--bg-card-hover); color: var(--text-secondary); }

.course-duration,
.course-prov-meta,
.course-prov-label           { color: var(--text-secondary); }

.quiz-result.passed {
  background: rgba(34,197,94,0.12);
  color: var(--text-primary);
}
.quiz-result.failed {
  background: rgba(245,158,11,0.12);
  color: var(--text-primary);
}

/* Completion screen */
.completion-message h3       { color: hsl(40,50%, 65%); }

/* Course presentation header */
.presentation-header {
  background: var(--bg-card);
  border-bottom-color: var(--bg-card-hover);
}

/* Key-points grid inside slides */
.key-point {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.key-point h4 { color: hsl(40,50%, 65%); }
.key-point p  { color: var(--text-secondary); }

/* ============================================================
   Compact typography — fit more content per slide.
   Reduces heading sizes, body line-height, and inner padding.
   ============================================================ */

.intro-section          { padding: 2rem 1.5rem; }
.intro-section h2       { font-size: 1.55rem; margin-bottom: 0.6rem; }
.intro-section p        { font-size: 0.95rem; }

.course-card            { padding: 1.15rem; }
.course-card h3         { font-size: 1.05rem; margin-bottom: 0.35rem; }
.course-card p          { font-size: 0.82rem; margin-bottom: 0.65rem; line-height: 1.5; }
.course-icon            { width: 48px; height: 48px; margin-bottom: 0.65rem; }
.course-icon i          { font-size: 1.4rem; }
.slides-count           { font-size: 0.78rem; }

.slide-container        { padding: 1.5rem; padding-bottom: 100px; }
.slide-content          { padding: 1.75rem; min-height: 0; }
.slide-content h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom-width: 2px;
}
.slide-content h3       { font-size: 1.05rem; margin: 1rem 0 0.6rem; }
.slide-content p {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0.7rem;
}
.slide-content ul,
.slide-content ol {
  font-size: 0.92rem;
  margin: 0.6rem 0 1rem 1.25rem;
}
.slide-content li       { margin-bottom: 0.4rem; line-height: 1.5; }

.info-box               { padding: 0.85rem 1rem; margin: 1rem 0; }
.info-box p             { font-size: 0.88rem; margin-bottom: 0.4rem; }
.info-box p:last-child  { margin-bottom: 0; }

.key-points             { gap: 0.7rem; margin: 1rem 0; }
.key-point              { padding: 0.75rem; }
.key-point h4           { font-size: 0.82rem; margin-bottom: 0.3rem; }
.key-point p            { font-size: 0.82rem; line-height: 1.45; }

.quiz-container         { padding: 1.25rem; margin-top: 1rem; }
.quiz-question h4       { font-size: 0.98rem; margin-bottom: 0.65rem; }
.quiz-option            { padding: 0.7rem 0.9rem; font-size: 0.9rem; }
.submit-quiz-btn        { padding: 0.7rem 1.4rem; font-size: 0.92rem; }

.presentation-header    { padding: 0.75rem 1.5rem; }
.course-title-section h2 { font-size: 1.2rem; }
.slide-counter          { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.back-to-overview-btn   { padding: 0.45rem 0.95rem; font-size: 0.88rem; }

.navigation-controls    { padding: 0.7rem 1.5rem; }
.nav-btn                { padding: 0.6rem 1.15rem; font-size: 0.92rem; }


/* ── The owner's Team block ─────────────────────────────────────────────── */
.learning-team { padding: 0 0 3rem; }
.learning-team-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.learning-team-card h3 { margin: 0 0 0.35rem; font-size: 1.25rem; color: hsl(40,65%, 25%); }
.learning-team-intro { margin: 0 0 1rem; color: #475569; font-size: 0.95rem; }
.learning-team-empty { margin: 0; color: #475569; }
.learning-team-table { overflow-x: auto; }
.learning-team-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.learning-team-table th, .learning-team-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
.learning-team-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; }
.learning-team-table tr:last-child td { border-bottom: none; }
.learning-team-started { font-size: 0.8rem; color: #475569; margin-left: 0.3rem; }
@media (max-width: 768px) {
    .learning-team-table thead { display: none; }
    .learning-team-table tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; }
    .learning-team-table td { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem; border-bottom: none; padding: 0.15rem 0; }
    .learning-team-table td::before { content: attr(data-label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; }
}