:root {
    --color-eu-blue-deep: #0b3275;
    --color-eu-blue: #0f4c9c;
    --color-eu-blue-light: #2563eb;
    --color-eu-blue-soft: #edf4ff;
    --color-eu-yellow: #ffcc00;
    --color-eu-yellow-hover: #f5c200;
    --color-eu-yellow-light: #fff9db;
    
    --color-text-main: #1e293b;
    --color-text-muted: #64748b;
    --color-text-white: #ffffff;
    
    --color-bg-page: #f8fafc;
    --color-bg-card: #ffffff;
    --color-border: #e2e8f0;
    --color-border-focus: #ffcc00;
    
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-info: #0284c7;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-glow-yellow: 0 0 20px rgba(255, 204, 0, 0.45);
    --shadow-glow-blue: 0 10px 25px -5px rgba(0, 51, 153, 0.3);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-page);
    color: var(--color-text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-eu-blue);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--color-eu-blue-light);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header & Navbar */
.site-header {
    background-color: var(--color-eu-blue-deep);
    background: linear-gradient(135deg, var(--color-eu-blue-deep) 0%, var(--color-eu-blue) 100%);
    border-bottom: 3px solid var(--color-eu-yellow);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-white);
    letter-spacing: -0.5px;
}

.brand-logo:hover {
    color: var(--color-text-white);
    opacity: 0.95;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.4);
}

.brand-logo .accent {
    color: var(--color-eu-yellow);
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 24px;
}

.nav-link {
    color: #e2e8f0;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--color-text-white);
    background: rgba(255, 255, 255, 0.1);
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-guest-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-menu {
    position: relative;
}

.profile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--color-eu-yellow);
    border-radius: var(--radius-full);
    background: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
    box-shadow: var(--shadow-sm);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.profile-menu-toggle i {
    font-size: 1.2rem;
}

.profile-menu-toggle:hover,
.profile-menu-toggle:focus-visible {
    background: var(--color-eu-yellow-hover);
    transform: translateY(-1px);
}

.profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-lg);
}

.profile-menu-dropdown[hidden] {
    display: none;
}

.profile-menu-label {
    padding: 6px 10px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.profile-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text-main);
    font-weight: 600;
}

.profile-menu-dropdown a:hover,
.profile-menu-dropdown a:focus-visible {
    background: var(--color-bg-page);
    color: var(--color-eu-blue-deep);
}

.profile-menu-dropdown a i {
    color: var(--color-eu-blue);
}

.mobile-menu-toggle,
.mobile-menu-backdrop,
.mobile-menu {
    display: none;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    white-space: nowrap;
}

.btn-yellow {
    background-color: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
    box-shadow: var(--shadow-sm);
}

.btn-yellow:hover {
    background-color: var(--color-eu-yellow-hover);
    color: var(--color-eu-blue-deep);
    box-shadow: var(--shadow-glow-yellow);
    transform: translateY(-1px);
}

.btn-blue {
    background-color: var(--color-eu-blue);
    color: var(--color-text-white);
}

.btn-blue:hover {
    background-color: var(--color-eu-blue-light);
    color: var(--color-text-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-blue);
}

.btn-outline-white {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-text-white);
    background: transparent;
}

.btn-outline-white:hover {
    border-color: var(--color-text-white);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-white);
}

.btn-outline-blue {
    border: 2px solid var(--color-eu-blue);
    color: var(--color-eu-blue);
    background: transparent;
}

.btn-outline-blue:hover {
    background: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
    border-radius: var(--radius-lg);
}

.btn-full {
    width: 100%;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #0d3b82 0%, #1754aa 50%, #1e60c2 100%);
    color: var(--color-text-white);
    padding: 70px 0 90px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -15%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.2) 0%, rgba(255, 204, 0, 0) 70%);
    pointer-events: none;
    border-radius: 50%;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
    border-radius: 50%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 204, 0, 0.16);
    border: 1px solid var(--color-eu-yellow);
    color: var(--color-eu-yellow);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-title {
    font-size: 3rem;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-title .highlight {
    color: var(--color-eu-yellow);
    position: relative;
    display: inline-block;
}

.hero-lead {
    font-size: 1.2rem;
    color: #e2e8f0;
    margin-bottom: 32px;
    line-height: 1.6;
    max-width: 580px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: #cbd5e1;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 7px 14px;
    border-radius: var(--radius-full);
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hero-trust-item:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 204, 0, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.hero-trust-icon-box {
    color: var(--color-eu-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.hero-trust-text {
    font-size: 0.85rem;
    color: #e2e8f0;
    letter-spacing: 0.1px;
}

.hero-trust-text strong {
    color: #ffffff;
    font-weight: 700;
}

.hero-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18), 0 0 30px rgba(255, 204, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

.hero-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-card-header-info h4 {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.hero-card-header-info p {
    font-size: 0.8rem;
    color: #e2e8f0;
}

.hero-card-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-card-tag {
    background: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.hero-card-indicators {
    display: flex;
    gap: 5px;
    align-items: center;
}

.hero-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.hero-indicator-dot.active {
    background: var(--color-eu-yellow);
    width: 18px;
    border-radius: var(--radius-full);
}

.quiz-preview-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.quiz-preview-content.fade-out {
    opacity: 0;
    transform: translateY(8px);
}

.quiz-preview-content.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.quiz-preview-question {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #ffffff;
    min-height: 52px;
    line-height: 1.45;
}

.quiz-preview-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.quiz-option {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 11px 15px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    color: #f1f5f9;
}

.quiz-option.active {
    background: rgba(255, 204, 0, 0.22);
    border-color: var(--color-eu-yellow);
    color: #fff;
    font-weight: 600;
}

.quiz-option.correct {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
    color: #f0fdf4;
    font-weight: 600;
}

.quiz-option.wrong {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(248, 113, 113, 0.22);
    color: #e2e8f0;
    opacity: 0.85;
}

.quiz-bullet {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.quiz-option.correct .quiz-bullet {
    background: rgba(16, 185, 129, 0.3);
    color: #86efac;
}

.quiz-option.wrong .quiz-bullet {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.quiz-option.active .quiz-bullet {
    background: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
}

.quiz-option-icon {
    margin-left: auto;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

.quiz-option.correct .quiz-option-icon {
    color: #86efac;
}

.quiz-option.wrong .quiz-option-icon {
    color: #fca5a5;
}

.quiz-explanation-box {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid var(--color-eu-yellow);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 0.83rem;
    color: #ffffff;
    line-height: 1.45;
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Sections */
.section {
    padding: 80px 0;
}

.section-alt {
    background-color: #f1f5f9;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
}

.section-eyebrow {
    color: var(--color-eu-blue);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-eu-blue-deep);
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

/* Grid & Cards */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.feature-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 51, 153, 0.3);
}

.feature-icon-wrapper {
    width: 56px;
    height: 56px;
    background: var(--color-eu-blue-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-eu-blue);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.feature-card.featured {
    border-top: 4px solid var(--color-eu-yellow);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-eu-blue-deep);
    margin-bottom: 12px;
}

.feature-text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Subject categories - Redesigned 8 Cards Grid */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 1100px) {
    .subject-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.subject-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    overflow: hidden;
}

.subject-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-eu-blue) 0%, var(--color-eu-yellow) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.subject-card:hover {
    border-color: rgba(15, 76, 156, 0.35);
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(0, 34, 102, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
}

.subject-card:hover::before {
    opacity: 1;
}

.subject-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.subject-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.subject-card:hover .subject-icon {
    background: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
    transform: scale(1.06);
}

.subject-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: #f1f5f9;
    color: var(--color-text-muted);
    letter-spacing: 0.2px;
}

.subject-name {
    font-weight: 700;
    color: var(--color-eu-blue-deep);
    font-size: 1.05rem;
    margin-bottom: 8px;
    line-height: 1.35;
}

.subject-desc {
    font-size: 0.83rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
}

.subject-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.78rem;
}

.subject-count {
    color: var(--color-text-muted);
    font-weight: 600;
}

.subject-arrow {
    color: var(--color-eu-blue);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: transform 0.2s ease;
}

.subject-card:hover .subject-arrow {
    color: var(--color-eu-blue-light);
    transform: translateX(3px);
}

/* FAQ Section - 2 Questions Per Row */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}

@media (max-width: 840px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.faq-card:hover {
    border-color: rgba(15, 76, 156, 0.3);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.faq-question {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-eu-blue-deep);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.faq-question i {
    color: var(--color-eu-yellow);
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.faq-answer {
    color: var(--color-text-muted);
    font-size: 0.91rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}

/* Exam disclaimer banner */
.disclaimer-banner {
    background: var(--color-eu-yellow-light);
    border-left: 4px solid var(--color-eu-yellow);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 40px 0;
    color: #713f12;
    font-size: 0.95rem;
}

.disclaimer-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Stats Section */
.stats-bar {
    background: var(--color-eu-blue-deep);
    color: var(--color-text-white);
    padding: 48px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    text-align: center;
}

.stat-number {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--color-eu-yellow);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.95rem;
    color: #cbd5e1;
    font-weight: 500;
}

/* CTA Card */
.cta-banner {
    background: linear-gradient(135deg, var(--color-eu-blue) 0%, var(--color-eu-blue-deep) 100%);
    border-radius: var(--radius-xl);
    padding: 56px 40px;
    color: var(--color-text-white);
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--color-eu-yellow);
    box-shadow: var(--shadow-xl);
}

.cta-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.cta-text {
    font-size: 1.15rem;
    color: #e2e8f0;
    max-width: 620px;
    margin: 0 auto 32px;
}

/* Authentication Page Styles */
.auth-wrapper {
    min-height: calc(100vh - 72px - 260px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: radial-gradient(circle at 50% 30%, rgba(0, 51, 153, 0.05) 0%, transparent 70%);
}

.auth-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 40px;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.onboarding-card {
    max-width: 580px;
}

.onboarding-consents {
    display: grid;
    gap: 18px;
    margin: 24px 0;
}

.onboarding-consent {
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}

.onboarding-consent input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-content: center;
    margin: 1px 0 0;
    border: 1.5px solid #aab7c6;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-consent input::before {
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s ease;
}

.onboarding-consent input:checked {
    border-color: var(--color-eu-blue);
    background: var(--color-eu-blue);
}

.onboarding-consent input:checked::before {
    transform: rotate(45deg) scale(1);
}

.onboarding-consent input:focus-visible {
    outline: 3px solid rgba(0, 51, 153, 0.2);
    outline-offset: 2px;
}

.onboarding-consent a {
    color: var(--color-eu-blue);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-eu-blue) 0%, var(--color-eu-yellow) 100%);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

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

.auth-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--color-eu-blue-deep);
    margin-bottom: 6px;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.auth-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 28px;
}

.auth-tab-btn {
    flex: 1;
    text-align: center;
    padding: 9px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab-btn.active {
    background: var(--color-bg-card);
    color: var(--color-eu-blue-deep);
    box-shadow: var(--shadow-sm);
}

/* OAuth Providers Buttons */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
}

.btn-google {
    color: #3c4043;
    border: 2px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #ea4335 0%, #fbbc05 33%, #34a853 66%, #4285f4 100%) border-box;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12);
}

.btn-google:hover {
    background:
        linear-gradient(#fafafa, #fafafa) padding-box,
        linear-gradient(90deg, #ea4335 0%, #fbbc05 33%, #34a853 66%, #4285f4 100%) border-box;
    box-shadow: 0 2px 5px rgba(60, 64, 67, 0.16);
    color: #202124;
}

.btn-google:focus-visible {
    outline: 2px solid rgba(66, 133, 244, 0.35);
    outline-offset: 3px;
}

.oauth-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.oauth-text-short {
    display: none !important;
}

@media (max-width: 640px) {
    .oauth-text-full {
        display: none !important;
    }

    .oauth-text-short {
        display: inline !important;
    }

    .auth-card {
        padding: 24px;
    }

    .btn-oauth {
        gap: 8px;
        padding: 12px 10px;
    }

    .oauth-text-short {
        white-space: nowrap;
    }
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}

.auth-divider span {
    padding: 0 12px;
}

.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text-main);
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235b6b7b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m3.5 5.75 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    color: var(--color-text-main);
    cursor: pointer;
}

select.form-control {
    padding-right: 40px;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-eu-blue);
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.15);
}

