/*
Theme Name: EduAventura Theme
Theme URI: https://eduaventura.ro
Author: EduAventura
Description: Custom frontend theme for EduAventura LMS platform.
Version: 1.0.0
Requires at least: 6.9
Requires PHP: 8.1
Text Domain: eduaventura-theme
*/

:root {
    --edu-bg: #fff8f0;
    --edu-bg-2: #f0f7ff;
    --edu-bg-3: #fdf0ff;
    --edu-primary: #5c6cff;
    --edu-primary-dark: #3d4fd9;
    --edu-secondary: #ff8a3d;
    --edu-accent: #2dd4a3;
    --edu-pink: #ff5da2;
    --edu-sun: #ffd93d;
    --edu-coral: #ff7b6b;
    --edu-mint: #7ae7c7;
    --edu-text: #2a2550;
    --edu-card: #ffffff;
    --edu-radius: 26px;
    /* Plus Jakarta Sans: full Latin Extended + real bold for ă â î ș ț (avoid Fredoka/Nunito diacritic mismatch) */
    --edu-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --edu-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

h1,
h2,
h3 {
    font-family: var(--edu-font-display);
    letter-spacing: 0.02em;
}

strong,
b {
    font-weight: 700;
    font-family: inherit;
}

body {
    margin: 0;
    font-family: var(--edu-font);
    font-synthesis: none;
    color: var(--edu-text);
    background-color: #fff5eb;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 217, 61, 0.35) 0%, transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(255, 125, 180, 0.28) 0%, transparent 40%),
        radial-gradient(circle at 50% 95%, rgba(122, 231, 199, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(92, 108, 255, 0.12) 0%, transparent 35%),
        linear-gradient(165deg, var(--edu-bg) 0%, var(--edu-bg-2) 45%, var(--edu-bg-3) 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    width: 260px;
    height: 260px;
    border-radius: 42% 58% 36% 64% / 45% 43% 57% 55%;
    z-index: -1;
    opacity: 0.32;
    animation: eduFloatBlob 12s ease-in-out infinite;
}

body::before {
    top: -70px;
    right: -70px;
    background: linear-gradient(135deg, #8fd3ff, #c3b6ff);
}

body::after {
    bottom: -100px;
    left: -90px;
    background: linear-gradient(135deg, #ffd592, #ff97d3);
    animation-delay: -4s;
}

@keyframes eduFloatBlob {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-18px) rotate(8deg);
    }
}

/* Activități html_embed — mișcare ușoară (respectă prefers-reduced-motion mai jos) */
@keyframes eduSmStageDrift {
    0%,
    100% {
        opacity: 0.55;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.9;
        transform: translate(-6px, 10px) scale(1.04);
    }
}

@keyframes eduSmStageDrift2 {
    0%,
    100% {
        opacity: 0.45;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.75;
        transform: translate(8px, -8px) scale(1.06);
    }
}

@keyframes eduSmChipBob {
    0%,
    100% {
        transform: rotate(var(--sm-tilt, 0deg)) translateY(0);
    }
    50% {
        transform: rotate(var(--sm-tilt, 0deg)) translateY(-6px);
    }
}

@keyframes eduSmDropPulse {
    0%,
    100% {
        box-shadow:
            0 5px 0 rgba(30, 40, 100, 0.38),
            0 10px 22px rgba(92, 108, 255, 0.22),
            inset 0 2px 10px rgba(255, 255, 255, 0.28),
            inset 0 -14px 22px rgba(0, 0, 0, 0.12);
    }
    50% {
        box-shadow:
            0 5px 0 rgba(30, 40, 100, 0.38),
            0 14px 28px rgba(255, 93, 162, 0.28),
            inset 0 2px 12px rgba(255, 255, 255, 0.35),
            inset 0 -14px 22px rgba(0, 0, 0, 0.1);
    }
}

@keyframes eduSmProgressGlow {
    0%,
    100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.07) saturate(1.05);
    }
}

@keyframes eduSmBucketShake {
    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }
    18% {
        transform: translateX(-10px) rotate(-2deg);
    }
    36% {
        transform: translateX(10px) rotate(2deg);
    }
    54% {
        transform: translateX(-7px) rotate(-1.2deg);
    }
    72% {
        transform: translateX(7px) rotate(1.2deg);
    }
}

.edu-container {
    width: min(1200px, 92vw);
    margin: 0 auto;
}

.edu-header {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 1100;
    background: transparent;
    border-bottom: 0;
}

.edu-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 249, 237, 0.82) 0%, rgba(255, 241, 250, 0.8) 100%);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(215, 184, 255, 0.28);
    pointer-events: none;
    z-index: -1;
}

.edu-logo {
    text-decoration: none;
    color: var(--edu-text);
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1;
}

.edu-logo strong {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transform: none;
    font-family: var(--edu-font);
    letter-spacing: -0.03em;
    font-weight: 900;
}

.edu-logo__mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5f6dff 0%, #8a5cf6 55%, #e15da8 100%);
    color: #fff;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(76, 93, 240, 0.28);
    line-height: 1;
}

.edu-logo__word {
    display: inline-flex;
    align-items: baseline;
}

.edu-logo__edu {
    color: #4b5fd7;
}

.edu-logo__aventura {
    color: #d95e9f;
}

.edu-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
}

.edu-header-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.edu-user-menu {
    position: relative;
}

.edu-user-menu summary {
    list-style: none;
}

.edu-user-menu summary::-webkit-details-marker {
    display: none;
}

.edu-user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 2px solid #d8e3ff;
    border-radius: 14px;
    padding: 10px;
    display: grid;
    gap: 6px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
    z-index: 200;
}

.edu-user-menu__panel a {
    text-decoration: none;
    color: #243160;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.edu-user-menu__panel a:hover {
    background: #eef3ff;
}

.edu-user-menu__panel .edu-user-menu__logout-link {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(60, 82, 150, 0.12);
    color: #5c2d6b;
    font-weight: 700;
}

.edu-button,
button,
input[type="submit"] {
    border: 0;
    border-radius: 16px;
    padding: 13px 20px;
    min-height: 40px;
    font-weight: 800;
    font-family: var(--edu-font);
    background: linear-gradient(95deg, var(--edu-primary) 0%, #8b5cf6 50%, var(--edu-pink) 100%);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 20px rgba(91, 93, 240, 0.35);
    white-space: nowrap;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.edu-button:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(91, 93, 240, 0.4);
}

a.edu-button {
    text-decoration: none;
}

.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.edu-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 210px));
    gap: 14px;
    justify-content: center;
}

.edu-choice-card {
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    background: linear-gradient(160deg, #ffffff 0%, #f0f4ff 55%, #fff5f8 100%);
    padding: 14px 14px 18px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Al doilea rând auto ca titlul să poată ocupa 2–3+ linii și să lungească cardul */
    grid-template-rows: auto auto;
    gap: 8px;
    justify-items: center;
    align-content: start;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 210px;
    min-width: 0;
    min-height: 210px;
    height: 210px;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(68, 85, 151, 0.12);
    color: #1f2a60;
    /* Suprascrie white-space: nowrap de pe selectorul global `button` */
    white-space: normal;
    line-height: normal;
}

.edu-choice-card:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: #95adff;
    box-shadow: 0 14px 30px rgba(91, 93, 240, 0.22);
}

.edu-choice-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.45;
    background: radial-gradient(circle, var(--edu-sun) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.edu-choice-bubble {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    line-height: 1;
    background: linear-gradient(145deg, #fff 0%, #fff4e0 100%);
    box-shadow:
        inset 0 -4px 0 rgba(255, 138, 61, 0.25),
        0 10px 24px rgba(255, 138, 61, 0.2),
        0 0 0 3px rgba(255, 255, 255, 0.9);
    animation: eduBubbleWobble 4s ease-in-out infinite;
}

@keyframes eduBubbleWobble {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.03); }
}

.edu-choice-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(180deg, #fff2d8 0%, #ffe2b8 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 6px 14px rgba(255, 138, 61, 0.22);
}

/* Materii — culori ca pe eduaventura.eu */
.edu-choice-card.edu-theme-math {
    background: linear-gradient(165deg, #fff9f0 0%, #ffe8f0 40%, #e8f4ff 100%);
}
.edu-choice-card.edu-theme-math::after {
    background: radial-gradient(circle, #ffb84d 0%, transparent 72%);
}

.edu-choice-card.edu-theme-words {
    background: linear-gradient(165deg, #fff5fb 0%, #f0e8ff 50%, #fff 100%);
}
.edu-choice-card.edu-theme-words::after {
    background: radial-gradient(circle, #e0b3ff 0%, transparent 72%);
}

.edu-choice-card.edu-theme-nature {
    background: linear-gradient(165deg, #f0fff8 0%, #e8fff4 45%, #fffbeb 100%);
}
.edu-choice-card.edu-theme-nature::after {
    background: radial-gradient(circle, var(--edu-mint) 0%, transparent 72%);
}

.edu-choice-card.edu-theme-art {
    background: linear-gradient(165deg, #fff8ff 0%, #ffe8f5 40%, #fff5e6 100%);
}
.edu-choice-card.edu-theme-art::after {
    background: radial-gradient(circle, #ff9ecd 0%, transparent 72%);
}

.edu-choice-card.edu-theme-eng,
.edu-choice-card.edu-theme-music,
.edu-choice-card.edu-theme-sport,
.edu-choice-card.edu-theme-default {
    background: linear-gradient(165deg, #ffffff 0%, #eef2ff 50%, #fff5f0 100%);
}

/* Activități active: html_embed */
.edu-choice-card.edu-act-html_embed { background: linear-gradient(160deg, #e8f8ff, #dff5ff); }

.edu-choice-card.edu-act-suggested {
    background: linear-gradient(160deg, #fffbeb, #fef3c7);
    min-height: 238px;
    height: 238px;
}
.edu-choice-card.edu-act-suggested::after {
    background: radial-gradient(circle, #fcd34d 0%, transparent 70%);
}

.edu-choice-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 0 2px 2px;
    box-sizing: border-box;
}

.edu-choice-content strong {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    box-sizing: border-box;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.3;
    text-align: center;
    color: #1f2a60;
    font-family: var(--edu-font-display);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

.edu-choice-subtitle {
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 6px 6px 0;
    box-sizing: border-box;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 600;
    font-family: var(--edu-font);
    color: #4c5f9c;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.edu-choice-subject {
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 2px 8px 0;
    box-sizing: border-box;
    font-size: 0.74rem;
    line-height: 1.2;
    font-weight: 600;
    color: #6674a8;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.edu-choice-description {
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 2px 6px 0;
    box-sizing: border-box;
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 600;
    color: #4d4a68;
    text-align: center;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.edu-choice-empty {
    border: 2px dashed #c9d8ff;
    border-radius: 16px;
    padding: 14px;
    width: 100%;
    max-width: none;
    background: #f8fbff;
    color: #52639d;
    font-weight: 600;
    box-sizing: border-box;
}

.edu-choice-grid > .edu-choice-empty {
    grid-column: 1 / -1;
}

.edu-suggested-more {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

#edu-suggested-load-more {
    min-width: 240px;
}

.edu-choice-card.is-dimmed {
    opacity: 0.45;
    filter: grayscale(0.45) brightness(0.98);
    transform: scale(0.98);
}

.edu-choice-card.is-dimmed:hover {
    opacity: 0.65;
    filter: grayscale(0.25);
}

.edu-choice-card.is-active {
    border-color: var(--edu-primary);
    box-shadow:
        0 0 0 4px rgba(92, 108, 255, 0.2),
        0 14px 32px rgba(91, 93, 240, 0.22);
    opacity: 1;
    filter: none;
    transform: scale(1.02);
}

@media (max-width: 740px) {
    .edu-choice-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 190px));
        justify-content: center;
    }

    .edu-choice-card {
        width: 100%;
        min-width: 0;
        min-height: 200px;
        height: 200px;
        padding: 12px 10px 14px;
        gap: 6px;
    }

    .edu-choice-bubble {
        width: 74px;
        height: 74px;
        font-size: 36px;
    }

    .edu-choice-content {
        gap: 6px;
    }

    .edu-choice-content strong {
        font-size: clamp(11px, 3.2vw, 13px);
        line-height: 1.16;
        padding: 0 2px;
    }

    .edu-choice-subtitle {
        font-size: 0.7rem;
        line-height: 1.15;
        padding: 2px 2px 0;
    }
}

.edu-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
    border-radius: var(--edu-radius);
    padding: 22px 24px;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 4px 0 rgba(92, 108, 255, 0.12),
        0 16px 40px rgba(79, 89, 145, 0.12);
    position: relative;
    overflow: hidden;
}

.edu-card.edu-card--hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    padding: 34px 30px;
    border-color: rgba(255, 217, 61, 0.55);
    box-shadow:
        0 4px 0 rgba(255, 138, 61, 0.2),
        0 20px 50px rgba(255, 125, 180, 0.15);
    background-image:
        linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82)),
        url("assets/images/hero-kids-bg.svg");
    background-size: cover, cover;
    background-position: center center, center bottom;
    background-repeat: no-repeat;
}

.edu-zone-intro-card {
    border-color: rgba(255, 217, 61, 0.55);
    box-shadow:
        0 4px 0 rgba(255, 138, 61, 0.2),
        0 20px 50px rgba(255, 125, 180, 0.15);
}

.edu-card.edu-card--hero::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(60%, 620px);
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 12%,
            rgba(255, 255, 255, 0.95) 26%,
            rgba(255, 255, 255, 0.7) 40%,
            rgba(255, 255, 255, 0) 56%),
        url("assets/images/hero-kids-illustration-real.png") no-repeat right center / cover;
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
    z-index: 0;
}

.edu-card.edu-card--hero.is-teacher::before {
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 12%,
            rgba(255, 255, 255, 0.95) 26%,
            rgba(255, 255, 255, 0.7) 40%,
            rgba(255, 255, 255, 0) 56%),
        url("assets/images/hero-teacher-illustration.png") no-repeat right center / cover;
}

.edu-card.edu-card--hero.is-parent::before {
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 12%,
            rgba(255, 255, 255, 0.95) 26%,
            rgba(255, 255, 255, 0.7) 40%,
            rgba(255, 255, 255, 0) 56%),
        url("assets/images/hero-parent-illustration.png") no-repeat right center / cover;
}

.edu-card--hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(40% - 62px);
    width: min(18%, 170px);
    background:
        radial-gradient(48px 38px at 95% 8%, rgba(255, 255, 255, 0.98) 0 62%, transparent 66%),
        radial-gradient(42px 34px at 90% 26%, rgba(255, 255, 255, 0.98) 0 62%, transparent 66%),
        radial-gradient(52px 40px at 94% 46%, rgba(255, 255, 255, 0.98) 0 62%, transparent 66%),
        radial-gradient(40px 32px at 89% 66%, rgba(255, 255, 255, 0.98) 0 62%, transparent 66%),
        radial-gradient(50px 38px at 94% 88%, rgba(255, 255, 255, 0.98) 0 62%, transparent 66%),
        linear-gradient(102deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.78) 42%,
            rgba(255, 255, 255, 0.34) 74%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-28deg);
    transform-origin: center;
    filter: blur(1.2px);
    pointer-events: none;
    z-index: 1;
}

