: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; }

.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; }.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-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-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-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-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-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; }
}

/* 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;
    }
}