/* Course-specific visual treatment. Keep the shared learning experience intact. */
body[data-course-theme="info-s3a"] {
    --primary: #5868d8;
    --primary-light: #8995f1;
    --primary-dark: #4050bd;
    --secondary: #32b8ac;
    --warm-border: #e4e8ff;
    --warm-bg: #f7f8ff;
}

body[data-course-theme="info-s3a"] .step-content,
body[data-course-theme="info-s3a"] .learn-content {
    line-height: 1.8;
}

body[data-course-theme="info-s3a"] .content-with-comic {
    align-items: stretch;
    gap: 24px;
}

body[data-course-theme="info-s3a"] .content-with-comic .text-content {
    flex: 1 1 58%;
    padding: 24px 28px;
    border: 1px solid #e9eaff;
    border-radius: 24px;
    background: linear-gradient(145deg, #fff 0%, #fbfbff 100%);
    box-shadow: 0 14px 34px rgba(69, 82, 176, .08);
}

body[data-course-theme="info-s3a"] .text-content > h3 {
    font-size: clamp(19px, 2.2vw, 24px);
    letter-spacing: .01em;
    border-bottom: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(102, 126, 234, .12), rgba(78, 205, 196, .11));
}

body[data-course-theme="info-s3a"] .story-box,
body[data-course-theme="info-s3a"] .tech-box,
body[data-course-theme="info-s3a"] .fun-fact,
body[data-course-theme="info-s3a"] .tip-box {
    border-radius: 16px;
    padding: 16px 18px;
    margin: 16px 0;
}

