/* Somali Scientific LMS v2 — Design System */
:root {
    --site-header-h: 4rem;
}

/* Brand Studio saved colors → site UI */
.bg-brand-600,
.hover\:bg-brand-600:hover,
.bg-brand-500 {
    background-color: var(--brand-primary, #6366f1) !important;
}

.text-brand-600,
.text-brand-700,
.hover\:text-brand-600:hover {
    color: var(--brand-primary, #6366f1) !important;
}

.border-brand-600,
.border-brand-500 {
    border-color: var(--brand-primary, #6366f1) !important;
}

.bg-brand-50 {
    background-color: color-mix(in srgb, var(--brand-primary, #6366f1) 10%, white) !important;
}

.text-brand-700 {
    color: var(--brand-secondary, #4f46e5) !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video {
    max-width: 100%;
    height: auto;
}

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prose p { margin-bottom: 0.75rem; }

.auth-layout-main {
    min-height: 0;
}

/* ─── Hero ─── */
:root {
    --hero-max-width: 1600px;
    --hero-height: 600px;
}

.hero-section {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

/* Option 1 — classic full-viewport hero (unchanged) */
.hero-section.hero-option-1 {
    min-height: calc(100dvh - var(--site-header-h, 4rem));
    min-height: calc(100svh - var(--site-header-h, 4rem));
}

body.is-hero-preview .hero-section.hero-option-1 {
    min-height: 100dvh;
    min-height: 100svh;
}

/* Options 2–5 — premium 1600 × 600 banner */
.hero-section.hero-banner {
    min-height: var(--hero-height);
    height: var(--hero-height);
    max-height: var(--hero-height);
    box-sizing: border-box;
}

.hero-section.hero-banner .ssc-elite__shell {
    max-width: var(--hero-max-width);
    margin-inline: auto;
}

body.is-hero-preview .hero-section.hero-banner {
    min-height: var(--hero-height);
    height: var(--hero-height);
    max-height: var(--hero-height);
}

@media (max-width: 1023px) {
    .hero-section.hero-option-1 {
        min-height: auto;
        padding-top: clamp(2rem, 5vw, 3rem);
        padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    }

    body.is-hero-preview .hero-section.hero-option-1 {
        min-height: auto;
        min-height: min(100dvh, 720px);
    }

    .hero-section.hero-banner {
        min-height: auto;
        height: auto;
        max-height: none;
        padding-top: clamp(2rem, 5vw, 3rem);
        padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    }

    body.is-hero-preview .hero-section.hero-banner {
        min-height: auto;
        max-height: none;
        height: auto;
    }
}

/* Smooth blue gradient — calm, not distracting */
.hero-bg {
    background: linear-gradient(
        160deg,
        #0f172a 0%,
        #1e3a8a 28%,
        #2563eb 52%,
        #1d4ed8 78%,
        #1e3a8a 100%
    );
    background-size: 400% 400%;
    animation: hero-bg-drift 18s ease-in-out infinite;
}

/* Soft light orbs — depth without clutter */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.hero-orb--1 {
    top: -8%;
    left: 15%;
    width: min(420px, 75vw);
    height: min(420px, 75vw);
    background: rgba(96, 165, 250, 0.22);
    animation: hero-orb-float 14s ease-in-out infinite;
}

.hero-orb--2 {
    bottom: 5%;
    right: 10%;
    width: min(360px, 65vw);
    height: min(360px, 65vw);
    background: rgba(56, 189, 248, 0.14);
    animation: hero-orb-float 18s ease-in-out infinite reverse;
}

/* Subtle grain — premium texture */
.hero-noise {
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Accent line on second headline */
.hero-headline-accent {
    background: linear-gradient(90deg, #ffffff 0%, #bfdbfe 45%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}

.hero-headline-accent::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #38bdf8);
    transform: translateX(-50%);
    animation: hero-underline 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

.hero-cta-primary {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

/* Staggered entrance — typography first, UI second */
.hero-animate {
    opacity: 0;
    transform: translateY(24px);
    animation: hero-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate-1 { animation-delay: 0.05s; }
.hero-animate-2 { animation-delay: 0.18s; }
.hero-animate-3 { animation-delay: 0.32s; }
.hero-animate-4 { animation-delay: 0.46s; }
.hero-animate-5 { animation-delay: 0.58s; }
.hero-animate-6 { animation-delay: 0.72s; }

.hero-scroll-hint {
    animation: hero-bounce 2.4s ease-in-out 1.2s infinite;
}

@keyframes hero-bg-drift {
    0%, 100% { background-position: 0% 40%; }
    50% { background-position: 100% 60%; }
}

@keyframes hero-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -16px) scale(1.06); }
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-underline {
    to { width: 72px; }
}

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg,
    .hero-orb,
    .hero-animate,
    .hero-scroll-hint,
    .hero-headline-accent::after {
        animation: none;
    }
    .hero-animate { opacity: 1; transform: none; }
    .hero-headline-accent::after { width: 72px; }
}

/* ─── Courses page ─── */
.courses-hero-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #1d4ed8 100%);
}

.courses-hero-orb {
    position: absolute;
    top: -20%;
    right: -5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.18);
    filter: blur(70px);
    pointer-events: none;
}

.course-card:hover .course-card-arrow {
    opacity: 1;
}

/* ─── About page ─── */
.about-hero {
    isolation: isolate;
}

.about-hero-bg {
    background: linear-gradient(155deg, #0c1222 0%, #1e3a8a 32%, #1d4ed8 58%, #172554 100%);
}

.about-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
}

.about-hero-orb--1 {
    top: -12%;
    right: 8%;
    width: min(380px, 70vw);
    height: min(380px, 70vw);
    background: rgba(56, 189, 248, 0.16);
}

.about-hero-orb--2 {
    bottom: -8%;
    left: -4%;
    width: min(320px, 60vw);
    height: min(320px, 60vw);
    background: rgba(99, 102, 241, 0.14);
}

.about-hero-noise {
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.about-hero-accent {
    background: linear-gradient(90deg, #ffffff 20%, #93c5fd 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-hero-pill {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
}

.about-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2563eb;
}

.about-section-label--light {
    color: #93c5fd;
}

.about-section-label-line {
    display: block;
    width: 2rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.about-founder-section {
    isolation: isolate;
}

.about-founder-bg {
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(37, 99, 235, 0.06), transparent),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.dark .about-founder-bg {
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(37, 99, 235, 0.1), transparent),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

.about-founder-frame {
    position: relative;
}

.about-founder-photo {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #e2e8f0;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.06),
        0 20px 40px -12px rgb(30 58 138 / 0.18);
}

.about-founder-photo img {
    display: block;
}

.about-founder-frame-accent {
    position: absolute;
    right: -0.875rem;
    bottom: -0.875rem;
    z-index: 0;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    border-radius: 1.25rem;
    border: 2px solid #2563eb;
    opacity: 0.35;
}

.about-pullquote {
    position: relative;
    padding-left: 1.25rem;
    border-left: 3px solid #2563eb;
}

.about-pullquote p {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.65;
    color: #334155;
}

.dark .about-pullquote p {
    color: #cbd5e1;
}

.about-focus-card {
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dark .about-focus-card {
    border-color: rgb(51 65 85 / 0.8);
    background: rgb(15 23 42 / 0.6);
}

.about-focus-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 24px -8px rgb(37 99 235 / 0.2);
    transform: translateY(-2px);
}

.about-focus-num {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #2563eb;
}

.about-section-label--center {
    justify-content: center;
}

.about-mission-section {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37, 99, 235, 0.07), transparent),
        #f8fafc;
}

.dark .about-mission-section {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37, 99, 235, 0.14), transparent),
        #0b1120;
}

.about-mvv-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .about-mvv-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.about-mvv-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dark .about-mvv-card {
    border-color: rgb(51 65 85 / 0.75);
    background: #0f172a;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.2);
}

.about-mvv-card:hover {
    transform: translateY(-4px);
    border-color: rgb(147 197 253 / 0.6);
    box-shadow: 0 16px 40px -12px rgb(37 99 235 / 0.18);
}

.dark .about-mvv-card:hover {
    border-color: rgb(59 130 246 / 0.35);
    box-shadow: 0 16px 40px -12px rgb(37 99 235 / 0.25);
}

.about-mvv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    font-size: 1.25rem;
    color: #fff;
    box-shadow: 0 8px 20px -6px rgb(15 23 42 / 0.25);
}

.about-mvv-icon--mission {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 20px -6px rgb(37 99 235 / 0.45);
}

.about-mvv-icon--vision {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 8px 20px -6px rgb(79 70 229 / 0.4);
}

.about-mvv-icon--values {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 8px 20px -6px rgb(5 150 105 / 0.4);
}

.about-mvv-subtitle {
    margin-top: 1.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.about-mvv-title {
    margin-top: 0.375rem;
    font-size: 1.375rem;
    font-weight: 800;
    color: #0f172a;
}

.dark .about-mvv-title {
    color: #f8fafc;
}

.about-mvv-text {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #64748b;
}

.dark .about-mvv-text {
    color: #94a3b8;
}

.about-offer-section {
    background: #fff;
    border-top: 1px solid rgb(226 232 240 / 0.8);
}

.dark .about-offer-section {
    background: #0f172a;
    border-top-color: rgb(51 65 85 / 0.8);
}

.about-offer-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .about-offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .about-offer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.about-offer-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #f8fafc;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.dark .about-offer-card {
    border-color: rgb(51 65 85 / 0.75);
    background: rgb(15 23 42 / 0.6);
}

.about-offer-card:hover {
    transform: translateY(-4px);
    border-color: rgb(147 197 253 / 0.55);
    background: #fff;
    box-shadow: 0 16px 40px -12px rgb(37 99 235 / 0.16);
}

.dark .about-offer-card:hover {
    border-color: rgb(59 130 246 / 0.35);
    background: #0f172a;
    box-shadow: 0 16px 40px -12px rgb(37 99 235 / 0.22);
}

.about-offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    font-size: 1.125rem;
    color: #fff;
}

.about-offer-icon--courses {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 16px -4px rgb(37 99 235 / 0.45);
}

.about-offer-icon--videos {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 6px 16px -4px rgb(79 70 229 / 0.4);
}

.about-offer-icon--progress {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 6px 16px -4px rgb(8 145 178 / 0.4);
}

.about-offer-icon--enroll {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 6px 16px -4px rgb(5 150 105 / 0.4);
}

.about-offer-icon--exams {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 6px 16px -4px rgb(217 119 6 / 0.4);
}

.about-offer-icon--dashboard {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 6px 16px -4px rgb(124 58 237 / 0.4);
}

.about-offer-subtitle {
    margin-top: 1.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.about-offer-title {
    margin-top: 0.25rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
}

.dark .about-offer-title {
    color: #f8fafc;
}

.about-offer-text {
    margin-top: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: #64748b;
}

.dark .about-offer-text {
    color: #94a3b8;
}

.about-cta {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #4338ca 100%);
    box-shadow: 0 24px 48px -12px rgb(37 99 235 / 0.35);
}

.about-cta-glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    filter: blur(60px);
    pointer-events: none;
}

.about-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.about-cta-btn:hover {
    transform: translateY(-1px);
}

.about-cta-btn--primary {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}

.about-cta-btn--primary:hover {
    background: #eff6ff;
}

.about-cta-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}

.about-cta-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}


@media (max-width: 1023px) {
    .courses-filter-panel {
        position: static;
    }
}

/* ─── Footer ─── */
.site-footer {
    background-color: var(--ds-bg-subtle, #f8fafc);
}

/* ─── Contact FAQ ─── */
.contact-faq-item {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-faq-item:hover {
    border-color: rgb(191 219 254);
}

.contact-faq-item summary {
    list-style: none;
}

.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.contact-faq-summary {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.125rem 1.25rem;
}

.contact-faq-question {
    flex: 1;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
    color: #0f172a;
}

.contact-faq-answer {
    border-top: 1px solid rgb(241 245 249);
    padding: 0 1.25rem 1.125rem;
}

.contact-faq-answer p {
    margin: 0;
    padding-top: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #64748b;
}

.faq-toggle {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    color: #94a3b8;
}

.faq-toggle-icon {
    transition: transform 0.2s ease;
}

.contact-faq-item[open] {
    border-color: #93c5fd;
    box-shadow: 0 4px 16px -4px rgb(37 99 235 / 0.15);
}

.contact-faq-item[open] .contact-faq-question {
    color: #2563eb;
}

.contact-faq-item[open] .faq-toggle {
    border-color: #2563eb;
    background-color: #2563eb;
    color: #fff;
}

.contact-faq-item[open] .faq-toggle-icon {
    transform: rotate(45deg);
}

/* ─── Auth v2 — centered single card ─── */
.auth-v2 {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100dvh - var(--site-header-h));
    min-height: calc(100vh - var(--site-header-h));
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-v2-page-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgb(37 99 235 / 0.09), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgb(79 70 229 / 0.06), transparent 50%),
        #f1f5f9;
    pointer-events: none;
}

.auth-v2-center {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(26rem, 100%);
    margin: 0 auto;
}

.auth-v2-card {
    width: 100%;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid rgb(226 232 240 / 0.95);
    background: #fff;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 16px 48px -20px rgb(15 23 42 / 0.14);
}

@media (min-width: 480px) {
    .auth-v2-card {
        padding: 2.25rem 2rem 2rem;
    }
}

.auth-v2-card--wide {
    max-width: 28rem;
}

.auth-v2-center:has(.auth-v2-card--wide) {
    max-width: 28rem;
}

.auth-v2-center--register,
.auth-v2-center:has(.auth-v2-card--register),
.auth-v2-center:has(.auth-v2-form--compact),
.auth-v2-center--fit {
    max-width: min(24rem, 100%);
}

.auth-v2-form--register {
    gap: 1.25rem;
}

.auth-v2-form-grid--register {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .auth-v2-form-grid--register {
        grid-template-columns: 1fr 1fr;
    }

    .auth-v2-form-grid--register .auth-v2-field:last-child {
        grid-column: 1 / -1;
    }
}

.auth-v2-card::before {
    content: '';
    display: block;
    height: 3px;
    margin: -2rem -1.75rem 1.75rem;
    border-radius: 1.25rem 1.25rem 0 0;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

@media (min-width: 480px) {
    .auth-v2-card::before {
        margin: -2.25rem -2rem 1.75rem;
    }
}

.auth-v2-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.auth-v2-card-logo .site-logo--auth-card {
    justify-content: center;
}

.auth-v2-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1.25rem;
    border-radius: 1rem;
    font-size: 1.125rem;
    color: #fff;
}

.auth-v2-card-icon--blue {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 20px -6px rgb(37 99 235 / 0.45);
}

.auth-v2-card-icon--indigo {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 8px 20px -6px rgb(79 70 229 / 0.4);
}

.auth-v2-card-icon--amber {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 8px 20px -6px rgb(217 119 6 / 0.4);
}

.auth-v2-header {
    margin-bottom: 1.75rem;
    text-align: center;
}

.auth-v2-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2563eb;
}