.edu-card--hero > * {
    position: relative;
    z-index: 2;
}

.edu-card--hero h1 {
    font-size: clamp(1.65rem, 4.5vw, 2.35rem);
    line-height: 1.15;
    color: var(--edu-text);
    margin: 0.35em 0 0.25em;
    max-width: min(62%, 720px);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.edu-hero-lead {
    font-size: clamp(1.08rem, 2vw, 1.25rem);
    line-height: 1.45;
    color: #3d3a5c;
    font-weight: 700;
    max-width: min(62%, 720px);
    width: 100%;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.edu-hero-intro {
    margin-top: 10px;
    margin-bottom: 4px;
    max-width: min(64%, 760px);
    width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.edu-hero-intro__p {
    margin: 0;
    font-size: clamp(1.02rem, 2.2vw, 1.15rem);
    line-height: 1.45;
    font-weight: 700;
    color: #352f55;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}

.edu-hero-pop {
    display: inline;
    padding: 2px 6px;
    border-radius: 8px;
    font-family: var(--edu-font-display);
    font-weight: 700;
}

.edu-hero-pop--wave {
    background: linear-gradient(90deg, #ffe066, #ffd93d);
    color: #5c4510;
    box-shadow: 0 2px 0 rgba(200, 150, 40, 0.35);
}

.edu-hero-pop--coral {
    background: linear-gradient(90deg, #ffb4a8, #ff8a8a);
    color: #5a1f2a;
}

.edu-hero-pop--mint {
    background: linear-gradient(90deg, #9cf6d0, #6ee7c5);
    color: #0f4d3c;
}

.edu-hero-pop--sun {
    background: linear-gradient(90deg, #ffe566, #fcd34d);
    color: #5a3d06;
}

.edu-hero-pop--magic {
    background: linear-gradient(90deg, #c4b5fd, #a78bfa);
    color: #312e62;
}

.edu-hero-intro__emoji {
    margin-left: 6px;
    font-size: 1.35em;
    vertical-align: -0.12em;
}

.edu-section-title {
    font-size: clamp(1.25rem, 3vw, 1.55rem);
    margin: 0 0 28px;
    color: var(--edu-text);
}

.edu-card .edu-section-title,
.edu-card h3.edu-section-title--small,
#edu-library-title,
#edu-suggested-heading {
    font-family: var(--edu-font);
}

.edu-title-with-icon,
#edu-library-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: clamp(1.2rem, 1.9vw, 1.45rem);
    line-height: 1.2;
    font-weight: 600;
}

.edu-title-icon,
.edu-library-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(92, 108, 255, 0.18) 0%, rgba(255, 93, 162, 0.14) 100%);
    border: 2px solid rgba(92, 108, 255, 0.28);
    font-size: 20px;
    flex: 0 0 auto;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-variant-emoji: emoji;
    text-rendering: optimizeLegibility;
}

/* Hide homepage title icons briefly to avoid first-paint emoji swap. */
body.edu-icons-prerender .edu-section-title .edu-title-icon {
    opacity: 0;
}

/* Same guard for "Misiunea ta" metric icons. */
body.edu-icons-prerender #edu-daily-goal-section .edu-metric__icon {
    opacity: 0;
}


.edu-section-title--small {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    line-height: 1.2;
    font-weight: 600;
}

#edu-role-hub-root h4,
#edu-role-hub-root h3.edu-section-title--small {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    line-height: 1.2;
    font-weight: 600;
}

.edu-feature-intro {
    text-align: center;
    padding: 8px 0 4px;
}

.edu-feature-intro__title {
    margin: 0;
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    color: var(--edu-text);
}

.edu-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.edu-feature-carousel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
}

.edu-feature-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}

.edu-feature-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.edu-feature-carousel .edu-feature-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    scroll-behavior: smooth;
    padding: 2px 10px 2px 10px;
}

.edu-feature-carousel .edu-feature-card {
    flex: 0 0 clamp(230px, 26vw, 260px);
}

.edu-feature-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}

.edu-feature-carousel__dot {
    width: 12px;
    min-width: 12px;
    max-width: 12px;
    height: 12px;
    min-height: 12px;
    max-height: 12px;
    border: 0;
    border-radius: 50%;
    background: #c9d5ff;
    opacity: 0.9;
    padding: 0;
    margin: 0;
    line-height: 0;
    display: inline-block;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.edu-feature-carousel__dot:hover {
    transform: scale(1.1);
}

.edu-feature-carousel__dot.is-active {
    width: 12px;
    min-width: 12px;
    max-width: 12px;
    height: 12px;
    min-height: 12px;
    max-height: 12px;
    border-radius: 50%;
    background: #5b5df0;
    opacity: 1;
}

.edu-feature-carousel__dot:focus-visible {
    outline: 2px solid #6f86ff;
    outline-offset: 2px;
}

.edu-feature-card {
    border-radius: var(--edu-radius);
    padding: 22px 20px 24px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 36px rgba(60, 70, 120, 0.12);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 288px;
    height: 288px;
}

.edu-feature-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow: 0 18px 44px rgba(60, 70, 120, 0.16);
}

.edu-feature-card__emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    font-size: 2.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.edu-feature-card h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    text-align: center;
    color: var(--edu-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.edu-feature-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: #4d4a68;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.edu-feature-card__grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2f3f80;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(106, 123, 218, 0.28);
}