.form-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 22px;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.auth-footer-note {
    margin-top: 24px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.auth-message {
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    font-size: 0.9rem;
    display: none;
}

.auth-message.info {
    display: block;
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.auth-message.success {
    display: block;
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.auth-message.error {
    display: block;
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.auth-code-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.28em;
    text-align: center;
    padding: 12px 10px 12px calc(10px + 0.28em);
    color: var(--color-eu-blue-deep);
    border-color: #cbdaf0;
    background-color: var(--color-eu-blue-soft);
}

.auth-code-input:focus {
    border-color: var(--color-eu-blue);
    box-shadow: 0 0 0 3px rgb(15 76 156 / 0.12), 0 3px 0 var(--color-eu-yellow);
    outline: none;
}

/* Content & Placeholder Pages */
.legal-container {
    max-width: 840px;
    margin: 40px auto 80px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-sm);
}

.legal-header {
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 20px;
    margin-bottom: 32px;
}

.legal-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-eu-blue-deep);
    margin-bottom: 8px;
}

.legal-subtitle {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.legal-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-eu-blue-deep);
    margin: 28px 0 12px;
}

.legal-content p, .legal-content ul {
    margin-bottom: 16px;
    color: #334155;
}

.legal-content ul {
    padding-left: 24px;
}

.legal-content li {
    margin-bottom: 8px;
}

/* Footer */
.site-footer {
    background-color: var(--color-eu-blue-deep);
    color: #94a3b8;
    margin-top: auto;
    border-top: 3px solid var(--color-eu-yellow);
    padding: 18px 0;
}

.footer-content {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
}

.footer-brand-group {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 12px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.footer-brand-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-white);
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: var(--radius-full);
    background: rgba(255, 204, 0, 0.1);
    color: var(--color-eu-yellow);
    font-size: 0.72rem;
    font-weight: 600;
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    grid-column: 2;
    grid-row: 1;
}

.footer-link {
    color: #cbd5e1;
    font-size: 0.82rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-eu-yellow);
}

.footer-copyright {
    font-size: 0.78rem;
    text-align: right;
    justify-self: end;
}

/* Responsive Header, Footer & Global Layout */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .site-header {
        border-bottom-width: 2px;
    }

    .navbar {
        height: 64px;
        padding: 0;
        flex-wrap: nowrap;
    }

    .brand-logo {
        font-size: 1.2rem;
        gap: 8px;
    }

    .brand-icon {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        border-radius: var(--radius-sm);
    }

    .nav-links {
        display: none;
    }

    .nav-cta {
        display: flex;
        margin-left: auto;
        margin-right: 8px;
    }

    .nav-guest-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-text-white);
        font-size: 1.55rem;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.65);
    }

    .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        border: 0;
        background: rgba(15, 23, 42, 0.52);
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    .mobile-menu-backdrop[hidden] {
        display: none;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 1101;
        inset: 0 auto 0 0;
        width: min(86vw, 360px);
        height: 100vh;
        height: 100dvh;
        padding: 20px;
        overflow-y: auto;
        background: var(--color-bg-card);
        border-right: 1px solid var(--color-border);
        border-top: 4px solid var(--color-eu-yellow);
        box-shadow: var(--shadow-xl);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .mobile-menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu-header .brand-logo {
        color: var(--color-eu-blue-deep);
        font-size: 1.25rem;
    }

    .mobile-menu-header .brand-logo .accent {
        color: var(--color-eu-blue);
    }

    .mobile-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--color-bg-page);
        color: var(--color-text-main);
        font-size: 1rem;
        cursor: pointer;
    }

    .mobile-menu-nav,
    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 22px;
    }

    .mobile-menu-actions {
        margin-top: auto;
        padding-top: 22px;
        border-top: 1px solid var(--color-border);
    }

    .mobile-menu-label {
        padding: 0 10px 6px;
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .mobile-menu-link,
    .mobile-menu-action {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
        padding: 10px 12px;
        border-radius: var(--radius-md);
        color: var(--color-text-main);
        font-size: 0.95rem;
        font-weight: 600;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mobile-menu-link i,
    .mobile-menu-action i {
        width: 20px;
        color: var(--color-eu-blue);
        font-size: 1.1rem;
        text-align: center;
    }

    .mobile-menu-link:hover,
    .mobile-menu-link.active {
        background: var(--color-eu-blue-soft);
        color: var(--color-eu-blue-deep);
    }

    .mobile-menu-action {
        justify-content: center;
        border: 1px solid var(--color-border);
    }

    .mobile-menu-action-primary {
        background: var(--color-eu-yellow);
        border-color: var(--color-eu-yellow);
        color: var(--color-eu-blue-deep);
    }

    .mobile-menu-action-primary:hover {
        background: var(--color-eu-yellow-hover);
        color: var(--color-eu-blue-deep);
    }

    .mobile-menu-action-secondary:hover {
        background: var(--color-bg-page);
        color: var(--color-eu-blue-deep);
    }

    /* Keep the shared footer compact on tablet and mobile. */
    .site-footer {
        padding: 14px 0;
    }

    .footer-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 10px 8px;
        align-items: center;
    }

    .footer-brand-group {
        display: contents;
    }

    .footer-brand {
        grid-column: 1;
        grid-row: 1;
        gap: 6px;
    }

    .footer-badge {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
    }

    .footer-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .footer-copyright {
        grid-column: 3;
        grid-row: 1;
        font-size: 0.7rem;
        white-space: nowrap;
        justify-self: end;
    }

    .footer-rights {
        display: none;
    }

}

