/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibility per reconnect state: the classes are set on #components-reconnect-modal by the Blazor runtime (the
   template's contract, keep as is). Look: SIS kit tokens (wwwroot/css/sis-tokens.css). */
.components-reconnect-first-attempt-visible[b-msuveotwf5],
.components-reconnect-repeated-attempt-visible[b-msuveotwf5],
.components-reconnect-failed-visible[b-msuveotwf5],
.components-pause-visible[b-msuveotwf5],
.components-resume-failed-visible[b-msuveotwf5],
.components-reconnect-rejected-visible[b-msuveotwf5],
.components-rejoining-animation[b-msuveotwf5] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-retrying[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-failed[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected-visible[b-msuveotwf5],
#components-reconnect-modal.components-reconnect-rejected .components-rejoining-animation[b-msuveotwf5] {
    display: block;
}

#components-reconnect-modal[b-msuveotwf5] {
    box-sizing: border-box;
    width: min(20rem, calc(100vw - 32px));
    margin: 20vh auto;
    padding: 28px 24px 24px;
    border: 0;
    border-radius: var(--sis-radius-dialog);
    background-color: var(--sis-surface);
    color: var(--sis-text);
    box-shadow: var(--sis-shadow-dialog);
    opacity: 0;
    transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-msuveotwf5 0.3s both;
}

/* showModal() focuses the dialog itself when no control is visible yet (first attempt). The dialog is a container, not a
   control, and the browser's ring around it read as a border: no ring on the dialog, the buttons keep theirs and the
   status text is announced through its live region. */
#components-reconnect-modal:focus-visible[b-msuveotwf5] {
    outline: none;
}

#components-reconnect-modal[open][b-msuveotwf5] {
    animation: components-reconnect-modal-fadeInOpacity-b-msuveotwf5 0.3s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-msuveotwf5]::backdrop {
    background-color: var(--sis-scrim);
    animation: components-reconnect-modal-fadeInOpacity-b-msuveotwf5 0.3s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-fadeInOpacity-b-msuveotwf5 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-msuveotwf5 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-msuveotwf5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

[data-slot="status"][b-msuveotwf5] {
    min-width: 0;
}

#components-reconnect-modal p[b-msuveotwf5] {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

#components-reconnect-modal button[b-msuveotwf5] {
    min-height: 44px;
    /* MudBlazor.min.css ships its own #components-reconnect-modal button rule with margin: 40px auto !important. */
    margin: 0 !important;
    padding: 0 24px;
    letter-spacing: normal;
    text-transform: none;
    border: 1.5px solid transparent;
    border-radius: var(--sis-radius-md);
    background-color: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

#components-reconnect-modal button:hover[b-msuveotwf5] {
    background-color: var(--sis-primary-hover);
}

#components-reconnect-modal button:active[b-msuveotwf5] {
    background-color: var(--sis-primary-active);
}

#components-reconnect-modal button:focus-visible[b-msuveotwf5] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.components-rejoining-animation[b-msuveotwf5] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-msuveotwf5] {
    position: absolute;
    border: 3px solid var(--sis-focus-color);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-msuveotwf5 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-msuveotwf5] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-msuveotwf5 {
    0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-msuveotwf5],
    #components-reconnect-modal[open][b-msuveotwf5],
    #components-reconnect-modal[b-msuveotwf5]::backdrop {
        animation-duration: 0.01ms;
        animation-delay: 0s;
    }

    /* A static ring instead of the pulsing one. */
    .components-rejoining-animation div[b-msuveotwf5] {
        animation: none;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0.4;
    }

    .components-rejoining-animation div:nth-child(2)[b-msuveotwf5] {
        display: none;
    }
}
/* /Components/Pages/AllContacts.razor.rz.scp.css */
/* /contacts inside LandingShell: heading band, campus tabs (same look as the landing news tabs), one campus card. */

.ct-body[b-6xb7qo1t3l] { padding: 20px var(--ld-gutter) 40px; display: flex; flex-direction: column; gap: 16px; }

/* campus picker: native radios drawn as tabs */
.ct-tabs[b-6xb7qo1t3l] {
    margin: 0;
    min-width: 0;
    padding: 4px;
    border: 0;
    border-radius: 14px;
    background: var(--ld-tabs-bg);
    display: flex;
    gap: 2px;
}

.ct-tab[b-6xb7qo1t3l] { position: relative; display: flex; flex: 1 1 auto; min-width: 0; cursor: pointer; touch-action: manipulation; }
.ct-tab input[b-6xb7qo1t3l] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.ct-tab span[b-6xb7qo1t3l] {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: var(--ld-ink);
    font-size: 13px;
    font-weight: 500;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.ct-tab:hover input:not(:checked) + span[b-6xb7qo1t3l] { background: rgba(255, 255, 255, 0.6); }

.ct-tab input:checked + span[b-6xb7qo1t3l] {
    background: #FFFFFF;
    box-shadow: 0 2px 6px -2px rgba(31, 58, 66, 0.25);
    color: var(--ld-navy);
    font-weight: 700;
}

.ct-tab input:focus-visible + span[b-6xb7qo1t3l] { outline: 3px solid var(--sis-focus-color); outline-offset: 1px; }

/* campus card: details, then the map */
.ct-card[b-6xb7qo1t3l] {
    box-sizing: border-box;
    padding: 18px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--ld-line);
    box-shadow: 0 14px 26px -22px rgba(11, 126, 140, 0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: ct-fade-b-6xb7qo1t3l .22s ease-out;
}

@keyframes ct-fade-b-6xb7qo1t3l { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ct-info[b-6xb7qo1t3l] { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.ct-eyebrow[b-6xb7qo1t3l] { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--ld-teal); }
.ct-info h2[b-6xb7qo1t3l] { margin: -8px 0 0; font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--ld-navy); text-wrap: balance; }

.ct-address[b-6xb7qo1t3l] { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--ld-muted); overflow-wrap: anywhere; }
.ct-pin[b-6xb7qo1t3l] { display: flex; padding-top: 2px; color: var(--ld-teal); }

.ct-rows[b-6xb7qo1t3l] { display: flex; flex-direction: column; gap: 2px; }

.ct-row[b-6xb7qo1t3l] { min-height: 48px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ld-ink); }
.ct-row:hover .ct-text[b-6xb7qo1t3l] { text-decoration: underline; text-underline-offset: 3px; }

.ct-ico[b-6xb7qo1t3l] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--ld-tint);
    border: 1px solid var(--ld-line);
    color: var(--ld-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-val[b-6xb7qo1t3l] { min-width: 0; display: flex; flex-direction: column; }
.ct-key[b-6xb7qo1t3l] { font-size: 12px; line-height: 1.4; color: var(--ld-muted); }
.ct-text[b-6xb7qo1t3l] { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ld-ink); overflow-wrap: anywhere; }

.ct-actions[b-6xb7qo1t3l] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ct-actions[b-6xb7qo1t3l]  .sis-btn { max-width: 100%; }

.ct-maplink[b-6xb7qo1t3l] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 600;
    text-underline-offset: 3px;
}

.ct-map[b-6xb7qo1t3l] {
    min-width: 0;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ld-line);
    background: var(--ld-tabs-bg);
}

.ct-map iframe[b-6xb7qo1t3l] { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 600px) {
    .ct-tab span[b-6xb7qo1t3l] { font-size: 14px; }
}

@media (min-width: 960px) {
    .ct-body[b-6xb7qo1t3l] { padding: 32px var(--ld-pad) 72px; gap: 20px; }

    .ct-tabs[b-6xb7qo1t3l] { align-self: flex-start; }
    .ct-tab[b-6xb7qo1t3l] { flex: 0 0 auto; }
    .ct-tab span[b-6xb7qo1t3l] { height: 40px; padding: 0 18px; font-size: 14px; }

    .ct-card[b-6xb7qo1t3l] {
        padding: 28px;
        border-radius: 20px;
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 32px;
        align-items: start;
    }

    .ct-info h2[b-6xb7qo1t3l] { font-size: 24px; }
    .ct-address[b-6xb7qo1t3l] { font-size: 15px; }
    .ct-map[b-6xb7qo1t3l] { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-card[b-6xb7qo1t3l] { animation: none; }
}
/* /Components/Pages/Announcement/NewsDetail.razor.rz.scp.css */
.pnd-page[b-11wg35mhyz] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px var(--ld-gutter) 40px;
    line-height: normal;
    letter-spacing: normal;
}

@media (max-width: 959.98px) {
    .pnd-page[b-11wg35mhyz] {
        gap: 14px;
    }
}

@media (min-width: 960px) {
    .pnd-page[b-11wg35mhyz] {
        padding: 32px var(--ld-pad) 72px;
    }
}
/* /Components/Pages/Announcement/NewsExplore.razor.rz.scp.css */
.pne-page[b-3ssseh738n] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px var(--ld-gutter) 40px;
    line-height: normal;
    letter-spacing: normal;
}

@media (max-width: 959.98px) {
    .pne-page[b-3ssseh738n] {
        gap: 14px;
    }
}

@media (min-width: 960px) {
    .pne-page[b-3ssseh738n] {
        padding: 32px var(--ld-pad) 72px;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-j9zfjk3q2r] {
    display: flex;
    justify-content: center;
    padding: 32px 0;
    line-height: normal;
    letter-spacing: normal;
}

.error-page[b-j9zfjk3q2r]  .error-page-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 640px;
    padding: 28px 28px 24px;
}

.error-page [data-slot="message"][b-j9zfjk3q2r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.error-page [data-slot="icon"][b-j9zfjk3q2r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--sis-danger-bg);
    color: var(--sis-danger-fg);
}

.error-page [data-slot="title"][b-j9zfjk3q2r] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sis-text);
}

.error-page [data-slot="text"][b-j9zfjk3q2r] {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sis-text-body);
}

.error-page [data-slot="reference"][b-j9zfjk3q2r] {
    margin: 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.error-page [data-slot="reference"] code[b-j9zfjk3q2r] {
    user-select: all;
}

.error-page[b-j9zfjk3q2r]  .error-page-note {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 959.98px) {
    .error-page[b-j9zfjk3q2r] {
        padding: 12px 0;
    }

    .error-page[b-j9zfjk3q2r]  .error-page-card {
        padding: 20px 18px;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-page[b-akt7c4s2ej] {
    display: flex;
    justify-content: center;
    padding: 32px var(--ld-gutter) 72px;
    line-height: normal;
    letter-spacing: normal;
}

.not-found-page[b-akt7c4s2ej]  .not-found-page-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 640px;
    padding: 28px 28px 24px;
}

.not-found-page [data-slot="message"][b-akt7c4s2ej] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.not-found-page [data-slot="title"][b-akt7c4s2ej] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sis-text);
}

.not-found-page [data-slot="text"][b-akt7c4s2ej] {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sis-text-body);
}

@media (max-width: 959.98px) {
    .not-found-page[b-akt7c4s2ej] {
        padding: 20px var(--ld-gutter) 40px;
    }

    .not-found-page[b-akt7c4s2ej]  .not-found-page-card {
        padding: 20px 18px;
    }
}
/* /Components/Pages/Private/Announcement/NewsDetail.razor.rz.scp.css */
.nd-page[b-i2olbuft80] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.nd-page[b-i2olbuft80]  .nd-header h1 {
    max-width: 30ch;
}

.nd-skeleton[b-i2olbuft80] {
    max-width: 860px;
}

@media (max-width: 959.98px) {
    .nd-page[b-i2olbuft80] {
        gap: 14px;
    }
}
/* /Components/Pages/Private/Announcement/NewsExplore.razor.rz.scp.css */
.ne-page[b-il3gpyd8q7] {
    scroll-margin-top: 5rem; /* clears the fixed app bar for sisScrollIntoView */
}

.ne-page[b-il3gpyd8q7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.ne-grid[b-il3gpyd8q7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ne-grid > li[b-il3gpyd8q7] {
    min-width: 0;
}

.ne-page[b-il3gpyd8q7]  .ne-pagination {
    justify-content: flex-end;
}

.ne-skeleton > div[b-il3gpyd8q7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1279.98px) {
    .ne-grid[b-il3gpyd8q7],
    .ne-skeleton > div[b-il3gpyd8q7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 959.98px) {
    .ne-page[b-il3gpyd8q7] {
        gap: 14px;
    }

    .ne-grid[b-il3gpyd8q7],
    .ne-skeleton > div[b-il3gpyd8q7] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .ne-page[b-il3gpyd8q7]  .ne-pagination {
        justify-content: center;
    }
}
/* /Components/Pages/Private/ClassSchedule/ClassSchedule.razor.rz.scp.css */
/* Page chrome only. Nothing here reaches into ClassTable (the owner's handmade grid): it and its MudTabs panel keep
   their own markup, width and overflow. */
.cs-page[b-kl7pysjk36] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* The toolbar card itself is SisToolbarCard (slot classes sis-toolbar-*); only the expand action is page-specific, and it
   lives inside .cs-actions (the toolbar's actions wrapper).
   Expand view (desktop only, ExpandableTimetable): below 960px the button is hidden and the overlay drops itself. */
.cs-actions[b-kl7pysjk36]  .cs-expand {
    color: var(--sis-link);
    flex: 0 0 auto;
}

.cs-hidden-alert-row[b-kl7pysjk36] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cs-hidden-alert-row > span[b-kl7pysjk36] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cs-subjects[b-kl7pysjk36] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.cs-subjects > h2[b-kl7pysjk36] {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--sis-text);
    text-wrap: balance;
    scroll-margin-top: 5rem;
}

.cs-subject-grid[b-kl7pysjk36] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.cs-skeleton > div[b-kl7pysjk36] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 959.98px) {
    .cs-page[b-kl7pysjk36] {
        gap: 14px;
    }

    .cs-actions[b-kl7pysjk36]  .cs-expand {
        display: none;
    }

    .cs-subject-grid[b-kl7pysjk36] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Medium: one row, the expand action becomes an icon-only 44px square (the label stays in the DOM as visually hidden text). */
@container sis-toolbar (max-width: 879.98px) {
    .cs-actions[b-kl7pysjk36]  .cs-expand {
        width: 44px;
        padding: 0;
    }

    .cs-actions[b-kl7pysjk36]  .cs-expand .sis-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}
/* /Components/Pages/Private/ClassSchedule/LecturerTimetable.razor.rz.scp.css */
/* Page chrome only; ClassTable keeps its own markup and sizing. */
.lt-page[b-lsexi89kl9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* The toolbar card is SisToolbarCard (slot classes sis-toolbar-*), as on ตารางเรียน; only the expand action is
   page-specific. Expand view is desktop only (ExpandableTimetable): below 960px the button is hidden. */
.lt-actions[b-lsexi89kl9]  .cs-expand {
    color: var(--sis-link);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.lt-skeleton[b-lsexi89kl9] {
    line-height: normal;
    letter-spacing: normal;
}

.lt-skeleton > div[b-lsexi89kl9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 959.98px) {
    .lt-page[b-lsexi89kl9] {
        gap: 14px;
    }

    .lt-actions[b-lsexi89kl9]  .cs-expand {
        display: none;
    }
}

/* Medium: the expand action becomes an icon-only 44px square (the label stays in the DOM as visually hidden text). */
@container sis-toolbar (max-width: 879.98px) {
    .lt-actions[b-lsexi89kl9]  .cs-expand {
        width: 44px;
        padding: 0;
    }

    .lt-actions[b-lsexi89kl9]  .cs-expand .sis-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}
/* /Components/Pages/Private/ClassSchedule/LecturerTimetableSearch.razor.rz.scp.css */
.ls-page[b-ks2wokjblv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.ls-search[b-ks2wokjblv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ls-hint[b-ks2wokjblv] {
    margin: 0;
    padding-inline: 4px;
    font-size: 14px;
    color: var(--sis-text-body);
}

.ls-hint[data-invalid="true"][b-ks2wokjblv] {
    color: var(--sis-danger-fg);
    font-weight: 600;
}

.ls-results[b-ks2wokjblv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ls-results > h2[b-ks2wokjblv] {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

.ls-list[b-ks2wokjblv] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls-list > li:last-child[b-ks2wokjblv]  .lecturer-card {
    border-bottom: none;
}

.ls-skeleton > div[b-ks2wokjblv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 959.98px) {
    .ls-page[b-ks2wokjblv] {
        gap: 14px;
    }

    .ls-page[b-ks2wokjblv]  .sis-page-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "breadcrumb"
            "title"
            "subtitle"
            "actions";
    }

    .ls-page[b-ks2wokjblv]  .sis-page-header [data-slot="actions"] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Private/Dev/EmptyStatesGallery.razor.rz.scp.css */
.esg[b-2rplxjhyap] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.esg section[b-2rplxjhyap] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Pages/Private/Dev/GradeUiGallery.razor.rz.scp.css */
/* Dev gallery layout only. */
.gg-page[b-dw4vjtkqt1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    line-height: normal;
    letter-spacing: normal;
}

.gg-h1[b-dw4vjtkqt1] {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    color: var(--sis-text);
}

.gg-note[b-dw4vjtkqt1] {
    margin: 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.gg-h2[b-dw4vjtkqt1] {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text-secondary);
    text-wrap: balance;
}

.gg-term[b-dw4vjtkqt1] {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
}

.gg-stack[b-dw4vjtkqt1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gg-actions[b-dw4vjtkqt1] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 959.98px) {
    .gg-actions[b-dw4vjtkqt1]  .gg-run {
        width: 100%;
    }
}
/* /Components/Pages/Private/Dev/MiscUiGallery.razor.rz.scp.css */
.mug[b-1uai7katb3] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    line-height: normal;
    letter-spacing: normal;
}
.mug > section[b-1uai7katb3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mug > section > h2[b-1uai7katb3] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
}
.mug-grid[b-1uai7katb3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 16px;
    align-items: start;
}
.mug-alert[b-1uai7katb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.mug-news[b-1uai7katb3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mug-news > li[b-1uai7katb3] {
    min-width: 0;
}
/* /Components/Pages/Private/Dev/ProfileUiGallery.razor.rz.scp.css */
.profile-gallery[b-hoi5vz1fph] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px;
    line-height: normal;
    letter-spacing: normal;
}

.profile-gallery h2[b-hoi5vz1fph] {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--sis-text);
    scroll-margin-top: 80px;
}

.profile-gallery-cols[b-hoi5vz1fph] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.profile-gallery-stack[b-hoi5vz1fph] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-gallery-actions[b-hoi5vz1fph] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 959.98px) {
    .profile-gallery-cols[b-hoi5vz1fph] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Private/Dev/RecordsUiGallery.razor.rz.scp.css */
.rg-page[b-ehjlohf4j6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rg-cols[b-ehjlohf4j6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.rg-narrow[b-ehjlohf4j6] {
    max-width: 390px;
}

@media (max-width: 959.98px) {
    .rg-cols[b-ehjlohf4j6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Private/Dev/SettingsUiGallery.razor.rz.scp.css */
.settings-gallery[b-ifzxdp8ot1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
    min-width: 0;
}

.dialog-box[b-ifzxdp8ot1] {
    width: min(400px, 100%);
    box-sizing: border-box;
    padding: 8px 24px 16px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-dialog);
    box-shadow: var(--sis-shadow-dialog);
}
/* /Components/Pages/Private/Dev/SisKit/DemoSisDialog.razor.rz.scp.css */
/* Demo-only styling for DemoSisDialog's body text and buttons (gallery "open a real dialog" specimen, task H).
   Not part of the SIS kit — SisButton (task A) will replace this once composed in Wave 2. */

.demo-sis-dialog-body[b-2ss5s70sm2] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sis-text-body);
}

.demo-sis-dialog-btn[b-2ss5s70sm2] {
    height: 48px;
    border-radius: var(--sis-radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

.demo-sis-dialog-btn:active[b-2ss5s70sm2] {
    transform: translateY(1px);
}

.demo-sis-dialog-btn:focus-visible[b-2ss5s70sm2] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.demo-sis-dialog-btn--primary[b-2ss5s70sm2] {
    border: none;
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
}

.demo-sis-dialog-btn--primary:hover[b-2ss5s70sm2] {
    background: var(--sis-primary-hover);
}

.demo-sis-dialog-btn--quiet[b-2ss5s70sm2] {
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
}

.demo-sis-dialog-btn--quiet:hover[b-2ss5s70sm2] {
    background: var(--sis-surface-hover);
}
/* /Components/Pages/Private/Dev/SisKit/DialogSection.razor.rz.scp.css */
/* Gallery-only styling for the "Dialog and bottom sheet" section (task H). Not part of the SIS kit: the
   .sis-dialog-frame box itself is styled by wwwroot/css/sis-global.css (shared with the real Mud dialog), this
   file only styles the section's own headings/placeholders/demo buttons. */

#dialog[b-udvnzx3dqm] {
    /* Same MudBlazor body reset as the kit component itself (SisDialogLayout.razor.css) — keeps this section's own
       demo text off MudBlazor's line-height:1.43/letter-spacing:.01071em default. */
    line-height: normal;
    letter-spacing: normal;
}

.gallery-section h3[b-udvnzx3dqm] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-label);
}

.gallery-section > div + div[b-udvnzx3dqm] {
    margin-top: 8px;
}

/* The GalleryFrame stage for the 390px sheet specimen is only as tall as its content in normal flow, but the
   .sis-dialog-frame inside it switches to position:fixed under the same <960px query a real sheet uses (see
   sis-global.css) — give the stage a phone-sized viewport height so the fixed sheet has room to sit at the
   bottom instead of the (much shorter) real gallery window during a shot.py capture at --width 390 --height 844. */
.dialog-demo-sheet-preview[b-udvnzx3dqm] {
    min-height: 1px;
}

.dialog-demo-icon-circle[b-udvnzx3dqm] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-demo-icon-circle--danger[b-udvnzx3dqm] {
    background: var(--sis-danger-bg);
    color: var(--sis-danger);
}

.dialog-demo-icon-circle--success[b-udvnzx3dqm] {
    background: var(--sis-success-bg);
    color: var(--sis-success-icon);
}

.dialog-demo-placeholder[b-udvnzx3dqm] {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-subtle);
    font-size: 13px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}

.dialog-demo-warning[b-udvnzx3dqm] {
    margin: 0;
    padding: 14px 16px 14px 34px;
    list-style: disc outside;
    border-radius: var(--sis-radius-md);
    background: var(--sis-warning-strip-bg);
    color: var(--sis-warning-text);
    font-size: 14px;
    line-height: 1.8;
}

.dialog-demo-btn[b-udvnzx3dqm] {
    height: 48px;
    border-radius: var(--sis-radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

.dialog-demo-btn:active:not(:disabled)[b-udvnzx3dqm] {
    transform: translateY(1px);
}

.dialog-demo-btn:focus-visible[b-udvnzx3dqm] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.dialog-demo-btn--primary[b-udvnzx3dqm] {
    border: none;
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
    box-shadow: var(--sis-primary-shadow);
}

.dialog-demo-btn--primary:hover[b-udvnzx3dqm] {
    background: var(--sis-primary-hover);
}

.dialog-demo-btn--quiet[b-udvnzx3dqm] {
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
}

.dialog-demo-btn--quiet:hover[b-udvnzx3dqm] {
    background: var(--sis-surface-hover);
}

.dialog-demo-btn--danger[b-udvnzx3dqm] {
    border: none;
    background: var(--sis-danger);
    color: var(--sis-text-on-dark);
}

.dialog-demo-btn--danger:hover[b-udvnzx3dqm] {
    background: var(--sis-danger-hover);
}

.dialog-demo-btn--disabled[b-udvnzx3dqm] {
    border: 1.5px solid var(--sis-border);
    background: var(--sis-surface);
    color: var(--sis-text-disabled);
    cursor: not-allowed;
}

.dialog-demo-trigger[b-udvnzx3dqm] {
    height: 44px;
    padding: 0 18px;
    border-radius: var(--sis-radius-md);
    border: 1.5px solid var(--sis-primary);
    background: var(--sis-surface);
    color: var(--sis-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.dialog-demo-trigger:hover[b-udvnzx3dqm] {
    background: var(--sis-surface-hover);
}

.dialog-demo-trigger:active[b-udvnzx3dqm] {
    background: var(--sis-surface-track);
}

.dialog-demo-trigger:focus-visible[b-udvnzx3dqm] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}
/* /Components/Pages/Private/Dev/SisKit/FilterMenuSection.razor.rz.scp.css */
/* Gallery-only stand-in for a popover body (the real one is a SisOptionList). */
.demo-options[b-gliphp25n8] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-options button[b-gliphp25n8] {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sis-radius-sm);
    background: transparent;
    color: var(--sis-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.demo-options button:hover[b-gliphp25n8] { background: var(--sis-surface-hover); }
.demo-options button:focus-visible[b-gliphp25n8] { outline: 2px solid var(--sis-focus-color); outline-offset: -2px; }
/* /Components/Pages/Private/Dev/SisKit/GalleryFrame.razor.rz.scp.css */
.gallery-frame[b-m5snxutgj3] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gallery-frame [data-slot="caption"][b-m5snxutgj3] {
    font-size: 12px;
    color: var(--sis-text-muted-strong);
}

.gallery-frame [data-slot="stage"][b-m5snxutgj3] {
    width: var(--frame-width);
    box-sizing: border-box;
}

.gallery-frame [data-slot="stage"].padded[b-m5snxutgj3] {
    padding: 16px;
}
/* /Components/Pages/Private/Dev/SisKit/ListNavSection.razor.rz.scp.css */
/* MudBlazor sets body line-height:1.43/letter-spacing:.01071em; boards use browser defaults. CSS isolation scopes
   this to this component's own .gallery-section only, not the other tasks' sections that share the class name. */
.gallery-section[b-jbnfhp5kio] {
    line-height: normal;
    letter-spacing: normal;
}

.gallery-note[b-jbnfhp5kio] {
    max-width: 640px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sis-text-muted-strong);
}

/* Establishes a CSS containing block for the SisUndoToast demo's position:fixed root, so the toast renders inside
   this frame instead of the real browser viewport — screenshot-only concern, see ListNavSection.razor. */
.gallery-fixed-stage[b-jbnfhp5kio] {
    position: relative;
    contain: layout;
    width: 100%;
    height: 220px;
    border-radius: 12px;
    background: linear-gradient(180deg, #E4F2F2 0%, #F2F8F8 45%, #F5FAFA 100%);
}
/* /Components/Pages/Private/Dev/SisKit/NoticesSection.razor.rz.scp.css */
/* Reset Mud's inherited body line-height/letter-spacing (1.43 / .01071em) so this section's own headings and
   GalleryFrame captions render at the boards' plain browser defaults, same fix applied to every SisKit component. */
#notices[b-hn08aum9l4] {
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Dev/SisKit/OptionListSection.razor.rz.scp.css */
.option-list-note[b-hv25wylte4] {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}
/* /Components/Pages/Private/Dev/SisKit/PageBitsSection.razor.rz.scp.css */
/* Gallery-only scaffolding: sub-headings between the three components, and stand-ins for slot content owned by
   other Wave 1 tasks (SisButton/action button, a mock mobile app-bar for SisCartStrip's compact context). None
   of this ships in Sis* components themselves. */

.gallery-section h3[b-zx7ssmixmh] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-muted-strong);
}

.fake-action-btn[b-zx7ssmixmh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--sis-radius-md);
    border: 1.5px solid var(--sis-primary);
    background: var(--sis-surface);
    color: var(--sis-primary);
    font-size: 15px;
    font-weight: 600;
    /* MudBlazor's body line-height/letter-spacing, reset to match the board (see SisPageHeader.razor.css). */
    line-height: normal;
    letter-spacing: normal;
    text-decoration: none;
}

.fake-action-btn--sm[b-zx7ssmixmh] {
    height: 40px;
    padding: 0 12px;
    border-radius: var(--sis-radius-sm);
    font-size: 14px;
}

.fake-mobile-header[b-zx7ssmixmh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 56px;
    padding: 0 12px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--sis-divider-strong);
    background: var(--sis-surface);
}

.fake-mobile-header-title[b-zx7ssmixmh] {
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
}
/* /Components/Pages/Private/Dev/SisKit/RowsSection.razor.rz.scp.css */
/* Gallery placeholders for the "rows" section (task J). These stand in for other Wave 1 tasks' components
   (SisChip/SisPill/SisIconButton/SisButton, not yet composed per the plan's parallel-tasks rule) and copy the
   boards' inline styles exactly so the crop diff is meaningful. */

.demo-list[b-4k0fb9j22h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.demo-list--sections[b-4k0fb9j22h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 959.98px) {
    .demo-list[b-4k0fb9j22h] {
        gap: 10px;
    }
}

[data-slot="demo-chip"][b-4k0fb9j22h] {
    height: 24px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    background: var(--sis-neutral-bg);
    color: var(--sis-text);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

[data-slot="demo-chip"][data-tone="warning"][b-4k0fb9j22h] {
    background: var(--sis-warning-bg);
    color: var(--sis-warning-fg);
    font-weight: 600;
}

[data-slot="demo-status"][b-4k0fb9j22h] {
    height: 26px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

[data-slot="demo-status"][data-size="mobile"][b-4k0fb9j22h] {
    height: 24px;
}

[data-slot="demo-status"][data-tone="success"][b-4k0fb9j22h] {
    background: var(--sis-success-bg);
    color: var(--sis-success-fg);
}

[data-slot="demo-status"][data-tone="neutral"][b-4k0fb9j22h] {
    /* Fable review ruling: pages compose this from SisPill Tone="Neutral" Solid (a "strong"/bold neutral), not a
       new token -- using the existing neutral tone here too. */
    background: var(--sis-neutral-bg);
    color: var(--sis-neutral-fg);
    font-weight: 700;
}

[data-slot="demo-seat"][b-4k0fb9j22h] {
    height: 24px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

[data-slot="demo-seat"][data-tone="ok"][b-4k0fb9j22h] {
    background: var(--sis-success-bg);
    color: var(--sis-success-fg);
}

[data-slot="demo-seat"][data-tone="full"][b-4k0fb9j22h] {
    background: var(--sis-warning-bg);
    color: var(--sis-warning-fg);
}

[data-slot="demo-reserved-badge"][b-4k0fb9j22h] {
    height: 24px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    align-self: flex-start;
    /* Fable review ruling: ACCEPTED as SisTone.Reserved + --sis-reserved-bg/--sis-reserved-fg tokens (base commit
       35a14d1c). Not cherry-picked here -- it touches task B's SisPill.razor.css, out of scope for this worktree
       -- so this stays a local fallback with the same names/values until sis-tokens.css lands them. */
    background: var(--sis-reserved-bg, #F3ECFA);
    color: var(--sis-reserved-fg, #5B3A86);
}

/* Board <button>s are already border-box under the browser's own UA stylesheet (form controls default to
   border-box even on a page with no CSS reset) -- only non-form elements like the board's <a> are content-box.
   So a board `<button style="width/height:40px; border:1px">` already renders 40x40 total, same as it will here
   under this app's `* { box-sizing: border-box }` (MudBlazor); no +2px compensation needed for these. */
[data-slot="demo-icon-btn"][b-4k0fb9j22h] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--sis-radius-sm);
    border: 1px solid var(--sis-border);
    background: var(--sis-surface);
    color: var(--sis-text);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

[data-slot="demo-icon-btn"][data-tone="danger"][b-4k0fb9j22h] {
    color: var(--sis-danger);
}

[data-slot="demo-icon-btn"][data-size="mobile"][b-4k0fb9j22h] {
    width: 44px;
    height: 44px;
}

[data-slot="demo-icon-btn"]:hover[b-4k0fb9j22h] {
    background: var(--sis-surface-hover);
}

[data-slot="demo-icon-btn"]:active[b-4k0fb9j22h] {
    transform: translateY(1px);
}

[data-slot="demo-icon-btn"]:focus-visible[b-4k0fb9j22h],
[data-slot="demo-star"]:focus-visible[b-4k0fb9j22h],
[data-slot="demo-select-btn"]:focus-visible[b-4k0fb9j22h],
[data-slot="demo-select-link"]:focus-visible[b-4k0fb9j22h],
[data-slot="demo-withdraw-link"]:focus-visible[b-4k0fb9j22h] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

[data-slot="demo-withdraw-link"][b-4k0fb9j22h] {
    /* This is an <a>, not a form control, so unlike the buttons above it IS content-box on the (unreset) board:
       declared height:40px + 1px border x2 = 42px rendered total. Sized to that total here too. */
    height: 42px;
    padding: 0 14px;
    border-radius: var(--sis-radius-sm);
    /* Fable review ruling: use the existing danger-border token rather than a new one for this shade. */
    border: 1px solid var(--sis-danger-border);
    background: var(--sis-surface);
    color: var(--sis-danger);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    touch-action: manipulation;
}

[data-slot="demo-withdraw-link"]:hover[b-4k0fb9j22h] {
    background: var(--sis-danger-bg);
}

[data-slot="demo-star"][b-4k0fb9j22h] {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--sis-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

[data-slot="demo-star"][data-size="mobile"][b-4k0fb9j22h] {
    width: 36px;
    height: 36px;
}

[data-slot="demo-star"]:hover[b-4k0fb9j22h] {
    background: var(--sis-surface-hover);
}

[data-slot="demo-select-btn"][b-4k0fb9j22h],
[data-slot="demo-select-link"][b-4k0fb9j22h] {
    padding: 0 16px;
    border-radius: var(--sis-radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

/* <button> (Detail_v2's "เลือกตอนนี้"/selected action, DetailMobile_v2's reserved-section button): native
   border-box on the board too, so no content-box compensation -- 40 desktop, 44 mobile, same as declared. */
[data-slot="demo-select-btn"][b-4k0fb9j22h] {
    height: 40px;
}

/* <a> (DetailMobile_v2's normal-section "เลือกตอนนี้" link): content-box on the board (declared 44 + 1px border
   x2 = 46 rendered); sized to that total. Mobile-only in practice -- no desktop instance uses this slot. */
[data-slot="demo-select-link"][b-4k0fb9j22h] {
    height: 46px;
}

[data-slot="demo-select-btn"]:hover[b-4k0fb9j22h],
[data-slot="demo-select-link"]:hover[b-4k0fb9j22h] {
    background: var(--sis-surface-hover);
}

[data-slot="demo-select-btn"][data-selected="true"][b-4k0fb9j22h] {
    border: none;
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
}

[data-slot="demo-select-btn"][data-selected="true"]:hover[b-4k0fb9j22h] {
    background: var(--sis-primary-hover);
}

@media (max-width: 959.98px) {
    [data-slot="demo-select-btn"][b-4k0fb9j22h] {
        height: 44px;
    }
}
/* /Components/Pages/Private/Dev/SisKit/SisKitGallery.razor.rz.scp.css */
.sis-kit-gallery[b-psjitbmrfm] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 24px 96px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sis-kit-gallery h1[b-psjitbmrfm] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.sis-kit-gallery nav ul[b-psjitbmrfm] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 14px;
}

.sis-kit-gallery nav a[b-psjitbmrfm] {
    color: var(--sis-link);
}

/* Shared look of every section (sections are child components, hence ::deep). */
.sis-kit-gallery[b-psjitbmrfm]  .gallery-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--sis-border);
    scroll-margin-top: 16px;
}

.sis-kit-gallery[b-psjitbmrfm]  .gallery-section > h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.sis-kit-gallery[b-psjitbmrfm]  .gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
/* /Components/Pages/Private/Dev/SisKit/SisKitGalleryLayout.razor.rz.scp.css */
.sis-gallery-layout[b-z7xbck6q8g] {
    min-height: 100vh;
    background: linear-gradient(180deg, #E4F2F2 0%, #F2F8F8 45%, #F5FAFA 100%);
    color: var(--sis-text);
    font-family: 'Noto Sans Thai', sans-serif;
}
/* /Components/Pages/Private/Dev/SisKit/SurfacesSection.razor.rz.scp.css */
#surfaces[b-z24sna1yza] {
    line-height: normal;
    letter-spacing: normal;
}

.gallery-row[b-z24sna1yza] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

/* Placeholder content only -- stands in for other Wave 1 tasks' components (rows, buttons, links) inside these
   specimens so SisCard/SisSummaryCard's own surface and layout are what's being shown. Not part of the kit. */
.ph-list-head[b-z24sna1yza] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sis-divider-strong);
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text);
}

.ph-list-row[b-z24sna1yza] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sis-divider);
    font-size: 14px;
}

.ph-list-code[b-z24sna1yza] {
    font-weight: 700;
    margin-right: 8px;
}

.ph-list-foot[b-z24sna1yza] {
    padding: 14px 16px;
    color: var(--sis-text-secondary);
    font-size: 13px;
}

.ph-term-title[b-z24sna1yza] {
    font-size: 20px;
    font-weight: 600;
    color: var(--sis-text);
    margin-bottom: 10px;
}

.ph-term-body[b-z24sna1yza] {
    margin: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.ph-aside-body[b-z24sna1yza] {
    margin: 0;
    font-size: 14px;
    color: var(--sis-text-body);
}

.ph-btn[b-z24sna1yza] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.ph-btn-primary[b-z24sna1yza] {
    height: 52px;
    border: none;
    border-radius: var(--sis-radius-md);
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-size: 16px;
    font-weight: 700;
    box-shadow: var(--sis-primary-shadow);
}

.ph-btn-outline[b-z24sna1yza] {
    /* Board declares height:48 content-box with a 1.5px border (no box-sizing override); at DPR 1 the 1.5px
       sides snap to 1px, so the board's own rendered total (getBoundingClientRect) is 50px, not 48+1.5*2=51. */
    height: 50px;
    gap: 8px;
    border-radius: var(--sis-radius-md);
    border: 1.5px solid var(--sis-primary);
    color: var(--sis-primary);
}

.ph-btn-dashed[b-z24sna1yza] {
    /* Board: height:44 content-box + 1px border = 46px rendered total (see .ph-btn-outline). */
    height: 46px;
    border-radius: var(--sis-radius-sm);
    border: 1px dashed var(--sis-border-dashed);
    color: var(--sis-primary);
    font-size: 14px;
}

.ph-plain-dl[b-z24sna1yza] {
    margin: 0;
    border-radius: var(--sis-radius-sm);
    background: var(--sis-surface-subtle);
    overflow: hidden;
}
/* /Components/Pages/Private/Dev/SisKit/TabsSection.razor.rz.scp.css */
/* Fake card wrapper standing in for task F's SisCard (parallel task — not referenced here), just to give the
   Underline specimens the same context as the Main_v2/Enrolled_v2 boards (card, overflow hidden, tabs against
   the top edge). */
.demo-card[b-05d2beji8b] {
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    overflow: hidden;
}

.demo-card[b-05d2beji8b]  .demo-card-tabs {
    padding: 0 16px;
}
/* /Components/Pages/Private/Dev/SisKit/TermSection.razor.rz.scp.css */
/*
 * Layout helpers replicating the boards' own grid/stack wrappers around SisTermCard/Row specimens.
 * line-height/letter-spacing: normal reset the app shell's inherited Material typography (MudBlazor's body
 * line-height: 1.43 and letter-spacing ~0.17px — see SisTermCard.razor.css) on the placeholder pill/button/
 * note/alert/empty-state text below, which isn't covered by SisTermCard/Row's own reset since it sits outside
 * their root elements. Elements below with their own line-height (.ph-note, .ph-amount value, .ph-detail,
 * .ph-alert) override this via normal cascade (more specific selector, declared after).
 */
.term-gallery-grid2[b-pec1dnnu3s] {
    line-height: normal;
    letter-spacing: normal;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.term-gallery-stack[b-pec1dnnu3s] {
    line-height: normal;
    letter-spacing: normal;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.term-gallery-col[b-pec1dnnu3s] {
    line-height: normal;
    letter-spacing: normal;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.term-gallery-states[b-pec1dnnu3s] {
    line-height: normal;
    letter-spacing: normal;
    box-sizing: border-box;
    width: 100%;
    padding: 40px;
    background: #E9F1F2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    /* Board sets this explicitly; without it grid's default stretch pads every shorter column in a row out to
       the tallest one's height (invisible, but not what the board draws). */
    align-items: start;
}

/*
 * Placeholder pill/button/note/alert/empty-state markup below stands in for other Wave 1 tasks' kit components
 * (SisPill = B, SisButton = A, notice/alert = E, empty state = G) so this section's specimens match the boards
 * pixel-for-pixel. None of this belongs to SisTermCard/SisTermRow/SisTermList/SisGroupHeading themselves.
 */
.ph-pill[b-pec1dnnu3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ph-pill--sm[b-pec1dnnu3s] {
    height: 24px;
}

.ph-pill--success[b-pec1dnnu3s] { background: var(--sis-success-bg); color: var(--sis-success-fg); }
.ph-pill--warning[b-pec1dnnu3s] { background: var(--sis-warning-bg); color: var(--sis-warning-fg); }
.ph-pill--info[b-pec1dnnu3s] { background: var(--sis-info-bg); color: var(--sis-info-fg); }
.ph-pill--neutral[b-pec1dnnu3s] { background: var(--sis-neutral-bg); color: var(--sis-neutral-fg); }

.ph-btn[b-pec1dnnu3s] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

.ph-btn:focus-visible[b-pec1dnnu3s] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.ph-btn:active[b-pec1dnnu3s] {
    transform: translateY(1px);
}

.ph-btn--h52[b-pec1dnnu3s] { height: 52px; font-size: 16px; border-radius: var(--sis-radius-md); }
.ph-btn--h48[b-pec1dnnu3s] { height: 48px; font-size: 15px; border-radius: var(--sis-radius-md); }
.ph-btn--h44[b-pec1dnnu3s] { height: 44px; padding: 0 16px; font-size: 14px; border-radius: var(--sis-radius-sm); }

.ph-btn--primary[b-pec1dnnu3s] { font-weight: 700; }
.ph-btn--secondary[b-pec1dnnu3s], .ph-btn--disabled[b-pec1dnnu3s] { font-weight: 600; }

.ph-btn--primary[b-pec1dnnu3s] { background: var(--sis-primary); color: var(--sis-text-on-dark); box-shadow: var(--sis-primary-shadow); }
.ph-btn--primary:hover[b-pec1dnnu3s] { background: var(--sis-primary-hover); }
.ph-btn--primary:active[b-pec1dnnu3s] { background: var(--sis-primary-active); }

.ph-btn--secondary[b-pec1dnnu3s] { background: var(--sis-surface); color: var(--sis-primary); border: 1.5px solid var(--sis-primary); }
.ph-btn--secondary:hover[b-pec1dnnu3s] { background: var(--sis-surface-hover); }

.ph-btn--disabled[b-pec1dnnu3s] { background: var(--sis-surface); color: var(--sis-text-disabled); border: 1.5px solid var(--sis-border); cursor: not-allowed; }

/*
 * Board box-sizing is per-element, not uniform — measured with getBoundingClientRect on the boards themselves:
 * - TermSelect3's desktop row action is a bordered <a> with no box-sizing override, so it's the browser default
 *   content-box: height:44 + border renders at 46 total (1.5px border-top/bottom round to 1px each in Chromium).
 * - TermSelect3Mobile's row action is the same <a>, but the board sets it inline width:100%; box-sizing:
 *   border-box; height:44 — so it stays 44 there. Reset it back down under the mobile breakpoint.
 * - TermSelectStates' disabled secondary is a <button>; Chromium's UA stylesheet defaults <button> to
 *   box-sizing: border-box, so height:48 already renders at 48 total — no adjustment needed.
 */
.ph-btn--h44.ph-btn--secondary[b-pec1dnnu3s] { height: 46px; }

@media (max-width: 959.98px) {
    .ph-btn--h44.ph-btn--secondary[b-pec1dnnu3s] { height: 44px; }
}

.ph-money[b-pec1dnnu3s] {
    font-variant-numeric: tabular-nums;
}

.ph-note[b-pec1dnnu3s] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--sis-radius-sm);
    background: var(--sis-surface-subtle);
    color: var(--sis-text-body);
    font-size: 13px;
    line-height: 1.6;
}

.ph-note-icon[b-pec1dnnu3s] {
    flex-shrink: 0;
    margin-top: 3px;
}

.ph-amount[b-pec1dnnu3s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-warning-box-bg);
    border: 1px solid var(--sis-warning-box-border);
    color: var(--sis-warning-text);
    font-size: 14px;
}

.ph-amount .ph-money[b-pec1dnnu3s] {
    font-size: 22px;
    font-weight: 700;
}

.ph-detail[b-pec1dnnu3s] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sis-text-body);
}

.ph-alert[b-pec1dnnu3s] {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-danger-bg);
    border: 1px solid var(--sis-danger-border);
    color: var(--sis-danger-fg);
    font-size: 14px;
    line-height: 1.6;
}

.ph-alert-icon[b-pec1dnnu3s] {
    flex-shrink: 0;
    margin-top: 2px;
}

.ph-empty[b-pec1dnnu3s] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 22px;
    border-radius: var(--sis-radius-xl);
    background: var(--sis-surface);
    border: 1px dashed var(--sis-border-empty);
}

.ph-empty-icon[b-pec1dnnu3s] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-empty p[b-pec1dnnu3s] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
}
/* /Components/Pages/Private/Enroll/Enroll.razor.rz.scp.css */
/* TermSelect_v2 / TermSelect3_v2: cards (or the current card + earlier-terms list) sit in a 2-column grid at
   ≥960px, 24px apart, each column top-aligned (the boards set align-items: start); one stacked column below. */
.enroll-page[b-6fuou9pfoj] {
    line-height: normal;
    letter-spacing: normal;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
}

.enroll-grid[b-6fuou9pfoj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.enroll-col[b-6fuou9pfoj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.enroll-detail[b-6fuou9pfoj] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sis-text-body);
}

.enroll-sr-only[b-6fuou9pfoj] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 960px) {
    .enroll-grid[b-6fuou9pfoj] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }
}

.enroll-pill-short[b-6fuou9pfoj] {
    display: none;
}

@media (max-width: 959.98px) {
    .enroll-page[b-6fuou9pfoj] {
        gap: 16px;
    }

    /* TermSelectMobile_v2 / TermSelect3Mobile_v2 draw no breadcrumb: the board wins for this page. */
    .enroll-page[b-6fuou9pfoj]  [data-slot="breadcrumb"] {
        display: none;
    }

    /* TermSelect3Mobile_v2 rows use the short pill "ต้องชำระก่อน". */
    .enroll-pill-long[b-6fuou9pfoj] {
        display: none;
    }

    .enroll-pill-short[b-6fuou9pfoj] {
        display: inline;
    }
}
/* /Components/Pages/Private/Enroll/EnrollDashboard.razor.rz.scp.css */
/* Enroll dashboard (boards Main_v2 / Enrolled_v2 / CartMobile_v2 / EnrolledMobile_v2). Structure comes from the Sis*
   kit; this file only holds page layout. Mobile rules use max-width: 959.98px (spec §4). */

.ed-page[b-cnbh0kx97i] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

/* Desktop: list card + 300px aside. */
.ed-layout[b-cnbh0kx97i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

/* List toolbar: the Segmented tabs (desktop too, owner decision 2026-09-29) sized to their tabs and pinned to the
   card's top-left at the panel's 16px inset. The list search sits on its own full-width line below them while the
   card shares its row with the cart's aside (too narrow for both side by side), and at the far end of the tab row
   when the card has the full width (--inline, desktop only). 16px below it before the panel (the panel's own
   leading padding is dropped, see .ed-panel below). */
.ed-toolbar[b-cnbh0kx97i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px;
}

@media (min-width: 960px) {
    .ed-page[b-cnbh0kx97i]  .ed-tabs {
        width: fit-content;
        flex-shrink: 0;
    }

    .ed-page[b-cnbh0kx97i]  .ed-tabs [data-slot=tab] {
        padding: 0 20px;
    }

    .ed-toolbar--inline[b-cnbh0kx97i] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .ed-toolbar--inline[b-cnbh0kx97i]  .ed-search {
        width: 320px;
        min-width: 0;
    }
}

/* "แสดง X จาก Y รายวิชา" while filtering; the live region stays mounted but takes no space when empty. */
.ed-filter-status[b-cnbh0kx97i] {
    margin: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ed-filter-status:empty[b-cnbh0kx97i] {
    position: absolute; /* out of flow, so the mobile card's flex gap doesn't count it */
}

.ed-filter-status:not(:empty)[b-cnbh0kx97i] {
    margin: -4px 16px 12px;
}

.ed-panel[b-cnbh0kx97i] {
    min-width: 0;
}

.ed-list[b-cnbh0kx97i] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The row just added from the search page (BlazorScrollToId's marker): a brief tint inside the row that fades out,
   instead of the global .element-focus outline, which the card's clipped overflow cut into two stray lines. The tint
   sits under the row's content (isolated stacking context, z-index -1) so the text keeps its contrast. */
.ed-list[b-cnbh0kx97i]  .ed-row-added {
    position: relative;
    isolation: isolate;
}

.ed-list[b-cnbh0kx97i]  .ed-row-added::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sis-icon-tile-bg);
    opacity: 0;
    pointer-events: none;
    animation: ed-row-added-b-cnbh0kx97i 2.4s var(--sis-ease) 1;
}

@keyframes ed-row-added-b-cnbh0kx97i {
    0%, 40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ed-list[b-cnbh0kx97i]  .ed-row-added::after {
        animation: none;
    }
}

.ed-pad[b-cnbh0kx97i] {
    padding: 16px;
}

/* The toolbar's bottom margin already spaces an empty-state panel from the tabs. */
.ed-panel > .ed-pad:first-child[b-cnbh0kx97i] {
    padding-top: 0;
}

/* Empty cart/enrolled panels: roomier than the kit's compact dashed shape (the list card is wide), and a wider
   description that wraps only at the Thai phrase space, so "ลงทะเบียน" is never split mid-word as it was at the
   kit's 360px cap. */
.ed-pad[b-cnbh0kx97i]  .ed-empty {
    padding: 32px 24px;
    gap: 10px;
}

.ed-pad[b-cnbh0kx97i]  .ed-empty [data-slot=icon] {
    width: 56px;
    height: 56px;
}

.ed-pad[b-cnbh0kx97i]  .ed-empty [data-slot=icon] svg {
    width: 26px;
    height: 26px;
}

.ed-pad[b-cnbh0kx97i]  .ed-empty [data-slot=title] {
    font-size: 17px;
}

.ed-pad[b-cnbh0kx97i]  .ed-empty [data-slot=description] {
    max-width: 480px;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.ed-more[b-cnbh0kx97i] {
    padding: 14px 16px;
}

.ed-aside[b-cnbh0kx97i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ed-aside-caption[b-cnbh0kx97i] {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}

.ed-receipt-note[b-cnbh0kx97i] {
    margin: 0;
    padding: 0 16px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}

/* IsDeal == false fee total (was a MudCard). */
.ed-fee-title[b-cnbh0kx97i] {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
}

.ed-fee-list[b-cnbh0kx97i] {
    margin: 0 0 12px;
}

.ed-fee-list:last-child[b-cnbh0kx97i] {
    margin-bottom: 0;
}

/* Mobile-only pieces are hidden from 960px up (the aside carries them there). */
@media (min-width: 960px) {
    .ed-sticky[b-cnbh0kx97i],
    .ed-receipt-note[b-cnbh0kx97i] {
        display: none;
    }
}

@media (max-width: 959.98px) {
    .ed-page[b-cnbh0kx97i] {
        gap: 14px;
    }

    /* A phone has no room for "Add subject" beside the term title; the button says "Add" (its aria-label keeps the
       full name). Once enrolled, the summary card's status row replaces the tracker and the badge (option A). */
    .ed-add-full[b-cnbh0kx97i],
    .ed-page[b-cnbh0kx97i]  .ed-steps-enrolled {
        display: none;
    }


    .ed-layout[b-cnbh0kx97i] {
        display: block;
    }

    .ed-aside[b-cnbh0kx97i] {
        display: none;
    }

    /* Mobile draws no list card: tabs are a segmented track, rows are their own cards (CartMobile_v2). */
    .ed-page[b-cnbh0kx97i]  .ed-card.sis-card {
        background: none;
        border: none;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .ed-page[b-cnbh0kx97i]  .ed-tabs {
        padding: 4px;
    }

    .ed-toolbar[b-cnbh0kx97i] {
        gap: 10px;
        margin: 0;
    }


    .ed-filter-status:not(:empty)[b-cnbh0kx97i] {
        margin: 0;
    }

    .ed-panel[b-cnbh0kx97i] {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .ed-list[b-cnbh0kx97i] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ed-pad[b-cnbh0kx97i],
    .ed-more[b-cnbh0kx97i] {
        padding: 0;
    }

    .ed-receipt-note[b-cnbh0kx97i] {
        padding: 0;
    }

    /* Sticky confirm bar (CartMobile_v2): count on the left, primary action on the right. */
    .ed-sticky[b-cnbh0kx97i] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        background: var(--sis-surface);
        border-top: 1px solid var(--sis-border);
        box-shadow: var(--sis-shadow-sticky);
    }

    /* The bar is pinned over the viewport bottom, so the page keeps room for it (bar height 76px + safe area). */
    .ed-page--has-sticky[b-cnbh0kx97i] {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .ed-sticky-summary[b-cnbh0kx97i] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ed-sticky-label[b-cnbh0kx97i] {
        font-size: 12px;
        color: var(--sis-text-secondary);
    }

    .ed-sticky-value[b-cnbh0kx97i] {
        font-size: 15px;
        font-weight: 700;
        color: var(--sis-text);
        font-variant-numeric: tabular-nums;
    }

    .ed-page[b-cnbh0kx97i]  .ed-sticky .ed-sticky-btn {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* No aside (empty cart / nothing enrolled): the list card takes the full width. */
.ed-layout:not(:has(> .ed-aside))[b-cnbh0kx97i] {
    grid-template-columns: minmax(0, 1fr);
}

/* Desktop keeps the long label and the tracker's own "enrolled" pill, so the card's status row is not needed. */
@media (min-width: 960px) {
    .ed-add-short[b-cnbh0kx97i] {
        display: none;
    }

    .ed-page[b-cnbh0kx97i]  .esc-header {
        display: none;
    }
}

.ed-status[b-cnbh0kx97i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ed-status-label[b-cnbh0kx97i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-success-fg);
}

.ed-status-icon[b-cnbh0kx97i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sis-success-bg);
    color: var(--sis-success-icon);
    flex-shrink: 0;
}

.ed-status-link[b-cnbh0kx97i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-link);
    text-decoration: none;
    text-align: right;
    touch-action: manipulation;
}

.ed-status-link:hover[b-cnbh0kx97i] {
    text-decoration: underline;
}

.ed-status-link:focus-visible[b-cnbh0kx97i] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
    border-radius: 4px;
}
/* /Components/Pages/Private/Enroll/EnrollGuide.razor.rz.scp.css */
.enroll-guide[b-ly9nh6zwfa] {
    line-height: normal;
    letter-spacing: normal;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    max-width: 760px;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="section-title"] {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--sis-text-strong);
    text-wrap: balance;
    scroll-margin-top: 80px;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="text"],
.enroll-guide[b-ly9nh6zwfa]  [data-slot="bullets"],
.enroll-guide[b-ly9nh6zwfa]  [data-slot="facts"] dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sis-text-body);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="bullets"] {
    padding-left: 20px;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="steps"] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="steps"] > li {
    counter-increment: guide-step;
    position: relative;
    padding-left: 44px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="steps"] > li::before {
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--sis-primary);
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="step-title"] {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text-strong);
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="facts"] {
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="facts"] dt {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text-strong);
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="facts"] dt:first-child {
    margin-top: 0;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="link"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-link, #417687);
    text-decoration: underline;
    text-underline-offset: 3px;
    touch-action: manipulation;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="link"]:hover {
    color: var(--sis-primary);
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="link"]:focus-visible {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.enroll-guide[b-ly9nh6zwfa]  [data-slot="sr"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 960px) {
    .enroll-guide[b-ly9nh6zwfa] {
        gap: 20px;
    }
}
/* /Components/Pages/Private/ExamSchedule/ExamSchedule.razor.rz.scp.css */
/* ตารางสอบ -- page layout only; the rows come from ExamCard/ExamCardList, the chrome from the Sis kit. */

.exam-page[b-5ftqb73sh0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.exam-skeleton[b-5ftqb73sh0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Desktop: midterm and final side by side; the tabs are only for a phone/tablet (below). */
.exam-groups[b-5ftqb73sh0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.exam-groups-col[b-5ftqb73sh0] {
    min-width: 0;
}

@media (min-width: 960px) {
    .exam-page[b-5ftqb73sh0]  .exam-tabs.sis-tabs[data-variant] {
        display: none;
    }
}

@media (max-width: 959.98px) {
    .exam-page[b-5ftqb73sh0] {
        gap: 14px;
    }

    /* The term picker is wider than the room the title leaves it on a phone: it drops under the title. */
    .exam-page[b-5ftqb73sh0]  .sis-page-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "breadcrumb"
            "title"
            "subtitle"
            "actions";
    }

    .exam-page[b-5ftqb73sh0]  .sis-page-header [data-slot="actions"] {
        justify-content: flex-start;
    }

    .exam-groups[b-5ftqb73sh0] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One group at a time; the tab names it, so its own heading would repeat the tab. */
    .exam-page[data-tab="M"] .exam-groups-col[data-type="F"][b-5ftqb73sh0],
    .exam-page[data-tab="F"] .exam-groups-col[data-type="M"][b-5ftqb73sh0] {
        display: none;
    }

    .exam-page[b-5ftqb73sh0]  .exam-group-heading {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}
/* /Components/Pages/Private/Grade/StudentGrade.razor.rz.scp.css */
/* ผลการเรียน -- page layout only; the summary, tables, rows, pills, alerts and buttons come from the kit and the
   Shared/Grade components. */

.sg-page[b-225mad5g6u] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.sg-page[b-225mad5g6u]  .sg-term {
    width: 220px;
    max-width: 100%;
}

/* The all-terms view can hold ~200 rows: let the browser skip terms that are off screen. */
.sg-terms[b-225mad5g6u]  > * {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

.sg-terms[b-225mad5g6u],
.sg-skeleton[b-225mad5g6u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sg-term-title[b-225mad5g6u] {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

@media (max-width: 959.98px) {
    .sg-page[b-225mad5g6u] {
        gap: 14px;
    }

    /* Term picker and view switches drop under the title (they need more room than the header's side column). */
    .sg-page[b-225mad5g6u]  .sis-page-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "breadcrumb"
            "title"
            "subtitle"
            "actions";
    }

    .sg-page[b-225mad5g6u]  .sis-page-header [data-slot="actions"] {
        justify-content: flex-start;
    }

    .sg-page[b-225mad5g6u]  .sg-term {
        flex: 1 1 100%;
        width: 100%;
    }

    .sg-term-title[b-225mad5g6u] {
        font-size: 16px;
    }
}
/* /Components/Pages/Private/Notification/Notification.razor.rz.scp.css */
.notif-page[b-nxmcdy9ge2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

@media (max-width: 959.98px) {
    .notif-page[b-nxmcdy9ge2] {
        gap: 14px;
    }
}
/* /Components/Pages/Private/Profile.razor.rz.scp.css */
.profile-page[b-u3av39dbwm] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    line-height: normal;
    letter-spacing: normal;
}

.profile-top[b-u3av39dbwm] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
        "card status"
        "card menu"
        "info menu";
    grid-template-rows: auto auto 1fr;
    gap: 20px 24px;
    align-items: start;
}

.profile-top > [data-slot="card"][b-u3av39dbwm] {
    grid-area: card;
    min-width: 0;
}

.profile-top > [data-slot="status"][b-u3av39dbwm] {
    grid-area: status;
    min-width: 0;
}

.profile-top > [data-slot="info"][b-u3av39dbwm] {
    grid-area: info;
    min-width: 0;
}

.profile-top > [data-slot="menu"][b-u3av39dbwm] {
    grid-area: menu;
    min-width: 0;
}

.profile-top > [data-slot="card"][b-u3av39dbwm]  .profile-skeleton-card {
    height: 318px;
    border-radius: 16px;
}

.profile-details[b-u3av39dbwm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.profile-details h2[b-u3av39dbwm] {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--sis-text);
    text-wrap: balance;
    scroll-margin-top: 80px;
}

@media (max-width: 959.98px) {
    .profile-top[b-u3av39dbwm] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "card"
            "status"
            "info"
            "menu";
        grid-template-rows: none;
        gap: 16px;
    }

    .profile-top > [data-slot="card"][b-u3av39dbwm]  .profile-skeleton-card {
        height: 148px;
    }

    .profile-details[b-u3av39dbwm] {
        display: none;
    }
}
/* /Components/Pages/Private/Profiles/ActivityTranscript.razor.rz.scp.css */
.profile-subpage[b-nugslow9i9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Profiles/Advisor.razor.rz.scp.css */
.profile-subpage[b-w1682xbtij] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Profiles/EditProfile.razor.rz.scp.css */
.profile-subpage[b-bfoa26hvy5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Profiles/LanguageExam.razor.rz.scp.css */
.profile-subpage[b-zuvc0zzfvz] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Profiles/ProfileDetailsMobile.razor.rz.scp.css */
.profile-subpage[b-gdrbtt5ayp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/RegistrationCalendar/RegistCalendar.razor.rz.scp.css */
/* ปฏิทินการศึกษา -- the calendar picture + the registrar's own text list in one kit card. */

.rc-page[b-j27lqd8syv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.rc-skeleton[b-j27lqd8syv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rc-figure[b-j27lqd8syv] {
    margin: 0;
    padding: 12px;
    border-bottom: 1px solid var(--sis-divider);
}

.rc-figure[hidden][b-j27lqd8syv] {
    display: none;
}

.rc-figure img[b-j27lqd8syv] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sis-radius-md);
}

/* The calendar text arrives as HTML from the registrar (lists, paragraphs): draw its lists as divided rows. */
.rc-content[b-j27lqd8syv] {
    padding: 8px 20px 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

.rc-content[b-j27lqd8syv]  p {
    margin: 12px 0;
}

.rc-content[b-j27lqd8syv]  img {
    max-width: 100%;
    height: auto;
}

.rc-content[b-j27lqd8syv]  iframe {
    max-width: 100%;
    width: 100%;
}

.rc-content[b-j27lqd8syv]  iframe:not([height]) {
    aspect-ratio: 16 / 9;
    height: auto;
}

.rc-content[b-j27lqd8syv]  ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-content[b-j27lqd8syv]  ul > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--sis-divider);
    font-variant-numeric: tabular-nums;
}

.rc-content[b-j27lqd8syv]  ul > li:last-child {
    border-bottom: none;
}

.rc-content[b-j27lqd8syv]  ol {
    margin: 12px 0;
    padding-left: 1.5em;
}

.rc-content[b-j27lqd8syv]  li > ul,
.rc-content[b-j27lqd8syv]  li > ol {
    margin-top: 8px;
    padding-left: 1.25em;
    list-style: revert;
}

.rc-content[b-j27lqd8syv]  li li {
    padding: 4px 0 0;
    border-bottom: none;
    color: var(--sis-text-secondary);
}

.rc-content[b-j27lqd8syv]  h1,
.rc-content[b-j27lqd8syv]  h2,
.rc-content[b-j27lqd8syv]  h3,
.rc-content[b-j27lqd8syv]  h4 {
    margin: 16px 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

.rc-content[b-j27lqd8syv]  a {
    color: var(--sis-link);
    text-decoration: underline;
}

.rc-content[b-j27lqd8syv]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 959.98px) {
    .rc-page[b-j27lqd8syv] {
        gap: 14px;
    }

    /* The term picker is wider than the room the title leaves it on a phone: it drops under the title. */
    .rc-page[b-j27lqd8syv]  .sis-page-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "breadcrumb"
            "title"
            "subtitle"
            "actions";
    }

    .rc-page[b-j27lqd8syv]  .sis-page-header [data-slot="actions"] {
        justify-content: flex-start;
    }

    .rc-content[b-j27lqd8syv] {
        padding: 4px 16px 8px;
    }
}
/* /Components/Pages/Private/RegistrationResult/RegistrationResult.razor.rz.scp.css */
/* ผลการลงทะเบียน -- page layout only; rows, cards, the summary and money rows come from the Sis kit. Mirrors the
   enroll page's enrolled tab (EnrollDashboard.razor.css): summary card, then list card + 300px fee column. */

.rr-page[b-p9owijnluy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.rr-skeleton[b-p9owijnluy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rr-layout[b-p9owijnluy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.rr-list[b-p9owijnluy] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Withdrawn (W) rows get their own group under the enrolled ones. */
.rr-group[b-p9owijnluy] {
    margin: 0;
    padding: 14px 16px 8px;
    border-top: 1px solid var(--sis-divider);
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-secondary);
    text-wrap: balance;
}

/* The section chip is a button (opens the section preview), styled as the plain chip it wraps. */
.rr-section-chip[b-p9owijnluy] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    border-radius: var(--sis-radius-pill);
    cursor: pointer;
    touch-action: manipulation;
}

.rr-section-chip[b-p9owijnluy]  .sis-chip {
    transition: background-color var(--sis-duration) var(--sis-ease);
}

@media (hover: hover) {
    .rr-section-chip:hover[b-p9owijnluy]  .sis-chip {
        background: var(--sis-surface-track);
    }
}

.rr-section-chip:focus-visible[b-p9owijnluy] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

@media (max-width: 959.98px) {
    .rr-page[b-p9owijnluy] {
        gap: 14px;
    }

    /* Same as the enroll page's enrolled tab on a phone: no list card, every row its own card. */
    .rr-page[b-p9owijnluy]  .rr-card.sis-card {
        background: none;
        border: none;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .rr-list[b-p9owijnluy] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .rr-group[b-p9owijnluy] {
        padding: 6px 0 0;
        border-top: none;
    }

    .rr-layout[b-p9owijnluy] {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* the desktop grid's "start" would shrink the cards to their content */
        gap: 14px;
    }
}

/* ข้อมูลภาคใหม่ fade-in หลังโหลดเสร็จ (skeleton แสดงระหว่างโหลด) */
.rr-content[b-p9owijnluy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: rr-fade-in-b-p9owijnluy 220ms ease-out;
}

@keyframes rr-fade-in-b-p9owijnluy {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 959.98px) {
    .rr-content[b-p9owijnluy] { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .rr-content[b-p9owijnluy] { animation: none; }
}
/* /Components/Pages/Private/SearchSubject/SearchFavoriteSubject.razor.rz.scp.css */
/* Favorites page -- Favorites_v2 / FavoritesMobile_v2 / FavoritesEmpty_v2 content column (shell is not drawn). */
.fav-page[b-p3t3920jd6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 980px;
    min-width: 0;
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.fav-body[b-p3t3920jd6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.fav-list[b-p3t3920jd6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* The undo toast is position: fixed; its live-region host must not take part in the body's gap. */
.fav-body[b-p3t3920jd6]  [data-slot="live"] {
    position: absolute;
}

/* Programmatic focus target after a removal (not a tab stop). */
.fav-body:focus[b-p3t3920jd6] {
    outline: none;
}

.fav-note[b-p3t3920jd6] {
    margin: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

/* The term picker is the kit field (TermYearSelector SisField mode, same as the search page's). */
.fav-page[b-p3t3920jd6]  .fav-term-field {
    width: 220px;
    max-width: 100%;
}

/* การ์ดว่าง/ข้อผิดพลาดกว้างเต็มคอลัมน์ ขอบซ้าย-ขวาตรงกับ header และรายการ (ข้อความข้างในจำกัดความกว้างเอง) */
.fav-page[b-p3t3920jd6]  .fav-empty,
.fav-page[b-p3t3920jd6]  .fav-error {
    box-sizing: border-box;
    width: 100%;
}

/* Skeletons match the rendered row height (phone card / desktop card) so the list does not jump on load. */
.fav-page[b-p3t3920jd6]  .fav-skeleton {
    height: 146px;
    border-radius: var(--sis-radius-lg);
    opacity: 0.5;
}

.fav-page[b-p3t3920jd6]  .fav-search-more-mobile {
    display: none;
}

.fav-subtitle-mobile[b-p3t3920jd6] {
    display: none;
}

/* Desktop: rows are cards, two to a row (one column when the sidebar leaves less than ~2 x 400px). */
@media (min-width: 960px) {
    .fav-list[b-p3t3920jd6] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
        gap: 12px;
    }

    .fav-page[b-p3t3920jd6]  .fav-skeleton {
        height: 190px;
    }
}

@media (max-width: 959.98px) {
    /* Mobile shows its own subtitle line (FavoritesMobile_v2); pull it up under the title like the header's. */
    .fav-page[b-p3t3920jd6]  [data-slot="subtitle"] {
        display: none;
    }

    .fav-subtitle-mobile[b-p3t3920jd6] {
        display: block;
        margin: -8px 0 0;
        font-size: 13px;
        color: var(--sis-text-secondary);
    }

    .fav-page[b-p3t3920jd6] {
        gap: 12px;
    }

    .fav-body[b-p3t3920jd6] {
        gap: 12px;
    }

    .fav-page[b-p3t3920jd6]  .fav-search-more {
        display: none;
    }

    .fav-page[b-p3t3920jd6]  .fav-search-more-mobile {
        display: inline-flex;
    }

    .fav-note[b-p3t3920jd6] {
        display: none;
    }
}
/* /Components/Pages/Private/SearchSubject/SearchSubject.razor.rz.scp.css */
/* Search page layout (Search_v2 / SearchMobile_v2 / SearchStates_v2). Row look lives in SubjectCard.razor.css,
   the search field / chips / filter panel in SearchBoxForm.razor.css. */
.search-page[b-1ceo7w6mkx] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    line-height: normal;
    letter-spacing: normal;
}

/* Results / favourites tabs: the Segmented track on desktop too (owner decision 2026-09-29, same as the enroll
   dashboard), sized to its tabs and left-aligned instead of stretched; mobile keeps it full width. */
@media (min-width: 960px) {
    .search-page[b-1ceo7w6mkx]  .search-page-tabs {
        width: fit-content;
    }

    .search-page[b-1ceo7w6mkx]  .search-page-tabs [data-slot=tab] {
        padding: 0 20px;
    }
}

.search-page-panel[b-1ceo7w6mkx] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.search-page-section[b-1ceo7w6mkx] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.search-page-section[hidden][b-1ceo7w6mkx] {
    display: none;
}

.search-page-count[b-1ceo7w6mkx] {
    margin: 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.search-page-count-mobile[b-1ceo7w6mkx] {
    display: none;
}

.search-page-results[b-1ceo7w6mkx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-page-pagination[b-1ceo7w6mkx] {
    justify-content: center;
}

.search-page-favs[b-1ceo7w6mkx] {
    position: relative;
}

.search-page-favs:focus[b-1ceo7w6mkx] {
    outline: none;
}

.search-page-favs[b-1ceo7w6mkx]  [data-slot="live"] {
    position: absolute;
}

.search-page-favorites[b-1ceo7w6mkx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* "Before search" hint: link-strip to the favorites tab under the divider (SearchStates_v2). */
.search-page-panel[b-1ceo7w6mkx]  .sis-empty-state-actions {
    width: 100%;
}

.search-fav-strip[b-1ceo7w6mkx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    margin-top: 6px;
    padding: 0 14px;
    border: none;
    border-radius: var(--sis-radius-md);
    background: var(--sis-star-bg);
    color: var(--sis-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.search-fav-strip:hover[b-1ceo7w6mkx] {
    background: var(--sis-warning-strip-bg);
}

.search-fav-strip:focus-visible[b-1ceo7w6mkx] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.search-fav-strip svg[b-1ceo7w6mkx] {
    flex: 0 0 auto;
}

.search-fav-strip-text[b-1ceo7w6mkx] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-fav-strip-title[b-1ceo7w6mkx] {
    font-size: 14px;
    font-weight: 600;
}

.search-fav-strip-sub[b-1ceo7w6mkx] {
    font-size: 12px;
    color: var(--sis-warning-strip-subtext);
}

.search-fav-strip-action[b-1ceo7w6mkx] {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--sis-link);
}

@media (prefers-reduced-motion: reduce) {
    .search-fav-strip[b-1ceo7w6mkx] {
        transition: none;
    }
}

@media (max-width: 959.98px) {
    .search-page[b-1ceo7w6mkx] {
        gap: 12px;
    }

    .search-page-panel[b-1ceo7w6mkx],
    .search-page-section[b-1ceo7w6mkx] {
        gap: 12px;
    }

    .search-page-count[b-1ceo7w6mkx] {
        font-size: 13px;
    }

    .search-page-count-desktop[b-1ceo7w6mkx] {
        display: none;
    }

    .search-page-count-mobile[b-1ceo7w6mkx] {
        display: inline;
    }

    .search-page-results[b-1ceo7w6mkx] {
        gap: 8px;
    }

}

.search-page-results li:focus[b-1ceo7w6mkx] {
    outline: none;
}
/* /Components/Pages/Private/SearchSubject/SubjectDetail.razor.rz.scp.css */
/* Course detail page shell (Detail_v2 / DetailMobile_v2): 900px content column, toolbar row on top. */
.sd-page[b-53gtaee0y0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    min-width: 0;
}

.sd-toolbar[b-53gtaee0y0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 959.98px) {
    .sd-page[b-53gtaee0y0] {
        gap: 14px;
    }
}

@media (max-width: 959.98px) {
    /* 44px touch target for the in-content back link (36px on desktop per the board). */
    .sd-toolbar[b-53gtaee0y0]  .sis-back-link {
        min-height: 44px;
    }
}
/* /Components/Pages/Private/Setting/CampusSetting.razor.rz.scp.css */
.setting-subpage[b-islaps73qg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Setting/ContactRegistrar.razor.rz.scp.css */
.setting-subpage[b-5ksvmn98p0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Setting/LanguageSetting.razor.rz.scp.css */
.setting-subpage[b-2ah47mqm2f] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Setting/SystemAbout.razor.rz.scp.css */
.setting-subpage[b-9ohnjfh9fx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.setting-subpage[b-9ohnjfh9fx]  .about-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting-subpage[b-9ohnjfh9fx]  .about-card h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text);
    text-wrap: balance;
}

.setting-subpage[b-9ohnjfh9fx]  .about-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sis-text-body);
}

.setting-subpage[b-9ohnjfh9fx]  .about-card p[data-slot="version"] {
    font-size: 15px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Private/Setting/TermsDetail.razor.rz.scp.css */
.setting-subpage[b-t5opmodmac] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Pages/Private/Settings.razor.rz.scp.css */
/* ตั้งค่า -- page layout only; rows come from SettingRow, groups from SisCard / SisGroupHeading. */

.settings-page[b-w39jggxd1v] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.settings-page [data-slot="group"][b-w39jggxd1v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-page [data-slot="group"][b-w39jggxd1v]  .sis-group-heading {
    font-size: 14px;
    scroll-margin-top: 80px;
}

/* Sign-out is already in the desktop sidebar; the row is for the mobile layout only. */
@media (min-width: 960px) {
    .settings-page[b-w39jggxd1v]  .settings-signout {
        display: none;
    }
}
/* /Components/Pages/Private/SummaryLibrary/SummaryResult.razor.rz.scp.css */
.sr-page[b-xg1a3yedgy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.sr-skeleton > div[b-xg1a3yedgy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 959.98px) {
    .sr-page[b-xg1a3yedgy] {
        gap: 14px;
    }
}
/* /Components/Pages/Private/TermsConditions.razor.rz.scp.css */
/* /terms -- first-login consent screen (no sidebar layout): one readable column -- intro, notice card, consent row, one Primary. */

.terms-page[b-qzxe1n4bsp] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0 40px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

/* intro: icon tile, eyebrow, h1, one-line lead */
.terms-page [data-slot="intro"][b-qzxe1n4bsp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.terms-page [data-slot="intro-icon"][b-qzxe1n4bsp] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
}

.terms-page [data-slot="eyebrow"][b-qzxe1n4bsp] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-icon-tile-fg);
}

.terms-page [data-slot="title"][b-qzxe1n4bsp] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text-strong);
    text-wrap: balance;
    overflow-wrap: break-word;
    scroll-margin-top: 24px;
}

.terms-page [data-slot="lead"][b-qzxe1n4bsp] {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sis-text-subtitle);
    text-wrap: pretty;
}

/* consent: the whole bordered row is the hit target; ticked = selected tint, required-but-unticked = danger */
.terms-page [data-slot="consent"][b-qzxe1n4bsp] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.terms-page [data-slot="consent-field"][b-qzxe1n4bsp] {
    display: flex;
    flex-direction: column;
}

.terms-page [data-slot="consent-option"][b-qzxe1n4bsp] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--sis-border-control);
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sis-text-body);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.terms-page [data-slot="consent-option"]:hover[b-qzxe1n4bsp] {
    border-color: var(--sis-focus-color);
}

.terms-page [data-slot="consent-option"]:focus-within[b-qzxe1n4bsp] {
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
}

.terms-page [data-slot="consent-option"][data-checked][b-qzxe1n4bsp] {
    border-color: var(--sis-primary);
    background: var(--sis-surface-selected);
}

.terms-page [data-slot="consent-option"][data-invalid][b-qzxe1n4bsp] {
    border-color: var(--sis-danger);
    background: var(--sis-danger-bg);
}

.terms-page [data-slot="consent-option"] input[b-qzxe1n4bsp] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--sis-primary);
    cursor: pointer;
}

.terms-page [data-slot="consent-option"] input:focus-visible[b-qzxe1n4bsp] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

/* live region: always in the DOM so the message is announced; takes no space while empty */
.terms-page [data-slot="error"][b-qzxe1n4bsp] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sis-danger);
}

.terms-page [data-slot="error"]:not(:empty)[b-qzxe1n4bsp] {
    margin-top: 8px;
}

.terms-page [data-slot="consent"][b-qzxe1n4bsp]  .sis-btn {
    align-self: flex-start;
    min-width: 240px;
}

@media (prefers-reduced-motion: reduce) {
    .terms-page [data-slot="consent-option"][b-qzxe1n4bsp] {
        transition: none;
    }
}

@media (max-width: 959.98px) {
    .terms-page[b-qzxe1n4bsp] {
        gap: 20px;
        padding-top: 16px;
    }

    .terms-page [data-slot="intro-icon"][b-qzxe1n4bsp] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .terms-page [data-slot="title"][b-qzxe1n4bsp] {
        font-size: 21px;
    }

    .terms-page [data-slot="consent"][b-qzxe1n4bsp]  .sis-btn {
        align-self: stretch;
    }
}

@media (min-width: 960px) {
    .terms-page[b-qzxe1n4bsp] {
        padding-top: 40px;
    }

    .terms-page [data-slot="title"][b-qzxe1n4bsp] {
        font-size: 28px;
        line-height: 1.35;
    }

    .terms-page [data-slot="lead"][b-qzxe1n4bsp] {
        font-size: 16px;
    }
}
/* /Components/Pages/Private/Thesis/StudentThesis.razor.rz.scp.css */
.thesis-page[b-hz7qekhepc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.thesis-skeleton[b-hz7qekhepc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 959.98px) {
    .thesis-page[b-hz7qekhepc] {
        gap: 14px;
    }
}
/* /Components/Pages/Private/Utilities/Feedback.razor.rz.scp.css */
/* /setting/feedback -- one kit card holding a sis-form; the single Primary is the submit button. */

.feedback-page[b-swu8bh9ut8] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.feedback-page[b-swu8bh9ut8]  [data-slot="form"] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feedback-page [data-slot="actions"][b-swu8bh9ut8] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 959.98px) {
    .feedback-page [data-slot="actions"][b-swu8bh9ut8]  .sis-btn {
        width: 100%;
    }
}
/* /Components/Pages/Private/Utilities/GradeSim.razor.rz.scp.css */
/* จำลองผลการเรียน -- page layout only; the table, picker fields, alert, button and result card come from the kit. */

.gs-page[b-5eg23k6218] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.gs-skeleton[b-5eg23k6218] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* The run button sits at the card's end on desktop; full width on a phone, where it is the thumb's target. */
.gs-actions[b-5eg23k6218] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 959.98px) {
    .gs-page[b-5eg23k6218] {
        gap: 14px;
    }

    /* The term picker drops under the title, full width, like the registration result page. */
    .gs-page[b-5eg23k6218]  .sis-page-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "breadcrumb"
            "title"
            "subtitle"
            "actions";
    }

    .gs-page[b-5eg23k6218]  .sis-page-header [data-slot="actions"] {
        justify-content: flex-start;
    }

    .gs-page[b-5eg23k6218]  .gs-term {
        width: 100%;
    }

    .gs-actions[b-5eg23k6218]  .gs-run {
        width: 100%;
    }
}
/* /Components/Pages/SearchSubject/PublicSubjectRow.razor.rz.scp.css */
/* Anonymous search result row: the signed-in .subject-row look (SubjectCard.razor.css) for SubjectOfferAll. */
.public-subject-row[b-eq9graj15j] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    color: var(--sis-text);
    text-decoration: none;
    line-height: normal;
    letter-spacing: normal;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

.public-subject-row:hover[b-eq9graj15j] {
    background: var(--sis-surface-hover);
    border-color: var(--sis-border-control);
    color: var(--sis-text);
}

.public-subject-row:active[b-eq9graj15j] {
    background: var(--sis-surface-selected);
}

.public-subject-row:focus-visible[b-eq9graj15j] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.public-subject-row [data-slot="desktop"][b-eq9graj15j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.public-subject-row [data-slot="mobile"][b-eq9graj15j] {
    display: none;
}

.public-subject-row [data-slot="code"][b-eq9graj15j] {
    flex: 0 0 84px;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.public-subject-row [data-slot="main"][b-eq9graj15j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.public-subject-row [data-slot="name"][b-eq9graj15j] {
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-subject-row [data-slot="sub"][b-eq9graj15j] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-subject-row [data-slot="tags"][b-eq9graj15j] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-subject-row [data-slot="chevron"][b-eq9graj15j] {
    flex: 0 0 auto;
    color: var(--sis-text-muted);
}

@media (max-width: 959.98px) {
    .public-subject-row[b-eq9graj15j] {
        gap: 10px;
        padding: 12px 14px;
        min-height: 44px;
    }

    .public-subject-row [data-slot="desktop"][b-eq9graj15j] {
        display: none;
    }

    .public-subject-row [data-slot="mobile"][b-eq9graj15j] {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .public-subject-row [data-slot="head"][b-eq9graj15j] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .public-subject-row [data-slot="code"][b-eq9graj15j] {
        flex: 0 0 auto;
        font-size: 14px;
    }

    .public-subject-row [data-slot="name"][b-eq9graj15j] {
        font-size: 14px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .public-subject-row [data-slot="sub"][b-eq9graj15j] {
        font-size: 12px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-subject-row[b-eq9graj15j] {
        transition: none;
    }
}
/* /Components/Pages/SearchSubject/SubjectDetail.razor.rz.scp.css */
/* Public course detail body on the landing frame: same padding and gutters as /contacts' .ct-body (--ld-gutter /
   --ld-pad come from LandingShell); the content keeps the signed-in detail page's 900px reading column. */
.psd-page[b-s0unxo1g14] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px var(--ld-gutter) 40px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.psd-page > *[b-s0unxo1g14] {
    max-width: 900px;
    min-width: 0;
}

/* Not-found card: a comfortable reading width, centred, instead of a strip across the whole body. */
.psd-notfound[b-s0unxo1g14] {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

@media (max-width: 959.98px) {
    .psd-page[b-s0unxo1g14] {
        gap: 14px;
    }
}

@media (min-width: 960px) {
    .psd-page[b-s0unxo1g14] {
        padding: 32px var(--ld-pad) 72px;
    }
}
/* /Components/Pages/SearchSubject/SubjectExplore.razor.rz.scp.css */
/* Body of the landing frame: same padding and gutters as /contacts' .ct-body (--ld-gutter / --ld-pad come from
   LandingShell); the kit content inside keeps the kit tokens. */
.pse-page[b-z0krt5rx5x] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px var(--ld-gutter) 40px;
    line-height: normal;
    letter-spacing: normal;
}

.pse-count[b-z0krt5rx5x] {
    margin: 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
    scroll-margin-top: 80px;
}

.pse-results[b-z0krt5rx5x] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pse-page[b-z0krt5rx5x]  .pse-pagination {
    justify-content: center;
}

@media (max-width: 959.98px) {
    .pse-page[b-z0krt5rx5x] {
        gap: 12px;
    }

    .pse-count[b-z0krt5rx5x] {
        font-size: 13px;
    }
}

@media (min-width: 960px) {
    .pse-page[b-z0krt5rx5x] {
        padding: 32px var(--ld-pad) 72px;
    }
}
/* /Components/Shared/Announcement/NewsArticle.razor.rz.scp.css */
.news-article[b-i4objfakyx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 860px;
    padding: 28px 32px 32px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text-strong);
    line-height: normal;
    letter-spacing: normal;
}

.news-article [data-slot="meta"][b-i4objfakyx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.news-article [data-slot="date"][b-i4objfakyx] {
    font-variant-numeric: tabular-nums;
}

.news-article [data-slot="campuses"][b-i4objfakyx] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.news-article [data-slot="figure"][b-i4objfakyx] {
    margin: 0;
    background: var(--sis-surface-track);
    border-radius: var(--sis-radius-md);
    overflow: hidden;
}

.news-article [data-slot="figure"] img[b-i4objfakyx] {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

/* The CMS body: readable measure, comfortable leading (the global .newsContent rules keep images/lists sane). */
.news-article [data-slot="body"][b-i4objfakyx],
.news-article [data-slot="footer"][b-i4objfakyx] {
    max-width: 70ch;
    font-size: 16px;
    line-height: 1.75;
    color: var(--sis-text-strong);
    overflow-wrap: anywhere;
}

.news-article [data-slot="footer"][b-i4objfakyx] {
    padding-top: 16px;
    border-top: 1px solid var(--sis-divider-strong);
    font-size: 15px;
    color: var(--sis-text-body);
}

@media (max-width: 959.98px) {
    .news-article[b-i4objfakyx] {
        gap: 16px;
        padding: 20px 16px 24px;
    }
}
/* /Components/Shared/Announcement/NewsCard.razor.rz.scp.css */
.news-card[b-0ehkd6nzy9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
    text-decoration: none;
    touch-action: manipulation;
    line-height: normal;
    letter-spacing: normal;
    transition: box-shadow var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

.news-card:hover[b-0ehkd6nzy9] {
    border-color: var(--sis-border-dashed);
}

.news-card:hover [data-slot="heading"][b-0ehkd6nzy9] {
    color: var(--sis-link);
}

.news-card:focus-visible[b-0ehkd6nzy9] {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.news-card [data-slot="thumb"][b-0ehkd6nzy9] {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--sis-surface-track);
    border-bottom: 1px solid var(--sis-divider-strong);
}

.news-card [data-slot="thumb"] img[b-0ehkd6nzy9] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card [data-slot="body"][b-0ehkd6nzy9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px 16px;
}

.news-card [data-slot="heading"][b-0ehkd6nzy9] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card [data-slot="excerpt"][b-0ehkd6nzy9] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card [data-slot="date"][b-0ehkd6nzy9] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Announcement/NewsItem.razor.rz.scp.css */
.news-item[b-o59b2g2xca] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
    text-decoration: none;
    touch-action: manipulation;
    line-height: normal;
    letter-spacing: normal;
    transition: border-color var(--sis-duration) var(--sis-ease);
}

.news-item:hover[b-o59b2g2xca] {
    border-color: var(--sis-border-dashed);
}

.news-item:hover [data-slot="heading"][b-o59b2g2xca] {
    color: var(--sis-link);
}

.news-item:focus-visible[b-o59b2g2xca] {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.news-item [data-slot="thumb"][b-o59b2g2xca] {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--sis-surface-track);
    border-bottom: 1px solid var(--sis-divider-strong);
}

.news-item [data-slot="thumb"] img[b-o59b2g2xca] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item [data-slot="body"][b-o59b2g2xca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px 16px;
}

.news-item [data-slot="heading"][b-o59b2g2xca] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-item [data-slot="date"][b-o59b2g2xca] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Announcement/NewsSection.razor.rz.scp.css */
.news-section[b-03bnzaefph] {
    scroll-margin-top: 5rem; /* clears the fixed app bar for sisScrollIntoView */
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
}

.news-section [data-slot="header"][b-03bnzaefph] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.news-section [data-slot="title"][b-03bnzaefph] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sis-text);
    text-wrap: balance;
}

.news-section [data-slot="tools"][b-03bnzaefph] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.news-section [data-slot="campuses"][b-03bnzaefph] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.news-section [data-slot="campus"][b-03bnzaefph] {
    display: inline-flex;
    cursor: pointer;
    touch-action: manipulation;
}

.news-section [data-slot="campus-pill"][b-03bnzaefph] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--sis-border);
    border-radius: 999px;
    background: var(--sis-surface);
    color: var(--sis-text-body);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease);
}

.news-section [data-slot="campus"]:hover [data-slot="campus-pill"][b-03bnzaefph] {
    border-color: var(--sis-border-dashed);
    color: var(--sis-text);
}

.news-section [data-slot="campus"] input:checked + [data-slot="campus-pill"][b-03bnzaefph] {
    background: var(--sis-primary);
    border-color: var(--sis-primary);
    color: var(--sis-surface);
    font-weight: 600;
}

.news-section [data-slot="campus"] input:focus-visible + [data-slot="campus-pill"][b-03bnzaefph] {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.news-section [data-slot="grid"][b-03bnzaefph] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-section[data-cols="4"] [data-slot="grid"][b-03bnzaefph],
.news-section[data-cols="4"] [data-slot="skeleton"] > div[b-03bnzaefph] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.news-section [data-slot="grid"] > li[b-03bnzaefph] {
    min-width: 0;
}

.news-section [data-slot="skeleton"] > div[b-03bnzaefph] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.news-section [data-slot="more-mobile"][b-03bnzaefph] {
    display: none;
}

.news-section[b-03bnzaefph]  .ns-pagination {
    justify-content: flex-end;
}

@media (max-width: 1279.98px) {
    .news-section [data-slot="grid"][b-03bnzaefph],
    .news-section [data-slot="skeleton"] > div[b-03bnzaefph],
    .news-section[data-cols="4"] [data-slot="grid"][b-03bnzaefph],
    .news-section[data-cols="4"] [data-slot="skeleton"] > div[b-03bnzaefph] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 959.98px) {
    .news-section[b-03bnzaefph] {
        gap: 14px;
    }

    .news-section [data-slot="tools"][b-03bnzaefph] {
        width: 100%;
    }

    .news-section [data-slot="campus-pill"][b-03bnzaefph] {
        min-height: 44px;
    }

    .news-section [data-slot="more-desktop"][b-03bnzaefph] {
        display: none;
    }

    .news-section [data-slot="more-mobile"][b-03bnzaefph] {
        display: block;
    }

    .news-section [data-slot="more-mobile"][b-03bnzaefph]  .sis-btn {
        width: 100%;
    }

    .news-section[b-03bnzaefph]  .ns-pagination {
        justify-content: center;
    }
}

@media (max-width: 599.98px) {
    .news-section [data-slot="grid"][b-03bnzaefph],
    .news-section [data-slot="skeleton"] > div[b-03bnzaefph],
    .news-section[data-cols="4"] [data-slot="grid"][b-03bnzaefph],
    .news-section[data-cols="4"] [data-slot="skeleton"] > div[b-03bnzaefph] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .news-section [data-slot="skeleton"] > div > :nth-child(n+3)[b-03bnzaefph] {
        display: none;
    }

}
/* /Components/Shared/ClassSchedule/ClassListCard.razor.rz.scp.css */
.class-list-card[b-smi03t0unw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.class-list-card [data-slot="head"][b-smi03t0unw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.class-list-card [data-slot="code"][b-smi03t0unw] {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.class-list-card [data-slot="head"][b-smi03t0unw]  .sis-chip {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ไทยไม่มีช่องว่างระหว่างคำ: ตัดบรรทัดตามคำ (keep-all) และใช้ anywhere เฉพาะเมื่อโทเคนยาวเกินกล่องจริง ๆ */
.class-list-card [data-slot="name"][b-smi03t0unw],
.class-list-card [data-slot="name-en"][b-smi03t0unw],
.class-list-card [data-slot="lecturer"][b-smi03t0unw] {
    margin: 0;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.class-list-card [data-slot="name"][b-smi03t0unw] {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
}

.class-list-card [data-slot="name-en"][b-smi03t0unw],
.class-list-card [data-slot="lecturer"][b-smi03t0unw] {
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.class-list-card [data-slot="slots"][b-smi03t0unw] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border-top: 1px solid var(--sis-border);
}

.class-list-card [data-slot="slots"] > li[b-smi03t0unw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    padding: 8px 0;
    font-size: 15px;
}

.class-list-card [data-slot="slots"] > li + li[b-smi03t0unw] {
    border-top: 1px dashed var(--sis-border);
}

.class-list-card [data-slot="day"][b-smi03t0unw],
.class-list-card [data-slot="time"][b-smi03t0unw] {
    white-space: nowrap;
}

.class-list-card [data-slot="day"][b-smi03t0unw] {
    min-width: 4.5em;
    font-weight: 600;
}

.class-list-card [data-slot="time"][b-smi03t0unw] {
    font-variant-numeric: tabular-nums;
}

.class-list-card [data-slot="room"][b-smi03t0unw] {
    min-width: 0;
    color: var(--sis-text-secondary);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* /Components/Shared/ClassSchedule/ClassListView.razor.rz.scp.css */
.clv[b-49hrxvsxac] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: normal;
    letter-spacing: normal;
}

.clv > h2[b-49hrxvsxac] {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--sis-text);
    text-wrap: balance;
    scroll-margin-top: 5rem;
}

.clv-cards[b-49hrxvsxac] {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* CardsOnly: no table, so the cards show at every width, two per row on desktop. */
.clv-cards.is-only[b-49hrxvsxac] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clv-table tbody + tbody[b-49hrxvsxac] {
    border-top: 1px solid var(--sis-divider);
}

.clv-table td[b-49hrxvsxac],
.clv-table tbody th[b-49hrxvsxac] {
    vertical-align: top;
}

/* The spanned subject cells sit in the section's first row: their own bottom border would close the card twice. */
.clv-table tbody:last-of-type [rowspan][b-49hrxvsxac] {
    border-bottom: 0;
}

/* Hovering any slot highlights the whole section, spanned cells included. */
@media (hover: hover) {
    .clv-table tbody:hover td[b-49hrxvsxac],
    .clv-table tbody:hover th[b-49hrxvsxac] {
        background: var(--sis-surface-hover);
    }
}

.clv-table .clv-code[b-49hrxvsxac] {
    white-space: nowrap;
    font-weight: 600;
    text-align: start;
}

/* ไทยไม่มีช่องว่างระหว่างคำ: ตัดบรรทัดตามคำ (keep-all) และใช้ anywhere เฉพาะเมื่อโทเคนยาวเกินกล่องจริง ๆ */
.clv-name[b-49hrxvsxac],
.clv-name-en[b-49hrxvsxac] {
    display: block;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.clv-name-en[b-49hrxvsxac] {
    margin-top: 2px;
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.clv-wrap[b-49hrxvsxac] {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.clv-nowrap[b-49hrxvsxac] {
    white-space: nowrap;
}

.clv-time[b-49hrxvsxac] {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 959.98px) {
    .clv[b-49hrxvsxac]  .clv-table {
        display: none;
    }

    .clv-cards[b-49hrxvsxac],
    .clv-cards.is-only[b-49hrxvsxac] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/ClassSchedule/ClassSubjectRow.razor.rz.scp.css */
.class-subject-row[b-ogxqyisymn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.class-subject-row[data-hidden="true"][b-ogxqyisymn] {
    background: var(--sis-surface-subtle);
}

.class-subject-row[data-hidden="true"] [data-slot="title"][b-ogxqyisymn] {
    color: var(--sis-text-secondary);
}

.class-subject-row [data-slot="head"][b-ogxqyisymn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.class-subject-row [data-slot="title"][b-ogxqyisymn] {
    margin: 0;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.class-subject-row [data-slot="head"][b-ogxqyisymn]  .sis-chip {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.class-subject-row [data-slot="name-en"][b-ogxqyisymn] {
    margin: 0;
    font-size: 15px;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
}

.class-subject-row [data-slot="lecturer"][b-ogxqyisymn] {
    margin: 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.class-subject-row [data-slot="slots"][b-ogxqyisymn] {
    margin-top: 8px;
    overflow-x: auto;
    border: 1px solid var(--sis-divider-strong);
    border-radius: var(--sis-radius-md);
}

.class-subject-row [data-slot="actions"][b-ogxqyisymn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--sis-divider-strong);
}

/* Let the colour menu (and so its Block button) fill the grid cell. Only the menu root: MudBlazor 9's activator
   wrapper is tabindex="0" role="button" and must keep its display: contents, or it becomes a second tab stop. */
.class-subject-row [data-slot="actions"][b-ogxqyisymn]  .class-subject-row-menu {
    display: block;
    width: 100%;
}

.class-subject-row [data-slot="swatch"][b-ogxqyisymn] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-radius: 999px;
    box-sizing: border-box;
}

/* A hidden subject offers only show/hide, so the single button takes the whole row. */
.class-subject-row[data-hidden="true"] [data-slot="actions"][b-ogxqyisymn] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 959.98px) {
    .class-subject-row[b-ogxqyisymn] {
        padding: 16px;
    }

    .class-subject-row [data-slot="title"][b-ogxqyisymn] {
        font-size: 16px;
    }

    /* Two actions share a ~158px column each at 390px: the Md step's 20px inline padding clips "ซ่อนจากตาราง"
       beside its icon, so tighten it here (height stays 48px). */
    .class-subject-row [data-slot="actions"][b-ogxqyisymn]  .sis-btn {
        padding-inline: 12px;
    }
}
/* /Components/Shared/ClassSchedule/ClassTable.razor.rz.scp.css */
/* dialog/bottom sheet รายละเอียดวิชา (ClassTable) — ส่วนเนื้อหาข้างใน SisDialogLayout */
.ct-detail-info[b-jh6rd43679] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ct-detail-info p[b-jh6rd43679] {
    margin: 0;
    /* ภาษาไทยมีสระ/วรรณยุกต์บน-ล่าง: ไม่ใช้ line-height ต่ำจนตัวอักษรโดนตัด */
    line-height: 1.5;
}

.ct-detail-credit[b-jh6rd43679] {
    color: var(--sis-link);
    font-weight: 600;
}

.ct-detail-lecturer[b-jh6rd43679] {
    font-size: 14px;
    color: var(--sis-text-secondary);
}

/* ปุ่ม ซ่อนจากตาราง / สีในตาราง เรียงข้างกัน เต็มความกว้าง สูง ≥44px */
.ct-detail-actions[b-jh6rd43679] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.ct-detail-actions > *[b-jh6rd43679] {
    flex: 1 1 0;
    min-width: 0;
}

.ct-detail-actions[b-jh6rd43679]  .ct-detail-btn {
    min-height: 44px;
}
/* /Components/Shared/ClassSchedule/Dialogs/ExportSettingDialog.razor.rz.scp.css */
.esd[b-6tt6gcb4ce] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 6px;
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.esd-preview[b-6tt6gcb4ce],
.esd-backgrounds[b-6tt6gcb4ce] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.esd-preview > h3[b-6tt6gcb4ce],
.esd-backgrounds > p[b-6tt6gcb4ce] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-label);
}

/* Stand-in for the exported picture: the chosen background with two placeholder blocks, like the real table. */
.esd-preview-box[b-6tt6gcb4ce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 180px;
    padding: 20px;
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-sizing: border-box;
}

.esd-preview-box > span[b-6tt6gcb4ce] {
    display: block;
    background: color-mix(in srgb, var(--sis-surface) 75%, transparent);
    border-radius: var(--sis-radius-xs);
}

.esd-preview-box > span:first-child[b-6tt6gcb4ce] {
    width: 30%;
    height: 20px;
}

.esd-preview-box > span:last-child[b-6tt6gcb4ce] {
    width: 80%;
    height: 90px;
}

.esd-backgrounds > div[data-slot="options"][b-6tt6gcb4ce] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.esd-bg[b-6tt6gcb4ce] {
    display: grid;
    place-items: center;
    height: 64px;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--sis-border-control);
    border-radius: var(--sis-radius-md);
    color: var(--sis-primary);
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

.esd-bg:hover[b-6tt6gcb4ce] {
    border-color: var(--sis-primary);
}

.esd-bg:focus-visible[b-6tt6gcb4ce] {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.esd-bg[data-selected="true"][b-6tt6gcb4ce] {
    border-color: var(--sis-primary);
    box-shadow: 0 0 0 2px var(--sis-primary);
}

.esd-bg svg[b-6tt6gcb4ce] {
    padding: 2px;
    border-radius: 999px;
    background: var(--sis-surface);
}
/* /Components/Shared/ClassSchedule/ExpandableTimetable.razor.rz.scp.css */
/* Collapsed the shell is a plain block around ClassTable. Below 960px none of the expanded rules apply, so a resize can
   never leave a phone in it (the JS module also drops the state). */
.cs-grid-head[b-frprvqum29] {
    display: none;
}

@media (min-width: 960px) {
    /* Expanded it is a full-viewport overlay above the app bar (1300) and drawer, below dialogs (1400).
       ExpandableTimetable.razor.js zooms .cs-grid-zoom so the pixel-laid-out grid fits the body's width. */
    .cs-grid-shell.is-expanded[b-frprvqum29] {
        position: fixed;
        inset: 0;
        z-index: 1350;
        display: flex;
        flex-direction: column;
        background: var(--sis-surface-subtle);
        overscroll-behavior: contain;
        animation: cs-expand-in-b-frprvqum29 200ms ease-in-out both;
    }

    .cs-grid-shell.is-expanded.is-closing[b-frprvqum29] {
        animation: cs-expand-out-b-frprvqum29 150ms ease-in-out both;
    }

    .cs-grid-shell.is-expanded .cs-grid-head[b-frprvqum29] {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
        padding: 10px 24px;
        background: var(--sis-surface);
        border-bottom: 1px solid var(--sis-border);
        line-height: normal;
        letter-spacing: normal;
    }

    .cs-grid-title[b-frprvqum29] {
        font-size: 18px;
        font-weight: 500;
        color: var(--sis-text);
    }

    .cs-grid-term[b-frprvqum29] {
        color: var(--sis-text-secondary);
        font-size: 15px;
    }

    .cs-grid-head[b-frprvqum29]  .cs-collapse {
        margin-inline-start: auto;
        color: var(--sis-link);
    }

    .cs-grid-shell.is-expanded .cs-grid-body[b-frprvqum29] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        padding: 16px 24px 24px;
    }

    /* The grid is exactly as wide as the zoomed body, so the owner's forced horizontal scrollbar has nothing to scroll. */
    .cs-grid-shell.is-expanded .cs-grid-body[b-frprvqum29]  .classSchedule {
        overflow-x: hidden !important;
    }
}

@keyframes cs-expand-in-b-frprvqum29 {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes cs-expand-out-b-frprvqum29 {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-grid-shell.is-expanded[b-frprvqum29],
    .cs-grid-shell.is-expanded.is-closing[b-frprvqum29] {
        animation: none;
    }
}
/* /Components/Shared/ClassSchedule/LecturerCard.razor.rz.scp.css */
.lecturer-card[b-74ww3muis1] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 16px;
    background: var(--sis-surface);
    border-bottom: 1px solid var(--sis-divider);
    color: var(--sis-text);
    text-decoration: none;
    touch-action: manipulation;
    line-height: normal;
    letter-spacing: normal;
}

.lecturer-card:hover[b-74ww3muis1] {
    background: var(--sis-surface-hover);
}

.lecturer-card:focus-visible[b-74ww3muis1] {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: -3px;
}

.lecturer-card [data-slot="avatar"][b-74ww3muis1] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
}

.lecturer-card [data-slot="name"][b-74ww3muis1] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.lecturer-card [data-slot="chevron"][b-74ww3muis1] {
    flex-shrink: 0;
    color: var(--sis-icon-muted);
}

.lecturer-card:hover [data-slot="chevron"][b-74ww3muis1] {
    color: var(--sis-text);
}
/* /Components/Shared/Common/AccessStateCard.razor.rz.scp.css */
.access-state[b-o0mqkpaa8y] {
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    line-height: normal;
    letter-spacing: normal;
}

.access-state[b-o0mqkpaa8y]  .access-state-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 640px;
    padding: 28px 28px 24px;
}

.access-state [data-slot="message"][b-o0mqkpaa8y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.access-state [data-slot="title"][b-o0mqkpaa8y] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sis-text);
    text-wrap: balance;
}

.access-state[data-kind="Authorizing"] [data-slot="title"][b-o0mqkpaa8y] {
    font-size: 18px;
    font-weight: 500;
}

.access-state [data-slot="title"]:focus-visible[b-o0mqkpaa8y] {
    outline: none;
}

.access-state [data-slot="text"][b-o0mqkpaa8y] {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sis-text-body);
    text-wrap: pretty;
}

.access-state [data-slot="actions"][b-o0mqkpaa8y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.access-state[b-o0mqkpaa8y]  [data-slot="primary-action"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 24px;
    border-radius: var(--sis-radius-md);
    background-color: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.access-state[b-o0mqkpaa8y]  [data-slot="primary-action"]:hover {
    background-color: var(--sis-primary-hover);
}

.access-state[b-o0mqkpaa8y]  [data-slot="primary-action"]:active {
    background-color: var(--sis-primary-active);
}

.access-state [data-slot="quiet-action"][b-o0mqkpaa8y] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sis-link);
    font-size: 15px;
    font-weight: 600;
    touch-action: manipulation;
}

.access-state[b-o0mqkpaa8y]  [data-slot="primary-action"]:focus-visible,
.access-state [data-slot="quiet-action"]:focus-visible[b-o0mqkpaa8y] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

@media (max-width: 959.98px) {
    .access-state[b-o0mqkpaa8y] {
        padding: 12px 0;
    }

    .access-state[b-o0mqkpaa8y]  .access-state-card {
        padding: 20px 18px;
    }

    .access-state [data-slot="actions"][b-o0mqkpaa8y] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .access-state [data-slot="quiet-action"][b-o0mqkpaa8y] {
        justify-content: center;
    }
}
/* /Components/Shared/Common/ContactCard.razor.rz.scp.css */
.contact-card[b-yfe7vmbvwu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
    max-width: 720px;
}

.contact-card [data-slot="office"][b-yfe7vmbvwu] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sis-text);
    text-wrap: balance;
}

.contact-card [data-slot="details"][b-yfe7vmbvwu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-card [data-slot="details"] li[b-yfe7vmbvwu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
}

.contact-card [data-slot="details"][b-yfe7vmbvwu]  .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--sis-icon-muted);
}

.contact-card [data-slot="links"][b-yfe7vmbvwu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-card [data-slot="links"][b-yfe7vmbvwu]  .sis-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.contact-card iframe[b-yfe7vmbvwu] {
    display: block;
    width: 100%;
    height: 320px;
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
}

@media (max-width: 959.98px) {
    .contact-card iframe[b-yfe7vmbvwu] {
        height: 240px;
    }
}
/* /Components/Shared/Common/ContactRegistrarList.razor.rz.scp.css */
/* Kit look for the campus accordion: white card, hairline dividers, chevron, teal focus ring. */

.contact-list[b-s8xu9has9s] {
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.contact-list [data-slot="panels"][b-s8xu9has9s] {
    container-type: inline-size;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    overflow: hidden;
}

.contact-list [data-slot="panel"] + [data-slot="panel"][b-s8xu9has9s] {
    border-top: 1px solid var(--sis-divider);
}

.contact-list [data-slot="header"][b-s8xu9has9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.contact-list [data-slot="header"][b-s8xu9has9s]::-webkit-details-marker {
    display: none;
}

.contact-list [data-slot="header"]:hover[b-s8xu9has9s] {
    background: var(--sis-surface-hover);
}

.contact-list [data-slot="header"]:focus-visible[b-s8xu9has9s] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: -2px;
    background: var(--sis-surface-hover);
}

.contact-list [data-slot="campus"][b-s8xu9has9s] {
    margin: 0;
    font: inherit;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-list [data-slot="chevron"][b-s8xu9has9s] {
    flex-shrink: 0;
    display: flex;
    color: var(--sis-icon-muted);
    transition: transform var(--sis-duration) var(--sis-ease);
}

.contact-list [data-slot="panel"][open] [data-slot="chevron"][b-s8xu9has9s] {
    transform: rotate(180deg);
}

.contact-list [data-slot="panel"] .contact-body[b-s8xu9has9s] {
    padding: 8px 16px 20px;
}

.contact-body[b-s8xu9has9s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
}

.contact-body [data-slot="office"][b-s8xu9has9s] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sis-text);
    text-wrap: balance;
}

.contact-body [data-slot="details"][b-s8xu9has9s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-body [data-slot="details"] li[b-s8xu9has9s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
}

.contact-body [data-slot="details"][b-s8xu9has9s]  .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--sis-icon-muted);
}

.contact-body [data-slot="links"][b-s8xu9has9s] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-body [data-slot="links"][b-s8xu9has9s]  .sis-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.contact-body iframe[b-s8xu9has9s] {
    display: block;
    width: 100%;
    height: 320px;
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
}

/* Wide containers (the public /contacts page): details on the left, map on the right, no 720px cap. */
@container (min-width: 900px) {
    .contact-body[b-s8xu9has9s] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 16px;
        max-width: none;
        align-items: start;
    }

    .contact-body > :not(iframe)[b-s8xu9has9s] {
        grid-column: 1;
    }

    .contact-body > iframe[b-s8xu9has9s] {
        grid-column: 2;
        grid-row: 1 / span 4;
        height: 360px;
    }
}

@media (max-width: 959.98px) {
    .contact-list [data-slot="header"][b-s8xu9has9s] {
        min-height: 60px;
    }

    .contact-body iframe[b-s8xu9has9s] {
        height: 240px;
    }
}
/* /Components/Shared/Common/Dialogs/CampusPicker.razor.rz.scp.css */
.campus-dialog[b-a42yx7tyvt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 0;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

/* Inside SisDialogLayout (CampusSelector): the shell owns the outer padding and the heading. */
.campus-dialog--untitled[b-a42yx7tyvt] {
    padding: 0;
}

.campus-dialog [data-slot="title"][b-a42yx7tyvt] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text);
    text-wrap: balance;
}

.campus-dialog [data-slot="remark"][b-a42yx7tyvt] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}
/* /Components/Shared/Common/Dialogs/UnAuthenDialog.razor.rz.scp.css */
.ua-tile[b-eto032infz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-selected);
    color: var(--sis-primary);
}

.ua-form[b-eto032infz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ua-field[b-eto032infz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ua-label[b-eto032infz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-label);
}

.ua-input[b-eto032infz] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--sis-border-field);
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface);
    color: var(--sis-text);
    font: inherit;
    font-size: 16px; /* 16px or more keeps iOS from zooming the page on focus */
    letter-spacing: 0.04em;
    touch-action: manipulation;
    transition: border-color var(--sis-duration) var(--sis-ease), box-shadow var(--sis-duration) var(--sis-ease);
}

.ua-input[b-eto032infz]::placeholder {
    color: var(--sis-placeholder);
    letter-spacing: normal;
}

.ua-input:hover[b-eto032infz] {
    border-color: var(--sis-focus-color);
}

.ua-input:focus-visible[b-eto032infz] {
    outline: none;
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
}

.ua-input:disabled[b-eto032infz] {
    background: var(--sis-surface-subtle);
    border-color: var(--sis-border);
    color: var(--sis-text-disabled);
}

.ua-field[data-invalid="true"] .ua-input[b-eto032infz] {
    border-color: var(--sis-danger);
    box-shadow: 0 0 0 3px rgba(161, 53, 46, 0.12);
}

.ua-error[b-eto032infz] {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--sis-danger);
}

.ua-divider[b-eto032infz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    font-size: 13px;
    color: var(--sis-text-muted-strong);
}

.ua-divider[b-eto032infz]::before,
.ua-divider[b-eto032infz]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--sis-border);
}
/* /Components/Shared/Common/PdpaParagraphs.razor.rz.scp.css */
.pdpa-text[b-wjqyvoye1c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.pdpa-text p[b-wjqyvoye1c] {
    margin: 0;
    text-indent: 2.5em;
    font-size: 16px;
    line-height: 1.8;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
}

.pdpa-text a[b-wjqyvoye1c] {
    color: var(--sis-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: 3px;
}

.pdpa-text a:hover[b-wjqyvoye1c] {
    color: var(--sis-primary-hover);
}

.pdpa-text a:focus-visible[b-wjqyvoye1c] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}
/* /Components/Shared/Common/SettingChoiceRow.razor.rz.scp.css */
.setting-choice[b-bab9n2nsub] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--sis-text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.setting-choice + .setting-choice[b-bab9n2nsub] {
    border-top: 1px solid var(--sis-divider);
}

.setting-choice:hover[b-bab9n2nsub] {
    background: var(--sis-surface-hover);
}

.setting-choice:focus-visible[b-bab9n2nsub] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: -2px;
    background: var(--sis-surface-hover);
}

.setting-choice[data-selected="true"][b-bab9n2nsub] {
    background: var(--sis-surface-selected);
    font-weight: 600;
}

.setting-choice [data-slot="mark"][b-bab9n2nsub] {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--sis-icon-muted);
    border-radius: 50%;
    background: var(--sis-surface);
    color: var(--sis-text-on-dark);
}

.setting-choice[data-selected="true"] [data-slot="mark"][b-bab9n2nsub] {
    border-color: var(--sis-primary);
    background: var(--sis-primary);
}

.setting-choice [data-slot="label"][b-bab9n2nsub] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 959.98px) {
    .setting-choice[b-bab9n2nsub] {
        min-height: 60px;
    }
}
/* /Components/Shared/Common/SettingRow.razor.rz.scp.css */
.setting-row[b-yks7u33oqb] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--sis-text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.setting-row + .setting-row[b-yks7u33oqb] {
    border-top: 1px solid var(--sis-divider);
}

.setting-row:hover[b-yks7u33oqb] {
    background: var(--sis-surface-hover);
}

.setting-row:active[b-yks7u33oqb] {
    background: var(--sis-surface-selected);
}

.setting-row:focus-visible[b-yks7u33oqb] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: -2px;
    background: var(--sis-surface-hover);
}

.setting-row [data-slot="icon"][b-yks7u33oqb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sis-radius-sm);
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
}

.setting-row [data-slot="label"][b-yks7u33oqb] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.setting-row [data-slot="end"][b-yks7u33oqb] {
    flex-shrink: 0;
    display: flex;
    color: var(--sis-icon-muted);
}

@media (max-width: 959.98px) {
    .setting-row[b-yks7u33oqb] {
        min-height: 60px;
    }
}
/* /Components/Shared/Enroll/Dialogs/AlertNonConfirmCourseDialog.razor.rz.scp.css */
.anc-message[b-orzanp78fp] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sis-text-label);
    text-align: left;
}

.anc-note[b-orzanp78fp] {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}

.anc-asof[b-orzanp78fp] {
    margin: 0;
    font-size: 12px;
    text-align: right;
    color: var(--sis-text-secondary);
}

.anc[b-orzanp78fp]  .sis-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Enroll/Dialogs/ConfirmDialog.razor.rz.scp.css */

.cfd[b-jqakl6h2e1]  .sis-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Enroll/Dialogs/ConfirmValidateMessageDialog.razor.rz.scp.css */
.cvm-detail[b-1lkjztj3fa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-subtle);
    color: var(--sis-text-body);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.cvm-line[b-1lkjztj3fa] {
    margin: 0;
    overflow-wrap: anywhere;
}

.cvm-list[b-1lkjztj3fa] {
    list-style: disc outside;
    margin: 0;
    padding-left: 20px;
}

.cvm[b-1lkjztj3fa]  .sis-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Enroll/Dialogs/EditRegistDialog.razor.rz.scp.css */

.erg[b-z4bk84wb44]  .sis-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Enroll/Dialogs/EnrollProcessingDialog.razor.rz.scp.css */
/* ProcessingSteps paints its own centered 520px white card from 960px up (it used to be a full-page view); inside
   this dialog the dialog box is that card, so drop the inner frame and keep only its padding. */
.epd[b-5051behv97]  .pui-processing {
    width: auto;
    margin: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
/* /Components/Shared/Enroll/Dialogs/EnrollResultDialog.razor.rz.scp.css */
/* Confirmed-subjects list of the success result (CartResult_v2 / CartResultMobile_v2). */
.erd-list[b-3otiufkx2c] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sis-divider-strong);
    border-radius: var(--sis-radius-md);
    overflow: hidden;
    text-align: left;
}

.erd-item[b-3otiufkx2c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--sis-text);
}

.erd-item + .erd-item[b-3otiufkx2c] {
    border-top: 1px solid var(--sis-divider);
}

.erd-code[b-3otiufkx2c] {
    flex-shrink: 0;
    font-weight: 700;
}

.erd-name[b-3otiufkx2c] {
    flex-grow: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erd-meta[b-3otiufkx2c] {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

@media (max-width: 959.98px) {
    .erd-item[b-3otiufkx2c] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .erd-name[b-3otiufkx2c] {
        flex-basis: calc(100% - 100px);
    }

    .erd-meta[b-3otiufkx2c] {
        flex-basis: 100%;
        font-size: 12px;
    }
}
/* /Components/Shared/Enroll/Dialogs/ValidateMessageDialog.razor.rz.scp.css */
/* Notice body of ValidateMessageDialog (RegistService message detail lines + bracketed list). */
.vmd-detail[b-ry2tj3mtwf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-subtle);
    color: var(--sis-text-body);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.vmd-line[b-ry2tj3mtwf] {
    margin: 0;
    overflow-wrap: anywhere;
}

.vmd-list[b-ry2tj3mtwf] {
    list-style: disc outside;
    margin: 0;
    padding-left: 20px;
}

.vmd[b-ry2tj3mtwf]  .sis-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Enroll/Dialogs/WithdrawNotes.razor.rz.scp.css */
.wn[b-q6ub6hqsob] {
    list-style: disc outside;
    margin: 0;
    padding: 14px 16px 14px 34px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-warning-strip-bg);
    color: var(--sis-warning-text);
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}
/* /Components/Shared/Enroll/Dialogs/WithdrawRegistDialog.razor.rz.scp.css */
/* Withdraw confirm (EnrolledWithdraw_v2): amber regulation strip + optional credit field. */
.wrd-credit[hidden][b-5agny723px] {
    display: none;
}

.wrd-credit[b-5agny723px] {
    margin-bottom: 4px;
}

.wrd[b-5agny723px]  .sis-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Enroll/EnrollSummaryCard.razor.rz.scp.css */
/* One quiet card row: the stats read left to right, the timetable link at the far end -- a teal text link (Ghost),
   since it is a way out to another page, not this summary's point. */
.esc[b-lu4ueac7a6] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.esc-stats[b-lu4ueac7a6] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    min-width: 0;
}

.esc-stat[b-lu4ueac7a6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.esc-stat dt[b-lu4ueac7a6] {
    font-size: 12px;
    color: var(--sis-text-secondary);
}

.esc-stat dd[b-lu4ueac7a6] {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

/* Optional header row: the full card width above the stats, bled to the card's edges under a divider. */
.esc-header[b-lu4ueac7a6] {
    flex: 1 0 100%;
    margin: 0 -20px;
    padding: 0 20px 12px;
    border-bottom: 1px solid var(--sis-divider);
    min-width: 0;
}

.esc[b-lu4ueac7a6]  .esc-action {
    color: var(--sis-link);
}

/* Below 960px the link becomes the card's footer: full width, centred, under a divider, bled to the card's edges. */
@media (max-width: 959.98px) {
    .esc[b-lu4ueac7a6] {
        padding: 14px 16px 0;
        overflow: hidden;
    }

    .esc[data-has-action="false"][b-lu4ueac7a6] {
        padding-bottom: 14px;
    }

    .esc-header[b-lu4ueac7a6] {
        margin: 0 -16px;
        padding: 0 16px 12px;
    }

    .esc[b-lu4ueac7a6]  .esc-action {
        flex: 1 0 100%;
        justify-content: center;
        height: 48px;
        margin: 0 -16px;
        border-top: 1px solid var(--sis-divider);
        border-radius: 0;
    }
}
/* /Components/Shared/Enroll/FavoriteSubjectDetail.razor.rz.scp.css */
/*
 * One favorited section row -- Favorites_v2 (desktop) / FavoritesMobile_v2 (stacked card).
 * Desktop: a card (the page lays them out two to a row): code / name / eng + star on top, a rule, then
 * chip time credit pills on the left and the action on the right. Mobile (< 960px): the same DOM re-flows into a
 * grid: head + star, "time · credit", then pills + action. The action is rendered twice (side / inline) and one is
 * hidden per breakpoint, like SisSectionRow does for its schedule text. On desktop a card that is at least 720px
 * wide (one wide column, e.g. the enroll search tab) becomes a horizontal row through a container query on .fav-row.
 */
.fav-row[b-pct3a6u929] {
    display: flex;
    min-width: 0;
    /* The card re-lays itself out by the width it is given (the list may be one or two columns wide). */
    container-type: inline-size;
}

.fav-card[b-pct3a6u929] {
    box-sizing: border-box;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
        "head star"
        "rule rule"
        "meta side";
    column-gap: 12px;
    row-gap: 14px;
    align-items: center;
    padding: 18px 20px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
    /* Spacing between rows is the list's job (gap); this keeps the row usable in any container. */
    min-width: 0;
}

.fav-row[b-pct3a6u929]  .fav-star {
    grid-area: star;
    align-self: start;
    justify-self: end;
    margin: -6px -8px 0 0;
}

.fav-card[b-pct3a6u929]::after {
    content: "";
    grid-area: rule;
    border-top: 1px solid var(--sis-border);
}

.fav-head[b-pct3a6u929] {
    grid-area: head;
    color: inherit;
    text-decoration: none;
    border-radius: var(--sis-radius-sm);
    touch-action: manipulation;
    align-self: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fav-code[b-pct3a6u929] {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    color: var(--sis-text-secondary);
}

.fav-head:hover .fav-name[b-pct3a6u929] {
    color: var(--sis-text-strong);
    text-decoration: underline;
}

.fav-head:focus-visible[b-pct3a6u929],
.fav-link:focus-visible[b-pct3a6u929] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.fav-code-section[b-pct3a6u929] {
    display: none;
}

.fav-name[b-pct3a6u929] {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: pretty;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fav-eng[b-pct3a6u929] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.fav-meta[b-pct3a6u929] {
    grid-area: meta;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.fav-row[b-pct3a6u929]  .fav-section-chip {
    font-weight: 600;
}

/* Desktop: time and credits get their own line above the chip and pills. */
.fav-when[b-pct3a6u929] {
    display: block;
    flex: 1 1 100%;
    order: -1;
    font-variant-numeric: tabular-nums;
}

.fav-time[b-pct3a6u929] {
    font-size: 13px;
}

/* The "·" between time and credits. */
.fav-time + .fav-credit[b-pct3a6u929]::before {
    content: "·";
    margin-inline: 6px;
}

.fav-credit[b-pct3a6u929] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fav-pills[b-pct3a6u929] {
    display: contents;
}

/* Board: "อยู่ในตะกร้า" uses the callout blue (#EAF2FB / #1B4A73), a step off the info pill token. */
.fav-row[b-pct3a6u929]  .fav-pill-cart {
    background: var(--sis-callout-bg);
    color: var(--sis-callout-fg);
}

.fav-action[b-pct3a6u929] {
    display: flex;
    align-items: center;
}

.fav-action--side[b-pct3a6u929] {
    grid-area: side;
}

.fav-action--inline[b-pct3a6u929] {
    display: none;
}

.fav-link[b-pct3a6u929] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--sis-radius-sm);
    color: var(--sis-link);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease);
}

.fav-link:hover[b-pct3a6u929] {
    background: var(--sis-surface-hover);
    color: var(--sis-text-strong);
}

.fav-link:active[b-pct3a6u929] {
    transform: translateY(1px);
}

.fav-row[b-pct3a6u929]  .fav-select {
    white-space: nowrap;
}

/* หน้าวิชาที่สนใจ: ปุ่มลบแบบ outline โทนแดงเงียบ ๆ (Sm = สูง 44px) ไม่ใช่ primary แดงเต็ม */
.fav-row[b-pct3a6u929]  .fav-remove {
    white-space: nowrap;
    color: var(--sis-danger);
    border-color: var(--sis-danger-border);
    background: transparent;
}

.fav-row[b-pct3a6u929]  .fav-remove:hover:not(:disabled) {
    background: var(--sis-danger-bg);
    color: var(--sis-danger-fg);
    border-color: var(--sis-danger);
}

/* The undo toast is position: fixed; its live-region host must not take part in the list's gap/flow. */
.fav-toast-host[b-pct3a6u929] {
    position: absolute;
}

/* Desktop, single wide column (narrow content area, or the enroll search tab): one horizontal row. */
@media (min-width: 960px) {
    @container (min-width: 720px) {
        .fav-card[b-pct3a6u929] {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 132px 44px;
            grid-template-rows: auto;
            grid-template-areas: "head meta side star";
            column-gap: 20px;
            align-items: center;
        }

        .fav-card[b-pct3a6u929]::after {
            display: none;
        }

        .fav-row[b-pct3a6u929]  .fav-star {
            align-self: center;
            margin: 0;
        }

        .fav-action--side[b-pct3a6u929] {
            justify-self: end;
        }

        .fav-head[b-pct3a6u929] {
            align-self: center;
        }

        .fav-meta[b-pct3a6u929] {
            align-self: center;
        }
    }
}

@media (max-width: 959.98px) {
    .fav-card[b-pct3a6u929]::after {
        display: none;
    }

    .fav-card[b-pct3a6u929] {
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-rows: none;
        grid-template-areas:
            "head star"
            "when when"
            "pills action";
        row-gap: 6px;
        column-gap: 8px;
        align-items: start;
        padding: 12px 12px 12px 14px;
    }

    .fav-row[b-pct3a6u929]  .fav-star {
        align-self: start;
        margin: -6px -4px 0 0;
    }

    .fav-head[b-pct3a6u929] {
        align-self: auto;
    }

    /* FavoritesMobile_v2: no tinted tile behind the star (out-specifies the kit's is-tinted.is-on wash). */
    .fav-row[b-pct3a6u929]  .fav-star.sis-star-toggle.is-tinted.is-on {
        background: transparent;
    }

    .fav-head[b-pct3a6u929] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .fav-code[b-pct3a6u929] {
        align-self: auto;
        font-size: 14px;
        color: var(--sis-text);
    }

    .fav-code-section[b-pct3a6u929] {
        display: inline;
    }

    .fav-name[b-pct3a6u929] {
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
    }

    .fav-eng[b-pct3a6u929],
    .fav-row[b-pct3a6u929]  .fav-section-chip {
        display: none;
    }

    .fav-meta[b-pct3a6u929] {
        display: contents;
    }

    .fav-when[b-pct3a6u929] {
        grid-area: when;
        display: block;
        font-size: 13px;
        color: var(--sis-text-label);
    }

    .fav-credit[b-pct3a6u929] {
        color: inherit;
    }

    .fav-pills[b-pct3a6u929] {
        grid-area: pills;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        align-self: center;
    }

    .fav-action--side[b-pct3a6u929] {
        display: none;
    }

    .fav-action--inline[b-pct3a6u929] {
        grid-area: action;
        display: flex;
        margin: 0;
        justify-self: end;
        align-self: center;
    }

    .fav-link[b-pct3a6u929] {
        min-height: 44px;
        height: auto;
    }

    .fav-row[b-pct3a6u929]  .fav-select {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fav-link[b-pct3a6u929] {
        transition: none;
    }

    .fav-link:active[b-pct3a6u929] {
        transform: none;
    }
}
/* /Components/Shared/Enroll/Payment/EnrollFailedPanel.razor.rz.scp.css */
/* Failed-result content (CartFailed_v2 / CartResultStates_v2). Dialog chrome comes from SisDialogLayout. */
.efp-message[b-yvrqqbq5km] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-subtle);
    color: var(--sis-text-body);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.efp-message-lead[b-yvrqqbq5km] {
    margin: 0;
    overflow-wrap: anywhere;
}

.efp-message-list[b-yvrqqbq5km] {
    list-style: disc outside;
    margin: 0;
    padding-left: 20px;
}

/* Reference row inside a SisMoneyList: same row anatomy as SisMoneyRow (12px 16px, 14px, label secondary, value 600). */
.efp-reference[b-yvrqqbq5km] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
}

.efp-reference--divided[b-yvrqqbq5km] {
    border-top: 1px solid var(--sis-divider);
}

.efp-reference dt[b-yvrqqbq5km] {
    margin: 0;
    font-weight: 400;
    color: var(--sis-text-secondary);
}

.efp-reference dd[b-yvrqqbq5km] {
    margin: 0;
    font-weight: 600;
    color: var(--sis-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.efp-link[b-yvrqqbq5km] {
    align-self: center;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--sis-link);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    touch-action: manipulation;
}

.efp-link:focus-visible[b-yvrqqbq5km] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
    border-radius: var(--sis-radius-xs);
}

.efp-hint[b-yvrqqbq5km] {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}

@media (max-width: 959.98px) {
    .efp-link[b-yvrqqbq5km] {
        min-height: 44px;
    }
}
/* /Components/Shared/Enroll/Payment/EnrollQuickCharge.razor.rz.scp.css */
/* "ตรวจยอดเงินอีกครั้ง": a quiet text link (same idea as the cart confirm's recheck) with proof it ran underneath */
.eqc-recheck[b-450lnw90kf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.eqc-recheck-btn[b-450lnw90kf] {
    padding: 6px 8px;
    border: 0;
    background: none;
    color: var(--sis-text);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.eqc-recheck-btn:disabled[b-450lnw90kf] {
    cursor: progress;
    text-decoration: none;
    color: var(--sis-text-secondary);
}

.eqc-recheck-at[b-450lnw90kf] {
    min-height: 1em;
    font-size: 12px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Enroll/RegistDataDetailReadOnly.razor.rz.scp.css */
/* Read-only subject summary card inside the confirm / edit dialogs (SIS tokens, neutral SisChip meta). */
.rdr[b-d704krume2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--sis-surface-subtle);
    border: 1px solid var(--sis-border);
    border-radius: 10px;
}

.rdr-title[b-d704krume2] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text);
}

.rdr-chips[b-d704krume2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Components/Shared/Enroll/RegistSectionDetail.razor.rz.scp.css */
/* Enroll dashboard row (boards Main_v2 / Enrolled_v2 / *Mobile_v2). Everything structural comes from SisCourseRow;
   only the enrolled-row "ถอนรายวิชา" action and the mobile pill height are page-specific. */

/* Board: <a> with height 40 + 1px border (content-box) renders 42px; this is a <button> so size the border-box. */
.rsd-withdraw[b-sfj0jo0oin] {
    height: 42px;
    padding: 0 14px;
    border-radius: var(--sis-radius-sm);
    border: 1px solid var(--sis-danger-border);
    background: var(--sis-surface);
    color: var(--sis-danger);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

.rsd-withdraw:hover:not(:disabled)[b-sfj0jo0oin] {
    background: var(--sis-danger-bg);
}

.rsd-withdraw:focus-visible[b-sfj0jo0oin] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.rsd-withdraw:disabled[b-sfj0jo0oin] {
    color: var(--sis-text-disabled);
    border-color: var(--sis-border);
    cursor: not-allowed;
}

.rsd-skeleton[b-sfj0jo0oin] {
    list-style: none;
    padding: 16px;
}

@media (max-width: 959.98px) {
    /* EnrolledMobile_v2: pill is 24px tall, the 44px touch target lives on the withdraw button. */
    .rsd-status-wrap[b-sfj0jo0oin]  .sis-pill {
        height: 24px;
    }

    .rsd-withdraw[b-sfj0jo0oin] {
        height: 44px;
    }
}

/* Section chip is a real button (opens the section preview) that keeps the chip look. */
.rsd-section-chip[b-sfj0jo0oin] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    border-radius: var(--sis-radius-pill);
    cursor: pointer;
    touch-action: manipulation;
}

.rsd-section-chip[b-sfj0jo0oin]  .sis-chip {
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.rsd-section-chip:hover[b-sfj0jo0oin]  .sis-chip {
    background: var(--sis-surface-track);
}

.rsd-section-chip:focus-visible[b-sfj0jo0oin] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}
/* /Components/Shared/Enroll/RegistTypeDetail.razor.rz.scp.css */
/* Registration type + credit block of the register dialogs (DetailDialog*_v2, DetailMobileSheet*_v2). */
.regist-type-detail[b-h3ofklfqg7] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

/* Read-only credit: desktop = tinted row (DetailDialog_v2), mobile = plain row (DetailMobileSheet_v2) that the
   sheet shows right under the section field, above the type control. */
.regist-credit-row[b-h3ofklfqg7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-subtle);
    font-size: 14px;
    color: var(--sis-text);
}

.regist-credit-row [data-slot="credit-label"][b-h3ofklfqg7] {
    color: var(--sis-text-secondary);
}

.regist-credit-row [data-slot="credit-value"][b-h3ofklfqg7] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 959.98px) {
    .regist-type-detail[b-h3ofklfqg7] {
        gap: 14px;
    }

    .regist-credit-row[b-h3ofklfqg7] {
        order: -1;
        padding: 0;
        background: transparent;
        font-size: 13px;
    }
}

/* "Choose the credit" / out-of-range hint under the stepper. */
.regist-credit-choose[b-h3ofklfqg7] {
    margin: -8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sis-warning-fg);
}
/* /Components/Shared/Enroll/RegistTypeSelector.razor.rz.scp.css */
.regist-type-readonly[b-iqorcngbou] {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: normal;
    letter-spacing: normal;
}

.regist-type-readonly-label[b-iqorcngbou] {
    font-size: 13px;
    color: var(--sis-text-secondary);
}
/* /Components/Shared/ExamSchedule/ExamCard.razor.rz.scp.css */
/* One exam row inside the group card (ExamCardList). Rows are separated by the divider line; the list card clips.
   Hierarchy: date tile + time carry the weight (700/600); room is body text; the subject is secondary. */

.exam-row[b-80c9zpzhm4] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sis-divider);
    list-style: none;
    line-height: normal;
    letter-spacing: normal;
}

.exam-row:last-child[b-80c9zpzhm4] {
    border-bottom: none;
}

/* Calendar tile: month / day / weekday. */
.exam-date[b-80c9zpzhm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 58px;
    padding: 6px 0;
    border-radius: var(--sis-radius-md);
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.exam-date [data-slot="month"][b-80c9zpzhm4],
.exam-date [data-slot="weekday"][b-80c9zpzhm4] {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.exam-date [data-slot="day"][b-80c9zpzhm4] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.exam-body[b-80c9zpzhm4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.exam-body p[b-80c9zpzhm4] {
    margin: 0;
}

.exam-when[b-80c9zpzhm4] {
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

.exam-where[b-80c9zpzhm4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: var(--sis-text-body);
}

.exam-where svg[b-80c9zpzhm4] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--sis-icon-muted);
}

.exam-where > span[b-80c9zpzhm4] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.exam-subject[b-80c9zpzhm4] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--sis-text-secondary);
}

.exam-subject [data-slot="code"][b-80c9zpzhm4] {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.exam-subject [data-slot="name"][b-80c9zpzhm4] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The next exam to come: blue callout tint with an inset border (the card clips its corners), filled tile.
   Inset ring, not border, so the row keeps its size and the card's own border is not doubled outward. */
.exam-row[data-next][b-80c9zpzhm4] {
    background: var(--sis-callout-bg);
    box-shadow: inset 0 0 0 1px var(--sis-callout-border);
    border-bottom-color: transparent;
}

.exam-row[data-next] .exam-date[b-80c9zpzhm4] {
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
}

.exam-body[b-80c9zpzhm4]  .exam-next {
    margin-bottom: 2px;
}

/* The info pill's own fill is the tint's colour; on the tinted row it needs a white face and an edge to show. */
.exam-row[data-next][b-80c9zpzhm4]  .exam-next {
    background: var(--sis-surface);
    box-shadow: inset 0 0 0 1px var(--sis-callout-border);
}

/* An exam that already started: quieter, but by colour (opacity would drop the text below AA). */
.exam-row[data-passed] .exam-date[b-80c9zpzhm4] {
    background: var(--sis-surface-muted);
    color: var(--sis-text-muted);
}

.exam-row[data-passed] .exam-when[b-80c9zpzhm4] {
    font-weight: 500;
    color: var(--sis-text-secondary);
}

.exam-row[data-passed] .exam-where[b-80c9zpzhm4] {
    color: var(--sis-text-secondary);
}
/* /Components/Shared/ExamSchedule/ExamCardList.razor.rz.scp.css */
.exam-group[b-dijk9quc20] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Group title reads as a section heading, not the kit's small label. */
.exam-group[b-dijk9quc20]  .exam-group-heading {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--sis-text);
    scroll-margin-top: 80px;
    text-wrap: balance;
}

.exam-group-list[b-dijk9quc20] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* /Components/Shared/FrontPage.razor.rz.scp.css */
/*
 * Landing page ("/", logged out) -- SIS landing design "Final". Palette + layout variables for every Landing* child, and
 * the few rules they share (::deep reaches the child components). Text / muted colours come from the SIS tokens; the
 * navy / teal / tint set below is the landing design's own palette and is not used anywhere else in the site.
 * Breakpoints: < 960px = the mobile artboard (600+ gets multi-column lists), >= 960px = the desktop artboard.
 */
.landing[b-xdjhnareva] {
    --ld-navy: #1E3A6E;
    --ld-navy-hover: #132850;
    --ld-teal: #0B7E8C;
    --ld-tint: #F2FBFC;
    --ld-tint-2: #E4F9FA;
    --ld-line: #D5EEF1;
    --ld-field-border: #B8DCE1;
    --ld-field-bg: #F7FCFD;
    --ld-hero-muted: #3F6470;
    --ld-tabs-bg: #EEF5F6;
    --ld-on-navy: #D6E0F2;
    --ld-ink: var(--sis-text-strong);
    --ld-muted: var(--sis-text-subtitle);
    --ld-gutter: 16px;
    --ld-pad: var(--ld-gutter);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
    background: #FFFFFF;
    color: var(--ld-ink);
    font-family: 'Noto Sans Thai', sans-serif;
    line-height: normal;
    letter-spacing: normal;
}

@media (min-width: 600px) {
    .landing[b-xdjhnareva] { --ld-gutter: 24px; }
}

@media (min-width: 960px) {
    .landing[b-xdjhnareva] {
        --ld-gutter: clamp(40px, 5.6vw, 80px);
        /* 80px side padding on the 1440 artboard; content stops growing at 1280px wide */
        --ld-pad: max(var(--ld-gutter), calc((100% - 1280px) / 2));
    }
}

.landing main[b-xdjhnareva] { display: block; flex: 1 0 auto; }
.landing main:focus[b-xdjhnareva] { outline: none; }

.landing[b-xdjhnareva]  :where(a) { color: var(--ld-navy); }
.landing[b-xdjhnareva]  :where(a):hover { color: var(--ld-navy-hover); }
.landing[b-xdjhnareva]  button, .landing[b-xdjhnareva]  input, .landing[b-xdjhnareva]  select { font-family: inherit; }

.landing[b-xdjhnareva]  :focus-visible {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.landing[b-xdjhnareva]  .ld-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The two artboards word a few labels differently; the other wording is display:none (hidden from screen readers too). */
@media (max-width: 959.98px) {
    .landing[b-xdjhnareva]  .ld-wide { display: none; }
}

@media (min-width: 960px) {
    .landing[b-xdjhnareva]  .ld-narrow { display: none; }
}

.ld-skip[b-xdjhnareva] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 10px 16px;
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--ld-navy) !important;
    font-weight: 600;
    transform: translateY(-200%);
}

.ld-skip:focus-visible[b-xdjhnareva] { transform: none; }

/*
 * Motion. Calm and short: 150-180ms hovers, ~450ms entrances, ease-out / ease-in-out, transform + opacity only (plus
 * colour / shadow on hover). The page is fully visible without script: the scroll-reveal hides an element only while
 * FrontPage.razor.js has set data-motion="on" on this root and the element is still waiting for data-revealed.
 * .ld-resumed = the interactive circuit took over from the prerender, which already played the hero entrance.
 */
.landing :where(a, button)[b-xdjhnareva] {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.landing[data-motion="on"][b-xdjhnareva]  [data-reveal]:not([data-revealed]) { opacity: 0; }

.landing[data-motion="on"][b-xdjhnareva]  [data-revealed]:not([data-revealed="instant"]) {
    animation: ld-reveal-b-xdjhnareva .5s cubic-bezier(.22, .61, .36, 1) backwards;
    /* 50ms per sibling, capped at 5 */
    animation-delay: calc(min(var(--ld-i, 0), 5) * 50ms);
}

@keyframes ld-reveal-b-xdjhnareva {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .landing[b-xdjhnareva],
    .landing[b-xdjhnareva]  *,
    .landing[b-xdjhnareva]  *::before,
    .landing[b-xdjhnareva]  *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .landing[b-xdjhnareva]  [data-reveal] { opacity: 1 !important; }
}
/* /Components/Shared/Grade/DeferDropGradeStatus.razor.rz.scp.css */
.ddg[b-nvgjf2h2b8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ddg-empty[data-embedded][b-nvgjf2h2b8]  .state-message {
    padding: 12px 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
/* /Components/Shared/Grade/GPADataSim.razor.rz.scp.css */
.gds-title[b-einuvd3nrq] {
    margin: 0;
    padding: 16px 20px 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

@media (max-width: 959.98px) {
    .gds-title[b-einuvd3nrq] {
        padding: 14px 16px 10px;
        font-size: 16px;
    }
}
/* /Components/Shared/Grade/GpaSummaryDetail.razor.rz.scp.css */
/* Standalone: one white kit card. Embedded: no chrome, a divider above it, on the surrounding card's own surface. */
.gsd[b-5zd2jad8sv] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.gsd[data-embedded="true"][b-5zd2jad8sv] {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--sis-divider-strong);
    border-radius: 0;
}

.gsd[b-5zd2jad8sv]  .gsd-status {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sis-divider);
}

.gsd-groups[b-5zd2jad8sv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px 32px;
    min-width: 0;
}

.gsd-group[b-5zd2jad8sv] {
    min-width: 0;
}

.gsd-group [data-slot="group-title"][b-5zd2jad8sv] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-secondary);
    text-wrap: balance;
}

.gsd-group dl[b-5zd2jad8sv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0;
}

.gsd-stat[b-5zd2jad8sv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gsd-stat dt[b-5zd2jad8sv] {
    font-size: 12px;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.gsd-stat dd[b-5zd2jad8sv] {
    margin: auto 0 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

.gsd-stat[data-emphasis="true"] dd[b-5zd2jad8sv] {
    font-size: 24px;
    line-height: 1.2;
}

@media (max-width: 959.98px) {
    .gsd[b-5zd2jad8sv] {
        padding: 14px 16px;
    }

    .gsd[data-embedded="true"][b-5zd2jad8sv] {
        padding: 14px 16px 16px;
    }

    .gsd-group dl[b-5zd2jad8sv] {
        gap: 8px 12px;
    }

    .gsd-stat dd[b-5zd2jad8sv] {
        font-size: 16px;
    }

    .gsd-stat[data-emphasis="true"] dd[b-5zd2jad8sv] {
        font-size: 22px;
    }
}
/* /Components/Shared/Grade/GradeDetailByTermYear.razor.rz.scp.css */
.gdt[b-f7s2iw39xx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
/* /Components/Shared/Grade/GradeDetailCard.razor.rz.scp.css */
/* One graded subject as a flat row: main block (code, name, chips) and the grade on the right; a certificate action or
   warning takes its own full-width line under them. */
.gdc[b-79u67erqs8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 16px;
    min-width: 0;
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.gdc-main[b-79u67erqs8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gdc p[b-79u67erqs8] {
    margin: 0;
}

.gdc-code[b-79u67erqs8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 15px;
    font-weight: 600;
}

.gdc-section[b-79u67erqs8] {
    font-size: 13px;
    font-weight: 400;
    color: var(--sis-text-secondary);
}

.gdc-name[b-79u67erqs8] {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.gdc-chips[b-79u67erqs8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* The grade sits in its own padded tile, centred on the row, so the big letter never crowds the card edge. */
.gdc-grade[b-79u67erqs8] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 52px;
    height: 52px;
    padding: 0 10px;
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface-subtle);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gdc[b-79u67erqs8]  .gdc-certificate {
    grid-column: 1 / -1;
}
/* /Components/Shared/Grade/GradeStudyStatus.razor.rz.scp.css */
/* The status row: label on the left, the status pill at the far end. Alone it is a flat row; GpaSummaryDetail puts it
   on top of the summary card. */
.gss[b-pigay06zdo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.gss-label[b-pigay06zdo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-secondary);
}
/* /Components/Shared/Grade/GradeTable.razor.rz.scp.css */
/* One term's grades: the kit card holds a title, the table (desktop) or the row list (phone), and the summary footer. */
.gt-title[b-t5d2zgscbq] {
    margin: 0;
    padding: 16px 20px 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

.gt-list[b-t5d2zgscbq] {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gt-list li[b-t5d2zgscbq] {
    padding: 14px 16px;
    border-top: 1px solid var(--sis-divider);
}

.gt-list li:first-child[b-t5d2zgscbq] {
    border-top: 0;
}

.gt-table td:nth-child(5)[b-t5d2zgscbq] {
    white-space: nowrap;
}

.gt-table td[b-t5d2zgscbq] {
    vertical-align: middle;
}

.gt-code[b-t5d2zgscbq] {
    white-space: nowrap;
    font-weight: 600;
}

.gt-name[b-t5d2zgscbq] {
    overflow-wrap: anywhere;
}

.gt-table[b-t5d2zgscbq]  .gt-transfer {
    margin-inline-start: 8px;
    vertical-align: middle;
}

.gt-table td.gt-grade[b-t5d2zgscbq] {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 959.98px) {
    .gt-title[b-t5d2zgscbq] {
        padding: 14px 16px 10px;
        font-size: 16px;
    }

    .gt-table[b-t5d2zgscbq] {
        display: none;
    }

    .gt-list[b-t5d2zgscbq] {
        display: block;
    }

    .gt-title ~ .gt-list li:first-child[b-t5d2zgscbq] {
        border-top: 1px solid var(--sis-divider);
    }
}
/* /Components/Shared/Grade/GradeTransferTable.razor.rz.scp.css */
/* Transferred subjects: same card as GradeTable -- table on desktop, GradeDetailCard rows on a phone. */
.gtt-title[b-ms4wbg9aiq] {
    margin: 0;
    padding: 16px 20px 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

.gtt-list[b-ms4wbg9aiq] {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gtt-list li[b-ms4wbg9aiq] {
    padding: 14px 16px;
    border-top: 1px solid var(--sis-divider);
}

.gtt-table td[b-ms4wbg9aiq] {
    vertical-align: middle;
}

/* Code, name and section stack in one cell. */
.gtt-code[b-ms4wbg9aiq],
.gtt-name[b-ms4wbg9aiq],
.gtt-section[b-ms4wbg9aiq] {
    display: block;
    overflow-wrap: anywhere;
}

.gtt-code[b-ms4wbg9aiq] {
    font-weight: 600;
}

.gtt-section[b-ms4wbg9aiq] {
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.gtt-table td.gtt-grade[b-ms4wbg9aiq] {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 959.98px) {
    .gtt-title[b-ms4wbg9aiq] {
        padding: 14px 16px 10px;
        font-size: 16px;
    }

    .gtt-table[b-ms4wbg9aiq] {
        display: none;
    }

    .gtt-list[b-ms4wbg9aiq] {
        display: block;
    }
}
/* /Components/Shared/Grade/RegistDataSimTable.razor.rz.scp.css */
/* Desktop: a kit table with the grade picker in the last column. The picker's label is the real <label> but the
   column header already names it, so it is visually hidden here (and shown again in the phone layout below). */
.rds-table .rds-code[b-ct4s9d3h94] {
    white-space: nowrap;
    font-weight: 600;
    text-align: start;
}

.rds-table .rds-name[b-ct4s9d3h94] {
    overflow-wrap: anywhere;
}

.rds-table td.rds-grade[b-ct4s9d3h94] {
    width: 168px;
    padding-block: 8px;
}

/* This hides the field label by overriding the foundation's label rules (sis-forms.css: the
   ".sis-form .mud-input-control > .mud-input-control-input-container:has(> .mud-input-label)" 24px padding-top and the
   "label.mud-input-label.mud-input-label-inputcontrol" absolute box). If those selectors change, revisit this block. */
@media (min-width: 960px) {
    .rds-table td[b-ct4s9d3h94] {
        vertical-align: middle;
    }

    .rds-grade[b-ct4s9d3h94]  .mud-input-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* The foundation reserves 24px above a labelled box for the label; here the label is hidden, so no room. */
    .rds-grade[b-ct4s9d3h94]  .mud-input-control > .mud-input-control-input-container:has(> .mud-input-label) {
        padding-top: 0;
    }
}

/* Phone: every row is a block -- code, name, then "ตอน 01 · หน่วยกิต 3 · Credit", then the labelled picker. The
   header row stays for screen readers, out of sight. */
@media (max-width: 959.98px) {
    .rds-table thead[b-ct4s9d3h94] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .rds-table[b-ct4s9d3h94],
    .rds-table tbody[b-ct4s9d3h94] {
        display: block;
    }

    .rds-table tbody tr[b-ct4s9d3h94] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 16px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sis-divider);
    }

    .rds-table tbody tr:last-child[b-ct4s9d3h94] {
        border-bottom: 0;
    }

    .rds-table tbody td[b-ct4s9d3h94],
    .rds-table tbody th[b-ct4s9d3h94] {
        display: block;
        padding: 0;
        border: 0;
        font-size: 14px;
        text-align: start;
    }

    .rds-table tbody .rds-code[b-ct4s9d3h94],
    .rds-table tbody td.rds-name[b-ct4s9d3h94] {
        flex: 0 0 100%;
        font-size: 15px;
    }

    .rds-table tbody tr:hover td[b-ct4s9d3h94],
    .rds-table tbody tr:hover th[b-ct4s9d3h94] {
        background: none;
    }

    .rds-table tbody td[data-label][b-ct4s9d3h94]::before {
        content: attr(data-label) " ";
        color: var(--sis-text-secondary);
    }

    .rds-table tbody td.rds-grade[b-ct4s9d3h94] {
        flex: 0 0 100%;
        width: auto;
        margin-top: 10px;
    }
}

.rds-table td:nth-child(5)[b-ct4s9d3h94] {
    white-space: nowrap;
}
/* /Components/Shared/Landing/LandingFooter.razor.rz.scp.css */
.ld-footer[b-5hi3d2js75] {
    margin-top: auto;
    background: var(--ld-tint);
    border-top: 1px solid var(--ld-line);
    font-size: 14px;
}

.ld-f-main[b-5hi3d2js75] {
    padding: 36px 20px 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
}

.ld-f-brand[b-5hi3d2js75] { order: 1; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.ld-f-contact[b-5hi3d2js75] { order: 2; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.ld-f-btn[b-5hi3d2js75] { order: 3; grid-column: 1 / -1; margin-top: -18px; }
.ld-f-rule[b-5hi3d2js75] { order: 4; grid-column: 1 / -1; height: 1px; background: var(--ld-line); }
.ld-f-services[b-5hi3d2js75] { order: 5; }
.ld-f-help[b-5hi3d2js75] { order: 6; }

.ld-f-logos[b-5hi3d2js75] { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.ld-f-psu[b-5hi3d2js75] { display: block; height: 44px; width: auto; }

/* the EILA REG mark is a square JPEG with a wide white margin: crop to the artwork, let the white multiply away */
.ld-f-eila[b-5hi3d2js75] { display: block; width: 75px; height: 56px; overflow: hidden; }
.ld-f-eila img[b-5hi3d2js75] { display: block; width: 97px; height: 97px; margin: -20px 0 0 -11px; mix-blend-mode: multiply; }

.ld-f-office[b-5hi3d2js75] { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ld-navy); }

.ld-f-address[b-5hi3d2js75] { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--ld-muted); }
.ld-f-pin[b-5hi3d2js75] { display: flex; padding-top: 2px; color: var(--ld-teal); }

.ld-f-col[b-5hi3d2js75] { display: flex; flex-direction: column; }
.ld-f-col h2[b-5hi3d2js75], .ld-f-contact h2[b-5hi3d2js75] { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--ld-teal); }
.ld-f-contact h2[b-5hi3d2js75] { padding-bottom: 4px; }

.ld-f-col[b-5hi3d2js75]  a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: var(--ld-ink);
    text-decoration: none;
}

.ld-f-col[b-5hi3d2js75]  a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ld-f-row[b-5hi3d2js75] { min-height: 48px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ld-ink); }
.ld-f-row:hover .ld-f-text[b-5hi3d2js75] { text-decoration: underline; text-underline-offset: 3px; }

.ld-f-ico[b-5hi3d2js75] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--ld-line);
    color: var(--ld-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-f-val[b-5hi3d2js75] { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ld-f-key[b-5hi3d2js75] { font-size: 12px; color: var(--ld-muted); }
.ld-f-text[b-5hi3d2js75] { font-size: 15px; font-weight: 600; color: var(--ld-navy); overflow-wrap: anywhere; }

.ld-f-btn[b-5hi3d2js75] {
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    /* ghost: no border, fill or shadow (a tint on hover), so it does not compete with the solid sign-in buttons */
    border: none;
    background: transparent;
    color: var(--ld-navy) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.ld-f-btn svg[b-5hi3d2js75] { transition: transform .15s ease-in-out; }
.ld-f-btn:hover[b-5hi3d2js75] { background: rgba(30, 58, 110, 0.07); }
.ld-f-btn:hover svg[b-5hi3d2js75] { transform: translateX(2px); }
.ld-f-btn:active[b-5hi3d2js75] { transform: scale(.985); }

.ld-f-bar[b-5hi3d2js75] {
    background: var(--ld-navy);
    color: var(--ld-on-navy);
    padding: 18px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
}

.ld-f-copy[b-5hi3d2js75] { order: 2; margin: 0; line-height: 1.6; }
.ld-f-tools[b-5hi3d2js75] { order: 1; display: flex; gap: 8px; }

.ld-f-tools[b-5hi3d2js75]  .ld-f-tool {
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ld-f-tools[b-5hi3d2js75]  .ld-f-tool:hover { background: rgba(255, 255, 255, 0.12); }
.ld-f-bar :focus-visible[b-5hi3d2js75] { outline-color: #FFFFFF; }

@media (min-width: 960px) {
    .ld-f-main[b-5hi3d2js75] {
        padding: 56px var(--ld-pad) 48px;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 14px clamp(24px, 2.8vw, 40px);
    }

    .ld-f-brand[b-5hi3d2js75] { order: 0; grid-column: 1 / span 4; grid-row: 1; gap: 14px; }
    .ld-f-btn[b-5hi3d2js75] { order: 0; grid-column: 1 / span 4; grid-row: 2; margin-top: 0; align-self: start; justify-self: start; }
    .ld-f-services[b-5hi3d2js75] { order: 0; grid-column: 5 / span 2; grid-row: 1 / span 2; gap: 10px; }
    .ld-f-help[b-5hi3d2js75] { order: 0; grid-column: 7 / span 2; grid-row: 1 / span 2; gap: 10px; }
    .ld-f-contact[b-5hi3d2js75] { order: 0; grid-column: 9 / span 4; grid-row: 1 / span 2; align-content: start; gap: 8px; }
    .ld-f-rule[b-5hi3d2js75] { display: none; }

    .ld-f-office[b-5hi3d2js75] { font-size: 18px; }
    .ld-f-col[b-5hi3d2js75]  a { min-height: 0; }

    .ld-f-bar[b-5hi3d2js75] { padding: 16px var(--ld-pad); flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; }
    .ld-f-copy[b-5hi3d2js75] { order: 0; }
    .ld-f-tools[b-5hi3d2js75] { order: 0; flex-shrink: 0; }
    .ld-f-tools[b-5hi3d2js75]  .ld-f-tool { height: 36px; }
}
/* /Components/Shared/Landing/LandingHeader.razor.rz.scp.css */
.ld-header[b-izq1aa11ji] {
    height: 64px;
    box-sizing: border-box;
    padding: 0 var(--ld-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ld-tint);
    border-bottom: 1px solid var(--ld-line);
    /* stays in view while scrolling; the shadow fades in once the page has moved (data-scrolled, set by FrontPage.razor.js) */
    position: sticky;
    top: 0;
    z-index: 5;
    transition: box-shadow .2s ease-in-out;
}

.ld-header[data-scrolled][b-izq1aa11ji] { box-shadow: 0 8px 18px -14px rgba(30, 58, 110, 0.45); }

.ld-brand[b-izq1aa11ji] { display: flex; align-items: center; border-radius: 8px; text-decoration: none; }
.ld-brand img[b-izq1aa11ji] { display: block; height: 24px; width: auto; }

.ld-nav[b-izq1aa11ji] { display: none; }

.ld-actions[b-izq1aa11ji] { display: flex; align-items: center; gap: 12px; }

.ld-actions[b-izq1aa11ji]  .ld-globe {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ld-navy);
}

.ld-actions[b-izq1aa11ji]  .ld-globe { transition: background-color .15s ease-in-out; }
.ld-actions[b-izq1aa11ji]  .ld-globe:hover { background: rgba(30, 58, 110, 0.08); }

.ld-actions[b-izq1aa11ji]  .ld-login { display: none; }

/* Sub-pages: a compact sign-in / home button stays in the phone and tablet header (44px target). */
.ld-header[data-sub] .ld-actions[b-izq1aa11ji]  .ld-login {
    height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--ld-navy);
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    touch-action: manipulation;
}
.ld-header[data-sub] .ld-actions[b-izq1aa11ji]  .ld-login:hover { background: var(--ld-navy-hover); }

@media (min-width: 960px) {
    .ld-header[b-izq1aa11ji] { height: 76px; padding: 0 var(--ld-pad); }
    .ld-brand img[b-izq1aa11ji] { height: 32px; }

    .ld-nav[b-izq1aa11ji] { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); font-size: 15px; font-weight: 500; }
    .ld-nav a[b-izq1aa11ji] { text-decoration: none; }
    .ld-nav a:hover[b-izq1aa11ji] { text-decoration: underline; text-underline-offset: 4px; }
    .ld-nav a[aria-current="page"][b-izq1aa11ji] { font-weight: 700; color: var(--ld-navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

    .ld-actions[b-izq1aa11ji]  .ld-login {
        height: 44px;
        box-sizing: border-box;
        padding: 0 20px;
        border-radius: 12px;
        background: var(--ld-navy);
        color: #FFFFFF !important;
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .15s ease-in-out, transform .15s ease-in-out;
    }

    .ld-actions[b-izq1aa11ji]  .ld-login:hover { background: var(--ld-navy-hover); }
    .ld-actions[b-izq1aa11ji]  .ld-login:active { transform: scale(.985); }
}
/* /Components/Shared/Landing/LandingHero.razor.rz.scp.css */
.ld-hero[b-4h82kc9ls7] {
    /* the falling marks start above their resting place; this is what hides them until they are
       inside the sky. it clips nothing that is meant to show: the marks that hang off the art frame
       (ld-d1 to the left, ld-d3 above it) are still well inside the hero box. */
    overflow: clip;
    background: linear-gradient(180deg, #A9EBF1 0%, #CFF4F7 70%, #E4F9FA 100%);
    padding: 52px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px; /* mobile: more air between the copy, the button and the illustration */
    text-align: center;
}

.ld-hero-copy[b-4h82kc9ls7] { display: contents; }
.ld-hero-text[b-4h82kc9ls7] { display: flex; flex-direction: column; }

.ld-eyebrow[b-4h82kc9ls7] { margin: 0 0 16px; font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ld-hero-muted); }

.ld-hero h1[b-4h82kc9ls7] {
    margin: 0 0 18px;
    font-size: 44px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ld-navy);
}

.ld-lead[b-4h82kc9ls7] { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ld-hero-muted); }

/* the page's main action: centred, capped width, taller and bolder than any other button so it reads first */
.ld-cta-wrap[b-4h82kc9ls7] { align-self: center; width: 100%; max-width: 400px; }

.ld-cta-wrap[b-4h82kc9ls7]  .ld-cta {
    height: 58px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--ld-navy);
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600; /* mobile: the headline stays the only heavy text; desktop goes back to 700 */
    text-decoration: none;
    box-shadow: 0 16px 28px -14px rgba(30, 58, 110, 0.85), 0 2px 6px rgba(30, 58, 110, 0.18);
    transition: background-color .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.ld-cta-wrap[b-4h82kc9ls7]  .ld-cta:hover { background: var(--ld-navy-hover); transform: translateY(-1px); box-shadow: 0 20px 32px -14px rgba(30, 58, 110, 0.9), 0 3px 8px rgba(30, 58, 110, 0.2); }

/* the illustration: the frame is the art's own 1400 x 744 box */
.ld-art[b-4h82kc9ls7] {
    position: relative;
    flex-shrink: 0;
    width: calc(100% + 22px);
    max-width: 372px;
    aspect-ratio: 1400 / 744;
}

.ld-art img[b-4h82kc9ls7] { position: absolute; display: block; height: auto; }
/* the stack, bottom to top: campus, the one mark that sits behind the group, the students, then the
   rest of the marks. the gap at 2 is what lets the calendar tuck in behind the student on the left */
.ld-art-campus[b-4h82kc9ls7] { z-index: 1; }
.ld-art-people[b-4h82kc9ls7] { z-index: 3; }

/* one rule for both layers on purpose: they are exported from the same 1721 x 914 canvas, so a
   shared offset and width keeps the students sitting on the campus exactly as the two were drawn.
   the -3% nudges the pair left together; split them and that alignment is what you give up. the
   campus art carries its own sense of scale -- make the building bigger there, not here. */
.ld-art-campus[b-4h82kc9ls7], .ld-art-people[b-4h82kc9ls7] { top: 0; left: -3%; width: 100%; } /* both layers hold still: only the marks around them move */

/*
 * The decorative marks around the students. Placed and sized in % of the .ld-art frame, so the
 * arrangement holds at every width. Each is square art with its own transparent margin, which is
 * why a width in % reads smaller than it sounds. --w is per mark: they are not all one size.
 *
 * Keyframe names are written out literally and the variants grouped by selector. Blazor's CSS
 * isolation renames every @keyframes in this file and rewrites the names it can see in an
 * `animation` declaration, but it cannot look inside a custom property -- hold the name in a var
 * and it resolves to a keyframe that no longer exists and the mark silently sits still.
 */
.ld-dec[b-4h82kc9ls7] {
    width: var(--w);
    z-index: 4; /* over the students, except .ld-d2 below */
}

/* two drift paths so neighbours never rise and fall together. --r is a resting tilt, repeated in
   every keyframe: leave it out of one and the mark snaps upright halfway through each cycle */
@keyframes ld-dec-float-a-b-4h82kc9ls7 {
    0%, 100% { transform: translateY(0) rotate(var(--r)); }
    50% { transform: translateY(-9px) rotate(calc(var(--r) - 3deg)); }
}

@keyframes ld-dec-float-b-b-4h82kc9ls7 {
    0%, 100% { transform: translateY(-5px) rotate(var(--r)); }
    50% { transform: translateY(6px) rotate(calc(var(--r) + 3deg)); }
}

.ld-d1[b-4h82kc9ls7], .ld-d4[b-4h82kc9ls7] { animation: ld-dec-float-a-b-4h82kc9ls7 var(--d) ease-in-out var(--delay) infinite; }
.ld-d2[b-4h82kc9ls7], .ld-d3[b-4h82kc9ls7] { animation: ld-dec-float-b-b-4h82kc9ls7 var(--d) ease-in-out var(--delay) infinite; }

/*
 * Positions and sizes traced from the design reference: the chart low on the left, the calendar top
 * left, the speech bubble above the middle of the group and the checklist large on the right over
 * the building. They are not one size -- the checklist is deliberately the biggest of the four.
 */
.ld-d1[b-4h82kc9ls7] { --w: 16%; --r: -6deg; --d: 5.8s; --delay: 0s; left: -5%; top: 64%; }
.ld-d2[b-4h82kc9ls7] { --w: 18%; --r: 7deg; --d: 7.1s; --delay: -1.9s; left: -2%; top: -8%; z-index: 2; } /* behind the students */
.ld-d3[b-4h82kc9ls7] { --w: 16%; --r: -4deg; --d: 6.4s; --delay: -3.4s; left: 54%; top: -11%; }
.ld-d4[b-4h82kc9ls7] { --w: 26%; --r: 5deg; --d: 7.8s; --delay: -2.6s; left: 83%; top: 14%; }

/*
 * First-paint entrance: eyebrow -> headline -> lead -> button (60ms apart, 400ms each), then the illustration.
 * Pure CSS with fill-mode "backwards": it needs no script, and the end state is the normal, visible style.
 * Not replayed when the interactive circuit swaps the prerendered DOM (.ld-resumed) and never by a re-render.
 */
.landing:not(.ld-resumed) .ld-eyebrow[b-4h82kc9ls7] { animation: ld-hero-rise-b-4h82kc9ls7 .4s cubic-bezier(.22, .61, .36, 1) backwards; }
.landing:not(.ld-resumed) .ld-hero h1[b-4h82kc9ls7] { animation: ld-hero-rise-b-4h82kc9ls7 .4s cubic-bezier(.22, .61, .36, 1) 60ms backwards; }
.landing:not(.ld-resumed) .ld-lead[b-4h82kc9ls7] { animation: ld-hero-rise-b-4h82kc9ls7 .4s cubic-bezier(.22, .61, .36, 1) 120ms backwards; }
.landing:not(.ld-resumed) .ld-cta-wrap[b-4h82kc9ls7] { animation: ld-hero-rise-b-4h82kc9ls7 .4s cubic-bezier(.22, .61, .36, 1) 180ms backwards; }
.landing:not(.ld-resumed) .ld-art[b-4h82kc9ls7] { animation: ld-hero-art-b-4h82kc9ls7 .45s ease-out 120ms backwards; }

/*
 * The marks fall in from above the hero, one after the other, then carry on with their idle drift.
 *
 * The drop drives `translate`, the drift drives `transform` -- two different properties, so the
 * browser composes them and the mark is already swaying as it comes down. Both have to be listed
 * in this one declaration, because a second `animation` on the same element would replace the
 * first; and the keyframe names are spelled out because Blazor's CSS isolation renames them and
 * cannot follow a name held in a custom property.
 *
 * fill-mode backwards is what makes the stagger work: during its delay each mark already sits at
 * the 0% frame, out of sight above the hero, instead of waiting in place and then jumping up.
 * Nothing clips them on the way down -- .ld-art has no overflow, and the hero above it is sky.
 */
.landing:not(.ld-resumed) .ld-d2[b-4h82kc9ls7] { animation: ld-dec-drop-b-4h82kc9ls7 .9s 350ms backwards, ld-dec-float-b-b-4h82kc9ls7 var(--d) ease-in-out var(--delay) infinite; }
.landing:not(.ld-resumed) .ld-d3[b-4h82kc9ls7] { animation: ld-dec-drop-b-4h82kc9ls7 .9s 520ms backwards, ld-dec-float-b-b-4h82kc9ls7 var(--d) ease-in-out var(--delay) infinite; }
.landing:not(.ld-resumed) .ld-d4[b-4h82kc9ls7] { animation: ld-dec-drop-b-4h82kc9ls7 .9s 690ms backwards, ld-dec-float-a-b-4h82kc9ls7 var(--d) ease-in-out var(--delay) infinite; }
.landing:not(.ld-resumed) .ld-d1[b-4h82kc9ls7] { animation: ld-dec-drop-b-4h82kc9ls7 .9s 860ms backwards, ld-dec-float-a-b-4h82kc9ls7 var(--d) ease-in-out var(--delay) infinite; }

/* gravity on the way down (the easing steepens), then a short dip and settle on landing. the
   per-keyframe timing functions are what give it weight -- one curve for the whole run reads
   like a slide, not a fall. */
@keyframes ld-dec-drop-b-4h82kc9ls7 {
    0% { translate: 0 -220%; opacity: 0; animation-timing-function: cubic-bezier(.5, .02, .78, .28); }
    8% { opacity: 1; }
    58% { translate: 0 5%; animation-timing-function: ease-out; }
    76% { translate: 0 -2.5%; animation-timing-function: ease-in; }
    100% { translate: 0 0; }
}

@keyframes ld-hero-rise-b-4h82kc9ls7 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes ld-hero-art-b-4h82kc9ls7 {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

.ld-cta-wrap[b-4h82kc9ls7]  .ld-cta:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
    /* only the marks move now, so they are the only thing to still: no drop, no drift. they keep the
       tilt they were placed at, they just stop. */
    .landing .ld-dec[b-4h82kc9ls7] { animation: none !important; rotate: var(--r); }
    .ld-cta-wrap[b-4h82kc9ls7]  .ld-cta:hover { transform: none; }
}

@media (min-width: 600px) {
    .ld-art[b-4h82kc9ls7] { max-width: 480px; }
}

@media (min-width: 960px) {
    .ld-hero[b-4h82kc9ls7] {
        flex-direction: row;
        align-items: flex-end;
        gap: 32px;
        padding: 96px var(--ld-pad) 0;
        text-align: left;
    }

    .ld-hero-copy[b-4h82kc9ls7] {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        padding-bottom: 110px;
    }

    .ld-eyebrow[b-4h82kc9ls7] { margin-bottom: 8px; font-size: 18px; font-weight: 500; }
    .ld-hero h1[b-4h82kc9ls7] { margin-top: 24px; margin-bottom: 20px; font-size: clamp(40px, 4.4vw, 58px); line-height: 1.22; }
    .ld-lead[b-4h82kc9ls7] { max-width: 520px; font-size: 18px; line-height: 1.7; }

    .ld-cta-wrap[b-4h82kc9ls7] { align-self: flex-start; width: auto; max-width: none; margin-top: 26px; }
    .ld-cta-wrap[b-4h82kc9ls7]  .ld-cta { display: inline-flex; height: 64px; padding: 0 34px; font-size: 18px; font-weight: 700; }

    /* 48px, not a round number by chance: LandingSearch pulls its band up by exactly 48px over the
       hero and the band has no top padding, so the card's top edge lands here. matching the margin
       to it rests the table at the bottom of the illustration right on that edge. the two numbers
       are a pair -- change -48px there and this has to follow. */
    .ld-art[b-4h82kc9ls7] { width: clamp(420px, 50vw, 720px); max-width: none; margin: 0 0 48px; }

    /* the chart reaches further past the frame on desktop, as the reference has it. below 960px the
       art is narrow enough that the same offset would push it off the left of the screen */
    .ld-d1[b-4h82kc9ls7] { left: -11%; }
}
/* /Components/Shared/Landing/LandingNews.razor.rz.scp.css */
.ld-news[b-g2ssmia05u] { padding: 36px var(--ld-gutter) 0; display: flex; flex-direction: column; gap: 12px; }

/* nothing follows when the CMS has no related systems */
.ld-news:last-child[b-g2ssmia05u] { padding-bottom: 40px; }

.ld-news-head[b-g2ssmia05u] { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ld-news-head h2[b-g2ssmia05u] { margin: 0; font-size: 22px; font-weight: 700; color: var(--ld-navy); }
.ld-news-head p[b-g2ssmia05u] { margin: 2px 0 0; font-size: 13px; color: var(--ld-muted); }

.ld-news-all[b-g2ssmia05u] {
    flex-shrink: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}

/* campus picker: native radios drawn as tabs */
.ld-tabs[b-g2ssmia05u] {
    margin: 0;
    min-width: 0;
    padding: 4px;
    border: 0;
    border-radius: 14px;
    background: var(--ld-tabs-bg);
    display: flex;
    gap: 2px;
    position: relative;
}

/*
 * Sliding active pill. FrontPage.razor.js measures the checked tab into --ld-pill-x / --ld-pill-w and sets data-pill;
 * without it the checked tab paints its own white pill (below), so the tabs work with no script at all.
 */
.ld-tabs[b-g2ssmia05u]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: var(--ld-pill-w, 0px);
    height: calc(100% - 8px);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px -2px rgba(31, 58, 66, 0.25);
    transform: translateX(var(--ld-pill-x, 0px));
    opacity: 0;
    pointer-events: none;
}

.ld-tabs[data-pill][b-g2ssmia05u]::before { opacity: 1; }

.ld-tabs[data-pill-anim][b-g2ssmia05u]::before {
    transition: transform .26s cubic-bezier(.4, 0, .2, 1), width .26s cubic-bezier(.4, 0, .2, 1);
}

.ld-tabs[data-pill] .ld-tab input:checked + span[b-g2ssmia05u] { background: transparent; box-shadow: none; }

.ld-tab[b-g2ssmia05u] { position: relative; display: flex; flex: 1 1 auto; min-width: 0; cursor: pointer; touch-action: manipulation; }

.ld-tab input[b-g2ssmia05u] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.ld-tab span[b-g2ssmia05u] {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: var(--ld-ink);
    font-size: 13px;
    font-weight: 500;
    transition: color .2s ease-in-out;
}

.ld-tab input:checked + span[b-g2ssmia05u] {
    background: #FFFFFF;
    box-shadow: 0 2px 6px -2px rgba(31, 58, 66, 0.25);
    color: var(--ld-navy);
    font-weight: 700;
}

.ld-tab input:focus-visible + span[b-g2ssmia05u] { outline: 3px solid var(--sis-focus-color); outline-offset: 1px; }

/* switching campus: the stage fades out (120ms, keep in step with LandingNews.razor LeaveMs), the new cards fade in (200ms) */
.ld-news-stage[b-g2ssmia05u] { opacity: 1; transition: opacity .2s ease-out; }
.ld-news-stage.is-leaving[b-g2ssmia05u] { opacity: 0; transition-duration: .12s; transition-timing-function: ease-in; }

/* skeleton -> cards: the freshly inserted list fades in */
.ld-news-grid[b-g2ssmia05u] { animation: ld-news-fade-b-g2ssmia05u .22s ease-out; }

@keyframes ld-news-fade-b-g2ssmia05u { from { opacity: 0; } to { opacity: 1; } }

.ld-news-grid[b-g2ssmia05u],
.ld-news-skeleton > div[b-g2ssmia05u] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }

.ld-news-card[b-g2ssmia05u] {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--ld-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
}

@media (hover: hover) {
    .ld-news-card:hover[b-g2ssmia05u] { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(11, 126, 140, 0.55); }
}

.ld-news-card:active[b-g2ssmia05u] { transform: scale(.985); }

.ld-news-date[b-g2ssmia05u] { font-size: 12px; color: var(--ld-muted); }

.ld-news-title[b-g2ssmia05u] {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ld-navy);
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ld-news-title:hover[b-g2ssmia05u] { text-decoration: underline; text-underline-offset: 3px; }

/* the whole card is the link target */
.ld-news-title[b-g2ssmia05u]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ld-news-title:focus-visible[b-g2ssmia05u] { outline: none; }
.ld-news-card:has(.ld-news-title:focus-visible)[b-g2ssmia05u] { outline: 3px solid var(--sis-focus-color); outline-offset: 2px; }

.ld-news-excerpt[b-g2ssmia05u] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ld-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ld-skel[b-g2ssmia05u] { display: block; height: 118px; border-radius: 16px; background: var(--ld-tabs-bg); animation: ld-pulse-b-g2ssmia05u 1.4s ease-in-out infinite; }

@keyframes ld-pulse-b-g2ssmia05u { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    .ld-skel[b-g2ssmia05u] { animation: none; }
}

@media (min-width: 960px) {
    .ld-news[b-g2ssmia05u] { padding: 72px var(--ld-pad) 0; gap: 20px; }
    .ld-news:last-child[b-g2ssmia05u] { padding-bottom: 80px; }

    .ld-news-head h2[b-g2ssmia05u] { font-size: 30px; }
    .ld-news-head p[b-g2ssmia05u] { margin-top: 4px; font-size: 16px; }
    .ld-news-all[b-g2ssmia05u] { min-height: 0; gap: 6px; font-size: 15px; }

    .ld-tabs[b-g2ssmia05u] { align-self: flex-start; }
    .ld-tab[b-g2ssmia05u] { flex: 0 0 auto; }
    .ld-tab span[b-g2ssmia05u] { height: 40px; padding: 0 16px; font-size: 14px; }
    .ld-tab input:checked + span[b-g2ssmia05u] { padding: 0 18px; }

    .ld-news-grid[b-g2ssmia05u],
    .ld-news-skeleton > div[b-g2ssmia05u] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

    .ld-news-card[b-g2ssmia05u] { padding: 22px 22px 20px; border-radius: 20px; gap: 10px; }
    .ld-news-date[b-g2ssmia05u] { font-size: 13px; }
    .ld-news-title[b-g2ssmia05u] { font-size: 17px; }
    .ld-news-excerpt[b-g2ssmia05u] { font-size: 14px; line-height: 1.6; }

    .ld-skel[b-g2ssmia05u] { height: 140px; border-radius: 20px; }
}
/* /Components/Shared/Landing/LandingPageHead.razor.rz.scp.css */
/* Heading band of public sub-pages inside LandingShell (was /contacts' .ct-head). */
.ld-page-head[b-zmd8btp27l] {
    padding: 20px var(--ld-gutter) 24px;
    background: var(--ld-tint);
    border-bottom: 1px solid var(--ld-line);
}

.ld-page-head h1[b-zmd8btp27l] {
    margin: 12px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ld-navy);
    text-wrap: balance;
    overflow-wrap: anywhere;
    scroll-margin-top: 16px;
}

/* On phones the article's own title is the h1 right below: its repeat in the trail would only wrap over two lines. */
@media (max-width: 959.98px) {
    .ld-page-head--article .ld-page-head-crumb li[aria-current="page"][b-zmd8btp27l] { display: none; }
}
/* An article heading keeps the measure of the article card below it (860px). */
.ld-page-head--article h1[b-zmd8btp27l] { max-width: 860px; }
.ld-page-head p[b-zmd8btp27l] { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ld-muted); }

.ld-page-head-actions[b-zmd8btp27l] { margin-top: 12px; }

.ld-page-head-crumb ol[b-zmd8btp27l] { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ld-muted); }
.ld-page-head-crumb li + li[b-zmd8btp27l]::before { content: "/"; margin: 0 8px; color: var(--ld-muted); }
.ld-page-head-crumb li[b-zmd8btp27l] { min-width: 0; overflow-wrap: anywhere; }
.ld-page-head-crumb a[b-zmd8btp27l] { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.ld-page-head-crumb a:hover[b-zmd8btp27l] { color: var(--ld-navy-hover); }
.ld-page-head-crumb a:focus-visible[b-zmd8btp27l] { outline: 3px solid var(--sis-focus-color); outline-offset: 1px; border-radius: 4px; }
.ld-page-head-crumb li[aria-current="page"][b-zmd8btp27l] { font-weight: 600; color: var(--ld-ink); }

@media (min-width: 960px) {
    .ld-page-head[b-zmd8btp27l] { padding: 28px var(--ld-pad) 36px; }
    .ld-page-head h1[b-zmd8btp27l] { font-size: 36px; }
    .ld-page-head p[b-zmd8btp27l] { font-size: 17px; }
}
/* /Components/Shared/Landing/LandingRelated.razor.rz.scp.css */
.ld-related[b-pgc3yntlgd] { padding: 36px var(--ld-gutter) 40px; display: flex; flex-direction: column; gap: 12px; }

.ld-related h2[b-pgc3yntlgd] { margin: 0; font-size: 18px; font-weight: 700; color: var(--ld-navy); }

.ld-related-grid[b-pgc3yntlgd] { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.ld-related-card[b-pgc3yntlgd] {
    box-sizing: border-box;
    min-height: 68px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--ld-line);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ld-ink);
    transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
}

@media (hover: hover) {
    .ld-related-card:hover[b-pgc3yntlgd] { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(11, 126, 140, 0.55); }
}

.ld-related-card:active[b-pgc3yntlgd] { transform: scale(.985); }

.ld-related-logo[b-pgc3yntlgd] { width: 60px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ld-related-logo img[b-pgc3yntlgd] { max-width: 100%; max-height: 100%; object-fit: contain; }

.ld-related-name[b-pgc3yntlgd] { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ld-navy); }
.ld-related-ext[b-pgc3yntlgd] { display: flex; flex-shrink: 0; color: var(--ld-teal); }

@media (min-width: 600px) {
    .ld-related-grid[b-pgc3yntlgd] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .ld-related[b-pgc3yntlgd] { padding: 72px var(--ld-pad) 80px; gap: 16px; }
    .ld-related h2[b-pgc3yntlgd] { font-size: 20px; }
    .ld-related-grid[b-pgc3yntlgd] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

    .ld-related-card[b-pgc3yntlgd] { min-height: 88px; padding: 18px 20px; border-radius: 18px; gap: 16px; }
    .ld-related-logo[b-pgc3yntlgd] { width: 72px; height: 52px; }
    .ld-related-name[b-pgc3yntlgd] { font-size: 15px; }
}
/* /Components/Shared/Landing/LandingSearch.razor.rz.scp.css */
/* carries on from the hero's last colour (#E4F9FA) and fades to the page white, so the card sits on no visible band */
.ld-searchband[b-6m5a7d1c93] {
    padding: 0 var(--ld-gutter);
    background: linear-gradient(180deg, #E4F9FA 0%, #FFFFFF 100%);
}

.ld-searchcard[b-6m5a7d1c93] {
    position: relative;
    z-index: 2;
    padding: 16px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 16px 32px -22px rgba(11, 126, 140, 0.6);
}

/* rises in just after the hero text; skipped when the circuit takes over from the prerender */
.landing:not(.ld-resumed) .ld-searchcard[b-6m5a7d1c93] { animation: ld-search-rise-b-6m5a7d1c93 .42s cubic-bezier(.22, .61, .36, 1) 220ms backwards; }

@keyframes ld-search-rise-b-6m5a7d1c93 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.ld-form[b-6m5a7d1c93] { display: flex; flex-wrap: wrap; gap: 12px 8px; }

.ld-f-q[b-6m5a7d1c93], .ld-f-c[b-6m5a7d1c93], .ld-f-t[b-6m5a7d1c93] { display: flex; flex-direction: column; min-width: 0; }
.ld-f-q[b-6m5a7d1c93] { order: 1; flex: 1 1 calc(100% - 58px); gap: 8px; }
.ld-f-b[b-6m5a7d1c93] { order: 2; }
.ld-f-c[b-6m5a7d1c93] { order: 3; flex: 0 0 calc(50% - 4px); gap: 6px; }
.ld-f-t[b-6m5a7d1c93] { order: 4; flex: 0 0 calc(50% - 4px); gap: 6px; }

.ld-f-q label[b-6m5a7d1c93] { font-size: 15px; font-weight: 700; color: var(--ld-navy); }
.ld-f-label[b-6m5a7d1c93] { font-size: 13px; font-weight: 600; color: var(--ld-hero-muted); }

.ld-f-q input[b-6m5a7d1c93] {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--ld-field-border);
    background: var(--ld-field-bg);
    color: var(--ld-ink);
    font-family: inherit;
    transition: border-color .16s ease-in-out, box-shadow .16s ease-in-out, background-color .16s ease-in-out;
}

.ld-f-q input[b-6m5a7d1c93] { height: 50px; padding: 0 14px; border-radius: 12px; font-size: 16px; }
.ld-f-q input[b-6m5a7d1c93]::placeholder { color: var(--sis-placeholder); opacity: 1; }

/*
 * Campus / semester: the kit's SisSelectField, dressed like the keyword input (landing field border + tint, same
 * hover and focus ring). Its list is the kit popover (z-index 41, opens with a short fade + 4px drop) and the search
 * card does not clip it. Height: the kit's Md 48px here, 52px on the desktop artboard (below).
 */
.ld-f-c[b-6m5a7d1c93]  .ld-select .sis-select-field-box,
.ld-f-t[b-6m5a7d1c93]  .ld-select .sis-select-field-box {
    border-color: var(--ld-field-border);
    background: var(--ld-field-bg);
    color: var(--ld-ink);
    transition: border-color .16s ease-in-out, box-shadow .16s ease-in-out, background-color .16s ease-in-out;
}

@media (hover: hover) {
    .ld-f-c[b-6m5a7d1c93]  .ld-select .sis-select-field-box:hover,
    .ld-f-t[b-6m5a7d1c93]  .ld-select .sis-select-field-box:hover { border-color: #8FC3CB; }
}

.ld-f-c[b-6m5a7d1c93]  .ld-select .sis-select-field-box[aria-expanded="true"],
.ld-f-c[b-6m5a7d1c93]  .ld-select .sis-select-field-box:focus-visible,
.ld-f-t[b-6m5a7d1c93]  .ld-select .sis-select-field-box[aria-expanded="true"],
.ld-f-t[b-6m5a7d1c93]  .ld-select .sis-select-field-box:focus-visible {
    border-color: var(--sis-focus-color);
    box-shadow: 0 0 0 3px rgba(65, 118, 135, 0.35);
}

@media (hover: hover) {
    .ld-f-q input:hover:not(:focus-visible)[b-6m5a7d1c93] { border-color: #8FC3CB; }
}

.ld-f-q input:focus-visible[b-6m5a7d1c93] {
    outline: none;
    border-color: var(--sis-focus-color);
    box-shadow: 0 0 0 3px rgba(65, 118, 135, 0.35);
}

.ld-f-b[b-6m5a7d1c93] {
    align-self: flex-end;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border: 0;
    border-radius: 12px;
    background: var(--ld-teal);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}

.ld-f-b:hover[b-6m5a7d1c93] { background: #096975; }
.ld-f-b:active[b-6m5a7d1c93] { transform: scale(.985); }

/* icon-only on the mobile artboard; the text stays for assistive technology */
.ld-f-b-text[b-6m5a7d1c93] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (min-width: 960px) {
    /* the 48px pulled up over the hero stays transparent: the hero's own gradient shows through behind the card */
    .ld-searchband[b-6m5a7d1c93] { margin-top: -48px; padding: 0 var(--ld-pad); background: linear-gradient(180deg, transparent 0 48px, #E4F9FA 48px, #FFFFFF 100%); }
    .ld-searchcard[b-6m5a7d1c93] { padding: 20px 24px; border-radius: 24px; box-shadow: 0 24px 48px -28px rgba(11, 126, 140, 0.55); }

    .ld-form[b-6m5a7d1c93] { flex-wrap: nowrap; align-items: flex-end; gap: 14px; }
    .ld-f-q[b-6m5a7d1c93] { order: 0; flex: 1 1 0; gap: 6px; }
    .ld-f-c[b-6m5a7d1c93] { order: 0; flex: 0 0 180px; }
    .ld-f-t[b-6m5a7d1c93] { order: 0; flex: 0 0 150px; }
    .ld-f-b[b-6m5a7d1c93] { order: 0; }

    .ld-f-label[b-6m5a7d1c93] { font-size: 14px; }
    .ld-f-q input[b-6m5a7d1c93] { height: 52px; padding: 0 16px; border-radius: 14px; }
    .ld-f-c[b-6m5a7d1c93]  .ld-select[data-size] .sis-select-field-box,
    .ld-f-t[b-6m5a7d1c93]  .ld-select[data-size] .sis-select-field-box { height: 52px; border-radius: 14px; }

    .ld-f-b[b-6m5a7d1c93] { width: auto; height: 52px; padding: 0 28px; border-radius: 14px; }
    .ld-f-b-text[b-6m5a7d1c93] { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
/* /Components/Shared/Landing/LandingServices.razor.rz.scp.css */
.ld-services[b-ftjpkbiky1] { padding: 32px var(--ld-gutter) 8px; display: flex; flex-direction: column; gap: 14px; }

.ld-services h2[b-ftjpkbiky1] { margin: 0; font-size: 22px; font-weight: 700; color: var(--ld-navy); }

.ld-tiles[b-ftjpkbiky1] { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.ld-tile[b-ftjpkbiky1] {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    min-height: 132px;
    padding: 14px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid var(--ld-line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    text-decoration: none;
    color: var(--ld-navy);
    transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
}

@media (hover: hover) {
    .ld-tile:hover[b-ftjpkbiky1] { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(11, 126, 140, 0.55); }
}

.ld-tile:active[b-ftjpkbiky1] { transform: scale(.985); }

.ld-tile img[b-ftjpkbiky1] { width: 52px; height: 44px; object-fit: contain; object-position: left center; }

.ld-tile-text[b-ftjpkbiky1] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-tile-title[b-ftjpkbiky1] { font-size: 15px; font-weight: 700; line-height: 1.35; }
.ld-tile-sub[b-ftjpkbiky1] { font-size: 12px; line-height: 1.45; color: var(--ld-muted); }

.ld-tile-ext[b-ftjpkbiky1] { position: absolute; top: 14px; right: 14px; display: flex; color: var(--ld-teal); }

@media (min-width: 600px) {
    .ld-tiles[b-ftjpkbiky1] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .ld-services[b-ftjpkbiky1] { padding: 72px var(--ld-pad) 0; gap: 24px; }
    .ld-services h2[b-ftjpkbiky1] { font-size: 30px; }

    .ld-tiles[b-ftjpkbiky1] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

    .ld-tile[b-ftjpkbiky1] {
        min-height: 0;
        padding: 22px;
        border-radius: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
    }

    .ld-tile img[b-ftjpkbiky1] { width: 60px; height: 52px; flex-shrink: 0; }
    .ld-tile-text[b-ftjpkbiky1] { flex: 1 1 auto; }
    .ld-tile-title[b-ftjpkbiky1] { font-size: 17px; line-height: normal; }
    .ld-tile-sub[b-ftjpkbiky1] { font-size: 13px; line-height: normal; }
    .ld-tile-ext[b-ftjpkbiky1] { position: static; flex-shrink: 0; }
}

@media (min-width: 1200px) {
    .ld-tiles[b-ftjpkbiky1] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* /Components/Shared/Landing/LandingShell.razor.rz.scp.css */
/* Frame for public pages other than "/": the landing palette and the few base rules the Landing* children rely on (FrontPage.razor.css has the original). */
.landing-shell[b-de1nc38936] {
    --ld-navy: #1E3A6E;
    --ld-navy-hover: #132850;
    --ld-teal: #0B7E8C;
    --ld-tint: #F2FBFC;
    --ld-tint-2: #E4F9FA;
    --ld-line: #D5EEF1;
    --ld-tabs-bg: #EEF5F6;
    --ld-on-navy: #D6E0F2;
    --ld-ink: var(--sis-text-strong);
    --ld-muted: var(--sis-text-subtitle);
    --ld-gutter: 16px;
    --ld-pad: var(--ld-gutter);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
    background: #FFFFFF;
    color: var(--ld-ink);
    font-family: 'Noto Sans Thai', sans-serif;
    line-height: normal;
    letter-spacing: normal;
}

@media (min-width: 600px) {
    .landing-shell[b-de1nc38936] { --ld-gutter: 24px; }
}

@media (min-width: 960px) {
    .landing-shell[b-de1nc38936] {
        --ld-gutter: clamp(40px, 5.6vw, 80px);
        --ld-pad: max(var(--ld-gutter), calc((100% - 1280px) / 2));
    }
}

.landing-shell main[b-de1nc38936] { display: block; flex: 1 0 auto; }
.landing-shell main:focus[b-de1nc38936] { outline: none; }

/* Plain links only: kit components inside the frame (SisButton as an <a>, pagination, link buttons, result rows) draw
   their own colours (the landing hover colour used to outrank `.sis-btn--primary:hover` and turn a primary button's
   label navy on its dark fill). The exclusion sits inside :where() with the `a`, so plain links keep exactly the
   specificity these rules always had: base (0,2,0), hover (0,3,0) with the scope attribute. */
.landing-shell[b-de1nc38936]  :where(a:not([class*="sis-"], .public-subject-row, .subject-row)) { color: var(--ld-navy); }
.landing-shell[b-de1nc38936]  :where(a:not([class*="sis-"], .public-subject-row, .subject-row)):hover { color: var(--ld-navy-hover); }
.landing-shell[b-de1nc38936]  button, .landing-shell[b-de1nc38936]  input, .landing-shell[b-de1nc38936]  select { font-family: inherit; }

.landing-shell[b-de1nc38936]  :focus-visible {
    outline: 3px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.landing-shell[b-de1nc38936]  .ld-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.landing-shell[b-de1nc38936]  .ld-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 10px 16px;
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--ld-navy) !important;
    font-weight: 600;
    transform: translateY(-200%);
}

.landing-shell[b-de1nc38936]  .ld-skip:focus-visible { transform: none; }

.landing-shell :where(a, button)[b-de1nc38936] {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

@media (max-width: 959.98px) {
    .landing-shell[b-de1nc38936]  .ld-wide { display: none; }
}

@media (min-width: 960px) {
    .landing-shell[b-de1nc38936]  .ld-narrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-shell[b-de1nc38936],
    .landing-shell[b-de1nc38936]  *,
    .landing-shell[b-de1nc38936]  *::before,
    .landing-shell[b-de1nc38936]  *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Shared/Landing/LandingSteps.razor.rz.scp.css */
.ld-steps[b-gkzcl26pku] {
    margin: 32px calc(var(--ld-gutter) - 8px) 0;
    padding: 24px 12px 16px;
    border-radius: 24px;
    background: var(--ld-tint);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "list" "actions";
}

.ld-steps-head[b-gkzcl26pku] { grid-area: head; display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.ld-steps-head h2[b-gkzcl26pku] { margin: 0; font-size: 22px; font-weight: 700; color: var(--ld-navy); }
.ld-steps-head p[b-gkzcl26pku] { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ld-muted); }

.ld-steps-list[b-gkzcl26pku] { grid-area: list; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.ld-steps-list li[b-gkzcl26pku] {
    box-sizing: border-box;
    padding: 16px 16px 12px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--ld-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
}

@media (hover: hover) {
    .ld-steps-list li:hover[b-gkzcl26pku] { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(11, 126, 140, 0.5); }
}

.ld-steps-list li:active[b-gkzcl26pku] { transform: scale(.985); }

.ld-step-no[b-gkzcl26pku] { font-size: 13px; font-weight: 700; color: var(--ld-teal); }
.ld-step-title[b-gkzcl26pku] { font-size: 17px; font-weight: 700; color: var(--ld-navy); }
.ld-step-text[b-gkzcl26pku] { font-size: 14px; line-height: 1.6; color: var(--ld-muted); }

.ld-step-link[b-gkzcl26pku] {
    margin-top: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ld-teal) !important;
    text-decoration: none;
}

.ld-step-link:hover[b-gkzcl26pku] { text-decoration: underline; text-underline-offset: 3px; }

.ld-steps-actions[b-gkzcl26pku] { grid-area: actions; display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 0; }



.ld-calendar[b-gkzcl26pku] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; }

@media (min-width: 600px) {
    .ld-steps-list[b-gkzcl26pku] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .ld-steps[b-gkzcl26pku] {
        margin: 72px var(--ld-pad) 0;
        padding: 40px 36px 36px;
        border-radius: 28px;
        gap: 28px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "head actions" "list list";
    }

    .ld-steps-head[b-gkzcl26pku] { gap: 6px; padding: 0 8px; }
    .ld-steps-head h2[b-gkzcl26pku] { font-size: 30px; }
    .ld-steps-head p[b-gkzcl26pku] { font-size: 16px; line-height: normal; }

    .ld-steps-list[b-gkzcl26pku] { gap: 16px; }
    .ld-steps-list li[b-gkzcl26pku] { padding: 20px 22px 22px; border-radius: 20px; gap: 10px; }
    .ld-step-no[b-gkzcl26pku] { font-size: 14px; }
    .ld-step-title[b-gkzcl26pku] { font-size: 19px; }
    .ld-step-text[b-gkzcl26pku] { font-size: 15px; line-height: 1.65; }
    .ld-step-link[b-gkzcl26pku] { min-height: 32px; padding-top: 4px; }

    .ld-steps-actions[b-gkzcl26pku] { flex-direction: row; align-items: center; align-self: end; gap: 16px; padding: 0; }
    .ld-calendar[b-gkzcl26pku] { min-height: 0; font-size: 15px; }
}

@media (min-width: 1200px) {
    .ld-steps-list[b-gkzcl26pku] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* /Components/Shared/Notification/NotificationCard.razor.rz.scp.css */
/* One notification row inside the list card (NotificationCardList). */

.notif-row[b-0yz3gkorgk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sis-divider);
    list-style: none;
    line-height: normal;
    letter-spacing: normal;
}

.notif-row:last-child[b-0yz3gkorgk] {
    border-bottom: none;
}

.notif-row[data-unread][b-0yz3gkorgk] {
    background: var(--sis-surface-subtle);
}

.notif-icon[b-0yz3gkorgk] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sis-radius-sm);
    background: var(--sis-icon-tile-bg);
}

.notif-body[b-0yz3gkorgk] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.notif-message[b-0yz3gkorgk] {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

.notif-row[data-unread] .notif-message[b-0yz3gkorgk] {
    font-weight: 600;
}

.notif-date[b-0yz3gkorgk] {
    margin: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.notif-row[b-0yz3gkorgk]  .notif-new {
    flex-shrink: 0;
}
/* /Components/Shared/Notification/NotificationCardList.razor.rz.scp.css */
.notif-list[b-298x72onrx] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notif-skeleton[b-298x72onrx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/Shared/Payment/OwedFeeList.razor.rz.scp.css */
/* Same anatomy as SisMoneyList/SisMoneyRow (bordered box, 12px 16px rows, 14px, label 400 secondary, amount 600 tabular), plus a small heading. */
.ofl[b-2w0g2s2ozi] {
    border: 1px solid var(--sis-divider-strong);
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface);
    overflow: hidden;
    text-align: left;
}

.ofl-title[b-2w0g2s2ozi] {
    margin: 0;
    padding: 10px 16px;
    background: var(--sis-surface-subtle);
    color: var(--sis-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.ofl-list[b-2w0g2s2ozi] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ofl-row[b-2w0g2s2ozi],
.ofl-total[b-2w0g2s2ozi] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    align-items: baseline;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-top: 1px solid var(--sis-divider);
}

.ofl-name[b-2w0g2s2ozi] {
    min-width: 0;
    color: var(--sis-text-secondary);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.ofl-amount[b-2w0g2s2ozi] {
    color: var(--sis-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.ofl-total[b-2w0g2s2ozi] {
    color: var(--sis-text);
    font-weight: 600;
    border-top-color: var(--sis-divider-strong);
}
/* /Components/Shared/Payment/TermOwedCard.razor.rz.scp.css */
.term-owed-card[b-cmzbyejetc] {
    box-sizing: border-box;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

[data-slot="body"][b-cmzbyejetc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
}

[data-slot="title"][b-cmzbyejetc] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text);
    text-wrap: balance;
    scroll-margin-top: 24px;
}

[data-slot="lines"][b-cmzbyejetc] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-slot="line"][b-cmzbyejetc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

[data-slot="name-col"][b-cmzbyejetc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[data-slot="name"][b-cmzbyejetc] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

[data-slot="code"][b-cmzbyejetc],
[data-slot="caption"][b-cmzbyejetc] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

[data-slot="amount"][b-cmzbyejetc] {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-slot="total"][b-cmzbyejetc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sis-divider-strong);
}

[data-slot="total-label"][b-cmzbyejetc] {
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
}

[data-slot="total-value"][b-cmzbyejetc] {
    font-size: 24px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (min-width: 960px) {
    [data-slot="body"][b-cmzbyejetc] {
        gap: 0;
        padding: 4px 24px 20px;
    }

    [data-slot="title"][b-cmzbyejetc] {
        padding: 18px 0 14px;
        margin-bottom: 6px;
        font-size: 20px;
        font-weight: 500;
        border-bottom: 1px solid var(--sis-divider-strong);
    }

    [data-slot="lines"][b-cmzbyejetc] {
        gap: 0;
    }

    [data-slot="line"][b-cmzbyejetc] {
        padding: 8px 0;
    }

    [data-slot="name"][b-cmzbyejetc] {
        font-size: 15px;
    }

    [data-slot="code"][b-cmzbyejetc],
    [data-slot="caption"][b-cmzbyejetc] {
        font-size: 13px;
    }

    [data-slot="amount"][b-cmzbyejetc] {
        font-size: 17px;
    }

    [data-slot="total"][b-cmzbyejetc] {
        margin-top: 10px;
        padding-top: 16px;
    }

    [data-slot="total-label"][b-cmzbyejetc] {
        font-size: 18px;
    }

    [data-slot="total-value"][b-cmzbyejetc] {
        font-size: 32px;
    }
}
/* /Components/Shared/Payment/TermPaidCharges.razor.rz.scp.css */
.term-paid-charges[b-xsd90rxl6e] {
    box-sizing: border-box;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

[data-slot="body"][b-xsd90rxl6e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
}

[data-slot="title"][b-xsd90rxl6e] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sis-text);
    text-wrap: balance;
    scroll-margin-top: 24px;
}

[data-slot="charges"][b-xsd90rxl6e],
[data-slot="fees"][b-xsd90rxl6e] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

[data-slot="charge"][b-xsd90rxl6e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--sis-divider-strong);
}

[data-slot="charge"]:first-child[b-xsd90rxl6e] {
    padding-top: 0;
    border-top: 0;
}

[data-slot="charge"]:last-child[b-xsd90rxl6e] {
    padding-bottom: 0;
}

[data-slot="fees"][b-xsd90rxl6e] {
    gap: 4px;
}

[data-slot="fee"][b-xsd90rxl6e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[data-slot="check"][b-xsd90rxl6e] {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--sis-success-icon);
}

[data-slot="fee-name-col"][b-xsd90rxl6e] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
}

[data-slot="fee-name"][b-xsd90rxl6e] {
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

[data-slot="fee-code"][b-xsd90rxl6e] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

[data-slot="fee-amount"][b-xsd90rxl6e] {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-slot="meta"][b-xsd90rxl6e],
[data-slot="ref-row"][b-xsd90rxl6e] {
    margin: 0;
    padding-left: 24px;
}

[data-slot="meta"][b-xsd90rxl6e] {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

[data-slot="ref-row"][b-xsd90rxl6e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sis-text-secondary);
}

[data-slot="ref"][b-xsd90rxl6e] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

[data-slot="slip"][b-xsd90rxl6e],
[data-slot="history"][b-xsd90rxl6e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    border-radius: var(--sis-radius-xs);
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-link);
    text-decoration: none;
    touch-action: manipulation;
    transition: color var(--sis-duration) var(--sis-ease);
}

[data-slot="history"][b-xsd90rxl6e] {
    align-self: flex-start;
}

[data-slot="slip"]:hover[b-xsd90rxl6e],
[data-slot="history"]:hover[b-xsd90rxl6e] {
    color: var(--sis-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-slot="slip"]:focus-visible[b-xsd90rxl6e],
[data-slot="history"]:focus-visible[b-xsd90rxl6e] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

[data-slot="total"][b-xsd90rxl6e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sis-divider-strong);
}

[data-slot="total-label"][b-xsd90rxl6e] {
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
}

[data-slot="total-value"][b-xsd90rxl6e] {
    font-size: 20px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-slot="unlisted-amount"][b-xsd90rxl6e] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

[data-slot="unlisted-detail"][b-xsd90rxl6e] {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--sis-text-secondary);
    text-wrap: pretty;
}

@media (min-width: 960px) {
    [data-slot="body"][b-xsd90rxl6e] {
        gap: 0;
        padding: 4px 24px 12px;
    }

    [data-slot="title"][b-xsd90rxl6e] {
        padding: 18px 0 14px;
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 500;
        border-bottom: 1px solid var(--sis-divider-strong);
    }

    [data-slot="fee-name"][b-xsd90rxl6e] {
        font-size: 15px;
    }

    [data-slot="fee-code"][b-xsd90rxl6e] {
        font-size: 13px;
    }

    [data-slot="total"][b-xsd90rxl6e] {
        margin-top: 12px;
        padding: 16px 0 8px;
    }

    [data-slot="total-label"][b-xsd90rxl6e] {
        font-size: 16px;
    }

    [data-slot="total-value"][b-xsd90rxl6e] {
        font-size: 24px;
    }

    [data-slot="unlisted-amount"][b-xsd90rxl6e],
    [data-slot="unlisted-detail"][b-xsd90rxl6e] {
        margin-bottom: 8px;
    }
}
/* /Components/Shared/PaymentUi/WalletHolderLine.razor.rz.scp.css */
.wallet-holder[b-yhi1pr0ydn] {
    display: block;
    overflow-wrap: break-word;
}

.wallet-holder-id[b-yhi1pr0ydn] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Shared/Profile/ActivityResults.razor.rz.scp.css */
.profile-activity[b-ax4vlyd0yt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /Components/Shared/Profile/AdvisorCard.razor.rz.scp.css */
.profile-advisor[b-6rg3wacwpv] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 24px;
    padding: 24px;
    line-height: normal;
    letter-spacing: normal;
}

.profile-advisor [data-slot="who"][b-6rg3wacwpv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.profile-advisor [data-slot="name"][b-6rg3wacwpv] {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sis-text-strong);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.profile-advisor [data-slot="dept"][b-6rg3wacwpv] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.profile-advisor [data-slot="mail"][b-6rg3wacwpv] {
    margin-top: 16px;
}

.profile-advisor [data-slot="notes"][b-6rg3wacwpv] {
    min-width: 0;
}

.profile-advisor [data-slot="notes-title"][b-6rg3wacwpv] {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text-secondary);
}

.profile-advisor [data-slot="note-list"][b-6rg3wacwpv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-advisor [data-slot="note"][b-6rg3wacwpv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface);
}

.profile-advisor [data-slot="note-date"][b-6rg3wacwpv] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.profile-advisor [data-slot="note-text"][b-6rg3wacwpv] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

@media (max-width: 959.98px) {
    .profile-advisor[b-6rg3wacwpv] {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 18px 16px;
    }
}
/* /Components/Shared/Profile/AdvisorTab.razor.rz.scp.css */
.profile-advisors[b-0uiu5s76q8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /Components/Shared/Profile/Dialogs/ActivityDialogAnnounce.razor.rz.scp.css */
.profile-announce[b-5gplvwbc2j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-announce p[b-5gplvwbc2j] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
}
/* /Components/Shared/Profile/Dialogs/BarcodeDialog.razor.rz.scp.css */
.profile-barcode[b-o2b2palyra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* แผ่นขาวเป็น quiet zone ของบาร์โค้ด: เครื่องสแกนต้องการที่ว่างสีอ่อนรอบแท่ง ไม่ว่าธีมรอบข้างจะเป็นสีใด */
.profile-barcode [data-slot="code"][b-o2b2palyra] {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 20px 28px;
    background: #fff;
    border: 1px solid var(--sis-border);
    border-radius: 12px;
}

.profile-barcode img[b-o2b2palyra] {
    display: block;
    width: 100%;
    height: auto;
}

.profile-barcode [data-slot="id"][b-o2b2palyra] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--sis-text);
}
/* /Components/Shared/Profile/ProfileMenuSet.razor.rz.scp.css */
.profile-menu[b-tymb0voii2] {
    line-height: normal;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-menu > li:not(:last-child)[b-tymb0voii2] {
    border-bottom: 1px solid var(--sis-divider);
}

.profile-menu [data-slot="row"][b-tymb0voii2] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--sis-text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease;
}

.profile-menu [data-slot="row"]:hover[b-tymb0voii2] {
    background: var(--sis-surface-hover);
}

.profile-menu [data-slot="row"]:focus-visible[b-tymb0voii2] {
    outline: 2px solid var(--sis-primary);
    outline-offset: -2px;
}

.profile-menu [data-slot="row"][b-tymb0voii2]  > .mud-icon-root {
    flex: none;
    color: var(--sis-icon-tile-fg);
}

.profile-menu [data-slot="row"][b-tymb0voii2]  > .mud-icon-root:last-child {
    color: var(--sis-text-secondary);
}

.profile-menu [data-slot="label"][b-tymb0voii2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 959.98px) {
    .profile-menu [data-only="desktop"][b-tymb0voii2] {
        display: none;
    }
}

@media (min-width: 960px) {
    .profile-menu [data-only="mobile"][b-tymb0voii2] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu [data-slot="row"][b-tymb0voii2] {
        transition: none;
    }
}
/* /Components/Shared/Profile/ProfileResultList.razor.rz.scp.css */
.profile-results[b-7ybhtxxv3i] {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Shared/Profile/ProfileResultRow.razor.rz.scp.css */
.profile-result-row[b-vaxd9ed5r0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.profile-result-row + .profile-result-row[b-vaxd9ed5r0] {
    border-top: 1px solid var(--sis-divider);
}

.profile-result-row [data-slot="topic"][b-vaxd9ed5r0] {
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}
/* /Components/Shared/Profile/ProfileRow.razor.rz.scp.css */
.profile-row[b-gzflwn8bdm] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sis-divider);
}

.profile-row:last-child[b-gzflwn8bdm] {
    border-bottom: 0;
}

.profile-row dt[b-gzflwn8bdm] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.profile-row dd[b-gzflwn8bdm] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.profile-row dd[data-empty][b-gzflwn8bdm] {
    color: var(--sis-text-secondary);
}

@media (max-width: 599.98px) {
    .profile-row[b-gzflwn8bdm] {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 0;
    }
}
/* /Components/Shared/Profile/ProfileRows.razor.rz.scp.css */
.profile-rows[b-s8bezpfjmj] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.profile-rows + .profile-rows[b-s8bezpfjmj] {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--sis-border);
}
/* /Components/Shared/Profile/ProfileSectionEmpty.razor.rz.scp.css */
/* Fills the section panel and centres the state. Inside a details panel (already a card) and in a dialog the
   StateMessage card is flattened; on a standalone page it keeps its own card. */
.profile-section-empty[b-marhgg6ry0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.profile-section-empty[b-marhgg6ry0]  .state-message {
    width: 100%;
    max-width: 440px;
}

.profile-section-empty--panel[b-marhgg6ry0]  .state-message,
.profile-section-empty--compact[b-marhgg6ry0]  .state-message {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.profile-section-empty--panel[b-marhgg6ry0] {
    padding: 24px 0;
}

.profile-section-empty--compact[b-marhgg6ry0] {
    min-height: 0;
    padding: 16px 0;
}

@media (max-width: 959.98px) {
    .profile-section-empty[b-marhgg6ry0] {
        min-height: 240px;
    }

    .profile-section-empty--panel[b-marhgg6ry0] {
        padding: 16px 0;
    }

    .profile-section-empty--compact[b-marhgg6ry0] {
        min-height: 0;
    }
}
/* /Components/Shared/Profile/ProfileSections.razor.rz.scp.css */
.profile-sections[b-wi34o431lk] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    line-height: normal;
    letter-spacing: normal;
}

.profile-sections > [data-slot="nav"][b-wi34o431lk] {
    padding: 12px;
    border-right: 1px solid var(--sis-divider);
    align-self: stretch;
    min-width: 0;
}

/* Desktop shows the list; the picker is for under 960px only. */
.profile-sections[b-wi34o431lk]  .profile-sections-select {
    display: none;
}

.profile-sections [data-slot="list"][b-wi34o431lk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-sections [data-slot="item"][b-wi34o431lk] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--sis-radius-sm);
    background: transparent;
    color: var(--sis-text-body);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    overflow-wrap: anywhere;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.profile-sections [data-slot="item"]:hover[b-wi34o431lk] {
    background: var(--sis-surface-hover);
    color: var(--sis-text);
}

.profile-sections [data-slot="item"][aria-selected="true"][b-wi34o431lk] {
    background: color-mix(in srgb, var(--sis-primary) 9%, var(--sis-surface-selected));
    color: var(--sis-primary);
    font-weight: 600;
}

.profile-sections [data-slot="item"][aria-selected="true"]:hover[b-wi34o431lk] {
    background: color-mix(in srgb, var(--sis-primary) 14%, var(--sis-surface-selected));
}

.profile-sections [data-slot="item"]:focus-visible[b-wi34o431lk] {
    outline: 2px solid var(--sis-primary);
    outline-offset: 2px;
}

.profile-sections > [data-slot="content"][b-wi34o431lk] {
    min-width: 0;
    padding: 12px 32px 24px;
}

@media (max-width: 959.98px) {
    .profile-sections[b-wi34o431lk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-sections > [data-slot="nav"][b-wi34o431lk] {
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--sis-divider);
    }

    .profile-sections [data-slot="list"][b-wi34o431lk] {
        display: none;
    }

    .profile-sections[b-wi34o431lk]  .profile-sections-select {
        display: flex;
    }

    .profile-sections > [data-slot="content"][b-wi34o431lk] {
        padding: 8px 16px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-sections [data-slot="item"][b-wi34o431lk] {
        transition: none;
    }
}

/* Save / cancel row of the edit forms (EditForm/*): Ghost cancel, the one Primary save, right-aligned. */
.profile-sections[b-wi34o431lk]  .profile-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sis-divider);
}

@media (max-width: 599.98px) {
    .profile-sections[b-wi34o431lk]  .profile-form-actions {
        flex-direction: column-reverse;
    }

    .profile-sections[b-wi34o431lk]  .profile-form-actions > * {
        width: 100%;
    }
}
/* /Components/Shared/Profile/ProfileStatus.razor.rz.scp.css */
.profile-status[b-1luvtrueel] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    line-height: normal;
    letter-spacing: normal;
}

.profile-status [data-slot="label"][b-1luvtrueel] {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}
/* /Components/Shared/Profile/StudentInfoDetail.razor.rz.scp.css */
.profile-info[b-vbsb141shh] {
    padding: 4px 20px;
    line-height: normal;
    letter-spacing: normal;
}
/* /Components/Shared/Search/Dialogs/FilterSheet.razor.rz.scp.css */
/* Mobile filter sheet body: overview rows, or a back button + heading above a SisOptionList. */
.filter-sheet-body[b-9afeg27m8j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overscroll-behavior: contain;
}

.filter-sheet-rows[b-9afeg27m8j] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.filter-sheet-rows li + li[b-9afeg27m8j] {
    border-top: 1px solid var(--sis-border);
}

.filter-sheet-row[b-9afeg27m8j] {
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: var(--sis-radius-sm);
    background: transparent;
    color: var(--sis-text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.filter-sheet-row:hover:not(:disabled)[b-9afeg27m8j] { background: var(--sis-surface-hover); }
.filter-sheet-row:focus-visible[b-9afeg27m8j] { outline: 2px solid var(--sis-focus-color); outline-offset: -2px; }

.filter-sheet-row:disabled[b-9afeg27m8j] {
    color: var(--sis-text-muted);
    cursor: not-allowed;
}

.filter-sheet-row-label[b-9afeg27m8j] {
    flex: 0 0 auto;
    font-weight: 600;
}

.filter-sheet-row-value[b-9afeg27m8j] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.filter-sheet-row:disabled .filter-sheet-row-value[b-9afeg27m8j] { color: var(--sis-text-muted); }

.filter-sheet-row [data-slot="row-chevron"][b-9afeg27m8j] {
    flex-shrink: 0;
    color: var(--sis-icon-muted);
}

.filter-sheet-head[b-9afeg27m8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filter-sheet-back[b-9afeg27m8j] {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: var(--sis-radius-sm);
    background: transparent;
    color: var(--sis-link);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.filter-sheet-back:hover[b-9afeg27m8j] { background: var(--sis-surface-hover); }
.filter-sheet-back:focus-visible[b-9afeg27m8j] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

.filter-sheet-heading[b-9afeg27m8j] {
    margin: 0;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
    .filter-sheet-row[b-9afeg27m8j],
    .filter-sheet-back[b-9afeg27m8j] {
        transition: none;
    }
}
/* /Components/Shared/Search/SearchBoxForm.razor.rz.scp.css */
/* Search box: SisSearchField + filter chips (desktop popovers, mobile sheet) (Search_v2 / SearchMobile_v2). */
.search-box[b-wxzg33gfts] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: normal;
    letter-spacing: normal;
}

.search-box-row[b-wxzg33gfts] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box-row[b-wxzg33gfts]  .search-box-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* Opens the filter sheet; below 960px only (desktop chips open their own popovers). */
.search-box-filter-toggle[b-wxzg33gfts] {
    position: relative;
    flex: 0 0 auto;
    display: none;
}

.search-box-filter-toggle[b-wxzg33gfts]  .sis-icon-btn {
    background: var(--sis-surface);
    border-color: var(--sis-border-field);
}

.search-box-filter-count[b-wxzg33gfts] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--sis-radius-pill);
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.search-box-chips[b-wxzg33gfts] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search-box-chips-label[b-wxzg33gfts] {
    font-size: 13px;
    color: var(--sis-text-secondary);
}

/* Semester picker (search without an enroll term): leads the search row at a fixed width, same height as the
   search box; on a phone it takes its own full-width line above the query. */
.search-box-term[b-wxzg33gfts] {
    flex: 0 0 260px;
    min-width: 0;
}

.search-box-term[b-wxzg33gfts]  .search-box-term-field {
    width: 100%;
}

@media (max-width: 959.98px) {
    .search-box[b-wxzg33gfts] {
        gap: 12px;
    }

    .search-box-filter-toggle[b-wxzg33gfts] {
        display: inline-flex;
    }

    .search-box-chips[b-wxzg33gfts] {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        scrollbar-width: none;
    }

    .search-box-chips[b-wxzg33gfts]  .sis-filter-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .search-box-chips-label[b-wxzg33gfts],
    .search-box-chips[b-wxzg33gfts]  .search-box-clear,
    .search-box-chips[b-wxzg33gfts]  .sis-filter-chip[disabled] {
        display: none;
    }

    .search-box-row[b-wxzg33gfts] {
        flex-wrap: wrap;
    }

    .search-box-term[b-wxzg33gfts] {
        flex: 1 0 100%;
    }
}
/* /Components/Shared/SisKit/SisAlert.razor.rz.scp.css */
/* Each tone sets --_bg/--_fg/--_border/--_accent; the shared rule below turns them into a soft gradient surface
   and a tinted icon tile (--_accent tints the tile). */
.sis-alert[b-hlrzlu8zqq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--sis-radius-lg);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: normal;
    box-sizing: border-box;
    background: linear-gradient(100deg, var(--_bg), color-mix(in srgb, var(--_bg) 55%, white));
    color: var(--_fg);
    border: 1px solid var(--_border);
    box-shadow: var(--sis-shadow-raised);
    /* Entrance: fade + slight slide-down; ease-in-out is explicit (--sis-ease is ease-out shaped). */
    animation: sis-alert-in-b-hlrzlu8zqq 300ms ease-in-out both;
}

@keyframes sis-alert-in-b-hlrzlu8zqq {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-alert[b-hlrzlu8zqq] {
        animation: none;
    }
}

.sis-alert--danger[b-hlrzlu8zqq] {
    --_bg: var(--sis-danger-bg);
    --_fg: var(--sis-danger-fg);
    --_border: var(--sis-danger-border);
    --_accent: var(--sis-danger);
}

.sis-alert--warning[b-hlrzlu8zqq] {
    --_bg: var(--sis-warning-bg);
    --_fg: var(--sis-warning-fg);
    --_border: var(--sis-warning-box-border);
    --_accent: color-mix(in srgb, var(--sis-warning-fg) 55%, var(--sis-warning-bg));
}

.sis-alert--info[b-hlrzlu8zqq] {
    --_bg: var(--sis-info-bg);
    --_fg: var(--sis-info-fg);
    /* No info border token exists; reuses --sis-callout-border since no board draws a bordered info alert. */
    --_border: var(--sis-callout-border);
    --_accent: var(--sis-result-icon-info-fg);
}

.sis-alert--success[b-hlrzlu8zqq] {
    /* TOKEN-REQUEST: --sis-success-border #BFE1CC (no success border token exists) */
    --sis-alert-success-border: #BFE1CC;
    --_bg: var(--sis-success-bg);
    --_fg: var(--sis-success-fg);
    --_border: var(--sis-alert-success-border);
    --_accent: var(--sis-success-icon);
}

/* 28px rounded tile: the 18px glyph sits centred on a stronger tint of the tone colour. */
[data-slot="icon"][b-hlrzlu8zqq] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--sis-radius-xs);
    background: color-mix(in srgb, var(--_accent) 22%, white);
    color: var(--_fg);
}

[data-slot="icon"][b-hlrzlu8zqq]  svg {
    display: block;
}

[data-slot="content"][b-hlrzlu8zqq] {
    min-width: 0;
    padding-top: 3px; /* centres one 22px text line against the 28px icon tile */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-slot="title"][b-hlrzlu8zqq] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

[data-slot="body"][b-hlrzlu8zqq] {
    min-width: 0;
}
/* /Components/Shared/SisKit/SisBackLink.razor.rz.scp.css */
.sis-back-link[b-hl9kc2lohg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    /* MudBlazor sets body { line-height: 1.43; letter-spacing: .01071em }; the board sets neither on this link
       (browser defaults), so reset both here rather than guess a value. */
    line-height: normal;
    letter-spacing: normal;
    color: var(--sis-link);
    text-decoration: none;
    touch-action: manipulation;
    transition: color var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease);
}

.sis-back-link:hover[b-hl9kc2lohg] {
    color: var(--sis-primary-hover);
    text-decoration: underline;
}

.sis-back-link:active[b-hl9kc2lohg] {
    transform: translateY(1px);
}

.sis-back-link:focus-visible[b-hl9kc2lohg] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-back-link [data-slot="icon"][b-hl9kc2lohg] {
    flex-shrink: 0;
}

.sis-back-link [data-slot="label"][b-hl9kc2lohg] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 959.98px) {
    /* No board shows this link under 960px; widen the hit area to CLAUDE.md's 44px minimum without shifting the
       visible text (negative margin cancels the padding it adds). */
    .sis-back-link[b-hl9kc2lohg] {
        min-height: 44px;
        padding: 0 6px;
        margin: 0 -6px;
    }

    .sis-back-link [data-slot="label"][b-hl9kc2lohg] {
        white-space: normal;
    }
}
/* /Components/Shared/SisKit/SisButton.razor.rz.scp.css */
.sis-btn[b-owtwy3sj09] {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    border-radius: var(--sis-radius-md);
    border: 1.5px solid transparent;
    background: transparent;
    font-family: inherit;
    line-height: normal;
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sis-duration) var(--sis-ease),
                border-color var(--sis-duration) var(--sis-ease),
                color var(--sis-duration) var(--sis-ease),
                box-shadow var(--sis-duration) var(--sis-ease),
                transform var(--sis-duration) var(--sis-ease);
}

.sis-btn:active[b-owtwy3sj09] {
    transform: translateY(1px);
}

.sis-btn--block[b-owtwy3sj09] {
    display: flex;
    width: 100%;
}

/* Sizes: height, inline padding, label type scale (Secondary overrides its own type scale below). Xs also
   steps the radius down to --sis-radius-sm on every variant (DetailActions/CartMobile Xs refs all use 10, not
   the default 12). */
.sis-btn--lg[b-owtwy3sj09] { height: 52px; padding: 0 20px; font-size: 16px; font-weight: 700; }
.sis-btn--md[b-owtwy3sj09] { height: 48px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.sis-btn--sm[b-owtwy3sj09] { height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.sis-btn--xs[b-owtwy3sj09] { height: 40px; padding: 0 14px; font-size: 14px; font-weight: 600; border-radius: var(--sis-radius-sm); }

/* A Subtext CTA has the same height regardless of Size, so Primary and Secondary side by side stay equal.
   Was 56 per the board, but Thai needs ~1.5 line-height (upper vowels/tone marks), which does not fit two lines
   in 56 — 60 leaves room without letting the glyph tops clip. */
.sis-btn--has-subtext[b-owtwy3sj09] { height: 60px; }

/* Primary */
.sis-btn--primary[b-owtwy3sj09] {
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
    box-shadow: var(--sis-primary-shadow);
}
/* No shadow at Xs (DetailActions_v2 "เพิ่มวิชาต่อ" — a plain fill, no elevation, at that compact size). */
.sis-btn--primary.sis-btn--xs[b-owtwy3sj09] { box-shadow: none; }
@media (hover: hover) {
    .sis-btn--primary:hover[b-owtwy3sj09] { background: var(--sis-primary-hover); }
}
.sis-btn--primary:active[b-owtwy3sj09] { background: var(--sis-primary-active); }
.sis-btn--primary:focus-visible[b-owtwy3sj09] {
    outline: 2px solid var(--sis-primary);
    outline-offset: 2px;
    box-shadow: var(--sis-primary-shadow), 0 0 0 2px var(--sis-surface);
}
.sis-btn--primary.sis-btn--xs:focus-visible[b-owtwy3sj09] {
    box-shadow: 0 0 0 2px var(--sis-surface);
}

/* Secondary — own type scale and padding at every size except Xs (board ref for those is Main "เพิ่มวิชา",
   15/600, padding 0 18px). Xs has its own board ref (CartMobile "เพิ่มวิชา"): 14/600, padding 0 12px, gap 6. */
.sis-btn--secondary[b-owtwy3sj09] {
    border-color: var(--sis-primary);
    background: var(--sis-surface);
    color: var(--sis-primary);
}
.sis-btn--secondary:not(.sis-btn--xs)[b-owtwy3sj09] {
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
}
.sis-btn--secondary.sis-btn--xs[b-owtwy3sj09] {
    padding: 0 12px;
    gap: 6px;
}
@media (hover: hover) {
    .sis-btn--secondary:hover[b-owtwy3sj09] { background: var(--sis-surface-hover); }
}
.sis-btn--secondary:active[b-owtwy3sj09] { background: var(--sis-surface-selected); }
.sis-btn--secondary:focus-visible[b-owtwy3sj09] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }
/* Secondary's Subtext (DetailActions "เพิ่มลงตะกร้า"): the board softens the second line to weight 400 in the
   muted label color instead of the Primary/Accent subtext's inherited white at weight 500. */
.sis-btn--secondary .sis-btn-subtext[b-owtwy3sj09] {
    font-weight: 400;
    color: var(--sis-text-label);
}

/* Quiet — border 1px (not the base 1.5px) on every board ref (CartFailed/CartResultStates/DetailActions). */
.sis-btn--quiet[b-owtwy3sj09] {
    border-width: 1px;
    border-color: var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-primary);
}
@media (hover: hover) {
    .sis-btn--quiet:hover[b-owtwy3sj09] { background: var(--sis-surface-hover); }
}
.sis-btn--quiet:active[b-owtwy3sj09] { background: var(--sis-surface-selected); }
.sis-btn--quiet:focus-visible[b-owtwy3sj09] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

/* Danger */
.sis-btn--danger[b-owtwy3sj09] {
    background: var(--sis-danger);
    color: var(--sis-text-on-dark);
}
@media (hover: hover) {
    .sis-btn--danger:hover[b-owtwy3sj09] { background: var(--sis-danger-hover); }
}
.sis-btn--danger:active[b-owtwy3sj09] { background: var(--sis-danger-active); }
.sis-btn--danger:focus-visible[b-owtwy3sj09] {
    outline: 2px solid var(--sis-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sis-surface);
}

/* Dashed — fixed --sis-radius-sm and padding 0 14px at every size (only Sm board evidence: Main "+ เพิ่มวิชาอื่น"
   uses 14px padding, not the Sm step's own 16px). */
.sis-btn--dashed[b-owtwy3sj09] {
    border: 1px dashed var(--sis-border-dashed);
    background: transparent;
    color: var(--sis-primary);
    border-radius: var(--sis-radius-sm);
    padding: 0 14px;
}
@media (hover: hover) {
    .sis-btn--dashed:hover[b-owtwy3sj09] { background: var(--sis-surface-hover); }
}
.sis-btn--dashed:active[b-owtwy3sj09] { background: var(--sis-surface-selected); }
.sis-btn--dashed:focus-visible[b-owtwy3sj09] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

/* Ghost — DetailDialog "ยกเลิก": no fill, no border, secondary-ink text, padding 0 16px (not the Xs step's
   own 14px). Fits the Xs type scale (14/600) and height (40) exactly, so those need no override. */
.sis-btn--ghost[b-owtwy3sj09] {
    background: transparent;
    color: var(--sis-text-secondary);
    padding: 0 16px;
}
@media (hover: hover) {
    .sis-btn--ghost:hover[b-owtwy3sj09] { background: var(--sis-surface-hover); }
}
.sis-btn--ghost:active[b-owtwy3sj09] { background: var(--sis-surface-selected); }
.sis-btn--ghost:focus-visible[b-owtwy3sj09] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

/* Pixel-match overrides — the board is not border-box everywhere (see doc comment above): a board <a> with a
   border renders taller than its own stated "height" by 2x the border width, since Chromium's UA stylesheet
   only defaults <button>/<input> to border-box, not <a>. Measured against each board element's own
   getBoundingClientRect at the desktop (1280px) boards, so scoped to desktop; an un-measured mobile board could
   want different numbers and shouldn't silently inherit these. Danger has no border but was simply drawn 2px
   under the shared Lg step. */
@media (min-width: 960px) {
    .sis-btn--secondary.sis-btn--sm[b-owtwy3sj09] { height: 46px; }
    .sis-btn--quiet.sis-btn--sm[b-owtwy3sj09] { height: 46px; }
    .sis-btn--quiet.sis-btn--xs[b-owtwy3sj09] { height: 42px; }
    .sis-btn--dashed.sis-btn--sm[b-owtwy3sj09] { height: 46px; }
    .sis-btn--danger.sis-btn--lg[b-owtwy3sj09] { height: 50px; }
}

/* Disabled — same look on every variant (spec §4 states), overrides fill/border/shadow. A dedicated class (not
   [aria-disabled], which an anchor also carries while merely Busy) so a Busy-only anchor keeps its variant's
   normal fill instead of looking disabled/dead; see Busy below. The C# click guard (not pointer-events) blocks
   clicks, so the spec's cursor: not-allowed still paints on hover. */
.sis-btn:disabled[b-owtwy3sj09],
.sis-btn--disabled[b-owtwy3sj09] {
    background: var(--sis-surface);
    color: var(--sis-text-disabled);
    border-color: var(--sis-border);
    box-shadow: none;
    cursor: not-allowed;
}
.sis-btn:disabled:active[b-owtwy3sj09],
.sis-btn--disabled:active[b-owtwy3sj09] {
    transform: none;
}

/* Busy — keep the button's width and its accessible name; fade the label/icons with opacity (not visibility or
   display, either of which would drop the label from the accessibility tree) so layout doesn't move. */
.sis-btn--busy .sis-btn-label[b-owtwy3sj09],
.sis-btn--busy .sis-btn-icon[b-owtwy3sj09] {
    opacity: 0;
}
.sis-btn-spinner[b-owtwy3sj09] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sis-btn-spinner svg[b-owtwy3sj09] {
    animation: sis-btn-spin-b-owtwy3sj09 0.8s linear infinite;
}
@keyframes sis-btn-spin-b-owtwy3sj09 {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sis-btn-spinner svg[b-owtwy3sj09] { animation-duration: 1.6s; }
}

.sis-btn-label[b-owtwy3sj09] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
/* Thai upper vowels/tone marks (ี ้ ั) rise above the Latin ascender, so a tight line-height (the board's 1.25)
   together with the overflow:hidden on the text spans (needed for ellipsis) shaves the top of the glyphs off.
   Both lines get a Thai-safe line-height; the single-line label also gets an explicit 1.5 instead of
   `normal` (font-dependent, tight on fallback fonts) — 14-16px x 1.5 still fits every size's height. */
.sis-btn--has-subtext .sis-btn-label[b-owtwy3sj09] {
    line-height: 1.5;
}
.sis-btn-text[b-owtwy3sj09] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.sis-btn-subtext[b-owtwy3sj09] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.5;
    font-size: 12px;
    font-weight: 500;
}
.sis-btn-icon[b-owtwy3sj09] {
    display: inline-flex;
    flex-shrink: 0;
}
.sis-btn-icon[b-owtwy3sj09]  svg {
    display: block;
}

@media (max-width: 959.98px) {
    .sis-btn--xs[b-owtwy3sj09] {
        height: 44px;
    }
}
/* /Components/Shared/SisKit/SisCallout.razor.rz.scp.css */
.sis-callout[b-uleef5b718] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    line-height: normal;
    letter-spacing: normal;
    border-radius: var(--sis-radius-lg);
    background: var(--sis-callout-bg);
    border: 1px solid var(--sis-callout-border);
    box-sizing: border-box;
}

[data-slot="icon"][b-uleef5b718] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--sis-radius-sm);
    background: var(--sis-surface);
    color: var(--sis-callout-fg);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-slot="icon"][b-uleef5b718]  svg {
    display: block;
}

[data-slot="content"][b-uleef5b718] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-slot="title"][b-uleef5b718] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-callout-fg);
}

[data-slot="body"][b-uleef5b718] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    /* --sis-callout-body (endorsed, Detail_v2 coreq callout body copy #24506F, distinct from --sis-callout-fg
       #1B4A73 used for the title/action) is being added to sis-tokens.css at merge; fallback keeps this correct
       until then. */
    color: var(--sis-callout-body);
}

[data-slot="action"][b-uleef5b718] {
    flex-shrink: 0;
}

[data-slot="action"][b-uleef5b718]  :is(a, button) {
    /* Board content-box height is 36px plus a 1px border on each side; border-box needs 38px to render the
       same total 36+2 pixels tall. */
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-callout-border);
    color: var(--sis-callout-fg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

[data-slot="action"][b-uleef5b718]  :is(a, button):hover {
    background: var(--sis-surface-hover);
}

[data-slot="action"][b-uleef5b718]  :is(a, button):active {
    transform: translateY(1px);
}

[data-slot="action"][b-uleef5b718]  :is(a, button):focus-visible {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

@media (max-width: 959.98px) {
    .sis-callout[b-uleef5b718] {
        flex-direction: column;
        gap: 6px;
        padding: 14px;
    }

    [data-slot="icon"][b-uleef5b718] {
        display: none;
    }

    [data-slot="content"][b-uleef5b718] {
        gap: 6px;
    }

    [data-slot="title"][b-uleef5b718] {
        font-size: 14px;
    }

    [data-slot="body"][b-uleef5b718] {
        font-size: 13px;
        line-height: 1.7;
    }

    /* Plain underlined link, no box. The 44px touch target is added as padding-block with an equal negative
       margin-block so it doesn't push surrounding content around (board draws the link flush under the body
       text) -- a deviation from the board's own un-padded <a>, kept for the CLAUDE.md 44px touch-target rule. */
    [data-slot="action"][b-uleef5b718]  :is(a, button) {
        height: auto;
        border: none;
        background: none;
        border-radius: 0;
        padding: 12px 0;
        margin: -12px 0;
        font-size: 13px;
        text-decoration: underline;
    }
}
/* /Components/Shared/SisKit/SisCard.razor.rz.scp.css */
.sis-card[b-gqa4f3t5d4] {
    box-sizing: border-box;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.sis-card[data-radius="lg"][b-gqa4f3t5d4] {
    border-radius: var(--sis-radius-lg);
}

.sis-card[data-radius="xl"][b-gqa4f3t5d4] {
    border-radius: var(--sis-radius-xl);
}

.sis-card[data-shadow="card"][b-gqa4f3t5d4] {
    box-shadow: var(--sis-shadow-card);
}

.sis-card[data-shadow="aside"][b-gqa4f3t5d4] {
    box-shadow: var(--sis-shadow-aside);
}

.sis-card[data-padding="md"][b-gqa4f3t5d4] {
    padding: 20px;
}

.sis-card[data-padding="lg"][b-gqa4f3t5d4] {
    padding: 22px;
}

.sis-card[data-clip="true"][b-gqa4f3t5d4] {
    overflow: hidden;
}
/* /Components/Shared/SisKit/SisCartStrip.razor.rz.scp.css */
.sis-cart-strip[b-l3af5dy8bs] {
    /* TOKEN-REQUEST: sis-radius-chip 9px — the desktop "ไปที่ตะกร้า" chip's radius; no existing radius token is 9px. */
    --sis-cart-strip-chip-radius: var(--sis-radius-compact);

    /* MudBlazor sets body { line-height: 1.43; letter-spacing: .01071em }; the boards use browser defaults except
       the summary block's own line-height: 1.3 below. Reset both here so text metrics match the boards. */
    line-height: normal;
    letter-spacing: normal;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 8px 0 14px;
    border-radius: var(--sis-radius-md);
    border: 1px solid var(--sis-border);
    background: var(--sis-surface);
    color: var(--sis-text);
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

.sis-cart-strip:hover [data-slot="cta"][b-l3af5dy8bs] {
    background: var(--sis-surface-hover);
}

.sis-cart-strip:hover[b-l3af5dy8bs] {
    background: var(--sis-surface-hover);
    border-color: var(--sis-border-control);
}

.sis-cart-strip:active[b-l3af5dy8bs] {
    transform: translateY(1px);
}

.sis-cart-strip:focus-visible[b-l3af5dy8bs] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-cart-strip [data-slot="icon"][b-l3af5dy8bs] {
    flex-shrink: 0;
}

.sis-cart-strip [data-slot="summary"][b-l3af5dy8bs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.sis-cart-strip [data-slot="summary-label"][b-l3af5dy8bs] {
    font-size: 12px;
    letter-spacing: normal;
    color: var(--sis-text-secondary);
    white-space: nowrap;
}

.sis-cart-strip [data-slot="summary-value"][b-l3af5dy8bs] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sis-cart-strip [data-slot="cta"][b-l3af5dy8bs] {
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--sis-cart-strip-chip-radius);
    /* Secondary look (outlined, primary ink) — the strip is a wayfinding link, so it must not compete with the
       page's own Primary actions. */
    border: 1px solid var(--sis-primary);
    background: var(--sis-surface);
    color: var(--sis-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.sis-cart-strip [data-slot="badge"][b-l3af5dy8bs] {
    display: none;
}

@media (max-width: 959.98px) {
    .sis-cart-strip[b-l3af5dy8bs] {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: var(--sis-radius-sm);
        border: 0;
        background: transparent;
    }

    .sis-cart-strip:hover[b-l3af5dy8bs] {
        background: var(--sis-surface-hover);
    }

    .sis-cart-strip [data-slot="summary"][b-l3af5dy8bs],
    .sis-cart-strip [data-slot="cta"][b-l3af5dy8bs] {
        display: none;
    }

    /* SearchMobile_v2's header cart icon is 18px (DetailMobile_v2's is 22px; the plan points at SearchMobile_v2
       for this compact treatment). */
    .sis-cart-strip [data-slot="icon"][b-l3af5dy8bs] {
        width: 18px;
        height: 18px;
    }

    .sis-cart-strip [data-slot="badge"][b-l3af5dy8bs] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        /* +1px each vs. the desktop badge: removing the (transparent) border above moves the padding box — the
           position:absolute reference — outward by the border-width it used to reserve. */
        top: 5px;
        right: 3px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: var(--sis-radius-pill);
        background: var(--sis-primary);
        color: var(--sis-text-on-dark);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: normal;
        font-variant-numeric: tabular-nums;
    }
}
/* /Components/Shared/SisKit/SisChip.razor.rz.scp.css */
.sis-chip[b-xeb5dgoag0] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    white-space: nowrap;
}

.sis-chip-label[b-xeb5dgoag0] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sis-chip--neutral[b-xeb5dgoag0] {
    background: var(--sis-neutral-bg);
    color: var(--sis-text);
}

.sis-chip--warning[b-xeb5dgoag0] {
    background: var(--sis-warning-bg);
    color: var(--sis-warning-fg);
    font-weight: 600;
}
/* /Components/Shared/SisKit/SisCountBadge.razor.rz.scp.css */
.sis-count-badge[b-cw5d08m6uu] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--sis-radius-pill);
    background: var(--sis-surface-count);
    color: var(--sis-text-on-count);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}

.sis-count-badge--active[b-cw5d08m6uu] {
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-weight: 600;
}
/* /Components/Shared/SisKit/SisCourseRow.razor.rz.scp.css */
/* Course row (Main_v2 / CartExtraFee_v2 cart rows, Enrolled_v2 enrolled rows). Desktop-only vs mobile-only content
   blocks are two static renderings of the same facts (see .razor doc comment). Actions is interactive and renders
   exactly once (repositioned/shown/hidden, never duplicated); Status is a non-interactive pill and is duplicated
   on purpose (status-trailing desktop, status-inline inside content-mobile), same as chips/meta/schedule text. */

/* The display rule below would otherwise beat the UA's [hidden] { display: none } (a caller filtering a list). */
.sis-course-row[hidden][b-yml99hpfzo] {
    display: none;
}

.sis-course-row[b-yml99hpfzo] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--sis-divider);
    box-sizing: border-box;
    list-style: none;
    background: var(--sis-surface);
    /* The app shell (MudBlazor) sets body line-height:1.43 and letter-spacing:.01071em; the boards use browser
       defaults. Reset both on the root so every inherited text slot below measures like the board. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-course-row.is-muted[b-yml99hpfzo] {
    /* Fable review ruling: use the existing muted-surface token rather than a new one for this shade. */
    background: var(--sis-surface-muted);
}

[data-slot="icon"][b-yml99hpfzo] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--sis-radius-sm);
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

[data-slot="content-desktop"][b-yml99hpfzo] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-slot="content-mobile"][b-yml99hpfzo] {
    display: none;
}

[data-slot="heading"][b-yml99hpfzo] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

/* line-height: normal on every plain-text slot below -- the board page has no line-height reset, so its text
   uses Noto Sans Thai's native metrics; the app shell does set one (inherited otherwise), which read ~2px
   shorter per row than the board at this font. Isolating it here keeps the row's height correct regardless of
   the host page's own line-height. */

[data-slot="code"][b-yml99hpfzo] {
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    color: var(--sis-text);
    flex-shrink: 0;
}

[data-slot="name"][b-yml99hpfzo] {
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    color: var(--sis-text);
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-slot="english"][b-yml99hpfzo] {
    font-size: 13px;
    line-height: normal;
    color: var(--sis-text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-slot="chips-row"][b-yml99hpfzo] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

[data-slot="meta-text"][b-yml99hpfzo] {
    font-size: 12px;
    line-height: normal;
    color: var(--sis-text-secondary);
    /* Enrolled_v2: the "ยืนยัน …" date sits inline after the chips (margin-left 4px); it wraps only when the row is tight. */
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

[data-slot="status-trailing"][b-yml99hpfzo] {
    flex-shrink: 0;
    align-self: center;
}

[data-slot="actions"][b-yml99hpfzo] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-self: center;
}

/* Mobile: every row becomes its own bordered card; the icon tile and English name never show. */
@media (max-width: 959.98px) {
    .sis-course-row[b-yml99hpfzo] {
        background: var(--sis-surface);
        border: 1px solid var(--sis-border);
        border-bottom: 1px solid var(--sis-border);
        border-radius: var(--sis-radius-md);
        padding: 14px;
        align-items: flex-start;
        gap: 12px;
    }

    [data-slot="icon"][b-yml99hpfzo],
    [data-slot="content-desktop"][b-yml99hpfzo],
    [data-slot="status-trailing"][b-yml99hpfzo] {
        display: none;
    }

    [data-slot="content-mobile"][b-yml99hpfzo] {
        display: flex;
        flex-direction: column;
        gap: 3px;
        flex-grow: 1;
        min-width: 0;
    }

    [data-slot="code-mobile"][b-yml99hpfzo] {
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        color: var(--sis-text);
    }

    [data-slot="name-mobile"][b-yml99hpfzo] {
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
        color: var(--sis-text);
        min-width: 0;
        overflow-wrap: break-word;
    }

    [data-slot="compactmeta"][b-yml99hpfzo] {
        font-size: 12px;
        line-height: normal;
        color: var(--sis-text-secondary);
        font-variant-numeric: tabular-nums;
    }

    /* Fallback shown only when the caller has no CompactMeta -- reuses the Chips/Meta content as pills rather
       than leaving the mobile card without any meta line. */
    [data-slot="chips-row-mobile-fallback"][b-yml99hpfzo] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    [data-slot="mobile-heading"][b-yml99hpfzo] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    [data-slot="actions"][b-yml99hpfzo] {
        flex-shrink: 0;
        align-self: flex-start;
    }

    /* Status set (enrolled shape): the whole card stacks vertically and the action sits full-line below the content. */
    .sis-course-row.has-status[b-yml99hpfzo] {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .sis-course-row.has-status [data-slot="content-mobile"][b-yml99hpfzo] {
        gap: 4px;
    }

    .sis-course-row.has-status [data-slot="actions"][b-yml99hpfzo] {
        align-self: flex-start;
    }
}
/* /Components/Shared/SisKit/SisDialogLayout.razor.rz.scp.css */
/* SisDialogLayout — chrome shared by every SIS dialog/bottom sheet (spec §4, plan task H).
   The outer box (radius, shadow, width, position <960px) is painted by wwwroot/css/sis-global.css against the real
   Mud dialog element; this file only owns the padding/gap/typography *inside* that box, so the two must be read
   together (sis-global.css documents the split). */

.sis-dialog-shell[b-wi9rhze4wd] {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px 28px;
    /* Boards use browser-default text metrics; MudBlazor's own body rule sets line-height:1.43 and
       letter-spacing:.01071em, which this component's ancestors (.mud-dialog) inherit. Reset at the root so every
       descendant gets "normal" unless a specific element below restates its own value to match what a board
       explicitly sets (e.g. .dialog-demo-warning's line-height:1.8 in the gallery). */
    line-height: normal;
    letter-spacing: normal;
}

/* tabindex="-1": a programmatic-only landing spot for initial focus when ShowClose is false (see
   OnAfterRenderAsync). Never reachable by Tab, so there is no keyboard user to show a ring to; suppressing it here
   avoids a jarring outline around the whole dialog box (CLAUDE.md's focus-visibility rule is about elements a
   keyboard user can actually Tab to). */
.sis-dialog-shell:focus[b-wi9rhze4wd] {
    outline: none;
}

.sis-dialog-grabber[b-wi9rhze4wd] {
    display: none;
    align-self: center;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--sis-fill-faint);
    flex-shrink: 0;
}

.sis-dialog-header[b-wi9rhze4wd] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* CartFailed_v2: 44px icon at x=28 (padding), h2 starting at x=86 → 44 + 14 = 58, +28 padding = 86. */
.sis-dialog-header--leading[b-wi9rhze4wd] {
    gap: 14px;
}

/* CartResultMobile_v2: icon above title above subtitle, all centered, no close button. */
.sis-dialog-header--centered[b-wi9rhze4wd] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.sis-dialog-leading[b-wi9rhze4wd] {
    flex-shrink: 0;
}

.sis-dialog-heading[b-wi9rhze4wd] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sis-dialog-eyebrow[b-wi9rhze4wd] {
    font-size: 13px;
    font-weight: 700;
    color: var(--sis-link);
}

.sis-dialog-title[b-wi9rhze4wd] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

.sis-dialog-subtitle[b-wi9rhze4wd] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.sis-dialog-close[b-wi9rhze4wd] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: -6px -10px 0 0;
    border: none;
    border-radius: var(--sis-radius-sm);
    background: transparent;
    color: var(--sis-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease);
}

.sis-dialog-close:hover[b-wi9rhze4wd] {
    background: var(--sis-surface-hover);
    color: var(--sis-text);
}

.sis-dialog-close:active[b-wi9rhze4wd] {
    background: var(--sis-surface-track);
}

.sis-dialog-close:focus-visible[b-wi9rhze4wd] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-dialog-body[b-wi9rhze4wd] {
    min-width: 0;
}

/* Opt-in BodyGap: the body's children stack with a 12px gap. */
.sis-dialog-body--gap[b-wi9rhze4wd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sis-dialog-actions[b-wi9rhze4wd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 960px) {
    .sis-dialog-actions--row[b-wi9rhze4wd] {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Opt-in Density=Result: CartResult_v2 / CartFailed_v2 metrics (the default shell is tuned to the withdraw
   board). Desktop only -- the <960px sheet keeps the kit's CartResultMobile_v2 values. */
@media (min-width: 960px) {
    .sis-dialog-shell--result[b-wi9rhze4wd] {
        padding: 28px;
        gap: 20px;
    }

    .sis-dialog-shell--result .sis-dialog-header--centered[b-wi9rhze4wd] {
        gap: 10px;
    }

    .sis-dialog-shell--result .sis-dialog-title[b-wi9rhze4wd] {
        font-size: 22px;
    }

    .sis-dialog-shell--result .sis-dialog-subtitle[b-wi9rhze4wd] {
        margin: 0;
        line-height: 1.7;
        color: var(--sis-text-label);
    }
}

/* Bottom sheet: tighter padding/gap, visible grabber, larger close touch target (CLAUDE.md ≥44px <960px). */
@media (max-width: 959.98px) {
    .sis-dialog-shell[b-wi9rhze4wd] {
        gap: 14px;
        padding: 10px 16px max(24px, env(safe-area-inset-bottom));
    }

    .sis-dialog-grabber[b-wi9rhze4wd] {
        display: block;
    }

    .sis-dialog-eyebrow[b-wi9rhze4wd] {
        font-size: 12px;
    }

    .sis-dialog-title[b-wi9rhze4wd] {
        font-size: 18px;
    }

    .sis-dialog-close[b-wi9rhze4wd] {
        width: 44px;
        height: 44px;
    }
}

/* ไม่มี Actions ที่ render ออกมา (เช่น โหมดอาจารย์ใน dialog รายละเอียดวิชา) → ไม่เว้นช่องว่างให้แถวว่าง */
.sis-dialog-actions:empty[b-wi9rhze4wd] {
    display: none;
}

/* Opt-in StickyActions: ปุ่ม action ปักล่างของ bottom sheet ขณะ body เลื่อน (scroller คือกล่อง .mud-dialog) */
@media (max-width: 959.98px) {
    .sis-dialog-shell--sticky-actions[b-wi9rhze4wd] {
        padding-bottom: 0;
    }

    .sis-dialog-shell--sticky-actions .sis-dialog-actions[b-wi9rhze4wd] {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: 0 -16px;
        padding: 12px 16px max(16px, env(safe-area-inset-bottom));
        background: var(--sis-surface);
        border-top: 1px solid var(--sis-border, var(--sis-fill-faint));
    }

    /* ไม่มี action → ให้ safe-area ยังอยู่ที่ท้าย sheet */
    .sis-dialog-shell--sticky-actions:has(.sis-dialog-actions:empty)[b-wi9rhze4wd] {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}
/* /Components/Shared/SisKit/SisEmptyState.razor.rz.scp.css */
.sis-empty-state[b-7tzmbttbwu] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--sis-surface);
    /* Boards use browser-default line-height/letter-spacing; MudBlazor's body rule (1.43 / .01071em) would
       otherwise cascade in here and drift glyph metrics from the boards. Inner elements with their own
       board-specified line-height (description, tips) set it explicitly below and are unaffected. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-empty-state--dashed[b-7tzmbttbwu] {
    border: 1px dashed var(--sis-border-empty);
    border-radius: var(--sis-radius-xl);
    padding: 22px;
    gap: 8px;
}

.sis-empty-state--solid[b-7tzmbttbwu] {
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    padding: 28px 24px;
    gap: 12px;
}

.sis-empty-state--solid.sis-empty-state--prominent[b-7tzmbttbwu] {
    border-radius: var(--sis-radius-xl);
    padding: 40px 36px;
}

.sis-empty-state-icon[b-7tzmbttbwu] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sis-empty-state-icon svg[b-7tzmbttbwu] {
    width: 28px;
    height: 28px;
}

.sis-empty-state--dashed .sis-empty-state-icon[b-7tzmbttbwu] {
    width: 48px;
    height: 48px;
}

.sis-empty-state--dashed .sis-empty-state-icon svg[b-7tzmbttbwu] {
    width: 22px;
    height: 22px;
}

.sis-empty-state--prominent .sis-empty-state-icon[b-7tzmbttbwu] {
    width: 72px;
    height: 72px;
}

/* Teal and grey icon tiles reuse existing tokens exactly. */
.sis-empty-state--tone-teal .sis-empty-state-icon[b-7tzmbttbwu] {
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
}

/* TOKEN-REQUEST: --sis-empty-icon-grey-bg #F1F4F6 (grey empty-state icon tile background, SearchStates_v2's "no
   results" panel; the foreground reuses the existing --sis-text-muted #6B7C88, an exact match). */
.sis-empty-state--tone-grey .sis-empty-state-icon[b-7tzmbttbwu] {
    background: var(--sis-empty-icon-grey-bg, #F1F4F6);
    color: var(--sis-text-muted);
}

.sis-empty-state--tone-star .sis-empty-state-icon[b-7tzmbttbwu] {
    background: var(--sis-star-bg);
    color: var(--sis-star-stroke);
}

.sis-empty-state-title[b-7tzmbttbwu] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--sis-text);
}

.sis-empty-state--dashed .sis-empty-state-title[b-7tzmbttbwu] {
    font-size: 15px;
}

.sis-empty-state--prominent .sis-empty-state-title[b-7tzmbttbwu] {
    font-size: 20px;
}

.sis-empty-state-description[b-7tzmbttbwu] {
    margin: 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sis-text-secondary);
}

.sis-empty-state--prominent .sis-empty-state-description[b-7tzmbttbwu] {
    max-width: 440px;
    line-height: 1.8;
}

.sis-empty-state-tips[b-7tzmbttbwu] {
    /* Centered, shrink-to-fit block (not full content width) — the board's <ul> is only as wide as its
       longest <li>, not stretched to the card's content width. */
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sis-text-secondary);
}

.sis-empty-state-actions[b-7tzmbttbwu] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.sis-empty-state--prominent .sis-empty-state-actions[b-7tzmbttbwu] {
    margin-top: 8px;
}

@media (max-width: 959.98px) {
    .sis-empty-state--solid[b-7tzmbttbwu] {
        padding: 22px 18px;
    }

    .sis-empty-state--solid.sis-empty-state--prominent[b-7tzmbttbwu] {
        padding: 28px 22px;
    }
}
/* /Components/Shared/SisKit/SisErrorState.razor.rz.scp.css */
.sis-error-state[b-q9o206ft1i] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 28px 24px;
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    background: var(--sis-surface);
    /* Boards use browser-default line-height/letter-spacing; MudBlazor's body rule (1.43 / .01071em) would
       otherwise cascade in here and drift glyph metrics from the boards. .sis-error-state-helper keeps its
       own board-specified line-height (1.7) below and is unaffected. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-error-state-message[b-q9o206ft1i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.sis-error-state-icon[b-q9o206ft1i] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sis-icon-tile-bg);
    color: var(--sis-icon-tile-fg);
}

.sis-error-state-icon svg[b-q9o206ft1i] {
    width: 28px;
    height: 28px;
}

.sis-error-state-title[b-q9o206ft1i] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--sis-text);
}

h2.sis-error-state-title[b-q9o206ft1i] {
    font-size: 20px;
}

.sis-error-state-helper[b-q9o206ft1i] {
    margin: 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sis-text-secondary);
}

.sis-error-state-reference[b-q9o206ft1i] {
    margin: 0;
    font-size: 12px;
    color: var(--sis-text-secondary);
    user-select: all;
}

.sis-error-state-retry[b-q9o206ft1i] {
    margin-top: 6px;
    height: 44px;
    padding: 0 18px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--sis-radius-sm);
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

.sis-error-state-retry:hover:not([aria-disabled="true"])[b-q9o206ft1i] {
    background: var(--sis-surface-hover);
}

.sis-error-state-retry:active:not([aria-disabled="true"])[b-q9o206ft1i] {
    transform: translateY(1px);
}

.sis-error-state-retry:focus-visible[b-q9o206ft1i] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-error-state-retry[aria-disabled="true"][b-q9o206ft1i] {
    cursor: not-allowed;
    color: var(--sis-text-disabled);
}

.sis-error-state-spinner[b-q9o206ft1i] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: sis-error-state-spin-b-q9o206ft1i 0.7s linear infinite;
}

@keyframes sis-error-state-spin-b-q9o206ft1i {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-error-state-spinner[b-q9o206ft1i] {
        animation-duration: 1.6s;
    }
}

@media (max-width: 959.98px) {
    .sis-error-state[b-q9o206ft1i] {
        padding: 24px 20px;
    }
}
/* /Components/Shared/SisKit/SisFilterChip.razor.rz.scp.css */
.sis-filter-chip[b-uhx3kllsn7] {
    position: relative;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--sis-radius-pill);
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
    font-family: inherit;
    font-size: 13px;
    line-height: normal;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

/* Invisible hit-area pad, not a visual change: keeps the drawn pill at its board size while still meeting the
   ≥44px touch target rule below 960px (overflowing, unclipped, pointer-events-enabled descendants of a <button>
   still count as part of its hit area). */
.sis-filter-chip[b-uhx3kllsn7]::before {
    content: "";
    position: absolute;
    inset: 0;
}

.sis-filter-chip:hover:not(:disabled)[b-uhx3kllsn7] { background: var(--sis-surface-hover); }
.sis-filter-chip:active:not(:disabled)[b-uhx3kllsn7] { transform: translateY(1px); }
.sis-filter-chip:focus-visible[b-uhx3kllsn7] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

.sis-filter-chip[data-active="true"][b-uhx3kllsn7] {
    border-color: var(--sis-primary);
    background: var(--sis-surface-selected);
    color: var(--sis-primary);
    font-weight: 600;
}

.sis-filter-chip[data-active="true"]:hover:not(:disabled)[b-uhx3kllsn7] { background: var(--sis-surface-track); }

.sis-filter-chip:disabled[b-uhx3kllsn7] {
    border-style: dashed;
    background: transparent;
    color: var(--sis-text-muted);
    cursor: not-allowed;
}

[data-slot="icon"][b-uhx3kllsn7] { flex-shrink: 0; }

/* A long chosen value (a faculty name) must not stretch the chip across the filter row; the full text is in title. */
[data-slot="text"][b-uhx3kllsn7] {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SearchMobile_v2 draws these as compact summary chips: no chevron on either state (the real picker opens from a
   separate filter-trigger button, out of I1's scope), and an applied filter gets a trailing "✕" instead — a
   decorative cue that it's clearable, not a second control (SisFilterChip stays a single hit target; use
   SisLinkButton's "ล้างตัวกรอง" for an actual clear-all action). CSS-only swap avoids branching the markup for one
   breakpoint. SearchMobile_v2's chips are drawn smaller (32/12) than Search_v2's (36/13); the ::before pad above
   keeps the real tap target ≥44px without growing the visible pill past the board. */
@media (max-width: 959.98px) {
    .sis-filter-chip[b-uhx3kllsn7] { height: 32px; font-size: 12px; }
    .sis-filter-chip[b-uhx3kllsn7]::before { inset: -7px; }
    .sis-filter-chip [data-slot="icon"][b-uhx3kllsn7] { display: none; }
    .sis-filter-chip[data-active="true"][b-uhx3kllsn7]::after { content: "✕" / ""; font-size: 12px; }
}
/* /Components/Shared/SisKit/SisFilterMenu.razor.rz.scp.css */
/* Chip + anchored popover. The popover is a kit popover (surface, border, radius, --sis-shadow-popover) under the
   chip; data-align="end" (set by JS on open when it would overflow the viewport) anchors it to the chip's right edge. */
.sis-filter-menu[b-s92epqzbjy] {
    position: relative;
    display: inline-flex;
    line-height: normal;
    letter-spacing: normal;
}

.sis-filter-menu-popover[b-s92epqzbjy] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 41;
    box-sizing: border-box;
    min-width: 280px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 8px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    box-shadow: var(--sis-shadow-popover);
    color: var(--sis-text);
    font-size: 14px;
    white-space: normal;
    transform-origin: top left;
    /* Hidden until the JS has measured and placed it, so it never appears on the wrong side first. */
    opacity: 0;
}

.sis-filter-menu-popover[data-align="end"][b-s92epqzbjy] {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.sis-filter-menu-popover[data-ready][b-s92epqzbjy] {
    opacity: 1;
    animation: sis-filter-menu-in-b-s92epqzbjy var(--sis-duration) var(--sis-ease) both;
}

/* The popover itself only takes focus as a last resort (nothing focusable inside yet), so no ring on it. */
.sis-filter-menu-popover:focus[b-s92epqzbjy] {
    outline: none;
}

@keyframes sis-filter-menu-in-b-s92epqzbjy {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-filter-menu-popover[data-ready][b-s92epqzbjy] {
        animation: none;
    }
}
/* /Components/Shared/SisKit/SisGroupHeading.razor.rz.scp.css */
.sis-group-heading[b-kjzxr4bggh] {
    /* Reset the app shell's inherited Material typography (see SisTermCard.razor.css); the board's own
       letter-spacing (0.2px) replaces the normal-letter-spacing half of that reset directly. */
    line-height: normal;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--sis-text-label);
}
/* /Components/Shared/SisKit/SisIconButton.razor.rz.scp.css */
.sis-icon-btn[b-p3ip6ff6g4] {
    position: relative;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sis-radius-sm);
    border: 1px solid var(--sis-border);
    background: var(--sis-surface);
    color: var(--sis-primary);
    line-height: normal;
    letter-spacing: normal;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sis-duration) var(--sis-ease),
                border-color var(--sis-duration) var(--sis-ease),
                color var(--sis-duration) var(--sis-ease),
                transform var(--sis-duration) var(--sis-ease);
}

.sis-icon-btn:active[b-p3ip6ff6g4] {
    transform: translateY(1px);
}

.sis-icon-btn--danger[b-p3ip6ff6g4] {
    color: var(--sis-danger);
}

@media (hover: hover) {
    .sis-icon-btn--default:hover[b-p3ip6ff6g4] { background: var(--sis-surface-hover); }
    .sis-icon-btn--danger:hover[b-p3ip6ff6g4] { background: var(--sis-danger-bg); }
}
.sis-icon-btn--default:active[b-p3ip6ff6g4] { background: var(--sis-surface-selected); }
.sis-icon-btn--danger:active[b-p3ip6ff6g4] { background: var(--sis-danger-bg); }

.sis-icon-btn:focus-visible[b-p3ip6ff6g4] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

/* Pressed (toggle) — persistent selected look, same family as the icon tile tokens. */
.sis-icon-btn[aria-pressed="true"][b-p3ip6ff6g4] {
    background: var(--sis-surface-selected);
    border-color: var(--sis-icon-tile-fg);
    color: var(--sis-icon-tile-fg);
}

/* Disabled — a dedicated class (not [aria-disabled], which this control also carries while merely Busy) so a
   Busy-only button keeps its Tone's normal ink instead of looking disabled/dead; see Busy below. The C# click
   guard (not pointer-events) blocks clicks, so cursor: not-allowed still paints on hover. */
.sis-icon-btn:disabled[b-p3ip6ff6g4],
.sis-icon-btn--disabled[b-p3ip6ff6g4] {
    background: var(--sis-surface);
    color: var(--sis-text-disabled);
    border-color: var(--sis-border);
    cursor: not-allowed;
}
.sis-icon-btn:disabled:active[b-p3ip6ff6g4],
.sis-icon-btn--disabled:active[b-p3ip6ff6g4] {
    transform: none;
}

.sis-icon-btn-icon[b-p3ip6ff6g4] {
    display: inline-flex;
}
.sis-icon-btn-icon[b-p3ip6ff6g4]  svg {
    display: block;
}

/* Busy — fade the icon with opacity (not visibility/display) and show the spinner in its place. */
.sis-icon-btn--busy .sis-icon-btn-icon[b-p3ip6ff6g4] {
    opacity: 0;
}
.sis-icon-btn-spinner[b-p3ip6ff6g4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sis-icon-btn-spinner svg[b-p3ip6ff6g4] {
    animation: sis-icon-btn-spin-b-p3ip6ff6g4 0.8s linear infinite;
}
@keyframes sis-icon-btn-spin-b-p3ip6ff6g4 {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sis-icon-btn-spinner svg[b-p3ip6ff6g4] { animation-duration: 1.6s; }
}

@media (max-width: 959.98px) {
    .sis-icon-btn[b-p3ip6ff6g4] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Shared/SisKit/SisInfoStrip.razor.rz.scp.css */
.sis-info-strip[b-3qp32vrawx] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: normal;
    letter-spacing: normal;
    border-bottom: 1px solid var(--sis-divider-strong);
    box-sizing: border-box;
}

.sis-info-strip--neutral[b-3qp32vrawx] {
    align-items: center;
    background: var(--sis-surface-subtle);
    color: var(--sis-text-label);
}

.sis-info-strip--warning[b-3qp32vrawx] {
    align-items: flex-start;
    line-height: 1.6;
    background: var(--sis-warning-strip-bg);
    color: var(--sis-warning-text);
    border-bottom-color: var(--sis-warning-strip-border);
}

.sis-info-strip--warning [data-slot="icon"][b-3qp32vrawx] {
    margin-top: 2px;
}

[data-slot="icon"][b-3qp32vrawx] {
    flex-shrink: 0;
    display: flex;
}

[data-slot="icon"][b-3qp32vrawx]  svg {
    display: block;
}

[data-slot="content"][b-3qp32vrawx] {
    min-width: 0;
}

@media (max-width: 959.98px) {
    /* Warning stays a standalone rounded box (EnrolledMobile_v2). */
    .sis-info-strip--warning[b-3qp32vrawx] {
        gap: 6px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.6;
        border-bottom: none;
        border-radius: var(--sis-radius-sm);
    }

    /* Neutral drops the box entirely -- CartMobile_v2 draws it as a plain inline row with a smaller icon, no
       background/padding/border/radius at all. */
    .sis-info-strip--neutral[b-3qp32vrawx] {
        background: none;
        gap: 6px;
        padding: 0;
        font-size: 12px;
        border-bottom: none;
        align-items: flex-start;
    }

    .sis-info-strip--neutral [data-slot="icon"][b-3qp32vrawx] {
        margin-top: 2px;
    }

    .sis-info-strip--neutral [data-slot="icon"][b-3qp32vrawx]  svg {
        width: 14px;
        height: 14px;
    }
}
/* /Components/Shared/SisKit/SisIntroBanner.razor.rz.scp.css */
.sis-intro[b-mxtvyhsus2] {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--sis-radius-lg);
    padding: 16px 56px 18px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #1B5A99 0%, #2A6FB6 55%, #3A82C8 100%);
    box-shadow: 0 1px 2px rgba(20, 50, 90, .2), 0 10px 24px -14px rgba(27, 90, 153, .65);
    animation: var(--sis-enter-animation);
}

[data-slot=glow][b-mxtvyhsus2] {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 70%);
}

[data-slot=body][b-mxtvyhsus2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

[data-slot=chip][b-mxtvyhsus2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
    color: #FFE07A;
}

[data-slot=title][b-mxtvyhsus2] {
    margin: 10px 0 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    text-wrap: balance;
}

[data-slot=text][b-mxtvyhsus2] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #E4F0FB;
    text-wrap: pretty;
    max-width: 60ch;
}

[data-slot=cta][b-mxtvyhsus2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin-top: 14px;
    padding: 0 14px;
    border-radius: 10px;
    background: #ffffff;
    color: #1B5A99;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color .15s ease;
}

[data-slot=cta]:hover[b-mxtvyhsus2] {
    background: #EAF3FC;
    color: #164B80;
}

[data-slot=cta]:focus-visible[b-mxtvyhsus2] {
    outline: 3px solid #FFE07A;
    outline-offset: 2px;
}

[data-slot=sr][b-mxtvyhsus2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

[data-slot=close][b-mxtvyhsus2] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .15s ease;
}

[data-slot=close]:hover[b-mxtvyhsus2] {
    background: rgba(255, 255, 255, .14);
}

[data-slot=close]:focus-visible[b-mxtvyhsus2] {
    outline: 2px solid #FFE07A;
    outline-offset: -2px;
}

/* Desktop: one row (chip, title and text on the left, the guide button centered on the right), about half as tall
   as the stacked mobile layout */
@media (min-width: 960px) {
    .sis-intro[b-mxtvyhsus2] {
        padding: 16px 64px 16px 24px;
    }

    [data-slot=body][b-mxtvyhsus2] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 32px;
        align-items: center;
    }

    [data-slot=chip][b-mxtvyhsus2] {
        grid-column: 1;
        justify-self: start;
    }

    [data-slot=title][b-mxtvyhsus2] {
        grid-column: 1;
        margin: 6px 0 2px;
        font-size: 18px;
    }

    [data-slot=text][b-mxtvyhsus2] {
        grid-column: 1;
        max-width: none;
        font-size: 15px;
    }

    [data-slot=cta][b-mxtvyhsus2] {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-top: 0;
        white-space: nowrap;
    }
}

/* Quiet: same layout on a light blue surface, dark blue text and an outlined guide button */
.sis-intro[data-tone=quiet][b-mxtvyhsus2] {
    color: #12385F;
    background: #EEF5FC;
    box-shadow: inset 0 0 0 1px #CFE0F2;
}

.sis-intro[data-tone=quiet] [data-slot=glow][b-mxtvyhsus2] {
    display: none;
}

.sis-intro[data-tone=quiet] [data-slot=chip][b-mxtvyhsus2] {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #CFE0F2;
    color: #1B5A99;
}

.sis-intro[data-tone=quiet] [data-slot=title][b-mxtvyhsus2] {
    color: #12385F;
}

.sis-intro[data-tone=quiet] [data-slot=text][b-mxtvyhsus2] {
    color: #34587A;
}

.sis-intro[data-tone=quiet] [data-slot=cta][b-mxtvyhsus2] {
    box-shadow: inset 0 0 0 1px #B9D3EE;
}

.sis-intro[data-tone=quiet] [data-slot=cta]:focus-visible[b-mxtvyhsus2],
.sis-intro[data-tone=quiet] [data-slot=close]:focus-visible[b-mxtvyhsus2] {
    outline-color: #1B5A99;
}

.sis-intro[data-tone=quiet] [data-slot=close][b-mxtvyhsus2] {
    color: #34587A;
}

.sis-intro[data-tone=quiet] [data-slot=close]:hover[b-mxtvyhsus2] {
    background: rgba(27, 90, 153, .08);
}
/* /Components/Shared/SisKit/SisLinkButton.razor.rz.scp.css */
.sis-link-button[b-r2hso8atlr] {
    height: 36px;
    padding: 0 10px;
    border: none;
    border-radius: var(--sis-radius-xs);
    background: none;
    color: var(--sis-link);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    touch-action: manipulation;
    transition: color var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease);
}

.sis-link-button:hover:not(:disabled)[b-r2hso8atlr] { color: var(--sis-primary); background: var(--sis-surface-hover); }
.sis-link-button:active:not(:disabled)[b-r2hso8atlr] { transform: translateY(1px); }
.sis-link-button:focus-visible[b-r2hso8atlr] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }
.sis-link-button:disabled[b-r2hso8atlr] { color: var(--sis-text-disabled); cursor: not-allowed; }

@media (max-width: 959.98px) {
    .sis-link-button[b-r2hso8atlr] { min-height: 44px; }
}
/* /Components/Shared/SisKit/SisLoadMore.razor.rz.scp.css */
.sis-load-more[b-1zyqt07cbl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* MudBlazor sets body line-height:1.43/letter-spacing:.01071em; boards use browser defaults. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-load-more-status[b-1zyqt07cbl] {
    font-size: 12px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sis-load-more-button[b-1zyqt07cbl] {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: var(--sis-radius-md);
    border: 1.5px solid var(--sis-primary);
    background: var(--sis-surface);
    color: var(--sis-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease);
}

.sis-load-more-button:hover:not(:disabled)[b-1zyqt07cbl] {
    background: var(--sis-surface-hover);
}

.sis-load-more-button:active:not(:disabled)[b-1zyqt07cbl] {
    background: var(--sis-surface-track);
}

.sis-load-more-button:focus-visible[b-1zyqt07cbl] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-load-more-button:disabled[b-1zyqt07cbl] {
    border-color: var(--sis-border);
    color: var(--sis-text-disabled);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .sis-load-more-button[b-1zyqt07cbl] {
        transition: none;
    }
}
/* /Components/Shared/SisKit/SisMoneyList.razor.rz.scp.css */
.sis-money-list[b-ecusc2d8mj] {
    margin: 0;
    border: 1px solid var(--sis-divider-strong);
    border-radius: var(--sis-radius-md);
    overflow: hidden;
}
/* /Components/Shared/SisKit/SisMoneyRow.razor.rz.scp.css */
.sis-money-row[b-flbnljl2vr] {
    margin: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    padding: 12px 16px;
    background: var(--sis-surface);
    color: var(--sis-text);
    font-size: 14px;
    line-height: normal;
    letter-spacing: normal;
}

.sis-money-row[data-divider="true"][b-flbnljl2vr] {
    border-top: 1px solid var(--sis-divider);
}

.sis-money-row [data-slot="label"][b-flbnljl2vr] {
    grid-column: 1;
    margin: 0;
    min-width: 0;
    color: var(--sis-text-secondary);
    font-weight: 400;
}

.sis-money-row [data-slot="amount"][b-flbnljl2vr] {
    grid-column: 2;
    margin: 0;
    white-space: nowrap;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sis-money-row [data-slot="caption"][b-flbnljl2vr] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--sis-text-secondary);
    font-size: 12px;
}

/* Tone: Total -- bold label, amount stays the default weight (CartFailed_v2's "ต้องชำระรอบนี้", the tone's real
   shipping example: dt 600 dd 600). CartExtraFee_v2's own bolder 600/700 fee line is a shape reference only --
   its per-subject fee row is rejected (E3) and its aside doesn't render pre-confirm (E4). */
.sis-money-row[data-tone="total"] [data-slot="label"][b-flbnljl2vr] {
    color: var(--sis-text);
    font-weight: 600;
}

/* Tone: Warning, filled row (CartFailed_v2 "ขาดอีก") */
.sis-money-row[data-tone="warning"]:not([data-boxed="true"])[b-flbnljl2vr] {
    background: var(--sis-warning-bg);
    color: var(--sis-warning-fg);
}

.sis-money-row[data-tone="warning"]:not([data-boxed="true"]) [data-slot="label"][b-flbnljl2vr] {
    color: inherit;
    font-weight: 600;
}

.sis-money-row[data-tone="warning"]:not([data-boxed="true"]) [data-slot="amount"][b-flbnljl2vr] {
    color: inherit;
    font-size: 18px;
    font-weight: 700;
}

/* Boxed -- standalone amber box (TermSelectStates_v2 "ต้องชำระ") */
.sis-money-row[data-boxed="true"][b-flbnljl2vr] {
    padding: 12px 14px;
    border: 1px solid var(--sis-warning-box-border);
    border-radius: var(--sis-radius-md);
    background: var(--sis-warning-box-bg);
}

.sis-money-row[data-boxed="true"] [data-slot="label"][b-flbnljl2vr] {
    color: var(--sis-warning-text);
    font-weight: 400;
}

.sis-money-row[data-boxed="true"] [data-slot="amount"][b-flbnljl2vr] {
    color: var(--sis-warning-text);
    font-size: 22px;
    font-weight: 700;
}
/* /Components/Shared/SisKit/SisNote.razor.rz.scp.css */
.sis-note[b-x38hbvsqa4] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--sis-radius-sm);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: normal;
    box-sizing: border-box;
}

.sis-note--neutral[b-x38hbvsqa4] {
    background: var(--sis-surface-subtle);
    color: var(--sis-text-body);
}

.sis-note--warning[b-x38hbvsqa4] {
    background: var(--sis-warning-bg);
    color: var(--sis-warning-fg);
}

.sis-note--info[b-x38hbvsqa4] {
    background: var(--sis-callout-bg);
    color: var(--sis-callout-fg);
    border: 1px solid var(--sis-callout-border);
    padding: 12px 14px;
    border-radius: var(--sis-radius-md);
    gap: 10px;
    line-height: 1.65;
    font-size: 13px;
}

[data-slot="icon"][b-x38hbvsqa4] {
    flex-shrink: 0;
    display: flex;
    margin-top: 3px;
}

/* The exclamation-in-circle glyph sits 1px higher than the Lock/Link glyphs on every board. */
[data-slot="icon"][data-icon="info"][b-x38hbvsqa4] {
    margin-top: 2px;
}

[data-slot="icon"][b-x38hbvsqa4]  svg {
    display: block;
}

[data-slot="content"][b-x38hbvsqa4] {
    min-width: 0;
}

/* DetailActions_v2 (desktop, 1280px board) and CartExtraFee_v2 both show 13px/gap 8 at this size; only the
   phone board (CartExtraFeeMobile_v2, 390px) drops to 12px/gap 6 with no border. */
@media (max-width: 959.98px) {
    .sis-note[b-x38hbvsqa4] {
        gap: 6px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.6;
    }

    /* DetailMobileSheet_v2's coreq note drops the border and reverts to the base box (10/12/radius 10). */
    .sis-note--info[b-x38hbvsqa4] {
        border: none;
        border-radius: var(--sis-radius-sm);
    }
}
/* /Components/Shared/SisKit/SisNumberStepper.razor.rz.scp.css */
/*
 * SisNumberStepper -- -/+ buttons flanking a numeric input.
 * Board: DetailDialogCredit_v2 / DetailMobileSheetCredit_v2 (Size=Md, 48px); DetailActions_v2 compact card
 * (Size=Sm, 44px). Lg/Xs extrapolate the same SisSize height scale as SisButton; no board specimen exists for
 * them (noted in the task report).
 */
.sis-stepper[b-sqwa3kqxtg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    /* MudBlazor's body rule sets line-height:1.43/letter-spacing:.01071em and inherits into every descendant;
       the boards render at the browser's own defaults. Reset here, at the root; the -/+ glyphs still override
       to the board's own line-height:1 below. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-stepper-head[b-sqwa3kqxtg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sis-stepper-head label[b-sqwa3kqxtg] {
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.sis-stepper-head span[data-slot="hint"][b-sqwa3kqxtg] {
    font-size: 12px;
    color: var(--sis-text-secondary);
    text-align: right;
}

.sis-stepper-controls[b-sqwa3kqxtg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sis-stepper-controls button[b-sqwa3kqxtg] {
    position: relative;
    flex-shrink: 0;
    border-radius: var(--stepper-radius, var(--sis-radius-md));
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    width: var(--stepper-btn, 48px);
    height: var(--stepper-btn, 48px);
    font-size: var(--stepper-glyph, 22px);
    transition: background-color var(--sis-duration) var(--sis-ease),
                border-color var(--sis-duration) var(--sis-ease),
                color var(--sis-duration) var(--sis-ease),
                opacity var(--sis-duration) var(--sis-ease),
                transform var(--sis-duration) var(--sis-ease);
}

/* Xs (40px) is the only size below the 44px touch-target minimum (Sm/Md/Lg are already >=44px). No board
   specimen shows Xs at a mobile width, so this mirrors SisStarToggle's own hit-area technique. */
@media (max-width: 959.98px) {
    .sis-stepper--xs .sis-stepper-controls button[b-sqwa3kqxtg]::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

@media (hover: hover) {
    .sis-stepper-controls button:not(:disabled):not([aria-disabled="true"]):hover[b-sqwa3kqxtg] {
        background: var(--sis-surface-hover);
    }
}

.sis-stepper-controls button:not(:disabled):not([aria-disabled="true"]):active[b-sqwa3kqxtg] {
    transform: translateY(1px);
}

.sis-stepper-controls button:focus-visible[b-sqwa3kqxtg] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-stepper-controls button:disabled[b-sqwa3kqxtg] {
    cursor: not-allowed;
}

.sis-stepper input[b-sqwa3kqxtg] {
    flex: 1 1 auto;
    width: var(--stepper-input-width, auto);
    min-width: 0;
    height: var(--stepper-btn, 48px);
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--stepper-radius, var(--sis-radius-md));
    border: 1px solid var(--sis-border-field);
    font-family: inherit;
    font-size: var(--stepper-input-font, 18px);
    font-weight: var(--stepper-input-weight, 700);
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
    background: var(--sis-surface);
    transition: border-color var(--sis-duration) var(--sis-ease);
}

.sis-stepper input:focus-visible[b-sqwa3kqxtg] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
    box-shadow: var(--sis-focus-ring-field);
}

.sis-stepper input:disabled[b-sqwa3kqxtg] {
    color: var(--sis-text-disabled);
    border-color: var(--sis-border);
    cursor: not-allowed;
}

/* Size scale (SisSize, matches SisButton's Lg52/Md48/Sm44/Xs40). Only Md and Sm have a board specimen. */
.sis-stepper--lg[b-sqwa3kqxtg] { --stepper-btn: 52px; --stepper-radius: var(--sis-radius-md); --stepper-glyph: 22px; --stepper-input-font: 18px; --stepper-input-weight: 700; }
.sis-stepper--md[b-sqwa3kqxtg] { --stepper-btn: 48px; --stepper-radius: var(--sis-radius-md); --stepper-glyph: 22px; --stepper-input-font: 18px; --stepper-input-weight: 700; }
.sis-stepper--sm[b-sqwa3kqxtg] { --stepper-btn: 44px; --stepper-radius: var(--sis-radius-sm); --stepper-glyph: 20px; --stepper-input-font: 16px; --stepper-input-weight: 600; --stepper-input-width: 72px; }
.sis-stepper--xs[b-sqwa3kqxtg] { --stepper-btn: 40px; --stepper-radius: var(--sis-radius-sm); --stepper-glyph: 18px; --stepper-input-font: 15px; --stepper-input-weight: 600; --stepper-input-width: 64px; }

/* Sm/Xs: the board's input is a fixed 72/64px box with room left over in the row (DetailActions_v2's compact
   card is not full-width), not a flex-grow fill like the Md/Lg dialog/sheet row. */
.sis-stepper--sm input[b-sqwa3kqxtg],
.sis-stepper--xs input[b-sqwa3kqxtg] {
    flex: 0 0 var(--stepper-input-width);
}

/* Md/Lg edge-disabled look (DetailDialogCredit_v2/DetailMobileSheetCredit_v2 dim the button via opacity while
   keeping its base colors -- the board's own interactive demo represents "reachable but at the edge" this way). */
.sis-stepper--md .sis-stepper-controls button[aria-disabled="true"][b-sqwa3kqxtg],
.sis-stepper--lg .sis-stepper-controls button[aria-disabled="true"][b-sqwa3kqxtg] {
    opacity: 0.4;
}

/* Sm/Xs edge-disabled look (DetailActions_v2's compact card renders the maxed-out + button with fully muted
   colors, not opacity). */
.sis-stepper--sm .sis-stepper-controls button[aria-disabled="true"][b-sqwa3kqxtg],
.sis-stepper--xs .sis-stepper-controls button[aria-disabled="true"][b-sqwa3kqxtg] {
    border-color: var(--sis-divider-strong);
    background: var(--sis-surface-muted);
    color: var(--sis-border-empty);
}

.sis-stepper.is-disabled[b-sqwa3kqxtg] {
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .sis-stepper-controls button[b-sqwa3kqxtg],
    .sis-stepper input[b-sqwa3kqxtg] {
        transition: none;
    }
}
/* /Components/Shared/SisKit/SisOptionList.razor.rz.scp.css */
/* Search box: SisSearchField's field box (border, radius, hover and focus ring, 44px step with 16px text so iOS never
   zooms). The list under it follows SisSelectField's option tokens at the 44px touch step. */
.sis-option-list[b-8mpr938ku7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.sis-option-list-search[b-8mpr938ku7] {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border-field);
    border-radius: var(--sis-radius-sm);
    color: var(--sis-text);
    transition: border-color var(--sis-duration) var(--sis-ease), box-shadow var(--sis-duration) var(--sis-ease);
}

@media (hover: hover) {
    .sis-option-list-search:hover[b-8mpr938ku7] {
        border-color: var(--sis-focus-color);
    }
}

.sis-option-list-search:focus-within[b-8mpr938ku7] {
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
}

.sis-option-list-search-icon[b-8mpr938ku7] {
    flex-shrink: 0;
    color: var(--sis-icon-muted);
}

.sis-option-list-search [data-slot="input"][b-8mpr938ku7] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--sis-text);
    touch-action: manipulation;
}

.sis-option-list-search [data-slot="input"][b-8mpr938ku7]::placeholder {
    color: var(--sis-placeholder);
}

.sis-option-list-list[b-8mpr938ku7] {
    box-sizing: border-box;
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

/* Without a search box the list itself holds focus: ring it (the highlighted row shows where the keys act). */
.sis-option-list-list:focus-visible[b-8mpr938ku7] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: -2px;
    border-radius: var(--sis-radius-sm);
}

.sis-option-list-option[b-8mpr938ku7] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: var(--sis-radius-sm);
    font-size: 15px;
    color: var(--sis-text);
    cursor: pointer;
    touch-action: manipulation;
}

.sis-option-list-option-text[b-8mpr938ku7] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Keyboard highlight and mouse hover share one look (hover is CSS-only: no server round trip per pointer move). */
.sis-option-list-option[data-active="true"][b-8mpr938ku7] {
    background: var(--sis-surface-hover);
}

@media (hover: hover) {
    .sis-option-list-option:hover[b-8mpr938ku7] {
        background: var(--sis-surface-hover);
    }
}

.sis-option-list-option[aria-selected="true"][b-8mpr938ku7] {
    color: var(--sis-primary);
    font-weight: 600;
}

.sis-option-list-check[b-8mpr938ku7] {
    flex-shrink: 0;
    color: var(--sis-primary);
}

.sis-option-list-status[b-8mpr938ku7] {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

/* Visually hidden, still read out. */
.sis-option-list-live[b-8mpr938ku7] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/SisKit/SisPageHeader.razor.rz.scp.css */
/* SisPageHeader — CSS Grid lays out breadcrumb/title/subtitle/actions so the same markup can reorder itself at
   the 960px breakpoint (actions moves from "bottom-right of the whole block" to "inline with the title") without
   duplicating DOM. See board refs in the component's doc comment. */

.sis-page-header[b-en9iudvmui] {
    /* TOKEN-REQUEST: sis-text-secondary-alt #4F6B75 — TermSelect_v2/TermSelectMobile_v2's subtitle color; every
       other header board (Main_v2, CartMobile_v2, Favorites_v2, …) uses --sis-text-secondary (#5B7280) instead. */
    --sis-page-header-divider-subtitle: var(--sis-text-subtitle);

    /* MudBlazor sets body { line-height: 1.43; letter-spacing: .01071em }; the boards use browser defaults.
       Reset both here so every inner slot inherits board-accurate metrics unless it overrides its own
       (title's 1.25, and the Divider variant's mobile subtitle 1.7 — see below). */
    line-height: normal;
    letter-spacing: normal;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "breadcrumb actions"
        "title      actions"
        "subtitle   actions";
    column-gap: 16px;
    row-gap: 6px;
}

.sis-page-header:not(:has([data-slot="breadcrumb"]))[b-en9iudvmui] {
    grid-template-areas:
        "title    actions"
        "subtitle actions";
}

.sis-page-header[data-divider="true"][b-en9iudvmui] {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sis-border-field);
}

.sis-page-header [data-slot="breadcrumb"][b-en9iudvmui] {
    grid-area: breadcrumb;
    min-width: 0;
    font-size: 13px;
    letter-spacing: normal;
    color: var(--sis-text-secondary);
}

.sis-page-header [data-slot="breadcrumb-link"][b-en9iudvmui] {
    /* Padded hit area on top of the 12/13px text so the link still clears the 44px touch-target minimum; the
       negative margin cancels the padding's visual shift. */
    position: relative;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    touch-action: manipulation;
    transition: color var(--sis-duration) var(--sis-ease);
}

.sis-page-header [data-slot="breadcrumb-link"][b-en9iudvmui]::before {
    content: "";
    position: absolute;
    inset: -15px -4px;
}

.sis-page-header [data-slot="breadcrumb-link"]:hover[b-en9iudvmui] {
    color: var(--sis-primary-hover);
    text-decoration: underline;
}

.sis-page-header [data-slot="breadcrumb-link"]:active[b-en9iudvmui] {
    color: var(--sis-primary-active);
}

.sis-page-header [data-slot="breadcrumb-link"]:focus-visible[b-en9iudvmui] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-page-header [data-slot="title"][b-en9iudvmui] {
    grid-area: title;
    min-width: 0;
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--sis-text);
    text-wrap: balance;
}

/* TermSelect_v2's h1 renders at weight 400, unlike every other header board (500). */
.sis-page-header[data-divider="true"] [data-slot="title"][b-en9iudvmui] {
    font-weight: 400;
}

.sis-page-header [data-slot="subtitle"][b-en9iudvmui] {
    grid-area: subtitle;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    letter-spacing: normal;
    color: var(--sis-text-secondary);
}

.sis-page-header[data-divider="true"] [data-slot="subtitle"][b-en9iudvmui] {
    color: var(--sis-page-header-divider-subtitle);
}

.sis-page-header [data-slot="actions"][b-en9iudvmui] {
    grid-area: actions;
    align-self: end;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 959.98px) {
    /* No breadcrumb under 960px: the app bar's back arrow does that job and 12px links crowd the header. */
    .sis-page-header [data-slot="breadcrumb"][b-en9iudvmui] {
        display: none;
    }

    .sis-page-header[b-en9iudvmui] {
        grid-template-areas:
            "title      actions"
            "subtitle   subtitle";
        column-gap: 12px;
        row-gap: 4px;
    }

    /* Same specificity (0,2,0) as the base ":not(:has())" rule above, so this — coming later in the stylesheet —
       is the one that wins under 960px; repeating the selector here is what makes that happen. */
    .sis-page-header:not(:has([data-slot="breadcrumb"]))[b-en9iudvmui] {
        grid-template-areas:
            "title    actions"
            "subtitle subtitle";
    }

    /* TermSelectMobile_v2 (the only mobile board that pairs with Divider) drops the border TermSelect_v2 shows on
       desktop — the compact 22px title carries the hierarchy instead. Match that: no border/padding under 960px. */
    .sis-page-header[data-divider="true"][b-en9iudvmui] {
        padding-bottom: 0;
        border-bottom: none;
    }

    .sis-page-header [data-slot="breadcrumb"][b-en9iudvmui] {
        font-size: 12px;
    }

    .sis-page-header [data-slot="title"][b-en9iudvmui] {
        font-size: 26px;
    }

    /* TermSelectMobile_v2's h1 sets no line-height of its own (unlike the 1.25 every other mobile header uses). */
    .sis-page-header[data-divider="true"] [data-slot="title"][b-en9iudvmui] {
        font-size: 22px;
        line-height: normal;
    }

    .sis-page-header [data-slot="subtitle"][b-en9iudvmui] {
        font-size: 13px;
    }

    /* TermSelectMobile_v2's subtitle is 14px/1.7 (its two-line description), not the 13px/normal every other
       mobile subtitle (a short one-line deadline) uses. */
    .sis-page-header[data-divider="true"] [data-slot="subtitle"][b-en9iudvmui] {
        font-size: 14px;
        line-height: 1.7;
    }

    .sis-page-header [data-slot="actions"][b-en9iudvmui] {
        align-self: center;
    }

    /* A semester field beside the title squeezes it into a narrow column; on a phone it takes its own row under the
       title (and subtitle) instead. Buttons and links stay beside the title. */
    .sis-page-header:has([data-slot="actions"] .sis-select-field)[b-en9iudvmui] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "subtitle"
            "actions";
        row-gap: 10px;
    }

    .sis-page-header:not(:has([data-slot="subtitle"])):has([data-slot="actions"] .sis-select-field)[b-en9iudvmui] {
        grid-template-areas:
            "title"
            "actions";
    }

    .sis-page-header:has([data-slot="actions"] .sis-select-field) [data-slot="actions"][b-en9iudvmui] {
        justify-self: stretch;
    }

    .sis-page-header:has([data-slot="actions"] .sis-select-field) [data-slot="actions"][b-en9iudvmui]  .sis-select-field {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }
}
/* /Components/Shared/SisKit/SisPagination.razor.rz.scp.css */
.sis-pagination[b-57x6gzbd4u] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    /* MudBlazor sets body line-height:1.43/letter-spacing:.01071em; boards use browser defaults. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-pagination-item[b-57x6gzbd4u] {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: var(--sis-radius-sm);
    border: 1px solid var(--sis-border);
    background: var(--sis-surface);
    color: var(--sis-text);
    font-family: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease),
                border-color var(--sis-duration) var(--sis-ease),
                color var(--sis-duration) var(--sis-ease);
}

/* Scoped away from --current: it already has its own bg/color and must not flip to the plain hover/active look. */
.sis-pagination-item:not(.sis-pagination-item--current):hover[b-57x6gzbd4u] {
    background: var(--sis-surface-hover);
    border-color: var(--sis-border-control);
}

.sis-pagination-item:not(.sis-pagination-item--current):active[b-57x6gzbd4u] {
    background: var(--sis-surface-track);
}

.sis-pagination-item:focus-visible[b-57x6gzbd4u] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-pagination-item--current[b-57x6gzbd4u] {
    background: var(--sis-primary);
    border-color: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-weight: 600;
    cursor: default;
}

.sis-pagination-item--nav svg[b-57x6gzbd4u] {
    flex-shrink: 0;
}

.sis-pagination-ellipsis[b-57x6gzbd4u] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sis-text-muted);
    font-size: 14px;
    user-select: none;
}

/* Board only draws the 40px box at desktop widths; widen to the 44px touch-target minimum below 960px (CLAUDE.md). */
@media (max-width: 959.98px) {
    .sis-pagination-item[b-57x6gzbd4u],
    .sis-pagination-ellipsis[b-57x6gzbd4u] {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-pagination-item[b-57x6gzbd4u] {
        transition: none;
    }
}
/* /Components/Shared/SisKit/SisPill.razor.rz.scp.css */
.sis-pill[b-lu660r8d9t] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--sis-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    white-space: nowrap;
}

.sis-pill--sm[b-lu660r8d9t] {
    height: 24px;
}

.sis-pill--xs[b-lu660r8d9t] {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
}

.sis-pill--strong[b-lu660r8d9t] {
    font-weight: 700;
}

.sis-pill-icon[b-lu660r8d9t] {
    display: flex;
    flex-shrink: 0;
}

.sis-pill-label[b-lu660r8d9t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sis-pill--neutral[b-lu660r8d9t] {
    background: var(--sis-neutral-bg);
    color: var(--sis-neutral-fg);
}

.sis-pill--success[b-lu660r8d9t] {
    background: var(--sis-success-bg);
    color: var(--sis-success-fg);
}

.sis-pill--warning[b-lu660r8d9t] {
    background: var(--sis-warning-bg);
    color: var(--sis-warning-fg);
}

.sis-pill--info[b-lu660r8d9t] {
    background: var(--sis-info-bg);
    color: var(--sis-info-fg);
}

.sis-pill--danger[b-lu660r8d9t] {
    background: var(--sis-danger-bg);
    color: var(--sis-danger-fg);
}

.sis-pill--reserved[b-lu660r8d9t] {
    background: var(--sis-reserved-bg);
    color: var(--sis-reserved-fg);
}

.sis-pill--solid[b-lu660r8d9t] {
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
}
/* /Components/Shared/SisKit/SisResultHeader.razor.rz.scp.css */
.sis-result-header[b-bfpid2p1kk] {
    box-sizing: border-box;
    display: flex;
    /* Boards use browser-default line-height/letter-spacing; MudBlazor's body rule (1.43 / .01071em) would
       otherwise cascade in here and drift glyph metrics from the boards. .sis-result-header-subtitle keeps
       its own board-specified line-height (1.7) below and is unaffected. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-result-header--compact[b-bfpid2p1kk],
.sis-result-header--dialog[b-bfpid2p1kk] {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sis-result-header--leading[b-bfpid2p1kk] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
}

.sis-result-header-text[b-bfpid2p1kk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sis-result-header--compact .sis-result-header-text[b-bfpid2p1kk],
.sis-result-header--dialog .sis-result-header-text[b-bfpid2p1kk] {
    align-items: center;
}

.sis-result-header--leading .sis-result-header-text[b-bfpid2p1kk] {
    flex-grow: 1;
    gap: 4px;
}

.sis-result-header--compact[b-bfpid2p1kk] {
    gap: 14px;
}

.sis-result-header--compact .sis-result-header-text[b-bfpid2p1kk] {
    gap: 14px;
}

.sis-result-header--dialog[b-bfpid2p1kk] {
    gap: 10px;
}

.sis-result-header--dialog .sis-result-header-text[b-bfpid2p1kk] {
    gap: 10px;
}

.sis-result-header-title[b-bfpid2p1kk] {
    margin: 0;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

.sis-result-header--compact .sis-result-header-title[b-bfpid2p1kk] {
    font-size: 18px;
}

.sis-result-header--dialog .sis-result-header-title[b-bfpid2p1kk] {
    font-size: 22px;
}

.sis-result-header--leading .sis-result-header-title[b-bfpid2p1kk] {
    font-size: 20px;
}

.sis-result-header-subtitle[b-bfpid2p1kk] {
    margin: 0;
    line-height: 1.7;
    color: var(--sis-text-label);
}

.sis-result-header--compact .sis-result-header-subtitle[b-bfpid2p1kk] {
    font-size: 13px;
}

.sis-result-header--dialog .sis-result-header-subtitle[b-bfpid2p1kk] {
    font-size: 14px;
}

.sis-result-header--leading .sis-result-header-subtitle[b-bfpid2p1kk] {
    font-size: 14px;
}

/* CartResultMobile_v2 — same success dialog as CartResult_v2, narrower breakpoint only. */
@media (max-width: 959.98px) {
    .sis-result-header--dialog[b-bfpid2p1kk] {
        gap: 8px;
    }

    .sis-result-header--dialog .sis-result-header-text[b-bfpid2p1kk] {
        gap: 8px;
    }

    .sis-result-header--dialog .sis-result-header-title[b-bfpid2p1kk] {
        font-size: 20px;
    }

    .sis-result-header--dialog .sis-result-header-subtitle[b-bfpid2p1kk] {
        font-size: 13px;
    }
}
/* /Components/Shared/SisKit/SisResultIcon.razor.rz.scp.css */
.sis-result-icon[b-ymj0h8ab1o] {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Every board icon is exactly half its circle's diameter (24/48, 28/56, 26/52, 22/44). */
.sis-result-icon svg[b-ymj0h8ab1o] {
    width: 50%;
    height: 50%;
}

.sis-result-icon--small[b-ymj0h8ab1o] {
    width: 44px;
    height: 44px;
}

.sis-result-icon--medium[b-ymj0h8ab1o] {
    width: 48px;
    height: 48px;
}

.sis-result-icon--large[b-ymj0h8ab1o] {
    width: 56px;
    height: 56px;
}

.sis-result-icon--tone-success[b-ymj0h8ab1o] {
    background: var(--sis-success-bg);
    color: var(--sis-success-icon);
}

/* TOKEN-REQUEST: --sis-result-icon-info-fg #2F6DA8 (CartResultStates_v2/CartResult_v2 info icon fg; distinct from
   the existing --sis-info-fg #1F5A8C, which is used for info pill/callout text elsewhere). */
.sis-result-icon--tone-info[b-ymj0h8ab1o] {
    background: var(--sis-info-bg);
    color: var(--sis-result-icon-info-fg, #2F6DA8);
}

/* TOKEN-REQUEST: --sis-result-icon-warning-fg #9A5B00 (CartResultStates_v2 warning icon fg; distinct from the
   existing --sis-warning-fg #7A4A00, used for warning pill text elsewhere). */
.sis-result-icon--tone-warning[b-ymj0h8ab1o] {
    background: var(--sis-warning-bg);
    color: var(--sis-result-icon-warning-fg, #9A5B00);
}

.sis-result-icon--tone-danger[b-ymj0h8ab1o] {
    background: var(--sis-danger-bg);
    color: var(--sis-danger);
}

.sis-result-icon--tone-neutral[b-ymj0h8ab1o] {
    background: var(--sis-neutral-bg);
    color: var(--sis-neutral-fg);
}

/* CartResultMobile_v2 — the Large circle narrows to 52. */
@media (max-width: 959.98px) {
    .sis-result-icon--large[b-ymj0h8ab1o] {
        width: 52px;
        height: 52px;
    }
}
/* /Components/Shared/SisKit/SisSearchField.razor.rz.scp.css */
/* TOKEN-REQUEST: --sis-icon-muted #4F6B75 — search icon stroke + clear-button glyph on Search_v2/SearchMobile_v2/
   Detail_v2's compact field, also reused verbatim by PaymentUi/TermCard's date/amount-label text. Worth promoting
   to sis-tokens.css since it recurs outside this component.
   TOKEN-REQUEST: --sis-placeholder #757575 — the boards don't style placeholder text explicitly, so what they show
   is each browser's own default placeholder gray; matching that literal value (not a design-system muted token)
   is what makes SisSearchField's placeholder pixel-match the board crops. */
.sis-search-field[b-my13luiq1w] {
    --field-icon-color: var(--sis-icon-muted);
    --field-placeholder-color: var(--sis-placeholder);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.sis-search-field-box[b-my13luiq1w] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border-field);
    color: var(--sis-text);
    transition: border-color var(--sis-duration) var(--sis-ease), box-shadow var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease);
}

.sis-search-field-box:hover[b-my13luiq1w] {
    border-color: var(--sis-focus-color);
}

.sis-search-field-box:focus-within[b-my13luiq1w] {
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
}

/* Search_v2's hero field: a permanent 1.5px accent border + ring, not just on focus (box-sizing: border-box keeps
   the 48px outer height). Focus still needs its own visible delta on top of that resting look, or a focused
   emphasized field would look identical to a resting one — the outline below supplies it. */
.sis-search-field-box[data-emphasized="true"][b-my13luiq1w] {
    border-width: 1.5px;
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
}

.sis-search-field-box[data-emphasized="true"]:focus-within[b-my13luiq1w] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-search-field-box:has(input:disabled)[b-my13luiq1w] {
    border-color: var(--sis-border);
    background: var(--sis-surface-subtle);
    box-shadow: none;
    outline: none;
}

[data-slot="icon"][b-my13luiq1w] {
    flex-shrink: 0;
    color: var(--field-icon-color);
}

[data-slot="label"][b-my13luiq1w] {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

/* Suppress the browser's own type=search clear-x (WebKit/Blink draws one once the field has a value) — SisSearchField
   draws its own [data-slot="clear"] and the two would otherwise render side by side. */
[data-slot="input"][b-my13luiq1w]::-webkit-search-cancel-button,
[data-slot="input"][b-my13luiq1w]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

[data-slot="input"][b-my13luiq1w] {
    flex-grow: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    color: var(--sis-text);
    touch-action: manipulation;
}

[data-slot="input"][b-my13luiq1w]::placeholder {
    color: var(--field-placeholder-color);
    font-variant-numeric: normal;
}

[data-slot="input"]:disabled[b-my13luiq1w] {
    color: var(--sis-text-disabled);
    cursor: not-allowed;
}

/* [data-slot="clear"] is always in the DOM when ShowClearButton is set — toggling it per keystroke would need a
   round trip. CSS alone shows/hides it: hidden while the input is empty (:placeholder-shown) or disabled. */
[data-slot="clear"][b-my13luiq1w] {
    position: relative;
    flex-shrink: 0;
    border: none;
    background: var(--sis-neutral-bg);
    color: var(--field-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease);
}

[data-slot="input"]:placeholder-shown ~ [data-slot="clear"][b-my13luiq1w],
[data-slot="input"]:disabled ~ [data-slot="clear"][b-my13luiq1w] {
    display: none;
}

/* Invisible hit-area pad (see SisFilterChip for the same technique): keeps the drawn clear button at its board
   size while still meeting the ≥44px touch target rule below 960px. */
[data-slot="clear"][b-my13luiq1w]::before {
    content: "";
    position: absolute;
    inset: 0;
}

[data-slot="clear"]:hover[b-my13luiq1w] { background: var(--sis-surface-hover); color: var(--sis-text); }
[data-slot="clear"]:active[b-my13luiq1w] { transform: translateY(1px); }
[data-slot="clear"]:focus-visible[b-my13luiq1w] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

[data-slot="submit"][b-my13luiq1w] {
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

[data-slot="submit"]:hover:not(:disabled)[b-my13luiq1w] { background: var(--sis-primary-hover); }
[data-slot="submit"]:active:not(:disabled)[b-my13luiq1w] { background: var(--sis-primary-active); transform: translateY(1px); }
[data-slot="submit"]:focus-visible[b-my13luiq1w] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }
[data-slot="submit"]:disabled[b-my13luiq1w] {
    background: var(--sis-surface);
    border-color: var(--sis-border);
    color: var(--sis-text-disabled);
    cursor: not-allowed;
}

/* Md — Search_v2 desktop hero: 48/12, gap 10, padding 0 12 0 14, submit button alongside. */
.sis-search-field[data-size="md"] .sis-search-field-box[b-my13luiq1w] { height: 48px; border-radius: var(--sis-radius-md); padding: 0 12px 0 14px; }
.sis-search-field[data-size="md"] [data-slot="input"][b-my13luiq1w] { font-size: 15px; }
.sis-search-field[data-size="md"] [data-slot="clear"][b-my13luiq1w] { width: 32px; height: 32px; border-radius: var(--sis-radius-xs); }
.sis-search-field[data-size="md"] [data-slot="clear"][b-my13luiq1w]::before { inset: -6px; }
.sis-search-field[data-size="md"] [data-slot="submit"][b-my13luiq1w] { height: 48px; padding: 0 22px; border-radius: var(--sis-radius-md); font-size: 15px; }

/* Sm — SearchMobile_v2: 44/10, gap 8, padding 0 12, 16px input to avoid iOS zoom-on-focus, no submit/clear drawn on the board. */
.sis-search-field[data-size="sm"] .sis-search-field-box[b-my13luiq1w] { height: 44px; border-radius: var(--sis-radius-sm); padding: 0 12px; gap: 8px; }
.sis-search-field[data-size="sm"] [data-slot="input"][b-my13luiq1w] { font-size: 16px; }
.sis-search-field[data-size="sm"] [data-slot="clear"][b-my13luiq1w] { width: 28px; height: 28px; border-radius: var(--sis-radius-xs); }
.sis-search-field[data-size="sm"] [data-slot="clear"][b-my13luiq1w]::before { inset: -8px; }
.sis-search-field[data-size="sm"] [data-slot="submit"][b-my13luiq1w] { height: 44px; padding: 0 18px; border-radius: var(--sis-radius-sm); font-size: 14px; }

/* Xs — Detail_v2's compact inline "ค้นหาตอนเรียน" section search: 40/10, gap 8, fixed 240px so it sits beside the
   "ซ่อนตอนที่เต็ม" switch in a header row instead of growing to fill it. Callers can still widen via Class. */
.sis-search-field[data-size="xs"] .sis-search-field-box[b-my13luiq1w] { height: 40px; border-radius: var(--sis-radius-sm); padding: 0 12px; gap: 8px; flex: 0 1 240px; }
.sis-search-field[data-size="xs"] [data-slot="input"][b-my13luiq1w] { font-size: 14px; }
.sis-search-field[data-size="xs"] [data-slot="clear"][b-my13luiq1w] { width: 26px; height: 26px; border-radius: var(--sis-radius-xs); }
.sis-search-field[data-size="xs"] [data-slot="clear"][b-my13luiq1w]::before { inset: -9px; }
.sis-search-field[data-size="xs"] [data-slot="submit"][b-my13luiq1w] { height: 40px; padding: 0 16px; border-radius: var(--sis-radius-sm); font-size: 13px; }

@media (max-width: 959.98px) {
    .sis-search-field-box[b-my13luiq1w],
    [data-slot="submit"][b-my13luiq1w] { min-height: 44px; }
}
/* /Components/Shared/SisKit/SisSectionRow.razor.rz.scp.css */
/* Section row ("เลือกตอนเรียน" card, Detail_v2 desktop / DetailMobile_v2 mobile). The header row is one shared
   flex-wrap container at both breakpoints; only its children's `order`/visibility change, so the single Star
   instance can move from "trailing, after the group text" (desktop) to "right after the title" (mobile) without
   ever being duplicated. Schedule/group/badges text are rendered twice (desktop table + mobile lines) because
   they are plain text/pills, which the brief's structure rule allows. */

.sis-section-row[b-3tyzei4veh] {
    box-sizing: border-box;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* The app shell (MudBlazor) sets body line-height:1.43 and letter-spacing:.01071em; the boards use browser
       defaults. Reset both on the root so every inherited text slot below measures like the board. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-section-row.is-selected[b-3tyzei4veh] {
    border: 2px solid var(--sis-primary);
    padding: 17px 21px;
}

.sis-section-row.is-full[b-3tyzei4veh] {
    /* Detail_v2's card(muted:true) shade matches the existing --sis-surface-muted token exactly. */
    background: var(--sis-surface-muted);
}

[data-slot="header"][b-3tyzei4veh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* line-height: normal on plain-text slots below -- keeps the row's height correct regardless of any numeric
   line-height the host page sets on body/html (the isolated board has none; see SisCourseRow.razor.css). */

[data-slot="title"][b-3tyzei4veh] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: normal;
    color: var(--sis-text);
}

[data-slot="seat-mobile"][b-3tyzei4veh] {
    display: none;
}

/* Target learners: its own full-width line under the header (never in the header flex row, so a long Thai remark
   cannot push itself right or fight the star/seat pill). Wraps anywhere -- Thai has no spaces. */
[data-slot="group-desktop"][b-3tyzei4veh] {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    white-space: normal;
}

[data-slot="group-label"][b-3tyzei4veh] {
    color: var(--sis-text-secondary);
}

[data-slot="star"][b-3tyzei4veh] {
    flex-shrink: 0;
    /* Trailing edge even when there is no group text to carry the auto margin. */
    margin-left: auto;
}

[data-slot="schedule-desktop"][b-3tyzei4veh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

[data-slot="schedule-desktop"] th[b-3tyzei4veh] {
    text-align: left;
    color: var(--sis-text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    padding: 6px 0;
}

[data-slot="schedule-desktop"] td[b-3tyzei4veh] {
    padding: 8px 0;
    border-top: 1px solid var(--sis-divider);
    line-height: normal;
    color: var(--sis-text);
}

[data-slot="daytime-cell"][b-3tyzei4veh] {
    font-weight: 500;
}

[data-slot="schedule-mobile"][b-3tyzei4veh],
[data-slot="line-mobile"][b-3tyzei4veh],
[data-slot="badges-mobile"][b-3tyzei4veh] {
    display: none;
}

[data-slot="footer"][b-3tyzei4veh] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

[data-slot="exams"][b-3tyzei4veh] {
    display: flex;
    align-items: center;
    gap: 16px;
}

[data-slot="full-message"][b-3tyzei4veh] {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    /* Fable review ruling: use the existing warning tone rather than a new token for this shade. */
    color: var(--sis-warning-fg);
}

[data-slot="action"][b-3tyzei4veh] {
    margin-left: auto;
}

/* Mobile: header collapses to [title][star] left, [seat] right; schedule/group become text lines; the footer
   drops exams and stretches Action full width (or, when Full, stays empty -- line-mobile already carries the
   full message). */
@media (max-width: 959.98px) {
    .sis-section-row[b-3tyzei4veh] {
        padding: 14px;
        gap: 8px;
    }

    .sis-section-row.is-selected[b-3tyzei4veh] {
        padding: 13px;
    }

    [data-slot="header"][b-3tyzei4veh] {
        gap: 4px;
    }

    [data-slot="title"][b-3tyzei4veh] {
        font-size: 16px;
    }

    [data-slot="seat-desktop"][b-3tyzei4veh],
    [data-slot="badges-header"][b-3tyzei4veh],
    [data-slot="group-desktop"][b-3tyzei4veh] {
        display: none;
    }

    [data-slot="seat-mobile"][b-3tyzei4veh] {
        display: block;
        order: 2;
        margin-left: auto;
    }

    [data-slot="star"][b-3tyzei4veh] {
        order: 1;
        margin-left: 0;
    }

    [data-slot="schedule-desktop"][b-3tyzei4veh] {
        display: none;
    }

    [data-slot="schedule-mobile"][b-3tyzei4veh] {
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
        color: var(--sis-text);
    }

    [data-slot="line-mobile"][b-3tyzei4veh] {
        display: block;
        font-size: 13px;
        line-height: 1.6;
        color: var(--sis-text-secondary);
        min-width: 0;
        overflow-wrap: anywhere;
    }

    [data-slot="badges-mobile"][b-3tyzei4veh] {
        display: block;
    }

    [data-slot="footer"][b-3tyzei4veh] {
        display: block;
    }

    [data-slot="exams"][b-3tyzei4veh],
    [data-slot="full-message"][b-3tyzei4veh] {
        display: none;
    }

    /* flex-direction:column (not `> *{width:100%}`) so the caller's Action content stretches full width: a plain
       child-combinator rule here cannot reach the caller's markup under CSS isolation (Action is authored by a
       different component, so it never carries this component's scope attribute -- only `::deep` or a structural
       flex/grid default, as used here, applies to it). */
    [data-slot="action"][b-3tyzei4veh] {
        margin-left: 0;
        display: flex;
        flex-direction: column;
    }

    /* No-schedule state (Room is null): the placeholder sentence reads muted/regular, not the bold day/time look. */
    [data-slot="schedule-mobile"].no-schedule[b-3tyzei4veh] {
        font-weight: 400;
        color: var(--sis-text-secondary);
    }
}
/* /Components/Shared/SisKit/SisSegmented.razor.rz.scp.css */
/*
 * SisSegmented -- radio group styled as a segmented control.
 * Board: DetailDialogCredit_v2 / DetailMobileSheetCredit_v2 "Credit | Audit | NonCredit"
 * (track #E3ECEF pad 4 radius 12; active segment white radius 9 + shadow); DetailActions_v2 (40px desktop
 * card, 36px mobile sticky bar -- Dense).
 *
 * Uses var(--sis-radius-compact, 9px): the active-segment pill radius on every board is 9px, between the
 * existing --sis-radius-sm (10px) and no smaller scale step. Approved as a shared token name (owner adds it
 * to sis-tokens.css); the 9px fallback keeps this correct either way.
 */
.sis-segmented[b-j1jq08gu42] {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    /* MudBlazor's body rule sets line-height:1.43/letter-spacing:.01071em and inherits into every descendant;
       the boards render at the browser's own defaults. Reset here, at the root, once. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-segmented legend[b-j1jq08gu42] {
    padding: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
    margin: 0 0 8px;
}

.sis-segmented--dense legend[b-j1jq08gu42] {
    font-size: 12px;
    margin: 0 0 6px;
}

@media (max-width: 959.98px) {
    .sis-segmented:not(.sis-segmented--dense) legend[b-j1jq08gu42] {
        font-size: 12px;
        margin: 0 0 6px;
    }
}

.sis-segmented-track[b-j1jq08gu42] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--sis-surface-track);
    border-radius: var(--sis-radius-md);
    box-sizing: border-box;
}

.sis-segmented-option[b-j1jq08gu42] {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Hit-area extension: the track's own 4px padding gives just enough room to reach a 44px touch target on a
   36/40px segment without the pseudo-element spilling outside the track's outer edge. */
@media (max-width: 959.98px) {
    .sis-segmented-option[b-j1jq08gu42]::before {
        content: "";
        position: absolute;
        inset: -4px;
    }
}

.sis-segmented-option span[data-slot="segment"][b-j1jq08gu42] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 0;
    border-radius: var(--sis-radius-compact, 9px);
    font-size: 14px;
    font-weight: 400;
    color: var(--sis-text-label);
    text-align: center;
    padding: 0 8px;
    box-sizing: border-box;
    transition: background-color var(--sis-duration) var(--sis-ease),
                color var(--sis-duration) var(--sis-ease),
                box-shadow var(--sis-duration) var(--sis-ease),
                transform var(--sis-duration) var(--sis-ease);
}

/* Ellipsis must live on an inner block: a flex container (the span above, centering the pill) does not apply
   text-overflow to its own text reliably, and a flex child needs min-width:0 to shrink below its content size
   before overflow/ellipsis can ever trigger. */
.sis-segmented-option span[data-slot="segment-text"][b-j1jq08gu42] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sis-segmented--dense span[data-slot="segment"][b-j1jq08gu42] {
    height: 36px;
    font-size: 14px;
}

@media (hover: hover) {
    .sis-segmented-option:not(.is-disabled) input:not(:checked):hover + span[data-slot="segment"][b-j1jq08gu42] {
        background: var(--sis-surface-hover);
    }
}

.sis-segmented-option:not(.is-disabled) input:not(:checked):active + span[data-slot="segment"][b-j1jq08gu42] {
    transform: translateY(1px);
}

.sis-segmented-option input:checked + span[data-slot="segment"][b-j1jq08gu42] {
    background: var(--sis-surface);
    color: var(--sis-text);
    font-weight: 600;
    box-shadow: var(--sis-shadow-raised);
}

.sis-segmented-option input:focus-visible + span[data-slot="segment"][b-j1jq08gu42] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-segmented-option.is-disabled[b-j1jq08gu42] {
    cursor: not-allowed;
}

.sis-segmented-option.is-disabled span[data-slot="segment"][b-j1jq08gu42] {
    color: var(--sis-text-disabled);
}

@media (prefers-reduced-motion: reduce) {
    .sis-segmented-option span[data-slot="segment"][b-j1jq08gu42] {
        transition: none;
    }
}
/* /Components/Shared/SisKit/SisSelectField.razor.rz.scp.css */
/* Same field box as SisSearchField (.sis-search-field-box): border, radius, hover/focus ring and size steps. The list
   under it is a kit popover (surface, border, radius, --sis-shadow-popover). */
.sis-select-field[b-u6xjs26tjj] {
    position: relative;
    display: flex;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.sis-select-field-box[b-u6xjs26tjj] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border-field);
    color: var(--sis-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--sis-duration) var(--sis-ease), box-shadow var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease);
}

@media (hover: hover) {
    .sis-select-field-box:hover[b-u6xjs26tjj] {
        border-color: var(--sis-focus-color);
    }
}

/* Open, or keyboard-focused: the search box's own focus look (teal border + soft ring) replaces the outline. */
.sis-select-field-box[aria-expanded="true"][b-u6xjs26tjj],
.sis-select-field-box:focus-visible[b-u6xjs26tjj] {
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
    outline: none;
}

.sis-select-field-box:disabled[b-u6xjs26tjj] {
    border-color: var(--sis-border);
    background: var(--sis-surface-subtle);
    color: var(--sis-text-disabled);
    cursor: not-allowed;
}

.sis-select-field-icon[b-u6xjs26tjj] {
    flex-shrink: 0;
    display: flex;
    color: var(--sis-icon-muted);
}

.sis-select-field-label[b-u6xjs26tjj] {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.sis-select-field-value[b-u6xjs26tjj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sis-select-field-chevron[b-u6xjs26tjj] {
    flex-shrink: 0;
    color: var(--sis-icon-muted);
    transition: transform var(--sis-duration) var(--sis-ease);
}

.sis-select-field-box[aria-expanded="true"] .sis-select-field-chevron[b-u6xjs26tjj] {
    transform: rotate(180deg);
}

/* Transparent layer under the list: a click anywhere outside closes it. */
.sis-select-field-backdrop[b-u6xjs26tjj] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.sis-select-field-list[b-u6xjs26tjj] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 41;
    box-sizing: border-box;
    max-height: 280px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    box-shadow: var(--sis-shadow-popover);
    transform-origin: top center;
    animation: sis-select-in-b-u6xjs26tjj var(--sis-duration) var(--sis-ease) both;
}

.sis-select-field-option[b-u6xjs26tjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: var(--sis-radius-sm);
    font-size: 15px;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.sis-select-field-option-text[b-u6xjs26tjj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keyboard highlight and mouse hover share one look (hover is CSS-only: no server round trip per pointer move). */
.sis-select-field-option[data-active="true"][b-u6xjs26tjj] {
    background: var(--sis-surface-hover);
}

@media (hover: hover) {
    .sis-select-field-option:hover[b-u6xjs26tjj] {
        background: var(--sis-surface-hover);
    }
}

.sis-select-field-option[aria-selected="true"][b-u6xjs26tjj] {
    color: var(--sis-primary);
    font-weight: 600;
}

.sis-select-field-check[b-u6xjs26tjj] {
    flex-shrink: 0;
    color: var(--sis-primary);
}

@keyframes sis-select-in-b-u6xjs26tjj {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-select-field-list[b-u6xjs26tjj] {
        animation: none;
    }

    .sis-select-field-chevron[b-u6xjs26tjj] {
        transition: none;
    }
}

/* Md — the search box's 48px step (Search_v2). */
.sis-select-field[data-size="md"] .sis-select-field-box[b-u6xjs26tjj] {
    height: 48px;
    border-radius: var(--sis-radius-md);
    padding: 0 12px 0 14px;
    font-size: 15px;
}

/* Sm — the search box's 44px step (SearchMobile_v2); 16px text so iOS never zooms on focus. */
.sis-select-field[data-size="sm"] .sis-select-field-box[b-u6xjs26tjj] {
    height: 44px;
    border-radius: var(--sis-radius-sm);
    padding: 0 12px;
    gap: 8px;
    font-size: 16px;
}
/* /Components/Shared/SisKit/SisStarToggle.razor.rz.scp.css */
/*
 * SisStarToggle -- icon-only favorite star button.
 * Board: Detail_v2 (Md 40px, transparent), Favorites_v2 (Lg 44px, Tinted #FFF8DD), SearchFavTab_v2
 * (Sm 36px, transparent, 15px icon).
 *
 * Uses var(--sis-star-wash-hover, ...) / var(--sis-star-wash-active, ...) -- a subtle hover/active darken wash
 * for this ghost icon button (no dedicated board state; boards are static), --sis-primary's RGB so it reads
 * consistently over both the transparent and --sis-star-bg-tinted backgrounds. Approved as shared token names
 * (owner adds them to sis-tokens.css); the rgba() fallbacks keep this correct either way.
 */
.sis-star-toggle[b-332s5at0sw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding: 0;
    /* No visible text here (icon-only), but reset for consistency with the other kit roots: MudBlazor's body
       rule sets line-height:1.43/letter-spacing:.01071em and inherits into every descendant. */
    line-height: normal;
    letter-spacing: normal;
    transition: box-shadow var(--sis-duration) var(--sis-ease),
                background-color var(--sis-duration) var(--sis-ease),
                transform var(--sis-duration) var(--sis-ease),
                opacity var(--sis-duration) var(--sis-ease);
}

.sis-star-toggle svg[b-332s5at0sw] {
    fill: none;
    stroke: var(--sis-text-muted);
    transition: transform var(--sis-duration) var(--sis-ease);
}

.sis-star-toggle.is-on svg[b-332s5at0sw] {
    fill: var(--sis-star-fill);
    stroke: var(--sis-star-stroke);
}

.sis-star-toggle--sm[b-332s5at0sw] { width: 36px; height: 36px; border-radius: var(--sis-radius-xs); }
.sis-star-toggle--md[b-332s5at0sw] { width: 40px; height: 40px; border-radius: var(--sis-radius-sm); }
.sis-star-toggle--lg[b-332s5at0sw] { width: 44px; height: 44px; border-radius: var(--sis-radius-sm); }

.sis-star-toggle.is-on.is-tinted[b-332s5at0sw] {
    background: var(--sis-star-bg);
}

/* Hit-area extension under 960px for the two smaller sizes (36/40px), matching the board's own 44px size for
   the touch-heavy Favorites_v2 context and CLAUDE.md's >=44px touch-target rule everywhere else. */
@media (max-width: 959.98px) {
    .sis-star-toggle--sm[b-332s5at0sw]::before,
    .sis-star-toggle--md[b-332s5at0sw]::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 46px;
        height: 46px;
        transform: translate(-50%, -50%);
    }
}

@media (hover: hover) {
    .sis-star-toggle:not(:disabled):not([aria-disabled="true"]):hover[b-332s5at0sw] {
        box-shadow: inset 0 0 0 999px var(--sis-star-wash-hover, rgba(45, 80, 91, 0.06));
    }
}

.sis-star-toggle:not(:disabled):not([aria-disabled="true"]):active[b-332s5at0sw] {
    box-shadow: inset 0 0 0 999px var(--sis-star-wash-active, rgba(45, 80, 91, 0.1));
}

.sis-star-toggle:not(:disabled):not([aria-disabled="true"]):active svg[b-332s5at0sw] {
    transform: scale(0.92);
}

.sis-star-toggle:focus-visible[b-332s5at0sw] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-star-toggle[aria-disabled="true"][b-332s5at0sw] {
    cursor: not-allowed;
    opacity: 0.6;
}

.sis-star-toggle:disabled[b-332s5at0sw] {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .sis-star-toggle[b-332s5at0sw],
    .sis-star-toggle svg[b-332s5at0sw] {
        transition: none;
    }
}
/* /Components/Shared/SisKit/SisSteps.razor.rz.scp.css */
/* TOKEN-REQUEST: --sis-fill-faint #D3DDE2 (mobile progress-dot "upcoming" fill; matches the sheet grabber bar
   in spec 4). Referenced below with a literal fallback until the shared token lands in sis-tokens.css. */
.sis-steps[b-691dc5y4q7] {
    display: block;
    /* MudBlazor sets body line-height:1.43 and letter-spacing:.01071em app-wide; the boards assume plain
       browser defaults. Reset both here so this component's line/box metrics match the boards -- inner
       elements keep whatever the board specifies (none of them set their own line-height/letter-spacing). */
    line-height: normal;
    letter-spacing: normal;
    --sis-steps-dot-done: var(--sis-success-icon);
    --sis-steps-dot-current: var(--sis-star-fill);
}

/* Desktop strip (Main_v2 / Enrolled_v2): a connected row of step dots, then the Finished result pushed to the far
   end. Visible by default; hidden below 960px. */
[data-slot='strip'][b-691dc5y4q7] {
    padding: 12px 16px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    row-gap: 8px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    font-size: 14px;
    color: var(--sis-text);
}

[data-slot='list'][b-691dc5y4q7] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    row-gap: 8px;
    min-width: 0;
}

[data-slot='finished'][b-691dc5y4q7] {
    margin-left: auto;
    display: flex;
    min-width: 0;
}

[data-slot='step'][b-691dc5y4q7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

[data-slot='step'][data-state='done'][b-691dc5y4q7] {
    color: var(--sis-text-secondary);
}

[data-slot='step'][data-state='current'][b-691dc5y4q7] {
    font-weight: 600;
}

[data-slot='step'][data-state='upcoming'][b-691dc5y4q7] {
    color: var(--sis-text-muted-strong);
}

[data-slot='dot'][b-691dc5y4q7] {
    /* content-box, not border-box, on purpose: MudBlazor.min.css ships a global "* { box-sizing: border-box }"
       reset, so simply omitting this declaration still leaves every element on the page border-box -- it has to
       be set explicitly to content-box here to opt back out. The board (a bare page, no MudBlazor CSS) never
       declares box-sizing at all, so it gets the browser's real default (content-box), and the "upcoming" state's
       1.5px border (below) adds outside the 24x24 box, making a 27x27 circle -- border-box would carve the
       border out of the 24px box instead and render a visibly smaller (24x24) circle. Verified by measuring
       rendered pixels: with the MudBlazor reset in effect (no override), the circle measured 24x24; with this
       explicit content-box override, it measures 26-27x26-27, matching the board. */
    box-sizing: content-box;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

[data-slot='step'][data-state='done'] [data-slot='dot'][b-691dc5y4q7] {
    background: var(--sis-success-bg);
    color: var(--sis-success-icon);
}

[data-slot='step'][data-state='current'] [data-slot='dot'][b-691dc5y4q7] {
    background: var(--sis-highlight);
    color: var(--sis-text-on-accent);
}

[data-slot='step'][data-state='upcoming'] [data-slot='dot'][b-691dc5y4q7] {
    border: 1.5px solid var(--sis-border-empty);
}

[data-slot='label'][b-691dc5y4q7] {
    overflow-wrap: break-word;
}

[data-slot='connector'][b-691dc5y4q7] {
    flex-shrink: 0;
    width: 28px;
    height: 1px;
    background: var(--sis-border-control);
}

/* Mobile compact card (CartMobile_v2 / EnrolledMobile_v2): "you are here" summary + progress dots. Visible by
   default; hidden at 960px and up (see the desktop rule above -- neither block starts hidden by default). */
[data-slot='compact'][b-691dc5y4q7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    min-width: 0;
}

[data-slot='compact-dot'][b-691dc5y4q7] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--sis-highlight);
    color: var(--sis-text-on-accent);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-slot='compact-dot'][data-state='done'][b-691dc5y4q7] {
    background: var(--sis-success-bg);
    color: var(--sis-success-icon);
}

[data-slot='compact-text'][b-691dc5y4q7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

[data-slot='compact-status'][b-691dc5y4q7] {
    font-size: 12px;
    color: var(--sis-text-secondary);
    font-variant-numeric: tabular-nums;
}

[data-slot='compact-label'][b-691dc5y4q7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-slot='compact-progress'][b-691dc5y4q7] {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    gap: 4px;
}

/* Takes the progress dots' place once every step is done and wraps under the text when the row is too narrow (only
   then: an unfinished card keeps truncating a long label instead of pushing the dots to a second line). */
[data-slot='compact']:has(> [data-slot='compact-finished'])[b-691dc5y4q7] {
    flex-wrap: wrap;
}

[data-slot='compact-finished'][b-691dc5y4q7] {
    margin-left: auto;
    display: flex;
    min-width: 0;
}

[data-slot='compact-progress-dot'][b-691dc5y4q7] {
    width: 18px;
    height: 4px;
    border-radius: 2px;
    background: var(--sis-fill-faint, #D3DDE2);
}

[data-slot='compact-progress-dot'][data-state='done'][b-691dc5y4q7] {
    background: var(--sis-steps-dot-done);
}

[data-slot='compact-progress-dot'][data-state='current'][b-691dc5y4q7] {
    background: var(--sis-steps-dot-current);
}

@media (max-width: 959.98px) {
    [data-slot='strip'][b-691dc5y4q7] {
        display: none;
    }
}

@media (min-width: 960px) {
    [data-slot='compact'][b-691dc5y4q7] {
        display: none;
    }
}
/* /Components/Shared/SisKit/SisSuccessLink.razor.rz.scp.css */
.sis-success-link[b-dolhxkswmi] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 0 10px 0 12px;
    border-radius: var(--sis-radius-pill);
    background: var(--sis-success-bg);
    color: var(--sis-success-fg);
    font-size: 14px;
    font-weight: 600;
    /* MudBlazor's body line-height/letter-spacing would change the pill's height and text width. */
    line-height: normal;
    letter-spacing: normal;
    white-space: nowrap;
    text-decoration: none;
    touch-action: manipulation;
}

.sis-success-link:hover [data-slot="label"][b-dolhxkswmi] {
    text-decoration: underline;
}

.sis-success-link:active[b-dolhxkswmi] {
    transform: translateY(1px);
}

.sis-success-link:focus-visible[b-dolhxkswmi] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-success-link [data-slot="icon"][b-dolhxkswmi] {
    flex-shrink: 0;
    color: var(--sis-success-icon);
}

.sis-success-link [data-slot="chevron"][b-dolhxkswmi] {
    flex-shrink: 0;
}

.sis-success-link [data-slot="label"][b-dolhxkswmi] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 959.98px) {
    .sis-success-link[b-dolhxkswmi] {
        min-height: 44px;
    }
}
/* /Components/Shared/SisKit/SisSummaryCard.razor.rz.scp.css */
.sis-summary-card-layout[b-lzccjj1ii5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    line-height: normal;
    letter-spacing: normal;
}

.sis-summary-card-layout [data-slot="title"][b-lzccjj1ii5] {
    margin: 0;
    color: var(--sis-text);
    font-size: 16px;
    font-weight: 600;
    text-wrap: balance;
}

.sis-summary-card-layout [data-slot="rows"][b-lzccjj1ii5] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

.sis-summary-card-layout [data-slot="footer"][b-lzccjj1ii5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /Components/Shared/SisKit/SisSummaryRow.razor.rz.scp.css */
.sis-summary-row[b-ql5mij33eo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    color: var(--sis-text);
    line-height: normal;
    letter-spacing: normal;
}

.sis-summary-row [data-slot="term"][b-ql5mij33eo] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--sis-text-secondary);
    font-weight: 400;
}

.sis-summary-row [data-slot="value"][b-ql5mij33eo] {
    /* margin-left:auto (not justify-content:space-between on the row) so a value that wraps to its own line
       when the row also wraps (flex-wrap) still lands at the right edge instead of the start. */
    margin: 0 0 0 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--sis-text);
    font-weight: 600;
    text-align: right;
}

.sis-summary-row[data-emphasis="true"] [data-slot="term"][b-ql5mij33eo] {
    color: var(--sis-text);
    font-weight: 600;
}

.sis-summary-row[data-emphasis="true"] [data-slot="value"][b-ql5mij33eo] {
    font-weight: 700;
}
/* /Components/Shared/SisKit/SisSwitch.razor.rz.scp.css */
.sis-switch[b-ql2bwy6bza] {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--sis-radius-pill);
    border: 1px solid var(--sis-border-control);
    background: var(--sis-surface);
    color: var(--sis-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
}

/* SearchFavTab_v2/SearchFavTabMobile_v2's plain-text instance: smaller and a touch lighter than Detail_v2's
   icon+label one. */
.sis-switch[data-compact="true"][b-ql2bwy6bza] { height: 36px; font-size: 13px; font-weight: 400; }

@media (max-width: 959.98px) {
    .sis-switch[data-compact="true"][b-ql2bwy6bza] { font-size: 12px; }
}

/* Invisible hit-area pad (see SisFilterChip for the same technique): keeps the drawn pill at its board size while
   still meeting the ≥44px touch target rule below 960px — SearchFavTabMobile_v2 draws this at the same 36/12 as
   desktop, it doesn't grow on mobile. */
.sis-switch[b-ql2bwy6bza]::before {
    content: "";
    position: absolute;
    inset: 0;
}

.sis-switch:hover:not(:has(input:disabled))[b-ql2bwy6bza] { background: var(--sis-surface-hover); }
.sis-switch:active:not(:has(input:disabled))[b-ql2bwy6bza] { transform: translateY(1px); }
.sis-switch:has(input:focus-visible)[b-ql2bwy6bza] { outline: 2px solid var(--sis-focus-color); outline-offset: 2px; }

.sis-switch[data-checked="true"][b-ql2bwy6bza] {
    border-color: var(--sis-primary);
    background: var(--sis-surface-selected);
    color: var(--sis-primary);
    font-weight: 600;
}

.sis-switch[data-checked="true"]:hover:not(:has(input:disabled))[b-ql2bwy6bza] { background: var(--sis-surface-track); }

.sis-switch:has(input:disabled)[b-ql2bwy6bza] {
    border-style: dashed;
    background: transparent;
    color: var(--sis-text-disabled);
    cursor: not-allowed;
}

[data-slot="icon"][b-ql2bwy6bza] { flex-shrink: 0; display: flex; }
[data-slot="label"][b-ql2bwy6bza] { white-space: nowrap; }

@media (max-width: 959.98px) {
    .sis-switch[b-ql2bwy6bza]::before { inset: -3px; }
    .sis-switch[data-compact="true"][b-ql2bwy6bza]::before { inset: -5px; }
}
/* /Components/Shared/SisKit/SisTab.razor.rz.scp.css */
.sis-tab[b-ntcna9v993] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border: none;
    background: none;
    font-family: inherit;
    text-decoration: none;
    color: var(--sis-text-secondary);
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
    /* Boards use plain browser defaults; reset MudBlazor's body-level line-height:1.43/letter-spacing:.01071em
       (each SisTab is its own component root, not just a descendant of SisTabs' own reset). */
    line-height: normal;
    letter-spacing: normal;
    transition: color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease),
        background-color var(--sis-duration) var(--sis-ease), box-shadow var(--sis-duration) var(--sis-ease);
}

.sis-tab [data-slot="label"][b-ntcna9v993] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sis-tab-icon[b-ntcna9v993] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sis-tab:focus-visible[b-ntcna9v993] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sis-tab:active[b-ntcna9v993] {
    color: var(--sis-primary-active);
}

.sis-tab-count[b-ntcna9v993] {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--sis-radius-pill);
    background: var(--sis-surface-count);
    color: var(--sis-text-on-count);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--sis-duration) var(--sis-ease), color var(--sis-duration) var(--sis-ease);
}

/* Underline (Main/Enrolled 50px, Search 44px via --sis-tab-height) — also Auto's form 960px and up. */
.sis-tabs[data-variant="underline"] .sis-tab[b-ntcna9v993],
.sis-tabs[data-variant="auto"] .sis-tab[b-ntcna9v993] {
    height: var(--sis-tab-height, 50px);
    padding: 0 var(--sis-tab-padding-x, 12px);
    border-bottom: 2.5px solid transparent;
    font-size: 15px;
}

.sis-tabs[data-variant="underline"] .sis-tab[aria-selected="true"][b-ntcna9v993],
.sis-tabs[data-variant="auto"] .sis-tab[aria-selected="true"][b-ntcna9v993] {
    border-bottom-color: var(--sis-primary);
    color: var(--sis-primary);
    font-weight: 600;
}

.sis-tabs[data-variant="underline"] .sis-tab[aria-selected="true"] .sis-tab-count[b-ntcna9v993] {
    background: var(--sis-primary);
    color: var(--sis-text-on-dark);
}

/* Auto is underline only from 960px; below it the count is plain "(N)" text (see the max-width block). */
@media (min-width: 960px) {
    .sis-tabs[data-variant="auto"] .sis-tab[aria-selected="true"] .sis-tab-count[b-ntcna9v993] {
        background: var(--sis-primary);
        color: var(--sis-text-on-dark);
    }
}

/* Inset (not outset) so a card's overflow:hidden (Main_v2/Enrolled_v2) never clips the ring on the first/last
   tab. Auto's <960px Segmented form goes back to the outset default — see the max-width block below. */
.sis-tabs[data-variant="underline"] .sis-tab:focus-visible[b-ntcna9v993],
.sis-tabs[data-variant="auto"] .sis-tab:focus-visible[b-ntcna9v993] {
    outline-offset: -2px;
}

@media (hover: hover) {
    .sis-tabs[data-variant="underline"] .sis-tab:hover[b-ntcna9v993],
    .sis-tabs[data-variant="auto"] .sis-tab:hover[b-ntcna9v993] {
        color: var(--sis-primary-hover);
    }
}

/* Segmented (mobile track) — count reads as plain "(N)" text next to the label, matching SearchMobile_v2 (no
   pill in that context). Also Auto's form below 960px (justify-content:center is Segmented-only: Auto must stay
   left-aligned, like Underline, at 960px and up — see the max-width block below for Auto's own copy). */
.sis-tabs[data-variant="segmented"] .sis-tab[b-ntcna9v993] {
    height: 40px;
    justify-content: center;
    gap: 6px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--sis-text-label);
}

.sis-tabs[data-variant="segmented"] .sis-tab[aria-selected="true"][b-ntcna9v993] {
    background: var(--sis-surface);
    color: var(--sis-primary);
    font-weight: 600;
    box-shadow: var(--sis-shadow-raised);
}

@media (hover: hover) {
    .sis-tabs[data-variant="segmented"] .sis-tab:not([aria-selected="true"]):hover[b-ntcna9v993] {
        color: var(--sis-primary);
        background: var(--sis-surface-hover);
    }
}

.sis-tabs[data-variant="segmented"] .sis-tab-count[b-ntcna9v993] {
    background: transparent;
    color: inherit;
    min-width: 0;
    height: auto;
    padding: 0;
    margin-left: -2px;
    font-size: inherit;
    font-weight: inherit;
}

.sis-tabs[data-variant="segmented"] .sis-tab-count[b-ntcna9v993]::before {
    content: "(";
}

.sis-tabs[data-variant="segmented"] .sis-tab-count[b-ntcna9v993]::after {
    content: ")";
}

@media (max-width: 959.98px) {
    .sis-tabs[data-variant="auto"] .sis-tab[b-ntcna9v993] {
        height: 40px;
        justify-content: center;
        gap: 6px;
        border-bottom: none;
        border-radius: 9px;
        font-size: 14px;
        color: var(--sis-text-label);
    }

    .sis-tabs[data-variant="auto"] .sis-tab[aria-selected="true"][b-ntcna9v993] {
        background: var(--sis-surface);
        color: var(--sis-primary);
        font-weight: 600;
        box-shadow: var(--sis-shadow-raised);
    }

    /* Back to the outset default below 960px — Segmented tabs aren't inside an overflow:hidden card. */
    .sis-tabs[data-variant="auto"] .sis-tab:focus-visible[b-ntcna9v993] {
        outline-offset: 2px;
    }

    .sis-tabs[data-variant="auto"] .sis-tab-count[b-ntcna9v993] {
        background: transparent;
        color: inherit;
        min-width: 0;
        height: auto;
        padding: 0;
        margin-left: -2px;
        font-size: inherit;
        font-weight: inherit;
    }

    .sis-tabs[data-variant="auto"] .sis-tab-count[b-ntcna9v993]::before {
        content: "(";
    }

    .sis-tabs[data-variant="auto"] .sis-tab-count[b-ntcna9v993]::after {
        content: ")";
    }

    /* Board keeps the visual box at 40px (track 48px); meet the >=44px touch target with a hit-area extension
       instead of growing the box — ::after is unclipped by Segmented's own overflow (none) or its ancestors. */
    .sis-tabs[data-variant="segmented"] .sis-tab[b-ntcna9v993]::after,
    .sis-tabs[data-variant="auto"] .sis-tab[b-ntcna9v993]::after {
        content: "";
        position: absolute;
        inset: -3px 0;
    }
}

@media (max-width: 959.98px) and (hover: hover) {
    .sis-tabs[data-variant="auto"] .sis-tab:not([aria-selected="true"]):hover[b-ntcna9v993] {
        color: var(--sis-primary);
        background: var(--sis-surface-hover);
    }
}
/* /Components/Shared/SisKit/SisTabs.razor.rz.scp.css */
.sis-tabs[b-866280c0g0] {
    box-sizing: border-box;
    display: flex;
    /* Boards use plain browser defaults; reset MudBlazor's body-level line-height:1.43/letter-spacing:.01071em. */
    line-height: normal;
    letter-spacing: normal;
}

/* Underline — Main/Enrolled 50px tabs, Search 44px (override with style="--sis-tab-height:44px" on the root).
   Also Auto's default form, 960px and up. */
.sis-tabs[data-variant="underline"][b-866280c0g0],
.sis-tabs[data-variant="auto"][b-866280c0g0] {
    gap: 4px;
    /* Page-level contexts (Search_v2: #D5E3E6) can override with style="--sis-tab-divider:#D5E3E6". */
    border-bottom: 1px solid var(--sis-tab-divider, var(--sis-divider-strong));
}

/* Segmented — mobile track (board SearchMobile_v2, background #E3ECEF). Also Auto's form below 960px. */
.sis-tabs[data-variant="segmented"][b-866280c0g0] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--sis-surface-track);
    border-radius: var(--sis-radius-md);
}

@media (max-width: 959.98px) {
    .sis-tabs[data-variant="auto"][b-866280c0g0] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 4px;
        padding: 4px;
        border-bottom: none;
        background: var(--sis-surface-track);
        border-radius: var(--sis-radius-md);
    }
}
/* /Components/Shared/SisKit/SisTermCard.razor.rz.scp.css */
.sis-term-card[b-v54uudrn87] {
    /* Reset the app shell's inherited Material typography (MudBlazor's body line-height: 1.43 and
       letter-spacing: .01071em) so text metrics match the boards, which were rendered with browser defaults.
       Applies to slotted content too (both properties inherit through Blazor's CSS-isolation scope attributes).
       Elements below that the board gives their own line-height (title, footer) override this. */
    line-height: normal;
    letter-spacing: normal;
    box-sizing: border-box;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--sis-shadow-card);
    color: var(--sis-text);
}

.sis-term-card-head[b-v54uudrn87] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sis-term-card-title[b-v54uudrn87] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sis-text);
}

.sis-term-card-pill[b-v54uudrn87] {
    flex-shrink: 0;
    display: flex;
}

.sis-term-card-date[b-v54uudrn87] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.sis-term-card-date [data-slot="date-icon"][b-v54uudrn87] {
    flex-shrink: 0;
}

.sis-term-card-actions[b-v54uudrn87] {
    /* align-items default (stretch) already fills CTAs to the card's width; no ::deep needed. */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sis-term-card-footer[b-v54uudrn87] {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sis-text-secondary);
}
/* /Components/Shared/SisKit/SisTermList.razor.rz.scp.css */
.sis-term-list[b-1utlva5jtc] {
    /* Reset the app shell's inherited Material typography (see SisTermCard.razor.css). */
    line-height: normal;
    letter-spacing: normal;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-xl);
    overflow: hidden;
}
/* /Components/Shared/SisKit/SisTermRow.razor.rz.scp.css */
.sis-term-row[b-mlng7hbeek] {
    /* Reset the app shell's inherited Material typography (see SisTermCard.razor.css). */
    line-height: normal;
    letter-spacing: normal;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sis-divider);
    color: var(--sis-text);
}

.sis-term-row:last-child[b-mlng7hbeek] {
    border-bottom: none;
}

.sis-term-row-main[b-mlng7hbeek] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sis-term-row-head[b-mlng7hbeek] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sis-term-row-title[b-mlng7hbeek] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
}

.sis-term-row-pill[b-mlng7hbeek] {
    flex-shrink: 0;
    display: flex;
}

.sis-term-row-date[b-mlng7hbeek] {
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.sis-term-row-note[b-mlng7hbeek] {
    font-size: 13px;
    color: var(--sis-warning-text);
}

.sis-term-row-action[b-mlng7hbeek] {
    /* column flex + default align-items:stretch fills the slotted CTA to this wrapper's width, on both
       breakpoints, without ::deep into the caller's (another task's) button markup. */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 959.98px) {
    .sis-term-row[b-mlng7hbeek] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px;
    }

    .sis-term-row-main[b-mlng7hbeek] {
        gap: 8px;
    }

    .sis-term-row-head[b-mlng7hbeek] {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .sis-term-row-title[b-mlng7hbeek] {
        font-size: 15px;
    }

    .sis-term-row-date[b-mlng7hbeek],
    .sis-term-row-note[b-mlng7hbeek] {
        font-size: 12px;
    }

    .sis-term-row-action[b-mlng7hbeek] {
        width: 100%;
    }
}
/* /Components/Shared/SisKit/SisToolbarCard.razor.rz.scp.css */
/* Layout rules for SisToolbarCard; slot classes are documented in the .razor. Children are rendered by the caller,
   so every slot selector goes through ::deep. */
.sis-toolbar-host[b-t4a7ltblf4] {
    container: sis-toolbar / inline-size;
}

.sis-toolbar[b-t4a7ltblf4] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: nowrap;
    line-height: normal;
    letter-spacing: normal;
}

.sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-views {
    min-width: min(320px, 100%);
}

.sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: nowrap;
    margin-inline-start: auto;
}

/* No view switch beside it: the actions take the whole row, term picker at the start and the rest at the end. */
.sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-actions:only-child {
    flex: 1 1 auto;
    margin-inline-start: 0;
    justify-content: space-between;
}

.sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-field {
    width: 220px;
    max-width: 100%;
}

/* Desktop: the download is a compact teal link, not the page's call to action. */
.sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-download {
    color: var(--sis-link);
    flex: 0 0 auto;
    width: auto;
    border-color: transparent;
    background: transparent;
}

/* Mobile and tablet (the app has no sidebar and the card spans the page): term picker, switch, then a full-width
   centered download button, one row each. */
@media (max-width: 959.98px) {
    .sis-toolbar[b-t4a7ltblf4] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-actions {
        display: contents;
    }

    .sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-field {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
    }

    .sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-views {
        flex: 1 1 100%;
        min-width: 0;
    }

    .sis-toolbar[b-t4a7ltblf4]  .sis-toolbar-download {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/SisKit/SisUndoToast.razor.rz.scp.css */
.sis-undo-toast[b-7orl9u7aso] {
    /* TOKEN-REQUEST: sis-shadow-toast 0 12px 28px -12px rgba(10, 30, 36, 0.6) — no existing --sis-shadow-* matches. */
    --sis-undo-toast-shadow: 0 12px 28px -12px rgba(10, 30, 36, 0.6);
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 0);
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 12px 12px 18px;
    max-width: min(560px, calc(100vw - 32px));
    border-radius: var(--sis-radius-md);
    background: var(--sis-toast-bg);
    color: var(--sis-text-on-dark);
    font-size: 14px;
    box-shadow: var(--sis-undo-toast-shadow);
    /* fill-mode backwards (not both/forwards): "both" pins the animation's `to` frame after it ends, which
       out-prioritizes .is-leaving's transition-driven opacity/transform (CSS animations sit above plain author
       rules in the cascade) and silently kills the exit transition. */
    animation: sis-undo-toast-in-b-7orl9u7aso var(--sis-duration) var(--sis-ease) backwards;
    /* MudBlazor sets body line-height:1.43/letter-spacing:.01071em; boards use browser defaults. */
    line-height: normal;
    letter-spacing: normal;
}

.sis-undo-toast [data-slot="message"][b-7orl9u7aso] {
    min-width: 0;
    overflow-wrap: break-word;
}

.sis-undo-toast.is-leaving[b-7orl9u7aso] {
    transition: opacity var(--sis-duration) var(--sis-ease), transform var(--sis-duration) var(--sis-ease);
    opacity: 0;
    transform: translate(-50%, 8px);
}

.sis-undo-toast-action[b-7orl9u7aso] {
    /* TOKEN-REQUEST: sis-toast-action-bg-hover rgba(255, 255, 255, 0.24) — one step up from --sis-toast-action-bg. */
    --sis-undo-toast-action-hover-bg: rgba(255, 255, 255, 0.24);
    /* TOKEN-REQUEST: sis-toast-action-bg-active rgba(255, 255, 255, 0.32) — one step up again. */
    --sis-undo-toast-action-active-bg: rgba(255, 255, 255, 0.32);
    flex-shrink: 0;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: var(--sis-radius-xs);
    background: var(--sis-toast-action-bg);
    color: var(--sis-text-on-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease);
}

.sis-undo-toast-action:hover[b-7orl9u7aso] {
    background: var(--sis-undo-toast-action-hover-bg);
}

.sis-undo-toast-action:active[b-7orl9u7aso] {
    background: var(--sis-undo-toast-action-active-bg);
}

.sis-undo-toast-action:focus-visible[b-7orl9u7aso] {
    outline: 2px solid var(--sis-text-on-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sis-toast-bg);
}

@keyframes sis-undo-toast-in-b-7orl9u7aso {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Mobile: full width minus 16px on each side, no horizontal centering transform needed (left/right insets do it). */
@media (max-width: 959.98px) {
    .sis-undo-toast[b-7orl9u7aso] {
        left: 16px;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateY(0);
    }

    .sis-undo-toast.is-leaving[b-7orl9u7aso] {
        transform: translateY(8px);
    }

    /* Board draws the undo button at 36px tall; keep that look but extend its hit area to the 44px touch-target
       minimum (CLAUDE.md) via an invisible ::before rather than growing the visible button. */
    .sis-undo-toast-action[b-7orl9u7aso] {
        position: relative;
    }

    .sis-undo-toast-action[b-7orl9u7aso]::before {
        content: "";
        position: absolute;
        inset: -5px 0;
    }

    @keyframes sis-undo-toast-in-b-7orl9u7aso {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-undo-toast[b-7orl9u7aso] {
        animation: none;
    }

    .sis-undo-toast.is-leaving[b-7orl9u7aso] {
        transition: none;
    }
}
/* /Components/Shared/Subject/Dialogs/FavoriteSubjectDetailDialog.razor.rz.scp.css */
/* Register dialog body (DetailDialog_v2 / DetailMobileSheet_v2): blocks stacked 18px apart (14px in the sheet). */
.register-body[b-1t7wztdcre] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

/* PSU Lifelong fee row (campus 06). */
.register-fee[b-1t7wztdcre] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ghost "ยกเลิก" is centered under the two CTAs (board: align-self center). */
.register-cancel[b-1t7wztdcre] {
    align-self: center;
}

@media (max-width: 959.98px) {
    .register-body[b-1t7wztdcre] {
        gap: 14px;
    }
}
/* /Components/Shared/Subject/Dialogs/FavoriteSubjectDetailPrerequisiteDialog.razor.rz.scp.css */
/* Corequisite wizard (E5): SisSteps on top, one panel per step, the same blocks as the single register dialog. */
.wizard-body[b-nj5htvsqbf] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.wizard-panel[b-nj5htvsqbf] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.wizard-subject[b-nj5htvsqbf] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

.wizard-actions[b-nj5htvsqbf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wizard-cancel[b-nj5htvsqbf] {
    align-self: center;
}

@media (max-width: 959.98px) {
    .wizard-body[b-nj5htvsqbf],
    .wizard-panel[b-nj5htvsqbf] {
        gap: 14px;
    }
}
/* /Components/Shared/Subject/Dialogs/RegisterSectionField.razor.rz.scp.css */
/* Section picker of the register dialogs (DetailDialog_v2 "ตอนเรียน" field; DetailMobileSheet_v2 uses the same
   field at 52px with a 12px label). */
.rsf[b-fb0ra0gqzl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.rsf-label[b-fb0ra0gqzl] {
    font-size: 13px;
    color: var(--sis-text-secondary);
}

.rsf-hint[b-fb0ra0gqzl] {
    font-size: 12px;
    color: var(--sis-text-secondary);
}

.rsf-control[b-fb0ra0gqzl] {
    position: relative;
    min-width: 0;
}

/* The pill floats over the right of the field (left of the chevron), so the text keeps clear of it. */
.rsf-control-pill[b-fb0ra0gqzl] {
    position: absolute;
    top: 50%;
    right: 48px;
    transform: translateY(-50%);
    pointer-events: none;
}

.rsf-summary-detail[b-fb0ra0gqzl] {
    min-width: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

/* MudAutocomplete: outlined field restyled to the board combobox (radius 12, 1px field border, 16/600 text). */
.rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-outlined {
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface);
    color: var(--sis-text);
    min-height: 56px;
}

.rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--sis-radius-md);
    border-width: 1px;
    border-color: var(--sis-border-field);
    transition: border-color var(--sis-duration) var(--sis-ease), box-shadow var(--sis-duration) var(--sis-ease);
}

.rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--sis-link);
}

.rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--sis-focus-color);
    box-shadow: var(--sis-focus-ring-field);
}

.rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-slot {
    font-size: 16px;
    font-weight: 600;
    color: var(--sis-text);
    text-overflow: ellipsis;
    padding: 8px 110px 8px 14px;
    height: auto;
}

.rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-adornment .mud-icon-root {
    color: var(--sis-icon-muted);
}

/* Items render inside the MudPopover (portal), but the markup is this component's own so the scope id applies. */
.rsf-item[b-fb0ra0gqzl] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 0;
    line-height: normal;
}

.rsf-item-main[b-fb0ra0gqzl] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rsf-item-title[b-fb0ra0gqzl] {
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
}

.rsf-item-detail[b-fb0ra0gqzl] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    overflow-wrap: anywhere;
}

.rsf-status[b-fb0ra0gqzl] {
    padding: 8px 16px;
    font-size: 14px;
    text-align: center;
    color: var(--sis-text-secondary);
}

/* The label lives inside the field on mobile (DetailMobileSheet_v2); only shown <960px. */
.rsf-inline-label[b-fb0ra0gqzl] {
    display: none;
}

@media (max-width: 959.98px) {
    /* The outside label stays for screen readers; the inline one is what sighted users see. */
    .rsf-label[b-fb0ra0gqzl] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rsf-hint[b-fb0ra0gqzl] {
        display: none;
    }

    .rsf-inline-label[b-fb0ra0gqzl] {
        display: block;
        position: absolute;
        z-index: 1;
        top: 7px;
        left: 12px;
        font-size: 12px;
        color: var(--sis-text-secondary);
        pointer-events: none;
    }

    .rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-outlined {
        min-height: 52px;
    }

    .rsf[b-fb0ra0gqzl]  .rsf-input .mud-input-slot {
        padding: 24px 100px 6px 12px;
        font-size: 15px;
    }

    /* Board: the seat count is plain green text on mobile, not a filled pill. */
    .rsf-control-pill[b-fb0ra0gqzl]  .sis-pill {
        height: auto;
        padding: 0;
        background: transparent;
    }
}
/* /Components/Shared/Subject/Dialogs/SectionDetailDialog.razor.rz.scp.css */
/* Register dialog body (DetailDialog_v2 / DetailMobileSheet_v2): blocks stacked 18px apart (14px in the sheet). */
.register-body[b-nrsuk34yio] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

/* PSU Lifelong fee row (campus 06). */
.register-fee[b-nrsuk34yio] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ghost "ยกเลิก" is centered under the two CTAs (board: align-self center). */
.register-cancel[b-nrsuk34yio] {
    align-self: center;
}

@media (max-width: 959.98px) {
    .register-body[b-nrsuk34yio] {
        gap: 14px;
    }
}
/* /Components/Shared/Subject/Dialogs/SectionDetailPrerequisiteDialog.razor.rz.scp.css */
/* Corequisite wizard (E5): SisSteps on top, one panel per step, the same blocks as the single register dialog. */
.wizard-body[b-7krfisgzxp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    line-height: normal;
    letter-spacing: normal;
}

.wizard-panel[b-7krfisgzxp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.wizard-subject[b-7krfisgzxp] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

.wizard-actions[b-7krfisgzxp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wizard-cancel[b-7krfisgzxp] {
    align-self: center;
}

@media (max-width: 959.98px) {
    .wizard-body[b-7krfisgzxp],
    .wizard-panel[b-7krfisgzxp] {
        gap: 14px;
    }
}
/* /Components/Shared/Subject/PrereqirsiteCard.razor.rz.scp.css */
/* Stacked condition callouts (Detail_v2 "เงื่อนไขรายวิชา"): one SisCallout per corequisite / prerequisite group. */
.sd-conditions[b-7z8a49k281] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 959.98px) {
    .sd-conditions[b-7z8a49k281] {
        gap: 14px;
    }
}
/* /Components/Shared/Subject/SectionCard.razor.rz.scp.css */
/* "เลือกตอนนี้": 40px Quiet button on desktop (Detail_v2), full-width 44px on mobile (DetailMobile_v2). */
.sc-select[b-z9tmjb1186] {
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 959.98px) {
    .sc-select[b-z9tmjb1186] {
        height: 44px;
        width: 100%;
    }
}
/* /Components/Shared/Subject/SectionCardList.razor.rz.scp.css */
/* Detail_v2 "เลือกตอนเรียน" block: 12px gap; header row = title (count) | 240px section search | hide-full switch. */
.scl[b-j42lg6dpl4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.scl-head[b-j42lg6dpl4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.scl-title[b-j42lg6dpl4] {
    margin: 0 auto 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    color: var(--sis-text);
}

.scl-count[b-j42lg6dpl4] {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--sis-text-secondary);
}

.scl-head[b-j42lg6dpl4]  .scl-search {
    width: 240px;
}

.scl-remark[b-j42lg6dpl4] {
    margin: 0;
    font-size: 12px;
    line-height: normal;
    color: var(--sis-text-secondary);
}

/* The polite live region stays in the DOM so filter changes are announced, but takes no space when empty. */
.scl-status[b-j42lg6dpl4] {
    margin: -12px 0 0;
    min-height: 0;
    font-size: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.scl-list[b-j42lg6dpl4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-item[hidden][b-j42lg6dpl4] {
    display: none;
}

@media (max-width: 959.98px) {
    .scl[b-j42lg6dpl4] {
        gap: 8px;
    }

    .scl-title[b-j42lg6dpl4] {
        flex: 1 0 100%;
        margin: 0;
        font-size: 16px;
    }

    .scl-count[b-j42lg6dpl4] {
        font-size: 13px;
    }

    .scl-head[b-j42lg6dpl4] {
        gap: 8px;
    }

    /* DetailMobile_v2: search takes the row's free width, the switch sits beside it. */
    .scl-head[b-j42lg6dpl4]  .scl-search {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .scl-list[b-j42lg6dpl4] {
        gap: 14px;
    }
}
/* /Components/Shared/Subject/SectionDetailCollapsible.razor.rz.scp.css */
/* "รายละเอียดตอน" disclosure of the register dialogs: a quiet link row that opens to the section's details. */
.sdc[b-c3izu7laei] {
    line-height: normal;
    letter-spacing: normal;
}

.sdc-summary[b-c3izu7laei] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 0;
    cursor: pointer;
    list-style: none;
    border-radius: var(--sis-radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--sis-link);
    touch-action: manipulation;
    transition: color var(--sis-duration) var(--sis-ease);
}

.sdc-summary[b-c3izu7laei]::-webkit-details-marker {
    display: none;
}

.sdc-summary:hover[b-c3izu7laei] {
    color: var(--sis-text-strong);
}

.sdc-summary:focus-visible[b-c3izu7laei] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.sdc-title[b-c3izu7laei] {
    min-width: 0;
}

.sdc-badges[b-c3izu7laei] {
    margin-left: auto;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sdc-chevron[b-c3izu7laei] {
    flex-shrink: 0;
    color: currentColor;
    transition: transform var(--sis-duration) var(--sis-ease);
}

.sdc[open] > .sdc-summary .sdc-chevron[b-c3izu7laei] {
    transform: rotate(180deg);
}

.sdc-body[b-c3izu7laei] {
    padding: 4px 0 14px;
    border-top: 1px solid var(--sis-divider);
}

@media (max-width: 959.98px) {
    .sdc-summary[b-c3izu7laei] {
        min-height: 48px;
    }
}
/* /Components/Shared/Subject/SubjectCard.razor.rz.scp.css */
/* Search result row (Search_v2 desktop / SearchMobile_v2). Enroll + private search modes; the public
   (anonymous) card keeps its MudBlazor look. */
.subject-row[b-itbv2e8u5g] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    color: var(--sis-text);
    text-decoration: none;
    line-height: normal;
    letter-spacing: normal;
    touch-action: manipulation;
    transition: background-color var(--sis-duration) var(--sis-ease), border-color var(--sis-duration) var(--sis-ease);
}

.subject-row:hover[b-itbv2e8u5g] {
    background: var(--sis-surface-hover);
    border-color: var(--sis-border-control);
    color: var(--sis-text);
}

.subject-row:active[b-itbv2e8u5g] {
    background: var(--sis-surface-selected);
}

.subject-row:focus-visible[b-itbv2e8u5g] {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.subject-row-desktop[b-itbv2e8u5g] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.subject-row-mobile[b-itbv2e8u5g] {
    display: none;
}

.subject-row-code[b-itbv2e8u5g] {
    flex: 0 0 84px;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.subject-row-main[b-itbv2e8u5g] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subject-row-name[b-itbv2e8u5g] {
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-row-sub[b-itbv2e8u5g] {
    font-size: 13px;
    color: var(--sis-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-row-tags[b-itbv2e8u5g] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.subject-row-tags[b-itbv2e8u5g]  .subject-row-credit {
    font-weight: 500;
}

.subject-row-chevron[b-itbv2e8u5g] {
    flex: 0 0 auto;
    color: var(--sis-text-muted);
}

@media (max-width: 959.98px) {
    .subject-row[b-itbv2e8u5g] {
        gap: 10px;
        padding: 12px 14px;
        min-height: 44px;
    }

    .subject-row-desktop[b-itbv2e8u5g] {
        display: none;
    }

    .subject-row-mobile[b-itbv2e8u5g] {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .subject-row-head[b-itbv2e8u5g] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .subject-row-code[b-itbv2e8u5g] {
        flex: 0 0 auto;
        font-size: 14px;
    }

    .subject-row-name[b-itbv2e8u5g] {
        font-size: 14px;
        max-width: 100%;
        white-space: normal;
    }

    .subject-row-sub[b-itbv2e8u5g] {
        font-size: 12px;
        max-width: 100%;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .subject-row[b-itbv2e8u5g] {
        transition: none;
    }
}
/* /Components/Shared/Subject/SubjectDescription.razor.rz.scp.css */
/* Detail_v2 description card: 18/24 padding, 8px gap, body clamped to the first 3 lines. */
.sdd-card[b-nrwcx5mm5t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 24px;
    background: var(--sis-surface);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-lg);
}

.sdd-heading[b-nrwcx5mm5t] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    color: var(--sis-text);
}

.sdd-text[b-nrwcx5mm5t] {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: normal;
    color: var(--sis-text-body);
    overflow-wrap: anywhere;
}

p.sdd-text[b-nrwcx5mm5t] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.sdd-card[b-nrwcx5mm5t]  .sdd-more {
    align-self: flex-start;
    height: 32px;
    padding: 0;
    font-size: 14px;
}

@media (max-width: 959.98px) {
    .sdd-card[b-nrwcx5mm5t] {
        padding: 14px 16px;
        gap: 6px;
    }

    .sdd-heading[b-nrwcx5mm5t] {
        font-size: 15px;
    }

    .sdd-text[b-nrwcx5mm5t] {
        font-size: 13px;
    }

    /* 44px touch target on mobile (board draws 32px; the tap area grows without moving the text). */
    .sdd-card[b-nrwcx5mm5t]  .sdd-more {
        min-height: 44px;
        margin-block: -6px;
    }
}
/* /Components/Shared/Subject/SubjectDetailHeading.razor.rz.scp.css */
/* Detail_v2 header card: 22/24 padding, 12px gap; DetailMobile_v2: 16 padding, 6px gap, one-line code + credit. */
.sdh-body[b-80o4ccrtc5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
}

.sdh-lifelong[b-80o4ccrtc5] {
    display: flex;
}

.sdh-code-row[b-80o4ccrtc5] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.sdh-code[b-80o4ccrtc5] {
    font-size: 15px;
    font-weight: 700;
    color: var(--sis-link);
}

.sdh-code-row[b-80o4ccrtc5]  .mud-chip {
    align-self: center;
    margin: 0;
}

.sdh-title[b-80o4ccrtc5] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--sis-text);
}

.sdh-subtitle[b-80o4ccrtc5] {
    font-size: 15px;
    color: var(--sis-text-secondary);
}

@media (max-width: 959.98px) {
    .sdh-body[b-80o4ccrtc5] {
        gap: 6px;
        padding: 16px;
    }

    .sdh-code-row[b-80o4ccrtc5] {
        gap: 0;
        font-size: 13px;
    }

    .sdh-code[b-80o4ccrtc5] {
        font-size: 13px;
    }

    /* Mobile folds the credit chip into the code line as plain "999-101 · 3 หน่วยกิต" (no chip fill, no 3(3-0-6)). */
    .sdh-code--credit[b-80o4ccrtc5]::after {
        content: "\00B7";
        margin-inline: 6px;
        color: var(--sis-link);
    }

    .sdh-code-row[b-80o4ccrtc5]  .sdh-credit {
        height: auto;
        padding: 0;
        background: none;
        font-size: 13px;
        font-weight: 700;
        color: var(--sis-link);
    }

    .sdh-code-row[b-80o4ccrtc5]  .sdh-ltp {
        display: none;
    }

    .sdh-code-row[b-80o4ccrtc5]  .mud-chip {
        margin-left: 12px;
    }

    .sdh-title[b-80o4ccrtc5] {
        font-size: 21px;
        line-height: 1.35;
    }

    .sdh-subtitle[b-80o4ccrtc5] {
        font-size: 13px;
    }
}
/* /Components/Shared/Subject/SubjectDetailSections.razor.rz.scp.css */
/* Detail_v2: one 16px-gap column. DetailMobile_v2 moves the description below the section list, so the
   description block gets a later flex order under 960px instead of being duplicated in the markup. */
.sds-stack[b-m2o886uf92] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (max-width: 959.98px) {
    .sds-stack[b-m2o886uf92] {
        gap: 14px;
    }

    .sds-stack[b-m2o886uf92] >  .sd-description {
        order: 3;
    }
}
/* /Components/Shared/Subject/SubjectDetailView.razor.rz.scp.css */
/* Detail_v2 meta grid: 4 columns under a divider; DetailMobile_v2: a single secondary-colour line. */
.sdv-grid[b-5j8k5u3ei6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sis-divider);
    font-size: 13px;
    line-height: normal;
}

.sdv-grid dt[b-5j8k5u3ei6] {
    color: var(--sis-text-secondary);
}

.sdv-grid dd[b-5j8k5u3ei6] {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sdv-line[b-5j8k5u3ei6] {
    display: none;
    margin: 0;
    font-size: 13px;
    color: var(--sis-text-secondary);
}

@media (max-width: 959.98px) {
    .sdv-grid[b-5j8k5u3ei6] {
        display: none;
    }

    .sdv-line[b-5j8k5u3ei6] {
        display: block;
    }
}
/* /Components/Shared/SummaryLibrary/SummaryLibraryTable.razor.rz.scp.css */
.slt[b-lmlzrmb6l1] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    line-height: normal;
    letter-spacing: normal;
}

.slt > section[b-lmlzrmb6l1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slt > section > h2[b-lmlzrmb6l1] {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--sis-text);
    text-wrap: balance;
    scroll-margin-top: 5rem;
}

.slt-scroll[b-lmlzrmb6l1] {
    overflow-x: auto;
}

@media (max-width: 959.98px) {
    .slt[b-lmlzrmb6l1] {
        gap: 22px;
    }

    .slt > section > h2[b-lmlzrmb6l1] {
        font-size: 18px;
    }
}
/* /Components/Shared/Thesis/GradeThesisCard.razor.rz.scp.css */
.thesis-grade-row[b-bxroxegkby] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--sis-divider);
    list-style: none;
    line-height: normal;
    letter-spacing: normal;
}

.thesis-grade-row:last-child[b-bxroxegkby] {
    border-bottom: none;
}

.thesis-grade-main[b-bxroxegkby] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.thesis-grade-main p[b-bxroxegkby] {
    margin: 0;
}

.thesis-grade-main [data-slot="term"][b-bxroxegkby] {
    font-size: 13px;
    font-weight: 600;
    color: var(--sis-text-secondary);
}

.thesis-grade-main [data-slot="subject"][b-bxroxegkby] {
    font-size: 15px;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}

.thesis-grade-main [data-slot="code"][b-bxroxegkby] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.thesis-grade-main [data-slot="chips"][b-bxroxegkby] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* P / N credit counts: two small figures, tone shown by the tint and the labelled figure (never colour alone); N is only red when there are credits not passed. */
.thesis-grade-figures[b-bxroxegkby] {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    margin: 0;
}

.thesis-grade-figures > div[b-bxroxegkby] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 76px;
    padding: 8px 12px;
    border-radius: var(--sis-radius-sm);
    text-align: right;
}

.thesis-grade-figures > div[data-tone="pass"][b-bxroxegkby] {
    background: var(--sis-success-bg);
    color: var(--sis-success-fg);
}

.thesis-grade-figures > div[data-tone="fail"][b-bxroxegkby] {
    background: var(--sis-danger-bg);
    color: var(--sis-danger-fg);
}

.thesis-grade-figures > div[data-tone="none"][b-bxroxegkby] {
    background: var(--sis-neutral-bg);
    color: var(--sis-neutral-fg);
}

.thesis-grade-figures dt[b-bxroxegkby] {
    font-size: 12px;
    font-weight: 600;
}

.thesis-grade-figures dd[b-bxroxegkby] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 959.98px) {
    .thesis-grade-row[b-bxroxegkby] {
        flex-direction: column;
        align-items: stretch;
    }

    .thesis-grade-figures > div[b-bxroxegkby] {
        flex: 1 1 0;
    }
}
/* /Components/Shared/Thesis/SummaryGradeThesis.razor.rz.scp.css */
.thesis-summary[b-9ofj738rvs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Same inset as a row in the grade list (GradeTable .gt-list li). */
.thesis-summary[b-9ofj738rvs]  .thesis-summary-card {
    padding: 14px 16px;
}

.thesis-summary[b-9ofj738rvs]  .thesis-summary-heading {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--sis-text);
    text-wrap: balance;
}
/* /Components/Shared/Thesis/ThesisAdvisoryDetail.razor.rz.scp.css */
.thesis-advisers[b-ncdpnmgr6d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.thesis-advisers[b-ncdpnmgr6d]  .thesis-advisers-heading {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--sis-text);
    text-wrap: balance;
}

.thesis-advisers-list[b-ncdpnmgr6d] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.thesis-advisers-list > li[b-ncdpnmgr6d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sis-divider);
    line-height: normal;
}

.thesis-advisers-list > li:last-child[b-ncdpnmgr6d] {
    border-bottom: none;
}

.thesis-adviser-order[b-ncdpnmgr6d] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--sis-radius-pill);
    background: var(--sis-icon-tile-bg);
    color: var(--sis-text);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.thesis-adviser-name[b-ncdpnmgr6d] {
    min-width: 0;
    font-size: 15px;
    color: var(--sis-text);
    overflow-wrap: anywhere;
}
/* /Components/Shared/Thesis/ThesisCourseDetail.razor.rz.scp.css */
.thesis-course[b-4dwq0de1jn] {
    line-height: normal;
    letter-spacing: normal;
}

.thesis-course-head[b-4dwq0de1jn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sis-divider);
}

.thesis-course-head p[b-4dwq0de1jn],
.thesis-course-head h2[b-4dwq0de1jn] {
    margin: 0;
    overflow-wrap: anywhere;
}

.thesis-course-head [data-slot="major"][b-4dwq0de1jn] {
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.thesis-course-head [data-slot="category"][b-4dwq0de1jn] {
    font-size: 18px;
    font-weight: 600;
    color: var(--sis-text);
    text-wrap: balance;
}

.thesis-course-head [data-slot="plan"][b-4dwq0de1jn] {
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.thesis-course-head [data-slot="code"][b-4dwq0de1jn] {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

.thesis-course-credits[b-4dwq0de1jn] {
    margin: 0;
    padding: 4px 0 0;
}

.thesis-course-credits [data-slot="row"][b-4dwq0de1jn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sis-divider);
}

.thesis-course-credits [data-slot="row"]:last-child[b-4dwq0de1jn] {
    border-bottom: none;
    padding-bottom: 0;
}

.thesis-course-credits dt[b-4dwq0de1jn] {
    min-width: 0;
    font-size: 14px;
    color: var(--sis-text-secondary);
}

.thesis-course-credits dd[b-4dwq0de1jn] {
    margin: 0;
    flex-shrink: 0;
    font-size: 15px;
    color: var(--sis-text);
    font-variant-numeric: tabular-nums;
}

.thesis-course-credits dd[data-strong][b-4dwq0de1jn] {
    font-weight: 700;
}
/* /Components/Shared/Thesis/ThesisOverview.razor.rz.scp.css */
.thesis-overview[b-xa237qdn56] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    line-height: normal;
    letter-spacing: normal;
}

.thesis-overview-grades[b-xa237qdn56] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.thesis-overview[b-xa237qdn56]  .thesis-overview-heading {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--sis-text);
    text-wrap: balance;
}

.thesis-overview-list[b-xa237qdn56] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.thesis-overview-course[b-xa237qdn56],
.thesis-overview-summary[b-xa237qdn56],
.thesis-overview-advisers[b-xa237qdn56] {
    min-width: 0;
}

@media (min-width: 960px) {
    .thesis-overview[b-xa237qdn56] {
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-areas:
            "grades course"
            "grades summary"
            "grades advisers";
        grid-template-rows: auto auto 1fr;
    }

    .thesis-overview-course[b-xa237qdn56] {
        grid-area: course;
    }

    .thesis-overview-grades[b-xa237qdn56] {
        grid-area: grades;
    }

    .thesis-overview-summary[b-xa237qdn56] {
        grid-area: summary;
    }

    .thesis-overview-advisers[b-xa237qdn56] {
        grid-area: advisers;
    }
}