body[data-course-theme="info-s3a"] .story-box {
    border: 1px solid #e6eaff;
    background: linear-gradient(135deg, #f5f7ff, #fff);
}

body[data-course-theme="info-s3a"] .tech-box {
    border: 1px solid #ccefe9;
    background: linear-gradient(135deg, #effbf8, #f8fffd);
}

body[data-course-theme="info-s3a"] .image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

body[data-course-theme="info-s3a"] .image-grid .grid-item {
    min-height: 74px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 14px;
    border: 1px solid #e6eaff;
    border-radius: 15px;
    background: #fff;
    color: #4653ad;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(69, 82, 176, .06);
}

body[data-course-theme="info-s3a"] .comic-sidebar {
    border: 1px solid #e5e8ff;
    border-radius: 22px;
    padding: 12px;
    background: linear-gradient(160deg, #f0f3ff, #eafaf7);
    box-shadow: 0 12px 28px rgba(69, 82, 176, .09);
}

body[data-course-theme="info-s3a"] .course-art-fallback {
    min-height: 280px;
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 26px 20px;
    text-align: center;
    border-radius: 16px;
    color: #35429e;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.95) 0 5px, transparent 6px),
        radial-gradient(circle at 82% 30%, rgba(255,255,255,.8) 0 7px, transparent 8px),
        linear-gradient(145deg, #dce4ff 0%, #e6f8f4 100%);
}

body[data-course-theme="info-s3a"] .course-art-fallback[hidden] { display: none !important; }

body[data-course-theme="info-s3a"] .course-art-icon {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 36px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 14px 30px rgba(66, 85, 177, .13);
    font-size: 62px;
    transform: rotate(-4deg);
}

body[data-course-theme="info-s3a"] .course-art-fallback strong {
    max-width: 18ch;
    font-size: 20px;
    line-height: 1.45;
}

body[data-course-theme="info-s3a"] .course-art-fallback small {
    color: #5965a9;
    font-size: 12px;
}

body[data-course-theme="info-s3a"] .course-art-spark {
    position: absolute;
    color: #fff;
    text-shadow: 0 2px 10px rgba(71, 87, 178, .35);
}

body[data-course-theme="info-s3a"] .spark-one { top: 18%; left: 18%; font-size: 28px; }
body[data-course-theme="info-s3a"] .spark-two { right: 17%; bottom: 22%; font-size: 34px; }

body[data-course-theme="info-s3a"] .course-art-orbit {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 50%;
}

/* 三上·信息科技 AI 探索：目录、课卡与学习内容共用一套学习工具视觉 */
body[data-course-theme] .course-overview[hidden] { display: none !important; }
body[data-course-theme] .course-overview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1180px;
    margin: 8px auto 28px;
    padding: clamp(22px, 4vw, 38px) clamp(22px, 5vw, 52px);
    overflow: hidden;
    border: 1px solid #e4e8ff;
    border-radius: 28px;
    background: linear-gradient(112deg, #f0f3ff 0%, #f6fffd 62%, #fff8ee 100%);
    box-shadow: 0 16px 40px rgba(69, 82, 176, .08);
}
body[data-course-theme] .course-overview::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    right: 3%;
    top: -60%;
    border: 1px solid rgba(102, 126, 234, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(102, 126, 234, .035), 0 0 0 48px rgba(50, 184, 172, .035);
    pointer-events: none;
}
body[data-course-theme] .course-overview-copy { position: relative; z-index: 1; max-width: 690px; }
body[data-course-theme] .course-overview-kicker {
    margin: 0 0 10px;
    color: #328f8b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}
body[data-course-theme] .course-overview h3 {
    margin: 0;
    color: #35429e;
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.35;
}
body[data-course-theme] .course-overview-copy > p:not(.course-overview-kicker) {
    max-width: 56ch;
    margin: 12px 0 16px;
    color: #56618f;
    line-height: 1.8;
}
body[data-course-theme] .course-overview-tags { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-course-theme] .course-overview-tags span {
    padding: 6px 11px;
    border: 1px solid rgba(102, 126, 234, .16);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #4d5ab0;
    font-size: 12px;
    font-weight: 700;
}
body[data-course-theme] .course-overview-art {
    position: relative;
    z-index: 1;
    flex: 0 0 clamp(112px, 18vw, 190px);
    width: clamp(112px, 18vw, 190px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 34%;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 38px rgba(67, 82, 174, .14);
    transform: rotate(4deg);
}
body[data-course-theme] .course-overview-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
body[data-course-theme] .levels-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: 20px; }
body[data-course-theme] .info-course-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e5e9ff;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(65, 78, 164, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-course-theme] .info-course-card:hover { transform: translateY(-5px); box-shadow: 0 15px 32px rgba(65, 78, 164, .13); }
body[data-course-theme] .info-course-card.locked { opacity: .68; }
body[data-course-theme] .info-course-art {
    display: grid;
    place-items: center;
    min-height: 174px;
    overflow: hidden;
    background: linear-gradient(145deg, #eff2ff, #effbf8 72%, #fff8ee);
}
body[data-course-theme] .info-course-art img { width: 156px; height: 156px; object-fit: contain; transition: transform .25s ease; }
body[data-course-theme] .info-course-card:hover .info-course-art img { transform: scale(1.06) rotate(-2deg); }
body[data-course-theme] .info-course-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 19px 16px; }
body[data-course-theme] .info-course-card-heading { display: flex; min-height: 23px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
body[data-course-theme] .info-course-index { color: #64817e; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
body[data-course-theme] .info-course-status { padding: 4px 8px; border-radius: 999px; background: #f1f3ff; color: #6470c7; font-size: 11px; font-weight: 700; }
body[data-course-theme] .info-course-status.completed { background: #e8f8f2; color: #218c70; }
body[data-course-theme] .info-course-status.locked { background: #f3f4f7; color: #737b8c; }
body[data-course-theme] .info-course-card .level-title { margin: 0 0 7px; font-size: 17px; }
body[data-course-theme] .info-course-card .level-description { min-height: 39px; margin: 0; }
body[data-course-theme] .info-course-meta { gap: 6px; margin: 14px 0 15px; }
body[data-course-theme] .info-course-meta span { padding: 5px 8px; border-radius: 8px; background: #f5f7ff; color: #65709c; font-size: 11px; }
body[data-course-theme] .info-course-card .level-actions { margin-top: auto; padding-top: 12px; border-color: #eef0fa; }
body[data-course-theme] .info-course-card .btn-start-level { min-height: 44px; border-radius: 12px; font-weight: 800; }
body[data-course-theme] .course-art-icon-image { display: block; width: min(82%, 250px); height: min(82%, 250px); object-fit: contain; filter: drop-shadow(0 12px 18px rgba(56, 72, 158, .14)); }
body[data-course-theme] .course-art-fallback { gap: 10px; }
body[data-course-theme] .course-art-fallback .course-art-icon-image + strong { position: relative; z-index: 1; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.78); }
body[data-course-theme] .info-course-card :focus-visible,
body[data-course-theme] .course-overview a:focus-visible { outline: 3px solid #2ca99e; outline-offset: 3px; }

/* 每课根据学习主题更换提示色，保持相同阅读结构，帮助学生建立内容联想 */
body[data-course-theme][data-lesson-id="1"]  { --lesson-accent:#6879e5; --lesson-wash:#f1f3ff; }
body[data-course-theme][data-lesson-id="2"]  { --lesson-accent:#b27a39; --lesson-wash:#fff7e9; }
body[data-course-theme][data-lesson-id="3"]  { --lesson-accent:#4185c6; --lesson-wash:#edf7ff; }
body[data-course-theme][data-lesson-id="4"]  { --lesson-accent:#299b91; --lesson-wash:#edfaf7; }
body[data-course-theme][data-lesson-id="5"]  { --lesson-accent:#ba6b82; --lesson-wash:#fff2f5; }
body[data-course-theme][data-lesson-id="6"]  { --lesson-accent:#448b78; --lesson-wash:#eef9f3; }
body[data-course-theme][data-lesson-id="7"]  { --lesson-accent:#ae6fb4; --lesson-wash:#faf1fc; }
body[data-course-theme][data-lesson-id="8"]  { --lesson-accent:#56826f; --lesson-wash:#f0f8f1; }
body[data-course-theme][data-lesson-id="9"]  { --lesson-accent:#5575be; --lesson-wash:#f0f4ff; }
body[data-course-theme][data-lesson-id="10"] { --lesson-accent:#cb8a3c; --lesson-wash:#fff8ed; }
body[data-course-theme][data-lesson-id] .content-with-comic .text-content > h3 {
    color: var(--lesson-accent, #4653ad);
    background: linear-gradient(100deg, var(--lesson-wash, #f1f3ff), #fff 88%);
    border-left: 4px solid var(--lesson-accent, #667eea);
}
body[data-course-theme][data-lesson-id] .comic-sidebar {
    border-color: color-mix(in srgb, var(--lesson-accent, #667eea) 22%, white);
    background: linear-gradient(160deg, var(--lesson-wash, #f1f3ff), #fff 92%);
}
body[data-course-theme][data-lesson-id] .story-box {
    border-left: 4px solid var(--lesson-accent, #667eea);
    background: linear-gradient(120deg, var(--lesson-wash, #f1f3ff), #fff 76%);
}
body[data-course-theme][data-lesson-id] .step-progress .progress-fill { background: var(--lesson-accent, #667eea); }

@media (max-width: 700px) {
    body[data-course-theme] .content-with-comic .text-content { padding: 18px; }
    body[data-course-theme] .course-art-fallback { min-height: 220px; }
    body[data-course-theme] .image-grid .grid-item { min-height: 62px; }
    body[data-course-theme] .course-overview { align-items: flex-start; margin: 4px 0 22px; border-radius: 20px; }
    body[data-course-theme] .course-overview-art { flex-basis: 88px; width: 88px; border-radius: 28%; }
    body[data-course-theme] .course-overview-copy > p:not(.course-overview-kicker) { font-size: 14px; }
    body[data-course-theme] .info-course-art { min-height: 148px; }
    body[data-course-theme] .info-course-art img { width: 134px; height: 134px; }
}

/* Shared tokens let every grade keep its own registered course palette. */
body[data-course-theme] {
    --primary: var(--course-primary, #667eea);
    --primary-light: var(--course-primary-light, #8597f0);
    --primary-dark: var(--course-primary-dark, #5569d0);
    --secondary: var(--course-secondary, #32b8ac);
}
body[data-course-theme] .course-overview {
    border-color: color-mix(in srgb, var(--course-primary, #667eea) 18%, white);
    background: linear-gradient(112deg,
        color-mix(in srgb, var(--course-primary, #667eea) 9%, white),
        color-mix(in srgb, var(--course-secondary, #32b8ac) 8%, white) 62%,
        #fffaf1);
}
body[data-course-theme] .course-overview::after {
    border-color: color-mix(in srgb, var(--course-primary, #667eea) 20%, transparent);
    box-shadow: 0 0 0 24px color-mix(in srgb, var(--course-primary, #667eea) 5%, transparent),
        0 0 0 48px color-mix(in srgb, var(--course-secondary, #32b8ac) 5%, transparent);
}
body[data-course-theme] .course-overview-kicker { color: var(--course-secondary, #328f8b); }
body[data-course-theme] .course-overview h3 { color: var(--course-primary-dark, #35429e); }
body[data-course-theme] .course-overview-tags span {
    border-color: color-mix(in srgb, var(--course-primary, #667eea) 20%, white);
    color: var(--course-primary-dark, #4d5ab0);
}
body[data-course-theme] .course-overview-art { box-shadow: 0 18px 38px color-mix(in srgb, var(--course-primary, #667eea) 18%, transparent); }
body[data-course-theme] .info-course-card { border-color: color-mix(in srgb, var(--course-primary, #667eea) 18%, white); }
body[data-course-theme] .info-course-card:hover { border-color: var(--course-primary-light, #8597f0); }
body[data-course-theme] .info-course-art {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--course-primary, #667eea) 9%, white),
        color-mix(in srgb, var(--course-secondary, #32b8ac) 10%, white) 72%,
        #fff9ef);
}
body[data-course-theme] .info-course-index { color: var(--course-secondary, #328f8b); }
body[data-course-theme] .info-course-meta span { background: color-mix(in srgb, var(--course-primary, #667eea) 6%, white); }
body[data-course-theme] .info-course-card .level-title { color: var(--course-primary-dark, #4653ad); }
body[data-course-theme] .comic-sidebar {
    border-color: color-mix(in srgb, var(--course-primary, #667eea) 20%, white);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--course-primary, #667eea) 8%, white),
        color-mix(in srgb, var(--course-secondary, #32b8ac) 8%, white));
}
body[data-course-theme] .course-art-fallback {
    min-height: 280px;
    aspect-ratio: 4 / 5;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px 18px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--course-primary, #667eea) 16%, white),
        color-mix(in srgb, var(--course-secondary, #32b8ac) 15%, white));
    color: var(--course-primary-dark, #35429e);
    text-align: center;
}
body[data-course-theme] .course-art-fallback[hidden] { display: none !important; }
body[data-course-theme] .course-art-icon-image { display: block; width: min(82%, 250px); height: min(82%, 250px); object-fit: contain; }
body[data-course-theme] .content-with-comic .text-content {
    border-color: color-mix(in srgb, var(--course-primary, #667eea) 15%, white);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--course-primary, #667eea) 8%, transparent);
}
body[data-course-theme] .content-with-comic .text-content > h3 {
    color: var(--course-primary-dark, #4653ad);
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--course-primary, #667eea) 12%, white),
        color-mix(in srgb, var(--course-secondary, #32b8ac) 10%, white));
}
body[data-course-theme] .story-box,
body[data-course-theme] .tech-box,
body[data-course-theme] .fun-fact,
body[data-course-theme] .tip-box { border-radius: 16px; }
body[data-course-theme] .story-box {
    border-left: 4px solid var(--lesson-accent, var(--course-primary, #667eea));
    background: color-mix(in srgb, var(--lesson-accent, var(--course-primary, #667eea)) 6%, white);
}
body[data-course-theme] .step-progress .progress-fill { background: var(--course-primary, #667eea); }