:root {
    --primary: #0f4c97;
    --primary-deep: #092b63;
    --accent: #f7b128;
    --text: #19345a;
    --muted: #6b7a90;
    --surface: #ffffff;
    --surface-soft: #f4f7fc;
    --line: #dbe4f0;
    --shadow: 0 22px 50px rgba(11, 39, 84, 0.12);
    --radius: 20px;
    --container: 1240px;
}

.subject-toolbar-card {
    border: 1px solid #eef1fb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 39, 87, 0.05);
    padding: 18px;
}

.subject-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.subject-toolbar-row + .subject-toolbar-row {
    margin-top: 16px;
}

.subject-toolbar-heading h2 {
    margin: 0;
    color: #1d2f6f;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.subject-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.subject-filter-grid {
    flex: 1 1 760px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.subject-filter-box label {
    display: block;
    margin-bottom: 8px;
    color: #5d6d8b;
    font-size: 12px;
    font-weight: 800;
}

.subject-filter-box input,
.subject-filter-box select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #e3e9f6;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px;
    color: #1f2c4b;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-shadow: none;
}

.subject-filter-box input:focus,
.subject-filter-box select:focus,
.subject-search-box input:focus {
    border-color: #2f6ff0;
    box-shadow: 0 0 0 3px rgba(47, 111, 240, 0.08);
}

.subject-search-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    min-height: 46px;
}

.subject-search-box input {
    width: 100%;
    height: 46px;
    border: 1px solid #e3e9f6;
    border-radius: 12px;
    background: #fff;
    padding: 0 54px 0 14px;
    color: #1f2c4b;
    font-size: 14px;
    font-weight: 700;
    outline: none;
}

.subject-search-box input::placeholder {
    color: #8b96ae;
    font-weight: 700;
}

.subject-search-box button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 1px solid #dfe6f4;
    border-radius: 10px;
    background: #fff;
    color: #ffffff;
    cursor: pointer;
}

.subject-search-box button:hover {
    border-color: #cfd9ee;
}

.subject-form-card {
    border: 1px solid #eef1fb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 39, 87, 0.05);
    padding: 20px;
}

.subject-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.subject-form-head h2 {
    margin: 0 0 6px;
    color: #1d2f6f;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.subject-form-head p {
    margin: 0;
    color: #7c88a3;
    font-size: 13px;
    font-weight: 700;
}

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

.subject-form-field label {
    display: block;
    margin-bottom: 8px;
    color: #5d6d8b;
    font-size: 12px;
    font-weight: 800;
}

.subject-form-field input,
.subject-form-field select,
.subject-form-field textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid #e3e9f6;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px;
    color: #1f2c4b;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-shadow: none;
}

.subject-form-field textarea {
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}

.subject-form-field input:focus,
.subject-form-field select:focus,
.subject-form-field textarea:focus {
    border-color: #2f6ff0;
    box-shadow: 0 0 0 3px rgba(47, 111, 240, 0.08);
}

.subject-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .subject-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-basis: 100%;
    }

    .subject-search-box {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .subject-toolbar-row,
    .subject-toolbar-actions,
    .subject-form-head,
    .subject-form-actions {
        align-items: stretch;
    }

    .subject-filter-grid {
        grid-template-columns: 1fr;
    }

    .subject-master-form-grid {
        grid-template-columns: 1fr;
    }

    .subject-form-actions {
        flex-direction: column;
    }
}

.admission-master-page {
    padding: 20px 22px 24px;
    background:
        radial-gradient(circle at top right, rgba(57, 108, 240, 0.08), transparent 28%),
        linear-gradient(180deg, #fcfdff 0%, #f7f9ff 100%);
}

.admission-top-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admission-toolbar-card,
.admission-view-panel {
    margin-bottom: 18px;
}

.admission-toolbar-card .subject-toolbar-row:first-child {
    flex-wrap: nowrap;
}

.admission-toolbar-card .subject-toolbar-actions {
    width: auto;
    margin-top: 0;
    margin-left: auto;
    flex-wrap: nowrap;
}

.admission-toolbar-card .subject-toolbar-row-secondary {
    align-items: end;
}

.admission-toolbar-card .subject-filter-grid {
    flex: 1 1 0;
}

.admission-toolbar-card .subject-search-box {
    flex: 0 0 360px;
    max-width: 360px;
    align-self: end;
}

.admission-toolbar-card .subject-toolbar-actions .session-tool-btn,
.admission-toolbar-card .subject-toolbar-actions .admin-primary-btn {
    min-height: 40px;
}

.admission-requests-toolbar .subject-toolbar-row-secondary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: end;
    gap: 16px;
}

.admission-requests-toolbar .subject-filter-grid {
    width: 100%;
    min-width: 0;
}

.admission-requests-toolbar .subject-search-box {
    width: 100%;
    max-width: 304px;
    justify-self: end;
    align-self: end;
}

.admission-requests-toolbar {
    padding: 20px 20px 18px;
    background:
        radial-gradient(circle at top center, rgba(95, 132, 255, 0.12), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admitted-students-page .admission-toolbar-card {
    padding: 18px 18px 22px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top center, rgba(119, 126, 255, 0.12), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 18px 44px rgba(28, 45, 96, 0.08);
}

.admitted-students-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admitted-students-filter-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admitted-students-filter-badge {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f0ebff 0%, #f7f5ff 100%);
    color: #6f5cf7;
}

.admitted-students-filter-title h2 {
    margin: 0;
    color: #223d7a;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.admitted-students-filter-form {
    display: grid;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid #edf1fb;
}

.admitted-students-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admitted-students-action-btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admitted-students-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(28, 45, 96, 0.18);
    filter: saturate(1.04);
}

.admitted-students-action-btn.tone-violet {
    background: linear-gradient(180deg, #f5f0ff 0%, #ebe3ff 100%);
    border-color: #ddd1ff;
    color: #5f44ef;
}

.admitted-students-action-btn.tone-blue {
    background: linear-gradient(180deg, #4f98ff 0%, #256af0 100%);
    color: #ffffff;
    border-color: #3a88ff;
}

.admitted-students-action-btn.tone-green {
    background: linear-gradient(180deg, #44d884 0%, #1ba857 100%);
    color: #ffffff;
    border-color: #2ec76b;
}

.admitted-students-action-btn.tone-pink {
    background: linear-gradient(180deg, #ff5fb0 0%, #ff3e8b 100%);
    border-color: #ff4c98;
}

.admitted-students-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 20px;
}

.admitted-students-filter-box label {
    margin-bottom: 10px;
    color: #455a8a;
    font-size: 13px;
    font-weight: 800;
}

.admitted-students-input-shell {
    position: relative;
}

.admitted-students-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(32, 49, 101, 0.08);
}

.admitted-students-input-shell select,
.admitted-students-input-shell input {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid #dfe6f6;
    background: #fff;
    color: #223d7a;
}

.admitted-students-input-shell select {
    padding-left: 50px;
}

.admitted-students-input-shell input {
    width: 100%;
    padding: 0 16px 0 50px;
}

.admitted-students-input-shell.tone-violet .admitted-students-input-icon {
    background: #f1ebff;
    color: #6e5cf7;
}

.admitted-students-input-shell.tone-purple .admitted-students-input-icon {
    background: #efeaff;
    color: #7a57f6;
}

.admitted-students-input-shell.tone-green .admitted-students-input-icon {
    background: #e8faee;
    color: #28ba63;
}

.admitted-students-input-shell.tone-blue .admitted-students-input-icon {
    background: #e8f1ff;
    color: #317fff;
}

.admitted-students-search-wrap {
    grid-column: 3 / span 2;
    align-self: end;
}

.admitted-students-search-box {
    width: 100%;
    max-width: none;
    min-height: 42px;
}

.admitted-students-search-box input {
    height: 42px;
    padding-left: 42px;
    padding-right: 62px;
    border-radius: 12px;
    border-color: #dfe6f6;
    box-shadow: 0 10px 22px rgba(32, 49, 101, 0.05);
}

.admitted-students-search-box::before {
    content: "\f002";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font: var(--fa-font-solid);
    color: #8793af;
    font-size: 15px;
    pointer-events: none;
}

.admitted-students-search-box button {
    right: 0;
    width: 52px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(180deg, #7868ff 0%, #6352f5 100%);
    box-shadow: 0 16px 28px rgba(99, 82, 245, 0.26);
}

.admission-requests-filter-form {
    display: grid;
    gap: 18px;
}

.admission-requests-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admission-requests-filter-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admission-requests-filter-title h2 {
    margin: 0;
    color: #1d2f6f;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.admission-requests-filter-badge {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eaf0ff 0%, #f6f8ff 100%);
    color: #3f6ef8;
    box-shadow: 0 10px 22px rgba(63, 110, 248, 0.14);
}

.admission-requests-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admission-requests-reset-btn,
.admission-requests-apply-btn {
    min-height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.admission-requests-reset-btn {
    border: 1px solid #dfe6f6;
    background: #fff;
    color: #5b6889;
    box-shadow: 0 10px 24px rgba(31, 49, 102, 0.05);
}

.admission-requests-apply-btn {
    box-shadow: 0 16px 28px rgba(88, 79, 245, 0.24);
}

.admission-requests-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 22px;
}

.admission-requests-filter-box label {
    margin-bottom: 10px;
    color: #465985;
    font-size: 13px;
}

.admission-requests-input-shell {
    position: relative;
}

.admission-requests-input-shell .admission-requests-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
}

.admission-requests-input-shell select {
    min-height: 50px;
    padding-left: 54px;
    border-color: #dce5f7;
    box-shadow: 0 12px 28px rgba(33, 53, 110, 0.05);
}

.admission-requests-input-shell.tone-blue .admission-requests-input-icon {
    background: #e7f1ff;
    color: #2f7dff;
}

.admission-requests-input-shell.tone-purple .admission-requests-input-icon {
    background: #efe9ff;
    color: #6e40f6;
}

.admission-requests-input-shell.tone-green .admission-requests-input-icon {
    background: #e9faef;
    color: #34b963;
}

.admission-requests-input-shell.tone-amber .admission-requests-input-icon {
    background: #fff3dd;
    color: #f0a11b;
}

.admission-requests-input-shell.tone-pink .admission-requests-input-icon {
    background: #ffe9f0;
    color: #ff5d8f;
}

.admission-requests-application-box {
    grid-column: 1 / span 1;
}

.admission-requests-search-row {
    display: flex;
    justify-content: flex-end;
}

.admission-requests-search-box {
    max-width: 560px;
    min-height: 50px;
}

.admission-requests-search-box input {
    height: 50px;
    padding-left: 46px;
    padding-right: 68px;
    border-color: #dce5f7;
    box-shadow: 0 12px 28px rgba(33, 53, 110, 0.05);
}

.admission-requests-search-box::before {
    content: "\f002";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font: var(--fa-font-solid);
    color: #7d89a6;
    font-size: 16px;
    pointer-events: none;
}

.admission-requests-search-box button {
    right: 0;
    width: 54px;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #5264f4 0%, #4a44ef 100%);
    color: #fff;
    box-shadow: 0 16px 28px rgba(82, 100, 244, 0.26);
}

.admission-form-panel .subject-master-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admission-form-panel .subject-span-2 {
    grid-column: span 2;
}

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

.admission-view-grid small {
    display: block;
    margin-bottom: 6px;
    color: #7b88a5;
    font-size: 11px;
    font-weight: 800;
}

.admission-view-grid strong {
    color: #20345c;
    font-size: 13px;
}

.admission-table th,
.admission-table td {
    white-space: nowrap;
}

.admission-table .subject-action-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.admission-table .subject-action-list form {
    margin: 0;
    flex: 0 0 auto;
}

.admission-table td:last-child {
    white-space: nowrap;
}

.admission-table .subject-action-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #e8edf8;
    border-radius: 10px;
    background: #fff;
    color: #314d86;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(24, 37, 77, 0.06);
}

.admission-table .subject-action-btn i {
    margin: 0;
}

.admission-table .subject-action-btn:hover {
    transform: translateY(-1px);
}

.admission-table .subject-action-btn:nth-child(1) {
    background: #eef5ff;
    color: #2d74ff;
    border-color: #dce8ff;
}

.admission-table .subject-action-btn:nth-child(2) {
    background: #f4ecff;
    color: #7b48f5;
    border-color: #e8ddff;
}

.admission-table .subject-action-btn.danger {
    background: #fff1f3;
    color: #e65774;
    border-color: #ffd8df;
}

.admission-approve-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 43, 0.45);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 999;
}

.admission-approve-dialog {
    width: min(100%, 460px);
    border-radius: 18px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
}

.admission-approve-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.admission-approve-head h3 {
    margin: 0;
    color: #1e2f63;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.admission-approve-close {
    width: 34px;
    height: 34px;
    border: 1px solid #e5eaf6;
    border-radius: 10px;
    background: #fff;
    color: #5f6f92;
}

.admission-approve-copy,
.admission-approve-note {
    margin: 0 0 12px;
    color: #6e7d94;
    font-size: 13px;
}

.admission-approve-form {
    display: grid;
    gap: 14px;
}

.admission-approve-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

body.modal-open {
    overflow: hidden;
}

.subject-status-badge.status-pending,
.subject-status-badge.status-submitted,
.subject-status-badge.status-under-review {
    background: #fff5e6;
    color: #b56c00;
}

.subject-status-badge.status-paid,
.subject-status-badge.status-approved,
.subject-status-badge.status-active {
    background: #ebfbf1;
    color: #1d9b5d;
}

.subject-status-badge.status-failed,
.subject-status-badge.status-rejected,
.subject-status-badge.status-inactive {
    background: #fff0f3;
    color: #e04f76;
}

.subject-status-badge.status-draft {
    background: #eff3ff;
    color: #376ae6;
}

@media (max-width: 1100px) {
    .admission-top-stats,
    .admission-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .admitted-students-search-wrap {
        grid-column: 1 / -1;
    }

    .admission-toolbar-card .subject-toolbar-row:first-child {
        flex-wrap: wrap;
    }

    .admission-toolbar-card .subject-toolbar-actions {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .admission-toolbar-card .subject-search-box {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .admission-requests-toolbar .subject-toolbar-row-secondary {
        grid-template-columns: 1fr;
    }

    .admission-requests-toolbar .subject-search-box {
        max-width: 100%;
        justify-self: stretch;
    }

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

    .admission-requests-search-box {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .admission-master-page {
        padding: 14px 12px 20px;
    }

    .admission-top-stats,
    .admission-form-panel .subject-master-form-grid,
    .admission-view-grid {
        grid-template-columns: 1fr;
    }

    .admission-form-panel .subject-span-2 {
        grid-column: span 1;
    }

    .admitted-students-filter-top,
    .admitted-students-filter-actions {
        align-items: stretch;
    }

    .admitted-students-filter-actions {
        justify-content: stretch;
    }

    .admitted-students-action-btn {
        width: 100%;
    }

    .admitted-students-filter-grid {
        grid-template-columns: 1fr;
    }

    .admission-toolbar-card .subject-toolbar-row-secondary {
        align-items: stretch;
    }

.admission-approve-actions {
    flex-direction: column;
}

    .admission-requests-filter-top,
    .admission-requests-filter-actions,
    .admission-requests-search-row {
        align-items: stretch;
    }

    .admission-requests-filter-grid {
        grid-template-columns: 1fr;
    }
}

.merit-module-page .subject-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.merit-wizard-form > .merit-stepper,
.merit-wizard-form > .merit-step-panel,
.merit-wizard-form > .merit-step-actions {
    grid-column: 1 / -1;
}

.merit-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 14px 18px;
}

.merit-hero-copy {
    display: flex;
    align-items: center;
    gap: 16px;
}

.merit-hero-icon,
.merit-mini-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f1eeff 0%, #fbf9ff 100%);
    color: #6c39ff;
    box-shadow: 0 12px 22px rgba(101, 55, 255, 0.16);
}

.merit-hero-copy h2 {
    margin: 0;
    color: #1c2f63;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.merit-hero-copy p {
    margin: 6px 0 0;
    color: #76849f;
    font-size: 12px;
    font-weight: 700;
}

.merit-help-chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #e7ebfb;
    border-radius: 12px;
    background: #fff;
    color: #5d6d90;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 22px rgba(34, 53, 110, 0.06);
}

.merit-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 12px;
    border: 1px solid #eef1fb;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 18px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(38, 58, 118, 0.05);
}

.merit-step-btn {
    border: 0;
    background: transparent;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: #4d5f86;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    position: relative;
    z-index: 1;
}

.merit-step-btn.active {
    color: #5c39ef;
    box-shadow: none;
}

.merit-step-btn.active span {
    background: linear-gradient(135deg, #6b35ff 0%, #7e4cff 100%);
    border-color: #6b35ff;
    color: #fff;
    box-shadow: 0 12px 22px rgba(97, 53, 255, 0.34);
}

.merit-step-btn span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #8c63ff;
    background: #fff;
    color: #8c63ff;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(108, 82, 192, 0.08);
}

.merit-step-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.merit-step-btn strong {
    display: block;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    margin: 0;
}

.merit-step-btn small {
    display: block;
    color: #8895ae;
    font-size: 11px;
    font-weight: 700;
    margin: 0;
}

.merit-step-btn::after {
    margin-left: 72px;
    content: "";
    left: calc(100% - 6px);
    top: 17px;
    width: 66px;
    height: 2px;
    background: linear-gradient(90deg, #8b61ff 0%, #c6b8ff 100%);
    opacity: 0.55;
}

.merit-step-btn:last-child::after {
    display: none;
}

.merit-step-btn.completed span {
    background: #fff;
    color: #8c63ff;
    border-color: #8c63ff;
}

.merit-step-btn.completed span i {
    font-size: 12px;
}

.merit-stepper-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0.8;
}

.merit-stepper-spark-a { top: 10px; left: 54%; background: #86d9ff; }
.merit-stepper-spark-b { top: 20px; left: 58%; background: #ff66bd; width: 4px; height: 4px; }
.merit-stepper-spark-c { top: 32px; left: 56%; background: #ffd54d; width: 3px; height: 3px; }
.merit-stepper-spark-d { top: 13px; left: 60%; background: #b794ff; width: 6px; height: 6px; }
.merit-stepper-spark-e { top: 28px; left: 62%; background: #9df0be; width: 4px; height: 4px; }

.merit-step-panel.active {
    display: block;
}

.merit-basics-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.12fr);
    gap: 12px;
}

.merit-basics-showcase {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 24px 24px 18px;
    min-height: 374px;
    background:
        radial-gradient(circle at 85% 14%, rgba(255, 255, 255, 0.18) 0 12px, transparent 13px),
        radial-gradient(circle at 74% 26%, rgba(255, 255, 255, 0.14) 0 7px, transparent 8px),
        radial-gradient(circle at 79% 38%, rgba(255, 255, 255, 0.12) 0 5px, transparent 6px),
        linear-gradient(180deg, #7a4cff 0%, #4f7dff 100%);
    box-shadow: 0 22px 44px rgba(84, 86, 238, 0.28);
    color: #fff;
}

.merit-basics-showcase-top h3 {
    margin: 14px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
}

.merit-basics-showcase-top p {
    margin: 8px 0 0;
    max-width: 220px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.merit-basics-showcase-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    color: #6f49ff;
    font-size: 20px;
    box-shadow: 0 12px 22px rgba(255, 255, 255, 0.2);
}

.merit-basics-progress {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.merit-basics-progress div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 700;
}

.merit-basics-progress span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

.merit-basics-progress div:not(:last-child) span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 18px;
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(-50%);
}

.merit-basics-progress .active span {
    background: #fff;
    border-color: #fff;
}

.merit-basics-illustration {
    position: absolute;
    right: 18px;
    bottom: 58px;
    width: 166px;
    height: 166px;
}

.merit-basics-float {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.merit-float-a { width: 18px; height: 18px; right: 40px; top: 0; }
.merit-float-b { width: 10px; height: 10px; right: 14px; top: 22px; }
.merit-float-c { width: 74px; height: 74px; right: 0; bottom: 12px; }

.merit-basics-board {
    position: absolute;
    right: 8px;
    bottom: 24px;
    width: 110px;
    height: 126px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcff 0%, #f1f3ff 100%);
    transform: rotate(8deg);
    box-shadow: 0 18px 34px rgba(42, 35, 143, 0.22);
}

.merit-basics-board .clip {
    position: absolute;
    left: 50%;
    top: -7px;
    width: 40px;
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(180deg, #6b51ff 0%, #7c8fff 100%);
    transform: translateX(-50%);
}

.merit-basics-board .line {
    position: absolute;
    left: 30px;
    right: 14px;
    height: 6px;
    border-radius: 999px;
    background: #d6dcff;
}

.merit-basics-board .line-a { top: 32px; }
.merit-basics-board .line-b { top: 58px; width: 54px; }
.merit-basics-board .line-c { top: 84px; width: 44px; }

.merit-basics-board .tick {
    position: absolute;
    left: 12px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7c55ff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.merit-basics-board .tick-a { top: 28px; }
.merit-basics-board .tick-b { top: 54px; }
.merit-basics-board .tick-c { top: 80px; }

.merit-basics-cap {
    position: absolute;
    left: 24px;
    bottom: 28px;
    color: #1e2554;
    font-size: 38px;
    text-shadow: 0 10px 20px rgba(19, 18, 76, 0.22);
}

.merit-basics-book {
    position: absolute;
    width: 38px;
    height: 12px;
    border-radius: 4px;
    right: 10px;
    bottom: 10px;
    box-shadow: 0 10px 16px rgba(28, 31, 111, 0.14);
}

.merit-basics-book.book-a {
    background: linear-gradient(180deg, #ffffff 0%, #ecebff 100%);
}

.merit-basics-book.book-b {
    bottom: 0;
    right: 16px;
    background: linear-gradient(180deg, #9a76ff 0%, #6d4fff 100%);
}

.merit-basics-note {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #4b5d88;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
}

.merit-basics-note i {
    color: #4e7dff;
}

.merit-basics-form-card {
    min-height: 374px;
    padding: 22px 20px;
}

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

.merit-basic-input-wrap {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    border: 1px solid #e5eafb;
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.merit-basic-input-wrap i {
    color: #8b96b0;
    font-size: 13px;
}

.merit-basic-input-wrap input,
.merit-basic-input-wrap select {
    min-height: auto;
    border: 0;
    background: transparent;
    padding: 0;
    color: #2a3a65;
    font-size: 13px;
    font-weight: 700;
}

.merit-step-card {
    border: 1px solid #edf1fb;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(94, 113, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 18px;
    box-shadow: 0 14px 30px rgba(32, 53, 108, 0.05);
}

.merit-step-card-head {
    margin-bottom: 18px;
}

.merit-step-card-head h3 {
    margin: 0;
    color: #1b2f63;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
}

.merit-step-card-head p {
    margin: 8px 0 0;
    color: #73819c;
    font-size: 12px;
    font-weight: 700;
}

.merit-upload-shell {
    display: grid;
    gap: 10px;
    border: 1px dashed #cfd9fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    padding: 16px;
}

.merit-upload-shell input[type="file"] {
    width: 100%;
    min-height: auto;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    color: #29427d;
}

.merit-upload-shell input[type="file"]::file-selector-button {
    margin-right: 12px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #dce4ff;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #dfe7ff 100%);
    color: #3454d8;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.merit-upload-shell small {
    color: #73819c;
    font-size: 11px;
    font-weight: 700;
}

.merit-upload-card {
    min-height: 374px;
}

.merit-upload-dropzone {
    position: relative;
    min-height: 270px;
    border: 1px dashed #d9c8ff;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 20px;
    overflow: hidden;
}

.merit-upload-dropzone strong {
    margin-top: 18px;
    color: #243761;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.merit-upload-dropzone small {
    margin-top: 4px;
    color: #8a96b0;
    font-size: 13px;
    font-weight: 700;
}

.merit-upload-dropzone p,
.merit-upload-dropzone b,
.merit-upload-selected {
    margin: 0;
    color: #7f8bab;
    font-size: 12px;
    font-weight: 700;
}

.merit-upload-dropzone p {
    margin-top: 16px;
}

.merit-upload-dropzone b {
    margin-top: 6px;
    color: #7e5bff;
}

.merit-upload-selected {
    margin-top: 14px;
    color: #556681;
}

.merit-upload-button {
    position: relative;
    margin-top: 12px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid #cfaeff;
    border-radius: 12px;
    background: #fff;
    color: #6f43ff;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 12px 20px rgba(111, 67, 255, 0.08);
}

.merit-upload-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.merit-upload-illustration {
    position: relative;
    width: 168px;
    height: 108px;
}

.merit-upload-sheet {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 82px;
    height: 78px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f4ff 100%);
    transform: translateX(-50%);
    box-shadow: 0 16px 28px rgba(103, 95, 177, 0.12);
}

.merit-upload-sheet span {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: #e7e9fb;
    margin: 14px auto 0;
}

.merit-upload-sheet em {
    position: absolute;
    left: 12px;
    top: 30px;
    min-width: 32px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: #34c573;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
}

.merit-upload-folder {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 106px;
    height: 70px;
    border-radius: 10px 10px 14px 14px;
    background: linear-gradient(180deg, #9e7bff 0%, #7c52ff 100%);
    transform: translateX(-50%);
    box-shadow: 0 22px 30px rgba(108, 80, 238, 0.2);
}

.merit-upload-folder::before {
    content: "";
    position: absolute;
    left: 14px;
    top: -10px;
    width: 34px;
    height: 16px;
    border-radius: 8px 8px 0 0;
    background: #8d6aff;
}

.merit-upload-folder i {
    position: absolute;
    left: 50%;
    top: 22px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #6e43ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}

.merit-upload-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    transform: rotate(45deg);
    opacity: 0.95;
}

.merit-upload-spark.spark-a { top: 68px; left: 35%; background: #8a74ff; }
.merit-upload-spark.spark-b { top: 110px; left: 33%; background: #ffd45d; width: 4px; height: 4px; }
.merit-upload-spark.spark-c { top: 74px; right: 35%; background: #ff68c4; width: 5px; height: 5px; }
.merit-upload-spark.spark-d { top: 110px; right: 31%; background: #86e0a6; width: 6px; height: 6px; }

.merit-reservation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(290px, 0.82fr);
    gap: 14px;
    align-items: start;
}

.merit-reservation-side {
    display: grid;
    gap: 14px;
}

.merit-side-card {
    border: 1px solid #edf1fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 16px 16px 14px;
    box-shadow: 0 14px 34px rgba(42, 61, 118, 0.06);
}

.merit-side-card h3 {
    margin: 0 0 14px;
    color: #1d2e60;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

.merit-step-card-head-icon {
    display: flex;
    align-items: center;
    gap: 14px;
}

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

.merit-percent-field label {
    margin-bottom: 8px;
}

.merit-percent-input {
    display: grid;
    grid-template-columns: 18px 1fr 28px;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid #e4eafb;
    border-radius: 12px;
    background: #fff;
    padding: 0 10px 0 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.merit-percent-input i {
    font-size: 12px;
}

.merit-percent-input input {
    border: 0;
    background: transparent;
    min-height: auto;
    padding: 0;
    font-size: 17px;
    font-weight: 800;
    color: #263761;
}

.merit-percent-input span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f5f3fd;
    color: #8d96b0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.merit-percent-ur .merit-percent-input i { color: #6d40ff; }
.merit-percent-obc .merit-percent-input i { color: #3b82f6; }
.merit-percent-sc .merit-percent-input i { color: #22c55e; }
.merit-percent-st .merit-percent-input i { color: #f59e0b; }
.merit-percent-ph .merit-percent-input i { color: #ff55bf; }
.merit-percent-ff .merit-percent-input i { color: #8b5cf6; }

.merit-validity-card {
    margin-top: 18px;
    border: 1px solid #e5f2e9;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7fff9 0%, #fcfffd 100%);
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.merit-validity-copy {
    display: flex;
    align-items: center;
    gap: 12px;
}

.merit-validity-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #def7e7;
    color: #21a35f;
}

.merit-validity-copy strong,
.merit-validity-copy small {
    display: block;
}

.merit-validity-copy strong {
    color: #22a35e;
    font-size: 15px;
}

.merit-validity-copy small {
    margin-top: 4px;
    color: #72819c;
    font-size: 12px;
    font-weight: 700;
}

.merit-validity-total {
    min-width: 110px;
    padding-left: 20px;
    border-left: 1px solid #d9e9e0;
    text-align: right;
}

.merit-validity-total small,
.merit-validity-total strong {
    display: block;
}

.merit-validity-total small {
    color: #7d8ca4;
    font-size: 11px;
    font-weight: 800;
}

.merit-validity-total strong {
    margin-top: 4px;
    color: #4e42f2;
    font-family: "Montserrat", sans-serif;
    font-size: 34px;
    line-height: 1;
}

.merit-distribution-row {
    display: grid;
    grid-template-columns: 156px 1fr;
    gap: 18px;
    align-items: center;
}

.merit-distribution-chart {
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 53px, transparent 54px),
        conic-gradient(
            #5f3df5 0 calc(var(--ur) * 1%),
            #3b82f6 calc(var(--ur) * 1%) calc((var(--ur) + var(--obc)) * 1%),
            #4fc46a calc((var(--ur) + var(--obc)) * 1%) calc((var(--ur) + var(--obc) + var(--sc)) * 1%),
            #ff9800 calc((var(--ur) + var(--obc) + var(--sc)) * 1%) calc((var(--ur) + var(--obc) + var(--sc) + var(--st)) * 1%),
            #ff57bc calc((var(--ur) + var(--obc) + var(--sc) + var(--st)) * 1%) calc((var(--ur) + var(--obc) + var(--sc) + var(--st) + var(--ph)) * 1%),
            #8b5cf6 calc((var(--ur) + var(--obc) + var(--sc) + var(--st) + var(--ph)) * 1%) calc((var(--ur) + var(--obc) + var(--sc) + var(--st) + var(--ph) + var(--ff)) * 1%),
            #eceffd calc((var(--ur) + var(--obc) + var(--sc) + var(--st) + var(--ph) + var(--ff)) * 1%) 100%
        );
    display: grid;
    place-items: center;
    margin: 2px auto 0;
}

.merit-distribution-chart div {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: 0 8px 20px rgba(39, 50, 112, 0.08);
}

.merit-distribution-chart strong,
.merit-distribution-chart span {
    display: block;
}

.merit-distribution-chart strong {
    color: #1f2f61;
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    line-height: 1;
}

.merit-distribution-chart span {
    margin-top: 4px;
    color: #8b95ae;
    font-size: 12px;
    font-weight: 700;
}

.merit-distribution-list {
    display: grid;
    gap: 9px;
}

.merit-distribution-list div {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    color: #546682;
    font-size: 12px;
    font-weight: 700;
}

.merit-distribution-list b {
    color: #304268;
    font-weight: 800;
}

.merit-distribution-list strong {
    color: #22345f;
    font-weight: 800;
}

.merit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.merit-dot.ur { background: #5f3df5; }
.merit-dot.obc { background: #3b82f6; }
.merit-dot.sc { background: #4fc46a; }
.merit-dot.st { background: #ff9800; }
.merit-dot.ph { background: #ff57bc; }
.merit-dot.ff { background: #8b5cf6; }

.merit-quick-item,
.merit-quick-success {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.merit-quick-item + .merit-quick-item {
    border-top: 1px solid #edf1fb;
}

.merit-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.merit-quick-icon.purple { background: linear-gradient(135deg, #6138ff 0%, #7a51ff 100%); }
.merit-quick-icon.blue { background: linear-gradient(135deg, #3879ff 0%, #5b9aff 100%); }
.merit-quick-icon.green { background: linear-gradient(135deg, #21af62 0%, #44c876 100%); }

.merit-quick-item strong,
.merit-quick-item small,
.merit-quick-success strong,
.merit-quick-success small {
    display: block;
}

.merit-quick-item strong,
.merit-quick-success strong {
    color: #23345f;
    font-size: 13px;
}

.merit-quick-item small,
.merit-quick-success small {
    margin-top: 4px;
    color: #8190ab;
    font-size: 11px;
    font-weight: 700;
}

.merit-quick-item em {
    min-width: 54px;
    min-height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f0ebff 0%, #f7f4ff 100%);
    color: #6b43ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.merit-quick-success {
    margin-top: 12px;
    border: 1px solid #e2f4e9;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5fff8 0%, #fbfffd 100%);
    padding: 14px;
    grid-template-columns: auto 1fr;
    position: relative;
    overflow: hidden;
}

.merit-quick-success::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 54px;
    height: 34px;
    background:
        radial-gradient(circle at 10% 40%, rgba(139, 92, 246, 0.25) 0 2px, transparent 3px),
        radial-gradient(circle at 40% 20%, rgba(255, 153, 0, 0.22) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 50%, rgba(76, 201, 116, 0.22) 0 2px, transparent 3px),
        radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.2) 0 2px, transparent 3px),
        radial-gradient(circle at 55% 80%, rgba(255, 87, 188, 0.18) 0 2px, transparent 3px);
}

.merit-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.merit-step-actions-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}

.merit-step-actions > .session-tool-btn,
.merit-step-actions-right > .session-tool-btn,
.merit-step-actions-right > .admin-primary-btn {
    min-width: 108px;
    min-height: 40px;
    border-radius: 12px;
}

.merit-step-actions-right > .admin-primary-btn {
    min-width: 144px;
}

.merit-validation-card,
.merit-preview-card {
    margin-bottom: 18px;
}

.merit-category-blocks {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.merit-category-card {
    border: 1px solid #edf1fb;
    border-radius: 16px;
    background: #fbfcff;
    padding: 16px;
}

.merit-category-card h3 {
    margin: 0 0 12px;
    color: #1b2746;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

.merit-preview-table th,
.merit-preview-table td,
.merit-list-table th,
.merit-list-table td {
    white-space: nowrap;
}

.merit-list-table .subject-action-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.merit-list-table .subject-action-list form {
    margin: 0;
}

.merit-list-table .subject-action-list form .merit-action-btn {
    width: 100%;
}

.merit-list-table td:last-child {
    min-width: 240px;
}

.merit-action-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 12px 24px rgba(32, 49, 101, 0.12);
    position: relative;
    overflow: hidden;
}

.merit-action-btn i {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.28);
}

.merit-action-view {
    background: linear-gradient(135deg, #e8f3ff 0%, #cfe5ff 100%);
    border-color: #bfdcff;
    color: #145bca;
}

.merit-action-edit {
    background: linear-gradient(135deg, #fff0d9 0%, #ffd59a 100%);
    border-color: #ffc774;
    color: #9a5400;
}

.merit-action-delete {
    background: linear-gradient(135deg, #ffe7eb 0%, #ffc5cf 100%);
    border-color: #ffb0bd;
    color: #c93556;
}

.merit-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(32, 49, 101, 0.16);
    filter: saturate(1.05);
}

.merit-action-btn:focus-visible {
    outline: 2px solid rgba(36, 92, 255, 0.24);
    outline-offset: 2px;
}

@media (max-width: 1100px) {
    .merit-module-page .subject-filter-grid,
    .merit-reservation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merit-stepper {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .merit-step-btn::after {
        display: none;
    }

    .merit-reservation-layout {
        grid-template-columns: 1fr;
    }

    .merit-basics-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .merit-module-page .subject-filter-grid,
    .merit-reservation-grid {
        grid-template-columns: 1fr;
    }

    .merit-basics-grid {
        grid-template-columns: 1fr;
    }

    .merit-step-actions,
    .merit-step-actions-right {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .merit-hero-card,
    .merit-distribution-row {
        flex-direction: column;
        align-items: stretch;
    }

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

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Mulish", sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f5f8fe 0%, #eef4fb 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
}

button,
input {
    font: inherit;
}

.container {
    width: min(calc(100% - 32px), var(--container));
    margin: 0 auto;
}

.section-space {
    padding: 72px 0;
}

.page-shell {
    overflow: hidden;
}

.topbar {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

.site-header {
    background: linear-gradient(90deg, #0a2150 0%, #0b2c63 100%);
}

.topbar-left,
.topbar-right,
.socials,
.nav-menu,
.nav-actions,
.hero-actions,
.footer-bottom-row,
.testimonial-user,
.info-box-head {
    display: flex;
    align-items: center;
}

.topbar-left,
.topbar-right {
    gap: 18px;
}

.topbar-left span,
.sidebar-contact span,
.contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.socials {
    gap: 8px;
}

.socials a {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.navbar-wrap {
    background: #fff;
    box-shadow: 0 12px 35px rgba(12, 40, 83, 0.08);
}

.navbar {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    letter-spacing: 0.04em;
}

.brand small {
    display: block;
    color: #d89424;
    font-size: 11px;
    margin-top: 2px;
    letter-spacing: 0.06em;
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--primary) 0%, #1d78d6 100%);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 12px 24px rgba(15, 76, 151, 0.28);
}

.nav-menu {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-menu a,
.nav-dropdown > a {
    font-size: 14px;
    font-weight: 700;
    color: #243a60;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e5edf8;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(13, 42, 85, 0.14);
    padding: 10px;
    display: grid;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 15;
}

.dropdown-menu a {
    padding: 11px 14px;
    border-radius: 12px;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu a.active,
.nav-menu a:hover,
.topbar-right a:hover,
.footer-bottom a:hover,
.site-footer a:hover,
.sidebar-nav a:hover,
.sidebar-nav a.active {
    color: #1d73d5;
}

.apply-btn,
.primary-btn,
.secondary-btn,
.newsletter-form button {
    border-radius: 12px;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.apply-btn,
.primary-btn,
.newsletter-form button {
    background: linear-gradient(135deg, #2a7de0 0%, var(--primary) 100%);
    color: #fff;
    box-shadow: 0 16px 26px rgba(15, 76, 151, 0.26);
}

.apply-btn {
    padding: 14px 20px;
    font-size: 14px;
}

.apply-btn.full {
    width: 100%;
    text-align: center;
}

.menu-toggle,
.hero-arrow,
.sidebar-close {
    border: 0;
    cursor: pointer;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf2fe;
    color: var(--primary);
    font-size: 18px;
}

.hero {
    position: relative;
    min-height: 590px;
    background:
        linear-gradient(90deg, rgba(7, 36, 83, 0.82) 0%, rgba(8, 40, 92, 0.56) 38%, rgba(10, 44, 98, 0.16) 100%),
        url('https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

.hero-content {
    position: relative;
    z-index: 1;
    min-height: 590px;
    display: flex;
    align-items: center;
}

.hero-copy {
    max-width: 560px;
    color: #fff;
}

.eyebrow,
.section-tag {
    display: inline-block;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    font-weight: 800;
}

.hero h1,
.section-head h2 {
    font-family: "Montserrat", sans-serif;
    margin: 16px 0 14px;
}

.hero h1 {
    font-size: clamp(40px, 6vw, 58px);
    line-height: 1.05;
}

.hero p {
    max-width: 500px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
    margin-bottom: 28px;
}

.hero-actions {
    gap: 14px;
    flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
    padding: 15px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.secondary-btn {
    background: #fff;
    color: var(--text);
}

.small {
    padding: 13px 22px;
    font-size: 14px;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(10px);
}

.hero-arrow-left {
    left: 18px;
}

.hero-arrow-right {
    right: 18px;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: -42px;
    position: relative;
    z-index: 3;
}

.feature-card,
.course-card,
.info-box,
.testimonial-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.feature-card {
    padding: 24px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.feature-icon,
.course-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.feature-icon.blue,
.course-icon {
    background: #e8f1ff;
    color: #2a7de0;
}

.feature-icon.green {
    background: #e7f8ef;
    color: #14a05b;
}

.feature-icon.purple {
    background: #efeafe;
    color: #7d4dd8;
}

.feature-icon.orange {
    background: #fff3e4;
    color: #ee9624;
}

.feature-card h3,
.course-card h3,
.info-box h3,
.site-footer h4,
.testimonial-card strong {
    margin: 0 0 8px;
    font-family: "Montserrat", sans-serif;
}

.feature-card p,
.course-card p,
.section-head p,
.site-footer p,
.testimonial-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.section-head {
    max-width: 720px;
    margin-bottom: 36px;
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.section-tag {
    background: rgba(42, 125, 224, 0.08);
    color: var(--primary);
}

.section-head h2 {
    font-size: clamp(30px, 4vw, 42px);
    color: #16345d;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.course-card {
    overflow: hidden;
}

.course-card img {
    height: 160px;
    object-fit: cover;
}

.course-body {
    padding: 20px 18px 22px;
}

.course-icon {
    margin-bottom: 16px;
}

.course-body a,
.info-box-head a,
.news-copy small,
.event-copy small,
.notice-copy small,
.testimonial-user small,
.footer-bottom a {
    color: #2a7de0;
}

.course-body a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-weight: 800;
}

.view-more-wrap {
    text-align: center;
    margin-top: 28px;
}

.about-showcase-section {
    padding: 18px 0 26px;
    background: linear-gradient(180deg, #f5f8ff 0%, #eef4ff 100%);
}

.about-glance-hero .container,
.about-showcase-section .container {
    width: calc(100% - 40px);
    max-width: 1360px;
}

.about-glance-hero {
    position: relative;
    padding: 28px 0 20px;
    background-position: center;
    background-size: cover;
    color: #fff;
    overflow: hidden;
}

.about-glance-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at right center, rgba(255, 255, 255, 0.08), transparent 26%),
        linear-gradient(90deg, rgba(10, 33, 80, 0.96) 0%, rgba(10, 33, 80, 0.9) 48%, rgba(10, 33, 80, 0.84) 100%);
}

.about-glance-hero .container {
    position: relative;
    z-index: 1;
}

.about-glance-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.about-glance-hero h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    font-family: "Montserrat", sans-serif;
    color: #fff;
}

.about-glance-accent {
    display: block;
    width: 76px;
    height: 3px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8c24 0%, #ff6e11 100%);
}

.about-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
}

.about-breadcrumb a,
.about-breadcrumb span {
    color: rgba(255, 255, 255, 0.82);
}

.about-breadcrumb strong {
    color: #ffad33;
    font-weight: 800;
}

.about-showcase-card,
.about-fact-strip,
.about-stat-card {
    background: #fff;
    box-shadow: 0 16px 36px rgba(17, 44, 92, 0.08);
}

.about-showcase-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.98fr);
    gap: 22px;
    padding: 22px 20px 16px;
    border-radius: 18px;
    border: 1px solid #e4ebf8;
}

.about-showcase-copy {
    display: grid;
    gap: 14px;
}

.about-showcase-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-showcase-heading h2 {
    margin: 0;
    font-size: 22px;
    color: #16346d;
}

.about-showcase-heading-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ff8c24 0%, #ff6e11 100%);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 12px 22px rgba(255, 122, 24, 0.24);
}

.about-showcase-copy p {
    margin: 0;
    color: #31486e;
    line-height: 1.55;
    font-size: 13px;
}

.about-showcase-media {
    position: relative;
    padding-top: 6px;
    padding-right: 26px;
}

.about-showcase-photo {
    width: 100%;
    min-height: 320px;
    border-radius: 16px;
    border: 1px solid #e5ebf7;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.about-showcase-dots {
    position: absolute;
    right: 0;
    bottom: 12px;
    width: 18px;
    height: 92px;
    background-image: radial-gradient(circle, #ff8c24 1.8px, transparent 2px);
    background-size: 9px 12px;
    background-repeat: repeat-y;
}

.about-stat-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e3eaf7;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 44, 92, 0.06);
}

.about-stat-card {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 1px solid #e8eef8;
}

.about-stat-card:last-child {
    border-right: 0;
}

.about-stat-icon,
.about-fact-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 17px;
}

.about-stat-icon.blue {
    background: #0f2f67;
    color: #fff;
}

.about-stat-icon.orange,
.about-fact-icon {
    background: linear-gradient(180deg, #ff8c24 0%, #ff6e11 100%);
    color: #fff;
}

.about-stat-card strong {
    display: block;
    color: #17335f;
    font-size: 22px;
    line-height: 1;
}

.about-stat-card small,
.about-fact-tile small {
    display: block;
    margin-top: 5px;
    color: #5f7197;
    line-height: 1.4;
    font-size: 11px;
}

.about-fact-strip {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border-radius: 16px;
    border: 1px solid #e3eaf7;
}

.about-fact-tile {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px 12px;
    border-right: 1px solid #e8eef8;
}

.about-fact-tile:last-child {
    border-right: 0;
}

.about-fact-tile strong {
    display: block;
    color: #183664;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.35;
}

.principal-message-section {
    margin-top: 24px;
}

.principal-message-card {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #e4ebf8;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: 0 16px 36px rgba(17, 44, 92, 0.08);
}

.principal-profile-card {
    position: relative;
    padding: 24px 24px 28px;
    background: linear-gradient(180deg, #183d79 0%, #112c5f 100%);
    color: #fff;
}

.principal-profile-card::before,
.principal-profile-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 18px solid rgba(255, 168, 45, 0.9);
    width: 180px;
    height: 180px;
    pointer-events: none;
}

.principal-profile-card::before {
    left: -112px;
    top: 96px;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.principal-profile-card::after {
    right: -116px;
    top: 102px;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.principal-profile-photo-wrap {
    position: relative;
    z-index: 1;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(7, 24, 54, 0.22);
}

.principal-profile-photo {
    display: block;
    width: 100%;
    height: 255px;
    object-fit: cover;
    object-position: left top;
    border-radius: 12px;
}

.principal-profile-copy {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    text-align: center;
}

.principal-profile-copy h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
}

.principal-profile-copy strong {
    display: block;
    margin-top: 8px;
    color: #ffbe45;
    font-size: 16px;
}

.principal-divider {
    display: inline-block;
    width: 130px;
    height: 2px;
    margin-top: 18px;
    background: linear-gradient(90deg, transparent 0%, #ffbe45 20%, #ffbe45 80%, transparent 100%);
    position: relative;
}

.principal-divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #183d79;
    border: 2px solid #ffbe45;
    transform: translate(-50%, -50%) rotate(45deg);
}

.principal-message-copy {
    position: relative;
    padding: 30px 34px 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 245, 0.98) 100%);
}

.principal-message-copy::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 86px;
    height: 126px;
    opacity: 0.14;
    background:
        radial-gradient(circle at 50% 8%, #efb34c 6px, transparent 7px),
        linear-gradient(#efb34c, #efb34c) 50% 18px / 2px 74px no-repeat,
        linear-gradient(135deg, transparent 46%, #efb34c 47%, #efb34c 53%, transparent 54%) 0 74px / 100% 46px no-repeat,
        radial-gradient(circle at 50% 100%, transparent 22px, #efb34c 22px, #efb34c 24px, transparent 24px);
    pointer-events: none;
}

.principal-message-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.principal-quote-icon,
.principal-sign-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.principal-quote-icon {
    background: #183d79;
    color: #fff;
    font-size: 18px;
}

.principal-message-head h2 {
    margin: 0;
    color: #15396f;
    font-size: 24px;
    line-height: 1.2;
}

.principal-message-head em {
    font-family: "Mulish", sans-serif;
    font-style: italic;
    font-weight: 800;
    color: #1a4f9a;
}

.principal-head-accent {
    display: block;
    width: 52px;
    height: 10px;
    margin: 10px 0 18px 82px;
    background:
        radial-gradient(circle, #f3a125 2px, transparent 2px) 0 50% / 12px 12px repeat-x;
}

.principal-message-copy p {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    color: #354a6f;
    font-size: 14px;
    line-height: 1.7;
}

.principal-signoff {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    align-items: center;
}

.principal-sign-icon {
    background: #fff;
    color: #eda129;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(237, 161, 41, 0.18);
}

.principal-signature {
    font-family: "Mulish", sans-serif;
    font-size: 30px;
    font-style: italic;
    color: #1f4d93;
    line-height: 1;
}

.principal-signoff strong {
    display: block;
    margin-top: 8px;
    color: #173d78;
    font-size: 16px;
}

.principal-signoff small {
    display: block;
    margin-top: 4px;
    color: #687d9f;
    font-size: 14px;
}

.notification-page-section {
    padding: 22px 0 34px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 185, 78, 0.12), transparent 18%), linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.notification-page-shell {
    width: calc(100% - 20px);
    max-width: none;
}

.notification-page-head h1 {
    margin: 0 0 18px;
    color: #173b77;
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.notification-board {
    background: #fff;
    border: 1px solid #e6edf9;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(17, 44, 92, 0.08);
    padding: 12px 12px 6px;
}

.notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.notification-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.notification-filter-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid #dfe7f5;
    background: #fff;
    color: #23406f;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.notification-filter-btn:hover {
    transform: translateY(-1px);
}

.notification-filter-btn i {
    font-size: 13px;
}

.notification-filter-btn.active.blue {
    background: linear-gradient(180deg, #3f81ff 0%, #2f67e4 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(48, 104, 229, 0.24);
}

.notification-filter-btn.active.violet {
    background: linear-gradient(180deg, #836dff 0%, #644bff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(100, 75, 255, 0.24);
}

.notification-filter-btn.active.amber {
    background: linear-gradient(180deg, #ffbf5a 0%, #ee9f20 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(238, 159, 32, 0.24);
}

.notification-filter-btn.active.sky {
    background: linear-gradient(180deg, #63a4ff 0%, #367dff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(54, 125, 255, 0.24);
}

.notification-filter-btn.active.pink {
    background: linear-gradient(180deg, #ff72aa 0%, #ff3e86 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(255, 62, 134, 0.24);
}

.notification-filter-btn.active.purple {
    background: linear-gradient(180deg, #8c7cff 0%, #705cff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(112, 92, 255, 0.24);
}

.notification-filter-btn.active.green {
    background: linear-gradient(180deg, #41bc68 0%, #239245 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(35, 146, 69, 0.24);
}

.notification-filter-btn.active.rose {
    background: linear-gradient(180deg, #ff7f95 0%, #f25473 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(242, 84, 115, 0.24);
}

.notification-filter-btn.active.slate {
    background: linear-gradient(180deg, #8e9bb8 0%, #65748f 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(101, 116, 143, 0.24);
}

.notification-filter-btn.violet i { color: #6f57ff; }
.notification-filter-btn.green i { color: #2ca44f; }
.notification-filter-btn.amber i { color: #f0a22f; }
.notification-filter-btn.pink i { color: #ff3e86; }
.notification-filter-btn.sky i { color: #4c85ff; }
.notification-filter-btn.purple i { color: #705cff; }
.notification-filter-btn.rose i { color: #f25473; }
.notification-filter-btn.slate i { color: #7a86a5; }
.notification-filter-btn.active i { color: #fff; }

.notification-search {
    position: relative;
    width: min(100%, 230px);
}

.notification-search input {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #dfe7f5;
    padding: 0 34px 0 12px;
    color: #30466b;
    background: #fff;
    font-size: 12px;
}

.notification-search i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #5d72a0;
    font-size: 13px;
}

.notification-table-wrap {
    overflow-x: auto;
    border: 1px solid #e7edf8;
    border-radius: 10px;
}

.notification-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.notification-table th,
.notification-table td {
    border-right: 1px solid #e7edf8;
}

.notification-table th:last-child,
.notification-table td:last-child {
    border-right: 0;
}

.notification-table thead th {
    padding: 14px 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(90deg, #0a63ff 0%, #2e34cb 100%);
}

.notification-table thead th.col-sr {
    width: 80px;
}

.notification-table thead th.col-title {
    text-align: left;
}

.notification-table thead th.col-category {
    width: 180px;
}

.notification-table thead th.col-date {
    width: 185px;
}

.notification-table thead th.col-actions {
    width: 160px;
}

.notification-table tbody td {
    padding: 12px 16px;
    background: #fff;
    vertical-align: middle;
    color: #28406c;
    font-size: 13px;
}

.notification-table tbody tr + tr td {
    border-top: 1px solid #edf2fb;
}

.notification-sr {
    text-align: center;
    font-weight: 700;
}

.notification-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.notification-title-line strong {
    color: #2644a7;
    font-size: 14px;
}

.notification-table tbody td small {
    color: #5c6f92;
    font-size: 12px;
}

.notification-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff2d2d;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

.notification-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.notification-category-badge.rose { background: #ffe9ec; color: #ff4b5c; }
.notification-category-badge.blue { background: #e8f1ff; color: #3378ea; }
.notification-category-badge.green { background: #e8f8ea; color: #38a54d; }
.notification-category-badge.purple { background: #f1eaff; color: #7452df; }
.notification-category-badge.amber { background: #fff1df; color: #ef9729; }
.notification-category-badge.orange { background: #fff0df; color: #f08e12; }
.notification-category-badge.cyan { background: #e8f9ff; color: #30a6d6; }
.notification-category-badge.pink { background: #ffe9f6; color: #f15ac3; }

.notification-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #30456c;
    font-weight: 500;
}

.notification-date i {
    color: #385ea8;
}

.notification-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.notification-actions a {
    color: #1f6bff;
    font-size: 15px;
}

.notification-action-divider {
    width: 1px;
    height: 20px;
    background: #dce5f4;
}

.notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 4px 0;
}

.notification-footer p {
    margin: 0;
    color: #5d7194;
    font-size: 12px;
}

.notification-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-pagination a,
.notification-pagination span {
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #dfe7f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #27416d;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
}

.notification-pagination a.active {
    background: linear-gradient(180deg, #173d79 0%, #102e60 100%);
    border-color: transparent;
    color: #fff;
}

.rules-page-section {
    padding: 22px 0 40px;
    background: radial-gradient(circle at 85% 0%, rgba(255, 190, 95, 0.16), transparent 18%), linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
}

.rules-page-shell {
    width: calc(100% - 10px);
    max-width: none;
}

.rules-hero {
    min-height: 280px;
    padding: 34px 36px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 18px;
    box-shadow: 0 24px 54px rgba(10, 35, 81, 0.2);
}

.rules-hero-copy {
    max-width: 760px;
}

.rules-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rules-hero h1 {
    margin: 14px 0 12px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    font-family: "Montserrat", sans-serif;
}

.rules-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.8;
}

.rules-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 700;
}

.rules-breadcrumb strong {
    color: #fff;
}

.rules-board {
    margin-top: 18px;
    padding: 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e3ecfa;
    box-shadow: 0 18px 42px rgba(17, 44, 92, 0.08);
}

.rules-board-head {
    margin-bottom: 24px;
}

.rules-board-head h2 {
    margin: 10px 0 12px;
    color: #173b77;
    font-size: 28px;
    font-family: "Montserrat", sans-serif;
}

.rules-board-head p {
    margin: 0;
    max-width: 780px;
    color: #5f7297;
    line-height: 1.8;
}

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

.rules-card {
    padding: 24px 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e2ebfa;
}

.rules-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.rules-card-icon,
.rules-alert-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.rules-card-icon {
    background: linear-gradient(180deg, #e9f2ff 0%, #dae8ff 100%);
    color: #295eb7;
}

.rules-card-head h3,
.rules-alert-head h3 {
    margin: 0;
    color: #173b77;
    font-size: 20px;
    font-family: "Noto Sans Devanagari", "Mulish", sans-serif;
    line-height: 1.4;
}

.rules-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 12px;
    color: #334b70;
    font-family: "Noto Sans Devanagari", "Mulish", sans-serif;
    line-height: 1.85;
}

.rules-list li::marker {
    color: #ff7a18;
}

.rules-alert-card {
    margin-top: 20px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff7f1 0%, #fffdfb 100%);
    border: 1px solid #ffd8c0;
}

.rules-alert-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.rules-alert-icon {
    background: linear-gradient(180deg, #fff0e6 0%, #ffe3d4 100%);
    color: #df611a;
}

.rules-alert-card p {
    margin: 0;
    color: #604e46;
    font-family: "Noto Sans Devanagari", "Mulish", sans-serif;
    line-height: 1.9;
}

.rules-alert-card p + p {
    margin-top: 12px;
}

@media (max-width: 860px) {
    .rules-hero {
        padding: 26px 22px;
        min-height: 240px;
    }

    .rules-board {
        padding: 20px;
    }

    .rules-grid {
        grid-template-columns: 1fr;
    }
}

.contact-page-section {
    padding: 0 0 36px;
    background: radial-gradient(circle at 20% 0%, rgba(255, 172, 67, 0.12), transparent 18%), linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%);
}

.contact-page-shell {
    width: calc(100% - 10px);
    max-width: none;
}

.contact-summary-card,
.contact-map-card,
.contact-info-card {
    background: #fff;
    border: 1px solid #e5edf8;
    box-shadow: 0 18px 40px rgba(17, 44, 92, 0.08);
}

.contact-page-hero {
    position: relative;
    min-height: 172px;
    margin-bottom: 20px;
    padding: 30px 28px;
    border-radius: 0 0 18px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

.contact-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at left top, rgba(124, 71, 255, 0.28), transparent 22%),
        linear-gradient(90deg, rgba(37, 36, 150, 0.78) 0%, rgba(23, 50, 120, 0.78) 22%, rgba(18, 43, 98, 0.84) 100%);
}

.contact-page-hero-copy,
.contact-page-breadcrumb {
    position: relative;
    z-index: 1;
}

.contact-page-hero-copy {
    max-width: 480px;
    color: #fff;
}

.contact-page-hero-copy h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
}

.contact-page-accent {
    display: block;
    width: 76px;
    height: 10px;
    margin: 12px 0 14px;
    background:
        linear-gradient(90deg, #ffc341 0%, #ff9a2b 38%, transparent 38%, transparent 52%, #ffffff 52%, #ffffff 68%, transparent 68%);
}

.contact-page-hero-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.7;
}

.contact-page-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
}

.contact-page-breadcrumb a,
.contact-page-breadcrumb span {
    color: rgba(255, 255, 255, 0.82);
}

.contact-page-breadcrumb strong {
    color: #ffad33;
    font-weight: 800;
}

.contact-map-btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ff8c24 0%, #ff6e11 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(255, 122, 24, 0.22);
}

.contact-card-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.contact-info-card {
    padding: 22px 20px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(180deg, #173d79 0%, #0f2d60 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.contact-info-copy h3 {
    margin: 0 0 8px;
    color: #173d79;
    font-size: 18px;
}

.contact-info-copy p,
.contact-info-copy a {
    margin: 0;
    color: #566d95;
    line-height: 1.7;
    font-size: 14px;
}

.contact-summary-card {
    margin-top: 22px;
    border-radius: 18px;
    padding: 24px 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 26px;
}

.contact-summary-tag {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(23, 61, 121, 0.08);
    color: #173d79;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.contact-summary-card h2 {
    margin: 14px 0 10px;
    color: #173d79;
    font-size: 26px;
}

.contact-summary-card p {
    margin: 0;
    color: #576e96;
    line-height: 1.8;
}

.contact-summary-copy {
    display: grid;
    gap: 16px;
    align-content: start;
}

.contact-summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.contact-summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #27436d;
    line-height: 1.6;
}

.contact-summary-list i {
    color: #ff7c1c;
    margin-top: 3px;
}

.contact-map-card {
    margin-top: 22px;
    border-radius: 18px;
    padding: 22px 22px 18px;
}

.contact-map-head h2 {
    margin: 0 0 8px;
    color: #173d79;
    font-size: 24px;
}

.contact-map-head p {
    margin: 0 0 18px;
    color: #576e96;
    line-height: 1.7;
}

.contact-map-frame {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e5edf8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.contact-map-frame iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.gallery-page-section {
    padding: 0 0 28px;
    background: linear-gradient(180deg, #f9fbff 0%, #f2f6fe 100%);
}

.gallery-page-shell {
    width: calc(102% - 20px);
    max-width: none;
}

.gallery-hero {
    position: relative;
    min-height: 164px;
    margin-bottom: 12px;
    padding: 30px 28px;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background-position: center;
    background-size: cover;
}

.gallery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at left top, rgba(124, 71, 255, 0.28), transparent 22%),
        linear-gradient(90deg, rgba(37, 36, 150, 0.78) 0%, rgba(23, 50, 120, 0.78) 22%, rgba(18, 43, 98, 0.84) 100%);
}

.gallery-hero-copy,
.gallery-hero-stack {
    position: relative;
    z-index: 1;
}

.gallery-hero-copy {
    max-width: 360px;
    color: #fff;
}

.gallery-hero-copy h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.05;
}

.gallery-hero-accent {
    display: block;
    width: 70px;
    height: 10px;
    margin: 12px 0 12px;
    background:
        linear-gradient(90deg, #ffc341 0%, #ff9a2b 38%, transparent 38%, transparent 52%, #ffffff 52%, #ffffff 68%, transparent 68%);
}

.gallery-hero-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    font-size: 13px;
}

.gallery-hero-stack {
    width: 166px;
    height: 104px;
    position: relative;
    flex: 0 0 auto;
}

.gallery-stack-card {
    position: absolute;
    display: block;
    width: 88px;
    height: 64px;
    border-radius: 10px;
    border: 5px solid #fff;
    box-shadow: 0 14px 24px rgba(7, 24, 54, 0.22);
    background-size: cover;
    background-position: center;
}

.gallery-stack-card.back {
    right: 2px;
    top: 20px;
    transform: rotate(12deg);
    background-image: linear-gradient(135deg, #ffb33a 0%, #ff7d1e 100%);
}

.gallery-stack-card.middle {
    right: 22px;
    top: 12px;
    transform: rotate(6deg);
    background-image: url('assets/img/about/about-college-main.png');
}

.gallery-stack-card.front {
    right: 44px;
    top: -2px;
    transform: rotate(-2deg);
    background-image: url('assets/img/about/about-college-main.png');
}

.gallery-board {
    padding: 18px 20px 14px;
    border-radius: 18px;
    border: 1px solid #e5edf8;
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 44, 92, 0.08);
}

.gallery-options {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gallery-option-btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #dfe7f5;
    background: #fff;
    color: #27416d;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.gallery-option-btn i {
    color: #245dcb;
}

.gallery-option-btn.active {
    background: linear-gradient(180deg, #173d79 0%, #112d60 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(17, 45, 96, 0.2);
}

.gallery-option-btn.active i {
    color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.gallery-card {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e8eef8;
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 44, 92, 0.05);
}

.gallery-card-image {
    height: 114px;
    background-position: center;
    background-size: cover;
}

.gallery-card-body {
    padding: 10px 12px 11px;
}

.gallery-card-body h3 {
    margin: 0 0 8px;
    color: #243f75;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.gallery-card-date {
    display: inline-block;
    padding-left: 10px;
    border-left: 3px solid #7e8ff6;
    color: #7788ab;
    font-size: 11px;
}

.gallery-card-date.rose { border-left-color: #ff5b9d; }
.gallery-card-date.sky { border-left-color: #4a8fff; }
.gallery-card-date.green { border-left-color: #39b568; }
.gallery-card-date.orange { border-left-color: #ff8a1f; }
.gallery-card-date.pink { border-left-color: #d64cff; }
.gallery-card-date.cyan { border-left-color: #44c8f5; }
.gallery-card-date.magenta { border-left-color: #ff2d89; }
.gallery-card-date.amber { border-left-color: #ffaf2d; }
.gallery-card-date.blue { border-left-color: #4f7fff; }

.gallery-pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gallery-pagination a,
.gallery-pagination span {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid #dde6f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #27416d;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
}

.gallery-pagination a.active {
    background: linear-gradient(180deg, #173d79 0%, #112d60 100%);
    border-color: transparent;
    color: #fff;
}

.staff-page-section {
    padding: 0 0 34px;
    background: linear-gradient(180deg, #f9fbff 0%, #f2f6fe 100%);
}

.staff-page-shell {
    width: calc(100% - 20px);
    max-width: none;
}

.staff-hero {
    position: relative;
    min-height: 128px;
    margin-bottom: 14px;
    padding: 22px 28px;
    border-radius: 0;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.staff-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at right center, rgba(255, 255, 255, 0.08), transparent 26%),
        linear-gradient(90deg, rgba(14, 40, 97, 0.94) 0%, rgba(20, 52, 117, 0.78) 48%, rgba(17, 41, 97, 0.92) 100%);
}

.staff-hero-copy {
    position: relative;
    z-index: 1;
    color: #fff;
}

.staff-hero-copy h1 {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.08;
}

.staff-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 600;
}

.staff-breadcrumb a,
.staff-breadcrumb span {
    color: rgba(255, 255, 255, 0.82);
}

.staff-breadcrumb strong {
    color: #fff;
    font-weight: 800;
}

.staff-board {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e5edf8;
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 44, 92, 0.08);
}

.staff-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.staff-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.staff-tab-btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid #e2e9f6;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #29426c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.staff-tab-btn i { font-size: 13px; }
.staff-tab-btn.blue i { color: #2d63d8; }
.staff-tab-btn.green i { color: #22a85d; }
.staff-tab-btn.orange i { color: #f08d1a; }

.staff-tab-btn.active {
    background: linear-gradient(180deg, #173d79 0%, #112d60 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px rgba(17, 45, 96, 0.18);
}

.staff-tab-btn.active i { color: #fff; }

.staff-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-search {
    display: flex;
    align-items: center;
    min-width: 380px;
    border: 1px solid #dfe7f5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.staff-search input {
    width: 100%;
    height: 34px;
    border: 0;
    padding: 0 12px;
    color: #30466b;
    font-size: 12px;
}

.staff-search button,
.staff-filter-btn {
    height: 34px;
    border: 0;
    cursor: pointer;
}

.staff-search button {
    width: 42px;
    background: linear-gradient(180deg, #173d79 0%, #112d60 100%);
    color: #fff;
}

.staff-filter-btn {
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid #dfe7f5;
    background: #fff;
    color: #28416b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

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

.staff-card {
    position: relative;
    border-radius: 14px;
    border: 1px solid #e6edf8;
    background: #fff;
    box-shadow: 0 12px 26px rgba(17, 44, 92, 0.07);
    padding: 12px 12px 10px;
}

.staff-card-head {
    position: relative;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    align-items: start;
}

.staff-card-corner {
    position: absolute;
    left: -12px;
    top: -12px;
    width: 20px;
    height: 20px;
    border-radius: 10px 0 10px 0;
}

.staff-card-corner.blue { background: linear-gradient(180deg, #4a87ff 0%, #2960d5 100%); }
.staff-card-corner.mint { background: linear-gradient(180deg, #77e3c1 0%, #39b58e 100%); }
.staff-card-corner.teal { background: linear-gradient(180deg, #7ee6da 0%, #35b7ab 100%); }
.staff-card-corner.violet { background: linear-gradient(180deg, #d7c7ff 0%, #a78bf7 100%); }
.staff-card-corner.amber { background: linear-gradient(180deg, #ffd069 0%, #ffad34 100%); }
.staff-card-corner.green { background: linear-gradient(180deg, #8bf1b0 0%, #45bc71 100%); }
.staff-card-corner.pink { background: linear-gradient(180deg, #ff9fd1 0%, #ff5fa8 100%); }
.staff-card-corner.slate { background: linear-gradient(180deg, #dce4ef 0%, #b7c6d8 100%); }

.staff-photo {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    background-position: center;
    background-size: cover;
    border: 1px solid #e6edf8;
}

.staff-card-copy h3 {
    margin: 6px 0 8px;
    color: #1d3563;
    font-size: 13px;
    line-height: 1.35;
}

.staff-card-copy strong {
    display: block;
    color: #2f66d7;
    font-size: 12px;
    font-weight: 700;
}

.staff-card-copy p {
    margin: 5px 0 0;
    color: #2a4472;
    font-size: 12px;
    font-weight: 600;
}

.staff-meta-list {
    margin: 12px 0 14px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.staff-meta-list li {
    display: grid;
    grid-template-columns: 14px 78px 1fr;
    align-items: center;
    gap: 8px;
    color: #29426c;
    font-size: 11px;
}

.staff-meta-list i {
    color: #173d79;
    font-size: 11px;
}

.staff-meta-list span {
    color: #1c3765;
    font-weight: 700;
}

.staff-meta-list em {
    color: #4f6791;
    font-style: normal;
}

.staff-profile-btn {
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(180deg, #173d79 0%, #112d60 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.staff-pagination {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.staff-pagination a,
.staff-pagination span {
    min-width: 30px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #dfe7f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #27416d;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
}

.staff-pagination a.active {
    background: linear-gradient(180deg, #173d79 0%, #112d60 100%);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 1200px) {
    .about-stat-grid,
    .about-fact-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .about-stat-card:nth-child(3),
    .about-fact-tile:nth-child(3) {
        border-right: 0;
    }
    .principal-message-card {
        grid-template-columns: 300px minmax(0, 1fr);
    }
    .notification-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .notification-search {
        width: 100%;
        max-width: none;
    }
    .contact-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .staff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .staff-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .staff-tools {
        justify-content: space-between;
    }
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .about-glance-hero-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .about-showcase-card {
        grid-template-columns: 1fr;
    }
    .about-showcase-media {
        padding-right: 0;
    }
    .about-showcase-photo {
        min-height: 320px;
    }
    .about-showcase-dots {
        display: none;
    }
    .principal-message-card {
        grid-template-columns: 1fr;
    }
    .notification-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-page-hero,
    .contact-summary-card {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-map-frame iframe {
        height: 340px;
    }
    .staff-tools {
        flex-direction: column;
        align-items: stretch;
    }
    .staff-search {
        min-width: 0;
    }
    .gallery-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .gallery-options {
        gap: 10px;
    }
    .contact-card-grid {
        grid-template-columns: 1fr;
    }
    .staff-grid {
        grid-template-columns: 1fr;
    }
    .about-stat-grid,
    .about-fact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-stat-card,
    .about-fact-tile {
        border-right: 1px solid #e8eef8;
        border-bottom: 1px solid #e8eef8;
    }
    .about-stat-card:nth-child(2n),
    .about-fact-tile:nth-child(2n) {
        border-right: 0;
    }
    .about-stat-card:nth-last-child(-n + 2),
    .about-fact-tile:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
    .principal-profile-card::before,
    .principal-profile-card::after,
    .principal-message-copy::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .about-glance-hero {
        padding: 24px 0 18px;
    }
    .about-breadcrumb {
        font-size: 12px;
        gap: 8px;
    }
    .about-showcase-card {
        padding: 16px;
        gap: 20px;
    }
    .about-showcase-heading {
        align-items: flex-start;
    }
    .about-showcase-heading h2 {
        font-size: 24px;
    }
    .about-stat-grid,
    .about-fact-strip {
        grid-template-columns: 1fr;
    }
    .about-stat-card,
    .about-fact-tile {
        border-right: 0;
    }
    .about-stat-card:not(:last-child),
    .about-fact-tile:not(:last-child) {
        border-bottom: 1px solid #e8eef8;
    }
    .principal-profile-card,
    .principal-message-copy {
        padding: 18px;
    }
    .principal-signoff {
        grid-template-columns: 1fr;
    }
    .principal-message-head h2 {
        font-size: 20px;
    }
    .principal-head-accent {
        margin-left: 0;
    }
    .notification-page-shell {
        width: calc(100% - 12px);
    }
    .notification-board {
        padding: 10px 10px 6px;
    }
    .contact-page-shell {
        width: calc(100% - 12px);
    }
    .staff-page-shell {
        width: calc(100% - 12px);
    }
    .gallery-page-shell {
        width: calc(100% - 12px);
    }
    .gallery-board {
        padding: 12px;
    }
    .gallery-option-btn {
        width: 100%;
        justify-content: center;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .gallery-hero {
        padding: 22px 16px;
        border-radius: 0;
    }
    .staff-board,
    .staff-hero {
        padding: 14px;
    }
    .staff-card-head {
        grid-template-columns: 1fr;
    }
    .contact-page-hero,
    .contact-summary-card,
    .contact-map-card {
        padding: 18px;
    }
    .contact-info-card {
        grid-template-columns: 1fr;
    }
    .contact-map-frame iframe {
        height: 280px;
    }
}


.info-panels {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 72px;
}

.info-box {
    padding: 24px;
}

.info-box-head {
    justify-content: space-between;
    margin-bottom: 20px;
}

.notice-list,
.news-list,
.event-list,
.site-footer ul {
    display: grid;
    gap: 16px;
}

.notice-item,
.event-item,
.news-item {
    display: flex;
    gap: 14px;
}

.notice-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fa4d56;
    margin-top: 7px;
    flex: 0 0 auto;
}

.notice-copy,
.news-copy,
.event-copy {
    display: grid;
    gap: 4px;
}

.news-item img {
    width: 78px;
    height: 72px;
    object-fit: cover;
    border-radius: 16px;
    flex: 0 0 auto;
}

.event-date {
    width: 62px;
    min-width: 62px;
    border-radius: 16px;
    background: #edf4ff;
    text-align: center;
    padding: 10px 6px;
}

.event-date strong {
    display: block;
    font-size: 24px;
    color: var(--primary);
    font-family: "Montserrat", sans-serif;
}

.event-date small {
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 800;
}

.stats {
    background: linear-gradient(90deg, #091f4a 0%, #12356f 100%);
    color: #fff;
    padding: 32px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stats-grid article {
    text-align: center;
    padding: 12px;
}

.stats-grid i {
    color: var(--accent);
    font-size: 30px;
    margin-bottom: 12px;
}

.stats-grid strong {
    display: block;
    font-size: 32px;
    font-family: "Montserrat", sans-serif;
}

.stats-grid span {
    color: rgba(255, 255, 255, 0.78);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.testimonial-card {
    padding: 28px;
}

.quote-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eef4ff;
    color: #2a7de0;
    margin-bottom: 16px;
}

.testimonial-user {
    gap: 14px;
    margin-top: 22px;
}

.testimonial-user img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 50%;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.slider-dots span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #cad7ec;
}

.slider-dots span.active {
    width: 28px;
    background: var(--primary);
}

.site-footer {
    background: linear-gradient(180deg, #0c2554 0%, #091a3d 100%);
    color: rgba(255, 255, 255, 0.88);
}

.footer-grid {
    padding: 58px 0 34px;
    display: grid;
    grid-template-columns: 1.35fr 0.9fr 0.9fr 1fr 1fr;
    gap: 24px;
}

.footer-brand .brand {
    color: #fff;
    margin-bottom: 16px;
}

.site-footer h4 {
    color: #fff;
    font-size: 18px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li {
    align-items: flex-start;
}

.contact-list i {
    margin-top: 4px;
    color: var(--accent);
}

.socials.large a {
    width: 38px;
    height: 38px;
}

.newsletter-form {
    display: grid;
    gap: 12px;
}

.newsletter-form input {
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-form button {
    height: 48px;
    border: 0;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-row {
    min-height: 60px;
    justify-content: space-between;
    gap: 20px;
    font-size: 14px;
}

.footer-bottom-row div {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.site-footer {
    margin-top: 8px;
    padding: 0;
    background: linear-gradient(180deg, #0f2c5d 0%, #0a234a 100%);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(220px, 0.95fr) minmax(220px, 0.9fr);
    gap: 24px;
    padding: 14px 24px 16px;
    width: 100%;
    margin: 0;
}

.site-footer .footer-title {
    margin: 0 0 12px;
    color: #ffaf2f;
    font-size: 20px;
    font-weight: 800;
}

.site-footer .footer-contact-heading {
    font-size: 20px;
    margin-top: 8px;
}

.site-footer .footer-contact-heading a {
    color: inherit;
}

.site-footer .footer-about {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 12px;
}

.site-footer .footer-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.15);
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.site-footer .footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-footer .footer-logo i {
    font-size: 28px;
    color: #ffb435;
}

.site-footer .footer-about p {
    margin: 0;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

.site-footer .footer-newsletter p {
    margin: -4px 0 12px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
}

.site-footer .footer-contact-details {
    display: grid;
    gap: 10px;
}

.site-footer .footer-links {
    display: grid;
    gap: 9px;
    justify-items: stretch;
}

.site-footer .footer-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    align-items: start;
}

.site-footer .footer-links-column {
    display: grid;
    gap: 9px;
}

.site-footer .footer-contact-details div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.86);
    font-size: 13px;
    font-weight: 500;
}

.site-footer .footer-links a {
    min-height: 22px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.88);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
}

.site-footer .footer-links a span {
    flex: 1;
}

.site-footer .footer-contact-details i {
    color: #fff;
    width: 14px;
    margin-top: 0;
}

.site-footer .footer-links i {
    color: #fff;
    margin-top: 0;
    flex-shrink: 0;
}

.site-footer .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.site-footer .footer-social a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
}

.site-footer .footer-social a:nth-child(1) {
    background: #3b5998;
}

.site-footer .footer-social a:nth-child(2) {
    background: #1da1f2;
}

.site-footer .footer-social a:nth-child(3) {
    background: #e4405f;
}

.site-footer .footer-social a:nth-child(4) {
    background: #ff0000;
}

.site-footer .newsletter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    margin-bottom: 12px;
}

.site-footer .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.site-footer .footer-newsletter input,
.site-footer .footer-newsletter textarea {
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    color: #fff;
    font-size: 12px;
    font-family: inherit;
}

.site-footer .footer-newsletter input::placeholder,
.site-footer .footer-newsletter textarea::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

.site-footer .footer-newsletter textarea {
    min-height: 60px;
    padding: 10px 12px;
    resize: none;
    margin-top: 0;
}

.site-footer .newsletter-row button,
.site-footer .footer-newsletter .send-btn {
    border: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #ff8a1f 0%, #ff7011 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    padding: 0 12px;
}

.site-footer .footer-newsletter .send-btn {
    width: 156px;
    min-height: 32px;
    margin-left: auto;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.site-footer .footer-bottom {
    min-height: 50px;
    padding: 0 24px;
    width: 100%;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    font-weight: 500;
    flex-wrap: nowrap;
}

.site-footer .footer-policies {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.site-footer .footer-up {
    display: none;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: min(360px, 90vw);
    height: 100vh;
    background: #fff;
    z-index: 40;
    padding: 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -18px 0 45px rgba(5, 24, 53, 0.18);
}

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

.sidebar-header,
.sidebar-cta {
    display: grid;
    gap: 18px;
}

.sidebar-header {
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-bottom: 26px;
}

.brand.compact strong {
    font-size: 18px;
}

.sidebar-close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--primary);
    font-size: 20px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.sidebar-nav a {
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 800;
    color: #29405f;
}

.sidebar-group {
    display: grid;
    gap: 6px;
}

.sidebar-sublink {
    margin-left: 14px;
    font-size: 13px;
    color: var(--muted);
    background: #f4f7fc;
}

.sidebar-contact {
    display: grid;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 22, 46, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 35;
}

.sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.registration-body {
    background:
        radial-gradient(circle at top left, rgba(42, 125, 224, 0.08), transparent 34%),
        linear-gradient(180deg, #f5f8fe 0%, #eef4fb 100%);
}

.registration-page {
    padding: 28px 0 72px;
}

.registration-wrap {
    display: grid;
    gap: 22px;
    width: calc(100% - 24px);
    max-width: none;
}

.registration-header,
.registration-title,
.registration-security,
.form-actions {
    display: flex;
    align-items: center;
}

.registration-header {
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e1e9f5;
    border-radius: 22px;
    padding: 18px 24px;
    box-shadow: 0 18px 40px rgba(18, 46, 92, 0.08);
}

.registration-title,
.registration-security {
    gap: 16px;
}

.registration-badge,
.security-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.registration-badge {
    background: linear-gradient(145deg, #ebf3ff 0%, #dceaff 100%);
    color: #2c78dc;
    font-size: 24px;
}

.security-icon {
    background: #f8fbff;
    border: 1px solid #e2ebfa;
    color: #2a7de0;
}

.registration-title h1 {
    margin: 0 0 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    line-height: 1.1;
}

.registration-title p,
.registration-security small,
.form-card-head p,
.side-step-item p,
.help-card p,
.progress-note small {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.registration-security {
    min-width: 230px;
    padding: 10px 14px;
    border: 1px solid #e6edf8;
    border-radius: 16px;
    background: #fbfdff;
}

.registration-security strong,
.form-stepper strong,
.side-step-item strong,
.progress-note strong {
    display: block;
}

.registration-panel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: start;
}

.form-stepper,
.registration-form-card,
.side-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2eaf6;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(16, 42, 86, 0.08);
}

.form-stepper {
    padding: 18px 14px;
}

.stepper-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 12px 0 18px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.stepper-count {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #d3dff0;
    background: #fff;
    color: #5f6f88;
    font-weight: 800;
    font-size: 13px;
}

.stepper-line {
    position: absolute;
    top: 34px;
    left: 13px;
    width: 2px;
    height: calc(100% - 10px);
    background: #dfe8f5;
}

.stepper-item.active .stepper-count {
    background: #2a7de0;
    border-color: #2a7de0;
    color: #fff;
    box-shadow: 0 10px 18px rgba(42, 125, 224, 0.26);
}

.stepper-item.active .stepper-line {
    background: linear-gradient(180deg, #2a7de0 0%, #cfdcf0 100%);
}

.stepper-item.completed .stepper-count,
.side-step-icon.completed {
    background: #1eb06f;
    border-color: #1eb06f;
    color: #fff;
}

.stepper-copy strong,
.side-step-item strong {
    font-size: 14px;
    margin-bottom: 3px;
}

.stepper-copy small,
.side-step-item small {
    color: var(--muted);
    line-height: 1.45;
}

.registration-form-card {
    padding: 24px 24px 18px;
}

.form-card-head {
    margin-bottom: 22px;
}

.form-step-label {
    display: inline-block;
    color: #2a7de0;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
}

.form-card-head h2 {
    margin: 0 0 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
}

.student-form {
    display: grid;
    gap: 20px;
}

.form-step-panel[hidden] {
    display: none;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
}

.form-field {
    display: grid;
    gap: 10px;
}

.form-field label {
    font-size: 14px;
    font-weight: 800;
    color: #213a61;
}

.form-field label span {
    color: #ef4444;
}

.form-field input,
.form-field select {
    width: 100%;
    height: 44px;
    border: 1px solid #d9e4f2;
    border-radius: 10px;
    padding: 0 14px;
    background: #fff;
    color: #264263;
    outline: none;
}

.form-field input::placeholder,
.form-field select {
    color: #8a98ac;
}

.form-field select {
    color: #000;
}

.form-field input:focus,
.form-field select:focus {
    border-color: #79aef0;
    box-shadow: 0 0 0 4px rgba(42, 125, 224, 0.08);
}

.radio-group {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #536581;
}

.radio-group input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.input-icon-field,
.phone-field {
    position: relative;
    display: grid;
}

.input-icon-field i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #7f90a8;
    pointer-events: none;
}

.input-icon-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7f90a8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.input-icon-btn:hover {
    background: rgba(127, 144, 168, 0.08);
    color: #4a5a76;
}

.input-icon-field input[type="password"]::-ms-reveal,
.input-icon-field input[type="password"]::-ms-clear {
    display: none;
}

.input-icon-field input,
.input-icon-field select {
    padding-right: 42px;
}

.select-field select,
.phone-field select {
    appearance: none;
}

.phone-field {
    grid-template-columns: 78px 1fr;
    gap: 10px;
}

.form-actions {
    justify-content: flex-end;
}

.multi-actions {
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.save-continue-btn {
    min-width: 176px;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b7de0 0%, #1958d8 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(32, 97, 219, 0.28);
    cursor: pointer;
}

.secondary-step-btn {
    min-width: 140px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #d9e4f2;
    background: #fff;
    color: #264263;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    cursor: pointer;
    margin-right: auto;
}

.save-continue-btn[disabled] {
    opacity: 0.72;
    cursor: not-allowed;
}

.progress-note {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #dff0ea;
    border-radius: 12px;
    background: linear-gradient(90deg, #f6fffb 0%, #f3fbf7 100%);
    display: flex;
    gap: 14px;
    align-items: center;
}

.progress-note-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #e8faf1;
    color: #1b9b63;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.registration-sidecards {
    display: grid;
    gap: 18px;
}

.side-card {
    padding: 18px;
}

.side-card h3 {
    margin: 0 0 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.side-step-list {
    display: grid;
    gap: 18px;
}

.side-step-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
}

.side-step-icon {
    margin-top: 28px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef4ff;
    color: #7d90ad;
    display: grid;
    place-items: center;
}

.side-step-icon.active {
    background: #e8f1ff;
    color: #2a7de0;
}

.upload-grid,
.review-summary {
    display: grid;
    gap: 18px;
}

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

.upload-card,
.review-card {
    border: 1px dashed #cfdcf0;
    border-radius: 16px;
    background: #f8fbff;
}

.upload-card {
    padding: 22px 18px;
    display: grid;
    gap: 10px;
    text-align: center;
    cursor: pointer;
}

.upload-card input {
    display: none;
}

.upload-card-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border-radius: 16px;
    background: #e8f1ff;
    color: #2a7de0;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.upload-card strong,
.review-card h3,
.review-item strong,
.submit-success strong {
    font-family: "Montserrat", sans-serif;
}

.upload-card small,
.upload-file-name,
.review-item span,
.submit-success small {
    color: var(--muted);
}

.upload-file-name {
    font-size: 13px;
    word-break: break-word;
}

.review-preview-shell {
    display: grid;
    gap: 14px;
}

.review-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.review-preview-head h3 {
    margin: 0;
    font-size: 24px;
    color: #17325d;
}

.review-preview-head p {
    margin: 4px 0 0;
    color: #6c7c93;
    font-size: 13px;
}

.review-print-btn {
    border: 1px solid #d8e3f4;
    background: #fff;
    color: #315d9a;
    border-radius: 999px;
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.review-hero-card,
.review-card {
    border: 1px solid #e6edf8;
    border-radius: 18px;
    background: #fff;
    padding: 18px;
}

.review-hero-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.review-avatar-wrap {
    display: flex;
    justify-content: center;
}

.review-avatar {
    width: 92px;
    height: 112px;
    border-radius: 16px;
    background: linear-gradient(145deg, #edf4ff 0%, #e2ecff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #4f79be;
    font-size: 34px;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-card.tone-amber { background: #fffaf1; }
.review-card.tone-green { background: #f4fbf6; }
.review-card.tone-orange { background: #fff8f0; }

.review-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.review-card-title h4,
.review-item strong,
.submit-success strong,
.review-document-item strong {
    margin: 0;
    font-size: 16px;
    color: #17325d;
}

.review-card-badge {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.review-card-badge.tone-blue { background: #ecf2ff; color: #2d6cef; }
.review-card-badge.tone-amber { background: #fff1d9; color: #e39711; }
.review-card-badge.tone-green { background: #e8f8ed; color: #1aa25e; }
.review-card-badge.tone-orange { background: #ffe8d6; color: #e47b18; }

.review-two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 26px;
}

.review-two-column-grid.compact {
    gap: 12px 24px;
}

.review-item {
    display: grid;
    gap: 4px;
}

.review-item span,
.submit-success small,
.review-document-item small {
    font-size: 12px;
    color: #6b7f9d;
}

.review-item strong {
    font-size: 13px;
}

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

.review-document-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #f3dfc8;
}

.review-document-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff0dc;
    color: #e38917;
    flex: 0 0 34px;
}

.consent-check {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #375275;
    font-size: 13px;
}

.consent-check input {
    margin-top: 4px;
}

.submit-success {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #edf9f2;
    border: 1px solid #d4efdf;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #1b9b63;
}

.submit-success i {
    font-size: 20px;
    margin-top: 2px;
}

.success-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 28, 54, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1200;
}

.success-modal-backdrop.open {
    display: flex;
}

.success-modal-card {
    width: min(100%, 380px);
    background: #fff;
    border-radius: 18px;
    padding: 24px 26px 28px;
    position: relative;
    text-align: center;
    box-shadow: 0 28px 60px rgba(14, 31, 60, 0.24);
}

.success-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #7f8eaa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
}

.success-modal-badge {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #10b341;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 0 0 6px #ebf9ef;
    margin-bottom: 18px;
}

.success-modal-card h3 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    color: #172d5b;
}

.success-modal-card p {
    margin: 0;
    color: #3e5477;
    font-size: 14px;
    line-height: 1.6;
}

.success-modal-card strong {
    display: block;
    margin-top: 2px;
    color: #14a53f;
    font-size: 14px;
    font-weight: 800;
}

.success-modal-btn {
    margin-top: 22px;
    min-height: 44px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1f6dff 0%, #0e56eb 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(31, 109, 255, 0.24);
}

.success-modal-btn.secondary {
    margin-top: 0;
    background: #eef4ff;
    color: #275fd6;
    box-shadow: none;
}

.success-modal-actions {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
}

.success-modal-actions .success-modal-btn {
    margin-top: 0;
}

.success-modal-info {
    width: 100%;
    border: 1px solid #e3ebfb;
    border-radius: 16px;
    background: #f8fbff;
    padding: 12px 14px;
    margin: 14px 0 0;
}

.success-modal-info span {
    display: block;
    color: #70809a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.success-modal-info strong {
    margin-top: 0;
}

@media print {
    body * {
        visibility: hidden !important;
    }

    .success-modal-backdrop,
    .success-modal-backdrop * {
        visibility: visible !important;
    }

    .success-modal-backdrop {
        position: static !important;
        display: block !important;
        background: #fff !important;
        padding: 0 !important;
    }

    .success-modal-card {
        width: min(100%, 520px) !important;
        box-shadow: none !important;
        border: 1px solid #d9e3f5 !important;
        margin: 0 auto !important;
    }

    .success-modal-close,
    .success-modal-actions .success-modal-btn.secondary,
    .site-header,
    .site-footer,
    .sidebar-backdrop,
    #mobileSidebar {
        display: none !important;
    }
}

.help-card ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 12px;
}

.help-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #375275;
    font-size: 14px;
}

.help-card li i {
    color: #2a7de0;
}

.login-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Mulish", sans-serif;
    background:
        radial-gradient(circle at 72% 15%, rgba(54, 120, 255, 0.14), transparent 24%),
        linear-gradient(90deg, #0e2f69 0%, #0e2f69 43%, #f5f8ff 43%, #f7faff 100%);
}

.login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 43% 57%;
}

.login-showcase {
    position: relative;
    background:
        linear-gradient(180deg, rgba(9, 35, 84, 0.74), rgba(6, 28, 72, 0.82)),
        url('https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.login-showcase-content,
.login-form-shell {
    position: relative;
    z-index: 1;
}

.login-showcase-content {
    min-height: 100vh;
    padding: 24px 30px 28px 34px;
    display: flex;
    flex-direction: column;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 74px;
}

.login-brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffbf2f;
    font-size: 28px;
}

.login-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
}

.login-brand small {
    color: rgba(255, 255, 255, 0.86);
}

.login-copy {
    max-width: 360px;
}

.login-copy-eyebrow {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.login-copy h1 {
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.04;
    color: #fff;
}

.login-copy h1 span {
    color: #f5b31b;
}

.login-copy > p:last-child {
    margin: 0;
    max-width: 320px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.75;
    font-size: 15px;
}

.login-copy::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: #f5b31b;
    margin-top: 18px;
}

.login-feature-list {
    display: grid;
    gap: 18px;
    margin-top: 24px;
    max-width: 330px;
}

.login-feature-item,
.login-trust-item,
.login-label-row,
.login-row {
    display: flex;
    align-items: flex-start;
}

.login-feature-item {
    gap: 14px;
}

.login-feature-icon,
.login-trust-icon,
.login-user-icon {
    display: grid;
    place-items: center;
}

.login-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    flex: 0 0 auto;
}

.login-feature-icon.blue { background: #2f7df6; }
.login-feature-icon.green { background: #1bb56c; }
.login-feature-icon.violet { background: #8452ea; }
.login-feature-icon.amber { background: #f3a21e; }

.login-feature-item strong,
.login-trust-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.login-feature-item p,
.login-trust-item p,
.register-copy,
.login-footer-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.55;
    font-size: 14px;
}

.login-quote-card {
    margin-top: auto;
    max-width: 290px;
    padding: 22px 22px 18px;
    border-radius: 18px;
    background: rgba(15, 29, 65, 0.78);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 34px rgba(7, 17, 42, 0.28);
}

.login-quote-card i {
    color: rgba(255, 255, 255, 0.92);
    font-size: 26px;
}

.login-quote-card p {
    margin: 12px 0 10px;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.7;
}

.login-quote-card strong {
    color: #2f7df6;
}

.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
}

.login-form-shell {
    width: min(100%, 520px);
}

.login-form-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e7eef9;
    border-radius: 22px;
    padding: 28px 36px 24px;
    box-shadow: 0 28px 55px rgba(34, 72, 140, 0.12);
    text-align: center;
}

.login-user-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #edf4ff 0%, #e5efff 100%);
    color: #2f7df6;
    font-size: 28px;
}

.login-form-card h2 {
    margin: 0 0 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 28px;
    color: #162d59;
}

.login-form-card > p {
    margin: 0 0 26px;
    color: #5d6f8b;
}

.portal-login-form {
    display: grid;
    gap: 18px;
    text-align: left;
}

.login-input-group {
    display: grid;
    gap: 10px;
}

.login-input-group label,
.remember-check,
.secure-login-text {
    color: #21375f;
    font-size: 14px;
    font-weight: 700;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8ca0bf;
}

.login-input-wrap input {
    width: 100%;
    height: 46px;
    border: 1px solid #dbe4f2;
    border-radius: 10px;
    padding: 0 14px 0 42px;
    color: #20375f;
    background: #fff;
}

.login-input-wrap input::placeholder {
    color: #8b9bb0;
}

.login-label-row {
    justify-content: space-between;
    gap: 16px;
}

.login-label-row a,
.register-copy a {
    color: #226ff0;
    font-weight: 800;
}

.login-row {
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.remember-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.secure-login-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.secure-login-text i {
    color: #20ad67;
}

.login-submit-btn,
.google-login-btn {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 0;
    font-weight: 800;
    cursor: pointer;
}

.login-submit-btn {
    background: linear-gradient(90deg, #1d67ec 0%, #2158d6 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 16px 28px rgba(33, 88, 214, 0.2);
}

.login-divider {
    position: relative;
    text-align: center;
    color: #6d7c92;
    font-size: 14px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 22px);
    height: 1px;
    background: #dfe6f3;
}

.login-divider::before { left: 0; }
.login-divider::after { right: 0; }

.login-divider span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.94);
    padding: 0 8px;
}

.google-login-btn {
    background: #fff;
    border: 1px solid #dbe4f2;
    color: #1b2e57;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.google-login-btn img {
    width: 22px;
    height: 22px;
}

.register-copy {
    text-align: center;
    color: #5d6f8b;
    margin-top: 18px;
}

.login-trust-row {
    margin-top: 24px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.login-trust-item {
    gap: 10px;
}

.login-trust-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.login-trust-icon.blue {
    background: #eaf2ff;
    color: #2f7df6;
}

.login-trust-icon.green {
    background: #e7faee;
    color: #17a760;
}

.login-trust-icon.violet {
    background: #f2ebff;
    color: #8753ec;
}

.login-trust-item strong {
    color: #1d325c;
    font-size: 14px;
}

.login-trust-item p {
    color: #6f7e93;
    font-size: 12px;
}

.login-footer-copy {
    margin-top: 26px;
    text-align: center;
    color: #6e7f95;
    font-size: 13px;
}

.admin-login-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Mulish", sans-serif;
    background:
        radial-gradient(circle at 18% 6%, rgba(88, 150, 255, 0.18), transparent 18%),
        radial-gradient(circle at 94% 8%, rgba(88, 150, 255, 0.12), transparent 14%),
        radial-gradient(circle at 86% 88%, rgba(71, 138, 255, 0.16), transparent 20%),
        linear-gradient(135deg, #eef5ff 0%, #f8fbff 52%, #edf4ff 100%);
    overflow-x: hidden;
}

.admin-login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 22px;
    align-items: center;
    width: min(calc(100% - 48px), 1380px);
    margin: 0 auto;
    padding: 34px 0;
}

.admin-login-showcase {
    position: relative;
    padding: 28px 18px 18px 18px;
}

.admin-login-showcase::before,
.admin-login-showcase::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 120, 255, 0.08), transparent 70%);
    pointer-events: none;
}

.admin-login-showcase::before {
    width: 460px;
    height: 460px;
    left: -120px;
    top: 120px;
}

.admin-login-showcase::after {
    width: 340px;
    height: 340px;
    right: 80px;
    bottom: 30px;
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 34px 0 52px 34px;
}

.admin-brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #fff 0%, #eaf2ff 100%);
    border: 1px solid #d8e5fb;
    box-shadow: 0 14px 26px rgba(51, 99, 184, 0.1);
    color: #1f61e8;
    font-size: 31px;
}

.admin-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1;
    color: #0e2354;
}

.admin-brand small {
    display: block;
    margin-top: 6px;
    color: #556b8f;
    font-size: 16px;
}

.admin-copy {
    margin-left: 34px;
}

.admin-copy h1 {
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(24px, 2.7vw, 34px);
    color: #112458;
}

.admin-copy h1 span {
    color: #1e67ec;
}

.admin-copy p {
    margin: 0;
    color: #506784;
    font-size: 17px;
}

.admin-dashboard-visual {
    position: relative;
    height: 330px;
    margin: 28px 24px 22px 18px;
}

.admin-monitor {
    position: absolute;
    left: 86px;
    top: 6px;
    width: 380px;
    height: 228px;
    background: #fff;
    border: 4px solid #2f5ea7;
    border-radius: 12px;
    box-shadow: 0 26px 50px rgba(74, 115, 188, 0.14);
}

.monitor-topbar {
    height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-bottom: 1px solid #edf2fb;
}

.monitor-topbar span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8e2f6;
}

.monitor-body {
    display: grid;
    grid-template-columns: 36px 1fr;
    height: calc(100% - 18px);
}

.monitor-sidebar {
    background: #f1f6fe;
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 12px 8px;
}

.monitor-sidebar span {
    height: 10px;
    border-radius: 999px;
    background: #cbd9f1;
}

.monitor-content {
    padding: 16px;
}

.monitor-cards {
    display: grid;
    grid-template-columns: 1.4fr 0.95fr;
    gap: 14px;
}

.mini-card {
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #e5edf9;
    padding: 14px;
}

.mini-card.tall {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 108px;
}

.bar {
    display: block;
    width: 16px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #88b7ff 0%, #2b73ef 100%);
}

.bar.b1 { height: 38px; }
.bar.b2 { height: 58px; }
.bar.b3 { height: 82px; background: linear-gradient(180deg, #ffd66f 0%, #f5aa1f 100%); }
.bar.b4 { height: 70px; }
.bar.b5 { height: 52px; }

.pie-card {
    display: grid;
    place-items: center;
    height: 108px;
}

.pie-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(#2f7df6 0 36%, #f6b126 36% 62%, #eaf1fc 62% 100%);
    position: relative;
}

.pie-ring::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: #fff;
}

.line-chart {
    margin-top: 14px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
    border: 1px solid #e6eef9;
    position: relative;
    overflow: hidden;
}

.line-chart span {
    position: absolute;
    bottom: 14px;
    height: 2px;
    background: #2f7df6;
    transform-origin: left center;
}

.line-chart span:nth-child(1) { left: 18px; width: 54px; transform: rotate(8deg); }
.line-chart span:nth-child(2) { left: 69px; width: 54px; transform: rotate(-15deg); }
.line-chart span:nth-child(3) { left: 120px; width: 64px; transform: rotate(18deg); }
.line-chart span:nth-child(4) { left: 181px; width: 76px; transform: rotate(-10deg); }

.admin-monitor::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    border-radius: 0 0 18px 18px;
    background: #87a9dc;
}

.admin-monitor::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -52px;
    transform: translateX(-50%);
    width: 250px;
    height: 8px;
    border-radius: 999px;
    background: #9cb8e5;
}

.admin-person {
    position: absolute;
    right: 118px;
    bottom: 38px;
    width: 132px;
    height: 170px;
}

.person-head {
    position: absolute;
    top: 6px;
    left: 50px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2c325d;
}

.person-body {
    position: absolute;
    top: 30px;
    left: 34px;
    width: 72px;
    height: 90px;
    border-radius: 26px 26px 18px 18px;
    background: linear-gradient(180deg, #2f7df6 0%, #1d58d7 100%);
    transform: skewX(-10deg);
}

.person-laptop {
    position: absolute;
    top: 74px;
    left: 0;
    width: 66px;
    height: 42px;
    border-radius: 8px;
    background: #f6fbff;
    border: 2px solid #b7ccef;
    box-shadow: 0 10px 18px rgba(50, 86, 155, 0.12);
}

.person-chair {
    position: absolute;
    right: 4px;
    bottom: 0;
    width: 52px;
    height: 86px;
    border-radius: 16px 16px 8px 8px;
    border: 4px solid #ffffff;
    border-bottom-width: 10px;
}

.admin-plant {
    position: absolute;
    left: 28px;
    bottom: 38px;
    width: 72px;
    height: 108px;
}

.leaf {
    position: absolute;
    bottom: 28px;
    width: 28px;
    height: 54px;
    border-radius: 28px 28px 4px 28px;
    background: linear-gradient(180deg, #55d094 0%, #25a56a 100%);
}

.leaf-1 { left: 2px; transform: rotate(-24deg); }
.leaf-2 { left: 22px; height: 62px; transform: rotate(8deg); }
.leaf-3 { left: 40px; transform: rotate(24deg); }

.pot {
    position: absolute;
    left: 16px;
    bottom: 0;
    width: 42px;
    height: 34px;
    border-radius: 0 0 12px 12px;
    background: #d8e4f7;
    box-shadow: inset 0 8px 0 #eef4fd;
}

.admin-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 560px;
    margin: 8px 0 24px 18px;
}

.admin-feature-box {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e3ebf8;
    border-radius: 18px;
    min-height: 116px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px;
    box-shadow: 0 18px 30px rgba(65, 105, 176, 0.08);
}

.admin-feature-box i {
    font-size: 28px;
    color: #226ff0;
}

.admin-feature-box:nth-child(2) i { color: #1fb66b; }
.admin-feature-box:nth-child(3) i { color: #f3a21e; }
.admin-feature-box:nth-child(4) i { color: #7a52eb; }

.admin-feature-box strong {
    font-size: 13px;
    line-height: 1.35;
    color: #19335b;
}

.admin-footer-points {
    margin-left: 154px;
    display: flex;
    gap: 14px;
    color: #38516f;
    font-weight: 700;
    font-size: 14px;
}

.admin-footer-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-footer-points i {
    color: #1d67ec;
}

.admin-login-form-side {
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-login-card {
    width: min(100%, 550px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e8eef8;
    border-radius: 28px;
    box-shadow: 0 34px 60px rgba(53, 95, 169, 0.14);
    padding: 44px 38px 28px;
    text-align: center;
}

.admin-login-card h2 {
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    color: #102457;
}

.admin-login-card > p {
    margin: 0 0 34px;
    color: #5f7190;
    font-size: 16px;
}

.admin-login-card .portal-login-form {
    gap: 20px;
}

.admin-login-card .login-input-group label,
.admin-login-card .remember-check,
.admin-login-card .secure-login-text {
    font-size: 14px;
}

.admin-login-card .login-input-wrap input {
    height: 56px;
    font-size: 14px;
}

.admin-login-card .login-submit-btn,
.admin-login-card .google-login-btn {
    height: 58px;
    font-size: 15px;
}

.admin-login-copyright {
    margin: 28px 0 0;
    color: #73839b;
    font-size: 13px;
}

.admin-dashboard-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Mulish", sans-serif;
    background: linear-gradient(180deg, #fbfcff 0%, #f6f9ff 100%);
    color: #122a56;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px 1fr;
    transition: grid-template-columns 0.25s ease;
    overflow-x: hidden;
}

.admin-shell.sidebar-collapsed {
    grid-template-columns: 0 1fr;
}

.admin-sidebar {
    background:
        radial-gradient(circle at top left, rgba(111, 62, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #080d1b 0%, #060a16 100%);
    border-right: 1px solid #151d32;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.admin-shell.sidebar-collapsed .admin-sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.admin-sidebar-backdrop {
    display: none;
}

.admin-sidebar-brand,
.admin-profile-chip,
.admin-user-card {
    display: flex;
    align-items: center;
}

.admin-sidebar-brand {
    gap: 12px;
    padding: 18px 18px 15px;
    min-height: 78px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(5, 9, 24, 0.72);
    color: #fff;
}

.admin-sidebar-logo,
.admin-profile-avatar,
.admin-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #6e37ff 0%, #5b2cf1 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(98, 48, 243, 0.35);
}

.admin-sidebar-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: #fff;
}

.admin-sidebar-brand small,
.admin-profile-chip small,
.admin-user-card small {
    color: #6b7b92;
    font-size: 12px;
}

.admin-sidebar-brand small {
    color: #d8d9ea;
    margin-top: 2px;
}

.admin-menu {
    display: grid;
    gap: 10px;
    padding: 14px 10px 12px;
}

.admin-menu-group {
    display: grid;
    gap: 4px;
}

.admin-menu a,
.admin-logout-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: #eef2ff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
}

.admin-menu a span {
    margin-left: auto;
    color: #9ea6c8;
    font-size: 12px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.admin-menu a > i:first-child {
    width: 16px;
    text-align: center;
    color: #ffffff;
    opacity: 0.92;
    font-size: 14px;
}

.admin-menu a.active,
.admin-menu a:hover,
.admin-logout-link:hover {
    background: linear-gradient(90deg, #5f2cff 0%, #6c35ff 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(94, 44, 255, 0.24);
}

.admin-menu a.active > i:first-child,
.admin-menu a:hover > i:first-child,
.admin-menu a.active span,
.admin-menu a:hover span {
    color: #fff;
}

.admin-submenu {
    display: none;
    gap: 2px;
    margin-left: 12px;
    padding: 3px 0 2px 18px;
    position: relative;
}

.admin-menu-group.open .admin-submenu {
    display: grid;
}

.admin-menu-group.open > a span {
    color: #ffffff;
}

.admin-menu-group.open > a span i {
    transform: rotate(90deg);
}

.admin-submenu::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, rgba(106, 56, 255, 0.75) 0%, rgba(106, 56, 255, 0.08) 100%);
}

.admin-submenu a {
    min-height: 28px;
    font-size: 12px;
    font-weight: 500;
    color: #bcc4e0;
    padding: 0 10px 0 18px;
    position: relative;
    border-radius: 8px;
    background: transparent;
}

.admin-submenu a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #6a708a;
    transform: translateY(-50%);
}

.admin-submenu a.active {
    background: rgba(96, 44, 255, 0.14);
    color: #ffffff;
}

.admin-submenu a.active::before {
    background: #8b6bff;
}

.admin-submenu a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.admin-submenu a:hover::before {
    background: #9a82ff;
}

.admin-submenu a.admin-submenu-placeholder {
    color: #8d94ad;
    pointer-events: none;
}

.admin-submenu a.admin-submenu-placeholder::before {
    background: #4e5469;
}

.admin-sidebar-footer {
    padding: 10px 12px 14px;
}

.admin-user-card {
    gap: 12px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    position: relative;
}

.admin-user-card strong,
.admin-profile-chip strong {
    display: block;
    font-size: 13px;
}

.admin-help-card small,
.admin-help-card strong {
    color: #fff;
}

.admin-help-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    cursor: default;
    font-size: 12px;
    padding: 0;
}

.admin-support-link {
    min-height: 42px;
    margin-top: 12px;
    border-radius: 12px;
    background: #fff;
    color: #854cf7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(72, 39, 160, 0.12);
}

.admin-logout-link {
    margin-top: 10px;
    border-top: 0;
    padding-top: 0;
    justify-content: center;
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(109, 67, 244, 0.18);
}

.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-x: hidden;
}

.admin-topbar {
    min-height: 64px;
    background: #fff;
    border-bottom: 1px solid #f0ecfb;
    padding: 0 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.admin-topbar-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.admin-topbar-title strong {
    color: #152a57;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.admin-topbar-title small {
    color: #5f6f92;
    font-size: 11px;
    font-weight: 700;
}

.admin-menu-toggle,
.admin-profile-chip {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #294469;
}

.admin-menu-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
    color: #22356a;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.admin-topbar-search {
    display: flex;
    justify-content: flex-start;
}

.admin-search-form {
    width: min(100%, 470px);
    position: relative;
}

.admin-search-form input {
    width: 100%;
    height: 36px;
    border: 1px solid #f0ecfb;
    border-radius: 10px;
    background: #fbfaff;
    padding: 0 16px 0 38px;
    color: #2e4469;
    font-size: 12px;
    outline: none;
}

.admin-search-form input::placeholder {
    color: #7f87a7;
}

.admin-search-form > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #69789f;
    font-size: 13px;
}

.admin-topbar-icon-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #23376c;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    font-size: 18px;
}

.admin-topbar-icon-btn.has-badge span {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #ef445e;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.admin-topbar-icon-btn.badge-blue span {
    background: #5e6dff;
}

.admin-profile-dropdown {
    position: relative;
}

.admin-notification-dropdown {
    position: relative;
}

.admin-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 4px 4px;
    border-radius: 0;
}

.admin-profile-chip:hover,
.admin-profile-chip[aria-expanded="true"] {
    background: transparent;
}

.admin-profile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 210px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid #e6edf8;
    background: #fff;
    box-shadow: 0 20px 40px rgba(22, 39, 72, 0.12);
    display: grid;
    gap: 4px;
    z-index: 20;
}

.admin-profile-menu a {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #294469;
    font-size: 13px;
    font-weight: 700;
}

.admin-profile-menu a:hover {
    background: #f4f8ff;
    color: #1f67ea;
}

.admin-notification-menu {
    top: calc(100% + 14px);
    width: min(360px, calc(100vw - 28px));
    min-width: 320px;
    padding: 0;
    overflow: hidden;
}

.admin-notification-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f8;
    background: #fbfdff;
}

.admin-notification-menu-head strong {
    color: #173468;
    font-size: 14px;
    font-weight: 800;
}

.admin-notification-menu-head small {
    color: #72819d;
    font-size: 11px;
    font-weight: 700;
}

.admin-notification-menu-list {
    display: grid;
    max-height: 360px;
    overflow-y: auto;
}

.admin-notification-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f4fb;
    color: #27406b;
    text-decoration: none;
    transition: background 0.2s ease;
}

.admin-notification-menu .admin-notification-item {
    min-height: auto;
    align-items: flex-start;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
}

.admin-notification-item:last-child {
    border-bottom: 0;
}

.admin-notification-item:hover {
    background: #f8fbff;
    color: #173468;
}

.admin-notification-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eef4ff;
    color: #2f6ff0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.admin-notification-item-copy {
    display: block;
    min-width: 0;
}

.admin-notification-item-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #173468;
    font-size: 13px;
    font-weight: 800;
}

.admin-notification-item-copy p {
    margin: 0 0 4px;
    color: #536684;
    font-size: 12px;
    line-height: 1.55;
    word-break: break-word;
}

.admin-notification-item-copy small {
    display: block;
    color: #8190a7;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.admin-notification-item.is-empty {
    cursor: default;
}

.admin-notification-item.is-empty:hover {
    background: transparent;
    color: #27406b;
}

.admin-profile-chip {
    gap: 10px;
}

.admin-profile-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(145deg, #ffd8c4 0%, #f0b187 100%);
    color: #1f4ea7;
    border-radius: 50%;
    position: relative;
}

.admin-profile-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1dcf65;
    border: 2px solid #fff;
}

.admin-profile-chip strong {
    color: #1e3567;
    font-size: 13px;
    text-transform: lowercase;
}

.admin-profile-chip small {
    color: #7d8ba4;
    font-size: 10px;
    margin-top: 2px;
}

.admin-content {
    padding: 14px 16px 14px 16px;
}

.admin-welcome h1,
.admin-panel-head h2 {
    font-family: "Montserrat", sans-serif;
}

.admin-welcome h1 {
    margin: 0 0 6px;
    font-size: 28px;
}

.admin-welcome p,
.list-copy small,
.donut-legend small,
.bottom-stat small,
.admin-page-footer p,
.admin-page-footer a {
    color: #6d7c93;
}

.admin-welcome p {
    margin: 0 0 16px;
}

.admin-metric-grid,
.admin-bottom-stats {
    display: grid;
    gap: 14px;
}

.admin-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 14px;
}

.admin-panel-card,
.admin-metric-card,
.bottom-stat {
    background: #fff;
    border: 1px solid #e8edf7;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(33, 67, 125, 0.05);
}

.admin-metric-card {
    padding: 14px 12px 12px;
}

.admin-metric-head,
.admin-metric-value-row,
.admin-panel-head,
.event-stack-item,
.admin-news-item,
.admin-list-item,
.bottom-stat {
    display: flex;
}

.admin-metric-head {
    gap: 10px;
    align-items: flex-start;
}

.admin-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex: 0 0 auto;
}

.admin-metric-card.tone-blue .admin-metric-icon { background: #3f7cf4; }
.admin-metric-card.tone-green .admin-metric-icon { background: #1fb66b; }
.admin-metric-card.tone-violet .admin-metric-icon { background: #8f63ef; }
.admin-metric-card.tone-amber .admin-metric-icon { background: #f5a21b; }
.admin-metric-card.tone-rose .admin-metric-icon { background: #ea4f74; }

.admin-metric-head small {
    display: block;
    color: #5f6f87;
    margin-bottom: 5px;
}

.admin-metric-value-row {
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-metric-value-row strong {
    font-size: 20px;
}

.admin-growth {
    color: #17a863;
    font-size: 12px;
    font-weight: 800;
}

.admin-metric-card a,
.admin-panel-head a {
    color: #1f67ea;
    font-size: 13px;
    font-weight: 800;
}

.admin-metric-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.admin-overview-grid,
.admin-info-grid {
    display: grid;
    gap: 14px;
}

.admin-overview-grid {
    grid-template-columns: 2.2fr 1.5fr 1.05fr;
    margin-bottom: 14px;
}

.admin-info-grid {
    grid-template-columns: 1.4fr 1.2fr 1fr;
    margin-bottom: 14px;
}

.admin-panel-card {
    padding: 12px;
}

.admin-panel-head {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.admin-panel-head h2 {
    margin: 0;
    font-size: 18px;
}

.admin-panel-head button {
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e4ebf7;
    background: #fff;
    color: #31496f;
    padding: 0 10px;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #607089;
    font-size: 12px;
    margin-bottom: 8px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.legend-dot.blue { background: #256af0; }
.legend-dot.green { background: #35b966; }
.legend-dot.amber { background: #f5ae2a; }
.legend-dot.violet { background: #8b66ef; }

.student-chart {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: stretch;
}

.chart-y-labels {
    display: grid;
    align-content: space-between;
    color: #7a8aa0;
    font-size: 11px;
}

.chart-area {
    position: relative;
    min-height: 236px;
    border-left: 1px solid #eff3f9;
    border-bottom: 1px solid #eff3f9;
    padding-top: 8px;
}

.chart-area svg {
    width: 100%;
    height: 210px;
}

.line-blue,
.line-green {
    fill: none;
    stroke-width: 3;
}

.line-blue { stroke: #256af0; }
.line-green { stroke: #35b966; }
.line-points circle {
    stroke: #fff;
    stroke-width: 2;
}

.line-points.blue circle { fill: #256af0; }
.line-points.green circle { fill: #35b966; }

.chart-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    color: #6f8096;
    font-size: 11px;
    text-align: center;
}

.donut-wrap {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
    align-items: center;
}

.donut-chart {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#4c83f2 0 58.5%, #55c082 58.5% 76.4%, #ffbc45 76.4% 89.1%, #8f63ef 89.1% 100%);
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.donut-center {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px #e8edf7;
}

.donut-center strong {
    font-size: 17px;
}

.donut-center small {
    display: block;
    font-size: 11px;
    color: #74849a;
}

.donut-legend {
    display: grid;
    gap: 12px;
    font-size: 13px;
    color: #243b61;
}

.donut-legend small {
    display: block;
    margin-left: 16px;
    margin-top: 3px;
}

.quick-action-list {
    display: grid;
    gap: 10px;
}

.quick-action {
    min-height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
}

.quick-action span,
.list-icon,
.event-chip,
.bottom-stat-icon {
    display: grid;
    place-items: center;
}

.quick-action span {
    width: 22px;
    height: 22px;
}

.tone-blue { background: #eff5ff; color: #256af0; }
.tone-green { background: #eefaf1; color: #1caf65; }
.tone-violet { background: #ffffff; color: #8a58ff; }
.tone-amber { background: #ffffff; color: #f1a331; }
.tone-rose { background: #ffffff; color: #eb5579; }
.tone-cyan { background: #edf9fb; color: #1ca7bf; }

.admin-list,
.admin-news-list,
.event-stack {
    display: grid;
    gap: 12px;
}

.admin-list-item,
.admin-news-item,
.event-stack-item {
    gap: 10px;
    align-items: flex-start;
}

.list-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex: 0 0 auto;
}

.list-copy {
    display: grid;
    gap: 3px;
}

.list-copy strong {
    color: #20365d;
    font-size: 13px;
}

.list-copy em {
    font-style: normal;
    font-size: 10px;
    background: #fff1f4;
    color: #ea4f74;
    border-radius: 999px;
    padding: 2px 5px;
    margin-left: 4px;
}

.list-copy small {
    font-size: 11px;
}

.admin-news-item img {
    width: 68px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}

.event-chip {
    width: 52px;
    min-width: 52px;
    border-radius: 12px;
    background: #edf4ff;
    padding: 8px 4px;
    text-align: center;
}

.event-chip strong {
    font-size: 18px;
    color: #1f67ea;
}

.event-chip small {
    color: #718298;
    font-size: 10px;
}

.admin-bottom-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 14px;
}

.bottom-stat {
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.bottom-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
}

.bottom-stat strong {
    display: block;
    font-size: 24px;
}

.bottom-stat small {
    font-size: 12px;
}

.bottom-stat.tone-blue .bottom-stat-icon { background: #eaf2ff; color: #256af0; }
.bottom-stat.tone-green .bottom-stat-icon { background: #eefaf1; color: #1caf65; }
.bottom-stat.tone-violet .bottom-stat-icon { background: #f3efff; color: #8b66ef; }
.bottom-stat.tone-amber .bottom-stat-icon { background: #fff5e8; color: #f1a11d; }
.bottom-stat.tone-cyan .bottom-stat-icon { background: #edf9fb; color: #1ca7bf; }
.bottom-stat.tone-rose .bottom-stat-icon { background: #fff0f4; color: #eb5579; }

.admin-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 2px 0;
    border-top: 1px solid #edf1f8;
    font-size: 12px;
}

.admin-page-footer div {
    display: flex;
    gap: 16px;
}

.admin-breadcrumbs,
.admin-page-intro,
.session-toolbar,
.session-table-footer,
.table-pagination,
.table-actions {
    display: flex;
}

.admin-breadcrumbs {
    align-items: center;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 10px;
    color: #72839b;
}

.admin-breadcrumbs a {
    color: #1f67ea;
    font-weight: 700;
}

.admin-page-intro {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.admin-page-intro h1 {
    margin: 0 0 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
}

.admin-page-intro p,
.session-table-footer p {
    margin: 0;
    color: #6d7c93;
}

.admin-primary-btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: linear-gradient(90deg, #1f67ea 0%, #2358d7 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(32, 92, 219, 0.18);
    border: 0;
    cursor: pointer;
}

.admin-session-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.fee-category-page {
    padding-top: 16px;
}

.fee-page-intro {
    margin-bottom: 18px;
}

.fee-page-intro h1 {
    font-size: 20px;
    color: #163465;
    margin: 0 0 4px;
}

.fee-page-intro p {
    font-size: 12px;
    color: #7b8ba4;
}

.fee-add-btn {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 11px;
    box-shadow: 0 14px 24px rgba(32, 92, 219, 0.18);
}

.fee-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.fee-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 12px 16px;
    border: 1px solid #edf2fb;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: 0 10px 28px rgba(40, 73, 132, 0.04);
}

.fee-stat-card.fee-blue {
    background: linear-gradient(135deg, #fbfdff 0%, #f7faff 100%);
    color: #163465;
}

.fee-stat-card.fee-green {
    background: linear-gradient(135deg, #fcfffd 0%, #f4fbf7 100%);
    color: #163465;
}

.fee-stat-card.fee-amber {
    background: linear-gradient(135deg, #fffdf9 0%, #fffaf1 100%);
    color: #163465;
}

.fee-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex: 0 0 auto;
}

.fee-stat-card.fee-blue .fee-stat-icon {
    background: #edf3ff;
    color: #2c6ff0;
}

.fee-stat-card.fee-green .fee-stat-icon {
    background: #eaf8ef;
    color: #1dad63;
}

.fee-stat-card.fee-amber .fee-stat-icon {
    background: #fff1df;
    color: #f29a1f;
}

.fee-stat-copy small {
    display: block;
    margin-bottom: 4px;
    color: #516b91;
    font-size: 10px;
    font-weight: 700;
}

.fee-stat-copy strong {
    display: block;
    color: #163465;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}

.fee-table-card {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

.fee-table-head {
    padding: 14px 12px 10px;
    margin-bottom: 0;
}

.fee-table-head h2 {
    font-size: 14px;
    color: #193666;
}

.fee-card-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fee-filter-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    background: #fff;
    color: #3c5478;
    border-color: #e7edf8;
    font-size: 11px;
}

.fee-search {
    position: relative;
}

.fee-search input {
    width: 140px;
    height: 32px;
    border: 1px solid #e7edf8;
    border-radius: 8px;
    padding: 0 34px 0 12px;
    background: #fff;
    color: #2b4467;
    outline: none;
    font-size: 11px;
}

.fee-search input::placeholder {
    color: #8a9ab0;
}

.fee-search button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6b7d95;
    cursor: pointer;
    padding: 0;
}

.fee-table-wrap {
    overflow-x: auto;
    padding: 0 12px 0;
}

.fee-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

.fee-table thead th {
    padding: 13px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    color: #4a6183;
    background: linear-gradient(180deg, #f9fbff 0%, #f2f6fc 100%);
    border-top: 1px solid #eef2fa;
    border-bottom: 1px solid #eef2fa;
}

.fee-table thead th:first-child {
    border-top-left-radius: 10px;
}

.fee-table thead th:last-child {
    border-top-right-radius: 10px;
}

.fee-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2fa;
    color: #314a70;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
}

.fee-table tbody tr:last-child td {
    border-bottom: 0;
}

.fee-table tbody td:nth-child(2),
.fee-table tbody td:nth-child(4) {
    color: #29466d;
}

.fee-table .status-pill {
    min-width: 48px;
    height: 18px;
    font-size: 9px;
    font-weight: 800;
}

.fee-table-actions {
    gap: 8px;
}

.fee-action-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: none;
    font-size: 10px;
}

.fee-table-footer {
    padding: 12px 16px 16px;
    margin-top: 0;
}

.fee-table-footer p,
.fee-table-footer .table-pagination {
    font-size: 11px;
}

.fee-pagination {
    gap: 10px;
}

.fee-table-footer .rows-select,
.fee-table-footer .page-nav {
    height: 24px;
    min-width: 24px;
    font-size: 10px;
    border-radius: 7px;
}

.fee-table-footer .rows-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.exam-page {
    padding-top: 6px;
}

.exam-page-intro {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.exam-page-intro h1 {
    margin: 0;
    font-size: 24px;
    color: #202754;
    font-weight: 800;
}

.exam-create-btn,
.exam-save-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.exam-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.exam-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 106px;
    padding: 18px 18px 16px;
    border: 1px solid #edf0f8;
    border-radius: 14px;
    background: #fff;
}

.exam-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 16px;
    color: #fff;
}

.exam-stat-card small {
    display: block;
    color: #2d3764;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 8px;
}

.exam-stat-card strong {
    color: #17234b;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.exam-stat-card p {
    margin: 12px 0 0;
    font-size: 10px;
    font-weight: 700;
}

.exam-stat-mini {
    margin-left: auto;
    margin-top: auto;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 11px;
    border: 1px solid #f0f2f9;
    background: #fff;
}

.exam-stat-card.tone-violet .exam-stat-icon { background: #4f2fff; }
.exam-stat-card.tone-green .exam-stat-icon { background: #1cc64b; }
.exam-stat-card.tone-amber .exam-stat-icon { background: #ff9808; }
.exam-stat-card.tone-blue .exam-stat-icon { background: #1f76ff; }
.exam-stat-card.tone-violet p { color: #6b5cff; }
.exam-stat-card.tone-green p { color: #1fb953; }
.exam-stat-card.tone-amber p { color: #f29b1f; }
.exam-stat-card.tone-blue p { color: #2f80ff; }
.exam-stat-card.tone-violet .exam-stat-mini { color: #6b5cff; }
.exam-stat-card.tone-green .exam-stat-mini { color: #1fb953; }
.exam-stat-card.tone-amber .exam-stat-mini { color: #f29b1f; }
.exam-stat-card.tone-blue .exam-stat-mini { color: #2f80ff; }

.exam-form-card,
.exam-table-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #eef1f9;
    background: #fff;
}

.exam-form-card,
.exam-table-card {
    padding: 14px;
    border-radius: 18px;
}

.exam-form-card {
    margin-bottom: 18px;
}

.exam-form-card .admin-panel-head,
.exam-table-head {
    margin-bottom: 12px;
}

.exam-form-card .admin-panel-head h2,
.exam-table-head h2 {
    font-size: 15px;
}

.exam-create-form {
    display: grid;
    gap: 14px;
}

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

.exam-form-grid .form-field {
    gap: 7px;
}

.exam-form-grid .form-field label,
.exam-status-field label {
    font-size: 11px;
    font-weight: 800;
    color: #364e73;
}

.exam-form-grid .form-field input,
.exam-form-grid .form-field select {
    height: 30px;
    border-radius: 6px;
    font-size: 11px;
    padding: 0 10px;
    border-color: #e5ebf7;
    color: #29456b;
}

.exam-form-grid .input-icon-field i {
    right: 10px;
    font-size: 11px;
    color: #7f90a8;
}

.exam-toggle-group {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #e3ebf7;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.exam-toggle-chip {
    min-width: 34px;
    height: 30px;
    border: 0;
    background: #fff;
    color: #5e7090;
    font-size: 10px;
    font-weight: 800;
    padding: 0 12px;
    cursor: pointer;
}

.exam-toggle-chip + .exam-toggle-chip {
    border-left: 1px solid #e3ebf7;
}

.exam-toggle-chip.active {
    background: linear-gradient(180deg, #2970f4 0%, #1d61eb 100%);
    color: #fff;
}

.exam-toggle-chip.success.active {
    background: #eaf9ef;
    color: #1da962;
}

.exam-form-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.exam-status-field {
    max-width: 240px;
}

.exam-status-group .exam-toggle-chip {
    min-width: 54px;
}

.exam-form-actions,
.exam-table-toolbar {
    display: flex;
    align-items: center;
}

.exam-form-actions {
    gap: 10px;
}

.exam-reset-btn {
    height: 34px;
    min-width: 72px;
    justify-content: center;
    font-size: 11px;
}

.exam-table-head {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.exam-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exam-table-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f6f2ff 0%, #eee5ff 100%);
    color: #5a2df2;
}

.exam-table-head h2 {
    margin: 0;
    font-size: 16px;
    color: #202754;
    font-weight: 800;
}

.exam-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.exam-export-btn {
    min-width: 110px;
    height: 38px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eef1f8;
    color: #384674;
    font-size: 12px;
    font-weight: 800;
}

.exam-export-btn.exam-export-excel {
    background: #f3fbf5;
    border-color: #e0f3e5;
    color: #1ca05c;
}

.exam-export-btn.exam-export-pdf {
    background: #fff5f5;
    border-color: #f8e3e5;
    color: #f2545b;
}

.exam-export-btn.exam-export-print {
    background: #f6f2ff;
    border-color: #ece4ff;
    color: #5a2df2;
}

.exam-export-btn .fa-file-excel { color: #1ca05c; }
.exam-export-btn .fa-file-pdf { color: #f2545b; }
.exam-export-btn .fa-print { color: #5a2df2; }

.exam-table-wrap {
    border: 1px solid #edf0f8;
    border-radius: 14px;
    overflow: hidden;
}

.exam-table {
    min-width: 1100px;
}

.exam-table thead th {
    font-size: 11px;
    padding: 9px 10px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-bottom: 0;
}

.exam-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    vertical-align: middle;
    color: #3f4b75;
    border-bottom: 1px solid #f1f3f9;
    background: #fff;
}

.exam-table tbody td strong {
    font-size: 12px;
    color: #2b3470;
}

.exam-table .status-pill {
    min-width: 76px;
    height: 22px;
    font-size: 10px;
    padding: 0 10px;
}

.exam-table .action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
    box-shadow: none;
}

.exam-table .action-btn.view {
    background: #f4efff;
    color: #8c61ff;
}

.exam-table .action-btn.edit {
    background: #eff5ff;
    color: #4f8dff;
}

.exam-table .action-btn.delete {
    background: #fff0f1;
    color: #ff6b74;
}

.exam-table .status-pill.upcoming {
    background: #f1ecff;
    color: #7c59f3;
}

.exam-table .status-pill.ongoing {
    background: #eaf9ef;
    color: #1da962;
}

.exam-table .status-pill.completed {
    background: #eef5ff;
    color: #2f80ff;
}

.exam-table .status-pill.cancelled {
    background: #fff0f3;
    color: #f15f7c;
}

.exam-table-footer {
    margin-top: 16px;
}

.exam-table-footer .table-pagination {
    gap: 10px;
}

.exam-table-footer .rows-select,
.exam-table-footer .page-nav {
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    font-size: 12px;
    border: 1px solid #edf0f8;
    background: #fff;
    color: #5f6d92;
}

.exam-table-footer .rows-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.exam-table-footer .page-nav.active {
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 1200px) {
    .exam-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .exam-page-intro,
    .exam-table-head {
        flex-direction: column;
        align-items: stretch;
    }

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

    .exam-table-toolbar {
        flex-wrap: wrap;
    }
}

.question-page {
    padding-top: 12px;
}

.question-page-intro {
    margin-bottom: 14px;
}

.question-page-intro h1 {
    font-size: 24px;
    margin-bottom: 2px;
}

.question-page-intro p {
    font-size: 15px;
}

.question-top-actions,
.question-form-actions,
.question-toolbar,
.question-form-bottom,
.question-inline-action {
    display: flex;
    align-items: center;
}

.question-top-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.question-main-btn,
.question-save-btn {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0 12px 22px rgba(32, 92, 219, 0.18);
}

.question-form-card,
.question-table-card {
    padding: 12px;
    border-radius: 12px;
}

.question-form-card {
    margin-bottom: 18px;
    padding: 0;
    border: 1px solid #edf0f8;
    background: #fff;
}

.question-form-head,
.question-table-head {
    margin-bottom: 12px;
}

.question-form-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #eef1fa;
}

.question-form-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.question-form-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    color: #fff;
    font-size: 17px;
}

.question-form-hero h2 {
    margin: 0;
    font-size: 24px;
    color: #202754;
    font-weight: 800;
}

.question-form-hero p {
    margin: 6px 0 0;
    color: #5f6f93;
    font-size: 14px;
    font-weight: 600;
}

.question-form-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.question-header-reset,
.question-header-save,
.question-header-cancel {
    height: 44px;
    min-width: 132px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

.question-header-cancel,
.question-header-reset {
    border: 1px solid #e7ebf6;
    background: #fff;
    color: #2f3d6b;
}

.question-inline-action {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.question-inline-action small {
    color: #6f8096;
    font-size: 12px;
}

.question-multiple-btn {
    height: 42px;
    min-width: 132px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #cfc7ff;
    color: #5a2df2;
    background: #fff;
    justify-content: center;
}

.question-create-form {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.question-repeat-list {
    display: grid;
    gap: 18px;
}

.question-form-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 14px;
}

.question-section-card,
.question-side-card,
.question-item-card {
    padding: 16px;
    border: 1px solid #edf0f8;
    border-radius: 14px;
    background: #fff;
}

.question-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.question-section-title span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f4efff 0%, #ebe1ff 100%);
    color: #5a2df2;
    font-size: 13px;
}

.question-section-title h3 {
    margin: 0;
    color: #202754;
    font-size: 21px;
    font-weight: 800;
}

.question-side-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.question-side-card .question-section-title {
    margin-bottom: 10px;
}

.question-side-card p {
    margin: 0 0 18px;
    color: #7a86a7;
    font-size: 13px;
    line-height: 1.45;
}

.question-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.question-item-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.question-remove-btn {
    height: 30px;
    border-radius: 6px;
    font-size: 11px;
}

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

.question-form-grid-top {
    grid-template-columns: 2fr 1.1fr 0.9fr;
}

.question-span-2 {
    grid-column: span 1;
}

.question-create-form .form-field {
    gap: 7px;
}

.question-create-form .form-field label,
.question-answer-field label {
    font-size: 14px;
    font-weight: 800;
    color: #202754;
}

.question-create-form .form-field input,
.question-create-form .form-field select,
.question-create-form .form-field textarea {
    border: 1px solid #e7ebf6;
    border-radius: 8px;
    color: #29456b;
    font-size: 14px;
    background: #fff;
}

.question-create-form .form-field input,
.question-create-form .form-field select {
    height: 48px;
    padding: 0 14px;
}

.question-create-form .form-field textarea {
    width: 1041px;
    padding: 14px 16px;
    resize: vertical;
    min-height: 128px;
    outline: none;
}

.question-create-form .form-field small {
    color: #8b9ab0;
    font-size: 11px;
}

.question-create-form .input-icon-field i {
    right: 14px;
    font-size: 11px;
}

.question-textarea-wrap {
    position: relative;
}

.question-textarea-wrap small {
    position: absolute;
    right: 14px;
    bottom: 12px;
    margin: 0;
}

.question-full {
    width: 100%;
    grid-column: 1 / -1;
}

.question-answer-options {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.question-answer-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 82px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #e7ebf6;
    border-radius: 8px;
    color: #324a71;
    font-size: 14px;
    font-weight: 700;
    background: #fff;
}

.question-answer-choice input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #5e35ff;
}

.question-answer-choice.is-active {
    border-color: #cfc7ff;
    background: #f8f4ff;
}

.question-form-bottom {
    justify-content: space-between;
    gap: 12px;
}

.question-answer-field {
    max-width: none;
}

@media (max-width: 1200px) {
    .question-form-overview {
        grid-template-columns: 1fr;
    }
}

.question-table-head {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.question-page {
    padding-top: 6px;
}

.question-page-intro {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.question-page-intro h1 {
    margin: 0;
    font-size: 24px;
    color: #202754;
    font-weight: 800;
}

.question-main-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.question-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.question-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 98px;
    padding: 16px 16px 14px;
    border: 1px solid #eceffa;
    border-radius: 12px;
    background: #fff;
    position: relative;
}

.question-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 16px;
}

.question-stat-card small {
    display: block;
    color: #2d3764;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.2;
}

.question-stat-card strong {
    color: #17234b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}

.question-stat-card p {
    margin: 12px 0 0;
    font-size: 10px;
    font-weight: 700;
}

.question-stat-mini {
    margin-left: auto;
    margin-top: auto;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 10px;
    border: 1px solid #f0f2f9;
    background: #fff;
}

.question-stat-card.tone-violet .question-stat-icon { background: #4f2fff; color: #fff; }
.question-stat-card.tone-green .question-stat-icon { background: #1cc64b; color: #fff; }
.question-stat-card.tone-amber .question-stat-icon { background: #ff9808; color: #fff; }
.question-stat-card.tone-blue .question-stat-icon { background: #1f76ff; color: #fff; }
.question-stat-card.tone-magenta .question-stat-icon { background: #9d46ff; color: #fff; }

.question-stat-card.tone-violet p { color: #6b5cff; }
.question-stat-card.tone-green p { color: #1fb953; }
.question-stat-card.tone-amber p { color: #f29b1f; }
.question-stat-card.tone-blue p { color: #2f80ff; }
.question-stat-card.tone-magenta p { color: #8d5bff; }

.question-stat-card.tone-violet .question-stat-mini { color: #6b5cff; }
.question-stat-card.tone-green .question-stat-mini { color: #1fb953; }
.question-stat-card.tone-amber .question-stat-mini { color: #f29b1f; }
.question-stat-card.tone-blue .question-stat-mini { color: #2f80ff; }
.question-stat-card.tone-magenta .question-stat-mini { color: #8d5bff; }

.question-toolbar-card,
.question-table-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #eef1f9;
    background: #fff;
}

.question-toolbar-card {
    margin-bottom: 18px;
    padding: 12px 14px;
}

.question-toolbar-form {
    display: grid;
    gap: 14px;
}

.question-search-wide input {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e8ebf6;
    font-size: 12px;
}

.question-toolbar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.question-export-btn {
    min-width: 108px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eef1f8;
    color: #384674;
    font-size: 12px;
    font-weight: 800;
}

.question-export-btn .fa-file-excel { color: #1ca05c; }
.question-export-btn .fa-file-pdf { color: #f2545b; }
.question-export-pdf { color: #f2545b; }

.question-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.question-toolbar-select select,
.question-reset-inline {
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
}

.question-toolbar-select select {
    min-width: 100%;
    padding: 0 30px 0 12px;
    border: 1px solid #e0e8f5;
    color: #2a315f;
    background: #fff;
}

.question-toolbar-select i {
    right: 10px;
    font-size: 10px;
    color: #6c76a0;
}

.question-reset-inline {
    border: 1px solid #e8ebf6;
    background: #fff;
    color: #384674;
    justify-content: center;
}

.question-table-head {
    display: none;
}

.question-table-wrap {
    border: 1px solid #edf0f8;
    border-radius: 14px;
    overflow: hidden;
}

.question-table {
    min-width: 1320px;
}

.question-table thead th {
    font-size: 11px;
    padding: 9px 10px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-bottom: 0;
}

.question-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    vertical-align: middle;
    color: #3f4b75;
    border-bottom: 1px solid #f1f3f9;
    background: #fff;
}

.question-table tbody td strong {
    font-size: 12px;
    color: #2b3470;
}

.question-table input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: #5e35ff;
}

.question-table .status-pill {
    min-width: 52px;
    height: 22px;
    font-size: 10px;
    padding: 0 10px;
}

.question-table .status-pill.inactive {
    background: #fff0f3;
    color: #f15f7c;
}

.question-table .action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
    box-shadow: none;
}

.question-table .action-btn.view {
    background: #f4efff;
    color: #8c61ff;
}

.question-table .action-btn.edit {
    background: #eff5ff;
    color: #4f8dff;
}

.question-table .action-btn.delete {
    background: #fff0f1;
    color: #ff6b74;
}

.question-table-footer {
    margin-top: 16px;
}

.question-table-footer p,
.question-table-footer .table-pagination,
.question-top-actions .session-tool-btn {
    font-size: 12px;
}

@media (max-width: 1200px) {
    .question-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 767px) {
    .question-page-intro {
        flex-direction: column;
        align-items: stretch;
    }

    .question-stats-grid,
    .question-filter-grid {
        grid-template-columns: 1fr;
    }

    .question-toolbar-actions {
        justify-content: stretch;
    }
}

.student-selection-page {
    padding-top: 6px;
}

.student-selection-intro {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.selection-hero-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selection-hero-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f6f2ff 0%, #eee5ff 100%);
    color: #5a2df2;
    box-shadow: none;
}

.student-selection-intro h1 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #202754;
}

.student-selection-topbar,
.selection-filter-actions,
.selection-table-head {
    display: flex;
    align-items: center;
}

.selection-count-card {
    min-width: 154px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7def1;
    border-radius: 14px;
    background: linear-gradient(180deg, #f4f7ff 0%, #eaf0ff 100%);
    box-shadow: none;
}

.selection-count-card span {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #edf3ff;
    color: #2c6ff0;
}

.selection-count-card small {
    display: block;
    color: #5f7396;
    font-size: 11px;
    margin-bottom: 2px;
}

.selection-count-card strong {
    font-size: 20px;
    color: #193666;
}

.selection-save-btn,
.selection-apply-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: none;
}

.selection-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.selection-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 14px;
    border: 1px solid #d7def1;
    border-radius: 16px;
    background: linear-gradient(180deg, #f4f7ff 0%, #eaf0ff 100%);
    box-shadow: none;
}

.selection-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 16px;
}

.selection-stat-card small {
    display: block;
    color: #4e5a86;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

.selection-stat-card strong {
    color: #1e2752;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.selection-stat-card p {
    margin: 7px 0 0;
    color: #68749b;
    font-size: 11px;
    font-weight: 700;
}

.selection-stat-card.tone-violet .selection-stat-icon { background: linear-gradient(180deg, #f0e9ff 0%, #eadfff 100%); color: #6a33ff; }
.selection-stat-card.tone-blue .selection-stat-icon { background: linear-gradient(180deg, #e9f3ff 0%, #dcebff 100%); color: #2d83ff; }
.selection-stat-card.tone-green .selection-stat-icon { background: linear-gradient(180deg, #e8f8ee 0%, #dcf4e5 100%); color: #28a765; }
.selection-stat-card.tone-lavender .selection-stat-icon { background: linear-gradient(180deg, #f1ebff 0%, #ebe2ff 100%); color: #7d55f6; }

.selection-filter-card,
.selection-table-card,
.selection-assignment-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #d9e0f2;
    box-shadow: none;
}

.selection-filter-card {
    margin-bottom: 18px;
}

.selection-filter-form {
    display: grid;
    gap: 14px;
}

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

.selection-filter-form .form-field {
    gap: 7px;
}

.selection-filter-form .form-field label {
    font-size: 12px;
    font-weight: 800;
    color: #2e3968;
}

.selection-filter-form .form-field input,
.selection-filter-form .form-field select {
    height: 32px;
    border: 1px solid #e8ebf6;
    border-radius: 8px;
    padding: 0 12px;
    color: #2a315f;
    font-size: 12px;
    background: #fff;
}

.selection-filter-form .input-icon-field i {
    right: 12px;
    font-size: 10px;
    color: #6c76a0;
}

.selection-filter-actions {
    justify-content: center;
    gap: 10px;
}

.selection-reset-btn {
    height: 40px;
    font-size: 12px;
    border-radius: 8px;
    min-width: 112px;
    background: #fff;
    border: 1px solid #e8ebf6;
    color: #384674;
}

.selection-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.selection-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #d7def1;
    border-radius: 14px;
    background: linear-gradient(180deg, #f4f7ff 0%, #eaf0ff 100%);
    box-shadow: none;
    cursor: pointer;
}

.selection-action-card .selection-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.selection-action-card strong {
    display: block;
    font-size: 14px;
    color: #1e355d;
    margin-bottom: 3px;
}

.selection-action-card small {
    color: #6f8096;
    font-size: 11px;
}

.selection-action-card.tone-green {
    background: linear-gradient(180deg, #fcfffd 0%, #f6fbf8 100%);
}

.selection-action-card.tone-green .selection-action-icon {
    background: #eaf8ef;
    color: #1dad63;
}

.selection-action-card.tone-rose {
    background: linear-gradient(180deg, #fffdfd 0%, #fff6f7 100%);
}

.selection-action-card.tone-rose .selection-action-icon {
    background: #fff0f4;
    color: #ef5f7d;
}

.selection-table-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.selection-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selection-table-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f6f2ff 0%, #eee5ff 100%);
    color: #5a2df2;
}

.selection-table-head h2 {
    font-size: 22px;
    color: #1e2752;
}

.selection-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selection-export-btn {
    min-width: 86px;
    height: 38px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eef1f8;
    color: #384674;
    font-size: 12px;
    font-weight: 800;
}

.selection-export-btn .fa-file-excel {
    color: #1ca05c;
}

.selection-export-btn .fa-file-pdf {
    color: #f2545b;
}

.selection-export-pdf {
    color: #f2545b;
}

.selection-search input {
    height: 38px;
    width: 190px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #e8ebf6;
}

.selection-table-wrap {
    border: 1px solid #d9e0f2;
    border-radius: 14px;
    overflow: hidden;
}

.selection-table {
    min-width: 1080px;
}

.selection-table thead th {
    font-size: 11px;
    padding: 9px 10px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-bottom: 0;
}

.selection-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    color: #3f4b75;
    border-bottom: 1px solid #f1f3f9;
    background: #fff;
}

.selection-table tbody td strong {
    font-size: 12px;
    color: #2b3470;
}

.selection-table input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #5e35ff;
}

.selection-status-pill {
    min-width: 72px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 800;
}

.selection-status-pill.selected {
    background: #eaf9ef;
    color: #1da962;
}

.selection-status-pill.not-selected {
    background: #f2f4fb;
    color: #7b89a3;
}

.selection-table-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.selection-table-footer p,
.selection-table-footer .table-pagination {
    font-size: 12px;
    color: #68749b;
}

.selection-table-footer p {
    margin: 0;
}

.selection-table-footer .table-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-table-footer .page-nav {
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #edf0f8;
    background: #fff;
    color: #6c76a0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.selection-table-footer .page-nav.active {
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: none;
}

.selection-table-footer .page-nav.dots {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    padding: 0 2px;
}

.selection-table-card {
    margin-bottom: 18px;
}

.selection-assignment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.selection-assignment-head h2 {
    font-size: 20px;
    color: #1e2752;
}

.selection-assignment-head p {
    margin: 4px 0 0;
    color: #68749b;
    font-size: 12px;
}

.selection-assignment-tools {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.selection-assignment-card {
    padding: 16px;
}

.selection-assignment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.selection-assignment-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.selection-cancel-btn {
    height: 40px;
    min-width: 96px;
    border-radius: 8px;
    border: 1px solid #e8ebf6;
    background: #fff;
    color: #384674;
    font-size: 12px;
    font-weight: 800;
}

.selection-assignment-top h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #202754;
}

.selection-assignment-filter-form {
    display: grid;
    gap: 14px;
    padding: 12px 0 18px;
    border-top: 1px solid #eef1fa;
    border-bottom: 1px solid #eef1fa;
    margin-bottom: 14px;
}

.selection-assignment-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.selection-assignment-filter-form .form-field {
    gap: 7px;
}

.selection-assignment-filter-form .form-field label {
    font-size: 11px;
    font-weight: 800;
    color: #2e3968;
}

.selection-assignment-filter-form .form-field select {
    height: 36px;
    border: 1px solid #e8ebf6;
    border-radius: 8px;
    padding: 0 34px 0 12px;
    color: #2a315f;
    font-size: 12px;
    background: #fff;
}

.selection-assignment-filter-form .input-icon-field i {
    right: 12px;
    font-size: 10px;
    color: #6c76a0;
}

.selection-assignment-filter-actions {
    justify-content: center;
}

.selection-assignment-summary {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 18px;
    padding: 20px 16px;
    border: 1px solid #edf0f8;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    margin-bottom: 16px;
}

.selection-assignment-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selection-assignment-summary-card span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    box-shadow: none;
}

.selection-assignment-summary-card small {
    display: block;
    color: #3d4b80;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 4px;
}

.selection-assignment-summary-card strong {
    display: block;
    color: #1e2752;
    font-size: 18px;
    font-weight: 800;
}

.selection-assignment-divider {
    width: 1px;
    height: 44px;
    background: #dfe5f3;
}

.selection-student-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.selection-inline-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
    color: #6c76a0;
    font-size: 12px;
    font-weight: 700;
}

.selection-inline-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #5a2df2;
    font-size: 12px;
    font-weight: 800;
    padding: 0;
}

.selection-student-wrap {
    border: 1px solid #edf0f8;
    border-radius: 14px;
    overflow: hidden;
}

.selection-student-table {
    min-width: 1180px;
}

.selection-student-table thead th {
    font-size: 11px;
    padding: 9px 10px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
}

.selection-student-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    color: #3f4b75;
    border-bottom: 1px solid #f1f3f9;
    background: #fff;
}

.selection-student-table tbody td strong {
    color: #2b3470;
}

.selection-student-table input[type="checkbox"] {
    accent-color: #5e35ff;
}

@media (max-width: 1200px) {
    .selection-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

@media (max-width: 767px) {
    .student-selection-intro,
    .selection-table-head,
    .selection-table-footer,
    .selection-assignment-head {
        flex-direction: column;
        align-items: stretch;
    }

    .selection-stats-grid,
    .selection-filter-grid,
    .selection-action-grid {
        grid-template-columns: 1fr;
    }

    .selection-assignment-filter-grid,
    .selection-assignment-summary {
        grid-template-columns: 1fr;
    }

    .selection-assignment-divider {
        display: none;
    }

    .selection-table-toolbar,
    .selection-assignment-tools,
    .selection-filter-actions,
    .selection-student-panel-head,
    .selection-assignment-top,
    .selection-inline-meta {
        flex-wrap: wrap;
    }
}

.books-page {
    padding-top: 6px;
}

.books-page-intro {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.books-hero-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.books-hero-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f6f2ff 0%, #eee5ff 100%);
    color: #5a2df2;
    box-shadow: 0 12px 30px rgba(100, 58, 240, 0.12);
}

.books-page-intro h1 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #202754;
}

.books-add-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(88, 44, 242, 0.26);
}

.books-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.books-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 14px;
    border: 1px solid #eff2fb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(31, 57, 102, 0.06);
}

.books-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 16px;
}

.books-stat-card small {
    display: block;
    color: #4e5a86;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

.books-stat-card strong {
    color: #1e2752;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.books-stat-card p {
    margin: 7px 0 0;
    color: #68749b;
    font-size: 11px;
    font-weight: 700;
}

.books-stat-card.tone-violet .books-stat-icon { background: linear-gradient(180deg, #f0e9ff 0%, #eadfff 100%); color: #6a33ff; }
.books-stat-card.tone-blue .books-stat-icon { background: linear-gradient(180deg, #e9f3ff 0%, #dcebff 100%); color: #2d83ff; }
.books-stat-card.tone-green .books-stat-icon { background: linear-gradient(180deg, #e8f8ee 0%, #dcf4e5 100%); color: #28a765; }
.books-stat-card.tone-amber .books-stat-icon { background: linear-gradient(180deg, #fff2e4 0%, #ffe7ca 100%); color: #f09b38; }
.books-stat-card.tone-rose .books-stat-icon { background: linear-gradient(180deg, #ffeef0 0%, #ffe1e6 100%); color: #f16273; }

.books-filter-card,
.books-table-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #f0f2fa;
    box-shadow: 0 18px 44px rgba(31, 57, 102, 0.05);
}

.books-filter-card {
    margin-bottom: 18px;
}

.book-form-card {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 14px;
}

.book-form-head {
    margin-bottom: 12px;
}

.book-form-head h2 {
    font-size: 18px;
}

.book-create-form {
    display: grid;
    gap: 14px;
}

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

.book-form-grid .form-field {
    gap: 7px;
}

.book-form-grid .form-field label {
    font-size: 12px;
    font-weight: 800;
    color: #364e73;
}

.book-form-grid .form-field input,
.book-form-grid .form-field select {
    height: 36px;
    border: 1px solid #e5ebf7;
    border-radius: 6px;
    padding: 0 12px;
    color: #29456b;
    font-size: 12px;
    background: #fff;
}

.book-form-grid .input-icon-field i {
    right: 10px;
    font-size: 10px;
}

.book-form-note {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #dbe8ff;
    border-radius: 6px;
    background: #f7faff;
    color: #3e68a4;
    font-size: 11px;
    font-weight: 700;
}

.book-form-note i {
    color: #2d70ef;
}

.book-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.book-form-actions .session-tool-btn,
.book-form-actions .admin-primary-btn {
    height: 36px;
    border-radius: 6px;
    font-size: 12px;
}

.books-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px 160px auto;
    gap: 16px;
    align-items: end;
}

.books-filter-grid .form-field {
    gap: 7px;
}

.books-filter-grid .form-field label {
    font-size: 12px;
    font-weight: 800;
    color: #2e3968;
}

.books-filter-grid .form-field input,
.books-filter-grid .form-field select,
.books-search input {
    height: 32px;
    border: 1px solid #e8ebf6;
    border-radius: 8px;
    font-size: 12px;
    color: #2a315f;
    background: #fff;
}

.books-filter-grid .form-field input {
    padding: 0 12px;
}

.books-filter-grid .form-field select {
    padding: 0 34px 0 12px;
}

.books-filter-grid .input-icon-field i {
    right: 12px;
    font-size: 10px;
    color: #6c76a0;
}

.books-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.books-filter-submit,
.books-filter-reset {
    height: 40px;
    min-width: 100px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.books-filter-reset {
    background: #fff;
    border: 1px solid #e8ebf6;
    color: #384674;
}

.books-table-head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.books-table-head h2 {
    font-size: 22px;
    color: #1e2752;
}

.books-table-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.books-export-btn {
    min-width: 86px;
    height: 38px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eef1f8;
    color: #384674;
    font-size: 12px;
    font-weight: 800;
}

.books-export-btn i {
    font-size: 14px;
}

.books-export-btn .fa-file-excel {
    color: #1ca05c;
}

.books-export-btn .fa-file-pdf {
    color: #f2545b;
}

.books-export-pdf {
    color: #f2545b;
}

.books-table-wrap {
    border: 1px solid #edf0f8;
    border-radius: 14px;
    overflow: hidden;
}

.books-table {
    min-width: 1180px;
}

.books-table thead th {
    font-size: 11px;
    padding: 9px 10px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-bottom: 0;
}

.books-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    vertical-align: middle;
    color: #3f4b75;
    border-bottom: 1px solid #f1f3f9;
    background: #fff;
}

.books-table tbody td strong {
    font-size: 12px;
    color: #2b3470;
    font-weight: 700;
}

.book-name-cell {
    display: flex;
    align-items: center;
    gap: 0;
}

.books-table .action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
    box-shadow: none;
    border: 1px solid transparent;
}

.books-table .action-btn.view {
    background: #f4efff;
    color: #8c61ff;
}

.books-table .action-btn.edit {
    background: #eff5ff;
    color: #4f8dff;
}

.books-table .action-btn.delete {
    background: #fff0f1;
    color: #ff6b74;
}

.books-table-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.books-table-footer p,
.books-table-footer .table-pagination {
    font-size: 12px;
    color: #68749b;
}

.books-table-footer p {
    margin: 0;
}

.books-table-footer .table-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.books-table-footer .page-nav {
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #edf0f8;
    background: #fff;
    color: #6c76a0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.books-table-footer .page-nav.active {
    background: linear-gradient(90deg, #4e22ec 0%, #6734ff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(95, 44, 255, 0.2);
}

.books-table-footer .page-nav.dots {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    padding: 0 2px;
}

@media (max-width: 1200px) {
    .books-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 767px) {
    .books-page-intro,
    .books-table-head,
    .books-table-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .books-stat-grid,
    .books-filter-grid {
        grid-template-columns: 1fr;
    }

    .books-table-tools,
    .books-filter-actions {
        flex-wrap: wrap;
    }
}

.book-in-page {
    padding-top: 12px;
}

.book-in-intro {
    margin-bottom: 14px;
}

.book-in-intro h1 {
    font-size: 24px;
    margin-bottom: 2px;
}

.book-in-intro p {
    font-size: 14px;
}

.book-in-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.book-in-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e8edf7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(34, 73, 138, 0.04);
}

.book-in-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.book-in-stat-card small {
    display: block;
    color: #5f7396;
    font-size: 11px;
    margin-bottom: 4px;
}

.book-in-stat-card strong {
    color: #193666;
    font-size: 28px;
}

.book-in-stat-card.tone-blue .book-in-stat-icon { background: #edf3ff; color: #2c6ff0; }
.book-in-stat-card.tone-green .book-in-stat-icon { background: #eaf8ef; color: #1dad63; }
.book-in-stat-card.tone-amber .book-in-stat-icon { background: #fff2e1; color: #f0a126; }
.book-in-stat-card.tone-violet .book-in-stat-icon { background: #f2ecff; color: #7b4de0; }

.book-in-form-card,
.book-in-table-card {
    padding: 12px;
    border-radius: 12px;
}

.book-in-form-card {
    margin-bottom: 14px;
}

.book-in-form-head {
    margin-bottom: 12px;
}

.book-in-form-head h2 {
    font-size: 18px;
}

.book-in-form {
    display: grid;
    gap: 14px;
}

.book-in-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

.book-in-form-grid .form-field {
    gap: 7px;
}

.book-in-form-grid .form-field label {
    font-size: 12px;
    font-weight: 800;
    color: #364e73;
}

.book-in-form-grid .form-field input,
.book-in-form-grid .form-field select,
.book-in-form-grid .form-field textarea {
    border: 1px solid #e5ebf7;
    border-radius: 6px;
    color: #29456b;
    font-size: 12px;
    background: #fff;
}

.book-in-form-grid .form-field input,
.book-in-form-grid .form-field select {
    height: 36px;
    padding: 0 12px;
}

.book-in-form-grid .form-field textarea {
    min-height: 42px;
    padding: 10px 12px;
    resize: vertical;
}

.book-in-form-grid .input-icon-field i {
    right: 10px;
    font-size: 10px;
}

.book-in-remarks-field {
    grid-column: span 2;
}

.book-in-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.book-in-form-actions .session-tool-btn,
.book-in-form-actions .admin-primary-btn {
    height: 36px;
    border-radius: 6px;
    font-size: 12px;
}

.book-in-tab-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.book-in-tab {
    height: 32px;
    border: 0;
    background: transparent;
    color: #384f75;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.book-in-tab.active {
    color: #256af0;
    border-color: #256af0;
}

.book-in-view-btn {
    margin-left: auto;
    height: 32px;
    font-size: 11px;
    border-radius: 6px;
}

.book-in-table-wrap {
    border: 1px solid #eef2f9;
    border-radius: 10px;
}

.book-in-table {
    min-width: 1080px;
}

.book-in-table thead th {
    font-size: 11px;
    padding: 12px 10px;
}

.book-in-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
}

.book-in-table tbody td strong {
    font-size: 12px;
}

.book-in-table .action-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 10px;
}

.book-in-table-footer {
    margin-top: 10px;
}

.book-in-table-footer p,
.book-in-table-footer .table-pagination {
    font-size: 12px;
}

.book-issue-page {
    padding-top: 12px;
}

.book-issue-intro {
    margin-bottom: 14px;
}

.book-issue-intro h1 {
    font-size: 24px;
    margin-bottom: 2px;
}

.book-issue-intro p {
    font-size: 14px;
}

.book-issue-history-btn {
    height: 34px;
    border-radius: 6px;
    font-size: 12px;
}

.issue-stepper-card,
.issue-student-card,
.issue-book-list-card,
.issue-cart-card,
.issue-return-card,
.issue-submit-card,
.issue-history-card {
    padding: 12px;
    border-radius: 12px;
}

.issue-stepper-card,
.issue-student-card,
.issue-main-grid,
.issue-history-card {
    margin-bottom: 14px;
}

.issue-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.issue-step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-right: 1px solid #edf1f8;
}

.issue-step-item:last-child {
    border-right: 0;
}

.issue-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #9ca8bc;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.issue-step-item.active .issue-step-number {
    background: #256af0;
}

.issue-step-item strong {
    display: block;
    color: #22385f;
    font-size: 13px;
    margin-bottom: 2px;
}

.issue-step-item small {
    color: #7a8aa0;
    font-size: 10px;
}

.issue-section-title {
    color: #20365c;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
}

.issue-student-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.issue-student-form .form-field {
    gap: 7px;
}

.issue-student-form label,
.issue-return-form label {
    font-size: 12px;
    font-weight: 800;
    color: #364e73;
}

.issue-registration-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.issue-registration-row input,
.issue-return-form input,
.issue-return-form select {
    height: 36px;
    border: 1px solid #e5ebf7;
    border-radius: 6px;
    padding: 0 12px;
    color: #29456b;
    font-size: 12px;
    background: #fff;
}

.issue-fetch-btn {
    min-height: 36px;
    border-radius: 6px;
    font-size: 12px;
}

.issue-student-info-card {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #dfe9fb;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
}

.issue-student-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #f7d4c6 0%, #f4b596 100%);
    color: #1f4ea7;
    font-size: 18px;
    font-weight: 800;
}

.issue-student-meta {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.issue-student-meta small {
    display: block;
    color: #6c7d96;
    font-size: 10px;
    margin-bottom: 4px;
}

.issue-student-meta strong {
    color: #22385f;
    font-size: 12px;
}

.issue-main-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 14px;
    align-items: start;
}

.issue-main-grid > * ,
.issue-side-grid,
.issue-book-list-card,
.issue-cart-card,
.issue-return-card,
.issue-history-card {
    min-width: 0;
}

.issue-toolbar,
.issue-submit-actions {
    display: flex;
    align-items: center;
}

.issue-toolbar {
    gap: 10px;
    margin-bottom: 12px;
}

.issue-search input {
    width: 220px;
    height: 34px;
    font-size: 12px;
    border-radius: 6px;
}

.issue-book-table-wrap,
.issue-cart-table-wrap,
.issue-history-table-wrap {
    border: 1px solid #eef2f9;
    border-radius: 10px;
    overflow-x: auto;
}

.issue-book-table,
.issue-cart-table {
    min-width: 100%;
}

.issue-book-table thead th,
.issue-cart-table thead th,
.issue-history-table thead th {
    font-size: 11px;
    padding: 12px 10px;
}

.issue-book-table tbody td,
.issue-cart-table tbody td,
.issue-history-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    vertical-align: middle;
}

.issue-book-table tbody td strong,
.issue-cart-table tbody td strong,
.issue-history-table tbody td strong {
    font-size: 12px;
}

.issue-add-btn {
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
}

.issue-small-footer {
    margin-top: 10px;
}

.issue-small-footer p,
.issue-small-footer .table-pagination {
    font-size: 11px;
}

.issue-side-grid {
    display: grid;
    gap: 14px;
}

.issue-cart-head {
    margin-bottom: 10px;
}

.issue-cart-head h2 {
    margin: 0;
    color: #22385f;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.issue-cart-head h2 span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #ef445e;
    color: #fff;
    font-size: 9px;
}

.issue-cart-total {
    margin-top: 10px;
    color: #256af0;
    font-size: 11px;
    font-weight: 800;
}

.issue-return-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.issue-return-form .input-icon-field i {
    right: 10px;
    font-size: 10px;
}

.issue-policy-note {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #dbe8ff;
    border-radius: 6px;
    background: #f7faff;
    color: #3e68a4;
    font-size: 11px;
    font-weight: 700;
}

.issue-policy-note i {
    color: #2d70ef;
}

.issue-submit-actions {
    justify-content: flex-end;
}

.issue-submit-actions .admin-primary-btn {
    min-height: 36px;
    border-radius: 6px;
    font-size: 12px;
}

.issue-history-footer {
    margin-top: 10px;
}

.issue-history-footer p,
.issue-history-footer .table-pagination {
    font-size: 12px;
}

.book-return-page {
    padding-top: 12px;
}

.book-return-intro {
    margin-bottom: 14px;
}

.book-return-intro h1 {
    font-size: 24px;
    margin-bottom: 2px;
}

.book-return-intro p {
    font-size: 14px;
}

.book-return-history-btn {
    height: 34px;
    border-radius: 6px;
    font-size: 12px;
}

.book-return-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.return-stepper-card,
.return-issued-card,
.return-details-card,
.return-submit-card,
.return-summary-card {
    padding: 12px;
    border-radius: 12px;
}

.return-main-grid,
.return-left-grid,
.return-side-grid {
    display: grid;
    gap: 14px;
}

.return-main-grid {
    grid-template-columns: 1.05fr 0.55fr;
    align-items: start;
}

.return-issued-table-wrap {
    border: 1px solid #eef2f9;
    border-radius: 10px;
    overflow-x: auto;
}

.return-issued-table {
    min-width: 100%;
}

.return-issued-table thead th {
    font-size: 11px;
    padding: 12px 10px;
}

.return-issued-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    vertical-align: middle;
}

.return-issued-table input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #256af0;
}

.return-details-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
}

.return-details-form .form-field {
    gap: 7px;
}

.return-details-form label {
    font-size: 12px;
    font-weight: 800;
    color: #364e73;
}

.return-details-form input,
.return-details-form textarea {
    border: 1px solid #e5ebf7;
    border-radius: 6px;
    color: #29456b;
    font-size: 12px;
    background: #fff;
}

.return-details-form input {
    height: 36px;
    padding: 0 12px;
}

.return-details-form textarea {
    min-height: 42px;
    padding: 10px 12px;
    resize: vertical;
}

.return-details-form .input-icon-field i {
    right: 10px;
    font-size: 10px;
}

.return-summary-card .admin-panel-head,
.recent-return-table-card .admin-panel-head {
    margin-bottom: 12px;
}

.return-summary-card h2,
.recent-return-table-card h2 {
    font-size: 18px;
}

.recent-return-table-card {
    padding: 12px;
    border-radius: 12px;
}

.recent-return-table-wrap {
    border: 1px solid #eef2f9;
    border-radius: 10px;
    overflow-x: auto;
}

.recent-return-table {
    min-width: 100%;
}

.recent-return-table thead th {
    font-size: 11px;
    padding: 12px 10px;
}

.recent-return-table tbody td {
    font-size: 12px;
    padding: 12px 10px;
    vertical-align: middle;
}

.recent-return-table tbody td strong {
    font-size: 12px;
}

.return-view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #256af0;
    font-size: 12px;
    font-weight: 800;
    margin-top: 12px;
}

.return-summary-list {
    display: grid;
    gap: 14px;
}

.return-summary-list div {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px 12px;
    align-items: center;
}

.return-summary-list span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.return-summary-list .tone-blue { background: #edf3ff; color: #2c6ff0; }
.return-summary-list .tone-green { background: #eaf8ef; color: #1dad63; }
.return-summary-list .tone-rose { background: #fff0f4; color: #ef5f7d; }

.return-summary-list strong {
    color: #22385f;
    font-size: 24px;
}

.return-summary-list small {
    grid-column: 2;
    color: #6f8096;
    font-size: 11px;
    margin-top: -6px;
}

.return-summary-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.return-summary-inline-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8edf7;
    border-radius: 10px;
    background: #fff;
}

.return-summary-inline-card span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.return-summary-inline-card .tone-blue { background: #edf3ff; color: #2c6ff0; }
.return-summary-inline-card .tone-green { background: #eaf8ef; color: #1dad63; }
.return-summary-inline-card .tone-rose { background: #fff0f4; color: #ef5f7d; }

.return-summary-inline-card strong {
    display: block;
    color: #22385f;
    font-size: 22px;
}

.return-summary-inline-card small {
    color: #6f8096;
    font-size: 11px;
}

.session-form-card {
    margin-bottom: 14px;
}

.session-create-form {
    display: grid;
    gap: 16px;
}

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

.session-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.student-page-actions,
.student-filter-actions,
.student-summary-head {
    display: flex;
}

.student-page-actions {
    align-items: center;
    gap: 10px;
}

.student-filter-card,
.student-list-card {
    padding: 12px;
}

.student-filter-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.student-filter-grid .session-search label,
.student-filter-grid .form-field label {
    display: block;
    margin-bottom: 8px;
    color: #415676;
    font-size: 12px;
    font-weight: 700;
}

.student-filter-actions {
    align-items: center;
    gap: 8px;
}

.student-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.student-summary-card {
    border: 1px solid #e8edf7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(33, 67, 125, 0.04);
    padding: 12px 14px;
}

.student-summary-head {
    align-items: center;
    gap: 12px;
}

.student-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.student-summary-card.tone-blue .student-summary-icon { background: #e9f1ff; color: #256af0; }
.student-summary-card.tone-green .student-summary-icon { background: #eaf9ef; color: #1eaa63; }
.student-summary-card.tone-amber .student-summary-icon { background: #fff5e8; color: #f1a11d; }
.student-summary-card.tone-violet .student-summary-icon { background: #f3efff; color: #8b66ef; }
.student-summary-card.tone-cyan .student-summary-icon { background: #edf9fb; color: #1ca7bf; }

.student-summary-card small {
    display: block;
    color: #526983;
    margin-bottom: 5px;
}

.student-summary-card strong {
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
}

.student-summary-card span {
    color: #1f67ea;
    font-size: 12px;
    font-weight: 800;
}

.student-summary-card.tone-green span { color: #1eaa63; }
.student-summary-card.tone-amber span { color: #f1a11d; }

.admin-dashboard-body {
    background:
        radial-gradient(circle at top right, rgba(130, 95, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #fdfdff 0%, #faf8ff 100%);
    color: #223862;
}

.admin-content {
    padding: 18px 20px 22px;
}

.admin-panel-card,
.admin-metric-card,
.bottom-stat,
.users-stat-card,
.selection-action-card,
.books-stat-card,
.book-in-stat-card,
.circular-stat-grid > article,
.email-status-stat {
    border: 1px solid #f0eaf8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 38, 77, 0.05);
}

.admin-panel-card,
.admin-metric-card,
.bottom-stat {
    border-color: #f0eaf8;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(30, 38, 77, 0.05);
}

.admin-panel-head {
    margin-bottom: 14px;
}

.admin-panel-head h2,
.exam-table-head h2,
.question-table-head h2,
.books-table-head h2,
.student-report-table-card .admin-panel-head h2,
.circular-table-card .admin-panel-head h2,
.users-table-card .admin-panel-head h2 {
    color: #7345f4;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.admin-panel-head button,
.admin-panel-head a {
    border-radius: 10px;
}

.admin-breadcrumbs {
    gap: 10px;
    margin-bottom: 14px;
    color: #74809a;
    font-size: 12px;
    font-weight: 700;
}

.admin-breadcrumbs a {
    color: #64718c;
}

.admin-breadcrumbs span:last-child {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2ebff;
    color: #8754f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-page-intro {
    margin-bottom: 18px;
}

.admin-page-intro h1 {
    font-size: 22px;
    color: #173468;
}

.admin-page-intro p {
    color: #78849e;
    font-size: 13px;
}

.admin-primary-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
}

.admin-primary-btn.secondary {
    background: #f4ecff;
    color: #7c49f7;
    border-color: #eadffd;
}

.session-tool-btn,
.rows-select,
.page-nav {
    border-radius: 12px;
    border-color: #ebe5f7;
    color: #6d7894;
    box-shadow: 0 10px 24px rgba(33, 40, 78, 0.04);
}

.session-tool-btn {
    min-height: 38px;
    padding: 0 14px;
    font-weight: 800;
}

.session-search input {
    height: 40px;
    border-radius: 10px;
    border-color: #eee8f8;
    background: #fff;
}

.session-table-wrap,
.users-permission-table-wrap,
.selection-table-wrap,
.books-table-wrap,
.book-in-table-wrap,
.exam-table-wrap,
.question-table-wrap,
.recent-return-table-wrap,
.issue-history-table-wrap,
.issue-book-table-wrap,
.issue-cart-table-wrap,
.return-issued-table-wrap {
    border-radius: 14px;
    border-color: #f0eaf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.session-table thead th,
.exam-table thead th,
.question-table thead th,
.books-table thead th,
.book-in-table thead th,
.student-report-table th,
.selection-table thead th,
.circular-table thead th,
.payment-transactions-table thead th,
.users-permission-table thead th {
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    color: #fff;
}

.session-table tbody tr:nth-child(even),
.exam-table tbody tr:nth-child(even),
.question-table tbody tr:nth-child(even),
.books-table tbody tr:nth-child(even),
.book-in-table tbody tr:nth-child(even),
.student-report-table tbody tr:nth-child(even),
.selection-table tbody tr:nth-child(even),
.circular-table tbody tr:nth-child(even),
.payment-transactions-table tbody tr:nth-child(even) {
    background: #fcfbff;
}

.rows-select,
.page-nav {
    min-width: 34px;
    height: 34px;
}

.page-nav.active {
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    border-color: #6d43f4;
    color: #fff;
}

.status-pill,
.selection-status-pill {
    min-height: 24px;
    border-radius: 999px;
    font-weight: 800;
}

.status-pill.active,
.status-pill.completed,
.status-pill.yes,
.selection-status-pill.selected {
    background: #edfbf3;
    color: #24b56b;
}

.status-pill.inactive,
.status-pill.no,
.selection-status-pill.not-selected {
    background: #fff3eb;
    color: #f39a28;
}

.status-pill.upcoming {
    background: #f2ebff;
    color: #8754f7;
}

.action-btn,
.fee-action-btn,
.exam-table .action-btn,
.question-table .action-btn,
.books-table .action-btn,
.book-in-table .action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #f0eafb;
    background: #f7f4ff;
    color: #8a6bf6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    line-height: 1;
}

.action-btn i,
.fee-action-btn i {
    margin: 0;
    line-height: 1;
}

.action-btn.view {
    background: #f7f4ff;
    color: #8a6bf6;
    border-color: #f0eafb;
}

.action-btn.edit {
    background: #f6f1ff;
    color: #b07af8;
    border-color: #efe6ff;
}

.action-btn.delete,
.fee-action-btn.delete {
    background: #fff2f4;
    color: #ff6f87;
    border-color: #ffe3e8;
}

.action-btn:hover,
.session-tool-btn:hover,
.admin-primary-btn:hover {
    transform: translateY(-1px);
}

.admin-metric-card {
    border-radius: 18px;
    padding: 16px 16px 14px;
}

.admin-metric-card,
.users-stat-card,
.books-stat-card,
.book-in-stat-card,
.student-report-stat-card,
.exam-report-summary-card,
.exam-report-link-card,
.selection-action-card,
.bottom-stat {
    position: relative;
    overflow: hidden;
}

.admin-metric-card::after,
.users-stat-card::after,
.books-stat-card::after,
.book-in-stat-card::after,
.student-report-stat-card::after,
.exam-report-summary-card::after,
.exam-report-link-card::after,
.selection-action-card::after,
.bottom-stat::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 12px;
    width: 92px;
    height: 34px;
    background:
        radial-gradient(circle at 12px 22px, currentColor 0 2px, transparent 3px),
        linear-gradient(135deg, transparent 0 12%, currentColor 12% 15%, transparent 15% 100%);
    opacity: 0.08;
    pointer-events: none;
}

.admin-metric-card.tone-blue,
.users-stat-card.tone-blue,
.books-stat-card.tone-blue,
.book-in-stat-card.tone-blue,
.selection-action-card.tone-blue {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

.admin-metric-card.tone-green,
.users-stat-card.tone-green,
.books-stat-card.tone-green,
.book-in-stat-card.tone-green,
.selection-action-card.tone-green {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

.admin-metric-card.tone-amber,
.books-stat-card.tone-amber,
.book-in-stat-card.tone-amber {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

.admin-metric-card.tone-rose,
.users-stat-card.tone-rose,
.selection-action-card.tone-rose {
    background: linear-gradient(180deg, #fffdfd 0%, #fff7fb 100%);
}

.admin-metric-card.tone-violet,
.users-stat-card.tone-violet {
    background: linear-gradient(180deg, #fdfbff 0%, #f9f5ff 100%);
}

.admin-metric-icon,
.books-stat-icon,
.book-in-stat-icon,
.selection-action-card .selection-action-icon,
.bottom-stat-icon {
    color: #fff;
}

.admin-metric-card.tone-blue .admin-metric-icon,
.bottom-stat.tone-blue .bottom-stat-icon { background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%); color: #fff; }
.admin-metric-card.tone-green .admin-metric-icon,
.bottom-stat.tone-green .bottom-stat-icon { background: linear-gradient(135deg, #11b86a 0%, #36d78a 100%); color: #fff; }
.admin-metric-card.tone-violet .admin-metric-icon,
.bottom-stat.tone-violet .bottom-stat-icon { background: linear-gradient(135deg, #8b57ff 0%, #a876ff 100%); color: #fff; }
.admin-metric-card.tone-amber .admin-metric-icon,
.bottom-stat.tone-amber .bottom-stat-icon { background: linear-gradient(135deg, #ff941c 0%, #ffb13e 100%); color: #fff; }
.admin-metric-card.tone-rose .admin-metric-icon,
.bottom-stat.tone-rose .bottom-stat-icon { background: linear-gradient(135deg, #ef2f80 0%, #ff5575 100%); color: #fff; }
.bottom-stat.tone-cyan .bottom-stat-icon { background: linear-gradient(135deg, #20b9ce 0%, #45d5df 100%); color: #fff; }

.users-stat-card {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(30, 38, 77, 0.05);
    padding: 16px 18px;
}

.users-table-card,
.users-filter-card,
.books-filter-card,
.books-table-card,
.book-form-card,
.book-in-form-card,
.book-in-table-card,
.exam-form-card,
.exam-table-card,
.question-form-card,
.question-table-card,
.selection-filter-card,
.selection-table-card,
.circular-form-card,
.circular-table-card,
.student-report-filter-card,
.student-report-table-card,
.payment-settings-card,
.payment-transactions-card,
.payment-gateway-status-card,
.email-settings-card,
.general-settings-card,
.website-page-main-card,
.website-side-card {
    border-radius: 18px;
    border-color: #f0eaf8;
    box-shadow: 0 18px 40px rgba(30, 38, 77, 0.05);
}

.users-stat-card small,
.books-stat-card small,
.book-in-stat-card small,
.student-report-stat-card small,
.exam-report-summary-card small,
.selection-action-card small,
.bottom-stat small {
    color: #556683;
    font-weight: 700;
}

.users-stat-card strong,
.books-stat-card strong,
.book-in-stat-card strong,
.student-report-stat-card strong,
.exam-report-summary-card strong,
.bottom-stat strong {
    color: #1c345f;
    font-family: "Montserrat", sans-serif;
}

.books-stat-card,
.book-in-stat-card,
.selection-action-card,
.student-report-stat-card,
.exam-report-summary-card,
.exam-report-link-card {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(30, 38, 77, 0.05);
}

.books-stat-card,
.book-in-stat-card,
.selection-action-card,
.exam-report-link-card {
    padding: 16px 18px;
}

.student-report-stat-card,
.exam-report-summary-card {
    padding: 16px 18px;
}

.books-stat-icon,
.book-in-stat-icon,
.student-report-stat-icon,
.exam-report-link-icon,
.selection-action-card .selection-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.06);
}

.books-stat-card.tone-blue .books-stat-icon,
.book-in-stat-card.tone-blue .book-in-stat-icon,
.student-report-stat-card.tone-blue .student-report-stat-icon,
.exam-report-link-card.tone-blue .exam-report-link-icon { color: #5b46f8; }

.books-stat-card.tone-green .books-stat-icon,
.book-in-stat-card.tone-green .book-in-stat-icon,
.student-report-stat-card.tone-green .student-report-stat-icon,
.exam-report-link-card.tone-green .exam-report-link-icon,
.selection-action-card.tone-green .selection-action-icon { color: #17bb6d; }

.books-stat-card.tone-amber .books-stat-icon,
.book-in-stat-card.tone-amber .book-in-stat-icon,
.student-report-stat-card.tone-amber .student-report-stat-icon,
.exam-report-link-card.tone-amber .exam-report-link-icon { color: #ff9c22; }

.books-stat-card.tone-rose .books-stat-icon,
.student-report-stat-card.tone-rose .student-report-stat-icon,
.exam-report-link-card.tone-rose .exam-report-link-icon,
.selection-action-card.tone-rose .selection-action-icon { color: #f04f8d; }

.book-in-stat-card.tone-violet .book-in-stat-icon,
.student-report-stat-card.tone-violet .student-report-stat-icon,
.exam-report-link-card.tone-violet .exam-report-link-icon { color: #8b57ff; }

.selection-action-card.tone-blue .selection-action-icon,
.exam-report-link-card.tone-sky .exam-report-link-icon { color: #5b46f8; }

.books-stat-card strong,
.book-in-stat-card strong,
.student-report-stat-card strong,
.exam-report-summary-card strong {
    font-size: 32px;
    line-height: 1;
}

.exam-report-link-card strong,
.selection-action-card strong {
    font-size: 14px;
}

.students-page {
    padding: 20px 22px 24px;
    background:
        radial-gradient(circle at top right, rgba(130, 95, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #fdfdff 0%, #faf8ff 100%);
}

.students-page .student-page-breadcrumbs {
    gap: 10px;
    margin-bottom: 14px;
    color: #74809a;
    font-size: 12px;
    font-weight: 700;
}

.students-page .student-page-breadcrumbs a {
    color: #64718c;
}

.students-page .student-breadcrumb-home,
.students-page .student-page-breadcrumbs span:last-child {
    min-width: 30px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #efe9fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(32, 38, 75, 0.05);
}

.students-page .student-page-breadcrumbs span:last-child {
    background: #f2ebff;
    color: #8754f7;
}

.students-page .student-page-intro {
    margin-bottom: 18px;
}

.students-page .student-page-intro h1 {
    margin: 0 0 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    color: #173468;
}

.students-page .student-page-intro p {
    margin: 0;
    color: #78849e;
    font-size: 13px;
}

.students-page .student-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.students-page .student-outline-btn,
.students-page .student-toolbar-btn,
.students-page .student-toolbar-icon,
.students-page .student-page-chip {
    border-radius: 12px;
    border: 1px solid #ebe5f7;
    background: #fff;
    color: #6d7894;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(33, 40, 78, 0.04);
}

.students-page .student-outline-btn {
    min-height: 42px;
    padding: 0 18px;
    color: #8452f7;
    font-size: 13px;
    font-weight: 800;
}

.students-page .student-page-primary-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    box-shadow: 0 18px 28px rgba(108, 61, 240, 0.2);
}

.students-page .student-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.students-page .student-overview-card,
.students-page .student-panel-card {
    border: 1px solid #f0eaf8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 38, 77, 0.05);
}

.students-page .student-overview-card {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.students-page .student-overview-card.tone-blue {
    background: linear-gradient(180deg, #fcfbff 0%, #fbf9ff 100%);
}

.students-page .student-overview-card.tone-green {
    background: linear-gradient(180deg, #fcfffd 0%, #f7fffa 100%);
}

.students-page .student-overview-card.tone-amber {
    background: linear-gradient(180deg, #fffdfb 0%, #fff8f1 100%);
}

.students-page .student-overview-card.tone-rose {
    background: linear-gradient(180deg, #fffdfd 0%, #fff7fb 100%);
}

.students-page .student-overview-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.students-page .student-overview-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex: 0 0 auto;
    font-size: 16px;
}

.students-page .tone-blue .student-overview-icon,
.students-page .tone-green .student-overview-icon,
.students-page .tone-amber .student-overview-icon,
.students-page .tone-rose .student-overview-icon {
    color: #fff;
}

.students-page .tone-blue .student-overview-icon { background: linear-gradient(135deg, #5b46f8 0%, #6f5efc 100%); }
.students-page .tone-green .student-overview-icon { background: linear-gradient(135deg, #11b86a 0%, #36d78a 100%); }
.students-page .tone-amber .student-overview-icon { background: linear-gradient(135deg, #ff941c 0%, #ffb13e 100%); }
.students-page .tone-rose .student-overview-icon { background: linear-gradient(135deg, #ef2f80 0%, #ff5575 100%); }

.students-page .student-overview-card small {
    display: block;
    color: #556683;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.students-page .student-overview-card strong {
    display: block;
    color: #1c345f;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 6px;
}

.students-page .student-overview-card span {
    font-size: 11px;
    font-weight: 800;
}

.students-page .tone-blue span { color: #25b26a; }
.students-page .tone-green span { color: #20b167; }
.students-page .tone-amber span { color: #f17b4c; }
.students-page .tone-rose span { color: #ee5a81; }

.students-page .student-overview-chart {
    width: 88px;
    height: 40px;
    fill: none;
}

.students-page .student-overview-chart polyline {
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.students-page .student-overview-chart circle {
    stroke: #fff;
    stroke-width: 1.6;
}

.students-page .tone-blue .student-overview-chart polyline,
.students-page .tone-blue .student-overview-chart circle { stroke: #6856fb; fill: #6856fb; }
.students-page .tone-green .student-overview-chart polyline,
.students-page .tone-green .student-overview-chart circle { stroke: #21c978; fill: #21c978; }
.students-page .tone-amber .student-overview-chart polyline,
.students-page .tone-amber .student-overview-chart circle { stroke: #f79d29; fill: #f79d29; }
.students-page .tone-rose .student-overview-chart polyline,
.students-page .tone-rose .student-overview-chart circle { stroke: #f04f8d; fill: #f04f8d; }

.students-page .student-panel-card {
    padding: 16px 18px 18px;
    margin-bottom: 16px;
}

.students-page .student-filter-panel-head,
.students-page .student-filter-chip-row,
.students-page .student-records-head,
.students-page .student-records-toolbar,
.students-page .student-records-pagination,
.students-page .student-record-user,
.students-page .student-table-actions {
    display: flex;
    align-items: center;
}

.students-page .student-filter-panel-head,
.students-page .student-records-head {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.students-page .student-filter-panel-head h2,
.students-page .student-records-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #7345f4;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.students-page .student-filter-chip-row {
    gap: 10px;
    flex-wrap: wrap;
}

.students-page .student-filter-chip {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    background: #f8f7fd;
    color: #7b84a3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.students-page .student-filter-chip strong {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    color: inherit;
    text-align: center;
}

.students-page .student-filter-chip.active {
    background: #f3ebff;
    color: #8b4df8;
}

.students-page .student-filter-chip.tone-green {
    background: #effbf4;
    color: #22b56b;
}

.students-page .student-filter-chip.tone-amber {
    background: #fff7ed;
    color: #f39a28;
}

.students-page .student-filter-chip.tone-rose {
    background: #fff0f6;
    color: #ef5585;
}

.students-page .student-filter-chip.reset {
    color: #7f8ba7;
}

.students-page .student-filter-form {
    display: grid;
    grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.students-page .student-filter-field {
    display: grid;
    gap: 8px;
}

.students-page .student-filter-field label {
    color: #556683;
    font-size: 11px;
    font-weight: 800;
}

.students-page .student-input-wrap,
.students-page .student-select-wrap {
    position: relative;
}

.students-page .student-input-wrap i,
.students-page .student-select-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8d96ad;
    font-size: 13px;
    pointer-events: none;
}

.students-page .student-input-wrap input,
.students-page .student-select-wrap select {
    width: 100%;
    height: 42px;
    border: 1px solid #eee8f8;
    border-radius: 10px;
    background: #fff;
    color: #23375f;
    font-size: 12px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(22, 31, 64, 0.02);
}

.students-page .student-input-wrap input {
    padding: 0 14px 0 38px;
}

.students-page .student-select-wrap select {
    padding: 0 32px 0 38px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.students-page .student-select-wrap::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #72809c;
    font-size: 12px;
    pointer-events: none;
}

.students-page .student-filter-actions {
    display: flex;
    align-items: flex-end;
}

.students-page .student-filter-submit {
    min-width: 110px;
    min-height: 42px;
    border-radius: 10px;
    justify-content: center;
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    box-shadow: none;
}

.students-page .student-records-toolbar {
    gap: 10px;
    flex-wrap: wrap;
}

.students-page .student-toolbar-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
}

.students-page .student-toolbar-btn.tone-green {
    background: #effbf4;
    color: #21b46a;
}

.students-page .student-toolbar-btn.tone-rose {
    background: #fff1f6;
    color: #ef5a84;
}

.students-page .student-toolbar-icon {
    width: 36px;
    height: 36px;
}

.students-page .student-records-table-wrap {
    overflow: auto;
    border: 1px solid #f0eaf8;
    border-radius: 14px;
}

.students-page .student-records-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.students-page .student-records-table thead th {
    padding: 14px 12px;
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    color: #fff;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
}

.students-page .student-records-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #f3eef9;
    color: #5e6e8c;
    font-size: 12px;
    vertical-align: middle;
}

.students-page .student-records-table tbody tr:last-child td {
    border-bottom: 0;
}

.students-page .student-records-table tbody td strong {
    color: #1e3567;
    font-size: 13px;
}

.students-page .student-record-user {
    gap: 10px;
}

.students-page .student-record-user span {
    display: block;
    margin-top: 4px;
    color: #9ba7bb;
    font-size: 11px;
    font-weight: 700;
}

.students-page .student-record-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}

.students-page .student-record-avatar-fallback {
    background: linear-gradient(135deg, #7a45f6 0%, #9656ff 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.students-page .student-status-pill {
    min-width: 62px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.students-page .student-status-pill.active {
    background: #edfbf3;
    color: #24b56b;
}

.students-page .student-status-pill.inactive {
    background: #fff3eb;
    color: #f39a28;
}

.students-page .student-status-pill.approved {
    background: #edfbf3;
    color: #24b56b;
}

.students-page .student-status-pill.verify {
    background: #edf4ff;
    color: #2f6ff0;
}

.students-page .student-status-pill.pending {
    background: #fff3eb;
    color: #f39a28;
}

.students-page .student-status-pill.ban {
    background: #fff0f3;
    color: #d93b5c;
}

.students-page .student-records-table td i {
    color: #8b96ae;
    margin-right: 8px;
}

.students-page .student-table-actions {
    gap: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.students-page .student-table-action {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #f0eafb;
    background: #f7f4ff;
    color: #8a6bf6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}

.students-page .student-table-action:nth-child(2) {
    background: #f6f1ff;
    color: #b07af8;
}

.students-page .student-table-action.danger {
    background: #fff2f4;
    border-color: #ffe3e8;
    color: #ff6f87;
}

.students-page .student-table-action.approve {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    background: #edfbf3;
    border-color: #d8f3e3;
    color: #189a58;
    cursor: pointer;
}

.students-page .student-approve-form {
    margin: 0;
}

.students-page .student-approved-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #edfbf3;
    color: #189a58;
    font-size: 11px;
    font-weight: 800;
}

.students-page .student-table-action i {
    margin: 0;
    font-size: 12px;
    line-height: 1;
    display: block;
}

.students-page .student-empty-state {
    text-align: center;
    padding: 30px 16px;
}

.students-page .student-records-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}

.students-page .student-records-footer p {
    margin: 0;
    color: #72809a;
    font-size: 12px;
}

.students-page .student-records-pagination {
    gap: 8px;
    flex-wrap: wrap;
    color: #72809a;
    font-size: 12px;
}

.students-page .student-page-chip {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
}

.students-page .student-page-chip.active {
    background: linear-gradient(359deg, #6d43f4 0%, #7f57fb 100%);
    border-color: #6d43f4;
    color: #fff;
}

@media (max-width: 1300px) {
    .students-page .student-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 768px) {
    .students-page {
        padding: 16px 12px 20px;
    }

    .students-page .student-page-intro,
    .students-page .student-filter-panel-head,
    .students-page .student-records-head,
    .students-page .student-records-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .students-page .student-page-actions,
    .students-page .student-records-toolbar {
        width: 100%;
    }

    .students-page .student-outline-btn,
    .students-page .student-page-primary-btn,
    .students-page .student-toolbar-btn,
    .students-page .student-toolbar-icon {
        width: 100%;
        justify-content: center;
    }

    .students-page .student-overview-grid,
    .students-page .student-filter-form {
        grid-template-columns: 1fr;
    }
}

.student-avatar-table {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #dbe4f2;
    background: #fff;
}

.back-link-btn {
    text-decoration: none;
}

.admin-student-wizard {
    display: grid;
    gap: 12px;
}

.admin-student-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px 14px;
    border: 1px solid #e8edf7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(33, 67, 125, 0.04);
}

.admin-student-step-item {
    position: relative;
    border: 0;
    background: transparent;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #294266;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-student-step-item::before {
    content: "";
    position: absolute;
    top: 11px;
    left: calc(-50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: #dfe7f5;
}

.admin-student-step-item:first-child::before {
    display: none;
}

.admin-student-step-item.active::before,
.admin-student-step-item.completed::before {
    background: #276cf0;
}

.admin-student-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d8e3f4;
    display: grid;
    place-items: center;
    font-size: 11px;
}

.admin-student-step-item.active .admin-student-step-number,
.admin-student-step-item.completed .admin-student-step-number {
    background: #276cf0;
    border-color: #276cf0;
    color: #fff;
}

.admin-student-form {
    display: grid;
    gap: 12px;
}

.admin-student-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 12px;
    align-items: start;
}

.admin-student-main,
.admin-student-side {
    display: grid;
    gap: 12px;
}

.admin-student-card,
.admin-student-side-card {
    border: 1px solid #e8edf7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(33, 67, 125, 0.04);
}

.admin-student-card {
    padding: 14px;
}

.admin-student-side-card {
    padding: 14px;
}

.admin-student-card-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.card-head-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #edf4ff;
    color: #276cf0;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.card-head-icon.green { background: #eaf9ef; color: #1eaa63; }
.card-head-icon.violet { background: #f3efff; color: #8b66ef; }
.card-head-icon.amber { background: #fff5e8; color: #f1a11d; }
.card-head-icon.rose { background: #fff0f4; color: #ea5578; }

.admin-student-card-head h2,
.admin-student-side-card h3 {
    margin: 0 0 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

.admin-student-card-head p,
.admin-student-side-card p,
.admin-photo-drop em,
.admin-photo-drop small {
    margin: 0;
    color: #6e7d94;
    font-size: 12px;
}

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

.admin-student-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-photo-drop {
    margin-top: 10px;
    min-height: 170px;
    border: 1px dashed #d6e2f3;
    border-radius: 14px;
    background: #fbfdff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
    gap: 8px;
    cursor: pointer;
}

.admin-photo-drop input {
    display: none;
}

.admin-photo-drop-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #edf4ff;
    color: #276cf0;
    display: grid;
    place-items: center;
    font-size: 24px;
}

.admin-photo-drop strong {
    color: #1d345b;
}

.admin-student-side-card.info {
    background: #f6f9ff;
}

.admin-student-side-card.info ul {
    padding-left: 16px;
    margin: 10px 0 0;
    color: #64758d;
    font-size: 12px;
    line-height: 1.8;
}

.student-profile-top-stats,
.student-profile-top-stats .student-top-stat,
.student-profile-hero-left,
.student-name-row,
.student-profile-tabs,
.address-head-row {
    display: flex;
}

.student-profile-top-stats {
    gap: 12px;
    margin-bottom: 12px;
}

.student-top-stat {
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8edf7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(33, 67, 125, 0.04);
}

.student-top-stat span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.student-top-stat.tone-blue span { background: #eaf1ff; color: #256af0; }
.student-top-stat.tone-green span { background: #eaf9ef; color: #1eaa63; }
.student-top-stat.tone-violet span { background: #f3efff; color: #8b66ef; }
.student-top-stat.tone-amber span { background: #fff5e8; color: #f1a11d; }
.student-top-stat.tone-cyan span { background: #edf9fb; color: #1ca7bf; }

.student-top-stat small,
.student-key-grid small,
.student-detail-grid small,
.address-block p,
.student-profile-meta p {
    color: #6d7c93;
}

.student-top-stat small {
    display: block;
    margin-bottom: 4px;
}

.student-top-stat strong {
    font-size: 20px;
}

.student-profile-hero {
    padding: 12px;
    margin-bottom: 12px;
}

.student-profile-hero-left {
    gap: 16px;
}

.student-photo-card {
    width: 110px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.student-photo-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
}

.small-profile-btn {
    min-height: 32px;
    justify-content: center;
    font-size: 11px;
    padding: 0 10px;
}

.student-basic-card {
    flex: 1;
}

.student-name-row {
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.student-name-row h2 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 28px;
}

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

.student-key-grid strong,
.student-detail-grid strong {
    display: block;
    margin-top: 4px;
    color: #1f355c;
    font-size: 13px;
}

.student-profile-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 12px;
}

.student-profile-tabs-card,
.student-address-card {
    padding: 0;
}

.student-profile-tabs {
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid #edf1f8;
    overflow-x: auto;
}

.student-profile-tabs button {
    min-height: 42px;
    border: 0;
    background: transparent;
    color: #3f5677;
    font-size: 12px;
    font-weight: 700;
    padding: 0 10px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.student-profile-tabs button.active {
    color: #256af0;
    border-color: #256af0;
}

.student-profile-tab-panels {
    padding: 0;
}

.student-profile-tab-panel[hidden] {
    display: none;
}

.student-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 16px 14px;
}

.student-address-card {
    padding: 14px;
    display: grid;
    gap: 14px;
}

.address-block + .address-block {
    padding-top: 14px;
    border-top: 1px solid #edf1f8;
}

.address-block h3 {
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    color: #1c345c;
}

.address-block h3 i,
.same-address-note i {
    color: #256af0;
}

.address-block p {
    margin: 0;
    line-height: 1.85;
    font-size: 13px;
}

.address-head-row {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.same-address-note {
    color: #256af0;
    font-size: 11px;
    font-weight: 800;
}

.student-profile-meta {
    padding: 10px 2px 0;
    font-size: 12px;
}

.student-profile-meta p {
    margin: 4px 0;
}

.admin-session-stat {
    position: relative;
    overflow: hidden;
    padding: 16px 16px 12px;
    border: 1px solid #e8edf7;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(33, 67, 125, 0.05);
}

.admin-session-stat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.admin-session-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.admin-session-stat-icon i {
    display: block;
    color: #fff;
    line-height: 1;
}

.admin-session-stat.tone-blue .admin-session-stat-icon { background: #246af0; }
.admin-session-stat.tone-green .admin-session-stat-icon { background: #1eaa63; }
.admin-session-stat.tone-amber .admin-session-stat-icon { background: #f1a11d; }
.admin-session-stat.tone-rose .admin-session-stat-icon { background: #df5678; }

.admin-session-stat small {
    display: block;
    color: #3b5377;
    font-weight: 700;
    margin-bottom: 5px;
}

.admin-session-stat strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}

.admin-session-stat span {
    color: #1f67ea;
    font-size: 12px;
    font-weight: 700;
}

.admin-session-stat.tone-green span { color: #1eaa63; }
.admin-session-stat.tone-amber span { color: #f1a11d; }
.admin-session-stat.tone-rose span { color: #df5678; }

.admin-session-watermark {
    position: absolute;
    right: 16px;
    bottom: 10px;
    font-size: 48px;
    color: rgba(36, 106, 240, 0.1);
    line-height: 1;
}

.admin-session-stat.tone-green .admin-session-watermark { color: rgba(30, 170, 99, 0.1); }
.admin-session-stat.tone-amber .admin-session-watermark { color: rgba(241, 161, 29, 0.12); }
.admin-session-stat.tone-rose .admin-session-watermark { color: rgba(223, 86, 120, 0.1); }

.session-master-card {
    padding: 14px;
}

.session-master-head {
    margin-bottom: 12px;
}

.session-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.session-search {
    position: relative;
}

.session-search input {
    width: 190px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e0e8f5;
    padding: 0 34px 0 12px;
    background: #fff;
}

.session-search button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0;
    color: #6f8095;
    cursor: pointer;
    font-size: 12px;
}

.session-search i {
    position: static;
}

.session-tool-btn,
.rows-select,
.page-nav,
.action-btn {
    border-radius: 12px;
    border: 1px solid #ece8f7;
    background: #fff;
    color: #31496f;
}


.session-tool-btn {
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.session-table-wrap {
    overflow: auto;
    border: 1px solid #f0ecfb;
    border-radius: 16px;
}

.session-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

.session-table thead th {
    padding: 14px 12px;
    text-align: left;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(90deg, #6d43f4 0%, #7f57fb 100%);
    border-bottom: 0;
}

.session-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #edf1f8;
    color: #39516f;
    font-size: 13px;
    vertical-align: middle;
}

.session-table tbody tr:nth-child(even) {
    background: #fcfbff;
}

.session-table tbody tr:last-child td {
    border-bottom: 0;
}

.session-table tbody td strong {
    color: #1a3158;
}

.session-table tbody td i.fa-calendar {
    color: #74849a;
    margin-right: 8px;
}

.status-pill {
    min-width: 68px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    padding: 0 10px;
}

.status-pill.yes,
.status-pill.active,
.status-pill.completed {
    background: #e9f9ef;
    color: #1da962;
}

.status-pill.no {
    background: #fff0f3;
    color: #f15f7c;
}

.status-pill.upcoming {
    background: #eef5ff;
    color: #256af0;
}

.table-actions {
    align-items: center;
    gap: 8px;
}

.action-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.action-btn.edit {
    color: #256af0;
    border-color: #dce7ff;
    background: #f6f9ff;
}

.action-btn.delete {
    color: #f15f7c;
    border-color: #ffe1e8;
    background: #fff7f9;
}

.session-table-footer {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

.table-pagination {
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #6d7c93;
    font-size: 12px;
}

.rows-select {
    height: 36px;
    padding: 0 10px;
}

.page-nav {
    min-width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
}

.page-nav.active {
    background: #256af0;
    border-color: #256af0;
    color: #fff;
}

.primary-btn:hover,
.secondary-btn:hover,
.apply-btn:hover,
.newsletter-form button:hover {
    transform: translateY(-2px);
}

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

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-showcase-content {
        min-height: auto;
        padding-bottom: 34px;
    }

    .login-form-shell {
        width: min(100%, 700px);
    }

    .admin-login-layout {
        grid-template-columns: 1fr;
        width: min(calc(100% - 24px), 980px);
    }

    .admin-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .admin-session-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fee-stat-grid {
        grid-template-columns: 1fr;
    }

    .question-form-grid-top {
        grid-template-columns: 1fr 1fr;
    }

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

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

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

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

    .book-in-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .issue-main-grid {
        grid-template-columns: 1fr;
    }

    .return-main-grid {
        grid-template-columns: 1fr;
    }

    .return-summary-inline {
        grid-template-columns: 1fr;
    }

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

    .admin-student-layout {
        grid-template-columns: 1fr;
    }

    .student-profile-top-stats {
        flex-wrap: wrap;
    }

    .student-profile-detail-layout {
        grid-template-columns: 1fr;
    }

    .admin-overview-grid {
        grid-template-columns: 1fr;
    }

    .admin-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-bottom-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .nav-menu,
    .apply-btn {
        display: none;
    }

    .menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    .features,
    .stats-grid,
    .testimonial-grid,
    .info-panels,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .form-stepper {
        display: grid;
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        gap: 12px;
        overflow-x: auto;
    }

    .stepper-item {
        min-width: 150px;
        padding-bottom: 0;
    }

    .stepper-line {
        display: none;
    }

    .upload-grid,
    .review-two-column-grid,
    .review-document-grid {
        grid-template-columns: 1fr;
    }

    .review-preview-head,
    .review-hero-card {
        grid-template-columns: 1fr;
    }

    .review-preview-head {
        align-items: flex-start;
    }

    .login-body {
        background: #f5f8ff;
    }

    .login-showcase {
        min-height: auto;
    }

    .login-trust-row {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .admin-dashboard-visual {
        transform: scale(0.88);
        transform-origin: left top;
        height: 270px;
    }

    .admin-footer-points {
        margin-left: 18px;
        flex-wrap: wrap;
    }

    .admin-shell {
        display: block;
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 270px;
        min-height: 100vh;
        z-index: 1100;
        box-shadow: 0 20px 40px rgba(16, 34, 67, 0.18);
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }

    .admin-shell:not(.sidebar-collapsed) .admin-sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .admin-main,
    .admin-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-shell:not(.sidebar-collapsed) .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(11, 18, 37, 0.42);
        z-index: 1090;
    }

    .admin-topbar {
        grid-template-columns: auto 1fr auto;
    }

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

    .admin-session-stat-grid {
        grid-template-columns: 1fr;
    }

    .fee-card-toolbar {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

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

    .exam-form-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .exam-status-field {
        max-width: none;
    }

    .question-form-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .question-answer-field {
        max-width: none;
    }

    .selection-filter-grid {
        grid-template-columns: 1fr;
    }

    .books-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .book-form-grid {
        grid-template-columns: 1fr;
    }

    .book-in-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .book-in-remarks-field {
        grid-column: span 2;
    }

    .issue-student-grid,
    .issue-return-grid,
    .issue-student-meta {
        grid-template-columns: 1fr;
    }

    .return-details-grid {
        grid-template-columns: 1fr;
    }

    .student-filter-grid,
    .student-summary-grid {
        grid-template-columns: 1fr;
    }

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

    .student-key-grid,
    .student-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-bottom-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .donut-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .topbar,
    .topbar-left,
    .topbar-right,
    .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
    }

    .hero {
        min-height: 520px;
    }

    .hero-content {
        min-height: 520px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .features,
    .course-grid,
    .stats-grid,
    .testimonial-grid,
    .info-panels,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .feature-card,
    .info-box,
    .testimonial-card {
        padding: 22px;
    }

    .hero-arrow {
        display: none;
    }

    .navbar {
        min-height: 72px;
    }

    .registration-header,
    .registration-title,
    .registration-security,
    .progress-note {
        align-items: flex-start;
    }

    .registration-header,
    .registration-title {
        flex-direction: column;
    }

    .registration-title h1 {
        font-size: 32px;
    }

    .registration-security {
        min-width: 100%;
    }

    .form-grid,
    .phone-field {
        grid-template-columns: 1fr;
    }

    .radio-group {
        gap: 12px;
    }

    .form-actions {
        justify-content: stretch;
    }

    .save-continue-btn {
        width: 100%;
    }

    .secondary-step-btn {
        width: 100%;
    }

    .login-form-side {
        padding: 18px 12px 28px;
    }

    .login-form-card {
        padding: 24px 18px 20px;
    }

    .login-brand {
        margin-bottom: 42px;
    }

    .login-copy h1 {
        font-size: 42px;
    }

    .admin-login-layout {
        width: min(calc(100% - 14px), 100%);
        padding: 18px 0 28px;
    }

    .admin-brand {
        margin: 16px 0 30px 12px;
    }

    .admin-copy {
        margin-left: 12px;
    }

    .admin-copy p {
        font-size: 18px;
    }

    .admin-dashboard-visual {
        margin: 18px 0 12px;
        transform: scale(0.66);
        height: 208px;
    }

    .admin-feature-grid {
        grid-template-columns: 1fr 1fr;
        margin-left: 0;
    }

    .admin-login-card {
        padding: 28px 18px 22px;
    }

    .admin-login-card > p {
        font-size: 18px;
    }

    .admin-login-card .login-input-group label,
    .admin-login-card .remember-check,
    .admin-login-card .secure-login-text {
        font-size: 14px;
    }

    .admin-login-card .login-input-wrap input,
    .admin-login-card .login-submit-btn,
    .admin-login-card .google-login-btn {
        font-size: 15px;
    }

    .admin-content {
        padding: 12px 10px;
    }

    .admin-metric-grid,
    .admin-bottom-stats,
    .admin-session-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-student-stepper,
    .admin-student-grid {
        grid-template-columns: 1fr;
    }

    .admin-student-footer-actions,
    .student-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .student-profile-hero-left,
    .student-name-row,
    .address-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-page-footer,
    .admin-page-footer div {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-page-intro,
    .session-master-head,
    .session-toolbar,
    .session-table-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-topbar {
        grid-template-columns: auto 1fr;
    }

    .admin-topbar-search {
        order: 3;
        grid-column: 1 / -1;
        justify-content: stretch;
        padding-bottom: 10px;
    }

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

    .fee-search input {
        width: 100%;
    }

    .fee-search {
        width: 100%;
    }

    .exam-page-intro,
    .exam-table-head,
    .exam-toolbar,
    .exam-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .exam-form-grid {
        grid-template-columns: 1fr;
    }

    .exam-search input,
    .exam-toolbar-select,
    .exam-toolbar-select select {
        width: 100%;
    }

    .question-page-intro,
    .question-form-head,
    .question-item-head,
    .question-table-head,
    .question-toolbar,
    .question-top-actions,
    .question-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .question-inline-action {
        align-items: stretch;
    }

    .question-form-grid,
    .question-form-grid-top {
        grid-template-columns: 1fr;
    }

    .question-search input,
    .question-toolbar-select,
    .question-toolbar-select select {
        width: 100%;
    }

    .student-selection-intro,
    .student-selection-topbar,
    .selection-filter-actions,
    .selection-table-head {
        flex-direction: column;
        align-items: stretch;
    }

    .selection-search input {
        width: 100%;
    }

    .books-page-intro,
    .books-filter-actions,
    .book-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .books-stat-grid,
    .books-filter-grid {
        grid-template-columns: 1fr;
    }

    .book-in-stat-grid,
    .book-in-form-grid {
        grid-template-columns: 1fr;
    }

    .book-in-remarks-field {
        grid-column: span 1;
    }

    .book-in-form-actions,
    .book-in-tab-row {
        flex-direction: column;
        align-items: stretch;
    }

    .book-in-view-btn {
        margin-left: 0;
    }

    .issue-stepper {
        grid-template-columns: 1fr;
    }

    .issue-step-item {
        border-right: 0;
        border-bottom: 1px solid #edf1f8;
    }

    .issue-step-item:last-child {
        border-bottom: 0;
    }

    .issue-toolbar,
    .issue-registration-row,
    .issue-submit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .issue-search input {
        width: 100%;
    }

.book-return-intro,
.book-return-top-actions {
    flex-direction: column;
    align-items: stretch;
}
}

.exam-reports-intro,
.exam-reports-actions,
.exam-report-subbar,
.exam-wise-intro,
.exam-wise-filter-grid,
.exam-wise-view-btn-wrap {
    display: flex;
    align-items: center;
}

.exam-reports-intro,
.exam-wise-intro {
    justify-content: space-between;
    gap: 18px;
}

.exam-reports-actions {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.exam-reports-page {
    background:
        radial-gradient(circle at top left, rgba(71, 117, 255, 0.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.exam-report-link-grid,
.exam-report-summary-grid,
.exam-wise-summary-grid {
    display: grid;
    gap: 16px;
}

.exam-report-link-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 12px;
    align-items: stretch;
}

.exam-report-link-card,
.exam-report-summary-card {
    border: 1px solid #e8edf8;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.exam-report-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-height: 74px;
    height: 100%;
}

.exam-report-link-card > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.exam-report-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.exam-report-link-card strong,
.exam-report-summary-card strong,
.exam-report-top-list strong {
    display: block;
    color: #112b63;
    font-family: 'Montserrat', sans-serif;
}

.exam-report-link-card strong {
    font-size: 12px;
    margin-bottom: 4px;
}

.exam-report-link-card small,
.exam-report-summary-card small,
.exam-report-top-list span,
.exam-report-view-link,
.exam-report-legend div,
.exam-report-axis span {
    color: #6f7f9f;
    font-size: 10px;
    line-height: 1.45;
}

.exam-report-link-card.tone-blue { background: #edf3ff; border-color: #d7e4ff; }
.exam-report-link-card.tone-green { background: #eaf8ef; border-color: #d1eddc; }
.exam-report-link-card.tone-violet { background: #f3ecff; border-color: #e2d5ff; }
.exam-report-link-card.tone-amber { background: #fff3e1; border-color: #ffe3bb; }
.exam-report-link-card.tone-rose { background: #fff0f4; border-color: #ffd6df; }
.exam-report-link-card.tone-sky { background: #eef6ff; border-color: #d8eaff; }

.exam-report-link-card.tone-blue .exam-report-link-icon { background: #ffffff; color: #2c6ff0; }
.exam-report-link-card.tone-green .exam-report-link-icon { background: #ffffff; color: #1dad63; }
.exam-report-link-card.tone-violet .exam-report-link-icon { background: #ffffff; color: #8a54ee; }
.exam-report-link-card.tone-amber .exam-report-link-icon { background: #ffffff; color: #f0a126; }
.exam-report-link-card.tone-rose .exam-report-link-icon { background: #ffffff; color: #ff627c; }
.exam-report-link-card.tone-sky .exam-report-link-icon { background: #ffffff; color: #4e87ff; }

.exam-report-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 14px;
    align-items: stretch;
}

.exam-report-summary-card {
    padding: 12px 16px;
    min-height: 74px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.exam-report-summary-card strong {
    margin-top: 7px;
    font-size: 21px;
    font-weight: 800;
}

.exam-report-summary-card.tone-blue { background: #edf3ff; border-color: #d7e4ff; }
.exam-report-summary-card.tone-green { background: #eaf8ef; border-color: #d1eddc; }
.exam-report-summary-card.tone-mint { background: #ecfbf1; border-color: #d4f1df; }
.exam-report-summary-card.tone-rose { background: #fff0f4; border-color: #ffd6df; }
.exam-report-summary-card.tone-amber { background: #fff3e1; border-color: #ffe3bb; }
.exam-report-summary-card.tone-violet { background: #f3ecff; border-color: #e2d5ff; }

.exam-report-analytics-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.7fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.exam-report-analytics-grid > .admin-panel-card {
    height: 100%;
}

.exam-report-donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 2px;
    min-height: 184px;
}

.exam-report-donut {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: conic-gradient(#22c55e 0 67.47%, #ff4c63 67.47% 90.79%, #f4a522 90.79% 100%);
    position: relative;
    flex-shrink: 0;
}

.exam-report-donut::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #edf1f8;
}

.exam-report-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.exam-report-donut-center strong {
    color: #112b63;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.exam-report-donut-center span {
    margin-top: 6px;
    color: #7e8ca8;
    font-size: 10px;
    font-weight: 700;
}

.exam-report-legend {
    display: grid;
    gap: 10px;
    flex: 1;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.legend-dot.passed { background: #22c55e; }
.legend-dot.failed { background: #ff4c63; }
.legend-dot.absent { background: #f4a522; }

.exam-report-trend-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 10px;
    color: #6f7f9f;
    font-size: 10px;
    font-weight: 700;
    flex-wrap: wrap;
}

.exam-report-trend-legend .line {
    width: 18px;
    height: 2px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.exam-report-trend-legend .passed { background: #22c55e; }
.exam-report-trend-legend .failed { background: #ff4c63; }
.exam-report-trend-legend .absent { background: #f4a522; }

.exam-report-chart-area {
    position: relative;
    height: 165px;
    border-left: 1px solid #eef2fb;
    border-bottom: 1px solid #eef2fb;
    background:
        repeating-linear-gradient(to top, rgba(231, 236, 247, 0.8) 0 1px, transparent 1px 33px);
    margin-left: 10px;
    margin-top: 6px;
}

.exam-report-top-card {
    display: flex;
    flex-direction: column;
}

.trend-svg {
    position: absolute;
    inset: 0 0 22px 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.trend-passed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 160' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%2322c55e' stroke-width='3' points='0,50 100,58 200,18 300,50 400,48 500,24'/%3E%3C/svg%3E");
}

.trend-failed {
    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 160' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23ff4c63' stroke-width='3' points='0,104 100,124 200,82 300,101 400,77 500,91'/%3E%3C/svg%3E\");
}

.trend-absent {
    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 160' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23f4a522' stroke-width='3' points='0,141 100,147 200,132 300,137 400,133 500,144'/%3E%3C/svg%3E\");
}

.exam-report-axis {
    position: absolute;
    left: -10px;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.exam-report-top-list {
    margin: 0;
    padding-left: 18px;
}

.exam-report-top-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: #112b63;
    font-size: 10px;
    font-weight: 700;
    padding: 7px 0;
    border-bottom: 1px solid #f1f4fa;
}

.exam-report-view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    align-self: flex-start;
    font-weight: 800;
    text-decoration: none;
    color: #2c6ff0;
}

.exam-report-subview {
    margin-top: 14px;
    border-top: 1px solid #ebf0f8;
    padding-top: 14px;
}

.exam-report-subbar {
    grid-template-columns: auto 1fr auto;
    background: transparent;
    border: 0;
    padding: 0 0 12px;
    margin-bottom: 2px;
    min-height: auto;
}

.exam-report-sub-breadcrumbs {
    margin-bottom: 10px;
}

.exam-wise-filter-card {
    margin-bottom: 14px;
}

.exam-wise-filter-grid {
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.exam-wise-filter-grid .form-field {
    min-width: 0;
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
}

.exam-wise-view-btn-wrap {
    align-self: flex-end;
    margin-left: auto;
    padding-bottom: 2px;
}

.exam-wise-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 14px;
    align-items: stretch;
}

.exam-wise-table td,
.exam-wise-table th {
    white-space: nowrap;
}

.exam-wise-table-card .admin-panel-head,
.exam-report-donut-card .admin-panel-head,
.exam-report-trend-card .admin-panel-head,
.exam-report-top-card .admin-panel-head {
    margin-bottom: 12px;
}

.exam-report-subbar .admin-topbar-search {
    justify-content: center;
}

.exam-report-subbar .admin-search-form {
    width: min(100%, 430px);
}

.exam-report-subbar .admin-topbar-actions {
    justify-content: flex-end;
}

.users-page-intro,
.users-form-actions,
.users-filter-actions {
    display: flex;
    align-items: center;
}

.users-stat-grid,
.users-form-grid,
.users-filter-grid {
    display: grid;
    gap: 16px;
}

.users-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.users-stat-card {
    border: 1px solid #e7edf8;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fff;
}

.users-stat-card small {
    display: block;
    color: #687996;
    font-size: 12px;
}

.users-stat-card strong {
    display: block;
    margin-top: 8px;
    color: #102b63;
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
}

.users-stat-card.tone-blue { background: #edf3ff; border-color: #d7e4ff; }
.users-stat-card.tone-green { background: #eaf8ef; border-color: #d1eddc; }
.users-stat-card.tone-rose { background: #fff0f4; border-color: #ffd6df; }
.users-stat-card.tone-violet { background: #f3ecff; border-color: #e2d5ff; }

.users-form-card,
.users-filter-card,
.users-table-card {
    margin-bottom: 16px;
}

.users-form-card {
    border: 1px solid #edf0ff;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(141, 98, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 18px 44px rgba(73, 93, 160, 0.08);
    padding: 0;
    overflow: hidden;
}

.users-create-form {
    padding: 0;
}

.users-form-hero,
.users-section-head,
.users-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.users-form-hero {
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #edf0fb;
}

.users-form-hero-copy {
    display: flex;
    align-items: center;
    gap: 14px;
}

.users-form-hero-icon,
.users-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f7f1ff 0%, #ede8ff 100%);
    color: #6f3cff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.users-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 13px;
    flex-shrink: 0;
}

.users-form-hero h2,
.users-section-head h3 {
    margin: 0;
    color: #172b63;
    font-family: "Montserrat", sans-serif;
    letter-spacing: -0.02em;
}

.users-form-hero h2 {
    font-size: 18px;
}

.users-form-hero p,
.users-section-head p {
    margin: 4px 0 0;
    color: #7d88a7;
    font-size: 12px;
    font-weight: 700;
}

.users-help-chip {
    height: 38px;
    padding: 0 16px;
    border: 1px solid #e7eaf8;
    border-radius: 12px;
    background: #fff;
    color: #57678d;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(71, 90, 148, 0.08);
}

.users-form-section {
    margin: 14px 24px 0;
    padding: 14px 14px 16px;
    border: 1px solid #edf0fb;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 252, 255, 0.98) 100%);
    box-shadow: 0 10px 26px rgba(79, 92, 147, 0.05);
}

.users-section-head {
    justify-content: flex-start;
}

.users-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px;
}

.users-form-section .form-field label {
    color: #455980;
    font-size: 11px;
    font-weight: 800;
}

.users-form-section .form-field label span {
    color: #ff6d6d;
}

.users-form-section .form-field input,
.users-form-section .input-icon-field {
    min-height: 42px;
    border: 1px solid #e4e9f7;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.users-form-section .form-field input,
.users-form-section .input-icon-field select {
    color: #24355f;
    font-size: 13px;
}

.users-form-section .form-field input::placeholder {
    color: #9aa6c0;
}

.users-password-wrap {
    position: relative;
}

.users-password-wrap input {
    width: 100%;
    padding-right: 40px;
}

.users-password-wrap i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #96a2bc;
    font-size: 13px;
}

.users-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.users-role-list span {
    padding: 9px 12px;
    border-radius: 999px;
    background: #f4f7fd;
    color: #29456f;
    font-size: 12px;
    font-weight: 800;
}

.users-role-pills {
    margin-top: 12px;
}

.users-role-pills span {
    padding: 6px 14px;
    border: 1px solid #e5ddff;
    background: #fbf9ff;
    color: #7d62c8;
    font-size: 10px;
}

.users-role-pills span.active {
    background: linear-gradient(135deg, #7b4fff 0%, #a66fff 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(111, 60, 255, 0.2);
}

.users-permission-table-wrap {
    margin-top: 12px;
    border: 1px solid #ece7ff;
    border-radius: 14px;
    overflow: auto;
    background: #fff;
}

.users-permission-table th,
.users-permission-table td {
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
}

.users-permission-table thead th {
    border: 0;
    background: linear-gradient(90deg, #7a4dff 0%, #9b67ff 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 12px 10px;
}

.users-permission-table thead th:first-child {
    border-top-left-radius: 12px;
}

.users-permission-table thead th:last-child {
    border-top-right-radius: 12px;
}

.users-permission-table tbody td {
    border-color: #f0f2fb;
    color: #33456f;
    padding: 10px;
}

.users-permission-table th:first-child,
.users-permission-table td:first-child {
    text-align: left;
}

.users-permission-table tbody td:first-child {
    font-size: 12px;
    font-weight: 700;
}

.users-permission-table tbody td:first-child strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.users-check {
    display: inline-grid;
    place-items: center;
}

.users-check input {
    width: 16px;
    height: 16px;
    accent-color: #7a4dff;
}

.users-form-actions {
    justify-content: flex-end;
    gap: 12px;
    margin: 14px 24px 0;
    padding: 12px 0 16px;
}

.users-filter-grid {
    grid-template-columns: 180px 180px minmax(220px, 280px) auto;
    align-items: end;
}

.users-search {
    max-width: 280px;
}

.users-search input {
    width: 100%;
}

.users-filter-actions {
    gap: 10px;
}

.users-table td,
.users-table th {
    white-space: nowrap;
}

.exam-reports-page {
    padding: 18px 18px 24px;
    background:
        radial-gradient(circle at top right, rgba(127, 86, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #fbfcff 0%, #f8fbff 100%);
}

.exam-report-hero {
    margin-bottom: 16px;
}

.exam-report-hero h1,
.exam-report-results-head h2 {
    margin: 0;
    color: #18254b;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.exam-report-top-actions {
    gap: 12px;
}

.exam-report-action-btn {
    min-width: 92px;
    justify-content: center;
    background: #fff;
    border-color: #e6ebf8;
    box-shadow: 0 10px 24px rgba(72, 93, 148, 0.06);
}

.exam-report-action-btn i.fa-file-excel { color: #16a34a; }
.exam-report-action-btn i.fa-file-pdf { color: #dc2626; }

.exam-report-filter-shell,
.exam-report-results-card {
    border: 1px solid #e8edf9;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(70, 90, 150, 0.06);
}

.exam-report-filter-shell {
    margin-bottom: 18px;
    padding: 18px 16px 14px;
}

.exam-report-filter-grid,
.exam-report-stat-grid {
    display: grid;
    gap: 18px;
}

.exam-report-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
}

.exam-report-filter-grid .form-field label {
    color: #37476f;
    font-size: 12px;
    font-weight: 800;
}

.exam-report-filter-grid .input-icon-field {
    min-height: 52px;
    border: 1px solid #e5eaf7;
    border-radius: 14px;
    background: #fff;
}

.exam-report-filter-grid .input-icon-field select,
.exam-report-table-filters .input-icon-field select {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #23355f;
    font-size: 14px;
}

.exam-report-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exam-report-view-btn {
    min-width: 132px;
    justify-content: center;
}

.exam-report-icon-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
}

.exam-report-stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 18px;
}

.exam-report-stat-card {
    border: 1px solid #e7ebf8;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(70, 90, 150, 0.05);
    min-height: 122px;
}

.exam-report-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #fff;
    flex-shrink: 0;
}

.exam-report-stat-card small {
    display: block;
    color: #6b7897;
    font-size: 12px;
    font-weight: 700;
}

.exam-report-stat-card strong {
    display: block;
    margin-top: 6px;
    color: #1a2951;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.exam-report-stat-card.tone-blue { background: #eef4ff; }
.exam-report-stat-card.tone-blue .exam-report-stat-icon { color: #3b82f6; }
.exam-report-stat-card.tone-mint { background: #edfdf6; }
.exam-report-stat-card.tone-mint .exam-report-stat-icon { color: #22c55e; }
.exam-report-stat-card.tone-violet { background: #f5f1ff; }
.exam-report-stat-card.tone-violet .exam-report-stat-icon { color: #6f3cff; }
.exam-report-stat-card.tone-amber { background: #fff5e8; }
.exam-report-stat-card.tone-amber .exam-report-stat-icon { color: #f59e0b; }
.exam-report-stat-card.tone-green { background: #eefbf4; }
.exam-report-stat-card.tone-green .exam-report-stat-icon { color: #16a34a; }
.exam-report-stat-card.tone-green strong { color: #16a34a; }
.exam-report-stat-card.tone-rose { background: #fff1f1; }
.exam-report-stat-card.tone-rose .exam-report-stat-icon { color: #ef4444; }
.exam-report-stat-card.tone-rose strong { color: #991b1b; }

.exam-report-results-card {
    padding: 18px 16px 14px;
}

.exam-report-results-head,
.exam-report-results-toolbar,
.exam-report-pagination,
.exam-report-row-actions,
.exam-report-student-cell {
    display: flex;
    align-items: center;
}

.exam-report-results-head {
    justify-content: space-between;
    margin-bottom: 16px;
}

.exam-report-results-head p {
    margin: 0;
    color: #66779a;
    font-size: 12px;
    font-weight: 700;
}

.exam-report-results-toolbar {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    align-items: flex-end;
}

.exam-report-table-search {
    width: min(100%, 250px);
}

.exam-report-table-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.exam-report-table-filters .input-icon-field {
    min-width: 120px;
    min-height: 34px;
    border: 1px solid #e5eaf7;
    border-radius: 10px;
    background: #fff;
}

.exam-report-mini-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exam-report-mini-field label {
    color: #4e618a;
    font-size: 12px;
    font-weight: 800;
}

.exam-report-apply-btn {
    min-height: 34px;
    color: #6f3cff;
    border-color: #d8cbff;
    background: #fbf8ff;
}

.exam-report-results-table {
    border-collapse: separate;
    border-spacing: 0;
}

.exam-report-results-table thead th {
    background: linear-gradient(90deg, #6d39ff 0%, #7a4dff 52%, #895fff 100%);
    color: #fff;
    border: 0;
    padding: 14px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.exam-report-results-table thead th:first-child {
    border-top-left-radius: 10px;
}

.exam-report-results-table thead th:last-child {
    border-top-right-radius: 10px;
}

.exam-report-results-table tbody td {
    padding: 12px;
    border-color: #edf1fa;
    color: #24355f;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.exam-report-student-cell {
    gap: 12px;
}

.exam-report-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffd8c4 0%, #f0b295 100%);
    color: #26365d;
    font-size: 11px;
    font-weight: 800;
}

.exam-report-results-table .is-green {
    color: #16a34a;
}

.exam-report-results-table .is-red {
    color: #ff2f2f;
}

.exam-report-result-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.exam-report-result-pill.pass {
    background: #e7f8ec;
    color: #16a34a;
}

.exam-report-result-pill.fail {
    background: #fdeaea;
    color: #ef4444;
}

.exam-report-result-pill.- {
    background: #f3f5fb;
    color: #91a0ba;
}

.exam-report-row-actions {
    gap: 8px;
}

.exam-report-row-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #e5eaf7;
    border-radius: 9px;
    background: #fff;
    color: #6d39ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exam-report-pagination {
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
}

.exam-report-pagination-top {
    padding-top: 0;
    margin-left: auto;
}

.exam-report-pagination .page-nav {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5eaf7;
    border-radius: 8px;
    background: #fff;
    color: #5b6c91;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.exam-report-pagination span.page-nav {
    display: inline-flex;
}

.exam-report-pagination .page-nav.active {
    background: linear-gradient(135deg, #6d39ff 0%, #8a5fff 100%);
    border-color: transparent;
    color: #fff;
}

.student-reports-intro,
.student-reports-actions,
.student-report-toolbar,
.student-report-filter-actions {
    display: flex;
    align-items: center;
}

.student-report-filter-grid,
.student-report-stat-grid {
    display: grid;
    gap: 16px;
}

.student-reports-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.student-report-filter-card,
.student-report-table-card {
    margin-bottom: 16px;
}

.student-report-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: end;
}

.student-report-filter-card .admin-panel-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.student-report-filter-actions {
    gap: 10px;
}

.student-report-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 16px;
}

.student-report-stat-card {
    border: 1px solid #e7edf8;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-report-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-report-stat-card small {
    display: block;
    color: #6f8096;
    font-size: 11px;
}

.student-report-stat-card strong {
    display: block;
    color: #112b63;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 3px;
}

.student-report-stat-card p {
    margin: 5px 0 0;
    color: #8b99b1;
    font-size: 11px;
    font-weight: 700;
}

.student-report-stat-card.tone-blue { background: #edf4ff; border-color: #d8e5ff; }
.student-report-stat-card.tone-blue .student-report-stat-icon { background: #ffffff; color: #2f6ff0; }
.student-report-stat-card.tone-green { background: #eefaf2; border-color: #d8eedf; }
.student-report-stat-card.tone-green .student-report-stat-icon { background: #ffffff; color: #28a85f; }
.student-report-stat-card.tone-violet { background: #f4efff; border-color: #e3d7ff; }
.student-report-stat-card.tone-violet .student-report-stat-icon { background: #ffffff; color: #7d52ea; }
.student-report-stat-card.tone-amber { background: #fff6e8; border-color: #ffe4ba; }
.student-report-stat-card.tone-amber .student-report-stat-icon { background: #ffffff; color: #efaa2d; }
.student-report-stat-card.tone-rose { background: #fff0f3; border-color: #ffd8df; }
.student-report-stat-card.tone-rose .student-report-stat-icon { background: #ffffff; color: #ff5d74; }

.student-report-toolbar {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.student-report-search {
    flex: 1 1 340px;
}

.student-report-search input {
    width: 100%;
}

.student-report-total-copy {
    color: #183363;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.student-report-table th,
.student-report-table td {
    white-space: nowrap;
}

@media (max-width: 1300px) {
    .exam-report-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .exam-report-summary-grid,
    .exam-wise-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .exam-report-analytics-grid {
        grid-template-columns: 1fr;
    }

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

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

    .student-report-filter-grid,
    .student-report-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .exam-reports-intro,
    .exam-reports-actions,
    .exam-wise-intro,
    .exam-report-subbar {
        flex-direction: column;
        align-items: stretch;
    }

    .exam-wise-view-btn-wrap {
        margin-left: 0;
        width: 100%;
    }

    .exam-report-link-grid,
    .exam-report-summary-grid,
    .exam-wise-summary-grid {
        grid-template-columns: 1fr;
    }

    .exam-report-donut-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .users-page-intro,
    .users-form-actions,
    .users-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .users-form-grid,
    .users-filter-grid,
    .users-stat-grid {
        grid-template-columns: 1fr;
    }

    .student-reports-intro,
    .student-reports-actions,
    .student-report-toolbar,
    .student-report-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .student-report-filter-grid,
    .student-report-stat-grid {
        grid-template-columns: 1fr;
    }
}

.admin-sidebar-logo.has-image,
.brand-mark.has-image {
    background: #ffffff;
    overflow: hidden;
}

.admin-sidebar-logo.has-image img,
.brand-mark.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-page-head h1 {
    margin: 0 0 6px;
}

.settings-page-head p {
    margin: 0;
    color: #6e7c96;
}

.settings-preview-grid,
.settings-form-grid {
    display: grid;
    gap: 16px;
}

.settings-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.settings-preview-card {
    background: #fff;
    border: 1px solid #e7edf8;
    border-radius: 16px;
    padding: 18px;
}

.admin-dashboard-reference-page {
    padding: 18px 18px 24px;
    background:
        radial-gradient(circle at top right, rgba(255, 188, 69, 0.12), transparent 26%),
        linear-gradient(180deg, #fbfcff 0%, #f7faff 100%);
}

.admin-dashboard-hero {
    margin-bottom: 16px;
}

.admin-dashboard-hero h1,
.ref-card-head h2 {
    margin: 0;
    color: #182243;
    font-family: "Montserrat", sans-serif;
}

.admin-dashboard-hero h1 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.admin-dashboard-hero h1 span {
    font-size: 20px;
}

.admin-dashboard-hero p {
    margin: 4px 0 0;
    color: #63718b;
    font-size: 12px;
    font-weight: 700;
}

.ref-card-grid,
.ref-summary-grid,
.ref-quick-grid {
    display: grid;
    gap: 14px;
}

.ref-top-card-grid,
.ref-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ref-stat-card,
.ref-summary-card,
.ref-surface-card,
.ref-quick-action {
    border: 1px solid #edf1fb;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(27, 39, 94, 0.05);
}

.ref-stat-card {
    background: #ffffff;
}

.ref-summary-card {
    background: #ffffff;
}

.ref-stat-card,
.ref-summary-card {
    min-height: 126px;
    padding: 14px 14px 12px;
    display: grid;
    align-content: start;
    gap: 10px;
}

.ref-stat-icon,
.ref-summary-icon,
.ref-event-date {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.ref-stat-copy p,
.ref-summary-copy p {
    margin: 0 0 6px;
    color: #707d96;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.ref-stat-copy strong,
.ref-summary-copy strong {
    display: block;
    color: #172246;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ref-stat-card a,
.ref-summary-card a,
.ref-card-head a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4f5fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.ref-dashboard-main {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 14px;
    margin: 14px 0;
}

.ref-surface-card {
    padding: 16px;
}

.ref-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ref-card-head h2 {
    font-size: 16px;
    letter-spacing: -0.01em;
}

.ref-card-head a {
    font-size: 12px;
}

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

.ref-quick-action {
    min-height: 54px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ref-quick-action:hover,
.ref-stat-card:hover,
.ref-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(27, 39, 94, 0.1);
}

.ref-quick-icon {
    width: 22px;
    text-align: center;
    font-size: 15px;
}

.ref-quick-action strong {
    color: #273352;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.ref-event-list {
    display: grid;
}

.admin-notifications-list {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 6px;
}

.ref-event-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    text-decoration: none;
}

.ref-event-item + .ref-event-item {
    border-top: 1px solid #eef2fa;
}

.ref-event-date {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-direction: column;
    gap: 1px;
}

.ref-event-date strong {
    color: #24b96a;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1;
}

.ref-event-date span {
    color: #52c07f;
    font-size: 9px;
    font-weight: 800;
}

.ref-event-copy strong {
    display: block;
    color: #1d2545;
    font-size: 14px;
    font-weight: 800;
}

.ref-event-copy p {
    margin: 4px 0 0;
    color: #69768d;
    font-size: 12px;
    font-weight: 600;
}

.ref-event-time {
    color: #2bbb6f;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ref-summary-wrap {
    margin-top: 26px;
    padding-top: 16px;
}

.ref-summary-card {
    min-height: 108px;
}

.ref-summary-copy strong {
    font-size: 18px;
}

.subject-head-layout {
    display: block;
}

.subject-list-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.subject-toolbar-actions {
    width: 100%;
    margin-top: 14px;
}

.subject-top-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: end;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.subject-top-filters .input-icon-field,
.subject-top-filters .session-search {
    min-width: 0;
    width: 100%;
}

.subject-top-filters .input-icon-field {
    min-height: 54px;
    border: 1px solid #e7edf8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subject-top-filters .input-icon-field:hover,
.subject-top-filters .session-search:hover {
    border-color: #d7e1f2;
    box-shadow: none;
}

.subject-top-filters .input-icon-field:focus-within,
.subject-top-filters .session-search:focus-within {
    border-color: #2f6ff0;
    box-shadow: 0 0 0 3px rgba(47, 111, 240, 0.08);
}

.subject-top-filters .input-icon-field select {
    width: 100%;
    min-height: 52px;
    padding: 0 40px 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1f2c4b;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    appearance: none;
}

.subject-top-filters .input-icon-field select option {
    font-weight: 700;
}

.subject-top-filters .input-icon-field i {
    right: 14px;
    color: #6e7b95;
    font-size: 12px;
}

.subject-top-filters .session-search {
    display: flex;
    align-items: center;
    min-height: 54px;
    border: 1px solid #e7edf8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subject-top-filters .session-search input {
    width: 100%;
    min-width: 0;
    height: 52px;
    border: 0;
    background: transparent;
    padding-left: 16px;
    padding-right: 46px;
    color: #1f2c4b;
    font-size: 14px;
    font-weight: 700;
}

.subject-top-filters .session-search input::placeholder {
    color: #8a95ad;
    font-weight: 700;
}

.subject-top-filters .session-search button {
    width: 44px;
    height: 44px;
    right: 5px;
    border-radius: 10px;
    background: #2f6ff0;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: none;
}

.subject-top-filters .session-search button:hover {
    filter: brightness(1.03);
}

.subject-search-field {
    grid-column: span 2;
}

.subject-master-form {
    display: grid;
    gap: 18px;
}

.subject-form-block {
    border: 1px solid #eef2fb;
    border-radius: 16px;
    padding: 18px;
    background: #fbfcff;
}

.subject-form-block h3 {
    margin: 0 0 14px;
    color: #1b2746;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

.subject-span-2 {
    grid-column: span 2;
}

.subject-semester-field small {
    display: block;
    margin-top: 10px;
    color: #72809b;
    font-size: 12px;
}

.subject-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.subject-checkbox-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #e4eafa;
    border-radius: 14px;
    background: #fff;
    color: #22345c;
    font-size: 13px;
    font-weight: 700;
}

.subject-checkbox-chip input {
    width: 16px;
    height: 16px;
    accent-color: #2f6ff0;
}

.subject-empty-state {
    grid-column: 1 / -1;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px dashed #d7e1f4;
    border-radius: 14px;
    background: #fff;
    color: #7b869d;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.subject-view-card {
    margin-bottom: 16px;
}

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

.subject-view-grid div {
    border: 1px solid #edf1fb;
    border-radius: 14px;
    padding: 14px;
    background: #fbfcff;
}

.subject-view-grid small {
    display: block;
    color: #6d7a94;
    font-size: 12px;
    margin-bottom: 6px;
}

.subject-view-grid strong {
    color: #1b2746;
    font-size: 14px;
}

.students-reference-page {
    padding: 18px 18px 24px;
    background:
        radial-gradient(circle at top right, rgba(79, 29, 240, 0.05), transparent 28%),
        linear-gradient(180deg, #fcfdff 0%, #fbfbff 100%);
}

.students-ref-header {
    margin-bottom: 14px;
}

.students-ref-header h1 {
    margin: 0;
    color: #1d2f6f;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.students-ref-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.students-ref-stat-card,
.students-ref-table-card {
    border: 1px solid #eef1fb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 39, 87, 0.05);
}

.students-ref-stat-card {
    min-height: 104px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.students-ref-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
}

.students-ref-stat-card.tone-violet .students-ref-stat-icon {
    color: #7c4bff;
    background: #f3edff;
}

.students-ref-stat-card.tone-green .students-ref-stat-icon {
    color: #1ea85f;
    background: #ebfaf1;
}

.students-ref-stat-card.tone-blue .students-ref-stat-icon {
    color: #2d74ff;
    background: #ecf3ff;
}

.students-ref-stat-card.tone-red .students-ref-stat-icon {
    color: #ff5252;
    background: #fff0f0;
}

.students-ref-stat-copy small {
    display: block;
    color: #66738d;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
}

.students-ref-stat-copy strong {
    display: block;
    color: #1a2d67;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 6px;
}

.students-ref-stat-copy p {
    margin: 0;
    color: #8390a9;
    font-size: 11px;
    font-weight: 700;
}

.students-ref-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.students-ref-search {
    width: 100%;
    position: relative;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(146px, 170px) minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
}

.students-ref-search > i {
    position: absolute;
    left: 160px;
    top: 50%;
    transform: translateY(-50%);
    color: #97a2bb;
    font-size: 13px;
    pointer-events: none;
}

.students-ref-session-filter {
    width: 100%;
    height: 40px;
    border: 1px solid #edf1fb;
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
    color: #253a69;
    font-size: 11px;
    font-weight: 800;
    outline: none;
    box-shadow: 0 10px 24px rgba(24, 37, 77, 0.04);
}

.students-ref-search input {
    width: 100%;
    height: 40px;
    border: 1px solid #edf1fb;
    border-radius: 10px;
    background: #fff;
    padding: 0 16px 0 40px;
    color: #21335f;
    font-size: 11px;
    font-weight: 800;
    outline: none;
    grid-column: 2;
    box-shadow: 0 10px 24px rgba(24, 37, 77, 0.04);
}

.students-ref-search input::placeholder {
    color: #93a0ba;
}

.students-ref-search button {
    position: static;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6d42f4;
    cursor: pointer;
    justify-self: center;
    font-size: 18px;
}

.students-ref-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.students-bulk-hub {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.students-bulk-panel {
    border: 1px solid #edf1fb;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(84, 108, 255, 0.1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 18px 44px rgba(34, 63, 121, 0.08);
    padding: 20px;
}

.students-bulk-panel-head,
.students-bulk-preview-head,
.students-bulk-editor-head,
.students-bulk-panel-actions,
.students-bulk-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.students-bulk-panel-head h2,
.students-bulk-preview-head h3,
.students-bulk-editor-head h3 {
    margin: 0;
    color: #17295d;
    font-family: "Montserrat", sans-serif;
}

.students-bulk-panel-head p,
.students-bulk-preview-head p,
.students-bulk-editor-head p {
    margin: 6px 0 0;
    color: #72809c;
    font-size: 12px;
    font-weight: 700;
}

.students-bulk-upload-form {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.students-bulk-upload-field {
    display: grid;
    gap: 8px;
    min-width: min(420px, 100%);
    flex: 1 1 320px;
}

.students-bulk-upload-control {
    display: grid;
    gap: 10px;
    border: 1px dashed #cfd9fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 14px;
}

.students-bulk-upload-field span,
.students-bulk-editor-field span {
    color: #4d5f86;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.students-bulk-upload-field input,
.students-bulk-editor-field input,
.students-bulk-editor-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #e5eafb;
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    color: #20335d;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.students-bulk-upload-control input[type="file"] {
    min-height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    color: #29427d;
}

.students-bulk-upload-control input[type="file"]::file-selector-button {
    margin-right: 12px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d9e2ff;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #dfe7ff 100%);
    color: #3254d7;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.students-bulk-upload-control small {
    color: #73819c;
    font-size: 11px;
    font-weight: 700;
}

.students-bulk-preview-shell {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

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

.students-bulk-summary-card {
    border-radius: 18px;
    padding: 18px;
    color: #19305f;
}

.students-bulk-summary-card small {
    display: block;
    color: #6f7e98;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 10px;
}

.students-bulk-summary-card strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 8px;
}

.students-bulk-summary-card p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.students-bulk-summary-card.tone-total {
    background: linear-gradient(135deg, #eef3ff 0%, #f6f8ff 100%);
}

.students-bulk-summary-card.tone-valid {
    background: linear-gradient(135deg, #ebfbf1 0%, #f5fff8 100%);
}

.students-bulk-summary-card.tone-issue {
    background: linear-gradient(135deg, #fff2f2 0%, #fff8f8 100%);
}

.students-bulk-preview-table-wrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid #edf1fb;
}

.students-bulk-preview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.students-bulk-preview-card {
    border: 1px solid #e8edfb;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(95, 117, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 16px;
    display: grid;
    gap: 14px;
    box-shadow: 0 16px 30px rgba(33, 56, 108, 0.06);
}

.students-bulk-preview-card.is-valid {
    border-color: #d8f1e2;
}

.students-bulk-preview-card.is-error {
    border-color: #f7d8de;
}

.students-bulk-preview-card.is-editing {
    box-shadow: 0 0 0 2px rgba(47, 111, 240, 0.16), 0 18px 32px rgba(33, 56, 108, 0.08);
}

.students-bulk-preview-card-head,
.students-bulk-preview-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.students-bulk-preview-card-head strong {
    display: block;
    color: #173468;
    font-size: 14px;
    font-weight: 800;
}

.students-bulk-preview-card-head small {
    color: #7b89a2;
    font-size: 11px;
    font-weight: 700;
}

.students-bulk-preview-card-body h4 {
    margin: 0 0 6px;
    color: #173468;
    font-size: 18px;
    font-weight: 800;
}

.students-bulk-preview-card-body > p {
    margin: 0;
    color: #637692;
    font-size: 12px;
    font-weight: 700;
}

.students-bulk-preview-meta {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.students-bulk-preview-meta span,
.students-bulk-preview-note span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2a446d;
    font-size: 12px;
    font-weight: 700;
}

.students-bulk-preview-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #edf1fb;
}

.students-bulk-preview-note p {
    margin: 6px 0 0;
    color: #697b96;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 700;
}

.students-bulk-preview-table {
    min-width: 1080px;
}

.students-bulk-preview-table td strong,
.students-bulk-preview-table td small {
    display: block;
}

.students-bulk-preview-table td small {
    margin-top: 6px;
    color: #7a88a1;
    font-size: 11px;
}

.students-bulk-row-valid {
    background: linear-gradient(90deg, rgba(39, 174, 96, 0.04) 0%, rgba(255, 255, 255, 0) 48%);
}

.students-bulk-row-error {
    background: linear-gradient(90deg, rgba(242, 76, 92, 0.05) 0%, rgba(255, 255, 255, 0) 48%);
}

.students-bulk-state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 28px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.students-bulk-state-pill.ok {
    color: #189454;
    background: #eaf9f0;
}

.students-bulk-state-pill.error {
    color: #d54859;
    background: #fff0f1;
}

.students-bulk-issue-list {
    margin: 0;
    padding-left: 16px;
    color: #b34658;
    font-size: 11px;
    font-weight: 700;
}

.students-bulk-issue-empty {
    color: #6f7e98;
    font-size: 11px;
    font-weight: 800;
}

.students-bulk-edit-link,
.students-bulk-clear-btn {
    min-height: 36px;
}

.students-bulk-editor-card {
    border: 1px solid #e8edfb;
    border-radius: 22px;
    background: #fff;
    padding: 18px;
}

.students-bulk-editor-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #f7d5db;
    border-radius: 14px;
    background: #fff5f6;
    color: #c14556;
    padding: 14px 16px;
    margin-top: 16px;
}

.students-bulk-editor-alert strong {
    font-size: 12px;
    line-height: 1.6;
}

.students-bulk-editor-form {
    margin-top: 18px;
}

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

.students-bulk-editor-field {
    display: grid;
    gap: 8px;
}

.students-bulk-documents-card {
    margin-top: 18px;
    border: 1px solid #e8edfb;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(95, 117, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 16px;
}

.students-bulk-documents-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.students-bulk-document-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 14px;
    align-items: center;
    border: 1px solid #e8edfb;
    border-radius: 18px;
    background: #fff;
    padding: 16px;
}

.students-bulk-document-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #dfe7ff 100%);
    color: #4a58df;
    font-size: 18px;
}

.students-bulk-document-icon.tone-sign {
    background: linear-gradient(135deg, #fff1f4 0%, #ffe7ee 100%);
    color: #ef4d7a;
}

.students-bulk-document-copy {
    display: grid;
    gap: 4px;
}

.students-bulk-document-copy strong {
    color: #1a2c61;
    font-size: 14px;
    font-weight: 800;
}

.students-bulk-document-copy small {
    color: #74829d;
    font-size: 11px;
    font-weight: 700;
}

.students-bulk-document-tile input {
    grid-column: 1 / -1;
    min-height: 42px;
    border: 1px dashed #d6def7;
    border-radius: 12px;
    background: #fbfcff;
    padding: 0 14px;
}

.students-bulk-qualification-card {
    margin-top: 18px;
    border: 1px solid #e8edfb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
    padding: 16px;
}

.students-bulk-qualification-head h4 {
    margin: 0;
    color: #182b61;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

.students-bulk-qualification-head p {
    margin: 6px 0 0;
    color: #72809c;
    font-size: 12px;
    font-weight: 700;
}

.students-bulk-qualification-wrap {
    margin-top: 14px;
    overflow: auto;
    border: 1px solid #edf1fb;
    border-radius: 16px;
}

.students-bulk-qualification-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #fff;
}

.students-bulk-qualification-table thead th {
    padding: 12px 10px;
    background: linear-gradient(90deg, #eef2ff 0%, #f6f8ff 100%);
    color: #41537f;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.students-bulk-qualification-table tbody td {
    padding: 10px;
    border-top: 1px solid #f0f3fb;
    color: #364a78;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.students-bulk-qualification-table tbody td:first-child {
    color: #1a2e65;
    font-weight: 800;
    white-space: nowrap;
}

.students-bulk-qualification-table input {
    min-height: 38px;
    border-radius: 10px;
    background: #fbfcff;
    padding: 0 12px;
}

.students-bulk-editor-field.span-2 {
    grid-column: span 2;
}

.students-ref-action,
.students-ref-add-btn,
.students-ref-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #eceffa;
    border-radius: 8px;
    background: #fff;
    color: #3868f2;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.students-ref-add-btn {
    background: linear-gradient(135deg, #4f1df0 0%, #6c35ff 100%);
    border-color: #4f1df0;
    color: #fff;
    box-shadow: 0 12px 24px rgba(79, 29, 240, 0.18);
}

.students-ref-action.tone-green {
    color: #2ba861;
}

.export-excel-btn {
    min-height: 44px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: linear-gradient(180deg, #37d778 0%, #1eb85d 100%) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 14px 28px rgba(30, 184, 93, 0.24) !important;
}

.export-excel-btn i {
    color: #ffffff !important;
}

.export-excel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(30, 184, 93, 0.28) !important;
}

.students-ref-action.tone-red {
    color: #ff5c73;
}

.students-ref-action.tone-blue {
    color: #3868f2;
}

.students-ref-action.tone-cyan {
    background: linear-gradient(135deg, #13c3d8 0%, #17a8ff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(23, 168, 255, 0.18);
}

.students-ref-action.tone-orange {
    background: linear-gradient(135deg, #ffae18 0%, #ff8c00 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(255, 140, 0, 0.18);
}

.students-ref-action.is-active {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(25, 39, 87, 0.16);
}

.students-ref-table-card {
    padding: 0 0 16px;
}

.students-ref-table-wrap {
    overflow: auto;
    border-radius: 18px;
}

.students-ref-table {
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
}

.students-ref-table thead th {
    padding: 14px 12px;
    background: linear-gradient(90deg, #3f0de0 0%, #631ff8 55%, #3f0de0 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.students-ref-table thead th:first-child {
    border-top-left-radius: 14px;
}

.students-ref-table thead th:last-child {
    border-top-right-radius: 14px;
}

.students-ref-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f1f3fb;
    color: #495a81;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}

.students-ref-table tbody tr:last-child td {
    border-bottom: 0;
}

.students-ref-table tbody td:first-child {
    color: #2f3f78;
    font-weight: 800;
}

.students-ref-registration-id {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eef2ff 0%, #e5edff 100%);
    color: #3359d4;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.students-ref-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.students-ref-avatar.fallback {
    background: linear-gradient(135deg, #4f1df0 0%, #7b4dff 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.students-ref-table-actions,
.students-ref-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.students-ref-inline-form {
    margin: 0;
}

.students-ref-status-form {
    gap: 6px;
}

.students-ref-status-select {
    min-width: 112px;
    height: 34px;
    border: 1px solid #e5e9f7;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    color: #223460;
    font-size: 12px;
    font-weight: 800;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 8px 18px rgba(31, 43, 77, 0.06);
}

.students-ref-status-select::-webkit-details-marker {
    display: none;
}

.students-status-dropdown {
    position: relative;
    display: inline-block;
}

.students-status-dropdown[open] .students-ref-status-select {
    border-color: #d9e4ff;
    box-shadow: 0 10px 24px rgba(47, 111, 240, 0.12);
}

.students-status-dropdown-menu {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 116px;
    padding: 10px 8px;
    border: 1px solid #ebeff8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(21, 37, 70, 0.14);
    display: grid;
    gap: 4px;
    z-index: 2000;
}

.students-status-option {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #253a69;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.students-status-option:hover,
.students-status-option.is-selected {
    background: #f7faff;
}

.students-status-option-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.students-status-option.active .students-status-option-dot {
    background: #32c977;
}

.students-status-option.inactive .students-status-option-dot,
.students-status-option.pending .students-status-option-dot {
    background: #ffb031;
}

.students-status-option.ban .students-status-option-dot {
    background: #ff4646;
}

.students-status-option.verify .students-status-option-dot {
    background: #2f6ff0;
}


.students-ref-table-action {
    width: 30px;
    height: 30px;
    border: 1px solid #edf0fa;
    border-radius: 9px;
    background: #fff;
    color: #7360f3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.students-ref-table-action.danger {
    color: #ff6b77;
}

.students-ref-table-action.success {
    color: #22ae63;
}

.table-actions,
.students-ref-table-actions,
.subject-action-list {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.table-actions form,
.students-ref-table-actions form,
.subject-action-list form {
    margin: 0;
}

.action-btn,
.fee-action-btn,
.students-ref-table-action,
.users-visual-action-btn,
.exam-report-row-btn,
.subject-action-list > .subject-action-btn,
.subject-action-list > form > .subject-action-btn,
.subject-action-list > .merit-action-btn,
.subject-action-list > form > .merit-action-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid #e7ebf7;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(28, 40, 83, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.action-btn i,
.fee-action-btn i,
.students-ref-table-action i,
.users-visual-action-btn i,
.exam-report-row-btn i,
.subject-action-list > .subject-action-btn i,
.subject-action-list > form > .subject-action-btn i,
.subject-action-list > .merit-action-btn i,
.subject-action-list > form > .merit-action-btn i {
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

.action-btn.view,
.students-ref-table-action.view,
.subject-action-list > .subject-action-btn.view,
.subject-action-list > form > .subject-action-btn.view,
.subject-action-list > .merit-action-btn.view,
.subject-action-list > form > .merit-action-btn.view,
.users-visual-action-btn {
    color: #7557f7;
}

.action-btn.edit,
.students-ref-table-action.edit,
.subject-action-list > .subject-action-btn.edit,
.subject-action-list > form > .subject-action-btn.edit,
.subject-action-list > .merit-action-btn.edit,
.subject-action-list > form > .merit-action-btn.edit {
    color: #5d54ff;
}

.action-btn.delete,
.fee-action-btn.delete,
.students-ref-table-action.danger,
.users-visual-action-btn.delete,
.subject-action-list > .subject-action-btn.delete,
.subject-action-list > .subject-action-btn.danger,
.subject-action-list > form > .subject-action-btn.delete,
.subject-action-list > form > .subject-action-btn.danger,
.subject-action-list > .merit-action-btn.delete,
.subject-action-list > .merit-action-btn.danger,
.subject-action-list > form > .merit-action-btn.delete,
.subject-action-list > form > .merit-action-btn.danger {
    color: #ff6d7f;
}

.students-ref-table-action.success,
.subject-action-list > .subject-action-btn.approve,
.subject-action-list > form > .subject-action-btn.approve {
    color: #24b15f;
}

.action-btn:hover,
.fee-action-btn:hover,
.students-ref-table-action:hover,
.users-visual-action-btn:hover,
.exam-report-row-btn:hover,
.subject-action-list > .subject-action-btn:hover,
.subject-action-list > form > .subject-action-btn:hover,
.subject-action-list > .merit-action-btn:hover,
.subject-action-list > form > .merit-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(28, 40, 83, 0.1);
}

.subject-action-list > .subject-action-btn.disabled,
.subject-action-list > form > .subject-action-btn.disabled,
.subject-action-list > .subject-action-btn:disabled,
.subject-action-list > form > .subject-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.students-reference-page .student-status-pill {
    margin-top: 0;
}

.students-ref-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 0;
}

.students-ref-footer p {
    margin: 0;
    color: #7b869f;
    font-size: 12px;
    font-weight: 700;
}

.students-ref-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-pagination,
.students-ref-pagination,
.subject-pagination,
.users-visual-pagination,
.exam-report-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-nav,
.students-ref-page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid #e7ebf7;
    background: #ffffff;
    color: #5f6f90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(28, 40, 83, 0.06);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.page-nav.active,
.students-ref-page-btn.active {
    background: linear-gradient(135deg, #4f1df0 0%, #6730ff 100%);
    border-color: #4f1df0;
    color: #fff;
    box-shadow: 0 14px 28px rgba(79, 29, 240, 0.18);
}

.page-nav:hover,
.students-ref-page-btn:hover,
.subject-pagination a:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(28, 40, 83, 0.1);
}

.page-nav.dots,
.students-ref-page-dots {
    color: #8b96ae;
    font-size: 13px;
    font-weight: 800;
    min-width: auto;
    height: auto;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.subject-pagination a {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid #e7ebf7;
    background: #ffffff;
    color: #5f6f90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(28, 40, 83, 0.06);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.subject-pagination a.active {
    background: linear-gradient(135deg, #4f1df0 0%, #6730ff 100%);
    border-color: #4f1df0;
    color: #fff;
    box-shadow: 0 14px 28px rgba(79, 29, 240, 0.18);
}

.subject-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.subject-table-footer p {
    margin: 0;
    color: #7b869f;
    font-size: 12px;
    font-weight: 700;
}

.tone-purple .ref-stat-icon,
.tone-purple .ref-summary-icon {
    color: #6a4bff;
    background: #f7f8ff;
}

.tone-green .ref-stat-icon,
.tone-green .ref-summary-icon {
    color: #20ad63;
    background: #f7fdf9;
}

.tone-blue .ref-stat-icon,
.tone-blue .ref-summary-icon {
    color: #2d74ff;
    background: #f7faff;
}

.tone-orange .ref-stat-icon,
.tone-orange .ref-summary-icon {
    color: #f49b12;
    background: #fffaf1;
}

.tone-pink .ref-stat-icon,
.tone-pink .ref-summary-icon {
    color: #f23969;
    background: #fff7f9;
}

.tone-violet.ref-quick-action {
    background: linear-gradient(135deg, #f5efff 0%, #faf4ff 100%);
}

.tone-purple.ref-quick-action {
    background: linear-gradient(135deg, #f1efff 0%, #f7f5ff 100%);
    color: #5b49f6;
}

.tone-green.ref-quick-action {
    background: linear-gradient(135deg, #ebfbf1 0%, #f3fff7 100%);
    color: #24ad63;
}

.tone-violet.ref-quick-action {
    color: #6e51ef;
}

.tone-amber.ref-quick-action {
    background: linear-gradient(135deg, #fff7ea 0%, #fffaf1 100%);
    color: #ff9d13;
}

.tone-red.ref-quick-action {
    background: linear-gradient(135deg, #ffecef 0%, #fff6f7 100%);
    color: #f23f69;
}

.tone-blue.ref-quick-action {
    background: linear-gradient(135deg, #eef3ff 0%, #f5f8ff 100%);
    color: #356cff;
}

.tone-purple .ref-event-date {
    background: linear-gradient(135deg, #f0ebff 0%, #f7f3ff 100%);
}

.admin-dashboard-reference-page .ref-stat-card.tone-purple a,
.admin-dashboard-reference-page .ref-summary-card.tone-purple a {
    color: #5d4fff;
}

.admin-dashboard-reference-page .ref-stat-card.tone-green a,
.admin-dashboard-reference-page .ref-summary-card.tone-green a {
    color: #23af63;
}

.admin-dashboard-reference-page .ref-stat-card.tone-blue a,
.admin-dashboard-reference-page .ref-summary-card.tone-blue a {
    color: #356cff;
}

.admin-dashboard-reference-page .ref-stat-card.tone-orange a,
.admin-dashboard-reference-page .ref-summary-card.tone-orange a {
    color: #f49b12;
}

.admin-dashboard-reference-page .ref-stat-card.tone-pink a,
.admin-dashboard-reference-page .ref-summary-card.tone-pink a {
    color: #f23969;
}

@media (max-width: 1480px) {
    .ref-top-card-grid,
    .ref-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .ref-dashboard-main,
    .ref-quick-grid {
        grid-template-columns: 1fr;
    }

    .ref-top-card-grid,
    .ref-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subject-checkbox-grid,
    .subject-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .students-bulk-summary-grid,
    .students-bulk-editor-grid,
    .students-bulk-documents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .students-ref-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .students-ref-toolbar {
        grid-template-columns: 1fr;
    }

    .students-ref-search {
        grid-template-columns: 1fr;
    }

    .students-ref-search > i {
        left: 14px;
        top: 76px;
        transform: none;
    }

    .students-ref-search input {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .admin-dashboard-reference-page {
        padding: 16px 12px 20px;
    }

    .admin-dashboard-hero h1 {
        font-size: 28px;
    }

    .admin-dashboard-hero p {
        font-size: 14px;
    }

    .ref-card-head h2 {
        font-size: 24px;
    }

    .ref-top-card-grid,
    .ref-summary-grid {
        grid-template-columns: 1fr;
    }

    .ref-event-item {
        grid-template-columns: auto 1fr;
    }

    .ref-event-time {
        grid-column: 2;
        margin-top: 6px;
    }

    .ref-stat-copy strong,
    .ref-summary-copy strong {
        font-size: 24px;
    }

    .ref-quick-action strong,
    .ref-event-copy strong {
        font-size: 18px;
    }

    .ref-event-copy p,
    .ref-event-time {
        font-size: 15px;
    }

    .subject-top-filters,
    .subject-toolbar-actions,
    .subject-list-head-row {
        flex-direction: column;
        align-items: stretch;
    }

    .subject-top-filters {
        grid-template-columns: 1fr;
    }

    .subject-top-filters .input-icon-field,
    .subject-top-filters .session-search {
        min-width: 0;
        width: 100%;
    }

    .subject-search-field {
        grid-column: span 1;
    }

    .subject-span-2 {
        grid-column: span 1;
    }

    .subject-checkbox-grid,
    .subject-view-grid {
        grid-template-columns: 1fr;
    }

    .students-reference-page {
        padding: 14px 12px 20px;
    }

    .students-ref-stat-grid {
        grid-template-columns: 1fr;
    }

    .students-bulk-summary-grid,
    .students-bulk-editor-grid,
    .students-bulk-documents-grid {
        grid-template-columns: 1fr;
    }

    .students-bulk-editor-field.span-2 {
        grid-column: auto;
    }

    .students-ref-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .students-ref-search {
        grid-template-columns: 1fr;
    }

    .students-ref-search > i {
        top: 76px;
    }

    .students-ref-action,
    .students-ref-add-btn {
        width: 100%;
    }

    .students-bulk-panel-actions,
    .students-bulk-editor-actions {
        width: 100%;
    }
}

.settings-preview-card small {
    display: block;
    color: #6d7d98;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
}

.settings-preview-media {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f4f8ff 0%, #edf4ff 100%);
    border: 1px solid #dbe7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.settings-preview-media.favicon {
    border-radius: 20px;
}

.settings-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-preview-media span {
    color: #2f6ff0;
    font-size: 30px;
}

.settings-form-card {
    margin-bottom: 16px;
}

.settings-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.settings-span-2 {
    grid-column: span 2;
}

.settings-note,
.settings-form-actions {
    grid-column: 1 / -1;
}

.settings-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #dbe7ff;
    border-radius: 12px;
    background: #f5f9ff;
    color: #31548e;
    padding: 14px 16px;
}

.settings-note i {
    color: #2f6ff0;
    margin-top: 2px;
}

.settings-note p {
    margin: 0;
    font-size: 13px;
}

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1300px) {
    .settings-preview-grid,
    .settings-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .settings-preview-grid,
    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-span-2 {
        grid-column: auto;
    }

    .settings-form-actions {
        justify-content: stretch;
    }

    .settings-form-actions .admin-primary-btn {
        width: 100%;
    }
}

.email-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.settings-test-btn {
    min-width: 118px;
    justify-content: center;
}

.email-settings-card {
    padding: 0;
}

.email-settings-card .admin-panel-head {
    padding: 18px 18px 0;
}

.email-settings-card .admin-panel-head p {
    margin: 4px 0 0;
    color: #7c8aa4;
    font-size: 12px;
    font-weight: 600;
}

.email-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 16px 18px 18px;
}

.admin-content .email-settings-card .input-icon-field::before {
    display: none !important;
    content: none !important;
}

.admin-content .email-settings-card .input-icon-field i {
    left: 10px;
}

.admin-content .email-settings-card .input-icon-field input,
.admin-content .email-settings-card .input-icon-field select {
    padding-left: 64px;
}

.email-settings-status-block {
    padding-top: 2px;
}

.email-settings-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.email-settings-status-row strong {
    display: block;
    color: #1d8e43;
    font-size: 13px;
}

.email-settings-status-row p {
    margin: 4px 0 0;
    color: #7d8da8;
    font-size: 11px;
}

.admin-content .payment-settings-card .input-icon-field::before {
    display: none !important;
    content: none !important;
}

.admin-content .payment-settings-card .input-icon-field i {
    left: 10px;
}

.admin-content .payment-settings-card .input-icon-field input,
.admin-content .payment-settings-card .input-icon-field select {
    padding-left: 64px;
}

.email-settings-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.email-settings-toggle-wrap input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.email-settings-toggle {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #dbe4f3;
    position: relative;
    transition: background 0.2s ease;
}

.email-settings-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.email-settings-toggle-wrap input:checked + .email-settings-toggle {
    background: #41b14b;
}

.email-settings-toggle-wrap input:checked + .email-settings-toggle::after {
    transform: translateX(16px);
}

.email-settings-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 18px 18px;
}

.email-notification-list {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}

.email-notification-item {
    border: 1px solid #edf1f8;
    border-radius: 14px;
    padding: 14px 14px 14px 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.email-notification-copy {
    flex: 1 1 auto;
}

.email-notification-copy strong {
    display: block;
    color: #1a3161;
    font-size: 13px;
}

.email-notification-copy p {
    margin: 4px 0 0;
    color: #8391aa;
    font-size: 11px;
    font-weight: 600;
}

.email-notification-icon,
.email-status-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.email-notification-icon {
    position: relative;
    flex-direction: column;
    font-size: 15px;
}

.email-notification-icon small {
    position: absolute;
    bottom: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.tone-blue { background: #ffffff; color: #2f6ff0; }
.tone-violet { background: #ffffff; color: #8a58ff; }
.tone-amber { background: #ffffff; color: #f1a331; }
.tone-green { background: #ffffff; color: #27a55f; }

.email-status-summary {
    margin-bottom: 14px;
}

.email-status-summary .admin-panel-head {
    padding-bottom: 0;
}

.email-status-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 10px 14px 16px;
}

.email-status-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-right: 1px solid #edf1f8;
}

.email-status-stat:last-child {
    border-right: 0;
}

.email-status-stat small {
    display: block;
    color: #7b89a2;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 5px;
}

.email-status-stat strong {
    color: #173468;
    font-size: 12px;
    font-weight: 800;
    word-break: break-word;
}

.email-settings-note {
    margin-bottom: 16px;
}

@media (max-width: 1300px) {
    .email-settings-layout {
        grid-template-columns: 1fr;
    }

    .email-status-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .email-status-stat {
        border-right: 0;
        border: 1px solid #edf1f8;
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .email-settings-form-grid,
    .email-status-summary-grid {
        grid-template-columns: 1fr;
    }

    .email-settings-card-actions,
    .settings-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-test-btn {
        width: 100%;
    }
}

.payment-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.payment-settings-card {
    padding: 0;
}

.payment-settings-card .admin-panel-head {
    padding: 18px 18px 0;
}

.payment-settings-card .admin-panel-head p {
    margin: 4px 0 0;
    color: #7c8aa4;
    font-size: 12px;
    font-weight: 600;
}

.payment-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 16px 18px 18px;
}

.payment-settings-status-block {
    padding-top: 2px;
}

.payment-settings-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 18px 18px;
}

.payment-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 16px;
}

.payment-transactions-card,
.payment-gateway-status-card {
    padding: 0;
}

.payment-transactions-card .admin-panel-head,
.payment-gateway-status-card .admin-panel-head {
    padding: 18px 18px 0;
}

.payment-transactions-table th,
.payment-transactions-table td {
    white-space: nowrap;
}

.payment-transactions-footer {
    display: flex;
    justify-content: center;
    padding: 0 18px 18px;
}

.payment-transactions-footer a {
    color: #2f6ff0;
    font-size: 12px;
    font-weight: 800;
}

.payment-gateway-status-card .admin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.payment-gateway-status-list {
    display: grid;
    gap: 16px;
    padding: 20px 18px;
}

.payment-gateway-status-list small {
    display: block;
    color: #7b89a2;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}

.payment-gateway-status-list strong {
    color: #173468;
    font-size: 12px;
    font-weight: 800;
}

.payment-live-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.payment-live-state span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35b04d;
    display: inline-block;
}

.payment-status-btn {
    width: calc(100% - 36px);
    margin: 0 18px 18px;
    justify-content: center;
}

@media (max-width: 1300px) {
    .payment-settings-layout,
    .payment-summary-layout {
        grid-template-columns: 1fr;
    }

    .payment-gateway-status-card .admin-panel-head {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .payment-settings-form-grid {
        grid-template-columns: 1fr;
    }

    .payment-settings-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.general-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 16px;
}

.general-settings-card {
    padding: 0;
}

.general-settings-card .admin-panel-head {
    padding: 18px 18px 0;
}

.general-settings-card .admin-panel-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.general-settings-card .admin-panel-head p {
    margin: 4px 0 0;
    color: #7c8aa4;
    font-size: 12px;
    font-weight: 600;
}

.general-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding: 16px 18px 18px;
}

.admin-content .general-settings-card .input-icon-field::before {
    display: none !important;
    content: none !important;
}

.admin-content .general-settings-card .input-icon-field i {
    left: 10px;
}

.admin-content .general-settings-card .input-icon-field input,
.admin-content .general-settings-card .input-icon-field select {
    padding-left: 64px;
}

.general-settings-help {
    display: block;
    margin-top: 7px;
    color: #8695af;
    font-size: 10px;
    font-weight: 700;
}

.general-settings-brand-block {
    padding: 16px 18px 18px;
}

.general-settings-favicon-preview {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    border: 1px solid #e8edf6;
    background: #f8fbff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}

.general-settings-favicon-preview img,
.general-settings-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.general-settings-favicon-preview span,
.general-settings-logo-mark i {
    color: #2f6ff0;
    font-size: 30px;
}

.general-settings-upload-btn {
    display: inline-flex;
    margin-bottom: 8px;
}

.logo-card {
    grid-column: span 1;
}

.general-settings-logo-preview {
    margin: 16px 18px 12px;
    border: 1px solid #e9edf5;
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
}

.general-settings-logo-copy {
    display: flex;
    align-items: center;
    gap: 16px;
}

.general-settings-logo-mark {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.general-settings-logo-copy strong {
    display: block;
    color: #1b2e6a;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.general-settings-logo-copy small {
    display: block;
    margin-top: 6px;
    color: #6f7f99;
    font-size: 14px;
    font-weight: 700;
}

.general-settings-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #ffd6db;
    background: #fff3f5;
    color: #ff6577;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.general-settings-footer-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.general-settings-note-copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.general-settings-note-copy i {
    font-size: 20px;
}

.general-settings-note-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #21418b;
}

.general-settings-footer-note p {
    font-size: 11px;
}

@media (max-width: 1300px) {
    .general-settings-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .general-settings-form-grid {
        grid-template-columns: 1fr;
    }

    .general-settings-logo-preview,
    .general-settings-footer-note {
        flex-direction: column;
        align-items: stretch;
    }

    .general-settings-logo-copy strong {
        font-size: 20px;
    }

    .general-settings-footer-note .admin-primary-btn,
    .general-settings-upload-btn,
    .settings-test-btn {
        width: 100%;
        justify-content: center;
    }
}

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

.circular-form-card,
.circular-table-card {
    margin-bottom: 16px;
}

.circular-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.circular-filter-grid-events {
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)) auto;
}

.circular-table td,
.circular-table th {
    white-space: nowrap;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.category-pill-general { background: #edf4ff; color: #2f6ff0; }
.category-pill-admissions { background: #f4efff; color: #8a58ff; }
.category-pill-examination { background: #fff5e8; color: #ef9f28; }
.category-pill-scholarship { background: #eefaf2; color: #2aa45d; }
.category-pill-events { background: #fff0f3; color: #ff5d74; }
.category-pill-library { background: #edf8ff; color: #2e9fd8; }
.category-pill-fees { background: #f3f4f8; color: #7a869f; }

.action-btn.view {
    border-color: #d8e6ff;
    color: #6d86f6;
    background: #f5f8ff;
}

@media (max-width: 1300px) {
    .circular-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 768px) {
    .circular-stat-grid,
    .circular-filter-grid {
        grid-template-columns: 1fr;
    }
}

.website-page-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.website-page-selector-card {
    margin-bottom: 16px;
}

.website-page-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 18px 18px;
}

.website-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: 16px;
}

.website-page-main-card,
.website-side-card {
    padding: 0;
}

.website-page-main-card .admin-panel-head,
.website-side-card .admin-panel-head {
    padding: 18px 18px 0;
}

.website-page-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding: 16px 18px 18px;
}

.website-page-span-2 {
    grid-column: span 2;
}

.website-editor-card {
    border: 1px solid #e7edf8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.website-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f8;
}

.website-editor-toolbar button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7182a0;
}

.website-editor-body {
    padding: 16px;
    min-height: 160px;
}

.website-editor-body h3 {
    margin: 0 0 12px;
    color: #173468;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
}

.website-editor-body p {
    margin: 0 0 12px;
    color: #27406b;
    font-size: 13px;
    line-height: 1.7;
}

.website-editor-footer {
    border-top: 1px solid #edf1f8;
    padding: 8px 14px;
    text-align: right;
    color: #7a88a2;
    font-size: 11px;
    font-weight: 700;
}

.website-gallery-grid {
    display: grid;
    grid-template-columns: 130px repeat(3, 1fr);
    gap: 10px;
}

.website-gallery-upload,
.website-gallery-thumb {
    border: 1px solid #e7edf8;
    border-radius: 12px;
    background: #fff;
    min-height: 94px;
    position: relative;
    overflow: hidden;
}

.website-gallery-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    color: #6e7f9c;
    padding: 12px;
}

.website-gallery-upload span {
    color: #2f6ff0;
    font-size: 22px;
}

.website-gallery-upload strong {
    font-size: 11px;
}

.website-gallery-upload small {
    font-size: 10px;
    font-weight: 700;
}

.website-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.website-gallery-thumb button,
.website-banner-preview button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 6px;
    background: #fff1f2;
    color: #ff6577;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.website-upload-input {
    margin-top: 8px;
}

.website-page-sidebar {
    display: grid;
    gap: 16px;
}

.website-banner-preview {
    margin: 16px 18px 12px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 118px;
    background: #eef3fb;
}

.website-banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.website-preview-card {
    margin: 16px 18px 12px;
    border: 1px solid #e7edf8;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.website-preview-banner {
    min-height: 130px;
    background: #eef3fb;
}

.website-preview-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.website-preview-body {
    padding: 14px;
}

.website-preview-slug {
    display: block;
    color: #7a88a3;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 8px;
}

.website-preview-body h3 {
    margin: 0 0 8px;
    color: #173468;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.website-preview-body p {
    margin: 0 0 10px;
    color: #48607f;
    font-size: 12px;
    line-height: 1.6;
}

.website-preview-section {
    border-top: 1px solid #edf1f8;
    padding-top: 10px;
}

.website-preview-section strong {
    display: block;
    color: #173468;
    font-size: 13px;
    margin-bottom: 8px;
}

.website-banner-upload {
    margin: 0 18px;
    display: inline-flex;
}

.website-side-card .general-settings-help {
    margin: 8px 18px 18px;
}

.website-side-form {
    padding: 16px 18px 18px;
    display: grid;
    gap: 14px;
}

.website-side-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.website-side-toggle strong {
    color: #173468;
    font-size: 13px;
}

.website-sections-builder {
    display: grid;
    gap: 14px;
}

.website-section-item {
    border: 1px solid #e7edf8;
    border-radius: 14px;
    background: #fbfdff;
    padding: 14px;
}

.website-section-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.website-section-item-head strong {
    color: #173468;
    font-size: 14px;
    font-weight: 800;
}

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

.website-sections-actions {
    display: flex;
    justify-content: flex-start;
}

.admin-primary-btn.secondary {
    background: #f4f8ff;
    color: #2f6ff0;
    border: 1px solid #d9e5ff;
    box-shadow: none;
}

@media (max-width: 1300px) {
    .website-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .website-page-head-actions,
    .website-page-form-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .website-page-span-2 {
        grid-column: auto;
    }

    .website-gallery-grid {
        grid-template-columns: 1fr;
    }

    .website-page-selector-grid {
        grid-template-columns: 1fr;
    }

    .website-section-grid {
        grid-template-columns: 1fr;
    }
}

.login-role-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.login-role-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dfef;
    border-radius: 16px;
    padding: 14px 18px;
    background: #f7faff;
    font-weight: 800;
    color: #1f2d3d;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-role-option.active {
    border-color: #2f7df6;
    background: rgba(47, 125, 246, 0.12);
    color: #1256bb;
}

.login-role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.student-panel-page .admin-page-intro,
.student-panel-page .admin-welcome {
    margin-bottom: 24px;
}

.student-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, #f6fbff 0%, #edf4ff 54%, #f8fcff 100%);
    border: 1px solid #d8e6ff;
}

.student-hero-meta {
    display: grid;
    gap: 10px;
    min-width: 240px;
}

.student-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    color: #27446b;
    font-weight: 700;
}

.student-profile-snapshot {
    display: flex;
    align-items: center;
    gap: 18px;
}

.student-profile-snapshot img,
.student-profile-header img {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    object-fit: cover;
    border: 4px solid #edf4ff;
    background: #f3f6fb;
}

.student-profile-copy,
.student-profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.student-profile-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.student-profile-copy p,
.student-result-highlight p,
.student-empty-state {
    margin: 0;
    color: #5f7085;
}

.student-result-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.student-profile-grid,
.student-exam-card-grid {
    display: grid;
    gap: 24px;
}

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

.student-exam-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

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

.student-detail-grid.compact {
    gap: 14px;
}

.student-detail-grid div {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fbff;
}

.student-detail-grid strong {
    color: #22324a;
    font-size: 14px;
}

.student-detail-grid span {
    color: #62748b;
    word-break: break-word;
}

.student-signature-row {
    margin-top: 18px;
}

.student-signature-row img {
    width: 220px;
    max-width: 100%;
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
    background: #f8fbff;
}

.student-exam-stack,
.student-exam-submit-wrap {
    display: grid;
    gap: 14px;
}

.student-exam-item,
.student-exam-card,
.student-option-card {
    text-decoration: none;
}

.student-exam-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: #f8fbff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-exam-item:hover,
.student-option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(40, 80, 160, 0.08);
}

.student-exam-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.student-exam-card h2,
.student-question-card h2 {
    margin-bottom: 8px;
}

.student-exam-cta {
    margin-top: 18px;
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

.student-empty-state-card,
.student-empty-state {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.student-question-card {
    margin-bottom: 20px;
}

.student-question-text {
    margin: 0 0 18px;
    color: #1f2d3d;
    font-size: 17px;
    font-weight: 700;
}

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

.student-option-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dbe6f4;
    border-radius: 18px;
    background: #fbfdff;
    cursor: pointer;
}

.student-option-card input {
    margin-top: 4px;
}

.student-option-card span {
    color: #33445c;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .student-hero-card,
    .student-profile-header,
    .student-profile-snapshot {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-profile-grid,
    .student-detail-grid,
    .student-option-grid {
        grid-template-columns: 1fr;
    }

    .student-hero-meta {
        width: 100%;
        min-width: 0;
    }

    .student-result-score {
        flex-direction: column;
        align-items: flex-start;
    }
}

.student-sidebar-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
    border-right: 1px solid #f2efff;
    padding: 6px 0 20px;
    box-shadow: 22px 0 52px rgba(74, 51, 164, 0.08);
    overflow: visible;
}

.student-sidebar-card::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 305px;
    width: 26px;
    height: 22px;
    background: #ffffff;
    border-top-right-radius: 22px;
    z-index: 2;
}

.student-sidebar-top {
    position: relative;
    overflow: hidden;
    margin: 0 2px;
    border-radius: 6px 6px 22px 22px;
    padding: 20px 24px 30px;
    background:
        radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.16), transparent 22%),
        linear-gradient(180deg, #5a46f0 0%, #4636e1 56%, #4e3fe7 100%);
    box-shadow: 0 24px 52px rgba(81, 58, 205, 0.3);
}

.student-sidebar-top::after {
    content: "";
    position: absolute;
    left: -38px;
    bottom: -30px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.26) 0 2px,
            transparent 2px 7px
        );
    opacity: 0.42;
    pointer-events: none;
}

.student-sidebar-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.student-sidebar-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.student-sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #684ef4;
    box-shadow: 0 12px 24px rgba(24, 15, 96, 0.18);
}

.student-sidebar-logo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.student-sidebar-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-sidebar-brand small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 600;
}

.student-sidebar-profile-card {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-align: center;
}

.student-sidebar-profile-copy {
    min-width: 0;
}

.student-sidebar-profile-copy strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 10px 22px rgba(16, 10, 78, 0.24);
}

.student-sidebar-photo {
    position: relative;
    width: 102px;
    height: 102px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(225, 227, 255, 0.9) 100%);
    box-shadow: 0 18px 32px rgba(17, 14, 69, 0.2);
    flex-shrink: 0;
}

.student-sidebar-photo img,
.student-topbar-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.student-sidebar-photo span,
.student-topbar-avatar {
    display: grid;
    place-items: center;
}

.student-sidebar-photo span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    font-size: 42px;
    font-weight: 800;
    color: #fff;
}

.student-sidebar-photo em {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1fd16f;
    border: 3px solid #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(12, 143, 69, 0.32);
}

.student-sidebar-photo em i {
    color: #fff;
    font-size: 7px;
}

.student-sidebar-profile-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.student-sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 26px;
    padding: 3px 14px;
    border-radius: 999px;
    background: rgba(199, 158, 255, 0.24);
    color: #f6ebff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.student-sidebar-menu {
    gap: 5px;
    padding: 24px 16px 0;
    overflow: visible;
}

.student-sidebar-menu > a,
.student-menu-toggle {
    min-height: 50px;
    border-radius: 14px;
    padding: 0 15px;
    color: #252654;
    font-size: 12.5px;
    font-weight: 900;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.student-menu-toggle {
    justify-content: space-between;
}

.student-sidebar-menu > a i,
.student-menu-toggle > span i {
    width: 22px;
    height: 22px;
    margin-right: 13px;
    color: #6b4cf0;
    text-align: center;
    font-size: 18px;
}

.student-menu-toggle > span {
    display: inline-flex;
    align-items: center;
}

.student-sidebar-menu > a {
    gap: 0;
}

.student-sidebar-menu > a.active,
.student-sidebar-menu > a:hover {
    background: linear-gradient(180deg, #f7f4ff 0%, #f3efff 100%);
    color: #633ef0;
    box-shadow: inset 0 0 0 1px rgba(109, 81, 244, 0.04);
    transform: translateX(0);
}

.student-menu-group.open .student-menu-toggle {
    background: transparent;
    color: #26235a;
}

.student-menu-group.open .student-menu-toggle .fa-angle-down {
    transform: rotate(180deg);
}

.student-sidebar-menu > a.active {
    background: linear-gradient(180deg, #f8f5ff 0%, #f2eeff 100%);
    color: #6a43ee;
    box-shadow: 0 10px 22px rgba(111, 85, 235, 0.08);
}

.student-menu-toggle .fa-angle-down {
    margin-right: 2px;
    color: #26235a;
    font-size: 12px;
}

.student-menu-profile-group .student-menu-toggle > span i,
.student-sidebar-menu > a.student-menu-dashboard i {
    color: #6c4cf5;
}

.student-sidebar-menu > a.student-menu-fees i {
    color: #17c964;
}

.student-sidebar-menu > a.student-menu-academic i {
    color: #ff9800;
}

.student-sidebar-menu > a.student-menu-library i {
    color: #0a84ff;
}

.student-sidebar-menu > a.student-menu-exams i {
    color: #7c3aed;
}

.student-sidebar-menu > a.student-menu-applications i {
    color: #ff3b7a;
}

.student-sidebar-menu > a.student-menu-notifications i {
    color: #ffbf00;
}

.student-sidebar-menu > a.student-menu-dashboard.active i,
.student-sidebar-menu > a.student-menu-dashboard:hover i {
    color: #6c4cf5;
}

.student-sidebar-menu > a.student-menu-fees i,
.student-sidebar-menu > a.student-menu-fees:hover i,
.student-sidebar-menu > a.student-menu-fees.active i {
    color: #17c964;
}

.student-sidebar-menu > a.student-menu-academic i,
.student-sidebar-menu > a.student-menu-academic:hover i,
.student-sidebar-menu > a.student-menu-academic.active i {
    color: #ff9800;
}

.student-sidebar-menu > a.student-menu-library i,
.student-sidebar-menu > a.student-menu-library:hover i,
.student-sidebar-menu > a.student-menu-library.active i {
    color: #0a84ff;
}

.student-sidebar-menu > a.student-menu-exams i,
.student-sidebar-menu > a.student-menu-exams:hover i,
.student-sidebar-menu > a.student-menu-exams.active i {
    color: #7c3aed;
}

.student-sidebar-menu > a.student-menu-applications i,
.student-sidebar-menu > a.student-menu-applications:hover i,
.student-sidebar-menu > a.student-menu-applications.active i {
    color: #ff3b7a;
}

.student-sidebar-menu > a.student-menu-notifications i,
.student-sidebar-menu > a.student-menu-notifications:hover i,
.student-sidebar-menu > a.student-menu-notifications.active i {
    color: #ffbf00;
}

.student-menu-profile-group .student-menu-toggle:hover > span i,
.student-menu-profile-group .student-menu-toggle.active > span i {
    color: #6c4cf5;
}

.student-sidebar-logout i,
.student-sidebar-logout {
    color: #ff3366;
}

.student-submenu {
    margin: 1px 0 10px 34px;
    padding: 0;
}

.student-submenu::before {
    display: none;
}

.student-submenu a {
    min-height: 30px;
    color: #7a83b1;
    font-size: 11.5px;
    font-weight: 700;
    padding: 0 10px 0 16px;
}

.student-submenu a:hover,
.student-submenu a.active {
    color: #252654;
    background: transparent;
}

.student-submenu a::before {
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b4a0ff;
}

.student-submenu a:hover::before,
.student-submenu a.active::before {
    background: #8f7aff;
}

.student-sidebar-footer {
    margin-top: auto;
    padding: 18px 16px 0;
    border-top: 1px solid #f4f0fb;
}

.student-sidebar-logout {
    min-height: 50px;
    justify-content: flex-start;
    border-radius: 14px;
    background: transparent;
    color: #ff2f74;
    font-weight: 800;
    box-shadow: none;
    font-size: 12.5px;
}

.student-sidebar-logout i {
    color: #ff2f65;
    width: 22px;
    margin-right: 13px;
    font-size: 19px;
}

.student-sidebar-logout:hover {
    background: linear-gradient(180deg, #fff6fa 0%, #fff0f6 100%);
    color: #ff2f65;
    box-shadow: inset 0 0 0 1px rgba(255, 74, 127, 0.06);
}

.student-topbar-shell {
    display: grid;
    min-height: 64px;
    padding: 10px 18px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #f0eefb;
    box-shadow: 0 14px 34px rgba(61, 49, 133, 0.06);
}

.student-topbar-menu {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    color: #6160a8;
    box-shadow: none;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.student-topbar-menu:hover {
    background: #f3f0ff;
}

.student-topbar-spacer {
    min-width: 0;
}

.student-topbar-right {
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.student-topbar-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #232b5c;
    background: transparent;
    font-size: 16px;
    border: 0;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.student-topbar-icon-btn:hover {
    background: #f3f0ff;
}

.student-topbar-icon-btn span {
    position: absolute;
    top: -3px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff264f;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    box-shadow: 0 4px 10px rgba(255, 38, 79, 0.28);
}

.student-topbar-settings-btn {
    color: #3f4678;
}

.student-notification-menu {
    right: -10px;
}

.student-topbar-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}
.student-topbar-chip:hover {
    opacity: 0.8;
}

.student-topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f0edff 0%, #ede9ff 100%);
    color: #5d4ce8;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
}

.student-topbar-chip strong {
    color: #17204f;
    font-size: 13px;
    font-weight: 900;
}

.student-topbar-chip small {
    color: #7d88ae;
    font-size: 9px;
    font-weight: 700;
}

.student-topbar-chip .fa-angle-down {
    color: #596384;
    font-size: 11px;
}

.student-topbar-menu-panel {
    right: 0;
    top: calc(100% + 10px);
    min-width: 190px;
    border: 1px solid #edf0fb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 44px rgba(59, 57, 109, 0.12);
}

.student-topbar-menu-panel a {
    color: #263460;
}

.student-dashboard-page {
    padding-top: 10px;
    display: grid;
    gap: 20px;
    overflow: visible;
}

.student-hello-block h1 {
    margin: 0 0 8px;
    color: #1a2354;
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.1;
}

.student-hello-block p {
    margin: 0;
    color: #667395;
    font-size: 17px;
}

.student-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.student-stat-card,
.student-surface-card {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #eef1fb;
    box-shadow: 0 18px 45px rgba(72, 66, 115, 0.06);
}

.student-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 124px;
    padding: 20px;
}

.student-stat-card > div {
    min-width: 0;
    flex: 1;
}

.student-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

.student-stat-card h3,
.student-section-head h2,
.student-glance-card strong {
    margin: 0;
}

.student-stat-card h3 {
    color: #24305c;
    font-size: 11px;
    font-weight: 800;
}

.student-stat-value {
    margin-top: 6px;
    color: #172250;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.student-stat-value-compact {
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.registration-stat-card {
    align-items: flex-start;
}

.registration-stat-card .student-stat-value-compact {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(13px, 1.15vw, 15px);
    letter-spacing: -0.03em;
}

.student-stat-meta {
    margin-top: 8px;
    color: #7a84a4;
    font-size: 10px;
    font-weight: 700;
}

.student-stat-card.green .student-stat-icon {
    background: linear-gradient(180deg, #eafbf0 0%, #e3f7ea 100%);
    color: #18b85a;
}

.student-stat-card.purple .student-stat-icon {
    background: linear-gradient(180deg, #f1edff 0%, #ece7ff 100%);
    color: #6b4df7;
}

.student-stat-card.blue .student-stat-icon {
    background: linear-gradient(180deg, #eaf4ff 0%, #e2eeff 100%);
    color: #1f84f2;
}

.student-stat-card.orange .student-stat-icon {
    background: linear-gradient(180deg, #fff3e5 0%, #ffe9d5 100%);
    color: #ff961f;
}

.student-stat-card.pink .student-stat-icon {
    background: linear-gradient(180deg, #ffeaf1 0%, #ffe3ec 100%);
    color: #ff4b86;
}

.student-status-pill {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    background: #e8faef;
    color: #16aa56;
    font-size: 11px;
    font-weight: 800;
}

.student-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: 20px;
}

.student-surface-card {
    padding: 22px 22px 20px;
}

.student-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.student-section-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f2755;
    font-size: 24px;
}

.student-section-head h2 i {
    color: #6a4ef6;
    font-size: 18px;
}

.student-section-head a {
    color: #654ff6;
    font-size: 14px;
    font-weight: 800;
}

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

.student-quick-link {
    min-height: 94px;
    border-radius: 18px;
    padding: 16px 14px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-quick-link i {
    font-size: 28px;
}

.student-quick-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px rgba(83, 74, 145, 0.1);
}

.student-quick-link.purple {
    background: linear-gradient(180deg, #f5f1ff 0%, #f1edff 100%);
    color: #6a4ef6;
}

.student-quick-link.green {
    background: linear-gradient(180deg, #edf9f0 0%, #e8f8ec 100%);
    color: #1eb75c;
}

.student-quick-link.orange {
    background: linear-gradient(180deg, #fff4e8 0%, #fff0e0 100%);
    color: #ff971b;
}

.student-quick-link.blue {
    background: linear-gradient(180deg, #edf5ff 0%, #e8f1ff 100%);
    color: #2280f0;
}

.student-quick-link.pink {
    background: linear-gradient(180deg, #ffedf3 0%, #ffe8ef 100%);
    color: #ff427a;
}

.student-quick-link.violet {
    background: linear-gradient(180deg, #f1efff 0%, #ebe8ff 100%);
    color: #6f4eff;
}

.student-quick-link.sky {
    background: linear-gradient(180deg, #ecf7ff 0%, #e4f4ff 100%);
    color: #2196f3;
}

.student-quick-link.yellow {
    background: linear-gradient(180deg, #fff9e8 0%, #fff4da 100%);
    color: #ffb600;
}

.student-notification-list {
    display: grid;
    gap: 14px;
}

.student-notification-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #eff2fb;
}

.student-notification-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.student-notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
}

.student-notification-item p {
    margin: 0;
    color: #23315c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.student-notification-item small {
    color: #8a94af;
    font-size: 12px;
    font-weight: 700;
}

.student-notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #775ef8;
}

.student-notification-icon.purple {
    background: #f1edff;
    color: #6e53f8;
}

.student-notification-icon.blue {
    background: #edf5ff;
    color: #2786ef;
}

.student-notification-icon.green {
    background: #ecf9f0;
    color: #16b95a;
}

.student-notification-icon.pink {
    background: #ffedf3;
    color: #ff4f84;
}

.student-glance-wrap {
    padding: 18px 22px;
}

.student-glance-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.student-glance-card {
    min-height: 90px;
    padding: 16px 18px;
    border-radius: 18px;
    display: grid;
    align-content: center;
    gap: 8px;
}

.student-glance-card span {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 17px;
}

.student-glance-card small {
    color: #7f89a7;
    font-size: 12px;
    font-weight: 800;
}

.student-glance-card strong {
    color: #1e2756;
    font-size: 15px;
    font-weight: 900;
}

.student-glance-card.purple,
.student-glance-card.violet {
    background: linear-gradient(180deg, #f4f1ff 0%, #efeaff 100%);
}

.student-glance-card.green {
    background: linear-gradient(180deg, #eef9f1 0%, #e6f7eb 100%);
}

.student-glance-card.pink {
    background: linear-gradient(180deg, #ffedf3 0%, #ffe7ef 100%);
}

.student-glance-card.blue {
    background: linear-gradient(180deg, #edf5ff 0%, #e6f0ff 100%);
}

.student-glance-card.orange {
    background: linear-gradient(180deg, #fff4e7 0%, #ffefdf 100%);
}

.student-glance-card.purple span,
.student-glance-card.violet span {
    background: #fff;
    color: #6a4ef6;
}

.student-glance-card.green span {
    background: #fff;
    color: #1db35a;
}

.student-glance-card.pink span {
    background: #fff;
    color: #ff4d82;
}

.student-glance-card.blue span {
    background: #fff;
    color: #2487f4;
}

.student-glance-card.orange span {
    background: #fff;
    color: #ff971b;
}

.student-dashboard-footer {
    padding-bottom: 12px;
    text-align: center;
    color: #8c95ae;
    font-size: 13px;
    font-weight: 700;
}

.student-sidebar-card .admin-menu {
    min-height: 0;
}

@media (max-width: 1399px) {
    .student-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

@media (max-width: 1199px) {
    .student-sidebar-card {
        width: min(300px, 86vw);
        max-width: min(300px, 86vw);
        overflow-y: auto;
    }

    .student-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .student-topbar-shell {
        padding: 10px 14px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
    }

    .student-topbar-right {
        gap: 8px;
    }

    .student-profile-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .student-profile-id-card-panel,
    .student-profile-documents-card {
        grid-column: auto;
    }
}

@media (max-width: 991px) {
    .student-sidebar-card {
        width: min(290px, 88vw);
        max-width: min(290px, 88vw);
        padding: 16px 12px 18px;
    }

    .student-panel-page {
        overflow-x: hidden;
    }

    .student-topbar-shell {
        min-height: auto;
        padding: 10px 12px;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
    }

    .student-topbar-spacer {
        display: none;
    }

    .student-topbar-right {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: space-between;
    }

    .student-topbar-profile {
        margin-left: auto;
        min-width: 0;
    }

    .student-topbar-chip {
        min-width: 0;
    }

    .student-topbar-chip > div {
        min-width: 0;
    }

    .student-topbar-chip strong,
    .student-topbar-chip small {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .student-stat-grid,
    .student-quick-grid,
    .student-glance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-stat-card,
    .student-surface-card {
        border-radius: 20px;
    }

    .student-stat-card {
        min-height: 110px;
        padding: 16px;
    }

    .student-stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        font-size: 21px;
    }

    .student-surface-card {
        padding: 18px;
    }

    .student-section-head h2 {
        font-size: 20px;
    }

    .student-exam-card-grid,
    .student-profile-documents-grid {
        grid-template-columns: 1fr;
    }

    .student-exam-card-head,
    .student-profile-name-row,
    .student-profile-card-head,
    .student-id-breadcrumb,
    .student-id-note {
        flex-wrap: wrap;
    }

    .student-profile-hero-grid div {
        padding-left: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .student-profile-hero-grid span {
        text-align: left;
    }

    .student-profile-id-print-section,
    .student-profile-info-card,
    .student-profile-id-card-panel,
    .student-profile-documents-card {
        padding: 14px;
    }

    .student-detail-grid div,
    .student-option-card {
        padding: 14px;
    }
}

@media (max-width: 767px) {
    .student-sidebar-card {
        width: min(280px, 90vw);
        max-width: min(280px, 90vw);
    }

    .student-sidebar-top {
        padding: 16px 14px;
    }

    .student-sidebar-profile-row {
        gap: 12px;
    }

    .student-sidebar-help-card {
        padding: 12px;
    }

    .student-topbar-shell {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
        align-items: center;
    }

    .student-topbar-left {
        display: flex;
        align-items: center;
    }

    .student-topbar-right {
        grid-column: auto;
        width: 100%;
        gap: 8px;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .student-topbar-right > .student-topbar-icon-btn:not(.student-topbar-settings-btn) {
        display: none;
    }

    .admin-notification-menu {
        min-width: 280px;
        width: min(320px, calc(100vw - 20px));
        right: -8px;
    }

    .student-topbar-settings-btn {
        display: none;
    }

    .student-topbar-profile {
        margin-left: auto;
        width: auto;
    }

    .student-stat-grid,
    .student-quick-grid,
    .student-glance-grid {
        grid-template-columns: 1fr;
    }

    .student-hello-block h1 {
        font-size: 28px;
    }

    .student-hello-block p {
        font-size: 15px;
    }

    .student-stat-card {
        min-height: auto;
        padding: 15px;
    }

    .student-stat-value {
        font-size: 18px;
    }

    .student-stat-value-compact {
        font-size: 14px;
    }

    .student-quick-link {
        min-height: 82px;
        border-radius: 16px;
        font-size: 13px;
    }

    .student-quick-link span,
    .student-glance-card strong,
    .student-glance-card small {
        word-break: break-word;
    }

    .student-section-head {
        margin-bottom: 14px;
    }

    .student-notification-item {
        grid-template-columns: auto 1fr;
        gap: 10px;
        padding: 13px 0;
    }

    .student-notification-item small,
    .student-notification-dot {
        grid-column: 2;
    }

    .student-panel-page .admin-page-intro,
    .student-panel-page .admin-welcome {
        margin-bottom: 18px;
    }

    .student-panel-page .admin-page-intro h1,
    .student-hello-block h1,
    .student-profile-dashboard-head h1,
    .student-id-page-head h1 {
        font-size: 26px;
    }

    .student-panel-page .admin-page-intro p,
    .student-hello-block p {
        font-size: 14px;
    }

    .student-profile-hero-v2,
    .student-profile-info-card,
    .student-profile-id-card-panel,
    .student-profile-documents-card,
    .student-profile-id-print-section,
    .student-id-note,
    .student-surface-card,
    .student-glance-wrap {
        border-radius: 18px;
    }

    .student-question-text {
        font-size: 15px;
    }

    .student-id-card-shell {
        justify-items: stretch;
    }

    .student-profile-id-card-large,
    .student-id-card-page-card {
        max-width: 100%;
    }

    .student-profile-id-details {
        padding: 8px 14px 14px;
    }

    .student-profile-id-details div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .student-profile-id-details div::before {
        display: none;
    }

    .student-id-back-btn,
    .student-profile-edit-btn,
    .student-profile-download-btn,
    .student-profile-print-btn,
    .student-id-action-btn {
        width: 100%;
        justify-content: center;
    }

    .student-profile-hero-actions {
        width: 100%;
    }

    .session-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .users-table {
        min-width: 640px;
    }
}

@media (max-width: 575px) {
    .admin-content {
        padding: 12px;
    }

    .student-sidebar-top {
        border-radius: 22px;
    }

    .student-sidebar-brand strong {
        font-size: 15px;
    }

    .student-sidebar-photo {
        width: 64px;
        height: 64px;
    }

    .student-sidebar-profile-copy strong {
        font-size: 13px;
    }

    .student-sidebar-profile-copy small,
    .student-sidebar-status {
        font-size: 11px;
    }

    .student-sidebar-menu > a,
    .student-menu-toggle,
    .student-sidebar-logout {
        min-height: 44px;
    }

    .student-topbar-shell {
        padding: 10px;
    }

    .student-topbar-right {
        gap: 6px;
        justify-content: flex-end;
    }

    .student-topbar-profile {
        width: auto;
        order: 0;
    }

    .student-topbar-chip {
        width: auto;
        justify-content: flex-start;
        min-width: 0;
    }

    .student-topbar-chip strong {
        font-size: 13px;
    }

    .student-topbar-chip small {
        font-size: 10px;
    }

    .student-surface-card,
    .student-glance-wrap {
        padding: 16px;
    }

    .student-glance-card {
        min-height: 82px;
        padding: 14px 16px;
    }

    .student-profile-photo-v2 {
        width: 74px;
        height: 74px;
    }

    .student-profile-name-row h2 {
        font-size: 22px;
    }

    .student-profile-key-list span,
    .student-profile-hero-grid strong,
    .student-profile-hero-grid span,
    .student-profile-info-grid strong,
    .student-profile-info-grid span,
    .student-id-note p,
    .student-question-text,
    .student-detail-grid strong,
    .student-detail-grid span {
        font-size: 12px;
    }

    .student-exam-card-head small,
    .student-profile-breadcrumb,
    .student-id-breadcrumb {
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .student-topbar-icon-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .student-topbar-avatar {
        width: 34px;
        height: 34px;
    }

    .student-stat-card,
    .student-surface-card,
    .student-glance-wrap,
    .student-profile-hero-v2,
    .student-profile-info-card,
    .student-profile-id-card-panel,
    .student-profile-documents-card,
    .student-profile-id-print-section {
        padding: 12px;
    }

    .student-quick-link,
    .student-glance-card {
        min-height: auto;
    }

    .student-profile-id-top {
        padding: 14px 12px 42px;
    }

    .student-profile-id-photo {
        width: 82px;
        height: 100px;
    }

    .student-profile-id-center h3 {
        font-size: 14px;
    }
}

.student-profile-dashboard-page {
    display: grid;
    gap: 18px;
}

.student-profile-dashboard-head h1 {
    margin: 6px 0 8px;
    color: #1d2856;
    font-size: 34px;
    line-height: 1.1;
}

.student-profile-dashboard-head p,
.student-profile-breadcrumb,
.student-profile-document-item small,
.student-profile-info-grid span,
.student-profile-stat-card span {
    color: #7885a6;
}

.student-profile-dashboard-head p {
    margin: 0;
    font-size: 14px;
}

.student-profile-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
}

.student-profile-breadcrumb a,
.student-profile-card-head a {
    color: #6e57f5;
}

.student-profile-hero-v2,
.student-profile-stat-card,
.student-profile-info-card,
.student-profile-id-card-panel,
.student-profile-documents-card {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #edf1fc;
    box-shadow: 0 18px 44px rgba(78, 71, 126, 0.06);
}

.student-profile-hero-v2 {
    padding: 18px 18px 16px;
}

.student-profile-hero-main,
.student-profile-hero-left-v2,
.student-profile-name-row,
.student-profile-hero-actions,
.student-profile-card-head,
.student-profile-id-top,
.student-profile-id-body,
.student-profile-document-item {
    display: flex;
    align-items: center;
}

.student-profile-hero-main,
.student-profile-id-body {
    justify-content: space-between;
    gap: 22px;
}

.student-profile-hero-left-v2 {
    gap: 18px;
}

.student-profile-photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.student-profile-photo-v2 {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(180deg, #ede7ff 0%, #dcd2ff 100%);
    box-shadow: 0 16px 34px rgba(101, 83, 229, 0.12);
}

.student-profile-photo-v2 img,
.student-profile-id-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.student-profile-photo-v2 span,
.student-profile-id-photo span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: #f4f7ff;
    color: #664ef2;
    font-size: 34px;
    font-weight: 900;
}

.student-profile-photo-btn {
    position: absolute;
    right: 2px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #7b63ff 0%, #5f43f5 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    box-shadow: 0 10px 18px rgba(95, 67, 245, 0.3);
}

.student-profile-hero-copy {
    min-width: 0;
}

.student-profile-name-row {
    gap: 12px;
    margin-bottom: 10px;
}

.student-profile-name-row h2 {
    margin: 0;
    color: #24305d;
    font-size: 31px;
    line-height: 1.1;
}

.student-profile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #efeaff 0%, #e6ddff 100%);
    color: #7659fa;
    font-size: 11px;
    font-weight: 800;
}

.student-profile-key-list {
    display: grid;
    gap: 8px;
}

.student-profile-key-list span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #33436a;
    font-size: 13px;
    font-weight: 700;
}

.student-profile-key-list i {
    color: #755dfa;
    width: 16px;
    text-align: center;
}

.student-profile-hero-right-v2 {
    min-width: min(100%, 480px);
    flex: 1;
}

.student-profile-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.student-profile-hero-grid div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    padding: 0 0 0 14px;
    border-bottom: 1px solid #eff2fb;
}

.student-profile-hero-grid strong,
.student-profile-info-grid strong,
.student-profile-id-details strong,
.student-profile-document-item strong,
.student-profile-stat-card small {
    color: #313d68;
}

.student-profile-hero-grid strong {
    font-size: 12px;
    font-weight: 800;
}

.student-profile-hero-grid span {
    color: #232e59;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.student-profile-hero-actions {
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.student-profile-edit-btn,
.student-profile-download-btn {
    min-height: 38px;
    border-radius: 10px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(180deg, #775ef8 0%, #5d42f3 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(93, 66, 243, 0.18);
}

.student-profile-settings-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #edf0fb;
    border-radius: 10px;
    background: #fff;
    color: #67759f;
    display: grid;
    place-items: center;
}

.student-profile-stats-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.student-profile-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 18px 18px 22px;
}

.student-profile-stat-card small {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
}

.student-profile-stat-card strong {
    display: block;
    color: #18234f;
    font-size: 31px;
    line-height: 1;
    font-weight: 900;
}

.student-profile-stat-card span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

.student-profile-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    font-size: 18px;
}

.student-profile-stat-card em {
    display: none;
}

.student-profile-stat-card.purple .student-profile-stat-icon {
    background: #efe9ff;
    color: #745bf9;
}

.student-profile-stat-card.blue .student-profile-stat-icon {
    background: #e8f2ff;
    color: #2f86f1;
}

.student-profile-stat-card.green .student-profile-stat-icon {
    background: #e8fbef;
    color: #1bbc5d;
}

.student-profile-stat-card.orange .student-profile-stat-icon {
    background: #fff2e6;
    color: #ff981d;
}


.student-profile-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 280px;
    gap: 16px;
}

.student-profile-info-card,
.student-profile-id-card-panel,
.student-profile-documents-card {
    padding: 16px;
}

.student-profile-card-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.student-profile-card-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #24305d;
    font-size: 18px;
}

.student-profile-card-head h2 i {
    color: #6f56f7;
    font-size: 15px;
}

.student-profile-card-head a {
    font-size: 12px;
    font-weight: 800;
}

.student-profile-info-grid {
    display: grid;
    gap: 14px;
}

.student-profile-info-grid div {
    display: grid;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3fb;
}

.student-profile-info-grid strong {
    font-size: 12px;
    font-weight: 800;
}

.student-profile-info-grid span {
    font-size: 12px;
    line-height: 1.55;
    font-weight: 700;
}

.student-profile-id-card {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e7e3fb;
    box-shadow: 0 18px 36px rgba(62, 49, 145, 0.1);
}

.student-profile-id-top {
    justify-content: flex-start;
    padding: 16px 16px 48px;
    background: linear-gradient(180deg, #5132d8 0%, #4327bf 100%);
    color: #fff;
}

.student-profile-id-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-profile-id-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 16px;
}

.student-profile-id-top strong {
    display: block;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.student-profile-id-top span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
}

.student-profile-id-curve {
    height: 46px;
    margin-top: -24px;
    background: #fff;
    border-top-left-radius: 52% 100%;
    border-top-right-radius: 52% 100%;
}

.student-profile-id-photo-shell {
    display: flex;
    justify-content: center;
    margin-top: -84px;
    position: relative;
    z-index: 2;
}

.student-profile-id-photo {
    width: 90px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    background: #edf1ff;
    border: 4px solid #fff;
    box-shadow: 0 18px 34px rgba(79, 59, 182, 0.14);
}

.student-profile-id-center {
    padding: 10px 16px 8px;
    text-align: center;
}

.student-profile-id-center h3 {
    margin: 0;
    color: #27315d;
    font-size: 15px;
    font-weight: 900;
}

.student-profile-id-center p {
    margin: 6px 0 0;
    color: #5d4cf3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.student-profile-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    margin-top: 9px;
    padding: 0 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6e57f5 0%, #5c42ee 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.student-profile-id-details {
    display: grid;
    gap: 7px;
    padding: 8px 26px 16px;
}

.student-profile-id-details div {
    display: grid;
    grid-template-columns: 78px 8px 1fr;
    gap: 8px;
    align-items: center;
}

.student-profile-id-details div::before {
    content: ":";
    grid-column: 2;
    color: #6e7696;
    font-size: 11px;
    font-weight: 900;
}

.student-profile-id-details strong,
.student-profile-id-details span {
    font-size: 10px;
    font-weight: 800;
}

.student-profile-id-details strong {
    color: #5d6788;
}

.student-profile-id-details span {
    color: #24305d;
}

.student-profile-id-sign {
    padding: 12px 16px 14px;
    background: linear-gradient(180deg, #5232d8 0%, #4425bf 100%);
    text-align: center;
}

.student-profile-id-sign-mark {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-profile-id-sign-mark img {
    max-width: 96px;
    max-height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.student-profile-id-sign-mark span {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-style: italic;
}

.student-profile-id-sign small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 9px;
    font-weight: 700;
}

.student-profile-download-btn {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    min-height: 40px;
    border-radius: 12px;
}

.student-profile-documents-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.student-profile-id-print-section {
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #edf1fc;
    box-shadow: 0 18px 44px rgba(78, 71, 126, 0.06);
}

.student-profile-id-print-layout {
    display: grid;
    justify-items: center;
    gap: 16px;
}

.student-profile-id-card-large {
    width: 100%;
    max-width: 360px;
}

.student-profile-print-btn {
    min-height: 40px;
    border: 1px solid #e5e9f7;
    border-radius: 12px;
    padding: 0 16px;
    background: #fff;
    color: #324067;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.student-profile-id-print-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.student-profile-document-item {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #edf1fc;
}

.student-profile-document-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f0ebff 0%, #ece5ff 100%);
    color: #7659fa;
    font-size: 16px;
    flex-shrink: 0;
}

.student-profile-document-item strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
}

.student-profile-document-item small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
}

.student-profile-document-item button {
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 1px solid #e7ddff;
    border-radius: 10px;
    background: #fff;
    color: #725af9;
    display: grid;
    place-items: center;
}

.student-profile-edit-form {
    display: grid;
    gap: 16px;
}

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

.student-profile-edit-grid .form-field {
    display: grid;
    gap: 8px;
}

.student-profile-edit-grid .form-field-full {
    grid-column: 1 / -1;
}

.student-profile-edit-grid label {
    color: #445277;
    font-size: 12px;
    font-weight: 800;
}

.student-profile-edit-grid input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #e5eaf8;
    border-radius: 12px;
    background: #fbfcff;
    padding: 0 14px;
    color: #1f2b57;
    font-size: 13px;
    outline: none;
}

.student-profile-edit-grid input:focus {
    border-color: #7b63ff;
    box-shadow: 0 0 0 3px rgba(123, 99, 255, 0.12);
}

.student-profile-edit-actions {
    display: flex;
    justify-content: flex-end;
}

.student-library-page {
    display: grid;
    gap: 18px;
}

.student-library-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f4efff 0%, #eef5ff 100%);
    border: 1px solid #e6e7fb;
}

.student-library-hero-copy {
    display: flex;
    align-items: center;
    gap: 14px;
}

.student-library-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #6f57f6 0%, #5c42ee 100%);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 16px 28px rgba(95, 67, 244, 0.18);
}

.student-library-hero h2 {
    margin: 0 0 6px;
    color: #202b58;
    font-size: 24px;
}

.student-library-hero p,
.student-library-table-note {
    margin: 0;
    color: #7683a7;
    font-size: 12px;
    font-weight: 700;
}

.student-library-stat-grid,
.student-library-grid {
    display: grid;
    gap: 16px;
}

.student-library-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.student-library-card {
    border-radius: 24px;
}

.student-library-count {
    color: #7b84a7;
    font-size: 12px;
    font-weight: 800;
}

.student-library-history-list {
    display: grid;
    gap: 14px;
}

.student-library-history-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #edf1fb;
    background: #fbfcff;
}

.student-library-history-item.current {
    background: linear-gradient(180deg, #f7f4ff 0%, #fbfcff 100%);
    border-color: #e7defd;
}

.student-library-history-item.returned {
    background: linear-gradient(180deg, #f3fbf6 0%, #fbfcff 100%);
    border-color: #dff2e5;
}

.student-library-history-main,
.student-library-history-meta {
    display: flex;
    gap: 12px;
}

.student-library-history-main {
    align-items: center;
}

.student-library-history-main h3 {
    margin: 0 0 5px;
    color: #202b58;
    font-size: 16px;
}

.student-library-history-main p {
    margin: 0;
    color: #7884a8;
    font-size: 12px;
    font-weight: 700;
}

.student-library-book-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #6a4cf5;
    font-size: 18px;
    box-shadow: 0 10px 22px rgba(104, 87, 226, 0.08);
    flex-shrink: 0;
}

.student-library-history-meta {
    flex-wrap: wrap;
    align-items: center;
}

.student-library-history-meta small {
    color: #596887;
    font-size: 11px;
    font-weight: 800;
}

.student-library-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.student-library-pill.issued {
    background: #efeaff;
    color: #6d50f7;
}

.student-library-pill.returned {
    background: #e9f8ee;
    color: #22a85d;
}

.student-id-page {
    display: grid;
    gap: 18px;
}

.student-id-page-head,
.student-id-actions,
.student-id-breadcrumb {
    display: flex;
    align-items: center;
}

.student-id-page-head {
    justify-content: space-between;
    gap: 14px;
}

.student-id-page-head h1 {
    margin: 0 0 10px;
    color: #1c2854;
    font-size: 34px;
    line-height: 1.1;
}

.student-id-breadcrumb {
    gap: 10px;
    color: #8a94af;
    font-size: 12px;
    font-weight: 700;
}

.student-id-breadcrumb a {
    color: #7884a5;
}

.student-id-back-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #e9ecf8;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6d57f5;
    font-size: 12px;
    font-weight: 800;
}

.student-id-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8f5ff 0%, #f5f1ff 100%);
    border: 1px solid #efe9ff;
}

.student-id-note i {
    color: #735bf8;
    font-size: 16px;
}

.student-id-note p {
    margin: 0;
    color: #586785;
    font-size: 12px;
    font-weight: 700;
}

.student-id-card-shell {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding-top: 4px;
}

.student-id-card-page-card {
    max-width: 278px;
}

.student-id-actions {
    gap: 12px;
    justify-content: center;
}

.student-id-action-btn {
    min-width: 96px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.student-id-action-btn.secondary {
    border: 1px solid #d9cdfc;
    background: #fff;
    color: #735bf8;
}

.student-id-action-btn.primary {
    border: 0;
    background: linear-gradient(180deg, #755df8 0%, #5e43f4 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(94, 67, 244, 0.18);
}

@media (max-width: 1399px) {
    .student-profile-stats-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-library-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-profile-id-card-panel,
    .student-profile-documents-card {
        grid-column: 1 / -1;
    }

    .student-profile-documents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .student-library-stat-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-hero-main {
        flex-direction: column;
        align-items: stretch;
    }

    .student-profile-hero-right-v2 {
        min-width: 0;
    }
}

@media (max-width: 991px) {
    .student-profile-name-row,
    .student-profile-hero-actions,
    .student-profile-hero-left-v2 {
        flex-wrap: wrap;
    }

    .student-library-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-profile-content-grid,
    .student-profile-hero-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-hero-grid div {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .student-library-hero-copy,
    .student-library-history-main,
    .student-library-history-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-id-page-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-id-page-head h1 {
        font-size: 28px;
    }

    .student-id-actions {
        width: 100%;
        flex-direction: column;
    }

    .student-id-action-btn {
        width: 100%;
    }

    .student-profile-dashboard-head h1 {
        font-size: 28px;
    }

    .student-profile-stats-v2,
    .student-profile-documents-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-id-print-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .student-profile-print-btn,
    .student-profile-download-btn {
        justify-content: center;
    }

    .student-profile-hero-v2,
    .student-profile-info-card,
    .student-profile-id-card-panel,
    .student-profile-documents-card,
    .student-profile-id-print-section {
        padding: 14px;
        border-radius: 20px;
    }

    .student-profile-photo-v2 {
        width: 84px;
        height: 84px;
    }

    .student-profile-name-row h2 {
        font-size: 24px;
    }

    .student-profile-id-details {
        padding: 8px 16px 16px;
    }

    .student-profile-id-details div {
        grid-template-columns: 78px 10px 1fr;
    }

.student-profile-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.admin-search-form,
.session-search,
.subject-search-box,
.students-ref-search,
.students-ref-search-box {
    position: relative;
}

.admin-search-form::before,
.session-search::before,
.subject-search-box::before,
.students-ref-search-box::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8391b0;
    font-size: 17px;
    pointer-events: none;
    z-index: 1;
}

.admin-search-form,
.session-search,
.subject-search-box {
    display: flex;
    align-items: center;
    min-height: 50px;
    border: 1px solid #dfe4f3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(72, 85, 122, 0.08);
    overflow: hidden;
}

.students-ref-search {
    align-items: center;
}

.admin-search-form > i,
.students-ref-search > i,
.students-ref-search-box > i {
    display: none;
}

.admin-search-form input,
.session-search input,
.subject-search-box input,
.students-ref-search input,
.students-ref-search-box input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 0;
    background: transparent;
    padding: 0 86px 0 52px;
    color: #324768;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    box-shadow: none;
}

.admin-search-form input::placeholder,
.session-search input::placeholder,
.subject-search-box input::placeholder,
.students-ref-search input::placeholder,
.students-ref-search-box input::placeholder {
    color: #8794b2;
    font-weight: 700;
}

.admin-search-form button,
.session-search button,
.subject-search-box button,
.students-ref-search button,
.students-ref-search-box button {
    width: 56px;
    min-width: 56px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #6f53ff 0%, #5b43f6 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 28px rgba(103, 82, 246, 0.28);
    cursor: pointer;
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.admin-search-form button:hover,
.session-search button:hover,
.subject-search-box button:hover,
.students-ref-search button:hover,
.students-ref-search-box button:hover {
    filter: brightness(1.04);
}

.admin-search-form button i,
.session-search button i,
.subject-search-box button i,
.students-ref-search button i,
.students-ref-search-box button i {
    position: static;
    transform: none;
    color: currentColor;
    font-size: 18px;
}

.admin-search-form button {
    margin-right: 6px;
}

.session-search button,
.subject-search-box button {
    position: absolute;
    right: 6px;
    margin: 0;
}

.session-search button i,
.subject-search-box button i {
    transition: none;
}

.session-search input,
.subject-search-box input {
    padding-right: 72px;
}

.subject-top-filters .session-search,
.subject-top-filters .subject-search-box {
    width: 100%;
    min-height: 50px;
    border-radius: 18px;
}

.subject-top-filters .session-search input,
.subject-top-filters .subject-search-box input {
    height: 48px;
    padding-left: 52px;
}

.students-ref-search {
    display: grid;
    grid-template-columns: minmax(146px, 170px) minmax(0, 1fr);
    gap: 12px;
}

.students-ref-session-filter {
    width: 100%;
    height: 50px;
    border: 1px solid #dfe4f3;
    border-radius: 18px;
    background: #ffffff;
    padding: 0 16px;
    color: #324768;
    font-size: 12px;
    font-weight: 700;
    outline: none;
    box-shadow: 0 18px 38px rgba(72, 85, 122, 0.08);
}

.students-ref-search-box {
    display: flex;
    align-items: center;
    min-height: 50px;
    border: 1px solid #dfe4f3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(72, 85, 122, 0.08);
    overflow: hidden;
}

.students-ref-search-box input {
    height: 50px;
    padding-right: 74px;
}

.students-ref-search-box button {
    width: 56px;
    height: 50px;
    min-width: 56px;
    border-radius: 18px;
}

@media (max-width: 767px) {
    .students-ref-search {
        grid-template-columns: 1fr;
    }
}

:root {
    --admin-field-height: 44px;
    --admin-field-radius: 16px;
    --admin-field-border: #dfe4f3;
    --admin-field-text: #29466d;
    --admin-field-placeholder: #8a98b5;
    --admin-field-shadow: none;
    --admin-field-focus: 0 0 0 4px rgba(95, 86, 248, 0.1);
}

.admin-content .form-field label,
.admin-content .subject-filter-box label,
.admin-content .subject-form-field label,
.admin-content .users-form-field-visual label,
.students-page .student-filter-grid .form-field label,
.students-page .student-filter-grid .session-search label,
.student-registration-grid .form-field label {
    color: #35527e;
    font-size: 13px;
    font-weight: 800;
}

.admin-content .form-field input,
.admin-content .form-field select,
.admin-content .form-field textarea,
.admin-content .subject-filter-box input,
.admin-content .subject-filter-box select,
.admin-content .subject-form-field input,
.admin-content .subject-form-field select,
.admin-content .subject-form-field textarea,
.admin-content .users-form-field-visual input,
.admin-content .users-form-field-visual select,
.student-registration-grid .form-field input,
.student-registration-grid .form-field select,
.student-registration-grid .form-field textarea,
.students-page .student-input-wrap input,
.students-page .student-select-wrap select {
    width: 100%;
    min-height: var(--admin-field-height);
    border: 1px solid var(--admin-field-border);
    border-radius: var(--admin-field-radius);
    background: #fff;
    color: var(--admin-field-text);
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--admin-field-shadow);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-content .form-field input,
.admin-content .form-field select,
.admin-content .subject-filter-box input,
.admin-content .subject-filter-box select,
.admin-content .subject-form-field input,
.admin-content .subject-form-field select,
.admin-content .users-form-field-visual input,
.admin-content .users-form-field-visual select,
.student-registration-grid .form-field input,
.student-registration-grid .form-field select,
.students-page .student-input-wrap input,
.students-page .student-select-wrap select {
    padding: 0 16px;
}

.admin-content .form-field textarea,
.admin-content .subject-form-field textarea,
.student-registration-grid .form-field textarea {
    min-height: 120px;
    padding: 14px 16px;
    resize: vertical;
}

.admin-content .form-field input::placeholder,
.admin-content .subject-filter-box input::placeholder,
.admin-content .subject-form-field input::placeholder,
.admin-content .subject-form-field textarea::placeholder,
.admin-content .users-form-field-visual input::placeholder,
.student-registration-grid .form-field input::placeholder,
.student-registration-grid .form-field textarea::placeholder,
.students-page .student-input-wrap input::placeholder {
    color: var(--admin-field-placeholder);
    font-weight: 700;
}

.admin-content .form-field input:focus,
.admin-content .form-field select:focus,
.admin-content .form-field textarea:focus,
.admin-content .subject-filter-box input:focus,
.admin-content .subject-filter-box select:focus,
.admin-content .subject-form-field input:focus,
.admin-content .subject-form-field select:focus,
.admin-content .subject-form-field textarea:focus,
.admin-content .users-form-field-visual input:focus,
.admin-content .users-form-field-visual select:focus,
.student-registration-grid .form-field input:focus,
.student-registration-grid .form-field select:focus,
.student-registration-grid .form-field textarea:focus,
.students-page .student-input-wrap input:focus,
.students-page .student-select-wrap select:focus {
    border-color: #6b5af8;
    box-shadow: var(--admin-field-shadow), var(--admin-field-focus);
}

.admin-content .input-icon-field select,
.admin-content .subject-filter-box .admitted-students-input-shell select,
.admin-content .subject-filter-box .admission-requests-input-shell select,
.students-page .student-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
}

.admin-content .input-icon-field,
.admin-content .subject-filter-box .admitted-students-input-shell,
.admin-content .subject-filter-box .admission-requests-input-shell,
.students-page .student-input-wrap,
.students-page .student-select-wrap,
.admin-content .users-field-with-icon {
    position: relative;
}

.admin-content .input-icon-field,
.admin-content .subject-filter-box .admitted-students-input-shell,
.admin-content .subject-filter-box .admission-requests-input-shell,
.students-page .student-input-wrap,
.students-page .student-select-wrap,
.admin-content .users-field-with-icon {
    border: 1px solid var(--admin-field-border);
    border-radius: var(--admin-field-radius);
    background: #fff;
    box-shadow: var(--admin-field-shadow);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-content .input-icon-field:focus-within,
.admin-content .subject-filter-box .admitted-students-input-shell:focus-within,
.admin-content .subject-filter-box .admission-requests-input-shell:focus-within,
.students-page .student-input-wrap:focus-within,
.students-page .student-select-wrap:focus-within,
.admin-content .users-field-with-icon:focus-within {
    border-color: #6b5af8;
    box-shadow: var(--admin-field-shadow), var(--admin-field-focus);
}

.admin-content .input-icon-field i,
.admin-content .subject-filter-box .admitted-students-input-icon,
.admin-content .subject-filter-box .admission-requests-input-icon,
.students-page .student-input-wrap i,
.students-page .student-select-wrap i,
.admin-content .users-field-with-icon i {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #eef2ff;
    color: #5f64ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    pointer-events: none;
    box-shadow: none;
    z-index: 1;
}

.admin-content .input-icon-field::before {
    content: "\f15c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: #eef2ff;
    color: #5f64ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.admin-content .input-icon-field:has(select[name*="session"])::before,
.admin-content .input-icon-field:has(select[id*="session"])::before,
.admin-content .input-icon-field:has(input[name*="session"])::before {
    content: "\f133";
    background: #eef2ff;
    color: #4d78ff;
}

.admin-content .input-icon-field:has(select[name*="course"])::before,
.admin-content .input-icon-field:has(select[id*="course"])::before {
    content: "\f19d";
    background: #f1eaff;
    color: #7d4dff;
}

.admin-content .input-icon-field:has(select[name*="semester"])::before,
.admin-content .input-icon-field:has(select[id*="semester"])::before,
.admin-content .input-icon-field:has(select[name*="class"])::before,
.admin-content .input-icon-field:has(select[id*="class"])::before {
    content: "\f518";
    background: #e9fbef;
    color: #20b15a;
}

.admin-content .input-icon-field:has(select[name*="payment"])::before,
.admin-content .input-icon-field:has(select[id*="payment"])::before,
.admin-content .input-icon-field:has(input[name*="payment"])::before {
    content: "\f555";
    background: #fff3dd;
    color: #f0a321;
}

.admin-content .input-icon-field:has(input[type="date"])::before,
.admin-content .input-icon-field:has(input[type="datetime-local"])::before,
.admin-content .input-icon-field:has(input[name*="date"])::before {
    content: "\f133";
    background: #eef2ff;
    color: #4d78ff;
}

.admin-content .input-icon-field input,
.admin-content .input-icon-field select,
.admin-content .subject-filter-box .admitted-students-input-shell input,
.admin-content .subject-filter-box .admitted-students-input-shell select,
.admin-content .subject-filter-box .admission-requests-input-shell input,
.admin-content .subject-filter-box .admission-requests-input-shell select,
.students-page .student-input-wrap input,
.students-page .student-select-wrap select,
.admin-content .users-field-with-icon input {
    min-height: var(--admin-field-height);
    border: 0;
    border-radius: calc(var(--admin-field-radius) - 1px);
    background: transparent;
    box-shadow: none;
}

.admin-content .input-icon-field input,
.admin-content .input-icon-field select {
    padding-left: 50px;
    padding-right: 42px;
}

.admin-content .input-icon-field.select-field i {
    left: auto;
    right: 14px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #65769b;
    font-size: 13px;
}

.admin-content .subject-filter-box .admitted-students-input-shell select,
.admin-content .subject-filter-box .admitted-students-input-shell input,
.admin-content .subject-filter-box .admission-requests-input-shell select,
.admin-content .subject-filter-box .admission-requests-input-shell input {
    padding-right: 16px;
}

.admin-action-disabled,
.admin-action-disabled:disabled,
a.admin-action-disabled,
button.admin-action-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.15);
}

.students-page .student-select-wrap::after {
    right: 16px;
    color: #65769b;
}

.admin-content input[type="date"],
.admin-content input[type="datetime-local"],
.student-registration-grid input[type="date"],
.student-registration-grid input[type="datetime-local"] {
    padding-right: 16px;
}

.admin-content .subject-filter-box .admitted-students-input-shell.tone-violet .admitted-students-input-icon,
.admin-content .subject-filter-box .admission-requests-input-shell.tone-purple .admission-requests-input-icon {
    background: #efe9ff;
    color: #6e40f6;
}

.admin-content .subject-filter-box .admitted-students-input-shell.tone-green .admitted-students-input-icon,
.admin-content .subject-filter-box .admission-requests-input-shell.tone-green .admission-requests-input-icon {
    background: #e8faef;
    color: #2fb463;
}

.admin-content .subject-filter-box .admitted-students-input-shell.tone-blue .admitted-students-input-icon,
.admin-content .subject-filter-box .admission-requests-input-shell.tone-blue .admission-requests-input-icon,
.students-page .student-input-wrap i,
.admin-content .users-field-with-icon i {
    background: #e8f0ff;
    color: #3b76ff;
}

.admin-content .subject-filter-box .admission-requests-input-shell.tone-amber .admission-requests-input-icon {
    background: #fff3dd;
    color: #eea320;
}

.admin-content .subject-filter-box .admission-requests-input-shell.tone-pink .admission-requests-input-icon {
    background: #ffe8f2;
    color: #eb5d90;
}

.admin-topbar,
.admin-sidebar,
.admin-sidebar-logo,
.admin-sidebar-brand,
.admin-content [class*="card"],
.admin-content [class*="panel"],
.admin-content [class*="table-wrap"],
.admin-content .subject-toolbar-card,
.admin-content .subject-form-card,
.admin-content .subject-search-box,
.admin-content .session-search,
.admin-content .students-ref-search-box,
.admin-content .students-ref-session-filter,
.admin-content .input-icon-field,
.admin-content .admitted-students-input-shell,
.admin-content .admission-requests-input-shell,
.admin-content .student-input-wrap,
.admin-content .student-select-wrap,
.admin-content .users-field-with-icon,
.admin-content .form-field input,
.admin-content .form-field select,
.admin-content .form-field textarea,
.admin-content .subject-form-field input,
.admin-content .subject-form-field select,
.admin-content .subject-form-field textarea,
.admin-content .subject-filter-box input,
.admin-content .subject-filter-box select,
.admin-content .users-form-field-visual input,
.admin-content .users-form-field-visual select,
.student-registration-grid .form-field input,
.student-registration-grid .form-field select,
.student-registration-grid .form-field textarea {
    box-shadow: none !important;
}

.admin-content button,
.admin-content .admin-primary-btn,
.admin-content .session-tool-btn,
.admin-content .action-btn,
.admin-content .subject-action-btn,
.admin-content .student-table-action,
.admin-content .student-toolbar-btn,
.admin-content .student-toolbar-icon,
.admin-content .student-page-chip,
.admin-content .issue-btn,
.admin-content .issue-btn-outline,
.admin-content .issue-export-btn,
.admin-content .issue-action-icon,
.admin-content .admitted-students-action-btn,
.admin-content .admission-requests-reset-btn,
.admin-content .admission-requests-apply-btn,
.admin-content .question-export-btn,
.admin-content .students-ref-action,
.admin-content .students-ref-add-btn,
.admin-content .students-bulk-clear-btn,
.admin-content a[class*="btn"],
.admin-content a[class*="action"] {
    box-shadow: none !important;
}

.website-header-v2 .topbar {
    min-height: 36px;
    padding: 0 16px;
    background: linear-gradient(90deg, #102d63 0%, #173a79 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    font-weight: 700;
}

.website-header-v2 .topbar-group,
.website-header-v2 .topbar-contact,
.website-header-v2 .topbar-social {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.website-header-v2 .topbar a,
.website-header-v2 .topbar span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.website-header-v2 .topbar-social a {
    font-size: 14px;
    opacity: 0.95;
}

.website-header-v2 .header-band {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) 150px 190px;
    gap: 10px;
    align-items: center;
    padding: 8px 16px 9px;
    background: #fff;
}

.website-header-v2 .brand-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.website-header-v2 .brand-mark {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    border: 3px solid #edf2fa;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-header-v2 .brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.website-header-v2 .brand-mark i {
    color: #122f67;
    font-size: 46px;
}

.website-header-v2 .brand-copy .hindi {
    margin: 0 0 4px;
    color: #173b79;
    font-family: "Noto Sans Devanagari", sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.18;
}

.website-header-v2 .brand-copy .english {
    margin: 0 0 6px;
    color: #e0271d;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
}

.website-header-v2 .brand-copy .sub {
    margin: 0 0 5px;
    color: #278943;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.website-header-v2 .brand-copy .meta {
    color: #23406d;
    font-size: 12px;
    font-weight: 700;
}

.website-header-v2 .naac-badge {
    justify-self: center;
    width: 150px;
    padding: 6px;
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-header-v2 .naac-badge img {
    display: block;
    width: 100%;
    height: auto;
}

.website-header-v2 .login-stack {
    display: grid;
    gap: 8px;
}

.website-header-v2 .website-menu-toggle {
    display: none;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #dbe4f1;
    border-radius: 12px;
    background: #fff;
    color: #16346d;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(12, 32, 72, 0.08);
}

.website-header-v2 .login-btn {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 39, 84, 0.1);
}

.website-header-v2 .login-btn.blue { background: linear-gradient(180deg, #1c3d7f 0%, #122f67 100%); }
.website-header-v2 .login-btn.green { background: linear-gradient(180deg, #199955 0%, #127540 100%); }
.website-header-v2 .login-btn.orange { background: linear-gradient(180deg, #ff8a1f 0%, #ff6b00 100%); }

.website-header-v2 .main-nav {
    display: flex;
    align-items: center;
    min-height: 34px;
    background: linear-gradient(90deg, #16346d 0%, #102b5c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(11, 32, 72, 0.14);
    -ms-overflow-style: none;
}

.website-header-v2 .main-nav::-webkit-scrollbar {
    display: none;
}

.website-header-v2 .main-nav > a,
.website-header-v2 .main-nav .nav-dropdown > a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.website-header-v2 .main-nav > a.active,
.website-header-v2 .main-nav .nav-dropdown > a.active {
    background: linear-gradient(180deg, #ff8c24 0%, #ff6e11 100%);
}

.website-header-v2 .main-nav .nav-dropdown {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.website-header-v2 .main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    display: grid;
    gap: 4px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(16, 43, 92, 0.12);
    box-shadow: 0 18px 40px rgba(12, 32, 72, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 20;
}

.website-header-v2 .main-nav .dropdown-menu a {
    min-height: 0;
    padding: 10px 12px;
    border-right: 0;
    border-radius: 8px;
    color: #16346d;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.website-header-v2 .main-nav .dropdown-menu a.active,
.website-header-v2 .main-nav .dropdown-menu a:hover {
    background: rgba(22, 52, 109, 0.08);
    color: #102b5c;
}

.website-header-v2 .main-nav .nav-dropdown:hover .dropdown-menu,
.website-header-v2 .main-nav .nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .website-header-v2 .header-band {
        grid-template-columns: 1fr;
    }
    .website-header-v2 .login-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .website-header-v2 .topbar,
    .website-header-v2 .topbar-group,
    .website-header-v2 .topbar-contact {
        flex-direction: column;
        align-items: flex-start;
    }
    .website-header-v2 .brand-block {
        flex-direction: column;
        align-items: flex-start;
    }
    .website-header-v2 .main-nav > a,
    .website-header-v2 .main-nav .nav-dropdown > a {
        font-size: 12px;
    }
    .website-header-v2 .login-stack {
        grid-template-columns: 1fr;
    }
}

.student-library-pill.overdue {
    background: #fff0f1;
    color: #df586b;
}

.student-module-page {
    display: grid;
    gap: 18px;
    padding-top: 8px;
}

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

.student-module-card,
.student-module-panel {
    border-radius: 22px;
    border: 1px solid #e7ebf7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 18px 40px rgba(71, 83, 133, 0.08);
}

.student-module-card {
    padding: 18px 20px;
}

.student-module-card small {
    display: block;
    margin-bottom: 8px;
    color: #6d789b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-module-card strong {
    color: #1b2754;
    font-size: 24px;
    font-weight: 900;
}

.student-module-panel {
    padding: 20px 22px;
}

.student-module-panel p {
    margin: 0;
    color: #45527d;
    font-size: 14px;
    line-height: 1.7;
}

.student-module-grid,
.student-module-stack {
    display: grid;
    gap: 16px;
}

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

.student-module-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.student-module-panel-head h2 {
    margin: 0;
    color: #1f2958;
    font-size: 22px;
    font-weight: 900;
}

.student-module-badge,
.student-module-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #5d4ee6;
    font-size: 12px;
    font-weight: 800;
}

.student-module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.student-module-inline-meta {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #6f7a9b;
    font-size: 13px;
    font-weight: 800;
}

.student-module-inline-meta a {
    color: #5b4ff0;
}

.student-notice-panel {
    border-left: 4px solid #6a56f6;
}

.student-empty-state-card {
    border-radius: 20px;
}

.student-empty-state {
    color: #607098;
    font-size: 14px;
    font-weight: 700;
}

.student-table-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-topbar-icon-btn {
    text-decoration: none;
}

.student-hall-ticket-card {
    border-radius: 22px;
    border: 1px solid #dde5fb;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    padding: 22px;
}

.student-hall-ticket-sheet {
    width: 100%;
    max-width: 210mm;
    margin: 0 auto;
}

.student-hall-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.student-hall-ticket-head small {
    display: block;
    margin-bottom: 8px;
    color: #7280a7;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.student-hall-ticket-head h2,
.student-hall-ticket-copy strong {
    margin: 0;
    color: #1c2856;
}

.student-hall-ticket-head p {
    margin: 6px 0 0;
}

.student-hall-ticket-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
}

.student-hall-ticket-student {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #f9fbff;
    border: 1px solid #e5eaf8;
}

.student-hall-ticket-photo {
    width: 96px;
    height: 112px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #f0ebff 0%, #e7e1ff 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.student-hall-ticket-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-hall-ticket-photo span {
    color: #6550ea;
    font-size: 36px;
    font-weight: 900;
}

.student-hall-ticket-copy {
    display: grid;
    gap: 8px;
    align-content: start;
}

.student-hall-ticket-copy span {
    color: #516182;
    font-size: 13px;
    font-weight: 700;
}

.student-hall-ticket-requirements {
    display: grid;
    gap: 12px;
}

.student-hall-ticket-requirements-wrap {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #d7def4;
}

.student-hall-ticket-requirement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5eaf8;
    border-radius: 16px;
    background: #fbfcff;
}

.student-hall-ticket-requirement i {
    color: #22a85d;
    margin-top: 3px;
}

@media (max-width: 991px) {
    .student-hall-ticket-grid {
        grid-template-columns: 1fr;
    }

    .student-hall-ticket-head {
        flex-direction: column;
    }
}

@media (max-width: 991px) {
    .student-module-hero,
    .student-module-grid {
        grid-template-columns: 1fr;
    }

    .student-module-panel-head,
    .student-module-inline-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    .admin-sidebar,
    .admin-topbar,
    .student-profile-photo-btn,
    .student-profile-edit-form,
    .student-profile-edit-actions,
    .student-profile-hero-actions,
    .student-id-actions,
    .student-id-back-btn,
    .student-topbar-right,
    .student-topbar-left,
    .admin-sidebar-backdrop {
        display: none !important;
    }

    .admin-shell,
    .admin-main,
    .admin-content,
    .student-module-panel,
    .student-profile-documents-card,
    .student-profile-info-card,
    .student-profile-hero-v2,
    .student-id-card-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.admin-dashboard-body {
        background: #fff !important;
    }

    .student-profile-dashboard-head,
    .student-id-note,
    .student-module-hero,
    .student-module-grid,
    .student-hall-ticket-requirements {
        page-break-inside: avoid;
    }

    .student-hall-ticket-card {
        border: 1px solid #dbe3f6 !important;
        border-radius: 12px !important;
        padding: 16mm !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    .student-hall-ticket-sheet {
        max-width: 186mm !important;
        margin: 0 auto !important;
    }

    .student-hall-ticket-grid {
        grid-template-columns: 64mm minmax(0, 1fr) !important;
        gap: 10mm !important;
    }

    .student-hall-ticket-student,
    .student-hall-ticket-requirement {
        break-inside: avoid;
    }

    .student-hall-ticket-photo {
        width: 34mm !important;
        height: 42mm !important;
        border-radius: 8px !important;
    }

    .student-hall-ticket-copy strong {
        font-size: 16pt !important;
    }

    .student-hall-ticket-copy span,
    .student-hall-ticket-head small,
    .student-profile-info-grid span,
    .student-profile-info-grid strong {
        font-size: 10pt !important;
        line-height: 1.4 !important;
    }

    .student-hall-ticket-head h2 {
        font-size: 22pt !important;
    }

    .student-hall-ticket-head p {
        font-size: 12pt !important;
    }

    .student-hall-ticket-requirements-wrap {
        margin-top: 8mm !important;
        padding-top: 6mm !important;
    }
}

.student-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid #f0eefb;
    box-shadow: 0 14px 34px rgba(61, 49, 133, 0.06);
    gap: 16px;
}

.student-navbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.student-navbar-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: #6160a8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.student-navbar-toggle:hover {
    background: #f3f0ff;
}

.student-navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1a1f36;
    letter-spacing: 0.02em;
}

.student-navbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.student-navbar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #232b5c;
    font-size: 17px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.student-navbar-icon:hover {
    background: #f3f0ff;
}

.student-navbar-icon span {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff264f;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(255, 38, 79, 0.28);
}

.student-navbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #e8e4ff;
    background: linear-gradient(180deg, #f0edff 0%, #ede9ff 100%);
    color: #5d4ce8;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.2s;
}

.student-navbar-avatar:hover {
    border-color: #6b4cf0;
}

.student-navbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.student-navbar-notif {
    position: relative;
}

.student-navbar-notif-menu {
    right: -10px;
}

.student-navbar-profile {
    position: relative;
}

.student-navbar-profile-menu {
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    border: 1px solid #edf0fb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 44px rgba(59, 57, 109, 0.12);
    padding: 8px;
}

.student-navbar-profile-menu a {
    color: #263460;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
}

.student-navbar-profile-menu a:hover {
    background: #f8f6ff;
}

.student-navbar-profile-menu .dropdown-divider {
    margin: 4px 8px;
}

.student-navbar-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 6px;
}

.student-navbar-profile-head strong {
    display: block;
    color: #17204f;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

.student-navbar-profile-head small {
    display: block;
    color: #7d88ae;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.student-navbar-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f0edff 0%, #ede9ff 100%);
    color: #5d4ce8;
    font-size: 16px;
    font-weight: 800;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-navbar-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    .student-navbar {
        padding: 0 14px;
        min-height: 56px;
    }

    .student-navbar-brand {
        font-size: 14px;
    }

    .student-navbar-toggle {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .student-navbar-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .student-navbar-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .student-navbar-notif-menu {
        min-width: 280px;
        right: -8px;
    }
}

@media (max-width: 420px) {
    .student-navbar {
        padding: 0 10px;
        gap: 10px;
    }

    .student-navbar-right {
        gap: 4px;
    }
}

.prof-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.prof-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
}

.prof-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: #fff;
}

.prof-stat-card.purple .prof-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.prof-stat-card.blue .prof-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.prof-stat-card.green .prof-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.prof-stat-card.orange .prof-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }

.prof-stat-card h4 {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    color: #8896b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prof-stat-card strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #1d2856;
    line-height: 1.2;
}

.prof-stat-card small {
    font-size: 11px;
    font-weight: 600;
    color: #8896b8;
}

.prof-header {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
}

.prof-header-bg {
    position: absolute;
    inset: 0;
    height: 196px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 40%, #6366f1 100%);
    border-radius: 20px 20px 0 0;
}

.prof-header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 24px;
    flex-wrap: wrap;
    z-index: 1;
}

.prof-bread {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

.prof-bread a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}

.prof-bread a:hover {
    color: #fff;
    text-decoration: underline;
}

.prof-bread i {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
}

.prof-actions {
    display: flex;
    gap: 8px;
}

.prof-btn {
    min-height: 36px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #775ef8 0%, #5d42f3 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(93, 66, 243, 0.18);
    transition: transform 0.2s, box-shadow 0.2s;
}

.prof-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(93, 66, 243, 0.25);
}

.prof-btn-outline {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.prof-btn-outline:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    box-shadow: none;
    transform: none;
}

.prof-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px 24px;
    z-index: 1;
}

.prof-user-avatar {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.prof-user-avatar img,
.prof-user-avatar span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.prof-user-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ede7ff 0%, #dcd2ff 100%);
    color: #664ef2;
    font-size: 32px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(101, 83, 229, 0.15);
}

.prof-user-avatar em {
    position: absolute;
    right: 2px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1fd16f;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(12, 143, 69, 0.3);
}

.prof-user-info h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.prof-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prof-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.prof-tag-course {
    background: rgba(96, 165, 250, 0.35);
    color: #fff;
}

.prof-tag-year {
    background: rgba(52, 211, 153, 0.35);
    color: #fff;
}

.prof-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.prof-section {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
    border-left: 4px solid transparent;
    margin-top: 14px;
}

.prof-section-personal { border-left-color: #7c3aed; }
.prof-section-academic { border-left-color: #2563eb; }
.prof-section-contact { border-left-color: #059669; }
.prof-section-edit { border-left-color: #ea580c; grid-column: 1 / -1; }

.prof-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f4fd;
}

.prof-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

.prof-section-icon.personal { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.prof-section-icon.academic { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.prof-section-icon.contact { background: linear-gradient(135deg, #34d399, #059669); }
.prof-section-icon.edit { background: linear-gradient(135deg, #fb923c, #ea580c); }

.prof-section-title h2 {
    margin: 0;
    color: #24305d;
    font-size: 17px;
    font-weight: 800;
}

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

.prof-field {
    display: grid;
    gap: 4px;
    padding: 14px 24px;
    border-bottom: 1px solid #f5f7fd;
}

.prof-field:nth-last-child(-n+2) {
    border-bottom: 0;
}

.prof-field-full {
    grid-column: 1 / -1;
}

.prof-field label {
    color: #8896b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prof-value {
    color: #1d2856;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.prof-value-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.prof-value-badge.blood {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    color: #b91c1c;
}

.prof-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1.5px solid #e5eaf8;
    border-radius: 10px;
    background: #fbfcff;
    color: #1f2b57;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.prof-field input:focus {
    border-color: #7b63ff;
    box-shadow: 0 0 0 3px rgba(123, 99, 255, 0.1);
}

.prof-field input::placeholder {
    color: #b5bfd9;
    font-weight: 500;
}

.prof-form-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid #f1f4fd;
}

.prof-form .prof-fields {
    padding: 8px 0 0;
}

.prof-form .prof-field {
    padding: 10px 24px 16px;
}

@media (max-width: 1100px) {
    .prof-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .prof-body {
        grid-template-columns: 1fr;
    }

    .prof-fields {
        grid-template-columns: 1fr;
    }

    .prof-field:nth-last-child(-n+2) {
        border-bottom: 1px solid #f5f7fd;
    }

    .prof-field:last-child {
        border-bottom: 0;
    }

    .prof-user {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .prof-user-tags {
        justify-content: center;
    }

    .prof-header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .prof-user-info h1 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .prof-stats {
        grid-template-columns: 1fr;
    }

    .prof-user {
        padding: 14px 18px 18px;
    }

    .prof-user-avatar {
        width: 72px;
        height: 72px;
    }

    .prof-user-avatar span {
        font-size: 26px;
    }

    .prof-user-info h1 {
        font-size: 20px;
    }

    .prof-section-title {
        padding: 14px 16px;
    }

    .prof-section-title h2 {
        font-size: 15px;
    }

    .prof-field {
        padding: 12px 16px;
    }

    .prof-header-top {
        padding: 12px 16px;
    }

    .prof-form-actions {
        padding: 12px 16px;
    }

    .prof-form .prof-field {
        padding: 8px 16px 14px;
    }
}

@media print {
    .prof-actions,
    .prof-form,
    .prof-form-actions,
    .prof-stats {
        display: none !important;
    }

    .prof-header,
    .prof-section {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .prof-header-bg {
        display: none !important;
    }

    .prof-user-info h1,
    .prof-bread a,
    .prof-bread,
    .prof-bread i {
        color: #1d2856 !important;
    }
}

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

.fees-stat-card {
    border-radius: 18px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.fees-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.fees-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.fees-stat-num {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.fees-stat-sub {
    display: block;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
    margin-top: 4px;
}

.fees-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.fees-badge-green { background: #d1fae5; color: #065f46; }
.fees-badge-red { background: #fee2e2; color: #991b1b; }
.fees-badge-orange { background: #ffedd5; color: #9a3412; }

.fees-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e5eaf7;
    color: #5b6a8f;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s;
}

.fees-action-btn:hover {
    border-color: #775ef8;
    color: #775ef8;
    background: #f8f6ff;
}

.fees-receipt-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.fees-page {
    display: grid;
    gap: 20px;
    padding-top: 4px;
}

.fees-header {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
}

.fees-header-bg {
    position: absolute;
    inset: 0;
    height: 140px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #a855f7 100%);
    border-radius: 20px 20px 0 0;
}

.fees-header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 24px;
    flex-wrap: wrap;
    z-index: 1;
}

.fees-bread {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

.fees-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.fees-bread a:hover { color: #fff; text-decoration: underline; }
.fees-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }

.fees-actions { display: flex; gap: 8px; }

.fees-btn {
    min-height: 36px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.18);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fees-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(109, 40, 217, 0.25);
}

.fees-btn-outline {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.fees-btn-outline:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    box-shadow: none;
    transform: none;
}

.fees-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px 24px;
    z-index: 1;
}

.fees-user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 32px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.3);
}

.fees-user-info h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.fees-user-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.fees-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.fees-tag-session { background: rgba(168, 85, 247, 0.35); }

.fees-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.fees-section {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
    border-left: 4px solid transparent;
}

.fees-section-pending { border-left-color: #f5576c; }
.fees-section-paid { border-left-color: #43e97b; }
.fees-section-gateway { border-left-color: #4facfe; }
.fees-section-structure { border-left-color: #764ba2; }
.fees-section-history { border-left-color: #667eea; }
.fees-section-receipt { border-left-color: #667eea; }

.fees-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f4fd;
}

.fees-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

.fees-section-icon.pending { background: linear-gradient(135deg, #f093fb, #f5576c); }
.fees-section-icon.paid { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.fees-section-icon.gateway { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.fees-section-icon.structure { background: linear-gradient(135deg, #a855f7, #764ba2); }
.fees-section-icon.history { background: linear-gradient(135deg, #667eea, #764ba2); }
.fees-section-icon.receipt { background: linear-gradient(135deg, #667eea, #764ba2); }

.fees-section-title h2 {
    margin: 0;
    color: #24305d;
    font-size: 17px;
    font-weight: 800;
}

.fees-fields {
    display: grid;
    gap: 0;
    padding: 6px 0;
}

.fees-field {
    display: grid;
    gap: 3px;
    padding: 12px 24px;
    border-bottom: 1px solid #f5f7fd;
}

.fees-field:last-child { border-bottom: 0; }

.fees-field label {
    color: #8896b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fees-field-val {
    color: #1d2856;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.fees-empty {
    padding: 24px;
    color: #8896b8;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.fees-struct-list {
    display: grid;
    gap: 14px;
    padding: 16px 20px;
}

.fees-struct-card {
    border: 1px solid #edf1fc;
    border-radius: 16px;
    overflow: hidden;
}

.fees-struct-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f6ff, #f0ebff);
}

.fees-struct-head h3 {
    margin: 0;
    color: #24305d;
    font-size: 14px;
    font-weight: 800;
}

.fees-struct-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 18px;
}

.fees-struct-meta label {
    display: block;
    color: #8896b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.fees-struct-meta span {
    color: #1d2856;
    font-size: 13px;
    font-weight: 700;
}

.fees-struct-table-wrap {
    padding: 0 18px 14px;
    overflow-x: auto;
}

.fees-struct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fees-struct-table th {
    padding: 10px 12px;
    text-align: left;
    color: #5b6788;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid #e6ecf5;
    background: #f8faff;
}

.fees-struct-table th:last-child { text-align: right; }

.fees-struct-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f3fb;
    color: #24305d;
    font-weight: 600;
}

.fees-struct-table tfoot td {
    font-weight: 800;
    color: #1d2856;
    background: #f8faff;
    border-bottom: 0;
}

.fees-amount { text-align: right; font-weight: 800; color: #1d2856; }

.fees-empty-cell {
    padding: 20px;
    text-align: center;
    color: #8896b8;
}

.fees-table-wrap {
    padding: 0 24px 20px;
    overflow-x: auto;
}

.fees-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fees-table th {
    padding: 12px;
    text-align: left;
    color: #5b6788;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid #e6ecf5;
    background: #f8faff;
}

.fees-table th.right { text-align: right; }
.fees-table th.center { text-align: center; }

.fees-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f3fb;
}

.fees-cell-id { color: #1d2856; font-weight: 700; }
.fees-cell-date { color: #5b6a8f; font-weight: 600; }
.fees-cell-type { color: #24305d; font-weight: 600; }
.fees-cell-mode { color: #5b6a8f; }
.fees-cell-amount { text-align: right; color: #1d2856; font-weight: 800; }
.fees-cell-status { text-align: center; }
.fees-cell-actions { text-align: center; }

@media (max-width: 1199px) {
    .fees-stats,
    .fees-receipt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 991px) {
    .fees-body {
        grid-template-columns: 1fr;
    }

    .fees-user {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .fees-user-tags { justify-content: center; }
    .fees-user-info h1 { font-size: 24px; }
    .fees-header-top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
    .fees-stats,
    .fees-receipt-grid {
        grid-template-columns: 1fr;
    }

    .fees-stat-card {
        padding: 16px 18px;
    }

    .fees-stat-num {
        font-size: 19px;
    }

    .fees-section-title {
        padding: 14px 16px;
    }

    .fees-section-title h2 {
        font-size: 15px;
    }

    .fees-field {
        padding: 10px 16px;
    }

    .fees-header-top {
        padding: 12px 16px;
    }

    .fees-user {
        padding: 10px 16px 18px;
    }

    .fees-user-avatar {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .fees-user-info h1 {
        font-size: 20px;
    }

    .fees-struct-meta {
        grid-template-columns: 1fr;
    }

    .fees-table-wrap {
        padding: 0 14px 16px;
    }
}

@media print {
    .fees-stats,
    .fees-stat-card {
        page-break-inside: avoid;
    }
    .fees-actions,
    .fees-btn-outline { display: none !important; }
    .fees-header-bg { display: none !important; }
    .fees-header,
    .fees-section { border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
    .fees-user-info h1,
    .fees-bread a,
    .fees-bread,
    .fees-bread i { color: #1d2856 !important; }
    .fees-user-avatar { background: #ede7ff !important; color: #664ef2 !important; }
    .fees-tag { background: #ede7ff !important; color: #664ef2 !important; }
}

.admf-page {
    display: grid;
    gap: 20px;
    padding-top: 4px;
}

.admf-header {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
}

.admf-header-bg {
    position: absolute;
    inset: 0;
    height: 140px;
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 40%, #2dd4bf 100%);
    border-radius: 20px 20px 0 0;
}

.admf-header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 24px;
    flex-wrap: wrap;
    z-index: 1;
}

.admf-bread {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

.admf-bread a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}

.admf-bread a:hover { color: #fff; text-decoration: underline; }

.admf-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }

.admf-actions { display: flex; gap: 8px; }

.admf-btn {
    min-height: 36px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.18);
    transition: transform 0.2s, box-shadow 0.2s;
}

.admf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(13, 148, 136, 0.25);
}

.admf-btn-outline {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.admf-btn-outline:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    box-shadow: none;
    transform: none;
}

.admf-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px 24px;
    z-index: 1;
}

.admf-user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 32px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.3);
}

.admf-user-info h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admf-user-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.admf-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.admf-tag-year { background: rgba(45, 212, 191, 0.35); }

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

.admf-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
}

.admf-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: #fff;
}

.admf-stat-card.purple .admf-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.admf-stat-card.blue .admf-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.admf-stat-card.green .admf-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.admf-stat-card.orange .admf-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }

.admf-stat-card h4 {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    color: #8896b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admf-stat-card strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #1d2856;
    line-height: 1.2;
}

.admf-stat-card small {
    font-size: 11px;
    font-weight: 600;
    color: #8896b8;
}

.admf-status-green { color: #059669; }
.admf-status-orange { color: #ea580c; }
.admf-status-red { color: #dc2626; }

.admf-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.admf-section {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
    border-left: 4px solid transparent;
}

.admf-section-submit { border-left-color: #7c3aed; }
.admf-section-summary { border-left-color: #0d9488; }
.admf-section-applicant { border-left-color: #2563eb; }
.admf-section-timeline { border-left-color: #d97706; }
.admf-section-print { border-left-color: #dc2626; }
.admf-section-checklist { border-left-color: #ea580c; }
.admf-section-support { border-left-color: #6366f1; }

.admf-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f4fd;
}

.admf-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

.admf-section-icon.submit { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.admf-section-icon.summary { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.admf-section-icon.applicant { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.admf-section-icon.timeline { background: linear-gradient(135deg, #fbbf24, #d97706); }
.admf-section-icon.print { background: linear-gradient(135deg, #f87171, #dc2626); }
.admf-section-icon.checklist { background: linear-gradient(135deg, #fb923c, #ea580c); }
.admf-section-icon.support { background: linear-gradient(135deg, #818cf8, #6366f1); }

.admf-section-title h2 {
    margin: 0;
    color: #24305d;
    font-size: 17px;
    font-weight: 800;
}

.admf-section p {
    margin: 0;
    padding: 18px 24px;
    color: #45527d;
    font-size: 14px;
    line-height: 1.7;
}

.admf-cards {
    display: grid;
    gap: 12px;
    padding: 16px 20px;
}

.admf-card {
    padding: 16px 18px;
    border-radius: 14px;
    background: #fafbff;
    border: 1px solid #eef1fb;
}

.admf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.admf-card-head h3 {
    margin: 0;
    color: #1f2958;
    font-size: 15px;
    font-weight: 800;
}

.admf-card p {
    margin: 0;
    color: #5a6790;
    font-size: 13px;
    line-height: 1.6;
    padding: 0;
}

.admf-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.admf-badge-green { background: #d1fae5; color: #065f46; }
.admf-badge-orange { background: #ffedd5; color: #9a3412; }
.admf-badge-red { background: #fee2e2; color: #991b1b; }
.admf-badge-blue { background: #dbeafe; color: #1e40af; }
.admf-badge-purple { background: #ede9fe; color: #5b21b6; }

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

.admf-info-item {
    display: grid;
    gap: 3px;
    padding: 12px 24px;
    border-bottom: 1px solid #f5f7fd;
}

.admf-info-item:nth-last-child(-n+2) { border-bottom: 0; }

.admf-info-item label {
    color: #8896b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admf-info-item span {
    color: #1d2856;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.admf-actions-row {
    display: flex;
    gap: 10px;
    padding: 14px 24px 18px;
    border-top: 1px solid #f1f4fd;
}

.admf-actions-row .admf-btn { box-shadow: none; }

.admf-timeline {
    padding: 20px 24px;
    display: grid;
    gap: 0;
}

.admf-timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
}

.admf-timeline-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
    position: relative;
    padding-top: 4px;
}

.admf-timeline-dot::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
}

.admf-dot-done::before { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.admf-dot-pending::before { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.admf-dot-warn::before { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }

.admf-timeline-line {
    width: 2px;
    flex: 1;
    background: #e5eaf5;
    margin: 4px 0 0;
    min-height: 24px;
}

.admf-timeline-content {
    flex: 1;
    padding-bottom: 20px;
}

.admf-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.admf-timeline-head h4 {
    margin: 0;
    color: #1f2958;
    font-size: 14px;
    font-weight: 800;
}

.admf-timeline-content p {
    margin: 0;
    color: #5a6790;
    font-size: 13px;
    line-height: 1.6;
    padding: 0;
}

.admf-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 18px 20px;
}

.admf-print-card {
    padding: 22px;
    border-radius: 16px;
    background: #fafbff;
    border: 1px solid #eef1fb;
    text-align: center;
}

.admf-print-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    margin: 0 auto 14px;
}

.admf-print-card h3 {
    margin: 0 0 8px;
    color: #1f2958;
    font-size: 16px;
    font-weight: 800;
}

.admf-print-card p {
    margin: 0 0 16px;
    color: #5a6790;
    font-size: 13px;
    line-height: 1.6;
    padding: 0;
}

.admf-print-card .admf-btn { box-shadow: none; }

@media (max-width: 1100px) {
    .admf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .admf-body { grid-template-columns: 1fr; }
    .admf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admf-info-grid { grid-template-columns: 1fr; }
    .admf-info-item:nth-last-child(-n+2) { border-bottom: 1px solid #f5f7fd; }
    .admf-info-item:last-child { border-bottom: 0; }
    .admf-print-grid { grid-template-columns: 1fr; }
    .admf-user { flex-direction: column; align-items: center; text-align: center; }
    .admf-user-tags { justify-content: center; }
    .admf-user-info h1 { font-size: 24px; }
}

@media (max-width: 767px) {
    .admf-stats { grid-template-columns: 1fr; }
    .admf-section-title { padding: 14px 16px; }
    .admf-section-title h2 { font-size: 15px; }
    .admf-info-item { padding: 12px 16px; }
    .admf-header-top { padding: 12px 16px; }
    .admf-user { padding: 10px 16px 18px; }
    .admf-user-avatar { width: 60px; height: 60px; font-size: 26px; }
    .admf-user-info h1 { font-size: 20px; }
    .admf-cards { padding: 12px 14px; }
    .admf-timeline { padding: 14px 16px; }
    .admf-print-grid { padding: 12px 14px; }
    .admf-actions-row { padding: 12px 16px; flex-wrap: wrap; }
}

@media print {
    .admf-actions,
    .admf-btn-outline,
    .admf-actions-row { display: none !important; }
    .admf-header,
    .admf-section { border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
    .admf-header-bg { display: none !important; }
    .admf-user-info h1,
    .admf-bread a,
    .admf-bread,
    .admf-bread i { color: #1d2856 !important; }
    .admf-user-avatar { background: #e6fcf0 !important; color: #0d9488 !important; }
    .admf-tag { background: #e6fcf0 !important; color: #0d9488 !important; }
    .admf-stat-card { break-inside: avoid; }
}

.exm-page {
    display: grid;
    gap: 20px;
    padding-top: 4px;
}

.exm-header {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
}

.exm-header-bg {
    position: absolute;
    inset: 0;
    height: 140px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 40%, #c2410c 100%);
    border-radius: 20px 20px 0 0;
}

.exm-header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 24px;
    flex-wrap: wrap;
    z-index: 1;
}

.exm-bread {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

.exm-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.exm-bread a:hover { color: #fff; text-decoration: underline; }
.exm-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }

.exm-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px 24px;
    z-index: 1;
}

.exm-user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 32px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.3);
}

.exm-user-info h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.exm-user-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.exm-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.exm-tag-live { background: rgba(251, 146, 60, 0.35); }

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

.exm-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
}

.exm-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: #fff;
}

.exm-stat-card.purple .exm-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.exm-stat-card.green .exm-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.exm-stat-card.blue .exm-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.exm-stat-card.orange .exm-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }

.exm-stat-card h4 {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    color: #8896b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.exm-stat-card strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #1d2856;
    line-height: 1.2;
}

.exm-stat-card small {
    font-size: 11px;
    font-weight: 600;
    color: #8896b8;
}

.exm-body {
    display: grid;
    gap: 20px;
}

.exm-section {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf1fc;
    box-shadow: 0 4px 20px rgba(78, 71, 126, 0.06);
    overflow: hidden;
    border-left: 4px solid transparent;
}

.exm-section-upcoming { border-left-color: #7c3aed; }
.exm-section-active { border-left-color: #059669; }
.exm-section-history { border-left-color: #2563eb; }

.exm-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f4fd;
}

.exm-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

.exm-section-icon.upcoming { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.exm-section-icon.active { background: linear-gradient(135deg, #34d399, #059669); }
.exm-section-icon.history { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.exm-section-title h2 {
    margin: 0;
    color: #24305d;
    font-size: 17px;
    font-weight: 800;
}

.exm-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.exm-badge-green { background: #d1fae5; color: #065f46; }
.exm-badge-orange { background: #ffedd5; color: #9a3412; }
.exm-badge-purple { background: #ede9fe; color: #5b21b6; }
.exm-badge-blue { background: #dbeafe; color: #1e40af; }

.exm-empty {
    padding: 32px 24px;
    color: #8896b8;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.exm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 18px 20px;
}

.exm-card {
    padding: 20px;
    border-radius: 16px;
    background: #fafbff;
    border: 1px solid #eef1fb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exm-card-live {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.exm-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.exm-card-top small {
    color: #8896b8;
    font-size: 12px;
    font-weight: 700;
}

.exm-card h3 {
    margin: 0;
    color: #1f2958;
    font-size: 16px;
    font-weight: 800;
}

.exm-card > p {
    margin: 0;
    color: #5a6790;
    font-size: 13px;
    font-weight: 600;
}

.exm-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eef1fb;
}

.exm-card-meta label {
    display: block;
    color: #8896b8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.exm-card-meta span {
    color: #1d2856;
    font-size: 13px;
    font-weight: 700;
}

.exm-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.exm-btn-sm {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 0;
    background: #e5eaf7;
    color: #5b6a8f;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.exm-btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.exm-btn-primary {
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(234, 88, 12, 0.18);
}

.exm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.25);
}

.exm-btn-outline-sm {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid #e5eaf7;
    background: #fff;
    color: #5b6a8f;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: all 0.15s;
}

.exm-btn-outline-sm:hover {
    border-color: #775ef8;
    color: #775ef8;
}

.exm-table-wrap {
    padding: 0 24px 20px;
    overflow-x: auto;
}

.exm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.exm-table th {
    padding: 12px;
    text-align: left;
    color: #5b6788;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid #e6ecf5;
    background: #f8faff;
}

.exm-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f3fb;
    color: #24305d;
}

.exm-table td strong { color: #1d2856; font-weight: 800; }

.exm-cell-note {
    color: #8896b8;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

.exm-empty-cell {
    padding: 20px;
    text-align: center;
    color: #8896b8;
}

@media (max-width: 1100px) {
    .exm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .exm-user {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .exm-user-tags { justify-content: center; }
    .exm-user-info h1 { font-size: 24px; }
    .exm-header-top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
    .exm-stats { grid-template-columns: 1fr; }
    .exm-section-title { padding: 14px 16px; }
    .exm-section-title h2 { font-size: 15px; }
    .exm-header-top { padding: 12px 16px; }
    .exm-user { padding: 10px 16px 18px; }
    .exm-user-avatar { width: 60px; height: 60px; font-size: 26px; }
    .exm-user-info h1 { font-size: 20px; }
    .exm-card-grid { padding: 12px 14px; }
    .exm-card-grid { grid-template-columns: 1fr; }
    .exm-table-wrap { padding: 0 14px 16px; }
}

@media print {
    .exm-actions { display: none !important; }
    .exm-header-bg { display: none !important; }
    .exm-header,
    .exm-section { border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
    .exm-user-info h1,
    .exm-bread a,
    .exm-bread,
    .exm-bread i { color: #1d2856 !important; }
    .exm-user-avatar { background: #ffedd5 !important; color: #ea580c !important; }
    .exm-tag { background: #ffedd5 !important; color: #ea580c !important; }
    .exm-stat-card { break-inside: avoid; }
}

/* ===================== Library Page (.lib-*) ===================== */
.lib-page { display: flex; flex-direction: column; gap: 0; }
.lib-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0284c7 100%); }
.lib-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.lib-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.lib-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.lib-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.lib-bread a:hover { color: #fff; text-decoration: underline; }
.lib-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.lib-btn-outline-sm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 2px solid rgba(255,255,255,0.4); border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; background: transparent; text-decoration: none; transition: .2s; }
.lib-btn-outline-sm:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }
.lib-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.lib-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.lib-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.lib-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lib-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.lib-tag-id { background: rgba(6,182,212,0.4); }
.lib-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.lib-stat-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border: 1px solid #eef1fb; transition: .2s; }
.lib-stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,43,85,0.1); }
.lib-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.lib-stat-card.blue .lib-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.lib-stat-card.violet .lib-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.lib-stat-card.green .lib-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.lib-stat-card h4 { margin: 0; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.lib-stat-card strong { display: block; color: #1d2856; font-size: 26px; font-weight: 800; margin: 2px 0; }
.lib-stat-card small { color: #8b9ab0; font-size: 12px; font-weight: 600; }
.lib-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.lib-section { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #2563eb; overflow: hidden; }
.lib-section-issued { border-left-color: #7c3aed; }
.lib-section-returned { border-left-color: #059669; }
.lib-section-timeline { border-left-color: #0891b2; grid-column: 1 / -1; }
.lib-section-title { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef1fb; }
.lib-section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; }
.lib-section-icon.issued { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.lib-section-icon.returned { background: linear-gradient(135deg, #34d399, #059669); }
.lib-section-icon.timeline { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.lib-section-title h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 800; }
.lib-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.lib-badge-green { background: #d1fae5; color: #065f46; }
.lib-badge-orange { background: #ffedd5; color: #9a3412; }
.lib-badge-violet { background: #ede9fe; color: #5b21b6; }
.lib-badge-blue { background: #dbeafe; color: #1e40af; }
.lib-empty { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; font-size: 14px; }
.lib-book-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.lib-book-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid #eef1fb; background: #fafcff; transition: .2s; }
.lib-book-item:hover { background: #f0f7ff; border-color: #dbeafe; }
.lib-book-current { border-left: 3px solid #7c3aed; }
.lib-book-returned { border-left: 3px solid #059669; }
.lib-book-main { display: flex; align-items: center; gap: 12px; }
.lib-book-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, #60a5fa, #2563eb); }
.lib-book-item.lib-book-current .lib-book-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.lib-book-item.lib-book-returned .lib-book-icon { background: linear-gradient(135deg, #34d399, #059669); }
.lib-book-main h3 { margin: 0 0 2px; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 14px; font-weight: 800; }
.lib-book-main p { margin: 0; color: #6b7a90; font-size: 12px; font-weight: 600; }
.lib-book-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; font-weight: 600; color: #5b6a8f; }
.lib-book-meta label { color: #8b9ab0; font-weight: 700; margin-right: 2px; }
.lib-table-wrap { padding: 0 20px 20px; overflow-x: auto; }
.lib-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lib-table th { text-align: left; padding: 12px 14px; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #eef1fb; white-space: nowrap; }
.lib-table td { padding: 12px 14px; color: #1d2856; border-bottom: 1px solid #f0f3fa; font-weight: 600; }
.lib-table td strong { color: #1d2856; font-weight: 800; }
.lib-table tbody tr:hover td { background: #f8faff; }
.lib-cell-note { color: #8896b8; font-size: 12px; font-weight: 600; margin-top: 2px; }
.lib-empty-cell { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; }

/* ===================== Results Page (.res-*) ===================== */
.res-page { display: flex; flex-direction: column; gap: 0; }
.res-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.res-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.res-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.res-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.res-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.res-bread a:hover { color: #fff; text-decoration: underline; }
.res-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.res-actions { display: flex; gap: 8px; }
.res-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 0; border-radius: 12px; font-family: "Mulish",sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s; text-decoration: none; background: rgba(255,255,255,0.2); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.res-btn:hover { background: rgba(255,255,255,0.35); transform: translateY(-1px); }
.res-btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.5); }
.res-btn-outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.res-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.res-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.res-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.res-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.res-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.res-stat-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border: 1px solid #eef1fb; transition: .2s; }
.res-stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,43,85,0.1); }
.res-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.res-stat-card.purple .res-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.res-stat-card.green .res-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.res-stat-card.blue .res-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.res-stat-card.orange .res-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }
.res-stat-card h4 { margin: 0; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.res-stat-card strong { display: block; color: #1d2856; font-size: 26px; font-weight: 800; margin: 2px 0; }
.res-stat-card small { color: #8b9ab0; font-size: 12px; font-weight: 600; }
.res-body { display: flex; flex-direction: column; gap: 20px; }
.res-section { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #7c3aed; overflow: hidden; }
.res-section-title { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef1fb; }
.res-section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, #a855f7, #7c3aed); }
.res-section-icon.history { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.res-section-title h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 800; }
.res-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.res-badge-green { background: #d1fae5; color: #065f46; }
.res-badge-red { background: #fee2e2; color: #991b1b; }
.res-badge-blue { background: #dbeafe; color: #1e40af; }
.res-badge-purple { background: #ede9fe; color: #5b21b6; }
.res-empty { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; font-size: 14px; }
.res-table-wrap { padding: 0 20px 20px; overflow-x: auto; }
.res-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.res-table th { text-align: left; padding: 12px 14px; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #eef1fb; white-space: nowrap; }
.res-table td { padding: 12px 14px; color: #1d2856; border-bottom: 1px solid #f0f3fa; font-weight: 600; }
.res-table td strong { color: #1d2856; font-weight: 800; }
.res-table tbody tr:hover td { background: #f8faff; }
.res-cell-subject { color: #5b6a8f; font-weight: 500; }
.res-cell-date { color: #5b6a8f; }
.res-cell-marks { font-weight: 800; color: #1d2856; }
.res-cell-status { text-align: center; }
.res-empty-cell { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; }
.res-page .submit-success { margin-bottom: 20px; }

/* ===================== Notifications Page (.notif-*) ===================== */
.notif-page { display: flex; flex-direction: column; gap: 0; }
.notif-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); }
.notif-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.notif-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.notif-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.notif-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.notif-bread a:hover { color: #fff; text-decoration: underline; }
.notif-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.notif-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.notif-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.notif-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.notif-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.notif-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.notif-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.notif-stat-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border: 1px solid #eef1fb; transition: .2s; }
.notif-stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,43,85,0.1); }
.notif-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.notif-stat-card.purple .notif-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.notif-stat-card.blue .notif-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.notif-stat-card.green .notif-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.notif-stat-card.orange .notif-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }
.notif-stat-card h4 { margin: 0; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.notif-stat-card strong { display: block; color: #1d2856; font-size: 26px; font-weight: 800; margin: 2px 0; }
.notif-stat-card small { color: #8b9ab0; font-size: 12px; font-weight: 600; }
.notif-body { display: flex; flex-direction: column; gap: 20px; }
.notif-section { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #7c3aed; overflow: hidden; }
.notif-section-tags { border-left-color: #8b5cf6; }
.notif-section-title { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef1fb; }
.notif-section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, #a855f7, #7c3aed); }
.notif-section-title h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 800; }
.notif-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.notif-badge-unread { background: #dbeafe; color: #1e40af; }
.notif-badge-read { background: #e5e7eb; color: #4b5563; }
.notif-badge-blue { background: #dbeafe; color: #1e40af; }
.notif-badge-purple { background: #ede9fe; color: #5b21b6; }
.notif-tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; }
.notif-tag-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; background: #f0f3fa; color: #1d2856; border: 1px solid #e0e6f2; transition: .2s; }
.notif-tag-item:hover { background: #e8edf8; border-color: #c8d2e8; }
.notif-tag-item i { color: #6b7a90; font-size: 12px; }
.notif-stack { display: flex; flex-direction: column; gap: 14px; }
.notif-card { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #6366f1; overflow: hidden; transition: .2s; }
.notif-card:hover { box-shadow: 0 14px 34px rgba(33,43,85,0.1); }
.notif-card-exam { border-left-color: #f59e0b; }
.notif-card-fee { border-left-color: #ef4444; }
.notif-card-admission { border-left-color: #10b981; }
.notif-card-library { border-left-color: #3b82f6; }
.notif-card-holiday { border-left-color: #8b5cf6; }
.notif-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef1fb; }
.notif-card-head h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 15px; font-weight: 800; }
.notif-card-body { padding: 14px 20px; }
.notif-card-body p { margin: 0; color: #3d4e6a; font-size: 14px; line-height: 1.6; font-weight: 500; }
.notif-card-body p + p { margin-top: 6px; }
.notif-card-meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #f8faff; border-top: 1px solid #eef1fb; }
.notif-card-time { display: flex; align-items: center; gap: 6px; color: #8b9ab0; font-size: 13px; font-weight: 600; }
.notif-card-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); text-decoration: none; transition: .2s; }
.notif-card-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.notif-empty { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; font-size: 14px; }

/* ===================== Settings Page (.set-*) ===================== */
.set-page { display: flex; flex-direction: column; gap: 0; }
.set-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #475569 0%, #334155 50%, #1e293b 100%); }
.set-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.set-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.set-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.set-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.set-bread a:hover { color: #fff; text-decoration: underline; }
.set-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.set-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.set-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.set-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.set-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.set-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.set-body { display: flex; flex-direction: column; gap: 20px; }
.set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.set-card { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #6366f1; overflow: hidden; transition: .2s; }
.set-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,43,85,0.12); }
.set-card-password { border-left-color: #7c3aed; }
.set-card-mobile { border-left-color: #2563eb; }
.set-card-email { border-left-color: #059669; }
.set-card-logout { border-left-color: #dc2626; }
.set-card-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid #eef1fb; }
.set-card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.set-card-password .set-card-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.set-card-mobile .set-card-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.set-card-email .set-card-icon { background: linear-gradient(135deg, #34d399, #059669); }
.set-card-logout .set-card-icon { background: linear-gradient(135deg, #f87171, #dc2626); }
.set-card-head h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 800; }
.set-card-badge { margin-left: auto; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; background: #f0f3fa; color: #5b6a8f; }
.set-card-password .set-card-badge { background: #ede9fe; color: #5b21b6; }
.set-card-mobile .set-card-badge, .set-card-email .set-card-badge { background: #dbeafe; color: #1e40af; }
.set-card-logout .set-card-badge { background: #fee2e2; color: #991b1b; }
.set-card-body { padding: 16px 20px; }
.set-card-body p { margin: 0; color: #3d4e6a; font-size: 14px; line-height: 1.7; font-weight: 500; }
.set-card-body a { color: #6366f1; font-weight: 700; text-decoration: none; }
.set-card-body a:hover { text-decoration: underline; }

/* ===================== ID Card Page (.idc-*) ===================== */
.idc-page { display: flex; flex-direction: column; gap: 0; }
.idc-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); }
.idc-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.idc-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.idc-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.idc-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.idc-bread a:hover { color: #fff; text-decoration: underline; }
.idc-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.idc-actions { display: flex; gap: 8px; }
.idc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 0; border-radius: 12px; font-family: "Mulish",sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s; text-decoration: none; background: rgba(255,255,255,0.2); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.idc-btn:hover { background: rgba(255,255,255,0.35); transform: translateY(-1px); }
.idc-btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.5); }
.idc-btn-outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.idc-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.idc-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.idc-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.idc-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.idc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.idc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.idc-stat-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border: 1px solid #eef1fb; transition: .2s; }
.idc-stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,43,85,0.1); }
.idc-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.idc-stat-card.purple .idc-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.idc-stat-card.blue .idc-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.idc-stat-card.green .idc-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.idc-stat-card.orange .idc-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }
.idc-stat-card h4 { margin: 0; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.idc-stat-card strong { display: block; color: #1d2856; font-size: 26px; font-weight: 800; margin: 2px 0; }
.idc-stat-card small { color: #8b9ab0; font-size: 12px; font-weight: 600; }
.idc-body { display: flex; flex-direction: column; gap: 20px; }
.idc-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; background: #f0fdf4; border-radius: 14px; border: 1px solid #d1fae5; margin-bottom: 20px; }
.idc-note i { font-size: 18px; color: #059669; margin-top: 2px; }
.idc-note p { margin: 0; color: #065f46; font-size: 13px; font-weight: 600; line-height: 1.5; }
.idc-card-shell { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.idc-card-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.idc-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: 0; border-radius: 12px; font-family: "Mulish",sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: .2s; text-decoration: none; }
.idc-action-btn.primary { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
.idc-action-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,185,129,0.4); }
.idc-action-btn.secondary { background: #f0f3fa; color: #1d2856; border: 1px solid #e0e6f2; }
.idc-action-btn.secondary:hover { background: #e8edf8; }
.idc-section { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #10b981; overflow: hidden; }
.idc-section-title { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef1fb; }
.idc-section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, #34d399, #059669); }
.idc-section-title h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 800; }
.idc-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; background: #d1fae5; color: #065f46; }
.idc-section p { margin: 0; padding: 16px 20px; color: #3d4e6a; font-size: 14px; line-height: 1.7; font-weight: 500; }

/* ===================== Hall Ticket Page (.ht-*) ===================== */
.ht-page { display: flex; flex-direction: column; gap: 0; }
.ht-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%); }
.ht-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.ht-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.ht-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.ht-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.ht-bread a:hover { color: #fff; text-decoration: underline; }
.ht-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.ht-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.ht-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.ht-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.ht-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ht-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.ht-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ht-stat-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border: 1px solid #eef1fb; transition: .2s; }
.ht-stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,43,85,0.1); }
.ht-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.ht-stat-card.purple .ht-stat-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.ht-stat-card.blue .ht-stat-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ht-stat-card.green .ht-stat-icon { background: linear-gradient(135deg, #34d399, #059669); }
.ht-stat-card.orange .ht-stat-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }
.ht-stat-card h4 { margin: 0; color: #6b7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.ht-stat-card strong { display: block; color: #1d2856; font-size: 26px; font-weight: 800; margin: 2px 0; }
.ht-stat-card small { color: #8b9ab0; font-size: 12px; font-weight: 600; }
.ht-body { display: flex; flex-direction: column; gap: 20px; }
.ht-section { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #ea580c; overflow: hidden; }
.ht-section-title { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef1fb; }
.ht-section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, #fb923c, #ea580c); }
.ht-section-title h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 800; }
.ht-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.ht-badge-orange { background: #ffedd5; color: #9a3412; }
.ht-badge-green { background: #d1fae5; color: #065f46; }
.ht-badge-blue { background: #dbeafe; color: #1e40af; }
.ht-card { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); overflow: hidden; }
.ht-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef1fb; background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.ht-card-head small { display: block; color: #9a3412; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.ht-card-head h2 { margin: 0; color: #9a3412; font-family: "Montserrat",sans-serif; font-size: 18px; font-weight: 800; }
.ht-card-head p { margin: 0; color: #c2410c; font-size: 13px; font-weight: 600; }
.ht-card-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 20px; }
.ht-card-student { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; background: #f8faff; border-radius: 14px; min-width: 180px; }
.ht-card-photo { width: 80px; height: 80px; border-radius: 50%; background: #eef1fb; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ht-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.ht-card-photo span { font-size: 28px; color: #6b7a90; font-weight: 800; }
.ht-card-copy { text-align: center; }
.ht-card-copy strong { display: block; color: #1d2856; font-size: 16px; font-weight: 800; }
.ht-card-copy span { display: block; color: #5b6a8f; font-size: 12px; font-weight: 600; margin-top: 3px; }
.ht-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.ht-info-grid > div { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f0f3fa; }
.ht-info-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.ht-info-grid > div strong { color: #6b7a90; font-size: 13px; font-weight: 700; }
.ht-info-grid > div span { color: #1d2856; font-size: 13px; font-weight: 700; text-align: right; }
.ht-req-wrap { padding: 20px; }
.ht-req-wrap .ht-section-title { padding: 0 0 14px; border-bottom: 1px solid #eef1fb; margin-bottom: 14px; }
.ht-req-list { display: flex; flex-direction: column; gap: 10px; }
.ht-req-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f0fdf4; border-radius: 12px; border: 1px solid #d1fae5; }
.ht-req-item i { width: 20px; height: 20px; border-radius: 50%; background: #10b981; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.ht-req-item span { color: #065f46; font-size: 13px; font-weight: 600; }
.ht-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 20px 20px; }
.ht-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: 12px; font-family: "Mulish",sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s; text-decoration: none; }
.ht-action-btn.primary { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; box-shadow: 0 4px 14px rgba(234,88,12,0.3); }
.ht-action-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(234,88,12,0.4); }
.ht-action-btn.secondary { background: #f0f3fa; color: #1d2856; border: 1px solid #e0e6f2; }
.ht-action-btn.secondary:hover { background: #e8edf8; }
.ht-action-btn.outline { background: transparent; border: 2px solid #ea580c; color: #ea580c; }
.ht-action-btn.outline:hover { background: #fff7ed; }
.ht-empty { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; font-size: 14px; }

/* ===================== Take Exam Page (.tex-*) ===================== */
.tex-page { display: flex; flex-direction: column; gap: 0; }
.tex-header { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 24px; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%); }
.tex-header-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.08'%3E%3Ccircle cx='350' cy='50' r='180'/%3E%3Ccircle cx='50' cy='350' r='120'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
.tex-header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: relative; z-index: 1; }
.tex-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.tex-bread a { color: rgba(255,255,255,0.9); text-decoration: none; }
.tex-bread a:hover { color: #fff; text-decoration: underline; }
.tex-bread i { font-size: 9px; color: rgba(255,255,255,0.5); }
.tex-user { display: flex; align-items: center; gap: 16px; padding: 8px 24px 20px; position: relative; z-index: 1; }
.tex-user-avatar { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0; }
.tex-user-info h1 { margin: 0; color: #fff; font-family: "Montserrat",sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.tex-user-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tex-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.18); color: #fff; }
.tex-body { display: flex; flex-direction: column; gap: 20px; }
.tex-meta-card { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); overflow: hidden; }
.tex-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tex-meta-item { padding: 14px 18px; border-right: 1px solid #eef1fb; }
.tex-meta-item:last-child { border-right: 0; }
.tex-meta-item label { display: block; color: #6b7a90; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.tex-meta-item span { display: block; color: #1d2856; font-size: 14px; font-weight: 700; }
.tex-form { display: flex; flex-direction: column; gap: 18px; }
.tex-question-card { background: #fff; border-radius: 18px; border: 1px solid #eef1fb; box-shadow: 0 8px 24px rgba(33,43,85,0.06); border-left: 4px solid #0891b2; overflow: hidden; }
.tex-question-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #eef1fb; }
.tex-question-head h2 { margin: 0; color: #1d2856; font-family: "Montserrat",sans-serif; font-size: 15px; font-weight: 800; }
.tex-question-head small { color: #6b7a90; font-size: 12px; font-weight: 700; }
.tex-question-text { padding: 16px 20px; margin: 0; color: #1d2856; font-size: 15px; line-height: 1.7; font-weight: 600; }
.tex-option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 20px 16px; }
.tex-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 2px solid #e0e6f2; cursor: pointer; transition: .15s; background: #fff; }
.tex-option:hover { border-color: #93c5fd; background: #f0f7ff; }
.tex-option input[type="radio"] { display: none; }
.tex-option input[type="radio"]:checked + span { color: #1d4ed8; }
.tex-option input[type="radio"]:checked + span strong { background: #2563eb; color: #fff; }
.tex-option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.tex-option span { display: flex; align-items: center; gap: 8px; color: #3d4e6a; font-size: 14px; font-weight: 600; cursor: pointer; }
.tex-option span strong { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #f0f3fa; color: #5b6a8f; font-size: 12px; font-weight: 800; flex-shrink: 0; transition: .15s; }
.tex-submit-wrap { display: flex; justify-content: center; padding: 8px 0; }
.tex-submit-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; border: 0; border-radius: 14px; font-family: "Mulish",sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: .2s; background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; box-shadow: 0 4px 14px rgba(6,182,212,0.3); }
.tex-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6,182,212,0.4); }
.tex-empty { text-align: center; padding: 40px 20px; color: #8b9ab0; font-weight: 600; font-size: 14px; }
.tex-page .submit-success { margin-bottom: 20px; }

@media (max-width: 1023px) {
    .res-stats, .notif-stats, .idc-stats, .ht-stats { grid-template-columns: repeat(2, 1fr); }
    .set-grid { grid-template-columns: 1fr; }
    .tex-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .tex-meta-item:nth-child(2) { border-right: 0; }
    .ht-card-grid { grid-template-columns: 1fr; }
    .ht-card-student { flex-direction: row; min-width: auto; }
    .ht-card-copy { text-align: left; }
}

@media (max-width: 767px) {
    .res-stats, .notif-stats, .idc-stats, .ht-stats { grid-template-columns: 1fr; }
    .notif-tags { gap: 8px; }
    .tex-option-grid { grid-template-columns: 1fr; }
    .tex-meta-grid { grid-template-columns: 1fr; }
    .tex-meta-item { border-right: 0; border-bottom: 1px solid #eef1fb; }
    .tex-meta-item:last-child { border-bottom: 0; }
    .res-header-top, .notif-header-top, .set-header-top, .idc-header-top, .ht-header-top, .tex-header-top { flex-direction: column; align-items: flex-start; }
    .res-user, .notif-user, .set-user, .idc-user, .ht-user, .tex-user { padding: 10px 16px 18px; }
    .res-user-avatar, .notif-user-avatar, .set-user-avatar, .idc-user-avatar, .ht-user-avatar, .tex-user-avatar { width: 52px; height: 52px; font-size: 22px; }
    .res-user-info h1, .notif-user-info h1, .set-user-info h1, .idc-user-info h1, .ht-user-info h1, .tex-user-info h1 { font-size: 20px; }
    .res-section-title, .notif-section-title, .set-section-title, .idc-section-title, .ht-section-title { padding: 14px 16px; }
    .res-section-title h2, .notif-section-title h2, .set-section-title h2, .idc-section-title h2, .ht-section-title h2 { font-size: 15px; }
    .res-table-wrap { padding: 0 14px 16px; }
    .ht-card-head { padding: 14px 16px; }
    .ht-card-grid { padding: 14px; }
    .ht-card-student { min-width: auto; }
    .ht-info-grid { grid-template-columns: 1fr; }
    .ht-info-grid > div:nth-last-child(-n+2) { border-bottom: 1px solid #f0f3fa; }
    .ht-info-grid > div:last-child { border-bottom: 0; }
}

@media (max-width: 1023px) {
    .lib-body { grid-template-columns: 1fr; }
    .lib-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .lib-stats { grid-template-columns: 1fr; }
    .lib-header-top { flex-direction: column; align-items: flex-start; }
    .lib-user { padding: 10px 16px 18px; }
    .lib-user-avatar { width: 52px; height: 52px; font-size: 22px; }
    .lib-user-info h1 { font-size: 20px; }
    .lib-book-meta { flex-direction: column; gap: 4px; }
}

@media print {
    .res-actions, .idc-actions, .ht-actions, .lib-card-actions { display: none !important; }
    .res-header-bg, .idc-header-bg, .ht-header-bg, .notif-header-bg, .set-header-bg, .tex-header-bg, .lib-header-bg { display: none !important; }
    .res-header, .notif-header, .set-header, .idc-header, .ht-header, .tex-header, .lib-header,
    .res-section, .notif-section, .set-section, .idc-section, .ht-section, .tex-section, .lib-section,
    .tex-question-card, .tex-meta-card { border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
    .res-user-info h1, .notif-user-info h1, .set-user-info h1, .idc-user-info h1, .ht-user-info h1, .tex-user-info h1, .lib-user-info h1,
    .res-bread a, .res-bread, .res-bread i,
    .notif-bread a, .notif-bread, .notif-bread i,
    .set-bread a, .set-bread, .set-bread i,
    .idc-bread a, .idc-bread, .idc-bread i,
    .ht-bread a, .ht-bread, .ht-bread i,
    .tex-bread a, .tex-bread, .tex-bread i,
    .lib-bread a, .lib-bread, .lib-bread i { color: #1d2856 !important; }
    .res-user-avatar, .notif-user-avatar, .set-user-avatar, .idc-user-avatar, .ht-user-avatar, .tex-user-avatar, .lib-user-avatar { background: #ffedd5 !important; color: #ea580c !important; }
    .res-tag, .notif-tag, .set-tag, .idc-tag, .ht-tag, .tex-tag, .lib-tag { background: #ffedd5 !important; color: #ea580c !important; }
    .res-stat-card, .notif-stat-card, .idc-stat-card, .ht-stat-card, .lib-stat-card { break-inside: avoid; }
    .tex-option { break-inside: avoid; }
}
.login-erp-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(18, 86, 168, 0.08), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(18, 86, 168, 0.14);
    margin-bottom: 18px;
}

.login-erp-pill img,
.login-erp-pill i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #1256a8;
    box-shadow: 0 10px 24px rgba(18, 86, 168, 0.12);
}

.login-erp-pill strong,
.login-erp-pill small {
    display: block;
}

.student-login-feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.student-login-feature-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f3f7ff;
    color: #1f3e7b;
    font-size: 12px;
    font-weight: 700;
}

.login-help-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.login-help-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f4e93;
    font-weight: 700;
    font-size: 13px;
}

.student-login-v2-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Mulish", sans-serif;
    background:
        radial-gradient(circle at 8% 14%, rgba(202, 222, 255, 0.92), transparent 17%),
        radial-gradient(circle at 100% 76%, rgba(207, 225, 255, 0.78), transparent 20%),
        linear-gradient(180deg, #f9fbff 0%, #eef5ff 100%);
}

.student-login-v2-shell {
    width: min(100%, 1440px);
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: stretch;
    padding: 18px 18px 10px;
}

.student-login-v2-layout {
    min-height: calc(100vh - 82px);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.92fr);
    gap: 26px;
    padding: 26px 34px 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(204, 222, 255, 0.42), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(196, 223, 255, 0.48), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #edf4ff 100%);
    overflow: hidden;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 24px 60px rgba(40, 70, 150, 0.08);
}

.student-login-v2-showcase,
.student-login-v2-panel {
    position: relative;
}

.student-login-v2-showcase {
    padding: 22px 18px 0;
    color: #233a73;
    overflow: hidden;
}

.student-login-v2-showcase::before,
.student-login-v2-showcase::after,
.student-login-v2-panel::before,
.student-login-v2-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.student-login-v2-showcase::before {
    left: -82px;
    top: -18px;
    width: 282px;
    height: 162px;
    border-radius: 0 0 160px 160px;
    background: linear-gradient(180deg, rgba(210, 228, 255, 0.96) 0%, rgba(210, 228, 255, 0.25) 100%);
    transform: rotate(-10deg);
}

.student-login-v2-showcase::after {
    left: -48px;
    bottom: 132px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(184, 212, 255, 0.82);
}

.student-login-v2-panel::before {
    right: 26px;
    top: 114px;
    width: 78px;
    height: 88px;
    background-image: radial-gradient(circle, rgba(131, 171, 234, 0.38) 1.55px, transparent 1.85px);
    background-size: 10px 10px;
}

.student-login-v2-panel::after {
    right: -8px;
    bottom: 96px;
    width: 112px;
    height: 184px;
    border-radius: 56px 0 0 56px;
    background: rgba(216, 230, 255, 0.52);
}

.student-login-v2-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(63, 106, 181, 0.06);
}

.student-login-v2-brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2d69ea;
    font-size: 12px;
    background: #edf4ff;
    box-shadow: inset 0 0 0 1px rgba(92, 137, 230, 0.12);
}

.student-login-v2-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    color: #244383;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.student-login-v2-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin-top: 66px;
}

.student-login-v2-copy h1 {
    margin: 0;
    color: #223b71;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.22;
    font-weight: 800;
}

.student-login-v2-copy h1 span {
    color: #2564ea;
}

.student-login-v2-copy p {
    margin: 18px 0 0;
    max-width: 480px;
    color: #41557d;
    font-size: 14px;
    line-height: 1.78;
    font-weight: 700;
}

.student-login-v2-copy-line {
    display: inline-block;
    width: 40px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f66ef 0%, #5b6ffb 100%);
    box-shadow: 38px 0 0 rgba(37, 91, 230, 0.2);
}

.student-login-v2-paper-plane {
    position: absolute;
    top: 14px;
    left: 47%;
    color: rgba(112, 177, 255, 0.32);
    font-size: 18px;
    transform: rotate(14deg);
}

.student-login-v2-paper-plane::after {
    content: "";
    position: absolute;
    left: -60px;
    top: 28px;
    width: 82px;
    height: 42px;
    border-bottom: 2px dashed rgba(110, 176, 255, 0.26);
    border-radius: 0 0 70px 70px;
    transform: rotate(12deg);
}

.student-login-v2-instructions-card {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    margin-top: 48px;
    padding: 18px 18px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(225, 235, 251, 0.95);
    box-shadow: 0 18px 44px rgba(55, 94, 163, 0.08);
}

.student-login-v2-instructions-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #213b74;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.student-login-v2-instructions-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: #2b65e8;
    font-size: 16px;
}

.student-login-v2-instructions-list {
    display: grid;
}

.student-login-v2-instruction-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid #edf2fb;
}

.student-login-v2-instruction-item:first-child {
    border-top: 0;
}

.student-login-v2-instruction-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

.student-login-v2-instruction-icon.tone-blue { background: #2f73f5; }
.student-login-v2-instruction-icon.tone-green { background: #27b45e; }
.student-login-v2-instruction-icon.tone-amber { background: #f9a825; }
.student-login-v2-instruction-icon.tone-violet { background: #7d4cf2; }
.student-login-v2-instruction-icon.tone-pink { background: #f14c7f; }

.student-login-v2-instruction-item p {
    margin: 0;
    color: #42587e;
    font-size: 13px;
    line-height: 1.58;
    font-weight: 700;
}

.student-login-v2-illustration {
    position: absolute;
    left: 0;
    right: 58px;
    bottom: 0;
    height: 242px;
}

.student-login-v2-ground {
    position: absolute;
    left: 58px;
    right: 32px;
    bottom: 18px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(157, 203, 255, 0.46), rgba(157, 203, 255, 0.02) 72%);
}

.student-login-v2-campus {
    position: absolute;
    left: 154px;
    bottom: 34px;
    width: 206px;
    height: 100px;
    border-radius: 8px 8px 16px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(223, 236, 255, 0.92));
    box-shadow: 0 18px 34px rgba(76, 116, 182, 0.14);
}

.student-login-v2-campus::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 16px;
    bottom: 16px;
    background:
        repeating-linear-gradient(90deg, rgba(146, 176, 222, 0.55) 0 8px, transparent 8px 20px),
        repeating-linear-gradient(180deg, rgba(146, 176, 222, 0.28) 0 10px, transparent 10px 24px);
    border-radius: 6px;
}

.student-login-v2-campus-roof {
    position: absolute;
    left: 18px;
    right: 18px;
    top: -18px;
    height: 24px;
    background: linear-gradient(180deg, #7da2de 0%, #5a7dc4 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.student-login-v2-campus-flag {
    position: absolute;
    left: 50%;
    top: -28px;
    width: 2px;
    height: 26px;
    background: #5272bd;
    transform: translateX(-50%);
}

.student-login-v2-campus-flag::after {
    content: "";
    position: absolute;
    top: 0;
    left: 2px;
    width: 12px;
    height: 8px;
    border-radius: 0 4px 4px 0;
    background: #4f82ea;
}

.student-login-v2-campus-center {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 34px;
    height: 54px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #d9e8ff 0%, #b8cff4 100%);
    transform: translateX(-50%);
}

.student-login-v2-tree {
    position: absolute;
    bottom: 24px;
    width: 48px;
    height: 82px;
}

.student-login-v2-tree::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 8px;
    height: 26px;
    border-radius: 999px;
    background: #87654c;
    transform: translateX(-50%);
}

.student-login-v2-tree::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #8ee095 0%, #58b36a 78%);
    transform: translateX(-50%);
    box-shadow: -16px 10px 0 -10px #73c67d, 16px 8px 0 -10px #73c67d;
}

.student-login-v2-tree.left {
    left: 42px;
}

.student-login-v2-tree.right {
    left: 376px;
}

.student-login-v2-cloud {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
}

.student-login-v2-cloud::before,
.student-login-v2-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.student-login-v2-cloud.one {
    left: 244px;
    top: 36px;
    width: 58px;
    height: 18px;
}

.student-login-v2-cloud.one::before {
    width: 20px;
    height: 20px;
    left: 6px;
    top: -8px;
}

.student-login-v2-cloud.one::after {
    width: 24px;
    height: 24px;
    right: 8px;
    top: -10px;
}

.student-login-v2-cloud.two {
    left: 448px;
    top: 72px;
    width: 72px;
    height: 20px;
}

.student-login-v2-cloud.two::before {
    width: 22px;
    height: 22px;
    left: 12px;
    top: -10px;
}

.student-login-v2-cloud.two::after {
    width: 28px;
    height: 28px;
    right: 12px;
    top: -14px;
}

.student-login-v2-bird {
    position: absolute;
    width: 16px;
    height: 8px;
    border-top: 2px solid rgba(117, 157, 212, 0.6);
    border-radius: 50px 50px 0 0;
    transform: rotate(8deg);
}

.student-login-v2-bird::after {
    content: "";
    position: absolute;
    left: 12px;
    top: -2px;
    width: 16px;
    height: 8px;
    border-top: 2px solid rgba(117, 157, 212, 0.6);
    border-radius: 50px 50px 0 0;
    transform: rotate(18deg);
}

.student-login-v2-bird.one {
    left: 282px;
    top: 44px;
}

.student-login-v2-bird.two {
    left: 468px;
    top: 52px;
    transform: scale(0.85);
}

.student-login-v2-panel {
    display: grid;
    place-items: center;
    padding: 8px 4px 18px;
    background: transparent;
}

.student-login-v2-card {
    width: min(100%, 448px);
    padding: 20px 30px 22px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(223, 233, 248, 0.92);
    box-shadow: 0 18px 48px rgba(64, 101, 170, 0.1);
    text-align: center;
    backdrop-filter: blur(8px);
}

.student-login-v2-logo-wrap {
    width: 96px;
    height: 96px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-login-v2-logo-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.student-login-v2-logo-wrap i {
    color: #245de6;
    font-size: 54px;
}

.student-login-v2-card h2 {
    margin: 0;
    color: #20386e;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.student-login-v2-subcopy {
    margin: 6px 0 0;
    color: #7b86a0;
    font-size: 13px;
    font-weight: 700;
}

.student-login-v2-divider-line {
    display: block;
    width: 52px;
    height: 4px;
    margin: 12px auto 20px;
    border-radius: 999px;
    background: #2a64e8;
    box-shadow: -20px 0 0 #dbe6fb, 20px 0 0 #dbe6fb;
}

.student-login-v2-form {
    display: grid;
    gap: 18px;
}

.student-login-v2-form-group {
    text-align: left;
}

.student-login-v2-form-group > label,
.student-login-v2-label-row label {
    display: block;
    margin-bottom: 9px;
    color: #20386e;
    font-size: 14px;
    font-weight: 800;
}

.student-login-v2-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.student-login-v2-field {
    min-height: 44px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #d9e2f2;
    border-radius: 11px;
    background: #fff;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.student-login-v2-field:focus-within {
    border-color: #4b77ea;
    box-shadow: 0 0 0 4px rgba(75, 119, 234, 0.12);
}

.student-login-v2-form-group.has-error .student-login-v2-field,
.student-login-v2-field.has-error {
    border-color: #d93c3c;
    box-shadow: 0 0 0 3px rgba(217, 60, 60, 0.12);
}

.student-login-v2-field-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4f74e8;
    font-size: 15px;
}

.student-login-v2-field-copy {
    min-width: 0;
}

.student-login-v2-field-copy input {
    width: 100%;
    border: 0;
    outline: none;
    padding: 0;
    background: transparent;
    color: #23315d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.student-login-v2-field-copy input::placeholder {
    color: #9ca7bc;
    font-weight: 600;
}

.student-login-v2-inline-error {
    margin-top: 8px;
    color: #d93c3c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.student-login-v2-eye {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #7b87a0;
    cursor: pointer;
}

.student-login-v2-captcha-row {
    display: grid;
    grid-template-columns: 170px 42px minmax(0, 1fr);
    gap: 10px;
}

.student-login-v2-captcha-code {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #dbe4f4;
    background: linear-gradient(180deg, #f5f9ff 0%, #edf4ff 100%);
    color: #245ee7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.42em;
    white-space: nowrap;
}

.student-login-v2-captcha-refresh {
    min-height: 44px;
    border: 1px solid #dbe4f4;
    border-radius: 10px;
    background: #fff;
    color: #2d66e8;
    font-size: 18px;
    cursor: pointer;
}

.student-login-v2-captcha-input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #dbe4f4;
    border-radius: 10px;
    background: #fff;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.student-login-v2-form-group.has-error .student-login-v2-captcha-input,
.student-login-v2-captcha-input.has-error {
    border-color: #d93c3c;
    box-shadow: 0 0 0 3px rgba(217, 60, 60, 0.12);
}

.student-login-v2-captcha-input span {
    color: #8391aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.student-login-v2-captcha-input input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #23315d;
    font-size: 14px;
    font-weight: 700;
}

.student-login-v2-captcha-input input::placeholder {
    color: #9ca7bc;
}

.student-login-v2-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #69758f;
    font-size: 12px;
    font-weight: 700;
}

.student-login-v2-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.student-login-v2-check input {
    margin: 0;
}

.student-login-v2-link-btn {
    border: 0;
    padding: 0;
    background: transparent;
    color: #2f66e8;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.student-login-v2-secure {
    color: #179a4d;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
}

.student-login-v2-submit {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #1858ed 0%, #3558f4 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 14px 28px rgba(55, 88, 244, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.student-login-v2-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(55, 88, 244, 0.22);
    filter: brightness(1.02);
}

.student-login-v2-submit:active {
    transform: translateY(0);
}

.student-login-v2-or {
    position: relative;
    margin: 18px 0 14px;
    text-align: center;
}

.student-login-v2-or::before,
.student-login-v2-or::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 18px);
    height: 1px;
    background: #e6ebf5;
}

.student-login-v2-or::before {
    left: 0;
}

.student-login-v2-or::after {
    right: 0;
}

.student-login-v2-or span {
    display: inline-block;
    padding: 0 8px;
    background: #fff;
    color: #3f4f73;
    font-size: 16px;
    font-weight: 800;
}

.student-login-v2-register-btn {
    width: 100%;
    min-height: 42px;
    border: 1px solid #a6c2ff;
    border-radius: 12px;
    background: #fff;
    color: #245de7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.student-login-v2-reset-card {
    width: min(100%, 448px);
}

.student-login-v2-reset-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    text-align: left;
}

.student-login-v2-reset-head h3 {
    margin: 0 0 4px;
    color: #23315d;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.student-login-v2-reset-head p {
    margin: 0;
    color: #7c88a2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.student-login-v2-back-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #dde6fb;
    border-radius: 10px;
    background: #f7f9ff;
    color: #4e5ee0;
    cursor: pointer;
    flex: 0 0 34px;
}

.student-login-v2-reset-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.student-login-v2-reset-steps span {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f5ff;
    color: #7b88a8;
    font-size: 11px;
    font-weight: 800;
}

.student-login-v2-reset-steps span.active {
    background: #4d5ce6;
    color: #fff;
}

.student-login-v2-reset-steps span.done {
    background: #ecf7f0;
    color: #19985a;
}

.student-login-v2-form.is-hidden {
    display: none;
}

.student-login-v2-footer-bar {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 28px;
    border-radius: 0 0 24px 24px;
    background: rgba(255, 255, 255, 0.76);
    color: #546889;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 14px 32px rgba(58, 92, 158, 0.06);
}

.student-login-v2-footer-bar span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 1100px) {
    .student-login-v2-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 20px 8px;
    }

    .student-login-v2-showcase {
        min-height: 680px;
    }

    .student-login-v2-panel {
        padding-top: 0;
    }

    .student-login-v2-footer-bar {
        flex-direction: column;
        justify-content: center;
        padding: 14px 18px;
    }
}

@media (max-width: 767px) {
    .student-login-v2-layout {
        min-height: auto;
        padding: 16px 12px 6px;
        border-radius: 24px 24px 0 0;
    }

    .student-login-v2-showcase {
        min-height: 720px;
        padding: 6px 4px 0;
    }

    .student-login-v2-copy {
        margin-top: 34px;
    }

    .student-login-v2-copy h1 {
        font-size: 28px;
    }

    .student-login-v2-copy p {
        font-size: 14px;
    }

    .student-login-v2-instructions-card {
        width: 100%;
        margin-top: 28px;
        padding: 18px 16px 8px;
    }

    .student-login-v2-illustration {
        left: 0;
        right: 0;
        height: 190px;
    }

    .student-login-v2-campus {
        left: 92px;
        width: 146px;
        height: 80px;
    }

    .student-login-v2-tree.left {
        left: 18px;
    }

    .student-login-v2-tree.right {
        left: 244px;
    }

    .student-login-v2-panel {
        padding: 10px 0 16px;
    }

    .student-login-v2-card {
        width: 100%;
        padding: 22px 16px 20px;
        border-radius: 18px;
    }

    .student-login-v2-captcha-row {
        grid-template-columns: 1fr 48px;
    }

    .student-login-v2-captcha-input {
        grid-column: 1 / -1;
    }

    .student-login-v2-field {
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        min-height: 52px;
        padding: 0 10px;
    }

    .student-login-v2-label-row,
    .student-login-v2-row {
        flex-wrap: wrap;
    }

    .student-login-v2-footer-bar {
        width: 100%;
        padding: 14px 14px 16px;
        font-size: 12px;
    }
}


.student-navbar-brand-wrap,
.student-navbar-meta {
    display: flex;
    flex-direction: column;
}

.student-navbar-brand-wrap small,
.student-navbar-meta small,
.student-sidebar-profile-copy small {
    color: #6a789d;
    font-size: 12px;
    font-weight: 700;
}

.student-navbar-meta {
    margin-right: 8px;
    align-items: flex-end;
    text-align: right;
}

.student-dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
    border-radius: 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #0f4c97, #2f77d1 52%, #7fb5ff);
    color: #fff;
    box-shadow: 0 24px 55px rgba(15, 76, 151, 0.22);
}

.student-dashboard-hero-copy h1,
.student-dashboard-hero-copy p,
.student-dashboard-hero-meta strong,
.student-dashboard-hero-meta span {
    color: #fff;
}

.student-dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.student-dashboard-hero-copy h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 40px);
}

.student-dashboard-hero-copy p {
    margin: 0;
    font-size: 15px;
    max-width: 700px;
}

.student-dashboard-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 14px;
    min-width: 320px;
}

.student-dashboard-hero-meta div {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
}

.student-dashboard-hero-meta span {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.student-dashboard-hero-meta strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.student-erp-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.student-erp-mini-card {
    background: #fff;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(36, 58, 107, 0.08);
}

.student-erp-mini-card span {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dcebff, #f4f8ff);
    color: #1256a8;
    font-size: 18px;
    margin-bottom: 14px;
}

.student-erp-mini-card small,
.student-erp-mini-card strong {
    display: block;
}

.student-erp-mini-card small {
    color: #6f7fa6;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.student-erp-mini-card strong {
    color: #13244d;
    font-size: 28px;
    font-weight: 800;
}

.student-ongoing-list,
.student-activity-list {
    display: grid;
    gap: 14px;
}

.student-ongoing-item,
.student-activity-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #f7faff;
    border: 1px solid #e6eefc;
}

.student-ongoing-item strong,
.student-activity-item strong {
    color: #173064;
}

.student-ongoing-item p,
.student-activity-item p {
    margin: 4px 0 0;
    color: #69779e;
    font-size: 13px;
}

.student-ongoing-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #58698f;
    font-weight: 700;
    text-align: right;
}

.student-activity-item {
    align-items: center;
    text-decoration: none;
}

.student-activity-item small {
    display: block;
    color: #7990ba;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    margin-bottom: 5px;
}

.student-activity-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f4c97, #4b90e2);
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.student-dashboard-table-card {
    margin-top: 24px;
}

.student-dashboard-table-wrap,
.student-admission-table-wrap {
    overflow-x: auto;
}

.student-dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.student-dashboard-table th,
.student-dashboard-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8eefb;
    text-align: left;
    white-space: nowrap;
}

.student-dashboard-table th {
    color: #6b7ca6;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.student-dashboard-table td {
    color: #193264;
    font-size: 14px;
    font-weight: 700;
}

.student-dashboard-actions {
    display: flex;
    gap: 12px;
}

.student-dashboard-actions a,
.student-settings-link {
    color: #1554a1;
    font-weight: 800;
    text-decoration: none;
}

.student-admin-sidebar .admin-menu a span {
    margin-left: auto;
}

.student-admin-topbar-search {
    justify-content: flex-start;
    min-width: 0;
}

.student-admin-topbar-welcome strong {
    display: block;
    color: #203567;
    font-size: 15px;
    font-weight: 800;
}

.student-admin-topbar-welcome small {
    display: block;
    margin-top: 3px;
    color: #7a88a5;
    font-size: 11px;
    font-weight: 700;
}

.student-admin-topbar-welcome,
.student-admin-profile-meta {
    min-width: 0;
}

.student-admin-profile-meta strong,
.student-admin-profile-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-admin-topbar-link {
    text-decoration: none;
}

.student-admin-profile-trigger {
    text-align: left;
}

.student-admin-profile-avatar {
    overflow: hidden;
}

.student-admin-profile-avatar img,
.student-navbar-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-admin-profile-meta strong {
    text-transform: none !important;
}

.student-admin-profile-meta small {
    margin-top: 2px;
}

@media (max-width: 1024px) {
    body.admin-dashboard-body {
        overflow-x: hidden;
    }

    .admin-sidebar {
        width: min(86vw, 270px);
    }

    .student-panel-page .student-admission-table-wrap,
    .student-panel-page .fees-v2-table-wrap,
    .student-panel-page .lib-v2-table-wrap,
    .student-panel-page .exm-v2-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .student-panel-page .student-dashboard-table,
    .student-panel-page .fees-v2-table,
    .student-panel-page .lib-v2-table,
    .student-panel-page .exm-v2-table {
        min-width: 680px;
    }

    .notif-v2-tabs,
    .fees-v2-tabbar,
    .lib-v2-tabbar,
    .exm-v2-tabbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }
}

@media (max-width: 767px) {
    .admin-topbar {
        min-height: 58px;
        padding: 0 12px;
        gap: 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .student-admin-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 10px 12px;
        gap: 10px;
    }

    .admin-menu-toggle {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .admin-topbar-left,
    .student-admin-topbar-search,
    .student-admin-topbar-right {
        display: flex;
        align-items: center;
    }

    .admin-topbar-left,
    .student-admin-topbar-right {
        flex: 0 0 auto;
    }

    .student-admin-topbar-search {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .student-admin-topbar-welcome {
        min-width: 0;
    }

    .student-admin-topbar-right {
        gap: 8px;
    }

    .student-admin-topbar-welcome strong {
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .student-admin-topbar-welcome small {
        display: none;
    }

    .student-navbar-wave {
        display: none;
    }

    .admin-topbar-icon-btn {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    .admin-topbar-icon-btn.has-badge span {
        top: -2px;
        right: -4px;
        min-width: 14px;
        height: 14px;
        font-size: 8px;
    }

    .admin-topbar-title strong {
        font-size: 14px;
    }

    .admin-topbar-title small {
        font-size: 10px;
    }

    .student-admin-profile-meta,
    .student-admin-topbar-link {
        display: none;
    }

    .student-navbar-profile {
        display: none;
    }

    .student-admin-profile-trigger {
        gap: 6px;
        padding: 0;
    }

    .student-admin-profile-avatar,
    .admin-profile-avatar {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .student-panel-page {
        overflow-x: hidden;
    }

    .student-panel-page .dash-v2-shell,
    .student-panel-page .fees-v2-shell,
    .student-panel-page .admf-v2-shell,
    .student-panel-page .exm-v2-shell,
    .student-panel-page .lib-v2-shell,
    .student-panel-page .notif-v2-shell {
        padding: 12px;
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    .admin-topbar,
    .student-admin-topbar {
        padding: 8px 10px;
        gap: 8px;
    }

    .student-admin-topbar-welcome strong {
        font-size: 11px;
    }

    .student-admin-topbar-right {
        gap: 6px;
    }
}

.notif-ui-v2 {
    background:
        radial-gradient(circle at top left, rgba(101, 51, 248, 0.06), transparent 30%),
        linear-gradient(180deg, #fbfcff 0%, #f2f5ff 100%);
}

.notif-v2-shell,
.notif-v2-main,
.notif-v2-side,
.notif-v2-feed,
.notif-v2-pref-list {
    display: grid;
    gap: 12px;
}

.notif-v2-page-head h1 {
    margin: 0;
    color: #1c2567;
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    font-weight: 800;
}

.notif-v2-page-head p {
    margin: 4px 0 0;
    color: #647093;
    font-size: 13px;
    font-weight: 700;
}

.notif-v2-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.notif-v2-toolbar,
.notif-v2-tabs,
.notif-v2-item,
.notif-v2-item-title,
.notif-v2-pref-row {
    display: flex;
    align-items: center;
}

.notif-v2-toolbar {
    justify-content: space-between;
    gap: 14px;
}

.notif-v2-tabs {
    gap: 8px;
    flex-wrap: wrap;
}

.notif-v2-tab,
.notif-v2-mark-btn,
.notif-v2-load-btn,
.notif-v2-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #dfe5f4;
    background: #fff;
    color: #42527c;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
}

.notif-v2-tab.active {
    background: linear-gradient(90deg, #6938ff 0%, #5423f1 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(93, 54, 245, 0.2);
}

.notif-v2-tab em {
    margin-left: 6px;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff4e60;
    color: #fff;
    font-style: normal;
    font-size: 8px;
    font-weight: 800;
}

.notif-v2-mark-btn {
    color: #6f40ff;
    gap: 7px;
}

.notif-v2-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e9edff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(52, 68, 119, 0.05);
}

.notif-v2-feed-card {
    overflow: hidden;
}

.notif-v2-item {
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2fb;
    text-decoration: none;
}

.notif-v2-item:last-child {
    border-bottom: 0;
}

.notif-v2-item-icon,
.notif-v2-pref-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    font-size: 12px;
}

.notif-v2-item-icon.violet,
.notif-v2-pref-icon.violet { background: #f2ecff; color: #6a39ff; }
.notif-v2-item-icon.green,
.notif-v2-pref-icon.green { background: #eaf9ef; color: #16b45d; }
.notif-v2-item-icon.blue,
.notif-v2-pref-icon.blue { background: #edf4ff; color: #2677ff; }
.notif-v2-item-icon.orange,
.notif-v2-pref-icon.orange { background: #fff2e6; color: #ff951e; }
.notif-v2-item-icon.pink,
.notif-v2-pref-icon.pink { background: #ffedf5; color: #ec56a7; }
.notif-v2-item-icon.sky,
.notif-v2-pref-icon.sky { background: #edf6ff; color: #3c8dff; }
.notif-v2-item-icon.mint,
.notif-v2-pref-icon.mint { background: #ebfaf2; color: #1bb06d; }
.notif-v2-item-icon.amber,
.notif-v2-pref-icon.amber { background: #fff3e6; color: #ff9b28; }
.notif-v2-pref-icon.indigo { background: #efefff; color: #5f59ff; }
.notif-v2-pref-icon.gray { background: #f2f4fa; color: #8f99b9; }

.notif-v2-item-copy,
.notif-v2-pref-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.notif-v2-item-title {
    gap: 8px;
}

.notif-v2-item-title strong,
.notif-v2-pref-copy strong,
.notif-v2-pref-head h2 {
    color: #24356c;
    font-size: 11px;
    font-weight: 800;
}

.notif-v2-item-copy p,
.notif-v2-pref-copy span,
.notif-v2-pref-head p {
    margin: 4px 0 0;
    color: #6f7ea3;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
}

.notif-v2-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f2ecff;
    color: #7347ff;
    font-size: 8px;
    font-weight: 800;
}

.notif-v2-item-meta {
    min-width: 58px;
    display: grid;
    justify-items: end;
    gap: 14px;
    color: #98a4bf;
    font-size: 8px;
    font-weight: 800;
}

.notif-v2-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ccd3ea;
}

.notif-v2-item-dot.active {
    background: #6938ff;
}

.notif-v2-load {
    padding: 12px 16px 14px;
    text-align: center;
}

.notif-v2-load-btn,
.notif-v2-save-btn {
    min-height: 24px;
    padding: 0 18px;
    color: #657492;
}

.notif-v2-pref-card {
    padding: 14px 14px 12px;
    align-content: start;
}

.notif-v2-pref-head h2 {
    margin: 0;
}

.notif-v2-pref-list {
    margin-top: 8px;
}

.notif-v2-pref-row {
    gap: 10px;
    min-height: 42px;
}

.notif-v2-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.notif-v2-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.notif-v2-switch span {
    width: 20px;
    height: 12px;
    border-radius: 999px;
    background: #cfd7ea;
    position: relative;
}

.notif-v2-switch span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.notif-v2-switch input:checked + span {
    background: #6938ff;
}

.notif-v2-switch input:checked + span::after {
    transform: translateX(8px);
}

.notif-v2-save-btn {
    width: 100%;
    margin-top: 8px;
    min-height: 34px;
    border-color: #cdbdff;
    color: #6434f8;
}

@media (max-width: 1200px) {
    .notif-v2-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .notif-v2-page-head h1 {
        font-size: 24px;
    }

    .notif-v2-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .notif-v2-item {
        align-items: flex-start;
    }
}

.set-ui-v2 {
    background:
        radial-gradient(circle at top left, rgba(101, 51, 248, 0.06), transparent 28%),
        linear-gradient(180deg, #fbfcff 0%, #f2f5ff 100%);
}

.set-v2-shell {
    display: grid;
    gap: 14px;
}

.set-v2-page-head h1 {
    margin: 0;
    color: #1b2366;
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    font-weight: 800;
}

.set-v2-page-head p {
    margin: 4px 0 0;
    color: #5c6795;
    font-size: 13px;
    font-weight: 700;
}

.set-v2-layout {
    display: grid;
    grid-template-columns: minmax(190px, 0.52fr) minmax(0, 1.48fr);
    gap: 10px;
}

.set-v2-layout.set-v2-layout-full {
    grid-template-columns: minmax(0, 1fr);
}

.set-v2-sidebar,
.set-v2-main,
.set-v2-row,
.set-v2-toggle-list,
.set-v2-list,
.set-v2-nav-list,
.set-v2-form-block {
    display: grid;
    gap: 10px;
}

.set-v2-side-item,
.set-v2-card,
.set-v2-bottom-bar {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e9edff;
    box-shadow: 0 10px 28px rgba(52, 68, 119, 0.05);
}

.set-v2-sidebar {
    align-content: start;
}

.set-v2-side-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px;
    border-radius: 18px;
    text-decoration: none;
}

.set-v2-side-item.active {
    background: linear-gradient(180deg, #f8f4ff 0%, #ffffff 100%);
}

.set-v2-side-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7a83aa;
    background: linear-gradient(180deg, #f5efff 0%, #efe9fb 100%);
    flex: 0 0 36px;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.set-v2-side-icon i,
.set-v2-head-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.set-v2-side-item.active .set-v2-side-icon {
    color: #6a39ff;
}

.set-v2-side-item strong,
.set-v2-side-item span {
    display: block;
}

.set-v2-side-item strong {
    color: #24346b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.set-v2-side-item span {
    margin-top: 4px;
    color: #7785a3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.set-v2-main {
    gap: 10px;
}

.set-v2-card,
.set-v2-bottom-bar {
    border-radius: 14px;
}

.set-v2-card {
    padding: 14px;
}

.set-v2-card-top,
.set-v2-card-headline,
.set-v2-list-row,
.set-v2-toggle-row,
.set-v2-select-row,
.set-v2-color-row,
.set-v2-bottom-bar,
.set-v2-bottom-status,
.set-v2-action-stack,
.set-v2-nav-list a,
.set-v2-profile-grid {
    display: flex;
    align-items: center;
}

.set-v2-card-top,
.set-v2-card-headline,
.set-v2-bottom-bar {
    justify-content: space-between;
    gap: 12px;
}

.set-v2-card-top h2,
.set-v2-card-headline h3 {
    margin: 0;
    color: #253670;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.set-v2-card-headline p {
    margin: 3px 0 0;
    color: #7e89a7;
    font-size: 10px;
    font-weight: 700;
}

.set-v2-outline-btn,
.set-v2-mini-btn,
.set-v2-chip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #d8cbff;
    background: #fff;
    color: #6b39ff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.set-v2-profile-grid {
    align-items: flex-start;
    gap: 18px;
    margin-top: 12px;
}

.set-v2-profile-media {
    min-width: 84px;
    display: grid;
    justify-items: center;
    gap: 10px;
}

.set-v2-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(180deg, #7a3dff 0%, #5d28f7 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(95, 53, 247, 0.24);
}

.set-v2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.set-v2-avatar span {
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-weight: 800;
}

.set-v2-avatar-badge {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #f7f3ff;
    color: #6b39ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.set-v2-profile-fields {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
}

.set-v2-info-pair label,
.set-v2-select-row label,
.set-v2-color-row label {
    display: block;
    color: #8994ae;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 3px;
}

.set-v2-info-pair strong {
    display: block;
    color: #20325f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.set-v2-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.set-v2-row-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.set-v2-head-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    font-size: 11px;
}

.set-v2-head-icon.mint { background: #e8fbef; color: #1db565; }
.set-v2-head-icon.indigo { background: #eef1ff; color: #5d34f7; }
.set-v2-head-icon.pink { background: #ffedf6; color: #ef4ea0; }
.set-v2-head-icon.peach { background: #fff1ea; color: #ff8e53; }
.set-v2-head-icon.lavender { background: #f4efff; color: #8a50ff; }

.set-v2-list {
    margin-top: 10px;
}

.set-v2-list-row,
.set-v2-toggle-row,
.set-v2-nav-list a {
    min-height: 34px;
}

.set-v2-list-row,
.set-v2-toggle-row {
    justify-content: space-between;
    gap: 10px;
}

.set-v2-list-row span,
.set-v2-toggle-row strong,
.set-v2-nav-list strong,
.set-v2-bottom-status strong {
    color: #243466;
    font-size: 10px;
    font-weight: 800;
}

.set-v2-toggle-row span,
.set-v2-nav-list small,
.set-v2-bottom-status span {
    display: block;
    margin-top: 2px;
    color: #7b88a5;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
}

.set-v2-status-chip,
.set-v2-nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.set-v2-status-chip.green { background: #e8fbef; color: #18b76a; }
.set-v2-status-chip.soft-green { background: #eef9f2; color: #35a56b; }
.set-v2-nav-pill { background: #f3efff; color: #7b49ff; }

.set-v2-action-stack {
    gap: 8px;
}

.set-v2-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.set-v2-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.set-v2-switch span {
    width: 22px;
    height: 12px;
    border-radius: 999px;
    background: #cfd7ea;
    position: relative;
    transition: background 0.2s ease;
}

.set-v2-switch span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.set-v2-switch input:checked + span {
    background: #6737ff;
}

.set-v2-switch.pink input:checked + span {
    background: #ef4ea0;
}

.set-v2-switch input:checked + span::after {
    transform: translateX(10px);
}

.set-v2-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #24346b;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.set-v2-nav-list {
    margin-top: 10px;
}

.set-v2-nav-list a {
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
}

.set-v2-nav-list a em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6d42ff;
    font-style: normal;
    flex-shrink: 0;
}

.set-v2-form-block {
    margin-top: 10px;
}

.set-v2-select-row,
.set-v2-color-row {
    justify-content: space-between;
    gap: 12px;
}

.set-v2-select-row select {
    min-width: 92px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #dfe5f4;
    border-radius: 8px;
    background: #fff;
    color: #2c3c67;
    font-size: 10px;
    font-weight: 700;
}

.set-v2-color-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.set-v2-color-dots button {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    position: relative;
}

.set-v2-color-dots button.active::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid currentColor;
}

.set-v2-color-dots .violet { background: #6a39ff; color: #6a39ff; }
.set-v2-color-dots .blue { background: #2777ff; color: #2777ff; }
.set-v2-color-dots .green { background: #21c26d; color: #21c26d; }
.set-v2-color-dots .orange { background: #ff9b24; color: #ff9b24; }
.set-v2-color-dots .red { background: #ff5d4f; color: #ff5d4f; }
.set-v2-color-dots .pink { background: #ec57ad; color: #ec57ad; }

.set-v2-toggle-row.simple {
    margin-top: 4px;
}

.set-v2-bottom-bar {
    padding: 12px 14px;
    justify-content: space-between;
    gap: 12px;
}

.set-v2-bottom-status {
    gap: 12px;
}

.set-v2-bottom-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8fbef;
    color: #1ab464;
    flex: 0 0 32px;
}

@media (max-width: 1280px) {
    .set-v2-layout {
        grid-template-columns: 1fr;
    }

    .set-v2-row-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .set-v2-row-two,
    .set-v2-row-three,
    .set-v2-profile-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .set-v2-page-head h1 {
        font-size: 24px;
    }

    .set-v2-profile-grid,
    .set-v2-card-top,
    .set-v2-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .set-v2-outline-btn {
        width: 100%;
    }
}

.student-admission-action-grid,
.student-admission-ongoing-grid,
.student-profile-quick-actions,
.student-profile-documents-grid {
    display: grid;
    gap: 16px;
}

.student-admission-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-admission-action-card,
.student-profile-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #f7faff;
    border: 1px solid #e5eefc;
    color: #173064;
    font-weight: 800;
    text-decoration: none;
}

.student-admission-action-card i,
.student-profile-quick-action i {
    color: #1554a1;
}

.student-admission-ongoing-grid,
.student-profile-documents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-admission-ongoing-card,
.student-profile-document-card {
    padding: 18px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px solid #e5eefb;
}

.student-admission-ongoing-card h3,
.student-profile-document-card strong {
    color: #193264;
}

.student-admission-ongoing-card p,
.student-profile-document-card p {
    color: #6d7da4;
    margin: 8px 0 0;
}

.student-admission-ongoing-meta {
    display: grid;
    gap: 6px;
    margin: 14px 0 18px;
    color: #5d6f98;
    font-size: 13px;
    font-weight: 700;
}

.student-profile-quick-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px 0 24px;
}

.student-profile-document-card label {
    display: block;
    color: #62749b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.student-profile-document-preview {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #eef4ff;
    overflow: hidden;
}

.student-profile-document-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-profile-document-preview span,
.student-profile-document-copy {
    color: #5d6f98;
    font-weight: 700;
}

.set-summary-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.set-summary-bar div {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eef4ff, #ffffff);
    border: 1px solid #e3ebfb;
}

.set-summary-bar span,
.set-card-meta-row span {
    display: block;
    color: #6f7ea6;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.set-summary-bar strong,
.set-card-meta-row strong {
    color: #162f63;
    font-size: 16px;
    font-weight: 800;
}

.set-card-meta-row {
    margin-top: 14px;
}

.set-grid-secondary {
    margin-top: 24px;
}

.lib-badge-red {
    background: #ffe8e8;
    color: #c43d3d;
}

@media (max-width: 1199px) {
    .student-erp-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-dashboard-hero,
    .student-dashboard-hero-meta,
    .student-profile-quick-actions,
    .student-admission-action-grid,
    .student-admission-ongoing-grid,
    .student-profile-documents-grid,
    .set-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-dashboard-hero {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .student-navbar-meta {
        display: none;
    }

    .student-dashboard-hero,
    .student-dashboard-hero-meta,
    .student-erp-card-grid,
    .student-profile-quick-actions,
    .student-admission-action-grid,
    .student-admission-ongoing-grid,
    .student-profile-documents-grid,
    .set-summary-bar {
        grid-template-columns: 1fr;
    }

    .student-ongoing-item,
    .student-activity-item {
        flex-direction: column;
    }

    .student-ongoing-meta {
        text-align: left;
    }
}

.student-sidebar-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fffefe 100%) !important;
    border-right: 1px solid #efe9ff !important;
    box-shadow: 18px 0 40px rgba(98, 62, 205, 0.08) !important;
    padding: 4px 0 16px !important;
    color: #1f2e63;
}

.student-sidebar-card::before,
.student-sidebar-top::after,
.student-sidebar-top::before {
    display: none !important;
}

.student-sidebar-top {
    margin: 0 2px !important;
    padding: 16px 14px 18px !important;
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(255, 212, 76, 0.24), transparent 10%),
        linear-gradient(135deg, #4b49f3 0%, #7438ff 48%, #8b39ff 100%) !important;
    box-shadow: 0 18px 38px rgba(92, 60, 230, 0.3) !important;
    border-radius: 0 0 24px 24px !important;
}

.student-sidebar-brand {
    gap: 12px !important;
    align-items: center !important;
    padding: 0 2px;
}

.student-sidebar-logo {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(35, 18, 120, 0.18) !important;
}

.student-sidebar-logo img {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1);
}

.student-sidebar-brand strong,
.student-sidebar-brand small {
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.student-sidebar-brand strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.student-sidebar-brand small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.92;
}

.student-sidebar-menu {
    padding: 14px 12px 0 !important;
    gap: 6px !important;
}

.student-sidebar-menu > a {
    margin-bottom: 8px;
    min-height: 50px !important;
    border-radius: 16px !important;
    padding: 0 14px !important;
    color: #25356f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffefe 100%) !important;
    border: 1px solid #ece8fb;
    box-shadow: 0 8px 20px rgba(45, 55, 105, 0.04) !important;
    justify-content: flex-start !important;
    position: relative;
}

.student-sidebar-menu-icon {
    width: 34px;
    height: 34px;
    margin-right: 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    background: linear-gradient(180deg, #eff8ff 0%, #eef4ff 100%);
    color: #2a7dff;
}

.student-sidebar-menu > a i {
    font-size: 15px !important;
    width: auto;
    text-align: center;
}

.student-sidebar-menu > a span:last-of-type {
    flex: 1 1 auto;
}

.student-menu-dashboard .student-sidebar-menu-icon { background: linear-gradient(180deg, #f0ebff 0%, #eee8ff 100%); color: #6841ff; }
.student-menu-academic .student-sidebar-menu-icon { background: linear-gradient(180deg, #edf5ff 0%, #eef4ff 100%); color: #2a7dff; }
.student-menu-applications .student-sidebar-menu-icon { background: linear-gradient(180deg, #ecfbf0 0%, #effaf2 100%); color: #20b85f; }
.student-menu-fees .student-sidebar-menu-icon { background: linear-gradient(180deg, #fff5e8 0%, #fff2e8 100%); color: #ff951b; }
.student-menu-exams .student-sidebar-menu-icon { background: linear-gradient(180deg, #eef2ff 0%, #f1f3ff 100%); color: #6756ff; }
.student-menu-library .student-sidebar-menu-icon { background: linear-gradient(180deg, #ffeff9 0%, #fff0fa 100%); color: #ef43b7; }
.student-menu-notifications .student-sidebar-menu-icon { background: linear-gradient(180deg, #eafcff 0%, #ebfbff 100%); color: #17b4d5; }
.student-menu-settings .student-sidebar-menu-icon { background: linear-gradient(180deg, #f2ecff 0%, #f1ebff 100%); color: #7a47ff; }
.student-menu-logout .student-sidebar-menu-icon { background: linear-gradient(180deg, #fff0f4 0%, #ffeef3 100%); color: #ff4d6d; }

.student-sidebar-menu-arrow {
    color: #8b95b5;
    font-style: normal;
    font-size: 12px;
    line-height: 1;
}

.student-sidebar-menu > a.active,
.student-sidebar-menu > a:hover {
    background: linear-gradient(90deg, #5f46ff 0%, #8644ff 100%) !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(122, 76, 255, 0.28) !important;
}

.student-sidebar-menu > a.active .student-sidebar-menu-icon,
.student-sidebar-menu > a:hover .student-sidebar-menu-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.student-sidebar-menu > a.active .student-sidebar-menu-arrow,
.student-sidebar-menu > a:hover .student-sidebar-menu-arrow {
    color: #fff;
}

.student-sidebar-menu-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff5a68, #ff334d);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
}

@media (max-width: 991px) {
    .student-sidebar-card {
        padding-bottom: 20px !important;
    }
}

.student-navbar {
    background: #fff !important;
    border-bottom: 1px solid #edf1f7 !important;
    padding: 14px 26px !important;
    min-height: 72px;
    box-shadow: none !important;
}

.student-navbar-left,
.student-navbar-right {
    gap: 18px !important;
}

.student-navbar-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 0 !important;
    color: #2a3350 !important;
    box-shadow: none !important;
}

.student-navbar-toggle:hover,
.student-navbar-icon:hover,
.student-navbar-profile-trigger:hover {
    background: #f4f7fb !important;
}

.student-navbar-welcome {
    display: flex;
    flex-direction: column;
}

.student-navbar-brand {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1e2a45 !important;
}

.student-navbar-welcome small {
    color: #7d879e;
    font-size: 13px;
    font-weight: 600;
}

.student-navbar-wave {
    font-size: 15px;
}

.student-navbar-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #243150 !important;
    box-shadow: none !important;
}

.student-navbar-icon span {
    top: 5px !important;
    right: 5px !important;
    background: #ff4f67 !important;
}

.student-navbar-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    border-radius: 14px;
    padding: 6px 10px;
    color: #253250;
}

.student-navbar-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #eef3fa !important;
    color: #1f5fd6 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 800;
}

.student-navbar-meta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.student-navbar-meta strong {
    font-size: 14px;
    color: #22304d;
}

.student-navbar-meta small {
    color: #65728d;
    font-size: 12px;
    font-weight: 600;
}

.student-dashboard-page {
    background:
        radial-gradient(circle at top right, rgba(255, 199, 86, 0.18), transparent 22%),
        radial-gradient(circle at top left, rgba(74, 153, 255, 0.18), transparent 24%),
        linear-gradient(180deg, #f7f9ff 0%, #f2f7ff 54%, #eef4ff 100%) !important;
    padding: 14px 18px 10px !important;
    overflow-x: hidden;
}

.student-dashboard-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.student-overview-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #edf2f8;
    box-shadow: 0 12px 28px rgba(34, 53, 94, 0.08);
}

.student-overview-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.student-overview-card h3,
.student-overview-card strong,
.student-overview-card small {
    display: block;
}

.student-overview-card h3 {
    margin: 0 0 6px;
    color: #283452;
    font-size: 12px;
    font-weight: 700;
}

.student-overview-card strong {
    color: #111f3d;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.student-overview-card small {
    color: #7a87a0;
    font-size: 12px;
    font-weight: 600;
}

.student-overview-card.tone-blue { background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 100%); }
.student-overview-card.tone-green { background: linear-gradient(135deg, #ffffff 0%, #e8fbec 100%); }
.student-overview-card.tone-amber { background: linear-gradient(135deg, #fffdf8 0%, #fff0d8 100%); }
.student-overview-card.tone-violet { background: linear-gradient(135deg, #ffffff 0%, #f1e9ff 100%); }
.student-overview-card.tone-pink { background: linear-gradient(135deg, #ffffff 0%, #ffe8f0 100%); }
.student-overview-card.tone-blue .student-overview-icon { background: #eaf2ff; color: #2f80ff; }
.student-overview-card.tone-green .student-overview-icon { background: #e7f8ec; color: #31be67; }
.student-overview-card.tone-amber .student-overview-icon { background: #fff0da; color: #ff9b21; }
.student-overview-card.tone-violet .student-overview-icon { background: #f0e8ff; color: #8652ff; }
.student-overview-card.tone-pink .student-overview-icon { background: #ffe8f0; color: #f55998; }
.student-overview-card.tone-amber strong { color: #ff572f; }

.student-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
    gap: 12px;
}

.student-dashboard-column {
    display: grid;
    gap: 12px;
}

.student-dashboard-widget {
    background: #fff;
    border: 1px solid #edf2f8;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(34, 53, 94, 0.08);
}

.student-dashboard-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.student-dashboard-widget-head h2,
.student-payment-list h3 {
    margin: 0;
    color: #1d2944;
    font-size: 16px;
    font-weight: 800;
}

.student-dashboard-widget-head a {
    color: #2f80ff;
    font-size: 12px;
    font-weight: 700;
}

.student-exam-stack,
.student-dashboard-notify-list {
    display: grid;
    gap: 10px;
}

.student-exam-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: 10px;
    background: #fff;
}

.student-exam-datebox {
    width: 56px;
    border-radius: 12px;
    background: #f4f8ff;
    text-align: center;
    padding: 8px 0;
}

.student-exam-datebox span,
.student-exam-datebox small,
.student-exam-copy strong,
.student-exam-copy small,
.student-exam-copy em {
    display: block;
}

.student-exam-datebox span {
    color: #2c7bff;
    font-size: 20px;
    font-weight: 800;
}

.student-exam-datebox small {
    color: #6c7890;
    font-size: 12px;
    font-weight: 700;
}

.student-exam-copy strong {
    color: #172440;
    font-size: 14px;
    margin-bottom: 4px;
}

.student-exam-copy small {
    color: #7d879c;
    font-size: 12px;
    margin-bottom: 6px;
}

.student-exam-copy em {
    color: #1f6ef1;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.student-chip {
    padding: 4px 9px;
    border-radius: 999px;
    background: #edf4ff;
    color: #2f80ff;
    font-size: 10px;
    font-weight: 800;
}

.student-empty-state {
    color: #7c879e;
    font-size: 13px;
    font-weight: 600;
}

.student-dashboard-notify-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.student-dashboard-notify-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-dashboard-notify-icon.green { background: #e8f9ef; color: #33be68; }
.student-dashboard-notify-icon.purple { background: #f0e8ff; color: #8b59ff; }
.student-dashboard-notify-icon.pink { background: #ffeaf2; color: #ee5d96; }
.student-dashboard-notify-icon.blue { background: #eaf3ff; color: #3081ff; }

.student-dashboard-notify-item strong,
.student-dashboard-notify-item small {
    display: block;
}

.student-dashboard-notify-item strong {
    color: #202d4a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.student-dashboard-notify-item small {
    color: #8693ac;
    font-size: 12px;
    margin-top: 4px;
}

.student-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.student-calendar-nav button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e9edf5;
    background: #fff;
    color: #62718e;
}

.student-calendar-nav span {
    color: #202d49;
    font-size: 13px;
    font-weight: 800;
}

.student-calendar-weekdays,
.student-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.student-calendar-weekdays {
    margin-bottom: 10px;
}

.student-calendar-weekdays span,
.student-calendar-days span {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.student-calendar-weekdays span {
    color: #7f8aa2;
}

.student-calendar-days span {
    color: #273553;
    padding: 8px 0;
    border-radius: 10px;
}

.student-calendar-days span.is-muted {
    color: #b6bfd0;
}

.student-calendar-days span.is-today {
    background: #2f80ff;
    color: #fff;
}

.student-calendar-legend {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    color: #7d879e;
    font-size: 11px;
    font-weight: 700;
}

.student-calendar-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.student-calendar-legend .is-blue { background: #2f80ff; }
.student-calendar-legend .is-red { background: #ff5e68; }
.student-calendar-legend .is-green { background: #30be6c; }

.student-fee-overview-grid {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) minmax(220px, 1fr);
    gap: 14px;
    align-items: center;
}

.student-fee-progress {
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-fee-progress-ring {
    --student-fee-progress: 72;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: conic-gradient(#34c56d calc(var(--student-fee-progress) * 1%), #e9eef5 0);
    display: grid;
    place-items: center;
}

.student-fee-progress-center {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.student-fee-progress-center strong {
    color: #1b2842;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.student-fee-progress-center span {
    color: #7b879d;
    font-size: 13px;
    font-weight: 700;
}

.student-fee-summary {
    display: grid;
    gap: 12px;
}

.student-fee-summary div span,
.student-fee-summary div strong {
    display: block;
}

.student-fee-summary div span {
    color: #7a879f;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.student-fee-summary div strong {
    color: #202d48;
    font-size: 18px;
    font-weight: 800;
}

.student-fee-summary .is-green {
    color: #30be6c;
}

.student-fee-summary .is-red {
    color: #ff5e42;
}

.student-payment-list {
    border-left: 1px solid #eef2f7;
    padding-left: 18px;
}

.student-payment-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}

.student-payment-item:last-child {
    border-bottom: 0;
}

.student-payment-item strong,
.student-payment-item small {
    display: block;
}

.student-payment-item strong {
    color: #1a2741;
    font-size: 14px;
}

.student-payment-item small {
    color: #8090a7;
    font-size: 12px;
    margin-top: 4px;
}

.student-payment-amount {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-payment-amount strong {
    color: #18253f;
    font-size: 14px;
}

.student-payment-amount i {
    color: #30be6c;
}

.student-dashboard-quicklinks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.student-dashboard-quicklinks a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 78px;
    border-radius: 14px;
    text-decoration: none;
    color: #21304d;
    font-size: 12px;
    font-weight: 700;
}

.student-dashboard-quicklinks a i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.student-dashboard-quicklinks .ql-blue { background: #f3f7ff; }
.student-dashboard-quicklinks .ql-green { background: #effbf2; }
.student-dashboard-quicklinks .ql-violet { background: #f3efff; }
.student-dashboard-quicklinks .ql-amber { background: #fff6ea; }
.student-dashboard-quicklinks .ql-pink { background: #fff0f5; }
.student-dashboard-quicklinks .ql-blue i { background: #e5efff; color: #2f80ff; }
.student-dashboard-quicklinks .ql-green i { background: #ddf6e5; color: #31be67; }
.student-dashboard-quicklinks .ql-violet i { background: #ece2ff; color: #8652ff; }
.student-dashboard-quicklinks .ql-amber i { background: #ffeccf; color: #ff9b21; }
.student-dashboard-quicklinks .ql-pink i { background: #ffe1ec; color: #f55998; }

.student-dashboard-footer {
    text-align: center;
    color: #8390a7;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

@media (max-width: 1250px) {
    .student-dashboard-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-fee-overview-grid {
        grid-template-columns: 1fr;
    }

    .student-payment-list {
        border-left: 0;
        border-top: 1px solid #eef2f7;
        padding-left: 0;
        padding-top: 16px;
    }
}

@media (max-width: 992px) {
    .student-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .student-dashboard-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-dashboard-quicklinks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .student-navbar {
        padding: 12px 14px !important;
        min-height: auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .student-navbar-left {
        flex: 1 1 auto;
        min-width: 0;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .student-navbar-welcome {
        min-width: 0;
        flex: 1 1 auto;
        padding-top: 2px;
    }

    .student-navbar-brand {
        display: block;
        font-size: 14px !important;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
    }

    .student-navbar-welcome small {
        display: block;
        font-size: 11px;
        line-height: 1.45;
        margin-top: 2px;
    }

    .student-navbar-right {
        flex: 0 0 auto;
        align-items: center !important;
        gap: 8px !important;
    }

    .student-navbar-profile-trigger {
        padding: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
    }

    .student-navbar-profile-trigger .student-navbar-meta,
    .student-navbar-profile-trigger > .fa-angle-down {
        display: none !important;
    }

    .student-navbar-icon,
    .student-navbar-avatar,
    .student-navbar-toggle {
        width: 38px !important;
        height: 38px !important;
    }

    .student-navbar-notif-menu,
    .student-navbar-profile-menu {
        min-width: 280px !important;
        right: 0 !important;
        left: auto !important;
    }

    .student-dashboard-page {
        padding: 14px !important;
    }

    .student-dashboard-overview {
        grid-template-columns: 1fr;
    }

    .student-exam-card {
        grid-template-columns: 1fr;
    }

    .student-dashboard-quicklinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.student-profile-page {
    background:
        radial-gradient(circle at top left, rgba(47, 128, 255, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.1), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.student-profile-v3-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.student-profile-v3-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-profile-v3-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.22);
}

.student-profile-v3-action.blue { background: linear-gradient(135deg, #1f7bff, #2f80ff); }
.student-profile-v3-action.green { background: linear-gradient(135deg, #19b76c, #34c86e); }
.student-profile-v3-action.orange { background: linear-gradient(135deg, #ff9808, #ffb420); }
.student-profile-v3-action.violet { background: linear-gradient(135deg, #7f49ff, #a855f7); }
.student-profile-v3-action.pink { background: linear-gradient(135deg, #ff4f8f, #ff6380); }

.student-profile-v3-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.student-profile-v3-main {
    display: grid;
    gap: 18px;
}

.student-profile-v3-card,
.student-profile-v3-note,
.student-profile-v3-layout .prof-section-edit {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(204, 217, 240, 0.9);
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(33, 61, 115, 0.08);
    overflow: hidden;
}

.student-profile-v3-head {
    padding: 14px 18px;
    color: #fff;
}

.student-profile-v3-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.student-profile-v3-card.tone-blue .student-profile-v3-head {
    background: linear-gradient(90deg, #1475ff 0%, #3e55ff 100%);
}

.student-profile-v3-card.tone-green .student-profile-v3-head {
    background: linear-gradient(90deg, #19bb67 0%, #43d26d 100%);
}

.student-profile-v3-card.tone-orange .student-profile-v3-head {
    background: linear-gradient(90deg, #ff8f18 0%, #ffbb1b 100%);
}

.student-profile-v3-card.tone-purple .student-profile-v3-head {
    background: linear-gradient(90deg, #7c4dff 0%, #d03bea 100%);
}

.student-profile-v3-grid {
    display: grid;
    gap: 0 24px;
    padding: 12px 18px 16px;
}

.student-profile-v3-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-profile-v3-grid.four-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-profile-v3-grid.compact {
    gap: 0;
}

.student-profile-v3-item {
    display: grid;
    grid-template-columns: 24px minmax(86px, auto) 12px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 58px;
    padding: 10px 2px;
    border-bottom: 1px solid #e7eef9;
}

.student-profile-v3-grid.compact .student-profile-v3-item,
.student-profile-v3-grid.address .student-profile-v3-item {
    grid-template-columns: 24px minmax(0, 1fr);
    align-content: start;
    row-gap: 6px;
    padding: 14px 10px;
    border-bottom: 0;
}

.student-profile-v3-grid.compact .student-profile-v3-item:not(:last-child),
.student-profile-v3-grid.address .student-profile-v3-item:not(:last-child) {
    border-right: 1px solid #e7eef9;
}

.student-profile-v3-grid.compact .student-profile-v3-item strong,
.student-profile-v3-grid.address .student-profile-v3-item strong {
    display: block;
    color: #35507e;
    font-size: 12px;
}

.student-profile-v3-grid.compact .student-profile-v3-item em {
    display: none;
}

.student-profile-v3-grid.compact .student-profile-v3-item span:last-child,
.student-profile-v3-grid.address .student-profile-v3-item span:last-child {
    grid-column: 2;
    color: #20324f;
    font-size: 13px;
    line-height: 1.55;
}

.student-profile-v3-item:last-child,
.student-profile-v3-item:nth-last-child(2) {
    border-bottom-color: transparent;
}

.student-profile-v3-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f7bff;
    font-size: 16px;
}

.student-profile-v3-card.tone-green .student-profile-v3-icon { color: #22b76b; }
.student-profile-v3-card.tone-orange .student-profile-v3-icon { color: #ff8d15; }
.student-profile-v3-card.tone-purple .student-profile-v3-icon { color: #9747ff; }

.student-profile-v3-item strong {
    color: #213b67;
    font-size: 13px;
    font-weight: 800;
}

.student-profile-v3-item em {
    color: #91a0ba;
    font-style: normal;
    text-align: center;
}

.student-profile-v3-item span:last-child {
    color: #21304d;
    font-size: 13px;
    line-height: 1.5;
}

.student-profile-v3-side {
    display: grid;
}

.student-profile-v3-docblock {
    padding: 14px 18px 0;
}

.student-profile-v3-docblock:last-child {
    padding-bottom: 18px;
}

.student-profile-v3-docblock > label {
    display: block;
    margin-bottom: 12px;
    color: #21304d;
    font-size: 13px;
    font-weight: 800;
}

.student-profile-v3-photo-box,
.student-profile-v3-sign-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe8f8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.student-profile-v3-photo-box {
    width: 126px;
    height: 152px;
    margin: 0 auto;
    overflow: hidden;
}

.student-profile-v3-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-profile-v3-photo-box span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #2f80ff;
    font-size: 42px;
    font-weight: 800;
}

.student-profile-v3-sign-box {
    min-height: 92px;
    padding: 10px;
}

.student-profile-v3-sign-box img {
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
}

.student-profile-v3-sign-box span {
    color: #35507e;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 34px;
}

.student-profile-v3-upload-list {
    display: grid;
    gap: 10px;
}

.student-profile-v3-upload-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #dfe8f8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(52, 76, 123, 0.05);
}

.student-profile-v3-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff2f2;
    color: #ff4b4b;
    font-size: 18px;
    flex: 0 0 40px;
}

.student-profile-v3-upload-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.student-profile-v3-upload-copy strong,
.student-profile-v3-upload-copy small {
    display: block;
}

.student-profile-v3-upload-copy strong {
    color: #21304d;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-profile-v3-upload-copy small {
    margin-top: 3px;
    color: #8594ad;
    font-size: 11px;
    font-weight: 700;
}

.student-profile-v3-upload-item button {
    width: 34px;
    height: 34px;
    border: 1px solid #dbe6f8;
    border-radius: 50%;
    background: #f8fbff;
    color: #2f80ff;
    cursor: pointer;
}

.student-profile-v3-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    color: #2f5fae;
    font-size: 13px;
    font-weight: 700;
}

.student-profile-v3-note i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f0ff;
    color: #2f80ff;
    flex: 0 0 28px;
}

.student-profile-v3-note p {
    margin: 0;
    flex: 1 1 auto;
}

.student-profile-v3-layout .prof-section-edit {
    grid-column: 1 / -1;
    padding: 18px;
    border-left: 0;
}

.student-profile-v3-layout .prof-section-title {
    margin-bottom: 18px;
}

.prof-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.prof-step-pill {
    min-height: 38px;
    border: 1px solid #e4e9f8;
    border-radius: 10px;
    background: #fff;
    color: #617295;
    font-size: 12px;
    font-weight: 800;
}

.prof-step-pill.active {
    border-color: #7348ff;
    background: linear-gradient(135deg, #f4efff, #fbf9ff);
    color: #5f34ef;
}

.prof-step-panel[hidden] {
    display: none !important;
}

@media (max-width: 1200px) {
    .student-profile-v3-layout {
        grid-template-columns: 1fr;
    }

    .student-profile-v3-side {
        order: -1;
    }
}

@media (max-width: 991px) {
    .prof-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-profile-v3-grid.two-col,
    .student-profile-v3-grid.four-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-profile-v3-grid.compact .student-profile-v3-item:nth-child(2n),
    .student-profile-v3-grid.address .student-profile-v3-item:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .prof-stepper {
        grid-template-columns: 1fr;
    }

    .student-profile-v3-actions {
        justify-content: stretch;
    }

    .student-profile-v3-action {
        flex: 1 1 calc(50% - 8px);
        min-width: 148px;
        padding: 0 14px;
        font-size: 12px;
    }

    .student-profile-v3-grid.two-col,
    .student-profile-v3-grid.four-col {
        grid-template-columns: 1fr;
    }

    .student-profile-v3-item {
        grid-template-columns: 22px minmax(82px, auto) 10px minmax(0, 1fr);
    }

    .student-profile-v3-grid.compact .student-profile-v3-item,
    .student-profile-v3-grid.address .student-profile-v3-item {
        border-right: 0 !important;
        border-bottom: 1px solid #e7eef9;
    }

    .student-profile-v3-grid.compact .student-profile-v3-item:last-child,
    .student-profile-v3-grid.address .student-profile-v3-item:last-child {
        border-bottom: 0;
    }

    .student-profile-v3-note {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .student-profile-v3-action {
        flex: 1 1 100%;
    }

    .student-profile-v3-head h2 {
        font-size: 16px;
    }

    .student-profile-v3-grid,
    .student-profile-v3-docblock,
    .student-profile-v3-layout .prof-section-edit {
        padding-left: 14px;
        padding-right: 14px;
    }
}

.admf-ui-v2 {
    background:
        radial-gradient(circle at left top, rgba(102, 126, 234, 0.08), transparent 22%),
        linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}

.admf-v2-shell {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e6ecfb;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgba(51, 78, 128, 0.08);
    padding: 18px;
}

.admf-v2-topbar,
.admf-v2-top-actions,
.admf-v2-section-head,
.admf-v2-step,
.admf-v2-progress-item,
.admf-v2-progress-copy,
.admf-v2-doc-item,
.admf-v2-form-actions {
    display: flex;
    align-items: center;
}

.admf-v2-topbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admf-v2-title h1 {
    margin: 0;
    color: #1d2d68;
    font-size: 31px;
    font-weight: 800;
}

.admf-v2-title p {
    margin: 6px 0 0;
    color: #7a88a6;
    font-size: 13px;
    font-weight: 600;
}

.admf-v2-top-actions {
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.admf-v2-btn,
.admf-v2-nav-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #e1e7fb;
    background: #fff;
    color: #5d3df6;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    gap: 8px;
}

.admf-v2-btn.primary,
.admf-v2-nav-btn.primary {
    border-color: transparent;
    background: linear-gradient(90deg, #743df5 0%, #5b2af6 100%);
    color: #fff;
    box-shadow: 0 16px 28px rgba(110, 68, 255, 0.28);
}

.admf-v2-btn.ghost {
    background: #fff;
    color: #6a46ff;
}

.admf-v2-layout {
    display: block;
}

.admf-v2-main,
.admf-v2-side,
.admf-v2-doc-list,
.admf-v2-progress-list {
    display: grid;
    gap: 14px;
}

.admf-v2-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid #e8eefb;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(39, 63, 114, 0.05);
}

.admf-v2-form-selector {
    display: grid;
    grid-template-columns: 104px minmax(0, 1.3fr) minmax(220px, 0.95fr);
    gap: 14px;
    padding: 16px;
}

.admf-v2-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(180deg, #faf6ff 0%, #eef4ff 100%);
}

.admf-v2-clip-board {
    position: relative;
    width: 54px;
    height: 74px;
    border: 3px solid #6658ff;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 24px rgba(97, 79, 228, 0.16);
}

.admf-v2-clip-board .clip-top {
    position: absolute;
    top: -7px;
    left: 12px;
    width: 30px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff5470, #ff7c6a);
}

.admf-v2-clip-board .clip-line {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 4px;
    border-radius: 999px;
    background: #d9e1ff;
}

.admf-v2-clip-board .line-a { top: 18px; }
.admf-v2-clip-board .line-b { top: 31px; }
.admf-v2-clip-board .line-c { top: 44px; }

.admf-v2-clip-board .clip-pencil {
    position: absolute;
    right: -8px;
    bottom: 7px;
    width: 12px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff9258, #ff5c63);
    transform: rotate(35deg);
}

.admf-v2-select-wrap label,
.admf-v2-field label {
    display: block;
    margin-bottom: 8px;
    color: #283b7a;
    font-size: 12px;
    font-weight: 800;
}

.admf-v2-select-wrap label span,
.admf-v2-field label span {
    color: #ff5768;
}

.admf-v2-select-wrap select,
.admf-v2-field input,
.admf-v2-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dfe6fb;
    border-radius: 10px;
    background: #fff;
    color: #283b63;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

.admf-v2-select-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    color: #46598e;
    font-size: 13px;
    font-weight: 600;
}

.admf-v2-hint-box {
    padding: 16px;
    border: 1px solid #dfe8fb;
    border-radius: 12px;
    background: linear-gradient(180deg, #f5f9ff 0%, #edf3ff 100%);
}

.admf-v2-hint-box strong {
    display: block;
    color: #2654e8;
    font-size: 12px;
    font-weight: 800;
}

.admf-v2-hint-box p {
    margin: 10px 0 0;
    color: #6f7fa3;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}

.admf-v2-stepper-card {
    padding: 18px 22px;
}

.admf-v2-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admf-v2-step {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: center;
    position: relative;
}

.admf-v2-step::after {
    content: "";
    position: absolute;
    top: 16px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: #dfe6fb;
}

.admf-v2-step:last-child::after {
    display: none;
}

.admf-v2-step span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #6173a6;
    font-size: 13px;
    font-weight: 800;
}

.admf-v2-step strong {
    color: #4e5f8b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.admf-v2-step.active span {
    background: linear-gradient(180deg, #6c3cff, #5b2af6);
    color: #fff;
    box-shadow: 0 14px 24px rgba(100, 64, 255, 0.28);
}

.admf-v2-step.active strong {
    color: #5d36f8;
}

.admf-v2-form-card {
    padding: 0 0 16px;
}

.admf-v2-section-head {
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf2fc;
}

.admf-v2-section-head h2 {
    margin: 0;
    color: #5d2ffa;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 9px;
}

.admf-v2-section-head small {
    color: #ff5768;
    font-size: 11px;
    font-weight: 700;
}

.admf-v2-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 18px;
}

.admf-v2-field {
    position: relative;
}

.admf-v2-field i {
    position: absolute;
    right: 12px;
    bottom: 13px;
    color: #8897b7;
    font-size: 14px;
}

.admf-v2-field input[readonly],
.admf-v2-field select:disabled {
    background: #fff;
    color: #2a3c67;
    opacity: 1;
}

.admf-v2-form-actions {
    justify-content: space-between;
    padding: 0 18px;
}

.admf-v2-nav-btn.secondary {
    background: #f4f6fc;
    color: #4d5f87;
    border: 1px solid #e4eaf7;
}

.admf-v2-progress-card,
.admf-v2-note-card,
.admf-v2-doc-card,
.admf-v2-table-card {
    padding: 16px;
}

.admf-v2-progress-card h3,
.admf-v2-note-card h3,
.admf-v2-doc-card h3 {
    margin: 0 0 14px;
    color: #22356a;
    font-size: 16px;
    font-weight: 800;
}

.admf-v2-progress-ring {
    width: 120px;
    height: 120px;
    margin: 4px auto 16px;
    border-radius: 50%;
    background: conic-gradient(#21bf7a 0 20%, #edf1f8 20% 100%);
    display: grid;
    place-items: center;
}

.admf-v2-progress-inner {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.admf-v2-progress-inner strong {
    color: #243a72;
    font-size: 24px;
    font-weight: 800;
}

.admf-v2-progress-inner span {
    color: #8a95ad;
    font-size: 11px;
    font-weight: 700;
}

.admf-v2-progress-item {
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf2fb;
}

.admf-v2-progress-item:last-child {
    border-bottom: 0;
}

.admf-v2-progress-copy {
    gap: 10px;
    min-width: 0;
}

.admf-v2-progress-copy span {
    color: #2d3d64;
    font-size: 12px;
    font-weight: 700;
}

.admf-v2-progress-copy i.done {
    color: #1fbe74;
}

.admf-v2-progress-copy i.pending {
    color: #c8d1e6;
}

.admf-v2-progress-item em {
    min-width: 74px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
}

.admf-v2-progress-item em.done {
    background: #e7fbf2;
    color: #18a864;
}

.admf-v2-progress-item em.pending {
    background: #f2f5fb;
    color: #8593af;
}

.admf-v2-note-card {
    background: linear-gradient(180deg, #fffdfa 0%, #fff7e9 100%);
}

.admf-v2-note-card h3 {
    color: #283b67;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admf-v2-note-card h3 i {
    color: #ffb01d;
}

.admf-v2-note-card ul {
    margin: 0;
    padding-left: 18px;
    color: #5e6887;
}

.admf-v2-note-card li {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
}

.admf-v2-doc-card {
    background: linear-gradient(180deg, #fff9fc 0%, #fff3f8 100%);
}

.admf-v2-doc-item {
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0dfeb;
}

.admf-v2-doc-item:last-child {
    border-bottom: 0;
}

.admf-v2-doc-item i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 34px;
}

.admf-v2-doc-item.green i { background: #eaf9f0; color: #1bbe70; }
.admf-v2-doc-item.pink i { background: #ffe8f1; color: #ff5a92; }
.admf-v2-doc-item.orange i { background: #fff1df; color: #ff9e29; }
.admf-v2-doc-item.blue i { background: #ebf3ff; color: #2f80ff; }

.admf-v2-doc-item strong,
.admf-v2-doc-item span {
    display: block;
}

.admf-v2-doc-item strong {
    color: #253863;
    font-size: 12px;
    font-weight: 800;
}

.admf-v2-doc-item span {
    margin-top: 3px;
    color: #7d89a5;
    font-size: 11px;
    font-weight: 700;
}

.admf-v2-table-card .student-admission-table-wrap {
    padding-top: 2px;
}

@media (max-width: 1200px) {
    .admf-v2-form-selector {
        grid-template-columns: 1fr;
    }

    .admf-v2-illustration {
        min-height: 110px;
    }
}

@media (max-width: 991px) {
    .admf-v2-topbar,
    .admf-v2-top-actions,
    .admf-v2-section-head,
    .admf-v2-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .admf-v2-form-grid,
    .admf-v2-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admf-v2-step::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .admf-v2-shell {
        padding: 14px;
    }

    .admf-v2-title h1 {
        font-size: 24px;
    }

    .admf-v2-form-grid,
    .admf-v2-stepper {
        grid-template-columns: 1fr;
    }

    .admf-v2-btn,
    .admf-v2-nav-btn {
        width: 100%;
        justify-content: center;
    }

    .admf-v2-progress-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

.fees-ui-v2 {
    background:
        radial-gradient(circle at top left, rgba(81, 116, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}

.fees-v2-shell {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e8edf9;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgba(49, 76, 124, 0.08);
    padding: 18px;
}

.fees-v2-topbar,
.fees-v2-stat-card,
.fees-v2-card-head,
.fees-v2-receipt-actions,
.fees-v2-summary-grid,
.fees-v2-summary-list div,
.fees-v2-quick-list a,
.fees-v2-form-actions {
    display: flex;
    align-items: center;
}

.fees-v2-topbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.fees-v2-title h1 {
    margin: 0;
    color: #1f2f69;
    font-size: 30px;
    font-weight: 800;
}

.fees-v2-title p {
    margin: 5px 0 0;
    color: #7886a4;
    font-size: 13px;
    font-weight: 600;
}

.fees-v2-top-btn,
.fees-v2-support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(90deg, #6a34f6 0%, #5626f3 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(98, 52, 245, 0.24);
}

.fees-v2-top-btn i {
    width: 18px;
    text-align: center;
}

.fees-v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.fees-v2-stat-card {
    gap: 14px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    background: #fff;
    position: relative;
    box-shadow: 0 10px 24px rgba(40, 64, 111, 0.035);
}

.fees-v2-stat-card.blue { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.fees-v2-stat-card.green { background: linear-gradient(180deg, #f7fffb 0%, #ffffff 100%); }
.fees-v2-stat-card.orange { background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%); }
.fees-v2-stat-card.violet { background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 100%); }

.fees-v2-stat-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex: 0 0 46px;
    line-height: 1;
    box-shadow: 0 10px 18px rgba(40, 64, 111, 0.12);
}

.fees-v2-stat-icon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.32);
}

.fees-v2-stat-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.fees-v2-stat-card.blue .fees-v2-stat-icon { background: linear-gradient(135deg, #3479ff, #2568f3); }
.fees-v2-stat-card.green .fees-v2-stat-icon { background: linear-gradient(135deg, #1fcb7d, #0eae67); }
.fees-v2-stat-card.orange .fees-v2-stat-icon { background: linear-gradient(135deg, #ff9d2e, #ff8a00); }
.fees-v2-stat-card.violet .fees-v2-stat-icon { background: linear-gradient(135deg, #7b4bff, #5b2af6); }

.fees-v2-stat-copy {
    min-width: 0;
}

.fees-v2-stat-card small,
.fees-v2-stat-card span {
    display: block;
}

.fees-v2-stat-card small {
    color: #3a5b96;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
}

.fees-v2-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #1d2d58;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.fees-v2-stat-card span {
    margin-top: 6px;
    color: #5f77a8;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

.fees-v2-stat-card.orange strong {
    color: #ff3f32;
}

.fees-v2-stat-card.orange em {
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: #f9ca9a;
    font-size: 14px;
}

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

.fees-v2-main,
.fees-v2-side,
.fees-v2-quick-list,
.fees-v2-form-grid {
    display: grid;
    gap: 14px;
}

.fees-v2-tabbar {
    display: flex;
    gap: 24px;
    padding: 0 10px;
    margin-bottom: -2px;
}

.fees-v2-tabbar a {
    position: relative;
    padding: 0 0 12px;
    color: #5e6e95;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.fees-v2-tabbar a.active {
    color: #5d2ffa;
}

.fees-v2-tabbar a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d3bff, #5c29f7);
}

.fees-v2-card {
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    border: 1px solid #e8edf9;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(40, 64, 111, 0.05);
    overflow: hidden;
}

.fees-v2-card-head {
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1fa;
}

.fees-v2-card-head h2 {
    margin: 0;
    color: #21356d;
    font-size: 18px;
    font-weight: 800;
}

.fees-v2-card-head small {
    color: #7a88a8;
    font-size: 12px;
    font-weight: 700;
}

.fees-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.fees-v2-table {
    width: 100%;
    border-collapse: collapse;
}

.fees-v2-table th,
.fees-v2-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #eef2fa;
    text-align: left;
    color: #2d3e66;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.fees-v2-table th {
    color: #6e7c9b;
    font-size: 11px;
    font-weight: 800;
    background: #fcfdff;
}

.fees-v2-table tfoot td {
    color: #25386d;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(180deg, #fdfaff 0%, #faf6ff 100%);
}

.fees-v2-table tfoot td.is-green {
    color: #1cb66c;
}

.fees-v2-table tfoot td.is-red {
    color: #ff3f45;
}

.fees-v2-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.fees-v2-status-pill.is-paid {
    background: #e8fbef;
    color: #18b86b;
}

.fees-v2-status-pill.is-partial {
    background: #fff2df;
    color: #ff981d;
}

.fees-v2-status-pill.is-pending {
    background: #ffe7f0;
    color: #ff4d8a;
}

.fees-v2-receipt-actions {
    gap: 8px;
    flex-wrap: wrap;
}

.fees-v2-receipt-actions a {
    text-decoration: none;
}

.fees-v2-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.fees-v2-action-btn i {
    font-size: 12px;
}

.fees-v2-action-btn:hover {
    transform: translateY(-1px);
}

.fees-v2-action-btn.is-view {
    background: #edf3ff;
    border-color: #d8e5ff;
    color: #2f6ff0;
}

.fees-v2-action-btn.is-view:hover {
    box-shadow: 0 10px 18px rgba(47, 111, 240, 0.14);
}

.fees-v2-action-btn.is-pay {
    background: #f1eaff;
    border-color: #ddd0ff;
    color: #6b35f7;
}

.fees-v2-action-btn.is-pay:hover {
    box-shadow: 0 10px 18px rgba(107, 53, 247, 0.16);
}

.fees-v2-action-btn.is-download {
    background: #eafaf1;
    border-color: #cdeedb;
    color: #11a85c;
}

.fees-v2-action-btn.is-download:hover {
    box-shadow: 0 10px 18px rgba(17, 168, 92, 0.14);
}

.fees-v2-inline-pay-form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fees-v2-inline-pay-btn {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #d9ceff;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
    color: #6035f7;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.fees-v2-inline-pay-btn:hover {
    border-color: #c4b2ff;
    box-shadow: 0 10px 18px rgba(95, 53, 247, 0.12);
    transform: translateY(-1px);
}

.fees-v2-inline-pay-note {
    color: #91a0bb;
    font-size: 12px;
    font-weight: 800;
}

.fees-v2-empty,
.fees-v2-empty-cell {
    padding: 18px;
    color: #7684a4;
    font-size: 13px;
    font-weight: 700;
}

.fees-v2-empty-cell {
    text-align: center;
}

.fees-v2-table-footer {
    padding: 16px;
    text-align: center;
}

.fees-v2-table-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    background: #f5f0ff;
    color: #5f33f7;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.fees-v2-summary-card,
.fees-v2-notice-card,
.fees-v2-quick-card,
.fees-v2-help-card {
    padding: 16px;
}

.fees-v2-summary-card h3,
.fees-v2-notice-card h3,
.fees-v2-quick-card h3,
.fees-v2-help-card h3 {
    margin: 0 0 14px;
    color: #223768;
    font-size: 16px;
    font-weight: 800;
}

.fees-v2-summary-grid {
    gap: 16px;
    align-items: center;
}

.fees-v2-summary-list {
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
}

.fees-v2-summary-list div {
    gap: 8px;
    color: #6a7898;
    font-size: 12px;
    font-weight: 700;
}

.fees-v2-summary-list label {
    flex: 1 1 auto;
}

.fees-v2-summary-list strong {
    color: #1f2f5d;
    font-size: 12px;
}

.fees-v2-summary-list .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 8px;
}

.fees-v2-summary-list .dot.green { background: #1ec06c; }
.fees-v2-summary-list .dot.pink { background: #ff5596; }
.fees-v2-summary-list .dot.amber { background: #ffab24; }
.fees-v2-summary-list .dot.blue { background: #2f80ff; }

.fees-v2-notice-card {
    background: linear-gradient(180deg, #fffdfa 0%, #fff7e8 100%);
}

.fees-v2-notice-card h3 i {
    color: #ffaf22;
}

.fees-v2-notice-card p,
.fees-v2-help-card p {
    margin: 0;
    color: #67748f;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

.fees-v2-quick-list a {
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2fa;
    text-decoration: none;
}

.fees-v2-quick-list a:last-child {
    border-bottom: 0;
}

.fees-v2-quick-list a > i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4efff;
    color: #6a39ff;
    flex: 0 0 34px;
}

.fees-v2-quick-list a:nth-child(1) > i {
    background: #eef2ff;
    color: #4a63ff;
}

.fees-v2-quick-list a:nth-child(2) > i {
    background: #f2f7ff;
    color: #2f80ff;
}

.fees-v2-quick-list a:nth-child(3) > i {
    background: #eef8ff;
    color: #4d7cff;
}

.fees-v2-quick-list a:nth-child(4) > i {
    background: #f5ecff;
    color: #8a45ff;
}

.fees-v2-quick-list a div {
    min-width: 0;
    flex: 1 1 auto;
}

.fees-v2-quick-list a strong,
.fees-v2-quick-list a span {
    display: block;
}

.fees-v2-quick-list a strong {
    color: #21335f;
    font-size: 12px;
    font-weight: 800;
}

.fees-v2-quick-list a span {
    margin-top: 3px;
    color: #7b88a5;
    font-size: 11px;
    font-weight: 700;
}

.fees-v2-quick-list a em {
    color: #6b39ff;
    font-style: normal;
}

.fees-v2-help-card {
    background: linear-gradient(180deg, #faf8ff 0%, #f7f4ff 100%);
}

.fees-v2-support-btn {
    margin-top: 14px;
    min-height: 40px;
    padding: 0 16px;
}

.fees-v2-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
}

.fees-v2-pay-option {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ebe8ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #f9f7ff 0%, #f4efff 100%);
}

.fees-v2-pay-option i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a34f6, #5626f3);
    color: #fff;
    font-size: 16px;
    flex: 0 0 38px;
}

.fees-v2-pay-option strong,
.fees-v2-pay-option span {
    display: block;
}

.fees-v2-pay-option strong {
    color: #24376a;
    font-size: 13px;
    font-weight: 800;
}

.fees-v2-pay-option span {
    margin-top: 3px;
    color: #7483a2;
    font-size: 11px;
    font-weight: 700;
}

.fees-v2-field label {
    display: block;
    margin-bottom: 8px;
    color: #2c3f72;
    font-size: 12px;
    font-weight: 800;
}

.fees-v2-field input,
.fees-v2-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dfe6f6;
    border-radius: 10px;
    background: #fff;
    color: #27385f;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.fees-v2-field input[readonly] {
    background: #fafcff;
}

.fees-v2-form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

@media (max-width: 1200px) {
    .fees-v2-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fees-v2-layout,
    .fees-v2-summary-grid {
        grid-template-columns: 1fr;
        display: grid;
    }
}

@media (max-width: 991px) {
    .fees-v2-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .fees-v2-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .fees-v2-shell {
        padding: 14px;
    }

    .fees-v2-title h1 {
        font-size: 24px;
    }

    .fees-v2-stat-grid {
        grid-template-columns: 1fr;
    }

    .fees-v2-tabbar {
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 4px;
        gap: 18px;
    }

    .fees-v2-top-btn,
    .fees-v2-support-btn {
        width: 100%;
    }
}

.exm-ui-v2 {
    background:
        radial-gradient(circle at top left, rgba(96, 114, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}

.exm-v2-shell {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e8edf9;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgba(50, 74, 124, 0.08);
    padding: 18px;
}

.exm-v2-topbar,
.exm-v2-stat-card,
.exm-v2-card-head,
.exm-v2-live-copy,
.exm-v2-live-grid,
.exm-v2-live-head,
.exm-v2-live-action,
.exm-v2-quick-list a,
.exm-v2-calendar-head,
.exm-v2-calendar-legend {
    display: flex;
    align-items: center;
}

.exm-v2-topbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.exm-v2-title h1 {
    margin: 0;
    color: #1f2f69;
    font-size: 31px;
    font-weight: 800;
}

.exm-v2-title p {
    margin: 6px 0 0;
    color: #7482a0;
    font-size: 13px;
    font-weight: 600;
}

.exm-v2-top-btn,
.exm-v2-support-btn,
.exm-v2-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.exm-v2-top-btn,
.exm-v2-support-btn,
.exm-v2-action-btn.primary {
    background: linear-gradient(90deg, #6533f8 0%, #5121ee 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(93, 49, 241, 0.25);
}

.exm-v2-action-btn.secondary {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #d8c8ff;
    background: #fff;
    color: #6a39ff;
}

.exm-v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.exm-v2-stat-card {
    gap: 14px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(40, 64, 111, 0.035);
}

.exm-v2-stat-card.blue { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.exm-v2-stat-card.green { background: linear-gradient(180deg, #f7fffb 0%, #ffffff 100%); }
.exm-v2-stat-card.orange { background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%); }
.exm-v2-stat-card.violet { background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 100%); }

.exm-v2-stat-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex: 0 0 46px;
    box-shadow: 0 10px 18px rgba(40, 64, 111, 0.12);
}

.exm-v2-stat-icon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.32);
}

.exm-v2-stat-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.exm-v2-stat-card.blue .exm-v2-stat-icon { background: linear-gradient(135deg, #3478ff, #2569f2); }
.exm-v2-stat-card.green .exm-v2-stat-icon { background: linear-gradient(135deg, #24cb79, #10b66b); }
.exm-v2-stat-card.orange .exm-v2-stat-icon { background: linear-gradient(135deg, #ff9c26, #ff8a00); }
.exm-v2-stat-card.violet .exm-v2-stat-icon { background: linear-gradient(135deg, #7b49ff, #5c2af6); }

.exm-v2-stat-copy {
    min-width: 0;
}

.exm-v2-stat-card small,
.exm-v2-stat-card span {
    display: block;
}

.exm-v2-stat-card small {
    color: #3a5b96;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
}

.exm-v2-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #1d2d58;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.exm-v2-stat-card span {
    margin-top: 6px;
    color: #5f77a8;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
}

.exm-v2-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.72fr);
    gap: 18px;
}

.exm-v2-main,
.exm-v2-side,
.exm-v2-quick-list,
.exm-v2-live-stats,
.exm-v2-policy-body {
    display: grid;
    gap: 14px;
}

.exm-v2-tabbar {
    display: flex;
    gap: 24px;
    padding: 0 10px;
    margin-bottom: -2px;
}

.exm-v2-tabbar a {
    position: relative;
    padding: 0 0 12px;
    color: #5f6f95;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.exm-v2-tabbar a.active {
    color: #5d2ffa;
}

.exm-v2-tabbar a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d3bff, #5c29f7);
}

.exm-v2-card {
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    border: 1px solid #e8edf9;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(40, 64, 111, 0.05);
    overflow: hidden;
}

.exm-v2-card-head {
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1fa;
}

.exm-v2-card-head h2 {
    margin: 0;
    color: #223567;
    font-size: 18px;
    font-weight: 800;
}

.exm-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.exm-v2-table {
    width: 100%;
    border-collapse: collapse;
}

.exm-v2-table th,
.exm-v2-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #eef2fa;
    text-align: left;
    color: #2c3c63;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.exm-v2-table th {
    color: #73819e;
    font-size: 11px;
    font-weight: 800;
    background: #fcfdff;
}

.exm-v2-empty-cell {
    text-align: center;
    color: #7b88a4;
}

.exm-v2-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exm-v2-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 34px;
}

.exm-v2-title-icon.purple { background: linear-gradient(135deg, #8b46ff, #6a2ef8); }
.exm-v2-title-icon.green { background: linear-gradient(135deg, #27ca7c, #14b96b); }

.exm-v2-table strong,
.exm-v2-table small {
    display: block;
}

.exm-v2-table strong {
    color: #20335d;
    font-size: 12px;
}

.exm-v2-table small {
    margin-top: 4px;
    color: #7a87a2;
    font-size: 10px;
    font-weight: 700;
}

.exm-v2-meta-line {
    display: block;
    color: #5d36f8;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.exm-v2-meta-line i {
    margin-right: 5px;
}

.exm-v2-duration-pill,
.exm-v2-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.exm-v2-duration-pill {
    background: #f2eefe;
    color: #6737f6;
}

.exm-v2-status-pill {
    background: #e8fbef;
    color: #17b369;
}

.exm-v2-live-card {
    padding: 0;
}

.exm-v2-live-head {
    gap: 8px;
    padding: 14px 18px;
    color: #ff8f12;
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid #f5ead6;
    background: linear-gradient(180deg, #fffaf2 0%, #fffdf9 100%);
}

.exm-v2-live-grid {
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
}

.exm-v2-live-copy {
    gap: 12px;
    min-width: 0;
}

.exm-v2-live-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffac21, #ff8b00);
    color: #fff;
    font-size: 18px;
    flex: 0 0 42px;
}

.exm-v2-live-copy strong,
.exm-v2-live-copy span,
.exm-v2-live-copy small {
    display: block;
}

.exm-v2-live-copy strong {
    color: #20345f;
    font-size: 15px;
    font-weight: 800;
}

.exm-v2-live-copy span {
    margin-top: 4px;
    color: #7b88a3;
    font-size: 12px;
    font-weight: 700;
}

.exm-v2-live-copy small {
    margin-top: 8px;
    color: #50607f;
    font-size: 11px;
    font-weight: 700;
}

.exm-v2-live-ring {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: conic-gradient(#ffa21d 0 65%, #ffe8c6 65% 100%);
    display: grid;
    place-items: center;
}

.exm-v2-live-ring > div {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.exm-v2-live-ring strong {
    color: #27365e;
    font-size: 22px;
    font-weight: 800;
}

.exm-v2-live-ring span {
    color: #8a95ad;
    font-size: 11px;
    font-weight: 700;
}

.exm-v2-live-stats div {
    display: flex;
    gap: 8px;
    align-items: center;
}

.exm-v2-live-stats label {
    color: #7a87a4;
    font-size: 11px;
    font-weight: 700;
}

.exm-v2-live-stats strong {
    color: #243860;
    font-size: 12px;
    font-weight: 800;
}

.exm-v2-guide-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) 220px;
    gap: 12px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}

.exm-v2-guide-copy h3 {
    margin: 0 0 12px;
    color: #2850c9;
    font-size: 15px;
    font-weight: 800;
}

.exm-v2-guide-copy ul {
    margin: 0;
    padding-left: 18px;
    color: #51627f;
}

.exm-v2-guide-copy li {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 700;
}

.exm-v2-guide-art {
    position: relative;
    min-height: 120px;
}

.exm-v2-guide-sheet {
    position: absolute;
    right: 36px;
    bottom: 16px;
    width: 92px;
    height: 110px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #dfe7fb;
    box-shadow: 0 16px 28px rgba(61, 97, 170, 0.12);
}

.exm-v2-guide-sheet::before,
.exm-v2-guide-sheet::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 6px;
    border-radius: 999px;
    background: #dfe7fb;
}

.exm-v2-guide-sheet::before {
    top: 22px;
    box-shadow: 0 18px 0 #dfe7fb, 0 36px 0 #dfe7fb;
}

.exm-v2-guide-pencil {
    position: absolute;
    right: 14px;
    bottom: 26px;
    width: 14px;
    height: 86px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff9d57, #ff6373);
    transform: rotate(34deg);
}

.exm-v2-calendar-card,
.exm-v2-quick-card,
.exm-v2-help-card {
    padding: 16px;
}

.exm-v2-calendar-card h3,
.exm-v2-quick-card h3,
.exm-v2-help-card h3 {
    margin: 0 0 14px;
    color: #223768;
    font-size: 16px;
    font-weight: 800;
}

.exm-v2-calendar-head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.exm-v2-calendar-head button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: #f4f7ff;
    color: #5d36f8;
}

.exm-v2-calendar-head strong {
    color: #283b6c;
    font-size: 13px;
    font-weight: 800;
}

.exm-v2-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
}

.exm-v2-calendar-grid span {
    color: #8c96ad;
    font-size: 10px;
    font-weight: 800;
}

.exm-v2-calendar-grid em {
    min-height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5c84;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.exm-v2-calendar-grid em.is-active {
    background: #2f80ff;
    color: #fff;
}

.exm-v2-calendar-grid em.is-green {
    background: #dff7ea;
    color: #18b96c;
}

.exm-v2-calendar-grid em.is-active.is-green {
    background: #2f80ff;
    color: #fff;
    box-shadow: inset 0 -3px 0 #18b96c;
}

.exm-v2-calendar-legend {
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    color: #7f8ca7;
    font-size: 11px;
    font-weight: 700;
}

.exm-v2-calendar-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.exm-v2-calendar-legend .dot.blue { background: #2f80ff; }
.exm-v2-calendar-legend .dot.amber { background: #ffab24; }
.exm-v2-calendar-legend .dot.soft { background: #d7ddef; }

.exm-v2-quick-list a {
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2fa;
    text-decoration: none;
}

.exm-v2-quick-list a:last-child {
    border-bottom: 0;
}

.exm-v2-quick-list a > i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3efff;
    color: #6a39ff;
    flex: 0 0 34px;
}

.exm-v2-quick-list a div {
    min-width: 0;
    flex: 1 1 auto;
}

.exm-v2-quick-list a strong,
.exm-v2-quick-list a span {
    display: block;
}

.exm-v2-quick-list a strong {
    color: #21335f;
    font-size: 12px;
    font-weight: 800;
}

.exm-v2-quick-list a span {
    margin-top: 3px;
    color: #7b88a5;
    font-size: 11px;
    font-weight: 700;
}

.exm-v2-quick-list a em {
    color: #6b39ff;
    font-style: normal;
}

.exm-v2-help-card {
    background: linear-gradient(180deg, #faf8ff 0%, #f7f4ff 100%);
}

.exm-v2-help-card p {
    margin: 0;
    color: #67748f;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

.exm-v2-support-btn {
    margin-top: 14px;
}

@media (max-width: 1200px) {
    .exm-v2-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exm-v2-layout,
    .exm-v2-guide-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .exm-v2-topbar,
    .exm-v2-live-grid {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .exm-v2-shell {
        padding: 14px;
    }

    .exm-v2-title h1 {
        font-size: 24px;
    }

    .exm-v2-stat-grid {
        grid-template-columns: 1fr;
    }

    .exm-v2-tabbar {
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 4px;
        gap: 18px;
    }

    .exm-v2-top-btn,
    .exm-v2-support-btn {
        width: 100%;
    }
}

.lib-ui-v2 {
    background:
        radial-gradient(circle at top left, rgba(104, 121, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}

.lib-v2-shell {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e8edf9;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgba(50, 74, 124, 0.08);
    padding: 18px;
}

.lib-v2-topbar,
.lib-v2-stat-card,
.lib-v2-searchbar,
.lib-v2-side-head,
.lib-v2-borrowed-item,
.lib-v2-quick-list a,
.lib-v2-timing-card {
    display: flex;
    align-items: center;
}

.lib-v2-topbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.lib-v2-title h1 {
    margin: 0;
    color: #1f2f69;
    font-size: 31px;
    font-weight: 800;
}

.lib-v2-title p {
    margin: 6px 0 0;
    color: #7482a0;
    font-size: 13px;
    font-weight: 600;
}

.lib-v2-top-btn,
.lib-v2-search-btn,
.lib-v2-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.lib-v2-top-btn,
.lib-v2-search-btn {
    background: linear-gradient(90deg, #6533f8 0%, #5121ee 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(93, 49, 241, 0.25);
}

.lib-v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.lib-v2-stat-card {
    gap: 14px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(40, 64, 111, 0.035);
}

.lib-v2-stat-card.blue { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.lib-v2-stat-card.green { background: linear-gradient(180deg, #f7fffb 0%, #ffffff 100%); }
.lib-v2-stat-card.orange { background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%); }
.lib-v2-stat-card.pink { background: linear-gradient(180deg, #fff8fc 0%, #ffffff 100%); }
.lib-v2-stat-card.violet { background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 100%); }

.lib-v2-stat-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex: 0 0 46px;
    box-shadow: 0 10px 18px rgba(40, 64, 111, 0.12);
}

.lib-v2-stat-icon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.32);
}

.lib-v2-stat-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.lib-v2-stat-card.blue .lib-v2-stat-icon { background: linear-gradient(135deg, #3478ff, #2569f2); }
.lib-v2-stat-card.green .lib-v2-stat-icon { background: linear-gradient(135deg, #24cb79, #10b66b); }
.lib-v2-stat-card.orange .lib-v2-stat-icon { background: linear-gradient(135deg, #ff9c26, #ff8a00); }
.lib-v2-stat-card.pink .lib-v2-stat-icon { background: linear-gradient(135deg, #f43fb8, #c91ab1); }
.lib-v2-stat-card.violet .lib-v2-stat-icon { background: linear-gradient(135deg, #7b49ff, #5c2af6); }

.lib-v2-stat-copy {
    min-width: 0;
}

.lib-v2-stat-card small,
.lib-v2-stat-card span {
    display: block;
}

.lib-v2-stat-card small {
    color: #3a5b96;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
}

.lib-v2-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #1d2d58;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.lib-v2-stat-card span {
    margin-top: 6px;
    color: #5f77a8;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
}

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

.lib-v2-main,
.lib-v2-side,
.lib-v2-borrowed-list,
.lib-v2-quick-list {
    display: grid;
    gap: 14px;
}

.lib-v2-search-card,
.lib-v2-card {
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    border: 1px solid #e8edf9;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(40, 64, 111, 0.05);
}

.lib-v2-search-card {
    padding: 12px;
}

.lib-v2-searchbar {
    gap: 10px;
}

.lib-v2-search-input {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border: 1px solid #e1e7f8;
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
}

.lib-v2-search-input i {
    color: #8897b4;
    font-size: 13px;
}

.lib-v2-search-input input,
.lib-v2-searchbar select {
    border: 0;
    outline: none;
    background: transparent;
    color: #2a3b61;
    font-size: 13px;
    font-weight: 700;
}

.lib-v2-search-input input {
    width: 100%;
}

.lib-v2-searchbar select {
    min-width: 140px;
    min-height: 42px;
    border: 1px solid #e1e7f8;
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
}

.lib-v2-filter-btn {
    width: 42px;
    height: 42px;
    border: 1px solid #e1e7f8;
    border-radius: 10px;
    background: #fff;
    color: #6533f8;
}

.lib-v2-tabbar {
    display: flex;
    gap: 22px;
    padding: 0 10px;
    margin-bottom: -2px;
    align-items: center;
    flex-wrap: wrap;
}

.lib-v2-tabbar a {
    position: relative;
    padding: 0 0 12px;
    color: #5f6f95;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.lib-v2-tabbar a.active {
    color: #5d2ffa;
}

.lib-v2-tabbar a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d3bff, #5c29f7);
}

.lib-v2-tabbar .right-link {
    margin-left: auto;
    color: #6533f8;
}

.lib-v2-card {
    overflow: hidden;
}

.lib-v2-card-head {
    padding: 16px 18px;
    border-bottom: 1px solid #edf1fa;
}

.lib-v2-card-head h2 {
    margin: 0;
    color: #223567;
    font-size: 18px;
    font-weight: 800;
}

.lib-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.lib-v2-table {
    width: 100%;
    border-collapse: collapse;
}

.lib-v2-table th,
.lib-v2-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #eef2fa;
    text-align: left;
    color: #2c3c63;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lib-v2-table th {
    color: #73819e;
    font-size: 11px;
    font-weight: 800;
    background: #fcfdff;
}

.lib-v2-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lib-v2-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 30px;
    font-size: 13px;
}

.lib-v2-title-icon.book { background: linear-gradient(135deg, #3478ff, #2569f2); }
.lib-v2-title-icon.ebook { background: linear-gradient(135deg, #7b49ff, #5c2af6); }
.lib-v2-title-icon.journal { background: linear-gradient(135deg, #21ca78, #13b86c); }

.lib-v2-table strong,
.lib-v2-table small {
    display: block;
}

.lib-v2-table strong {
    color: #20335d;
    font-size: 12px;
}

.lib-v2-table small {
    margin-top: 4px;
    color: #7a87a2;
    font-size: 10px;
    font-weight: 700;
}

.lib-v2-type-pill,
.lib-v2-status-pill,
.lib-v2-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.lib-v2-type-pill.book { background: #edf3ff; color: #3478ff; }
.lib-v2-type-pill.ebook { background: #f3ecff; color: #7b49ff; }
.lib-v2-type-pill.journal { background: #e8fbef; color: #18b96c; }

.lib-v2-status-pill.available { background: #e8fbef; color: #18b96c; }
.lib-v2-status-pill.issued { background: #fff0df; color: #ff9319; }

.lib-v2-action-btn {
    background: #f4f0ff;
    color: #6533f8;
    text-decoration: none;
}

.lib-v2-table-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 16px;
}

.lib-v2-table-footer span {
    color: #6f7d9b;
    font-size: 12px;
    font-weight: 700;
}

.lib-v2-pagination {
    display: flex;
    gap: 8px;
}

.lib-v2-pagination button {
    min-width: 30px;
    height: 30px;
    border: 1px solid #e2e8f8;
    border-radius: 8px;
    background: #fff;
    color: #607095;
    font-size: 12px;
    font-weight: 800;
}

.lib-v2-pagination button.active {
    background: #6533f8;
    color: #fff;
    border-color: #6533f8;
}

.lib-v2-borrowed-card,
.lib-v2-quick-card,
.lib-v2-timing-card {
    padding: 16px;
}

.lib-v2-side-head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.lib-v2-side-head h3,
.lib-v2-quick-card h3,
.lib-v2-timing-card h3 {
    margin: 0;
    color: #223768;
    font-size: 16px;
    font-weight: 800;
}

.lib-v2-side-head a {
    color: #6533f8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.lib-v2-borrowed-item {
    align-items: flex-start;
    gap: 10px;
}

.lib-v2-borrowed-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 34px;
}

.lib-v2-borrowed-icon.blue { background: linear-gradient(135deg, #3478ff, #2569f2); }
.lib-v2-borrowed-icon.orange { background: linear-gradient(135deg, #ff9c26, #ff8a00); }
.lib-v2-borrowed-icon.green { background: linear-gradient(135deg, #24cb79, #10b66b); }

.lib-v2-borrowed-item div {
    flex: 1 1 auto;
    min-width: 0;
}

.lib-v2-borrowed-item strong,
.lib-v2-borrowed-item small {
    display: block;
}

.lib-v2-borrowed-item strong {
    color: #21335f;
    font-size: 12px;
    font-weight: 800;
}

.lib-v2-borrowed-item small {
    margin-top: 3px;
    color: #7b88a5;
    font-size: 11px;
    font-weight: 700;
}

.lib-v2-borrowed-item em {
    color: #ff8f1d;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
}

.lib-v2-quick-list a {
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2fa;
    text-decoration: none;
}

.lib-v2-quick-list a:last-child {
    border-bottom: 0;
}

.lib-v2-quick-list a > i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3efff;
    color: #6a39ff;
    flex: 0 0 34px;
}

.lib-v2-quick-list a div {
    min-width: 0;
    flex: 1 1 auto;
}

.lib-v2-quick-list a strong,
.lib-v2-quick-list a span {
    display: block;
}

.lib-v2-quick-list a strong {
    color: #21335f;
    font-size: 12px;
    font-weight: 800;
}

.lib-v2-quick-list a span {
    margin-top: 3px;
    color: #7b88a5;
    font-size: 11px;
    font-weight: 700;
}

.lib-v2-quick-list a em {
    color: #6b39ff;
    font-style: normal;
}

.lib-v2-timing-card {
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #faf8ff 0%, #f7f4ff 100%);
}

.lib-v2-timing-copy strong,
.lib-v2-timing-copy span {
    display: block;
}

.lib-v2-timing-copy strong {
    margin-top: 12px;
    color: #223768;
    font-size: 13px;
    font-weight: 800;
}

.lib-v2-timing-copy span {
    margin-top: 6px;
    color: #67748f;
    font-size: 12px;
    font-weight: 700;
}

.lib-v2-timing-art {
    color: #d9d0ff;
    font-size: 56px;
    line-height: 1;
}

@media (max-width: 1200px) {
    .lib-v2-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lib-v2-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .lib-v2-searchbar,
    .lib-v2-table-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .lib-v2-searchbar select,
    .lib-v2-search-btn,
    .lib-v2-filter-btn {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .lib-v2-shell {
        padding: 14px;
    }

    .lib-v2-title h1 {
        font-size: 24px;
    }

    .lib-v2-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .lib-v2-stat-grid {
        grid-template-columns: 1fr;
    }

    .lib-v2-tabbar {
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 4px;
        gap: 18px;
        flex-wrap: nowrap;
    }

    .lib-v2-top-btn {
        width: 100%;
    }
}

.dash-v2-page {
    background:
        radial-gradient(circle at top left, rgba(104, 121, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}

.dash-v2-shell {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e8edf9;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgba(50, 74, 124, 0.08);
    padding: 18px;
}

.dash-v2-stat-grid,
.dash-v2-layout,
.dash-v2-main,
.dash-v2-side,
.dash-v2-course-grid,
.dash-v2-activity-grid,
.dash-v2-attendance {
    display: grid;
    gap: 14px;
}

.dash-v2-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 16px;
}

.dash-v2-stat-card,
.dash-v2-schedule-item,
.dash-v2-announce-item,
.dash-v2-course-top,
.dash-v2-quick-list a,
.dash-v2-upcoming-item {
    display: flex;
    align-items: center;
}

.dash-v2-stat-card {
    gap: 14px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(40, 64, 111, 0.035);
}

.dash-v2-stat-card.purple { background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 100%); }
.dash-v2-stat-card.blue { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.dash-v2-stat-card.green { background: linear-gradient(180deg, #f7fffb 0%, #ffffff 100%); }
.dash-v2-stat-card.orange { background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%); }
.dash-v2-stat-card.pink { background: linear-gradient(180deg, #fff8fc 0%, #ffffff 100%); }

.dash-v2-stat-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex: 0 0 46px;
    box-shadow: 0 10px 18px rgba(40, 64, 111, 0.12);
}

.dash-v2-stat-icon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.32);
}

.dash-v2-stat-card.purple .dash-v2-stat-icon { background: linear-gradient(135deg, #8b45ff, #6a2ef8); }
.dash-v2-stat-card.blue .dash-v2-stat-icon { background: linear-gradient(135deg, #3478ff, #2569f2); }
.dash-v2-stat-card.green .dash-v2-stat-icon { background: linear-gradient(135deg, #24cb79, #10b66b); }
.dash-v2-stat-card.orange .dash-v2-stat-icon { background: linear-gradient(135deg, #ff9c26, #ff8a00); }
.dash-v2-stat-card.pink .dash-v2-stat-icon { background: linear-gradient(135deg, #f43fb8, #c91ab1); }

.dash-v2-stat-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    font-size: 18px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.dash-v2-stat-copy {
    min-width: 0;
}

.dash-v2-stat-card small,
.dash-v2-stat-card span {
    display: block;
}

.dash-v2-stat-card small {
    color: #3a5b96;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
}

.dash-v2-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #1d2d58;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.dash-v2-stat-card span {
    margin-top: 6px;
    color: #ffffff;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
}

.dash-v2-layout {
    grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.72fr);
}

.dash-v2-card {
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    border: 1px solid #e8edf9;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(40, 64, 111, 0.05);
    overflow: hidden;
}

.dash-v2-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1fa;
}

.dash-v2-card-head h2 {
    margin: 0;
    color: #223567;
    font-size: 18px;
    font-weight: 800;
}

.dash-v2-card-head a {
    color: #6533f8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.dash-v2-schedule-list,
.dash-v2-announce-list,
.dash-v2-upcoming-list,
.dash-v2-quick-list {
    display: grid;
}

.dash-v2-schedule-item,
.dash-v2-announce-item,
.dash-v2-upcoming-item,
.dash-v2-quick-list a {
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2fa;
}

.dash-v2-schedule-item:last-child,
.dash-v2-announce-item:last-child,
.dash-v2-upcoming-item:last-child,
.dash-v2-quick-list a:last-child {
    border-bottom: 0;
}

.dash-v2-schedule-time {
    min-width: 46px;
    color: #6533f8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.dash-v2-schedule-copy,
.dash-v2-announce-item div,
.dash-v2-upcoming-item div,
.dash-v2-activity-card div {
    min-width: 0;
    flex: 1 1 auto;
}

.dash-v2-schedule-copy strong,
.dash-v2-schedule-copy small,
.dash-v2-announce-item strong,
.dash-v2-announce-item small,
.dash-v2-announce-item em,
.dash-v2-upcoming-item strong,
.dash-v2-upcoming-item small,
.dash-v2-activity-card strong,
.dash-v2-activity-card small,
.dash-v2-activity-card em {
    display: block;
}

.dash-v2-schedule-copy strong,
.dash-v2-announce-item strong,
.dash-v2-upcoming-item strong,
.dash-v2-activity-card strong {
    color: #20335d;
    font-size: 12px;
    font-weight: 800;
}

.dash-v2-schedule-copy small,
.dash-v2-announce-item small,
.dash-v2-upcoming-item small,
.dash-v2-activity-card small {
    margin-top: 3px;
    color: #7a87a2;
    font-size: 11px;
    font-weight: 700;
}

.dash-v2-announce-item em,
.dash-v2-activity-card em {
    margin-top: 8px;
    color: #8b96ad;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
}

.dash-v2-chip {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.dash-v2-chip.purple { background: #f3ecff; color: #7b49ff; }
.dash-v2-chip.blue { background: #ebf3ff; color: #3478ff; }
.dash-v2-chip.green { background: #e8fbef; color: #18b96c; }
.dash-v2-chip.orange { background: #fff0df; color: #ff9319; }

.dash-v2-announce-icon,
.dash-v2-activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
}

.dash-v2-announce-icon.purple,
.dash-v2-activity-icon.purple { background: #f3ecff; color: #7b49ff; }
.dash-v2-announce-icon.green,
.dash-v2-activity-icon.green { background: #e8fbef; color: #18b96c; }
.dash-v2-announce-icon.orange,
.dash-v2-activity-icon.orange { background: #fff0df; color: #ff9319; }
.dash-v2-announce-icon.blue,
.dash-v2-activity-icon.blue { background: #ebf3ff; color: #3478ff; }

.dash-v2-course-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px;
}

.dash-v2-course-card {
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #edf1fa;
}

.dash-v2-course-card.purple { background: #fcf8ff; }
.dash-v2-course-card.blue { background: #f8fbff; }
.dash-v2-course-card.green { background: #f4fffb; }
.dash-v2-course-card.orange { background: #fff9f2; }

.dash-v2-course-top {
    gap: 10px;
}

.dash-v2-course-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eee8ff;
    color: #6938ff;
    flex: 0 0 32px;
}

.dash-v2-course-top strong,
.dash-v2-course-top small {
    display: block;
}

.dash-v2-course-top strong {
    color: #21335f;
    font-size: 12px;
    font-weight: 800;
}

.dash-v2-course-top small {
    margin-top: 3px;
    color: #7b88a5;
    font-size: 10px;
    font-weight: 700;
}

.dash-v2-course-progress {
    margin-top: 14px;
}

.dash-v2-course-progress div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #72809e;
    font-size: 10px;
    font-weight: 700;
}

.dash-v2-course-progress b {
    display: block;
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7b49ff, #a678ff);
}

.dash-v2-course-card.blue .dash-v2-course-progress b { background: linear-gradient(90deg, #3478ff, #69a4ff); }
.dash-v2-course-card.green .dash-v2-course-progress b { background: linear-gradient(90deg, #24cb79, #68dea6); }
.dash-v2-course-card.orange .dash-v2-course-progress b { background: linear-gradient(90deg, #ff9c26, #ffc06f); }

.dash-v2-activity-grid {
    grid-template-columns: 1fr;
    padding: 16px;
}

.dash-v2-activity-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.dash-v2-quick-list a {
    text-decoration: none;
}

.dash-v2-quick-list a > i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.dash-v2-quick-list a > i.purple { background: #f3ecff; color: #7b49ff; }
.dash-v2-quick-list a > i.green { background: #e8fbef; color: #18b96c; }
.dash-v2-quick-list a > i.orange { background: #fff0df; color: #ff9319; }
.dash-v2-quick-list a > i.blue { background: #ebf3ff; color: #3478ff; }
.dash-v2-quick-list a > i.pink { background: #ffeaf2; color: #ee5d96; }

.dash-v2-quick-list strong,
.dash-v2-quick-list span {
    display: block;
}

.dash-v2-quick-list strong {
    color: #21335f;
    font-size: 12px;
    font-weight: 800;
}

.dash-v2-quick-list span {
    margin-top: 3px;
    color: #7b88a5;
    font-size: 11px;
    font-weight: 700;
}

.dash-v2-quick-list em {
    color: #6b39ff;
    font-style: normal;
}

.dash-v2-upcoming-date {
    width: 52px;
    height: 58px;
    border-radius: 12px;
    background: #f3ecff;
    color: #5f33f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
}

.dash-v2-upcoming-date strong,
.dash-v2-upcoming-date span {
    display: block;
}

.dash-v2-upcoming-date strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.dash-v2-upcoming-date span {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
}

.dash-v2-upcoming-item em {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ebf3ff;
    color: #3478ff;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
}

.dash-v2-attendance {
    grid-template-columns: 120px 1fr;
    padding: 18px;
    align-items: center;
}

.dash-v2-attendance-list {
    display: grid;
    gap: 10px;
}

.dash-v2-attendance-list div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a7898;
    font-size: 12px;
    font-weight: 700;
}

.dash-v2-attendance-list label {
    flex: 1 1 auto;
}

.dash-v2-attendance-list strong {
    color: #1f2f5d;
    font-size: 12px;
}

.dash-v2-attendance-list .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dash-v2-attendance-list .dot.green { background: #1ec06c; }
.dash-v2-attendance-list .dot.red { background: #ff5b66; }
.dash-v2-attendance-list .dot.amber { background: #ffab24; }
.dash-v2-attendance-list .dot.blue { background: #2f80ff; }

.htv2-page {
    background:
        radial-gradient(circle at top left, rgba(118, 92, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #fafcff 0%, #f2f6ff 100%);
}

.htv2-shell {
    display: grid;
    gap: 14px;
}

.htv2-hero {
    min-height: 138px;
    border-radius: 18px;
    padding: 18px 20px;
    background: linear-gradient(90deg, #7b3ff8 0%, #ef2e8a 52%, #ff7148 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(112, 74, 220, 0.2);
}

.htv2-hero::before,
.htv2-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.htv2-hero::before {
    right: 160px;
    top: 18px;
    width: 110px;
    height: 78px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1.3px, transparent 1.6px);
    background-size: 10px 10px;
}

.htv2-hero::after {
    left: -36px;
    bottom: -44px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.htv2-hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.htv2-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.htv2-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}

.htv2-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.htv2-hero-tags span {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.9);
    color: #5f3dde;
    font-size: 11px;
    font-weight: 800;
}

.htv2-hero-art {
    position: relative;
    z-index: 1;
    width: 166px;
    height: 92px;
    flex: 0 0 166px;
}

.htv2-hero-card {
    position: absolute;
    right: 0;
    top: 4px;
    width: 132px;
    height: 82px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7f7ff 0%, #eaf0ff 100%);
    box-shadow: 0 18px 28px rgba(85, 55, 182, 0.28);
}

.htv2-hero-card::before,
.htv2-hero-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 8px;
    border-radius: 999px;
    background: #d8def7;
}

.htv2-hero-card::before {
    top: 20px;
}

.htv2-hero-card::after {
    top: 36px;
}

.htv2-hero-cap {
    position: absolute;
    left: 16px;
    bottom: 8px;
    width: 76px;
    height: 46px;
}

.htv2-hero-cap::before {
    content: "";
    position: absolute;
    inset: 0 8px auto 8px;
    height: 14px;
    background: linear-gradient(180deg, #6d41ff 0%, #4e28d7 100%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.htv2-hero-cap::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 13px;
    width: 28px;
    height: 18px;
    border-radius: 0 0 12px 12px;
    background: #5e34ef;
    box-shadow: 16px -4px 0 -12px #ffc847;
}

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

.htv2-stat-card {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.96);
    border: 1px solid #eaf0ff;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(38, 54, 108, 0.06);
}

.htv2-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex: 0 0 42px;
    position: relative;
}

.htv2-stat-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.htv2-stat-card.purple .htv2-stat-icon { background: linear-gradient(180deg, #b156ff, #8447f5); }
.htv2-stat-card.orange .htv2-stat-icon { background: linear-gradient(180deg, #ffb145, #ff8a1f); }
.htv2-stat-card.blue .htv2-stat-icon { background: linear-gradient(180deg, #68a5ff, #3b7cf5); }
.htv2-stat-card.green .htv2-stat-icon { background: linear-gradient(180deg, #45d39d, #26b373); }

.htv2-stat-card small,
.htv2-stat-card span {
    display: block;
}

.htv2-stat-card small {
    color: #8090ac;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.htv2-stat-card strong {
    display: block;
    margin: 4px 0;
    color: #1f2e5d;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

.htv2-stat-card span {
    color: #7c8ca8;
    font-size: 11px;
    font-weight: 700;
}

.htv2-card {
    background: rgba(255,255,255,0.97);
    border: 1px solid #e8efff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(40, 60, 118, 0.06);
    overflow: hidden;
}

.htv2-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 12px;
}

.htv2-card-head small {
    display: block;
    color: #6c7794;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.htv2-card-head h2 {
    margin: 2px 0 0;
    color: #1b2c5a;
    font-family: "Montserrat", sans-serif;
    font-size: 28px;
    font-weight: 800;
}

.htv2-card-head p {
    margin: 4px 0 0;
    color: #8758ef;
    font-size: 14px;
    font-weight: 700;
}

.htv2-status-pill,
.htv2-inline-status {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eafaf1;
    color: #1ea460;
    font-size: 11px;
    font-weight: 800;
}

.htv2-ticket-grid {
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    gap: 16px;
    padding: 0 18px 18px;
}

.htv2-student-panel {
    position: relative;
    padding: 18px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7faff 0%, #f3f6ff 100%);
    border: 1px solid #edf2ff;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
    overflow: hidden;
}

.htv2-student-pattern {
    position: absolute;
    width: 30px;
    height: 30px;
    background: linear-gradient(180deg, rgba(239, 205, 112, 0.75), rgba(255, 200, 98, 0.2));
    clip-path: polygon(0 35%, 45% 45%, 52% 0, 64% 42%, 100% 56%, 62% 62%, 50% 100%, 40% 66%);
}

.htv2-student-pattern.left {
    left: -6px;
    top: 10px;
}

.htv2-student-pattern.right {
    right: -6px;
    top: 10px;
    background: linear-gradient(180deg, rgba(132, 187, 255, 0.75), rgba(98, 146, 255, 0.2));
}

.htv2-student-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(180deg, #7f6bff 0%, #4f74f0 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 14px 22px rgba(93, 117, 229, 0.22);
}

.htv2-student-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.htv2-student-panel strong {
    color: #1f2e5b;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.htv2-student-panel span {
    color: #a03ddc;
    font-size: 12px;
    font-weight: 700;
}

.htv2-student-panel small {
    color: #7584a1;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

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

.htv2-info-item {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #edf1fb;
    border-radius: 12px;
    background: #fff;
}

.htv2-info-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 28px;
}

.htv2-info-icon.blue { background: #edf2ff; color: #5a76ef; }
.htv2-info-icon.indigo { background: #f1edff; color: #8b5cff; }
.htv2-info-icon.violet { background: #f5efff; color: #8e62ff; }
.htv2-info-icon.amber { background: #fff4e8; color: #f0a12f; }
.htv2-info-icon.pink { background: #ffedf4; color: #ff638d; }
.htv2-info-icon.green { background: #ebfbf1; color: #2db669; }
.htv2-info-icon.mint { background: #ebfaf5; color: #20a569; }

.htv2-info-item small {
    display: block;
    color: #7b89a7;
    font-size: 10px;
    font-weight: 800;
}

.htv2-info-item strong {
    display: block;
    margin-top: 4px;
    color: #20305e;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.htv2-req-block {
    border-top: 1px solid #edf2ff;
    padding: 16px 18px 18px;
}

.htv2-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.htv2-section-title-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.htv2-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf1ff;
    color: #5a76ef;
    font-size: 12px;
}

.htv2-section-title h3 {
    margin: 0;
    color: #23315d;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.htv2-mandatory-pill {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff0f2;
    color: #ef5168;
    font-size: 11px;
    font-weight: 800;
}

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

.htv2-req-item {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.htv2-req-item i {
    color: #1fb25c;
    font-size: 14px;
}

.htv2-req-item span {
    color: #294162;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.htv2-req-item.tone-green {
    background: linear-gradient(90deg, #eefcf5, #edfaff);
    border-color: #ddf2e7;
}

.htv2-req-item.tone-pink {
    background: linear-gradient(90deg, #fdf2f6, #f3f8ff);
    border-color: #f3e1ea;
}

.htv2-req-item.tone-amber {
    background: linear-gradient(90deg, #fff9ea, #fff6f1);
    border-color: #f5ebcf;
}

.htv2-actions {
    padding: 0 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.htv2-action-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.htv2-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(43, 58, 110, 0.08);
}

.htv2-btn.light {
    background: #fff;
    border: 1px solid #e5ebf8;
    color: #2f3f67;
}

.htv2-btn.purple {
    background: linear-gradient(90deg, #6a4dff, #8a45f8);
    color: #fff;
}

.htv2-btn.pink {
    background: linear-gradient(90deg, #ff4e8a, #ef2f8a);
    color: #fff;
}

.htv2-print-note {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: #f7f9ff;
    border: 1px solid #e7ecfb;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #63718f;
    font-size: 11px;
    font-weight: 700;
}

.htv2-print-note i {
    color: #5a76ef;
    font-size: 14px;
}

@media (max-width: 1200px) {
    .htv2-stat-grid,
    .htv2-req-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .htv2-ticket-grid {
        grid-template-columns: 1fr;
    }

    .htv2-student-panel {
        justify-items: start;
        text-align: left;
    }

    .htv2-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .htv2-hero {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .htv2-hero-copy h1,
    .htv2-card-head h2,
    .htv2-section-title h3 {
        font-size: 22px;
    }

    .htv2-hero-art {
        width: 100%;
        height: 70px;
        flex: 0 0 auto;
    }

    .htv2-hero-card {
        right: 8px;
        width: 108px;
        height: 66px;
    }

    .htv2-stat-grid,
    .htv2-req-grid {
        grid-template-columns: 1fr;
    }

    .htv2-card-head,
    .htv2-section-title,
    .htv2-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .htv2-card-head,
    .htv2-ticket-grid,
    .htv2-req-block,
    .htv2-actions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .htv2-action-group {
        width: 100%;
    }

    .htv2-btn,
    .htv2-print-note {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .dash-v2-stat-grid,
    .dash-v2-course-grid,
    .dash-v2-activity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dash-v2-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .dash-v2-stat-grid,
    .dash-v2-course-grid,
    .dash-v2-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-v2-attendance {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .dash-v2-shell {
        padding: 14px;
    }

    .dash-v2-stat-grid,
    .dash-v2-course-grid,
    .dash-v2-activity-grid {
        grid-template-columns: 1fr;
    }
}

.student-dashboard-shell-v3 {
    grid-template-columns: 184px 1fr;
    background: #f6f6fb;
}

.student-dashboard-main-v3 {
    background:
        radial-gradient(circle at top right, rgba(99, 61, 255, 0.06), transparent 24%),
        linear-gradient(180deg, #f9f8ff 0%, #f5f5fb 100%);
}

.student-sidebar-v3 {
    background: linear-gradient(180deg, #5f31ea 0%, #4821d7 52%, #3f1ccf 100%);
    border-right: 0;
    box-shadow: 18px 0 42px rgba(63, 28, 207, 0.18);
    padding: 0 16px 18px;
}

.student-sidebar-v3__profile {
    padding: 34px 8px 20px;
    text-align: center;
    color: #fff;
}

.student-sidebar-v3__avatar {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
    display: grid;
    place-items: center;
    box-shadow: 0 16px 36px rgba(17, 6, 73, 0.28);
}

.student-sidebar-v3__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-sidebar-v3__avatar span {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
}

.student-sidebar-v3__profile h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.student-sidebar-v3__meta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 700;
}

.student-sidebar-v3__menu {
    gap: 10px;
    padding: 4px 0 0;
}

.student-sidebar-v3__menu a {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    box-shadow: none;
}

.student-sidebar-v3__menu a > i:first-child {
    width: 18px;
    color: #fff;
    opacity: 1;
    font-size: 16px;
}

.student-sidebar-v3__menu a.active,
.student-sidebar-v3__menu a:hover {
    background: #fff;
    color: #5930df;
    box-shadow: 0 14px 28px rgba(27, 9, 104, 0.18);
}

.student-sidebar-v3__menu a.active > i:first-child,
.student-sidebar-v3__menu a:hover > i:first-child,
.student-sidebar-v3__menu a.active .student-sidebar-v3__label,
.student-sidebar-v3__menu a:hover .student-sidebar-v3__label {
    color: #5930df;
}

.student-sidebar-v3__label {
    margin-left: 0 !important;
    font-size: 13px;
    font-weight: 700;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}

.student-sidebar-v3__menu a em {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.student-sidebar-v3__menu a.active em,
.student-sidebar-v3__menu a:hover em {
    background: #efe8ff;
    color: #5930df;
}

.student-sidebar-v3__footer {
    margin-top: auto;
    padding: 18px 0 0;
}

.student-sidebar-v3__logout {
    min-height: 50px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.student-sidebar-v3__logout:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 28px rgba(27, 9, 104, 0.18);
}

.student-topbar-v3 {
    min-height: 72px;
    padding: 0 24px 0 28px;
    grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid #ece9f8;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

.student-topbar-v3__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.student-topbar-v3__toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.student-topbar-v3__title strong,
.student-topbar-v3__title small {
    display: block;
}

.student-topbar-v3__title strong {
    color: #18254c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.student-topbar-v3__title small {
    margin-top: 2px;
    color: #8f96ae;
    font-size: 11px;
    font-weight: 700;
}

.student-topbar-v3__actions {
    gap: 18px;
}

.student-topbar-v3__spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.student-topbar-v3__info-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #dbe4f1;
    border-radius: 999px;
    background: #fff;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.student-topbar-v3__info-label {
    color: #64748b;
    font-weight: 700;
}

.student-topbar-v3__notifications,
.student-topbar-v3__menu {
    position: relative;
}

.student-topbar-v3__bell {
    width: 34px;
    height: 34px;
    font-size: 22px;
    color: #1f2b52;
}

.student-topbar-v3__bell.has-badge span {
    top: -1px;
    right: -1px;
    min-width: 15px;
    height: 15px;
    background: #5c35f0;
    font-size: 9px;
}

.student-topbar-v3__portal {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #5b31e9 0%, #6c3dff 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(91, 49, 233, 0.22);
}

.student-topbar-v3__portal:hover {
    color: #fff;
}

.student-topbar-v3__menu {
    top: calc(100% + 14px);
    right: 0;
    width: 320px;
    padding: 0;
    border: 1px solid #ebe7f7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 44px rgba(24, 37, 76, 0.12);
    overflow: hidden;
}

.student-topbar-v3__menu-head {
    padding: 18px 18px 12px;
    border-bottom: 1px solid #f0edf8;
}

.student-topbar-v3__menu-head strong,
.student-topbar-v3__menu-head small,
.student-topbar-v3__menu-item strong,
.student-topbar-v3__menu-item small {
    display: block;
}

.student-topbar-v3__menu-head strong,
.student-topbar-v3__menu-item strong {
    color: #18254c;
    font-size: 14px;
    font-weight: 800;
}

.student-topbar-v3__menu-head small,
.student-topbar-v3__menu-item small,
.student-topbar-v3__menu-empty {
    margin-top: 4px;
    color: #7f86a0;
    font-size: 12px;
    font-weight: 700;
}

.student-topbar-v3__menu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f4f2fa;
    text-decoration: none;
}

.student-topbar-v3__menu-item:last-child {
    border-bottom: 0;
}

.student-topbar-v3__menu-item > span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2ecff;
    color: #6037ee;
    flex: 0 0 36px;
}

.student-topbar-v3__menu-empty {
    padding: 18px;
}

.dashboard-ui-v3-page {
    background: transparent;
    padding: 24px 30px 20px;
}

.student-dashboard-ui-v3 {
    display: grid;
    gap: 22px;
}

.student-dashboard-ui-v3__welcome h1,
.student-dashboard-ui-v3__welcome p {
    margin: 0;
}

.student-dashboard-ui-v3__welcome h1 {
    color: #161f3f;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.student-dashboard-ui-v3__welcome p {
    margin-top: 8px;
    color: #7f869d;
    font-size: 14px;
    font-weight: 700;
}

.student-dashboard-ui-v3__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.student-stat-card-v3,
.student-quick-link-v3,
.student-panel-card-v3,
.student-updates-banner-v3,
.student-dashboard-summary-v3 {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ece9f8;
    box-shadow: 0 14px 32px rgba(30, 41, 87, 0.06);
}

.student-stat-card-v3 {
    min-height: 122px;
    padding: 20px 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.student-stat-card-v3__icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    font-size: 24px;
}

.student-stat-card-v3__icon.is-purple {
    background: linear-gradient(180deg, #f4eeff 0%, #efe8ff 100%);
    color: #6c3af1;
}

.student-stat-card-v3__icon.is-green {
    background: linear-gradient(180deg, #ecfff4 0%, #e3fbeb 100%);
    color: #18ba61;
}

.student-stat-card-v3__icon.is-pink {
    background: linear-gradient(180deg, #ffeef5 0%, #ffe7f1 100%);
    color: #f45295;
}

.student-stat-card-v3__body {
    min-width: 0;
    flex: 1 1 auto;
}

.student-stat-card-v3__body small,
.student-stat-card-v3__body strong,
.student-stat-card-v3__body a {
    display: block;
}

.student-stat-card-v3__body small {
    color: #6f7892;
    font-size: 13px;
    font-weight: 700;
}

.student-stat-card-v3__value-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.student-stat-card-v3__value-row strong {
    color: #151f3f;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    word-break: break-word;
}

.student-stat-card-v3__meta {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7680a1;
    background: #f5f4fb;
}

.student-stat-card-v3__value-row--status {
    justify-content: flex-start;
    gap: 12px;
}

.student-stat-card-v3__status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9da6bf;
    box-shadow: 0 0 0 5px rgba(157, 166, 191, 0.14);
}

.student-stat-card-v3__status-dot.is-approved {
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

.student-stat-card-v3__status-dot.is-pending {
    background: #f59e0b;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.student-stat-card-v3__status-dot.is-rejected {
    background: #ef4444;
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.14);
}

.student-stat-card-v3__value-row strong.is-approved {
    color: #1fbe5d;
}

.student-stat-card-v3__value-row strong.is-pending {
    color: #d98c00;
}

.student-stat-card-v3__value-row strong.is-rejected {
    color: #e03b3b;
}

.student-stat-card-v3__value-row--link a {
    color: #5b31ea;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.student-panel-card-v3 {
    border-radius: 20px;
    overflow: hidden;
}

.student-panel-card-v3__head {
    padding: 18px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-panel-card-v3__head p,
.student-panel-card-v3__title h2 {
    margin: 0;
}

.student-panel-card-v3__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-panel-card-v3__title-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2ecff;
    color: #5d33eb;
}

.student-panel-card-v3__title h2 {
    color: #18254c;
    font-size: 18px;
    font-weight: 800;
}

.student-panel-card-v3__head p {
    color: #8a91a8;
    font-size: 13px;
    font-weight: 700;
}

.student-quick-links-v3 {
    padding: 10px 18px 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.student-quick-link-v3 {
    min-height: 74px;
    padding: 18px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.student-quick-link-v3:hover {
    transform: translateY(-1px);
}

.student-quick-link-v3__icon,
.student-updates-banner-v3__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    font-size: 20px;
}

.student-quick-link-v3__icon.is-purple { background: #f1ecff; color: #6238ec; }
.student-quick-link-v3__icon.is-green { background: #e8fbef; color: #1fbe5d; }
.student-quick-link-v3__icon.is-blue { background: #eaf3ff; color: #2d7df6; }
.student-quick-link-v3__icon.is-orange { background: #fff1df; color: #ff951d; }
.student-quick-link-v3__icon.is-lavender { background: #f3eeff; color: #7a52f8; }
.student-quick-link-v3__icon.is-pink { background: #ffeaf2; color: #f44f90; }

.student-quick-link-v3 strong {
    color: #1b254a;
    font-size: 17px;
    font-weight: 700;
    flex: 1 1 auto;
}

.student-quick-link-v3__arrow {
    color: #222d55;
    font-size: 18px;
}

.student-updates-banner-v3 {
    border-radius: 20px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    background:
        radial-gradient(circle at right center, rgba(108, 61, 255, 0.08), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}

.student-updates-banner-v3__content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.student-updates-banner-v3__icon {
    background: linear-gradient(135deg, #5b31e9 0%, #6d45ff 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(91, 49, 233, 0.22);
}

.student-updates-banner-v3__content h2,
.student-updates-banner-v3__content p {
    margin: 0;
}

.student-updates-banner-v3__content h2 {
    color: #18254c;
    font-size: 18px;
    font-weight: 800;
}

.student-updates-banner-v3__content p {
    margin-top: 6px;
    color: #707991;
    font-size: 14px;
    font-weight: 700;
}

.student-updates-banner-v3__button {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #5b31e9 0%, #6d45ff 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(91, 49, 233, 0.18);
}

.student-updates-banner-v3__button:hover {
    color: #fff;
}

.student-updates-banner-v3__bell {
    position: relative;
    min-width: 112px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6a3df7;
    font-size: 54px;
}

.student-updates-banner-v3__bell-count {
    position: absolute;
    top: 0;
    right: 16px;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5e34ef;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(94, 52, 239, 0.18);
}

.student-dashboard-summary-v3 {
    border-radius: 18px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.student-dashboard-summary-v3 article {
    min-width: 0;
}

.student-dashboard-summary-v3 small,
.student-dashboard-summary-v3 strong {
    display: block;
}

.student-dashboard-summary-v3 small {
    color: #7d859e;
    font-size: 12px;
    font-weight: 700;
}

.student-dashboard-summary-v3 strong {
    margin-top: 7px;
    color: #18254c;
    font-size: 16px;
    font-weight: 800;
}

.student-dashboard-ui-v3__footer {
    text-align: center;
    color: #8f95a9;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 6px;
}

@media (max-width: 1200px) {
    .student-dashboard-shell-v3 {
        grid-template-columns: 168px 1fr;
    }

    .student-dashboard-ui-v3__stats,
    .student-quick-links-v3,
    .student-dashboard-summary-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-updates-banner-v3 {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .student-updates-banner-v3__bell {
        min-width: auto;
    }
}

@media (max-width: 1024px) {
    .student-dashboard-shell-v3 {
        grid-template-columns: 1fr;
    }

    .student-sidebar-v3 {
        padding: 0 14px 18px;
        width: min(310px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .student-topbar-v3 {
        padding: 0 18px;
    }

    .dashboard-ui-v3-page {
        padding: 20px 18px 16px;
    }
}

@media (max-width: 767px) {
    .student-topbar-v3 {
        min-height: 64px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .student-topbar-v3__spacer,
    .student-updates-banner-v3__bell {
        display: none;
    }

    .student-topbar-v3__brand,
    .student-topbar-v3__title {
        min-width: 0;
        flex: 1 1 auto;
    }

    .student-topbar-v3__title strong {
        display: none;
        font-size: 15px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .student-topbar-v3__title small {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .student-topbar-v3__actions {
        gap: 10px;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .student-topbar-v3__portal {
        min-height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 13px;
    }

    .dashboard-ui-v3-page {
        padding: 16px 12px 14px;
    }

    .student-dashboard-ui-v3 {
        gap: 16px;
    }

    .student-dashboard-ui-v3__welcome h1 {
        font-size: 18px;
    }

    .student-dashboard-ui-v3__stats,
    .student-quick-links-v3,
    .student-dashboard-summary-v3 {
        grid-template-columns: 1fr;
    }

    .student-panel-card-v3__head {
        padding: 16px 16px 8px;
        flex-direction: column;
        align-items: flex-start;
    }

    .student-quick-links-v3 {
        padding: 8px 16px 16px;
        gap: 12px;
    }

    .student-quick-link-v3,
    .student-stat-card-v3 {
        padding: 16px;
        min-height: auto;
    }

    .student-quick-link-v3 strong {
        font-size: 15px;
    }

    .student-updates-banner-v3 {
        padding: 18px 16px;
    }

    .student-updates-banner-v3__content {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .student-topbar-v3__brand {
        gap: 8px;
    }

    .student-stat-card-v3__value-row,
    .student-stat-card-v3__value-row--link {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-topbar-v3__menu {
        width: min(320px, calc(100vw - 20px));
    }
}

.student-profile-v3-page {
    background: transparent;
    padding: 18px 16px 18px;
}

.student-profile-v3-shell {
    display: grid;
    gap: 14px;
}

.student-profile-v3-alert {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent;
}

.student-profile-v3-alert.is-success {
    background: #edfdf4;
    border-color: #c7f2d8;
    color: #14854d;
}

.student-profile-v3-alert.is-error {
    background: #fff1f2;
    border-color: #ffd4d8;
    color: #c53047;
}

.student-profile-v3-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ece9f8;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(30, 41, 87, 0.06);
    overflow: hidden;
}

.student-profile-v3-card__head {
    padding: 18px 20px 8px;
}

.student-profile-v3-card__head h1,
.student-profile-v3-card__head h2,
.student-profile-v3-card__head p {
    margin: 0;
}

.student-profile-v3-card__head h1,
.student-profile-v3-card__head h2 {
    color: #1a2548;
    font-size: 18px;
    font-weight: 800;
}

.student-profile-v3-card__head p {
    margin-top: 6px;
    color: #7d859d;
    font-size: 13px;
    font-weight: 700;
}

.student-profile-v3-summary {
    display: grid;
    grid-template-columns: 154px minmax(0, 1fr);
    gap: 18px;
    padding: 14px 18px 18px;
}

.student-profile-v3-summary__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.student-profile-v3-photo {
    width: 138px;
    height: 170px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #f2f2f5 0%, #fbfbfd 100%);
    border: 1px solid #ebebf3;
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.student-profile-v3-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-profile-v3-photo span {
    font-size: 48px;
    font-weight: 800;
    color: #5d33eb;
}

.student-profile-v3-signature {
    width: 138px;
    min-height: 50px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #ece9f8;
    background: linear-gradient(180deg, #fcfcfe 0%, #f5f5fa 100%);
    display: grid;
    place-items: center;
}

.student-profile-v3-signature img {
    max-width: 100%;
    max-height: 30px;
    object-fit: contain;
}

.student-profile-v3-signature span {
    color: #303552;
    font-size: 18px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
}

.student-profile-v3-summary__media small {
    color: #8b92a8;
    font-size: 12px;
    font-weight: 700;
}

.student-profile-v3-summary__details {
    min-width: 0;
}

.student-profile-v3-summary-sections {
    display: grid;
    gap: 16px;
}

.student-profile-v3-summary-section {
    padding: 14px 16px 16px;
    border: 1px solid #eeeaf8;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
}

.student-profile-v3-summary-section h3 {
    margin: 0 0 12px;
    color: #22315f;
    font-size: 14px;
    font-weight: 800;
}

.student-profile-v3-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.student-profile-v3-grid__col {
    min-width: 0;
}

.student-profile-v3-detail {
    min-height: 46px;
    display: grid;
    grid-template-columns: 26px minmax(150px, 1fr) 10px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f0eef8;
}

.student-profile-v3-grid__col .student-profile-v3-detail:last-child {
    border-bottom: 0;
}

.student-profile-v3-detail__icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3ecff;
    color: #6840ef;
    font-size: 11px;
}

.student-profile-v3-detail strong,
.student-profile-v3-detail em,
.student-profile-v3-detail__value {
    font-style: normal;
}

.student-profile-v3-detail strong {
    color: #4b567b;
    font-size: 12px;
    font-weight: 700;
}

.student-profile-v3-detail em {
    color: #7f87a0;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.student-profile-v3-detail__value {
    color: #202b4f;
    font-size: 12px;
    font-weight: 800;
    word-break: break-word;
}

.student-profile-v3-actions {
    padding: 2px 14px 18px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.student-profile-v3-action-card {
    min-height: 170px;
    padding: 18px 14px 14px;
    border-radius: 14px;
    border: 1px solid #ece9f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(30, 41, 87, 0.04);
}

.student-profile-v3-action-card:hover {
    transform: translateY(-1px);
}

.student-profile-v3-action-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 14px 26px rgba(30, 41, 87, 0.16);
}

.student-profile-v3-action-card__icon.is-purple { background: linear-gradient(135deg, #7450ff, #5b31e9); }
.student-profile-v3-action-card__icon.is-green { background: linear-gradient(135deg, #72d97d, #40b657); }
.student-profile-v3-action-card__icon.is-orange { background: linear-gradient(135deg, #ffbe44, #ff9800); }
.student-profile-v3-action-card__icon.is-pink { background: linear-gradient(135deg, #ef68c0, #d941af); }
.student-profile-v3-action-card__icon.is-blue { background: linear-gradient(135deg, #61b8f4, #2f8fdb); }

.student-profile-v3-action-card strong,
.student-profile-v3-action-card p,
.student-profile-v3-action-card__button {
    display: block;
}

.student-profile-v3-action-card strong {
    margin-top: 14px;
    color: #212b50;
    font-size: 16px;
    font-weight: 800;
}

.student-profile-v3-action-card p {
    margin: 10px 0 0;
    color: #7d859d;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.student-profile-v3-action-card__button {
    margin-top: auto;
    width: 100%;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.student-profile-v3-action-card__button.is-purple { background: linear-gradient(135deg, #7450ff, #5b31e9); }
.student-profile-v3-action-card__button.is-green { background: linear-gradient(135deg, #72d97d, #40b657); }
.student-profile-v3-action-card__button.is-orange { background: linear-gradient(135deg, #ffbe44, #ff9800); }
.student-profile-v3-action-card__button.is-pink { background: linear-gradient(135deg, #ef68c0, #d941af); }
.student-profile-v3-action-card__button.is-blue { background: linear-gradient(135deg, #61b8f4, #2f8fdb); }

.student-profile-v3-edit-card {
    padding-bottom: 18px;
}

.student-profile-v3-form {
    padding: 8px 18px 0;
}

.student-profile-v3-form__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.student-profile-v3-field label {
    display: block;
    margin-bottom: 6px;
    color: #49557c;
    font-size: 12px;
    font-weight: 700;
}

.student-profile-v3-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e4e7f3;
    background: #fff;
    color: #1f2a4d;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.student-profile-v3-field input:focus {
    border-color: #6a3df7;
    box-shadow: 0 0 0 3px rgba(106, 61, 247, 0.1);
}

.student-profile-v3-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
}

.student-profile-v3-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #7450ff, #5b31e9);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.student-profile-v3-btn.is-muted {
    background: #eef0f7;
    color: #59637f;
}

.student-profile-v3-otp-card__body {
    padding: 8px 18px 18px;
    display: grid;
    gap: 12px;
}

.student-profile-v3-otp-form,
.student-profile-v3-otp-cancel {
    margin: 0;
}

@media (max-width: 1280px) {
    .student-profile-v3-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-profile-v3-form__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .student-profile-v3-summary {
        grid-template-columns: 1fr;
    }

    .student-profile-v3-summary__media {
        align-items: flex-start;
    }

    .student-profile-v3-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-profile-v3-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .student-profile-v3-page {
        padding: 14px 10px;
    }

    .student-profile-v3-card__head,
    .student-profile-v3-summary,
    .student-profile-v3-form {
        padding-left: 14px;
        padding-right: 14px;
    }

    .student-profile-v3-summary {
        gap: 14px;
    }

    .student-profile-v3-grid,
    .student-profile-v3-actions,
    .student-profile-v3-form__grid {
        grid-template-columns: 1fr;
    }

    .student-profile-v3-detail {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 6px 10px;
        padding: 10px 0;
    }

    .student-profile-v3-detail em {
        display: none;
    }

    .student-profile-v3-detail strong,
    .student-profile-v3-detail__value {
        grid-column: 2;
    }

    .student-profile-v3-detail__icon {
        grid-row: span 2;
        align-self: start;
    }

    .student-profile-v3-action-card {
        min-height: 0;
    }
}

.student-admission-v3-page {
    background: transparent;
    padding: 20px 24px 18px;
}

.student-admission-v3-shell {
    display: grid;
    gap: 18px;
}

.student-admission-v3__intro h1,
.student-admission-v3__intro p {
    margin: 0;
}

.student-admission-v3__intro h1 {
    color: #1a2548;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.student-admission-v3__intro p {
    margin-top: 8px;
    color: #7c859d;
    font-size: 14px;
    font-weight: 700;
}

.student-admission-v3-card,
.student-admission-v3-note {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ece9f8;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(30, 41, 87, 0.06);
}

.student-admission-v3-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
}

.student-admission-v3-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.student-admission-v3-table thead th,
.student-admission-v3-table tbody td {
    padding: 18px 20px;
    text-align: left;
    vertical-align: middle;
}

.student-admission-v3-table thead th {
    background: linear-gradient(180deg, #f7f4ff 0%, #f9f8ff 100%);
    color: #625a9b;
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid #ede8fb;
}

.student-admission-v3-table thead th:first-child {
    border-top-left-radius: 18px;
}

.student-admission-v3-table thead th:last-child {
    border-top-right-radius: 18px;
}

.student-admission-v3-table tbody td {
    color: #51607f;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #f1eef9;
}

.student-admission-v3-table tbody tr:last-child td {
    border-bottom: 0;
}

.student-admission-v3-head-icon {
    width: 40px;
    height: 40px;
    margin-right: 14px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f3edff 0%, #faf8ff 100%);
    color: #5d33eb;
    font-size: 20px;
    vertical-align: middle;
}

.student-admission-v3-course {
    display: flex;
    align-items: center;
    gap: 14px;
}

.student-admission-v3-course__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    font-size: 15px;
}

.student-admission-v3-course__icon.is-purple { background: #f1ecff; color: #5f33eb; }
.student-admission-v3-course__icon.is-green { background: #eafbf0; color: #22b76b; }
.student-admission-v3-course__icon.is-orange { background: #fff1e2; color: #ff9523; }
.student-admission-v3-course__icon.is-blue { background: #e9f3ff; color: #4292f5; }
.student-admission-v3-course__icon.is-pink { background: #ffeaf3; color: #eb5c97; }
.student-admission-v3-course__icon.is-gold { background: #fdf4d9; color: #d4a11b; }

.student-admission-v3-course strong {
    color: #202b4f;
    font-size: 14px;
    font-weight: 800;
}

.student-admission-v3-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #5a6787;
    font-size: 14px;
    font-weight: 700;
}

.student-admission-v3-date i {
    color: #7f87a0;
}

.student-admission-v3-apply-btn {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #d8cdfd;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #5b31ea;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(91, 49, 234, 0.05);
}

.student-admission-v3-apply-btn:hover {
    color: #5b31ea;
    transform: translateY(-1px);
}

.student-admission-v3-note {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at left center, rgba(105, 61, 247, 0.08), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}

.student-admission-v3-note__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ece2ff, #f6f1ff);
    color: #6439ef;
    font-size: 20px;
    flex: 0 0 40px;
}

.student-admission-v3-note strong,
.student-admission-v3-note p {
    display: block;
    margin: 0;
}

.student-admission-v3-note strong {
    color: #212b50;
    font-size: 15px;
    font-weight: 800;
}

.student-admission-v3-note p {
    margin-top: 4px;
    color: #6f7893;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .student-admission-v3-page {
        padding: 18px 18px 16px;
    }
}

@media (max-width: 767px) {
    .student-admission-v3-page {
        padding: 14px 10px;
    }

    .student-admission-v3__intro h1 {
        font-size: 18px;
    }

    .student-admission-v3-note {
        align-items: flex-start;
    }
}

.student-admission-v3-empty {
    text-align: center;
    color: #7c859d;
    font-weight: 700;
}

.student-admission-apply-v3__intro h1,
.student-admission-apply-v3__intro p {
    margin: 0;
}

.student-admission-apply-v3__intro h1 {
    color: #1a2548;
    font-size: 22px;
    font-weight: 800;
}

.student-admission-apply-v3__intro p {
    margin-top: 8px;
    color: #7c859d;
    font-size: 14px;
    font-weight: 700;
}

.student-admission-apply-v3__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.student-admission-apply-v3__step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8b92aa;
    font-size: 12px;
    font-weight: 700;
}

.student-admission-apply-v3__step span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1eef9;
    color: #7f87a0;
    font-size: 11px;
    font-weight: 800;
}

.student-admission-apply-v3__step.is-active {
    color: #4c56a3;
}

.student-admission-apply-v3__step.is-active span {
    background: linear-gradient(135deg, #6a3df7, #5b31ea);
    color: #fff;
}

.student-admission-apply-v3__form,
.student-admission-apply-v3__accordion {
    display: grid;
    gap: 14px;
}

.student-admission-apply-v3__card,
.student-admission-apply-v3__accordion-item {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ece9f8;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(30, 41, 87, 0.05);
}

.student-admission-apply-v3__card-head {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #f0edf8;
}

.student-admission-apply-v3__card-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.student-admission-apply-v3__count {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a3df7, #5b31ea);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.student-admission-apply-v3__card-head h2,
.student-admission-apply-v3__card-head p {
    margin: 0;
}

.student-admission-apply-v3__card-head h2 {
    color: #1e294f;
    font-size: 18px;
    font-weight: 800;
}

.student-admission-apply-v3__card-head p {
    color: #7d859d;
    font-size: 12px;
    font-weight: 700;
}

.student-admission-apply-v3__edit-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbcffc;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #5b31ea;
    font-size: 12px;
    font-weight: 800;
}

.student-admission-apply-v3__profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 18px;
    padding: 18px;
}

.student-admission-apply-v3__profile-main,
.student-admission-apply-v3__section-grid,
.student-admission-apply-v3__detail-grid,
.student-admission-apply-v3__mini-grid,
.student-admission-apply-v3__summary-grid {
    display: grid;
    gap: 14px;
}

.student-admission-apply-v3__profile-main {
    gap: 18px;
}

.student-admission-apply-v3__section {
    border: 1px solid #efeaf9;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

.student-admission-apply-v3__section h3 {
    margin: 0 0 14px;
    color: #28355e;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-admission-apply-v3__detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-admission-apply-v3__section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-admission-apply-v3__mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-admission-apply-v3__detail-grid div,
.student-admission-apply-v3__mini-grid div,
.student-admission-apply-v3__summary-grid div {
    min-width: 0;
}

.student-admission-apply-v3__detail-grid small,
.student-admission-apply-v3__detail-grid strong,
.student-admission-apply-v3__mini-grid small,
.student-admission-apply-v3__mini-grid strong,
.student-admission-apply-v3__summary-grid small,
.student-admission-apply-v3__summary-grid strong {
    display: block;
}

.student-admission-apply-v3__detail-grid small,
.student-admission-apply-v3__mini-grid small,
.student-admission-apply-v3__summary-grid small {
    color: #7b84a0;
    font-size: 11px;
    font-weight: 700;
}

.student-admission-apply-v3__detail-grid strong,
.student-admission-apply-v3__mini-grid strong,
.student-admission-apply-v3__summary-grid strong {
    margin-top: 5px;
    color: #1f2a4e;
    font-size: 12px;
    font-weight: 800;
    word-break: break-word;
}

.student-admission-apply-v3__profile-side {
    display: flex;
}

.student-admission-apply-v3__photo-card {
    width: 100%;
    border: 1px solid #efeaf9;
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.student-admission-apply-v3__photo {
    width: 100%;
    height: 170px;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f8;
    display: grid;
    place-items: center;
}

.student-admission-apply-v3__photo img,
.student-admission-apply-v3__signature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-admission-apply-v3__photo span {
    font-size: 50px;
    font-weight: 800;
    color: #5b31ea;
}

.student-admission-apply-v3__signature {
    width: 100%;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    background: #f8f8fc;
    border: 1px solid #efeaf9;
    display: grid;
    place-items: center;
}

.student-admission-apply-v3__signature span {
    color: #303552;
    font-size: 18px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
}

.student-admission-apply-v3__photo-card small {
    color: #8b92aa;
    font-size: 11px;
    font-weight: 700;
}

.student-admission-apply-v3__qual-wrap {
    overflow-x: auto;
}

.student-admission-apply-v3__qual-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.student-admission-apply-v3__qual-table th,
.student-admission-apply-v3__qual-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #f0edf8;
    text-align: left;
    color: #39486d;
    font-size: 12px;
    font-weight: 700;
}

.student-admission-apply-v3__qual-table th {
    color: #7a82a0;
    font-size: 11px;
    font-weight: 800;
    background: #fbfaff;
}

.student-admission-apply-v3__accordion-item {
    overflow: hidden;
}

.student-admission-apply-v3__accordion-head {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.student-admission-apply-v3__accordion-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.student-admission-apply-v3__accordion-head span:first-child {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a3df7, #5b31ea);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.student-admission-apply-v3__accordion-head strong {
    color: #1f2a4e;
    font-size: 15px;
    font-weight: 800;
}

.student-admission-apply-v3__accordion-head small {
    color: #7d859d;
    font-size: 12px;
    font-weight: 700;
}

.student-admission-apply-v3__accordion-head button,
.student-admission-apply-v3__submitted-pill {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.student-admission-apply-v3__accordion-head button {
    border: 1px solid #dbcffc;
    background: #fff;
    color: #5b31ea;
}

.student-admission-apply-v3__submitted-pill {
    background: #eefcf4;
    color: #169b55;
}

.student-admission-apply-v3__accordion-body,
.student-admission-apply-v3__confirm,
.student-admission-apply-v3__accordion-item .student-admission-apply-v3__summary-grid {
    padding: 0 18px 16px;
}

.student-admission-apply-v3__summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-admission-apply-v3__confirm label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4a577c;
    font-size: 13px;
    font-weight: 700;
}

.student-admission-apply-v3__confirm input {
    width: 16px;
    height: 16px;
}

@media (max-width: 1200px) {
    .student-admission-apply-v3__detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-admission-apply-v3__summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .student-admission-apply-v3__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-admission-apply-v3__profile {
        grid-template-columns: 1fr;
    }

    .student-admission-apply-v3__detail-grid,
    .student-admission-apply-v3__section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .student-admission-apply-v3__steps,
    .student-admission-apply-v3__detail-grid,
    .student-admission-apply-v3__section-grid,
    .student-admission-apply-v3__mini-grid,
    .student-admission-apply-v3__summary-grid {
        grid-template-columns: 1fr;
    }

    .student-admission-apply-v3__card-head,
    .student-admission-apply-v3__accordion-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-admission-apply-v3__profile {
        padding: 14px;
    }
}

.student-exams-v3-page {
    background: transparent;
    padding: 20px 24px 18px;
}

.student-exams-v3-shell {
    display: grid;
    gap: 16px;
}

.student-exams-v3__intro h1,
.student-exams-v3__intro p {
    margin: 0;
}

.student-exams-v3__intro h1 {
    color: #1a2548;
    font-size: 20px;
    font-weight: 800;
}

.student-exams-v3__intro p {
    margin-top: 8px;
    color: #7d859d;
    font-size: 14px;
    font-weight: 700;
}

.student-exams-v3-card,
.student-exams-v3-note {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ece9f8;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(30, 41, 87, 0.06);
}

.student-exams-v3-card__head {
    padding: 14px 16px 8px;
}

.student-exams-v3-card__title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.student-exams-v3-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f3edff 0%, #faf8ff 100%);
    color: #5f33eb;
    font-size: 18px;
    flex: 0 0 36px;
}

.student-exams-v3-card__title h2,
.student-exams-v3-card__title p {
    margin: 0;
}

.student-exams-v3-card__title h2 {
    color: #202b4f;
    font-size: 18px;
    font-weight: 800;
}

.student-exams-v3-card__title p {
    margin-top: 4px;
    color: #7d859d;
    font-size: 12px;
    font-weight: 700;
}

.student-exams-v3-table-wrap {
    overflow-x: auto;
    padding: 0 14px 14px;
}

.student-exams-v3-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 14px;
}

.student-exams-v3-table thead th,
.student-exams-v3-table tbody td {
    padding: 16px 14px;
    text-align: left;
    vertical-align: top;
}

.student-exams-v3-table thead th {
    background: linear-gradient(180deg, #f7f4ff 0%, #fbfaff 100%);
    color: #625a9b;
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid #ede8fb;
}

.student-exams-v3-table tbody td {
    color: #39486d;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #f1eef9;
}

.student-exams-v3-table tbody tr:last-child td {
    border-bottom: 0;
}

.student-exams-v3-table__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2563f6;
    font-size: 13px;
    font-weight: 800;
}

.student-exams-v3-table__meta + .student-exams-v3-table__meta {
    margin-top: 6px;
}

.student-exams-v3-join-btn {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6a3df7, #5b31ea);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(91, 49, 234, 0.18);
}

.student-exams-v3-join-btn:hover {
    color: #fff;
}

.student-exams-v3-soon {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f8;
    color: #7f87a0;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #e3e6ef;
}

.student-exams-v3-status {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.student-exams-v3-status.is-attempted {
    background: #eaf2ff;
    color: #3b82f6;
}

.student-exams-v3-status.is-expired {
    background: #fff0f0;
    color: #ef4444;
}

.student-exams-v3-note {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at left center, rgba(105, 61, 247, 0.08), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}

.student-exams-v3-note__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ece2ff, #f6f1ff);
    color: #6439ef;
    font-size: 20px;
    flex: 0 0 40px;
}

.student-exams-v3-note strong,
.student-exams-v3-note p {
    display: block;
    margin: 0;
}

.student-exams-v3-note strong {
    color: #212b50;
    font-size: 15px;
    font-weight: 800;
}

.student-exams-v3-note p {
    margin-top: 4px;
    color: #6f7893;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .student-exams-v3-page {
        padding: 18px 18px 16px;
    }
}

@media (max-width: 767px) {
    .student-exams-v3-page {
        padding: 14px 10px;
    }

    .student-exams-v3__intro h1 {
        font-size: 18px;
    }

    .student-exams-v3-note {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .student-panel-page .session-table-wrap,
    .student-panel-page .res-table-wrap,
    .student-panel-page .student-exams-v3-table-wrap,
    .student-panel-page .lib-v2-table-wrap,
    .student-panel-page .fees-v2-table-wrap {
        overflow: visible;
        border: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .student-panel-page .session-table.student-report-table,
    .student-panel-page .res-table,
    .student-panel-page .student-exams-v3-table,
    .student-panel-page .lib-v2-table,
    .student-panel-page .fees-v2-table.fees-v2-structure-table,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
    }

    .student-panel-page .session-table.student-report-table thead,
    .student-panel-page .res-table thead,
    .student-panel-page .student-exams-v3-table thead,
    .student-panel-page .lib-v2-table thead,
    .student-panel-page .fees-v2-table.fees-v2-structure-table thead,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table thead {
        display: none;
    }

    .student-panel-page .session-table.student-report-table,
    .student-panel-page .session-table.student-report-table tbody,
    .student-panel-page .session-table.student-report-table tr,
    .student-panel-page .session-table.student-report-table td,
    .student-panel-page .res-table,
    .student-panel-page .res-table tbody,
    .student-panel-page .res-table tr,
    .student-panel-page .res-table td,
    .student-panel-page .student-exams-v3-table,
    .student-panel-page .student-exams-v3-table tbody,
    .student-panel-page .student-exams-v3-table tr,
    .student-panel-page .student-exams-v3-table td,
    .student-panel-page .lib-v2-table,
    .student-panel-page .lib-v2-table tbody,
    .student-panel-page .lib-v2-table tr,
    .student-panel-page .lib-v2-table td,
    .student-panel-page .fees-v2-table.fees-v2-structure-table,
    .student-panel-page .fees-v2-table.fees-v2-structure-table tbody,
    .student-panel-page .fees-v2-table.fees-v2-structure-table tr,
    .student-panel-page .fees-v2-table.fees-v2-structure-table td,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table tbody,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table tr,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table td {
        display: block;
        width: 100%;
    }

    .student-panel-page .session-table.student-report-table tbody,
    .student-panel-page .res-table tbody,
    .student-panel-page .student-exams-v3-table tbody,
    .student-panel-page .lib-v2-table tbody,
    .student-panel-page .fees-v2-table.fees-v2-structure-table tbody,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table tbody {
        display: grid;
        gap: 12px;
    }

    .student-panel-page .session-table.student-report-table tr,
    .student-panel-page .res-table tr,
    .student-panel-page .student-exams-v3-table tr,
    .student-panel-page .lib-v2-table tr,
    .student-panel-page .fees-v2-table.fees-v2-structure-table tr,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table tr {
        background: #fff;
        border: 1px solid #e5eaf6;
        border-radius: 18px;
        padding: 14px 16px;
        box-shadow: 0 12px 28px rgba(33, 50, 91, 0.07);
    }

    .student-panel-page .session-table.student-report-table td,
    .student-panel-page .res-table td,
    .student-panel-page .student-exams-v3-table td,
    .student-panel-page .lib-v2-table td,
    .student-panel-page .fees-v2-table.fees-v2-structure-table td,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table td {
        padding: 10px 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .student-panel-page .session-table.student-report-table td + td,
    .student-panel-page .res-table td + td,
    .student-panel-page .student-exams-v3-table td + td,
    .student-panel-page .lib-v2-table td + td,
    .student-panel-page .fees-v2-table.fees-v2-structure-table td + td,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table td + td {
        border-top: 1px solid #edf1fa;
    }

    .student-panel-page .session-table.student-report-table td::before,
    .student-panel-page .res-table td::before,
    .student-panel-page .student-exams-v3-table td::before,
    .student-panel-page .lib-v2-table td::before,
    .student-panel-page .fees-v2-table.fees-v2-structure-table td::before,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #7080a0;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .student-panel-page .session-table.student-report-table td[colspan]::before,
    .student-panel-page .res-table td[colspan]::before,
    .student-panel-page .student-exams-v3-table td[colspan]::before,
    .student-panel-page .lib-v2-table td[colspan]::before,
    .student-panel-page .fees-v2-table.fees-v2-structure-table td[colspan]::before,
    .student-panel-page .fees-v2-table.fees-v2-payment-history-table td[colspan]::before {
        content: none;
    }

    .student-panel-page .res-cell-status,
    .student-panel-page .fees-v2-receipt-actions,
    .student-panel-page .student-exams-v3-table td:last-child {
        text-align: left;
    }

    .student-panel-page .student-admission-v3-apply-btn,
    .student-panel-page .student-exams-v3-join-btn,
    .student-panel-page .fees-v2-inline-pay-btn,
    .student-panel-page .fees-v2-action-btn,
    .student-panel-page .session-tool-btn,
    .student-panel-page .admin-primary-btn {
        width: 100%;
        justify-content: center;
    }

    .student-panel-page .fees-v2-receipt-actions,
    .student-panel-page .book-form-actions,
    .student-panel-page .student-report-filter-actions,
    .student-panel-page .prof-actions {
        display: grid;
        gap: 10px;
    }

    .student-panel-page .fees-v2-receipt-actions > *,
    .student-panel-page .book-form-actions > *,
    .student-panel-page .student-report-filter-actions > *,
    .student-panel-page .prof-actions > * {
        width: 100%;
    }
}

/* Public website responsive layer */
img {
    max-width: 100%;
}

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

    .about-showcase-card,
    .contact-map-head,
    .staff-toolbar,
    .notification-toolbar {
        grid-template-columns: 1fr;
    }

    .website-header-v2 .header-band {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 14px;
    }

    .website-header-v2 .naac-badge {
        justify-self: start;
    }

    .website-header-v2 .login-stack {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .container {
        width: min(calc(100% - 24px), var(--container));
    }

    .section-space {
        padding: 56px 0;
    }

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

    .site-footer .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer .footer-links-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .site-footer .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-bottom-row {
        min-height: auto;
        padding: 16px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .website-header-v2 .topbar {
        display: none;
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 14px;
    }

    .website-header-v2 .topbar-group,
    .website-header-v2 .topbar-contact,
    .website-header-v2 .topbar-social {
        width: 100%;
        gap: 10px 14px;
    }

    .website-header-v2 .brand-mark {
        width: 84px;
        height: 84px;
    }

    .website-header-v2 .website-menu-toggle {
        display: inline-flex;
    }

    .website-header-v2 .header-band {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .website-header-v2 .brand-copy .hindi {
        font-size: 16px;
    }

    .website-header-v2 .brand-copy .english {
        font-size: 15px;
    }

    .website-header-v2 .naac-badge,
    .website-header-v2 .login-stack,
    .website-header-v2 .main-nav {
        display: none;
    }

    .website-header-v2.is-open .naac-badge {
        display: flex;
        width: min(180px, 100%);
        justify-self: start;
    }

    .website-header-v2.is-open .login-stack {
        display: grid;
        width: 100%;
        grid-column: 1 / -1;
    }

    .website-header-v2.is-open .main-nav {
        display: grid;
        overflow: hidden;
        min-height: 0;
        padding: 0;
    }

    .website-header-v2.is-open .main-nav > a,
    .website-header-v2.is-open .main-nav .nav-dropdown > a {
        min-height: 42px;
        width: 100%;
        justify-content: space-between;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .website-header-v2.is-open .main-nav .nav-dropdown {
        display: block;
        width: 100%;
    }

    .website-header-v2.is-open .main-nav .dropdown-menu {
        position: static;
        min-width: 0;
        display: grid;
        gap: 0;
        padding: 4px 0 8px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .website-header-v2.is-open .main-nav .dropdown-menu a {
        color: #fff;
        border-radius: 0;
        padding: 10px 12px;
    }

    .website-header-v2.is-open .main-nav .dropdown-menu a.active,
    .website-header-v2.is-open .main-nav .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .notification-toolbar,
    .gallery-options,
    .staff-tabs,
    .staff-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .notification-search,
    .staff-search {
        width: 100%;
    }

    .contact-card-grid,
    .staff-grid,
    .about-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .notification-page-shell,
    .contact-page-shell,
    .gallery-page-shell,
    .staff-page-shell {
        width: min(calc(100% - 24px), 100%);
    }

    .notification-board,
    .gallery-board,
    .staff-board {
        padding: 16px;
    }
}

@media (max-width: 767px) {
    .container {
        width: min(calc(100% - 20px), var(--container));
    }

    .section-space {
        padding: 44px 0;
    }

    .page-shell {
        overflow-x: hidden;
    }

    .footer-grid,
    .contact-card-grid,
    .gallery-grid,
    .staff-grid,
    .about-stat-grid {
        grid-template-columns: 1fr;
    }

    .site-footer .footer-main,
    .site-footer .newsletter-row,
    .site-footer .contact-grid {
        grid-template-columns: 1fr;
    }

    .website-header-v2 .topbar a,
    .website-header-v2 .topbar span {
        white-space: normal;
    }

    .website-header-v2 .brand-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .website-header-v2 .brand-mark {
        width: 72px;
        height: 72px;
    }

    .website-header-v2 .brand-copy .hindi {
        font-size: 14px;
    }

    .website-header-v2 .brand-copy .english {
        font-size: 13px;
    }

    .website-header-v2 .brand-copy .sub,
    .website-header-v2 .brand-copy .meta {
        font-size: 11px;
    }

    .website-header-v2 .header-band {
        padding: 10px 12px;
    }

    .website-header-v2.is-open .login-stack {
        grid-template-columns: 1fr;
    }

    .website-header-v2.is-open .main-nav > a,
    .website-header-v2.is-open .main-nav .nav-dropdown > a {
        padding: 0 12px;
        font-size: 10px;
    }

    .about-showcase-card,
    .contact-page-hero,
    .gallery-hero,
    .staff-hero,
    .notification-page-head,
    .contact-map-head,
    .staff-toolbar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .notification-board,
    .contact-map-card,
    .gallery-board,
    .staff-board,
    .about-showcase-card {
        border-radius: 16px;
    }

    .notification-table-wrap,
    .contact-map-frame,
    .gallery-grid,
    .staff-grid {
        overflow-x: auto;
    }

    .notification-table {
        min-width: 720px;
    }

    .contact-map-frame iframe {
        min-height: 320px;
    }

    .gallery-card-image,
    .staff-photo {
        background-position: center;
    }
}