@media (max-width: 640px) {
    .container {
        padding: 0 14px;
    }

    .footer-logo {
        width: 22px;
        height: 22px;
    }

    .footer-brand-title {
        font-size: 0.84rem;
    }

    .footer-badge {
        gap: 2px;
        padding: 1px 4px;
        font-size: 0.58rem;
    }

    .footer-nav {
        gap: 8px 14px;
    }

    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .hero-actions .btn {
        width: 100%;
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .legal-container {
        padding: 18px;
    }

    /* Dashboard Mobile Compactness */
    .dashboard-page {
        padding: 20px 0 40px;
    }

    .dashboard-header-card {
        padding: 16px;
        gap: 14px;
        margin-bottom: 18px;
    }

    .dashboard-user-info {
        gap: 12px;
    }

    .user-avatar {
        font-size: 2.2rem;
    }

    .dashboard-greeting {
        font-size: 1.25rem;
    }

    .user-meta {
        font-size: 0.8rem;
        gap: 8px 12px;
        margin-top: 4px;
    }

    .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .dashboard-actions .btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.85rem;
        justify-content: center;
    }

    .project-header {
        padding: 16px;
    }

    .project-title-area {
        gap: 10px;
    }

    .project-icon-box {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }

    .project-title {
        font-size: 1.05rem;
    }

    .project-desc {
        font-size: 0.85rem;
    }

    .project-actions-bar {
        padding: 0 16px 14px;
    }

    .btn-signup-project {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    .project-quizzes-section {
        padding: 14px 16px;
    }

    .quiz-item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }

    .quiz-item-row .btn-quiz-start {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .quiz-modal-container {
        width: 95%;
        max-height: 90vh;
        margin: 10px;
    }

    .quiz-modal-header {
        padding: 14px 16px;
    }

    .quiz-modal-body {
        padding: 14px 16px;
    }

    .quiz-modal-footer {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .quiz-modal-footer .btn {
        width: 100%;
    }
}

/* Dashboard Single Project Container */
.dashboard-single-project-container {
    max-width: 860px;
    margin: 0 auto;
}

.single-project-card {
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   Dashboard Styles
   ========================================================================== */
.dashboard-page {
    padding: 40px 0 80px;
    background-color: var(--color-bg-page);
    min-height: calc(100vh - 180px);
}

.dashboard-header-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 28px;
}

.dashboard-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar {
    font-size: 3rem;
    color: var(--color-eu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-greeting-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-greeting {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-eu-blue-deep);
    letter-spacing: -0.5px;
}

.badge-role {
    background-color: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin-top: 6px;
}

.user-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-primary-soft {
    background: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
    border: 1px solid rgba(15, 76, 156, 0.2);
    padding: 9px 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-primary-soft:hover {
    background: #dbeafe;
    color: var(--color-eu-blue-deep);
}

.btn-danger-soft {
    background: #fef2f2;
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 9px 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-danger-soft:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* Full-screen settings dialog */
.settings-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(16px, 4vw, 40px);
    border: 0;
    background: rgba(11, 50, 117, 0.72);
    overflow-y: auto;
}

.settings-dialog:not([open]) {
    display: none;
}

.settings-dialog::backdrop {
    background: transparent;
}

.settings-card {
    width: min(100%, 680px);
    margin: auto;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-eu-blue-light);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: fadeIn 0.3s ease-out;
}

.settings-card-header {
    background: var(--color-eu-blue-soft);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.settings-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-eu-blue-deep);
}

.settings-title h2 {
    font-size: 1.15rem;
    font-weight: 700;
}

.btn-close-settings {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.btn-close-settings:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-main);
}

.settings-card-body {
    padding: 24px;
}

.settings-label {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.settings-help {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.settings-input-group {
    display: flex;
    gap: 12px;
    max-width: 540px;
}

.settings-input-group .form-control {
    flex: 1;
    min-width: 0;
}

@media (max-width: 600px) {
    .settings-dialog {
        padding: 12px;
    }

    .settings-card-body {
        padding: 20px;
    }

    .settings-input-group {
        flex-direction: column;
    }

    .settings-input-group .btn {
        width: 100%;
    }
}

/* Dashboard Navigation Tabs */
.dashboard-nav-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
    overflow-x: auto;
}

.dash-tab-btn {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.dash-tab-btn:hover {
    color: var(--color-eu-blue);
    background: var(--color-eu-blue-soft);
}

.dash-tab-btn.active {
    color: #ffffff;
    background: var(--color-eu-blue);
    box-shadow: var(--shadow-sm);
}

.dash-tab-content {
    display: none;
}

.dash-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.section-intro {
    margin-bottom: 24px;
}

.section-heading {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-eu-blue-deep);
}

.section-subtext {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

.project-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #cbd5e1;
}

.project-card.is-enrolled {
    border-color: var(--color-eu-blue-light);
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.project-header {
    padding: 24px;
    flex-grow: 1;
}

.project-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.project-tag {
    background: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.project-level {
    background: #f1f5f9;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.status-indicator-badge {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

.badge-available {
    background: #f1f5f9;
    color: #64748b;
}

.project-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.project-icon-box {
    width: 44px;
    height: 44px;
    background: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.project-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-eu-blue-deep);
    line-height: 1.3;
}

.project-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.project-actions-bar {
    padding: 0 24px 16px;
}

.btn-signup-project {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.btn-join {
    background: var(--color-eu-blue);
    color: #ffffff;
}

.btn-join:hover {
    background: var(--color-eu-blue-deep);
}

.btn-enrolled {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.btn-enrolled:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* Project Quizzes List */
.project-quizzes-section {
    background: #f8fafc;
    border-top: 1px solid var(--color-border);
    padding: 18px 24px;
}

.quizzes-heading {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quiz-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-item-row {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease;
}

.quiz-item-row:hover {
    border-color: var(--color-eu-blue-light);
}

.quiz-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-item-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-eu-blue-deep);
}

.quiz-meta-tags {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.quiz-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.btn-quiz-start {
    background: var(--color-eu-yellow);
    color: var(--color-eu-blue-deep);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-quiz-start:hover {
    background: var(--color-eu-yellow-hover);
    transform: scale(1.02);
}

/* Empty State Card */
.empty-state-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-border);
    padding: 48px 24px;
    text-align: center;
    grid-column: 1 / -1;
}

.empty-state-card i {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 12px;
    display: block;
}

.empty-state-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-eu-blue-deep);
    margin-bottom: 8px;
}

.empty-state-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto 20px;
}

/* Multiple Choice Quiz Modal */
.quiz-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 50, 117, 0.65);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.quiz-modal-container {
    background: #ffffff;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quiz-modal-header {
    background: var(--color-eu-blue-deep);
    color: #ffffff;
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--color-eu-yellow);
}

.quiz-modal-project-tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-eu-yellow);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.quiz-modal-title {
    font-size: 1.3rem;
    font-weight: 800;
}

.btn-close-modal {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: opacity 0.2s;
}

.btn-close-modal:hover {
    opacity: 0.8;
}

.quiz-modal-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

.quiz-modal-footer {
    padding: 16px 28px;
    background: #f8fafc;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Question Cards & Options */
.question-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.question-number {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-eu-blue);
    letter-spacing: 0.5px;
}

.question-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 6px 0 16px;
    line-height: 1.4;
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fbfcfe;
}

.option-label:hover {
    border-color: var(--color-eu-blue-light);
    background: #ffffff;
}

.option-radio {
    display: none;
}

.option-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-eu-blue-soft);
    color: var(--color-eu-blue);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.option-label input:checked ~ .option-marker {
    background: var(--color-eu-blue);
    color: #ffffff;
}

.option-label:has(input:checked) {
    border-color: var(--color-eu-blue);
    background: #f0f7ff;
}

.option-text {
    font-size: 0.95rem;
    color: var(--color-text-main);
    line-height: 1.4;
}

/* Feedback & Grading */
.option-label.option-correct {
    border-color: var(--color-success) !important;
    background: #f0fdf4 !important;
}

.option-label.option-correct .option-marker {
    background: var(--color-success) !important;
    color: #ffffff !important;
}

.option-label.option-incorrect {
    border-color: var(--color-danger) !important;
    background: #fef2f2 !important;
}

.option-label.option-incorrect .option-marker {
    background: var(--color-danger) !important;
    color: #ffffff !important;
}

.question-feedback {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    line-height: 1.5;
}

.feedback-correct {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.feedback-incorrect {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.quiz-result-banner {
    padding: 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: 24px;
}

.result-passed {
    background: #dcfce7;
    border: 2px solid #22c55e;
    color: #14532d;
}

.result-failed {
    background: #fff7ed;
    border: 2px solid #f97316;
    color: #7c2d12;
}

.result-score {
    font-size: 1.6rem;
    font-weight: 800;
}

.result-message {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 6px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dashboard refresh */
.dashboard-page {
    min-height: calc(100vh - 180px);
    padding: 48px 0 88px;
    background:
        radial-gradient(ellipse at 84% 2%, rgba(204, 224, 255, 0.52), transparent 34rem),
        #f4f7fc;
}

.dashboard-page > .container {
    max-width: 1160px;
}

.dashboard-page .dashboard-header-card {
    position: relative;
    min-height: 160px;
    padding: 28px 32px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(118deg, #082752 0%, #104c91 66%, #1765a8 100%);
    box-shadow: 0 16px 38px rgba(12, 49, 93, 0.15);
}

.dashboard-page .dashboard-user-info,
.dashboard-page .dashboard-actions {
    position: relative;
    z-index: 1;
}

.dashboard-page .user-avatar {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 2.5rem;
}

.dashboard-page .dashboard-greeting {
    color: #ffffff;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.25;
}

.dashboard-page .dashboard-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #b9d9ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.dashboard-page .badge-role {
    background: rgba(255, 255, 255, 0.13);
    color: #ffe27a;
}

.dashboard-page .user-meta {
    color: rgba(255, 255, 255, 0.76);
    margin-top: 9px;
}

.dashboard-page .user-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dashboard-page .dashboard-actions .btn-primary-soft {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
}

.dashboard-page .dashboard-actions .btn-primary-soft:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-page .section-intro {
    margin: 44px 0 22px;
}

.dashboard-page .section-heading {
    color: #102d50;
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    letter-spacing: -0.04em;
}

.dashboard-page .section-subtext {
    max-width: 650px;
    margin-top: 8px;
    color: #62758b;
    font-size: 1rem;
}

.dashboard-page .single-project-card {
    overflow: hidden;
    border: 1px solid #e1e8f1;
    border-radius: 22px;
    box-shadow: 0 14px 40px rgba(16, 45, 80, 0.08);
}

.dashboard-page .project-header {
    padding: 30px 32px 22px;
}

.dashboard-page .project-badge-row {
    margin-bottom: 22px;
}

.dashboard-page .project-title-area {
    align-items: flex-start;
}

.dashboard-page .project-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: #e8f2ff;
    color: #14539a;
    font-size: 1.65rem;
}

.dashboard-page .project-title {
    color: #102d50;
    font-size: 1.45rem;
    letter-spacing: -0.025em;
}

.dashboard-page .project-desc {
    max-width: 760px;
    margin-top: 5px;
    font-size: 0.98rem;
    line-height: 1.65;
}

.dashboard-page .project-actions-bar {
    padding: 0 32px 24px;
}

.dashboard-page .btn-signup-project {
    width: auto;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 12px;
}

/* Homepage hero */
.home-hero {
    padding: 76px 0 82px;
    background: linear-gradient(118deg, #174b89 0%, #2368ad 58%, #347fc0 100%);
}

.home-hero::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
}

.home-hero::after {
    background: radial-gradient(circle, rgba(15, 76, 156, 0.2) 0%, rgba(15, 76, 156, 0) 70%);
}

.home-hero .container,
.home-hero .hero-copy {
    position: relative;
    z-index: 1;
}

.home-hero .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 5vw, 72px);
}

.home-hero .hero-title {
    max-width: 680px;
    font-size: clamp(2.5rem, 4vw, 3.55rem);
    letter-spacing: -1.5px;
}

.home-hero .hero-lead {
    max-width: 610px;
    color: #dce8f7;
    font-size: 1.08rem;
}

.home-hero .hero-actions {
    margin-bottom: 30px;
}

.home-hero .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    max-width: 680px;
}

.home-hero .hero-trust-item {
    min-height: 112px;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 22px rgba(3, 19, 43, 0.12);
}

.home-hero .hero-trust-item:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.home-hero .hero-trust-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 204, 0, 0.14);
    font-size: 1rem;
}

.home-hero .hero-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #cbd9eb;
    font-size: 0.79rem;
    line-height: 1.35;
}

.home-hero .hero-trust-text strong {
    font-size: 0.94rem;
    line-height: 1.3;
}

.home-hero .hero-card {
    border: 1px solid #d8e7f7;
    border-radius: 20px;
    background: #fafdff;
    box-shadow: 0 24px 60px rgba(3, 19, 43, 0.28);
}

.home-hero .hero-card-header {
    border-bottom-color: #e8eef5;
}

.home-hero .hero-card-header-info h4 {
    color: #102d50;
}

.home-hero .hero-card-header-info p {
    color: #687b91;
}

.home-hero .hero-card-tag {
    background: #e8f2ff;
    color: #14539a;
}

.home-hero .quiz-preview-question {
    padding: 14px 16px;
    border: 1px solid #d7e7f8;
    border-left: 3px solid var(--color-eu-yellow);
    border-radius: 12px;
    background: #edf5ff;
    color: #1e293b;
}

.home-hero .quiz-option {
    border-color: #e5ebf2;
    background: #f8fafc;
    color: #475569;
}

