:root {
    --portal-brand: #7c2d5f;
    --portal-brand-dark: #5d2148;
    --portal-coral: #e76f51;
    --portal-gold: #d9a227;
    --portal-green: #158467;
    --portal-ink: #20242c;
    --portal-muted: #687183;
    --portal-line: #e3e6eb;
    --portal-bg: #f5f6f8;
    --portal-card: #ffffff;
    --portal-soft: #f9f1f6;
    --portal-sidebar-width: 276px;
    --portal-header-height: 76px;
    --portal-shadow: 0 12px 32px rgba(30, 35, 45, 0.07);
}

html {
    background: var(--portal-bg);
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--portal-bg) !important;
    color: var(--portal-ink);
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0;
}

body,
button,
input,
select,
textarea {
    letter-spacing: 0 !important;
}

.portal-shell {
    min-height: 100vh;
}

.portal-shell .nav-header {
    z-index: 1001;
    width: var(--portal-sidebar-width);
    height: var(--portal-header-height);
    border-right: 1px solid var(--portal-line) !important;
    border-bottom: 1px solid var(--portal-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.portal-shell .brand-logo {
    width: 100%;
    height: 100%;
    padding: 12px 58px 12px 18px;
    gap: 11px;
}

.portal-shell .brand-logo .logo-abbr {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 5px;
    border: 1px solid var(--portal-brand-border, #eadde5);
    border-radius: 7px;
    background: #fff;
    object-fit: contain;
}

.portal-shell .brand-logo .logo-compact {
    display: none;
}

.portal-shell .brand-title {
    display: block !important;
    min-width: 0;
    max-width: 154px !important;
    margin: 0 !important;
    overflow: hidden;
    color: var(--portal-ink) !important;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.portal-shell .brand-title small {
    display: block;
    margin-top: 3px;
    color: var(--portal-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.portal-shell .nav-control {
    right: 15px;
}

.portal-shell .hamburger {
    display: grid;
    position: static;
    top: auto;
    width: 34px;
    height: 34px;
    padding: 8px;
    place-content: center;
    gap: 4px;
    border: 1px solid var(--portal-line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transform: none;
}

.portal-shell .hamburger .line {
    width: 16px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px;
    background: var(--portal-ink) !important;
}

.portal-shell .header {
    z-index: 1000;
    height: var(--portal-header-height);
    padding-left: var(--portal-sidebar-width);
    border-bottom: 1px solid var(--portal-line) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

.portal-shell .header-content {
    height: 100%;
    padding-right: 24px;
}

.portal-header-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 700;
}

.portal-header-label i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 7px;
    background: var(--portal-soft);
    color: var(--portal-brand);
    font-size: 17px;
}

.portal-header-site-link {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    margin-right: 14px;
    padding: 0 12px;
    border: 1px solid var(--portal-line);
    border-radius: 6px;
    background: #fff;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}

.portal-header-site-link:hover {
    border-color: var(--portal-brand-border, #d9b8cb);
    color: var(--portal-brand);
}

.portal-shell .header-profile .nav-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 4px 11px 4px 5px !important;
    border: 1px solid var(--portal-line);
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--portal-ink) !important;
}

.portal-account-copy {
    display: block;
    min-width: 0;
    text-align: left;
}

.portal-account-copy strong,
.portal-account-copy small {
    display: block;
    white-space: nowrap;
}

.portal-account-copy strong {
    color: var(--portal-ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.portal-account-copy small {
    margin-top: 2px;
    color: var(--portal-muted);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
}

.portal-shell .header-profile img {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--portal-brand-border, #e2d7de) !important;
    border-radius: 6px;
    object-fit: cover;
}

.portal-shell .header-profile .dropdown-menu {
    min-width: 210px;
    margin-top: 8px;
    padding: 7px;
    border: 1px solid var(--portal-line);
    border-radius: 7px;
    box-shadow: var(--portal-shadow);
}

.portal-shell .header-profile .dropdown-item {
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #344054;
    font-size: 13px;
}

.portal-shell .header-profile .dropdown-item:hover {
    background: var(--portal-soft);
    color: var(--portal-brand);
}

.portal-shell .deznav {
    z-index: 999;
    top: var(--portal-header-height);
    width: var(--portal-sidebar-width);
    height: calc(100vh - var(--portal-header-height));
    padding-top: 0;
    border-right: 1px solid var(--portal-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.portal-shell .deznav-scroll {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 16px 10px 14px;
}

.portal-student-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0 5px 14px;
    padding: 11px;
    border: 1px solid var(--portal-brand-border, #eadde5);
    border-radius: 7px;
    background: var(--portal-soft);
}

.portal-student-summary img {
    width: 38px;
    height: 38px;
    border: 1px solid var(--portal-brand-border, #e4d6df);
    border-radius: 6px;
    background: #fff;
    object-fit: cover;
}

.portal-student-summary strong,
.portal-student-summary small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-student-summary strong {
    color: var(--portal-ink);
    font-size: 12px;
}

.portal-student-summary small {
    margin-top: 2px;
    color: var(--portal-muted);
    font-size: 10px;
}

.portal-shell .metismenu {
    flex: 1 1 auto;
    padding-bottom: 10px;
}

.portal-shell .metismenu .nav-label {
    margin: 15px 13px 7px;
    padding: 0;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.portal-shell .metismenu > li > a,
.portal-shell .metismenu ul a {
    box-sizing: border-box;
    width: calc(100% - 8px);
    min-height: 44px;
    margin: 2px 4px !important;
    padding: 9px 11px !important;
    border-radius: 6px !important;
    color: #475467 !important;
    font-size: 12px;
    font-weight: 650 !important;
}

.portal-shell .metismenu > li > a {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    text-align: left !important;
}

.portal-shell .metismenu > li > a.has-arrow {
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    padding-right: 12px !important;
}

.portal-shell .metismenu > li > a i {
    display: grid !important;
    position: static !important;
    top: auto !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    border-radius: 6px;
    background: #f4f5f7;
    color: #667085 !important;
    font-size: 15px;
    line-height: 30px !important;
    text-align: center;
    transform: none !important;
}

.portal-shell .metismenu > li > a i::before {
    display: block;
    width: 100%;
    margin: 0 !important;
    line-height: 30px !important;
    text-align: center;
}

.portal-shell .metismenu > li > a::before {
    display: none !important;
}

.portal-shell .metismenu > li > a .nav-text {
    display: block;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-shell .metismenu > li > a.has-arrow::after {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 6px !important;
    height: 6px !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    margin: 0 !important;
    border-width: 0 1.5px 1.5px 0 !important;
    transform: rotate(45deg) !important;
}

.portal-shell .metismenu > li.mm-active > a.has-arrow::after,
.portal-shell .metismenu > li > a.has-arrow[aria-expanded="true"]::after {
    transform: rotate(225deg) !important;
}

.portal-shell .metismenu > li > a:hover,
.portal-shell .metismenu > li.mm-active > a,
.portal-shell .metismenu > li > a.active {
    background: var(--portal-soft) !important;
    color: var(--portal-brand) !important;
}

.portal-shell .metismenu > li.mm-active > a i,
.portal-shell .metismenu > li > a.active i {
    background: var(--portal-brand);
    color: #fff !important;
}

.portal-shell .metismenu ul {
    width: 100%;
    padding: 3px 4px 6px 44px !important;
}

.portal-shell .metismenu ul a {
    display: block !important;
    width: 100%;
    min-height: 34px;
    margin: 1px 0 !important;
    padding: 6px 9px !important;
    color: #667085 !important;
    line-height: 1.4;
    text-align: left !important;
}

.portal-shell .metismenu ul a.active,
.portal-shell .metismenu ul a:hover {
    background: var(--portal-soft) !important;
    color: var(--portal-brand) !important;
}

.portal-shell .metismenu ul a i {
    display: none !important;
}

.portal-shell .metismenu ul a span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-sidebar-footer {
    flex: 0 0 auto;
    margin: 8px 5px 0;
    padding: 12px;
    border-top: 1px solid var(--portal-line);
}

.portal-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

.portal-sidebar-footer i {
    color: var(--portal-coral);
    font-size: 16px;
}

.portal-shell + .content-body,
.portal-shell .content-body,
.content-body {
    min-height: calc(100vh - var(--portal-header-height));
    margin-left: var(--portal-sidebar-width);
    padding-top: var(--portal-header-height);
    background: var(--portal-bg);
}

.portal-shell + .content-body .container-fluid,
.content-body .container-fluid {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 30px 44px !important;
}

.portal-page-title {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.portal-page-title h4 {
    margin: 0;
    color: var(--portal-ink) !important;
    font-size: 21px !important;
    font-weight: 800;
    line-height: 1.25;
}

.portal-page-title p {
    max-width: 680px;
    margin: 4px 0 0;
    color: var(--portal-muted);
    font-size: 13px;
}

.portal-pill {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    border: 1px solid var(--portal-line);
    border-radius: 6px !important;
    background: #fff;
    color: #475467;
    padding: 7px 11px;
    font-size: 11px;
    white-space: nowrap;
}

.portal-welcome-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border-left: 4px solid var(--portal-brand);
    background: #fff;
    box-shadow: var(--portal-shadow);
}

.portal-welcome-band h2 {
    margin: 0 0 5px;
    color: var(--portal-ink);
    font-size: 20px;
    font-weight: 800;
}

.portal-welcome-band p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 13px;
}

.portal-welcome-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.portal-welcome-meta span {
    padding: 7px 10px;
    border-radius: 5px;
    background: #f5f6f8;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

.portal-card,
.portal-shell .card,
.content-body .card {
    border: 1px solid var(--portal-line) !important;
    border-radius: 7px !important;
    background: #fff;
    box-shadow: var(--portal-shadow) !important;
}

.portal-shell .card-header,
.content-body .card-header {
    min-height: 56px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--portal-line) !important;
    background: #fff !important;
}

.portal-shell .card-header .card-title,
.content-body .card-header .card-title,
.portal-shell .card-title {
    margin: 0;
    color: var(--portal-ink) !important;
    font-size: 15px;
    font-weight: 800;
}

.portal-shell .card-body,
.content-body .card-body {
    padding: 18px;
}

.portal-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.portal-action {
    display: grid !important;
    min-height: 112px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-content: center;
    align-items: center;
    padding: 14px !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--portal-ink) !important;
    box-shadow: none !important;
}

.portal-action:hover {
    border-color: #d9b8cb !important;
    color: var(--portal-brand) !important;
    transform: translateY(-1px);
}

.portal-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 7px;
    background: var(--portal-soft);
    color: var(--portal-brand);
    font-size: 19px;
}

.portal-action:nth-child(2) .portal-action-icon {
    background: #fff4eb;
    color: var(--portal-coral);
}

.portal-action:nth-child(3) .portal-action-icon {
    background: #fff9e8;
    color: #a97400;
}

.portal-action:nth-child(4) .portal-action-icon {
    background: #ecf8f4;
    color: var(--portal-green);
}

.portal-action:nth-child(5) .portal-action-icon {
    background: #eef3ff;
    color: #3f5f9c;
}

.portal-action-label {
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
}

.portal-action small {
    margin-top: 3px !important;
    color: var(--portal-muted) !important;
    font-size: 10px;
    line-height: 1.4;
}

.portal-profile-card,
.portal-fee-card {
    background: #fff !important;
}

.portal-profile-top {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 18px !important;
}

.portal-avatar {
    width: 88px !important;
    height: 88px !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.portal-student-name {
    margin-bottom: 6px !important;
    font-size: 20px !important;
}

.portal-id-badge {
    border-radius: 5px !important;
    padding: 6px 9px !important;
    font-size: 11px;
}

.portal-detail-grid {
    gap: 8px !important;
    margin-top: 18px !important;
}

.portal-detail-item {
    padding: 10px 11px !important;
    border-radius: 6px !important;
    background: #fafafa !important;
}

.portal-detail-item span {
    font-size: 9px !important;
}

.portal-detail-item strong {
    font-size: 12px !important;
}

.portal-fee-card h3 {
    color: var(--portal-brand-dark) !important;
    font-size: 25px !important;
}

.portal-fee-breakdown span {
    border-radius: 6px !important;
    background: #fafafa !important;
}

.portal-shell .form-control,
.content-body .form-control,
.portal-shell .bootstrap-select .dropdown-toggle {
    min-height: 44px;
    border: 1px solid #d7dce3;
    border-radius: 6px !important;
    background: #fff;
    color: var(--portal-ink);
    font-size: 13px;
    box-shadow: none;
}

.portal-shell .form-control:focus,
.content-body .form-control:focus {
    border-color: var(--portal-brand);
    box-shadow: 0 0 0 3px rgba(var(--portal-brand-rgb, 124, 45, 95), 0.1);
}

.portal-shell label,
.content-body label {
    margin-bottom: 6px;
    color: #344054;
    font-size: 12px;
    font-weight: 750;
}

.portal-shell .btn,
.content-body .btn {
    min-height: 36px;
    border-radius: 6px !important;
    font-size: 12px;
    font-weight: 750 !important;
}

.portal-shell .btn-primary,
.portal-shell .btn-success,
.content-body .btn-primary,
.content-body .btn-success {
    border-color: var(--portal-brand) !important;
    background: var(--portal-brand) !important;
    color: #fff !important;
}

.portal-shell .btn-primary:hover,
.portal-shell .btn-success:hover,
.content-body .btn-primary:hover,
.content-body .btn-success:hover {
    border-color: var(--portal-brand-dark) !important;
    background: var(--portal-brand-dark) !important;
}

.portal-shell .alert,
.content-body .alert {
    border-width: 1px;
    border-radius: 6px;
    font-size: 12px;
}

.portal-table-card .card-body {
    padding: 0 !important;
}

.portal-table-card .table-responsive {
    padding: 0 18px 18px;
}

.portal-shell .table,
.content-body .table {
    width: 100% !important;
    margin-bottom: 0 !important;
    color: var(--portal-ink);
    font-size: 12px;
}

.portal-shell .table thead th,
.content-body .table thead th,
.portal-shell table.dataTable thead th,
.content-body table.dataTable thead th {
    padding: 12px 11px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--portal-line) !important;
    background: #f7f8fa !important;
    color: #475467 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.portal-shell .table td,
.content-body .table td {
    padding: 12px 11px !important;
    border-color: #eceef2 !important;
    vertical-align: middle;
}

.portal-shell .table tbody tr:hover,
.content-body .table tbody tr:hover {
    background: #fcfafb;
}

.portal-shell .table tfoot,
.content-body .table tfoot {
    display: none;
}

.portal-table-card .dataTables_wrapper {
    padding-top: 16px;
}

.portal-table-card .dataTables_wrapper::after {
    display: block;
    clear: both;
    content: "";
}

.portal-table-card .dataTables_length,
.portal-table-card .dataTables_filter {
    margin: 0 18px 14px;
    color: var(--portal-muted);
    font-size: 11px;
}

.portal-table-card .dataTables_length {
    float: left;
}

.portal-table-card .dataTables_filter {
    float: right;
}

.portal-table-card .dataTables_length label,
.portal-table-card .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 700;
}

.portal-table-card .dataTables_length select,
.portal-table-card .dataTables_filter input {
    height: 36px;
    border: 1px solid #d7dce3;
    border-radius: 5px;
    background: #fff;
    color: var(--portal-ink);
    font-size: 12px;
    outline: none;
}

.portal-table-card .dataTables_length select {
    min-width: 66px;
    padding: 0 22px 0 9px;
}

.portal-table-card .dataTables_filter input {
    width: 210px;
    margin: 0 !important;
    padding: 0 10px;
}

.portal-table-card .dataTables_info {
    float: left;
    padding: 15px 18px 0 !important;
    color: var(--portal-muted);
    font-size: 11px;
}

.portal-table-card .dataTables_paginate {
    display: flex;
    float: right;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 10px 18px 0 !important;
}

.portal-table-card .dataTables_paginate > span {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.portal-table-card .dataTables_paginate .paginate_button {
    display: grid;
    min-width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 8px !important;
    place-items: center;
    border: 1px solid var(--portal-line) !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #475467 !important;
    font-size: 11px;
}

.portal-table-card .dataTables_paginate .paginate_button.current,
.portal-table-card .dataTables_paginate .paginate_button:hover {
    border-color: var(--portal-brand) !important;
    background: var(--portal-brand) !important;
    color: #fff !important;
}

.portal-table-card .dataTables_paginate .paginate_button.disabled {
    opacity: 0.45;
}

.portal-sidebar-backdrop {
    display: none;
}

.portal-empty-state {
    padding: 36px 18px !important;
    color: var(--portal-muted);
}

.portal-subject-card {
    box-shadow: none !important;
}

.portal-subject-card .card-body {
    display: flex;
    min-height: 160px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left !important;
}

.portal-subject-card h5 {
    color: var(--portal-ink);
    font-size: 15px;
}

.vote-card,
.aspirant-card {
    box-shadow: none !important;
}

@media (min-width: 1200px) {
    .portal-shell .nav-control {
        display: none;
    }
}

@media (max-width: 1199px) {
    .portal-shell .nav-header {
        width: 76px;
    }

    .portal-shell .brand-logo {
        padding: 12px 16px;
    }

    .portal-shell .brand-title {
        display: none !important;
    }

    .portal-shell .nav-control {
        position: fixed;
        top: 20px;
        left: 88px;
        right: auto;
    }

    .portal-shell .header {
        padding-left: 76px;
    }

    .portal-shell .deznav {
        width: var(--portal-sidebar-width);
    }

    .portal-shell + .content-body,
    .portal-shell .content-body,
    .content-body {
        margin-left: 76px;
    }

    .portal-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li:not(.nav-label) {
        padding: 0 9px !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a {
        width: 100%;
        grid-template-columns: 1fr;
        justify-items: center;
        margin: 2px 0 !important;
        padding: 7px !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a i {
        margin: 0 auto !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a.has-arrow::after {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --portal-header-height: 68px;
    }

    .portal-shell .nav-header {
        width: 120px;
        height: var(--portal-header-height);
    }

    .portal-shell .brand-logo {
        width: 68px !important;
        justify-content: center;
        padding: 10px 12px;
    }

    .portal-shell .brand-logo .logo-abbr {
        width: 42px;
        height: 42px;
    }

    .portal-shell .nav-control {
        display: flex;
        position: absolute;
        top: 0;
        right: 10px;
        bottom: 0;
        left: auto;
        height: var(--portal-header-height);
        align-items: center;
        justify-content: center;
        padding: 0;
        transform: none;
    }

    .portal-shell .nav-control .hamburger {
        width: 36px;
        height: 36px;
        border-color: var(--portal-brand-border, var(--portal-line));
        background: var(--portal-soft);
    }

    .portal-shell .nav-control .hamburger .line {
        background: var(--portal-brand) !important;
    }

    .portal-shell .header {
        height: var(--portal-header-height);
        padding-left: 120px;
    }

    .portal-shell .header-content {
        padding-left: 0;
        padding-right: 10px;
    }

    .portal-shell .header-left,
    .portal-shell .portal-site-item {
        display: none !important;
    }

    .portal-shell .header .navbar-collapse {
        justify-content: flex-end !important;
    }

    .portal-shell .header-profile .nav-link {
        gap: 7px;
        min-height: 42px;
        padding: 3px 8px 3px 3px !important;
    }

    .portal-shell .header-profile img {
        width: 34px !important;
        height: 34px !important;
    }

    .portal-account-copy strong {
        font-size: 11px;
    }

    .portal-account-copy small {
        display: none;
    }

    .portal-shell .deznav {
        top: var(--portal-header-height);
        left: calc(-1 * var(--portal-sidebar-width)) !important;
        height: calc(100vh - var(--portal-header-height));
        overflow: hidden !important;
        transition: left 0.22s ease !important;
    }

    .portal-shell.menu-toggle .deznav {
        left: 0 !important;
        width: min(var(--portal-sidebar-width), calc(100vw - 36px)) !important;
        overflow: hidden !important;
        box-shadow: 16px 0 38px rgba(15, 23, 42, 0.18) !important;
    }

    .portal-shell.menu-toggle .deznav .deznav-scroll {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .portal-shell.menu-toggle .deznav .portal-student-summary,
    .portal-shell.menu-toggle .deznav .portal-sidebar-footer,
    .portal-shell.menu-toggle .deznav .metismenu .nav-label,
    .portal-shell.menu-toggle .deznav .metismenu .nav-text {
        display: grid !important;
    }

    .portal-shell.menu-toggle .deznav .portal-sidebar-footer {
        display: block !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li:not(.nav-label) {
        padding: 0 !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a,
    .portal-shell.menu-toggle .deznav .metismenu > li > a.has-arrow {
        width: calc(100% - 8px);
        grid-template-columns: 30px minmax(0, 1fr);
        justify-items: stretch;
        margin: 2px 4px !important;
        padding: 9px 11px !important;
        text-align: left !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a.has-arrow {
        grid-template-columns: 30px minmax(0, 1fr) 12px;
        padding-right: 12px !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a i {
        margin: 0 !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu > li > a.has-arrow::after {
        display: block !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu ul {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        padding: 3px 4px 6px 44px !important;
        box-shadow: none !important;
    }

    .portal-shell.menu-toggle .deznav .metismenu ul a {
        width: 100% !important;
        padding: 6px 9px !important;
    }

    .portal-sidebar-backdrop {
        position: fixed;
        z-index: 998;
        top: var(--portal-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        border: 0;
        background: rgba(17, 24, 39, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .portal-shell.menu-toggle .portal-sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    body.portal-navigation-open {
        overflow: hidden !important;
    }

    .portal-shell + .content-body,
    .portal-shell .content-body,
    .content-body {
        min-height: calc(100vh - var(--portal-header-height));
        margin-left: 0;
        padding-top: var(--portal-header-height);
    }

    .portal-shell + .content-body .container-fluid,
    .content-body .container-fluid {
        padding: 20px 14px 36px !important;
    }

    .portal-page-title {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .portal-page-title h4 {
        font-size: 19px !important;
    }

    .portal-pill {
        width: auto !important;
        max-width: 100%;
    }

    .portal-welcome-band {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .portal-welcome-meta {
        justify-content: flex-start;
    }

    .portal-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .portal-action {
        min-height: 102px;
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 12px !important;
    }

    .portal-action-icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .portal-shell .card-body,
    .content-body .card-body {
        padding: 15px;
    }

    .portal-table-card .card-body {
        padding: 0 !important;
    }

    .portal-table-card .table-responsive {
        padding: 0 12px 14px;
    }

    .portal-table-card .dataTables_length,
    .portal-table-card .dataTables_filter {
        float: none;
        margin: 0 12px 10px;
    }

    .portal-table-card .dataTables_length label,
    .portal-table-card .dataTables_filter label {
        justify-content: space-between;
    }

    .portal-table-card .dataTables_filter input {
        width: min(220px, 62vw);
    }

    .portal-table-card .dataTables_info,
    .portal-table-card .dataTables_paginate {
        float: none;
        justify-content: center;
        text-align: center;
    }

    .portal-table-card .dataTables_info {
        padding: 12px 12px 0 !important;
    }

    .portal-table-card .dataTables_paginate {
        width: 100%;
        padding: 10px 12px 2px !important;
    }
}

@media (max-width: 479px) {
    .portal-shell .header {
        padding-left: 120px;
    }

    .portal-shell .header-profile .nav-link {
        padding-right: 7px !important;
    }

    .portal-table-card .dataTables_paginate .paginate_button {
        min-width: 58px;
    }

    .portal-action-grid {
        grid-template-columns: 1fr !important;
    }

    .portal-action {
        min-height: 78px;
    }

    .portal-detail-grid,
    .portal-fee-breakdown {
        grid-template-columns: 1fr !important;
    }

    .portal-profile-top {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .portal-avatar {
        margin: 0 auto;
    }
}

@media print {
    .portal-shell,
    .school-pwa-layer {
        display: none !important;
    }

    .content-body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
}
/* Learn Centre game experience */
.learn-mode-page,.learn-play-page{min-height:calc(100vh - 80px);background:#f4f7fb}.learn-mode-page .container-fluid,.learn-play-page .container-fluid{max-width:1240px}.learn-mode-hero{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:210px;padding:34px 38px;margin-bottom:30px;border-radius:8px;background:#172033;color:#fff;overflow:hidden;position:relative}.learn-mode-hero:after{content:"";position:absolute;right:0;bottom:0;width:36%;height:7px;background:linear-gradient(90deg,#e85d47,#d99614,#0f927f,#3478d4,#b64a7c)}.learn-mode-hero-copy{max-width:650px}.learn-kicker{display:inline-flex;align-items:center;gap:8px;color:#82e6d6;font-size:12px;font-weight:800;text-transform:uppercase}.learn-mode-hero h1{max-width:700px;margin:12px 0 8px;color:#fff;font-size:32px;font-weight:800;line-height:1.22;overflow-wrap:anywhere}.learn-mode-hero p{margin:0;color:#cbd5e1;font-size:16px}.learn-mode-summary{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:1px;min-width:360px;border:1px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.12)}.learn-mode-summary>span{display:flex;min-height:102px;flex-direction:column;align-items:center;justify-content:center;padding:12px;background:#202b3e;text-align:center}.learn-mode-summary i{margin-bottom:6px;color:#82e6d6}.learn-mode-summary strong{color:#fff;font-size:20px}.learn-mode-summary small{color:#aeb9ca;font-size:11px;text-transform:uppercase}.learn-mode-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.learn-mode-heading>div>span{color:var(--portal-brand);font-size:12px;font-weight:800;text-transform:uppercase}.learn-mode-heading h2{margin:3px 0 0;color:#172033;font-size:25px;font-weight:800}.learn-mode-heading>a{display:inline-flex;align-items:center;gap:8px;color:#667085;font-weight:700}.learn-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:38px}.learn-mode-card{--mode:#e85d47;display:grid;grid-template-columns:42px 54px minmax(0,1fr) auto 38px;gap:14px;align-items:center;min-height:148px;padding:20px;border:1px solid #e5e9f0;border-left:4px solid var(--mode);border-radius:8px;background:#fff;color:#172033;box-shadow:0 12px 30px rgba(15,23,42,.06);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;animation:learnRise .45s both}.learn-mode-card:nth-child(2){animation-delay:60ms}.learn-mode-card:nth-child(3){animation-delay:120ms}.learn-mode-card:nth-child(4){animation-delay:180ms}.learn-mode-card:nth-child(5){animation-delay:240ms}.learn-mode-card:hover{transform:translateY(-4px);border-color:var(--mode);color:#172033;box-shadow:0 18px 38px rgba(15,23,42,.12)}.learn-mode-card.is-featured{grid-column:1/-1;min-height:164px;background:#fff}.learn-mode-coral{--mode:#e85d47}.learn-mode-teal{--mode:#0f927f}.learn-mode-gold{--mode:#d99614}.learn-mode-blue{--mode:#3478d4}.learn-mode-magenta{--mode:#b64a7c}.learn-mode-number{color:#98a2b3;font-size:12px;font-weight:800}.learn-mode-icon,.learn-play-mark{display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:8px;background:#f5f7fa;color:var(--mode);font-size:21px}.learn-mode-card-copy{min-width:0}.learn-mode-card-copy>small{display:block;margin-bottom:3px;color:var(--mode);font-size:11px;font-weight:800;text-transform:uppercase}.learn-mode-card-copy>strong{display:block;color:#172033;font-size:20px}.learn-mode-card-copy p{max-width:580px;margin:5px 0 0;color:#667085;line-height:1.45}.learn-mode-meta{padding:7px 10px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:11px;font-weight:800;white-space:nowrap}.learn-mode-open{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;background:#172033;color:#fff;transition:transform .2s ease,background .2s ease}.learn-mode-card:hover .learn-mode-open{transform:translateX(3px);background:var(--mode)}
.learn-play-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.learn-play-back{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid #dde3ec;border-radius:8px;background:#fff;color:#172033;font-size:22px}.learn-play-mark{--mode:#e85d47;flex:0 0 54px}.learn-play-header>div{min-width:0}.learn-play-header small{display:block;color:var(--mode,#667085);font-size:11px;font-weight:800;text-transform:uppercase}.learn-play-header h1{margin:1px 0;color:#172033;font-size:24px;font-weight:800}.learn-play-header p{margin:0;color:#667085;overflow-wrap:anywhere}.learn-cbt{padding-bottom:32px}.learn-cbt-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 18px;border:1px solid #e1e6ee;border-radius:8px 8px 0 0;background:#fff}.learn-cbt-progress{display:flex;align-items:center;gap:12px;flex:1}.learn-cbt-progress>span{display:block;width:min(360px,52%);height:7px;border-radius:999px;background:#e9edf3;overflow:hidden}.learn-cbt-progress i{display:block;width:0;height:100%;border-radius:inherit;background:#0f927f;transition:width .25s ease}.learn-cbt-progress strong{color:#475467;font-size:12px}.learn-cbt-timer{display:grid;grid-template-columns:22px auto;column-gap:7px;align-items:center;min-width:105px;padding:7px 10px;border-radius:8px;background:#172033;color:#fff}.learn-cbt-timer i{grid-row:1/3;color:#82e6d6}.learn-cbt-timer strong{font-size:18px;line-height:1}.learn-cbt-timer small{color:#aeb9ca;font-size:9px;text-transform:uppercase}.learn-cbt-timer.is-urgent{background:#a92f35;animation:timerPulse 1s infinite}.learn-cbt-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:start;border:1px solid #e1e6ee;border-top:0;border-radius:0 0 8px 8px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.08)}.learn-cbt-workspace{min-width:0;border-right:1px solid #e1e6ee}.learn-cbt-question{display:none;min-height:440px;padding:32px;animation:questionIn .28s ease both}.learn-cbt-question.is-active{display:block}.learn-cbt-question-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.learn-cbt-question-head span{color:#e85d47;font-size:12px;font-weight:800;text-transform:uppercase}.learn-cbt-question-head small{padding:6px 9px;border-radius:999px;background:#fff5ef;color:#b54732;font-size:10px;font-weight:800;text-transform:uppercase}.learn-cbt-question h2{max-width:850px;margin:0 0 24px;color:#172033;font-size:21px;font-weight:800;line-height:1.5}.learn-cbt-options{display:grid;gap:10px}.learn-cbt-options label{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:12px;align-items:center;min-height:62px;margin:0;padding:10px 14px;border:1px solid #dfe4ec;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}.learn-cbt-options label:hover{border-color:#e85d47;transform:translateX(2px)}.learn-cbt-options input{position:absolute;opacity:0;pointer-events:none}.learn-cbt-options label>i{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;background:#f2f4f7;color:#475467;font-style:normal;font-weight:800}.learn-cbt-options label>span{color:#344054;line-height:1.45}.learn-cbt-options label>b{color:transparent}.learn-cbt-options label.is-selected{border-color:#e85d47;background:#fff7f3}.learn-cbt-options label.is-selected>i{background:#e85d47;color:#fff}.learn-cbt-options label.is-selected>b{color:#e85d47}.learn-cbt-controls{display:grid;grid-template-columns:120px 1fr 120px;align-items:center;gap:10px;padding:16px 22px;border-top:1px solid #e1e6ee;background:#f8fafc}.learn-cbt-controls>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid #d9dfe8;border-radius:8px;background:#fff;color:#344054;font-weight:800}.learn-cbt-controls>button:last-child{border-color:#172033;background:#172033;color:#fff}.learn-cbt-controls>button:disabled{opacity:.4;cursor:not-allowed}.learn-cbt-controls>span{text-align:center;color:#667085;font-size:12px;font-weight:700}.learn-cbt-sidebar{padding:20px;position:sticky;top:90px}.learn-cbt-sidebar>div{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}.learn-cbt-sidebar>div span{color:#475467;font-size:12px;font-weight:800}.learn-cbt-sidebar>div strong{color:#0f927f}.learn-cbt-sidebar nav{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.learn-cbt-sidebar nav button{aspect-ratio:1;border:1px solid #d9dfe8;border-radius:6px;background:#fff;color:#475467;font-size:12px;font-weight:800}.learn-cbt-sidebar nav button.is-answered{border-color:#0f927f;background:#e5f8f3;color:#087361}.learn-cbt-sidebar nav button.is-current{outline:2px solid #e85d47;outline-offset:1px}.learn-cbt-sidebar ul{display:grid;gap:7px;margin:18px 0;padding:14px 0;border-top:1px solid #e5e9ef;border-bottom:1px solid #e5e9ef;list-style:none}.learn-cbt-sidebar li{display:flex;align-items:center;gap:8px;color:#667085;font-size:11px}.learn-cbt-sidebar li i{width:11px;height:11px;border:1px solid #d9dfe8;border-radius:3px}.learn-cbt-sidebar li i.is-current{border:2px solid #e85d47}.learn-cbt-sidebar li i.is-answered{border-color:#0f927f;background:#0f927f}.learn-cbt-finish{width:100%;min-height:44px;border:0;border-radius:8px;background:#e85d47;color:#fff;font-weight:800}.learn-confirm{display:none;position:fixed;z-index:11000;inset:0;align-items:center;justify-content:center;padding:20px}.learn-confirm.is-open{display:flex}.learn-confirm>button{position:absolute;inset:0;width:100%;border:0;background:rgba(11,18,32,.72)}.learn-confirm>section{position:relative;width:min(460px,100%);padding:30px;border-radius:8px;background:#fff;text-align:center;animation:confirmIn .22s ease both}.learn-confirm>section>span{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:50%;background:#fff0eb;color:#e85d47;font-size:21px}.learn-confirm h2{margin:15px 0 8px;color:#172033;font-size:23px;font-weight:800}.learn-confirm p{color:#667085;line-height:1.6}.learn-confirm section>div{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.learn-confirm section button{min-height:44px;border:1px solid #d9dfe8;border-radius:8px;background:#fff;color:#344054;font-weight:800}.learn-confirm section button[type=submit]{border-color:#e85d47;background:#e85d47;color:#fff}.learn-dialog-open{overflow:hidden}
.learn-game{--game:#0f927f;position:relative;min-height:570px;padding:20px;border-radius:8px;background:#172033;color:#fff;overflow:hidden;box-shadow:0 24px 50px rgba(15,23,42,.18)}.learn-game-teal{--game:#0f927f}.learn-game-gold{--game:#d99614}.learn-game-blue{--game:#3478d4}.learn-game-magenta{--game:#b64a7c}.learn-game:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}.learn-game-status{position:relative;z-index:1;display:grid;grid-template-columns:100px minmax(120px,1fr) 90px 90px;gap:14px;align-items:center;padding:13px 16px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#202b3e}.learn-game-status>div:not(.learn-game-meter){display:flex;flex-direction:column}.learn-game-status span{color:#aeb9ca;font-size:9px;font-weight:800;text-transform:uppercase}.learn-game-status strong{color:#fff;font-size:17px}.learn-game-meter{height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.learn-game-meter i{display:block;width:0;height:100%;border-radius:inherit;background:var(--game);transition:width .35s ease}.learn-game-board{position:relative;z-index:1;display:flex;min-height:460px;align-items:center;justify-content:center;padding:28px}.learn-game-intro,.learn-game-complete{max-width:650px;text-align:center;animation:gameScale .35s ease both}.learn-game-intro>span,.learn-game-complete>span{display:inline-flex;width:74px;height:74px;align-items:center;justify-content:center;border:1px solid #718096;border-radius:50%;background:#202b3e;color:var(--game);font-size:28px}.learn-game-intro small,.learn-game-complete>small{display:block;margin-top:18px;color:var(--game);font-size:11px;font-weight:800;text-transform:uppercase}.learn-game-intro h2,.learn-game-complete h2{margin:8px 0;color:#fff;font-size:34px;font-weight:800}.learn-game-intro p,.learn-game-complete p{color:#bac4d2;font-size:15px}.learn-game-intro button,.learn-game-complete button,.learn-game-complete a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;margin-top:14px;padding:0 20px;border:0;border-radius:8px;background:var(--game);color:#fff;font-weight:800}.learn-game-complete>div{display:flex;flex-direction:column;margin:22px auto;width:150px;padding:14px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}.learn-game-complete>div strong{color:#fff;font-size:34px}.learn-game-complete>div small{color:#aeb9ca;text-transform:uppercase}.learn-game-complete nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.learn-game-complete nav a{background:#fff;color:#172033}.learn-game-toast{position:absolute;z-index:5;left:50%;bottom:18px;max-width:calc(100% - 32px);padding:10px 15px;border-radius:8px;background:#fff;color:#172033;font-weight:800;opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.learn-game-toast.is-visible{opacity:1;transform:translate(-50%,0)}.learn-game-toast.is-success{border-left:4px solid #0f927f}.learn-game-toast.is-error{border-left:4px solid #e85d47}.learn-game-toast.is-notice{border-left:4px solid #d99614}
.match-lab-board{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:14px;width:100%;align-items:center}.match-lab-board>section{display:grid;align-content:start;gap:8px}.match-lab-board>section>small{margin-bottom:3px;color:#82e6d6;font-size:10px;font-weight:800;text-transform:uppercase}.match-lab-board button{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:center;min-height:60px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#fff;color:#172033;text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease}.match-lab-board button:hover,.match-lab-board button.is-selected{transform:translateY(-2px);border-color:#0f927f;background:#eaf9f5}.match-lab-board button>i{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:6px;background:#eaf9f5;color:#0f927f;font-style:normal;font-weight:800}.match-lab-board button span{line-height:1.3;overflow-wrap:anywhere}.match-lab-board button.is-matched{border-color:#0f927f;background:#bff0e3;opacity:.7}.match-lab-board button.is-wrong{animation:gameShake .4s;border-color:#e85d47;background:#ffe8e3}.match-lab-link{display:flex;align-items:center;justify-content:center;color:#82e6d6;font-size:18px}.flash-sprint-board{width:min(720px,100%);perspective:1200px}.flash-card{height:330px;cursor:pointer;outline:none}.flash-card>div{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.flash-card.is-flipped>div{transform:rotateY(180deg)}.flash-card article{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;border:1px solid rgba(255,255,255,.16);border-radius:8px;backface-visibility:hidden;text-align:center}.flash-card-front{background:#202b3e}.flash-card-back{background:#fff;color:#172033;transform:rotateY(180deg)}.flash-card small{color:#d99614;font-size:11px;font-weight:800;text-transform:uppercase}.flash-card h2{max-width:620px;margin:15px 0;color:#fff;font-size:25px;font-weight:800;line-height:1.5}.flash-card-back h2{color:#172033}.flash-card-front span{margin-top:16px;color:#d4d9e2;font-size:12px}.flash-card-back p{max-width:600px;margin:7px 0 0;color:#667085;line-height:1.55}.flash-actions{display:flex;justify-content:center;gap:10px;margin-top:14px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.flash-actions.is-visible{opacity:1;transform:none;pointer-events:auto}.flash-actions button{min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#fff;color:#172033;font-weight:800}.flash-actions button:last-child{border-color:#d99614;background:#d99614;color:#fff}.sequence-board,.word-forge-board{width:min(840px,100%);text-align:center}.sequence-board>small,.word-forge-board>small{color:var(--game);font-size:11px;font-weight:800;text-transform:uppercase}.sequence-board h2,.word-forge-board h2{margin:10px auto 24px;color:#fff;font-size:23px;font-weight:800;line-height:1.45}.sequence-track{display:flex;min-height:78px;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px;border:2px dashed rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.04)}.sequence-track>span{color:#8f9bad;font-size:12px}.sequence-bank{display:flex;min-height:72px;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}.sequence-track button,.sequence-bank button{min-height:40px;padding:8px 12px;border:0;border-radius:7px;background:#fff;color:#172033;font-weight:800;animation:tokenIn .25s both}.sequence-track button{background:#dce9ff;color:#245da8}.sequence-track.is-wrong{animation:gameShake .4s;border-color:#e85d47}.sequence-actions{display:flex;justify-content:center;gap:9px;margin-top:20px}.sequence-actions button{min-height:43px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#fff;font-weight:800}.sequence-actions button:last-child{border-color:#3478d4;background:#3478d4}.word-forge-letters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:28px 0}.word-forge-letters i{display:inline-flex;width:52px;height:58px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-bottom:4px solid #b64a7c;border-radius:8px;background:#fff;color:#172033;font-size:23px;font-style:normal;font-weight:800;animation:letterDrop .38s both;animation-delay:var(--letter-delay)}.word-forge-board form{max-width:560px;margin:auto}.word-forge-board label{display:block;margin-bottom:8px;color:#c3ccda!important;font-size:11px;font-weight:800;text-transform:uppercase}.word-forge-board form>div{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px}.word-forge-board input{height:50px;border:2px solid transparent;border-radius:8px;padding:0 16px;background:#fff;color:#172033;font-size:18px;font-weight:800;text-align:center;text-transform:uppercase;outline:none}.word-forge-board input:focus{border-color:#b64a7c}.word-forge-board input.is-correct{border-color:#0f927f;background:#dff8f1}.word-forge-board input.is-wrong{border-color:#e85d47;animation:gameShake .4s}.word-forge-board button{border:0;border-radius:8px;background:#b64a7c;color:#fff;font-weight:800}.learn-game-empty{color:#fff}
@keyframes learnRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes questionIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@keyframes confirmIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes gameScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes gameShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes tokenIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes letterDrop{from{opacity:0;transform:translateY(-14px) rotate(-5deg)}to{opacity:1;transform:none}}@keyframes timerPulse{50%{box-shadow:0 0 0 5px rgba(169,47,53,.18)}}
@media(max-width:991px){.learn-mode-hero{align-items:flex-start;flex-direction:column}.learn-mode-summary{width:100%;min-width:0}.learn-cbt-layout{grid-template-columns:1fr}.learn-cbt-workspace{border-right:0}.learn-cbt-sidebar{position:static;border-top:1px solid #e1e6ee}.learn-cbt-sidebar nav{grid-template-columns:repeat(10,1fr)}.match-lab-board{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:7px}.match-lab-link{font-size:14px}}
@media(max-width:767px){.learn-mode-grid{grid-template-columns:1fr}.learn-mode-card.is-featured{grid-column:auto}.learn-mode-card{grid-template-columns:38px 48px minmax(0,1fr) 34px}.learn-mode-card .learn-mode-meta{display:none}.learn-mode-icon{width:48px;height:48px}.learn-mode-heading{align-items:flex-start;flex-direction:column}.learn-cbt-question{min-height:470px;padding:22px 16px}.learn-cbt-sidebar nav{grid-template-columns:repeat(5,1fr)}.learn-cbt-topbar{align-items:stretch;flex-direction:column}.learn-cbt-progress>span{width:100%}.learn-cbt-controls{grid-template-columns:1fr 1fr}.learn-cbt-controls>span{grid-column:1/-1;grid-row:1}.learn-game{padding:12px}.learn-game-status{grid-template-columns:1fr 1fr 1fr}.learn-game-status .learn-game-meter{grid-column:1/-1;grid-row:2}.learn-game-board{min-height:480px;padding:20px 4px}.match-lab-board button{grid-template-columns:22px minmax(0,1fr);gap:5px;min-height:58px;padding:8px;font-size:11px}.match-lab-board button>i{width:22px;height:22px;font-size:10px}.flash-card{height:390px}.learn-game-intro h2,.learn-game-complete h2{font-size:28px}}
@media(max-width:575px){.learn-mode-hero{min-height:0;padding:24px 18px}.learn-mode-hero h1{font-size:25px}.learn-mode-summary{grid-template-columns:repeat(3,1fr)}.learn-mode-summary>span{min-height:82px;padding:8px 3px}.learn-mode-summary strong{font-size:16px}.learn-mode-summary small{font-size:8px}.learn-mode-card{grid-template-columns:34px minmax(0,1fr) 34px;gap:10px;min-height:0;padding:16px}.learn-mode-card .learn-mode-icon{display:none}.learn-mode-card-copy>strong{font-size:18px}.learn-mode-card-copy p{font-size:12px}.learn-play-header{align-items:flex-start}.learn-play-mark{display:none}.learn-play-header h1{font-size:21px}.learn-cbt-options label{grid-template-columns:36px minmax(0,1fr) 18px;padding:9px}.learn-confirm section>div{grid-template-columns:1fr}.flash-card article{padding:22px 16px}.flash-card h2,.sequence-board h2,.word-forge-board h2{font-size:19px}.word-forge-letters i{width:40px;height:46px;font-size:18px}.word-forge-board form>div{grid-template-columns:1fr}.word-forge-board button{min-height:46px}.learn-game-status{gap:6px;padding:10px}.learn-game-status strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.learn-mode-card,.learn-cbt-question,.learn-confirm>section,.learn-game-intro,.learn-game-complete,.match-lab-board button,.flash-card>div,.sequence-track button,.sequence-bank button,.word-forge-letters i{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Quiz Arena answer review */
.learn-review-page{min-height:calc(100vh - 80px);background:#f4f7fb}.learn-review-page .container-fluid{max-width:1240px}.learn-review-summary{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:28px;align-items:center;padding:28px 32px;margin-bottom:26px;border-radius:8px;background:#172033;color:#fff;position:relative;overflow:hidden}.learn-review-summary:after{content:"";position:absolute;inset:auto 0 0;height:6px;background:linear-gradient(90deg,#0f927f 0 var(--review-score,50%),#e85d47 var(--review-score,50%) 100%)}.learn-review-score{display:flex;min-height:132px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#202b3e;text-align:center}.learn-review-score>span,.learn-review-copy>span{color:#82e6d6;font-size:10px;font-weight:800;text-transform:uppercase}.learn-review-score>strong{color:#fff;font-size:45px;line-height:1.1}.learn-review-score>small{color:#aeb9ca}.learn-review-copy h1{margin:8px 0;color:#fff;font-size:28px;font-weight:800;line-height:1.3}.learn-review-copy p{margin:0;color:#b9c3d1}.learn-review-stats{display:grid;grid-template-columns:repeat(3,92px);gap:8px}.learn-review-stats>span{display:flex;min-height:92px;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#fff;color:#172033}.learn-review-stats>span:nth-child(1) i{color:#0f927f}.learn-review-stats>span:nth-child(2) i{color:#e85d47}.learn-review-stats>span:nth-child(3) i{color:#7b8798}.learn-review-stats strong{font-size:21px}.learn-review-stats small{color:#667085;font-size:9px;text-transform:uppercase}.learn-review-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.learn-review-heading>div>span,.learn-review-more>div>span{color:#e85d47;font-size:11px;font-weight:800;text-transform:uppercase}.learn-review-heading h2,.learn-review-more h2{margin:3px 0 0;color:#172033;font-size:24px;font-weight:800}.learn-review-heading>a{display:inline-flex;align-items:center;gap:8px;color:#667085;font-weight:700}.learn-review-layout{margin-bottom:28px}.learn-review-question{min-height:540px}.learn-cbt-question-head small.is-correct{background:#e1f7f0;color:#087361}.learn-cbt-question-head small.is-incorrect{background:#fff0ec;color:#c43d36}.learn-cbt-question-head small.is-unanswered{background:#eef1f5;color:#667085}.learn-review-options{display:grid;gap:10px}.learn-review-option{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(120px,auto);gap:12px;align-items:center;min-height:64px;padding:10px 14px;border:1px solid #dfe4ec;border-radius:8px;background:#fff}.learn-review-option>i{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;background:#f2f4f7;color:#475467;font-style:normal;font-weight:800}.learn-review-option>span{color:#344054;line-height:1.45}.learn-review-option>em{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#667085;font-style:normal;text-align:right}.learn-review-option>em b{display:inline-flex;width:28px;height:28px;flex:0 0 28px;align-items:center;justify-content:center;border-radius:50%;font-size:13px}.learn-review-option>em small{font-size:10px;font-weight:800;text-transform:uppercase}.learn-review-option.is-correct-answer{border:2px solid #0f927f;background:#e9f9f4}.learn-review-option.is-correct-answer>i{background:#0f927f;color:#fff}.learn-review-option.is-correct-answer>em{color:#087361}.learn-review-option.is-correct-answer>em b{background:#0f927f;color:#fff}.learn-review-option.is-wrong-answer{border:2px solid #e85d47;background:#fff0ec}.learn-review-option.is-wrong-answer>i{background:#e85d47;color:#fff}.learn-review-option.is-wrong-answer>em{color:#c43d36}.learn-review-option.is-wrong-answer>em b{background:#e85d47;color:#fff}.learn-review-explanation{display:flex;gap:12px;margin-top:18px;padding:15px 16px;border-left:4px solid #d99614;border-radius:0 8px 8px 0;background:#fff8e8}.learn-review-explanation>i{margin-top:2px;color:#d99614;font-size:18px}.learn-review-explanation span{color:#8a5a00;font-size:10px;font-weight:800;text-transform:uppercase}.learn-review-explanation p{margin:3px 0 0;color:#5c4a28;line-height:1.55}.learn-review-sidebar nav button.is-correct{border-color:#0f927f;background:#e1f7f0;color:#087361}.learn-review-sidebar nav button.is-incorrect{border-color:#e85d47;background:#fff0ec;color:#c43d36}.learn-review-sidebar nav button.is-unanswered{border-color:#aeb7c4;background:#f2f4f7;color:#667085}.learn-review-sidebar nav button.is-current{outline:2px solid #172033;outline-offset:1px}.learn-review-sidebar li i.is-correct{border-color:#0f927f;background:#0f927f}.learn-review-sidebar li i.is-incorrect{border-color:#e85d47;background:#e85d47}.learn-review-sidebar li i.is-unanswered{border-color:#aeb7c4;background:#f2f4f7}.learn-review-retry{display:flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border-radius:8px;background:#172033;color:#fff!important;font-weight:800}.learn-review-more{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;margin-bottom:34px;border:1px solid #e1e6ee;border-radius:8px;background:#fff}.learn-review-more nav{display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));gap:8px}.learn-review-more nav a{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;border:1px solid #e1e6ee;border-radius:8px;color:#344054}.learn-review-more nav a:hover{border-color:#e85d47;color:#e85d47}
@media(max-width:991px){.learn-review-summary{grid-template-columns:150px minmax(0,1fr)}.learn-review-stats{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.learn-review-more{align-items:flex-start;flex-direction:column}.learn-review-more nav{width:100%}}
@media(max-width:767px){.learn-review-summary{grid-template-columns:1fr;padding:20px}.learn-review-score{min-height:115px}.learn-review-copy{text-align:center}.learn-review-heading{align-items:flex-start;flex-direction:column}.learn-review-option{grid-template-columns:36px minmax(0,1fr)}.learn-review-option>em{grid-column:2;justify-content:flex-start;text-align:left}.learn-review-question{min-height:620px}.learn-review-more nav{grid-template-columns:1fr}}
@media(max-width:575px){.learn-review-stats{gap:5px}.learn-review-stats>span{min-height:78px}.learn-review-copy h1{font-size:23px}.learn-review-option{padding:9px}.learn-review-explanation{padding:13px}.learn-review-heading h2,.learn-review-more h2{font-size:20px}}

/* Learn Centre legacy components */
.learn-centre-banner{padding:28px;border-radius:8px;background:linear-gradient(135deg,var(--portal-brand),var(--portal-brand-dark));color:#fff;margin-bottom:24px}.learn-centre-banner span,.learn-question span,.learn-game-head span{font-size:11px;font-weight:800;letter-spacing:1px}.learn-centre-banner h2{color:#fff;margin:10px 0;font-weight:800}.learn-centre-banner p{margin:0;opacity:.88}.learn-game-list{padding:22px;border:1px solid var(--portal-line);border-radius:8px;background:#fff}.learn-game-list h5{font-weight:800}.learn-game-list article{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--portal-line)}.learn-game-list article:last-child{border:0}.learn-game-list b,.learn-games-grid>a>span{display:inline-flex;width:34px;height:34px;border-radius:8px;background:var(--portal-soft);color:var(--portal-brand);align-items:center;justify-content:center}.learn-game-list small,.learn-games-grid small{display:block;color:var(--portal-muted)}.learn-timer{font-weight:800;font-size:18px;padding:9px 14px;background:#172033;color:#fff;border-radius:8px}.learn-question{margin-bottom:16px}.learn-question h5{font-weight:800;margin:10px 0 18px}.learn-option{display:flex;align-items:center;gap:10px;border:1px solid var(--portal-line);border-radius:8px;padding:12px;margin:8px 0;cursor:pointer}.learn-option:hover{border-color:var(--portal-brand)}.learn-option i{font-style:normal;font-weight:800;color:var(--portal-brand)}.learn-result-hero{padding:42px;text-align:center;border-radius:8px;background:linear-gradient(135deg,var(--portal-brand),var(--portal-brand-dark));color:#fff;margin-bottom:28px}.learn-result-hero span{font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:1px}.learn-result-hero h1{font-size:64px;color:#fff;margin:8px}.learn-games-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.learn-games-grid>a{padding:16px;border:1px solid var(--portal-line);background:#fff;border-radius:8px;color:var(--portal-ink)}.learn-games-grid strong{display:block;margin-top:12px}.learn-review{margin-bottom:10px}.learn-game-stage{max-width:850px;margin:auto;padding:28px;border-radius:8px;background:#172033;color:#fff;min-height:390px}.learn-game-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:15px;margin-bottom:32px}.learn-game-stage h2{color:#fff;font-weight:800}.learn-game-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.learn-game-options button{padding:16px;text-align:left;background:#fff;border:0;border-radius:8px;color:#172033;font-weight:700}.learn-game-options button.is-correct{background:#a7f3d0}.learn-game-options button.is-wrong{background:#fecaca}@media(max-width:991px){.learn-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575px){.learn-games-grid,.learn-game-options{grid-template-columns:1fr}.learn-result-hero{padding:28px 16px}.learn-result-hero h1{font-size:48px}}