.fellow-modules-page {
    background: #fffafe;
}

.fellow-modules-page .fellow-main {
    padding-top: 30px;
}

.module-topbar {
    background: #fffafe;
    border-bottom: 1px solid var(--fellow-line);
    margin: 0 0 24px;
    padding: 0 0 24px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.module-layout {
    align-items: start;
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
}

.module-content,
.module-right {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.module-right {
    position: sticky;
    top: 110px;
}

.module-tabs {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 14px;
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    justify-self: start;
    overflow: hidden;
}

.module-tabs button {
    background: transparent;
    border: 0;
    color: #3d4256;
    cursor: pointer;
    font: 800 0.9rem 'Plus Jakarta Sans', sans-serif;
    min-height: 54px;
    padding: 0 22px;
}

.module-tabs button.active {
    box-shadow: inset 0 -3px 0 var(--fellow-pink);
    color: var(--fellow-pink);
}

.module-stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module-stat-grid article,
.module-panel,
.module-side-card,
.module-help-card {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(170, 52, 104, 0.06);
}

.module-stat-grid article {
    align-items: center;
    display: grid;
    gap: 6px 16px;
    grid-template-columns: 66px minmax(0, 1fr);
    min-height: 124px;
    padding: 20px;
}

.module-stat-grid i {
    align-items: center;
    border-radius: 16px;
    display: inline-flex;
    font-size: 1.55rem;
    grid-row: span 3;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.module-stat-grid i.pink,
.module-track-grid i.pink,
.lesson-icon.pink {
    background: #ffe2f0;
    color: var(--fellow-pink);
}

.module-stat-grid i.green,
.module-track-grid i.green,
.lesson-icon.green {
    background: #dcf8eb;
    color: #28bd77;
}

.module-stat-grid i.purple,
.module-track-grid i.purple,
.lesson-icon.purple {
    background: #efe2ff;
    color: #9c4ef5;
}

.module-stat-grid i.orange,
.module-track-grid i.orange,
.lesson-icon.orange {
    background: #fff0db;
    color: #ff8b1f;
}

.module-stat-grid i.blue,
.module-track-grid i.blue,
.lesson-icon.blue {
    background: #e4f2ff;
    color: #168ce5;
}

.module-stat-grid span,
.module-stat-grid small {
    color: #697083;
    font-size: 0.8rem;
    font-weight: 700;
}

.module-stat-grid strong {
    color: var(--fellow-text);
    font-size: 1.65rem;
    letter-spacing: 0;
    line-height: 1;
}

.module-panel {
    padding: 20px;
}

.module-panel-head,
.module-side-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.module-panel-head h2,
.module-side-card h2,
.module-help-card h2 {
    color: var(--fellow-pink);
    font-size: 1rem;
    letter-spacing: 0;
    margin: 0;
}

.module-panel-head p {
    color: #697083;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.55;
    margin: 6px 0 0;
}

.module-panel-head > i {
    color: #485064;
    font-size: 0.82rem;
}

.module-collapse-btn {
    align-items: center;
    background: #fff5fa;
    border: 1px solid #ffd2e5;
    border-radius: 10px;
    color: #485064;
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.module-panel.is-collapsed > :not(.module-panel-head) {
    display: none;
}

.ai-lab-catalog {
    display: grid;
    gap: 24px;
    max-height: calc(100vh - 168px);
    min-height: 0;
    overflow: hidden;
}

.module-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.module-filter-bar button {
    background: #fff;
    border: 1px solid #ffd2e5;
    border-radius: 999px;
    color: #697083;
    cursor: pointer;
    font: 850 0.78rem 'Plus Jakarta Sans', sans-serif;
    min-height: 38px;
    padding: 0 15px;
}

.module-filter-bar button.active {
    background: var(--fellow-pink);
    border-color: var(--fellow-pink);
    color: #fff;
    box-shadow: 0 12px 24px rgba(246, 51, 146, 0.18);
}

.course-category-scroll {
    display: grid;
    gap: 24px;
    max-height: min(58vh, 680px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-color: rgba(246, 51, 146, 0.36) transparent;
    scrollbar-gutter: stable;
}

.course-category-scroll::-webkit-scrollbar {
    width: 8px;
}

.course-category-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.course-category-scroll::-webkit-scrollbar-thumb {
    background: rgba(246, 51, 146, 0.26);
    border-radius: 999px;
}

.course-category-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(246, 51, 146, 0.44);
}

.course-category {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.course-category-head {
    align-items: end;
    border-bottom: 1px solid var(--fellow-line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 10px;
}

.course-category-head span {
    color: #1f2433;
    font-size: 0.98rem;
    font-weight: 900;
}

.course-category-head small {
    color: #8a90a0;
    font-size: 0.76rem;
    font-weight: 800;
}

.course-card-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-card-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-card {
    background: linear-gradient(145deg, #fff, #fffaff);
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    display: grid;
    gap: 12px;
    min-height: 224px;
    padding: 18px;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.course-card:hover {
    border-color: rgba(246, 51, 146, 0.34);
    box-shadow: 0 18px 40px rgba(170, 52, 104, 0.08);
    transform: translateY(-2px);
}

.course-card.featured {
    background: linear-gradient(145deg, #fff0f7, #fff);
}

.course-card > i,
.specialization-grid article > i {
    align-items: center;
    border-radius: 16px;
    display: inline-flex;
    font-size: 1.45rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.course-card > i.pink,
.specialization-grid article > i.pink {
    background: #ffe2f0;
    color: var(--fellow-pink);
}

.course-card > i.green,
.specialization-grid article > i.green {
    background: #dcf8eb;
    color: #28bd77;
}

.course-card > i.purple,
.specialization-grid article > i.purple {
    background: #efe2ff;
    color: #9c4ef5;
}

.course-card > i.orange,
.specialization-grid article > i.orange {
    background: #fff0db;
    color: #ff8b1f;
}

.course-card > i.blue,
.specialization-grid article > i.blue {
    background: #e4f2ff;
    color: #168ce5;
}

.course-card > span {
    background: #fff0f7;
    border: 1px solid #ffd2e5;
    border-radius: 999px;
    color: var(--fellow-pink);
    font-size: 0.68rem;
    font-weight: 900;
    justify-self: start;
    padding: 5px 10px;
}

.course-card h3 {
    color: #1f2433;
    font-size: 1rem;
    line-height: 1.28;
    margin: 0;
}

.course-card p {
    color: #697083;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.58;
    margin: 0;
}

.course-card a {
    align-items: center;
    align-self: end;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    gap: 7px;
    text-decoration: none;
}

.course-card a::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.specialization-panel {
    background: linear-gradient(145deg, #fff, #fff6fb);
}

.specialization-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.specialization-grid article {
    align-items: start;
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 20px;
    display: grid;
    gap: 16px;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 210px;
    padding: 20px;
}

.specialization-grid span {
    color: var(--fellow-pink);
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.specialization-grid h3 {
    color: #1f2433;
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.specialization-grid p {
    color: #697083;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.55;
    margin: 0 0 10px;
}

.specialization-grid small {
    background: #fff0f7;
    border-radius: 999px;
    color: #9d3668;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.4;
    padding: 7px 10px;
}

.specialization-grid a {
    align-items: center;
    border: 1px solid #ffabd1;
    border-radius: 12px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    grid-column: 2;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    text-decoration: none;
    width: max-content;
}

.lesson-list {
    display: grid;
}

.lesson-list article {
    align-items: center;
    border-top: 1px solid var(--fellow-line);
    display: grid;
    gap: 16px;
    grid-template-columns: 42px 66px minmax(210px, 1fr) minmax(170px, 230px) 112px;
    min-height: 88px;
    padding: 14px 0;
}

.lesson-list article:first-child {
    border-top: 0;
}

.lesson-number {
    align-items: center;
    border: 1px solid #ffb6d7;
    border-radius: 10px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.lesson-icon {
    align-items: center;
    border-radius: 14px;
    display: inline-flex;
    font-size: 1.5rem;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.lesson-list h3 {
    font-size: 0.92rem;
    margin: 0 0 6px;
}

.lesson-list p {
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

.lesson-progress {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(90px, 1fr) 42px;
}

.lesson-progress b {
    background: #ffe0ef;
    border-radius: 999px;
    display: block;
    height: 6px;
    overflow: hidden;
    position: relative;
}

.lesson-progress b::after {
    background: var(--fellow-pink);
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--value);
}

.lesson-progress span {
    color: #596074;
    font-size: 0.78rem;
    font-weight: 800;
}

.lesson-list button {
    background: #fff;
    border: 1px solid #ff9fca;
    border-radius: 10px;
    color: var(--fellow-pink);
    cursor: pointer;
    font: 800 0.78rem 'Plus Jakarta Sans', sans-serif;
    min-height: 42px;
}

.lesson-list button.done {
    background: #effcf6;
    border-color: #d3f5e4;
    color: #1eb872;
}

.module-track-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-track-grid article {
    align-items: center;
    border: 1px solid var(--fellow-line);
    border-radius: 14px;
    display: grid;
    gap: 16px;
    grid-template-columns: 70px minmax(0, 1fr) 22px;
    min-height: 126px;
    padding: 14px;
}

.module-track-grid article > i {
    align-items: center;
    border-radius: 14px;
    display: inline-flex;
    font-size: 1.45rem;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.module-track-grid h3 {
    font-size: 0.92rem;
    margin: 0 0 6px;
}

.module-track-grid p {
    color: #667085;
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 0 0 9px;
}

.module-track-grid span {
    color: #596074;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
}

.module-track-grid a {
    color: var(--fellow-pink);
    justify-self: end;
    text-decoration: none;
}

.module-right {
    align-content: start;
}

.module-side-card {
    padding: 24px;
}

.progress-card {
    display: grid;
    gap: 18px;
    grid-template-columns: 170px minmax(0, 1fr);
}

.progress-card h2 {
    color: var(--fellow-text);
    grid-column: 1 / -1;
}

.progress-donut {
    align-items: center;
    aspect-ratio: 1;
    background: conic-gradient(#45c598 0 24%, #f75aa9 24% 58%, #f0eaf0 58% 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.progress-donut::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    inset: 30px;
    position: absolute;
}

.progress-donut strong,
.progress-donut span {
    position: relative;
    z-index: 1;
}

.progress-donut strong {
    font-size: 1.65rem;
}

.progress-donut span {
    color: #7a7f90;
    font-size: 0.66rem;
    font-weight: 800;
}

.progress-card ul {
    align-self: center;
    display: grid;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.progress-card li {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.progress-card li i {
    border-radius: 50%;
    flex: 0 0 10px;
    height: 10px;
    margin-top: 5px;
    width: 10px;
}

.progress-card li i.green {
    background: #45c598;
}

.progress-card li i.pink {
    background: #f75aa9;
}

.progress-card li i.soft {
    background: #efdae6;
}

.progress-card li strong,
.progress-card li span {
    display: block;
}

.progress-card li strong {
    font-size: 0.82rem;
    margin-bottom: 5px;
}

.progress-card li span {
    color: #697083;
    font-size: 0.78rem;
    line-height: 1.45;
}

.module-side-head {
    margin-bottom: 16px;
}

.module-side-head h2 {
    color: var(--fellow-text);
}

.module-side-head a {
    color: var(--fellow-pink);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.schedule-empty {
    align-items: center;
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid var(--fellow-line);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    justify-content: center;
    padding: 22px;
    text-align: center;
}

.schedule-empty i {
    color: var(--fellow-pink);
    font-size: 2rem;
    margin-bottom: 18px;
}

.schedule-empty strong {
    font-size: 0.88rem;
    margin-bottom: 8px;
}

.schedule-empty p {
    color: #697083;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0 0 18px;
}

.schedule-empty button,
.module-help-card a {
    background: var(--fellow-pink);
    border: 0;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font: 800 0.8rem 'Plus Jakarta Sans', sans-serif;
    min-height: 42px;
    padding: 0 22px;
    text-decoration: none;
}

.resource-card {
    display: grid;
    gap: 2px;
}

.resource-card h2 {
    color: var(--fellow-text);
    margin-bottom: 12px;
}

.resource-card a {
    align-items: center;
    color: #50586d;
    display: grid;
    font-size: 0.83rem;
    font-weight: 800;
    gap: 12px;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    min-height: 44px;
    text-decoration: none;
}

.resource-card a > i {
    align-items: center;
    background: #f2e7ff;
    border-radius: 9px;
    color: #9b4ef4;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.resource-card b {
    color: #667085;
    font-size: 0.7rem;
    justify-self: end;
}

.module-help-card {
    align-items: center;
    background: linear-gradient(135deg, #fff0f7, #fff);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 105px;
    overflow: hidden;
    padding: 22px;
}

.module-help-card h2 {
    margin-bottom: 8px;
}

.module-help-card p {
    color: #697083;
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0 0 16px;
}

.module-help-card > i {
    align-items: center;
    background: #1c1630;
    border: 12px solid #ffc5df;
    border-radius: 50%;
    color: #ff7dba;
    display: inline-flex;
    font-size: 2.7rem;
    height: 104px;
    justify-content: center;
    width: 104px;
}

.course-detail-layout {
    align-items: start;
}

.course-hero {
    align-items: center;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.82), transparent 15%),
        linear-gradient(115deg, #fff 0%, #fff6fb 42%, #ffe0ef 100%);
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(170, 52, 104, 0.07);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
    min-height: 292px;
    overflow: hidden;
    padding: 32px 28px 0 42px;
}

.course-hero img {
    align-self: end;
    display: block;
    filter: drop-shadow(0 24px 38px rgba(170, 52, 104, 0.18));
    max-height: 284px;
    object-fit: contain;
    object-position: bottom right;
    order: 2;
    width: 100%;
}

.course-hero > div {
    display: grid;
    gap: 18px;
    justify-items: start;
    order: 1;
    padding-bottom: 30px;
}

.course-hero span {
    align-items: center;
    background: #fff0f7;
    border-radius: 999px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    gap: 9px;
    padding: 10px 14px;
}

.course-hero h2 {
    color: #171827;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    max-width: 470px;
}

.course-progress-line {
    display: grid;
    gap: 10px;
    width: min(100%, 520px);
}

.course-progress-line div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.course-progress-line small,
.course-progress-line strong,
.course-progress-line p {
    color: #3f4558;
    font-size: 0.82rem;
    font-weight: 800;
    margin: 0;
}

.course-progress-line b,
.course-lesson-grid article b,
.achievement-body b {
    background: #ffe0ef;
    border-radius: 999px;
    display: block;
    height: 7px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.course-progress-line b::after,
.course-lesson-grid article b::after,
.achievement-body b::after {
    background: var(--fellow-pink);
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--value);
}

.course-hero a,
.course-certificate-strip a,
.course-weekly-card a {
    align-items: center;
    background: var(--fellow-pink);
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    gap: 10px;
    min-height: 44px;
    padding: 12px 20px;
    text-decoration: none;
}

.course-section .module-panel-head {
    margin-bottom: 16px;
}

.course-section .module-panel-head span {
    color: #3f4558;
    font-size: 0.82rem;
    font-weight: 900;
}

.course-lesson-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-lesson-grid article {
    background: linear-gradient(145deg, #fff, #fffaff);
    border: 1px solid var(--fellow-line);
    border-radius: 16px;
    display: grid;
    gap: 13px;
    min-height: 230px;
    padding: 20px;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.course-lesson-grid article:hover {
    background: linear-gradient(145deg, #fff, #fff0f7);
    border-color: var(--fellow-pink);
    box-shadow: 0 22px 48px rgba(246, 51, 146, 0.18);
    transform: translateY(-6px);
}

.course-lesson-grid article > span {
    align-items: center;
    background: #fff0f7;
    border: 1px solid #ffd2e5;
    border-radius: 8px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    left: 18px;
    position: absolute;
    top: 18px;
    width: 28px;
}

.course-lesson-grid article > i {
    align-items: center;
    border-radius: 18px;
    display: inline-flex;
    font-size: 2rem;
    height: 70px;
    justify-content: center;
    margin-top: 36px;
    width: 70px;
}

.course-lesson-grid i.purple {
    background: #efe2ff;
    color: #9c4ef5;
}

.course-lesson-grid i.blue {
    background: #e4f2ff;
    color: #168ce5;
}

.course-lesson-grid i.pink {
    background: #ffe2f0;
    color: var(--fellow-pink);
}

.course-lesson-grid i.orange {
    background: #fff0db;
    color: #ff8b1f;
}

.course-lesson-grid i.green {
    background: #dcf8eb;
    color: #28bd77;
}

.course-lesson-grid h3 {
    color: #171827;
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
}

.course-lesson-grid p {
    color: #697083;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.58;
    margin: 0;
}

.course-lesson-grid button,
.course-lesson-grid .lesson-action {
    align-items: center;
    align-self: end;
    background: #fff;
    border: 1px solid #ff9fca;
    border-radius: 10px;
    color: var(--fellow-pink);
    cursor: pointer;
    display: inline-flex;
    font: 850 0.76rem 'Plus Jakarta Sans', sans-serif;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    text-decoration: none;
    width: max-content;
}

.course-lesson-grid button::after,
.course-lesson-grid .lesson-action::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.course-lesson-grid article.done button,
.course-lesson-grid article.done .lesson-action {
    background: #effcf6;
    border-color: #d3f5e4;
    color: #1eb872;
}

.course-lesson-grid article.locked {
    background: #fffafc;
}

.course-lesson-grid article.locked button {
    border-color: transparent;
    color: #697083;
    padding-left: 0;
}

.course-certificate-strip {
    align-items: center;
    background: linear-gradient(135deg, #fff0f7, #fff);
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    display: grid;
    gap: 18px;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    padding: 20px 24px;
}

.course-certificate-strip > i {
    align-items: center;
    background: #efe2ff;
    border-radius: 18px;
    color: #9c4ef5;
    display: inline-flex;
    font-size: 2.1rem;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.course-certificate-strip h2 {
    color: #171827;
    font-size: 1rem;
    margin: 0 0 7px;
}

.course-certificate-strip p {
    color: #697083;
    font-size: 0.84rem;
    font-weight: 650;
    margin: 0;
}

.course-certificate-strip a {
    background: #fff;
    border: 1px solid #ff9fca;
    color: var(--fellow-pink);
}

.course-summary-card .progress-donut {
    background: conic-gradient(#45c598 0 28%, #f8b84e 28% 62%, #f0eaf0 62% 100%);
}

.progress-card li i.orange {
    background: #f8b84e;
}

.course-achievement-card {
    display: grid;
}

.achievement-body {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 78px minmax(0, 1fr);
}

.achievement-body > i {
    align-items: center;
    background: #efe2ff;
    border-radius: 20px;
    color: #9c4ef5;
    display: inline-flex;
    font-size: 2.4rem;
    height: 74px;
    justify-content: center;
    width: 74px;
}

.achievement-body strong {
    color: #171827;
    display: block;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.achievement-body p,
.achievement-body span {
    color: #697083;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.55;
    margin: 0 0 8px;
}

.course-weekly-card {
    align-items: center;
    background: linear-gradient(135deg, #fff0f7, #fff);
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 112px;
    overflow: hidden;
    padding: 24px;
}

.course-weekly-card h2 {
    color: var(--fellow-pink);
    font-size: 1rem;
    margin: 0 0 8px;
}

.course-weekly-card p {
    color: #697083;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.55;
    margin: 0 0 18px;
}

.course-weekly-card > i {
    align-items: center;
    background: linear-gradient(145deg, #ffc247, #f59e0b);
    border-radius: 26px;
    color: #fff;
    display: inline-flex;
    font-size: 4rem;
    height: 106px;
    justify-content: center;
    width: 106px;
}

.lesson-detail-page .fellow-main {
    padding-top: 34px;
}

.lesson-topbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    margin: 0 0 24px;
}

.lesson-breadcrumb {
    align-items: center;
    color: #697083;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    font-weight: 850;
    gap: 5px;
}

.lesson-breadcrumb-separator {
    align-items: center;
    color: #6f7282;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0 4px;
}

.lesson-breadcrumb a {
    align-items: center;
    color: var(--fellow-pink);
    display: inline-flex;
    gap: 7px;
    text-decoration: none;
}

.lesson-breadcrumb a span {
    color: var(--fellow-pink);
}

.lesson-breadcrumb > span:not(.lesson-breadcrumb-separator) {
    color: #171827;
}

.lesson-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
}

.lesson-main-content,
.lesson-right-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
}

.lesson-hero {
    align-items: end;
    background: linear-gradient(100deg, #fff 0%, #fff 42%, #ffe7f2 100%);
    border-bottom: 1px solid var(--fellow-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 520px);
    min-height: 270px;
    overflow: hidden;
    padding: 26px 26px 0 16px;
}

.lesson-detail-page .lesson-hero {
    border: 1px solid var(--fellow-line);
    border-radius: 20px;
    margin-bottom: 24px;
    min-height: 220px;
}

.lesson-hero-copy {
    align-self: center;
    display: grid;
    gap: 18px;
    padding-bottom: 28px;
}

.lesson-hero h1 {
    color: #121421;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
}

.lesson-hero p {
    color: #4d5469;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
    max-width: 680px;
}

.lesson-hero img {
    align-self: end;
    display: block;
    filter: drop-shadow(0 24px 38px rgba(170, 52, 104, 0.14));
    max-height: 270px;
    object-fit: contain;
    object-position: bottom right;
    width: 100%;
}

.lesson-hero.compact {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 520px);
    min-height: 220px;
    padding: 26px 26px 0 16px;
}

.lesson-hero.compact .lesson-hero-copy {
    padding-bottom: 28px;
}

.lesson-hero.compact img {
    max-height: 270px;
}

.course-scaffold-page .lesson-layout {
    align-items: flex-start;
}

.course-scaffold-hero {
    background: linear-gradient(135deg, #fff7fb 0%, #ffffff 58%, #f8fbff 100%);
    border: 1px solid rgba(246,51,146,.16);
}

.course-scaffold-eyebrow {
    align-items: center;
    background: rgba(246,51,146,.12);
    border: 1px solid rgba(246,51,146,.22);
    border-radius: 100px;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: 8px;
    padding: 8px 14px;
}

.course-scaffold-visual {
    align-items: center;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid rgba(246,51,146,.18);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(246,51,146,.12);
    display: flex;
    flex: 0 0 180px;
    justify-content: center;
}

.course-scaffold-visual i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    font-size: 3.2rem;
    height: 96px;
    justify-content: center;
    width: 96px;
}

.course-scaffold-note {
    align-items: flex-start;
    background: #fffcfd;
    border: 1px solid rgba(246,51,146,.16);
    border-radius: 18px;
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    padding: 18px;
}

.course-scaffold-note > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.course-scaffold-note strong,
.course-scaffold-grid strong,
.course-scaffold-section h2 {
    color: var(--fellow-text, #171827);
}

.course-scaffold-note p,
.course-scaffold-grid p,
.course-scaffold-section li p {
    color: var(--fellow-muted, #6f7282);
    line-height: 1.65;
    margin: 6px 0 0;
}

.course-scaffold-section {
    margin-bottom: 24px;
}

.course-scaffold-section > div:first-child span {
    color: var(--fellow-pink, #f63392);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.course-scaffold-section h2 {
    font-size: 1.35rem;
    margin: 6px 0 16px;
}

.course-scaffold-section ol {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-scaffold-section li {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(244,143,188,.24);
    border-radius: 18px;
    display: flex;
    gap: 14px;
    padding: 16px;
}

.course-scaffold-section li > span {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    flex: 0 0 34px;
    font-weight: 850;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.course-scaffold-section li strong {
    color: var(--fellow-text, #171827);
    display: block;
    font-size: .98rem;
}

.course-scaffold-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
    margin: 24px 0;
}

.course-scaffold-grid article {
    background: #fff;
    border: 1px solid rgba(244,143,188,.24);
    border-radius: 18px;
    padding: 18px;
}

.course-scaffold-grid i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    margin-bottom: 12px;
    width: 38px;
}

.reasoning-scaffold-rich[hidden] {
    display: none;
}

.reasoning-scaffold-page .course-scaffold-hero {
    grid-template-columns: minmax(0, 1fr) 220px;
}

.reasoning-scaffold-page .lesson-hero-copy {
    min-width: 0;
}

.reasoning-scaffold-page .lesson-hero-copy h1 {
    font-size: 2.65rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.reasoning-scaffold-page .course-scaffold-visual {
    align-self: center;
    flex-basis: auto;
    justify-self: end;
    width: 220px;
}

.reasoning-scaffold-rich {
    color: var(--fellow-text, #171827);
    margin-top: 20px;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

.reasoning-scaffold-page .course-scaffold-content,
.reasoning-scaffold-page .course-scaffold-section,
.reasoning-scaffold-page .lesson-article,
.reasoning-scaffold-page .lesson-material-panel,
.reasoning-scaffold-rich,
.reasoning-scaffold-rich * {
    box-sizing: border-box;
}

.reasoning-scaffold-page .course-scaffold-content,
.reasoning-scaffold-page .course-scaffold-section,
.reasoning-scaffold-page .lesson-article,
.reasoning-scaffold-page .lesson-material-panel,
.reasoning-scaffold-rich > * {
    max-width: 100%;
    min-width: 0;
}

.reasoning-scaffold-rich h3,
.reasoning-scaffold-rich p {
    letter-spacing: 0;
}

/* Source content headings — pink left border accent */
.is-source-view h2,
.reasoning-scaffold-rich h2 {
    border-left: 4px solid #f63392;
    color: #171827;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 28px 0 14px;
    padding-left: 14px;
}
.is-source-view h2:first-of-type {
    margin-top: 8px;
}
.is-source-view h3,
.reasoning-scaffold-rich h3 {
    color: #171827;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 20px 0 10px;
    padding-left: 0;
}

/* Text color — darker for readability */
.reasoning-scaffold-rich p,
.is-source-view p {
    color: #51596d;
    line-height: 1.75;
    margin: 0 0 12px;
}
.reasoning-scaffold-rich li,
.is-source-view li,
.reasoning-scaffold-rich dd,
.reasoning-scaffold-rich td,
.reasoning-scaffold-rich th {
    color: #51596d;
    line-height: 1.7;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Ordered & unordered lists — visual card style with custom markers */
.reasoning-scaffold-rich ol,
.reasoning-scaffold-rich ul,
.is-source-view ol,
.is-source-view ul {
    display: block;
    list-style: none;
    margin: 10px 0 16px;
    padding: 0;
}

.reasoning-scaffold-rich ol li,
.reasoning-scaffold-rich ul li,
.is-source-view ol li,
.is-source-view ul li {
    background: rgba(246,51,146,.04);
    border: 1px solid rgba(244,143,188,.16);
    border-radius: 12px;
    display: block;
    margin-bottom: 6px;
    padding: 10px 14px 10px 34px;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
.reasoning-scaffold-rich ol li:hover,
.reasoning-scaffold-rich ul li:hover,
.is-source-view ol li:hover,
.is-source-view ul li:hover {
    background: rgba(246,51,146,.07);
    border-color: rgba(246,51,146,.25);
}

/* Custom bullet for <ul> — pink diamond */
.reasoning-scaffold-rich ul li::before,
.is-source-view ul li::before {
    color: #f63392;
    content: "\f0c8";
    font-family: "Font Awesome 6 Free";
    font-size: .5rem;
    font-weight: 400;
    left: 13px;
    position: absolute;
    top: 14px;
}

/* Custom number for <ol> — pink circle with number */
.reasoning-scaffold-rich ol,
.is-source-view ol {
    counter-reset: reasoning-counter;
}
.reasoning-scaffold-rich ol li,
.is-source-view ol li {
    counter-increment: reasoning-counter;
    padding-left: 38px;
}
.reasoning-scaffold-rich ol li::before,
.is-source-view ol li::before {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    content: counter(reasoning-counter);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 22px;
}

/* Blockquotes — callout card */
.is-source-view blockquote,
.reasoning-scaffold-rich blockquote {
    background: rgba(246,51,146,.05);
    border-left: 4px solid rgba(246,51,146,.3);
    border-radius: 0 14px 14px 0;
    margin: 14px 0;
    padding: 14px 18px;
}
.is-source-view blockquote p,
.reasoning-scaffold-rich blockquote p {
    color: #51596d;
    margin: 0;
}
.is-source-view blockquote strong,
.reasoning-scaffold-rich blockquote strong {
    color: #f63392;
}

/* Adjacent list pairs (like "Kapan berguna / tidak berguna") */
.is-source-view ul + ul,
.is-source-view ol + ul,
.is-source-view ul + ol {
    margin-top: -6px;
}

.reasoning-scaffold-back {
    align-items: center;
    border: 1px solid rgba(246,51,146,.24);
    border-radius: 100px;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    font-size: .84rem;
    font-weight: 750;
    gap: 8px;
    margin-bottom: 18px;
    padding: 9px 14px;
    text-decoration: none;
}

.reasoning-scaffold-back:hover,
.reasoning-scaffold-back:focus-visible {
    background: rgba(246,51,146,.1);
    outline: 3px solid rgba(246,51,146,.18);
    outline-offset: 2px;
}

.reasoning-scaffold-overview,
.reasoning-scaffold-prose,
.reasoning-scaffold-exercises {
    display: grid;
    gap: 18px;
}

.reasoning-scaffold-objectives,
.reasoning-scaffold-integrated,
.reasoning-scaffold-case,
.reasoning-scaffold-checklist,
.reasoning-scaffold-example,
.reasoning-scaffold-exercises > article,
.reasoning-scaffold-discussion,
.reasoning-scaffold-references,
.reasoning-scaffold-compare > article,
.reasoning-scaffold-grid > article,
.reasoning-scaffold-question,
.reasoning-scaffold-module-meta,
.reasoning-scaffold-summary {
    background: #fff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    padding: 20px;
}

.reasoning-scaffold-open-section {
    border-top: 1px solid rgba(244,143,188,.26);
    padding-top: 18px;
}

.reasoning-scaffold-open-section > span {
    color: var(--fellow-pink, #f63392);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-scaffold-summary {
    background: #fff7fb;
}

.reasoning-scaffold-summary h3 i {
    color: var(--fellow-pink, #f63392);
    margin-right: 8px;
}

.reasoning-scaffold-module-meta {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.reasoning-scaffold-module-meta-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reasoning-scaffold-module-meta-head span {
    align-items: center;
    background: #fff7fb;
    border-radius: 100px;
    color: #51596d;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 700;
    gap: 7px;
    padding: 8px 12px;
}

.reasoning-scaffold-module-meta-head i,
.reasoning-scaffold-module-meta > div > strong {
    color: var(--fellow-pink, #f63392);
}

.reasoning-scaffold-module-meta ul {
    margin-top: 8px;
}

.reasoning-scaffold-tree {
    background: #f7f7fa;
    border: 1px solid #e2e3e9;
    border-radius: 14px;
    padding: 14px 16px;
}

.reasoning-scaffold-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.reasoning-scaffold-section-heading > i,
.reasoning-scaffold-grid article > i,
.reasoning-scaffold-discussion > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-scaffold-section-heading span,
.reasoning-scaffold-case > span,
.reasoning-scaffold-example > span,
.reasoning-scaffold-exercises article > span,
.reasoning-scaffold-discussion span {
    color: var(--fellow-pink, #f63392);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-scaffold-lead {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
    border-radius: 16px;
    color: #3d4254 !important;
    font-size: 1rem;
    margin: 0;
    padding: 18px;
}

.reasoning-scaffold-flow {
    align-items: stretch;
    display: flex;
    gap: 8px;
    margin-top: 16px;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 2px 10px;
}

.reasoning-scaffold-flow > div {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
    border-radius: 16px;
    flex: 1 0 118px;
    min-width: 0;
    padding: 14px;
}

.reasoning-scaffold-flow > div strong,
.reasoning-scaffold-flow > div span {
    display: block;
}

.reasoning-scaffold-flow > div strong {
    color: var(--fellow-text, #171827);
    font-size: .86rem;
}

.reasoning-scaffold-flow > div span {
    color: var(--fellow-muted, #6f7282);
    font-size: .74rem;
    line-height: 1.45;
    margin-top: 4px;
}

.reasoning-scaffold-flow > i {
    align-self: center;
    color: var(--fellow-pink, #f63392);
    flex: 0 0 auto;
}

.reasoning-scaffold-grid,
.reasoning-scaffold-compare {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
}

.reasoning-scaffold-grid article > i {
    height: 38px;
    margin-bottom: 8px;
    width: 38px;
}

.reasoning-scaffold-case dl {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
}

.reasoning-scaffold-case dl > div {
    background: #fff7fb;
    border-radius: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: 84px minmax(0, 1fr);
    min-width: 0;
    padding: 12px 14px;
}

.reasoning-scaffold-case dt {
    color: var(--fellow-pink, #f63392);
    font-weight: 800;
}

.reasoning-scaffold-case dd {
    margin: 0;
    min-width: 0;
}

.reasoning-scaffold-checklist ul {
    display: grid;
    gap: 8px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    padding: 0;
}

.reasoning-scaffold-checklist li::before {
    color: var(--fellow-pink, #f63392);
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

.reasoning-scaffold-references ol {
    margin-top: 12px;
}

.reasoning-scaffold-references li {
    font-size: .84rem;
}

.reasoning-scaffold-references a {
    color: #c21868;
    font-weight: 700;
}

.reasoning-scaffold-references a:focus-visible {
    border-radius: 6px;
    outline: 3px solid rgba(246,51,146,.2);
    outline-offset: 2px;
}

.reasoning-scaffold-calculation,
.reasoning-scaffold-prompts,
.reasoning-scaffold-template {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.reasoning-scaffold-calculation code,
.reasoning-scaffold-prompts code,
.reasoning-scaffold-template {
    background: #f7f7fa;
    border: 1px solid #e2e3e9;
    border-radius: 14px;
    color: var(--fellow-text, #171827);
    font-family: Consolas, monospace;
    line-height: 1.6;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    white-space: normal;
}

.reasoning-scaffold-callout {
    align-items: flex-start;
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.25);
    border-radius: 16px;
    display: flex;
    gap: 12px;
    padding: 16px;
}

.reasoning-scaffold-callout > i {
    color: var(--fellow-pink, #f63392);
    margin-top: 4px;
}

.reasoning-scaffold-callout p {
    margin: 0;
}

.reasoning-scaffold-table-wrap {
    border: 1px solid #e2e3e9;
    border-radius: 16px;
    max-width: 100%;
    overflow-x: auto;
}

.reasoning-scaffold-table-wrap table {
    border-collapse: collapse;
    min-width: 560px;
    width: 100%;
}

.reasoning-scaffold-table-wrap th,
.reasoning-scaffold-table-wrap td {
    border-bottom: 1px solid #ececf1;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.reasoning-scaffold-table-wrap th {
    background: #fff7fb;
    color: var(--fellow-text, #171827);
}

.reasoning-scaffold-citation {
    border-left: 4px solid var(--fellow-pink, #f63392);
    font-size: .86rem;
    margin: 0;
    padding: 4px 0 4px 14px;
}

.reasoning-scaffold-quiz {
    display: grid;
    gap: 16px;
}

.reasoning-scaffold-question {
    padding: 18px;
}

.reasoning-scaffold-question h3 {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    margin: 0 0 14px;
}

.reasoning-scaffold-question h3 > span {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.reasoning-scaffold-options {
    display: grid;
    gap: 9px;
}

.reasoning-scaffold-options label {
    cursor: pointer;
    display: block;
}

.reasoning-scaffold-options input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.reasoning-scaffold-options label > span {
    align-items: flex-start;
    background: #f9f9fb;
    border: 1px solid #e2e3e9;
    border-radius: 14px;
    color: var(--fellow-text, #171827);
    display: flex;
    gap: 10px;
    line-height: 1.55;
    padding: 11px 13px;
}

.reasoning-scaffold-options label b {
    color: var(--fellow-pink, #f63392);
}

.reasoning-scaffold-options input:checked + span {
    background: #fff7fb;
    border-color: rgba(246,51,146,.45);
}

.reasoning-scaffold-options input:focus-visible + span {
    outline: 3px solid rgba(246,51,146,.2);
    outline-offset: 2px;
}

.reasoning-scaffold-options label.is-correct > span {
    background: #f2fbf5;
    border-color: #82c796;
}

.reasoning-scaffold-options label.is-wrong > span {
    background: #fff4f6;
    border-color: #e08b9c;
}

.reasoning-scaffold-check-button,
.reasoning-scaffold-reveal-button {
    align-items: center;
    background: var(--fellow-pink, #f63392);
    border: 0;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .84rem;
    font-weight: 750;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 15px;
}

.reasoning-scaffold-check-button:hover,
.reasoning-scaffold-reveal-button:hover {
    background: #d91d78;
}

.reasoning-scaffold-check-button:focus-visible,
.reasoning-scaffold-reveal-button:focus-visible {
    outline: 3px solid rgba(246,51,146,.24);
    outline-offset: 3px;
}

.reasoning-scaffold-feedback,
.reasoning-scaffold-exercise-answer,
.reasoning-scaffold-reflection,
.reasoning-scaffold-response-guide {
    border-radius: 14px;
    margin: 12px 0 0;
    padding: 13px 14px;
}

.reasoning-scaffold-feedback.is-correct {
    background: #f2fbf5;
    color: #245d34;
}

.reasoning-scaffold-feedback.is-wrong,
.reasoning-scaffold-feedback.is-warning {
    background: #fff4f6;
    color: #8e2940;
}

.reasoning-scaffold-exercise-answer {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
}

.reasoning-scaffold-exercise-answer > strong,
.reasoning-scaffold-reflection > strong,
.reasoning-scaffold-response-guide > strong {
    color: var(--fellow-text, #171827);
}

.reasoning-scaffold-exercise-answer p:last-child,
.reasoning-scaffold-reflection p,
.reasoning-scaffold-response-guide p {
    margin-bottom: 0;
}

.reasoning-scaffold-reflection {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
}

.reasoning-scaffold-response-guide {
    background: #f7f7fa;
    border: 1px solid #e2e3e9;
}

.reasoning-scaffold-discussion {
    align-items: flex-start;
    display: flex;
    gap: 14px;
}

.reasoning-scaffold-discussion > div {
    min-width: 0;
}

@media (max-width: 860px) {
    .reasoning-scaffold-page,
    .reasoning-scaffold-page .fellow-main,
    .reasoning-scaffold-page .lesson-layout,
    .reasoning-scaffold-page .lesson-main-content,
    .reasoning-scaffold-page .lesson-material-panel {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .reasoning-scaffold-page .course-scaffold-hero,
    .reasoning-scaffold-page .lesson-hero {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 22px 20px;
    }

    .reasoning-scaffold-page .lesson-hero img {
        justify-self: end;
        max-height: 120px;
        max-width: 150px;
        order: 2;
    }

    .reasoning-scaffold-page .lesson-hero.lesson-hero-compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .reasoning-scaffold-page .lesson-hero-copy {
        gap: 12px;
        min-width: 0;
        padding-bottom: 0;
        width: 100%;
    }

    .reasoning-scaffold-page .lesson-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .reasoning-scaffold-page .lesson-breadcrumb {
        min-height: 44px;
        padding-left: 52px;
    }

    .reasoning-scaffold-page .lesson-hero-copy h1 {
        font-size: 2rem;
        overflow-wrap: normal;
        word-break: normal;
    }

    .reasoning-scaffold-flow {
        align-items: stretch;
        flex-direction: column;
        overflow-x: visible;
    }

    .reasoning-scaffold-flow > div {
        flex-basis: auto;
    }

    .reasoning-scaffold-flow > i {
        transform: rotate(90deg);
    }
}

@media (max-width: 560px) {
    .reasoning-scaffold-grid,
    .reasoning-scaffold-compare,
    .reasoning-scaffold-checklist ul,
    .reasoning-compare-grid,
    .reasoning-mp-grid {
        grid-template-columns: 1fr;
    }

    .reasoning-visual-board .reasoning-scaffold-flow > div {
        min-width: 0;
        max-width: 100%;
    }

    .reasoning-concept-card,
    .reasoning-example-section,
    .reasoning-hook-section,
    .reasoning-opening-section,
    .reasoning-quick-check,
    .reasoning-mini-challenge,
    .reasoning-scaffold-example,
    .reasoning-scaffold-summary,
    .reasoning-challenge-workspace,
    .reasoning-summary-section,
    .reasoning-mistakes-practices {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .reasoning-example-steps {
        grid-template-columns: 1fr;
    }

    .reasoning-visual-canvas,
    .reasoning-visual-canvas > *,
    .reasoning-concept-lab,
    .reasoning-concept-stage,
    .reasoning-hook-options,
    .reasoning-source-toolbar {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    .reasoning-concept-tabs,
    .reasoning-source-jumps {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .reasoning-concept-stage,
    .reasoning-hook-options,
    .reasoning-compare-grid,
    .reasoning-mp-grid {
        grid-template-columns: 1fr;
    }

    .reasoning-scaffold-table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }

    .reasoning-scaffold-objectives,
    .reasoning-scaffold-integrated,
    .reasoning-scaffold-case,
    .reasoning-scaffold-checklist,
    .reasoning-scaffold-example,
    .reasoning-scaffold-exercises > article,
    .reasoning-scaffold-discussion,
    .reasoning-scaffold-references {
        padding: 16px;
    }

    .reasoning-scaffold-case dl > div {
        grid-template-columns: 1fr;
    }

    .reasoning-scaffold-discussion {
        flex-direction: column;
    }

    .reasoning-scaffold-check-button,
    .reasoning-scaffold-reveal-button {
        justify-content: center;
        width: 100%;
    }
}

/* AI Modern beginner learning flow */
.ai-modern-beginner-roadmap,
.ai-modern-worked-example,
.ai-modern-beginner-glossary,
.ai-modern-system-blueprint,
.ai-modern-formula-explainer,
.ai-modern-tool-contract,
.ai-modern-architecture-canvas {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .24);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(170, 52, 104, .055);
    box-sizing: border-box;
    display: grid;
    gap: 20px;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    padding: 24px;
}

.ai-modern-beginner-roadmap {
    background:
        radial-gradient(circle at 96% 4%, rgba(246, 51, 146, .1), transparent 24%),
        linear-gradient(145deg, #fff7fb 0%, #fff 64%);
}

.ai-modern-roadmap-head,
.ai-modern-worked-head,
.ai-modern-glossary-head,
.ai-modern-blueprint-head,
.ai-modern-formula-head,
.ai-modern-tool-head,
.ai-modern-canvas-head {
    align-items: flex-start;
    display: grid;
    gap: 14px;
    grid-template-columns: 46px minmax(0, 1fr);
}

.ai-modern-roadmap-head > i,
.ai-modern-worked-head > i,
.ai-modern-glossary-head > i,
.ai-modern-blueprint-head > i,
.ai-modern-formula-head > i,
.ai-modern-tool-head > i,
.ai-modern-canvas-head > i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.ai-modern-roadmap-head > div,
.ai-modern-worked-head > div,
.ai-modern-glossary-head > div,
.ai-modern-blueprint-head > div,
.ai-modern-formula-head > div,
.ai-modern-tool-head > div,
.ai-modern-canvas-head > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ai-modern-roadmap-head span,
.ai-modern-worked-head span,
.ai-modern-glossary-head span,
.ai-modern-blueprint-head span,
.ai-modern-formula-head span,
.ai-modern-tool-head span,
.ai-modern-canvas-head span {
    color: var(--modern-pink);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ai-modern-roadmap-head h3,
.ai-modern-worked-head h3,
.ai-modern-glossary-head h3,
.ai-modern-blueprint-head h3,
.ai-modern-formula-head h3,
.ai-modern-tool-head h3,
.ai-modern-canvas-head h3 {
    color: var(--modern-ink);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0;
}

.ai-modern-roadmap-head p,
.ai-modern-worked-head p,
.ai-modern-glossary-head p,
.ai-modern-blueprint-head p,
.ai-modern-formula-head p,
.ai-modern-tool-head p,
.ai-modern-canvas-head p {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
}

.ai-modern-roadmap-question {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px 16px;
}

.ai-modern-roadmap-question > i {
    align-items: center;
    background: #fff0f7;
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ai-modern-roadmap-question p {
    color: var(--modern-copy);
    line-height: 1.6;
    margin: 0;
}

.ai-modern-roadmap-question strong {
    color: var(--modern-ink);
    display: block;
    margin-bottom: 3px;
}

.ai-modern-roadmap-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-modern-roadmap-strip > div {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 14px;
    display: grid;
    gap: 7px;
    grid-template-columns: 24px 30px minmax(0, 1fr);
    min-width: 0;
    padding: 11px;
}

.ai-modern-roadmap-strip span {
    align-items: center;
    background: var(--modern-pink);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.ai-modern-roadmap-strip i {
    color: var(--modern-pink);
    text-align: center;
}

.ai-modern-roadmap-strip strong {
    color: var(--modern-ink);
    font-size: .8rem;
    line-height: 1.35;
    min-width: 0;
}

.ai-modern-roadmap-progress {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: max-content minmax(0, 1fr);
}

.ai-modern-roadmap-progress > span {
    color: var(--modern-pink);
    font-size: .78rem;
    font-weight: 900;
}

.ai-modern-roadmap-progress > b {
    background: rgba(244, 143, 188, .18);
    border-radius: 100px;
    display: block;
    height: 8px;
    overflow: hidden;
}

.ai-modern-roadmap-progress > b > i {
    background: linear-gradient(90deg, #f63392, #ff81bd);
    border-radius: 100px;
    display: block;
    height: 100%;
    transition: width .2s ease;
}

.ai-modern-roadmap-steps {
    display: grid;
    gap: 10px;
}

.ai-modern-roadmap-steps details,
.ai-modern-glossary-grid details,
.ai-modern-source-code {
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .22);
    border-radius: 16px;
    overflow: hidden;
}

.ai-modern-roadmap-steps summary,
.ai-modern-glossary-grid summary,
.ai-modern-source-code > summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 12px;
    list-style: none;
    min-width: 0;
    padding: 14px 16px;
}

.ai-modern-roadmap-steps summary {
    grid-template-columns: 34px 34px minmax(0, 1fr) 18px;
}

.ai-modern-roadmap-steps summary::-webkit-details-marker,
.ai-modern-glossary-grid summary::-webkit-details-marker,
.ai-modern-source-code > summary::-webkit-details-marker {
    display: none;
}

.ai-modern-roadmap-steps summary > span {
    align-items: center;
    background: #fff0f7;
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.ai-modern-roadmap-steps summary > i:first-of-type {
    color: var(--modern-pink);
    text-align: center;
}

.ai-modern-roadmap-steps summary > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ai-modern-roadmap-steps summary strong {
    color: var(--modern-ink);
    line-height: 1.35;
}

.ai-modern-roadmap-steps summary small {
    color: var(--modern-muted);
    font-size: .8rem;
    line-height: 1.4;
}

.ai-modern-roadmap-steps summary > i:last-child,
.ai-modern-glossary-grid summary > i,
.ai-modern-source-code > summary > i:last-child {
    color: var(--modern-pink);
    transition: transform .18s ease;
}

.ai-modern-roadmap-steps details[open] summary,
.ai-modern-glossary-grid details[open] summary,
.ai-modern-source-code[open] > summary {
    background: #fff7fb;
    border-bottom: 1px solid rgba(244, 143, 188, .18);
}

.ai-modern-roadmap-steps details[open] summary > i:last-child,
.ai-modern-glossary-grid details[open] summary > i,
.ai-modern-source-code[open] > summary > i:last-child {
    transform: rotate(180deg);
}

.ai-modern-roadmap-body {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
}

.ai-modern-roadmap-body > p {
    color: var(--modern-copy);
    grid-column: 1 / -1;
    line-height: 1.7;
    margin: 0;
}

.ai-modern-roadmap-body > div,
.ai-modern-roadmap-body > aside {
    background: #fff7fb;
    border: 1px solid rgba(246, 51, 146, .17);
    border-radius: 14px;
    padding: 13px;
}

.ai-modern-roadmap-body strong {
    align-items: center;
    color: var(--modern-ink);
    display: flex;
    gap: 7px;
}

.ai-modern-roadmap-body strong i {
    color: var(--modern-pink);
}

.ai-modern-roadmap-body div p,
.ai-modern-roadmap-body aside p {
    color: var(--modern-copy);
    font-size: .88rem;
    line-height: 1.6;
    margin: 7px 0 0;
}

.ai-modern-worked-example {
    background: linear-gradient(145deg, #fff 0%, #fff7fb 100%);
}

.ai-modern-worked-steps {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-modern-worked-steps article {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 15px;
    display: grid;
    gap: 11px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 0;
    padding: 15px;
}

.ai-modern-worked-steps article > span {
    align-items: center;
    background: var(--modern-pink);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.ai-modern-worked-steps article > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ai-modern-worked-steps strong,
.ai-modern-worked-result strong {
    color: var(--modern-ink);
    line-height: 1.4;
}

.ai-modern-worked-steps p,
.ai-modern-worked-result p {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
}

.ai-modern-worked-result {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-modern-worked-result > div {
    background: #fff0f7;
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 15px;
    display: grid;
    gap: 7px;
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 0;
    padding: 15px;
}

.ai-modern-worked-result > div > i {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    grid-row: 1 / 3;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.ai-modern-beginner-glossary {
    background: linear-gradient(145deg, #fff7fb, #fff);
}

.ai-modern-glossary-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-modern-glossary-grid summary {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
}

.ai-modern-glossary-grid summary > span {
    align-items: center;
    background: #fff0f7;
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.ai-modern-glossary-grid summary strong {
    color: var(--modern-ink);
    line-height: 1.4;
}

.ai-modern-glossary-grid details > p {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
    padding: 14px 16px 16px;
}

/* Contextual visual explainers for source code blocks */
.ai-modern-system-blueprint,
.ai-modern-formula-explainer,
.ai-modern-tool-contract,
.ai-modern-architecture-canvas {
    background:
        radial-gradient(circle at 96% 4%, rgba(246, 51, 146, .1), transparent 25%),
        linear-gradient(145deg, #fff7fb, #fff 66%);
    margin: 18px 0 10px;
}

.ai-modern-blueprint-flow {
    display: grid;
    gap: 10px;
}

.ai-modern-blueprint-flow article {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 15px;
    display: grid;
    gap: 12px;
    grid-template-columns: 34px 38px minmax(0, 1fr);
    min-width: 0;
    padding: 14px;
    position: relative;
}

.ai-modern-blueprint-flow article:not(:last-child)::after {
    background: rgba(246, 51, 146, .28);
    bottom: -11px;
    content: "";
    height: 11px;
    left: 67px;
    position: absolute;
    width: 2px;
}

.ai-modern-blueprint-flow article > b {
    align-items: center;
    background: var(--modern-pink);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: .7rem;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.ai-modern-blueprint-flow article > i {
    align-items: center;
    background: #fff0f7;
    border-radius: 12px;
    color: var(--modern-pink);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ai-modern-blueprint-flow article > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ai-modern-blueprint-flow strong {
    color: var(--modern-ink);
}

.ai-modern-blueprint-flow p,
.ai-modern-blueprint-rule p {
    color: var(--modern-copy);
    line-height: 1.6;
    margin: 0;
}

.ai-modern-blueprint-rule {
    align-items: flex-start;
    background: #fff0f7;
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 15px;
    display: grid;
    gap: 11px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 14px;
}

.ai-modern-blueprint-rule > i {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.ai-modern-qkv-grid,
.ai-modern-tool-grid,
.ai-modern-canvas-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-modern-qkv-grid article,
.ai-modern-tool-grid article,
.ai-modern-canvas-grid article {
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 15px;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 16px;
}

.ai-modern-qkv-grid article > b {
    align-items: center;
    background: var(--modern-pink);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ai-modern-qkv-grid strong,
.ai-modern-tool-grid strong,
.ai-modern-canvas-grid strong {
    color: var(--modern-ink);
    line-height: 1.4;
}

.ai-modern-qkv-grid p,
.ai-modern-tool-grid p,
.ai-modern-canvas-grid p,
.ai-modern-canvas-grid small {
    color: var(--modern-copy);
    line-height: 1.55;
    margin: 0;
}

.ai-modern-formula-flow,
.ai-modern-tool-path {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
}

.ai-modern-formula-flow > span,
.ai-modern-tool-path > span {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 13px;
    color: var(--modern-ink);
    display: flex;
    font-size: .8rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1.4;
    min-width: 0;
    padding: 11px;
    text-align: center;
}

.ai-modern-formula-flow > i,
.ai-modern-tool-path > i {
    align-self: center;
    color: var(--modern-pink);
    justify-self: center;
}

.ai-modern-formula-note {
    align-items: flex-start;
    background: #fff0f7;
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 14px;
    color: var(--modern-copy);
    display: flex;
    gap: 9px;
    line-height: 1.6;
    margin: 0;
    padding: 13px;
}

.ai-modern-formula-note i {
    color: var(--modern-pink);
    margin-top: 3px;
}

.ai-modern-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-modern-tool-grid article > span {
    color: var(--modern-pink);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ai-modern-canvas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-modern-canvas-grid article {
    grid-template-columns: 38px minmax(0, 1fr);
}

.ai-modern-canvas-grid article > i {
    align-items: center;
    background: #fff0f7;
    border-radius: 12px;
    color: var(--modern-pink);
    display: inline-flex;
    grid-row: 1 / 4;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ai-modern-source-code {
    margin: 0 0 18px;
}

.ai-modern-source-code > summary {
    grid-template-columns: 24px minmax(0, 1fr) 18px;
}

.ai-modern-source-code > summary > i:first-child {
    color: var(--modern-pink);
}

.ai-modern-source-code > summary > span {
    color: var(--modern-ink);
    font-size: .82rem;
    font-weight: 850;
}

.ai-modern-source-code .reasoning-code-block {
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    margin: 0;
}

@media (max-width: 820px) {
    .ai-modern-roadmap-strip,
    .ai-modern-worked-steps,
    .ai-modern-worked-result,
    .ai-modern-glossary-grid,
    .ai-modern-tool-grid,
    .ai-modern-canvas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-modern-formula-flow,
    .ai-modern-tool-path {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-formula-flow > i,
    .ai-modern-tool-path > i {
        transform: rotate(90deg);
    }
}

@media (max-width: 560px) {
    .ai-modern-beginner-roadmap,
    .ai-modern-worked-example,
    .ai-modern-beginner-glossary,
    .ai-modern-system-blueprint,
    .ai-modern-formula-explainer,
    .ai-modern-tool-contract,
    .ai-modern-architecture-canvas {
        gap: 16px;
        padding: 17px;
    }

    .ai-modern-roadmap-head,
    .ai-modern-worked-head,
    .ai-modern-glossary-head,
    .ai-modern-blueprint-head,
    .ai-modern-formula-head,
    .ai-modern-tool-head,
    .ai-modern-canvas-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-roadmap-head > i,
    .ai-modern-worked-head > i,
    .ai-modern-glossary-head > i,
    .ai-modern-blueprint-head > i,
    .ai-modern-formula-head > i,
    .ai-modern-tool-head > i,
    .ai-modern-canvas-head > i {
        height: 38px;
        width: 38px;
    }

    .ai-modern-roadmap-strip,
    .ai-modern-worked-steps,
    .ai-modern-worked-result,
    .ai-modern-glossary-grid,
    .ai-modern-qkv-grid,
    .ai-modern-tool-grid,
    .ai-modern-canvas-grid,
    .ai-modern-roadmap-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-roadmap-progress {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-roadmap-steps summary {
        gap: 9px;
        grid-template-columns: 32px minmax(0, 1fr) 14px;
        padding: 12px;
    }

    .ai-modern-roadmap-steps summary > i:first-of-type {
        display: none;
    }

    .ai-modern-roadmap-steps summary > span {
        height: 32px;
        width: 32px;
    }

    .ai-modern-roadmap-body > p {
        grid-column: auto;
    }

    .ai-modern-blueprint-flow article {
        grid-template-columns: 30px 34px;
        padding: 12px;
    }

    .ai-modern-blueprint-flow article > div {
        grid-column: 1 / -1;
    }

    .ai-modern-blueprint-flow article > b {
        height: 30px;
        width: 30px;
    }

    .ai-modern-blueprint-flow article > i {
        height: 34px;
        width: 34px;
    }

    .ai-modern-blueprint-flow article:not(:last-child)::after {
        left: 28px;
    }

    .ai-modern-canvas-grid article {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-canvas-grid article > i {
        grid-row: auto;
    }
}

.ai-reasoning-page .lesson-article {
    color: #171827;
}

.reasoning-final-meta .reasoning-scaffold-module-meta-head {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
}

.reasoning-final-meta .reasoning-scaffold-module-meta-head > i {
    font-size: 1.15rem;
}

.reasoning-final-meta .reasoning-scaffold-module-meta-head h2 {
    color: #171827;
    font-size: 1.55rem;
    line-height: 1.25;
    margin: 8px 0;
}

/* ── New visual canvas components ── */
.reasoning-concept-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.reasoning-concept-tag {
    align-items: center;
    background: rgba(246,51,146,.1);
    border-radius: 100px;
    color: #c21868;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 700;
    gap: 6px;
    padding: 5px 14px;
}

.reasoning-meta-row {
    align-items: flex-start;
    display: grid;
    gap: 6px;
}

.reasoning-meta-row strong {
    color: #51596d;
    font-size: .82rem;
    font-weight: 800;
}

.reasoning-meta-row strong i {
    color: var(--fellow-pink, #f63392);
    margin-right: 6px;
}

.reasoning-meta-row ul {
    margin: 0;
    padding-left: 20px;
}

.reasoning-unified-canvas {
    display: grid;
    gap: 20px;
}

.reasoning-visual-canvas .reasoning-visual-board,
.reasoning-visual-canvas .reasoning-quick-check,
.reasoning-visual-canvas .reasoning-mini-challenge,
.reasoning-visual-canvas .reasoning-scaffold-example,
.reasoning-visual-canvas .reasoning-scaffold-checklist,
.reasoning-visual-canvas .reasoning-scaffold-summary {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(246,51,146,.055);
    padding: 20px;
}

.reasoning-quick-head,
.reasoning-visual-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.reasoning-quick-head > i,
.reasoning-visual-head > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: var(--fellow-pink, #f63392);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-quick-head span,
.reasoning-visual-head span {
    color: var(--fellow-pink, #f63392);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-quick-head h3,
.reasoning-visual-head h3 {
    color: #171827;
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 6px 0 0;
}

.reasoning-code-block {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.22);
    border-radius: 14px;
    margin: 14px 0;
    overflow: hidden;
}

.reasoning-code-block > div {
    align-items: center;
    background: rgba(246,51,146,.08);
    border-bottom: 1px solid rgba(246,51,146,.16);
    color: #51596d;
    display: flex;
    font-size: .78rem;
    font-weight: 800;
    gap: 8px;
    padding: 8px 14px;
}

.reasoning-code-block > div i {
    color: var(--fellow-pink, #f63392);
}

.reasoning-code-block pre {
    background: transparent;
    border: none;
    border-radius: 14px;
    margin: 0;
    overflow-x: auto;
    padding: 14px;
}

.reasoning-code-block code {
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 0;
}

@media (max-width: 760px) {
    .reasoning-code-block pre {
        font-size: .82rem;
        padding: 10px 12px;
    }

    .reasoning-meta-row ul {
        padding-left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reasoning-source-jumps button {
        transition: none;
    }
}

.reasoning-visual-board,
.reasoning-quick-check,
.reasoning-mini-challenge,
.reasoning-practice-card {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(246,51,146,.055);
    padding: 20px;
}

.reasoning-visual-board {
    background: linear-gradient(145deg, #fff7fb, #ffffff);
    margin: 18px 0;
}

.reasoning-visual-head,
.reasoning-quick-head,
.reasoning-mini-challenge > div,
.reasoning-practice-card-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.reasoning-visual-head > i,
.reasoning-quick-head > i,
.reasoning-mini-challenge > div > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-visual-head span,
.reasoning-quick-head span,
.reasoning-mini-challenge span,
.reasoning-practice-card small {
    color: #f63392;
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-visual-head h3,
.reasoning-quick-head h3,
.reasoning-mini-challenge h3,
.reasoning-practice-card h3 {
    color: #171827;
    margin: 4px 0 0;
}

.reasoning-code-block {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.28);
    border-radius: 16px;
    margin: 18px 0;
    overflow: hidden;
}

.reasoning-code-block > div {
    align-items: center;
    background: rgba(246,51,146,.12);
    color: #c21868;
    display: flex;
    font-size: .78rem;
    font-weight: 850;
    gap: 8px;
    letter-spacing: .08em;
    padding: 11px 14px;
    text-transform: uppercase;
}

.reasoning-code-block pre {
    background: #fffcfd;
    color: #171827;
    margin: 0;
    overflow-x: auto;
    padding: 16px;
}

.reasoning-code-block code {
    color: #171827;
    font-family: Consolas, "SF Mono", monospace;
    line-height: 1.7;
    white-space: pre-wrap;
}

.reasoning-source-panel {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(246,51,146,.055);
    display: grid;
    gap: 18px;
    margin: 22px 0;
    overflow: hidden;
    padding: 20px;
}

.reasoning-source-panel-head {
    align-items: flex-start;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr);
}

.reasoning-source-panel-head > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.reasoning-source-panel-head span {
    color: #f63392;
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-source-panel-head h2,
.reasoning-source-panel-head h3 {
    color: #171827;
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 4px 0 6px;
}

.reasoning-source-panel-head p {
    color: #51596d;
    line-height: 1.65;
    margin: 0;
}

.reasoning-source-panel-head code {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.18);
    border-radius: 12px;
    color: #171827;
    padding: 2px 6px;
}

.reasoning-source-container {
    min-width: 0;
}

.reasoning-source-toolbar {
    align-items: center;
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.22);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 16px;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
}

.reasoning-view-toggle,
.reasoning-source-jumps,
.reasoning-concept-tabs {
    display: flex;
    gap: 8px;
}

.reasoning-view-toggle {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.24);
    border-radius: 100px;
    padding: 4px;
}

.reasoning-view-toggle button,
.reasoning-source-jumps button,
.reasoning-concept-tabs button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(246,51,146,.22);
    border-radius: 100px;
    color: #51596d;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    min-height: 44px;
    padding: 9px 13px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.reasoning-view-toggle button {
    border-color: transparent;
    min-height: 38px;
}

.reasoning-view-toggle button.is-active,
.reasoning-concept-tabs button[aria-selected="true"] {
    background: #f63392;
    border-color: #f63392;
    color: #ffffff;
}

.reasoning-view-toggle button:focus-visible,
.reasoning-source-jumps button:focus-visible,
.reasoning-concept-tabs button:focus-visible,
.reasoning-source-matrix tr:focus-visible {
    outline: 3px solid rgba(246,51,146,.2);
    outline-offset: 2px;
}

.reasoning-source-jumps {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-color: rgba(246,51,146,.35) transparent;
}

/* Standalone visual nav (no toolbar) */
.reasoning-visual-nav {
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.24);
    border-radius: 14px;
    margin-bottom: 20px;
    padding: 10px 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.reasoning-source-table-scroll {
    border: 1px solid rgba(244,143,188,.24);
    border-radius: 16px;
    max-width: 100%;
    overflow-x: auto;
}

.reasoning-source-table-scroll .reasoning-source-matrix {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 560px;
    width: 100%;
}

.reasoning-source-jumps button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.reasoning-source-jumps button:hover {
    background: rgba(246,51,146,.12);
    border-color: rgba(246,51,146,.36);
    color: #c21868;
}

.reasoning-concept-lab {
    background: linear-gradient(145deg, #fff7fb, #ffffff);
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(246,51,146,.07);
    color: #171827;
    display: grid;
    gap: 18px;
    margin-bottom: 16px;
    overflow: hidden;
    padding: 20px;
}

.reasoning-concept-lab-head {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.reasoning-concept-lab-head span,
.reasoning-concept-stage > div > span {
    color: #c21868;
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-concept-lab-head h4 {
    color: #171827;
    font-size: 1.2rem;
    line-height: 1.35;
    margin: 5px 0 0;
}

.reasoning-concept-counter {
    background: rgba(246,51,146,.12);
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 100px;
    color: #9f124f !important;
    flex: 0 0 auto;
    padding: 7px 10px;
}

.reasoning-concept-tabs {
    flex-wrap: wrap;
}

.reasoning-concept-tabs button {
    background: #ffffff;
    border-color: rgba(246,51,146,.24);
    color: #51596d;
    flex: 1 1 145px;
}

.reasoning-concept-tabs button:hover {
    background: #fff0f7;
    border-color: rgba(246,51,146,.45);
    color: #9f124f;
}

.reasoning-concept-stage {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 16px;
    color: #171827;
    display: grid;
    gap: 16px;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 176px;
    padding: 18px;
}

.reasoning-concept-node {
    align-items: center;
    background: #f63392;
    border: 6px solid #fff0f7;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.reasoning-concept-stage h5 {
    color: #171827;
    font-size: 1.25rem;
    margin: 4px 0 6px;
}

.reasoning-concept-stage p {
    color: #51596d;
    line-height: 1.65;
    margin: 0 0 10px;
}

.reasoning-concept-stage small {
    align-items: flex-start;
    background: #fff7fb;
    border-radius: 14px;
    color: #51596d;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: 8px;
    line-height: 1.5;
    padding: 8px 10px;
}

.reasoning-concept-stage small i {
    color: #f63392;
    margin-top: 3px;
}

.reasoning-source-material {
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.22);
    border-radius: 16px;
    color: #171827;
    display: grid;
    gap: 14px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 18px;
    word-break: break-word;
}

.reasoning-source-material.is-visual-view {
    background: #ffffff;
    counter-reset: source-card;
    gap: 16px;
    padding: 20px;
}

.reasoning-source-material.is-visual-view > .reasoning-source-milestone {
    align-items: center;
    background: linear-gradient(135deg, #fff0f7, #ffffff);
    border: 1px solid rgba(246,51,146,.28);
    border-left: 5px solid #f63392;
    border-radius: 16px;
    color: #171827;
    display: flex;
    min-height: 58px;
    padding: 13px 16px;
    scroll-margin-top: 96px;
}

.reasoning-source-material.is-visual-view > .reasoning-source-step {
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.28);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(23,24,39,.045);
    display: grid;
    gap: 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 16px;
}

.reasoning-source-step-copy {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.reasoning-source-step-copy > strong:first-child,
.reasoning-source-subsection > strong:first-child {
    color: #171827;
    display: block;
    font-size: .86rem;
    font-weight: 850;
    margin-bottom: 8px;
}

.reasoning-source-compound {
    display: grid;
    gap: 12px;
}

.reasoning-source-subsection {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.25);
    border-radius: 14px;
    color: #51596d;
    line-height: 1.75;
    min-width: 0;
    padding: 14px;
}

.reasoning-source-step.is-compound {
    align-items: start;
}

.reasoning-source-material.is-visual-view > .reasoning-source-step::before {
    align-items: center;
    background: rgba(246,51,146,.12);
    border: 1px solid rgba(246,51,146,.25);
    border-radius: 50%;
    color: #c21868;
    content: var(--source-step);
    display: flex;
    font-size: .72rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.reasoning-source-material.is-visual-view > .reasoning-source-step.is-labelled {
    background: #fff7fb;
    border-color: rgba(246,51,146,.36);
}

.reasoning-source-material.is-visual-view > .reasoning-source-step.is-technical-attachment {
    background: #f7f7f9;
    border-color: #dedfe6;
    color: #51596d;
    font-family: Consolas, "SF Mono", monospace;
    font-size: .75rem;
    max-height: 180px;
    overflow: auto;
}

.reasoning-source-material.is-visual-view > .reasoning-source-list-board {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.25);
    border-radius: 16px;
    list-style: none;
    padding: 14px;
}

.reasoning-source-material.is-visual-view > .reasoning-source-list-board > li {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.22);
    border-radius: 14px;
    padding: 11px 13px;
}

.reasoning-source-material.is-source-view > .reasoning-source-step::before {
    content: none;
}

.reasoning-source-material.is-source-view > .reasoning-source-step {
    display: block;
}

.reasoning-source-material.is-source-view .reasoning-source-compound {
    display: block;
}

.reasoning-source-material.is-source-view .reasoning-source-subsection {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    padding: 0;
}

.reasoning-source-material.is-source-view .reasoning-source-subsection + .reasoning-source-subsection {
    margin-top: 12px;
}

.reasoning-source-matrix tbody tr {
    transition: background-color .2s ease, box-shadow .2s ease;
}

.reasoning-source-matrix tbody tr:hover,
.reasoning-source-matrix tbody tr:focus {
    background: #fff0f7;
    box-shadow: inset 4px 0 #f63392;
}

.reasoning-source-material h2,
.reasoning-source-material h3,
.reasoning-source-material h4 {
    color: #171827;
    line-height: 1.3;
    margin: 12px 0 4px;
    overflow-wrap: anywhere;
}

.reasoning-source-material h2 {
    font-size: 1.35rem;
}

.reasoning-source-material h3 {
    font-size: 1.12rem;
}

.reasoning-source-material h4 {
    font-size: 1rem;
}

.reasoning-source-material p,
.reasoning-source-material li,
.reasoning-source-material td,
.reasoning-source-material th {
    color: #51596d;
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.reasoning-source-material p {
    margin: 0;
}

.reasoning-source-material ol,
.reasoning-source-material ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
}

.reasoning-source-material strong {
    color: #171827;
}

.reasoning-source-material em {
    color: #41485a;
}

.reasoning-source-material a {
    color: #c21868;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.reasoning-source-material pre,
.reasoning-source-material code {
    background: #fff7fb;
    border-radius: 12px;
    color: #171827;
}

.reasoning-source-material pre {
    border: 1px solid rgba(246,51,146,.22);
    overflow-x: auto;
    padding: 14px;
}

.reasoning-source-material code {
    border: 1px solid rgba(246,51,146,.14);
    padding: 2px 6px;
}

.reasoning-source-loading,
.reasoning-source-error {
    align-items: center;
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.22);
    border-radius: 16px;
    color: #51596d;
    display: flex;
    gap: 10px;
    line-height: 1.6;
    margin: 0;
    padding: 14px 16px;
}

.reasoning-source-loading i,
.reasoning-source-error i,
.reasoning-inline-arrow {
    color: #f63392;
}

.reasoning-check-options {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.reasoning-check-options button {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e2e3e9;
    border-radius: 14px;
    color: #171827;
    cursor: pointer;
    display: flex;
    gap: 10px;
    line-height: 1.55;
    padding: 12px 14px;
    text-align: left;
}

.reasoning-check-options button:hover,
.reasoning-check-options button:focus-visible {
    background: #fff7fb;
    border-color: rgba(246,51,146,.36);
    outline: 3px solid rgba(246,51,146,.14);
    outline-offset: 2px;
}

.reasoning-check-options b {
    color: #f63392;
}

.reasoning-check-options button.is-correct {
    background: #f2fbf5;
    border-color: #82c796;
}

.reasoning-check-options button.is-wrong {
    background: #fff4f6;
    border-color: #e08b9c;
}

.reasoning-check-feedback {
    border-radius: 14px;
    font-weight: 650;
    margin: 12px 0 0;
    padding: 13px 14px;
}

.reasoning-check-feedback[data-tone="success"] {
    background: #f2fbf5;
    color: #245d34;
}

.reasoning-check-feedback[data-tone="warning"] {
    background: #fff4f6;
    color: #8e2940;
}

.reasoning-mini-challenge {
    background: linear-gradient(145deg, #fff7fb, #ffffff);
}

.reasoning-mini-challenge p,
.reasoning-practice-prompt {
    margin: 0 0 14px;
}
.reasoning-practice-prompt p {
    color: #51596d;
    line-height: 1.7;
    margin: 0 0 8px;
}
.reasoning-practice-prompt blockquote {
    background: rgba(246,51,146,.05);
    border-left: 3px solid rgba(246,51,146,.25);
    border-radius: 0 12px 12px 0;
    margin: 10px 0;
    padding: 10px 14px;
}
.reasoning-practice-prompt blockquote p {
    color: #51596d;
    margin: 0;
}
.reasoning-practice-prompt ol,
.reasoning-practice-prompt ul {
    display: block;
    list-style: none;
    margin: 8px 0;
    padding: 0;
}
.reasoning-practice-prompt ol li,
.reasoning-practice-prompt ul li {
    background: rgba(246,51,146,.04);
    border: 1px solid rgba(244,143,188,.16);
    border-radius: 10px;
    display: block;
    margin-bottom: 5px;
    padding: 8px 12px 8px 16px;
    position: relative;
    color: #51596d;
    font-size: .85rem;
    line-height: 1.55;
}
.reasoning-practice-prompt ul li::before {
    color: #f63392;
    content: "◆";
    font-size: .45rem;
    left: 8px;
    position: absolute;
    top: 12px;
}
.reasoning-practice-prompt ol {
    counter-reset: practice-counter;
}
.reasoning-practice-prompt ol li {
    counter-increment: practice-counter;
    padding-left: 28px;
}
.reasoning-practice-prompt ol li::before {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    content: counter(practice-counter);
    display: inline-flex;
    font-size: .65rem;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    left: 6px;
    position: absolute;
    top: 8px;
    width: 20px;
}

.reasoning-practice-form {
    display: grid;
    gap: 18px;
}

.reasoning-task-navigator {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    padding: 4px 0 8px;
}

.reasoning-nav-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    position: relative;
    padding: 6px 0;
    border-bottom: 1px solid rgba(244,143,188,.12);
}
.reasoning-nav-group:last-child {
    border-bottom: 0;
}
.reasoning-nav-group-label {
    color: #f63392;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-right: 6px;
    padding: 0 8px 0 0;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 100%;
    margin-bottom: 2px;
}

.reasoning-task-navigator button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.25);
    border-radius: 100px;
    color: #51596d;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    font-size: .82rem;
    min-height: 34px;
    min-width: 34px;
    justify-content: center;
    padding: 4px 10px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.reasoning-task-navigator button:hover {
    background: rgba(246,51,146,.06);
    border-color: rgba(246,51,146,.3);
}
.reasoning-task-navigator button.is-active {
    background: #f63392;
    border-color: #f63392;
    color: #fff;
}

/* Desktop: horizontal layout */
@media (min-width: 768px) {
    .reasoning-task-navigator {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .reasoning-nav-group {
        border-bottom: 0;
        padding: 0;
        gap: 4px;
    }
    .reasoning-nav-group:not(:last-child) {
        padding-right: 8px;
        margin-right: 4px;
    }
    .reasoning-nav-group:not(:last-child)::after {
        background: rgba(244,143,188,.25);
        content: "";
        height: 22px;
        width: 1px;
    }
    .reasoning-nav-group-label {
        min-width: auto;
        margin-bottom: 0;
        font-size: .65rem;
    }
    .reasoning-task-navigator button {
        min-height: 36px;
        min-width: 36px;
        padding: 5px 10px;
    }
}
    color: #ffffff;
}
    color: #c21868;
}

.reasoning-task-navigator button.is-complete:not(.is-active) {
    background: #fff7fb;
    border-color: rgba(246,51,146,.45);
    color: #9f124f;
}

.reasoning-task-navigator button.is-complete:not(.is-active)::after {
    color: #f63392;
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.reasoning-task-navigator button:hover,
.reasoning-task-navigator button:focus-visible,
.reasoning-task-controls button:focus-visible,
.reasoning-reference-details summary:focus-visible {
    outline: 3px solid rgba(246,51,146,.16);
    outline-offset: 2px;
}

.reasoning-task-controls {
    align-items: center;
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.25);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr auto 1fr;
    padding: 12px;
}

.reasoning-task-controls strong {
    color: #51596d;
    font-size: .84rem;
    text-align: center;
}

.reasoning-task-controls button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 100px;
    color: #c21868;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
}

.reasoning-task-controls button:last-child {
    justify-self: end;
}

.reasoning-task-controls button:disabled {
    background: #f4f4f6;
    border-color: #dedfe5;
    color: #6f7282;
    cursor: not-allowed;
    opacity: .62;
}

.reasoning-reference-details {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.25);
    border-radius: 18px;
    margin-top: 22px;
    overflow: hidden;
}

.reasoning-reference-details summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr) 32px;
    list-style: none;
    min-height: 76px;
    padding: 14px 16px;
}

.reasoning-reference-details summary::-webkit-details-marker {
    display: none;
}

.reasoning-reference-details summary > i:first-child {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-reference-details summary span {
    display: grid;
    gap: 3px;
}

.reasoning-reference-details summary b {
    color: #171827;
}

.reasoning-reference-details summary small {
    color: #51596d;
    line-height: 1.5;
}

.reasoning-reference-details summary > i:last-child {
    color: #f63392;
    transition: transform .2s ease;
}

.reasoning-reference-details[open] summary > i:last-child {
    transform: rotate(180deg);
}

.reasoning-reference-details > .reasoning-source-container {
    border-top: 1px solid rgba(246,51,146,.2);
    padding: 16px;
}

.reasoning-practice-card {
    display: grid;
    gap: 16px;
}

.reasoning-practice-card[hidden],
.ai-reasoning-quiz-page .quiz-list > article[hidden] {
    display: none !important;
}

.reasoning-practice-card-head {
    align-items: center;
}

.reasoning-practice-card-head > span {
    align-items: center;
    background: #f63392;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 36px;
    font-weight: 850;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.reasoning-practice-card,
.ai-reasoning-quiz-page [data-quiz-index] {
    animation: reasoningCardIn .3s ease;
    transition: opacity .2s ease;
}
@keyframes reasoningCardIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

.reasoning-practice-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reasoning-practice-fields label {
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 16px;
    display: grid;
    gap: 8px;
    padding: 14px;
}

.reasoning-practice-fields label > span {
    color: #51596d;
    font-size: .84rem;
    font-weight: 800;
}

.reasoning-practice-fields textarea {
    background: #ffffff;
    border: 1px solid rgba(244,143,188,.34);
    border-radius: 14px;
    color: #171827;
    font: inherit;
    line-height: 1.55;
    min-height: 132px;
    padding: 12px 13px;
    resize: vertical;
}

.reasoning-practice-fields textarea:focus {
    border-color: rgba(246,51,146,.55);
    outline: 3px solid rgba(246,51,146,.15);
}

.reasoning-save-panel {
    align-items: center;
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
    border-radius: 18px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px;
}

.reasoning-save-panel > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reasoning-save-panel button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 100px;
    color: #f63392;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    padding: 10px 14px;
}

.reasoning-save-panel button:first-child {
    background: #f63392;
    border-color: #f63392;
    color: #ffffff;
}

.reasoning-save-panel button:hover,
.reasoning-save-panel button:focus-visible {
    outline: 3px solid rgba(246,51,146,.16);
    outline-offset: 2px;
}

.lesson-quiz-section.is-locked::before {
    background: rgba(246,51,146,.12);
    border: 1px solid rgba(246,51,146,.24);
    border-radius: 16px;
    color: #51596d;
    content: "Attempt sudah dipakai. Kuis dikunci dan kartu hijau/merah menunjukkan review jawaban.";
    display: block;
    font-weight: 750;
    line-height: 1.55;
    margin-bottom: 16px;
    padding: 13px 15px;
}

.ai-reasoning-quiz-page .lesson-quiz-section article label.is-selected > span {
    background: #fff7fb;
    border-color: rgba(246,51,146,.46);
    box-shadow: 0 0 0 3px rgba(246,51,146,.11);
}

.ai-reasoning-quiz-page .lesson-quiz-section article label.is-correct > span {
    background: #f2fbf5;
    border-color: #82c796;
}

.ai-reasoning-quiz-page .lesson-quiz-section article label.is-wrong > span {
    background: #fff4f6;
    border-color: #e08b9c;
}

/* ── Pedagogical Learning Flow Components ── */
.reasoning-hook-section {
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.28);
    border-radius: 18px;
    padding: 20px;
}

.reasoning-hook-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.reasoning-hook-head > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-hook-head span {
    color: #f63392;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-hook-head h3 {
    color: #171827;
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 6px 0 0;
}

.reasoning-hook-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reasoning-hook-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(244,143,188,.3);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    gap: 14px;
    padding: 16px;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.reasoning-hook-card:hover {
    border-color: rgba(246,51,146,.5);
    box-shadow: 0 4px 16px rgba(246,51,146,.08);
}

.reasoning-hook-card.is-selected {
    border-color: #f63392;
    box-shadow: 0 0 0 3px rgba(246,51,146,.15);
    background: #fff7fb;
}

.reasoning-hook-card-icon {
    align-items: center;
    background: rgba(246,51,146,.1);
    border-radius: 12px;
    color: #f63392;
    display: flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    font-size: 1.1rem;
}

.reasoning-hook-card strong {
    color: #171827;
    display: block;
    font-size: .9rem;
    margin-bottom: 4px;
}

.reasoning-hook-card p {
    color: #51596d;
    font-size: .84rem;
    line-height: 1.55;
    margin: 0;
}

.reasoning-hook-message {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
    border-radius: 14px;
    color: #51596d;
    font-weight: 650;
    line-height: 1.55;
    margin: 14px 0 0;
    padding: 13px 15px;
}

/* Opening section */
.reasoning-opening-section {
    padding: 4px 0;
}

.reasoning-opening-section p {
    color: #51596d;
    font-size: .97rem;
    line-height: 1.8;
    margin: 0 0 12px;
}

.reasoning-opening-section p:last-child { margin-bottom: 0; }

/* Comparison grid */
.reasoning-compare-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reasoning-compare-col {
    background: #fff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 16px;
    padding: 16px;
}

.reasoning-compare-col-accent {
    background: #fff7fb;
    border-color: rgba(246,51,146,.25);
}

.reasoning-compare-col h4 {
    color: #171827;
    font-size: .92rem;
    margin: 0 0 10px;
}

.reasoning-compare-col-accent h4 {
    color: #c21868;
}

.reasoning-compare-col ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reasoning-compare-col li {
    color: #51596d;
    font-size: .86rem;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reasoning-compare-col li::before {
    color: #f63392;
    content: "\f111";
    font-family: "Font Awesome 6 Free";
    font-size: .45rem;
    font-weight: 900;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Concept cards */
.reasoning-concept-card {
    background: #fff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(246,51,146,.04);
    padding: 20px;
}

.reasoning-concept-card h3 {
    align-items: center;
    color: #171827;
    display: flex;
    font-size: 1.08rem;
    gap: 10px;
    margin: 0 0 14px;
}

.reasoning-concept-card h3 i { color: #f63392; }

.reasoning-concept-card p {
    color: #51596d;
    font-size: .94rem;
    line-height: 1.75;
    margin: 0 0 10px;
}

.reasoning-concept-card p:last-child { margin-bottom: 0; }

.reasoning-numbered-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.reasoning-numbered-list li {
    color: #51596d;
    font-size: .9rem;
    line-height: 1.65;
    padding-left: 28px;
    position: relative;
}

.reasoning-numbered-list li::before {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    content: attr(data-num);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 1px;
    width: 20px;
}

/* Diagram flow */
.reasoning-diagram-flow {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.18);
    border-radius: 16px;
    display: grid;
    gap: 2px;
    grid-template-columns: minmax(auto, 420px);
    justify-content: center;
    justify-items: start;
    margin-top: 10px;
    padding: 16px;
}

.reasoning-diagram-step {
    align-items: center;
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.reasoning-diagram-step span {
    align-items: center;
    background: #f63392;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: .72rem;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.reasoning-diagram-step p {
    color: #171827;
    font-size: .88rem;
    font-weight: 650;
    margin: 0;
}

.reasoning-diagram-flow > i {
    color: #f63392;
    font-size: .7rem;
    margin-left: 14px;
    transform: translateX(-50%);
}

/* Example section */
.reasoning-example-section {
    background: #fff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(246,51,146,.04);
    padding: 20px;
}

.reasoning-example-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.reasoning-example-head > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-example-head span {
    color: #f63392;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-example-head h3 {
    color: #171827;
    font-size: 1.05rem;
    margin: 6px 0 0;
}

.reasoning-example-case {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.18);
    border-radius: 14px;
    color: #51596d;
    font-size: .9rem;
    line-height: 1.55;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.reasoning-example-case strong { color: #171827; }

.reasoning-example-steps {
    display: grid;
    gap: 8px;
}

.reasoning-example-step {
    display: grid;
    gap: 4px;
    grid-template-columns: 100px minmax(0, 1fr);
}

.reasoning-example-step strong {
    background: rgba(246,51,146,.1);
    border-radius: 100px;
    color: #c21868;
    font-size: .78rem;
    padding: 4px 12px;
    text-align: center;
}

.reasoning-example-step p {
    color: #51596d;
    font-size: .9rem;
    line-height: 1.55;
    margin: 0;
}

/* Quick Check actions */
.reasoning-check-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.reasoning-check-submit {
    align-items: center;
    background: #f63392;
    border: none;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 8px;
    padding: 10px 16px;
    transition: background .15s;
}

.reasoning-check-submit:hover { background: #d91d78; }
.reasoning-check-submit:disabled { background: #c0c2cc; cursor: not-allowed; }

.reasoning-check-retry {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246,51,146,.35);
    border-radius: 100px;
    color: #c21868;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 8px;
    padding: 10px 16px;
}

.reasoning-check-retry:hover { background: #fff7fb; }

.reasoning-check-options button.is-selected {
    background: #fff7fb;
    border-color: rgba(246,51,146,.5);
    box-shadow: 0 0 0 2px rgba(246,51,146,.12);
}

/* Challenge workspace */
.reasoning-challenge-workspace {
    background: #fff;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(246,51,146,.04);
    padding: 20px;
}

.reasoning-challenge-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.reasoning-challenge-head > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-challenge-head span {
    color: #f63392;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-challenge-head h3 {
    color: #171827;
    font-size: 1.05rem;
    margin: 6px 0 0;
}

.reasoning-challenge-instruction {
    color: #51596d;
    font-size: .94rem;
    line-height: 1.7;
    margin: 0 0 14px;
}

.reasoning-challenge-textarea {
    background: #fff;
    border: 1px solid rgba(244,143,188,.34);
    border-radius: 14px;
    color: #171827;
    font: inherit;
    font-size: .9rem;
    line-height: 1.6;
    min-height: 120px;
    padding: 14px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

.reasoning-challenge-textarea:focus {
    border-color: rgba(246,51,146,.55);
    outline: 3px solid rgba(246,51,146,.15);
}

.reasoning-challenge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.reasoning-challenge-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 100px;
    color: #c21868;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 8px;
    padding: 10px 16px;
    transition: all .15s;
}

.reasoning-challenge-actions button:hover { background: #fff7fb; }
.reasoning-challenge-actions .btn-reasoning-save { background: #f63392; border-color: #f63392; color: #fff; }
.reasoning-challenge-actions .btn-reasoning-save:hover { background: #d91d78; }

.reasoning-challenge-textarea.is-saved {
    background: #f2fbf5;
    border-color: #82c796;
    color: #245d34;
}

.btn-reasoning-edit {
    background: #ffffff;
    border: 1px solid rgba(246,51,146,.3);
    border-radius: 100px;
    color: var(--fellow-pink, #f63392);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    padding: 10px 16px;
}

/* Inline reply composer */
.discussion-reply-composer {
    margin-top: 12px;
    padding: 12px;
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.26);
    border-radius: 16px;
}

.discussion-reply-composer textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid rgba(244,143,188,.34);
    border-radius: 14px;
    padding: 12px;
    font: inherit;
    color: #171827;
    resize: vertical;
    box-sizing: border-box;
}

.discussion-reply-composer textarea:focus {
    border-color: rgba(246,51,146,.55);
    outline: 3px solid rgba(246,51,146,.15);
}

.discussion-reply-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.discussion-reply-actions button {
    align-items: center;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    gap: 8px;
    padding: 10px 16px;
}

.btn-reply-send {
    background: var(--fellow-pink, #f63392);
    border: none;
    color: #ffffff;
}

.btn-reply-cancel {
    background: #ffffff;
    border: 1px solid rgba(246,51,146,.3);
    color: var(--fellow-pink, #f63392);
}

.discussion-reply-validation {
    background: #fff4f6;
    border: 1px solid #e08b9c;
    border-radius: 14px;
    color: #8e2940;
    font-weight: 650;
    margin: 8px 0 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.discussion-reply-validation i {
    color: #e08b9c;
}

.reasoning-challenge-example {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.22);
    border-radius: 14px;
    margin-top: 12px;
    padding: 14px;
}

.reasoning-challenge-example strong { color: #171827; display: block; margin-bottom: 6px; }
.reasoning-challenge-example p { color: #51596d; font-size: .88rem; line-height: 1.6; margin: 0; }

/* Mistakes & Practices paired */
.reasoning-mp-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reasoning-mp-col {
    border-radius: 18px;
    padding: 20px;
}

.reasoning-mp-mistakes {
    background: #fff;
    border: 1px solid rgba(244,143,188,.22);
}

.reasoning-mp-practices {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
}

.reasoning-mp-col h3 {
    align-items: center;
    color: #171827;
    display: flex;
    font-size: .96rem;
    gap: 8px;
    margin: 0 0 12px;
}

.reasoning-mp-col h3 i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
    font-size: .78rem;
}

.reasoning-mp-mistakes h3 i { color: #171827; }
.reasoning-mp-practices h3 i { color: #f63392; }

.reasoning-mp-col ul {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reasoning-mp-col li {
    font-size: .86rem;
    line-height: 1.55;
    padding: 6px 10px 6px 14px;
    position: relative;
}

.reasoning-mp-col.reasoning-mp-mistakes li {
    background: rgba(246,51,146,.04);
    border-left: 3px solid rgba(246,51,146,.25);
    border-radius: 0 8px 8px 0;
    color: #51596d;
    padding: 6px 10px 6px 14px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.reasoning-mp-col.reasoning-mp-practices li {
    background: rgba(246,51,146,.06);
    border-left: 3px solid #f63392;
    border-radius: 0 8px 8px 0;
    color: #51596d;
    padding: 6px 10px 6px 14px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.reasoning-mp-col.reasoning-mp-mistakes li::before,
.reasoning-mp-col.reasoning-mp-practices li::before {
    display: none !important;
}

/* Summary section */
.reasoning-summary-section {
    background: #fff7fb;
    border: 1px solid rgba(246,51,146,.2);
    border-radius: 18px;
    padding: 20px;
}

.reasoning-summary-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.reasoning-summary-head > i {
    align-items: center;
    background: rgba(246,51,146,.12);
    border-radius: 50%;
    color: #f63392;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reasoning-summary-head span {
    color: #f63392;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reasoning-summary-head h3 {
    color: #171827;
    font-size: 1.05rem;
    margin: 6px 0 0;
}

.reasoning-outcomes-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reasoning-outcomes-list li {
    align-items: flex-start;
    color: #51596d;
    display: flex;
    font-size: .92rem;
    gap: 10px;
    line-height: 1.55;
}

.reasoning-outcomes-list li i {
    color: #3a8b5e;
    flex: 0 0 auto;
    margin-top: 3px;
}

.reasoning-transition {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(246,51,146,.2);
    border-radius: 14px;
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
}

.reasoning-transition i { color: #f63392; margin-top: 2px; }
.reasoning-transition p { color: #51596d; font-size: .9rem; line-height: 1.55; margin: 0; }

.reasoning-summary-action {
    margin-top: 16px;
    text-align: center;
}

.reasoning-next-chapter-btn {
    align-items: center;
    background: #f63392;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(246,51,146,.25);
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    gap: 10px;
    padding: 12px 28px;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}

.reasoning-next-chapter-btn:hover {
    background: #d91d78;
    box-shadow: 0 6px 20px rgba(246,51,146,.35);
}

/* Visual nav */
.reasoning-visual-nav button {
    font-size: .76rem;
}

.reasoning-source-nav button {
    font-size: .76rem;
}

/* Prompt section */
.reasoning-prompt-section {
    margin: 4px 0;
}

.reasoning-copy-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #51596d;
    cursor: pointer;
    font-size: .82rem;
    padding: 4px 8px;
    transition: color .15s;
}

.reasoning-copy-btn:hover {
    color: #f63392;
}

/* Analogy callout in orientation */
.reasoning-analogy-callout {
    margin-top: 12px;
}

/* Mobile overrides */
@media (max-width: 760px) {
    .reasoning-hook-options,
    .reasoning-compare-grid,
    .reasoning-mp-grid {
        grid-template-columns: 1fr;
    }

    .reasoning-example-step {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .reasoning-example-step strong {
        justify-self: start;
    }

    .reasoning-check-actions {
        flex-direction: column;
    }

    .reasoning-check-submit,
    .reasoning-check-retry {
        justify-content: center;
        width: 100%;
    }

    .reasoning-challenge-actions button {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reasoning-hook-card,
    .reasoning-check-options button,
    .reasoning-next-chapter-btn {
        transition: none;
    }
}

.ai-reasoning-discussion-page .practice-response-form,
.ai-reasoning-discussion-page .practice-response-form label,
.ai-reasoning-discussion-page .practice-response-form select,
.ai-reasoning-discussion-page .practice-response-form textarea {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

@media (max-width: 760px) {
    .reasoning-final-meta .reasoning-scaffold-module-meta-head,
    .reasoning-source-panel-head,
    .reasoning-practice-fields {
        grid-template-columns: 1fr;
    }

    .reasoning-save-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .reasoning-save-panel button {
        justify-content: center;
        width: 100%;
    }

    .reasoning-task-controls {
        grid-template-columns: 1fr 1fr;
    }

    .reasoning-task-controls strong {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .reasoning-task-controls button:last-child {
        justify-self: stretch;
    }

    .reasoning-task-controls button {
        width: 100%;
    }

    .reasoning-reference-details summary {
        grid-template-columns: 38px minmax(0, 1fr) 24px;
        padding: 13px;
    }

    .reasoning-source-toolbar {
        grid-template-columns: 1fr;
    }

    .reasoning-view-toggle button {
        flex: 1 1 0;
    }

    .reasoning-concept-lab {
        padding: 16px;
    }

    .reasoning-concept-stage {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .reasoning-source-material.is-visual-view {
        padding: 14px;
    }

    .reasoning-source-material.is-visual-view > .reasoning-source-step {
        grid-template-columns: minmax(0, 1fr);
        padding: 13px;
    }

    .reasoning-source-material.is-visual-view > .reasoning-source-step::before {
        height: 32px;
        width: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reasoning-view-toggle button,
    .reasoning-source-jumps button,
    .reasoning-concept-tabs button,
    .reasoning-source-matrix tbody tr {
        transition: none;
    }
}

.lesson-meta-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.lesson-meta-row span {
    align-items: center;
    color: #4d5469;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 600;
    gap: 9px;
}

.lesson-meta-row b {
    background: #fff0f7;
    border-radius: 999px;
    color: var(--fellow-pink);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 14px;
}

.lesson-material-panel,
.lesson-progress-card,
.lesson-list-card,
.lesson-note-card {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(170, 52, 104, 0.06);
}

.lesson-material-panel {
    overflow: hidden;
}

.lesson-tabs {
    align-items: center;
    border-bottom: 1px solid var(--fellow-line);
    display: flex;
    gap: 16px;
    min-height: 76px;
    overflow-x: auto;
    padding: 0 22px;
}

.lesson-tabs button,
.lesson-tabs a {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #51596d;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: 850 0.9rem 'Plus Jakarta Sans', sans-serif;
    gap: 9px;
    padding: 0 8px;
    text-decoration: none;
}

.lesson-tabs button.active,
.lesson-tabs a.active {
    border-bottom-color: var(--fellow-pink);
    color: var(--fellow-pink);
}

.math-ai-course-page .math-ai-hero {
    background: linear-gradient(110deg, #fff 0%, #fff6fb 52%, #fff0f7 100%);
}

.math-ai-course-page .math-ai-eyebrow {
    align-items: center;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    gap: 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.math-ai-course-page .math-ai-content {
    display: grid;
    gap: 18px;
}

.math-ai-course-page .math-ai-card,
.math-ai-course-page .math-ai-simulation,
.math-ai-course-page .math-ai-task,
.math-ai-course-page .math-ai-question,
.math-ai-course-page .math-ai-result,
.math-ai-course-page .math-ai-summary,
.math-ai-course-page .math-ai-formula {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(170, 52, 104, 0.05);
    padding: 22px;
}

.math-ai-course-page .math-ai-card > span:not(.math-ai-eyebrow) {
    align-items: center;
    background: #fff0f7;
    border-radius: 999px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    margin-bottom: 12px;
    width: 32px;
}

.math-ai-course-page .math-ai-card h1,
.math-ai-course-page .math-ai-card h2,
.math-ai-course-page .math-ai-card h3 {
    color: var(--fellow-text);
    letter-spacing: 0;
    margin: 0 0 10px;
}

.math-ai-course-page .math-ai-card p,
.math-ai-course-page .math-ai-task p,
.math-ai-course-page .math-ai-question label span,
.math-ai-course-page .math-ai-summary {
    color: #565d70;
    font-weight: 650;
    line-height: 1.7;
}

.math-ai-course-page .math-ai-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.math-ai-course-page .math-ai-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.math-ai-course-page .math-ai-lesson-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.math-ai-course-page .math-ai-lesson-card {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    color: inherit;
    display: grid;
    gap: 10px;
    min-height: 220px;
    padding: 20px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.math-ai-course-page .math-ai-lesson-card:hover {
    border-color: rgba(246, 51, 146, 0.45);
    transform: translateY(-2px);
}

.math-ai-course-page .math-ai-lesson-card > i {
    align-items: center;
    background: #fff0f7;
    border-radius: 16px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 1.4rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.math-ai-course-page .math-ai-lesson-card.is-done > i {
    background: #fff0f7;
    color: var(--fellow-pink);
}

.math-ai-course-page .math-ai-lesson-card span {
    color: var(--fellow-pink);
    font-size: 0.75rem;
    font-weight: 900;
}

.math-ai-course-page .math-ai-lesson-card h3,
.math-ai-course-page .math-ai-lesson-card p,
.math-ai-course-page .math-ai-lesson-card small {
    margin: 0;
}

.math-ai-course-page .math-ai-lesson-card h3 {
    color: var(--fellow-text);
    font-size: 1.05rem;
}

.math-ai-course-page .math-ai-lesson-card p,
.math-ai-course-page .math-ai-lesson-card small {
    color: #697083;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.6;
}

.math-ai-course-page .math-ai-simulation {
    display: grid;
    gap: 16px;
}

.math-ai-course-page .math-ai-simulation label {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 92px 28px minmax(0, 1fr);
}

.math-ai-course-page .math-ai-simulation label span,
.math-ai-course-page .math-ai-simulation label b {
    color: var(--fellow-text);
    font-weight: 900;
}

.math-ai-course-page .math-ai-simulation input[type="range"] {
    accent-color: var(--fellow-pink);
    width: 100%;
}

.math-ai-course-page .math-ai-sim-result,
.math-ai-course-page .math-ai-formula {
    align-items: center;
    background: #fff7fb;
    display: flex;
    gap: 14px;
}

.math-ai-course-page .math-ai-sim-result strong,
.math-ai-course-page .math-ai-formula i {
    color: var(--fellow-pink);
    font-weight: 900;
}

.math-ai-course-page .math-ai-sim-result span,
.math-ai-course-page .math-ai-formula span {
    color: #565d70;
    font-weight: 750;
    line-height: 1.6;
}

.math-ai-course-page .math-ai-form {
    display: grid;
    gap: 16px;
}

.math-ai-course-page .math-ai-task {
    display: grid;
    gap: 12px;
}

.math-ai-course-page .math-ai-task > span,
.math-ai-course-page .math-ai-question legend {
    color: var(--fellow-text);
    font-size: 1rem;
    font-weight: 900;
}

.math-ai-course-page .math-ai-task textarea,
.math-ai-course-page .math-ai-task input {
    border: 1px solid var(--fellow-line);
    border-radius: 14px;
    color: var(--fellow-text);
    font: 700 0.92rem 'Plus Jakarta Sans', sans-serif;
    outline: 0;
    padding: 14px 16px;
    width: 100%;
}

.math-ai-course-page .math-ai-task textarea:focus,
.math-ai-course-page .math-ai-task input:focus {
    border-color: rgba(246, 51, 146, 0.5);
    box-shadow: 0 0 0 4px rgba(246, 51, 146, 0.08);
}

.math-ai-course-page .math-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.math-ai-course-page .math-ai-actions button,
.math-ai-course-page .math-ai-done-btn,
.math-ai-course-page .math-ai-submit {
    align-items: center;
    background: var(--fellow-pink);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: 900 0.86rem 'Plus Jakarta Sans', sans-serif;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
}

.math-ai-course-page .math-ai-actions button:last-child {
    background: #fff0f7;
    color: var(--fellow-pink);
}

.math-ai-course-page .math-ai-done-btn:disabled,
.math-ai-course-page .math-ai-submit:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.math-ai-course-page .math-ai-status {
    color: var(--fellow-pink);
    font-weight: 850;
    margin: 0;
}

.math-ai-course-page .math-ai-quiz {
    display: grid;
    gap: 16px;
}

.math-ai-course-page .math-ai-question {
    display: grid;
    gap: 12px;
}

.math-ai-course-page .math-ai-question label {
    align-items: flex-start;
    border: 1px solid rgba(244, 143, 188, 0.2);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
}

.math-ai-course-page .math-ai-question input {
    accent-color: var(--fellow-pink);
    margin-top: 4px;
}

.math-ai-course-page .math-ai-explanation {
    background: #fff7fb;
    border-radius: 14px;
    color: #565d70;
    font-size: 0.88rem;
    margin: 0;
    padding: 12px 14px;
}

.math-ai-course-page .math-ai-result {
    display: grid;
    gap: 8px;
}

.math-ai-course-page .math-ai-result strong {
    color: var(--fellow-text);
    font-size: 1.35rem;
}

.math-ai-course-page .math-ai-result span {
    color: #565d70;
    font-weight: 800;
}

.math-ai-course-page .math-ai-result a {
    color: var(--fellow-pink);
    font-weight: 900;
    text-decoration: none;
}

.math-ai-course-page .math-ai-discussion-list {
    display: grid;
    gap: 14px;
}

@media (max-width: 860px) {
    .math-ai-course-page .math-ai-grid,
    .math-ai-course-page .math-ai-grid.two,
    .math-ai-course-page .math-ai-lesson-grid {
        grid-template-columns: 1fr;
    }

    .math-ai-course-page .math-ai-simulation label {
        grid-template-columns: 1fr 36px;
    }

    .math-ai-course-page .math-ai-simulation input[type="range"] {
        grid-column: 1 / -1;
    }
}

.lesson-article {
    padding: 28px 32px 34px;
}

.lesson-article h2 {
    color: #171827;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 12px;
}

.lesson-article h3 {
    color: #202438;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.lesson-article p {
    color: #4d5469;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 760px;
}

.ai-capability-grid,
.practice-card-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0 28px;
}

.ai-capability-grid article,
.practice-card-grid article {
    background: linear-gradient(145deg, #fff, #fff7fb);
    border: 1px solid var(--fellow-line);
    border-radius: 16px;
    display: grid;
    gap: 10px;
    padding: 18px;
}

.ai-capability-grid i {
    align-items: center;
    background: #f2e7ff;
    border-radius: 14px;
    color: #9c4ef5;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.ai-capability-grid h3,
.practice-card-grid h3,
.quiz-list h3 {
    color: #171827;
    font-size: 0.98rem;
    line-height: 1.35;
    margin: 0;
}

.ai-capability-grid p,
.practice-card-grid p {
    font-size: 0.8rem;
    margin: 0;
}

.lesson-numbered-list {
    color: #4d5469;
    display: grid;
    font-size: 0.94rem;
    font-weight: 500;
    gap: 12px;
    line-height: 1.75;
    margin: 0 0 28px;
    max-width: 840px;
    padding-left: 22px;
}

.ai-hierarchy-diagram {
    background: linear-gradient(145deg, #fff7fb, #fbf5ff);
    border: 1px solid #f0d9ff;
    border-radius: 18px;
    margin: 20px 0 34px;
    max-width: 820px;
    padding: 24px;
    text-align: center;
}

.ai-layer {
    align-items: center;
    border: 2px solid rgba(246, 51, 146, 0.24);
    border-radius: 18px;
    display: grid;
    justify-items: center;
    margin: 0 auto;
    padding: 22px;
}

.ai-layer span {
    color: #171827;
    font-weight: 750;
}

.ai-layer-ai {
    background: rgba(255, 255, 255, 0.76);
    max-width: 640px;
}

.ai-layer-ml {
    background: rgba(255, 240, 247, 0.88);
    margin-top: 18px;
    max-width: 460px;
    width: 80%;
}

.ai-layer-dl {
    background: #fff;
    margin-top: 18px;
    max-width: 300px;
    width: 78%;
}

.ai-hierarchy-diagram p {
    color: #697083;
    font-size: 0.78rem;
    font-weight: 500;
    margin: 16px 0 0;
}

.lesson-practice-section,
.lesson-quiz-section,
.lesson-discussion-section {
    border-top: 1px solid var(--fellow-line);
    margin-top: 30px;
    padding-top: 26px;
}

.practice-card-grid article > span,
.quiz-list article > span {
    align-items: center;
    background: #fff0f7;
    border: 1px solid #ffd2e5;
    border-radius: 10px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 42px;
}

.quiz-list {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.quiz-list article {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    padding: 18px;
}

.quiz-list label {
    align-items: flex-start;
    background: #fff7fb;
    border: 1px solid #ffe0ef;
    border-radius: 12px;
    color: #4d5469;
    cursor: pointer;
    display: flex;
    font-size: 0.86rem;
    font-weight: 500;
    gap: 10px;
    line-height: 1.5;
    padding: 12px;
}

.quiz-list input {
    accent-color: var(--fellow-pink);
    margin-top: 3px;
}

.quiz-submit-btn {
    background: var(--fellow-pink);
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font: 900 0.86rem 'Plus Jakarta Sans', sans-serif;
    margin-top: 18px;
    min-height: 44px;
    padding: 0 20px;
}

.quiz-submit-btn:disabled {
    cursor: default;
    opacity: 0.65;
}

.practice-response-form {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.practice-response-form label {
    display: grid;
    gap: 10px;
}

.practice-response-form label > span {
    color: #171827;
    font-size: 0.92rem;
    font-weight: 700;
}

.practice-response-form textarea {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    color: #273044;
    font: 500 0.9rem 'Plus Jakarta Sans', sans-serif;
    line-height: 1.6;
    min-height: 130px;
    outline: none;
    padding: 14px;
    resize: vertical;
}

.quiz-result-card {
    background: #fff0f7;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    color: #9d3668;
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding: 16px;
}

.quiz-result-card strong {
    color: #171827;
    font-size: 1.1rem;
}

.quiz-result-card span {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
}

.lesson-nav-footer a.is-disabled {
    opacity: 0.48;
    pointer-events: none;
}

.daily-ai-box {
    background: linear-gradient(135deg, #fbf5ff, #fff7fb);
    border: 1px solid #f0d9ff;
    border-radius: 14px;
    margin: 18px 0 26px;
    max-width: 720px;
    padding: 20px;
}

.daily-ai-box h3 {
    color: #171827;
    font-size: 1rem;
    margin: 0 0 18px;
}

.daily-ai-box > div {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.daily-ai-box span {
    align-items: center;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.daily-ai-box i {
    align-items: center;
    background: #fff;
    border-radius: 14px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 2rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.daily-ai-box small {
    color: #171827;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.35;
}

.ai-flow-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
    max-width: 950px;
}

.ai-flow-row > i {
    color: var(--fellow-pink);
    font-size: 1rem;
}

.ai-flow-row article {
    align-items: start;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    display: grid;
    gap: 7px;
    min-height: 112px;
    padding: 16px;
}

.ai-flow-row article i {
    align-items: center;
    background: #f2e7ff;
    border-radius: 12px;
    color: #9c4ef5;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ai-flow-row strong {
    color: #171827;
    font-size: 0.86rem;
}

.ai-flow-row small {
    color: #697083;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.45;
}

.lesson-nav-footer {
    align-items: center;
    border-top: 1px solid var(--fellow-line);
    display: flex;
    justify-content: space-between;
    padding: 20px 32px;
}

.lesson-nav-footer a,
.lesson-progress-card a {
    align-items: center;
    border: 1px solid #ff9fca;
    border-radius: 10px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-weight: 700;
    gap: 9px;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    text-decoration: none;
}

.lesson-nav-footer a:last-child,
.lesson-progress-card a {
    background: var(--fellow-pink);
    color: #fff;
}

.lesson-progress-card,
.lesson-list-card,
.lesson-note-card {
    padding: 14px;
}

.lesson-progress-card h2,
.lesson-list-card h2,
.lesson-note-card h2 {
    color: #171827;
    font-size: 0.92rem;
    font-weight: 750;
    margin: 0 0 10px;
}

.lesson-progress-mini {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 40px;
    margin-bottom: 10px;
}

/* ── Circular Progress Ring Card ── */
.lpc-header {
    font-size: 14px;
    font-weight: 700;
    color: #171827;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lpc-header i {
    color: var(--fellow-pink);
}
.lpc-ring-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 10px;
}
.lpc-ring-wrap svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.lpc-ring-wrap circle {
    transition: stroke-dashoffset 0.3s ease;
}
.lpc-ring-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lpc-ring-text strong {
    font-size: 28px;
    font-weight: 800;
    color: #171827;
}

.lesson-progress-mini b {
    background: #f4ecf2;
    border-radius: 999px;
    display: block;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.lesson-progress-mini b::after {
    background: var(--fellow-pink);
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--value);
}

.lesson-progress-mini strong,
.lesson-progress-card p {
    color: #3f4558;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0;
}

.lesson-progress-card p,
.lesson-lock-hint {
    color: #697083;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.lesson-progress-card a {
    margin-top: 12px;
    width: 100%;
}

.lesson-list-card ol {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lesson-list-card li {
    align-items: center;
    border-radius: 12px;
    display: grid;
    gap: 9px;
    grid-template-columns: 26px minmax(0, 1fr) 16px;
    min-height: 34px;
    padding: 0 6px;
}

.lesson-list-card li.active {
    background: #fff0f7;
}

.lesson-list-card span {
    color: #171827;
    font-size: 0.76rem;
    font-weight: 900;
    text-align: center;
}

.lesson-list-card li.active span {
    align-items: center;
    background: #fff;
    border-radius: 9px;
    color: var(--fellow-pink);
    display: inline-flex;
    height: 26px;
    justify-content: center;
}

.lesson-list-card a {
    color: #3f4558;
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-list-card li.active a,
.lesson-list-card li.active i {
    color: var(--fellow-pink);
}

.lesson-list-card i {
    color: #697083;
    font-size: 0.78rem;
}

.lesson-note-card .module-side-head {
    margin-bottom: 8px;
}

.lesson-note-card button {
    background: transparent;
    border: 0;
    color: var(--fellow-pink);
    cursor: pointer;
    font: 900 0.78rem 'Plus Jakarta Sans', sans-serif;
}

.lesson-note-card > div:last-child {
    align-items: center;
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid var(--fellow-line);
    border-radius: 14px;
    display: grid;
    gap: 12px;
    justify-items: center;
    min-height: 104px;
    padding: 20px;
    text-align: center;
}

.lesson-note-card > div:last-child i {
    color: var(--fellow-pink);
    font-size: 2.2rem;
}

.lesson-note-card p {
    color: #697083;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
}

.lesson-compact-note .module-side-head {
    margin-bottom: 6px;
}

.lesson-insight-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0 28px;
}

.lesson-insight-grid article {
    background: linear-gradient(145deg, #fff, #fff7fb);
    border: 1px solid var(--fellow-line);
    border-radius: 16px;
    display: grid;
    gap: 8px;
    padding: 18px;
}

.lesson-insight-grid span {
    align-items: center;
    background: #fff0f7;
    border-radius: 999px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    width: fit-content;
}

.lesson-insight-grid p,
.lesson-reference {
    color: #697083;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.65;
}

.lesson-reference {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    margin-top: 24px;
    padding: 14px 16px;
}

.participant-route-guard {
    align-items: center;
    background: linear-gradient(135deg, #fff7fb, #fff);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.participant-route-guard > div {
    background: #fff;
    border: 1px solid #ffd2e5;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(246, 51, 146, .1);
    max-width: 460px;
    padding: 34px;
    text-align: center;
}

.participant-route-guard i {
    align-items: center;
    background: #fff0f7;
    border-radius: 18px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 1.35rem;
    height: 58px;
    justify-content: center;
    margin-bottom: 18px;
    width: 58px;
}

.participant-route-guard h1 {
    color: var(--fellow-text);
    font-size: 1.45rem;
    margin: 0 0 10px;
}

.participant-route-guard p {
    color: #697083;
    font-size: .92rem;
    line-height: 1.65;
    margin: 0 0 22px;
}

.participant-route-guard a {
    align-items: center;
    background: var(--fellow-pink);
    border-radius: 13px;
    color: #fff;
    display: inline-flex;
    font-size: .88rem;
    font-weight: 800;
    min-height: 44px;
    padding: 0 18px;
    text-decoration: none;
}

.ai-intro-learning-map,
.ai-intro-lens,
.ai-intro-classifier,
.ai-intro-scenario,
.ai-intro-audit,
.ai-intro-references {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(246, 51, 146, 0.05);
    margin: 28px 0;
    padding: 22px;
}

.ai-intro-learning-map {
    align-items: stretch;
    background:
        linear-gradient(135deg, rgba(255, 240, 247, .95), rgba(255, 255, 255, .9) 46%, rgba(255, 247, 251, .96)),
        #fff;
    border-color: #ffd2e5;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
    overflow: hidden;
    padding: 0;
    position: relative;
}

.ai-intro-learning-map::before {
    background: radial-gradient(circle, rgba(246, 51, 146, .13), transparent 64%);
    content: '';
    height: 180px;
    position: absolute;
    right: -64px;
    top: -74px;
    width: 180px;
}

.ai-intro-map-copy {
    border-right: 1px solid #ffd2e5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 265px;
    padding: 26px;
    position: relative;
    z-index: 1;
}

.ai-intro-map-note {
    align-items: flex-start;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(246, 51, 146, .16);
    border-radius: 15px;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
}

.ai-intro-map-note i {
    align-items: center;
    background: var(--fellow-pink);
    border-radius: 11px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .8rem;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.ai-intro-map-note small {
    color: #5d6578;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.55;
}

.ai-intro-learning-map span,
.ai-intro-lens-copy span,
.ai-intro-classifier > div:first-child span,
.ai-intro-scenario-head span,
.ai-intro-audit > div:first-child span,
.ai-intro-reference-head span {
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ai-intro-learning-map h3,
.ai-intro-lens h4,
.ai-intro-classifier h4,
.ai-intro-scenario h4,
.ai-intro-audit h4,
.ai-intro-reference-head h3 {
    color: var(--fellow-text);
    font-size: 1.06rem;
    line-height: 1.35;
    margin: 0 0 8px;
}

.ai-intro-learning-map p,
.ai-intro-lens p,
.ai-intro-classifier p,
.ai-intro-scenario p,
.ai-intro-audit p,
.ai-intro-reference-head p,
.ai-intro-reference-grid p {
    color: #697083;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.65;
    margin: 0;
}

.ai-intro-map-steps {
    counter-reset: ai-map;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 26px 26px 26px 0;
    position: relative;
    z-index: 1;
}

.ai-intro-map-steps::before {
    background: linear-gradient(90deg, rgba(246, 51, 146, .25), rgba(246, 51, 146, .08));
    border-radius: 999px;
    content: '';
    height: 4px;
    left: 50px;
    position: absolute;
    right: 74px;
    top: 77px;
}

.ai-intro-map-steps li {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0 7px;
    position: relative;
    text-align: center;
}

.ai-intro-map-steps li::before {
    align-items: center;
    background: #fff;
    border: 1px solid #ffd2e5;
    border-radius: 999px;
    color: var(--fellow-pink);
    content: '0' counter(ai-map);
    counter-increment: ai-map;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    margin: 0 auto -2px;
    position: relative;
    width: 34px;
    z-index: 2;
}

.ai-intro-map-steps i {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .16);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(246, 51, 146, .11);
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 1rem;
    height: 50px;
    justify-content: center;
    margin: 0 auto 2px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
    width: 50px;
    z-index: 2;
}

.ai-intro-map-steps li:hover i {
    box-shadow: 0 16px 32px rgba(246, 51, 146, .17);
    transform: translateY(-3px);
}

.ai-intro-learning-map b {
    color: var(--fellow-text);
    font-size: .86rem;
    line-height: 1.25;
}

.ai-intro-learning-map small {
    color: #7a8297;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.45;
}

.ai-intro-lens {
    display: grid;
    gap: 18px;
}

.ai-intro-lens-controls,
.ai-intro-example-grid,
.ai-intro-scenario-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-intro-lens-controls button,
.ai-intro-example-grid button,
.ai-intro-scenario-tabs button {
    align-items: center;
    background: #fff;
    border: 1px solid #ffd2e5;
    border-radius: 13px;
    color: #4b5368;
    cursor: pointer;
    display: inline-flex;
    font: 800 .8rem 'Plus Jakarta Sans', sans-serif;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.ai-intro-lens-controls button:hover,
.ai-intro-example-grid button:hover,
.ai-intro-scenario-tabs button:hover,
.ai-intro-lens-controls button.is-active,
.ai-intro-example-grid button.is-active,
.ai-intro-scenario-tabs button.is-active {
    background: var(--fellow-pink);
    border-color: var(--fellow-pink);
    color: #fff;
    transform: translateY(-1px);
}

.ai-intro-lens-output,
.ai-intro-classifier [data-ai-example-output],
.ai-intro-scenario [data-ai-scenario-output] {
    animation: aiIntroFade .26s ease;
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 17px;
    padding: 18px;
}

.ai-intro-lens-output strong,
.ai-intro-classifier [data-ai-example-output] strong,
.ai-intro-scenario [data-ai-scenario-output] h4,
.ai-intro-reference-grid strong {
    color: var(--fellow-text);
    display: block;
    font-size: .94rem;
    margin-bottom: 7px;
}

.ai-intro-classifier {
    display: grid;
    gap: 16px;
}

.ai-intro-example-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-intro-example-grid button {
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    text-align: center;
}

.ai-intro-example-grid i {
    font-size: 1.3rem;
}

.ai-intro-flip-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px 0;
}

.ai-intro-flip-grid article {
    min-height: 190px;
    perspective: 900px;
    position: relative;
}

.ai-intro-flip-grid article > div {
    backface-visibility: hidden;
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    display: grid;
    gap: 10px;
    inset: 0;
    min-height: 190px;
    padding: 20px;
    position: absolute;
    transition: transform .45s ease;
}

.ai-intro-flip-grid article > div:first-child {
    background: linear-gradient(145deg, #fff, #fff7fb);
}

.ai-intro-flip-grid article > div:last-child {
    background: #fff0f7;
    border-color: #ffd2e5;
    transform: rotateY(180deg);
}

.ai-intro-flip-grid article:hover > div:first-child,
.ai-intro-flip-grid article:focus > div:first-child {
    transform: rotateY(180deg);
}

.ai-intro-flip-grid article:hover > div:last-child,
.ai-intro-flip-grid article:focus > div:last-child {
    transform: rotateY(360deg);
}

.ai-intro-flip-grid span {
    align-items: center;
    background: #fff0f7;
    border-radius: 16px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.ai-intro-flip-grid h4 {
    color: var(--fellow-text);
    font-size: 1rem;
    margin: 0;
}

.ai-intro-flip-grid p {
    color: #697083;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
}

.ai-intro-scenario {
    display: grid;
    gap: 16px;
}

.ai-intro-scenario dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.ai-intro-scenario dl div {
    display: grid;
    gap: 3px;
}

.ai-intro-scenario dt {
    color: var(--fellow-pink);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-intro-scenario dd {
    color: #4b5368;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
}

.ai-intro-audit {
    display: grid;
    gap: 16px;
}

.ai-intro-audit-list {
    display: grid;
    gap: 10px;
}

.ai-intro-audit-list label {
    align-items: center;
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    color: #4b5368;
    cursor: pointer;
    display: flex;
    font-size: .84rem;
    font-weight: 700;
    gap: 10px;
    padding: 12px 14px;
}

.ai-intro-audit-list input {
    accent-color: var(--fellow-pink);
}

.ai-intro-audit-meter {
    align-items: center;
    display: grid;
    gap: 8px;
}

.ai-intro-audit-meter::before {
    background: #ffe1ee;
    border-radius: 999px;
    content: '';
    grid-area: 1 / 1;
    height: 10px;
}

.ai-intro-audit-meter b {
    background: var(--fellow-pink);
    border-radius: 999px;
    grid-area: 1 / 1;
    height: 10px;
    transition: width .25s ease;
    width: 0;
}

.ai-intro-audit-meter span {
    color: #697083;
    font-size: .8rem;
    font-weight: 700;
}

.ai-intro-references {
    background: linear-gradient(145deg, #fff, #fff7fb);
}

.ai-intro-reference-head {
    margin-bottom: 18px;
}

.ai-intro-reference-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-intro-reference-grid article {
    background: rgba(255, 255, 255, .82);
    border: 1px solid #ffd2e5;
    border-radius: 16px;
    padding: 16px;
}

.lesson-reference-mini {
    display: grid;
    gap: 8px;
}

.lesson-reference-mini a {
    align-items: center;
    border: 1px solid var(--fellow-line);
    border-radius: 12px;
    color: #4b5368;
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    gap: 9px;
    min-height: 38px;
    padding: 0 11px;
    text-decoration: none;
}

.lesson-reference-mini i {
    color: var(--fellow-pink);
}

@keyframes aiIntroFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .ai-intro-learning-map,
    .ai-intro-reference-grid {
        grid-template-columns: 1fr;
    }

    .ai-intro-map-copy {
        border-bottom: 1px solid #ffd2e5;
        border-right: 0;
        min-height: 0;
    }

    .ai-intro-map-steps {
        padding: 0 22px 24px;
    }

    .ai-intro-example-grid,
    .ai-intro-flip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .ai-intro-map-steps {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .ai-intro-map-steps::before {
        display: none;
    }

    .ai-intro-map-steps li {
        align-items: center;
        background: rgba(255, 255, 255, .74);
        border: 1px solid #ffd2e5;
        border-radius: 15px;
        display: grid;
        gap: 4px 12px;
        grid-template-columns: 34px 50px minmax(0, 1fr);
        padding: 11px;
        text-align: left;
    }

    .ai-intro-map-steps li::before,
    .ai-intro-map-steps i {
        margin: 0;
    }

    .ai-intro-map-steps small {
        grid-column: 3;
    }

    .ai-intro-example-grid,
    .ai-intro-flip-grid {
        grid-template-columns: 1fr;
    }
}

.practice-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.practice-action-row button,
.discussion-compose button {
    border: 1px solid #ff9fca;
    border-radius: 11px;
    cursor: pointer;
    font: 700 0.84rem 'Plus Jakarta Sans', sans-serif;
    min-height: 42px;
    padding: 0 16px;
}

.practice-action-row button:first-child,
.discussion-compose button {
    background: var(--fellow-pink);
    color: #fff;
}

.practice-action-row button:not(:first-child) {
    background: #fff;
    color: var(--fellow-pink);
}

.practice-status {
    color: #697083;
    font-size: 0.82rem;
    margin: 0;
}

.discussion-thread {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.discussion-bubble {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 18px;
    display: grid;
    gap: 10px;
    padding: 16px;
}

.discussion-bubble > div:first-child {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 36px max-content minmax(0, 1fr);
}

.discussion-bubble span {
    align-items: center;
    background: var(--fellow-pink);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.discussion-bubble strong {
    color: #171827;
    font-size: 0.9rem;
}

.discussion-bubble small {
    color: #8a90a0;
    font-size: 0.75rem;
    justify-self: end;
}

.discussion-bubble p {
    margin: 0;
}

.discussion-bubble button {
    background: transparent;
    border: 0;
    color: var(--fellow-pink);
    cursor: pointer;
    font: 700 0.8rem 'Plus Jakarta Sans', sans-serif;
    justify-self: start;
    padding: 0;
}

.discussion-replies {
    border-left: 2px solid #ffd2e5;
    display: grid;
    gap: 10px;
    margin-left: 18px;
    padding-left: 14px;
}

.discussion-replies article {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 14px;
    padding: 12px;
}

@media (max-width: 1500px) {
    .module-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-list article {
        grid-template-columns: 42px 62px minmax(180px, 1fr) minmax(140px, 190px) 104px;
    }

    .module-track-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-card-grid,
    .course-card-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1240px) {
    .module-layout {
        grid-template-columns: 1fr;
    }

    .module-right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }
}

@media (max-width: 860px) {
    .module-topbar {
        margin: 0 0 20px;
        padding: 0 0 18px;
    }

    .module-tabs {
        display: flex;
        justify-self: stretch;
        overflow-x: auto;
    }

    .module-tabs button {
        flex: 0 0 auto;
        min-width: 180px;
    }

    .ai-lab-catalog {
        max-height: none;
    }

    .course-category-scroll {
        max-height: min(64vh, 620px);
    }

    .module-stat-grid,
    .module-track-grid,
    .course-card-grid,
    .course-card-grid.compact,
    .specialization-grid,
    .module-right {
        grid-template-columns: 1fr;
    }

    .course-category-head {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }

    .specialization-grid article {
        min-height: auto;
    }

    .lesson-list article {
        align-items: start;
        grid-template-columns: 38px 56px minmax(0, 1fr);
    }

    .lesson-progress,
    .lesson-list button {
        grid-column: 3;
    }

    .progress-card {
        grid-template-columns: 150px minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .module-stat-grid article {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 106px;
        padding: 16px;
    }

    .module-stat-grid i {
        height: 54px;
        width: 54px;
    }

    .module-panel {
        padding: 16px;
    }

    .course-card {
        min-height: auto;
    }

    .specialization-grid article {
        grid-template-columns: 54px minmax(0, 1fr);
        padding: 16px;
    }

    .specialization-grid article > i {
        height: 50px;
        width: 50px;
    }

    .specialization-grid a {
        grid-column: 1 / -1;
        width: 100%;
    }

    .progress-card {
        grid-template-columns: 1fr;
    }

    .progress-donut {
        justify-self: center;
        width: 180px;
    }

    .module-help-card {
        grid-template-columns: 1fr;
    }

    .module-help-card > i {
        justify-self: center;
    }
}

/* ── Pyodide Playground ─── */
.pyodide-status {
    background: var(--fellow-pink-soft, #fff0f7);
    border: 1px solid var(--fellow-line, rgba(244,143,188,.26));
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px 20px;
}

.pyodide-status.ready {
    background: #f0fdf4;
    border-color: rgba(34,197,94,.22);
}

.pyodide-loading-bar {
    background: rgba(246,51,146,.14);
    border-radius: 4px;
    flex: 1;
    height: 6px;
    max-width: 220px;
    overflow: hidden;
}

.pyodide-status.ready .pyodide-loading-bar {
    background: rgba(34,197,94,.18);
}

.pyodide-loading-bar b {
    animation: pyPulse 1.2s ease-in-out infinite;
    background: var(--fellow-pink, #f63392);
    border-radius: 4px;
    display: block;
    height: 100%;
    width: 100%;
}

.pyodide-status.ready .pyodide-loading-bar b {
    animation: none;
    background: #22c55e;
}

@keyframes pyPulse {
    0% { opacity: .35; }
    50% { opacity: 1; }
    100% { opacity: .35; }
}

.pyodide-status span {
    color: var(--fellow-text, #171827);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}

.py-playground {
    background: #fff7fb;
    border: 1px solid var(--fellow-line, rgba(244,143,188,.26));
    border-radius: 14px;
    margin: 8px 0 24px;
    overflow: hidden;
}

.py-editor-wrap {
    background: #fff;
    border-bottom: 1px solid var(--fellow-line, rgba(244,143,188,.26));
}

.py-editor {
    background: transparent;
    border: none;
    color: var(--fellow-text, #171827);
    display: block;
    font-family: 'SF Mono','Space Mono',monospace;
    font-size: .84rem;
    line-height: 1.65;
    min-height: 100px;
    outline: none;
    padding: 16px 20px;
    resize: vertical;
    tab-size: 4;
    width: 100%;
}

.py-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 10px 16px;
}

.py-run {
    align-items: center;
    background: var(--fellow-pink, #f63392);
    border: none;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Plus Jakarta Sans',sans-serif;
    font-size: .82rem;
    font-weight: 700;
    gap: 6px;
    padding: 8px 18px;
    transition: background .15s;
}

.py-run:hover { background: #d42a7a; }
.py-run:disabled { background: #e8a0c0; cursor: not-allowed; }

.py-reset {
    align-items: center;
    background: transparent;
    border: 1px solid var(--fellow-line, rgba(244,143,188,.26));
    border-radius: 100px;
    color: var(--fellow-muted, #6f7282);
    cursor: pointer;
    display: inline-flex;
    font-family: 'Plus Jakarta Sans',sans-serif;
    font-size: .8rem;
    font-weight: 600;
    gap: 5px;
    padding: 8px 16px;
    transition: all .15s;
}

.py-reset:hover {
    border-color: var(--fellow-pink, #f63392);
    color: var(--fellow-pink, #f63392);
}

.py-output {
    background: #fffcfd;
    border: 1px solid rgba(246,51,146,.15);
    border-radius: 14px;
    color: #171827;
    display: none;
    font-family: 'SF Mono','Space Mono',monospace;
    font-size: .82rem;
    line-height: 1.6;
    margin: 0;
    max-height: 220px;
    min-height: 48px;
    overflow-y: auto;
    padding: 14px 20px;
    white-space: pre-wrap;
    box-shadow: inset 0 2px 10px rgba(246,51,146,.03);
}

.py-output.visible { display: block; }
.py-output.error { color: #d81b60; font-weight: 600; background: #fff0f5; }

@media (max-width: 640px) {
    .pyodide-status { flex-direction: column; align-items: flex-start; }
    .pyodide-loading-bar { max-width: 100%; width: 100%; }
    .py-actions { flex-wrap: wrap; }
}

/* --- CDD Structure Styles --- */
.cdd-chapter {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 40px;
    box-shadow: 0 8px 24px rgba(170, 52, 104, 0.04);
}

.cdd-chapter h2 {
    color: var(--fellow-text);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--fellow-line);
    display: flex;
    align-items: center;
    gap: 12px;
}

.cdd-step {
    border-left: 3px solid var(--fellow-line);
    padding: 4px 0 4px 20px;
    margin-bottom: 24px;
    position: relative;
    transition: all 0.3s ease;
}

.cdd-step:hover {
    border-left-color: var(--fellow-pink);
}

.cdd-step h3 {
    color: var(--fellow-pink);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cdd-step p {
    color: var(--fellow-text);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 12px 0;
}

.cdd-step p:last-child {
    margin-bottom: 0;
}

/* Machine Learning module scoped styles */
.ml-course-page .lesson-layout {
    align-items: start;
}

.ml-course-page .lesson-right-panel {
    position: sticky;
    top: 24px;
}

.ml-lesson-hero {
    background: linear-gradient(110deg, #fff 0%, #fff7fb 52%, #eafff4 100%);
}

.ml-eyebrow {
    align-items: center;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    gap: 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ml-hero-visual {
    align-items: center;
    align-self: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(92px, 1fr) 34px minmax(92px, 1fr) 34px minmax(92px, 1fr);
    justify-items: center;
    padding: 24px;
}

.ml-hero-visual.is-compact {
    grid-template-columns: minmax(220px, 340px);
    justify-content: center;
}

.ml-data-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(246, 51, 146, 0.18);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(170, 52, 104, 0.08);
    display: grid;
    gap: 8px;
    min-height: 112px;
    padding: 18px;
    text-align: center;
    width: 100%;
}

.ml-data-card span,
.ml-current-topic span,
.ml-section-head span,
.ml-chapter-header span {
    color: var(--fellow-pink);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ml-data-card strong {
    color: #171827;
    font-size: 1.2rem;
}

.ml-data-card.is-model {
    background: #fff0f7;
}

.ml-data-card.is-output {
    background: #f0fff7;
    border-color: rgba(40, 189, 119, 0.2);
}

.ml-hero-arrow {
    align-items: center;
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 999px;
    color: var(--fellow-pink);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.ml-current-topic {
    background: linear-gradient(135deg, #fff7fb, #fff);
    border: 1px solid #ffd2e5;
    border-radius: 16px;
    display: grid;
    gap: 6px;
    margin-bottom: 24px;
    padding: 16px 18px;
}

.ml-current-topic strong {
    color: #171827;
    font-size: 1rem;
}

.ml-loading-state,
.ml-error-state,
.ml-empty-state {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 18px;
    color: #697083;
    display: grid;
    gap: 12px;
    justify-items: center;
    min-height: 180px;
    padding: 40px 24px;
    text-align: center;
}

.ml-loading-state i,
.ml-error-state i {
    color: var(--fellow-pink);
    font-size: 1.8rem;
}

.ml-chapter {
    display: grid;
    gap: 26px;
}

.ml-chapter-header {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(170, 52, 104, 0.05);
    display: grid;
    gap: 10px;
    padding: 24px;
}

.ml-chapter-header h2,
.ml-section-head h2,
.ml-section-head h3 {
    color: #171827;
    letter-spacing: 0;
    margin: 0;
}

.ml-chapter-header h2 {
    font-size: 1.65rem;
}

.ml-chapter-header p,
.ml-section-head p,
.ml-info-card p,
.ml-concept-card p,
.ml-case-grid p,
.ml-choice-guide p,
.ml-note,
.ml-callout p {
    color: #4d5469;
    font-weight: 600;
    line-height: 1.75;
    margin: 0;
}

.ml-section-head {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.ml-topic-block {
    border-top: 1px solid var(--fellow-line);
    display: grid;
    gap: 16px;
    padding-top: 26px;
}

.ml-split-grid,
.ml-card-grid.two,
.ml-metric-layout,
.ml-boundary-demo,
.ml-network-demo {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-card-grid.three,
.ml-case-grid,
.ml-data-split,
.ml-fit-grid,
.ml-algorithm-map {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-algorithm-strip {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ml-concept-card,
.ml-info-card,
.ml-case-grid article,
.ml-equation-grid article,
.ml-algorithm-strip article,
.ml-data-split article,
.ml-fit-grid article,
.ml-algorithm-map article,
.ml-choice-guide article,
.ml-save-panel,
.ml-table-card,
.ml-boundary-demo,
.ml-network-demo {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(170, 52, 104, 0.05);
}

.ml-concept-card,
.ml-info-card,
.ml-case-grid article,
.ml-equation-grid article,
.ml-algorithm-strip article,
.ml-data-split article,
.ml-fit-grid article,
.ml-algorithm-map article,
.ml-choice-guide article {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.ml-concept-card.is-accent,
.ml-info-card:hover,
.ml-fit-grid article.is-balanced {
    background: linear-gradient(145deg, #fff7fb, #fff);
    border-color: #ffd2e5;
}

.ml-concept-card i,
.ml-info-card i,
.ml-algorithm-strip i,
.ml-callout i {
    align-items: center;
    background: #fff0f7;
    border-radius: 16px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-size: 1.15rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.ml-concept-card h3,
.ml-info-card h4,
.ml-case-grid b,
.ml-algorithm-strip h4,
.ml-fit-grid h4,
.ml-algorithm-map h4,
.ml-choice-guide b,
.ml-network-copy h4 {
    color: #171827;
    letter-spacing: 0;
    margin: 0;
}

.ml-concept-card code,
.ml-algorithm-strip code {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 12px;
    color: #9d3668;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;
    padding: 8px 10px;
    width: fit-content;
}

.ml-concept-card small,
.ml-info-card small,
.ml-fit-grid small {
    color: #697083;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
}

.ml-flow {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
}

.ml-flow > i {
    align-self: center;
    color: var(--fellow-pink);
    justify-self: center;
}

.ml-flow-step {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    display: grid;
    gap: 8px;
    padding: 18px;
}

.ml-flow-step strong,
.ml-equation-grid span,
.ml-data-split strong {
    color: #171827;
    font-size: 1.05rem;
    font-weight: 900;
}

.ml-flow-step span,
.ml-data-split span,
.ml-metric-list span {
    color: #697083;
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.6;
}

.ml-table-card {
    overflow-x: auto;
}

.ml-table-card table {
    border-collapse: collapse;
    min-width: 720px;
    width: 100%;
}

.ml-table-card th,
.ml-table-card td {
    border-bottom: 1px solid var(--fellow-line);
    color: #4d5469;
    font-size: 0.86rem;
    line-height: 1.55;
    padding: 14px 16px;
    text-align: left;
}

.ml-table-card th {
    background: #fff7fb;
    color: #171827;
    font-weight: 900;
}

.ml-table-card tr:last-child td {
    border-bottom: 0;
}

.ml-equation-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-equation-grid span {
    align-items: center;
    background: #fff0f7;
    border-radius: 14px;
    color: var(--fellow-pink);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 68px;
}

.ml-boundary-demo,
.ml-network-demo {
    align-items: center;
    padding: 20px;
}

.ml-axis {
    background: linear-gradient(135deg, #fff7fb, #f8fffb);
    border: 1px solid #ffd2e5;
    border-radius: 18px;
    min-height: 260px;
    overflow: hidden;
    position: relative;
}

.ml-axis b {
    background: var(--fellow-pink);
    border-radius: 999px;
    height: 4px;
    left: 18%;
    position: absolute;
    top: 50%;
    transform: rotate(-24deg);
    width: 72%;
}

.ml-axis .dot {
    background: var(--fellow-pink);
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(170, 52, 104, 0.12);
    height: 20px;
    left: 22%;
    position: absolute;
    top: 28%;
    width: 20px;
}

.ml-axis .dot.d2 {
    left: 31%;
    top: 48%;
}

.ml-axis .dot.d3 {
    left: 18%;
    top: 68%;
}

.ml-axis .dot.green {
    background: #28bd77;
    left: 68%;
    top: 26%;
}

.ml-axis .dot.green.d2 {
    left: 76%;
    top: 52%;
}

.ml-axis .dot.green.d3 {
    left: 62%;
    top: 70%;
}

.ml-check-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.ml-check-list li {
    align-items: flex-start;
    color: #4d5469;
    display: flex;
    font-size: 0.9rem;
    font-weight: 650;
    gap: 10px;
    line-height: 1.5;
}

.ml-check-list i {
    color: #28bd77;
    margin-top: 3px;
}

.ml-data-split article,
.ml-fit-grid article,
.ml-algorithm-map article {
    text-align: center;
}

.ml-folds {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ml-folds span {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 12px;
    color: #697083;
    font-size: 0.8rem;
    font-weight: 800;
    min-height: 46px;
    padding: 12px;
    text-align: center;
}

.ml-folds span.is-val {
    background: #fff0f7;
    border-color: #ffd2e5;
    color: var(--fellow-pink);
}

.ml-capacity-meter {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
}

.ml-capacity-meter span {
    color: #697083;
    font-size: 0.82rem;
    font-weight: 800;
}

.ml-capacity-meter b {
    background: linear-gradient(90deg, #28bd77, var(--fellow-pink));
    border-radius: 999px;
    display: block;
    height: 12px;
}

.ml-matrix-card {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(90px, 1fr) repeat(2, minmax(90px, 1fr));
    padding: 14px;
}

.ml-matrix-card b,
.ml-matrix-card strong {
    align-items: center;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    min-height: 54px;
    padding: 10px;
    text-align: center;
}

.ml-matrix-card b {
    background: #fff7fb;
    color: #9d3668;
    font-size: 0.78rem;
}

.ml-matrix-card strong {
    background: #f8fffb;
    color: #171827;
    font-size: 0.95rem;
}

.ml-metric-list {
    display: grid;
    gap: 10px;
}

.ml-metric-list article {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    padding: 14px;
}

.ml-metric-list strong {
    color: #171827;
}

.ml-callout {
    align-items: flex-start;
    background: linear-gradient(135deg, #fff0f7, #fff);
    border: 1px solid #ffd2e5;
    border-radius: 18px;
    display: grid;
    gap: 16px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 20px;
}

.ml-callout.is-soft {
    background: #f8fffb;
    border-color: rgba(40, 189, 119, 0.22);
}

.ml-callout h3 {
    color: #171827;
    margin: 0 0 6px;
}

.ml-inline-next,
.ml-nav-btn {
    align-items: center;
    background: var(--fellow-pink);
    border: 1px solid var(--fellow-pink);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: 850 0.88rem 'Plus Jakarta Sans', sans-serif;
    gap: 9px;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    text-decoration: none;
    width: fit-content;
}

.ml-inline-next {
    justify-self: end;
}

.ml-nav-btn.is-outline {
    background: #fff;
    color: var(--fellow-pink);
}

.ml-nav-btn[hidden],
.ml-inline-next[hidden] {
    display: none;
}

.ml-chapter-pagination {
    align-items: center;
    border-top: 1px solid var(--fellow-line);
    display: grid;
    gap: 12px;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    margin-top: 32px;
    padding-top: 22px;
}

.ml-mini-matrix,
.ml-score-orbit,
.ml-discussion-mark {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #ffd2e5;
    border-radius: 20px;
    box-shadow: 0 18px 38px rgba(170, 52, 104, 0.08);
    min-height: 190px;
    padding: 20px;
    width: 100%;
}

.ml-mini-matrix {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-mini-matrix span,
.ml-score-orbit span,
.ml-discussion-mark span {
    align-items: center;
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 16px;
    color: #9d3668;
    display: flex;
    font-weight: 900;
    justify-content: center;
}

.ml-score-orbit,
.ml-discussion-mark {
    align-items: center;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.ml-score-orbit strong,
.ml-discussion-mark i {
    align-items: center;
    background: var(--fellow-pink);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 1.2rem;
    height: 74px;
    justify-content: center;
    width: 74px;
}

.ml-practice-form select,
.ml-discussion-form select {
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    color: #273044;
    font: 700 0.9rem 'Plus Jakarta Sans', sans-serif;
    min-height: 46px;
    outline: none;
    padding: 0 14px;
}

.ml-practice-card {
    display: grid;
    gap: 18px;
    padding: 0;
}

.ml-card-top {
    align-items: flex-start;
    background: linear-gradient(90deg, #fff7fb, #fff);
    border-bottom: 1px solid var(--fellow-line);
    display: grid;
    gap: 14px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 18px 20px;
}

.ml-card-top > span {
    align-items: center;
    background: var(--fellow-pink);
    border-radius: 14px;
    color: #fff;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ml-card-top h3,
.ml-card-top p {
    margin: 0;
}

.ml-card-top p {
    font-size: 0.9rem;
}

.ml-practice-card > label,
.ml-practice-card > .ml-feedback,
.ml-practice-card > .ml-matrix-card {
    margin-left: 20px;
    margin-right: 20px;
}

.ml-practice-card > label:last-child,
.ml-practice-card > .ml-feedback:last-child {
    margin-bottom: 20px;
}

.ml-feedback {
    align-items: flex-start;
    background: #f0fff7;
    border: 1px solid rgba(40, 189, 119, 0.22);
    border-radius: 14px;
    color: #236a49;
    display: flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 10px;
    line-height: 1.55;
    padding: 12px 14px;
}

.ml-feedback[hidden] {
    display: none;
}

.ml-feedback i {
    margin-top: 3px;
}

.ml-save-panel {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding: 20px;
}

.ml-save-panel h3,
.ml-save-panel p {
    margin: 0;
}

.practice-status[data-tone="success"] {
    color: #236a49;
}

.practice-status[data-tone="warning"] {
    color: #b45309;
}

.ml-practice-form.is-saved textarea,
.ml-practice-form.is-saved select {
    opacity: 0.72;
}

.ml-quiz-page .quiz-list label.is-correct {
    background: #f0fff7;
    border-color: rgba(40, 189, 119, 0.36);
    color: #236a49;
}

.ml-quiz-page .quiz-list label.is-wrong {
    background: #fff1f2;
    border-color: rgba(225, 29, 72, 0.26);
    color: #9f1239;
}

.quiz-explanation {
    align-items: flex-start;
    background: #fff7fb;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    color: #4d5469;
    display: flex;
    font-size: 0.84rem;
    font-weight: 650;
    gap: 10px;
    line-height: 1.6;
    margin: 0;
    max-width: none;
    padding: 12px 14px;
}

.quiz-explanation i {
    color: var(--fellow-pink);
    margin-top: 3px;
}

.ml-dev-reset {
    background: #fff;
    border: 1px solid #ffd2e5;
    border-radius: 999px;
    color: var(--fellow-pink);
    cursor: pointer;
    font: 800 0.78rem 'Plus Jakarta Sans', sans-serif;
    margin-top: 8px;
    min-height: 34px;
    padding: 0 14px;
    width: fit-content;
}

.ml-discussion-prompts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 22px;
}

.ml-discussion-prompts button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 16px;
    color: #3f4558;
    cursor: pointer;
    display: flex;
    font: 850 0.84rem 'Plus Jakarta Sans', sans-serif;
    gap: 10px;
    min-height: 74px;
    padding: 14px;
    text-align: left;
}

.ml-discussion-prompts i {
    align-items: center;
    background: #fff0f7;
    border-radius: 14px;
    color: var(--fellow-pink);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ml-discussion-form .ml-save-panel {
    align-items: center;
    box-shadow: none;
}

.ml-discussion-form .ml-save-panel button {
    width: fit-content;
}

.ml-network-demo {
    grid-template-columns: minmax(70px, 0.7fr) 32px minmax(70px, 0.7fr) 32px minmax(70px, 0.7fr) minmax(220px, 1.4fr);
}

.ml-neuron-column {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.ml-neuron-column span {
    align-items: center;
    background: #fff0f7;
    border: 1px solid #ffd2e5;
    border-radius: 999px;
    color: var(--fellow-pink);
    display: inline-flex;
    font-weight: 900;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.ml-neuron-column.hidden-layer span {
    background: #eafff4;
    border-color: rgba(40, 189, 119, 0.24);
    color: #28bd77;
}

.ml-neuron-column.output-layer span {
    background: #fff7e8;
    border-color: rgba(255, 139, 31, 0.22);
    color: #ff8b1f;
}

.ml-network-demo > i {
    color: var(--fellow-pink);
    justify-self: center;
}

.ml-choice-guide {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-ml-learning-card,
.ai-ml-checkpoint,
.ai-ml-mistakes,
.ai-ml-summary {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(170, 52, 104, 0.05);
    display: grid;
    gap: 16px;
    padding: 22px;
}

.ai-ml-learning-card {
    background: linear-gradient(135deg, #fff7fb, #fff);
    border-color: #ffd2e5;
}

.ai-ml-objectives {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-ml-objectives li {
    align-items: flex-start;
    color: #4d5469;
    display: flex;
    font-size: 0.92rem;
    font-weight: 700;
    gap: 10px;
    line-height: 1.6;
}

.ai-ml-objectives i {
    color: #28bd77;
    margin-top: 4px;
}

.ai-ml-formula-list {
    display: grid;
    gap: 14px;
}

.ai-ml-formula-list article {
    background: #fff;
    border: 1px solid var(--fellow-line);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(170, 52, 104, 0.04);
    display: grid;
    gap: 10px;
    padding: 18px;
}

.ai-ml-formula-list code {
    background: #fff0f7;
    border: 1px solid #ffd2e5;
    border-radius: 14px;
    color: #9d3668;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.5;
    padding: 8px 12px;
    width: fit-content;
}

.ai-ml-formula-list p,
.ai-ml-checkpoint p,
.ai-ml-mistakes li,
.ai-ml-summary p {
    color: #4d5469;
    font-weight: 650;
    line-height: 1.75;
    margin: 0;
}

.ai-ml-checkpoint {
    background: #f8fffb;
    border-color: rgba(40, 189, 119, 0.22);
}

.ai-ml-checkpoint span,
.ai-ml-summary span {
    color: var(--fellow-pink);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ai-ml-checkpoint h3,
.ai-ml-summary h3 {
    color: #171827;
    letter-spacing: 0;
    margin: 0 0 6px;
}

.ai-ml-mistakes {
    background: #fffaf4;
    border-color: rgba(255, 139, 31, 0.22);
}

.ai-ml-mistakes .ml-check-list {
    margin-top: 0;
}

.ai-ml-mistakes .ml-check-list i {
    color: #ff8b1f;
}

.ai-ml-summary {
    align-items: center;
    background: linear-gradient(135deg, #fff7fb, #fff);
    border-color: #ffd2e5;
    grid-template-columns: minmax(0, 1fr) max-content;
}

.ai-ml-network {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: max-content 28px max-content 28px max-content;
    justify-content: center;
}

.ai-ml-network > i {
    color: var(--fellow-pink);
}

@media (max-width: 1240px) {
    .course-scaffold-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ml-course-page .lesson-right-panel {
        position: static;
    }

    .ml-hero-visual {
        grid-template-columns: 1fr;
    }

    .ml-hero-arrow {
        transform: rotate(90deg);
    }

    .ml-algorithm-strip,
    .ml-card-grid.three,
    .ml-case-grid,
    .ml-data-split,
    .ml-fit-grid,
    .ml-algorithm-map,
    .ml-discussion-prompts,
    .ai-ml-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .course-scaffold-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .course-scaffold-visual {
        display: none;
    }

    .course-scaffold-grid {
        grid-template-columns: 1fr;
    }

    .ml-course-page .lesson-layout,
    .ml-split-grid,
    .ml-card-grid.two,
    .ml-metric-layout,
    .ml-boundary-demo,
    .ml-network-demo,
    .ml-choice-guide,
    .ai-ml-summary {
        grid-template-columns: 1fr;
    }

    .ml-course-page .lesson-hero,
    .ml-course-page .lesson-hero.compact {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .ml-course-page .lesson-hero-copy {
        padding-bottom: 0;
    }

    .ml-flow {
        grid-template-columns: 1fr;
    }

    .ml-flow > i {
        transform: rotate(90deg);
    }

    .ml-equation-grid,
    .ml-algorithm-strip,
    .ml-card-grid.three,
    .ml-case-grid,
    .ml-data-split,
    .ml-fit-grid,
    .ml-algorithm-map,
    .ml-discussion-prompts,
    .ai-ml-network {
        grid-template-columns: 1fr;
    }

    .ml-chapter-pagination {
        grid-template-columns: 1fr;
    }

    .ml-chapter-pagination span {
        display: none;
    }

    .ml-inline-next,
    .ml-nav-btn {
        justify-self: stretch;
        width: 100%;
    }

    .ai-ml-network > i {
        transform: rotate(90deg);
    }

    .ml-capacity-meter {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .course-scaffold-note,
    .course-scaffold-section li {
        flex-direction: column;
    }

    .ml-course-page .lesson-article {
        padding: 22px 18px 28px;
    }

    .ml-chapter-header,
    .ml-concept-card,
    .ml-info-card,
    .ml-case-grid article,
    .ml-equation-grid article,
    .ml-algorithm-strip article,
    .ml-data-split article,
    .ml-fit-grid article,
    .ml-algorithm-map article,
    .ml-choice-guide article,
    .ai-ml-learning-card,
    .ai-ml-checkpoint,
    .ai-ml-mistakes,
    .ai-ml-summary,
    .ai-ml-formula-list article {
        padding: 16px;
    }

    .ml-card-top {
        grid-template-columns: 1fr;
    }

    .ml-folds {
        grid-template-columns: 1fr;
    }

    .ml-matrix-card {
        grid-template-columns: 1fr;
    }
}

/* Reasoning final mobile safeguards live at the end of the cascade so later
   component declarations cannot re-introduce narrow grids or clipped content. */
@media (max-width: 560px) {
    .reasoning-scaffold-page .reasoning-hook-options,
    .reasoning-scaffold-page .reasoning-compare-grid,
    .reasoning-scaffold-page .reasoning-compare-table,
    .reasoning-scaffold-page .reasoning-example-steps,
    .reasoning-scaffold-page .reasoning-mp-grid,
    .reasoning-scaffold-page .reasoning-concept-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .reasoning-scaffold-page .reasoning-hook-card,
    .reasoning-scaffold-page .reasoning-hook-option,
    .reasoning-scaffold-page .reasoning-compare-col,
    .reasoning-scaffold-page .reasoning-concept-stage > *,
    .reasoning-scaffold-page .reasoning-challenge-example {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .reasoning-scaffold-page .reasoning-hook-card p,
    .reasoning-scaffold-page .reasoning-hook-option p,
    .reasoning-scaffold-page .reasoning-challenge-example p {
        overflow-wrap: break-word;
        word-break: normal;
    }

    .reasoning-scaffold-page .lesson-tabs {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .reasoning-scaffold-page .lesson-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.reasoning-scaffold-page [hidden] {
    display: none;
}

/* The legacy source renderer reuses `reasoning-hook-card` for the section
   wrapper. Keep that wrapper vertical; only the option cards are flex items. */
.reasoning-scaffold-page .reasoning-hook-card[data-section="hook"] {
    display: block;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.reasoning-scaffold-page .reasoning-example-section .reasoning-scaffold-callout {
    align-items: start;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
}

.reasoning-scaffold-page .reasoning-example-section .reasoning-scaffold-callout > p {
    grid-column: 2;
    min-width: 0;
}

.reasoning-scaffold-page .reasoning-example-section .reasoning-scaffold-callout > ul {
    grid-column: 1 / -1;
    min-width: 0;
    width: auto;
}

/* Progressive disclosure stage groups */
/* Phase badges — Fase 1/2/3 */



/* Python syntax highlight for code blocks */
.is-source-view pre code.language-python,
.reasoning-code-block pre code.language-python {
    color: #171827;
}
.is-source-view pre code.language-python .kw,
.reasoning-code-block pre code.language-python .kw { color: #d81b60; font-weight: 600; }
.is-source-view pre code.language-python .dt,
.reasoning-code-block pre code.language-python .dt { color: #1e88e5; }
.is-source-view pre code.language-python .st,
.reasoning-code-block pre code.language-python .st { color: #2e7d32; }
.is-source-view pre code.language-python .co,
.reasoning-code-block pre code.language-python .co { color: #6f7282; font-style: italic; }
.is-source-view pre code.language-python .fu,
.reasoning-code-block pre code.language-python .fu { color: #8e24aa; }
.is-source-view pre code.language-python .op,
.reasoning-code-block pre code.language-python .op { color: #171827; }

/* Pyodide playground styling */
.py-playground {
    background: #fffcfd;
    border: 1px solid rgba(244,143,188,.22);
    border-radius: 16px;
    margin: 16px 0;
    overflow: hidden;
}
.py-playground-head {
    align-items: center;
    background: rgba(246,51,146,.06);
    border-bottom: 1px solid rgba(244,143,188,.15);
    display: flex;
    gap: 10px;
    padding: 10px 16px;
}
.py-playground-head i { color: #f63392; }
.py-playground-head span { color: #171827; font-size: .85rem; font-weight: 600; }
.py-editor {
    background: #1e1e2e;
    border: 0;
    color: #cdd6f4;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: .82rem;
    line-height: 1.6;
    min-height: 100px;
    outline: none;
    padding: 14px 16px;
    resize: vertical;
    tab-size: 4;
    width: 100%;
}
.py-run {
    align-items: center;
    background: #f63392;
    border: 0;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 700;
    gap: 6px;
    margin: 10px 14px;
    padding: 7px 16px;
    transition: background .15s ease;
}
.py-run:hover { background: #d4287e; }
.py-run:disabled { background: #ccc; cursor: not-allowed; }
.py-output {
    background: #1e1e2e;
    border-top: 1px solid rgba(244,143,188,.15);
    color: #cdd6f4;
    display: none;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: .82rem;
    line-height: 1.5;
    padding: 14px 16px;
    white-space: pre-wrap;
}
.py-output.visible { display: block; }
.py-output.error { color: #f38ba8; }

#pyodideStatus {
    align-items: center;
    background: rgba(246,51,146,.06);
    border-radius: 12px;
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
}
#pyodideStatus i { color: #f63392; }
#pyodideStatus span { color: #51596d; font-size: .82rem; }
#pyodideStatus.ready i { color: #2e7d32; }

/* Konsep AI Modern — source-as-main learning studio */
.ai-modern-page {
    --modern-ink: #171827;
    --modern-copy: #51596d;
    --modern-muted: #6f7282;
    --modern-pink: #f63392;
    --modern-pink-soft: #fff0f7;
    --modern-surface: #fffcfd;
    --modern-line: rgba(244, 143, 188, .26);
}

.ai-modern-page [hidden] {
    display: none !important;
}

.ai-modern-page .lesson-article,
.ai-modern-page #modern-chapter-container,
.ai-modern-page .ai-modern-chapter,
.ai-modern-page .reasoning-end-of-chapter {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.ai-modern-page #modern-chapter-container,
.ai-modern-chapter,
.ai-modern-page .reasoning-end-of-chapter {
    display: grid;
    gap: 22px;
}

.ai-modern-chapter-hero,
.ai-modern-section,
.ai-modern-active,
.ai-modern-quiz-card,
.ai-modern-discussion-prompt,
.ai-modern-reply-composer,
.ai-modern-rubric {
    background: #fff;
    border: 1px solid var(--modern-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(170, 52, 104, .055);
    box-sizing: border-box;
    min-width: 0;
}

.ai-modern-chapter-hero {
    background:
        radial-gradient(circle at 92% 12%, rgba(246, 51, 146, .13), transparent 28%),
        linear-gradient(145deg, #fff7fb 0%, #fff 68%);
    border-color: rgba(246, 51, 146, .24);
    overflow: hidden;
    padding: 30px;
    position: relative;
}

.ai-modern-chapter-hero::after {
    border: 18px solid rgba(246, 51, 146, .055);
    border-radius: 50%;
    content: "";
    height: 112px;
    position: absolute;
    right: -44px;
    top: -50px;
    width: 112px;
}

.ai-modern-chapter-hero > span,
.ai-modern-section > h3,
.ai-modern-active > div > span,
.ai-modern-practice-item .reasoning-practice-copy > span,
.ai-modern-review-number {
    color: var(--modern-pink);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.ai-modern-chapter-hero h2 {
    color: var(--modern-ink);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing: -.035em;
    line-height: 1.12;
    margin: 10px 0 12px;
    max-width: 760px;
}

.ai-modern-chapter-hero > p,
.ai-modern-section p,
.ai-modern-active p,
.ai-modern-practice-item p,
.ai-modern-discussion-prompt p,
.ai-modern-discussion-prompt small,
.ai-modern-reply-composer p {
    color: var(--modern-copy);
    line-height: 1.75;
    margin: 0;
    overflow-wrap: break-word;
}

.ai-modern-objectives {
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(244, 143, 188, .22);
    border-radius: 16px;
    margin-top: 22px;
    padding: 18px;
}

.ai-modern-objectives > strong {
    align-items: center;
    color: var(--modern-ink);
    display: flex;
    gap: 8px;
}

.ai-modern-objectives > strong::before {
    color: var(--modern-pink);
    content: "\f140";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.ai-modern-objectives ul,
.ai-modern-checklist,
.ai-modern-rubric ul {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.ai-modern-objectives li,
.ai-modern-checklist li,
.ai-modern-rubric li {
    align-items: flex-start;
    background: rgba(246, 51, 146, .045);
    border: 1px solid rgba(244, 143, 188, .16);
    border-radius: 12px;
    color: var(--modern-copy);
    display: flex;
    gap: 10px;
    line-height: 1.55;
    padding: 10px 12px;
}

.ai-modern-objectives li::before {
    color: var(--modern-pink);
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-size: .78rem;
    font-weight: 900;
    margin-top: 4px;
}

.ai-modern-section {
    display: grid;
    gap: 16px;
    padding: 24px;
    scroll-margin-top: 24px;
}

.ai-modern-section h3 {
    border-left: 4px solid var(--modern-pink);
    color: var(--modern-ink);
    font-size: 1.28rem;
    letter-spacing: -.015em;
    margin: 0;
    padding-left: 13px;
}

.ai-modern-section h4,
.ai-modern-card-grid h4 {
    color: var(--modern-ink);
    margin: 0 0 6px;
}

.ai-modern-question,
.ai-modern-callout,
.ai-modern-warning,
.ai-modern-summary {
    align-items: flex-start;
    background: var(--modern-pink-soft);
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 16px;
}

.ai-modern-question > i,
.ai-modern-callout > i,
.ai-modern-warning > i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ai-modern-summary {
    color: var(--modern-copy);
    display: block;
    line-height: 1.7;
}

.ai-modern-flow,
.ai-modern-pipeline,
.ai-modern-architecture {
    align-items: stretch;
    display: flex;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
}

.ai-modern-flow > span,
.ai-modern-pipeline > span,
.ai-modern-architecture > span {
    align-items: center;
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid rgba(246, 51, 146, .22);
    border-radius: 14px;
    color: var(--modern-ink);
    display: flex;
    flex: 1 0 145px;
    font-weight: 800;
    justify-content: center;
    line-height: 1.35;
    min-height: 64px;
    padding: 12px;
    text-align: center;
}

.ai-modern-flow > i {
    align-self: center;
    color: var(--modern-pink);
    flex: 0 0 auto;
}

.ai-modern-pipeline > span,
.ai-modern-architecture > span {
    flex-basis: 125px;
    position: relative;
}

.ai-modern-pipeline > span:not(:last-child)::after,
.ai-modern-architecture > span:not(:last-child)::after {
    color: var(--modern-pink);
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-size: .72rem;
    font-weight: 900;
    position: absolute;
    right: -9px;
    top: calc(50% - 6px);
    z-index: 2;
}

.ai-modern-flow-vertical {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
}

.ai-modern-card-grid,
.ai-modern-comparison {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-modern-card-grid article,
.ai-modern-comparison article {
    background: var(--modern-surface);
    border: 1px solid rgba(244, 143, 188, .22);
    border-radius: 15px;
    min-width: 0;
    padding: 16px;
}

.ai-modern-comparison article {
    display: grid;
    gap: 7px;
}

.ai-modern-comparison strong {
    color: var(--modern-ink);
}

.ai-modern-comparison span {
    color: var(--modern-copy);
    line-height: 1.6;
}

.ai-modern-table-wrap,
.ai-modern-page .reasoning-scaffold-table-wrap {
    border: 1px solid var(--modern-line);
    border-radius: 16px;
    max-width: 100%;
    overflow-x: auto;
}

.ai-modern-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 680px;
    width: 100%;
}

.ai-modern-table th,
.ai-modern-table td {
    border-bottom: 1px solid rgba(244, 143, 188, .16);
    color: var(--modern-copy);
    line-height: 1.55;
    padding: 13px 14px;
    text-align: left;
    vertical-align: top;
}

.ai-modern-table th {
    background: var(--modern-pink-soft);
    color: var(--modern-ink);
    font-size: .8rem;
    font-weight: 900;
}

.ai-modern-quote {
    background: #fff7fb;
    border: 1px solid rgba(246, 51, 146, .2);
    border-left: 4px solid var(--modern-pink);
    border-radius: 14px;
    color: var(--modern-ink);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.7;
    margin: 0;
    padding: 18px;
}

.ai-modern-quote cite {
    color: var(--modern-muted);
    display: block;
    font-size: .8rem;
    font-style: normal;
    margin-top: 8px;
}

.ai-modern-code,
.ai-modern-page .reasoning-code-block pre {
    background: #fff7fb;
    border-radius: 14px;
    color: var(--modern-ink);
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 18px;
}

.ai-modern-page .reasoning-code-block {
    background: #fffcfd;
    border: 1px solid rgba(246, 51, 146, .22);
    border-radius: 16px;
    overflow: hidden;
}

.ai-modern-page .reasoning-code-block > div {
    align-items: center;
    background: var(--modern-pink-soft);
    border-bottom: 1px solid rgba(244, 143, 188, .2);
    color: var(--modern-ink);
    display: flex;
    gap: 8px;
    padding: 10px 14px;
}

.ai-modern-page .reasoning-code-block > div > i {
    color: var(--modern-pink);
}

.ai-modern-page [data-copy-code] {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .25);
    border-radius: 100px;
    color: var(--modern-ink);
    cursor: pointer;
    font-weight: 800;
    margin-left: auto;
    padding: 7px 12px;
}

.ai-modern-active {
    background: linear-gradient(145deg, #fff0f7, #fff);
    border-color: rgba(246, 51, 146, .26);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: 22px;
    scroll-margin-top: 24px;
}

.ai-modern-active .ai-modern-feedback {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .22);
    border-radius: 14px;
    grid-column: 1 / -1;
    padding: 14px;
}

.ai-modern-active button,
.ai-modern-cta,
.ai-modern-pagination .btn,
.ai-modern-discussion-prompt button,
.ai-modern-reply-composer button,
.ai-modern-page .lesson-list-card li > button {
    align-items: center;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    font-weight: 850;
    gap: 8px;
    justify-content: center;
}

.ai-modern-active button,
.ai-modern-cta,
.ai-modern-pagination .btn,
.ai-modern-discussion-prompt button,
.ai-modern-reply-composer [data-reply-save] {
    background: var(--modern-pink);
    border: 1px solid var(--modern-pink);
    color: #fff;
    padding: 10px 17px;
}

.ai-modern-glossary {
    display: grid;
    gap: 8px 12px;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
}

.ai-modern-glossary dt {
    color: var(--modern-pink);
    font-weight: 900;
}

.ai-modern-glossary dd,
.ai-modern-references {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
}

.ai-modern-cta {
    justify-self: start;
    text-decoration: none;
}

.ai-modern-learning-nav {
    position: sticky;
    top: 10px;
    z-index: 5;
}

.ai-modern-learning-nav > span i {
    color: var(--modern-pink);
    margin-right: 6px;
}

.ai-modern-pagination {
    align-items: center;
    border-top: 1px solid var(--modern-line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 34px;
    padding-top: 22px;
}

.ai-modern-pagination .btn {
    border: 1px solid var(--modern-pink);
    padding: 11px 20px;
    text-decoration: none;
}

.ai-modern-pagination .btn-outline {
    background: #fff;
    color: var(--modern-pink);
}

.ai-modern-pagination .btn-primary {
    background: var(--modern-pink);
    box-shadow: 0 8px 20px rgba(246, 51, 146, .22);
    color: #fff;
    margin-left: auto;
}

.ai-modern-loading,
.ai-modern-error,
.ai-modern-quiz-lock {
    align-items: center;
    background: #fff7fb;
    border: 1px solid var(--modern-line);
    border-radius: 18px;
    color: var(--modern-copy);
    display: flex;
    gap: 14px;
    justify-content: center;
    min-height: 150px;
    padding: 24px;
    text-align: left;
}

.ai-modern-loading i,
.ai-modern-error i,
.ai-modern-quiz-lock > i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.ai-modern-page .lesson-list-card li > button {
    background: transparent;
    border: 0;
    color: var(--modern-copy);
    font: inherit;
    justify-content: flex-start;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.ai-modern-page .lesson-list-card li.active > button {
    color: var(--modern-ink);
    font-weight: 900;
}

.ai-modern-practice-progress {
    align-items: center;
    background: #fff0f7;
    border: 1px solid rgba(246, 51, 146, .22);
    border-radius: 100px;
    color: var(--modern-ink);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    margin-bottom: 16px;
    padding: 8px 14px;
}

.ai-modern-practice-item {
    grid-template-columns: 54px minmax(0, 1fr);
}

.ai-modern-practice-item .reasoning-practice-number {
    align-items: center;
    background: var(--modern-pink);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.ai-modern-rubric {
    background: #fff7fb;
    box-shadow: none;
    margin: 16px 0;
    padding: 16px;
}

.ai-modern-rubric > strong {
    color: var(--modern-ink);
}

.ai-modern-rubric > strong i,
.ai-modern-rubric li i {
    color: var(--modern-pink);
}

.ai-modern-quiz-top {
    align-items: center;
    background: #fff7fb;
    border: 1px solid var(--modern-line);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 14px;
}

.ai-modern-quiz-top span,
.ai-modern-quiz-top strong {
    color: var(--modern-copy);
    font-size: .85rem;
}

.ai-modern-quiz-card {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.ai-modern-quiz-card h3 {
    color: var(--modern-ink);
    line-height: 1.45;
    margin: 0;
}

.ai-modern-quiz-options {
    display: grid;
    gap: 10px;
}

.ai-modern-quiz-options button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--modern-line);
    border-radius: 15px;
    color: var(--modern-copy);
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px 14px;
    text-align: left;
    width: 100%;
}

.ai-modern-quiz-options button > span {
    align-items: center;
    background: #fff0f7;
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.ai-modern-quiz-options button p {
    color: inherit;
    line-height: 1.55;
    margin: 0;
}

.ai-modern-quiz-options button.is-selected {
    background: #fff0f7;
    border-color: var(--modern-pink);
    color: var(--modern-ink);
}

.ai-modern-quiz-options button.is-correct {
    background: #f0fff7;
    border-color: #1f9d68;
    color: #166746;
}

.ai-modern-quiz-options button.is-correct > span {
    background: #dff8ec;
    color: #16724d;
}

.ai-modern-quiz-options button.is-wrong {
    background: #fff4f5;
    border-color: #d74759;
    color: #9b2635;
}

.ai-modern-quiz-options button.is-wrong > span {
    background: #ffe2e6;
    color: #a72c3c;
}

.ai-modern-quiz-nav,
.ai-modern-quiz-map {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-top: 16px;
}

.ai-modern-quiz-nav button,
.ai-modern-quiz-map button {
    background: #fff;
    border: 1px solid var(--modern-line);
    border-radius: 100px;
    color: var(--modern-copy);
    cursor: pointer;
    font-weight: 850;
    padding: 9px 14px;
}

.ai-modern-quiz-map {
    justify-content: center;
}

.ai-modern-quiz-map button {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    padding: 0;
    width: 38px;
}

.ai-modern-quiz-map button.active,
.ai-modern-quiz-map button.answered {
    background: #fff0f7;
    border-color: var(--modern-pink);
    color: var(--modern-pink);
}

.ai-modern-quiz-map button.active {
    background: var(--modern-pink);
    color: #fff;
}

.ai-modern-quiz-review {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.quiz-explanation {
    background: #fff7fb;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 14px;
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
    padding: 13px;
}

.quiz-explanation i {
    color: var(--modern-pink);
    margin-right: 7px;
}

.ai-modern-discussion-prompts {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 20px;
}

.ai-modern-discussion-prompt {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.ai-modern-discussion-prompt > span {
    align-items: center;
    background: var(--modern-pink);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.ai-modern-discussion-prompt h3 {
    color: var(--modern-ink);
    margin: 0;
}

.ai-modern-discussion-prompt > div {
    background: #fff7fb;
    border: 1px solid rgba(246, 51, 146, .16);
    border-radius: 12px;
    color: var(--modern-copy);
    line-height: 1.55;
    padding: 10px;
}

.ai-modern-discussion-prompt button {
    justify-self: start;
}

.ai-modern-reply-composer {
    background: #fff7fb;
    box-shadow: none;
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
}

.ai-modern-reply-composer label,
.ai-modern-reply-composer label > span {
    display: grid;
    gap: 7px;
}

.ai-modern-reply-composer label > span {
    color: var(--modern-ink);
    font-size: .82rem;
    font-weight: 900;
}

.ai-modern-reply-composer textarea {
    background: #fff;
    border: 1px solid var(--modern-line);
    border-radius: 14px;
    color: var(--modern-ink);
    font: inherit;
    line-height: 1.6;
    padding: 12px;
    resize: vertical;
    width: 100%;
}

.ai-modern-reply-composer > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-modern-reply-composer [data-reply-cancel] {
    background: #fff;
    border: 1px solid var(--modern-line);
    color: var(--modern-copy);
    padding: 10px 17px;
}

.ai-modern-page .practice-status[data-tone="success"],
.ai-modern-page .reasoning-check-feedback[data-tone="success"] {
    color: #176b4b;
}

.ai-modern-page .practice-status[data-tone="warning"],
.ai-modern-page .reasoning-check-feedback[data-tone="warning"] {
    color: #9b2635;
}

@media (max-width: 1080px) {
    .ai-modern-page .lesson-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-page .lesson-right-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .ai-modern-chapter-hero,
    .ai-modern-section,
    .ai-modern-active,
    .ai-modern-quiz-card {
        padding: 18px;
    }

    .ai-modern-card-grid,
    .ai-modern-comparison,
    .ai-modern-discussion-prompts,
    .ai-modern-flow-vertical,
    .ai-modern-active {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-active button {
        justify-self: start;
    }

    .ai-modern-learning-nav {
        position: static;
    }

    .ai-modern-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-modern-pagination .btn,
    .ai-modern-pagination .btn-primary {
        margin-left: 0;
        width: 100%;
    }

    .ai-modern-practice-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-quiz-nav button {
        flex: 1 1 140px;
    }
}

@media (max-width: 480px) {
    .ai-modern-question,
    .ai-modern-callout,
    .ai-modern-warning {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-glossary {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-quiz-options button {
        align-items: start;
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 11px;
    }

    .ai-modern-quiz-options button > span {
        height: 30px;
        width: 30px;
    }
}

/* AI Modern final cascade guards — keep injected Reasoning components aligned
   with their canonical class contract inside the source renderer. */
.ai-modern-page .ai-modern-objectives li::before {
    color: var(--modern-pink);
    content: "\f00c";
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-size: .78rem;
    font-weight: 900;
    left: auto;
    margin-top: 4px;
    position: static;
    top: auto;
}

.ai-modern-page .reasoning-concept-lab {
    background: linear-gradient(145deg, #fff7fb 0%, #ffffff 72%);
    border-color: rgba(246, 51, 146, .28);
    gap: 20px;
    margin: 0;
    padding: 24px;
}

.ai-modern-page .reasoning-concept-head {
    align-items: flex-start;
    display: grid;
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr);
}

.ai-modern-page .reasoning-concept-head > i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.ai-modern-page .reasoning-concept-head > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ai-modern-page .reasoning-concept-head span {
    color: var(--modern-pink);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.ai-modern-page .reasoning-concept-head h3 {
    color: var(--modern-ink);
    font-size: 1.22rem;
    line-height: 1.35;
    margin: 0;
}

.ai-modern-page .reasoning-concept-head p {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
}

.ai-modern-page .reasoning-concept-tabs {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    overflow: visible;
}

.ai-modern-page .reasoning-concept-tabs button {
    box-sizing: border-box;
    flex: none;
    min-width: 0;
    width: 100%;
}

.ai-modern-page .reasoning-concept-stage {
    align-items: stretch;
    gap: 16px;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
    min-height: 0;
    padding: 18px;
}

.ai-modern-page .reasoning-concept-stage > * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.ai-modern-page .ai-modern-concept-copy {
    align-content: start;
    display: grid;
    gap: 8px;
    padding: 4px;
}

.ai-modern-page .ai-modern-concept-copy > span {
    color: var(--modern-pink);
    font-size: .76rem;
    font-weight: 900;
}

.ai-modern-page .ai-modern-concept-copy h4 {
    color: var(--modern-ink);
    font-size: 1.15rem;
    line-height: 1.4;
    margin: 0;
}

.ai-modern-page .ai-modern-concept-copy p,
.ai-modern-page .ai-modern-concept-example p {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
}

.ai-modern-page .ai-modern-concept-example {
    align-content: start;
    background: #fff7fb;
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 14px;
    display: grid;
    gap: 9px;
    padding: 16px;
}

.ai-modern-page .ai-modern-concept-example strong {
    align-items: center;
    color: var(--modern-ink);
    display: flex;
    gap: 8px;
}

.ai-modern-page .ai-modern-concept-example strong i {
    color: var(--modern-pink);
}

.ai-modern-page .reasoning-challenge-workspace {
    background: linear-gradient(145deg, #fff7fb 0%, #ffffff 78%);
    display: block;
    margin: 0;
    padding: 24px;
}

.ai-modern-page .reasoning-challenge-head {
    align-items: flex-start;
    display: grid;
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr);
    margin-bottom: 14px;
}

.ai-modern-page .reasoning-challenge-head > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ai-modern-page .reasoning-challenge-head h3 {
    line-height: 1.4;
    margin: 0;
}

.ai-modern-page .reasoning-challenge-label {
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
    max-width: 100%;
    width: 100%;
}

.ai-modern-page .reasoning-challenge-label > span {
    display: block;
    line-height: 1.3;
}

.ai-modern-page .reasoning-challenge-textarea {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    min-height: 132px;
    min-width: 0;
    width: 100%;
}

.ai-modern-page .reasoning-challenge-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 14px;
    max-width: 100%;
}

.ai-modern-page .reasoning-challenge-actions button {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
}

.ai-modern-page .reasoning-challenge-actions .btn-reasoning-save {
    background: var(--modern-pink);
    border-color: var(--modern-pink);
    color: #fff;
}

.ai-modern-page .reasoning-mistakes-practices {
    margin: 0;
}

.ai-modern-page .reasoning-mp-grid {
    align-items: stretch;
    gap: 16px;
}

.ai-modern-page .reasoning-mp-col {
    border-radius: 18px;
    box-sizing: border-box;
    min-width: 0;
    padding: 20px;
}

.ai-modern-page .reasoning-mp-col h3 {
    align-items: center;
    display: flex;
    gap: 9px;
    line-height: 1.35;
    margin: 0 0 14px;
}

.ai-modern-page .reasoning-mp-col ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-modern-page .reasoning-mp-col li,
.ai-modern-page .reasoning-mp-col.reasoning-mp-mistakes li,
.ai-modern-page .reasoning-mp-col.reasoning-mp-practices li {
    border: 1px solid rgba(244, 143, 188, .18);
    border-radius: 12px;
    color: var(--modern-copy);
    line-height: 1.55;
    margin: 0;
    padding: 11px 13px;
}

.ai-modern-page .reasoning-mp-col li::before {
    display: none !important;
}

.ai-modern-page .reasoning-summary-section {
    margin: 0;
    padding: 22px;
}

.ai-modern-page .reasoning-outcomes-list {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-modern-page .reasoning-outcomes-list li {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .18);
    border-radius: 12px;
    color: var(--modern-copy);
    display: grid;
    gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr);
    line-height: 1.55;
    margin: 0;
    padding: 11px 13px;
}

.ai-modern-page .reasoning-outcomes-list li::before {
    display: none !important;
}

.ai-modern-page .reasoning-outcomes-list li > i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--modern-pink);
    display: inline-flex;
    font-size: .68rem;
    height: 20px;
    justify-content: center;
    margin: 1px 0 0;
    width: 20px;
}

.ai-modern-page .reasoning-outcomes-list li > span {
    color: var(--modern-copy);
    font-size: .9rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.ai-modern-page .reasoning-transition {
    align-items: center;
    border-radius: 14px;
}

@media (max-width: 760px) {
    .ai-modern-page .reasoning-concept-stage,
    .ai-modern-page .reasoning-mp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-page .reasoning-concept-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ai-modern-page .reasoning-concept-tabs button {
        gap: 5px;
        min-height: 42px;
        padding: 8px;
    }
}

@media (max-width: 560px) {
    .ai-modern-page .reasoning-concept-lab,
    .ai-modern-page .reasoning-challenge-workspace,
    .ai-modern-page .reasoning-summary-section,
    .ai-modern-page .reasoning-mp-col {
        padding: 17px;
    }

    .ai-modern-page .reasoning-concept-head,
    .ai-modern-page .reasoning-challenge-head {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .ai-modern-page .reasoning-concept-head > i,
    .ai-modern-page .reasoning-challenge-head > i {
        height: 38px;
        width: 38px;
    }

    .ai-modern-page .reasoning-concept-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-page .reasoning-challenge-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-modern-page .reasoning-challenge-actions button {
        justify-content: center;
        min-width: 0;
        padding: 10px 12px;
        width: 100%;
    }

    .ai-modern-page .reasoning-challenge-actions [data-challenge-example] {
        grid-column: 1 / -1;
    }
}

/* AI Modern activity controls — explicit final cascade contract */
.ai-modern-practice-page #aiModernPracticeApp {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ai-modern-practice-page .ai-modern-practice-progress {
    justify-self: start;
    margin: 0 0 14px;
    width: fit-content;
}

.ai-modern-practice-page .reasoning-task-navigator {
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid rgba(246, 51, 146, .22);
    border-radius: 18px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
}

.ai-modern-practice-page .reasoning-nav-group {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(126px, .85fr) minmax(0, 1fr);
    margin: 0;
    min-width: 0;
    padding: 12px;
}

.ai-modern-practice-page .reasoning-nav-group::after {
    display: none;
}

.ai-modern-practice-page .reasoning-nav-group-label {
    color: var(--modern-ink);
    font-size: .78rem;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0;
    min-width: 0;
    padding: 0;
    text-transform: none;
    white-space: normal;
}

.ai-modern-practice-page .reasoning-nav-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    min-width: 0;
}

.ai-modern-practice-page .reasoning-task-navigator button {
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    padding: 0;
    width: 36px;
}

.ai-modern-practice-page .reasoning-task-navigator button.is-active {
    background: var(--modern-pink);
    border-color: var(--modern-pink);
    box-shadow: 0 7px 16px rgba(246, 51, 146, .2);
    color: #fff;
}

.ai-modern-practice-page .reasoning-task-navigator button.is-complete:not(.is-active) {
    background: #fff0f7;
    border-color: rgba(246, 51, 146, .34);
    color: var(--modern-pink);
}

.ai-modern-practice-page .reasoning-practice-counter {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .2);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: space-between;
    padding: 11px 14px;
}

.ai-modern-practice-page .reasoning-practice-counter span {
    color: var(--modern-pink);
    font-size: .8rem;
    font-weight: 900;
}

.ai-modern-practice-page .reasoning-practice-counter strong {
    color: var(--modern-copy);
    font-size: .82rem;
    line-height: 1.4;
}

.ai-modern-practice-page .reasoning-practice-field {
    background: #fff7fb;
    border: 1px solid rgba(246, 51, 146, .19);
    border-radius: 15px;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    width: 100%;
}

.ai-modern-practice-page .reasoning-practice-field > span {
    color: var(--modern-ink);
    font-size: .82rem;
    font-weight: 900;
}

.ai-modern-practice-page .reasoning-practice-field textarea {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .28);
    border-radius: 14px;
    box-sizing: border-box;
    color: var(--modern-ink);
    font: inherit;
    line-height: 1.65;
    min-height: 150px;
    padding: 13px;
    resize: vertical;
    width: 100%;
}

.ai-modern-practice-page .reasoning-practice-field textarea:focus {
    border-color: var(--modern-pink);
    outline: 3px solid rgba(246, 51, 146, .13);
}

.ai-modern-practice-page .reasoning-practice-actions {
    display: flex;
    margin-top: 12px;
}

.ai-modern-practice-page .reasoning-practice-actions button,
.ai-modern-practice-page .reasoning-practice-pagination button {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .3);
    border-radius: 100px;
    color: #c21868;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .84rem;
    font-weight: 850;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
}

.ai-modern-practice-page .reasoning-practice-actions button:hover,
.ai-modern-practice-page .reasoning-practice-pagination button:hover:not(:disabled) {
    background: #fff0f7;
    border-color: rgba(246, 51, 146, .48);
}

.ai-modern-practice-page .reasoning-practice-guide {
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 14px;
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 14px;
}

.ai-modern-practice-page .reasoning-practice-guide strong {
    color: var(--modern-ink);
}

.ai-modern-practice-page .reasoning-practice-guide p {
    color: var(--modern-copy);
    line-height: 1.65;
    margin: 0;
}

.ai-modern-practice-page .reasoning-practice-pagination {
    align-items: center;
    background: #fffcfd;
    border: 1px solid rgba(244, 143, 188, .22);
    border-radius: 16px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.ai-modern-practice-page .reasoning-practice-pagination button:last-child {
    background: var(--modern-pink);
    border-color: var(--modern-pink);
    color: #fff;
}

.ai-modern-practice-page .reasoning-practice-pagination button:disabled {
    background: #f6f2f4;
    border-color: #e4dce0;
    color: #6f7282;
    cursor: not-allowed;
    opacity: .72;
}

.ai-modern-quiz-page .ai-modern-quiz-overview {
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid rgba(246, 51, 146, .22);
    border-radius: 18px;
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
}

.ai-modern-quiz-page .ai-modern-quiz-overview .ai-modern-quiz-top {
    background: transparent;
    border: 0;
    border-radius: 14px;
    margin: 0;
    padding: 0 2px;
}

.ai-modern-quiz-page .ai-modern-quiz-overview .ai-modern-quiz-map {
    justify-content: flex-start;
    margin: 0;
}

.ai-modern-quiz-page .ai-modern-quiz-nav button:disabled {
    background: #f6f2f4;
    border-color: #e4dce0;
    color: #6f7282;
    cursor: not-allowed;
    opacity: .68;
}

.ai-modern-page .ai-modern-objectives li {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 11px 13px;
}

.ai-modern-page .ai-modern-objectives li::before {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    margin: 0;
    width: 22px;
}

.ai-modern-page .ai-modern-objective-copy {
    color: var(--modern-copy);
    display: block;
    line-height: 1.55;
    min-width: 0;
}

@media (max-width: 760px) {
    .ai-modern-practice-page .reasoning-task-navigator {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-practice-page .reasoning-nav-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-modern-practice-page .reasoning-nav-group > div {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .ai-modern-practice-page .reasoning-practice-counter,
    .ai-modern-practice-page .reasoning-practice-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-modern-practice-page .reasoning-practice-pagination button {
        width: 100%;
    }

    .ai-modern-quiz-page .ai-modern-quiz-overview {
        padding: 12px;
    }

    .ai-modern-quiz-page .ai-modern-quiz-map {
        gap: 7px;
    }

    .ai-modern-quiz-page .ai-modern-quiz-map button {
        height: 34px;
        width: 34px;
    }
}

/* ========================================================================== */
/* Evaluation AI and Evolution of AI scoped polish                            */
/* ========================================================================== */
.ai-evaluation-page,
.ai-evolution-page {
    --advanced-pink: #f63392;
    --advanced-pink-strong: #d91d78;
    --advanced-ink: #171827;
    --advanced-copy: #51596d;
    --advanced-muted: #6f7282;
    --advanced-line: rgba(244, 143, 188, .28);
    --advanced-soft: #fff7fb;
    --advanced-soft-strong: #fff0f7;
    --advanced-surface: #fffcfd;
}

.ai-evaluation-shell,
.ai-evolution-shell {
    background: linear-gradient(180deg, #fffcfd 0%, #fff7fb 48%, #fff 100%);
    min-width: 0;
}

.ai-evaluation-app,
.ai-evolution-app {
    box-sizing: border-box;
    display: grid;
    gap: 22px;
    margin: 0 auto;
    max-width: 1180px;
    padding: 24px clamp(16px, 3vw, 34px) 42px;
    width: 100%;
}

.ai-evaluation-page [hidden],
.ai-evolution-page [hidden] {
    display: none !important;
}

.ai-evaluation-hero,
.ai-evolution-hero {
    align-items: stretch;
    background: linear-gradient(135deg, #fff 0%, #fff7fb 58%, #fffcfd 100%);
    border: 1px solid var(--advanced-line);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(246, 51, 146, .09);
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, .7fr);
    overflow: hidden;
    padding: clamp(22px, 4vw, 36px);
    position: relative;
}

.ai-evaluation-hero::before,
.ai-evolution-hero::before {
    background: var(--advanced-pink);
    border-radius: 100px;
    content: "";
    height: 5px;
    left: clamp(22px, 4vw, 36px);
    position: absolute;
    top: 0;
    width: 92px;
}

.ai-evaluation-hero > div:first-child,
.ai-evolution-hero > div:first-child {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.ai-evaluation-hero span,
.ai-evolution-hero span,
.ai-evaluation-detail-head > span,
.ai-evolution-detail-head > span {
    color: var(--advanced-pink);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ai-evaluation-hero h1,
.ai-evolution-hero h1 {
    color: var(--advanced-ink);
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.02;
    margin: 0;
}

.ai-evaluation-hero p,
.ai-evolution-hero p,
.ai-evaluation-progress-card p,
.ai-evolution-progress-card p,
.ai-evaluation-detail-head p,
.ai-evolution-detail-head p,
.ai-evaluation-module-card p,
.ai-evolution-module-card p,
.ai-evaluation-section p,
.ai-evolution-section p,
.ai-evaluation-grid p,
.ai-evolution-grid p,
.ai-evaluation-callout,
.ai-evolution-callout,
.ai-evaluation-check p,
.ai-evolution-check p,
.ai-evaluation-glossary dd,
.ai-evolution-glossary dd,
.ai-evaluation-references li,
.ai-evolution-references li,
.ai-evaluation-practice p,
.ai-evolution-practice p,
.ai-evaluation-discussion p,
.ai-evolution-discussion p,
.ai-evaluation-explanation,
.ai-evolution-explanation {
    color: var(--advanced-copy);
    line-height: 1.7;
}

.ai-evaluation-meta,
.ai-evolution-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.ai-evaluation-meta b,
.ai-evolution-meta b {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 100px;
    color: var(--advanced-ink);
    display: inline-flex;
    font-size: .84rem;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
}

.ai-evaluation-meta i,
.ai-evolution-meta i {
    color: var(--advanced-pink);
}

.ai-evaluation-primary,
.ai-evolution-primary,
.ai-evaluation-module-card a,
.ai-evolution-module-card a,
.ai-evaluation-tabs a,
.ai-evolution-tabs a,
.ai-evaluation-pager a,
.ai-evolution-pager a,
.ai-evaluation-actions button,
.ai-evolution-actions button,
.ai-evaluation-complete,
.ai-evolution-complete {
    align-items: center;
    border-radius: 100px;
    display: inline-flex;
    font-weight: 850;
    gap: 8px;
    justify-content: center;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ai-evaluation-primary,
.ai-evolution-primary,
.ai-evaluation-actions button,
.ai-evolution-actions button,
.ai-evaluation-complete,
.ai-evolution-complete {
    background: var(--advanced-pink);
    border: 1px solid var(--advanced-pink);
    box-shadow: 0 12px 26px rgba(246, 51, 146, .18);
    color: #fff;
    min-height: 44px;
    padding: 12px 18px;
    width: fit-content;
}

.ai-evaluation-primary:hover,
.ai-evolution-primary:hover,
.ai-evaluation-actions button:hover,
.ai-evolution-actions button:hover,
.ai-evaluation-complete:hover,
.ai-evolution-complete:hover {
    background: var(--advanced-pink-strong);
    border-color: var(--advanced-pink-strong);
    transform: translateY(-1px);
}

.ai-evaluation-progress-card,
.ai-evolution-progress-card {
    align-self: stretch;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
}

.ai-evaluation-progress-card span,
.ai-evolution-progress-card span {
    color: var(--advanced-muted);
    text-transform: none;
}

.ai-evaluation-progress-card strong,
.ai-evolution-progress-card strong {
    color: var(--advanced-ink);
    font-size: 2.2rem;
    line-height: 1;
}

.ai-evaluation-outcomes,
.ai-evolution-outcomes,
.ai-evaluation-detail-head,
.ai-evolution-detail-head,
.ai-evaluation-activity,
.ai-evolution-activity {
    background: #fff;
    border: 1px solid var(--advanced-line);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(23, 24, 39, .04);
}

.ai-evaluation-outcomes,
.ai-evolution-outcomes,
.ai-evaluation-detail-head,
.ai-evolution-detail-head {
    display: grid;
    gap: 12px;
    padding: clamp(18px, 3vw, 24px);
}

.ai-evaluation-outcomes h2,
.ai-evolution-outcomes h2,
.ai-evaluation-detail-head h1,
.ai-evolution-detail-head h1 {
    color: var(--advanced-ink);
    margin: 0;
}

.ai-evaluation-outcomes ul,
.ai-evolution-outcomes ul,
.ai-evaluation-section ul,
.ai-evolution-section ul,
.ai-evaluation-section ol,
.ai-evolution-section ol,
.ai-evaluation-references ol,
.ai-evolution-references ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
}

.ai-evaluation-outcomes li,
.ai-evolution-outcomes li,
.ai-evaluation-section li,
.ai-evolution-section li,
.ai-evaluation-references li,
.ai-evolution-references li {
    color: var(--advanced-copy);
    line-height: 1.65;
}

.ai-evaluation-module-grid,
.ai-evolution-module-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-evaluation-module-card,
.ai-evolution-module-card {
    background: #fff;
    border: 1px solid var(--advanced-line);
    border-radius: 18px;
    display: grid;
    gap: 12px;
}

.ai-evaluation-module-card.is-done,
.ai-evolution-module-card.is-done {
    background: linear-gradient(145deg, #fff, #fff7fb);
    border-color: rgba(246, 51, 146, .42);
}

.ai-evaluation-module-card > span,
.ai-evolution-module-card > span {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--advanced-pink);
    display: inline-flex;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ai-evaluation-module-card h3,
.ai-evolution-module-card h3 {
    color: var(--advanced-ink);
    font-size: 1.04rem;
    line-height: 1.35;
    margin: 0;
}

.ai-evaluation-module-card div,
.ai-evolution-module-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-evaluation-module-card small,
.ai-evolution-module-card small {
    background: var(--advanced-soft);
    border: 1px solid rgba(246, 51, 146, .16);
    border-radius: 100px;
    color: var(--advanced-muted);
    font-weight: 800;
    padding: 6px 9px;
}

.ai-evaluation-module-card a,
.ai-evolution-module-card a {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .28);
    color: var(--advanced-pink-strong);
    min-height: 38px;
    padding: 9px 13px;
    width: fit-content;
}

.ai-evaluation-detail,
.ai-evolution-detail {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
}

.ai-evaluation-nav,
.ai-evolution-nav {
    background: #fff;
    border: 1px solid var(--advanced-line);
    border-radius: 18px;
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 128px);
    overflow: auto;
    padding: 14px;
    position: sticky;
    top: 96px;
}

.ai-evaluation-nav > a,
.ai-evolution-nav > a {
    align-items: center;
    background: var(--advanced-soft);
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 100px;
    color: var(--advanced-pink-strong);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 850;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    text-decoration: none;
}

.ai-evaluation-nav ol,
.ai-evolution-nav ol {
    display: grid;
    gap: 8px;
    list-style: none;
}

.ai-python-page .python-deep-dive-grid > article > span {
    align-items: center;
    background: var(--python-pink);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 850;
    height: 34px;
    justify-content: center;
    margin-bottom: 12px;
    width: 34px;
}

.ai-python-page .python-deep-dive-grid h3 {
    color: var(--python-ink);
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 10px;
}

.ai-python-page .python-deep-dive-grid p {
    color: var(--python-copy);
    font-size: .88rem;
    line-height: 1.72;
    margin: 0 0 10px;
}

.ai-python-page .python-deep-dive-grid p:last-child {
    margin-bottom: 0;
}

.ai-python-page .python-worked-example,
.ai-python-page .python-beginner-glossary {
    background: #ffffff;
    border: 1px solid var(--python-line);
    border-radius: 18px;
    padding: 20px;
}

.ai-python-page .python-worked-example ol {
    counter-reset: worked-step;
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.ai-python-page .python-worked-example li {
    align-items: start;
    background: var(--python-surface-soft);
    border: 1px solid rgba(244, 143, 188, .22);
    border-radius: 14px;
    counter-increment: worked-step;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 12px 14px 12px 10px;
}

.ai-python-page .python-worked-example li::before {
    align-items: center;
    align-self: start;
    background: var(--python-pink);
    border-radius: 50%;
    color: #ffffff;
    content: counter(worked-step);
    display: flex;
    font-size: .78rem;
    font-weight: 800;
    grid-row: 1 / -1;
    height: 34px;
    justify-content: center;
    margin-top: 2px;
    width: 34px;
}

.ai-python-page .python-worked-example li strong {
    color: var(--python-pink-deep);
    grid-column: 2;
    grid-row: 1;
}

.ai-python-page .python-worked-example li p {
    color: var(--python-copy);
    grid-column: 2;
    grid-row: 2;
    line-height: 1.6;
    margin: 0;
}

.ai-python-page .python-beginner-glossary dl {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 18px 0 0;
}

.ai-python-page .python-beginner-glossary dl > div {
    background: var(--python-surface);
    border: 1px solid rgba(244, 143, 188, .24);
    border-radius: 14px;
    padding: 13px 14px;
}

.ai-python-page .python-beginner-glossary dt {
    color: var(--python-ink);
    font-weight: 850;
}

.ai-python-page .python-beginner-glossary dd {
    color: var(--python-copy);
    line-height: 1.55;
    margin: 4px 0 0;
}

.ai-python-page .python-readiness-item {
    align-items: center;
    background: var(--python-surface-soft);
    border: 1px solid var(--python-line);
    border-radius: 14px;
    cursor: pointer;
    display: grid;
    gap: 11px;
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 12px 14px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.ai-python-page .python-readiness-item::before {
    display: none !important;
}

.ai-python-page .python-readiness-item:hover {
    border-color: rgba(246, 51, 146, .5);
    transform: translateY(-1px);
}

.ai-python-page .python-readiness-item.is-checked {
    background: rgba(246, 51, 146, .09);
    border-color: rgba(246, 51, 146, .42);
}

.ai-python-page .python-readiness-item input[type="checkbox"] {
    accent-color: var(--python-pink);
    cursor: pointer;
    height: 20px;
    margin: 0;
    width: 20px;
}

.ai-python-page .python-readiness-item label {
    color: var(--python-copy);
    cursor: pointer;
    line-height: 1.55;
    min-width: 0;
}

.ai-python-practice-page .python-practice-form,
.ai-python-quiz-page #aiPythonQuizForm {
    border-top: 0;
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
}

.ai-evaluation-nav li a,
.ai-evolution-nav li a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--advanced-copy);
    display: grid;
    font-weight: 800;
    gap: 10px;
    grid-template-columns: 30px minmax(0, 1fr);
    line-height: 1.35;
    padding: 10px;
    text-decoration: none;
}

.ai-evaluation-nav li span,
.ai-evolution-nav li span {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 50%;
    color: var(--advanced-pink);
    display: inline-flex;
    font-size: .78rem;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.ai-python-practice-page .python-practice-form.is-saved textarea,
.ai-python-practice-page .python-practice-form.is-saved select {
    opacity: 0.72;
}

.ai-python-page .python-task-navigator {
    background: var(--python-surface);
    border: 1px solid var(--python-line);
    border-radius: 18px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.ai-python-practice-page .python-task-navigator {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-python-page .reasoning-nav-group {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(244, 143, 188, .22);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 10px;
}

.ai-python-page .reasoning-nav-group-label {
    color: var(--python-copy);
    flex: 1 1 145px;
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ai-python-page .python-task-navigator button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(246, 51, 146, .28);
    border-radius: 100px;
    color: var(--python-copy);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 44px;
    font: 800 .8rem 'Plus Jakarta Sans', sans-serif;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.ai-python-page .python-task-navigator button:hover {
    border-color: var(--python-pink);
    color: var(--python-pink-deep);
    transform: translateY(-1px);
}

.ai-python-page .python-task-navigator button.is-active {
    background: var(--python-pink);
    border-color: var(--python-pink);
    box-shadow: 0 8px 18px rgba(246, 51, 146, .2);
    color: #ffffff;
}

.ai-python-page .python-task-navigator button.is-complete:not(.is-active) {
    background: rgba(246, 51, 146, .11);
    border-color: rgba(246, 51, 146, .46);
    color: var(--python-pink-deep);
}

.ai-python-practice-page #aiPythonPracticeList,
.ai-python-quiz-page #aiPythonQuizList {
    min-width: 0;
}

.ai-python-practice-page .reasoning-practice-card,
.ai-python-quiz-page #aiPythonQuizList > article {
    background: #ffffff;
    border: 1px solid var(--python-line);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(87, 33, 61, .055);
    gap: 18px;
    min-width: 0;
    padding: clamp(16px, 3vw, 24px);
}

.ai-python-practice-page .reasoning-practice-card[hidden],
.ai-python-quiz-page #aiPythonQuizList > article[hidden] {
    display: none !important;
}

.ai-python-practice-page .reasoning-practice-card-head h3 {
    color: var(--python-ink);
    line-height: 1.4;
    margin: 0;
}

.ai-python-practice-page .reasoning-practice-prompt {
    background: var(--python-surface);
    border-left: 3px solid var(--python-pink);
    border-radius: 14px;
    color: var(--python-copy);
    line-height: 1.65;
    padding: 14px 16px;
}

.ai-python-practice-page .reasoning-practice-prompt :where(p, blockquote) {
    color: var(--python-copy);
    margin: 0 0 10px;
}

.ai-python-practice-page .reasoning-practice-prompt :where(p, blockquote):last-child {
    margin-bottom: 0;
}

.ai-python-practice-page .reasoning-practice-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.ai-python-practice-page .reasoning-practice-fields label {
    background: var(--python-surface-soft);
    border: 1px solid var(--python-line);
    border-radius: 16px;
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 14px;
}

.ai-python-practice-page .reasoning-practice-fields label > span {
    color: var(--python-ink);
    font-size: .84rem;
    font-weight: 800;
}

.ai-python-practice-page .reasoning-practice-fields textarea,
.ai-python-discussion-page :where(textarea, select),
.ai-python-page .discussion-reply-composer textarea {
    background: #ffffff;
    border: 1px solid rgba(246, 51, 146, .34);
    border-radius: 16px;
    color: var(--python-ink);
    font: 500 .9rem 'Plus Jakarta Sans', sans-serif;
    line-height: 1.65;
    min-width: 0;
    padding: 13px 14px;
    width: 100%;
}

.ai-python-practice-page .reasoning-practice-fields textarea {
    min-height: 190px;
    resize: vertical;
}

.ai-python-practice-page .reasoning-practice-fields textarea:disabled {
    background: #f8f4f6;
    color: var(--python-copy);
    cursor: not-allowed;
    opacity: 1;
}

.ai-python-practice-page .reasoning-scaffold-reveal-button {
    justify-content: center;
    margin: 0;
    min-height: 44px;
    width: 100%;
}

.ai-python-page .python-task-controls {
    align-items: center;
    background: var(--python-surface-soft);
    border: 1px solid var(--python-line);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) minmax(150px, auto);
    padding: 12px;
}

.ai-python-page .python-task-controls strong {
    color: var(--python-ink);
    font-size: .82rem;
    line-height: 1.45;
    text-align: center;
}

.ai-python-page .python-task-controls button,
.ai-python-practice-page .python-save-panel button,
.ai-python-discussion-page .ml-save-panel button,
.ai-python-discussion-page .discussion-bubble button,
.ai-python-discussion-page .discussion-reply-actions button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(246, 51, 146, .48);
    border-radius: 100px;
    color: var(--python-pink-deep);
    cursor: pointer;
    display: inline-flex;
    font: 800 .82rem 'Plus Jakarta Sans', sans-serif;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 9px 16px;
}

.ai-python-page .python-task-controls button:last-child,
.ai-python-practice-page .python-save-panel [data-practice-save],
.ai-python-discussion-page .ml-save-panel button,
.ai-python-discussion-page .btn-reply-send {
    background: var(--python-pink);
    border-color: var(--python-pink);
    color: #ffffff;
}

.ai-python-page .python-task-controls button:disabled {
    background: #f6f2f4;
    border-color: #e4dce0;
    color: var(--python-muted);
    cursor: not-allowed;
    opacity: .72;
}

.ai-python-practice-page .python-save-panel,
.ai-python-discussion-page .ml-save-panel {
    align-items: center;
    background: var(--python-surface);
    border: 1px solid var(--python-line);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: space-between;
    padding: 14px 16px;
}

.ai-python-practice-page .python-save-panel p,
.ai-python-discussion-page .ml-save-panel p {
    color: var(--python-copy);
    flex: 1 1 260px;
    line-height: 1.55;
    margin: 0;
}

.ai-python-practice-page .python-save-panel > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-python-page .python-reference-details,
.ai-python-page .python-source-panel {
    background: #ffffff;
    border: 1px solid var(--python-line);
    border-radius: 18px;
    margin-top: 24px;
    overflow: hidden;
}

.ai-python-page .python-reference-details summary,
.ai-python-page .python-source-panel-head {
    align-items: center;
    background: var(--python-surface-soft);
    border-radius: 18px;
    color: var(--python-ink);
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    list-style: none;
    padding: 15px 16px;
}

.ai-python-page .python-source-panel-head {
    cursor: default;
    grid-template-columns: 44px minmax(0, 1fr);
}

.ai-python-page .python-reference-details summary::-webkit-details-marker {
    display: none;
}

.ai-python-page .python-reference-details summary > i:first-child,
.ai-python-page .python-source-panel-head > i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--python-pink);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.ai-python-page .python-reference-details summary span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ai-python-page .python-reference-details summary small,
.ai-python-page .python-source-panel-head p {
    color: var(--python-copy);
    line-height: 1.5;
    margin: 0;
}

.ai-python-page .python-reference-details[open] summary {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.ai-python-page .python-reference-details[open] summary > i:last-child {
    transform: rotate(180deg);
}

.ai-python-page .python-source-container {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 18px;
}

.ai-python-page .python-source-container :where(table, pre) {
    max-width: 100%;
}

.ai-python-quiz-page #aiPythonQuizNavigator {
    display: flex;
    flex-wrap: wrap;
}

.ai-python-quiz-page #aiPythonQuizList > article > span {
    background: var(--python-pink);
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    height: 38px;
    width: 38px;
}

.ai-python-quiz-page #aiPythonQuizList > article > small {
    color: var(--python-pink-deep);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ai-python-quiz-page #aiPythonQuizList > article > h3 {
    color: var(--python-ink);
    line-height: 1.48;
    margin: 0;
}

.ai-python-quiz-page .reasoning-scaffold-options {
    display: grid;
    gap: 10px;
}

.ai-python-quiz-page .reasoning-scaffold-options label {
    background: transparent;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    display: block;
    padding: 0;
}

.ai-python-quiz-page .reasoning-scaffold-options label > span {
    align-items: flex-start;
    background: var(--python-surface-soft);
    border: 1px solid var(--python-line);
    border-radius: 14px;
    color: var(--python-copy);
    display: grid;
    gap: 11px;
    grid-template-columns: 30px minmax(0, 1fr);
    line-height: 1.55;
    min-height: 52px;
    padding: 11px 13px;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ai-python-quiz-page .reasoning-scaffold-options label:hover > span {
    border-color: rgba(246, 51, 146, .5);
}

.ai-python-quiz-page .reasoning-scaffold-options label b {
    align-items: center;
    background: rgba(246, 51, 146, .11);
    border-radius: 50%;
    color: var(--python-pink-deep);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.ai-evaluation-nav li.active a,
.ai-evolution-nav li.active a {
    background: var(--advanced-soft);
    border-color: rgba(246, 51, 146, .32);
    color: var(--advanced-ink);
}

.ai-evaluation-content,
.ai-evolution-content {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ai-evaluation-tabs,
.ai-evolution-tabs {
    background: #fff;
    border: 1px solid var(--advanced-line);
    border-radius: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.ai-evaluation-tabs a,
.ai-evolution-tabs a {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .16);
    color: var(--advanced-muted);
    flex: 1 1 130px;
    min-height: 42px;
    padding: 10px 12px;
}

.ai-evaluation-tabs a.active,
.ai-evolution-tabs a.active {
    background: var(--advanced-pink);
    border-color: var(--advanced-pink);
    color: #fff;
    box-shadow: 0 10px 22px rgba(246, 51, 146, .18);
}

.ai-evaluation-activity,
.ai-evolution-activity {
    min-width: 0;
    overflow: hidden;
    padding: clamp(18px, 3vw, 26px);
}

.ai-evaluation-chapter,
.ai-evolution-chapter {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.ai-evaluation-chapter-head,
.ai-evolution-chapter-head {
    background: linear-gradient(135deg, #fff7fb, #fff);
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 18px;
    display: grid;
    gap: 10px;
    padding: 20px;
}

.ai-evaluation-chapter-head span,
.ai-evolution-chapter-head span {
    color: var(--advanced-pink);
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ai-evaluation-chapter h2,
.ai-evolution-chapter h2,
.ai-evaluation-section h3,
.ai-evolution-section h3,
.ai-evaluation-check h3,
.ai-evolution-check h3,
.ai-evaluation-glossary h3,
.ai-evolution-glossary h3,
.ai-evaluation-references h3,
.ai-evolution-references h3,
.ai-evaluation-practice h2,
.ai-evolution-practice h2,
.ai-evaluation-quiz h2,
.ai-evolution-quiz h2,
.ai-evaluation-discussion h2,
.ai-evolution-discussion h2 {
    color: var(--advanced-ink);
    margin: 0;
}

.ai-evaluation-chapter h2,
.ai-evolution-chapter h2 {
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.15;
}

.ai-evaluation-section,
.ai-evolution-section,
.ai-evaluation-callout,
.ai-evolution-callout,
.ai-evaluation-check,
.ai-evolution-check,
.ai-evaluation-glossary,
.ai-evolution-glossary,
.ai-evaluation-references,
.ai-evolution-references,
.ai-evaluation-practice article,
.ai-evolution-practice article,
.ai-evaluation-quiz fieldset,
.ai-evolution-quiz fieldset,
.ai-evaluation-discussion {
    background: var(--advanced-surface);
    border: 1px solid rgba(244, 143, 188, .24);
    border-radius: 17px;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
}

.ai-evaluation-section h3,
.ai-evolution-section h3,
.ai-evaluation-check h3,
.ai-evolution-check h3,
.ai-evaluation-glossary h3,
.ai-evolution-glossary h3,
.ai-evaluation-references h3,
.ai-evolution-references h3 {
    align-items: center;
    display: flex;
    gap: 9px;
    line-height: 1.35;
}

.ai-evaluation-section h3 i,
.ai-evolution-section h3 i,
.ai-evaluation-check h3::before,
.ai-evolution-check h3::before {
    color: var(--advanced-pink);
}

.ai-evaluation-callout,
.ai-evolution-callout {
    align-items: start;
    background: linear-gradient(135deg, #fff0f7, #fff);
    grid-template-columns: 42px minmax(0, 1fr);
}

.ai-evaluation-callout > i,
.ai-evolution-callout > i {
    align-items: center;
    background: rgba(246, 51, 146, .13);
    border-radius: 50%;
    color: var(--advanced-pink);
}

.ai-python-quiz-page .reasoning-scaffold-options label.is-selected > span,
.ai-python-quiz-page .reasoning-scaffold-options input:checked + span {
    background: var(--python-surface);
    border-color: var(--python-pink);
    box-shadow: 0 0 0 3px rgba(246, 51, 146, .1);
}

.ai-python-quiz-page .reasoning-scaffold-options label.is-correct > span {
    background: #f2fbf5;
    border-color: #58a86e;
    color: #205e31;
}

.ai-python-quiz-page .reasoning-scaffold-options label.is-wrong > span {
    background: #fff3f5;
    border-color: #d9677b;
    color: #8b2438;
}

.ai-python-quiz-page #aiPythonQuizForm.is-locked .reasoning-scaffold-options label {
    cursor: not-allowed;
}

.ai-python-quiz-page .quiz-result-card,
.ai-python-quiz-page .quiz-explanation {
    background: var(--python-surface);
    border: 1px solid var(--python-line);
    border-radius: 16px;
    color: var(--python-copy);
    display: grid;
    gap: 6px;
    line-height: 1.6;
    margin: 0;
    padding: 14px 16px;
}

.ai-python-quiz-page .quiz-result-card strong {
    color: var(--python-ink);
    font-size: 1rem;
}

.ai-python-quiz-page .quiz-explanation i {
    color: var(--python-pink);
}

.ai-python-quiz-page .quiz-submit-btn {
    align-items: center;
    align-self: start;
    background: var(--python-pink);
    border: 0;
    border-radius: 100px;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    margin: 0;
    min-height: 46px;
    padding: 10px 22px;
}

.ai-python-discussion-page .ml-discussion-prompts {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 20px 0;
}

.ai-python-discussion-page .ml-discussion-prompts button {
    align-items: center;
    background: var(--python-surface-soft);
    border: 1px solid var(--python-line);
    border-radius: 16px;
    color: var(--python-ink);
    cursor: pointer;
    display: grid;
    font: 800 .84rem 'Plus Jakarta Sans', sans-serif;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 64px;
    padding: 10px 13px;
    text-align: left;
}

.ai-python-discussion-page .ml-discussion-prompts button i {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--python-pink);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ai-evaluation-grid,
.ai-evolution-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-evaluation-grid article,
.ai-evolution-grid article {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 17px;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 17px;
}

.ai-evaluation-grid h4,
.ai-evolution-grid h4 {
    color: var(--advanced-ink);
    margin: 0;
}

.ai-evaluation-flow {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
}

.ai-evaluation-flow span {
    background: var(--advanced-soft);
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 100px;
    color: var(--advanced-ink);
    font-weight: 900;
    padding: 8px 12px;
}

.ai-evaluation-flow i {
    color: var(--advanced-pink);
}

.ai-evolution-table-wrap,
.ai-evaluation-table-wrap {
    border: 1px solid rgba(244, 143, 188, .28);
    border-radius: 16px;
    overflow: auto;
}

.ai-evolution-table-wrap table,
.ai-evaluation-table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 620px;
    width: 100%;
}

.ai-evolution-table-wrap th,
.ai-evolution-table-wrap td,
.ai-evaluation-table-wrap th,
.ai-evaluation-table-wrap td {
    border-bottom: 1px solid rgba(244, 143, 188, .22);
    color: var(--advanced-copy);
    line-height: 1.55;
    padding: 13px 14px;
    text-align: left;
    vertical-align: top;
}

.ai-evolution-table-wrap th,
.ai-evaluation-table-wrap th {
    background: var(--advanced-soft);
    color: var(--advanced-ink);
    font-weight: 900;
}

.ai-evolution-timeline {
    counter-reset: evolution-step;
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-evolution-timeline li {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 16px;
    counter-increment: evolution-step;
    display: grid;
    gap: 6px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px;
}

.ai-evolution-timeline li::before {
    align-items: center;
    background: rgba(246, 51, 146, .12);
    border-radius: 50%;
    color: var(--advanced-pink);
    content: counter(evolution-step);
    display: inline-flex;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.ai-evolution-timeline li strong,
.ai-evolution-timeline li span {
    grid-column: 2;
}

.ai-evolution-timeline li strong {
    color: var(--advanced-ink);
}

.ai-evolution-timeline li span {
    color: var(--advanced-copy);
    line-height: 1.6;
}

.ai-evaluation-glossary dl,
.ai-evolution-glossary dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.ai-evaluation-glossary dt,
.ai-evolution-glossary dt {
    color: var(--advanced-ink);
    font-weight: 900;
}

.ai-evaluation-glossary dd,
.ai-evolution-glossary dd {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .14);
    border-radius: 14px;
    margin: 0;
    padding: 10px 12px;
}

.ai-evaluation-loading,
.ai-evolution-loading,
.ai-evaluation-error,
.ai-evolution-error {
    align-items: center;
    background: #fff;
    border: 1px solid var(--advanced-line);
    border-radius: 18px;
    color: var(--advanced-copy);
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 180px;
    padding: 28px;
    text-align: center;
}

.ai-evaluation-loading i,
.ai-evolution-loading i,
.ai-evaluation-error i,
.ai-evolution-error i {
    color: var(--advanced-pink);
    font-size: 1.4rem;
}

.ai-evaluation-complete,
.ai-evolution-complete {
    margin-top: 4px;
}

.ai-evaluation-practice,
.ai-evolution-practice,
.ai-evaluation-quiz,
.ai-evolution-quiz,
.ai-evaluation-discussion {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ai-evaluation-practice article > span,
.ai-evolution-practice article > span {
    color: var(--advanced-pink);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ai-evaluation-practice label,
.ai-evolution-practice label,
.ai-evaluation-discussion label,
.ai-evolution-discussion label {
    color: var(--advanced-ink);
    font-weight: 900;
}

.ai-evaluation-practice textarea,
.ai-evolution-practice textarea,
.ai-evaluation-discussion textarea,
.ai-evolution-discussion textarea {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .26);
    border-radius: 16px;
    box-sizing: border-box;
    color: var(--advanced-ink);
    font: inherit;
    line-height: 1.65;
    min-height: 150px;
    padding: 14px;
    resize: vertical;
    width: 100%;
}

.ai-evaluation-practice textarea:focus,
.ai-evolution-practice textarea:focus,
.ai-evaluation-discussion textarea:focus,
.ai-evolution-discussion textarea:focus {
    border-color: var(--advanced-pink);
    outline: 3px solid rgba(246, 51, 146, .13);
}

.ai-evaluation-feedback,
.ai-evolution-feedback,
.ai-evaluation-explanation,
.ai-evolution-explanation {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 15px;
    margin: 0;
    padding: 12px 14px;
}

.ai-evaluation-feedback strong,
.ai-evolution-feedback strong,
.ai-evaluation-explanation strong,
.ai-evolution-explanation strong {
    color: var(--advanced-ink);
}

.ai-evaluation-quiz fieldset,
.ai-evolution-quiz fieldset {
    border-color: rgba(246, 51, 146, .2);
    margin: 0;
}

.ai-evaluation-quiz legend,
.ai-evolution-quiz legend {
    color: var(--advanced-ink);
    font-weight: 900;
    line-height: 1.45;
    margin-bottom: 10px;
    padding: 0 6px;
}

.ai-evaluation-quiz label,
.ai-evolution-quiz label {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .18);
    border-radius: 15px;
    color: var(--advanced-copy);
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr);
    line-height: 1.55;
    margin-top: 9px;
    padding: 12px 13px;
}

.ai-evaluation-quiz label:hover,
.ai-evolution-quiz label:hover,
.ai-evaluation-quiz label.selected,
.ai-evolution-quiz label.selected {
    background: var(--advanced-soft);
    border-color: rgba(246, 51, 146, .42);
    color: var(--advanced-ink);
}

.ai-evaluation-quiz input,
.ai-evolution-quiz input {
    accent-color: var(--advanced-pink);
    height: 18px;
    margin-top: 3px;
    width: 18px;
}

.ai-evaluation-quiz input:focus-visible,
.ai-evolution-quiz input:focus-visible {
    outline: 3px solid rgba(246, 51, 146, .16);
    outline-offset: 2px;
}

.ai-evaluation-quiz.is-locked,
.ai-evolution-quiz.is-locked {
    background: linear-gradient(145deg, #fff7fb, #fff);
    border: 1px solid rgba(246, 51, 146, .2);
    border-radius: 18px;
    padding: 16px;
}

.ai-evaluation-actions,
.ai-evolution-actions {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(244, 143, 188, .24);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.ai-evaluation-actions span,
.ai-evolution-actions span {
    color: var(--advanced-muted);
    font-size: .9rem;
    font-weight: 800;
}

.ai-evaluation-actions button:disabled,
.ai-evolution-actions button:disabled {
    background: #f6f2f4;
    border-color: #e4dce0;
    box-shadow: none;
    color: var(--advanced-muted);
    cursor: not-allowed;
    transform: none;
}

.ai-evaluation-pager,
.ai-evolution-pager {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.ai-evaluation-pager a,
.ai-evolution-pager a {
    background: #fff;
    border: 1px solid rgba(246, 51, 146, .24);
    color: var(--advanced-pink-strong);
    min-height: 42px;
    padding: 10px 14px;
}

.ai-evaluation-pager a:hover,
.ai-evolution-pager a:hover,
.ai-evaluation-module-card a:hover,
.ai-evolution-module-card a:hover,
.ai-evaluation-nav > a:hover,
.ai-evolution-nav > a:hover {
    background: var(--advanced-soft);
    border-color: rgba(246, 51, 146, .42);
}

@media (max-width: 980px) {
    .ai-evaluation-hero,
    .ai-evolution-hero,
    .ai-evaluation-detail,
    .ai-evolution-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-evaluation-module-grid,
    .ai-evolution-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-evaluation-nav,
    .ai-evolution-nav {
        max-height: none;
        position: static;
    }

    .ai-evaluation-nav ol,
    .ai-evolution-nav ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ai-evaluation-app,
    .ai-evolution-app {
        padding: 16px 12px 30px;
    }

    .ai-evaluation-module-grid,
    .ai-evolution-module-grid,
    .ai-evaluation-grid,
    .ai-evolution-grid,
    .ai-evaluation-nav ol,
    .ai-evolution-nav ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-evaluation-hero,
    .ai-evolution-hero,
    .ai-evaluation-outcomes,
    .ai-evolution-outcomes,
    .ai-evaluation-detail-head,
    .ai-evolution-detail-head,
    .ai-evaluation-activity {
        padding: 16px;
    }

    .ai-evolution-activity {
        padding: 16px;
    }

    .ai-evaluation-meta b,
    .ai-evolution-meta b,
    .ai-evaluation-tabs a,
    .ai-evolution-tabs a,
    .ai-evaluation-actions button,
    .ai-evolution-actions button,
    .ai-evaluation-pager a,
    .ai-evolution-pager a {
        width: 100%;
    }

    .ai-evaluation-pager,
    .ai-evolution-pager,
    .ai-evaluation-actions,
    .ai-evolution-actions {
}

.ai-python-discussion-page .ml-discussion-form {
    background: #ffffff;
    border: 1px solid var(--python-line);
    border-radius: 18px;
    padding: clamp(16px, 3vw, 22px);
}

.ai-python-discussion-page .ml-discussion-form label {
    display: grid;
    gap: 9px;
}

.ai-python-discussion-page .ml-discussion-form label > span {
    color: var(--python-ink);
    font-weight: 800;
}

.ai-python-discussion-page .ml-discussion-form select {
    min-height: 48px;
}

.ai-python-discussion-page .discussion-thread {
    gap: 14px;
}

.ai-python-discussion-page .python-discussion-empty {
    align-items: center;
    background: var(--python-surface);
    border: 1px dashed rgba(246, 51, 146, .42);
    border-radius: 18px;
    display: grid;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 20px;
}

.ai-python-discussion-page .python-discussion-empty > i {
    align-items: center;
    background: #ffffff;
    border-radius: 50%;
    color: var(--python-pink);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.ai-python-discussion-page .python-discussion-empty strong {
    color: var(--python-ink);
}

.ai-python-discussion-page .python-discussion-empty p {
    color: var(--python-copy);
    line-height: 1.55;
    margin: 3px 0 0;
}

.ai-python-discussion-page .discussion-bubble {
    background: #ffffff;
    border: 1px solid var(--python-line);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(87, 33, 61, .05);
    padding: 18px;
}

.ai-python-discussion-page .discussion-bubble small {
    color: var(--python-muted);
}

.ai-python-discussion-page .discussion-bubble > p {
    color: var(--python-copy);
    line-height: 1.65;
}

.ai-python-discussion-page .discussion-reply-composer {
    background: var(--python-surface);
    border: 1px solid var(--python-line);
    border-radius: 16px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.ai-python-discussion-page .discussion-reply-composer[hidden] {
    display: none !important;
}

.ai-python-discussion-page .discussion-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-python-discussion-page .discussion-replies {
    border-left-color: rgba(246, 51, 146, .3);
}

.ai-python-discussion-page .discussion-replies article {
    border-radius: 14px;
}

@media (max-width: 920px) {
    .ai-python-page .python-deep-dive-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-python-page .python-beginner-glossary dl,
    .ai-python-practice-page .python-task-navigator {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .ai-python-page .python-worked-example li {
        gap: 6px;
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 10px 12px;
    }
    .ai-python-page .python-worked-example li::before {
        height: 28px;
        margin-top: 0;
        width: 28px;
    }

    .ai-python-page .python-task-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-python-page .python-task-controls strong {
        grid-row: 1;
    }

    .ai-python-page .python-task-controls button,
    .ai-python-quiz-page .quiz-submit-btn {
        width: 100%;
    }

    .ai-python-discussion-page .ml-discussion-prompts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .ai-python-page .python-deep-dive,
    .ai-python-page .python-worked-example,
    .ai-python-page .python-beginner-glossary,
    .ai-python-practice-page .reasoning-practice-card,
    .ai-python-quiz-page #aiPythonQuizList > article {
        padding: 15px;
    }

    .ai-python-page .python-deep-dive-head,
    .ai-python-page .python-worked-example > div:first-child,
    .ai-python-page .python-beginner-glossary > div:first-child {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .ai-python-page .python-deep-dive-head > i,
    .ai-python-page .python-worked-example > div:first-child > i,
    .ai-python-page .python-beginner-glossary > div:first-child > i {
        height: 40px;
        width: 40px;
    }

    .ai-python-page .reasoning-nav-group-label {
        flex-basis: 100%;
    }

    .ai-python-practice-page .python-save-panel,
    .ai-python-discussion-page .ml-save-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-evaluation-callout,
    .ai-evolution-callout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-evolution-timeline li {
        grid-template-columns: 32px minmax(0, 1fr);
    }
}

/* Align advanced AI modules to the canonical Reasoning lesson shell. */
.ai-evaluation-page .ai-evaluation-app,
.ai-evolution-page .ai-evolution-app {
    display: block;
    margin: 0;
    max-width: none;
    padding: 0;
}

.ai-evaluation-page .lesson-hero,
.ai-evolution-page .lesson-hero {
    margin-bottom: 0;
}

.ai-evaluation-page .lesson-hero h1,
.ai-evolution-page .lesson-hero h1 {
    font-size: clamp(2.35rem, 4.4vw, 4rem);
}

.ai-evaluation-page .lesson-material-panel,
.ai-evolution-page .lesson-material-panel {
    overflow: hidden;
}

.ai-evaluation-page .ai-evaluation-detail-head,
.ai-evolution-page .ai-evolution-detail-head {
    background: #fff;
    border: 0;
    border-bottom: 1px solid rgba(244, 143, 188, .24);
    border-radius: 16px;
    box-shadow: none;
    margin: -24px -24px 24px;
    padding: 0 0 18px;
}

.ai-evaluation-page .ai-evaluation-detail-head h2,
.ai-evolution-page .ai-evolution-detail-head h2 {
    color: #171827;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.ai-evaluation-page .ai-evaluation-activity,
.ai-evolution-page .ai-evolution-activity {
    background: transparent;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

.ai-evaluation-page .ai-evaluation-chapter-head,
.ai-evolution-page .ai-evolution-chapter-head {
    background: linear-gradient(135deg, #fff7fb, #fff);
    margin-bottom: 2px;
}

.ai-evaluation-page .ai-evaluation-pager,
.ai-evolution-page .ai-evolution-pager {
    background: transparent;
    border: 0;
    border-radius: 16px;
    margin-top: 0;
    padding: 0;
}

.ai-evaluation-page .ai-evaluation-pager span,
.ai-evolution-page .ai-evolution-pager span {
    min-height: 1px;
}

.ai-evaluation-page .lesson-progress-mini,
.ai-evolution-page .lesson-progress-mini {
    overflow: hidden;
}

.ai-evaluation-page .lesson-list-card a,
.ai-evolution-page .lesson-list-card a {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .ai-evaluation-page .ai-evaluation-detail-head,
    .ai-evolution-page .ai-evolution-detail-head {
        margin: -18px -18px 18px;
}

    .ai-python-practice-page .python-save-panel > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-python-practice-page .python-save-panel button,
    .ai-python-discussion-page .ml-save-panel button,
    .ai-python-discussion-page .discussion-reply-actions button {
        width: 100%;
    }

    .ai-python-discussion-page .discussion-bubble > div:first-child {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ai-python-discussion-page .discussion-bubble > div:first-child small {
        grid-column: 2;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-python-page *,
    .ai-python-page *::before,
    .ai-python-page *::after {
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}