.home-hero .quiz-option.correct {
    border-color: #a7e4c4;
    background: #effaf4;
    color: #166534;
}

.home-hero .quiz-option.wrong {
    border-color: #e8edf3;
    background: #f8fafc;
    color: #64748b;
    opacity: 1;
}

.home-hero .quiz-option.correct .quiz-bullet {
    background: #d4f3e1;
    color: #15803d;
}

.home-hero .quiz-option.wrong .quiz-bullet {
    background: #edf1f5;
    color: #94a3b8;
}

.home-hero .quiz-option.correct .quiz-option-icon {
    color: #16a34a;
}

.home-hero .quiz-option.wrong .quiz-option-icon {
    color: #cbd5e1;
}

.home-hero .quiz-explanation-box {
    border-color: #f2df9a;
    background: #fff9e8;
    color: #526175;
}

.home-hero .hero-explanation-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #b7791f;
    font-size: 1.1rem;
}

.home-hero .hero-explanation-label {
    color: #805b16;
}

@media (max-width: 900px) {
    .home-hero {
        padding: 60px 0 68px;
    }

    .home-hero .hero-grid {
        grid-template-columns: 1fr;
    }

    .home-hero .hero-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 640px) {
    .home-hero {
        padding: 44px 0 52px;
    }

    .home-hero .hero-title {
        font-size: 1.9rem;
        letter-spacing: -0.8px;
    }

    .home-hero .hero-trust {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .home-hero .hero-trust-item {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 11px 14px;
    }

    .home-hero .hero-trust-text {
        gap: 1px;
        font-size: 0.82rem;
    }
}

.dashboard-page .project-quizzes-section {
    padding: 26px 32px 30px;
    border-top: 1px solid #e7edf5;
    background: #f8fafd;
}

.dashboard-page .quizzes-heading {
    margin-bottom: 16px;
    color: #173657;
    font-size: 1rem;
}

.dashboard-page .quiz-items-list {
    gap: 12px;
}

.dashboard-page .quiz-item-row {
    min-height: 82px;
    padding: 16px 18px;
    border-color: #e3eaf3;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(16, 45, 80, 0.035);
}

.dashboard-page .quiz-item-row:hover {
    border-color: #a8c9f1;
    box-shadow: 0 8px 20px rgba(16, 73, 137, 0.08);
}

.dashboard-page .quiz-item-title {
    color: #163759;
    font-size: 0.98rem;
}

.dashboard-page .quiz-meta-tags {
    gap: 12px;
    margin-top: 2px;
    color: #6c7e93;
}

.dashboard-page .btn-quiz-start {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 11px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-page .btn-quiz-start:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(193, 145, 0, 0.2);
}

/* Full-screen quiz player */
body.quiz-is-open {
    overflow: hidden;
}

body.quiz-is-open .site-header,
body.quiz-is-open .site-footer {
    display: none;
}

.quiz-player {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f7f9fc;
    color: #142c48;
}

.quiz-player-topbar {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 2fr) 1fr;
    align-items: center;
    gap: 20px;
    min-height: 78px;
    padding: 12px clamp(18px, 4vw, 56px);
    border-bottom: 1px solid #e4eaf2;
    background: #ffffff;
}

.quiz-player-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0b2f5d;
    font-size: 1.05rem;
    font-weight: 800;
}

.quiz-player-brand .brand-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #0e4481;
    color: #ffcc00;
}

.quiz-player-topbar-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.quiz-player-topbar-title span {
    overflow: hidden;
    color: #74849a;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-player-topbar-title strong {
    overflow: hidden;
    color: #193858;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-exit-button {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
}

.quiz-exit-button:hover {
    border-color: #cbd5e1;
    color: #173657;
}

.quiz-player-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.quiz-page {
    width: min(100% - 40px, 820px);
    margin: 0 auto;
    padding: clamp(34px, 7vh, 72px) 0 52px;
}

.quiz-start-page,
.quiz-end-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quiz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #3972b2;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.quiz-start-icon {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    margin: 24px 0 18px;
    border-radius: 24px;
    background: #e7f1ff;
    color: #155499;
    font-size: 2rem;
}

.quiz-page h1 {
    max-width: 760px;
    margin: 0;
    color: #102d50;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.18;
}

.quiz-start-description {
    max-width: 580px;
    margin: 14px auto 0;
    color: #64758b;
    font-size: 1rem;
    line-height: 1.7;
}

.quiz-start-stats {
    display: grid;
    width: min(100%, 600px);
    grid-template-columns: repeat(3, 1fr);
    margin: 32px 0 20px;
    padding: 22px 12px;
    border: 1px solid #e3eaf2;
    border-radius: 16px;
    background: #ffffff;
}

.quiz-start-stats-single {
    width: min(100%, 220px);
    grid-template-columns: 1fr;
    margin-right: auto;
    margin-left: auto;
}

.quiz-start-stats div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 8px;
}

.quiz-start-stats div + div {
    border-left: 1px solid #e8edf3;
}

.quiz-start-stats strong {
    color: #173a61;
    font-size: 1.02rem;
}

.quiz-start-stats span {
    color: #8190a3;
    font-size: 0.76rem;
}

.quiz-instructions {
    display: flex;
    max-width: 600px;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #edf5ff;
    color: #365b80;
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: left;
}

.quiz-instructions i {
    margin-top: 2px;
    color: #3473b9;
}

.quiz-primary-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 22px;
    border: 0;
    border-radius: 12px;
    color: #12365d;
    font-size: 0.96rem;
    font-weight: 800;
}

.quiz-question-page {
    padding-top: clamp(36px, 8vh, 86px);
}

.quiz-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #6c7d92;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.quiz-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: #e4eaf1;
}

.quiz-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1760a4;
    transition: width 0.25s ease;
}

.quiz-question-card {
    margin: 42px 0 30px;
}

.quiz-question-card h1 {
    margin-top: 12px;
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
}

.quiz-question-image,
.quiz-review-image,
.assessment-question-image,
.public-preview-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 460px;
    margin: 22px 0;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    object-fit: contain;
    box-sizing: border-box;
}

.quiz-question-image {
    margin-top: 20px;
}

.quiz-review-image {
    max-height: 260px;
}

.assessment-question-image {
    margin: 0 0 18px;
}

.quiz-option-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.quiz-answer-option {
    display: grid;
    min-height: 68px;
    grid-template-columns: 22px 38px 1fr 22px;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    background: #ffffff;
    color: #233b57;
    cursor: pointer;
    font-size: 0.96rem;
    line-height: 1.5;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.quiz-answer-option:hover {
    border-color: #a9c5e5;
    box-shadow: 0 6px 18px rgba(20, 67, 117, 0.06);
}

.quiz-answer-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #155499;
}

.quiz-answer-letter {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: #f0f4f8;
    color: #63758a;
    font-size: 0.82rem;
    font-weight: 800;
}

.quiz-answer-check {
    opacity: 0;
    color: #1760a4;
}

.quiz-answer-option.is-selected {
    border-color: #4e8bc9;
    background: #f2f8ff;
    box-shadow: 0 0 0 2px rgba(64, 130, 198, 0.08);
}

.quiz-answer-option.is-selected .quiz-answer-letter {
    background: #dcecff;
    color: #155499;
}

.quiz-answer-option.is-selected .quiz-answer-check {
    opacity: 1;
}

.quiz-question-error {
    min-height: 22px;
    margin: 10px 0 0;
    color: #b42318;
    font-size: 0.85rem;
}

.quiz-question-navigation,
.quiz-end-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quiz-back-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid #dce4ed;
    border-radius: 11px;
    background: #ffffff;
    color: #52677f;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
}

.quiz-back-button:hover:not(:disabled) {
    border-color: #b9c8d9;
    color: #173657;
}

.quiz-back-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.quiz-end-page {
    padding-top: 32px;
}

.quiz-score-ring {
    display: flex;
    width: 142px;
    height: 142px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 18px 0 20px;
    border: 8px solid #dcecff;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #c8def6, 0 10px 28px rgba(25, 78, 132, 0.08);
}

.quiz-score-ring strong {
    color: #155499;
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.quiz-score-ring span {
    color: #6b7e93;
    font-size: 0.7rem;
}

.quiz-end-page h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.quiz-review-list {
    display: grid;
    width: 100%;
    gap: 10px;
    margin: 28px 0 0;
    text-align: left;
}

.quiz-review-item {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #d97706;
    border-radius: 12px;
    background: #ffffff;
}

.quiz-review-item.is-correct {
    border-left-color: #16a36a;
}

.quiz-review-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #536981;
    font-size: 0.8rem;
}

.quiz-review-item.is-correct .quiz-review-heading i,
.quiz-review-item.is-correct .quiz-review-heading strong {
    color: #148358;
}

.quiz-review-item.is-incorrect .quiz-review-heading i,
.quiz-review-item.is-incorrect .quiz-review-heading strong {
    color: #bd6b14;
}

.quiz-review-item p {
    margin: 9px 0 7px;
    color: #203a57;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
}

.quiz-review-item small {
    display: block;
    margin-top: 4px;
    color: #718197;
    font-size: 0.8rem;
    line-height: 1.5;
}

.quiz-end-actions {
    width: 100%;
    margin: 20px 0 0;
}

.quiz-end-actions .quiz-primary-action {
    margin-top: 0;
}

@media (max-width: 640px) {
    .dashboard-page {
        padding: 24px 0 48px;
    }

    .dashboard-page .dashboard-header-card {
        min-height: unset;
        padding: 22px 18px;
        border-radius: 18px;
    }

    .dashboard-page .user-avatar {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.8rem;
    }

    .dashboard-page .dashboard-user-info {
        align-items: flex-start;
    }

    .dashboard-page .dashboard-actions {
        width: auto;
        margin-left: 60px;
    }

    .dashboard-page .section-intro {
        margin-top: 32px;
    }

    .dashboard-page .project-header,
    .dashboard-page .project-quizzes-section {
        padding: 20px 18px;
    }

    .dashboard-page .project-actions-bar {
        padding: 0 18px 18px;
    }

    .dashboard-page .project-title {
        font-size: 1.15rem;
    }

    .dashboard-page .quiz-item-row {
        align-items: stretch;
    }

    .dashboard-page .quiz-meta-tags {
        flex-wrap: wrap;
    }

    .quiz-player-topbar {
        grid-template-columns: 1fr auto;
        min-height: 64px;
        gap: 8px;
        padding: 8px 14px;
    }

    .quiz-player-topbar-title {
        display: none;
    }

    .quiz-exit-button {
        padding: 9px 11px;
    }

    .quiz-page {
        width: min(100% - 32px, 820px);
        padding-top: 34px;
    }

    .quiz-start-stats {
        margin-top: 24px;
        padding: 16px 5px;
    }

    .quiz-start-stats strong {
        font-size: 0.87rem;
    }

    .quiz-start-stats span {
        font-size: 0.68rem;
    }

    .quiz-question-card {
        margin-top: 30px;
    }

    .quiz-answer-option {
        grid-template-columns: 20px 32px 1fr 16px;
        gap: 9px;
        padding: 12px;
        font-size: 0.88rem;
    }

    .quiz-answer-letter {
        width: 32px;
        height: 32px;
    }

    .quiz-question-navigation .quiz-primary-action {
        margin-top: 0;
    }

    .quiz-end-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-progress-track span,
    .dashboard-page .btn-quiz-start,
    .quiz-answer-option {
        transition: none;
    }
}

