/* ============================================================================
   MathQuest - Adaptive Learning System
   Modern Light Theme — Airbnb-inspired Design
   ============================================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --primary: #6C63FF;
    --primary-light: #8B83FF;
    --primary-dark: #5A52D5;
    --primary-bg: #F0EEFF;
    --secondary: #FF6584;
    --secondary-light: #FF8DA1;
    --success: #00C9A7;
    --success-bg: #E6FAF5;
    --warning: #FFD93D;
    --warning-bg: #FFF9E6;
    --danger: #FF4757;
    --danger-bg: #FFF0F1;
    --bg-body: #F7F8FC;
    --bg-card: #FFFFFF;
    --bg-input: #F3F4F8;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #9ca3af;
    --border: #e8eaf0;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', 'Helvetica Neue', sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ---------- Navbar ---------- */
.mq-navbar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.mq-navbar .navbar-brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mq-navbar .navbar-brand .brand-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mq-navbar .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.mq-navbar .nav-link:hover,
.mq-navbar .nav-link.active {
    color: var(--primary);
    background: var(--primary-bg);
}

.mq-navbar .user-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mq-navbar .user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.mq-navbar .btn-logout {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    transition: all var(--transition);
}

.mq-navbar .btn-logout:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-bg);
}

.mq-navbar .role-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-bg);
    color: var(--primary);
}

/* ---------- Cards ---------- */
.mq-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: box-shadow var(--transition);
    overflow: hidden;
}

.mq-card:hover {
    box-shadow: var(--shadow-md);
}

.mq-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mq-card .card-body {
    padding: 1.25rem;
}

/* ---------- Stat Cards ---------- */
.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    text-align: center;
    transition: all var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-card.stat-level .stat-value { color: var(--primary); }
.stat-card.stat-streak .stat-value { color: #f59e0b; }
.stat-card.stat-hearts .stat-value { color: var(--danger); }
.stat-card.stat-accuracy .stat-value { color: var(--success); }

/* ---------- XP Progress Bar ---------- */
.xp-bar-wrapper {
    background: #e8eaf0;
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
    margin-top: 8px;
}

.xp-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.6s ease;
}

/* ---------- Buttons ---------- */
.btn-mq-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition);
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}

.btn-mq-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.4);
    color: white;
}

.btn-mq-primary:active {
    transform: translateY(0);
}

.btn-mq-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition);
}

.btn-mq-outline:hover {
    background: var(--primary-bg);
    color: var(--primary-dark);
}

.btn-mq-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.btn-mq-ghost:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* ---------- Forms / Inputs ---------- */
.mq-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-left: 2.75rem;
    background: var(--bg-input);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all var(--transition);
}

.mq-input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.mq-input::placeholder {
    color: var(--text-muted);
}

.mq-input-group {
    position: relative;
}

.mq-input-group .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.mq-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---------- Skill Tree Nodes ---------- */
.skill-node {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 150px;
    max-width: 220px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.skill-node::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
}

.skill-node.clickable {
    cursor: pointer;
}

.skill-node.clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Node States */
.skill-node.node-mastered {
    border-color: var(--success);
    background: var(--success-bg);
}
.skill-node.node-mastered::before {
    background: var(--success);
}

.skill-node.node-progress {
    border-color: var(--primary);
    background: var(--primary-bg);
    animation: pulse-soft 2.5s infinite;
}
.skill-node.node-progress::before {
    background: var(--primary);
}

.skill-node.node-available {
    border-color: var(--border);
}
.skill-node.node-available::before {
    background: #d1d5db;
}

.skill-node.node-remediation {
    border-color: var(--warning);
    background: var(--warning-bg);
    animation: pulse-warm 2.5s infinite;
}
.skill-node.node-remediation::before {
    background: var(--warning);
}

.skill-node.node-paused {
    border-color: #f59e0b;
    background: #FFFBEB;
}
.skill-node.node-paused::before {
    background: #f59e0b;
}

.skill-node.node-locked {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f9fafb;
}
.skill-node.node-locked::before {
    background: #e5e7eb;
}

.node-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.node-mastery .progress {
    height: 5px;
    border-radius: var(--radius-full);
    background: #e8eaf0;
}

.node-meta {
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    color: var(--text-muted);
}

.node-meta .badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* ---------- Assessment UI ---------- */
.assessment-container {
    max-width: 700px;
    margin: 0 auto;
}

.option-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
}

.option-card:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-bg);
    transform: translateX(4px);
}

.option-card:disabled {
    cursor: default;
    opacity: 0.85;
}

.option-card.correct {
    border-color: var(--success) !important;
    background: var(--success-bg) !important;
}

.option-card.incorrect {
    border-color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

/* ---------- Quest Cards ---------- */
.quest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 0.5rem;
    transition: all var(--transition);
}

.quest-item:hover {
    background: var(--bg-input);
}

.quest-item.completed {
    opacity: 0.5;
    text-decoration: line-through;
}

.quest-item .quest-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.quest-item .quest-icon.practice { background: var(--primary-bg); }
.quest-item .quest-icon.review { background: var(--success-bg); }
.quest-item .quest-icon.remediation { background: var(--warning-bg); }

.quest-item .quest-xp {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-bg);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ---------- Badge Grid ---------- */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 12px;
}

.badge-item {
    text-align: center;
    padding: 10px 4px;
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.badge-item:hover {
    background: var(--bg-input);
    transform: scale(1.05);
}

.badge-item .badge-icon {
    font-size: 1.8rem;
    margin-bottom: 4px;
}

.badge-item .badge-name {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.2;
}

.badge-item.locked {
    opacity: 0.3;
    filter: grayscale(1);
}

/* ---------- Hearts ---------- */
.heart {
    font-size: 1.2rem;
    display: inline-block;
    transition: transform var(--transition);
}

.heart.lost {
    animation: heartBeat 0.4s ease;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(0.8); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ---------- Streak Badge ---------- */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---------- Animations ---------- */
@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(108, 99, 255, 0); }
}

@keyframes pulse-warm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 61, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(255, 213, 61, 0); }
}

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

.animate-in {
    animation: fadeInUp 0.4s ease forwards;
}

/* ---------- Login / Register Pages ---------- */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    animation: fadeInUp 0.5s ease;
}

.auth-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-brand .brand-logo {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(108, 99, 255, 0.15);
}

.auth-brand h1 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.auth-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.auth-divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    background: var(--bg-card);
    padding: 0 12px;
    position: relative;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ---------- Role Cards (Register) ---------- */
.role-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    flex: 1;
}

.role-card:hover {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.role-card.selected {
    border-color: var(--primary);
    background: var(--primary-bg);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.role-card .role-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.role-card .role-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* ---------- Teacher Dashboard ---------- */
.student-row {
    transition: background var(--transition);
}

.student-row:hover {
    background: var(--bg-input);
}

.mastery-bar {
    height: 8px;
    border-radius: var(--radius-full);
    background: #e8eaf0;
    overflow: hidden;
    min-width: 80px;
}

.mastery-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.mastery-bar-fill.high { background: var(--success); }
.mastery-bar-fill.mid { background: var(--warning); }
.mastery-bar-fill.low { background: var(--danger); }

/* ---------- Alert Cards ---------- */
.alert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: 0.75rem;
}

.alert-card.alert-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
}

.alert-card.alert-danger {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.alert-card.alert-success {
    border-color: var(--success);
    background: var(--success-bg);
}

.alert-card.alert-info {
    border-color: var(--primary);
    background: var(--primary-bg);
}

/* ---------- Tables ---------- */
.mq-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.mq-table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.mq-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-secondary);
    vertical-align: middle;
}

.mq-table tr:last-child td {
    border-bottom: none;
}

.mq-table tr:hover td {
    background: var(--bg-input);
}

/* ---------- Multiplayer / Challenge ---------- */
.matchmaking-pulse {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: matchPulse 1.5s infinite;
    margin: 0 auto;
}

@keyframes matchPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(108, 99, 255, 0); }
}

.vs-badge {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--secondary), var(--danger));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(255, 101, 132, 0.3);
}

/* ---------- Empty States ---------- */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* ---------- Grade Header ---------- */
.grade-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .auth-card {
        padding: 1.75rem;
        border-radius: var(--radius-lg);
    }

    .skill-node {
        min-width: 120px;
        max-width: 160px;
        padding: 10px 12px;
    }

    .node-title {
        font-size: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card .stat-value {
        font-size: 1.2rem;
    }

    .mq-navbar {
        padding: 0.5rem 1rem;
    }
}