.edu-feature-card--math {
    background: linear-gradient(165deg, #fff9f2 0%, #ffe8ec 50%, #fff 100%);
    border-color: #ffd6a8;
}

.edu-feature-card--read {
    background: linear-gradient(165deg, #fdf8ff 0%, #f3e8ff 50%, #fff 100%);
    border-color: #e9d4ff;
}

.edu-feature-card--nature {
    background: linear-gradient(165deg, #f2fff9 0%, #e6fff4 50%, #fffbeb 100%);
    border-color: #a8f0d0;
}

.edu-feature-card--art {
    background: linear-gradient(165deg, #fff8fc 0%, #ffe8f5 50%, #fff5e6 100%);
    border-color: #ffb8de;
}

.edu-feature-card--music {
    background: linear-gradient(165deg, #f7f5ff 0%, #ece9ff 48%, #fff 100%);
    border-color: #cfc4ff;
}

.edu-feature-card--coding {
    background: linear-gradient(165deg, #f2fbff 0%, #dff4ff 50%, #f3f0ff 100%);
    border-color: #b7e6ff;
}

.edu-feature-card--sport {
    background: linear-gradient(165deg, #f4fff5 0%, #e1ffe7 52%, #fff 100%);
    border-color: #b4f1bf;
}

.edu-feature-card--english {
    background: linear-gradient(165deg, #f4f8ff 0%, #e8eeff 55%, #fff 100%);
    border-color: #bfd0ff;
}

.edu-feature-card--logic {
    background: linear-gradient(165deg, #fffaf2 0%, #ffeccf 55%, #fff 100%);
    border-color: #ffd9a5;
}

@media (max-width: 740px) {
    .edu-hero {
        gap: 32px;
        padding: 24px 0 40px;
    }

    .edu-card.edu-card--hero {
        min-height: 260px;
        padding: 24px 16px;
        background-position: center center, center bottom;
    }

    .edu-card.edu-card--hero::before {
        width: 100%;
        opacity: 0.38;
        clip-path: none;
        -webkit-mask-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.78) 45%,
            rgba(0, 0, 0, 0.5) 72%,
            rgba(0, 0, 0, 0.35) 100%);
        mask-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.78) 45%,
            rgba(0, 0, 0, 0.5) 72%,
            rgba(0, 0, 0, 0.35) 100%);
    }

    .edu-card--hero::after {
        content: none;
    }

    .edu-logo strong {
        gap: 8px;
    }

    .edu-logo__mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 0.95rem;
    }

    .edu-card--hero h1,
    .edu-hero-lead,
    .edu-hero-intro {
        max-width: 100%;
    }

    .edu-feature-carousel {
        gap: 10px;
    }

    .edu-feature-carousel .edu-feature-card {
        flex-basis: min(84vw, 280px);
    }
}

.edu-library-card {
    text-align: center;
}

.edu-library-card__emoji {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 10px;
}

.edu-card::after {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
    pointer-events: none;
}

.edu-hero {
    display: grid;
    gap: 42px;
    padding: 28px 0 52px;
}

.edu-select {
    width: 100%;
    padding: 14px 15px;
    border-radius: 14px;
    border: 2px solid #d8e3ff;
    font-size: 16px;
    min-width: 84px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.edu-inline-input {
    width: 100%;
    min-height: 46px;
    border: 2px solid #d8e3ff;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 16px;
    line-height: 1.2;
    color: #243160;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 5px 14px rgba(91, 93, 240, 0.07);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: #7f8ebd;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover,
.edu-inline-input:hover {
    border-color: #bfceff;
    box-shadow: 0 8px 18px rgba(91, 93, 240, 0.12);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
.edu-inline-input:focus {
    outline: none;
    border-color: var(--edu-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(91, 93, 240, 0.12), 0 12px 26px rgba(91, 93, 240, 0.16);
    transform: translateY(-1px);
}

select:focus {
    outline: none;
    border-color: var(--edu-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(91, 93, 240, 0.12), 0 12px 26px rgba(91, 93, 240, 0.16);
    transform: translateY(-1px);
}

.edu-select--lang,
#edu-language-switcher {
    width: auto !important;
    min-width: 68px !important;
    max-width: 82px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #ffffff;
    border: 2px solid #d8e3ff;
    font-weight: 800;
    font-size: 15px;
    color: #2f3e77;
    padding: 6px 26px 6px 10px;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #5166b8 50%),
        linear-gradient(135deg, #5166b8 50%, transparent 50%);
    background-position:
        calc(100% - 14px) calc(50% - 3px),
        calc(100% - 8px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Temporary: hide language switcher until multilingual flow is finalized. */
#edu-language-switcher,
.edu-select--lang {
    display: none !important;
}

#edu-open-auth-modal {
    min-width: 128px;
    padding-inline: 18px;
    text-align: center;
}

.edu-button--white {
    background: #ffffff;
    color: #2f3e77;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    border: 2px solid #d8e3ff;
}

.edu-button--small {
    padding: 8px 12px;
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    min-width: auto;
}

.edu-select:focus {
    outline: none;
    border-color: var(--edu-primary);
    box-shadow: 0 0 0 4px rgba(91, 93, 240, 0.14);
}

.edu-chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.edu-chip {
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 800;
    font-size: 13px;
    background: linear-gradient(90deg, #e8eeff, #fff0f8);
    color: #352f66;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 0 rgba(92, 108, 255, 0.15);
}

.edu-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;
}

/* Activități html_embed — fără chenar pe task; fundalul e pe întreg popup-ul */
.edu-sm-task {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.edu-sm-task > * {
    position: relative;
    z-index: 1;
}

.edu-sm-task > .edu-sm-instructions {
    z-index: 50;
}

.edu-sm-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    padding-bottom: 0;
    border-bottom: none;
}

.edu-sm-head__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 10px;
    width: 100%;
}

.edu-sm-head__text:empty {
    display: none;
}

.edu-sm-head__text {
    flex: 1;
    min-width: min(100%, 160px);
}

.edu-sm-info-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 20%);
    align-items: start;
    gap: 6px 10px;
    width: 100%;
    position: relative;
    z-index: 45;
}

.edu-sm-head__timer-fallback {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-start;
}

.edu-sm-head__timer-fallback .edu-sm-timer {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    padding: 2px 0;
    margin: 0;
    font-size: 0.92rem;
}

.edu-sm-head__timer-fallback .edu-sm-timer__value {
    padding: 3px 10px;
}

.edu-sm-prompt {
    margin: 0;
    color: #2d356f;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.edu-sm-prompt strong {
    font-weight: 800;
    color: #352f66;
    letter-spacing: -0.01em;
}

.edu-sm-focus {
    margin: 8px 0 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--edu-primary-dark);
    line-height: 1.42;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.edu-sm-head__actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.edu-sm-instructions {
    position: relative;
    z-index: 80;
    align-self: start;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.edu-sm-instructions summary {
    cursor: pointer;
    list-style: none;
    font-weight: 800;
    color: #3d4a8f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.5), rgba(92, 108, 255, 0.16));
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 16px rgba(92, 108, 255, 0.12);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.edu-sm-instructions summary::-webkit-details-marker {
    display: none;
}

.edu-sm-instructions summary:hover {
    transform: translateY(-2px) rotate(-0.5deg);
    box-shadow: 0 8px 22px rgba(255, 93, 162, 0.14);
}

/* Conținutul nu împinge layout-ul: bulă tip speech bubble, poziționată absolut */
.edu-sm-instructions__bubble {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 12px);
    width: min(520px, calc(100vw - 56px));
    max-width: min(520px, calc(100vw - 56px));
    z-index: 60;
    margin: 0;
    padding: 14px 16px 14px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
    border: 2px solid rgba(92, 108, 255, 0.38);
    border-radius: 20px;
    box-shadow:
        0 14px 40px rgba(45, 55, 120, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.edu-sm-instructions__bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 26px;
    left: auto;
    border: 11px solid transparent;
    border-bottom-color: rgba(92, 108, 255, 0.38);
    transform: translateX(-50%);
    margin-bottom: -1px;
}

.edu-sm-instructions__bubble::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 26px;
    left: auto;
    border: 9px solid transparent;
    border-bottom-color: #ffffff;
    transform: translateX(-50%);
}

.edu-sm-instructions__bubble ol {
    margin: 0;
    padding: 0 0 0 1.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2d356f;
    line-height: 1.45;
}

.edu-sm-instructions__bubble li + li {
    margin-top: 8px;
}

.edu-sm-progress-block {
    display: block;
    width: 100%;
}

.edu-sm-progress {
    display: block;
    width: 100%;
}

.edu-sm-timer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    font-family: var(--edu-font);
    font-weight: 800;
    font-size: 0.98rem;
    color: #2d356f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.edu-sm-timer__label {
    opacity: 0.88;
    font-weight: 800;
}

.edu-sm-timer__value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 2px solid rgba(92, 108, 255, 0.22);
    box-shadow: 0 2px 8px rgba(53, 47, 102, 0.08);
}

.edu-sm-task.is-time-up .edu-sm-timer__value {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(255, 251, 235, 0.95);
}

/* html_embed în modal: cronometru + Ascultă + Reset pe o linie, aceeași înălțime */
.edu-library-modal-activity-toolbar {
    --edu-lib-toolbar-h: 40px;
    position: absolute;
    top: 6px;
    right: max(52px, 3.25rem);
    z-index: 4;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    max-width: min(72vw, 28rem);
    box-sizing: border-box;
    pointer-events: auto;
}

.edu-library-modal-activity-toolbar[hidden] {
    display: none !important;
}

.edu-library-modal-timer-host {
    position: static;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    pointer-events: none;
}

.edu-library-modal-timer-host:empty {
    display: none;
}

.edu-library-modal-sm-actions-host {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.edu-library-modal-activity-toolbar .edu-sm-timer--modal-bar {
    width: auto;
    height: var(--edu-lib-toolbar-h);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    font-size: 0.95rem;
    font-weight: 900;
    color: #2d356f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.9);
}

.edu-library-modal-activity-toolbar .edu-sm-timer__value {
    min-height: var(--edu-lib-toolbar-h);
    height: var(--edu-lib-toolbar-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-width: 2px;
    line-height: 1;
}

.edu-library-modal-activity-toolbar .edu-button {
    min-height: var(--edu-lib-toolbar-h);
    height: var(--edu-lib-toolbar-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.edu-library-modal-timer-host.is-time-up .edu-sm-timer__value {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(255, 251, 235, 0.95);
}

.edu-sm-progress-text {
    font-weight: 800;
    color: #3d4a8f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.edu-sm-progress__bar {
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #e2e9ff, #f5f7ff);
    box-shadow: inset 0 2px 4px rgba(53, 47, 102, 0.08);
    border: 1px solid rgba(92, 108, 255, 0.12);
}

.edu-sm-progress__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--edu-primary) 0%, #a855f7 45%, var(--edu-pink) 100%);
    background-size: 160% 100%;
    transition: width 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    animation: eduSmProgressGlow 2.8s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(255, 93, 162, 0.32);
}

/* Tablă: jetoane + găleți mai sus în zonă */
.edu-sm-board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    flex: 1 1 auto;
    min-height: min(380px, 44vh);
    padding-top: 2px;
}

/* Zonă pentru jetoane — fără „norișor”, fără chenar suplimentar */
.edu-sm-chip-pool {
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 4px 8px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.edu-sm-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 16px;
    align-content: center;
    align-items: center;
    min-height: 58px;
    padding: 8px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.edu-sm-buckets-section {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: min(240px, 36vh);
    position: relative;
    padding-top: 4px;
}

.edu-sm-buckets {
    position: relative;
    width: 100%;
    min-height: clamp(200px, 30vh, 300px);
    margin-top: 0;
}

.edu-sm-bank .edu-sm-chip {
    --sm-tilt: -0.9deg;
    --sm-delay: 0s;
    --sm-chip-bg: linear-gradient(160deg, #ffffff 0%, #eef2ff 50%, #fff0f8 100%);
    --sm-chip-br: rgba(92, 108, 255, 0.45);
    margin-top: 0;
    margin-left: 0;
    background: var(--sm-chip-bg);
    border-width: 2px;
    border-color: var(--sm-chip-br);
    box-shadow: 0 6px 18px rgba(76, 93, 240, 0.16);
    animation: eduSmChipBob 2.75s ease-in-out var(--sm-delay) infinite;
}

.edu-sm-bank .edu-sm-chip:nth-child(5n + 1) {
    --sm-tilt: -1.35deg;
    --sm-delay: 0s;
    --sm-chip-bg: linear-gradient(160deg, #ffffff 0%, #eef2ff 50%, #ffeef8 100%);
    --sm-chip-br: rgba(92, 108, 255, 0.5);
}

.edu-sm-bank .edu-sm-chip:nth-child(5n + 2) {
    --sm-tilt: 1.05deg;
    --sm-delay: 0.18s;
    --sm-chip-bg: linear-gradient(160deg, #ffffff 0%, #fff8e8 45%, #ffe0f2 100%);
    --sm-chip-br: rgba(255, 138, 61, 0.48);
}

.edu-sm-bank .edu-sm-chip:nth-child(5n + 3) {
    --sm-tilt: -0.65deg;
    --sm-delay: 0.42s;
    --sm-chip-bg: linear-gradient(160deg, #ffffff 0%, #e8fff6 50%, #f0f4ff 100%);
    --sm-chip-br: rgba(45, 212, 163, 0.45);
}

.edu-sm-bank .edu-sm-chip:nth-child(5n + 4) {
    --sm-tilt: 0.95deg;
    --sm-delay: 0.62s;
    --sm-chip-bg: linear-gradient(160deg, #ffffff 0%, #f3e8ff 48%, #fff5eb 100%);
    --sm-chip-br: rgba(168, 85, 247, 0.38);
}

.edu-sm-bank .edu-sm-chip:nth-child(5n) {
    --sm-tilt: -1deg;
    --sm-delay: 0.82s;
    --sm-chip-bg: linear-gradient(160deg, #ffffff 0%, #e8f7ff 50%, #fff0fa 100%);
    --sm-chip-br: rgba(255, 93, 162, 0.45);
}

.edu-sm-bank .edu-sm-chip.is-dragging {
    animation: none;
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 16px 36px rgba(76, 93, 240, 0.22);
}

.edu-sm-chip {
    border: 2px solid rgba(92, 108, 255, 0.28);
    border-radius: 18px;
    background: linear-gradient(165deg, #ffffff 0%, #f6f8ff 100%);
    min-height: 50px;
    padding: 12px 20px;
    font-weight: 800;
    font-size: 1.12rem;
    color: #2a356f;
    cursor: grab;
    touch-action: none;
    user-select: none;
    box-shadow: 0 5px 16px rgba(76, 93, 240, 0.1);
    transition: transform 0.15s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.edu-sm-chip:hover {
    border-color: rgba(92, 108, 255, 0.55);
    background: linear-gradient(165deg, #ffffff 0%, #faf3ff 100%);
    box-shadow: 0 8px 22px rgba(255, 93, 162, 0.12);
}

.edu-sm-bank .edu-sm-chip:hover {
    animation-play-state: paused;
    transform: rotate(var(--sm-tilt)) translateY(-5px) scale(1.04);
    box-shadow: 0 12px 28px rgba(255, 138, 61, 0.18);
}

.edu-sm-bucket__well .edu-sm-chip:hover {
    transform: translateY(-2px);
}

.edu-sm-chip.is-dragging {
    cursor: grabbing;
    opacity: 0.98;
    box-shadow: 0 12px 28px rgba(76, 93, 240, 0.2);
}

.edu-sm-chip.is-correct {
    border-color: rgba(45, 212, 163, 0.75);
    background: linear-gradient(165deg, #eafff6 0%, #d4fff0 100%);
    color: #0f5c45;
    cursor: default;
    animation: none;
    box-shadow: 0 4px 16px rgba(45, 212, 163, 0.25);
}

.edu-sm-chip.is-wrong {
    border-color: rgba(255, 107, 142, 0.75);
    background: linear-gradient(165deg, #fff5f8 0%, #ffe0ea 100%);
    color: #8f2545;
    animation: none !important;
}

/* Slot = găleată împrăștiată în zona de jos (poziție din CSS vars setate în JS) */
.edu-sm-slot {
    position: absolute;
    left: var(--sm-left, 50%);
    bottom: var(--sm-bottom, 8%);
    transform: translateX(-50%) rotate(var(--sm-rot, 0deg));
    width: min(48vw, 196px);
    max-width: 196px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    z-index: 2;
    transform-origin: 50% 100%;
}

.edu-sm-bucket {
    position: relative;
    width: 100%;
    max-width: 196px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 100%;
    transition: filter 0.25s ease;
}

.edu-sm-bucket__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: -5px;
    filter: drop-shadow(0 10px 16px rgba(25, 35, 90, 0.28));
}

.edu-sm-bucket__rim {
    width: 112%;
    margin-left: -6%;
    height: 18px;
    margin-bottom: -7px;
    border-radius: 50% / 100%;
    background: linear-gradient(180deg, #fffef0 0%, var(--edu-sun) 42%, #d89410 100%);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.75);
    z-index: 3;
    position: relative;
}

.edu-sm-bucket__word {
    width: 100%;
    text-align: center;
    padding: 12px 12px 14px;
    margin: 0;
    border-radius: 50% 50% 10px 10px / 16px 16px 10px 10px;
    background: linear-gradient(180deg, #9fb2ff 0%, var(--edu-primary) 42%, #3d48c4 100%);
    box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(45, 55, 130, 0.3);
    border-bottom: none;
}

.edu-sm-bucket__word strong {
    display: block;
    font-size: 1.18rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    line-height: 1.2;
    transform: none;
}

.edu-sm-bucket__word .edu-sm-hint {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.84rem;
    margin-top: 6px;
    display: block;
}

.edu-sm-bucket__well {
    position: relative;
    width: 100%;
    min-height: 54px;
    padding: 10px 14px 16px;
    margin-top: -2px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #5a68e0 0%, #3d47b8 52%, #252e78 100%);
    border-radius: 0 0 14px 14px;
    border: 2px dashed rgba(255, 255, 255, 0.42);
    border-top: none;
    clip-path: polygon(11% 0, 89% 0, 80% 100%, 20% 100%);
    box-shadow:
        0 10px 0 rgba(20, 25, 70, 0.38),
        0 18px 28px rgba(40, 50, 130, 0.25),
        inset 0 -14px 22px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.edu-sm-bucket__well:not(:has(.edu-sm-chip)) {
    animation: eduSmDropPulse 3s ease-in-out infinite;
}

.edu-sm-bucket__well:has(.edu-sm-chip) {
    animation: none;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.45);
}

.edu-sm-bucket__well .edu-sm-chip {
    margin: 0;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 1.05rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.edu-sm-bucket.is-correct .edu-sm-bucket__well {
    animation: none;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 50%),
        linear-gradient(180deg, #4dd9a8 0%, #2dd4a3 45%, #1a9b72 100%);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 0 rgba(15, 80, 60, 0.35),
        0 14px 28px rgba(45, 212, 163, 0.28),
        inset 0 -12px 20px rgba(0, 0, 0, 0.1);
}

.edu-sm-bucket.is-correct .edu-sm-bucket__word {
    background: linear-gradient(180deg, #7ae7c7 0%, #2dd4a3 50%, #1fa87a 100%);
}

.edu-sm-bucket.is-wrong .edu-sm-bucket__well {
    animation: none;
    background: linear-gradient(180deg, #e87890 0%, #c84860 55%, #903040 100%);
    border-style: solid;
    border-color: rgba(255, 180, 200, 0.85);
}

.edu-sm-bucket.is-wrong .edu-sm-bucket__word {
    background: linear-gradient(180deg, #ff9eb0 0%, #e85d78 50%, #b83850 100%);
}

.edu-sm-bucket.is-shake {
    animation: eduSmBucketShake 0.68s ease-in-out;
}

.edu-sm-slot__label {
    display: block;
    width: 100%;
}

.edu-sm-hint {
    color: inherit;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .edu-sm-bank .edu-sm-chip {
        animation: none !important;
    }

    .edu-sm-bucket__well:not(:has(.edu-sm-chip)) {
        animation: none !important;
    }

    .edu-sm-progress__bar span {
        animation: none !important;
    }

    .edu-sm-instructions summary:hover {
        transform: none;
    }

    .edu-sm-bucket.is-shake {
        animation: none !important;
    }
}

@media (max-width: 760px) {
    #edu-library-modal:has(#edu-library-modal-content .edu-sm-task) .edu-auth-modal__panel {
        width: min(98vw, 760px);
        height: min(94vh, 940px);
        margin: 2vh auto;
        padding: 10px 12px 10px;
    }

    #edu-library-modal:has(#edu-library-modal-content .edu-sm-task) #edu-library-modal-title {
        padding-right: clamp(2.8rem, 14vw, 4.3rem);
        max-width: calc(100% - clamp(2.8rem, 14vw, 4.3rem));
        flex: 1 1 auto;
        min-width: 0;
    }

    .edu-sm-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .edu-sm-info-row .edu-sm-instructions {
        justify-self: start;
        width: auto;
        max-width: 100%;
    }

    .edu-sm-info-row .edu-sm-instructions summary {
        width: auto;
    }

    .edu-sm-instructions__bubble {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }

    .edu-sm-instructions__bubble::before,
    .edu-sm-instructions__bubble::after {
        display: none;
    }

    .edu-library-modal-activity-toolbar {
        --edu-lib-toolbar-h: 38px;
        top: 4px;
        right: max(48px, 16vw);
        max-width: min(78vw, 24rem);
        gap: 6px;
    }

    .edu-library-modal-activity-toolbar .edu-button {
        font-size: 0.78rem;
        padding: 0 10px;
    }

    .edu-library-modal-activity-toolbar .edu-sm-timer--modal-bar {
        font-size: 0.88rem;
    }

    .edu-sm-board {
        min-height: min(200px, 26vh);
        padding-top: 0;
    }

    .edu-sm-prompt {
        font-size: 0.98rem;
        line-height: 1.36;
    }

    .edu-sm-chip-pool {
        margin-top: 2px;
        padding: 8px 2px 6px;
    }

    .edu-sm-buckets-section {
        min-height: min(220px, 38vh);
    }

    .edu-sm-buckets {
        min-height: clamp(190px, 32vh, 280px);
    }

    .edu-sm-chip {
        font-size: 1.05rem;
        min-height: 46px;
        padding: 10px 16px;
    }

    .edu-sm-bucket__word strong {
        font-size: 1.08rem;
    }

    .edu-sm-slot {
        width: min(48vw, 172px);
        max-width: 172px;
    }

    .edu-sm-bucket {
        max-width: 172px;
    }

    .edu-sm-bucket__well .edu-sm-chip {
        font-size: 1rem;
        min-height: 40px;
    }
}
.edu-child-hub {
    display: grid;
    gap: 16px;
}

.edu-child-zone {
    padding: 18px;
}

.edu-child-hub__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.edu-child-hub__actions .edu-chip {
    cursor: pointer;
}

.edu-child-hub__section h3 {
    margin-bottom: 10px;
}

.edu-child-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.edu-child-kpi {
    border-radius: 18px;
    padding: 14px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(95, 82, 177, 0.12);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
}

.edu-child-kpi__icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 1;
}

.edu-child-kpi strong {
    grid-column: 1;
    grid-row: 1;
    font-size: 28px;
    line-height: 1.05;
    color: #2e2758;
}

.edu-child-kpi small {
    grid-column: 1;
    grid-row: 2;
    color: #4a4f71;
    font-weight: 700;
}

.edu-child-kpi--plans { background: linear-gradient(135deg, #e8f0ff, #f6f3ff); }
.edu-child-kpi--active { background: linear-gradient(135deg, #ecfff3, #f3fff9); }
.edu-child-kpi--done { background: linear-gradient(135deg, #fff7e9, #fff2fb); }
.edu-child-kpi--games { background: linear-gradient(135deg, #eef9ff, #f2fffd); }
.edu-child-kpi--score { background: linear-gradient(135deg, #fff0f5, #f0f4ff); }
.edu-child-kpi--xp { background: linear-gradient(135deg, #e9f7ff, #eef2ff); }
.edu-child-kpi--level { background: linear-gradient(135deg, #fff5ea, #fff0f7); }
.edu-child-kpi--streak { background: linear-gradient(135deg, #fff0eb, #fff6ea); }

.edu-child-level-progress {
    margin-top: 12px;
    background: linear-gradient(135deg, #f8f9ff, #fff7fc);
    border: 2px solid rgba(150, 124, 255, 0.2);
    border-radius: 14px;
    padding: 12px;
}

.edu-child-level-progress__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    color: #362f65;
    font-weight: 700;
}

.edu-child-level-progress__bar {
    height: 14px;
    border-radius: 999px;
    background: #eceaff;
    overflow: hidden;
}

.edu-child-level-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6d5bff, #ff4fc4);
    box-shadow: 0 4px 10px rgba(109, 91, 255, 0.35);
}

.edu-child-badges {
    margin-top: 10px;
}

.edu-child-badges p {
    margin: 0 0 6px;
    font-weight: 700;
    color: #3b3661;
}

.edu-child-badges__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.edu-child-badge-card {
    background: #eef0fb;
    border: 2px dashed #c7cce8;
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 8px;
    color: #3b3661;
    min-height: 150px;
}

.edu-child-badge-card.is-unlocked {
    background: linear-gradient(135deg, #fff4cf, #ffe3f4);
    border: 2px solid #ffd56b;
}

.edu-child-badge-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edu-child-badge-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.edu-child-badge-card small {
    color: #5a5880;
    font-weight: 700;
    font-size: 13px;
}

.edu-child-badge-card em {
    font-style: normal;
    font-weight: 700;
    color: #433d70;
    font-size: 13px;
}

.edu-child-badge-card__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(109, 91, 255, 0.15);
    overflow: hidden;
}

.edu-child-badge-card__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6d5bff, #ff4fc4);
}

.edu-child-profile-box {
    background: linear-gradient(135deg, #f6fbff, #fff7fd);
    border: 2px solid rgba(144, 175, 255, 0.35);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(73, 92, 167, 0.14);
}

.edu-profile-form-extended textarea {
    min-height: 86px;
    resize: vertical;
}

#edu-profile-section .edu-title-with-icon {
    margin-bottom: 18px;
}

.edu-profile-form-extended {
    column-gap: 18px;
    row-gap: 14px;
}

.edu-form-field {
    display: grid;
    gap: 7px;
    padding: 0;
}

.edu-form-field > span {
    font-size: 12px;
    font-weight: 800;
    color: #4b4378;
    letter-spacing: 0.02em;
}

.edu-form-note {
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #5f6792;
}

.edu-form-field input,
.edu-form-field textarea,
.edu-form-field select {
    margin: 0;
}

#edu-library-filters {
    grid-template-columns: minmax(220px, 1.35fr) minmax(180px, 1fr) minmax(150px, 0.85fr) minmax(150px, 0.85fr) auto;
    align-items: end;
}

#edu-library-filters .edu-button {
    min-width: 180px;
    width: 100%;
    min-height: 46px;
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 980px) {
    #edu-library-filters {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    #edu-library-filters .edu-button {
        grid-column: 1 / -1;
        max-width: 260px;
    }
}

.edu-profile-form-extended .edu-button {
    grid-column: 1 / -1;
    max-width: 320px;
    margin-top: 18px;
}

.edu-profile-form-extended #edu-profile-feedback {
    grid-column: 1 / -1;
    font-weight: 700;
    color: #4a4672;
    margin-top: -2px;
}

.edu-profile-form-extended input[readonly] {
    background: #eef2ff;
    color: #5c668f;
    cursor: not-allowed;
}

.edu-sparkles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.edu-sparkles span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--edu-secondary);
    opacity: 0.6;
    animation: eduSparkle 5s linear infinite;
}

.edu-sparkles span:nth-child(1) { top: 8%; left: 12%; animation-delay: 0s; }
.edu-sparkles span:nth-child(2) { top: 18%; right: 22%; background: var(--edu-pink); animation-delay: -1s; }
.edu-sparkles span:nth-child(3) { bottom: 28%; left: 8%; background: var(--edu-accent); animation-delay: -2s; }
.edu-sparkles span:nth-child(4) { bottom: 14%; right: 14%; animation-delay: -3s; }

@keyframes eduSparkle {
    0% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { transform: translateY(-14px) scale(1.3); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0.4; }
}

.edu-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.edu-metric {
    background: linear-gradient(135deg, #ffffff, #f5f8ff);
    border-radius: 18px;
    padding: 14px 16px;
    border: 3px dashed rgba(92, 108, 255, 0.35);
    color: #3d3a5c;
    display: grid;
    grid-template-columns: 1fr 56px;
    grid-template-areas:
        "title icon"
        "target icon"
        "done icon";
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
}

.edu-metric strong {
    grid-area: title;
    font-size: 1rem;
    line-height: 1.3;
}

.edu-metric small {
    grid-area: target;
    font-size: 0.86rem;
    font-weight: 700;
    color: #5d6391;
}

.edu-metric em {
    grid-area: done;
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 700;
}

.edu-metric em span {
    font-size: 1.25rem;
    color: #262e61;
}

.edu-metric__icon {
    grid-area: icon;
    justify-self: end;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 2rem;
    line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-variant-emoji: emoji;
    text-rendering: optimizeLegibility;
}

.edu-footer {
    margin-top: 50px;
    padding: 24px 0 40px;
    color: #475569;
    font-size: 14px;
    text-align: center;
}

.edu-auth-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1200;
}

.edu-auth-modal.is-open {
    display: block;
}

.edu-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 38, 0.65);
    backdrop-filter: blur(3px);
}

.edu-auth-modal__panel {
    position: relative;
    width: min(560px, 92vw);
    margin: 2vh auto 0;
    background: #ffffff;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 20px 70px rgba(16, 19, 38, 0.3);
    max-height: 96vh;
    overflow: auto;
    overflow-x: hidden;
}

/* Popup forms: let panel grow instead of internal vertical scrollbars. */
#edu-register-modal .edu-auth-modal__panel,
#edu-login-modal .edu-auth-modal__panel,
#edu-library-modal.is-form-mode .edu-auth-modal__panel,
#edu-library-modal .edu-auth-modal__panel:has(.edu-custom-select) {
    max-height: none;
    overflow: visible;
}

#edu-library-modal .edu-auth-modal__panel {
    width: 90vw;
    height: 90vh;
    max-width: 1400px;
    margin: 5vh auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#edu-library-modal.is-form-mode .edu-auth-modal__panel {
    width: min(1280px, 96vw);
    height: auto;
    max-height: 94vh;
    margin: 1vh auto 0;
    overflow: auto;
    overflow-x: hidden;
}

#edu-library-modal.is-form-mode #edu-library-modal-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

/* html_embed: fundal ilustrat pe tot panoul popup (inclusiv sub header și buton închidere) */
#edu-library-modal:has(#edu-library-modal-content .edu-sm-task) .edu-auth-modal__panel {
    width: min(96vw, 1220px);
    max-width: 1220px;
    height: min(92vh, 920px);
    margin: 4vh auto;
    padding: 18px 22px 16px;
    box-sizing: border-box;
    background-color: rgba(232, 244, 255, 0.97);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.28) 42%, rgba(255, 255, 255, 0) 72%),
        url("assets/images/edu-sm-play-bg.svg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

#edu-library-modal:has(#edu-library-modal-content .edu-sm-task) #edu-library-modal-title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 2px 14px rgba(255, 255, 255, 0.75);
    padding-right: min(46vw, 17rem);
    padding-top: 2px;
}

@media (max-width: 980px) {
    #edu-library-modal:has(#edu-library-modal-content .edu-sm-task) #edu-library-modal-title {
        padding-right: clamp(3.2rem, 18vw, 7rem);
        max-width: calc(100% - clamp(3.2rem, 18vw, 7rem));
        flex: 1 1 auto;
        min-width: 0;
    }
}

#edu-library-modal:has(#edu-library-modal-content .edu-sm-task) #edu-library-modal-content {
    background: transparent;
}

#edu-library-modal:has(#edu-library-modal-content .edu-sm-task) .edu-activity-player-shell {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* html_embed: fundal dedicat, cu identitate vizuala distincta */
#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-auth-modal__panel {
    background-color: rgba(243, 247, 255, 0.98);
    background-image:
        radial-gradient(circle at 14% 16%, rgba(143, 170, 255, 0.28) 0 10%, transparent 34%),
        radial-gradient(circle at 86% 20%, rgba(255, 164, 210, 0.22) 0 11%, transparent 36%),
        radial-gradient(circle at 78% 78%, rgba(120, 226, 209, 0.2) 0 10%, transparent 33%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(238, 246, 255, 0.84) 60%, rgba(246, 240, 255, 0.82) 100%);
    background-size: auto, auto, auto, cover;
    background-position: center, center, center, center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-auth-modal__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.86) 0 6px, transparent 7px),
        radial-gradient(circle at 28% 34%, rgba(255, 255, 255, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 46% 18%, rgba(255, 255, 255, 0.76) 0 5px, transparent 6px),
        radial-gradient(circle at 64% 30%, rgba(255, 255, 255, 0.58) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px),
        radial-gradient(circle at 90% 42%, rgba(255, 255, 255, 0.55) 0 4px, transparent 5px);
    pointer-events: none;
    animation: eduParticleFloat 14s ease-in-out infinite;
    z-index: 0;
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-auth-modal__panel::after {
    content: "";
    position: absolute;
    inset: auto -16% -8% -16%;
    height: 34%;
    background:
        radial-gradient(150% 95% at 22% 48%, rgba(136, 183, 255, 0.38) 0 30%, transparent 70%),
        radial-gradient(150% 95% at 54% 54%, rgba(132, 226, 211, 0.32) 0 32%, transparent 72%),
        radial-gradient(150% 95% at 84% 42%, rgba(255, 176, 214, 0.22) 0 28%, transparent 68%);
    pointer-events: none;
    animation: eduWaveShift 10s ease-in-out infinite;
    z-index: 0;
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) #edu-library-modal-title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.92);
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-auth-modal__close {
    left: auto !important;
    right: 12px !important;
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-library-modal-activity-toolbar {
    left: auto !important;
    right: max(52px, 3.25rem) !important;
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-html-embed-task .edu-sm-head__actions {
    display: none !important;
}

#edu-library-modal:has(#edu-library-modal-content .edu-activity-player-shell--html_embed) .edu-auth-modal__panel > * {
    position: relative;
    z-index: 1;
}

@keyframes eduParticleFloat {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.85; }
    50% { transform: translateY(-8px) translateX(3px); opacity: 1; }
}

@keyframes eduWaveShift {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-1.8%) translateY(-6px); }
}

#edu-library-modal.is-compact-message .edu-auth-modal__panel {
    width: min(520px, 92vw);
    height: auto;
    max-width: 520px;
    margin: 10vh auto 0;
    display: block;
    padding: 18px 18px 16px;
}

#edu-library-modal-content {
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;
    padding-right: 4px;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.edu-complete-hint-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 28, 45, 0.28);
    backdrop-filter: blur(1px);
    z-index: 65;
    pointer-events: none;
}

.edu-complete-hint-layer__card {
    max-width: min(560px, 90%);
    text-align: center;
    padding: 16px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 250, 255, 0.94) 100%);
    border: 1px solid rgba(92, 108, 255, 0.28);
    box-shadow:
        0 12px 34px rgba(31, 41, 55, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.edu-complete-hint-layer__title {
    font-weight: 800;
    color: #1f2a55;
    font-size: 1.18rem;
    margin-bottom: 4px;
}

.edu-complete-hint-layer__text {
    color: #334155;
    font-weight: 600;
}

#edu-library-modal-content .edu-authoring-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e5e9ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#edu-library-modal-content .edu-authoring-form--wide {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

#edu-library-modal-content .edu-authoring-form--xwide {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px 14px;
}

#edu-library-modal-content .edu-authoring-form--xwide .edu-authoring-form__field-span-3 {
    grid-column: span 3;
}

#edu-library-modal-content .edu-authoring-form--xwide .edu-authoring-form__field-span-2 {
    grid-column: span 2;
}

#edu-library-modal-content .edu-authoring-form--xwide .edu-template-upload-field {
    grid-column: span 1;
}

#edu-library-modal-content .edu-activity-prereq-block,
#edu-library-modal-content .edu-activity-dependent-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px 14px;
    align-items: start;
}

#edu-library-modal-content .edu-activity-dependent-block {
    position: relative;
    border-radius: 12px;
}

#edu-library-modal-content .edu-activity-dependent-grid .edu-card-icon-field {
    grid-column: 3 / -1;
    grid-row: auto;
    min-height: 0;
    margin-left: 0;
    padding-left: 0;
    justify-self: start;
    width: 100%;
    align-self: start;
    position: relative;
    z-index: 12;
}

#edu-library-modal-content .edu-activity-dependent-grid .edu-time-limit-field {
    grid-column: span 1;
}

#edu-library-modal-content .edu-activity-dependent-grid .edu-card-icon-field .edu-subject-icon-picker-ui {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* Icon gallery should use the full field area. */
#edu-library-modal-content .edu-card-icon-field .edu-subject-icon-picker-ui {
    width: 100%;
}

#edu-library-modal-content .edu-card-icon-field .edu-subject-icon-gallery {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    min-height: 240px;
    max-height: 240px;
    margin-top: 0;
    z-index: 100050;
    box-shadow: 0 16px 42px rgba(44, 53, 105, 0.18);
}

@media (max-width: 1100px) {
    #edu-library-modal-content .edu-activity-dependent-grid .edu-card-icon-field {
        grid-column: auto;
        width: 100%;
        min-height: 0;
    }
    #edu-library-modal-content .edu-card-icon-field .edu-subject-icon-gallery {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 164px;
        max-height: 164px;
        box-shadow: none;
    }
}

#edu-library-modal-content .edu-activity-dependent-block.is-locked .edu-activity-dependent-grid {
    filter: grayscale(0.35) blur(0.6px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

#edu-library-modal-content .edu-activity-dependent-overlay {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(245, 248, 255, 0.62);
    border: 1px dashed #c6d3ff;
    color: #354378;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

#edu-library-modal-content .edu-activity-dependent-block.is-locked .edu-activity-dependent-overlay {
    display: flex;
}

#edu-library-modal-content .edu-template-upload-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

#edu-library-modal-content .edu-template-upload-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#edu-library-modal-content .edu-template-upload-actions .edu-button {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

#edu-library-modal-content .edu-template-upload-name {
    min-width: 0;
    font-size: 0.9rem;
    color: #3f4b76;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

#edu-library-modal-content .edu-template-example {
    margin: 6px 0 0;
    width: 100%;
    max-height: 180px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid #d7e0ff;
    border-radius: 10px;
    background: #fbfcff;
    color: #36426f;
    font-size: 12px;
    line-height: 1.45;
}

#edu-library-modal-content .edu-authoring-form__lead {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 0.93rem;
    color: #4d5b8e;
    font-weight: 600;
}

#edu-library-modal-content .edu-authoring-form .edu-form-field {
    gap: 6px;
}