.dashboard-course-section {
    margin: 0 auto 36px;
    max-width: 1100px;
}

.course-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-weight: 700;
}

.course-empty-state {
    padding: 20px;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
}

.my-project-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
}

.my-project-actions .btn {
    flex-shrink: 0;
}

.project-empty-state {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 150px;
    padding: 26px 30px;
    border: 1px solid #d8e6f6;
    border-radius: 18px;
    background: linear-gradient(110deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: 0 10px 28px rgba(16, 45, 80, 0.06);
}

.project-empty-copy {
    min-width: 0;
}

.project-empty-copy h3 {
    color: #102d50;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.project-empty-state p {
    margin-top: 5px;
    color: #62758b;
    font-size: 0.94rem;
}

.project-empty-state .empty-state-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 15px;
    background: #e5f0ff;
    color: #14539a;
    font-size: 1.3rem;
}

.empty-state-icon,
.attempt-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 14px;
    background: #eaf2ff;
    color: #14539a;
    font-size: 1.25rem;
}

.project-empty-state .btn {
    margin-left: auto;
    white-space: nowrap;
}

.join-project-dialog {
    width: min(520px, calc(100% - 32px));
    max-width: none;
    padding: 32px;
    border: 1px solid #dce6f1;
    border-radius: 22px;
    color: #243b55;
    box-shadow: 0 24px 80px rgb(9 35 67 / 0.28);
}

.join-project-dialog::backdrop {
    background: rgb(9 28 52 / 0.58);
    backdrop-filter: blur(3px);
}

.join-project-dialog-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 16px;
    background: #e9f2ff;
    color: #14539a;
    font-size: 1.4rem;
}

.join-project-dialog h2 {
    margin-top: 6px;
    color: #102d50;
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.join-project-dialog > p:not(.public-project-eyebrow):not(.join-project-error) {
    margin-top: 12px;
    color: #61748a;
    line-height: 1.6;
}

.join-project-dialog > p strong {
    color: #264361;
}

.join-project-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.join-project-dialog-actions .btn {
    min-height: 42px;
}

.join-project-error {
    margin-top: 14px;
    color: #b42318;
    font-size: 0.9rem;
}

@media (max-width: 520px) {
    .join-project-dialog {
        padding: 24px 20px;
    }

    .join-project-dialog-actions {
        flex-direction: column-reverse;
    }

    .join-project-dialog-actions .btn {
        justify-content: center;
    }
}

.attempts-list {
    display: grid;
    gap: 10px;
}

.attempt-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    background: #ffffff;
    color: var(--color-text-main);
    box-shadow: 0 8px 24px rgba(16, 45, 80, 0.045);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.attempt-card:hover {
    transform: translateY(-2px);
    border-color: #bfd7f6;
    box-shadow: 0 12px 28px rgba(16, 45, 80, 0.09);
    color: var(--color-text-main);
}

.attempt-info {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.attempt-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attempt-info small,
.attempt-score small {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.attempt-score {
    display: grid;
    min-width: 74px;
    margin-left: auto;
    color: #14539a;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: right;
}

.attempt-open {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #14539a;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.assessment-page {
    min-height: 70vh;
    padding: 42px 0 76px;
    background: #f4f7fc;
}

.assessment-header {
    margin: 20px 0 24px;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(118deg, #082752 0%, #104c91 100%);
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(12, 49, 93, 0.15);
}

.assessment-header h1 {
    margin: 4px 0;
    font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.assessment-header p {
    color: rgba(255, 255, 255, 0.75);
}

.assessment-score {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 22px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
}

.assessment-score strong {
    color: #ffe27a;
    font-size: 1.8rem;
}

.assessment-results {
    display: grid;
    gap: 16px;
}

.assessment-result {
    padding: 22px;
    border: 1px solid #e1e8f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 45, 80, 0.045);
}

.assessment-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.assessment-result-heading strong {
    color: #14835b;
}

.assessment-result.is-incorrect .assessment-result-heading strong {
    color: #c43d4b;
}

.assessment-result h2 {
    margin: 12px 0 16px;
    color: #102d50;
    font-size: 1.15rem;
}

.assessment-options {
    display: grid;
    gap: 8px;
}

.assessment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #e7edf4;
    border-radius: 12px;
    background: #f8fafc;
    color: #344b66;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.assessment-option-marker {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 50%;
    background: #e8edf4;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.16s ease, color 0.16s ease;
}

.assessment-option.is-correct-selected {
    border-color: #65b88d;
    background: #edf9f3;
    color: #176d4e;
    box-shadow: 0 2px 8px rgb(22 109 78 / 0.07);
}

.assessment-option.is-correct-selected .assessment-option-marker {
    background: #d1f1df;
    color: #176d4e;
}

.assessment-option.is-correct-missed {
    border: 2px dashed #41a779;
    background: #f4fbf7;
    color: #176d4e;
}

.assessment-option.is-correct-missed .assessment-option-marker {
    background: #e1f4e9;
    color: #176d4e;
}

.assessment-option.is-wrong-selection {
    border-color: #dc6670;
    background: #fff1f1;
    color: #9f303d;
}

.assessment-option.is-wrong-selection .assessment-option-marker {
    background: #ffe0e2;
    color: #c43d4b;
}

.assessment-option small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.77rem;
    font-weight: 700;
    text-align: right;
}

.assessment-option.is-correct-selected small,
.assessment-option.is-correct-missed small {
    color: #176d4e;
}

.assessment-option.is-wrong-selection small {
    color: #9f303d;
}

.assessment-explanation {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    color: #53677e;
    font-size: 0.92rem;
}

.assessment-explanation i {
    color: #d19b00;
}

.assessment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.public-project-page {
    min-height: 70vh;
    padding-bottom: 72px;
    background: #f4f7fc;
}

.public-register-banner {
    padding: 18px 0;
    background: linear-gradient(110deg, #fff1ed 0%, #fff8ec 100%);
    border-bottom: 1px solid #f4d5c8;
}

.public-register-banner-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-register-icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    place-items: center;
    border-radius: 17px;
    background: #c83d37;
    color: #ffffff;
    font-size: 1.4rem;
    box-shadow: 0 8px 18px rgb(200 61 55 / 0.2);
}

.public-register-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
    color: #70423d;
    font-size: 0.9rem;
}

.public-register-copy strong {
    color: #462b29;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
}

.public-register-eyebrow {
    color: #ad4038;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.public-register-actions {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 5px;
    margin-left: auto;
}

.public-register-cta {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 17px;
    border-radius: 12px;
    background: #c83d37;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.public-register-cta:hover {
    transform: translateY(-1px);
    background: #a92f2b;
    color: #ffffff;
}

.public-register-login {
    color: #70423d;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.public-project-hero {
    padding: 28px 0 48px;
    color: #ffffff;
    background:
        radial-gradient(ellipse at 82% 16%, rgb(86 151 222 / 0.3), transparent 30rem),
        linear-gradient(120deg, #0b3275 0%, #0f4c9c 58%, #123f83 100%);
}

.public-project-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    color: #d9eaff;
    font-weight: 700;
}

.public-project-back:hover {
    color: #ffffff;
}

.public-project-heading {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    max-width: 850px;
}

.public-project-icon {
    display: grid;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 18px;
    background: rgb(255 255 255 / 0.12);
    color: #ffffff;
    font-size: 1.8rem;
}

.public-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.public-project-tags span {
    padding: 4px 10px;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.09);
    color: #e3efff;
    font-size: 0.78rem;
    font-weight: 700;
}

.public-project-heading h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.045em;
    line-height: 1.14;
}

.public-project-heading p {
    max-width: 720px;
    margin-top: 12px;
    color: #d3e3f7;
    font-size: 1.02rem;
    line-height: 1.7;
}

.public-project-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 28px 0 0 86px;
    color: #e3efff;
    font-size: 0.9rem;
    font-weight: 650;
}

.public-project-stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-project-content {
    display: grid;
    gap: 28px;
    padding-top: 32px;
}

.public-project-section {
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid #e1e8f1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(16, 45, 80, 0.055);
}

.public-project-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.public-project-eyebrow {
    color: #3976b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.public-project-section-heading h2 {
    margin-top: 4px;
    color: #102d50;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    letter-spacing: -0.03em;
}

.public-project-count,
.public-preview-quiz {
    color: #667b92;
    font-size: 0.88rem;
}

.public-quiz-list {
    display: grid;
    gap: 10px;
}

.public-quiz-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    background: #fbfcfe;
}

.public-quiz-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: #eaf2ff;
    color: #14539a;
    font-size: 1.15rem;
}

.public-quiz-info {
    min-width: 0;
}

.public-quiz-info h3 {
    color: #183a60;
    font-size: 1rem;
}

.public-quiz-info p {
    margin-top: 4px;
    color: #71839a;
    font-size: 0.85rem;
}

.public-quiz-lock {
    margin-left: auto;
    color: #8a9bb0;
}

.public-preview-quiz {
    text-align: right;
}

.public-preview-card {
    max-width: 820px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid #e4ebf4;
    border-radius: 16px;
    background: #f9fbfe;
}

.public-preview-question-number {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #3976b8;
    font-size: 0.82rem;
    font-weight: 750;
}

.public-preview-card h3 {
    margin-top: 12px;
    color: #183a60;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    line-height: 1.45;
}

.public-preview-image {
    max-height: 380px;
}

.public-preview-options {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.public-preview-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5ebf3;
    border-radius: 10px;
    background: #ffffff;
    color: #344b66;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.public-preview-options label:has(input:checked) {
    border-color: #7ca9dc;
    background: #f0f6ff;
}