/* ---------- Utility Classes ---------- */
.text-primary-mq { color: var(--primary) !important; }
.text-success-mq { color: var(--success) !important; }
.text-warning-mq { color: #f59e0b !important; }
.text-danger-mq { color: var(--danger) !important; }
.bg-primary-mq { background: var(--primary-bg) !important; }
.bg-success-mq { background: var(--success-bg) !important; }
.bg-warning-mq { background: var(--warning-bg) !important; }
.bg-danger-mq { background: var(--danger-bg) !important; }

/* Override Bootstrap dark classes that might remain */
.bg-dark { background: var(--bg-card) !important; }
.text-light { color: var(--text-primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.border-secondary { border-color: var(--border) !important; }
.text-warning { color: var(--primary) !important; }
.btn-outline-warning { 
    color: var(--primary) !important; 
    border-color: var(--primary) !important;
}
.btn-outline-warning:hover {
    background: var(--primary) !important;
    color: white !important;
}
.btn-warning {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}
.btn-warning:hover {
    background: var(--primary-dark) !important;
}

.stat-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e2e8f0;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.stat-card .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
}
.stat-card .stat-label {
    font-size: 0.68rem;
    margin-top: 1px;
    font-weight: 600;
}
.stat-card * {
    color: #1e293b !important;
    font-weight: 700;
}
.stat-card .stat-label {
    font-weight: 600;
    color: #475569 !important;
}
.stat-card .xp-bar-wrapper {
    background: rgba(99, 102, 241, 0.15);
    border-radius: 99px;
    margin-top: 6px;
    height: 6px;
    width: 80%;
    overflow: hidden;
}
.stat-card .xp-bar-fill {
    background: linear-gradient(90deg, #6366f1, #818cf8);
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}

.stat-level { background: linear-gradient(135deg, #faf9ff, #f3f0ff); }
.stat-streak { background: linear-gradient(135deg, #fffafa, #fff0f0); }
.stat-hearts { background: linear-gradient(135deg, #f8fffe, #f0fcfb); }
.stat-accuracy { background: linear-gradient(135deg, #f9fefb, #f0fdf4); }

.stat-mastered { background: linear-gradient(135deg, #faf9ff, #f3f0ff); }

@media (max-width: 991px) {
    .mq-navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        padding: 12px 16px;
        z-index: 1000;
    }
    .mq-navbar .nav-link {
        padding: 10px 16px;
        border-radius: 8px;
    }
    .mq-navbar .nav-link:hover {
        background: #f8f9fc;
    }
    .mq-navbar .user-area {
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
    }
}

.wt-instruction code {
    background: #1e293b;
    color: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.wt-card pre,
.wt-card code,
.wt-solution pre,
.wt-solution code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
}

.wt-card textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================================================
   DARK THEME
   Activated by: <html data-theme="dark">
   Toggle via PSTheme.toggle() in theme_toggle.js
   ============================================================================ */

/* --- Smooth transition between themes --- */
body, .mq-navbar, .stat-card, .skill-node, .mq-input, .card,
.mq-card, .feature-card, .course-card, .btn, .alert-card,
.form-control, .form-select {
    transition: background-color 0.3s ease, color 0.3s ease, 
                border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Theme Toggle Button --- */
.theme-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    padding: 0;
    line-height: 1;
}
.theme-toggle-btn:hover {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary);
    transform: rotate(15deg);
}
/* Show/hide sun/moon icons based on theme */
[data-theme="light"] .theme-toggle-btn .bi-sun-fill { display: none; }
[data-theme="dark"] .theme-toggle-btn .bi-moon-fill { display: none; }
[data-theme="dark"] .theme-toggle-btn .bi-sun-fill { display: inline; }

/* --- Dark Theme Variables --- */
[data-theme="dark"] {
    --primary: #7c73ff;
    --primary-light: #9b94ff;
    --primary-dark: #6C63FF;
    --primary-bg: rgba(108, 99, 255, 0.12);
    --secondary: #ff7a94;
    --secondary-light: #ff9db2;
    --success: #00ddb8;
    --success-bg: rgba(0, 201, 167, 0.1);
    --warning: #ffd84d;
    --warning-bg: rgba(255, 217, 61, 0.1);
    --danger: #ff5c6c;
    --danger-bg: rgba(255, 71, 87, 0.1);
    --bg-body: #0f1117;
    --bg-card: #1a1d2e;
    --bg-input: #252836;
    --text-primary: #e8eaed;
    --text-secondary: #a1a7b4;
    --text-muted: #6b7280;
    --border: #2d3148;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

/* --- Dark: Scrollbar --- */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* --- Dark: Navbar --- */
[data-theme="dark"] .mq-navbar {
    background: #141725;
    border-bottom-color: #2d3148;
    box-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* --- Dark: Stat Cards --- */
[data-theme="dark"] .stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border);
}

/* --- Dark: Skill Nodes --- */
[data-theme="dark"] .skill-node {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .skill-node.node-mastered {
    background: rgba(0, 201, 167, 0.08);
    border-color: var(--success);
}
[data-theme="dark"] .skill-node.node-progress {
    background: rgba(108, 99, 255, 0.08);
    border-color: var(--primary);
}
[data-theme="dark"] .skill-node.node-locked {
    opacity: 0.35;
    background: #151827;
}

/* --- Dark: Forms --- */
[data-theme="dark"] .mq-input:focus {
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(124, 115, 255, 0.15);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(124, 115, 255, 0.15);
}

/* --- Dark: Buttons --- */
[data-theme="dark"] .btn-mq-outline {
    border-color: var(--primary);
    color: var(--primary-light);
}
[data-theme="dark"] .btn-mq-outline:hover {
    background: rgba(108, 99, 255, 0.1);
}
[data-theme="dark"] .btn-mq-ghost:hover {
    background: var(--bg-input);
}

/* --- Dark: Cards (Bootstrap + Custom) --- */
[data-theme="dark"] .card {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
[data-theme="dark"] .mq-card {
    background: var(--bg-card);
    border-color: var(--border);
}

/* --- Dark: Auth Pages --- */
[data-theme="dark"] .mq-auth-container {
    background: var(--bg-card);
}

/* --- Dark: Tables --- */
[data-theme="dark"] table {
    color: var(--text-primary);
}
[data-theme="dark"] th {
    color: var(--text-secondary);
    border-color: var(--border);
}
[data-theme="dark"] td {
    border-color: var(--border);
}
[data-theme="dark"] tr:hover td {
    background: rgba(108, 99, 255, 0.04);
}

/* --- Dark: Alerts --- */
[data-theme="dark"] .alert-card {
    border-color: var(--border);
}
[data-theme="dark"] .alert-card.alert-success {
    background: var(--success-bg);
}
[data-theme="dark"] .alert-card.alert-warning {
    background: var(--warning-bg);
}
[data-theme="dark"] .alert-card.alert-danger {
    background: var(--danger-bg);
}

/* --- Dark: Code blocks --- */
[data-theme="dark"] .wt-instruction code {
    background: #0d0f18;
    color: #c9d1d9;
}
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: #0d0f18;
}

/* --- Dark: Walkthrough --- */
[data-theme="dark"] .wt-card {
    background: var(--bg-card);
    border-color: var(--border);
}

/* --- Dark: Discussion --- */
[data-theme="dark"] .discussion-card {
    background: var(--bg-card);
    border-color: var(--border);
}

/* --- Dark: XP Bar --- */
[data-theme="dark"] .xp-bar-wrapper {
    background: rgba(99, 102, 241, 0.2);
}
[data-theme="dark"] .stat-card .xp-bar-wrapper {
    background: rgba(99, 102, 241, 0.25);
}

/* --- Dark: Progress bars --- */
[data-theme="dark"] .progress {
    background: #252836;
}

/* --- Dark: Dropdown / Modal (Bootstrap) --- */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-input);
}
[data-theme="dark"] .modal-content {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

/* --- Dark: Landing page specifics --- */
[data-theme="dark"] .ps-hero {
    background: linear-gradient(135deg, #0f1117 0%, #1a1d2e 100%);
}
[data-theme="dark"] .feature-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .course-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .course-card:hover {
    border-color: var(--primary);
}
[data-theme="dark"] .ps-footer {
    background: #0a0c12;
}

/* --- Dark: Misc --- */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}
[data-theme="dark"] hr {
    border-color: var(--border);
}
[data-theme="dark"] .badge {
    background: var(--bg-input) !important;
}
[data-theme="dark"] .nav-pills .nav-link.active {
    background: var(--primary);
}

/* --- Dark: Nav items (PersonalStudy nav) --- */
[data-theme="dark"] .ps-nav-item {
    color: var(--text-secondary);
}
[data-theme="dark"] .ps-nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-input);
}
[data-theme="dark"] .ps-nav-item.active {
    color: var(--primary-light);
    background: var(--primary-bg);
}

/* --- Dark: Toggle panel buttons --- */
[data-theme="dark"] .panel-toggle-btn {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="dark"] .panel-toggle-btn.active {
    background: var(--primary);
    color: white;
}


/* ============================================================================
   DARK MODE FIXES — Override inline styles from JS
   ============================================================================ */

/* Quest items (white background from JS) */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Due Review items (yellow/cream backgrounds) */
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"],
[data-theme="dark"] [style*="background:#fef9c3"],
[data-theme="dark"] [style*="background:#fff9e6"],
[data-theme="dark"] [style*="background: #fff9e6"],
[data-theme="dark"] [style*="background:#fffde7"] {
    background: rgba(255, 217, 61, 0.08) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 217, 61, 0.2) !important;
}

/* Info boxes (light grey from JS) */
[data-theme="dark"] [style*="background:#f7f8fc"],
[data-theme="dark"] [style*="background: #f7f8fc"],
[data-theme="dark"] [style*="background:#f8f9ff"],
[data-theme="dark"] [style*="background: #f8f9ff"],
[data-theme="dark"] [style*="background:#f3f4f8"],
[data-theme="dark"] [style*="background: #f3f4f8"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"] {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* Primary bg cards */
[data-theme="dark"] [style*="background:#f0eeff"],
[data-theme="dark"] [style*="background: #f0eeff"],
[data-theme="dark"] [style*="background:var(--primary-bg)"] {
    background: rgba(108, 99, 255, 0.1) !important;
}

/* Text color overrides */
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1a1a2e"],
[data-theme="dark"] [style*="color: #1a1a2e"] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="color:#4a4a5a"],
[data-theme="dark"] [style*="color: #4a4a5a"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] {
    color: var(--text-secondary) !important;
}

/* Challenge page — stat cards and main card */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .challenge-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .challenge-card h3,
[data-theme="dark"] .challenge-card p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-label {
    color: var(--text-muted) !important;
}

/* Challenge page specific */
[data-theme="dark"] .challenge-header p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .btn-start-challenge {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
}

/* Train page — card and info box */
[data-theme="dark"] #train-container .card,
[data-theme="dark"] #train-config {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #train-container label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #train-container select {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* Discussion items */
[data-theme="dark"] .discussion-item,
[data-theme="dark"] [style*="border-radius:12px"][style*="border:1px"] {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Activity feed text visibility */
[data-theme="dark"] .activity-item,
[data-theme="dark"] .activity-text {
    color: var(--text-primary) !important;
}

/* Panel toggle buttons (non-active state) */
[data-theme="dark"] .panel-btn {
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

/* Badges section — text visibility */
[data-theme="dark"] .badge-name {
    color: var(--text-primary) !important;
}

/* Generic fix for any remaining white backgrounds in content area */
[data-theme="dark"] #app > .container > .card,
[data-theme="dark"] #app > .container > div > .card,
[data-theme="dark"] #app .shadow-sm {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Fix box-shadows in dark mode */
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Skill tree level header */
[data-theme="dark"] .grade-header {
    color: var(--text-primary) !important;
}

/* Bootstrap text utilities */
[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}


/* --- Dark: Stat card text contrast --- */
[data-theme="dark"] .stat-card .stat-value {
    color: #ffffff !important;
}
[data-theme="dark"] .stat-card .stat-label {
    color: #a1a7b4 !important;
}
[data-theme="dark"] .stat-card {
    color: #e8eaed !important;
}

/* --- Dark: Panel toggle buttons (Daily Quests, Due Reviews, Badges, Activity) --- */
[data-theme="dark"] [style*="border-radius:20px"][style*="border:1.5px"],
[data-theme="dark"] [style*="border-radius: 20px"][style*="border: 1.5px"],
[data-theme="dark"] [onclick*="togglePanel"] {
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

/* Active panel button */
[data-theme="dark"] [onclick*="togglePanel"][style*="background:#6C63FF"],
[data-theme="dark"] [onclick*="togglePanel"][style*="background: #6C63FF"],
[data-theme="dark"] [onclick*="togglePanel"][style*="background:var(--primary)"] {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* General fix: any button/element with white bg and dark border in the panel area */
[data-theme="dark"] [data-panel] {
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] [data-panel].active,
[data-theme="dark"] [data-panel][style*="background:#6C63FF"],
[data-theme="dark"] [data-panel][style*="background:#FFD93D"],
[data-theme="dark"] [data-panel][style*="background:#00C9A7"],
[data-theme="dark"] [data-panel][style*="background:#FF6584"] {
    color: #ffffff !important;
}


/* --- Dark: Quest items (white/light bg with faint text) --- */
[data-theme="dark"] [style*="background:#f8f9ff"],
[data-theme="dark"] [style*="background: #f8f9ff"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#fafaff"],
[data-theme="dark"] [style*="background: #fafaff"] {
    background: var(--bg-card) !important;
    color: #e8eaed !important;
    border-color: var(--border) !important;
}

/* Quest row specifically */
[data-theme="dark"] .quest-item,
[data-theme="dark"] [style*="padding:12px 16px"][style*="border-radius"] {
    background: var(--bg-input) !important;
    color: #e8eaed !important;
    border-color: var(--border) !important;
}

/* Force all text inside quest/panel content area to be readable */
[data-theme="dark"] #panel-content,
[data-theme="dark"] #panel-content * {
    color: #e8eaed !important;
}
[data-theme="dark"] #panel-content [style*="color:#6C63FF"],
[data-theme="dark"] #panel-content [style*="color:var(--primary)"] {
    color: var(--primary-light) !important;
}


/* --- Dark: Navbar full fix --- */
[data-theme="dark"] .mq-navbar,
[data-theme="dark"] nav,
[data-theme="dark"] .ps-navbar {
    background: #141725 !important;
    border-bottom-color: #2d3148 !important;
}

[data-theme="dark"] .mq-navbar *,
[data-theme="dark"] nav a,
[data-theme="dark"] nav span,
[data-theme="dark"] .ps-nav-item {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .ps-nav-item.active,
[data-theme="dark"] .mq-navbar .active {
    color: var(--primary-light) !important;
    background: rgba(108, 99, 255, 0.1) !important;
}

[data-theme="dark"] .ps-nav-item:hover {
    color: #e8eaed !important;
}

[data-theme="dark"] .mq-navbar .navbar-brand,
[data-theme="dark"] nav .navbar-brand {
    color: #e8eaed !important;
}

/* Language switcher */
[data-theme="dark"] .lang-switcher a,
[data-theme="dark"] [onclick*="setLang"] {
    color: #a1a7b4 !important;
}
[data-theme="dark"] .lang-switcher a.active,
[data-theme="dark"] [onclick*="setLang"].active {
    color: #fff !important;
    background: var(--primary) !important;
}

/* User area */
[data-theme="dark"] .user-area,
[data-theme="dark"] .user-area span {
    color: #e8eaed !important;
}


/* --- Dark: Challenge page stat cards --- */
[data-theme="dark"] .challenge-header,
[data-theme="dark"] .challenge-header h2,
[data-theme="dark"] .challenge-header p {
    color: #e8eaed !important;
}

[data-theme="dark"] .stat-card .stat-value,
[data-theme="dark"] .stat-card .stat-icon,
[data-theme="dark"] .stat-card .stat-icon i {
    color: #ffffff !important;
}

[data-theme="dark"] .stat-card .stat-label {
    color: #a1a7b4 !important;
}

/* Force ALL text inside stat cards to be white/light */
[data-theme="dark"] .stat-card * {
    color: inherit;
}
[data-theme="dark"] .stat-card {
    color: #ffffff !important;
}


/* --- Dark: Landing Page --- */
[data-theme="dark"] .ps-hero,
[data-theme="dark"] .ps-features,
[data-theme="dark"] .ps-courses,
[data-theme="dark"] .ps-how-it-works,
[data-theme="dark"] section {
    background: #0f1117 !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .ps-hero h1,
[data-theme="dark"] .section-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: #e8eaed !important;
}

[data-theme="dark"] .ps-hero-subtitle,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .ps-hero p {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .text-gradient {
    color: var(--primary-light) !important;
    -webkit-text-fill-color: var(--primary-light) !important;
}

[data-theme="dark"] .stat-number {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .stat-label {
    color: #a1a7b4 !important;
}

/* Landing nav */
[data-theme="dark"] .ps-landing-nav,
[data-theme="dark"] body > nav:first-of-type {
    background: #141725 !important;
    border-bottom-color: #2d3148 !important;
}

[data-theme="dark"] .ps-landing-nav a,
[data-theme="dark"] .ps-landing-nav .btn-outline-primary {
    color: #a1a7b4 !important;
    border-color: #a1a7b4 !important;
}

[data-theme="dark"] .ps-landing-nav .btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* Feature cards */
[data-theme="dark"] .feature-card {
    background: #1a1d2e !important;
    border-color: #2d3148 !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .feature-card h3 {
    color: #e8eaed !important;
}

[data-theme="dark"] .feature-card p {
    color: #a1a7b4 !important;
}

/* Course cards */
[data-theme="dark"] .course-card {
    background: #1a1d2e !important;
    border-color: #2d3148 !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .course-card h3 {
    color: #e8eaed !important;
}

[data-theme="dark"] .course-card p {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .course-card:hover {
    border-color: var(--primary) !important;
}

[data-theme="dark"] .course-meta span,
[data-theme="dark"] .course-tags .tag {
    color: #a1a7b4 !important;
    background: #252836 !important;
    border-color: #2d3148 !important;
}

[data-theme="dark"] .course-cta {
    color: var(--primary-light) !important;
}

/* How it works */
[data-theme="dark"] .step-card h3 {
    color: #e8eaed !important;
}

[data-theme="dark"] .step-card p {
    color: #a1a7b4 !important;
}

/* Footer */
[data-theme="dark"] .ps-footer {
    background: #0a0c12 !important;
}

[data-theme="dark"] .ps-footer h5 {
    color: #e8eaed !important;
}

[data-theme="dark"] .ps-footer a,
[data-theme="dark"] .ps-footer p,
[data-theme="dark"] .ps-footer li {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .footer-bottom p {
    color: #6b7280 !important;
}

/* Buttons on landing */
[data-theme="dark"] .btn-outline-secondary {
    border-color: #4b5563 !important;
    color: #a1a7b4 !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: #252836 !important;
    color: #e8eaed !important;
}


/* --- Dark: Python badge/pill in navbar --- */
[data-theme="dark"] .course-pill,
[data-theme="dark"] [style*="border-radius"][style*="background:#f0eeff"],
[data-theme="dark"] [style*="background:#f0eeff"],
[data-theme="dark"] [style*="background: #f0eeff"],
[data-theme="dark"] .navbar-brand + span,
[data-theme="dark"] .ps-course-badge {
    background: rgba(108, 99, 255, 0.15) !important;
    color: var(--primary-light) !important;
    border-color: rgba(108, 99, 255, 0.3) !important;
}


/* --- Dark: Stat card icons brighter --- */
[data-theme="dark"] .stat-card i,
[data-theme="dark"] .stat-card .bi {
    color: #ffffff !important;
    opacity: 1 !important;
}
[data-theme="dark"] .text-danger {
    color: #ff7a8a !important;
}
[data-theme="dark"] .text-warning {
    color: #ffd84d !important;
}
[data-theme="dark"] .bi-fire {
    color: #ff9a5c !important;
}
[data-theme="dark"] .bi-heart-fill {
    color: #ff7a8a !important;
}


/* --- Dark: Language switcher + User area pill --- */
[data-theme="dark"] .lang-switch,
[data-theme="dark"] [style*="border-radius"][style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f0f1f3"],
[data-theme="dark"] [style*="background:#eef0f2"],
[data-theme="dark"] .user-pill,
[data-theme="dark"] .ps-user-area {
    background: #252836 !important;
    border-color: #2d3148 !important;
    color: #a1a7b4 !important;
}

[data-theme="dark"] .ps-user-area span,
[data-theme="dark"] .user-pill span {
    color: #e8eaed !important;
}

/* Logout icon */
[data-theme="dark"] .ps-user-area i,
[data-theme="dark"] .user-pill i {
    color: #a1a7b4 !important;
}


/* --- Dark: DAG View / List View buttons --- */
[data-theme="dark"] [data-dag-toggle],
[data-theme="dark"] [onclick*="toggleDAGView"],
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn[style*="background:#fff"],
[data-theme="dark"] .btn[style*="background: #fff"],
[data-theme="dark"] .btn[style*="background:white"] {
    background: #252836 !important;
    color: #a1a7b4 !important;
    border-color: #2d3148 !important;
}

[data-theme="dark"] [data-dag-toggle]:hover,
[data-theme="dark"] [onclick*="toggleDAGView"]:hover {
    background: #2d3148 !important;
    color: #e8eaed !important;
}


/* --- Dark: Walkthrough overlay/modal background --- */
[data-theme="dark"] .wt-overlay,
[data-theme="dark"] .walkthrough-overlay,
[data-theme="dark"] [style*="background:#f7f8fc"],
[data-theme="dark"] #walkthrough-overlay {
    background: #0f1117 !important;
}

/* Walkthrough topbar (Step X of Y, progress bar) */
[data-theme="dark"] .wt-topbar,
[data-theme="dark"] .wt-header {
    color: #e8eaed !important;
}

[data-theme="dark"] .wt-progress-bg,
[data-theme="dark"] .wt-progress-track {
    background: #252836 !important;
}

/* XP badge */
[data-theme="dark"] .wt-xp-badge,
[data-theme="dark"] [style*="background:#f0eeff"][style*="border-radius"] {
    background: rgba(108, 99, 255, 0.15) !important;
    color: var(--primary-light) !important;
}

/* Walkthrough card */
[data-theme="dark"] .wt-card {
    background: #1a1d2e !important;
    border-color: #2d3148 !important;
    color: #e8eaed !important;
}

/* Step type badge (INFO, FILL IN, etc) */
[data-theme="dark"] .wt-type-badge {
    background: #252836 !important;
    color: #a1a7b4 !important;
    border-color: #2d3148 !important;
}

/* Instruction text */
[data-theme="dark"] .wt-instruction,
[data-theme="dark"] .wt-card p,
[data-theme="dark"] .wt-card span {
    color: #e8eaed !important;
}

/* Continue button - already purple, fine */

/* Close button (X) */
[data-theme="dark"] .wt-close {
    color: #a1a7b4 !important;
}
[data-theme="dark"] .wt-close:hover {
    color: #e8eaed !important;
}


/* --- Dark: Level modal highlighted row --- */
[data-theme="dark"] tr[style*="background:#f0f0ff"],
[data-theme="dark"] tr[style*="background: #f0f0ff"] {
    background: rgba(108, 99, 255, 0.15) !important;
    color: #ffffff !important;
}

[data-theme="dark"] tr[style*="background:#f0f0ff"] td,
[data-theme="dark"] tr[style*="background: #f0f0ff"] td {
    color: #ffffff !important;
}


/* --- Dark: Language switcher container --- */
[data-theme="dark"] .ps-lang-switcher {
    background: #252836 !important;
    border-color: #2d3148 !important;
}

[data-theme="dark"] .ps-lang-btn {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .ps-lang-btn.active {
    background: var(--primary) !important;
    color: #ffffff !important;
}

/* --- Dark: User area pill --- */
[data-theme="dark"] .ps-user-pill,
[data-theme="dark"] .ps-user-area {
    background: #252836 !important;
    border-color: #2d3148 !important;
}

[data-theme="dark"] .ps-user-name {
    color: #e8eaed !important;
}

[data-theme="dark"] .ps-logout {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .ps-logout:hover {
    color: #ff5c6c !important;
}


/* --- Dark: Walkthrough text HIGH CONTRAST --- */
[data-theme="dark"] .wt-card,
[data-theme="dark"] .wt-card *,
[data-theme="dark"] .wt-instruction,
[data-theme="dark"] .wt-content,
[data-theme="dark"] .wt-content p,
[data-theme="dark"] .wt-content span,
[data-theme="dark"] .wt-content div {
    color: #ffffff !important;
}

[data-theme="dark"] .wt-card .wt-instruction {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* --- Dark: Walkthrough OUTPUT box (white bg) --- */
[data-theme="dark"] .wt-output,
[data-theme="dark"] .wt-output pre,
[data-theme="dark"] .wt-output code {
    background: #0d0f18 !important;
    color: #00ddb8 !important;
    border-color: var(--primary) !important;
}

/* --- Dark: Walkthrough explanation box (light purple/grey bg) --- */
[data-theme="dark"] .wt-explanation,
[data-theme="dark"] .wt-hint {
    background: #252836 !important;
    color: #ffffff !important;
    border-color: #2d3148 !important;
}

/* --- Dark: Predict/Quiz option buttons (white bg) --- */
[data-theme="dark"] .wt-option,
[data-theme="dark"] .wt-predict-btn,
[data-theme="dark"] .wt-quiz-option,
[data-theme="dark"] .wt-card button[style*="background:#fff"],
[data-theme="dark"] .wt-card button[style*="background:white"],
[data-theme="dark"] .wt-card div[style*="background:#fff"],
[data-theme="dark"] .wt-card div[style*="background:white"],
[data-theme="dark"] .wt-card div[style*="background:#ffffff"] {
    background: #252836 !important;
    color: #ffffff !important;
    border-color: #2d3148 !important;
}

[data-theme="dark"] .wt-option:hover,
[data-theme="dark"] .wt-predict-btn:hover,
[data-theme="dark"] .wt-quiz-option:hover {
    background: #2d3148 !important;
    border-color: var(--primary) !important;
}

/* --- Dark: Continue button (grey/disabled look) --- */
[data-theme="dark"] .wt-card button[disabled],
[data-theme="dark"] .wt-continue-btn[disabled] {
    background: #252836 !important;
    color: #6b7280 !important;
    border-color: #2d3148 !important;
}

/* --- Dark: Hint box (light yellow bg) --- */
[data-theme="dark"] [style*="background:#fffde7"],
[data-theme="dark"] [style*="background: #fffde7"],
[data-theme="dark"] [style*="background:#fef9e7"],
[data-theme="dark"] [style*="background: #fef9e7"],
[data-theme="dark"] [style*="background:#fff8e1"],
[data-theme="dark"] [style*="background:#fefce8"] {
    background: rgba(255, 217, 61, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 217, 61, 0.2) !important;
}

/* --- Nuclear option: ALL white/light backgrounds inside .wt-card --- */
[data-theme="dark"] .wt-card [style*="background:#fff"],
[data-theme="dark"] .wt-card [style*="background: #fff"],
[data-theme="dark"] .wt-card [style*="background:white"],
[data-theme="dark"] .wt-card [style*="background: white"],
[data-theme="dark"] .wt-card [style*="background:#ffffff"],
[data-theme="dark"] .wt-card [style*="background:#f8f9ff"],
[data-theme="dark"] .wt-card [style*="background:#f9fafb"],
[data-theme="dark"] .wt-card [style*="background:#fafafa"] {
    background: #252836 !important;
    color: #ffffff !important;
    border-color: #2d3148 !important;
}


/* --- Dark: User menu pill (.ps-user-menu) --- */
[data-theme="dark"] .ps-user-menu {
    background: #252836 !important;
    border-color: #2d3148 !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .ps-user-name {
    color: #e8eaed !important;
}

[data-theme="dark"] .ps-logout {
    color: #a1a7b4 !important;
}

[data-theme="dark"] .ps-logout:hover {
    color: #ff5c6c !important;
}


/* --- Dark: Remove background strips/containers --- */
/* DAG/List view button container strip */
[data-theme="dark"] .skill-tree-header,
[data-theme="dark"] [style*="background:#f0f1f3"],
[data-theme="dark"] [style*="background:#eef0f2"],
[data-theme="dark"] [style*="background:#f1f3f5"],
[data-theme="dark"] [style*="background:#e9ecef"] {
    background: transparent !important;
}

/* Code blocks in walkthrough — make them blend better */
[data-theme="dark"] .wt-card pre {
    background: #0d0f18 !important;
    border: 1px solid #2d3148 !important;
    border-radius: 8px !important;
}

/* Remove any semi-transparent grey backgrounds */
[data-theme="dark"] [style*="background:rgba(0,0,0,0.0"],
[data-theme="dark"] [style*="background: rgba(0,0,0,0.0"] {
    background: transparent !important;
}


/* --- Dark: Walkthrough output/result box (white bg with purple left border) --- */
[data-theme="dark"] .wt-result,
[data-theme="dark"] .wt-output-box,
[data-theme="dark"] .wt-card [style*="border-left:4px"],
[data-theme="dark"] .wt-card [style*="border-left: 4px"],
[data-theme="dark"] .wt-card [style*="background:#f9fafb"],
[data-theme="dark"] .wt-card [style*="background: #f9fafb"],
[data-theme="dark"] .wt-card [style*="background:#f8f9fa"],
[data-theme="dark"] .wt-card [style*="background:#fafbfc"],
[data-theme="dark"] .wt-card [style*="background:#f5f5f5"] {
    background: #1a1d2e !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .wt-card [style*="border-left:4px"] pre,
[data-theme="dark"] .wt-card [style*="border-left: 4px"] pre,
[data-theme="dark"] .wt-card [style*="border-left:4px"] code {
    background: transparent !important;
    color: #00ddb8 !important;
}


/* --- Dark: ALL white elements in walkthrough (nuclear fix) --- */
[data-theme="dark"] #walkthrough-overlay [style*="background:#fff"],
[data-theme="dark"] #walkthrough-overlay [style*="background: #fff"],
[data-theme="dark"] #walkthrough-overlay [style*="background:white"],
[data-theme="dark"] #walkthrough-overlay [style*="background: white"],
[data-theme="dark"] #walkthrough-overlay [style*="background:#ffffff"],
[data-theme="dark"] #walkthrough-overlay [style*="background: #ffffff"],
[data-theme="dark"] .wt-overlay [style*="background:#fff"],
[data-theme="dark"] .wt-overlay [style*="background: #fff"],
[data-theme="dark"] .wt-overlay [style*="background:white"],
[data-theme="dark"] .wt-overlay [style*="background: white"] {
    background: #252836 !important;
    color: #ffffff !important;
    border-color: #2d3148 !important;
}

/* Option buttons specifically — they use border-radius:12px or similar */
[data-theme="dark"] #walkthrough-overlay button[style*="background"],
[data-theme="dark"] .wt-overlay button[style*="background"] {
    background: #252836 !important;
    color: #ffffff !important;
    border-color: #3d4158 !important;
}

[data-theme="dark"] #walkthrough-overlay button[style*="background"]:hover,
[data-theme="dark"] .wt-overlay button[style*="background"]:hover {
    background: #2d3148 !important;
    border-color: var(--primary) !important;
}


/* --- Dark: Inline code highlights in walkthrough instructions --- */
[data-theme="dark"] .wt-card code,
[data-theme="dark"] .wt-instruction code,
[data-theme="dark"] #walkthrough-overlay code,
[data-theme="dark"] .wt-overlay code {
    background: #252836 !important;
    color: #7c73ff !important;
    border: 1px solid #3d4158 !important;
}


/* --- Dark: DAG/List View button container — make transparent --- */
[data-theme="dark"] .skill-tree-controls,
[data-theme="dark"] .dag-controls,
[data-theme="dark"] [style*="display:flex"][style*="gap"],
[data-theme="dark"] .d-flex.gap-2.mb-3,
[data-theme="dark"] .btn-group {
    background: transparent !important;
}

/* Broader fix: any div wrapping the DAG/List buttons */
[data-theme="dark"] [onclick*="toggleDAGView"] {
    background: #252836 !important;
}

/* The container that holds both buttons */
[data-theme="dark"] .skill-tree-header > div,
[data-theme="dark"] .grade-header + div {
    background: transparent !important;
}


/* --- Dark: Remove ALL background rectangles in skill tree area --- */
[data-theme="dark"] #app div[style*="background"],
[data-theme="dark"] #skill-tree div[style*="background"],
[data-theme="dark"] .skill-tree-container div[style*="background"] {
    background: transparent !important;
}

/* Re-apply dark bg to actual cards/nodes that SHOULD have bg */
[data-theme="dark"] .skill-node {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .skill-node.node-mastered {
    background: rgba(0, 201, 167, 0.08) !important;
}

[data-theme="dark"] .skill-node.node-progress {
    background: rgba(108, 99, 255, 0.08) !important;
}


/* --- Dark: DAG View button (exact inline style override) --- */
[data-theme="dark"] [style*="background:#e2e8f0"],
[data-theme="dark"] [style*="background: #e2e8f0"] {
    background: #252836 !important;
    color: #a1a7b4 !important;
}

[data-theme="dark"] [data-dag-toggle] {
    background: transparent !important;
}


/* --- Dark: DAG toggle container — remove hover background --- */
[data-theme="dark"] [data-dag-toggle],
[data-theme="dark"] [data-dag-toggle]:hover,
[data-theme="dark"] [data-dag-toggle]:focus,
[data-theme="dark"] [data-dag-toggle]:active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Also any parent that might have hover */
[data-theme="dark"] [data-dag-toggle] *:hover {
    background-color: inherit;
}

/* Remove hover effect from the row/container, keep only on buttons */
[data-theme="dark"] #app div[style*="display:flex"]:hover,
[data-theme="dark"] #app div[style*="display: flex"]:hover {
    background: transparent !important;
}


/* --- Dark: Code block containers (grey wrapper around dark pre) --- */
[data-theme="dark"] .wt-code-container,
[data-theme="dark"] .wt-code-wrapper,
[data-theme="dark"] .wt-card > div[style*="border-radius"][style*="background"],
[data-theme="dark"] .wt-card [style*="background:#f1f5f9"],
[data-theme="dark"] .wt-card [style*="background: #f1f5f9"],
[data-theme="dark"] .wt-card [style*="background:#f3f4f6"],
[data-theme="dark"] .wt-card [style*="background: #f3f4f6"],
[data-theme="dark"] .wt-card [style*="background:#eef2f7"],
[data-theme="dark"] .wt-card [style*="background:#e8edf2"],
[data-theme="dark"] .wt-card [style*="background:#edf2f7"] {
    background: #0d0f18 !important;
    border-color: #2d3148 !important;
}

/* Output box — the white container with purple left border */
[data-theme="dark"] .wt-card [style*="border-left"][style*="background:#f"],
[data-theme="dark"] .wt-card [style*="border-left"][style*="background: #f"],
[data-theme="dark"] .wt-card [style*="border-left"][style*="background:white"],
[data-theme="dark"] .wt-card [style*="border-left"][style*="background:#fff"] {
    background: #0d0f18 !important;
    color: #00ddb8 !important;
    border-left-color: var(--primary) !important;
}

/* Nuclear: any remaining light backgrounds in .wt-card */
[data-theme="dark"] .wt-card [style*="background:#f"],
[data-theme="dark"] .wt-card [style*="background: #f"] {
    background: #1a1d2e !important;
    color: #ffffff !important;
}


/* --- Dark: Code blocks — no border, same bg as card --- */
[data-theme="dark"] .wt-card pre,
[data-theme="dark"] #walkthrough-overlay pre,
[data-theme="dark"] .wt-overlay pre {
    background: #1a1d2e !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

[data-theme="dark"] .wt-card pre code,
[data-theme="dark"] #walkthrough-overlay pre code {
    background: transparent !important;
    border: none !important;
}


/* --- Dark: .wt-code-block — unified dark bg, no border --- */
[data-theme="dark"] .wt-code-block {
    background: #0d0f18 !important;
    border: none !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .wt-code-block pre {
    background: #0d0f18 !important;
    border: none !important;
    margin: 0 !important;
}

[data-theme="dark"] .wt-code-block pre code {
    background: transparent !important;
}


/* --- Dark: .wt-output-block — dark bg, transparent pre --- */
[data-theme="dark"] .wt-output-block {
    background: #0d0f18 !important;
    border-color: var(--primary) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .wt-output-block pre {
    background: transparent !important;
    color: #00ddb8 !important;
    border: none !important;
}


/* --- Dark: Walkthrough predict/quiz OPTIONS — FINAL FIX --- */
[data-theme="dark"] .wt-options button,
[data-theme="dark"] .wt-options div,
[data-theme="dark"] .wt-predict-options button,
[data-theme="dark"] .wt-quiz-options button,
[data-theme="dark"] .wt-card .wt-options > *,
[data-theme="dark"] .wt-card [class*="option"],
[data-theme="dark"] .wt-card button[style*="border-radius:12px"],
[data-theme="dark"] .wt-card button[style*="border-radius: 12px"],
[data-theme="dark"] .wt-card button[style*="padding:14px"],
[data-theme="dark"] .wt-card button[style*="padding: 14px"],
[data-theme="dark"] .wt-card button[style*="width:100%"],
[data-theme="dark"] .wt-card button[style*="width: 100%"] {
    background: #252836 !important;
    color: #ffffff !important;
    border: 1px solid #3d4158 !important;
}

[data-theme="dark"] .wt-options button:hover,
[data-theme="dark"] .wt-predict-options button:hover,
[data-theme="dark"] .wt-quiz-options button:hover,
[data-theme="dark"] .wt-card button[style*="border-radius:12px"]:hover,
[data-theme="dark"] .wt-card button[style*="width:100%"]:hover {
    background: #2d3148 !important;
    border-color: var(--primary) !important;
}


/* --- Dark: .wt-options container — transparent, no border --- */
[data-theme="dark"] .wt-options {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Option buttons themselves — dark with subtle border */
[data-theme="dark"] .wt-option-btn {
    background: #252836 !important;
    color: #ffffff !important;
    border: 1px solid #3d4158 !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .wt-option-btn:hover {
    background: #2d3148 !important;
    border-color: var(--primary) !important;
}


/* --- Dark: NUCLEAR — .wt-options remove ALL borders by every selector --- */
[data-theme="dark"] div.wt-options,
[data-theme="dark"] .wt-card > .wt-options,
[data-theme="dark"] .wt-card .wt-options,
[data-theme="dark"] [class="wt-options"],
[data-theme="dark"] .wt-options[style] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* Also try the individual option buttons — remove double border */
[data-theme="dark"] .wt-option-btn {
    box-shadow: none !important;
    outline: none !important;
}


/* ============================================================================
   GRADIENT BORDERS — Applied to key cards in both themes
   Uses the pseudo-element technique (border-image doesn't support border-radius)
   ============================================================================ */

/* --- Gradient border mixin via ::before pseudo-element --- */
.gradient-border {
    position: relative;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, #6C63FF, #00C9A7, #FF6584);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* --- DARK THEME: Apply gradient borders to specific elements --- */

/* Skill tree nodes */
[data-theme="dark"] .skill-node.node-mastered {
    position: relative;
}


/* Stat cards */
[data-theme="dark"] .stat-card {
    position: relative;
}
[data-theme="dark"] 

/* Walkthrough card */
[data-theme="dark"] .wt-card {
    position: relative;
}
[data-theme="dark"] 

/* Main content card (skill tree wrapper, panel content) */
[data-theme="dark"] #app > .container > div > .card,
[data-theme="dark"] .shadow-sm.border-0[style*="border-radius:16px"] {
    position: relative;
}


/* --- LIGHT THEME: Subtle gradient borders on key cards --- */

/* Walkthrough card - light theme subtle */
[data-theme="light"] .wt-card {
    position: relative;
    border: none !important;
}
[data-theme="light"] 

/* Skill tree mastered nodes - light theme */
[data-theme="light"] .skill-node.node-mastered {
    position: relative;
    border: none !important;
}



/* --- BRIGHTER gradient borders (override previous subtle ones) --- */

/* Stat cards — brighter, thicker */


/* Walkthrough card — bright purple */
[data-theme="dark"] 

/* Panel content area */
[data-theme="dark"] #panel-content > div {
    position: relative;
}



/* ============================================================================
   GRADIENT BORDERS — FULL VISIBILITY (override all previous attempts)
   ============================================================================ */

/* --- DARK: Stat cards — full brightness, 2px --- */
[data-theme="dark"] .stat-card {
    position: relative !important;
    border: none !important;
    overflow: visible !important;
}
[data-theme="dark"] 

/* --- DARK: Skill tree card wrapper --- */
[data-theme="dark"] #app .card.shadow-sm,
[data-theme="dark"] #app .card.border-0 {
    position: relative !important;
    border: none !important;
}


/* --- DARK: Walkthrough card --- */
[data-theme="dark"] .wt-card {
    border: none !important;
    overflow: visible !important;
}
[data-theme="dark"] 

/* === LIGHT THEME — visible gradient borders === */

/* --- LIGHT: Stat cards --- */
[data-theme="light"] .stat-card {
    position: relative !important;
    border: none !important;
    overflow: visible !important;
}
[data-theme="light"] 

/* --- LIGHT: Skill tree wrapper --- */
[data-theme="light"] #app .card.shadow-sm,
[data-theme="light"] #app .card.border-0 {
    position: relative !important;
    border: none !important;
}


/* --- LIGHT: Walkthrough card --- */
[data-theme="light"] .wt-card {
    border: none !important;
    overflow: visible !important;
}
[data-theme="light"] 

/* --- LIGHT: Mastered skill nodes --- */
[data-theme="light"] .skill-node.node-mastered {
    border: none !important;
}



/* --- Remove gradient border from skill tree topic nodes --- */
[data-theme="dark"] .skill-node::before,
[data-theme="dark"] .skill-node.node-mastered::before,
[data-theme="dark"] .skill-node.node-progress::before,
[data-theme="dark"] .skill-node.node-available::before,
[data-theme="dark"] .skill-node.node-locked::before {
    display: none !important;
}

[data-theme="light"] .skill-node::before,
[data-theme="light"] .skill-node.node-mastered::before,
[data-theme="light"] .skill-node.node-progress::before,
[data-theme="light"] .skill-node.node-available::before {
    display: none !important;
}

/* Restore normal borders on skill nodes */
[data-theme="dark"] .skill-node.node-mastered {
    border: 1.5px solid var(--success) !important;
}
[data-theme="dark"] .skill-node.node-progress {
    border: 1.5px solid var(--primary) !important;
}
[data-theme="dark"] .skill-node.node-available {
    border: 1.5px solid var(--border) !important;
}

[data-theme="light"] .skill-node.node-mastered {
    border: 1.5px solid var(--success) !important;
}


/* ============================================================================
   GRADIENT PILL BUTTONS — Purple/Pink gradient with rounded pill shape
   Applied to primary action buttons in both themes
   ============================================================================ */

/* Base gradient button style */
.btn-mq-primary,
.btn-start-challenge,
.wt-continue-btn,
[style*="background:#6C63FF"][style*="border-radius"],
[style*="background:var(--primary)"][style*="border-radius"],
[onclick*="TrainMode.start"],
[onclick*="startChallenge"] {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.35) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

.btn-mq-primary:hover,
.btn-start-challenge:hover,
.wt-continue-btn:hover,
[style*="background:#6C63FF"][style*="border-radius"]:hover,
[onclick*="TrainMode.start"]:hover,
[onclick*="startChallenge"]:hover {
    background: linear-gradient(135deg, #6C63FF, #9333ea, #db2777) !important;
    box-shadow: 0 6px 25px rgba(124, 115, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

.btn-mq-primary:active,
.btn-start-challenge:active,
.wt-continue-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(124, 115, 255, 0.3) !important;
}

/* Walkthrough Continue button specifically */
[data-theme="dark"] .wt-card button[style*="background:#6C63FF"],
[data-theme="dark"] .wt-card button[style*="background:var(--primary)"],
[data-theme="dark"] .wt-card button[style*="background: #6C63FF"],
[data-theme="light"] .wt-card button[style*="background:#6C63FF"],
[data-theme="light"] .wt-card button[style*="background:var(--primary)"] {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.35) !important;
}

/* New Question button (Discussion) */
[style*="background:#6C63FF"][style*="border-radius:20px"],
[style*="background:#6C63FF"][style*="border-radius: 20px"] {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.35) !important;
}

/* Dark theme: panel active buttons keep gradient too */
[data-theme="dark"] [data-panel].active,
[data-theme="dark"] .panel-toggle-btn.active {
    background: linear-gradient(135deg, #7c73ff, #a855f7) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 20px !important;
}


/* --- DAG/List View toggle buttons — matching pill style --- */

/* Inactive button (DAG View) — outlined pill */
[data-theme="dark"] [onclick*="toggleDAGView(true)"],
[data-theme="dark"] [style*="background:#e2e8f0"],
[data-theme="dark"] [style*="background: #e2e8f0"] {
    background: transparent !important;
    color: #a1a7b4 !important;
    border: 1.5px solid #3d4158 !important;
    border-radius: 50px !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

[data-theme="dark"] [onclick*="toggleDAGView(true)"]:hover,
[data-theme="dark"] [style*="background:#e2e8f0"]:hover {
    border-color: #7c73ff !important;
    color: #e8eaed !important;
}

/* Active button (List View) — gradient pill */
[data-theme="dark"] [onclick*="toggleDAGView(false)"][style*="background:#6C63FF"],
[data-theme="dark"] [onclick*="toggleDAGView"][style*="background:#6C63FF"] {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.35) !important;
}

/* Light theme same pattern */
[data-theme="light"] [onclick*="toggleDAGView(true)"],
[data-theme="light"] [style*="background:#e2e8f0"] {
    background: transparent !important;
    color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
}

[data-theme="light"] [onclick*="toggleDAGView(false)"][style*="background:#6C63FF"],
[data-theme="light"] [onclick*="toggleDAGView"][style*="background:#6C63FF"] {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.25) !important;
}


/* --- Start Challenge button — SAME gradient in both themes --- */
.btn-start-challenge {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.35) !important;
    transition: all 0.3s ease !important;
}

.btn-start-challenge:hover {
    background: linear-gradient(135deg, #6C63FF, #9333ea, #db2777) !important;
    box-shadow: 0 6px 25px rgba(124, 115, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-start-challenge {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    color: #ffffff !important;
}


/* --- DAG View: Nodes above edges --- */
.dag-node,
.dag-view .skill-node,
[style*="position:absolute"][style*="cursor"] {
    z-index: 10 !important;
    position: relative;
}

.dag-svg,
.dag-view svg,
svg[style*="position:absolute"] {
    z-index: 1 !important;
}


/* ============================================================================
   GRADIENT BACKGROUNDS — Purple-to-Blue gradient on key feedback/action cards
   Applied where it makes UX sense: success/completion states, walkthrough cards
   ============================================================================ */

/* --- Walkthrough: Correct answer feedback --- */
[data-theme="dark"] .wt-feedback-correct,
[data-theme="dark"] .wt-card.feedback-correct {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 50%, #0077b6 100%) !important;
    border: none !important;
}

/* --- Walkthrough: Completion screen (Topic Mastered!) --- */
[data-theme="dark"] .wt-complete,
[data-theme="dark"] .wt-completion-screen {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 50%, #0077b6 100%) !important;
    border: none !important;
}

/* --- Walkthrough card (main card) — subtle gradient in dark mode --- */
[data-theme="dark"] .wt-card {
    background: linear-gradient(180deg, #1a1d2e 0%, #151827 100%) !important;
}

/* --- Challenge: Results screen (when you finish) --- */
[data-theme="dark"] .challenge-results,
[data-theme="dark"] .challenge-complete {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 50%, #0077b6 100%) !important;
    border-radius: 16px !important;
    padding: 32px !important;
}

/* --- Train: Results screen --- */
[data-theme="dark"] .train-results,
[data-theme="dark"] #train-results {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 50%, #0077b6 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

/* --- LIGHT THEME: Softer version of the gradient --- */

/* Walkthrough completion */
[data-theme="light"] .wt-complete,
[data-theme="light"] .wt-completion-screen {
    background: linear-gradient(180deg, #6C63FF15 0%, #00C9A715 100%) !important;
    border: 1.5px solid #6C63FF33 !important;
}

/* Challenge results */
[data-theme="light"] .challenge-results,
[data-theme="light"] .challenge-complete {
    background: linear-gradient(180deg, #6C63FF10 0%, #00C9A710 100%) !important;
    border: 1.5px solid #6C63FF22 !important;
    border-radius: 16px !important;
}

/* --- Both themes: Level-up celebration modal --- */
[data-theme="dark"] #level-modal-overlay > div {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 60%, #0077b6 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

[data-theme="dark"] #level-modal-overlay > div * {
    color: #ffffff !important;
}

[data-theme="dark"] #level-modal-overlay > div th {
    color: #a1a7b4 !important;
}


/* --- Level Modal — improved colors --- */

/* Dark mode: Current level info box — use subtle purple glass instead of grey */
[data-theme="dark"] #level-modal-overlay > div [style*="background:#f8f9ff"],
[data-theme="dark"] #level-modal-overlay > div [style*="background: #f8f9ff"],
[data-theme="dark"] #level-modal-overlay > div [style*="background:#f8f9"],
[data-theme="dark"] #level-modal-overlay [style*="border-radius:10px"][style*="padding"] {
    background: rgba(124, 115, 255, 0.12) !important;
    border: 1px solid rgba(124, 115, 255, 0.25) !important;
    border-radius: 12px !important;
}

/* Dark mode: Progress bar track */
[data-theme="dark"] #level-modal-overlay [style*="background:#e2e8f0"] {
    background: #252836 !important;
}

/* Dark mode: Table header border */
[data-theme="dark"] #level-modal-overlay thead tr {
    border-bottom: 2px solid rgba(124, 115, 255, 0.3) !important;
}

/* Light mode: Modal gets a subtle gradient bg + refined style */
[data-theme="light"] #level-modal-overlay > div {
    background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%) !important;
    border: 1px solid #e8e0ff !important;
    box-shadow: 0 20px 60px rgba(108, 99, 255, 0.15) !important;
}

/* Light mode: Current level info box */
[data-theme="light"] #level-modal-overlay [style*="background:#f8f9ff"] {
    background: linear-gradient(135deg, #f0eeff, #e6faf5) !important;
    border: 1px solid #d4d0ff !important;
    border-radius: 12px !important;
}

/* Light mode: Table styling */
[data-theme="light"] #level-modal-overlay th {
    color: var(--primary) !important;
}

/* Light mode: Highlighted row */
[data-theme="light"] #level-modal-overlay tr[style*="background:#f0f0ff"] {
    background: linear-gradient(90deg, #f0eeff, #e6faf5) !important;
    border-radius: 8px !important;
}


/* ============================================================================
   GRADIENT FEEDBACK BACKGROUNDS — Override walkthrough inline styles
   Purple→Blue gradient for correct, Red gradient for wrong
   ============================================================================ */

/* Correct answer — green background elements in walkthrough */
[data-theme="dark"] .wt-card [style*="background:#d4edda"],
[data-theme="dark"] .wt-card [style*="background: #d4edda"],
[data-theme="dark"] .wt-card [style*="background:#e6faf5"],
[data-theme="dark"] .wt-card [style*="background:var(--success-bg)"],
[data-theme="dark"] .wt-card [style*="border-color:#00C9A7"],
[data-theme="dark"] .wt-card [style*="border-color:var(--success)"] {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 50%, #0077b6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

/* Wrong answer — red tinted gradient */
[data-theme="dark"] .wt-card [style*="background:#f8d7da"],
[data-theme="dark"] .wt-card [style*="background: #f8d7da"],
[data-theme="dark"] .wt-card [style*="background:#fff0f1"],
[data-theme="dark"] .wt-card [style*="background:var(--danger-bg)"],
[data-theme="dark"] .wt-card [style*="border-color:#FF4757"],
[data-theme="dark"] .wt-card [style*="border-color:var(--danger)"] {
    background: linear-gradient(180deg, #2d0a0a 0%, #4a1010 50%, #7a1515 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

/* Correct option button (after selection) */
[data-theme="dark"] .wt-option-btn[style*="background:#d4edda"],
[data-theme="dark"] .wt-option-btn[style*="background:#e6faf5"],
[data-theme="dark"] .wt-option-btn[style*="border-color:#00C9A7"],
[data-theme="dark"] button[style*="background:#d4edda"],
[data-theme="dark"] button[style*="background:#e6faf5"] {
    background: linear-gradient(135deg, #0a4a3a, #0077b6) !important;
    border: 2px solid #00ddb8 !important;
    color: #ffffff !important;
}

/* Wrong option button (after selection) */
[data-theme="dark"] .wt-option-btn[style*="background:#f8d7da"],
[data-theme="dark"] .wt-option-btn[style*="background:#fff0f1"],
[data-theme="dark"] .wt-option-btn[style*="border-color:#FF4757"],
[data-theme="dark"] button[style*="background:#f8d7da"],
[data-theme="dark"] button[style*="background:#fff0f1"] {
    background: linear-gradient(135deg, #4a1010, #7a1515) !important;
    border: 2px solid #ff5c6c !important;
    color: #ffffff !important;
}

/* Completion screen — full gradient takeover */
[data-theme="dark"] .wt-card[style*="text-align:center"] {
    background: linear-gradient(180deg, #1a0a3e 0%, #0a2463 50%, #0077b6 100%) !important;
    border: none !important;
}

/* Light theme: subtle pastel gradients for feedback */
[data-theme="light"] .wt-card [style*="background:#d4edda"],
[data-theme="light"] .wt-card [style*="background:#e6faf5"] {
    background: linear-gradient(180deg, #e6faf5 0%, #d0f0ff 100%) !important;
}

[data-theme="light"] .wt-card [style*="background:#f8d7da"],
[data-theme="light"] .wt-card [style*="background:#fff0f1"] {
    background: linear-gradient(180deg, #fff0f1 0%, #ffe0e3 100%) !important;
}


/* ============================================================================
   LANDING PAGE — Gradient borders on cards + Gradient pill buttons
   ============================================================================ */

/* --- Feature cards — gradient border --- */
.feature-card {
    position: relative !important;
    border: none !important;
    overflow: visible !important;
}

[data-theme="dark"] 

/* --- Course cards — gradient border --- */
.course-card {
    position: relative !important;
    border: none !important;
    overflow: visible !important;
}

[data-theme="dark"] 

/* --- Landing buttons — gradient pills --- */
.ps-hero-cta .btn-primary,
.ps-hero-cta .btn-lg:first-child,
a[href="?page=register"].btn-primary.btn-lg {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(124, 115, 255, 0.35) !important;
    transition: all 0.3s ease !important;
}
.ps-hero-cta .btn-primary:hover,
.ps-hero-cta .btn-lg:first-child:hover,
a[href="?page=register"].btn-primary.btn-lg:hover {
    background: linear-gradient(135deg, #6C63FF, #9333ea, #db2777) !important;
    box-shadow: 0 6px 25px rgba(124, 115, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Explore Courses button — outline pill */
.ps-hero-cta .btn-outline-secondary,
.ps-hero-cta .btn-lg:last-child {
    border-radius: 50px !important;
    border: 1.5px solid #6C63FF !important;
    color: #6C63FF !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}
.ps-hero-cta .btn-outline-secondary:hover,
.ps-hero-cta .btn-lg:last-child:hover {
    background: rgba(108, 99, 255, 0.08) !important;
    transform: translateY(-2px) !important;
}
[data-theme="dark"] .ps-hero-cta .btn-outline-secondary,
[data-theme="dark"] .ps-hero-cta .btn-lg:last-child {
    border-color: #7c73ff !important;
    color: #a1a7b4 !important;
}
[data-theme="dark"] .ps-hero-cta .btn-outline-secondary:hover {
    background: rgba(124, 115, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Sign Up button in nav — gradient pill */
a[href="?page=register"].btn-primary.btn-sm {
    background: linear-gradient(135deg, #7c73ff, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
}

/* How It Works — step number circles */
[data-theme="dark"] .step-number {
    background: linear-gradient(135deg, #7c73ff, #a855f7) !important;
}


/* ============================================================================
   LANDING PAGE — Gradient card backgrounds (purple→blue)
   ============================================================================ */

/* --- Dark: Feature cards get gradient background --- */
[data-theme="dark"] .feature-card {
    background: linear-gradient(160deg, #1a0a3e 0%, #0a1a4a 60%, #0a3a6a 100%) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .feature-card h3 {
    color: #ffffff !important;
}
[data-theme="dark"] .feature-card p {
    color: #c8d0e0 !important;
}
[data-theme="dark"] .feature-card .feature-icon {
    background: rgba(255,255,255,0.08) !important;
}

/* --- Dark: Course cards get gradient background --- */
[data-theme="dark"] .course-card {
    background: linear-gradient(160deg, #0f0a2e 0%, #0a1a4a 50%, #0a3a6a 100%) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .course-card h3 {
    color: #ffffff !important;
}
[data-theme="dark"] .course-card p {
    color: #c8d0e0 !important;
}

/* --- Dark: Hero section gradient --- */
[data-theme="dark"] .ps-hero {
    background: linear-gradient(160deg, #0a0a1a 0%, #0f1030 40%, #0a2050 100%) !important;
}

/* --- Dark: How It Works section — step cards --- */
[data-theme="dark"] .step-card,
[data-theme="dark"] .how-step {
    background: linear-gradient(160deg, #1a0a3e 0%, #0a1a4a 60%, #0a3a6a 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    color: #ffffff !important;
}
[data-theme="dark"] .step-card h3,
[data-theme="dark"] .how-step h3 {
    color: #ffffff !important;
}
[data-theme="dark"] .step-card p,
[data-theme="dark"] .how-step p {
    color: #c8d0e0 !important;
}

/* --- Light: Subtle gradient tint on feature cards --- */
[data-theme="light"] .feature-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f6ff 50%, #f0f8ff 100%) !important;
}

[data-theme="light"] .course-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f6ff 50%, #f0fffa 100%) !important;
}

/* --- Dark: Features section background --- */
[data-theme="dark"] .ps-features,
[data-theme="dark"] #features {
    background: #080a14 !important;
}

/* --- Dark: Courses section background --- */
[data-theme="dark"] .ps-courses,
[data-theme="dark"] #courses {
    background: #0a0c18 !important;
}

/* --- Dark: How It Works section background --- */
[data-theme="dark"] .ps-how-it-works,
[data-theme="dark"] #how {
    background: #080a14 !important;
}


/* --- Walkthrough Close (X) button — circle + dark mode --- */
.wt-close,
.wt-close-btn,
[onclick*="closeWalkthrough"],
#walkthrough-overlay .close-btn,
#walkthrough-overlay [style*="cursor:pointer"][style*="font-size"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #4a5568 !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.wt-close:hover,
.wt-close-btn:hover,
[onclick*="closeWalkthrough"]:hover {
    background: #f3f4f6 !important;
    color: #1a1a2e !important;
}

/* Dark mode */
[data-theme="dark"] .wt-close,
[data-theme="dark"] .wt-close-btn,
[data-theme="dark"] [onclick*="closeWalkthrough"],
[data-theme="dark"] #walkthrough-overlay .close-btn,
[data-theme="dark"] #walkthrough-overlay [style*="cursor:pointer"][style*="font-size"] {
    background: #252836 !important;
    border-color: #3d4158 !important;
    color: #a1a7b4 !important;
}

[data-theme="dark"] .wt-close:hover,
[data-theme="dark"] .wt-close-btn:hover,
[data-theme="dark"] [onclick*="closeWalkthrough"]:hover {
    background: #2d3148 !important;
    color: #ffffff !important;
    border-color: #7c73ff !important;
}


/* --- Dark: Course meta tags (38 Topics, 8 Levels, Self-paced) — transparent bg, lighter text --- */
[data-theme="dark"] .course-meta span,
[data-theme="dark"] .course-stats span,
[data-theme="dark"] .course-card .course-meta span {
    background: transparent !important;
    border: none !important;
    color: #c8d0e0 !important;
}

[data-theme="dark"] .course-meta span i,
[data-theme="dark"] .course-stats span i {
    color: #9b94ff !important;
}



/* DAG toggle buttons — dark mode inline style override */
[data-theme="dark"] [onclick="toggleDAGView(false)"],
[data-theme="dark"] button[style*="background:#e2e8f0"] {
    background: #252836 !important;
    color: #a1a7b4 !important;
}

[data-theme="dark"] [onclick="toggleDAGView(true)"][style*="background:#e2e8f0"],
[data-theme="dark"] button[style*="background:#e2e8f0"][onclick*="toggleDAGView"] {
    background: #252836 !important;
    color: #a1a7b4 !important;
}

/* DAG description text — hide on mobile (any screen <=768px) */
@media (max-width: 768px) {
    [style*="font-size:0.72rem"][style*="color:#94a3b8"],
    span[style*="Drag nodes"] {
        display: none !important;
    }
}



/* XP Progress bar — clean slim style */
.xp-bar-wrapper {
    height: 6px !important;
    border-radius: 99px !important;
    margin-top: 6px;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100% !important;
    border-radius: 99px !important;
    min-width: 4px;
}



/* Remove all stat card borders */
.stat-card {
    border: none !important;
}
.stat-card::before {
    display: none !important;
}

/* ============================================================================
   MOBILE RESPONSIVE — Best Practice Redesign
   Following: iOS HIG, Material Design, Duolingo/Coursera patterns
   ============================================================================ */

/* --- Bottom Tab Bar (Primary Navigation) --- */
.ps-bottom-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card, #ffffff);
    border-top: 1px solid var(--border, #e8eaf0);
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] .ps-bottom-tabs {
    background: #141725;
    border-top-color: #2d3148;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}

.ps-bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 10px;
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    min-width: 56px;
    transition: all 0.2s;
}
.ps-bottom-tab i {
    font-size: 1.25rem;
}
.ps-bottom-tab.active {
    color: var(--primary, #6C63FF);
}
.ps-bottom-tab.active i {
    transform: scale(1.1);
}
[data-theme="dark"] .ps-bottom-tab {
    color: #6b7280;
}
[data-theme="dark"] .ps-bottom-tab.active {
    color: #9b94ff;
}

/* --- Mobile Top Bar (simplified) --- */
.ps-mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border, #e8eaf0);
    position: sticky;
    top: 0;
    z-index: 999;
}
[data-theme="dark"] .ps-mobile-topbar {
    background: #141725;
    border-bottom-color: #2d3148;
}

.ps-mobile-topbar .ps-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.ps-mobile-topbar .ps-brand-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
}
[data-theme="dark"] .ps-mobile-topbar .ps-brand-text {
    color: #e8eaed;
}

.ps-mobile-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-mobile-topbar .ps-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C63FF, #a855f7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* More menu (settings drawer) */
.ps-more-menu {
    display: none;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    background: var(--bg-card, #fff);
    border-top: 1px solid var(--border, #e8eaf0);
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    z-index: 1001;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.ps-more-menu.open {
    display: block;
    transform: translateY(0);
}
[data-theme="dark"] .ps-more-menu {
    background: #1a1d2e;
    border-top-color: #2d3148;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

.ps-more-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 10px;
    color: var(--text-primary, #1a1a2e);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.ps-more-menu-item:hover, .ps-more-menu-item:active {
    background: var(--bg-input, #f3f4f8);
}
[data-theme="dark"] .ps-more-menu-item {
    color: #e8eaed;
}
[data-theme="dark"] .ps-more-menu-item:hover {
    background: #252836;
}
.ps-more-menu-item i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    color: var(--primary, #6C63FF);
}

/* Backdrop for more menu */
.ps-more-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
}
.ps-more-backdrop.open {
    display: block;
}

/* ============================================================================
   BREAKPOINT: <= 768px — TABLET + MOBILE
   ============================================================================ */
@media (max-width: 768px) {
    /* Show mobile elements */
    .ps-bottom-tabs {
        display: flex !important;
    }
    .ps-mobile-topbar {
        display: flex !important;
    }

    /* Hide desktop navbar only on student pages (where bottom tabs exist) */
    body:has(.ps-bottom-tabs) .ps-navbar {
        display: none !important;
    }

    /* Body padding for bottom tabs */
    body {
        padding-bottom: 64px !important;
    }

    /* --- Stat Cards: 2x2 grid --- */
    .stat-cards-row,
    .d-flex.flex-wrap.gap-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 1fr !important;
        gap: 8px !important;
    }

    .stat-card {
        flex: unset !important;
        min-width: unset !important;
        max-width: unset !important;
        height: 100% !important;
        padding: 12px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* 5th card spans full width */
    .stat-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .stat-card .stat-value {
        font-size: 1.4rem !important;
    }

    .stat-card .stat-label {
        font-size: 0.7rem !important;
    }

    /* Thinner gradient borders on mobile */
    .stat-card::before {
        border-width: 1px !important;
        opacity: 0.6 !important;
    }

    /* --- Container padding --- */
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Content max-width */
    div[style*="max-width: 1200px"],
    div[style*="max-width:1200px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* --- Skill Tree --- */
    .skill-node {
        min-width: 110px !important;
        max-width: 140px !important;
        padding: 8px 10px !important;
    }

    .node-title {
        font-size: 0.7rem !important;
    }

    /* Level headers */
    .level-header,
    .text-center.text-muted {
        font-size: 0.75rem !important;
    }

    /* --- Panel toggle buttons: horizontal scroll --- */
    .panel-buttons,
    .d-flex.gap-2.mb-3 {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .panel-buttons::-webkit-scrollbar,
    .d-flex.gap-2.mb-3::-webkit-scrollbar {
        display: none;
    }

    .panel-buttons button,
    .d-flex.gap-2.mb-3 button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }

    /* --- DAG View: scrollable --- */
    .dag-container,
    #dag-svg-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Walkthrough: full-screen feel --- */
    .wt-overlay,
    #walkthrough-overlay {
        padding: 0 !important;
    }

    .wt-card {
        margin: 8px !important;
        border-radius: 16px !important;
        min-height: calc(100vh - 16px);
        padding: 20px !important;
    }
    /* Walkthrough close button — perfect circle */
    .wt-close-btn,
    #walkthrough-overlay button[style*="border-radius"]:first-child,
    #walkthrough-overlay > div:first-child button:first-child {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 / 1 !important;
    }


    /* Walkthrough progress bar thinner */
    .wt-progress-bar {
        height: 3px !important;
    }

    /* Code blocks scroll */
    pre, code {
        overflow-x: auto !important;
        font-size: 0.78rem !important;
    }

    /* --- Level Modal --- */
    #level-modal-overlay > div {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }

    #level-modal-overlay table {
        font-size: 0.7rem !important;
    }

    /* --- Challenge page --- */
    .challenge-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* --- Discussion --- */
    .discussion-card {
        padding: 12px !important;
    }

    /* --- Train --- */
    #train-config .row,
    .train-config .row {
        flex-direction: column !important;
    }


    /* --- Discussion: New Question button smaller --- */
    .discussion-card .btn[onclick*="showNewForm"],
    button[onclick*="Discussion.showNewForm"] {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
    }

    /* --- General touch targets --- */
    button, a.btn, .ps-nav-item {
        min-height: 44px;
    }

    /* --- Typography --- */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1rem !important; }
}


    /* --- DAG View Mobile Enhancements --- */
    
    /* DAG/List toggle: clean segmented control */
    .dag-toggle-container,
    [data-dag-toggle] {
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
    }
    
    /* Hide description text on mobile ("Drag nodes..." / "show prerequisites") */
    .dag-toggle-desc,
    .dag-toggle-container span:not(.dag-toggle-label),
    [style*="font-size:0.7"] {
        display: none !important;
    }

    /* DAG SVG container — scrollable + zoomable */
    .dag-container,
    #dag-svg-container,
    #skill-tree-container {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
        max-height: 60vh;
        border-radius: 12px;
    }

    /* DAG nodes — slightly larger for touch */
    .dag-container .skill-node,
    #dag-svg-container .skill-node {
        min-width: 100px !important;
        max-width: 130px !important;
        padding: 8px !important;
        font-size: 0.65rem !important;
        touch-action: none; /* allow drag */
    }

    .dag-container .node-title {
        font-size: 0.6rem !important;
        line-height: 1.2 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


/* ============================================================================
   BREAKPOINT: <= 480px — SMALL PHONES
   ============================================================================ */
@media (max-width: 480px) {
    .stat-card .stat-value {
        font-size: 1.2rem !important;
    }

    .stat-card .stat-icon {
        font-size: 1rem !important;
    }

    .skill-node {
        min-width: 95px !important;
        max-width: 120px !important;
    }

    .node-title {
        font-size: 0.65rem !important;
    }

    .wt-option-btn {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    /* Bottom tabs font smaller */
    .ps-bottom-tab {
        font-size: 0.6rem;
        min-width: 48px;
        padding: 6px 8px;
    }
    .ps-bottom-tab i {
        font-size: 1.1rem;
    }
}

/* ============================================================================
   BREAKPOINT: <= 360px — VERY SMALL (SE, older phones)
   ============================================================================ */
@media (max-width: 360px) {
    .stat-cards-row,
    .d-flex.flex-wrap.gap-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .stat-card {
        min-height: 60px !important;
        padding: 8px !important;
    }

    .stat-card .stat-value {
        font-size: 1rem !important;
    }

    .ps-mobile-topbar .ps-brand-text {
        font-size: 0.9rem;
    }
}

/* ============================================================================
   CLEAN BORDER SYSTEM — Subtle, Professional
   Replaces all gradient borders with clean 1px borders
   ============================================================================ */

/* Remove all gradient pseudo-element borders globally */
.stat-card::before,
.skill-node::before,
.wt-card::before,
.feature-card::before,
.course-card::before,
#skill-tree-container::before,
[class*="card"]::before {
    display: none !important;
}

/* Dark mode borders — subtle, low-contrast */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .skill-node,
[data-theme="dark"] .wt-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .discussion-card,
[data-theme="dark"] [class*="card"] {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .skill-node:hover,
[data-theme="dark"] [class*="card"]:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Light mode borders — clean grey */
[data-theme="light"] .stat-card,
[data-theme="light"] .skill-node,
[data-theme="light"] .feature-card,
[data-theme="light"] .course-card,
[data-theme="light"] .discussion-card,
[data-theme="light"] [class*="card"] {
    border: 1px solid #e8eaf0 !important;
}

[data-theme="light"] .stat-card:hover,
[data-theme="light"] .skill-node:hover,
[data-theme="light"] [class*="card"]:hover {
    border-color: #d1d5db !important;
}

/* Skill tree wrapper — no gradient border */
#skill-tree-container,
.skill-tree-wrapper {
    border: none !important;
}
#skill-tree-container::before,
.skill-tree-wrapper::before {
    display: none !important;
}

/* Ensure all cards have rounded corners */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .skill-node,
[data-theme="dark"] .wt-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .discussion-card,
[data-theme="dark"] [class*="card"],
[data-theme="light"] .stat-card,
[data-theme="light"] .skill-node,
[data-theme="light"] .feature-card,
[data-theme="light"] .course-card,
[data-theme="light"] .discussion-card,
[data-theme="light"] [class*="card"] {
    border-radius: 16px !important;
}

/* ============================================================================
   SKILL TREE NODES — Clean borders, status via subtle bg tint
   ============================================================================ */

/* Base node — subtle border for all */
[data-theme="dark"] .skill-node {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #1a1d2e !important;
}

[data-theme="dark"] .skill-node:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: #1e2235 !important;
}

/* Mastered — subtle green tint, no colored border */
[data-theme="dark"] .skill-node.node-mastered {
    border: 1px solid rgba(0, 201, 167, 0.15) !important;
    background: rgba(0, 201, 167, 0.05) !important;
}

/* Available — subtle purple tint */
[data-theme="dark"] .skill-node.node-available {
    border: 1px solid rgba(108, 99, 255, 0.15) !important;
    background: rgba(108, 99, 255, 0.05) !important;
}

/* In progress — subtle orange tint */
[data-theme="dark"] .skill-node.node-in-progress {
    border: 1px solid rgba(255, 183, 77, 0.15) !important;
    background: rgba(255, 183, 77, 0.05) !important;
}

/* Locked — muted */
[data-theme="dark"] .skill-node.node-locked {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    opacity: 0.6;
}

/* Light mode */
[data-theme="light"] .skill-node {
    border: 1px solid #e8eaf0 !important;
    background: #fff !important;
}

[data-theme="light"] .skill-node.node-mastered {
    border: 1px solid rgba(0, 201, 167, 0.2) !important;
    background: rgba(0, 201, 167, 0.04) !important;
}

[data-theme="light"] .skill-node.node-available {
    border: 1px solid rgba(108, 99, 255, 0.2) !important;
    background: rgba(108, 99, 255, 0.04) !important;
}

[data-theme="light"] .skill-node.node-in-progress {
    border: 1px solid rgba(255, 183, 77, 0.25) !important;
    background: rgba(255, 183, 77, 0.05) !important;
}

[data-theme="light"] .skill-node.node-locked {
    border: 1px solid #e8eaf0 !important;
    background: #f9fafb !important;
    opacity: 0.6;
}

/* Walkthrough close button — transparent background */
.wt-close-btn,
button[onclick*="closeWalkthrough"],
#walkthrough-overlay button:first-of-type {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Logout button — round circle like theme toggle */
.ps-logout {
    width: 34px !important;
    height: 34px !important;
    border-radius: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a7b4 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.ps-logout:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}
[data-theme="light"] .ps-logout {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
}
[data-theme="light"] .ps-logout:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

/* Nav right — tighter spacing */
.ps-nav-right {
    gap: 8px !important;
}
.ps-nav-right .ps-lang-switcher {
    margin-right: 0 !important;
}

/* Force DAG toggle buttons visible */
[data-dag-toggle] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
}

[data-dag-toggle] button {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dark mode: fix button colors */
[data-theme="dark"] [data-dag-toggle] button[onclick*="toggleDAGView(true)"] {
    background: #252836 !important;
    color: #a1a7b4 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] [data-dag-toggle] button[onclick*="toggleDAGView(false)"] {
    background: #6C63FF !important;
    color: #fff !important;
}

/* Light mode */
[data-theme="light"] [data-dag-toggle] button[onclick*="toggleDAGView(true)"] {
    background: #f3f4f6 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] [data-dag-toggle] button[onclick*="toggleDAGView(false)"] {
    background: #6C63FF !important;
    color: #fff !important;
}

/* DAG nodes — solid background + light text for contrast in dark mode */
[data-theme="dark"] .dag-node {
    background: #252836 !important;
    color: #e8eaed !important;
    border: 1.5px solid #3d4158 !important;
    border-radius: 10px !important;
}
[data-theme="dark"] .dag-node * {
    color: #e8eaed !important;
}

/* Walkthrough card + overlay — no border */
.wt-card,
#walkthrough-overlay .wt-card,
#walkthrough-overlay > div {
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .wt-card,
[data-theme="dark"] #walkthrough-overlay .wt-card,
[data-theme="dark"] #walkthrough-overlay > div {
    border: none !important;
    box-shadow: none !important;
}

/* Walkthrough inner content — no borders anywhere */
[data-theme="dark"] .wt-card *,
[data-theme="dark"] #walkthrough-overlay * {
    border-color: transparent !important;
}

[data-theme="dark"] .wt-step-card,
[data-theme="dark"] .wt-content,
[data-theme="dark"] .wt-step-content,
[data-theme="dark"] .wt-card > div {
    border: none !important;
    outline: none !important;
}

/* wt-card-content — no border (both themes) */
.wt-card-content,
[data-theme="light"] .wt-card-content,
[data-theme="dark"] .wt-card-content {
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
}

/* Walkthrough topbar/header border — remove */
.wt-topbar,
.wt-header,
.wt-card > div:first-child,
.wt-progress-wrap,
[class*="wt-"] {
    border-bottom: none !important;
    border-top: none !important;
}

/* wt-card-area — no border, no shadow, no outline */
[data-theme="dark"] .wt-card-area,
[data-theme="light"] .wt-card-area,
.wt-overlay .wt-card-area,
div.wt-card-area {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* wt-card — no border */
.wt-card {
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}