/* Shared page styles for all pages except the homepage.
   The homepage remains isolated in home.css to protect its established layout. */

/* Course-card page sizing; shared visual foundation lives in css/components.css. */
.course-card__media {
    aspect-ratio: 282 / 158;
}

.course-card__body {
    gap: 12px;
    padding: 8px 20px 20px;
}

.course-card__title {
    height: 28px;
    min-height: 28px;
    font-size: 18px;
    line-height: 28px;
}

.course-card__info {
    gap: 8px;
    width: 100%;
}

.course-card p {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}


/* ===== CONTENT PAGES ===== */
/* About us and contact us pages. Reusable CMS blocks share the cms-module prefix. */
.content-page {
    min-height: 60vh;
    background: var(--ds-neutral-white)
}

.content-hero {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: var(--ds-bg-pale-blue);
    border-bottom: 1px solid var(--ds-neutral-paler)
}

.content-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.content-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.9) 38%,rgba(255,255,255,.12) 78%)
}

.content-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 360px;
    flex-direction: column;
    justify-content: center;
    padding-block: 40px
}

.content-hero .breadcrumbs {
    position: absolute;
    top: 24px;
    left: 0;
    margin: 0
}

.content-hero__eyebrow, .cms-module__eyebrow {
    margin: 0;
    color: var(--ds-primary-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .08em
}

.content-hero h1 {
    max-width: 640px;
    margin: 8px 0 16px;
    color: var(--ds-primary-dark);
    font-size: 40px;
    font-weight: 600;
    line-height: 48px
}

.content-hero__lead {
    max-width: 620px;
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 20px;
    line-height: 32px
}

.cms-module {
    padding-block: 80px
}

.cms-module--soft {
    background: var(--ds-bg-pale-blue)
}

.cms-module--compact {
    padding-block: 64px
}

.cms-module__header {
    display: flex;
    max-width: 820px;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px
}

.cms-module__header--center {
    align-items: center;
    margin-inline: auto;
    text-align: center
}

.cms-module__title {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 48px
}

.cms-module__summary {
    margin: 0;
    color: var(--ds-neutral-lighter);
    font-size: 18px;
    line-height: 28px
}

.cms-module__decor {
    width: 48px;
    height: 6px;
    margin-top: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg,#fabe00,#6fba2c,var(--ds-primary-logo2))
}

.cms-rich-text {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr);
    gap: 56px
}

.cms-rich-text__body {
    color: var(--ds-neutral-light);
    font-size: 18px;
    line-height: 28px
}

    .cms-rich-text__body p {
        margin-bottom: 20px
    }

.cms-rich-text__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: var(--ds-bg-pale-blue);
    border: 1px solid #dce7ef;
    border-radius: 12px
}

    .cms-rich-text__aside strong {
        color: var(--ds-primary-dark);
        font-size: 20px;
        line-height: 32px
    }

.cms-rich-text__points {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

    .cms-rich-text__points li {
        position: relative;
        padding-left: 24px;
        color: var(--ds-neutral-light);
        line-height: 24px
    }

        .cms-rich-text__points li:before {
            position: absolute;
            top: 8px;
            left: 2px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #6fba2c;
            content: ""
        }

.cms-media-text {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 64px;
    align-items: center
}

.cms-media-text--reverse .cms-media-text__media {
    order: 2
}

.cms-media-text__media {
    overflow: hidden;
    margin: 0;
    background: #eef8fd;
    border-radius: 24px;
    box-shadow: 0 4px 15px rgba(59,66,70,.12)
}

    .cms-media-text__media img {
        width: 100%;
        aspect-ratio: 3/2;
        object-fit: cover
    }

.cms-media-text__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
}

    .cms-media-text__content h2, .cms-video__content h2 {
        margin: 0;
        color: var(--ds-primary-dark);
        font-size: 32px;
        line-height: 48px
    }

    .cms-media-text__content p, .cms-video__content p {
        margin: 0;
        color: var(--ds-neutral-light);
        font-size: 18px;
        line-height: 28px
    }

.cms-media-text__list {
    display: grid;
    gap: 12px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none
}

    .cms-media-text__list li {
        position: relative;
        padding-left: 28px;
        font-weight: 400;
        line-height: 24px
    }

        .cms-media-text__list li:before {
            position: absolute;
            top: 4px;
            left: 0;
            width: 18px;
            height: 18px;
            color: var(--ds-neutral-white);
            font-size: 12px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            background: var(--ds-primary-default);
            content: "✓"
        }

.cms-video {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
    gap: 48px;
    align-items: center
}

.cms-video__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(19,26,52,.14)
}

.cms-video__poster {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cms-video__play {
    position: absolute;
    inset: 0;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer
}

    .cms-video__play:before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: rgba(0,79,133,.92);
        box-shadow: 0 0 0 12px rgba(255,255,255,.48);
        content: "";
        transform: translate(-50%,-50%)
    }

    .cms-video__play:after {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: 6px;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 24px solid var(--ds-neutral-white);
        content: "";
        transform: translate(-50%,-50%)
    }

.cms-video__content {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.cms-video__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    line-height: 20px
}

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

.cms-content-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background: var(--ds-neutral-white);
    border: 1px solid #e3edf3;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(59,66,70,.1);
    transition: transform .18s,box-shadow .18s
}

    .cms-content-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(59,66,70,.16)
    }

.cms-content-card__media {
    overflow: hidden;
    aspect-ratio: 26/15;
    background: #eef8fd
}

    .cms-content-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.cms-content-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px
}

.cms-content-card__tag {
    color: var(--ds-primary-default);
    font-size: 14px;
    font-weight: 600
}

.cms-content-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 32px
}

.cms-content-card__text {
    flex: 1;
    margin: 0;
    color: var(--ds-neutral-light);
    line-height: 24px
}

.cms-content-card__link {
    color: var(--ds-primary-default);
    font-weight: 600;
    text-decoration: none
}

    .cms-content-card__link:after {
        content: " →"
    }

.cms-cta {
    overflow: hidden;
    padding: 48px 56px;
    color: var(--ds-neutral-white);
    border-radius: 24px;
    background: linear-gradient(120deg,var(--ds-primary-dark),var(--ds-primary-default) 55%,#00a0e9)
}

.cms-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.cms-cta h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 36px
}

.cms-cta p {
    margin: 0;
    font-size: 18px;
    line-height: 28px
}

.cms-cta .btn {
    min-width: 160px;
    color: var(--ds-primary-dark);
    background: var(--ds-neutral-white)
}

.video-dialog {
    width: min(920px,calc(100% - 40px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 52px rgba(19,26,52,.28)
}

    .video-dialog::backdrop {
        background: rgba(19,26,52,.66)
    }

.video-dialog__surface {
    margin: 0
}

.video-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-neutral-paler)
}

    .video-dialog__header h2 {
        margin: 0;
        font-size: 20px
    }

.video-dialog__close {
    width: 44px;
    height: 44px;
    color: var(--ds-primary-default);
    font-size: 28px;
    background: transparent;
    border: 0
}

.video-dialog__body {
    padding: 20px
}

.video-dialog__placeholder {
    display: grid;
    min-height: 400px;
    place-items: center;
    padding: 32px;
    text-align: center;
    background: var(--ds-bg-pale-blue);
    border: 1px dashed #a9c8da;
    border-radius: 12px
}

    .video-dialog__placeholder strong {
        display: block;
        color: var(--ds-primary-dark);
        font-size: 20px
    }

.contact-main {
    padding-block: 72px 96px
}

.contact-section + .contact-section {
    margin-top: 88px
}

.contact-section__header {
    max-width: 760px;
    margin-bottom: 32px
}

    .contact-section__header h2 {
        margin: 8px 0;
        font-size: 32px;
        line-height: 48px
    }

    .contact-section__header p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 18px;
        line-height: 28px
    }

.faq-list {
    overflow: hidden;
    border: 1px solid #dce7ef;
    border-radius: 12px
}

.faq-item {
    border-bottom: 1px solid var(--ds-neutral-paler)
}

    .faq-item:last-child {
        border: 0
    }

.faq-item__question {
    position: relative;
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 16px;
    padding: 20px 68px 20px 24px;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    list-style: none;
    cursor: pointer
}

    .faq-item__question::-webkit-details-marker {
        display: none
    }

    .faq-item__question:before {
        display: grid;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        place-items: center;
        color: var(--ds-neutral-white);
        font-size: 14px;
        border-radius: 50%;
        background: var(--ds-primary-default);
        content: "Q"
    }

    .faq-item__question:after {
        position: absolute;
        top: 50%;
        right: 28px;
        width: 12px;
        height: 12px;
        border-right: 2px solid var(--ds-primary-default);
        border-bottom: 2px solid var(--ds-primary-default);
        content: "";
        transform: translateY(-70%) rotate(45deg)
    }

.faq-item[open] .faq-item__question {
    color: var(--ds-primary-dark);
    background: var(--ds-bg-pale-blue)
}

    .faq-item[open] .faq-item__question:after {
        transform: translateY(-30%) rotate(225deg)
    }

.faq-item__answer {
    padding: 4px 68px 28px 72px;
    color: var(--ds-neutral-light);
    font-size: 16px;
    line-height: 24px;
    background: var(--ds-bg-pale-blue)
}

    .faq-item__answer p {
        margin: 0
    }

    .faq-item__answer a {
        color: var(--ds-primary-default);
        font-weight: 400
    }

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

.contact-card {
    position: relative;
    display: flex;
    min-height: 250px;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px;
    border: 1px solid #dce7ef;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(59,66,70,.1)
}

    .contact-card:after {
        position: absolute;
        right: -40px;
        bottom: -65px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: #eef8fd;
        content: ""
    }

    .contact-card > * {
        position: relative;
        z-index: 1
    }

.contact-card__icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    color: var(--ds-neutral-white);
    font-size: 26px;
    border-radius: 16px;
    background: var(--ds-primary-default)
}

.contact-card h3 {
    margin: 0;
    font-size: 24px
}

.contact-card__value {
    margin: 0;
    color: var(--ds-primary-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    word-break: break-word
}

.contact-card__description {
    flex: 1;
    margin: 0;
    color: var(--ds-neutral-lighter);
    line-height: 24px
}

.contact-note {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    margin-top: 24px;
    padding: 20px 24px;
    color: var(--ds-neutral-light);
    line-height: 24px;
    background: #fff9e6;
    border: 1px solid #f1d77a;
    border-radius: 8px
}

.contact-note__icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--ds-neutral-white);
    font-weight: 600;
    border-radius: 50%;
    background: #d99a00
}

.contact-note p {
    margin: 0
}

@media(max-width:1024px) {
    .cms-rich-text {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .cms-media-text {
        gap: 40px
    }

    .cms-video {
        grid-template-columns: 1fr
    }

    .cms-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:768px) {
    .content-hero .breadcrumbs {
        top: 16px
    }

    .content-hero, .content-hero__inner {
        min-height: 300px
    }

    .content-hero__inner {
        padding-block: 32px
    }

    .content-hero h1 {
        font-size: 32px;
        line-height: 48px
    }

    .content-hero__lead {
        font-size: 16px;
        line-height: 24px
    }

    .cms-module {
        padding-block: 56px
    }

    .cms-module--compact {
        padding-block: 48px
    }

    .cms-module__title, .cms-media-text__content h2, .cms-video__content h2, .contact-section__header h2 {
        font-size: 24px;
        line-height: 36px
    }

    .cms-module__summary, .cms-rich-text__body, .cms-media-text__content p, .cms-video__content p, .contact-section__header p {
        font-size: 16px;
        line-height: 24px
    }

    .cms-media-text {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .cms-media-text--reverse .cms-media-text__media {
        order: 0
    }

    .cms-video {
        gap: 28px
    }

    .cms-video__frame {
        border-radius: 12px
    }

    .cms-card-grid, .contact-grid {
        grid-template-columns: 1fr
    }

    .cms-cta {
        padding: 32px 24px;
        border-radius: 16px
    }

    .cms-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .cms-cta .btn {
        width: 100%
    }

    .contact-main {
        padding-block: 48px 64px
    }

    .contact-section + .contact-section {
        margin-top: 64px
    }

    .faq-item__question {
        min-height: 64px;
        padding: 16px 52px 16px 16px;
        font-size: 16px;
        line-height: 24px
    }

        .faq-item__question:after {
            right: 20px
        }

    .faq-item__answer {
        padding: 0 20px 24px 60px;
        font-size: 16px;
        line-height: 24px
    }

    .contact-card {
        min-height: 0;
        padding: 24px
    }

        .contact-card h3, .contact-card__value {
            font-size: 20px;
            line-height: 32px
        }

    .video-dialog__placeholder {
        min-height: 240px
    }
}

/* Contact us content follows 1796 nodes; shared header/footer follow Figma section 1837:54216. */
.contact-page {
    background: var(--ds-neutral-white);
    color: var(--ds-neutral-default)
}

.contact-layout {
    position: relative;
    width: min(864px,calc(100% - 40px));
    margin-inline: auto
}

.contact-intro {
    position: relative;
    height: 248px;
    overflow: hidden;
    background: var(--ds-neutral-white)
}

.contact-intro__texture {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    height: 400px;
    max-width: none;
    transform: translateX(-50%);
    object-fit: cover;
    pointer-events: none
}
/* Keep page-top breadcrumbs aligned with the shared content container. */
.contact-breadcrumbs {
    width: min(var(--container),calc(100% - var(--gutter) - var(--gutter)));
    margin-inline: auto;
    padding-top: 24px
}

    .contact-breadcrumbs span:last-child {
        color: var(--ds-neutral-default)
    }

.contact-intro__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    text-align: center
}

    .contact-intro__heading > div {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 8px
    }

    .contact-intro__heading h1 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 32px;
        font-weight: 600;
        line-height: 48px
    }

    .contact-intro__heading p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px
    }

    .contact-intro__heading > img {
        display: block;
        width: 48px;
        height: 16px;
        object-fit: contain
    }

.contact-block-title {
    display: flex;
    height: 112px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center
}

.contact-block-title__heading {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.contact-block-title__icon {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 200px
}

.contact-block-title__icon--white {
    background: var(--ds-neutral-white)
}

.contact-block-title__icon--blue {
    background: var(--ds-bg-light-blue)
}

.contact-block-title__icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain
}

.contact-block-title h2 {
    margin: 0;
    color: var(--ds-neutral-default);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px
}

.contact-block-title p {
    margin: 0;
    color: var(--ds-neutral-lighter);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.contact-faq {
    min-height: 648px;
    padding: 40px 0;
    background: var(--ds-neutral-palest)
}

.contact-faq__list {
    display: grid;
    gap: 16px;
    margin-top: 24px
}

.contact-faq__item {
    overflow: hidden;
    margin: 0;
    background: var(--ds-neutral-white);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(59,66,70,.08)
}

    .contact-faq__item[open] {
        margin-block: 8px
    }

    .contact-faq__item summary {
        display: flex;
        min-height: 48px;
        align-items: center;
        gap: 8px;
        padding: 12px;
        color: var(--ds-neutral-default);
        background: var(--ds-neutral-white);
        border-radius: 6px;
        list-style: none;
        cursor: pointer
    }

        .contact-faq__item summary::-webkit-details-marker {
            display: none
        }

        .contact-faq__item summary::marker {
            content: ""
        }

    .contact-faq__item[open] summary {
        color: var(--ds-neutral-white);
        background: var(--ds-primary-default);
        border-radius: 6px 6px 0 0
    }

.contact-faq__question {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

    .contact-faq__question b {
        flex: 0 0 auto;
        color: var(--ds-primary-default);
        font: inherit
    }

.contact-faq__item[open] .contact-faq__question b {
    color: var(--ds-neutral-white)
}

.contact-faq__arrow {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px
}

    .contact-faq__arrow img {
        position: absolute;
        inset: 0;
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain
    }

.contact-faq__arrow-up {
    display: none !important
}

.contact-faq__item[open] .contact-faq__arrow-down {
    display: none
}

.contact-faq__item[open] .contact-faq__arrow-up {
    display: block !important
}

.contact-faq__answer {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 12px;
    color: var(--ds-neutral-default);
    background: var(--ds-neutral-white);
    border-radius: 0 0 6px 6px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

    .contact-faq__answer p {
        margin: 0
    }

    .contact-faq__answer a {
        color: var(--ds-primary-default);
        font-weight: 400
    }

.contact-faq__item summary:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid rgba(0,111,188,.28);
    outline-offset: 2px
}

.contact-info {
    height: 320px;
    padding: 40px 0;
    background: var(--ds-neutral-white)
}

.contact-info__list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,420px));
    gap: 24px;
    margin-top: 24px
}

.contact-info__card {
    display: flex;
    height: 104px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    background: var(--ds-neutral-white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(59,66,70,.15);
    text-align: center
}

.contact-info__card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

    .contact-info__card-title img {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain
    }

.contact-info__card h3 {
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px
}

.contact-info__card > a {
    overflow: hidden;
    max-width: 100%;
    color: var(--ds-primary-default);
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

    .contact-info__card > a:hover {
        text-decoration: underline
    }

@media(max-width:900px) {
    .contact-layout {
        width: min(100% - 40px,864px)
    }

    .contact-info__list {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:768px) {
    .contact-layout {
        width: calc(100% - 40px)
    }

    .contact-intro {
        height: auto;
        min-height: 232px;
        padding-bottom: 32px
    }

    .contact-intro__texture {
        left: 0;
        width: 100%;
        height: 320px;
        transform: none;
        object-fit: cover;
        object-position: center top
    }

    .contact-breadcrumbs {
        padding-top: 16px
    }

    .contact-intro__heading {
        gap: 16px;
        margin-top: 28px
    }

        .contact-intro__heading h1 {
            font-size: 24px;
            line-height: 36px
        }

        .contact-intro__heading p {
            font-size: 16px;
            line-height: 24px
        }

    .contact-faq {
        min-height: 0;
        padding: 40px 0
    }

    .contact-block-title {
        height: auto
    }

        .contact-block-title h2 {
            font-size: 20px;
            line-height: 32px
        }

    .contact-faq__list {
        margin-top: 24px
    }

    .contact-faq__item[open] {
        margin-block: 4px
    }

    .contact-faq__item summary {
        min-height: 56px;
        padding: 12px
    }

    .contact-faq__question {
        font-size: 16px;
        line-height: 24px
    }

    .contact-faq__answer {
        min-height: 0;
        padding: 12px;
        font-size: 16px;
        line-height: 24px
    }

    .contact-info {
        height: auto;
        padding: 40px 0 48px
    }

    .contact-info__list {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .contact-info__card {
        height: 104px
    }

        .contact-info__card > a {
            font-size: 18px;
            line-height: 28px
        }
}

@media(max-width:420px) {
    .contact-layout {
        width: calc(100% - 32px)
    }

    .contact-faq__question {
        gap: 6px
    }

    .contact-info__card {
        padding-inline: 16px
    }

        .contact-info__card > a {
            font-size: 16px
        }
}

/* About us — top section follows Figma nodes 1838:107807 and 1838:107809. */
.about-intro {
    position: relative;
    height: 248px;
    overflow: hidden;
    background: var(--ds-neutral-white)
}

.about-intro__texture {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    height: 400px;
    max-width: none;
    transform: translateX(-50%);
    object-fit: cover;
    pointer-events: none
}

.about-breadcrumbs {
    position: relative;
    z-index: 1;
    width: min(var(--container),calc(100% - var(--gutter) - var(--gutter)));
    margin-inline: auto;
    padding-top: 24px
}

    .about-breadcrumbs span:last-child {
        color: var(--ds-neutral-default)
    }

.about-intro__layout {
    position: relative;
    z-index: 1;
    width: min(864px,calc(100% - 40px));
    margin-inline: auto
}

.about-intro__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    text-align: center
}

    .about-intro__heading > div {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 8px
    }

    .about-intro__heading h1 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 32px;
        font-weight: 600;
        line-height: 48px
    }

    .about-intro__heading p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px
    }

    .about-intro__heading > img {
        display: block;
        width: 48px;
        height: 16px;
        object-fit: contain
    }

@media(max-width:768px) {
    .about-intro {
        height: 215px
    }

    .about-intro__texture {
        right: 0;
        left: auto;
        width: 1440px;
        height: 400px;
        transform: none;
        object-fit: cover;
        object-position: center top
    }

    .about-breadcrumbs {
        padding-top: 16px
    }

    .about-intro__layout {
        width: calc(100% - 40px)
    }

    .about-intro__heading {
        gap: 16px;
        margin-top: 32px
    }

        .about-intro__heading > div {
            gap: 4px
        }

        .about-intro__heading h1 {
            font-size: 24px;
            line-height: 36px
        }

        .about-intro__heading p {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px
        }

        .about-intro__heading > img {
            width: 32px;
            height: 11px
        }
}

/* ===== COURSE CATALOG ===== */
/* Course overview and course search share the same component class system. */
.course-catalog {
    min-height: 100vh;
    background: var(--ds-neutral-white);
}

.course-catalog__inner {
    padding-top: 24px;
    padding-bottom: 40px;
}

.course-catalog__breadcrumbs {
    margin-bottom: 40px;
}

.course-catalog__title {
    margin: 0 0 32px;
    color: var(--ds-neutral-default);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

.course-category-tabs {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    overflow-x: auto;
    border-bottom: 2px solid var(--ds-neutral-paler);
    scrollbar-width: thin;
}

.course-category-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 144px;
    height: 56px;
    padding: 8px 16px;
    color: var(--ds-text-static-medium);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    background: var(--ds-neutral-white);
    border: 2px solid transparent;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(59,66,70,.15);
    cursor: pointer;
}

    .course-category-tab:hover {
        color: var(--ds-primary-default);
    }

    .course-category-tab.is-active {
        color: var(--ds-primary-default);
        border-color: var(--ds-primary-default);
    }

.course-category-tabs .course-category-tab,
.course-category-tabs .course-category-tab:link,
.course-category-tabs .course-category-tab:visited,
.course-category-tabs .course-category-tab:hover,
.course-category-tabs .course-category-tab:focus,
.course-category-tabs .course-category-tab:focus-visible,
.course-category-tabs .course-category-tab:active,
.course-category-tabs .course-category-tab span {
    text-decoration: none;
    text-decoration-line: none;
}

.course-category-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50%;
}

.course-category-tab__icon--all {
    color: #697077;
    background: var(--ds-neutral-paler);
}

.course-category-tab__icon--sustainability {
    color: #b84e69;
    background: #f9dce4;
}

.course-category-tab__icon--health {
    color: #4d9466;
    background: #dcefdc;
}

.course-category-tab__icon--care {
    color: #4d8ca9;
    background: #dcecf6;
}

.course-category-tab__icon--mind {
    color: #d39136;
    background: #fae8c8;
}

.course-category-tab__icon--art {
    color: #8470ac;
    background: #e8e0f4;
}

.course-category-tab__icon--finance {
    color: #4a9da1;
    background: #d8eeee;
}

.course-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 32px 0 40px;
}

.course-filter-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.course-result-count {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

    .course-result-count strong {
        color: var(--ds-neutral-light);
        font-size: 18px;
        line-height: 28px;
    }

.course-catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
}

    .course-catalog__grid > [hidden] {
        display: none !important;
    }

.course-catalog__empty {
    padding: 64px 20px;
    text-align: center;
}

    .course-catalog__empty h2 {
        margin-bottom: 8px;
        font-size: 24px;
    }

    .course-catalog__empty p {
        margin: 0;
        color: var(--ds-neutral-lighter);
    }

