/**
 * Mobile App UI Kit — student area
 *
 * Applies only below the Bootstrap `lg` breakpoint (991.98px). Desktop keeps
 * the existing sidebar dashboard untouched; pages render both markups and
 * use Bootstrap's d-lg-none / d-none d-lg-block utilities to pick one.
 */

:root {
    --ma-primary: #D2232A;
    --ma-primary-light: #E5484F;
    --ma-amber: #FFA729;
    --ma-text: #0F1F1F;
    --ma-muted: #5C6B6B;
    --ma-muted-light: #8A9797;
    --ma-border: #E2E8E8;
    --ma-star: #FFA729;
    --ma-bg: #FFFFFF;
    --ma-surface-subtle: #F4F7F7;
    --ma-chip-hover: #E5F7F6;
    --ma-radius-lg: 12px;
    --ma-radius-md: 8px;
    --ma-radius-sm: 4px;
    --ma-nav-height: 68px;
    --ma-shadow-card: 0 2px 8px rgba(15, 31, 31, 0.06);
    --ma-shadow-float: 0 -2px 12px rgba(15, 31, 31, 0.08);
}

@media (max-width: 991.98px) {

    .ma-page {
        background: var(--ma-bg);
        min-height: 100vh;
        padding: 16px 16px calc(var(--ma-nav-height) + 24px);
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        color: var(--ma-text);
    }

    .ma-page * {
        box-sizing: border-box;
    }

    /* ---------- Header ---------- */
    .ma-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }

    .ma-header-user {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .ma-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        background: var(--ma-border);
    }

    .ma-header-title {
        font-size: 17px;
        font-weight: 700;
        color: var(--ma-text);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The official site logo, used in the Home dashboard header only —
       the one place top app bar branding shows per the design system. */
    .ma-header-logo {
        max-height: 32px;
        width: auto;
    }

    .ma-header-subtitle {
        font-size: 12.5px;
        color: var(--ma-muted);
        margin: 2px 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ma-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: transparent;
        color: var(--ma-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        border: none;
        flex-shrink: 0;
        position: relative;
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    .ma-icon-btn:hover,
    .ma-icon-btn:focus {
        color: var(--ma-text);
        background: var(--ma-chip-hover);
    }

    .ma-icon-btn:active {
        transform: scale(0.95);
    }

    .ma-icon-btn .ma-badge-dot {
        position: absolute;
        top: 9px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ma-primary);
        border: 1.5px solid #fff;
    }

    .ma-back-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: transparent;
        color: var(--ma-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        flex-shrink: 0;
        transition: background-color 0.15s ease;
    }

    .ma-back-btn:hover,
    .ma-back-btn:focus {
        color: var(--ma-text);
        background: var(--ma-chip-hover);
    }

    .ma-back-btn:active {
        transform: scale(0.95);
    }

    /* ---------- Search bar ---------- */
    .ma-search-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 22px;
    }

    .ma-search-bar {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--ma-surface-subtle);
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        padding: 12px 16px;
        min-width: 0;
    }

    .ma-search-bar i {
        color: var(--ma-muted-light);
        font-size: 15px;
    }

    .ma-search-bar input {
        border: none;
        outline: none;
        flex: 1;
        min-width: 0;
        font-size: 14px;
        color: var(--ma-text);
        background: transparent;
    }

    .ma-search-bar input::placeholder {
        color: var(--ma-muted-light);
    }

    .ma-filter-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: var(--ma-radius-md);
        background: #fff;
        color: var(--ma-text);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ma-border);
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    .ma-filter-btn:hover,
    .ma-filter-btn:focus {
        color: var(--ma-text);
        background: var(--ma-surface-subtle);
    }

    /* ---------- Section titles ---------- */
    .ma-section-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--ma-text);
        margin: 22px 0 14px;
    }

    .ma-section-title:first-child {
        margin-top: 0;
    }

    .ma-section-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 22px 0 14px;
    }

    .ma-section-title-row .ma-section-title {
        margin: 0;
    }

    .ma-section-link {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ma-muted);
        text-decoration: none;
    }

    /* ---------- Quick actions ---------- */
    .ma-quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 12px;
        margin-bottom: 8px;
    }

    .ma-quick-action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--ma-text);
    }

    .ma-quick-action-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--ma-surface-subtle);
        border: 1px solid var(--ma-border);
        color: var(--ma-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
    }

    .ma-quick-action-item span:not(.ma-quick-action-icon) {
        font-size: 12.5px;
        font-weight: 600;
        text-align: center;
        color: var(--ma-text);
    }

    /* ---------- Course cards (2-col grid) ---------- */
    .ma-course-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .ma-course-card {
        background: #fff;
        border-radius: var(--ma-radius-md);
        overflow: hidden;
        box-shadow: var(--ma-shadow-card);
        text-decoration: none;
        color: var(--ma-text);
        display: flex;
        flex-direction: column;
    }

    .ma-course-card:hover,
    .ma-course-card:focus {
        color: var(--ma-text);
    }

    .ma-course-card-media {
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F4F4F5;
        overflow: hidden;
    }

    .ma-course-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ma-course-card-title {
        font-size: 13.5px;
        font-weight: 700;
        padding: 12px 14px 14px;
        flex: 1;
        line-height: 1.35;
    }

    .ma-course-card-footer {
        background: var(--ma-primary);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        padding: 9px 10px;
    }

    /* ---------- Mentor cards (3-col grid) ---------- */
    .ma-mentor-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 10px;
    }

    .ma-mentor-card {
        background: #fff;
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 16px 8px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-decoration: none;
        color: var(--ma-text);
    }

    .ma-mentor-card:hover,
    .ma-mentor-card:focus {
        color: var(--ma-text);
    }

    .ma-mentor-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 8px;
        background: var(--ma-border);
    }

    .ma-mentor-name {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 2px;
    }

    .ma-mentor-skill {
        font-size: 11px;
        color: var(--ma-muted);
        margin-bottom: 6px;
    }

    .ma-stars {
        font-size: 10px;
        color: var(--ma-star);
        letter-spacing: 1px;
    }

    .ma-stars .dim {
        color: #DDDDDD;
    }

    /* ---------- Generic list rows (profile hub, simple pages) ---------- */
    .ma-card {
        background: #fff;
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 16px;
        margin-bottom: 14px;
    }

    .ma-list {
        background: #fff;
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        overflow: hidden;
        margin-bottom: 14px;
    }

    .ma-list-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 16px;
        border-bottom: 1px solid var(--ma-border);
        text-decoration: none;
        color: var(--ma-text);
        background: none;
        border-left: none;
        border-right: none;
        border-top: none;
        width: 100%;
        text-align: left;
    }

    .ma-list-row:last-child {
        border-bottom: none;
    }

    .ma-list-row:hover,
    .ma-list-row:focus {
        color: var(--ma-text);
        background: #FAFAFA;
    }

    .ma-list-row-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: var(--ma-radius-md);
        background: rgba(210, 35, 42, 0.08);
        color: var(--ma-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .ma-list-row-body {
        flex: 1;
        min-width: 0;
    }

    .ma-list-row-title {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
    }

    .ma-list-row-subtitle {
        font-size: 12px;
        color: var(--ma-muted);
        margin: 2px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ma-list-row-chevron {
        color: var(--ma-muted-light);
        font-size: 13px;
    }

    .ma-list-row-meta {
        font-size: 12px;
        font-weight: 700;
        color: var(--ma-text);
        white-space: nowrap;
    }

    /* ---------- Badges ---------- */
    .ma-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(210, 35, 42, 0.08);
        color: var(--ma-primary);
    }

    .ma-badge.success { background: rgba(34, 197, 94, 0.12); color: #15803D; }
    .ma-badge.warning { background: rgba(231, 136, 26, 0.14); color: #B5620E; }
    .ma-badge.danger { background: rgba(220, 38, 38, 0.12); color: #B91C1C; }

    /* ---------- Buttons ---------- */
    .ma-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--ma-primary);
        color: #fff;
        border: none;
        border-radius: var(--ma-radius-sm);
        padding: 13px 18px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.1s ease, opacity 0.15s ease;
    }

    .ma-btn:active { transform: scale(0.98); }

    .ma-btn:hover,
    .ma-btn:focus {
        color: #fff;
        opacity: 0.92;
    }

    .ma-btn.block { width: 100%; }
    .ma-btn.outline { background: #fff; color: var(--ma-primary); border: 1.5px solid var(--ma-primary); }
    .ma-btn:disabled { opacity: 0.5; }

    .ma-btn-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--ma-radius-md);
        background: var(--ma-primary);
        color: #fff;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ma-btn-icon.is-active,
    .ma-btn-icon.ma-fav-btn.is-active {
        background: var(--ma-star);
    }

    /* ---------- Tabs (pill toggle) ---------- */
    .ma-tabs {
        display: flex;
        background: var(--ma-surface-subtle);
        border-radius: var(--ma-radius-md);
        padding: 5px;
        gap: 5px;
        margin: 18px 0;
    }

    .ma-tab {
        flex: 1;
        text-align: center;
        padding: 11px 10px;
        border-radius: var(--ma-radius-sm);
        font-size: 13px;
        font-weight: 700;
        color: var(--ma-muted);
        border: none;
        background: transparent;
        text-decoration: none;
    }

    .ma-tab.active {
        background: var(--ma-primary);
        color: #fff;
    }

    .ma-tab:hover,
    .ma-tab:focus {
        color: inherit;
    }

    /* ---------- Course detail banner ---------- */
    .ma-banner {
        background: var(--ma-primary);
        border-radius: var(--ma-radius-lg);
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        overflow: hidden;
    }

    .ma-banner img {
        max-width: 70%;
        max-height: 70%;
        object-fit: contain;
    }

    .ma-banner i {
        font-size: 48px;
        color: rgba(255, 255, 255, 0.85);
    }

    /* ---------- Lesson list rows ---------- */
    .ma-lesson-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 4px;
        border-bottom: 1px solid var(--ma-border);
        text-decoration: none;
        color: var(--ma-text);
    }

    .ma-lesson-row:last-child { border-bottom: none; }

    .ma-lesson-row:hover,
    .ma-lesson-row.locked {
        color: var(--ma-text);
    }

    .ma-lesson-row.locked {
        opacity: 0.55;
        pointer-events: none;
    }

    .ma-lesson-play {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 50%;
        background: #E53935;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
    }

    .ma-lesson-title {
        flex: 1;
        font-size: 13.5px;
        font-weight: 600;
        min-width: 0;
    }

    .ma-lesson-row.completed .ma-lesson-title {
        color: var(--ma-muted);
    }

    .ma-lesson-lock {
        color: var(--ma-muted-light);
        font-size: 13px;
    }

    .ma-lesson-check {
        color: #22C55E;
        font-size: 15px;
    }

    /* ---------- Empty state ---------- */
    .ma-empty {
        text-align: center;
        padding: 40px 16px;
        color: var(--ma-muted);
    }

    .ma-empty i {
        font-size: 34px;
        color: var(--ma-border);
        margin-bottom: 12px;
        display: block;
    }

    /* ---------- Bottom tab navigation ---------- */
    .ma-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--ma-nav-height);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--ma-border);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 1050;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: var(--ma-shadow-float);
    }

    .ma-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--ma-text);
        opacity: 0.5;
        text-decoration: none;
        font-size: 10.5px;
        font-weight: 600;
        flex: 1;
        height: 100%;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .ma-nav-item i {
        font-size: 19px;
    }

    .ma-nav-item.active {
        color: var(--ma-primary);
        opacity: 1;
        font-weight: 700;
    }

    .ma-nav-item:hover,
    .ma-nav-item:focus {
        color: var(--ma-primary);
        opacity: 1;
    }

    .ma-nav-item:active {
        transform: translateY(1px);
    }

    /* ---------- Daily check-in banner ---------- */
    .ma-checkin-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--ma-amber);
        border-radius: var(--ma-radius-md);
        padding: 14px 16px;
        box-shadow: var(--ma-shadow-card);
        margin-bottom: 18px;
    }

    .ma-checkin-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        background: rgba(255, 167, 41, 0.15);
        color: var(--ma-amber);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

    .ma-checkin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ma-checkin-title { font-size: 14px; font-weight: 700; color: var(--ma-text); margin: 0; }
    .ma-checkin-subtitle { font-size: 12px; color: var(--ma-muted); margin: 0; }

    .ma-checkin-claim {
        background: var(--ma-amber);
        color: var(--ma-text);
        border: none;
        border-radius: var(--ma-radius-sm);
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ma-checkin-claim:disabled { opacity: 0.5; }

    /* ---------- Stats bento grid ---------- */
    .ma-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 22px;
    }

    .ma-stat-row { display: flex; flex-direction: column; gap: 10px; }

    .ma-stat-card {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-decoration: none;
        color: var(--ma-text);
    }

    .ma-stat-row .ma-stat-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
    }

    .ma-stat-row .ma-stat-card .ma-stat-text { display: flex; flex-direction: column; gap: 2px; }

    .ma-stat-card i { font-size: 18px; color: var(--ma-primary); }
    .ma-stat-card.ma-stat-points i { color: var(--ma-amber); }
    .ma-stats-grid > .ma-stat-card { justify-content: center; }

    .ma-stat-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
    .ma-stat-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ma-muted);
    }

    /* ---------- Continue Learning card ---------- */
    .ma-continue-card {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 16px;
        margin-bottom: 22px;
        text-decoration: none;
        color: var(--ma-text);
        display: block;
    }

    .ma-continue-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .ma-continue-badge {
        display: inline-flex;
        background: rgba(210, 35, 42, 0.08);
        color: var(--ma-primary);
        font-size: 10.5px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: var(--ma-radius-sm);
        margin-bottom: 6px;
    }

    .ma-continue-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; color: var(--ma-text); }
    .ma-continue-subtitle { font-size: 12.5px; color: var(--ma-muted); margin: 0; }

    .ma-continue-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: var(--ma-radius-md);
        background: var(--ma-surface-subtle);
        border: 1px solid var(--ma-border);
        color: var(--ma-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .ma-progress-row {
        display: flex;
        justify-content: space-between;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ma-muted);
        margin-bottom: 6px;
    }

    .ma-progress-row strong { color: var(--ma-text); font-weight: 700; }

    .ma-progress-track {
        width: 100%;
        height: 6px;
        background: var(--ma-border);
        border-radius: 999px;
        overflow: hidden;
        margin-bottom: 14px;
    }

    .ma-progress-fill {
        height: 100%;
        background: var(--ma-amber);
        border-radius: 999px;
    }

    /* ---------- Recommended horizontal scroll ---------- */
    .ma-scroll-row {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 6px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .ma-scroll-row::-webkit-scrollbar { display: none; }

    .ma-recommend-card {
        flex: 0 0 220px;
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        overflow: hidden;
        text-decoration: none;
        color: var(--ma-text);
        scroll-snap-align: start;
    }

    .ma-recommend-media {
        height: 100px;
        background: var(--ma-surface-subtle);
        position: relative;
        overflow: hidden;
    }

    .ma-recommend-media img { width: 100%; height: 100%; object-fit: cover; }

    .ma-recommend-level {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(255, 255, 255, 0.92);
        font-size: 10px;
        font-weight: 700;
        padding: 3px 7px;
        border-radius: var(--ma-radius-sm);
    }

    .ma-recommend-body { padding: 12px; }
    .ma-recommend-title {
        font-size: 13.5px;
        font-weight: 700;
        margin: 0 0 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ma-recommend-meta { font-size: 11px; color: var(--ma-muted); display: flex; align-items: center; gap: 4px; margin: 0; }

    /* ---------- Course discovery (rich list cards) ---------- */
    .ma-course-list { display: flex; flex-direction: column; gap: 14px; }

    .ma-course-item {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        overflow: hidden;
    }

    .ma-course-item-media { height: 128px; position: relative; background: var(--ma-surface-subtle); }
    .ma-course-item-media img { width: 100%; height: 100%; object-fit: cover; }

    .ma-course-item-rating {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: var(--ma-radius-sm);
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--ma-text);
    }

    .ma-course-item-rating i { color: var(--ma-amber); font-size: 10px; }

    .ma-course-item-fav {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 34px;
        height: 34px;
    }

    .ma-course-item-body { padding: 14px; }
    .ma-course-item-title {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ma-course-item-instructor {
        font-size: 12px;
        color: var(--ma-muted);
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 10px;
    }

    .ma-course-item-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

    .ma-course-item-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--ma-border);
    }

    .ma-course-item-price { display: flex; flex-direction: column; min-width: 0; }
    .ma-course-item-price-old { font-size: 11px; color: var(--ma-muted-light); text-decoration: line-through; }
    .ma-course-item-price-now { font-size: 15px; font-weight: 700; color: var(--ma-text); white-space: nowrap; }

    .ma-course-item-enroll {
        background: var(--ma-primary);
        color: #fff;
        border: none;
        border-radius: var(--ma-radius-sm);
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    /* ---------- Wallet: balance hero ---------- */
    .ma-wallet-hero {
        background: linear-gradient(135deg, var(--ma-primary) 0%, #8a0012 100%);
        border-radius: var(--ma-radius-md);
        padding: 24px 20px;
        color: #fff;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin-bottom: 18px;
    }

    .ma-wallet-hero-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.8;
        margin: 0 0 10px;
    }

    .ma-wallet-hero-value {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .ma-wallet-hero-value i { color: var(--ma-amber); font-size: 26px; }

    .ma-wallet-hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 999px;
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        margin-top: 12px;
    }

    /* ---------- Wallet: quick actions ---------- */
    .ma-wallet-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 22px;
    }

    .ma-wallet-action {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--ma-text);
        font-size: 13px;
        font-weight: 700;
    }

    .ma-wallet-action i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        background: rgba(255, 167, 41, 0.15);
        color: var(--ma-amber);
    }

    .ma-wallet-action.ma-wallet-action-refer i {
        background: rgba(30, 107, 158, 0.1);
        color: var(--ma-info, #1E6B9E);
    }

    /* ---------- Wallet: referral banner ---------- */
    .ma-referral-banner {
        background: var(--ma-text);
        color: #fff;
        border-radius: var(--ma-radius-md);
        padding: 18px;
        margin-bottom: 22px;
    }

    .ma-referral-banner h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
    .ma-referral-banner p { font-size: 12.5px; opacity: 0.85; margin: 0 0 12px; line-height: 1.5; }

    .ma-referral-code {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--ma-radius-sm);
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .ma-referral-code i { color: var(--ma-amber); font-size: 12px; cursor: pointer; }

    /* ---------- Wallet: featured rewards ---------- */
    .ma-rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .ma-reward-card {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        overflow: hidden;
        text-decoration: none;
        color: var(--ma-text);
    }

    .ma-reward-media {
        height: 90px;
        background: var(--ma-surface-subtle);
        position: relative;
        overflow: hidden;
    }

    .ma-reward-media img { width: 100%; height: 100%; object-fit: cover; }

    .ma-reward-type {
        position: absolute;
        bottom: 6px;
        left: 6px;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 9.5px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: var(--ma-radius-sm);
        text-transform: capitalize;
    }

    .ma-reward-body { padding: 10px; }
    .ma-reward-title { font-size: 12.5px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
    .ma-reward-cost { font-size: 12px; font-weight: 700; color: var(--ma-amber); }
}

/* Hide the mobile shell entirely at desktop widths regardless of markup order */
@media (min-width: 992px) {
    .ma-page,
    .ma-bottom-nav {
        display: none !important;
    }
}

/**
 * Course player (learn page) — color-only reskin.
 *
 * This page (student.course-access) is a real interactive lesson player
 * driven by assets/front/js/student/course-access.js (AJAX content loading,
 * quiz taking, video playback). Its markup/JS is untouched here — every
 * class below already exists in student/style.css. Overriding the shared
 * --theme custom property repaints the header, active states, and buttons
 * to the new brand purple without changing a single DOM hook the JS relies on.
 */
@media (max-width: 991.98px) {
    .course-access-fullscreen {
        --theme: #D2232A;
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .course-header-bar {
        border-radius: 0;
    }

    .curriculum-item,
    .chapter-header {
        border-radius: 8px;
    }

    .floating-nav-btn,
    .sidebar-toggle-btn,
    .course-nav-btn,
    .course-header-link {
        border-radius: 4px;
    }

    .floating-navigation-buttons {
        box-shadow: 0 8px 25px rgba(210, 35, 42, 0.25);
    }

    .floating-nav-btn {
        box-shadow: 0 4px 15px rgba(210, 35, 42, 0.3);
    }

    .floating-nav-btn:hover {
        box-shadow: 0 6px 20px rgba(210, 35, 42, 0.4);
    }

    .curriculum-item.active {
        background: rgba(210, 35, 42, 0.06);
    }

    .chapter-header:hover {
        background: rgba(210, 35, 42, 0.05);
    }

    /*
     * Video playback fix: the floating nav/timer pills are position:fixed
     * at the bottom of the viewport with z-index:10000 (above the fullscreen
     * layer's 9999), so on short mobile viewports the video's native control
     * bar can end up rendered underneath them, eating taps meant for play/pause.
     * Capping the player's height keeps it clear, and the extra bottom margin
     * keeps the rest of the lesson content (description, mark-complete button)
     * from being covered too.
     */
    #video-player-container {
        margin-bottom: 90px;
    }

    #video-player-container iframe.video-iframe,
    #video-player-container .video-js {
        max-height: 45vh;
    }

    #video-player-container,
    #video-player-container iframe,
    #video-player-container video,
    .floating-navigation-buttons,
    .floating-nav-btn,
    .floating-quiz-timer {
        touch-action: manipulation;
    }

    /*
     * Same floating-pill overlap as the video player above, but for whatever
     * sits at the bottom of ANY lesson/quiz/assignment panel — the mark-complete
     * button, the quiz submit button, the assignment submit button. Without
     * this the fixed nav pill visually sits on top of them.
     */
    .mhq-left-content {
        padding-bottom: 90px;
    }

    /* Attachment preview iframe (PDF / Office docs): the desktop 480px height
       doesn't fit mobile screens well — scale it to the viewport instead. */
    .file-preview-frame {
        height: 55vh;
    }

    /* Quiz "previous attempt" card: without wrapping, the actions column
       (View Results button + pass/fail badge) runs past the screen edge. */
    .previous-attempt-content {
        flex-wrap: wrap;
    }

    .previous-attempt-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

/**
 * Settings / Messages Thread / AI Chat — reskin in place.
 *
 * These pages bind JS to specific element ids (avatar preview, password
 * toggles, chat polling/sending). Duplicating their markup into a separate
 * .ma-page block would create duplicate ids and break that JS, so instead
 * the single existing DOM is restyled responsively: the desktop sidebar is
 * hidden, the content goes edge-to-edge, and colors/radius/shadows/font
 * follow the AERIX system. Scoped to each page via a wrapper class so it
 * can't leak onto pages already covered by the .ma-page system.
 */
@media (max-width: 991.98px) {
    .student-settings-page,
    .student-chat-thread-page,
    .student-ai-chat-page {
        padding: 0 !important;
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .student-settings-page .container,
    .student-chat-thread-page .container,
    .student-ai-chat-page .container {
        max-width: 100%;
        padding: 0;
    }

    .student-settings-page .dashboard-layout,
    .student-chat-thread-page .dashboard-layout,
    .student-ai-chat-page .dashboard-layout {
        gap: 0;
    }

    .student-settings-page .dashboard-sidebar,
    .student-chat-thread-page .dashboard-sidebar,
    .student-ai-chat-page .dashboard-sidebar {
        display: none !important;
    }

    /* ---------- Settings ---------- */
    .student-settings-page .dashboard-main {
        padding: 60px 16px 32px;
    }

    .student-settings-page .dashboard-courses-section {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 18px;
    }

    .student-settings-page .section-title h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--ma-text);
    }

    .student-settings-page .section-subtitle {
        font-size: 12.5px;
        color: var(--ma-muted);
    }

    .student-settings-page .form-control {
        border-radius: var(--ma-radius-sm);
        border-color: var(--ma-border);
        font-size: 14px;
        padding: 11px 14px;
    }

    .student-settings-page .form-control:focus {
        border-color: var(--ma-primary);
        box-shadow: 0 0 0 3px rgba(210, 35, 42, 0.1);
    }

    .student-settings-page label {
        font-size: 13px;
        font-weight: 600;
        color: var(--ma-text);
    }

    .student-settings-page .theme-btn,
    .student-settings-page .theme-btn.style-2 {
        background: var(--ma-primary);
        border-radius: var(--ma-radius-sm);
        border: none;
    }

    .student-settings-page .cancel-btn {
        border-radius: var(--ma-radius-sm);
    }

    .student-settings-page .setting-item {
        padding: 14px 0;
        border-bottom: 1px solid var(--ma-border);
    }

    .student-settings-page .setting-item:last-child { border-bottom: none; }

    .student-settings-page .setting-info h4 {
        font-size: 14px;
        font-weight: 700;
        color: var(--ma-text);
    }

    .student-settings-page .setting-info p {
        font-size: 12px;
        color: var(--ma-muted);
    }

    .student-settings-page .toggle-slider,
    .student-settings-page input:checked + .toggle-slider {
        background-color: var(--ma-border);
    }

    .student-settings-page input:checked + .toggle-slider {
        background-color: var(--ma-primary) !important;
    }

    .student-settings-page .danger-btn {
        border-radius: var(--ma-radius-sm);
    }

    /* ---------- Messages thread + AI chat ---------- */
    .student-chat-thread-page .dashboard-main,
    .student-ai-chat-page .dashboard-main {
        padding: 0;
    }

    .chat-thread-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    .chat-thread-header {
        padding: 12px 16px !important;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .chat-back-btn {
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        background: transparent !important;
        color: var(--ma-muted) !important;
    }

    .student-chat-thread-page .chat-body,
    .student-ai-chat-page .chat-body {
        padding: 16px !important;
        background: var(--ma-surface-subtle) !important;
    }

    .student-chat-thread-page .message-bubble,
    .student-ai-chat-page .message-bubble {
        border-radius: var(--ma-radius-md) !important;
        font-size: 14px;
    }

    .student-chat-thread-page .user-message .message-bubble,
    .student-ai-chat-page .user-message .message-bubble {
        background-color: var(--ma-primary) !important;
        border-bottom-right-radius: 4px !important;
    }

    .student-chat-thread-page .other-message .message-bubble,
    .student-ai-chat-page .ai-message .message-bubble {
        background: #fff !important;
        border: 1px solid var(--ma-border);
        box-shadow: none !important;
        border-bottom-left-radius: 4px !important;
    }

    .student-chat-thread-page .chat-footer,
    .student-ai-chat-page .chat-footer {
        padding: 12px !important;
    }

    .student-chat-thread-page #message-input,
    .student-ai-chat-page #message-input {
        border-radius: var(--ma-radius-md) !important;
        background: var(--ma-surface-subtle) !important;
    }

    .student-chat-thread-page #send-btn,
    .student-ai-chat-page #send-btn {
        background: var(--ma-primary) !important;
        border-radius: var(--ma-radius-md) !important;
    }
}