#edu-library-modal-content .edu-authoring-form .edu-form-field > span {
    font-size: 12px;
    font-weight: 700;
    color: #384672;
}

#edu-library-modal-content .edu-authoring-form input,
#edu-library-modal-content .edu-authoring-form textarea,
#edu-library-modal-content .edu-authoring-form select {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid #ced8ff;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(77, 92, 170, 0.08);
}

#edu-library-modal-content .edu-authoring-form textarea {
    min-height: 72px;
    resize: vertical;
}

#edu-library-modal-content .edu-authoring-form__field-full {
    grid-column: 1 / -1;
}

#edu-library-modal-content .edu-authoring-form__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

#edu-library-modal-content .edu-authoring-form__actions small {
    margin: 0;
    font-weight: 600;
    color: #3f4b76;
}

#edu-library-modal-content .edu-authoring-inline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#edu-library-modal-content .edu-ai-preview-field {
    margin-top: 2px;
}

#edu-library-modal-content .edu-ai-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1.25fr);
    gap: 14px;
    align-items: stretch;
}

#edu-library-modal-content .edu-ai-top-grid__left,
#edu-library-modal-content .edu-ai-top-grid__right {
    margin: 0;
}

#edu-library-modal-content .edu-ai-top-grid__right,
#edu-library-modal-content .edu-ai-manual-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#edu-library-modal-content .edu-ai-upload-field .edu-authoring-form__hint {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: #566389;
    line-height: 1.4;
}

