:root {
    --gep-primary: #1a73e8;
    --gep-secondary: #7c3aed;
    --gep-primary-light: rgba(26, 115, 232, 0.1);
    --gep-success: #00c853;
    --gep-danger: #ff5252;
    --gep-warning: #ffab00;
    --gep-bg: #f3f7fa;
    --gep-white: #ffffff;
    --gep-border: #eaedf2;
    --gep-sidebar-bg: #111827;
    --gep-sidebar-text: #9ca3af;
    --gep-sidebar-hover: #1f2937;
    --gep-sidebar-active: #3b82f6;
    --gep-text-main: #1f2937;
    --gep-text-muted: #6b7280;
    --gep-sidebar-w: 240px;
    --gep-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --gep-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; }

.gep-dashboard-container {
    display: flex !important;
    min-height: 100vh;
    background: var(--gep-bg);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--gep-text-main);
}

/* Sidebar */
.gep-dashboard-sidebar {
    width: var(--gep-sidebar-w);
    background: var(--gep-sidebar-bg);
    color: var(--gep-sidebar-text);
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
 
@media (max-width: 1024px) {
    .gep-dashboard-sidebar.active {
        transform: translateX(0) !important;
        box-shadow: 20px 0 50px rgba(0,0,0,0.2);
    }
}

.gep-sidebar-logo {
    padding: 16px 20px;
    display: flex;
    align-items: center;
}

.gep-sidebar-logo span {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.gep-dashboard-nav {
    padding: 20px 0;
    flex: 1;
}

.gep-nav-section-title {
    padding: 8px 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4b5563;
    margin-top: 8px;
}

.gep-dashboard-nav a {
    display: flex !important;
    align-items: center;
    padding: 8px 20px !important;
    color: var(--gep-sidebar-text) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.gep-dashboard-nav a:hover {
    background: var(--gep-sidebar-hover);
    color: #fff !important;
}

.gep-dashboard-nav a.active {
    color: #fff !important;
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--gep-sidebar-active);
}

.gep-nav-icon {
    margin-right: 16px;
    font-size: 18px;
    width: 20px;
    display: flex;
    justify-content: center;
}

.gep-badge-new, .gep-badge-free {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    text-transform: uppercase;
}

.gep-badge-new { background: #f97316; color: white; }
.gep-badge-free { background: #10b981; color: white; }

/* ─── Sidebar: grouped nav items (Test Series > sub-items, Miscellaneous) ─── */
/* The toggle is a <button>, so it does NOT inherit the `.gep-dashboard-nav a`
   rules — it must repeat them, otherwise it renders as black default button text
   on the dark sidebar (effectively invisible) with no padding. */
.gep-nav-group-toggle-btn {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 10px 20px !important;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    color: var(--gep-sidebar-text) !important;
    transition: all 0.2s ease;
}
.gep-nav-group-toggle-btn:hover {
    background: var(--gep-sidebar-hover);
    color: #fff !important;
}
.gep-nav-group-toggle-btn::after {
    content: '▾';
    margin-left: auto;
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.gep-nav-group.open .gep-nav-group-toggle-btn::after {
    transform: rotate(180deg);
}
.gep-nav-subitems {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.gep-nav-group.open .gep-nav-subitems {
    max-height: 300px;
}
.gep-nav-subitems a {
    padding: 7px 20px 7px 56px !important;
    font-size: 12.5px !important;
    color: var(--gep-sidebar-text) !important;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    display: block !important;
}
.gep-nav-subitems a:hover {
    background: var(--gep-sidebar-hover);
    color: #fff !important;
}
.gep-nav-subitems a.active {
    color: #fff !important;
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--gep-sidebar-active);
}

/* Main Content Wrapper */
.gep-dashboard-content {
    flex: 1;
    margin-left: var(--gep-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styling */
/* The sidebar is always dark, and most portal views apply the dark "sovereign"
   theme. The header used to be white by default and near-black on sovereign
   views, so it flipped colour from page to page and left header controls
   (Contact Us, search) unreadable on whichever theme they were not designed for.
   It is now consistently dark everywhere, matching the sidebar. */
.gep-dashboard-header {
    background: #111827;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 900;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #e5e7eb;
}
 
/* Hamburger / Mobile menu toggle */
.gep-mobile-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: #e5e7eb;
    background: transparent;
    border: none;
    padding: 8px;
    margin-right: 8px;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1001; /* Above header content, below sidebar */
    flex-shrink: 0;
}
.gep-mobile-toggle:hover,
.gep-mobile-toggle:active {
    background: rgba(0,0,0,0.08);
}
/* In dark/sovereign theme */
.gep-sovereign-active .gep-mobile-toggle {
    color: #f1f5f9 !important;
}
.gep-sovereign-active .gep-mobile-toggle:hover {
    background: rgba(255,255,255,0.1) !important;
}
 
@media (max-width: 1024px) {
    .gep-mobile-toggle {
        display: flex;
        margin-right: 10px;
    }
}


.gep-header-search {
    flex: 0 1 500px;
}

.gep-header-search input {
    width: 100%;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    color: #f3f4f6;
    transition: all 0.2s;
}
.gep-header-search input::placeholder { color: #9ca3af; }

.gep-header-search input:focus {
    background: rgba(255,255,255,0.10);
    border-color: var(--gep-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
}

.gep-header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}
 
.gep-header-streak {
    background: transparent;
    color: #f59e0b;
    padding: 6px 4px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 16px;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.gep-btn-pass {
    /* darkened: white text on the old bright green was ~2.5:1 */
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: #fff;
    min-height: 36px;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 200, 83, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gep-btn-pass:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 200, 83, 0.3);
    filter: brightness(1.1);
}

.gep-header-contact-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 13px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.gep-header-contact-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.gep-header-contact-icon { font-size: 14px; }

.gep-header-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
}

/* Page Content Inner */
.gep-main-inner {
    padding: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

.gep-main-inner.gep-full-width-view {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Banner */
.gep-promo-banner {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--gep-shadow-lg);
}

.gep-promo-banner::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.gep-banner-tag {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

 .gep-banner-content h2 {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 12px;
    background: linear-gradient(to right, #fff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gep-banner-content p {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 24px;
}

.gep-banner-btn {
    background: #fff;
    color: #0f172a;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gep-banner-btn:hover {
    background: var(--gep-primary);
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

/* Quick Action Grid */
.gep-quick-actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.gep-quick-item {
    background: #ffffff;
    padding: 16px 12px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--gep-border);
    transition: all 0.3s;
}

.gep-quick-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.12);
    border-color: var(--gep-primary);
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.gep-quick-item:hover .gep-quick-icon {
    transform: scale(1.15) rotate(5deg);
}

.gep-quick-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
    transition: transform 0.3s ease;
}

.gep-quick-item span {
    font-size: 13px;
    font-weight: 700;
}

/* Test Series & Browser Page */
.gep-cat-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 30px;
    scrollbar-width: none;
}

.gep-cat-scroller::-webkit-scrollbar {
    display: none;
}

.gep-cat-chip {
    padding: 10px 22px;
    background: #fff;
    border: 1px solid var(--gep-border);
    border-radius: 30px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gep-cat-chip.active {
    background: var(--gep-primary);
    color: #fff;
    border-color: var(--gep-primary);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
}

.gep-cat-chip:hover:not(.active) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.gep-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.gep-test-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--gep-border);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.gep-test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px -5px rgba(0,0,0,0.1);
}

.gep-test-thumb {
    height: 140px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}

.gep-badge-test {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.gep-badge-free {
    background: #dcfce7;
    color: #15803d;
}

.gep-badge-premium {
    background: #fef9c3;
    color: #854d0e;
}

.gep-test-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gep-test-info h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.4;
}

.gep-test-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.gep-meta-item {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gep-test-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.gep-test-price {
    font-size: 18px;
    font-weight: 900;
    color: #1e293b;
}

.gep-btn-test {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Section Header */
.gep-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.gep-section-header h3 {
    font-size: 20px;
    font-weight: 800;
}

.gep-btn-viewall {
    color: var(--gep-primary);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

/* Stats Grid */
.gep-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.gep-stat-card {
    background: #fff;
    padding: 24px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
    border-top: 4px solid var(--gep-primary);
}

.gep-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}

.gep-stat-card.rank {
    background: linear-gradient(135deg, #fff 0%, #fffbf0 100%);
    border: 1px solid #fde68a;
    border-top: 4px solid #f59e0b;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.1);
}

.gep-stat-card.rank .gep-stat-value {
    color: #d97706;
    text-shadow: 0 2px 4px rgba(217, 119, 6, 0.1);
}

.gep-stat-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--gep-primary);
    margin-bottom: 8px;
    line-height: 1;
}

.gep-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Course Grid */
.gep-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.gep-course-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--gep-border);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gep-course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--gep-shadow-lg);
}

.gep-course-thumb {
    width: 100%;
    height: 180px;
    background: #f3f4f6;
    overflow: hidden;
}

.gep-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gep-course-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

.gep-course-info {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gep-course-info h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.4;
}

.gep-course-instructor {
    font-size: 13px;
    color: var(--gep-text-muted);
    margin-bottom: 16px;
}

.gep-course-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    margin-top: auto;
}

.gep-price {
    font-size: 20px;
    font-weight: 900;
    color: #111827;
}

.gep-btn-enroll {
    display: block;
    width: 100%;
    background: var(--gep-primary);
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.gep-btn-enroll:hover {
    background: #1557b0;
}

/* Test Grid */
.gep-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gep-test-card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--gep-border);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

.gep-test-card:hover {
    border-color: var(--gep-primary);
    box-shadow: var(--gep-shadow);
}

.gep-test-icon {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.gep-test-info {
    flex: 1;
}

.gep-test-info h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.gep-test-meta {
    font-size: 12px;
    color: var(--gep-text-muted);
    display: flex;
    gap: 12px;
}

.gep-btn-start {
    background: #f3f4f6;
    color: var(--gep-primary);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.gep-btn-start:hover {
    background: var(--gep-primary);
    color: #fff;
}

@media (max-width: 1024px) {
    .gep-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .gep-quick-actions { grid-template-columns: repeat(3, 1fr); }
    .gep-dashboard-sidebar { transform: translateX(-100%); }
    .gep-dashboard-content { margin-left: 0; }
}

@media (max-width: 640px) {
    .gep-stats-grid { grid-template-columns: 1fr; }
    .gep-quick-actions { grid-template-columns: repeat(2, 1fr); }
}


/* Auth Styling */
.gep-auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 40px 0;
}

.gep-auth-card {
    background: #fff;
    width: 100%;
    max-width: 440px;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gep-border);
}

.gep-auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.gep-auth-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin: 16px 0 8px;
}

.gep-main-inner h2 {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.gep-auth-header p {
    color: var(--gep-text-muted);
    font-size: 15px;
}

.gep-form-group {
    margin-bottom: 20px;
}

.gep-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gep-c-text);
    margin-bottom: 8px;
}