.public-preview-options label.is-correct-selected {
    border-color: #41a779;
    background: #edf9f3;
    color: #176d4e;
}

.public-preview-options label.is-correct-missed {
    border: 2px dashed #41a779;
    background: #f4fbf7;
    color: #176d4e;
}

.public-preview-options label.is-wrong-selected {
    border-color: #dc6670;
    background: #fff1f1;
    color: #9f303d;
}

.public-preview-options input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    accent-color: #155499;
}

.public-preview-option-number {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 8px;
    background: #edf3fa;
    color: #526a84;
    font-size: 0.8rem;
    font-weight: 700;
}

.public-preview-options label.is-correct-selected .public-preview-option-number,
.public-preview-options label.is-correct-missed .public-preview-option-number {
    background: #d1f1df;
    color: #176d4e;
}

.public-preview-options label.is-wrong-selected .public-preview-option-number {
    background: #ffe0e2;
    color: #9f303d;
}

.public-preview-feedback {
    margin-left: auto;
    color: #176d4e;
    font-size: 0.8rem;
    font-weight: 750;
}

.public-preview-options label.is-wrong-selected .public-preview-feedback {
    color: #9f303d;
}

.public-preview-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.public-preview-actions .btn {
    min-height: 42px;
}

.public-preview-note {
    display: flex;
    gap: 8px;
    margin: 0;
    color: #71839a;
    font-size: 0.85rem;
}

.public-preview-result {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f0f4f8;
    color: #526a84;
    line-height: 1.5;
}

.public-preview-result strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.public-preview-result.is-correct {
    background: #edf9f3;
    color: #176d4e;
}

.public-preview-result.is-incorrect {
    background: #fff1f1;
    color: #9f303d;
}

.public-project-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: 18px;
    background: #103f79;
    color: #ffffff;
}

.public-cta-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.13);
    font-size: 1.35rem;
}

.public-project-cta h2 {
    font-size: 1.2rem;
}

.public-project-cta p {
    margin-top: 3px;
    color: #d3e3f7;
    font-size: 0.9rem;
}

.public-project-cta .btn {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 800px) {
    .project-empty-state {
        min-height: 130px;
        padding: 22px;
    }

    .public-project-hero {
        padding: 24px 0 36px;
    }

    .public-project-back {
        margin-bottom: 24px;
    }

    .public-project-stats {
        margin-left: 0;
    }
}

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

    .my-project-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-empty-state {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;
        padding: 20px 18px;
    }

    .project-empty-state .empty-state-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: 1.15rem;
    }

    .project-empty-copy h3 {
        font-size: 1.2rem;
    }

    .project-empty-copy p {
        font-size: 0.92rem;
    }

    .project-empty-state .btn {
        width: 100%;
        margin-left: 56px;
        justify-content: center;
    }

    .attempt-card {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 14px;
    }

    .attempt-info {
        flex: 1 1 calc(100% - 60px);
    }

    .attempt-score {
        margin-left: 58px;
        text-align: left;
    }

    .attempt-open {
        margin-left: auto;
    }

    .assessment-header,
    .assessment-result {
        padding: 20px 16px;
    }

    .assessment-option {
        flex-wrap: wrap;
    }

    .public-project-heading {
        gap: 14px;
    }

    .public-register-banner-inner {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .public-register-icon {
        width: 44px;
        height: 44px;
        grid-row: 1;
        grid-column: 1;
        border-radius: 13px;
        font-size: 1.1rem;
    }

    .public-register-copy {
        grid-row: 1;
        grid-column: 2;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .public-register-copy strong {
        font-size: 0.98rem;
    }

    .public-register-actions {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
        justify-items: stretch;
        margin-left: 0;
    }

    .public-register-cta {
        min-height: 42px;
        font-size: 0.84rem;
    }

    .public-register-login {
        justify-self: center;
    }

    .public-project-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
        font-size: 1.35rem;
    }

    .public-project-heading p {
        font-size: 0.94rem;
    }

    .public-project-stats {
        gap: 10px 18px;
        font-size: 0.84rem;
    }

    .public-project-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-preview-quiz {
        text-align: left;
    }

    .public-project-cta {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 20px 16px;
    }

    .public-project-cta > div {
        flex: 1 1 calc(100% - 64px);
    }

    .public-project-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

.exam-catalog-page {
    min-height: 70vh;
    background: #f4f7fc;
    padding-bottom: 72px;
}

.exam-catalog-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse at 84% 34%, rgb(59 130 246 / 0.34), transparent 28rem),
        linear-gradient(120deg, #0b3275 0%, #0f4c9c 58%, #123f83 100%);
}

.exam-catalog-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.16;
    pointer-events: none;
    background-image: radial-gradient(rgb(255 255 255 / 0.5) 0.7px, transparent 0.7px);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg, transparent, #000);
}

.exam-catalog-hero .container {
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 52px;
    padding-bottom: 52px;
}

.exam-hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.exam-eyebrow,
.exam-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.exam-eyebrow {
    padding: 7px 11px;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--radius-full);
    color: #ffe36b;
    background: rgb(255 255 255 / 0.08);
}

.exam-hero-content h1 {
    max-width: 620px;
    margin: 18px 0 12px;
    color: #fff;
    font-size: clamp(2.1rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.exam-hero-content > p {
    max-width: 560px;
    color: rgb(255 255 255 / 0.78);
    font-size: 1.05rem;
}

.exam-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 650;
}

.exam-hero-stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.exam-hero-stats i {
    color: #ffda45;
}

.exam-hero-art {
    position: relative;
    z-index: 1;
    width: 290px;
    height: 230px;
    flex: 0 0 290px;
}

.exam-hero-icon {
    position: absolute;
    top: 55px;
    left: 94px;
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.38);
    border-radius: 30px;
    color: #ffdb4a;
    background: linear-gradient(145deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06));
    box-shadow: 0 22px 50px rgb(0 0 0 / 0.2);
    font-size: 3rem;
    transform: rotate(-7deg);
}

.exam-hero-orbit {
    position: absolute;
    inset: 18px 26px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 50%;
    transform: rotate(-24deg);
}

.orbit-two {
    inset: 38px 3px;
    transform: rotate(32deg);
}

.exam-hero-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 12px;
    color: #fff;
    background: rgb(11 41 91 / 0.68);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.15);
    font-size: 0.78rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.exam-hero-float i {
    color: #ffda45;
}

.float-one {
    top: 28px;
    right: 0;
}

.float-two {
    bottom: 27px;
    left: 0;
}

.exam-catalog-main {
    padding-top: 42px;
}

.exam-catalog-toolbar {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid #e4eaf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgb(15 40 80 / 0.05);
}

.exam-toolbar-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.exam-section-kicker {
    color: var(--color-eu-blue-light);
    font-size: 0.7rem;
}

.exam-toolbar-heading h2 {
    margin-top: 3px;
    color: var(--color-eu-blue-deep);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.exam-toolbar-heading > p {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.exam-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    color: #8290a4;
    background: #f9fbfe;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.exam-search-box:focus-within {
    border-color: #4f83d2;
    background: #fff;
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.1);
}

.exam-search-box > i {
    color: var(--color-eu-blue);
    font-size: 1.1rem;
}

.exam-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--color-text-main);
    background: transparent;
    font: inherit;
}

.exam-search-box input::placeholder {
    color: #8995a6;
}

.exam-search-box kbd {
    min-width: 24px;
    padding: 1px 6px;
    border: 1px solid #dce4ef;
    border-radius: 5px;
    color: #78869a;
    background: #fff;
    font: 0.75rem var(--font-sans);
    text-align: center;
}

.exam-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.exam-filter-chip {
    padding: 7px 12px;
    border: 1px solid #e1e7f0;
    border-radius: var(--radius-full);
    color: #59677b;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    transition: all 0.18s ease;
}

.exam-filter-chip:hover {
    border-color: #a9c1e5;
    color: var(--color-eu-blue);
}

.exam-filter-chip.active {
    border-color: var(--color-eu-blue);
    color: #fff;
    background: var(--color-eu-blue);
}

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

.exam-course-card {
    display: flex;
    min-height: 440px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e3e9f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 40 80 / 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.exam-course-card:hover {
    transform: translateY(-3px);
    border-color: #c9d8eb;
    box-shadow: 0 14px 32px rgb(15 40 80 / 0.1);
}

.exam-course-card[hidden] {
    display: none;
}

.exam-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 26px 0;
}

.exam-course-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: var(--color-eu-blue);
    background: #edf4ff;
    font-size: 1.4rem;
}

.exam-course-category {
    padding: 5px 10px;
    border-radius: var(--radius-full);
    color: #285a9c;
    background: #eff5ff;
    font-size: 0.72rem;
    font-weight: 750;
}

.exam-course-body {
    flex: 1;
    padding: 18px 26px 24px;
}

.exam-course-level {
    color: #778398;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.exam-course-body h3 {
    margin: 9px 0 10px;
    color: #173b71;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.35;
}

.exam-course-body > p {
    color: #657287;
    font-size: 0.94rem;
    line-height: 1.7;
}

.exam-course-quiz-list {
    display: grid;
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #edf1f6;
}

.exam-course-quiz-list span {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #536176;
    font-size: 0.79rem;
    line-height: 1.4;
}

.exam-course-quiz-list i {
    flex-shrink: 0;
    color: #18a879;
}

.exam-card-footer {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
    padding: 18px 26px 24px;
    border-top: 1px solid #edf0f5;
    background: #fcfdff;
}