#edu-library-modal-content .edu-ai-preview-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    flex: 1 1 auto;
}

#edu-library-modal-content .edu-ai-top-grid__left textarea[name="html_ai_style"] {
    min-height: 210px;
}

#edu-library-modal-content .edu-ai-game-preview-box {
    position: relative;
    min-height: clamp(240px, 34vh, 360px);
    height: clamp(240px, 34vh, 360px);
    border: 1px dashed #c7d3f3;
    border-radius: 14px;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
    overflow: hidden;
}

#edu-library-modal-content .edu-ai-game-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    height: 100%;
    padding: 14px;
    text-align: center;
    color: #566389;
    font-weight: 600;
}

#edu-library-modal-content .edu-ai-game-preview-empty.is-hidden {
    display: none !important;
}

#edu-library-modal-content .edu-ai-game-preview-frame {
    width: 100%;
    min-height: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    display: block;
}

@media (max-width: 980px) {
    #edu-library-modal-content .edu-ai-top-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

#edu-library-modal-content .edu-authoring-inline-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #384672;
}

#edu-library-modal-content .edu-authoring-inline-check > span {
    font: inherit;
    color: inherit;
}

#edu-library-modal-content .edu-time-limit-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

#edu-library-modal-content [data-time-limit-row] input[type="number"] {
    width: 96px;
    min-width: 96px;
}

.edu-authoring-list {
    margin: 0 0 24px;
    padding-left: 18px;
    color: #39456e;
}

.edu-authoring-list li {
    margin: 0 0 10px;
    line-height: 1.4;
}

.edu-authoring-empty {
    margin: 0 0 24px;
    color: #5a658f;
    font-weight: 600;
}

.edu-authoring-table {
    margin-bottom: 24px;
}

.edu-authoring-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 8px 0 28px;
}

.edu-authoring-item-card {
    border: 1px solid #dfe5ff;
    border-radius: 14px;
    background: #fff;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    min-height: 174px;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.edu-authoring-item-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    border-color: #95adff;
    box-shadow: 0 18px 44px rgba(60, 70, 120, 0.16);
}

.edu-authoring-item-card h5 {
    margin: 0 0 10px;
    font-size: 0.98rem;
    color: #253260;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.edu-authoring-item-card p {
    margin: 0 0 14px;
    color: #56608a;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.edu-authoring-item-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 20;
    background: transparent;
    box-shadow: none;
}

.edu-authoring-subject-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    justify-content: stretch;
}

.edu-authoring-activity-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    justify-content: stretch;
}

.edu-authoring-learning-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    justify-content: stretch;
}

.edu-authoring-subject-card {
    width: 100%;
    max-width: none;
    min-height: 288px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
}

.edu-authoring-subject-card .edu-feature-card__emoji {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    font-size: 2.5rem;
    line-height: 1;
    border-radius: 20px;
}

.edu-authoring-subject-card h3,
.edu-authoring-subject-card p {
    width: 100%;
}

.edu-authoring-subject-card .edu-authoring-item-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 8px;
}

.edu-authoring-activity-card {
    width: 100%;
    max-width: none;
    min-height: 260px;
    height: 260px;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    gap: 8px;
    cursor: default;
    overflow: hidden;
}

.edu-authoring-learning-path-card {
    width: 100%;
    max-width: none;
    min-height: 290px;
    height: 290px;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    gap: 8px;
    cursor: default;
    overflow: hidden;
    background: linear-gradient(160deg, #f3f0ff, #ebe6ff);
}

.edu-authoring-learning-path-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    border-color: #a998ff;
    box-shadow: 0 18px 44px rgba(78, 58, 146, 0.18);
}

.edu-authoring-learning-path-card::after {
    background: rgba(122, 99, 228, 0.18);
}

.edu-authoring-learning-path-card .edu-choice-bubble {
    background: #efe9ff;
    color: #50389f;
    width: 74px;
    height: 74px;
    font-size: 38px;
}

.edu-authoring-learning-path-card .edu-choice-content strong {
    -webkit-line-clamp: 2;
}

.edu-authoring-learning-path-card .edu-choice-subtitle {
    -webkit-line-clamp: 1;
    padding-top: 2px;
}

.edu-authoring-learning-path-card .edu-authoring-item-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    align-self: auto;
}

.edu-authoring-learning-path-card .edu-authoring-item-card__actions .edu-button {
    min-width: 0;
    flex: 0 0 calc(50% - 4px);
    width: calc(50% - 4px);
    padding: 8px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-authoring-activity-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    border-color: #95adff;
    box-shadow: 0 18px 44px rgba(60, 70, 120, 0.16);
}

.edu-authoring-activity-card .edu-authoring-item-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 8px;
    align-self: auto;
}