/* ---------- Conversation list rows (Messages) ---------- */
@media (max-width: 991.98px) {
    .ma-list-row-avatar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--ma-surface-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--ma-primary);
        font-size: 15px;
    }

    .ma-list-row-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .ma-list-row-unread {
        background: var(--ma-primary);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }
}

/* ---------- Course detail (public course landing) ---------- */
@media (max-width: 991.98px) {
    .ma-course-hero {
        position: relative;
        margin: -16px -16px 0;
        height: 200px;
        background: var(--ma-surface-subtle);
        overflow: hidden;
    }

    .ma-course-hero img { width: 100%; height: 100%; object-fit: cover; }

    .ma-course-hero-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 31, 31, 0.25);
        color: #fff;
        font-size: 48px;
        text-decoration: none;
    }

    .ma-course-meta-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 16px 0 6px;
        font-size: 12px;
        color: var(--ma-muted);
    }

    .ma-course-meta-row i { color: var(--ma-amber); }

    .ma-course-detail-title { font-size: 20px; font-weight: 700; margin: 0 0 14px; line-height: 1.3; }

    .ma-course-stat-list {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        overflow: hidden;
        margin-bottom: 18px;
    }

    .ma-course-stat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid var(--ma-border);
        font-size: 13px;
    }

    .ma-course-stat-row:last-child { border-bottom: none; }
    .ma-course-stat-row span:first-child { color: var(--ma-muted); display: flex; align-items: center; gap: 8px; }
    .ma-course-stat-row span:last-child { font-weight: 700; color: var(--ma-text); }

    .ma-course-section-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--ma-text);
        margin: 22px 0 10px;
    }

    .ma-course-body-text { font-size: 13.5px; line-height: 1.7; color: var(--ma-text); }
    .ma-course-body-text p { margin-bottom: 10px; }

    .ma-instructor-card {
        display: flex;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 14px;
    }

    .ma-instructor-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .ma-instructor-name { font-size: 14px; font-weight: 700; margin: 0; }
    .ma-instructor-role { font-size: 11.5px; color: var(--ma-primary); font-weight: 600; }
    .ma-instructor-bio { font-size: 12.5px; color: var(--ma-muted); margin-top: 4px; line-height: 1.5; }

    .ma-review-summary {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
        padding: 16px;
        margin-bottom: 14px;
    }

    .ma-review-score { font-size: 32px; font-weight: 800; color: var(--ma-text); line-height: 1; }
    .ma-review-stars { color: var(--ma-amber); font-size: 12px; margin: 4px 0; }
    .ma-review-count { font-size: 11.5px; color: var(--ma-muted); }

    .ma-review-item {
        background: #fff;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        padding: 14px;
        margin-bottom: 10px;
    }

    .ma-review-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .ma-review-item-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
    .ma-review-item-name { font-size: 13px; font-weight: 700; margin: 0; }
    .ma-review-item-date { font-size: 11px; color: var(--ma-muted); }
    .ma-review-item-comment { font-size: 12.5px; color: var(--ma-text); line-height: 1.6; }

    .ma-enroll-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--ma-border);
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        box-shadow: var(--ma-shadow-float);
    }

    .ma-enroll-bar-price { display: flex; flex-direction: column; }
    .ma-enroll-bar-price-old { font-size: 11px; color: var(--ma-muted-light); text-decoration: line-through; }
    .ma-enroll-bar-price-now { font-size: 18px; font-weight: 800; color: var(--ma-text); }
    .ma-enroll-bar .ma-btn { flex-shrink: 0; padding: 13px 28px; }
}