/* Premium UI Extensions */
.gep-content-card {
    background: var(--gep-c-surface);
    border-radius: 24px;
    padding: 40px;
    border: 1px solid var(--gep-c-border);
    box-shadow: var(--gep-shadow-lg);
}

.gep-rank-predictor-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.gep-predictor-header { text-align: left; margin-bottom: 24px; }
.gep-predictor-header h2 { font-size: 32px; font-weight: 750; line-height: 1.25; letter-spacing: -.7px; margin: 0 0 12px; color: var(--gep-c-text); }
.gep-predictor-header p { color: var(--gep-c-text-muted); font-size: 14px; line-height: 1.7; margin: 0; max-width: 640px; }
#gep-page-wrapper .gep-rank-predictor-wrapper .gep-content-card { padding: 28px; border-radius: 16px; box-shadow: 0 2px 6px rgba(15,23,42,.035); }
#gep-page-wrapper .gep-predictor-calculate { min-height: 44px; padding: 12px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; background: var(--gep-c-accent) !important; color: var(--gep-c-accent-text) !important; border: 0; cursor: pointer; }
.gep-predictor-result { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--gep-c-border); }
.gep-predictor-result h3 { margin: 0 0 18px; font-size: 18px; color: var(--gep-c-text); }
.gep-predictor-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.gep-predictor-metric, .gep-predictor-band { padding: 18px; border: 1px solid var(--gep-c-border); border-radius: 10px; background: var(--gep-c-surface-2); }
.gep-predictor-metric span, .gep-predictor-band div > span { display: block; font-size: 12px; color: var(--gep-c-text-muted); margin-bottom: 8px; }
.gep-predictor-metric strong { font-size: 24px; color: var(--gep-c-text); overflow-wrap: anywhere; }
.gep-predictor-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gep-predictor-band strong { font-size: 14px; }
#gep-predicted-note { font-size: 13px; line-height: 1.7; color: var(--gep-c-text-muted); margin: 18px 0 0; }
.gep-predictor-note { margin-top: 24px; padding: 20px; border-radius: 10px; background: var(--gep-c-surface-2); color: var(--gep-c-text-muted); }
.gep-predictor-note p { font-size: 13px; line-height: 1.7; margin: 0; }
.gep-predictor-note p + p { margin-top: 4px; }
@media (max-width: 600px) {
    #gep-page-wrapper .gep-rank-predictor-wrapper .gep-content-card { padding: 20px; }
    .gep-predictor-metrics { grid-template-columns: 1fr; }
    #gep-page-wrapper .gep-predictor-calculate { width: 100%; }
}