.edu-authoring-activity-card .edu-authoring-item-card__actions .edu-button {
    min-width: 0;
    flex: 1 1 0;
    width: auto;
    padding: 8px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-authoring-subject-card .edu-authoring-item-card__actions .edu-button {
    min-width: 0;
    flex: 1 1 0;
    width: auto;
    padding: 8px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-authoring-activity-card .edu-choice-content strong {
    -webkit-line-clamp: 2;
}

.edu-authoring-activity-card .edu-choice-subtitle {
    -webkit-line-clamp: 1;
}

.edu-authoring-item-card__actions .edu-button {
    position: relative;
    z-index: 30;
}

.edu-authoring-item-card__actions .edu-button:hover,
.edu-authoring-item-card__actions .edu-button:focus-visible {
    transform: translateY(-2px);
    z-index: 40;
}

@media (max-width: 1200px) {
    .edu-authoring-card-grid,
    .edu-authoring-subject-grid,
    .edu-authoring-activity-grid,
    .edu-authoring-learning-path-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .edu-authoring-card-grid,
    .edu-authoring-subject-grid,
    .edu-authoring-activity-grid,
    .edu-authoring-learning-path-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 740px) {
    .edu-authoring-card-grid,
    .edu-authoring-subject-grid,
    .edu-authoring-activity-grid,
    .edu-authoring-learning-path-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    .edu-authoring-subject-card,
    .edu-authoring-activity-card,
    .edu-authoring-learning-path-card {
        width: 100%;
        max-width: none;
    }

    .edu-authoring-activity-card .edu-authoring-item-card__actions .edu-button,
    .edu-authoring-subject-card .edu-authoring-item-card__actions .edu-button,
    .edu-authoring-learning-path-card .edu-authoring-item-card__actions .edu-button {
        font-size: 0.92rem;
        padding: 8px 4px;
    }
}

.edu-subject-icon-picker-ui {
    display: grid;
    gap: 10px;
}

.edu-subject-icon-picker-ui__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.edu-subject-icon-picker-ui__preview {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #ced8ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #fff;
}

.edu-authoring-activity-card {
    position: relative;
}

.edu-choice-status-corner {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d4dcff;
    background: #f3f6ff;
    color: #3a4a84;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(65, 80, 148, 0.16);
    pointer-events: none;
}

.edu-choice-status-corner.is-published {
    border-color: #b7ebcb;
    background: #e9f9f0;
    color: #167a3f;
}

.edu-choice-status-corner.is-draft {
    border-color: #ffd8b0;
    background: #fff3e7;
    color: #b85a00;
}

.edu-subject-icon-gallery {
    max-height: 240px;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid #d8e1ff;
    border-radius: 12px;
    background: #f9fbff;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.edu-subject-icon-cats {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.edu-subject-icon-cat {
    border: 1px solid #ced8ff;
    background: #fff;
    color: #3e4a76;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}

.edu-subject-icon-cat.is-active {
    border-color: #6d7cff;
    color: #33418a;
    background: #eef2ff;
    box-shadow: 0 0 0 2px rgba(109, 124, 255, 0.14);
}

.edu-subject-icon-gallery[hidden] {
    display: none !important;
}

.edu-subject-icon-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: 38px;
    height: 38px;
    max-height: 38px;
    border: 1px solid #ced8ff;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0 0 4px;
    font-size: 14px;
}

.edu-subject-icon-option {
    border: 1px solid #d3dbff;
    border-radius: 10px;
    height: 36px;
    background: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.edu-subject-icon-grid {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 7px;
    align-content: start;
    overscroll-behavior: contain;
}

.edu-subject-icon-option:hover {
    border-color: #6d7cff;
    box-shadow: 0 0 0 2px rgba(109, 124, 255, 0.14);
}

.edu-authoring-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 46px;
}

.edu-authoring-jump-nav .edu-button {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.98rem;
    font-weight: 800;
    border-radius: 12px;
}

.edu-authoring-jump-nav .edu-button.is-active {
    background: linear-gradient(135deg, #5f6fff 0%, #7f55ff 52%, #5b66ff 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(96, 106, 255, 0.28);
}

.edu-authoring-jump-nav .edu-button.is-active:hover {
    color: #fff;
}

.edu-journal-jump-nav {
    margin-bottom: 30px;
}

.edu-authoring-section {
    margin-bottom: 58px;
    scroll-margin-top: 88px;
}

.edu-authoring-section[hidden] {
    display: none !important;
}

.edu-authoring-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.edu-authoring-section__head .edu-title-with-icon {
    margin: 0;
}

.edu-authoring-section:last-child {
    margin-bottom: 16px;
}

.edu-authoring-section > .edu-button {
    margin-top: 22px;
}

.edu-teacher-reports {
    display: grid;
    gap: 16px;
    padding: 6px;
    background: linear-gradient(180deg, #f8faff 0%, #f4f7ff 100%);
    border-radius: 16px;
}

.edu-reports-toolbar,
.edu-reports-inline-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.edu-reports-toolbar label,
.edu-reports-inline-filters label {
    display: grid;
    gap: 4px;
    color: #31406f;
    font-size: 0.86rem;
    font-weight: 600;
}

.edu-reports-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
}

.edu-reports-toolbar input,
.edu-reports-toolbar select,
.edu-reports-inline-filters input,
.edu-reports-inline-filters select {
    min-height: 38px;
    border: 1px solid #d4ddff;
    border-radius: 10px;
    padding: 8px 10px;
}

.edu-report-block {
    border: 1px solid #dfe7ff;
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(32, 68, 164, 0.08);
}

.edu-report-block h5 {
    margin: 0 0 10px;
    color: #23346e;
}

.edu-reports-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.edu-reports-kpis article {
    border: 1px solid #d7e1ff;
    border-radius: 12px;
    background: linear-gradient(165deg, #ffffff 0%, #f5f8ff 100%);
    padding: 12px;
    display: grid;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.edu-reports-kpis article::after {
    content: "";
    position: absolute;
    right: -22px;
    top: -22px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(116, 138, 255, 0.25), rgba(116, 138, 255, 0));
}

.edu-reports-kpis article span {
    color: #4b5b8d;
    font-size: 0.82rem;
}

.edu-reports-kpis article strong {
    font-size: 1.35rem;
    color: #1d2c65;
}

.edu-reports-kpis--premium {
    gap: 12px;
}

.edu-kpi-card {
    border: 1px solid #d7e1ff;
    border-radius: 12px;
    background: linear-gradient(160deg, #ffffff 0%, #f4f7ff 100%);
    padding: 10px 12px 8px;
    box-shadow: 0 8px 18px rgba(41, 72, 160, 0.1);
    position: relative;
}

.edu-kpi-card__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.edu-kpi-icon {
    width: auto;
    height: auto;
    display: inline-block;
    line-height: 0.9;
    font-size: 3.6rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 4px 7px rgba(74, 104, 194, 0.18));
    transform: translateZ(0);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.52),
        0 2px 0 rgba(33, 54, 115, 0.12),
        0 3px 0 rgba(33, 54, 115, 0.08),
        0 10px 14px rgba(33, 54, 115, 0.26);
}

.edu-kpi-icon.i-purple { color: #6a5cff; }
.edu-kpi-icon.i-blue { color: #3b82f6; }
.edu-kpi-icon.i-green { color: #10b981; }
.edu-kpi-icon.i-orange { color: #f59e0b; }

.edu-kpi-icon.i-purple { filter: drop-shadow(0 5px 10px rgba(106, 92, 255, 0.28)); }
.edu-kpi-icon.i-blue { filter: drop-shadow(0 5px 10px rgba(59, 130, 246, 0.28)); }
.edu-kpi-icon.i-green { filter: drop-shadow(0 5px 10px rgba(16, 185, 129, 0.28)); }
.edu-kpi-icon.i-orange { filter: drop-shadow(0 5px 10px rgba(245, 158, 11, 0.28)); }

.edu-kpi-head {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.edu-kpi-head span {
    font-size: 0.74rem;
    color: #5a6b9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edu-kpi-head strong {
    font-size: 1.55rem;
    line-height: 1.05;
    color: #24386f;
}

.edu-kpi-delta {
    position: absolute;
    top: -12px;
    right: -10px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    z-index: 2;
    pointer-events: none;
}

.edu-kpi-delta.is-up {
    color: #0f8a52;
    background: radial-gradient(circle at 36% 34%, rgba(255,255,255,0.92) 0%, rgba(227,255,241,0.92) 44%, rgba(194,246,222,0.9) 100%);
    box-shadow: 0 18px 34px rgba(117, 224, 176, 0.34), 0 6px 16px rgba(117, 224, 176, 0.2);
}

.edu-kpi-delta.is-down {
    color: #c23838;
    background: radial-gradient(circle at 36% 34%, rgba(255,255,255,0.92) 0%, rgba(255,236,236,0.92) 44%, rgba(255,206,206,0.9) 100%);
    box-shadow: 0 18px 34px rgba(255, 157, 157, 0.3), 0 6px 16px rgba(255, 157, 157, 0.2);
}

.edu-kpi-card small {
    display: block;
    margin: 6px 0 4px;
    font-size: 0.72rem;
    color: #6276aa;
}

.edu-kpi-spark-wrap {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 24px);
    max-width: none;
    margin: 6px 0 -8px;
    padding: 0;
}

.edu-kpi-spark {
    width: 100% !important;
    height: 32px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(76, 108, 212, 0.18));
}

.edu-reports-kpis--premium .edu-kpi-icon {
    font-size: 56px !important;
}

.edu-reports-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.edu-reports-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.edu-report-card {
    border: 1px solid #dfe7ff;
    border-radius: 12px;
    background: linear-gradient(170deg, #ffffff 0%, #f8fbff 100%);
    padding: 12px;
    overflow: hidden;
    box-shadow: 0 5px 14px rgba(40, 76, 168, 0.08);
    min-width: 0;
}

.edu-report-card h6 {
    margin: 0 0 10px;
    padding: 0 2px;
    color: #24376f;
    font-size: 0.89rem;
}

.edu-mini-chart {
    width: 100%;
    height: 140px;
    display: block;
}

.edu-plotly-host {
    width: 100%;
    height: 260px;
    min-height: 260px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7ff 100%);
    border: 1px solid #e3eaff;
    overflow: clip;
}

.edu-plotly-host--compact {
    height: 210px;
    min-height: 210px;
}

.edu-report-legend {
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid #dce5ff;
    border-radius: 10px;
    background: #f8fbff;
    display: grid;
    gap: 4px;
}

.edu-report-legend strong {
    font-size: 0.8rem;
    color: #253873;
}

.edu-report-legend span {
    font-size: 0.75rem;
    color: #445687;
}

.edu-reports-tabs .edu-button {
    min-width: 144px;
}

.edu-report-table th {
    color: #2e427f;
    font-weight: 700;
}

.edu-report-table td {
    color: #3d4f82;
}

.edu-report-table {
    width: 100%;
    table-layout: fixed;
}

.edu-report-table th,
.edu-report-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.edu-faux3d-bars {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

.edu-faux3d-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.35fr) minmax(90px, 2.65fr) minmax(70px, auto);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.edu-faux3d-label,
.edu-faux3d-value {
    font-size: 0.78rem;
    color: #3f4f80;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.edu-faux3d-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.15;
    max-height: 2.3em;
}

.edu-faux3d-value {
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 8px;
}

.edu-faux3d-track {
    height: 16px;
    border-radius: 999px;
    background: #edf2ff;
    border: 1px solid #dfe7ff;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.edu-faux3d-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
    box-shadow: 0 6px 10px rgba(64, 92, 180, 0.22);
}

.edu-faux3d-bar::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 1px;
    width: 8px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0));
}

.edu-faux3d-c1 { background: linear-gradient(180deg, #7a6dff, #5c6cff); }
.edu-faux3d-c2 { background: linear-gradient(180deg, #9a6dff, #8b5cf6); }
.edu-faux3d-c3 { background: linear-gradient(180deg, #45d7a9, #2dd4a3); }
.edu-faux3d-c4 { background: linear-gradient(180deg, #69b6ff, #4d9cff); }
.edu-faux3d-c5 { background: linear-gradient(180deg, #f9b24d, #f59e0b); }

.edu-progress-list {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.edu-progress-item {
    display: grid;
    gap: 5px;
}

.edu-progress-item__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 0.78rem;
    color: #3c4d80;
    min-width: 0;
}

.edu-progress-item__head span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.edu-progress-item__head strong {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 8px;
}

.edu-progress-item__head strong {
    color: #24386f;
}

.edu-progress-item__track {
    height: 12px;
    border-radius: 999px;
    background: #eaf0ff;
    border: 1px solid #d9e3ff;
    overflow: hidden;
}

.edu-progress-item__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    box-shadow: 0 4px 8px rgba(66, 93, 180, 0.25);
}


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

.edu-heat-cell {
    height: 8px;
    border-radius: 2px;
    background: #eef2ff;
}

.edu-heat-1 { background: #dbeafe; }
.edu-heat-2 { background: #93c5fd; }
.edu-heat-3 { background: #60a5fa; }
.edu-heat-4 { background: #2563eb; }

.edu-rbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 7px;
}

.edu-rbar span {
    font-size: 0.78rem;
    color: #3f4f7d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-rbar em {
    display: block;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5c6cff, #ff5da2);
    color: #fff;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
    padding: 3px 8px;
}

.edu-report-table .edu-progress-mini {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e7ecff;
}

.edu-report-table .edu-progress-mini span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2dd4a3, #5c6cff);
}

.edu-student-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.edu-weekly-row {
    border: 1px solid #e7ecff;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 8px;
}

.edu-spark {
    width: 100%;
    height: 40px;
}

.edu-insight {
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius: 8px;
}

.edu-insight.is-warning { background: #fff7ed; color: #9a3412; }
.edu-insight.is-info { background: #eff6ff; color: #1d4ed8; }
.edu-insight.is-success { background: #ecfdf5; color: #065f46; }

.edu-reports-footer-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.edu-chart-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(24, 32, 61, 0.95);
    color: #fff;
    font-size: 12px;
    box-shadow: 0 8px 24px rgba(8, 12, 24, 0.28);
    max-width: 260px;
}

.edu-reports-skeleton {
    padding: 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef3ff 25%, #f8fbff 50%, #eef3ff 75%);
    background-size: 240% 100%;
    animation: eduReportPulse 1.5s ease-in-out infinite;
    color: #52639d;
}

@keyframes eduReportPulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.edu-loading-shell {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e1e8ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #fcfdff 0%, #f4f7ff 100%);
}

.edu-loading-shell--cards {
    padding: 10px;
}

.edu-loading-shape {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eeff;
}

.edu-loading-shape::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
    animation: edu-loading-shimmer 1.35s ease-in-out infinite;
}

.edu-loading-shape--title {
    width: min(56%, 320px);
    height: 18px;
}

.edu-loading-shape--line {
    width: 100%;
    height: 12px;
}

.edu-loading-shape--line.is-short {
    width: min(72%, 500px);
}

.edu-loading-shape-row {
    display: flex;
    gap: 8px;
}

.edu-loading-shape--dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.edu-loading-shape--pill {
    width: min(46%, 220px);
    height: 14px;
}

.edu-loading-shape-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.edu-loading-shape--card {
    height: 88px;
    border-radius: 14px;
}

.edu-card.edu-card--hero.is-role-loading > *:not(.edu-sparkles):not(.edu-hero-loading-shell) {
    opacity: 0;
}

.edu-card.edu-card--hero.is-role-loading .edu-sparkles {
    opacity: 0.15;
}

.edu-hero-loading-shell {
    position: absolute;
    left: clamp(16px, 4vw, 44px);
    top: clamp(20px, 7vh, 58px);
    width: min(52%, 540px);
    display: grid;
    gap: 12px;
    z-index: 3;
    pointer-events: none;
}

@keyframes edu-loading-shimmer {
    100% { transform: translateX(100%); }
}

body.edu-homepage-loading {
    overflow: hidden;
}

.edu-homepage-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.edu-homepage-loader.is-open {
    opacity: 1;
    visibility: visible;
}

.edu-homepage-loader__fireworks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.edu-homepage-loader__particle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s, 4px);
    height: var(--s, 4px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, var(--c, #ffd54f) 50%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--c, #ffd54f) 74%, white 26%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    animation: edu-home-particle-burst 1.15s ease-out forwards;
}

.edu-homepage-loader__inner {
    position: relative;
    z-index: 2;
    width: min(86vw, 560px);
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.edu-homepage-loader__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.3px;
    background: linear-gradient(145deg, #5e6bff 0%, #7f4fe0 45%, #d95aa8 100%);
    box-shadow: 0 8px 20px rgba(109, 96, 230, 0.34);
}

.edu-homepage-loader__word {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: clamp(28px, 4.2vw, 42px);
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #24417c;
}

.edu-homepage-loader__letter {
    display: inline-block;
    animation: edu-home-letter-snake 1.15s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
    text-shadow: 0 2px 8px rgba(83, 95, 175, 0.16);
}

.edu-homepage-loader__letter.is-edu {
    color: #4f64dc;
}

.edu-homepage-loader__letter.is-aventura {
    color: #d45fa7;
}

.edu-inline-game-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(circle at 20% 18%, rgba(109, 92, 255, 0.28), transparent 48%), radial-gradient(circle at 84% 28%, rgba(245, 158, 11, 0.24), transparent 52%), linear-gradient(150deg, rgba(255, 250, 252, 0.96), rgba(244, 248, 255, 0.94));
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.edu-inline-game-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.edu-inline-game-loader__fireworks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.edu-inline-game-loader__inner {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    transform: scale(0.95);
}

@keyframes edu-home-letter-snake {
    0%, 100% { transform: translateY(0); opacity: 0.86; }
    50% { transform: translateY(-8px); opacity: 1; }
}

@keyframes edu-home-particle-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.9);
    }
}

.edu-ai-generation-loader {
    z-index: 100000;
}

.edu-ai-generation-loader__inner {
    max-width: min(1120px, calc(100vw - 26px));
    width: min(1120px, calc(100vw - 26px));
    gap: 6px;
    justify-content: center;
    padding-left: 24px;
    flex-wrap: nowrap;
}

.edu-ai-generation-loader__stack {
    flex: 1 1 auto;
    min-width: 320px;
    max-width: min(920px, calc(100vw - 230px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.edu-ai-generation-loader__message {
    width: 100%;
    min-height: 150px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    border: 1px solid rgba(124, 77, 255, 0.18);
    box-shadow: 0 12px 34px rgba(49, 34, 84, 0.12);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.edu-ai-generation-loader__type {
    margin: 0;
    white-space: pre-wrap;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.52;
    color: #2f2a4d;
    text-align: center;
    max-width: 96%;
}

.edu-ai-generation-loader .edu-homepage-loader__mark {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 20px;
    transform: translateX(0);
    box-shadow: 0 12px 28px rgba(109, 96, 230, 0.34);
}

.edu-ai-generation-loader__type::after {
    content: "|";
    margin-left: 2px;
    color: #7c4dff;
    animation: edu-ai-caret-blink 0.8s steps(1, end) infinite;
}

.edu-ai-generation-loader__inline-feedback {
    width: 100%;
    margin-top: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 241, 241, 0.94);
    border: 1px solid rgba(211, 90, 90, 0.28);
    color: #7a1f1f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.edu-ai-generation-loader__timer {
    position: fixed;
    left: 22px;
    bottom: 18px;
    z-index: 100001;
    min-width: 106px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(25, 20, 46, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: clamp(22px, 2.7vw, 30px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-align: center;
}

@keyframes edu-ai-caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

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

@media (max-width: 760px) {
    .edu-reports-grid-3,
    .edu-reports-grid-2,
    .edu-reports-kpis { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .edu-authoring-section__head {
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
    #edu-library-modal-content .edu-authoring-form,
    #edu-library-modal-content .edu-authoring-form--wide,
    #edu-library-modal-content .edu-authoring-form--xwide {
        grid-template-columns: 1fr;
    }
    #edu-library-modal-content .edu-authoring-form--xwide .edu-authoring-form__field-span-3,
    #edu-library-modal-content .edu-authoring-form--xwide .edu-authoring-form__field-span-2,
    #edu-library-modal-content .edu-authoring-form--xwide .edu-template-upload-field {
        grid-column: 1 / -1;
    }
    #edu-library-modal-content .edu-activity-prereq-block,
    #edu-library-modal-content .edu-activity-dependent-grid {
        grid-template-columns: 1fr;
    }
    #edu-library-modal-content .edu-template-upload-actions {
        width: 100%;
    }
    .edu-subject-icon-picker-ui__row {
        flex-wrap: wrap;
    }
    #edu-library-modal-content .edu-time-limit-inline {
        flex-wrap: wrap;
    }
}

#edu-library-modal.is-compact-message #edu-library-modal-content {
    overflow: visible;
    padding-right: 0;
    padding-top: 8px;
}

#edu-library-assign-area:empty {
    display: none;
    margin: 0;
}

.edu-unavailable-card {
    text-align: center;
    border: 3px solid #a6c5ff;
    background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 100%);
    border-radius: 24px;
    padding: 30px 24px 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

.edu-unavailable-card__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    background: linear-gradient(145deg, #fff 0%, #eef4ff 100%);
    box-shadow:
        inset 0 -4px 0 rgba(92, 108, 255, 0.12),
        0 10px 24px rgba(92, 108, 255, 0.18),
        0 0 0 3px rgba(255, 255, 255, 0.92);
}

.edu-unavailable-card h3 {
    margin: 0 0 10px;
    font-size: clamp(24px, 4vw, 34px);
    color: #1f2a60;
}

.edu-unavailable-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #3f4f8e;
    font-weight: 700;
}

.edu-unavailable-card__button {
    margin-top: 18px;
}

.edu-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    background: rgba(18, 24, 48, 0.42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.edu-result-overlay.is-open {
    opacity: 1;
}

.edu-result-card {
    position: relative;
    width: min(560px, 92vw);
    border-radius: 24px;
    background: #fff;
    padding: 26px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    transform: scale(0.92);
    transition: transform 0.2s ease;
}

.edu-result-overlay.is-open .edu-result-card {
    transform: scale(1);
}

.edu-result-overlay.is-success .edu-result-card {
    border: 3px solid #ffd46e;
    background: linear-gradient(180deg, #fffef3 0%, #ffffff 100%);
}

.edu-result-overlay.is-retry .edu-result-card {
    border: 3px solid #a6c5ff;
    background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 100%);
}

.edu-badge-overlay {
    z-index: 2150;
}

.edu-badge-card {
    border: 3px solid #ffd46e;
    background: linear-gradient(180deg, #fff7d6 0%, #fff2fb 100%);
}

.edu-badge-card__icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 10px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 26px rgba(34, 28, 78, 0.12);
}

.edu-badge-card__title {
    display: block;
    margin-top: 12px;
    font-size: clamp(1.2rem, 2.7vw, 1.6rem);
    color: #2d2a66;
}

.edu-badge-card__goal {
    display: block;
    margin-top: 8px;
    color: #4d4a78;
    font-weight: 700;
}

.edu-result-card h3 {
    margin: 6px 0 8px;
    font-size: clamp(26px, 4vw, 42px);
    color: #1f2a60;
}

.edu-result-card p {
    margin: 0;
    font-size: 18px;
    color: #3f4f8e;
    font-weight: 700;
}

.edu-result-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: #eef2ff;
    color: transparent;
    font-size: 0;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
}

.edu-result-close::before {
    content: "×";
    color: #334a8f;
    font-size: 28px;
    line-height: 1;
    transform: translateY(-6px);
}

.edu-result-close:hover,
.edu-result-close:focus {
    transform: none;
}

.edu-result-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.edu-result-login-hint {
    margin-top: 10px !important;
    font-size: 15px !important;
    color: #445895 !important;
    font-weight: 600 !important;
}

.edu-result-stars {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.edu-result-stars span {
    font-size: 30px;
    animation: eduResultStarJump 0.9s ease-in-out infinite;
}

.edu-result-stars span:nth-child(2) { animation-delay: 0.1s; }
.edu-result-stars span:nth-child(3) { animation-delay: 0.2s; }
.edu-result-stars span:nth-child(4) { animation-delay: 0.3s; }
.edu-result-stars span:nth-child(5) { animation-delay: 0.4s; }

@keyframes eduResultStarJump {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-9px) scale(1.12); }
}

.edu-auth-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 6;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 1;
    padding: 0;
    box-shadow: none;
}

.edu-auth-modal__close::before {
    content: "×";
    color: #64748b;
    font-size: 32px;
    line-height: 1;
    transform: translateY(-6px);
}

.edu-auth-modal__close:hover,
.edu-auth-modal__close:focus {
    transform: none;
}

.edu-auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.edu-auth-tab {
    background: #eef2ff;
    color: #27306d;
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: none;
}

.edu-auth-tab.is-active {
    background: linear-gradient(90deg, var(--edu-primary), var(--edu-pink));
    color: #fff;
}

.edu-auth-pane {
    display: none;
}

.edu-auth-pane.is-active {
    display: block;
}

.edu-register-form,
.edu-auth-pane form[name="loginform"] {
    display: grid;
    gap: 10px;
}

#edu-register-form .edu-form-field {
    display: grid;
    grid-template-columns: minmax(145px, 40%) minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
}

#edu-register-form .edu-form-field > span {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.edu-auth-pane input[type="text"],
.edu-auth-pane input[type="email"],
.edu-auth-pane input[type="password"],
.edu-auth-pane select {
    width: 100%;
    margin-bottom: 2px;
}

.edu-register-form select,
.edu-form-field select,
.edu-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 46px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #5b6de2 50%),
        linear-gradient(135deg, #5b6de2 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 4px),
        calc(100% - 14px) calc(50% - 4px);
    background-size: 9px 9px, 9px 9px;
    background-repeat: no-repeat;
}

.edu-register-form select:hover,
.edu-form-field select:hover,
.edu-select:hover,
.edu-register-form select:focus,
.edu-form-field select:focus,
.edu-select:focus {
    background-image:
        linear-gradient(45deg, transparent 50%, #5b6de2 50%),
        linear-gradient(135deg, #5b6de2 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 4px),
        calc(100% - 14px) calc(50% - 4px);
    background-size: 9px 9px, 9px 9px;
    background-repeat: no-repeat;
}

.edu-register-form select option,
.edu-form-field select option,
.edu-select option {
    color: #2e3a68;
    background: #ffffff;
}

/* Keep a consistent visible dropdown arrow across platform selects. */
select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 46px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #5b6de2 50%),
        linear-gradient(135deg, #5b6de2 50%, transparent 50%) !important;
    background-position:
        calc(100% - 22px) calc(50% - 4px),
        calc(100% - 14px) calc(50% - 4px) !important;
    background-size: 9px 9px, 9px 9px !important;
    background-repeat: no-repeat !important;
}

/* Final visual unification: every single-select matches School field style. */
select:not([multiple]) {
    min-height: 46px !important;
    border: 2px solid #d8e3ff !important;
    border-radius: 14px !important;
    padding: 11px 46px 11px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #243160 !important;
    background-color: #fff !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #5b6de2 50%),
        linear-gradient(135deg, #5b6de2 50%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    background-position:
        calc(100% - 22px) calc(50% - 4px),
        calc(100% - 14px) calc(50% - 4px),
        0 0 !important;
    background-size:
        9px 9px,
        9px 9px,
        100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 5px 14px rgba(91, 93, 240, 0.07) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease !important;
}

select:not([multiple]):hover {
    border-color: #bfceff !important;
    box-shadow: 0 8px 18px rgba(91, 93, 240, 0.12) !important;
}

select:not([multiple]):focus {
    border-color: var(--edu-primary) !important;
    box-shadow: 0 0 0 4px rgba(91, 93, 240, 0.12), 0 12px 26px rgba(91, 93, 240, 0.16) !important;
    transform: translateY(-1px);
}

.edu-custom-select {
    position: relative;
    width: 100%;
}

.edu-custom-select__native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.edu-custom-select__trigger {
    display: block !important;
    width: 100%;
    min-height: 46px;
    border: 2px solid #d8e3ff;
    border-radius: 14px;
    padding: 11px 46px 11px 14px;
    font-family: var(--edu-font) !important;
    font-size: 16px;
    font-weight: 400 !important;
    line-height: 1.2;
    color: #243160;
    text-align: left !important;
    background:
        linear-gradient(45deg, transparent 50%, #5b6de2 50%) calc(100% - 22px) calc(50% - 4px) / 9px 9px no-repeat,
        linear-gradient(135deg, #5b6de2 50%, transparent 50%) calc(100% - 14px) calc(50% - 4px) / 9px 9px no-repeat,
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 5px 14px rgba(91, 93, 240, 0.07);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.edu-custom-select__label {
    display: block;
    font: inherit;
    font-weight: 400 !important;
    text-align: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-custom-select__trigger:hover {
    border-color: #bfceff;
    box-shadow: 0 8px 18px rgba(91, 93, 240, 0.12);
}

.edu-custom-select.is-open .edu-custom-select__trigger,
.edu-custom-select__trigger:focus-visible {
    outline: none;
    border-color: var(--edu-primary);
    box-shadow: 0 0 0 4px rgba(91, 93, 240, 0.12), 0 12px 26px rgba(91, 93, 240, 0.16);
    transform: translateY(-1px);
}

.edu-custom-select.is-disabled .edu-custom-select__trigger {
    opacity: 0.65;
    cursor: not-allowed;
}

.edu-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 2200;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid #b9c8ff;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(46, 58, 104, 0.16);
}

.edu-custom-select__item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    text-align: left;
    padding: 7px 12px;
    font: inherit;
    font-size: 16px;
    line-height: 1.25;
    color: #243160;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.edu-custom-select__item:hover,
.edu-custom-select__item:focus-visible {
    background: #e8efff;
    outline: none;
}

.edu-custom-select__item.is-active {
    background: #2b69c8;
    color: #ffffff;
}

#edu-register-child-school,
#edu-register-teacher-school,
#edu-profile-school,
#edu-profile-teacher-school {
    padding-right: 46px;
    background-image:
        linear-gradient(45deg, transparent 50%, #5b6de2 50%),
        linear-gradient(135deg, #5b6de2 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 4px),
        calc(100% - 14px) calc(50% - 4px);
    background-size: 9px 9px, 9px 9px;
    background-repeat: no-repeat;
}

#edu-profile-school[readonly],
#edu-profile-teacher-school[readonly] {
    cursor: not-allowed;
    background-color: #f5f7ff;
}

.edu-school-autocomplete {
    position: fixed;
    z-index: 2200;
    min-width: 320px;
    max-width: min(92vw, 920px);
    max-height: min(46vh, 360px);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #b9c8ff;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(46, 58, 104, 0.16);
    padding: 2px 0;
}

.edu-school-autocomplete__item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    text-align: left;
    padding: 8px 12px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.25;
    color: #243160;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
}

.edu-school-autocomplete__item:hover,
.edu-school-autocomplete__item:focus-visible {
    background: #e8efff;
    outline: none;
}

.edu-school-autocomplete__item.is-active {
    background: #2b69c8;
    color: #ffffff;
}

@media (max-width: 720px) {
    #edu-register-form .edu-form-field {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
        align-items: stretch;
    }
}

.edu-auth-pane .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.edu-auth-pane .login-submit {
    margin: 0;
}

.edu-auth-pane .login-submit input {
    width: 100%;
}

.edu-auth-feedback {
    display: none;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.edu-auth-feedback.is-error {
    display: block;
    color: #8b1e3f;
    background: rgba(255, 84, 126, 0.12);
    border: 1px solid rgba(255, 84, 126, 0.32);
}

.edu-auth-feedback.is-success {
    display: block;
    color: #1b7f57;
    background: rgba(40, 180, 120, 0.12);
    border: 1px solid rgba(40, 180, 120, 0.28);
}

.edu-table {
    width: 100%;
    border-collapse: collapse;
}

.edu-table th,
.edu-table td {
    border-bottom: 1px solid #e6edff;
    padding: 10px 8px;
    text-align: left;
}

.edu-activity-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.edu-activity-status.is-done {
    background: rgba(40, 180, 120, 0.14);
    color: #1b7f57;
}

.edu-activity-status.is-pending {
    background: rgba(95, 82, 177, 0.12);
    color: #5f52b1;
}

.edu-activity-back-link {
    display: inline-flex;
    margin-bottom: 22px;
}

.edu-activity-plan-title {
    margin: 0 0 14px;
}

.edu-activity-plan-lead {
    margin: 0 0 30px;
}

.edu-plan-progress {
    margin: 0 0 18px;
}

.edu-plan-progress__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    color: #3d4668;
    font-size: 0.95rem;
    font-weight: 700;
}

.edu-plan-progress__label strong {
    color: #2a3261;
    font-size: 0.95rem;
}

.edu-plan-progress__bar {
    height: 10px;
    border-radius: 999px;
    background: #e7e9f9;
    overflow: hidden;
}

.edu-plan-progress__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5f63ff 0%, #d946ef 100%);
}

.edu-activity-overview-grid,
.edu-activity-plan-grid {
    display: grid;
    gap: 16px;
}

.edu-activity-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
}

.edu-activity-overview-subtitle {
    margin: 14px 0 12px;
    font-size: 0.98rem;
    color: #2e3a68;
}

.edu-activity-overview-grid + .edu-activity-overview-subtitle {
    margin-top: 34px;
}

.edu-activity-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edu-activity-overview-card,
.edu-activity-plan-card {
    border-radius: 22px;
    border: 2px solid rgba(216, 227, 255, 0.95);
    background: linear-gradient(160deg, #ffffff 0%, #f5f8ff 58%, #fff8fb 100%);
    box-shadow: 0 12px 28px rgba(75, 95, 215, 0.08);
    padding: 18px;
}

.edu-activity-overview-card {
    appearance: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    white-space: normal;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-height: 220px;
    height: 220px;
    max-width: none;
    width: 100%;
    border-radius: 18px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(99, 111, 214, 0.55);
    background: linear-gradient(165deg, #2a2f67 0%, #3a2b73 56%, #5a2c87 100%);
    box-shadow: 0 14px 30px rgba(34, 28, 78, 0.34);
    color: #ffffff;
}

.edu-activity-overview-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.edu-activity-overview-card.is-active {
    background: linear-gradient(165deg, #273670 0%, #3a2b77 55%, #5b2d8f 100%);
}

.edu-activity-overview-card.is-inactive {
    background: linear-gradient(165deg, #636777 0%, #6c7080 52%, #747786 100%);
    border-color: rgba(158, 161, 173, 0.78);
    color: #f3f5fb;
}

.edu-activity-overview-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.edu-activity-overview-card__icon {
    min-width: 84px;
    width: 84px;
    border-radius: 0;
    display: inline-flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    font-size: 2.9rem;
    line-height: 1;
}

.edu-activity-overview-card__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    overflow: hidden;
}

.edu-choice-card.edu-activity-choice-card {
    max-width: none;
    min-height: 260px;
    height: auto;
    white-space: normal;
}

.edu-activity-overview-card__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: end;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.edu-activity-overview-card__deadline {
    font-size: 0.88rem;
    font-weight: 700;
    color: #58627e;
}

.edu-activity-overview-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(146, 242, 188, 0.22);
    border: 1px solid rgba(191, 255, 223, 0.45);
    color: #e9fff4;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edu-activity-overview-card__progress {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    margin: 2px 0 2px;
}

.edu-activity-overview-card__progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #c7f2ff 0%, #d1f7d9 50%, #fff4c1 100%);
}

.edu-activity-overview-card h4 {
    margin: 0;
    color: #ffffff;
    position: relative;
    z-index: 1;
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-self: flex-end;
    max-width: 100%;
}

.edu-activity-overview-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
}

.edu-activity-overview-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
    margin-top: 2px;
}

.edu-activity-overview-card__notice {
    margin: 2px 0 4px;
    color: #ffe5bf;
    font-weight: 600;
    text-align: right;
}

.edu-activity-overview-card.is-inactive h4,
.edu-activity-overview-card.is-inactive p,
.edu-activity-overview-card.is-inactive .edu-activity-overview-card__deadline {
    color: #f3f5fb;
}

.edu-activity-overview-card.is-inactive .edu-activity-overview-card__progress {
    background: rgba(255, 255, 255, 0.16);
}

.edu-activity-overview-card.is-inactive .edu-activity-overview-card__progress > span {
    background: linear-gradient(90deg, #dce2ea 0%, #e4e8ef 100%);
}

.edu-activity-overview-card.is-inactive .edu-activity-overview-card__notice {
    color: #fdf0d4;
}

.edu-activity-overview-card__deadline {
    color: rgba(255, 255, 255, 0.84);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}

.edu-activity-overview-card .edu-button {
    margin-top: 2px;
    align-self: flex-end;
}

.edu-activity-overview-card__cta {
    pointer-events: none;
}

.edu-activity-overview-card--authoring {
    cursor: default;
    height: 274px;
    min-height: 274px;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: stretch;
    gap: 8px;
}

.edu-activity-overview-card--authoring .edu-activity-overview-card__head {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    height: auto;
}

.edu-activity-overview-card--authoring .edu-activity-overview-card__icon {
    align-self: stretch;
}

.edu-activity-overview-card--authoring .edu-activity-overview-card__content {
    min-height: 0;
}

.edu-activity-overview-card--authoring .edu-overview-card__actions {
    margin-top: 0;
    align-self: stretch;
    width: 100%;
    justify-content: stretch;
    flex-wrap: nowrap;
    gap: 6px;
}

.edu-activity-overview-card--authoring .edu-overview-card__actions .edu-button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    text-overflow: clip;
    overflow: hidden;
    padding: 7px 6px;
    font-size: 0.8rem;
    line-height: 1.1;
}

.edu-home-plan-empty {
    margin: 0;
    color: #5a5f78;
}

@media (max-width: 1024px) {
    .edu-activity-overview-grid,
    .edu-activity-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .edu-activity-overview-card {
        max-width: none;
        gap: 10px;
    }

    .edu-activity-overview-card__icon {
        min-width: 64px;
        width: 64px;
        font-size: 2.1rem;
    }

    .edu-activity-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

.edu-activity-choice-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
}

.edu-activity-choice-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4f5672;
}

.edu-activity-choice-score strong {
    color: #243160;
}

.edu-inline-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
    gap: 10px;
    align-items: center;
}

.edu-inline-form small {
    grid-column: 1 / -1;
    color: #334155;
}

.edu-inline-input {
    min-height: 40px;
    border-width: 1px;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(91, 93, 240, 0.08);
}

#edu-library-page {
    font-weight: 700;
    color: #334155;
    align-self: center;
}

.edu-header-actions .edu-select {
    height: 46px;
}

.edu-header-actions #edu-language-switcher {
    padding-top: 8px;
    padding-bottom: 8px;
}

.edu-activity-player {
    border-radius: 22px;
    padding: 20px 18px 22px;
    background: linear-gradient(165deg, #fffef8 0%, #ffffff 45%, #f8fbff 100%);
    border: 3px solid rgba(255, 217, 61, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 28px rgba(255, 138, 61, 0.12);
    font-family: var(--edu-font);
    font-size: 1.05rem;
    line-height: 1.5;
    color: #352f55;
}

.edu-activity-player--modal {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-width: none;
    display: block;
    box-sizing: border-box;
}

.edu-activity-player--modal > .edu-activity {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edu-activity-player__content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
    padding-right: 4px;
}

.edu-activity-player--modal .edu-activity [data-activity-root] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 160px;
}

.edu-activity-player--modal [data-activity-task] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.edu-activity-player--modal [data-activity-task] label {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.edu-activity-player--modal .edu-inline-input,
.edu-activity-player--modal select.edu-inline-input {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
}

.edu-activity-player--modal input[type="range"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.edu-activity-player--modal .edu-mem-card {
    flex: 1 1 calc(25% - 8px);
    min-width: min(120px, 100%);
}

.edu-activity-player-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.edu-activity-player__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 2px;
    padding-top: 8px;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    clear: both;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.95) 55%);
    backdrop-filter: blur(2px);
    border-radius: 12px;
}

/* html_embed în modal: doar ierarhie flex + coloane, fără micșorat fonturi */
.edu-activity-player-shell:has(.edu-sm-task) {
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.edu-activity-player--modal:has(.edu-sm-task) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 2px 8px;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #352f55;
}

/* Un singur scroll pe întreg conținutul exercițiului (inclusiv <details> deschis) */
.edu-activity-player--modal:has(.edu-sm-task) .edu-activity-player__content {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    padding-right: 6px;
    padding-bottom: 8px;
    scrollbar-gutter: stable;
    background: transparent;
}

.edu-activity-player--modal:has(.edu-sm-task) > .edu-activity {
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.edu-activity-player--modal:has(.edu-sm-task) .edu-activity [data-activity-root] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.edu-activity-player--modal:has(.edu-sm-task) .edu-sm-task {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.edu-activity-player--modal:has(.edu-sm-task) .edu-sm-progress-block {
    flex: 0 0 auto;
    width: 100%;
}

.edu-activity-player--modal:has(.edu-sm-task) .edu-sm-progress {
    display: block;
    width: 100%;
    flex: 0 0 auto;
}

.edu-activity-player--modal:has(.edu-sm-task) .edu-sm-progress__bar {
    width: 100%;
    min-width: 0;
}

.edu-activity-player--modal:has(.edu-sm-task) .edu-sm-board {
    flex: 1 1 auto;
    min-height: min(360px, 42vh);
    gap: 10px;
}

/* html_embed: zona de joc umple înălțimea rămasă ca #game-root { height:100% } din cod să funcționeze */
.edu-activity-player--modal:has(.edu-html-embed-task) .edu-sm-board.edu-html-embed-body {
    display: flex;
    flex-direction: column;
    min-height: min(400px, 58vh);
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 250, 252, 0.94), rgba(244, 248, 255, 0.94));
}

@media (max-width: 980px) {
    .edu-activity-player--modal:has(.edu-sm-task) .edu-sm-board {
        min-height: min(320px, 40vh);
    }

    .edu-activity-player--modal:has(.edu-html-embed-task) .edu-sm-board.edu-html-embed-body {
        min-height: min(340px, 44vh);
    }
}

.edu-html-embed-host {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    overflow: hidden;
}

/* Jocuri AI: fundal decorativ vizibil; doar enunțul pe bandă lizibilă */
.edu-ai-theme-shell {
    position: relative;
}

.edu-ai-theme-shell__inner {
    background: transparent;
    border-radius: 12px;
    padding: 12px 14px;
    color: #1a2332;
    gap: 12px;
}

/* Nu acoperi imaginea temei cu panouri albe din markup-ul generat */
.edu-ai-theme-shell__inner #root,
.edu-ai-theme-shell__inner #game,
.edu-ai-theme-shell__inner .game,
.edu-ai-theme-shell__inner .game-wrap,
.edu-ai-theme-shell__inner .game-container,
.edu-ai-theme-shell__inner [class*="game-area"],
.edu-ai-theme-shell__inner [class*="game-board"] {
    background: transparent !important;
    box-shadow: none;
}

.edu-ai-theme-shell__inner .edu-game-question,
.edu-ai-theme-shell__inner [class*="question"]:not(button):not([class*="button"]),
.edu-ai-theme-shell__inner [class*="prompt"]:not(button),
.edu-ai-theme-shell__inner [class*="statement"]:not(button),
.edu-ai-theme-shell__inner [id*="question"],
.edu-ai-theme-shell__inner [id*="prompt"] {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 800;
    line-height: 1.35;
    color: #1a2332 !important;
    text-align: center;
    margin: 0 auto 12px;
    max-width: 40rem;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.18);
    text-shadow: none;
}

.edu-activity-player--modal .edu-sm-board canvas,
.edu-activity-player--modal .edu-html-embed-host canvas {
    border-radius: 18px;
}

.edu-activity-player-shell:has(.edu-sm-task) .edu-activity-player__actions {
    margin-top: 10px;
    padding-top: 16px;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    border-top: 1px solid rgba(53, 47, 102, 0.12);
}


.edu-cat-intro {
    text-align: center;
    margin: 0 0 8px;
}

.edu-cat-progress {
    width: fit-content;
    margin: 0 auto 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef2ff, #fff7ed);
    border: 2px solid #d7e1ff;
    color: #2e3f84;
    font-weight: 800;
}

.edu-cat-audio-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.edu-cat-audio-word {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #eef3ff;
    color: #2d4187;
    font-weight: 700;
    border: 1px solid #cdd9ff;
}

.edu-cat-layout {
    display: grid;
    gap: 14px;
}

.edu-cat-bank,
.edu-cat-zone {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    border: 2px solid #dfe7ff;
    box-shadow: 0 8px 20px rgba(92, 108, 255, 0.08);
    padding: 12px;
}

.edu-cat-bank h4 {
    margin: 0 0 10px;
    color: #253373;
    font-family: var(--edu-font-display);
}

.edu-cat-bank__drop,
.edu-cat-zone__drop {
    min-height: 76px;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-content: flex-start;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
}

.edu-cat-bank__drop {
    border: 2px dashed #bfcdfb;
    background: linear-gradient(180deg, #f8fbff, #f1f7ff);
}

.edu-cat-zone__drop {
    border: 2px dashed #ffd08a;
    background: linear-gradient(180deg, #fffaf0, #fff6e6);
}

.edu-cat-zone:hover .edu-cat-zone__drop {
    border-color: #ffb95d;
    background: linear-gradient(180deg, #fff7ea, #fff1d9);
}

.edu-cat-zone__drop.is-correct {
    border-color: #4caf7b;
    background: linear-gradient(180deg, #ecfff2, #ddf8e6);
    animation: eduCatPop .36s ease;
}

.edu-cat-zone__drop.is-wrong {
    border-color: #ef5350;
    background: linear-gradient(180deg, #fff0f0, #ffe3e3);
    animation: eduCatShake .38s ease;
}

.edu-cat-zone__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.edu-cat-zone__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(255, 173, 61, 0.2);
}

.edu-cat-zone__head strong {
    font-family: var(--edu-font-display);
    color: #243370;
}

.edu-cat-zone__head small {
    margin-left: auto;
    border-radius: 999px;
    background: #edf2ff;
    color: #2f438c;
    font-weight: 700;
    padding: 2px 8px;
}

.edu-cat-item {
    border: 2px solid #d5defd;
    background: linear-gradient(180deg, #fff, #f4f7ff);
    border-radius: 12px;
    padding: 8px 11px;
    font-weight: 700;
    color: #26336f;
    cursor: grab;
    transition: transform .12s ease, box-shadow .2s ease, border-color .18s ease;
}

.edu-cat-item:hover {
    transform: translateY(-1px);
    border-color: #9cb3ff;
    box-shadow: 0 6px 14px rgba(92, 108, 255, 0.16);
}

.edu-cat-item.is-selected {
    border-color: #5c6cff;
    box-shadow: 0 0 0 3px rgba(92, 108, 255, 0.2);
}

.edu-cat-item.is-dragging {
    opacity: 0.8;
    cursor: grabbing;
}

.edu-cat-item.is-target {
    border-color: #ff9f40;
    box-shadow: 0 0 0 3px rgba(255, 159, 64, 0.25);
    animation: eduCatPulse 1s ease-in-out infinite;
}

.edu-cat-item.is-correct {
    border-color: #4caf7b;
    background: linear-gradient(180deg, #f4fff8, #e6fbeF);
}

.edu-cat-item.is-wrong {
    border-color: #ef5350;
    animation: eduCatShake .35s ease;
}

.edu-cat-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

/* html_embed: redesign dedicat pentru layout-ul de activitate */
.edu-dz-task {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.edu-dz-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.edu-dz-head__text {
    flex: 1 1 280px;
}

.edu-dz-prompt {
    margin: 0;
    color: #2d356f;
    font-size: 1.1rem;
    line-height: 1.4;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.edu-dz-head__actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.edu-dz-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.edu-dz-progress__bar {
    flex: 1 1 auto;
    min-width: 0;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #e2e9ff, #f5f7ff);
    box-shadow: inset 0 2px 4px rgba(53, 47, 102, 0.08);
    border: 1px solid rgba(92, 108, 255, 0.12);
}

.edu-dz-progress__bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #5c6cff 0%, #7c4dff 42%, #ff5da2 100%);
    transition: width 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

.edu-dz-progress__count {
    flex: 0 0 auto;
    min-width: 58px;
    text-align: right;
    font-weight: 800;
    color: #3d4a8f;
}

.edu-dz-instructions {
    position: relative;
    z-index: 30;
    margin: 0;
}

.edu-dz-instructions summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #34468a;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.42), rgba(92, 108, 255, 0.12));
}

.edu-dz-instructions summary::-webkit-details-marker {
    display: none;
}

.edu-dz-instructions__bubble {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    max-width: min(420px, calc(100vw - 56px));
    z-index: 60;
    margin: 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
    border: 2px solid rgba(92, 108, 255, 0.35);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(45, 55, 120, 0.2);
}

.edu-dz-instructions__bubble ol {
    margin: 0;
    padding: 0 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #2d356f;
    line-height: 1.4;
}

.edu-dz-audio-row {
    justify-content: flex-start;
    margin-bottom: 0;
}

.edu-dz-audio-word {
    min-height: 32px;
}

.edu-dz-layout {
    gap: 12px;
    min-height: min(380px, 44vh);
}

.edu-dz-bank {
    border-radius: 22px;
    border-color: #dce6ff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 246, 255, 0.92));
}

.edu-dz-bank h4 {
    margin-bottom: 8px;
}

.edu-dz-bank__drop {
    min-height: 72px;
    border-radius: 18px;
    border: 2px dashed rgba(92, 108, 255, 0.45);
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.edu-dz-item {
    border-radius: 16px;
    padding: 10px 14px;
    border-width: 2px;
    font-size: 1.04rem;
    background: linear-gradient(165deg, #ffffff 0%, #f5f8ff 100%);
}

.edu-dz-zones {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.edu-dz-zone {
    position: relative;
    border-radius: 20px;
    border-color: rgba(255, 201, 115, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 233, 0.93) 100%);
    box-shadow: 0 10px 22px rgba(255, 156, 72, 0.16);
}

.edu-dz-zone::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0.52), transparent 56%);
}

.edu-dz-zone__head {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.edu-dz-zone__icon {
    width: 36px;
    height: 36px;
    box-shadow: 0 4px 12px rgba(255, 154, 58, 0.22);
}

.edu-dz-zone__drop {
    position: relative;
    z-index: 1;
    min-height: 84px;
    border-radius: 14px;
    border: 2px dashed rgba(255, 174, 89, 0.9);
    background: linear-gradient(180deg, #fff6e8 0%, #ffeecf 100%);
}

.edu-dz-zone:hover .edu-dz-zone__drop {
    border-color: #ffb354;
    background: linear-gradient(180deg, #fff2de 0%, #ffe8bf 100%);
}

.edu-dz-zone__drop.is-correct {
    border-color: #4caf7b;
    background: linear-gradient(180deg, #ecfff2 0%, #ddf8e6 100%);
}

.edu-dz-zone__drop.is-wrong {
    border-color: #ef5350;
    background: linear-gradient(180deg, #fff0f0 0%, #ffe3e3 100%);
}

@media (max-width: 760px) {
    .edu-dz-head {
        gap: 8px;
    }

    .edu-dz-prompt {
        font-size: 1.02rem;
    }

    .edu-dz-head__actions {
        width: 100%;
    }

    .edu-dz-head__actions .edu-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .edu-dz-layout {
        min-height: min(340px, 50vh);
    }

    .edu-dz-zones {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@keyframes eduCatPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes eduCatShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@keyframes eduCatPop {
    0% { transform: scale(0.98); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.edu-sb-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.edu-sb-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    padding: 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 2px dashed rgba(92, 108, 255, 0.28);
    box-sizing: border-box;
}

.edu-sb-built {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: min(28vh, 220px);
    padding: 16px 14px;
    border-radius: 18px;
    font-weight: 700;
    color: #2a2548;
    background: rgba(255, 255, 255, 0.9);
    border: 3px dashed rgba(255, 184, 92, 0.55);
    box-sizing: border-box;
}

.edu-sb-chip.is-dragging {
    opacity: 0.88;
    cursor: grabbing;
}

.edu-sb-chip[draggable="true"] {
    cursor: grab;
}

.edu-activity-player label,
.edu-activity-player p {
    font-weight: 600;
}

#edu-library-modal-title {
    font-family: var(--edu-font-display);
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: var(--edu-text);
    margin: 0 36px 6px 0;
    flex: 0 0 auto;
}

@media (max-width: 980px) {
    #edu-library-modal:has(#edu-library-modal-content .edu-sm-task) .edu-auth-modal__panel {
        padding: 12px 14px 10px;
    }

    .edu-sm-head {
        gap: 2px;
    }

    .edu-sm-head__top {
        gap: 2px 8px;
    }

    .edu-sm-info-row {
        gap: 2px 8px;
    }

    .edu-sm-prompt {
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.34;
    }

    .edu-activity-player--modal:has(.edu-sm-task) .edu-sm-board {
        min-height: min(240px, 32vh);
    }
}

.edu-toast {
    position: fixed;
    right: 20px;
    top: 20px;
    max-width: min(420px, 86vw);
    background: linear-gradient(90deg, #26c281, #42c7ff);
    color: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1400;
}

.edu-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.edu-confetti-dot {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2200;
    animation: eduConfetti 900ms ease-out forwards;
}

@keyframes eduConfetti {
    from {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.2);
    }
}

.screen-reader-text {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.edu-newsletter {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.edu-newsletter__title {
    margin: 0 0 12px;
    font-family: var(--edu-font-display);
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    color: var(--edu-text);
}

.edu-newsletter__lead {
    margin: 0 0 18px;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #4d4a68;
    font-weight: 600;
}

.edu-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.edu-newsletter__form input[type="email"] {
    min-width: min(100%, 280px);
    flex: 1 1 220px;
    max-width: 360px;
    min-height: 46px;
    border: 2px solid rgba(92, 108, 255, 0.25);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 16px;
    font-family: var(--edu-font);
}

.edu-newsletter__message {
    margin: 14px 0 0;
    min-height: 1.25em;
    font-weight: 700;
    color: #1d9a6c;
}

@media (max-width: 1024px) {
    .edu-header {
        padding: 4px 0;
        gap: 10px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .edu-logo__word {
        display: inline-flex;
        font-size: clamp(1.09rem, 2.3vw, 1.28rem);
        line-height: 1;
    }

    .edu-logo strong {
        gap: 8px;
    }

    .edu-logo__mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 0.9rem;
    }

    .edu-header-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .edu-header-slot {
        flex: 0 0 auto;
    }

    .edu-header .edu-button,
    .edu-header #edu-open-auth-modal {
        min-width: 0;
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 0.95rem;
    }

    .edu-header #edu-language-switcher {
        height: 40px;
        min-width: 66px !important;
        padding: 8px 24px 8px 10px;
    }
}