:root {
    --mk-primary: #0f766e;
    --mk-primary-dark: #115e59;
    --mk-accent: #f97316;
    --mk-ink: #1f2937;
    --mk-muted: #64748b;
    --mk-soft: #f4f7f6;
    --mk-border: #dbe4e0;
}

/* Organization students workspace */
.organization-students-page {
    display: grid;
    gap: .9rem;
}

.organization-students-hero {
    align-items: center;
    background:
        radial-gradient(circle at 8% 18%, rgba(255, 255, 255, .11) 0 2px, transparent 3px),
        linear-gradient(125deg, #0b3f3a 0%, #12675f 62%, #168178 100%);
    border: 1px solid rgba(8, 56, 51, .72);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(9, 56, 51, .1);
    color: #fff;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr);
    min-height: 168px;
    overflow: hidden;
    padding: 1.35rem 1.45rem;
    position: relative;
}

.organization-students-hero::before,
.organization-students-hero::after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    position: absolute;
}

.organization-students-hero::before {
    height: 210px;
    left: -82px;
    top: -118px;
    width: 210px;
}

.organization-students-hero::after {
    bottom: -102px;
    height: 180px;
    right: 34%;
    width: 180px;
}

.organization-students-hero-copy,
.organization-students-metrics {
    position: relative;
    z-index: 1;
}

.organization-students-eyebrow {
    align-items: center;
    color: #b9dfd9;
    display: inline-flex;
    font-size: .63rem;
    font-weight: 850;
    gap: .4rem;
    margin-bottom: .45rem;
}

.organization-students-eyebrow i {
    color: #e1c47e;
    font-size: .76rem;
}

.organization-students-hero h2 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 950;
    margin: 0 0 .45rem;
}

.organization-students-hero p {
    color: #c3dbd8;
    font-size: .7rem;
    line-height: 2;
    margin: 0;
    max-width: 650px;
}

.organization-students-metrics {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organization-students-metrics article {
    align-items: center;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 72px;
    padding: .6rem;
}

.organization-students-metrics article>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    color: #e7cf98;
    display: flex;
    font-size: .9rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.organization-students-metrics article>div {
    display: grid;
    gap: .06rem;
}

.organization-students-metrics strong {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 950;
}

.organization-students-metrics small {
    color: #b9d4d1;
    font-size: .55rem;
    line-height: 1.6;
}

.organization-students-action-grid {
    align-items: stretch;
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .7fr);
}

.organization-students-assignment-card,
.organization-students-import-card,
.organization-students-filter {
    border-radius: 10px;
    display: grid;
    gap: .85rem;
    padding: 1rem !important;
}

.organization-students-card-head,
.organization-students-section-head>div:first-child {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(0, 1fr);
}

.organization-students-card-head>span,
.organization-students-section-head>div:first-child>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-accent);
    display: flex;
    font-size: .92rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.organization-students-card-head>span.is-primary {
    background: color-mix(in srgb, var(--panel-accent-soft) 76%, var(--panel-surface));
}

.organization-students-card-head>span.is-success {
    background: #eaf7f1;
    border-color: #cce8db;
    color: #278164;
}

.organization-students-card-head>div,
.organization-students-section-head>div:first-child>div {
    display: grid;
    gap: .14rem;
}

.organization-students-card-head strong,
.organization-students-section-head strong {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 900;
}

.organization-students-card-head small,
.organization-students-section-head small {
    color: var(--panel-muted);
    font-size: .62rem;
    line-height: 1.8;
}

.organization-students-assignment-card {
    border-right: 3px solid var(--panel-accent);
}

.organization-students-assignment-controls {
    align-items: end;
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(260px, 1fr) auto;
}

.organization-students-assignment-submit {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.organization-students-selected-count {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .61rem;
    gap: .42rem;
    min-height: 40px;
    padding: .45rem .65rem;
    white-space: nowrap;
}

.organization-students-selected-count>i,
.organization-students-selected-count strong {
    color: var(--panel-accent);
}

.organization-students-selected-count strong {
    font-size: .78rem;
    font-weight: 950;
}

.organization-students-assignment-submit .btn {
    min-height: 40px;
    white-space: nowrap;
}

.organization-students-card-note {
    align-items: center;
    border-radius: 6px;
    display: flex;
    font-size: .61rem;
    gap: .4rem;
    margin: 0;
    padding: .45rem .55rem;
}

.organization-students-card-note.is-warning {
    background: #fff7e8;
    border: 1px solid #efd7a8;
    color: #8b651c;
}

.organization-students-import-field {
    display: grid;
    gap: .4rem;
}

.organization-students-import-field>small {
    color: var(--panel-muted);
    font-size: .57rem;
    line-height: 1.8;
}

.organization-students-import-field>small i {
    color: #278164;
    margin-left: .2rem;
}

.organization-students-import-actions {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
}

.organization-students-import-actions .btn {
    justify-content: center;
    min-height: 38px;
}

.organization-students-filter {
    gap: 1rem;
}

.organization-students-section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.organization-students-filter-count {
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 25%, var(--panel-border));
    border-radius: 999px;
    color: var(--panel-accent);
    font-size: .59rem;
    font-weight: 850;
    padding: .3rem .6rem;
}

.organization-students-filter-grid {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(200px, 1.2fr) repeat(3, minmax(145px, .78fr)) minmax(190px, 1fr);
}

.organization-students-filter-actions {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    display: flex;
    gap: .5rem;
    padding-top: .75rem;
}

.organization-students-list {
    border-radius: 10px;
    overflow: hidden;
    padding: 0 !important;
}

.organization-students-list-head {
    border-bottom: 1px solid var(--panel-border);
    padding: .85rem 1rem;
}

.organization-students-selection-help {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .59rem;
    gap: .4rem;
}

.organization-students-selection-help i {
    color: var(--panel-accent);
}

.organization-students-table {
    --bs-table-bg: transparent;
    color: var(--panel-text);
}

.organization-students-table thead {
    background: var(--panel-surface-soft);
}

.organization-students-table thead th {
    border-bottom: 1px solid var(--panel-border);
    color: var(--panel-muted);
    font-size: .58rem;
    font-weight: 850;
    padding: .65rem .7rem;
    white-space: nowrap;
}

.organization-students-table tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.organization-students-table tbody tr:hover,
.organization-students-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--panel-accent-soft) 62%, transparent);
}

.organization-students-table tbody tr.is-selected {
    box-shadow: inset -3px 0 var(--panel-accent);
}

.organization-students-table tbody td {
    border-bottom-color: var(--panel-border);
    color: var(--panel-text);
    font-size: .66rem;
    padding: .72rem .7rem;
    vertical-align: middle;
}

.organization-students-check-cell {
    text-align: center;
    width: 46px;
}

.organization-students-check-cell .form-check-input {
    cursor: pointer;
    height: 17px;
    width: 17px;
}

.organization-student-identity {
    align-items: center;
    display: grid;
    gap: .58rem;
    grid-template-columns: 40px minmax(135px, 1fr);
}

.organization-student-identity>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    color: var(--panel-accent);
    display: flex;
    font-size: .8rem;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    width: 40px;
}

.organization-student-identity img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.organization-student-identity>div,
.organization-student-contact,
.organization-student-purchase-date {
    display: grid;
    gap: .15rem;
}

.organization-student-identity strong {
    color: var(--panel-text);
    font-size: .7rem;
    font-weight: 900;
}

.organization-student-identity small,
.organization-student-contact small,
.organization-student-purchase-date small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.organization-student-contact span,
.organization-student-contact small {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
    justify-content: flex-end;
}

.organization-student-contact i {
    color: var(--panel-muted);
    font-size: .65rem;
}

.organization-student-courses {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-width: 440px;
    min-width: 180px;
}

.organization-student-courses>span {
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 20%, var(--panel-border));
    border-radius: 999px;
    color: var(--panel-accent);
    font-size: .58rem;
    font-weight: 800;
    max-width: 170px;
    overflow: hidden;
    padding: .23rem .48rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-student-courses>span.is-more {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-muted);
}

.organization-student-empty-value {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .57rem;
    gap: .3rem;
}

.organization-student-purchase-date {
    white-space: nowrap;
}

.organization-student-purchase-date strong {
    color: var(--panel-text);
    font-size: .63rem;
}

.organization-students-action-cell .btn {
    font-size: .58rem;
    white-space: nowrap;
}

.organization-students-pagination {
    border-top: 1px solid var(--panel-border);
    padding: .75rem 1rem;
}

html[data-panel-theme="dark"] .organization-students-card-head>span.is-success {
    background: #173a31;
    border-color: #295748;
    color: #75c9aa;
}

html[data-panel-theme="dark"] .organization-students-card-note.is-warning {
    background: #382f1e;
    border-color: #5d4b2b;
    color: #e2bd70;
}

@media (max-width: 1199.98px) {
    .organization-students-hero {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
    }

    .organization-students-action-grid {
        grid-template-columns: 1fr;
    }

    .organization-students-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .organization-students-hero {
        grid-template-columns: 1fr;
    }

    .organization-students-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .organization-students-page {
        gap: .7rem;
    }

    .organization-students-hero {
        gap: 1rem;
        min-height: 0;
        padding: 1rem;
    }

    .organization-students-hero h2 {
        font-size: 1.05rem;
    }

    .organization-students-metrics article {
        gap: .4rem;
        grid-template-columns: 32px minmax(0, 1fr);
        min-height: 62px;
        padding: .45rem;
    }

    .organization-students-metrics article>span {
        height: 32px;
        width: 32px;
    }

    .organization-students-metrics strong {
        font-size: .86rem;
    }

    .organization-students-assignment-controls,
    .organization-students-filter-grid {
        grid-template-columns: 1fr;
    }

    .organization-students-assignment-submit {
        justify-content: space-between;
    }

    .organization-students-section-head {
        align-items: flex-start;
        gap: .7rem;
    }

    .organization-students-selection-help {
        display: none;
    }

    .organization-students-table-wrapper {
        overflow: visible;
        padding: .65rem;
    }

    .organization-students-table,
    .organization-students-table tbody {
        display: block;
        width: 100%;
    }

    .organization-students-table thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .organization-students-table tbody {
        display: grid;
        gap: .65rem;
    }

    .organization-students-table tbody tr:not(.organization-students-empty-row) {
        background: var(--panel-surface);
        border: 1px solid var(--panel-border);
        border-radius: 9px;
        display: block;
        overflow: hidden;
        padding-top: .2rem;
        position: relative;
    }

    .organization-students-table tbody tr.is-selected {
        border-color: var(--panel-accent);
        box-shadow: inset -3px 0 var(--panel-accent);
    }

    .organization-students-table tbody td {
        align-items: start;
        border-bottom: 1px solid var(--panel-border);
        display: grid;
        gap: .6rem;
        grid-template-columns: 92px minmax(0, 1fr);
        padding: .65rem .75rem;
        width: 100%;
    }

    .organization-students-table tbody td[data-label]::before {
        color: var(--panel-muted);
        content: attr(data-label);
        font-size: .56rem;
        font-weight: 800;
        padding-top: .12rem;
    }

    .organization-students-table tbody td.organization-students-check-cell {
        border: 0;
        display: block;
        padding: 0;
        position: absolute;
        right: .72rem;
        top: .9rem;
        width: auto;
        z-index: 2;
    }

    .organization-students-table tbody td:nth-child(2) {
        display: block;
        padding-right: 2.7rem;
    }

    .organization-students-table tbody td:nth-child(2)::before {
        display: none;
    }

    .organization-student-contact span,
    .organization-student-contact small {
        justify-content: flex-start;
    }

    .organization-student-courses {
        min-width: 0;
    }

    .organization-students-action-cell {
        border-bottom: 0 !important;
    }

    .organization-students-action-cell form,
    .organization-students-action-cell .btn {
        width: 100%;
    }

    .organization-students-action-cell .btn {
        justify-content: center;
    }

    .organization-students-empty-row,
    .organization-students-empty-row td {
        display: block !important;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .organization-students-metrics {
        gap: .4rem;
    }

    .organization-students-metrics article {
        align-content: center;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .organization-students-metrics article>span {
        display: none;
    }

    .organization-students-assignment-card,
    .organization-students-import-card,
    .organization-students-filter {
        padding: .8rem !important;
    }

    .organization-students-assignment-submit,
    .organization-students-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .organization-students-assignment-submit>*,
    .organization-students-filter-actions>* {
        justify-content: center;
        width: 100%;
    }

    .organization-students-import-actions {
        grid-template-columns: 1fr;
    }

    .organization-students-section-head {
        flex-direction: column;
    }
}

/* Two-step AJAX OTP login */
.auth-otp-flow {
    display: grid;
    gap: 1rem;
}

.auth-otp-step {
    animation: authOtpStepIn .28s ease both;
}

.auth-otp-message {
    border: 1px solid rgba(37, 99, 235, .2);
    border-radius: 12px;
    background: rgba(37, 99, 235, .08);
    color: #1d4ed8;
    padding: .75rem .9rem;
    font-size: .84rem;
    line-height: 1.8;
}

.auth-otp-message.is-error {
    border-color: rgba(220, 38, 38, .22);
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
}

.auth-otp-code-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.auth-otp-code-head .btn-link,
.auth-otp-resend {
    min-height: auto !important;
    padding: .35rem !important;
    font-size: .78rem;
    text-decoration: none;
}

.auth-otp-digits {
    display: grid;
    direction: ltr;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
}

.auth-otp-digits .form-control {
    direction: ltr !important;
    height: 3.35rem;
    border-radius: 12px;
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 800;
}

.auth-otp-digits .form-control:focus {
    border-color: var(--bs-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
    transform: translateY(-1px);
}

.auth-otp-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(100, 116, 139, .16);
    border-radius: 12px;
    background: rgba(148, 163, 184, .08);
    color: #64748b;
    padding: .65rem .8rem;
    font-size: .82rem;
}

.auth-otp-timer strong {
    color: #0f172a;
    font-size: .95rem;
    letter-spacing: .06em;
}

.is-otp-expired .auth-otp-timer {
    border-color: rgba(220, 38, 38, .2);
    background: rgba(220, 38, 38, .07);
}

.is-otp-expired .auth-otp-timer strong {
    color: #dc2626;
}

.auth-otp-flow .btn.is-loading {
    pointer-events: none;
    opacity: .72;
}

.auth-otp-flow .btn.is-loading i {
    display: inline-block;
    animation: authOtpSpin .75s linear infinite;
}

[data-bs-theme="dark"] .auth-otp-message,
html[data-panel-theme="dark"] .auth-otp-message,
.dark-mode .auth-otp-message {
    border-color: rgba(96, 165, 250, .28);
    background: rgba(37, 99, 235, .16);
    color: #bfdbfe;
}

[data-bs-theme="dark"] .auth-otp-message.is-error,
html[data-panel-theme="dark"] .auth-otp-message.is-error,
.dark-mode .auth-otp-message.is-error {
    border-color: rgba(248, 113, 113, .28);
    background: rgba(220, 38, 38, .14);
    color: #fecaca;
}

[data-bs-theme="dark"] .auth-otp-timer,
html[data-panel-theme="dark"] .auth-otp-timer,
.dark-mode .auth-otp-timer {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .42);
    color: #94a3b8;
}

[data-bs-theme="dark"] .auth-otp-timer strong,
html[data-panel-theme="dark"] .auth-otp-timer strong,
.dark-mode .auth-otp-timer strong {
    color: #e2e8f0;
}

@keyframes authOtpStepIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authOtpSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 420px) {
    .auth-otp-digits {
        gap: .32rem;
    }

    .auth-otp-digits .form-control {
        height: 2.9rem;
        border-radius: 10px;
        font-size: 1.05rem;
    }
}

/* Organization ownership, media studio and branded public microsite */
.ownership-badge {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    gap: .35rem;
    max-width: 190px;
    padding: .28rem .55rem;
}

.ownership-badge.is-organization {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #0f766e;
}

.ownership-badge.is-teacher {
    background: #f5f0ff;
    border-color: #ddd0f5;
    color: #68469a;
}

.ownership-badge-stack {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

html[data-panel-theme="dark"] .ownership-badge.is-teacher {
    background: #302640;
    border-color: #514069;
    color: #d2b8f3;
}

.organization-editor-tabs {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: -.25rem -.25rem 1.25rem;
    padding: .45rem;
}

.organization-editor-tabs button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--panel-muted);
    display: grid;
    gap: .6rem;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: .65rem;
    text-align: right;
}

.organization-editor-tabs button>i {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: flex;
    font-size: 1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.organization-editor-tabs button span {
    display: grid;
    gap: .08rem;
}

.organization-editor-tabs button strong {
    color: var(--panel-text);
    font-size: .8rem;
}

.organization-editor-tabs button small {
    font-size: .64rem;
}

.organization-editor-tabs button.active {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    color: var(--panel-accent);
}

.organization-editor-tabs button.active>i {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.organization-editor-content {
    min-height: 420px;
}

.organization-form-section {
    padding: .75rem .35rem;
}

.organization-media-studio {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(270px, .72fr) minmax(0, 1.6fr);
}

.organization-logo-studio,
.organization-banner-studio {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 1rem;
}

.organization-logo-preview {
    align-items: center;
    display: flex;
    gap: .85rem;
    margin-bottom: 1rem;
}

.organization-logo-preview>img,
.organization-logo-preview>span {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    display: flex;
    height: 88px;
    justify-content: center;
    object-fit: contain;
    padding: .45rem;
    width: 88px;
}

.organization-logo-preview>span {
    color: var(--panel-accent);
    font-size: 1.7rem;
}

.organization-logo-preview>div {
    display: grid;
    gap: .2rem;
}

.organization-logo-preview strong {
    color: var(--panel-text);
    font-size: .86rem;
}

.organization-logo-preview small {
    color: var(--panel-muted);
    font-size: .68rem;
    line-height: 1.8;
}

.organization-banner-studio>header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.organization-banner-studio header h3 {
    color: var(--panel-text);
    font-size: .92rem;
    font-weight: 900;
    margin: .18rem 0;
}

.organization-banner-studio header p {
    color: var(--panel-muted);
    font-size: .68rem;
    line-height: 1.9;
    margin: 0;
}

.organization-media-kicker {
    color: var(--panel-accent);
    font-size: .62rem;
    font-weight: 900;
}

.organization-new-banner-list {
    display: grid;
    gap: .55rem;
    margin-top: 1rem;
}

.organization-new-banner {
    align-items: center;
    background: var(--panel-surface);
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: .65rem;
    position: relative;
}

.organization-new-banner-copy {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 0;
}

.organization-new-banner-copy>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 32px;
    font-size: .72rem;
    font-weight: 900;
    height: 32px;
    justify-content: center;
}

.organization-new-banner-copy>div {
    display: grid;
    min-width: 0;
}

.organization-new-banner-copy strong {
    color: var(--panel-text);
    font-size: .74rem;
}

.organization-new-banner-copy small {
    color: var(--panel-muted);
    font-size: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-banner-progress {
    grid-column: 1/-1;
}

.organization-existing-banners {
    border-top: 1px solid var(--panel-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.organization-existing-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.organization-existing-title strong {
    color: var(--panel-text);
    font-size: .76rem;
}

.organization-existing-title span {
    color: var(--panel-muted);
    font-size: .66rem;
}

.organization-banner-grid {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-banner-card {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

.organization-banner-card>img {
    aspect-ratio: 16/6;
    display: block;
    object-fit: cover;
    width: 100%;
}

.organization-banner-remove {
    align-items: center;
    display: flex;
    gap: .55rem;
    padding: .55rem;
}

.organization-banner-remove>span {
    display: grid;
}

.organization-banner-remove strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.organization-banner-remove small {
    color: var(--panel-muted);
    font-size: .58rem;
}

.organization-seo-image {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.organization-seo-image img {
    aspect-ratio: 1200/630;
    object-fit: cover;
    width: 100%;
}

.organization-seo-image span {
    background: rgba(15, 23, 42, .82);
    bottom: .5rem;
    color: #fff;
    font-size: .65rem;
    padding: .2rem .5rem;
    position: absolute;
    right: .5rem;
}

/* Course editor: formal, compact navigation with an explicit visual hierarchy. */
.panel-role-admin .course-editor-tabbar {
    background: linear-gradient(180deg, #fff, #f7f9fc);
    border: 1px solid #d9e1eb;
    border-radius: 12px;
    padding: .55rem;
    position: relative;
}

.panel-role-admin .course-editor-tabbar .nav {
    display: grid;
    gap: .42rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel-role-admin .course-editor-tabbar .nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    display: grid;
    gap: .6rem;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 62px;
    padding: .58rem .65rem;
    text-align: right;
}

.panel-role-admin .course-editor-tabbar .nav-link>i {
    background: #eef2f7;
    border: 1px solid #dde5ee;
    border-radius: 7px;
    color: #50637a;
    height: 40px;
    width: 40px;
}

.panel-role-admin .course-editor-tabbar .nav-link strong {
    font-size: .78rem;
}

.panel-role-admin .course-editor-tabbar .nav-link small {
    font-size: .63rem;
    line-height: 1.5;
}

.panel-role-admin .course-editor-tabbar .nav-link.active {
    background: #eef4fb;
    border-color: #c9d8ea;
    box-shadow: inset 3px 0 #244d7c;
    color: #173c67;
}

.panel-role-admin .course-editor-tabbar .nav-link.active>i {
    background: #244d7c;
    border-color: #244d7c;
    color: #fff;
}

/* Distinct formal identities for the three operational panels. */
.panel-role-admin {
    --panel-accent: #244d7c;
    --panel-accent-soft: #e9f0f8;
    --formal-gold: #b58a4a;
}

.panel-role-teacher {
    --panel-accent: #7a3048;
    --panel-accent-soft: #f8edf1;
    --formal-gold: #b8798d;
}

.panel-role-organization {
    --panel-accent: #0f766e;
    --panel-accent-soft: #e6f5f2;
    --formal-gold: #4ca69d;
}

.panel-role-teacher .panel-sidebar {
    background: linear-gradient(180deg, #321927, #23131d 58%, #180d14);
}

.panel-role-teacher .panel-nav a.active,
.panel-role-teacher .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(118, 47, 71, .78), rgba(72, 30, 46, .65));
    border-color: rgba(220, 154, 175, .18);
}

.panel-role-teacher .panel-nav a.active::before {
    background: #d69aaf;
}

.panel-role-teacher .btn-primary {
    background: #7a3048;
    border-color: #7a3048;
}

.panel-role-teacher .btn-primary:hover {
    background: #61243a;
    border-color: #61243a;
}

.panel-role-organization .panel-layout {
    grid-template-columns: 252px minmax(0, 1fr);
}

.panel-role-organization .panel-content {
    max-width: 1500px;
    width: 100%;
}

.panel-role-organization .panel-sidebar {
    background: linear-gradient(180deg, #0d3735, #092b29 58%, #061e1d);
}

.panel-role-organization .panel-sidebar-head {
    border-color: rgba(255, 255, 255, .09);
    min-height: 78px;
}

.panel-role-organization .panel-nav {
    gap: .15rem;
    padding: .55rem .65rem .8rem;
}

.panel-role-organization .panel-nav-label {
    color: #84aaa6;
    font-size: .73rem;
}

.panel-role-organization .panel-nav a {
    border-radius: 5px;
    color: #bed2d0;
    display: grid;
    font-size: .84rem;
    gap: .5rem;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 36px;
    padding: .25rem .35rem;
}

.panel-role-organization .panel-nav a i {
    align-items: center;
    border-radius: 4px;
    color: #92bbb7;
    display: flex;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.panel-role-organization .panel-nav a.active,
.panel-role-organization .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(18, 111, 103, .82), rgba(10, 76, 71, .68));
    border-color: rgba(145, 213, 205, .2);
    color: #fff;
}

.panel-role-organization .panel-nav a.active {
    border-right: 3px solid #68c6bc;
}

.panel-role-organization .panel-avatar {
    background: #145b56;
    border-color: #3b8f87;
}

.panel-role-organization .panel-sidebar-profile {
    background: rgba(2, 22, 21, .55);
    border-color: rgba(255, 255, 255, .07);
}

.panel-role-organization .panel-card {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 118, 110, .04);
}

.panel-role-organization .btn-primary {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.panel-role-organization .btn-primary:hover {
    background: #0b5e58;
    border-color: #0b5e58;
}

.panel-role-organization .btn-outline-primary {
    border-color: #4d9b94;
    color: #0f766e;
}

.panel-role-organization .form-control:focus,
.panel-role-organization .form-select:focus {
    border-color: #4d9b94;
    box-shadow: 0 0 0 .17rem rgba(15, 118, 110, .1);
}

html[data-panel-theme="dark"] .panel-role-admin {
    --panel-accent: #8fb3dc;
    --panel-accent-soft: #1d2d40;
}

html[data-panel-theme="dark"] .panel-role-teacher {
    --panel-accent: #dfa5b8;
    --panel-accent-soft: #38212c;
}

html[data-panel-theme="dark"] .panel-role-organization {
    --panel-bg: #081513;
    --panel-surface: #10211f;
    --panel-surface-soft: #0c1b19;
    --panel-border: #27413d;
    --panel-text: #e5f3f1;
    --panel-muted: #91aaa6;
    --panel-accent: #72cfc5;
    --panel-accent-soft: #173532;
}

/* White-label organization public pages */
.organization-public-shell {
    --org-brand: #0f766e;
    --org-ink: #102a2a;
    background: #f5f8f8;
    color: var(--org-ink);
    font-family: IRANSans, sans-serif;
}

.organization-public-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #dce9e7;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.organization-public-header>.container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 76px;
}

.organization-public-brand {
    align-items: center;
    color: var(--org-ink);
    display: flex;
    gap: .7rem;
    text-decoration: none;
}

.organization-public-brand img,
.organization-public-brand>span {
    align-items: center;
    background: #edf7f5;
    border: 1px solid #d5ebe7;
    border-radius: 10px;
    display: flex;
    height: 48px;
    justify-content: center;
    object-fit: contain;
    padding: .3rem;
    width: 48px;
}

.organization-public-brand>div {
    display: grid;
}

.organization-public-brand strong {
    font-size: .92rem;
    font-weight: 900;
}

.organization-public-brand small {
    color: #6f8582;
    font-size: .65rem;
}

.organization-public-header nav {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.organization-public-header nav a {
    border: 1px solid transparent;
    border-radius: 7px;
    color: #49625f;
    font-size: .75rem;
    font-weight: 800;
    padding: .55rem .72rem;
    text-decoration: none;
}

.organization-public-header nav a:hover,
.organization-public-header nav a.active {
    background: #eaf5f3;
    border-color: #d2e9e5;
    color: var(--org-brand);
}

.organization-public-footer {
    background: #0b2926;
    color: #a8c4c0;
    margin-top: 2rem;
}

.organization-public-footer .container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 74px;
}

.organization-public-footer a {
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.organization-public-hero {
    background: #0c3733;
    color: #fff;
    min-height: 420px;
    overflow: hidden;
    position: relative;
}

.organization-public-banner {
    background-image: linear-gradient(90deg, rgba(4, 31, 29, .93), rgba(7, 50, 46, .68)), var(--organization-banner);
    background-position: center;
    background-size: cover;
    inset: 0;
    opacity: .88;
    position: absolute;
}

.organization-public-hero::after {
    background: radial-gradient(circle at 10% 30%, rgba(106, 216, 204, .18), transparent 35%);
    content: '';
    inset: 0;
    position: absolute;
}

.organization-public-hero-content {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 420px;
    place-items: center stretch;
    position: relative;
    z-index: 1;
}

.organization-public-identity {
    align-items: center;
    display: flex;
    gap: 1.35rem;
}

.organization-public-logo {
    align-items: center;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 18px;
    display: flex;
    flex: 0 0 126px;
    height: 126px;
    justify-content: center;
    padding: .8rem;
}

.organization-public-logo img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.organization-public-logo i {
    font-size: 2.6rem;
}

.organization-public-identity span {
    color: #8ddbd2;
    font-size: .72rem;
    font-weight: 900;
}

.organization-public-identity h1 {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 950;
    margin: .35rem 0 .75rem;
}

.organization-public-identity p {
    color: #d6e8e5;
    line-height: 2.05;
    margin: 0;
    max-width: 700px;
}

.organization-public-stats {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    display: grid;
    min-width: 210px;
    padding: .35rem 1rem;
}

.organization-public-stats article {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    padding: .9rem 0;
}

.organization-public-stats article:last-child {
    border-bottom: 0;
}

.organization-public-stats strong {
    font-size: 1.2rem;
}

.organization-public-stats span {
    color: #bdd7d3;
    font-size: .68rem;
}

.organization-public-courses {
    padding: 3rem 0;
}

.organization-public-gallery {
    background: #eef5f4;
    border-bottom: 1px solid #dce9e7;
    padding: 1rem 0;
}

.organization-public-gallery>.container {
    display: grid;
    gap: .75rem;
    grid-auto-columns: minmax(280px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
}

.organization-public-gallery img {
    aspect-ratio: 16/5;
    border: 1px solid #d4e4e1;
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
}

.organization-public-courses>.container>header {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.organization-public-courses header span {
    color: var(--org-brand);
    font-size: .7rem;
    font-weight: 900;
}

.organization-public-courses header h2 {
    font-size: 1.35rem;
    font-weight: 950;
    margin: .25rem 0 0;
}

.organization-public-courses header>strong {
    color: #6c827f;
    font-size: .7rem;
}

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

.organization-course-card {
    background: #fff;
    border: 1px solid #dce7e5;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(21, 61, 57, .05);
    overflow: hidden;
}

.organization-course-image {
    display: block;
    overflow: hidden;
    position: relative;
}

.organization-course-image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .35s ease;
    width: 100%;
}

.organization-course-card:hover .organization-course-image img {
    transform: scale(1.025);
}

.organization-course-image>span {
    background: rgba(7, 43, 40, .82);
    border-radius: 5px;
    bottom: .6rem;
    color: #fff;
    font-size: .62rem;
    padding: .25rem .45rem;
    position: absolute;
    right: .6rem;
}

.organization-course-card>div {
    padding: .9rem;
}

.organization-course-card>div>small {
    color: #728783;
    font-size: .65rem;
}

.organization-course-card h3 {
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.8;
    margin: .25rem 0 .6rem;
    min-height: 3.2em;
}

.organization-course-card h3 a {
    color: var(--org-ink);
    text-decoration: none;
}

.organization-course-meta {
    color: #6e827f;
    display: flex;
    font-size: .65rem;
    gap: .8rem;
}

.organization-course-meta span {
    align-items: center;
    display: flex;
    gap: .25rem;
}

.organization-course-card footer {
    align-items: center;
    border-top: 1px solid #edf2f1;
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    padding-top: .75rem;
}

.organization-course-card footer strong {
    color: var(--org-brand);
    font-size: .78rem;
}

.organization-course-card footer a {
    color: var(--org-brand);
    font-size: .67rem;
    font-weight: 900;
    text-decoration: none;
}

.organization-public-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #cddedb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    grid-column: 1/-1;
    justify-content: center;
    min-height: 230px;
}

.organization-public-empty i {
    color: var(--org-brand);
    font-size: 2rem;
    margin-bottom: .5rem;
}

.organization-public-empty strong {
    font-size: .88rem;
}

.organization-public-empty span {
    color: #748783;
    font-size: .68rem;
    margin-top: .3rem;
}

.organization-context-home {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    gap: .35rem;
    margin-bottom: 1rem;
    padding: .45rem .65rem;
    text-decoration: none;
}

.organization-context-home:hover {
    background: #fff;
    color: var(--org-brand);
}

.organization-commerce-context {
    align-items: center;
    background: #e9f5f3;
    border: 1px solid #d0e8e4;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
    padding: .65rem;
}

.organization-commerce-context>span {
    color: #66807c;
    font-size: .68rem;
    font-weight: 800;
}

.organization-commerce-context a,
.cart-organization-link {
    align-items: center;
    color: #0f766e;
    display: inline-flex;
    font-size: .67rem;
    font-weight: 900;
    gap: .3rem;
    text-decoration: none;
}

.organization-commerce-context a {
    background: #fff;
    border: 1px solid #cce3df;
    border-radius: 6px;
    padding: .35rem .5rem;
}

.cart-organization-link {
    margin-top: .25rem;
}

@media (max-width:991.98px) {
    .organization-editor-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .organization-media-studio {
        grid-template-columns: 1fr;
    }

    .panel-role-admin .course-editor-tabbar .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-role-organization .panel-layout {
        grid-template-columns: 1fr;
    }

    .panel-role-organization .panel-sidebar {
        position: fixed;
        width: min(86vw, 285px);
    }

    .organization-public-hero-content {
        grid-template-columns: 1fr;
        padding-block: 3rem;
    }

    .organization-public-stats {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .organization-public-stats article {
        border-bottom: 0;
        border-left: 1px solid rgba(255, 255, 255, .12);
        display: grid;
        justify-items: center;
    }

    .organization-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:767.98px) {
    .organization-editor-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .organization-editor-tabs button {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: .45rem;
    }

    .organization-editor-tabs button>i {
        height: 32px;
        width: 32px;
    }

    .organization-editor-tabs button small {
        display: none;
    }

    .organization-banner-grid {
        grid-template-columns: 1fr;
    }

    .organization-new-banner {
        grid-template-columns: 1fr auto;
    }

    .organization-new-banner-copy {
        grid-column: 1/-1;
    }

    .panel-role-admin .course-editor-tabbar .nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .panel-role-admin .course-editor-tabbar .nav-link {
        flex: 0 0 235px;
    }

    .organization-public-header>.container {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        padding-block: .65rem;
    }

    .organization-public-header nav {
        overflow-x: auto;
        width: 100%;
    }

    .organization-public-header nav a {
        flex: 0 0 auto;
    }

    .organization-public-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .organization-public-logo {
        flex-basis: 92px;
        height: 92px;
        width: 92px;
    }

    .organization-public-stats {
        grid-template-columns: 1fr;
    }

    .organization-public-stats article {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        border-left: 0;
        display: flex;
    }

    .organization-course-grid {
        grid-template-columns: 1fr;
    }

    .organization-public-footer .container {
        align-items: flex-start;
        flex-direction: column;
        gap: .3rem;
        justify-content: center;
    }
}

/* Panel workspace --------------------------------------------------------- */
.panel-body {
    --panel-bg: #f4f7fb;
    --panel-surface: #ffffff;
    --panel-surface-soft: #f8fafc;
    --panel-border: #e4eaf1;
    --panel-text: #172033;
    --panel-muted: #718096;
    background: var(--panel-bg);
    color: var(--panel-text);
    min-height: 100vh;
    overflow-x: hidden;
}

.panel-body .panel-layout {
    grid-template-columns: 278px minmax(0, 1fr);
}

.panel-body .panel-sidebar {
    background: linear-gradient(180deg, #102c2a 0%, #0b201f 68%, #081918 100%);
    box-shadow: -10px 0 35px rgba(8, 25, 24, 0.12);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1040;
}

.panel-sidebar-head {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    min-height: 82px;
    padding: 1rem 1.15rem;
}

.panel-sidebar-head .brand-mark {
    min-width: 0;
}

.panel-sidebar-head .brand-mark>span {
    display: grid;
    line-height: 1.25;
    min-width: 0;
}

.panel-sidebar-head .brand-mark strong {
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-sidebar-head .brand-mark small {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 0.24rem;
}

.panel-sidebar-close,
.panel-menu-toggle,
.panel-icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    display: grid;
    place-items: center;
}

.panel-sidebar-close {
    color: #fff;
    display: none;
    font-size: 1.1rem;
}

.panel-body .panel-nav {
    align-content: start;
    display: grid;
    flex: 1;
    gap: 0.25rem;
    margin: 0;
    overflow-y: auto;
    padding: 1rem 0.85rem;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    scrollbar-width: thin;
}

.panel-nav-label {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0 !important;
    padding: 1.15rem 0.75rem 0.35rem;
}

.panel-nav-label:first-child {
    padding-top: 0.2rem;
}

.panel-body .panel-nav a {
    border: 1px solid transparent;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.72rem;
    min-height: 45px;
    padding: 0.55rem 0.65rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.panel-body .panel-nav a i {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 9px;
    display: flex;
    font-size: 1rem;
    height: 31px;
    justify-content: center;
    width: 31px;
}

.panel-body .panel-nav a.active,
.panel-body .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(21, 151, 136, 0.3), rgba(255, 255, 255, 0.07));
    border-color: rgba(129, 230, 217, 0.15);
    color: #fff;
    transform: translateX(-2px);
}

.panel-body .panel-nav a.active i {
    background: #22a897;
    box-shadow: 0 6px 18px rgba(34, 168, 151, 0.3);
}

.panel-sidebar-profile {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1.05rem;
}

.panel-avatar {
    background: linear-gradient(135deg, #39c6b5, #137c70);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #fff;
    display: grid;
    flex: 0 0 40px;
    font-weight: 900;
    height: 40px;
    place-items: center;
}

.panel-sidebar-profile>span:last-child {
    display: grid;
    min-width: 0;
}

.panel-sidebar-profile strong {
    color: #fff;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-sidebar-profile small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.67rem;
    margin-top: 0.2rem;
}

.panel-body .panel-main {
    background: var(--panel-bg);
}

.panel-body .panel-topbar {
    background: color-mix(in srgb, var(--panel-surface) 88%, transparent);
    backdrop-filter: blur(16px);
    border-color: var(--panel-border);
    min-height: 82px;
    padding: 0.9rem clamp(1rem, 2.6vw, 2rem);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.panel-heading-wrap,
.panel-topbar-actions {
    align-items: center;
    display: flex;
}

.panel-heading-wrap {
    gap: 0.8rem;
}

.panel-heading-wrap h1 {
    color: var(--panel-text);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 900;
    margin: 0.15rem 0 0;
}

.panel-breadcrumb {
    color: var(--panel-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.panel-breadcrumb i {
    color: #2eb6a5;
    font-size: 0.42rem;
    margin-left: 0.3rem;
}

.panel-topbar-actions {
    gap: 0.55rem;
}

.panel-icon-button,
.panel-menu-toggle {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    color: var(--panel-muted);
    height: 40px;
    width: 40px;
}

.panel-icon-button:hover,
.panel-menu-toggle:hover {
    border-color: #90d5cc;
    color: var(--mk-primary);
}

.panel-menu-toggle {
    display: none;
    font-size: 1.25rem;
}

.panel-logout-button {
    align-items: center;
    background: #fff1f1;
    border: 1px solid #ffd9d9;
    border-radius: 11px;
    color: #b94343;
    display: flex;
    font-size: 0.8rem;
    font-weight: 800;
    gap: 0.45rem;
    height: 40px;
    padding: 0 0.85rem;
}

.panel-logout-button:hover {
    background: #b94343;
    color: #fff;
}

.panel-body .panel-content {
    margin: 0 auto;
    max-width: 1680px;
    padding: clamp(1rem, 2.7vw, 2rem);
    width: 100%;
}

.panel-body .panel-card {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    border-radius: 18px;
    box-shadow: 0 10px 34px rgba(33, 48, 73, 0.055);
}

.panel-body .admin-card-head {
    border-color: var(--panel-border);
}

.panel-body .table,
.panel-body .form-label,
.panel-body .form-check-label,
.panel-body .modal-content {
    color: var(--panel-text);
}

.panel-body .text-secondary,
.panel-body .course-meta,
.panel-body .form-text,
.panel-body .table thead th {
    color: var(--panel-muted) !important;
}

.panel-body .table> :not(caption)>*>* {
    background: transparent;
    border-color: var(--panel-border);
    color: inherit;
}

.panel-body .form-control,
.panel-body .form-select,
.panel-body .select2-container--default .select2-selection--single,
.panel-body .select2-container--default .select2-selection--multiple {
    background-color: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

.panel-body .form-control:focus,
.panel-body .form-select:focus {
    background-color: var(--panel-surface);
    border-color: #38ab9e;
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.1);
    color: var(--panel-text);
}

.panel-backdrop {
    display: none;
}

.course-editor-tabbar {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(33, 48, 73, 0.045);
    margin-bottom: 1.25rem;
    padding: 0.55rem;
}

.course-editor-tabbar .nav {
    gap: 0.55rem;
}

.course-editor-tabbar .nav-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--panel-muted);
    display: flex;
    flex: 1 1 260px;
    gap: 0.75rem;
    padding: 0.72rem 0.9rem;
    text-align: right;
}

.course-editor-tabbar .nav-link>i {
    background: var(--panel-surface-soft);
    border-radius: 10px;
    display: grid;
    flex: 0 0 40px;
    font-size: 1.05rem;
    height: 40px;
    place-items: center;
}

.course-editor-tabbar .nav-link>span {
    display: grid;
    gap: 0.2rem;
}

.course-editor-tabbar .nav-link strong {
    color: var(--panel-text);
    font-size: 0.88rem;
}

.course-editor-tabbar .nav-link small {
    color: var(--panel-muted);
    font-size: 0.7rem;
}

.course-editor-tabbar .nav-link.active {
    background: #eaf8f5;
    border-color: #c9ebe5;
    color: #0f766e;
}

.course-editor-tabbar .nav-link.active>i {
    background: #0f766e;
    color: #fff;
}

.course-editor-tabbar .nav-link:disabled {
    opacity: 0.52;
}

.course-editor-tab-content>.tab-pane {
    outline: 0;
}

html[data-panel-theme="dark"] {
    color-scheme: dark;
}

html[data-panel-theme="dark"] .panel-body {
    --panel-bg: #0d131d;
    --panel-surface: #141d29;
    --panel-surface-soft: #101824;
    --panel-border: #263244;
    --panel-text: #e8eef7;
    --panel-muted: #91a0b5;
}

html[data-panel-theme="dark"] .panel-body .panel-sidebar {
    background: linear-gradient(180deg, #0a1d1c 0%, #071514 100%);
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.22);
}

html[data-panel-theme="dark"] .panel-body .panel-card,
html[data-panel-theme="dark"] .course-editor-tabbar {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

html[data-panel-theme="dark"] .panel-body .btn-light,
html[data-panel-theme="dark"] .panel-body .dropdown-menu,
html[data-panel-theme="dark"] .panel-body .modal-content,
html[data-panel-theme="dark"] .panel-body .list-group-item,
html[data-panel-theme="dark"] .panel-body .course-image-drop,
html[data-panel-theme="dark"] .panel-body .chapter-manager-card,
html[data-panel-theme="dark"] .panel-body .lesson-manager-row,
html[data-panel-theme="dark"] .panel-body .empty-structure-row {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

html[data-panel-theme="dark"] .panel-body .btn-outline-secondary {
    border-color: #516075;
    color: #b4c0d0;
}

html[data-panel-theme="dark"] .panel-body .panel-logout-button {
    background: rgba(185, 67, 67, 0.12);
    border-color: rgba(255, 128, 128, 0.18);
    color: #ff9d9d;
}

html[data-panel-theme="dark"] .panel-body .status-pill,
html[data-panel-theme="dark"] .course-editor-tabbar .nav-link.active {
    background: rgba(28, 164, 147, 0.15);
    border-color: rgba(85, 213, 196, 0.18);
    color: #7ee0d3;
}

html[data-panel-theme="dark"] .panel-body .select2-dropdown,
html[data-panel-theme="dark"] .panel-body .select2-search__field {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

@media (max-width: 991.98px) {
    .panel-body .panel-layout {
        grid-template-columns: 1fr;
    }

    .panel-body .panel-sidebar {
        height: 100dvh;
        max-width: min(86vw, 310px);
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(105%);
        transition: transform 0.25s ease;
        width: 310px;
    }

    .panel-body.panel-sidebar-open .panel-sidebar {
        transform: translateX(0);
    }

    .panel-sidebar-close,
    .panel-menu-toggle {
        display: grid;
    }

    .panel-body .panel-nav {
        grid-template-columns: 1fr;
    }

    .panel-backdrop {
        background: rgba(4, 12, 17, 0.58);
        border: 0;
        display: block;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 0.25s ease;
        visibility: hidden;
        z-index: 1035;
    }

    .panel-body.panel-sidebar-open .panel-backdrop {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .panel-body.panel-sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 575.98px) {
    .panel-body .panel-topbar {
        align-items: center;
        flex-direction: row;
        gap: 0.6rem;
        min-height: 72px;
        padding: 0.7rem 0.8rem;
    }

    .panel-breadcrumb,
    .panel-logout-button span {
        display: none;
    }

    .panel-logout-button {
        justify-content: center;
        padding: 0;
        width: 40px;
    }

    .panel-topbar-actions {
        gap: 0.35rem;
    }

    .panel-body .panel-content {
        padding: 0.85rem;
    }

    .course-editor-tabbar .nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .course-editor-tabbar .nav-link {
        width: 100%;
    }
}

/* Organization administration and workspace ------------------------- */
.auth-formal-panel-shell.role-organization {
    --auth-panel-accent: #4f7498;
    --auth-panel-deep: #172b40;
    --auth-panel-soft: #e7eef5;
}

.organization-owner-field {
    align-items: stretch;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.organization-owner-field>.btn {
    white-space: nowrap;
}

.organization-form-section {
    padding: .15rem;
}

.organization-current-logo {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: inline-flex;
    gap: .65rem;
    padding: .55rem;
}

.organization-current-logo img {
    background: #fff;
    border-radius: 6px;
    height: 54px;
    object-fit: contain;
    padding: 4px;
    width: 78px;
}

.organization-current-logo span {
    color: var(--panel-muted);
    font-size: .72rem;
    font-weight: 700;
    padding-inline-end: .45rem;
}

.organization-banner-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.organization-banner-grid>label {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    padding: .4rem;
}

.organization-banner-grid img {
    aspect-ratio: 16/6;
    border-radius: 5px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.organization-banner-grid label>span {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .68rem;
    gap: .4rem;
    padding: .55rem .25rem .15rem;
}

.organization-workspace-hero {
    background: linear-gradient(125deg, #172b40, #254966 62%, #45647d);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(12, 31, 48, .13);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 275px;
    min-height: 235px;
    overflow: hidden;
    position: relative;
}

.organization-workspace-hero::before {
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 24px 24px;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.organization-workspace-copy {
    align-self: center;
    padding: 1.7rem 2rem;
    position: relative;
    z-index: 1;
}

.organization-workspace-copy h2 {
    color: #fff;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 900;
    margin: .75rem 0 .35rem;
}

.organization-workspace-copy p {
    color: rgba(255, 255, 255, .7);
    line-height: 2;
    margin: 0 0 1rem;
    max-width: 720px;
}

.organization-workspace-copy .btn-outline-light {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.organization-workspace-mark {
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.organization-workspace-mark>span {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    display: flex;
    font-size: 2.2rem;
    height: 112px;
    justify-content: center;
    overflow: hidden;
    width: 150px;
}

.organization-workspace-mark img {
    background: #fff;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    width: 100%;
}

.organization-workspace-mark small {
    color: rgba(255, 255, 255, .48);
    direction: ltr;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.organization-banner-showcase .carousel {
    border-radius: 7px;
    overflow: hidden;
}

.organization-banner-showcase .carousel-item img {
    aspect-ratio: 16/5;
    display: block;
    object-fit: cover;
    width: 100%;
}

.organization-profile-head {
    background: linear-gradient(125deg, #172b40, #315574);
}

.organization-profile-status {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    display: flex;
    font-size: .72rem;
    font-weight: 800;
    gap: .4rem;
    padding: .55rem .75rem;
}

.organization-logo-editor span i {
    font-size: 2.25rem;
}

.organization-employee-total {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    min-width: 105px;
    padding: .65rem .9rem;
}

.organization-employee-total strong {
    color: var(--panel-text);
    font-size: 1.2rem;
}

.organization-employee-total small {
    color: var(--panel-muted);
    font-size: .65rem;
}

.organization-employee-add {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.organization-employee-add .btn {
    min-height: 44px;
}

html[data-panel-theme="dark"] .organization-workspace-hero {
    box-shadow: 0 14px 35px rgba(0, 0, 0, .24);
}

html[data-panel-theme="dark"] .organization-current-logo img {
    background: #edf1f5;
}

@media (max-width: 991.98px) {
    .organization-workspace-hero {
        grid-template-columns: 1fr;
    }

    .organization-workspace-mark {
        display: none;
    }
}

@media (max-width: 575.98px) {

    .organization-owner-field,
    .organization-employee-add {
        grid-template-columns: 1fr;
    }

    .organization-workspace-copy {
        padding: 1.25rem;
    }

    .organization-banner-grid {
        grid-template-columns: 1fr;
    }
}

/* Formal public experience — aligned with the administration typography. */
.public-body {
    --public-primary: #233f62;
    --public-primary-dark: #162b45;
    --public-accent: #a77d42;
    --public-ink: #172033;
    --public-muted: #697586;
    --public-line: #dfe4eb;
    --public-surface: #ffffff;
    --public-soft: #f2f4f7;
    --bs-body-font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    background: #f5f6f8;
    color: var(--public-ink);
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
}

.public-body :is(button, input, select, textarea, table),
.public-body .swiper,
.public-body .pagination {
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
}

.public-utility-bar {
    background: var(--public-primary-dark);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #c3cedb;
    min-height: 32px;
}

.public-utility-bar>.container {
    align-items: center;
    display: flex;
    font-size: .56rem;
    justify-content: space-between;
    min-height: 32px;
}

.public-utility-bar span,
.public-utility-bar nav {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.public-utility-bar i {
    color: #d2ad70;
}

.public-utility-bar a {
    color: #c3cedb;
    transition: color .15s ease;
}

.public-utility-bar a:hover {
    color: #fff;
}

.public-body .site-header-v2 {
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--public-line);
    box-shadow: 0 3px 14px rgba(20, 36, 55, .035);
    padding: 0;
}

.public-body .site-header-v2 .navbar {
    min-height: 68px;
}

.public-body .public-nav-shell {
    gap: .75rem;
}

.public-body .brand-mark>i {
    background: var(--public-primary);
    border-radius: 6px;
    color: #fff;
}

.public-body .public-brand-copy strong {
    color: var(--public-ink);
    font-size: .82rem;
}

.public-body .public-brand-copy small {
    color: var(--public-muted);
    font-size: .48rem;
}

.public-body .site-main-nav {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: .1rem;
    padding: 0;
}

.public-body .site-main-nav .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #526071;
    font-size: .63rem;
    font-weight: 750;
    padding: 1.25rem .55rem 1.05rem;
}

.public-body .site-main-nav .nav-link.active,
.public-body .site-main-nav .nav-link:hover {
    background: transparent;
    border-bottom-color: var(--public-accent);
    color: var(--public-primary);
}

.public-body .site-search {
    background: var(--public-soft);
    border: 1px solid var(--public-line);
    border-radius: 6px;
    min-height: 37px;
}

.public-body .site-search input {
    color: var(--public-ink);
    font-size: .58rem;
}

.public-body .site-user-actions .btn,
.public-body .btn {
    border-radius: 5px;
    font-weight: 800;
}

.public-body .btn-primary {
    background: var(--public-primary);
    border-color: var(--public-primary);
}

.public-body .btn-primary:hover {
    background: var(--public-primary-dark);
    border-color: var(--public-primary-dark);
}

.public-body .btn-outline-primary {
    border-color: #73859a;
    color: var(--public-primary);
}

.public-main {
    background: #f5f6f8;
    min-height: 60vh;
}

.public-main>section,
.public-main>article {
    animation: publicFormalReveal .38s ease both;
}

@keyframes publicFormalReveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.public-body .home-v2-shell {
    background:
        linear-gradient(90deg, rgba(35, 63, 98, .035) 1px, transparent 1px),
        linear-gradient(rgba(35, 63, 98, .035) 1px, transparent 1px),
        linear-gradient(145deg, #f8f9fb, #eef1f5);
    background-size: 34px 34px, 34px 34px, auto;
    border-bottom: 1px solid var(--public-line);
    padding: 3.4rem 0 1.5rem;
}

.public-body .home-v2-topline {
    align-items: center;
    gap: 3.5rem;
    grid-template-columns: minmax(0, 1fr) 410px;
}

.public-body .home-v2-kicker,
.public-body .section-kicker,
.public-body .page-kicker {
    color: var(--public-accent);
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: 0;
}

.public-body .home-v2-topline h1 {
    color: var(--public-primary-dark);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.55;
    max-width: 760px;
}

.public-body .home-v2-topline h1 em {
    color: var(--public-accent);
    font-style: normal;
}

.public-body .home-v2-topline h1 em::after {
    background: color-mix(in srgb, var(--public-accent) 30%, transparent);
}

.public-body .home-v2-topline p {
    color: var(--public-muted);
    font-size: .78rem;
    line-height: 2.15;
    max-width: 680px;
}

.home-v3-actions {
    gap: .55rem;
}

.public-body .home-v3-play {
    background: #fff;
    border: 1px solid var(--public-line);
    border-radius: 5px;
    color: var(--public-primary);
    font-size: .63rem;
    padding: .55rem .7rem;
}

.public-body .home-v3-play>i {
    background: var(--public-soft);
    border-radius: 4px;
    color: var(--public-primary);
}

.public-body .home-v3-trust span {
    color: #607083;
    font-size: .55rem;
}

.public-body .home-v3-trust i {
    color: var(--public-accent);
}

.public-body .home-v2-search {
    background: #fff;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(23, 42, 67, .09);
    padding: .5rem;
}

.public-body .home-v2-search button {
    background: var(--public-primary);
    border-radius: 5px;
}

.public-body .home-hero-grid-v2 {
    gap: .75rem;
    grid-template-columns: 230px minmax(0, 1fr);
    margin-top: 2rem;
}

.public-body .home-category-rail-v2,
.public-body .home-slider-panel-v2 {
    background: #fff;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(25, 42, 62, .035);
}

.public-body .home-category-rail-v2 {
    padding: .8rem;
}

.public-body .home-category-rail-v2 h2 {
    border-bottom: 1px solid var(--public-line);
    color: var(--public-primary-dark);
    font-size: .68rem;
    padding-bottom: .6rem;
}

.public-body .home-category-rail-v2 a {
    border-bottom: 1px solid #eef1f4;
    border-radius: 0;
    color: #5c6979;
    font-size: .56rem;
    min-height: 37px;
    padding: .45rem .2rem;
}

.public-body .home-category-rail-v2 a:hover {
    background: transparent;
    color: var(--public-primary);
    padding-right: .4rem;
}

.public-body .home-slider-panel-v2 {
    padding: .35rem;
}

.public-body .hero-swiper-v2,
.public-body .hero-swiper-v2 img {
    border-radius: 5px;
}

.public-body .home-v2-stats {
    background: var(--public-primary-dark);
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    margin-top: .75rem;
}

.public-body .home-v2-stats div {
    border-left-color: rgba(255, 255, 255, .11);
}

.public-body .home-v2-stats strong {
    color: #fff;
    font-size: 1rem;
}

.public-body .home-v2-stats span {
    color: #aebdcd;
    font-size: .53rem;
}

.public-body .mk-section {
    padding: 3.2rem 0;
}

.public-body .mk-section:nth-of-type(even) {
    background: #fff;
}

.public-body .mk-section-head {
    border-bottom: 1px solid var(--public-line);
    margin-bottom: 1rem;
    padding-bottom: .7rem;
}

.public-body .mk-section-head h2 {
    color: var(--public-primary-dark);
    font-size: 1rem;
    font-weight: 950;
}

.public-body .mk-section-head p {
    color: var(--public-muted) !important;
    font-size: .58rem;
}

.public-body .mk-section-head>a {
    color: var(--public-primary);
    font-size: .59rem;
}

.public-body .mk-tabs {
    gap: .3rem;
    margin-top: .45rem;
}

.public-body .mk-tabs span {
    background: var(--public-soft);
    border: 1px solid var(--public-line);
    border-radius: 4px;
    color: #687587;
    font-size: .52rem;
}

.public-body .home-category-card-v2,
.public-body .course-card,
.public-body .article-card,
.public-body .public-teacher-card,
.public-body .public-quiz-card {
    border: 1px solid var(--public-line);
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(24, 40, 61, .035);
}

.public-body :is(.home-category-card-v2, .course-card, .article-card, .public-teacher-card, .public-quiz-card):hover {
    border-color: #b7c2cf;
    box-shadow: 0 9px 25px rgba(24, 40, 61, .075);
    transform: translateY(-2px);
}

.public-body .course-thumb,
.public-body .course-thumb img,
.public-body .article-card img {
    border-radius: 7px 7px 0 0;
}

.public-body .course-category-badge {
    background: rgba(22, 43, 69, .9);
    border-radius: 4px;
}

.public-body .discount-badge {
    background: #a77d42;
    border-radius: 4px;
}

.public-body .course-title,
.public-body .article-card h2 a,
.public-body .public-teacher-copy h3 {
    color: var(--public-primary-dark);
}

.public-body .public-teacher-avatar,
.public-body .public-teacher-avatar img,
.public-body .public-teacher-avatar>span {
    border-radius: 7px;
}

.public-body .public-teacher-avatar>span {
    background: var(--public-primary);
}

.public-body .public-teacher-avatar>i,
.public-body .public-teacher-link,
.public-body .public-teacher-metrics i {
    color: var(--public-accent);
}

.public-body .page-hero,
.public-body .content-page-hero,
.public-body .teacher-directory-hero {
    background:
        linear-gradient(110deg, rgba(255, 255, 255, .04), transparent),
        var(--public-primary-dark);
    border: 0;
    color: #fff;
    padding: 3rem 0;
}

.public-body :is(.page-hero, .content-page-hero, .teacher-directory-hero) h1 {
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    font-weight: 950;
}

.public-body :is(.page-hero, .content-page-hero, .teacher-directory-hero) p {
    color: #b9c6d5;
    font-size: .7rem;
}

.public-body .teacher-directory-hero em {
    color: #d2ad70;
    font-style: normal;
}

.public-body .page-search,
.public-body .public-list-search,
.public-body .public-filter-bar,
.public-body .course-filter-panel {
    border: 1px solid var(--public-line);
    border-radius: 7px;
    box-shadow: none;
}

.public-body .public-page-head {
    align-items: center;
    gap: 1.5rem;
}

.public-body .site-footer-v2 {
    background: #101d2e;
    border-top: 3px solid var(--public-accent);
}

.public-body .public-footer-cta {
    background: #1a304b;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    box-shadow: none;
}

.public-body .public-footer-cta a {
    border-radius: 5px;
    color: var(--public-primary);
}

.public-body .footer-v2-grid h3 {
    color: #d4ad70;
}

.price-input-preview {
    align-items: center;
    color: var(--panel-muted, #718096);
    display: flex;
    font-size: .5rem;
    gap: .25rem;
    margin-top: .28rem;
    min-height: 18px;
}

.price-input-preview i {
    color: var(--panel-accent, #233f62);
}

.price-input-preview span {
    color: var(--panel-text, #172033);
    font-size: .56rem;
    font-weight: 900;
}

.public-body .price-input-preview {
    color: var(--public-muted);
}

.public-body .price-input-preview i,
.public-body .price-input-preview span {
    color: var(--public-primary);
}

@media(max-width:991.98px) {

    .public-body .home-v2-topline,
    .public-body .home-hero-grid-v2 {
        grid-template-columns: 1fr;
    }

    .public-body .site-main-nav .nav-link {
        border-bottom: 0;
        border-right: 2px solid transparent;
        padding: .6rem;
    }

    .public-body .site-main-nav .nav-link.active {
        border-right-color: var(--public-accent);
    }

    .public-body .site-search {
        max-width: none;
    }
}

@media(max-width:575.98px) {
    .public-utility-bar {
        display: none;
    }

    .public-body .home-v2-shell {
        padding-top: 2rem;
    }

    .public-body .home-v2-topline {
        gap: 1.4rem;
    }

    .public-body .home-v2-topline h1 {
        font-size: 1.75rem;
    }

    .public-body .home-v2-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .public-body .mk-section {
        padding: 2.25rem 0;
    }

    .public-body .public-page-head {
        align-items: stretch;
    }
}

/* Quiz question category browser ---------------------------------------- */
.quiz-question-manager {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
}

.quiz-question-manager-head {
    align-items: center;
    background: var(--panel-surface);
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .9rem 1rem;
}

.quiz-question-manager-kicker {
    color: var(--formal-gold);
    display: block;
    font-size: .48rem;
    font-weight: 900;
    margin-bottom: .2rem;
    text-transform: uppercase;
}

.quiz-question-manager-head h3 {
    color: var(--panel-text);
    font-size: .76rem;
    font-weight: 900;
    margin: 0;
}

.quiz-question-manager-head p {
    color: var(--panel-muted);
    font-size: .53rem;
    line-height: 1.9;
    margin: .2rem 0 0;
}

.quiz-question-stats {
    display: flex;
    flex: 0 0 auto;
    gap: .4rem;
}

.quiz-question-stats>span {
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-muted);
    font-size: .52rem;
    padding: .45rem .55rem;
}

.quiz-question-stats strong {
    color: var(--panel-accent);
    font-size: .62rem;
}

.quiz-selected-toolbar,
.quiz-question-browser-toolbar {
    align-items: center;
    display: flex;
    gap: .7rem;
    justify-content: space-between;
    padding: .75rem 1rem;
}

.quiz-selected-toolbar strong,
.quiz-selected-toolbar small {
    display: block;
}

.quiz-selected-toolbar strong {
    color: var(--panel-text);
    font-size: .62rem;
}

.quiz-selected-toolbar small {
    color: var(--panel-muted);
    font-size: .48rem;
    margin-top: .15rem;
}

.quiz-selected-empty {
    align-items: center;
    background: var(--panel-surface);
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 1rem 1rem;
    min-height: 150px;
    padding: 1.25rem;
    text-align: center;
}

.quiz-selected-empty i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.1rem;
    height: 42px;
    justify-content: center;
    margin-bottom: .55rem;
    width: 42px;
}

.quiz-selected-empty strong {
    color: var(--panel-text);
    font-size: .59rem;
}

.quiz-selected-empty span {
    color: var(--panel-muted);
    font-size: .49rem;
    margin-top: .2rem;
}

.quiz-selected-list {
    display: grid;
    gap: .4rem;
    padding: 0 1rem 1rem;
}

.quiz-selected-question {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 30px minmax(0, 1fr) auto 34px;
    min-height: 58px;
    padding: .5rem .6rem;
}

.quiz-selected-question-index {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 4px;
    color: var(--panel-accent);
    display: flex;
    font-size: .54rem;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.quiz-selected-question strong,
.quiz-selected-question small {
    display: block;
}

.quiz-selected-question strong {
    color: var(--panel-text);
    font-size: .58rem;
    line-height: 1.9;
}

.quiz-selected-question small {
    color: var(--panel-muted);
    font-size: .46rem;
    margin-top: .1rem;
}

.quiz-selected-question-score {
    background: var(--panel-surface-soft);
    border-radius: 4px;
    color: var(--panel-muted);
    font-size: .49rem;
    padding: .3rem .4rem;
    white-space: nowrap;
}

.quiz-selected-question .btn {
    align-items: center;
    display: flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.quiz-question-browser {
    background: var(--panel-surface);
    border-top: 1px solid var(--panel-border);
    padding-bottom: .75rem;
}

.quiz-question-browser-toolbar {
    border-bottom: 1px solid var(--panel-border);
}

.quiz-question-search {
    flex: 1 1 320px;
    max-width: 430px;
    position: relative;
}

.quiz-question-search>i {
    color: var(--panel-muted);
    font-size: .66rem;
    pointer-events: none;
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.quiz-question-search .form-control {
    padding-right: 2rem;
}

.quiz-question-browser-meta {
    color: var(--panel-muted);
    font-size: .5rem;
    margin-inline-start: auto;
    white-space: nowrap;
}

.quiz-question-browser .table-responsive {
    transition: opacity .15s ease;
}

.quiz-question-browser .table-responsive.is-loading {
    opacity: .42;
    pointer-events: none;
}

.quiz-question-browser .admin-table tr.is-selected td {
    background: color-mix(in srgb, var(--panel-accent-soft) 68%, var(--panel-surface));
}

.quiz-question-browser .admin-table td:first-child {
    max-width: 480px;
    min-width: 250px;
}

.quiz-question-browser .admin-table td:first-child strong {
    color: var(--panel-text);
    display: block;
    font-size: .56rem;
    line-height: 1.9;
}

.quiz-question-categories {
    color: var(--panel-muted);
    font-size: .49rem;
}

.quiz-question-browser-state {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .55rem;
    gap: .4rem;
    justify-content: center;
    min-height: 72px;
    padding: .75rem;
}

.quiz-question-browser-pagination {
    align-items: center;
    display: flex;
    gap: .45rem;
    justify-content: center;
    padding: .75rem .75rem 0;
}

.quiz-question-browser-pagination>span {
    color: var(--panel-muted);
    font-size: .51rem;
    min-width: 90px;
    text-align: center;
}

.quiz-question-browser-pagination .btn {
    min-width: 72px;
}

.quiz-category-modal {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    color: var(--panel-text);
}

.quiz-category-modal .modal-header,
.quiz-category-modal .modal-footer {
    border-color: var(--panel-border);
    padding: .8rem 1rem;
}

.quiz-category-modal .modal-title {
    color: var(--panel-text);
    font-size: .76rem;
    font-weight: 900;
}

.quiz-category-modal .modal-body {
    padding: 1rem;
}

.quiz-category-count {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 38px minmax(0, 1fr);
    margin-top: .8rem;
    min-height: 70px;
    padding: .65rem;
}

.quiz-category-count>i {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-muted);
    display: flex;
    font-size: .85rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.quiz-category-count strong,
.quiz-category-count span {
    display: block;
}

.quiz-category-count strong {
    color: var(--panel-text);
    font-size: .59rem;
}

.quiz-category-count span {
    color: var(--panel-muted);
    font-size: .48rem;
    margin-top: .18rem;
}

.quiz-category-count.is-loading>i {
    animation: quizCategoryPulse 1s ease-in-out infinite;
    color: var(--panel-accent);
}

.quiz-category-count.is-ready {
    border-color: color-mix(in srgb, var(--panel-accent) 48%, var(--panel-border));
}

.quiz-category-count.is-ready>i {
    background: var(--panel-accent-soft);
    color: var(--panel-accent);
}

.quiz-category-count.is-error,
.quiz-category-count.is-error>i {
    color: var(--panel-danger);
}

#quizQuestionCategoryModal .select2-container {
    z-index: 1065;
}

@keyframes quizCategoryPulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(.94);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 767.98px) {

    .quiz-question-manager-head,
    .quiz-selected-toolbar,
    .quiz-question-browser-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .quiz-question-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .quiz-question-stats>span {
        text-align: center;
    }

    .quiz-selected-toolbar .btn,
    .quiz-question-browser-toolbar .btn,
    .quiz-question-search {
        max-width: none;
        width: 100%;
    }

    .quiz-question-browser-meta {
        margin: 0;
        text-align: center;
    }

    .quiz-selected-question {
        grid-template-columns: 30px minmax(0, 1fr) 32px;
    }

    .quiz-selected-question-score {
        grid-column: 2 / 3;
        justify-self: start;
    }

    .quiz-selected-question .btn {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* Course certificate rules and issued certificates */
.certificate-rule-toggle {
    background: color-mix(in srgb, var(--panel-primary, #18314d) 5%, var(--panel-card, #fff));
    border: 1px solid var(--panel-border, #dce3ea);
    border-radius: 10px;
    padding: .85rem 3.4rem .85rem 1rem;
}

.certificate-rule-toggle .form-check-input:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.certificate-rule-note {
    align-items: center;
    background: rgba(49, 95, 141, .07);
    border: 1px solid rgba(49, 95, 141, .14);
    border-radius: 8px;
    color: var(--panel-muted, #667587);
    display: flex;
    font-size: .64rem;
    gap: .55rem;
    margin-top: .75rem;
    padding: .7rem .8rem;
}

.certificate-rule-note i {
    color: #315f8d;
    font-size: .9rem;
}

.certificate-rule-note.is-quiz-required {
    background: rgba(20, 125, 91, .07);
    border-color: rgba(20, 125, 91, .16);
}

.certificate-rule-note.is-quiz-required i {
    color: #147d5b;
}

.issued-certificate-stage {
    align-items: center;
    background-color: #e8edf2;
    background-image: linear-gradient(45deg, rgba(24, 49, 77, .035) 25%, transparent 25%), linear-gradient(-45deg, rgba(24, 49, 77, .035) 25%, transparent 25%);
    background-size: 22px 22px;
    display: flex;
    justify-content: center;
    min-height: 680px;
    overflow: auto;
    padding: 2rem;
}

.issued-certificate-stage .certificate-page.is-portrait {
    max-width: 560px;
}

.issued-certificate-stage .certificate-page.is-landscape {
    max-width: 820px;
}

.issued-certificate-page .certificate-header-label {
    margin-top: .2%;
}

.certificate-issued-editor-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(390px, .85fr) minmax(520px, 1.15fr);
}

.certificate-issued-editor-grid>.issued-certificate-stage {
    min-height: 580px;
    position: sticky;
    top: 1rem;
}

.certificate-linked-alert {
    align-items: center;
    background: rgba(20, 125, 91, .08);
    border: 1px solid rgba(20, 125, 91, .18);
    color: var(--panel-text, #203044);
    display: flex;
    gap: .75rem;
}

.certificate-linked-alert>i {
    color: #147d5b;
    font-size: 1.3rem;
}

.certificate-linked-alert>div {
    display: grid;
    flex: 1;
    gap: .1rem;
}

.certificate-linked-alert strong {
    font-size: .72rem;
}

.certificate-linked-alert span {
    color: var(--panel-muted, #6d7a89);
    font-size: .58rem;
}

.certificate-client-grid {
    display: grid;
    gap: .85rem;
}

.certificate-client-card {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.certificate-client-card>span {
    align-items: center;
    background: linear-gradient(145deg, #18314d, #2f5278);
    border-radius: 10px;
    color: #d8b675;
    display: flex;
    font-size: 1.6rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.certificate-client-card h3 {
    font-size: .82rem;
    font-weight: 900;
    margin: .15rem 0;
}

.certificate-client-card small {
    color: #b08a4f;
    direction: ltr;
    font-size: .52rem;
}

.certificate-client-card p {
    color: var(--panel-muted, #6d7a89);
    font-size: .6rem;
    margin: 0;
}

.certificate-client-card>div:last-child {
    display: flex;
    gap: .45rem;
}

.quiz-question-source-tools {
    background: color-mix(in srgb, var(--panel-surface) 94%, #dce7f2);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    display: grid;
    gap: .7rem;
    margin-bottom: .85rem;
    padding: .75rem;
}

.quiz-question-source-head {
    align-items: center;
    display: grid;
    gap: .7rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.quiz-question-source-head>span {
    align-items: center;
    background: rgba(49, 95, 141, .1);
    border: 1px solid rgba(49, 95, 141, .14);
    border-radius: 7px;
    color: #315f8d;
    display: flex;
    font-size: 1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.quiz-question-source-head>div:nth-child(2) {
    display: grid;
    gap: .12rem;
}

.quiz-question-source-head strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.quiz-question-source-head small {
    color: var(--panel-muted);
    font-size: .55rem;
    line-height: 1.8;
}

.quiz-question-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.quiz-question-source-links .btn {
    font-size: .57rem;
}

.quiz-question-import-shell {
    align-items: stretch;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .55rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.quiz-question-import-shell.has-file {
    border-color: rgba(20, 125, 91, .45);
    box-shadow: 0 0 0 3px rgba(20, 125, 91, .06);
}

.quiz-question-import-dropzone {
    align-items: center;
    border: 1px dashed color-mix(in srgb, var(--panel-border) 75%, #315f8d);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: .65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 0;
    min-height: 60px;
    padding: .5rem .65rem;
    transition: background .2s ease, border-color .2s ease;
}

.quiz-question-import-dropzone:hover {
    background: rgba(49, 95, 141, .035);
    border-color: #55789d;
}

.quiz-question-import-icon {
    align-items: center;
    background: rgba(20, 125, 91, .1);
    border-radius: 6px;
    color: #147d5b;
    display: flex;
    font-size: 1.1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.quiz-question-import-copy {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.quiz-question-import-copy strong {
    color: var(--panel-text);
    font-size: .62rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-question-import-copy small {
    color: var(--panel-muted);
    font-size: .52rem;
}

.quiz-question-import-dropzone .btn,
.quiz-question-import-submit {
    align-items: center;
    display: inline-flex;
    font-size: .57rem;
    gap: .35rem;
    justify-content: center;
}

.quiz-question-import-submit {
    min-width: 142px;
}

.quiz-question-import-status {
    align-items: center;
    border-radius: 7px;
    display: flex;
    font-size: .58rem;
    gap: .4rem;
    padding: .5rem .65rem;
}

.quiz-question-import-status.is-success {
    background: rgba(20, 125, 91, .08);
    color: #147d5b;
}

.quiz-question-import-status.is-error {
    background: rgba(183, 55, 63, .08);
    color: #b7373f;
}

.quiz-question-import-progress {
    margin-top: -.1rem;
}

html[data-panel-theme="dark"] .issued-certificate-stage {
    background-color: #101b29;
}

html[data-panel-theme="dark"] .certificate-rule-toggle {
    background: rgba(255, 255, 255, .025);
}

html[data-panel-theme="dark"] .certificate-linked-alert {
    background: rgba(51, 180, 135, .08);
    color: #dce6f1;
}

html[data-panel-theme="dark"] .quiz-question-source-tools {
    background: rgba(255, 255, 255, .025);
}

html[data-panel-theme="dark"] .quiz-question-source-head>span {
    color: #8fb3da;
}

html[data-panel-theme="dark"] .quiz-question-import-icon {
    color: #55c8a0;
}

@media (max-width: 1199.98px) {
    .certificate-issued-editor-grid {
        grid-template-columns: 1fr;
    }

    .certificate-issued-editor-grid>.issued-certificate-stage {
        position: static;
    }

    .quiz-question-source-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .quiz-question-source-links {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .issued-certificate-stage {
        min-height: 460px;
        padding: .75rem;
    }

    .certificate-client-card {
        align-items: start;
        grid-template-columns: auto 1fr;
    }

    .certificate-client-card>div:last-child {
        grid-column: 1 / -1;
    }

    .certificate-linked-alert {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .certificate-linked-alert .btn {
        width: 100%;
    }

    .quiz-question-import-shell {
        grid-template-columns: 1fr;
    }

    .quiz-question-import-submit {
        width: 100%;
    }

    .quiz-question-import-dropzone {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .quiz-question-import-dropzone .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .quiz-question-source-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .quiz-question-source-links .btn {
        justify-content: center;
    }
}

/* Quiz sales, public catalog and client assessment center ---------------- */
.quiz-editor-tabs {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1rem;
    padding: .35rem;
}

.quiz-editor-tabs button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--panel-muted);
    display: flex;
    font-size: .58rem;
    font-weight: 800;
    gap: .4rem;
    justify-content: center;
    min-height: 42px;
}

.quiz-editor-tabs button.active {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    color: var(--panel-accent);
    box-shadow: 0 2px 7px rgba(15, 23, 42, .04);
}

.quiz-editor-tab-content>.tab-pane {
    min-height: 390px;
}

.quiz-sale-settings {
    display: grid;
    gap: .8rem;
}

.quiz-sale-intro {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .75rem;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: .8rem;
}

.quiz-sale-intro>span {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.quiz-sale-intro h3 {
    color: var(--panel-text);
    font-size: .7rem;
    font-weight: 900;
    margin: 0;
}

.quiz-sale-intro p {
    color: var(--panel-muted);
    font-size: .52rem;
    line-height: 1.9;
    margin: .15rem 0 0;
}

.quiz-sale-toggle {
    border-radius: 7px;
    min-height: 72px;
    padding: .8rem !important;
}

.quiz-sale-toggle .form-check-label strong {
    color: var(--panel-text);
    font-size: .65rem;
}

.quiz-sale-toggle .form-check-label small {
    font-size: .5rem;
}

.quiz-sale-fields {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    padding: .9rem;
}

.quiz-sale-fields-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
}

.quiz-sale-fields-head strong,
.quiz-sale-fields-head small {
    display: block;
}

.quiz-sale-fields-head strong {
    color: var(--panel-text);
    font-size: .64rem;
}

.quiz-sale-fields-head small {
    color: var(--panel-muted);
    font-size: .48rem;
    margin-top: .15rem;
}

.quiz-sale-note {
    align-items: center;
    background: var(--panel-surface-soft);
    border-radius: 5px;
    color: var(--panel-muted);
    display: flex;
    font-size: .5rem;
    gap: .4rem;
    line-height: 1.9;
    margin-top: .8rem;
    padding: .55rem;
}

.quiz-sale-note i {
    color: var(--panel-accent);
}

.quiz-sale-aside-status {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: flex;
    gap: .55rem;
    padding: .55rem;
}

.quiz-sale-aside-status>i {
    color: var(--panel-accent);
    font-size: .85rem;
}

.quiz-sale-aside-status strong,
.quiz-sale-aside-status span {
    display: block;
}

.quiz-sale-aside-status strong {
    color: var(--panel-text);
    font-size: .54rem;
}

.quiz-sale-aside-status span {
    color: var(--panel-muted);
    font-size: .46rem;
    margin-top: .1rem;
}

.quiz-public-hero {
    background: linear-gradient(135deg, #f4f7fb, #edf2f7);
}

.public-list-search {
    align-items: center;
    background: #fff;
    border: 1px solid #dce4ec;
    border-radius: 8px;
    display: flex;
    gap: .45rem;
    max-width: 440px;
    padding: .35rem;
    width: 100%;
}

.public-list-search>i {
    color: #758498;
    margin-right: .35rem;
}

.public-list-search input {
    background: transparent;
    border: 0;
    box-shadow: none;
    flex: 1;
    font-size: .76rem;
    min-width: 0;
    outline: 0;
}

.public-list-search .btn {
    flex: 0 0 auto;
}

.public-quiz-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-quiz-card {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.public-quiz-card:hover {
    border-color: #b9c7d6;
    box-shadow: 0 14px 38px rgba(25, 43, 65, .08);
    transform: translateY(-2px);
}

.public-quiz-card-cover {
    display: block;
    height: 190px;
    overflow: hidden;
    position: relative;
}

.public-quiz-card-cover img {
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%;
}

.public-quiz-card:hover .public-quiz-card-cover img {
    transform: scale(1.035);
}

.public-quiz-card-cover>span {
    background: rgba(17, 31, 48, .88);
    border-radius: 5px;
    bottom: .65rem;
    color: #fff;
    font-size: .67rem;
    padding: .3rem .45rem;
    position: absolute;
    right: .65rem;
}

.public-quiz-card-body {
    flex: 1;
    padding: .85rem;
}

.public-quiz-card-kicker {
    color: #9b7338;
    font-size: .6rem;
    font-weight: 900;
}

.public-quiz-card h2 {
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.8;
    margin: .25rem 0;
}

.public-quiz-card h2 a {
    color: #172033;
}

.public-quiz-card p {
    color: #718096;
    font-size: .69rem;
    line-height: 2;
    min-height: 55px;
}

.public-quiz-card-meta {
    border-top: 1px solid #edf0f4;
    display: flex;
    gap: .75rem;
    padding-top: .55rem;
}

.public-quiz-card-meta span {
    color: #67778b;
    font-size: .62rem;
}

.public-quiz-card-meta i {
    color: #365777;
    margin-left: .2rem;
}

.public-quiz-card footer {
    align-items: center;
    background: #f8f9fb;
    border-top: 1px solid #e8edf2;
    display: flex;
    justify-content: space-between;
    padding: .7rem .85rem;
}

.public-quiz-card footer>a {
    color: #284d72;
    font-size: .66rem;
    font-weight: 800;
}

.public-quiz-price del,
.public-quiz-price strong {
    display: block;
}

.public-quiz-price del {
    color: #9aa4b1;
    font-size: .56rem;
}

.public-quiz-price strong {
    color: #172033;
    font-size: .83rem;
}

.public-quiz-price small {
    font-size: .55rem;
}

.public-empty-wide {
    grid-column: 1/-1;
}

.quiz-detail-hero {
    background: linear-gradient(145deg, #111f31, #1c3450);
    color: #fff;
    padding: 4.2rem 0;
}

.quiz-detail-grid {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.quiz-detail-copy h1 {
    font-size: 2rem;
    font-weight: 950;
    line-height: 1.65;
    margin: .5rem 0;
}

.quiz-detail-copy>p {
    color: #b9c6d5;
    font-size: .84rem;
    line-height: 2.2;
    max-width: 720px;
}

.quiz-detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}

.quiz-detail-facts span {
    align-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #d8e0e9;
    display: flex;
    font-size: .69rem;
    gap: .35rem;
    padding: .5rem .65rem;
}

.quiz-detail-facts i {
    color: #d0a767;
}

.quiz-purchase-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
    color: #172033;
    overflow: hidden;
    padding: .75rem;
}

.quiz-purchase-card>img {
    border-radius: 8px;
    height: 175px;
    object-fit: cover;
    width: 100%;
}

.quiz-purchase-price {
    padding: .75rem 0;
}

.quiz-purchase-price del,
.quiz-purchase-price span,
.quiz-purchase-price strong {
    display: block;
}

.quiz-purchase-price del {
    color: #8d99a8;
    font-size: .65rem;
}

.quiz-purchase-price span {
    color: #a05b52;
    font-size: .57rem;
    margin: .15rem 0;
}

.quiz-purchase-price strong {
    font-size: 1.25rem;
}

.quiz-purchase-price strong small {
    font-size: .65rem;
}

.quiz-purchase-card>small {
    color: #788696;
    display: block;
    font-size: .57rem;
    margin-top: .55rem;
    text-align: center;
}

.quiz-description-card {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    margin-top: -1.5rem;
    padding: 1.2rem;
    position: relative;
}

.quiz-description-card h2 {
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
}

.quiz-description-card>div {
    color: #5f6f82;
    font-size: .76rem;
    line-height: 2.2;
}

.client-quiz-hero {
    align-items: center;
    background: linear-gradient(135deg, #172b43, #274968);
    border-radius: 10px;
    color: #fff;
    display: flex;
    gap: 1.2rem;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding: 1.1rem;
}

.client-quiz-hero>div:first-child>span {
    color: #d2ad70;
    font-size: .52rem;
    font-weight: 900;
}

.client-quiz-hero h2 {
    font-size: 1rem;
    font-weight: 900;
    margin: .2rem 0;
}

.client-quiz-hero p {
    color: #bac7d5;
    font-size: .57rem;
    margin: 0;
}

.client-quiz-summary {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(3, 110px);
}

.client-quiz-summary article {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 30px 1fr;
    padding: .5rem;
}

.client-quiz-summary i {
    color: #d2ad70;
    grid-row: 1/3;
}

.client-quiz-summary strong {
    font-size: .72rem;
}

.client-quiz-summary span {
    color: #b7c4d2;
    font-size: .45rem;
}

.client-quiz-section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.client-quiz-section-head h3 {
    color: var(--panel-text);
    font-size: .68rem;
    font-weight: 900;
    margin: 0;
}

.client-quiz-section-head p {
    color: var(--panel-muted);
    font-size: .48rem;
    margin: .15rem 0 0;
}

.client-quiz-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-quiz-card {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .7rem;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    padding: .55rem;
}

.client-quiz-card img {
    border-radius: 5px;
    height: 70px;
    object-fit: cover;
    width: 86px;
}

.client-quiz-card span {
    color: var(--formal-gold);
    font-size: .45rem;
    font-weight: 900;
}

.client-quiz-card h3 {
    color: var(--panel-text);
    font-size: .62rem;
    font-weight: 900;
    margin: .15rem 0;
}

.client-quiz-card p {
    color: var(--panel-muted);
    font-size: .48rem;
    margin: 0;
}

.client-quiz-taking-head,
.quiz-report-head {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .8rem;
    padding: .8rem;
}

.client-quiz-taking-head span,
.quiz-report-head>div:first-child>span {
    color: var(--formal-gold);
    font-size: .48rem;
    font-weight: 900;
}

.client-quiz-taking-head h2,
.quiz-report-head h2 {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 900;
    margin: .15rem 0;
}

.client-quiz-taking-head p,
.quiz-report-head p {
    color: var(--panel-muted);
    font-size: .5rem;
    margin: 0;
}

.standalone-quiz-form {
    display: grid;
    gap: .65rem;
}

.standalone-quiz-question {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .8rem;
}

.standalone-quiz-question legend {
    align-items: flex-start;
    color: var(--panel-text);
    display: grid;
    float: none;
    gap: .5rem;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    margin: 0 0 .65rem;
    width: 100%;
}

.standalone-quiz-question legend>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 4px;
    color: var(--panel-accent);
    display: flex;
    font-size: .53rem;
    height: 28px;
    justify-content: center;
}

.standalone-quiz-question legend strong {
    font-size: .61rem;
    line-height: 1.9;
}

.standalone-quiz-question legend small {
    color: var(--panel-muted);
    font-size: .48rem;
    white-space: nowrap;
}

.standalone-quiz-options {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.standalone-quiz-options label {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-text);
    cursor: pointer;
    display: flex;
    font-size: .54rem;
    gap: .4rem;
    min-height: 42px;
    padding: .45rem;
}

.standalone-quiz-options input {
    accent-color: var(--panel-accent);
}

.standalone-quiz-submit {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    bottom: .5rem;
    display: flex;
    justify-content: space-between;
    padding: .65rem;
    position: sticky;
    z-index: 5;
}

.standalone-quiz-submit span {
    color: var(--panel-muted);
    font-size: .5rem;
}

.learning-quiz-history a {
    background: var(--panel-accent-soft);
    border-radius: 5px;
    color: var(--panel-accent);
    font-size: .5rem;
    padding: .4rem;
    text-decoration: none;
}

.quiz-report-score {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 6px;
    display: flex;
    gap: .35rem;
    padding: .5rem .7rem;
}

.quiz-report-score small,
.quiz-report-score span {
    color: var(--panel-muted);
    font-size: .48rem;
}

.quiz-report-score strong {
    color: var(--panel-accent);
    font-size: 1rem;
}

.quiz-report-actions {
    display: flex;
    gap: .4rem;
}

.quiz-report-list {
    display: grid;
    gap: .6rem;
}

.quiz-report-item {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 3px solid var(--panel-muted);
    border-radius: 7px;
    padding: .7rem;
}

.quiz-report-item.is-correct {
    border-right-color: #218764;
}

.quiz-report-item.is-wrong {
    border-right-color: #b64a52;
}

.quiz-report-item.is-pending {
    border-right-color: #b58a4a;
}

.quiz-report-item header {
    align-items: start;
    display: grid;
    gap: .5rem;
    grid-template-columns: 28px minmax(0, 1fr) auto;
}

.quiz-report-item header>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border-radius: 4px;
    display: flex;
    font-size: .52rem;
    height: 28px;
    justify-content: center;
}

.quiz-report-item header strong {
    color: var(--panel-text);
    font-size: .59rem;
    line-height: 1.9;
}

.quiz-report-item header b {
    color: var(--panel-muted);
    font-size: .49rem;
}

.quiz-report-item>div {
    background: var(--panel-surface-soft);
    border-radius: 5px;
    margin: .6rem 2.4rem .45rem 0;
    padding: .5rem;
}

.quiz-report-item>div small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.quiz-report-item>div p {
    color: var(--panel-text);
    font-size: .54rem;
    margin: .15rem 0 0;
}

.quiz-report-item footer {
    color: var(--panel-muted);
    font-size: .48rem;
    margin-right: 2.4rem;
}

@media(max-width:991.98px) {
    .public-quiz-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .quiz-detail-grid {
        grid-template-columns: 1fr
    }

    .quiz-purchase-card {
        max-width: 480px
    }

    .client-quiz-hero {
        align-items: stretch;
        flex-direction: column
    }

    .client-quiz-summary {
        grid-template-columns: repeat(3, 1fr)
    }

    .client-quiz-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:575.98px) {
    .quiz-editor-tabs {
        grid-template-columns: 1fr
    }

    .public-quiz-grid {
        grid-template-columns: 1fr
    }

    .public-page-head {
        align-items: stretch
    }

    .public-list-search {
        max-width: none
    }

    .quiz-detail-hero {
        padding: 2.5rem 0
    }

    .quiz-detail-copy h1 {
        font-size: 1.35rem
    }

    .client-quiz-summary {
        grid-template-columns: 1fr
    }

    .client-quiz-section-head,
    .client-quiz-taking-head,
    .quiz-report-head,
    .standalone-quiz-submit {
        align-items: stretch;
        flex-direction: column
    }

    .client-quiz-card {
        grid-template-columns: 70px minmax(0, 1fr)
    }

    .client-quiz-card img {
        height: 60px;
        width: 70px
    }

    .client-quiz-card .btn {
        grid-column: 1/-1
    }

    .standalone-quiz-options {
        grid-template-columns: 1fr
    }

    .quiz-report-actions {
        display: grid
    }

    .quiz-report-item>div,
    .quiz-report-item footer {
        margin-right: 0
    }
}

@media print {

    .panel-sidebar,
    .panel-topbar,
    .quiz-report-actions,
    .panel-backdrop {
        display: none !important;
    }

    .panel-layout,
    .panel-main {
        display: block !important;
    }

    .panel-content {
        max-width: none !important;
        padding: 0 !important;
    }

    .quiz-report-item {
        break-inside: avoid;
    }
}

.public-quiz-price>span {
    color: #a05b52;
    display: block;
    font-size: .52rem;
    font-weight: 800;
    margin: .05rem 0;
}

@font-face {
    font-family: "IRANSans";
    font-style: normal;
    font-weight: 400;
    src: local("IRANSans"), local("IRANSansWeb");
    font-display: swap;
}

/* Local IRANSans family used by the administration and teacher workspaces. */
@font-face {
    font-family: "IRANSansPanel";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/IRANSansWeb_UltraLight.woff2") format("woff2"),
        url("../fonts/IRANSansWeb_UltraLight.woff") format("woff"),
        url("../fonts/IRANSansWeb_UltraLight.ttf") format("truetype");
}

@font-face {
    font-family: "IRANSansPanel";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/IRANSansWeb_Light.woff2") format("woff2"),
        url("../fonts/IRANSansWeb_Light.ttf") format("truetype");
}

@font-face {
    font-family: "IRANSansPanel";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IRANSansWeb.woff2") format("woff2"),
        url("../fonts/IRANSansWeb.woff") format("woff"),
        url("../fonts/IRANSansWeb.ttf") format("truetype");
}

@font-face {
    font-family: "IRANSansPanel";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IRANSansWeb_Medium.woff2") format("woff2"),
        url("../fonts/IRANSansWeb_Medium.woff") format("woff"),
        url("../fonts/IRANSansWeb_Medium.ttf") format("truetype");
}

@font-face {
    font-family: "IRANSansPanel";
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url("../fonts/IRANSansWeb_Bold.woff2") format("woff2"),
        url("../fonts/IRANSansWeb_Bold.woff") format("woff"),
        url("../fonts/IRANSansWeb_Bold.ttf") format("truetype");
}

@font-face {
    font-family: "IRANSans";
    font-style: normal;
    font-weight: 700;
    src: local("IRANSans Bold"), local("IRANSansWeb_Bold");
    font-display: swap;
}

* {
    letter-spacing: 0;
}

body {
    background: #f7f9fb;
    color: var(--mk-ink);
    font-family: "IRANSans", Tahoma, Arial, sans-serif;
}

a {
    text-decoration: none;
}

.site-header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e8eef2;
    backdrop-filter: blur(12px);
}

.navbar {
    min-height: 68px;
}

.brand-mark {
    align-items: center;
    color: var(--mk-primary-dark);
    display: inline-flex;
    font-weight: 800;
    gap: 0.55rem;
}

.brand-mark i {
    background: #e1f4ef;
    border-radius: 8px;
    color: var(--mk-primary);
    display: grid;
    height: 34px;
    place-items: center;
    width: 34px;
}

.brand-logo {
    border-radius: 8px;
    height: 36px;
    object-fit: contain;
    width: 36px;
}

.site-search {
    align-items: center;
    background: #f7f9fa;
    border: 1px solid #e8edf0;
    border-radius: 8px;
    color: var(--mk-muted);
    display: flex;
    flex: 1 1 380px;
    gap: 0.65rem;
    max-width: 520px;
    padding: 0.58rem 0.85rem;
}

.site-search input {
    background: transparent;
    border: 0;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.nav-soft-link {
    color: #475569;
    font-size: 0.92rem;
    font-weight: 700;
}

.btn-primary {
    --bs-btn-bg: var(--mk-primary);
    --bs-btn-border-color: var(--mk-primary);
    --bs-btn-hover-bg: var(--mk-primary-dark);
    --bs-btn-hover-border-color: var(--mk-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--mk-primary);
    --bs-btn-border-color: var(--mk-primary);
    --bs-btn-hover-bg: var(--mk-primary);
    --bs-btn-hover-border-color: var(--mk-primary);
}

.hero {
    background-position: center;
    background-size: cover;
    color: #fff;
    min-height: 560px;
    padding: 8rem 0 6rem;
}

.hero-copy {
    max-width: 720px;
}

.hero-kicker {
    color: #b7f3df;
    font-weight: 700;
}

.hero h1 {
    font-size: clamp(2.25rem, 4vw, 4.75rem);
    font-weight: 900;
    line-height: 1.2;
}

.hero p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.1rem;
    line-height: 2;
}

.section-pad {
    padding: 4.5rem 0;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 900;
}

.muted-copy {
    color: var(--mk-muted);
    line-height: 1.9;
}

.stat-card,
.course-card,
.category-tile,
.panel-card {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 8px;
}

.stat-card {
    padding: 1.25rem;
}

.stat-card strong {
    color: var(--mk-primary-dark);
    display: block;
    font-size: 1.65rem;
}

.course-card {
    height: 100%;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover {
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.course-thumb {
    display: block;
    position: relative;
}

.course-thumb::after {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.38) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.course-card img,
.course-thumb img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.course-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 214px;
    padding: 1rem;
}

.course-title {
    color: var(--mk-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.65;
}

.course-title:hover {
    color: var(--mk-primary-dark);
}

.course-meta {
    color: var(--mk-muted);
    font-size: 0.88rem;
}

.course-rate {
    color: #f59e0b;
    font-size: 0.86rem;
    font-weight: 800;
}

.course-category-badge {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    bottom: 0.75rem;
    color: #24413b;
    font-size: 0.76rem;
    font-weight: 900;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
    padding: 0.25rem 0.6rem;
    position: absolute;
    right: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
}

.course-instructor {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 0.86rem;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.course-card-stats {
    align-items: center;
    border-bottom: 1px solid #edf2f4;
    border-top: 1px solid #edf2f4;
    color: #60727d;
    display: grid;
    font-size: 0.82rem;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: auto;
    padding: 0.65rem 0;
}

.course-card-stats span {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
}

.course-card-stats i {
    color: var(--mk-primary);
}

.course-card-stats .bi-star-fill {
    color: #f59e0b;
}

.course-card-footer {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
    padding-top: 0.85rem;
}

.course-price-box {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
}

.price-tag {
    color: var(--mk-primary-dark);
    font-weight: 900;
}

.old-price {
    color: #94a3b8;
    font-size: 0.86rem;
    text-decoration: line-through;
}

.discount-badge {
    background: #ef4444;
    border-radius: 0 0 0 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    padding: 0.35rem 0.55rem;
    position: absolute;
    right: 0;
    top: 0;
}

.certificate-label {
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 800;
}

.mk-home-hero {
    background: linear-gradient(180deg, #f4fbf8 0%, #ffffff 100%);
    border-bottom: 1px solid #e3ebe8;
    padding: 2.4rem 0 1.6rem;
}

.mk-hero-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.mk-hero-main {
    background: #e6f5ef;
    border: 1px solid #cde9df;
    border-radius: 8px;
    min-height: 320px;
    padding: 2rem;
}

.mk-eyebrow {
    color: var(--mk-primary-dark);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 900;
    margin-bottom: 0.7rem;
}

.mk-hero-main h1 {
    color: #0f2f2a;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    margin-bottom: 1rem;
}

.mk-hero-main p {
    color: #31534c;
    line-height: 2;
    max-width: 760px;
}

.mk-hero-search {
    align-items: center;
    background: #fff;
    border: 1px solid #d5e4df;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    display: flex;
    gap: 0.8rem;
    margin-top: 1.4rem;
    max-width: 720px;
    padding: 0.7rem;
}

.mk-hero-search input {
    border: 0;
    flex: 1;
    min-width: 0;
    outline: 0;
}

.mk-hero-side {
    display: grid;
    gap: 1.25rem;
}

.mk-banner {
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 147px;
    overflow: hidden;
    padding: 1.25rem;
}

.mk-banner:hover {
    color: #fff;
}

.mk-banner strong {
    font-size: 1.3rem;
    font-weight: 900;
}

.mk-banner span {
    opacity: 0.9;
}

.mk-banner-green {
    background: linear-gradient(135deg, #0f766e, #22c55e);
}

.mk-banner-orange {
    background: linear-gradient(135deg, #f97316, #ef4444);
}

.mk-section {
    padding: 2.5rem 0;
}

.mk-section.compact {
    padding: 1.9rem 0 1.2rem;
}

.mk-section-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mk-section-head h2,
.mk-title-sm {
    color: #102a27;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0;
}

.mk-section-head a {
    color: var(--mk-primary);
    font-weight: 900;
    white-space: nowrap;
}

.mk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.mk-tabs span {
    background: #eff6f3;
    border-radius: 999px;
    color: #31534c;
    font-size: 0.84rem;
    font-weight: 800;
    padding: 0.4rem 0.8rem;
}

.mk-chip-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.75rem 0 0.2rem;
}

.mk-chip {
    align-items: center;
    background: #fff;
    border: 1px solid #dce7e3;
    border-radius: 8px;
    color: #263f3a;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 900;
    gap: 0.55rem;
    padding: 0.78rem 1rem;
}

.mk-chip span {
    background: #e6f5ef;
    border-radius: 999px;
    color: var(--mk-primary-dark);
    font-size: 0.8rem;
    min-width: 26px;
    padding: 0.15rem 0.45rem;
    text-align: center;
}

.mk-org-band {
    align-items: center;
    background: #183f39;
    border-radius: 8px;
    color: #fff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1.5rem;
}

.mk-org-band p {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
    max-width: 780px;
}

.mk-org-band .mk-eyebrow {
    color: #8ff0d0;
}

.home-hero-belt {
    background: #fff;
    border-bottom: 1px solid #e8eef2;
    padding: 1.1rem 0 1.4rem;
}

.home-hero-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 260px minmax(0, 1fr);
}

.home-category-rail {
    background: #fff;
    border: 1px solid #e7edf1;
    border-radius: 8px;
    overflow: hidden;
}

.home-category-rail h2 {
    border-bottom: 1px solid #edf2f4;
    color: #263f3a;
    font-size: 0.96rem;
    font-weight: 900;
    margin: 0;
    padding: 0.9rem 1rem;
}

.home-category-rail nav {
    display: grid;
    padding: 0.45rem 0;
}

.home-category-rail a {
    align-items: center;
    color: #3d4d55;
    display: flex;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: space-between;
    min-height: 36px;
    padding: 0.42rem 1rem;
}

.home-category-rail a:hover {
    background: #f7faf9;
    color: var(--mk-primary-dark);
}

.home-category-rail i {
    color: #99a7ad;
    font-size: 0.75rem;
}

.home-slider-panel {
    min-width: 0;
}

.hero-swiper {
    border-radius: 8px;
    height: clamp(250px, 31vw, 390px);
    overflow: hidden;
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    height: 100%;
}

.hero-swiper img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hero-slide {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 420px;
    min-height: 430px;
    padding: 2rem;
}

.hero-slide h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 4.5rem);
    font-weight: 900;
    margin-bottom: 1rem;
}

.hero-slide p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.08rem;
    line-height: 2;
    max-width: 720px;
}

.hero-slide .mk-eyebrow {
    color: #c8f7e7;
}

.hero-slide img {
    aspect-ratio: 4 / 3;
    border: 8px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.hero-slide-green {
    background: linear-gradient(135deg, #0f766e, #16423c);
}

.hero-slide-blue {
    background: linear-gradient(135deg, #0f5f7a, #183f39);
}

.hero-slide-orange {
    background: linear-gradient(135deg, #f97316, #9a3412);
}

.swiper-pagination-bullet-active {
    background: var(--mk-primary);
}

.course-swiper,
.category-swiper {
    padding: 0.25rem 0.15rem 2.35rem;
}

.course-swiper .swiper-slide {
    height: auto;
}

.course-swiper .course-card {
    height: 100%;
}

.swiper-button-next,
.swiper-button-prev {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    color: var(--mk-primary);
    height: 38px;
    width: 38px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1rem;
    font-weight: 900;
}

.category-slide-card {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 8px;
    color: var(--mk-ink);
    display: grid;
    gap: 0.45rem;
    min-height: 170px;
    padding: 1rem;
}

.category-slide-card img {
    border-radius: 8px;
    height: 72px;
    object-fit: cover;
    width: 72px;
}

.category-slide-card strong {
    font-weight: 900;
}

.category-slide-card span {
    color: var(--mk-muted);
    font-size: 0.88rem;
}

.home-category-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-category-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e8eef2;
    border-radius: 8px;
    color: var(--mk-ink);
    display: flex;
    gap: 0.7rem;
    min-height: 78px;
    padding: 0.7rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-category-card:hover {
    border-color: rgba(15, 118, 110, 0.34);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    color: var(--mk-ink);
    transform: translateY(-2px);
}

.home-category-card img {
    border-radius: 8px;
    height: 48px;
    object-fit: cover;
    width: 48px;
}

.home-category-card strong {
    display: block;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

.home-category-card span {
    color: var(--mk-muted);
    font-size: 0.8rem;
}

.site-footer {
    background: #102a27;
    color: rgba(255, 255, 255, 0.82);
    padding: 3rem 0 1.25rem;
}

.site-footer .brand-mark {
    color: #fff;
}

.site-footer .brand-mark i {
    background: rgba(255, 255, 255, 0.12);
    color: #93f0d2;
}

.site-footer p {
    line-height: 2;
    margin: 1rem 0 0;
    max-width: 420px;
}

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

.footer-grid h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.footer-grid a,
.footer-grid span {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    margin-bottom: 0.7rem;
}

.footer-grid a:hover {
    color: #fff;
}

.footer-bottom {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.25rem;
}

.category-tile {
    align-items: center;
    display: flex;
    gap: 0.8rem;
    padding: 1rem;
}

.category-tile img {
    border-radius: 8px;
    height: 56px;
    object-fit: cover;
    width: 56px;
}

.page-hero {
    background: #fff;
    border-bottom: 1px solid #e8eef2;
    padding: 2.3rem 0;
}

.public-page-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.page-search {
    align-items: center;
    background: #f7f9fa;
    border: 1px solid #e8edf0;
    border-radius: 8px;
    color: var(--mk-muted);
    display: flex;
    gap: 0.6rem;
    max-width: 360px;
    padding: 0.65rem 0.85rem;
    width: 100%;
}

.page-search input {
    background: transparent;
    border: 0;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.course-filter-panel {
    background: #fff;
    border: 1px solid #e8eef2;
    border-radius: 8px;
    padding: 0.8rem;
}

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

.lesson-row {
    align-items: center;
    border-bottom: 1px solid var(--mk-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 0;
}

.lesson-row:last-child {
    border-bottom: 0;
}

.auth-shell {
    min-height: calc(100vh - 76px);
}

.auth-panel {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 8px;
    padding: 2rem;
}

.auth-modern-shell {
    background:
        radial-gradient(circle at 12% 12%, rgba(249, 115, 22, 0.12), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(15, 118, 110, 0.15), transparent 28%),
        linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
    min-height: calc(100vh - 76px);
    padding: 3rem 0;
}

.auth-modern-grid {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 440px;
}

.auth-copy h1 {
    color: #102a27;
    font-size: clamp(2.1rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.35;
    margin: 0.8rem 0 1rem;
}

.auth-copy p {
    color: #4f6670;
    line-height: 2;
    max-width: 720px;
}

.auth-kicker {
    color: var(--mk-primary-dark);
    font-weight: 900;
}

.auth-role-links,
.auth-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.auth-role-links a,
.auth-stepper span {
    background: #fff;
    border: 1px solid #e0ebe7;
    border-radius: 8px;
    color: #37504a;
    font-weight: 900;
    padding: 0.65rem 0.9rem;
}

.auth-role-links a.active,
.auth-stepper span.active {
    background: #e6f5ef;
    border-color: rgba(15, 118, 110, 0.28);
    color: var(--mk-primary-dark);
}

.auth-modern-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dfe9e5;
    border-radius: 8px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
    padding: 1.25rem;
}

.auth-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.auth-card-head h2 {
    color: #102a27;
    font-size: 1.35rem;
    font-weight: 900;
    margin: 0;
}

.auth-card-head span {
    color: var(--mk-muted);
    font-size: 0.88rem;
}

.auth-card-head i {
    background: #e6f5ef;
    border-radius: 8px;
    color: var(--mk-primary-dark);
    display: grid;
    font-size: 1.35rem;
    height: 46px;
    place-items: center;
    width: 46px;
}

.auth-tabs {
    background: #f2f7f5;
    border: 1px solid #e2ebe8;
    border-radius: 8px;
    padding: 0.25rem;
}

.auth-tabs .nav-link {
    border-radius: 8px;
    color: #506862;
    font-weight: 900;
    width: 100%;
}

.auth-tabs .nav-item {
    flex: 1;
}

.auth-tabs .nav-link.active {
    background: #fff;
    color: var(--mk-primary-dark);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.auth-register-link {
    border-top: 1px solid #edf2f4;
    color: var(--mk-muted);
    margin-top: 1rem;
    padding-top: 1rem;
    text-align: center;
}

.auth-register-link a {
    color: var(--mk-primary-dark);
    font-weight: 900;
}

.panel-layout {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    min-height: 100vh;
}

.panel-sidebar {
    background: linear-gradient(180deg, #173b36 0%, #0f2926 100%);
    color: #fff;
    padding: 1.25rem;
}

.panel-sidebar .brand-mark,
.panel-sidebar .brand-mark i {
    color: #fff;
}

.panel-sidebar .brand-mark i {
    background: rgba(255, 255, 255, 0.14);
}

.panel-nav {
    display: grid;
    gap: 0.35rem;
    margin-top: 2rem;
}

.panel-nav a {
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
}

.panel-nav a.active,
.panel-nav a:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.panel-main {
    background: #f5f8f7;
    min-width: 0;
}

.panel-topbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--mk-border);
    display: flex;
    justify-content: space-between;
    min-height: 76px;
    padding: 1rem 1.5rem;
}

.panel-content {
    padding: 1.5rem;
}

.admin-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.admin-table> :not(caption)>*>* {
    padding: 1rem;
}

.admin-table tbody tr:hover {
    background: #f7fbf9;
}

.admin-form {
    max-width: 1040px;
}

.admin-course-editor {
    display: block;
}

.admin-editor-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.admin-editor-main,
.admin-editor-aside {
    min-width: 0;
}

.course-image-drop {
    background: #f7fbf9;
    border: 1px dashed #b8d8cf;
    border-radius: 8px;
    padding: 1rem;
}

.course-image-drop img,
.admin-preview-image {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.admin-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    object-fit: cover;
    width: 52px;
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    min-height: 42px;
    padding: 0.2rem 0.35rem;
}

.select2-container {
    direction: rtl;
    text-align: right;
}

.select2-dropdown {
    border-color: #dbe4e0;
    border-radius: 8px;
    z-index: 2000;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #e1f4ef;
    border: 0;
    border-radius: 999px;
    color: var(--mk-primary-dark);
    padding: 0.2rem 0.55rem;
}

.settings-logo-preview {
    align-items: center;
    background: #f7fbf9;
    border: 1px dashed #b8d8cf;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 170px;
    padding: 1rem;
}

.settings-logo-preview img {
    max-height: 120px;
    max-width: 100%;
    object-fit: contain;
}

.settings-logo-placeholder {
    color: var(--mk-primary);
    font-size: 3rem;
}

.settings-slider-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.settings-slider-item {
    background: #f7fbf9;
    border: 1px solid #e0ebe7;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
}

.settings-slider-item img {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.settings-slider-item span {
    align-items: center;
    display: flex;
    gap: 0.55rem;
}

.settings-slider-item .btn {
    justify-content: center;
}

.course-structure {
    max-width: none;
}

.structure-create-bar {
    align-items: end;
    background: #f8fbfa;
    border: 1px solid #e4ece9;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(240px, 1fr) 120px auto auto;
    margin-bottom: 1rem;
    padding: 0.9rem;
}

.structure-check {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    margin: 0;
    min-height: 40px;
    white-space: nowrap;
}

.sortable-list,
.lesson-sortable-list {
    display: grid;
    gap: 0.9rem;
}

.chapter-manager-card {
    background: #f8fbfa;
    border: 1px solid #e0ebe7;
    border-radius: 8px;
    padding: 0.9rem;
}

.chapter-editor-card {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.chapter-manager-head {
    align-items: center;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.chapter-manager-head strong {
    display: block;
    font-weight: 900;
}

.chapter-manager-head span {
    color: var(--mk-muted);
    font-size: 0.88rem;
}

.chapter-inline-grid {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 48px;
    margin-top: 0.9rem;
}

.chapter-quick-form {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(220px, 1fr) 120px auto auto;
}

.structure-sort-label {
    background: #eef4f2;
    border-radius: 999px;
    color: #60726d;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.25rem 0.55rem;
}

.lesson-sortable-list {
    margin-top: 1rem;
    padding-right: 2.25rem;
}

.lesson-manager-row {
    align-items: center;
    background: #fff;
    border: 1px solid #e3ebe8;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 0.7rem;
}

.lesson-editor-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.empty-structure-row {
    background: #fff;
    border: 1px dashed #d6e3df;
    border-radius: 8px;
    color: var(--mk-muted);
    padding: 0.85rem;
}

.lesson-quick-form {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(180px, 1.35fr) minmax(160px, 1fr) auto auto;
}

.lesson-create-bar {
    align-items: center;
    background: #fff;
    border: 1px dashed #c7d9d3;
    border-radius: 8px;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(200px, 1.4fr) minmax(170px, 1fr) auto auto;
    margin: 0.9rem 2.25rem 0 0;
    padding: 0.7rem;
}

.manager-actions {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.manager-actions form {
    margin: 0;
}

.drag-handle {
    background: #eef7f4;
    border: 0;
    border-radius: 8px;
    color: var(--mk-primary-dark);
    cursor: grab;
    height: 34px;
    width: 34px;
}

.drag-handle:active {
    cursor: grabbing;
}

.sortable-item.is-dragging {
    opacity: 0.45;
}

.modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.modal-header,
.modal-footer {
    border-color: #edf2f4;
}

.admin-video-player,
.lesson-video-preview video {
    background: #0f172a;
    border-radius: 8px;
    display: block;
    max-height: 480px;
    width: 100%;
}

.lesson-video-preview {
    background: #f8fbfa;
    border: 1px solid #e3ebe8;
    border-radius: 8px;
    display: grid;
    gap: 0.55rem;
    padding: 0.6rem;
}

.lesson-video-preview a {
    color: var(--mk-primary-dark);
    font-size: 0.84rem;
    font-weight: 800;
}

.lesson-attachment-list {
    display: grid;
    gap: 0.6rem;
}

.lesson-attachment-item {
    align-items: center;
    background: #f8fbfa;
    border: 1px solid #e3ebe8;
    border-radius: 8px;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 0.65rem;
}

.lesson-attachment-item>i {
    background: #e6f5ef;
    border-radius: 8px;
    color: var(--mk-primary-dark);
    display: grid;
    height: 34px;
    place-items: center;
    width: 34px;
}

.lesson-attachment-item strong {
    display: block;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-attachment-item span {
    color: var(--mk-muted);
    font-size: 0.78rem;
}

.question-editor-form {
    display: grid;
    gap: .85rem;
}

.question-editor-hero {
    align-items: center;
    background-image: linear-gradient(120deg, rgba(49, 95, 141, .07), transparent 58%);
    display: grid;
    gap: .8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .9rem 1rem;
}

.question-editor-hero-icon {
    align-items: center;
    background: #18314d;
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: 1.15rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.question-editor-kicker {
    color: #315f8d;
    display: block;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .03em;
    margin-bottom: .12rem;
}

.question-editor-hero h1 {
    color: var(--panel-text);
    font-size: .86rem;
    font-weight: 900;
    margin: 0 0 .15rem;
}

.question-editor-hero p {
    color: var(--panel-muted);
    font-size: .57rem;
    margin: 0;
}

.question-editor-layout {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) 310px;
}

.question-editor-main {
    display: grid;
    gap: .85rem;
    min-width: 0;
}

.question-editor-section,
.question-editor-aside {
    padding: 1rem;
}

.question-editor-section-head {
    align-items: center;
    display: flex;
    gap: .6rem;
    margin-bottom: .85rem;
}

.question-editor-section-head>span:first-child {
    align-items: center;
    background: rgba(49, 95, 141, .08);
    border: 1px solid rgba(49, 95, 141, .12);
    border-radius: 6px;
    color: #315f8d;
    display: flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.question-editor-section-head>div {
    flex: 1;
}

.question-editor-section-head h2 {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
    margin: 0 0 .12rem;
}

.question-editor-section-head p {
    color: var(--panel-muted);
    font-size: .54rem;
    line-height: 1.7;
    margin: 0;
}

.question-text-input {
    line-height: 2;
    resize: vertical;
}

.question-option-rule {
    align-items: center;
    background: rgba(20, 125, 91, .08);
    border: 1px solid rgba(20, 125, 91, .14);
    border-radius: 999px;
    color: #147d5b;
    display: inline-flex;
    font-size: .52rem;
    font-weight: 800;
    gap: .3rem;
    padding: .3rem .5rem;
    white-space: nowrap;
}

.question-options-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.question-option-card {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .7rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.question-option-card:focus-within {
    border-color: rgba(49, 95, 141, .45);
    box-shadow: 0 0 0 3px rgba(49, 95, 141, .05);
    transform: translateY(-1px);
}

.question-option-card:has(.question-correct-choice input:checked) {
    border-color: rgba(20, 125, 91, .45);
    box-shadow: inset 3px 0 0 #147d5b;
}

.question-option-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .55rem;
}

.question-option-number {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-muted);
    display: flex;
    font-size: .58rem;
    font-weight: 900;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.question-correct-choice {
    cursor: pointer;
    margin: 0;
}

.question-correct-choice input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.question-correct-choice span {
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .5rem;
    font-weight: 800;
    gap: .25rem;
    padding: .24rem .45rem;
    transition: all .2s ease;
}

.question-correct-choice input:focus-visible+span {
    box-shadow: 0 0 0 3px rgba(49, 95, 141, .12);
}

.question-correct-choice input:checked+span {
    background: #147d5b;
    border-color: #147d5b;
    color: #fff;
}

.question-negative-score {
    align-items: center;
    display: grid;
    gap: .35rem;
    grid-template-columns: auto minmax(0, 1fr) 84px;
    margin-top: .55rem;
}

.question-negative-score i {
    color: #b7373f;
    font-size: .72rem;
}

.question-negative-score label {
    color: var(--panel-muted);
    font-size: .51rem;
}

.question-negative-score .form-control {
    min-height: 34px;
    text-align: center;
}

.question-descriptive-notice {
    align-items: center;
    background-image: linear-gradient(120deg, rgba(49, 95, 141, .07), transparent);
    display: flex;
    gap: .75rem;
    padding: 1rem;
}

.question-descriptive-notice>span {
    align-items: center;
    background: rgba(49, 95, 141, .1);
    border-radius: 7px;
    color: #315f8d;
    display: flex;
    font-size: 1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.question-descriptive-notice strong {
    color: var(--panel-text);
    display: block;
    font-size: .68rem;
    margin-bottom: .15rem;
}

.question-descriptive-notice p {
    color: var(--panel-muted);
    font-size: .55rem;
    margin: 0;
}

.question-editor-aside {
    display: grid;
    gap: .85rem;
    position: sticky;
    top: .85rem;
}

.question-type-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.question-type-fieldset legend {
    float: none;
    width: auto;
}

.question-type-choices {
    display: grid;
    gap: .45rem;
    grid-template-columns: 1fr 1fr;
}

.question-type-choice {
    cursor: pointer;
    margin: 0;
}

.question-type-choice>input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.question-type-choice>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .12rem;
    min-height: 82px;
    padding: .55rem;
    text-align: center;
    transition: all .2s ease;
}

.question-type-choice i {
    color: var(--panel-muted);
    font-size: 1rem;
}

.question-type-choice strong {
    color: var(--panel-text);
    font-size: .58rem;
}

.question-type-choice small {
    color: var(--panel-muted);
    font-size: .47rem;
    line-height: 1.6;
}

.question-type-choice>input:checked+span {
    background: rgba(49, 95, 141, .07);
    border-color: #55789d;
    box-shadow: inset 0 -2px 0 #315f8d;
}

.question-type-choice>input:checked+span i {
    color: #315f8d;
}

.question-type-choice>input:focus-visible+span {
    box-shadow: 0 0 0 3px rgba(49, 95, 141, .12);
}

.question-score-input {
    align-items: stretch;
    display: flex;
}

.question-score-input .form-control {
    border-radius: 0 6px 6px 0;
}

.question-score-input span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    color: var(--panel-muted);
    display: flex;
    font-size: .52rem;
    padding: 0 .6rem;
}

.question-editor-aside .form-text {
    color: var(--panel-muted);
    display: block;
    font-size: .49rem;
    line-height: 1.8;
    margin-top: .3rem;
}

.question-editor-submit {
    border-top: 1px solid var(--panel-border);
    display: grid;
    gap: .4rem;
    grid-template-columns: 1fr auto;
    padding-top: .85rem;
}

.question-editor-submit .btn {
    justify-content: center;
}

html[data-panel-theme="dark"] .question-editor-hero-icon {
    background: #315475;
}

html[data-panel-theme="dark"] .question-editor-kicker,
html[data-panel-theme="dark"] .question-editor-section-head>span:first-child,
html[data-panel-theme="dark"] .question-descriptive-notice>span {
    color: #91b7dd;
}

html[data-panel-theme="dark"] .question-option-rule {
    color: #55c8a0;
}

@media (max-width: 991.98px) {
    .question-editor-layout {
        grid-template-columns: 1fr;
    }

    .question-editor-aside {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .question-editor-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .question-editor-hero>.btn {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .question-editor-section-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .question-option-rule {
        margin-right: 2.8rem;
    }

    .question-options-grid {
        grid-template-columns: 1fr;
    }
}

.swal2-popup {
    border-radius: 8px;
    direction: rtl;
    font-family: "IRANSans", Tahoma, Arial, sans-serif;
}

.admin-check-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.admin-check-grid .form-check {
    background: #f7fbf9;
    border: 1px solid #e0ebe7;
    border-radius: 8px;
    margin: 0;
    padding: 0.8rem 2.3rem 0.8rem 0.8rem;
}

.admin-hero-panel {
    align-items: center;
    background: linear-gradient(135deg, #0f766e, #123b36);
    border-radius: 8px;
    color: #fff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.5rem;
}

.admin-hero-panel h2 {
    font-size: 1.65rem;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.admin-hero-panel p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 760px;
}

.admin-hero-panel .mk-eyebrow {
    color: #adf2dd;
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.stat-card-admin {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.stat-card-admin i {
    background: #e6f5ef;
    border-radius: 8px;
    color: var(--mk-primary-dark);
    display: grid;
    font-size: 1.35rem;
    height: 48px;
    place-items: center;
    width: 48px;
}

.stat-card-admin span {
    color: var(--mk-muted);
}

.admin-quick-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-quick-grid a {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 8px;
    color: var(--mk-ink);
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
}

.admin-quick-grid i {
    color: var(--mk-primary);
    font-size: 1.35rem;
}

.admin-quick-grid strong {
    font-weight: 900;
}

.admin-quick-grid span,
.admin-user-row span {
    color: var(--mk-muted);
    font-size: 0.86rem;
}

.admin-card-head {
    align-items: center;
    border-bottom: 1px solid var(--mk-border);
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.admin-card-head a {
    color: var(--mk-primary);
    font-weight: 900;
}

.admin-user-row {
    align-items: center;
    display: flex;
    gap: 0.8rem;
}

.avatar-dot {
    background: #e6f5ef;
    border-radius: 50%;
    color: var(--mk-primary-dark);
    display: grid;
    font-weight: 900;
    height: 42px;
    place-items: center;
    width: 42px;
}

.panel-card {
    padding: 1.25rem;
}

.panel-card .metric {
    color: var(--mk-primary-dark);
    font-size: 1.75rem;
    font-weight: 900;
}

.table thead th {
    color: var(--mk-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.status-pill {
    background: #e1f4ef;
    border-radius: 999px;
    color: var(--mk-primary-dark);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
}

.progress {
    background: #e8eeec;
    height: 0.65rem;
}

.refined-course-card {
    border-color: #e6edf1;
}

.refined-course-card .course-thumb img {
    transition: transform 0.35s ease;
}

.refined-course-card:hover .course-thumb img {
    transform: scale(1.03);
}

.refined-course-card .card-body {
    min-height: 224px;
}

.course-show-hero {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 28%),
        linear-gradient(135deg, #f7fbfa 0%, #eef7f4 58%, #ffffff 100%);
    border-bottom: 1px solid #e3ebe8;
    padding: 2rem 0 2.4rem;
}

.course-show-grid {
    align-items: center;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 380px;
}

.course-show-grid h1 {
    color: #102a27;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.course-show-grid p {
    color: #4f6670;
    line-height: 2;
    max-width: 780px;
}

.course-kicker {
    color: var(--mk-primary-dark);
    font-weight: 900;
    margin-bottom: 0.8rem;
}

.course-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.course-hero-meta span {
    align-items: center;
    background: #fff;
    border: 1px solid #e2ebe8;
    border-radius: 8px;
    color: #37504a;
    display: inline-flex;
    font-weight: 800;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
}

.course-purchase-card {
    background: #fff;
    border: 1px solid #dfe9e5;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.course-purchase-card img {
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: cover;
    width: 100%;
}

.course-purchase-body {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.course-price-large {
    color: var(--mk-primary-dark);
    font-size: 1.55rem;
    font-weight: 900;
}

.course-content-card {
    padding-top: 1.1rem;
}

.chapter-public-block {
    border-bottom: 1px solid #e7efec;
    padding: 1.1rem 0;
}

.chapter-public-block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.chapter-public-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.chapter-public-head span,
.chapter-public-head strong {
    color: var(--mk-muted);
    font-size: 0.84rem;
}

.chapter-public-head h3 {
    color: #172f2b;
    font-size: 1rem;
    font-weight: 900;
    margin: 0.2rem 0 0;
}

.lesson-public-row,
.quiz-access-row,
.cart-line,
.order-line-card,
.mini-course-line {
    align-items: center;
    background: #fff;
    border: 1px solid #e6edf1;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
}

.lesson-public-row {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0.55rem;
}

.lesson-public-row.is-locked {
    background: #fafafa;
    color: #7a8790;
}

.lesson-public-main {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.lesson-public-main i {
    background: #e6f5ef;
    border-radius: 8px;
    color: var(--mk-primary-dark);
    display: grid;
    height: 38px;
    place-items: center;
    width: 38px;
}

.lesson-public-main strong {
    display: block;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-public-main span,
.quiz-access-row span {
    color: var(--mk-muted);
    font-size: 0.82rem;
}

.lesson-public-extra {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.lesson-open-body {
    background: #f8fbfa;
    border: 1px solid #e6edf1;
    border-radius: 8px;
    color: #4f6670;
    line-height: 2;
    margin: 0.5rem 3rem 0 0;
    padding: 0.8rem;
}

.chapter-quiz-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.quiz-access-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.quiz-access-row strong {
    display: block;
    font-size: 0.92rem;
}

.commerce-hero {
    background:
        radial-gradient(circle at 20% 0%, rgba(14, 165, 233, 0.12), transparent 28%),
        #fff;
}

.cart-list {
    display: grid;
    gap: 0.75rem;
}

.cart-list.compact {
    gap: 0.55rem;
}

.cart-line {
    grid-template-columns: 84px minmax(0, 1fr) auto auto;
}

.cart-line img,
.mini-course-line img {
    border-radius: 8px;
    height: 58px;
    object-fit: cover;
    width: 84px;
}

.cart-line-price {
    display: grid;
    gap: 0.1rem;
    justify-items: end;
}

.btn-icon {
    align-items: center;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    padding: 0;
    width: 38px;
}

.checkout-summary {
    top: 92px;
}

.summary-lines {
    display: grid;
    gap: 0.65rem;
}

.summary-lines>div {
    align-items: center;
    border-bottom: 1px dashed #dde8e4;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 0.65rem;
}

.summary-lines>div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.summary-lines span {
    color: var(--mk-muted);
}

.voucher-form {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.empty-state {
    align-items: center;
    background: #f8fbfa;
    border: 1px dashed #d6e3df;
    border-radius: 8px;
    color: var(--mk-muted);
    display: grid;
    justify-items: center;
    min-height: 180px;
    padding: 1.5rem;
    text-align: center;
}

.empty-state.compact {
    min-height: 140px;
}

.empty-state i {
    color: var(--mk-primary);
    font-size: 2rem;
}

.empty-state strong {
    color: var(--mk-ink);
}

.order-line-card {
    color: var(--mk-ink);
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.order-line-card:hover,
.mini-course-line:hover {
    border-color: rgba(15, 118, 110, 0.28);
    color: var(--mk-ink);
}

.mini-course-line {
    color: var(--mk-ink);
    grid-template-columns: 72px minmax(0, 1fr) auto;
}

.mini-course-line img {
    height: 52px;
    width: 72px;
}

.mini-course-line small {
    color: var(--mk-primary-dark);
    font-weight: 900;
    white-space: nowrap;
}

.home-v2-shell {
    background:
        linear-gradient(180deg, #ffffff 0%, #f5f8f7 100%);
    border-bottom: 1px solid #e6edf1;
    padding: 1.6rem 0 2.2rem;
}

.home-v2-topline {
    align-items: end;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    margin-bottom: 1.2rem;
}

.home-v2-kicker {
    color: #d95f1a;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.home-v2-topline h1 {
    color: #122c28;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 0.45rem;
}

.home-v2-topline p {
    color: #596d76;
    line-height: 1.95;
    margin: 0;
    max-width: 760px;
}

.home-v2-search {
    align-items: center;
    background: #fff;
    border: 1px solid #dde8e4;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
    display: grid;
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.42rem;
}

.home-v2-search i {
    color: var(--mk-primary);
    padding-right: 0.45rem;
}

.home-v2-search input {
    border: 0;
    min-width: 0;
    outline: 0;
    padding: 0.7rem 0.3rem;
}

.home-v2-search button {
    background: var(--mk-primary);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    padding: 0.7rem 1rem;
}

.home-hero-grid-v2 {
    align-items: stretch;
    grid-template-columns: 282px minmax(0, 1fr);
}

.home-category-rail-v2 {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.home-category-rail-v2 h2 {
    background: #fbfdfc;
}

.home-category-rail-v2 a {
    min-height: 42px;
}

.home-slider-panel-v2 {
    background: #fff;
    border: 1px solid #e4ece9;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    padding: 0.45rem;
}

.hero-swiper-v2 {
    height: clamp(300px, 36vw, 470px);
}

.home-v2-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}

.home-v2-stats div {
    align-items: center;
    background: #fff;
    border: 1px solid #e4ece9;
    border-radius: 8px;
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    min-height: 70px;
}

.home-v2-stats strong {
    color: var(--mk-primary-dark);
    font-size: 1.35rem;
    font-weight: 900;
}

.home-v2-stats span {
    color: #60727d;
    font-size: 0.9rem;
    font-weight: 800;
}

.home-category-grid-v2 {
    gap: 0.9rem;
}

.home-category-card-v2 {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
    min-height: 86px;
}

.home-category-card-v2 img {
    height: 54px;
    width: 54px;
}

.learning-shell {
    display: grid;
    gap: 1rem;
}

.learning-hero-panel,
.learning-layout,
.learning-course-card {
    background: #fff;
    border: 1px solid #e1e9e6;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.learning-hero-panel {
    align-items: center;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: minmax(0, 1fr) 320px;
    padding: 1.2rem;
}

.learning-back-link {
    color: var(--mk-primary-dark);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 900;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.learning-hero-panel h2 {
    color: #132f2a;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.55;
    margin-bottom: 0.35rem;
}

.learning-hero-panel p {
    color: var(--mk-muted);
    margin: 0;
}

.learning-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: 330px minmax(0, 1fr);
    padding: 1rem;
}

.learning-sidebar {
    display: grid;
    gap: 0.8rem;
}

.learning-chapter {
    background: #f9fbfa;
    border: 1px solid #e4ece9;
    border-radius: 8px;
    padding: 0.8rem;
}

.learning-chapter-head {
    align-items: center;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.learning-chapter-head strong {
    color: #17332e;
    display: block;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.7;
}

.learning-chapter-head span {
    color: var(--mk-muted);
    font-size: 0.78rem;
}

.learning-chapter-head i {
    color: var(--mk-primary);
}

.learning-lesson-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.learning-lesson-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #34444c;
    display: grid;
    font-size: 0.88rem;
    font-weight: 800;
    gap: 0.55rem;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 42px;
    padding: 0.5rem;
}

.learning-lesson-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-lesson-link.active {
    background: #fff;
    border-color: rgba(15, 118, 110, 0.22);
    color: var(--mk-primary-dark);
}

.learning-lesson-link.is-completed i {
    color: var(--mk-primary);
}

.learning-player-panel {
    min-width: 0;
}

.learning-lesson-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.learning-lesson-head span {
    color: var(--mk-muted);
    font-size: 0.82rem;
}

.learning-lesson-head h3 {
    color: #132f2a;
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0.2rem 0 0;
}

.status-pill.muted {
    background: #edf2f4;
    color: #60727d;
}

.learning-video-player,
.learning-empty-player,
.learning-quiz-blank {
    background: #0f172a;
    border-radius: 8px;
    min-height: 390px;
    width: 100%;
}

.learning-video-player {
    display: block;
    max-height: 620px;
}

.learning-empty-player {
    align-items: center;
    color: rgba(255, 255, 255, 0.76);
    display: grid;
    gap: 0.7rem;
    justify-items: center;
    place-content: center;
}

.learning-empty-player i {
    font-size: 2rem;
}

.learning-quiz-blank {
    background: #fff;
    border: 1px dashed #d9e4e0;
}

.learning-description {
    background: #f8fbfa;
    border: 1px solid #e3ebe8;
    border-radius: 8px;
    color: #4f6670;
    line-height: 2;
    margin-top: 1rem;
    padding: 1rem;
}

.learning-attachments {
    margin-top: 1rem;
}

.learning-attachments h4 {
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 0.7rem;
}

.learning-file-open {
    align-items: center;
    background: #f8fbfa;
    border: 1px solid #e3ebe8;
    border-radius: 8px;
    color: var(--mk-primary-dark);
    display: inline-flex;
    font-weight: 900;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
}

.learning-course-card {
    height: 100%;
    overflow: hidden;
}

.learning-course-thumb {
    display: block;
}

.learning-course-thumb img {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.learning-course-body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.learning-course-teacher {
    color: var(--mk-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.learning-course-body h3 {
    color: #132f2a;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.75;
    margin: 0.25rem 0 0;
    min-height: 56px;
}

.learning-progress-box {
    display: grid;
    gap: 0.5rem;
}

.learning-progress-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.learning-progress-head span,
.learning-progress-box small {
    color: var(--mk-muted);
    font-size: 0.82rem;
}

.learning-progress-head strong {
    color: var(--mk-primary-dark);
    font-weight: 900;
}

.progress-bar {
    background-color: var(--mk-primary);
}

.site-header-v2 {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.site-main-nav .nav-link {
    color: #374151;
    font-size: 0.92rem;
    font-weight: 800;
    padding-inline: 0.75rem;
}

.site-main-nav .nav-link:hover {
    color: var(--mk-primary-dark);
}

.site-user-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.user-menu-toggle {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown .dropdown-item {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    min-height: 38px;
}

.site-footer-v2 {
    background: #0f2523;
    padding-top: 3.2rem;
}

.footer-v2-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(150px, 1fr));
}

.footer-v2-grid h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.footer-v2-grid a,
.footer-v2-grid span {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    margin-bottom: 0.55rem;
}

.footer-v2-grid a:hover {
    color: #9ef0d4;
}

.footer-brand-block p {
    max-width: 420px;
}

.content-page-hero {
    background: linear-gradient(180deg, #ffffff 0%, #eef7f4 100%);
    border-bottom: 1px solid #e1ebe7;
    padding: 3rem 0;
}

.content-page-hero h1 {
    color: #122c28;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 0.8rem;
}

.content-page-hero p {
    color: #586a73;
    line-height: 2;
    margin: 0;
    max-width: 840px;
}

.page-kicker {
    color: #d95f1a;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 900;
    margin-bottom: 0.6rem;
}

.about-grid,
.contact-grid,
.article-grid,
.lesson-engagement-grid {
    display: grid;
    gap: 1rem;
}

.about-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
}

.about-story,
.about-values,
.contact-card,
.article-card,
.lesson-qa-panel,
.lesson-feedback-panel,
.qa-admin-card {
    background: #fff;
    border: 1px solid #e2ebe8;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.about-story {
    padding: 1.4rem;
}

.about-story h2 {
    color: #132f2a;
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
}

.about-story p {
    color: #526872;
    line-height: 2.1;
    margin: 0;
}

.about-values {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
}

.about-values div {
    align-items: center;
    background: #f8fbfa;
    border-radius: 8px;
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem;
}

.about-values i,
.contact-card i {
    color: var(--mk-primary);
    font-size: 1.25rem;
}

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

.contact-card {
    display: grid;
    gap: 0.45rem;
    min-height: 160px;
    padding: 1.2rem;
}

.contact-card strong {
    color: #132f2a;
    font-weight: 900;
}

.contact-card span {
    color: #60727d;
    line-height: 1.8;
}

.public-filter-bar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

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

.article-card {
    overflow: hidden;
}

.article-card img {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.article-card>div {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
}

.article-meta {
    align-items: center;
    color: var(--mk-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.55rem;
}

.article-card h2 {
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.7;
    margin: 0;
}

.article-card h2 a {
    color: #132f2a;
}

.article-card p {
    color: #60727d;
    line-height: 1.9;
    margin: 0;
}

.article-show {
    padding: 2rem 0 4rem;
}

.article-show-head {
    margin-bottom: 1.2rem;
    max-width: 900px;
}

.article-show-head h1 {
    color: #132f2a;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1.45;
    margin: 0.6rem 0;
}

.article-cover {
    border-radius: 8px;
    display: block;
    max-height: 520px;
    object-fit: cover;
    width: 100%;
}

.article-body {
    background: #fff;
    border: 1px solid #e2ebe8;
    border-radius: 8px;
    color: #31424a;
    font-size: 1.02rem;
    line-height: 2.25;
    margin-top: 1rem;
    padding: 1.4rem;
}

.lesson-engagement-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    margin-top: 1rem;
}

.lesson-qa-panel,
.lesson-feedback-panel {
    padding: 1rem;
}

.lesson-engagement-head,
.qa-admin-head,
.qa-admin-actions {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.lesson-engagement-head h4 {
    color: #132f2a;
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.lesson-engagement-head span,
.qa-admin-head span {
    color: var(--mk-muted);
    font-size: 0.82rem;
}

.lesson-question-form,
.lesson-feedback-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.lesson-question-form button,
.lesson-feedback-form button {
    justify-self: start;
}

.lesson-qa-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.lesson-qa-item,
.lesson-answer {
    background: #f8fbfa;
    border: 1px solid #e4ece9;
    border-radius: 8px;
    padding: 0.8rem;
}

.lesson-qa-meta {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.lesson-qa-meta strong {
    color: #132f2a;
    font-size: 0.9rem;
}

.lesson-qa-meta span {
    color: var(--mk-muted);
    font-size: 0.78rem;
}

.lesson-qa-item p,
.lesson-answer p,
.qa-admin-card p {
    color: #4f6670;
    line-height: 1.95;
    margin-bottom: 0;
}

.lesson-answer {
    background: #fff;
    margin-top: 0.65rem;
}

.lesson-answer span {
    color: var(--mk-primary-dark);
    display: block;
    font-size: 0.82rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
}

.qa-admin-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.qa-admin-actions .form-select {
    max-width: 220px;
}

@media (max-width: 991.98px) {
    .hero {
        min-height: 500px;
        padding: 6rem 0 4rem;
    }

    .panel-layout {
        grid-template-columns: 1fr;
    }

    .mk-hero-grid,
    .hero-slide,
    .home-hero-grid,
    .home-v2-topline,
    .learning-hero-panel,
    .learning-layout,
    .footer-v2-grid,
    .about-grid,
    .contact-grid,
    .article-grid,
    .lesson-engagement-grid,
    .admin-editor-grid,
    .footer-grid,
    .admin-quick-grid {
        grid-template-columns: 1fr;
    }

    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-v2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-category-rail nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .structure-create-bar,
    .chapter-inline-grid,
    .chapter-quick-form,
    .lesson-quick-form,
    .lesson-create-bar {
        grid-template-columns: 1fr;
    }

    .lesson-create-bar {
        margin-right: 0;
    }

    .site-search {
        max-width: none;
    }

    .site-user-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .site-user-actions .btn,
    .site-user-actions .dropdown,
    .user-menu-toggle {
        width: 100%;
    }

    .panel-sidebar {
        position: static;
    }

    .panel-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-show-grid {
        grid-template-columns: 1fr;
    }

    .auth-modern-grid {
        grid-template-columns: 1fr;
    }

    .cart-line,
    .order-line-card,
    .mini-course-line,
    .lesson-public-row,
    .quiz-access-row {
        grid-template-columns: 1fr;
    }

    .lesson-open-body {
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    .panel-nav {
        grid-template-columns: 1fr;
    }

    .panel-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .mk-hero-search,
    .mk-org-band,
    .mk-section-head,
    .public-page-head,
    .footer-bottom,
    .admin-toolbar,
    .admin-hero-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-manager-row,
    .chapter-manager-head,
    .lesson-attachment-item {
        grid-template-columns: 1fr;
    }

    .home-category-grid,
    .home-category-rail nav,
    .question-options-grid {
        grid-template-columns: 1fr;
    }

    .lesson-sortable-list {
        padding-right: 0;
    }

    .lesson-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .voucher-form {
        grid-template-columns: 1fr;
    }

    .cart-line img,
    .mini-course-line img {
        width: 100%;
    }

    .cart-line img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .lesson-public-extra {
        justify-content: flex-start;
    }

    .home-v2-stats,
    .home-category-grid-v2 {
        grid-template-columns: 1fr;
    }

    .home-v2-search {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .home-v2-search button {
        grid-column: 1 / -1;
    }

    .learning-video-player,
    .learning-empty-player,
    .learning-quiz-blank {
        min-height: 240px;
    }

    .learning-lesson-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-filter-bar,
    .qa-admin-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .qa-admin-actions .form-select {
        max-width: none;
    }

    .auth-modern-shell {
        padding: 1.5rem 0;
    }
}

/* Compact animated admin & teacher workspace ----------------------------- */
.panel-body {
    --panel-accent: #128779;
    --panel-accent-soft: #e9f7f4;
    --panel-danger: #c34c56;
    font-size: 0.875rem;
}

.panel-body .panel-layout {
    grid-template-columns: 248px minmax(0, 1fr);
}

.panel-body .panel-sidebar-head {
    min-height: 70px;
    padding: 0.75rem 0.9rem;
}

.panel-body .panel-sidebar-head .brand-logo,
.panel-body .panel-sidebar-head .brand-mark>i {
    height: 32px;
    width: 32px;
}

.panel-body .panel-sidebar-head .brand-mark strong {
    font-size: 0.82rem;
}

.panel-body .panel-nav {
    gap: 0.14rem;
    padding: 0.7rem 0.65rem;
}

.panel-body .panel-nav-label {
    font-size: 0.61rem;
    padding: 0.85rem 0.62rem 0.25rem;
}

.panel-body .panel-nav a {
    border-radius: 10px;
    font-size: 0.76rem;
    gap: 0.55rem;
    min-height: 39px;
    padding: 0.35rem 0.5rem;
}

.panel-body .panel-nav a i {
    border-radius: 8px;
    font-size: 0.9rem;
    height: 27px;
    width: 27px;
}

.panel-body .panel-sidebar-profile {
    padding: 0.7rem 0.8rem;
}

.panel-body .panel-avatar {
    border-radius: 10px;
    flex-basis: 34px;
    height: 34px;
}

.panel-body .panel-topbar {
    min-height: 68px;
    padding: 0.7rem clamp(0.9rem, 2.2vw, 1.55rem);
}

.panel-body .panel-heading-wrap h1 {
    font-size: clamp(0.98rem, 1.5vw, 1.16rem);
}

.panel-body .panel-icon-button,
.panel-body .panel-menu-toggle,
.panel-body .panel-logout-button {
    border-radius: 9px;
    height: 36px;
    min-height: 36px;
}

.panel-body .panel-icon-button,
.panel-body .panel-menu-toggle {
    width: 36px;
}

.panel-body .panel-content {
    max-width: 1540px;
    padding: clamp(0.85rem, 2.2vw, 1.45rem);
}

.panel-body .panel-card {
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(33, 48, 73, 0.045);
    padding: 1rem;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.panel-body .panel-card:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 24%, var(--panel-border));
    box-shadow: 0 12px 30px rgba(33, 48, 73, 0.075);
}

.panel-body .btn {
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 750;
    min-height: 36px;
    padding: 0.42rem 0.72rem;
}

.panel-body .btn-sm {
    min-height: 30px;
    padding: 0.28rem 0.55rem;
}

.panel-body .form-label {
    font-size: 0.73rem;
    font-weight: 800;
    margin-bottom: 0.38rem;
}

.panel-body .form-control,
.panel-body .form-select,
.panel-body .select2-container--default .select2-selection--single,
.panel-body .select2-container--default .select2-selection--multiple {
    border-radius: 9px;
    font-size: 0.8rem;
    min-height: 39px;
}

.panel-body textarea.form-control {
    line-height: 1.9;
    min-height: auto;
}

.panel-body .admin-card-head {
    padding: 0.75rem;
}

.panel-body .admin-table> :not(caption)>*>* {
    padding: 0.72rem 0.8rem;
}

.panel-body .status-pill {
    font-size: 0.68rem;
    padding: 0.28rem 0.58rem;
}

.panel-body .panel-card .metric {
    font-size: 1.45rem;
}

.panel-content>* {
    animation: panel-enter 0.42s cubic-bezier(0.22, 0.8, 0.26, 1) both;
}

.panel-content>*:nth-child(2) {
    animation-delay: 0.045s;
}

.panel-content>*:nth-child(3) {
    animation-delay: 0.09s;
}

.panel-content>*:nth-child(4) {
    animation-delay: 0.135s;
}

.panel-content>*:nth-child(5) {
    animation-delay: 0.18s;
}

@keyframes panel-enter {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-body .panel-nav a.active i {
    animation: active-nav-pulse 2.8s ease-in-out infinite;
}

@keyframes active-nav-pulse {

    0%,
    100% {
        box-shadow: 0 5px 14px rgba(34, 168, 151, 0.22);
    }

    50% {
        box-shadow: 0 5px 20px rgba(34, 168, 151, 0.42);
    }
}

/* Reusable admin fields */
.admin-field {
    min-width: 0;
}

.field-required {
    color: var(--panel-danger);
}

.number-input-shell,
.date-input-shell {
    align-items: stretch;
    display: flex;
    position: relative;
}

.number-input-shell>button,
.date-input-shell>button {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    color: var(--panel-muted);
    display: grid;
    place-items: center;
    transition: color 0.18s ease, background 0.18s ease;
    width: 36px;
}

.number-input-shell>button:first-child {
    border-radius: 0 9px 9px 0;
    border-left: 0;
}

.number-input-shell>button:last-child {
    border-radius: 9px 0 0 9px;
    border-right: 0;
}

.number-input-shell .form-control {
    border-radius: 0;
    text-align: center;
}

.number-input-shell input::-webkit-inner-spin-button,
.number-input-shell input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.date-input-shell>i {
    color: var(--panel-accent);
    pointer-events: none;
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.date-input-shell .form-control {
    padding-right: 2.25rem;
}

.date-input-shell>button {
    border-radius: 9px 0 0 9px;
    border-right: 0;
}

.file-input-shell {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px dashed color-mix(in srgb, var(--panel-accent) 38%, var(--panel-border));
    border-radius: 11px;
    cursor: pointer;
    display: grid;
    gap: 0.15rem;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 0.62rem 0.72rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.file-input-shell:hover {
    background: var(--panel-accent-soft);
    border-color: var(--panel-accent);
    transform: translateY(-1px);
}

.file-input-shell>i {
    color: var(--panel-accent);
    font-size: 1.35rem;
    grid-row: 1 / 3;
}

.file-input-shell>span {
    color: var(--panel-text);
    font-size: 0.76rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-input-shell>small {
    color: var(--panel-muted);
    font-size: 0.64rem;
}

.file-upload-progress {
    margin-top: 0.55rem;
}

.file-upload-progress[hidden] {
    display: none;
}

.file-progress-meta {
    color: var(--panel-muted);
    display: flex;
    font-size: 0.65rem;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.file-progress-meta strong {
    color: var(--panel-accent);
}

.file-upload-progress .progress {
    background: var(--panel-border);
    height: 5px;
    overflow: hidden;
}

.file-upload-progress .progress-bar {
    background: linear-gradient(90deg, #0f766e, #3dc4b3);
    border-radius: inherit;
    position: relative;
    transition: width 0.18s ease;
}

.file-upload-progress .progress-bar:not(.is-complete)::after {
    animation: progress-shimmer 1.1s linear infinite;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(100%);
}

@keyframes progress-shimmer {
    to {
        transform: translateX(-100%);
    }
}

/* CKEditor & datepicker */
.panel-body .ck.ck-editor {
    color: #182230;
}

.panel-body .ck.ck-toolbar {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    border-radius: 10px 10px 0 0 !important;
}

.panel-body .ck.ck-editor__main>.ck-editor__editable {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    color: var(--panel-text);
    line-height: 2;
    min-height: 210px;
}

.panel-body .ck.ck-editor__main>.ck-editor__editable.ck-focused {
    border-color: var(--panel-accent);
    box-shadow: 0 0 0 0.18rem rgba(18, 135, 121, 0.1);
}

.datepicker-plot-area {
    border: 1px solid var(--panel-border) !important;
    border-radius: 13px !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.18) !important;
    font-family: "IRANSans", Tahoma, sans-serif !important;
    overflow: hidden;
}

.datepicker-container {
    z-index: 2060 !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span.selected,
.datepicker-plot-area .datepicker-year-view .year-item.selected,
.datepicker-plot-area .datepicker-month-view .month-item.selected {
    background: var(--panel-accent) !important;
    border-radius: 8px !important;
    text-shadow: none !important;
}

/* Activity timeline */
.activity-filter-grid {
    align-items: end;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
    margin: 1rem 0;
    padding: 0.85rem;
}

.activity-filter-actions {
    display: flex;
    gap: 0.4rem;
}

.activity-timeline {
    display: grid;
}

.activity-item {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 0.8rem 0;
    position: relative;
}

.activity-item:not(:last-child)::after {
    background: var(--panel-border);
    bottom: -1px;
    content: "";
    right: 16px;
    position: absolute;
    top: 42px;
    width: 1px;
}

.activity-icon {
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 28%, var(--panel-border));
    border-radius: 10px;
    color: var(--panel-accent);
    display: grid;
    height: 34px;
    place-items: center;
    width: 34px;
    z-index: 1;
}

.activity-icon.event-deleted {
    background: rgba(195, 76, 86, 0.1);
    color: var(--panel-danger);
}

.activity-title-row {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.activity-title-row>div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.activity-title-row time,
.activity-content>small {
    color: var(--panel-muted);
    font-size: 0.64rem;
    white-space: nowrap;
}

.activity-changes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.activity-changes>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    font-size: 0.66rem;
    gap: 0.35rem;
    padding: 0.3rem 0.45rem;
}

.activity-changes del {
    color: var(--panel-danger);
}

.activity-changes ins {
    color: var(--panel-accent);
    text-decoration: none;
}

/* Teacher studio */
.teacher-hero {
    align-items: center;
    background: linear-gradient(125deg, #105e58, #123e4b 58%, #172d45);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(15, 58, 66, 0.16);
    color: #fff;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.25rem 1.4rem;
    position: relative;
}

.teacher-hero::after {
    background: radial-gradient(circle, rgba(80, 222, 199, .22), transparent 68%);
    content: "";
    height: 260px;
    left: -80px;
    position: absolute;
    top: -120px;
    width: 260px;
}

.teacher-hero h2 {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0.25rem 0 0.45rem;
}

.teacher-hero p {
    color: rgba(255, 255, 255, .72);
    font-size: 0.78rem;
    margin: 0;
}

.teacher-hero-stat {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 110px;
    padding: 0.7rem;
    z-index: 1;
}

.teacher-hero-stat strong {
    font-size: 1.5rem;
}

.teacher-hero-stat span {
    color: rgba(255, 255, 255, .65);
    font-size: .68rem;
}

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

.teacher-course-card {
    overflow: hidden;
    padding: 0 !important;
}

.teacher-course-card:hover {
    transform: translateY(-3px);
}

.teacher-course-cover {
    overflow: hidden;
    position: relative;
}

.teacher-course-cover img {
    aspect-ratio: 16 / 8.5;
    object-fit: cover;
    transition: transform .35s ease;
    width: 100%;
}

.teacher-course-card:hover .teacher-course-cover img {
    transform: scale(1.035);
}

.teacher-course-cover>span {
    background: rgba(8, 20, 28, .7);
    border-radius: 8px;
    bottom: .6rem;
    color: #fff;
    font-size: .62rem;
    padding: .28rem .45rem;
    position: absolute;
    right: .6rem;
}

.teacher-course-body {
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
}

.teacher-course-body h3 {
    font-size: .88rem;
    font-weight: 900;
}

.teacher-course-body p {
    color: var(--panel-muted);
    font-size: .7rem;
    line-height: 1.8;
    margin: 0;
    min-height: 40px;
}

.teacher-course-metrics {
    border-bottom: 1px solid var(--panel-border);
    border-top: 1px solid var(--panel-border);
    color: var(--panel-muted);
    display: flex;
    font-size: .68rem;
    gap: 1rem;
    padding: .55rem 0;
}

.teacher-course-metrics i {
    color: var(--panel-accent);
    margin-left: .3rem;
}

.teacher-course-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.teacher-course-heading-image img {
    border-radius: 13px;
    height: 78px;
    object-fit: cover;
    width: 120px;
}

.teacher-course-heading a,
.teacher-course-heading p {
    color: var(--panel-muted);
    font-size: .7rem;
}

.teacher-course-heading h2 {
    font-size: 1.1rem;
    font-weight: 900;
    margin: .35rem 0;
}

.compact-editor-card {
    max-width: 1100px;
}

.teacher-chapter-list {
    display: grid;
    gap: 0.8rem;
}

.teacher-chapter-card {
    overflow: hidden;
    padding: 0 !important;
}

.teacher-chapter-card .accordion-button {
    background: var(--panel-surface);
    box-shadow: none;
    color: var(--panel-text);
    gap: .7rem;
    padding: .85rem 1rem;
}

.teacher-chapter-card .accordion-button:not(.collapsed) {
    color: var(--panel-accent);
}

.teacher-chapter-card .accordion-button>span:nth-child(2) {
    display: grid;
    gap: .18rem;
}

.teacher-chapter-card .accordion-button small {
    color: var(--panel-muted);
    font-size: .64rem;
}

.chapter-number {
    background: var(--panel-accent-soft);
    border-radius: 9px;
    display: grid;
    flex: 0 0 32px;
    height: 32px;
    place-items: center;
}

.teacher-chapter-card .accordion-body {
    background: var(--panel-surface-soft);
    border-top: 1px solid var(--panel-border);
    padding: .9rem;
}

.teacher-inline-form {
    align-items: end;
    display: grid;
    gap: .7rem;
    grid-template-columns: minmax(220px, 1fr) 170px auto auto;
}

.teacher-lesson-list {
    display: grid;
    gap: .7rem;
    margin-top: .9rem;
}

.teacher-lesson-editor {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: .85rem;
}

.teacher-lesson-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    margin-bottom: .75rem;
    padding-bottom: .65rem;
}

.teacher-lesson-head>span:first-child {
    color: var(--panel-accent);
    font-size: 1.2rem;
}

.teacher-lesson-head>div {
    display: grid;
}

.teacher-lesson-head small {
    color: var(--panel-muted);
    font-size: .62rem;
}

.teacher-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .7rem;
}

.teacher-attachments>span {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-muted);
    font-size: .66rem;
    padding: .3rem .45rem;
}

.teacher-attachments button {
    background: none;
    border: 0;
    color: var(--panel-danger);
    margin-right: .35rem;
    padding: 0;
}

.course-rich-description {
    line-height: 2;
}

.course-rich-description p:last-child {
    margin-bottom: 0;
}

/* Dark mode rebuilt for both admin and teacher */
html[data-panel-theme="dark"] .panel-body {
    --panel-bg: #080d14;
    --panel-surface: #101822;
    --panel-surface-soft: #0c141e;
    --panel-border: #223044;
    --panel-text: #edf3fa;
    --panel-muted: #92a3b8;
    --panel-accent: #4bd2bf;
    --panel-accent-soft: rgba(75, 210, 191, .1);
    --panel-danger: #ff8790;
    background: #080d14;
    color: #edf3fa;
}

html[data-panel-theme="dark"] .panel-body .panel-main {
    background: radial-gradient(circle at 75% 0, rgba(29, 88, 91, .11), transparent 34%), var(--panel-bg);
}

html[data-panel-theme="dark"] .panel-body .panel-topbar {
    background: rgba(12, 19, 29, .88);
    border-color: #1d2a3b;
}

html[data-panel-theme="dark"] .panel-body .panel-card {
    background: linear-gradient(145deg, #111b27, #0f1721);
    border-color: #223044;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .2);
}

html[data-panel-theme="dark"] .panel-body .panel-card:hover {
    border-color: #335166;
    box-shadow: 0 15px 38px rgba(0, 0, 0, .28);
}

html[data-panel-theme="dark"] .panel-body .form-control,
html[data-panel-theme="dark"] .panel-body .form-select,
html[data-panel-theme="dark"] .panel-body .select2-container--default .select2-selection--single,
html[data-panel-theme="dark"] .panel-body .select2-container--default .select2-selection--multiple {
    background-color: #0b131d;
    border-color: #29384b;
    color: #e7eef7;
}

html[data-panel-theme="dark"] .panel-body .form-control::placeholder {
    color: #607187;
}

html[data-panel-theme="dark"] .panel-body .form-control:focus,
html[data-panel-theme="dark"] .panel-body .form-select:focus {
    background: #0d1722;
    border-color: #4bd2bf;
    box-shadow: 0 0 0 .18rem rgba(75, 210, 191, .1);
}

html[data-panel-theme="dark"] .panel-body .table tbody tr:hover {
    background: rgba(75, 210, 191, .045);
}

html[data-panel-theme="dark"] .panel-body .btn-light {
    background: #182333;
    border-color: #29394d;
    color: #c8d4e2;
}

html[data-panel-theme="dark"] .panel-body .btn-light:hover {
    background: #223146;
    color: #fff;
}

html[data-panel-theme="dark"] .panel-body .btn-primary {
    --bs-btn-bg: #198f81;
    --bs-btn-border-color: #198f81;
    --bs-btn-hover-bg: #22a997;
    --bs-btn-hover-border-color: #22a997;
}

html[data-panel-theme="dark"] .panel-body .modal-content,
html[data-panel-theme="dark"] .panel-body .modal-header,
html[data-panel-theme="dark"] .panel-body .modal-footer {
    background: #101923;
    border-color: #263549;
    color: #edf3fa;
}

html[data-panel-theme="dark"] .panel-body .btn-close {
    filter: invert(1) grayscale(1);
}

html[data-panel-theme="dark"] .panel-body .ck.ck-toolbar,
html[data-panel-theme="dark"] .panel-body .ck.ck-editor__main>.ck-editor__editable {
    background: #0b131d;
    border-color: #29384b;
    color: #e7eef7;
}

html[data-panel-theme="dark"] .panel-body .ck.ck-button,
html[data-panel-theme="dark"] .panel-body .ck.ck-button .ck-icon {
    color: #aebed0;
}

html[data-panel-theme="dark"] .panel-body .ck.ck-button:hover,
html[data-panel-theme="dark"] .panel-body .ck.ck-button.ck-on {
    background: #1d2a3a;
    color: #fff;
}

html[data-panel-theme="dark"] .datepicker-plot-area {
    background: #111b27 !important;
    border-color: #2a3a4e !important;
    color: #dce6f2 !important;
}

html[data-panel-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span,
html[data-panel-theme="dark"] .datepicker-plot-area .datepicker-header .btn-next,
html[data-panel-theme="dark"] .datepicker-plot-area .datepicker-header .btn-switch,
html[data-panel-theme="dark"] .datepicker-plot-area .datepicker-header .btn-prev {
    color: #c9d6e5 !important;
}

html[data-panel-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span:hover {
    background: #223146 !important;
}

html[data-panel-theme="dark"] .swal2-popup {
    background: #111b27;
    color: #edf3fa;
}

html[data-panel-theme="dark"] .swal2-title,
html[data-panel-theme="dark"] .swal2-html-container {
    color: #dce6f2;
}

html[data-panel-theme="dark"] .teacher-chapter-card .accordion-button,
html[data-panel-theme="dark"] .teacher-chapter-card .accordion-body,
html[data-panel-theme="dark"] .teacher-lesson-editor {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

@media (max-width: 1199.98px) {
    .activity-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .teacher-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .panel-body .panel-layout {
        grid-template-columns: 1fr;
    }

    .teacher-inline-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {

    .activity-filter-grid,
    .teacher-course-grid,
    .teacher-inline-form {
        grid-template-columns: 1fr;
    }

    .teacher-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .teacher-course-heading {
        align-items: flex-start;
    }

    .activity-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
    }
}

@media (max-width: 575.98px) {
    .panel-body .panel-topbar {
        min-height: 62px;
    }

    .panel-body .panel-content {
        padding: .7rem;
    }

    .panel-body .panel-card {
        border-radius: 12px;
        padding: .8rem;
    }

    .teacher-course-heading-image img {
        height: 58px;
        width: 82px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .panel-content>*,
    .panel-body .panel-nav a.active i,
    .file-upload-progress .progress-bar::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Login forms are full-bleed on responsive screens. */
@media (max-width: 767.98px) {

    .auth-login-shell,
    .auth-formal-panel-shell.auth-minimal-panel-shell.auth-login-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .auth-login-shell>.container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .auth-login-shell .auth-modern-grid,
    .auth-formal-panel-shell.auth-minimal-panel-shell.auth-login-shell .auth-modern-grid {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        gap: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .auth-login-shell .auth-modern-card,
    .auth-login-shell .auth-panel-login-card {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        width: 100%;
    }
}

/* Universal toggle tracks ------------------------------------------------ */
.form-check-input[type="checkbox"] {
    appearance: none;
    background-color: #d9e1e8;
    background-image: radial-gradient(circle, #fff 0 58%, transparent 62%);
    background-position: right 2px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    border: 1px solid #cbd5df;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
    cursor: pointer;
    flex: 0 0 35px;
    height: 19px;
    margin: 0 !important;
    transition: background-color .2s ease, background-position .22s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, box-shadow .2s ease;
    width: 35px;
}

.form-check-input[type="checkbox"]:checked {
    background-color: #159485;
    background-image: radial-gradient(circle, #fff 0 58%, transparent 62%);
    background-position: left 2px center;
    border-color: #159485;
    box-shadow: 0 0 0 3px rgba(21, 148, 133, .1), inset 0 1px 2px rgba(0, 0, 0, .08);
}

.form-check-input[type="checkbox"]:focus {
    border-color: #159485;
    box-shadow: 0 0 0 3px rgba(21, 148, 133, .13);
}

.form-check-input[type="checkbox"]:disabled {
    cursor: not-allowed;
    filter: grayscale(.4);
    opacity: .55;
}

.form-check:has(.form-check-input[type="checkbox"]) {
    align-items: center;
    display: flex;
    gap: .58rem;
    min-height: 24px;
    padding: 0;
}

.toggle-field {
    background: var(--panel-surface-soft, #f7fafb);
    border: 1px solid var(--panel-border, #e2e8ee);
    border-radius: 11px;
    justify-content: space-between;
    padding: .65rem .75rem !important;
}

.toggle-field .form-check-input {
    order: 2;
}

.toggle-field .form-check-label {
    display: grid;
    gap: .16rem;
}

.toggle-field .form-check-label strong {
    font-size: .74rem;
}

.toggle-field .form-check-label small {
    color: var(--panel-muted, #748196);
    font-size: .62rem;
}

html[data-panel-theme="dark"] .form-check-input[type="checkbox"] {
    background-color: #263448;
    border-color: #37485e;
}

html[data-panel-theme="dark"] .form-check-input[type="checkbox"]:checked {
    background-color: #35baa7;
    border-color: #35baa7;
}

/* Premium public theme --------------------------------------------------- */
.public-body {
    --public-primary: #0d796f;
    --public-primary-2: #16a08f;
    --public-ink: #17232f;
    --public-muted: #6b7b8d;
    --public-line: #e4ebe9;
    background: #f8fafb;
    color: var(--public-ink);
}

.public-body .site-header-v2 {
    background: rgba(255, 255, 255, .84);
    border-bottom: 1px solid rgba(222, 232, 230, .86);
    box-shadow: 0 7px 30px rgba(31, 56, 65, .055);
    backdrop-filter: blur(18px) saturate(1.4);
}

.public-nav-shell {
    min-height: 66px;
}

.public-brand-copy {
    display: grid;
    gap: .08rem;
    line-height: 1.15;
}

.public-brand-copy strong {
    color: #153f3b;
    font-size: .86rem;
    font-weight: 950;
}

.public-brand-copy small {
    color: #84918f;
    font-size: .55rem;
    font-weight: 500;
}

.public-body .site-main-nav {
    background: #f6f9f8;
    border: 1px solid #edf2f1;
    border-radius: 11px;
    gap: .12rem;
    padding: .18rem;
}

.public-body .site-main-nav .nav-link {
    border-radius: 8px;
    color: #53656b;
    font-size: .73rem;
    padding: .45rem .62rem;
}

.public-body .site-main-nav .nav-link.active,
.public-body .site-main-nav .nav-link:hover {
    background: #fff;
    box-shadow: 0 3px 12px rgba(32, 70, 66, .08);
    color: var(--public-primary);
}

.public-body .site-search {
    background: #f7faf9;
    border-color: #e5ecea;
    border-radius: 11px;
    font-size: .72rem;
    max-width: 260px;
    padding: .48rem .68rem;
}

.public-body .site-user-actions {
    gap: .4rem;
}

.public-body .site-user-actions .btn {
    border-radius: 9px;
    font-size: .69rem;
    min-height: 34px;
    padding: .42rem .65rem;
}

.public-main {
    min-height: 62vh;
    overflow: hidden;
}

.public-main>section,
.public-main>article {
    animation: public-reveal .58s cubic-bezier(.22, .8, .24, 1) both;
}

@keyframes public-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.public-body .home-v2-shell {
    background:
        radial-gradient(circle at 8% 14%, rgba(28, 180, 158, .12), transparent 26%),
        radial-gradient(circle at 90% 8%, rgba(247, 180, 82, .1), transparent 22%),
        linear-gradient(180deg, #fbfefd 0%, #f3f8f7 100%);
    border-bottom: 1px solid #e7eeec;
    padding: 3.2rem 0 1.6rem;
    position: relative;
}

.public-body .home-v2-topline {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    margin-bottom: 2.2rem;
}

.public-body .home-v2-kicker {
    align-items: center;
    background: rgba(13, 121, 111, .08);
    border: 1px solid rgba(13, 121, 111, .12);
    border-radius: 999px;
    color: var(--public-primary);
    display: inline-flex;
    font-size: .68rem;
    gap: .38rem;
    padding: .38rem .68rem;
}

.public-body .home-v2-topline h1 {
    color: #172d34;
    font-size: clamp(2.15rem, 4vw, 3.65rem);
    letter-spacing: -.04em;
    line-height: 1.28;
    margin: .8rem 0 .65rem;
    max-width: 720px;
}

.public-body .home-v2-topline h1 em {
    color: var(--public-primary-2);
    font-style: normal;
    position: relative;
}

.public-body .home-v2-topline h1 em::after {
    background: rgba(22, 160, 143, .14);
    border-radius: 999px;
    bottom: .08em;
    content: "";
    height: .22em;
    inset-inline: 0;
    position: absolute;
    z-index: -1;
}

.public-body .home-v2-topline p {
    color: var(--public-muted);
    font-size: .88rem;
    line-height: 2;
    max-width: 610px;
}

.home-v3-actions,
.home-v3-trust {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.home-v3-actions {
    gap: 1rem;
    margin-top: 1.15rem;
}

.home-v3-actions .btn {
    border-radius: 11px;
    font-size: .76rem;
    padding: .65rem 1rem;
}

.home-v3-play {
    align-items: center;
    color: #354c53;
    display: flex;
    font-size: .72rem;
    font-weight: 800;
    gap: .45rem;
}

.home-v3-play i {
    background: #fff;
    border: 1px solid #dfe9e7;
    border-radius: 50%;
    box-shadow: 0 7px 20px rgba(25, 78, 72, .1);
    color: var(--public-primary);
    display: grid;
    height: 34px;
    place-items: center;
    width: 34px;
}

.home-v3-trust {
    color: #718087;
    font-size: .61rem;
    gap: .8rem;
    margin-top: 1.15rem;
}

.home-v3-trust i {
    color: var(--public-primary-2);
    margin-left: .2rem;
}

.public-body .home-v2-search {
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e3ebe9;
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(25, 69, 66, .09);
    padding: .55rem;
}

.public-body .home-v2-search input {
    font-size: .77rem;
}

.public-body .home-v2-search button {
    border-radius: 10px;
    font-size: .72rem;
    padding: .65rem 1rem;
}

.public-body .home-hero-grid-v2 {
    gap: 1rem;
    grid-template-columns: 235px minmax(0, 1fr);
}

.public-body .home-category-rail-v2,
.public-body .home-slider-panel-v2 {
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e3ebe9;
    border-radius: 18px;
    box-shadow: 0 12px 38px rgba(24, 65, 62, .065);
}

.public-body .home-category-rail-v2 {
    padding: .85rem;
}

.public-body .home-category-rail-v2 h2 {
    font-size: .78rem;
    padding: 0 .35rem .65rem;
}

.public-body .home-category-rail-v2 a {
    border-radius: 9px;
    color: #596b70;
    font-size: .68rem;
    padding: .52rem .58rem;
}

.public-body .home-category-rail-v2 a:hover {
    background: #eef8f6;
    color: var(--public-primary);
    transform: translateX(-2px);
}

.public-body .home-slider-panel-v2 {
    padding: .45rem;
}

.public-body .hero-swiper-v2,
.public-body .hero-swiper-v2 img {
    border-radius: 14px;
}

.public-body .home-v2-stats {
    background: #fff;
    border: 1px solid #e6edeb;
    border-radius: 15px;
    box-shadow: 0 12px 35px rgba(27, 63, 61, .055);
    margin-top: 1rem;
    overflow: hidden;
}

.public-body .home-v2-stats div {
    background: transparent;
    border: 0;
    border-left: 1px solid #e9efed;
    border-radius: 0;
    padding: .85rem 1rem;
}

.public-body .home-v2-stats div:last-child {
    border-left: 0;
}

.public-body .home-v2-stats strong {
    color: #174d48;
    font-size: 1.15rem;
}

.public-body .home-v2-stats span {
    font-size: .63rem;
}

.public-body .mk-section {
    padding: 3.1rem 0;
}

.public-body .mk-section-head h2 {
    color: #172f35;
    font-size: 1.2rem;
}

.public-body .mk-section-head p {
    font-size: .7rem;
}

.public-body .mk-section-head>a {
    color: var(--public-primary);
    font-size: .7rem;
}

.public-body .home-category-card-v2,
.public-body .course-card,
.public-body .article-card {
    border-color: #e4ebe9;
    border-radius: 15px;
    box-shadow: 0 8px 26px rgba(30, 59, 65, .045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.public-body .home-category-card-v2:hover,
.public-body .course-card:hover,
.public-body .article-card:hover {
    border-color: rgba(13, 121, 111, .22);
    box-shadow: 0 16px 38px rgba(30, 70, 67, .09);
    transform: translateY(-3px);
}

.public-body .home-category-card-v2 img {
    border-radius: 10px;
}

.public-body .page-hero,
.public-body .content-page-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(22, 160, 143, .12), transparent 25%),
        linear-gradient(135deg, #f7fbfa, #edf6f4);
    border-bottom: 1px solid #e1ebe8;
    color: var(--public-ink);
    padding: 3rem 0;
}

.public-body .content-page-hero h1,
.public-body .page-hero h1 {
    color: #173b3a;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.public-body .content-page-hero p {
    color: var(--public-muted);
    font-size: .78rem;
}

.public-body .course-filter-panel,
.public-body .public-filter-bar {
    background: #fff;
    border: 1px solid #e5ecea;
    border-radius: 14px;
    box-shadow: 0 7px 25px rgba(31, 63, 67, .04);
    padding: .7rem;
}

.public-body .article-card {
    overflow: hidden;
}

.public-body .article-card img {
    transition: transform .35s ease;
}

.public-body .article-card:hover img {
    transform: scale(1.035);
}

.public-body .article-card h2 {
    font-size: .9rem;
}

.public-body .article-card p {
    font-size: .7rem;
    line-height: 1.9;
}

.public-body .article-show-head {
    max-width: 850px;
}

.public-body .article-show-head h1 {
    font-size: clamp(1.65rem, 3.2vw, 2.65rem);
    line-height: 1.55;
}

.public-body .article-cover {
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(26, 57, 64, .12);
}

.public-body .article-body {
    background: #fff;
    border: 1px solid #e5ecea;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(25, 54, 61, .055);
}

.public-body .site-footer-v2 {
    background: #0c211f;
    margin-top: 2rem;
    padding-top: 0;
}

.public-footer-cta {
    align-items: center;
    background: linear-gradient(110deg, #168f81, #0f665f);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    box-shadow: 0 18px 50px rgba(4, 32, 29, .22);
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1.15rem 1.35rem;
    position: relative;
    top: -1.4rem;
}

.public-footer-cta>div {
    display: grid;
    gap: .2rem;
}

.public-footer-cta span {
    color: rgba(255, 255, 255, .66);
    font-size: .63rem;
}

.public-footer-cta strong {
    font-size: .92rem;
}

.public-footer-cta a {
    background: #fff;
    border-radius: 10px;
    color: #0f6f65;
    font-size: .7rem;
    font-weight: 900;
    padding: .65rem .85rem;
}

/* Teacher modal studio --------------------------------------------------- */
.panel-role-teacher .panel-sidebar {
    background: linear-gradient(180deg, #152c38 0%, #10242f 54%, #0c1d27 100%);
}

.panel-role-teacher .panel-nav a.active,
.panel-role-teacher .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(52, 179, 169, .28), rgba(92, 118, 205, .12));
}

.panel-role-teacher .panel-nav a.active i,
.panel-role-teacher .panel-avatar {
    background: linear-gradient(135deg, #38b9a8, #5275bf);
}

.panel-role-teacher .teacher-hero {
    background:
        radial-gradient(circle at 8% 18%, rgba(91, 215, 197, .24), transparent 26%),
        linear-gradient(120deg, #173e48, #1c3550 58%, #29375c);
}

.teacher-studio-heading {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(25, 48, 65, .055);
    padding: .85rem;
}

.teacher-intro-editor {
    margin: 0 auto;
}

.teacher-structure-summary {
    align-items: center;
    background: linear-gradient(120deg, var(--panel-surface), var(--panel-surface-soft));
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    display: flex;
    gap: .7rem;
    margin-bottom: .8rem;
    padding: .7rem;
}

.teacher-structure-summary>div {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    display: flex;
    gap: .5rem;
    min-width: 105px;
    padding: .5rem .65rem;
}

.teacher-structure-summary>div i {
    color: var(--panel-accent);
    font-size: 1rem;
}

.teacher-structure-summary>div span {
    color: var(--panel-muted);
    display: grid;
    font-size: .62rem;
}

.teacher-structure-summary>div strong {
    color: var(--panel-text);
    font-size: .92rem;
}

.teacher-structure-summary p {
    color: var(--panel-muted);
    font-size: .68rem;
    margin: 0 auto 0 0;
}

.teacher-modal-structure {
    display: grid;
    gap: .75rem;
}

.teacher-structure-chapter {
    overflow: hidden;
    padding: 0 !important;
}

.teacher-structure-chapter>header {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: .75rem;
}

.teacher-structure-chapter>header h3 {
    font-size: .78rem;
    font-weight: 900;
    margin: 0 0 .2rem;
}

.teacher-structure-chapter>header p {
    color: var(--panel-muted);
    font-size: .62rem;
    margin: 0;
}

.teacher-structure-lessons {
    background: var(--panel-surface-soft);
    border-top: 1px solid var(--panel-border);
    display: grid;
    padding: .45rem .65rem;
}

.teacher-structure-lesson {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 22px 30px minmax(0, 1fr) auto 32px;
    min-height: 52px;
    padding: .35rem .2rem;
}

.teacher-structure-lesson:last-child {
    border-bottom: 0;
}

.lesson-order {
    color: var(--panel-muted);
    font-size: .6rem;
    text-align: center;
}

.lesson-type-icon {
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent);
    display: grid;
    height: 29px;
    place-items: center;
    width: 29px;
}

.teacher-structure-lesson>div {
    display: grid;
    gap: .16rem;
}

.teacher-structure-lesson strong {
    font-size: .72rem;
}

.teacher-structure-lesson small {
    color: var(--panel-muted);
    font-size: .59rem;
}

.teacher-edit-icon {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-accent);
    display: grid;
    height: 30px;
    place-items: center;
    transition: transform .18s ease, background .18s ease;
    width: 30px;
}

.teacher-edit-icon:hover {
    background: var(--panel-accent);
    color: #fff;
    transform: translateY(-1px);
}

.teacher-editor-modal .modal-content {
    border: 1px solid var(--panel-border);
    border-radius: 15px;
    box-shadow: 0 24px 80px rgba(4, 14, 22, .25);
    overflow: hidden;
}

.teacher-editor-modal .modal-header {
    background: var(--panel-surface-soft);
    padding: .8rem 1rem;
}

.teacher-editor-modal .modal-body {
    padding: 1rem;
}

.teacher-editor-modal .modal-footer {
    padding: .7rem 1rem;
}

.modal-kicker {
    color: var(--panel-accent);
    display: block;
    font-size: .59rem;
    font-weight: 800;
    margin-bottom: .15rem;
}

html[data-panel-theme="dark"] .teacher-studio-heading,
html[data-panel-theme="dark"] .teacher-structure-summary,
html[data-panel-theme="dark"] .teacher-structure-summary>div {
    background: #101a26;
    border-color: #25364a;
}

html[data-panel-theme="dark"] .teacher-structure-lessons {
    background: #0c151f;
}

@media (max-width: 991.98px) {

    .public-body .home-v2-topline,
    .public-body .home-hero-grid-v2 {
        grid-template-columns: 1fr;
    }

    .public-body .site-main-nav {
        background: transparent;
        border: 0;
        padding: .5rem 0;
    }

    .public-body .site-search {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .public-body .home-v2-shell {
        padding-top: 2rem;
    }

    .public-body .home-v2-topline {
        gap: 1.5rem;
    }

    .public-body .home-v2-topline h1 {
        font-size: 2rem;
    }

    .public-body .home-v2-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .public-body .home-v2-stats div:nth-child(2) {
        border-left: 0;
    }

    .public-footer-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: .8rem;
    }

    .teacher-studio-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .teacher-structure-summary {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .teacher-structure-summary p {
        flex-basis: 100%;
        margin: 0;
    }
}

@media (max-width: 575.98px) {
    .public-brand-copy small {
        display: none;
    }

    .public-body .home-v2-topline h1 {
        font-size: 1.75rem;
    }

    .public-body .mk-section {
        padding: 2.3rem 0;
    }

    .teacher-structure-chapter>header {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .teacher-structure-chapter>header .btn {
        grid-column: 1 / -1;
    }

    .teacher-structure-lesson {
        grid-template-columns: 20px 28px minmax(0, 1fr) 30px;
    }

    .teacher-structure-lesson .status-pill {
        display: none;
    }
}

.teacher-stat-card {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: 40px auto;
    overflow: hidden;
    position: relative;
}

.teacher-stat-card>i {
    background: linear-gradient(135deg, rgba(53, 186, 167, .16), rgba(82, 117, 191, .13));
    border: 1px solid rgba(53, 186, 167, .16);
    border-radius: 11px;
    color: var(--panel-accent);
    display: grid;
    font-size: 1.05rem;
    height: 40px;
    place-items: center;
    width: 40px;
}

.teacher-stat-card>div {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.teacher-stat-card>div .metric {
    font-size: 1.25rem !important;
}

.teacher-stat-card>div span {
    color: var(--panel-text);
    font-size: .7rem;
    font-weight: 800;
}

.teacher-stat-card>small {
    color: var(--panel-muted);
    font-size: .58rem;
    grid-column: 2;
    margin-top: -.55rem;
}

.teacher-dashboard-card {
    height: 100%;
}

.teacher-dashboard-card .table a {
    color: var(--panel-text);
}

.teacher-table-edit {
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 20%, var(--panel-border));
    border-radius: 7px;
    color: var(--panel-accent) !important;
    display: grid;
    height: 28px;
    place-items: center;
    width: 28px;
}

.panel-body .ck.ck-toolbar>.ck-toolbar__items {
    flex-wrap: wrap !important;
}

html[data-panel-theme="dark"] .panel-body .ck.ck-dropdown__panel,
html[data-panel-theme="dark"] .panel-body .ck.ck-balloon-panel,
html[data-panel-theme="dark"] .panel-body .ck.ck-list {
    background: #101a26;
    border-color: #2a3a4e;
    color: #e8eff7;
}

/* Teacher directory and analytics refresh */
.teacher-directory-hero,
.teacher-profile-hero {
    background:
        radial-gradient(circle at 12% 0, rgba(45, 212, 191, .18), transparent 28%),
        radial-gradient(circle at 88% 100%, rgba(99, 102, 241, .16), transparent 32%),
        #f7fafc;
    border-bottom: 1px solid #e8eef3;
    overflow: hidden;
    padding: 4.5rem 0 3.8rem;
    position: relative;
}

.teacher-directory-hero h1 {
    color: #102435;
    font-size: clamp(2rem, 5vw, 3.65rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.3;
    margin: 1rem 0 .75rem;
    max-width: 760px;
}

.teacher-directory-hero h1 em {
    color: #0f9f91;
    font-style: normal;
}

.teacher-directory-hero p {
    color: #667787;
    font-size: 1rem;
    line-height: 2;
    margin: 0;
    max-width: 690px;
}

.public-teacher-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-teacher-card {
    animation: panelItemIn .45s both;
    background: #fff;
    border: 1px solid #e7edf2;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(30, 52, 68, .055);
    display: flex;
    flex-direction: column;
    min-height: 330px;
    overflow: hidden;
    padding: 1.25rem;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.public-teacher-card:hover {
    border-color: rgba(15, 159, 145, .35);
    box-shadow: 0 20px 48px rgba(30, 52, 68, .11);
    transform: translateY(-5px);
}

.public-teacher-avatar {
    align-self: flex-start;
    border-radius: 16px;
    height: 88px;
    margin-bottom: 1rem;
    position: relative;
    width: 88px;
}

.public-teacher-avatar img,
.public-teacher-avatar>span {
    background: linear-gradient(135deg, #0f9f91, #3b5fa6);
    border-radius: inherit;
    color: #fff;
    display: grid;
    font-size: 2rem;
    font-weight: 900;
    height: 100%;
    object-fit: cover;
    place-items: center;
    width: 100%;
}

.public-teacher-avatar>i {
    background: #fff;
    border-radius: 50%;
    bottom: -4px;
    color: #0f9f91;
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px;
    position: absolute;
    right: -4px;
}

.public-teacher-copy>a {
    color: #122b3d;
    text-decoration: none;
}

.public-teacher-copy h3 {
    font-size: 1rem;
    font-weight: 900;
    margin: 0 0 .55rem;
}

.public-teacher-copy p {
    color: #71808e;
    font-size: .73rem;
    line-height: 1.9;
    margin-bottom: .8rem;
    min-height: 52px;
}

.public-teacher-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
}

.public-teacher-metrics span {
    color: #506270;
    font-size: .68rem;
}

.public-teacher-metrics i {
    color: #0f9f91;
    margin-left: .3rem;
}

.public-teacher-link {
    align-items: center;
    border-top: 1px solid #edf1f4;
    color: #0f9f91;
    display: flex;
    font-size: .72rem;
    font-weight: 800;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .85rem;
    text-decoration: none;
}

.home-teachers-section {
    background: linear-gradient(180deg, #f7fafc, #fff);
}

.public-empty-state {
    background: #fff;
    border: 1px dashed #d7e1e8;
    border-radius: 20px;
    color: #71808e;
    padding: 4rem 1rem;
    text-align: center;
}

.public-empty-state i {
    color: #0f9f91;
    font-size: 2.2rem;
}

.public-empty-state h2 {
    color: #253d4e;
    font-size: 1rem;
    margin: .8rem 0 0;
}

.teacher-profile-shell {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: 180px minmax(0, 1fr);
}

.teacher-profile-avatar {
    height: 180px;
    position: relative;
    width: 180px;
}

.teacher-profile-avatar img,
.teacher-profile-avatar>span {
    background: linear-gradient(145deg, #0f9f91, #465ea8);
    border: 6px solid #fff;
    border-radius: 35px;
    box-shadow: 0 22px 55px rgba(35, 66, 87, .16);
    color: #fff;
    display: grid;
    font-size: 4rem;
    font-weight: 900;
    height: 100%;
    object-fit: cover;
    place-items: center;
    width: 100%;
}

.teacher-profile-avatar i {
    background: #fff;
    border-radius: 50%;
    bottom: 5px;
    color: #0f9f91;
    font-size: 2rem;
    line-height: 1;
    padding: 3px;
    position: absolute;
    right: -5px;
}

.teacher-profile-intro h1 {
    color: #132b3c;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -.045em;
    margin: .7rem 0 .6rem;
}

.teacher-profile-intro>p {
    color: #5f7180;
    line-height: 2.15;
    margin-bottom: 1.2rem;
    max-width: 820px;
    white-space: pre-line;
}

.teacher-profile-stats {
    display: flex;
    gap: .75rem;
}

.teacher-profile-stats>div {
    background: rgba(255, 255, 255, .82);
    border: 1px solid #e0e9ef;
    border-radius: 13px;
    min-width: 125px;
    padding: .65rem .9rem;
}

.teacher-profile-stats strong,
.teacher-profile-stats span {
    display: block;
}

.teacher-profile-stats strong {
    color: #102f42;
    font-size: 1.15rem;
}

.teacher-profile-stats span {
    color: #748490;
    font-size: .63rem;
    margin-top: .12rem;
}

.teacher-hero-analytics {
    align-items: center;
}

.teacher-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.teacher-kpi-card {
    align-items: center;
    animation: panelItemIn .4s both;
    display: grid;
    gap: .8rem;
    grid-template-columns: 42px 1fr;
    min-height: 112px;
    padding: .9rem !important;
}

.teacher-kpi-icon {
    background: var(--panel-accent-soft);
    border-radius: 12px;
    color: var(--panel-accent);
    display: grid;
    font-size: 1.05rem;
    height: 42px;
    place-items: center;
    width: 42px;
}

.teacher-kpi-card.is-violet .teacher-kpi-icon {
    background: rgba(139, 92, 246, .12);
    color: #8b5cf6;
}

.teacher-kpi-card.is-cyan .teacher-kpi-icon {
    background: rgba(14, 165, 233, .12);
    color: #0ea5e9;
}

.teacher-kpi-card.is-amber .teacher-kpi-icon {
    background: rgba(245, 158, 11, .13);
    color: #d97706;
}

.teacher-kpi-card small,
.teacher-kpi-card strong,
.teacher-kpi-card span {
    display: block;
}

.teacher-kpi-card small {
    color: var(--panel-muted);
    font-size: .61rem;
    font-weight: 700;
}

.teacher-kpi-card strong {
    color: var(--panel-text);
    font-size: 1.35rem;
    line-height: 1.4;
}

.teacher-kpi-card div>span {
    color: var(--panel-muted);
    font-size: .56rem;
}

.teacher-period-box {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    display: grid;
    gap: .1rem;
    grid-template-columns: 1fr auto;
    padding: .75rem .9rem;
}

.teacher-period-box>span {
    color: var(--panel-muted);
    font-size: .61rem;
    font-weight: 800;
}

.teacher-period-box strong {
    color: var(--panel-accent);
    font-size: 1.1rem;
    grid-row: span 2;
}

.teacher-period-box small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.teacher-chart-card {
    overflow: hidden;
    padding: 1.05rem !important;
}

.teacher-chart-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.teacher-chart-head h2 {
    color: var(--panel-text);
    font-size: .92rem;
    font-weight: 900;
    margin: .2rem 0;
}

.teacher-chart-head p {
    color: var(--panel-muted);
    font-size: .61rem;
    margin: 0;
}

.teacher-chart-periods {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    display: flex;
    padding: 3px;
}

.teacher-chart-periods button {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--panel-muted);
    font-size: .61rem;
    font-weight: 800;
    padding: .42rem .7rem;
}

.teacher-chart-periods button.active {
    background: var(--panel-surface);
    box-shadow: 0 3px 10px rgba(20, 35, 50, .08);
    color: var(--panel-accent);
}

.teacher-chart-canvas {
    height: 300px;
    position: relative;
}

.teacher-profile-editor-head {
    align-items: center;
    background: linear-gradient(135deg, #0d675f, #2f4f88);
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1.2rem 1.4rem;
}

.teacher-profile-editor-head h2 {
    font-size: 1rem;
    font-weight: 900;
    margin: .25rem 0;
}

.teacher-profile-editor-head p {
    font-size: .65rem;
    margin: 0;
    opacity: .8;
}

.teacher-profile-form {
    padding: 1.2rem !important;
}

.teacher-avatar-editor {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    text-align: center;
}

.teacher-avatar-editor img,
.teacher-avatar-editor>span {
    background: linear-gradient(145deg, var(--panel-accent), #526bb2);
    border-radius: 22px;
    color: #fff;
    display: grid;
    font-size: 2.4rem;
    font-weight: 900;
    height: 120px;
    object-fit: cover;
    place-items: center;
    width: 120px;
}

.teacher-avatar-editor strong {
    color: var(--panel-text);
    font-size: .76rem;
    margin-top: .7rem;
}

.teacher-avatar-editor small {
    color: var(--panel-muted);
    font-size: .57rem;
}

.teacher-video-preview {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    padding: .75rem;
}

.teacher-media-head {
    align-items: center;
    color: var(--panel-text);
    display: flex;
    font-size: .65rem;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.teacher-media-head a {
    color: var(--panel-accent);
    font-size: .58rem;
    text-decoration: none;
}

.teacher-video-preview video {
    aspect-ratio: 16 / 9;
    background: #071018;
    border-radius: 10px;
    display: block;
    max-height: 340px;
    width: 100%;
}

.teacher-file-open {
    align-items: center;
    color: var(--panel-accent);
    display: flex;
    gap: .5rem;
    justify-content: center;
    padding: 1.5rem;
    text-decoration: none;
}

.teacher-attachments {
    display: grid;
    gap: .45rem;
}

.teacher-attachment-row {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    padding: .55rem .65rem;
}

.teacher-attachment-row>span {
    align-items: center;
    color: var(--panel-text);
    display: flex;
    gap: .35rem;
    min-width: 0;
}

.teacher-attachment-row strong {
    font-size: .61rem;
    max-width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-attachment-row small {
    color: var(--panel-muted);
    font-size: .52rem;
}

.teacher-attachment-row>div {
    display: flex;
    gap: .3rem;
}

.teacher-attachment-row a,
.teacher-attachment-row button {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: grid;
    height: 28px;
    padding: 0;
    place-items: center;
    text-decoration: none;
    width: 28px;
}

.teacher-attachment-row button {
    color: #dc5a67;
}

.panel-role-admin .stat-card-admin {
    min-height: 82px;
    padding: .75rem !important;
}

.panel-role-admin .stat-card-admin>i {
    height: 36px;
    width: 36px;
}

.panel-role-admin .stat-card-admin .metric {
    font-size: 1.25rem;
}

.admin-stat-student>i {
    color: #0ea5e9 !important;
}

.admin-stat-enrollment>i {
    color: #8b5cf6 !important;
}

.admin-stat-order>i {
    color: #f59e0b !important;
}

.admin-stat-content>i {
    color: #ec4899 !important;
}

.admin-teacher-overview {
    padding: 1rem !important;
}

.admin-teacher-rank-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-teacher-rank {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    color: var(--panel-text);
    display: grid;
    gap: .55rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: .55rem;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.admin-teacher-rank:hover {
    border-color: var(--panel-accent);
    transform: translateY(-2px);
}

.admin-teacher-avatar {
    background: var(--panel-accent-soft);
    border-radius: 9px;
    color: var(--panel-accent);
    display: grid;
    font-size: .8rem;
    font-weight: 900;
    height: 34px;
    overflow: hidden;
    place-items: center;
    width: 34px;
}

.admin-teacher-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.admin-teacher-rank>span:nth-child(2) {
    min-width: 0;
}

.admin-teacher-rank strong,
.admin-teacher-rank small {
    display: block;
}

.admin-teacher-rank strong {
    font-size: .62rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-teacher-rank small {
    color: var(--panel-muted);
    font-size: .51rem;
}

.admin-teacher-rank b {
    color: var(--panel-accent);
    font-size: .76rem;
    white-space: nowrap;
}

.admin-teacher-rank b small {
    display: inline;
}

html[data-panel-theme="dark"] .teacher-chart-periods button.active {
    box-shadow: none;
}

html[data-panel-theme="dark"] .teacher-video-preview video {
    background: #03070b;
}

@keyframes panelItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1199.98px) {
    .public-teacher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-teacher-rank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    .teacher-directory-hero,
    .teacher-profile-hero {
        padding: 3rem 0;
    }

    .teacher-profile-shell {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .teacher-profile-avatar {
        height: 140px;
        margin: auto;
        width: 140px;
    }

    .teacher-profile-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .teacher-profile-stats>div {
        flex: 1;
        min-width: 105px;
    }

    .teacher-chart-head,
    .teacher-profile-editor-head {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-chart-periods {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .teacher-chart-periods button {
        padding-inline: .35rem;
    }

    .teacher-chart-canvas {
        height: 260px;
    }

    .admin-teacher-rank-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .public-teacher-grid {
        grid-template-columns: 1fr;
    }

    .public-teacher-card {
        min-height: 300px;
    }

    .teacher-directory-hero h1 {
        font-size: 1.85rem;
    }

    .teacher-kpi-card {
        grid-template-columns: 34px 1fr;
        min-height: 104px;
        padding: .65rem !important;
    }

    .teacher-kpi-icon {
        border-radius: 10px;
        height: 34px;
        width: 34px;
    }

    .teacher-kpi-card strong {
        font-size: 1.1rem;
    }

    .teacher-attachment-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Teacher workspace v3 */
.panel-role-teacher .panel-content {
    max-width: 1500px;
    width: 100%;
}

.teacher-workspace-hero {
    align-items: stretch;
    animation: panelItemIn .45s ease both;
    background: linear-gradient(125deg, #075f58 0%, #126d7a 48%, #334c87 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    box-shadow: 0 18px 46px rgba(8, 55, 69, .16);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    min-height: 245px;
    overflow: hidden;
    position: relative;
}

.teacher-workspace-hero::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 1px, transparent 1px);
    background-size: 17px 17px;
    content: '';
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000);
    opacity: .35;
    position: absolute;
}

.teacher-workspace-copy {
    align-self: center;
    padding: 1.75rem 2rem;
    position: relative;
    z-index: 2;
}

.teacher-workspace-label {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    display: inline-flex;
    font-size: .6rem;
    font-weight: 800;
    gap: .35rem;
    padding: .35rem .65rem;
}

.teacher-workspace-copy h2 {
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.65;
    margin: .8rem 0 .35rem;
    max-width: 700px;
}

.teacher-workspace-copy p {
    color: rgba(255, 255, 255, .72);
    font-size: .68rem;
    line-height: 2;
    margin: 0 0 1rem;
    max-width: 650px;
}

.teacher-workspace-copy .btn {
    border: 0;
    color: #075f58;
    font-size: .66rem;
    font-weight: 900;
    padding: .58rem .9rem;
}

.teacher-workspace-visual {
    min-height: 245px;
    position: relative;
    z-index: 1;
}

.teacher-workspace-avatar {
    background: linear-gradient(145deg, #d7fff8, #a9c4ff);
    border: 7px solid rgba(255, 255, 255, .17);
    border-radius: 34px;
    box-shadow: 0 18px 45px rgba(2, 25, 38, .24);
    color: #0b645e;
    display: grid;
    font-size: 3.2rem;
    font-weight: 900;
    height: 132px;
    left: 50%;
    overflow: hidden;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(3deg);
    width: 132px;
}

.teacher-workspace-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.teacher-workspace-ring {
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.teacher-workspace-ring.ring-one {
    height: 190px;
    width: 190px;
}

.teacher-workspace-ring.ring-two {
    height: 265px;
    width: 265px;
}

.teacher-workspace-float {
    align-items: center;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 12px;
    display: grid;
    gap: .25rem;
    grid-template-columns: 28px auto;
    padding: .48rem .62rem;
    position: absolute;
    z-index: 2;
}

.teacher-workspace-float>i {
    background: rgba(255, 255, 255, .13);
    border-radius: 8px;
    display: grid;
    grid-row: span 2;
    height: 28px;
    place-items: center;
    width: 28px;
}

.teacher-workspace-float b {
    font-size: .72rem;
    line-height: 1;
}

.teacher-workspace-float small {
    color: rgba(255, 255, 255, .68);
    font-size: .5rem;
}

.teacher-workspace-float.is-student {
    left: 4%;
    top: 18%;
}

.teacher-workspace-float.is-course {
    bottom: 15%;
    right: 2%;
}

.teacher-quick-dock {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-quick-dock a {
    align-items: center;
    animation: panelItemIn .45s ease both;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    color: var(--panel-text);
    display: grid;
    gap: .65rem;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    padding: .7rem .75rem;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.teacher-quick-dock a:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 45%, var(--panel-border));
    box-shadow: 0 10px 28px rgba(24, 48, 66, .08);
    transform: translateY(-2px);
}

.teacher-quick-dock a>i:first-child {
    background: var(--panel-accent-soft);
    border-radius: 10px;
    color: var(--panel-accent);
    display: grid;
    height: 38px;
    place-items: center;
    width: 38px;
}

.teacher-quick-dock a>i:last-child {
    color: var(--panel-muted);
}

.teacher-quick-dock strong,
.teacher-quick-dock small {
    display: block;
}

.teacher-quick-dock strong {
    font-size: .64rem;
}

.teacher-quick-dock small {
    color: var(--panel-muted);
    font-size: .52rem;
    margin-top: .1rem;
}

.teacher-content-hero {
    background: linear-gradient(135deg, var(--panel-surface), var(--panel-surface-soft));
    border: 1px solid var(--panel-border);
    border-radius: 17px;
    padding: 1rem;
}

.teacher-content-eyebrow {
    color: var(--panel-accent);
    display: block;
    font-size: .55rem;
    font-weight: 900;
    margin-top: .45rem;
}

.teacher-content-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.teacher-content-hero-actions>span {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--panel-muted);
    display: grid;
    font-size: .5rem;
    min-width: 58px;
    padding: .4rem .55rem;
    text-align: center;
}

.teacher-content-hero-actions>span strong {
    color: var(--panel-text);
    font-size: .8rem;
}

.teacher-access-note {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent-soft) 75%, var(--panel-surface));
    border: 1px solid color-mix(in srgb, var(--panel-accent) 18%, var(--panel-border));
    border-radius: 13px;
    display: flex;
    gap: .7rem;
    padding: .7rem .85rem;
}

.teacher-access-note>i {
    background: var(--panel-accent);
    border-radius: 9px;
    color: #fff;
    display: grid;
    flex: 0 0 auto;
    height: 34px;
    place-items: center;
    width: 34px;
}

.teacher-access-note strong,
.teacher-access-note span {
    display: block;
}

.teacher-access-note strong {
    color: var(--panel-text);
    font-size: .63rem;
}

.teacher-access-note span {
    color: var(--panel-muted);
    font-size: .53rem;
    margin-top: .12rem;
}

.teacher-content-structure {
    display: grid;
    gap: .8rem;
}

.teacher-content-chapter {
    animation: panelItemIn .4s ease both;
    padding: 0 !important;
}

.teacher-content-chapter>header {
    padding: .8rem;
}

.teacher-chapter-actions {
    display: flex;
    gap: .4rem;
}

.teacher-chapter-actions .btn {
    font-size: .57rem;
    padding: .4rem .55rem;
}

.teacher-content-lesson {
    transition: background .18s ease, transform .18s ease;
}

.teacher-content-lesson:hover {
    background: color-mix(in srgb, var(--panel-accent-soft) 45%, var(--panel-surface));
    transform: translateX(-2px);
}

.teacher-lesson-badges {
    display: flex;
    gap: .3rem;
}

.status-pill.is-video {
    color: #7c3aed;
}

.teacher-empty-lesson {
    align-items: center;
    background: transparent;
    border: 1px dashed var(--panel-border);
    border-radius: 11px;
    color: var(--panel-text);
    display: flex;
    gap: .65rem;
    margin: .7rem;
    padding: .8rem;
    text-align: right;
    width: calc(100% - 1.4rem);
}

.teacher-empty-lesson>i {
    color: var(--panel-accent);
    font-size: 1.25rem;
}

.teacher-empty-lesson strong,
.teacher-empty-lesson small {
    display: block;
}

.teacher-empty-lesson strong {
    font-size: .61rem;
}

.teacher-empty-lesson small {
    color: var(--panel-muted);
    font-size: .51rem;
    margin-top: .12rem;
}

.teacher-attachment-section {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    padding: .7rem;
}

.teacher-attachment-section-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.teacher-attachment-section-head strong,
.teacher-attachment-section-head span {
    display: block;
}

.teacher-attachment-section-head strong {
    color: var(--panel-text);
    font-size: .63rem;
}

.teacher-attachment-section-head span {
    color: var(--panel-muted);
    font-size: .51rem;
}

.lesson-attachment-uploader {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    margin-top: .7rem;
    padding: .7rem;
}

.lesson-attachment-uploader-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .65rem;
    padding-bottom: .65rem;
}

.lesson-attachment-uploader-head>div {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.lesson-attachment-uploader-head strong {
    color: var(--panel-text);
    font-size: .64rem;
    font-weight: 900;
}

.lesson-attachment-uploader-head small {
    color: var(--panel-muted);
    font-size: .51rem;
    line-height: 1.8;
}

.lesson-attachment-uploader-head .btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: .3rem;
}

.lesson-attachment-input-list {
    display: grid;
    gap: .55rem;
}

.lesson-attachment-input-row {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .55rem;
}

.lesson-attachment-input-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.lesson-attachment-input-head>span {
    align-items: center;
    color: var(--panel-text);
    display: inline-flex;
    font-size: .55rem;
    font-weight: 850;
    gap: .28rem;
}

.lesson-attachment-input-head>span i,
.lesson-attachment-input-head>span b {
    color: var(--panel-accent);
}

.lesson-attachment-input-head>button {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 5px;
    color: #be123c;
    display: flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    width: 26px;
}

.lesson-attachment-input-row .admin-file-field {
    margin: 0;
}

.lesson-attachment-input-row .file-add-action {
    background: var(--panel-surface);
    min-height: 56px;
    padding: .55rem;
}

html[data-panel-theme="dark"] .lesson-attachment-input-head>button {
    background: #3b1c24;
    border-color: #63303d;
    color: #fda4af;
}

@media (max-width:575.98px) {
    .lesson-attachment-uploader-head {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-attachment-uploader-head .btn {
        justify-content: center;
        width: 100%;
    }
}

.teacher-media-head>div {
    display: flex;
    gap: .65rem;
}

.teacher-no-attachment {
    color: var(--panel-muted);
    display: block;
    font-size: .55rem;
    padding: .55rem;
    text-align: center;
}

.teacher-course-label {
    color: var(--panel-accent);
    display: block;
    font-size: .52rem;
    font-weight: 900;
    margin-bottom: .3rem;
}

.lesson-attachment-preview {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    color: var(--panel-accent);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    width: 34px;
}

.learning-attachment-row {
    align-items: center;
    display: grid;
    gap: .4rem;
    grid-template-columns: minmax(0, 1fr) 34px;
}

html[data-panel-theme="dark"] .teacher-workspace-hero {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

html[data-panel-theme="dark"] .teacher-content-hero {
    background: linear-gradient(135deg, #101c28, #0d1721);
}

@media (max-width: 991.98px) {
    .teacher-workspace-hero {
        grid-template-columns: 1fr;
    }

    .teacher-workspace-visual {
        display: none;
    }

    .teacher-quick-dock {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .teacher-workspace-copy {
        padding: 1.25rem;
    }

    .teacher-content-chapter>header {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .teacher-chapter-actions {
        grid-column: 1 / -1;
    }

    .teacher-chapter-actions .btn {
        flex: 1;
    }

    .teacher-lesson-badges {
        display: none;
    }

    .teacher-content-hero-actions {
        width: 100%;
    }
}

.teacher-drag-handle {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-muted);
    cursor: grab;
    display: grid;
    height: 30px;
    place-items: center;
    width: 26px;
}

.teacher-drag-handle:active,
[data-drag-handle]:active {
    cursor: grabbing;
}

.teacher-content-chapter>header {
    grid-template-columns: 26px 34px minmax(0, 1fr) auto;
}

.teacher-content-lesson .lesson-order {
    cursor: grab;
}

.teacher-content-lesson.is-dragging,
.teacher-content-chapter.is-dragging {
    opacity: .55;
    transform: scale(.99);
}

.panel-nav-badge {
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    font-size: .48rem;
    margin-right: auto;
    min-width: 19px;
    padding: .15rem .35rem;
    text-align: center;
}

.teacher-section-hero {
    align-items: center;
    background: linear-gradient(135deg, #145f73, #344b86);
    border-radius: 18px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.25rem 1.4rem;
    position: relative;
}

.teacher-section-hero.is-feedback {
    background: linear-gradient(135deg, #8a5411, #9e3f69);
}

.teacher-section-hero.is-quiz {
    background: linear-gradient(135deg, #5b3a9c, #245b89);
}

.teacher-section-hero span {
    color: rgba(255, 255, 255, .65);
    font-size: .55rem;
    font-weight: 800;
}

.teacher-section-hero h2 {
    font-size: 1.1rem;
    font-weight: 900;
    margin: .3rem 0;
}

.teacher-section-hero p {
    color: rgba(255, 255, 255, .7);
    font-size: .61rem;
    margin: 0;
}

.teacher-section-hero>b {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    display: grid;
    font-size: 1.4rem;
    min-width: 100px;
    padding: .65rem;
    text-align: center;
}

.teacher-section-hero>b small {
    color: rgba(255, 255, 255, .7);
    font-size: .5rem;
}

.teacher-filter-bar {
    display: flex;
    gap: .5rem;
    max-width: 430px;
}

.teacher-question-list {
    display: grid;
    gap: .75rem;
}

.teacher-question-card {
    border-right: 3px solid transparent;
    padding: .9rem !important;
}

.teacher-question-card.is-new {
    border-right-color: #ef4444;
}

.teacher-question-card>header,
.teacher-question-card>header>div {
    align-items: center;
    display: flex;
    gap: .55rem;
    justify-content: space-between;
}

.teacher-question-user,
.teacher-feedback-card header>span {
    background: var(--panel-accent-soft);
    border-radius: 9px;
    color: var(--panel-accent);
    display: grid;
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 900;
    height: 34px;
    place-items: center;
    width: 34px;
}

.teacher-question-card header strong,
.teacher-question-card header small {
    display: block;
}

.teacher-question-card header strong {
    color: var(--panel-text);
    font-size: .63rem;
}

.teacher-question-card header small {
    color: var(--panel-muted);
    font-size: .52rem;
}

.teacher-question-card blockquote {
    background: var(--panel-surface-soft);
    border-radius: 10px;
    color: var(--panel-text);
    font-size: .65rem;
    line-height: 2;
    margin: .7rem 0;
    padding: .65rem .75rem;
}

.teacher-question-card form>div {
    display: flex;
    gap: .45rem;
    justify-content: flex-end;
    margin-top: .45rem;
}

.teacher-question-card form select {
    max-width: 160px;
}

.teacher-feedback-grid,
.teacher-quiz-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-feedback-card {
    padding: .85rem !important;
}

.teacher-feedback-card header {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.teacher-feedback-card header strong,
.teacher-feedback-card header small {
    display: block;
}

.teacher-feedback-card header strong {
    color: var(--panel-text);
    font-size: .61rem;
}

.teacher-feedback-card header small {
    color: var(--panel-muted);
    font-size: .49rem;
}

.teacher-feedback-card header b {
    color: #f59e0b;
    font-size: .62rem;
}

.teacher-feedback-card p {
    color: var(--panel-text);
    font-size: .61rem;
    line-height: 1.9;
    min-height: 48px;
    margin: .7rem 0;
}

.teacher-feedback-card time {
    color: var(--panel-muted);
    font-size: .49rem;
}

.teacher-quiz-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .9rem !important;
}

.teacher-quiz-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(14, 165, 233, .12));
    border-radius: 12px;
    color: #7c3aed;
    display: grid;
    font-size: 1.1rem;
    height: 42px;
    place-items: center;
    width: 42px;
}

.teacher-quiz-card h3 {
    color: var(--panel-text);
    font-size: .75rem;
    font-weight: 900;
    margin: .5rem 0 .25rem;
}

.teacher-quiz-card p {
    color: var(--panel-muted);
    font-size: .55rem;
    line-height: 1.8;
    margin: 0;
    min-height: 40px;
}

.teacher-quiz-metrics {
    display: grid;
    gap: .3rem;
    grid-template-columns: repeat(3, 1fr);
}

.teacher-quiz-metrics span {
    background: var(--panel-surface-soft);
    border-radius: 8px;
    color: var(--panel-muted);
    display: grid;
    font-size: .47rem;
    padding: .4rem;
    text-align: center;
}

.teacher-quiz-metrics b {
    color: var(--panel-text);
    font-size: .7rem;
}

.teacher-quiz-detail-head {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.teacher-quiz-detail-head a,
.teacher-quiz-detail-head p {
    color: var(--panel-muted);
    font-size: .55rem;
}

.teacher-quiz-detail-head h2 {
    color: var(--panel-text);
    font-size: .95rem;
    font-weight: 900;
    margin: .35rem 0;
}

.teacher-quiz-detail-head form {
    display: flex;
    gap: .4rem;
}

.teacher-attempt-form {
    display: flex;
    gap: .3rem;
    min-width: 270px;
}

.teacher-attempt-form input {
    max-width: 80px;
}

.teacher-answer-list {
    display: grid;
    gap: .55rem;
}

.teacher-answer-list article {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: .65rem;
}

.teacher-answer-list strong {
    color: var(--panel-text);
    font-size: .62rem;
}

.teacher-answer-list p {
    color: var(--panel-muted);
    font-size: .59rem;
    margin: .4rem 0;
}

.teacher-answer-list span {
    font-size: .52rem;
}

.teacher-interaction-pulse {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 15px;
    padding: .85rem;
}

.teacher-pulse-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.teacher-pulse-head span {
    color: var(--panel-accent);
    font-size: .5rem;
    font-weight: 900;
}

.teacher-pulse-head h2 {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
    margin: .15rem 0 0;
}

.teacher-pulse-head a {
    color: var(--panel-accent);
    font-size: .55rem;
    text-decoration: none;
}

.teacher-pulse-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(4, 1fr);
}

.teacher-pulse-grid a {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--panel-text);
    display: flex;
    gap: .5rem;
    padding: .55rem;
    text-decoration: none;
}

.teacher-pulse-grid a>i {
    color: var(--panel-accent);
    font-size: .9rem;
}

.teacher-pulse-grid strong,
.teacher-pulse-grid small {
    display: block;
}

.teacher-pulse-grid strong {
    font-size: .8rem;
}

.teacher-pulse-grid small {
    color: var(--panel-muted);
    font-size: .48rem;
}

.teacher-pulse-grid b {
    color: #f59e0b;
    font-size: .55rem;
    margin-right: auto;
}

@media (max-width: 991.98px) {

    .teacher-feedback-grid,
    .teacher-quiz-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .teacher-pulse-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {

    .teacher-feedback-grid,
    .teacher-quiz-grid,
    .teacher-pulse-grid {
        grid-template-columns: 1fr;
    }

    .teacher-section-hero,
    .teacher-quiz-detail-head {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem;
    }

    .teacher-content-chapter>header {
        grid-template-columns: 26px 32px minmax(0, 1fr);
    }

    .teacher-chapter-actions {
        grid-column: 1/-1;
    }

    .teacher-attempt-form {
        min-width: 220px;
    }
}

.status-pill.is-question {
    background: rgba(239, 68, 68, .1);
    color: #dc2626;
}

.teacher-lesson-interactions {
    display: flex;
    gap: .45rem;
}

.teacher-lesson-interactions a {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    color: var(--panel-text);
    font-size: .55rem;
    padding: .45rem .6rem;
    text-decoration: none;
}

.teacher-lesson-interactions i {
    color: var(--panel-accent);
    margin-left: .25rem;
}

.teacher-lesson-interactions b {
    background: var(--panel-accent-soft);
    border-radius: 999px;
    color: var(--panel-accent);
    margin-right: .3rem;
    padding: .1rem .3rem;
}

.learning-quiz-panel {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 1rem;
}

.learning-quiz-question {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    margin-bottom: .7rem;
    padding: .75rem;
}

.learning-quiz-question legend {
    color: var(--panel-text);
    float: none;
    font-size: .66rem;
    font-weight: 800;
    width: 100%;
}

.learning-quiz-question legend small {
    color: var(--panel-muted);
    float: left;
    font-size: .5rem;
}

.learning-quiz-question label {
    align-items: center;
    color: var(--panel-text);
    display: flex;
    font-size: .59rem;
    gap: .4rem;
    margin-top: .4rem;
}

.learning-quiz-question input[type="radio"] {
    accent-color: var(--panel-accent);
}

.learning-quiz-history {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

.learning-quiz-history span {
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent);
    font-size: .52rem;
    padding: .4rem .55rem;
}

.learning-quiz-attempt-state {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    margin-bottom: .8rem;
    padding: .7rem;
}

.learning-quiz-attempt-state>i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent);
    display: flex;
    font-size: .9rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.learning-quiz-attempt-state>div {
    display: grid;
    gap: .12rem;
}

.learning-quiz-attempt-state strong {
    color: var(--panel-text);
    font-size: .64rem;
}

.learning-quiz-attempt-state span {
    color: var(--panel-muted);
    font-size: .52rem;
    line-height: 1.9;
}

.learning-quiz-attempt-state>small {
    background: var(--panel-accent-soft);
    border-radius: 999px;
    color: var(--panel-accent);
    font-size: .48rem;
    font-weight: 800;
    padding: .34rem .55rem;
    white-space: nowrap;
}

.learning-quiz-attempt-state.is-editable {
    background: color-mix(in srgb, #d99a2b 8%, var(--panel-surface));
    border-color: color-mix(in srgb, #d99a2b 28%, var(--panel-border));
}

.learning-quiz-attempt-state.is-editable>i {
    background: rgba(217, 154, 43, .13);
    color: #b87712;
}

.learning-quiz-attempt-state.is-locked {
    background: color-mix(in srgb, #18866b 7%, var(--panel-surface));
    border-color: color-mix(in srgb, #18866b 25%, var(--panel-border));
}

.learning-quiz-attempt-state.is-locked>i {
    background: rgba(24, 134, 107, .12);
    color: #18866b;
}

.learning-quiz-submit-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.learning-quiz-submit-row>span {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .5rem;
    gap: .3rem;
    line-height: 1.9;
}

.learning-quiz-submit-row>span i {
    color: var(--panel-accent);
}

@media(max-width:767.98px) {
    .learning-quiz-attempt-state {
        grid-template-columns: 34px minmax(0, 1fr)
    }

    .learning-quiz-attempt-state>i {
        height: 34px;
        width: 34px
    }

    .learning-quiz-attempt-state>small {
        grid-column: 2;
        justify-self: start
    }

    .learning-quiz-submit-row {
        align-items: stretch;
        flex-direction: column
    }

    .learning-quiz-submit-row>.btn {
        width: 100%
    }
}

/* Formal administration system ------------------------------------------ */
.panel-role-admin,
.panel-role-teacher {
    --bs-body-font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    --ck-font-face: "IRANSansPanel", Tahoma, Arial, sans-serif;
    --panel-bg: #f1f3f6;
    --panel-surface: #ffffff;
    --panel-surface-soft: #f6f7f9;
    --panel-border: #d8dee7;
    --panel-text: #172033;
    --panel-muted: #667085;
    --panel-accent: #233f62;
    --panel-accent-soft: #e9eef5;
    --panel-danger: #a83f47;
    --formal-gold: #9b7338;
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    font-size: .85rem;
}

.panel-role-admin :is(button, input, optgroup, select, textarea, table),
.panel-role-teacher :is(button, input, optgroup, select, textarea, table),
.panel-role-admin :is(.select2-container, .swal2-popup, .datepicker-plot-area, .ck),
.panel-role-teacher :is(.select2-container, .swal2-popup, .datepicker-plot-area, .ck) {
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif !important;
}

.panel-role-admin .panel-content>*,
.panel-role-teacher .panel-content>* {
    animation: none !important;
}

.panel-role-admin .panel-layout,
.panel-role-teacher .panel-layout {
    grid-template-columns: 238px minmax(0, 1fr);
}

.panel-role-admin .panel-sidebar,
.panel-role-teacher .panel-sidebar,
html[data-panel-theme="dark"] .panel-role-admin .panel-sidebar,
html[data-panel-theme="dark"] .panel-role-teacher .panel-sidebar {
    background: #111c2b;
    box-shadow: -4px 0 18px rgba(15, 23, 42, .1);
}

.panel-role-admin .panel-sidebar-head,
.panel-role-teacher .panel-sidebar-head {
    border-color: rgba(255, 255, 255, .09);
    min-height: 72px;
}

.panel-role-admin .panel-nav-label,
.panel-role-teacher .panel-nav-label {
    color: #7f8da1;
    font-size: .57rem;
    font-weight: 700;
}

.panel-role-admin .panel-nav a,
.panel-role-teacher .panel-nav a {
    border-radius: 5px;
    color: #b7c0cd;
    font-size: .72rem;
    font-weight: 650;
    min-height: 39px;
}

.panel-role-admin .panel-nav a i,
.panel-role-teacher .panel-nav a i {
    background: transparent;
    border-radius: 4px;
    color: #8997aa;
}

.panel-role-admin .panel-nav a.active,
.panel-role-admin .panel-nav a:hover,
.panel-role-teacher .panel-nav a.active,
.panel-role-teacher .panel-nav a:hover {
    background: #1c2b3f;
    border-color: #33445b;
    color: #fff;
    transform: none;
}

.panel-role-admin .panel-nav a.active {
    border-right: 3px solid #b58a4a;
}

.panel-role-teacher .panel-nav a.active {
    border-right: 3px solid #8197b5;
}

.panel-role-admin .panel-nav a.active i,
.panel-role-teacher .panel-nav a.active i {
    animation: none;
    background: transparent;
    box-shadow: none;
    color: #d7e0eb;
}

.panel-role-admin .panel-avatar,
.panel-role-teacher .panel-avatar {
    background: #263a54;
    border-color: #435671;
    border-radius: 5px;
}

.panel-role-admin .panel-sidebar-profile,
.panel-role-teacher .panel-sidebar-profile {
    background: #0d1724;
    border-color: #263447;
}

.panel-role-admin .panel-topbar,
.panel-role-teacher .panel-topbar {
    backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--panel-border);
    min-height: 66px;
}

.panel-role-admin .panel-breadcrumb i,
.panel-role-teacher .panel-breadcrumb i {
    color: var(--formal-gold);
}

.panel-role-admin .panel-card,
.panel-role-teacher .panel-card {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(18, 32, 51, .035);
}

.panel-role-admin .panel-card:hover,
.panel-role-teacher .panel-card:hover {
    border-color: #c4ccd8;
    box-shadow: 0 3px 12px rgba(18, 32, 51, .055);
    transform: none;
}

.panel-role-admin .btn,
.panel-role-teacher .btn {
    border-radius: 5px;
    font-weight: 700;
}

.panel-role-admin .btn-primary,
.panel-role-teacher .btn-primary {
    background: #233f62;
    border-color: #233f62;
    color: #fff;
}

.panel-role-admin .btn-primary:hover,
.panel-role-teacher .btn-primary:hover {
    background: #192f4b;
    border-color: #192f4b;
}

.panel-role-admin .btn-outline-primary,
.panel-role-teacher .btn-outline-primary {
    border-color: #71839a;
    color: #233f62;
}

.panel-role-admin .form-control,
.panel-role-admin .form-select,
.panel-role-teacher .form-control,
.panel-role-teacher .form-select {
    border-radius: 5px;
}

.panel-role-admin .form-control:focus,
.panel-role-admin .form-select:focus,
.panel-role-teacher .form-control:focus,
.panel-role-teacher .form-select:focus {
    border-color: #607894;
    box-shadow: 0 0 0 .17rem rgba(35, 63, 98, .1);
}

.panel-role-admin .status-pill,
.panel-role-teacher .status-pill {
    background: #eef1f5;
    border: 1px solid #dce2ea;
    border-radius: 4px;
    color: #45556a;
    font-weight: 650;
}

.panel-role-admin .admin-hero-panel,
.panel-role-teacher .teacher-hero,
.panel-role-teacher .teacher-workspace-hero,
.panel-role-teacher .teacher-section-hero,
.panel-role-teacher .teacher-profile-editor-head {
    background: #233f62;
    border: 1px solid #1c3452;
    border-radius: 8px;
    box-shadow: none;
}

.panel-role-teacher .teacher-workspace-hero::before,
.panel-role-teacher .teacher-workspace-ring {
    display: none;
}

.panel-role-teacher .teacher-workspace-avatar {
    border-radius: 8px;
    transform: translate(-50%, -50%);
}

.panel-role-teacher .teacher-workspace-float {
    background: #1d3655;
    border-color: #45617f;
    border-radius: 5px;
    backdrop-filter: none;
}

.panel-role-teacher .teacher-quick-dock a,
.panel-role-teacher .teacher-period-box,
.panel-role-teacher .teacher-interaction-pulse {
    border-radius: 7px;
}

.panel-role-teacher .teacher-quick-dock a:hover {
    box-shadow: none;
    transform: none;
}

.panel-role-teacher .teacher-kpi-card,
.panel-role-admin .stat-card-admin {
    border-top: 3px solid #233f62;
    border-radius: 7px;
}

.panel-role-teacher .teacher-kpi-icon,
.panel-role-admin .stat-card-admin>i {
    background: #edf1f6 !important;
    color: #233f62 !important;
    border-radius: 5px;
}

.panel-role-teacher .teacher-chart-periods,
.panel-role-teacher .teacher-chart-periods button,
.panel-role-teacher .teacher-chart-card {
    border-radius: 6px;
}

.formal-page-header {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 4px solid var(--panel-accent);
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.formal-eyebrow {
    color: var(--formal-gold);
    display: block;
    font-size: .54rem;
    font-weight: 800;
    margin-bottom: .25rem;
}

.formal-page-header h2 {
    color: var(--panel-text);
    font-size: 1rem;
    font-weight: 900;
    margin: 0 0 .25rem;
}

.formal-page-header p {
    color: var(--panel-muted);
    font-size: .62rem;
    margin: 0;
}

.formal-header-stat {
    border-right: 1px solid var(--panel-border);
    display: grid;
    min-width: 110px;
    padding-right: 1rem;
    text-align: center;
}

.formal-header-stat strong {
    color: var(--panel-text);
    font-size: 1.25rem;
}

.formal-header-stat span {
    color: var(--panel-muted);
    font-size: .54rem;
}

.organization-page-header-main,
.organization-page-header-side,
.organization-page-header-actions {
    align-items: center;
    display: flex;
}

.organization-page-header-main {
    gap: .75rem;
    min-width: 0;
}

.organization-page-header-main>div {
    min-width: 0;
}

.organization-page-header-icon {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 38px;
    font-size: .9rem;
    height: 38px;
    justify-content: center;
}

.organization-page-header-side,
.organization-page-header-actions {
    gap: .45rem;
}

.organization-page-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.formal-course-list {
    display: grid;
    gap: .55rem;
}

.formal-course-row {
    align-items: center;
    display: grid;
    gap: .8rem;
    grid-template-columns: 92px minmax(220px, 1.2fr) minmax(360px, 1fr) 150px;
    min-height: 96px;
    padding: .65rem !important;
}

.formal-course-thumb {
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    height: 66px;
    object-fit: cover;
    width: 92px;
}

.formal-course-identity {
    min-width: 0;
}

.formal-course-identity>span {
    color: var(--panel-muted);
    display: block;
    font-size: .49rem;
}

.formal-course-identity h3 {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 850;
    margin: .25rem 0 .4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.formal-course-identity small {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    color: var(--panel-muted);
    display: inline-block;
    font-size: .48rem;
    margin-left: .25rem;
    padding: .16rem .32rem;
}

.formal-course-data {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}

.formal-course-data>div {
    border-right: 1px solid var(--panel-border);
    padding: .15rem .65rem;
}

.formal-course-data>div:first-child {
    border-right: 0;
}

.formal-course-data dt {
    color: var(--panel-muted);
    font-size: .48rem;
    font-weight: 600;
}

.formal-course-data dd {
    color: var(--panel-text);
    font-size: .66rem;
    font-weight: 800;
    margin: .2rem 0 0;
}

.formal-course-action {
    align-items: flex-end;
    display: grid;
    gap: .45rem;
    justify-items: end;
}

.formal-course-action .btn {
    min-width: 135px;
}

.formal-state {
    color: #526579;
    font-size: .49rem;
}

.formal-state i {
    background: #4f7a65;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    margin-left: .25rem;
    width: 6px;
}

.formal-table-course {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 260px;
}

.formal-table-course img {
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    height: 40px;
    object-fit: cover;
    width: 58px;
}

.formal-table-course strong,
.formal-table-course small {
    display: block;
}

.formal-table-course strong {
    color: var(--panel-text);
    font-size: .67rem;
}

.formal-table-course small {
    color: var(--panel-muted);
    font-size: .48rem;
    margin-top: .12rem;
}

.formal-admin-table .table thead {
    background: #f0f2f5;
}

.formal-admin-table .table thead th {
    border-bottom-width: 1px;
    font-size: .55rem;
    font-weight: 800;
}

.course-editor-tabbar {
    border-radius: 7px;
    box-shadow: none;
    padding: .35rem;
}

.course-editor-tabbar .nav-link {
    border-radius: 5px;
    padding: .55rem .7rem;
}

.course-editor-tabbar .nav-link>i {
    border-radius: 4px;
    height: 34px;
    width: 34px;
}

.course-editor-tabbar .nav-link.active {
    background: #e9eef5;
    border-color: #ccd6e2;
    color: #233f62;
}

.course-editor-tabbar .nav-link.active>i {
    background: #233f62;
}

.formal-content-manager {
    border-radius: 7px !important;
    padding: .85rem !important;
}

.formal-content-manager>.admin-card-head {
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: .75rem;
    padding: 0 0 .75rem !important;
}

.formal-content-manager .course-chapter-list {
    gap: .65rem;
}

.formal-content-manager .chapter-manager-card {
    background: var(--panel-surface);
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.formal-content-manager .chapter-manager-head {
    background: #f2f4f7;
    border-bottom: 1px solid #d8dee7;
    padding: .65rem .7rem;
}

.formal-content-manager .lesson-sortable-list {
    gap: 0;
    margin: 0;
    padding: .35rem .75rem .55rem;
}

.formal-content-manager .lesson-manager-row {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--panel-border);
    border-radius: 0;
    min-height: 56px;
    padding: .45rem .15rem;
}

.formal-content-manager .lesson-manager-row:last-child {
    border-bottom: 0;
}

.formal-content-manager .drag-handle {
    background: transparent;
    border: 1px solid #cfd6df;
    border-radius: 4px;
    color: #65758a;
    height: 30px;
    width: 28px;
}

.formal-record-code {
    color: var(--formal-gold) !important;
    display: block;
    font-size: .47rem !important;
    font-weight: 800;
    margin-bottom: .12rem;
}

.formal-content-manager .structure-sort-label {
    background: #e5e9ef;
    border-radius: 3px;
    color: #59697c;
}

.formal-content-course-head {
    border-radius: 7px !important;
    box-shadow: none !important;
}

.formal-access-note {
    background: #eef1f5;
    border-color: #d4dbe5;
    border-radius: 6px;
}

.formal-access-note>i {
    background: #233f62;
    border-radius: 4px;
}

.formal-register-head {
    align-items: flex-end;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
    padding: 0 .15rem .65rem;
}

.formal-register-head h3 {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 900;
    margin: 0 0 .2rem;
}

.formal-register-head p {
    color: var(--panel-muted);
    font-size: .54rem;
    margin: 0;
}

.formal-register-legend {
    display: flex;
    gap: .7rem;
}

.formal-register-legend span {
    color: var(--panel-muted);
    font-size: .49rem;
}

.formal-register-legend i {
    border-radius: 2px;
    display: inline-block;
    height: 7px;
    margin-left: .25rem;
    width: 7px;
}

.formal-register-legend .is-content {
    background: #526b89;
}

.formal-register-legend .is-quiz {
    background: #8a6b3d;
}

.formal-register-legend .is-meet {
    background: #657467;
}

.panel-role-teacher .teacher-content-chapter {
    border-radius: 6px;
}

.panel-role-teacher .teacher-content-chapter>header {
    background: #f2f4f7;
    border-bottom: 1px solid var(--panel-border);
}

.panel-role-teacher .teacher-structure-lessons {
    background: var(--panel-surface);
    border-top: 0;
    padding: .25rem .75rem .45rem;
}

.panel-role-teacher .teacher-content-lesson {
    border-bottom-color: var(--panel-border);
    min-height: 58px;
}

.panel-role-teacher .teacher-content-lesson:hover {
    background: #f7f8fa;
    transform: none;
}

.panel-role-teacher .chapter-number,
.panel-role-teacher .lesson-type-icon {
    background: #e5eaf0;
    border-radius: 4px;
    color: #334d6c;
}

.panel-role-teacher .teacher-drag-handle,
.panel-role-teacher .teacher-edit-icon {
    border-radius: 4px;
}

.panel-role-teacher .teacher-chapter-actions .btn {
    border-radius: 4px;
}

html[data-panel-theme="dark"] .panel-role-admin,
html[data-panel-theme="dark"] .panel-role-teacher {
    --panel-bg: #0d131d;
    --panel-surface: #141c27;
    --panel-surface-soft: #101721;
    --panel-border: #2b3646;
    --panel-text: #e5e9ef;
    --panel-muted: #96a2b3;
    --panel-accent: #8ca3c1;
    --panel-accent-soft: #202c3c;
    --formal-gold: #c19a5c;
}

html[data-panel-theme="dark"] .panel-role-admin .panel-topbar,
html[data-panel-theme="dark"] .panel-role-teacher .panel-topbar {
    background: #121a25;
}

html[data-panel-theme="dark"] .formal-admin-table .table thead,
html[data-panel-theme="dark"] .formal-content-manager .chapter-manager-head,
html[data-panel-theme="dark"] .panel-role-teacher .teacher-content-chapter>header {
    background: #192330;
}

html[data-panel-theme="dark"] .formal-access-note {
    background: #182230;
    border-color: #303d4f;
}

html[data-panel-theme="dark"] .panel-role-teacher .teacher-content-lesson:hover {
    background: #18222e;
}

html[data-panel-theme="dark"] .course-editor-tabbar .nav-link.active {
    background: #202d3d;
    border-color: #39485b;
    color: #dbe5f0;
}

@media (max-width: 1199.98px) {
    .formal-course-row {
        grid-template-columns: 82px minmax(210px, 1fr) minmax(300px, 1fr);
    }

    .formal-course-action {
        grid-column: 2/-1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .formal-course-thumb {
        height: 60px;
        width: 82px;
    }
}

@media (max-width: 991.98px) {

    .panel-role-admin .panel-layout,
    .panel-role-teacher .panel-layout {
        grid-template-columns: 1fr;
    }

    .formal-course-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .formal-course-data,
    .formal-course-action {
        grid-column: 1/-1;
    }

    .formal-course-thumb {
        height: 54px;
        width: 72px;
    }

    .formal-course-data>div {
        padding-inline: .4rem;
    }
}

@media (max-width: 575.98px) {

    .formal-page-header,
    .formal-register-head {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem;
    }

    .organization-page-header-side {
        align-items: stretch;
        flex-direction: column;
    }

    .organization-page-header-actions {
        justify-content: stretch;
    }

    .organization-page-header-actions .btn {
        flex: 1;
    }

    .formal-header-stat {
        border-right: 0;
        border-top: 1px solid var(--panel-border);
        padding: .6rem 0 0;
    }

    .formal-course-data {
        grid-template-columns: repeat(2, 1fr);
        row-gap: .5rem;
    }

    .formal-course-action {
        align-items: stretch;
        flex-direction: column;
    }

    .formal-course-action .btn {
        width: 100%;
    }

    .formal-register-legend {
        flex-wrap: wrap;
    }

    .formal-content-manager .chapter-manager-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .formal-content-manager .manager-actions {
        grid-column: 1/-1;
    }
}

/* Formal dashboard and administration modules */
.panel-role-admin i,
.panel-role-teacher i {
    line-height: 1;
}

.admin-command-header {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 4px solid var(--formal-gold);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.admin-command-header h2 {
    color: var(--panel-text);
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0 0 .25rem;
}

.admin-command-header p {
    color: var(--panel-muted);
    font-size: .61rem;
    margin: 0;
}

.admin-command-header>div:last-child {
    display: flex;
    gap: .5rem;
}

.admin-primary-metrics {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-metric-card {
    align-items: center;
    border-top: 0 !important;
    display: grid;
    gap: .7rem;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 112px;
    padding: .85rem !important;
    position: relative;
}

.admin-metric-card::after {
    background: var(--formal-gold);
    bottom: 0;
    content: '';
    height: 2px;
    position: absolute;
    right: .85rem;
    width: 34px;
}

.admin-metric-icon {
    align-items: center;
    background: #e9eef5;
    border: 1px solid #d7e0ea;
    border-radius: 6px;
    color: #29496c;
    display: flex;
    font-size: 1.05rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.admin-metric-icon i {
    display: block;
    line-height: 1;
}

.admin-metric-card small,
.admin-metric-card strong,
.admin-metric-card div>span {
    display: block;
}

.admin-metric-card small {
    color: var(--panel-muted);
    font-size: .52rem;
}

.admin-metric-card strong {
    color: var(--panel-text);
    font-size: 1.15rem;
    line-height: 1.5;
}

.admin-metric-card div>span {
    color: var(--panel-muted);
    font-size: .49rem;
}

.admin-daily-metrics {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.admin-daily-metrics article {
    align-items: center;
    border-left: 1px solid var(--panel-border);
    display: flex;
    gap: .55rem;
    min-height: 68px;
    padding: .65rem .8rem;
}

.admin-daily-metrics article:last-child {
    border-left: 0;
}

.admin-daily-icon {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.admin-daily-icon i {
    display: block;
    font-size: .88rem;
}

.admin-daily-metrics small,
.admin-daily-metrics strong {
    display: block;
}

.admin-daily-metrics small {
    color: var(--panel-muted);
    font-size: .49rem;
}

.admin-daily-metrics strong {
    color: var(--panel-text);
    font-size: .88rem;
}

.admin-traffic-card {
    height: 100%;
    padding: .9rem !important;
}

.admin-traffic-canvas {
    height: 310px;
    position: relative;
}

.admin-operation-card {
    height: 100%;
    padding: .9rem !important;
}

.admin-operation-card nav {
    display: grid;
    gap: .35rem;
}

.admin-operation-card nav a {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-text);
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    padding: .55rem;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.admin-operation-card nav a:hover {
    background: var(--panel-accent-soft);
    border-color: #b9c6d5;
}

.admin-operation-card nav a>span {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-accent);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.admin-operation-card nav a>span i {
    display: block;
}

.admin-operation-card strong,
.admin-operation-card small {
    display: block;
}

.admin-operation-card strong {
    font-size: .59rem;
}

.admin-operation-card small {
    color: var(--panel-muted);
    font-size: .47rem;
    margin-top: .12rem;
}

.admin-operation-card nav a>i {
    color: var(--panel-muted);
    font-size: .65rem;
}

.admin-filter-strip {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: flex;
    gap: .5rem;
    padding: .55rem;
}

.admin-filter-strip>div {
    flex: 1;
    position: relative;
}

.admin-filter-strip>div>i {
    color: var(--panel-muted);
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.admin-filter-strip input {
    padding-right: 2.2rem;
}

.admin-teacher-cell {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 190px;
}

.admin-teacher-cell>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    font-size: .7rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    overflow: hidden;
    width: 38px;
}

.admin-teacher-cell img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.admin-teacher-cell strong,
.admin-teacher-cell small {
    display: block;
}

.admin-teacher-cell strong {
    color: var(--panel-text);
    font-size: .62rem;
}

.admin-teacher-cell small {
    color: var(--panel-muted);
    font-size: .47rem;
}

.admin-teacher-profile-head {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 4px solid var(--panel-accent);
    border-radius: 8px;
    display: grid;
    gap: .8rem;
    grid-template-columns: 72px minmax(180px, 1fr) minmax(340px, 1.2fr) auto;
    padding: .85rem;
}

.admin-teacher-profile-avatar {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.5rem;
    font-weight: 900;
    height: 72px;
    justify-content: center;
    overflow: hidden;
    width: 72px;
}

.admin-teacher-profile-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.admin-teacher-profile-head h2 {
    color: var(--panel-text);
    font-size: .9rem;
    font-weight: 900;
    margin: 0;
}

.admin-teacher-profile-head p {
    color: var(--panel-muted);
    font-size: .55rem;
    margin: .15rem 0 0;
}

.admin-teacher-profile-head dl {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}

.admin-teacher-profile-head dl div {
    border-right: 1px solid var(--panel-border);
    padding: .2rem .7rem;
}

.admin-teacher-profile-head dt {
    color: var(--panel-muted);
    font-size: .47rem;
}

.admin-teacher-profile-head dd {
    color: var(--panel-text);
    font-size: .75rem;
    font-weight: 900;
    margin: .15rem 0 0;
}

.admin-teacher-course {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    color: var(--panel-text);
    display: grid;
    gap: .5rem;
    grid-template-columns: 48px minmax(0, 1fr) 14px;
    padding: .55rem 0;
    text-decoration: none;
}

.admin-teacher-course img {
    border-radius: 4px;
    height: 34px;
    object-fit: cover;
    width: 48px;
}

.admin-teacher-course strong,
.admin-teacher-course small {
    display: block;
}

.admin-teacher-course strong {
    font-size: .56rem;
}

.admin-teacher-course small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.admin-log-filters {
    padding: .85rem !important;
}

.admin-filter-actions {
    border-top: 1px solid var(--panel-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .8rem;
    padding-top: .7rem;
}

.activity-event,
.activity-panel {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-text);
    display: inline-block;
    font-size: .5rem;
    font-weight: 750;
    padding: .22rem .4rem;
}

.activity-event.is-created {
    color: #317052;
}

.activity-event.is-updated {
    color: #315d86;
}

.activity-event.is-deleted {
    color: #a13f48;
}

.activity-detail-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr 1fr;
}

.activity-detail-grid span {
    color: var(--panel-muted);
    display: block;
    font-size: .55rem;
    margin-bottom: .3rem;
}

.activity-detail-grid pre {
    background: #101824;
    border-radius: 5px;
    color: #d8e2ef;
    direction: ltr;
    font-size: .65rem;
    max-height: 420px;
    overflow: auto;
    padding: .75rem;
    text-align: left;
}

html[data-panel-theme="dark"] .admin-metric-icon {
    background: #202c3b;
    border-color: #334156;
    color: #b5c7dc;
}

html[data-panel-theme="dark"] .admin-operation-card nav a>span {
    background: #192330;
}

html[data-panel-theme="dark"] .formal-admin-table .table thead {
    background: #192330;
}

@media(max-width:1199.98px) {
    .admin-primary-metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .admin-teacher-profile-head {
        grid-template-columns: 64px 1fr auto
    }

    .admin-teacher-profile-head dl {
        grid-column: 2/-1
    }
}

@media(max-width:767.98px) {
    .admin-command-header {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem
    }

    .admin-primary-metrics,
    .admin-daily-metrics {
        grid-template-columns: 1fr 1fr
    }

    .admin-daily-metrics article:nth-child(2) {
        border-left: 0
    }

    .admin-daily-metrics article {
        border-bottom: 1px solid var(--panel-border)
    }

    .admin-filter-strip {
        align-items: stretch;
        flex-direction: column
    }

    .admin-teacher-profile-head {
        grid-template-columns: 56px 1fr
    }

    .admin-teacher-profile-avatar {
        height: 56px;
        width: 56px
    }

    .admin-teacher-profile-head dl,
    .admin-teacher-profile-head>a {
        grid-column: 1/-1
    }

    .activity-detail-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:575.98px) {

    .admin-primary-metrics,
    .admin-daily-metrics {
        grid-template-columns: 1fr
    }

    .admin-daily-metrics article {
        border-left: 0
    }

    .admin-command-header>div:last-child {
        flex-direction: column
    }

    .admin-traffic-canvas {
        height: 250px
    }

    .admin-teacher-profile-head dl {
        grid-template-columns: repeat(2, 1fr)
    }
}

/* Shared panel controls, settings and service state */
.panel-role-admin .panel-content {
    max-width: none;
}

.panel-role-admin .admin-fullscreen-form,
.panel-role-admin form.admin-form,
.panel-role-admin form.admin-course-editor,
.panel-role-admin form.admin-settings-form {
    max-width: none;
    width: 100%;
}

.teacher-kpi-icon,
.teacher-quick-dock a>i:first-child,
.teacher-pulse-grid a>i {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center;
}

.teacher-kpi-icon>i,
.teacher-quick-dock a>i:first-child,
.teacher-pulse-grid a>i {
    line-height: 1;
    margin: 0;
}

.teacher-pulse-grid a>i {
    background: var(--panel-accent-soft);
    border-radius: 5px;
    flex: 0 0 34px;
    height: 34px;
    width: 34px;
}

.settings-tabbar {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    padding: .35rem;
}

.settings-tabbar .nav {
    display: grid;
    gap: .3rem;
    grid-template-columns: repeat(6, 1fr);
}

.settings-tabbar .nav-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--panel-muted);
    display: flex;
    font-size: .58rem;
    font-weight: 750;
    gap: .35rem;
    justify-content: center;
    min-height: 40px;
}

.settings-tabbar .nav-link i {
    line-height: 1;
}

.settings-tabbar .nav-link.active {
    background: var(--panel-accent-soft);
    border-color: var(--panel-border);
    color: var(--panel-accent);
}

.settings-tab-content>.panel-card {
    border-radius: 7px;
    min-height: 380px;
    padding: 1rem !important;
}

.settings-section-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: .65rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
}

.settings-section-head>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.settings-section-head h3 {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
    margin: 0;
}

.settings-section-head p {
    color: var(--panel-muted);
    font-size: .5rem;
    margin: .15rem 0 0;
}

.settings-brand-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.settings-brand-item {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: .8rem;
}

.settings-brand-preview,
.settings-favicon-preview {
    align-items: center;
    background: var(--panel-surface);
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    display: flex;
    height: 150px;
    justify-content: center;
    margin-bottom: .8rem;
}

.settings-brand-preview img {
    max-height: 90px;
    max-width: 240px;
}

.settings-favicon-preview img {
    height: 64px;
    object-fit: contain;
    width: 64px;
}

.settings-brand-preview i,
.settings-favicon-preview i {
    color: var(--panel-muted);
    font-size: 2rem;
}

.settings-access-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, 1fr);
}

.settings-access-card {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    gap: .65rem;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 86px;
    padding: .7rem;
}

.settings-access-card>span {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.settings-access-card strong,
.settings-access-card small {
    display: block;
}

.settings-access-card strong {
    color: var(--panel-text);
    font-size: .6rem;
}

.settings-access-card small {
    color: var(--panel-muted);
    font-size: .47rem;
    margin-top: .15rem;
}

.settings-sticky-save {
    align-items: center;
    background: color-mix(in srgb, var(--panel-surface) 95%, transparent);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    bottom: .6rem;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: .55rem .7rem;
    position: sticky;
    z-index: 10;
}

.settings-sticky-save span {
    color: var(--panel-muted);
    font-size: .52rem;
}

.panel-pagination-tools {
    align-items: center;
    display: flex;
    gap: .45rem;
    justify-content: flex-end;
    margin: .75rem 0 .45rem;
}

.panel-pagination-tools span {
    color: var(--panel-muted);
    font-size: .51rem;
}

.panel-pagination-tools select {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-text);
    font-size: .56rem;
    height: 30px;
    min-width: 64px;
    padding: .2rem .4rem;
}

.shared-admin-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 210px;
    padding: 2rem;
    text-align: center;
}

.shared-admin-empty>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.25rem;
    height: 52px;
    justify-content: center;
    margin-bottom: .7rem;
    width: 52px;
}

.shared-admin-empty strong {
    color: var(--panel-text);
    font-size: .67rem;
}

.shared-admin-empty small {
    color: var(--panel-muted);
    font-size: .52rem;
    margin-top: .25rem;
}

.panel-role-admin .empty-state {
    align-items: center;
    background: var(--panel-surface);
    border: 1px dashed var(--panel-border);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 210px;
    padding: 2rem;
    text-align: center;
}

.panel-role-admin .empty-state>i {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.25rem;
    height: 52px;
    justify-content: center;
    margin-bottom: .7rem;
    width: 52px;
}

.panel-role-admin .empty-state strong {
    color: var(--panel-text);
    font-size: .67rem;
}

.panel-role-admin .empty-state span {
    color: var(--panel-muted);
    font-size: .52rem;
    margin-top: .25rem;
}

.service-unavailable-page {
    align-items: center;
    background: #111c2b;
    color: #fff;
    display: flex;
    font-family: Tahoma, Arial, sans-serif;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.service-unavailable-page main {
    background: #182538;
    border: 1px solid #34445b;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    max-width: 620px;
    padding: 2.4rem;
    text-align: center;
    width: 100%;
}

.service-unavailable-page main>span {
    align-items: center;
    background: #233650;
    border: 1px solid #465a76;
    border-radius: 8px;
    color: #d1ad70;
    display: flex;
    font-size: 2rem;
    height: 74px;
    justify-content: center;
    margin: 0 auto 1rem;
    width: 74px;
}

.service-unavailable-page small {
    color: #92a1b5;
    font-size: .7rem;
}

.service-unavailable-page h1 {
    font-size: 1.35rem;
    font-weight: 900;
    margin: .7rem 0;
}

.service-unavailable-page p {
    color: #aeb9c8;
    font-size: .8rem;
    line-height: 2;
}

.service-unavailable-page a {
    background: #d2ad70;
    border-radius: 5px;
    color: #172033;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    gap: .4rem;
    margin-top: .5rem;
    padding: .65rem .9rem;
    text-decoration: none;
}

@media(max-width:991.98px) {
    .settings-tabbar .nav {
        grid-template-columns: repeat(3, 1fr)
    }

    .settings-access-grid {
        grid-template-columns: 1fr
    }

    .settings-brand-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:575.98px) {
    .settings-tabbar .nav {
        grid-template-columns: repeat(2, 1fr)
    }

    .settings-sticky-save {
        align-items: stretch;
        flex-direction: column;
        gap: .5rem
    }

    .settings-sticky-save .btn {
        width: 100%
    }

    .panel-pagination-tools {
        justify-content: space-between
    }
}

/* Formal, RTL pagination shared by every authenticated panel. */
.panel-body .panel-pagination-nav {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-height: 52px;
    padding: .5rem .65rem;
    width: 100%;
}

.panel-body .panel-pagination-meta {
    color: var(--panel-muted);
    flex: 0 0 auto;
    font-size: .55rem;
}

.panel-body .panel-pagination-meta strong {
    color: var(--panel-text);
    font-weight: 800;
}

.panel-body .panel-pagination-nav .pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.panel-body .panel-pagination-nav .page-link {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px !important;
    color: var(--panel-text);
    display: inline-flex;
    font-size: .58rem;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    line-height: 1;
    min-width: 32px;
    padding: .25rem .45rem;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.panel-body .panel-pagination-nav .page-link:hover {
    background: var(--panel-accent-soft);
    border-color: var(--panel-accent);
    color: var(--panel-accent);
}

.panel-body .panel-pagination-nav .page-item.active .page-link {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--panel-accent) 22%, transparent);
    color: #fff;
}

.panel-body .panel-pagination-nav .page-item.disabled .page-link {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-muted);
    opacity: .5;
}

.panel-body .panel-pagination-nav .page-link i {
    font-size: .64rem;
    line-height: 1;
}

.panel-body .panel-pagination-nav .page-link-dots {
    background: transparent;
    border-color: transparent;
}

.panel-body .panel-pagination-simple {
    justify-content: flex-end;
}

.panel-body .panel-pagination-simple .page-link-wide {
    gap: .35rem;
    min-width: 72px;
}

@media (max-width: 575.98px) {
    .panel-body .panel-pagination-nav {
        align-items: stretch;
        flex-direction: column;
        padding: .6rem;
    }

    .panel-body .panel-pagination-meta {
        text-align: center;
    }

    .panel-body .panel-pagination-nav .pagination {
        justify-content: center;
    }
}

/* Purchased quiz copies, limits and countdown. */
.quiz-countdown-bar {
    align-items: center;
    background: #172b43;
    border: 1px solid #324b69;
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin-bottom: .75rem;
    padding: .7rem .8rem;
    position: sticky;
    top: 74px;
    z-index: 12;
}

.quiz-countdown-bar>div {
    align-items: center;
    display: flex;
    font-size: .55rem;
    gap: .4rem;
}

.quiz-countdown-bar>div i {
    color: #d2ad70;
    font-size: .85rem;
}

.quiz-countdown-bar>strong {
    direction: ltr;
    font-family: monospace !important;
    font-size: 1.15rem;
    letter-spacing: .08em;
    text-align: center;
}

.quiz-countdown-bar>small {
    color: #aebdcd;
    font-size: .47rem;
    text-align: left;
}

.quiz-countdown-bar.is-warning {
    background: #68471f;
    border-color: #99713d;
}

.quiz-countdown-bar.is-expired {
    background: #682f35;
    border-color: #9b4a53;
}

.quiz-attempt-cap {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: flex;
    gap: .35rem;
    padding: .45rem .6rem;
}

.quiz-attempt-cap small,
.quiz-attempt-cap span {
    color: var(--panel-muted);
    font-size: .46rem;
}

.quiz-attempt-cap strong {
    color: var(--panel-accent);
    font-size: .72rem;
}

.quiz-attempt-limit-state {
    align-items: center;
    background: var(--panel-surface);
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
    padding: 2rem;
    text-align: center;
}

.quiz-attempt-limit-state>i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.35rem;
    height: 58px;
    justify-content: center;
    margin-bottom: .8rem;
    width: 58px;
}

.quiz-attempt-limit-state h3 {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
}

.quiz-attempt-limit-state p {
    color: var(--panel-muted);
    font-size: .53rem;
    line-height: 2;
    max-width: 580px;
}

.client-quiz-card.is-disabled {
    filter: grayscale(.55);
    opacity: .72;
}

.client-quiz-card small {
    color: var(--panel-muted);
    display: block;
    font-size: .44rem;
    margin-top: .2rem;
}

.quiz-copy-limit-summary {
    background: var(--panel-surface-soft);
    border-radius: 6px;
    display: grid;
    gap: .35rem;
    grid-template-columns: 1fr auto;
    margin-top: .8rem;
    padding: .65rem;
}

.quiz-copy-limit-summary span {
    color: var(--panel-muted);
    font-size: .49rem;
}

.quiz-copy-limit-summary strong {
    color: var(--panel-text);
    font-size: .58rem;
}

.quiz-copy-question-list {
    display: grid;
    gap: .35rem;
}

.quiz-copy-question-list article {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    display: grid;
    gap: .5rem;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: .5rem;
}

.quiz-copy-question-list article>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 4px;
    color: var(--panel-accent);
    display: flex;
    font-size: .5rem;
    height: 28px;
    justify-content: center;
}

.quiz-copy-question-list strong,
.quiz-copy-question-list small {
    display: block;
}

.quiz-copy-question-list strong {
    color: var(--panel-text);
    font-size: .55rem;
    line-height: 1.8;
}

.quiz-copy-question-list small {
    color: var(--panel-muted);
    font-size: .45rem;
    margin-top: .1rem;
}

@media(max-width:767.98px) {
    .quiz-countdown-bar {
        grid-template-columns: 1fr auto;
        top: 66px
    }

    .quiz-countdown-bar>small {
        grid-column: 1/-1;
        text-align: center
    }

    .client-quiz-taking-head .quiz-attempt-cap {
        justify-content: center
    }
}

/* Detailed quiz attempt review and descriptive grading. */
.attempt-result-summary {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: .75rem;
}

.attempt-result-summary article {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .1rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 72px;
    padding: .6rem;
}

.attempt-result-summary i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    grid-row: 1/3;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.attempt-result-summary span {
    color: var(--panel-muted);
    font-size: .45rem;
}

.attempt-result-summary strong {
    color: var(--panel-text);
    font-size: .58rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attempt-answer-review-list {
    display: grid;
    gap: .65rem;
}

.attempt-answer-review {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 3px solid var(--panel-muted);
    border-radius: 7px;
    overflow: hidden;
    padding: .75rem;
}

.attempt-answer-review.is-correct {
    border-right-color: #218764;
}

.attempt-answer-review.is-wrong {
    border-right-color: #b64a52;
}

.attempt-answer-review.is-descriptive {
    border-right-color: #a77d42;
}

.attempt-answer-review>header {
    align-items: start;
    display: grid;
    gap: .55rem;
    grid-template-columns: 30px minmax(0, 1fr) auto;
}

.attempt-answer-review>header>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 4px;
    color: var(--panel-accent);
    display: flex;
    font-size: .52rem;
    height: 30px;
    justify-content: center;
}

.attempt-answer-review>header strong,
.attempt-answer-review>header small {
    display: block;
}

.attempt-answer-review>header strong {
    color: var(--panel-text);
    font-size: .6rem;
    line-height: 1.9;
}

.attempt-answer-review>header small {
    color: var(--panel-muted);
    font-size: .45rem;
    margin-top: .12rem;
}

.attempt-answer-review>header b {
    background: var(--panel-surface-soft);
    border-radius: 4px;
    color: var(--panel-text);
    font-size: .5rem;
    padding: .32rem .45rem;
    white-space: nowrap;
}

.attempt-user-answer {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    margin: .65rem 2.5rem .55rem 0;
    padding: .6rem;
}

.attempt-user-answer small {
    color: var(--panel-muted);
    font-size: .44rem;
}

.attempt-user-answer p {
    color: var(--panel-text);
    font-size: .55rem;
    line-height: 2;
    margin: .15rem 0 0;
    white-space: pre-wrap;
}

.attempt-grade-form {
    align-items: end;
    background: color-mix(in srgb, var(--panel-accent-soft) 55%, var(--panel-surface));
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    margin-right: 2.5rem;
    padding: .65rem;
}

.attempt-grade-form label {
    font-size: .48rem;
}

.attempt-grade-form textarea {
    min-height: 66px;
}

.attempt-grade-form .btn {
    min-height: 38px;
    white-space: nowrap;
}

.attempt-answer-review>footer {
    color: var(--panel-muted);
    font-size: .47rem;
    margin: .5rem 2.5rem 0 0;
}

.quiz-answer-feedback {
    border-right: 3px solid #a77d42 !important;
}

@media(max-width:991.98px) {
    .attempt-result-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .attempt-grade-form {
        grid-template-columns: 1fr
    }

    .attempt-grade-form .btn {
        width: 100%
    }
}

@media(max-width:575.98px) {
    .attempt-result-summary {
        grid-template-columns: 1fr
    }

    .attempt-user-answer,
    .attempt-grade-form,
    .attempt-answer-review>footer {
        margin-right: 0
    }

    .attempt-answer-review>header {
        grid-template-columns: 30px minmax(0, 1fr)
    }

    .attempt-answer-review>header b {
        grid-column: 2;
        justify-self: start
    }
}

.standalone-quiz-form.is-time-over {
    opacity: .72;
    pointer-events: none;
}

.attempt-review-required-row>* {
    background: color-mix(in srgb, #f59e0b 7%, var(--panel-surface)) !important;
}

.attempt-review-required-tag {
    align-items: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    display: inline-flex;
    font-size: .64rem;
    font-weight: 800;
    gap: .3rem;
    margin: .3rem .35rem 0 0;
    padding: .22rem .48rem;
    white-space: nowrap;
}

.attempt-review-filter {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    display: flex;
    gap: .4rem;
    padding: .4rem;
    width: fit-content;
}

.attempt-review-filter a {
    align-items: center;
    border-radius: 9px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .74rem;
    font-weight: 750;
    gap: .4rem;
    padding: .55rem .75rem;
    text-decoration: none;
}

.attempt-review-filter a.active {
    background: var(--panel-primary, #0f766e);
    color: #fff;
}

.attempt-review-filter b {
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    min-width: 20px;
    padding: .1rem .35rem;
    text-align: center;
}

[data-panel-theme="dark"] .attempt-review-required-tag {
    background: rgba(154, 52, 18, .2);
    border-color: rgba(251, 146, 60, .35);
    color: #fdba74;
}

@media (max-width: 575.98px) {
    .attempt-review-filter {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .attempt-review-filter a {
        justify-content: center;
    }
}

/* Certificate template builder ------------------------------------------ */
.certificate-builder-form {
    display: grid;
    gap: .85rem;
}

.certificate-preset-picker {
    overflow: hidden;
    padding: 0;
}

.certificate-preset-picker>header {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    padding: .75rem .9rem;
}

.certificate-preset-picker>header>div {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.certificate-preset-picker>header>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.certificate-preset-picker>header>div>div {
    display: grid;
    gap: .1rem;
}

.certificate-preset-picker>header strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.certificate-preset-picker>header small {
    color: var(--panel-muted);
    font-size: .52rem;
}

.certificate-preset-count {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    font-size: .49rem;
    padding: .3rem .5rem;
}

.certificate-preset-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: .7rem;
}

.certificate-preset-card {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-text);
    display: grid;
    gap: .55rem;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    min-height: 78px;
    padding: .5rem;
    position: relative;
    text-align: right;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.certificate-preset-card:hover {
    background: var(--panel-surface);
    border-color: #71839a;
}

.certificate-preset-card.is-active {
    background: color-mix(in srgb, var(--panel-accent) 6%, var(--panel-surface));
    border-color: var(--panel-accent);
    box-shadow: inset -3px 0 0 var(--panel-accent);
}

.certificate-preset-miniature {
    align-content: center;
    background: #fff;
    border: 1px solid #d4dae2;
    border-radius: 4px;
    display: grid;
    gap: 3px;
    height: 52px;
    justify-items: center;
    overflow: hidden;
    padding: 5px;
    position: relative;
    width: 52px;
}

.certificate-preset-miniature::before {
    border: 1px solid currentColor;
    content: '';
    inset: 3px;
    opacity: .32;
    position: absolute;
}

.certificate-preset-miniature i {
    color: #9b7338;
    font-size: .72rem;
}

.certificate-preset-miniature b {
    background: #cdd4dd;
    border-radius: 2px;
    display: block;
    height: 2px;
    width: 72%;
}

.certificate-preset-miniature b:nth-of-type(2) {
    width: 50%;
}

.certificate-preset-miniature b:nth-of-type(3) {
    background: #b08a4f;
    margin-top: 3px;
    width: 35%;
}

.certificate-preset-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.certificate-preset-copy strong {
    font-size: .59rem;
}

.certificate-preset-copy small {
    color: var(--panel-muted);
    font-size: .48rem;
    line-height: 1.7;
}

.certificate-preset-check {
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: transparent;
    display: flex;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.certificate-preset-card.is-active .certificate-preset-check {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.certificate-preset-academic .certificate-preset-miniature {
    color: #315f8d;
    height: 42px;
    width: 58px;
}

.certificate-preset-academic .certificate-preset-miniature::before {
    border-style: double;
    border-width: 3px;
}

.certificate-preset-minimal .certificate-preset-miniature {
    border-width: 0 0 0 3px;
    color: #657080;
    justify-items: start;
}

.certificate-preset-minimal .certificate-preset-miniature::before {
    border-width: 0 1px 0 0;
    inset: 5px;
}

.certificate-preset-executive .certificate-preset-miniature {
    background: linear-gradient(90deg, #142a44 0 27%, #fff 27%);
    color: #9b7338;
}

.certificate-preset-executive .certificate-preset-miniature i {
    color: #d1aa6c;
    margin-right: 13px;
}

.certificate-preset-modern .certificate-preset-miniature {
    border-right: 4px solid #0f766e;
    color: #0f766e;
    justify-items: end;
}

.certificate-preset-modern .certificate-preset-miniature::before {
    border-width: 0;
}

.certificate-preset-heritage .certificate-preset-miniature {
    border: 3px double #7c3440;
    color: #7c3440;
    transform: rotate(-1deg);
}

.certificate-preset-heritage .certificate-preset-miniature::before {
    border-color: #a57a4d;
    inset: 2px;
}

.certificate-builder-toolbar {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(230px, .8fr) minmax(380px, 1.25fr) auto;
    padding: .85rem 1rem;
}

.certificate-builder-identity,
.certificate-template-title {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.certificate-builder-identity>span,
.certificate-template-title>span {
    align-items: center;
    background: color-mix(in srgb, var(--panel-primary, #0f766e) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--panel-primary, #0f766e) 17%, transparent);
    border-radius: 10px;
    color: var(--panel-primary, #0f766e);
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.certificate-builder-identity>div {
    display: grid;
    gap: .12rem;
}

.certificate-builder-identity strong {
    color: var(--panel-text, #172033);
    font-size: .82rem;
}

.certificate-builder-identity small {
    color: var(--panel-muted, #718096);
    font-size: .58rem;
    line-height: 1.7;
}

.certificate-template-title>span {
    border-radius: 8px;
    height: 32px;
    width: 32px;
}

.certificate-template-title strong {
    color: var(--panel-text, #172033);
    font-size: .75rem;
}

.certificate-builder-meta {
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) 165px;
}

.certificate-builder-meta .form-label {
    font-size: .6rem;
    margin-bottom: .3rem;
}

.certificate-builder-meta :is(.form-control, .form-select) {
    font-size: .68rem;
    min-height: 38px;
}

.certificate-builder-actions {
    display: flex;
    gap: .45rem;
}

.certificate-builder-actions .btn {
    font-size: .65rem;
    white-space: nowrap;
}

.certificate-builder-grid {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(440px, .84fr) minmax(520px, 1.16fr);
}

.certificate-builder-workspace {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.certificate-builder-section {
    overflow: visible;
    padding: 0;
}

.certificate-builder-section>header {
    align-items: center;
    border-bottom: 1px solid var(--panel-border, #e4eaf1);
    display: grid;
    gap: .65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .8rem .9rem;
}

.certificate-builder-section>header>span {
    color: var(--panel-muted, #718096);
    font-size: .53rem;
    font-weight: 850;
}

.certificate-builder-section>header>div {
    display: grid;
    gap: .1rem;
}

.certificate-builder-section>header h2 {
    color: var(--panel-text, #172033);
    font-size: .75rem;
    font-weight: 900;
    margin: 0;
}

.certificate-builder-section>header p {
    color: var(--panel-muted, #718096);
    font-size: .55rem;
    line-height: 1.7;
    margin: 0;
}

.certificate-builder-section>header>i {
    color: var(--panel-primary, #0f766e);
    font-size: .9rem;
}

.certificate-builder-fields {
    display: grid;
    gap: .8rem;
    padding: .9rem;
}

.certificate-builder-fields .admin-editor-field .ck-editor__editable_inline {
    min-height: 165px;
}

.certificate-builder-section:nth-child(2) .admin-editor-field .ck-editor__editable_inline {
    min-height: 235px;
}

.certificate-variable-palette {
    background: var(--panel-surface-soft, #f8fafc);
    border-bottom: 1px solid var(--panel-border, #e4eaf1);
    display: grid;
    gap: .7rem;
    padding: .8rem .9rem;
}

.certificate-variable-help {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.certificate-variable-help>i {
    align-items: center;
    background: color-mix(in srgb, var(--panel-primary, #0f766e) 10%, transparent);
    border-radius: 8px;
    color: var(--panel-primary, #0f766e);
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.certificate-variable-help>span {
    display: grid;
    gap: .08rem;
}

.certificate-variable-help strong {
    color: var(--panel-text, #172033);
    font-size: .65rem;
}

.certificate-variable-help small {
    color: var(--panel-muted, #718096);
    font-size: .52rem;
    line-height: 1.7;
}

.certificate-variable-accordion {
    display: grid;
    gap: .4rem;
}

.certificate-variable-accordion .accordion-item {
    background: var(--panel-surface, #fff);
    border: 1px solid var(--panel-border, #e4eaf1);
    border-radius: 8px;
    overflow: hidden;
}

.certificate-variable-accordion .accordion-button {
    background: transparent;
    box-shadow: none;
    color: var(--panel-text, #172033);
    font-size: .61rem;
    font-weight: 850;
    gap: .5rem;
    min-height: 42px;
    padding: .65rem .75rem;
}

.certificate-variable-accordion .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--panel-primary, #0f766e) 5%, transparent);
    color: var(--panel-primary, #0f766e);
}

.certificate-variable-accordion .accordion-button>i {
    color: var(--panel-primary, #0f766e);
    font-size: .75rem;
}

.certificate-variable-accordion .accordion-button>small {
    color: var(--panel-muted, #718096);
    font-size: .49rem;
    font-weight: 600;
    margin-right: auto;
}

.certificate-variable-accordion .accordion-button::after {
    height: .75rem;
    margin-right: .35rem;
    width: .75rem;
}

.certificate-variable-accordion .accordion-body {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem;
}

.certificate-variable-chip {
    align-items: center;
    background: var(--panel-surface-soft, #f8fafc);
    border: 1px solid var(--panel-border, #e4eaf1);
    border-radius: 7px;
    color: var(--panel-text, #172033);
    display: inline-grid;
    gap: .08rem .45rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .42rem .5rem;
    text-align: right;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.certificate-variable-chip span {
    font-size: .54rem;
    font-weight: 800;
}

.certificate-variable-chip code {
    color: var(--panel-muted, #718096);
    direction: ltr;
    font-size: .45rem;
    grid-column: 1;
}

.certificate-variable-chip i {
    color: var(--panel-primary, #0f766e);
    font-size: .65rem;
    grid-column: 2;
    grid-row: 1 / 3;
}

.certificate-variable-chip:hover,
.certificate-variable-chip.is-inserted {
    background: color-mix(in srgb, var(--panel-primary, #0f766e) 8%, var(--panel-surface, #fff));
    border-color: color-mix(in srgb, var(--panel-primary, #0f766e) 35%, var(--panel-border, #e4eaf1));
    transform: translateY(-1px);
}

.certificate-media-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: .9rem;
}

.certificate-media-grid>div {
    min-width: 0;
}

.certificate-media-grid .file-input-shell {
    min-height: 112px;
}

.certificate-remove-media {
    align-items: center;
    color: var(--panel-muted, #718096);
    display: flex;
    font-size: .54rem;
    gap: .45rem;
    margin: .55rem 0 0;
}

.certificate-remove-media .form-check-input {
    float: none;
    margin: 0;
}

.certificate-media-status {
    align-items: center;
    display: flex;
    gap: .3rem;
}

.certificate-media-status>span {
    align-items: center;
    background: var(--panel-surface-soft, #f8fafc);
    border: 1px solid var(--panel-border, #e4eaf1);
    border-radius: 6px;
    color: #a0aab7;
    display: flex;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.certificate-media-status>span.is-active {
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .2);
    color: #059669;
}

.certificate-preview-panel {
    background: var(--panel-surface, #fff);
    border: 1px solid var(--panel-border, #e4eaf1);
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
    position: sticky;
    top: 82px;
}

.certificate-preview-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border, #e4eaf1);
    display: flex;
    justify-content: space-between;
    min-height: 48px;
    padding: .65rem .85rem;
}

.certificate-preview-head>div {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.certificate-preview-head strong {
    color: var(--panel-text, #172033);
    font-size: .65rem;
}

.certificate-preview-head>span {
    background: var(--panel-surface-soft, #f8fafc);
    border: 1px solid var(--panel-border, #e4eaf1);
    border-radius: 6px;
    color: var(--panel-muted, #718096);
    font-size: .5rem;
    padding: .25rem .45rem;
}

.live-dot {
    background: #10b981;
    border: 3px solid rgba(16, 185, 129, .16);
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.certificate-preview-stage {
    align-items: center;
    background-color: #e8edf3;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .46) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .46) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .46) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .46) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    display: flex;
    justify-content: center;
    min-height: 650px;
    overflow: auto;
    padding: 1.25rem;
}

.certificate-page {
    --certificate-accent: #b08a4f;
    --certificate-navy: #18314d;
    background-color: #fff;
    background-image: var(--certificate-background-image, none), linear-gradient(145deg, #fff, #fbfaf7);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 22px 55px rgba(27, 43, 63, .2);
    color: #1c2c3f;
    display: grid;
    flex: 0 0 auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    isolation: isolate;
    overflow: hidden;
    padding: 5.8% 7%;
    position: relative;
    transition: aspect-ratio .3s ease, max-width .3s ease;
    width: 100%;
}

.certificate-page::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)),
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .64) 72%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    opacity: .72;
    z-index: 1;
}

.certificate-background-image {
    height: 100%;
    inset: 0;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.certificate-page.is-portrait {
    aspect-ratio: 210 / 297;
    max-width: 500px;
}

.certificate-page.is-landscape {
    aspect-ratio: 297 / 210;
    max-width: 720px;
}

.certificate-page-overlay {
    border: 1px solid color-mix(in srgb, var(--certificate-accent) 48%, transparent);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .38);
    inset: 3.2%;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.certificate-page-overlay::before,
.certificate-page-overlay::after {
    background: var(--certificate-accent);
    content: "";
    height: 2px;
    position: absolute;
    top: -1px;
    width: 18%;
}

.certificate-page-overlay::before {
    right: 8%;
}

.certificate-page-overlay::after {
    left: 8%;
}

.certificate-page-header,
.certificate-page-body,
.certificate-page-footer {
    position: relative;
    z-index: 2;
}

.certificate-page-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.certificate-brand-row {
    align-items: center;
    display: grid;
    gap: 3%;
    grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
    margin-bottom: 1.4%;
    width: 78%;
}

.certificate-brand-row>span {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--certificate-accent) 65%, transparent));
    height: 1px;
    position: relative;
}

.certificate-brand-row>span:first-child {
    grid-column: 1;
}

.certificate-brand-row>span:last-child {
    background: linear-gradient(90deg, color-mix(in srgb, var(--certificate-accent) 65%, transparent), transparent);
}

.certificate-brand-row>span:last-child {
    grid-column: 3;
}

.certificate-brand-row>span::after {
    background: var(--certificate-accent);
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    content: "";
    height: 7px;
    position: absolute;
    right: -3px;
    top: -3px;
    width: 7px;
}

.certificate-brand-row>span:last-child::after {
    left: -3px;
    right: auto;
}

.certificate-logo-frame {
    align-items: center;
    background: rgba(255, 255, 255, .88);
    border: 1px solid color-mix(in srgb, var(--certificate-accent) 40%, rgba(255, 255, 255, .9));
    border-radius: 13px;
    box-shadow: 0 9px 24px rgba(24, 49, 77, .1), inset 0 0 0 3px rgba(255, 255, 255, .75);
    display: flex;
    height: clamp(42px, 5.8vw, 58px);
    justify-content: center;
    min-width: clamp(70px, 9.5vw, 96px);
    padding: 6px 10px;
    position: relative;
}

.certificate-logo-frame {
    grid-column: 2;
}

.certificate-logo-frame::before,
.certificate-logo-frame::after {
    border-color: var(--certificate-accent);
    border-style: solid;
    content: "";
    height: 13px;
    opacity: .7;
    position: absolute;
    width: 13px;
}

.certificate-logo-frame::before {
    border-width: 1px 1px 0 0;
    right: 4px;
    top: 4px;
}

.certificate-logo-frame::after {
    border-width: 0 0 1px 1px;
    bottom: 4px;
    left: 4px;
}

.certificate-logo-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--certificate-accent) 14%, transparent), transparent 70%);
    inset: -12px;
    pointer-events: none;
    position: absolute;
}

.certificate-logo-frame img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    width: auto;
    z-index: 1;
}

.certificate-header-label {
    align-items: center;
    color: var(--certificate-accent);
    display: inline-flex;
    font-size: clamp(.36rem, .5vw, .47rem);
    font-weight: 850;
    gap: .25rem;
    letter-spacing: .02em;
    margin-bottom: .25%;
}

.certificate-issue-meta {
    align-items: center;
    background: rgba(255, 255, 255, .48);
    border: 1px solid color-mix(in srgb, var(--certificate-accent) 18%, transparent);
    border-radius: 999px;
    color: #657182;
    display: grid;
    gap: 3%;
    grid-template-columns: 1fr 1px 1fr;
    margin: 0 auto .9%;
    padding: .35% 1.2%;
    width: min(84%, 390px);
}

.certificate-issue-meta>i {
    background: color-mix(in srgb, var(--certificate-accent) 45%, transparent);
    height: 70%;
    width: 1px;
}

.certificate-issue-meta>span {
    align-items: center;
    display: flex;
    gap: .25rem;
    justify-content: center;
    min-width: 0;
}

.certificate-issue-meta small {
    color: #7c8795;
    font-size: clamp(.34rem, .5vw, .43rem);
    white-space: nowrap;
}

.certificate-issue-meta strong {
    color: var(--certificate-navy);
    font-size: clamp(.43rem, .68vw, .59rem);
    font-weight: 900;
    white-space: nowrap;
}

.certificate-header-label i {
    font-size: .78em;
}

.certificate-page-header h1 {
    color: var(--certificate-navy);
    font-family: "IRANSansPanel", Tahoma, sans-serif;
    font-size: clamp(.9rem, 1.75vw, 1.45rem);
    font-weight: 950;
    line-height: 1.45;
    margin: 0 0 .55%;
}

.certificate-page-header h1::after {
    background: linear-gradient(90deg, transparent, var(--certificate-accent), transparent);
    content: "";
    display: block;
    height: 1px;
    margin: 1.4% auto 0;
    width: 58px;
}

.certificate-page-header>.certificate-rich-content {
    font-size: clamp(.42rem, .66vw, .58rem);
    line-height: 1.65;
}

.certificate-page-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: clamp(.67rem, 1.2vw, 1rem);
    justify-content: center;
    line-height: 2.3;
    padding: 2% 2%;
    text-align: center;
}

.certificate-body-inner {
    max-width: 100%;
    width: 100%;
}

.certificate-page-footer {
    text-align: center;
    width: 100%;
}

.certificate-footer-divider {
    align-items: center;
    display: grid;
    gap: 2%;
    grid-template-columns: 1fr auto 1fr;
    margin: 0 auto 1.2%;
    width: 86%;
}

.certificate-footer-divider span {
    background: linear-gradient(90deg, transparent, rgba(176, 138, 79, .55));
    height: 1px;
}

.certificate-footer-divider span:last-child {
    background: linear-gradient(90deg, rgba(176, 138, 79, .55), transparent);
}

.certificate-footer-divider i {
    color: var(--certificate-accent);
    font-size: clamp(.55rem, .9vw, .8rem);
}

.certificate-footer-layout {
    align-items: end;
    display: grid;
    gap: 3%;
    grid-template-columns: minmax(58px, .75fr) minmax(110px, 1.7fr) minmax(58px, .75fr);
    width: 100%;
}

.certificate-signature-block {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.certificate-signature-block {
    grid-column: 1;
}

.certificate-signature-image {
    align-items: center;
    border-bottom: 1px solid rgba(24, 49, 77, .24);
    display: flex;
    height: clamp(30px, 4vw, 42px);
    justify-content: center;
    margin-bottom: 2px;
    padding: 1px 6px;
    width: 82%;
}

.certificate-signature-image img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.certificate-signature-block small {
    color: #6a7787;
    font-size: clamp(.32rem, .46vw, .42rem);
    font-weight: 750;
}

.certificate-footer-content {
    align-self: center;
    color: #5e6c7c;
    font-size: clamp(.46rem, .7vw, .62rem);
    line-height: 1.65;
}

.certificate-footer-content {
    grid-column: 2;
}

.certificate-qr-block {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    grid-column: 3;
    min-width: 0;
}

.certificate-qr-frame {
    background: #fff;
    border: 1px solid rgba(176, 138, 79, .38);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(24, 49, 77, .08);
    padding: clamp(2px, .35vw, 4px);
    position: relative;
}

.certificate-qr-placeholder {
    align-items: center;
    display: flex;
    height: clamp(34px, 4.5vw, 48px);
    justify-content: center;
    overflow: hidden;
    width: clamp(34px, 4.5vw, 48px);
}

.certificate-qr-placeholder>i {
    color: var(--certificate-navy);
    font-size: clamp(1.4rem, 2.8vw, 2.5rem);
}

.certificate-qr-placeholder :is(canvas, img) {
    display: block;
    height: 100% !important;
    image-rendering: pixelated;
    max-height: 100%;
    max-width: 100%;
    width: 100% !important;
}

.certificate-qr-shield {
    align-items: center;
    background: var(--certificate-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: -5px;
    color: #fff;
    display: flex;
    font-size: clamp(.34rem, .5vw, .46rem);
    height: clamp(14px, 1.7vw, 18px);
    justify-content: center;
    position: absolute;
    right: -5px;
    width: clamp(14px, 1.7vw, 18px);
}

.certificate-qr-block>span {
    display: grid;
    gap: 0;
    max-width: 100%;
    text-align: center;
}

.certificate-qr-block strong {
    color: var(--certificate-navy);
    font-size: clamp(.29rem, .42vw, .38rem);
    white-space: nowrap;
}

.certificate-qr-block small {
    color: #84909e;
    direction: ltr;
    font-size: clamp(.24rem, .34vw, .32rem);
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.certificate-page.is-landscape {
    padding-block: 4.3%;
}

.certificate-page.is-landscape .certificate-brand-row {
    margin-bottom: .8%;
    width: 70%;
}

.certificate-page.is-landscape .certificate-logo-frame {
    height: clamp(36px, 4.4vw, 48px);
    min-width: clamp(64px, 8vw, 86px);
}

.certificate-page.is-landscape .certificate-page-body {
    padding-block: .75%;
}

.certificate-page.is-landscape .certificate-footer-divider {
    margin-bottom: .7%;
}

.certificate-style-academic {
    --certificate-accent: #315f8d;
    --certificate-navy: #15395f;
}

.certificate-style-academic::before {
    background: linear-gradient(rgba(255, 255, 255, .82), rgba(239, 246, 253, .86)), radial-gradient(circle at 50% 0, rgba(49, 95, 141, .2), transparent 42%);
}

.certificate-style-academic .certificate-page-overlay {
    border: 3px double rgba(49, 95, 141, .56);
    box-shadow: inset 0 0 0 6px rgba(49, 95, 141, .055);
    inset: 3.7%;
}

.certificate-style-academic .certificate-page-overlay::before,
.certificate-style-academic .certificate-page-overlay::after {
    background: #315f8d;
    height: 10px;
    top: -5px;
    width: 10px;
    transform: rotate(45deg);
}

.certificate-style-academic .certificate-brand-row {
    width: 62%;
}

.certificate-style-academic .certificate-header-label {
    letter-spacing: .09em;
}

.certificate-style-academic .certificate-page-body {
    background: rgba(255, 255, 255, .4);
    border: 1px solid rgba(49, 95, 141, .13);
    border-radius: 6px;
    margin-block: 1.5%;
    padding-inline: 5%;
}

.certificate-style-academic .certificate-footer-layout {
    border-top: 1px solid rgba(49, 95, 141, .15);
    padding-top: 1.2%;
}

.certificate-style-minimal {
    --certificate-accent: #657080;
    --certificate-navy: #243142;
    padding-inline: 9%;
}

.certificate-style-minimal::before {
    background: linear-gradient(90deg, rgba(101, 112, 128, .055), transparent 18%), rgba(255, 255, 255, .9);
}

.certificate-style-minimal .certificate-page-overlay {
    border: 0;
    border-right: 5px solid #657080;
    box-shadow: none;
    inset: 5%;
}

.certificate-style-minimal .certificate-page-overlay::before {
    background: #657080;
    height: 22%;
    right: -5px;
    top: 8%;
    width: 5px;
}

.certificate-style-minimal .certificate-page-overlay::after {
    display: none;
}

.certificate-style-minimal .certificate-brand-row>span,
.certificate-style-minimal .certificate-footer-divider {
    display: none;
}

.certificate-style-minimal .certificate-logo-frame {
    border-radius: 4px;
    box-shadow: none;
}

.certificate-style-minimal .certificate-page-header {
    align-items: flex-start;
    text-align: right;
}

.certificate-style-minimal .certificate-brand-row {
    display: flex;
    margin-right: 0;
    width: auto;
}

.certificate-style-minimal .certificate-issue-meta {
    border-radius: 3px;
    margin-right: 0;
    width: 100%;
}

.certificate-style-minimal .certificate-page-header h1::after {
    margin-right: 0;
    width: 34px;
}

.certificate-style-minimal .certificate-page-body {
    align-items: flex-start;
    border-right: 1px solid rgba(101, 112, 128, .25);
    padding-right: 5%;
    text-align: right;
}

.certificate-style-executive {
    --certificate-accent: #b08a4f;
    --certificate-navy: #10263f;
}

.certificate-style-executive::before {
    background: linear-gradient(90deg, rgba(16, 38, 63, .98) 0 16%, rgba(255, 255, 255, .88) 16% 100%), linear-gradient(135deg, transparent, rgba(176, 138, 79, .16));
}

.certificate-style-executive .certificate-page-overlay {
    border: 0;
    border-bottom: 3px solid #b08a4f;
    border-top: 3px solid #10263f;
    box-shadow: none;
    inset: 3.5%;
}

.certificate-style-executive .certificate-page-overlay::before {
    background: #b08a4f;
    height: 100%;
    right: 0;
    top: 0;
    width: 2px;
}

.certificate-style-executive .certificate-page-overlay::after {
    background: #10263f;
    bottom: 0;
    height: 100%;
    left: 0;
    top: auto;
    width: 2px;
}

.certificate-style-executive .certificate-brand-row {
    margin-right: auto;
    width: 66%;
}

.certificate-style-executive .certificate-page-header h1 {
    letter-spacing: .02em;
}

.certificate-style-executive .certificate-header-label {
    background: var(--certificate-navy);
    border-radius: 999px;
    color: #fff;
    padding: .2rem .55rem;
}

.certificate-style-executive .certificate-issue-meta {
    background: #10263f;
    border-color: #b08a4f;
}

.certificate-style-executive .certificate-issue-meta :is(small, strong) {
    color: #fff;
}

.certificate-style-executive .certificate-footer-divider span {
    background: #b08a4f;
}

.certificate-style-modern {
    --certificate-accent: #0f766e;
    --certificate-navy: #163d47;
}

.certificate-style-modern::before {
    background: linear-gradient(145deg, rgba(15, 118, 110, .13) 0 15%, transparent 15% 82%, rgba(22, 61, 71, .09) 82%), rgba(255, 255, 255, .88);
}

.certificate-style-modern .certificate-page-overlay {
    border-width: 0 5px 0 0;
    box-shadow: none;
    inset: 4%;
}

.certificate-style-modern .certificate-page-overlay::before {
    background: #0f766e;
    border-radius: 50%;
    height: 34px;
    right: -18px;
    top: 12%;
    width: 34px;
}

.certificate-style-modern .certificate-page-overlay::after {
    background: #163d47;
    border-radius: 50%;
    bottom: 8%;
    height: 18px;
    left: -9px;
    top: auto;
    width: 18px;
}

.certificate-style-modern .certificate-page-header {
    align-items: flex-start;
    text-align: right;
}

.certificate-style-modern .certificate-brand-row {
    margin-left: auto;
    margin-right: 0;
    width: 58%;
}

.certificate-style-modern .certificate-issue-meta {
    background: rgba(15, 118, 110, .07);
    border-radius: 4px;
    margin-left: auto;
    margin-right: 0;
}

.certificate-style-modern .certificate-page-header h1::after {
    margin-right: 0;
}

.certificate-style-modern .certificate-footer-layout {
    grid-template-columns: minmax(58px, .75fr) minmax(110px, 1.7fr) minmax(58px, .75fr);
}

.certificate-style-modern .certificate-signature-block {
    grid-column: 3;
}

.certificate-style-modern .certificate-qr-block {
    grid-column: 1;
    grid-row: 1;
}

.certificate-style-heritage {
    --certificate-accent: #8a5d3b;
    --certificate-navy: #642f38;
}

.certificate-style-heritage::before {
    background: radial-gradient(circle at center, rgba(255, 255, 255, .88), rgba(247, 238, 221, .84)), repeating-linear-gradient(45deg, rgba(138, 93, 59, .04) 0 1px, transparent 1px 7px);
}

.certificate-style-heritage .certificate-page-overlay {
    border: 4px double rgba(100, 47, 56, .64);
    box-shadow: inset 0 0 0 6px rgba(138, 93, 59, .07), inset 0 0 0 7px rgba(100, 47, 56, .12);
    inset: 2.7%;
}

.certificate-style-heritage .certificate-page-overlay::before,
.certificate-style-heritage .certificate-page-overlay::after {
    background: #642f38;
    border: 3px solid #f5e7cd;
    height: 18px;
    top: -9px;
    transform: rotate(45deg);
    width: 18px;
}

.certificate-style-heritage .certificate-header-label {
    color: #642f38;
}

.certificate-style-heritage .certificate-page-body {
    background: rgba(255, 255, 255, .32);
    border: 1px solid rgba(138, 93, 59, .16);
    border-radius: 50%;
    margin: 2% 5%;
}

.certificate-style-heritage .certificate-issue-meta {
    background: rgba(247, 238, 221, .72);
    border-color: rgba(100, 47, 56, .2);
}

.certificate-rich-content {
    line-height: 1.95;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.certificate-rich-content> :last-child {
    margin-bottom: 0;
}

.certificate-rich-content p {
    margin: 0 0 .35em;
}

.certificate-rich-content :is(ul, ol) {
    display: inline-block;
    margin: .2em auto;
    text-align: right;
}

.certificate-rich-content table {
    border-collapse: collapse;
    margin: .4em auto;
    max-width: 100%;
}

.certificate-rich-content :is(td, th) {
    border: 1px solid rgba(28, 44, 63, .25);
    padding: .2em .45em;
}

.certificate-rich-content a {
    color: #315f8d;
}

.certificate-preview-note {
    align-items: flex-start;
    color: var(--panel-muted, #718096);
    display: flex;
    font-size: .5rem;
    gap: .4rem;
    line-height: 1.8;
    padding: .6rem .8rem;
}

.certificate-preview-note i {
    color: var(--panel-primary, #0f766e);
    margin-top: .05rem;
}

html[data-panel-theme="dark"] .certificate-variable-accordion .accordion-button::after {
    filter: invert(1) grayscale(1);
}

html[data-panel-theme="dark"] .certificate-preview-stage {
    background-color: #111d2b;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .025) 75%);
}

html[data-panel-theme="dark"] .certificate-page {
    color: #1c2c3f;
}

@media (max-width: 1399.98px) {
    .certificate-builder-toolbar {
        grid-template-columns: minmax(210px, .7fr) minmax(340px, 1.3fr);
    }

    .certificate-builder-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .certificate-builder-grid {
        grid-template-columns: minmax(400px, .9fr) minmax(470px, 1.1fr);
    }

    .certificate-preview-stage {
        min-height: 590px;
    }
}

@media (max-width: 1199.98px) {
    .certificate-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .certificate-builder-grid {
        grid-template-columns: 1fr;
    }

    .certificate-preview-panel {
        grid-row: 1;
        position: static;
    }

    .certificate-preview-stage {
        min-height: 560px;
    }

    .certificate-page.is-portrait {
        max-width: 430px;
    }

    .certificate-page.is-landscape {
        max-width: 680px;
    }
}

@media (max-width: 767.98px) {
    .certificate-preset-picker>header {
        align-items: flex-start;
        gap: .5rem;
    }

    .certificate-preset-grid {
        grid-template-columns: 1fr;
    }

    .certificate-builder-toolbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .certificate-builder-meta {
        grid-template-columns: 1fr;
    }

    .certificate-builder-actions {
        grid-column: auto;
    }

    .certificate-builder-actions .btn {
        flex: 1 1 0;
    }

    .certificate-media-grid {
        grid-template-columns: 1fr;
    }

    .certificate-preview-stage {
        min-height: 420px;
        padding: .75rem;
    }

    .certificate-page.is-portrait {
        max-width: 330px;
    }

    .certificate-page.is-landscape {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .certificate-builder-grid {
        display: block;
    }

    .certificate-builder-workspace {
        margin-top: .75rem;
    }

    .certificate-builder-section>header {
        padding: .7rem;
    }

    .certificate-builder-fields,
    .certificate-variable-palette,
    .certificate-media-grid {
        padding: .7rem;
    }

    .certificate-preview-stage {
        min-height: 330px;
    }

    .certificate-preview-note {
        display: none;
    }

    .certificate-logo-frame {
        border-radius: 8px;
        height: 36px;
        min-width: 60px;
        padding: 5px 8px;
    }

    .certificate-footer-layout {
        gap: 2%;
        grid-template-columns: minmax(52px, .8fr) minmax(90px, 1.5fr) minmax(52px, .8fr);
    }

    .certificate-signature-image {
        height: 27px;
    }

    .certificate-qr-placeholder {
        height: 32px;
        width: 32px;
    }
}

/* Formal admin and instructor navigation -------------------------------- */
.panel-role-admin .panel-layout,
.panel-role-teacher .panel-layout {
    grid-template-columns: 252px minmax(0, 1fr);
}

.panel-role-admin .panel-sidebar,
.panel-role-teacher .panel-sidebar,
html[data-panel-theme="dark"] .panel-role-admin .panel-sidebar,
html[data-panel-theme="dark"] .panel-role-teacher .panel-sidebar {
    background-color: #0c1725;
    background-image: linear-gradient(180deg, rgba(42, 66, 96, .72), transparent 34%), linear-gradient(135deg, #101e30, #09131f 72%);
    border-left: 1px solid rgba(255, 255, 255, .055);
    box-shadow: -8px 0 30px rgba(7, 15, 25, .16);
    position: sticky;
}

.panel-role-admin .panel-sidebar::before,
.panel-role-teacher .panel-sidebar::before {
    background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 22px 22px;
    content: '';
    inset: 0;
    opacity: .45;
    pointer-events: none;
    position: absolute;
}

.panel-role-admin .panel-sidebar>*,
.panel-role-teacher .panel-sidebar>* {
    position: relative;
    z-index: 1;
}

.panel-role-admin .panel-sidebar-head,
.panel-role-teacher .panel-sidebar-head {
    min-height: 78px;
    padding: .8rem .9rem;
}

.panel-role-admin .panel-sidebar-head .brand-mark,
.panel-role-teacher .panel-sidebar-head .brand-mark {
    gap: .6rem;
}

.panel-role-admin .panel-sidebar-head .brand-logo,
.panel-role-teacher .panel-sidebar-head .brand-logo,
.panel-role-admin .panel-sidebar-head .brand-mark>i,
.panel-role-teacher .panel-sidebar-head .brand-mark>i {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    height: 39px;
    object-fit: contain;
    padding: 5px;
    width: 39px;
}

.panel-role-admin .panel-sidebar-head .brand-mark strong,
.panel-role-teacher .panel-sidebar-head .brand-mark strong {
    font-size: .74rem;
    font-weight: 900;
}

.panel-role-admin .panel-sidebar-head .brand-mark small,
.panel-role-teacher .panel-sidebar-head .brand-mark small {
    color: #91a0b4;
    font-size: .52rem;
    margin-top: .1rem;
}

.panel-role-admin .panel-sidebar-head .brand-mark em,
.panel-role-teacher .panel-sidebar-head .brand-mark em {
    color: #62748b;
    direction: ltr;
    font-size: .34rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .14em;
    margin-top: .08rem;
}

.panel-live-clock {
    align-items: center;
    background: rgba(4, 11, 19, .34);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 7px;
    display: grid;
    gap: .5rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: .7rem .75rem .15rem;
    padding: .55rem;
}

.panel-live-clock-icon {
    align-items: center;
    background: rgba(181, 138, 74, .13);
    border: 1px solid rgba(181, 138, 74, .2);
    border-radius: 5px;
    color: #d0aa70;
    display: flex;
    grid-row: 1 / span 2;
    height: 31px;
    justify-content: center;
    width: 31px;
}

.panel-role-teacher .panel-live-clock-icon {
    background: rgba(129, 151, 181, .13);
    border-color: rgba(129, 151, 181, .2);
    color: #a9bcd4;
}

.panel-live-clock-date {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.panel-live-clock-date small {
    color: #63748a;
    font-size: .38rem;
}

.panel-live-clock-date strong {
    color: #c4ceda;
    font-size: .49rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-live-clock time {
    color: #f1f5f9;
    direction: ltr;
    font-size: .71rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    grid-column: 2;
    letter-spacing: .04em;
    text-align: right;
}

.panel-role-admin .panel-nav,
.panel-role-teacher .panel-nav {
    gap: .15rem;
    padding: .55rem .65rem .8rem;
}

.panel-role-admin .panel-nav-label,
.panel-role-teacher .panel-nav-label {
    align-items: center;
    display: flex;
    gap: .45rem;
    padding: .8rem .55rem .25rem;
}

.panel-role-admin .panel-nav-label::after,
.panel-role-teacher .panel-nav-label::after {
    background: linear-gradient(90deg, rgba(127, 141, 161, .28), transparent);
    content: '';
    flex: 1;
    height: 1px;
}

.panel-role-admin .panel-nav a,
.panel-role-teacher .panel-nav a {
    border-radius: 5px;
    display: grid;
    font-size: .65rem;
    gap: .5rem;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 36px;
    padding: .25rem .35rem;
    position: relative;
}

.panel-role-admin .panel-nav a i,
.panel-role-teacher .panel-nav a i {
    align-items: center;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 4px;
    display: flex;
    font-size: .76rem;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.panel-role-admin .panel-nav a.active,
.panel-role-admin .panel-nav a:hover,
.panel-role-teacher .panel-nav a.active,
.panel-role-teacher .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(43, 65, 93, .82), rgba(29, 45, 66, .68));
    border-color: rgba(137, 157, 183, .2);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.panel-role-admin .panel-nav a.active::before,
.panel-role-teacher .panel-nav a.active::before {
    background: #b58a4a;
    border-radius: 2px 0 0 2px;
    bottom: 7px;
    content: '';
    position: absolute;
    right: -1px;
    top: 7px;
    width: 2px;
}

.panel-role-teacher .panel-nav a.active::before {
    background: #8197b5;
}

.panel-role-admin .panel-nav a.active i {
    color: #d8b77f;
}

.panel-role-teacher .panel-nav a.active i {
    color: #b9cae0;
}

.panel-role-admin .panel-nav-badge,
.panel-role-teacher .panel-nav-badge {
    background: #a83f47;
    border: 2px solid #1c2b3f;
    border-radius: 999px;
    color: #fff;
    font-size: .43rem;
    min-width: 18px;
    padding: .08rem .25rem;
    text-align: center;
}

.panel-role-admin .panel-sidebar-profile,
.panel-role-teacher .panel-sidebar-profile {
    background: rgba(4, 10, 17, .5);
    border-color: rgba(255, 255, 255, .07);
    gap: .6rem;
    padding: .65rem .75rem;
}

.panel-role-admin .panel-avatar,
.panel-role-teacher .panel-avatar {
    background: linear-gradient(145deg, #324965, #20334c);
    border: 1px solid #4a607b;
    height: 34px;
    width: 34px;
}

.panel-role-admin .panel-sidebar-profile strong,
.panel-role-teacher .panel-sidebar-profile strong {
    font-size: .61rem;
}

.panel-role-admin .panel-sidebar-profile small,
.panel-role-teacher .panel-sidebar-profile small {
    align-items: center;
    display: flex;
    font-size: .47rem;
    gap: .25rem;
}

.panel-role-admin .panel-sidebar-profile small i,
.panel-role-teacher .panel-sidebar-profile small i {
    background: #38b27d;
    border: 2px solid #142337;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

@media (max-width: 991.98px) {

    .panel-role-admin .panel-layout,
    .panel-role-teacher .panel-layout {
        grid-template-columns: 1fr;
    }

    .panel-role-admin .panel-sidebar,
    .panel-role-teacher .panel-sidebar {
        position: fixed;
        width: min(86vw, 285px);
    }
}

/* Question bank workbook guide ------------------------------------------ */
.question-bank-toolbar {
    margin-bottom: .75rem;
}

.question-bank-kicker {
    color: var(--formal-gold);
    display: block;
    font-size: .48rem;
    font-weight: 900;
    margin-bottom: .15rem;
}

.question-bank-tabs {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: .75rem;
    padding: .35rem;
}

.question-bank-tabs button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--panel-muted);
    display: flex;
    gap: .55rem;
    min-height: 48px;
    padding: .4rem .6rem;
    text-align: right;
}

.question-bank-tabs button>i {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.question-bank-tabs button>span {
    display: grid;
    gap: .08rem;
}

.question-bank-tabs button strong {
    color: var(--panel-text);
    font-size: .61rem;
}

.question-bank-tabs button small {
    color: var(--panel-muted);
    font-size: .48rem;
}

.question-bank-tabs button.active {
    background: var(--panel-accent-soft);
    border-color: color-mix(in srgb, var(--panel-accent) 18%, var(--panel-border));
    color: var(--panel-accent);
}

.question-bank-tabs button.active>i {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.question-bank-tab-content>.tab-pane {
    outline: 0;
}

.question-excel-overview {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    margin-bottom: .75rem;
}

.question-excel-import-card,
.question-excel-download-card {
    padding: .85rem;
}

.question-excel-import-card>header {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: .6rem;
    margin-bottom: .75rem;
    padding-bottom: .65rem;
}

.question-excel-import-card>header>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    height: 35px;
    justify-content: center;
    width: 35px;
}

.question-excel-import-card>header h2 {
    color: var(--panel-text);
    font-size: .67rem;
    font-weight: 900;
    margin: 0 0 .12rem;
}

.question-excel-import-card>header p {
    color: var(--panel-muted);
    font-size: .51rem;
    margin: 0;
}

.question-excel-import-card>header code {
    color: var(--panel-accent);
    direction: ltr;
}

.question-excel-import-card form {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.question-excel-import-card form .btn {
    margin-bottom: .1rem;
    min-height: 38px;
}

.question-excel-download-card {
    align-items: center;
    background-image: linear-gradient(135deg, rgba(20, 125, 91, .08), transparent 64%);
    display: grid;
    gap: .7rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.question-excel-download-card>span {
    align-items: center;
    background: #147d5b;
    border-radius: 7px;
    color: #fff;
    display: flex;
    font-size: 1.2rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.question-excel-download-card>div {
    display: grid;
    gap: .1rem;
}

.question-excel-download-card small {
    color: #147d5b;
    font-size: .47rem;
    font-weight: 900;
}

.question-excel-download-card strong {
    color: var(--panel-text);
    font-size: .67rem;
}

.question-excel-download-card p {
    color: var(--panel-muted);
    font-size: .5rem;
    line-height: 1.8;
    margin: 0;
}

.question-excel-download-card .btn {
    grid-column: 1 / -1;
    justify-content: center;
}

.question-excel-levels {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .6rem .7rem;
}

.question-excel-levels>strong {
    color: var(--panel-text);
    font-size: .56rem;
    margin-left: auto;
}

.question-excel-levels>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .49rem;
    gap: .25rem;
    padding: .25rem .45rem;
}

.question-excel-levels>span i {
    color: #147d5b;
}

.question-excel-levels code {
    color: var(--panel-accent);
    font-size: .45rem;
}

.question-excel-schema-card {
    margin-bottom: .75rem;
    overflow: hidden;
    padding: 0;
}

.question-excel-section-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    min-height: 55px;
    padding: .65rem .8rem;
}

.question-excel-section-head>div {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.question-excel-section-head>div>span {
    color: var(--formal-gold);
    font-size: .5rem;
    font-weight: 900;
}

.question-excel-section-head h2 {
    color: var(--panel-text);
    font-size: .65rem;
    font-weight: 900;
    margin: 0 0 .1rem;
}

.question-excel-section-head p {
    color: var(--panel-muted);
    font-size: .48rem;
    margin: 0;
}

.question-excel-section-head>span {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    font-size: .47rem;
    padding: .25rem .45rem;
}

.question-excel-schema-table {
    font-size: .55rem;
}

.question-excel-schema-table code,
.question-excel-sample-table code {
    color: var(--panel-accent);
    font-size: .5rem;
}

.question-excel-schema-table tr.is-category-slug>* {
    background: rgba(20, 125, 91, .065) !important;
    border-color: rgba(20, 125, 91, .16);
}

.question-excel-schema-table tr.is-category-slug code {
    color: #147d5b;
    font-weight: 900;
}

.excel-required-badge {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    display: inline-block;
    font-size: .47rem;
    padding: .18rem .3rem;
    white-space: nowrap;
}

.question-excel-sample-wrap {
    max-height: 440px;
}

.question-excel-sample-table {
    font-size: .5rem;
    min-width: 2600px;
}

.question-excel-sample-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.question-excel-sample-table td {
    max-width: 190px;
    white-space: nowrap;
}

.question-excel-sample-table td:first-child {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.question-excel-sample-table .is-slug-cell {
    background: rgba(20, 125, 91, .07) !important;
    color: #147d5b;
    direction: ltr;
    font-weight: 900;
}

html[data-panel-theme="dark"] .question-excel-download-card {
    background-image: linear-gradient(135deg, rgba(51, 180, 135, .09), transparent 64%);
}

@media (max-width: 991.98px) {
    .question-excel-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .question-bank-tabs {
        grid-template-columns: 1fr;
    }

    .question-excel-import-card form {
        grid-template-columns: 1fr;
    }

    .question-excel-import-card form .btn {
        width: 100%;
    }

    .question-excel-levels>strong {
        flex-basis: 100%;
    }
}

/* Comfortable formal panel typography ---------------------------------- */
.panel-role-admin,
.panel-role-teacher {
    font-size: 1rem;
}

.panel-role-admin .panel-heading-wrap h1,
.panel-role-teacher .panel-heading-wrap h1 {
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
}

.panel-role-admin .panel-breadcrumb,
.panel-role-teacher .panel-breadcrumb {
    font-size: .86rem;
}

.panel-role-admin .panel-nav a,
.panel-role-teacher .panel-nav a {
    font-size: .84rem;
}

.panel-role-admin .panel-nav-label,
.panel-role-teacher .panel-nav-label {
    font-size: .73rem;
}

.panel-role-admin .panel-sidebar-profile strong,
.panel-role-teacher .panel-sidebar-profile strong {
    font-size: .81rem;
}

.panel-role-admin .panel-sidebar-profile small,
.panel-role-teacher .panel-sidebar-profile small {
    font-size: .66rem;
}

.panel-role-admin .panel-live-clock-date strong,
.panel-role-teacher .panel-live-clock-date strong {
    font-size: .68rem;
}

.panel-role-admin .panel-live-clock time,
.panel-role-teacher .panel-live-clock time {
    font-size: .9rem;
}

.panel-role-admin .panel-content .form-label,
.panel-role-teacher .panel-content .form-label {
    font-size: .81rem;
}

.panel-role-admin .panel-content :is(.form-control, .form-select),
.panel-role-teacher .panel-content :is(.form-control, .form-select),
.panel-role-admin .panel-content .select2-container,
.panel-role-teacher .panel-content .select2-container {
    font-size: .85rem;
}

.panel-role-admin .panel-content .btn,
.panel-role-teacher .panel-content .btn {
    font-size: .81rem;
}

.panel-role-admin .panel-content .table>thead>tr>th,
.panel-role-teacher .panel-content .table>thead>tr>th {
    font-size: .76rem;
}

.panel-role-admin .panel-content .table>tbody>tr>td,
.panel-role-teacher .panel-content .table>tbody>tr>td {
    font-size: .81rem;
}

.panel-role-admin .panel-content :is(.form-text, small):not(.certificate-page *),
.panel-role-teacher .panel-content :is(.form-text, small):not(.certificate-page *) {
    font-size: .69rem;
}

.panel-role-admin .panel-content p:not(.certificate-page *),
.panel-role-teacher .panel-content p:not(.certificate-page *) {
    font-size: .78rem;
}

.panel-role-admin .panel-content .status-pill,
.panel-role-teacher .panel-content .status-pill {
    font-size: .69rem;
}

/* Controlled video playback and sortable feedback ---------------------- */
[data-video-caption-field][hidden] {
    display: none !important;
}

.plyr {
    --plyr-color-main: var(--panel-accent, #315f8d);
    --plyr-video-control-color: #fff;
    border-radius: 8px;
    direction: ltr;
    overflow: hidden;
}

.plyr__captions {
    direction: rtl;
    font-family: "IRANSansPanel", Tahoma, sans-serif;
}

.plyr__caption {
    background: rgba(4, 12, 23, .86);
    border-radius: 4px;
    line-height: 1.9;
    padding: .3em .65em;
}

.teacher-video-preview .plyr,
.lesson-video-preview .plyr,
.admin-video-player+.plyr {
    width: 100%;
}

[data-sortable] {
    transition: opacity .18s ease, outline-color .18s ease;
}

[data-sortable].is-saving-sort {
    cursor: progress;
    opacity: .72;
}

[data-sortable].is-sort-saved {
    outline: 2px solid rgba(20, 125, 91, .25);
    outline-offset: 4px;
}

.sortable-item.is-sort-chosen {
    box-shadow: 0 12px 28px rgba(16, 38, 63, .14);
}

.sortable-item.is-dragging {
    opacity: .78;
    transform: rotate(.2deg);
}

.course-activity-fullpage {
    width: 100%;
}

.course-activity-fullpage .activity-panel {
    min-height: calc(100vh - 190px);
    width: 100%;
}

.course-activity-fullpage .activity-timeline {
    max-width: none;
}

.course-activity-fullpage-head {
    align-items: center;
}

/* Formal admin and teacher login --------------------------------------- */
.auth-panel-page {
    background: #e8edf3;
    color: #17283d;
    min-height: 100vh;
}

.auth-formal-panel-shell {
    --auth-panel-accent: #315f8d;
    --auth-panel-deep: #102b49;
    --auth-panel-soft: #e9f1f9;
    align-items: center;
    background: radial-gradient(circle at 12% 16%, rgba(49, 95, 141, .15), transparent 28%), linear-gradient(135deg, #edf2f7, #dfe7ef);
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 2.75rem);
    position: relative;
}

.auth-formal-panel-shell.role-teacher {
    --auth-panel-accent: #137a72;
    --auth-panel-deep: #173b45;
    --auth-panel-soft: #e5f4f1;
}

.auth-formal-panel-shell::before,
.auth-formal-panel-shell::after {
    border: 1px solid rgba(49, 95, 141, .1);
    border-radius: 50%;
    content: "";
    height: 420px;
    pointer-events: none;
    position: absolute;
    width: 420px;
}

.auth-formal-panel-shell::before {
    left: -210px;
    top: -220px;
}

.auth-formal-panel-shell::after {
    bottom: -290px;
    right: -180px;
}

.auth-formal-panel-shell>.container {
    max-width: 1220px;
    position: relative;
    z-index: 1;
}

.auth-formal-panel-shell .auth-modern-grid {
    background: #fff;
    border: 1px solid rgba(24, 49, 77, .12);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(19, 40, 65, .16);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    min-height: 680px;
    overflow: hidden;
}

.auth-formal-panel-shell .auth-copy {
    background: var(--auth-panel-deep);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    position: relative;
}

.auth-formal-panel-shell .auth-copy::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, .035) 25%, transparent 25%) 0 0/38px 38px;
    content: "";
    inset: 0;
    opacity: .7;
    pointer-events: none;
    position: absolute;
}

.auth-formal-panel-shell .auth-copy::after {
    background: var(--auth-panel-accent);
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
}

.auth-formal-panel-shell .auth-copy>* {
    position: relative;
    z-index: 1;
}

.auth-panel-brandline {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: auto;
}

.auth-panel-brand {
    align-items: center;
    color: #fff;
    display: flex;
    gap: .8rem;
    text-decoration: none;
}

.auth-panel-brand>i,
.auth-panel-brand>img {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    display: flex;
    height: 48px;
    justify-content: center;
    object-fit: contain;
    padding: 7px;
    width: 48px;
}

.auth-panel-brand>span {
    display: grid;
    gap: .14rem;
}

.auth-panel-brand strong {
    font-size: .95rem;
}

.auth-panel-brand small {
    color: rgba(255, 255, 255, .54);
    direction: ltr;
    font-size: .54rem;
    font-style: normal;
    letter-spacing: .14em;
}

.auth-panel-theme {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #fff;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.auth-role-emblem {
    align-items: center;
    background: color-mix(in srgb, var(--auth-panel-accent) 75%, #fff);
    border: 8px solid rgba(255, 255, 255, .045);
    border-radius: 18px;
    display: flex;
    font-size: 2rem;
    height: 78px;
    justify-content: center;
    margin: auto 0 1.5rem;
    outline: 1px solid rgba(255, 255, 255, .14);
    width: 78px;
}

.auth-formal-panel-shell .auth-kicker {
    color: color-mix(in srgb, var(--auth-panel-accent) 38%, #fff);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.auth-formal-panel-shell .auth-copy h1 {
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    line-height: 1.65;
    margin: .6rem 0 1rem;
    max-width: 580px;
}

.auth-formal-panel-shell .auth-copy>p {
    color: rgba(255, 255, 255, .67);
    font-size: .86rem;
    line-height: 2.1;
    max-width: 590px;
}

.auth-panel-capabilities {
    display: grid;
    gap: .7rem;
    margin-top: 1.35rem;
}

.auth-panel-capabilities span {
    align-items: center;
    color: rgba(255, 255, 255, .78);
    display: flex;
    font-size: .76rem;
    gap: .6rem;
}

.auth-panel-capabilities i {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.auth-formal-panel-shell .auth-role-links {
    margin-top: auto;
    padding-top: 2rem;
}

.auth-formal-panel-shell .auth-role-links a {
    color: #111827;
    font-size: .72rem;
    text-decoration: none;
}

.auth-panel-login-card {
    align-self: center;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: auto;
    padding: clamp(2rem, 4vw, 3.65rem);
    width: min(100%, 500px);
}

.auth-panel-login-card .auth-card-head {
    border-bottom: 1px solid #e6ebf1;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.auth-panel-login-card .auth-card-head small {
    color: var(--auth-panel-accent);
    direction: ltr;
    display: block;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: .35rem;
    text-align: right;
}

.auth-panel-login-card .auth-card-head h2 {
    color: var(--auth-panel-deep);
    font-size: 1.25rem;
    margin-bottom: .3rem;
}

.auth-panel-login-card .auth-card-head>i {
    align-items: center;
    background: var(--auth-panel-soft);
    border: 1px solid color-mix(in srgb, var(--auth-panel-accent) 16%, transparent);
    border-radius: 12px;
    color: var(--auth-panel-accent);
    display: flex;
    font-size: 1.45rem;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.auth-panel-login-card .auth-tabs {
    background: #f2f5f8;
    border: 1px solid #e5eaf0;
    border-radius: 9px;
    gap: 4px;
    padding: 4px;
}

.auth-panel-login-card .auth-tabs .nav-item {
    flex: 1;
}

.auth-panel-login-card .auth-tabs .nav-link {
    border-radius: 6px;
    color: #647386;
    font-size: .76rem;
    width: 100%;
}

.auth-panel-login-card .auth-tabs .nav-link.active {
    background: var(--auth-panel-deep);
    box-shadow: 0 5px 15px rgba(18, 43, 73, .14);
    color: #fff;
}

.auth-panel-login-card .form-label {
    color: #34475d;
    font-size: .74rem;
    font-weight: 750;
}

.auth-panel-login-card .form-control {
    background: #f8fafc;
    border-color: #dfe6ed;
    border-radius: 8px;
    font-size: .84rem;
    min-height: 48px;
}

.auth-panel-login-card .form-control:focus {
    background: #fff;
    border-color: var(--auth-panel-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-panel-accent) 12%, transparent);
}

.auth-panel-login-card .btn-primary {
    background: var(--auth-panel-deep);
    border-color: var(--auth-panel-deep);
    border-radius: 8px;
    font-size: .8rem;
    min-height: 48px;
}

.auth-panel-login-card .btn-outline-primary {
    border-color: var(--auth-panel-accent);
    color: var(--auth-panel-accent);
}

.auth-panel-security-note {
    align-items: center;
    background: var(--auth-panel-soft);
    border: 1px solid color-mix(in srgb, var(--auth-panel-accent) 12%, transparent);
    border-radius: 9px;
    display: flex;
    gap: .7rem;
    margin-top: 1.5rem;
    padding: .75rem .85rem;
}

.auth-panel-security-note>i {
    color: var(--auth-panel-accent);
    font-size: 1.2rem;
}

.auth-panel-security-note>span {
    display: grid;
    gap: .18rem;
}

.auth-panel-security-note strong {
    color: var(--auth-panel-deep);
    font-size: .68rem;
}

.auth-panel-security-note small {
    color: #728094;
    font-size: .57rem;
}

.auth-panel-alert {
    border: 0;
    border-radius: 8px;
    font-size: .68rem;
    padding: .7rem .8rem;
}

.auth-formal-panel-shell .auth-modern-grid {
    grid-template-columns: minmax(0, 1fr) 470px;
    min-height: 640px;
}

.auth-access-card {
    padding: clamp(1.75rem, 3.2vw, 3rem);
}

.auth-access-card .auth-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.auth-access-card .auth-card-head>div {
    display: grid;
    gap: .12rem;
}

.auth-access-card .auth-tabs {
    margin-bottom: 1.15rem !important;
}

.auth-access-card .auth-tabs .nav-link {
    align-items: center;
    display: flex;
    gap: .4rem;
    justify-content: center;
    min-height: 42px;
}

.auth-access-card .auth-tabs .nav-link i {
    font-size: .9rem;
}

.auth-access-form {
    display: grid;
    gap: .85rem;
}

.auth-field {
    display: grid;
    gap: .35rem;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap>i {
    color: #8794a5;
    font-size: 1rem;
    pointer-events: none;
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.auth-access-card .auth-input-wrap .form-control {
    min-height: 50px;
    padding-right: 2.65rem;
}

.auth-access-card .auth-input-wrap .form-control[dir="ltr"] {
    padding-left: .8rem;
    text-align: right;
}

.auth-access-card .auth-field .invalid-feedback {
    display: block;
    font-size: .58rem;
}

.auth-remember-row {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    display: flex;
    margin: 0;
    min-height: 42px;
    padding: .55rem .7rem;
}

.auth-remember-row .form-check-input {
    margin: 0 0 0 .5rem;
}

.auth-remember-row .form-check-label {
    color: #5d6b7c;
    font-size: .65rem;
}

.auth-access-card .auth-access-form>.btn {
    align-items: center;
    display: flex;
    gap: .45rem;
    justify-content: center;
    min-height: 48px;
}

.auth-otp-guide {
    align-items: center;
    display: flex;
    gap: .55rem;
    margin-bottom: .65rem;
}

.auth-otp-guide>span {
    align-items: center;
    background: var(--auth-panel-soft);
    border: 1px solid color-mix(in srgb, var(--auth-panel-accent) 15%, transparent);
    border-radius: 8px;
    color: var(--auth-panel-accent);
    display: flex;
    font-size: .65rem;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.auth-otp-guide>div {
    display: grid;
    gap: .08rem;
}

.auth-otp-guide strong {
    color: var(--auth-panel-deep);
    font-size: .65rem;
}

.auth-otp-guide small {
    color: #8390a0;
    font-size: .52rem;
}

.auth-otp-divider {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin: .85rem 0;
}

.auth-otp-divider::before,
.auth-otp-divider::after {
    background: #e6ebf1;
    content: "";
    flex: 1;
    height: 1px;
}

.auth-otp-divider span {
    color: #9aa5b2;
    font-size: .48rem;
}

.auth-otp-input input {
    font-size: 1rem !important;
    font-weight: 800;
    letter-spacing: .25em;
}

html[data-panel-theme="dark"] .auth-panel-page {
    background: #0d1723;
}

html[data-panel-theme="dark"] .auth-formal-panel-shell {
    background: radial-gradient(circle at 12% 16%, rgba(49, 95, 141, .16), transparent 30%), #0d1723;
}

html[data-panel-theme="dark"] .auth-formal-panel-shell .auth-modern-grid {
    background: #142131;
    border-color: #2a3b4e;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
}

html[data-panel-theme="dark"] .auth-panel-login-card {
    background: #142131;
}

html[data-panel-theme="dark"] .auth-panel-login-card .auth-card-head {
    border-color: #2b3b4d;
}

html[data-panel-theme="dark"] .auth-panel-login-card .auth-card-head h2,
html[data-panel-theme="dark"] .auth-panel-login-card .form-label {
    color: #e9f0f8;
}

html[data-panel-theme="dark"] .auth-panel-login-card .auth-card-head span,
html[data-panel-theme="dark"] .auth-panel-security-note small {
    color: #91a1b3;
}

html[data-panel-theme="dark"] .auth-panel-login-card .auth-tabs,
html[data-panel-theme="dark"] .auth-panel-login-card .form-control {
    background: #0f1b28;
    border-color: #2b3b4d;
    color: #e5edf5;
}

html[data-panel-theme="dark"] .auth-remember-row {
    background: #0f1b28;
    border-color: #2b3b4d;
}

html[data-panel-theme="dark"] .auth-remember-row .form-check-label,
html[data-panel-theme="dark"] .auth-otp-guide small {
    color: #94a2b2;
}

html[data-panel-theme="dark"] .auth-otp-guide strong {
    color: #eaf1f8;
}

html[data-panel-theme="dark"] .auth-otp-divider::before,
html[data-panel-theme="dark"] .auth-otp-divider::after {
    background: #2b3b4d;
}

/* Friendly standalone client portal ----------------------------------- */
.client-portal-body {
    --panel-accent: #6256d9;
    --client-bg: #f4f5fb;
    --client-surface: #fff;
    --client-surface-soft: #f8f8fc;
    --client-border: #e5e6f0;
    --client-text: #24243b;
    --client-muted: #77788d;
    --panel-bg: var(--client-bg);
    --panel-surface: var(--client-surface);
    --panel-surface-soft: var(--client-surface-soft);
    --panel-border: var(--client-border);
    --panel-text: var(--client-text);
    --panel-muted: var(--client-muted);
    --panel-accent-soft: #eceafb;
    --bs-body-font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    background: var(--client-bg);
    color: var(--client-text);
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: 0;
    position: relative;
}

.client-portal-body :is(button, input, select, textarea, .btn, .table, .select2-container, .swal2-popup, .plyr) {
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif !important;
}

.client-portal-glow {
    border-radius: 50%;
    filter: blur(3px);
    opacity: .55;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.client-portal-glow-one {
    background: rgba(98, 86, 217, .12);
    height: 360px;
    left: -180px;
    top: 70px;
    width: 360px;
}

.client-portal-glow-two {
    background: rgba(32, 184, 166, .1);
    bottom: -160px;
    height: 420px;
    right: -200px;
    width: 420px;
}

.client-portal-container {
    margin-inline: auto;
    max-width: 1420px;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
}

.client-portal-header {
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(225, 226, 237, .9);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.client-portal-header-inner {
    align-items: center;
    display: flex;
    gap: clamp(1rem, 2.4vw, 2.5rem);
    min-height: 78px;
}

.client-portal-brand {
    align-items: center;
    color: var(--client-text);
    display: flex;
    flex: 0 0 auto;
    gap: .7rem;
    text-decoration: none;
}

.client-portal-brand-mark {
    align-items: center;
    background: linear-gradient(135deg, #7065e7, #5145c4);
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(98, 86, 217, .22);
    color: #fff;
    display: flex;
    height: 44px;
    justify-content: center;
    overflow: hidden;
    width: 44px;
}

.client-portal-brand-mark img {
    background: #fff;
    height: 100%;
    object-fit: contain;
    padding: 5px;
    width: 100%;
}

.client-portal-brand>span:last-child {
    display: grid;
    gap: .12rem;
}

.client-portal-brand strong {
    font-size: .86rem;
}

.client-portal-brand small {
    color: var(--client-muted);
    font-size: .57rem;
}

.client-portal-nav {
    align-items: center;
    display: flex;
    flex: 1;
    gap: .25rem;
}

.client-portal-nav a {
    align-items: center;
    border-radius: 9px;
    color: #696a7c;
    display: flex;
    font-size: .71rem;
    font-weight: 680;
    gap: .42rem;
    padding: .65rem .75rem;
    text-decoration: none;
    transition: .18s ease;
}

.client-portal-nav a i {
    font-size: 1rem;
}

.client-portal-nav a:hover {
    background: #f2f1fb;
    color: #554ac8;
}

.client-portal-nav a.active {
    background: #eceafb;
    color: #554ac8;
}

.client-portal-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.client-portal-action {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    color: var(--client-text);
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.client-portal-user {
    align-items: center;
    border-right: 1px solid var(--client-border);
    display: flex;
    gap: .55rem;
    margin-right: .15rem;
    padding-right: .7rem;
}

.client-portal-avatar {
    align-items: center;
    background: linear-gradient(135deg, #1fb6a6, #0e8d83);
    border-radius: 12px;
    color: #fff;
    display: flex;
    font-size: .85rem;
    font-weight: 850;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.client-portal-user>span:nth-child(2) {
    display: grid;
    gap: .1rem;
    min-width: 90px;
}

.client-portal-user strong {
    font-size: .7rem;
}

.client-portal-user small {
    color: var(--client-muted);
    font-size: .54rem;
}

.client-portal-user form button {
    background: transparent;
    border: 0;
    color: #9293a5;
    padding: .4rem;
}

.client-portal-main {
    min-height: calc(100vh - 78px);
    padding: 1.65rem 0 3rem;
    position: relative;
    z-index: 1;
}

.client-portal-pagehead {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.client-portal-pagehead>div span {
    color: #908fa3;
    font-size: .58rem;
}

.client-portal-pagehead h1 {
    color: var(--client-text);
    font-size: 1.1rem;
    font-weight: 900;
    margin: .2rem 0 0;
}

.client-portal-pagehead>a {
    color: var(--client-muted);
    font-size: .66rem;
    text-decoration: none;
}

.client-portal-alert {
    border: 0;
    border-radius: 12px;
    font-size: .75rem;
}

.client-mobile-nav {
    display: none;
}

.client-welcome-card {
    background: linear-gradient(115deg, #6256d9 0%, #5145c4 58%, #3f36a5 100%);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(78, 67, 181, .22);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 260px;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 3rem);
    position: relative;
}

.client-welcome-card::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .13) 0 1px, transparent 2px) 0 0/20px 20px;
    content: "";
    inset: 0;
    opacity: .5;
    pointer-events: none;
    position: absolute;
}

.client-welcome-copy {
    align-self: center;
    position: relative;
    z-index: 1;
}

.client-welcome-eyebrow {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    display: inline-flex;
    font-size: .62rem;
    gap: .35rem;
    padding: .36rem .65rem;
}

.client-welcome-copy h2 {
    color: #fff;
    font-size: clamp(1.35rem, 2.7vw, 2.15rem);
    line-height: 1.65;
    margin: .75rem 0 .45rem;
}

.client-welcome-copy p {
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    line-height: 2;
    margin: 0;
}

.client-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.3rem;
}

.client-welcome-actions .btn {
    border: 0;
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 750;
    padding: .65rem .9rem;
}

.btn-client-ghost {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.btn-client-ghost:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.client-welcome-visual {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.client-welcome-visual>span {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 34% 66% 65% 35% / 40% 38% 62% 60%;
    display: flex;
    font-size: 4.2rem;
    height: 165px;
    justify-content: center;
    transform: rotate(-5deg);
    width: 165px;
}

.client-welcome-visual>span i {
    transform: rotate(5deg);
}

.client-welcome-visual>i {
    align-items: center;
    background: #fff;
    border-radius: 12px;
    color: #6256d9;
    display: flex;
    height: 42px;
    justify-content: center;
    position: absolute;
    width: 42px;
}

.client-welcome-visual>i:nth-of-type(1) {
    right: 5px;
    top: 20px;
    transform: rotate(8deg);
}

.client-welcome-visual>i:nth-of-type(2) {
    bottom: 12px;
    left: 20px;
    transform: rotate(-8deg);
}

.client-stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1.1rem 0;
}

.client-stat-card {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 16px;
    display: flex;
    gap: .85rem;
    min-height: 118px;
    padding: 1.1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.client-stat-card:hover {
    box-shadow: 0 12px 28px rgba(44, 43, 77, .08);
    transform: translateY(-3px);
}

.client-stat-card>span {
    align-items: center;
    background: #eeecff;
    border-radius: 13px;
    color: #6256d9;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.client-stat-card.is-wallet>span {
    background: #e4f7f3;
    color: #139a8c;
}

.client-stat-card.is-free>span {
    background: #fff2df;
    color: #d88a20;
}

.client-stat-card.is-discover>span {
    background: #e9f2ff;
    color: #3378c8;
}

.client-stat-card>div {
    display: grid;
    gap: .08rem;
}

.client-stat-card small {
    color: var(--client-muted);
    font-size: .59rem;
}

.client-stat-card strong {
    color: var(--client-text);
    font-size: 1.25rem;
}

.client-stat-card em {
    color: #a0a1af;
    font-size: .52rem;
    font-style: normal;
}

.client-dashboard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
}

.client-dashboard-block,
.client-quick-block,
.client-recommendations {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 18px;
    padding: 1.25rem;
}

.client-block-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.client-block-head>div span {
    color: #9595a7;
    font-size: .54rem;
}

.client-block-head h3 {
    color: var(--client-text);
    font-size: .9rem;
    margin: .2rem 0 0;
}

.client-block-head>a {
    color: #6256d9;
    font-size: .62rem;
    text-decoration: none;
}

.client-order-list {
    display: grid;
    gap: .55rem;
}

.client-order-item {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--client-text);
    display: grid;
    gap: .75rem;
    grid-template-columns: 42px minmax(120px, 1fr) auto auto 16px;
    padding: .7rem;
    text-decoration: none;
    transition: .18s ease;
}

.client-order-item:hover {
    border-color: #dcd9fa;
    color: var(--client-text);
    transform: translateX(-2px);
}

.client-order-icon {
    align-items: center;
    background: #eceafb;
    border-radius: 10px;
    color: #6256d9;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.client-order-item>span:nth-child(2) {
    display: grid;
    gap: .15rem;
}

.client-order-item strong {
    font-size: .68rem;
}

.client-order-item small {
    color: var(--client-muted);
    font-size: .54rem;
}

.client-order-item em {
    background: #f0f1f5;
    border-radius: 999px;
    color: #797b8c;
    font-size: .52rem;
    font-style: normal;
    padding: .28rem .5rem;
}

.client-order-item em.is-paid {
    background: #e5f7ef;
    color: #19835d;
}

.client-order-item b {
    font-size: .66rem;
    white-space: nowrap;
}

.client-order-item b small {
    font-size: .48rem;
}

.client-order-item>i {
    color: #aaaabd;
}

.client-friendly-empty {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px dashed var(--client-border);
    border-radius: 14px;
    display: flex;
    gap: .8rem;
    padding: 1rem;
}

.client-friendly-empty>span {
    align-items: center;
    background: #eceafb;
    border-radius: 12px;
    color: #6256d9;
    display: flex;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.client-friendly-empty>div {
    flex: 1;
}

.client-friendly-empty strong {
    font-size: .7rem;
}

.client-friendly-empty p {
    color: var(--client-muted);
    font-size: .55rem;
    margin: .2rem 0 0;
}

.client-friendly-empty>a {
    color: #6256d9;
    font-size: .6rem;
    text-decoration: none;
}

.client-friendly-empty-wide {
    grid-column: 1 / -1;
    min-height: 130px;
    width: 100%;
}

.client-section-intro {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 18px;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.25rem;
}

.client-section-intro-icon {
    align-items: center;
    background: #eceafb;
    border-radius: 14px;
    color: #6256d9;
    display: flex;
    font-size: 1.45rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.client-section-intro-icon.is-purchase {
    background: #e4f7f3;
    color: #139a8c;
}

.client-section-intro>div:nth-child(2) {
    display: grid;
    gap: .15rem;
}

.client-section-intro span {
    color: var(--client-muted);
    font-size: .55rem;
}

.client-section-intro h2 {
    color: var(--client-text);
    font-size: .92rem;
    margin: 0;
}

.client-section-intro p {
    color: var(--client-muted);
    font-size: .62rem;
    margin: 0;
}

.client-section-actions {
    display: flex;
    gap: .5rem;
}

.client-purchase-list {
    display: grid;
    gap: .85rem;
}

.client-purchase-card {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 17px;
    overflow: hidden;
}

.client-purchase-card>header {
    align-items: center;
    border-bottom: 1px solid var(--client-border);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: .9rem 1rem;
}

.client-purchase-number {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.client-purchase-number>span {
    align-items: center;
    background: #eceafb;
    border-radius: 10px;
    color: #6256d9;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.client-purchase-number>div {
    display: grid;
}

.client-purchase-number small,
.client-purchase-card time {
    color: var(--client-muted);
    font-size: .54rem;
}

.client-purchase-number strong {
    color: var(--client-text);
    direction: ltr;
    font-size: .8rem;
    text-align: right;
}

.client-purchase-status {
    background: #f0f1f5;
    border-radius: 999px;
    color: #77798a;
    font-size: .54rem;
    padding: .32rem .6rem;
}

.client-purchase-status.is-paid {
    background: #e5f7ef;
    color: #19835d;
}

.client-purchase-card time {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.client-purchase-items {
    display: grid;
    gap: .55rem;
    padding: .8rem 1rem;
}

.client-purchase-items>div {
    align-items: center;
    background: var(--client-surface-soft);
    border-radius: 11px;
    display: flex;
    gap: .65rem;
    padding: .65rem;
}

.client-purchase-items>div>span {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    color: #6256d9;
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.client-purchase-items>div>div {
    display: grid;
    gap: .1rem;
}

.client-purchase-items small {
    color: var(--client-muted);
    font-size: .5rem;
}

.client-purchase-items strong {
    color: var(--client-text);
    font-size: .65rem;
}

.client-purchase-card>footer {
    align-items: center;
    background: var(--client-surface-soft);
    border-top: 1px solid var(--client-border);
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .75rem 1rem;
}

.client-purchase-card>footer span {
    color: var(--client-muted);
    font-size: .55rem;
}

.client-purchase-card>footer strong {
    color: #6256d9;
    font-size: .8rem;
}

.client-purchase-card>footer small {
    font-size: .5rem;
}

.client-quick-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-quick-grid a {
    background: var(--client-surface-soft);
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--client-text);
    display: grid;
    min-height: 112px;
    padding: .85rem;
    text-decoration: none;
    transition: .18s ease;
}

.client-quick-grid a:hover {
    border-color: #dcd9fa;
    transform: translateY(-2px);
}

.client-quick-grid a>span {
    align-items: center;
    background: #eceafb;
    border-radius: 9px;
    color: #6256d9;
    display: flex;
    height: 34px;
    justify-content: center;
    margin-bottom: .5rem;
    width: 34px;
}

.client-quick-grid strong {
    font-size: .65rem;
}

.client-quick-grid small {
    color: var(--client-muted);
    font-size: .51rem;
    margin-top: .1rem;
}

.client-recommendations {
    margin-top: 1rem;
}

.client-recommendation-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.client-recommendation-card {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 14px;
    color: var(--client-text);
    overflow: hidden;
    text-decoration: none;
    transition: .2s ease;
}

.client-recommendation-card:hover {
    box-shadow: 0 12px 30px rgba(43, 42, 76, .09);
    color: var(--client-text);
    transform: translateY(-3px);
}

.client-recommendation-image {
    display: block;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.client-recommendation-image img {
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.client-recommendation-card:hover img {
    transform: scale(1.04);
}

.client-recommendation-image i {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    bottom: 10px;
    color: #6256d9;
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 10px;
    width: 32px;
}

.client-recommendation-body {
    display: grid;
    gap: .2rem;
    padding: .75rem;
}

.client-recommendation-body small {
    color: var(--client-muted);
    font-size: .5rem;
}

.client-recommendation-body strong {
    font-size: .68rem;
    line-height: 1.8;
}

.client-recommendation-body em {
    color: #6256d9;
    font-size: .6rem;
    font-style: normal;
    font-weight: 750;
}

.client-portal-body .panel-card {
    background: var(--client-surface);
    border-color: var(--client-border);
    border-radius: 18px;
    box-shadow: none;
    color: var(--client-text);
}

.client-portal-body .client-quiz-hero {
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(23, 43, 67, .14);
    padding: 1.5rem;
}

.client-portal-body .client-quiz-hero h2 {
    font-size: 1.25rem;
}

.client-portal-body .client-quiz-hero p {
    font-size: .7rem;
    line-height: 1.9;
}

.client-portal-body .client-quiz-summary article {
    border-radius: 11px;
    padding: .7rem;
}

.client-portal-body .client-quiz-summary strong {
    font-size: .9rem;
}

.client-portal-body .client-quiz-summary span {
    font-size: .55rem;
}

.client-portal-body .client-quiz-section-head h3 {
    font-size: .85rem;
}

.client-portal-body .client-quiz-section-head p {
    font-size: .58rem;
}

.client-portal-body .client-quiz-card {
    background: var(--client-surface);
    border-color: var(--client-border);
    border-radius: 15px;
    padding: .8rem;
}

.client-portal-body .client-quiz-card h3 {
    color: var(--client-text);
    font-size: .72rem;
}

.client-portal-body .client-quiz-card p {
    color: var(--client-muted);
    font-size: .55rem;
}

.client-portal-body .learning-course-card,
.client-portal-body .learning-layout,
.client-portal-body .learning-hero-panel {
    border-color: var(--client-border);
    border-radius: 18px;
    box-shadow: none;
}

.client-portal-body .learning-course-card {
    background: var(--client-surface);
}

.client-portal-body .learning-course-thumb {
    border-radius: 14px 14px 0 0;
}

.client-portal-body .certificate-client-card {
    border-radius: 16px;
}

.client-portal-body :is(.admin-table, .table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--client-text);
}

.client-portal-body .admin-table thead th {
    background: var(--client-surface-soft);
    color: var(--client-muted);
}

.client-portal-body .text-secondary {
    color: var(--client-muted) !important;
}

.client-portal-body .btn-primary {
    background: #6256d9;
    border-color: #6256d9;
}

.client-portal-body .btn-outline-primary {
    border-color: #6256d9;
    color: #6256d9;
}

.client-portal-body .pagination .page-link {
    background: var(--client-surface);
    border-color: var(--client-border);
    color: var(--client-text);
}

html[data-panel-theme="dark"] .client-portal-body {
    --client-bg: #11121b;
    --client-surface: #191a26;
    --client-surface-soft: #20212e;
    --client-border: #303142;
    --client-text: #f2f2f8;
    --client-muted: #9b9caf;
    --panel-bg: var(--client-bg);
    --panel-surface: var(--client-surface);
    --panel-surface-soft: var(--client-surface-soft);
    --panel-border: var(--client-border);
    --panel-text: var(--client-text);
    --panel-muted: var(--client-muted);
    --panel-accent-soft: #29273f;
}

html[data-panel-theme="dark"] .client-portal-header {
    background: rgba(25, 26, 38, .88);
    border-color: #303142;
}

html[data-panel-theme="dark"] .client-portal-nav a:hover,
html[data-panel-theme="dark"] .client-portal-nav a.active {
    background: #29273f;
    color: #aea7ff;
}

html[data-panel-theme="dark"] .client-portal-action {
    color: #e8e8f1;
}

html[data-panel-theme="dark"] .client-stat-card:hover,
html[data-panel-theme="dark"] .client-recommendation-card:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}

html[data-panel-theme="dark"] .client-portal-body .btn-light {
    background: #292a37;
    border-color: #393a48;
    color: #f0f0f5;
}

html[data-panel-theme="dark"] .client-portal-body .form-control,
html[data-panel-theme="dark"] .client-portal-body .form-select {
    background: #20212e;
    border-color: #353646;
    color: #f0f0f5;
}

/* Admin lesson editor modal -------------------------------------------- */
.admin-lesson-modal .modal-dialog {
    max-width: 1080px;
}

.admin-lesson-modal .lesson-modal-content {
    background: var(--panel-surface, #fff);
    border: 1px solid var(--panel-border, #dfe6ed);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(13, 31, 52, .24);
    overflow: hidden;
}

.admin-lesson-modal .modal-header {
    align-items: center;
    background: linear-gradient(135deg, #18314d, #254a70);
    border: 0;
    color: #fff;
    min-height: 94px;
    padding: 1.15rem 1.35rem;
}

.admin-lesson-modal .btn-close {
    filter: brightness(0) invert(1);
    opacity: .7;
}

.lesson-modal-heading {
    align-items: center;
    display: flex;
    gap: .85rem;
}

.lesson-modal-heading>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 11px;
    display: flex;
    font-size: 1.15rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.lesson-modal-heading>div {
    display: grid;
    gap: .2rem;
}

.lesson-modal-heading small {
    color: rgba(255, 255, 255, .58);
    font-size: .6rem;
}

.lesson-modal-heading .modal-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
    margin: 0;
}

.admin-lesson-modal .modal-body {
    background: var(--panel-bg, #f4f6f8);
    max-height: min(72vh, 760px);
    overflow-y: auto;
    padding: 1.2rem;
}

.lesson-modal-notice {
    align-items: center;
    background: var(--panel-surface, #fff);
    border: 1px solid var(--panel-border, #dfe6ed);
    border-right: 3px solid var(--panel-accent, #315f8d);
    border-radius: 9px;
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .8rem .9rem;
}

.lesson-modal-notice>i {
    align-items: center;
    background: var(--panel-accent-soft, #eaf1f8);
    border-radius: 8px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    font-size: 1.05rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.lesson-modal-notice>span {
    display: grid;
    gap: .15rem;
}

.lesson-modal-notice strong {
    color: var(--panel-text, #17283d);
    font-size: .72rem;
}

.lesson-modal-notice small {
    color: var(--panel-muted, #738094);
    font-size: .6rem;
}

.admin-lesson-modal .modal-body .row>[class*="col-"] {
    background: var(--panel-surface, #fff);
    border: 1px solid var(--panel-border, #e0e6ed);
    border-radius: 10px;
    padding: .85rem;
}

.admin-lesson-modal .modal-body .row {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin: 0;
}

.admin-lesson-modal .modal-body .row>.col-md-3 {
    grid-column: span 3;
    width: auto;
}

.admin-lesson-modal .modal-body .row>.col-md-6 {
    grid-column: span 6;
    width: auto;
}

.admin-lesson-modal .modal-body .row>.col-12 {
    grid-column: 1 / -1;
    width: auto;
}

.admin-lesson-modal .form-label {
    align-items: center;
    color: var(--panel-text, #26384d);
    display: flex;
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.admin-lesson-modal :is(.form-control, .form-select) {
    background-color: var(--panel-surface-soft, #f8fafc);
    border-color: var(--panel-border, #dfe6ed);
    border-radius: 7px;
    min-height: 43px;
}

.admin-lesson-modal textarea.form-control {
    min-height: 105px;
}

.admin-lesson-modal .modal-footer {
    background: var(--panel-surface, #fff);
    border-color: var(--panel-border, #e0e6ed);
    gap: .5rem;
    padding: .85rem 1.2rem;
}

.admin-lesson-modal .modal-footer .btn {
    border-radius: 7px;
    min-width: 110px;
}

.admin-lesson-modal .lesson-video-preview {
    border-radius: 9px;
    margin-top: .65rem !important;
    padding: .65rem;
}

/* Scalable certificate document and PDF background --------------------- */
.certificate-page {
    container-type: inline-size;
    padding: 4.5% 5.5%;
}

.certificate-page-header {
    justify-content: flex-start;
    min-height: 31%;
}

.certificate-brand-row {
    margin-bottom: 2%;
}

.certificate-logo-frame {
    height: 10.5cqw;
    max-height: 100px;
    min-height: 52px;
    min-width: 15cqw;
}

.certificate-header-label {
    font-size: 1.45cqw;
    margin-bottom: .65%;
}

.certificate-issue-meta {
    padding-block: .72%;
}

.certificate-issue-meta small {
    font-size: 1.5cqw;
}

.certificate-issue-meta strong {
    font-size: 2.05cqw;
}

.certificate-page-header h1 {
    font-size: 4.8cqw;
    line-height: 1.5;
    margin-bottom: .85%;
}

.certificate-page-header>.certificate-rich-content {
    font-size: 1.68cqw;
    line-height: 1.8;
}

.certificate-page-body {
    font-size: 2.15cqw;
    line-height: 2.15;
    padding: 1.2% 1%;
}

.certificate-signature-image {
    height: 6.3cqw;
    max-height: 62px;
}

.certificate-signature-block small {
    font-size: 1cqw;
}

.certificate-footer-content {
    font-size: 1.36cqw;
}

.certificate-qr-placeholder {
    height: 6.3cqw;
    max-height: 62px;
    max-width: 62px;
    width: 6.3cqw;
}

.certificate-qr-block strong {
    font-size: .92cqw;
}

.certificate-qr-block small {
    font-size: .78cqw;
}

.certificate-page.is-landscape {
    padding: 3.7% 5%;
}

.certificate-page.is-landscape .certificate-page-header {
    min-height: 29%;
}

.certificate-page.is-landscape .certificate-logo-frame {
    height: 6.5cqw;
    max-height: 84px;
    min-width: 10cqw;
}

.certificate-page.is-landscape .certificate-page-header h1 {
    font-size: 3.35cqw;
}

.certificate-page.is-landscape .certificate-page-header>.certificate-rich-content {
    font-size: 1.18cqw;
}

.certificate-page.is-landscape .certificate-page-body {
    font-size: 1.55cqw;
}

.certificate-page.is-landscape .certificate-issue-meta small {
    font-size: 1.1cqw;
}

.certificate-page.is-landscape .certificate-issue-meta strong {
    font-size: 1.45cqw;
}

.certificate-page.is-landscape .certificate-footer-content {
    font-size: 1cqw;
}

@media (max-width: 1050px) {
    .auth-formal-panel-shell .auth-modern-grid {
        grid-template-columns: 1fr 420px;
    }

    .auth-formal-panel-shell .auth-copy {
        padding: 2rem;
    }

    .client-portal-nav {
        display: none;
    }

    .client-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .auth-formal-panel-shell {
        padding: 0;
    }

    .auth-formal-panel-shell .auth-modern-grid {
        border: 0;
        border-radius: 0;
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .auth-formal-panel-shell .auth-copy {
        min-height: 280px;
        padding: 1.35rem;
    }

    .auth-panel-brandline {
        margin-bottom: 2rem;
    }

    .auth-role-emblem {
        display: none;
    }

    .auth-formal-panel-shell .auth-copy h1 {
        font-size: 1.35rem;
        margin-bottom: .35rem;
    }

    .auth-formal-panel-shell .auth-copy>p {
        font-size: .7rem;
        line-height: 1.9;
    }

    .auth-panel-capabilities {
        display: none;
    }

    .auth-formal-panel-shell .auth-role-links {
        margin-top: .8rem;
        padding-top: 0;
    }

    .auth-panel-login-card {
        padding: 1.35rem;
    }

    .client-portal-header-inner {
        min-height: 68px;
    }

    .client-portal-brand>span:last-child,
    .client-portal-user>span:nth-child(2),
    .client-portal-user form {
        display: none;
    }

    .client-portal-user {
        border: 0;
        padding: 0;
    }

    .client-portal-main {
        padding-bottom: 6rem;
    }

    .client-portal-pagehead {
        margin-bottom: .9rem;
    }

    .client-welcome-card {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 1.4rem;
    }

    .client-welcome-visual {
        display: none;
    }

    .client-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-stat-card {
        align-items: flex-start;
        flex-direction: column;
        min-height: 145px;
    }

    .client-order-item {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .client-order-item>em,
    .client-order-item>i {
        display: none;
    }

    .client-order-item>b {
        grid-column: 2;
    }

    .client-recommendation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-section-intro {
        align-items: start;
        grid-template-columns: auto 1fr;
    }

    .client-section-intro> :last-child {
        grid-column: 1 / -1;
    }

    .client-purchase-card>header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .client-purchase-card time {
        grid-column: 1 / -1;
    }

    .client-mobile-nav {
        align-items: center;
        background: rgba(255, 255, 255, .93);
        border: 1px solid #e5e6f0;
        border-radius: 18px;
        bottom: .7rem;
        box-shadow: 0 12px 34px rgba(37, 36, 65, .16);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        left: .7rem;
        overflow: hidden;
        position: fixed;
        right: .7rem;
        z-index: 80;
    }

    .client-mobile-nav a {
        align-items: center;
        color: #858699;
        display: flex;
        flex-direction: column;
        font-size: .48rem;
        gap: .18rem;
        padding: .6rem .2rem;
        text-decoration: none;
    }

    .client-mobile-nav a i {
        font-size: 1rem;
    }

    .client-mobile-nav a.active {
        background: #f0eefe;
        color: #6256d9;
    }

    html[data-panel-theme="dark"] .client-mobile-nav {
        background: rgba(25, 26, 38, .95);
        border-color: #303142;
    }

    html[data-panel-theme="dark"] .client-mobile-nav a.active {
        background: #29273f;
        color: #aea7ff;
    }

    .admin-lesson-modal .modal-dialog {
        margin: .5rem;
    }

    .admin-lesson-modal .modal-body .row {
        display: block;
    }

    .admin-lesson-modal .modal-body .row>[class*="col-"] {
        margin-bottom: .7rem;
    }
}

@media (max-width: 480px) {
    .client-portal-container {
        padding-inline: .75rem;
    }

    .client-portal-action:first-child {
        display: none;
    }

    .client-stat-grid {
        gap: .65rem;
    }

    .client-stat-card {
        padding: .8rem;
    }

    .client-quick-grid {
        grid-template-columns: 1fr 1fr;
    }

    .client-recommendation-grid {
        grid-template-columns: 1fr;
    }

    .client-friendly-empty {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

/* Client navigation, library and profile refresh ----------------------- */
.client-menu-trigger {
    align-items: center;
    background: linear-gradient(135deg, #6256d9, #5145c4);
    border: 0;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(98, 86, 217, .2);
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .05rem;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 48px;
}

.client-menu-trigger i {
    font-size: 1.25rem;
    line-height: 1;
}

.client-menu-trigger span {
    font-size: .45rem;
    font-weight: 800;
}

.client-button-navigation {
    gap: .4rem;
    justify-content: center;
}

.client-button-navigation a {
    align-items: center;
    border: 1px solid transparent;
    display: grid;
    gap: .42rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 50px;
    padding: .4rem .5rem;
}

.client-button-navigation a>i {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    display: flex;
    font-size: .88rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.client-button-navigation a>span {
    display: grid;
    line-height: 1.55;
}

.client-button-navigation a strong {
    color: var(--client-text);
    font-size: .61rem;
    white-space: nowrap;
}

.client-button-navigation a small {
    color: var(--client-muted);
    font-size: .47rem;
    white-space: nowrap;
}

.client-button-navigation a:hover,
.client-button-navigation a.active {
    border-color: #dcd9fa;
    box-shadow: 0 5px 14px rgba(54, 47, 127, .06);
}

.client-button-navigation a.active>i {
    background: #6256d9;
    border-color: #6256d9;
    color: #fff;
}

.client-portal-user {
    border: 1px solid var(--client-border);
    border-radius: 11px;
    color: var(--client-text);
    margin: 0;
    padding: .28rem .35rem;
    text-decoration: none;
}

.client-portal-user:hover,
.client-portal-user.active {
    background: var(--client-surface-soft);
    color: var(--client-text);
}

.client-portal-user>i {
    color: var(--client-muted);
    font-size: .6rem;
}

.client-portal-avatar {
    overflow: hidden;
}

.client-portal-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.client-navigation-backdrop {
    background: rgba(15, 17, 31, .48);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .22s ease;
    visibility: hidden;
    z-index: 119;
}

.client-navigation-drawer {
    background: var(--client-surface);
    border-left: 1px solid var(--client-border);
    box-shadow: -20px 0 60px rgba(22, 22, 44, .18);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 92vw;
    overflow-y: auto;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(105%);
    transition: transform .24s ease;
    width: 360px;
    z-index: 120;
}

.client-navigation-open {
    overflow: hidden !important;
}

.client-navigation-open .client-navigation-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.client-navigation-open .client-navigation-drawer {
    transform: none;
}

.client-navigation-drawer>header {
    align-items: center;
    background: linear-gradient(125deg, #29245e, #5148b4);
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 108px;
    padding: 1rem;
}

.client-navigation-drawer>header>button {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    color: #fff;
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.client-drawer-user {
    align-items: center;
    display: flex;
    gap: .7rem;
    min-width: 0;
}

.client-drawer-user>span {
    align-items: center;
    background: #fff;
    border: 3px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    color: #5148b4;
    display: flex;
    flex: 0 0 52px;
    font-size: 1rem;
    font-weight: 900;
    height: 52px;
    justify-content: center;
    overflow: hidden;
    width: 52px;
}

.client-drawer-user>span img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.client-drawer-user>div {
    display: grid;
    min-width: 0;
}

.client-drawer-user small {
    color: #bdb9ef;
    font-size: .5rem;
}

.client-drawer-user strong {
    font-size: .72rem;
    margin: .12rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-drawer-user em {
    color: #d3d1f1;
    direction: ltr;
    font-size: .53rem;
    font-style: normal;
    text-align: right;
}

.client-drawer-context {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    display: flex;
    gap: .55rem;
    margin: .8rem .8rem 0;
    padding: .65rem;
}

.client-drawer-context>i {
    align-items: center;
    background: #eceafb;
    border-radius: 8px;
    color: #6256d9;
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.client-drawer-context>span {
    display: grid;
}

.client-drawer-context strong {
    color: var(--client-text);
    font-size: .59rem;
}

.client-drawer-context small {
    color: var(--client-muted);
    font-size: .48rem;
    margin-top: .08rem;
}

.client-drawer-nav {
    display: grid;
    gap: .25rem;
    padding: .7rem .8rem;
}

.client-drawer-nav>span {
    color: var(--client-muted);
    font-size: .48rem;
    font-weight: 850;
    padding: .7rem .45rem .25rem;
}

.client-drawer-nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--client-text);
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr) 14px;
    min-height: 52px;
    padding: .42rem;
    text-decoration: none;
}

.client-drawer-nav a>i:first-child {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    color: #6256d9;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.client-drawer-nav a>span {
    display: grid;
}

.client-drawer-nav a strong {
    font-size: .61rem;
}

.client-drawer-nav a small {
    color: var(--client-muted);
    font-size: .48rem;
    margin-top: .08rem;
}

.client-drawer-nav a>i:last-child {
    color: #aaaabd;
    font-size: .58rem;
}

.client-drawer-nav a:hover,
.client-drawer-nav a.active {
    background: #f3f2fc;
    border-color: #e0ddfa;
}

.client-drawer-nav a.active>i:first-child {
    background: #6256d9;
    border-color: #6256d9;
    color: #fff;
}

.client-navigation-drawer>footer {
    border-top: 1px solid var(--client-border);
    display: grid;
    gap: .4rem;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
    padding: .8rem;
}

.client-navigation-drawer>footer>a,
.client-navigation-drawer>footer button {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    color: var(--client-text);
    display: flex;
    font-size: .54rem;
    gap: .3rem;
    justify-content: center;
    min-height: 38px;
    padding: .4rem;
    text-decoration: none;
    width: 100%;
}

.client-navigation-drawer>footer form {
    grid-column: 1/-1;
}

.client-navigation-drawer>footer form button {
    color: #c23d56;
}

.client-library-hero {
    background: linear-gradient(125deg, #27235b, #4b43a6 62%, #6256d9);
    border-radius: 19px;
    box-shadow: 0 16px 38px rgba(58, 49, 140, .18);
    color: #fff;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .8fr);
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
}

.client-library-hero::after {
    background: radial-gradient(circle at 10% 20%, rgba(63, 224, 198, .15), transparent 28%), linear-gradient(135deg, transparent 65%, rgba(255, 255, 255, .04) 65%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.client-library-hero>* {
    position: relative;
    z-index: 1;
}

.client-library-hero-copy>span {
    align-items: center;
    color: #c8c4f4;
    display: flex;
    font-size: .58rem;
    font-weight: 850;
    gap: .35rem;
}

.client-library-hero-copy h2 {
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.75;
    margin: .4rem 0 .25rem;
}

.client-library-hero-copy p {
    color: rgba(255, 255, 255, .7);
    font-size: .65rem;
    line-height: 2;
    margin: 0;
    max-width: 680px;
}

.client-library-hero-copy>a {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: .58rem;
    gap: .35rem;
    margin-top: .9rem;
    padding: .5rem .7rem;
    text-decoration: none;
}

.client-library-summary {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
}

.client-library-summary article {
    align-items: center;
    background: rgba(15, 13, 47, .23);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    display: flex;
    gap: .55rem;
    min-height: 70px;
    padding: .55rem;
}

.client-library-summary article>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #d5d2ff;
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.client-library-summary article.is-progress>span {
    color: #75e4d2;
}

.client-library-summary article>div {
    display: grid;
}

.client-library-summary strong {
    color: #fff;
    font-size: .83rem;
}

.client-library-summary small {
    color: #c4c1e0;
    font-size: .48rem;
}

.client-library-toolbar {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 14px;
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(230px, 1fr) auto;
    margin: 1rem 0;
    padding: .65rem;
}

.client-library-search {
    position: relative;
}

.client-library-search i {
    color: var(--client-muted);
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
}

.client-library-search input {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 9px;
    color: var(--client-text);
    font-size: .62rem;
    min-height: 43px;
    outline: 0;
    padding: .6rem 2.25rem .6rem .7rem;
    width: 100%;
}

.client-library-search input:focus {
    border-color: #8f87e8;
    box-shadow: 0 0 0 3px rgba(98, 86, 217, .08);
}

.client-library-filter-nav {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 9px;
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(4, auto);
    padding: .25rem;
}

.client-library-filter-nav button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--client-muted);
    display: flex;
    font-size: .53rem;
    gap: .28rem;
    justify-content: center;
    min-height: 35px;
    padding: .35rem .55rem;
    white-space: nowrap;
}

.client-library-filter-nav button.active {
    background: var(--client-surface);
    border-color: var(--client-border);
    box-shadow: 0 3px 9px rgba(33, 31, 66, .06);
    color: #6256d9;
}

.client-library-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-library-course {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.client-library-course:hover {
    box-shadow: 0 14px 35px rgba(38, 36, 79, .09);
    transform: translateY(-3px);
}

.client-library-cover {
    display: block;
    overflow: hidden;
    position: relative;
}

.client-library-cover::after {
    background: linear-gradient(180deg, transparent 40%, rgba(19, 17, 47, .42));
    content: "";
    inset: 0;
    position: absolute;
}

.client-library-cover img {
    aspect-ratio: 16/8.5;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%;
}

.client-library-course:hover .client-library-cover img {
    transform: scale(1.025);
}

.client-library-state {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(32, 29, 77, .76);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: .48rem;
    gap: .25rem;
    padding: .27rem .4rem;
    position: absolute;
    right: .55rem;
    top: .55rem;
    z-index: 2;
}

.client-library-state.is-completed {
    background: rgba(18, 124, 93, .82);
}

.client-library-state.is-not_started {
    background: rgba(73, 78, 91, .82);
}

.client-library-play {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    bottom: .55rem;
    color: #6256d9;
    display: flex;
    height: 34px;
    justify-content: center;
    left: .55rem;
    position: absolute;
    width: 34px;
    z-index: 2;
}

.client-library-course-body {
    display: grid;
    gap: .7rem;
    padding: .85rem;
}

.client-library-course-teacher {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.client-library-course-teacher>span {
    align-items: center;
    background: #eceafb;
    border-radius: 7px;
    color: #6256d9;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.client-library-course-teacher>div {
    display: grid;
}

.client-library-course-teacher small {
    color: var(--client-muted);
    font-size: .45rem;
}

.client-library-course-teacher strong {
    color: var(--client-text);
    font-size: .56rem;
}

.client-library-course h3 {
    color: var(--client-text);
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.9;
    margin: 0;
    min-height: 2.9rem;
}

.client-library-course-meta {
    color: var(--client-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .49rem;
    gap: .55rem;
}

.client-library-course-meta span {
    align-items: center;
    display: flex;
    gap: .2rem;
}

.client-library-course-meta i {
    color: #6256d9;
}

.client-library-course-organization {
    align-items: center;
    background: color-mix(in srgb, #6256d9 7%, var(--client-surface));
    border: 1px solid color-mix(in srgb, #6256d9 18%, var(--client-border));
    border-radius: 8px;
    color: var(--client-muted);
    display: flex;
    font-size: .48rem;
    gap: .35rem;
    padding: .4rem .5rem;
}

.client-library-course-organization i {
    color: #6256d9;
    font-size: .7rem;
}

.client-library-course-organization strong {
    color: var(--client-text);
    font-size: .53rem;
    margin-right: auto;
}

.client-library-course-organization span {
    white-space: nowrap;
}

.client-library-progress {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 9px;
    display: grid;
    gap: .35rem;
    padding: .55rem;
}

.client-library-progress>div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.client-library-progress span,
.client-library-progress small {
    color: var(--client-muted);
    font-size: .48rem;
}

.client-library-progress strong {
    color: #6256d9;
    font-size: .67rem;
}

.client-library-progress .progress {
    background: #e7e6f0;
    height: 6px;
}

.client-library-progress .progress-bar {
    background: linear-gradient(90deg, #6256d9, #28b9a8);
    border-radius: 99px;
}

.client-library-course>footer {
    align-items: center;
    border-top: 1px solid var(--client-border);
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    margin-top: auto;
    padding: .7rem .85rem;
}

.client-library-course>footer>span {
    color: var(--client-muted);
    font-size: .46rem;
}

.client-library-course>footer>a {
    align-items: center;
    background: #6256d9;
    border-radius: 7px;
    color: #fff;
    display: flex;
    font-size: .52rem;
    gap: .28rem;
    padding: .45rem .55rem;
    text-decoration: none;
    white-space: nowrap;
}

.client-library-course>footer>a i:last-child {
    font-size: .5rem;
}

.client-library-empty,
.client-library-no-result {
    align-items: center;
    background: var(--client-surface);
    border: 1px dashed var(--client-border);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    grid-column: 1/-1;
    justify-content: center;
    min-height: 230px;
    text-align: center;
}

.client-library-empty>span,
.client-library-no-result>i {
    align-items: center;
    background: #eceafb;
    border-radius: 14px;
    color: #6256d9;
    display: flex;
    font-size: 1.5rem;
    height: 58px;
    justify-content: center;
    margin-bottom: .6rem;
    width: 58px;
}

.client-library-empty strong,
.client-library-no-result strong {
    color: var(--client-text);
    font-size: .72rem;
}

.client-library-empty p,
.client-library-no-result span {
    color: var(--client-muted);
    font-size: .55rem;
    margin: .25rem 0 .65rem;
}

.client-library-empty a {
    background: #6256d9;
    border-radius: 7px;
    color: #fff;
    font-size: .57rem;
    padding: .45rem .65rem;
    text-decoration: none;
}

.client-library-pagination {
    margin-top: 1rem;
}

.client-profile-hero {
    align-items: center;
    background: linear-gradient(125deg, #27235b, #534ab4);
    border-radius: 18px;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 1.2rem;
    position: relative;
}

.client-profile-hero::after {
    background: linear-gradient(135deg, transparent 62%, rgba(255, 255, 255, .05) 62%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.client-profile-hero>* {
    position: relative;
    z-index: 1;
}

.client-profile-avatar {
    height: 82px;
    position: relative;
    width: 82px;
}

.client-profile-avatar img,
.client-profile-avatar>span {
    align-items: center;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, .2);
    border-radius: 19px;
    color: #5148b4;
    display: flex;
    font-size: 1.65rem;
    font-weight: 900;
    height: 100%;
    justify-content: center;
    object-fit: cover;
    width: 100%;
}

.client-profile-avatar>i {
    background: #26aa91;
    border: 3px solid #4c43a4;
    border-radius: 50%;
    bottom: -4px;
    color: #fff;
    font-size: .72rem;
    padding: .2rem;
    position: absolute;
    right: -4px;
}

.client-profile-identity>span {
    color: #c7c3f2;
    font-size: .51rem;
    font-weight: 850;
}

.client-profile-identity h2 {
    color: #fff;
    font-size: 1.05rem;
    margin: .2rem 0;
}

.client-profile-identity p {
    color: #c8c5e3;
    direction: rtl;
    font-size: .55rem;
    margin: 0;
}

.client-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 100px);
}

.client-profile-stats article {
    border-right: 1px solid rgba(255, 255, 255, .13);
    display: grid;
    padding: .3rem .75rem;
    text-align: center;
}

.client-profile-stats article:first-child {
    border-right: 0;
}

.client-profile-stats strong {
    color: #fff;
    font-size: .9rem;
}

.client-profile-stats span {
    color: #c6c3e0;
    font-size: .47rem;
}

.client-profile-form {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 310px;
    margin-top: 1rem;
}

.client-profile-form-main {
    display: grid;
    gap: 1rem;
}

.client-profile-card,
.client-profile-media-card {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 15px;
    padding: 1rem;
}

.client-profile-card>header,
.client-profile-media-card>header {
    align-items: center;
    border-bottom: 1px solid var(--client-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px minmax(0, 1fr);
    margin-bottom: .85rem;
    padding-bottom: .7rem;
}

.client-profile-card>header>span,
.client-profile-media-card>header>span {
    align-items: center;
    background: #eceafb;
    border-radius: 9px;
    color: #6256d9;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.client-profile-card>header>div,
.client-profile-media-card>header>div {
    display: grid;
}

.client-profile-card header strong,
.client-profile-media-card header strong {
    color: var(--client-text);
    font-size: .66rem;
}

.client-profile-card header small,
.client-profile-media-card header small {
    color: var(--client-muted);
    font-size: .5rem;
}

.client-profile-current-avatar {
    height: 125px;
    margin: 0 auto .85rem;
    width: 125px;
}

.client-profile-current-avatar img,
.client-profile-current-avatar>span {
    align-items: center;
    background: linear-gradient(135deg, #6256d9, #21a797);
    border: 5px solid var(--client-surface-soft);
    border-radius: 27px;
    color: #fff;
    display: flex;
    font-size: 2.2rem;
    font-weight: 900;
    height: 100%;
    justify-content: center;
    object-fit: cover;
    width: 100%;
}

.client-profile-media-card .file-add-action {
    min-height: 70px;
}

.client-profile-media-card>.btn {
    margin-top: .8rem;
    min-height: 44px;
}

html[data-panel-theme="dark"] .client-button-navigation a:hover,
html[data-panel-theme="dark"] .client-button-navigation a.active,
html[data-panel-theme="dark"] .client-drawer-nav a:hover,
html[data-panel-theme="dark"] .client-drawer-nav a.active {
    background: #29273f;
    border-color: #3b3855;
}

.client-portal-root[data-panel-theme="dark"] .client-drawer-context,
.client-portal-root[data-panel-theme="dark"] .client-drawer-context>i {
    background: #29273f;
}

.client-portal-root[data-panel-theme="dark"] .client-library-progress .progress {
    background: #343545;
}

@media (max-width:1199.98px) {
    .client-button-navigation a small {
        display: none;
    }

    .client-button-navigation a {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .client-button-navigation a>i {
        height: 30px;
        width: 30px;
    }

    .client-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:1050px) {
    .client-portal-header-inner {
        gap: .75rem;
    }

    .client-portal-brand {
        margin-left: auto;
    }

    .client-library-hero {
        grid-template-columns: 1fr;
    }

    .client-library-summary {
        grid-template-columns: repeat(4, 1fr);
    }

    .client-profile-form {
        grid-template-columns: 1fr;
    }

    .client-profile-media-card {
        display: grid;
        gap: .7rem;
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .client-profile-media-card>header {
        grid-column: 1/-1;
    }

    .client-profile-current-avatar {
        grid-row: 2/4;
    }

    .client-profile-media-card>.btn {
        align-self: end;
    }
}

@media (max-width:767.98px) {
    .client-menu-trigger {
        height: 40px;
        width: 42px;
    }

    .client-portal-actions .client-portal-action {
        display: none;
    }

    .client-portal-user>i {
        display: none;
    }

    .client-mobile-nav {
        grid-template-columns: repeat(5, 1fr);
        overflow: visible;
    }

    .client-mobile-nav>button {
        align-items: center;
        background: transparent;
        border: 0;
        color: #6256d9;
        display: flex;
        flex-direction: column;
        font-size: .48rem;
        gap: .15rem;
        justify-content: center;
        padding: 0;
        position: relative;
    }

    .client-mobile-nav>button>span {
        align-items: center;
        background: linear-gradient(135deg, #6256d9, #5145c4);
        border: 5px solid var(--client-bg);
        border-radius: 50%;
        box-shadow: 0 8px 20px rgba(71, 61, 163, .25);
        color: #fff;
        display: flex;
        height: 54px;
        justify-content: center;
        margin-top: -24px;
        width: 54px;
    }

    .client-mobile-nav>button i {
        font-size: 1.35rem;
    }

    .client-mobile-nav>button small {
        font-size: .48rem;
    }

    .client-library-hero {
        border-radius: 15px;
        padding: 1.1rem;
    }

    .client-library-summary {
        grid-template-columns: 1fr 1fr;
    }

    .client-library-toolbar {
        grid-template-columns: 1fr;
    }

    .client-library-filter-nav {
        grid-template-columns: 1fr 1fr;
    }

    .client-library-grid {
        grid-template-columns: 1fr;
    }

    .client-profile-hero {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .client-profile-avatar {
        height: 64px;
        width: 64px;
    }

    .client-profile-stats {
        grid-column: 1/-1;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .client-profile-media-card {
        display: block;
    }

    .client-profile-media-card>header {
        display: grid;
    }

    .client-profile-current-avatar {
        margin-bottom: .85rem;
    }
}

@media (max-width:480px) {
    .client-portal-brand strong {
        font-size: .7rem;
    }

    .client-portal-brand small {
        display: none;
    }

    .client-portal-brand-mark {
        height: 38px;
        width: 38px;
    }

    .client-portal-user {
        display: none;
    }

    .client-library-summary {
        grid-template-columns: 1fr;
    }

    .client-library-filter-nav button {
        font-size: .49rem;
        padding: .3rem;
    }

    .client-profile-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .client-profile-avatar {
        margin: auto;
    }

    .client-profile-stats article {
        padding-inline: .35rem;
    }
}

/* Immersive client course content -------------------------------------- */
.lesson-video-inline-status {
    align-items: center;
    color: var(--panel-muted, #718096);
    display: inline-flex;
    font-size: .62rem;
    gap: .35rem;
    padding: .35rem 0;
}

.learning-workspace {
    display: grid;
    gap: 1rem;
}

.learning-course-banner {
    align-items: center;
    background: linear-gradient(115deg, #28235f, #5148bb 58%, #655bd4);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(68, 59, 157, .2);
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
    overflow: hidden;
    padding: 1.55rem 1.75rem;
    position: relative;
}

.learning-course-banner::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0 1px, transparent 1.5px) 0 0/18px 18px;
    content: "";
    inset: 0;
    opacity: .35;
    pointer-events: none;
    position: absolute;
}

.learning-course-banner>* {
    position: relative;
    z-index: 1;
}

.learning-course-banner-copy>a {
    align-items: center;
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    font-size: .58rem;
    gap: .35rem;
    margin-bottom: .7rem;
    text-decoration: none;
}

.learning-course-banner-copy>span {
    color: #c9c4ff;
    display: block;
    font-size: .57rem;
    font-weight: 800;
}

.learning-course-banner-copy h2 {
    color: #fff;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    line-height: 1.7;
    margin: .25rem 0 .4rem;
}

.learning-course-banner-copy p {
    align-items: center;
    color: rgba(255, 255, 255, .7);
    display: flex;
    flex-wrap: wrap;
    font-size: .62rem;
    gap: .4rem;
    margin: 0;
}

.learning-course-banner-copy p i {
    color: #d9d5ff;
}

.learning-course-banner-copy p b {
    background: rgba(255, 255, 255, .25);
    border-radius: 50%;
    height: 3px;
    margin-inline: .2rem;
    width: 3px;
}

.learning-course-progress {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    display: grid;
    gap: .55rem;
    padding: 1rem;
}

.learning-course-progress>div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.learning-course-progress span {
    color: rgba(255, 255, 255, .7);
    font-size: .58rem;
}

.learning-course-progress strong {
    color: #fff;
    font-size: 1.15rem;
}

.learning-course-progress .progress {
    background: rgba(255, 255, 255, .16);
    height: 7px;
}

.learning-course-progress .progress-bar {
    background: linear-gradient(90deg, #44d8bd, #8bf0de);
}

.learning-course-progress small {
    color: rgba(255, 255, 255, .62);
    font-size: .52rem;
}

.learning-workspace-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: 320px minmax(0, 1fr);
}

.learning-curriculum {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 18px;
    overflow: hidden;
    position: sticky;
    top: 94px;
}

.learning-curriculum-head {
    align-items: center;
    border-bottom: 1px solid var(--client-border);
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.learning-curriculum-head>div {
    display: grid;
    gap: .12rem;
}

.learning-curriculum-head span {
    color: var(--client-muted);
    font-size: .52rem;
}

.learning-curriculum-head h3 {
    color: var(--client-text);
    font-size: .85rem;
    margin: 0;
}

.learning-curriculum-head>strong {
    align-items: center;
    background: #eceafb;
    border-radius: 9px;
    color: #6256d9;
    display: flex;
    font-size: .7rem;
    height: 38px;
    justify-content: center;
    width: 50px;
}

.learning-curriculum-scroll {
    display: grid;
    gap: .65rem;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding: .75rem;
    scrollbar-color: #d6d3f4 transparent;
    scrollbar-width: thin;
}

.learning-curriculum .learning-chapter {
    background: var(--client-surface-soft);
    border-color: var(--client-border);
    border-radius: 13px;
    padding: .75rem;
}

.learning-curriculum .learning-chapter-head {
    align-items: flex-start;
    margin-bottom: .55rem;
}

.learning-curriculum .learning-chapter-head>div {
    display: grid;
    gap: .08rem;
}

.learning-curriculum .learning-chapter-head small {
    color: #6256d9;
    font-size: .48rem;
    font-weight: 800;
}

.learning-curriculum .learning-chapter-head strong {
    color: var(--client-text);
    font-size: .68rem;
    line-height: 1.75;
}

.learning-curriculum .learning-chapter-head span {
    color: var(--client-muted);
    font-size: .5rem;
}

.learning-curriculum .learning-chapter>.progress {
    background: var(--client-border);
    height: 3px;
}

.learning-curriculum .learning-lesson-list {
    gap: .35rem;
}

.learning-curriculum .learning-lesson-link {
    align-items: center;
    border-radius: 9px;
    color: var(--client-muted);
    font-size: .6rem;
    gap: .45rem;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    min-height: 46px;
    padding: .45rem .5rem;
    text-decoration: none;
}

.learning-curriculum .learning-lesson-link>span {
    display: grid;
    gap: .05rem;
    min-width: 0;
}

.learning-curriculum .learning-lesson-link strong {
    color: inherit;
    font-size: .58rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-curriculum .learning-lesson-link small {
    color: var(--client-muted);
    font-size: .45rem;
}

.learning-curriculum .learning-lesson-link em {
    color: #6256d9;
    font-size: .42rem;
    font-style: normal;
    white-space: nowrap;
}

.learning-curriculum .learning-lesson-link.active {
    background: #eceafb;
    border-color: #d9d5fb;
    color: #554ac8;
}

.learning-curriculum .learning-lesson-link.is-completed>i {
    color: #159278;
}

.lesson-content-view {
    min-width: 0;
}

.lesson-content-heading {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: .8rem;
    padding: .85rem 1rem;
}

.lesson-content-heading>div {
    display: grid;
    gap: .12rem;
}

.lesson-content-heading>div>span {
    color: #6256d9;
    font-size: .53rem;
    font-weight: 750;
}

.lesson-content-heading h3 {
    color: var(--client-text);
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

.lesson-completion-state {
    align-items: center;
    background: #f0f1f5;
    border-radius: 999px;
    color: #74768a;
    display: inline-flex;
    font-size: .54rem;
    gap: .32rem;
    padding: .38rem .62rem;
}

.lesson-completion-state.is-completed {
    background: #e3f7ef;
    color: #13815d;
}

.lesson-media-shell {
    background: #0b0c13;
    border: 1px solid #242633;
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(14, 14, 27, .16);
    overflow: hidden;
}

.lesson-media-shell .learning-video-player {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    height: auto;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.lesson-media-shell .plyr {
    --plyr-color-main: #7065e7;
    border-radius: 0;
    width: 100%;
}

.lesson-media-shell .plyr__video-wrapper {
    aspect-ratio: 16 / 9;
}

.lesson-media-shell .learning-empty-player {
    border-radius: 0;
    min-height: 420px;
}

.lesson-media-shell .learning-empty-player strong {
    color: #fff;
    font-size: .8rem;
}

.lesson-media-shell .learning-empty-player span {
    color: rgba(255, 255, 255, .56);
    font-size: .58rem;
}

.lesson-media-shell.is-compact .learning-empty-player,
.lesson-media-shell.is-compact .lesson-type-cover {
    min-height: 220px;
}

.lesson-media-shell.is-compact .lesson-type-cover {
    padding: 1.35rem 1.75rem;
}

.lesson-media-shell.is-compact .lesson-type-cover>span {
    border-radius: 16px;
    font-size: 1.75rem;
    height: 76px;
    width: 76px;
}

.lesson-media-shell.is-compact .lesson-type-cover strong {
    font-size: 1.05rem;
}

.lesson-type-cover {
    align-items: center;
    background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .08), transparent 30%), linear-gradient(120deg, #171a2b, #252b48);
    color: #fff;
    display: flex;
    gap: 1rem;
    min-height: 300px;
    padding: clamp(1.5rem, 5vw, 3.5rem);
}

.lesson-type-cover>span {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    display: flex;
    font-size: 2.3rem;
    height: 100px;
    justify-content: center;
    width: 100px;
}

.lesson-type-cover>div {
    display: grid;
    gap: .25rem;
}

.lesson-type-cover small {
    color: #a9a4ef;
    font-size: .58rem;
}

.lesson-type-cover strong {
    font-size: 1.3rem;
}

.lesson-type-cover p {
    color: rgba(255, 255, 255, .58);
    font-size: .65rem;
    margin: 0;
}

.lesson-type-cover.is-meet {
    background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .08), transparent 30%), linear-gradient(120deg, #102c32, #176e68);
}

.lesson-tabs-card {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 18px;
    margin-top: 1rem;
    overflow: hidden;
    scroll-margin-top: 96px;
}

.lesson-content-tabs {
    background: var(--client-surface-soft);
    border-bottom: 1px solid var(--client-border);
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: .55rem;
}

.lesson-content-tabs .nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--client-muted);
    display: flex;
    gap: .55rem;
    padding: .7rem .8rem;
    text-align: right;
}

.lesson-content-tabs .nav-link>i {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 9px;
    display: flex;
    font-size: 1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.lesson-content-tabs .nav-link>span {
    display: grid;
    gap: .08rem;
}

.lesson-content-tabs .nav-link>span {
    font-size: .64rem;
    font-weight: 800;
}

.lesson-content-tabs .nav-link small {
    color: var(--client-muted);
    font-size: .46rem;
    font-weight: 400;
}

.lesson-content-tabs .nav-link small b {
    color: #6256d9;
    font-size: .52rem;
    font-weight: 900;
}

.lesson-content-tabs .nav-link.active {
    background: var(--client-surface);
    border-color: var(--client-border);
    box-shadow: 0 5px 14px rgba(41, 39, 81, .06);
    color: #6256d9;
}

.lesson-content-tabs .nav-link.active>i {
    background: #eceafb;
    border-color: #dedbfb;
}

.lesson-tab-content {
    padding: 1.15rem;
}

.lesson-overview-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1.65fr) minmax(230px, .65fr);
}

.lesson-description-card,
.lesson-action-card {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 14px;
    padding: 1rem;
}

.lesson-description-card>header {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.lesson-description-card>header>span {
    align-items: center;
    background: #eceafb;
    border-radius: 10px;
    color: #6256d9;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.lesson-description-card>header>div {
    display: grid;
    gap: .1rem;
}

.lesson-description-card small,
.lesson-section-head span {
    color: var(--client-muted);
    font-size: .5rem;
}

.lesson-description-card h4,
.lesson-section-head h4 {
    color: var(--client-text);
    font-size: .72rem;
    margin: 0;
}

.lesson-description-card .learning-description {
    background: transparent;
    border: 0;
    color: var(--client-muted);
    font-size: .65rem;
    line-height: 2.2;
    margin: .65rem 0 0;
    padding: 0;
}

.lesson-action-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.lesson-action-card>span {
    align-items: center;
    background: #e3f7ef;
    border-radius: 50%;
    color: #13815d;
    display: flex;
    font-size: 1.25rem;
    height: 50px;
    justify-content: center;
    width: 50px;
}

.lesson-action-card>strong {
    color: var(--client-text);
    font-size: .68rem;
    margin-top: .5rem;
}

.lesson-action-card p {
    color: var(--client-muted);
    font-size: .52rem;
    line-height: 1.9;
    margin: .25rem 0 .65rem;
}

.lesson-action-card .btn {
    font-size: .58rem;
    width: 100%;
}

.lesson-resource-link {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 13px;
    color: var(--client-text);
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    margin-top: .85rem;
    padding: .75rem;
    text-decoration: none;
}

.lesson-resource-link:hover {
    border-color: #d8d4f9;
    color: var(--client-text);
}

.lesson-resource-link>span {
    align-items: center;
    background: #eceafb;
    border-radius: 9px;
    color: #6256d9;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.lesson-resource-link>div {
    display: grid;
    gap: .1rem;
}

.lesson-resource-link small {
    color: var(--client-muted);
    font-size: .48rem;
}

.lesson-resource-link strong {
    font-size: .62rem;
}

.lesson-resource-link>i {
    color: #6256d9;
}

.lesson-section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.lesson-section-head>div {
    display: grid;
    gap: .12rem;
}

.lesson-section-head>strong {
    background: #eceafb;
    border-radius: 999px;
    color: #6256d9;
    font-size: .5rem;
    padding: .3rem .55rem;
}

.lesson-resource-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-resource-grid article {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 11px;
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px minmax(0, 1fr) 32px 32px;
    padding: .6rem;
}

.lesson-resource-grid article>span {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    color: #6256d9;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.lesson-resource-grid article>div {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.lesson-resource-grid article strong {
    font-size: .56rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-resource-grid article small {
    color: var(--client-muted);
    direction: ltr;
    font-size: .45rem;
    text-align: right;
}

.lesson-resource-grid article>a {
    align-items: center;
    border: 1px solid var(--client-border);
    border-radius: 7px;
    color: var(--client-muted);
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.lesson-meet-card {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 14px;
    display: grid;
    gap: 1rem;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    padding: 1rem;
}

.lesson-meet-card>span {
    align-items: center;
    background: #e4f7f3;
    border-radius: 12px;
    color: #139a8c;
    display: flex;
    font-size: 1.3rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.lesson-meet-card small {
    color: var(--client-muted);
    font-size: .5rem;
}

.lesson-meet-card h4 {
    font-size: .75rem;
    margin: .15rem 0;
}

.lesson-meet-card p {
    color: var(--client-muted);
    font-size: .55rem;
    margin: 0;
}

.lesson-meet-card.is-scheduled {
    grid-template-columns: 60px minmax(0, 1fr) minmax(220px, auto);
}

.meeting-client-state {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 11px;
    display: flex;
    gap: .7rem;
    justify-content: flex-end;
    min-height: 58px;
    padding: .65rem .75rem;
}

.meeting-client-state>i {
    align-items: center;
    background: #e9f3fb;
    border-radius: 8px;
    color: #315f8d;
    display: flex;
    flex: 0 0 34px;
    font-size: .8rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.meeting-client-state>div {
    display: grid;
    gap: .12rem;
}

.meeting-client-state strong {
    color: var(--client-text);
    font-size: .62rem;
}

.meeting-client-state span {
    color: var(--client-muted);
    font-size: .5rem;
}

.meeting-client-state.is-countdown {
    border-color: #e6c477;
}

.meeting-client-state.is-countdown>i {
    background: #fff6df;
    color: #a96d08;
}

.meeting-client-countdown {
    color: #9b6204 !important;
    direction: ltr;
    font-size: 1.05rem !important;
    font-weight: 950;
    letter-spacing: .08em;
    text-align: right;
}

.meeting-client-state.is-live {
    background: #eaf8f4;
    border-color: #98d5c7;
}

.meeting-client-join-form {
    margin: 0;
}

.meeting-client-live-button {
    cursor: pointer;
    min-width: 150px;
}

.lesson-question-form {
    align-items: end;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 13px;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .75rem;
}

.lesson-question-form textarea {
    background: var(--client-surface);
    min-height: 104px;
}

.lesson-question-form .btn {
    min-height: 44px;
}

.lesson-qa-list {
    display: grid;
    gap: .65rem;
    margin-top: .85rem;
}

.lesson-qa-item {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 13px;
    padding: .85rem;
}

.lesson-qa-meta {
    align-items: center;
    display: flex;
    gap: .55rem;
    justify-content: flex-start;
}

.lesson-qa-avatar {
    align-items: center;
    background: #eceafb;
    border-radius: 9px;
    color: #6256d9;
    display: flex;
    font-size: .65rem;
    font-weight: 850;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.lesson-qa-meta>div {
    display: grid;
    gap: .05rem;
}

.lesson-qa-meta strong {
    color: var(--client-text);
    font-size: .58rem;
}

.lesson-qa-meta span {
    color: var(--client-muted);
    font-size: .45rem;
}

.lesson-qa-item>p {
    color: var(--client-text);
    font-size: .62rem;
    line-height: 2;
    margin: .65rem 0;
}

.lesson-answer {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-right: 3px solid #159278;
    border-radius: 10px;
    padding: .7rem;
}

.lesson-answer>span {
    color: #13815d;
    font-size: .52rem;
    font-weight: 800;
}

.lesson-answer>p {
    color: var(--client-muted);
    font-size: .58rem;
    line-height: 2;
    margin: .35rem 0 0;
}

.lesson-waiting-answer {
    align-items: center;
    color: #a57b2d;
    display: inline-flex;
    font-size: .5rem;
    gap: .3rem;
}

.lesson-feedback-panel {
    margin-inline: auto;
    max-width: 760px;
}

.lesson-feedback-intro {
    align-items: center;
    background: linear-gradient(135deg, #f2f0ff, #f9f8ff);
    border: 1px solid #e0ddfa;
    border-radius: 15px;
    display: flex;
    gap: .8rem;
    padding: 1rem;
}

.lesson-feedback-intro>span {
    align-items: center;
    background: #6256d9;
    border-radius: 12px;
    color: #fff;
    display: flex;
    font-size: 1.25rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.lesson-feedback-intro>div {
    display: grid;
    gap: .12rem;
}

.lesson-feedback-intro small {
    color: #6256d9;
    font-size: .5rem;
}

.lesson-feedback-intro h4 {
    color: #29264c;
    font-size: .75rem;
    margin: 0;
}

.lesson-feedback-intro p {
    color: #777394;
    font-size: .53rem;
    margin: 0;
}

.lesson-feedback-form {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 15px;
    display: grid;
    gap: .75rem;
    margin-top: .8rem;
    padding: 1rem;
}

.lesson-rating-field {
    margin: 0;
}

.lesson-rating-field legend {
    color: var(--client-text);
    float: none;
    font-size: .62rem;
    font-weight: 800;
    margin-bottom: .55rem;
    width: auto;
}

.lesson-rating-options {
    direction: ltr;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.lesson-rating-options input {
    clip: rect(0 0 0 0);
    position: absolute;
}

.lesson-rating-options label {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 9px;
    color: #b9bac6;
    cursor: pointer;
    display: flex;
    gap: .3rem;
    min-width: 54px;
    padding: .55rem .7rem;
    transition: .15s ease;
}

.lesson-rating-options label span {
    color: var(--client-muted);
    font-size: .58rem;
}

.lesson-rating-options input:checked+label {
    background: #fff5dc;
    border-color: #eccb7e;
    color: #d99a20;
}

.lesson-feedback-form>.form-label {
    font-size: .6rem;
    font-weight: 800;
    margin: 0;
}

.lesson-feedback-form textarea {
    background: var(--client-surface);
    font-size: .65rem;
    line-height: 2;
}

.lesson-feedback-form>.btn {
    justify-self: start;
    min-width: 180px;
}

.lesson-content-empty {
    align-items: center;
    background: var(--client-surface);
    border: 1px dashed var(--client-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 2rem;
    text-align: center;
}

.lesson-content-empty>span {
    align-items: center;
    background: #eceafb;
    border-radius: 18px;
    color: #6256d9;
    display: flex;
    font-size: 2rem;
    height: 80px;
    justify-content: center;
    width: 80px;
}

.lesson-content-empty h3 {
    font-size: .85rem;
    margin: .8rem 0 .3rem;
}

.lesson-content-empty p {
    color: var(--client-muted);
    font-size: .58rem;
}

html[data-panel-theme="dark"] .learning-curriculum-head>strong,
html[data-panel-theme="dark"] .learning-curriculum .learning-lesson-link.active,
html[data-panel-theme="dark"] .lesson-content-tabs .nav-link.active>i,
html[data-panel-theme="dark"] .lesson-description-card>header>span,
html[data-panel-theme="dark"] .lesson-resource-link>span,
html[data-panel-theme="dark"] .lesson-qa-avatar,
html[data-panel-theme="dark"] .lesson-content-empty>span {
    background: #302d51;
    border-color: #48436f;
    color: #b6afff;
}

html[data-panel-theme="dark"] .lesson-feedback-intro {
    background: linear-gradient(135deg, #27243e, #232232);
    border-color: #413d61;
}

html[data-panel-theme="dark"] .lesson-feedback-intro h4 {
    color: #f0effa;
}

html[data-panel-theme="dark"] .lesson-feedback-intro p {
    color: #aaa7bd;
}

html[data-panel-theme="dark"] .lesson-rating-options input:checked+label {
    background: #493d24;
    border-color: #826a35;
    color: #ffd77b;
}

@media (max-width: 1199.98px) {
    .learning-workspace-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .lesson-overview-grid {
        grid-template-columns: 1fr;
    }

    .lesson-action-card {
        align-items: flex-start;
        text-align: right;
    }

    .lesson-action-card .btn {
        width: auto;
    }
}

@media (max-width: 991.98px) {
    .learning-course-banner {
        grid-template-columns: 1fr;
    }

    .learning-workspace-grid {
        grid-template-columns: 1fr;
    }

    .learning-curriculum {
        position: static;
    }

    .learning-curriculum-scroll {
        max-height: 430px;
    }
}

@media (max-width: 767.98px) {
    .learning-course-banner {
        border-radius: 16px;
        padding: 1.1rem;
    }

    .learning-course-progress {
        min-width: 0;
    }

    .lesson-content-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }

    .lesson-media-shell .learning-empty-player {
        min-height: 280px;
    }

    .lesson-media-shell.is-compact .learning-empty-player,
    .lesson-media-shell.is-compact .lesson-type-cover {
        min-height: 200px;
    }

    .lesson-content-tabs {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .lesson-content-tabs .nav-link {
        align-items: center;
        flex-direction: column;
        gap: .25rem;
        padding: .55rem .25rem;
        text-align: center;
    }

    .lesson-content-tabs .nav-link>span {
        font-size: .55rem;
    }

    .lesson-content-tabs .nav-link small {
        display: none;
    }

    .lesson-tab-content {
        padding: .75rem;
    }

    .lesson-resource-grid {
        grid-template-columns: 1fr;
    }

    .lesson-question-form {
        grid-template-columns: 1fr;
    }

    .lesson-question-form .btn {
        justify-self: start;
    }

    .lesson-meet-card {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .lesson-meet-card>a {
        grid-column: 1 / -1;
    }

    .lesson-feedback-intro {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .learning-course-banner-copy p {
        align-items: flex-start;
        flex-direction: column;
    }

    .learning-course-banner-copy p b {
        display: none;
    }

    .lesson-type-cover {
        align-items: flex-start;
        flex-direction: column;
        min-height: 280px;
    }

    .lesson-type-cover>span {
        height: 72px;
        width: 72px;
    }

    .lesson-media-shell.is-compact .lesson-type-cover {
        align-items: center;
        flex-direction: row;
        min-height: 180px;
        padding: 1rem;
    }

    .lesson-media-shell.is-compact .lesson-type-cover>span {
        flex: 0 0 auto;
        height: 58px;
        width: 58px;
    }

    .lesson-media-shell.is-compact .learning-empty-player {
        min-height: 180px;
    }

    .lesson-content-tabs .nav-link>i {
        height: 34px;
        width: 34px;
    }

    .lesson-rating-options {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .lesson-rating-options label {
        justify-content: center;
        min-width: 0;
        padding: .5rem .25rem;
    }
}

/* Refined client lesson workspace ------------------------------------- */
.learning-workspace {
    --learning-accent: #5964d8;
    --learning-accent-soft: #eef0ff;
    gap: 1.2rem;
}

.learning-course-banner {
    background: linear-gradient(125deg, #202944 0%, #303b68 58%, #4c56ad 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(32, 41, 68, .18);
    padding: 1.35rem 1.5rem;
}

.learning-course-banner::before {
    background: radial-gradient(circle at 12% 20%, rgba(122, 234, 218, .16), transparent 26%), linear-gradient(135deg, transparent 58%, rgba(255, 255, 255, .045) 58%);
    opacity: 1;
}

.learning-course-banner-copy>a {
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 7px;
    margin-bottom: .8rem;
    padding: .35rem .55rem;
}

.learning-course-banner-copy>span {
    color: #aeb8ff;
    letter-spacing: .02em;
}

.learning-course-banner-copy h2 {
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    margin-top: .2rem;
}

.learning-course-progress {
    backdrop-filter: blur(8px);
    background: rgba(12, 19, 39, .22);
    border-radius: 11px;
    padding: .85rem;
}

.learning-course-quick-stats {
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(3, 1fr);
    padding-top: .65rem;
}

.learning-course-quick-stats span {
    align-items: center;
    color: rgba(255, 255, 255, .65);
    display: flex;
    font-size: .46rem;
    gap: .25rem;
    justify-content: center;
    white-space: nowrap;
}

.learning-course-quick-stats i {
    color: #7ee0d3;
    font-size: .62rem;
}

.learning-course-quick-stats b {
    color: #fff;
    font-size: .58rem;
}

.learning-workspace-grid {
    gap: 1.2rem;
    grid-template-columns: 304px minmax(0, 1fr);
}

.learning-curriculum {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(31, 42, 67, .06);
}

.learning-curriculum-head {
    background: linear-gradient(180deg, var(--client-surface), var(--client-surface-soft));
    padding: .9rem;
}

.learning-curriculum-head>strong {
    background: var(--learning-accent-soft);
    border: 1px solid #dfe2ff;
    border-radius: 7px;
    color: var(--learning-accent);
    height: 36px;
}

.learning-curriculum-scroll {
    gap: .55rem;
    padding: .65rem;
}

.learning-curriculum .learning-chapter {
    background: var(--client-surface);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
}

.learning-chapter-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: grid;
    gap: .45rem;
    grid-template-columns: minmax(0, 1fr) 26px;
    padding: .65rem;
    text-align: right;
    width: 100%;
}

.learning-chapter-toggle:hover {
    background: var(--client-surface-soft);
}

.learning-curriculum .learning-chapter-head {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) 24px;
    margin: 0;
    min-width: 0;
}

.learning-curriculum .learning-chapter-head>span {
    display: grid;
    gap: .04rem;
    min-width: 0;
}

.learning-curriculum .learning-chapter-head>i {
    color: var(--learning-accent);
    font-size: .8rem;
    text-align: center;
}

.learning-chapter-chevron {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 6px;
    color: var(--client-muted);
    display: flex;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.learning-chapter-chevron i {
    font-size: .54rem;
    transition: transform .2s ease;
}

.learning-chapter-toggle[aria-expanded="true"] .learning-chapter-chevron i {
    transform: rotate(180deg);
}

.learning-curriculum .learning-chapter>.progress {
    border-radius: 0;
    height: 2px;
    margin: 0;
}

.learning-curriculum .learning-chapter .collapse .learning-lesson-list,
.learning-curriculum .learning-chapter .collapsing .learning-lesson-list {
    padding: .45rem .5rem .55rem;
}

.learning-curriculum .learning-lesson-link {
    border: 1px solid transparent;
    border-radius: 7px;
    min-height: 48px;
    padding: .48rem .52rem;
}

.learning-curriculum .learning-lesson-link>i {
    align-items: center;
    background: var(--client-surface-soft);
    border-radius: 6px;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.learning-curriculum .learning-lesson-link.active {
    background: var(--learning-accent-soft);
    border-color: #dde0ff;
    box-shadow: inset -3px 0 var(--learning-accent);
    color: #4650bd;
}

.learning-curriculum .learning-lesson-link.active>i {
    background: #fff;
    color: var(--learning-accent);
}

.learning-curriculum .learning-final-quizzes {
    padding: .7rem;
}

.lesson-content-heading {
    background: linear-gradient(135deg, var(--client-surface), var(--client-surface-soft));
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(31, 42, 67, .05);
    padding: .8rem .9rem;
}

.lesson-heading-main {
    align-items: center;
    display: flex !important;
    gap: .7rem !important;
    min-width: 0;
}

.lesson-heading-icon {
    align-items: center;
    background: var(--learning-accent-soft);
    border: 1px solid #dde1ff;
    border-radius: 10px;
    color: var(--learning-accent);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.05rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.lesson-heading-main>div {
    display: grid;
    gap: .04rem;
    min-width: 0;
}

.lesson-heading-main>div>span {
    color: var(--learning-accent);
    font-size: .5rem;
    font-weight: 800;
}

.lesson-heading-main h3 {
    font-size: .86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-heading-main p {
    color: var(--client-muted);
    font-size: .46rem;
    margin: 0;
}

.lesson-heading-tools {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.lesson-sequence-nav {
    align-items: center;
    display: flex;
    gap: .3rem;
}

.lesson-sequence-nav :is(a, span) {
    align-items: center;
    border: 1px solid var(--client-border);
    border-radius: 7px;
    color: var(--client-text);
    display: flex;
    font-size: .48rem;
    gap: .28rem;
    min-height: 31px;
    padding: .32rem .48rem;
    text-decoration: none;
}

.lesson-sequence-nav a:hover {
    background: var(--learning-accent-soft);
    border-color: #d9ddff;
    color: var(--learning-accent);
}

.lesson-sequence-nav .disabled {
    color: var(--client-muted);
    opacity: .45;
}

.lesson-media-shell {
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(10, 15, 30, .14);
}

.lesson-player-toolbar {
    align-items: center;
    background: #141827;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .84);
    display: flex;
    justify-content: space-between;
    min-height: 40px;
    padding: .55rem .75rem;
}

.lesson-player-toolbar span {
    align-items: center;
    display: flex;
    font-size: .5rem;
    gap: .3rem;
}

.lesson-player-toolbar span i {
    color: #65d8c8;
}

.lesson-player-toolbar small {
    color: rgba(255, 255, 255, .46);
    font-size: .45rem;
}

.lesson-tabs-card {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(31, 42, 67, .05);
}

.lesson-content-tabs {
    gap: .35rem;
    padding: .45rem;
}

.lesson-content-tabs .nav-link {
    border-radius: 8px;
    padding: .62rem .7rem;
}

.lesson-content-tabs .nav-link.active {
    box-shadow: 0 4px 12px rgba(41, 39, 81, .05);
    color: var(--learning-accent);
}

html[data-panel-theme="dark"] .learning-workspace {
    --learning-accent: #9da5ff;
    --learning-accent-soft: #292d4b;
}

html[data-panel-theme="dark"] .learning-curriculum-head>strong,
html[data-panel-theme="dark"] .lesson-heading-icon {
    background: #292d4b;
    border-color: #3e456b;
    color: #aeb4ff;
}

html[data-panel-theme="dark"] .learning-curriculum .learning-lesson-link.active {
    background: #292d4b;
    border-color: #3e456b;
    color: #c3c7ff;
}

html[data-panel-theme="dark"] .learning-curriculum .learning-lesson-link.active>i {
    background: #202337;
}

@media (max-width: 1199.98px) {
    .learning-workspace-grid {
        grid-template-columns: 278px minmax(0, 1fr);
    }

    .lesson-heading-tools {
        align-items: flex-end;
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .learning-workspace-grid {
        grid-template-columns: 1fr;
    }

    .learning-curriculum {
        position: static;
    }

    .learning-curriculum-scroll {
        max-height: 470px;
    }
}

@media (max-width: 767.98px) {
    .learning-course-banner {
        border-radius: 13px;
        padding: 1rem;
    }

    .lesson-content-heading {
        align-items: stretch;
    }

    .lesson-heading-tools {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .lesson-heading-main h3 {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .learning-course-quick-stats {
        grid-template-columns: 1fr;
    }

    .learning-course-quick-stats span {
        justify-content: flex-start;
    }

    .lesson-heading-main {
        align-items: flex-start;
    }

    .lesson-heading-icon {
        height: 40px;
        width: 40px;
    }

    .lesson-heading-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-sequence-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .lesson-sequence-nav :is(a, span) {
        justify-content: center;
    }

    .lesson-player-toolbar small {
        display: none;
    }
}

/* Stable formal login identity and lesson file action ---------------- */
.auth-formal-panel-shell .auth-copy {
    justify-content: flex-start;
    padding: clamp(2rem, 4vw, 3.6rem);
}

.auth-formal-panel-shell .auth-panel-brandline {
    flex: 0 0 auto;
    margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
    min-height: 54px;
}

.auth-panel-brand {
    min-width: 0;
}

.auth-panel-brand-mark {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 11px;
    display: flex;
    flex: 0 0 auto;
    height: 52px;
    justify-content: center;
    overflow: hidden;
    padding: 7px;
    width: 52px;
}

.auth-panel-brand-mark :is(img, i) {
    display: block;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.auth-panel-brand-mark i {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    justify-content: center;
}

.auth-panel-brand>span:last-child {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.auth-panel-brand>span:last-child strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-panel-roleline {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    gap: .85rem;
    padding-bottom: 1.1rem;
}

.auth-formal-panel-shell .auth-role-emblem {
    border-width: 5px;
    border-radius: 14px;
    flex: 0 0 auto;
    font-size: 1.45rem;
    height: 62px;
    margin: 0;
    width: 62px;
}

.auth-panel-rolemeta {
    display: grid;
    gap: .18rem;
}

.auth-panel-rolemeta small {
    color: rgba(255, 255, 255, .48);
    direction: ltr;
    font-size: .52rem;
    letter-spacing: .12em;
}

.auth-panel-rolemeta strong {
    color: #fff;
    font-size: .82rem;
    font-weight: 850;
}

.auth-panel-copybody {
    margin-top: clamp(1.35rem, 3vh, 2rem);
}

.auth-formal-panel-shell .auth-panel-copybody h1 {
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    line-height: 1.7;
    margin: .45rem 0 .65rem;
}

.auth-formal-panel-shell .auth-panel-copybody>p {
    color: rgba(255, 255, 255, .66);
    font-size: .78rem;
    line-height: 2;
    margin: 0;
    max-width: 560px;
}

.auth-formal-panel-shell .auth-panel-capabilities {
    gap: .45rem;
    margin-top: 1.15rem;
}

.auth-formal-panel-shell .auth-panel-capabilities span {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 8px;
    font-size: .68rem;
    min-height: 40px;
    padding: .45rem .55rem;
}

.auth-formal-panel-shell .auth-panel-capabilities i {
    background: color-mix(in srgb, var(--auth-panel-accent) 70%, transparent);
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
}

.auth-formal-panel-shell .auth-role-links {
    margin-top: auto;
    padding-top: 1.25rem;
}

.auth-formal-panel-shell .auth-role-links a {
    align-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    display: inline-flex;
    gap: .35rem;
}

.auth-access-card .auth-card-head>i {
    flex: 0 0 auto;
}

.lesson-download-player {
    align-content: center;
    column-gap: 1rem;
    grid-template-columns: 76px minmax(0, 520px);
    justify-content: center;
    justify-items: stretch;
    padding: clamp(1.25rem, 4vw, 3rem);
    row-gap: .9rem;
}

.lesson-download-visual {
    align-items: center;
    align-self: center;
    background: linear-gradient(145deg, #26304a, #303b5f);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    color: #7be0d2;
    display: flex;
    font-size: 1.8rem;
    height: 72px;
    justify-content: center;
    width: 72px;
}

.lesson-download-copy {
    align-self: center;
    display: grid;
    gap: .18rem;
    text-align: right;
}

.lesson-download-copy small {
    color: #7be0d2 !important;
    font-size: .5rem !important;
    font-weight: 800;
}

.lesson-download-copy strong {
    color: #fff;
    font-size: .82rem !important;
}

.lesson-download-copy p {
    color: rgba(255, 255, 255, .55);
    font-size: .55rem;
    line-height: 1.9;
    margin: 0;
}

.lesson-file-download-action {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 11px;
    color: #222b42;
    display: grid;
    gap: .65rem;
    grid-column: 1 / -1;
    grid-template-columns: 42px minmax(0, 1fr) 26px;
    margin-top: .25rem;
    padding: .65rem .75rem;
    text-align: right;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.lesson-file-download-action:hover {
    background: #f5f7ff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
    color: #222b42;
    transform: translateY(-2px);
}

.lesson-file-download-action>span {
    align-items: center;
    background: #eef0ff;
    border-radius: 8px;
    color: #5964d8;
    display: flex;
    font-size: 1.05rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.lesson-file-download-action>div {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.lesson-file-download-action strong {
    color: #222b42 !important;
    font-size: .64rem !important;
}

.lesson-file-download-action small {
    color: #778096 !important;
    direction: ltr;
    font-size: .47rem !important;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-file-download-action>i {
    color: #5964d8;
    font-size: .8rem;
}

@media (max-width: 767.98px) {
    .auth-formal-panel-shell .auth-copy {
        min-height: 0;
        padding: 1.25rem;
    }

    .auth-formal-panel-shell .auth-panel-brandline {
        margin-bottom: 1.2rem;
    }

    .auth-panel-brand-mark {
        height: 46px;
        width: 46px;
    }

    .auth-formal-panel-shell .auth-role-emblem {
        display: flex;
        height: 50px;
        width: 50px;
    }

    .auth-panel-copybody {
        margin-top: 1rem;
    }

    .auth-formal-panel-shell .auth-panel-copybody h1 {
        font-size: 1.25rem;
    }

    .auth-formal-panel-shell .auth-panel-copybody>p {
        font-size: .67rem;
    }

    .auth-formal-panel-shell .auth-panel-capabilities {
        display: none;
    }

    .auth-formal-panel-shell .auth-role-links {
        margin-top: .8rem;
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .auth-panel-brand small {
        letter-spacing: .08em;
    }

    .auth-panel-rolemeta small {
        display: none;
    }

    .lesson-download-player {
        grid-template-columns: 1fr;
        padding: 1.4rem 1rem;
        text-align: center;
    }

    .lesson-download-visual {
        justify-self: center;
    }

    .lesson-download-copy {
        text-align: center;
    }

    .lesson-file-download-action {
        grid-column: 1;
    }
}

/* Formal and readable client portal ---------------------------------- */
.client-portal-root {
    font-size: 17px;
}

.client-portal-body {
    --client-bg: #f2f5f8;
    --client-surface: #fff;
    --client-surface-soft: #f7f9fb;
    --client-border: #dce3ea;
    --client-text: #1d2d3e;
    --client-muted: #6c7b8a;
    --panel-accent: #315f8d;
    --panel-accent-soft: #e9f0f7;
    background-color: var(--client-bg);
    background-image: linear-gradient(rgba(43, 75, 106, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 75, 106, .025) 1px, transparent 1px);
    background-size: 28px 28px;
    line-height: 1.8;
}

.client-portal-glow {
    display: none;
}

.client-portal-header {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--client-border);
    box-shadow: 0 5px 18px rgba(28, 48, 68, .045);
}

.client-portal-header-inner {
    min-height: 82px;
}

.client-portal-brand-mark {
    background: linear-gradient(145deg, #254766, #376b96);
    border: 1px solid #284d70;
    border-radius: 9px;
    box-shadow: 0 7px 16px rgba(37, 71, 102, .18);
    height: 46px;
    width: 46px;
}

.client-portal-brand strong {
    font-size: .92rem;
    font-weight: 900;
}

.client-portal-brand small {
    font-size: .61rem;
}

.client-portal-nav {
    gap: .35rem;
}

.client-portal-nav a {
    border: 1px solid transparent;
    border-radius: 7px;
    color: #526376;
    font-size: .76rem;
    font-weight: 750;
    min-height: 42px;
    padding: .57rem .72rem;
}

.client-portal-nav a:hover {
    background: #f0f4f8;
    border-color: #e0e7ee;
    color: #2d567d;
}

.client-portal-nav a.active {
    background: #e9f0f7;
    border-color: #d4e0eb;
    color: #284f73;
}

.client-portal-action {
    border-radius: 7px;
    height: 42px;
    width: 42px;
}

.client-portal-avatar {
    background: linear-gradient(145deg, #315f8d, #244766);
    border-radius: 8px;
    font-size: .9rem;
    height: 44px;
    width: 44px;
}

.client-portal-user strong {
    font-size: .75rem;
}

.client-portal-user small {
    font-size: .58rem;
}

.client-portal-main {
    padding-top: 1.4rem;
}

.client-portal-pagehead {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: .7rem .85rem;
}

.client-portal-pagehead>div {
    border-right: 3px solid #315f8d;
    padding-right: .65rem;
}

.client-portal-pagehead>div span {
    font-size: .62rem;
}

.client-portal-pagehead h1 {
    font-size: 1.18rem;
}

.client-portal-pagehead>a {
    align-items: center;
    display: flex;
    font-size: .71rem;
    gap: .3rem;
}

.client-portal-alert {
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .8rem;
}

.client-welcome-card {
    background: linear-gradient(118deg, #1b334b 0%, #284f72 62%, #326a8a 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(24, 50, 74, .17);
    min-height: 235px;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.client-welcome-card::before {
    background: linear-gradient(135deg, transparent 55%, rgba(255, 255, 255, .04) 55%), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: auto, 24px 24px;
    opacity: 1;
}

.client-welcome-eyebrow {
    border-radius: 6px;
    font-size: .68rem;
}

.client-welcome-copy h2 {
    font-size: clamp(1.4rem, 2.45vw, 2rem);
    margin-top: .65rem;
}

.client-welcome-copy p {
    font-size: .83rem;
    max-width: 720px;
}

.client-welcome-actions .btn {
    border-radius: 7px;
    font-size: .75rem;
    min-height: 42px;
}

.client-welcome-visual>span {
    background: rgba(255, 255, 255, .07);
    border-radius: 18px;
    font-size: 3.5rem;
    height: 145px;
    transform: none;
    width: 145px;
}

.client-welcome-visual>span i {
    transform: none;
}

.client-welcome-visual>i {
    border-radius: 8px;
    color: #315f8d;
}

.client-welcome-visual>i:nth-of-type(1) {
    transform: none;
}

.client-welcome-visual>i:nth-of-type(2) {
    transform: none;
}

.client-stat-grid {
    gap: .8rem;
    margin: .9rem 0;
}

.client-stat-card {
    border-radius: 10px;
    border-top: 3px solid #315f8d;
    gap: .75rem;
    min-height: 112px;
    padding: .9rem;
}

.client-stat-card:hover {
    box-shadow: 0 9px 22px rgba(31, 54, 76, .07);
    transform: translateY(-1px);
}

.client-stat-card>span {
    border-radius: 8px;
    font-size: 1.25rem;
    height: 48px;
    width: 48px;
}

.client-stat-card small {
    font-size: .64rem;
}

.client-stat-card strong {
    font-size: 1.3rem;
}

.client-stat-card em {
    font-size: .57rem;
}

.client-stat-card.is-wallet {
    border-top-color: #25877f;
}

.client-stat-card.is-free {
    border-top-color: #b77a28;
}

.client-stat-card.is-discover {
    border-top-color: #477bb1;
}

.client-dashboard-grid {
    gap: .8rem;
}

.client-dashboard-block,
.client-quick-block,
.client-recommendations {
    border-radius: 11px;
    padding: 1rem;
}

.client-block-head {
    border-bottom: 1px solid var(--client-border);
    margin-bottom: .8rem;
    padding-bottom: .7rem;
}

.client-block-head>div span {
    font-size: .59rem;
}

.client-block-head h3 {
    font-size: .95rem;
}

.client-block-head>a {
    font-size: .68rem;
}

.client-order-item {
    border-color: var(--client-border);
    border-radius: 8px;
    padding: .62rem;
}

.client-order-item:hover {
    border-color: #bfcddb;
    transform: none;
}

.client-order-icon {
    background: #e9f0f7;
    border-radius: 7px;
    color: #315f8d;
}

.client-order-item strong {
    font-size: .73rem;
}

.client-order-item small {
    font-size: .58rem;
}

.client-order-item em {
    font-size: .57rem;
}

.client-order-item b {
    font-size: .71rem;
}

.client-quick-grid a {
    border-color: var(--client-border);
    border-radius: 8px;
    min-height: 108px;
}

.client-quick-grid a:hover {
    border-color: #bfcddb;
    transform: none;
}

.client-quick-grid a>span {
    background: #e9f0f7;
    border-radius: 7px;
    color: #315f8d;
}

.client-quick-grid strong {
    font-size: .7rem;
}

.client-quick-grid small {
    font-size: .56rem;
}

.client-recommendation-card {
    border-radius: 9px;
}

.client-recommendation-card:hover {
    box-shadow: 0 9px 22px rgba(31, 54, 76, .08);
    transform: translateY(-1px);
}

.client-recommendation-image i {
    color: #315f8d;
}

.client-recommendation-body small {
    font-size: .55rem;
}

.client-recommendation-body strong {
    font-size: .73rem;
}

.client-recommendation-body em {
    color: #315f8d;
    font-size: .65rem;
}

.client-section-intro {
    border-radius: 10px;
    padding: 1rem;
}

.client-section-intro-icon {
    background: #e9f0f7;
    border-radius: 8px;
    color: #315f8d;
}

.client-section-intro span {
    font-size: .6rem;
}

.client-section-intro h2 {
    font-size: 1rem;
}

.client-section-intro p {
    font-size: .68rem;
}

.client-purchase-card {
    border-radius: 10px;
}

.client-purchase-number small,
.client-purchase-card time {
    font-size: .59rem;
}

.client-purchase-number strong {
    font-size: .85rem;
}

.client-purchase-status {
    font-size: .59rem;
}

.client-purchase-items>div {
    border: 1px solid var(--client-border);
    display: flex;
}

.client-purchase-items small {
    font-size: .55rem;
}

.client-purchase-items strong {
    font-size: .7rem;
}

.client-purchase-content-link {
    align-items: center;
    background: #e9f0f7;
    border: 1px solid #d4e0eb;
    border-radius: 7px;
    color: #294f73;
    display: flex;
    font-size: .63rem;
    font-weight: 800;
    gap: .35rem;
    margin-right: auto;
    min-height: 36px;
    padding: .42rem .62rem;
    text-decoration: none;
    transition: .16s ease;
}

.client-purchase-content-link:hover {
    background: #315f8d;
    border-color: #315f8d;
    color: #fff;
}

.client-purchase-content-link>i:last-child {
    font-size: .55rem;
    margin-right: .15rem;
}

.client-purchase-card>footer span {
    font-size: .6rem;
}

.client-purchase-card>footer strong {
    color: #315f8d;
    font-size: .85rem;
}

.client-friendly-empty {
    border-radius: 9px;
}

.client-friendly-empty strong {
    font-size: .75rem;
}

.client-friendly-empty p {
    font-size: .6rem;
}

.client-friendly-empty>a {
    color: #315f8d;
    font-size: .65rem;
}

.client-portal-body :is(.btn, .form-control, .form-select, .table) {
    font-size: .76rem;
}

.client-portal-body .panel-card {
    border-radius: 11px;
}

.client-portal-body .btn-primary {
    background: #315f8d;
    border-color: #315f8d;
}

.client-portal-body .btn-outline-primary {
    border-color: #315f8d;
    color: #315f8d;
}

.client-portal-body .learning-workspace {
    --learning-accent: #315f8d;
    --learning-accent-soft: #e9f0f7;
}

.client-portal-body .learning-course-banner {
    background: linear-gradient(125deg, #1b334b 0%, #284f72 65%, #326a8a 100%);
}

html[data-panel-theme="dark"] .client-portal-body {
    --client-bg: #101820;
    --client-surface: #18232d;
    --client-surface-soft: #1d2a35;
    --client-border: #2e3c49;
    --client-text: #edf3f7;
    --client-muted: #a0adba;
    --panel-accent-soft: #24394c;
    background-color: var(--client-bg);
}

html[data-panel-theme="dark"] .client-portal-header {
    background: rgba(24, 35, 45, .95);
    border-color: var(--client-border);
}

html[data-panel-theme="dark"] .client-portal-nav a:hover,
html[data-panel-theme="dark"] .client-portal-nav a.active,
html[data-panel-theme="dark"] .client-order-icon,
html[data-panel-theme="dark"] .client-quick-grid a>span,
html[data-panel-theme="dark"] .client-purchase-content-link {
    background: #24394c;
    border-color: #35506a;
    color: #b9d3ea;
}

html[data-panel-theme="dark"] .client-purchase-content-link:hover {
    background: #396b96;
    color: #fff;
}

@media (max-width: 767.98px) {
    .client-portal-root {
        font-size: 16.5px;
    }

    .client-portal-pagehead {
        align-items: flex-start;
    }

    .client-welcome-card {
        border-radius: 10px;
        min-height: 0;
    }

    .client-purchase-items>div {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .client-purchase-content-link {
        justify-content: center;
        margin-right: 0;
        width: 100%;
    }
}

/* Inline course category creator ------------------------------------- */
.admin-inline-field-head {
    align-items: center;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    margin-bottom: .45rem;
}

.admin-inline-field-head .form-label {
    margin: 0;
}

.admin-inline-create-button {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: inline-flex;
    font-size: .62rem;
    font-weight: 800;
    gap: .3rem;
    min-height: 31px;
    padding: .35rem .55rem;
    transition: background .16s ease, border-color .16s ease;
}

.admin-inline-create-button:hover {
    background: #dfeaf4;
    border-color: #b8cada;
}

.admin-inline-category-modal .modal-dialog {
    max-width: 560px;
}

.admin-inline-category-modal .modal-content {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    box-shadow: 0 24px 65px rgba(20, 39, 59, .22);
    overflow: hidden;
}

.admin-inline-category-modal .modal-header {
    align-items: center;
    background: linear-gradient(135deg, #18314d, #28577e);
    border: 0;
    color: #fff;
    min-height: 86px;
    padding: 1rem 1.15rem;
}

.admin-inline-category-modal .btn-close {
    filter: brightness(0) invert(1);
    opacity: .72;
}

.admin-inline-modal-heading {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.admin-inline-modal-heading>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    display: flex;
    font-size: 1.05rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.admin-inline-modal-heading>div {
    display: grid;
    gap: .12rem;
}

.admin-inline-modal-heading small {
    color: rgba(255, 255, 255, .6);
    font-size: .55rem;
}

.admin-inline-modal-heading .modal-title {
    color: #fff;
    font-size: .88rem;
    font-weight: 900;
}

.admin-inline-category-modal .modal-body {
    background: var(--panel-bg);
    padding: 1rem;
}

.admin-inline-category-modal .modal-body> :not(.admin-inline-modal-note):not(.alert) {
    background: var(--panel-surface);
}

.admin-inline-modal-note {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-right: 3px solid var(--panel-accent);
    border-radius: 7px;
    color: var(--panel-muted);
    display: flex;
    font-size: .6rem;
    gap: .45rem;
    line-height: 1.9;
    margin-bottom: .85rem;
    padding: .6rem .7rem;
}

.admin-inline-modal-note i {
    color: var(--panel-accent);
    font-size: .85rem;
}

.admin-inline-category-modal .modal-body>.mb-3,
.admin-inline-category-modal .modal-body>div:not(.admin-inline-modal-note):not(.alert) {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .75rem;
}

.admin-inline-category-modal .form-label {
    color: var(--panel-text);
    font-size: .67rem;
    font-weight: 800;
}

.admin-inline-category-modal .form-control {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    min-height: 44px;
}

.admin-inline-category-modal .invalid-feedback {
    font-size: .55rem;
}

.admin-inline-category-modal .modal-footer {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    gap: .4rem;
    padding: .75rem 1rem;
}

.admin-inline-category-modal .modal-footer .btn {
    border-radius: 6px;
    min-width: 105px;
}

html[data-panel-theme="dark"] .admin-inline-create-button:hover {
    background: #26384b;
    border-color: #41566e;
}

/* Password visibility and explicit file actions --------------------- */
.password-control {
    position: relative;
    width: 100%;
}

.password-control>.form-control {
    padding-left: 3rem !important;
}

.password-visibility-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--panel-muted, #6f7d8f);
    display: flex;
    height: 34px;
    justify-content: center;
    left: .45rem;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background .16s ease, color .16s ease;
    width: 34px;
    z-index: 4;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
    background: rgba(49, 95, 141, .1);
    color: var(--panel-accent, #315f8d);
    outline: 0;
}

.password-visibility-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.auth-access-card .auth-input-wrap.password-control .form-control[dir="ltr"] {
    padding-left: 3rem !important;
}

.file-add-action {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    min-height: 72px;
    padding: .75rem;
}

.file-add-action .btn {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: .35rem;
    margin: 0;
    white-space: nowrap;
}

.file-add-action>span {
    color: var(--panel-muted);
    font-size: .68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-employee-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.organization-employee-actions .btn {
    min-height: 44px;
}

html[data-panel-theme="dark"] .password-visibility-toggle:hover,
html[data-panel-theme="dark"] .password-visibility-toggle:focus-visible {
    background: rgba(140, 163, 193, .14);
}

@media (max-width: 575.98px) {
    .admin-inline-field-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-inline-create-button {
        width: 100%;
        justify-content: center;
    }

    .admin-inline-category-modal .modal-dialog {
        margin: .65rem;
    }

    .organization-employee-actions,
    .organization-employee-actions .btn {
        width: 100%;
    }
}

/* Course learning path builder and public roadmap ------------------- */
.course-learning-path-builder {
    overflow: hidden;
}

.learning-path-builder-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 1rem !important;
}

.learning-path-builder-head .formal-eyebrow {
    margin-bottom: .3rem;
}

.learning-path-builder-list {
    display: grid;
    gap: .75rem;
}

.learning-path-step-editor {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .7rem;
    grid-template-columns: 38px 42px minmax(0, 1fr) auto;
    padding: .75rem;
    transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.learning-path-step-editor:hover {
    border-color: #aebdce;
    box-shadow: 0 5px 18px rgba(20, 39, 59, .055);
}

.learning-path-step-editor.is-sort-chosen,
.learning-path-step-editor.is-dragging {
    border-color: #63809f;
    box-shadow: 0 12px 30px rgba(20, 39, 59, .14);
    opacity: .82;
}

.learning-step-drag {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--panel-border);
    color: var(--panel-muted);
    cursor: grab;
    display: flex;
    font-size: 1.15rem;
    justify-content: center;
}

.learning-step-drag:active {
    cursor: grabbing;
}

.learning-step-sequence {
    align-items: center;
    background: #233f62;
    border: 3px solid #dfe7f0;
    border-radius: 50%;
    color: #fff;
    direction: ltr;
    display: flex;
    font-size: .72rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.learning-step-fields {
    display: grid;
    gap: .7rem;
    grid-template-columns: minmax(210px, .75fr) minmax(300px, 1.25fr);
}

.learning-step-fields .form-label {
    margin-bottom: .3rem;
}

.learning-step-fields textarea {
    min-height: 78px;
    resize: vertical;
}

.learning-step-actions {
    align-items: center;
    display: flex;
    gap: .3rem;
}

.learning-step-actions button {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-muted);
    display: flex;
    height: 34px;
    justify-content: center;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
    width: 34px;
}

.learning-step-actions button:hover:not(:disabled) {
    background: var(--panel-accent-soft);
    border-color: #a8b8ca;
    color: var(--panel-accent);
}

.learning-step-actions button.is-danger:hover {
    background: #fff0f1;
    border-color: #e5a9ae;
    color: #b4232c;
}

.learning-step-actions button:disabled {
    cursor: not-allowed;
    opacity: .3;
}

.learning-path-builder-empty {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 2rem;
    text-align: center;
}

.learning-path-builder-empty[hidden] {
    display: none;
}

.learning-path-builder-empty>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.35rem;
    height: 58px;
    justify-content: center;
    margin-bottom: .75rem;
    width: 58px;
}

.learning-path-builder-empty strong {
    color: var(--panel-text);
    font-size: .9rem;
}

.learning-path-builder-empty small {
    color: var(--panel-muted);
    margin: .35rem 0 1rem;
}

.learning-path-builder-footer {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

.learning-path-builder-footer>span {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .7rem;
    gap: .4rem;
}

.course-learning-path-section {
    background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-bottom: 1px solid #e3e9ef;
    padding: 3.4rem 0;
}

.course-learning-path-heading {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 auto 2rem;
    max-width: 980px;
}

.course-learning-path-heading>div>span {
    align-items: center;
    color: #315f8d;
    display: flex;
    font-size: .78rem;
    font-weight: 900;
    gap: .4rem;
    margin-bottom: .45rem;
}

.course-learning-path-heading h2 {
    color: #182b3e;
    font-size: clamp(1.45rem, 2.7vw, 2rem);
    font-weight: 950;
    margin: 0 0 .35rem;
}

.course-learning-path-heading p {
    color: #6d7c8c;
    line-height: 1.9;
    margin: 0;
}

.course-learning-path-heading>strong {
    background: #eaf0f6;
    border: 1px solid #d4dfe9;
    border-radius: 999px;
    color: #294e72;
    flex: 0 0 auto;
    font-size: .72rem;
    padding: .5rem .75rem;
}

.course-learning-roadmap {
    margin: 0 auto;
    max-width: 980px;
}

.course-learning-roadmap-step {
    display: grid;
    gap: 1rem;
    grid-template-columns: 68px minmax(0, 1fr);
    min-height: 145px;
    position: relative;
}

.course-learning-step-marker {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

.course-learning-step-marker::after {
    background: linear-gradient(#91a9bf, #dce5ed);
    bottom: 0;
    content: '';
    position: absolute;
    top: 48px;
    width: 2px;
}

.course-learning-roadmap-step:last-child .course-learning-step-marker::after {
    display: none;
}

.course-learning-step-marker span {
    align-items: center;
    background: #233f62;
    border: 5px solid #e8eef4;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #c8d5e1;
    color: #fff;
    direction: ltr;
    display: flex;
    font-size: .72rem;
    font-weight: 900;
    height: 46px;
    justify-content: center;
    position: relative;
    width: 46px;
    z-index: 1;
}

.course-learning-step-marker i {
    bottom: 18px;
    color: #8da2b7;
    font-size: .72rem;
    position: absolute;
    z-index: 1;
}

.course-learning-roadmap-step:last-child .course-learning-step-marker i {
    background: #f7fafc;
    bottom: auto;
    color: #b88a43;
    font-size: .9rem;
    padding: .25rem;
    top: 52px;
}

.course-learning-step-card {
    align-self: start;
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 10px;
    box-shadow: 0 7px 25px rgba(24, 43, 62, .055);
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.course-learning-step-card::before {
    background: #fff;
    border-bottom: 1px solid #dfe7ee;
    border-right: 1px solid #dfe7ee;
    content: '';
    height: 12px;
    position: absolute;
    right: -7px;
    top: 16px;
    transform: rotate(-45deg);
    width: 12px;
}

.course-learning-step-card:hover {
    border-color: #b9c9d7;
    box-shadow: 0 12px 32px rgba(24, 43, 62, .09);
    transform: translateX(-3px);
}

.course-learning-step-card small {
    color: #8291a0;
    font-size: .68rem;
    font-weight: 750;
}

.course-learning-step-card h3 {
    color: #1a3148;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.7;
    margin: .25rem 0;
}

.course-learning-step-card p {
    color: #647585;
    line-height: 2;
    margin: 0;
    white-space: pre-line;
}

html[data-panel-theme="dark"] .learning-path-step-editor {
    background: #111a25;
}

html[data-panel-theme="dark"] .learning-path-step-editor:hover {
    border-color: #53657b;
    box-shadow: none;
}

html[data-panel-theme="dark"] .learning-step-sequence {
    background: #3f5f82;
    border-color: #233246;
}

html[data-panel-theme="dark"] .learning-step-actions button.is-danger:hover {
    background: #3b2025;
    border-color: #78444b;
    color: #ffb3ba;
}

@media (max-width: 991.98px) {
    .learning-path-step-editor {
        align-items: start;
        grid-template-columns: 34px 38px minmax(0, 1fr);
    }

    .learning-step-fields {
        grid-template-columns: 1fr;
    }

    .learning-step-actions {
        grid-column: 3;
    }
}

@media (max-width: 575.98px) {

    .learning-path-builder-head,
    .learning-path-builder-footer,
    .course-learning-path-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .learning-path-builder-head .btn,
    .learning-path-builder-footer .btn {
        width: 100%;
    }

    .learning-path-step-editor {
        gap: .5rem;
        grid-template-columns: 30px 34px minmax(0, 1fr);
        padding: .6rem;
    }

    .learning-step-drag {
        border-left: 0;
    }

    .learning-step-sequence {
        border-width: 2px;
        height: 32px;
        width: 32px;
    }

    .learning-step-fields,
    .learning-step-actions {
        grid-column: 1/-1;
    }

    .learning-step-actions {
        justify-content: flex-end;
    }

    .course-learning-path-section {
        padding: 2.4rem 0;
    }

    .course-learning-path-heading>strong {
        align-self: flex-start;
    }

    .course-learning-roadmap-step {
        gap: .55rem;
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 130px;
    }

    .course-learning-step-marker span {
        border-width: 3px;
        height: 38px;
        width: 38px;
    }

    .course-learning-step-marker::after {
        top: 40px;
    }

    .course-learning-step-card {
        padding: .85rem;
    }

    .course-learning-step-card::before {
        top: 12px;
    }
}

/* Final role and course-editor overrides intentionally follow the legacy theme. */
.panel-role-admin {
    --panel-accent: #244d7c;
    --panel-accent-soft: #e9f0f8;
    --formal-gold: #b58a4a;
}

.panel-role-teacher {
    --panel-accent: #7a3048;
    --panel-accent-soft: #f8edf1;
    --formal-gold: #b8798d;
}

.panel-role-organization {
    --panel-accent: #0f766e;
    --panel-accent-soft: #e6f5f2;
    --formal-gold: #4ca69d;
}

.panel-role-teacher .panel-sidebar {
    background: linear-gradient(180deg, #321927, #23131d 58%, #180d14);
}

.panel-role-teacher .panel-nav a.active,
.panel-role-teacher .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(118, 47, 71, .78), rgba(72, 30, 46, .65));
    border-color: rgba(220, 154, 175, .18);
}

.panel-role-teacher .panel-nav a.active::before {
    background: #d69aaf;
}

.panel-role-teacher .btn-primary {
    background: #7a3048;
    border-color: #7a3048;
}

.panel-role-teacher .btn-primary:hover {
    background: #61243a;
    border-color: #61243a;
}

.panel-role-admin .course-editor-tabbar {
    background: linear-gradient(180deg, #fff, #f7f9fc);
    border: 1px solid #d9e1eb;
    border-radius: 12px;
    padding: .55rem;
}

.panel-role-admin .course-editor-tabbar .nav {
    display: grid;
    gap: .42rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel-role-admin .course-editor-tabbar .nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    display: grid;
    gap: .6rem;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 62px;
    padding: .58rem .65rem;
    text-align: right;
}

.panel-role-admin .course-editor-tabbar .nav-link>i {
    background: #eef2f7;
    border: 1px solid #dde5ee;
    border-radius: 7px;
    color: #50637a;
    height: 40px;
    width: 40px;
}

.panel-role-admin .course-editor-tabbar .nav-link strong {
    font-size: .78rem;
}

.panel-role-admin .course-editor-tabbar .nav-link small {
    font-size: .63rem;
    line-height: 1.5;
}

.panel-role-admin .course-editor-tabbar .nav-link.active {
    background: #eef4fb;
    border-color: #c9d8ea;
    box-shadow: inset 3px 0 #244d7c;
    color: #173c67;
}

.panel-role-admin .course-editor-tabbar .nav-link.active>i {
    background: #244d7c;
    border-color: #244d7c;
    color: #fff;
}

html[data-panel-theme="dark"] .panel-role-admin {
    --panel-accent: #8fb3dc;
    --panel-accent-soft: #1d2d40;
}

html[data-panel-theme="dark"] .panel-role-teacher {
    --panel-accent: #dfa5b8;
    --panel-accent-soft: #38212c;
}

html[data-panel-theme="dark"] .panel-role-organization {
    --panel-bg: #081513;
    --panel-surface: #10211f;
    --panel-surface-soft: #0c1b19;
    --panel-border: #27413d;
    --panel-text: #e5f3f1;
    --panel-muted: #91aaa6;
    --panel-accent: #72cfc5;
    --panel-accent-soft: #173532;
}

html[data-panel-theme="dark"] .panel-role-admin .course-editor-tabbar {
    background: #111a25;
    border-color: #2b3848;
}

html[data-panel-theme="dark"] .panel-role-admin .course-editor-tabbar .nav-link.active {
    background: #1c2b3c;
    border-color: #3a4b60;
    color: #e0eaf5;
}

@media (max-width:991.98px) {
    .panel-role-admin .course-editor-tabbar .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:767.98px) {
    .panel-role-admin .course-editor-tabbar .nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .panel-role-admin .course-editor-tabbar .nav-link {
        flex: 0 0 235px;
    }
}

/* Formal organization workspace ---------------------------------------- */
.panel-role-organization {
    --bs-body-font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    --ck-font-face: "IRANSansPanel", Tahoma, Arial, sans-serif;
    --panel-bg: #f2f5f4;
    --panel-surface: #fff;
    --panel-surface-soft: #f6f8f7;
    --panel-border: #d8e1df;
    --panel-text: #172826;
    --panel-muted: #647773;
    --panel-accent: #176b63;
    --panel-accent-soft: #e9f3f1;
    --formal-gold: #a9844b;
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif;
    font-size: .88rem;
}

.panel-role-organization :is(button, input, optgroup, select, textarea, table, .select2-container, .swal2-popup, .datepicker-plot-area, .ck) {
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif !important;
}

.panel-role-organization .panel-layout {
    grid-template-columns: 244px minmax(0, 1fr);
}

.panel-role-organization .panel-content {
    max-width: 1540px;
    padding: 1rem 1.15rem 1.5rem;
    width: 100%;
}

.panel-role-organization .panel-content>* {
    animation: organization-panel-enter .24s ease both;
}

@keyframes organization-panel-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.panel-role-organization .panel-sidebar,
html[data-panel-theme="dark"] .panel-role-organization .panel-sidebar {
    background: #102d2a;
    box-shadow: -4px 0 18px rgba(8, 34, 31, .12);
}

.panel-role-organization .panel-sidebar::before {
    background-image: linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.panel-role-organization .panel-sidebar>* {
    position: relative;
    z-index: 1;
}

.panel-role-organization .panel-sidebar-head {
    min-height: 84px;
    padding: .8rem .85rem;
}

.panel-role-organization .organization-sidebar-brand {
    gap: .65rem;
    min-width: 0;
}

.panel-role-organization .organization-sidebar-brand .organization-sidebar-logo,
.panel-role-organization .organization-sidebar-brand>i {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 7px;
    flex: 0 0 46px;
    height: 46px;
    object-fit: contain;
    padding: 5px;
    width: 46px;
}

.panel-role-organization .organization-sidebar-brand>i {
    align-items: center;
    color: #176b63;
    display: flex;
    font-size: 1.15rem;
    justify-content: center;
}

.panel-role-organization .organization-sidebar-brand span {
    min-width: 0;
}

.panel-role-organization .organization-sidebar-brand strong {
    display: block;
    font-size: .78rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-role-organization .organization-sidebar-brand small {
    color: #9fc2bd;
    font-size: .56rem;
}

.panel-role-organization .organization-sidebar-brand em {
    color: #6e9c96;
    font-size: .4rem;
    letter-spacing: .12em;
}

.panel-role-organization .panel-live-clock {
    background: rgba(3, 21, 19, .35);
    border-color: rgba(255, 255, 255, .07);
    border-radius: 6px;
}

.panel-role-organization .panel-nav-label {
    color: #789f9a;
    font-size: .58rem;
    font-weight: 750;
}

.panel-role-organization .panel-nav a {
    border-radius: 5px;
    color: #b6ceca;
    font-size: .73rem;
    font-weight: 700;
    min-height: 39px;
}

.panel-role-organization .panel-nav a i {
    color: #83aaa5;
}

.panel-role-organization .panel-nav a.active,
.panel-role-organization .panel-nav a:hover {
    background: #19443f;
    border-color: #2d5d57;
    color: #fff;
    transform: none;
}

.panel-role-organization .panel-nav a.active {
    border-right: 3px solid #b99a64;
}

.panel-role-organization .panel-sidebar-profile {
    background: rgba(3, 21, 19, .42);
}

.panel-role-organization .panel-topbar {
    backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--panel-border);
    min-height: 68px;
}

.panel-role-organization .panel-breadcrumb i {
    color: var(--formal-gold);
}

.panel-role-organization .panel-card {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 2px 9px rgba(20, 56, 51, .035);
}

.panel-role-organization .panel-card:hover {
    border-color: #c6d3d0;
    box-shadow: 0 4px 14px rgba(20, 56, 51, .055);
    transform: none;
}

.panel-role-organization .btn {
    border-radius: 5px;
    font-weight: 750;
}

.panel-role-organization .form-control,
.panel-role-organization .form-select {
    border-radius: 5px;
}

.panel-role-organization .status-pill {
    background: #edf2f1;
    border: 1px solid #d8e2df;
    border-radius: 4px;
    color: #49615d;
}

.organization-workspace-hero {
    align-items: center;
    background: #173f3a;
    border: 1px solid #0d332e;
    border-radius: 9px;
    box-shadow: none;
    color: #fff;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 220px;
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
}

.organization-workspace-hero::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.organization-workspace-copy,
.organization-workspace-mark {
    position: relative;
    z-index: 1;
}

.organization-workspace-copy h2 {
    font-size: 1.35rem;
    font-weight: 950;
    margin: .45rem 0;
}

.organization-workspace-copy p {
    color: #c9dcda;
    line-height: 2;
    margin: 0 0 1rem;
    max-width: 760px;
}

.organization-workspace-mark {
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding-right: 1.5rem;
}

.organization-workspace-mark>span {
    align-items: center;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    display: flex;
    height: 94px;
    justify-content: center;
    overflow: hidden;
    padding: .5rem;
    width: 94px;
}

.organization-workspace-mark img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.organization-workspace-mark i {
    color: #176b63;
    font-size: 2rem;
}

.organization-workspace-mark small {
    color: #8fb8b3;
    direction: ltr;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .12em;
    margin-top: .65rem;
}

.panel-role-organization .teacher-quick-dock {
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel-role-organization .teacher-quick-dock a {
    border-radius: 7px;
    min-height: 76px;
}

.panel-role-organization .teacher-quick-dock a:hover {
    box-shadow: none;
    transform: translateY(-1px);
}

.panel-role-organization .teacher-kpi-card {
    border-radius: 7px;
    border-top: 3px solid var(--panel-accent);
}

.panel-role-organization .teacher-kpi-icon {
    align-items: center;
    background: var(--panel-accent-soft) !important;
    border-radius: 5px;
    color: var(--panel-accent) !important;
    display: flex;
    justify-content: center;
}

.organization-course-index-head {
    align-items: center;
    background: #173f3a;
    border: 1px solid #0e332f;
    border-right: 4px solid var(--formal-gold);
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 140px;
    padding: 1.25rem 1.35rem;
}

.organization-course-index-head h2 {
    font-size: 1.15rem;
    font-weight: 950;
    margin: 0 0 .35rem;
}

.organization-course-index-head p {
    color: #bfd3d0;
    font-size: .72rem;
    line-height: 1.9;
    margin: 0;
}

.organization-course-index-head .formal-eyebrow {
    color: #d1b881;
}

.organization-course-index-seal {
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    gap: .08rem;
    grid-template-columns: 40px auto;
    min-width: 165px;
    padding-right: 1.2rem;
}

.organization-course-index-seal>i {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    display: flex;
    font-size: 1rem;
    grid-row: 1/3;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.organization-course-index-seal small {
    color: #abc7c3;
    font-size: .53rem;
}

.organization-course-index-seal strong {
    font-size: 1.1rem;
}

.organization-course-summary {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.organization-course-summary article {
    align-items: center;
    border-left: 1px solid var(--panel-border);
    display: flex;
    gap: .65rem;
    min-height: 76px;
    padding: .65rem .8rem;
}

.organization-course-summary article:last-child {
    border-left: 0;
}

.organization-course-summary article>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    font-size: .92rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.organization-course-summary small,
.organization-course-summary strong {
    display: block;
}

.organization-course-summary small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.organization-course-summary strong {
    color: var(--panel-text);
    font-size: .95rem;
}

.organization-course-filters {
    align-items: center;
    display: flex;
    gap: .5rem;
    padding: .65rem !important;
}

.organization-filter-search {
    flex: 1;
    position: relative;
}

.organization-filter-search i {
    color: var(--panel-muted);
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
}

.organization-filter-search input {
    padding-right: 2.25rem;
}

.organization-course-filters select {
    max-width: 220px;
}

.organization-course-register {
    display: grid;
    gap: .6rem;
}

.organization-course-record {
    align-items: center;
    display: grid;
    gap: .9rem;
    grid-template-columns: 118px minmax(220px, 1.15fr) minmax(340px, 1fr) 175px;
    padding: .7rem !important;
}

.organization-course-cover {
    border-radius: 5px;
    height: 78px;
    overflow: hidden;
    position: relative;
}

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

.organization-course-cover span {
    background: rgba(18, 35, 33, .88);
    bottom: .35rem;
    color: #fff;
    font-size: .5rem;
    padding: .18rem .35rem;
    position: absolute;
    right: .35rem;
}

.organization-course-cover span.is-published {
    background: rgba(22, 107, 99, .92);
}

.organization-course-identity {
    min-width: 0;
}

.organization-course-identity>small {
    color: var(--formal-gold);
    font-size: .5rem;
    font-weight: 850;
}

.organization-course-identity h3 {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 900;
    margin: .25rem 0 .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-course-identity p {
    color: var(--panel-muted);
    font-size: .55rem;
    margin: 0;
}

.organization-course-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
}

.organization-course-metrics div {
    border-right: 1px solid var(--panel-border);
    padding: .15rem .55rem;
}

.organization-course-metrics div:first-child {
    border-right: 0;
}

.organization-course-metrics dt {
    color: var(--panel-muted);
    font-size: .5rem;
}

.organization-course-metrics dd {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
    margin: .2rem 0 0;
}

.organization-course-record-action {
    align-items: flex-end;
    display: grid;
    gap: .45rem;
}

.organization-course-record-action small {
    color: var(--panel-muted);
    font-size: .49rem;
    text-align: left;
}

.organization-course-record-action .btn {
    font-size: .62rem;
}

.organization-course-assignment {
    display: grid;
    gap: .85rem;
}

.organization-course-assignment-head {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.organization-course-assignment-head>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
}

.organization-course-assignment-head>div {
    display: grid;
    gap: .12rem;
}

.organization-course-assignment-head strong {
    color: var(--panel-text);
    font-size: .78rem;
}

.organization-course-assignment-head small {
    color: var(--panel-muted);
    font-size: .61rem;
    line-height: 1.8;
}

.organization-course-assignment-grid {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.5fr) auto;
}

.organization-course-assignment-grid>.btn {
    min-height: 42px;
}

.organization-student-assignment {
    display: grid;
    gap: .75rem;
}

.organization-student-assignment-actions {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(280px, 1fr) auto auto;
}

.organization-student-assignment-actions>span {
    color: var(--panel-muted);
    font-size: .62rem;
    padding-bottom: .7rem;
    white-space: nowrap;
}

.organization-student-assignment-actions>span strong {
    color: var(--panel-accent);
    font-size: .8rem;
}

.organization-course-dossier {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 4px solid var(--formal-gold);
    border-radius: 8px;
    display: grid;
    gap: .9rem;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    padding: .8rem;
}

.organization-course-dossier>img {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    height: 72px;
    object-fit: cover;
    width: 104px;
}

.organization-course-dossier h2 {
    color: var(--panel-text);
    font-size: .92rem;
    font-weight: 950;
    margin: 0 0 .3rem;
}

.organization-course-dossier p {
    color: var(--panel-muted);
    font-size: .57rem;
    margin: 0;
}

.organization-course-dossier-actions {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.organization-course-tabbar {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .45rem;
}

.organization-course-tabbar .nav {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.organization-course-tabbar .nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--panel-muted);
    display: grid;
    gap: .5rem;
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 58px;
    padding: .45rem .5rem;
    text-align: right;
}

.organization-course-tabbar .nav-link>i {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.organization-course-tabbar .nav-link span {
    display: grid;
}

.organization-course-tabbar .nav-link strong {
    color: var(--panel-text);
    font-size: .65rem;
}

.organization-course-tabbar .nav-link small {
    font-size: .5rem;
    line-height: 1.7;
}

.organization-course-tabbar .nav-link.active {
    background: var(--panel-accent-soft);
    border-color: #c8dad7;
    color: var(--panel-accent);
}

.organization-course-tabbar .nav-link.active>i {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.organization-course-tab-content>.tab-pane {
    outline: 0;
}

.organization-course-details-form {
    display: grid;
    gap: .85rem;
}

.organization-details-heading {
    align-items: center;
    background: linear-gradient(110deg, #153c38, #1d514b);
    border: 1px solid #0e332f;
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: .8rem;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    min-height: 92px;
    padding: .85rem 1rem;
    position: relative;
}

.organization-details-heading::after {
    background: linear-gradient(135deg, transparent 62%, rgba(255, 255, 255, .045) 62%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.organization-details-heading>* {
    position: relative;
    z-index: 1;
}

.organization-details-heading-icon {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    display: flex;
    font-size: 1.05rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.organization-details-heading .formal-eyebrow {
    color: #d8c08e;
}

.organization-details-heading h2 {
    color: #fff;
    font-size: .9rem;
    font-weight: 950;
    margin: .18rem 0;
}

.organization-details-heading p {
    color: #bad0cc;
    font-size: .55rem;
    margin: 0;
}

.organization-details-access {
    align-items: center;
    background: rgba(5, 31, 29, .36);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    display: flex;
    gap: .5rem;
    min-width: 220px;
    padding: .55rem .65rem;
}

.organization-details-access>i {
    color: #d8c08e;
    font-size: .9rem;
}

.organization-details-access>span {
    display: grid;
}

.organization-details-access strong {
    color: #fff;
    font-size: .56rem;
}

.organization-details-access small {
    color: #9fbdb8;
    font-size: .46rem;
    margin-top: .08rem;
}

.organization-details-layout {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) 310px;
}

.organization-details-main,
.organization-details-aside {
    display: grid;
    gap: .85rem;
}

.organization-details-section,
.organization-details-media,
.organization-details-locked {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .9rem;
}

.organization-details-section {
    border-top: 3px solid #315f5a;
}

.organization-details-section-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    margin-bottom: .85rem;
    padding-bottom: .7rem;
}

.organization-details-section-head>span,
.organization-details-aside-title>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.organization-details-section-head>div,
.organization-details-aside-title>div {
    display: grid;
    gap: .08rem;
}

.organization-details-section-head strong,
.organization-details-aside-title strong {
    color: var(--panel-text);
    font-size: .64rem;
    font-weight: 900;
}

.organization-details-section-head small,
.organization-details-aside-title small {
    color: var(--panel-muted);
    font-size: .5rem;
    line-height: 1.7;
}

.organization-details-section-head>b {
    color: var(--panel-border);
    font-size: 1rem;
    font-weight: 950;
}

.organization-details-description .ck-editor__editable {
    min-height: 300px;
}

.organization-details-aside-title {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr);
    margin-bottom: .7rem;
    padding-bottom: .65rem;
}

.organization-details-cover {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    margin-bottom: .7rem;
    overflow: hidden;
    position: relative;
}

.organization-details-cover img {
    aspect-ratio: 16/9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.organization-details-cover>span {
    background: rgba(8, 29, 27, .82);
    bottom: .4rem;
    color: #d8e8e5;
    font-size: .45rem;
    padding: .22rem .38rem;
    position: absolute;
    right: .4rem;
}

.organization-details-media .file-add-action {
    min-height: 62px;
}

.organization-details-locked dl {
    display: grid;
    margin: 0;
}

.organization-details-locked dl>div {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    min-height: 43px;
}

.organization-details-locked dl>div:last-child {
    border-bottom: 0;
}

.organization-details-locked dt {
    color: var(--panel-muted);
    font-size: .51rem;
    font-weight: 700;
}

.organization-details-locked dd {
    color: var(--panel-text);
    font-size: .57rem;
    font-weight: 850;
    margin: 0;
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-details-locked dd .is-status {
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-accent);
    padding: .2rem .35rem;
}

.organization-details-locked>p {
    background: var(--panel-surface-soft);
    border-right: 3px solid var(--formal-gold);
    color: var(--panel-muted);
    font-size: .49rem;
    line-height: 1.9;
    margin: .65rem 0 0;
    padding: .55rem;
}

.organization-details-locked>p i {
    color: var(--formal-gold);
    margin-left: .25rem;
}

.organization-details-submitbar {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    min-height: 66px;
    padding: .7rem .85rem;
}

.organization-details-submitbar>span {
    color: var(--panel-muted);
    font-size: .51rem;
}

.organization-details-submitbar>span i {
    color: var(--panel-accent);
    margin-left: .3rem;
}

.organization-details-submitbar .btn {
    min-width: 170px;
}

.panel-role-organization .formal-content-course-head {
    background: #173f3a;
    border-color: #0e332f;
    color: #fff;
}

.panel-role-organization .formal-content-course-head h2 {
    color: #fff;
}

.panel-role-organization .formal-content-course-head p,
.panel-role-organization .formal-content-course-head a,
.panel-role-organization .formal-content-course-head .teacher-content-eyebrow {
    color: #bed4d0;
}

.panel-role-organization .teacher-content-chapter {
    border-radius: 7px;
}

.panel-role-organization .teacher-content-chapter>header {
    background: var(--panel-surface-soft);
    border-bottom: 1px solid var(--panel-border);
}

.panel-role-organization .teacher-structure-lessons {
    background: var(--panel-surface);
}

html[data-panel-theme="dark"] .panel-role-organization {
    --panel-bg: #0b1514;
    --panel-surface: #121f1d;
    --panel-surface-soft: #0e1a18;
    --panel-border: #2b413e;
    --panel-text: #e5efed;
    --panel-muted: #91a8a4;
    --panel-accent: #75c7be;
    --panel-accent-soft: #19332f;
    --formal-gold: #c4a46e;
}

html[data-panel-theme="dark"] .panel-role-organization .panel-topbar {
    background: #111d1b;
}

html[data-panel-theme="dark"] .panel-role-organization .status-pill {
    background: #192a27;
    border-color: #304943;
    color: #b5cbc7;
}

html[data-panel-theme="dark"] .organization-course-tabbar .nav-link.active {
    border-color: #36544e;
}

html[data-panel-theme="dark"] .panel-role-organization .teacher-content-chapter>header {
    background: #172522;
}

@media (max-width:1199.98px) {
    .organization-course-record {
        grid-template-columns: 100px minmax(200px, 1fr) minmax(300px, 1fr);
    }

    .organization-course-record-action {
        align-items: center;
        display: flex;
        grid-column: 2/-1;
        justify-content: space-between;
    }

    .organization-course-tabbar .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .organization-course-dossier-actions .status-pill {
        display: none;
    }

    .organization-details-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
}

@media (max-width:991.98px) {
    .panel-role-organization .panel-layout {
        grid-template-columns: 1fr;
    }

    .organization-course-record {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .organization-course-metrics,
    .organization-course-record-action {
        grid-column: 1/-1;
    }

    .organization-workspace-hero {
        grid-template-columns: 1fr;
    }

    .organization-workspace-mark {
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        flex-direction: row;
        gap: .7rem;
        justify-content: flex-start;
        min-width: 0;
        padding: 1rem 0 0;
    }

    .organization-course-dossier {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .organization-course-dossier-actions {
        grid-column: 1/-1;
    }

    .organization-course-assignment-grid,
    .organization-student-assignment-actions {
        grid-template-columns: 1fr;
    }

    .organization-student-assignment-actions>span {
        padding-bottom: 0;
    }

    .organization-details-layout {
        grid-template-columns: 1fr;
    }

    .organization-details-aside {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:767.98px) {
    .organization-course-index-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .organization-course-index-seal {
        border-right: 0;
        padding-right: 0;
    }

    .organization-course-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .organization-course-summary article:nth-child(2) {
        border-left: 0;
    }

    .organization-course-filters {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .organization-filter-search {
        flex: 1 0 100%;
    }

    .organization-course-filters select {
        flex: 1;
        max-width: none;
    }

    .organization-course-assignment-grid>.btn,
    .organization-student-assignment-actions>.btn {
        width: 100%;
    }

    .organization-course-tabbar .nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .organization-course-tabbar .nav-link {
        flex: 0 0 205px;
    }

    .panel-role-organization .teacher-quick-dock {
        grid-template-columns: 1fr;
    }

    .organization-details-heading {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .organization-details-access {
        grid-column: 1/-1;
        min-width: 0;
    }

    .organization-details-aside {
        grid-template-columns: 1fr;
    }

    .organization-details-submitbar {
        align-items: stretch;
        flex-direction: column;
        gap: .65rem;
    }

    .organization-details-submitbar .btn {
        width: 100%;
    }
}

@media (max-width:575.98px) {
    .panel-role-organization .panel-content {
        padding: .75rem;
    }

    .organization-course-record {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .organization-course-cover {
        height: 58px;
    }

    .organization-course-metrics {
        grid-template-columns: repeat(2, 1fr);
        row-gap: .5rem;
    }

    .organization-course-record-action {
        align-items: stretch;
        flex-direction: column;
    }

    .organization-course-record-action .btn {
        width: 100%;
    }

    .organization-course-dossier {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .organization-course-dossier>img {
        height: 56px;
        width: 72px;
    }

    .organization-course-dossier-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .organization-course-dossier-actions .btn {
        flex: 1;
    }
}

/* Course roadmap builder and collapsible chapter register --------------- */
.organization-learning-overview {
    align-items: stretch;
    background: #173f3a;
    border: 1px solid #0e332f;
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 190px;
    overflow: hidden;
    padding: 1.2rem 1.3rem;
    position: relative;
}

.organization-learning-overview::after {
    background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, .035));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.organization-learning-overview-copy,
.organization-learning-overview-stat {
    position: relative;
    z-index: 1;
}

.organization-learning-overview .formal-eyebrow {
    color: #d1b881;
}

.organization-learning-overview h2 {
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0 0 .35rem;
}

.organization-learning-overview p {
    color: #c2d7d3;
    font-size: .66rem;
    line-height: 2;
    margin: 0;
    max-width: 820px;
}

.organization-learning-guide {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .8rem;
}

.organization-learning-guide span {
    align-items: center;
    background: rgba(255, 255, 255, .065);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    color: #d9e7e4;
    display: inline-flex;
    font-size: .54rem;
    gap: .3rem;
    padding: .35rem .5rem;
}

.organization-learning-guide i {
    color: #cfb47e;
}

.organization-learning-overview-stat {
    align-content: center;
    border-right: 1px solid rgba(255, 255, 255, .13);
    display: grid;
    justify-items: center;
    padding-right: 1rem;
    text-align: center;
}

.organization-learning-overview-stat>span {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    display: flex;
    font-size: 1.1rem;
    height: 44px;
    justify-content: center;
    margin-bottom: .35rem;
    width: 44px;
}

.organization-learning-overview-stat small {
    color: #aac6c1;
    font-size: .52rem;
}

.organization-learning-overview-stat strong {
    font-size: 1.35rem;
    line-height: 1.45;
}

.organization-learning-overview-stat em {
    color: #779f99;
    direction: ltr;
    font-size: .38rem;
    font-style: normal;
    font-weight: 850;
    letter-spacing: .12em;
}

.organization-learning-builder {
    padding: 1rem !important;
}

.organization-learning-builder .learning-path-builder-head {
    margin-bottom: 1rem;
}

.panel-role-organization .learning-path-step-editor {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    border-radius: 7px;
}

.panel-role-organization .learning-path-step-editor:hover {
    border-color: #9fbab5;
    box-shadow: 0 4px 14px rgba(20, 56, 51, .06);
}

.panel-role-organization .learning-step-sequence {
    background: #176b63;
    border-color: #d8ebe7;
}

.panel-role-organization .learning-step-drag {
    color: #6f8b86;
}

.panel-role-organization .learning-step-actions button:hover:not(:disabled) {
    border-color: #99b8b2;
}

.panel-role-organization .learning-path-builder-empty {
    min-height: 290px;
}

.chapter-collapse-toggle,
.teacher-chapter-collapse-toggle {
    align-items: center;
    display: inline-flex !important;
    gap: .3rem;
    justify-content: center;
}

.chapter-collapse-toggle i,
.teacher-chapter-collapse-toggle i {
    transition: transform .2s ease;
}

.chapter-collapse-toggle[aria-expanded="true"] i,
.teacher-chapter-collapse-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.chapter-collapse-toggle span,
.teacher-chapter-collapse-toggle span {
    font-size: inherit;
}

.chapter-lessons-collapse {
    overflow: hidden;
}

.chapter-lessons-collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .24s ease;
}

.panel-role-organization .teacher-content-chapter>header {
    transition: border-color .2s ease, background .2s ease;
}

.panel-role-organization .teacher-chapter-collapse-toggle {
    border-color: var(--panel-border);
    color: var(--panel-muted);
}

.panel-role-organization .teacher-chapter-collapse-toggle[aria-expanded="true"] {
    background: var(--panel-accent-soft);
    border-color: #b9d2cd;
    color: var(--panel-accent);
}

.panel-role-admin .chapter-collapse-toggle[aria-expanded="true"] {
    background: var(--panel-accent-soft);
    border-color: #b8c8da;
    color: var(--panel-accent);
}

html[data-panel-theme="dark"] .panel-role-organization .learning-step-sequence {
    background: #2b8178;
    border-color: #254a45;
}

html[data-panel-theme="dark"] .panel-role-organization .learning-path-step-editor {
    background: #10201d;
}

html[data-panel-theme="dark"] .panel-role-organization .teacher-chapter-collapse-toggle[aria-expanded="true"] {
    border-color: #365b54;
}

@media (max-width:991.98px) {
    .organization-learning-overview {
        grid-template-columns: minmax(0, 1fr) 155px;
    }
}

@media (max-width:767.98px) {
    .organization-learning-overview {
        grid-template-columns: 1fr;
    }

    .organization-learning-overview-stat {
        align-items: center;
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, .13);
        grid-template-columns: 40px minmax(0, 1fr) auto;
        justify-items: start;
        padding: 1rem 0 0;
        text-align: right;
    }

    .organization-learning-overview-stat>span {
        grid-row: 1/3;
        margin: 0;
    }

    .organization-learning-overview-stat strong {
        grid-column: 3;
        grid-row: 1/3;
    }

    .organization-learning-overview-stat em {
        grid-column: 2;
    }
}

@media (max-width:575.98px) {
    .organization-learning-overview {
        padding: 1rem;
    }

    .organization-learning-guide {
        display: grid;
        grid-template-columns: 1fr;
    }

    .chapter-collapse-toggle span,
    .teacher-chapter-collapse-toggle span {
        display: none;
    }
}

/* Organization lesson editor modal ------------------------------------- */
.panel-role-organization .organization-lesson-modal .modal-dialog {
    max-width: 1120px;
}

.panel-role-organization .organization-lesson-modal .modal-content {
    background: var(--panel-surface);
    border: 1px solid #bdcbc8;
    border-radius: 10px;
    box-shadow: 0 28px 85px rgba(5, 30, 27, .28);
    overflow: hidden;
}

.panel-role-organization .organization-lesson-modal .modal-header {
    align-items: center;
    background: #173f3a;
    border-bottom: 1px solid #0f332f;
    color: #fff;
    min-height: 88px;
    padding: 1rem 1.15rem;
}

.panel-role-organization .organization-lesson-modal .btn-close {
    filter: invert(1) grayscale(1);
    margin: 0;
    opacity: .72;
}

.panel-role-organization .organization-lesson-modal .btn-close:hover {
    opacity: 1;
}

.organization-lesson-modal-heading {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.organization-lesson-modal-heading>div {
    min-width: 0;
}

.organization-lesson-modal-icon {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    color: #d7be8b;
    display: flex;
    flex: 0 0 46px;
    font-size: 1rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.panel-role-organization .organization-lesson-modal .modal-kicker {
    color: #a9cbc6;
    font-size: .55rem;
    margin-bottom: .18rem;
}

.panel-role-organization .organization-lesson-modal .modal-title {
    color: #fff;
    font-size: .86rem;
    font-weight: 950;
    margin: 0;
}

.organization-lesson-modal-heading small {
    color: #9fc0bb;
    display: block;
    font-size: .52rem;
    margin-top: .18rem;
}

.panel-role-organization .organization-lesson-modal .modal-body {
    background: var(--panel-bg);
    padding: 1rem 1.15rem 1.2rem;
}

.panel-role-organization .organization-lesson-modal .modal-body>.row {
    --bs-gutter-x: .8rem;
    --bs-gutter-y: .8rem;
}

.organization-lesson-section-title {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: .55rem;
    margin: .15rem 0 .05rem;
    padding: .2rem .1rem .55rem;
}

.organization-lesson-section-title>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.organization-lesson-section-title strong,
.organization-lesson-section-title small {
    display: block;
}

.organization-lesson-section-title strong {
    color: var(--panel-text);
    font-size: .68rem;
    font-weight: 900;
}

.organization-lesson-section-title small {
    color: var(--panel-muted);
    font-size: .51rem;
    margin-top: .12rem;
}

.panel-role-organization .organization-lesson-form .form-label {
    color: var(--panel-text);
    font-size: .61rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

.panel-role-organization .organization-lesson-form .form-control,
.panel-role-organization .organization-lesson-form .form-select {
    background-color: var(--panel-surface);
    border-color: var(--panel-border);
    min-height: 42px;
}

.panel-role-organization .organization-lesson-form textarea.form-control {
    min-height: 116px;
    resize: vertical;
}

.panel-role-organization .organization-lesson-form .form-control:disabled,
.panel-role-organization .organization-lesson-form .form-select:disabled {
    background: var(--panel-surface-soft);
    color: var(--panel-muted);
    opacity: 1;
}

.panel-role-organization .organization-lesson-form .file-input-shell {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    border-radius: 7px;
    min-height: 108px;
}

.panel-role-organization .organization-lesson-form .file-input-shell:hover {
    background: var(--panel-accent-soft);
    border-color: #9dbab5;
}

.panel-role-organization .organization-lesson-form .file-input-shell>i {
    color: var(--panel-accent);
}

.panel-role-organization .organization-lesson-form .toggle-field {
    background: var(--panel-surface);
    border-radius: 7px;
    min-height: 66px;
}

.panel-role-organization .organization-lesson-form .toggle-field:hover {
    border-color: #b0c6c2;
}

.panel-role-organization .organization-lesson-form .teacher-video-preview {
    background: #0c1816;
    border-color: #2d4843;
    border-radius: 8px;
}

.panel-role-organization .organization-lesson-form .teacher-media-head {
    color: #dce9e6;
}

.panel-role-organization .organization-lesson-form .teacher-media-head a {
    color: #8bd0c7;
}

.panel-role-organization .organization-lesson-form .teacher-video-preview video,
.panel-role-organization .organization-lesson-form .teacher-video-preview .plyr {
    border-radius: 6px;
    max-height: 390px;
    overflow: hidden;
}

.panel-role-organization .organization-lesson-form .teacher-attachment-section {
    background: var(--panel-surface);
    border-radius: 7px;
    margin-top: .8rem !important;
}

.panel-role-organization .organization-lesson-form .teacher-attachment-section-head {
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: .6rem;
}

.panel-role-organization .organization-lesson-form .teacher-attachment-row {
    border-radius: 5px;
}

.panel-role-organization .organization-lesson-modal .modal-footer {
    background: var(--panel-surface);
    border-top: 1px solid var(--panel-border);
    gap: .45rem;
    min-height: 70px;
    padding: .75rem 1.15rem;
}

.organization-lesson-footer-note {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .52rem;
    gap: .35rem;
    margin-left: auto;
}

.organization-lesson-footer-note i {
    color: var(--panel-accent);
}

.panel-role-organization .organization-lesson-modal .modal-footer .btn {
    min-width: 105px;
}

.panel-role-organization .organization-lesson-modal .modal-footer .btn-primary {
    min-width: 145px;
}

html[data-panel-theme="dark"] .panel-role-organization .organization-lesson-modal .modal-content {
    border-color: #36504b;
}

html[data-panel-theme="dark"] .panel-role-organization .organization-lesson-modal .modal-header {
    background: #102e2a;
    border-color: #284641;
}

html[data-panel-theme="dark"] .panel-role-organization .organization-lesson-form .teacher-video-preview {
    background: #070d0c;
}

@media (max-width:767.98px) {
    .panel-role-organization .organization-lesson-modal .modal-dialog {
        margin: .5rem;
        max-width: none;
    }

    .panel-role-organization .organization-lesson-modal .modal-header {
        min-height: 76px;
        padding: .8rem;
    }

    .panel-role-organization .organization-lesson-modal .modal-body {
        padding: .8rem;
    }

    .organization-lesson-modal-icon {
        flex-basis: 38px;
        height: 38px;
        width: 38px;
    }

    .organization-lesson-modal-heading small {
        display: none;
    }

    .organization-lesson-footer-note {
        display: none;
    }

    .panel-role-organization .organization-lesson-modal .modal-footer {
        padding: .65rem .8rem;
    }
}

@media (max-width:575.98px) {
    .panel-role-organization .organization-lesson-modal .modal-footer .btn {
        flex: 1;
        min-width: 0;
    }

    .organization-lesson-section-title small {
        display: none;
    }
}

/* Organization content registry and modal portal ------------------------ */
body.panel-role-organization>[data-organization-course-modal] {
    z-index: 1065;
}

.organization-content-register-head {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 4px solid var(--formal-gold);
    border-radius: 8px;
    margin-bottom: .75rem;
    padding: .85rem 1rem;
}

.organization-content-register-head h3 {
    font-size: .86rem;
}

.organization-content-register-head p {
    max-width: 780px;
}

.panel-role-organization .teacher-content-structure {
    gap: .65rem;
}

.panel-role-organization .organization-chapter-card {
    border: 1px solid var(--panel-border);
    border-right: 3px solid #8eac56;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(20, 56, 51, .035);
}

.panel-role-organization .organization-chapter-card:hover {
    border-color: #b7c9c5;
    border-right-color: var(--formal-gold);
}

.panel-role-organization .organization-chapter-card-head {
    background: var(--panel-surface) !important;
    min-height: 104px;
    padding: .7rem .8rem !important;
}

.panel-role-organization .organization-chapter-card .teacher-drag-handle {
    align-self: stretch;
    background: var(--panel-surface-soft);
    border-radius: 4px;
    height: auto;
    min-height: 42px;
}

.panel-role-organization .organization-chapter-card .chapter-number {
    align-items: center;
    background: #173f3a;
    border: 3px solid #dce9e6;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: .76rem;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.organization-chapter-identity {
    min-width: 0;
}

.organization-chapter-code {
    color: var(--formal-gold);
    display: block;
    font-size: .48rem;
    font-weight: 850;
    margin-bottom: .18rem;
}

.panel-role-organization .organization-chapter-identity h3 {
    color: var(--panel-text);
    font-size: .76rem;
    margin: 0 0 .2rem;
}

.panel-role-organization .organization-chapter-identity>p {
    display: none;
}

.organization-chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}

.organization-chapter-meta span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .48rem;
    gap: .22rem;
    padding: .2rem .35rem;
}

.organization-chapter-meta span.is-free {
    background: #edf7f1;
    border-color: #cfe5d8;
    color: #327055;
}

.organization-chapter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.panel-role-organization .organization-chapter-actions .btn {
    min-height: 34px;
}

.panel-role-organization .organization-chapter-actions .btn-outline-danger {
    min-width: 34px;
    padding-inline: .4rem;
}

.panel-role-organization .organization-chapter-card .teacher-structure-lessons {
    background: var(--panel-surface-soft);
    border-top: 1px solid var(--panel-border);
    padding: .35rem .75rem .5rem;
}

.panel-role-organization .organization-lesson-row {
    background: var(--panel-surface);
    border: 1px solid transparent;
    border-bottom-color: var(--panel-border);
    min-height: 62px;
    padding: .4rem .3rem;
}

.panel-role-organization .organization-lesson-row:last-child {
    border-bottom-color: transparent;
}

.panel-role-organization .organization-lesson-row:hover {
    background: var(--panel-accent-soft);
    border-color: #bed4d0;
    border-radius: 5px;
    transform: none;
}

.organization-lesson-code {
    color: var(--formal-gold);
    font-size: .45rem;
    font-style: normal;
    font-weight: 800;
}

.panel-role-organization .organization-lesson-row strong {
    color: var(--panel-text);
    font-size: .66rem;
}

.panel-role-organization .organization-lesson-row small {
    font-size: .52rem;
}

.panel-role-organization .organization-lesson-row .lesson-type-icon {
    background: var(--panel-accent-soft);
    border-radius: 4px;
}

.panel-role-organization .organization-lesson-row .teacher-edit-icon {
    border-radius: 4px;
}

.panel-role-organization .organization-chapter-modal .modal-content {
    background: var(--panel-surface);
    border: 1px solid #bdcbc8;
    border-radius: 9px;
    box-shadow: 0 26px 78px rgba(5, 30, 27, .26);
    overflow: hidden;
}

.panel-role-organization .organization-chapter-modal .modal-header {
    align-items: center;
    background: #173f3a;
    border-color: #0f332f;
    color: #fff;
    min-height: 86px;
    padding: .9rem 1rem;
}

.panel-role-organization .organization-chapter-modal .btn-close,
.panel-role-organization .organization-attachment-modal .btn-close {
    filter: invert(1) grayscale(1);
    margin: 0;
    opacity: .72;
}

.organization-chapter-modal-heading {
    align-items: center;
    display: flex;
    gap: .65rem;
    min-width: 0;
}

.organization-chapter-modal-heading>span {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    color: #d3b77e;
    display: flex;
    flex: 0 0 42px;
    font-size: 1rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.organization-chapter-modal-heading>div {
    min-width: 0;
}

.organization-chapter-modal-heading small {
    color: #a8c9c4;
    display: block;
    font-size: .51rem;
}

.organization-chapter-modal-heading h3 {
    color: #fff;
    font-size: .8rem;
    font-weight: 950;
    margin: .12rem 0;
}

.organization-chapter-modal-heading p {
    color: #91b7b1;
    font-size: .49rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-role-organization .organization-chapter-modal .modal-body {
    background: var(--panel-bg);
    padding: 1rem;
}

.organization-chapter-form-intro {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 3px solid var(--formal-gold);
    border-radius: 6px;
    display: flex;
    gap: .55rem;
    margin-bottom: .85rem;
    padding: .55rem .65rem;
}

.organization-chapter-form-intro>i {
    color: var(--panel-accent);
    font-size: .9rem;
}

.organization-chapter-form-intro strong,
.organization-chapter-form-intro small {
    display: block;
}

.organization-chapter-form-intro strong {
    color: var(--panel-text);
    font-size: .62rem;
}

.organization-chapter-form-intro small {
    color: var(--panel-muted);
    font-size: .5rem;
    margin-top: .1rem;
}

.panel-role-organization .organization-chapter-modal .form-label {
    color: var(--panel-text);
    font-size: .6rem;
    font-weight: 800;
}

.panel-role-organization .organization-chapter-modal .form-control {
    background: var(--panel-surface);
    min-height: 42px;
}

.panel-role-organization .organization-chapter-modal .toggle-field {
    background: var(--panel-surface);
    border-radius: 6px;
    min-height: 68px;
}

.panel-role-organization .organization-chapter-modal .modal-footer {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    gap: .4rem;
    min-height: 68px;
    padding: .7rem 1rem;
}

.panel-role-organization .organization-chapter-modal .modal-footer>span {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .49rem;
    gap: .3rem;
    margin-left: auto;
}

.panel-role-organization .organization-chapter-modal .modal-footer>span i {
    color: var(--panel-accent);
}

.panel-role-organization .organization-chapter-modal .modal-footer .btn {
    min-width: 100px;
}

.panel-role-organization .organization-attachment-modal .modal-content {
    border: 1px solid #bdcbc8;
    border-radius: 8px;
    overflow: hidden;
}

.panel-role-organization .organization-attachment-modal .modal-header {
    background: #173f3a;
    border-color: #0f332f;
    color: #fff;
}

.panel-role-organization .organization-attachment-modal .modal-title {
    color: #fff;
}

.panel-role-organization .organization-attachment-modal .modal-kicker {
    color: #a9cbc6;
}

html[data-panel-theme="dark"] .organization-chapter-meta span.is-free {
    background: #173328;
    border-color: #315441;
    color: #8bd0a8;
}

html[data-panel-theme="dark"] .panel-role-organization .organization-chapter-card .chapter-number {
    border-color: #294944;
}

html[data-panel-theme="dark"] .panel-role-organization .organization-chapter-modal .modal-content,
html[data-panel-theme="dark"] .panel-role-organization .organization-attachment-modal .modal-content {
    border-color: #36504b;
}

@media (max-width:991.98px) {
    .panel-role-organization .organization-chapter-card-head {
        grid-template-columns: 26px 38px minmax(0, 1fr) !important;
    }

    .organization-chapter-actions {
        grid-column: 2/-1;
        justify-content: flex-start;
    }
}

@media (max-width:575.98px) {
    .organization-content-register-head {
        align-items: flex-start;
    }

    .organization-content-register-head .formal-register-legend {
        display: none;
    }

    .organization-chapter-meta span:nth-child(2) {
        display: none;
    }

    .organization-chapter-actions {
        display: grid;
        grid-template-columns: 34px 1fr 1fr 34px;
        width: 100%;
    }

    .organization-chapter-actions .btn {
        min-width: 0 !important;
        padding-inline: .35rem;
    }

    .panel-role-organization .organization-chapter-card .teacher-structure-lessons {
        padding: .25rem .4rem;
    }

    .panel-role-organization .organization-lesson-row {
        grid-template-columns: 20px 28px minmax(0, 1fr) 30px;
    }

    .panel-role-organization .organization-chapter-modal .modal-dialog {
        margin: .5rem;
    }

    .panel-role-organization .organization-chapter-modal .modal-footer>span {
        display: none;
    }

    .panel-role-organization .organization-chapter-modal .modal-footer .btn {
        flex: 1;
        min-width: 0;
    }
}

/* Shared three-step lesson modal --------------------------------------- */
.lesson-modal-tabs {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .3rem;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
    margin-bottom: 1rem;
    overflow: hidden;
    padding: .4rem;
    width: 100%;
}

.lesson-modal-tabs button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--panel-muted);
    display: grid;
    gap: .45rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 56px;
    min-width: 0;
    padding: .42rem .48rem;
    text-align: right;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.lesson-modal-tabs button>i {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--panel-muted);
    display: flex;
    font-size: .64rem;
    font-style: normal;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.lesson-modal-tabs button span {
    display: grid;
    min-width: 0;
}

.lesson-modal-tabs button strong {
    color: var(--panel-text);
    font-size: .61rem;
    font-weight: 900;
    line-height: 1.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-modal-tabs button small {
    font-size: .47rem;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-modal-tabs button:hover {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
}

.lesson-modal-tabs button.active {
    background: var(--panel-accent-soft);
    border-color: color-mix(in srgb, var(--panel-accent) 28%, var(--panel-border));
    color: var(--panel-accent);
}

.lesson-modal-tabs button.active>i {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.lesson-modal-tabs button:disabled {
    background: var(--panel-surface-soft);
    border-color: transparent;
    cursor: not-allowed;
    opacity: .48;
}

.lesson-modal-tabs button:disabled>i {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-muted);
}

.lesson-modal-step-separator {
    align-items: center;
    color: var(--panel-border-strong, var(--panel-border));
    display: flex;
    font-size: .66rem;
    justify-content: center;
    min-width: 0;
}

.lesson-modal-tab-content {
    align-content: start;
    min-height: 290px;
}

.lesson-meeting-schedule {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 45, 63, .06);
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.lesson-meeting-schedule[hidden],
.meeting-single-settings[hidden],
.meeting-weekly-schedule[hidden] {
    display: none !important;
}

.lesson-meeting-schedule-head {
    align-items: center;
    background: linear-gradient(135deg, var(--panel-accent-soft), var(--panel-surface) 70%);
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .7rem;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    margin: 0;
    padding: .9rem 1rem;
}

.lesson-meeting-schedule-head>span {
    align-items: center;
    background: var(--panel-accent);
    border: 1px solid var(--panel-accent);
    border-radius: 9px;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--panel-accent) 22%, transparent);
    color: #fff;
    display: flex;
    font-size: .9rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.lesson-meeting-schedule-head>div {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.lesson-meeting-schedule-head strong {
    color: var(--panel-text);
    font-size: .73rem;
    font-weight: 950;
    line-height: 1.8;
}

.lesson-meeting-schedule-head small {
    color: var(--panel-muted);
    font-size: .51rem;
    line-height: 1.8;
}

.lesson-meeting-schedule-head>em {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-accent);
    display: inline-flex;
    font-size: .47rem;
    font-style: normal;
    font-weight: 850;
    gap: .28rem;
    padding: .36rem .58rem;
    white-space: nowrap;
}

.meeting-period-picker {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 1rem 1rem 0;
}

.meeting-period-picker legend {
    color: var(--panel-text);
    float: none;
    font-size: .6rem;
    font-weight: 900;
    margin: 0 0 .45rem;
    width: auto;
}

.meeting-period-options {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meeting-period-option {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    cursor: pointer;
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    margin: 0;
    min-height: 66px;
    padding: .55rem .65rem;
    position: relative;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.meeting-period-option:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 38%, var(--panel-border));
    transform: translateY(-1px);
}

.meeting-period-option:has(input:checked) {
    background: color-mix(in srgb, var(--panel-accent-soft) 72%, var(--panel-surface));
    border-color: color-mix(in srgb, var(--panel-accent) 56%, var(--panel-border));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--panel-accent) 10%, transparent);
}

.meeting-period-option>input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.meeting-period-option-icon {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-muted);
    display: flex;
    font-size: .72rem;
    height: 38px;
    justify-content: center;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
    width: 38px;
}

.meeting-period-option-copy {
    display: grid;
    gap: .02rem;
    min-width: 0;
}

.meeting-period-option-copy strong {
    color: var(--panel-text);
    font-size: .61rem;
    font-weight: 900;
    line-height: 1.75;
}

.meeting-period-option-copy small {
    color: var(--panel-muted);
    font-size: .45rem;
    line-height: 1.7;
}

.meeting-period-option-check {
    color: var(--panel-accent);
    font-size: .67rem;
    opacity: 0;
    transform: scale(.65);
    transition: opacity .16s ease, transform .16s ease;
}

.meeting-period-option input:checked~.meeting-period-option-icon {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.meeting-period-option input:checked~.meeting-period-option-check {
    opacity: 1;
    transform: scale(1);
}

.meeting-period-option input:focus-visible~.meeting-period-option-icon {
    outline: 3px solid color-mix(in srgb, var(--panel-accent) 24%, transparent);
    outline-offset: 2px;
}

.meeting-default-settings {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    margin: 1rem;
    padding: .75rem;
}

.meeting-default-settings>header {
    align-items: center;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.meeting-default-settings>header>div {
    align-items: center;
    display: flex;
    gap: .5rem;
    min-width: 0;
}

.meeting-default-settings>header>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.meeting-default-settings>header>div>div {
    display: grid;
    min-width: 0;
}

.meeting-default-settings>header strong {
    color: var(--panel-text);
    font-size: .61rem;
    font-weight: 900;
}

.meeting-default-settings>header small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.meeting-default-settings>header p {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .43rem;
    gap: .25rem;
    margin: 0;
    max-width: 310px;
}

.meeting-default-settings>header p i {
    color: var(--panel-accent);
}

.meeting-default-settings-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-field-card {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(115px, 1fr) minmax(130px, .8fr);
    margin: 0;
    min-width: 0;
    padding: .55rem;
}

.meeting-field-card>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-size: .68rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.meeting-field-card>div:not(.input-group) {
    display: grid;
    min-width: 0;
}

.meeting-field-card strong {
    color: var(--panel-text);
    font-size: .57rem;
    font-weight: 900;
}

.meeting-field-card small {
    color: var(--panel-muted);
    font-size: .43rem;
}

.meeting-field-card>.form-control,
.meeting-field-card>.input-group {
    min-width: 0;
    width: 100%;
}

.meeting-field-card .form-control {
    min-height: 39px;
}

.meeting-field-card .input-group-text {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-muted);
    font-size: .48rem;
}

.meeting-single-settings {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent-soft) 48%, var(--panel-surface));
    border: 1px solid color-mix(in srgb, var(--panel-accent) 28%, var(--panel-border));
    border-radius: 10px;
    display: grid;
    gap: .7rem;
    grid-template-columns: 42px minmax(0, 1fr) minmax(190px, .55fr);
    margin: 0 1rem 1rem;
    padding: .7rem .75rem;
}

.meeting-single-settings-icon {
    align-items: center;
    background: var(--panel-accent);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: .78rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.meeting-single-settings>div {
    display: grid;
    min-width: 0;
}

.meeting-single-settings>div strong {
    color: var(--panel-text);
    font-size: .61rem;
    font-weight: 900;
}

.meeting-single-settings>div small {
    color: var(--panel-muted);
    font-size: .46rem;
    line-height: 1.7;
}

.meeting-single-settings>.admin-date-field {
    display: grid;
    gap: .22rem;
    margin: 0;
    min-width: 0;
}

.meeting-single-settings>.admin-date-field>.form-label {
    color: var(--panel-text);
    font-size: .48rem;
    font-weight: 850;
    margin: 0;
}

.meeting-single-settings .form-control {
    background: var(--panel-surface);
    min-height: 40px;
}

.meeting-weekly-schedule {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    margin: 0 1rem 1rem;
    padding: .75rem;
}

.meeting-weekly-schedule-head {
    align-items: center;
    display: flex;
    gap: .9rem;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.meeting-weekly-schedule-head>div {
    align-items: center;
    display: flex;
    gap: .5rem;
    min-width: 0;
}

.meeting-weekly-schedule-head>div>span {
    align-items: center;
    background: var(--panel-accent);
    border-radius: 7px;
    color: #fff;
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.meeting-weekly-schedule-head>div>div {
    display: grid;
    min-width: 0;
}

.meeting-weekly-schedule-head strong {
    color: var(--panel-text);
    font-size: .62rem;
    font-weight: 900;
}

.meeting-weekly-schedule-head small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.meeting-weekly-schedule-head>p {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .43rem;
    gap: .25rem;
    margin: 0;
}

.meeting-weekly-schedule-head>p i {
    color: var(--panel-accent);
}

.meeting-weekday-grid {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-weekday-row {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    display: block;
    min-width: 0;
    opacity: .72;
    overflow: hidden;
    padding: 0;
    transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.meeting-weekday-row.is-enabled {
    border-color: color-mix(in srgb, var(--panel-accent) 50%, var(--panel-border));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--panel-accent) 8%, transparent);
    opacity: 1;
}

.meeting-weekday-toggle {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    margin: 0;
    min-height: 55px;
    padding: .55rem .65rem;
}

.meeting-weekday-toggle>input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.meeting-weekday-switch {
    background: var(--panel-border-strong, var(--panel-border));
    border-radius: 999px;
    display: block;
    height: 20px;
    position: relative;
    transition: background .16s ease;
    width: 36px;
}

.meeting-weekday-switch i {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    height: 16px;
    position: absolute;
    right: 2px;
    top: 2px;
    transition: transform .16s ease;
    width: 16px;
}

.meeting-weekday-title {
    display: grid;
    min-width: 0;
}

.meeting-weekday-title strong {
    color: var(--panel-text);
    font-size: .57rem;
    font-weight: 900;
}

.meeting-weekday-title small {
    color: var(--panel-muted);
    font-size: .43rem;
}

.meeting-weekday-check {
    color: var(--panel-accent);
    font-size: .7rem;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .16s ease, transform .16s ease;
}

.meeting-weekday-toggle input:checked+.meeting-weekday-switch {
    background: var(--panel-accent);
}

.meeting-weekday-toggle input:checked+.meeting-weekday-switch i {
    transform: translateX(-16px);
}

.meeting-weekday-toggle input:checked~.meeting-weekday-check {
    opacity: 1;
    transform: scale(1);
}

.meeting-weekday-toggle input:focus-visible+.meeting-weekday-switch {
    outline: 3px solid color-mix(in srgb, var(--panel-accent) 24%, transparent);
    outline-offset: 2px;
}

.meeting-weekday-overrides {
    background: var(--panel-surface-soft);
    border-top: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .55rem .65rem;
    transition: opacity .16s ease;
}

.meeting-weekday-row:not(.is-enabled) .meeting-weekday-overrides {
    opacity: .45;
}

.meeting-weekday-overrides>label {
    display: grid;
    gap: .24rem;
    margin: 0;
    min-width: 0;
}

.meeting-weekday-overrides>label>span {
    color: var(--panel-muted);
    font-size: .44rem;
    font-weight: 800;
}

.meeting-weekday-overrides>label>span i {
    color: var(--panel-accent);
    margin-left: .16rem;
}

.meeting-weekday-overrides .form-control {
    background: var(--panel-surface);
    min-height: 38px;
}

.meeting-weekday-overrides .input-group {
    min-width: 0;
}

.meeting-weekday-overrides .input-group-text {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    color: var(--panel-muted);
    font-size: .44rem;
    padding-inline: .45rem;
}

.lesson-modal-tab-content>[data-lesson-modal-pane],
[data-lesson-modal]>[data-lesson-modal-pane] {
    animation: lesson-modal-tab-in .18s ease both;
}

[data-lesson-modal] [data-lesson-modal-pane].is-tab-hidden {
    display: none !important;
}

@keyframes lesson-modal-tab-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

html[data-panel-theme="dark"] .lesson-modal-tabs button.active {
    border-color: color-mix(in srgb, var(--panel-accent) 45%, var(--panel-border));
}

@media (max-width:767.98px) {
    .lesson-modal-tabs {
        gap: .18rem;
        grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
        overflow: hidden;
        padding: .3rem;
    }

    .lesson-modal-tabs button {
        gap: .25rem;
        grid-template-columns: 28px minmax(0, 1fr);
        min-height: 48px;
        padding: .32rem .25rem;
    }

    .lesson-modal-tabs button>i {
        height: 28px;
        width: 28px;
    }

    .lesson-modal-tabs button small {
        display: none;
    }

    .lesson-modal-tab-content {
        min-height: 245px;
    }
}

@media (max-width:575.98px) {
    .lesson-modal-tabs {
        grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr);
    }

    .lesson-modal-tabs button {
        display: flex;
        flex-direction: column;
        gap: .14rem;
        justify-content: center;
        min-height: 62px;
        padding: .22rem .12rem;
        text-align: center;
    }

    .lesson-modal-tabs button>i {
        height: 25px;
        width: 25px;
    }

    .lesson-modal-tabs button strong {
        font-size: .5rem;
        line-height: 1.55;
        white-space: normal;
    }

    .lesson-modal-step-separator {
        font-size: .48rem;
    }
}

@media (max-width:991.98px) {

    .meeting-default-settings-grid,
    .meeting-weekday-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:767.98px) {
    .lesson-meeting-schedule-head {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: .75rem;
    }

    .lesson-meeting-schedule-head>span {
        height: 40px;
        width: 40px;
    }

    .lesson-meeting-schedule-head>em {
        grid-column: 1/-1;
        justify-self: start;
    }

    .meeting-period-picker {
        padding: .8rem .75rem 0;
    }

    .meeting-period-options {
        grid-template-columns: 1fr;
    }

    .meeting-period-option {
        min-height: 60px;
    }

    .meeting-default-settings {
        margin: .8rem .75rem;
        padding: .65rem;
    }

    .meeting-default-settings>header,
    .meeting-weekly-schedule-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .meeting-default-settings>header p,
    .meeting-weekly-schedule-head>p {
        max-width: none;
    }

    .meeting-field-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .meeting-field-card>span {
        height: 34px;
        width: 34px;
    }

    .meeting-field-card>.form-control,
    .meeting-field-card>.input-group {
        grid-column: 1/-1;
    }

    .meeting-single-settings {
        grid-template-columns: 38px minmax(0, 1fr);
        margin: 0 .75rem .8rem;
    }

    .meeting-single-settings-icon {
        height: 38px;
        width: 38px;
    }

    .meeting-single-settings>.admin-date-field {
        grid-column: 1/-1;
    }

    .meeting-weekly-schedule {
        margin: 0 .75rem .8rem;
        padding: .65rem;
    }

    .meeting-weekday-overrides {
        grid-template-columns: 1fr;
    }

    .lesson-meet-card.is-scheduled {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .meeting-client-state,
    .lesson-meet-card.is-scheduled>.meeting-client-join-form {
        grid-column: 1/-1;
        justify-content: flex-start;
        width: 100%;
    }

    .meeting-client-join-form .meeting-client-live-button {
        width: 100%;
    }
}

/* Client portal two-level header ------------------------------------- */
.client-portal-header {
    overflow: visible;
}

.client-header-primary {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 76px;
}

.client-header-brand-group {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.client-header-brand-group .client-menu-trigger {
    background: linear-gradient(145deg, #254766, #376b96);
    border: 1px solid #284d70;
    border-radius: 9px;
    box-shadow: 0 7px 16px rgba(37, 71, 102, .16);
    height: 46px;
    transition: box-shadow .18s ease, transform .18s ease;
    width: 48px;
}

.client-header-brand-group .client-menu-trigger:hover {
    box-shadow: 0 9px 20px rgba(37, 71, 102, .22);
    transform: translateY(-1px);
}

.client-header-brand-group .client-menu-trigger:focus-visible,
.client-portal-header a:focus-visible,
.client-portal-header button:focus-visible {
    outline: 3px solid rgba(49, 95, 141, .22);
    outline-offset: 2px;
}

.client-header-divider {
    background: var(--client-border);
    height: 32px;
    margin-inline: .15rem;
    width: 1px;
}

.client-header-welcome {
    display: grid;
    gap: .05rem;
    line-height: 1.75;
}

.client-header-welcome span {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .57rem;
    gap: .28rem;
}

.client-header-welcome span i {
    color: #315f8d;
}

.client-header-welcome strong {
    color: var(--client-text);
    font-size: .73rem;
    font-weight: 900;
    white-space: nowrap;
}

.client-header-primary .client-portal-actions {
    flex: 0 0 auto;
}

.client-header-primary .client-portal-action {
    background: transparent;
    border-color: transparent;
    color: #526376;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.client-header-primary .client-portal-action:hover {
    background: var(--client-surface-soft);
    border-color: var(--client-border);
    color: #315f8d;
}

.client-header-primary .client-portal-user {
    background: var(--client-surface-soft);
    border-color: var(--client-border);
    border-radius: 9px;
    min-height: 50px;
    padding: .25rem .35rem .25rem .55rem;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.client-header-primary .client-portal-user:hover,
.client-header-primary .client-portal-user.active {
    background: var(--client-surface);
    border-color: #bfcddb;
    box-shadow: 0 6px 15px rgba(31, 54, 76, .07);
}

.client-header-navrow {
    align-items: center;
    border-top: 1px solid var(--client-border);
    display: grid;
    gap: clamp(.75rem, 2vw, 1.5rem);
    grid-template-columns: minmax(170px, .55fr) minmax(640px, 2.35fr) auto;
    min-height: 62px;
}

.client-header-location {
    display: grid;
    gap: .04rem;
    line-height: 1.65;
    min-width: 0;
}

.client-header-location span {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .52rem;
    gap: .25rem;
}

.client-header-location span i {
    font-size: .43rem;
}

.client-header-location strong {
    color: var(--client-text);
    font-size: .68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-header-navrow .client-button-navigation {
    align-items: stretch;
    display: grid;
    flex: 0 1 auto;
    gap: .3rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
}

.client-header-navrow .client-button-navigation a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    display: grid;
    gap: .4rem;
    grid-template-columns: 31px minmax(0, 1fr);
    min-height: 48px;
    padding: .32rem .42rem;
    position: relative;
}

.client-header-navrow .client-button-navigation a>i {
    background: transparent;
    border-color: transparent;
    border-radius: 7px;
    color: #607386;
    height: 31px;
    width: 31px;
}

.client-header-navrow .client-button-navigation a:hover {
    background: var(--client-surface-soft);
    border-color: var(--client-border);
    box-shadow: none;
}

.client-header-navrow .client-button-navigation a.active {
    background: var(--panel-accent-soft);
    border-color: #d4e0eb;
    box-shadow: none;
}

.client-header-navrow .client-button-navigation a.active::after {
    background: #315f8d;
    border-radius: 999px 999px 0 0;
    bottom: -7px;
    content: "";
    height: 3px;
    left: 24%;
    position: absolute;
    right: 24%;
}

.client-header-navrow .client-button-navigation a.active>i {
    background: #315f8d;
    border-color: #315f8d;
    color: #fff;
}

.client-header-navrow .client-button-navigation a strong {
    font-size: .63rem;
}

.client-header-navrow .client-button-navigation a small {
    font-size: .48rem;
}

.client-header-site-link {
    align-items: center;
    border: 1px solid var(--client-border);
    border-radius: 7px;
    color: #526376;
    display: flex;
    font-size: .59rem;
    font-weight: 800;
    gap: .32rem;
    justify-content: center;
    min-height: 40px;
    padding: .4rem .58rem;
    text-decoration: none;
    white-space: nowrap;
}

.client-header-site-link:hover {
    background: #315f8d;
    border-color: #315f8d;
    color: #fff;
}

.client-portal-main {
    min-height: calc(100vh - 138px);
}

html[data-panel-theme="dark"] .client-header-brand-group .client-menu-trigger {
    background: linear-gradient(145deg, #315f8d, #244766);
    border-color: #426f96;
}

html[data-panel-theme="dark"] .client-header-welcome span i {
    color: #86b4da;
}

html[data-panel-theme="dark"] .client-header-primary .client-portal-action {
    color: #b3c0ca;
}

html[data-panel-theme="dark"] .client-header-primary .client-portal-action:hover,
html[data-panel-theme="dark"] .client-header-primary .client-portal-user:hover,
html[data-panel-theme="dark"] .client-header-primary .client-portal-user.active,
html[data-panel-theme="dark"] .client-header-navrow .client-button-navigation a:hover {
    background: #1d2a35;
    border-color: #3b4c5b;
}

html[data-panel-theme="dark"] .client-header-navrow .client-button-navigation a.active {
    background: #24394c;
    border-color: #35506a;
}

html[data-panel-theme="dark"] .client-header-navrow .client-button-navigation a>i {
    color: #a9bac8;
}

html[data-panel-theme="dark"] .client-header-navrow .client-button-navigation a.active>i {
    background: #467ca7;
    border-color: #467ca7;
    color: #fff;
}

html[data-panel-theme="dark"] .client-header-navrow .client-button-navigation a.active::after {
    background: #6fa1c9;
}

html[data-panel-theme="dark"] .client-header-site-link {
    color: #c4d0da;
}

html[data-panel-theme="dark"] .client-header-site-link:hover {
    background: #396b96;
    border-color: #396b96;
    color: #fff;
}

@media (max-width:1199.98px) {
    .client-header-navrow {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .client-header-location {
        display: none;
    }

    .client-header-navrow .client-button-navigation a {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .client-header-navrow .client-button-navigation a small {
        display: none;
    }
}

@media (max-width:1050px) {
    .client-header-primary {
        min-height: 70px;
    }

    .client-header-navrow {
        display: none;
    }

    .client-header-brand-group .client-portal-brand {
        margin-left: 0;
    }

    .client-portal-main {
        min-height: calc(100vh - 70px);
    }
}

@media (max-width:767.98px) {
    .client-header-primary {
        gap: .55rem;
        min-height: 66px;
    }

    .client-header-brand-group {
        gap: .5rem;
    }

    .client-header-divider,
    .client-header-welcome {
        display: none;
    }

    .client-header-brand-group .client-menu-trigger {
        height: 40px;
        width: 42px;
    }

    .client-header-primary .client-portal-actions {
        gap: .35rem;
    }

    .client-header-primary .client-portal-actions .client-portal-action {
        display: flex;
        height: 40px;
        width: 40px;
    }

    .client-header-primary .client-portal-actions>a.client-portal-action {
        display: none;
    }

    .client-header-primary .client-portal-user {
        background: transparent;
        border: 0;
        min-height: 0;
        padding: 0;
    }

    .client-header-primary .client-portal-user:hover,
    .client-header-primary .client-portal-user.active {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .client-portal-main {
        min-height: calc(100vh - 66px);
    }
}

@media (max-width:480px) {
    .client-header-primary .client-portal-user {
        display: flex;
    }

    .client-header-primary .client-portal-avatar {
        height: 39px;
        width: 39px;
    }
}

@media (prefers-reduced-motion:reduce) {

    .client-header-brand-group .client-menu-trigger,
    .client-header-primary .client-portal-action,
    .client-header-primary .client-portal-user {
        transition: none;
    }
}

/* Lesson questions and one-time feedback ----------------------------- */
.client-portal-body .lesson-qa-panel,
.client-portal-body .lesson-feedback-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.lesson-question-composer {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 13px;
    overflow: hidden;
}

.lesson-question-composer>header {
    align-items: center;
    background: var(--client-surface);
    border-bottom: 1px solid var(--client-border);
    display: flex;
    gap: .65rem;
    padding: .8rem;
}

.lesson-question-composer>header>span,
.lesson-feedback-form>header>span {
    align-items: center;
    background: var(--learning-accent-soft, #e9f0f7);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    color: var(--learning-accent, #315f8d);
    display: flex;
    flex: 0 0 40px;
    font-size: 1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.lesson-question-composer>header>div,
.lesson-feedback-form>header>div {
    display: grid;
    gap: .05rem;
}

.lesson-question-composer>header strong,
.lesson-feedback-form>header strong {
    color: var(--client-text);
    font-size: .68rem;
}

.lesson-question-composer>header small,
.lesson-feedback-form>header small {
    color: var(--client-muted);
    font-size: .53rem;
}

.lesson-question-composer .lesson-question-form {
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: .8rem;
}

.lesson-question-form>label {
    color: var(--client-text);
    font-size: .6rem;
    font-weight: 900;
}

.lesson-question-form textarea {
    border-radius: 9px;
    font-size: .65rem;
    line-height: 2;
    min-height: 120px;
    resize: vertical;
}

.lesson-question-form>footer,
.lesson-feedback-form>footer {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-top: .15rem;
}

.lesson-question-form>footer>span,
.lesson-feedback-form>footer>span {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .51rem;
    gap: .3rem;
}

.lesson-question-form>footer>span i,
.lesson-feedback-form>footer>span i {
    color: var(--learning-accent, #315f8d);
}

.lesson-question-form>footer .btn,
.lesson-feedback-form>footer .btn {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    font-size: .58rem;
    gap: .3rem;
    justify-content: center;
    min-height: 42px;
    min-width: 145px;
}

.lesson-feedback-panel {
    max-width: 940px;
}

.lesson-feedback-intro {
    background: linear-gradient(135deg, #edf3f8, #f8fafc);
    border-color: #d4e0eb;
    border-radius: 12px;
}

.lesson-feedback-intro>span {
    background: linear-gradient(145deg, #315f8d, #244766);
    border-radius: 9px;
}

.lesson-feedback-intro small {
    color: #315f8d;
}

.lesson-feedback-intro h4 {
    color: #1d2d3e;
}

.lesson-feedback-intro p {
    color: #6c7b8a;
    line-height: 1.9;
}

.lesson-feedback-error {
    align-items: center;
    background: #fff2f3;
    border: 1px solid #f2cbd0;
    border-radius: 8px;
    color: #a83b4a;
    display: flex;
    font-size: .58rem;
    gap: .4rem;
    margin-top: .75rem;
    padding: .65rem .75rem;
}

.lesson-feedback-form {
    border-radius: 12px;
    gap: .8rem;
    padding: 0;
}

.lesson-feedback-form>header {
    align-items: center;
    background: var(--client-surface);
    border-bottom: 1px solid var(--client-border);
    display: flex;
    gap: .65rem;
    padding: .8rem;
}

.lesson-feedback-form> :not(header) {
    margin-inline: .9rem;
}

.lesson-feedback-form>footer {
    border-top: 1px solid var(--client-border);
    margin: 0;
    padding: .75rem .9rem;
}

.lesson-rating-field legend {
    font-size: .64rem;
    margin-bottom: .65rem;
}

.lesson-rating-options {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lesson-rating-options label {
    border-radius: 8px;
    display: grid;
    gap: .1rem;
    justify-items: center;
    min-width: 0;
    padding: .6rem .3rem;
}

.lesson-rating-options label i {
    font-size: 1rem;
}

.lesson-rating-options label span {
    color: var(--client-text);
    font-size: .65rem;
    font-weight: 900;
}

.lesson-rating-options label small {
    color: var(--client-muted);
    font-size: .46rem;
}

.lesson-feedback-form>.form-label {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.lesson-feedback-form>.form-label small {
    color: var(--client-muted);
    font-size: .48rem;
    font-weight: 500;
}

.lesson-feedback-form textarea {
    border-radius: 9px;
    min-height: 125px;
    resize: vertical;
}

.lesson-feedback-submitted {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-right: 3px solid #25877f;
    border-radius: 10px;
    display: grid;
    gap: .65rem;
    margin-top: .8rem;
    padding: .9rem;
}

.lesson-feedback-submitted>header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.lesson-feedback-submitted>header>div {
    display: grid;
    gap: .08rem;
}

.lesson-feedback-submitted>header span {
    color: #19746d;
    font-size: .62rem;
    font-weight: 900;
}

.lesson-feedback-submitted>header time {
    color: var(--client-muted);
    font-size: .48rem;
}

.lesson-feedback-submitted>header>strong {
    align-items: center;
    background: #fff5dc;
    border: 1px solid #eccb7e;
    border-radius: 7px;
    color: #b77a28;
    display: flex;
    font-size: .62rem;
    gap: .3rem;
    padding: .38rem .5rem;
}

.lesson-feedback-stars {
    color: #e2a425;
    direction: ltr;
    display: flex;
    font-size: .9rem;
    gap: .18rem;
    justify-content: flex-end;
}

.lesson-feedback-submitted>p {
    background: var(--client-surface-soft);
    border-radius: 8px;
    color: var(--client-text);
    font-size: .61rem;
    line-height: 2;
    margin: 0;
    padding: .7rem;
}

.lesson-feedback-submitted>footer {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .49rem;
    gap: .3rem;
}

.lesson-feedback-submitted.is-unavailable {
    border-right-color: #7c8793;
}

.lesson-feedback-submitted.is-unavailable>header span {
    color: var(--client-muted);
}

.lesson-feedback-community {
    border-top: 1px solid var(--client-border);
    margin-top: 1rem;
    padding-top: .9rem;
}

.lesson-feedback-community>header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.lesson-feedback-community>header>div {
    display: grid;
}

.lesson-feedback-community>header span {
    color: var(--client-muted);
    font-size: .49rem;
}

.lesson-feedback-community>header h5 {
    color: var(--client-text);
    font-size: .7rem;
    margin: .08rem 0 0;
}

.lesson-feedback-community>header>b {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 999px;
    color: var(--client-muted);
    font-size: .5rem;
    padding: .28rem .5rem;
}

.lesson-feedback-community-list {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-feedback-community-list>article {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    display: grid;
    gap: .5rem;
    padding: .75rem;
}

.lesson-feedback-community-list>article>header {
    align-items: center;
    display: grid;
    gap: .45rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.lesson-feedback-avatar {
    align-items: center;
    background: var(--learning-accent-soft, #e9f0f7);
    border-radius: 7px;
    color: var(--learning-accent, #315f8d);
    display: flex;
    font-size: .58rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.lesson-feedback-community-list header>div {
    display: grid;
}

.lesson-feedback-community-list header strong {
    color: var(--client-text);
    font-size: .57rem;
}

.lesson-feedback-community-list header time {
    color: var(--client-muted);
    font-size: .45rem;
}

.lesson-feedback-community-list header>b {
    color: #b77a28;
    font-size: .55rem;
}

.lesson-feedback-community-list article>p {
    color: var(--client-muted);
    font-size: .56rem;
    line-height: 2;
    margin: 0;
}

.lesson-feedback-community-empty {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px dashed var(--client-border);
    border-radius: 10px;
    display: flex;
    gap: .6rem;
    grid-column: 1/-1;
    justify-content: center;
    min-height: 105px;
}

.lesson-feedback-community-empty>i {
    color: var(--learning-accent, #315f8d);
    font-size: 1.15rem;
}

.lesson-feedback-community-empty>span {
    display: grid;
}

.lesson-feedback-community-empty strong {
    color: var(--client-text);
    font-size: .58rem;
}

.lesson-feedback-community-empty small {
    color: var(--client-muted);
    font-size: .48rem;
}

html[data-panel-theme="dark"] .lesson-feedback-intro {
    background: linear-gradient(135deg, #1f3040, #192630);
    border-color: #35506a;
}

html[data-panel-theme="dark"] .lesson-feedback-intro h4 {
    color: var(--client-text);
}

html[data-panel-theme="dark"] .lesson-feedback-intro p {
    color: var(--client-muted);
}

html[data-panel-theme="dark"] .lesson-feedback-submitted>header>strong {
    background: #493d24;
    border-color: #826a35;
    color: #ffd77b;
}

html[data-panel-theme="dark"] .lesson-feedback-error {
    background: #39252a;
    border-color: #67404a;
    color: #f3a9b4;
}

/* Formal question management for admin and organization -------------- */
.admin-qa-workspace {
    display: grid;
    gap: .85rem;
}

.admin-qa-hero {
    align-items: center;
    background: linear-gradient(120deg, #172d43, #244d70 62%, #2f6388);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(260px, .9fr) minmax(560px, 1.35fr);
    overflow: hidden;
    padding: 1rem;
    position: relative;
}

.admin-qa-hero::after {
    background: linear-gradient(135deg, transparent 68%, rgba(255, 255, 255, .04) 68%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.admin-qa-hero>* {
    position: relative;
    z-index: 1;
}

.admin-qa-hero-copy>span {
    align-items: center;
    color: #a9c6dd;
    display: flex;
    font-size: .59rem;
    font-weight: 900;
    gap: .35rem;
}

.admin-qa-hero-copy h2 {
    color: #fff;
    font-size: 1.05rem;
    margin: .25rem 0;
}

.admin-qa-hero-copy p {
    color: rgba(255, 255, 255, .68);
    font-size: .63rem;
    line-height: 1.95;
    margin: 0;
}

.admin-qa-summary {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-qa-summary article {
    align-items: center;
    background: rgba(9, 25, 39, .25);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    display: flex;
    gap: .5rem;
    min-height: 64px;
    padding: .5rem;
}

.admin-qa-summary article>span {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border-radius: 6px;
    color: #c6dcec;
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.admin-qa-summary article.is-pending>span {
    color: #f0c982;
}

.admin-qa-summary article.is-answered>span {
    color: #83d1b2;
}

.admin-qa-summary article.is-hidden>span {
    color: #bdc5cf;
}

.admin-qa-summary article>div {
    display: grid;
}

.admin-qa-summary strong {
    color: #fff;
    font-size: .85rem;
}

.admin-qa-summary small {
    color: rgba(255, 255, 255, .63);
    font-size: .49rem;
}

.organization-qa-hero {
    background: linear-gradient(120deg, #0c3430, #0f5e56 62%, #16786d);
}

.organization-qa-hero .admin-qa-hero-copy>span {
    color: #9bd6cf;
}

.admin-qa-filters {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(250px, 1.7fr) minmax(145px, .65fr) minmax(180px, .9fr) 105px auto auto;
    padding: .65rem;
}

.admin-qa-filters :is(.form-control, .form-select, .btn) {
    font-size: .64rem;
    min-height: 40px;
}

.admin-qa-search {
    position: relative;
}

.admin-qa-search>i {
    color: var(--panel-muted);
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.admin-qa-search .form-control {
    padding-right: 2.1rem;
}

.admin-qa-result-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: .15rem .25rem;
}

.admin-qa-result-head>div {
    display: grid;
}

.admin-qa-result-head>div span {
    color: var(--panel-muted);
    font-size: .53rem;
}

.admin-qa-result-head>div strong {
    color: var(--panel-text);
    font-size: .7rem;
}

.admin-qa-active-filter,
.admin-qa-result-head>a {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-accent);
    display: flex;
    font-size: .53rem;
    gap: .3rem;
    padding: .28rem .55rem;
    text-decoration: none;
}

.admin-qa-list {
    display: grid;
    gap: .7rem;
}

.admin-qa-card {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-right: 3px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.admin-qa-card.is-pending {
    border-right-color: #bd812c;
}

.admin-qa-card.is-answered {
    border-right-color: #248267;
}

.admin-qa-card.is-hidden {
    border-right-color: #7c8793;
}

.admin-qa-card-head {
    align-items: center;
    background: var(--panel-surface-soft);
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(180px, .8fr) minmax(250px, 1.2fr) auto;
    min-height: 66px;
    padding: .65rem .75rem;
}

.admin-qa-user {
    align-items: center;
    display: flex;
    gap: .5rem;
    min-width: 0;
}

.admin-qa-user>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 38px;
    font-size: .66rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.admin-qa-user>div {
    display: grid;
    min-width: 0;
}

.admin-qa-user strong {
    color: var(--panel-text);
    font-size: .63rem;
}

.admin-qa-user small {
    color: var(--panel-muted);
    direction: rtl;
    font-size: .49rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-qa-context {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .52rem;
    gap: .35rem .65rem;
}

.admin-qa-context span {
    align-items: center;
    display: flex;
    gap: .25rem;
}

.admin-qa-context i {
    color: var(--panel-accent);
}

.admin-qa-status {
    align-items: center;
    border: 1px solid;
    border-radius: 999px;
    display: flex;
    font-size: .5rem;
    gap: .25rem;
    padding: .3rem .5rem;
    white-space: nowrap;
}

.admin-qa-status.is-pending {
    background: #fff8e8;
    border-color: #ead39f;
    color: #94651f;
}

.admin-qa-status.is-answered {
    background: #eaf7f2;
    border-color: #bfe2d4;
    color: #20705b;
}

.admin-qa-status.is-hidden {
    background: #f0f2f4;
    border-color: #d5dbe0;
    color: #67727e;
}

.admin-qa-question {
    padding: .75rem .85rem .25rem;
}

.admin-qa-question>span {
    color: var(--panel-accent);
    font-size: .52rem;
    font-weight: 900;
}

.admin-qa-question blockquote {
    color: var(--panel-text);
    font-size: .67rem;
    line-height: 2.05;
    margin: .2rem 0 0;
}

.admin-qa-answer-form {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .5rem;
    margin: .55rem .75rem .75rem;
    padding: .65rem;
}

.admin-qa-answer-form>label {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.admin-qa-answer-form>label>span {
    align-items: center;
    color: var(--panel-text);
    display: flex;
    font-size: .58rem;
    font-weight: 900;
    gap: .3rem;
}

.admin-qa-answer-form>label>span i {
    color: var(--panel-accent);
}

.admin-qa-answer-form>label>small {
    color: var(--panel-muted);
    font-size: .48rem;
}

.admin-qa-answer-form textarea {
    background: var(--panel-surface);
    border-radius: 6px;
    font-size: .63rem;
    line-height: 2;
    min-height: 105px;
    resize: vertical;
}

.admin-qa-answer-form>footer {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: 170px minmax(0, 1fr) auto;
}

.admin-qa-answer-form>footer .form-select,
.admin-qa-answer-form>footer .btn {
    font-size: .58rem;
    min-height: 38px;
}

.admin-qa-answer-form>footer>span {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .49rem;
    gap: .28rem;
}

.admin-qa-answer-form>footer>span i {
    color: var(--panel-accent);
}

.admin-qa-delete {
    left: .8rem;
    position: absolute;
    top: 73px;
}

.admin-qa-delete button {
    background: transparent;
    border: 0;
    color: #ae4655;
    font-size: .48rem;
    padding: .25rem;
}

.admin-qa-empty {
    padding: 1rem;
}

.admin-qa-pagination {
    margin-top: .15rem;
}

html[data-panel-theme="dark"] .admin-qa-status.is-pending {
    background: #3b3221;
    border-color: #6a5731;
    color: #edc679;
}

html[data-panel-theme="dark"] .admin-qa-status.is-answered {
    background: #19352e;
    border-color: #2f5c50;
    color: #86cfb9;
}

html[data-panel-theme="dark"] .admin-qa-status.is-hidden {
    background: #29323a;
    border-color: #414d58;
    color: #b7c0c8;
}

@media (max-width:1199.98px) {
    .admin-qa-hero {
        grid-template-columns: 1fr;
    }

    .admin-qa-filters {
        grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(120px, .45fr)) auto;
    }

    .admin-qa-filters>.btn-outline-secondary {
        grid-column: 1/-1;
        justify-self: start;
    }
}

@media (max-width:991.98px) {
    .admin-qa-filters {
        grid-template-columns: 1fr 1fr;
    }

    .admin-qa-search {
        grid-column: 1/-1;
    }

    .admin-qa-card-head {
        grid-template-columns: minmax(180px, 1fr) auto;
    }

    .admin-qa-context {
        grid-column: 1/-1;
        grid-row: 2;
    }
}

@media (max-width:767.98px) {

    .lesson-question-form>footer,
    .lesson-feedback-form>footer {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-question-form>footer .btn,
    .lesson-feedback-form>footer .btn {
        width: 100%;
    }

    .lesson-feedback-community-list {
        grid-template-columns: 1fr;
    }

    .admin-qa-summary {
        grid-template-columns: 1fr 1fr;
    }

    .admin-qa-filters {
        grid-template-columns: 1fr;
    }

    .admin-qa-search {
        grid-column: auto;
    }

    .admin-qa-filters>.btn-outline-secondary {
        grid-column: auto;
        justify-self: stretch;
    }

    .admin-qa-card-head {
        grid-template-columns: 1fr;
    }

    .admin-qa-context {
        grid-column: auto;
        grid-row: auto;
    }

    .admin-qa-status {
        justify-self: start;
    }

    .admin-qa-answer-form>label {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }

    .admin-qa-answer-form>footer {
        grid-template-columns: 1fr;
    }

    .admin-qa-delete {
        margin: -.2rem .75rem .65rem;
        position: static;
    }
}

@media (max-width:480px) {
    .lesson-rating-options {
        gap: .25rem;
    }

    .lesson-rating-options label {
        padding-inline: .1rem;
    }

    .lesson-rating-options label small {
        display: none;
    }

    .lesson-feedback-submitted>header {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
    }

    .admin-qa-summary {
        grid-template-columns: 1fr;
    }

    .admin-qa-hero {
        padding: .8rem;
    }

    .admin-qa-answer-form {
        margin-inline: .5rem;
    }
}

/* Client exam library ------------------------------------------------ */
.client-exam-dashboard {
    display: grid;
    gap: 1rem;
}

.client-exam-hero {
    align-items: center;
    background: linear-gradient(120deg, #172f47, #28577b 64%, #34769a);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(24, 50, 74, .15);
    color: #fff;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
    overflow: hidden;
    padding: 1.35rem;
    position: relative;
}

.client-exam-hero::after {
    background: linear-gradient(135deg, transparent 65%, rgba(255, 255, 255, .045) 65%), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: auto, 28px 28px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.client-exam-hero>* {
    position: relative;
    z-index: 1;
}

.client-exam-hero-copy>span {
    align-items: center;
    color: #b7d0e3;
    display: flex;
    font-size: .58rem;
    font-weight: 900;
    gap: .35rem;
}

.client-exam-hero-copy h2 {
    color: #fff;
    font-size: 1.28rem;
    margin: .3rem 0;
}

.client-exam-hero-copy>p {
    color: rgba(255, 255, 255, .7);
    font-size: .67rem;
    line-height: 2;
    margin: 0;
    max-width: 650px;
}

.client-exam-hero-copy>div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .9rem;
}

.client-exam-hero-copy>div .btn {
    align-items: center;
    color: #234967;
    display: flex;
    font-size: .59rem;
    gap: .35rem;
    min-height: 40px;
}

.client-exam-hero-copy>div>a:not(.btn) {
    align-items: center;
    color: #c7d9e7;
    display: flex;
    font-size: .56rem;
    gap: .3rem;
    text-decoration: none;
}

.client-exam-summary {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
}

.client-exam-summary article {
    align-items: center;
    background: rgba(8, 25, 39, .22);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    display: flex;
    gap: .55rem;
    min-height: 68px;
    padding: .55rem;
}

.client-exam-summary article>span {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border-radius: 7px;
    color: #d6e5f0;
    display: flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.client-exam-summary article.is-running>span {
    color: #91dcce;
}

.client-exam-summary article.is-pending>span {
    color: #f0cb86;
}

.client-exam-summary article.is-graded>span {
    color: #b8d6ff;
}

.client-exam-summary article>div {
    display: grid;
}

.client-exam-summary strong {
    color: #fff;
    font-size: .9rem;
}

.client-exam-summary small {
    color: rgba(255, 255, 255, .64);
    font-size: .5rem;
}

.client-exam-resume-alert {
    align-items: center;
    background: #fff7e8;
    border: 1px solid #ecd39e;
    border-radius: 9px;
    color: #7d5c22;
    display: flex;
    justify-content: space-between;
    padding: .65rem .75rem;
    text-decoration: none;
}

.client-exam-resume-alert>span {
    align-items: center;
    display: grid;
    gap: .04rem;
    grid-template-columns: 32px minmax(0, 1fr);
}

.client-exam-resume-alert>span>i {
    align-items: center;
    background: #f4dfb4;
    border-radius: 6px;
    display: flex;
    grid-row: 1/3;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.client-exam-resume-alert strong {
    font-size: .6rem;
}

.client-exam-resume-alert small {
    font-size: .49rem;
    opacity: .8;
}

.client-exam-library,
.client-exam-reports {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 12px;
    padding: 1rem;
}

.client-exam-section-head {
    align-items: center;
    border-bottom: 1px solid var(--client-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: .85rem;
    padding-bottom: .7rem;
}

.client-exam-section-head>div:first-child {
    display: grid;
}

.client-exam-section-head>div:first-child>span {
    color: #315f8d;
    font-size: .52rem;
    font-weight: 900;
}

.client-exam-section-head h3 {
    color: var(--client-text);
    font-size: .82rem;
    margin: .08rem 0;
}

.client-exam-section-head p {
    color: var(--client-muted);
    font-size: .52rem;
    margin: 0;
}

.client-exam-section-head>div:last-child {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 7px;
    display: flex;
    gap: .45rem;
    padding: .4rem .55rem;
}

.client-exam-section-head>div:last-child b {
    color: #315f8d;
    font-size: .75rem;
}

.client-exam-section-head>div:last-child span {
    color: var(--client-muted);
    font-size: .48rem;
}

.client-exam-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-exam-card {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.client-exam-card:hover {
    border-color: #b9c9d8;
    box-shadow: 0 12px 28px rgba(27, 49, 70, .08);
    transform: translateY(-2px);
}

.client-exam-card.is-disabled {
    filter: none;
    opacity: .72;
}

.client-exam-cover {
    background: #152a3c;
    display: block;
    overflow: hidden;
    position: relative;
}

.client-exam-cover::after {
    background: linear-gradient(180deg, transparent 35%, rgba(10, 24, 37, .62));
    content: "";
    inset: 0;
    position: absolute;
}

.client-exam-cover img {
    aspect-ratio: 16/7.7;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%;
}

.client-exam-card:hover .client-exam-cover img {
    transform: scale(1.025);
}

.client-exam-state {
    align-items: center;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 5px;
    color: #fff;
    display: flex;
    font-size: .47rem;
    gap: .25rem;
    padding: .25rem .4rem;
    position: absolute;
    right: .55rem;
    top: .55rem;
    z-index: 2;
}

.client-exam-state.is-active {
    background: rgba(24, 116, 91, .82);
}

.client-exam-state.is-blocked {
    background: rgba(84, 91, 102, .86);
}

.client-exam-play {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
    bottom: .55rem;
    color: #315f8d;
    display: flex;
    font-size: .85rem;
    height: 34px;
    justify-content: center;
    left: .55rem;
    position: absolute;
    width: 34px;
    z-index: 2;
}

.client-exam-card-body {
    display: grid;
    gap: .65rem;
    padding: .8rem;
}

.client-exam-owner {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.client-exam-owner>span {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 6px;
    color: #315f8d;
    display: flex;
    height: 31px;
    justify-content: center;
    width: 31px;
}

.client-exam-owner>div {
    display: grid;
}

.client-exam-owner small {
    color: var(--client-muted);
    font-size: .44rem;
}

.client-exam-owner strong {
    color: var(--client-text);
    font-size: .53rem;
}

.client-exam-card h3 {
    color: var(--client-text);
    font-size: .73rem;
    font-weight: 900;
    line-height: 1.9;
    margin: 0;
    min-height: 2.75rem;
}

.client-exam-meta {
    color: var(--client-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .47rem;
    gap: .4rem .65rem;
}

.client-exam-meta span {
    align-items: center;
    display: flex;
    gap: .2rem;
}

.client-exam-meta i {
    color: #315f8d;
}

.client-exam-quota {
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 7px;
    display: grid;
    gap: .32rem;
    padding: .55rem;
}

.client-exam-quota>div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.client-exam-quota span,
.client-exam-quota small {
    color: var(--client-muted);
    font-size: .46rem;
}

.client-exam-quota strong {
    color: #315f8d;
    font-size: .55rem;
}

.client-exam-quota .progress {
    background: var(--client-border);
    height: 5px;
}

.client-exam-quota .progress-bar {
    background: linear-gradient(90deg, #315f8d, #25877f);
}

.client-exam-quota small i {
    color: #25877f;
}

.client-exam-card>footer {
    align-items: center;
    border-top: 1px solid var(--client-border);
    display: flex;
    gap: .45rem;
    justify-content: space-between;
    margin-top: auto;
    padding: .65rem .8rem;
}

.client-exam-card>footer>span {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .44rem;
    gap: .25rem;
}

.client-exam-card>footer>div {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.client-exam-card>footer .btn {
    align-items: center;
    display: flex;
    font-size: .49rem;
    gap: .25rem;
    min-height: 34px;
    padding: .35rem .5rem;
}

.client-exam-certificate {
    align-items: center;
    border: 1px solid #bcdccf;
    border-radius: 6px;
    color: #258267;
    display: flex;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    width: 34px;
}

.client-exam-empty {
    align-items: center;
    border: 1px dashed var(--client-border);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    grid-column: 1/-1;
    justify-content: center;
    min-height: 230px;
    padding: 1.5rem;
    text-align: center;
}

.client-exam-empty>span {
    align-items: center;
    background: var(--client-surface-soft);
    border-radius: 9px;
    color: #315f8d;
    display: flex;
    font-size: 1.3rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.client-exam-empty h3 {
    color: var(--client-text);
    font-size: .68rem;
    margin: .65rem 0 .2rem;
}

.client-exam-empty p {
    color: var(--client-muted);
    font-size: .53rem;
    margin: 0 0 .65rem;
}

.client-exam-empty>a {
    background: #315f8d;
    border-radius: 6px;
    color: #fff;
    font-size: .53rem;
    padding: .45rem .65rem;
    text-decoration: none;
}

.client-exam-empty.is-compact {
    min-height: 170px;
}

.client-attempt-list {
    display: grid;
    gap: .5rem;
}

.client-attempt-card {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-right: 3px solid var(--client-border);
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(180px, 1fr) auto 105px auto;
    padding: .6rem;
}

.client-attempt-card.is-running {
    border-right-color: #25877f;
}

.client-attempt-card.is-pending {
    border-right-color: #b27a28;
}

.client-attempt-card.is-graded {
    border-right-color: #315f8d;
}

.client-attempt-card.is-expired {
    border-right-color: #87929d;
}

.client-attempt-icon {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 7px;
    color: #315f8d;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.client-attempt-card.is-running .client-attempt-icon {
    color: #25877f;
}

.client-attempt-card.is-pending .client-attempt-icon {
    color: #b27a28;
}

.client-attempt-title {
    display: grid;
    min-width: 0;
}

.client-attempt-title small,
.client-attempt-score small {
    color: var(--client-muted);
    font-size: .43rem;
}

.client-attempt-title strong {
    color: var(--client-text);
    font-size: .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-attempt-title time {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .44rem;
    gap: .2rem;
}

.client-attempt-status {
    align-items: center;
    border: 1px solid;
    border-radius: 999px;
    display: flex;
    font-size: .46rem;
    gap: .2rem;
    padding: .27rem .42rem;
    white-space: nowrap;
}

.client-attempt-status.is-running {
    background: #e8f6f2;
    border-color: #bfdfd5;
    color: #207561;
}

.client-attempt-status.is-pending {
    background: #fff7e7;
    border-color: #ebd29c;
    color: #8b6121;
}

.client-attempt-status.is-graded {
    background: #eaf1f7;
    border-color: #cddbe7;
    color: #315f8d;
}

.client-attempt-status.is-expired {
    background: #eef1f3;
    border-color: #d5dbe0;
    color: #68747e;
}

.client-attempt-score {
    display: grid;
    text-align: center;
}

.client-attempt-score strong {
    color: var(--client-text);
    font-size: .65rem;
}

.client-attempt-score strong span {
    color: var(--client-muted);
    display: block;
    font-size: .42rem;
    font-weight: 500;
}

.client-attempt-actions {
    display: flex;
    gap: .35rem;
    justify-content: flex-end;
}

.client-attempt-actions .btn {
    align-items: center;
    display: flex;
    font-size: .48rem;
    gap: .25rem;
    min-height: 34px;
    white-space: nowrap;
}

.client-exam-pagination {
    margin-top: .8rem;
}

/* Explicit dark surfaces for engagement forms. */
html[data-panel-theme="dark"] .client-portal-body .lesson-question-composer,
html[data-panel-theme="dark"] .client-portal-body .lesson-question-composer>header,
html[data-panel-theme="dark"] .client-portal-body .lesson-question-form,
html[data-panel-theme="dark"] .client-portal-body .lesson-feedback-form,
html[data-panel-theme="dark"] .client-portal-body .lesson-feedback-form>header {
    background: #1d2a35 !important;
    border-color: #354654 !important;
    color: var(--client-text) !important;
}

html[data-panel-theme="dark"] .client-portal-body :is(.lesson-question-form, .lesson-feedback-form) :is(textarea, .form-control) {
    background: #18232d !important;
    border-color: #3a4a58 !important;
    color: #edf3f7 !important;
}

html[data-panel-theme="dark"] .client-portal-body :is(.lesson-question-form, .lesson-feedback-form) :is(textarea, .form-control)::placeholder {
    color: #8795a2 !important;
}

html[data-panel-theme="dark"] .client-exam-resume-alert {
    background: #3b3221;
    border-color: #6a5731;
    color: #edc679;
}

html[data-panel-theme="dark"] .client-attempt-status.is-running {
    background: #19352e;
    border-color: #2f5c50;
    color: #86cfb9;
}

html[data-panel-theme="dark"] .client-attempt-status.is-pending {
    background: #3b3221;
    border-color: #6a5731;
    color: #edc679;
}

html[data-panel-theme="dark"] .client-attempt-status.is-graded {
    background: #24394c;
    border-color: #35506a;
    color: #b9d3ea;
}

html[data-panel-theme="dark"] .client-attempt-status.is-expired {
    background: #29323a;
    border-color: #414d58;
    color: #b7c0c8;
}

@media(max-width:1199.98px) {
    .client-exam-hero {
        grid-template-columns: 1fr
    }

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

    .client-attempt-card {
        grid-template-columns: 42px minmax(180px, 1fr) auto 90px
    }

    .client-attempt-actions {
        grid-column: 2/-1
    }

    .client-attempt-actions .btn {
        flex: 1;
        justify-content: center
    }
}

@media(max-width:767.98px) {
    .client-exam-hero {
        border-radius: 10px;
        padding: 1rem
    }

    .client-exam-summary {
        grid-template-columns: 1fr 1fr
    }

    .client-exam-library,
    .client-exam-reports {
        padding: .75rem
    }

    .client-exam-grid {
        grid-template-columns: 1fr
    }

    .client-exam-section-head {
        align-items: flex-start
    }

    .client-attempt-card {
        grid-template-columns: 38px minmax(0, 1fr) auto
    }

    .client-attempt-score {
        grid-column: 2;
        text-align: right
    }

    .client-attempt-status {
        grid-column: 3;
        grid-row: 1
    }

    .client-attempt-actions {
        grid-column: 1/-1
    }

    .client-attempt-icon {
        height: 36px;
        width: 36px
    }
}

@media(max-width:480px) {
    .client-exam-summary {
        grid-template-columns: 1fr
    }

    .client-exam-section-head>div:last-child {
        display: none
    }

    .client-exam-card>footer {
        align-items: flex-start;
        flex-direction: column
    }

    .client-exam-card>footer>div,
    .client-exam-card>footer .btn {
        width: 100%
    }

    .client-exam-card>footer .btn {
        justify-content: center
    }

    .client-attempt-card {
        grid-template-columns: 36px minmax(0, 1fr)
    }

    .client-attempt-status {
        grid-column: 1/-1;
        grid-row: auto;
        justify-self: start
    }

    .client-attempt-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .client-attempt-actions .btn {
        justify-content: center
    }
}

/* Compact responsive learning/exam cards and the active-exam notice. */
.client-exam-resume-alert {
    align-items: center;
    background: #fff9ed;
    border: 1px solid #ead6ad;
    border-right: 3px solid #bd8738;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(105, 74, 29, .06);
    color: #694a1d;
    display: grid;
    gap: .55rem;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    padding: .5rem .6rem;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.client-exam-resume-alert:hover {
    border-color: #d4b574;
    box-shadow: 0 7px 18px rgba(105, 74, 29, .09);
    color: #694a1d;
}

.client-exam-resume-icon {
    align-items: center;
    background: #f3dfb8;
    border-radius: 7px;
    color: #8a5c1e;
    display: flex;
    font-size: .82rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.client-exam-resume-copy {
    display: grid;
    gap: .02rem;
    min-width: 0;
}

.client-exam-resume-copy>strong {
    color: #62451b;
    font-size: .59rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-exam-resume-copy>small {
    color: #977342;
    font-size: .46rem;
}

.client-exam-resume-action {
    align-items: center;
    border: 1px solid #e2c993;
    border-radius: 6px;
    color: #79521d;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

html[data-panel-theme="dark"] .client-exam-resume-alert {
    background: #352d20;
    border-color: #5f4e31;
    border-right-color: #c3954e;
    box-shadow: none;
    color: #efd098;
}

html[data-panel-theme="dark"] .client-exam-resume-icon {
    background: #493b25;
    color: #e6bd72;
}

html[data-panel-theme="dark"] .client-exam-resume-copy>strong {
    color: #f3d9aa;
}

html[data-panel-theme="dark"] .client-exam-resume-copy>small {
    color: #c8aa78;
}

html[data-panel-theme="dark"] .client-exam-resume-action {
    border-color: #665635;
    color: #eccb8f;
}

@media(max-width:767.98px) {

    .client-library-grid,
    .client-exam-grid {
        gap: .6rem
    }

    .client-library-course {
        display: grid;
        grid-template-areas: "cover body" "cover footer";
        grid-template-columns: 112px minmax(0, 1fr)
    }

    .client-library-cover {
        grid-area: cover;
        min-height: 174px
    }

    .client-library-cover img {
        aspect-ratio: auto;
        height: 100%;
        position: absolute;
        width: 100%
    }

    .client-library-play {
        bottom: .45rem;
        height: 28px;
        left: .45rem;
        width: 28px
    }

    .client-library-state {
        font-size: .42rem;
        right: .4rem;
        top: .4rem
    }

    .client-library-course-body {
        gap: .38rem;
        grid-area: body;
        padding: .55rem .6rem
    }

    .client-library-course-teacher>span {
        height: 25px;
        width: 25px
    }

    .client-library-course-teacher small {
        display: none
    }

    .client-library-course-teacher strong {
        font-size: .5rem
    }

    .client-library-course h3 {
        font-size: .63rem;
        line-height: 1.7;
        min-height: 0
    }

    .client-library-course-meta {
        font-size: .43rem;
        gap: .3rem .45rem
    }

    .client-library-progress {
        gap: .22rem;
        padding: .4rem
    }

    .client-library-progress span,
    .client-library-progress small {
        font-size: .42rem
    }

    .client-library-progress strong {
        font-size: .56rem
    }

    .client-library-course>footer {
        grid-area: footer;
        padding: .45rem .6rem
    }

    .client-library-course>footer>span {
        display: none
    }

    .client-library-course>footer>a {
        font-size: .46rem;
        justify-content: center;
        padding: .38rem .45rem;
        width: 100%
    }

    .client-exam-card {
        display: grid;
        grid-template-areas: "cover body" "cover footer";
        grid-template-columns: 112px minmax(0, 1fr)
    }

    .client-exam-cover {
        grid-area: cover;
        min-height: 190px
    }

    .client-exam-cover img {
        aspect-ratio: auto;
        height: 100%;
        position: absolute;
        width: 100%
    }

    .client-exam-state {
        font-size: .41rem;
        right: .4rem;
        top: .4rem
    }

    .client-exam-play {
        bottom: .45rem;
        height: 28px;
        left: .45rem;
        width: 28px
    }

    .client-exam-card-body {
        gap: .38rem;
        grid-area: body;
        padding: .55rem .6rem
    }

    .client-exam-owner>span {
        height: 25px;
        width: 25px
    }

    .client-exam-owner small {
        display: none
    }

    .client-exam-owner strong {
        font-size: .49rem
    }

    .client-exam-card h3 {
        font-size: .62rem;
        line-height: 1.7;
        min-height: 0
    }

    .client-exam-meta {
        font-size: .42rem;
        gap: .28rem .45rem
    }

    .client-exam-quota {
        gap: .2rem;
        padding: .4rem
    }

    .client-exam-quota span,
    .client-exam-quota small {
        font-size: .4rem
    }

    .client-exam-quota strong {
        font-size: .48rem
    }

    .client-exam-card>footer {
        align-items: center;
        flex-direction: row;
        grid-area: footer;
        padding: .45rem .6rem
    }

    .client-exam-card>footer>span {
        display: none
    }

    .client-exam-card>footer>div {
        width: 100%
    }

    .client-exam-card>footer .btn {
        font-size: .44rem;
        justify-content: center;
        min-height: 31px;
        width: 100%
    }
}

@media(max-width:575.98px) {
    .client-exam-resume-alert {
        gap: .45rem;
        grid-template-columns: 32px minmax(0, 1fr) 28px;
        padding: .45rem .5rem
    }

    .client-exam-resume-icon {
        height: 32px;
        width: 32px
    }

    .client-exam-resume-action {
        height: 28px;
        width: 28px
    }

    .client-exam-resume-copy>small {
        font-size: .43rem
    }
}

@media(max-width:420px) {

    .client-library-course,
    .client-exam-card {
        grid-template-columns: 96px minmax(0, 1fr)
    }

    .client-library-cover {
        min-height: 166px
    }

    .client-exam-cover {
        min-height: 182px
    }

    .client-library-course-meta span:nth-child(3),
    .client-exam-meta span:nth-child(3) {
        display: none
    }
}

/* Client quiz start gate and explicit attempt state. */
.client-quiz-taking-head {
    align-items: stretch;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(190px, 1.2fr) minmax(330px, 1fr) auto;
}

.client-quiz-taking-main {
    align-self: center;
    min-width: 0;
}

.client-quiz-taking-main h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-quiz-taking-meta {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-quiz-taking-meta article {
    align-items: center;
    background: var(--client-surface-soft, var(--panel-surface-soft));
    border: 1px solid var(--client-border, var(--panel-border));
    border-radius: 7px;
    display: grid;
    gap: .08rem;
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 0;
    padding: .45rem;
}

.client-quiz-taking-meta article>i {
    align-items: center;
    background: var(--client-surface, var(--panel-surface));
    border: 1px solid var(--client-border, var(--panel-border));
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    grid-row: 1/3;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.client-quiz-taking-meta article>span {
    color: var(--panel-muted);
    font-size: .45rem;
}

.client-quiz-taking-meta article>strong {
    color: var(--panel-text);
    font-size: .56rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-quiz-taking-actions {
    align-items: stretch;
    display: grid;
    gap: .4rem;
    justify-items: stretch;
}

.client-quiz-taking-actions>.btn {
    align-items: center;
    display: flex;
    font-size: .52rem;
    gap: .3rem;
    justify-content: center;
    min-height: 34px;
}

.client-quiz-head-status {
    align-items: flex-end;
    display: grid;
    gap: .4rem;
    justify-items: end;
}

.client-quiz-head-status .client-attempt-status {
    font-size: .5rem;
    font-weight: 850;
}

.client-attempt-status.is-ready {
    background: #e9f5f1;
    border-color: #badfd2;
    color: #20765e;
}

.client-attempt-status.is-unavailable {
    background: #f1f2f4;
    border-color: #d5dbe1;
    color: #68747e;
}

.quiz-start-gate {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 12px;
    display: grid;
    gap: 1rem;
    overflow: hidden;
    padding: 1rem;
}

.quiz-start-gate-intro {
    align-items: center;
    background: linear-gradient(120deg, #172f47, #28577b);
    border-radius: 9px;
    color: #fff;
    display: grid;
    gap: .8rem;
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 1rem;
    position: relative;
}

.quiz-start-gate-intro::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 26px 26px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.quiz-start-gate-intro>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    display: flex;
    font-size: 1.15rem;
    height: 54px;
    justify-content: center;
    position: relative;
    width: 54px;
    z-index: 1;
}

.quiz-start-gate-intro>div {
    position: relative;
    z-index: 1;
}

.quiz-start-gate-intro small {
    color: #b9d0e1;
    font-size: .5rem;
    font-weight: 850;
}

.quiz-start-gate-intro h3 {
    color: #fff;
    font-size: .9rem;
    margin: .12rem 0;
}

.quiz-start-gate-intro p {
    color: rgba(255, 255, 255, .72);
    font-size: .56rem;
    line-height: 2;
    margin: 0;
    max-width: 800px;
}

.quiz-start-facts {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quiz-start-facts>div {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    display: grid;
    gap: .08rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 66px;
    padding: .55rem;
}

.quiz-start-facts i {
    align-items: center;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 6px;
    color: #315f8d;
    display: flex;
    grid-row: 1/3;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.quiz-start-facts span {
    color: var(--client-muted);
    font-size: .45rem;
}

.quiz-start-facts strong {
    color: var(--client-text);
    font-size: .58rem;
}

.quiz-start-rules {
    border: 1px solid var(--client-border);
    border-radius: 8px;
    padding: .75rem;
}

.quiz-start-rules>strong {
    align-items: center;
    color: var(--client-text);
    display: flex;
    font-size: .58rem;
    gap: .35rem;
}

.quiz-start-rules>strong i {
    color: #a77d42;
}

.quiz-start-rules ul {
    color: var(--client-muted);
    display: grid;
    font-size: .52rem;
    gap: .35rem;
    line-height: 1.95;
    margin: .55rem 0 0;
    padding-right: 1.1rem;
}

.quiz-start-action {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .65rem;
}

.quiz-start-action>span {
    align-items: center;
    color: var(--client-muted);
    display: flex;
    font-size: .5rem;
    gap: .3rem;
}

.quiz-start-action>span i {
    color: #25877f;
}

.quiz-start-action .btn {
    align-items: center;
    display: flex;
    font-size: .58rem;
    gap: .35rem;
    min-height: 42px;
}

.quiz-previous-attempts {
    padding: .85rem !important;
}

.quiz-previous-attempts>header {
    align-items: center;
    border-bottom: 1px solid var(--client-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: .6rem;
    padding-bottom: .55rem;
}

.quiz-previous-attempts>header small {
    color: #315f8d;
    font-size: .45rem;
    font-weight: 850;
}

.quiz-previous-attempts>header h3 {
    color: var(--client-text);
    font-size: .68rem;
    margin: .1rem 0 0;
}

.quiz-previous-attempts>header>span {
    color: var(--client-muted);
    font-size: .48rem;
}

.quiz-previous-attempts .learning-quiz-history {
    display: grid;
    gap: .4rem;
}

.quiz-previous-attempts .learning-quiz-history>a {
    align-items: center;
    background: var(--client-surface-soft);
    border: 1px solid var(--client-border);
    border-radius: 7px;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .5rem;
    text-decoration: none;
}

.quiz-previous-attempts .learning-quiz-history>a>strong {
    color: var(--client-text);
    font-size: .52rem;
}

.quiz-previous-attempts .learning-quiz-history>a>small {
    color: var(--client-muted);
    font-size: .47rem;
}

.quiz-report-status {
    margin-top: .55rem;
    width: max-content;
}

.quiz-start-confirm-popup {
    border-radius: 12px !important;
    font-family: "IRANSansPanel", Tahoma, Arial, sans-serif !important;
}

.quiz-start-confirm-content {
    color: #5d6b79;
    text-align: right;
}

.quiz-start-confirm-content>strong {
    color: #172b43;
    display: block;
    font-size: .78rem;
    margin-bottom: .65rem;
}

.quiz-start-confirm-content>div {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(3, 1fr);
}

.quiz-start-confirm-content>div>span {
    align-items: center;
    background: #f3f5f7;
    border: 1px solid #dce3e9;
    border-radius: 6px;
    color: #334d65;
    display: flex;
    font-size: .55rem;
    gap: .3rem;
    justify-content: center;
    padding: .55rem .35rem;
}

.quiz-start-confirm-content>div i {
    color: #315f8d;
}

.quiz-start-confirm-content p {
    border-right: 3px solid #a77d42;
    font-size: .55rem;
    line-height: 2;
    margin: .7rem 0 0;
    padding: .35rem .55rem;
}

/* Simplified client dashboard. */
.client-dashboard-simple {
    display: grid;
    gap: .8rem;
}

.client-dashboard-simple .client-welcome-card-compact {
    grid-template-columns: minmax(0, 1fr);
    min-height: 185px;
    padding: 1.4rem 1.55rem;
}

.client-dashboard-simple .client-welcome-copy {
    max-width: 900px;
}

.client-dashboard-simple .client-welcome-copy h2 {
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
}

.client-dashboard-simple .client-welcome-copy p {
    max-width: 760px;
}

.client-dashboard-grid-single {
    display: block;
}

.client-dashboard-grid-single .client-orders-block {
    width: 100%;
}

.client-dashboard-simple .client-recommendations {
    margin-top: 0;
}

html[data-panel-theme="dark"] .client-attempt-status.is-ready {
    background: #19352e;
    border-color: #2f5c50;
    color: #86cfb9;
}

html[data-panel-theme="dark"] .client-attempt-status.is-unavailable {
    background: #29323a;
    border-color: #414d58;
    color: #b7c0c8;
}

html[data-panel-theme="dark"] .quiz-start-confirm-popup {
    background: #17232e;
    color: #edf3f7;
}

html[data-panel-theme="dark"] .quiz-start-confirm-popup :is(.swal2-title, .swal2-html-container) {
    color: #edf3f7;
}

html[data-panel-theme="dark"] .quiz-start-confirm-content {
    color: #aebbc7;
}

html[data-panel-theme="dark"] .quiz-start-confirm-content>strong {
    color: #edf3f7;
}

html[data-panel-theme="dark"] .quiz-start-confirm-content>div>span {
    background: #1e2c38;
    border-color: #374856;
    color: #dbe6ed;
}

@media(min-width:992px) {
    .client-quiz-taking-meta {
        display: flex;
        flex-wrap: nowrap
    }

    .client-quiz-taking-meta article {
        display: flex;
        flex: 1 1 0;
        gap: .4rem;
        white-space: nowrap
    }

    .client-quiz-taking-meta article>i {
        flex: 0 0 30px;
        grid-row: auto
    }

    .client-quiz-taking-meta article>strong {
        margin-inline-start: auto
    }
}

@media(max-width:991.98px) {
    .client-quiz-taking-head {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .client-quiz-taking-meta {
        grid-column: 1/-1;
        grid-row: 2
    }

    .client-quiz-taking-actions {
        grid-column: 2;
        grid-row: 1
    }
}

@media(max-width:767.98px) {
    .client-quiz-taking-head {
        grid-template-columns: 1fr
    }

    .client-quiz-taking-main,
    .client-quiz-taking-meta,
    .client-quiz-taking-actions {
        grid-column: 1;
        grid-row: auto
    }

    .client-quiz-taking-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .client-quiz-head-status {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        justify-items: stretch
    }

    .client-quiz-taking-head .client-attempt-status {
        grid-column: auto;
        grid-row: auto;
        justify-content: center;
        justify-self: stretch
    }

    .client-quiz-taking-head .quiz-attempt-cap {
        justify-content: center
    }

    .client-quiz-taking-actions>.btn {
        width: 100%
    }

    .quiz-start-facts {
        grid-template-columns: 1fr 1fr
    }

    .quiz-start-action {
        align-items: stretch;
        flex-direction: column
    }

    .quiz-start-action .btn {
        justify-content: center;
        width: 100%
    }

    .quiz-previous-attempts .learning-quiz-history>a {
        grid-template-columns: 1fr
    }

    .quiz-previous-attempts .client-attempt-status {
        justify-self: start
    }

    .quiz-start-confirm-content>div {
        grid-template-columns: 1fr
    }

    .client-dashboard-simple .client-welcome-card-compact {
        min-height: 0;
        padding: 1rem
    }
}

@media(max-width:480px) {
    .client-quiz-taking-meta {
        grid-template-columns: 1fr
    }

    .client-quiz-head-status {
        grid-template-columns: 1fr
    }

    .quiz-start-gate {
        padding: .7rem
    }

    .quiz-start-gate-intro {
        align-items: start;
        grid-template-columns: 42px minmax(0, 1fr);
        padding: .75rem
    }

    .quiz-start-gate-intro>span {
        height: 42px;
        width: 42px
    }

    .quiz-start-facts {
        grid-template-columns: 1fr
    }
}

.standalone-quiz-submit {
    justify-content: flex-end;
}

/* Organization collaborations and support tickets. */
.teacher-organization-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 150px;
}

.teacher-organization-tags span {
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 25%, var(--panel-border));
    border-radius: 999px;
    color: var(--panel-accent);
    font-size: .68rem;
    font-weight: 800;
    padding: .22rem .5rem;
}

.teacher-organizations-panel {
    padding: 1rem;
}

.teacher-organization-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-organization-grid>div {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .6rem;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: .55rem;
}

.teacher-organization-grid>div>span {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: flex;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    width: 42px;
}

.teacher-organization-grid img {
    height: 100%;
    object-fit: contain;
    padding: .2rem;
    width: 100%;
}

.teacher-organization-grid strong {
    color: var(--panel-text);
    font-size: .75rem;
}

.organization-dashboard-identity {
    align-items: center;
    background: linear-gradient(125deg, #0b3f3a, #12675f);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: #fff;
    display: flex;
    gap: 1rem;
    min-height: 112px;
    padding: 1.15rem 1.3rem;
}

.organization-dashboard-logo {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    display: flex;
    font-size: 1.5rem;
    height: 74px;
    justify-content: center;
    overflow: hidden;
    width: 74px;
}

.organization-dashboard-logo img {
    height: 100%;
    object-fit: contain;
    padding: .4rem;
    width: 100%;
}

.organization-dashboard-identity small {
    color: #a9d8d3;
    font-size: .65rem;
    font-weight: 800;
}

.organization-dashboard-identity h2 {
    color: #fff;
    font-size: 1.2rem;
    margin: .15rem 0 0;
}

.organization-dashboard-actions {
    display: grid;
    gap: .45rem;
}

.organization-dashboard-actions>a {
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-text);
    display: grid;
    gap: .6rem;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: .65rem;
    text-decoration: none;
    transition: .18s ease;
}

.organization-dashboard-actions>a:hover {
    border-color: var(--panel-accent);
    transform: translateX(-2px);
}

.organization-dashboard-actions>a>i:first-child {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    height: 38px;
    justify-content: center;
}

.organization-dashboard-actions span {
    display: grid;
}

.organization-dashboard-actions strong {
    font-size: .72rem;
}

.organization-dashboard-actions small {
    color: var(--panel-muted);
    font-size: .6rem;
}

.ticket-dashboard-summary {
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 10px;
    display: grid;
    gap: .85rem;
    grid-template-columns: 250px minmax(0, 1fr);
    padding: .85rem;
}

.ticket-summary-heading {
    align-items: center;
    border-left: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    display: grid;
    gap: .6rem;
    grid-template-columns: 42px minmax(0, 1fr);
    padding-left: .85rem;
}

.ticket-summary-heading>span {
    align-items: center;
    background: var(--panel-accent-soft, #eaf1f7);
    border-radius: 8px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    font-size: 1rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ticket-summary-heading>div {
    display: grid;
}

.ticket-summary-heading small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .58rem;
}

.ticket-summary-heading strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .8rem;
}

.ticket-summary-heading>a {
    color: var(--panel-accent, #315f8d);
    font-size: .6rem;
    font-weight: 800;
    grid-column: 2;
    text-decoration: none;
}

.ticket-summary-metrics {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ticket-summary-metrics>div {
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 8px;
    display: grid;
    gap: .1rem;
    padding: .6rem .7rem;
    position: relative;
}

.ticket-summary-metrics>div::before {
    background: #7b8794;
    border-radius: 3px;
    content: "";
    inset: 8px auto 8px 0;
    position: absolute;
    width: 3px;
}

.ticket-summary-metrics .is-pending::before {
    background: #d59b38;
}

.ticket-summary-metrics .is-answered::before {
    background: #2b9a73;
}

.ticket-summary-metrics .is-closed::before {
    background: #667382;
}

.ticket-summary-metrics small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .58rem;
}

.ticket-summary-metrics strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: 1rem;
}

.ticket-page-header {
    align-items: center;
}

.ticket-filter-strip {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) minmax(170px, 220px) auto auto;
}

.ticket-filter-strip>select {
    min-width: 170px;
}

.ticket-table-subject,
.ticket-date {
    display: grid;
    gap: .15rem;
}

.ticket-table-subject span {
    color: var(--panel-accent, #315f8d);
    direction: ltr;
    font-size: .58rem;
    font-weight: 900;
    justify-self: start;
}

.ticket-table-subject strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .7rem;
    max-width: 440px;
}

.ticket-date {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .63rem;
}

.ticket-date small {
    color: var(--panel-muted, var(--client-muted, #718096));
}

.ticket-sender-cell {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: 36px minmax(0, 1fr);
}

.ticket-sender-cell>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.ticket-sender-cell>div {
    display: grid;
}

.ticket-sender-cell strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.ticket-sender-cell small {
    color: var(--panel-muted);
    font-size: .56rem;
}

.ticket-status {
    align-items: center;
    border: 1px solid;
    border-radius: 999px;
    display: inline-flex;
    font-size: .6rem;
    font-weight: 850;
    gap: .35rem;
    padding: .28rem .5rem;
    white-space: nowrap;
}

.ticket-status i {
    background: currentColor;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.ticket-status-pending {
    background: #fff8e8;
    border-color: #efd397;
    color: #95661b;
}

.ticket-status-answered {
    background: #eaf8f2;
    border-color: #b9dfcf;
    color: #217858;
}

.ticket-status-closed {
    background: #eef1f4;
    border-color: #d5dce3;
    color: #5d6a76;
}

.ticket-compose-form {
    max-width: none;
}

.ticket-compose-intro {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 44px minmax(0, 1fr);
    margin-bottom: 1rem;
    padding: .7rem;
}

.ticket-compose-intro>span {
    align-items: center;
    background: var(--panel-accent-soft, #eaf1f7);
    border-radius: 7px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 44px;
    justify-content: center;
}

.ticket-compose-intro>div {
    display: grid;
}

.ticket-compose-intro strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .75rem;
}

.ticket-compose-intro small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .62rem;
}

.ticket-thread-header {
    align-items: end;
    background: linear-gradient(120deg, #172f47, #28577b);
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 130px;
    padding: 1.15rem;
}

.ticket-thread-header>div {
    display: grid;
    gap: .25rem;
}

.ticket-thread-header a {
    color: #c6d9e8;
    font-size: .6rem;
    text-decoration: none;
}

.ticket-thread-header span:not(.ticket-status) {
    color: #a9c5db;
    direction: ltr;
    font-size: .6rem;
    justify-self: start;
}

.ticket-thread-header h2 {
    color: #fff;
    font-size: 1rem;
    margin: 0;
    max-width: 800px;
}

.ticket-thread-header .ticket-status {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.ticket-admin-status {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: .6rem;
    padding: .6rem;
}

.ticket-admin-status label {
    color: var(--panel-muted);
    font-size: .65rem;
    margin-left: auto;
}

.ticket-admin-status select {
    max-width: 210px;
}

.ticket-thread {
    display: grid;
    gap: .8rem;
    padding: 1rem;
}

.ticket-message {
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 9px;
    margin-left: 8%;
    overflow: hidden;
}

.ticket-message.is-admin {
    background: color-mix(in srgb, var(--panel-accent-soft, #eaf1f7) 52%, var(--panel-surface, var(--client-surface, #fff)));
    margin-left: 0;
    margin-right: 8%;
}

.ticket-message header {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border-bottom: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: .55rem .7rem;
}

.ticket-message header>span {
    align-items: center;
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 7px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 36px;
    justify-content: center;
}

.ticket-message header>div {
    display: grid;
}

.ticket-message header strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .68rem;
}

.ticket-message header small,
.ticket-message time {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .56rem;
}

.ticket-message-text {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .7rem;
    line-height: 2.15;
    padding: .8rem;
    white-space: normal;
}

.ticket-attachments {
    border-top: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    display: grid;
    gap: .4rem;
    padding: .6rem;
}

.ticket-attachments>div {
    align-items: center;
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 7px;
    display: grid;
    gap: .45rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: .45rem;
}

.ticket-attachments>div>span {
    align-items: center;
    display: grid;
    gap: .45rem;
    grid-template-columns: 30px minmax(0, 1fr) auto;
}

.ticket-attachments i {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border-radius: 6px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 30px;
    justify-content: center;
}

.ticket-attachments strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-attachments small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .52rem;
}

.ticket-attachments a {
    color: var(--panel-accent, #315f8d);
    font-size: .56rem;
    font-weight: 800;
    text-decoration: none;
}

.ticket-reply-form {
    padding: 1rem;
}

.ticket-closed-note {
    align-items: center;
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 8px;
    display: flex;
    gap: .65rem;
    padding: .8rem;
}

.ticket-closed-note>i {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: 1.1rem;
}

.ticket-closed-note>div {
    display: grid;
}

.ticket-closed-note strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .72rem;
}

.ticket-closed-note span {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .6rem;
}

.client-nav-badge {
    align-items: center;
    background: #b8324a;
    border: 2px solid var(--client-surface);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: .52rem;
    height: 19px;
    justify-content: center;
    min-width: 19px;
    padding: 0 .25rem;
    position: absolute;
    top: 2px;
    left: 2px;
}

.client-drawer-nav a {
    position: relative;
}

.client-drawer-nav .client-nav-badge {
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
}

.client-header-navrow .client-button-navigation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

html[data-panel-theme="dark"] :is(.ticket-status-pending) {
    background: #3a301d;
    border-color: #66532d;
    color: #e7bf6f;
}

html[data-panel-theme="dark"] :is(.ticket-status-answered) {
    background: #17352c;
    border-color: #2c5b4d;
    color: #83cfb5;
}

html[data-panel-theme="dark"] :is(.ticket-status-closed) {
    background: #27313a;
    border-color: #3e4a55;
    color: #b6c0c9;
}

@media(max-width:1199.98px) {
    .teacher-organization-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ticket-dashboard-summary {
        grid-template-columns: 1fr
    }

    .ticket-summary-heading {
        border-left: 0;
        border-bottom: 1px solid var(--panel-border, var(--client-border));
        grid-template-columns: 42px minmax(0, 1fr) auto;
        padding: 0 0 .7rem
    }

    .ticket-summary-heading>a {
        grid-column: 3;
        grid-row: 1
    }

    .ticket-filter-strip {
        grid-template-columns: 1fr 1fr
    }

    .client-header-navrow .client-button-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:767.98px) {

    .teacher-organization-grid,
    .ticket-summary-metrics {
        grid-template-columns: 1fr 1fr
    }

    .ticket-filter-strip {
        display: grid;
        grid-template-columns: 1fr
    }

    .ticket-filter-strip>* {
        width: 100%
    }

    .ticket-thread-header {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0
    }

    .ticket-message,
    .ticket-message.is-admin {
        margin-left: 0;
        margin-right: 0
    }

    .ticket-message header {
        grid-template-columns: 36px minmax(0, 1fr)
    }

    .ticket-message time {
        grid-column: 2
    }

    .ticket-attachments>div {
        grid-template-columns: 1fr auto auto
    }

    .organization-dashboard-identity {
        min-height: 92px;
        padding: .8rem
    }

    .organization-dashboard-logo {
        height: 62px;
        width: 62px
    }
}

@media(max-width:480px) {

    .teacher-organization-grid,
    .ticket-summary-metrics {
        grid-template-columns: 1fr
    }

    .ticket-summary-heading {
        grid-template-columns: 42px minmax(0, 1fr)
    }

    .ticket-summary-heading>a {
        grid-column: 2;
        grid-row: 2
    }

    .ticket-attachments>div {
        grid-template-columns: 1fr 1fr
    }

    .ticket-attachments>div>span {
        grid-column: 1/-1
    }

    .ticket-admin-status {
        align-items: stretch;
        flex-direction: column
    }

    .ticket-admin-status select {
        max-width: none
    }
}

/* Panel palettes aligned with their dedicated login pages. */
.panel-role-admin {
    --panel-accent: #315f8d;
    --panel-accent-soft: #e9f1f9;
    --formal-gold: #6689ab;
}

.panel-role-admin .panel-sidebar {
    background: linear-gradient(180deg, #102b49, #0d243d 58%, #091a2d);
}

.panel-role-admin .btn-primary {
    background: #102b49;
    border-color: #102b49;
}

.panel-role-admin .btn-primary:hover {
    background: #315f8d;
    border-color: #315f8d;
}

.panel-role-teacher {
    --panel-accent: #137a72;
    --panel-accent-soft: #e5f4f1;
    --formal-gold: #5eaaa3;
}

.panel-role-teacher .panel-sidebar {
    background: linear-gradient(180deg, #173b45, #12333b 58%, #0c252c);
}

.panel-role-teacher .panel-nav a.active,
.panel-role-teacher .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(19, 122, 114, .78), rgba(18, 75, 78, .68));
    border-color: rgba(160, 222, 214, .2);
}

.panel-role-teacher .panel-nav a.active::before {
    background: #76c8c0;
}

.panel-role-teacher .btn-primary {
    background: #137a72;
    border-color: #137a72;
}

.panel-role-teacher .btn-primary:hover {
    background: #0f625c;
    border-color: #0f625c;
}

.panel-role-teacher .teacher-workspace-hero {
    background: linear-gradient(125deg, #173b45, #1c5660 62%, #137a72);
}

.panel-role-organization {
    --panel-accent: #4f7498;
    --panel-accent-soft: #e7eef5;
    --formal-gold: #7895b1;
}

.panel-role-organization .panel-sidebar {
    background: linear-gradient(180deg, #172b40, #122538 58%, #0c1b2a);
}

.panel-role-organization .panel-nav a.active,
.panel-role-organization .panel-nav a:hover {
    background: linear-gradient(90deg, rgba(79, 116, 152, .8), rgba(42, 72, 101, .7));
    border-color: rgba(171, 198, 224, .22);
}

.panel-role-organization .panel-nav a.active {
    border-right-color: #91b2d1;
}

.panel-role-organization .panel-avatar {
    background: #365d83;
    border-color: #6f91b1;
}

.panel-role-organization .btn-primary {
    background: #4f7498;
    border-color: #4f7498;
}

.panel-role-organization .btn-primary:hover {
    background: #3d607f;
    border-color: #3d607f;
}

.panel-role-organization .btn-outline-primary {
    border-color: #7897b4;
    color: #4f7498;
}

.panel-role-organization .form-control:focus,
.panel-role-organization .form-select:focus {
    border-color: #7897b4;
    box-shadow: 0 0 0 .17rem rgba(79, 116, 152, .12);
}

.panel-role-organization .organization-dashboard-identity {
    background: linear-gradient(125deg, #172b40, #284965 64%, #4f7498);
}

html[data-panel-theme="dark"] .panel-role-admin {
    --panel-accent: #83a9ce;
    --panel-accent-soft: #1c3043;
}

html[data-panel-theme="dark"] .panel-role-teacher {
    --panel-accent: #78cfc6;
    --panel-accent-soft: #183734;
}

html[data-panel-theme="dark"] .panel-role-organization {
    --panel-bg: #0b131d;
    --panel-surface: #121f2c;
    --panel-surface-soft: #0e1a26;
    --panel-border: #293b4e;
    --panel-text: #e7eef5;
    --panel-muted: #94a7b9;
    --panel-accent: #93b4d2;
    --panel-accent-soft: #1d3246;
}

html[data-panel-theme="dark"] .panel-role-admin .panel-sidebar {
    background: linear-gradient(180deg, #102b49, #0d243d 58%, #091a2d);
}

html[data-panel-theme="dark"] .panel-role-teacher .panel-sidebar {
    background: linear-gradient(180deg, #173b45, #12333b 58%, #0c252c);
}

html[data-panel-theme="dark"] .panel-role-organization .panel-sidebar {
    background: linear-gradient(180deg, #172b40, #122538 58%, #0c1b2a);
}

/* Keep table empty states consistent with teacher and organization dark palettes. */
html[data-panel-theme="dark"] :is(.panel-role-teacher, .panel-role-organization) :is(.empty-state, .shared-admin-empty) {
    background: var(--panel-surface-soft) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-muted) !important;
}

html[data-panel-theme="dark"] :is(.panel-role-teacher, .panel-role-organization) :is(.empty-state, .shared-admin-empty) strong {
    color: var(--panel-text) !important;
}

html[data-panel-theme="dark"] :is(.panel-role-teacher, .panel-role-organization) :is(.empty-state, .shared-admin-empty) i {
    color: var(--panel-accent) !important;
}

html[data-panel-theme="dark"] :is(.panel-role-teacher, .panel-role-organization) .table>tbody>tr>td:has(> :is(.empty-state, .shared-admin-empty)) {
    --bs-table-bg: var(--panel-surface-soft);
    --bs-table-accent-bg: var(--panel-surface-soft);
    background: var(--panel-surface-soft) !important;
    box-shadow: none !important;
}

/* Delegated panel access. */
.panel-delegation-banner {
    align-items: center;
    background: #fff7e7;
    border-bottom: 1px solid #ead5a8;
    color: #6f511e;
    display: grid;
    gap: .65rem;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: .55rem 1.1rem;
}

.panel-delegation-banner>span {
    align-items: center;
    background: #f1d89c;
    border-radius: 8px;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.panel-delegation-banner>div {
    display: grid;
}

.panel-delegation-banner strong {
    font-size: .72rem;
}

.panel-delegation-banner small {
    color: #8a6d36;
    font-size: .6rem;
}

.panel-delegation-banner form button {
    background: #fff;
    border: 1px solid #d9bd82;
    border-radius: 7px;
    color: #70531f;
    font-size: .62rem;
    font-weight: 850;
    padding: .48rem .7rem;
}

html[data-panel-theme="dark"] .panel-delegation-banner {
    background: #352c1c;
    border-color: #5e4d2c;
    color: #edca81;
}

html[data-panel-theme="dark"] .panel-delegation-banner>span {
    background: #594722;
}

html[data-panel-theme="dark"] .panel-delegation-banner small {
    color: #c4a76d;
}

html[data-panel-theme="dark"] .panel-delegation-banner form button {
    background: #251f15;
    border-color: #6d572d;
    color: #ebc879;
}

/* Organization teacher directory. */
.organization-teacher-add {
    align-items: end;
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .9rem;
}

.organization-teacher-add>div:first-child {
    min-width: 0;
}

.organization-teacher-head {
    align-items: center;
}

.organization-teacher-head .organization-employee-total {
    flex: 0 0 auto;
}

/* Redesigned ticket detail shared by all panels. */
.ticket-detail-hero {
    align-items: end;
    background: linear-gradient(125deg, #102b49, #244d70 65%, #315f8d);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 150px;
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    position: relative;
}

.ticket-detail-hero::before {
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    inset: 0;
    position: absolute;
}

.ticket-detail-hero>* {
    position: relative;
    z-index: 1;
}

.ticket-detail-hero-main {
    display: grid;
    gap: .2rem;
}

.ticket-detail-hero-main>a {
    color: #c3d6e7;
    font-size: .62rem;
    margin-bottom: .45rem;
    text-decoration: none;
}

.ticket-detail-hero-main>span {
    color: #a9c5dc;
    direction: ltr;
    font-size: .58rem;
    justify-self: start;
}

.ticket-detail-hero-main h2 {
    color: #fff;
    font-size: 1.12rem;
    margin: .15rem 0;
}

.ticket-detail-hero-main p {
    color: rgba(255, 255, 255, .68);
    font-size: .62rem;
    margin: 0;
}

.ticket-detail-hero .ticket-status {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.panel-role-teacher .ticket-detail-hero {
    background: linear-gradient(125deg, #173b45, #1b5960 65%, #137a72);
}

.panel-role-organization .ticket-detail-hero {
    background: linear-gradient(125deg, #172b40, #2b4d6b 65%, #4f7498);
}

.ticket-detail-shell {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 275px;
}

.ticket-conversation-card {
    overflow: hidden;
    padding: 0;
}

.ticket-conversation-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    display: flex;
    justify-content: space-between;
    padding: .8rem .9rem;
}

.ticket-conversation-head>div {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.ticket-conversation-head>div>span {
    align-items: center;
    background: var(--panel-accent-soft, #e9f1f9);
    border-radius: 7px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.ticket-conversation-head>div>div {
    display: grid;
}

.ticket-conversation-head small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .54rem;
}

.ticket-conversation-head h3 {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .72rem;
    margin: 0;
}

.ticket-conversation-head b {
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 999px;
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .56rem;
    padding: .3rem .55rem;
}

.ticket-thread-modern {
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border: 0;
    border-radius: 0;
    max-height: 720px;
    overflow-y: auto;
    padding: .9rem;
}

.ticket-thread-modern .ticket-message {
    box-shadow: 0 3px 12px rgba(15, 35, 55, .035);
}

.ticket-thread-modern .ticket-message.is-admin {
    border-right: 3px solid var(--panel-accent, #315f8d);
}

.ticket-table-subject small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .56rem;
    max-width: 460px;
}

.ticket-reply-inline {
    border-top: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    margin: 0;
    padding: .9rem;
}

.ticket-reply-title {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px minmax(0, 1fr);
    margin-bottom: .75rem;
}

.ticket-reply-title>span {
    align-items: center;
    background: var(--panel-accent-soft, #e9f1f9);
    border-radius: 7px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 38px;
    justify-content: center;
}

.ticket-reply-title>div {
    display: grid;
}

.ticket-reply-title strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .7rem;
}

.ticket-reply-title small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .57rem;
}

.ticket-reply-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: .65rem;
}

.ticket-reply-actions>label {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f8fafc));
    border: 1px dashed var(--panel-border, var(--client-border, #e2e8f0));
    border-radius: 7px;
    color: var(--panel-muted, var(--client-muted, #718096));
    cursor: pointer;
    display: flex;
    font-size: .6rem;
    gap: .35rem;
    padding: .5rem .65rem;
}

.ticket-reply-actions input {
    display: none;
}

.ticket-detail-aside {
    display: grid;
    gap: .8rem;
    position: sticky;
    top: 82px;
}

.ticket-detail-card,
.ticket-status-manager,
.ticket-support-note {
    padding: .8rem;
}

.ticket-detail-card>header,
.ticket-status-manager>div:first-child {
    align-items: center;
    border-bottom: 1px solid var(--panel-border, var(--client-border, #e2e8f0));
    display: grid;
    gap: .5rem;
    grid-template-columns: 34px minmax(0, 1fr);
    margin-bottom: .65rem;
    padding-bottom: .65rem;
}

.ticket-detail-card>header>span,
.ticket-status-manager>div:first-child>span {
    align-items: center;
    background: var(--panel-accent-soft, #e9f1f9);
    border-radius: 7px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 34px;
    justify-content: center;
}

.ticket-detail-card header div,
.ticket-status-manager>div:first-child>div {
    display: grid;
}

.ticket-detail-card header small,
.ticket-status-manager small {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .52rem;
}

.ticket-detail-card header strong,
.ticket-status-manager strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .68rem;
}

.ticket-detail-card dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.ticket-detail-card dl>div {
    align-items: center;
    border-bottom: 1px dashed var(--panel-border, var(--client-border, #e2e8f0));
    display: flex;
    justify-content: space-between;
    padding: .52rem 0;
}

.ticket-detail-card dl>div:last-child {
    border: 0;
}

.ticket-detail-card dt {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .56rem;
    font-weight: 600;
}

.ticket-detail-card dd {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .59rem;
    font-weight: 850;
    margin: 0;
    text-align: left;
}

.ticket-status-manager {
    display: grid;
    gap: .6rem;
}

.ticket-status-manager .btn {
    font-size: .6rem;
}

.ticket-support-note {
    align-items: start;
    display: grid;
    gap: .6rem;
    grid-template-columns: 36px minmax(0, 1fr);
}

.ticket-support-note>i {
    align-items: center;
    background: var(--panel-accent-soft, #e9f1f9);
    border-radius: 7px;
    color: var(--panel-accent, #315f8d);
    display: flex;
    height: 36px;
    justify-content: center;
}

.ticket-support-note strong {
    color: var(--panel-text, var(--client-text, #172033));
    font-size: .65rem;
}

.ticket-support-note p {
    color: var(--panel-muted, var(--client-muted, #718096));
    font-size: .56rem;
    line-height: 2;
    margin: .15rem 0 0;
}

@media(max-width:991.98px) {
    .ticket-detail-shell {
        grid-template-columns: 1fr
    }

    .ticket-detail-aside {
        grid-template-columns: 1fr 1fr;
        position: static
    }

    .organization-teacher-add {
        grid-template-columns: 1fr
    }

    .organization-teacher-add .organization-employee-actions {
        justify-content: flex-start
    }
}

@media(max-width:767.98px) {
    .panel-delegation-banner {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: .5rem .7rem
    }

    .panel-delegation-banner>span {
        height: 34px;
        width: 34px
    }

    .panel-delegation-banner form {
        grid-column: 2
    }

    .ticket-detail-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
        min-height: 0
    }

    .ticket-detail-aside {
        grid-template-columns: 1fr
    }

    .ticket-thread-modern {
        max-height: none
    }

    .ticket-reply-actions {
        align-items: stretch;
        flex-direction: column;
        gap: .55rem
    }

    .ticket-reply-actions>* {
        justify-content: center;
        width: 100%
    }
}

/* Organization teacher lookup and creation flow. */
.organization-teacher-launch {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: .8rem .9rem;
}

.organization-teacher-launch>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-accent);
    display: flex;
    font-size: 1.05rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.organization-teacher-launch>div {
    display: grid;
    gap: .12rem;
}

.organization-teacher-launch strong {
    color: var(--panel-text);
    font-size: .76rem;
}

.organization-teacher-launch small {
    color: var(--panel-muted);
    font-size: .62rem;
}

.organization-teacher-create-modal {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

.organization-teacher-create-modal .modal-header {
    background: var(--panel-surface);
    border-color: var(--panel-border);
}

.organization-teacher-create-body {
    background: var(--panel-bg);
    display: grid;
    gap: .85rem;
    padding: .9rem;
}

.organization-teacher-search-step,
.organization-teacher-new-step {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    padding: .8rem;
}

.organization-teacher-search-step>header,
.organization-teacher-new-step>header {
    align-items: center;
    display: grid;
    gap: .6rem;
    grid-template-columns: 34px minmax(0, 1fr);
    margin-bottom: .7rem;
}

.organization-teacher-search-step>header>span,
.organization-teacher-new-step>header>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-size: .7rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.organization-teacher-search-step header>div,
.organization-teacher-new-step header>div {
    display: grid;
    gap: .1rem;
}

.organization-teacher-search-step header strong,
.organization-teacher-new-step header strong {
    color: var(--panel-text);
    font-size: .72rem;
}

.organization-teacher-search-step header small,
.organization-teacher-new-step header small {
    color: var(--panel-muted);
    font-size: .59rem;
}

.organization-teacher-search-step form {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.organization-teacher-search-step form .btn {
    min-height: 44px;
    white-space: nowrap;
}

.organization-teacher-search-empty {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .58rem;
    gap: .35rem;
    margin-top: .55rem;
}

.organization-teacher-create-divider {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .56rem;
    gap: .65rem;
}

.organization-teacher-create-divider::before,
.organization-teacher-create-divider::after {
    background: var(--panel-border);
    content: "";
    flex: 1;
    height: 1px;
}

.organization-teacher-create-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding-top: .75rem;
}

/* Compact formal login shared by admin, teacher and organization. */
.auth-formal-panel-shell.auth-minimal-panel-shell {
    padding: clamp(.75rem, 2vw, 1.5rem);
}

.auth-minimal-panel-shell::before,
.auth-minimal-panel-shell::after {
    display: none;
}

.auth-formal-panel-shell.auth-minimal-panel-shell>.container {
    max-width: 520px;
}

.auth-formal-panel-shell.auth-minimal-panel-shell .auth-modern-grid {
    border-radius: 15px;
    grid-template-columns: 1fr;
    min-height: 0;
}

.auth-formal-panel-shell.auth-minimal-panel-shell .auth-copy {
    justify-content: flex-start;
    min-height: 0;
    padding: 1.1rem 1.2rem !important;
}

.auth-minimal-panel-shell .auth-panel-brandline {
    margin: 0 0 .85rem !important;
    min-height: 40px !important;
}

.auth-minimal-panel-shell .auth-panel-brand-mark {
    border-radius: 8px;
    height: 40px;
    padding: 5px;
    width: 40px;
}

.auth-minimal-panel-shell .auth-panel-brand strong {
    font-size: .82rem;
}

.auth-minimal-panel-shell .auth-panel-theme {
    height: 36px;
    width: 36px;
}

.auth-minimal-panel-shell .auth-panel-roleline {
    border-color: rgba(255, 255, 255, .09);
    gap: .55rem;
    padding-bottom: .65rem;
}

.auth-formal-panel-shell.auth-minimal-panel-shell .auth-role-emblem {
    border-radius: 9px;
    border-width: 3px;
    font-size: 1rem;
    height: 40px;
    width: 40px;
}

.auth-minimal-panel-shell .auth-panel-rolemeta strong {
    font-size: .72rem;
}

.auth-minimal-panel-shell .auth-panel-copybody {
    margin-top: .7rem;
}

.auth-formal-panel-shell.auth-minimal-panel-shell .auth-panel-copybody h1 {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 .2rem;
}

.auth-formal-panel-shell.auth-minimal-panel-shell .auth-panel-copybody>p {
    font-size: .62rem;
    line-height: 1.8;
}

.auth-formal-panel-shell.auth-minimal-panel-shell .auth-role-links {
    margin-top: .7rem;
    padding-top: 0;
}

.auth-minimal-panel-shell .auth-role-links a {
    border-radius: 6px;
    box-shadow: none;
    font-size: .61rem;
    padding: .42rem .58rem;
}

.auth-minimal-panel-shell .auth-panel-login-card {
    padding: 1.2rem;
    width: 100%;
}

.auth-minimal-panel-shell .auth-panel-login-card .auth-card-head {
    margin-bottom: .9rem;
    padding-bottom: .8rem;
}

.auth-minimal-panel-shell .auth-panel-login-card .auth-card-head small {
    display: none;
}

.auth-minimal-panel-shell .auth-panel-login-card .auth-card-head h2 {
    font-size: 1rem;
}

.auth-minimal-panel-shell .auth-panel-login-card .auth-card-head>i {
    border-radius: 9px;
    font-size: 1.05rem;
    height: 42px;
    width: 42px;
}

.auth-minimal-panel-shell .auth-access-card .auth-tabs {
    margin-bottom: .9rem !important;
}

.auth-minimal-panel-shell .auth-access-card .auth-tabs .nav-link {
    min-height: 38px;
}

.auth-minimal-panel-shell .auth-access-form {
    gap: .7rem;
}

.auth-minimal-panel-shell .auth-access-card .auth-input-wrap .form-control {
    min-height: 44px;
}

.auth-minimal-panel-shell .auth-remember-row {
    min-height: 38px;
    padding: .45rem .6rem;
}

.auth-minimal-panel-shell .auth-access-card .auth-access-form>.btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .organization-teacher-launch {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .organization-teacher-launch>span {
        height: 42px;
        width: 42px;
    }

    .organization-teacher-launch>.btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .organization-teacher-search-step form {
        grid-template-columns: 1fr;
    }

    .organization-teacher-search-step form .btn,
    .organization-teacher-create-actions,
    .organization-teacher-create-actions .btn {
        width: 100%;
    }

    .organization-teacher-create-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

@media (max-width: 575.98px) {
    .auth-formal-panel-shell.auth-minimal-panel-shell {
        padding: .6rem;
    }

    .auth-formal-panel-shell.auth-minimal-panel-shell .auth-modern-grid {
        border: 1px solid rgba(24, 49, 77, .12);
        border-radius: 12px;
        min-height: 0;
    }

    .auth-formal-panel-shell.auth-minimal-panel-shell .auth-copy,
    .auth-minimal-panel-shell .auth-panel-login-card {
        padding: 1rem !important;
    }
}

/* Final 15-second video feedback prompt. */
.lesson-video-feedback-stage,
.lesson-video-feedback-stage .plyr {
    overflow: hidden;
    position: relative;
}

.video-feedback-overlay {
    background: linear-gradient(155deg, rgba(15, 28, 42, .97), rgba(20, 46, 60, .96));
    border-left: 1px solid rgba(255, 255, 255, .14);
    bottom: 0;
    box-shadow: -18px 0 40px rgba(2, 9, 16, .32);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    left: auto;
    opacity: 0;
    overflow-y: auto;
    padding: clamp(.75rem, 1.8vw, 1.15rem);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(105%);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
    width: min(390px, 46%);
    z-index: 8;
}

.video-feedback-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.video-feedback-overlay>header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding-bottom: .65rem;
}

.video-feedback-overlay>header>div {
    display: grid;
    gap: .08rem;
}

.video-feedback-overlay>header>div small {
    color: #75d4c6;
    font-size: .52rem;
    font-weight: 850;
}

.video-feedback-overlay>header>div strong {
    color: #fff;
    font-size: .72rem;
    line-height: 1.8;
}

.video-feedback-countdown {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(117, 212, 198, .45);
    border-radius: 50%;
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.video-feedback-countdown strong {
    color: #fff;
    direction: ltr;
    font-size: 1rem;
    line-height: 1;
}

.video-feedback-countdown small {
    color: rgba(255, 255, 255, .58);
    font-size: .4rem;
    margin-top: .2rem;
}

.video-feedback-overlay>p {
    color: rgba(255, 255, 255, .65);
    font-size: .55rem;
    line-height: 1.9;
    margin: 0;
}

.video-feedback-overlay form {
    display: grid;
    gap: .55rem;
}

.video-feedback-overlay fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.video-feedback-overlay legend,
.video-feedback-overlay form>label {
    align-items: center;
    color: rgba(255, 255, 255, .82);
    display: flex;
    font-size: .54rem;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.video-feedback-overlay form>label small {
    color: rgba(255, 255, 255, .45);
    font-size: .43rem;
    font-weight: 500;
}

.video-feedback-rating {
    direction: ltr;
    display: grid;
    gap: .3rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.video-feedback-rating input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.video-feedback-rating label {
    align-items: center;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 7px;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: .72rem;
    gap: .08rem;
    justify-content: center;
    min-height: 45px;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.video-feedback-rating label span {
    color: rgba(255, 255, 255, .58);
    font-size: .44rem;
}

.video-feedback-rating input:checked~label {
    background: rgba(226, 164, 37, .16);
    border-color: rgba(226, 164, 37, .72);
    color: #f2bc45;
}

.video-feedback-rating input:checked+label {
    transform: translateY(-1px);
}

.video-feedback-rating label:hover {
    border-color: rgba(242, 188, 69, .55);
    color: #f2bc45;
}

.video-feedback-overlay textarea {
    background: rgba(4, 13, 22, .42);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: .56rem;
    line-height: 1.9;
    min-height: 70px;
    padding: .55rem .65rem;
    resize: none;
    width: 100%;
}

.video-feedback-overlay textarea:focus {
    border-color: #75d4c6;
    box-shadow: 0 0 0 3px rgba(117, 212, 198, .12);
    outline: 0;
}

.video-feedback-overlay textarea::placeholder {
    color: rgba(255, 255, 255, .35);
}

.video-feedback-error {
    background: rgba(191, 57, 72, .18);
    border: 1px solid rgba(255, 126, 139, .35);
    border-radius: 7px;
    color: #ffadb6;
    font-size: .5rem;
    line-height: 1.8;
    padding: .45rem .55rem;
}

.video-feedback-overlay form>button {
    align-items: center;
    background: #f4f7fa;
    border: 0;
    border-radius: 8px;
    color: #173b45;
    display: flex;
    font-family: inherit;
    font-size: .57rem;
    font-weight: 900;
    gap: .35rem;
    justify-content: center;
    min-height: 42px;
    padding: .5rem .65rem;
}

.video-feedback-overlay form>button:disabled {
    cursor: wait;
    opacity: .72;
}

.video-feedback-overlay.is-success {
    background: linear-gradient(155deg, rgba(15, 50, 45, .98), rgba(18, 77, 67, .97));
}

@media (max-width: 767.98px) {
    .video-feedback-overlay {
        width: min(360px, 78%);
    }
}

@media (max-width: 575.98px) {
    .video-feedback-overlay {
        padding: .65rem;
        width: 100%;
    }

    .video-feedback-overlay>p {
        display: none;
    }

    .video-feedback-countdown {
        flex-basis: 48px;
        height: 48px;
        width: 48px;
    }

    .video-feedback-overlay textarea {
        min-height: 58px;
    }

    .video-feedback-rating label {
        min-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-feedback-overlay {
        transition: none;
    }
}

/* Panel notifications */
.panel-notification-button,
.client-notification-button {
    position: relative;
}

.panel-notification-button,
.panel-icon-button[data-panel-theme-toggle] {
    box-shadow: 0 6px 16px rgba(25, 43, 65, .14);
    transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.client-notification-button,
.client-portal-action[data-panel-theme-toggle] {
    box-shadow: 0 6px 16px rgba(37, 71, 102, .16);
    transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.panel-notification-button:hover,
.panel-icon-button[data-panel-theme-toggle]:hover,
.client-notification-button:hover,
.client-portal-action[data-panel-theme-toggle]:hover {
    box-shadow: 0 9px 22px rgba(25, 43, 65, .2);
    transform: translateY(-1px);
}

html[data-panel-theme="dark"] .panel-notification-button,
html[data-panel-theme="dark"] .panel-icon-button[data-panel-theme-toggle],
html[data-panel-theme="dark"] .client-notification-button,
html[data-panel-theme="dark"] .client-portal-action[data-panel-theme-toggle] {
    box-shadow: 0 7px 18px rgba(0, 0, 0, .34);
}

.panel-notification-button>b,
.client-notification-button>b,
.client-nav-badge[data-notification-count] {
    align-items: center;
    background: #c63f52;
    border: 2px solid var(--panel-surface, var(--client-surface, #fff));
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .47rem;
    font-style: normal;
    font-weight: 900;
    height: 19px;
    justify-content: center;
    line-height: 1;
    min-width: 19px;
    padding: 0 4px;
}

.panel-notification-button>b,
.client-notification-button>b {
    left: -5px;
    position: absolute;
    top: -5px;
}

body.notification-drawer-open {
    overflow: hidden;
}

.notification-drawer-backdrop {
    background: rgba(9, 16, 28, .54);
    border: 0;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .22s ease;
    width: 100%;
    z-index: 1088;
}

.notification-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.notification-drawer {
    background: var(--panel-surface, var(--client-surface, #fff));
    border-right: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    bottom: 0;
    box-shadow: 20px 0 55px rgba(9, 20, 37, .18);
    color: var(--panel-text, var(--client-text, #172233));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    left: 0;
    max-width: calc(100vw - 18px);
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform .26s cubic-bezier(.2, .75, .25, 1);
    width: 390px;
    z-index: 1089;
}

.notification-drawer.is-open {
    transform: translateX(0);
}

.notification-drawer>header {
    align-items: center;
    border-bottom: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    display: flex;
    justify-content: space-between;
    min-height: 78px;
    padding: 14px 16px;
}

.notification-drawer>header>div {
    align-items: center;
    display: flex;
    gap: 10px;
}

.notification-drawer>header>div>span {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent, var(--client-accent, #405f86)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--panel-accent, var(--client-accent, #405f86)) 24%, transparent);
    border-radius: 9px;
    color: var(--panel-accent, var(--client-accent, #405f86));
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.notification-drawer>header>div>div {
    display: grid;
    gap: 1px;
}

.notification-drawer>header small {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .53rem;
}

.notification-drawer>header strong {
    font-size: .78rem;
    font-weight: 900;
}

.notification-drawer>header>button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    border-radius: 8px;
    color: var(--panel-muted, var(--client-muted, #748094));
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.notification-drawer-summary {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f5f7fa));
    border-bottom: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
}

.notification-drawer-summary>span {
    align-items: center;
    display: flex;
    gap: 7px;
}

.notification-drawer-summary>span strong {
    align-items: center;
    background: #c63f52;
    border-radius: 7px;
    color: #fff;
    display: flex;
    font-size: .57rem;
    height: 27px;
    justify-content: center;
    min-width: 27px;
}

.notification-drawer-summary>span small {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .52rem;
    font-weight: 800;
}

.notification-drawer-summary form,
.notification-drawer-list form,
.notification-page-list form {
    margin: 0;
}

.notification-drawer-summary button,
.notification-drawer-list footer button,
.notification-page-item footer button {
    background: transparent;
    border: 0;
    color: var(--panel-accent, var(--client-accent, #405f86));
    font-family: inherit;
    font-size: .51rem;
    font-weight: 900;
    padding: 3px;
}

.notification-drawer-list {
    overflow-y: auto;
    padding: 8px;
}

.notification-drawer-list article {
    border: 1px solid transparent;
    border-radius: 10px;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr);
    margin-bottom: 5px;
    padding: 11px;
    position: relative;
    transition: background .16s ease, border-color .16s ease;
}

.notification-drawer-list article.is-unread {
    background: color-mix(in srgb, var(--panel-accent, var(--client-accent, #405f86)) 7%, transparent);
    border-color: color-mix(in srgb, var(--panel-accent, var(--client-accent, #405f86)) 18%, transparent);
}

.notification-drawer-list article.is-unread::before {
    background: var(--panel-accent, var(--client-accent, #405f86));
    border-radius: 99px;
    content: "";
    height: 7px;
    position: absolute;
    right: 5px;
    top: 16px;
    width: 7px;
}

.notification-drawer-list article>span,
.notification-page-item>span {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f5f7fa));
    border: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    border-radius: 8px;
    color: var(--panel-accent, var(--client-accent, #405f86));
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.notification-drawer-list article>div {
    min-width: 0;
}

.notification-drawer-list article strong {
    display: block;
    font-size: .61rem;
    font-weight: 900;
    margin-bottom: 3px;
}

.notification-drawer-list article p {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .51rem;
    line-height: 1.9;
    margin: 0 0 3px;
}

.notification-drawer-list article time {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .45rem;
}

.notification-drawer-list article footer {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.notification-drawer-list article footer a {
    color: var(--panel-accent, var(--client-accent, #405f86));
    font-size: .5rem;
    font-weight: 900;
    text-decoration: none;
}

.notification-drawer-empty,
.notification-empty {
    align-items: center;
    color: var(--panel-muted, var(--client-muted, #748094));
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-height: 230px;
    padding: 25px;
    text-align: center;
}

.notification-drawer-empty i,
.notification-empty i {
    font-size: 1.6rem;
    opacity: .45;
}

.notification-drawer-empty strong,
.notification-empty strong {
    color: var(--panel-text, var(--client-text, #172233));
    font-size: .65rem;
}

.notification-drawer>footer {
    border-top: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    padding: 12px 16px;
}

.notification-drawer>footer a {
    align-items: center;
    background: var(--panel-surface-soft, var(--client-surface-soft, #f5f7fa));
    border: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    border-radius: 8px;
    color: var(--panel-text, var(--client-text, #172233));
    display: flex;
    font-size: .56rem;
    font-weight: 900;
    justify-content: center;
    min-height: 40px;
    text-decoration: none;
}

.notification-page-head {
    align-items: center;
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 16px;
}

.notification-page-head>div {
    align-items: center;
    display: flex;
    gap: 12px;
}

.notification-page-head>div>span {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent, var(--client-accent, #405f86)) 12%, transparent);
    border-radius: 10px;
    color: var(--panel-accent, var(--client-accent, #405f86));
    display: flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.notification-page-head small {
    color: var(--panel-accent, var(--client-accent, #405f86));
    display: block;
    font-size: .5rem;
    font-weight: 900;
    margin-bottom: 2px;
}

.notification-page-head h2 {
    font-size: .9rem;
    font-weight: 900;
    margin: 0 0 3px;
}

.notification-page-head p {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .54rem;
    margin: 0;
}

.notification-page-list {
    display: grid;
    gap: 8px;
}

.notification-page-item {
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px solid var(--panel-border, var(--client-border, #e3e8ef));
    border-radius: 11px;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 14px;
}

.notification-page-item.is-unread {
    border-right: 3px solid var(--panel-accent, var(--client-accent, #405f86));
}

.notification-page-item>div>header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.notification-page-item header strong {
    font-size: .66rem;
    font-weight: 900;
}

.notification-page-item header time {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .48rem;
}

.notification-page-item p {
    color: var(--panel-muted, var(--client-muted, #748094));
    font-size: .56rem;
    line-height: 2;
    margin: 5px 0;
}

.notification-page-item footer {
    align-items: center;
    display: flex;
    gap: 14px;
}

.notification-page-item footer a {
    color: var(--panel-accent, var(--client-accent, #405f86));
    font-size: .52rem;
    font-weight: 900;
    text-decoration: none;
}

.notification-empty {
    background: var(--panel-surface, var(--client-surface, #fff));
    border: 1px dashed var(--panel-border, var(--client-border, #e3e8ef));
    border-radius: 12px;
}

.notification-empty span {
    font-size: .53rem;
}

.admin-notification-compose,
.admin-quick-notification {
    overflow: visible;
}

.admin-quick-notification>header {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: 10px;
    margin: -2px 0 14px;
    padding-bottom: 12px;
}

.admin-quick-notification>header>span {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent) 12%, transparent);
    border-radius: 8px;
    color: var(--panel-accent);
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.admin-quick-notification>header>div {
    display: grid;
}

.admin-quick-notification>header strong {
    font-size: .66rem;
}

.admin-quick-notification>header small {
    color: var(--panel-muted);
    font-size: .5rem;
}

html[data-panel-theme="dark"] .notification-drawer-backdrop {
    background: rgba(0, 0, 0, .68);
}

html[data-panel-theme="dark"] .notification-drawer,
html[data-panel-theme="dark"] .notification-page-head,
html[data-panel-theme="dark"] .notification-page-item,
html[data-panel-theme="dark"] .notification-empty {
    box-shadow: none;
}

.client-header-navrow .client-button-navigation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .client-header-navrow .client-button-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .notification-page-head {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .notification-page-head>form .btn {
        width: 100%;
    }

    .notification-page-item>div>header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .notification-drawer,
    .notification-drawer-backdrop {
        transition: none;
    }
}

/* Teacher question bank and assessment shortcuts */
.panel-role-teacher .teacher-question-bank-hero {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .025), transparent 45%),
        linear-gradient(125deg, #173b45 0%, #1a5660 58%, #137a72 100%);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 10px;
    color: #fff;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(330px, .75fr);
    min-height: 238px;
    overflow: hidden;
    padding: 1.55rem 1.7rem;
    position: relative;
}

.panel-role-teacher .teacher-question-bank-hero::after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
    height: 290px;
    left: -85px;
    position: absolute;
    top: -145px;
    width: 290px;
}

.teacher-question-bank-copy,
.teacher-question-bank-overview {
    position: relative;
    z-index: 1;
}

.teacher-question-bank-copy {
    align-self: center;
}

.teacher-question-bank-eyebrow {
    align-items: center;
    color: #a9ded8;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 900;
    gap: .4rem;
}

.teacher-question-bank-copy h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 950;
    letter-spacing: -.025em;
    margin: .55rem 0 .35rem;
}

.teacher-question-bank-copy p {
    color: rgba(255, 255, 255, .72) !important;
    line-height: 2;
    margin: 0;
    max-width: 660px;
}

.teacher-question-bank-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}

.panel-role-teacher .teacher-question-bank-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
    min-height: 40px;
    padding-inline: .85rem;
}

.panel-role-teacher .teacher-question-bank-actions .btn-light {
    border-color: #fff;
    color: #154a4e;
}

.panel-role-teacher .teacher-question-quiz-action {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .27);
    color: #fff;
}

.panel-role-teacher .teacher-question-quiz-action:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.teacher-question-bank-overview {
    align-self: center;
    backdrop-filter: blur(5px);
    background: rgba(6, 31, 36, .28);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    padding: .85rem;
}

.teacher-question-bank-total {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: .7rem;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 0 0 .75rem;
}

.teacher-question-bank-total>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    display: flex;
    font-size: 1.15rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.teacher-question-bank-total strong,
.teacher-question-bank-total small {
    display: block;
}

.teacher-question-bank-total strong {
    font-size: 1.35rem;
    line-height: 1.2;
}

.teacher-question-bank-total small {
    color: rgba(255, 255, 255, .65);
    margin-top: .14rem;
}

.teacher-question-bank-mini-stats {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: .65rem;
}

.teacher-question-bank-mini-stats span {
    color: rgba(255, 255, 255, .62);
    font-size: .69rem;
    padding: .35rem .25rem;
}

.teacher-question-bank-mini-stats b {
    color: #fff;
    font-size: .78rem;
    margin-left: .18rem;
}

.teacher-question-tools {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) 330px;
}

.teacher-question-filter,
.teacher-question-import {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .85rem;
}

.teacher-question-filter-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: .8rem;
    padding-bottom: .7rem;
}

.teacher-question-filter-head>div,
.teacher-question-import-head {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.teacher-question-filter-head>div>span,
.teacher-question-import-head>span,
.teacher-question-table-head>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.teacher-question-filter-head strong,
.teacher-question-filter-head small,
.teacher-question-import-head strong,
.teacher-question-import-head small {
    display: block;
}

.teacher-question-filter-head strong,
.teacher-question-import-head strong {
    color: var(--panel-text);
    font-size: .78rem;
}

.teacher-question-filter-head small,
.teacher-question-import-head small {
    color: var(--panel-muted);
    font-size: .66rem;
    margin-top: .12rem;
}

.teacher-question-filter-head>a {
    color: var(--panel-accent);
    font-size: .69rem;
    font-weight: 850;
    text-decoration: none;
}

.teacher-question-filter-grid {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(130px, .65fr) auto;
}

.teacher-question-search>div {
    position: relative;
}

.teacher-question-search>div>i {
    color: var(--panel-muted);
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.teacher-question-search .form-control {
    padding-right: 2.25rem;
}

.panel-role-teacher .teacher-question-filter-submit {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    justify-content: center;
    min-height: 39px;
    white-space: nowrap;
}

.teacher-question-import {
    display: flex;
    flex-direction: column;
}

.teacher-question-import-head {
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: .65rem;
    padding-bottom: .65rem;
}

.teacher-question-import .admin-file-field {
    margin: 0;
}

.teacher-question-import .file-add-action {
    background: var(--panel-surface-soft);
    border-radius: 6px;
    min-height: 58px;
    padding: .55rem;
}

.teacher-question-import-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .7rem;
}

.teacher-question-import-actions>a {
    color: var(--panel-accent);
    font-size: .68rem;
    font-weight: 850;
    text-decoration: none;
}

.panel-role-teacher .teacher-question-table-card {
    overflow: hidden;
    padding: 0 !important;
}

.teacher-question-table-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    padding: .8rem .9rem;
}

.teacher-question-table-head>div {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.teacher-question-table-head h3 {
    color: var(--panel-text);
    font-size: .8rem;
    font-weight: 950;
    margin: 0;
}

.teacher-question-table-head p {
    color: var(--panel-muted);
    font-size: .66rem !important;
    margin: .1rem 0 0 !important;
}

.teacher-question-table-head>a {
    align-items: center;
    color: var(--panel-accent);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 850;
    gap: .3rem;
    text-decoration: none;
}

.teacher-question-table {
    min-width: 900px;
}

.panel-role-teacher .teacher-question-table>thead>tr>th {
    background: var(--panel-surface-soft);
    border-bottom: 1px solid var(--panel-border);
    color: var(--panel-muted);
    font-weight: 850;
    padding: .65rem .75rem;
}

.panel-role-teacher .teacher-question-table>tbody>tr>td {
    border-bottom-color: var(--panel-border);
    padding: .75rem;
    vertical-align: middle;
}

.panel-role-teacher .teacher-question-table>tbody>tr:last-child>td {
    border-bottom: 0;
}

.panel-role-teacher .teacher-question-table>tbody>tr:not(:has(.empty-state)):hover>td {
    background: color-mix(in srgb, var(--panel-accent-soft) 34%, var(--panel-surface));
}

.teacher-question-title-cell {
    align-items: center;
    display: grid;
    gap: .6rem;
    grid-template-columns: 34px minmax(220px, 1fr);
}

.teacher-question-title-cell>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-accent);
    display: flex;
    font-size: .67rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.teacher-question-title-cell strong,
.teacher-question-title-cell small {
    display: block;
}

.teacher-question-title-cell strong {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.9;
}

.teacher-question-title-cell small {
    color: var(--panel-muted);
    font-size: .64rem;
    margin-top: .06rem;
}

.teacher-question-badges,
.teacher-question-categories,
.teacher-question-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .32rem;
}

.teacher-question-kind,
.teacher-question-level,
.teacher-question-categories>span,
.teacher-question-categories>b,
.teacher-question-usage {
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    display: inline-flex;
    font-size: .65rem;
    font-weight: 800;
    gap: .25rem;
    min-height: 27px;
    padding: .22rem .42rem;
    white-space: nowrap;
}

.teacher-question-kind {
    background: var(--panel-accent-soft);
    color: var(--panel-accent);
}

.teacher-question-kind.is-anatomical {
    background: #f4f0fb;
    border-color: #e1d8f1;
    color: #674b91;
}

.teacher-question-level {
    background: var(--panel-surface-soft);
    color: var(--panel-muted);
}

.teacher-question-level.is-easy {
    background: #edf8f2;
    border-color: #d3ebde;
    color: #327552;
}

.teacher-question-level.is-hard {
    background: #fdf0f1;
    border-color: #f2d5d8;
    color: #a04149;
}

.teacher-question-categories>span {
    background: var(--panel-surface-soft);
    color: var(--panel-text);
    font-weight: 700;
}

.teacher-question-categories>b {
    background: var(--panel-accent-soft);
    color: var(--panel-accent);
}

.teacher-question-categories>small {
    color: var(--panel-muted);
    font-size: .65rem;
}

.teacher-question-usage {
    background: var(--panel-surface-soft);
    color: var(--panel-muted);
}

.teacher-question-usage.is-used {
    background: #edf7f5;
    border-color: #cee7e3;
    color: #226c64;
}

.teacher-question-row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.teacher-question-row-actions a,
.teacher-question-row-actions button {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-accent);
    display: inline-flex;
    font-family: inherit;
    font-size: .65rem;
    font-weight: 800;
    gap: .25rem;
    min-height: 31px;
    padding: .28rem .45rem;
    text-decoration: none;
    white-space: nowrap;
}

.teacher-question-row-actions button {
    color: #a13f48;
}

.teacher-question-row-actions a:hover {
    background: var(--panel-accent-soft);
}

.teacher-question-row-actions button:hover {
    background: #fdf0f1;
    border-color: #efced2;
}

.teacher-question-pagination {
    border-top: 1px solid var(--panel-border);
    padding: .7rem .8rem;
}

.panel-role-teacher .teacher-quick-dock {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

html[data-panel-theme="dark"] .teacher-question-kind.is-anatomical {
    background: #2a2438;
    border-color: #493d61;
    color: #c9b5ec;
}

html[data-panel-theme="dark"] .teacher-question-level.is-easy {
    background: #172e27;
    border-color: #285040;
    color: #8fd1ae;
}

html[data-panel-theme="dark"] .teacher-question-level.is-hard,
html[data-panel-theme="dark"] .teacher-question-row-actions button:hover {
    background: #352027;
    border-color: #5c303b;
    color: #f0a2ac;
}

html[data-panel-theme="dark"] .teacher-question-usage.is-used {
    background: #17332f;
    border-color: #28534d;
    color: #84d3c9;
}

@media (max-width: 1199.98px) {
    .teacher-question-tools {
        grid-template-columns: 1fr;
    }

    .panel-role-teacher .teacher-quick-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .panel-role-teacher .teacher-question-bank-hero {
        grid-template-columns: 1fr;
    }

    .teacher-question-bank-overview {
        display: grid;
        gap: .75rem;
        grid-template-columns: minmax(210px, .7fr) 1fr;
    }

    .teacher-question-bank-total {
        border-bottom: 0;
        border-left: 1px solid rgba(255, 255, 255, .12);
        padding: 0 0 0 .75rem;
    }

    .teacher-question-bank-mini-stats {
        margin: 0;
    }

    .teacher-question-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .panel-role-teacher .teacher-question-bank-hero {
        padding: 1.2rem;
    }

    .teacher-question-filter-head,
    .teacher-question-table-head {
        align-items: flex-start;
        gap: .65rem;
    }

    .panel-role-teacher .teacher-quick-dock {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {

    .teacher-question-bank-actions,
    .teacher-question-import-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .panel-role-teacher .teacher-question-bank-actions .btn,
    .teacher-question-import-actions>a,
    .teacher-question-import-actions>.btn {
        justify-content: center;
        width: 100%;
    }

    .teacher-question-bank-overview {
        display: block;
    }

    .teacher-question-bank-total {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        border-left: 0;
        padding: 0 0 .7rem;
    }

    .teacher-question-bank-mini-stats {
        margin-top: .55rem;
    }

    .teacher-question-filter-grid {
        grid-template-columns: 1fr;
    }

    .teacher-question-filter-head,
    .teacher-question-table-head {
        flex-direction: column;
    }

    .teacher-question-filter-head>a,
    .teacher-question-table-head>a {
        margin-right: 44px;
    }

    .teacher-question-filter-submit {
        width: 100%;
    }
}

/* Teacher panel unified design system */
.panel-role-teacher {
    --teacher-brand: #126f6a;
    --teacher-brand-deep: #153b43;
    --teacher-brand-dark: #0d2d34;
    --teacher-accent: #c49b61;
    --teacher-accent-soft: #f6efe4;
    --teacher-success: #2f7b5d;
    --teacher-danger: #a64a54;
    --teacher-shadow: 0 8px 24px rgba(22, 54, 65, .055);
    --panel-accent: var(--teacher-brand);
    --panel-accent-soft: #e8f4f2;
    --panel-bg: #f3f6f7;
    --panel-surface: #fff;
    --panel-surface-soft: #f7f9fa;
    --panel-border: #dde5e7;
    --panel-text: #172b32;
    --panel-muted: #6d7f85;
    background:
        radial-gradient(circle at 2% 0, rgba(18, 111, 106, .045), transparent 24rem),
        var(--panel-bg);
}

.panel-role-teacher .panel-layout {
    grid-template-columns: 260px minmax(0, 1fr);
}

.panel-role-teacher .panel-content {
    max-width: 1580px;
    padding: 1rem 1.15rem 1.6rem;
}

.panel-role-teacher .panel-content>* {
    animation: teacherPanelEnter .28s ease both !important;
}

.panel-role-teacher .panel-content>*:nth-child(2) {
    animation-delay: .025s !important;
}

.panel-role-teacher .panel-content>*:nth-child(3) {
    animation-delay: .05s !important;
}

.panel-role-teacher .panel-content>*:nth-child(4) {
    animation-delay: .075s !important;
}

.panel-role-teacher .panel-sidebar,
html[data-panel-theme="dark"] .panel-role-teacher .panel-sidebar {
    background:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(180deg, #173b43 0%, #102f36 58%, #0a242a 100%);
    background-size: 24px 24px, 24px 24px, auto;
    border-left: 1px solid rgba(255, 255, 255, .06);
    box-shadow: -12px 0 35px rgba(10, 36, 42, .12);
}

.panel-role-teacher .panel-sidebar-head {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 78px;
    padding: .8rem .85rem;
}

.panel-role-teacher .panel-sidebar-head .brand-mark {
    gap: .65rem;
}

.panel-role-teacher .panel-sidebar-head .brand-logo,
.panel-role-teacher .panel-sidebar-head .brand-mark>i {
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #a9d8d4;
    height: 40px;
    padding: 5px;
    width: 40px;
}

.panel-role-teacher .panel-sidebar-head .brand-mark strong {
    font-size: .8rem;
}

.panel-role-teacher .panel-sidebar-head .brand-mark small {
    color: #9db7b8;
    font-size: .6rem;
}

.panel-role-teacher .panel-sidebar-head .brand-mark em {
    color: #66888c;
    font-size: .39rem;
    letter-spacing: .16em;
}

.panel-role-teacher .panel-live-clock {
    background: rgba(4, 24, 29, .34);
    border-color: rgba(255, 255, 255, .075);
    border-radius: 7px;
    margin: .65rem .65rem .1rem;
}

.panel-role-teacher .panel-live-clock-icon {
    background: rgba(115, 199, 191, .1);
    border-color: rgba(115, 199, 191, .16);
    color: #83c9c3;
}

.panel-role-teacher .panel-nav {
    gap: .13rem;
    padding: .45rem .6rem .8rem;
}

.panel-role-teacher .panel-nav-label {
    color: #78969a;
    font-size: .68rem;
    letter-spacing: 0;
    padding: .85rem .5rem .28rem;
}

.panel-role-teacher .panel-nav-label::after {
    background: linear-gradient(90deg, rgba(139, 172, 175, .22), transparent);
}

.panel-role-teacher .panel-nav a {
    border: 1px solid transparent;
    border-radius: 6px;
    color: #bed0d2;
    font-size: .76rem;
    font-weight: 720;
    gap: .48rem;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 39px;
    padding: .28rem .35rem;
}

.panel-role-teacher .panel-nav a i {
    align-items: center;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 5px;
    color: #8eaaad;
    display: flex;
    height: 29px;
    justify-content: center;
    width: 29px;
}

.panel-role-teacher .panel-nav a:hover,
.panel-role-teacher .panel-nav a.active {
    background: linear-gradient(90deg, rgba(27, 105, 104, .7), rgba(21, 78, 82, .5));
    border-color: rgba(140, 210, 203, .16);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    color: #fff;
}

.panel-role-teacher .panel-nav a.active {
    border-right: 0;
}

.panel-role-teacher .panel-nav a.active::before {
    background: var(--teacher-accent);
    border-radius: 3px;
    bottom: 8px;
    right: -1px;
    top: 8px;
    width: 3px;
}

.panel-role-teacher .panel-nav a.active i,
.panel-role-teacher .panel-nav a:hover i {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .08);
    color: #d9f0ee;
}

.panel-role-teacher .panel-nav-badge {
    background: #b14750;
    border-color: #164349;
}

.panel-role-teacher .panel-sidebar-profile {
    background: rgba(3, 18, 22, .45);
    border-color: rgba(255, 255, 255, .075);
    min-height: 64px;
    padding: .65rem .75rem;
}

.panel-role-teacher .panel-avatar {
    background: linear-gradient(145deg, #2b7773, #174a50);
    border-color: #498c88;
    border-radius: 7px;
}

.panel-role-teacher .panel-topbar {
    backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 4px 18px rgba(24, 49, 57, .025);
    min-height: 69px;
    padding-inline: 1.15rem;
}

.panel-role-teacher .panel-breadcrumb {
    color: var(--teacher-brand);
    font-size: .72rem;
    font-weight: 850;
}

.panel-role-teacher .panel-breadcrumb i {
    color: var(--teacher-accent);
    font-size: .42rem;
}

.panel-role-teacher .panel-heading-wrap h1 {
    color: var(--panel-text);
    font-size: 1.08rem;
    margin-top: .13rem;
}

.teacher-topbar-identity {
    align-items: center;
    border-left: 1px solid var(--panel-border);
    display: flex;
    gap: .48rem;
    margin-left: .25rem;
    padding-left: .75rem;
}

.teacher-topbar-identity>span:first-child {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-size: .75rem;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    overflow: hidden;
    width: 36px;
}

.teacher-topbar-identity img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.teacher-topbar-identity>span:last-child,
.teacher-topbar-identity small,
.teacher-topbar-identity strong {
    display: block;
}

.teacher-topbar-identity small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.teacher-topbar-identity strong {
    color: var(--panel-text);
    font-size: .68rem;
    margin-top: .05rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-role-teacher .panel-icon-button,
.panel-role-teacher .panel-logout-button {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(19, 48, 56, .055);
    color: var(--panel-muted);
}

.panel-role-teacher .panel-icon-button:hover,
.panel-role-teacher .panel-logout-button:hover {
    background: var(--panel-accent-soft);
    border-color: color-mix(in srgb, var(--panel-accent) 30%, var(--panel-border));
    color: var(--panel-accent);
}

.panel-role-teacher .panel-card {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    box-shadow: var(--teacher-shadow);
}

.panel-role-teacher .panel-card:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 23%, var(--panel-border));
    box-shadow: 0 10px 26px rgba(22, 54, 65, .07);
    transform: none;
}

.panel-role-teacher .btn {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-weight: 800;
    gap: .32rem;
    justify-content: center;
    min-height: 38px;
}

.panel-role-teacher .btn-primary {
    background: var(--teacher-brand);
    border-color: var(--teacher-brand);
    color: #fff;
}

.panel-role-teacher .btn-primary:hover {
    background: #0d5d59;
    border-color: #0d5d59;
}

.panel-role-teacher .btn-outline-primary {
    border-color: #6ca7a3;
    color: var(--teacher-brand);
}

.panel-role-teacher .btn-light {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

.panel-role-teacher :is(.form-control, .form-select) {
    background-color: var(--panel-surface);
    border-color: var(--panel-border);
    border-radius: 6px;
    color: var(--panel-text);
    min-height: 40px;
}

.panel-role-teacher :is(.form-control, .form-select):focus {
    border-color: #5c9d98;
    box-shadow: 0 0 0 .18rem rgba(18, 111, 106, .1);
}

.panel-role-teacher .select2-container--default .select2-selection--single,
.panel-role-teacher .select2-container--default .select2-selection--multiple {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    border-radius: 6px;
    color: var(--panel-text);
}

.panel-role-teacher .form-label {
    color: var(--panel-text);
    font-weight: 850;
}

.panel-role-teacher .status-pill {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-muted);
}

/* Unified page heading */
.teacher-page-header {
    align-items: center;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .035), transparent 55%),
        linear-gradient(125deg, var(--teacher-brand-deep), #18525a 62%, var(--teacher-brand));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 58, 64, .11);
    color: #fff;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 132px;
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    position: relative;
}

.teacher-page-header::after {
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 50%;
    content: "";
    height: 230px;
    left: -90px;
    position: absolute;
    top: -120px;
    width: 230px;
}

.teacher-page-header-main {
    align-items: center;
    display: grid;
    gap: .8rem;
    grid-template-columns: 50px minmax(0, 1fr);
    min-width: 0;
    position: relative;
    z-index: 1;
}

.teacher-page-header-icon {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    color: #b9e2de;
    display: flex;
    font-size: 1.2rem;
    height: 50px;
    justify-content: center;
    width: 50px;
}

.teacher-page-header-eyebrow {
    color: #acd8d4;
    display: block;
    font-size: .68rem;
    font-weight: 900;
}

.teacher-page-header h2 {
    color: #fff;
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-weight: 950;
    letter-spacing: -.018em;
    margin: .23rem 0 .15rem;
}

.panel-role-teacher .teacher-page-header p {
    color: rgba(255, 255, 255, .68);
    font-size: .73rem;
    line-height: 1.95;
    margin: 0;
    max-width: 760px;
}

.teacher-page-header-side {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .7rem;
    position: relative;
    z-index: 1;
}

.teacher-page-header-stat {
    background: rgba(4, 28, 33, .22);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 7px;
    display: grid;
    min-width: 105px;
    padding: .55rem .7rem;
    text-align: center;
}

.teacher-page-header-stat strong {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.3;
}

.teacher-page-header-stat span {
    color: rgba(255, 255, 255, .62);
    font-size: .61rem;
}

.teacher-page-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.panel-role-teacher .teacher-page-header-actions .btn {
    min-height: 39px;
}

.panel-role-teacher .teacher-page-header-actions .btn-light {
    background: #fff;
    border-color: #fff;
    color: #16454a;
}

.panel-role-teacher .teacher-page-header-actions .btn-primary {
    background: var(--teacher-accent);
    border-color: var(--teacher-accent);
    color: #1f3438;
}

.panel-role-teacher .teacher-page-header-actions .btn-outline-light {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* Unified filters, data headers and common shared pages */
.teacher-unified-filter,
.teacher-inline-status,
.teacher-list-toolbar {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    padding: .75rem .8rem;
}

.teacher-unified-filter-title,
.teacher-list-toolbar>div,
.teacher-inline-status>div:first-child {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 220px;
}

.teacher-unified-filter-title>span,
.teacher-list-toolbar>div>span,
.teacher-inline-status>div:first-child>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
}

.teacher-unified-filter-title strong,
.teacher-unified-filter-title small,
.teacher-list-toolbar strong,
.teacher-list-toolbar small,
.teacher-inline-status strong,
.teacher-inline-status small {
    display: block;
}

.teacher-unified-filter-title strong,
.teacher-list-toolbar strong,
.teacher-inline-status strong {
    color: var(--panel-text);
    font-size: .72rem;
}

.teacher-unified-filter-title small,
.teacher-list-toolbar small,
.teacher-inline-status small {
    color: var(--panel-muted);
    font-size: .62rem;
    margin-top: .08rem;
}

.teacher-unified-filter-fields,
.teacher-inline-status>div:last-child {
    align-items: center;
    display: flex;
    flex: 1;
    gap: .45rem;
    justify-content: flex-end;
}

.teacher-unified-filter-fields .form-select {
    max-width: 260px;
}

.teacher-list-toolbar-state,
.teacher-dashboard-live-state {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .64rem;
    font-weight: 800;
    gap: .3rem;
}

.teacher-list-toolbar-state i,
.teacher-dashboard-live-state i,
.teacher-form-required i {
    background: #36a675;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(54, 166, 117, .1);
    height: 7px;
    width: 7px;
}

.teacher-segmented-filter,
.panel-role-teacher .attempt-review-filter {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: inline-flex;
    gap: .3rem;
    padding: .35rem;
}

.teacher-segmented-filter a,
.panel-role-teacher .attempt-review-filter a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 850;
    gap: .35rem;
    min-height: 36px;
    padding: .38rem .6rem;
    text-decoration: none;
}

.teacher-segmented-filter a.active,
.panel-role-teacher .attempt-review-filter a.active {
    background: var(--panel-accent-soft);
    border-color: color-mix(in srgb, var(--panel-accent) 18%, var(--panel-border));
    color: var(--panel-accent);
}

.teacher-segmented-filter b,
.panel-role-teacher .attempt-review-filter b {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    display: flex;
    font-size: .58rem;
    justify-content: center;
    min-width: 20px;
    padding: .08rem .28rem;
}

.panel-role-teacher .formal-page-header,
.panel-role-teacher .notification-page-head {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .035), transparent 55%),
        linear-gradient(125deg, var(--teacher-brand-deep), #18525a 62%, var(--teacher-brand));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    border-right: 0;
    box-shadow: 0 12px 32px rgba(15, 58, 64, .1);
    color: #fff;
    min-height: 120px;
    padding: 1.1rem 1.2rem;
}

.panel-role-teacher .formal-page-header .formal-eyebrow,
.panel-role-teacher .notification-page-head small {
    color: #acd8d4;
}

.panel-role-teacher .formal-page-header h2,
.panel-role-teacher .notification-page-head h2 {
    color: #fff;
}

.panel-role-teacher .formal-page-header p,
.panel-role-teacher .notification-page-head p {
    color: rgba(255, 255, 255, .68);
}

.panel-role-teacher .formal-page-header .btn,
.panel-role-teacher .notification-page-head .btn {
    background: #fff;
    border-color: #fff;
    color: var(--teacher-brand-deep);
}

.panel-role-teacher .admin-filter-strip,
.panel-role-teacher .ticket-filter-strip {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
    padding: .7rem;
}

.teacher-data-card {
    overflow: hidden;
    padding: 0 !important;
}

.teacher-data-card-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    padding: .8rem .9rem;
}

.teacher-data-card-head>div {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.teacher-data-card-head>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.teacher-data-card-head h3 {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 950;
    margin: 0;
}

.teacher-data-card-head p {
    color: var(--panel-muted);
    font-size: .63rem !important;
    margin: .1rem 0 0 !important;
}

.teacher-data-card-head>strong {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    color: var(--panel-muted);
    font-size: .65rem;
    padding: .3rem .48rem;
}

.panel-role-teacher .admin-table thead th {
    background: var(--panel-surface-soft);
    border-bottom-color: var(--panel-border);
    color: var(--panel-muted);
    font-weight: 900;
    padding: .68rem .75rem;
}

.panel-role-teacher .admin-table tbody td {
    border-bottom-color: var(--panel-border);
    color: var(--panel-text);
    padding: .7rem .75rem;
}

.panel-role-teacher .admin-table tbody tr:hover td {
    background: color-mix(in srgb, var(--panel-accent-soft) 34%, var(--panel-surface));
}

.teacher-student-cell {
    align-items: center;
    display: flex;
    gap: .48rem;
    min-width: 170px;
}

.teacher-student-cell>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 34px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
}

.teacher-student-cell strong,
.teacher-student-cell small {
    display: block;
}

.teacher-student-cell strong {
    font-size: .7rem;
}

.teacher-student-cell small {
    color: var(--panel-muted);
    font-size: .59rem;
}

/* Dashboard */
.panel-role-teacher .teacher-workspace-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(196, 155, 97, .17), transparent 18rem),
        linear-gradient(125deg, var(--teacher-brand-deep), #18515a 65%, var(--teacher-brand));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    box-shadow: 0 14px 36px rgba(14, 57, 64, .12);
    min-height: 255px;
}

.panel-role-teacher .teacher-workspace-hero::before {
    display: block;
    mask-image: none;
    opacity: .25;
}

.teacher-workspace-copy {
    padding: 1.7rem 1.8rem;
}

.teacher-workspace-label {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #b9e0dd;
}

.teacher-workspace-copy h2 {
    font-size: clamp(1.3rem, 2.3vw, 1.75rem);
    margin-top: .7rem;
}

.teacher-workspace-copy p {
    font-size: .74rem !important;
    max-width: 720px;
}

.teacher-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.panel-role-teacher .teacher-workspace-actions .btn {
    min-height: 41px;
}

.panel-role-teacher .teacher-workspace-secondary {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
}

.panel-role-teacher .teacher-workspace-secondary:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.panel-role-teacher .teacher-workspace-avatar {
    background: linear-gradient(145deg, #d9f1ef, #9ccfc9);
    border: 6px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(3, 28, 33, .24);
    color: var(--teacher-brand-deep);
}

.panel-role-teacher .teacher-workspace-ring {
    display: block;
}

.panel-role-teacher .teacher-workspace-float {
    backdrop-filter: blur(8px);
    background: rgba(7, 42, 47, .35);
    border-color: rgba(255, 255, 255, .12);
    border-radius: 7px;
}

.panel-role-teacher .teacher-quick-dock {
    gap: .65rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.panel-role-teacher .teacher-quick-dock a {
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
    min-height: 78px;
    padding: .68rem;
}

.panel-role-teacher .teacher-quick-dock a:hover {
    background: color-mix(in srgb, var(--panel-accent-soft) 42%, var(--panel-surface));
    border-color: color-mix(in srgb, var(--panel-accent) 24%, var(--panel-border));
    box-shadow: 0 10px 24px rgba(20, 56, 64, .07);
    transform: translateY(-2px);
}

.panel-role-teacher .teacher-quick-dock a>i:first-child {
    border: 1px solid color-mix(in srgb, var(--panel-accent) 14%, var(--panel-border));
    border-radius: 6px;
    height: 40px;
    width: 40px;
}

.panel-role-teacher .teacher-quick-dock strong {
    color: var(--panel-text);
    font-size: .7rem;
}

.panel-role-teacher .teacher-quick-dock small {
    font-size: .61rem;
}

.teacher-dashboard-section-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 .65rem;
}

.teacher-dashboard-section-title>div {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.teacher-dashboard-section-title>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.teacher-dashboard-section-title strong,
.teacher-dashboard-section-title small {
    display: block;
}

.teacher-dashboard-section-title strong {
    color: var(--panel-text);
    font-size: .76rem;
}

.teacher-dashboard-section-title small {
    color: var(--panel-muted);
    font-size: .62rem;
}

.panel-role-teacher .teacher-kpi-card {
    border-radius: 8px;
    border-top: 3px solid var(--panel-accent);
    min-height: 118px;
}

.panel-role-teacher .teacher-kpi-card.is-violet {
    border-top-color: #7a6aad;
}

.panel-role-teacher .teacher-kpi-card.is-cyan {
    border-top-color: #3d8fa6;
}

.panel-role-teacher .teacher-kpi-card.is-amber {
    border-top-color: #c18a43;
}

.panel-role-teacher .teacher-kpi-icon {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
}

.panel-role-teacher .teacher-kpi-card strong {
    font-size: 1.45rem;
}

.panel-role-teacher .teacher-period-box {
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
    position: relative;
}

.panel-role-teacher .teacher-period-box::before {
    background: var(--panel-accent);
    border-radius: 2px;
    bottom: .65rem;
    content: "";
    position: absolute;
    right: 0;
    top: .65rem;
    width: 3px;
}

.panel-role-teacher .teacher-interaction-pulse,
.panel-role-teacher .teacher-chart-card {
    border-radius: 9px;
    box-shadow: var(--teacher-shadow);
}

.panel-role-teacher .teacher-pulse-head {
    border-bottom: 1px solid var(--panel-border);
    margin: 0 0 .7rem;
    padding-bottom: .65rem;
}

.panel-role-teacher .teacher-pulse-grid a {
    border-radius: 7px;
    min-height: 66px;
}

.panel-role-teacher .teacher-chart-head {
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: .8rem;
    padding-bottom: .7rem;
}

.panel-role-teacher .teacher-chart-periods,
.panel-role-teacher .teacher-chart-periods button {
    border-radius: 5px;
}

.panel-role-teacher .teacher-chart-periods button.active {
    border: 1px solid var(--panel-border);
    box-shadow: none;
}

.panel-role-teacher .teacher-dashboard-card {
    border-radius: 9px;
}

.panel-role-teacher .teacher-dashboard-card .admin-card-head {
    background: var(--panel-surface-soft);
    border-bottom: 1px solid var(--panel-border);
}

.panel-role-teacher .teacher-organization-grid>div {
    border-radius: 7px;
    min-height: 58px;
}

/* Courses and content studio */
.panel-role-teacher .teacher-course-row {
    align-items: center;
    display: grid;
    gap: .85rem;
    grid-template-columns: 88px minmax(220px, 1.2fr) minmax(330px, 1fr) auto;
    min-height: 112px;
    overflow: hidden;
    padding: .75rem !important;
    position: relative;
}

.panel-role-teacher .teacher-course-row::before {
    background: var(--panel-accent);
    bottom: 12px;
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 3px;
}

.teacher-course-cover {
    border-radius: 7px;
    height: 66px;
    overflow: hidden;
    position: relative;
    width: 88px;
}

.panel-role-teacher .teacher-course-cover .formal-course-thumb {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.teacher-course-cover>span {
    align-items: center;
    background: rgba(10, 42, 47, .52);
    color: #fff;
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity .2s ease;
}

.teacher-course-row:hover .teacher-course-cover>span {
    opacity: 1;
}

.panel-role-teacher .formal-course-identity h3 {
    color: var(--panel-text);
    font-size: .82rem;
}

.panel-role-teacher .formal-course-identity>span {
    color: var(--panel-accent);
    font-size: .59rem;
}

.panel-role-teacher .formal-course-identity small {
    border-radius: 4px;
}

.panel-role-teacher .formal-course-data {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    padding: .45rem;
}

.panel-role-teacher .formal-course-data>div {
    border-color: var(--panel-border);
}

.panel-role-teacher .formal-course-action {
    min-width: 135px;
}

.panel-role-teacher .teacher-content-hero,
.panel-role-teacher .teacher-studio-heading {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    border-right: 4px solid var(--panel-accent);
    box-shadow: var(--teacher-shadow);
    padding: .85rem;
}

.panel-role-teacher .teacher-course-heading-image img {
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    height: 72px;
    object-fit: cover;
    width: 104px;
}

.panel-role-teacher .teacher-content-hero-actions>span {
    border-radius: 6px;
}

.panel-role-teacher .teacher-access-note {
    background: color-mix(in srgb, var(--panel-accent-soft) 68%, var(--panel-surface));
    border-radius: 8px;
    box-shadow: none;
}

.panel-role-teacher .formal-register-head {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
    margin-bottom: .7rem;
}

.panel-role-teacher .teacher-content-chapter {
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
}

.panel-role-teacher .teacher-content-chapter>header {
    background: var(--panel-surface-soft);
    border-bottom: 1px solid var(--panel-border);
}

.panel-role-teacher .teacher-structure-lessons {
    background: var(--panel-surface);
}

.panel-role-teacher .teacher-content-lesson {
    border-radius: 5px;
    margin-block: .2rem;
}

.panel-role-teacher .teacher-editor-modal .modal-content {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(5, 29, 34, .22);
}

.panel-role-teacher .teacher-editor-modal .modal-header {
    background: linear-gradient(125deg, var(--teacher-brand-deep), var(--teacher-brand));
    border-radius: 9px 9px 0 0;
    color: #fff;
}

.panel-role-teacher .lesson-modal-tabbar {
    background: var(--panel-surface-soft);
    border-color: var(--panel-border);
}

/* Questions, feedback and quizzes */
.teacher-question-summary {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-question-summary>div {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
    display: grid;
    gap: .55rem;
    grid-template-columns: 38px auto;
    min-height: 74px;
    padding: .65rem;
}

.teacher-question-summary>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    grid-row: span 2;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.teacher-question-summary strong {
    color: var(--panel-text);
    font-size: .95rem;
    line-height: 1;
}

.teacher-question-summary small {
    color: var(--panel-muted);
    font-size: .62rem;
}

.panel-role-teacher .teacher-question-filter,
.panel-role-teacher .teacher-question-import,
.panel-role-teacher .teacher-question-table-card {
    border-radius: 8px;
    box-shadow: var(--teacher-shadow);
}

.panel-role-teacher .teacher-question-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-role-teacher .teacher-question-card {
    border-right: 0;
    border-top: 3px solid var(--panel-border);
    border-radius: 8px;
    padding: .85rem !important;
}

.panel-role-teacher .teacher-question-card.is-new {
    border-top-color: var(--teacher-accent);
}

.panel-role-teacher .teacher-question-card>header {
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: .65rem;
}

.panel-role-teacher .teacher-question-user,
.panel-role-teacher .teacher-feedback-card header>span {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    height: 38px;
    width: 38px;
}

.teacher-question-body {
    margin-top: .65rem;
}

.teacher-question-body>span {
    color: var(--panel-accent);
    font-size: .63rem;
    font-weight: 850;
}

.panel-role-teacher .teacher-question-card blockquote {
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    font-size: .72rem;
    margin: .35rem 0 .7rem;
}

.teacher-question-reply {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    padding: .65rem;
}

.teacher-question-reply>div {
    border-top: 1px solid var(--panel-border);
    margin-top: .55rem !important;
    padding-top: .55rem;
}

.panel-role-teacher .teacher-feedback-grid,
.panel-role-teacher .teacher-quiz-grid {
    gap: .8rem;
}

.panel-role-teacher .teacher-feedback-card {
    border-radius: 8px;
    border-top: 3px solid var(--teacher-accent);
    min-height: 210px;
    padding: .85rem !important;
}

.panel-role-teacher .teacher-feedback-card header {
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: .65rem;
}

.panel-role-teacher .teacher-feedback-card header strong {
    font-size: .7rem;
}

.panel-role-teacher .teacher-feedback-card header small {
    font-size: .6rem;
}

.panel-role-teacher .teacher-feedback-card header b {
    background: var(--teacher-accent-soft);
    border: 1px solid #eadbc5;
    border-radius: 5px;
    color: #a8752e;
    padding: .28rem .4rem;
}

.teacher-feedback-score {
    color: #d99a32;
    direction: ltr;
    display: flex;
    font-size: .72rem;
    gap: .15rem;
    justify-content: flex-end;
    margin-top: .6rem;
}

.panel-role-teacher .teacher-feedback-card p {
    font-size: .7rem;
    line-height: 2;
    min-height: 58px;
}

.teacher-feedback-card footer {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    color: var(--panel-muted);
    display: flex;
    font-size: .6rem;
    gap: .75rem;
    margin-top: auto;
    padding-top: .55rem;
}

.panel-role-teacher .teacher-quiz-card {
    border-radius: 9px;
    gap: .7rem;
    overflow: hidden;
    padding: .85rem !important;
    position: relative;
}

.panel-role-teacher .teacher-quiz-card::before {
    background: linear-gradient(90deg, var(--teacher-brand), var(--teacher-accent));
    content: "";
    height: 3px;
    inset: 0 0 auto;
    position: absolute;
}

.teacher-quiz-card-head {
    align-items: center;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
}

.panel-role-teacher .teacher-quiz-icon {
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    flex: 0 0 42px;
}

.teacher-quiz-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: flex-end;
}

.teacher-quiz-card-body {
    border-bottom: 1px solid var(--panel-border);
    border-top: 1px solid var(--panel-border);
    min-height: 120px;
    padding: .2rem 0 .65rem;
}

.panel-role-teacher .teacher-quiz-card h3 {
    font-size: .83rem;
}

.panel-role-teacher .teacher-quiz-card p {
    font-size: .65rem;
    min-height: 44px;
}

.teacher-quiz-review-alert {
    align-items: center;
    background: #fff7e8;
    border: 1px solid #f1dfbd;
    border-radius: 5px;
    color: #96651f;
    display: inline-flex;
    font-size: .61rem;
    font-weight: 850;
    gap: .28rem;
    padding: .28rem .4rem;
}

.panel-role-teacher .teacher-quiz-metrics {
    gap: .4rem;
}

.panel-role-teacher .teacher-quiz-metrics span {
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: grid;
    gap: .08rem;
    grid-template-columns: 16px auto;
    padding: .42rem;
    text-align: right;
}

.panel-role-teacher .teacher-quiz-metrics span>i {
    color: var(--panel-accent);
    grid-row: span 2;
}

.panel-role-teacher .teacher-quiz-metrics b {
    font-size: .72rem;
}

.panel-role-teacher .teacher-quiz-metrics small {
    font-size: .55rem;
}

.teacher-quiz-card-actions {
    display: flex;
    gap: .4rem;
}

.teacher-inline-status>div:last-child {
    flex: 0 0 auto;
}

.teacher-inline-status .form-select {
    min-width: 170px;
}

.teacher-owner-note {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 18%, var(--panel-border));
    border-radius: 8px;
    color: var(--panel-muted);
    display: flex;
    font-size: .7rem;
    gap: .45rem;
    padding: .7rem .8rem;
}

.teacher-owner-note i,
.teacher-owner-note strong {
    color: var(--panel-accent);
}

/* Profile and shared editor forms */
.teacher-form-shell {
    overflow: hidden;
    padding: 0 !important;
}

.teacher-form-shell-head {
    align-items: center;
    background: var(--panel-surface-soft);
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    padding: .85rem .95rem;
}

.teacher-form-shell-head>div {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.teacher-form-shell-head>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.teacher-form-shell-head h3 {
    color: var(--panel-text);
    font-size: .8rem;
    font-weight: 950;
    margin: 0;
}

.teacher-form-shell-head p {
    color: var(--panel-muted);
    font-size: .63rem !important;
    margin: .12rem 0 0 !important;
}

.teacher-form-required {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .61rem;
    gap: .35rem;
}

.teacher-profile-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
}

.teacher-profile-media {
    background: var(--panel-surface-soft);
    border-left: 1px solid var(--panel-border);
    padding: 1rem;
}

.panel-role-teacher .teacher-avatar-editor {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 86px minmax(0, 1fr);
    margin-bottom: .8rem;
    padding: .7rem;
}

.panel-role-teacher .teacher-avatar-editor img,
.panel-role-teacher .teacher-avatar-editor>span {
    border: 3px solid var(--panel-accent-soft);
    border-radius: 9px;
    grid-row: auto;
    height: 86px;
    width: 86px;
}

.panel-role-teacher .teacher-avatar-editor>div strong,
.panel-role-teacher .teacher-avatar-editor>div small {
    display: block;
}

.panel-role-teacher .teacher-avatar-editor>div strong {
    color: var(--panel-text);
    font-size: .75rem;
}

.panel-role-teacher .teacher-avatar-editor>div small {
    color: var(--panel-muted);
    font-size: .61rem;
}

.teacher-profile-tip {
    align-items: flex-start;
    background: var(--teacher-accent-soft);
    border: 1px solid #e9dbc7;
    border-radius: 7px;
    color: #7f6742;
    display: flex;
    font-size: .62rem;
    gap: .4rem;
    line-height: 1.9;
    margin-top: .7rem;
    padding: .55rem;
}

.teacher-profile-fields {
    padding: 1rem;
}

.teacher-form-actions {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: .8rem;
}

.teacher-form-actions>span {
    color: var(--panel-muted);
    font-size: .62rem;
}

.teacher-form-actions>span i {
    color: var(--panel-accent);
}

.panel-role-teacher .question-editor-hero {
    background: linear-gradient(125deg, var(--teacher-brand-deep), var(--teacher-brand));
    border-color: rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: #fff;
}

.panel-role-teacher .question-editor-hero :is(h1, p, .question-editor-kicker) {
    color: inherit;
}

.panel-role-teacher .question-editor-hero p {
    opacity: .7;
}

.panel-role-teacher .question-editor-hero-icon {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .14);
    color: #b8dfdc;
}

.panel-role-teacher .question-editor-section,
.panel-role-teacher .question-editor-aside,
.panel-role-teacher .admin-editor-main,
.panel-role-teacher .admin-editor-aside {
    border-radius: 9px;
    box-shadow: var(--teacher-shadow);
}

.panel-role-teacher .question-editor-section-head,
.panel-role-teacher .admin-card-head {
    border-color: var(--panel-border);
}

.panel-role-teacher .quiz-editor-tabs {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(3, 1fr);
    padding: .4rem;
}

.panel-role-teacher .quiz-editor-tabs button {
    border-radius: 6px;
    min-height: 48px;
}

.panel-role-teacher .quiz-editor-tabs button.active {
    background: var(--panel-surface);
    border-color: var(--panel-border);
    box-shadow: none;
    color: var(--panel-accent);
}

.panel-role-teacher .quiz-editor-tab-content {
    background: var(--panel-surface);
}

.panel-role-teacher .ticket-list-card,
.panel-role-teacher .ticket-compose-form,
.panel-role-teacher .notification-page-item,
.panel-role-teacher .notification-empty {
    border-radius: 9px;
    box-shadow: var(--teacher-shadow);
}

.panel-role-teacher .notification-page-item.is-unread {
    border-right-color: var(--panel-accent);
}

/* Dark mode for the unified teacher system */
html[data-panel-theme="dark"] .panel-role-teacher {
    --panel-bg: #0c1519;
    --panel-surface: #121e23;
    --panel-surface-soft: #0f191e;
    --panel-border: #293a40;
    --panel-text: #e5edef;
    --panel-muted: #91a4aa;
    --panel-accent: #73c9c2;
    --panel-accent-soft: #183633;
    --teacher-brand: #4caea7;
    --teacher-brand-deep: #173b43;
    --teacher-accent: #d1aa72;
    --teacher-accent-soft: #342d23;
    --teacher-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    background:
        radial-gradient(circle at 2% 0, rgba(77, 174, 167, .055), transparent 25rem),
        var(--panel-bg);
}

html[data-panel-theme="dark"] .panel-role-teacher .panel-topbar {
    background: rgba(17, 28, 33, .97);
}

html[data-panel-theme="dark"] .teacher-topbar-identity>span:first-child,
html[data-panel-theme="dark"] .panel-role-teacher .panel-icon-button,
html[data-panel-theme="dark"] .panel-role-teacher .panel-logout-button {
    box-shadow: none;
}

html[data-panel-theme="dark"] .panel-role-teacher :is(.form-control, .form-select),
html[data-panel-theme="dark"] .panel-role-teacher .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    background-color: #111c21;
    color: var(--panel-text);
}

html[data-panel-theme="dark"] .panel-role-teacher .teacher-feedback-card header b {
    background: #332b20;
    border-color: #55452e;
    color: #e2b875;
}

html[data-panel-theme="dark"] .teacher-quiz-review-alert {
    background: #352d20;
    border-color: #59492e;
    color: #e1b877;
}

html[data-panel-theme="dark"] .teacher-profile-tip {
    background: #30291f;
    border-color: #4d412f;
    color: #c8ad82;
}

html[data-panel-theme="dark"] .panel-role-teacher .teacher-editor-modal .modal-header,
html[data-panel-theme="dark"] .panel-role-teacher .teacher-page-header,
html[data-panel-theme="dark"] .panel-role-teacher .formal-page-header,
html[data-panel-theme="dark"] .panel-role-teacher .notification-page-head {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .025), transparent 55%),
        linear-gradient(125deg, #153740, #174c52 62%, #17645f);
}

@keyframes teacherPanelEnter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1299.98px) {
    .panel-role-teacher .teacher-quick-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .panel-role-teacher .teacher-course-row {
        grid-template-columns: 88px minmax(220px, 1fr) auto;
    }

    .panel-role-teacher .teacher-course-row .formal-course-data {
        grid-column: 2 / -1;
        grid-row: 2;
    }
}

@media (max-width: 991.98px) {
    .panel-role-teacher .panel-layout {
        grid-template-columns: 1fr;
    }

    .panel-role-teacher .panel-content {
        padding: .8rem;
    }

    .teacher-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-page-header-side {
        justify-content: space-between;
    }

    .teacher-unified-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-unified-filter-fields {
        justify-content: flex-start;
    }

    .teacher-unified-filter-fields .form-select {
        max-width: none;
    }

    .panel-role-teacher .teacher-question-list {
        grid-template-columns: 1fr;
    }

    .teacher-profile-layout {
        grid-template-columns: 1fr;
    }

    .teacher-profile-media {
        border-bottom: 1px solid var(--panel-border);
        border-left: 0;
    }

    .teacher-profile-media .admin-file-field {
        max-width: 520px;
    }
}

@media (max-width: 767.98px) {
    .teacher-topbar-identity {
        display: none;
    }

    .panel-role-teacher .teacher-quick-dock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-question-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-inline-status,
    .teacher-list-toolbar,
    .teacher-form-shell-head,
    .teacher-data-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-inline-status>div:last-child,
    .teacher-unified-filter-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .teacher-unified-filter-fields .select2-container,
    .teacher-unified-filter-fields .form-select {
        width: 100% !important;
    }

    .panel-role-teacher .teacher-course-row {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .teacher-course-cover {
        height: 58px;
        width: 74px;
    }

    .panel-role-teacher .teacher-course-row .formal-course-data,
    .panel-role-teacher .teacher-course-row .formal-course-action {
        grid-column: 1 / -1;
    }

    .panel-role-teacher .teacher-course-row .formal-course-data {
        grid-row: auto;
    }

    .panel-role-teacher .teacher-feedback-grid,
    .panel-role-teacher .teacher-quiz-grid {
        grid-template-columns: 1fr;
    }

    .teacher-page-header-side {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-page-header-actions,
    .teacher-page-header-actions>*,
    .teacher-question-bank-actions {
        width: 100%;
    }

    .teacher-page-header-actions .btn {
        flex: 1;
    }

    .teacher-form-actions {
        align-items: stretch;
        flex-direction: column;
        gap: .7rem;
    }
}

@media (max-width: 575.98px) {
    .panel-role-teacher .panel-content {
        padding: .65rem;
    }

    .teacher-page-header {
        min-height: 0;
        padding: .9rem;
    }

    .teacher-page-header-main {
        align-items: flex-start;
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .teacher-page-header-icon {
        height: 42px;
        width: 42px;
    }

    .teacher-page-header-stat {
        width: 100%;
    }

    .panel-role-teacher .teacher-quick-dock {
        grid-template-columns: 1fr;
    }

    .teacher-question-summary {
        grid-template-columns: 1fr;
    }

    .teacher-unified-filter-fields,
    .teacher-inline-status>div:last-child {
        grid-template-columns: 1fr;
    }

    .teacher-segmented-filter,
    .panel-role-teacher .attempt-review-filter {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .teacher-segmented-filter a,
    .panel-role-teacher .attempt-review-filter a {
        justify-content: center;
    }

    .teacher-profile-layout .teacher-avatar-editor {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .panel-role-teacher .teacher-avatar-editor img,
    .panel-role-teacher .teacher-avatar-editor>span {
        height: 70px;
        width: 70px;
    }

    .teacher-quiz-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-dashboard-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-role-teacher .panel-content>* {
        animation: none !important;
    }

    .panel-role-teacher .teacher-quick-dock a {
        transition: none;
    }
}

/* Refined teacher avatar editor */
.panel-role-teacher .teacher-profile-media {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--panel-accent) 10%, transparent), transparent 15rem),
        var(--panel-surface-soft);
}

.panel-role-teacher .teacher-profile-media::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .35;
    background-image:
        linear-gradient(color-mix(in srgb, var(--panel-border) 45%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--panel-border) 45%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(#000, transparent 68%);
}

.panel-role-teacher .teacher-profile-media>* {
    position: relative;
}

.panel-role-teacher .teacher-avatar-editor {
    position: relative;
    display: flex;
    min-height: 228px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    margin-bottom: .85rem;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-surface) 93%, transparent);
    box-shadow: 0 12px 32px rgba(18, 35, 54, .07);
    padding: 1rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.panel-role-teacher .teacher-avatar-stage {
    position: relative;
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
}

.panel-role-teacher .teacher-avatar-glow {
    position: absolute;
    inset: -8px;
    border: 1px solid color-mix(in srgb, var(--panel-accent) 28%, var(--panel-border));
    border-radius: 28px;
    background: color-mix(in srgb, var(--panel-accent) 7%, transparent);
    transform: rotate(4deg);
    transition: transform .3s ease, border-color .3s ease;
}

.panel-role-teacher .teacher-avatar-editor.has-new-avatar .teacher-avatar-glow {
    border-color: color-mix(in srgb, var(--panel-accent) 65%, var(--panel-border));
    transform: rotate(-3deg);
}

.panel-role-teacher .teacher-avatar-editor .teacher-avatar-stage img {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    border: 4px solid var(--panel-surface);
    border-radius: 23px;
    background: var(--panel-surface);
    box-shadow: 0 15px 34px rgba(16, 37, 58, .16);
    object-fit: cover;
}

.panel-role-teacher .teacher-avatar-state {
    position: absolute;
    right: 50%;
    bottom: -8px;
    z-index: 2;
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: .28rem;
    border: 2px solid var(--panel-surface);
    border-radius: 999px;
    background: var(--panel-accent);
    box-shadow: 0 7px 18px rgba(18, 35, 54, .16);
    color: #fff;
    font-size: .55rem;
    font-weight: 800;
    padding: .3rem .58rem;
    transform: translateX(50%);
}

.panel-role-teacher .teacher-avatar-identity {
    display: grid;
    gap: .1rem;
    margin-top: .35rem;
}

.panel-role-teacher .teacher-avatar-identity strong {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 900;
}

.panel-role-teacher .teacher-avatar-identity small {
    color: var(--panel-muted);
    font-size: .6rem;
}

.panel-role-teacher .teacher-profile-media .admin-file-field {
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-surface);
    padding: .7rem;
}

.panel-role-teacher .teacher-profile-media .file-add-action {
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.panel-role-teacher .teacher-profile-media .file-add-action .btn {
    width: 100%;
}

.panel-role-teacher .teacher-profile-media .file-add-action>span {
    overflow: hidden;
    max-width: 100%;
    color: var(--panel-muted);
    font-size: .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-avatar-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: .65rem;
}

.teacher-avatar-specs span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-surface);
    color: var(--panel-muted);
    font-size: .52rem;
    padding: .28rem .48rem;
}

.teacher-avatar-specs i {
    color: var(--panel-accent);
}

html[data-panel-theme="dark"] .panel-role-teacher .teacher-avatar-editor,
html[data-panel-theme="dark"] .panel-role-teacher .teacher-profile-media .admin-file-field,
html[data-panel-theme="dark"] .teacher-avatar-specs span {
    box-shadow: none;
}

/* The category cover stays intentionally compact inside the admin form. */
.admin-category-image-field {
    display: grid;
    min-height: 108px;
    align-items: center;
    gap: .75rem;
    grid-template-columns: 96px minmax(0, 1fr);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-surface-soft);
    padding: .65rem;
}

.admin-category-image-preview {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 72px;
    max-height: 72px;
    align-items: center;
    justify-content: center;
    border: 1px dashed color-mix(in srgb, var(--panel-accent) 30%, var(--panel-border));
    border-radius: 8px;
    background: var(--panel-surface);
    width: 96px;
}

.admin-category-image-preview.has-image {
    border-style: solid;
}

.admin-category-image-preview>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-height: 72px !important;
    border-radius: inherit;
    object-fit: cover;
}

.admin-category-image-preview>span {
    display: grid;
    place-items: center;
    color: var(--panel-accent);
    font-size: 1.25rem;
}

.admin-category-image-preview>small {
    position: absolute;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(9, 31, 43, .76);
    color: #fff;
    font-size: .46rem;
    line-height: 1.7;
    padding: .12rem .3rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(5px);
}

.admin-category-image-control {
    min-width: 0;
}

.admin-category-image-control .admin-file-field {
    margin: 0;
}

.admin-category-image-control .file-add-action {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
}

.admin-category-image-control .file-add-action>span {
    overflow: hidden;
    max-width: 100%;
    color: var(--panel-muted);
    font-size: .54rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .panel-role-teacher .teacher-avatar-editor {
        min-height: 210px;
    }
}

@media (max-width: 575.98px) {
    .panel-role-teacher .teacher-avatar-editor {
        min-height: 196px;
    }

    .panel-role-teacher .teacher-avatar-stage {
        width: 112px;
        height: 112px;
    }

    .panel-role-teacher .teacher-avatar-editor .teacher-avatar-stage img {
        width: 102px;
        height: 102px;
        border-radius: 19px;
    }

    .admin-category-image-preview {
        height: 62px;
        max-height: 62px;
        width: 78px;
    }

    .admin-category-image-preview>img {
        max-height: 62px !important;
    }

    .admin-category-image-field {
        grid-template-columns: 78px minmax(0, 1fr);
    }
}

/* Structured About and Contact settings */
.settings-tabbar .nav {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.settings-page-fields {
    display: grid;
    gap: 1.15rem;
}

.settings-page-fields-intro {
    display: grid;
    align-items: center;
    gap: .7rem;
    grid-template-columns: 42px minmax(0, 1fr);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: var(--panel-surface-soft);
    padding: .65rem;
}

.settings-page-fields-intro>i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-surface);
    color: var(--panel-accent);
    font-size: .9rem;
}

.settings-page-fields-intro>div {
    display: grid;
    gap: .12rem;
}

.settings-page-fields-intro strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.settings-page-fields-intro small {
    color: var(--panel-muted);
    font-size: .52rem;
    line-height: 1.8;
}

@media (max-width: 1199.98px) {
    .settings-tabbar .nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .settings-tabbar .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* All form entry follows the RTL interface, including numeric credentials. */
html[dir="rtl"] body :is(input, textarea, select, .form-control, .form-select) {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] body :is(input, textarea)::placeholder {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body .auth-otp-digits input {
    direction: ltr !important;
    text-align: center !important;
}

/* Dynamic home page builder */
.settings-home-builder {
    overflow: visible !important;
}

.settings-home-head {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.settings-home-hero-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
    margin-bottom: 1.2rem;
}

.settings-home-subcard {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: .8rem;
}

.settings-home-stat-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .8rem;
}

.settings-home-stat-grid label {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .45rem;
    padding: .6rem;
}

.settings-home-stat-grid label>span {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .5rem;
    font-weight: 800;
    gap: .35rem;
}

.settings-home-stat-grid label>span i {
    color: var(--panel-accent);
}

.settings-home-stat-grid input {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
}

.settings-home-list-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.settings-home-list-head>div {
    display: grid;
    gap: .12rem;
}

.settings-home-list-head strong {
    color: var(--panel-text);
    font-size: .68rem;
    font-weight: 900;
}

.settings-home-list-head small {
    color: var(--panel-muted);
    font-size: .48rem;
}

.settings-home-list-head>span {
    background: var(--panel-accent-soft);
    border-radius: 20px;
    color: var(--panel-accent);
    font-size: .48rem;
    font-weight: 800;
    padding: .35rem .65rem;
}

.settings-home-section-list {
    display: grid;
    gap: .7rem;
}

.settings-home-section {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.settings-home-section.is-sort-chosen,
.settings-home-section.is-dragging {
    border-color: var(--panel-accent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.settings-home-section-list.is-saving-sort,
.settings-home-items-table tbody.is-saving-sort {
    opacity: .65;
}

.settings-home-section-head {
    align-items: center;
    background: var(--panel-surface-soft);
    border-bottom: 0;
    display: grid;
    gap: .55rem;
    grid-template-columns: 30px 38px minmax(160px, 1fr) auto auto auto auto;
    min-height: 72px;
    padding: .65rem;
}

.settings-home-drag,
.settings-home-item-drag {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--panel-muted);
    cursor: grab;
    display: flex;
    font-size: 1rem;
    justify-content: center;
    padding: .25rem;
    touch-action: none;
}

.settings-home-drag:active,
.settings-home-item-drag:active {
    cursor: grabbing;
}

.settings-home-type-icon {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid color-mix(in srgb, var(--panel-accent) 18%, transparent);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.settings-home-collapse-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    gap: .55rem;
    justify-content: space-between;
    min-width: 0;
    padding: .25rem 0;
    text-align: right;
}

.settings-home-collapse-toggle>span {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.settings-home-collapse-toggle strong {
    color: var(--panel-text);
    font-size: .62rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-home-collapse-toggle small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.settings-home-collapse-toggle>i {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-muted);
    display: flex;
    flex: 0 0 auto;
    height: 27px;
    justify-content: center;
    transition: color .2s ease, transform .2s ease;
    width: 27px;
}

.settings-home-collapse-toggle[aria-expanded="true"]>i {
    color: var(--panel-accent);
    transform: rotate(180deg);
}

.settings-home-section-collapse {
    border-top: 1px solid var(--panel-border);
}

.settings-home-badge,
.settings-home-status {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .45rem;
    font-weight: 800;
    gap: .25rem;
    padding: .3rem .52rem;
    white-space: nowrap;
}

.settings-home-badge--display {
    color: var(--panel-accent);
}

.settings-home-status i {
    background: currentColor;
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.settings-home-status.is-published {
    background: rgba(18, 153, 107, .09);
    border-color: rgba(18, 153, 107, .16);
    color: #12996b;
}

.settings-home-status.is-draft {
    background: rgba(206, 145, 35, .09);
    border-color: rgba(206, 145, 35, .16);
    color: #b87d16;
}

.settings-home-row-actions {
    display: flex;
    gap: .35rem;
}

.settings-home-item-manager {
    padding: .7rem;
}

.settings-home-select-create,
.settings-home-info-create {
    align-items: end;
    background: var(--panel-surface-soft);
    border: 1px dashed var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .55rem;
    margin-bottom: .7rem;
    padding: .65rem;
}

.settings-home-select-create {
    grid-template-columns: minmax(0, 1fr) auto;
}

.settings-home-info-create {
    grid-template-columns: .7fr 1fr 1.4fr auto;
}

.settings-home-info-create>div,
.settings-home-select-create>div {
    min-width: 0;
}

.settings-home-info-create .form-label,
.settings-home-select-create .form-label {
    font-size: .48rem;
    margin-bottom: .28rem;
}

.settings-home-info-create .form-control,
.settings-home-info-create .form-select {
    font-size: .54rem;
}

.select2-bootstrap-icon-option {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
    min-width: 0;
}

.select2-bootstrap-icon-option>i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 5px;
    color: var(--panel-accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .72rem;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.select2-bootstrap-icon-option>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-home-items-table {
    border: 1px solid var(--panel-border);
    border-radius: 7px;
}

.settings-home-items-table thead th {
    background: var(--panel-surface-soft);
    color: var(--panel-muted);
    font-size: .46rem;
    padding: .5rem;
}

.settings-home-items-table tbody td {
    border-color: var(--panel-border);
    color: var(--panel-muted);
    font-size: .49rem;
    padding: .5rem;
    vertical-align: middle;
}

.settings-home-items-table tbody td>strong {
    color: var(--panel-text);
    display: block;
    font-size: .54rem;
    font-weight: 850;
}

.settings-home-items-table tbody td>small {
    color: var(--panel-muted);
    display: block;
    font-size: .42rem;
    margin-top: .12rem;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-home-table-type {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    gap: .28rem;
}

.settings-home-table-type i {
    color: var(--panel-accent);
}

.settings-home-empty {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    font-size: .48rem;
    gap: .4rem;
    justify-content: center;
    min-height: 72px;
}

.settings-home-empty--sections {
    border: 1px dashed var(--panel-border);
    border-radius: 9px;
    flex-direction: column;
    min-height: 170px;
    text-align: center;
}

.settings-home-empty--sections i {
    color: var(--panel-accent);
    font-size: 1.4rem;
}

.settings-home-empty--sections strong {
    color: var(--panel-text);
    font-size: .65rem;
}

.settings-home-modal .modal-header {
    align-items: center;
}

.settings-home-modal .modal-header>div {
    display: grid;
    gap: .1rem;
}

.settings-home-modal .modal-title {
    color: var(--panel-text);
    font-size: .84rem;
    font-weight: 900;
}

@media (max-width: 1199.98px) {
    .settings-home-hero-grid {
        grid-template-columns: 1fr;
    }

    .settings-home-info-create {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-home-info-create>button {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .settings-home-section-head {
        grid-template-columns: 30px 38px minmax(150px, 1fr) auto auto;
    }

    .settings-home-section-head .settings-home-badge--display,
    .settings-home-section-head .settings-home-status {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .settings-home-head {
        align-items: start;
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .settings-home-head>.btn {
        grid-column: 1 / -1;
    }

    .settings-home-stat-grid,
    .settings-home-info-create {
        grid-template-columns: 1fr 1fr;
    }

    .settings-home-info-create>div:last-of-type,
    .settings-home-info-create>button {
        grid-column: 1 / -1;
    }

    .settings-home-section-head {
        grid-template-columns: 28px 34px minmax(0, 1fr) auto;
    }

    .settings-home-section-head .settings-home-badge {
        display: none;
    }

    .settings-home-row-actions .btn:first-child {
        font-size: 0;
        gap: 0;
    }

    .settings-home-row-actions .btn:first-child i {
        font-size: .6rem;
    }
}

@media (max-width: 575.98px) {

    .settings-home-stat-grid,
    .settings-home-info-create {
        grid-template-columns: 1fr;
    }

    .settings-home-info-create>div:last-of-type,
    .settings-home-info-create>button {
        grid-column: auto;
    }

    .settings-home-select-create {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .settings-home-list-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .settings-home-section-head {
        grid-template-columns: 24px 32px minmax(0, 1fr);
    }

    .settings-home-row-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }
}

/* Admin accounting */
.accounting-page {
    --accounting-green: #229386;
    --accounting-green-soft: rgba(34, 147, 134, .1);
    --accounting-violet: #6e61d9;
    --accounting-violet-soft: rgba(110, 97, 217, .1);
    --accounting-gold: #c68c27;
    --accounting-gold-soft: rgba(198, 140, 39, .11);
    display: grid;
    gap: 0;
}

.accounting-command-header {
    overflow: hidden;
    position: relative;
}

.accounting-command-header::after {
    width: 180px;
    height: 180px;
    border: 28px solid var(--accounting-green-soft);
    border-radius: 50%;
    content: "";
    left: 20%;
    opacity: .75;
    pointer-events: none;
    position: absolute;
    top: -112px;
}

.accounting-command-header>* {
    position: relative;
    z-index: 1;
}

.accounting-kpi-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.accounting-kpi-card {
    align-items: center;
    display: grid;
    gap: .8rem;
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 116px;
    overflow: hidden;
    padding: .9rem !important;
    position: relative;
}

.accounting-kpi-card::after {
    width: 74px;
    height: 74px;
    border: 15px solid currentColor;
    border-radius: 50%;
    content: "";
    left: -35px;
    opacity: .045;
    position: absolute;
    top: -30px;
}

.accounting-kpi-icon {
    align-items: center;
    align-self: stretch;
    background: var(--accounting-green-soft);
    border: 1px solid rgba(34, 147, 134, .16);
    border-radius: 8px;
    color: var(--accounting-green);
    display: flex;
    font-size: 1rem;
    justify-content: center;
    min-height: 62px;
}

.accounting-kpi-card>div {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.accounting-kpi-card small {
    color: var(--panel-muted);
    font-size: .59rem;
    font-weight: 700;
}

.accounting-kpi-card strong {
    color: var(--panel-text);
    direction: ltr;
    font-size: 1.16rem;
    font-weight: 900;
    line-height: 1.45;
    text-align: right;
}

.accounting-kpi-card>div>span {
    color: var(--panel-muted);
    font-size: .5rem;
    line-height: 1.7;
}

.accounting-kpi-card--orders .accounting-kpi-icon {
    background: var(--accounting-violet-soft);
    border-color: rgba(110, 97, 217, .16);
    color: var(--accounting-violet);
}

.accounting-kpi-card--average .accounting-kpi-icon {
    background: var(--accounting-gold-soft);
    border-color: rgba(198, 140, 39, .17);
    color: var(--accounting-gold);
}

.accounting-kpi-card--gateway .accounting-kpi-icon {
    background: rgba(54, 112, 176, .1);
    border-color: rgba(54, 112, 176, .16);
    color: #3670b0;
}

.accounting-chart-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr);
}

.accounting-chart-card,
.accounting-detail-card {
    padding: 1rem !important;
}

.accounting-card-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.accounting-card-head>div:first-child {
    display: grid;
    gap: .12rem;
}

.accounting-card-head h2 {
    color: var(--panel-text);
    font-size: .79rem;
    font-weight: 900;
    margin: 0;
}

.accounting-card-head p {
    color: var(--panel-muted);
    font-size: .52rem;
    line-height: 1.8;
    margin: 0;
}

.accounting-card-head>a {
    align-items: center;
    color: var(--panel-accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .54rem;
    font-weight: 800;
    gap: .3rem;
    text-decoration: none;
}

.accounting-period-switch {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: flex;
    gap: .18rem;
    padding: .2rem;
}

.accounting-period-switch button {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--panel-muted);
    font-family: inherit;
    font-size: .52rem;
    font-weight: 800;
    min-height: 30px;
    padding: .25rem .62rem;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.accounting-period-switch button:hover {
    color: var(--panel-text);
}

.accounting-period-switch button.active {
    background: var(--panel-surface);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    color: var(--accounting-green);
}

.accounting-period-summary {
    display: flex;
    gap: .6rem;
    margin-bottom: .45rem;
}

.accounting-period-summary>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: grid;
    gap: .1rem .45rem;
    grid-template-columns: 28px minmax(0, 1fr);
    min-width: 155px;
    padding: .42rem .55rem;
}

.accounting-period-summary>span>i {
    align-items: center;
    background: var(--accounting-green-soft);
    border-radius: 5px;
    color: var(--accounting-green);
    display: flex;
    font-size: .7rem;
    grid-row: 1 / 3;
    height: 28px;
    justify-content: center;
}

.accounting-period-summary small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.accounting-period-summary strong {
    color: var(--panel-text);
    direction: ltr;
    font-size: .64rem;
    font-weight: 900;
    text-align: right;
}

.accounting-period-summary strong b {
    font: inherit;
}

.accounting-sales-canvas {
    height: 338px;
    position: relative;
}

.accounting-chart-note {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    color: var(--panel-muted);
    display: flex;
    font-size: .47rem;
    gap: .35rem;
    line-height: 1.75;
    margin: .45rem 0 0;
    padding-top: .6rem;
}

.accounting-chart-note i {
    color: var(--accounting-green);
}

.accounting-status-canvas {
    height: 188px;
    margin: .1rem auto .85rem;
    max-width: 230px;
    position: relative;
}

.accounting-status-canvas>span {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    inset: 50% auto auto 50%;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
}

.accounting-status-canvas>span strong {
    color: var(--panel-text);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.25;
}

.accounting-status-canvas>span small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.accounting-status-list {
    display: grid;
    gap: .58rem;
}

.accounting-status-list article {
    align-items: center;
    display: grid;
    gap: .45rem;
    grid-template-columns: 8px minmax(0, 1fr) 30px;
}

.accounting-status-dot {
    background: var(--status-color);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.accounting-status-list article>div {
    display: grid;
    gap: .28rem;
}

.accounting-status-list article>div>span {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.accounting-status-list strong,
.accounting-status-list b {
    color: var(--panel-text);
    font-size: .51rem;
    font-weight: 800;
}

.accounting-status-list i {
    background: var(--panel-surface-soft);
    border-radius: 20px;
    display: block;
    height: 4px;
    overflow: hidden;
}

.accounting-status-list em {
    background: var(--status-color);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: var(--status-width);
}

.accounting-status-list article>small {
    color: var(--panel-muted);
    direction: ltr;
    font-size: .44rem;
    text-align: left;
}

.accounting-breakdown-grid {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.accounting-breakdown-card {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: .72rem !important;
}

.accounting-breakdown-card>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    height: 38px;
    justify-content: center;
}

.accounting-breakdown-card>div {
    display: grid;
    gap: .1rem;
}

.accounting-breakdown-card small {
    color: var(--panel-muted);
    font-size: .48rem;
}

.accounting-breakdown-card strong {
    color: var(--panel-text);
    direction: ltr;
    font-size: .67rem;
    font-weight: 900;
    text-align: right;
}

.accounting-breakdown-card em {
    color: var(--panel-muted);
    font-size: .43rem;
    font-style: normal;
    font-weight: 600;
}

.accounting-detail-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accounting-mini-metrics {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accounting-mini-metrics article {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    display: grid;
    gap: .5rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 65px;
    padding: .55rem;
}

.accounting-mini-metrics article>span {
    align-items: center;
    background: var(--accounting-gold-soft);
    border-radius: 6px;
    color: var(--accounting-gold);
    display: flex;
    height: 34px;
    justify-content: center;
}

.accounting-mini-metrics article>div {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.accounting-mini-metrics small {
    color: var(--panel-muted);
    font-size: .46rem;
}

.accounting-mini-metrics strong {
    color: var(--panel-text);
    direction: ltr;
    font-size: .58rem;
    font-weight: 900;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-list-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin-top: .9rem;
    padding-bottom: .48rem;
}

.accounting-list-head strong {
    color: var(--panel-text);
    font-size: .56rem;
    font-weight: 900;
}

.accounting-list-head small {
    color: var(--panel-muted);
    font-size: .43rem;
}

.accounting-ranked-list {
    display: grid;
}

.accounting-ranked-list article {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 58px;
}

.accounting-ranked-list article:last-child {
    border-bottom: 0;
}

.accounting-rank,
.accounting-wallet-avatar {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    font-size: .5rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.accounting-ranked-list article>div {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.accounting-ranked-list article>div strong {
    color: var(--panel-text);
    font-size: .54rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-ranked-list article>div small {
    color: var(--panel-muted);
    font-size: .43rem;
}

.accounting-ranked-list article>b {
    color: var(--panel-text);
    direction: ltr;
    font-size: .54rem;
    font-weight: 900;
    text-align: left;
}

.accounting-ranked-list article>b small {
    color: var(--panel-muted);
    font-size: .4rem;
    font-weight: 600;
}

.accounting-empty-state {
    align-items: center;
    color: var(--panel-muted);
    display: flex;
    flex-direction: column;
    font-size: .48rem;
    gap: .35rem;
    justify-content: center;
    min-height: 150px;
    text-align: center;
}

.accounting-empty-state i {
    color: var(--panel-accent);
    font-size: 1.15rem;
    opacity: .7;
}

.accounting-live-badge {
    align-items: center;
    background: var(--accounting-green-soft);
    border: 1px solid rgba(34, 147, 134, .17);
    border-radius: 20px;
    color: var(--accounting-green);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .46rem;
    font-weight: 800;
    gap: .32rem;
    padding: .32rem .55rem;
}

.accounting-live-badge i {
    background: currentColor;
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.accounting-wallet-total {
    align-items: center;
    background: linear-gradient(135deg, var(--accounting-green-soft), var(--panel-surface-soft));
    border: 1px solid rgba(34, 147, 134, .16);
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    margin-bottom: .55rem;
    min-height: 78px;
    padding: .65rem;
}

.accounting-wallet-total>span {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--accounting-green);
    display: flex;
    font-size: .85rem;
    height: 42px;
    justify-content: center;
}

.accounting-wallet-total>div {
    display: grid;
    gap: .08rem;
}

.accounting-wallet-total small {
    color: var(--panel-muted);
    font-size: .45rem;
}

.accounting-wallet-total strong {
    color: var(--panel-text);
    direction: ltr;
    font-size: .74rem;
    font-weight: 900;
    text-align: right;
}

.accounting-wallet-total em {
    color: var(--panel-muted);
    font-size: .42rem;
    font-style: normal;
}

.accounting-wallet-total>b {
    color: var(--accounting-green);
    direction: ltr;
    font-size: .74rem;
    font-weight: 900;
}

.accounting-wallet-total>b small {
    font-size: .4rem;
    font-weight: 600;
}

.accounting-wallet-metrics article>span {
    background: var(--accounting-green-soft);
    color: var(--accounting-green);
}

.accounting-wallet-avatar {
    background: var(--accounting-green-soft);
    border-color: rgba(34, 147, 134, .16);
    border-radius: 50%;
    color: var(--accounting-green);
}

html[data-panel-theme="dark"] .accounting-period-switch button.active {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

html[data-panel-theme="dark"] .accounting-command-header::after {
    opacity: .5;
}

@media (max-width: 1199.98px) {

    .accounting-kpi-grid,
    .accounting-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounting-chart-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    }

    .accounting-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .accounting-chart-grid {
        grid-template-columns: 1fr;
    }

    .accounting-status-card {
        display: grid;
        gap: 0 1rem;
        grid-template-columns: minmax(190px, .6fr) minmax(260px, 1fr);
    }

    .accounting-status-card .accounting-card-head {
        grid-column: 1 / -1;
    }

    .accounting-status-canvas {
        margin-bottom: 0;
    }

    .accounting-status-list {
        align-content: center;
    }
}

@media (max-width: 767.98px) {
    .accounting-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .accounting-period-switch {
        align-self: flex-start;
        max-width: 100%;
    }

    .accounting-period-switch button {
        min-width: 62px;
    }

    .accounting-sales-canvas {
        height: 300px;
    }

    .accounting-status-card {
        display: block;
    }

    .accounting-status-canvas {
        margin-bottom: .85rem;
    }
}

@media (max-width: 575.98px) {

    .accounting-kpi-grid,
    .accounting-breakdown-grid,
    .accounting-mini-metrics {
        grid-template-columns: 1fr;
    }

    .accounting-kpi-card {
        min-height: 98px;
    }

    .accounting-period-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .accounting-period-switch button {
        width: 100%;
    }

    .accounting-period-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .accounting-period-summary>span {
        min-width: 0;
    }

    .accounting-sales-canvas {
        height: 270px;
    }

    .accounting-list-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .18rem;
    }

    .accounting-wallet-total {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .accounting-wallet-total>b {
        grid-column: 2;
    }

    .accounting-ranked-list article {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: .45rem 0;
    }

    .accounting-ranked-list article>b {
        grid-column: 2;
        text-align: right;
    }
}

/* Teacher identity editor and curriculum workspace */
.teacher-account-form-section {
    border-top: 1px solid var(--panel-border);
    display: grid;
    gap: .9rem;
    padding-top: 1rem;
}

.teacher-account-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.teacher-account-form-section>header {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(0, 1fr);
}

.teacher-account-form-section>header>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-accent);
    display: flex;
    font-size: .9rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.teacher-account-form-section>header>div {
    display: grid;
    gap: .1rem;
}

.teacher-account-form-section>header strong {
    color: var(--panel-text);
    font-size: .76rem;
    font-weight: 900;
}

.teacher-account-form-section>header small {
    color: var(--panel-muted);
    font-size: .61rem;
    line-height: 1.8;
}

.organization-teacher-editor-layout {
    align-items: start;
    display: grid;
    gap: .9rem;
    grid-template-columns: 260px minmax(0, 1fr);
}

.organization-teacher-editor-summary {
    align-items: center;
    display: grid;
    gap: .55rem;
    justify-items: center;
    padding: 1rem !important;
    position: sticky;
    top: 82px;
}

.organization-teacher-editor-avatar {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 3px solid var(--panel-surface);
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--panel-border);
    color: var(--panel-accent);
    display: flex;
    font-size: 1.3rem;
    font-weight: 950;
    height: 84px;
    justify-content: center;
    overflow: hidden;
    width: 84px;
}

.organization-teacher-editor-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.organization-teacher-editor-summary>strong {
    color: var(--panel-text);
    font-size: .82rem;
    font-weight: 950;
}

.organization-teacher-editor-summary>small {
    color: var(--panel-muted);
    font-size: .62rem;
}

.organization-teacher-editor-summary dl {
    border-block: 1px solid var(--panel-border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: .35rem 0 0;
    padding: .7rem 0;
    width: 100%;
}

.organization-teacher-editor-summary dl>div {
    border-left: 1px solid var(--panel-border);
    display: grid;
    gap: .16rem;
    text-align: center;
}

.organization-teacher-editor-summary dl>div:last-child {
    border-left: 0;
}

.organization-teacher-editor-summary dt {
    color: var(--panel-muted);
    font-size: .49rem;
    font-weight: 600;
}

.organization-teacher-editor-summary dd {
    color: var(--panel-text);
    font-size: .72rem;
    font-weight: 900;
    margin: 0;
}

.organization-teacher-editor-summary>p {
    align-items: start;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-muted);
    display: grid;
    font-size: .56rem;
    gap: .4rem;
    grid-template-columns: 18px minmax(0, 1fr);
    line-height: 1.9;
    margin: 0;
    padding: .55rem;
    width: 100%;
}

.organization-teacher-editor-summary>p i {
    color: var(--panel-accent);
    font-size: .76rem;
    margin-top: .15rem;
}

.organization-teacher-editor-form {
    display: grid;
    gap: 1.15rem;
    padding: 1rem !important;
}

.organization-teacher-editor-actions {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding-top: .9rem;
}

.panel-role-teacher .teacher-curriculum-hero {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--teacher-brand-deep) 94%, #000), var(--teacher-brand));
    border: 1px solid color-mix(in srgb, var(--teacher-brand-deep) 78%, #000);
    border-right: 4px solid #d7b56d;
    min-height: 126px;
}

.panel-role-teacher .teacher-curriculum-hero .teacher-course-heading-image img {
    border-color: rgba(255, 255, 255, .2);
    height: 82px;
    width: 118px;
}

.panel-role-teacher .teacher-curriculum-hero h2,
.panel-role-teacher .teacher-curriculum-hero .teacher-content-eyebrow {
    color: #fff;
}

.panel-role-teacher .teacher-curriculum-hero p,
.panel-role-teacher .teacher-curriculum-hero>div>a {
    color: rgba(255, 255, 255, .72);
}

.panel-role-teacher .teacher-curriculum-hero .teacher-content-hero-actions>span {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .75);
}

.panel-role-teacher .teacher-curriculum-hero .teacher-content-hero-actions>span strong {
    color: #fff;
}

.panel-role-teacher .teacher-curriculum-hero .btn-outline-primary {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.teacher-curriculum-overview {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(135px, .55fr)) minmax(300px, 1.4fr);
}

.teacher-curriculum-overview>article,
.teacher-curriculum-overview>p {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    box-shadow: var(--teacher-shadow);
    display: grid;
    gap: .55rem;
    margin: 0;
    min-height: 72px;
    padding: .65rem;
}

.teacher-curriculum-overview>article {
    grid-template-columns: 38px minmax(0, 1fr);
}

.teacher-curriculum-overview>article>span,
.teacher-curriculum-overview>p>i {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    font-size: .9rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.teacher-curriculum-overview article>div,
.teacher-curriculum-overview>p>span {
    display: grid;
    gap: .08rem;
}

.teacher-curriculum-overview article strong {
    color: var(--panel-text);
    font-size: .94rem;
    font-weight: 950;
}

.teacher-curriculum-overview article small,
.teacher-curriculum-overview>p small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.teacher-curriculum-overview>p {
    background: color-mix(in srgb, var(--panel-accent-soft) 52%, var(--panel-surface));
    grid-template-columns: 38px minmax(0, 1fr);
}

.teacher-curriculum-overview>p strong {
    color: var(--panel-text);
    font-size: .67rem;
    font-weight: 900;
}

.panel-role-teacher .teacher-curriculum-register-head {
    align-items: center;
    padding: .8rem 1rem;
}

.teacher-curriculum-toolbar {
    align-items: center;
    background: color-mix(in srgb, var(--panel-surface) 94%, transparent);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    box-shadow: 0 8px 25px rgba(18, 50, 48, .07);
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    margin-bottom: .75rem;
    padding: .6rem;
    position: sticky;
    top: 70px;
    z-index: 15;
}

.teacher-curriculum-toolbar>label {
    margin: 0;
    position: relative;
}

.teacher-curriculum-toolbar>label>i {
    color: var(--panel-muted);
    position: absolute;
    right: .72rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.teacher-curriculum-toolbar>label>input {
    background: var(--panel-surface-soft);
    min-height: 40px;
    padding-inline: 2.25rem 3.1rem;
}

.teacher-curriculum-toolbar kbd {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--panel-muted);
    font-family: inherit;
    font-size: .5rem;
    left: .55rem;
    padding: .18rem .3rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.teacher-curriculum-toolbar>span {
    color: var(--panel-muted);
    font-size: .56rem;
    white-space: nowrap;
}

.teacher-curriculum-toolbar>span strong {
    color: var(--panel-accent);
    font-size: .72rem;
}

.teacher-curriculum-toolbar>div {
    display: flex;
    gap: .4rem;
}

.teacher-curriculum-toolbar .btn {
    font-size: .58rem;
    min-height: 38px;
    white-space: nowrap;
}

.teacher-curriculum-structure {
    gap: .7rem;
}

.panel-role-teacher .teacher-curriculum-chapter {
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(23, 54, 51, .055);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.panel-role-teacher .teacher-curriculum-chapter:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 38%, var(--panel-border));
    box-shadow: 0 8px 24px rgba(23, 54, 51, .08);
}

.panel-role-teacher .teacher-curriculum-chapter>header {
    background: var(--panel-surface);
    border-bottom: 0;
    gap: .7rem;
    grid-template-columns: 28px 38px minmax(0, 1fr) auto;
    min-height: 78px;
    padding: .7rem .75rem;
}

.panel-role-teacher .teacher-curriculum-chapter>header:has(+ .chapter-lessons-collapse.show) {
    background: color-mix(in srgb, var(--panel-accent-soft) 36%, var(--panel-surface));
    border-bottom: 1px solid var(--panel-border);
}

.panel-role-teacher .teacher-curriculum-chapter .teacher-drag-handle {
    background: transparent;
    border: 0;
    color: var(--panel-muted);
    cursor: grab;
    height: 34px;
    width: 28px;
}

.panel-role-teacher .teacher-curriculum-chapter .teacher-drag-handle:active,
.panel-role-teacher .teacher-curriculum-lesson .lesson-order:active {
    cursor: grabbing;
}

.panel-role-teacher .teacher-curriculum-chapter .chapter-number {
    align-items: center;
    background: var(--panel-accent);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: .72rem;
    font-weight: 950;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.panel-role-teacher .teacher-curriculum-chapter>header h3 {
    color: var(--panel-text);
    font-size: .78rem;
    margin-bottom: .22rem;
}

.panel-role-teacher .teacher-curriculum-chapter>header p {
    font-size: .57rem;
}

.teacher-curriculum-chapter-actions {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.teacher-curriculum-chapter-actions .btn {
    align-items: center;
    display: inline-flex;
    font-size: .56rem;
    gap: .3rem;
    justify-content: center;
    min-height: 34px;
    padding: .35rem .5rem;
}

.teacher-curriculum-chapter-actions .btn-outline-danger {
    padding-inline: .55rem;
}

.teacher-curriculum-chapter-actions .teacher-chapter-collapse-toggle i {
    transition: transform .2s ease;
}

.teacher-curriculum-chapter-actions .teacher-chapter-collapse-toggle.is-expanded i {
    transform: rotate(180deg);
}

.panel-role-teacher .teacher-curriculum-chapter .teacher-structure-lessons {
    background: var(--panel-surface-soft);
    padding: .35rem .7rem .55rem;
}

.panel-role-teacher .teacher-curriculum-lesson {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid transparent;
    border-bottom-color: var(--panel-border);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: .55rem;
    grid-template-columns: 22px 36px minmax(0, 1fr) auto auto;
    margin: .25rem 0;
    min-height: 62px;
    padding: .45rem .5rem;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.panel-role-teacher .teacher-curriculum-lesson:hover {
    background: color-mix(in srgb, var(--panel-accent-soft) 42%, var(--panel-surface));
    border-color: color-mix(in srgb, var(--panel-accent) 26%, var(--panel-border));
    transform: translateX(-2px);
}

.panel-role-teacher .teacher-curriculum-lesson:last-child {
    border-bottom-color: transparent;
}

.teacher-curriculum-lesson .lesson-order {
    color: var(--panel-muted);
    cursor: grab;
}

.teacher-curriculum-lesson .lesson-type-icon {
    align-items: center;
    background: #e9f2f1;
    border: 1px solid #d3e5e2;
    border-radius: 8px;
    color: #25756d;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.teacher-curriculum-lesson .lesson-type-icon.is-quiz {
    background: #fff5df;
    border-color: #efd9a4;
    color: #9a6b16;
}

.teacher-curriculum-lesson .lesson-type-icon.is-meet {
    background: #edf0fa;
    border-color: #d8def0;
    color: #5268a0;
}

.teacher-curriculum-lesson-code {
    color: var(--panel-accent);
    display: block;
    font-size: .48rem;
    font-style: normal;
    font-weight: 850;
    margin-bottom: .08rem;
}

.panel-role-teacher .teacher-curriculum-lesson strong {
    color: var(--panel-text);
    font-size: .68rem;
    font-weight: 900;
}

.panel-role-teacher .teacher-curriculum-lesson small {
    font-size: .53rem;
}

.teacher-curriculum-lesson .teacher-edit-icon {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    color: var(--panel-accent);
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.teacher-curriculum-lesson .teacher-edit-icon:hover {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
    color: #fff;
}

.teacher-curriculum-lesson .teacher-edit-icon.is-danger {
    color: #b34b55;
}

.teacher-curriculum-lesson .teacher-edit-icon.is-danger:hover {
    background: #b34b55;
    border-color: #b34b55;
    color: #fff;
}

.teacher-curriculum-search-empty {
    align-items: center;
    background: var(--panel-surface);
    border: 1px dashed var(--panel-border);
    border-radius: 9px;
    color: var(--panel-muted);
    display: grid;
    gap: .25rem;
    justify-items: center;
    padding: 1.5rem;
    text-align: center;
}

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

.teacher-curriculum-search-empty i {
    color: var(--panel-accent);
    font-size: 1.3rem;
}

.teacher-curriculum-search-empty strong {
    color: var(--panel-text);
    font-size: .72rem;
}

.teacher-curriculum-search-empty span {
    font-size: .58rem;
}

.teacher-curriculum-empty .btn {
    margin-top: .7rem;
}

.teacher-curriculum-modal-heading {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(0, 1fr);
}

.teacher-curriculum-modal-heading>span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: .95rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.teacher-curriculum-modal-heading>div {
    display: grid;
    gap: .08rem;
}

.teacher-curriculum-modal-heading small,
.teacher-curriculum-modal-heading .modal-kicker,
.teacher-curriculum-modal-heading p {
    color: rgba(255, 255, 255, .68);
    font-size: .52rem;
    margin: 0;
}

.teacher-curriculum-modal-heading h3 {
    color: #fff;
    font-size: .75rem;
    margin: 0;
}

.teacher-curriculum-form-intro {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent-soft) 54%, var(--panel-surface));
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr);
    margin-bottom: .85rem;
    padding: .55rem;
}

.teacher-curriculum-form-intro>i {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    height: 36px;
    justify-content: center;
}

.teacher-curriculum-form-intro>span {
    display: grid;
    gap: .08rem;
}

.teacher-curriculum-form-intro strong {
    color: var(--panel-text);
    font-size: .65rem;
}

.teacher-curriculum-form-intro small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.teacher-curriculum-modal-note {
    color: var(--panel-muted);
    font-size: .55rem;
    margin-left: auto;
}

.teacher-curriculum-modal-note i {
    color: var(--panel-accent);
    margin-left: .25rem;
}

.teacher-curriculum-section-title {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: .55rem;
    grid-template-columns: 36px minmax(0, 1fr);
    padding-bottom: .55rem;
}

.teacher-curriculum-section-title>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-accent);
    display: flex;
    height: 36px;
    justify-content: center;
}

.teacher-curriculum-section-title>div {
    display: grid;
    gap: .08rem;
}

.teacher-curriculum-section-title strong {
    color: var(--panel-text);
    font-size: .68rem;
    font-weight: 900;
}

.teacher-curriculum-section-title small {
    color: var(--panel-muted);
    font-size: .55rem;
}

.panel-role-teacher .teacher-curriculum-lesson-form .modal-body {
    padding: .85rem 1rem 1rem;
}

html[data-panel-theme="dark"] .teacher-curriculum-lesson .lesson-type-icon {
    background: #18302f;
    border-color: #294744;
    color: #82c8c0;
}

html[data-panel-theme="dark"] .teacher-curriculum-lesson .lesson-type-icon.is-quiz {
    background: #382f1d;
    border-color: #5d4d2b;
    color: #e3bd70;
}

html[data-panel-theme="dark"] .teacher-curriculum-lesson .lesson-type-icon.is-meet {
    background: #242c41;
    border-color: #39445e;
    color: #9eadd5;
}

@media (max-width: 1199.98px) {
    .organization-teacher-editor-layout {
        grid-template-columns: 1fr;
    }

    .organization-teacher-editor-summary {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        justify-items: start;
        position: static;
    }

    .organization-teacher-editor-avatar {
        grid-row: 1 / 4;
        height: 70px;
        width: 70px;
    }

    .organization-teacher-editor-summary dl {
        border: 0;
        grid-column: 3;
        grid-row: 1 / 4;
        min-width: 260px;
        padding: 0;
    }

    .organization-teacher-editor-summary>p {
        grid-column: 1 / -1;
    }

    .teacher-curriculum-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teacher-curriculum-overview>p {
        grid-column: 1 / -1;
    }

    .teacher-curriculum-toolbar {
        grid-template-columns: minmax(220px, 1fr) auto;
    }

    .teacher-curriculum-toolbar>span {
        display: none;
    }

    .teacher-curriculum-chapter-actions .btn>span {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .teacher-curriculum-toolbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .teacher-curriculum-toolbar>div {
        justify-content: flex-end;
    }

    .panel-role-teacher .teacher-curriculum-chapter>header {
        grid-template-columns: 28px 38px minmax(0, 1fr);
    }

    .teacher-curriculum-chapter-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .organization-teacher-editor-summary {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .organization-teacher-editor-avatar {
        height: 58px;
        width: 58px;
    }

    .organization-teacher-editor-summary dl {
        border-top: 1px solid var(--panel-border);
        grid-column: 1 / -1;
        grid-row: auto;
        min-width: 0;
        padding-top: .65rem;
    }

    .teacher-curriculum-toolbar {
        position: static;
    }

    .panel-role-teacher .teacher-curriculum-lesson {
        grid-template-columns: 20px 34px minmax(0, 1fr) 32px 32px;
    }

    .teacher-curriculum-lesson .teacher-lesson-badges {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .teacher-account-form-section>header {
        align-items: start;
    }

    .organization-teacher-editor-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .organization-teacher-editor-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .teacher-curriculum-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teacher-curriculum-overview>article {
        align-content: center;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .teacher-curriculum-overview>article>span {
        display: none;
    }

    .teacher-curriculum-toolbar>div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .teacher-curriculum-toolbar>div .btn-primary {
        grid-column: 1 / -1;
    }

    .panel-role-teacher .teacher-curriculum-chapter>header {
        gap: .5rem;
        grid-template-columns: 24px 34px minmax(0, 1fr);
        padding: .6rem;
    }

    .panel-role-teacher .teacher-curriculum-chapter .chapter-number {
        height: 34px;
        width: 34px;
    }

    .teacher-curriculum-chapter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        width: 100%;
    }

    .teacher-curriculum-chapter-actions .btn {
        width: 100%;
    }

    .panel-role-teacher .teacher-curriculum-chapter .teacher-structure-lessons {
        padding: .25rem .35rem .4rem;
    }

    .panel-role-teacher .teacher-curriculum-lesson {
        gap: .4rem;
        grid-template-columns: 18px 32px minmax(0, 1fr) 30px 30px;
        min-height: 58px;
        padding: .4rem;
    }

    .teacher-curriculum-lesson .lesson-type-icon {
        height: 32px;
        width: 32px;
    }

    .teacher-curriculum-lesson .teacher-edit-icon {
        height: 29px;
        width: 29px;
    }

    .teacher-curriculum-modal-note {
        display: none;
    }
}

/* Shared panel toggle track */
.toggle-row {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .65rem;
    user-select: none;
}

.toggle-input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.toggle-track {
    background: color-mix(in srgb, var(--panel-muted) 18%, var(--panel-surface));
    border: 1px solid color-mix(in srgb, var(--panel-muted) 35%, var(--panel-border));
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 46px;
    height: 25px;
    padding: 2px;
    position: relative;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    width: 46px;
}

.toggle-track::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 28, 45, .24);
    content: "";
    height: 19px;
    position: absolute;
    right: 2px;
    top: 2px;
    transition: transform .2s ease;
    width: 19px;
}

.toggle-input:checked+.toggle-track {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
}

.toggle-input:checked+.toggle-track::after {
    transform: translateX(-21px);
}

.toggle-input:focus-visible+.toggle-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-accent) 22%, transparent);
}

.toggle-row:hover .toggle-track {
    border-color: var(--panel-accent);
}

html[data-panel-theme="dark"] .toggle-track::after {
    background: #eef4f8;
}

/* Course private-access settings */
.course-private-settings {
    overflow: visible;
}

.course-private-toggle {
    align-items: center;
    background: color-mix(in srgb, var(--panel-accent-soft) 58%, var(--panel-surface));
    border: 1px solid color-mix(in srgb, var(--panel-accent) 22%, var(--panel-border));
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    gap: .9rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
}

.course-private-toggle>span:last-child {
    display: grid;
    gap: .22rem;
}

.course-private-toggle strong {
    color: var(--panel-text);
    font-size: .82rem;
}

.course-private-toggle small {
    color: var(--panel-muted);
    font-size: .68rem;
    line-height: 1.8;
}

.course-private-access-fields {
    border-top: 1px solid var(--panel-border);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.course-private-owner-note,
.course-private-notice {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: .75rem;
    grid-column: 1 / -1;
    padding: .8rem;
}

.course-private-owner-note>i,
.course-private-notice>i {
    color: var(--panel-accent);
    font-size: 1rem;
}

.course-private-owner-note>span {
    display: grid;
    gap: .15rem;
}

.course-private-owner-note small,
.course-private-notice p {
    color: var(--panel-muted);
    font-size: .67rem;
    line-height: 1.8;
    margin: 0;
}

.course-private-members {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}

.course-private-members>div {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: .65rem;
    padding: .75rem;
}

.course-private-members i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 6px;
    color: var(--panel-accent);
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
}

.course-private-members span {
    display: grid;
}

.course-private-members strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.course-private-members small {
    color: var(--panel-muted);
    font-size: .56rem;
}

.organization-course-restrictions .course-private-notice {
    margin-top: 1rem;
}

.organization-course-tabbar .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .course-private-members {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .organization-course-tabbar .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .course-private-access-fields {
        grid-template-columns: 1fr;
    }

    .course-private-toggle {
        align-items: start;
    }

    .organization-course-tabbar .nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .course-private-members {
        grid-template-columns: 1fr;
    }
}

/* Online meeting join and near-start dashboard ----------------------- */
.upcoming-meetings-panel {
    background:
        radial-gradient(circle at 8% 0, color-mix(in srgb, var(--panel-accent) 13%, transparent), transparent 28%),
        var(--panel-surface);
    border-color: color-mix(in srgb, var(--panel-accent) 22%, var(--panel-border));
    overflow: hidden;
}

.upcoming-meetings-head {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin: -.25rem -.25rem 1rem;
    padding: .25rem .25rem .9rem;
}

.upcoming-meetings-head>div {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.upcoming-meetings-head>div>span {
    align-items: center;
    background: var(--panel-accent);
    border-radius: 10px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--panel-accent) 22%, transparent);
    color: #fff;
    display: flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.upcoming-meetings-head>div>div {
    display: grid;
    gap: .08rem;
}

.upcoming-meetings-head small {
    color: var(--panel-accent);
    font-size: .52rem;
    font-weight: 850;
}

.upcoming-meetings-head h2 {
    color: var(--panel-text);
    font-size: .86rem;
    font-weight: 950;
    margin: 0;
}

.upcoming-meetings-head>strong {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .55rem;
    gap: .35rem;
    padding: .42rem .65rem;
}

.upcoming-meetings-head>strong i {
    animation: upcoming-meeting-pulse 1.3s ease infinite;
    background: #19a37d;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.upcoming-meetings-grid {
    display: grid;
    gap: .75rem;
}

.upcoming-meeting-card {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    display: grid;
    gap: .8rem;
    grid-template-columns: 48px minmax(0, 1fr) 110px auto;
    padding: .75rem;
}

.upcoming-meeting-icon {
    align-items: center;
    background: #e6f5f1;
    border: 1px solid #c8e9df;
    border-radius: 10px;
    color: #138a70;
    display: flex;
    font-size: 1rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.upcoming-meeting-copy {
    display: grid;
    gap: .13rem;
    min-width: 0;
}

.upcoming-meeting-copy>small {
    color: var(--panel-accent);
    font-size: .5rem;
    font-weight: 800;
}

.upcoming-meeting-copy>strong {
    color: var(--panel-text);
    font-size: .7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upcoming-meeting-copy p {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
}

.upcoming-meeting-copy p span,
.upcoming-meeting-copy time {
    align-items: center;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: .5rem;
    gap: .25rem;
}

.upcoming-meeting-copy time {
    color: color-mix(in srgb, var(--panel-text) 72%, var(--panel-muted));
}

.upcoming-meeting-countdown {
    background: #fff7e6;
    border: 1px solid #eed69c;
    border-radius: 9px;
    display: grid;
    gap: .08rem;
    min-width: 100px;
    padding: .48rem .55rem;
    text-align: center;
}

.upcoming-meeting-countdown small {
    color: #98712b;
    font-size: .45rem;
}

.upcoming-meeting-countdown strong {
    color: #9a6200;
    direction: ltr;
    font-size: .92rem;
    font-weight: 950;
    letter-spacing: .06em;
}

.upcoming-meeting-countdown.is-live {
    background: #e7f7f1;
    border-color: #a7ddca;
}

.upcoming-meeting-countdown.is-live :is(small, strong) {
    color: #11785e;
}

.upcoming-meeting-card>form {
    margin: 0;
}

.upcoming-meeting-card>form .btn {
    min-height: 42px;
    white-space: nowrap;
}

.teacher-meeting-quick-join {
    display: inline-flex;
    margin: 0;
}

.teacher-structure-lesson>.teacher-lesson-actions {
    align-items: center;
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
}

.teacher-edit-icon.is-meeting {
    border-color: #a7ddca;
    color: #138a70;
}

.teacher-edit-icon.is-meeting:hover {
    background: #138a70;
    border-color: #138a70;
    color: #fff;
}

.admin-meeting-join-card {
    align-items: center;
    display: grid;
    gap: .8rem;
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin-meeting-join-card>span {
    align-items: center;
    background: #e6f5f1;
    border-radius: 10px;
    color: #138a70;
    display: flex;
    font-size: 1rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.admin-meeting-join-card>div {
    display: grid;
}

.admin-meeting-join-card strong {
    color: var(--panel-text);
    font-size: .7rem;
}

.admin-meeting-join-card small {
    color: var(--panel-muted);
    font-size: .54rem;
}

.meeting-client-schedule {
    align-items: center;
    background: color-mix(in srgb, #139a8c 7%, var(--client-surface));
    border: 1px solid color-mix(in srgb, #139a8c 25%, var(--client-border));
    border-radius: 11px;
    display: flex;
    gap: .65rem;
    grid-column: 1 / 3;
    grid-row: 2;
    padding: .65rem .75rem;
}

.meeting-client-schedule>span,
.meeting-client-schedule>header>i {
    align-items: center;
    background: #e4f7f3;
    border-radius: 8px;
    color: #138a70;
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.meeting-client-schedule>div {
    display: grid;
    gap: .12rem;
}

.meeting-client-schedule strong {
    color: var(--client-text);
    font-size: .61rem;
}

.meeting-client-schedule small {
    color: var(--client-muted);
    font-size: .49rem;
}

.meeting-client-schedule.is-weekly {
    align-items: stretch;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
}

.meeting-client-schedule.is-weekly>header {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.meeting-client-schedule.is-weekly>header>span {
    display: grid;
}

.meeting-client-schedule.is-weekly>div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.meeting-client-schedule.is-weekly>div>span {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    display: grid;
    min-width: 92px;
    padding: .38rem .5rem;
}

.lesson-meet-card:has(.meeting-client-schedule)>.meeting-client-state,
.lesson-meet-card:has(.meeting-client-schedule)>.meeting-client-join-form {
    grid-column: 3;
    grid-row: 2;
}

.online-meetings-hero {
    align-items: center;
    background:
        radial-gradient(circle at 8% 0, rgba(25, 163, 125, .16), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--panel-surface) 91%, #19a37d), var(--panel-surface));
    border: 1px solid color-mix(in srgb, #19a37d 24%, var(--panel-border));
    border-radius: var(--panel-radius);
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: 1.2rem 1.3rem;
}

.online-meetings-hero h2 {
    color: var(--panel-text);
    font-size: 1rem;
    font-weight: 950;
    margin: .15rem 0 .3rem;
}

.online-meetings-hero p {
    color: var(--panel-muted);
    font-size: .58rem;
    margin: 0;
}

.online-meetings-hero>strong {
    align-items: center;
    background: #e7f7f1;
    border: 1px solid #a7ddca;
    border-radius: 999px;
    color: #11785e;
    display: inline-flex;
    font-size: .57rem;
    gap: .4rem;
    padding: .5rem .75rem;
    white-space: nowrap;
}

.online-meetings-hero>strong i,
.online-meeting-status i {
    animation: upcoming-meeting-pulse 1.3s ease infinite;
    background: #19a37d;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.online-meetings-register>header {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
}

.online-meetings-register>header>div {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.online-meetings-register>header>div>span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 10px;
    color: var(--panel-accent);
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.online-meetings-register>header>div>div {
    display: grid;
}

.online-meetings-register>header small {
    color: var(--panel-accent);
    font-size: .48rem;
    font-weight: 850;
}

.online-meetings-register>header h3 {
    color: var(--panel-text);
    font-size: .78rem;
    font-weight: 950;
    margin: 0;
}

.online-meetings-register>header time {
    color: var(--panel-muted);
    font-size: .5rem;
}

.online-meetings-list {
    display: grid;
    gap: .75rem;
}

.online-meeting-row {
    align-items: center;
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    display: grid;
    gap: .8rem;
    grid-template-columns: auto minmax(150px, .9fr) minmax(360px, 1.7fr) auto;
    padding: .8rem;
}

.online-meeting-status {
    align-items: center;
    background: #e7f7f1;
    border: 1px solid #a7ddca;
    border-radius: 999px;
    color: #11785e;
    display: inline-flex;
    font-size: .5rem;
    font-weight: 850;
    gap: .35rem;
    padding: .38rem .55rem;
    white-space: nowrap;
}

.online-meeting-identity {
    display: grid;
    min-width: 0;
}

.online-meeting-identity small {
    color: var(--panel-accent);
    font-size: .46rem;
    font-weight: 800;
}

.online-meeting-identity strong {
    color: var(--panel-text);
    font-size: .66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-meeting-identity span {
    color: var(--panel-muted);
    font-size: .5rem;
}

.online-meeting-row dl {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.online-meeting-row dl>div {
    border-inline-start: 1px solid var(--panel-border);
    display: grid;
    gap: .08rem;
    padding-inline-start: .55rem;
}

.online-meeting-row dt {
    color: var(--panel-muted);
    font-size: .45rem;
    font-weight: 700;
}

.online-meeting-row dd {
    color: var(--panel-text);
    font-size: .52rem;
    font-weight: 800;
    margin: 0;
}

.online-meeting-row form {
    margin: 0;
}

.online-meeting-row form .btn {
    min-height: 42px;
    white-space: nowrap;
}

.online-meetings-empty {
    align-items: center;
    display: flex;
    gap: .8rem;
    justify-content: center;
    min-height: 180px;
    text-align: right;
}

.online-meetings-empty>span {
    align-items: center;
    background: var(--panel-surface-soft);
    border-radius: 50%;
    color: var(--panel-muted);
    display: flex;
    font-size: 1.15rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.online-meetings-empty>div {
    display: grid;
    gap: .15rem;
}

.online-meetings-empty strong {
    color: var(--panel-text);
    font-size: .68rem;
}

.online-meetings-empty p {
    color: var(--panel-muted);
    font-size: .52rem;
    margin: 0;
}

@keyframes upcoming-meeting-pulse {
    50% {
        box-shadow: 0 0 0 5px rgba(25, 163, 125, .12);
    }
}

@media (max-width: 991.98px) {
    .upcoming-meeting-card {
        grid-template-columns: 48px minmax(0, 1fr) 100px;
    }

    .upcoming-meeting-card>form {
        grid-column: 2 / -1;
    }

    .online-meeting-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .online-meeting-row dl {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 575.98px) {
    .upcoming-meetings-head {
        align-items: flex-start;
        gap: .7rem;
    }

    .upcoming-meetings-head>strong {
        font-size: .48rem;
    }

    .upcoming-meeting-card {
        align-items: start;
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .upcoming-meeting-icon {
        height: 42px;
        width: 42px;
    }

    .upcoming-meeting-countdown,
    .upcoming-meeting-card>form {
        grid-column: 1 / -1;
        width: 100%;
    }

    .upcoming-meeting-card>form .btn {
        width: 100%;
    }

    .admin-meeting-join-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .admin-meeting-join-card>button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .teacher-structure-lesson .teacher-lesson-badges {
        display: none;
    }

    .panel-role-teacher .teacher-curriculum-lesson,
    .panel-role-organization .organization-lesson-row {
        grid-template-columns: 20px 30px minmax(0, 1fr) auto;
    }

    .online-meetings-hero,
    .online-meetings-register>header {
        align-items: flex-start;
        gap: .75rem;
    }

    .online-meetings-register>header time {
        display: none;
    }

    .online-meeting-row {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .online-meeting-row>form {
        grid-column: 1 / -1;
        width: 100%;
    }

    .online-meeting-row>form .btn {
        width: 100%;
    }

    .online-meeting-row dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive learning lesson composition ----------------------------- */
.learning-course-meta {
    align-items: center;
    display: flex;
    flex-wrap: nowrap !important;
    gap: .5rem;
    min-width: 0;
}

.learning-course-meta-item {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
    min-width: 0;
    white-space: nowrap;
}

.learning-course-meta-item>span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-course-meta-item+.learning-course-meta-item {
    border-inline-start: 1px solid rgba(255, 255, 255, .22);
    padding-inline-start: .55rem;
}

.lesson-content-heading {
    align-items: center;
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.lesson-heading-main {
    overflow: hidden;
}

.lesson-content-heading>.lesson-heading-tools {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
}

.lesson-content-heading>.lesson-heading-tools>.lesson-completion-state {
    color: #74768a;
    font-size: .54rem;
    font-weight: 750;
}

.lesson-content-heading>.lesson-heading-tools>.lesson-completion-state.is-completed {
    color: #13815d;
}

.lesson-content-heading>.lesson-heading-tools>.lesson-completion-state>span {
    color: inherit;
    font: inherit;
    font-weight: inherit;
}

.lesson-sequence-nav> :is(a, .disabled)>span {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    display: inline;
    min-height: 0;
    padding: 0;
}

.lesson-media-shell {
    min-width: 0;
    width: 100%;
}

.lesson-media-shell :is(.lesson-video-feedback-stage, .plyr, .plyr__video-wrapper) {
    max-width: 100%;
    min-width: 0;
}

.lesson-meet-card,
.lesson-meet-card.is-scheduled {
    align-items: center;
    background:
        radial-gradient(circle at 100% 0, rgba(19, 154, 140, .1), transparent 34%),
        linear-gradient(145deg, var(--client-surface), var(--client-surface-soft));
    border-color: color-mix(in srgb, #139a8c 24%, var(--client-border));
    box-shadow: 0 12px 30px rgba(34, 76, 82, .07);
    gap: .85rem 1rem;
    grid-template-columns: 64px minmax(0, 1fr) minmax(235px, .62fr);
    grid-template-rows: auto auto;
    overflow: hidden;
    padding: 1.05rem;
    position: relative;
}

.lesson-meet-card::before {
    background: linear-gradient(180deg, #18a28f, #287da0);
    content: "";
    inset-block: 0;
    inset-inline-start: 0;
    position: absolute;
    width: 3px;
}

.lesson-meet-card>span {
    background: linear-gradient(145deg, #def7f1, #edf9fb);
    border: 1px solid #bce8df;
    border-radius: 14px;
    grid-column: 1;
    grid-row: 1;
    height: 60px;
    width: 60px;
    z-index: 1;
}

.lesson-meet-summary {
    display: grid;
    gap: .12rem;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    z-index: 1;
}

.lesson-meet-summary>small {
    color: #138a70;
    font-weight: 850;
}

.lesson-meet-summary h4 {
    color: var(--client-text);
    font-size: .78rem;
    line-height: 1.8;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-meet-summary p {
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.lesson-meet-card>.meeting-client-state,
.lesson-meet-card>.meeting-client-join-form,
.lesson-meet-card:has(.meeting-client-schedule)>.meeting-client-state,
.lesson-meet-card:has(.meeting-client-schedule)>.meeting-client-join-form {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    z-index: 1;
}

.meeting-client-state {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
}

.meeting-client-state>div {
    min-width: 0;
}

.meeting-client-state span {
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.meeting-client-join-form .meeting-client-live-button {
    min-height: 48px;
    width: 100%;
}

.lesson-meet-card>.meeting-client-schedule {
    background: color-mix(in srgb, #139a8c 6%, var(--client-surface));
    border-color: color-mix(in srgb, #139a8c 22%, var(--client-border));
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: .1rem;
    min-width: 0;
    padding: .7rem;
    width: 100%;
    z-index: 1;
}

.meeting-client-schedule.is-weekly {
    grid-template-columns: minmax(175px, .55fr) minmax(0, 1.45fr);
}

.meeting-client-schedule.is-weekly>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    width: 100%;
}

.meeting-client-schedule.is-weekly>div>span {
    min-width: 0;
}

@media (max-width: 1199.98px) {

    .lesson-meet-card,
    .lesson-meet-card.is-scheduled {
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .lesson-meet-card>span {
        height: 54px;
        width: 54px;
    }

    .lesson-meet-card>.meeting-client-state,
    .lesson-meet-card>.meeting-client-join-form,
    .lesson-meet-card:has(.meeting-client-schedule)>.meeting-client-state,
    .lesson-meet-card:has(.meeting-client-schedule)>.meeting-client-join-form {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .lesson-meet-card>.meeting-client-schedule {
        grid-row: 3;
    }
}

@media (max-width: 767.98px) {
    .learning-course-banner {
        display: none;
    }

    .learning-course-meta {
        display: grid !important;
        flex-direction: row;
        grid-template-columns: minmax(0, 1fr) max-content;
        width: 100%;
    }

    .learning-course-meta-item:first-child {
        overflow: hidden;
    }

    .lesson-content-heading {
        align-items: center;
        display: grid;
        flex-direction: row;
        gap: .5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .65rem;
    }

    .lesson-heading-main {
        align-items: center;
        gap: .48rem !important;
    }

    .lesson-heading-icon {
        border-radius: 8px;
        font-size: .88rem;
        height: 40px;
        width: 40px;
    }

    .lesson-heading-main h3 {
        font-size: .7rem;
        white-space: nowrap;
    }

    .lesson-heading-main>div>span,
    .lesson-heading-main p {
        font-size: .43rem;
    }

    .lesson-content-heading>.lesson-heading-tools {
        align-items: flex-end;
        flex-direction: column;
        gap: .28rem;
        justify-content: center;
        width: auto;
    }

    .lesson-content-heading>.lesson-heading-tools>.lesson-completion-state {
        font-size: .45rem;
        min-height: 28px;
        padding: .28rem .45rem;
    }

    .lesson-sequence-nav {
        gap: .22rem;
    }

    .lesson-sequence-nav> :is(a, .disabled) {
        height: 30px;
        justify-content: center;
        min-height: 30px;
        padding: 0;
        width: 32px;
    }

    .lesson-sequence-nav> :is(a, .disabled)>span {
        display: none;
    }

    .lesson-media-shell .learning-video-player {
        display: block;
        height: auto;
        width: 100%;
    }

    .lesson-media-shell.is-compact {
        display: none;
    }

    .lesson-action-card {
        align-items: center;
        display: grid;
        gap: .12rem .65rem;
        grid-template-columns: 46px minmax(0, 1fr);
        padding: .75rem;
        text-align: right;
    }

    .lesson-action-card>span {
        grid-column: 1;
        grid-row: 1 / 3;
        height: 44px;
        width: 44px;
    }

    .lesson-action-card>strong {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .lesson-action-card>p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    .lesson-action-card>.btn {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: stretch;
        margin-top: .5rem;
        width: 100%;
    }

    .lesson-media-shell.is-compact .learning-empty-player,
    .lesson-media-shell.is-compact .lesson-type-cover {
        /* min-height: clamp(240px, 48vw, 300px); */
    }

    .lesson-media-shell.is-compact .lesson-type-cover {
        padding: 1.35rem;
    }

    .lesson-media-shell.is-compact .lesson-type-cover>span {
        border-radius: 16px;
        font-size: 1.75rem;
        height: 76px;
        width: 76px;
    }

    .lesson-meet-card,
    .lesson-meet-card.is-scheduled {
        gap: .7rem;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: .8rem;
    }

    .lesson-meet-card>span {
        border-radius: 10px;
        font-size: 1rem;
        height: 46px;
        width: 46px;
    }

    .lesson-meet-summary h4 {
        font-size: .68rem;
    }

    .lesson-meet-summary p {
        font-size: .5rem;
    }

    .meeting-client-state {
        align-items: flex-start;
        padding: .6rem;
    }

    .meeting-client-schedule.is-weekly {
        grid-template-columns: 1fr;
    }

    .meeting-client-schedule.is-weekly>div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .learning-course-meta {
        gap: .35rem;
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .learning-course-meta-item {
        font-size: .5rem;
        gap: .22rem;
    }

    .lesson-content-heading {
        gap: .35rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lesson-heading-icon {
        height: 36px;
        width: 36px;
    }

    .lesson-heading-main>div>span,
    .lesson-heading-main p {
        display: none;
    }

    .lesson-content-heading>.lesson-heading-tools {
        align-items: center;
        flex-direction: row;
        gap: .22rem;
    }

    .lesson-content-heading>.lesson-heading-tools>.lesson-completion-state {
        height: 30px;
        justify-content: center;
        padding: 0;
        width: 30px;
    }

    .lesson-content-heading>.lesson-heading-tools>.lesson-completion-state>span {
        display: none;
    }

    .lesson-sequence-nav> :is(a, .disabled) {
        height: 30px;
        width: 29px;
    }

    .lesson-media-shell.is-compact .lesson-type-cover {
        align-items: flex-start;
        /* flex-direction: column; */
        /* min-height: 250px; */
        padding: 1.1rem;
    }

    .lesson-media-shell.is-compact .lesson-type-cover>span {
        height: 64px;
        width: 64px;
    }

    .lesson-media-shell.is-compact .learning-empty-player {
        min-height: 250px;
    }

    .meeting-client-schedule.is-weekly>div {
        grid-template-columns: 1fr;
    }

    .meeting-client-schedule.is-weekly>div>span {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Keep every primary client-panel page hero on one shared color system. */
.client-portal-body .client-panel-hero {
    background: linear-gradient(118deg, #1b334b 0%, #284f72 62%, #326a8a 100%);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 14px 34px rgba(24, 50, 74, .17);
    color: #fff;
}

.client-portal-body .client-panel-hero :is(h2, h3, strong) {
    color: #fff;
}

.client-portal-body .client-panel-hero :is(p, small) {
    color: rgba(255, 255, 255, .7);
}

.client-portal-body .client-panel-hero :is(
    .client-welcome-eyebrow,
    .client-library-hero-copy>span,
    .client-exam-hero-copy>span,
    .client-quiz-hero>div:first-child>span,
    .client-profile-identity>span,
    .client-section-intro>div:nth-child(2)>span,
    .formal-eyebrow
) {
    color: #b7d0e3;
}

.client-portal-body .client-panel-hero .client-section-intro-icon {
    background: rgba(255, 255, 255, .1);
    color: #d6e5f0;
}

.client-portal-body .client-panel-hero :is(
    .client-library-summary,
    .client-exam-summary,
    .client-quiz-summary
)>article {
    background: rgba(8, 25, 39, .22);
    border-color: rgba(255, 255, 255, .11);
}

.client-portal-body .client-panel-hero :is(
    .client-library-summary,
    .client-exam-summary
)>article>span {
    color: #d6e5f0;
}

.client-portal-body .client-panel-hero :is(.btn-primary, .btn-outline-primary) {
    background: #fff;
    border-color: #fff;
    color: #234967;
}