.gep-skill-hero {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 30px;
    border-radius: 24px;
    border: 1px solid var(--gep-border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.gep-skill-hero-content {
    flex: 1.2;
}

.gep-skill-hero-image {
    flex: 0.8;
}

.gep-skill-hero h2 {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.gep-skill-stats {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.gep-skill-stat-item {
    background: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    flex: 1;
    transition: transform 0.2s;
}

.gep-skill-stat-item:hover {
    transform: scale(1.02);
}

.gep-skill-stat-item .val {
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: var(--gep-primary);
}

.gep-skill-stat-item .label {
    color: var(--gep-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.gep-skill-track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.gep-skill-card {
    background: #fff;
    padding: 24px 16px;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.gep-skill-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08);
    border-color: var(--gep-primary);
}

.gep-skill-card .icon {
    font-size: 32px;
    margin-bottom: 15px;
    display: block;
}

.gep-skill-card .name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 5px;
}

.gep-skill-card .count {
    font-size: 11px;
    color: var(--gep-primary);
    font-weight: 600;
    text-transform: uppercase;
}

/* Form Styling Improvements */
.gep-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

.gep-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    font-size: 15px;
    transition: all 0.2s;
    background: #f8fafc;
}

.gep-input:focus {
    border-color: var(--gep-primary);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
}

.gep-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0;
    font-size: 14px;
}

.gep-link {
    color: var(--gep-primary);
    text-decoration: none;
    font-weight: 600;
}

.gep-btn-block {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
}

.gep-auth-footer {
    text-align: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
    font-size: 14px;
    color: var(--gep-text-muted);
}

/* Watch Page */
.gep-watch-container {
    display: flex;
    gap: 0;
    height: calc(100vh - 64px);
    margin: -40px;
    background: #0f172a;
}

.gep-watch-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
}

.gep-player-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
}