.course-card--compact {
    min-height: 358px;
}

    .course-card--compact .course-card__media {
        height: 158px;
    }

    .course-card--compact .course-card__category-tag {
        margin-top: 12px;
    }

    .course-card--compact .course-card__body {
        gap: 12px;
        padding: 8px 20px 20px;
    }

    .course-card--compact .course-card__title {
        display: -webkit-box;
        width: 100%;
        height: 56px;
        min-height: 56px;
        overflow: hidden;
        font-size: 18px;
        line-height: 28px;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .course-card--compact .course-card__info {
        gap: 8px;
    }

    .course-card--compact .course-card__info-row {
        gap: 4px;
        color: var(--ds-neutral-light);
        font-size: 14px;
        line-height: 20px;
    }

    .course-card--compact .btn {
        margin-top: auto;
    }

.course-card--detailed {
    min-height: 448px;
}

    .course-card--detailed .course-card__media {
        height: 162px;
    }

    .course-card--detailed .course-card__category-tag {
        margin-top: 10px;
    }

    .course-card--detailed .course-card__body {
        gap: 8px;
        padding: 6px 20px 16px;
    }

    .course-card--detailed .course-card__title {
        min-height: 28px;
        font-size: 18px;
        line-height: 28px;
    }

    .course-card--detailed .course-card__session {
        color: var(--ds-neutral-light);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .course-card--detailed .course-card__info {
        gap: 4px;
    }

    .course-card--detailed .course-card__info-row {
        gap: 4px;
        font-size: 14px;
        line-height: 20px;
    }

    .course-card--detailed .course-card__action {
        margin-top: auto;
    }

.course-card__deadline {
    justify-content: center;
    gap: 4px;
    color: #008e98;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.course-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    margin-top: auto;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 6px;
}
/*
 * Session registration status semantic modifiers.
 * `course-status--*` and course-detail `pill--*` share the SAME semantic suffix,
 * but their visual treatment follows each component's Figma spec:
 * - Query/session list card (`course-status`): terminal states are plain text with NO background.
 * - Course-detail session badge (`pill`): semantic filled pill background is retained.
 * - Upcoming (`course-status--muted`) is the disabled action state, so it keeps the disabled fill.
 *
 * muted = 尚未開放 / positive = 招生中 / warning = 已額滿 / danger = 已停課
 * closed = 報名截止 / registered = 已報名。
 */
.course-status--muted {
    color: var(--action-disabled-text);
    background: var(--action-disabled-bg);
}

.course-status--positive {
    color: var(--status-positive-text);
    background: transparent;
}

.course-status--warning {
    color: var(--status-warning-text);
    background: transparent;
}

.course-status--danger {
    color: var(--status-danger-text);
    background: transparent;
}

.course-status--closed {
    color: var(--ds-neutral-lightest);
    background: transparent;
}

.course-status--registered {
    color: var(--status-registered-text);
    background: transparent;
}

.pill--muted {
    color: var(--status-muted-text);
    background: var(--status-muted-bg);
}

.pill--positive {
    color: var(--status-positive-text);
    background: var(--status-positive-bg);
}

.pill--warning {
    color: var(--status-warning-text);
    background: var(--status-warning-bg);
}

.pill--danger {
    color: var(--status-danger-text);
    background: var(--status-danger-bg);
}

.pill--closed {
    color: var(--status-closed-text);
    background: var(--status-closed-bg);
}

.pill--registered {
    color: var(--status-registered-text);
    background: var(--status-registered-bg);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.pagination__page,
.pagination__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 4px 8px;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    background: var(--ds-neutral-white);
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
}

    .pagination__page:hover:not(.is-active),
    .pagination__page:focus-visible:not(.is-active),
    .pagination__control:hover:not(.is-disabled),
    .pagination__control:focus-visible:not(.is-disabled) {
        color: var(--ds-primary-default);
    }

    .pagination__page.is-active,
    .pagination__page[aria-current="page"] {
        color: var(--ds-neutral-white);
        background: var(--ds-primary-default);
        cursor: default;
    }

.pagination__control {
    gap: 4px;
    min-width: 104px !important;
    padding-inline: 16px !important;
    color: var(--ds-primary-default) !important;
    border-color: var(--ds-primary-default) !important;
    border-radius: 6px !important;
}

.pagination__control-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}

.pagination__control--prev .pagination__control-icon {
    transform: rotate(90deg);
}

.pagination__control--next .pagination__control-icon {
    transform: rotate(-90deg);
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.pagination__control.is-disabled,
.pagination__control[aria-disabled="true"] {
    color: var(--ds-neutral-pale) !important;
    background: var(--ds-neutral-white) !important;
    border-color: var(--ds-neutral-pale) !important;
    cursor: not-allowed;
    pointer-events: none;
}

    .pagination__control.is-disabled .pagination__control-icon,
    .pagination__control[aria-disabled="true"] .pagination__control-icon {
        filter: grayscale(1);
        opacity: .31;
    }

@media (max-width: 768px) {
    .pagination {
        gap: 8px;
        margin-top: 32px;
    }

    .pagination__pages {
        gap: 4px;
    }

    .pagination__page,
    .pagination__control {
        min-width: 32px;
        height: 32px;
        padding: 4px;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }

    .pagination__page {
        border-radius: 16px;
    }

    .pagination__ellipsis {
        width: 32px;
        height: 32px;
        font-size: 14px;
        line-height: 20px;
    }

    .pagination__control {
        min-width: 32px !important;
        width: 32px;
        padding: 4px !important;
    }

    .pagination__control-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .pagination__label {
        display: none;
    }
}

@media (max-width: 1100px) {
    .course-catalog__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .course-catalog__inner {
        width: 100%;
        padding: 16px 20px 32px;
    }

    .course-catalog__breadcrumbs {
        margin-bottom: 28px;
    }

    .course-catalog__title {
        margin-bottom: 20px;
        font-size: 20px;
        line-height: 32px;
    }

    .course-category-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 12px;
        padding-bottom: 24px;
        overflow: visible;
        border-bottom-width: 1px;
    }

    .course-category-tab {
        min-width: 0;
        width: 100%;
        height: 44px;
        gap: 4px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 20px;
        box-shadow: 0 4px 15px rgba(59,66,70,.12);
    }

    .course-category-tab__icon {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .course-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin: 32px 0 20px;
    }

    .course-filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .course-result-count {
        align-self: flex-start;
    }

    .course-catalog__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .course-card {
        min-height: 0;
        padding: 24px 0;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

        .course-card:first-child {
            padding-top: 4px;
        }

    .course-card__media {
        position: absolute;
        top: 24px;
        left: 0;
        width: 130px;
        height: 73px !important;
        border-radius: 8px;
    }

    .course-card:first-child .course-card__media {
        top: 4px;
    }

    .course-card__media img {
        border-radius: 8px;
    }

    .course-card__promo-tag {
        padding: 2px 8px;
        font-size: 12px;
        line-height: 16px;
        border-radius: 8px 0 8px 0;
    }

    .course-card .course-card__category-tag {
        margin: 0 0 2px 146px;
        padding: 0;
        min-height: 18px;
        font-size: 12px;
        line-height: 16px;
        border-radius: 0;
    }

    .course-card__body {
        min-height: 121px;
        padding: 0 0 0 146px !important;
        gap: 4px !important;
    }

    .course-card__title {
        min-height: 0 !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .course-card__info {
        gap: 2px !important;
    }

    .course-card__info-row,
    .course-card__session {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .course-card__info-icon {
        flex-basis: 14px;
        width: 14px;
        height: 14px;
    }

    .course-card .btn,
    .course-card .course-status {
        min-height: 32px;
        height: 32px;
        margin-top: auto;
    }

    .course-card__deadline {
        justify-content: flex-start;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
    }

    .course-card--detailed {
        min-height: 0;
    }

        .course-card--detailed .course-card__body {
            min-height: 143px;
        }

        .course-card--detailed .course-card__title {
            font-size: 14px !important;
            line-height: 20px !important;
        }

    .pagination {
        gap: 8px;
        margin-top: 32px;
    }

    .pagination__pages {
        gap: 4px;
    }

    .pagination button {
        min-width: 32px;
        height: 32px;
        padding: 4px;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
    }

    .pagination__page {
        border-radius: 16px;
    }

    .pagination__ellipsis {
        width: 32px;
        height: 32px;
        font-size: 14px;
        line-height: 20px;
    }

    .pagination__control {
        min-width: 32px !important;
        width: 32px;
        padding: 4px !important;
    }

    .pagination__control-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .pagination__label {
        display: none;
    }
}

@media (max-width: 390px) {
    .course-category-tabs {
        gap: 12px 8px;
    }

    .course-category-tab {
        padding-inline: 4px;
        font-size: 12px;
    }
}

/* opening-search card hierarchy follows the 1634:70178 Figma variants.
   Actionable courses retain the full primary CTA; non-action states use less
   color and vertical space so users can scan available courses first. */
.page-course-sessions .course-card--detailed {
    min-height: 448px;
}

    .page-course-sessions .course-card--detailed > .course-card__category-tag {
        min-height: 40px;
        margin-top: 0;
        padding-top: 12px;
        padding-bottom: 0;
    }

    .page-course-sessions .course-card--detailed .course-card__body {
        min-height: 246px;
        gap: 12px;
        padding: 8px 20px 20px;
    }

    .page-course-sessions .course-card--detailed .course-card__info {
        gap: 8px;
    }

    .page-course-sessions .course-card--detailed .course-card__info-row {
        gap: 4px;
        color: var(--ds-neutral-light);
        font-size: 14px;
        line-height: 20px;
    }

    .page-course-sessions .course-card--detailed .course-card__action {
        min-height: 32px;
        margin-top: auto;
        font-weight: 600;
        box-shadow: none;
    }

        .page-course-sessions .course-card--detailed .course-card__action:hover,
        .page-course-sessions .course-card--detailed .course-card__action:focus-visible {
            background: var(--ds-primary-dark);
        }

.page-course-sessions .course-card__deadline {
    min-height: 18px;
    justify-content: center;
    gap: 4px;
    color: #00858f;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.page-course-sessions .course-card--status-upcoming .course-card__deadline {
    color: var(--ds-neutral-lightest);
}

@media (max-width: 768px) {
    .page-course-sessions .course-card--detailed > .course-card__category-tag {
        min-height: 18px;
        margin: 0 0 2px 146px;
        padding: 0;
    }

    .page-course-sessions .course-card--detailed .course-card__body {
        min-height: 143px;
        gap: 4px;
        padding: 0 0 0 146px;
    }

    .page-course-sessions .course-card--detailed .course-card__info {
        gap: 2px;
    }

    .page-course-sessions .course-card--detailed .course-card__info-row {
        font-size: 12px;
        line-height: 16px;
    }

    .page-course-sessions .course-card--detailed .course-card__action,
    .page-course-sessions .course-card--detailed .course-status {
        min-height: 32px;
        height: 32px;
    }

    .page-course-sessions .course-card__deadline {
        justify-content: flex-start;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
    }
}

/* Fine-tune the title/session grouping and non-action vertical rhythm. */
.page-course-sessions .course-card--detailed .course-card__session {
    margin-top: -8px;
    color: var(--ds-neutral-light);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-course-sessions .course-card--status-full .course-card__body,
.page-course-sessions .course-card--status-closed .course-card__body,
.page-course-sessions .course-card--status-registration-closed .course-card__body {
    padding-bottom: 32px;
}

@media (max-width: 768px) {
    .page-course-sessions .course-card--detailed {
        min-height: 0;
    }

        .page-course-sessions .course-card--detailed .course-card__session {
            margin-top: 0;
            font-size: 12px;
            line-height: 16px;
        }

    .page-course-sessions .course-card--status-full .course-card__body,
    .page-course-sessions .course-card--status-closed .course-card__body,
    .page-course-sessions .course-card--status-registration-closed .course-card__body {
        padding-bottom: 0;
    }
}

/* Figma 0804 course lists and dropdown selectors. */
.course-category-tab__icon {
    overflow: hidden;
    background: transparent;
}

    .course-category-tab__icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.course-category-tab__icon--all {
    background: var(--ds-neutral-paler);
}

.course-category-tab__all-grid {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-image: radial-gradient(circle, #9da3a7 1.5px, transparent 1.7px);
    background-position: 1px 1px;
    background-size: 6px 6px;
}


.page-course-overview .course-card--compact {
    min-height: 390px;
}

    .page-course-overview .course-card--compact .course-card__media {
        height: 162px;
    }

    .page-course-overview .course-card--compact > .course-card__category-tag {
        min-height: 40px;
        margin-top: 0;
        padding-top: 12px;
        padding-bottom: 0;
    }

    .page-course-overview .course-card--compact .course-card__body {
        min-height: 188px;
        gap: 12px;
        padding: 8px 20px 20px;
    }

    .page-course-overview .course-card--compact .btn {
        height: 32px;
        min-height: 32px;
    }

.course-status__icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

@media (max-width: 768px) {
    .course-category-tab__all-grid {
        width: 12px;
        height: 12px;
        background-position: 0 0;
        background-size: 4px 4px;
    }

    .page-course-overview .course-card--compact {
        min-height: 154px;
        height: 154px;
        padding: 0;
    }

        .page-course-overview .course-card--compact:first-child {
            padding-top: 0;
        }

            .page-course-overview .course-card--compact .course-card__media,
            .page-course-overview .course-card--compact:first-child .course-card__media {
                top: 16px;
            }

        .page-course-overview .course-card--compact > .course-card__category-tag {
            min-height: 18px;
            margin: 18px 0 2px 146px;
            padding: 0;
        }

        .page-course-overview .course-card--compact .course-card__body {
            min-height: 121px;
            padding: 0 0 0 146px;
        }
}

/* Keep course overview cards vertically consistent without changing search or session cards. */
@media (min-width: 769px) {
    .page-course-overview .course-card--compact {
        display: flex;
        height: 390px;
        min-height: 390px;
        flex-direction: column;
    }

        .page-course-overview .course-card--compact .course-card__media,
        .page-course-overview .course-card--compact > .course-card__category-tag {
            flex: 0 0 auto;
        }

        .page-course-overview .course-card--compact .course-card__body {
            flex: 1 1 auto;
            min-height: 188px;
        }

        .page-course-overview .course-card--compact .course-card__info {
            min-height: 48px;
        }

        .page-course-overview .course-card--compact .btn {
            margin-top: auto;
        }
}

/* ===== SEARCH RESULTS ===== */
.page-search-results main {
    min-height: 616px;
    background: var(--ds-neutral-white);
}

.page-search-results.has-search-results main {
    min-height: 856px;
}

.search-results-page {
    padding-top: 24px;
    padding-bottom: 40px;
}

.search-results-breadcrumb__arrow {
    color: #7c889f;
    font-size: 18px;
    line-height: 18px;
}

.search-results-page > h1 {
    margin: 40px 0 24px;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

.search-results-form {
    width: 100%;
}

.search-results-form__hint[hidden] {
    display: none;
}

.search-results-idle-keywords {
    margin-top: 24px;
}

    .search-results-idle-keywords[hidden] {
        display: none;
    }

.search-results-section {
    padding-top: 24px;
}

    .search-results-section[hidden] {
        display: none;
    }

    .search-results-section > h2 {
        margin: 0 0 24px;
        color: var(--ds-neutral-default);
        font-family: var(--font-sans);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

        .search-results-section > h2 mark {
            color: var(--ds-primary-dark);
            background: transparent;
        }

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
}

    .search-results-grid[hidden],
    .search-results-grid .course-card[hidden] {
        display: none;
    }

    .search-results-grid .course-card {
        display: flex;
        flex-direction: column;
        width: auto;
        min-width: 0;
        height: 448px;
        min-height: 448px;
    }

    .search-results-grid .course-card__media {
        height: 162px;
    }

    .search-results-grid .course-card__promo-tag {
        min-height: 24px;
        line-height: 16px;
    }

    .search-results-grid .course-card > .course-card__category-tag {
        min-height: 28px;
        margin-top: 12px;
    }

    .search-results-grid .course-card--detailed .course-card__body {
        flex: 1 1 auto;
        gap: 12px;
        min-height: 0;
        padding: 8px 20px 20px;
    }

.search-course-card__titles {
    display: flex;
    flex: 0 0 56px;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.search-results-grid .course-card__title {
    width: 100%;
    height: 28px;
    min-height: 28px;
    margin: 0;
    overflow: hidden;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results-grid .course-card__session {
    width: 100%;
    height: 24px;
    margin: 0;
    overflow: hidden;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results-grid .course-card__info {
    gap: 8px;
}

.search-results-grid .course-card__info-row {
    gap: 4px;
    min-width: 0;
    color: var(--ds-neutral-light);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}

.search-card-label {
    flex: 0 0 auto;
}

.search-course-card__state {
    display: flex;
    flex: 0 0 62px;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 62px;
    margin-top: auto;
}

.search-course-card__state--open,
.search-course-card__state--upcoming {
    gap: 12px;
}

.search-course-card__state--full {
    align-items: center;
    justify-content: center;
}

.search-results-grid .course-card__action,
.search-results-grid .course-status {
    width: 100%;
    min-height: 32px;
    height: 32px;
    margin: 0;
}

.search-results-grid .course-card__deadline {
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin: 0;
    color: #00858f;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.search-results-grid .search-course-card--upcoming .course-card__deadline {
    color: var(--ds-neutral-lightest);
}

.search-results-empty {
    display: flex;
    height: 264px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 64px 24px;
    text-align: center;
    background: var(--ds-neutral-palest);
}

    .search-results-empty[hidden] {
        display: none;
    }

.page-search-results.has-search-empty .search-results-section > h2 {
    margin-bottom: 40px;
}

.search-results-empty h3 {
    margin: 0 0 16px;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
}

.search-results-empty p {
    margin: 0 0 24px;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.search-results-empty .btn {
    min-width: 112px;
}

.search-results-pagination[hidden] {
    display: none;
}

.search-results-pagination {
    gap: 20px;
    margin-top: 56px;
}

    .search-results-pagination .pagination__control {
        min-width: 104px !important;
    }

@media (max-width: 1100px) {
    .search-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .search-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-search-results main {
        min-height: 520px;
    }

    .page-search-results.has-search-results main {
        min-height: 858px;
    }

    .search-results-page {
        width: 100%;
        padding: 16px 20px 0;
    }

        .search-results-page > h1 {
            margin: 24px 0 24px;
            font-size: 20px;
            line-height: 32px;
        }

    .search-results-section {
        padding-top: 16px;
    }

        .search-results-section > h2 {
            margin-bottom: 8px;
            font-size: 18px;
            line-height: 28px;
        }

    .page-search-results.has-search-empty .search-results-section > h2 {
        margin-bottom: 16px;
    }

    .search-results-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .search-results-grid .course-card {
            position: relative;
            display: block;
            width: 100%;
            height: 182px;
            min-height: 182px;
            padding: 0;
            overflow: hidden;
            border-bottom: 1px solid var(--ds-neutral-paler);
            border-radius: 0;
            box-shadow: none;
        }

        .search-results-grid .course-card__media {
            position: absolute;
            top: 16px;
            left: 0;
            width: 130px;
            height: 73px;
            border-radius: 8px;
        }

            .search-results-grid .course-card__media img {
                border-radius: 8px;
            }

        .search-results-grid .course-card__promo-tag {
            min-height: 28px;
            padding: 4px 12px;
            font-size: 14px;
            line-height: 20px;
            border-radius: 8px 0 8px 0;
        }

        .search-results-grid .course-card > .course-card__category-tag {
            position: absolute;
            top: 18px;
            left: 146px;
            z-index: 2;
            min-height: 20px;
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            border-radius: 0;
        }

        .search-results-grid .course-card--detailed .course-card__body {
            position: static;
            display: block;
            padding: 0;
        }

    .search-course-card__titles {
        position: static;
    }

    .search-results-grid .course-card__title {
        position: absolute;
        top: 44px;
        left: 146px;
        width: 144px;
        height: 28px;
        min-height: 28px;
        font-size: 18px;
        line-height: 28px;
    }

    .search-results-grid .course-card__session {
        position: absolute;
        top: 72px;
        left: 146px;
        width: 189px;
        height: 24px;
        font-size: 14px;
        line-height: 20px;
    }

    .search-results-grid .course-card__info {
        position: absolute;
        top: 97px;
        left: 0;
        gap: 4px;
        width: 130px;
    }

    .search-results-grid .course-card__info-row {
        gap: 4px;
        overflow: hidden;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-results-grid .search-card-label {
        display: none;
    }

    .search-results-grid .course-card__info-icon {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
    }

    .search-course-card__state {
        position: absolute;
        top: 104px;
        right: 0;
        display: flex;
        width: 189px;
        height: 56px;
        min-height: 56px;
        margin: 0;
    }

    .search-course-card__state--open,
    .search-course-card__state--upcoming {
        gap: 8px;
    }

    .search-results-grid .course-card__action,
    .search-results-grid .course-status {
        width: 189px;
        min-height: 32px;
        height: 32px;
    }

    .search-results-grid .course-card__deadline {
        justify-content: center;
        width: 189px;
        font-size: 14px;
        line-height: 20px;
    }

    .search-results-pagination {
        gap: 8px;
        margin-top: 32px;
        margin-bottom: 32px;
    }

        .search-results-pagination .pagination__control {
            min-width: 32px !important;
            width: 32px;
        }

    .search-results-empty {
        width: 100%;
        height: 264px;
        padding: 64px 15px;
    }

        .search-results-empty h3 {
            margin-bottom: 16px;
            font-size: 20px;
            line-height: 32px;
        }

        .search-results-empty p {
            margin-bottom: 24px;
            font-size: 16px;
            line-height: 24px;
            white-space: nowrap;
        }
}

@media (max-width: 360px) {
    .search-results-empty p {
        white-space: normal;
    }

    .search-results-grid .course-card__title {
        width: calc(100% - 166px);
    }

    .search-results-grid .course-card__session,
    .search-course-card__state {
        width: calc(100% - 146px);
    }

    .search-results-grid .course-card__action,
    .search-results-grid .course-status,
    .search-results-grid .course-card__deadline {
        width: 100%;
    }
}

/* ===== COURSE STATUS CARD ===== */
/* shared course-status card
   Used by both 開課查詢 and 搜尋結果; desktop node 1816:126602,
   mobile node 1829:82123. */
.page-course-sessions .course-status-card,
.page-search-results .search-results-grid .course-status-card {
    position: relative;
    display: flex;
    width: 100%;
    height: 448px;
    min-height: 448px;
    flex-direction: column;
    overflow: hidden;
    color: var(--ds-neutral-default);
    background: var(--ds-neutral-white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(59, 66, 70, .15);
}

    .page-course-sessions .course-status-card .course-card__media,
    .page-search-results .search-results-grid .course-status-card .course-card__media {
        position: relative;
        width: 100%;
        height: 162px;
        flex: 0 0 162px;
        overflow: hidden;
        border-radius: 12px 12px 0 0;
    }

        .page-course-sessions .course-status-card .course-card__media img,
        .page-search-results .search-results-grid .course-status-card .course-card__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: bottom;
            border-radius: 12px 12px 0 0;
        }

    .page-course-sessions .course-status-card .course-card__promo-tag,
    .page-search-results .search-results-grid .course-status-card .course-card__promo-tag {
        min-height: 28px;
        padding: 4px 16px;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        border-radius: 12px 0 12px 0;
    }

    .page-course-sessions .course-status-card > .course-status-card__category,
    .page-search-results .search-results-grid .course-status-card > .course-status-card__category {
        display: flex;
        width: 100%;
        height: 40px;
        min-height: 40px;
        align-items: center;
        margin: 0;
        padding: 12px 24px 8px 20px;
        color: var(--ds-primary-dark);
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        border-radius: 0;
        background: transparent;
    }

    .page-course-sessions .course-status-card .course-card__body,
    .page-search-results .search-results-grid .course-status-card .course-card__body {
        display: flex;
        width: 100%;
        height: 246px;
        min-height: 246px;
        flex: 0 0 246px;
        flex-direction: column;
        gap: 12px;
        padding: 8px 20px 20px;
    }

.course-status-card__titles {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    flex: 0 0 56px;
    flex-direction: column;
    gap: 4px;
}

.page-course-sessions .course-status-card .course-card__title,
.page-search-results .search-results-grid .course-status-card .course-card__title {
    width: 100%;
    height: 28px;
    min-height: 28px;
    margin: 0;
    overflow: hidden;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-course-sessions .course-status-card .course-card__session,
.page-search-results .search-results-grid .course-status-card .course-card__session {
    display: block;
    width: 100%;
    height: 24px;
    min-height: 24px;
    margin: 0;
    overflow: hidden;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-course-sessions .course-status-card .course-status-card__subtitle,
.page-search-results .search-results-grid .course-status-card .course-status-card__subtitle {
    display: block;
    width: 100%;
    height: 24px;
    min-height: 24px;
    margin: 0;
    overflow: hidden;
    color: var(--ds-primary-bright);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-course-sessions .course-status-card .course-card__info,
.page-search-results .search-results-grid .course-status-card .course-card__info {
    display: flex;
    width: 100%;
    height: 76px;
    min-height: 76px;
    flex: 0 0 76px;
    flex-direction: column;
    gap: 8px;
}

.page-course-sessions .course-status-card .course-card__info-row,
.page-search-results .search-results-grid .course-status-card .course-card__info-row {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 20px;
    align-items: center;
    gap: 4px;
    margin: 0;
    overflow: hidden;
    color: var(--ds-neutral-light);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-status-card__label {
    flex: 0 0 auto;
}

.page-course-sessions .course-status-card .course-card__info-icon,
.page-search-results .search-results-grid .course-status-card .course-card__info-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    -webkit-mask-image: none;
    mask-image: none;
}

.page-course-sessions .course-status-card .course-card__info-icon--calendar,
.page-search-results .search-results-grid .course-status-card .course-card__info-icon--calendar {
    background-image: url('../../assets/icons/course-calendar.svg');
}

.page-course-sessions .course-status-card .course-card__info-icon--location,
.page-search-results .search-results-grid .course-status-card .course-card__info-icon--location {
    background-image: url('../../assets/icons/course-location.svg');
}

.page-course-sessions .course-status-card .course-card__info-icon--sales,
.page-course-sessions .course-status-card .course-card__info-icon--teacher,
.page-search-results .search-results-grid .course-status-card .course-card__info-icon--sales,
.page-search-results .search-results-grid .course-status-card .course-card__info-icon--teacher {
    background-image: url('../../assets/icons/course-sales.svg');
}

.page-course-sessions .course-status-card .course-card__info-icon--clock,
.page-search-results .search-results-grid .course-status-card .course-card__info-icon--clock {
    color: inherit;
    background-color: currentColor;
    background-image: none;
    -webkit-mask-image: url('../../assets/icons/course-time.svg');
    mask-image: url('../../assets/icons/course-time.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.course-status-card__state {
    display: flex;
    width: 100%;
    height: 62px;
    min-height: 62px;
    flex: 0 0 62px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
}

.course-status-card__state--open,
.course-status-card__state--upcoming {
    gap: 12px;
}

.course-status-card__state--registered,
.course-status-card__state--full,
.course-status-card__state--closed,
.course-status-card__state--registration-closed,
.course-status-card__state--canceled {
    justify-content: center;
}

.course-status-card__state > .course-card__action,
.course-status-card__state > .course-status {
    order: 0;
}

.course-status-card__state > .course-card__deadline {
    order: 1;
}

.page-course-sessions .course-status-card .course-card__action,
.page-course-sessions .course-status-card .course-status,
.page-search-results .search-results-grid .course-status-card .course-card__action,
.page-search-results .search-results-grid .course-status-card .course-status {
    width: 100%;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 4px 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

.page-course-sessions .course-status-card .course-card__deadline,
.page-search-results .search-results-grid .course-status-card .course-card__deadline {
    display: flex;
    width: 100%;
    min-height: 18px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    color: #00858f;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.course-status-card--upcoming .course-card__deadline {
    color: var(--ds-neutral-lightest) !important;
}

.course-status-card--upcoming .course-card__info-icon--clock {
    filter: none;
    opacity: 1;
}
/*
 * Query/session list terminal states follow Figma CourseStatusCard: centered semantic text only,
 * no filled background. `.pill--*` keeps its independent filled badge treatment on course-detail.
 */
.page-course-sessions .course-status-card .course-status--registered,
.page-search-results .search-results-grid .course-status-card .course-status--registered,
.page-course-sessions .course-status-card .course-status--warning,
.page-search-results .search-results-grid .course-status-card .course-status--warning,
.page-course-sessions .course-status-card .course-status--closed,
.page-search-results .search-results-grid .course-status-card .course-status--closed,
.page-course-sessions .course-status-card .course-status--danger,
.page-search-results .search-results-grid .course-status-card .course-status--danger,
.page-course-sessions .course-status-card .course-status--positive,
.page-search-results .search-results-grid .course-status-card .course-status--positive {
    height: 28px;
    min-height: 28px;
}

@media (max-width: 768px) {
    .page-course-sessions .course-catalog__grid .course-status-card,
    .page-search-results .search-results-grid .course-status-card {
        position: relative;
        display: block;
        width: 100%;
        height: 182px;
        min-height: 182px;
        padding: 0;
        overflow: hidden;
        background: var(--ds-neutral-white);
        border-bottom: 1px solid var(--ds-neutral-paler);
        border-radius: 0;
        box-shadow: none;
    }

        .page-course-sessions .course-catalog__grid .course-status-card:first-child {
            padding-top: 0;
        }

        .page-course-sessions .course-status-card .course-card__media,
        .page-course-sessions .course-status-card:first-child .course-card__media,
        .page-search-results .search-results-grid .course-status-card .course-card__media {
            position: absolute;
            top: 16px;
            left: 0;
            width: 130px;
            height: 73px;
            min-height: 73px;
            overflow: hidden;
            border-radius: 8px;
        }

            .page-course-sessions .course-status-card .course-card__media img,
            .page-search-results .search-results-grid .course-status-card .course-card__media img {
                border-radius: 8px;
            }

        .page-course-sessions .course-status-card .course-card__promo-tag,
        .page-search-results .search-results-grid .course-status-card .course-card__promo-tag {
            min-height: 26px;
            padding: 4px 12px;
            font-size: 12px;
            line-height: 16px;
            border-radius: 8px 0 8px 0;
        }

        .page-course-sessions .course-status-card > .course-status-card__category,
        .page-search-results .search-results-grid .course-status-card > .course-status-card__category {
            position: absolute;
            top: 18px;
            left: 146px;
            z-index: 2;
            display: block;
            width: auto;
            height: 18px;
            min-height: 18px;
            margin: 0;
            padding: 0;
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            border-radius: 0;
        }

        .page-course-sessions .course-status-card .course-card__body,
        .page-search-results .search-results-grid .course-status-card .course-card__body {
            position: static;
            display: block;
            width: 100%;
            height: 182px;
            min-height: 182px;
            padding: 0;
        }

    .course-status-card__titles {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .page-course-sessions .course-status-card .course-card__title,
    .page-search-results .search-results-grid .course-status-card .course-card__title {
        position: absolute;
        top: 44px;
        left: 146px;
        width: calc(100% - 146px);
        height: 28px;
        min-height: 28px;
        font-size: 18px;
        line-height: 28px;
    }

    .page-course-sessions .course-status-card .course-card__session,
    .page-search-results .search-results-grid .course-status-card .course-card__session {
        position: absolute;
        top: 72px;
        left: 146px;
        display: block;
        width: 189px;
        height: 24px;
        min-height: 24px;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .page-course-sessions .course-status-card .course-status-card__subtitle,
    .page-search-results .search-results-grid .course-status-card .course-status-card__subtitle {
        position: absolute;
        top: 72px;
        left: 146px;
        display: block;
        width: 189px;
        height: 24px;
        min-height: 24px;
        margin: 0;
        color: var(--ds-primary-bright);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-course-sessions .course-status-card .course-card__info,
    .page-search-results .search-results-grid .course-status-card .course-card__info {
        position: absolute;
        top: 97px;
        left: 0;
        display: flex;
        width: 130px;
        height: 62px;
        min-height: 62px;
        flex-direction: column;
        gap: 4px;
    }

    .page-course-sessions .course-status-card .course-card__info-row,
    .page-search-results .search-results-grid .course-status-card .course-card__info-row {
        width: 130px;
        height: 18px;
        min-height: 18px;
        gap: 4px;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-status-card__label {
        display: none;
    }

    .page-course-sessions .course-status-card .course-card__info-icon,
    .page-search-results .search-results-grid .course-status-card .course-card__info-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        background-size: 16px 16px;
    }

    .page-course-sessions .course-status-card .course-status-card__state,
    .page-search-results .search-results-grid .course-status-card .course-status-card__state {
        position: absolute;
        top: 104px;
        right: 0;
        display: flex;
        width: 189px;
        height: 56px;
        min-height: 56px;
        margin: 0;
    }

    .course-status-card__state--open,
    .course-status-card__state--upcoming {
        gap: 8px;
    }

    .page-course-sessions .course-status-card .course-card__action,
    .page-course-sessions .course-status-card .course-status,
    .page-search-results .search-results-grid .course-status-card .course-card__action,
    .page-search-results .search-results-grid .course-status-card .course-status {
        width: 189px;
        height: 32px;
        min-height: 32px;
        font-size: 14px;
        line-height: 20px;
    }

    .page-course-sessions .course-status-card .course-card__deadline,
    .page-search-results .search-results-grid .course-status-card .course-card__deadline {
        width: 189px;
        min-height: 18px;
        justify-content: center;
        font-size: 12px;
        line-height: 16px;
    }
}

@media (max-width: 360px) {
    .page-course-sessions .course-status-card .course-status-card__subtitle,
    .page-search-results .search-results-grid .course-status-card .course-status-card__subtitle {
        width: calc(100% - 146px);
    }

    .page-course-sessions .course-status-card .course-card__session,
    .page-course-sessions .course-status-card .course-status-card__state,
    .page-search-results .search-results-grid .course-status-card .course-card__session,
    .page-search-results .search-results-grid .course-status-card .course-status-card__state {
        width: calc(100% - 146px);
    }

    .page-course-sessions .course-status-card .course-card__action,
    .page-course-sessions .course-status-card .course-status,
    .page-course-sessions .course-status-card .course-card__deadline,
    .page-search-results .search-results-grid .course-status-card .course-card__action,
    .page-search-results .search-results-grid .course-status-card .course-status,
    .page-search-results .search-results-grid .course-status-card .course-card__deadline {
        width: 100%;
    }
}

/* ===== REGISTRATION AND MY COURSES ===== */
/* Registration flow, my courses and registration detail — Figma nodes 1836:106795 / 1836:98378. */
.page-registration,
.page-registration-confirm,
.page-registration-complete,
.page-mycourse-list,
.page-mycourse-detail {
    background: var(--ds-neutral-white);
}

.flow-main,
.mycourse-list-page,
.mycourse-detail-page {
    min-height: 720px;
    color: var(--ds-neutral-default);
}

.flow-hero,
.texture-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 0 40px;
    background: linear-gradient(180deg, var(--ds-neutral-white) 0%, var(--ds-neutral-white) 52%, #f2fbff 100%);
}

    .flow-hero::after,
    .texture-hero::after {
        position: absolute;
        right: -90px;
        bottom: -150px;
        width: 460px;
        height: 340px;
        content: "";
        transform: rotate(-18deg);
        border-radius: 48%;
        background: linear-gradient(145deg, rgba(0,153,224,.13), rgba(0,111,188,.02) 58%, transparent 60%);
        pointer-events: none;
    }

    .flow-hero .container,
    .texture-hero .container {
        position: relative;
        z-index: 1;
    }

    .flow-hero .page-breadcrumbs,
    .texture-hero .page-breadcrumbs {
        margin-bottom: 24px;
    }

    .flow-hero h1,
    .texture-hero h1 {
        margin: 0;
        color: #131a34;
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
    }

.flow-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(760px, 100%);
    margin: 32px auto 0;
    padding: 0;
    list-style: none;
}

    .flow-progress li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: var(--ds-neutral-lightest);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
    }

        .flow-progress li:not(:last-child)::after {
            position: absolute;
            z-index: -1;
            top: 19px;
            left: calc(50% + 24px);
            width: calc(100% - 48px);
            height: 2px;
            content: "";
            background: var(--ds-neutral-pale);
        }

        .flow-progress li.is-done:not(:last-child)::after,
        .flow-progress li.is-active:not(:last-child)::after {
            background: var(--ds-primary-default);
        }

    .flow-progress b {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        border: 2px solid var(--ds-neutral-pale);
        border-radius: 50%;
        background: var(--ds-neutral-white);
    }

    .flow-progress .is-active,
    .flow-progress .is-done {
        color: var(--ds-primary-dark);
    }

        .flow-progress .is-active b,
        .flow-progress .is-done b {
            color: var(--ds-neutral-white);
            border-color: var(--ds-primary-default);
            background: var(--ds-primary-default);
        }

.flow-content {
    position: relative;
    z-index: 2;
    padding: 32px 0 80px;
}

.flow-course-card,
.flow-card,
.registration-completion,
.registered-course-card {
    border-radius: 12px;
    background: var(--ds-neutral-white);
    box-shadow: 0 4px 15px rgba(19,26,52,.05);
}

.flow-course-card {
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--ds-neutral-paler);
}

.flow-course-card__summary {
    display: grid;
    grid-template-columns: 206px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 148px;
    padding: 16px;
}

    .flow-course-card__summary > img {
        width: 206px;
        height: 116px;
        object-fit: cover;
        border-radius: 12px;
    }

    .flow-course-card__summary h2 {
        margin: 0 0 4px;
        color: var(--ds-primary-dark);
        font-size: 24px;
        font-weight: 600;
        line-height: 36px;
    }

    .flow-course-card__summary strong {
        display: block;
        color: var(--ds-primary-bright);
        font-size: 18px;
        line-height: 28px;
    }

    .flow-course-card__summary p {
        margin: 4px 0 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .flow-course-card__summary button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        color: var(--ds-primary-default);
        font-weight: 600;
        border: 1px solid var(--ds-primary-default);
        border-radius: 6px;
        background: var(--ds-neutral-white);
        cursor: pointer;
    }

        .flow-course-card__summary button span {
            transition: transform .2s;
        }

.flow-course-card.is-open .flow-course-card__summary button span {
    transform: rotate(180deg);
}

.flow-course-card__details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid #dce7ef;
    background: var(--ds-bg-pale-blue);
}

    .flow-course-card__details div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .flow-course-card__details b {
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        line-height: 16px;
    }

    .flow-course-card__details span {
        color: var(--ds-neutral-default);
        font-size: 14px;
        line-height: 20px;
    }

.flow-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.flow-card {
    overflow: hidden;
    border: 1px solid var(--ds-neutral-paler);
}

    .flow-card > header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 24px;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

        .flow-card > header > span {
            display: grid;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            place-items: center;
            color: var(--ds-neutral-white);
            font-size: 14px;
            font-weight: 600;
            border-radius: 50%;
            background: var(--ds-primary-default);
        }

        .flow-card > header h2 {
            flex: 1;
            margin: 0;
            color: var(--ds-primary-dark);
            font-size: 20px;
            font-weight: 600;
            line-height: 32px;
        }

.flow-card__with-action > button {
    padding: 8px 12px;
    color: var(--ds-primary-default);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--ds-primary-default);
    border-radius: 6px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .flow-card__with-action > button:disabled {
        color: var(--ds-neutral-lightest);
        border-color: var(--ds-neutral-pale);
        cursor: not-allowed;
    }

.flow-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 24px;
}
/* Shared form controls moved to css/components.css (Figma 2163:80768). */
.companion-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 24px 24px;
}

.companion-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    padding: 16px;
    border-radius: 8px;
    background: var(--ds-bg-pale-blue);
}

.companion-row__remove {
    height: 40px;
    padding: 0 12px;
    color: var(--ds-danger-default);
    border: 1px solid var(--ds-danger-default);
    border-radius: 6px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

.terms-card .terms-scroll {
    height: 168px;
    margin: 24px 24px 0;
    padding: 20px;
    overflow: auto;
    color: var(--ds-neutral-light);
    font-size: 14px;
    line-height: 20px;
    border: 1px solid var(--ds-neutral-pale);
    border-radius: 8px;
    background: var(--ds-bg-pale-grey);
}

.terms-scroll h3 {
    margin-bottom: 12px;
    color: var(--ds-neutral-default);
    font-size: 16px;
}

.terms-scroll p:last-child {
    margin-bottom: 0;
}

.terms-scroll-button {
    align-self: center;
    margin: 12px auto 0;
    padding: 6px 12px;
    color: var(--ds-primary-default);
    font-size: 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
}

.terms-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px 24px;
}

    .terms-checks label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        line-height: 20px;
    }

    .terms-checks input:not(.form-checkbox__input) {
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
        accent-color: var(--ds-primary-default);
    }

.flow-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

    .flow-actions .btn {
        min-width: 180px;
    }

.otp-dialog {
    width: min(480px, calc(100% - 40px));
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 56px rgba(19,26,52,.22);
}

    .otp-dialog::backdrop {
        background: rgba(19,26,52,.45);
    }

.otp-dialog__surface {
    padding: 24px;
}

.otp-dialog__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

    .otp-dialog__header h2 {
        margin: 0;
        font-size: 20px;
    }

    .otp-dialog__header button {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: var(--ds-neutral-palest);
        cursor: pointer;
    }

.otp-dialog__body {
    padding: 20px 0;
}

    .otp-dialog__body p {
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        line-height: 20px;
    }

.otp-field {
    display: block;
}

    .otp-field input {
        width: 100%;
        height: 48px;
        padding: 12px;
        letter-spacing: .5em;
        text-align: center;
        border: 1px solid var(--ds-neutral-pale);
        border-radius: 8px;
    }

.otp-dialog__hint {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: var(--ds-neutral-lightest);
    font-size: 12px;
}

.otp-resend {
    color: var(--ds-primary-default);
    border: 0;
    background: transparent;
    cursor: pointer;
}

.otp-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Confirmation and completion */
.registration-confirmation {
    padding-bottom: 24px;
}

    .registration-confirmation > h2 {
        margin: 0;
        padding: 24px;
        color: var(--ds-primary-dark);
        font-size: 20px;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

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

    .confirmation-grid section {
        padding: 20px;
        border-radius: 8px;
        background: var(--ds-bg-pale-grey);
    }

    .confirmation-grid h3 {
        margin: 0 0 16px;
        color: var(--ds-primary-dark);
        font-size: 16px;
    }

    .confirmation-grid dl {
        display: grid;
        gap: 12px;
        margin: 0;
    }

        .confirmation-grid dl > div {
            display: grid;
            grid-template-columns: 130px minmax(0, 1fr);
            gap: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--ds-neutral-paler);
        }

    .confirmation-grid dt {
        color: var(--ds-neutral-lightest);
        font-size: 14px;
    }

    .confirmation-grid dd {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 14px;
        overflow-wrap: anywhere;
    }

.flow-main--complete {
    background: linear-gradient(180deg, var(--ds-neutral-white) 0, var(--ds-neutral-white) 45%, #f2fbff 100%);
}

.registration-completion {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 48px;
    text-align: center;
    border: 1px solid var(--ds-neutral-paler);
}

.registration-completion__icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    place-items: center;
    color: var(--ds-neutral-white);
    font-size: 36px;
    border-radius: 50%;
    background: var(--ds-positive-default);
}

.registration-completion h2 {
    margin-bottom: 12px;
    color: var(--ds-primary-dark);
    font-size: 24px;
    line-height: 36px;
}

.registration-completion > p {
    max-width: 560px;
    margin: 0 auto 28px;
    color: var(--ds-neutral-lighter);
    font-size: 16px;
    line-height: 24px;
}

.registration-completion dl {
    display: grid;
    gap: 0;
    margin: 0 0 28px;
    text-align: left;
    border: 1px solid var(--ds-neutral-paler);
    border-radius: 8px;
    overflow: hidden;
}

    .registration-completion dl > div {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 16px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

        .registration-completion dl > div:last-child {
            border-bottom: 0;
        }

.registration-completion dt {
    color: var(--ds-neutral-lightest);
}

.registration-completion dd {
    margin: 0;
    font-weight: 600;
}

/* My courses */
.mycourse-list-page .texture-hero {
    padding-bottom: 32px;
}

.mycourse-filters {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .mycourse-filters::-webkit-scrollbar {
        display: none;
    }

    .mycourse-filters button {
        flex: 0 0 auto;
        min-width: 112px;
        height: 44px;
        padding: 0 16px;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 600;
        border: 1px solid var(--ds-neutral-pale);
        border-radius: 8px;
        background: var(--ds-neutral-white);
        cursor: pointer;
    }

        .mycourse-filters button:hover {
            color: var(--ds-primary-default);
            border-color: var(--ds-primary-bright);
        }

        .mycourse-filters button.is-active {
            color: var(--ds-neutral-white);
            border-color: var(--ds-primary-default);
            background: var(--ds-primary-default);
        }

.mycourse-content {
    padding: 32px 0 80px;
}

.mycourse-count {
    margin: 0 0 20px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    text-align: right;
}

    .mycourse-count b {
        color: var(--ds-neutral-default);
        font-size: 20px;
    }

.mycourse-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mycourse-row {
    display: grid;
    grid-template-columns: minmax(330px, 1.35fr) minmax(220px, .95fr) minmax(220px, .95fr) 180px;
    gap: 24px;
    align-items: center;
    min-height: 152px;
    padding: 16px;
    border: 1px solid var(--ds-neutral-paler);
    border-radius: 12px;
    background: var(--ds-neutral-white);
    box-shadow: 0 4px 15px rgba(19,26,52,.05);
}

    .mycourse-row.is-canceled {
        opacity: .68;
    }

.mycourse-row__identity {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
}

    .mycourse-row__identity img {
        width: 176px;
        height: 108px;
        object-fit: cover;
        border-radius: 8px;
    }

    .mycourse-row__identity h2 {
        margin: 0 0 4px;
        overflow: hidden;
        color: var(--ds-primary-dark);
        font-size: 20px;
        line-height: 32px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mycourse-row__identity strong {
        display: block;
        color: var(--ds-primary-bright);
        font-size: 16px;
        line-height: 24px;
    }

    .mycourse-row__identity p {
        margin: 4px 0 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        line-height: 20px;
    }

.mycourse-row__meta,
.mycourse-row__application {
    display: grid;
    gap: 8px;
    margin: 0;
}

    .mycourse-row__meta > div,
    .mycourse-row__application > div {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 8px;
    }

.mycourse-row dt {
    color: var(--ds-neutral-lightest);
    font-size: 12px;
    line-height: 16px;
}

.mycourse-row dd {
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.mycourse-row__state {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

    .mycourse-row__state .pill {
        align-self: center;
    }

.mycourse-row__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .mycourse-row__actions .btn {
        width: 100%;
        min-height: 36px;
        font-size: 14px;
        font-weight: 600;
    }

.mycourse-row__cancel {
    color: var(--ds-danger-default);
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mycourse-empty {
    padding: 64px 24px;
    text-align: center;
    border: 1px dashed var(--ds-neutral-pale);
    border-radius: 12px;
    background: var(--ds-bg-pale-grey);
}

    .mycourse-empty h2 {
        margin-bottom: 8px;
        color: var(--ds-primary-dark);
    }

    .mycourse-empty p {
        margin-bottom: 20px;
        color: var(--ds-neutral-lighter);
    }

.mycourse-content .pagination {
    margin-top: 40px;
}

.cancel-dialog {
    width: min(440px, calc(100% - 40px));
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 56px rgba(19,26,52,.22);
}

    .cancel-dialog::backdrop {
        background: rgba(19,26,52,.45);
    }

    .cancel-dialog > div {
        padding: 28px;
    }

    .cancel-dialog h2 {
        margin-bottom: 12px;
        font-size: 20px;
    }

    .cancel-dialog p {
        color: var(--ds-neutral-lighter);
        line-height: 24px;
    }

    .cancel-dialog > div > div {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
    }

/* Registration detail */
.mycourse-detail-page__content {
    position: relative;
    z-index: 2;
    padding: 0 0 80px;
}

.registered-course-card {
    margin-top: -8px;
    overflow: hidden;
    border: 1px solid var(--ds-neutral-paler);
}

    .registered-course-card > header {
        display: grid;
        grid-template-columns: 206px minmax(0, 1fr) 260px;
        gap: 16px;
        align-items: center;
        min-height: 148px;
        padding: 16px;
    }

        .registered-course-card > header > img {
            width: 206px;
            height: 116px;
            object-fit: cover;
            border-radius: 12px;
        }

    .registered-course-card h2 {
        margin: 0 0 4px;
        color: var(--ds-primary-dark);
        font-size: 24px;
        line-height: 36px;
    }

    .registered-course-card header strong {
        color: var(--ds-primary-bright);
        font-size: 18px;
        line-height: 28px;
    }

    .registered-course-card header p {
        margin: 4px 0 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
    }

.registered-course-card__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

    .registered-course-card__status small {
        color: var(--ds-neutral-light);
        font-size: 12px;
    }

.registered-lessons {
    padding: 20px 24px 24px;
    border-top: 1px solid #dce7ef;
    background: var(--ds-bg-pale-blue);
}

    .registered-lessons__head,
    .registered-lessons article {
        display: grid;
        grid-template-columns: minmax(300px, 1.35fr) minmax(250px, 1fr) 128px minmax(220px, .9fr);
        gap: 16px;
        align-items: center;
    }

.registered-lessons__head {
    padding: 0 12px 12px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 600;
}

.registered-lessons article {
    min-height: 70px;
    margin-top: 8px;
    padding: 12px;
    border-radius: 5px;
    background: var(--ds-neutral-white);
}

    .registered-lessons article > div:first-child {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
    }

    .registered-lessons article b {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        color: var(--ds-neutral-white);
        font-size: 12px;
        border-radius: 50%;
        background: var(--ds-primary-default);
    }

    .registered-lessons article span,
    .registered-lessons article p {
        min-width: 0;
        margin: 0;
        font-size: 14px;
    }

    .registered-lessons article strong {
        display: block;
        overflow: hidden;
        font-size: 16px;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .registered-lessons article small {
        display: block;
        overflow: hidden;
        margin-top: 2px;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .registered-lessons article a {
        color: var(--ds-primary-default);
        font-weight: 600;
        text-decoration: none;
    }

.registered-course-card > footer {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 16px;
    padding: 20px 24px;
    color: var(--ds-neutral-light);
    font-size: 14px;
    background: var(--ds-bg-pale-grey);
}

.registration-data {
    margin-top: 32px;
}

    .registration-data > h2 {
        margin: 0 0 16px;
        color: var(--ds-primary-dark);
        font-size: 18px;
        line-height: 28px;
    }

.registration-accordions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .registration-accordions details {
        overflow: hidden;
        border: 1px solid var(--ds-neutral-pale);
        border-radius: 8px;
        background: var(--ds-neutral-white);
    }

    .registration-accordions summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 14px 16px;
        list-style: none;
        cursor: pointer;
    }

        .registration-accordions summary::-webkit-details-marker {
            display: none;
        }

        .registration-accordions summary span {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #131a34;
            font-size: 18px;
            font-weight: 600;
        }

        .registration-accordions summary b {
            padding: 2px 8px;
            color: var(--ds-neutral-white);
            font-size: 12px;
            line-height: 16px;
            background: var(--ds-primary-default);
        }

    .registration-accordions details:first-child summary b {
        background: var(--ds-primary-dark);
    }

    .registration-accordions summary i {
        color: var(--ds-primary-default);
        font-size: 20px;
        font-style: normal;
    }

.registration-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--ds-neutral-pale);
}

    .registration-data-grid > div {
        min-height: 58px;
        padding: 4px 0 8px;
        color: var(--ds-neutral-default);
        font-size: 16px;
        line-height: 24px;
        border-bottom: 1px solid #f0f4f7;
    }

    .registration-data-grid small {
        display: block;
        margin-bottom: 4px;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        line-height: 16px;
    }

    .registration-data-grid .wide {
        grid-column: span 2;
    }

.mycourse-detail-page__actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

@media (max-width: 1279px) {
    .mycourse-row {
        grid-template-columns: minmax(300px, 1.2fr) minmax(190px, .9fr) minmax(190px, .9fr) 160px;
        gap: 16px;
    }

    .mycourse-row__identity {
        grid-template-columns: 132px minmax(0, 1fr);
    }

        .mycourse-row__identity img {
            width: 132px;
            height: 92px;
        }

    .registered-lessons__head,
    .registered-lessons article {
        grid-template-columns: minmax(260px, 1.25fr) minmax(200px, 1fr) 100px minmax(170px, .9fr);
        gap: 12px;
    }

    .registration-data-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .flow-hero,
    .texture-hero {
        padding: 16px 0 28px;
    }

        .flow-hero h1,
        .texture-hero h1 {
            font-size: 24px;
            line-height: 36px;
        }

    .flow-progress {
        margin-top: 24px;
    }

        .flow-progress li {
            font-size: 12px;
            line-height: 16px;
        }

        .flow-progress b {
            width: 32px;
            height: 32px;
        }

        .flow-progress li:not(:last-child)::after {
            top: 15px;
            left: calc(50% + 20px);
            width: calc(100% - 40px);
        }

    .flow-content {
        padding: 24px 0 48px;
    }

    .flow-course-card__summary {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 12px;
        min-height: 112px;
        padding: 12px;
    }

        .flow-course-card__summary > img {
            width: 100px;
            height: 88px;
            border-radius: 8px;
        }

        .flow-course-card__summary h2 {
            font-size: 18px;
            line-height: 28px;
        }

        .flow-course-card__summary strong {
            font-size: 14px;
            line-height: 20px;
        }

        .flow-course-card__summary p {
            font-size: 12px;
            line-height: 16px;
        }

        .flow-course-card__summary button {
            grid-column: 1 / -1;
            justify-content: center;
            width: 100%;
        }

    .flow-course-card__details {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 16px;
    }

    .flow-card > header {
        padding: 16px;
    }

        .flow-card > header h2 {
            font-size: 18px;
            line-height: 28px;
        }

    .flow-card__with-action {
        flex-wrap: wrap;
    }

        .flow-card__with-action > button {
            width: 100%;
        }

    .flow-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }

    .companion-list {
        padding: 0 16px 20px;
    }

    .companion-row {
        grid-template-columns: 1fr;
    }

    .companion-row__remove {
        width: 100%;
    }

    .terms-card .terms-scroll {
        margin: 20px 16px 0;
    }

    .terms-checks {
        padding: 20px 16px;
    }

    .flow-actions {
        flex-direction: column-reverse;
    }

        .flow-actions .btn {
            width: 100%;
        }

    .confirmation-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

        .confirmation-grid dl > div {
            grid-template-columns: 110px minmax(0, 1fr);
        }

    .registration-completion {
        padding: 32px 20px;
    }

        .registration-completion dl > div {
            grid-template-columns: 100px minmax(0, 1fr);
        }

    .mycourse-filters {
        margin-top: 24px;
        padding-bottom: 4px;
    }

        .mycourse-filters button {
            min-width: auto;
        }

    .mycourse-content {
        padding: 24px 0 48px;
    }

    .mycourse-count {
        text-align: left;
    }

    .mycourse-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .mycourse-row__identity {
        grid-template-columns: 112px minmax(0, 1fr);
    }

        .mycourse-row__identity img {
            width: 112px;
            height: 88px;
        }

        .mycourse-row__identity h2 {
            font-size: 18px;
            line-height: 28px;
        }

    .mycourse-row__meta,
    .mycourse-row__application {
        padding: 12px;
        border-radius: 8px;
        background: var(--ds-bg-pale-grey);
    }

    .mycourse-row__state {
        align-items: stretch;
    }

        .mycourse-row__state .pill {
            align-self: flex-start;
        }

    .cancel-dialog > div > div {
        flex-direction: column-reverse;
    }

    .cancel-dialog .btn {
        width: 100%;
    }

    .mycourse-detail-page__content {
        padding-bottom: 48px;
    }

    .registered-course-card {
        margin-inline: calc(var(--gutter) * -1);
        border-radius: 0;
    }

        .registered-course-card > header {
            grid-template-columns: 112px minmax(0, 1fr);
            min-height: 112px;
            padding: 12px 20px;
        }

            .registered-course-card > header > img {
                width: 112px;
                height: 88px;
                border-radius: 8px;
            }

        .registered-course-card h2 {
            font-size: 18px;
            line-height: 28px;
        }

        .registered-course-card header strong {
            font-size: 14px;
            line-height: 20px;
        }

    .registered-course-card__status {
        grid-column: 1 / -1;
        align-items: flex-start;
        padding-top: 4px;
    }

    .registered-lessons {
        padding: 20px;
    }

    .registered-lessons__head {
        display: none;
    }

    .registered-lessons article {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 16px;
    }

        .registered-lessons article > p {
            padding-left: 40px;
        }

    .registered-course-card > footer {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .registration-data {
        margin-top: 24px;
    }

    .registration-accordions summary span {
        font-size: 16px;
    }

    .registration-data-grid {
        grid-template-columns: 1fr;
    }

        .registration-data-grid .wide {
            grid-column: auto;
        }
}

/* ===== COURSE DETAIL ===== */
/* Course detail — Figma nodes 1942:121106 and 1940:61208. */
.page-course-detail {
    background: var(--ds-neutral-palest);
}

.course-detail {
    color: var(--ds-neutral-default);
    background: var(--ds-neutral-white);
}

.course-detail__banner {
    height: 360px;
    overflow: hidden;
    background: #dcecf3;
}

    .course-detail__banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }

.course-detail__intro {
    padding: 24px 0 40px;
    background: var(--ds-neutral-white);
}

.course-detail__breadcrumbs {
    margin: 0 0 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.course-detail__breadcrumbs--mobile {
    display: none;
}

.course-detail__hero {
    display: grid;
    grid-template-columns: minmax(0, 701px) minmax(0, 491px);
    gap: 32px;
    align-items: center;
}

.course-detail__hero-image {
    height: 394px;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #e8f4f6;
}

    .course-detail__hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.course-detail__hero-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.course-detail__description {
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: pre-line;
}

.course-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 4px;
}

.course-detail__tags--mobile {
    display: none;
}

.course-detail__tags span {
    padding: 2px 8px;
    color: var(--ds-neutral-white);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.course-detail__tags .course-detail__category-tag {
    color: var(--ds-neutral-white);
    background-color: var(--ds-primary-default);
}

.course-detail__tags .course-detail__promo-tag {
    color: var(--course-tag-text-color, var(--ds-neutral-white));
    background-color: var(--course-tag-background-color, var(--ds-secondary-pink-default));
}

.course-detail__hero-content h1 {
    width: 100%;
    margin: 0;
    overflow: visible;
    color: var(--ds-neutral-default);
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.course-detail__hero-content > p {
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 16px;
    line-height: 24px;
}

.course-detail__summary {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 8px;
    background: var(--ds-bg-light-blue);
}

    .course-detail__summary > span {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--ds-neutral-light);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

    .course-detail__summary img {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        object-fit: contain;
    }

.course-detail__summary-icon--mobile,
.course-detail__summary-text--mobile {
    display: none;
}

.course-detail__share {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 16px;
    padding-block: 4px;
    color: var(--ds-neutral-light);
    font-size: 14px;
    font-weight: 500;
}

    .course-detail__share > span:first-child {
        flex: 0 0 auto;
    }

.course-detail__share-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    place-items: center;
    color: var(--ds-primary-default);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.course-detail__share-divider {
    width: 1px;
    height: 32px;
    flex: 0 0 1px;
    background: var(--ds-neutral-pale);
}

.course-detail__share-button img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.course-detail__content {
    padding: 32px 0 80px;
    background: var(--ds-neutral-white);
}

.course-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .course-section-title h2 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 24px;
        font-weight: 600;
        line-height: 36px;
    }

.course-section-title__text--mobile {
    display: none;
}

.course-section-title__icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}

.icon-svg {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.icon-svg--time {
    -webkit-mask-image: url('../../assets/icons/course-time.svg');
    mask-image: url('../../assets/icons/course-time.svg');
}

.course-session {
    position: relative;
}

.course-session__note {
    margin: 8px 0 0 36px;
    color: var(--ds-neutral-lighter);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.course-session__viewport {
    position: relative;
    margin-top: 0;
    padding-block: 12px;
}

.course-session__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 4);
    gap: 16px;
    padding-block: 4px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .course-session__list::-webkit-scrollbar {
        display: none;
    }

.course-session-card {
    display: flex;
    min-width: 0;
    height: 96px;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    color: var(--ds-neutral-default);
    text-align: left;
    scroll-snap-align: start;
    border: 1px solid var(--ds-neutral-pale);
    border-radius: 12px;
    background: var(--ds-neutral-white);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s;
}

    .course-session-card:hover {
        border-color: var(--ds-primary-bright);
        transform: translateY(-1px);
    }

    .course-session-card.is-selected {
        color: var(--ds-primary-dark);
        border: 2px solid var(--ds-primary-bright);
        box-shadow: 0 4px 15px rgba(19, 26, 52, .05);
        background: var(--ds-bg-light-blue);
    }

.course-session-card__top {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.course-session-card strong {
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-session-card small {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.course-session__nav {
    position: absolute;
    z-index: 2;
    top: 52px;
    display: grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    border: 0;
    color: var(--ds-primary-default);
    background: transparent;
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease;
}

.course-session__nav-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../../assets/icons/arrow-down.svg') center / 24px 24px no-repeat;
    mask: url('../../assets/icons/arrow-down.svg') center / 24px 24px no-repeat;
}

.course-session__nav--prev {
    left: -40px;
}

.course-session__nav--next {
    right: -40px;
}

.course-session__nav--prev .course-session__nav-icon {
    transform: rotate(90deg);
}

.course-session__nav--next .course-session__nav-icon {
    transform: rotate(-90deg);
}

.course-session__nav:disabled,
.course-session__nav[aria-disabled="true"] {
    color: var(--ds-neutral-pale);
    cursor: default;
}

.course-session__nav:not(:disabled):hover {
    color: var(--ds-primary-dark);
}

.course-session__nav:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--ds-primary-bright);
    outline-offset: 3px;
}

.pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}
/* Generic blue pill used by non-registration states in My Course. */
.pill--primary {
    color: var(--ds-primary-default);
    background: var(--ds-bg-selection);
}

.course-selected {
    margin-top: 20px;
}

.course-selected__summary-card {
    display: grid;
    min-height: 148px;
    grid-template-columns: 206px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
}

.course-selected__thumbnail {
    width: 206px;
    height: 116px;
    object-fit: cover;
    border-radius: 12px;
}

.course-selected__title-group {
    min-width: 0;
}

.course-selected__title {
    margin: 0;
    overflow: hidden;
    color: var(--ds-primary-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-selected__eyebrow {
    display: block;
    margin-top: 4px;
    color: var(--ds-primary-bright);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.course-selected__stats {
    margin: 0;
    color: var(--ds-neutral-lighter);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

.course-registration-bar {
    display: flex;
    margin-top: 32px;
    min-height: 103px;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    border-radius: 0;
    background: var(--ds-bg-light-blue);
}

    .course-registration-bar p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

    .course-registration-bar .btn {
        width: 240px;
    }

        .course-registration-bar .btn.is-disabled,
        .course-sticky-register .btn.is-disabled {
            pointer-events: none;
            opacity: .45;
        }

/*
 * Course Detail / Session content modules
 * 這些版型對應 session.contentModules[]：後台決定 type 與順序，CSS 只負責各 type 的固定排版。
 * Desktop / Mobile 共用資料來源；下方 media queries 僅調整 responsive layout。
 */
.course-highlights {
    margin-top: 32px;
}

.course-highlights__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
}

    .course-highlights__intro h3 {
        margin: 0;
        color: var(--ds-primary-dark);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

    .course-highlights__intro p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

.course-highlights__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 371px));
    gap: 24px;
    justify-content: center;
    padding: 16px 31px 0;
}

    .course-highlights__cards article {
        min-width: 0;
        text-align: center;
    }

    .course-highlights__cards img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 12px;
    }

    .course-highlights__cards h3 {
        margin: 16px 0 4px;
        color: var(--ds-neutral-light);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

    .course-highlights__cards p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

.course-highlights__mobile-prefix {
    display: none;
}

.course-highlights .course-section-title h2 {
    font-size: 20px;
    line-height: 32px;
}

.course-highlights__media {
    display: grid;
    min-height: 352px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: center;
    padding: 20px 40px;
}

.course-highlights__media-visual {
    height: 312px;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ds-neutral-palest);
}

    .course-highlights__media-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.course-highlights__media-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    padding-block: 16px;
}

    .course-highlights__media-copy h3 {
        margin: 0;
        overflow: hidden;
        color: var(--ds-primary-dark);
        font-size: 24px;
        font-weight: 600;
        line-height: 36px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-highlights__media-copy p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

.course-highlights__horizontal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 20px 32px;
}

.course-highlights__horizontal-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 276px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

    .course-highlights__horizontal-card > img {
        width: 100%;
        height: 155px;
        object-fit: cover;
        border-radius: 12px;
    }

.course-highlights__horizontal-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

    .course-highlights__horizontal-copy h3 {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 8px;
        margin: 0;
        overflow: hidden;
        color: var(--ds-neutral-light);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.course-highlights__dot {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    background: var(--ds-positive-light);
}

.course-highlights__horizontal-copy p {
    margin: 0;
    padding-inline: 12px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.course-highlights__feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 282px));
    gap: 16px;
    justify-content: center;
    padding: 32px 24px 16px;
}

    .course-highlights__feature-grid article {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .course-highlights__feature-grid img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 50%;
    }

    .course-highlights__feature-grid h3 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

    .course-highlights__feature-grid p {
        width: min(100%, 256px);
        margin: -12px 0 0;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

/*
 * Course Detail / Session lessons & contacts
 * 課堂與承辦資訊屬於目前選中的 session；大網表格與小網卡片共用同一份資料。
 */
.course-schedule {
    margin-top: 40px;
    padding: 20px 24px 24px;
    border-radius: 12px;
    background: var(--ds-bg-pale-blue);
}

.course-schedule__head,
.course-schedule__rows article {
    display: grid;
    grid-template-columns: minmax(0, 328px) minmax(0, 288px) minmax(0, 180px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.course-schedule__head {
    padding: 0 16px 14px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

    .course-schedule__head span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .course-schedule__head img {
        display: block;
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

.course-schedule__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 8px;
    border-top: 1px solid var(--ds-neutral-paler);
    border-bottom: 1px solid var(--ds-neutral-paler);
}

    .course-schedule__rows article {
        min-height: 70px;
        padding: 16px;
        border-radius: 5px;
        background: var(--ds-neutral-white);
    }

.lesson-title {
    display: grid;
    min-width: 0;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

    .lesson-title > b {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        color: var(--ds-neutral-white);
        font: 600 12px/16px var(--font-sans);
        border-radius: 50%;
        background: var(--ds-primary-default);
    }

    .lesson-title h3 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .lesson-title p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        overflow-wrap: anywhere;
        white-space: normal;
    }
/* Lesson schedule date/time follows Figma Body 2 Medium (500). */
.lesson-time {
    min-width: 0;
    color: var(--ds-neutral-default);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.lesson-time__desktop {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    column-gap: 4px;
    align-items: baseline;
}

.lesson-time__desktop-date,
.lesson-time__desktop-hours {
    flex: 0 0 auto;
    white-space: nowrap;
}

.lesson-time__mobile-date,
.lesson-time__mobile-hours {
    display: none;
}

.lesson-teacher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.lesson-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--ds-neutral-white);
    font-size: 12px;
    border-radius: 50%;
    background: #839b90;
}

.lesson-avatar--warm {
    background: #a27d63;
}

.lesson-avatar--default {
    color: var(--ds-primary-default);
    background: #d8eefb;
}

.lesson-location__title {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .lesson-location__title img {
        display: none;
    }

.lesson-location {
    min-width: 0;
}

    .lesson-location a {
        display: block;
        min-width: 0;
        color: var(--ds-primary-default);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        overflow-wrap: anywhere;
        text-decoration: none;
        white-space: normal;
    }

    .lesson-location small {
        display: block;
        margin-top: 2px;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

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

.course-contact__person {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 16px;
    align-items: center;
}

    .course-contact__person p {
        margin: 0;
        color: var(--ds-neutral-light);
    }

.course-contact__owner {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    white-space: nowrap;
}

    .course-contact__owner > span {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .course-contact__owner strong {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

.course-contact__item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .course-contact__item > img {
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        object-fit: contain;
    }

.course-contact__label {
    flex: 0 0 auto;
    color: var(--ds-neutral-light);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.course-contact__value {
    min-width: 0;
    overflow: hidden;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-sticky-register {
    position: fixed;
    z-index: 40;
    top: 80px;
    right: 0;
    left: 0;
    min-height: 96px;
    transform: translateY(-110%);
    visibility: hidden;
    opacity: 0;
    background: var(--ds-bg-light-blue);
    box-shadow: 0 4px 15px rgba(19, 26, 52, .05);
    transition: transform .24s ease, opacity .2s ease, visibility 0s linear .24s;
}

    .course-sticky-register[hidden] {
        display: block;
    }

    .course-sticky-register.is-visible {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }

.course-sticky-register__inner {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: space-between;
    padding-inline: 32px;
}

.course-sticky-register__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

    .course-sticky-register__copy > strong {
        overflow: hidden;
        max-width: 776px;
        color: var(--ds-primary-dark);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-sticky-register__copy > span {
        overflow: hidden;
        max-width: 776px;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.course-sticky-register .btn {
    width: 240px;
    min-height: 48px;
    flex: 0 0 240px;
}

@media (min-width: 769px) and (max-width: 1279px) {
    .course-session__list {
        grid-auto-columns: 223px;
    }

    .course-session-card {
        width: 223px;
        min-height: 128px;
        height: 128px;
        padding: 16px;
    }

    .course-session-card__top {
        flex-direction: column;
        gap: 4px;
    }

    .course-session-card strong {
        width: 100%;
    }

    .course-session__nav {
        top: 68px;
    }
}

@media (max-width: 1279px) {
    .course-detail__hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    }

    .course-session__nav--prev {
        left: -28px;
    }

    .course-session__nav--next {
        right: -28px;
    }

    .course-selected__summary-card {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .course-selected__thumbnail {
        width: 180px;
    }

    .course-selected__stats {
        grid-column: 2;
    }

    .course-schedule__head,
    .course-schedule__rows article {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, 1fr);
        gap: 12px;
    }

    .course-contact__person {
        grid-template-columns: 1fr;
    }

    .course-contact__owner {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .course-detail__banner {
        height: 200px;
    }

        .course-detail__banner img {
            object-position: center;
            transform: none;
        }

    .course-detail__intro {
        padding: 16px 0 32px;
    }

    .course-detail__breadcrumbs--desktop {
        display: none;
    }

    .course-detail__breadcrumbs--mobile {
        display: flex;
    }

    .course-detail__breadcrumbs {
        margin-bottom: 32px;
        font-size: 14px;
        line-height: 20px;
    }

    .course-detail__hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .course-detail__hero-image {
        height: auto;
        aspect-ratio: 335 / 188;
        border-radius: 12px;
    }

    .course-detail__hero-content {
        gap: 16px;
    }

    .course-detail__tags--desktop {
        display: none;
    }

    .course-detail__tags--mobile {
        display: flex;
    }

    .course-detail__hero-content h1 {
        font-size: 24px;
        line-height: 36px;
    }

    .course-detail__description {
        font-size: 16px;
        line-height: 24px;
    }

    .course-detail__hero-content > p {
        font-size: 16px;
        line-height: 24px;
    }

    .course-detail__summary {
        padding: 16px;
    }

        .course-detail__summary > span {
            font-size: 14px;
            line-height: 20px;
        }

    .course-detail__summary-icon--desktop,
    .course-detail__summary-text--desktop {
        display: none;
    }

    .course-detail__summary-icon--mobile,
    .course-detail__summary-text--mobile {
        display: inline;
    }

    .course-detail__share {
        gap: 16px;
    }

    .course-detail__share-button {
        width: 32px;
    }

    .course-detail__content {
        padding: 24px 0 48px;
    }

    .course-section-title {
        gap: 12px;
    }

        .course-section-title h2 {
            font-size: 20px;
            line-height: 32px;
        }

    .course-section-title__text--desktop {
        display: none;
    }

    .course-section-title__text--mobile {
        display: inline;
    }

    .course-session__note {
        display: none;
    }

    .course-session__viewport {
        margin-top: 8px;
        margin-inline: calc(var(--gutter) * -1);
        padding-block: 16px 8px;
    }

    .course-session__list {
        display: flex;
        gap: 16px;
        padding: 0 16px 8px;
        scroll-padding-left: 16px;
    }

    .course-session-card {
        width: 223px;
        min-height: 126px;
        height: auto;
        flex: 0 0 223px;
        padding: 16px;
        scroll-snap-align: center;
    }

    .course-session-card__top {
        flex-direction: column;
        gap: 4px;
    }

    .course-session-card strong {
        width: 100%;
        font-size: 18px;
        line-height: 28px;
    }

    .course-session-card small {
        font-size: 14px;
        line-height: 20px;
    }

    .course-session__nav {
        display: none;
    }

    .pill {
        min-height: 28px;
        padding: 4px 16px;
        font-size: 14px;
        line-height: 20px;
    }

    .course-selected {
        margin-top: 16px;
    }

    .course-selected__summary-card {
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 0 0 16px;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

    .course-selected__thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 335 / 188;
        border-radius: 12px;
    }

    .course-selected__title {
        font-size: 18px;
        line-height: 28px;
        white-space: normal;
    }

    .course-selected__eyebrow {
        margin-top: 4px;
        font-size: 16px;
        line-height: 24px;
    }

    .course-selected__stats {
        margin-top: 4px;
        font-size: 14px;
        line-height: 20px;
        white-space: normal;
    }

    .course-registration-bar {
        min-height: 0;
        margin-top: 16px;
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        border-radius: 0;
    }

        .course-registration-bar p {
            font-size: 16px;
            line-height: 24px;
        }

        .course-registration-bar .btn {
            width: 100%;
        }

    .course-highlights {
        margin-top: 32px;
    }

    .course-highlights__intro {
        padding: 8px 0;
    }

        .course-highlights__intro h3 {
            font-size: 20px;
            line-height: 32px;
        }

        .course-highlights__intro p {
            font-size: 16px;
            line-height: 24px;
        }

    .course-highlights__cards {
        display: flex;
        margin: 0;
        flex-direction: column;
        gap: 20px;
        padding: 8px 0;
        overflow: visible;
    }

        .course-highlights__cards article {
            width: 100%;
            flex: none;
        }

        .course-highlights__cards h3 {
            margin-top: 12px;
        }

    .course-highlights__mobile-prefix {
        display: inline;
    }

    .course-highlights__media {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }

    .course-highlights__media--image-right .course-highlights__media-copy {
        order: 2;
    }

    .course-highlights__media--image-right .course-highlights__media-visual {
        order: 1;
    }

    .course-highlights__media-visual {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .course-highlights__media-copy {
        padding: 0;
    }

        .course-highlights__media-copy h3 {
            font-size: 20px;
            line-height: 32px;
            white-space: normal;
        }

    .course-highlights__horizontal-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 8px 0;
    }

    .course-highlights__horizontal-card {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 12px;
    }

        .course-highlights__horizontal-card > img {
            height: 88px;
            border-radius: 8px;
        }

    .course-highlights__horizontal-copy p {
        padding-inline: 0;
    }

    .course-highlights__feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        padding: 24px 0 8px;
    }

        .course-highlights__feature-grid img {
            width: 96px;
            height: 96px;
        }

        .course-highlights__feature-grid h3 {
            font-size: 18px;
            line-height: 28px;
        }

        .course-highlights__feature-grid p {
            margin-top: -12px;
            font-size: 14px;
            line-height: 20px;
        }

    .course-schedule {
        margin: 32px 0 0;
        padding: 16px;
        border-radius: 12px;
    }

    .course-schedule__head {
        display: none;
    }

    .course-schedule__rows {
        gap: 8px;
        padding: 0;
        border: 0;
    }

        .course-schedule__rows article {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 12px;
            border-radius: 8px;
        }

    .lesson-title {
        gap: 8px;
    }

        .lesson-title h3 {
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
        }

        .lesson-title p {
            font-size: 14px;
            line-height: 20px;
            white-space: normal;
        }

    .lesson-time,
    .lesson-teacher,
    .lesson-location {
        padding-left: 32px;
    }

    .lesson-time {
        display: flex;
        flex-direction: column;
        color: var(--ds-neutral-light);
        font-size: 14px;
        line-height: 20px;
        white-space: normal;
    }

    .lesson-time__desktop {
        display: none;
    }

    .lesson-time__mobile-date {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--ds-neutral-default);
        font-weight: 500;
    }

        .lesson-time__mobile-date img,
        .lesson-location__title img {
            display: block;
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            object-fit: contain;
        }

    .lesson-time__mobile-hours {
        display: block;
    }

    .lesson-location__title img {
        display: block;
    }

    .course-contact {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .course-contact__person {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .course-contact__owner,
    .course-contact__item {
        width: 100%;
    }

    .course-sticky-register {
        top: 64px;
        min-height: 0;
    }

    .course-sticky-register__inner {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        padding-block: 20px;
        padding-inline: 0;
    }

    .course-sticky-register__copy {
        display: flex;
        width: 100%;
        min-width: 0;
        flex: none;
        gap: 4px;
    }

        .course-sticky-register__copy > strong {
            display: block;
            width: 100%;
            max-width: 100%;
            font-size: 18px;
            line-height: 28px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .course-sticky-register__copy > span {
            display: block;
            width: 100%;
            max-width: 100%;
            font-size: 16px;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .course-sticky-register .btn {
        width: 100%;
        min-height: 48px;
        flex: 0 0 48px;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
    }
}


/* Course detail teacher and venue dialogs */
.lesson-teacher--trigger {
    appearance: none;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

    .lesson-teacher--trigger:hover > span:last-child,
    .lesson-teacher--trigger:focus-visible > span:last-child {
        color: var(--action-primary-hover-bg);
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-thickness: from-font;
        text-underline-position: from-font;
    }

    .lesson-teacher--trigger:focus-visible,
    .lesson-location__button:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 3px;
    }

.lesson-location__button {
    appearance: none;
    padding: 0;
    border: 0;
    color: var(--ds-primary-default);
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

    .lesson-location__button:hover,
    .lesson-location__button:focus-visible {
        color: var(--action-primary-hover-bg);
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-thickness: from-font;
        text-underline-position: from-font;
    }

.course-info-dialog {
    width: min(640px, calc(100vw - 40px));
    max-width: 640px;
    max-height: calc(100dvh - 40px);
    padding: 0;
    border: 1px solid var(--ds-neutral-paler);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ds-neutral-white);
    box-shadow: 0 4px 15px rgba(59, 66, 70, .15);
}

    .course-info-dialog::backdrop {
        background: rgba(19, 26, 52, .52);
    }

.course-info-dialog__surface {
    display: flex;
    max-height: calc(100dvh - 40px);
    flex-direction: column;
    margin: 0;
    background: var(--ds-neutral-white);
}

.course-info-dialog__header {
    display: flex;
    min-height: 68px;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 32px 16px 40px;
    border-bottom: 1px solid var(--ds-neutral-paler);
}

    .course-info-dialog__header h2 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

.course-info-dialog__close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--ds-primary-default);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    background: transparent;
    cursor: pointer;
}

    .course-info-dialog__close:hover {
        background: var(--action-icon-hover-bg);
    }

    .course-info-dialog__close:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 2px;
    }

.course-info-dialog__content {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
}

.course-info-dialog__content--teacher {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 20px 40px 24px;
}

.course-info-dialog__teacher-avatar {
    display: grid;
    width: 120px;
    height: 120px;
    place-items: center;
    border-radius: 50%;
    color: var(--ds-primary-dark);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(135deg, #d9effc, #a7d3ee);
}

    .course-info-dialog__teacher-avatar[data-tone="warm"] {
        color: #8a542f;
        background: linear-gradient(135deg, #ffe3ce, #f5c59f);
    }

    .course-info-dialog__teacher-avatar[data-tone="default"] {
        color: var(--ds-neutral-light);
        background: linear-gradient(135deg, var(--ds-neutral-paler), #d8d8d8);
    }

.course-info-dialog__teacher-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
}

    .course-info-dialog__teacher-copy h3,
    .course-info-dialog__venue-info h3 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

    .course-info-dialog__teacher-copy h3 {
        padding-inline: 16px;
    }

.course-info-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    color: var(--ds-neutral-default);
    font-size: 16px;
    line-height: 24px;
    background: var(--ds-bg-light-blue);
}

    .course-info-dialog__body p {
        margin: 0;
    }

.course-info-dialog__content--venue {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 40px 24px;
}

.course-info-dialog--venue .course-info-dialog__surface {
    min-height: 671px;
}

.course-info-dialog__venue-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.course-info-dialog__venue-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-info-dialog__venue-info {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding-inline: 16px;
}

    .course-info-dialog__venue-info h3 {
        color: var(--ds-primary-default);
    }

.course-info-dialog__address {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

    .course-info-dialog__address > span {
        flex: 0 0 auto;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .course-info-dialog__address a {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 6px;
        color: var(--ds-primary-default);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
        white-space: nowrap;
    }

        .course-info-dialog__address a:hover {
            background: var(--action-icon-hover-bg);
        }

.course-info-dialog__map-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: var(--ds-primary-default);
    -webkit-mask: url('../../assets/icons/course-location.svg') center / contain no-repeat;
    mask: url('../../assets/icons/course-location.svg') center / contain no-repeat;
}

.course-info-dialog__footer {
    display: flex;
    min-height: 80px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    background: var(--ds-neutral-white);
}

    .course-info-dialog__footer .btn {
        width: 160px;
    }

body.is-course-info-dialog-open {
    overflow: hidden;
}

@media (min-width: 769px) {
    .course-sticky-register {
        min-height: 100px;
    }

    .course-sticky-register__inner {
        min-height: 100px;
    }
}

@media (max-width: 768px) {
    .course-info-dialog {
        position: fixed;
        inset: auto 0 0;
        box-sizing: border-box;
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        max-height: calc(100dvh - 96px);
        margin: 0;
        border-width: 1px 0 0;
        border-radius: 12px 12px 0 0;
    }

    .course-info-dialog__surface {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-height: calc(100dvh - 96px);
    }

    .course-info-dialog__content {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .course-info-dialog__header {
        min-height: 60px;
        align-items: center;
        padding: 16px 20px;
    }

        .course-info-dialog__header h2 {
            font-size: 18px;
            line-height: 28px;
        }

    .course-info-dialog__close {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 30px;
    }

    .course-info-dialog__content--teacher {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 20px;
    }

    /* Prevent the instructor portrait from shrinking for long content. */
    .course-info-dialog__content--teacher > .course-info-dialog__teacher-avatar {
        flex: 0 0 120px;
    }

    .course-info-dialog__teacher-copy {
        width: 100%;
    }

        .course-info-dialog__teacher-copy h3 {
            padding-inline: 16px;
        }

    .course-info-dialog__content--venue {
        gap: 16px;
        padding: 20px;
    }

    .course-info-dialog--venue .course-info-dialog__surface {
        min-height: 0;
    }

    .course-info-dialog__venue-info {
        width: 100%;
        max-width: none;
        padding-inline: 16px;
    }

    .course-info-dialog__footer {
        min-height: 80px;
        padding: 16px 20px;
    }

        .course-info-dialog__footer .btn {
            width: 100%;
        }
}

/* My courses - Figma-aligned responsive layout */
.page-mycourse-list .mycourse-list-page {
    background: var(--ds-neutral-white);
}

.page-mycourse-list .texture-hero {
    height: 200px;
    padding: 24px 0 0;
    background: linear-gradient(180deg, var(--ds-bg-selection) 0%, rgba(230,246,253,.52) 52%, rgba(255,255,255,0) 100%);
}

    .page-mycourse-list .texture-hero::after {
        right: -40px;
        bottom: -210px;
        width: 640px;
        height: 380px;
        opacity: .8;
    }

    .page-mycourse-list .texture-hero .page-breadcrumbs {
        margin-bottom: 24px;
    }

    .page-mycourse-list .texture-hero h1 {
        color: var(--ds-neutral-black);
    }

.page-mycourse-list .mycourse-filters {
    display: flex;
    gap: 8px;
    margin-top: 32px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

    .page-mycourse-list .mycourse-filters::-webkit-scrollbar {
        display: none;
    }

    .page-mycourse-list .mycourse-filters button {
        flex: 0 0 auto;
        min-width: 0;
        height: 32px;
        padding: 4px 8px;
        color: var(--ds-primary-default);
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        white-space: nowrap;
        border: 1px solid var(--ds-primary-default);
        border-radius: 6px;
        background: var(--ds-neutral-white);
        cursor: pointer;
    }

        .page-mycourse-list .mycourse-filters button:hover {
            color: var(--ds-primary-dark);
            border-color: var(--ds-primary-dark);
            background: var(--ds-bg-light-blue);
        }

        .page-mycourse-list .mycourse-filters button:focus-visible {
            outline: 2px solid var(--ds-primary-bright);
            outline-offset: 2px;
        }

        .page-mycourse-list .mycourse-filters button.is-active {
            color: var(--ds-neutral-white);
            border-color: var(--ds-primary-default);
            background: var(--ds-primary-default);
        }

.page-mycourse-list .mycourse-content {
    padding: 12px 0 80px;
}

.page-mycourse-list .mycourse-count {
    display: flex;
    gap: 4px;
    align-items: center;
    min-height: 28px;
    margin: 0 0 32px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

    .page-mycourse-list .mycourse-count b {
        color: var(--ds-neutral-light);
        font-size: 18px;
        line-height: 28px;
    }

.page-mycourse-list .mycourse-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-mycourse-list .mycourse-row {
    position: relative;
    display: grid;
    grid-template-columns: 40.114% 22.386% 25% 12.5%;
    gap: 0;
    align-items: stretch;
    width: 100%;
    min-height: 152px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e3ebf0;
    border-radius: 12px;
    background: var(--ds-neutral-white);
    box-shadow: 0 2px 10px rgba(19,26,52,.06);
    cursor: default;
}

.page-mycourse-list .mycourse-row__identity {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 16px;
}

    .page-mycourse-list .mycourse-row__identity > img {
        display: block;
        width: 214px;
        height: 120px;
        object-fit: cover;
        object-position: bottom;
        border-radius: 12px;
    }

.page-mycourse-list .mycourse-row__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .page-mycourse-list .mycourse-row__heading h2 {
        order: 0;
        display: -webkit-box;
        width: 100%;
        max-width: 100%;
        max-height: 56px;
        margin: 0;
        overflow: hidden;
        color: var(--ds-primary-default);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        overflow-wrap: break-word;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .page-mycourse-list .mycourse-row__heading strong {
        order: 1;
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: var(--ds-primary-bright);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.page-mycourse-list .mycourse-row__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-width: 0;
    padding: 16px;
}

.page-mycourse-list .mycourse-row__meta-item {
    display: flex;
    gap: 4px;
    align-items: center;
    min-width: 0;
    min-height: 20px;
}

    .page-mycourse-list .mycourse-row__meta-item img {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .page-mycourse-list .mycourse-row__meta-item p {
        min-width: 0;
        margin: 0;
        color: var(--ds-neutral-light);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .page-mycourse-list .mycourse-row__meta-item strong {
        font-weight: 400;
    }

.page-mycourse-list .mycourse-row__application {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-width: 0;
    padding: 24px 16px;
}

    .page-mycourse-list .mycourse-row__application p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        overflow-wrap: anywhere;
    }

.page-mycourse-list .mycourse-row__attendance-summary {
    white-space: nowrap;
}

.page-mycourse-list .mycourse-row__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    min-height: 32px;
    padding: 4px 8px;
    color: var(--ds-neutral-lightest);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid var(--ds-neutral-lightest);
    border-radius: 6px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .page-mycourse-list .mycourse-row__cancel:hover {
        color: var(--ds-neutral-light);
        border-color: var(--ds-neutral-light);
    }

    .page-mycourse-list .mycourse-row__cancel:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 2px;
    }

.page-mycourse-list .mycourse-row__state {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 16px 24px;
    border-left: 1px solid #dbe7ed;
}

    .page-mycourse-list .mycourse-row__state.is-status-only {
        gap: 0;
    }

.page-mycourse-list .mycourse-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 12px;
    color: var(--ds-neutral-lightest);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    border-radius: 100px;
}

.page-mycourse-list .mycourse-status--warning {
    color: var(--status-warning-text);
    background: var(--status-warning-bg);
}

.page-mycourse-list .mycourse-status--registered {
    color: var(--status-registered-text);
    background: var(--status-registered-bg);
}

.page-mycourse-list .mycourse-status--positive {
    color: var(--status-positive-text);
    background: var(--status-positive-bg);
}

.page-mycourse-list .mycourse-status--muted {
    color: var(--ds-neutral-lightest);
    background: var(--ds-neutral-paler);
}

.page-mycourse-list .mycourse-status--plain {
    color: var(--ds-neutral-lightest);
    background: transparent;
}

.page-mycourse-list .mycourse-detail-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 32px;
    padding: 4px 8px;
    color: var(--ds-primary-default);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    border-radius: 6px;
}

    .page-mycourse-list .mycourse-detail-link:hover {
        color: var(--ds-primary-dark);
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-list .mycourse-detail-link:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 2px;
    }

.page-mycourse-list .mycourse-detail-link__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
    object-fit: contain;
}

.page-mycourse-list .mycourse-row.is-disabled .mycourse-row__identity > img {
    opacity: .5;
}

.page-mycourse-list .mycourse-row.is-disabled .mycourse-row__heading strong,
.page-mycourse-list .mycourse-row.is-disabled .mycourse-row__heading h2,
.page-mycourse-list .mycourse-row.is-disabled .mycourse-row__meta-item p,
.page-mycourse-list .mycourse-row.is-disabled .mycourse-row__application p {
    color: var(--ds-neutral-pale);
}

.page-mycourse-list .mycourse-row.is-disabled .mycourse-row__meta-item img {
    opacity: .45;
}

.page-mycourse-list .mycourse-empty {
    padding: 64px 24px;
    text-align: center;
    border: 1px dashed var(--ds-neutral-pale);
    border-radius: 12px;
    background: var(--ds-bg-pale-grey);
}

.page-mycourse-list .mycourse-content .pagination {
    margin-top: 40px;
}

    .page-mycourse-list .mycourse-content .pagination .is-current,
    .page-mycourse-list .mycourse-content .pagination .is-active {
        color: var(--ds-neutral-white);
        background: var(--ds-primary-default);
    }

@media (max-width: 1279px) and (min-width: 769px) {
    .page-mycourse-list .mycourse-row__identity {
        grid-template-columns: 154px minmax(0, 1fr);
        padding: 16px;
    }

        .page-mycourse-list .mycourse-row__identity > img {
            width: 154px;
            height: 100px;
        }

    .page-mycourse-list .mycourse-row__meta,
    .page-mycourse-list .mycourse-row__application {
        padding-inline: 12px;
    }

    .page-mycourse-list .mycourse-row__state {
        padding-inline: 12px;
    }

    .page-mycourse-list .mycourse-status {
        padding-inline: 8px;
    }
}

@media (max-width: 768px) {
    .page-mycourse-list .texture-hero {
        height: 156px;
        padding: 16px 0 0;
        background: linear-gradient(180deg, var(--ds-neutral-white) 0%, rgba(230,246,253,.5) 100%);
    }

        .page-mycourse-list .texture-hero::after {
            right: -160px;
            bottom: -210px;
            opacity: .55;
        }

        .page-mycourse-list .texture-hero .page-breadcrumbs {
            margin-bottom: 16px;
        }

        .page-mycourse-list .texture-hero h1 {
            font-size: 24px;
            line-height: 36px;
        }

    .page-mycourse-list .mycourse-filters {
        margin-top: 24px;
        padding-bottom: 0;
    }

    .page-mycourse-list .mycourse-content {
        padding: 12px 0 48px;
    }

    .page-mycourse-list .mycourse-count {
        min-height: 28px;
        margin-bottom: 24px;
    }

    .page-mycourse-list .mycourse-list {
        gap: 16px;
    }

    .page-mycourse-list .mycourse-row {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0;
        border-color: var(--ds-neutral-paler);
        box-shadow: 0 2px 4px rgba(59,66,70,.08);
    }

    .page-mycourse-list .mycourse-row__identity {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        padding: 16px 16px 8px;
    }

        .page-mycourse-list .mycourse-row__identity > img {
            display: none;
        }

    .page-mycourse-list .mycourse-row__heading {
        width: 100%;
        gap: 4px;
    }

        .page-mycourse-list .mycourse-row__heading h2 {
            color: var(--ds-primary-dark);
            font-size: 18px;
            line-height: 28px;
        }

        .page-mycourse-list .mycourse-row__heading strong {
            font-size: 16px;
            line-height: 24px;
        }

    .page-mycourse-list .mycourse-row__meta {
        gap: 4px;
        padding: 8px 16px;
    }

    .page-mycourse-list .mycourse-row__meta-item {
        min-height: 20px;
    }

    .page-mycourse-list .mycourse-row__application {
        gap: 4px;
        padding: 8px 16px 16px;
    }

        .page-mycourse-list .mycourse-row__application p {
            line-height: 24px;
        }

    .page-mycourse-list .mycourse-row__cancel {
        margin-top: 4px;
    }

    .page-mycourse-list .mycourse-row__state {
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;
        min-height: 64px;
        padding: 16px;
        border-top: 1px solid #d9d9d9;
        border-left: 0;
    }

        .page-mycourse-list .mycourse-row__state.is-status-only {
            justify-content: center;
        }

    .page-mycourse-list .mycourse-status {
        flex: 0 0 auto;
    }

    .page-mycourse-list .mycourse-content .pagination {
        margin-top: 32px;
    }
}

@media (max-width: 768px) {
    .page-mycourse-list .mycourse-row__meta,
    .page-mycourse-list .mycourse-row__application {
        background: transparent;
        border-radius: 0;
    }
}

/* Figma background and my-course interaction updates */
.page-mycourse-list .mycourse-list-page,
.page-mycourse-detail .mycourse-detail-page {
    position: relative;
    isolation: isolate;
    background: var(--ds-neutral-white);
}

    .page-mycourse-list .mycourse-list-page::before,
    .page-mycourse-detail .mycourse-detail-page::before {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 50%;
        width: 100%;
        content: "";
        transform: translateX(-50%);
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .page-mycourse-list .mycourse-list-page::before {
        height: 0;
        padding-top: 26.0416667%; /* Desktop my-courses background: 375 / 1440, scaled with viewport width */
        background-image: url('../../assets/images/background/background-mycourse-desktop.png');
        background-position: center top;
        background-size: 100% auto;
    }

    .page-mycourse-detail .mycourse-detail-page::before {
        height: 0;
        padding-top: 40.2604167%; /* 773 / 1920: scales with the page/device width */
        background-image: url('../../assets/images/background/background-registration-desktop.png');
        background-position: center top;
        background-size: 100% auto;
    }

.page-mycourse-list .texture-hero,
.page-mycourse-detail .texture-hero {
    position: relative;
    z-index: 1;
    background: transparent;
}

    .page-mycourse-list .texture-hero::after,
    .page-mycourse-detail .texture-hero::after {
        display: none;
    }

.page-mycourse-list .mycourse-content,
.page-mycourse-detail .mycourse-detail-page__content {
    position: relative;
    z-index: 1;
}

.page-mycourse-list .mycourse-row__cancel {
    flex-shrink: 0;
    white-space: nowrap;
}

.page-mycourse-list .mycourse-row__cancel-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.page-mycourse-list .mycourse-row__application .mycourse-row__cancel-note {
    margin: 0;
    color: var(--ds-neutral-lightest);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

    .page-mycourse-list .mycourse-row__application .mycourse-row__cancel-note strong {
        color: var(--ds-danger-default);
        font: inherit;
    }

@media (max-width: 768px) {
    .page-mycourse-list .mycourse-row__cancel-wrap {
        margin-top: 4px;
    }

        .page-mycourse-list .mycourse-row__cancel-wrap .mycourse-row__cancel {
            margin-top: 0;
        }
}

.page-mycourse-list a.mycourse-row__state.has-detail {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .page-mycourse-list a.mycourse-row__state.has-detail:hover .mycourse-detail-link {
        color: var(--ds-primary-dark);
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-list a.mycourse-row__state.has-detail:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: -2px;
    }

.page-mycourse-list .mycourse-detail-link {
    pointer-events: none;
}

@media (max-width: 768px) {
    .page-mycourse-list .mycourse-list-page::before,
    .page-mycourse-detail .mycourse-detail-page::before {
        height: 0;
        background-size: 100% auto;
    }

    .page-mycourse-list .mycourse-list-page::before {
        height: 0;
        padding-top: 36.2666667%; /* Mobile my-courses background: 136 / 375, scales with device width */
        background-image: url('../../assets/images/background/background-mycourse-mobile.png');
        background-position: center top;
        background-size: 100% auto;
    }

    .page-mycourse-detail .mycourse-detail-page::before {
        padding-top: 158.9333333%; /* Mobile registration background: 596 / 375 */
        background-image: url('../../assets/images/background/background-registration-mobile.png');
        background-position: center top;
    }
}


/* mobile course schedule aligned with Figma 1967:124701 */
@media (max-width: 768px) {
    .course-schedule {
        margin-top: 32px;
        padding: 32px;
        border-radius: 12px;
        background: var(--ds-bg-light-blue);
    }

    .course-schedule__rows {
        gap: 8px;
        padding: 0;
        border: 0;
    }

        .course-schedule__rows article {
            display: flex;
            min-height: 0;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
            padding: 12px;
            border: 0;
            border-radius: 8px;
            background: var(--ds-neutral-white);
        }

    .lesson-title {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
    }

        .lesson-title > b {
            align-self: start;
        }

        .lesson-title h3 {
            overflow: hidden;
            color: var(--ds-neutral-light);
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .lesson-title p {
            margin-top: 4px;
            color: var(--ds-neutral-lighter);
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .lesson-time,
    .lesson-teacher,
    .lesson-location {
        padding-left: 32px;
    }

    .lesson-time {
        display: flex;
        min-width: 0;
        flex-flow: row nowrap;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

    .lesson-time__mobile-date {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

    .lesson-time__mobile-hours {
        display: inline;
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

    .lesson-teacher {
        width: auto;
        height: 38px;
        justify-content: flex-start;
        gap: 4px;
    }

        .lesson-teacher::before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            background: url("../../assets/icons/course-sales.svg") center/16px 16px no-repeat;
        }

    .lesson-avatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    .lesson-location {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-location__title {
        gap: 4px;
        min-width: 0;
    }

    .lesson-location small {
        width: 100%;
        margin-top: 0;
        padding-left: 20px;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }

    .course-contact {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 12px 0;
    }

    .course-contact__person {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .course-contact__owner,
    .course-contact__item {
        width: 100%;
    }

    .course-contact__owner {
        min-height: 24px;
    }
}


/* registered course detail — Figma 1978:84956 / collapsed registration data 1978:84692 */
.page-mycourse-detail .registered-course-card {
    overflow: hidden;
    margin-top: -8px;
    border: 0;
    border-radius: 12px;
    background: var(--ds-neutral-white);
    box-shadow: 0 4px 15px rgba(19,26,52,.05);
}

.page-mycourse-detail .registered-course-card__header {
    display: grid;
    grid-template-columns: 206px minmax(0,1fr) 240px;
    gap: 16px;
    align-items: center;
    min-height: 148px;
    padding: 16px 24px 16px 16px;
}

    .page-mycourse-detail .registered-course-card__header > img {
        width: 206px;
        height: 116px;
        border-radius: 12px;
        object-fit: cover;
        object-position: center;
    }

.page-mycourse-detail .registered-course-card__title {
    min-width: 0;
    align-self: center
}

    .page-mycourse-detail .registered-course-card__title h2 {
        overflow: hidden;
        margin: 0 0 4px;
        color: var(--ds-primary-dark);
        font-size: 24px;
        font-weight: 600;
        line-height: 36px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-course-card__title strong {
        display: block;
        margin: 0;
        color: var(--ds-primary-bright);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

    .page-mycourse-detail .registered-course-card__title p {
        margin: 8px 0 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

.page-mycourse-detail .registered-course-card__status {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 8px;
}

    .page-mycourse-detail .registered-course-card__status .pill {
        min-height: 31px;
        padding: 5px 12px;
        font-size: 14px;
        line-height: 20px;
    }

    .page-mycourse-detail .registered-course-card__status small {
        color: var(--ds-neutral-light);
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

.page-mycourse-detail .registered-lessons {
    padding: 20px 24px 0;
    border: 0;
    background: var(--ds-bg-pale-blue);
}

    .page-mycourse-detail .registered-lessons__head,
    .page-mycourse-detail .registered-lessons article {
        display: grid;
        grid-template-columns: 328px 288px 180px minmax(0,1fr);
        gap: 16px;
        align-items: center;
    }

.page-mycourse-detail .registered-lessons__head {
    min-height: 18px;
    padding: 0 16px 14px;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

    .page-mycourse-detail .registered-lessons__head span {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lessons__head img {
        width: 16px;
        height: 16px;
        opacity: .72
    }

.page-mycourse-detail .registered-lessons__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ds-neutral-paler);
    border-bottom: 1px solid var(--ds-neutral-paler);
    padding: 1px 0;
}

.page-mycourse-detail .registered-lessons article {
    min-height: 70px;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 5px;
    background: var(--ds-neutral-white);
}

.page-mycourse-detail .registered-lesson-topic {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
}

    .page-mycourse-detail .registered-lesson-topic b {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        border-radius: 50%;
        background: var(--ds-primary-default);
        color: var(--ds-neutral-white);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }

    .page-mycourse-detail .registered-lesson-topic strong {
        display: block;
        overflow: hidden;
        color: var(--ds-neutral-default);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lesson-topic small {
        display: block;
        overflow: hidden;
        margin-top: 2px;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.page-mycourse-detail .registered-lesson-time {
    margin: 0;
    color: var(--ds-neutral-default);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

.page-mycourse-detail .registered-lesson-teacher {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-neutral-default);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

    .page-mycourse-detail .registered-lesson-teacher img {
        display: block;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

.page-mycourse-detail .registered-lesson-location {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start
}

    .page-mycourse-detail .registered-lesson-location strong {
        color: var(--ds-primary-default);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lesson-location small {
        display: block;
        overflow: hidden;
        max-width: 100%;
        margin: 0;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.page-mycourse-detail .registered-course-card__contacts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px;
    padding: 20px 40px 24px;
    background: var(--ds-bg-pale-blue);
    color: var(--ds-neutral-light);
}

.page-mycourse-detail .registered-contact {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px
}

    .page-mycourse-detail .registered-contact p {
        margin: 0
    }

.page-mycourse-detail .registered-contact__owner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px
}

    .page-mycourse-detail .registered-contact__owner strong {
        font-size: 16px;
        font-weight: 400
    }

.page-mycourse-detail .registered-contact__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: center
}

    .page-mycourse-detail .registered-contact__methods p {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap
    }

    .page-mycourse-detail .registered-contact__methods img {
        width: 16px;
        height: 16px
    }

    .page-mycourse-detail .registered-contact__methods strong,
    .page-mycourse-detail .registered-contact__methods a {
        color: var(--ds-neutral-light);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-decoration: none
    }

.page-mycourse-detail .registration-data {
    margin-top: 32px
}

    .page-mycourse-detail .registration-data > h2 {
        margin: 0 0 20px;
        color: var(--ds-primary-dark);
        font-size: 18px;
        line-height: 28px
    }

.page-mycourse-detail .registration-accordions {
    gap: 16px
}

    .page-mycourse-detail .registration-accordions details {
        border: 1px solid var(--ds-neutral-pale);
        border-radius: 8px;
        background: var(--ds-neutral-white)
    }

    .page-mycourse-detail .registration-accordions summary {
        min-height: 52px;
        padding: 10px 16px
    }

        .page-mycourse-detail .registration-accordions summary span {
            gap: 8px;
            color: #131a34;
            font-size: 18px;
            font-weight: 600;
            line-height: 28px
        }

        .page-mycourse-detail .registration-accordions summary b {
            padding: 2px 8px;
            background: var(--ds-primary-default);
            color: var(--ds-neutral-white);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px
        }

    .page-mycourse-detail .registration-accordions details:first-child summary b {
        background: var(--ds-primary-dark)
    }

.page-mycourse-detail .registration-accordion__icon {
    width: 20px;
    height: 20px;
    transition: transform .2s ease
}

.page-mycourse-detail .registration-accordions details[open] .registration-accordion__icon {
    transform: rotate(180deg)
}

.page-mycourse-detail .registration-data-grid {
    gap: 16px;
    padding: 16px 28px
}

    .page-mycourse-detail .registration-data-grid > div {
        min-height: 58px;
        padding: 4px 0 5px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }

    .page-mycourse-detail .registration-data-grid small {
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }

/* supplied instructor portraits used everywhere the course tables show an avatar. */
.page-course-detail .lesson-avatar,
.registration-step1 .registration-course-avatar,
.course-info-dialog__teacher-avatar {
    display: block;
    overflow: hidden;
    border-radius: 50%;
    background: transparent !important;
    color: transparent !important;
    object-fit: cover;
}

.course-info-dialog__teacher-avatar {
    width: 120px;
    height: 120px
}

@media (max-width:1279px) and (min-width:769px) {
    .page-mycourse-detail .registered-lessons__head,
    .page-mycourse-detail .registered-lessons article {
        grid-template-columns: minmax(260px,1.2fr) minmax(220px,1fr) 150px minmax(220px,.95fr);
        gap: 12px;
    }
}

@media (max-width:768px) {
    .page-mycourse-detail .registered-course-card {
        margin-inline: calc(var(--gutter) * -1);
        border-radius: 0
    }

    .page-mycourse-detail .registered-course-card__header {
        grid-template-columns: 112px minmax(0,1fr);
        gap: 12px;
        min-height: 0;
        padding: 12px 20px 16px;
    }

        .page-mycourse-detail .registered-course-card__header > img {
            width: 112px;
            height: 88px;
            border-radius: 8px
        }

    .page-mycourse-detail .registered-course-card__title h2 {
        font-size: 18px;
        line-height: 28px;
        white-space: normal
    }

    .page-mycourse-detail .registered-course-card__title strong {
        font-size: 14px;
        line-height: 20px
    }

    .page-mycourse-detail .registered-course-card__title p {
        margin-top: 4px;
        font-size: 12px;
        line-height: 16px
    }

    .page-mycourse-detail .registered-course-card__status {
        grid-column: 1/-1;
        align-items: flex-start;
        padding-top: 0
    }

        .page-mycourse-detail .registered-course-card__status small {
            font-size: 12px;
            line-height: 16px
        }

    .page-mycourse-detail .registered-lessons {
        padding: 16px;
        background: var(--ds-bg-light-blue)
    }

    .page-mycourse-detail .registered-lessons__head {
        display: none
    }

    .page-mycourse-detail .registered-lessons__rows {
        gap: 8px;
        border: 0;
        padding: 0
    }

    .page-mycourse-detail .registered-lessons article {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 0;
        padding: 12px;
        border-radius: 8px;
    }

    .page-mycourse-detail .registered-lesson-topic {
        width: 100%;
        align-items: start
    }

        .page-mycourse-detail .registered-lesson-topic strong {
            font-weight: 600
        }

        .page-mycourse-detail .registered-lesson-topic small {
            white-space: normal
        }

    .page-mycourse-detail .registered-lesson-time,
    .page-mycourse-detail .registered-lesson-teacher,
    .page-mycourse-detail .registered-lesson-location {
        margin-left: 32px
    }

    .page-mycourse-detail .registered-lesson-time {
        font-size: 14px;
        line-height: 20px;
        white-space: normal
    }

        .page-mycourse-detail .registered-lesson-time::before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 4px;
            vertical-align: -3px;
            background: url("../../assets/icons/course-calendar.svg") center/16px 16px no-repeat;
        }

    .page-mycourse-detail .registered-lesson-teacher::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        background: url("../../assets/icons/course-sales.svg") center/16px 16px no-repeat;
    }

    .page-mycourse-detail .registered-lesson-location {
        position: relative;
        padding-left: 20px
    }

        .page-mycourse-detail .registered-lesson-location::before {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            width: 16px;
            height: 16px;
            background: url("../../assets/icons/course-location.svg") center/16px 16px no-repeat;
        }

    .page-mycourse-detail .registered-course-card__contacts {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 28px 24px
    }

    .page-mycourse-detail .registered-contact__methods {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .page-mycourse-detail .registration-data {
        margin-top: 24px
    }

        .page-mycourse-detail .registration-data > h2 {
            margin-bottom: 16px
        }

    .page-mycourse-detail .registration-accordions summary {
        min-height: 52px
    }

        .page-mycourse-detail .registration-accordions summary span {
            font-size: 16px;
            line-height: 24px
        }

    .page-mycourse-detail .registration-data-grid {
        padding: 16px 20px
    }
}

/* small cascade fixes after legacy registered-course rules. */
.page-mycourse-detail .registered-lesson-teacher span {
    font-size: 16px;
    line-height: 24px
}

@media (max-width:768px) {
    .page-mycourse-detail .registered-lesson-time {
        padding-left: 0
    }
}

/* registered course-detail small schedule — Figma 2046:164956 */
@media (max-width:768px) {
    .page-mycourse-detail .registered-lessons {
        padding: 32px 32px 0;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-lessons__rows {
        gap: 8px;
        padding: 0;
        border: 0;
    }

    .page-mycourse-detail .registered-lessons article {
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        padding: 12px;
        border: 0;
        border-radius: 8px;
        background: var(--ds-neutral-white);
    }

    .page-mycourse-detail .registered-lesson-topic {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

        .page-mycourse-detail .registered-lesson-topic > b {
            flex: 0 0 24px;
            align-self: flex-start;
        }

        .page-mycourse-detail .registered-lesson-topic > span {
            display: block;
            width: 100%;
            min-width: 0;
        }

        .page-mycourse-detail .registered-lesson-topic strong {
            color: var(--ds-neutral-light);
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
        }

        .page-mycourse-detail .registered-lesson-topic small {
            margin-top: 4px;
            color: var(--ds-neutral-lighter);
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .page-mycourse-detail .registered-lesson-time,
    .page-mycourse-detail .registered-lesson-teacher,
    .page-mycourse-detail .registered-lesson-location {
        margin-left: 0;
    }

    .page-mycourse-detail .registered-lesson-time {
        min-height: 20px;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

        .page-mycourse-detail .registered-lesson-time::before {
            margin-right: 4px;
        }

    .page-mycourse-detail .registered-lesson-teacher {
        min-height: 38px;
        gap: 4px;
        color: var(--ds-neutral-default);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

        .page-mycourse-detail .registered-lesson-teacher::before {
            margin: 0;
        }

    .page-mycourse-detail .registered-lesson-location {
        position: relative;
        min-height: 42px;
        justify-content: center;
        padding-left: 20px;
    }

        .page-mycourse-detail .registered-lesson-location::before {
            top: 4px;
        }

        .page-mycourse-detail .registered-lesson-location strong {
            color: var(--ds-primary-default);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        .page-mycourse-detail .registered-lesson-location small {
            width: 100%;
            margin: 0;
            color: var(--ds-neutral-lightest);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .page-mycourse-detail .registered-course-card__contacts {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 12px 24px 44px;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-contact {
        width: 100%;
        gap: 4px;
    }

    .page-mycourse-detail .registered-contact__owner span {
        font-weight: 600;
    }

    .page-mycourse-detail .registered-contact__owner strong {
        font-weight: 600;
    }

    .page-mycourse-detail .registered-contact__methods {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* fix mobile registered-course lesson list cascade and exact small layout — Figma 2046:164958 */
@media (max-width:768px) {
    /* The previous mobile topic rule lost to the legacy `article > div:first-child` selector.
     This selector is deliberately more specific so the mobile stacked layout actually applies. */
    .page-mycourse-detail .registered-lessons {
        width: calc(100% - 40px);
        margin-inline: 20px;
        padding: 32px 32px 0;
        border-radius: 12px 12px 0 0;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-lessons__rows {
        width: 100%;
        max-width: 271px;
        margin-inline: auto;
        gap: 8px;
        padding: 0;
        border: 0;
    }

    .page-mycourse-detail .registered-lessons article {
        width: 100%;
        min-height: 228px;
        margin: 0;
        padding: 12px;
        gap: 8px;
        border: 0;
        border-radius: 8px;
        background: var(--ds-neutral-white);
    }

        .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child {
            display: flex;
            width: 100%;
            min-width: 0;
            flex-direction: column;
            grid-template-columns: none;
            gap: 8px;
            align-items: flex-start;
        }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child > b {
                flex: 0 0 24px;
                width: 24px;
                height: 24px;
                align-self: flex-start;
            }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child > span {
                display: flex;
                width: 100%;
                min-width: 0;
                flex-direction: column;
                gap: 4px;
            }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child strong {
                overflow: hidden;
                color: var(--ds-neutral-light);
                font-size: 16px;
                font-weight: 600;
                line-height: 24px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child small {
                display: block;
                overflow: hidden;
                width: 100%;
                margin: 0;
                color: var(--ds-neutral-lighter);
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                text-overflow: clip;
                white-space: normal;
                overflow-wrap: anywhere;
            }

    .page-mycourse-detail .registered-lesson-time {
        display: flex;
        width: 100%;
        min-height: 20px;
        margin: 0;
        padding: 0;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

        .page-mycourse-detail .registered-lesson-time::before {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
            vertical-align: initial;
        }

    .page-mycourse-detail .registered-lesson-date {
        flex: 0 0 auto;
        font-weight: 500;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lesson-hours {
        flex: 0 0 auto;
        font-weight: 500;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lesson-teacher {
        width: 100%;
        min-height: 38px;
        margin: 0;
        padding: 0;
        gap: 4px;
        justify-content: flex-start;
    }

        .page-mycourse-detail .registered-lesson-teacher::before {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
        }

        .page-mycourse-detail .registered-lesson-teacher img {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
        }

    .page-mycourse-detail .registered-lesson-location {
        position: relative;
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding-left: 20px;
        justify-content: center;
    }

        .page-mycourse-detail .registered-lesson-location::before {
            top: 4px;
        }

        .page-mycourse-detail .registered-lesson-location strong {
            color: var(--ds-primary-default);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        .page-mycourse-detail .registered-lesson-location small {
            width: 100%;
            margin: 0;
            color: var(--ds-neutral-lightest);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .page-mycourse-detail .registered-course-card__contacts {
        width: calc(100% - 40px);
        margin-inline: 20px;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 28px 24px;
        border-radius: 0 0 12px 12px;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-contact {
        width: 100%;
        gap: 4px;
    }

    .page-mycourse-detail .registered-contact__methods {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* latest registered-course small layout — Figma 2046:164956 */
@media (max-width:768px) {
    .page-mycourse-detail .registered-lessons {
        width: calc(100% - 40px);
        margin-inline: 20px;
        padding: 16px 16px 0;
        border-radius: 12px 12px 0 0;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-lessons__rows {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        gap: 16px;
        padding: 0;
        border: 0;
    }

    .page-mycourse-detail .registered-lessons article {
        width: 100%;
        min-height: 232px;
        margin: 0;
        padding: 12px;
        gap: 0;
        border: 0;
        border-radius: 8px;
        background: var(--ds-neutral-white);
    }

        .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child {
            display: flex;
            width: 100%;
            min-width: 0;
            min-height: 76px;
            flex-direction: column;
            grid-template-columns: none;
            gap: 4px;
            align-items: flex-start;
            margin: 0 0 16px;
        }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child > b {
                flex: 0 0 24px;
                width: 24px;
                height: 24px;
                align-self: flex-start;
            }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child > span {
                display: flex;
                width: 100%;
                min-width: 0;
                flex-direction: column;
                gap: 4px;
            }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child strong {
                display: block;
                width: 100%;
                overflow: hidden;
                color: var(--ds-neutral-light);
                font-size: 16px;
                font-weight: 600;
                line-height: 24px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child small {
                display: block;
                width: 100%;
                overflow: hidden;
                margin: 0;
                color: var(--ds-neutral-lighter);
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

    .page-mycourse-detail .registered-lesson-time {
        display: flex;
        width: 100%;
        min-height: 20px;
        margin: 0 0 8px;
        padding: 0;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

        .page-mycourse-detail .registered-lesson-time::before {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
            vertical-align: initial;
        }

    .page-mycourse-detail .registered-lesson-date {
        flex: 0 0 auto;
        font-weight: 500;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lesson-hours {
        flex: 0 0 auto;
        font-weight: 500;
        white-space: nowrap;
    }

    .page-mycourse-detail .registered-lesson-teacher {
        width: 100%;
        min-height: 38px;
        margin: 0 0 8px;
        padding: 0;
        gap: 4px;
        justify-content: flex-start;
    }

        .page-mycourse-detail .registered-lesson-teacher::before {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
        }

        .page-mycourse-detail .registered-lesson-teacher img {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
        }

    .page-mycourse-detail .registered-lesson-location {
        position: relative;
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding-left: 20px;
        justify-content: center;
    }

        .page-mycourse-detail .registered-lesson-location::before {
            top: 4px;
        }

        .page-mycourse-detail .registered-lesson-location strong {
            width: 100%;
            color: var(--ds-primary-default);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        .page-mycourse-detail .registered-lesson-location small {
            width: 100%;
            margin: 0;
            color: var(--ds-neutral-lightest);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .page-mycourse-detail .registered-course-card__contacts {
        width: calc(100% - 40px);
        margin-inline: 20px;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 16px 16px;
        border-radius: 0 0 12px 12px;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-contact {
        width: 100%;
        min-height: 80px;
        gap: 4px;
    }

    .page-mycourse-detail .registered-contact__owner {
        min-height: 24px;
    }

    .page-mycourse-detail .registered-contact__methods {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* course detail mobile schedule — Figma 2046:164956 */
@media (max-width: 768px) {
    .page-course-detail .course-schedule {
        width: 100%;
        margin: 32px 0 0;
        padding: 16px;
        border-radius: 12px;
        background: var(--ds-bg-light-blue);
    }

    .page-course-detail .course-schedule__rows {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 16px;
        margin: 0 0 16px;
        padding: 0;
        border: 0;
    }

        .page-course-detail .course-schedule__rows article {
            display: flex;
            width: 100%;
            min-height: 232px;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
            margin: 0;
            padding: 12px;
            border: 0;
            border-radius: 8px;
            background: var(--ds-neutral-white);
        }

    .page-course-detail .lesson-title {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 76px;
        flex-direction: column;
        grid-template-columns: none;
        gap: 4px;
        align-items: flex-start;
        margin: 0 0 8px;
    }

        .page-course-detail .lesson-title > b {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            align-self: flex-start;
        }

        .page-course-detail .lesson-title > div {
            display: flex;
            width: 100%;
            min-width: 0;
            flex-direction: column;
            gap: 4px;
        }

        .page-course-detail .lesson-title h3 {
            display: block;
            width: 100%;
            margin: 0;
            overflow: hidden;
            color: var(--ds-neutral-light);
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .page-course-detail .lesson-title p {
            display: block;
            width: 100%;
            margin: 0;
            overflow: hidden;
            color: var(--ds-neutral-lighter);
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .page-course-detail .lesson-time,
    .page-course-detail .lesson-teacher,
    .page-course-detail .lesson-location {
        width: 100%;
        margin: 0;
        padding-left: 0;
    }

    .page-course-detail .lesson-time {
        display: flex;
        min-width: 0;
        min-height: 20px;
        flex-flow: row nowrap;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

    .page-course-detail .lesson-time__desktop {
        display: none;
    }

    .page-course-detail .lesson-time__mobile-date {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

        .page-course-detail .lesson-time__mobile-date img {
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            object-fit: contain;
        }

    .page-course-detail .lesson-time__mobile-hours {
        display: inline;
        flex: 0 0 auto;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

    .page-course-detail .lesson-teacher {
        display: flex;
        min-height: 38px;
        gap: 4px;
        align-items: center;
        justify-content: flex-start;
    }

        .page-course-detail .lesson-teacher::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            background: url("../../assets/icons/course-sales.svg") center / 16px 16px no-repeat;
        }

    .page-course-detail .lesson-avatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    .page-course-detail .lesson-location {
        display: flex;
        min-width: 0;
        min-height: 42px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .page-course-detail .lesson-location__title {
        display: flex;
        width: 100%;
        min-width: 0;
        gap: 4px;
        align-items: center;
    }

        .page-course-detail .lesson-location__title img {
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            object-fit: contain;
        }

    .page-course-detail .lesson-location__button {
        width: calc(100% - 20px);
        min-width: 0;
        color: var(--ds-primary-default);
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        text-align: left;
        white-space: nowrap;
    }

    .page-course-detail .lesson-location small {
        width: 100%;
        margin: 0;
        padding-left: 20px;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-course-detail .course-contact {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

    .page-course-detail .course-contact__person {
        display: flex;
        width: 100%;
        min-height: 80px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .page-course-detail .course-contact__owner,
    .page-course-detail .course-contact__item {
        width: 100%;
        min-width: 0;
    }

    .page-course-detail .course-contact__owner {
        min-height: 24px;
    }
}

/* registered course detail mobile states — Figma 1999:85978 / 1999:87126 */
@media (max-width:768px) {
    .page-mycourse-detail .registered-course-card {
        width: 100%;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 12px;
        background: var(--ds-neutral-white);
        box-shadow: 0 4px 15px rgba(19,26,52,.05);
    }

    .page-mycourse-detail .registered-course-card__header {
        display: flex;
        width: 100%;
        min-height: 0;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        padding: 16px;
    }

        .page-mycourse-detail .registered-course-card__header > img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 303/170;
            border-radius: 12px;
            object-fit: cover;
            object-position: center;
        }

    .page-mycourse-detail .registered-course-card__title {
        width: 100%;
        min-width: 0;
        align-self: stretch;
    }

        .page-mycourse-detail .registered-course-card__title h2 {
            overflow: hidden;
            margin: 0;
            color: var(--ds-primary-dark);
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .page-mycourse-detail .registered-course-card__title strong {
            display: block;
            overflow: hidden;
            margin: 4px 0 0;
            color: var(--ds-primary-bright);
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .page-mycourse-detail .registered-course-card__title p {
            overflow: hidden;
            margin: 4px 0 0;
            color: var(--ds-neutral-lighter);
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .page-mycourse-detail .registered-course-card__status {
        display: flex;
        width: 100%;
        flex-direction: column;
        grid-column: auto;
        align-items: flex-start;
        gap: 4px;
        padding: 0;
    }

        .page-mycourse-detail .registered-course-card__status .pill {
            min-height: 31px;
            margin-bottom: 4px;
            padding: 5px 12px;
            font-size: 14px;
            line-height: 20px;
        }

        .page-mycourse-detail .registered-course-card__status small {
            color: var(--ds-neutral-lighter);
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            white-space: nowrap;
        }

    .page-mycourse-detail .registered-lessons__head {
        display: none
    }

    .page-mycourse-detail .registered-lessons__rows {
        display: flex;
        width: 100%;
        flex-direction: column;
        padding: 0;
        border: 0;
    }

    .page-mycourse-detail .registered-course-card__contacts {
        width: 100%;
        margin: 0;
        grid-template-columns: 1fr;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-contact {
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }

    .page-mycourse-detail .registered-contact__owner {
        min-height: 24px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

        .page-mycourse-detail .registered-contact__owner strong {
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
        }

    .page-mycourse-detail .registered-contact__methods {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Pending-result state follows Figma 1999:85978. */
    .page-mycourse-detail.detail-state-pending .registered-lessons {
        width: 100%;
        margin: 0;
        padding: 16px 16px 0;
        border: 0;
        border-radius: 0;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail.detail-state-pending .registered-lessons__rows {
        gap: 8px
    }

    .page-mycourse-detail.detail-state-pending .registered-lessons article {
        display: flex;
        width: 100%;
        min-height: 0;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        margin: 0;
        padding: 12px;
        border: 0;
        border-radius: 8px;
        background: var(--ds-neutral-white);
    }

        .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child {
            display: grid;
            width: 100%;
            min-width: 0;
            min-height: 0;
            grid-template-columns: 24px minmax(0,1fr);
            gap: 8px;
            align-items: start;
            margin: 0;
        }

            .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > b {
                width: 24px;
                height: 24px;
                align-self: start;
            }

            .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > span {
                display: block;
                min-width: 0;
            }

    .page-mycourse-detail.detail-state-pending .registered-lesson-topic strong {
        display: block;
        overflow: hidden;
        color: var(--ds-neutral-light);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-mycourse-detail.detail-state-pending .registered-lesson-topic small {
        display: block;
        overflow: visible;
        margin: 4px 0 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-mycourse-detail.detail-state-pending .registered-lesson-time {
        position: relative;
        display: flex;
        width: calc(100% - 32px);
        min-height: 40px;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        margin: 0 0 0 32px;
        padding: 0 0 0 20px;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: normal;
    }

        .page-mycourse-detail.detail-state-pending .registered-lesson-time::before {
            content: "";
            position: absolute;
            top: 2px;
            left: 0;
            display: block;
            width: 16px;
            height: 16px;
            margin: 0;
            background: url("../../assets/icons/course-calendar.svg") center/16px 16px no-repeat;
        }

    .page-mycourse-detail.detail-state-pending .registered-lesson-date {
        font-weight: 500;
        white-space: nowrap;
    }

    .page-mycourse-detail.detail-state-pending .registered-lesson-hours {
        font-weight: 500;
        white-space: nowrap;
    }

    .page-mycourse-detail.detail-state-pending .registered-lesson-teacher {
        display: flex;
        width: calc(100% - 32px);
        min-height: 38px;
        align-items: center;
        gap: 8px;
        margin: 0 0 0 32px;
        padding: 0;
    }

        .page-mycourse-detail.detail-state-pending .registered-lesson-teacher::before {
            content: none
        }

        .page-mycourse-detail.detail-state-pending .registered-lesson-teacher img {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
        }

    .page-mycourse-detail.detail-state-pending .registered-lesson-location {
        position: relative;
        display: flex;
        width: calc(100% - 32px);
        min-height: 42px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin: 0 0 0 32px;
        padding: 0 0 0 20px;
    }

        .page-mycourse-detail.detail-state-pending .registered-lesson-location::before {
            content: "";
            position: absolute;
            top: 4px;
            left: 0;
            display: block;
            width: 16px;
            height: 16px;
            background: url("../../assets/icons/course-location.svg") center/16px 16px no-repeat;
        }

        .page-mycourse-detail.detail-state-pending .registered-lesson-location strong {
            color: var(--ds-primary-default);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        .page-mycourse-detail.detail-state-pending .registered-lesson-location small {
            width: 100%;
            margin: 0;
            color: var(--ds-neutral-lightest);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .page-mycourse-detail.detail-state-pending .registered-course-card__contacts {
        gap: 12px;
        padding: 16px 28px 16px;
        border-radius: 0 0 12px 12px;
    }

    /* In-progress state follows Figma 1999:87126. */
    .page-mycourse-detail.detail-state-attendance .registered-lessons {
        width: 100%;
        margin: 0;
        padding: 16px 16px 0;
        border: 0;
        border-radius: 0;
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail.detail-state-attendance .registered-lessons__rows {
        gap: 16px
    }

    .page-mycourse-detail.detail-state-attendance .registered-lessons article {
        display: flex;
        width: 100%;
        min-height: 0;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        margin: 0;
        padding: 12px;
        border: 0;
        border-radius: 8px;
        background: var(--ds-neutral-white);
    }

        .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child {
            display: flex;
            width: 100%;
            min-width: 0;
            min-height: 76px;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
            margin: 0 0 8px;
        }

            .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child > b {
                flex: 0 0 24px;
                width: 24px;
                height: 24px;
                align-self: flex-start;
            }

            .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child > span {
                display: flex;
                width: 100%;
                min-width: 0;
                flex-direction: column;
                gap: 4px;
            }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-topic strong {
        display: block;
        width: 100%;
        overflow: hidden;
        color: var(--ds-neutral-light);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-topic small {
        display: block;
        width: 100%;
        overflow: hidden;
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-time {
        display: flex;
        width: 100%;
        min-height: 20px;
        flex-flow: row nowrap;
        gap: 4px;
        align-items: center;
        margin: 0;
        padding: 0;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-time::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
            background: url("../../assets/icons/course-calendar.svg") center/16px 16px no-repeat;
        }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-date {
        font-weight: 500;
        white-space: nowrap
    }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-hours {
        font-weight: 500;
        white-space: nowrap
    }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-teacher {
        display: flex;
        width: 100%;
        min-height: 38px;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
    }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-teacher::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin: 0;
            background: url("../../assets/icons/course-sales.svg") center/16px 16px no-repeat;
        }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-teacher img {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
        }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-location {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 42px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin: 0;
        padding: 0 0 0 20px;
    }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-location::before {
            content: "";
            position: absolute;
            top: 4px;
            left: 0;
            display: block;
            width: 16px;
            height: 16px;
            background: url("../../assets/icons/course-location.svg") center/16px 16px no-repeat;
        }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-location strong {
            width: 100%;
            color: var(--ds-primary-default);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-location small {
            width: 100%;
            margin: 0;
            color: var(--ds-neutral-lightest);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance {
        display: flex;
        width: 100%;
        min-height: 20px;
        align-items: center;
        gap: 4px;
        margin: 8px 0 0;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            opacity: .72;
            background: url("../../assets/icons/bookmark-line.svg") center/16px 16px no-repeat;
        }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance.is-muted {
            color: var(--ds-neutral-pale)
        }

            .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance.is-muted::before {
                opacity: .35
            }

    .page-mycourse-detail.detail-state-attendance .registered-course-card__contacts {
        gap: 16px;
        padding: 16px;
        border-radius: 0 0 12px 12px;
    }
}

/* Keep mobile-only attendance metadata out of the existing desktop table layout. */
.page-mycourse-detail .registered-lesson-attendance {
    display: none
}

@media (max-width:768px) {
    .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance {
        display: flex
    }

    .page-mycourse-detail .registered-course-card__status {
        margin-top: -8px
    }
}

@media (max-width:768px) {
    .page-mycourse-detail .registered-course-card__title p::after {
        content: "・名額 100 人"
    }
}

/* My Courses - cancellation confirmation dialog (Figma 2002:91914 / 2002:92420) */
.page-mycourse-list .cancel-dialog {
    width: min(440px, calc(100% - 40px));
    max-width: 440px;
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    border: 0;
    border-radius: 10px;
    background: var(--ds-neutral-white);
    box-shadow: 0 24px 60px rgba(19,26,52,.28);
}

    .page-mycourse-list .cancel-dialog::backdrop {
        background: rgba(19,26,52,.6);
    }

.page-mycourse-list .cancel-dialog__surface {
    padding: 0;
    background: var(--ds-neutral-white);
}

.page-mycourse-list .cancel-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: .616px solid #e6e6e6;
}

    .page-mycourse-list .cancel-dialog__header h2 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

.page-mycourse-list .cancel-dialog__close {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .page-mycourse-list .cancel-dialog__close span::before,
    .page-mycourse-list .cancel-dialog__close span::after {
        position: absolute;
        top: 17px;
        left: 10px;
        width: 16px;
        height: 2px;
        content: "";
        background: var(--ds-primary-default);
        border-radius: 1px;
    }

    .page-mycourse-list .cancel-dialog__close span::before {
        transform: rotate(45deg);
    }

    .page-mycourse-list .cancel-dialog__close span::after {
        transform: rotate(-45deg);
    }

    .page-mycourse-list .cancel-dialog__close:hover {
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-list .cancel-dialog__close:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 1px;
    }

.page-mycourse-list .cancel-dialog__body {
    display: block;
    margin-top: 0;
    padding: 16px;
}

.page-mycourse-list .cancel-dialog__prompt {
    margin: 0;
    color: var(--ds-neutral-default);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-mycourse-list .cancel-dialog__course {
    margin-top: 16px;
    padding: 12px 16px;
    border: .616px solid var(--ds-neutral-paler);
    border-radius: 6px;
    background: var(--ds-bg-light-blue);
}

    .page-mycourse-list .cancel-dialog__course > strong {
        display: block;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

.page-mycourse-list .cancel-dialog__course-meta {
    display: flex;
    gap: 4px;
    margin: 4px 0 0;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-mycourse-list .cancel-dialog__warning {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding: 12px;
    color: var(--ds-danger-default);
    background: var(--surface-danger-soft);
}

.page-mycourse-list .cancel-dialog__warning-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.page-mycourse-list .cancel-dialog__warning p {
    margin: 0;
    color: var(--ds-danger-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.page-mycourse-list .cancel-dialog__actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: .616px solid #e6e6e6;
}

    .page-mycourse-list .cancel-dialog__actions .btn {
        flex: 0 0 auto;
        min-width: 0;
        height: 39.991px;
        min-height: 39.991px;
        padding: 0;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }

.page-mycourse-list .cancel-dialog__back {
    width: 77.232px;
    color: var(--ds-primary-default);
    border: .616px solid var(--ds-primary-default);
    background: var(--ds-neutral-white);
}

.page-mycourse-list .cancel-dialog__confirm {
    width: 104px;
    color: var(--action-danger-text);
    border: 1px solid var(--action-danger-border);
    background: var(--action-danger-bg);
}

.page-mycourse-list .cancel-dialog__back:hover {
    background: var(--ds-bg-light-blue);
}

.page-mycourse-list .cancel-dialog__confirm:hover {
    background: var(--action-danger-hover-bg);
}

.page-mycourse-list .cancel-dialog__confirm:active {
    background: var(--action-danger-pressed-bg);
}

.page-mycourse-list .cancel-dialog__back:focus-visible,
.page-mycourse-list .cancel-dialog__confirm:focus-visible {
    outline: 2px solid var(--ds-primary-bright);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .page-mycourse-list .cancel-dialog {
        width: 335px;
        max-width: calc(100% - 40px);
    }

    .page-mycourse-list .cancel-dialog__course-meta {
        flex-direction: column;
        gap: 0;
    }
}

/* ===== COURSE OVERVIEW MOBILE CARD LAYOUT ===== */
@media (max-width: 768px) {
    .page-course-overview .course-catalog__grid {
        gap: 8px;
    }

    .page-course-overview .course-card--compact {
        position: relative;
        width: 100%;
        height: 154px;
        min-height: 154px;
        padding: 0;
    }

        .page-course-overview .course-card--compact .course-card__media,
        .page-course-overview .course-card--compact:first-child .course-card__media {
            position: absolute;
            top: 16px;
            left: 0;
            width: 130px;
            height: 73px !important;
            border-radius: 8px;
        }

            .page-course-overview .course-card--compact .course-card__media img {
                border-radius: 8px;
                object-position: center bottom;
            }

        .page-course-overview .course-card--compact .course-card__promo-tag {
            padding: 4px 12px;
            font-size: 12px;
            line-height: 16px;
            border-radius: 8px 0 8px 0;
        }

        .page-course-overview .course-card--compact > .course-card__category-tag {
            position: absolute;
            top: 18px;
            left: 146px;
            min-height: 18px;
            margin: 0;
            padding: 0;
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            border-radius: 0;
        }

        .page-course-overview .course-card--compact .course-card__body {
            position: static;
            display: block;
            min-height: 0;
            padding: 0 !important;
        }

        .page-course-overview .course-card--compact .course-card__title {
            position: absolute;
            top: 44px;
            left: 146px;
            display: -webkit-box;
            width: calc(100% - 146px);
            height: 48px !important;
            max-height: 48px;
            min-height: 48px !important;
            margin: 0;
            overflow: hidden;
            font-size: 16px !important;
            font-weight: 600;
            line-height: 24px !important;
            text-overflow: ellipsis;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .page-course-overview .course-card--compact .course-card__info {
            position: absolute;
            top: 97px;
            left: 0;
            width: 130px;
            gap: 4px !important;
        }

        .page-course-overview .course-card--compact .course-card__info-row {
            gap: 4px;
            min-height: 20px;
            color: var(--ds-neutral-light);
            font-size: 14px !important;
            font-weight: 400;
            line-height: 20px !important;
            white-space: nowrap;
        }

        .page-course-overview .course-card--compact .course-card__info-icon {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
        }

        .page-course-overview .course-card--compact .course-card__date-prefix {
            display: none;
        }

        .page-course-overview .course-card--compact .btn {
            position: absolute;
            top: 104px;
            left: 146px;
            width: calc(100% - 146px);
            height: 32px;
            min-height: 32px;
            margin: 0;
            padding: 4px 8px;
            font-size: 14px;
            font-weight: 600;
            line-height: 16px;
        }
}

/* In-progress course detail attendance column and mobile attendance row. */
.page-mycourse-detail .registered-lessons__attendance-head,
.page-mycourse-detail .registered-lesson-attendance {
    display: none;
}

.page-mycourse-detail.detail-state-attendance .registered-lessons__attendance-head {
    display: flex;
}

@media (min-width:1280px) {
    .page-mycourse-detail.detail-state-attendance .registered-lessons__head,
    .page-mycourse-detail.detail-state-attendance .registered-lessons article {
        grid-template-columns: 285px 256px 152px 233px minmax(0,1fr);
        gap: 16px;
    }
}

@media (min-width:769px) and (max-width:1279px) {
    .page-mycourse-detail.detail-state-attendance .registered-lessons__head,
    .page-mycourse-detail.detail-state-attendance .registered-lessons article {
        grid-template-columns: minmax(160px,1.3fr) minmax(150px,1.1fr) minmax(90px,.72fr) minmax(130px,1fr) minmax(100px,.82fr);
        gap: 12px;
    }
}

@media (min-width:769px) {
    .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance {
        display: flex;
        min-width: 0;
        align-items: center;
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        white-space: nowrap;
    }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance.is-muted {
            color: var(--ds-neutral-pale);
        }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance::before {
            content: none;
        }
}

@media (max-width:768px) {
    .page-mycourse-detail.detail-state-attendance .registered-lessons__attendance-head {
        display: none;
    }

    .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance {
        display: flex;
        width: 100%;
        min-height: 20px;
        align-items: center;
        gap: 4px;
        margin: 8px 0 0;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            opacity: 1;
            background: url("../../assets/icons/checkin-status.svg") center/16px 16px no-repeat;
        }

        .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance.is-muted {
            color: var(--ds-neutral-pale);
        }

            .page-mycourse-detail.detail-state-attendance .registered-lesson-attendance.is-muted::before {
                opacity: .35;
            }
}

@media (max-width:768px) {
    .page-mycourse-list .mycourse-row__attendance-summary {
        white-space: normal
    }
}


/* My course detail: interactive teacher / venue cells reuse course detail dialogs. */
.page-mycourse-detail .registered-lesson-teacher__trigger,
.page-mycourse-detail .registered-lesson-location__trigger {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.page-mycourse-detail .registered-lesson-teacher__trigger {
    align-items: center;
    gap: 8px;
}

.page-mycourse-detail .registered-lesson-location__trigger {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

    .page-mycourse-detail .registered-lesson-teacher__trigger:hover span,
    .page-mycourse-detail .registered-lesson-teacher__trigger:focus-visible span,
    .page-mycourse-detail .registered-lesson-location__trigger:hover strong,
    .page-mycourse-detail .registered-lesson-location__trigger:focus-visible strong {
        color: var(--action-primary-hover-bg);
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-thickness: from-font;
        text-underline-position: from-font;
    }

    .page-mycourse-detail .registered-lesson-teacher__trigger:focus-visible,
    .page-mycourse-detail .registered-lesson-location__trigger:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 3px;
        border-radius: 4px;
    }

@media (max-width:768px) {
    /* Pending-result list follows Figma 2047:165685: all info rows share the same left edge. */
    .page-mycourse-detail.detail-state-pending .registered-lessons__rows {
        gap: 16px;
    }

    .page-mycourse-detail.detail-state-pending .registered-lessons article {
        gap: 8px;
    }

        .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child {
            display: flex;
            min-height: 76px;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
            margin: 0 0 8px;
        }

            .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > b {
                flex: 0 0 24px;
                align-self: flex-start;
            }

            .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > span {
                display: flex;
                width: 100%;
                min-width: 0;
                flex-direction: column;
                gap: 4px;
            }

    .page-mycourse-detail.detail-state-pending .registered-lesson-topic small {
        margin: 0;
    }

    .page-mycourse-detail.detail-state-pending .registered-lesson-time {
        display: flex;
        width: 100%;
        min-height: 20px;
        flex-flow: row nowrap;
        gap: 4px;
        align-items: center;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

        .page-mycourse-detail.detail-state-pending .registered-lesson-time::before {
            position: static;
            flex: 0 0 16px;
            margin: 0;
        }

    .page-mycourse-detail.detail-state-pending .registered-lesson-teacher {
        display: flex;
        width: 100%;
        min-height: 38px;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
    }

        .page-mycourse-detail.detail-state-pending .registered-lesson-teacher::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            background: url("../../assets/icons/course-sales.svg") center/16px 16px no-repeat;
        }

    .page-mycourse-detail.detail-state-pending .registered-lesson-teacher__trigger,
    .page-mycourse-detail.detail-state-attendance .registered-lesson-teacher__trigger {
        gap: 4px;
    }

    .page-mycourse-detail.detail-state-pending .registered-lesson-location {
        width: 100%;
        margin: 0;
        padding: 0 0 0 20px;
    }

    /* Upcoming / active / ended attendance rows align with the other 16px icons in Figma 2047:166021. */
    .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-attendance {
        width: 100%;
        margin: 8px 0 0;
        padding: 0;
    }
}

@media (max-width:768px) {
    .page-mycourse-detail.detail-state-pending .registered-course-card__contacts {
        gap: 16px;
        padding: 16px;
    }
}

/* ===== COURSE CATALOG EMPTY RESULT =====
   Shared by Course Overview and Course Search. Matches Figma 2081:68777. */
.course-catalog__empty {
    display: flex;
    width: 100%;
    height: 200px;
    padding: 0 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    background: var(--ds-neutral-palest);
}

    .course-catalog__empty[hidden] {
        display: none !important;
    }

    .course-catalog__empty h2 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

    .course-catalog__empty p {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

.course-catalog.is-empty .course-catalog__empty + .pagination {
    margin-top: 56px;
}

.course-catalog.is-empty .pagination__page[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    .course-catalog__empty {
        height: 200px;
        padding: 0 16px;
    }

        .course-catalog__empty h2 {
            font-size: 18px;
            line-height: 28px;
        }

        .course-catalog__empty p {
            max-width: 100%;
            font-size: 14px;
            line-height: 20px;
        }

    .course-catalog.is-empty .course-catalog__empty + .pagination {
        margin-top: 32px;
    }
}

/* Typography normalization — Figma Desktop (大小網 RWD), node 2616:30831. */
.cms-content-card__tag {
    line-height: 20px;
}

.video-dialog__header h2,
.video-dialog__placeholder strong,
.otp-dialog__header h2,
.registration-confirmation > h2,
.mycourse-count b,
.cancel-dialog h2 {
    line-height: 32px;
}

.faq-item__question::before,
.choice-row label,
.form-status,
.confirmation-grid dt,
.confirmation-grid dd,
.mycourse-count,
.registered-course-card header p,
.registered-lessons article span,
.registered-lessons article p,
.registered-course-card > footer,
.course-detail__share {
    line-height: 20px;
}

.contact-card h3,
.course-catalog__empty h2 {
    line-height: 36px;
}

.flow-progress b,
.terms-scroll h3,
.confirmation-grid h3,
.lesson-teacher,
.page-mycourse-detail .registered-contact__owner strong {
    line-height: 24px;
}

.flow-card > header > span,
.registered-lessons__head {
    line-height: 20px;
}

.flow-card__with-action > button,
.masked-field button,
.terms-scroll-button,
.mycourse-filters button,
.mycourse-row__actions .btn {
    line-height: 16px;
}

.otp-dialog__hint,
.registered-course-card__status small,
.registered-lessons article b {
    font-weight: 600;
    line-height: 16px;
}

.registration-accordions summary span {
    line-height: 28px;
}

@media (max-width: 420px) {
    .contact-info__card > a {
        line-height: 24px;
    }
}

@media (max-width: 390px) {
    .course-category-tab {
        font-weight: 600;
        line-height: 16px;
    }
}

@media (max-width: 768px) {
    .registration-accordions summary span {
        line-height: 24px;
    }
}


/* ===== COURSE DETAIL NO SESSIONS ===== */
/* Figma 2125:73510 — course exists but currently has no sessions. */
.course-detail__no-sessions {
    padding: 40px 0 56px;
    background: var(--ds-neutral-palest);
}

.course-detail__no-sessions-notice {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border-radius: 12px;
    background: var(--ds-neutral-white);
    box-shadow: var(--shadow-header);
}

.course-detail__no-sessions-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.course-detail__no-sessions-notice p {
    margin: 0;
    color: var(--ds-neutral-lighter);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

@media (max-width: 768px) {
    .course-detail__no-sessions {
        padding: 24px 0;
    }

    .course-detail__no-sessions-notice {
        min-height: 96px;
        align-items: center;
        justify-content: flex-start;
    }

        .course-detail__no-sessions-notice p {
            min-width: 0;
            flex: 1 1 auto;
        }
}

/* Course detail copy-link feedback — Figma Toast/Sanckbar, node 2133:76529. */
.course-detail__copy-toast {
    position: fixed;
    z-index: 5300;
    top: 96px;
    left: 50%;
    display: flex;
    width: min(433px, calc(100vw - 40px));
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--ds-neutral-lighter);
    box-shadow: 0 2px 4px rgba(59, 66, 70, 0.08);
    color: var(--ds-neutral-white);
    font-family: var(--font-sans);
    font-size: var(--type-card-title-1-size);
    font-weight: var(--type-card-title-1-weight);
    line-height: var(--type-card-title-1-line);
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

    .course-detail__copy-toast.is-visible {
        animation: course-detail-copy-toast-lifecycle 2500ms ease forwards;
    }

    .course-detail__copy-toast.is-error {
        background: var(--ds-warning-default);
    }

@keyframes course-detail-copy-toast-lifecycle {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .course-detail__copy-toast {
        top: 72px;
        width: calc(100vw - 40px);
        max-width: 433px;
        white-space: normal;
    }
}

/* ===== ABOUT US V2 =====
   Figma: 2253:75185 (desktop About page).
   Uses the project's existing self-hosted font stack and local image assets only. */
.about-v2 {
    color: var(--ds-neutral-default);
    background: var(--ds-neutral-white);
}

.about-v2__breadcrumbs {
    /* Shared page-top breadcrumb rhythm: desktop 24px below header, aligned to the 1224px container. */
    width: min(var(--container), calc(100% - var(--gutter) - var(--gutter)));
    min-height: 0;
    margin-inline: auto;
    padding: 24px 0;
}

.about-v2__hero {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: var(--ds-neutral-paler);
}

.about-v2__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.about-v2__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 40px;
}

.about-v2__story-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-v2__story {
    display: grid;
    min-height: 352px;
    grid-template-columns: minmax(0, 556px) minmax(0, 556px);
    gap: 32px;
    align-items: center;
    padding: 20px 40px;
    background: var(--ds-neutral-white);
}

.about-v2__story-media {
    width: 100%;
    height: 312px;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
}

    .about-v2__story-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.about-v2__story:first-child .about-v2__story-media img {
    object-position: center 45%;
}

.about-v2__story--reverse .about-v2__story-media img {
    object-position: center 45%;
}

.about-v2__story-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    padding-block: 16px;
    text-align: center;
}

    .about-v2__story-copy h2 {
        margin: 0;
        color: var(--ds-primary-dark);
        font-family: var(--font-sans);
        font-size: var(--type-heading-5-size);
        font-weight: var(--type-heading-5-weight);
        line-height: var(--type-heading-5-line);
    }

.about-v2__story-text {
    color: var(--ds-neutral-lighter);
    font-family: var(--font-sans);
    font-size: var(--type-body-1-size);
    font-weight: var(--type-body-1-semibold-weight);
    line-height: var(--type-body-1-line);
}

    .about-v2__story-text p {
        margin: 0;
    }

.about-v2__section-title {
    display: flex;
    height: 80px;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 0;
    text-align: center;
}

    .about-v2__section-title h2 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-family: var(--font-sans);
        font-size: var(--type-heading-5-size);
        font-weight: var(--type-heading-5-weight);
        line-height: var(--type-heading-5-line);
    }

.about-v2__value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 282px));
    gap: 16px;
    justify-content: center;
    min-height: 284px;
    padding: 32px 0 16px;
}

.about-v2__value-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .about-v2__value-item > img {
        display: block;
        width: 120px;
        height: 120px;
        margin-bottom: 16px;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(59, 66, 70, .15);
    }

    .about-v2__value-item h3 {
        width: 100%;
        margin: 0 0 4px;
        color: var(--ds-neutral-default);
        font-size: var(--type-heading-6-size);
        font-weight: var(--type-heading-6-weight);
        line-height: var(--type-heading-6-line);
    }

    .about-v2__value-item p {
        width: min(100%, 256px);
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: var(--type-body-1-size);
        font-weight: var(--type-body-1-semibold-weight);
        line-height: var(--type-body-1-line);
    }

.about-v2__action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 371px));
    gap: 24px;
    justify-content: center;
    padding: 20px 32px;
}

.about-v2__action-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

    .about-v2__action-card figure {
        width: 100%;
        height: 208px;
        margin: 0;
        overflow: hidden;
        border-radius: 12px;
        background: var(--ds-bg-pale-blue);
    }

        .about-v2__action-card figure img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .about-v2__action-card > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-inline: 4px;
    }

    .about-v2__action-card h3 {
        margin: 0;
        color: var(--ds-neutral-light);
        font-size: var(--type-card-title-1-size);
        font-weight: var(--type-card-title-1-weight);
        line-height: var(--type-card-title-1-line);
    }

    .about-v2__action-card p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: var(--type-body-1-size);
        font-weight: var(--type-body-1-medium-weight);
        line-height: var(--type-body-1-line);
    }

.about-v2__closing {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 236px;
    padding: 56px 0 16px;
    color: var(--ds-primary-dark);
    text-align: center;
}

    .about-v2__closing h2 {
        margin: 0;
        color: var(--ds-primary-dark);
        font-size: var(--type-heading-5-size);
        font-weight: var(--type-heading-5-weight);
        line-height: var(--type-heading-5-line);
    }

    .about-v2__closing p {
        margin: 0;
        color: var(--ds-neutral-light);
        font-size: var(--type-heading-7-size);
        font-weight: var(--type-heading-5-weight);
        line-height: var(--type-heading-7-line);
    }

.about-v2__slogan {
    padding: 16px 0;
    color: var(--ds-primary-bright);
    font-size: var(--type-heading-4-size);
    font-weight: var(--type-heading-4-weight);
    line-height: var(--type-heading-4-line);
    text-align: center;
}

    .about-v2__slogan p {
        margin: 0;
    }

.about-v2__panorama {
    width: 100%;
    height: auto;
    margin: 16px 0 0;
    overflow: hidden;
    background: var(--ds-bg-pale-blue);
}

    .about-v2__panorama img {
        display: block;
        width: 100%;
        height: auto;
    }

@media (max-width: 1279px) and (min-width: 769px) {
    .about-v2__story {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 24px;
    }

    .about-v2__story-media {
        height: 280px;
    }

    .about-v2__value-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .about-v2__action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-inline: 24px;
    }
}

@media (max-width: 768px) {
    .about-v2__breadcrumbs {
        min-height: 0;
        padding: 16px 0;
    }

    .about-v2__content {
        width: 100%;
        gap: 8px;
        padding: 24px 20px 0;
    }

    .about-v2__story-list {
        gap: 8px;
    }

    .about-v2__story,
    .about-v2__story--reverse {
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: 16px;
        padding: 16px 0 24px;
    }

        .about-v2__story--reverse .about-v2__story-copy {
            order: 2;
        }

        .about-v2__story--reverse .about-v2__story-media {
            order: 1;
        }

    .about-v2__story-media {
        height: auto;
        aspect-ratio: 335 / 188;
        border-radius: 12px;
    }

    .about-v2__story-copy {
        gap: 12px;
        padding: 0;
    }

        .about-v2__story-copy h2 {
            font-size: var(--type-heading-6-size);
            line-height: var(--type-heading-6-line);
        }

    .about-v2__story-text {
        font-weight: var(--type-body-1-weight);
    }

    .about-v2__section-title {
        height: auto;
        min-height: 72px;
        align-items: center;
        padding: 16px 0;
    }

        .about-v2__section-title h2 {
            font-size: var(--type-heading-6-size);
            line-height: var(--type-heading-6-line);
            white-space: normal;
        }

    .about-v2__value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
        min-height: 0;
        padding: 16px 0 24px;
    }

    .about-v2__value-item > img {
        width: 104px;
        height: 104px;
        margin-bottom: 12px;
    }

    .about-v2__value-item h3 {
        font-size: var(--type-card-title-1-size);
        line-height: var(--type-card-title-1-line);
    }

    .about-v2__value-item p {
        font-size: 14px;
        font-weight: var(--type-body-2-weight);
        line-height: 20px;
    }

    .about-v2__action-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 8px 0 24px;
    }

    .about-v2__action-card {
        gap: 12px;
    }

        .about-v2__action-card figure {
            height: auto;
            aspect-ratio: 335 / 188;
        }

        .about-v2__action-card p {
            font-size: 14px;
            line-height: 20px;
        }

    .about-v2__closing {
        min-height: 0;
        gap: 8px;
        padding: 32px 0 16px;
    }

        .about-v2__closing h2 {
            font-size: var(--type-heading-5-size);
            line-height: var(--type-heading-5-line);
        }

        .about-v2__closing p {
            font-size: var(--type-heading-7-size);
            line-height: var(--type-heading-7-line);
        }

            .about-v2__closing p br {
                display: none;
            }

    .about-v2__slogan {
        padding: 16px 0 32px;
        font-size: 28px;
        line-height: 40px;
    }

    .about-v2__panorama {
        margin-top: 0;
    }
}

@media (max-width: 390px) {
    .about-v2__value-grid {
        grid-template-columns: 1fr;
    }

    .about-v2__value-item p {
        width: min(100%, 300px);
    }
}

.icon-svg--calendar {
    -webkit-mask-image: url('../../assets/icons/course-calendar.svg');
    mask-image: url('../../assets/icons/course-calendar.svg');
}

.page-mycourse-list .cancel-dialog__course-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 0;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

    .page-mycourse-list .cancel-dialog__course-meta > span {
        display: block;
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

/* Course sessions filter select width refinement */
.page-course-sessions .course-filter-group .form-select--filter[data-select-kind="sort"] {
    width: 330px;
}

.page-course-sessions .course-filter-group .form-select--filter[data-select-kind="status"] {
    width: 280px;
}

.page-course-sessions .course-filter-group .form-select--filter .form-select__trigger {
    padding-right: 14px;
}

.page-course-sessions .course-filter-group .form-select--filter .form-select__value {
    flex: 1 1 auto;
    min-width: 0;
}

.page-course-sessions .course-filter-group .form-select--filter .form-select__arrow {
    margin-left: auto;
}

@media (max-width: 768px) {
    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="sort"],
    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="status"] {
        width: 100%;
    }
}



/* ===== 2026-09-24 cut版差異同步：site-pages.css ===== */

/*

   只補上新切版與目前系統版不同的規則；

   系統既有客製修正，例如課程分類連結、課程卡片、搜尋下拉寬度等規則保留不移除。

*/

.course-category-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 144px;
    height: 56px;
    padding: 8px 16px;
    color: var(--ds-text-static-medium);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    text-decoration: none;
    background: var(--ds-neutral-white);
    border: 2px solid transparent;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(59,66,70,.15);
    cursor: pointer;
}

.course-detail__title-group {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.course-selected__title {
    margin: 0;
    overflow: visible;
    color: var(--ds-primary-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.course-selected__eyebrow {
    display: block;
    margin-top: 4px;
    overflow: visible;
    color: var(--ds-primary-bright);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.course-highlights {
    width: 100%;
    max-width: 1224px;
    margin: 32px auto 0;
}

.course-highlights__hero-visual {
    width: 100%;
    margin: 16px 0 0;
    overflow: hidden;
}

    .course-highlights__hero-visual img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1224 / 689;
        object-fit: cover;
    }

.course-highlights__cards {
    display: grid;
    width: 100%;
    min-height: 321px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    justify-content: center;
    padding: 20px 32px;
}

    .course-highlights__cards h3 {
        margin: 16px 0 4px;
        color: var(--ds-neutral-light);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

    .course-highlights__cards p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

.course-highlights__media {
    display: grid;
    width: 100%;
    min-height: 352px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: center;
    padding: 20px 40px;
}

.course-highlights__media-copy h3 {
    margin: 0;
    color: var(--ds-primary-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.course-highlights__horizontal-grid {
    display: grid;
    width: 100%;
    min-height: 195px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 20px 32px;
}

.course-highlights__horizontal-copy h3 {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding-left: 12px;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.course-highlights__dot {
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    width: 4px;
    height: 4px;
    background: var(--ds-positive-light);
}

.course-highlights__feature-grid {
    display: grid;
    width: 100%;
    min-height: 280px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    justify-content: center;
    padding: 32px 24px 16px;
}

    .course-highlights__media-copy h3,
    .course-highlights__horizontal-copy h3,
    .course-highlights__cards h3,
    .course-highlights__feature-grid h3 {
        max-width: 100%;
        max-height: none;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        -webkit-line-clamp: unset;
    }

.page-mycourse-list .mycourse-row__heading h2 {
    order: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    color: var(--ds-primary-default);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    text-overflow: clip;
}

.page-mycourse-list .mycourse-row__heading strong {
    order: 1;
    display: block;
    max-width: 100%;
    overflow: visible;
    color: var(--ds-primary-bright);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip;
    white-space: normal;
}

.page-mycourse-list .mycourse-row__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    min-height: 32px;
    padding: 4px 8px;
    color: var(--ds-primary-light);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid var(--ds-primary-light);
    border-radius: 6px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .page-mycourse-list .mycourse-row__cancel:hover {
        color: var(--ds-primary-bright);
        border-color: var(--ds-primary-bright);
    }

.page-mycourse-list .mycourse-row__cancel {
    flex-shrink: 0;
    white-space: nowrap;
}

.page-mycourse-list .mycourse-row__application .mycourse-row__cancel-note {
    margin: 0;
    color: var(--ds-danger-default);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.page-mycourse-list .cancel-dialog__course > strong {
    display: block;
    color: var(--ds-neutral-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.page-mycourse-list .cancel-dialog__course-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 0;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-mycourse-list .mycourse-row__identity > img,
.page-mycourse-detail .registered-course-card__header > img,
.page-mycourse-detail .course-info-dialog__teacher-avatar,
.page-mycourse-detail .course-info-dialog__venue-image {
    object-fit: cover;
    object-position: center center;
}

.page-mycourse-detail .registered-lesson-topic strong,
.page-mycourse-detail .registered-lesson-topic small,
.page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child strong,
.page-mycourse-detail .registered-lessons article > .registered-lesson-topic:first-child small {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}



@media (max-width:768px) {

    .course-highlights__cards {
        display: flex;
        min-height: 0;
        margin: 0;
        flex-direction: column;
        gap: 20px;
        padding: 8px 0;
        overflow: visible;
    }

        .course-highlights__cards h3 {
            margin-top: 12px;
            font-size: 16px;
            line-height: 24px;
        }

        .course-highlights__cards p {
            font-size: 14px;
            line-height: 20px;
        }

    .course-highlights__horizontal-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 8px 0;
    }

    .course-highlights__feature-grid {
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        padding: 24px 0 8px;
    }
}

/* ===== 2026-09-29 cut版差異同步：site-pages.css ===== */
/*
   以系統版 site-pages.css 為基底，只補入最新切版與目前系統版不同的規則。
   系統既有客製修正保留不移除，例如：
   - 課程分類連結底線修正
   - 課程卡片 / 梯次篩選下拉寬度修正
   - 我的課程取消 Dialog 樣式
   - 課程詳細頁、我的課程詳細頁既有後端套版相容修正
*/

/* 內容頁 / CMS 共用區塊 */
.content-hero__eyebrow,
.cms-module__eyebrow {
    margin: 0;
    color: var(--ds-primary-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .08em;
}

.cms-media-text__content h2,
.cms-video__content h2 {
    margin: 0;
    color: var(--ds-primary-dark);
    font-size: 32px;
    line-height: 48px;
}

.cms-media-text__content p,
.cms-video__content p {
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 18px;
    line-height: 28px;
}

/* 聯絡我們 */
.contact-section + .contact-section {
    margin-top: 88px;
}

.contact-card > * {
    position: relative;
    z-index: 1;
}

.contact-faq {
    min-height: auto;
    padding: 40px 0;
    background: var(--ds-neutral-palest);
}

.contact-intro__heading > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.contact-intro__heading > img {
    display: block;
    width: 48px;
    height: 16px;
    object-fit: contain;
}

.contact-info__list {
    display: grid;
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.contact-info__card > a {
    overflow: hidden;
    max-width: 100%;
    color: var(--ds-primary-default);
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .contact-info__card > a:hover {
        text-decoration: underline;
    }

/* 關於我們 */
.about-intro__heading > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.about-intro__heading > img {
    display: block;
    width: 48px;
    height: 16px;
    object-fit: contain;
}

/* 我的課程詳細頁 */
.page-mycourse-detail .registered-course-card__header > img {
    width: 206px;
    height: 116px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

.page-mycourse-detail .registration-data > h2 {
    margin: 0 0 20px;
    color: var(--ds-primary-dark);
    font-size: 18px;
    line-height: 28px;
}

.page-mycourse-detail .registration-data-grid > div {
    min-height: 58px;
    padding: 4px 0 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

@media (max-width: 768px) {
    .content-hero,
    .content-hero__inner {
        min-height: 300px;
    }

    .cms-module__title,
    .cms-media-text__content h2,
    .cms-video__content h2,
    .contact-section__header h2 {
        font-size: 24px;
        line-height: 36px;
    }

    .cms-module__summary,
    .cms-rich-text__body,
    .cms-media-text__content p,
    .cms-video__content p,
    .contact-section__header p {
        font-size: 16px;
        line-height: 24px;
    }

    .cms-card-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-section + .contact-section {
        margin-top: 64px;
    }

    .contact-card h3,
    .contact-card__value {
        font-size: 20px;
        line-height: 32px;
    }

    .contact-info__card > a {
        font-size: 18px;
        line-height: 28px;
    }

    .about-intro__heading > div {
        gap: 4px;
    }

    .about-intro__heading > img {
        width: 32px;
        height: 11px;
    }

    .page-mycourse-detail .registered-course-card__header > img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 303 / 170;
        border-radius: 12px;
        object-fit: cover;
        object-position: center;
    }

    .page-mycourse-detail .registration-data > h2 {
        margin-bottom: 16px;
    }

    .page-mycourse-detail .registered-lesson-topic > b {
        flex: 0 0 24px;
        align-self: flex-start;
    }

    .page-mycourse-detail .registered-lesson-topic > span {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > b {
        flex: 0 0 24px;
        align-self: flex-start;
    }

    .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > span {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }

    .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child > b {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        align-self: flex-start;
    }

    .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child > span {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 420px) {
    .contact-info__card > a {
        font-size: 16px;
    }
}

/* ===== 2026-09-30 課程詳情頁 PM 調整：保守 CSS patch ===== */
/*
   以目前系統版 site-pages.css 為基底，只補課程詳情頁本次 PM 需求需要的最小 CSS 差異。
   重要原則：
   - 不整段搬切版 CSS。
   - 不覆蓋課程主圖、內容模組圖片、講師圖片、地點圖片。
   - 小網隱藏圖片只鎖定梯次摘要圖 .course-selected__thumbnail。
   - JS 與 Razor 結構後續再分段處理。
*/

/* 分享區移到頁面下方後的間距 */
.page-course-detail .course-detail__share--bottom {
    margin-top: 48px;
    justify-content: flex-start;
}

/* 梯次卡片：縮短高度、保留完整顯示與切換按鈕空間 */
.page-course-detail .course-session-card {
    min-height: 72px;
    height: 72px;
    gap: 0;
    padding: 20px 16px;
}

.page-course-detail .course-session-card__top {
    gap: 12px;
}

.page-course-detail .course-session-card .pill {
    padding-inline: 10px;
}

/* 梯次狀態 pill 移到左側；搭配 Razor 將狀態放在 title 前時使用 */
@media (min-width: 1280px) {
    .page-course-detail .course-session-card .pill {
        order: -1;
        flex: 0 0 auto;
    }

    .page-course-detail .course-session-card strong {
        min-width: 0;
    }
}

/* 梯次摘要：移除右側堂數 / 名額欄後，卡片改為圖片 + 文字 */
.page-course-detail .course-selected__summary-card {
    grid-template-columns: 206px minmax(0, 1fr);
}

.page-course-detail .course-selected__title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-course-detail .course-selected__eyebrow {
    overflow: visible;
    color: var(--ds-neutral-lighter);
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 報名期間移到梯次副標下方 */
.page-course-detail .course-selected__registration-period {
    margin: 8px 0 0;
    color: var(--ds-primary-bright);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    white-space: normal;
}

/* 立即報名區塊文案改為條列後的樣式 */
.page-course-detail .course-registration-bar__notice {
    width: min(776px, 100%);
    margin: 0;
    padding-left: 27px;
    color: var(--ds-neutral-default);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

    .page-course-detail .course-registration-bar__notice li {
        margin: 0;
    }

    .page-course-detail .course-registration-bar__notice strong {
        color: var(--ds-positive-default);
        font: inherit;
    }

/* 課堂時間表移到立即報名下方後的間距與欄寬 */
.page-course-detail .course-schedule {
    width: 100%;
    margin-top: 24px;
}

.page-course-detail .course-schedule__head,
.page-course-detail .course-schedule__rows article {
    grid-template-columns: minmax(0, 312px) minmax(0, 264px) minmax(0, 180px) minmax(0, 304px);
}

.page-course-detail .course-schedule__rows article {
    min-height: 76px;
}

/* 課堂序號由圓形數字改為「第 n 堂」文字 */
.page-course-detail .lesson-title {
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 7px;
}

    .page-course-detail .lesson-title > b {
        display: block;
        width: 65px;
        min-width: 65px;
        height: auto;
        color: var(--ds-primary-dark);
        font: 600 16px/24px var(--font-sans);
        white-space: nowrap;
        border-radius: 0;
        background: transparent;
    }

/* 中尺寸：梯次卡片高度跟切版一致，但不動其他圖片樣式 */
@media (min-width: 769px) and (max-width: 1279px) {
    .page-course-detail .course-session-card {
        min-height: 92px;
        height: 92px;
    }
}

/* 小網：只隱藏梯次摘要圖片，不影響課程主圖、內容圖、講師圖與地點圖 */
@media (max-width: 768px) {
    .page-course-detail .course-detail__share--bottom {
        margin-top: 40px;
        justify-content: flex-start;
    }

    .page-course-detail .course-session-card {
        min-height: 92px;
        height: 92px;
    }

    .page-course-detail .course-session-card__top {
        align-items: flex-start;
    }

    .page-course-detail .course-session-card .pill {
        order: -1;
        flex: 0 0 auto;
    }

    .page-course-detail .course-selected__summary-card {
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 0 0 16px;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

    .page-course-detail .course-selected__thumbnail {
        display: none;
    }

    .page-course-detail .course-selected__eyebrow,
    .page-course-detail .course-selected__registration-period {
        font-size: 16px;
        line-height: 24px;
    }

    .page-course-detail .course-registration-bar__notice {
        width: 100%;
        padding-left: 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .page-course-detail .course-schedule {
        margin: 32px 0 0;
        padding: 16px;
        border-radius: 12px;
    }

    .page-course-detail .lesson-title {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 7px;
    }

        .page-course-detail .lesson-title > b {
            align-self: start;
        }

    .page-course-detail .lesson-time__mobile-date img,
    .page-course-detail .lesson-location__title > img {
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        object-fit: contain;
    }

    .page-course-detail .lesson-location small {
        padding-left: 0;
    }
}

/* ===== 2026-10-01 課程詳情頁報名梯次切版差異同步 ===== */
/*
   依照 course-detail.html / 切版版 site-pages.css 重新同步「選擇報名梯次」與本次 PM 關聯樣式。
   使用 page-course-detail 限縮，避免影響其他內頁。
*/

/* 分享區移到頁面下方後的間距。 */
.page-course-detail .course-detail__share--bottom {
    margin-top: 48px;
    justify-content: flex-start;
}

/* 報名梯次卡片：切版為較矮卡片，日期區間已從 markup 移除。 */
.page-course-detail .course-session-card {
    min-height: 72px;
    height: 72px;
    gap: 0;
    padding: 20px 16px;
}

.page-course-detail .course-session-card__top {
    gap: 12px;
}

.page-course-detail .course-session-card .pill {
    padding-inline: 10px;
}

.page-course-detail .course-session-card strong {
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 大網切版：狀態 pill 視覺置左，文字靠左緊接，不使用 space-between。 */
@media (min-width: 1280px) {
    .page-course-detail .course-session-card__top {
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .page-course-detail .course-session-card .pill {
        order: -1;
        flex: 0 0 auto;
    }

    .page-course-detail .course-session-card strong {
        min-width: 0;
    }
}

/* 中尺寸：切版為上下排列。 */
@media (min-width: 769px) and (max-width: 1279px) {
    .page-course-detail .course-session-card {
        min-height: 92px;
        height: 92px;
        padding: 16px;
    }

    .page-course-detail .course-session-card__top {
        flex-direction: column;
        gap: 4px;
    }

    .page-course-detail .course-session-card strong {
        width: 100%;
    }
}

/* 小網：切版為上下排列，pill 置上。 */
@media (max-width: 768px) {
    .page-course-detail .course-detail__share--bottom {
        margin-top: 40px;
        justify-content: flex-start;
    }

    .page-course-detail .course-session-card {
        min-height: 92px;
        height: 92px;
        flex: 0 0 223px;
        padding: 16px;
        scroll-snap-align: center;
    }

    .page-course-detail .course-session-card__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .page-course-detail .course-session-card .pill {
        order: -1;
        flex: 0 0 auto;
    }

    .page-course-detail .course-session-card strong {
        width: 100%;
        font-size: 18px;
        line-height: 28px;
    }
}

/* 梯次摘要：移除右側堂數 / 名額後，摘要改為圖片 + 文字。 */
.page-course-detail .course-selected__summary-card {
    grid-template-columns: 206px minmax(0, 1fr);
}

.page-course-detail .course-selected__title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-course-detail .course-selected__eyebrow {
    overflow: visible;
    color: var(--ds-neutral-lighter);
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-course-detail .course-selected__registration-period {
    margin: 8px 0 0;
    color: var(--ds-primary-bright);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    white-space: normal;
}

.page-course-detail .course-registration-bar__notice {
    width: min(776px, 100%);
    margin: 0;
    padding-left: 27px;
    color: var(--ds-neutral-default);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

    .page-course-detail .course-registration-bar__notice li {
        margin: 0;
    }

    .page-course-detail .course-registration-bar__notice strong {
        color: var(--ds-positive-default);
        font: inherit;
    }

.page-course-detail .course-schedule {
    width: 100%;
    margin-top: 24px;
}

.page-course-detail .course-schedule__head,
.page-course-detail .course-schedule__rows article {
    grid-template-columns: minmax(0, 312px) minmax(0, 264px) minmax(0, 180px) minmax(0, 304px);
}

.page-course-detail .course-schedule__rows article {
    min-height: 76px;
}

.page-course-detail .lesson-title {
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 7px;
}

    .page-course-detail .lesson-title > b {
        display: block;
        width: 65px;
        min-width: 65px;
        height: auto;
        color: var(--ds-primary-dark);
        font: 600 16px/24px var(--font-sans);
        white-space: nowrap;
        border-radius: 0;
        background: transparent;
    }

/* 小網：只隱藏梯次摘要圖，不影響課程主圖、內容圖、講師圖與地點圖。 */
@media (max-width: 768px) {
    .page-course-detail .course-selected__summary-card {
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 0 0 16px;
        border-bottom: 1px solid var(--ds-neutral-paler);
    }

    .page-course-detail .course-selected__thumbnail {
        display: none;
    }

    .page-course-detail .course-selected__eyebrow,
    .page-course-detail .course-selected__registration-period {
        font-size: 16px;
        line-height: 24px;
    }

    .page-course-detail .course-registration-bar__notice {
        width: 100%;
        padding-left: 24px;
        font-size: 16px;
        line-height: 24px;
    }

    .page-course-detail .course-schedule {
        margin: 32px 0 0;
        padding: 16px;
        border-radius: 12px;
    }

    .page-course-detail .lesson-title {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 7px;
    }

        .page-course-detail .lesson-title > b {
            align-self: start;
        }

    .page-course-detail .lesson-time__mobile-date img,
    .page-course-detail .lesson-location__title > img {
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        object-fit: contain;
    }

    .page-course-detail .lesson-location small {
        padding-left: 0;
    }
}

/* ===== 2026-10-01 報名注意事項 Dialog 樣式整合 ===== */
/*
   來源：切版版 site-pages.css 的 Registration notice dialog 區塊。
   只加入報名注意事項提示窗相關 selector，不調整其他 dialog。
*/
/* Registration notice dialog — Figma 2634:118019. */
.registration-notice-dialog {
    width: min(800px, calc(100vw - 40px));
    max-width: 800px;
    max-height: calc(100dvh - 40px);
    padding: 0;
    border: 1px solid var(--ds-neutral-paler);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ds-neutral-white);
    box-shadow: 0 2px 4px rgba(59, 66, 70, .08);
}

    .registration-notice-dialog::backdrop {
        background: rgba(19, 26, 52, .52);
    }

.registration-notice-dialog__surface {
    display: flex;
    max-height: calc(100dvh - 40px);
    flex-direction: column;
    margin: 0;
    background: var(--ds-neutral-white);
}

.registration-notice-dialog__header {
    display: flex;
    min-height: 64px;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-neutral-paler);
}

    .registration-notice-dialog__header h2 {
        flex: 1;
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

.registration-notice-dialog__close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

    .registration-notice-dialog__close:hover {
        background: var(--action-icon-hover-bg);
    }

    .registration-notice-dialog__close:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 2px;
    }

    .registration-notice-dialog__close img {
        width: 24px;
        height: 24px;
    }

.registration-notice-dialog__content {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px 40px 24px;
}

    .registration-notice-dialog__content ol {
        margin: 0;
        padding-left: 24px;
        color: var(--ds-neutral-default);
        font-size: 16px;
        line-height: 24px;
    }

    .registration-notice-dialog__content li + li {
        margin-top: 0;
    }

    .registration-notice-dialog__content strong {
        color: var(--ds-danger-default, #e60013);
        font-weight: 400;
    }

.registration-notice-dialog__actions {
    display: flex;
    min-height: 88px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px 24px;
    background: var(--ds-neutral-white);
}

.registration-notice-dialog__confirm {
    width: auto;
    min-width: 210px;
    padding-inline: 8px;
}

body.is-registration-notice-dialog-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .registration-notice-dialog {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 48px);
        margin: 0;
        border-width: 1px 0 0;
        border-radius: 12px 12px 0 0;
    }

    .registration-notice-dialog__surface {
        max-height: calc(100dvh - 48px);
    }

    .registration-notice-dialog__header {
        align-items: center;
        padding: 16px 20px;
    }

    .registration-notice-dialog__content {
        padding: 20px;
    }

    .registration-notice-dialog__actions {
        padding: 16px 20px 24px;
    }

    .registration-notice-dialog__confirm {
        width: 100%;
    }
}

/* ===== 2026-10-01 開課查詢篩選列調整 ===== */
/*
   PM 需求：
   - 分類頁籤移除，改為分類下拉選單。
   - 上方頁籤改為時間篩選：全部 / 未來 1 個月 / 未來 2 個月 / 未來 3 個月。
*/
.page-course-sessions .course-time-tabs {
    justify-content: flex-start;
}

.page-course-sessions .course-time-tab {
    min-width: 136px;
}

.page-course-sessions .course-filter-group {
    flex-wrap: wrap;
}

    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="category"] {
        width: 280px;
    }

    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="status"] {
        width: 330px;
    }

@media (max-width: 768px) {
    .page-course-sessions .course-time-tabs {
        gap: 12px;
        padding-bottom: 16px;
    }

    .page-course-sessions .course-time-tab {
        min-width: 120px;
    }

    .page-course-sessions .course-filter-bar {
        align-items: stretch;
    }

    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="sort"],
    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="status"],
    .page-course-sessions .course-filter-group .form-select--filter[data-select-kind="category"] {
        width: 100%;
    }
}


/* ===== 2026-10-01 切版 site-pages.css 差異整合 =====
   來源：切版 site-pages.css
   策略：保留系統版內容，僅於檔尾追加切版中新增或異動的 selector override。
   注意：若後續要回收，請以本段 marker 為界線處理。
===== */
.content-hero__eyebrow, .cms-module__eyebrow {
    margin: 0;
    color: var(--ds-primary-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .08em
}

.cms-media-text__content h2, .cms-video__content h2 {
    margin: 0;
    color: var(--ds-primary-dark);
    font-size: 32px;
    line-height: 48px
}

.cms-media-text__content p, .cms-video__content p {
    margin: 0;
    color: var(--ds-neutral-light);
    font-size: 18px;
    line-height: 28px
}

.contact-section + .contact-section {
    margin-top: 88px
}

.contact-card > * {
    position: relative;
    z-index: 1
}

.contact-intro__heading > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px
}

.contact-intro__heading > img {
    display: block;
    width: 48px;
    height: 16px;
    object-fit: contain
}

.contact-faq {
    padding: 40px 0;
    background: var(--ds-neutral-palest)
}

.contact-info__list {
    display: grid;
    grid-template-columns: minmax(0,420px);
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.contact-info__card > a {
    overflow: hidden;
    max-width: 100%;
    color: var(--ds-primary-default);
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

    .contact-info__card > a:hover {
        text-decoration: underline
    }

.about-intro__heading > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px
}

.about-intro__heading > img {
    display: block;
    width: 48px;
    height: 16px;
    object-fit: contain
}

.course-category-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 144px;
    height: 56px;
    padding: 8px 16px;
    color: var(--ds-text-static-medium);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    text-decoration: none;
    background: var(--ds-neutral-white);
    border: 2px solid transparent;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(59,66,70,.15);
    cursor: pointer;
}

.course-detail__share--bottom {
    margin-top: 48px;
    justify-content: flex-start;
}

.course-session-card {
    display: flex;
    min-width: 0;
    min-height: 72px;
    height: 72px;
    flex-direction: column;
    padding: 20px 16px;
    color: var(--ds-neutral-default);
    text-align: left;
    scroll-snap-align: start;
    border: 1px solid var(--ds-neutral-pale);
    border-radius: 12px;
    background: var(--ds-neutral-white);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s;
}

.course-session-card__top {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.course-session-card .pill {
    padding-inline: 10px;
}

.course-session__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    border: 0;
    color: var(--ds-primary-default);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s ease, opacity .2s ease;
}

.course-selected__summary-card {
    display: grid;
    min-height: 148px;
    grid-template-columns: 206px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px 0;
}

.course-selected__title {
    margin: 0;
    overflow: visible;
    color: var(--ds-primary-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.course-selected__eyebrow {
    display: block;
    margin-top: 4px;
    overflow: visible;
    color: var(--ds-neutral-lighter);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.course-selected__registration-period {
    margin: 8px 0 0;
    color: var(--ds-primary-bright);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    white-space: normal;
}

.course-registration-bar__notice {
    width: min(776px, 100%);
    margin: 0;
    padding-left: 27px;
    color: var(--ds-neutral-default);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

    .course-registration-bar__notice li {
        margin: 0;
    }

    .course-registration-bar__notice strong {
        color: var(--ds-positive-default);
        font: inherit;
    }

.course-highlights {
    width: 100%;
    max-width: 1224px;
    margin: 32px auto 0;
}

.course-highlights__cards {
    display: grid;
    width: 100%;
    min-height: 321px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    justify-content: center;
    padding: 20px 32px;
}

    .course-highlights__cards h3 {
        margin: 16px 0 4px;
        color: var(--ds-neutral-light);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

    .course-highlights__cards p {
        margin: 0;
        color: var(--ds-neutral-lighter);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

.course-highlights__media {
    display: grid;
    width: 100%;
    min-height: 352px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: center;
    padding: 20px 40px;
}

.course-highlights__media-copy h3 {
    margin: 0;
    color: var(--ds-primary-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.course-highlights__horizontal-grid {
    display: grid;
    width: 100%;
    min-height: 195px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 20px 32px;
}

.course-highlights__horizontal-copy h3 {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding-left: 12px;
    color: var(--ds-neutral-light);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.course-highlights__dot {
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    width: 4px;
    height: 4px;
    background: var(--ds-positive-light);
}

.course-highlights__feature-grid {
    display: grid;
    width: 100%;
    min-height: 280px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    justify-content: center;
    padding: 32px 24px 16px;
}

.course-schedule {
    width: 100%;
    margin-top: 24px;
    padding: 20px 24px 24px;
    border-radius: 12px;
    background: var(--ds-bg-pale-blue);
}

.course-schedule__head,
.course-schedule__rows article {
    display: grid;
    grid-template-columns: minmax(0, 312px) minmax(0, 264px) minmax(0, 180px) minmax(0, 304px);
    gap: 16px;
    align-items: center;
}

.course-schedule__rows article {
    min-height: 76px;
    padding: 16px;
    border-radius: 5px;
    background: var(--ds-neutral-white);
}

.lesson-title {
    display: grid;
    min-width: 0;
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

    .lesson-title > b {
        display: block;
        width: 65px;
        min-width: 65px;
        color: var(--ds-primary-dark);
        font: 600 16px/24px var(--font-sans);
        white-space: nowrap;
    }

.lesson-location__title > img {
    display: none;
}

.page-mycourse-list .mycourse-row__heading h2 {
    order: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    color: var(--ds-primary-default);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    text-overflow: clip;
}

.page-mycourse-list .mycourse-row__heading strong {
    order: 1;
    display: block;
    max-width: 100%;
    overflow: visible;
    color: var(--ds-primary-bright);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip;
    white-space: normal;
}

.page-mycourse-list .mycourse-row__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    min-height: 32px;
    padding: 4px 8px;
    color: var(--ds-primary-light);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid var(--ds-primary-light);
    border-radius: 6px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .page-mycourse-list .mycourse-row__cancel:hover {
        color: var(--ds-primary-bright);
        border-color: var(--ds-primary-bright);
    }

.page-mycourse-list .mycourse-row__cancel {
    flex-shrink: 0;
    white-space: nowrap;
}

.page-mycourse-list .mycourse-row__application .mycourse-row__cancel-note {
    margin: 0;
    color: var(--ds-danger-default);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.page-mycourse-detail .registered-course-card__header > img {
    width: 206px;
    height: 116px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

.page-mycourse-detail .registration-data > h2 {
    margin: 0 0 20px;
    color: var(--ds-primary-dark);
    font-size: 18px;
    line-height: 28px
}

.page-mycourse-detail .registration-data-grid > div {
    min-height: 58px;
    padding: 4px 0 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

:is(.page-course-detail, .page-registration-complete) .lesson-avatar,
.registration-step1 .registration-course-avatar,
.course-info-dialog__teacher-avatar {
    display: block;
    overflow: hidden;
    border-radius: 50%;
    background: transparent !important;
    color: transparent !important;
    object-fit: cover;
}

.page-mycourse-list .cancel-dialog__course > strong {
    display: block;
    color: var(--ds-neutral-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.page-mycourse-list .cancel-dialog__course-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 0;
    color: var(--ds-neutral-lighter);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.course-category-tabs--period {
    gap: 16px;
}

    .course-category-tabs--period .course-category-tab {
        min-width: 114px;
        height: 48px;
        padding: 12px 20px;
        font-size: 16px;
        line-height: 24px;
    }

        .course-category-tabs--period .course-category-tab:first-child {
            min-width: 100px;
        }

.course-filter-group--wrap {
    flex-wrap: wrap;
}

.course-catalog--compact-empty.is-empty {
    min-height: 0;
}

@media(max-width:768px) {
    .content-hero, .content-hero__inner {
        min-height: 300px
    }



    .cms-module__title, .cms-media-text__content h2, .cms-video__content h2, .contact-section__header h2 {
        font-size: 24px;
        line-height: 36px
    }



    .cms-module__summary, .cms-rich-text__body, .cms-media-text__content p, .cms-video__content p, .contact-section__header p {
        font-size: 16px;
        line-height: 24px
    }



    .cms-card-grid, .contact-grid {
        grid-template-columns: 1fr
    }



    .contact-section + .contact-section {
        margin-top: 64px
    }



    .contact-card h3, .contact-card__value {
        font-size: 20px;
        line-height: 32px
    }



    .contact-info__card > a {
        font-size: 18px;
        line-height: 28px
    }



    .about-intro__heading > div {
        gap: 4px
    }



    .about-intro__heading > img {
        width: 32px;
        height: 11px
    }
}

@media(max-width:420px) {
    .contact-info__card > a {
        font-size: 16px
    }
}

@media (max-width: 768px) {
    .course-category-tab {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        height: auto;
        gap: 4px;
        padding: 4px;
        font-size: 14px;
        line-height: 20px;
        box-shadow: 0 4px 15px rgba(59,66,70,.12);
    }



        .course-category-tab > span:not(.course-category-tab__icon) {
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }



    .course-category-tab__icon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }



    .course-detail__share--bottom {
        margin-top: 40px;
        justify-content: flex-start;
    }



    .course-session-card {
        width: 223px;
        min-height: 92px;
        height: 92px;
        flex: 0 0 223px;
        padding: 16px;
        scroll-snap-align: center;
    }



    .course-session-card__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }



    .course-session-card .pill {
        order: -1;
        flex: 0 0 auto;
    }



    .page-course-detail .course-selected__thumbnail {
        display: none;
    }



    .course-selected__registration-period {
        margin-top: 8px;
        font-size: 16px;
        line-height: 24px;
    }



    .course-registration-bar__notice {
        width: 100%;
        padding-left: 24px;
        font-size: 16px;
        line-height: 24px;
    }



    .course-highlights__cards {
        display: flex;
        min-height: 0;
        margin: 0;
        flex-direction: column;
        gap: 20px;
        padding: 8px 0;
        overflow: visible;
    }



        .course-highlights__cards h3 {
            margin-top: 12px;
            font-size: 16px;
            line-height: 24px;
        }



    .course-highlights__horizontal-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 8px 0;
    }



    .course-highlights__feature-grid {
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        padding: 24px 0 8px;
    }



    .lesson-title {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 7px;
    }



    .lesson-time,
    .lesson-teacher,
    .lesson-location {
        padding-left: 72px;
    }



    .lesson-time__mobile-date img,
    .lesson-location__title > img {
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        object-fit: contain;
    }



    .lesson-location__title > img {
        display: block;
    }



    .lesson-title {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
    }



    .lesson-time,
    .lesson-teacher,
    .lesson-location {
        padding-left: 32px;
    }



        .lesson-location small {
            width: 100%;
            margin-top: 0;
            padding-left: 0;
            color: var(--ds-neutral-lightest);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
        }



    :is(.page-course-detail, .page-registration-complete) .course-schedule {
        width: 100%;
        margin: 32px 0 0;
        padding: 16px;
        border-radius: 12px;
        background: var(--ds-bg-light-blue);
    }



    :is(.page-course-detail, .page-registration-complete) .course-schedule__rows {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 16px;
        margin: 0 0 16px;
        padding: 0;
        border: 0;
    }



        :is(.page-course-detail, .page-registration-complete) .course-schedule__rows article {
            display: flex;
            width: 100%;
            min-height: 232px;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
            margin: 0;
            padding: 12px;
            border: 0;
            border-radius: 8px;
            background: var(--ds-neutral-white);
        }



    :is(.page-course-detail, .page-registration-complete) .lesson-title {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 76px;
        flex-direction: column;
        grid-template-columns: none;
        gap: 4px;
        align-items: flex-start;
        margin: 0 0 8px;
    }



        :is(.page-course-detail, .page-registration-complete) .lesson-title > b {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            align-self: flex-start;
        }



        :is(.page-course-detail, .page-registration-complete) .lesson-title > div {
            display: flex;
            width: 100%;
            min-width: 0;
            flex-direction: column;
            gap: 4px;
        }



        :is(.page-course-detail, .page-registration-complete) .lesson-title h3 {
            display: block;
            width: 100%;
            margin: 0;
            overflow: hidden;
            color: var(--ds-neutral-light);
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }



        :is(.page-course-detail, .page-registration-complete) .lesson-title p {
            display: block;
            width: 100%;
            margin: 0;
            overflow: hidden;
            color: var(--ds-neutral-lighter);
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }



    :is(.page-course-detail, .page-registration-complete) .lesson-time,
    :is(.page-course-detail, .page-registration-complete) .lesson-teacher,
    :is(.page-course-detail, .page-registration-complete) .lesson-location {
        width: 100%;
        margin: 0;
        padding-left: 0;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-time {
        display: flex;
        min-width: 0;
        min-height: 20px;
        flex-flow: row nowrap;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-time__desktop {
        display: none;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-time__mobile-date {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 4px;
        align-items: center;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }



        :is(.page-course-detail, .page-registration-complete) .lesson-time__mobile-date img {
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            object-fit: contain;
        }



    :is(.page-course-detail, .page-registration-complete) .lesson-time__mobile-hours {
        display: inline;
        flex: 0 0 auto;
        color: var(--ds-neutral-default);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-teacher {
        display: flex;
        min-height: 38px;
        gap: 4px;
        align-items: center;
        justify-content: flex-start;
    }



        :is(.page-course-detail, .page-registration-complete) .lesson-teacher::before {
            content: "";
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            background: url("../../assets/icons/course-sales.svg") center / 16px 16px no-repeat;
        }



    :is(.page-course-detail, .page-registration-complete) .lesson-avatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-location {
        display: flex;
        min-width: 0;
        min-height: 42px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-location__title {
        display: flex;
        width: 100%;
        min-width: 0;
        gap: 4px;
        align-items: center;
    }



        :is(.page-course-detail, .page-registration-complete) .lesson-location__title > img {
            display: block;
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            object-fit: contain;
        }



    :is(.page-course-detail, .page-registration-complete) .lesson-location__button {
        flex: 1;
        width: auto;
        min-width: 0;
        color: var(--ds-primary-default);
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        text-align: left;
        white-space: nowrap;
    }



    :is(.page-course-detail, .page-registration-complete) .lesson-location small {
        width: 100%;
        margin: 0;
        padding-left: 20px;
        color: var(--ds-neutral-lightest);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        white-space: normal;
        overflow-wrap: anywhere;
    }



    .course-category-tabs--period {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }



        .course-category-tabs--period .course-category-tab,
        .course-category-tabs--period .course-category-tab:first-child {
            min-width: 0;
            padding-inline: 8px;
        }



    .course-filter-group--wrap,
    .course-filter-group--wrap .form-select--filter {
        width: 100%;
    }
}

@media (min-width: 1280px) {
    .course-session-card__top {
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }



    .course-session-card .pill {
        order: -1;
        flex: 0 0 auto;
    }



    .course-session-card strong {
        min-width: 0;
    }



    .course-schedule__head,
    .course-schedule__rows article {
        grid-template-columns: 312px 264px 180px 304px;
        justify-content: start;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .course-session-card {
        width: 223px;
        min-height: 92px;
        height: 92px;
        padding: 16px;
    }
}

@media (max-width:768px) {
    .page-mycourse-detail .registered-course-card__header > img {
        width: 112px;
        height: 88px;
        border-radius: 8px
    }



    .page-mycourse-detail .registration-data > h2 {
        margin-bottom: 16px
    }



    .page-mycourse-detail .registered-lesson-topic > b {
        flex: 0 0 24px;
        align-self: flex-start;
    }



    .page-mycourse-detail .registered-lesson-topic > span {
        display: block;
        width: 100%;
        min-width: 0;
    }



    .page-mycourse-detail .registered-course-card__header > img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 303/170;
        border-radius: 12px;
        object-fit: cover;
        object-position: center;
    }



    .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > b {
        width: 24px;
        height: 24px;
        align-self: start;
    }



    .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > span {
        display: block;
        min-width: 0;
    }



    .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child > b {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        align-self: flex-start;
    }



    .page-mycourse-detail.detail-state-attendance .registered-lessons article > .registered-lesson-topic:first-child > span {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }



    .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > b {
        flex: 0 0 24px;
        align-self: flex-start;
    }



    .page-mycourse-detail.detail-state-pending .registered-lessons article > .registered-lesson-topic:first-child > span {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 420px) {
    .contact-info__card > a {
        line-height: 24px;
    }
}

/* ===== 2026-10-02 開課查詢卡片狀態統一致中 ===== */
.page-course-sessions .course-status-card__state--ended,
.page-search-results .search-results-grid .course-status-card__state--ended {
    justify-content: center;
}

    .page-course-sessions .course-status-card__state--ended > .course-status,
    .page-search-results .search-results-grid .course-status-card__state--ended > .course-status,
    .page-course-sessions .course-status-card__state--closed > .course-status,
    .page-search-results .search-results-grid .course-status-card__state--closed > .course-status,
    .page-course-sessions .course-status-card__state--full > .course-status,
    .page-search-results .search-results-grid .course-status-card__state--full > .course-status,
    .page-course-sessions .course-status-card__state--registered > .course-status,
    .page-search-results .search-results-grid .course-status-card__state--registered > .course-status,
    .page-course-sessions .course-status-card__state--canceled > .course-status,
    .page-search-results .search-results-grid .course-status-card__state--canceled > .course-status {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
/* ===== MY COURSE DETAIL - CANCELLATION ===== */
/* 詳情頁取消報名：規則與互動沿用我的課程列表，樣式只作用於詳情頁，避免影響既有列表。 */
@media (min-width: 769px) {
    .page-mycourse-detail .registered-course-card.is-cancelable .registered-course-card__header {
        grid-template-columns: 206px minmax(0, 1fr) 320px;
    }
}

.page-mycourse-detail .registered-course-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.page-mycourse-detail .registered-course-card__cancel-note {
    margin: 0;
    color: var(--ds-danger-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

    .page-mycourse-detail .registered-course-card__cancel-note strong {
        color: inherit;
        font: inherit;
    }

.page-mycourse-detail .registered-course-card__cancel {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--ds-primary-light);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid var(--ds-primary-light);
    border-radius: 6px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .page-mycourse-detail .registered-course-card__cancel:hover {
        color: var(--ds-primary-bright);
        border-color: var(--ds-primary-bright);
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .registered-course-card__cancel:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 2px;
    }

/* 詳情頁 Dialog 對齊列表頁實際呈現。 */
.page-mycourse-detail .cancel-dialog {
    width: min(640px, calc(100% - 40px));
    max-width: 640px;
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--ds-neutral-default);
    font-family: var(--font-sans);
    border: 0;
    border-radius: 10px;
    background: var(--ds-neutral-white);
    box-shadow: 0 24px 60px rgba(19, 26, 52, .28);
}

    .page-mycourse-detail .cancel-dialog::backdrop {
        background: rgba(19, 26, 52, .6);
    }

.page-mycourse-detail .cancel-dialog__surface {
    padding: 0;
    background: var(--ds-neutral-white);
}

.page-mycourse-detail .cancel-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: .616px solid #e6e6e6;
}

    .page-mycourse-detail .cancel-dialog__header h2 {
        margin: 0;
        color: var(--ds-neutral-default);
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }

.page-mycourse-detail .cancel-dialog__close {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ds-neutral-white);
    cursor: pointer;
}

    .page-mycourse-detail .cancel-dialog__close span::before,
    .page-mycourse-detail .cancel-dialog__close span::after {
        position: absolute;
        top: 17px;
        left: 10px;
        width: 16px;
        height: 2px;
        content: "";
        background: var(--ds-primary-default);
        border-radius: 1px;
    }

    .page-mycourse-detail .cancel-dialog__close span::before {
        transform: rotate(45deg);
    }

    .page-mycourse-detail .cancel-dialog__close span::after {
        transform: rotate(-45deg);
    }

    .page-mycourse-detail .cancel-dialog__close:hover {
        background: var(--ds-bg-light-blue);
    }

    .page-mycourse-detail .cancel-dialog__close:focus-visible {
        outline: 2px solid var(--ds-primary-bright);
        outline-offset: 1px;
    }

.page-mycourse-detail .cancel-dialog__body {
    display: block;
    margin-top: 0;
    padding: 16px;
}

.page-mycourse-detail .cancel-dialog__prompt {
    margin: 0;
    color: var(--ds-neutral-default);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-mycourse-detail .cancel-dialog__course {
    margin-top: 16px;
    padding: 20px 24px;
    border: .616px solid var(--ds-neutral-paler);
    border-radius: 6px;
    background: var(--ds-bg-light-blue);
}

    .page-mycourse-detail .cancel-dialog__course > strong {
        display: block;
        color: var(--ds-neutral-default);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

.page-mycourse-detail .cancel-dialog__course-meta {
    display: flex;
    gap: 4px;
    margin: 8px 0 0;
    color: var(--ds-neutral-lighter);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

.page-mycourse-detail .cancel-dialog__lessons {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ds-neutral-paler);
}

.page-mycourse-detail .cancel-dialog__lesson {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 0;
    color: var(--ds-neutral-lighter);
    font-size: 15px;
    line-height: 24px;
}

.page-mycourse-detail .cancel-dialog__lesson-label {
    color: var(--ds-neutral-default);
    font-weight: 600;
    white-space: nowrap;
}

.page-mycourse-detail .cancel-dialog__lesson-date {
    min-width: 0;
}

.page-mycourse-detail .cancel-dialog__lesson-time {
    color: var(--ds-neutral-default);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    justify-self: end;
}

.page-mycourse-detail .cancel-dialog__lesson-empty {
    grid-column: 2 / -1;
}

.page-mycourse-detail .cancel-dialog__warning {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding: 12px;
    color: var(--ds-danger-default);
    background: var(--surface-danger-soft);
}

.page-mycourse-detail .cancel-dialog__warning-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.page-mycourse-detail .cancel-dialog__warning p {
    margin: 0;
    color: var(--ds-danger-default);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.page-mycourse-detail .cancel-dialog__actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: .616px solid #e6e6e6;
}

    .page-mycourse-detail .cancel-dialog__actions .btn {
        flex: 0 0 auto;
        min-width: 0;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }

.page-mycourse-detail .cancel-dialog__back {
    width: 77px;
    color: var(--ds-primary-default);
    border: .616px solid var(--ds-primary-default);
    background: var(--ds-neutral-white);
}

.page-mycourse-detail .cancel-dialog__confirm {
    width: 104px;
    color: var(--action-danger-text);
    border: 1px solid var(--action-danger-border);
    background: var(--action-danger-bg);
}

.page-mycourse-detail .cancel-dialog__back:hover {
    background: var(--ds-bg-light-blue);
}

.page-mycourse-detail .cancel-dialog__confirm:hover {
    background: var(--action-danger-hover-bg);
}

.page-mycourse-detail .cancel-dialog__confirm:active {
    background: var(--action-danger-pressed-bg);
}

.page-mycourse-detail .cancel-dialog__back:focus-visible,
.page-mycourse-detail .cancel-dialog__confirm:focus-visible {
    outline: 2px solid var(--ds-primary-bright);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .page-mycourse-detail .registered-course-card__actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px 12px;
        margin-top: 8px;
    }

    .page-mycourse-detail .registered-course-card__cancel-note {
        white-space: normal;
    }

    .page-mycourse-detail .cancel-dialog {
        width: min(335px, calc(100% - 40px));
        max-width: 335px;
    }

    .page-mycourse-detail .cancel-dialog__course {
        padding: 16px;
    }

    .page-mycourse-detail .cancel-dialog__course-meta {
        flex-direction: column;
        gap: 0;
    }

    .page-mycourse-detail .cancel-dialog__lesson {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 2px 8px;
        font-size: 14px;
        line-height: 20px;
    }

    .page-mycourse-detail .cancel-dialog__lesson-time {
        grid-column: 2;
        justify-self: start;
    }

    .page-mycourse-detail .cancel-dialog__lesson-empty {
        grid-column: 2;
    }
}