/* ---------- Checkout (reskin in place — #checkoutForm/#submitBtn ids are JS-bound) ---------- */
@media (max-width: 991.98px) {
    .student-checkout-page {
        padding: 16px 0 100px !important;
        background: var(--ma-bg);
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .student-checkout-page .hero-shape-1,
    .student-checkout-page .hero-shape-2,
    .student-checkout-page .hero-shape-3 {
        display: none;
    }

    .student-checkout-page .container { padding: 0 16px; }

    .student-checkout-page .checkout-wrapper {
        padding: 18px !important;
        border-radius: var(--ma-radius-md);
        box-shadow: var(--ma-shadow-card);
    }

    .student-checkout-page .checkout-header h2 { font-size: 18px; }
    .student-checkout-page .checkout-header p { font-size: 12.5px; }

    .student-checkout-page .course-summary,
    .student-checkout-page .payment-method,
    .student-checkout-page .offline-payment-section {
        background: var(--ma-surface-subtle);
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
        padding: 14px;
    }

    .student-checkout-page .course-thumb-lg {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: var(--ma-radius-sm);
    }

    .student-checkout-page .form-check-input:checked {
        background-color: var(--ma-primary);
        border-color: var(--ma-primary);
    }

    .student-checkout-page .checkout-summary {
        background: var(--ma-surface-subtle) !important;
        border: 1px solid var(--ma-border);
        border-radius: var(--ma-radius-md);
    }

    .student-checkout-page .theme-btn {
        background: var(--ma-primary);
        border-radius: var(--ma-radius-sm);
    }

    /* Sticky bottom CTA: the real #submitBtn (JS-bound for loading state),
       repositioned instead of duplicated so payment-processing feedback still works. */
    .checkout-mobile-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--ma-border);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        box-shadow: var(--ma-shadow-float);
        margin: 0 !important;
    }
}