.gep-no-video {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.gep-empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.gep-watch-details {
    padding: 40px;
    background: #fff;
}

.gep-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--gep-border);
    padding-bottom: 20px;
}

.gep-details-header h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 12px;
}

.gep-details-meta {
    display: flex;
    gap: 24px;
    color: var(--gep-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.gep-details-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gep-btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.gep-btn-back:hover {
    background: #e2e8f0;
}

.gep-lesson-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    max-width: 900px;
}

/* Watch Sidebar */
.gep-watch-sidebar {
    width: 380px;
    background: #f8fafc;
    border-left: 1px solid var(--gep-border);
    display: flex;
    flex-direction: column;
}

.gep-sidebar-header {
    padding: 24px;
    background: #fff;
    border-bottom: 1px solid var(--gep-border);
}

.gep-sidebar-header h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}

.gep-progress-summary {
    font-size: 12px;
    color: var(--gep-text-muted);
    font-weight: 600;
}

.gep-playlist {
    flex: 1;
    overflow-y: auto;
}

.gep-playlist-item {
    display: flex;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-decoration: none;
    color: inherit;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.2s;
}

.gep-playlist-item:hover {
    background: #fff;
}

.gep-playlist-item.active {
    background: #fff;
    border-left: 4px solid var(--gep-primary);
}

.gep-item-index {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.gep-playlist-item.active .gep-item-index {
    background: var(--gep-primary);
    color: #fff;
}

.gep-item-info h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1e293b;
}

.gep-playlist-item.active .gep-item-info h4 {
    color: var(--gep-primary);
}

.gep-item-meta {
    font-size: 12px;
    color: var(--gep-text-muted);
}

@media (max-width: 1280px) {
    .gep-watch-sidebar { width: 320px; }
}

@media (max-width: 1024px) {
    .gep-watch-container { flex-direction: column; height: auto; }
    .gep-watch-sidebar { width: 100%; height: 400px; }
}