.auth-v2-title {
    margin-top: 0.5rem;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.2;
}

.auth-v2-subtitle {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #64748b;
}

.auth-v2-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-v2-form--compact {
    gap: 0.75rem;
}

.auth-v2--fit {
    align-items: flex-start;
    min-height: auto;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.auth-v2-card--fit::before {
    margin: -1.125rem -1.25rem 0.625rem;
    height: 2px;
}

.auth-v2-card--fit {
    display: flex;
    flex-direction: column;
    min-height: 29.5rem;
    padding: 1.125rem 1.25rem 1rem;
}

.auth-v2-center--fit {
    width: 100%;
    max-width: min(24rem, 100%);
}

.auth-v2-card--fit .auth-v2-form--fit {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.auth-v2-form-spacer {
    flex: 1;
    min-height: 0;
}

.auth-v2-row--fit {
    margin: 0;
}

.auth-v2-header--fit {
    margin-bottom: 0.75rem;
    text-align: center;
}

.auth-v2-header--fit .auth-v2-title {
    margin-top: 0;
    font-size: 1.25rem;
}

.auth-v2-form--fit {
    gap: 0.5rem;
}

.auth-v2-form--fit .auth-v2-field {
    gap: 0.2rem;
}

.auth-v2-form--fit .auth-v2-label {
    font-size: 0.75rem;
}

.auth-v2-form--fit .auth-v2-input {
    height: 2.375rem;
    font-size: 0.875rem;
}

.auth-v2-form--fit .auth-v2-btn--fit {
    height: 2.5rem;
    margin-top: 0.125rem;
    font-size: 0.875rem;
}

.auth-v2-form-grid--fit {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
}

.auth-v2-check--fit {
    font-size: 0.6875rem;
    line-height: 1.35;
}

.auth-v2-switch--fit {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    font-size: 0.8125rem;
}

.auth-v2-card:has(.auth-v2-form--compact) {
    padding: 1.75rem 1.5rem 1.5rem;
}

.auth-v2-card:has(.auth-v2-form--compact) .auth-v2-card-logo {
    margin-bottom: 1rem;
}

.auth-v2-card:has(.auth-v2-form--compact) .auth-v2-header {
    margin-bottom: 1rem;
}

.auth-v2-card:has(.auth-v2-form--compact) .auth-v2-title {
    font-size: 1.375rem;
}

.auth-v2-card:has(.auth-v2-form--compact) .auth-v2-subtitle {
    font-size: 0.8125rem;
}

.auth-v2-strength--compact {
    margin: -0.25rem 0 0;
}

.auth-v2-check--block {
    align-items: flex-start;
    line-height: 1.45;
    font-size: 0.75rem;
    color: #64748b;
}

.auth-v2-check--block .auth-v2-checkmark {
    margin-top: 0.1rem;
}

.auth-v2-match.is-ok {
    color: #059669;
}

.auth-v2-match.is-error {
    color: #dc2626;
}

@media (max-width: 380px) {
    .auth-v2-form-grid--fit {
        grid-template-columns: 1fr;
    }
}

.auth-v2-form-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .auth-v2-card--wide .auth-v2-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.auth-v2-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-v2-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.auth-v2-required {
    color: #ef4444;
    margin-left: 0.125rem;
}

.auth-v2-input-group {
    position: relative;
}

.auth-v2-input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    font-size: 0.8125rem;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.15s ease;
}

.auth-v2-input-group--icon:focus-within .auth-v2-input-icon {
    color: #2563eb;
}

.auth-v2-input {
    width: 100%;
    height: 2.875rem;
    padding: 0 0.875rem;
    border: 1px solid #d7dee8;
    border-radius: 0.625rem;
    background: #fafbfc;
    font-size: 0.9375rem;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth-v2-input::placeholder {
    color: #94a3b8;
}

.auth-v2-input:hover {
    border-color: #b8c4d4;
    background: #fff;
}

.auth-v2-input:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

.auth-v2-input-group--icon .auth-v2-input {
    padding-left: 2.5rem;
}

.auth-v2-input-group:has(.auth-v2-toggle) .auth-v2-input {
    padding-right: 2.75rem;
}

.auth-v2-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-v2-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth-v2-toggle:hover {
    color: #2563eb;
    background: #f1f5f9;
}

.auth-v2-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.auth-v2-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    user-select: none;
}

.auth-v2-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.auth-v2-checkmark {
    display: flex;
    width: 1.0625rem;
    height: 1.0625rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.3rem;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-v2-checkmark::after {
    content: '';
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s ease;
    margin-bottom: 0.125rem;
}

.auth-v2-check input:checked + .auth-v2-checkmark {
    background: #2563eb;
    border-color: #2563eb;
}

.auth-v2-check input:checked + .auth-v2-checkmark::after {
    transform: rotate(45deg) scale(1);
}

.auth-v2-check input:focus-visible + .auth-v2-checkmark {
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}

.auth-v2-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.auth-v2-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.auth-v2-password-hint {
    margin: -0.125rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #94a3b8;
    text-align: center;
}

.auth-v2-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.auth-v2-section-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.auth-v2-form-grid--2 {
    display: grid;
    gap: 0.875rem;
}

@media (min-width: 480px) {
    .auth-v2-form-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.auth-v2-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

.auth-v2-file-upload {
    position: relative;
}

.auth-v2-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.auth-v2-file-label {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-v2-file-label:hover {
    border-color: #2563eb;
    background: #f8fafc;
}

.auth-v2-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

.auth-v2-file-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.auth-v2-file-text strong {
    font-size: 0.875rem;
    color: #1e293b;
}

.auth-v2-file-text span {
    font-size: 0.75rem;
    color: #64748b;
}

.auth-v2-file-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
}

.auth-v2-file-preview {
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.auth-v2-file-preview img {
    display: block;
    width: 100%;
    max-height: 10rem;
    object-fit: cover;
}

.auth-v2-strength {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-v2-strength-bar {
    height: 0.25rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.auth-v2-strength-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #ef4444;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.auth-v2-strength-fill[data-level="1"] { width: 25%; background: #ef4444; }
.auth-v2-strength-fill[data-level="2"] { width: 50%; background: #f59e0b; }
.auth-v2-strength-fill[data-level="3"] { width: 75%; background: #3b82f6; }
.auth-v2-strength-fill[data-level="4"] { width: 100%; background: #10b981; }

.auth-v2-strength-label {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
}

.auth-v2-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.875rem;
    margin-top: 0.25rem;
    border: none;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.auth-v2-btn--primary {
    background: #2563eb;
    color: #fff;
}

.auth-v2-btn--primary:hover {
    background: #1d4ed8;
}

.auth-v2-btn--primary:active {
    transform: scale(0.99);
}

.auth-v2-spinner {
    display: none;
}

.auth-v2-btn.is-loading {
    opacity: 0.75;
    pointer-events: none;
}

.auth-v2-btn.is-loading .auth-v2-spinner {
    display: inline-flex;
}

.auth-v2-btn.is-loading .auth-v2-btn-text {
    display: none;
}

.auth-v2-switch {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef2f6;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

.auth-v2-switch a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.auth-v2-switch a:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.auth-v2-code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
}

.auth-v2-debug {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid #fde68a;
    background: #fffbeb;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #92400e;
}

.auth-layout-body {
    min-height: 100dvh;
    min-height: 100vh;
    background: #f1f5f9;
    color: #0f172a;
}

html.dark .auth-layout-body {
    background: #020617;
    color: #e2e8f0;
}

.auth-layout-body .auth-v2--standalone,
.auth-layout-body .auth-modern {
    min-height: 100dvh;
    min-height: 100svh;
}

.auth-v2--standalone {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-v2-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.auth-v2-alert i {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.auth-v2-alert--error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

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

html.dark .auth-v2-alert--error {
    border-color: rgb(239 68 68 / 0.35);
    background: rgb(127 29 29 / 0.25);
    color: #fecaca;
}

html.dark .auth-v2-alert--success {
    border-color: rgb(34 197 94 / 0.35);
    background: rgb(20 83 45 / 0.25);
    color: #bbf7d0;
}

/* Auth — responsive breakpoints */
@media (max-width: 374px) {
    .auth-v2-card {
        padding: 1.5rem 1.125rem 1.375rem;
        border-radius: 1rem;
    }

    .auth-v2-card::before {
        margin: -1.5rem -1.125rem 1.375rem;
        border-radius: 1rem 1rem 0 0;
    }

    .auth-v2-title {
        font-size: 1.375rem;
    }

    .auth-v2-subtitle {
        font-size: 0.8125rem;
    }

    .auth-v2-card-logo {
        margin-bottom: 1.125rem;
    }

    .auth-v2-card-icon {
        width: 2.875rem;
        height: 2.875rem;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .auth-v2-header {
        margin-bottom: 1.375rem;
    }

    .auth-v2-code {
        font-size: 1.25rem;
        letter-spacing: 0.25em;
    }
}

@media (max-width: 639px) {
    .auth-v2-form-grid {
        grid-template-columns: 1fr;
    }

    .auth-v2-input {
        min-height: 3rem;
        font-size: 1rem;
    }

    .auth-v2-btn {
        min-height: 3rem;
        font-size: 1rem;
    }

    .auth-v2-toggle {
        width: 2.75rem;
        height: 2.75rem;
    }

    .auth-v2-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .auth-v2-password-hint {
        font-size: 0.8125rem;
        text-align: left;
    }
}

@media (min-width: 640px) {
    .auth-v2 {
        padding:
            max(2rem, env(safe-area-inset-top))
            max(1.5rem, env(safe-area-inset-right))
            max(2rem, env(safe-area-inset-bottom))
            max(1.5rem, env(safe-area-inset-left));
    }

    .auth-v2-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 768px) {
    .auth-v2-center {
        max-width: 27rem;
    }

    .auth-v2-center:has(.auth-v2-card--wide) {
        max-width: 36rem;
    }

    .auth-v2-center--register,
    .auth-v2-center:has(.auth-v2-card--register),
    .auth-v2-center:has(.auth-v2-form--compact) {
        max-width: 26rem;
    }
}

@media (min-width: 1024px) {
    .auth-v2 {
        padding:
            max(2.5rem, env(safe-area-inset-top))
            max(2rem, env(safe-area-inset-right))
            max(2.5rem, env(safe-area-inset-bottom))
            max(2rem, env(safe-area-inset-left));
    }
}

@media (min-width: 1280px) {
    .auth-v2-center {
        max-width: 28rem;
    }

    .auth-v2-center:has(.auth-v2-card--wide) {
        max-width: 32rem;
    }

    .auth-v2-center--register,
    .auth-v2-center:has(.auth-v2-card--register),
    .auth-v2-center:has(.auth-v2-form--compact) {
        max-width: 26rem;
    }
}

@media (max-height: 32rem) and (orientation: landscape) {
    .auth-v2 {
        align-items: flex-start;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .auth-v2-card-logo {
        margin-bottom: 0.875rem;
    }

    .auth-v2-header {
        margin-bottom: 1rem;
    }

    .auth-v2-form {
        gap: 0.75rem;
    }

    .auth-v2-switch {
        margin-top: 1rem;
        padding-top: 1rem;
    }
}

@media (max-height: 40rem) {
    .auth-v2--fit {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    .auth-v2-card--fit {
        min-height: auto;
        padding: 0.875rem 1rem 0.875rem;
    }

    .auth-v2-header--fit {
        margin-bottom: 0.5rem;
    }

    .auth-v2-header--fit .auth-v2-title {
        font-size: 1.125rem;
    }

    .auth-v2-form--fit {
        gap: 0.375rem;
    }

    .auth-v2-form--fit .auth-v2-input {
        height: 2.25rem;
    }

    .auth-v2-form--fit .auth-v2-btn--fit {
        height: 2.375rem;
    }

    .auth-v2-switch--fit {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
}

/* Flash toast — mobile safe area */
#toast {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: max(1rem, env(safe-area-inset-left));
    max-width: none;
}

@media (min-width: 640px) {
    #toast {
        left: auto;
        max-width: 24rem;
    }
}

/* ─── WhatsApp chat bot widget ─── */
.whatsapp-widget {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 45;
}

.whatsapp-widget-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(20rem, calc(100vw - 2rem));
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow:
        0 12px 40px -12px rgb(15 23 42 / 0.28),
        0 4px 16px -4px rgb(15 23 42 / 0.12);
    animation: whatsapp-panel-in 0.22s ease-out;
}

.whatsapp-widget-panel.hidden {
    display: none;
}

@keyframes whatsapp-panel-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.whatsapp-widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
    color: #fff;
}

.whatsapp-widget-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.15);
    font-size: 1.25rem;
}

.whatsapp-widget-meta {
    min-width: 0;
    flex: 1;
}

.whatsapp-widget-name {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.whatsapp-widget-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.85);
}

.whatsapp-widget-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgb(74 222 128 / 0.35);
}

.whatsapp-widget-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.whatsapp-widget-close:hover {
    background: rgb(255 255 255 / 0.22);
}

.whatsapp-widget-body {
    padding: 1rem;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d1fae5' fill-opacity='0.35'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        #e5ddd5;
}

.whatsapp-widget-bubble {
    max-width: 16rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
}

.whatsapp-widget-bubble p + p {
    margin-top: 0.375rem;
}

.whatsapp-widget-footer {
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid #eef2f6;
    background: #fff;
}

.whatsapp-widget-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    border-radius: 0.625rem;
    background: #25d366;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.whatsapp-widget-start:hover {
    background: #20bd5a;
}

.whatsapp-chat {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 4px 14px rgb(37 211 102 / 0.45),
        0 8px 24px -4px rgb(15 23 42 / 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.whatsapp-chat:hover {
    background: #20bd5a;
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgb(37 211 102 / 0.5),
        0 12px 28px -6px rgb(15 23 42 / 0.25);
}

.whatsapp-chat:active {
    transform: translateY(0);
}

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

.whatsapp-chat-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #25d366;
    animation: whatsapp-pulse 2.5s ease-out infinite;
    pointer-events: none;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    70%, 100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@media (max-width: 639px) {
    .whatsapp-widget-panel {
        width: min(18.5rem, calc(100vw - 1.5rem));
    }
}

html.dark .whatsapp-widget-panel {
    border-color: rgb(51 65 85 / 0.9);
    background: #1e293b;
}

html.dark .whatsapp-widget-footer {
    border-top-color: #334155;
    background: #1e293b;
}

html.dark .whatsapp-widget-bubble {
    background: #f8fafc;
    color: #1e293b;
}

/* Keep toast above WhatsApp widget when both visible */
#toast {
    z-index: 50;
}

/* ─── Site header (navbar) ─── */
.site-header {
    padding-top: env(safe-area-inset-top);
}

.site-header-inner {
    min-width: 0;
}

.site-header-actions {
    flex-shrink: 0;
}

.site-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .site-logo--navbar {
        min-width: 0;
        flex: 1 1 auto;
        align-items: center;
        max-width: calc(100% - 5.5rem);
    }

    .site-logo-text--navbar {
        display: block;
        overflow: visible;
        max-width: none;
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: normal;
    }

    .site-header-menu-btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
}

@media (max-width: 359px) {
    .site-logo-text--navbar {
        font-size: 0.75rem;
    }

    .site-header-inner {
        gap: 0.5rem;
    }
}

.site-header-cta-mobile {
    min-height: 2.75rem;
}

/* ─── Public user profile menu ─── */
.site-user-menu {
    position: relative;
}

.site-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md, 12px);
    background: transparent;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.site-user-menu__trigger:hover,
.site-user-menu__trigger[aria-expanded="true"] {
    background: var(--ds-bg-subtle, #f8fafc);
    border-color: var(--ds-border, #e2e8f0);
}

.site-user-menu__meta {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
}

.site-user-menu__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    line-height: 1.2;
}

.site-user-menu__role {
    font-size: 0.6875rem;
    color: var(--ds-text-muted, #64748b);
    line-height: 1.2;
}

.site-user-menu__chev {
    font-size: 0.625rem;
    color: var(--ds-text-muted, #64748b);
    transition: transform 0.18s ease;
}

.site-user-menu__trigger[aria-expanded="true"] .site-user-menu__chev {
    transform: rotate(180deg);
}

.site-user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 260px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 8px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.1));
    animation: siteUserMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-dropdown-panel][hidden] {
    display: none !important;
}

@keyframes siteUserMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.site-user-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ds-border-subtle, #f1f5f9);
}

.site-user-menu__head-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.site-user-menu__head-email {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--ds-text-muted, #64748b);
}

.site-user-menu__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.site-user-menu__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text-secondary, #475569);
    text-decoration: none;
    border-radius: var(--ds-radius-md, 12px);
    transition: background 0.18s ease, color 0.18s ease;
}

.site-user-menu__link:hover {
    background: var(--ds-bg-subtle, #f8fafc);
    color: var(--ds-text, #0f172a);
}

.site-user-menu__link i {
    width: 16px;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
}

.site-user-menu__logout {
    margin: 4px 0 0;
    padding: 4px;
    border-top: 1px solid var(--ds-border-subtle, #f1f5f9);
}

.site-user-menu__logout button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-danger, #ef4444);
    background: none;
    border: none;
    border-radius: var(--ds-radius-md, 12px);
    cursor: pointer;
    transition: background 0.18s ease;
}

.site-user-menu__logout button:hover {
    background: var(--ds-danger-muted, #fef2f2);
}

.site-user-menu-mobile__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-text-secondary, #475569);
    text-decoration: none;
    border-radius: var(--ds-radius-md, 12px);
}

.site-user-menu-mobile__link:hover {
    background: var(--ds-bg-subtle, #f8fafc);
}

.site-user-menu-mobile__link i {
    width: 16px;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
}

.site-user-menu-mobile__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-danger, #ef4444);
    background: none;
    border: none;
    border-radius: var(--ds-radius-md, 12px);
    cursor: pointer;
    text-align: left;
}

.site-user-menu-mobile__logout:hover {
    background: var(--ds-danger-muted, #fef2f2);
}

html.dark .site-user-menu__panel {
    background: var(--ds-surface, #0f172a);
    border-color: var(--ds-border, #334155);
}

/* ─── Site logo ─── */
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-logo:hover {
    opacity: 0.9;
}

.site-logo--full {
    gap: 0;
}

.site-logo-full {
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

.site-logo--auth-card.site-logo--full {
    justify-content: center;
    width: 100%;
}

.site-logo--auth-card.site-logo--full .site-logo-full {
    margin-inline: auto;
}

.site-logo--sidebar {
    width: 100%;
}

.site-logo--sidebar.site-logo--full .site-logo-full {
    max-width: 100%;
}

html.dark .site-logo--navbar.site-logo--tone-default .site-logo-full,
html.dark .site-logo--navbar.site-logo--tone-default .site-logo-mark {
    filter: brightness(0) invert(1);
}

.site-logo--tone-light .site-logo-full,
.site-logo--tone-light .site-logo-mark {
    filter: none !important;
}

.auth-v2-card-logo .site-logo--full {
    justify-content: center;
}

.site-logo-mark {
    flex-shrink: 0;
    object-fit: contain;
}

.site-logo-text {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.site-logo-name-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    line-height: var(--brand-name-line-height, 1.15);
}

.site-logo-name-row--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.site-logo-name-row--align-center {
    align-items: center;
    text-align: center;
}

.site-logo-name-row--align-right {
    align-items: flex-end;
    text-align: right;
}

.site-logo-line {
    display: block;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    line-height: 1.15;
    color: var(--brand-logo-text, #0f172a);
}

.site-logo-name {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0;
}

.site-logo-name--short {
    display: none;
}

.site-logo-name-row--navbar .site-logo-name {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .site-logo-name-row--navbar .site-logo-name {
        font-size: 1.0625rem;
    }
}

@media (max-width: 767px) {
    .site-logo-name-row--navbar .site-logo-line {
        display: none;
    }

    .site-logo-name-row--navbar .site-logo-name--short {
        display: inline;
        font-size: 1rem;
        font-weight: 800;
        color: var(--brand-logo-text, #0f172a);
    }

    .site-logo-name-row--navbar .site-logo-name--full {
        display: none;
    }

    .site-logo-name-row--navbar .site-logo-tag {
        display: none;
    }
}

.site-logo--footer .site-logo-name {
    font-size: 1.0625rem;
    color: #1e293b;
}

.site-logo-part {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0;
}

.site-logo-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.15em 0.5em;
    border-radius: 6px;
    font-family: Inter, sans-serif;
    font-size: 0.58em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.site-logo-tag--2 {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.22);
}

.site-logo--navbar .site-logo-mark {
    width: var(--brand-logo-header, 2.25rem);
    height: auto;
    max-height: var(--brand-logo-header, 2.25rem);
}

@media (max-width: 639px) {
    .site-logo--navbar .site-logo-mark {
        width: var(--brand-logo-mobile, var(--brand-logo-header, 2rem));
        max-height: var(--brand-logo-mobile, var(--brand-logo-header, 2rem));
    }
}

@media (max-width: 767px) {
    .site-logo-name-row--navbar .site-logo-tag {
        display: none;
    }
}

.site-logo--navbar .site-logo-name-row--navbar .site-logo-part {
    font-size: 1rem;
    letter-spacing: 0;
}

@media (min-width: 640px) {
    .site-logo--navbar .site-logo-name-row--navbar .site-logo-part {
        font-size: 1.0625rem;
    }
}

.site-logo--footer .site-logo-mark {
    width: var(--brand-logo-footer, 2.25rem);
    height: auto;
    max-height: var(--brand-logo-footer, 2.25rem);
}

.site-logo--footer .site-logo-text {
    font-size: 1.0625rem;
    color: #1e293b;
}

.site-logo--auth-light .site-logo-mark {
    width: 2.75rem;
    height: 2.75rem;
}

.site-logo--auth-light .site-logo-text {
    max-width: 11rem;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #fff;
}

.site-logo--auth-card {
    display: flex;
}

.site-logo--auth-card .site-logo-mark {
    width: 2.5rem;
    height: 2.5rem;
}

.site-logo--auth-card .site-logo-text {
    font-size: 0.9375rem;
    text-align: left;
}

@media (min-width: 640px) {
    .site-logo--auth-card .site-logo-text {
        font-size: 1rem;
    }
}

/* ─── Theme toggle ─── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(226 232 240);
    background: rgb(241 245 249);
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
    border-color: rgb(191 219 254);
    background: rgb(239 246 255);
    color: #2563eb;
}

html.dark .theme-toggle {
    border-color: rgb(51 65 85);
    background: rgb(30 41 59);
    color: #94a3b8;
}

html.dark .theme-toggle:hover {
    border-color: rgb(71 85 105);
    background: rgb(51 65 85);
    color: #fbbf24;
}

.theme-toggle-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.theme-toggle-icon--sun {
    display: none !important;
}

.theme-toggle-icon--moon {
    display: inline-block !important;
}

html.dark .theme-toggle-icon--sun {
    display: inline-block !important;
}

html.dark .theme-toggle-icon--moon {
    display: none !important;
}

/* ─── Dark mode — global ─── */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark .site-footer {
    background-color: #1e293b;
}

html.dark .site-logo-line {
    color: var(--brand-logo-text, #f1f5f9);
}

html.dark .site-logo--footer .site-logo-name {
    color: #f1f5f9;
}

html.dark .site-logo-tag {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(129, 140, 248, 0.35);
}

html.dark .site-logo-tag--2 {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.18);
    border-color: rgba(56, 189, 248, 0.3);
}

/* ─── Dark mode — page content ─── */
html.dark main .bg-slate-50,
html.dark main [class*="bg-slate-50"] {
    background-color: #0f172a !important;
}

html.dark main .bg-white,
html.dark main [class*="bg-white\/95"],
html.dark main [class*="bg-white\/90"],
html.dark main [class*="bg-white\/60"],
html.dark main [class*="bg-white\/50"] {
    background-color: #1e293b !important;
}

html.dark main .bg-slate-100,
html.dark main [class*="bg-slate-100"] {
    background-color: #334155 !important;
}

html.dark main .bg-blue-50,
html.dark main [class*="bg-blue-50"] {
    background-color: rgb(30 58 138 / 0.28) !important;
}

html.dark main .bg-emerald-50,
html.dark main [class*="bg-emerald-50"] {
    background-color: rgb(6 78 59 / 0.28) !important;
}

html.dark main .bg-indigo-50,
html.dark main [class*="bg-indigo-50"] {
    background-color: rgb(49 46 129 / 0.28) !important;
}

html.dark main .bg-brand-50,
html.dark main [class*="bg-brand-50"] {
    background-color: rgb(67 56 202 / 0.22) !important;
}

html.dark main .bg-brand-100,
html.dark main [class*="bg-brand-100"] {
    background-color: rgb(67 56 202 / 0.32) !important;
}

html.dark main .bg-amber-50,
html.dark main [class*="bg-amber-50"] {
    background-color: rgb(120 53 15 / 0.28) !important;
}

html.dark main .text-amber-600 { color: #fbbf24 !important; }

html.dark main [class*="border-dashed"] {
    border-color: #475569 !important;
}

html.dark main .text-slate-900 { color: #f8fafc !important; }
html.dark main .text-slate-800 { color: #f1f5f9 !important; }
html.dark main .text-slate-700 { color: #e2e8f0 !important; }
html.dark main .text-slate-600 { color: #cbd5e1 !important; }
html.dark main .text-slate-500 { color: #94a3b8 !important; }
html.dark main .text-slate-400 { color: #64748b !important; }

html.dark main .text-blue-700,
html.dark main .text-blue-800 { color: #93c5fd !important; }
html.dark main .text-blue-600 { color: #60a5fa !important; }
html.dark main .text-emerald-700 { color: #6ee7b7 !important; }
html.dark main .text-emerald-600 { color: #34d399 !important; }
html.dark main .text-indigo-700 { color: #a5b4fc !important; }
html.dark main .text-brand-700 { color: #a5b4fc !important; }
html.dark main .text-brand-600 { color: #818cf8 !important; }

html.dark main .border-slate-100,
html.dark main .border-slate-200,
html.dark main .border-slate-300,
html.dark main [class*="border-slate-200"],
html.dark main [class*="border-slate-300"] {
    border-color: rgb(51 65 85 / 0.85) !important;
}

html.dark main .border-blue-200,
html.dark main [class*="border-blue-200"] {
    border-color: rgb(59 130 246 / 0.35) !important;
}

html.dark main .border-emerald-200,
html.dark main [class*="border-emerald-200"] {
    border-color: rgb(16 185 129 / 0.35) !important;
}

html.dark main .ring-slate-200,
html.dark main [class*="ring-slate-200"],
html.dark main [class*="ring-slate-300"] {
    --tw-ring-color: rgb(51 65 85 / 0.7) !important;
}

html.dark main input:not([type="color"]),
html.dark main select,
html.dark main textarea {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark main input::placeholder,
html.dark main textarea::placeholder {
    color: #64748b !important;
}

html.dark main input:not([type="color"]):focus,
html.dark main select:focus,
html.dark main textarea:focus {
    background-color: #1e293b !important;
    border-color: #3b82f6 !important;
}

html.dark main label:hover,
html.dark main .hover\:bg-slate-50:hover {
    background-color: rgb(30 41 59 / 0.6) !important;
}

html.dark main .prose,
html.dark main .prose p {
    color: #cbd5e1 !important;
}

/* Hero stats card */
html.dark .hero-section [class*="bg-white\/95"] {
    background-color: rgb(30 41 59 / 0.95) !important;
    border-color: rgb(51 65 85 / 0.6) !important;
}

html.dark .hero-section [class*="border-slate-100"] {
    border-color: rgb(51 65 85 / 0.6) !important;
}

html.dark .hero-cta-primary {
    background: linear-gradient(180deg, #1e293b 0%, #334155 100%) !important;
    color: #93c5fd !important;
}

/* Course cards */
html.dark .course-card {
    background-color: #1e293b !important;
    border-color: rgb(51 65 85 / 0.85) !important;
}

html.dark .course-card:hover {
    border-color: rgb(59 130 246 / 0.45) !important;
    box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.35) !important;
}

html.dark .course-card h3 {
    color: #f1f5f9 !important;
}

html.dark .course-card:hover h3 {
    color: #93c5fd !important;
}

html.dark .course-card [class*="bg-white\/95"] {
    background-color: rgb(30 41 59 / 0.95) !important;
    color: #93c5fd !important;
}

html.dark .course-card [class*="border-slate-100"] {
    border-color: rgb(51 65 85 / 0.7) !important;
}

/* CTA section white button on gradient */
html.dark main section .bg-white[class*="px-8"] {
    background-color: #1e293b !important;
    color: #93c5fd !important;
}

html.dark main section .bg-white[class*="px-8"]:hover {
    background-color: #334155 !important;
}

/* Contact FAQ */
html.dark .contact-faq-item {
    border-color: rgb(51 65 85 / 0.9);
    background: #1e293b;
}

html.dark .contact-faq-question { color: #f1f5f9; }
html.dark .contact-faq-answer { border-top-color: rgb(51 65 85); }
html.dark .contact-faq-answer p { color: #94a3b8; }

html.dark .faq-toggle {
    border-color: #475569;
    background: #0f172a;
    color: #64748b;
}

html.dark .contact-faq-item[open] {
    border-color: #3b82f6;
    box-shadow: 0 4px 16px -4px rgb(37 99 235 / 0.25);
}

/* Auth v2 dark mode */
html.dark .auth-v2-page-bg {
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgb(37 99 235 / 0.15), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgb(79 70 229 / 0.1), transparent 50%),
        #0f172a;
}

html.dark .auth-v2-card {
    border-color: rgb(51 65 85 / 0.9);
    background: #1e293b;
    box-shadow: 0 16px 48px -20px rgb(0 0 0 / 0.4);
}

html.dark .auth-v2-switch {
    border-top-color: #334155;
}

html.dark .auth-v2-eyebrow { color: #60a5fa; }
html.dark .auth-v2-title { color: #f8fafc; }
html.dark .auth-v2-subtitle { color: #94a3b8; }
html.dark .auth-v2-label { color: #cbd5e1; }

html.dark .auth-v2-input {
    border-color: #475569;
    background: #1e293b;
    color: #f1f5f9;
}

html.dark .auth-v2-input:hover {
    border-color: #64748b;
}

html.dark .auth-v2-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
}

html.dark .auth-v2-input-icon {
    color: #64748b;
}

html.dark .auth-v2-input-group--icon:focus-within .auth-v2-input-icon {
    color: #60a5fa;
}

html.dark .auth-v2-toggle:hover {
    background: #334155;
    color: #93c5fd;
}

html.dark .auth-v2-check { color: #94a3b8; }

html.dark .auth-v2-checkmark {
    border-color: #475569;
    background: #1e293b;
}

html.dark .auth-v2-password-hint { color: #64748b; }
html.dark .auth-v2-section-label { color: #94a3b8; }
html.dark .auth-v2-file-label { border-color: #334155; }
html.dark .auth-v2-file-label:hover { border-color: #3b82f6; background: #0f172a; }
html.dark .auth-v2-file-text strong { color: #e2e8f0; }
html.dark .auth-v2-file-text span { color: #94a3b8; }
html.dark .auth-v2-strength-bar { background: #334155; }
html.dark .auth-v2-strength-label { color: #94a3b8; }
html.dark .auth-v2-check--block { color: #94a3b8; }
html.dark .auth-v2-file-preview { border-color: #334155; }
html.dark .auth-v2-switch { color: #94a3b8; }
html.dark .auth-v2-switch a { color: #60a5fa; }
html.dark .auth-v2-switch a:hover { color: #93c5fd; }
html.dark .auth-v2-link { color: #60a5fa; }
html.dark .auth-v2-link:hover { color: #93c5fd; }

html.dark .auth-v2-debug {
    border-color: rgb(180 83 9 / 0.4);
    background: rgb(120 53 15 / 0.25);
    color: #fcd34d;
}

/* Dashboard sidebar collapse */
#sidebar.sidebar-collapsed {
    width: 4.5rem;
}

#sidebar.dash-sidebar.sidebar-collapsed {
    width: 4.5rem;
}

body.dash-sidebar-open {
    overflow: hidden;
}

@media (min-width: 1024px) {
    body.dash-sidebar-open {
        overflow: auto;
    }
}

#sidebar.sidebar-collapsed .sidebar-brand .site-logo-text,
#sidebar.sidebar-collapsed .sidebar-label,
#sidebar.sidebar-collapsed .sidebar-badge {
    display: none;
}

#sidebar.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#sidebar.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#sidebar.sidebar-collapsed .sidebar-nav {
    padding: 0.5rem;
}

/* ─── Registration form (single card) ─── */
.register-form--single {
    gap: 0.75rem;
}

.register-form--single .register-form__field {
    gap: 0.3rem;
}

.register-form--single .register-form__label {
    font-size: 0.75rem;
}

.register-form--single .register-form__input {
    height: 2.5rem;
    font-size: 0.875rem;
}

.register-form--single .register-form__strength {
    margin-top: -0.125rem;
}

.register-form--single .register-form__agree {
    padding: 0.75rem;
    gap: 0.625rem;
}

.register-form--single .register-form__agree-text {
    font-size: 0.75rem;
    line-height: 1.45;
}

.register-form--single .register-form__submit {
    height: 2.75rem;
    font-size: 0.875rem;
    margin-top: 0.125rem;
}

.register-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

.auth-v2-card--register .register-form__submit {
    margin-top: 0.25rem;
}

html.dark .register-form__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

/* ─── Registration page (split layout — legacy) ─── */
.register-page {
    position: relative;
    flex: 1;
    display: flex;
    width: 100%;
    min-height: calc(100dvh - var(--site-header-h));
    min-height: calc(100vh - var(--site-header-h));
    overflow: hidden;
}

.register-page__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 0% 50%, rgb(37 99 235 / 0.08), transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgb(79 70 229 / 0.06), transparent 50%),
        #f8fafc;
    pointer-events: none;
}

.register-page__container {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    min-height: inherit;
}

@media (min-width: 1024px) {
    .register-page__container {
        grid-template-columns: 1fr 1.1fr;
    }
}

.register-page__brand {
    display: none;
    padding: 2.5rem 2rem 2.5rem 2.5rem;
}

@media (min-width: 1024px) {
    .register-page__brand {
        display: flex;
        align-items: center;
    }
}

.register-page__brand-inner {
    max-width: 22rem;
}

.register-page__logo {
    margin-bottom: 2rem;
}

.register-page__logo .site-logo--auth-card {
    justify-content: flex-start;
}

.register-page__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2563eb;
}

.register-page__headline {
    margin-top: 0.75rem;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.register-page__lead {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #64748b;
}

.register-page__features {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
    padding: 0;
}

.register-page__features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

.register-page__features i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.register-page__brand-footer {
    margin-top: 2.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.register-page__brand-footer a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.register-page__brand-footer a:hover {
    text-decoration: underline;
}

.register-page__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem 2rem;
}

@media (min-width: 640px) {
    .register-page__panel {
        padding: 2rem 1.5rem 2.5rem;
    }
}

@media (min-width: 1024px) {
    .register-page__panel {
        padding: 2.5rem 2.5rem 2.5rem 1rem;
    }
}

.register-page__card {
    width: 100%;
    max-width: 36rem;
    padding: 1.75rem 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 20px 50px -24px rgb(15 23 42 / 0.18);
}

@media (min-width: 640px) {
    .register-page__card {
        padding: 2.25rem 2rem;
    }
}

.register-page__header {
    margin-bottom: 1.75rem;
}

.register-page__title {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.register-page__subtitle {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.register-form__section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.register-form__section-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}

.register-form__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
}

.register-form__grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .register-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.register-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.register-form__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.register-form__req {
    color: #ef4444;
}

.register-form__optional {
    font-weight: 500;
    color: #94a3b8;
}

.register-form__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.register-form__icon {
    position: absolute;
    left: 0.875rem;
    font-size: 0.8125rem;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.15s ease;
}

.register-form__input-wrap:focus-within .register-form__icon {
    color: #2563eb;
}

.register-form__input {
    width: 100%;
    height: 2.75rem;
    padding: 0 2.75rem 0 2.5rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    color: #0f172a;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.register-form__input::placeholder {
    color: #94a3b8;
}

.register-form__input:hover {
    border-color: #cbd5e1;
}

.register-form__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

.register-form__toggle {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.register-form__toggle:hover {
    color: #475569;
    background: #f1f5f9;
}

.register-form__gender {
    margin: 0;
    padding: 0;
    border: none;
}

.register-form__gender legend {
    margin-bottom: 0.5rem;
}

.register-form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.register-form__chip {
    cursor: pointer;
}

.register-form__chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.register-form__chip span {
    display: inline-flex;
    padding: 0.5rem 0.875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    background: #fff;
    transition: all 0.15s ease;
}

.register-form__chip input:checked + span {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.register-form__chip input:focus-visible + span {
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}

.register-form__strength {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.register-form__strength-track {
    height: 0.3rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.register-form__strength-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #e2e8f0;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.register-form__strength-text {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
}

.register-form__rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.register-form__rules li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #94a3b8;
    transition: color 0.15s ease;
}

.register-form__rules li i {
    font-size: 0.5rem;
}

.register-form__rules li.is-met {
    color: #059669;
}

.register-form__rules li.is-met i {
    font-size: 0.6875rem;
}

.register-form__match {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
}

.register-form__match.is-ok {
    color: #059669;
}

.register-form__match.is-error {
    color: #dc2626;
}

.register-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 3rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgb(37 99 235 / 0.55);
    transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.register-form__submit:hover {
    box-shadow: 0 12px 28px -8px rgb(37 99 235 / 0.6);
    transform: translateY(-1px);
}

.register-form__submit:active {
    transform: translateY(0);
}

.register-form__submit.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.register-form__submit.is-loading .register-form__submit-text,
.register-form__submit.is-loading .register-form__submit-arrow {
    opacity: 0;
}

.register-form__spinner {
    display: none;
    position: absolute;
}

.register-form__submit.is-loading .register-form__spinner {
    display: block;
}

.register-form__submit {
    position: relative;
}

.register-form__agree {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
}

.register-form__agree input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.register-form__agree-box {
    display: flex;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.35rem;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.register-form__agree-box::after {
    content: '';
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s ease;
    margin-bottom: 0.125rem;
}

.register-form__agree input:checked + .register-form__agree-box {
    background: #2563eb;
    border-color: #2563eb;
}

.register-form__agree input:checked + .register-form__agree-box::after {
    transform: rotate(45deg) scale(1);
}

.register-form__agree input:focus-visible + .register-form__agree-box {
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}

.register-form__agree-text {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #475569;
}

.register-form__agree-text a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.register-form__agree-text a:hover {
    text-decoration: underline;
}

.register-page__mobile-switch {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

@media (min-width: 1024px) {
    .register-page__mobile-switch {
        display: none;
    }
}

.register-page__mobile-switch a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.register-page__mobile-switch a:hover {
    text-decoration: underline;
}

/* Dark mode — registration */
html.dark .register-page__bg {
    background:
        radial-gradient(ellipse 80% 60% at 0% 50%, rgb(37 99 235 / 0.12), transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgb(79 70 229 / 0.1), transparent 50%),
        #0f172a;
}

html.dark .register-page__headline,
html.dark .register-page__title {
    color: #f1f5f9;
}

html.dark .register-page__lead,
html.dark .register-page__subtitle,
html.dark .register-page__brand-footer,
html.dark .register-page__mobile-switch {
    color: #94a3b8;
}

html.dark .register-page__features li {
    color: #cbd5e1;
}

html.dark .register-page__features i {
    background: rgb(37 99 235 / 0.2);
    color: #60a5fa;
}

html.dark .register-page__card {
    background: #1e293b;
    border-color: #334155;
}

html.dark .register-form__label,
html.dark .register-form__section-title {
    color: #cbd5e1;
}

html.dark .register-form__input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark .register-form__input:hover {
    border-color: #475569;
}

html.dark .register-form__chip span {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

html.dark .register-form__chip input:checked + span {
    background: rgb(37 99 235 / 0.2);
    border-color: #3b82f6;
    color: #93c5fd;
}

html.dark .register-form__toggle:hover {
    background: #334155;
    color: #cbd5e1;
}

html.dark .register-form__strength-track {
    background: #334155;
}

html.dark .register-form__agree {
    background: #0f172a;
    border-color: #334155;
}

html.dark .register-form__agree-text {
    color: #94a3b8;
}

html.dark .register-form__agree-text a {
    color: #60a5fa;
}

html.dark .register-form__agree-box {
    background: #1e293b;
    border-color: #475569;
}

/* ═══ Auth Modern — login & registration ═══ */
.auth-modern {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100dvh - var(--site-header-h));
    min-height: calc(100vh - var(--site-header-h));
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-modern__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 45%, #f1f5f9 100%);
    pointer-events: none;
}

.auth-modern__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.auth-modern__orb--1 {
    top: -5%;
    left: 10%;
    width: 320px;
    height: 320px;
    background: rgb(37 99 235 / 0.12);
}

.auth-modern__orb--2 {
    bottom: 0;
    right: 5%;
    width: 280px;
    height: 280px;
    background: rgb(99 102 241 / 0.1);
}

.auth-modern__wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
}

.auth-modern__card {
    display: grid;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgb(226 232 240 / 0.8);
    background: #fff;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 24px 64px -28px rgb(15 23 42 / 0.2);
}

@media (min-width: 900px) {
    .auth-modern__card {
        grid-template-columns: 0.95fr 1.05fr;
        min-height: 34rem;
    }
}

.auth-modern__aside {
    display: none;
    padding: 2.5rem 2rem;
    background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 42%, #4f46e5 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.auth-modern__aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgb(255 255 255 / 0.08), transparent 45%),
        radial-gradient(circle at 80% 20%, rgb(255 255 255 / 0.06), transparent 40%);
    pointer-events: none;
}

@media (min-width: 900px) {
    .auth-modern__aside {
        display: flex;
        align-items: center;
    }
}

.auth-modern__aside-inner {
    position: relative;
    z-index: 1;
}

.auth-modern__logo {
    margin-bottom: 2rem;
}

.auth-modern__aside .site-logo-text {
    color: #fff;
}

.auth-modern__aside-title {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.auth-modern__aside-lead {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--brand-tagline-color, rgba(255, 255, 255, 0.82));
}

.auth-modern__aside-sub {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--brand-tagline-color, rgba(255, 255, 255, 0.65));
    opacity: 0.9;
}

.brand-tagline {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--brand-tagline-color, #64748b);
}

.brand-tagline--2 {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    opacity: 0.88;
}

.brand-taglines--footer .brand-tagline {
    color: var(--brand-tagline-color, rgb(100 116 139));
}

html.dark .brand-taglines--footer .brand-tagline {
    color: var(--brand-tagline-color, rgb(148 163 184));
}

.auth-modern__points {
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.auth-modern__points li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(239 246 255 / 0.95);
}

.auth-modern__point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.15);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.auth-modern__logo-mobile {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

@media (min-width: 900px) {
    .auth-modern__logo-mobile {
        display: none;
    }
}

.auth-modern__main {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
}

@media (min-width: 480px) {
    .auth-modern__main {
        padding: 2rem 2rem 1.75rem;
    }
}

@media (min-width: 900px) {
    .auth-modern__main {
        padding: 2.25rem 2.5rem 2rem;
        overflow-y: auto;
    }
}

.auth-modern__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 1.125rem;
    box-shadow: 0 8px 20px -8px rgb(245 158 11 / 0.5);
}

.auth-modern__header {
    margin-bottom: 1.5rem;
    text-align: center;
}

@media (min-width: 900px) {
    .auth-modern__header {
        text-align: left;
    }
}

.auth-modern__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2563eb;
}

.auth-modern__title {
    margin-top: 0.375rem;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #0f172a;
}

.auth-modern__subtitle {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #64748b;
}

.auth-modern-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.auth-modern-form--register {
    gap: 0.875rem;
}

.auth-modern-form__grid {
    display: grid;
    gap: 0.875rem;
}

@media (min-width: 520px) {
    .auth-modern-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.auth-modern-field,
.auth-modern__main .auth-v2-field {
    gap: 0.375rem;
}

.auth-modern-label,
.auth-modern__main .auth-v2-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.auth-modern-input,
.auth-modern__main .auth-v2-input {
    height: 2.875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-modern-input:hover,
.auth-modern__main .auth-v2-input:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.auth-modern-input:focus,
.auth-modern__main .auth-v2-input:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.1);
}

.auth-modern__main .auth-v2-select {
    cursor: pointer;
}

.auth-modern-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.auth-modern-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    user-select: none;
}

.auth-modern-check--block {
    align-items: flex-start;
    line-height: 1.5;
    font-size: 0.75rem;
    color: #64748b;
}

.auth-modern-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.auth-modern-check__box {
    display: flex;
    width: 1.0625rem;
    height: 1.0625rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.35rem;
    background: #fff;
    transition: all 0.15s ease;
}

.auth-modern-check--block .auth-modern-check__box {
    margin-top: 0.15rem;
}

.auth-modern-check__box::after {
    content: '';
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s ease;
    margin-bottom: 0.1rem;
}

.auth-modern-check input:checked + .auth-modern-check__box {
    background: #2563eb;
    border-color: #2563eb;
}

.auth-modern-check input:checked + .auth-modern-check__box::after {
    transform: rotate(45deg) scale(1);
}

.auth-modern-check input:focus-visible + .auth-modern-check__box {
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}

.auth-modern-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.15s ease;
}

.auth-modern-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.auth-modern-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 3rem;
    margin-top: 0.25rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px -10px rgb(37 99 235 / 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}

.auth-modern-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px rgb(37 99 235 / 0.6);
}

.auth-modern-btn:active {
    transform: translateY(0);
}

.auth-modern-btn.is-loading {
    pointer-events: none;
    opacity: 0.88;
}

.auth-modern-btn__spinner {
    display: none;
    position: absolute;
}

.auth-modern-btn.is-loading .auth-modern-btn__spinner {
    display: block;
}

.auth-modern-btn.is-loading .auth-modern-btn__text,
.auth-modern-btn.is-loading .auth-modern-btn__icon {
    opacity: 0;
}

.auth-modern-btn__icon {
    font-size: 0.8125rem;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

.auth-modern__switch {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

@media (min-width: 900px) {
    .auth-modern__switch {
        text-align: left;
    }
}

.auth-modern__switch a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.auth-modern__switch a:hover {
    text-decoration: underline;
}

/* Dark mode */
html.dark .auth-modern__bg {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}

html.dark .auth-modern__card {
    background: #1e293b;
    border-color: #334155;
}

html.dark .auth-modern__title {
    color: #f8fafc;
}

html.dark .auth-modern__subtitle {
    color: #94a3b8;
}

html.dark .auth-modern-label,
html.dark .auth-modern__main .auth-v2-label {
    color: #cbd5e1;
}

html.dark .auth-modern-input,
html.dark .auth-modern__main .auth-v2-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark .auth-modern-input:hover,
html.dark .auth-modern__main .auth-v2-input:hover {
    border-color: #475569;
    background: #0f172a;
}

html.dark .auth-modern-check {
    color: #94a3b8;
}

html.dark .auth-modern-check__box {
    background: #0f172a;
    border-color: #475569;
}

html.dark .auth-modern__switch {
    border-top-color: #334155;
    color: #94a3b8;
}

html.dark .auth-modern-link,
html.dark .auth-modern__switch a {
    color: #60a5fa;
}

@media (max-width: 899px) {
    .auth-modern-form--register .auth-modern-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 700px) and (max-width: 899px) {
    .auth-modern {
        align-items: flex-start;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .auth-modern__header {
        margin-bottom: 1rem;
    }

    .auth-modern__title {
        font-size: 1.375rem;
    }

    .auth-modern-form {
        gap: 0.75rem;
    }
}

/* ─── Certificate card preview (template card mode) ─── */
.cert-tpl--card {
    width: 100%;
}

.cert-tpl-card__rim {
    padding: 3px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #1e3a8a, #2563eb 50%, #fbbf24);
}

.cert-tpl-card__inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 55%);
    min-height: 4.5rem;
}

.cert-tpl-card__brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    max-width: 38%;
}

.cert-tpl-card__logo {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

.cert-tpl-card__org {
    margin: 0;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1e40af;
    line-height: 1.2;
}

.cert-tpl-card__label {
    margin: 0.1rem 0 0;
    font-size: 0.5625rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.cert-tpl-card__main {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.cert-tpl-card__name {
    margin: 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1d4ed8;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-tpl-card__course {
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-tpl-card__seal {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* ─── Certificate cards (dashboard + page) ─── */
.cert-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cert-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
}

.cert-card__thumb {
    position: relative;
    display: block;
    padding: 0.65rem 0.65rem 0;
    text-decoration: none;
    background: var(--ds-bg-subtle, #f8fafc);
    aspect-ratio: 297 / 210;
    overflow: hidden;
}

.cert-card__thumb:hover .cert__name {
    color: var(--ds-primary-hover, #4f46e5);
}

.cert-card__badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #bbf7d0;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #047857;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.cert-card__badge i {
    font-size: 0.5rem;
}

.cert-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem 0.85rem;
}

.cert-card__head {
    min-width: 0;
}

.cert-card__title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-card__issued {
    margin: 0.25rem 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.cert-card__issued i {
    margin-right: 0.3rem;
}

.cert-card__code {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.cert-card__code-text {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #1e40af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
}

.cert-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.55rem;
    border-radius: 0.625rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cert-card__action:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.cert-card__action--primary {
    flex: 1;
    min-width: 0;
    background: var(--ds-primary, #6366f1);
    border-color: transparent;
    color: #fff;
}

.cert-card__action--primary:hover {
    background: var(--ds-primary-hover, #4f46e5);
    color: #fff;
}

.cert-card__action--linkedin:hover {
    border-color: #0a66c2;
    color: #0a66c2;
    background: #eff6ff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cert-card__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    color: #64748b;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cert-card__icon-btn:hover {
    border-color: #bfdbfe;
    color: #2563eb;
    background: #eff6ff;
}

.cert-card__icon-btn--linkedin:hover {
    border-color: #0a66c2;
    color: #0a66c2;
    background: #eff6ff;
}

.cert-card--compact .cert-card__body {
    padding: 0.65rem 0.75rem 0.75rem;
    gap: 0.5rem;
}

.cert-card--compact .cert-card__title {
    font-size: 0.875rem;
    -webkit-line-clamp: 1;
}

.cert-card--compact .cert-card__actions .cert-card__action:not(.cert-card__action--primary) {
    display: none;
}

.cert-card--compact .cert-card__action--primary {
    width: 100%;
}

/* Certificates page */
.cert-page__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.75rem 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4f46e5 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.22);
}

.cert-page__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(219, 234, 254, 0.9);
}

.cert-page__eyebrow i {
    margin-right: 0.35rem;
}

.cert-page__title {
    margin: 0.5rem 0 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cert-page__lead {
    margin: 0.65rem 0 0;
    max-width: 36rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(219, 234, 254, 0.92);
}

.cert-page__stats {
    display: flex;
    gap: 1rem;
}

.cert-page__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5.5rem;
    padding: 0.85rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cert-page__stat-value {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.cert-page__stat-value--sm {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.cert-page__stat-label {
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(219, 234, 254, 0.8);
}

.cert-page__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 640px) {
    .cert-page__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cert-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    border-radius: 1.25rem;
    border: 2px dashed #cbd5e1;
    background: #fff;
}

.cert-page__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    font-size: 1.75rem;
}

.cert-page__empty-title {
    margin: 1.25rem 0 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.cert-page__empty-text {
    margin: 0.5rem 0 0;
    max-width: 22rem;
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
}

.cert-page__empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.7rem 1.35rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.cert-page__empty-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* Dashboard certificates section */
.cert-dashboard__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cert-dashboard__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563eb;
}

.cert-dashboard__eyebrow i {
    margin-right: 0.3rem;
}

.cert-dashboard__title {
    margin: 0.25rem 0 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.cert-dashboard__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.cert-dashboard__link:hover {
    text-decoration: underline;
}

.cert-dashboard__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .cert-dashboard__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cert-dashboard__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cert-dashboard--prompt .cert-dashboard__prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 60%);
}

.cert-dashboard__prompt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.cert-dashboard__prompt-text {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #64748b;
    max-width: 28rem;
}

.cert-dashboard__prompt-btn {
    margin-left: auto;
    padding: 0.6rem 1.15rem;
    border-radius: 0.75rem;
    background: #2563eb;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cert-dashboard__prompt-btn:hover {
    background: #1d4ed8;
}

html.dark .cert-card {
    border-color: #334155;
    background: #0f172a;
}

html.dark .cert-card:hover {
    border-color: #3b82f6;
}

html.dark .cert-card__thumb {
    background: #1e293b;
}

html.dark .cert-tpl-card__inner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 55%);
}

html.dark .cert-tpl-card__course {
    color: #94a3b8;
}

html.dark .cert-card__title {
    color: #f1f5f9;
}

html.dark .cert-card__issued {
    color: #94a3b8;
}

html.dark .cert-card__code {
    background: #1e293b;
    border-color: #334155;
}

html.dark .cert-card__code-text {
    color: #93c5fd;
}

html.dark .cert-card__icon-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

html.dark .cert-card__badge {
    background: rgba(15, 23, 42, 0.9);
    border-color: #065f46;
    color: #6ee7b7;
}

html.dark .cert-page__empty {
    background: #0f172a;
    border-color: #334155;
}

html.dark .cert-page__empty-title {
    color: #f1f5f9;
}

html.dark .cert-dashboard__title {
    color: #f1f5f9;
}

html.dark .cert-dashboard--prompt .cert-dashboard__prompt {
    background: linear-gradient(135deg, #1e3a8a22 0%, #0f172a 60%);
    border-color: #334155;
}

@media (max-width: 640px) {
    .cert-page__hero {
        padding: 1.25rem 1.25rem;
    }

    .cert-page__title {
        font-size: 1.375rem;
    }

    .cert-dashboard__prompt-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* ─── Certificate verification page ─── */
.cert-verify {
    position: relative;
    min-height: 70vh;
    padding: 2.5rem 1rem 4rem;
}

.cert-verify__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37, 99, 235, 0.18), transparent),
        linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    z-index: 0;
}

.cert-verify__container {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin: 0 auto;
}

.cert-verify__header {
    text-align: center;
    margin-bottom: 2rem;
}

.cert-verify__brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.cert-verify__logo {
    width: 3rem;
    height: 3rem;
}

.cert-verify__org {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2563eb;
}

.cert-verify__title {
    margin: 0.15rem 0 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    color: #0f172a;
}

.cert-verify__lead {
    margin: 1rem auto 0;
    max-width: 32rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #64748b;
}

.cert-verify__search-card {
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.cert-verify__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.cert-verify__input-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cert-verify__input-icon {
    display: none;
}

.cert-verify__input {
    flex: 1;
    min-width: 12rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #cbd5e1;
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cert-verify__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cert-verify__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 1.25rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.cert-verify__submit:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.cert-verify__hint {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.cert-verify__result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.cert-verify-animate {
    animation: certVerifyIn 0.45s ease-out;
}

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

.cert-verify__result--valid {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 30%);
}

.cert-verify__result--invalid {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 30%);
}

.cert-verify__result--warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.cert-verify__valid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: #059669;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    position: relative;
}

.cert-verify__valid-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 2px solid rgba(5, 150, 105, 0.4);
    animation: certPulse 1.5s ease-out infinite;
}

@keyframes certPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.15); opacity: 0; }
}

.cert-verify__result-icon {
    font-size: 1.5rem;
    color: #059669;
    margin-bottom: 0.75rem;
}

.cert-verify__result-icon--invalid {
    color: #dc2626;
}

.cert-verify__result-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.cert-verify__result-text {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
}

.cert-verify__security-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: #64748b;
}

.cert-verify__security-list li {
    margin-top: 0.35rem;
}

.cert-verify__security-list i {
    color: #dc2626;
    margin-right: 0.35rem;
}

.cert-verify__result-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
    grid-template-columns: 1fr auto;
}

.cert-verify__info-card,
.cert-verify__qr-card {
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.cert-verify__info-title {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.cert-verify__dl {
    margin: 0;
}

.cert-verify__dl-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.cert-verify__dl-row:last-child {
    border-bottom: none;
}

.cert-verify__dl-row dt {
    color: #94a3b8;
    font-weight: 500;
}

.cert-verify__dl-row dd {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    text-align: right;
}

.cert-verify__code {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    color: #1d4ed8;
}

.cert-verify__status-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: #d1fae5;
    color: #047857;
    font-size: 0.75rem;
    font-weight: 700;
}

.cert-verify__qr-card {
    text-align: center;
    min-width: 11rem;
}

.cert-verify__qr-img {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

.cert-verify__qr-text {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.cert-verify__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.cert-verify__action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.cert-verify__action:hover {
    border-color: #bfdbfe;
    color: #2563eb;
}

.cert-verify__action--primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: transparent;
    color: #fff;
}

.cert-verify__action--primary:hover {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.cert-verify__action--linkedin {
    border-color: #0a66c2;
    color: #0a66c2;
}

.cert-verify__action--linkedin:hover {
    background: #eff6ff;
}

/* ─── Single certificate template (web / print) ─── */
.cert-tpl-wrap {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.cert-tpl__frame {
    padding: 1.25rem;
    background: linear-gradient(135deg, #1e3a8a, #2563eb, #4f46e5);
}

.cert-tpl-wrap > .cert-tpl {
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.cert-tpl__inner {
    position: relative;
    background: #fff;
    border: 4px solid #fbbf24;
    outline: 2px solid #1e40af;
    padding: 2.5rem 2rem;
    text-align: center;
}

.cert-tpl__corner {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: 3px solid #fbbf24;
}

.cert-tpl__corner--tl { top: 0.75rem; left: 0.75rem; border-right: none; border-bottom: none; }
.cert-tpl__corner--tr { top: 0.75rem; right: 0.75rem; border-left: none; border-bottom: none; }
.cert-tpl__corner--bl { bottom: 0.75rem; left: 0.75rem; border-right: none; border-top: none; }
.cert-tpl__corner--br { bottom: 0.75rem; right: 0.75rem; border-left: none; border-top: none; }

.cert-tpl__logo { width: 3.5rem; height: 3.5rem; margin: 0 auto 0.5rem; }
.cert-tpl__org { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1e40af; }
.cert-tpl__title { margin: 0.35rem 0 0; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; color: #0f172a; }
.cert-tpl__subtitle { margin: 0.25rem 0 0; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #94a3b8; }
.cert-tpl__presented { margin: 1.5rem 0 0; font-size: 0.875rem; color: #64748b; }
.cert-tpl__name { margin: 0.5rem 0; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; color: #1d4ed8; border-bottom: 2px solid #e2e8f0; display: inline-block; padding-bottom: 0.35rem; }
.cert-tpl__text { margin: 0.75rem 0 0; font-size: 0.9375rem; color: #475569; }
.cert-tpl__course { margin: 0.35rem 0 0; font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.cert-tpl__meta { margin: 0.35rem 0 0; font-size: 0.8125rem; color: #64748b; }

.cert-tpl__footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1rem;
    margin-top: 2rem;
    text-align: left;
}

.cert-tpl__footer-right { text-align: right; }

.cert-tpl__sig-line { width: 10rem; border-top: 1px solid #94a3b8; margin-top: 2.5rem; font-size: 0.8125rem; font-weight: 600; color: #475569; padding-top: 0.35rem; }
.cert-tpl__sig-label { margin: 0; font-size: 0.6875rem; color: #94a3b8; }
.cert-tpl__footer-center { text-align: center; }

.cert-tpl__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    font-size: 1.5rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.cert-tpl__qr-label { margin: 0.35rem 0 0; font-size: 0.625rem; color: #94a3b8; }
.cert-tpl__id { margin: 1rem 0 0; font-size: 0.75rem; color: #94a3b8; }
.cert-tpl__id code { font-family: ui-monospace, monospace; color: #1e40af; font-weight: 600; }

.cert-tpl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.cert-tpl-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.15rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.cert-tpl-actions__btn--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

@media print {
    .no-print, .site-header, .site-footer, .whatsapp-widget { display: none !important; }
    .cert-tpl-wrap { padding: 0; max-width: none; }
    .cert-tpl-wrap > .cert-tpl { box-shadow: none; }
    .cert-tpl__frame { padding: 0; background: none; }
}

html.dark .cert-verify__bg {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

html.dark .cert-verify__title { color: #f1f5f9; }
html.dark .cert-verify__search-card { background: rgba(15, 23, 42, 0.9); border-color: #334155; }
html.dark .cert-verify__input { background: #0f172a; border-color: #475569; color: #f1f5f9; }
html.dark .cert-verify__result { background: #0f172a; border-color: #334155; }
html.dark .cert-verify__info-card, html.dark .cert-verify__qr-card { background: #1e293b; border-color: #334155; }
html.dark .cert-verify__dl-row dd { color: #f1f5f9; }

@media (max-width: 640px) {
    .cert-verify__result-grid { grid-template-columns: 1fr; }
    .cert-verify__input-row { flex-direction: column; }
    .cert-verify__submit { width: 100%; justify-content: center; }
    .cert-tpl__footer { grid-template-columns: 1fr; text-align: center; }
    .cert-tpl__footer-right { text-align: center; }
}

/* ─── Student profile page ─── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-page {
    max-width: 42rem;
    margin: 0 auto;
}

.profile-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    margin-bottom: 1rem;
}

.profile-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4f46e5 100%);
}

.profile-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    color: #fff;
}

.profile-hero__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-hero__avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.profile-hero__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
}

.profile-hero__avatar-edit {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    color: #2563eb;
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s;
}

.profile-hero__avatar-edit:hover {
    transform: scale(1.05);
}

.profile-hero__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(219, 234, 254, 0.9);
}

.profile-hero__name {
    margin: 0.35rem 0 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.profile-hero__email {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: rgba(219, 234, 254, 0.9);
}

.profile-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.profile-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.625rem;
    font-weight: 600;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.5rem;
    border-radius: 0.875rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.profile-stat__value {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    color: #1d4ed8;
    line-height: 1;
}

.profile-stat__label {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.profile-panel {
    padding: 1.15rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.profile-panel__title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
}

.profile-panel__title i {
    margin-right: 0.4rem;
    color: #2563eb;
}

.profile-panel__hint {
    margin: 0.35rem 0 0.85rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.profile-photo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.profile-photo-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 0.625rem;
    border: 1px dashed #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.profile-photo-upload:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}

.profile-photo-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #64748b;
    cursor: pointer;
}

.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.profile-fields--grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr 1fr;
}

.profile-field__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.profile-field__input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 0.625rem;
    border: 1px solid #cbd5e1;
    font-size: 0.875rem;
    color: #0f172a;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-field__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.profile-field__input--disabled {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

.profile-field__note {
    margin: 0.3rem 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.profile-form__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.profile-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.35rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
    transition: background 0.15s;
}

.profile-form__submit:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

html.dark .profile-stat,
html.dark .profile-panel {
    background: #0f172a;
    border-color: #334155;
}

html.dark .profile-panel__title {
    color: #f1f5f9;
}

html.dark .profile-stat__value {
    color: #93c5fd;
}

html.dark .profile-field__input {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

html.dark .profile-field__input--disabled {
    background: #0f172a;
    color: #94a3b8;
}

html.dark .profile-photo-upload {
    background: #1e3a8a33;
    border-color: #3b82f6;
    color: #93c5fd;
}

@media (max-width: 640px) {
    .profile-hero__content {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 1rem;
    }

    .profile-hero__tags {
        justify-content: center;
    }

    .profile-fields--grid {
        grid-template-columns: 1fr;
    }

    .profile-form__actions {
        justify-content: stretch;
    }

    .profile-form__submit {
        width: 100%;
        justify-content: center;
    }
}

/* Curriculum admin + student navigation */
.curriculum-chapter {
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.curriculum-chapter:hover {
    box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.25);
}

.curriculum-lesson-list {
    min-height: 2.5rem;
}

.curriculum-accordion.is-collapsed .curriculum-accordion__body {
    display: none;
}

.curriculum-accordion__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.curriculum-accordion__toggle:hover {
    opacity: 0.85;
}

.curriculum-accordion__chevron {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: rgb(241 245 249);
    font-size: 0.65rem;
    color: rgb(100 116 139);
    transition: transform 0.2s ease;
}

.curriculum-accordion.is-collapsed .curriculum-accordion__chevron {
    transform: rotate(-90deg);
}

.curriculum-nav__chapter.curriculum-accordion {
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    padding: 0.5rem 0.625rem;
}

.curriculum-nav__chapter.curriculum-accordion + .curriculum-nav__chapter {
    margin-top: 0.5rem;
}

.dark .curriculum-nav__chapter.curriculum-accordion {
    border-color: rgb(51 65 85);
}

.syllabus-chapter.curriculum-accordion {
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240);
    overflow: hidden;
}

.dark .syllabus-chapter.curriculum-accordion {
    border-color: rgb(51 65 85);
}

.syllabus-chapter .curriculum-accordion__head {
    padding: 0.875rem 1rem;
    background: rgb(248 250 252);
}

.dark .syllabus-chapter .curriculum-accordion__head {
    background: rgb(30 41 59 / 0.5);
}

/* ─── Hero Options 2–4 (Premium layouts) ─── */

/* Option 2 — Modern LMS split */
.hero-option-2-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 28%, #312e81 55%, #4338ca 78%, #1e3a8a 100%);
}

.hero-option-2-mesh {
    background-image:
        radial-gradient(ellipse 70% 50% at 20% 40%, rgba(99, 102, 241, 0.22), transparent),
        radial-gradient(ellipse 50% 40% at 85% 20%, rgba(56, 189, 248, 0.12), transparent);
}

.hero-opt2-eyebrow {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(165, 180, 252, 0.25);
    backdrop-filter: blur(8px);
}

.hero-opt2-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.75);
}

.hero-opt2-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hero-opt2-cta--primary {
    color: #312e81;
    background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
}

.hero-opt2-cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.32);
}

.hero-opt2-cta--secondary {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
}

.hero-opt2-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.hero-opt2-trust {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}

.hero-opt2-trust--badge {
    flex-direction: row;
    gap: 8px;
    min-width: 0;
}

.hero-opt2-trust__value {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hero-opt2-trust__value sup {
    font-size: 0.65em;
    color: #a5b4fc;
}

.hero-opt2-trust__label {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(199, 210, 254, 0.85);
}

.hero-opt2-trust--badge .hero-opt2-trust__label {
    margin-top: 0;
}

.hero-opt2-visual {
    position: relative;
    padding: 12px 0 24px;
}

.hero-opt2-visual__glow {
    position: absolute;
    inset: 10% 5% 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.35), transparent 70%);
    filter: blur(40px);
}

.hero-opt2-browser {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(16px);
}

.hero-opt2-browser__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-opt2-browser__bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.hero-opt2-browser__bar span:first-child { background: #f87171; }
.hero-opt2-browser__bar span:nth-child(2) { background: #fbbf24; }
.hero-opt2-browser__bar span:nth-child(3) { background: #34d399; }

.hero-opt2-browser__url {
    flex: 1;
    height: 22px;
    margin-left: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.hero-opt2-browser__body {
    display: grid;
    grid-template-columns: 56px 1fr;
    min-height: 220px;
}

.hero-opt2-browser__sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-opt2-browser__sidebar span {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.hero-opt2-browser__sidebar span.is-active {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.hero-opt2-browser__main {
    padding: 18px 16px;
}

.hero-opt2-browser__hero-line {
    height: 10px;
    width: 55%;
    margin-bottom: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
}

.hero-opt2-browser__hero-line--short {
    width: 35%;
    margin-bottom: 18px;
}

.hero-opt2-browser__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.hero-opt2-browser__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #e0e7ff;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(129, 140, 248, 0.25);
}

.hero-opt2-browser__card i {
    font-size: 14px;
    color: #a5b4fc;
}

.hero-opt2-browser__progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.hero-opt2-browser__progress-fill {
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #38bdf8);
}

.hero-opt2-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 11px;
    color: #fff;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
    animation: hero-float-card 5s ease-in-out infinite;
}

.hero-opt2-float strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.hero-opt2-float span {
    color: #64748b;
}

.hero-opt2-float i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    color: #6366f1;
    background: #eef2ff;
}

.hero-opt2-float--1 {
    top: 8%;
    right: -4%;
    animation-delay: 0s;
}

.hero-opt2-float--2 {
    bottom: 12%;
    left: -6%;
    animation-delay: 1.2s;
}

/* Option 3 — Course focused */
.hero-option-3-bg {
    background: linear-gradient(155deg, #020617 0%, #0f172a 30%, #0c4a6e 62%, #0369a1 100%);
}

.hero-option-3-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, black 30%, transparent 100%);
}

.hero-opt3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.hero-opt3-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-opt3-badge--accent {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.25);
}

.hero-opt3-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-opt3-cta--primary {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.35);
}

.hero-opt3-cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(14, 165, 233, 0.42);
}

.hero-opt3-cta--secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.hero-opt3-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.hero-opt3-preview {
    position: relative;
}

.hero-opt3-preview__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.hero-opt3-course-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 24px 56px rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(14px);
}

.hero-opt3-course-card__thumb {
    position: relative;
    height: 140px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e3a8a, #0369a1);
}

.hero-opt3-course-card__thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.35);
}

.hero-opt3-course-card__level {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
}

.hero-opt3-course-card__body {
    padding: 18px;
}

.hero-opt3-course-card__title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.hero-opt3-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
}

.hero-opt3-course-card__meta i {
    margin-right: 4px;
    color: #38bdf8;
}

.hero-opt3-course-card__progress {
    margin-top: 16px;
}

.hero-opt3-course-card__progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    color: #94a3b8;
}

.hero-opt3-course-card__progress-head strong {
    color: #38bdf8;
}

.hero-opt3-course-card__track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.hero-opt3-course-card__fill {
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
}

.hero-opt3-course-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-opt3-course-card__price {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}

.hero-opt3-course-card__cta {
    font-size: 12px;
    font-weight: 700;
    color: #38bdf8;
}

.hero-opt3-dash {
    position: absolute;
    right: -8px;
    bottom: -16px;
    z-index: 1;
    width: min(220px, 55%);
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.hero-opt3-dash__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-opt3-dash__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    text-align: center;
}

.hero-opt3-dash__stats strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
}

.hero-opt3-dash__stats span {
    font-size: 10px;
    color: #64748b;
}

/* Option 4 — Student / Instructor */
.hero-option-4-bg {
    background: linear-gradient(145deg, #022c22 0%, #064e3b 32%, #0f766e 65%, #134e4a 100%);
}

.hero-option-4-pattern {
    background-image: radial-gradient(circle at 20% 80%, rgba(52, 211, 153, 0.12), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1), transparent 40%);
}

.hero-opt4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a7f3d0;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.28);
}

.hero-opt4-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-opt4-cta--primary {
    color: #064e3b;
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
    box-shadow: 0 12px 28px rgba(6, 78, 59, 0.28);
}

.hero-opt4-cta--primary:hover {
    transform: translateY(-2px);
}

.hero-opt4-cta--secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

.hero-opt4-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.hero-opt4-scene {
    position: relative;
    min-height: 380px;
    padding: 20px 0;
}

.hero-opt4-scene__glow {
    position: absolute;
    inset: 15% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.25), transparent 70%);
    filter: blur(36px);
}

.hero-opt4-portrait {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 320px;
    padding: 28px 24px 32px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.45);
    box-shadow: 0 28px 56px rgba(2, 6, 23, 0.35);
    backdrop-filter: blur(12px);
}

.hero-opt4-portrait__inner {
    text-align: center;
}

.hero-opt4-portrait__avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2rem;
    color: #6ee7b7;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(59, 130, 246, 0.2));
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.hero-opt4-portrait__lines span {
    display: block;
    height: 8px;
    margin: 0 auto 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
}

.hero-opt4-portrait__lines span:nth-child(1) { width: 70%; }
.hero-opt4-portrait__lines span:nth-child(2) { width: 50%; }
.hero-opt4-portrait__lines span:nth-child(3) { width: 60%; margin-bottom: 16px; }

.hero-opt4-portrait__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.hero-opt4-float {
    position: absolute;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
    animation: hero-float-card 6s ease-in-out infinite;
}

.hero-opt4-float strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.hero-opt4-float span {
    font-size: 10px;
    color: #64748b;
}

.hero-opt4-float__icon {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
}

.hero-opt4-float__icon--green { color: #059669; background: #d1fae5; }
.hero-opt4-float__icon--blue { color: #2563eb; background: #dbeafe; }
.hero-opt4-float__icon--amber { color: #d97706; background: #fef3c7; }
.hero-opt4-float__icon--violet { color: #7c3aed; background: #ede9fe; }

.hero-opt4-float__bar {
    grid-column: 2;
    height: 4px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.hero-opt4-float__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #34d399);
}

.hero-opt4-float__chart {
    grid-row: span 2;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 36px;
    padding: 0 2px;
}

.hero-opt4-float__chart span {
    width: 6px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
}

.hero-opt4-float--progress {
    top: 4%;
    left: -2%;
    animation-delay: 0s;
}

.hero-opt4-float--lessons {
    top: 38%;
    right: -4%;
    animation-delay: 0.8s;
}

.hero-opt4-float--cert {
    bottom: 28%;
    left: -6%;
    animation-delay: 1.6s;
}

.hero-opt4-float--analytics {
    bottom: 6%;
    right: -2%;
    animation-delay: 2.4s;
}

@keyframes hero-float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 1023px) {
    .hero-opt2-float--1 { right: 0; top: 0; }
    .hero-opt2-float--2 { left: 0; }
    .hero-opt4-float--progress { left: 0; }
    .hero-opt4-float--lessons { right: 0; }
    .hero-opt4-float--cert { left: 0; }
    .hero-opt4-float--analytics { right: 0; }
    .hero-opt3-dash { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-opt2-float,
    .hero-opt4-float {
        animation: none;
    }
}

.hero-option-2-grid {
    display: none;
}

.hero-option-5-bg {
    background: linear-gradient(165deg, #0c0a09 0%, #1c1917 25%, #292524 55%, #1e3a8a 100%);
}

.hero-option-5-shine {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(251, 191, 36, 0.15), transparent);
}

.hero-option-5-cta {
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
}

/* ─── CMS Admin ─── */
.cms-settings .cms-preview img {
    object-fit: contain;
}

.cms-hero-preview {
    max-height: 280px;
}