/* ---------- Certificate review page ---------- */
@media (max-width: 991.98px) {
    .ma-certificate-card {
        background: linear-gradient(135deg, var(--ma-primary) 0%, var(--ma-surface-tint, #8a0012) 100%);
        border-radius: var(--ma-radius-md);
        padding: 6px;
        margin-bottom: 18px;
    }

    .ma-certificate-inner {
        background: #fff;
        border-radius: 8px;
        padding: 32px 20px;
        text-align: center;
    }

    .ma-certificate-icon { font-size: 2.5rem; color: var(--ma-primary); margin-bottom: 12px; }
    .ma-certificate-label { font-size: 13px; font-weight: 700; color: var(--ma-text); margin-bottom: 14px; }
    .ma-certificate-preface { font-size: 12px; color: var(--ma-muted); margin-bottom: 6px; }
    .ma-certificate-name {
        font-size: 22px;
        font-weight: 800;
        color: var(--ma-primary);
        margin-bottom: 14px;
        display: inline-block;
        border-bottom: 2px solid var(--ma-primary);
        padding-bottom: 6px;
    }
    .ma-certificate-course { font-size: 15px; font-weight: 700; color: var(--ma-text); margin-bottom: 8px; }
    .ma-certificate-date { font-size: 11.5px; color: var(--ma-muted); }
}

/* ---------- Auth (login/register) — reskin in place ----------
   The form itself (#password, .mhq-login-form, #loginSubmitBtn, the
   recaptcha widget) keeps its exact DOM/ids; only a brand hero band is
   added above it and its appearance is restyled responsively. */
@media (max-width: 991.98px) {
    .ma-auth-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 16px;
    }

    .ma-auth-hero-logo {
        max-height: 80px;
        width: auto;
    }

    .ma-auth-hero-tagline {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.65);
        margin: 4px 0 0;
    }

    .ma-auth-page {
        background: var(--ma-bg) !important;
        padding: 0 !important;
        min-height: auto !important;
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .ma-auth-page .hero-shape-1,
    .ma-auth-page .hero-shape-2,
    .ma-auth-page .hero-shape-3 {
        display: none;
    }

    .ma-auth-page .row.justify-content-center.align-items-center.min-vh-100,
    .ma-auth-page .row.justify-content-center.align-items-center {
        min-height: auto !important;
        padding: 0 !important;
    }

    .ma-auth-page .container { padding: 0 16px; margin-top: -24px; }

    .ma-auth-page .mhq-login-wrapper,
    .ma-auth-page .mhq-register-wrapper {
        border-radius: var(--ma-radius-md) var(--ma-radius-md) 0 0;
        box-shadow: var(--ma-shadow-card);
        padding: 24px 20px !important;
    }

    .ma-auth-page .login-logo,
    .ma-auth-page .register-logo {
        display: none;
    }

    .ma-auth-page .mhq-login-header h2,
    .ma-auth-page .mhq-register-header h2 {
        font-size: 19px;
    }

    .ma-auth-page .mhq-login-header p,
    .ma-auth-page .mhq-register-header p {
        font-size: 12.5px;
    }

    .ma-auth-page .form-clt input {
        border-radius: var(--ma-radius-sm);
        font-size: 14px;
    }

    .ma-auth-page .form-clt input:focus {
        border-color: var(--ma-primary);
    }

    .ma-auth-page .theme-btn {
        background: var(--ma-primary);
        border-radius: var(--ma-radius-sm);
    }

    .ma-auth-page .back-btn {
        font-size: 13px;
        color: var(--ma-primary);
    }
}