/* Profile Page */
.gep-profile-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.gep-profile-header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.gep-profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.gep-profile-avatar img {
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.gep-avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--gep-primary);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s;
}

.gep-avatar-edit:hover {
    transform: scale(1.1);
}

.gep-profile-intro h1 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 2px;
}

.gep-profile-intro p {
    color: var(--gep-text-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.gep-profile-badges {
    display: flex;
    gap: 12px;
}

.gep-badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.gep-badge-item.streak {
    background: rgba(234, 88, 12, 0.15);
    color: #fdba74;
    border: 1px solid rgba(234, 88, 12, 0.3);
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.05);
    animation: neuralGlow 3s infinite alternate ease-in-out;
}

@keyframes neuralGlow {
    0% { box-shadow: 0 0 5px rgba(234, 88, 12, 0.05); filter: brightness(1); }
    100% { box-shadow: 0 0 15px rgba(234, 88, 12, 0.2); filter: brightness(1.05); }
}

.gep-badge-item.rank {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.gep-profile-content {
    display: flex;
    gap: 30px;
}

.gep-profile-sidebar {
    width: 220px;
    flex-shrink: 0;
}

.gep-profile-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 40px;
}

.gep-profile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #94a3b8;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.gep-profile-nav a i {
    font-size: 18px;
    opacity: 0.7;
}