.exam-course-link {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 18px;
    border-radius: 12px;
    color: #fff;
    background: var(--color-eu-blue);
    box-shadow: 0 5px 14px rgb(15 76 156 / 0.18);
    font-size: 0.96rem;
    font-weight: 800;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.exam-course-link:hover,
.exam-course-link:focus-visible {
    transform: translateY(-1px);
    color: #fff;
    background: #0b397e;
    box-shadow: 0 8px 18px rgb(15 76 156 / 0.24);
}

.exam-course-link:focus-visible {
    outline: 3px solid var(--color-eu-yellow);
    outline-offset: 3px;
}

.exam-course-access {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-left: 2px;
    border: 1px solid #e4eaf3;
    border-radius: 12px;
    color: #8190a4;
    background: #fff;
    font-size: 0.95rem;
}

.exam-course-access.is-unlocked {
    border-color: #cbdcf1;
    color: #174f91;
    background: #edf4ff;
}

.exam-empty-state {
    padding: 50px 22px;
    border: 1px dashed #ccd7e6;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.exam-empty-state[hidden] {
    display: none;
}

.exam-empty-state > span {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 16px;
    color: var(--color-eu-blue);
    background: #edf4ff;
    font-size: 1.45rem;
}

.exam-empty-state h3 {
    color: #173b71;
    font-size: 1.15rem;
}

.exam-empty-state p {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.exam-no-courses {
    grid-column: 1 / -1;
}

.exam-reset-search {
    margin-top: 18px;
    padding: 9px 15px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--color-eu-blue);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 700px) {
    .exam-catalog-hero .container {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 42px;
    }

    .exam-hero-art {
        display: none;
    }

    .exam-catalog-main {
        padding-top: 26px;
    }

    .exam-catalog-toolbar {
        padding: 18px;
    }

    .exam-toolbar-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

}

@media (max-width: 420px) {
    .exam-course-card {
        min-height: 0;
    }

    .exam-card-topline,
    .exam-course-body,
    .exam-card-footer {
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 700px) {
    .exam-course-grid {
        grid-template-columns: 1fr;
    }
}

.public-project-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 0 48px;
    color: #fff;
    background:
        radial-gradient(ellipse at 84% 18%, rgb(255 204 0 / 0.22), transparent 24rem),
        linear-gradient(120deg, #092e70 0%, #1252a0 58%, #0b397e 100%);
}

.public-project-hero::after {
    position: absolute;
    top: 0;
    right: 8%;
    width: 180px;
    height: 5px;
    border-radius: 0 0 8px 8px;
    background: var(--color-eu-yellow);
    content: "";
}

.public-project-back {
    color: #dceaff;
}

.public-project-back:hover,
.public-project-back:focus-visible {
    color: var(--color-eu-yellow);
}

.public-project-icon {
    border-color: rgb(255 204 0 / 0.45);
    background: rgb(255 255 255 / 0.1);
    color: var(--color-eu-yellow);
}

.public-project-tags span {
    border-color: rgb(255 255 255 / 0.24);
    background: rgb(255 255 255 / 0.1);
}

.public-register-banner {
    position: relative;
    padding: 17px 0;
    border-bottom: 1px solid #e1b500;
    background: linear-gradient(105deg, #ffdf45 0%, #ffcf00 100%);
}

.public-register-icon {
    background: var(--color-eu-blue);
    color: var(--color-eu-yellow);
    box-shadow: 0 8px 18px rgb(11 57 126 / 0.2);
}

.public-register-copy,
.public-register-copy strong,
.public-register-eyebrow,
.public-register-login {
    color: #123b75;
}

.public-register-copy strong {
    font-size: 1.16rem;
}

.public-register-cta {
    background: var(--color-eu-blue);
    color: #fff;
}

.public-register-cta:hover {
    background: #082f6c;
    color: #fff;
}

.public-register-login:hover {
    color: #082f6c;
}

.public-quiz-card {
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.public-quiz-card:hover,
.public-quiz-card:focus-visible {
    transform: translateY(-2px);
    border-color: #e1b500;
    background: #fff9db;
    box-shadow: 0 10px 22px rgb(16 45 80 / 0.1);
    outline: none;
}

.public-quiz-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef3f9;
    color: #526a84;
    font-size: 0.76rem;
    font-weight: 750;
    transition: background 0.18s ease, color 0.18s ease;
}

.public-quiz-card:hover .public-quiz-locked,
.public-quiz-card:focus-visible .public-quiz-locked {
    background: var(--color-eu-blue);
    color: #fff;
}

.public-quiz-lock {
    display: none;
}

.public-preview-intro {
    margin-top: 8px;
    color: #667b92;
    font-size: 0.92rem;
}

.public-preview-list {
    display: grid;
    gap: 16px;
}

.public-preview-card {
    max-width: none;
    padding: clamp(18px, 3vw, 26px);
    border-color: #e3eaf4;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 8px 20px rgb(16 45 80 / 0.045);
}

.public-preview-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.public-preview-question-number {
    color: var(--color-eu-blue);
}

.public-preview-type {
    padding: 5px 9px;
    border: 1px solid #dbe6f4;
    border-radius: 999px;
    background: #fff;
    color: #647b97;
    font-size: 0.72rem;
    font-weight: 700;
}

.public-preview-card h3 {
    margin-top: 14px;
}

.public-preview-options label {
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 12px;
}

.public-preview-options label:hover {
    border-color: #9bbce4;
    background: #f3f8ff;
}

.public-preview-actions {
    justify-content: space-between;
    margin-top: 20px;
}

.public-preview-actions .btn {
    min-height: 44px;
    padding-inline: 18px;
}

.public-preview-result.is-prompt {
    background: #fff8db;
    color: #705700;
}

@media (max-width: 640px) {
    .public-quiz-card {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .public-quiz-info {
        flex: 1 1 calc(100% - 58px);
    }

    .public-quiz-locked {
        margin-left: 56px;
        font-size: 0.72rem;
    }

    .public-preview-card-top {
        align-items: flex-start;
    }

    .public-preview-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.project-details-markdown {
    color: #405875;
}

.project-markdown-content {
    max-width: 880px;
    color: #405875;
    font-size: 0.96rem;
    line-height: 1.75;
}

.project-markdown-content > :first-child {
    margin-top: 0;
}

.project-markdown-content h1,
.project-markdown-content h2,
.project-markdown-content h3,
.project-markdown-content h4 {
    margin: 1.6em 0 0.55em;
    color: #123b75;
    line-height: 1.3;
}

.project-markdown-content h1 { font-size: 1.7rem; }
.project-markdown-content h2 { font-size: 1.4rem; }
.project-markdown-content h3 { font-size: 1.15rem; }
.project-markdown-content h4 { font-size: 1rem; }

.project-markdown-content p,
.project-markdown-content ul,
.project-markdown-content ol,
.project-markdown-content blockquote,
.project-markdown-content pre,
.project-markdown-content table {
    margin: 0.8em 0;
}

.project-markdown-content ul,
.project-markdown-content ol {
    padding-left: 1.5em;
}

.project-markdown-content li + li {
    margin-top: 0.3em;
}

.project-markdown-content strong {
    color: #173b71;
}

.project-markdown-content a {
    color: #155499;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.project-markdown-content blockquote {
    padding: 12px 16px;
    border-left: 3px solid var(--color-eu-yellow);
    border-radius: 0 10px 10px 0;
    background: #f5f8fc;
}

.project-markdown-content code {
    padding: 0.12em 0.35em;
    border-radius: 5px;
    background: #edf3fa;
    color: #16457d;
    font-size: 0.9em;
}

.project-markdown-content pre {
    overflow-x: auto;
    padding: 14px 16px;
    border-radius: 10px;
    background: #102d50;
    color: #f1f6ff;
}

.project-markdown-content pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

.project-markdown-content table {
    width: 100%;
    border-collapse: collapse;
}

.project-markdown-content th,
.project-markdown-content td {
    padding: 8px 10px;
    border: 1px solid #dbe4ef;
    text-align: left;
}

.project-markdown-content th {
    background: #f2f6fb;
    color: #123b75;
}

.project-details-dashboard {
    margin-bottom: 24px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid #e1e8f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgb(16 45 80 / 0.055);
}

.dashboard-page {
    min-height: calc(100vh - 72px);
    padding: 28px 24px 64px;
    background: #f5f7fb;
}

.dashboard-layout {
    display: grid;
    width: min(1480px, 100%);
    min-height: calc(100vh - 164px);
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 28px;
    margin: 0 auto;
}

.dashboard-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    height: calc(100vh - 124px);
    min-height: 560px;
    flex-direction: column;
    align-self: start;
    padding: 20px 14px 14px;
    border: 1px solid #e6ebf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(18 45 80 / 0.045);
}

.dashboard-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 24px;
    color: #173b71;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
}

.dashboard-sidebar-brand:hover {
    color: #173b71;
}

.dashboard-sidebar-brand small {
    display: block;
    margin-top: 3px;
    color: #8794a7;
    font-size: 0.72rem;
    font-weight: 650;
}

.dashboard-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #124b91;
    font-size: 1.2rem;
}

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

.dashboard-nav-label {
    padding: 0 12px 8px;
    color: #9aa5b4;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.dashboard-side-link {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    color: #5e6b7d;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
}

.dashboard-side-link i {
    width: 20px;
    color: #8491a4;
    font-size: 1.08rem;
    text-align: center;
}

.dashboard-side-link:hover,
.dashboard-side-link:focus-visible {
    color: #124b91;
    background: #f2f6fc;
}

.dashboard-side-link:hover i,
.dashboard-side-link:focus-visible i {
    color: #124b91;
}

.dashboard-side-link:focus-visible,
.dashboard-sidebar-brand:focus-visible {
    outline: 3px solid #f2c400;
    outline-offset: 2px;
}

.dashboard-sidebar-user {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 5px 2px;
    border-top: 1px solid #edf0f5;
}

.dashboard-sidebar-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #124b91;
    background: #edf4ff;
    font-size: 0.9rem;
    font-weight: 800;
}

.dashboard-sidebar-user-copy {
    display: grid;
    min-width: 0;
    color: #27374c;
    font-size: 0.78rem;
    line-height: 1.35;
}

.dashboard-sidebar-user-copy strong,
.dashboard-sidebar-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-sidebar-user-copy small {
    color: #8995a5;
    font-size: 0.7rem;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-main > .container {
    max-width: none;
    padding: 0;
}

.dashboard-page .dashboard-header-card {
    min-height: 0;
    margin-bottom: 34px;
    padding: 28px 30px;
    border-radius: 20px;
}

.dashboard-page .section-intro {
    margin-top: 0;
}

.dashboard-course-section + .dashboard-course-section {
    margin-top: 48px;
}

.dashboard-course-section {
    scroll-margin-top: 96px;
}

@media (max-width: 900px) {
    .dashboard-page {
        padding: 22px 20px 54px;
    }

    .dashboard-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 18px;
    }

    .dashboard-sidebar {
        padding-inline: 10px;
    }

    .dashboard-page .dashboard-header-card {
        padding: 24px;
    }
}

@media (max-width: 700px) {
    .dashboard-page {
        padding: 18px 16px 104px;
    }

    .dashboard-layout {
        display: block;
        min-height: 0;
    }

    .dashboard-sidebar {
        position: fixed;
        z-index: 900;
        inset: auto 0 0;
        display: block;
        height: auto;
        min-height: 0;
        padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border: 0;
        border-top: 1px solid #e6ebf2;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 26px rgb(18 45 80 / 0.1);
    }

    .dashboard-sidebar-brand,
    .dashboard-sidebar-user,
    .dashboard-nav-label {
        display: none;
    }

    .dashboard-sidebar-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
    }

    .dashboard-side-link {
        min-width: 0;
        min-height: 56px;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 4px 2px;
        border-radius: 10px;
        font-size: 0.65rem;
        line-height: 1.15;
        text-align: center;
    }

    .dashboard-side-link i {
        width: auto;
        font-size: 1.12rem;
    }

    .dashboard-page .dashboard-header-card {
        gap: 18px;
        margin-bottom: 28px;
        padding: 22px;
    }

    .dashboard-page .dashboard-actions {
        flex-wrap: wrap;
    }

    .dashboard-page .section-intro {
        margin-bottom: 18px;
    }

    .dashboard-course-section + .dashboard-course-section {
        margin-top: 38px;
    }

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

@media (max-width: 460px) {
    .dashboard-page {
        padding-right: 12px;
        padding-left: 12px;
    }

    .dashboard-page .dashboard-header-card {
        padding: 18px;
    }

    .dashboard-page .user-meta {
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-page .dashboard-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.dashboard-view[hidden] {
    display: none !important;
}

.dashboard-side-link.is-active {
    color: #114b91;
    background: #edf4ff;
    font-weight: 800;
}

.dashboard-side-link.is-active i {
    color: #114b91;
}

.dashboard-page .dashboard-header-card {
    overflow: hidden;
    background:
        radial-gradient(circle at 94% 12%, rgb(255 204 0 / 0.2), transparent 10rem),
        linear-gradient(118deg, #092750 0%, #104c91 67%, #1765a8 100%);
}

.dashboard-page .dashboard-greeting {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    letter-spacing: -0.045em;
}

.dashboard-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 4px 0 22px;
    padding: 4px 2px;
}

.dashboard-page-kicker {
    display: block;
    margin-bottom: 7px;
    color: #73859b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.dashboard-page-heading h2 {
    color: #102d50;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 850;
    letter-spacing: -0.05em;
    line-height: 1.18;
}

.dashboard-page-heading p {
    margin-top: 8px;
    color: #66778c;
    font-size: 0.96rem;
}

.dashboard-heading-art {
    display: grid;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d9e6f6;
    border-radius: 21px;
    color: #154d91;
    background: linear-gradient(145deg, #fff, #eaf3ff);
    font-size: 1.8rem;
    transform: rotate(5deg);
}

.dashboard-heading-art-yellow {
    border-color: #f2df9e;
    color: #735700;
    background: linear-gradient(145deg, #fffdf4, #fff0bd);
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.dashboard-stat-card {
    display: flex;
    min-width: 0;
    min-height: 100px;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(18 45 80 / 0.035);
    color: #23364e;
    text-align: left;
}

.dashboard-stat-card > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.dashboard-stat-card strong {
    overflow: hidden;
    color: #163b70;
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.dashboard-stat-card small {
    margin-top: 4px;
    color: #758399;
    font-size: 0.75rem;
    line-height: 1.35;
}

.dashboard-stat-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: #18559b;
    background: #edf4ff;
    font-size: 1.15rem;
}

.dashboard-stat-card-accent .dashboard-stat-icon {
    color: #15744f;
    background: #e9f7ef;
}

.dashboard-stat-card-action {
    position: relative;
    cursor: pointer;
    font: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-stat-card-action:hover {
    transform: translateY(-2px);
    border-color: #a8c5e9;
    box-shadow: 0 10px 24px rgb(18 45 80 / 0.08);
}

.dashboard-stat-card-action strong {
    font-size: 0.98rem;
}

.dashboard-stat-arrow {
    margin-left: auto;
    color: #8b9bb0;
}

.dashboard-discover-grid {
    align-items: stretch;
}

.dashboard-discover-card {
    min-height: 0;
}

.dashboard-discover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 22px;
    border-top: 1px solid #edf1f6;
    background: #fbfcfe;
}

.dashboard-discover-footer .btn-signup-project {
    width: auto;
    padding: 10px 14px;
}

.dashboard-discover-empty {
    grid-column: 1 / -1;
    padding: clamp(28px, 5vw, 54px) 24px;
    border: 1px dashed #cbd8e8;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.dashboard-discover-empty .empty-state-icon {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 17px;
    color: #154d91;
    background: #edf4ff;
    font-size: 1.45rem;
}

.dashboard-discover-empty h3 {
    color: #173b71;
    font-size: 1.15rem;
}

.dashboard-discover-empty p {
    max-width: 420px;
    margin: 6px auto 0;
    color: #6e7e91;
    font-size: 0.9rem;
}

.dashboard-discover-loading {
    grid-column: 1 / -1;
    display: flex;
    min-height: 140px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed #cbd8e8;
    border-radius: 18px;
    color: #66778c;
    background: #fff;
    font-size: 0.9rem;
}

.dashboard-discover-loading i {
    color: #18559b;
    font-size: 1.15rem;
}

.dashboard-discover-error {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.dashboard-account-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    background: #fff;
}

.dashboard-account-avatar {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 16px;
    color: #124b91;
    background: #edf4ff;
    font-size: 1.2rem;
    font-weight: 850;
}

.dashboard-account-summary > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.dashboard-account-summary strong {
    color: #183b6d;
}

.dashboard-account-summary small {
    overflow: hidden;
    color: #76859a;
    text-overflow: ellipsis;
}

.dashboard-account-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #168152;
    font-size: 0.78rem;
    font-weight: 750;
}

.dashboard-account-view .settings-dialog {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    color: inherit;
    background: transparent;
}

.dashboard-account-view .settings-card {
    width: 100%;
    border: 1px solid #e2e9f2;
    border-radius: 17px;
    box-shadow: 0 7px 22px rgb(18 45 80 / 0.045);
    animation: none;
}

.dashboard-account-view .settings-card-header {
    padding: 18px 22px;
    background: #fff;
}

.dashboard-account-view .settings-card-body {
    padding: 22px;
}

.dashboard-account-view .settings-input-group {
    max-width: 720px;
}

.dashboard-signup-message:not([hidden]) {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #fecaca;
    border-radius: 11px;
    color: #991b1b;
    background: #fef2f2;
}

@media (max-width: 700px) {
    .dashboard-stat-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-bottom: 28px;
    }

    .dashboard-stat-card {
        min-height: 78px;
        padding: 13px 15px;
    }

    .dashboard-page-heading {
        margin-top: 0;
    }
}

@media (max-width: 460px) {
    .dashboard-heading-art {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.35rem;
    }

    .dashboard-page-heading p {
        font-size: 0.88rem;
    }

    .dashboard-discover-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-discover-footer .btn-signup-project {
        width: 100%;
    }

    .dashboard-account-status {
        font-size: 0;
    }

    .dashboard-account-status i {
        font-size: 1rem;
    }
}

.exam-course-grid {
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 22px;
}

.exam-course-card {
    min-height: 410px;
    height: 100%;
    border-color: #e2e9f2;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgb(15 40 80 / 0.055);
    background: linear-gradient(180deg, #fff 0%, #fff 68%, #f8faff 100%);
}

.exam-course-category {
    color: #183e70;
    background: #eaf1fb;
    font-weight: 800;
}

.exam-course-level {
    color: #5b6d84;
    font-weight: 850;
}

.exam-course-body h3 {
    color: #102f59;
    font-weight: 850;
}

.exam-card-topline {
    min-height: 76px;
    justify-content: flex-start;
    gap: 12px;
}

.exam-course-icon {
    flex: 0 0 auto;
    border: 1px solid #d7e4f6;
    border-radius: 15px;
    color: #124b91;
    background: linear-gradient(145deg, #edf4ff, #dceaff);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);
}

.exam-course-category {
    max-width: calc(100% - 112px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exam-course-access {
    flex: 0 0 auto;
    margin-left: auto;
}

.exam-course-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.exam-course-body h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.exam-course-description {
    display: -webkit-box;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    color: #52647b;
    font-size: 0.9rem;
    font-weight: 550;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.exam-course-quiz-list {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 5px;
    margin-top: auto;
    padding: 10px 13px;
    border: 1px solid #e1eaf6;
    border-radius: 13px;
    background: linear-gradient(110deg, #f4f8ff, #f9fbff);
}

.exam-course-quiz-label {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    color: #657995 !important;
    font-size: 0.6rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.09em;
}

.exam-course-quiz-label i {
    color: #1856a0;
}

.exam-course-quiz-title {
    display: flex !important;
    align-items: flex-start;
    gap: 8px !important;
    overflow: hidden;
    color: #163c6b !important;
    font-size: 0.8rem !important;
    font-weight: 800;
    line-height: 1.35;
}

.exam-course-quiz-title i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #174f91;
}

.exam-course-no-quiz .exam-course-quiz-title {
    color: #68788d !important;
    font-weight: 650;
}

.exam-card-footer {
    gap: 13px;
    padding: 16px 22px 20px;
    border-top: 1px solid #e5ebf4;
    background: #f7f9fd;
}

.exam-course-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.exam-course-metric {
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e2e9f3;
    border-radius: 13px;
    background: #fff;
}

.exam-course-metric-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    font-size: 0.95rem;
}

.exam-metric-icon-quizzes {
    color: #51418a;
    background: #f0edfa;
}

.exam-metric-icon-questions {
    color: #15558e;
    background: #eaf3fc;
}

.exam-course-metric-copy {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.exam-course-metric-copy strong {
    overflow: hidden;
    color: #133963;
    font-size: 1.16rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
}

.exam-course-metric-copy small {
    margin-top: 4px;
    color: #5b6e85;
    font-size: 0.69rem;
    font-weight: 750;
    white-space: nowrap;
}

.exam-course-link {
    min-height: 48px;
    font-weight: 850;
}

.exam-course-link:focus-visible {
    outline-offset: 4px;
}

@media (max-width: 700px) {
    .exam-course-grid {
        grid-auto-rows: auto;
        gap: 16px;
    }

    .exam-course-card {
        min-height: 0;
    }
}

@media (max-width: 420px) {
    .exam-course-metrics {
        gap: 7px;
    }

    .exam-course-metric {
        gap: 7px;
        padding: 8px;
    }

    .exam-course-metric-icon {
        width: 32px;
        height: 32px;
    }

    .exam-course-metric-copy small {
        font-size: 0.64rem;
    }
}