.gep-profile-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.gep-profile-nav a.active {
    background: var(--gep-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
    transform: scale(1.02);
}

.gep-profile-main {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-height: 450px; /* Prevent layout jump */
}

.gep-profile-completeness {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.gep-profile-completeness .label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.gep-profile-completeness .label-row span {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

/* On the dark panel the indigo token is 4.45:1; #818cf8 is 6.67:1. */
.gep-profile-completeness .label-row .val {
    color: #818cf8;
}

.gep-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.gep-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 4px;
    transition: width 1s ease-in-out;
}

.completeness-tip {
    font-size: 11px;
    color: var(--gep-text-muted);
    line-height: 1.4;
    margin: 0;
}

.gep-section-header-compact {
    margin-bottom: 30px;
}

.gep-section-header-compact h3 {
    margin-bottom: 6px !important;
}

.gep-section-header-compact p {
    font-size: 14px;
    color: var(--gep-text-muted);
    margin: 0;
}

.gep-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.gep-form-section {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.gep-form-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-desc {
    color: var(--gep-text-muted);
    font-size: 14px;
    margin-bottom: 30px;
    margin-top: -15px;
}

.gep-input-readonly-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gep-lock-icon {
    position: absolute;
    right: 15px;
    font-size: 14px;
    opacity: 0.5;
}

.gep-info-text {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.gep-input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.gep-input:focus {
    background: #fff;
    border-color: var(--gep-primary);
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1), inset 0 2px 4px rgba(0,0,0,0.01);
    outline: none;
}

.gep-profile-nav a.active {
    background: #1a73e8; /* Deep professional blue */
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(26, 115, 232, 0.4);
    transform: translateY(-1px);
}

.gep-form-section h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gep-form-section h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--gep-primary);
    border-radius: 2px;
}

.gep-alert {
    padding: 16px 24px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gep-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.gep-alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* NOTE: a stale light-theme `.gep-profile-header { background:#fff }` used to sit
   here. It overrode the dark-glass definition earlier in this file, turning the
   profile hero card white while its <h1> kept `color:#fff` — so the student's own
   name was invisible. Only the layout bits are kept; the dark card wins again. */
.gep-profile-header {
    padding: 24px 30px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.gep-profile-avatar {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.gep-profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .gep-profile-content { flex-direction: column; }
    .gep-profile-sidebar { width: 100%; }
    .gep-profile-nav { flex-direction: row; overflow-x: auto; padding-bottom: 10px; }
    .gep-profile-nav a { white-space: nowrap; }
}

@media (max-width: 640px) {
    .gep-profile-header { flex-direction: column; text-align: center; }
    .gep-grid-2 { grid-template-columns: 1fr; }
}

/* Portal Sidebar Stats */
.gep-sidebar-user-stats {
    padding: 0 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gep-stat-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
    text-decoration: none;
}

.gep-stat-mini:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
}

.gep-stat-mini .icon {
    font-size: 14px;
}

.gep-stat-mini .val {
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Header Streak */
.gep-header-streak {
    padding: 8px 4px;
    background: transparent;
    color: #c2410c;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 800;
    border: none;
    margin-right: 15px;
}

/* Profile Form Actions */
.gep-form-actions {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--gep-border);
    display: flex;
    align-items: center;
    gap: 20px;
}
/* Profile Page Extensions */
.gep-tier-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.gep-tier-badge.sovereign {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.gep-tier-badge.scholar {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #e0f2fe;
}
.gep-neural-id {
    margin: 15px 0;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
    border: 1px solid #e2e8f0;
}
/* Sits on a light #f8fafc chip: the indigo token is 4.27:1 there, #4f46e5 is 6.01:1. */
.gep-neural-id code {
    color: #4f46e5;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.gep-security-shield {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}
.gep-security-shield .shield-icon { font-size: 18px; }
.gep-security-shield .shield-text {
    font-size: 11px;
    font-weight: 800;
    color: #166534;
    letter-spacing: 0.5px;
}
.gep-security-shield.active .shield-icon {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.gep-nav-logout {
    margin-top: 15px !important;
    color: #ef4444 !important;
    border-top: 1px solid var(--gep-border);
    padding-top: 15px !important;
}
.gep-nav-logout:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.gep-btn-logout-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    /* #ef4444 on white is 3.76:1 — below the 4.5:1 AA minimum for 14px text.
       #dc2626 is 4.83:1 and keeps the same red identity. */
    color: #dc2626;
    border: 1px solid #fee2e2;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.gep-btn-logout-alt:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.gep-btn-logout-alt span {
    font-size: 18px;
}

/* ==========================================================================
   Responsive Overrides & Enhancements
   ========================================================================== */

/* Stack the form grids on smaller screens */
@media (max-width: 640px) {
    .gep-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Header Responsiveness */
@media (max-width: 768px) {
    .gep-dashboard-header {
        padding: 0 12px !important;
        gap: 10px !important;
    }
    .gep-header-actions {
        gap: 12px !important;
    }
    .gep-header-streak {
        padding: 4px 8px !important;
        font-size: 11px !important;
        margin-right: 0 !important;
    }
    .gep-btn-pass {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    .gep-header-contact-link {
        padding: 6px 8px !important;
    }
    .gep-header-contact-label {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .gep-header-streak {
        display: none !important;
    }
    .gep-btn-pass {
        display: none !important;
    }
    .gep-header-search input {
        height: 36px !important;
        font-size: 13px !important;
        padding: 0 10px !important;
    }
}

/* Advanced Telemetry Grid & Features Grids */
.gep-advanced-telemetry-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
}

@media (max-width: 768px) {
    .gep-advanced-telemetry-grid {
        grid-template-columns: 1fr;
    }
}

.gep-predictor-features {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

@media (max-width: 640px) {
    .gep-predictor-features {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DASHBOARD MOBILE OVERHAUL — PHONE-FIRST FIX
   ========================================================================== */

/* ── TABLET ≤1024px: Hide sidebar by default, show when .active ─────────── */
@media (max-width: 1024px) {
    .gep-dashboard-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: fixed !important;
        z-index: 9999 !important;
        height: 100vh !important;
    }
    .gep-dashboard-sidebar.active {
        transform: translateX(0) !important;
    }
    /* Sidebar backdrop */
    .gep-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        backdrop-filter: blur(2px);
    }
    .gep-sidebar-backdrop.active {
        display: block !important;
    }
    /* Content takes full width */
    .gep-dashboard-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ── MOBILE ≤640px ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* Dashboard layout */
    .gep-dashboard-container {
        flex-direction: column;
    }
    .gep-dashboard-content {
        padding: 12px !important;
        overflow-x: hidden;
    }

    /* Header */
    .gep-dashboard-header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 12px !important;
    }
    .gep-header-search { display: none !important; }

    /* Mobile hamburger toggle */
    .gep-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #f3f4f6;
        border: none;
        cursor: pointer;
        font-size: 18px;
        margin-right: 12px;
    }

    /* Stats row: 2 cols */
    .gep-stats-row,
    .gep-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .gep-stat-card {
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    /* Cards grid: 1 column */
    .gep-cards-grid,
    .gep-test-cards-grid,
    .gep-series-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Section headers */
    .gep-section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Tables: horizontal scroll */
    .gep-attempts-table-wrap,
    .gep-table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .gep-attempts-table-wrap table,
    .gep-table-responsive table {
        min-width: 500px;
    }

    /* Card body padding reduction */
    .gep-card-body {
        padding: 14px !important;
    }

    /* Buttons: full width on mobile */
    .gep-btn-full-mobile {
        width: 100% !important;
        text-align: center !important;
    }

    /* Bottom padding for safe area */
    .gep-dashboard-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

/* ── TINY ≤390px ────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
    .gep-dashboard-header { height: 52px !important; }
    .gep-dashboard-content { padding: 10px !important; }
    .gep-stats-row,
    .gep-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .gep-stat-card { padding: 10px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTRAST & THEME CORRECTIONS
   Added after auditing every portal screen at 360–1920px in a real browser.
   The palette's semantic colours (emerald / amber / sky / slate / indigo) were
   picked for dark surfaces but are also used as text on white cards, where they
   fell well below the WCAG AA 4.5:1 minimum. Each rule below pairs a colour with
   the surface it actually sits on.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Dark surfaces: muted text was too dim (≈4.2:1) --------------------------- */
.gep-sovereign-active .pill-label,
.gep-sovereign-active .gep-metric-label,
.gep-sovereign-active .lbl {
    color: #a1a1aa !important;
}

/* --- Dark surfaces: form labels were near-black on near-black ----------------- */
.gep-profile-wrapper .gep-form-group label {
    color: #e2e8f0;
}
.gep-sovereign-active .gep-info-text,
.gep-sovereign-active small.gep-info-text {
    color: #a1a1aa !important;
}

/* --- Indigo on dark: lift to the 300-weight so it reads as a link ------------- */
.gep-sovereign-active .asset-badge-micro {
    color: #a5b4fc !important;
    border-color: rgba(165,180,252,0.45) !important;
}

/* --- White-on-colour buttons: darken the fill so white text passes AA --------- */
/* The box belongs here too, not only in one view's <style> block. These classes
   are used across several templates but were only given their padding and
   display in templates/dashboard/main.php, so anywhere else (the About page,
   for one) they rendered as a bare inline <a>: vertical padding on an inline
   box does not grow it, leaving a 21px-tall tap target with a green fill. */
.gep-btn-mini,
.gep-btn-strip {
    background: #047857 !important;
    border-color: #065f46 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 12px;
    text-decoration: none;
    touch-action: manipulation;
}
.gep-btn-mini:hover,
.gep-btn-strip:hover { background: #065f46 !important; }

/* Touch devices need a comfortable target on the small action buttons that sit
   at 29-30px on a phone. Applied only where the pointer is actually coarse, so
   the desktop density is unchanged. */
@media (hover: none) and (pointer: coarse) {
    .gep-btn-mini,
    .gep-btn-strip,
    .gep-btn-sovereign-primary,
    .gep-btn-sovereign-secondary,
    .filter-btn,
    .domain-chip,
    .gep-popular-tab-btn,
    .gep-pyq-tab-btn,
    .t-btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
}
.gep-popular-tab-btn.active,
.gep-pyq-tab-btn.active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

/* --- Indigo primary buttons: #6366f1 gave white text only 4.47:1 ------------- */
.gep-btn-primary,
button[style*="background: #6366f1"],
a[style*="background: #6366f1"],
[style*="background: linear-gradient(135deg,#6366f1"],
[style*="background: linear-gradient(135deg, #6366f1"] {
    background: #4f46e5 !important;
}

/* --- Coloured text on LIGHT cards: use the dark end of each ramp -------------- */
.gep-badge-free { background: #047857; color: #fff !important; }
.gep-hcard-badge { background: #047857 !important; color: #fff !important; }
.gep-grade-badge { color: #b45309 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET
   Many portal templates set their grid columns in inline `style` attributes,
   which no ordinary stylesheet rule can override — so on phones those grids
   stayed 3- and 4-across and the extra columns were pushed outside the content
   box (which clips, so they became completely unreachable — e.g. 2 of the 3
   pricing plans on Get Pass). These attribute-substring rules collapse exactly
   those inline grids at small widths, without touching desktop layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet portrait and below: 4+ column grids become 2 columns */
@media (max-width: 900px) {
    .gep-main-inner [style*="grid-template-columns: repeat(6"],
    .gep-main-inner [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .gep-main-inner [style*="grid-template-columns: 1.8fr"],
    .gep-main-inner [style*="grid-template-columns: 1.2fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Phones: every multi-column inline grid becomes a single column */
@media (max-width: 640px) {
    .gep-main-inner [style*="grid-template-columns: repeat(6"],
    .gep-main-inner [style*="grid-template-columns: repeat(4"],
    .gep-main-inner [style*="grid-template-columns: repeat(3"],
    .gep-main-inner [style*="grid-template-columns: repeat(2"],
    .gep-main-inner [style*="grid-template-columns: 1fr 1fr"],
    .gep-main-inner [style*="grid-template-columns: 1.8fr"],
    .gep-main-inner [style*="grid-template-columns: 1.2fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Inline flex rows (button groups, stat rows) must wrap rather than clip */
    .gep-main-inner [style*="display: flex"]:not(.gep-hscroll-row) {
        flex-wrap: wrap;
    }
    /* Generous side padding is wasteful on a 360px screen */
    .gep-main-inner [style*="padding: 40px"] { padding: 20px !important; }
    .gep-main-inner [style*="padding: 35px"] { padding: 18px !important; }
    .gep-main-inner [style*="padding: 30px"] { padding: 16px !important; }
}

/* Data tables: scroll inside their own box instead of being clipped */
@media (max-width: 768px) {
    .gep-main-inner table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Nothing in the portal content may push the page sideways */
.gep-main-inner img,
.gep-main-inner video,
.gep-main-inner iframe { max-width: 100%; }

/* Hero stat blocks sit on white cards, so their emerald/slate values need the
   darker end of the ramp (they were 2.4:1 against white). */
.gep-skill-hero .val[style*="#10b981"],
.gep-skill-stats .val[style*="#10b981"] { color: #047857 !important; }
.gep-skill-hero .label,
.gep-skill-stats .label { color: #475569 !important; }

/* Rank/Question Predictor feature strip sits directly on the dark page
   background, so its headings inherited the light-theme text colour. */
.gep-predictor-features h4 { color: var(--gep-c-text); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.gep-predictor-features span { color: var(--gep-c-text); font-size: 24px; }

/* ── Page headings that sit directly on the dark portal background ──────────
   These inherit --gep-text-main (#1f2937), which was chosen for the old light
   theme and is unreadable on the near-black page. Cards that set their own
   background are unaffected. */
.gep-sovereign-active .gep-page-header h1,
.gep-sovereign-active .gep-page-header h2,
.gep-sovereign-active .gep-page-header h3 { color: #f3f4f6; }
.gep-sovereign-active .gep-page-header p  { color: #a1a1aa; }

/* Muted copy inside WHITE cards: #94a3b8 is only ~2.5:1 on white. */
.gep-support-container [style*="color: #94a3b8"],
.gep-pricing-card [style*="color: #94a3b8"],
.gep-pricing-card li,
.gep-pricing-card span,
.gep-support-container p,
.gep-support-container div[style*="#94a3b8"] { color: #64748b !important; }
.gep-pricing-card [style*="color: #10b981"] { color: #047857 !important; }

/* Video Lectures: section headings sit on the dark page background but kept the
   light-theme slate colour. */
.gep-sovereign-active .section-title,
.gep-sovereign-active h2.section-title { color: #f3f4f6 !important; }
.gep-sovereign-active .gep-lecture-group h3,
.gep-sovereign-active .gep-main-inner > div > h3 { color: #e5e7eb; }

/* Muted meta text on white cards (results list, typing log).
   Scope these to actual light surfaces ONLY. A previous, broader version of this
   rule matched `.gep-main-inner p/div`, but `.gep-main-inner` also holds copy that
   sits directly on the dark page background (#09090b) — the dashboard hero
   subtitle, "Explore all exams", the profile completeness tip. There #94a3b8 is
   7.8:1 and #64748b only 4.2:1, so the "fix" was pushing readable text below AA.
   Darkening muted text is correct on white and wrong on black; it must never be
   applied by page region, only by surface. */
.gep-premium-table [style*="color: #94a3b8"],
.gep-typing-log [style*="color: #94a3b8"],
.gep-card [style*="color: #94a3b8"],
.gep-white-card [style*="color: #94a3b8"],
.gep-profile-card [style*="color: #94a3b8"] { color: #64748b !important; }
.gep-main-inner [style*="color: #0ea5e9"] { color: #0369a1 !important; }