/* Aprendizzaje consolidated legacy cascade - R3. Source order preserved: app -> modern-redesign -> kids-redesign. */

:root {
    --bg: #f5f8fc;
    --bg-soft: #eef6ff;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-strong: #ffffff;
    --surface-alt: #f8fbff;
    --primary: #0d9cca;
    --primary-dark: #0d5473;
    --secondary: #f7c95f;
    --secondary-dark: #8f6509;
    --success: #2fa56e;
    --error: #d96462;
    --warning: #f3a748;
    --text: #193244;
    --muted: #6b8190;
    --border: #d7e5f2;
    --border-strong: #c5d9ea;
    --radius: 24px;
    --radius-lg: 32px;
    --shadow: 0 24px 60px rgba(19, 50, 68, 0.12);
    --shadow-soft: 0 16px 34px rgba(19, 50, 68, 0.08);
    --sidebar: linear-gradient(180deg, #12324c 0%, #0d2438 100%);
    --sidebar-text: #e7f5ff;
    --focus: 0 0 0 4px rgba(13, 156, 202, 0.2);
    --level-1: #18a8c8;
    --level-1-soft: #e1f8fb;
    --level-2: #ffca53;
    --level-2-soft: #fff4d5;
    --level-3: #70c96e;
    --level-3-soft: #e9f8e7;
    --level-4: #5f7dff;
    --level-4-soft: #e7ecff;
    --title-hero: clamp(1.9rem, 3vw, 2.4rem);
    --title-xl:   clamp(1.35rem, 2vw, 1.75rem);
    --title-lg:   clamp(1.15rem, 1.6vw, 1.4rem);
    --title-md:   clamp(1rem, 1.3vw, 1.18rem);
    --title-sm:   .92rem;
    --body-lg: 1.08rem;
    --body-md: .98rem;
    --body-sm: .9rem;
    --line-copy: 1.72;
    --line-tight: 1.22;
    --action-primary: linear-gradient(180deg, #169fd2 0%, #0b85b2 100%);
    --action-secondary: linear-gradient(180deg, #fff5d6 0%, #ffe8a2 100%);
    --action-ghost: rgba(255, 255, 255, 0.84);
    --frame-default: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.92));
    --frame-accent: linear-gradient(180deg, rgba(240,248,255,.98), rgba(255,255,255,.95));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(247, 201, 95, 0.22), transparent 22%),
        radial-gradient(circle at top right, rgba(13, 156, 202, 0.16), transparent 20%),
        linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: #12293a;
    line-height: var(--line-tight);
    letter-spacing: -.035em;
}
h1 { font-size: var(--title-hero); font-weight: 900; }
h2 { font-size: var(--title-xl); font-weight: 850; }
h3 { font-size: var(--title-lg); font-weight: 800; }
h4 { font-size: var(--title-md); font-weight: 800; }
h5, h6 { font-size: var(--title-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
p, li, td, input, select, textarea {
    font-size: var(--body-md);
    line-height: var(--line-copy);
}
small, .muted-text {
    font-size: var(--body-sm);
    color: var(--muted);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.public-shell { max-width: 1240px; margin: 0 auto; padding: 44px 24px 84px; }
.hero,
.auth-card,
.hero-panel-card,
.wide-card,
.panel,
.metric-card,
.info-card,
.marketing-card,
.result-hero,
.instruction-card,
.profile-card,
.table-card,
.hero-copy,
.hero-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}
.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 26px;
    padding: 0;
    overflow: hidden;
}
.hero-copy {
    padding: 44px;
    background:
        radial-gradient(circle at 10% 20%, rgba(13, 156, 202, 0.16), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.hero-copy h1 {
    margin: 14px 0 18px;
    font-size: var(--title-hero);
    line-height: .96;
    letter-spacing: -.05em;
}
.hero-copy p,
.marketing-card p,
.info-card p,
.lesson-card p,
.instruction-card p,
.result-hero p,
.timeline-card p,
.pathway-note p,
.scene-copy p,
.hero-illustration p {
    color: var(--muted);
    line-height: 1.65;
}
.hero-panel {
    display: grid;
    gap: 18px;
    padding: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 201, 95, 0.22), transparent 30%),
        linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}
.hero-card {
    padding: 24px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #ffffff, #eaf8ff);
    border: 1px solid rgba(13, 156, 202, 0.15);
}
.hero-card h2 { margin-top: 0; }
.stat-grid,
.marketing-grid,
.info-grid,
.dashboard-grid,
.level-map-grid,
.demo-grid,
.badge-row,
.timeline-levels,
.step-cards,
.skill-grid,
.pathway-track,
.activity-toolbar,
.lesson-scene-grid,
.activity-stats {
    display: grid;
    gap: 18px;
}
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.marketing-grid, .info-grid { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.marketing-card, .info-card { padding: 26px; position: relative; overflow: hidden; }
.marketing-card::after,
.info-card::after,
.metric-card::after,
.activity-item::after {
    content: "";
    position: absolute;
    inset: auto -20% -55% auto;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(13, 156, 202, 0.12), transparent 62%);
    pointer-events: none;
}

:root {
    --level-5: #ef7d57;
    --level-5-soft: #fff0e9;
    --level-6: #5f86ff;
    --level-6-soft: #edf1ff;
    --level-7: #2dba8a;
    --level-7-soft: #e8faf3;
    --level-8: #f0a93e;
    --level-8-soft: #fff4de;
    --level-9: #8a63d2;
    --level-9-soft: #f1ebff;
}

.level-5 { background: linear-gradient(180deg, var(--level-5-soft), #fff); border-color: rgba(239, 125, 87, 0.2); }
.level-6 { background: linear-gradient(180deg, var(--level-6-soft), #fff); border-color: rgba(95, 134, 255, 0.2); }
.level-7 { background: linear-gradient(180deg, var(--level-7-soft), #fff); border-color: rgba(45, 186, 138, 0.2); }
.level-8 { background: linear-gradient(180deg, var(--level-8-soft), #fff); border-color: rgba(240, 169, 62, 0.2); }
.level-9 { background: linear-gradient(180deg, var(--level-9-soft), #fff); border-color: rgba(138, 99, 210, 0.2); }

.activity-item--writing,
.activity-item--reading {
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

.writing-box {
    width: 100%;
    min-height: 56px;
    border: 2px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
    color: var(--text);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
    resize: vertical;
}

.writing-box:focus {
    border-color: var(--primary);
    box-shadow: var(--focus);
}

.text-model-card,
.word-bank,
.passage-card,
.guided-reading-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
    margin: 12px 0;
}

.text-model-card strong,
.word-bank strong,
.reading-title {
    display: block;
    margin-bottom: 10px;
}

.word-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.word-chip {
    border: 1px solid rgba(13, 156, 202, 0.18);
    background: #fff;
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.word-chip:hover {
    transform: translateY(-1px);
    background: #eef8ff;
}

.writing-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--muted);
    font-size: .92rem;
    margin-top: 12px;
}

.reading-lines {
    display: grid;
    gap: 10px;
}

.reading-line {
    text-align: left;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    color: var(--text);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.reading-line:hover,
.reading-line.is-reading {
    background: #eef8ff;
    border-color: rgba(13, 156, 202, 0.3);
    transform: translateY(-1px);
}

.sentence-builder .sequence-chip {
    background: linear-gradient(180deg, #fff6de 0%, #fff 100%);
    border-color: rgba(240, 169, 62, 0.35);
}

.feedback-list p {
    margin: 10px 0 0;
}

.is-success {
    background: var(--success) !important;
    color: #fff !important;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    background: rgba(13, 156, 202, 0.11);
    color: var(--primary-dark);
    font-weight: 900;
}
.eyebrow.sun {
    background: rgba(247, 201, 95, 0.28);
    color: var(--secondary-dark);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.primary-btn,
.secondary-btn,
.ghost-btn,
.audio-pill,
.mini-audio-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.primary-btn {
    color: #fff;
    background: var(--action-primary);
    box-shadow: 0 14px 26px rgba(13, 156, 202, 0.24);
}
.secondary-btn {
    background: var(--action-secondary);
    color: #6f5110;
    border: 1px solid rgba(247, 201, 95, 0.4);
}
.ghost-btn {
    background: var(--action-ghost);
    color: var(--text);
    border: 1px solid var(--border);
}
.audio-pill,
.mini-audio-btn {
    background: rgba(247, 201, 95, 0.28);
    color: #7c5b12;
    border-color: rgba(247, 201, 95, .34);
}
.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.audio-pill:hover,
.mini-audio-btn:hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(.99);
}
.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active,
.audio-pill:active,
.mini-audio-btn:active {
    transform: translateY(0);
}
.primary-btn:disabled,
.secondary-btn:disabled,
.ghost-btn:disabled,
.audio-pill:disabled,
.mini-audio-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.feature-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.feature-chip,
.pill,
.status-pill,
.mini-meta,
.tiny-pill,
.route-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 13px;
    font-size: .88rem;
    background: #f8fbff;
    border: 1px solid var(--border);
    color: var(--primary-dark);
    font-weight: 700;
}

.auth-shell { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(560px, 100%); padding: 34px; display: grid; gap: 16px; }
.auth-card.wide, .compact .auth-card { width: min(1000px, 100%); }
.auth-card label, .form-card label { display: grid; gap: 8px; font-weight: 700; color: var(--text); }
.auth-card input, .auth-card select, .form-card input, .form-card select, .form-card textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #fcfdff;
}
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .95rem; }
.demo-grid { grid-template-columns: repeat(3, 1fr); }
.demo-card {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: grid;
    gap: 14px;
    box-shadow: var(--shadow-soft);
}

.app-shell { display: grid; grid-template-columns: 290px 1fr; min-height: 100vh; }
.sidebar {
    background: var(--sidebar);
    color: var(--sidebar-text);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    min-height: 100vh;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--secondary), #ffebaf);
    color: #785b14;
    font-weight: 900;
    font-size: 1.2rem;
}
.brand small, .profile-chip small { color: rgba(232, 243, 251, 0.78); }
.profile-chip {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: rgba(255,255,255,.08);
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.avatar-badge, .avatar-large {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--secondary), #ffefb9);
    color: #6f5010;
    font-weight: 900;
}
.avatar-badge { width: 46px; height: 46px; }
.avatar-large { width: 88px; height: 88px; font-size: 2rem; }
.sidebar-nav { display: grid; gap: 8px; }
.nav-link {
    padding: 13px 16px;
    border-radius: 16px;
    color: rgba(232,243,251,.86);
    font-weight: 700;
}
.nav-link:hover, .nav-link.is-active {
    background: rgba(255,255,255,.12);
    color: #fff;
    transform: translateX(2px);
}
.sidebar-card {
    margin-top: auto;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.app-main { display: flex; flex-direction: column; }
.topbar {
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}
.topbar h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.section-heading h2, .hero-mini h2, .instruction-card h2, .result-hero h2 {
    margin: 4px 0 0;
    font-size: var(--title-xl);
    letter-spacing: -.03em;
}
.topbar-actions { display: flex; gap: 6px; align-items: center; }
.topbar-icon-btn {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    background: rgba(19,50,68,.06);
    border: 1px solid rgba(19,50,68,.08);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    color: inherit;
}
.topbar-icon-btn:hover { background: rgba(13,156,202,.12); border-color: rgba(13,156,202,.2); }
.topbar-exit-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 800;
    background: rgba(19,50,68,.06);
    border: 1px solid rgba(19,50,68,.08);
    cursor: pointer;
    color: var(--primary-dark);
    font-family: var(--font-body);
    transition: background .15s;
}
.topbar-exit-btn:hover { background: rgba(217,100,98,.1); border-color: rgba(217,100,98,.2); color: #b03030; }
.page-container { padding: 0 20px 24px; display: grid; gap: 16px; }
.panel,
.wide-card,
.hero-panel-card,
.metric-card,
.result-hero,
.instruction-card,
.profile-card,
.table-card {
    padding: 20px 22px;
    background: var(--frame-default);
    border: 1px solid rgba(19, 50, 68, 0.08);
    box-shadow: 0 8px 24px rgba(19, 50, 68, .07);
}
.section-heading, .hero-mini, .profile-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.section-heading > div,
.hero-mini > div {
    display: grid;
    gap: 4px;
}
.section-heading h3,
.hero-mini h3,
.instruction-card h3,
.profile-card h3,
.lesson-card .lesson-body strong {
    font-size: var(--title-md);
    letter-spacing: -.02em;
}
.dashboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.hero-panel-card, .wide-card { grid-column: span 2; }
.card-stack { display: grid; gap: 18px; }
.lesson-list { display: grid; gap: 14px; }
.lesson-card {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid rgba(19, 50, 68, .08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
    box-shadow: 0 2px 8px rgba(19, 50, 68, .05);
}
.lesson-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 156, 202, 0.28);
}
.lesson-card .lesson-body strong {
    display: block;
    margin-bottom: 4px;
    color: #12293a;
}
.lesson-card .lesson-body p {
    margin: 0;
    color: var(--muted);
}
.lesson-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.progress-steps { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.timeline-levels,
.badge-row,
.level-map-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.result-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 201, 95, 0.22), transparent 32%),
        linear-gradient(135deg, #eaf7ff, #ffffff);
}
.form-card, .diagnostic-list { display: grid; gap: 16px; }
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.inline-check { display: flex !important; align-items: center; gap: 10px; font-weight: 700; }
.inline-check input { width: auto; }
.form-card label > span,
.auth-card label > span,
.login-card label > span {
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5a7183;
    font-weight: 900;
}
.diagnostic-item,
.evaluation-row {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    background: #fcfdff;
}
.rating-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rating-pill { position: relative; }
.rating-pill input { position: absolute; opacity: 0; inset: 0; }
.rating-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}
.rating-pill input:checked + span {
    background: rgba(13, 156, 202, .12);
    color: var(--primary-dark);
    border-color: rgba(13, 156, 202, .35);
}
.flash { padding: 15px 18px; border-radius: 18px; font-weight: 800; }
.flash-success { background: rgba(47, 165, 110, .12); color: #196140; border: 1px solid rgba(47, 165, 110, .28); }
.flash-error { background: rgba(217, 100, 98, .12); color: #7d2d2d; border: 1px solid rgba(217, 100, 98, .28); }
.muted-text { color: var(--muted); }
.table-card {
    overflow: hidden;
}
.table-card table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .96rem;
}
.table-card thead th {
    padding: 14px 14px;
    text-align: left;
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4f687a;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border-bottom: 1px solid var(--border);
}
.table-card thead th:first-child {
    border-top-left-radius: 16px;
}
.table-card thead th:last-child {
    border-top-right-radius: 16px;
}
.table-card tbody td {
    padding: 15px 14px;
    border-bottom: 1px solid rgba(215, 229, 242, .88);
    vertical-align: top;
    color: #213c4c;
}
.table-card tbody tr:nth-child(even) td {
    background: rgba(248, 251, 255, .72);
}
.table-card tbody tr:hover td {
    background: rgba(234, 246, 255, .92);
}
.table-card tbody tr:last-child td {
    border-bottom: none;
}

.student-stage {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 14px;
    align-items: start;
}
.progress-orbit {
    position: relative;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 25%, rgba(13, 156, 202, 0.22), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(247, 201, 95, 0.24), transparent 24%),
        linear-gradient(135deg, #ffffff, #eff8ff);
    border: 1px solid rgba(13, 156, 202, 0.16);
}
.student-stage .scene-stack {
    display: grid;
    gap: 18px;
}
.welcome-avatar {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffefb9 0%, #ffd975 100%);
    font-size: 1.45rem;
    box-shadow: 0 8px 20px rgba(247, 201, 95, 0.28);
}
.hero-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.hero-metric {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(13, 156, 202, 0.12);
}
.hero-metric strong {
    display: block;
    font-size: 1.45rem;
    color: var(--primary-dark);
}
.hero-metric span {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 600;
}
.skill-grid {
    grid-template-columns: repeat(2, 1fr);
}
.skill-pill {
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f9fcff);
    border: 1px solid var(--border);
}
.skill-pill strong { display: block; margin-bottom: 8px; }
.progress-bar-shell {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(13, 84, 115, 0.08);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1ab0e5, #7cd7f3);
    width: var(--fill, 0%);
    transition: width .7s ease;
}
.route-board,
.pathway-note,
.lesson-scene,
.celebration-card {
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 4px 14px rgba(19,50,68,.06);
}
.pathway-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}
.pathway-stop {
    position: relative;
    padding: 20px 16px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--surface-strong);
    overflow: hidden;
}
.pathway-stop::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(13, 156, 202, 0.09), transparent 64%);
    transform: translate(-50%, -50%);
}
.pathway-stop.locked {
    opacity: .58;
    filter: grayscale(.1);
}
.pathway-stop .stop-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 1.85rem;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.pathway-stop.level-1 .stop-icon { background: var(--level-1-soft); color: var(--level-1); }
.pathway-stop.level-2 .stop-icon { background: var(--level-2-soft); color: #b57c00; }
.pathway-stop.level-3 .stop-icon { background: var(--level-3-soft); color: var(--level-3); }
.pathway-stop.level-4 .stop-icon { background: var(--level-4-soft); color: var(--level-4); }
.pathway-stop strong,
.pathway-stop span,
.pathway-stop p {
    position: relative;
    z-index: 1;
}

.timeline-card {
    padding: 20px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #f8fbff);
    display: grid;
    gap: 12px;
}
.metric-card,
.badge-card,
.step-card {
    position: relative;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.metric-card strong,
.badge-card strong {
    display: block;
    font-size: 1.45rem;
    margin-bottom: 6px;
    color: var(--primary-dark);
}
.metric-card span,
.badge-card span {
    color: var(--muted);
    line-height: 1.5;
}
.step-card {
    font-weight: 700;
    display: flex;
    gap: 12px;
    align-items: center;
}
.step-card strong {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(13, 156, 202, 0.12);
    color: var(--primary-dark);
}
.timeline-card .timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.timeline-card .timeline-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.65rem;
}
.timeline-card.level-1 .timeline-icon { background: var(--level-1-soft); color: var(--level-1); }
.timeline-card.level-2 .timeline-icon { background: var(--level-2-soft); color: #b57c00; }
.timeline-card.level-3 .timeline-icon { background: var(--level-3-soft); color: var(--level-3); }
.timeline-card.level-4 .timeline-icon { background: var(--level-4-soft); color: var(--level-4); }
.timeline-card .progress-stars {
    display: flex;
    gap: 6px;
}
.star-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(247, 201, 95, 0.34);
}
.star-dot.is-on { background: #ffc83d; box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.16); }

.level-map-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.level-map-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    background: linear-gradient(180deg, #fff, #f8fbff);
}
.level-map-card::before {
    content: "";
    position: absolute;
    inset: auto -10% -35% auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 156, 202, 0.16), transparent 62%);
}
.level-map-card.level-1 { background: linear-gradient(180deg, #ffffff, #eefcff); }
.level-map-card.level-2 { background: linear-gradient(180deg, #ffffff, #fff8e7); }
.level-map-card.level-3 { background: linear-gradient(180deg, #ffffff, #f1fbed); }
.level-map-card.level-4 { background: linear-gradient(180deg, #ffffff, #eef2ff); }
.level-map-card.locked { opacity: .58; }
.level-scene-icon {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 2.1rem;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.level-map-card.level-1 .level-scene-icon { background: var(--level-1-soft); color: var(--level-1); }
.level-map-card.level-2 .level-scene-icon { background: var(--level-2-soft); color: #b57c00; }
.level-map-card.level-3 .level-scene-icon { background: var(--level-3-soft); color: var(--level-3); }
.level-map-card.level-4 .level-scene-icon { background: var(--level-4-soft); color: var(--level-4); }

.level-header-hero,
.lesson-hero-panel,
.lesson-result-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}
.scene-copy {
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}
.hero-illustration {
    position: relative;
    min-height: 240px;
    border-radius: 30px;
    overflow: hidden;
    padding: 28px;
    background:
        radial-gradient(circle at 20% 18%, rgba(247, 201, 95, 0.28), transparent 20%),
        radial-gradient(circle at 85% 25%, rgba(13, 156, 202, 0.22), transparent 24%),
        linear-gradient(135deg, #ffffff, #edf8ff);
    border: 1px solid rgba(13, 156, 202, 0.14);
}
.hero-illustration .illustration-bubbles {
    position: absolute;
    inset: 0;
}
.bubble {
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.56);
    box-shadow: var(--shadow-soft);
    animation: floaty 4s ease-in-out infinite;
}
.bubble:nth-child(1) { top: 26px; left: 28px; animation-delay: 0s; }
.bubble:nth-child(2) { top: 122px; right: 34px; animation-delay: .8s; }
.bubble:nth-child(3) { bottom: 24px; left: 112px; animation-delay: 1.3s; }
.bubble:nth-child(4) { bottom: 26px; right: 122px; animation-delay: .4s; }

.lesson-card--illustrated {
    align-items: stretch;
}
.lesson-card--illustrated .lesson-left {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.lesson-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.lesson-card--illustrated .lesson-body {
    display: grid;
    gap: 10px;
}
.lesson-card--illustrated .lesson-body strong {
    font-size: 1.08rem;
}
.meta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.activity-shell {
    display: grid;
    gap: 18px;
}
.activity-stage {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
}
.activity-hero {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 15% 20%, rgba(247, 201, 95, 0.22), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(13, 156, 202, 0.22), transparent 22%),
        linear-gradient(135deg, #ffffff, #eef8ff);
    border: 1px solid rgba(13, 156, 202, 0.18);
    box-shadow: var(--shadow-soft);
}
.activity-hero .mascot {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    background: linear-gradient(180deg, #ffefb9, #ffd975);
    box-shadow: 0 16px 32px rgba(247, 201, 95, 0.22);
    margin-bottom: 14px;
}
.activity-stats {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px;
}
.activity-stat {
    padding: 15px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.82);
}
.activity-stat span { display: block; color: var(--muted); font-size: .84rem; }
.activity-stat strong { display: block; font-size: 1.45rem; margin-top: 6px; }
.activity-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.toolbar-card {
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: var(--shadow-soft);
}
.toolbar-card h3 { margin-top: 0; margin-bottom: 8px; }
.lesson-progress-track {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.lesson-progress-dot {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(13, 84, 115, 0.08);
    overflow: hidden;
}
.lesson-progress-dot::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd35f, #0db5e8);
    transition: width .4s ease;
}
.lesson-progress-dot.is-complete::after { width: 100%; }
.lesson-progress-dot.is-current::after { width: 68%; }

.activity-root { display: grid; gap: 18px; }
.activity-item {
    position: relative;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: linear-gradient(180deg, #fff, #f7fbff);
    display: grid;
    gap: 16px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.activity-item h4,
.activity-item strong {
    font-size: 1.15rem;
}
.activity-prompt-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.activity-prompt-line .prompt-badge {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.6rem;
    background: rgba(13, 156, 202, 0.12);
    color: var(--primary-dark);
}
.choice-grid,
.drop-options,
.drop-zones,
.match-grid,
.sequence-list,
.visual-board,
.syllable-bank {
    display: grid;
    gap: 12px;
}
.choice-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choice-card,
.draggable-chip,
.drop-zone,
.match-option,
.sequence-chip {
    position: relative;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 18px 16px;
    cursor: pointer;
    user-select: none;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.choice-card:hover,
.draggable-chip:hover,
.match-option:hover,
.sequence-chip:hover {
    transform: translateY(-2px);
}
.choice-card .choice-icon,
.draggable-chip .choice-icon,
.drop-zone .choice-icon,
.match-option .choice-icon,
.sequence-chip .choice-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    background: rgba(13, 156, 202, 0.1);
}
.choice-card.selected,
.match-option.selected,
.drop-zone.filled,
.sequence-chip.selected {
    border-color: rgba(13,156,202,.45);
    background: rgba(13,156,202,.08);
}
.choice-card.correct,
.drop-zone.correct,
.match-option.correct {
    border-color: rgba(47,165,110,.45);
    background: rgba(47,165,110,.08);
}
.choice-card.incorrect,
.drop-zone.incorrect,
.match-option.incorrect {
    border-color: rgba(217,100,98,.45);
    background: rgba(217,100,98,.08);
}
.drop-options, .drop-zones, .match-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.drop-zone {
    min-height: 110px;
    border-style: dashed;
}
.drop-zone.is-over {
    transform: scale(1.01);
    border-color: rgba(13,156,202,.45);
    background: rgba(13,156,202,.08);
}
.drop-zone-label {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
}
.trace-wrap {
    display: grid;
    gap: 12px;
}
.trace-canvas {
    border: 2px dashed rgba(13,156,202,.28);
    border-radius: 24px;
    background:
        linear-gradient(180deg, #ffffff, #f6fbff),
        radial-gradient(circle at 12% 12%, rgba(247, 201, 95, 0.16), transparent 20%);
    width: 100%;
    height: 320px;
    touch-action: none;
}
.trace-helper {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    color: var(--muted);
    font-weight: 700;
}
.feedback-panel {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: #fbfeff;
    box-shadow: var(--shadow-soft);
}
.feedback-panel.success { background: rgba(47,165,110,.08); border-color: rgba(47,165,110,.28); }
.feedback-panel.error { background: rgba(217,100,98,.08); border-color: rgba(217,100,98,.28); }
.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.feedback-helper {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.7);
    border: 1px dashed rgba(13,156,202,.2);
}
.guided-panel {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(247, 201, 95, 0.2);
    border: 1px solid rgba(247, 201, 95, 0.35);
    color: #694d0d;
    font-weight: 700;
}
.hidden { display: none !important; }

.celebration-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 201, 95, 0.24), transparent 34%),
        linear-gradient(135deg, #ffffff, #eef8ff);
}
.celebration-stars {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.celebration-star {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(255, 201, 95, 0.22);
    color: rgba(111, 81, 16, 0.34);
}
.celebration-star.is-on {
    background: linear-gradient(180deg, #ffe7a1, #ffd166);
    color: #7a5312;
    transform: translateY(-4px);
    box-shadow: 0 12px 22px rgba(247, 201, 95, 0.26);
}
.hero-mini {
    padding: 8px 0;
}

@keyframes floaty {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 1180px) {
    .student-stage,
    .level-header-hero,
    .lesson-hero-panel,
    .lesson-result-grid,
    .activity-stage,
    .hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .hero,
    .marketing-grid,
    .info-grid,
    .dashboard-grid,
    .app-shell,
    .pathway-track,
    .hero-metric-strip,
    .skill-grid,
    .activity-stats {
        grid-template-columns: 1fr;
    }
    .hero-panel-card, .wide-card { grid-column: span 1; }
    .sidebar { position: static; min-height: auto; }
    .two-col, .three-col, .demo-grid { grid-template-columns: 1fr; }
}

.seasonal-banner {
    margin: 16px 24px 0;
    padding: 14px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(79,107,237,.12), rgba(31,158,138,.14));
    border: 1px solid rgba(79,107,237,.18);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.offline-indicator {
    border-radius: 999px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-weight: 700;
    font-size: .88rem;
}

.offline-indicator.is-offline {
    background: rgba(255,159,90,.15);
    border-color: rgba(255,159,90,.35);
    color: #8c520d;
}

.toast-host {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: grid;
    gap: 12px;
    z-index: 60;
}

.save-toast {
    min-width: 240px;
    padding: 14px 16px;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    background: #fff;
    border: 1px solid var(--border);
    transform: translateY(12px);
    opacity: 0;
    transition: transform .24s ease, opacity .24s ease;
    font-weight: 700;
}

.save-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.save-toast--success { border-color: rgba(47,165,110,.32); background: rgba(47,165,110,.08); }
.save-toast--warning { border-color: rgba(255,159,90,.32); background: rgba(255,159,90,.08); }
.save-toast--error { border-color: rgba(217,100,98,.32); background: rgba(217,100,98,.08); }
.save-toast--info { border-color: rgba(79,107,237,.32); background: rgba(79,107,237,.08); }

.mission-card,
.season-banner-card,
.avatar-preview-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: var(--shadow-soft);
}

.avatar-preview-card {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-bottom: 18px;
}

.avatar-preview-face {
    width: 108px;
    height: 108px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--avatar-accent, #4D8BFF) 18%, white);
    border: 2px solid color-mix(in srgb, var(--avatar-accent, #4D8BFF) 45%, white);
    font-size: 3rem;
}

.reading-library-card .lesson-body p:last-child {
    margin-bottom: 0;
}

[data-guided-reading] .reading-line.is-active {
    background: rgba(79,107,237,.12);
    border-radius: 12px;
    padding: 4px 6px;
}

.is-high-contrast {
    --bg: #0e1726;
    --surface: #101d34;
    --text: #f7fbff;
    --muted: #c0d2ef;
    --border: rgba(255,255,255,.2);
    background: #07101d;
}

.is-high-contrast .wide-card,
.is-high-contrast .lesson-card,
.is-high-contrast .instruction-card,
.is-high-contrast .metric-card,
.is-high-contrast .hero-panel-card,
.is-high-contrast .form-card,
.is-high-contrast .feedback-panel,
.is-high-contrast .mission-card,
.is-high-contrast .season-banner-card,
.is-high-contrast .avatar-preview-card {
    background: #11203a;
    color: #f7fbff;
    border-color: rgba(255,255,255,.18);
}

.is-high-contrast .sidebar,
.is-high-contrast .topbar {
    background: #0d1830;
}

.font-medium { font-size: 1.05rem; }
.font-large { font-size: 1.12rem; }
.spacing-wide { letter-spacing: .01em; word-spacing: .1em; }
.spacing-wide p, .spacing-wide li { line-height: 1.9; }

.is-reading-mode .sidebar-card,
.is-reading-mode .route-board,
.is-reading-mode .skill-pill p {
    display: none;
}

.is-reading-mode .page-container {
    max-width: 980px;
    margin-inline: auto;
}

.is-reading-mode .wide-card,
.is-reading-mode .lesson-card,
.is-reading-mode .passage-card {
    max-width: 860px;
    margin-inline: auto;
}

.is-reduced-motion *,
.is-reduced-motion *::before,
.is-reduced-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

.level-map-card,
.pathway-stop,
.hero-illustration {
    --level-accent: #4D8BFF;
}

.level-map-card {
    border-top: 4px solid var(--level-accent);
}

.pathway-stop {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--level-accent) 26%, white);
}

.pathway-stop .stop-icon,
.level-map-card .level-scene-icon,
.hero-illustration .bubble:first-child {
    background: color-mix(in srgb, var(--level-accent) 14%, white);
    color: var(--level-accent);
}

.level-map-illustration,
.level-detail-illustration {
    margin: 14px 0 6px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,247,255,.95));
    border: 1px solid rgba(77, 139, 255, .18);
    padding: 14px;
    display: flex;
    justify-content: center;
}

.level-map-illustration img,
.level-detail-illustration img {
    width: min(100%, 220px);
    height: auto;
    display: block;
}

.reading-library-body {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.reading-library-card .lesson-meta {
    min-width: 230px;
}

.voice-preview {
    width: 100%;
    margin-top: 10px;
}

.ghost-btn.is-recording {
    background: rgba(226, 72, 72, .12);
    border-color: rgba(226, 72, 72, .3);
    color: #a22d2d;
}

.public-body {
    background:
        radial-gradient(circle at 0% 0%, rgba(88, 166, 255, .18), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(255, 192, 107, .18), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(74, 199, 161, .14), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fa 100%);
}

.public-shell {
    max-width: 1360px;
    padding-top: 28px;
}

.landing-page,
.login-page {
    display: grid;
    gap: 28px;
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid rgba(20, 49, 78, .08);
    border-radius: 28px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 40px rgba(21, 56, 88, .08);
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.public-brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f7dcf 0%, #1db0d6 100%);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(15, 125, 207, .22);
}

.public-brand strong,
.public-brand small {
    display: block;
}

.public-brand strong {
    font-size: 1.08rem;
}

.public-brand small {
    color: var(--muted);
    margin-top: 3px;
}

.public-nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.public-nav-links > a:not(.primary-btn):not(.ghost-btn) {
    font-weight: 700;
    color: #415c70;
    padding: 10px 4px;
}

.landing-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: stretch;
}

.landing-hero-copy,
.landing-stage,
.landing-band-card,
.world-card,
.capability-card,
.role-card,
.landing-cta-panel,
.login-showcase,
.login-card {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(19, 50, 68, .08);
    border-radius: 32px;
    box-shadow: 0 22px 54px rgba(19, 50, 68, .10);
    backdrop-filter: blur(16px);
}

.landing-hero-copy {
    padding: 42px;
    background:
        radial-gradient(circle at 18% 22%, rgba(13, 156, 202, .14), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245, 251, 255, .96) 100%);
}

.landing-hero-copy h1,
.login-showcase h1 {
    margin: 14px 0 18px;
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.landing-hero-copy p,
.landing-section-heading p,
.capability-card p,
.role-card li,
.landing-cta-panel p,
.login-showcase p,
.login-showcase-card li,
.login-card-header p,
.login-helper-panel p {
    color: var(--muted);
    line-height: 1.72;
}

.landing-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.landing-proof {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.landing-stage {
    position: relative;
    padding: 28px;
    overflow: hidden;
    display: grid;
    gap: 18px;
    background:
        linear-gradient(180deg, rgba(244,249,255,.96) 0%, rgba(255,255,255,.96) 100%);
}

.landing-stage-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: .7;
    pointer-events: none;
}

.orb-a {
    width: 180px;
    height: 180px;
    right: -40px;
    top: -30px;
    background: rgba(78, 173, 255, .16);
}

.orb-b {
    width: 140px;
    height: 140px;
    left: -20px;
    bottom: -24px;
    background: rgba(255, 197, 102, .18);
}

.landing-stage-card {
    position: relative;
    z-index: 1;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(19, 50, 68, .08);
    background: rgba(255,255,255,.88);
}

.landing-stage-card--focus {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,248,255,.92));
}

.landing-worlds-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}

.world-mini {
    padding: 14px;
    border-radius: 20px;
    display: grid;
    gap: 4px;
    background: #fff;
    border: 1px solid rgba(19, 50, 68, .08);
}

.world-mini span {
    font-size: 1.5rem;
}

.world-mini small {
    color: var(--muted);
}

.world-mini-1 { background: linear-gradient(180deg, rgba(24,168,200,.10), #fff); }
.world-mini-4 { background: linear-gradient(180deg, rgba(95,125,255,.10), #fff); }
.world-mini-7 { background: linear-gradient(180deg, rgba(45,186,138,.10), #fff); }
.world-mini-9 { background: linear-gradient(180deg, rgba(138,99,210,.10), #fff); }

.landing-stage-card--metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.landing-metric {
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(19, 50, 68, .08);
}

.landing-metric strong {
    display: block;
    font-size: 1.45rem;
    margin-bottom: 6px;
}

.landing-metric span {
    color: var(--muted);
    line-height: 1.5;
}

.landing-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.landing-band-card {
    padding: 24px;
}

.landing-band-card span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.landing-band-card strong {
    font-size: 1.05rem;
    line-height: 1.5;
}

.landing-section {
    display: grid;
    gap: 22px;
}

.landing-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
}

.landing-section-heading h2 {
    margin: 10px 0 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.04em;
}

.landing-section-heading p {
    max-width: 520px;
    margin: 0;
}

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

.world-card {
    padding: 22px;
    position: relative;
    overflow: hidden;
}

.world-card span,
.capability-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.world-card strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.world-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.62;
}

.world-card-1 span { background: rgba(24,168,200,.14); }
.world-card-2 span { background: rgba(255,202,83,.18); }
.world-card-3 span { background: rgba(112,201,110,.16); }
.world-card-4 span { background: rgba(95,125,255,.14); }
.world-card-5 span { background: rgba(239,125,87,.16); }
.world-card-6 span { background: rgba(95,134,255,.14); }
.world-card-7 span { background: rgba(45,186,138,.14); }
.world-card-8 span { background: rgba(240,169,62,.16); }
.world-card-9 span { background: rgba(138,99,210,.16); }

.capability-grid,
.role-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
}

.capability-card,
.role-card {
    padding: 24px;
}

.capability-card h3,
.role-card h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}

.capability-icon {
    background: linear-gradient(135deg, rgba(13,156,202,.14), rgba(247,201,95,.18));
}

.role-card ul,
.login-showcase-card ul {
    margin: 14px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.role-badge,
.login-quick-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(13,156,202,.10);
    color: var(--primary-dark);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.role-card-student { background: linear-gradient(180deg, rgba(237,247,255,.9), rgba(255,255,255,.92)); }
.role-card-teacher { background: linear-gradient(180deg, rgba(244,248,255,.92), rgba(255,255,255,.92)); }
.role-card-admin { background: linear-gradient(180deg, rgba(255,247,234,.92), rgba(255,255,255,.92)); }

.landing-cta-panel {
    padding: 28px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background:
        radial-gradient(circle at 10% 10%, rgba(13,156,202,.14), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.94));
}

.landing-cta-panel h2 {
    margin: 10px 0 12px;
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -.04em;
}

.login-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    min-height: calc(100vh - 130px);
}

.login-showcase {
    padding: 38px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(13,156,202,.14), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(247,201,95,.16), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,248,255,.94));
}

.login-showcase-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 22px;
}

.login-showcase-card,
.login-helper-panel,
.login-demo-item {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(19,50,68,.08);
    border-radius: 24px;
    padding: 18px;
}

.login-showcase-card strong,
.login-helper-panel strong,
.login-demo-item strong {
    display: block;
    margin-bottom: 8px;
}

.login-quick-access {
    margin-top: 22px;
    display: grid;
    gap: 14px;
}

.login-demo-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.login-demo-item span {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.45;
}

.login-card {
    padding: 34px;
    display: grid;
    align-content: center;
    gap: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,251,255,.95));
}

.login-card-header h2 {
    margin: 10px 0 10px;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    letter-spacing: -.04em;
}

.login-card label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.login-card input {
    width: 100%;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #fcfdff;
}

.password-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.password-toggle {
    padding-inline: 18px;
    min-width: 112px;
}

.login-submit {
    width: 100%;
    justify-content: center;
}

.login-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: .95rem;
}

.login-helper-panel {
    background: linear-gradient(180deg, rgba(248,251,255,.96), rgba(255,255,255,.96));
}

@media (max-width: 1120px) {
    .landing-hero,
    .login-grid,
    .capability-grid,
    .role-grid,
    .landing-band,
    .landing-section-heading,
    .landing-cta-panel {
        grid-template-columns: 1fr;
        display: grid;
    }

    .landing-stage-card--metrics,
    .login-demo-list,
    .login-showcase-cards {
        grid-template-columns: 1fr;
    }

    .world-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .public-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-nav-links {
        width: 100%;
    }

    .world-grid,
    .capability-grid,
    .role-grid,
    .landing-band {
        grid-template-columns: 1fr;
    }

    .landing-hero-copy,
    .landing-stage,
    .login-showcase,
    .login-card,
    .landing-cta-panel {
        padding: 24px;
    }

    .landing-hero-copy h1,
    .login-showcase h1 {
        font-size: clamp(2.15rem, 9vw, 3.2rem);
    }

    .password-field {
        grid-template-columns: 1fr;
    }

    .login-links {
        flex-direction: column;
    }
}

.ultra-login-page {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #060e18 0%, #0a1d30 60%, #091524 100%);
}

.ultra-login-shell {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 0;
    width: 100%;
    min-height: 100vh;
}

.ultra-login-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.ultra-login-scene {
    padding: 34px;
    background: transparent;
    display: grid;
    gap: 24px;
    color: #fff;
}

.ultra-login-card {
    padding: 32px;
    align-content: start;
    background:
        radial-gradient(circle at 100% 0%, rgba(88, 166, 255, .12), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.96));
    display: grid;
    gap: 20px;
}

.ultra-login-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .7;
    pointer-events: none;
}

.ultra-login-glow-a {
    width: 220px;
    height: 220px;
    right: -70px;
    top: -40px;
    background: rgba(73, 171, 255, .16);
}

.ultra-login-glow-b {
    width: 180px;
    height: 180px;
    left: -40px;
    bottom: -30px;
    background: rgba(255, 193, 93, .16);
}

.ultra-login-brand,
.ultra-login-ribbon,
.ultra-login-worlds,
.ultra-login-floating,
.ultra-login-card-top,
.ultra-login-support-grid,
.ultra-login-footer {
    position: relative;
    z-index: 1;
}

.ultra-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ultra-login-brand-mark {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0b7ec2 0%, #20b0d9 100%);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(11, 126, 194, .24);
}

.ultra-login-brand strong,
.ultra-login-brand small {
    display: block;
}

.ultra-login-brand strong {
    font-size: 1.08rem;
    color: #fff;
}

.ultra-login-brand small {
    color: rgba(255,255,255,.55);
    margin-top: 4px;
}

.ultra-login-copy h1 {
    margin: 10px 0 12px;
    font-size: clamp(1.55rem, 2.8vw, 2.3rem);
    line-height: 1.22;
    letter-spacing: 0;
    color: #fff;
}

.ultra-login-copy p {
    max-width: 480px;
    font-size: clamp(.88rem, 1.2vw, .97rem);
    color: rgba(255,255,255,.68);
}

.ultra-login-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ultra-login-ribbon span {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .79rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
}

.ultra-login-worlds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.ultra-world-card {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}
.ultra-floating-card,
.ultra-support-card {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(18, 41, 58, .08);
    border-radius: 24px;
    box-shadow: 0 18px 36px rgba(18, 41, 58, .07);
}

.ultra-world-card {
    padding: 18px;
    display: grid;
    gap: 8px;
}

.ultra-world-card span {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(88, 166, 255, .12);
}

.ultra-world-card strong {
    font-size: 1.05rem;
}

.ultra-world-card p,
.ultra-floating-card p,
.ultra-support-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.62;
}

.ultra-world-card-a span { background: rgba(37, 173, 205, .14); }
.ultra-world-card-b span { background: rgba(95, 125, 255, .14); }
.ultra-world-card-c span { background: rgba(240, 169, 62, .16); }

.ultra-login-floating {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ultra-floating-card,
.ultra-support-card {
    padding: 18px;
}

.ultra-floating-card strong,
.ultra-support-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
}

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

.ultra-back-link {
    font-size: .92rem;
    font-weight: 800;
    color: #4d6980;
}

.ultra-login-header h2 {
    margin: 10px 0 10px;
    font-size: clamp(2.2rem, 3.4vw, 3.1rem);
    letter-spacing: -.05em;
}

.ultra-login-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.68;
}

.ultra-login-fieldset {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}

.ultra-password-field {
    grid-template-columns: 1fr auto;
}

.ultra-login-submit {
    width: 100%;
    min-height: 58px;
    font-size: 1rem;
    box-shadow: 0 18px 34px rgba(13, 156, 202, .24);
}

.ultra-login-meta {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: .94rem;
    font-weight: 800;
}

.ultra-login-meta a {
    color: #4d6980;
}

.ultra-login-support-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 14px;
}

.ultra-support-card {
    display: grid;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.9));
}

.ultra-support-card .ghost-btn {
    width: fit-content;
}

.ultra-credentials {
    display: grid;
    gap: 10px;
}

.ultra-credentials div {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(18, 41, 58, .07);
}

.ultra-credentials span,
.ultra-credentials small {
    display: block;
}

.ultra-credentials span {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #597489;
    font-weight: 900;
    margin-bottom: 4px;
}

.ultra-credentials small {
    color: #203746;
    font-size: .92rem;
}

.ultra-password-hint {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 244, 214, .78);
    color: #7b5a15 !important;
}

.ultra-login-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .ultra-login-shell {
        grid-template-columns: 1fr;
    }
    .ultra-login-scene {
        display: none;
    }
    .ultra-login-card {
        min-height: 100vh;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .ultra-login-card { padding: 28px 20px; }
}


/* ====================================================
   MEJORAS DE INTERFAZ - Aprendizzaje 2026
   ==================================================== */

/* 1. Tipografia local y estable */
:root {
    --font-heading: "Trebuchet MS", "Segoe UI", "Arial Rounded MT Bold", sans-serif;
    --font-body:    "Segoe UI", Tahoma, Verdana, sans-serif;
}
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
.eyebrow, .primary-btn, .secondary-btn, .ghost-btn,
.audio-pill, .mini-audio-btn, .nav-link,
.tiny-pill, .pill, .route-chip, .lesson-status-badge { font-family: var(--font-body); }

/* 2. Micro-animaciones */
@keyframes bounceIn {
    0%   { transform: scale(.72); opacity: 0; }
    55%  { transform: scale(1.08); opacity: 1; }
    80%  { transform: scale(.97); }
    100% { transform: scale(1); }
}
@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    18%  { transform: translateX(-9px); }
    37%  { transform: translateX(9px); }
    55%  { transform: translateX(-5px); }
    75%  { transform: translateX(5px); }
}
@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateY(100px) rotate(540deg) scale(.35); opacity: 0; }
}
.choice-card.correct, .drop-zone.correct, .match-option.correct {
    animation: bounceIn .42s cubic-bezier(.4,0,.2,1);
}
.choice-card.incorrect, .drop-zone.incorrect, .match-option.incorrect {
    animation: shakeX .4s ease;
}
.confetti-particle {
    position: absolute; width: 9px; height: 9px;
    border-radius: 3px; pointer-events: none; z-index: 50;
    animation: confettiFall .85s ease forwards;
}

/* 3. Mascota reactiva */
@keyframes mascotBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    28%  { transform: translateY(-18px) scale(1.14); }
    55%  { transform: translateY(-7px) scale(1.06); }
}
@keyframes mascotShake {
    0%, 100% { transform: rotate(0deg); }
    20%  { transform: rotate(-13deg); }
    40%  { transform: rotate(13deg); }
    60%  { transform: rotate(-7deg); }
    80%  { transform: rotate(7deg); }
}
@keyframes mascotCelebrate {
    0%   { transform: scale(1) rotate(0deg); }
    20%  { transform: scale(1.32) rotate(-14deg); }
    45%  { transform: scale(1.26) rotate(14deg); }
    70%  { transform: scale(1.16) rotate(-6deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.activity-hero .mascot.is-correct   { animation: mascotBounce    .65s ease; }
.activity-hero .mascot.is-wrong     { animation: mascotShake     .45s ease; }
.activity-hero .mascot.is-celebrate { animation: mascotCelebrate .75s cubic-bezier(.4,0,.2,1); }

/* 4. XP bar en sidebar */
.sidebar-xp {
    padding: 14px 16px; background: rgba(255,255,255,.09);
    border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.sidebar-xp-label {
    display: flex; justify-content: space-between;
    color: rgba(232,243,251,.75); font-size: .79rem;
    font-weight: 800; margin-bottom: 8px; letter-spacing: .03em; font-family: var(--font-body);
}
.sidebar-xp-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.sidebar-xp-fill {
    height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #ffd35f, #ffe99a);
    width: 0%; transition: width 1.3s cubic-bezier(.4,0,.2,1);
}
.sidebar-streak-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; color: rgba(232,243,251,.68);
    font-size: .81rem; font-weight: 700; font-family: var(--font-body);
}
.sidebar-streak-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,201,95,.18); border-radius: 999px;
    padding: 4px 10px; color: #ffe394; font-weight: 900; font-size: .83rem;
}
.nav-icon { display: inline-block; width: 20px; text-align: center; margin-right: 4px; flex-shrink: 0; }
.nav-link { display: flex; align-items: center; }

/* 5. Dark toggle button */
.dark-toggle {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid rgba(19,50,68,.08); background: rgba(19,50,68,.06);
    cursor: pointer; display: grid; place-items: center;
    font-size: 1rem; line-height: 1; flex-shrink: 0;
    transition: background .2s, border-color .2s, transform .2s;
}
.dark-toggle:hover { transform: rotate(18deg); border-color: rgba(13,156,202,.38); background: rgba(13,156,202,.1); }

/* 5b. Dark mode */
html[data-theme="dark"] {
    --bg: #0d1820; --bg-soft: #132030;
    --surface: rgba(17, 29, 42, 0.97); --surface-strong: #172840; --surface-alt: #192d42;
    --text: #deedf8; --muted: #6f90a6; --border: #243850; --border-strong: #314e68;
    --primary: #1cb6ec; --primary-dark: #54d0f6; --success: #31c078; --error: #e57070;
    --action-primary: linear-gradient(180deg, #16abde 0%, #0c87b8 100%);
    --action-secondary: linear-gradient(180deg,rgba(255,245,214,.14),rgba(255,232,162,.08));
    --action-ghost: rgba(22, 38, 56, 0.92);
    --frame-default: linear-gradient(180deg,rgba(17,29,42,.98),rgba(13,23,36,.96));
    --sidebar: linear-gradient(180deg, #070e17 0%, #040b12 100%);
    --shadow: 0 24px 60px rgba(2,8,16,.45); --shadow-soft: 0 16px 34px rgba(2,8,16,.3);
}
html[data-theme="dark"] body {
    background: radial-gradient(circle at top left,rgba(247,201,95,.05),transparent 22%),
        radial-gradient(circle at top right,rgba(13,156,202,.06),transparent 20%),
        linear-gradient(180deg,#0d1820 0%,#09131e 100%);
}
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #d8ecf8; }
html[data-theme="dark"] .panel, html[data-theme="dark"] .wide-card, html[data-theme="dark"] .hero-panel-card,
html[data-theme="dark"] .metric-card, html[data-theme="dark"] .result-hero, html[data-theme="dark"] .instruction-card,
html[data-theme="dark"] .profile-card, html[data-theme="dark"] .table-card, html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .route-board, html[data-theme="dark"] .pathway-note, html[data-theme="dark"] .scene-copy,
html[data-theme="dark"] .toolbar-card, html[data-theme="dark"] .activity-item, html[data-theme="dark"] .level-map-card,
html[data-theme="dark"] .timeline-card, html[data-theme="dark"] .badge-card, html[data-theme="dark"] .mission-card,
html[data-theme="dark"] .skill-pill, html[data-theme="dark"] .level-journey-card, html[data-theme="dark"] .hero-metric,
html[data-theme="dark"] .activity-stat, html[data-theme="dark"] .demo-card, html[data-theme="dark"] .word-bank,
html[data-theme="dark"] .text-model-card, html[data-theme="dark"] .diagnostic-item, html[data-theme="dark"] .feedback-panel
    { background: var(--frame-default); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .lesson-card .lesson-body p, html[data-theme="dark"] .pathway-note p,
html[data-theme="dark"] .scene-copy p, html[data-theme="dark"] .hero-illustration p,
html[data-theme="dark"] .instruction-card p { color: var(--muted); }
html[data-theme="dark"] .choice-card, html[data-theme="dark"] .match-option,
html[data-theme="dark"] .sequence-chip, html[data-theme="dark"] .draggable-chip
    { background: #172840; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .progress-orbit {
    background: radial-gradient(circle at 15% 25%,rgba(13,156,202,.11),transparent 28%),
        radial-gradient(circle at 80% 20%,rgba(247,201,95,.08),transparent 24%),
        linear-gradient(135deg,#172d3e,#0f1e2e); border-color: rgba(13,156,202,.14);
}
html[data-theme="dark"] .activity-hero {
    background: radial-gradient(circle at 15% 20%,rgba(247,201,95,.07),transparent 24%),
        radial-gradient(circle at 85% 18%,rgba(13,156,202,.08),transparent 22%),
        linear-gradient(135deg,#172d3e,#0d1e2e);
}
html[data-theme="dark"] .hero-illustration {
    background: radial-gradient(circle at 20% 18%,rgba(247,201,95,.07),transparent 20%),
        radial-gradient(circle at 85% 25%,rgba(13,156,202,.07),transparent 24%),
        linear-gradient(135deg,#172d3e,#0f1e2e);
}
html[data-theme="dark"] .progress-bar-shell { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .eyebrow { background: rgba(13,156,202,.18); color: var(--primary-dark); }
html[data-theme="dark"] .eyebrow.sun { background: rgba(247,201,95,.15); color: #fce08a; }
html[data-theme="dark"] .ghost-btn { background: rgba(22,38,56,.9); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .auth-card input, html[data-theme="dark"] .auth-card select,
html[data-theme="dark"] .form-card input, html[data-theme="dark"] .form-card select,
html[data-theme="dark"] .form-card textarea, html[data-theme="dark"] .writing-box
    { background: #152232; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .table-card thead th { background: linear-gradient(180deg,#132030,#172d40); color: #6a9ab5; }
html[data-theme="dark"] .table-card tbody td { color: #c0d8e8; }
html[data-theme="dark"] .table-card tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
html[data-theme="dark"] .table-card tbody tr:hover td { background: rgba(13,156,202,.07); }
html[data-theme="dark"] .offline-indicator { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .bubble { background: rgba(17,29,42,.84); border-color: rgba(36,56,80,.55); }
html[data-theme="dark"] .drop-zone { background: #172840; border-color: var(--border); }
html[data-theme="dark"] .secondary-btn { background: linear-gradient(180deg,rgba(255,245,214,.14),rgba(255,232,162,.08)); color: #fce08a; border-color: rgba(247,201,95,.22); }
html[data-theme="dark"] .flash-success { background: rgba(47,165,110,.12); color: #5de49a; border-color: rgba(47,165,110,.25); }
html[data-theme="dark"] .flash-error   { background: rgba(217,100,98,.12); color: #f08080; border-color: rgba(217,100,98,.25); }
html[data-theme="dark"] .pathway-stop  { background: #172840; }
html[data-theme="dark"] .lesson-progress-dot { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .word-chip { background: #152232; border-color: var(--border); color: var(--primary-dark); }
html[data-theme="dark"] .word-chip:hover { background: #1c3048; }
html[data-theme="dark"] .guided-panel { background: rgba(247,201,95,.12); border-color: rgba(247,201,95,.22); color: #fce08a; }
html[data-theme="dark"] .topbar { background: rgba(13,24,36,.95); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .save-toast { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .save-toast--success { border-color: rgba(49,192,120,.32); background: rgba(49,192,120,.08); }
html[data-theme="dark"] .save-toast--error   { border-color: rgba(229,112,112,.32); background: rgba(229,112,112,.08); }
html[data-theme="dark"] .save-toast--info    { border-color: rgba(28,182,236,.28); background: rgba(28,182,236,.06); }
html[data-theme="dark"] .onboarding-tooltip  { background: var(--surface-strong); border-color: var(--border); }

/* Transicion suave de tema */
html, body, .panel, .wide-card, .lesson-card, .topbar, .sidebar,
.choice-card, .match-option, .sequence-chip, .activity-item, .level-map-card,
.hero-metric, .activity-stat, .skill-pill, .route-board, .toolbar-card, .scene-copy,
.pathway-note, .badge-card, .mission-card, .level-journey-card, .pathway-stop,
.hero-illustration, .progress-orbit, .activity-hero, .feedback-panel,
.ghost-btn, .secondary-btn { transition: background-color .28s ease, border-color .22s ease, color .18s ease, box-shadow .28s ease !important; }

/* 6. Radar chart */
.radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.radar-svg { overflow: visible; }
.radar-grid { fill: none; stroke: var(--border); stroke-width: 1.2; }
.radar-axis { stroke: var(--border); stroke-width: 1.2; }
.radar-area { fill: rgba(13,156,202,.16); stroke: #0db5e8; stroke-width: 2.5; stroke-linejoin: round; }
.radar-dot { fill: #0db5e8; }
.radar-label { font-size: 10.5px; font-weight: 800; fill: var(--muted); font-family: var(--font-body, sans-serif); }
html[data-theme="dark"] .radar-grid, html[data-theme="dark"] .radar-axis { stroke: var(--border); }
html[data-theme="dark"] .radar-label { fill: var(--muted); }
html[data-theme="dark"] .radar-area { fill: rgba(28,182,236,.14); stroke: #1cb6ec; }
html[data-theme="dark"] .radar-dot { fill: #1cb6ec; }

/* 7. Timer circular */
.activity-ring-host { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.activity-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.activity-ring-svg { transform: rotate(-90deg); position: absolute; inset: 0; }
.ring-track { fill: none; stroke: rgba(13,84,115,.1); stroke-width: 5; }
.ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .95s linear; }
.ring-label { font-size: .72rem; font-weight: 900; color: var(--primary-dark); text-align: center; line-height: 1.1; font-family: var(--font-body); position: relative; z-index: 1; }
html[data-theme="dark"] .ring-track { stroke: rgba(255,255,255,.08); }

/* 8. Lesson cards enriquecidas */
@keyframes lessonPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(13,156,202,.14), 0 14px 28px rgba(13,156,202,.1); }
    50%       { box-shadow: 0 0 0 7px rgba(13,156,202,.22), 0 18px 36px rgba(13,156,202,.18); }
}
.lesson-card--next { border-color: rgba(13,156,202,.52) !important; animation: lessonPulse 2.8s ease-in-out infinite; }
.lesson-score-bar { width: 100%; height: 5px; border-radius: 999px; background: rgba(13,84,115,.08); overflow: hidden; margin-top: 7px; }
.lesson-score-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd35f, #0db5e8); transition: width .75s .1s ease; }
.lesson-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .73rem; font-weight: 900; padding: 4px 9px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.badge--mastered   { background: rgba(47,165,110,.14); color: #196140; }
.badge--completed  { background: rgba(13,156,202,.12); color: var(--primary-dark); }
.badge--inprogress { background: rgba(247,201,95,.24); color: #7a5312; }
.badge--new        { background: rgba(19,50,68,.07); color: var(--muted); }
.badge--locked     { background: rgba(19,50,68,.05); color: rgba(19,50,68,.35); }
html[data-theme="dark"] .badge--mastered   { background: rgba(49,192,120,.14); color: #5de49a; }
html[data-theme="dark"] .badge--completed  { background: rgba(28,182,236,.14); color: var(--primary-dark); }
html[data-theme="dark"] .badge--inprogress { background: rgba(247,201,95,.16); color: #fce08a; }
html[data-theme="dark"] .badge--new        { background: rgba(255,255,255,.06); color: var(--muted); }
html[data-theme="dark"] .lesson-score-bar  { background: rgba(255,255,255,.08); }

/* 9. Level journey path */
.level-journey { padding: 8px 0 16px; }
.level-journey-path { display: flex; flex-direction: column; }
.level-journey-node { display: grid; grid-template-columns: 86px 1fr; gap: 20px; align-items: flex-start; position: relative; padding-bottom: 6px; }
.level-journey-node:not(:last-child) > .level-journey-spine {
    position: absolute; left: 43px; top: 86px; width: 3px; bottom: 0;
    background: linear-gradient(180deg,rgba(13,156,202,.32),rgba(13,156,202,.06));
    border-radius: 2px; min-height: 20px;
}
.level-journey-node.is-current > .level-journey-spine { background: linear-gradient(180deg,#0db5e8,rgba(13,156,202,.1)); }
.level-journey-icon-wrap { width: 80px; height: 80px; border-radius: 28px; display: grid; place-items: center; font-size: 2.1rem; position: relative; z-index: 1; flex-shrink: 0; transition: transform .22s ease, box-shadow .22s ease; }
.level-journey-node:not(.locked) .level-journey-icon-wrap:hover { transform: scale(1.07) translateY(-2px); }
.level-journey-node.is-current .level-journey-icon-wrap { animation: lessonPulse 2.8s ease-in-out infinite; }
.level-journey-node.locked .level-journey-icon-wrap { filter: grayscale(.7); opacity: .55; }
.level-journey-card { padding: 18px 20px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg,#fff,#f8fbff); box-shadow: var(--shadow-soft); display: grid; gap: 10px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; margin-top: 4px; }
.level-journey-node:not(.locked) .level-journey-card:hover { transform: translateX(5px); box-shadow: var(--shadow); border-color: rgba(13,156,202,.3); }
.level-journey-node.is-current .level-journey-card { border-color: rgba(13,156,202,.42); background: linear-gradient(180deg,#eef8ff,#fff); }
.level-journey-node.locked .level-journey-card { opacity: .62; }
.level-journey-card h3 { font-size: var(--title-md); margin: 0; }
.level-journey-card p  { margin: 0; color: var(--muted); font-size: .92rem; }
html[data-theme="dark"] .level-journey-card { background: var(--frame-default); border-color: var(--border); }
html[data-theme="dark"] .level-journey-node.is-current .level-journey-card { border-color: rgba(28,182,236,.4); background: linear-gradient(180deg,rgba(13,156,202,.08),var(--frame-default)); }

/* 10. Onboarding overlay */
.onboarding-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.onboarding-spotlight { position: absolute; border-radius: 22px; box-shadow: 0 0 0 4000px rgba(6,14,24,.76); background: transparent; transition: top .38s cubic-bezier(.4,0,.2,1), left .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 9001; }
.onboarding-tooltip { position: fixed; background: var(--surface-strong, #fff); border-radius: 22px; padding: 22px 24px; box-shadow: 0 28px 60px rgba(6,14,24,.32); border: 1px solid var(--border, rgba(19,50,68,.12)); width: 294px; pointer-events: all; z-index: 9002; animation: bounceIn .3s ease; }
.onboarding-tooltip h4 { margin: 0 0 8px; font-size: 1.04rem; color: var(--primary-dark); font-family: var(--font-heading, sans-serif); }
.onboarding-tooltip p  { margin: 0 0 16px; color: var(--muted); font-size: .91rem; line-height: 1.56; }
.onboarding-step-badge { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); margin-bottom: 6px; display: block; }
.onboarding-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onboarding-dots { display: flex; gap: 6px; }
.onboarding-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border, #d7e5f2); transition: background .2s, transform .2s; }
.onboarding-dot.is-active { background: var(--primary); transform: scale(1.35); }
.onboarding-actions { display: flex; gap: 8px; align-items: center; }
.onboarding-skip { font-size: .81rem; color: var(--muted); cursor: pointer; font-weight: 700; background: none; border: none; padding: 4px 6px; border-radius: 8px; transition: color .15s; font-family: var(--font-body); }
.onboarding-skip:hover { color: var(--text); }
.onboarding-next { background: var(--action-primary); color: #fff; border: none; border-radius: 999px; padding: 10px 18px; font-weight: 900; font-size: .87rem; cursor: pointer; transition: transform .15s ease; font-family: var(--font-body); }
.onboarding-next:hover { transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   11. LOGIN PAGE — Ultra redesign (2026-04)
   ═══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginSlideIn {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}
@keyframes loginOrbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(6px, -9px) scale(1.04); }
    66%      { transform: translate(-5px, 4px) scale(.97); }
}
@keyframes loginShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%       { transform: translateY(-16px) rotate(3deg); }
}

/* Page shell */
.ultra-login-page {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #060e18 0%, #0a1d30 60%, #091524 100%);
}
.ultra-login-shell {
    display: grid;
    grid-template-columns: 1fr 480px;
    width: 100%;
    min-height: 100vh;
}

/* ── LEFT SCENE ── */
.ultra-login-scene {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: #fff;
}

/* Background glows */
.ultra-login-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: .55;
}
.ultra-login-glow-a {
    width: 480px; height: 480px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(13,156,202,.28) 0%, transparent 70%);
}
.ultra-login-glow-b {
    width: 360px; height: 360px;
    bottom: -80px; right: -60px;
    background: radial-gradient(circle, rgba(247,201,95,.2) 0%, transparent 70%);
}

/* Floating orbs */
.login-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: loginOrbDrift var(--orb-dur, 8s) var(--orb-delay, 0s) ease-in-out infinite;
}

/* Mascot */
.login-mascot {
    position: absolute;
    top: clamp(20px, 5%, 40px);
    right: clamp(20px, 5%, 40px);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    animation: mascotFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(13,156,202,.35));
    z-index: 2;
    user-select: none;
}

/* Brand */
.ultra-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: loginSlideIn .55s .1s ease both;
    position: relative;
    z-index: 2;
}
.ultra-login-brand-mark {
    width: 48px; height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0db5e8 0%, #0693c0 100%);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    font-family: var(--font-heading);
    color: #fff;
    box-shadow: 0 6px 20px rgba(13,181,232,.4);
    flex-shrink: 0;
}
.ultra-login-brand strong {
    display: block;
    font-size: 1.18rem;
    font-family: var(--font-heading);
    letter-spacing: .02em;
    color: #fff;
}
.ultra-login-brand small {
    font-size: .78rem;
    color: rgba(255,255,255,.58);
    letter-spacing: .03em;
}

/* Copy / headline */
.ultra-login-copy {
    position: relative;
    z-index: 2;
    animation: loginFadeUp .55s .22s ease both;
}
.ultra-login-copy .eyebrow {
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .74rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}
.ultra-login-copy h1 {
    font-size: clamp(1.55rem, 2.8vw, 2.3rem);
    font-family: var(--font-heading);
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.22;
}
.ultra-login-copy p {
    color: rgba(255,255,255,.68);
    font-size: clamp(.88rem, 1.2vw, .97rem);
    line-height: 1.65;
    max-width: 480px;
    margin: 0;
}

/* Feature ribbon */
.ultra-login-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 2;
    animation: loginFadeUp .55s .34s ease both;
}
.ultra-login-ribbon span {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .79rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
}

/* Stats strip */
.login-stats-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    animation: loginFadeUp .55s .44s ease both;
}
.login-stat-chip {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    padding: 12px 18px;
    min-width: 76px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: background .2s ease, transform .2s ease;
}
.login-stat-chip:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.login-stat-chip strong {
    display: block;
    font-size: 1.45rem;
    font-weight: 900;
    font-family: var(--font-heading);
    color: #fff;
    line-height: 1;
}
.login-stat-chip span {
    display: block;
    font-size: .73rem;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
    font-weight: 600;
}

/* World cards */
.ultra-login-worlds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    position: relative;
    z-index: 2;
    animation: loginFadeUp .55s .54s ease both;
}
.ultra-world-card {
    border-radius: 20px;
    padding: 18px 16px;
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: default;
}
.ultra-world-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.ultra-world-card-a { background: rgba(13,156,202,.12); }
.ultra-world-card-b { background: rgba(47,165,110,.1); }
.ultra-world-card-c { background: rgba(247,201,95,.1); }
.ultra-world-card > span { font-size: 1.55rem; display: block; margin-bottom: 6px; }
.ultra-world-card strong { font-size: .9rem; font-family: var(--font-heading); color: #fff; display: block; margin-bottom: 4px; }
.ultra-world-card p { font-size: .78rem; color: rgba(255,255,255,.58); margin: 0; line-height: 1.5; }

/* ── RIGHT CARD ── */
.ultra-login-card {
    background: #fff;
    padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    position: relative;
    box-shadow: -8px 0 48px rgba(6,14,24,.18);
}
.ultra-login-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ultra-login-card-top .eyebrow {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
}
.ultra-back-link {
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    transition: color .15s;
}
.ultra-back-link:hover { color: var(--primary-dark); }

.ultra-login-header { animation: loginFadeUp .45s .1s ease both; }
.ultra-login-header h2 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-family: var(--font-heading); margin: 0 0 8px; color: var(--primary-dark); }
.ultra-login-header p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* Fieldset */
.ultra-login-fieldset {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: loginFadeUp .45s .18s ease both;
}
.ultra-login-fieldset label { display: flex; flex-direction: column; gap: 6px; }
.ultra-login-fieldset label > span { font-size: .83rem; font-weight: 700; color: var(--primary-dark); }

/* Icon-prefixed input wrap */
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-icon {
    position: absolute;
    left: 14px;
    font-size: 1.05rem;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    display: flex;
    align-items: center;
}
.login-input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    font-size: .95rem;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--surface, #f8fbff);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    outline: none;
    box-sizing: border-box;
}
.login-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,156,202,.14);
    background: #fff;
}
.login-input-wrap input::placeholder { color: var(--muted); opacity: .7; }

/* Password with toggle */
.ultra-password-field input { padding-right: 90px; }
.password-toggle {
    position: absolute;
    right: 10px;
    font-size: .78rem;
    font-weight: 800;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    font-family: var(--font-body);
    transition: background .15s;
}
.password-toggle:hover { background: rgba(13,156,202,.1); }

/* Submit button with shimmer */
.ultra-login-submit {
    width: 100%;
    font-size: 1rem;
    padding: 15px;
    border-radius: 16px;
    background: linear-gradient(270deg, #0db5e8, #0693c0, #0db5e8);
    background-size: 300% auto;
    animation: loginFadeUp .45s .26s ease both, loginShimmer 4s linear infinite;
    transition: transform .2s ease, box-shadow .2s ease;
    font-family: var(--font-heading);
    letter-spacing: .04em;
}
.ultra-login-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,181,232,.38); }
.ultra-login-submit:disabled { animation: none; background: var(--border); cursor: not-allowed; transform: none; box-shadow: none; }

/* Divider */
.ultra-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
}
.ultra-login-divider::before,
.ultra-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Demo tabs */
.login-demo-label {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 8px;
}
.login-demo-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.login-demo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface, #f8fbff);
    font-size: .82rem;
    font-weight: 800;
    color: var(--primary-dark);
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.login-demo-tab:hover {
    border-color: rgba(13,156,202,.4);
    background: rgba(13,156,202,.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13,156,202,.12);
}
.login-demo-tab.is-active {
    border-color: var(--primary);
    background: rgba(13,156,202,.1);
    box-shadow: 0 0 0 3px rgba(13,156,202,.16);
}
.demo-role-icon { font-size: 1.35rem; }
.login-demo-note {
    font-size: .78rem;
    color: var(--muted);
    margin: 8px 0 0;
    text-align: center;
}

/* Meta links */
.ultra-login-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.ultra-login-meta a {
    font-size: .82rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: color .15s;
}
.ultra-login-meta a:hover { color: var(--primary-dark); text-decoration: underline; }

/* Footer trust pills */
.ultra-login-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 4px;
}
.ultra-trust-pill {
    font-size: .74rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(13,156,202,.07);
    color: var(--primary-dark);
    border: 1px solid rgba(13,156,202,.15);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .ultra-login-shell { grid-template-columns: 1fr; }
    .ultra-login-scene { display: none; }
    .ultra-login-card {
        min-height: 100vh;
        justify-content: center;
        box-shadow: none;
    }
}
@media (max-width: 480px) {
    .ultra-login-card { padding: 28px 20px; }
    .login-demo-tabs { grid-template-columns: repeat(3, 1fr); }
}

/* ── DARK MODE overrides for login ── */
html[data-theme="dark"] .ultra-login-card {
    background: #0d1e2e;
    box-shadow: -8px 0 48px rgba(0,0,0,.45);
}
html[data-theme="dark"] .ultra-login-header h2 { color: #e8f4fd; }
html[data-theme="dark"] .ultra-login-header p  { color: rgba(200,225,245,.55); }
html[data-theme="dark"] .ultra-login-fieldset label > span { color: #c8e1f5; }
html[data-theme="dark"] .login-input-wrap input {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #e8f4fd;
}
html[data-theme="dark"] .login-input-wrap input:focus {
    background: rgba(13,156,202,.1);
    border-color: rgba(13,181,232,.55);
    box-shadow: 0 0 0 3px rgba(13,181,232,.15);
}
html[data-theme="dark"] .login-input-wrap input::placeholder { color: rgba(200,225,245,.35); }
html[data-theme="dark"] .ultra-login-divider { color: rgba(200,225,245,.4); }
html[data-theme="dark"] .ultra-login-divider::before,
html[data-theme="dark"] .ultra-login-divider::after { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .login-demo-tab {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
    color: #c8e1f5;
}
html[data-theme="dark"] .login-demo-tab:hover {
    background: rgba(13,156,202,.1);
    border-color: rgba(13,181,232,.35);
}
html[data-theme="dark"] .login-demo-tab.is-active {
    background: rgba(13,156,202,.16);
    border-color: rgba(13,181,232,.55);
}
html[data-theme="dark"] .login-demo-label,
html[data-theme="dark"] .login-demo-note { color: rgba(200,225,245,.5); }
html[data-theme="dark"] .ultra-back-link { color: rgba(200,225,245,.5); }
html[data-theme="dark"] .ultra-back-link:hover { color: #c8e1f5; }
html[data-theme="dark"] .ultra-trust-pill {
    background: rgba(13,156,202,.1);
    color: #7dd3f5;
    border-color: rgba(13,181,232,.2);
}
html[data-theme="dark"] .password-toggle { color: #7dd3f5; }
html[data-theme="dark"] .password-toggle:hover { background: rgba(13,156,202,.14); }
html[data-theme="dark"] .ultra-login-meta a { color: #7dd3f5; }
html[data-theme="dark"] .ultra-login-meta a:hover { color: #a8e6ff; }

/* ═══════════════════════════════════════════════════════
   LOGIN PAGE v3 — lp-* namespace (2026-04)
   ═══════════════════════════════════════════════════════ */

@keyframes lpFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%       { transform: translateY(-18px) rotate(4deg); }
}
@keyframes lpFade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpOrb {
    0%, 100% { transform: scale(1) translate(0, 0); }
    50%       { transform: scale(1.08) translate(10px, -12px); }
}
@keyframes lpShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes lpDotPulse {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%       { opacity: 1; transform: scale(1); }
}

/* Shell */
.lp-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 440px;
}

/* ── LEFT SCENE ── */
.lp-scene {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 48px;
    background: linear-gradient(145deg, #07101c 0%, #0b1e31 55%, #081625 100%);
    color: #fff;
}

.lp-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}
.lp-glow-a {
    width: 520px; height: 520px;
    top: -140px; left: -120px;
    background: radial-gradient(circle, rgba(13,156,202,.22) 0%, transparent 70%);
    animation: lpOrb 9s ease-in-out infinite;
}
.lp-glow-b {
    width: 380px; height: 380px;
    bottom: -100px; right: -80px;
    background: radial-gradient(circle, rgba(247,201,95,.16) 0%, transparent 70%);
    animation: lpOrb 12s 2s ease-in-out infinite reverse;
}

/* Brand top-left */
.lp-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 2;
    animation: lpFade .5s .1s ease both;
}
.lp-brand-mark {
    width: 42px; height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0db5e8, #0683b2);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 900;
    font-family: var(--font-heading, sans-serif);
    color: #fff;
    box-shadow: 0 6px 20px rgba(13,181,232,.35);
    flex-shrink: 0;
}
.lp-brand strong {
    font-size: 1.05rem;
    font-family: var(--font-heading, sans-serif);
    letter-spacing: .01em;
    color: #fff;
}

/* Center hero */
.lp-center {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    animation: lpFade .55s .2s ease both;
}
.lp-owl {
    font-size: 6rem;
    line-height: 1;
    animation: lpFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 16px 32px rgba(13,156,202,.3));
    user-select: none;
}
.lp-center h1 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-family: var(--font-heading, sans-serif);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
}
.lp-center p {
    font-size: clamp(.88rem, 1.2vw, 1rem);
    color: rgba(255,255,255,.55);
    line-height: 1.65;
    margin: 0;
}

/* Bottom dots */
.lp-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    animation: lpFade .5s .3s ease both;
}
.lp-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
}
.lp-dots span:nth-child(1) { animation: lpDotPulse 2.2s .0s ease-in-out infinite; }
.lp-dots span:nth-child(2) { animation: lpDotPulse 2.2s .4s ease-in-out infinite; }
.lp-dots span:nth-child(3) { animation: lpDotPulse 2.2s .8s ease-in-out infinite; }

/* ── RIGHT CARD ── */
.lp-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 48px 44px;
    background: #fff;
    box-shadow: -12px 0 60px rgba(6,14,24,.14);
}

.lp-brand-mark--sm {
    width: 36px; height: 36px;
    border-radius: 11px;
    font-size: 1.1rem;
}

.lp-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: lpFade .45s .1s ease both;
}
.lp-card-header h2 {
    font-size: 1.65rem;
    font-family: var(--font-heading, sans-serif);
    font-weight: 900;
    color: #0d2438;
    margin: 0;
    line-height: 1.1;
}
.lp-card-header p {
    font-size: .88rem;
    color: #6b8190;
    margin: 0;
}

/* Fields */
.lp-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: lpFade .45s .18s ease both;
}
.lp-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lp-label > span {
    font-size: .8rem;
    font-weight: 700;
    color: #0d2438;
    letter-spacing: .02em;
}
.lp-label input,
.lp-pass-wrap input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #d7e5f2;
    border-radius: 14px;
    font-size: .95rem;
    font-family: var(--font-body, sans-serif);
    color: #193244;
    background: #f8fbff;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    outline: none;
    box-sizing: border-box;
}
.lp-label input:focus,
.lp-pass-wrap input:focus {
    border-color: #0d9cca;
    background: #fff;
    box-shadow: 0 0 0 3.5px rgba(13,156,202,.14);
}
.lp-label input::placeholder,
.lp-pass-wrap input::placeholder { color: #a8c0ce; }

.lp-pass-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.lp-pass-wrap input { padding-right: 72px; }
.lp-show-btn {
    position: absolute;
    right: 12px;
    font-size: .77rem;
    font-weight: 800;
    color: #0d9cca;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 8px;
    font-family: var(--font-body, sans-serif);
    transition: background .15s;
}
.lp-show-btn:hover { background: rgba(13,156,202,.1); }

/* Submit */
.lp-submit {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 900;
    font-family: var(--font-heading, sans-serif);
    letter-spacing: .04em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(270deg, #0db5e8, #0683b2, #0db5e8);
    background-size: 300% auto;
    animation: lpFade .45s .26s ease both, lpShimmer 4s linear infinite;
    transition: transform .2s ease, box-shadow .2s ease;
}
.lp-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,181,232,.35); }
.lp-submit:disabled { animation: none; background: #d7e5f2; color: #8ba0b0; cursor: not-allowed; transform: none; box-shadow: none; }

/* Demo pills */
.lp-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: lpFade .45s .34s ease both;
}
.lp-demo-label {
    font-size: .74rem;
    font-weight: 700;
    color: #a8c0ce;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}
.lp-demo-pills {
    display: flex;
    gap: 8px;
}
.lp-demo-pill {
    flex: 1;
    padding: 9px 6px;
    border-radius: 12px;
    border: 1.5px solid #d7e5f2;
    background: #f8fbff;
    font-size: .8rem;
    font-weight: 800;
    color: #0d2438;
    font-family: var(--font-body, sans-serif);
    cursor: pointer;
    transition: border-color .16s, background .16s, transform .16s;
    white-space: nowrap;
}
.lp-demo-pill:hover { border-color: rgba(13,156,202,.45); background: rgba(13,156,202,.06); transform: translateY(-1px); }
.lp-demo-pill.active { border-color: #0d9cca; background: rgba(13,156,202,.1); box-shadow: 0 0 0 3px rgba(13,156,202,.14); }

/* Links */
.lp-links {
    display: flex;
    justify-content: space-between;
    animation: lpFade .45s .4s ease both;
}
.lp-links a {
    font-size: .82rem;
    font-weight: 700;
    color: #0d9cca;
    text-decoration: none;
    transition: color .15s;
}
.lp-links a:hover { color: #0d5473; text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    .lp-page { grid-template-columns: 1fr; }
    .lp-scene { display: none; }
    .lp-card { min-height: 100vh; padding: 40px 28px; }
}

/* ── DARK MODE ── */
html[data-theme="dark"] .lp-card { background: #0d1e2e; box-shadow: -12px 0 60px rgba(0,0,0,.4); }
html[data-theme="dark"] .lp-card-header h2 { color: #e8f4fd; }
html[data-theme="dark"] .lp-card-header p  { color: rgba(200,225,245,.5); }
html[data-theme="dark"] .lp-label > span   { color: #c8e1f5; }
html[data-theme="dark"] .lp-label input,
html[data-theme="dark"] .lp-pass-wrap input {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
    color: #e8f4fd;
}
html[data-theme="dark"] .lp-label input:focus,
html[data-theme="dark"] .lp-pass-wrap input:focus {
    background: rgba(13,156,202,.08);
    border-color: rgba(13,181,232,.5);
    box-shadow: 0 0 0 3px rgba(13,181,232,.13);
}
html[data-theme="dark"] .lp-demo-pill { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #c8e1f5; }
html[data-theme="dark"] .lp-demo-pill:hover  { background: rgba(13,156,202,.1); border-color: rgba(13,181,232,.35); }
html[data-theme="dark"] .lp-demo-pill.active { background: rgba(13,156,202,.15); border-color: rgba(13,181,232,.5); }
html[data-theme="dark"] .lp-demo-label { color: rgba(200,225,245,.35); }
html[data-theme="dark"] .lp-links a { color: #7dd3f5; }
html[data-theme="dark"] .lp-links a:hover { color: #a8e6ff; }
html[data-theme="dark"] .lp-show-btn { color: #7dd3f5; }
/* ==========================================================
   PreReader Mode
   ========================================================== */

.pre-reader-body {
  --pr-primary: #3b82f6;
  --pr-secondary: #fde68a;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(251,191,36,.15), transparent 30%),
    #f8fbff;
}

.pre-reader-app {
  min-height: 100vh;
  padding: 20px;
}

.pre-reader-shell {
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 18px;
}

.mission-header-mini {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 18px;
  align-items: center;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 24px;
  padding: 18px 22px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.mission-header-mini__level {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mission-header-mini__icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 30px;
  background: linear-gradient(135deg, var(--pr-primary), var(--pr-secondary));
  box-shadow: 0 12px 30px rgba(59,130,246,.28);
}

.mission-header-mini__eyebrow {
  margin: 0 0 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
}

.mission-header-mini__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.1;
}

.mission-header-mini__progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pre-reader-progress-bar {
  flex: 1;
  height: 16px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.pre-reader-progress-bar__fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--pr-primary), var(--pr-secondary));
  border-radius: inherit;
  transition: width .35s ease;
}

.simple-exit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 14px 20px;
  border-radius: 18px;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.pre-reader-stage {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: stretch;
}

.pre-reader-support {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.big-audio-replay-button,
.hint-button {
  border: none;
  border-radius: 24px;
  padding: 18px 12px;
  min-height: 96px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 32px rgba(15,23,42,.08);
  display: grid;
  place-items: center;
  gap: 4px;
  font-weight: 800;
  color: #0f172a;
}

.big-audio-replay-button span,
.hint-button span {
  font-size: 28px;
}

.hint-button--ghost {
  background: rgba(255,255,255,.7);
}

.pre-reader-main {
  position: relative;
  display: grid;
  gap: 18px;
}

.demo-player__card,
.pre-reader-activity-card,
.minimal-lesson-summary,
.expressive-feedback-bubble,
.inline-reinforcement-panel {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 30px;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.demo-player__card {
  padding: 24px;
  text-align: center;
}

.demo-player__card--intro {
  min-height: 240px;
  display: grid;
  place-items: center;
}

.demo-player__tag {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: var(--pr-primary);
  font-weight: 800;
  margin-bottom: 10px;
}

.demo-player__scene,
.pre-reader-visual__scene {
  width: 108px;
  height: 108px;
  margin: 0 auto 16px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 54px;
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(251,191,36,.2));
}

.pre-reader-activity-card {
  padding: 28px;
  min-height: 520px;
  display: grid;
  gap: 22px;
  align-content: start;
}

.pre-reader-visual {
  text-align: center;
}

.pre-reader-visual h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.touch-optimized-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.big-choice-card {
  border: none;
  border-radius: 28px;
  min-height: 132px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px 16px;
  font-weight: 800;
  color: #0f172a;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 2px solid transparent;
}

.big-choice-card:hover,
.big-choice-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
  border-color: rgba(59,130,246,.22);
}

.big-choice-card.is-hinted {
  border-color: rgba(16,185,129,.55);
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.big-choice-card--compact {
  min-height: 88px;
}

.big-choice-card__emoji {
  font-size: 34px;
}

.big-choice-card__label {
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.pre-reader-feedback-lane {
  min-height: 88px;
}

.expressive-feedback-bubble {
  padding: 18px 22px;
  font-size: 1.2rem;
}

.expressive-feedback-bubble--success {
  border-color: rgba(16,185,129,.28);
  background: linear-gradient(135deg, rgba(16,185,129,.12), #ffffff);
}

.expressive-feedback-bubble--error {
  border-color: rgba(239,68,68,.26);
  background: linear-gradient(135deg, rgba(239,68,68,.10), #ffffff);
}

.expressive-feedback-bubble--warning {
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(135deg, rgba(245,158,11,.12), #ffffff);
}

.progressive-hint-overlay {
  position: absolute;
  inset: auto 20px 20px auto;
  width: min(360px, calc(100% - 40px));
  z-index: 2;
}

.progressive-hint-card {
  padding: 18px 20px;
  background: #0f172a;
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(15,23,42,.24);
}

.hint-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hint-chip {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.inline-reinforcement-panel {
  padding: 18px;
}

.guided-tracing-canvas {
  display: grid;
  gap: 16px;
}

.guided-tracing-canvas canvas {
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 2px dashed rgba(148,163,184,.48);
  touch-action: none;
}

.pre-reader-inline-actions,
.simple-success-celebration__actions,
.pre-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.sequence-builder-large {
  display: grid;
  gap: 16px;
}

.sequence-builder-large__target,
.sequence-builder-large__tray,
.snap-drag-drop-zone-large__tray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.sequence-builder-large__target,
.snap-drag-drop-zone-large__target {
  min-height: 110px;
  border-radius: 24px;
  border: 2px dashed rgba(59,130,246,.22);
  background: rgba(59,130,246,.05);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}

.sequence-chip {
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 1.05rem;
  font-weight: 800;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.simple-success-celebration {
  padding: 30px;
  text-align: center;
}

.simple-success-celebration__stars {
  font-size: 34px;
  margin-bottom: 10px;
}

.pre-reader-footer {
  display: grid;
  gap: 14px;
}

.pre-reader-next-btn {
  min-height: 68px;
  font-size: 1.15rem;
  border-radius: 20px;
}

.nav-group {
  display: grid;
  gap: 8px;
}

.nav-group-children {
  display: grid;
  gap: 8px;
  padding-left: 18px;
}

.nav-link--child {
  font-size: .95rem;
  opacity: .92;
}

.tools-hub,
.tool-page {
  display: grid;
  gap: 24px;
}

.tool-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.tool-header p {
  max-width: 720px;
  margin: 8px 0 0;
}

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

.tool-card,
.tool-panel {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.tool-card {
  display: grid;
  gap: 14px;
}

.tool-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(251,191,36,.18));
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr);
  gap: 18px;
}

.tool-panel--main,
.tool-panel--detail {
  display: grid;
  gap: 18px;
}

.tool-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.tool-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tool-control {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.tool-control select {
  min-width: 120px;
}

.tool-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
}

.alphabet-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.alphabet-letter-card,
.syllable-card {
  border: none;
  border-radius: 26px;
  min-height: 120px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 2px solid transparent;
}

.alphabet-letter-card.is-active,
.syllable-card.is-active {
  border-color: rgba(59,130,246,.4);
  box-shadow: 0 18px 32px rgba(59,130,246,.16);
}

.alphabet-letter-card__upper {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
}

.alphabet-letter-card__lower {
  font-size: 1.15rem;
  color: #64748b;
  font-weight: 800;
}

.tool-detail,
.alphabet-detail-panel,
.syllable-detail-panel {
  display: grid;
  gap: 12px;
}

.alphabet-detail-panel__hero,
.syllable-detail-panel__hero {
  min-height: 180px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(251,191,36,.18));
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 900;
}

.alphabet-detail-panel__hero small {
  display: block;
  font-size: 2rem;
  color: #475569;
}

.syllabary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.sound-bank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sound-card {
  border: none;
  border-radius: 26px;
  min-height: 138px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  border: 2px solid transparent;
  text-align: center;
}

.sound-card.is-active {
  border-color: rgba(59,130,246,.4);
  box-shadow: 0 18px 32px rgba(59,130,246,.16);
}

.sound-card__emoji {
  font-size: 38px;
}

.syllable-card strong {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
}

.syllable-card small {
  font-weight: 800;
  color: #64748b;
}

.tool-sequence-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.builder-workbench,
.word-builder-board {
  display: grid;
  gap: 18px;
}

.builder-dropzones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.builder-dropzones--word {
  grid-template-columns: 1fr;
}

.builder-word-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.builder-slot,
.builder-result {
  min-height: 104px;
  border-radius: 24px;
  border: 2px dashed rgba(59,130,246,.24);
  background: rgba(59,130,246,.05);
  display: grid;
  place-items: center;
  padding: 14px;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
}

.builder-slot--word {
  min-height: 92px;
}

.builder-slot.is-over {
  border-color: rgba(16,185,129,.45);
  background: rgba(16,185,129,.08);
}

.builder-result {
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(251,191,36,.18));
  border-style: solid;
  border-color: rgba(59,130,246,.2);
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.builder-result--word {
  min-height: 86px;
}

.builder-plus,
.builder-equals {
  font-size: 1.7rem;
  font-weight: 900;
  color: #475569;
}

.builder-trays {
  display: grid;
  gap: 14px;
}

.builder-tray,
.builder-preset-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.builder-token {
  border: none;
  border-radius: 20px;
  min-height: 76px;
  min-width: 76px;
  padding: 14px 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: grab;
}

.builder-token--word {
  min-width: 110px;
}

.secondary-btn--soft {
  background: rgba(59,130,246,.08);
  color: #1d4ed8;
}

.active-sound-indicator {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(59,130,246,.09);
  color: #1d4ed8;
  font-weight: 800;
}

.library-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.library-filter-bar .tiny-pill {
  border: none;
  cursor: pointer;
}

.library-filter-bar .tiny-pill.is-active {
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 14px 26px rgba(29,78,216,.24);
}

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

.library-catalog-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow: 0 18px 48px rgba(15,23,42,.08);
  border: 1px solid rgba(148,163,184,.14);
}

.library-catalog-card[hidden] {
  display: none;
}

.library-cover-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(251,191,36,.18));
  font-size: 1.6rem;
}

.library-preview-text {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.library-reader-shell {
  gap: 20px;
}

.library-reader-hero {
  background: linear-gradient(145deg, rgba(59,130,246,.08), rgba(255,255,255,.98));
}

.library-reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.library-reader-content {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  padding: 28px;
  background: rgba(255,255,255,.95);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.12);
}

.library-reader-content .reading-line {
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.95;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(248,250,252,.9);
}

.library-reader-content .reading-line:hover,
.library-reader-content .reading-line:focus-visible {
  border-color: rgba(59,130,246,.36);
  background: rgba(219,234,254,.5);
  outline: none;
}

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

.modality-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(241,245,249,.96));
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
  border: 1px solid rgba(148,163,184,.14);
}

.modality-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(59,130,246,.14));
  font-size: 1.8rem;
}

@media (max-width: 980px) {
  .mission-header-mini {
    grid-template-columns: 1fr;
  }

  .pre-reader-stage {
    grid-template-columns: 1fr;
  }

  .pre-reader-support {
    flex-direction: row;
    overflow-x: auto;
  }

  .touch-optimized-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools-grid,
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .alphabet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .sound-bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-dropzones {
    grid-template-columns: 1fr;
  }

  .builder-word-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-reader-content {
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .pre-reader-app {
    padding: 10px;
  }

  .pre-reader-shell {
    gap: 12px;
  }

  .pre-reader-activity-card {
    padding: 18px;
    min-height: auto;
  }

  .touch-optimized-choice-grid {
    grid-template-columns: 1fr;
  }

  .big-choice-card {
    min-height: 104px;
  }

  .alphabet-grid,
  .syllabary-grid,
  .sound-bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-word-slots {
    grid-template-columns: 1fr;
  }

  .library-catalog-grid,
  .modality-grid {
    grid-template-columns: 1fr;
  }

  .library-reader-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .library-reader-content {
    padding: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. MEJORAS UI 2026-04 — Interactividad, celebración, UX
   ═══════════════════════════════════════════════════════════════ */

/* View Transitions (Chrome/Edge navegación entre páginas) */
@view-transition { navigation: auto; }
@keyframes vtFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
::view-transition-old(root) { animation: 160ms ease both fade-out; }
::view-transition-new(root) { animation: 260ms ease both vtFadeUp; }
@keyframes fade-out { to { opacity: 0; } }

/* Feedback panel mejorado — animación de entrada */
@keyframes feedbackReveal {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.feedback-panel:not([hidden]) {
    animation: feedbackReveal .35s cubic-bezier(.2,0,.1,1) both;
}
.feedback-icon {
    font-size: 2.6rem;
    display: block;
    margin-bottom: 6px;
    animation: mascotBounce .6s ease;
}
.feedback-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 1rem;
    margin: 8px 0 4px;
}
.feedback-score-badge--pass { background: rgba(47,165,110,.14); color: #196140; }
.feedback-score-badge--warn { background: rgba(243,167,72,.14);  color: #7a4c08; }
.feedback-score-badge--fail { background: rgba(217,100,98,.14);  color: #8b2222; }
.feedback-explanation {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(13,156,202,.07);
    border-left: 3px solid var(--primary);
    border-radius: 0 14px 14px 0;
    font-size: .93rem;
    line-height: 1.65;
}
.feedback-explanation p { margin: 0 0 6px; }
.feedback-explanation p:last-child { margin-bottom: 0; }

/* Pantalla de resultado de evaluación */
@keyframes celebrateIn {
    from { opacity: 0; transform: scale(.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes starPop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes trophyFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    30%       { transform: translateY(-22px) scale(1.18); }
    65%       { transform: translateY(-7px) scale(1.06); }
}
.level-result-panel { animation: celebrateIn .45s cubic-bezier(.2,0,.1,1) both; }
.level-result-score-host {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 0 16px;
}
.level-result-trophy {
    font-size: 4.2rem;
    display: block;
    animation: trophyFloat 1.4s ease-in-out .35s both;
    filter: drop-shadow(0 8px 24px rgba(13,156,202,.3));
}
.level-result-score-ring {
    position: relative;
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.level-result-score-ring svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}
.level-result-score-label {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1;
}
.level-result-score-label span {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary-dark);
}
.level-result-score-label small {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 4px;
}
.level-result-stars {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.level-result-star {
    font-size: 2rem;
    animation: starPop .4s cubic-bezier(.2,0,.1,1) both;
}
.level-result-star:nth-child(1) { animation-delay: .45s; }
.level-result-star:nth-child(2) { animation-delay: .6s; }
.level-result-star:nth-child(3) { animation-delay: .75s; }
.level-result-message {
    text-align: center;
    padding: 4px 24px 0;
}
.level-result-message h2 { margin-bottom: 8px; }
.level-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 14px 0 4px;
}
.level-result-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 16px 0 8px;
}

/* Skill rings (dashboard) */
.skill-ring-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    padding: 4px 0 8px;
}
@media (max-width: 720px) {
    .skill-ring-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.skill-ring-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 8px 14px;
    border-radius: 20px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.skill-ring-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.skill-ring-host {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skill-ring-value {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1;
}
.skill-ring-title {
    font-size: .8rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.skill-ring-emoji { font-size: 1.05rem; }

/* Streak heatmap — 7 días */
.streak-heatmap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0 4px;
    align-items: flex-end;
}
.streak-heatmap-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.streak-heatmap-cell {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(13,156,202,.07);
    border: 1.5px solid rgba(13,156,202,.12);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: default;
}
.streak-heatmap-cell:hover { transform: scale(1.1); }
.streak-heatmap-cell.is-active {
    background: linear-gradient(135deg, #0db5e8, #0d9cca);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(13,156,202,.32);
}
.streak-heatmap-cell.is-today {
    box-shadow: 0 0 0 2.5px rgba(247,201,95,.7);
    border-color: var(--secondary);
}
.streak-heatmap-cell.is-perfect {
    background: linear-gradient(135deg, #ffd35f, #f3a748);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(243,167,72,.38);
}
.streak-heatmap-label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.streak-heatmap-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.streak-heatmap-legend {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
}
.streak-heatmap-legend strong {
    display: block;
    font-size: 1.1rem;
    color: var(--primary-dark);
}

/* Atajos de teclado — badge */
.activity-kbd-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px 0 2px;
}
.kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: rgba(19,50,68,.06);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: .71rem;
    font-weight: 800;
    font-family: monospace;
    color: var(--muted);
}
.kbd-hint kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    background: var(--surface-strong);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--border-strong);
    font: inherit;
    font-size: .7rem;
}

/* Contador de escritura */
.writing-counter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0 0;
    font-size: .81rem;
    color: var(--muted);
}
.writing-counter-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(13,84,115,.1);
    overflow: hidden;
}
.writing-counter-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd35f, #0db5e8);
    transition: width .35s ease;
    width: 0%;
}
.writing-counter-bar.is-met .writing-counter-fill {
    background: linear-gradient(90deg, #2fa56e, #0db5e8);
}

/* Auto-scroll anchor */
[data-feedback-anchor] { scroll-margin-top: 20px; }

/* Choice cards — mejor hover/active */
.choice-card { cursor: pointer; }
.choice-card:hover:not(.correct):not(.incorrect):not(.selected) {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13,156,202,.16);
    border-color: rgba(13,156,202,.32);
}
.choice-card:active:not(.correct):not(.incorrect) { transform: scale(.97); }

/* Dark mode — nuevos componentes */
html[data-theme="dark"] .skill-ring-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .streak-heatmap-cell { background: rgba(28,182,236,.06); border-color: rgba(28,182,236,.1); }
html[data-theme="dark"] .streak-heatmap-cell.is-active { background: linear-gradient(135deg,#1cb6ec,#0d9cca); }
html[data-theme="dark"] .writing-counter-track { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .kbd-hint { background: rgba(255,255,255,.05); border-color: var(--border); }
html[data-theme="dark"] .feedback-explanation { background: rgba(28,182,236,.07); border-left-color: var(--primary); }
html[data-theme="dark"] .level-result-score-label span { color: var(--primary-dark); }
html[data-theme="dark"] .skill-ring-value { color: var(--primary-dark); }

/* ═══════════════════════════════════════════════════════════════
   13. SILABARIO — Mejoras visuales e interactivas 2026-04
   ═══════════════════════════════════════════════════════════════ */

/* ── Tabs de familia ───────────────────────────────── */
.syl-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.syl-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.syl-tab-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    min-width: 70px;
    transition: border-color .18s ease, background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.syl-tab-btn:hover {
    border-color: rgba(13,156,202,.38);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13,156,202,.13);
}
.syl-tab-btn.is-active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(13,156,202,.12), rgba(13,156,202,.05));
    box-shadow: 0 8px 22px rgba(13,156,202,.2);
}
.syl-tab-btn.is-visited:not(.is-active) {
    border-color: rgba(47,165,110,.38);
    background: rgba(47,165,110,.06);
}
.syl-tab-btn.is-visited:not(.is-active)::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 7px;
    font-size: .6rem;
    color: #2fa56e;
    font-weight: 900;
}
.syl-tab-consonant {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--primary-dark);
    letter-spacing: -.02em;
}
.syl-tab-preview {
    font-size: .66rem;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .02em;
}

/* ── Cards con colores por vocal ───────────────────── */
.syllable-card {
    --vowel-bg: rgba(13,156,202,.08);
    --vowel-border: rgba(13,156,202,.25);
    --vowel-text: var(--primary-dark);
    --vowel-accent: var(--primary);
    background: var(--vowel-bg);
    border-color: var(--vowel-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.syllable-card.is-active {
    border-color: var(--vowel-border) !important;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 30px rgba(13,156,202,.18);
}
.syllable-card:hover:not(.is-active):not(.is-playing) {
    border-color: var(--vowel-border);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.09);
}

/* Estado is-playing — pulso mientras suena */
@keyframes sylCardPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(13,156,202,.5); }
    50%       { box-shadow: 0 0 0 10px rgba(13,156,202,.0); }
}
.syllable-card.is-playing {
    animation: sylCardPulse .85s ease-in-out infinite;
    border-color: var(--vowel-accent) !important;
    transform: scale(1.07) !important;
    z-index: 2;
}

/* Estados de quiz */
.syllable-card.is-quiz-correct {
    background: rgba(47,165,110,.15) !important;
    border-color: rgba(47,165,110,.55) !important;
    animation: bounceIn .38s ease !important;
}
.syllable-card.is-quiz-wrong {
    background: rgba(217,100,98,.12) !important;
    border-color: rgba(217,100,98,.45) !important;
    animation: shakeX .38s ease !important;
}
.syllable-card.is-quiz-target {
    border-color: rgba(13,156,202,.6) !important;
    animation: sylCardPulse .85s ease-in-out infinite !important;
}

/* ── Interior de card: consonante + vocal ──────────── */
.syl-card-main {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--vowel-text);
}
.syl-card-letters {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: .64rem;
    font-weight: 800;
    opacity: .72;
    letter-spacing: .03em;
}
.syl-card-consonant { color: var(--muted); }
.syl-card-plus      { color: var(--border-strong); margin: 0 1px; }
.syl-card-vowel     { color: var(--vowel-accent); font-weight: 900; }

/* ── Speed pills ────────────────────────────────────── */
.tool-control-label {
    font-size: .8rem;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}
.syl-speed-pills { display: flex; gap: 6px; }
.syl-speed-pill {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: .79rem;
    font-weight: 800;
    color: var(--muted);
    cursor: pointer;
    transition: all .17s ease;
    white-space: nowrap;
}
.syl-speed-pill:hover { border-color: rgba(13,156,202,.32); color: var(--text); }
.syl-speed-pill.is-active {
    background: var(--action-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(13,156,202,.3);
}

/* ── Toggle switch (auto) ───────────────────────────── */
.syl-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 800;
    color: var(--muted);
    user-select: none;
    white-space: nowrap;
}
.syl-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.syl-toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--border);
    transition: background .2s ease;
    flex-shrink: 0;
}
.syl-toggle-input:checked ~ .syl-toggle-track { background: var(--primary); }
.syl-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.22);
    transition: transform .2s ease;
}
.syl-toggle-input:checked ~ .syl-toggle-track .syl-toggle-thumb { transform: translateX(16px); }

/* ── Botón modo práctica ────────────────────────────── */
.syl-practice-btn.is-active {
    background: rgba(239,125,87,.12);
    border-color: rgba(239,125,87,.42);
    color: #b03c10;
}

/* ── Barra de progreso de secuencia ─────────────────── */
.syl-sequence-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(13,84,115,.08);
    overflow: hidden;
}
.syl-sequence-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd35f, #0db5e8);
    width: 0%;
    transition: width .38s ease;
}
.syl-sequence-label {
    display: block;
    font-size: .74rem;
    font-weight: 800;
    color: var(--muted);
    text-align: right;
}

/* ── Panel de detalle: síntesis consonante+vocal ─────── */
.syl-detail-synthesis {
    border-radius: 24px;
    padding: 20px 14px 16px;
    background: var(--vowel-bg, rgba(13,156,202,.08));
    border: 1px solid var(--vowel-border, rgba(13,156,202,.2));
    text-align: center;
    transition: background .3s ease, border-color .3s ease;
}
.syl-detail-pieces {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.syl-detail-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.syl-detail-piece span {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
}
.syl-detail-piece small {
    font-size: .64rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.syl-detail-piece--consonant span { color: var(--text); }
.syl-detail-piece--vowel    span  { color: var(--vowel-accent, var(--primary)); }
.syl-detail-plus,
.syl-detail-arrow {
    font-size: 1.2rem;
    color: var(--muted);
    font-weight: 900;
    line-height: 1;
    padding-top: 2px;
}
.syl-detail-result {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.syl-detail-result span {
    font-size: clamp(2.8rem, 7vw, 3.8rem);
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1;
    animation: bounceIn .4s ease;
}

/* Palabra ejemplo */
.syl-detail-example {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}
.syl-detail-example-emoji { font-size: 2.1rem; flex-shrink: 0; line-height: 1; }
.syl-detail-example strong { display: block; font-size: 1.04rem; }
.syl-detail-example small  { color: var(--muted); font-size: .8rem; }
.syl-detail-family {
    color: var(--muted);
    font-size: .82rem;
    margin: 0;
    text-align: center;
}

/* ── Panel de quiz ──────────────────────────────────── */
.syl-quiz-panel { display: grid; gap: 10px; }
.syl-quiz-prompt {
    padding: 16px;
    border-radius: 18px;
    background: rgba(13,156,202,.07);
    border: 1px solid rgba(13,156,202,.18);
    text-align: center;
}
.syl-quiz-prompt p { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.syl-quiz-result   { min-height: 48px; }
.syl-quiz-feedback {
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    font-size: .92rem;
    animation: feedbackReveal .3s ease;
}
.syl-quiz-feedback--ok   { background: rgba(47,165,110,.12);  color: #196140; border: 1px solid rgba(47,165,110,.25); }
.syl-quiz-feedback--fail { background: rgba(217,100,98,.10);  color: #8b2222; border: 1px solid rgba(217,100,98,.22); }

/* ── Controles agrupados ────────────────────────────── */
.syl-controls { display: grid; gap: 10px; }
.syl-controls-group {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}
.syl-ctrl-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    flex: 1;
    min-width: 54px;
    transition: border-color .17s ease, transform .15s ease, box-shadow .17s ease, background .17s ease;
}
.syl-ctrl-btn span { font-size: 1rem; line-height: 1; }
.syl-ctrl-btn small {
    font-size: .64rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.syl-ctrl-btn:hover {
    border-color: rgba(13,156,202,.32);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(13,156,202,.1);
}
.syl-ctrl-btn--replay {
    border-color: rgba(13,156,202,.32);
    background: rgba(13,156,202,.07);
}
.syl-ctrl-btn--primary {
    background: var(--action-primary);
    border-color: transparent;
    color: #fff;
}
.syl-ctrl-btn--primary small { color: rgba(255,255,255,.82); }
.syl-ctrl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13,156,202,.3);
}
.syl-ctrl-btn--stop:hover {
    background: rgba(217,100,98,.08);
    border-color: rgba(217,100,98,.4);
}

/* ── Teclado hints ──────────────────────────────────── */
.syl-kbd-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    padding: 2px 0;
}

/* ── Dark mode ──────────────────────────────────────── */
html[data-theme="dark"] .syl-tab-btn { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .syl-tab-btn.is-active { background: rgba(28,182,236,.1); border-color: var(--primary); }
html[data-theme="dark"] .syl-tab-btn.is-visited:not(.is-active) { background: rgba(49,192,120,.07); border-color: rgba(49,192,120,.28); }
html[data-theme="dark"] .syl-speed-pill { background: var(--surface); border-color: var(--border); color: var(--muted); }
html[data-theme="dark"] .syl-toggle-track { background: rgba(255,255,255,.15); }
html[data-theme="dark"] .syl-detail-synthesis { background: rgba(28,182,236,.06); border-color: rgba(28,182,236,.16); }
html[data-theme="dark"] .syl-detail-example { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .syl-ctrl-btn { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .syl-ctrl-btn small { color: var(--muted); }
html[data-theme="dark"] .syl-quiz-prompt { background: rgba(28,182,236,.06); border-color: rgba(28,182,236,.16); }
html[data-theme="dark"] .syl-sequence-bar { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .syllable-card { background: var(--vowel-bg); border-color: var(--vowel-border); }
html[data-theme="dark"] .syl-tab-consonant { color: var(--primary-dark); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
    .syl-tabs { flex-wrap: nowrap; padding-bottom: 8px; }
    .syl-tab-btn { min-width: 62px; padding: 8px 10px; }
    .syl-detail-pieces { gap: 6px; }
    .syl-ctrl-btn { min-width: 46px; padding: 9px 8px; }
    .syl-ctrl-btn span { font-size: .9rem; }
}

/* === Section 14: MEJORAS UI 2026-04 === */

@keyframes alphaCardPulse {
    0%   { box-shadow: 0 0 0 0 rgba(13,181,232,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(13,181,232,0); }
    100% { box-shadow: 0 0 0 0 rgba(13,181,232,0); }
}
.alphabet-letter-card.is-playing {
    animation: alphaCardPulse 1s ease infinite;
    border-color: var(--primary) !important;
    background: rgba(13,181,232,.09);
}
.alphabet-letter-card.is-mastered { position: relative; }
.alphabet-letter-card.is-mastered::after {
    content: ✓;
    position: absolute;
    top: 3px; right: 5px;
    font-size: .65rem;
    font-weight: 900;
    color: #1d8a5c;
    background: rgba(47,165,110,.18);
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.5;
}
.alpha-mastery-bar { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); padding: 6px 0 2px; }
.alpha-mastery-bar strong { color: var(--primary-dark); font-weight: 900; }
.alpha-mastery-track { flex: 1; height: 5px; background: rgba(13,181,232,.12); border-radius: 99px; overflow: hidden; }
.alpha-mastery-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.alpha-kbd-hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.builder-slot { transition: background .15s, border-color .15s, box-shadow .15s; }
.builder-slot.is-over { background: rgba(13,181,232,.14); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,181,232,.25); }
.builder-slot.has-value { background: rgba(13,181,232,.08); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
.builder-token { transition: transform .12s, box-shadow .12s; }
.builder-token:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 14px rgba(13,84,115,.18); }
.builder-token:active { transform: scale(.95); }
@keyframes builderBounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    60%  { transform: scale(.93); }
    80%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.builder-result.is-success { animation: builderBounce .5s ease; color: #1d8a5c; text-shadow: 0 0 18px rgba(47,165,110,.4); }
.builder-formed-counter { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-muted); padding: 4px 10px; border-radius: 999px; background: rgba(95,125,255,.09); border: 1px solid rgba(95,125,255,.2); font-weight: 700; }
.builder-formed-counter strong { color: #2a3ea0; font-size: 1rem; }
.builder-detail-example { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(13,181,232,.07); border: 1px solid rgba(13,181,232,.18); margin-top: 10px; font-size: .9rem; }
.builder-detail-example-emoji { font-size: 1.8rem; }
@keyframes slotShake {
    0%,100% { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
}
.builder-slot--word.is-correct { background: rgba(47,165,110,.13); border-color: #2fa56e; color: #1d6b1c; font-weight: 700; }
.builder-slot--word.is-wrong { background: rgba(217,100,98,.1); border-color: #d96462; color: #8b2222; animation: slotShake .35s ease; }
.word-counter-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: rgba(112,201,110,.12); border: 1px solid rgba(112,201,110,.25); color: #1d6b1c; font-weight: 700; }
.word-sentence-ctx { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(247,201,95,.1); border: 1px solid rgba(247,201,95,.3); font-size: .9rem; color: var(--text); line-height: 1.55; }
.word-sentence-ctx em { font-style: normal; font-weight: 900; color: #7a4c08; text-decoration: underline dotted; }
.hero-metric { cursor: pointer; transition: background .15s, box-shadow .15s; border-radius: 16px; padding: 10px 14px; position: relative; }
.hero-metric:hover { background: rgba(13,181,232,.07); box-shadow: 0 2px 10px rgba(13,84,115,.08); }
.metric-trend { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.metric-trend--up   { background: rgba(47,165,110,.14); color: #1d6b1c; }
.metric-trend--down { background: rgba(217,100,98,.12); color: #8b2222; }
.metric-trend--flat { background: rgba(13,181,232,.1); color: var(--primary-dark); }
.hero-metric-detail { display: none; margin-top: 6px; font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.hero-metric.is-expanded .hero-metric-detail { display: block; animation: feedbackReveal .25s ease both; }
.lesson-card--blocker { border-left: 3px solid #d96462 !important; }
.lesson-card--strength { border-left: 3px solid #2fa56e !important; }
@keyframes nodeCurrentPulse {
    0%   { box-shadow: 0 0 0 0 rgba(13,181,232,.65); }
    70%  { box-shadow: 0 0 0 14px rgba(13,181,232,0); }
    100% { box-shadow: 0 0 0 0 rgba(13,181,232,0); }
}
.level-journey-node.is-current .level-journey-icon-wrap { animation: nodeCurrentPulse 2s ease infinite; outline: 3px solid var(--primary); outline-offset: 3px; }
.you-are-here { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 900; color: #fff; background: var(--primary); padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; animation: mascotBounce .8s ease; }
.level-unlock-bar { height: 4px; border-radius: 99px; background: rgba(13,84,115,.1); margin-top: 6px; overflow: hidden; }
.level-unlock-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #5f7dff); border-radius: 99px; transition: width .8s .3s cubic-bezier(.4,0,.2,1); }
.level-map-card .level-completed-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #1d6b1c; background: rgba(47,165,110,.14); border-radius: 999px; padding: 2px 8px; margin-bottom: 5px; }
.level-difficulty { display: inline-flex; gap: 2px; font-size: .75rem; opacity: .75; margin-left: 4px; }
html[data-theme="dark"] .alpha-mastery-track { background: rgba(13,181,232,.18); }
html[data-theme="dark"] .builder-detail-example { background: rgba(13,181,232,.1); }
html[data-theme="dark"] .word-sentence-ctx { background: rgba(247,201,95,.08); }
html[data-theme="dark"] .hero-metric:hover { background: rgba(13,181,232,.1); }
html[data-theme="dark"] .builder-formed-counter { background: rgba(95,125,255,.14); }
html[data-theme="dark"] .word-counter-badge { background: rgba(112,201,110,.1); }

/* === Section 15: MODO PRE-LECTOR 2026-04 === */
body.role-student .nav-link { min-height: 56px; padding: 15px 20px; font-size: 1rem; gap: 12px; }
body.role-student .nav-icon { font-size: 1.5rem; min-width: 28px; text-align: center; }
body.role-student .topbar-icon-btn { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 16px; }
body.role-student .topbar-exit-btn { min-height: 48px; padding: 10px 20px; font-size: 1rem; }
body.role-student .primary-btn, body.role-student .secondary-btn { min-height: 52px; padding: 14px 28px; font-size: 1.05rem; }
body.role-student .syl-ctrl-btn { min-height: 56px; min-width: 60px; }
body.role-student { font-size: 1.08rem; }
body.role-student p { line-height: 1.7; }
body.role-student h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
body.role-student h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
body.role-student .nav-link { position: relative; }
.nav-audio-hint { display: none; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: rgba(13,52,116,.92); color: #fff; font-size: .82rem; padding: 6px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none; z-index: 999; }
body.role-student .nav-link:hover .nav-audio-hint, body.role-student .nav-link:focus .nav-audio-hint { display: block; }
@keyframes mascotFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes instrSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroKidIn { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.apz-mascot { position: fixed; bottom: 24px; right: 24px; z-index: 8888; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.apz-mascot-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0db5e8, #5f7dff); display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 8px 24px rgba(13,84,115,.35); animation: mascotFloat 3s ease-in-out infinite; cursor: pointer; pointer-events: auto; border: 3px solid #fff; transition: transform .2s ease; }
.apz-mascot-avatar:hover { animation: none; transform: scale(1.12); }
.apz-mascot-bubble { background: #fff; border-radius: 18px 18px 4px 18px; padding: 12px 16px; font-size: .88rem; max-width: 220px; text-align: right; box-shadow: 0 8px 24px rgba(13,84,115,.18); border: 2px solid rgba(13,181,232,.25); color: var(--text); line-height: 1.5; animation: bubbleIn .3s ease both; pointer-events: auto; }
.apz-mascot-bubble strong { display: block; color: var(--primary-dark); font-size: 1rem; margin-bottom: 2px; }
.apz-mascot-bubble.is-hidden { display: none; }
.tool-auto-instruction { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(135deg, rgba(13,181,232,.1), rgba(95,125,255,.08)); border: 1px solid rgba(13,181,232,.25); border-radius: 16px; margin-bottom: 16px; animation: instrSlideDown .4s ease both; font-size: .92rem; }
.tool-auto-instruction-icon { font-size: 2rem; flex-shrink: 0; }
.tool-auto-instruction-close { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .5; padding: 4px 8px; border-radius: 8px; transition: opacity .15s; pointer-events: auto; }
.tool-auto-instruction-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.pre-reader-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 24px; background: linear-gradient(135deg, rgba(13,181,232,.1), rgba(247,201,95,.1)); border-radius: 28px; border: 2px solid rgba(13,181,232,.2); margin-bottom: 20px; text-align: center; animation: heroKidIn .5s ease both; }
.pre-reader-hero-avatar { font-size: 4rem; animation: mascotFloat 3s ease-in-out infinite; }
.pre-reader-hero-greeting { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 900; color: var(--primary-dark); margin: 0; }
.pre-reader-hero-sub { font-size: 1rem; color: var(--muted); margin: 0; }
.pre-reader-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.pre-reader-hero-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 24px; border-radius: 22px; font-size: 1rem; font-weight: 800; text-decoration: none; border: none; cursor: pointer; min-width: 100px; min-height: 80px; transition: transform .15s, box-shadow .15s; justify-content: center; }
.pre-reader-hero-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.15); }
.pre-reader-hero-btn .btn-emoji { font-size: 2rem; }
.pre-reader-hero-btn--primary { background: linear-gradient(135deg, #0db5e8, #0d5473); color: #fff; }
.pre-reader-hero-btn--yellow  { background: linear-gradient(135deg, #ffd35f, #f7a748); color: #5a3a00; }
.pre-reader-hero-btn--green   { background: linear-gradient(135deg, #70c96e, #2fa56e); color: #fff; }
.streak-fires { display: flex; align-items: center; gap: 4px; font-size: 1.3rem; padding: 6px 10px; border-radius: 12px; background: rgba(247,167,72,.12); border: 1px solid rgba(247,167,72,.3); }
.streak-fire { display: inline-block; animation: mascotFloat 2s ease-in-out infinite; }
.streak-fire:nth-child(2) { animation-delay: .3s; }
.streak-fire:nth-child(3) { animation-delay: .6s; }
.streak-fires-label { font-size: .8rem; font-weight: 700; color: #7a4c08; margin-left: 4px; }
.alpha-page-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 4px; }
.alpha-page-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, transform .12s; }
.alpha-page-btn:hover:not(:disabled) { background: rgba(13,181,232,.1); border-color: var(--primary); transform: scale(1.08); }
.alpha-page-btn:disabled { opacity: .3; cursor: not-allowed; }
.alpha-page-dots { display: flex; gap: 6px; align-items: center; }
.alpha-page-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background .2s, transform .2s; }
.alpha-page-dot.is-active { background: var(--primary); transform: scale(1.3); }
html[data-theme="dark"] .apz-mascot-bubble { background: var(--surface); }
html[data-theme="dark"] .tool-auto-instruction { background: rgba(13,181,232,.08); }
html[data-theme="dark"] .pre-reader-hero { background: rgba(13,181,232,.07); }
html[data-theme="dark"] .alpha-page-btn { background: var(--surface); }
@media (max-width: 640px) {
    .apz-mascot { bottom: 14px; right: 14px; }
    .apz-mascot-avatar { width: 54px; height: 54px; font-size: 1.7rem; }
    body.role-student .nav-link { min-height: 52px; }
    .pre-reader-hero-btn { min-width: 80px; padding: 14px 18px; }
}

/* === Section 16: MODO NINO 2026-04 === */
body.student-mode-kid {
    background:
        radial-gradient(circle at top left, rgba(255, 211, 95, .34), transparent 28%),
        radial-gradient(circle at top right, rgba(13, 181, 232, .18), transparent 24%),
        linear-gradient(180deg, #fffaf0 0%, #f5fbff 58%, #f8f6ff 100%);
}
body.student-mode-kid .app-shell {
    background: transparent;
}
body.student-mode-kid .content-shell {
    padding: 0;
    background: transparent;
    box-shadow: none;
}
body.student-mode-kid .content-main {
    padding: 0;
}
.kid-mode-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 108px;
    position: relative;
}
.kid-mode-shell__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}
.kid-mode-shell__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 14px 32px rgba(13, 84, 115, .1);
    text-decoration: none;
    color: var(--primary-dark);
    font-weight: 900;
    letter-spacing: .01em;
}
.kid-mode-shell__brand span {
    font-size: 1.5rem;
}
.kid-mode-shell__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.kid-mode-shell__main {
    display: grid;
    gap: 22px;
}
.kid-mode-shell__logout {
    border: none;
    border-radius: 999px;
    min-height: 48px;
    padding: 0 20px;
    background: linear-gradient(135deg, #ffd35f, #f7a748);
    color: #6b4100;
    font-size: .98rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(247, 167, 72, .24);
}
.kid-screen {
    width: min(100%, 980px);
    margin: 0 auto;
    display: grid;
    gap: 22px;
}
.kid-hero-card,
.big-mission-card,
.adult-mode-entry,
.kid-result-card,
.kid-simple-card,
.kid-map-card {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(13, 84, 115, .08);
    box-shadow: 0 20px 40px rgba(13, 84, 115, .1);
    backdrop-filter: blur(10px);
}
.avatar-greeting-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(13, 181, 232, .14), rgba(255, 211, 95, .18));
    border: 1px solid rgba(13, 181, 232, .18);
    box-shadow: 0 20px 44px rgba(13, 84, 115, .14);
}
.avatar-greeting-card__avatar,
.kid-hero-card__mascot,
.big-mission-card__hero,
.kid-result-card__icon,
.kid-map-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .8);
    box-shadow: inset 0 0 0 1px rgba(13, 84, 115, .06);
}
.avatar-greeting-card__avatar {
    width: 92px;
    height: 92px;
    font-size: 3.2rem;
}
.avatar-greeting-card__body {
    display: grid;
    gap: 6px;
}
.avatar-greeting-card__eyebrow,
.adult-mode-entry__eyebrow,
.big-mission-card__badge,
.kid-map-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(13, 181, 232, .12);
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.avatar-greeting-card h1,
.kid-hero-card h1,
.kid-hero-card h2,
.big-mission-card h2,
.kid-result-card h1,
.kid-map-card h2,
.adult-mode-entry h2 {
    margin: 0;
    color: #113b5a;
    line-height: 1.15;
    font-size: clamp(1.55rem, 3vw, 2.4rem);
}
.avatar-greeting-card p,
.kid-hero-card p,
.big-mission-card p,
.kid-result-card p,
.kid-simple-card p,
.kid-map-card p,
.adult-mode-entry p,
.pictogram-step-card p {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.65;
}
.kid-hero-card {
    display: grid;
    gap: 16px;
    text-align: center;
    padding: 28px;
    border-radius: 32px;
}
.kid-hero-card--compact {
    text-align: left;
}
.kid-hero-card__mascot {
    width: 92px;
    height: 92px;
    font-size: 3rem;
}
.kid-hero-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.big-mission-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
    padding: 32px 28px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top center, rgba(255, 211, 95, .28), transparent 36%),
        rgba(255, 255, 255, .92);
}
.big-mission-card__hero {
    width: 120px;
    height: 120px;
    font-size: 4rem;
}
.big-mission-card__actions {
    width: min(100%, 420px);
}
.simple-progress-stars {
    display: grid;
    gap: 10px;
    justify-items: center;
}
.simple-progress-stars__track {
    display: inline-flex;
    gap: 10px;
}
.simple-progress-stars__star {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13, 84, 115, .08);
    font-size: 1.4rem;
    transform: scale(.96);
}
.simple-progress-stars__star.is-on {
    background: linear-gradient(135deg, #ffd35f, #f7a748);
    box-shadow: 0 10px 20px rgba(247, 167, 72, .22);
    transform: scale(1);
}
.simple-progress-stars__label {
    font-size: 1rem;
    color: var(--primary-dark);
}
.kid-action-button {
    width: 100%;
    min-height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 24px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 900;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 16px 30px rgba(13, 84, 115, .12);
}
.kid-action-button:hover,
.kid-action-button:focus-visible,
.audio-hint-button:hover,
.audio-hint-button:focus-visible,
.kid-bottom-nav__item:hover,
.kid-bottom-nav__item:focus-visible,
.kid-map-card__cta:hover,
.kid-map-card__cta:focus-visible,
.adult-mode-entry__link:hover,
.adult-mode-entry__link:focus-visible,
.adult-mode-entry__toggle:hover,
.adult-mode-entry__toggle:focus-visible,
.kid-onboarding-card:hover,
.kid-onboarding-card:focus-within,
.kid-mode-shell__brand:hover,
.kid-mode-shell__brand:focus-visible,
.kid-mode-shell__logout:hover,
.kid-mode-shell__logout:focus-visible {
    transform: translateY(-2px);
}
.kid-action-button--primary {
    background: linear-gradient(135deg, #0db5e8, #5f7dff);
    color: #fff;
}
.kid-action-button--secondary {
    background: linear-gradient(135deg, #fff, #f9f4ff);
    color: #173f59;
    border: 1px solid rgba(95, 125, 255, .16);
}
.kid-action-button__icon {
    font-size: 1.7rem;
}
.kid-action-button__label {
    display: grid;
    gap: 3px;
    justify-items: start;
    text-align: left;
}
.kid-action-button__hint {
    display: block;
    color: var(--text-muted);
    font-size: .82rem;
}
.audio-hint-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(13, 84, 115, .1);
    background: rgba(255, 255, 255, .84);
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}
.audio-hint-button--secondary {
    background: rgba(13, 181, 232, .1);
}
.audio-hint-button--ghost {
    background: rgba(255, 255, 255, .62);
}
.kid-step-grid,
.kid-home-shortcuts,
.kid-home-simple-progress,
.kid-map-grid,
.kid-onboarding-grid {
    display: grid;
    gap: 16px;
}
.kid-step-grid,
.kid-home-shortcuts,
.kid-map-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kid-home-simple-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pictogram-step-card,
.kid-simple-card {
    display: grid;
    gap: 12px;
    padding: 22px;
    border-radius: 26px;
}
.pictogram-step-card {
    position: relative;
    text-align: left;
}
.pictogram-step-card__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(13, 181, 232, .1);
    font-size: 2rem;
}
.pictogram-step-card strong,
.kid-simple-card strong {
    font-size: 1.08rem;
    color: #113b5a;
}
.kid-simple-card__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255, 211, 95, .22);
    font-size: 1.8rem;
}
.kid-simple-card--wide {
    padding: 24px 26px;
}
.kid-home-adult-entry {
    margin-top: 4px;
}
.kid-onboarding-form,
.kid-avatar-form {
    display: grid;
    gap: 18px;
}
.kid-onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kid-onboarding-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .9);
    border: 2px solid transparent;
    box-shadow: 0 18px 34px rgba(13, 84, 115, .1);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.kid-onboarding-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.kid-onboarding-card.is-selected,
.kid-onboarding-card:has(input:checked) {
    border-color: #5f7dff;
    box-shadow: 0 18px 34px rgba(95, 125, 255, .18);
}
.kid-onboarding-card__emoji {
    font-size: 3rem;
}
.kid-onboarding-card strong {
    font-size: 1.18rem;
    color: #113b5a;
}
.kid-onboarding-card small {
    color: var(--text-muted);
    font-size: .92rem;
}
.kid-onboarding-card__audio {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(13, 181, 232, .14);
    cursor: pointer;
    font-size: 1rem;
}
.kid-onboarding-footer {
    width: min(100%, 420px);
    justify-self: center;
}
.kid-avatar-form__colors,
.adult-settings-panel {
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(13, 84, 115, .1);
    box-shadow: 0 14px 28px rgba(13, 84, 115, .08);
}
.kid-avatar-form__colors label,
.adult-settings-panel label {
    display: grid;
    gap: 8px;
    color: #113b5a;
    font-weight: 800;
}
.kid-avatar-form__colors input[type="color"] {
    width: 84px;
    height: 54px;
    border-radius: 14px;
    border: none;
    background: none;
}
.adult-settings-panel summary {
    cursor: pointer;
    font-weight: 900;
    color: #113b5a;
}
.adult-settings-panel select {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(13, 84, 115, .14);
    padding: 0 12px;
    background: #fff;
    font-size: 1rem;
}
.kid-map-card {
    display: grid;
    gap: 12px;
    padding: 22px;
    border-radius: 28px;
    text-align: left;
}
.kid-map-card__icon {
    width: 72px;
    height: 72px;
    font-size: 2.2rem;
}
.kid-map-card__cta,
.adult-mode-entry__link,
.adult-mode-entry__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 900;
}
.kid-map-card__cta {
    background: linear-gradient(135deg, #0db5e8, #5f7dff);
    color: #fff;
}
.kid-map-card.is-current {
    outline: 3px solid rgba(13, 181, 232, .36);
}
.kid-map-card.is-locked {
    opacity: .7;
}
.kid-map-card.is-locked .kid-map-card__cta {
    background: rgba(13, 84, 115, .12);
    color: var(--text-muted);
    pointer-events: none;
}
.kid-result-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
    padding: 28px;
    border-radius: 30px;
}
.kid-result-card__icon {
    width: 96px;
    height: 96px;
    font-size: 3.2rem;
}
.kid-result-card__actions {
    width: 100%;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kid-result-card__score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 211, 95, .18);
    color: #7a4c08;
    font-weight: 900;
}
.child-friendly-feedback-bubble {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(13, 84, 115, .08);
    box-shadow: 0 16px 34px rgba(13, 84, 115, .1);
}
.child-friendly-feedback-bubble__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(13, 181, 232, .12);
    font-size: 1.9rem;
    flex-shrink: 0;
}
.child-friendly-feedback-bubble__body {
    display: grid;
    gap: 4px;
}
.child-friendly-feedback-bubble__body strong {
    color: #113b5a;
}
.child-friendly-feedback-bubble--success .child-friendly-feedback-bubble__icon {
    background: rgba(112, 201, 110, .18);
}
.child-friendly-feedback-bubble--warning .child-friendly-feedback-bubble__icon {
    background: rgba(255, 211, 95, .22);
}
.emotional-toast-host {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: grid;
    gap: 10px;
}
.save-toast--kid {
    border-radius: 20px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(13, 84, 115, .08);
    box-shadow: 0 18px 36px rgba(13, 84, 115, .15);
    color: #113b5a;
    font-weight: 800;
}
.adult-mode-entry {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 30px;
}
.adult-mode-entry--compact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255, 255, 255, .86);
    color: #113b5a;
    font-weight: 900;
}
.adult-mode-entry__copy {
    display: grid;
    gap: 8px;
}
.adult-mode-entry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.adult-mode-entry__link {
    background: rgba(13, 181, 232, .1);
    color: #113b5a;
}
.adult-mode-entry__toggle {
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #173f59, #0d5473);
    color: #fff;
    width: fit-content;
}
.kid-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(100% - 24px, 920px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(13, 84, 115, .08);
    box-shadow: 0 24px 44px rgba(13, 84, 115, .16);
    backdrop-filter: blur(12px);
    z-index: 999;
}
.kid-bottom-nav__item {
    min-height: 72px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border: none;
    border-radius: 22px;
    background: transparent;
    text-decoration: none;
    color: #355167;
    font-weight: 800;
    cursor: pointer;
}
.kid-bottom-nav__item.is-active,
.kid-bottom-nav__item--help {
    background: rgba(13, 181, 232, .12);
    color: var(--primary-dark);
}
.kid-bottom-nav__icon {
    font-size: 1.55rem;
}
.kid-bottom-nav__label {
    font-size: .83rem;
}
html[data-theme="dark"] body.student-mode-kid {
    background:
        radial-gradient(circle at top left, rgba(255, 211, 95, .16), transparent 28%),
        radial-gradient(circle at top right, rgba(13, 181, 232, .14), transparent 24%),
        linear-gradient(180deg, #0d1a22 0%, #112330 58%, #16253a 100%);
}
html[data-theme="dark"] .kid-hero-card,
html[data-theme="dark"] .big-mission-card,
html[data-theme="dark"] .adult-mode-entry,
html[data-theme="dark"] .kid-result-card,
html[data-theme="dark"] .kid-simple-card,
html[data-theme="dark"] .kid-map-card,
html[data-theme="dark"] .kid-onboarding-card,
html[data-theme="dark"] .adult-settings-panel,
html[data-theme="dark"] .kid-avatar-form__colors,
html[data-theme="dark"] .child-friendly-feedback-bubble,
html[data-theme="dark"] .kid-bottom-nav,
html[data-theme="dark"] .avatar-greeting-card {
    background: rgba(14, 24, 33, .88);
    color: #f4f7fb;
}
html[data-theme="dark"] .avatar-greeting-card h1,
html[data-theme="dark"] .kid-hero-card h1,
html[data-theme="dark"] .kid-hero-card h2,
html[data-theme="dark"] .big-mission-card h2,
html[data-theme="dark"] .kid-result-card h1,
html[data-theme="dark"] .kid-map-card h2,
html[data-theme="dark"] .adult-mode-entry h2,
html[data-theme="dark"] .pictogram-step-card strong,
html[data-theme="dark"] .kid-simple-card strong,
html[data-theme="dark"] .child-friendly-feedback-bubble__body strong {
    color: #fff;
}
html[data-theme="dark"] .avatar-greeting-card p,
html[data-theme="dark"] .kid-hero-card p,
html[data-theme="dark"] .big-mission-card p,
html[data-theme="dark"] .kid-result-card p,
html[data-theme="dark"] .kid-simple-card p,
html[data-theme="dark"] .kid-map-card p,
html[data-theme="dark"] .adult-mode-entry p,
html[data-theme="dark"] .pictogram-step-card p {
    color: rgba(255, 255, 255, .82);
}
@media (max-width: 960px) {
    .kid-step-grid,
    .kid-home-shortcuts,
    .kid-map-grid {
        grid-template-columns: 1fr;
    }
    .kid-home-simple-progress,
    .kid-result-card__actions {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .kid-mode-shell {
        padding: 16px 14px 104px;
    }
    .kid-mode-shell__topbar,
    .avatar-greeting-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .avatar-greeting-card {
        text-align: left;
    }
    .kid-mode-shell__actions {
        width: 100%;
        justify-content: space-between;
    }
    .kid-onboarding-grid {
        grid-template-columns: 1fr;
    }
    .kid-bottom-nav {
        width: calc(100% - 12px);
        gap: 6px;
        padding: 10px 8px;
        bottom: 8px;
    }
    .kid-bottom-nav__item {
        min-height: 64px;
        padding: 8px 4px;
    }
    .kid-bottom-nav__label {
        font-size: .72rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kid-action-button,
    .audio-hint-button,
    .kid-bottom-nav__item,
    .kid-map-card__cta,
    .adult-mode-entry__link,
    .adult-mode-entry__toggle,
    .kid-onboarding-card,
    .kid-mode-shell__brand,
    .kid-mode-shell__logout {
        transition: none;
    }
}

/* === Section 17: STUDENT + TOOLS VISUAL REFRESH 2026-04 === */
.kid-home-shortcuts .kid-action-button,
.kid-home-simple-progress .kid-simple-card,
.kid-map-card,
.big-mission-card,
.avatar-greeting-card,
.tool-panel,
.tool-card {
    position: relative;
    overflow: hidden;
}
.kid-home-shortcuts .kid-action-button::before,
.kid-map-card::before,
.tool-panel::before,
.tool-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 55%);
    pointer-events: none;
}
.kid-home-shortcuts .kid-action-button {
    min-height: 96px;
    border-radius: 28px;
}
.kid-home-shortcuts .kid-action-button--primary {
    background: linear-gradient(145deg, #17c1f3, #5f7dff 52%, #8168ff);
}
.kid-home-shortcuts .kid-action-button--secondary {
    background: linear-gradient(145deg, #ffffff, #f6fbff 55%, #eef3ff);
}
.big-mission-card {
    border: 1px solid rgba(95, 125, 255, .12);
    box-shadow: 0 26px 50px rgba(38, 74, 124, .14);
}
.big-mission-card__hero {
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 236, 179, .85));
}
.simple-progress-stars__star {
    border: 1px solid rgba(13, 84, 115, .08);
}
.kid-simple-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(247, 250, 255, .88));
    border: 1px solid rgba(95, 125, 255, .08);
}
.kid-simple-card a {
    color: var(--primary-dark);
    font-weight: 900;
    text-decoration: none;
}
.kid-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kid-map-card {
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 211, 95, .2), transparent 30%),
        linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(243, 249, 255, .92));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kid-map-card:hover,
.kid-map-card:focus-within {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 24px 42px rgba(38, 74, 124, .16);
}
.kid-map-card__icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(226, 241, 255, .88));
}
.kid-map-card__actions {
    display: grid;
    gap: 10px;
}
.kid-map-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 16px;
    background: rgba(13, 181, 232, .08);
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 800;
}
.kid-result-card {
    box-shadow: 0 24px 44px rgba(38, 74, 124, .14);
}
.tool-page {
    display: grid;
    gap: 22px;
}
.tool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 211, 95, .22), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(236, 246, 255, .92));
    border: 1px solid rgba(95, 125, 255, .1);
    box-shadow: 0 24px 46px rgba(38, 74, 124, .12);
}
.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
    gap: 18px;
}
.tool-panel {
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(13, 181, 232, .1), transparent 24%),
        linear-gradient(165deg, rgba(255, 255, 255, .95), rgba(244, 249, 255, .92));
    border: 1px solid rgba(95, 125, 255, .1);
    box-shadow: 0 24px 46px rgba(38, 74, 124, .12);
}
.tool-toolbar,
.tool-sequence-controls,
.builder-preset-strip,
.builder-trays,
.alpha-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.tool-toolbar {
    justify-content: space-between;
    margin-bottom: 18px;
}
.tool-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.tool-detail {
    min-height: 100%;
}
.alphabet-letter-card,
.syllable-card,
.builder-token,
.builder-preset-chip,
.sound-card {
    border-radius: 24px !important;
    border: 1px solid rgba(95, 125, 255, .12) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(242, 248, 255, .94)) !important;
    box-shadow: 0 18px 32px rgba(38, 74, 124, .1) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.alphabet-letter-card:hover,
.alphabet-letter-card.is-active,
.syllable-card:hover,
.syllable-card.is-active,
.builder-token:hover,
.builder-token.is-active,
.sound-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px rgba(38, 74, 124, .14) !important;
    border-color: rgba(13, 181, 232, .3) !important;
}
.alphabet-letter-card__upper,
.syl-card-main,
.builder-result,
.builder-result--word {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #153d57;
}
.alphabet-letter-card__lower {
    color: #5f7dff;
    font-weight: 800;
}
.alphabet-detail-panel,
.syllable-detail-panel {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(244, 249, 255, .96));
    border: 1px solid rgba(13, 181, 232, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.alphabet-detail-panel__hero,
.syl-detail-result span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    min-height: 100px;
    padding: 10px 18px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(13, 181, 232, .12), rgba(95, 125, 255, .12));
    color: #153d57;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 900;
}
.alphabet-detail-panel__hero small {
    margin-left: 8px;
    font-size: 1.5rem;
    color: #5f7dff;
}
.syl-tab-btn,
.syl-speed-pill,
.alpha-page-btn {
    border-radius: 18px !important;
    border: 1px solid rgba(95, 125, 255, .12) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(242, 248, 255, .94)) !important;
    box-shadow: 0 12px 24px rgba(38, 74, 124, .08);
}
.syl-tab-btn.is-active,
.syl-speed-pill.is-active,
.alpha-page-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(13, 181, 232, .16), rgba(95, 125, 255, .18)) !important;
    border-color: rgba(13, 181, 232, .28) !important;
}
.syl-tab-consonant {
    font-size: 1.5rem;
    font-weight: 900;
    color: #153d57;
}
.syl-tab-preview {
    color: var(--text-muted);
    font-size: .85rem;
}
.syl-card-letters,
.syl-detail-pieces {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.syl-card-consonant,
.syl-detail-piece--consonant {
    color: #ef6a6a;
    font-weight: 900;
}
.syl-card-vowel,
.syl-detail-piece--vowel {
    color: #2fa56e;
    font-weight: 900;
}
.syl-card-plus,
.syl-detail-plus,
.syl-detail-arrow {
    color: #5f7dff;
    font-weight: 900;
}
.syl-detail-example,
.builder-detail-example,
.word-sentence-ctx {
    border-radius: 20px;
    border: 1px solid rgba(255, 211, 95, .28);
    background: linear-gradient(160deg, rgba(255, 250, 229, .92), rgba(255, 244, 204, .88));
}
.syl-quiz-feedback {
    padding: 14px 16px;
    border-radius: 18px;
    font-weight: 800;
}
.syl-quiz-feedback--ok {
    background: rgba(47, 165, 110, .12);
    color: #1d6b1c;
}
.syl-quiz-feedback--fail {
    background: rgba(217, 100, 98, .12);
    color: #8b2222;
}
.builder-workbench,
.word-builder-board {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(239, 247, 255, .94));
    border: 1px solid rgba(95, 125, 255, .1);
}
.builder-dropzones {
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(13, 181, 232, .08), rgba(95, 125, 255, .08));
}
.builder-slot,
.builder-result,
.builder-word-slots > * {
    min-height: 78px;
    border-radius: 20px !important;
    border: 2px dashed rgba(95, 125, 255, .28) !important;
    background: rgba(255, 255, 255, .94) !important;
}
.builder-result,
.builder-result--word {
    border-style: solid !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 247, 214, .95)) !important;
}
.builder-tray,
.builder-tray--word {
    padding: 10px;
    border-radius: 22px;
    background: rgba(13, 181, 232, .06);
    border: 1px solid rgba(13, 181, 232, .1);
}
.tool-sequence-controls .primary-btn,
.tool-sequence-controls .secondary-btn {
    min-height: 52px;
    border-radius: 18px;
}
@media (max-width: 1100px) {
    .tool-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 960px) {
    .kid-map-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .tool-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .tool-panel {
        padding: 18px;
    }
    .builder-workbench,
    .word-builder-board {
        padding: 16px;
    }
}


/* ===== modern-redesign.css ===== */
/* ============================================================
   MODERN REDESIGN – visual enhancement layer
   Targets: student/dashboard, student/levels,
   tools/alphabet, tools/syllabary,
   tools/syllable-builder, tools/word-builder
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   KEYFRAMES
   ────────────────────────────────────────────────────────── */
@keyframes floatUp {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-9px); }
}
@keyframes floatBlob1 {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(22px,-14px) scale(1.06); }
    66%       { transform: translate(-12px,18px) scale(.97); }
}
@keyframes floatBlob2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(-16px,10px) scale(.94); }
    66%       { transform: translate(12px,-18px) scale(1.05); }
}
@keyframes pulseCurrent {
    0%, 100% { box-shadow: 0 0 0 0   rgba(13,181,232,.4), 0 24px 48px rgba(13,84,115,.16); }
    50%       { box-shadow: 0 0 0 10px rgba(13,181,232,.12), 0 24px 48px rgba(13,84,115,.16); }
}
@keyframes shimmerText {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes iconWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%       { transform: rotate(-9deg) scale(1.12); }
    75%       { transform: rotate(9deg) scale(1.12); }
}
@keyframes bounceIn {
    0%   { transform: scale(.82); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes slideUpFade {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes rippleOut {
    from { transform: scale(0); opacity: .6; }
    to   { transform: scale(3); opacity: 0; }
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes progressGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(13,181,232,.3); }
    50%       { box-shadow: 0 0 20px rgba(13,181,232,.55); }
}

/* ──────────────────────────────────────────────────────────
   KID-MODE SHELL — animated background
   ────────────────────────────────────────────────────────── */
.student-mode-kid .kid-mode-shell {
    background:
        radial-gradient(ellipse at 8%  12%, rgba(255,179,68,.2)   , transparent 32%),
        radial-gradient(ellipse at 88% 8%,  rgba(13,181,232,.18)  , transparent 30%),
        radial-gradient(ellipse at 55% 82%, rgba(95,125,255,.14)  , transparent 28%),
        linear-gradient(170deg, #f0f8ff 0%, #ffffff 50%, #f5f0ff 100%);
    min-height: 100vh;
}

/* Floating decorative blobs (fixed, behind content) */
.student-mode-kid .kid-mode-shell::before,
.student-mode-kid .kid-mode-shell::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(52px);
    opacity: .5;
}
.student-mode-kid .kid-mode-shell::before {
    width: 360px; height: 360px;
    top: -90px; left: -90px;
    background: radial-gradient(circle, #b3ecff, #cde6ff);
    animation: floatBlob1 20s ease-in-out infinite;
}
.student-mode-kid .kid-mode-shell::after {
    width: 300px; height: 300px;
    bottom: 56px; right: -70px;
    background: radial-gradient(circle, #ffd6c2, #ffd6f0);
    animation: floatBlob2 24s ease-in-out infinite;
}
.student-mode-kid .kid-mode-shell > :not(.kbn):not(.v1-kid-more) { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   KID-MODE TOPBAR — glassmorphism pill
   ────────────────────────────────────────────────────────── */
.kid-mode-shell__topbar {
    padding: 8px 10px 8px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 28px rgba(13,84,115,.12), inset 0 0 0 1px rgba(255,255,255,.9);
    border: none;
}

/* Brand pill */
.kid-mode-shell__brand {
    background: linear-gradient(135deg, #0db5e8, #5f7dff) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(13,181,232,.35) !important;
    border: none !important;
    letter-spacing: .01em;
}
.kid-mode-shell__brand strong {
    background: linear-gradient(90deg, #fff 20%, #c8eeff 50%, #fff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 3.2s linear infinite;
}

/* Logout button — coral gradient */
.kid-mode-shell__logout {
    background: linear-gradient(135deg, #ff8c6b, #ff527a) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(255,82,122,.3) !important;
    border: none !important;
}

/* ──────────────────────────────────────────────────────────
   KID HERO CARD (avatar greeting + map header)
   ────────────────────────────────────────────────────────── */
.kid-hero-card {
    background:
        radial-gradient(circle at 88% 8%,  rgba(255,211,95,.3),  transparent 36%),
        radial-gradient(circle at 10% 88%, rgba(13,181,232,.18), transparent 32%),
        linear-gradient(158deg, #ffffff, #f0f9ff) !important;
    border: 1px solid rgba(13,181,232,.12) !important;
    box-shadow: 0 24px 58px rgba(13,84,115,.14) !important;
    animation: slideUpFade .5s ease both;
}

.avatar-greeting-card {
    background: linear-gradient(145deg, rgba(13,181,232,.14), rgba(255,211,95,.18)) !important;
    border: 1px solid rgba(13,181,232,.2) !important;
    box-shadow: 0 22px 50px rgba(13,84,115,.15) !important;
}
.avatar-greeting-card__avatar {
    animation: floatUp 3.4s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(255,211,95,.3), rgba(13,181,232,.2)) !important;
    box-shadow: 0 12px 28px rgba(13,84,115,.14) !important;
}

/* ──────────────────────────────────────────────────────────
   BIG MISSION CARD
   ────────────────────────────────────────────────────────── */
.big-mission-card {
    background:
        radial-gradient(ellipse at top,    rgba(255,211,95,.38), transparent 46%),
        radial-gradient(ellipse at 82% 80%, rgba(95,125,255,.16), transparent 36%),
        rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,211,95,.32) !important;
    box-shadow: 0 28px 62px rgba(13,84,115,.16) !important;
    animation: slideUpFade .55s .1s ease both;
}
.big-mission-card__badge {
    background: linear-gradient(135deg, rgba(255,167,72,.26), rgba(255,211,95,.22)) !important;
    color: #7a4a00 !important;
}
.big-mission-card__hero {
    animation: floatUp 3s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(255,211,95,.4), rgba(255,175,95,.28)) !important;
    box-shadow: 0 14px 34px rgba(255,180,68,.28) !important;
}

/* Pulsing CTA inside mission card */
.big-mission-card .kid-action-button--primary {
    background: linear-gradient(135deg, #ff7e48, #ff4a8d, #0db5e8) !important;
    background-size: 200% auto !important;
    animation: gradientShift 4s ease infinite !important;
    box-shadow: 0 14px 32px rgba(255,74,141,.34) !important;
}

/* ──────────────────────────────────────────────────────────
   KID ACTION BUTTONS
   ────────────────────────────────────────────────────────── */
.kid-action-button {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.42) !important;
    transition: transform .17s ease, box-shadow .17s ease !important;
}
/* Shine overlay on hover */
.kid-action-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, rgba(255,255,255,.24), transparent 60%);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.kid-action-button:hover::after { opacity: 1; }

.kid-action-button--primary {
    background: linear-gradient(135deg, #0db5e8, #5f7dff) !important;
    box-shadow: 0 16px 34px rgba(13,181,232,.32) !important;
    color: #fff !important;
}
.kid-action-button--primary:hover,
.kid-action-button--primary:focus-visible {
    box-shadow: 0 22px 44px rgba(13,181,232,.44) !important;
}
.kid-action-button--secondary {
    background: linear-gradient(145deg, #ffffff, #f4f0ff) !important;
    border: 1px solid rgba(95,125,255,.22) !important;
    color: #173f59 !important;
    box-shadow: 0 12px 26px rgba(95,125,255,.12) !important;
}
.kid-action-button--secondary:hover,
.kid-action-button--secondary:focus-visible {
    box-shadow: 0 18px 36px rgba(95,125,255,.2) !important;
}
/* Icon wiggle on hover */
.kid-action-button:hover .kid-action-button__icon {
    animation: iconWiggle .38s ease;
}
.kid-action-button__icon { transition: none; }

.kid-action-button--primary .kid-action-button__hint {
    color: rgba(255,255,255,.72) !important;
}
.kid-action-button--secondary .kid-action-button__hint {
    color: rgba(23,63,89,.5) !important;
}

/* ──────────────────────────────────────────────────────────
   KID SIMPLE CARDS (progress section)
   ────────────────────────────────────────────────────────── */
.kid-simple-card {
    background: linear-gradient(148deg, rgba(255,255,255,.96), rgba(240,248,255,.92)) !important;
    border: 1px solid rgba(95,125,255,.14) !important;
    box-shadow: 0 18px 40px rgba(13,84,115,.1) !important;
    animation: slideUpFade .5s ease both;
}
.kid-simple-card:nth-child(2) { animation-delay: .08s; }
.kid-simple-card__icon {
    background: linear-gradient(135deg, rgba(255,211,95,.32), rgba(255,167,72,.22)) !important;
    box-shadow: 0 6px 16px rgba(255,180,68,.18) !important;
}

/* ──────────────────────────────────────────────────────────
   LEVELS MAP
   ────────────────────────────────────────────────────────── */
.kid-map-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 18px !important;
}

/* Level card base */
.kid-map-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(158deg, #ffffff, #f4f9ff) !important;
    border: 1px solid rgba(13,84,115,.1) !important;
    box-shadow: 0 18px 40px rgba(13,84,115,.1) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    animation: cardReveal .44s ease both;
}
/* staggered reveal */
.kid-map-card:nth-child(1)  { animation-delay: .04s; }
.kid-map-card:nth-child(2)  { animation-delay: .09s; }
.kid-map-card:nth-child(3)  { animation-delay: .14s; }
.kid-map-card:nth-child(4)  { animation-delay: .19s; }
.kid-map-card:nth-child(5)  { animation-delay: .24s; }
.kid-map-card:nth-child(6)  { animation-delay: .29s; }
.kid-map-card:nth-child(7)  { animation-delay: .34s; }
.kid-map-card:nth-child(8)  { animation-delay: .39s; }
.kid-map-card:nth-child(9)  { animation-delay: .44s; }
.kid-map-card:nth-child(10) { animation-delay: .49s; }

/* Decorative shimmer strip at card top */
.kid-map-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0db5e8, #5f7dff, #a78bfa, #0db5e8);
    background-size: 200% auto;
    opacity: 0;
    transition: opacity .2s;
}
.kid-map-card:not(.is-locked):hover::before { opacity: 1; }

.kid-map-card:not(.is-locked):hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 58px rgba(13,84,115,.2) !important;
}

/* Icon */
.kid-map-card__icon {
    background: linear-gradient(135deg, rgba(255,211,95,.26), rgba(255,255,255,.9)) !important;
    box-shadow: 0 8px 20px rgba(255,180,68,.18) !important;
    border-radius: 22px;
}

/* Code badge */
.kid-map-card__badge {
    background: linear-gradient(135deg, rgba(13,181,232,.18), rgba(95,125,255,.14)) !important;
    color: #0d5473 !important;
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .07em;
}

/* Current level — pulsing ring + vivid colours */
.kid-map-card.is-current {
    background:
        radial-gradient(ellipse at top left, rgba(13,181,232,.16), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(95,125,255,.12), transparent 50%),
        #fff !important;
    border-color: rgba(13,181,232,.34) !important;
    box-shadow: 0 28px 56px rgba(13,181,232,.22) !important;
    animation: pulseCurrent 2.6s ease-in-out infinite, cardReveal .44s ease both !important;
}
.kid-map-card.is-current::before { opacity: 1; }
.kid-map-card.is-current .kid-map-card__icon {
    background: linear-gradient(135deg, rgba(13,181,232,.3), rgba(95,125,255,.22)) !important;
    box-shadow: 0 10px 24px rgba(13,181,232,.28) !important;
}
.kid-map-card.is-current .kid-map-card__badge {
    background: linear-gradient(135deg, #0db5e8, #5f7dff) !important;
    color: #fff !important;
}

/* Locked — muted + lock icon overlay */
.kid-map-card.is-locked {
    opacity: .62;
    filter: grayscale(.18);
}
.kid-map-card.is-locked::after {
    content: "🔒";
    position: absolute;
    top: 14px; right: 14px;
    font-size: 1.05rem;
    opacity: .58;
    pointer-events: none;
}

/* CTA button */
.kid-map-card__cta {
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0db5e8, #5f7dff) !important;
    color: #fff !important;
    font-size: .9rem;
    box-shadow: 0 8px 20px rgba(13,181,232,.28);
    transition: transform .15s, box-shadow .15s;
}
.kid-map-card__cta:hover,
.kid-map-card__cta:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(13,181,232,.4) !important;
}
.kid-map-card.is-locked .kid-map-card__cta {
    background: rgba(13,84,115,.12) !important;
    color: rgba(13,84,115,.5) !important;
    box-shadow: none;
}

/* "Ver nivel" link */
.kid-map-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.kid-map-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(13,84,115,.07);
    color: #0d5473;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: background .15s;
}
.kid-map-card__link:hover { background: rgba(13,181,232,.14); }

/* ──────────────────────────────────────────────────────────
   BOTTOM NAV — floating glass pill
   ────────────────────────────────────────────────────────── */
.kid-bottom-nav {
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    box-shadow: 0 22px 56px rgba(13,84,115,.22) !important;
    border: 1px solid rgba(255,255,255,.92) !important;
}
.kid-bottom-nav__item {
    border-radius: 20px;
    transition: background .15s, transform .15s;
    color: #4a6880;
}
.kid-bottom-nav__item.is-active {
    background: linear-gradient(135deg, rgba(13,181,232,.2), rgba(95,125,255,.16));
    color: #0d5473;
}
.kid-bottom-nav__item:hover:not(.is-active) {
    background: rgba(13,181,232,.1);
    color: #0d5473;
}
.kid-bottom-nav__icon { font-size: 1.3rem; display: block; }
.kid-bottom-nav__label { font-size: .68rem; font-weight: 800; }

/* ──────────────────────────────────────────────────────────
   TOOL PAGES — page-level container
   ────────────────────────────────────────────────────────── */
.tool-page { gap: 22px !important; }

/* ──────────────────────────────────────────────────────────
   TOOL HEADER — gradient banner
   ────────────────────────────────────────────────────────── */
.tool-header {
    padding: 28px 34px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 92% 10%, rgba(13,181,232,.22), transparent 36%),
        radial-gradient(ellipse at 8%  88%, rgba(95,125,255,.16), transparent 36%),
        linear-gradient(150deg, rgba(240,250,255,.98), rgba(248,248,255,.96));
    border: 1px solid rgba(95,125,255,.16);
    box-shadow: 0 18px 46px rgba(13,84,115,.1);
    position: relative;
    overflow: hidden;
    align-items: center;
}
/* decorative ring */
.tool-header::before {
    content: "";
    position: absolute;
    top: -60%; right: -4%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,181,232,.18), transparent 64%);
    pointer-events: none;
}
.tool-header > div, .tool-header > button { position: relative; z-index: 1; }

.tool-header h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.95rem) !important;
    background: linear-gradient(135deg, #0d4c6e, #3530a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 8px 0 6px !important;
    font-weight: 900;
}
.tool-header .eyebrow {
    background: rgba(13,181,232,.18) !important;
    color: #0d5473 !important;
    font-size: .75rem !important;
}
.tool-header p { color: #2a4b62; margin: 0; }

/* ──────────────────────────────────────────────────────────
   TOOL PANELS
   ────────────────────────────────────────────────────────── */
.tool-panel {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(13,84,115,.09) !important;
    box-shadow: 0 20px 52px rgba(13,84,115,.1) !important;
}

/* ──────────────────────────────────────────────────────────
   TOOL TOOLBAR
   ────────────────────────────────────────────────────────── */
.tool-toolbar {
    padding: 14px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(13,84,115,.08);
    box-shadow: 0 8px 22px rgba(13,84,115,.06);
    gap: 14px !important;
}

/* Speed pills */
.syl-speed-pill {
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: .88rem !important;
    font-weight: 800 !important;
    transition: all .16s ease !important;
    cursor: pointer;
}
.syl-speed-pill.is-active {
    background: linear-gradient(135deg, rgba(13,181,232,.2), rgba(95,125,255,.2)) !important;
    border-color: rgba(13,181,232,.32) !important;
    color: #0d5473 !important;
}

/* Tab buttons (syllabary family tabs) */
.syl-tab-btn {
    font-weight: 800 !important;
    transition: all .18s ease !important;
    cursor: pointer;
}
.syl-tab-btn.is-active {
    background: linear-gradient(135deg, rgba(13,181,232,.22), rgba(95,125,255,.2)) !important;
    border-color: rgba(13,181,232,.3) !important;
    color: #0d5473 !important;
}

/* Toggle labels */
.tool-toggle, .syl-toggle-label {
    font-weight: 700;
    cursor: pointer;
}

/* ──────────────────────────────────────────────────────────
   ALPHABET GRID — letter cards
   ────────────────────────────────────────────────────────── */
.alphabet-grid { gap: 12px !important; }

.alphabet-letter-card {
    cursor: pointer;
    background: linear-gradient(160deg, #ffffff, #f4f9ff) !important;
    border: 2px solid rgba(13,84,115,.09) !important;
    box-shadow: 0 8px 22px rgba(13,84,115,.07) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}
.alphabet-letter-card:hover:not(.is-active) {
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow: 0 18px 36px rgba(13,181,232,.2) !important;
    border-color: rgba(13,181,232,.34) !important;
}
.alphabet-letter-card.is-active {
    background: linear-gradient(148deg, rgba(13,181,232,.18), rgba(95,125,255,.14), #fff) !important;
    border-color: rgba(13,181,232,.44) !important;
    box-shadow: 0 18px 40px rgba(13,181,232,.24) !important;
    transform: scale(1.06) !important;
}
.alphabet-letter-card.is-playing {
    background: linear-gradient(148deg, rgba(255,211,95,.28), rgba(255,180,68,.18), #fff) !important;
    border-color: rgba(255,180,68,.5) !important;
    box-shadow: 0 18px 40px rgba(255,167,72,.3) !important;
    animation: bounceIn .34s ease;
}

/* Make the big letter glyph gradient-coloured */
.alphabet-letter-card__upper {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900;
    background: linear-gradient(135deg, #0d4c6e, #5f7dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}
.alphabet-letter-card__lower {
    font-size: 1.1rem !important;
    color: #5a7a90 !important;
    font-weight: 800;
}

/* Mastered star overlay */
.alphabet-letter-card.is-mastered::after {
    content: "⭐";
    position: absolute;
    top: 6px; right: 8px;
    font-size: .85rem;
}

/* Mastery progress bar */
.alpha-mastery-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(13,181,232,.09), rgba(95,125,255,.07));
    border: 1px solid rgba(13,181,232,.16);
    font-weight: 700;
    font-size: .92rem;
    color: #0d4c6e;
}
.alpha-mastery-track {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(13,84,115,.1);
    overflow: hidden;
    min-width: 80px;
}
.alpha-mastery-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0db5e8, #5f7dff, #a78bfa);
    transition: width .7s ease;
    animation: progressGlow 2s ease-in-out infinite;
}

/* Page-nav buttons */
.alpha-page-btn {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 900;
    cursor: pointer;
    transition: all .15s ease !important;
}
.alpha-page-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(13,181,232,.2), rgba(95,125,255,.18)) !important;
    border-color: rgba(13,181,232,.3) !important;
    transform: scale(1.06);
}
.alpha-page-dots { display: flex; gap: 6px; align-items: center; }

/* ──────────────────────────────────────────────────────────
   SYLLABARY GRID — syllable cards
   ────────────────────────────────────────────────────────── */
.syllabary-grid { gap: 12px !important; }

.syllable-card {
    cursor: pointer;
    background: linear-gradient(160deg, #ffffff, #f5f9ff) !important;
    border: 2px solid rgba(13,84,115,.09) !important;
    box-shadow: 0 8px 22px rgba(13,84,115,.07) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.syllable-card:hover:not(.is-active) {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 18px 36px rgba(13,181,232,.2) !important;
    border-color: rgba(13,181,232,.34) !important;
}
.syllable-card.is-active {
    background: linear-gradient(148deg, rgba(13,181,232,.18), rgba(95,125,255,.14), #fff) !important;
    border-color: rgba(13,181,232,.44) !important;
    box-shadow: 0 18px 40px rgba(13,181,232,.24) !important;
    transform: scale(1.06) !important;
}
.syllable-card.is-playing {
    background: linear-gradient(148deg, rgba(255,211,95,.28), rgba(255,180,68,.18), #fff) !important;
    border-color: rgba(255,180,68,.5) !important;
    animation: bounceIn .34s ease;
}
.syllable-card strong {
    background: linear-gradient(135deg, #0d4c6e, #5f7dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(2rem, 4vw, 2.7rem) !important;
    display: block;
}
.syllable-card small {
    font-weight: 800 !important;
    color: #5a7a90 !important;
    font-size: .9rem !important;
}

/* Consonant / vowel colour cues inside card */
.syl-card-consonant { color: #d64c4c !important; font-weight: 900; }
.syl-card-vowel     { color: #1d8a5c !important; font-weight: 900; }
.syl-card-plus      { color: #5f7dff !important; font-weight: 900; font-size: 1.1rem; }

/* ──────────────────────────────────────────────────────────
   TOOL DETAIL PANEL
   ────────────────────────────────────────────────────────── */
.tool-detail {
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(148deg, rgba(13,181,232,.07), rgba(95,125,255,.06), rgba(255,255,255,.98));
    border: 1px solid rgba(95,125,255,.14);
    min-height: 120px;
}
.alphabet-detail-panel__hero,
.syllable-detail-panel__hero {
    background: linear-gradient(145deg, rgba(13,181,232,.2), rgba(95,125,255,.2)) !important;
    border-radius: 28px !important;
    border: 2px solid rgba(95,125,255,.2) !important;
    box-shadow: 0 18px 44px rgba(13,84,115,.12) !important;
    font-size: clamp(4.5rem, 10vw, 7rem) !important;
}

/* Syllabary detail pieces */
.syl-detail-piece--consonant { color: #d64c4c !important; font-weight: 900; font-size: 1.6rem; }
.syl-detail-piece--vowel     { color: #1d8a5c !important; font-weight: 900; font-size: 1.6rem; }
.syl-detail-plus, .syl-detail-arrow { color: #5f7dff !important; font-weight: 900; font-size: 1.4rem; }

/* Example card inside detail */
.syl-detail-example,
.builder-detail-example,
.word-sentence-ctx {
    border-radius: 20px;
    border: 1px solid rgba(255,211,95,.3) !important;
    background: linear-gradient(158deg, rgba(255,250,229,.95), rgba(255,244,204,.9)) !important;
    padding: 14px 18px;
}

/* ──────────────────────────────────────────────────────────
   SYLLABARY CONTROLS (prev/replay/next/etc)
   ────────────────────────────────────────────────────────── */
.syl-controls {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(13,84,115,.08);
    box-shadow: 0 8px 24px rgba(13,84,115,.07);
}
.syl-controls-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.syl-ctrl-btn {
    flex: 1;
    min-width: 64px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(13,84,115,.1);
    background: linear-gradient(158deg, #fff, #f3f8ff);
    cursor: pointer;
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    box-shadow: 0 8px 18px rgba(13,84,115,.07);
}
.syl-ctrl-btn span { font-size: 1.25rem; line-height: 1; }
.syl-ctrl-btn small { font-size: .7rem; color: #5a7a90; font-weight: 700; }

.syl-ctrl-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(13,84,115,.14);
    background: linear-gradient(145deg, rgba(13,181,232,.1), rgba(95,125,255,.08), #fff);
    border-color: rgba(13,181,232,.3);
}
.syl-ctrl-btn:active { transform: scale(.94); }

.syl-ctrl-btn--replay {
    background: linear-gradient(135deg, rgba(13,181,232,.2), rgba(95,125,255,.16)) !important;
    border-color: rgba(13,181,232,.32) !important;
    color: #0d5473;
}
.syl-ctrl-btn--primary {
    background: linear-gradient(135deg, #0db5e8, #5f7dff) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 26px rgba(13,181,232,.3) !important;
}
.syl-ctrl-btn--primary small { color: rgba(255,255,255,.72) !important; }
.syl-ctrl-btn--primary:hover { box-shadow: 0 18px 36px rgba(13,181,232,.42) !important; }
.syl-ctrl-btn--stop {
    background: linear-gradient(135deg, rgba(217,100,98,.14), rgba(217,100,98,.08)) !important;
    border-color: rgba(217,100,98,.22) !important;
    color: #8b2222;
}
.syl-ctrl-btn--stop small { color: #8b2222 !important; opacity: .7; }

/* Sequence progress bar */
.syl-sequence-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(13,84,115,.1);
    overflow: hidden;
}
.syl-sequence-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0db5e8, #5f7dff);
    transition: width .4s ease;
}
.syl-sequence-label { font-size: .84rem; font-weight: 700; color: #0d5473; }

/* Quiz panel */
.syl-quiz-panel {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(95,125,255,.1), rgba(13,181,232,.08));
    border: 1px solid rgba(95,125,255,.18);
}
.syl-quiz-feedback { font-weight: 800; padding: 14px 18px; border-radius: 18px; }
.syl-quiz-feedback--ok   { background: rgba(47,165,110,.14); color: #1d6b1c; }
.syl-quiz-feedback--fail { background: rgba(217,100,98,.14);  color: #8b2222; }

/* Keyboard hints */
.syl-kbd-hints,
.alpha-kbd-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(13,84,115,.04);
    border: 1px solid rgba(13,84,115,.07);
}
.kbd-hint { font-size: .78rem; color: #4a6880; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.kbd-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid rgba(13,84,115,.2);
    box-shadow: 0 2px 5px rgba(13,84,115,.1);
    font-family: ui-monospace, monospace;
    font-size: .74rem;
    color: #0d5473;
    font-weight: 700;
}

/* ──────────────────────────────────────────────────────────
   ALPHABET — sequence controls
   ────────────────────────────────────────────────────────── */
.tool-sequence-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tool-sequence-controls .primary-btn {
    background: linear-gradient(135deg, #0db5e8, #5f7dff) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(13,181,232,.3) !important;
    border-radius: 18px !important;
    min-height: 52px !important;
    border: none !important;
}
.tool-sequence-controls .secondary-btn {
    background: linear-gradient(148deg, #fff, #f0f8ff) !important;
    color: #0d5473 !important;
    border: 1px solid rgba(13,84,115,.12) !important;
    border-radius: 18px !important;
    min-height: 52px !important;
}
.tool-sequence-controls .primary-btn:hover  { box-shadow: 0 16px 34px rgba(13,181,232,.42) !important; }
.tool-sequence-controls .secondary-btn:hover {
    background: linear-gradient(145deg, rgba(13,181,232,.1), rgba(95,125,255,.08), #fff) !important;
    border-color: rgba(13,181,232,.3) !important;
}

/* ──────────────────────────────────────────────────────────
   SYLLABLE / WORD BUILDER — workbench
   ────────────────────────────────────────────────────────── */
.builder-workbench,
.word-builder-board {
    background:
        radial-gradient(ellipse at 8%  10%, rgba(13,181,232,.1),  transparent 36%),
        radial-gradient(ellipse at 92% 90%, rgba(95,125,255,.1),  transparent 32%),
        linear-gradient(165deg, rgba(255,255,255,.97), rgba(240,248,255,.95)) !important;
    border: 1px solid rgba(95,125,255,.16) !important;
    box-shadow: 0 22px 54px rgba(13,84,115,.12) !important;
    border-radius: 28px !important;
}
.builder-dropzones {
    background: linear-gradient(145deg, rgba(13,181,232,.1), rgba(95,125,255,.1)) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(95,125,255,.18) !important;
    padding: 20px !important;
}

/* Slots */
.builder-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.95) !important;
    border: 2px dashed rgba(95,125,255,.3) !important;
    border-radius: 20px !important;
    font-weight: 700;
    color: #7a9ab2;
    font-size: 1rem;
    transition: all .18s ease !important;
}
.builder-slot.is-over {
    background: rgba(13,181,232,.18) !important;
    border-color: rgba(13,181,232,.52) !important;
    border-style: solid !important;
    box-shadow: 0 0 0 4px rgba(13,181,232,.2) !important;
}
.builder-slot.has-value {
    background: linear-gradient(145deg, rgba(13,181,232,.16), rgba(95,125,255,.12)) !important;
    border-color: rgba(13,181,232,.42) !important;
    border-style: solid !important;
    color: #0d5473 !important;
    font-weight: 900;
    font-size: 1.5rem;
}

/* Result slot */
.builder-result,
.builder-result--word {
    background: linear-gradient(145deg, rgba(255,211,95,.22), rgba(255,180,68,.16), rgba(255,255,255,.98)) !important;
    border: 2px solid rgba(255,180,68,.42) !important;
    border-style: solid !important;
    border-radius: 20px !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #7a4c00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .3s ease !important;
}
.builder-result.is-success {
    background: linear-gradient(145deg, rgba(47,165,110,.22), rgba(47,165,110,.12), rgba(255,255,255,.98)) !important;
    border-color: rgba(47,165,110,.44) !important;
    color: #1d6b1c !important;
    box-shadow: 0 0 0 4px rgba(47,165,110,.16) !important;
}

/* Plus / equals signs */
.builder-plus,
.builder-equals {
    font-size: 1.9rem !important;
    font-weight: 900;
    color: #5f7dff !important;
}

/* Token tiles */
.builder-token {
    cursor: grab !important;
    font-weight: 900;
    background: linear-gradient(158deg, #fff, #f0f8ff) !important;
    border: 1.5px solid rgba(13,84,115,.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(13,84,115,.1) !important;
    transition: transform .14s, box-shadow .14s !important;
    user-select: none;
}
.builder-token:hover {
    transform: translateY(-4px) scale(1.1) !important;
    box-shadow: 0 16px 32px rgba(13,181,232,.24) !important;
    border-color: rgba(13,181,232,.32) !important;
}
.builder-token:active { cursor: grabbing !important; transform: scale(.93) !important; }

/* Tray background */
.builder-tray,
.builder-tray--word {
    background: rgba(13,181,232,.06) !important;
    border: 1px solid rgba(13,181,232,.12) !important;
    border-radius: 22px !important;
    padding: 14px !important;
    gap: 10px !important;
}

/* Preset strip */
.builder-preset-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
}

/* Counter badges */
.builder-formed-counter,
.word-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(95,125,255,.16), rgba(13,181,232,.12)) !important;
    border: 1px solid rgba(95,125,255,.24) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    color: #2a3ea0 !important;
}
.builder-formed-counter strong,
.word-counter-badge strong {
    font-size: 1.12rem !important;
    color: #1e2d80 !important;
}

/* Word builder slots */
.builder-slot--word {
    border-radius: 18px !important;
    min-height: 68px;
    font-size: 1.4rem;
}
.builder-slot--word.is-correct {
    background: linear-gradient(145deg, rgba(47,165,110,.2), rgba(47,165,110,.1)) !important;
    border-color: #2fa56e !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(47,165,110,.22) !important;
    color: #1d6b1c !important;
}
.builder-slot--word.is-wrong {
    background: linear-gradient(145deg, rgba(217,100,98,.16), rgba(217,100,98,.08)) !important;
    border-color: #d96462 !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(217,100,98,.2) !important;
    color: #8b2222 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLS CATALOG  –  tc-*  namespace
═══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes tc-orb-float {
    0%,100% { transform: translate(0,0) scale(1); opacity:.7; }
    33%      { transform: translate(30px,-24px) scale(1.08); opacity:.9; }
    66%      { transform: translate(-18px,18px) scale(.95); opacity:.6; }
}
@keyframes tc-icon-bounce {
    0%,100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-10px) rotate(-4deg); }
    75%      { transform: translateY(-6px) rotate(4deg); }
}
@keyframes tc-card-in {
    from { opacity:0; transform: translateY(32px) scale(.96); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes tc-shine {
    from { left: -60%; }
    to   { left: 120%; }
}

/* Wrapper */
.tc {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ─── HERO ─── */
.tc-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 52px 52px 48px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 90% 0%,   rgba(79,70,229,.35), transparent 45%),
        radial-gradient(ellipse at 10% 100%, rgba(13,181,232,.28), transparent 45%),
        linear-gradient(145deg, #060d1f 0%, #0e1a40 55%, #060d1f 100%);
    margin-bottom: 32px;
}
.tc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(79,70,229,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,70,229,.06) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}
.tc-hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tc-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
}
.tc-hero__orb--a {
    width: 320px; height: 320px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(79,70,229,.5) 0%, transparent 70%);
    animation: tc-orb-float 18s ease-in-out infinite;
}
.tc-hero__orb--b {
    width: 260px; height: 260px;
    bottom: -60px; right: 20%;
    background: radial-gradient(circle, rgba(13,181,232,.45) 0%, transparent 70%);
    animation: tc-orb-float 22s ease-in-out infinite reverse;
    animation-delay: -7s;
}
.tc-hero__orb--c {
    width: 180px; height: 180px;
    top: 30%; left: 40%;
    background: radial-gradient(circle, rgba(168,85,247,.35) 0%, transparent 70%);
    animation: tc-orb-float 28s ease-in-out infinite;
    animation-delay: -12s;
}

.tc-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
}
.tc-hero__h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.tc-hero__p {
    font-size: .95rem;
    color: rgba(200,220,255,.7);
    margin: 0;
    max-width: 480px;
    line-height: 1.65;
}

.tc-hero__icons {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.tc-hero__icons span {
    font-size: 2.2rem;
    animation: tc-icon-bounce 3s ease-in-out infinite;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(79,70,229,.5));
}
.tc-hero__icons span:nth-child(2) { animation-delay: -.6s; }
.tc-hero__icons span:nth-child(3) { animation-delay: -1.2s; }
.tc-hero__icons span:nth-child(4) { animation-delay: -1.8s; }
.tc-hero__icons span:nth-child(5) { animation-delay: -2.4s; }

/* ─── GRID ─── */
.tc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* ─── CARD ─── */
.tc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.07);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    text-decoration: none;
    color: inherit;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    animation: tc-card-in .5s ease both;
}
.tc-card:nth-child(1) { animation-delay: .05s; }
.tc-card:nth-child(2) { animation-delay: .10s; }
.tc-card:nth-child(3) { animation-delay: .15s; }
.tc-card:nth-child(4) { animation-delay: .20s; }
.tc-card:nth-child(5) { animation-delay: .25s; }

.tc-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 56px rgba(0,0,0,.13);
}
.tc-card:hover .tc-card__icon {
    transform: scale(1.15) rotate(-5deg);
}

/* Shine overlay on hover */
.tc-card::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transform: skewX(-18deg);
    transition: none;
    pointer-events: none;
    z-index: 3;
}
.tc-card:hover::before {
    animation: tc-shine .5s ease forwards;
}

.tc-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 24px 0;
}
.tc-card__icon {
    font-size: 3.2rem;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    filter: drop-shadow(0 4px 12px var(--tc-accent, rgba(79,70,229,.4)));
}
.tc-card__tag {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tc-bg, rgba(79,70,229,.1));
    color: var(--tc-accent, #4f46e5);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.tc-card__body {
    padding: 16px 24px;
    flex: 1;
}
.tc-card__title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
    line-height: 1.2;
}
.tc-card__desc {
    font-size: .85rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}
.tc-card__footer {
    padding: 0 24px 24px;
}
.tc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    background: var(--tc-bg, rgba(79,70,229,.1));
    color: var(--tc-accent, #4f46e5);
    font-size: .85rem;
    font-weight: 700;
    transition: background .18s, transform .18s;
    width: 100%;
    justify-content: center;
}
.tc-card:hover .tc-card__cta {
    background: var(--tc-accent, #4f46e5);
    color: #fff;
}

/* Colored top bar */
.tc-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tc-accent, #4f46e5);
    border-radius: 24px 24px 0 0;
}

/* ─── Responsive catalog ─── */
@media (max-width: 900px) {
    .tc-hero { grid-template-columns: 1fr; padding: 40px 32px 36px; }
    .tc-hero__icons { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .tc-hero__icons span { font-size: 1.8rem; }
}
@media (max-width: 640px) {
    .tc-hero { padding: 32px 20px 28px; border-radius: 20px; margin-bottom: 24px; }
    .tc-hero__h1 { font-size: 1.7rem; }
    .tc-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 420px) {
    .tc-grid { grid-template-columns: 1fr; }
}

/* Dark mode catalog */
html[data-theme="dark"] .tc-card {
    background: #0a1628;
    border-color: rgba(79,70,229,.18);
}
html[data-theme="dark"] .tc-card__title { color: #e0f0ff; }
html[data-theme="dark"] .tc-card__desc  { color: #6a90aa; }

/* ═══════════════════════════════════════════════════════════════
   TOOL PAGES  –  tp-*  namespace (header banner + helpers)
═══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes tp-orb-drift {
    0%,100% { transform: scale(1); opacity:.6; }
    50%      { transform: scale(1.15); opacity:.9; }
}
@keyframes tp-icon-pulse {
    0%,100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 6px 16px var(--tp-glow, rgba(79,70,229,.5))); }
    50%      { transform: scale(1.08) rotate(-6deg); filter: drop-shadow(0 12px 28px var(--tp-glow, rgba(79,70,229,.7))); }
}

/* Per-tool accent colours */
.tp--alphabet      { --tp-accent: #4f46e5; --tp-accent2: #0db5e8; --tp-glow: rgba(79,70,229,.5); }
.tp--syllabary     { --tp-accent: #0ea5e9; --tp-accent2: #06b6d4; --tp-glow: rgba(14,165,233,.5); }
.tp--sounds        { --tp-accent: #10b981; --tp-accent2: #14b8a6; --tp-glow: rgba(16,185,129,.5); }
.tp--syllable-builder { --tp-accent: #f59e0b; --tp-accent2: #ef4444; --tp-glow: rgba(245,158,11,.5); }
.tp--word-builder  { --tp-accent: #8b5cf6; --tp-accent2: #6366f1; --tp-glow: rgba(139,92,246,.5); }

/* ─── HEADER BANNER ─── */
.tp-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 40px;
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 90% 0%,   rgba(var(--_tp-r,79),var(--_tp-g,70),var(--_tp-b,229),.3), transparent 44%),
        radial-gradient(ellipse at 10% 100%, rgba(13,181,232,.2), transparent 44%),
        linear-gradient(145deg, #060d1f 0%, #0e1a40 55%, #060d1f 100%);
    margin-bottom: 20px;
}
/* grid overlay */
.tp-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
/* accent orb behind icon */
.tp-header::after {
    content: '';
    position: absolute;
    top: 50%; left: 48px;
    transform: translateY(-50%);
    width: 130px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tp-accent, #4f46e5), transparent 70%);
    opacity: .25;
    filter: blur(32px);
    pointer-events: none;
    animation: tp-orb-drift 5s ease-in-out infinite;
}

.tp-header__icon {
    position: relative;
    z-index: 2;
    font-size: 3.6rem;
    flex-shrink: 0;
    animation: tp-icon-pulse 4s ease-in-out infinite;
}
.tp-header__copy {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tp-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.75);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 4px;
}
.tp-header__h2 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.15;
    -webkit-text-fill-color: unset !important;
    background: none !important;
    background-clip: unset !important;
}
.tp-header__p {
    font-size: .9rem;
    color: rgba(200,220,255,.65);
    margin: 0;
    line-height: 1.55;
}
.tp-header__audio {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, transform .18s;
}
.tp-header__audio:hover {
    background: rgba(255,255,255,.22);
    transform: scale(1.1);
}

/* ─── MASTERY BAR (alphabet) ─── */
.tp-mastery {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(79,70,229,.09), rgba(13,181,232,.07));
    border: 1px solid rgba(79,70,229,.16);
    font-size: .88rem;
    font-weight: 700;
    color: #1e1b4b;
}
.tp-mastery__icon { font-size: 1.1rem; }
.tp-mastery__label { flex-shrink: 0; white-space: nowrap; }
.tp-mastery__track {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(79,70,229,.12);
    overflow: hidden;
    min-width: 80px;
}
.tp-mastery__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tp-accent,#4f46e5), var(--tp-accent2,#0db5e8));
    transition: width .7s ease;
}

/* ─── PAGE NAV (alphabet) ─── */
.tp-page-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.tp-page-btn {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1.5px solid rgba(79,70,229,.2);
    background: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    color: #4f46e5;
    cursor: pointer;
    transition: all .15s ease;
}
.tp-page-btn:hover:not(:disabled) {
    background: rgba(79,70,229,.08);
    border-color: #4f46e5;
    transform: scale(1.06);
}
.tp-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.tp-page-dots { display: flex; gap: 6px; align-items: center; }

/* ─── MODE BUTTONS (alphabet) ─── */
.tp-mode-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1.5px solid rgba(79,70,229,.18);
    background: #fff;
    color: #374151;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .16s ease;
}
.tp-mode-btn.is-active,
.tp-mode-btn:hover {
    background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(13,181,232,.1));
    border-color: rgba(79,70,229,.3);
    color: #4f46e5;
}

/* ─── TABS WRAP (syllabary) ─── */
.tp-tabs-wrap {
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.tp-tabs-wrap::-webkit-scrollbar { height: 3px; }
.tp-tabs-wrap::-webkit-scrollbar-thumb { background: rgba(79,70,229,.2); border-radius: 2px; }

/* ─── PRACTICE BUTTON (syllabary) ─── */
.tp-practice-btn {
    padding: 8px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(6,182,212,.12));
    border: 1.5px solid rgba(14,165,233,.25);
    color: #0369a1;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}
.tp-practice-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: #fff;
    border-color: transparent;
}

/* ─── COUNTER BADGE ─── */
.tp-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(13,181,232,.1));
    border: 1.5px solid rgba(79,70,229,.2);
    font-size: .9rem;
    font-weight: 700;
    color: #312e81;
}
.tp-counter__icon { font-size: 1.1rem; }
.tp-counter strong { font-size: 1.1rem; color: #1e1b4b; }

/* ─── KEYBOARD HINTS ─── */
.tp-kbd {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(79,70,229,.04);
    border: 1px solid rgba(79,70,229,.1);
}
.tp-kbd__chip {
    font-size: .76rem;
    color: #4b5563;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-kbd__chip kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid rgba(79,70,229,.2);
    box-shadow: 0 2px 4px rgba(79,70,229,.12);
    font-family: ui-monospace, monospace;
    font-size: .72rem;
    color: #4f46e5;
    font-weight: 700;
}

/* ─── SELECT inside toolbar ─── */
.tp-select {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(79,70,229,.18);
    background: #fff;
    color: #374151;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.tp-select:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* ─── Responsive tool pages ─── */
@media (max-width: 768px) {
    .tp-header { padding: 24px 24px; gap: 16px; }
    .tp-header__icon { font-size: 2.6rem; }
    .tp-header__h2 { font-size: 1.4rem !important; }
}
@media (max-width: 480px) {
    .tp-header { flex-wrap: wrap; }
    .tp-header__audio { width: 44px; height: 44px; font-size: 1.1rem; }
}

/* ─── Dark mode tool pages ─── */
html[data-theme="dark"] .tp-header { background: rgba(6,13,31,.96); }
html[data-theme="dark"] .tp-mastery { background: rgba(79,70,229,.12); border-color: rgba(79,70,229,.2); color: #c8d8f5; }
html[data-theme="dark"] .tp-mode-btn { background: #0a1628; border-color: #1e3050; color: #9bb5cc; }
html[data-theme="dark"] .tp-mode-btn.is-active { background: rgba(79,70,229,.18); border-color: rgba(79,70,229,.35); color: #a5b4fc; }
html[data-theme="dark"] .tp-page-btn { background: #0a1628; border-color: #1e3050; color: #a5b4fc; }
html[data-theme="dark"] .tp-kbd { background: rgba(79,70,229,.06); border-color: rgba(79,70,229,.14); }
html[data-theme="dark"] .tp-kbd__chip { color: #7a90aa; }
html[data-theme="dark"] .tp-kbd__chip kbd { background: #0a1628; border-color: #1e3050; color: #a5b4fc; }
html[data-theme="dark"] .tp-counter { background: rgba(79,70,229,.18); border-color: rgba(79,70,229,.3); color: #c8d8f5; }
html[data-theme="dark"] .tp-counter strong { color: #e0eaff; }
html[data-theme="dark"] .tp-practice-btn { background: rgba(14,165,233,.15); border-color: rgba(14,165,233,.25); color: #7dd3fc; }
html[data-theme="dark"] .tp-select { background: #0a1628; border-color: #1e3050; color: #9bb5cc; }

/* ═══════════════════════════════════════════════════════════════
   KID DASHBOARD  –  kd-*  (bright, playful, game-like)
═══════════════════════════════════════════════════════════════ */
@keyframes kd-float     { 0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(3deg)} }
@keyframes kd-star-twirl{ 0%{transform:scale(0) rotate(-90deg);opacity:0}60%{transform:scale(1.2) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes kd-bob       { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes kd-ring-grow { 0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.1);opacity:1} }
@keyframes kd-tile-in   { from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes kd-sparkle   { 0%,100%{opacity:0;transform:scale(0) rotate(0deg)}30%{opacity:1;transform:scale(1.3) rotate(20deg)}70%{opacity:.6} }
@keyframes kd-cloud-drift { 0%,100%{transform:translateX(0)}50%{transform:translateX(18px)} }
@keyframes kd-prog-in   { from{width:0}to{width:var(--kpw,0%)} }
@keyframes kd-wiggle    { 0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)} }
@keyframes kd-bubble-in { from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)} }
@keyframes kd-mission-glow { 0%,100%{box-shadow:0 4px 24px rgba(79,70,229,.2)}50%{box-shadow:0 8px 40px rgba(79,70,229,.45)} }

/* Outer wrapper */
.kd {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
}

/* ── Decorative background ── */
.kd-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.kd-bg__cloud {
    position: absolute;
    font-size: 2.5rem;
    opacity: .18;
    animation: kd-cloud-drift 8s ease-in-out infinite;
}
.kd-bg__cloud--a { top:8%;  left:4%;  animation-delay:0s; }
.kd-bg__cloud--b { top:15%; right:6%; animation-delay:-4s; }

.kd-bg__star {
    position: absolute;
    font-size: 1.4rem;
    opacity: 0;
    animation: kd-sparkle 4s ease-in-out infinite;
}
.kd-bg__star--1{top:5%; left:8%; animation-delay:0s}
.kd-bg__star--2{top:8%; right:12%; animation-delay:.8s}
.kd-bg__star--3{top:18%;left:45%; animation-delay:1.6s}
.kd-bg__star--4{bottom:30%;right:8%; animation-delay:2.4s}
.kd-bg__star--5{bottom:15%;left:22%; animation-delay:3.2s}

.kd-bg__dot {
    position: absolute;
    border-radius:50%;
    opacity:.08;
}
.kd-bg__dot--1{width:200px;height:200px;top:-60px;right:-40px;background:#7c3aed}
.kd-bg__dot--2{width:160px;height:160px;bottom:20%;left:-50px;background:#0ea5e9}
.kd-bg__dot--3{width:120px;height:120px;bottom:5%;right:10%;background:#f59e0b}

/* ── HERO GREETING ── */
.kd-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 32px 36px;
    border-radius: 32px;
    background: linear-gradient(135deg,#7c3aed 0%,#4f46e5 40%,#0ea5e9 100%);
    box-shadow: 0 12px 48px rgba(79,70,229,.35), 0 2px 8px rgba(79,70,229,.2);
    overflow: hidden;
}
.kd-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background-image: radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%),
                      radial-gradient(circle at 80% 20%,rgba(255,255,255,.08) 0%,transparent 40%);
    pointer-events:none;
}

/* mascot */
.kd-hero__mascot {
    position:relative;
    flex-shrink:0;
    width:100px;height:100px;
    display:flex;align-items:center;justify-content:center;
    z-index:1;
}
.kd-hero__mascot-ring {
    position:absolute;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,.4);
    animation:kd-ring-grow 2.5s ease-in-out infinite;
}
.kd-hero__mascot-ring--1{inset:0; animation-delay:0s}
.kd-hero__mascot-ring--2{inset:12px; border-color:rgba(255,255,255,.6); animation-delay:-.8s}
.kd-hero__mascot-ring--3{inset:24px; border-color:rgba(255,255,255,.8); animation-delay:-1.6s}
.kd-hero__mascot-emoji { font-size:3rem; animation:kd-float 4s ease-in-out infinite; z-index:2; position:relative; }

/* copy */
.kd-hero__copy { flex:1; min-width:180px; z-index:1; position:relative; }
.kd-hero__greeting { font-size:.9rem; color:rgba(255,255,255,.75); margin:0; font-weight:600; }
.kd-hero__name {
    font-family:'Rajdhani',sans-serif;
    font-size:clamp(1.8rem,5vw,3rem);
    font-weight:900;
    color:#fff;
    margin:0 0 4px;
    line-height:1.1;
    text-shadow:0 2px 12px rgba(0,0,0,.2);
}
.kd-hero__subtitle { font-size:.9rem; color:rgba(255,255,255,.8); margin:0 0 14px; }

/* level badge */
.kd-hero__level {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1.5px solid rgba(255,255,255,.3);
    text-decoration:none;
    width:fit-content;
    transition:background .18s;
    margin-bottom:12px;
}
.kd-hero__level:hover { background:rgba(255,255,255,.28); }
.kd-hero__level-pin { font-size:1.1rem; }
.kd-hero__level-text { font-size:.85rem; font-weight:700; color:#fff; }
.kd-hero__level-text strong { font-family:'Rajdhani',sans-serif; font-size:1rem; margin-right:4px; }
.kd-hero__level-arrow { color:rgba(255,255,255,.7); font-size:1.2rem; }

/* stars */
.kd-hero__stars { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.kd-hero__star { font-size:1.4rem; transition:transform .2s; }
.kd-hero__star--on { animation:kd-star-twirl .5s ease both; }
.kd-hero__star--on:nth-child(2){animation-delay:.1s}
.kd-hero__star--on:nth-child(3){animation-delay:.2s}
.kd-hero__star--on:nth-child(4){animation-delay:.3s}
.kd-hero__star--on:nth-child(5){animation-delay:.4s}
.kd-hero__stars-label { font-size:.78rem; color:rgba(255,255,255,.7); font-weight:600; margin-left:6px; }

/* stat bubbles */
.kd-hero__bubbles { display:flex; gap:12px; flex-wrap:wrap; z-index:1; position:relative; }
.kd-bubble {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:12px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.15);
    border:1.5px solid rgba(255,255,255,.25);
    min-width:70px;
    animation:kd-bubble-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.kd-bubble:nth-child(2){animation-delay:.1s}
.kd-bubble:nth-child(3){animation-delay:.2s}
.kd-bubble__icon { font-size:1.3rem; }
.kd-bubble__num { font-family:'Rajdhani',sans-serif; font-size:1.5rem; font-weight:900; color:#fff; line-height:1; }
.kd-bubble__lbl { font-size:.65rem; color:rgba(255,255,255,.7); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

/* audio btn */
.kd-hero__audio {
    position:absolute; top:14px; right:14px; z-index:3;
    width:46px;height:46px; border-radius:50%;
    background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.25);
    color:#fff; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .18s, transform .18s;
}
.kd-hero__audio:hover { background:rgba(255,255,255,.28); transform:scale(1.12); }

/* ── MAIN MENU TILES ── */
.kd-menu {
    position:relative; z-index:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.kd-tile {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:24px 22px 20px;
    border-radius:28px;
    text-decoration:none;
    color:#fff;
    overflow:hidden;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    animation:kd-tile-in .5s ease both;
    cursor:pointer;
    min-height:200px;
}
.kd-tile:nth-child(1){animation-delay:.05s}
.kd-tile:nth-child(2){animation-delay:.10s}
.kd-tile:nth-child(3){animation-delay:.15s}
.kd-tile:nth-child(4){animation-delay:.20s}

.kd-tile--learn    { background:linear-gradient(145deg,#4f46e5,#7c3aed); box-shadow:0 10px 36px rgba(79,70,229,.4); }
.kd-tile--practice { background:linear-gradient(145deg,#0ea5e9,#6366f1); box-shadow:0 10px 36px rgba(14,165,233,.35); }
.kd-tile--library  { background:linear-gradient(145deg,#f59e0b,#ef4444); box-shadow:0 10px 36px rgba(245,158,11,.35); }
.kd-tile--awards   { background:linear-gradient(145deg,#10b981,#059669); box-shadow:0 10px 36px rgba(16,185,129,.35); }

.kd-tile:hover { transform:translateY(-8px) scale(1.03); }
.kd-tile--learn:hover    { box-shadow:0 20px 56px rgba(79,70,229,.5); }
.kd-tile--practice:hover { box-shadow:0 20px 56px rgba(14,165,233,.45); }
.kd-tile--library:hover  { box-shadow:0 20px 56px rgba(245,158,11,.45); }
.kd-tile--awards:hover   { box-shadow:0 20px 56px rgba(16,185,129,.45); }
.kd-tile:hover .kd-tile__emoji { animation:kd-wiggle .5s ease; }

/* Sparkle particles */
.kd-tile__stars { position:absolute; top:10px; right:12px; display:flex; gap:4px; }
.kd-tile__stars span { font-size:.9rem; opacity:0; animation:kd-sparkle 3s ease-in-out infinite; }
.kd-tile__stars span:nth-child(1){animation-delay:0s}
.kd-tile__stars span:nth-child(2){animation-delay:.8s}
.kd-tile__stars span:nth-child(3){animation-delay:1.6s}

/* Tile content */
.kd-tile__emoji { font-size:3rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); line-height:1; }
.kd-tile__body { flex:1; }
.kd-tile__title { font-family:'Rajdhani',sans-serif; font-size:1.3rem; font-weight:900; color:#fff; margin:0 0 3px; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.kd-tile__desc  { font-size:.8rem; color:rgba(255,255,255,.82); margin:0; line-height:1.4; }

/* Progress bar (learn tile) */
.kd-tile__progress { display:flex; align-items:center; gap:8px; }
.kd-tile__bar { flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; }
.kd-tile__fill { height:100%; border-radius:inherit; background:rgba(255,255,255,.8); width:var(--kpw,0%); animation:kd-prog-in 1.2s ease both .3s; }
.kd-tile__pct { font-size:.72rem; color:rgba(255,255,255,.8); font-weight:700; white-space:nowrap; }

/* Tags row */
.kd-tile__tags { display:flex; gap:6px; flex-wrap:wrap; }
.kd-tile__tags span { padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.18); font-size:.72rem; font-weight:700; color:rgba(255,255,255,.9); }

/* CTA button */
.kd-tile__btn {
    display:inline-flex; align-items:center;
    padding:9px 18px; border-radius:14px;
    background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.3);
    font-size:.85rem; font-weight:800; color:#fff;
    width:fit-content;
    transition:background .18s;
}
.kd-tile:hover .kd-tile__btn { background:rgba(255,255,255,.35); }

/* Badge (level code) */
.kd-tile__badge {
    position:absolute; bottom:16px; right:18px;
    padding:3px 10px; border-radius:8px;
    background:rgba(255,255,255,.2);
    font-family:'Rajdhani',sans-serif;
    font-size:.78rem; font-weight:800; color:#fff;
}

/* ── MISSION CARD ── */
.kd-mission {
    position:relative; z-index:1;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 24px;
    border-radius:24px;
    background:#fff;
    border:2px solid rgba(79,70,229,.2);
    box-shadow:0 4px 24px rgba(79,70,229,.12);
    animation:kd-mission-glow 3s ease-in-out infinite;
}
.kd-mission--done { border-color:rgba(16,185,129,.25); animation:none; box-shadow:0 4px 16px rgba(16,185,129,.1); }
.kd-mission__icon { font-size:2rem; flex-shrink:0; }
.kd-mission__copy { flex:1; display:flex; flex-direction:column; gap:2px; }
.kd-mission__copy strong { font-size:.9rem; font-weight:800; color:#111827; }
.kd-mission__copy span   { font-size:.82rem; color:#6b7280; }
.kd-mission__btn {
    padding:9px 20px; border-radius:14px;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff; font-size:.85rem; font-weight:800; text-decoration:none;
    flex-shrink:0; transition:transform .18s, box-shadow .18s;
    box-shadow:0 4px 16px rgba(79,70,229,.35);
}
.kd-mission__btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(79,70,229,.45); }

/* Adult entry */
.kd-adult { display:flex; justify-content:center; padding-top:4px; position:relative; z-index:1; }

/* ── Responsive ── */
@media(max-width:680px){
    .kd-hero { flex-direction:column; padding:24px 20px; gap:16px; }
    .kd-hero__mascot { width:80px; height:80px; }
    .kd-hero__mascot-emoji { font-size:2.4rem; }
    .kd-hero__name { font-size:2rem; }
    .kd-hero__bubbles { gap:8px; }
    .kd-bubble { padding:10px 12px; min-width:60px; }
}
@media(max-width:480px){
    .kd-menu { grid-template-columns:1fr; gap:14px; }
    .kd-tile { min-height:160px; }
}

/* ═══════════════════════════════════════════════════════════════
   KID TOOLS CATALOG  –  ktc-*
═══════════════════════════════════════════════════════════════ */
@keyframes ktc-blob  { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:scale(1)}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:scale(1.08)} }
@keyframes ktc-tile-in { from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes ktc-icon-bounce { 0%,100%{transform:translateY(0) rotate(0deg)}40%{transform:translateY(-12px) rotate(-8deg)}70%{transform:translateY(-8px) rotate(4deg)} }
@keyframes ktc-ring-spin { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes ktc-spark  { 0%,100%{opacity:0;transform:scale(0) rotate(0deg)}30%{opacity:1;transform:scale(1.2) rotate(15deg)}70%{opacity:.5} }

.ktc {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* BG */
.ktc-bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ktc-bg__blob {
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.12;
    animation:ktc-blob 12s ease-in-out infinite;
}
.ktc-bg__blob--a { width:400px;height:400px; top:-100px;left:-80px; background:#7c3aed; animation-delay:0s; }
.ktc-bg__blob--b { width:320px;height:320px; bottom:-60px;right:-40px; background:#0ea5e9; animation-delay:-5s; }
.ktc-bg__blob--c { width:240px;height:240px; top:40%;left:40%; background:#f59e0b; animation-delay:-9s; }
.ktc-bg__star {
    position:absolute;
    left:var(--kx,50%); top:var(--ky,50%);
    font-size:1.4rem; opacity:0;
    animation:ktc-spark 4s var(--kd,0s) ease-in-out infinite;
    pointer-events:none;
}

/* HERO */
.ktc-hero {
    position:relative; z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:36px 32px 28px;
    border-radius:32px;
    background:linear-gradient(135deg,#fef3c7 0%,#e0f2fe 50%,#f0fdf4 100%);
    border:2px solid rgba(0,0,0,.05);
    box-shadow:0 4px 28px rgba(0,0,0,.06);
    text-align:center;
    overflow:hidden;
}
.ktc-hero__emoji-row {
    display:flex; gap:16px; font-size:2.4rem; justify-content:center;
}
.ktc-hero__emoji-row span { animation:kd-bob 2.4s ease-in-out infinite; display:block; }
.ktc-hero__emoji-row span:nth-child(2){animation-delay:-.5s}
.ktc-hero__emoji-row span:nth-child(3){animation-delay:-1s}
.ktc-hero__emoji-row span:nth-child(4){animation-delay:-1.5s}
.ktc-hero__emoji-row span:nth-child(5){animation-delay:-2s}
.ktc-hero__h1 { font-family:'Rajdhani',sans-serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:#111827; margin:0; line-height:1.1; }
.ktc-hero__p  { font-size:.92rem; color:#6b7280; margin:0; line-height:1.55; }

/* GRID */
.ktc-grid {
    position:relative; z-index:1;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:22px;
}

/* TILE */
.ktc-tile {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:28px 22px 22px;
    border-radius:28px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(145deg,var(--kt-c1,#4f46e5),var(--kt-c2,#818cf8));
    box-shadow:0 10px 40px color-mix(in srgb,var(--kt-c1,#4f46e5) 50%,transparent);
    overflow:hidden;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
    animation:ktc-tile-in .5s ease both;
    text-align:center;
}
.ktc-tile:nth-child(1){animation-delay:.05s; box-shadow:0 10px 40px rgba(79,70,229,.4)}
.ktc-tile:nth-child(2){animation-delay:.10s; box-shadow:0 10px 40px rgba(14,165,233,.4)}
.ktc-tile:nth-child(3){animation-delay:.15s; box-shadow:0 10px 40px rgba(16,185,129,.4)}
.ktc-tile:nth-child(4){animation-delay:.20s; box-shadow:0 10px 40px rgba(245,158,11,.4)}
.ktc-tile:nth-child(5){animation-delay:.25s; box-shadow:0 10px 40px rgba(139,92,246,.4)}
.ktc-tile:hover { transform:translateY(-10px) scale(1.03); }
.ktc-tile:hover .ktc-tile__icon { animation:ktc-icon-bounce .6s ease; }

/* Sparks inside tile */
.ktc-tile__spark { position:absolute; font-size:1.1rem; opacity:0; animation:ktc-spark 3s ease-in-out infinite; pointer-events:none; }
.ktc-tile__spark--1 { top:10px;right:12px; animation-delay:0s; }
.ktc-tile__spark--2 { bottom:14px;left:14px; animation-delay:1.2s; }

/* Icon */
.ktc-tile__icon-wrap { position:relative; width:90px;height:90px; display:flex; align-items:center; justify-content:center; }
.ktc-tile__icon-ring {
    position:absolute; inset:0; border-radius:50%;
    border:2.5px solid rgba(255,255,255,.35);
    animation:ktc-ring-spin 12s linear infinite;
    border-top-color:rgba(255,255,255,.8);
}
.ktc-tile__icon { font-size:3.4rem; position:relative; z-index:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); }

/* Badge */
.ktc-tile__badge {
    display:inline-block;
    padding:4px 16px; border-radius:999px;
    background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.3);
    font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:900; color:#fff;
    letter-spacing:.06em;
}

/* Text */
.ktc-tile__title { font-family:'Rajdhani',sans-serif; font-size:1.3rem; font-weight:900; color:#fff; margin:0; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.ktc-tile__fun   { font-size:.9rem; font-weight:700; color:rgba(255,255,255,.9); margin:0; }
.ktc-tile__desc  { font-size:.78rem; color:rgba(255,255,255,.75); margin:0; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Footer */
.ktc-tile__footer { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:4px; }
.ktc-tile__level { font-size:.72rem; color:rgba(255,255,255,.7); font-weight:700; background:rgba(255,255,255,.15); padding:3px 10px; border-radius:999px; }
.ktc-tile__btn {
    padding:9px 20px; border-radius:14px;
    background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.3);
    color:#fff; font-size:.85rem; font-weight:800;
    transition:background .18s;
}
.ktc-tile:hover .ktc-tile__btn { background:rgba(255,255,255,.38); }

/* ── Responsive catalog ── */
@media(max-width:640px) { .ktc-grid { grid-template-columns:1fr 1fr; gap:14px; } .ktc-tile { padding:20px 16px 16px; } }
@media(max-width:400px) { .ktc-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════
   KID TOOL PAGE HEADERS  –  ktp-*
═══════════════════════════════════════════════════════════════ */
@keyframes ktp-bubble-float { 0%,100%{transform:translateY(0) rotate(var(--kr,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--kr,0deg) + 10deg))} }
@keyframes ktp-spark-pop    { 0%,100%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1.3)}80%{opacity:.5;transform:scale(.9)} }
@keyframes ktp-icon-wobble  { 0%,100%{transform:scale(1) rotate(0deg)}30%{transform:scale(1.1) rotate(-8deg)}70%{transform:scale(1.05) rotate(5deg)} }
@keyframes ktp-bar-grow     { from{width:0}to{width:var(--kbw,0%)} }

/* accent per tool (bright palette) */
.ktp--alphabet       { --ktp-c1:#4f46e5; --ktp-c2:#818cf8; --ktp-light:rgba(79,70,229,.12);  --ktp-mid:rgba(79,70,229,.5); }
.ktp--syllabary      { --ktp-c1:#0ea5e9; --ktp-c2:#38bdf8; --ktp-light:rgba(14,165,233,.12); --ktp-mid:rgba(14,165,233,.5); }
.ktp--sounds         { --ktp-c1:#10b981; --ktp-c2:#34d399; --ktp-light:rgba(16,185,129,.12); --ktp-mid:rgba(16,185,129,.5); }
.ktp--syllable-builder { --ktp-c1:#f59e0b; --ktp-c2:#fbbf24; --ktp-light:rgba(245,158,11,.12); --ktp-mid:rgba(245,158,11,.5); }
.ktp--word-builder   { --ktp-c1:#8b5cf6; --ktp-c2:#a78bfa; --ktp-light:rgba(139,92,246,.12); --ktp-mid:rgba(139,92,246,.5); }

/* HEADER */
.ktp-head {
    position:relative;
    border-radius:28px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    padding:36px 32px 28px;
    text-align:center;
    color:#fff;
    min-height:200px;
    margin-bottom:4px;
}
.ktp-head--purple { background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#a855f7 100%); box-shadow:0 12px 48px rgba(79,70,229,.4); }
.ktp-head--teal   { background:linear-gradient(135deg,#0ea5e9 0%,#06b6d4 50%,#0d9488 100%); box-shadow:0 12px 48px rgba(14,165,233,.4); }
.ktp-head--green  { background:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%); box-shadow:0 12px 48px rgba(16,185,129,.4); }
.ktp-head--amber  { background:linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%); box-shadow:0 12px 48px rgba(245,158,11,.4); }
.ktp-head--violet { background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 50%,#6d28d9 100%); box-shadow:0 12px 48px rgba(139,92,246,.4); }

/* Floating letter/syllable bubbles */
.ktp-head__deco { position:absolute; inset:0; pointer-events:none; }
.ktp-head__bubble {
    position:absolute;
    font-family:'Rajdhani',sans-serif;
    font-weight:900;
    color:rgba(255,255,255,.2);
    border-radius:50%;
    background:rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    animation:ktp-bubble-float 4s ease-in-out infinite;
}
.ktp-head__bubble--1 { width:64px;height:64px; font-size:1.4rem; top:10%; left:6%;  --kr:-10deg; animation-delay:0s; }
.ktp-head__bubble--2 { width:52px;height:52px; font-size:1.1rem; top:15%; right:8%; --kr:8deg;  animation-delay:-.8s; }
.ktp-head__bubble--3 { width:56px;height:56px; font-size:1.2rem; bottom:12%;left:10%;--kr:5deg; animation-delay:-1.6s; }
.ktp-head__bubble--4 { width:48px;height:48px; font-size:1rem;   bottom:15%;right:12%;--kr:-6deg;animation-delay:-2.4s; }

.ktp-head__spark { position:absolute; font-size:1.4rem; animation:ktp-spark-pop 2.5s ease-in-out infinite; }
.ktp-head__spark--1 { top:8%;  left:28%; animation-delay:0s; }
.ktp-head__spark--2 { top:12%; right:30%; animation-delay:.9s; }
.ktp-head__spark--3 { bottom:10%;left:50%; animation-delay:1.8s; }

/* Center content */
.ktp-head__center { position:relative; z-index:2; }
.ktp-head__big-icon { font-size:4rem; display:block; animation:ktp-icon-wobble 4s ease-in-out infinite; filter:drop-shadow(0 6px 20px rgba(0,0,0,.3)); }
.ktp-head__h2 { font-family:'Rajdhani',sans-serif; font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:900; color:#fff; margin:4px 0 0; line-height:1.15; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.ktp-head__p  { font-size:.9rem; color:rgba(255,255,255,.82); margin:6px 0 0; }

.ktp-head__audio {
    position:absolute; top:14px; right:14px; z-index:3;
    width:46px;height:46px; border-radius:50%;
    background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.28);
    color:#fff; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .18s,transform .18s;
}
.ktp-head__audio:hover { background:rgba(255,255,255,.3); transform:scale(1.12); }

/* Panel wrapper */
.ktp-panel { border-radius:24px !important; }

/* Toolbar */
.ktp-toolbar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:12px 16px; border-radius:18px;
    background:#fff; border:1.5px solid rgba(0,0,0,.07);
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.ktp-toolbar__group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ktp-label { font-size:.8rem; font-weight:700; color:#6b7280; }

/* Mode buttons */
.ktp-mode {
    padding:8px 18px; border-radius:12px;
    border:1.5px solid rgba(0,0,0,.1); background:#f9fafb;
    font-size:.85rem; font-weight:800; color:#374151; cursor:pointer;
    transition:all .16s ease;
}
.ktp-mode.is-active { background:linear-gradient(135deg,var(--ktp-c1,#4f46e5),var(--ktp-c2,#818cf8)); color:#fff; border-color:transparent; box-shadow:0 4px 16px var(--ktp-mid,rgba(79,70,229,.4)); }
.ktp-mode:hover:not(.is-active) { background:#f0f0ff; border-color:var(--ktp-c1,#4f46e5); color:var(--ktp-c1,#4f46e5); }

/* Speed pills */
.ktp-speeds { display:flex; gap:6px; }
.ktp-select {
    padding:8px 14px; border-radius:12px; border:1.5px solid rgba(0,0,0,.1);
    background:#f9fafb; font-size:.95rem; font-family:inherit; cursor:pointer;
    outline:none; transition:border-color .15s;
}
.ktp-select:focus { border-color:var(--ktp-c1,#4f46e5); box-shadow:0 0 0 3px var(--ktp-light,rgba(79,70,229,.15)); }
.ktp-speed {
    width:42px;height:42px; border-radius:12px;
    border:1.5px solid rgba(0,0,0,.1); background:#f9fafb;
    font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .15s ease;
}
.ktp-speed.is-active { background:linear-gradient(135deg,var(--ktp-c1,#4f46e5),var(--ktp-c2,#818cf8)); border-color:transparent; box-shadow:0 4px 12px var(--ktp-mid,rgba(79,70,229,.4)); }

/* Toggle */
.ktp-toggle { display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:#374151; cursor:pointer; }
.ktp-toggle span { user-select:none; }

/* Practice btn */
.ktp-practice-btn {
    padding:8px 16px; border-radius:12px;
    background:linear-gradient(135deg,var(--ktp-c1,#4f46e5),var(--ktp-c2,#818cf8));
    border:none; color:#fff; font-size:.85rem; font-weight:800; cursor:pointer;
    box-shadow:0 4px 14px var(--ktp-mid,rgba(79,70,229,.4));
    transition:transform .18s, box-shadow .18s;
}
.ktp-practice-btn:hover { transform:translateY(-2px); }

/* Mastery bar */
.ktp-mastery {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; border-radius:16px;
    background:var(--ktp-light,rgba(79,70,229,.1));
    border:1.5px solid var(--ktp-mid,rgba(79,70,229,.25));
}
.ktp-mastery__label { font-size:.85rem; font-weight:800; color:#111827; white-space:nowrap; }
.ktp-mastery__track { flex:1; height:14px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; position:relative; min-width:80px; }
.ktp-mastery__fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ktp-c1,#4f46e5),var(--ktp-c2,#818cf8)); transition:width .7s ease; }
.ktp-mastery__shine { position:absolute; top:0;bottom:0; left:-40%; width:30%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:ktc-ring-spin 2s linear infinite; border-radius:inherit; }

/* Page nav */
.ktp-pagenav { display:flex; align-items:center; gap:12px; justify-content:center; }
.ktp-pagebtn {
    width:46px;height:46px; border-radius:14px;
    border:2px solid rgba(0,0,0,.1); background:#fff;
    font-size:1.2rem; font-weight:900; color:var(--ktp-c1,#4f46e5); cursor:pointer;
    transition:all .15s ease; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.ktp-pagebtn:hover:not(:disabled) { background:var(--ktp-c1,#4f46e5); color:#fff; border-color:transparent; transform:scale(1.08); }
.ktp-pagebtn:disabled { opacity:.3; cursor:not-allowed; }
.ktp-pagedots { display:flex; gap:8px; align-items:center; }

/* Tabs scroll */
.ktp-tabs-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.ktp-tabs-scroll::-webkit-scrollbar { height:3px; }
.ktp-tabs-scroll::-webkit-scrollbar-thumb { background:var(--ktp-mid,rgba(79,70,229,.3)); border-radius:2px; }

/* Control buttons */
.ktp-controls { display:flex; flex-wrap:wrap; gap:8px; }
.ktp-ctrl {
    flex:1; min-width:80px;
    padding:11px 14px; border-radius:14px;
    font-size:.82rem; font-weight:800; cursor:pointer;
    transition:transform .16s, box-shadow .16s;
}
.ktp-ctrl--pri {
    background:linear-gradient(135deg,var(--ktp-c1,#4f46e5),var(--ktp-c2,#818cf8));
    color:#fff; border:none;
    box-shadow:0 6px 20px var(--ktp-mid,rgba(79,70,229,.4));
}
.ktp-ctrl--pri:hover { transform:translateY(-2px); box-shadow:0 10px 28px var(--ktp-mid,rgba(79,70,229,.5)); }
.ktp-ctrl--sec {
    background:#f9fafb; color:#374151;
    border:1.5px solid rgba(0,0,0,.1);
}
.ktp-ctrl--sec:hover { background:var(--ktp-light,rgba(79,70,229,.1)); border-color:var(--ktp-c1,#4f46e5); color:var(--ktp-c1,#4f46e5); transform:translateY(-1px); }

/* Big controls (syllabary) */
.ktp-bigctrls { display:flex; flex-direction:column; gap:10px; }
.ktp-bigctrls__row { display:flex; gap:8px; }
.ktp-bigctrl {
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:64px; border-radius:18px;
    border:1.5px solid rgba(0,0,0,.09);
    background:linear-gradient(160deg,#fff,#f5f9ff);
    font-size:1.2rem; font-weight:800; cursor:pointer; color:#374151;
    box-shadow:0 4px 12px rgba(0,0,0,.07);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s;
}
.ktp-bigctrl small { font-size:.68rem; color:#9ca3af; font-weight:700; }
.ktp-bigctrl:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.ktp-bigctrl--replay { background:linear-gradient(135deg,var(--ktp-light,rgba(14,165,233,.12)),rgba(255,255,255,.9)); border-color:var(--ktp-mid,rgba(14,165,233,.3)); color:var(--ktp-c1,#0ea5e9); }
.ktp-bigctrl--all { background:linear-gradient(135deg,var(--ktp-c1,#0ea5e9),var(--ktp-c2,#38bdf8)); color:#fff; border:none; box-shadow:0 6px 20px var(--ktp-mid,rgba(14,165,233,.45)); }
.ktp-bigctrl--all small { color:rgba(255,255,255,.75); }
.ktp-bigctrl--stop { background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(255,255,255,.9)); border-color:rgba(239,68,68,.2); color:#dc2626; }

/* Keyboard hints */
.ktp-kbd { display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px; border-radius:14px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); }
.ktp-key { font-size:.74rem; color:#6b7280; font-weight:600; display:flex; align-items:center; gap:5px; }
.ktp-key kbd {
    padding:2px 8px; border-radius:6px;
    background:#fff; border:1.5px solid rgba(0,0,0,.14);
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    font-family:ui-monospace,monospace; font-size:.7rem;
    color:var(--ktp-c1,#4f46e5); font-weight:800;
}

/* ── Responsive tool pages ── */
@media(max-width:680px){
    .ktp-head { padding:28px 20px 22px; min-height:160px; }
    .ktp-head__big-icon { font-size:3rem; }
    .ktp-head__h2 { font-size:1.4rem; }
    .ktp-head__bubble { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   KID LEVELS MAP  –  klm-*  (adventure path style)
═══════════════════════════════════════════════════════════════ */
@keyframes klm-cloud-drift { 0%,100%{transform:translateX(0)}50%{transform:translateX(24px)} }
@keyframes klm-star-blink  { 0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)} }
@keyframes klm-owl-bob     { 0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-5deg)} }
@keyframes klm-ring-pulse  { 0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.8);opacity:0} }
@keyframes klm-card-pop    { from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes klm-footstep    { 0%,100%{opacity:.4}50%{opacity:1} }
@keyframes klm-hero-char   { 0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)} }
@keyframes klm-stars-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes klm-finish-pop  { from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)} }

.klm {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0;
}

/* BG */
.klm-bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.klm-bg__cloud {
    position:absolute;
    font-size:3rem; opacity:.15;
    animation:klm-cloud-drift 10s ease-in-out infinite;
}
.klm-bg__cloud--a { top:5%;  left:3%;  animation-delay:0s; }
.klm-bg__cloud--b { top:20%; right:4%; animation-delay:-5s; font-size:2.4rem; }
.klm-bg__cloud--c { bottom:30%;left:8%;animation-delay:-8s; font-size:2rem; }
.klm-bg__star {
    position:absolute; left:var(--kx,50%); top:var(--ky,50%);
    font-size:1.4rem; animation:klm-star-blink 3s var(--kd,0s) ease-in-out infinite;
    pointer-events:none;
}

/* HERO */
.klm-hero {
    position:relative; z-index:1;
    border-radius:32px;
    padding:36px 44px;
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    background:linear-gradient(135deg,#fef3c7 0%,#e0f2fe 60%,#f0fdf4 100%);
    border:2px solid rgba(0,0,0,.05);
    box-shadow:0 4px 28px rgba(0,0,0,.07);
    margin-bottom:32px;
    overflow:hidden;
}
.klm-hero::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse at 80% 50%,rgba(245,158,11,.12),transparent 50%),
                radial-gradient(ellipse at 20% 50%,rgba(79,70,229,.08),transparent 50%);
    pointer-events:none;
}
.klm-hero__owl { font-size:3.5rem; flex-shrink:0; animation:klm-owl-bob 3s ease-in-out infinite; filter:drop-shadow(0 4px 12px rgba(79,70,229,.3)); position:relative; z-index:1; }
.klm-hero__copy { flex:1; min-width:200px; position:relative; z-index:1; }
.klm-hero__eyebrow {
    display:inline-block; padding:4px 14px; border-radius:999px;
    background:rgba(79,70,229,.1); border:1px solid rgba(79,70,229,.2);
    color:#4f46e5; font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    margin-bottom:8px;
}
.klm-hero__h1 { font-family:'Rajdhani',sans-serif; font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:900; color:#111827; margin:0 0 6px; line-height:1.15; }
.klm-hero__p  { font-size:.88rem; color:#6b7280; margin:0 0 16px; line-height:1.55; }
.klm-hero__actions { display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1; }

/* PATH */
.klm-path {
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center;
    padding:0 16px 48px;
    gap:0;
}

/* CONNECTOR */
.klm-connector {
    display:flex; align-items:center; justify-content:center;
    height:60px; position:relative; width:100%;
}
.klm-connector__dots {
    position:absolute;
    left:50%; transform:translateX(-50%);
    width:4px; height:60px;
    background:repeating-linear-gradient(180deg,#c4b5fd 0,#c4b5fd 8px,transparent 8px,transparent 16px);
    border-radius:4px;
}
.klm-connector--rtl .klm-connector__dots { background:repeating-linear-gradient(180deg,#7dd3fc 0,#7dd3fc 8px,transparent 8px,transparent 16px); }
.klm-connector__arrow {
    font-size:1.4rem;
    animation:klm-footstep 1.5s ease-in-out infinite;
    z-index:2; position:relative;
}

/* STOP ROW */
.klm-stop {
    position:relative;
    width:100%;
    max-width:760px;
    display:flex;
    align-items:center;
    gap:16px;
}
.klm-stop--ltr { flex-direction:row; }
.klm-stop--rtl { flex-direction:row-reverse; }

/* STEP BUBBLE */
.klm-step {
    flex-shrink:0;
    width:48px; height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--lv-color,#4f46e5),color-mix(in srgb,var(--lv-color,#4f46e5) 70%,#000));
    display:flex; align-items:center; justify-content:center;
    font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:900; color:#fff;
    box-shadow:0 4px 16px color-mix(in srgb,var(--lv-color,#4f46e5) 50%,transparent);
    flex-shrink:0;
}
.klm-stop.is-current .klm-step::after {
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:3px solid var(--lv-color,#4f46e5);
    animation:klm-ring-pulse 1.8s ease-out infinite;
}
.klm-step { position:relative; }

/* CARD */
.klm-card {
    flex:1;
    position:relative;
    border-radius:24px;
    padding:20px 22px 18px;
    background:#fff;
    border:2px solid rgba(0,0,0,.07);
    border-top:4px solid var(--lv-color,#4f46e5);
    box-shadow:0 4px 20px rgba(0,0,0,.06);
    cursor:pointer;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
    overflow:hidden;
    animation:klm-card-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.klm-stop:nth-child(2)  .klm-card{animation-delay:.05s}
.klm-stop:nth-child(3)  .klm-card{animation-delay:.10s}
.klm-stop:nth-child(4)  .klm-card{animation-delay:.15s}
.klm-stop:nth-child(5)  .klm-card{animation-delay:.20s}
.klm-stop:nth-child(6)  .klm-card{animation-delay:.25s}
.klm-stop:nth-child(7)  .klm-card{animation-delay:.30s}
.klm-stop:nth-child(8)  .klm-card{animation-delay:.35s}
.klm-stop:nth-child(9)  .klm-card{animation-delay:.40s}
.klm-stop:nth-child(10) .klm-card{animation-delay:.45s}

.klm-card:hover:not(.is-locked) { transform:translateY(-6px) scale(1.02); box-shadow:0 16px 44px rgba(0,0,0,.12); }
.klm-card.is-locked { opacity:.55; cursor:not-allowed; border-top-color:#d1d5db; filter:grayscale(.4); }
.klm-card.is-current { box-shadow:0 6px 32px color-mix(in srgb,var(--lv-color,#4f46e5) 40%,transparent); }

/* Stars above card (completed) */
.klm-card__stars {
    position:absolute; top:-16px; right:16px;
    display:flex; gap:2px;
    animation:klm-stars-float 2s ease-in-out infinite;
}
.klm-card__stars span { font-size:1.1rem; }

/* Owl hero char (current level) */
.klm-card__hero-char {
    position:absolute; top:-20px; left:16px;
    font-size:1.8rem;
    animation:klm-hero-char 2s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(79,70,229,.4));
}

/* Lock overlay */
.klm-card__lock {
    position:absolute; top:12px; right:12px;
    font-size:1.4rem; opacity:.6;
}

/* Icon */
.klm-card__icon-wrap {
    position:relative;
    width:56px; height:56px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    margin-bottom:8px;
}
.klm-card__icon-ring {
    position:absolute; inset:0; border-radius:50%;
    background:var(--lv-bg,rgba(79,70,229,.12));
}
.klm-card__icon { font-size:2rem; position:relative; z-index:1; }
.klm-card__check { position:absolute; bottom:-2px;right:-2px; font-size:.9rem; }

/* Info */
.klm-card__info { display:flex; flex-direction:column; gap:3px; }
.klm-card__world { font-size:.72rem; font-weight:700; color:var(--lv-color,#4f46e5); text-transform:uppercase; letter-spacing:.07em; }
.klm-card__code {
    display:inline-block; padding:2px 8px; border-radius:6px;
    background:var(--lv-bg,rgba(79,70,229,.1)); color:var(--lv-color,#4f46e5);
    font-family:'Rajdhani',sans-serif; font-size:.82rem; font-weight:800;
    width:fit-content;
}
.klm-card__title { font-family:'Rajdhani',sans-serif; font-size:1.15rem; font-weight:900; color:#111827; margin:4px 0 3px; }
.klm-card__desc  { font-size:.78rem; color:#6b7280; line-height:1.5; margin:0 0 12px; }

/* CTA */
.klm-card__cta {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px; border-radius:12px;
    background:var(--lv-color,#4f46e5); color:#fff;
    font-size:.85rem; font-weight:800; text-decoration:none;
    box-shadow:0 4px 16px color-mix(in srgb,var(--lv-color,#4f46e5) 50%,transparent);
    transition:transform .18s, opacity .18s;
}
.klm-card__cta:hover { transform:translateY(-2px); opacity:.9; }
.klm-card__locked { font-size:.8rem; color:#9ca3af; font-weight:700; font-style:italic; }

/* FINISH */
.klm-finish {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    margin-top:32px;
    animation:klm-finish-pop .8s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:1s;
    opacity:0; animation-fill-mode:both;
}
.klm-finish__flag { font-size:3.5rem; filter:drop-shadow(0 4px 16px rgba(132,204,22,.5)); }
.klm-finish__label { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:900; color:#374151; text-align:center; line-height:1.3; }

/* ── Responsive ── */
@media(max-width:600px){
    .klm-hero { padding:24px 20px; flex-direction:column; }
    .klm-hero__owl { font-size:2.6rem; }
    .klm-stop { flex-direction:row !important; gap:12px; }
    .klm-card { padding:16px 16px 14px; }
    .klm-card__stars { top:-12px; }
    .klm-card__hero-char { font-size:1.4rem; top:-16px; }
}
@media(max-width:400px){
    .klm-hero { border-radius:20px; padding:20px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT DASHBOARD  –  sdash-*  namespace
═══════════════════════════════════════════════════════════════ */

@keyframes sdash-orb {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(28px,-20px) scale(1.1); }
    66%      { transform: translate(-16px,16px) scale(.93); }
}
@keyframes sdash-particle {
    0%   { transform: translateY(0) scale(1);    opacity: 0; }
    15%  { opacity: .7; }
    85%  { opacity: .4; }
    100% { transform: translateY(-60px) scale(.8); opacity: 0; }
}
@keyframes sdash-avatar-ring {
    0%,100% { transform: scale(1);    opacity: .5; }
    50%      { transform: scale(1.1);  opacity: .9; }
}
@keyframes sdash-level-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(79,70,229,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(79,70,229,0); }
}
@keyframes sdash-card-in {
    from { opacity:0; transform: translateY(24px) scale(.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes sdash-progress-grow {
    from { width: 0; }
    to   { width: var(--prog, 0%); }
}
@keyframes sdash-glow-pulse {
    0%,100% { opacity: .4; transform: scale(1); }
    50%      { opacity: .7; transform: scale(1.12); }
}

/* Wrapper */
.sdash {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─── HERO ─── */
.sdash-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    padding: 40px 44px;
    background:
        radial-gradient(ellipse at 90% 0%,    rgba(79,70,229,.4),  transparent 44%),
        radial-gradient(ellipse at 10% 100%,  rgba(13,181,232,.3), transparent 44%),
        radial-gradient(ellipse at 50% 50%,   rgba(168,85,247,.15),transparent 60%),
        linear-gradient(145deg, #060d1f 0%, #0e1a40 55%, #060d1f 100%);
    display: flex;
    align-items: center;
    gap: 32px;
}

/* orbs */
.sdash-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
}
.sdash-hero__orb--a {
    width: 350px; height: 350px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(79,70,229,.55) 0%, transparent 70%);
    animation: sdash-orb 18s ease-in-out infinite;
}
.sdash-hero__orb--b {
    width: 280px; height: 280px;
    bottom: -60px; right: 0;
    background: radial-gradient(circle, rgba(13,181,232,.5) 0%, transparent 70%);
    animation: sdash-orb 22s ease-in-out infinite reverse;
    animation-delay: -7s;
}
.sdash-hero__orb--c {
    width: 200px; height: 200px;
    top: 40%; left: 45%;
    background: radial-gradient(circle, rgba(168,85,247,.4) 0%, transparent 70%);
    animation: sdash-orb 26s ease-in-out infinite;
    animation-delay: -13s;
}

/* grid overlay */
.sdash-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* floating particles */
.sdash-hero__particle {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 50%);
    font-size: 1rem;
    opacity: 0;
    animation: sdash-particle 5s var(--pd, 0s) ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* inner layout */
.sdash-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    flex-wrap: wrap;
}

/* avatar */
.sdash-hero__avatar {
    position: relative;
    flex-shrink: 0;
    width: 100px; height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdash-hero__avatar-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    inset: 0;
    animation: sdash-avatar-ring 3s ease-in-out infinite;
}
.sdash-hero__avatar-ring--1 {
    border-color: rgba(79,70,229,.5);
    animation-delay: 0s;
}
.sdash-hero__avatar-ring--2 {
    inset: 10px;
    border-color: rgba(13,181,232,.5);
    animation-delay: -1.5s;
}
.sdash-hero__avatar-emoji {
    font-size: 3.2rem;
    position: relative;
    z-index: 2;
}

/* copy */
.sdash-hero__copy {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sdash-hero__greeting {
    font-size: .9rem;
    color: rgba(200,220,255,.65);
    margin: 0;
    font-weight: 600;
}
.sdash-hero__name {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}

/* level chip */
.sdash-hero__level {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.2);
    text-decoration: none;
    width: fit-content;
    transition: background .18s, border-color .18s;
    animation: sdash-level-pulse 2.5s ease-in-out infinite;
}
.sdash-hero__level:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.35);
}
.sdash-hero__level-code {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    background: rgba(79,70,229,.7);
    padding: 2px 8px;
    border-radius: 6px;
}
.sdash-hero__level-title {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(220,235,255,.85);
}
.sdash-hero__level-badge { font-size: .82rem; color: #86efac; font-weight: 700; }
.sdash-hero__level-arrow { color: rgba(200,220,255,.6); font-size: 1rem; }

/* progress bar */
.sdash-hero__progress {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sdash-hero__progress-bar {
    flex: 1;
    max-width: 220px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
}
.sdash-hero__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f46e5, #0db5e8, #a855f7);
    width: var(--prog, 0%);
    animation: sdash-progress-grow 1.2s cubic-bezier(.4,0,.2,1) both;
    animation-delay: .3s;
}
.sdash-hero__progress-label {
    font-size: .75rem;
    color: rgba(200,220,255,.6);
    font-weight: 600;
    white-space: nowrap;
}

/* stats */
.sdash-hero__stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.sdash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    min-width: 72px;
}
.sdash-stat__icon { font-size: 1.2rem; }
.sdash-stat__num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.sdash-stat__lbl {
    font-size: .68rem;
    color: rgba(200,220,255,.55);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* audio button */
.sdash-hero__audio {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 3;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, transform .18s;
}
.sdash-hero__audio:hover { background: rgba(255,255,255,.2); transform: scale(1.1); }

/* ─── NAV CARDS ─── */
.sdash-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sdash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.07);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    animation: sdash-card-in .5s ease both;
}
.sdash-card:nth-child(1) { animation-delay: .05s; }
.sdash-card:nth-child(2) { animation-delay: .10s; }
.sdash-card:nth-child(3) { animation-delay: .15s; }
.sdash-card:nth-child(4) { animation-delay: .20s; }

.sdash-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 52px rgba(0,0,0,.14);
}
.sdash-card:hover .sdash-card__icon { transform: scale(1.2) rotate(-8deg); }
.sdash-card:hover .sdash-card__glow { opacity: 1; }

/* Glow blob behind card (color per variant) */
.sdash-card__glow {
    position: absolute;
    inset: -20%; z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.sdash-card--learn    .sdash-card__glow { background: rgba(79,70,229,.25); }
.sdash-card--practice .sdash-card__glow { background: rgba(139,92,246,.25); }
.sdash-card--library  .sdash-card__glow { background: rgba(245,158,11,.2); }
.sdash-card--awards   .sdash-card__glow { background: rgba(16,185,129,.2); }

/* Top color bar */
.sdash-card::before {
    content: '';
    display: block;
    height: 5px;
    border-radius: 24px 24px 0 0;
    flex-shrink: 0;
}
.sdash-card--learn    ::before,
.sdash-card--learn::before    { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.sdash-card--practice::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.sdash-card--library::before  { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.sdash-card--awards::before   { background: linear-gradient(90deg, #10b981, #06b6d4); }

.sdash-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 0;
}
.sdash-card__icon-wrap {
    position: relative;
    width: 60px; height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdash-card__icon-bg {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: .12;
}
.sdash-card--learn    .sdash-card__icon-bg { background: #4f46e5; }
.sdash-card--practice .sdash-card__icon-bg { background: #8b5cf6; }
.sdash-card--library  .sdash-card__icon-bg { background: #f59e0b; }
.sdash-card--awards   .sdash-card__icon-bg { background: #10b981; }

.sdash-card__icon {
    font-size: 2.4rem;
    position: relative;
    z-index: 1;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sdash-card__chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sdash-card--learn    .sdash-card__chip { background: rgba(79,70,229,.1);  color: #4f46e5; }
.sdash-card--practice .sdash-card__chip { background: rgba(139,92,246,.1); color: #7c3aed; }
.sdash-card--library  .sdash-card__chip { background: rgba(245,158,11,.1); color: #b45309; }
.sdash-card--awards   .sdash-card__chip { background: rgba(16,185,129,.1); color: #047857; }

.sdash-card__body {
    position: relative;
    z-index: 1;
    padding: 12px 20px 4px;
    flex: 1;
}
.sdash-card__title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
}
.sdash-card__desc {
    font-size: .82rem;
    color: #6b7280;
    line-height: 1.55;
    margin: 0;
}
.sdash-card__footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 18px;
    gap: 10px;
}
.sdash-card__tags {
    font-size: .72rem;
    color: #9ca3af;
    font-weight: 600;
}
.sdash-card__arrow {
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform .2s ease;
}
.sdash-card--learn    .sdash-card__arrow { color: #4f46e5; }
.sdash-card--practice .sdash-card__arrow { color: #8b5cf6; }
.sdash-card--library  .sdash-card__arrow { color: #d97706; }
.sdash-card--awards   .sdash-card__arrow { color: #059669; }
.sdash-card:hover .sdash-card__arrow { transform: translateX(4px); }

/* Progress mini bar (learn card only) */
.sdash-card__progress-mini {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(79,70,229,.1);
    overflow: hidden;
    max-width: 120px;
}
.sdash-card__progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
    transition: width 1s ease;
}

/* Adult entry */
.sdash-adult { display: flex; justify-content: center; padding-bottom: 4px; }

/* ─── Responsive dashboard ─── */
@media (max-width: 700px) {
    .sdash-hero { flex-direction: column; padding: 28px 24px; gap: 20px; }
    .sdash-hero__inner { gap: 16px; }
    .sdash-hero__avatar { width: 80px; height: 80px; }
    .sdash-hero__avatar-emoji { font-size: 2.4rem; }
    .sdash-hero__name { font-size: 1.8rem; }
    .sdash-hero__stats { gap: 10px; }
    .sdash-stat { padding: 8px 12px; min-width: 60px; }
}
@media (max-width: 540px) {
    .sdash-nav { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 380px) {
    .sdash-nav { gap: 10px; }
    .sdash-card__icon { font-size: 2rem; }
}

/* ─── Dark mode dashboard ─── */
html[data-theme="dark"] .sdash-card {
    background: rgba(10,22,40,.96);
    border-color: rgba(79,70,229,.14);
}
html[data-theme="dark"] .sdash-card__title { color: #e0f0ff; }
html[data-theme="dark"] .sdash-card__desc  { color: #6a90aa; }
html[data-theme="dark"] .sdash-card--learn    .sdash-card__chip { background: rgba(79,70,229,.2);  color: #a5b4fc; }
html[data-theme="dark"] .sdash-card--practice .sdash-card__chip { background: rgba(139,92,246,.2); color: #c4b5fd; }
html[data-theme="dark"] .sdash-card--library  .sdash-card__chip { background: rgba(245,158,11,.2); color: #fde68a; }
html[data-theme="dark"] .sdash-card--awards   .sdash-card__chip { background: rgba(16,185,129,.2); color: #6ee7b7; }

/* ═══════════════════════════════════════════════════════════════
   LEVELS MAP  –  lvm-*  namespace  (interactive route map)
═══════════════════════════════════════════════════════════════ */

@keyframes lvm-orb-float {
    0%,100% { transform: scale(1) translate(0,0); }
    50%      { transform: scale(1.12) translate(20px,-14px); }
}
@keyframes lvm-pulse-ring {
    0%   { transform: scale(.85); opacity: .9; }
    100% { transform: scale(1.6);  opacity: 0; }
}
@keyframes lvm-spine-grow {
    from { height: 0; }
    to   { height: 100%; }
}
@keyframes lvm-card-slide-left {
    from { opacity:0; transform: translateX(-32px); }
    to   { opacity:1; transform: translateX(0); }
}
@keyframes lvm-card-slide-right {
    from { opacity:0; transform: translateX(32px); }
    to   { opacity:1; transform: translateX(0); }
}
@keyframes lvm-end-pop {
    from { opacity:0; transform: scale(.5) translateY(20px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Wrapper */
.lvm {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ─── HERO ─── */
.lvm-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 44px 52px;
    background:
        radial-gradient(ellipse at 90% 0%,   rgba(79,70,229,.4), transparent 44%),
        radial-gradient(ellipse at 10% 100%, rgba(13,181,232,.3),transparent 44%),
        linear-gradient(145deg, #060d1f 0%, #0e1a40 55%, #060d1f 100%);
}
.lvm-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
}
.lvm-hero__orb--a {
    width: 300px; height: 300px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(79,70,229,.6) 0%, transparent 70%);
    animation: lvm-orb-float 16s ease-in-out infinite;
}
.lvm-hero__orb--b {
    width: 240px; height: 240px;
    bottom: -50px; right: 5%;
    background: radial-gradient(circle, rgba(13,181,232,.5) 0%, transparent 70%);
    animation: lvm-orb-float 20s ease-in-out infinite reverse;
    animation-delay: -8s;
}
.lvm-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.lvm-hero__mascot {
    font-size: 3.5rem;
    filter: drop-shadow(0 4px 16px rgba(79,70,229,.6));
    flex-shrink: 0;
}
.lvm-hero__copy { flex: 1; min-width: 200px; }
.lvm-hero__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.lvm-hero__h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.15;
}
.lvm-hero__p {
    font-size: .88rem;
    color: rgba(200,220,255,.65);
    margin: 0;
    line-height: 1.55;
}
.lvm-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── PATH LAYOUT ─── */
.lvm-path {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0 48px;
}

/* Central spine */
.lvm-spine {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    z-index: 0;
    overflow: hidden;
}
.lvm-spine__line {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(79,70,229,.8) 0%,
        rgba(13,181,232,.6) 50%,
        rgba(16,185,129,.4) 100%);
    animation: lvm-spine-grow 1.5s ease both;
}

/* ─── STOP (one level + its node) ─── */
.lvm-stop {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    align-items: center;
    min-height: 120px;
    padding: 20px 0;
    z-index: 1;
}

/* Left-side stops: card left, node center */
.lvm-stop--left .lvm-card  { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 32px; }
.lvm-stop--left .lvm-node  { grid-column: 2; grid-row: 1; }
.lvm-stop--left            { grid-template-columns: 1fr 48px 1fr; }

/* Right-side stops: empty left, node center, card right */
.lvm-stop--right .lvm-node { grid-column: 2; grid-row: 1; }
.lvm-stop--right .lvm-card { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 32px; }

/* ─── NODE (spine dot) ─── */
.lvm-node {
    position: relative;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.lvm-node__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--lv-color, #4f46e5);
    opacity: .4;
}
.lvm-stop.is-current .lvm-node__ring {
    animation: lvm-pulse-ring 1.8s ease-out infinite;
}
.lvm-node__dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lv-color, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    position: relative;
    z-index: 1;
}
.lvm-stop.is-locked .lvm-node__dot {
    background: #d1d5db;
    box-shadow: none;
}
.lvm-stop.is-done .lvm-node__dot {
    background: #10b981;
}

/* ─── CARD ─── */
.lvm-card {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.07);
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    max-width: 340px;
    width: 100%;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    border-top: 3px solid var(--lv-color, #4f46e5);
    cursor: pointer;
}
.lvm-stop--left  .lvm-card { animation: lvm-card-slide-left  .5s ease both; }
.lvm-stop--right .lvm-card { animation: lvm-card-slide-right .5s ease both; }
.lvm-stop:nth-child(2)  .lvm-card { animation-delay: .05s; }
.lvm-stop:nth-child(3)  .lvm-card { animation-delay: .10s; }
.lvm-stop:nth-child(4)  .lvm-card { animation-delay: .15s; }
.lvm-stop:nth-child(5)  .lvm-card { animation-delay: .20s; }
.lvm-stop:nth-child(6)  .lvm-card { animation-delay: .25s; }
.lvm-stop:nth-child(7)  .lvm-card { animation-delay: .30s; }
.lvm-stop:nth-child(8)  .lvm-card { animation-delay: .35s; }
.lvm-stop:nth-child(9)  .lvm-card { animation-delay: .40s; }
.lvm-stop:nth-child(10) .lvm-card { animation-delay: .45s; }

.lvm-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 44px rgba(0,0,0,.12);
}
.lvm-card.is-locked {
    opacity: .55;
    cursor: not-allowed;
    border-top-color: #d1d5db;
    filter: grayscale(.4);
}
.lvm-card.is-locked:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.lvm-card.is-current {
    border-top-color: var(--lv-color, #4f46e5);
    box-shadow: 0 6px 32px rgba(79,70,229,.2);
}

.lvm-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.lvm-card__icon { font-size: 2rem; }
.lvm-card__meta { display: flex; flex-direction: column; gap: 3px; }
.lvm-card__code {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem;
    font-weight: 800;
    color: var(--lv-color, #4f46e5);
    background: var(--lv-bg, rgba(79,70,229,.1));
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}
.lvm-card__state {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}
.lvm-card__state--current { background: rgba(79,70,229,.1);  color: #4f46e5; }
.lvm-card__state--done    { background: rgba(16,185,129,.1); color: #047857; }
.lvm-card__state--locked  { background: rgba(107,114,128,.1);color: #6b7280; }

.lvm-card__title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
}
.lvm-card__desc {
    font-size: .8rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0 0 14px;
}
.lvm-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.lvm-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--lv-color, #4f46e5);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .18s, transform .18s;
}
.lvm-card__cta:hover { opacity: .88; transform: translateY(-1px); }
.lvm-card__link {
    font-size: .78rem;
    color: var(--lv-color, #4f46e5);
    font-weight: 600;
    text-decoration: none;
    opacity: .75;
    transition: opacity .15s;
}
.lvm-card__link:hover { opacity: 1; text-decoration: underline; }
.lvm-card__locked-msg {
    font-size: .75rem;
    color: #9ca3af;
    font-weight: 600;
    font-style: italic;
}

/* ─── END MARKER ─── */
.lvm-end {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    animation: lvm-end-pop .6s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: .8s;
    opacity: 0;
    animation-fill-mode: both;
}
.lvm-end__icon {
    font-size: 2.8rem;
    filter: drop-shadow(0 4px 12px rgba(132,204,22,.6));
}
.lvm-end__label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #374151;
    letter-spacing: .04em;
}

/* ─── Responsive levels map ─── */
@media (max-width: 768px) {
    .lvm-hero { padding: 32px 28px; }
    .lvm-hero__inner { gap: 16px; }
    .lvm-hero__mascot { font-size: 2.6rem; }
    /* Stack to single column on mobile */
    .lvm-path { padding-left: 24px; }
    .lvm-spine { left: 24px; transform: none; }
    .lvm-stop {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 0;
    }
    .lvm-stop--left  .lvm-card,
    .lvm-stop--right .lvm-card {
        grid-column: unset;
        justify-self: unset;
        margin: 0;
        max-width: 100%;
        width: 100%;
        animation: lvm-card-slide-right .4s ease both !important;
    }
    .lvm-node { flex-shrink: 0; }
    .lvm-stop--left  .lvm-node,
    .lvm-stop--right .lvm-node { order: -1; }
}
@media (max-width: 480px) {
    .lvm-hero { padding: 24px 20px; border-radius: 20px; }
    .lvm-card { padding: 16px 16px; }
    .lvm-card__title { font-size: 1rem; }
}

/* ─── Dark mode levels map ─── */
html[data-theme="dark"] .lvm-hero { background: linear-gradient(145deg, #060d1f, #0e1a40, #060d1f); }
html[data-theme="dark"] .lvm-card {
    background: #0a1628;
    border-color: rgba(79,70,229,.16);
}
html[data-theme="dark"] .lvm-card__title { color: #e0f0ff; }
html[data-theme="dark"] .lvm-card__desc  { color: #6a90aa; }
html[data-theme="dark"] .lvm-end__label  { color: #9bb5cc; }

/* ──────────────────────────────────────────────────────────
   DARK MODE
   ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .student-mode-kid .kid-mode-shell {
    background:
        radial-gradient(ellipse at 8%  12%, rgba(13,181,232,.14), transparent 32%),
        radial-gradient(ellipse at 88% 8%,  rgba(95,125,255,.18), transparent 30%),
        linear-gradient(170deg, #0c1b2b 0%, #101520 50%, #12091f 100%) !important;
}
html[data-theme="dark"] .kid-mode-shell__topbar {
    background: rgba(14,24,40,.82) !important;
}
html[data-theme="dark"] .kid-bottom-nav {
    background: rgba(14,24,40,.86) !important;
}
html[data-theme="dark"] .kid-hero-card,
html[data-theme="dark"] .big-mission-card,
html[data-theme="dark"] .kid-simple-card,
html[data-theme="dark"] .avatar-greeting-card {
    background: rgba(18,30,50,.92) !important;
    border-color: rgba(13,181,232,.2) !important;
    color: #c8e6f5;
}
html[data-theme="dark"] .kid-map-card {
    background: rgba(18,30,50,.92) !important;
    border-color: rgba(13,181,232,.16) !important;
}
html[data-theme="dark"] .kid-map-card.is-current {
    background: rgba(13,181,232,.12) !important;
}
html[data-theme="dark"] .tool-header {
    background: rgba(14,26,44,.96) !important;
    border-color: rgba(95,125,255,.2) !important;
}
html[data-theme="dark"] .tool-header h2 {
    background: linear-gradient(135deg, #7ecff4, #a58fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html[data-theme="dark"] .tool-panel,
html[data-theme="dark"] .tool-toolbar,
html[data-theme="dark"] .syl-controls {
    background: rgba(16,28,46,.94) !important;
    border-color: rgba(13,181,232,.14) !important;
}
html[data-theme="dark"] .alphabet-letter-card,
html[data-theme="dark"] .syllable-card {
    background: rgba(20,34,56,.96) !important;
    border-color: rgba(13,181,232,.16) !important;
    color: #c8e6f5;
}
html[data-theme="dark"] .syl-ctrl-btn,
html[data-theme="dark"] .builder-token {
    background: rgba(20,34,56,.96) !important;
    border-color: rgba(13,181,232,.18) !important;
    color: #c8e6f5;
}
html[data-theme="dark"] .syl-ctrl-btn small,
html[data-theme="dark"] .kbd-hint { color: #7da8c4; }
html[data-theme="dark"] .builder-workbench,
html[data-theme="dark"] .word-builder-board {
    background: rgba(14,26,44,.96) !important;
}
html[data-theme="dark"] .tool-detail {
    background: rgba(14,26,44,.92) !important;
}
html[data-theme="dark"] .kid-action-button--secondary {
    background: rgba(20,34,56,.92) !important;
    border-color: rgba(95,125,255,.24) !important;
    color: #c8e6f5 !important;
}
html[data-theme="dark"] .alpha-mastery-bar {
    background: rgba(13,181,232,.12) !important;
    border-color: rgba(13,181,232,.2) !important;
    color: #7ecff4;
}
html[data-theme="dark"] .builder-slot {
    background: rgba(14,26,44,.95) !important;
    color: #6a9ab8;
}
html[data-theme="dark"] .builder-result,
html[data-theme="dark"] .builder-result--word {
    background: rgba(20,34,56,.96) !important;
    color: #e0c06a !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE TWEAKS
   ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .kid-map-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px) {
    .kid-map-grid { grid-template-columns: 1fr !important; }
    .tool-header  { padding: 20px 22px; }
    .syl-ctrl-btn { min-width: 52px; }
    .student-mode-kid .kid-mode-shell { padding: 16px 16px 108px; }
}

/* ──────────────────────────────────────────────────────────
   LEVEL MAP — state pills
   ────────────────────────────────────────────────────────── */
.kid-map-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.kid-map-card__state-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .03em;
}
.kid-map-card__state-pill--current {
    background: linear-gradient(135deg, rgba(13,181,232,.22), rgba(95,125,255,.18));
    color: #0d5473;
}
.kid-map-card__state-pill--done {
    background: rgba(47,165,110,.16);
    color: #1d6b1c;
}
.kid-map-card__state-pill--locked {
    background: rgba(13,84,115,.1);
    color: #4a6880;
}

/* Completed level tint */
.kid-map-card.is-completed {
    background: linear-gradient(158deg, rgba(47,165,110,.07), #fff) !important;
    border-color: rgba(47,165,110,.18) !important;
}
.kid-map-card.is-completed::before {
    background: linear-gradient(90deg, #2fa56e, #0db5e8, #2fa56e);
    background-size: 200% auto;
}

/* ──────────────────────────────────────────────────────────
   DASHBOARD — level link inside simple card
   ────────────────────────────────────────────────────────── */
.kid-level-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.kid-level-link__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0db5e8, #5f7dff);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
}
.kid-level-link__title {
    color: #0d5473;
    font-weight: 700;
    font-size: .95rem;
}
.kid-level-link:hover .kid-level-link__title {
    text-decoration: underline;
    text-decoration-color: rgba(13,181,232,.5);
}

/* builder-slot label span */
.builder-slot__label {
    font-size: .8rem;
    font-weight: 700;
    color: #7a9ab2;
    pointer-events: none;
}
.builder-slot.has-value .builder-slot__label { display: none; }

/* ════════════════════════════════════════════════════════════
   DASHBOARD REDESIGN
   .dash-screen  .dash-hero  .dash-nav  .dash-card
   ════════════════════════════════════════════════════════════ */

/* Container */
.dash-screen {
    width: min(100%, 1020px);
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

/* ── HERO ─────────────────────────────────────────────────── */
.dash-hero {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: 40px 52px;
    background:
        radial-gradient(ellipse at 90% 0%,    rgba(95,125,255,.34), transparent 44%),
        radial-gradient(ellipse at 10% 100%,   rgba(13,181,232,.28), transparent 44%),
        radial-gradient(ellipse at 50% 50%,    rgba(255,211,95,.12), transparent 60%),
        linear-gradient(145deg, #0d4c6e 0%, #1a2e80 55%, #0d4c6e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 36px;
    min-height: 220px;
    box-shadow:
        0 32px 72px rgba(13,45,115,.3),
        0  4px 12px rgba(13,45,115,.2),
        inset 0 1px 0 rgba(255,255,255,.12);
    animation: slideUpFade .5s ease both;
}

/* Floating blobs */
.dash-hero__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: .22;
    filter: blur(38px);
}
.dash-hero__blob--a {
    width: 260px; height: 260px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, #7dd3fc, #818cf8);
    animation: floatBlob1 18s ease-in-out infinite;
}
.dash-hero__blob--b {
    width: 200px; height: 200px;
    bottom: -60px; right: 120px;
    background: radial-gradient(circle, #fde68a, #fb923c);
    animation: floatBlob2 22s ease-in-out infinite;
}
.dash-hero__blob--c {
    width: 140px; height: 140px;
    top: 30px; right: 220px;
    background: radial-gradient(circle, #c4b5fd, #a78bfa);
    animation: floatBlob1 14s ease-in-out 2s infinite;
}

/* Avatar */
.dash-hero__avatar {
    flex-shrink: 0;
    width: 108px; height: 108px;
    border-radius: 32px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
    animation: floatUp 3.6s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

/* Copy */
.dash-hero__copy {
    flex: 1;
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.dash-hero__greeting {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.72);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dash-hero__name {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(13,45,115,.4);
}
.dash-hero__sub {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255,255,255,.78);
    font-weight: 600;
}

/* Level chip */
.dash-hero__level-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.24);
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: .92rem;
    transition: background .18s, transform .18s, box-shadow .18s;
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.dash-hero__level-chip:hover {
    background: rgba(255,255,255,.26);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.dash-hero__level-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; height: 28px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.22);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.dash-hero__level-title { font-size: .9rem; }
.dash-hero__level-done  { font-size: .82rem; color: #86efac; font-weight: 800; }
.dash-hero__level-arrow { opacity: .7; font-size: 1rem; }

/* Mini stat */
.dash-hero__stat {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    font-weight: 600;
}
.dash-hero__stat-icon { font-size: 1rem; }

/* Audio button */
.dash-hero__audio {
    position: absolute;
    top: 20px; right: 22px;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    z-index: 2;
}
.dash-hero__audio:hover {
    background: rgba(255,255,255,.26);
    transform: scale(1.08);
}

/* ── NAV GRID ─────────────────────────────────────────────── */
.dash-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

/* ── BASE CARD ────────────────────────────────────────────── */
.dash-card {
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow:
        0 22px 54px rgba(13,45,115,.12),
        0  2px  8px rgba(13,45,115,.08);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    animation: cardReveal .45s ease both;
    background: #fff;
    border: 1px solid rgba(13,84,115,.07);
}
.dash-card:nth-child(1) { animation-delay: .06s; }
.dash-card:nth-child(2) { animation-delay: .12s; }
.dash-card:nth-child(3) { animation-delay: .18s; }
.dash-card:nth-child(4) { animation-delay: .24s; }
.dash-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
        0 36px 72px rgba(13,45,115,.18),
        0  4px 16px rgba(13,45,115,.1);
}
.dash-card:active { transform: scale(.98); }

/* Coloured top area */
.dash-card__hero-zone {
    position: relative;
    overflow: hidden;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease;
}

/* Decorative circles */
.dash-card__deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.dash-card__deco--circle1 {
    width: 180px; height: 180px;
    bottom: -60px; left: -40px;
    background: rgba(255,255,255,.14);
}
.dash-card__deco--circle2 {
    width: 110px; height: 110px;
    top: -30px; right: -20px;
    background: rgba(255,255,255,.10);
}

/* Big emoji */
.dash-card__icon {
    font-size: 3.8rem;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    display: block;
}
.dash-card:hover .dash-card__icon {
    transform: scale(1.18) rotate(-4deg);
}

/* Text body */
.dash-card__body {
    padding: 22px 24px 20px;
    display: grid;
    gap: 6px;
    flex: 1;
    background: #fff;
}
.dash-card__title {
    font-size: clamp(1.15rem, 2vw, 1.38rem);
    font-weight: 900;
    color: #0f2038;
    letter-spacing: -.025em;
    margin: 0;
}
.dash-card__desc {
    font-size: .9rem;
    color: #5a7a96;
    line-height: 1.55;
    margin: 0;
}
.dash-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.dash-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(13,84,115,.07);
    color: #0d4c6e;
}
.dash-card__arrow {
    font-size: 1.1rem;
    opacity: .4;
    transition: transform .18s, opacity .18s;
}
.dash-card:hover .dash-card__arrow {
    transform: translateX(4px);
    opacity: .7;
}

/* ── CARD COLOUR THEMES ────────────────────────────────────── */
.dash-card--learn .dash-card__hero-zone {
    background: linear-gradient(140deg, #0ea5e9 0%, #4f46e5 100%);
}
.dash-card--learn:hover .dash-card__hero-zone {
    background: linear-gradient(140deg, #38bdf8 0%, #6366f1 100%);
}
.dash-card--learn .dash-card__chip { background: rgba(79,70,229,.1); color: #3730a3; }

.dash-card--practice .dash-card__hero-zone {
    background: linear-gradient(140deg, #8b5cf6 0%, #ec4899 100%);
}
.dash-card--practice:hover .dash-card__hero-zone {
    background: linear-gradient(140deg, #a78bfa 0%, #f472b6 100%);
}
.dash-card--practice .dash-card__chip { background: rgba(139,92,246,.12); color: #5b21b6; }

.dash-card--library .dash-card__hero-zone {
    background: linear-gradient(140deg, #f59e0b 0%, #ef4444 100%);
}
.dash-card--library:hover .dash-card__hero-zone {
    background: linear-gradient(140deg, #fbbf24 0%, #f87171 100%);
}
.dash-card--library .dash-card__chip { background: rgba(245,158,11,.12); color: #92400e; }

.dash-card--awards .dash-card__hero-zone {
    background: linear-gradient(140deg, #10b981 0%, #0ea5e9 100%);
}
.dash-card--awards:hover .dash-card__hero-zone {
    background: linear-gradient(140deg, #34d399 0%, #38bdf8 100%);
}
.dash-card--awards .dash-card__chip { background: rgba(16,185,129,.12); color: #065f46; }

/* ── ADULT ENTRY ──────────────────────────────────────────── */
.dash-adult-entry {
    display: flex;
    justify-content: center;
    padding-bottom: 4px;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .dash-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
        gap: 18px;
        min-height: auto;
    }
    .dash-hero__avatar { width: 80px; height: 80px; font-size: 2.6rem; }
    .dash-hero__name   { font-size: 2rem; }
}
@media (max-width: 540px) {
    .dash-nav { grid-template-columns: 1fr; gap: 14px; }
    .dash-card__hero-zone { height: 120px; }
    .dash-card__icon { font-size: 3rem; }
}
@media (max-width: 380px) {
    .dash-nav { gap: 10px; }
    .dash-card__body { padding: 16px 16px 14px; }
    .dash-card__title { font-size: 1rem; }
    .dash-card__hero-zone { height: 96px; }
    .dash-card__icon { font-size: 2.4rem; }
}

/* ── DARK MODE ────────────────────────────────────────────── */
html[data-theme="dark"] .dash-hero {
    background:
        radial-gradient(ellipse at 90% 0%,    rgba(95,125,255,.3),  transparent 44%),
        radial-gradient(ellipse at 10% 100%,   rgba(13,181,232,.22), transparent 44%),
        linear-gradient(145deg, #081428 0%, #0e1a40 55%, #081428 100%);
}
html[data-theme="dark"] .dash-card {
    background: rgba(14,24,44,.96);
    border-color: rgba(13,181,232,.14);
}
html[data-theme="dark"] .dash-card__body { background: rgba(14,24,44,.96); }
html[data-theme="dark"] .dash-card__title { color: #e0f0ff; }
html[data-theme="dark"] .dash-card__desc  { color: #6a9ab8; }
html[data-theme="dark"] .dash-card--learn    .dash-card__chip { background: rgba(79,70,229,.18);  color: #a5b4fc; }
html[data-theme="dark"] .dash-card--practice .dash-card__chip { background: rgba(139,92,246,.18); color: #c4b5fd; }
html[data-theme="dark"] .dash-card--library  .dash-card__chip { background: rgba(245,158,11,.18); color: #fde68a; }
html[data-theme="dark"] .dash-card--awards   .dash-card__chip { background: rgba(16,185,129,.18); color: #6ee7b7; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN  –  lgn-*  namespace
   Ultra-spectacular two-column login layout
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes lgn-aurora-drift {
    0%,100% { transform: scale(1)   rotate(0deg);   opacity: .55; }
    33%      { transform: scale(1.15) rotate(8deg);  opacity: .7;  }
    66%      { transform: scale(.92) rotate(-6deg);  opacity: .5;  }
}
@keyframes lgn-particle-float {
    0%   { transform: translateY(0)   rotate(0deg);   opacity: 0;   }
    10%  { opacity: .6; }
    90%  { opacity: .4; }
    100% { transform: translateY(-80px) rotate(25deg); opacity: 0;  }
}
@keyframes lgn-ring-pulse {
    0%,100% { transform: scale(1);    opacity: .5; }
    50%      { transform: scale(1.08); opacity: 1;  }
}
@keyframes lgn-mascot-float {
    0%,100% { transform: translateY(0);   }
    50%      { transform: translateY(-10px); }
}
@keyframes lgn-blob-morph {
    0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
@keyframes lgn-shine-slide {
    from { left: -60%; }
    to   { left: 120%;  }
}
@keyframes lgn-form-in {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes lgn-dot-blink {
    0%,80%,100% { opacity: .25; transform: scale(.8); }
    40%          { opacity: 1;   transform: scale(1.2); }
}

/* ── Shell ── */
.lgn {
    display: grid;
    grid-template-columns: 1fr 460px;
    min-height: 100vh;
    background: #060d1f;
    overflow: hidden;
}

/* ═══ LEFT SCENE ═══ */
.lgn-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 48px 52px;
    overflow: hidden;
    background: linear-gradient(135deg, #060d1f 0%, #0c1830 60%, #091224 100%);
}

/* Aurora layers */
.lgn-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.lgn-aurora--1 {
    width: 520px; height: 520px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(79,70,229,.55) 0%, transparent 70%);
    animation: lgn-aurora-drift 14s ease-in-out infinite;
}
.lgn-aurora--2 {
    width: 400px; height: 400px;
    bottom: -80px; right: -60px;
    background: radial-gradient(circle, rgba(13,181,232,.45) 0%, transparent 70%);
    animation: lgn-aurora-drift 18s ease-in-out infinite reverse;
    animation-delay: -6s;
}
.lgn-aurora--3 {
    width: 300px; height: 300px;
    top: 40%; left: 55%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(168,85,247,.3) 0%, transparent 70%);
    animation: lgn-aurora-drift 22s ease-in-out infinite;
    animation-delay: -10s;
}

/* Floating letter particles */
.lgn-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lgn-p {
    position: absolute;
    left: var(--x);
    top:  var(--y);
    font-size: var(--s, 1rem);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    text-shadow: 0 0 12px rgba(79,70,229,.6);
    animation: lgn-particle-float var(--dr, 8s) var(--d, 0s) ease-in-out infinite;
    user-select: none;
}

/* Brand mark (top-left) */
.lgn-brand {
    position: absolute;
    top: 28px; left: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}
.lgn-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #4f46e5, #0db5e8);
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 20px rgba(79,70,229,.5);
}
.lgn-brand strong {
    color: #e8f0ff;
    font-size: .95rem;
    letter-spacing: .02em;
}

/* Mascot */
.lgn-mascot-wrap {
    position: relative;
    width: 160px; height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.lgn-mascot-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    pointer-events: none;
}
.lgn-mascot-ring--outer {
    inset: 0;
    border-color: rgba(79,70,229,.35);
    animation: lgn-ring-pulse 3s ease-in-out infinite;
}
.lgn-mascot-ring--mid {
    inset: 16px;
    border-color: rgba(13,181,232,.45);
    animation: lgn-ring-pulse 3s ease-in-out infinite;
    animation-delay: -1s;
}
.lgn-mascot-ring--inner {
    inset: 32px;
    border-color: rgba(168,85,247,.55);
    animation: lgn-ring-pulse 3s ease-in-out infinite;
    animation-delay: -2s;
}
.lgn-mascot {
    font-size: 5rem;
    filter: drop-shadow(0 0 24px rgba(79,70,229,.7));
    animation: lgn-mascot-float 4s ease-in-out infinite;
    z-index: 2;
    position: relative;
}

/* Copy */
.lgn-copy {
    text-align: center;
    z-index: 2;
    position: relative;
}
.lgn-copy h1 {
    font-size: 2.4rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 12px;
    text-shadow: 0 2px 20px rgba(79,70,229,.4);
}
.lgn-copy p {
    font-size: .95rem;
    color: rgba(200,220,255,.7);
    line-height: 1.6;
    margin: 0;
}

/* Social proof chips */
.lgn-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    z-index: 2;
    position: relative;
}
.lgn-proof-chip {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(220,235,255,.85);
    font-size: .8rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    letter-spacing: .02em;
}

/* Animated dots */
.lgn-dots {
    display: flex;
    gap: 8px;
    z-index: 2;
    position: relative;
}
.lgn-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(79,70,229,.7);
    animation: lgn-dot-blink 1.4s ease-in-out infinite;
}
.lgn-dots span:nth-child(2) { animation-delay: .2s; background: rgba(13,181,232,.7); }
.lgn-dots span:nth-child(3) { animation-delay: .4s; background: rgba(168,85,247,.7); }

/* ═══ RIGHT FORM ═══ */
.lgn-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 52px 48px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    animation: lgn-form-in .6s ease both;
}
.lgn-form::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,70,229,.06) 0%, transparent 70%);
    pointer-events: none;
}
.lgn-form::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,181,232,.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Form head */
.lgn-form-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.lgn-brand-mark--sm {
    width: 32px; height: 32px;
    font-size: .9rem;
    border-radius: 8px;
}
.lgn-form-brand-name {
    font-weight: 700;
    font-size: .9rem;
    color: #4f46e5;
    letter-spacing: .02em;
}
.lgn-form-title {
    font-size: 1.7rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.2;
}
.lgn-form-sub {
    font-size: .875rem;
    color: #6b7280;
    margin: 0;
}

/* Fields */
.lgn-fields { display: flex; flex-direction: column; gap: 16px; }

.lgn-field-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.lgn-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.lgn-field-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}
.lgn-input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: .95rem;
    color: #111827;
    background: #f9fafb;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
    box-sizing: border-box;
}
.lgn-input:focus {
    border-color: #4f46e5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.lgn-input--pass { padding-right: 72px; }

.lgn-show-btn {
    position: absolute;
    right: 12px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.lgn-show-btn:hover { border-color: #4f46e5; color: #4f46e5; }

/* Submit */
.lgn-submit {
    position: relative;
    overflow: hidden;
    padding: 15px 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f46e5 0%, #0db5e8 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, opacity .18s;
    box-shadow: 0 6px 24px rgba(79,70,229,.4);
    letter-spacing: .04em;
}
.lgn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(79,70,229,.5);
}
.lgn-submit:active:not(:disabled) { transform: translateY(0); }
.lgn-submit:disabled { opacity: .65; cursor: not-allowed; }

.lgn-submit-shine {
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-20deg);
    animation: lgn-shine-slide 3s ease-in-out infinite;
    pointer-events: none;
}

/* Demo section */
.lgn-demo { text-align: center; }
.lgn-demo-label {
    font-size: .75rem;
    color: #9ca3af;
    letter-spacing: .06em;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}
.lgn-demo-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.lgn-demo-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, transform .18s;
}
.lgn-demo-pill:hover {
    border-color: #4f46e5;
    background: rgba(79,70,229,.05);
    color: #4f46e5;
    transform: translateY(-1px);
}
.lgn-demo-pill.active {
    border-color: #4f46e5;
    background: rgba(79,70,229,.1);
    color: #4f46e5;
}
.lgn-demo-pill-icon { font-size: 1.1rem; }

/* Links */
.lgn-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.lgn-links a {
    font-size: .82rem;
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.lgn-links a:hover { color: #0db5e8; text-decoration: underline; }

/* ── Responsive login ── */
@media (max-width: 900px) {
    .lgn { grid-template-columns: 1fr; }
    .lgn-scene { display: none; }
    .lgn-form {
        min-height: 100vh;
        padding: 40px 28px;
        justify-content: center;
    }
}
@media (max-width: 420px) {
    .lgn-form { padding: 32px 20px; }
    .lgn-form-title { font-size: 1.4rem; }
    .lgn-demo-pills { flex-direction: column; align-items: center; }
}

/* ── Dark mode login ── */
html[data-theme="dark"] .lgn-form {
    background: #0e1a2e;
}
html[data-theme="dark"] .lgn-form-title { color: #e8f0ff; }
html[data-theme="dark"] .lgn-form-sub   { color: #7a90aa; }
html[data-theme="dark"] .lgn-field-label { color: #9bb5cc; }
html[data-theme="dark"] .lgn-input {
    background: #0a1628;
    border-color: #1e3050;
    color: #e0f0ff;
}
html[data-theme="dark"] .lgn-input:focus {
    border-color: #4f46e5;
    background: #0d1f3c;
}
html[data-theme="dark"] .lgn-show-btn {
    background: #0a1628;
    border-color: #1e3050;
    color: #7a90aa;
}
html[data-theme="dark"] .lgn-demo-pill {
    background: #0a1628;
    border-color: #1e3050;
    color: #9bb5cc;
}
html[data-theme="dark"] .lgn-demo-pill:hover,
html[data-theme="dark"] .lgn-demo-pill.active {
    border-color: #4f46e5;
    background: rgba(79,70,229,.15);
    color: #a5b4fc;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE  –  lnd-*  namespace
   Max-level informational design for /aprendizzaje/public/
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes lnd-orb-drift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.08); }
    66%      { transform: translate(-20px,20px) scale(.95); }
}
@keyframes lnd-hero-float {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-14px) rotate(1deg); }
}
@keyframes lnd-shimmer-text {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes lnd-card-reveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lnd-connector-pulse {
    0%,100% { opacity: .5; }
    50%      { opacity: 1; }
}
@keyframes lnd-grid-pulse {
    0%,100% { opacity: .04; }
    50%      { opacity: .09; }
}
@keyframes lnd-badge-pop {
    0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
    70%  { transform: scale(1.1) rotate(2deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── Outer wrapper ── */
.lnd {
    font-family: 'Space Grotesk', sans-serif;
    color: #111827;
    background: #ffffff;
    overflow-x: hidden;
}

/* ═══ NAVBAR ═══ */
.lnd-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 56px;
    height: 68px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background .3s, box-shadow .3s;
}
.lnd-nav--scrolled {
    background: rgba(255,255,255,.97);
    box-shadow: 0 2px 28px rgba(0,0,0,.09);
}
.lnd-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.lnd-nav-mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #0db5e8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(79,70,229,.4);
}
.lnd-nav-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #111827;
    letter-spacing: .01em;
}
.lnd-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lnd-nav-link {
    padding: 6px 14px;
    border-radius: 8px;
    color: #374151;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.lnd-nav-link:hover { background: rgba(79,70,229,.07); color: #4f46e5; }
.lnd-nav-cta-ghost {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1.5px solid rgba(79,70,229,.25);
    color: #4f46e5;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .18s, background .18s;
    margin-left: 4px;
}
.lnd-nav-cta-ghost:hover { border-color: #4f46e5; background: rgba(79,70,229,.05); }
.lnd-nav-cta {
    padding: 9px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #0db5e8);
    color: #fff !important;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
    box-shadow: 0 4px 14px rgba(79,70,229,.35);
    margin-left: 8px;
}
.lnd-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(79,70,229,.45); }
.lnd-nav-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: #374151;
    padding: 6px;
}

/* ═══ HERO ═══ */
.lnd-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f5f3ff 0%, #e0f7fe 50%, #f0f4ff 100%);
}
.lnd-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lnd-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(79,70,229,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,70,229,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: lnd-grid-pulse 6s ease-in-out infinite;
}
.lnd-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.lnd-hero-orb--a {
    width: 520px; height: 520px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(79,70,229,.28) 0%, transparent 70%);
    animation: lnd-orb-drift 18s ease-in-out infinite;
}
.lnd-hero-orb--b {
    width: 420px; height: 420px;
    bottom: -80px; right: -40px;
    background: radial-gradient(circle, rgba(13,181,232,.22) 0%, transparent 70%);
    animation: lnd-orb-drift 22s ease-in-out infinite reverse;
    animation-delay: -8s;
}
.lnd-hero-orb--c {
    width: 280px; height: 280px;
    top: 50%; left: 42%;
    background: radial-gradient(circle, rgba(168,85,247,.18) 0%, transparent 70%);
    animation: lnd-orb-drift 28s ease-in-out infinite;
    animation-delay: -14s;
}

/* Hero content grid */
.lnd-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 80px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
}

/* Copy */
.lnd-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.lnd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(79,70,229,.1);
    color: #4f46e5;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
    border: 1px solid rgba(79,70,229,.2);
}
.lnd-eyebrow--light {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.85);
}
.lnd-hero-h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    color: #111827;
    margin: 0;
}
.lnd-hero-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #0db5e8 50%, #a855f7 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: lnd-shimmer-text 4s linear infinite;
    display: inline;
}
.lnd-hero-p {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.72;
    margin: 0;
    max-width: 500px;
}
.lnd-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.lnd-btn-primary {
    padding: 14px 32px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f46e5, #0db5e8);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
    box-shadow: 0 6px 24px rgba(79,70,229,.4);
    display: inline-block;
}
.lnd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(79,70,229,.5); }
.lnd-btn-primary--light {
    background: #fff;
    color: #4f46e5 !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.lnd-btn-primary--light:hover { box-shadow: 0 10px 32px rgba(0,0,0,.2); }
.lnd-btn-ghost {
    padding: 13px 28px;
    border-radius: 14px;
    border: 2px solid rgba(79,70,229,.3);
    color: #4f46e5;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .18s, background .18s;
    display: inline-block;
    background: transparent;
}
.lnd-btn-ghost:hover { border-color: #4f46e5; background: rgba(79,70,229,.05); }
.lnd-btn-outline {
    padding: 13px 28px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .18s, background .18s;
    display: inline-block;
    background: transparent;
}
.lnd-btn-outline:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }

/* Hero proof mini-stats */
.lnd-hero-proof {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lnd-proof-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lnd-proof-item strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #4f46e5;
    line-height: 1;
}
.lnd-proof-item span {
    font-size: .72rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.lnd-proof-div {
    width: 1px;
    height: 32px;
    background: rgba(79,70,229,.2);
    flex-shrink: 0;
}

/* Hero visual (right side) */
.lnd-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lnd-hero-float 5s ease-in-out infinite;
}
.lnd-hero-visual-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 64px rgba(79,70,229,.18), 0 4px 16px rgba(0,0,0,.05);
    border: 1px solid rgba(79,70,229,.1);
    overflow: hidden;
}
.lnd-hero-visual-card--main {
    width: 320px;
    padding-bottom: 16px;
    position: relative;
    z-index: 2;
}
.lnd-hero-visual-card--badge {
    position: absolute;
    bottom: 20px;
    right: -24px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    white-space: nowrap;
    animation: lnd-badge-pop .6s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: .5s;
}
.lnd-hero-visual-card--badge strong { font-size: .85rem; color: #111827; display: block; }
.lnd-hero-visual-card--badge small { font-size: .72rem; color: #9ca3af; }
.lnd-badge-icon { font-size: 1.8rem; }
.lnd-hero-visual-card--progress {
    position: absolute;
    top: 20px;
    right: -20px;
    z-index: 3;
    padding: 14px 18px;
    border-radius: 14px;
    min-width: 160px;
}

/* Preview topbar (mac-style dots) */
.lnd-preview-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
}
.lnd-preview-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.lnd-preview-dot--r { background: #ff5f57; }
.lnd-preview-dot--y { background: #febc2e; }
.lnd-preview-dot--g { background: #28c840; }
.lnd-preview-title {
    font-size: .72rem;
    font-weight: 600;
    color: #9ca3af;
    margin-left: 6px;
}

/* Preview body */
.lnd-preview-hero-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
}
.lnd-preview-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #0db5e8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.lnd-preview-name {
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}
.lnd-preview-level {
    font-size: .7rem;
    color: #9ca3af;
    font-weight: 500;
    margin-top: 2px;
}
.lnd-preview-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px 14px;
}
.lnd-preview-card {
    border-radius: 10px;
    padding: 10px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
}
.lnd-preview-card--blue   { background: #ede9fe; color: #4f46e5; }
.lnd-preview-card--purple { background: #fce7f3; color: #9333ea; }
.lnd-preview-card--amber  { background: #fef3c7; color: #d97706; }
.lnd-preview-card--green  { background: #d1fae5; color: #059669; }

/* Progress mini card */
.lnd-prog-label { font-size: .7rem; color: #9ca3af; font-weight: 600; margin-bottom: 6px; }
.lnd-prog-bar {
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.lnd-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #0db5e8);
    border-radius: 999px;
    transition: width .5s ease;
}
.lnd-prog-pct {
    font-size: .78rem;
    font-weight: 700;
    color: #4f46e5;
    margin-top: 4px;
    text-align: right;
}

/* ═══ STATS BAND ═══ */
.lnd-stats {
    background: linear-gradient(135deg, #4f46e5 0%, #0db5e8 100%);
    padding: 56px 80px;
}
.lnd-stats-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.lnd-stat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    opacity: 0;
}
.lnd-stat.lnd-visible { animation: lnd-card-reveal .5s ease both; }
.lnd-stat-icon {
    font-size: 1.8rem;
    width: 52px; height: 52px;
    background: rgba(255,255,255,.12);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lnd-stat strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    display: block;
    line-height: 1.3;
    margin-bottom: 4px;
}
.lnd-stat p {
    font-size: .8rem;
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.5;
}

/* ═══ SECTION SHARED ═══ */
.lnd-section {
    padding: 96px 80px;
}
.lnd-section > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.lnd-section--alt {
    background: #f8f9ff;
}
.lnd-section-head {
    text-align: center;
    max-width: 640px !important;
    margin: 0 auto 56px !important;
}
.lnd-eyebrow { margin-bottom: 0; }
.lnd-section-h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #111827;
    margin: 12px 0 12px;
    line-height: 1.2;
}
.lnd-section-p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

/* ═══ LEVELS PATH ═══ */
.lnd-levels-path {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-width: 1280px;
    margin: 0 auto;
}
.lnd-levels-path::-webkit-scrollbar { height: 4px; }
.lnd-levels-path::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 2px; }
.lnd-levels-path::-webkit-scrollbar-thumb { background: rgba(79,70,229,.3); border-radius: 2px; }

.lnd-level-card {
    scroll-snap-align: start;
    flex: 0 0 172px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    border-radius: 16px;
    background: var(--lv-bg, #f5f3ff);
    border: 2px solid var(--lv-color, #4f46e5);
    border-color: transparent;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    opacity: 0;
}
.lnd-level-card.lnd-visible { animation: lnd-card-reveal .5s ease both; }
.lnd-level-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,.1);
    border-color: var(--lv-color, #4f46e5) !important;
}

.lnd-level-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.lnd-level-icon { font-size: 1.6rem; }
.lnd-level-code {
    font-family: 'Rajdhani', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    color: var(--lv-color, #4f46e5);
    background: var(--lv-bg, rgba(79,70,229,.1));
    padding: 2px 8px;
    border-radius: 6px;
}
.lnd-level-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
    text-align: center;
    align-self: flex-start;
    width: 100%;
}
.lnd-level-desc {
    font-size: .72rem;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    flex: 1;
}

.lnd-level-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    color: rgba(79,70,229,.45);
    font-size: 1.1rem;
    font-weight: 700;
    align-self: center;
    animation: lnd-connector-pulse 2s ease-in-out infinite;
}

/* ═══ FEATURES ═══ */
.lnd-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}
.lnd-feat {
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f0f0f8;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: transform .2s, box-shadow .2s;
    opacity: 0;
}
.lnd-feat.lnd-visible { animation: lnd-card-reveal .5s ease both; }
.lnd-feat:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.09); }
.lnd-feat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: #fff;
}
.lnd-feat h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}
.lnd-feat p {
    font-size: .875rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}

/* ═══ ROLES ═══ */
.lnd-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
}
.lnd-role {
    padding: 36px 28px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid #f0f0f8;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .2s, box-shadow .2s;
    opacity: 0;
}
.lnd-role.lnd-visible { animation: lnd-card-reveal .6s ease both; }
.lnd-role:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.1); }
.lnd-role--student { border-color: rgba(79,70,229,.2); }
.lnd-role--teacher  { border-color: rgba(139,92,246,.2); }
.lnd-role--admin    { border-color: rgba(245,158,11,.2); }

.lnd-role-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lnd-role-icon {
    font-size: 1.8rem;
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lnd-role--student .lnd-role-icon { background: rgba(79,70,229,.1); }
.lnd-role--teacher  .lnd-role-icon { background: rgba(139,92,246,.1); }
.lnd-role--admin    .lnd-role-icon { background: rgba(245,158,11,.1); }
.lnd-role-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.lnd-role--student .lnd-role-badge { background: rgba(79,70,229,.1);  color: #4f46e5; }
.lnd-role--teacher  .lnd-role-badge { background: rgba(139,92,246,.1); color: #8b5cf6; }
.lnd-role--admin    .lnd-role-badge { background: rgba(245,158,11,.1); color: #d97706; }

.lnd-role h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
}
.lnd-role-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.lnd-role-list li {
    font-size: .875rem;
    color: #4b5563;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.lnd-role-list li::before {
    content: '✓';
    font-weight: 800;
    flex-shrink: 0;
}
.lnd-role--student .lnd-role-list li::before { color: #4f46e5; }
.lnd-role--teacher  .lnd-role-list li::before { color: #8b5cf6; }
.lnd-role--admin    .lnd-role-list li::before { color: #d97706; }
.lnd-role-cta {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: transform .18s, opacity .18s;
    margin-top: auto;
}
.lnd-role-cta:hover { transform: translateY(-1px); opacity: .9; }
.lnd-role--student .lnd-role-cta { background: #4f46e5; color: #fff; }
.lnd-role--teacher  .lnd-role-cta { background: #8b5cf6; color: #fff; }
.lnd-role--admin    .lnd-role-cta { background: #d97706; color: #fff; }

/* ═══ FINAL CTA ═══ */
.lnd-cta {
    position: relative;
    padding: 100px 80px;
    background: linear-gradient(135deg, #060d1f 0%, #0c1830 60%, #091224 100%);
    text-align: center;
    overflow: hidden;
}
.lnd-cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.lnd-cta-orb--a {
    width: 420px; height: 420px;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(79,70,229,.4) 0%, transparent 70%);
    animation: lnd-orb-drift 16s ease-in-out infinite;
}
.lnd-cta-orb--b {
    width: 320px; height: 320px;
    bottom: -80px; right: 10%;
    background: radial-gradient(circle, rgba(13,181,232,.3) 0%, transparent 70%);
    animation: lnd-orb-drift 20s ease-in-out infinite reverse;
}
.lnd-cta-content { position: relative; z-index: 2; }
.lnd-cta-h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    margin: 16px 0 16px;
    line-height: 1.15;
}
.lnd-cta-p {
    font-size: 1.05rem;
    color: rgba(200,220,255,.7);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.65;
}
.lnd-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══ FOOTER ═══ */
.lnd-footer {
    padding: 24px 80px;
    background: #060d1f;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .8rem;
    color: rgba(255,255,255,.35);
}

/* ── Entrance animation class added by IntersectionObserver ── */
.lnd-visible { opacity: 1 !important; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .lnd-features { grid-template-columns: repeat(2, 1fr); }
    .lnd-stats-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .lnd-hero-content { grid-template-columns: 1fr; padding: 100px 40px 60px; gap: 40px; }
    .lnd-hero-visual { display: none; }
    .lnd-roles { grid-template-columns: 1fr; }
    .lnd-section { padding: 64px 40px; }
    .lnd-stats   { padding: 48px 40px; }
    .lnd-cta     { padding: 80px 40px; }
    .lnd-footer  { padding: 24px 40px; }
    .lnd-nav     { padding: 0 28px; }
    .lnd-nav-links { display: none; }
    .lnd-nav-burger { display: block; }
}
@media (max-width: 640px) {
    .lnd-features { grid-template-columns: 1fr; }
    .lnd-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .lnd-hero-h1 { font-size: 2.2rem; }
    .lnd-hero-content { padding: 90px 24px 48px; }
    .lnd-section { padding: 56px 24px; }
    .lnd-cta     { padding: 64px 24px; }
    .lnd-footer  { padding: 20px 24px; flex-direction: column; text-align: center; }
    .lnd-level-card { flex: 0 0 148px; }
}

/* ── Dark mode ── */
html[data-theme="dark"] .lnd-nav {
    background: rgba(6,13,31,.9);
    border-bottom-color: rgba(255,255,255,.06);
}
html[data-theme="dark"] .lnd-nav--scrolled { background: rgba(6,13,31,.98); }
html[data-theme="dark"] .lnd-nav-name  { color: #e0f0ff; }
html[data-theme="dark"] .lnd-nav-link  { color: #9bb5cc; }
html[data-theme="dark"] .lnd-hero {
    background: linear-gradient(135deg, #060d1f 0%, #0c1830 60%, #091224 100%);
}
html[data-theme="dark"] .lnd-hero-h1 { color: #e8f0ff; }
html[data-theme="dark"] .lnd-hero-p  { color: #7a90aa; }
html[data-theme="dark"] .lnd-hero-visual-card { background: #0a1628; border-color: #1e3050; }
html[data-theme="dark"] .lnd-preview-topbar { background: #071020; }
html[data-theme="dark"] .lnd-preview-name  { color: #e0f0ff; }
html[data-theme="dark"] .lnd-section--alt  { background: #071020; }
html[data-theme="dark"] .lnd-section-h2   { color: #e8f0ff; }
html[data-theme="dark"] .lnd-section-p    { color: #7a90aa; }
html[data-theme="dark"] .lnd-feat { background: #0a1628; border-color: #1e3050; }
html[data-theme="dark"] .lnd-feat h3 { color: #e0f0ff; }
html[data-theme="dark"] .lnd-feat p  { color: #7a90aa; }
html[data-theme="dark"] .lnd-role { background: #0a1628; border-color: #1e3050; }
html[data-theme="dark"] .lnd-role h3 { color: #e0f0ff; }
html[data-theme="dark"] .lnd-role-list li { color: #9bb5cc; }
html[data-theme="dark"] .lnd-level-card { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .lnd-level-title { color: #e0f0ff; }
html[data-theme="dark"] .lnd-level-desc  { color: #6a8faa; }


/* ===== kids-redesign.css ===== */
/* ═══════════════════════════════════════════════════════════════
   APRENDIZZAJE · KIDS REDESIGN v2  — max-level visual 2026-04
   ═══════════════════════════════════════════════════════════════ */

/* ── PALETTE ── */
:root {
    --k-sky1:#e0f2ff; --k-sky2:#f0faf5; --k-sky3:#fff9e0; --k-sky4:#f5e8ff;
    --lc0:#a78bfa; --lc0g:rgba(167,139,250,.4);
    --lc1:#38bdf8; --lc1g:rgba(56,189,248,.4);
    --lc2:#fbbf24; --lc2g:rgba(251,191,36,.4);
    --lc3:#34d399; --lc3g:rgba(52,211,153,.4);
    --lc4:#a78bfa; --lc4g:rgba(167,139,250,.4);
    --lc5:#f87171; --lc5g:rgba(248,113,113,.4);
    --lc6:#6ee7b7; --lc6g:rgba(110,231,183,.4);
    --lc7:#818cf8; --lc7g:rgba(129,140,248,.4);
    --lc8:#fb923c; --lc8g:rgba(251,146,60,.4);
    --lc9:#facc15; --lc9g:rgba(250,204,21,.4);
    --k-ink:#1e293b; --k-mid:#475569; --k-soft:#94a3b8;
    --k-r:32px; --k-rl:44px;
}

/* ── KEYFRAMES ── */
@keyframes kFloat    { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-18px) rotate(3deg)} }
@keyframes kBounce   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes kWiggle   { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }
@keyframes kPop      { 0%{transform:scale(.5);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes kPulse    { 0%,100%{box-shadow:0 0 0 0 var(--glow,rgba(56,189,248,.5))} 50%{box-shadow:0 0 0 16px transparent} }
@keyframes kStar     { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.2) rotate(15deg)} }
@keyframes kShine    { 0%{left:-100%} 100%{left:150%} }
@keyframes kBgShift  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes kFadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes kRing     { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
@keyframes kDotDrift { 0%,100%{transform:translate(0,0)} 33%{transform:translate(8px,-6px)} 66%{transform:translate(-5px,8px)} }
@keyframes kConnector { 0%{stroke-dashoffset:200} 100%{stroke-dashoffset:0} }
@keyframes kStagger0 { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ══ 1. GLOBAL BODY ══ */
.app-body {
    background: linear-gradient(-45deg, #e0f2ff, #f0faf5, #fff9e0, #f5e8ff, #fce7f3, #e0f2ff);
    background-size: 400% 400%;
    animation: kBgShift 24s ease infinite !important;
}
.app-body::after {
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(56,189,248,.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 88% 8%,  rgba(251,191,36,.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 35% 90%, rgba(52,211,153,.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 72% 55%, rgba(167,139,250,.3) 0%, transparent 100%),
        radial-gradient(3px 3px at 55% 35%, rgba(248,113,113,.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 22% 65%, rgba(250,204,21,.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 92% 78%, rgba(56,189,248,.3) 0%, transparent 100%),
        radial-gradient(3px 3px at 48% 12%, rgba(52,211,153,.4) 0%, transparent 100%);
}

/* ══ 2. SIDEBAR ══ */
.sidebar {
    background: linear-gradient(175deg,#0f172a 0%,#1e293b 100%);
    border-right:none;
    box-shadow:6px 0 32px rgba(0,0,0,.25);
}
.brand { padding:20px; gap:12px; }
.brand-mark {
    background:linear-gradient(135deg,#38bdf8,#0ea5e9);
    border-radius:16px;
    width:44px; height:44px;
    font-size:1.4rem;
    box-shadow:0 8px 24px rgba(56,189,248,.4);
    animation:kBounce 4s ease-in-out infinite;
}
.brand strong { color:#f0f9ff; font-size:1rem; font-family:var(--font-heading); }
.brand small  { color:rgba(148,210,252,.5); font-size:.7rem; }

.profile-chip {
    margin:0 12px 6px;
    padding:12px 14px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(56,189,248,.06));
    border:1.5px solid rgba(56,189,248,.18);
}
.avatar-badge {
    width:42px; height:42px;
    border-radius:14px;
    font-size:1.4rem;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    box-shadow:0 6px 18px rgba(251,191,36,.38);
    animation:kBounce 3.5s .5s ease-in-out infinite;
}
.profile-chip strong { color:#f0f9ff; font-size:.88rem; }
.profile-chip small  { color:rgba(148,210,252,.5); font-size:.72rem; }

/* XP Bar */
.sidebar-xp {
    margin:0 12px 8px;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
    border:1.5px solid rgba(255,255,255,.08);
}
.sidebar-xp-label span { color:rgba(148,210,252,.65); font-size:.72rem; font-weight:800; }
.sidebar-xp-bar {
    height:12px;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    overflow:visible;
    margin:8px 0;
    position:relative;
}
.sidebar-xp-fill {
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#fbbf24,#f97316,#ef4444);
    box-shadow:0 0 16px rgba(251,191,36,.55),0 0 32px rgba(249,115,22,.3);
    transition:width 1.2s cubic-bezier(.34,1.56,.64,1);
    position:relative;
}
.sidebar-xp-fill::after {
    content:'⭐'; position:absolute; right:-12px; top:-10px;
    font-size:1rem; animation:kStar 2s ease-in-out infinite;
    filter:drop-shadow(0 2px 8px rgba(251,191,36,.8));
}
.streak-fires-label { color:#fbbf24; font-weight:900; font-size:.88rem; }

/* Nav items */
.sidebar-nav { padding:0 10px; gap:2px; display:flex; flex-direction:column; }
.nav-link {
    border-radius:16px;
    padding:10px 13px;
    font-size:.86rem;
    font-weight:700;
    color:rgba(226,232,240,.65);
    display:flex; align-items:center; gap:10px;
    transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.nav-link:hover {
    background:rgba(255,255,255,.09);
    color:#f0f9ff;
    transform:translateX(4px) scale(1.02);
}
.nav-link.is-active, .nav-link.active {
    background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(56,189,248,.1));
    color:#7dd3fc;
    border-left:3px solid #38bdf8;
    padding-left:10px;
    box-shadow:inset 0 0 20px rgba(56,189,248,.06);
}
.nav-icon {
    width:32px; height:32px;
    border-radius:11px;
    background:rgba(255,255,255,.08);
    display:grid; place-items:center;
    font-size:1.15rem; flex-shrink:0;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .18s;
}
.nav-link:hover .nav-icon { transform:scale(1.2) rotate(-8deg); background:rgba(56,189,248,.18); }
.nav-link.is-active .nav-icon, .nav-link.active .nav-icon { background:rgba(56,189,248,.22); }
/* Per-path icon color */
.nav-link[data-nav-path="student/dashboard"] .nav-icon { background:rgba(56,189,248,.15); }
.nav-link[data-nav-path="student/levels"]    .nav-icon { background:rgba(52,211,153,.15); }
.nav-link[data-nav-path="student/mission"]   .nav-icon { background:rgba(251,191,36,.15); }
.nav-link[data-nav-path="student/library"]   .nav-icon { background:rgba(167,139,250,.15); }
.nav-link[data-nav-path="tools"]             .nav-icon { background:rgba(248,113,113,.15); }
.nav-link[data-nav-path="student/badges"]    .nav-icon { background:rgba(250,204,21,.18); }
.nav-audio-hint { display:none; }
.sidebar-card {
    margin:8px 12px 12px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.07);
    font-size:.8rem;
}

/* ══ 3. TOPBAR ══ */
.topbar {
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(20px);
    border-bottom:2px solid rgba(56,189,248,.12);
    padding:10px 22px;
    box-shadow:0 4px 24px rgba(30,41,59,.07);
    position:sticky; top:0; z-index:100;
}
.topbar h1 {
    font-size:1.05rem; font-weight:900;
    font-family:var(--font-heading); color:#0f172a;
}
.topbar-icon-btn {
    width:36px; height:36px;
    border-radius:12px;
    background:rgba(56,189,248,.1);
    border:1.5px solid rgba(56,189,248,.18);
    font-size:1rem;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .18s;
}
.topbar-icon-btn:hover { transform:scale(1.18); background:rgba(56,189,248,.2); }
.topbar-exit-btn {
    height:36px; padding:0 16px;
    border-radius:12px; font-size:.82rem; font-weight:800;
    background:rgba(248,113,113,.1);
    border:1.5px solid rgba(248,113,113,.22);
    color:#dc2626; font-family:var(--font-body);
    transition:all .18s;
}
.topbar-exit-btn:hover { background:rgba(248,113,113,.2); transform:scale(1.05); }
.dark-toggle {
    width:36px; height:36px; border-radius:12px;
    background:rgba(30,41,59,.08); border:1.5px solid rgba(30,41,59,.12);
}

/* ══ 4. PAGE CONTAINER ══ */
.page-container { padding:14px 18px 28px; gap:16px; }
.panel, .wide-card, .hero-panel-card, .metric-card, .result-hero, .instruction-card, .profile-card, .table-card {
    border-radius:var(--k-r);
    border:2px solid rgba(56,189,248,.1);
    box-shadow:0 8px 32px rgba(30,41,59,.09);
    padding:20px 22px;
    background:#fff;
    animation:kFadeUp .45s ease both;
}

/* ══ 5. DASHBOARD ══ */
.student-stage { gap:14px; align-items:start; }
.progress-orbit {
    border-radius:var(--k-rl);
    padding:26px 28px;
    border:2.5px solid rgba(56,189,248,.22);
    background:
        radial-gradient(circle at 95% 5%,  rgba(251,191,36,.25) 0%, transparent 40%),
        radial-gradient(circle at 5%  90%, rgba(56,189,248,.2) 0%, transparent 40%),
        linear-gradient(135deg,#fff 0%,#f0f9ff 100%);
    box-shadow:0 16px 48px rgba(56,189,248,.16);
}
.progress-orbit h2 { font-size:2rem; color:#0f172a; font-family:var(--font-heading); line-height:1.1; }
.welcome-avatar {
    width:58px; height:58px;
    border-radius:20px; font-size:1.6rem;
    box-shadow:0 10px 28px rgba(251,191,36,.38);
    animation:kBounce 3s ease-in-out infinite;
}
.hero-metric-strip { grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
.hero-metric {
    border-radius:18px; padding:14px; text-align:center;
    background:linear-gradient(135deg,rgba(56,189,248,.1),rgba(56,189,248,.05));
    border:1.5px solid rgba(56,189,248,.15);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.hero-metric:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 12px 28px rgba(56,189,248,.18); }
.hero-metric strong { font-size:1.65rem; font-family:var(--font-heading); color:#0ea5e9; display:block; }
.hero-metric span   { font-size:.7rem; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

/* Progress/route */
.route-board, .pathway-note, .lesson-scene, .celebration-card {
    border-radius:24px; padding:18px 20px;
    border:2px solid rgba(56,189,248,.12);
    box-shadow:0 4px 14px rgba(30,41,59,.06); background:#fff;
}
.progress-bar-shell { height:10px; border-radius:999px; background:rgba(56,189,248,.12); }
.progress-bar-fill { background:linear-gradient(90deg,#38bdf8,#818cf8); border-radius:999px; }

/* ══ 6. BUTTONS ══ */
.primary-btn {
    border-radius:16px;
    padding:13px 26px;
    font-size:.95rem; font-weight:900;
    font-family:var(--font-heading); letter-spacing:.04em;
    position:relative; overflow:hidden;
    box-shadow:0 8px 24px rgba(14,165,233,.32);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.primary-btn:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 16px 36px rgba(14,165,233,.4); }
.primary-btn:active { transform:scale(.97); }
.primary-btn::after {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    animation:kShine 3.5s 1s ease infinite;
}
.secondary-btn { border-radius:14px; font-weight:800; transition:transform .2s; }
.secondary-btn:hover { transform:translateY(-3px) scale(1.04); }
.ghost-btn { border-radius:14px; font-weight:700; transition:transform .18s; }
.ghost-btn:hover { transform:translateY(-2px); }

/* ══ 7. LESSON CARDS ══ */
.lesson-list { gap:10px; }
.lesson-card {
    border-radius:22px;
    padding:14px 18px;
    border:2px solid rgba(30,41,59,.06);
    box-shadow:0 3px 12px rgba(30,41,59,.07);
    transition:all .22s cubic-bezier(.34,1.56,.64,1);
    background:#fff;
    position:relative; overflow:hidden;
}
.lesson-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(135deg,rgba(56,189,248,.05),transparent 60%);
    opacity:0; transition:opacity .2s;
}
.lesson-card:hover {
    transform:translateX(8px) scale(1.01);
    border-color:rgba(56,189,248,.28);
    box-shadow:0 10px 30px rgba(56,189,248,.14);
}
.lesson-card:hover::before { opacity:1; }
.lesson-card--next {
    border-color:#38bdf8;
    background:linear-gradient(135deg,#f0f9ff,#fff);
    box-shadow:0 0 0 3px rgba(56,189,248,.15),0 10px 28px rgba(56,189,248,.18);
    animation:kPulse 2.8s ease-in-out infinite;
    --glow:rgba(56,189,248,.5);
}
.lesson-icon {
    width:54px; height:54px;
    border-radius:18px; font-size:1.65rem;
    display:grid; place-items:center; flex-shrink:0;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.lesson-card:hover .lesson-icon { transform:scale(1.15) rotate(-8deg); }
.lesson-card .lesson-body strong { font-size:.95rem; font-weight:900; color:#0f172a; }
.lesson-card .lesson-body p { font-size:.8rem; color:#64748b; }

/* Stars on lessons */
.kid-stars { display:flex; gap:3px; margin:4px 0 0; }
.kid-stars span { font-size:1rem; transition:transform .2s; }
.kid-stars span:hover { transform:scale(1.3) rotate(-10deg); }
.kid-star-empty { opacity:.25; filter:grayscale(1); }

/* Score bar */
.lesson-score-bar  { height:7px; border-radius:999px; background:rgba(56,189,248,.1); margin-top:8px; }
.lesson-score-fill { background:linear-gradient(90deg,#fbbf24,#f97316); }

/* Status badges */
.lesson-status-badge { border-radius:999px; padding:4px 11px; font-size:.71rem; font-weight:900; letter-spacing:.03em; }
.badge--mastered   { background:rgba(52,211,153,.18); color:#065f46; }
.badge--completed  { background:rgba(56,189,248,.15); color:#0369a1; }
.badge--inprogress { background:rgba(251,191,36,.22); color:#92400e; }
.badge--new        { background:rgba(167,139,250,.14); color:#5b21b6; }
.badge--locked     { background:rgba(30,41,59,.07); color:#64748b; }

/* Pills */
.tiny-pill {
    border-radius:999px; padding:5px 12px;
    font-size:.73rem; font-weight:800;
    background:rgba(56,189,248,.08); color:#0369a1;
    border:1.5px solid rgba(56,189,248,.18);
    transition:all .15s;
}
.tiny-pill:hover { background:rgba(56,189,248,.16); transform:scale(1.06); }
.tiny-pill.is-active { background:#38bdf8; color:#fff; border-color:#38bdf8; }
.pill { border-radius:999px; padding:4px 12px; font-size:.72rem; font-weight:900; background:rgba(56,189,248,.1); color:#0369a1; }

/* ══ 8. LEVEL MAP CARDS ══ */
.level-map-grid { grid-template-columns:repeat(auto-fill,minmax(195px,1fr)) !important; gap:16px !important; }
.level-map-card {
    border-radius:28px !important; padding:24px 18px !important;
    text-align:center !important; position:relative !important; overflow:hidden !important;
    border:2.5px solid transparent !important;
    box-shadow:0 8px 28px rgba(30,41,59,.1) !important;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
    animation:kFadeUp .45s ease both;
    background:#fff !important;
}
.level-map-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    opacity:.06; transition:opacity .22s;
}
.level-map-card:hover { transform:translateY(-8px) scale(1.03) !important; box-shadow:0 20px 48px rgba(30,41,59,.16) !important; }
.level-map-card:hover::before { opacity:.1; }
.level-map-card.lesson-card--next { animation:kPulse 2.5s ease-in-out infinite !important; --glow:rgba(56,189,248,.5); }
.level-map-card.locked { opacity:.5 !important; filter:grayscale(.7) !important; }

.level-map-card.level-1 { border-color:var(--lc1) !important; --glow:var(--lc1g); }
.level-map-card.level-1::before { background:var(--lc1); }
.level-map-card.level-2 { border-color:var(--lc2) !important; --glow:var(--lc2g); }
.level-map-card.level-2::before { background:var(--lc2); }
.level-map-card.level-3 { border-color:var(--lc3) !important; --glow:var(--lc3g); }
.level-map-card.level-3::before { background:var(--lc3); }
.level-map-card.level-4 { border-color:var(--lc4) !important; --glow:var(--lc4g); }
.level-map-card.level-4::before { background:var(--lc4); }
.level-map-card.level-5 { border-color:var(--lc5) !important; --glow:var(--lc5g); }
.level-map-card.level-5::before { background:var(--lc5); }
.level-map-card.level-6 { border-color:var(--lc6) !important; --glow:var(--lc6g); }
.level-map-card.level-6::before { background:var(--lc6); }
.level-map-card.level-7 { border-color:var(--lc7) !important; --glow:var(--lc7g); }
.level-map-card.level-7::before { background:var(--lc7); }
.level-map-card.level-8 { border-color:var(--lc8) !important; --glow:var(--lc8g); }
.level-map-card.level-8::before { background:var(--lc8); }
.level-map-card.level-9 { border-color:var(--lc9) !important; --glow:var(--lc9g); }
.level-map-card.level-9::before { background:var(--lc9); }

.level-scene-icon {
    font-size:3.2rem !important; display:block !important; margin:0 auto 14px !important;
    animation:kBounce 4s ease-in-out infinite !important;
    filter:drop-shadow(0 8px 18px rgba(30,41,59,.18)) !important;
}
.level-map-card h3 { font-size:1.02rem !important; font-weight:900 !important; color:#0f172a !important; margin:8px 0 6px !important; }
.level-map-card p  { font-size:.78rem !important; color:#64748b !important; margin:0 0 14px !important; line-height:1.45 !important; }

/* ══ 9. KLM — Adventure Path (Levels Map page) ══ */
.klm { position:relative; display:grid; gap:20px; overflow:hidden; }
.klm-bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.klm-bg__cloud { position:absolute; font-size:clamp(2.5rem,5vw,4rem); opacity:.2; animation:kBounce 10s ease-in-out infinite; }
.klm-bg__cloud--a { top:5%;  left:-2%; animation-delay:0s; }
.klm-bg__cloud--b { top:22%; right:-1%; animation-delay:3s; }
.klm-bg__cloud--c { top:55%; left:1%; animation-delay:6s; }
.klm-bg__star {
    position:absolute; left:var(--kx); top:var(--ky);
    font-size:clamp(.9rem,1.4vw,1.5rem); opacity:.45;
    animation:kStar 4s var(--kd,0s) ease-in-out infinite;
}

/* Hero */
.klm-hero {
    position:relative; z-index:1;
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:20px;
    padding:28px 30px;
    border-radius:var(--k-rl);
    background:
        radial-gradient(circle at 95% 10%, rgba(251,191,36,.24) 0%, transparent 45%),
        radial-gradient(circle at 5% 85%,  rgba(56,189,248,.2) 0%, transparent 45%),
        linear-gradient(135deg,#fff 0%,#f0f9ff 100%);
    border:2.5px solid rgba(56,189,248,.18);
    box-shadow:0 16px 48px rgba(56,189,248,.14);
    overflow:hidden;
    animation:kFadeUp .4s ease both;
}
.klm-hero__owl {
    font-size:3.5rem; animation:kFloat 5s ease-in-out infinite;
    filter:drop-shadow(0 8px 20px rgba(30,41,59,.16));
}
.klm-hero__copy { display:grid; gap:5px; }
.klm-hero__eyebrow { font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#0ea5e9; }
.klm-hero__h1 { font-size:clamp(1.6rem,3vw,2.2rem); font-family:var(--font-heading); font-weight:900; color:#0f172a; margin:0; }
.klm-hero__p  { font-size:.88rem; color:#64748b; margin:0; }
.klm-hero__actions { display:flex; flex-direction:column; gap:10px; }

/* Adventure path */
.klm-path {
    position:relative; z-index:1;
    display:flex; flex-direction:column; gap:0;
    padding:8px 0 32px;
}

/* Level stop */
.klm-stop {
    display:grid; grid-template-columns:1fr 56px;
    align-items:center; gap:12px;
    padding:4px 0;
    animation:kFadeUp .4s ease both;
}
.klm-stop--rtl { grid-template-columns:56px 1fr; direction:rtl; }
.klm-stop--rtl > * { direction:ltr; }

/* Step bubble */
.klm-step {
    width:48px; height:48px;
    border-radius:50%;
    background:var(--lv-color,#38bdf8);
    display:grid; place-items:center;
    font-size:1.2rem; font-weight:900;
    color:#fff;
    box-shadow:0 6px 20px color-mix(in srgb, var(--lv-color,#38bdf8) 50%, transparent);
    flex-shrink:0; z-index:2;
    animation:kBounce 4s ease-in-out infinite;
}

/* Connector between stops */
.klm-connector {
    display:flex; align-items:center; justify-content:center;
    height:56px; position:relative; z-index:1;
    margin:0 60px;
}
.klm-connector--rtl { flex-direction:row-reverse; }
.klm-connector__dots {
    flex:1; height:4px; border-radius:2px;
    background:repeating-linear-gradient(90deg,rgba(56,189,248,.35) 0,rgba(56,189,248,.35) 8px,transparent 8px,transparent 16px);
}
.klm-connector__arrow { font-size:1.4rem; margin:0 8px; animation:kBounce 2s ease-in-out infinite; }

/* Level card */
.klm-card {
    border-radius:28px;
    padding:20px 22px;
    border:2.5px solid var(--lv-color,#38bdf8);
    background:#fff;
    position:relative; overflow:hidden;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(30,41,59,.1);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
    display:grid; gap:12px;
}
.klm-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:var(--lv-bg,rgba(56,189,248,.08));
    pointer-events:none;
}
.klm-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 20px 48px color-mix(in srgb, var(--lv-color,#38bdf8) 30%, transparent); }

.klm-stop.is-current .klm-card { animation:kPulse 2.5s ease-in-out infinite; --glow:var(--lv-color,#38bdf8); box-shadow:0 0 0 3px color-mix(in srgb, var(--lv-color,#38bdf8) 25%, transparent), 0 12px 36px rgba(30,41,59,.12); }
.klm-stop.is-locked .klm-card  { opacity:.5; filter:grayscale(.65); cursor:not-allowed; }
.klm-stop.is-done .klm-card    { background:linear-gradient(135deg,rgba(52,211,153,.06),#fff); }

/* Stars above completed card */
.klm-card__stars { display:flex; justify-content:center; gap:4px; font-size:1.2rem; animation:kStar 2s ease-in-out infinite; }

/* Owl character on current level */
.klm-card__hero-char {
    position:absolute; top:-6px; right:14px;
    font-size:2.2rem; animation:kBounce 3s ease-in-out infinite;
    filter:drop-shadow(0 4px 12px rgba(30,41,59,.15));
}

/* Lock overlay */
.klm-card__lock {
    position:absolute; inset:0; display:grid; place-items:center;
    font-size:3rem; background:rgba(255,255,255,.7); border-radius:inherit; z-index:3;
}

/* Icon circle */
.klm-card__icon-wrap {
    width:72px; height:72px; border-radius:24px;
    background:var(--lv-bg,rgba(56,189,248,.12));
    display:grid; place-items:center; position:relative;
    margin:0 auto;
    box-shadow:0 8px 24px color-mix(in srgb, var(--lv-color,#38bdf8) 25%, transparent);
}
.klm-card__icon { font-size:2.2rem; animation:kBounce 4s ease-in-out infinite; }
.klm-card__icon-ring {
    position:absolute; inset:-6px; border-radius:28px;
    border:2px solid var(--lv-color,#38bdf8); opacity:.3;
    animation:kRing 2.5s ease-out infinite;
}
.klm-card__check { position:absolute; bottom:-6px; right:-6px; font-size:1.2rem; background:#fff; border-radius:50%; padding:2px; }

/* Info */
.klm-card__info { text-align:center; display:grid; gap:4px; }
.klm-card__world { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--lv-color,#38bdf8); }
.klm-card__code  { font-size:.72rem; font-weight:900; color:#64748b; }
.klm-card__title { font-size:1.05rem; font-weight:900; color:#0f172a; margin:0; font-family:var(--font-heading); }
.klm-card__desc  { font-size:.78rem; color:#64748b; margin:0; line-height:1.45; }

/* CTA button */
.klm-card__cta {
    display:block; padding:12px 20px;
    border-radius:16px; text-align:center; text-decoration:none;
    font-size:.88rem; font-weight:900; font-family:var(--font-heading);
    color:#fff; background:var(--lv-color,#38bdf8);
    box-shadow:0 6px 20px color-mix(in srgb, var(--lv-color,#38bdf8) 40%, transparent);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    position:relative; overflow:hidden;
}
.klm-card__cta::after {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg); animation:kShine 3s .5s ease infinite;
}
.klm-card__cta:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 12px 32px color-mix(in srgb, var(--lv-color,#38bdf8) 50%, transparent); }
.klm-card__locked {
    display:block; padding:10px 16px; border-radius:14px; text-align:center;
    font-size:.82rem; font-weight:800; color:#94a3b8;
    background:rgba(30,41,59,.06); border:1.5px dashed rgba(30,41,59,.15);
}

/* Finish line */
.klm-finish { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 0 8px; animation:kFadeUp .4s ease both; }
.klm-finish__flag { font-size:3.5rem; animation:kFloat 5s ease-in-out infinite; filter:drop-shadow(0 8px 20px rgba(30,41,59,.18)); }
.klm-finish__label { font-size:.95rem; font-weight:900; font-family:var(--font-heading); color:#0f172a; text-align:center; }

/* KLM responsive */
@media(max-width:640px) {
    .klm-hero { grid-template-columns:1fr; text-align:center; }
    .klm-hero__owl { margin:0 auto; }
    .klm-hero__actions { flex-direction:row; justify-content:center; }
    .klm-stop { grid-template-columns:1fr 44px; }
    .klm-stop--rtl { grid-template-columns:44px 1fr; }
    .klm-card { padding:16px 16px; }
}

/* ══ 10. LEVEL DETAIL (kld-*) ══ */
.kld { position:relative; display:grid; gap:18px; }
.kld-hero {
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:20px;
    padding:28px 30px; border-radius:var(--k-rl);
    background:
        radial-gradient(circle at 90% 5%, rgba(251,191,36,.22) 0%, transparent 45%),
        linear-gradient(135deg,#fff,#f0f9ff);
    border:2.5px solid var(--lv-color,rgba(56,189,248,.25));
    box-shadow:0 16px 48px color-mix(in srgb, var(--lv-color,#38bdf8) 12%, transparent);
    overflow:hidden;
    animation:kFadeUp .4s ease both;
}
.kld-hero__icon {
    font-size:4.5rem; animation:kFloat 5s ease-in-out infinite;
    filter:drop-shadow(0 10px 24px rgba(30,41,59,.18));
}
.kld-hero__code { display:inline-block; padding:4px 14px; border-radius:999px; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; background:var(--lv-color,#38bdf8); color:#fff; margin-bottom:6px; }
.kld-hero__title { font-size:clamp(1.5rem,3vw,2rem); font-family:var(--font-heading); font-weight:900; color:#0f172a; margin:0 0 6px; line-height:1.1; }
.kld-hero__phrase { font-size:.88rem; color:#64748b; margin:0; }
.kld-cta {
    display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0;
}
.kld-cta a {
    display:flex; align-items:center; gap:8px;
    padding:14px 24px; border-radius:18px;
    font-size:.95rem; font-weight:900; font-family:var(--font-heading);
    color:#fff; background:var(--lv-color,#38bdf8); text-decoration:none;
    box-shadow:0 8px 24px color-mix(in srgb, var(--lv-color,#38bdf8) 40%, transparent);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    position:relative; overflow:hidden; white-space:nowrap;
}
.kld-cta a::after {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg); animation:kShine 3.5s 1s ease infinite;
}
.kld-cta a:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 16px 36px color-mix(in srgb, var(--lv-color,#38bdf8) 50%, transparent); }

/* Lessons grid */
.kld-lessons { display:grid; gap:12px; }
.kld-lesson {
    display:grid; grid-template-columns:48px auto 1fr auto;
    align-items:center; gap:14px;
    padding:16px 18px; border-radius:22px;
    background:#fff; border:2px solid rgba(30,41,59,.06);
    box-shadow:0 3px 12px rgba(30,41,59,.07);
    transition:all .22s cubic-bezier(.34,1.56,.64,1);
    cursor:pointer; text-decoration:none; position:relative; overflow:hidden;
}
.kld-lesson:hover {
    transform:translateX(8px) scale(1.01);
    border-color:var(--lv-color,rgba(56,189,248,.3));
    box-shadow:0 10px 28px color-mix(in srgb, var(--lv-color,#38bdf8) 14%, transparent);
}
.kld-lesson.is-next {
    border-color:var(--lv-color,#38bdf8);
    background:linear-gradient(135deg,color-mix(in srgb, var(--lv-color,#38bdf8) 6%, transparent),#fff);
    animation:kPulse 2.8s ease-in-out infinite; --glow:var(--lv-color,rgba(56,189,248,.5));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--lv-color,#38bdf8) 20%, transparent), 0 10px 28px rgba(30,41,59,.1);
}
.kld-lesson__num {
    width:40px; height:40px; border-radius:14px;
    background:rgba(30,41,59,.06); display:grid; place-items:center;
    font-size:.88rem; font-weight:900; color:#64748b;
    flex-shrink:0;
}
.kld-lesson.is-next .kld-lesson__num { background:var(--lv-color,#38bdf8); color:#fff; }
.kld-lesson__icon { font-size:1.7rem; transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.kld-lesson:hover .kld-lesson__icon { transform:scale(1.2) rotate(-8deg); }
.kld-lesson__body { display:grid; gap:4px; }
.kld-lesson__name { font-size:.95rem; font-weight:900; color:#0f172a; }
.kld-lesson__hint { font-size:.78rem; color:#64748b; }
.kld-lesson__stars { display:flex; gap:3px; }
.kld-lesson__stars span { font-size:.9rem; }
.kld-lesson__star-empty { opacity:.2; filter:grayscale(1); }
.kld-lesson__btn {
    display:flex; align-items:center; justify-content:center;
    padding:10px 18px; border-radius:14px;
    font-size:.88rem; font-weight:900; font-family:var(--font-heading);
    text-decoration:none; white-space:nowrap; flex-shrink:0;
    background:rgba(30,41,59,.07); color:#0f172a;
    border:2px solid rgba(30,41,59,.08);
    transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.kld-lesson.is-next .kld-lesson__btn { background:var(--lv-color,#38bdf8); color:#fff; border-color:transparent; box-shadow:0 6px 20px color-mix(in srgb, var(--lv-color,#38bdf8) 40%, transparent); }
.kld-lesson__btn:hover { transform:scale(1.08); }

/* KLD hero responsive */
@media(max-width:640px) {
    .kld-hero { grid-template-columns:auto 1fr; }
    .kld-cta { grid-column:1/-1; flex-direction:row; }
    .kld-lesson { grid-template-columns:36px auto 1fr; }
    .kld-lesson__btn { grid-column:1/-1; }
}

/* ══ 11. BADGES (enhanced) ══ */
.badge-row { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)) !important; gap:16px !important; display:grid !important; }
.badge-card {
    border-radius:28px !important; padding:26px 18px 20px !important; text-align:center !important;
    background:#fff !important; border:2px solid transparent !important;
    box-shadow:0 8px 28px rgba(30,41,59,.1) !important;
    position:relative !important; overflow:hidden !important;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
    animation:kFadeUp .4s ease both;
    display:grid; gap:8px;
}
.badge-card:hover { transform:translateY(-8px) scale(1.04) !important; box-shadow:0 24px 52px rgba(30,41,59,.16) !important; }
.badge-card::after {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg);
}
.badge-card:hover::after { animation:kShine .6s ease forwards; }
.badge-card strong { font-size:.95rem !important; font-weight:900 !important; color:#0f172a !important; }
.badge-card p { font-size:.78rem !important; color:#64748b !important; margin:0 !important; }
.badge-card small { font-size:.7rem !important; color:#0ea5e9 !important; font-weight:700 !important; }

/* ══ 12. LIBRARY ══ */
.library-catalog-grid { grid-template-columns:repeat(auto-fill,minmax(205px,1fr)) !important; gap:16px !important; display:grid !important; }
.library-catalog-card {
    border-radius:28px !important; padding:22px 18px !important;
    border:2px solid rgba(56,189,248,.12) !important; background:#fff !important;
    box-shadow:0 8px 28px rgba(30,41,59,.09) !important;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
    display:flex !important; flex-direction:column !important; gap:10px !important;
    animation:kFadeUp .4s ease both;
}
.library-catalog-card:hover { transform:translateY(-6px) scale(1.02) !important; box-shadow:0 20px 48px rgba(30,41,59,.14) !important; }
.library-cover-mark {
    width:72px !important; height:72px !important; border-radius:22px !important;
    font-size:2.2rem !important; display:grid !important; place-items:center !important;
    background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(14,165,233,.08)) !important;
    margin:0 auto 4px !important;
    box-shadow:0 8px 24px rgba(56,189,248,.18) !important;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.library-catalog-card:hover .library-cover-mark { transform:scale(1.15) rotate(-8deg) !important; }
.library-catalog-card h3 { font-size:.98rem !important; font-weight:900 !important; color:#0f172a !important; text-align:center !important; }
.library-preview-text { font-size:.78rem !important; color:#64748b !important; flex:1 !important; }
.library-filter-bar { display:flex !important; flex-wrap:wrap !important; gap:8px !important; }

/* ══ 13. JOURNEY PATH ══ */
.level-journey-node { gap:14px !important; }
.level-journey-icon-wrap {
    width:76px !important; height:76px !important; border-radius:26px !important;
    font-size:2.1rem !important;
    box-shadow:0 8px 24px rgba(30,41,59,.13) !important;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.level-journey-node:not(.locked) .level-journey-icon-wrap:hover { transform:scale(1.14) rotate(-8deg) !important; }
.level-journey-node.is-current .level-journey-icon-wrap { animation:kPulse 2.5s ease-in-out infinite !important; --glow:rgba(56,189,248,.5); }
.level-journey-card {
    border-radius:22px !important; padding:16px 20px !important;
    border:2px solid rgba(30,41,59,.06) !important; background:#fff !important;
    box-shadow:0 4px 16px rgba(30,41,59,.08) !important;
    transition:all .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.level-journey-node:not(.locked) .level-journey-card:hover { transform:translateX(7px) !important; border-color:rgba(56,189,248,.3) !important; box-shadow:0 10px 28px rgba(56,189,248,.12) !important; }
.level-journey-node.is-current .level-journey-card { border-color:#38bdf8 !important; background:linear-gradient(135deg,#f0f9ff,#fff) !important; }

/* ══ 14. PATHWAY ══ */
.pathway-track { grid-template-columns:repeat(auto-fill,minmax(135px,1fr)) !important; gap:12px !important; display:grid !important; }
.pathway-stop {
    border-radius:22px !important; padding:18px 14px !important; text-align:center !important;
    background:#fff !important; border:2px solid rgba(30,41,59,.07) !important;
    box-shadow:0 4px 14px rgba(30,41,59,.09) !important;
    transition:all .22s cubic-bezier(.34,1.56,.64,1) !important;
    display:grid !important; gap:7px !important; text-decoration:none !important;
}
.pathway-stop:hover { transform:translateY(-5px) scale(1.04) !important; }
.stop-icon { font-size:2.2rem !important; display:block !important; animation:kBounce 4.5s ease-in-out infinite !important; }
.pathway-stop.level-1 { border-color:var(--lc1) !important; }
.pathway-stop.level-2 { border-color:var(--lc2) !important; }
.pathway-stop.level-3 { border-color:var(--lc3) !important; }
.pathway-stop.level-4 { border-color:var(--lc4) !important; }
.pathway-stop.level-5 { border-color:var(--lc5) !important; }
.pathway-stop.level-6 { border-color:var(--lc6) !important; }
.pathway-stop.level-7 { border-color:var(--lc7) !important; }
.pathway-stop.level-8 { border-color:var(--lc8) !important; }
.pathway-stop.level-9 { border-color:var(--lc9) !important; }
.route-chip { border-radius:999px !important; padding:4px 10px !important; font-size:.7rem !important; font-weight:800 !important; background:rgba(56,189,248,.1) !important; color:#0369a1 !important; display:inline-block !important; }

/* ══ 15. ACTIVITY ══ */
.activity-hero {
    border-radius:var(--k-rl) !important; padding:30px 26px !important; text-align:center !important;
    background:linear-gradient(135deg,#f0f9ff,#fff) !important;
    border:2.5px solid rgba(56,189,248,.18) !important;
    box-shadow:0 16px 48px rgba(56,189,248,.16) !important;
}
.activity-hero .mascot {
    font-size:4.5rem !important; display:block !important; margin:0 auto 18px !important;
    animation:kFloat 4s ease-in-out infinite !important;
    filter:drop-shadow(0 10px 24px rgba(30,41,59,.16)) !important;
}
.activity-hero h2 { font-size:1.55rem !important; color:#0f172a !important; }
.activity-stat { border-radius:18px !important; border:1.5px solid rgba(56,189,248,.15) !important; }
.lesson-progress-dot { width:10px !important; height:10px !important; }
.lesson-progress-dot.is-current { animation:kPulse 2s ease-in-out infinite !important; --glow:rgba(56,189,248,.5) !important; }

/* ══ 16. BUBBLES / ILLUSTRATION ══ */
.bubble {
    width:56px !important; height:56px !important;
    border-radius:20px !important; font-size:1.7rem !important;
    animation:kBounce 3.5s ease-in-out infinite !important;
    border:2px solid rgba(56,189,248,.15) !important;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.bubble:hover { transform:scale(1.2) rotate(-10deg) !important; }
.bubble:nth-child(2) { animation-delay:.5s !important; }
.bubble:nth-child(3) { animation-delay:1s !important; }
.bubble:nth-child(4) { animation-delay:1.5s !important; }

/* ══ 17. DARK MODE ══ */
html[data-theme="dark"] .app-body {
    background:linear-gradient(-45deg,#0d1520,#0f1e2e,#131a27,#180f26,#0d1520);
    background-size:400% 400%;
    animation:kBgShift 24s ease infinite;
}
html[data-theme="dark"] .topbar { background:rgba(13,21,32,.92); }
html[data-theme="dark"] .kd-hero,
html[data-theme="dark"] .klm-hero,
html[data-theme="dark"] .kld-hero,
html[data-theme="dark"] .progress-orbit { background:linear-gradient(135deg,#0f2035,#0d1e30); border-color:rgba(56,189,248,.2); }
html[data-theme="dark"] .panel,.panel,
html[data-theme="dark"] .wide-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .level-map-card,
html[data-theme="dark"] .badge-card,
html[data-theme="dark"] .library-catalog-card,
html[data-theme="dark"] .level-journey-card,
html[data-theme="dark"] .pathway-stop,
html[data-theme="dark"] .klm-card,
html[data-theme="dark"] .kld-lesson,
html[data-theme="dark"] .route-board,
html[data-theme="dark"] .pathway-note,
html[data-theme="dark"] .activity-hero,
html[data-theme="dark"] .toolbar-card { background:#0f2035; border-color:rgba(56,189,248,.14); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .klm-card__title,
html[data-theme="dark"] .kld-lesson__name,
html[data-theme="dark"] .kld-hero__title,
html[data-theme="dark"] .klm-hero__h1 { color:#e2f3ff; }

/* ══ 18. SEASONAL BANNER ══ */
.seasonal-banner {
    border-radius:0 !important; padding:10px 22px !important;
    background:linear-gradient(90deg,#fbbf24,#f97316,#ef4444) !important;
    font-weight:800 !important; font-size:.84rem !important; color:#fff !important;
    box-shadow:0 4px 20px rgba(251,191,36,.35) !important;
    text-shadow:0 1px 3px rgba(0,0,0,.2) !important;
    animation:kBgShift 8s ease infinite !important; background-size:200% 200% !important;
}

/* ══ 19. STAGGER ANIMATIONS ══ */
.kd-tile:nth-child(1) { animation-delay:.05s }
.kd-tile:nth-child(2) { animation-delay:.1s }
.kd-tile:nth-child(3) { animation-delay:.15s }
.kd-tile:nth-child(4) { animation-delay:.2s }
.klm-stop:nth-child(odd)  { animation-delay:.1s }
.klm-stop:nth-child(even) { animation-delay:.18s }
.level-map-card:nth-child(1) { animation-delay:.05s }
.level-map-card:nth-child(2) { animation-delay:.10s }
.level-map-card:nth-child(3) { animation-delay:.15s }
.level-map-card:nth-child(4) { animation-delay:.20s }
.level-map-card:nth-child(5) { animation-delay:.25s }
.level-map-card:nth-child(6) { animation-delay:.30s }
.kld-lesson:nth-child(1) { animation-delay:.05s }
.kld-lesson:nth-child(2) { animation-delay:.10s }
.kld-lesson:nth-child(3) { animation-delay:.15s }
.kld-lesson:nth-child(4) { animation-delay:.20s }
.kld-lesson:nth-child(5) { animation-delay:.25s }
.kld-lesson { animation:kFadeUp .4s ease both; }

/* ══ 20. RESPONSIVE ══ */
@media(max-width:768px) {
    .hero-metric-strip { grid-template-columns:repeat(2,1fr); }
    .level-map-grid    { grid-template-columns:repeat(2,1fr); }
    .badge-row         { grid-template-columns:repeat(2,1fr); }
    .library-catalog-grid { grid-template-columns:repeat(2,1fr); }
    .pathway-track     { grid-template-columns:repeat(2,1fr); }
    .student-stage     { grid-template-columns:1fr; }
    .dashboard-grid    { grid-template-columns:1fr; }
    .lesson-hero-panel { grid-template-columns:1fr; }
}
@media(max-width:480px) {
    .level-map-grid,.badge-row,.library-catalog-grid { grid-template-columns:1fr; }
    .page-container { padding:10px 12px 20px; }
}

/* ═══ KD-* DASHBOARD v2 ══════════════════════════════════════════ */
.kd { position:relative; display:grid; gap:18px; }
.kd-bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.kd-bg__cloud { position:absolute; font-size:clamp(2.5rem,5vw,4.5rem); opacity:.18; animation:kBounce 9s ease-in-out infinite; }
.kd-bg__cloud--a { top:6%; left:-2%; }
.kd-bg__cloud--b { top:20%; right:-1%; animation-delay:3s; }
.kd-bg__star { position:absolute; left:var(--kx); top:var(--ky); font-size:clamp(.8rem,1.5vw,1.5rem); opacity:.4; animation:kStar 4s var(--kd,0s) ease-in-out infinite; }
.kd-bg__dot { position:absolute; border-radius:50%; animation:kDotDrift 8s ease-in-out infinite; }
.kd-bg__dot--1 { width:200px; height:200px; top:-60px; left:55%; background:radial-gradient(circle,rgba(56,189,248,.1),transparent 70%); }
.kd-bg__dot--2 { width:260px; height:260px; bottom:8%; left:-90px; background:radial-gradient(circle,rgba(251,191,36,.1),transparent 70%); animation-delay:2s; }
.kd-bg__dot--3 { width:180px; height:180px; top:38%; right:-50px; background:radial-gradient(circle,rgba(52,211,153,.1),transparent 70%); animation-delay:4s; }

/* Hero */
.kd-hero {
    position:relative; z-index:1;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px 22px;
    padding:30px 32px; border-radius:var(--k-rl);
    background:
        radial-gradient(circle at 95% 5%,  rgba(251,191,36,.25) 0%, transparent 45%),
        radial-gradient(circle at 5%  90%, rgba(56,189,248,.2) 0%, transparent 45%),
        linear-gradient(135deg,#fff 0%,#f0f9ff 100%);
    border:2.5px solid rgba(56,189,248,.2);
    box-shadow:0 16px 52px rgba(56,189,248,.16);
    overflow:hidden; animation:kFadeUp .4s ease both;
}
.kd-hero::before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.7),transparent 55%); pointer-events:none; }

.kd-hero__mascot { position:relative; width:108px; height:108px; display:grid; place-items:center; grid-row:1/3; }
.kd-hero__mascot-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(56,189,248,.3); animation:kRing 2.8s ease-out infinite; }
.kd-hero__mascot-ring--2 { inset:-14px; border-color:rgba(251,191,36,.25); animation-delay:.6s; }
.kd-hero__mascot-ring--3 { inset:-28px; border-color:rgba(52,211,153,.2); animation-delay:1.2s; }
.kd-hero__mascot-emoji { font-size:3.6rem; animation:kFloat 4.5s ease-in-out infinite; filter:drop-shadow(0 10px 22px rgba(30,41,59,.15)); position:relative; z-index:1; }

.kd-hero__copy { display:grid; gap:9px; }
.kd-hero__greeting { font-size:.82rem; font-weight:800; color:#0ea5e9; text-transform:uppercase; letter-spacing:.09em; margin:0; }
.kd-hero__name { font-size:clamp(1.7rem,3.5vw,2.4rem); font-family:var(--font-heading); font-weight:900; color:#0f172a; margin:0; line-height:1.05; }
.kd-hero__subtitle { font-size:.9rem; color:#64748b; margin:0; }
.kd-hero__level {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 18px; border-radius:999px; text-decoration:none; max-width:fit-content;
    background:rgba(56,189,248,.1); border:1.5px solid rgba(56,189,248,.22);
    transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.kd-hero__level:hover { background:rgba(56,189,248,.18); transform:scale(1.05); }
.kd-hero__level-text { font-size:.82rem; font-weight:800; color:#0f172a; }
.kd-hero__level-text strong { color:#0ea5e9; margin-right:4px; }
.kd-hero__level-arrow { font-size:1.1rem; color:#38bdf8; }
.kd-hero__stars { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.kd-hero__star { font-size:1.35rem; transition:transform .2s; }
.kd-hero__star--on { animation:kStar 3s ease-in-out infinite; filter:drop-shadow(0 2px 6px rgba(251,191,36,.6)); }
.kd-hero__star:not(.kd-hero__star--on) { opacity:.25; }
.kd-hero__stars-label { font-size:.75rem; font-weight:700; color:#64748b; margin-left:6px; }

/* Bubbles */
.kd-hero__bubbles { display:flex; flex-direction:column; gap:10px; grid-row:1/3; }
.kd-bubble { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:76px; height:76px; border-radius:24px; border:2px solid transparent; transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.kd-bubble:hover { transform:scale(1.12) rotate(-5deg); }
.kd-bubble--fire { background:linear-gradient(135deg,#fff4e6,#fff); border-color:rgba(249,115,22,.25); box-shadow:0 8px 24px rgba(249,115,22,.18); }
.kd-bubble--star { background:linear-gradient(135deg,#fefce8,#fff); border-color:rgba(251,191,36,.28); box-shadow:0 8px 24px rgba(251,191,36,.18); }
.kd-bubble--gem  { background:linear-gradient(135deg,#eff6ff,#fff); border-color:rgba(56,189,248,.22); box-shadow:0 8px 24px rgba(56,189,248,.14); }
.kd-bubble__icon { font-size:1.5rem; line-height:1; }
.kd-bubble__num  { font-size:1.15rem; font-weight:900; font-family:var(--font-heading); color:#0f172a; line-height:1; }
.kd-bubble__lbl  { font-size:.6rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }

.kd-hero__audio {
    position:absolute; top:14px; right:14px;
    width:38px; height:38px; border-radius:12px;
    background:rgba(56,189,248,.1); border:1.5px solid rgba(56,189,248,.2);
    font-size:1rem; cursor:pointer; transition:all .18s;
}
.kd-hero__audio:hover { transform:scale(1.12); background:rgba(56,189,248,.2); }

/* Menu tiles */
.kd-menu { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; animation:kFadeUp .4s .1s ease both; }
.kd-tile {
    position:relative; border-radius:32px; padding:22px 20px 20px;
    display:flex; flex-direction:column; gap:12px; text-decoration:none;
    overflow:hidden; min-height:210px;
    border:2.5px solid rgba(255,255,255,.2);
    box-shadow:0 12px 36px rgba(30,41,59,.14);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.kd-tile:hover { transform:translateY(-8px) scale(1.03); }
.kd-tile:active { transform:scale(.97); }

.kd-tile__stars { position:absolute; top:12px; right:12px; display:flex; gap:3px; font-size:.9rem; opacity:.65; pointer-events:none; }
.kd-tile__stars span:nth-child(1) { animation:kStar 2.5s 0s ease-in-out infinite; }
.kd-tile__stars span:nth-child(2) { animation:kStar 2.5s .5s ease-in-out infinite; }
.kd-tile__stars span:nth-child(3) { animation:kStar 2.5s 1s ease-in-out infinite; }

.kd-tile__emoji { font-size:3.2rem; line-height:1; animation:kBounce 4s ease-in-out infinite; filter:drop-shadow(0 8px 16px rgba(30,41,59,.18)); }
.kd-tile:hover .kd-tile__emoji { animation:kWiggle .4s ease; }
.kd-tile__title { font-size:1.2rem; font-family:var(--font-heading); font-weight:900; margin:0; line-height:1.1; }
.kd-tile__desc  { font-size:.8rem; margin:0; opacity:.82; line-height:1.4; }
.kd-tile__progress { display:flex; align-items:center; gap:8px; }
.kd-tile__bar { flex:1; height:9px; border-radius:999px; background:rgba(255,255,255,.3); overflow:hidden; }
.kd-tile__fill { height:100%; border-radius:inherit; background:rgba(255,255,255,.8); transition:width 1.2s cubic-bezier(.34,1.56,.64,1); }
.kd-tile__pct  { font-size:.75rem; font-weight:900; opacity:.85; }
.kd-tile__tags { display:flex; flex-wrap:wrap; gap:6px; }
.kd-tile__tags span { padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:800; background:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.kd-tile__btn {
    display:inline-block; padding:10px 20px; border-radius:999px; max-width:fit-content;
    background:rgba(255,255,255,.92); font-size:.88rem; font-weight:900;
    font-family:var(--font-heading); box-shadow:0 6px 18px rgba(30,41,59,.18);
    transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.kd-tile:hover .kd-tile__btn { background:#fff; transform:scale(1.06); }
.kd-tile__badge { position:absolute; top:14px; left:14px; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:900; background:rgba(255,255,255,.3); backdrop-filter:blur(6px); letter-spacing:.04em; }

/* Tile color themes */
.kd-tile--learn    { background:linear-gradient(145deg,#38bdf8,#0284c7); color:#fff; box-shadow:0 14px 40px rgba(2,132,199,.38); }
.kd-tile--practice { background:linear-gradient(145deg,#f87171,#dc2626); color:#fff; box-shadow:0 14px 40px rgba(220,38,38,.32); }
.kd-tile--library  { background:linear-gradient(145deg,#34d399,#059669); color:#fff; box-shadow:0 14px 40px rgba(5,150,105,.32); }
.kd-tile--awards   { background:linear-gradient(145deg,#fbbf24,#d97706); color:#451a03; box-shadow:0 14px 40px rgba(217,119,6,.35); }
.kd-tile--awards .kd-tile__btn { color:#451a03; }

/* Mission */
.kd-mission {
    position:relative; z-index:1; display:flex; align-items:center; gap:14px;
    padding:18px 22px; border-radius:24px;
    background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(167,139,250,.05));
    border:2px solid rgba(167,139,250,.22);
    box-shadow:0 8px 24px rgba(167,139,250,.12);
    animation:kFadeUp .4s .2s ease both;
}
.kd-mission--done { background:linear-gradient(135deg,rgba(52,211,153,.1),rgba(52,211,153,.05)); border-color:rgba(52,211,153,.25); }
.kd-mission__icon { font-size:2.2rem; animation:kBounce 3.5s ease-in-out infinite; }
.kd-mission__copy { flex:1; }
.kd-mission__copy strong { display:block; font-size:.92rem; font-weight:900; color:#0f172a; }
.kd-mission__copy span   { font-size:.8rem; color:#64748b; }
.kd-mission__btn {
    padding:11px 22px; border-radius:16px; text-decoration:none;
    background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff;
    font-size:.88rem; font-weight:900; font-family:var(--font-heading);
    box-shadow:0 8px 22px rgba(124,58,237,.32); white-space:nowrap;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kd-mission__btn:hover { transform:scale(1.07) translateY(-2px); }
.kd-adult { position:relative; z-index:1; opacity:.6; font-size:.78rem; }
.kd-adult:hover { opacity:1; }

/* Dark mode KD */
html[data-theme="dark"] .kd-hero { background:linear-gradient(135deg,#0f2035,#0d1e30) !important; }
html[data-theme="dark"] .kd-hero__name { color:#e2f3ff !important; }
html[data-theme="dark"] .kd-bubble--fire,.kd-bubble--star,.kd-bubble--gem { background:rgba(255,255,255,.07) !important; }
html[data-theme="dark"] .kd-bubble__num { color:#e2f3ff !important; }
html[data-theme="dark"] .kd-mission__copy strong { color:#e2f3ff !important; }

/* Responsive KD */
@media(max-width:640px) {
    .kd-hero { grid-template-columns:auto 1fr; }
    .kd-hero__mascot { width:84px; height:84px; grid-row:1; }
    .kd-hero__bubbles { flex-direction:row; grid-column:1/-1; justify-content:center; }
    .kd-bubble { width:68px; height:68px; }
    .kd-menu { gap:10px; }
    .kd-tile { min-height:180px; padding:18px 16px; }
    .kd-tile__emoji { font-size:2.6rem; }
}

/* ══════════════════════════════════════════════════════════════
   21. KID-MODE-SHELL OVERRIDES (reset padding for new layout)
   ══════════════════════════════════════════════════════════════ */
.kid-mode-shell {
    padding: 0 !important;
    gap: 0 !important;
}
.kid-mode-shell__main {
    padding: 16px 22px 108px !important;
    display: grid !important;
    gap: 18px !important;
}

/* ══════════════════════════════════════════════════════════════
   KMS — NEW TOPBAR  (kms-*)
   ══════════════════════════════════════════════════════════════ */
.kms-bar,
.kid-mode-shell .kms-bar {
    position: sticky !important; top: 0 !important; z-index: 200 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(240,249,255,.97) 100%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-bottom: 2px solid rgba(56,189,248,.14) !important;
    box-shadow: 0 4px 28px rgba(30,41,59,.08) !important;
}

/* Brand */
.kms-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; border-radius: 16px;
    padding: 6px 14px 6px 8px;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.kms-brand:hover { background: rgba(56,189,248,.08); transform: scale(1.04); }

.kms-brand__orb {
    width: 40px; height: 40px; border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    font-size: 1.3rem; line-height: 1;
    box-shadow: 0 6px 20px rgba(56,189,248,.42);
    animation: kBounce 4s ease-in-out infinite;
    flex-shrink: 0;
}
.kms-brand__name {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.05rem; font-weight: 900; white-space: nowrap;
    background: linear-gradient(135deg, #0284c7 0%, #7c3aed 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Right side actions */
.kms-bar__right {
    display: flex; align-items: center; gap: 8px;
}

/* Audio button override */
.kms-audio-btn {
    width: 38px !important; height: 38px !important;
    border-radius: 12px !important;
    background: rgba(56,189,248,.1) !important;
    border: 1.5px solid rgba(56,189,248,.22) !important;
    font-size: 1rem !important;
    display: grid !important; place-items: center !important;
    transition: all .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.kms-audio-btn:hover { transform: scale(1.14) !important; background: rgba(56,189,248,.2) !important; }

/* Adult mode entry compact — refined */
.kms-bar__right .adult-mode-entry--compact {
    display: inline-flex; align-items: center !important; gap: 6px !important;
    padding: 7px 14px !important; min-height: 38px !important;
    border-radius: 999px !important;
    background: rgba(167,139,250,.1) !important;
    border: 1.5px solid rgba(167,139,250,.3) !important;
    color: #7c3aed !important; font-size: .78rem !important; font-weight: 800 !important;
    text-decoration: none !important;
    transition: all .22s cubic-bezier(.34,1.56,.64,1) !important;
    box-shadow: 0 4px 14px rgba(124,58,237,.12) !important;
    opacity: .8 !important;
}
.kms-bar__right .adult-mode-entry--compact:hover {
    opacity: 1 !important; transform: scale(1.06) !important;
    background: rgba(167,139,250,.18) !important;
    box-shadow: 0 8px 22px rgba(124,58,237,.2) !important;
}

/* Logout button */
.kms-logout {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; height: 38px; border-radius: 12px;
    background: rgba(248,113,113,.1); border: 1.5px solid rgba(248,113,113,.22);
    color: #dc2626; font-size: .8rem; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    font-family: var(--font-body, sans-serif);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.kms-logout:hover { background: rgba(248,113,113,.2); transform: scale(1.05); }
.kms-logout__lbl { font-size: .78rem; }

/* Dark mode topbar */
html[data-theme="dark"] .kms-bar {
    background: linear-gradient(135deg, rgba(13,21,32,.97) 0%, rgba(15,30,48,.97) 100%) !important;
    border-bottom-color: rgba(56,189,248,.12) !important;
}
html[data-theme="dark"] .kms-bar__right .adult-mode-entry--compact {
    background: rgba(167,139,250,.12) !important;
    color: #c4b5fd !important;
    border-color: rgba(167,139,250,.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   22. KBN — NEW BOTTOM NAV  (kbn-*)
   ══════════════════════════════════════════════════════════════ */
@keyframes kbnPop   { 0%{transform:scale(.8);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes kbnRing  { 0%{transform:scale(1);opacity:.55} 100%{transform:scale(2.4);opacity:0} }
@keyframes kbnSlide { from{transform:translateY(80px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Hide the old bottom nav so only kbn shows */
.kid-bottom-nav { display: none !important; }

.kbn {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: 0 12px 16px;
    display: flex; justify-content: center;
    pointer-events: none;
    animation: kbnSlide .5s .1s cubic-bezier(.34,1.56,.64,1) both;
}

.kbn-island {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 10px 10px 10px;
    border-radius: 36px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1.5px solid rgba(255,255,255,.98);
    box-shadow:
        0 24px 64px rgba(30,41,59,.2),
        0 6px 16px rgba(30,41,59,.1),
        inset 0 1px 0 rgba(255,255,255,.9);
    pointer-events: all;
}

/* Each tab */
.kbn-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 12px 6px;
    border-radius: 28px; border: none; background: transparent;
    text-decoration: none; cursor: pointer;
    color: var(--k-mid, #475569);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), background .2s;
    min-width: 60px; max-width: 80px;
    -webkit-tap-highlight-color: transparent;
}
.kbn-tab:hover {
    background: rgba(30,41,59,.05);
    transform: translateY(-5px);
}
.kbn-tab:active { transform: scale(.94); }

/* Active tab floats up */
.kbn-tab--on {
    background: linear-gradient(180deg, var(--tb, #e0f7ff) 0%, rgba(255,255,255,.7) 100%);
    transform: translateY(-10px);
}
.kbn-tab--on:hover { transform: translateY(-12px); }

/* Pulsing ring on active */
.kbn-tab__ring {
    position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid var(--tc, #38bdf8);
    animation: kbnRing 2.2s ease-out infinite;
    pointer-events: none;
}

/* Orb (icon container) */
.kbn-tab__bubble {
    width: 52px; height: 52px; border-radius: 18px;
    display: grid; place-items: center;
    background: rgba(30,41,59,.04);
    border: 2px solid transparent;
    transition: all .28s cubic-bezier(.34,1.56,.64,1);
    position: relative; overflow: hidden;
}
.kbn-tab__bubble::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, transparent 60%);
    pointer-events: none;
}
.kbn-tab--on .kbn-tab__bubble {
    background: var(--tb, #e0f7ff);
    border-color: var(--tc, #38bdf8);
    box-shadow:
        0 8px 28px rgba(0,0,0,.12),
        0 0 0 4px rgba(255,255,255,.8),
        0 0 0 6px color-mix(in srgb, var(--tc, #38bdf8) 20%, transparent);
    animation: kBounce 3.5s ease-in-out infinite;
}
.kbn-tab:hover .kbn-tab__bubble {
    background: var(--tb, #e0f7ff);
    border-color: var(--tc, #38bdf8);
    transform: scale(1.1) rotate(-5deg);
}
.kbn-tab--on:hover .kbn-tab__bubble { transform: scale(1.06) rotate(-3deg); }

/* Emoji icon */
.kbn-tab__ico {
    font-size: 1.55rem; line-height: 1;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    position: relative; z-index: 1;
    display: block;
}
.kbn-tab--on .kbn-tab__ico { filter: drop-shadow(0 3px 10px rgba(0,0,0,.2)); }
.kbn-tab:hover:not(.kbn-tab--on) .kbn-tab__ico { transform: scale(1.12) rotate(-8deg); animation: kWiggle .4s ease; }

/* Label */
.kbn-tab__lbl {
    font-size: .61rem; font-weight: 800; letter-spacing: .015em;
    text-align: center; white-space: nowrap; line-height: 1;
    color: var(--k-soft, #94a3b8);
    transition: color .2s, font-size .2s;
    max-width: 70px; overflow: hidden; text-overflow: ellipsis;
}
.kbn-tab--on .kbn-tab__lbl {
    color: var(--tc, #38bdf8);
    font-size: .64rem;
    text-shadow: 0 0 12px color-mix(in srgb, var(--tc, #38bdf8) 40%, transparent);
}

/* Help tab accent */
.kbn-tab--help .kbn-tab__lbl { color: #f87171; }
.kbn-tab--help .kbn-tab__bubble { border-color: #fca5a5; }
.kbn-tab--help:hover .kbn-tab__bubble { background: #ffe4e6 !important; border-color: #f87171 !important; }

/* Main content padding to not be hidden under nav */
.kid-mode-shell__main { padding-bottom: 108px !important; }
.student-mode-kid .kid-mode-shell { padding-bottom: 0 !important; }

/* Dark mode nav */
html[data-theme="dark"] .kbn-island {
    background: rgba(13,21,32,.95) !important;
    border-color: rgba(56,189,248,.12) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,.5),
        0 6px 16px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .kbn-tab { color: rgba(148,163,184,.7) !important; }
html[data-theme="dark"] .kbn-tab--on { color: var(--tc, #38bdf8) !important; }
html[data-theme="dark"] .kbn-tab--on .kbn-tab__bubble {
    box-shadow:
        0 8px 28px rgba(0,0,0,.4),
        0 0 0 4px rgba(255,255,255,.04),
        0 0 0 6px color-mix(in srgb, var(--tc, #38bdf8) 25%, transparent) !important;
}
html[data-theme="dark"] .kbn-tab__lbl { color: rgba(100,116,139,.8) !important; }
html[data-theme="dark"] .kbn-tab--on .kbn-tab__lbl { color: var(--tc, #38bdf8) !important; }
html[data-theme="dark"] .kbn-tab:hover { background: rgba(255,255,255,.05) !important; }

/* Responsive */
@media (max-width: 480px) {
    .kbn-island { gap: 2px; padding: 8px 6px; }
    .kbn-tab { padding: 7px 8px 5px; min-width: 50px; }
    .kbn-tab__bubble { width: 44px; height: 44px; border-radius: 14px; }
    .kbn-tab__ico { font-size: 1.3rem; }
    .kbn-tab__lbl { font-size: .56rem; }
    .kbn-tab--on { transform: translateY(-8px); }
}
@media (max-width: 360px) {
    .kbn-tab__lbl { display: none; }
    .kbn-tab { padding: 8px 8px; }
    .kbn-tab__bubble { width: 46px; height: 46px; }
}
@media(max-width:380px) { .kd-menu { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   23. KMS TOPBAR — WRAPPING FIX
   ══════════════════════════════════════════════════════════════ */
.kms-bar__right { flex-wrap: nowrap !important; }
/* Hide the text label inside the audio button — keep only the emoji */
.kms-audio-btn span:not([aria-hidden="true"]) { display: none !important; }
/* Ensure the audio button stays icon-only */
.kms-audio-btn { min-width: 38px !important; }

/* ══════════════════════════════════════════════════════════════
   24. KD2 — STUDENT DASHBOARD v2  (kd2-*)
   ══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes kd2Float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes kd2Ring   { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2);opacity:0} }
@keyframes kd2Shine  { 0%{left:-100%} 100%{left:200%} }
@keyframes kd2Blob   { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:scale(1)} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:scale(1.06)} }
@keyframes kd2Star   { 0%,100%{transform:translateY(0) scale(1);opacity:.7} 50%{transform:translateY(-12px) scale(1.2);opacity:1} }
@keyframes kd2Wiggle2{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes kd2Pulse2 { 0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.4)} 70%{box-shadow:0 0 0 14px rgba(56,189,248,0)} }
@keyframes kd2CTA    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }

/* Outer wrapper */
.kd2 {
    display: grid;
    gap: 22px;
    position: relative;
    padding-bottom: 12px;
}

/* ─── Ambient Background ─── */
.kd2-bg {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.kd2-bg__blob {
    position: absolute; filter: blur(60px);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: kd2Blob 12s ease-in-out infinite;
    will-change: border-radius, transform;
}
.kd2-bg__blob--a {
    width: 340px; height: 340px;
    top: -80px; left: -80px;
    background: radial-gradient(circle, rgba(56,189,248,.18) 0%, transparent 70%);
    animation-delay: 0s;
}
.kd2-bg__blob--b {
    width: 280px; height: 280px;
    top: 30%; right: -60px;
    background: radial-gradient(circle, rgba(167,139,250,.16) 0%, transparent 70%);
    animation-delay: -4s;
}
.kd2-bg__blob--c {
    width: 320px; height: 320px;
    bottom: -60px; left: 30%;
    background: radial-gradient(circle, rgba(52,211,153,.14) 0%, transparent 70%);
    animation-delay: -8s;
}
.kd2-bg__star {
    position: absolute;
    left: var(--x, 50%); top: var(--y, 50%);
    font-size: 1.1rem; line-height: 1;
    animation: kd2Star 5s var(--d, 0s) ease-in-out infinite;
    will-change: transform, opacity;
}

/* ─── HERO CARD ─── */
.kd2-hero {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 20px;
    padding: 28px 28px 28px 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 45%, #0c1a2e 100%);
    box-shadow:
        0 20px 60px rgba(15,23,42,.5),
        0 6px 20px rgba(15,23,42,.3),
        inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}
/* Decorative shine sweep */
.kd2-hero::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    animation: kd2Shine 6s 2s linear infinite;
    pointer-events: none;
}
/* Bottom glow band */
.kd2-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #38bdf8, #a78bfa, #34d399);
    border-radius: 0 0 28px 28px;
}

/* ─── Mascot ─── */
.kd2-hero__mascot {
    position: relative;
    width: 100px; height: 100px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.kd2-mascot__ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(56,189,248,.35);
    animation: kd2Ring 3s linear infinite;
}
.kd2-mascot__ring--1 { animation-delay: 0s; }
.kd2-mascot__ring--2 { animation-delay: -1s; inset: -8px; border-color: rgba(167,139,250,.25); }
.kd2-mascot__ring--3 { animation-delay: -2s; inset: -16px; border-color: rgba(52,211,153,.18); }
.kd2-mascot__glow {
    position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,.28) 0%, transparent 70%);
    animation: kd2Float 4s ease-in-out infinite;
}
.kd2-mascot__face {
    font-size: 3rem; line-height: 1;
    position: relative; z-index: 2;
    filter: drop-shadow(0 4px 18px rgba(56,189,248,.5));
    animation: kd2Float 3.5s ease-in-out infinite;
}

/* ─── Hero Copy ─── */
.kd2-hero__copy {
    min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.kd2-hero__eyebrow {
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(56,189,248,.8);
}
.kd2-hero__greet {
    margin: 0;
    font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.65);
    line-height: 1;
}
.kd2-hero__name {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.7rem; font-weight: 900; line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, #bae6fd 60%, #a5b4fc 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Level pill */
.kd2-level-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(56,189,248,.12);
    border: 1.5px solid rgba(56,189,248,.28);
    text-decoration: none;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    align-self: flex-start;
}
.kd2-level-pill:hover { background: rgba(56,189,248,.22); transform: scale(1.04); }
.kd2-level-pill strong { font-size: .78rem; font-weight: 900; color: #38bdf8; }
.kd2-level-pill span:not(.kd2-level-pill__arr) { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.75); }
.kd2-level-pill__arr { font-size: .9rem; color: rgba(56,189,248,.6); }

/* Stars */
.kd2-hero__stars {
    display: flex; align-items: center; gap: 4px;
}
.kd2-star { font-size: 1.1rem; line-height: 1; }
.kd2-star--on { filter: drop-shadow(0 2px 6px rgba(251,191,36,.6)); animation: kd2Float 3s ease-in-out infinite; }
.kd2-star:nth-child(2) { animation-delay: .3s; }
.kd2-star:nth-child(3) { animation-delay: .6s; }
.kd2-star:nth-child(4) { animation-delay: .9s; }
.kd2-star:nth-child(5) { animation-delay: 1.2s; }
.kd2-stars__lbl {
    font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.5);
    margin-left: 4px;
}

/* Progress track */
.kd2-ptrack {
    height: 8px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden; position: relative;
}
.kd2-ptrack__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8 0%, #a78bfa 60%, #34d399 100%);
    box-shadow: 0 0 16px rgba(56,189,248,.5);
    transition: width .8s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.kd2-ptrack__fill::after {
    content: '';
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(56,189,248,.8);
}
.kd2-ptrack__pct {
    font-size: .68rem; font-weight: 800; color: rgba(255,255,255,.5);
    letter-spacing: .04em;
}

/* CTA button */
.kd2-hero__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px; border-radius: 16px;
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: #fff; font-size: .9rem; font-weight: 900;
    font-family: var(--font-heading, sans-serif);
    text-decoration: none; align-self: flex-start;
    box-shadow: 0 8px 28px rgba(56,189,248,.45), 0 2px 8px rgba(56,189,248,.3);
    animation: kd2CTA 3s ease-in-out infinite;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.kd2-hero__cta:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 36px rgba(56,189,248,.55);
}

/* ─── Stats ─── */
.kd2-hero__stats {
    display: flex; flex-direction: column; gap: 10px;
    align-self: center;
}
.kd2-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 72px; padding: 10px 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kd2-stat:hover { transform: scale(1.08) translateY(-2px); }
.kd2-stat__ico { font-size: 1.3rem; line-height: 1; }
.kd2-stat__num {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.1rem; font-weight: 900; color: #fff;
    line-height: 1;
}
.kd2-stat__lbl { font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: .04em; text-transform: uppercase; }
.kd2-stat--fire { background: rgba(251,146,60,.15); border-color: rgba(251,146,60,.25); }
.kd2-stat--fire .kd2-stat__num { color: #fb923c; }
.kd2-stat--star { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.22); }
.kd2-stat--star .kd2-stat__num { color: #fbbf24; }
.kd2-stat--gem  { background: rgba(167,139,250,.15); border-color: rgba(167,139,250,.25); }
.kd2-stat--gem  .kd2-stat__num { color: #a78bfa; }

/* Audio button */
.kd2-hero__audio {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.14);
    font-size: 1rem; cursor: pointer;
    display: grid; place-items: center;
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
    color: rgba(255,255,255,.6);
}
.kd2-hero__audio:hover { background: rgba(56,189,248,.18); transform: scale(1.12); }

/* ─── GRID TILES ─── */
.kd2-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.kd2-tile {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px 16px;
    border-radius: 24px;
    text-decoration: none; overflow: hidden;
    background: #fff;
    border: 2px solid rgba(0,0,0,.05);
    box-shadow: 0 8px 28px rgba(30,41,59,.1), 0 2px 6px rgba(30,41,59,.06);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    -webkit-tap-highlight-color: transparent;
}
.kd2-tile::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: var(--kd2-tile-grad, linear-gradient(135deg, rgba(56,189,248,.06) 0%, rgba(56,189,248,.02) 100%));
    transition: opacity .25s;
    opacity: 1;
}
.kd2-tile:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(30,41,59,.16), 0 6px 16px rgba(30,41,59,.1);
}
.kd2-tile:active { transform: scale(.97); }

/* Tile sparkles */
.kd2-tile__sparkles {
    position: absolute; top: 10px; right: 12px;
    display: flex; gap: 3px;
    font-size: .85rem; line-height: 1;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.kd2-tile:hover .kd2-tile__sparkles { opacity: 1; }
.kd2-tile__sparkles span:nth-child(1) { animation: kd2Float 2s ease-in-out infinite; }
.kd2-tile__sparkles span:nth-child(2) { animation: kd2Float 2s .3s ease-in-out infinite; }
.kd2-tile__sparkles span:nth-child(3) { animation: kd2Float 2s .6s ease-in-out infinite; }

/* Level badge */
.kd2-tile__badge {
    position: absolute; top: 14px; right: 14px;
    font-size: .62rem; font-weight: 900; padding: 3px 8px;
    border-radius: 999px;
    background: var(--kd2-tile-accent, #38bdf8);
    color: #fff; letter-spacing: .04em;
}

/* Icon wrap */
.kd2-tile__icon-wrap {
    width: 58px; height: 58px; border-radius: 18px;
    display: grid; place-items: center;
    background: var(--kd2-tile-bg, rgba(56,189,248,.1));
    border: 2px solid var(--kd2-tile-border, rgba(56,189,248,.2));
    box-shadow: 0 6px 20px var(--kd2-tile-shadow, rgba(56,189,248,.2));
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
    position: relative; z-index: 1;
}
.kd2-tile:hover .kd2-tile__icon-wrap { transform: scale(1.1) rotate(-6deg); }
.kd2-tile__ico { font-size: 1.8rem; line-height: 1; }

/* Body */
.kd2-tile__body { position: relative; z-index: 1; }
.kd2-tile__title {
    margin: 0 0 4px;
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem; font-weight: 900;
    color: #0f172a;
}
.kd2-tile__desc {
    margin: 0;
    font-size: .74rem; font-weight: 500; color: #64748b; line-height: 1.3;
}

/* Progress foot (for learn tile) */
.kd2-tile__foot {
    display: flex; align-items: center; gap: 8px;
    position: relative; z-index: 1;
}
.kd2-tile__bar {
    flex: 1; height: 6px; border-radius: 999px;
    background: rgba(30,41,59,.08); overflow: hidden;
}
.kd2-tile__fill {
    height: 100%; border-radius: 999px;
    background: var(--kd2-tile-accent, #38bdf8);
    box-shadow: 0 0 10px var(--kd2-tile-accent, #38bdf8);
    transition: width .8s cubic-bezier(.34,1.56,.64,1);
}
.kd2-tile__pct { font-size: .66rem; font-weight: 900; color: var(--kd2-tile-accent, #38bdf8); white-space: nowrap; }

/* Tags */
.kd2-tile__tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    position: relative; z-index: 1;
}
.kd2-tile__tags span {
    font-size: .62rem; font-weight: 800; padding: 3px 8px;
    border-radius: 999px;
    background: var(--kd2-tile-bg, rgba(56,189,248,.1));
    color: var(--kd2-tile-accent, #0284c7);
    border: 1px solid var(--kd2-tile-border, rgba(56,189,248,.2));
}

/* CTA arrow */
.kd2-tile__btn {
    align-self: flex-start;
    font-size: .78rem; font-weight: 900;
    color: var(--kd2-tile-accent, #0284c7);
    position: relative; z-index: 1;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.kd2-tile:hover .kd2-tile__btn { transform: translateX(4px); }

/* Per-tile themes */
.kd2-tile--learn {
    --kd2-tile-grad:   linear-gradient(135deg, rgba(56,189,248,.07) 0%, rgba(14,165,233,.03) 100%);
    --kd2-tile-accent: #0284c7;
    --kd2-tile-bg:     rgba(56,189,248,.1);
    --kd2-tile-border: rgba(56,189,248,.22);
    --kd2-tile-shadow: rgba(56,189,248,.22);
}
.kd2-tile--play {
    --kd2-tile-grad:   linear-gradient(135deg, rgba(248,113,113,.07) 0%, rgba(239,68,68,.03) 100%);
    --kd2-tile-accent: #dc2626;
    --kd2-tile-bg:     rgba(248,113,113,.1);
    --kd2-tile-border: rgba(248,113,113,.22);
    --kd2-tile-shadow: rgba(248,113,113,.22);
}
.kd2-tile--read {
    --kd2-tile-grad:   linear-gradient(135deg, rgba(52,211,153,.07) 0%, rgba(16,185,129,.03) 100%);
    --kd2-tile-accent: #059669;
    --kd2-tile-bg:     rgba(52,211,153,.1);
    --kd2-tile-border: rgba(52,211,153,.22);
    --kd2-tile-shadow: rgba(52,211,153,.22);
}
.kd2-tile--award {
    --kd2-tile-grad:   linear-gradient(135deg, rgba(251,191,36,.08) 0%, rgba(245,158,11,.03) 100%);
    --kd2-tile-accent: #d97706;
    --kd2-tile-bg:     rgba(251,191,36,.12);
    --kd2-tile-border: rgba(251,191,36,.25);
    --kd2-tile-shadow: rgba(251,191,36,.22);
}

/* ─── MISSION CARD ─── */
.kd2-mission {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fdf4ff, #f5f3ff);
    border: 2px solid rgba(167,139,250,.22);
    box-shadow: 0 6px 24px rgba(167,139,250,.14);
    text-decoration: none;
}
.kd2-mission__ico {
    font-size: 1.8rem; line-height: 1; flex-shrink: 0;
    animation: kd2Float 3s ease-in-out infinite;
}
.kd2-mission__copy { flex: 1; min-width: 0; }
.kd2-mission__copy strong { display: block; font-size: .88rem; font-weight: 900; color: #0f172a; }
.kd2-mission__copy span  { font-size: .76rem; font-weight: 500; color: #64748b; }
.kd2-mission__btn {
    padding: 9px 18px; border-radius: 14px;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: #fff; font-size: .8rem; font-weight: 900;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(124,58,237,.32);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kd2-mission__btn:hover { transform: scale(1.06) translateY(-2px); }

.kd2-mission--done {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: rgba(52,211,153,.25);
    box-shadow: 0 6px 24px rgba(52,211,153,.14);
}

/* Adult entry */
.kd2-adult {
    position: relative; z-index: 1;
    text-align: center; opacity: .55;
    transition: opacity .2s;
}
.kd2-adult:hover { opacity: 1; }

/* ─── Dark mode ─── */
html[data-theme="dark"] .kd2-tile {
    background: rgba(15,23,42,.85);
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .kd2-tile__title { color: #e2f3ff; }
html[data-theme="dark"] .kd2-tile__desc  { color: #94a3b8; }
html[data-theme="dark"] .kd2-mission {
    background: linear-gradient(135deg, rgba(88,28,135,.2), rgba(109,40,217,.12));
    border-color: rgba(167,139,250,.2);
}
html[data-theme="dark"] .kd2-mission__copy strong { color: #e2f3ff; }
html[data-theme="dark"] .kd2-mission__copy span   { color: #94a3b8; }
html[data-theme="dark"] .kd2-mission--done {
    background: linear-gradient(135deg, rgba(5,150,105,.15), rgba(16,185,129,.08));
    border-color: rgba(52,211,153,.2);
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .kd2-hero {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        padding: 20px 16px 20px 16px;
        gap: 14px;
    }
    .kd2-hero__stats {
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: center;
        gap: 8px;
    }
    .kd2-stat { flex-direction: row; width: auto; padding: 8px 12px; }
    .kd2-hero__name { font-size: 1.35rem; }
}
@media (max-width: 480px) {
    .kd2-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kd2-tile { padding: 16px 14px 12px; border-radius: 20px; }
    .kd2-tile__icon-wrap { width: 48px; height: 48px; border-radius: 14px; }
    .kd2-tile__ico { font-size: 1.4rem; }
    .kd2-tile__title { font-size: .88rem; }
    .kd2-tile__desc  { font-size: .68rem; }
    .kd2-hero__mascot { width: 72px; height: 72px; }
    .kd2-mascot__face { font-size: 2.2rem; }
}
@media (max-width: 360px) {
    .kd2-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   25. PAGE TRANSITIONS (View Transitions API)
   ══════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) {
    animation: kFadeOut .25s ease forwards;
}
::view-transition-new(root) {
    animation: kSlideUp .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes kFadeOut  { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-12px)} }
@keyframes kSlideUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════════
   26. KLD — LEVEL DETAIL v2 (kld-card, kld-list fixes)
   ══════════════════════════════════════════════════════════════ */

/* Fix hero decorative absolute children */
.kld-hero__bg {
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--lv-color,#38bdf8) 18%, transparent) 0%, transparent 55%),
                radial-gradient(circle at 10% 85%, color-mix(in srgb, var(--lv-color,#38bdf8) 10%, transparent) 0%, transparent 45%);
    pointer-events: none;
}
.kld-hero__rings {
    position: absolute; inset: 0; pointer-events: none;
}
.kld-hero__ring {
    position: absolute; border-radius: 50%;
    border: 2px solid var(--lv-color, #38bdf8);
    animation: kRing 3s ease-out infinite;
}
.kld-hero__ring--a { width: 120px; height: 120px; top: -30px; right: -30px; opacity: .2; }
.kld-hero__ring--b { width: 80px; height: 80px; bottom: -20px; left: -20px; opacity: .15; animation-delay: -1.5s; }

/* Icon wrap (inside hero grid) */
.kld-hero__icon-wrap {
    width: 90px; height: 90px; border-radius: 28px;
    background: var(--lv-bg, rgba(56,189,248,.12));
    border: 2.5px solid var(--lv-color, #38bdf8);
    display: grid; place-items: center;
    box-shadow: 0 12px 36px color-mix(in srgb, var(--lv-color,#38bdf8) 30%, transparent);
    flex-shrink: 0; position: relative; z-index: 1;
}
.kld-hero__icon { font-size: 3.2rem; animation: kFloat 5s ease-in-out infinite; }

/* Hero copy extras */
.kld-hero__progress {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.kld-hero__progress-label { font-size: .75rem; font-weight: 800; color: #64748b; white-space: nowrap; }
.kld-hero__bar {
    flex: 1; height: 8px; border-radius: 999px;
    background: rgba(30,41,59,.08); overflow: hidden;
}
.kld-hero__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--lv-color,#38bdf8), color-mix(in srgb, var(--lv-color,#38bdf8) 60%, #a78bfa));
    box-shadow: 0 0 12px color-mix(in srgb, var(--lv-color,#38bdf8) 50%, transparent);
    transition: width 1s cubic-bezier(.34,1.56,.64,1);
}
.kld-hero__pct { font-size: .75rem; font-weight: 900; color: var(--lv-color,#38bdf8); white-space: nowrap; }

/* Hero CTA button */
.kld-hero__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border-radius: 18px;
    font-size: .95rem; font-weight: 900; font-family: var(--font-heading, sans-serif);
    color: #fff; background: var(--lv-color, #38bdf8);
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--lv-color,#38bdf8) 45%, transparent);
    position: relative; overflow: hidden; z-index: 1;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.kld-hero__cta::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); animation: kShine 3.5s 1s ease infinite;
}
.kld-hero__cta:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 40px color-mix(in srgb, var(--lv-color,#38bdf8) 55%, transparent); }

/* Lesson list container */
.kld-list { display: grid; gap: 12px; }

/* Lesson card */
.kld-card {
    display: grid; grid-template-columns: 44px 44px 1fr auto;
    align-items: center; gap: 14px;
    padding: 16px 20px; border-radius: 22px;
    background: #fff; border: 2px solid rgba(30,41,59,.06);
    box-shadow: 0 4px 16px rgba(30,41,59,.08);
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
    position: relative; overflow: hidden;
    animation: kFadeUp .4s ease both;
}
.kld-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lv-color,#38bdf8) 5%, transparent), transparent 60%);
    opacity: 0; transition: opacity .25s;
}
.kld-card:hover { transform: translateX(8px) scale(1.01); box-shadow: 0 12px 32px color-mix(in srgb, var(--lv-color,#38bdf8) 15%, transparent); border-color: var(--lv-color,#38bdf8); }
.kld-card:hover::before { opacity: 1; }
.kld-card--next {
    border-color: var(--lv-color, #38bdf8) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lv-color,#38bdf8) 7%, transparent), #fff) !important;
    animation: kPulse 2.8s ease-in-out infinite, kFadeUp .4s ease both;
    --glow: var(--lv-color, #38bdf8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-color,#38bdf8) 22%, transparent), 0 10px 28px rgba(30,41,59,.1) !important;
}
.kld-card--mastered { background: linear-gradient(135deg, rgba(52,211,153,.05), #fff); }
.kld-card--done     { background: linear-gradient(135deg, rgba(56,189,248,.04), #fff); }

/* Stagger */
.kld-card:nth-child(1){animation-delay:.05s} .kld-card:nth-child(2){animation-delay:.1s}
.kld-card:nth-child(3){animation-delay:.15s} .kld-card:nth-child(4){animation-delay:.2s}
.kld-card:nth-child(5){animation-delay:.25s} .kld-card:nth-child(6){animation-delay:.3s}

/* Number bubble */
.kld-card__num {
    width: 40px; height: 40px; border-radius: 14px;
    background: rgba(30,41,59,.07); display: grid; place-items: center;
    font-size: .88rem; font-weight: 900; color: #64748b; flex-shrink: 0;
    transition: background .2s, color .2s;
}
.kld-card--next .kld-card__num  { background: var(--lv-color,#38bdf8); color: #fff; }
.kld-card--mastered .kld-card__num { background: rgba(52,211,153,.18); color: #065f46; }
.kld-card--done     .kld-card__num { background: rgba(56,189,248,.15); color: #0369a1; }

/* Status icon */
.kld-card__status-icon {
    font-size: 1.6rem; transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kld-card:hover .kld-card__status-icon { transform: scale(1.2) rotate(-8deg); }

/* Body */
.kld-card__body { display: grid; gap: 5px; min-width: 0; }
.kld-card__title { font-size: .96rem; font-weight: 900; color: #0f172a; margin: 0; }
.kld-card__goal  { font-size: .78rem; color: #64748b; margin: 0; }
.kld-card__next-hint { font-size: .78rem; font-weight: 800; color: var(--lv-color,#38bdf8); margin: 0; }

/* Meta row */
.kld-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kld-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .68rem; font-weight: 900; letter-spacing: .03em;
}
.kld-badge--mastered { background: rgba(52,211,153,.18); color: #065f46; }
.kld-badge--done     { background: rgba(56,189,248,.15); color: #0369a1; }
.kld-badge--active   { background: rgba(251,191,36,.2);  color: #92400e; }
.kld-badge--new      { background: rgba(167,139,250,.14); color: #5b21b6; }
.kld-pill {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: .67rem; font-weight: 700; background: rgba(30,41,59,.07); color: #64748b;
}

/* Stars */
.kld-card__stars { display: flex; align-items: center; gap: 3px; }
.kld-star--on  { font-size: .95rem; filter: drop-shadow(0 2px 6px rgba(251,191,36,.5)); }
.kld-star--off { font-size: .95rem; opacity: .2; filter: grayscale(1); }
.kld-card__score { font-size: .72rem; font-weight: 900; color: var(--lv-color,#38bdf8); margin-left: 4px; }

/* Score bar */
.kld-card__bar {
    height: 6px; border-radius: 999px; background: rgba(30,41,59,.07);
    overflow: hidden; margin-top: 4px;
}
.kld-card__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f97316);
    box-shadow: 0 0 8px rgba(251,191,36,.4);
}

/* CTA button */
.kld-card__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border-radius: 14px;
    font-size: .85rem; font-weight: 900; font-family: var(--font-heading, sans-serif);
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.kld-card__btn--primary {
    background: var(--lv-color,#38bdf8); color: #fff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--lv-color,#38bdf8) 40%, transparent);
}
.kld-card__btn--primary:hover { transform: scale(1.08) translateY(-2px); }
.kld-card__btn--sec { background: rgba(30,41,59,.08); color: #475569; border: 2px solid rgba(30,41,59,.1); }
.kld-card__btn--sec:hover { background: rgba(30,41,59,.14); transform: scale(1.05); }

/* KLD card responsive */
@media (max-width: 640px) {
    .kld-card { grid-template-columns: 36px 36px 1fr; }
    .kld-card__btn { grid-column: 1 / -1; }
    .kld-hero { grid-template-columns: auto 1fr; }
    .kld-hero__cta { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════
   27. KTP — TOOL PAGES (syllabary, sounds, word-builder)
   ══════════════════════════════════════════════════════════════ */
@keyframes ktpFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
@keyframes ktpSpin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ktpPop   { 0%{transform:scale(.7);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

.tool-page { display: flex; flex-direction: column; gap: 0; }
.ktp { position: relative; }

/* ─── Tool Header ─── */
.ktp-head {
    position: relative; overflow: hidden;
    padding: 28px 28px 24px;
    display: flex; align-items: center; gap: 24px;
    border-radius: 28px; margin-bottom: 18px;
}
.ktp-head--teal {
    background: linear-gradient(135deg, #0d4f5c 0%, #0a7a8a 50%, #0ea5a0 100%);
    box-shadow: 0 20px 60px rgba(14,165,160,.35);
}
.ktp-head--green {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #059669 100%);
    box-shadow: 0 20px 60px rgba(5,150,105,.35);
}
.ktp-head--violet {
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #7c3aed 100%);
    box-shadow: 0 20px 60px rgba(124,58,237,.35);
}
.ktp-head--purple {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #6366f1 100%);
    box-shadow: 0 20px 60px rgba(99,102,241,.35);
}
.ktp-head--orange {
    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 50%, #ea580c 100%);
    box-shadow: 0 20px 60px rgba(234,88,12,.35);
}

/* Decorative bubbles */
.ktp-head__deco {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.ktp-head__bubble {
    position: absolute; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 900; color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.15);
    animation: ktpFloat 4s ease-in-out infinite;
}
.ktp-head__bubble--1 { width: 64px; height: 64px; top: -8px; left: -8px; animation-delay: 0s; }
.ktp-head__bubble--2 { width: 48px; height: 48px; top: 10px; left: 70px; animation-delay: -.8s; }
.ktp-head__bubble--3 { width: 56px; height: 56px; bottom: -10px; right: 80px; animation-delay: -1.6s; }
.ktp-head__bubble--4 { width: 40px; height: 40px; bottom: 8px; right: 20px; animation-delay: -2.4s; }
.ktp-head__spark {
    position: absolute; font-size: 1.3rem;
    animation: ktpFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.ktp-head__spark--1 { top: 15%; right: 8%;  animation-delay: 0s; }
.ktp-head__spark--2 { top: 60%; right: 18%; animation-delay: -.9s; }
.ktp-head__spark--3 { top: 30%; left: 42%;  animation-delay: -1.8s; }

/* Center content */
.ktp-head__center {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    position: relative; z-index: 1; flex: 1;
}
.ktp-head__big-icon {
    font-size: 3.5rem; line-height: 1;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.3));
    animation: ktpFloat 4s ease-in-out infinite;
    flex-shrink: 0;
}
.ktp-head__h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900;
    font-family: var(--font-heading, sans-serif); color: #fff;
    margin: 0; line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.ktp-head__p {
    font-size: .88rem; color: rgba(255,255,255,.8); margin: 0;
}
.ktp-head__audio {
    width: 48px; height: 48px; border-radius: 16px;
    background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.25);
    font-size: 1.3rem; cursor: pointer; color: #fff;
    display: grid; place-items: center;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0; position: relative; z-index: 1;
}
.ktp-head__audio:hover { background: rgba(255,255,255,.28); transform: scale(1.12); }

/* ─── Layout ─── */
.tool-layout {
    display: grid; grid-template-columns: 1fr 300px; gap: 18px;
}
.ktp-panel, .tool-panel {
    background: #fff; border-radius: 24px;
    border: 2px solid rgba(30,41,59,.07);
    box-shadow: 0 6px 24px rgba(30,41,59,.09);
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
    animation: kFadeUp .4s ease both;
}
.tool-panel--detail { gap: 16px; }

/* ─── Tabs ─── */
.ktp-tabs-scroll { overflow-x: auto; padding-bottom: 4px; }
.ktp-tabs-scroll::-webkit-scrollbar { height: 4px; }
.ktp-tabs-scroll::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 2px; }

/* ─── Toolbar ─── */
.ktp-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 12px 14px; border-radius: 16px;
    background: rgba(30,41,59,.04); border: 1.5px solid rgba(30,41,59,.07);
}
.ktp-toolbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ktp-label { font-size: .75rem; font-weight: 800; color: #64748b; white-space: nowrap; }

/* Speed pills */
.ktp-speeds { display: flex; gap: 4px; }
.ktp-speed {
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(30,41,59,.07); border: 1.5px solid rgba(30,41,59,.1);
    font-size: 1rem; cursor: pointer; display: grid; place-items: center;
    transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.ktp-speed:hover { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.3); transform: scale(1.1); }
.ktp-speed.is-active { background: #38bdf8; border-color: #38bdf8; color: #fff; box-shadow: 0 4px 14px rgba(56,189,248,.4); }

/* Toggle */
.ktp-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .8rem; font-weight: 700; color: #475569; }
.syl-toggle-input { display: none; }
.syl-toggle-track {
    width: 44px; height: 24px; border-radius: 12px;
    background: rgba(30,41,59,.12); position: relative;
    transition: background .2s;
}
.syl-toggle-input:checked + .syl-toggle-track { background: #38bdf8; }
.syl-toggle-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    position: absolute; top: 3px; left: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.syl-toggle-input:checked + .syl-toggle-track .syl-toggle-thumb { transform: translateX(20px); }

/* Practice btn */
.ktp-practice-btn {
    padding: 8px 16px; border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff;
    font-size: .82rem; font-weight: 900; font-family: var(--font-heading, sans-serif);
    box-shadow: 0 4px 14px rgba(124,58,237,.3);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.ktp-practice-btn:hover { transform: scale(1.06) translateY(-2px); box-shadow: 0 8px 22px rgba(124,58,237,.4); }

/* ─── Big Controls ─── */
.ktp-bigctrls { display: flex; flex-direction: column; gap: 10px; }
.ktp-bigctrls__row { display: flex; gap: 8px; }
.ktp-bigctrl {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 14px 8px; border-radius: 18px;
    background: rgba(30,41,59,.06); border: 2px solid rgba(30,41,59,.09);
    font-size: 1.2rem; cursor: pointer;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    font-family: var(--font-heading, sans-serif);
}
.ktp-bigctrl small { font-size: .6rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.ktp-bigctrl:hover { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.3); transform: translateY(-3px) scale(1.04); }
.ktp-bigctrl--replay { background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(56,189,248,.06)); border-color: rgba(56,189,248,.25); }
.ktp-bigctrl--replay:hover { background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(56,189,248,.12)); box-shadow: 0 8px 24px rgba(56,189,248,.25); }
.ktp-bigctrl--stop  { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.2); }
.ktp-bigctrl--stop:hover  { background: rgba(248,113,113,.18); border-color: #f87171; }
.ktp-bigctrl--all   { background: linear-gradient(135deg, rgba(52,211,153,.1), rgba(52,211,153,.05)); border-color: rgba(52,211,153,.25); }

/* ─── Keyboard hints ─── */
.ktp-kbd { display: flex; flex-wrap: wrap; gap: 6px; }
.ktp-key { font-size: .68rem; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.ktp-key kbd {
    background: rgba(30,41,59,.08); border: 1.5px solid rgba(30,41,59,.15);
    border-radius: 6px; padding: 2px 6px; font-size: .65rem; font-family: monospace;
}

/* ─── Select ─── */
.ktp-select {
    padding: 7px 12px; border-radius: 12px;
    background: rgba(30,41,59,.07); border: 1.5px solid rgba(30,41,59,.12);
    font-size: .8rem; font-weight: 700; color: #475569;
    cursor: pointer; outline: none;
    transition: border-color .18s;
}
.ktp-select:focus { border-color: #38bdf8; }

/* ─── Sequence bar ─── */
.syl-sequence-bar {
    height: 8px; border-radius: 999px; background: rgba(30,41,59,.08); overflow: hidden;
}
.syl-sequence-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #a78bfa);
    box-shadow: 0 0 10px rgba(56,189,248,.4);
    transition: width .3s ease;
}
.syl-sequence-label { font-size: .72rem; font-weight: 800; color: #64748b; }

/* ─── Quiz panel ─── */
.syl-quiz-panel {
    padding: 16px; border-radius: 18px;
    background: linear-gradient(135deg, #f5f3ff, #fdf4ff);
    border: 2px solid rgba(167,139,250,.2);
}
.syl-quiz-prompt { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.syl-quiz-prompt p { font-size: .88rem; color: #475569; font-weight: 600; }

/* KTP responsive */
@media (max-width: 768px) {
    .tool-layout { grid-template-columns: 1fr; }
    .ktp-head { padding: 20px 16px; }
    .ktp-head__h2 { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .ktp-bigctrls__row { flex-wrap: wrap; }
    .ktp-bigctrl { min-width: calc(33% - 6px); }
}

/* ══════════════════════════════════════════════════════════════
   28. TP — SYLLABLE BUILDER
   ══════════════════════════════════════════════════════════════ */
.tp-header {
    display: flex; align-items: center; gap: 20px;
    padding: 24px 26px; border-radius: 24px; margin-bottom: 18px;
    background: linear-gradient(135deg, #1c1917 0%, #44403c 60%, #78716c 100%);
    box-shadow: 0 16px 48px rgba(28,25,23,.4);
    position: relative; overflow: hidden;
}
.tp-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 85% 50%, rgba(251,191,36,.15) 0%, transparent 50%);
    pointer-events: none;
}
.tp-header__icon {
    font-size: 3rem; animation: ktpFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
    flex-shrink: 0; position: relative; z-index: 1;
}
.tp-header__copy { display: grid; gap: 4px; position: relative; z-index: 1; flex: 1; }
.tp-header__eyebrow { font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
.tp-header__h2 { font-size: 1.6rem; font-weight: 900; font-family: var(--font-heading, sans-serif); color: #fff; margin: 0; }
.tp-header__p  { font-size: .84rem; color: rgba(255,255,255,.7); margin: 0; }
.tp-header__audio {
    width: 46px; height: 46px; border-radius: 14px;
    background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2);
    font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; color: #fff;
    transition: all .2s cubic-bezier(.34,1.56,.64,1); flex-shrink: 0; position: relative; z-index: 1;
}
.tp-header__audio:hover { background: rgba(255,255,255,.24); transform: scale(1.1); }

/* Builder toolbar */
.tool-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(30,41,59,.04); border: 1.5px solid rgba(30,41,59,.07); }
.tool-toolbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-control-label { font-size: .75rem; font-weight: 800; color: #64748b; }
.syl-speed-pills { display: flex; gap: 4px; }
.syl-speed-pill {
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(30,41,59,.07); border: 1.5px solid rgba(30,41,59,.1);
    font-size: 1rem; cursor: pointer; display: grid; place-items: center;
    transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.syl-speed-pill:hover { background: rgba(56,189,248,.14); transform: scale(1.1); }
.syl-speed-pill.is-active { background: #38bdf8; border-color: #38bdf8; color: #fff; box-shadow: 0 4px 14px rgba(56,189,248,.4); }

/* Builder workbench */
.builder-workbench { display: flex; flex-direction: column; gap: 16px; }
.builder-dropzones {
    display: flex; align-items: center; gap: 12px;
    padding: 20px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(56,189,248,.07), rgba(167,139,250,.05));
    border: 2px dashed rgba(56,189,248,.22);
}
.builder-slot {
    flex: 1; min-height: 80px; border-radius: 18px;
    background: rgba(255,255,255,.9); border: 2.5px dashed rgba(56,189,248,.3);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.builder-slot:hover { border-color: #38bdf8; background: rgba(56,189,248,.06); }
.builder-slot__label { font-size: .72rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
.builder-plus, .builder-equals {
    font-size: 2rem; font-weight: 900; color: #94a3b8;
    flex-shrink: 0; user-select: none;
}
.builder-result {
    flex: 1; min-height: 80px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(56,189,248,.08));
    border: 2.5px solid rgba(52,211,153,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; font-weight: 900;
    font-family: var(--font-heading, sans-serif); color: #059669;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
}

/* Counter */
.tp-counter {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 14px;
    background: rgba(56,189,248,.08); border: 1.5px solid rgba(56,189,248,.18);
    font-size: .82rem; font-weight: 700; color: #0369a1;
}
.tp-counter__icon { font-size: 1.1rem; }
.tp-counter strong { font-size: 1.1rem; font-weight: 900; color: #0284c7; }

/* Builder trays */
.builder-trays { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.builder-tray {
    padding: 14px; border-radius: 18px;
    background: rgba(30,41,59,.04); border: 1.5px solid rgba(30,41,59,.08);
    display: flex; flex-wrap: wrap; gap: 8px; min-height: 100px;
}
.builder-preset-strip {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
    border-radius: 14px; background: rgba(167,139,250,.07);
    border: 1.5px solid rgba(167,139,250,.15);
}
.tool-sequence-controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* TP responsive */
@media (max-width: 768px) { .builder-trays { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   29. PRE-READER SHELL ENHANCEMENT
   ══════════════════════════════════════════════════════════════ */
@keyframes prPulse { 0%,100%{box-shadow:0 0 0 0 var(--pr-primary,rgba(59,130,246,.5))} 70%{box-shadow:0 0 0 12px transparent} }
@keyframes prBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.pre-reader-shell {
    display: flex; flex-direction: column; min-height: 100vh;
    background: linear-gradient(160deg, var(--pr-primary,#3B82F6) 0%, #1e1b4b 100%);
    --pr-primary: #3B82F6;
    --pr-secondary: #FDE68A;
}

/* Mini header */
.mission-header-mini {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(20px);
    border-bottom: 1.5px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}
.mission-header-mini__level {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.mission-header-mini__icon {
    font-size: 1.6rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
    animation: prBounce 3s ease-in-out infinite;
}
.mission-header-mini__eyebrow {
    font-size: .68rem; font-weight: 800; color: rgba(255,255,255,.65);
    text-transform: uppercase; letter-spacing: .08em; display: block;
}
.mission-header-mini__title {
    font-size: .95rem; font-weight: 900; color: #fff;
    font-family: var(--font-heading, sans-serif); margin: 0;
}
.mission-header-mini__progress {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.pre-reader-progress-bar {
    width: 120px; height: 8px; border-radius: 999px;
    background: rgba(255,255,255,.15); overflow: hidden;
}
.pre-reader-progress-bar__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--pr-secondary,#FDE68A), #fbbf24);
    box-shadow: 0 0 10px rgba(251,191,36,.5);
    transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.simple-exit-button {
    padding: 7px 14px; border-radius: 12px;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 800;
    text-decoration: none; white-space: nowrap;
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.simple-exit-button:hover { background: rgba(255,255,255,.22); transform: scale(1.04); }

/* Stage */
.pre-reader-stage {
    display: flex; flex: 1; gap: 16px; padding: 16px;
}
.pre-reader-support {
    display: flex; flex-direction: column; gap: 10px;
    flex-shrink: 0; width: 90px;
}

/* Support buttons */
.big-audio-replay-button {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; border-radius: 20px; border: none; cursor: pointer;
    background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.1));
    border: 2px solid rgba(255,255,255,.25); color: #fff;
    font-size: .72rem; font-weight: 800;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    animation: prPulse 3s ease-in-out infinite;
}
.big-audio-replay-button span { font-size: 1.8rem; }
.big-audio-replay-button:hover { background: rgba(255,255,255,.3); transform: scale(1.08); }
.hint-button {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 8px; border-radius: 18px; border: none; cursor: pointer;
    background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.18); color: #fff;
    font-size: .68rem; font-weight: 800; transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.hint-button span { font-size: 1.4rem; }
.hint-button:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.hint-button--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* Main area */
.pre-reader-main { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.demo-player { border-radius: 20px; overflow: hidden; }
.pre-reader-activity-card {
    flex: 1; border-radius: 28px; overflow: hidden;
    background: rgba(255,255,255,.95);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    display: flex; flex-direction: column;
    backdrop-filter: blur(20px);
}
.pre-reader-visual { padding: 20px; border-bottom: 1.5px solid rgba(30,41,59,.08); }
.pre-reader-interaction { flex: 1; padding: 20px; }
.pre-reader-actions { padding: 16px 20px; background: rgba(30,41,59,.03); display: flex; gap: 10px; flex-wrap: wrap; }

/* Feedback */
.pre-reader-feedback-lane { padding: 8px 16px; }
.expressive-feedback-bubble {
    padding: 14px 20px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.95), #fff);
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    font-size: .9rem; font-weight: 700; color: #0f172a;
    animation: ktpPop .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* Footer */
.pre-reader-footer {
    padding: 12px 16px;
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(16px);
    border-top: 1.5px solid rgba(255,255,255,.1);
}
.pre-reader-next-btn {
    width: 100%; padding: 16px; font-size: 1rem; font-weight: 900; border-radius: 18px;
    background: linear-gradient(135deg, var(--pr-secondary,#fde68a), #fbbf24);
    color: #1e293b; border: none; cursor: pointer; font-family: var(--font-heading, sans-serif);
    box-shadow: 0 8px 28px rgba(251,191,36,.4);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pre-reader-next-btn:hover { transform: scale(1.03) translateY(-2px); }
.minimal-lesson-summary {
    background: rgba(255,255,255,.12); border-radius: 16px; padding: 16px;
    color: rgba(255,255,255,.9); font-size: .88rem;
}

/* Pre-reader responsive */
@media (max-width: 640px) {
    .pre-reader-stage { flex-direction: column; padding: 10px; }
    .pre-reader-support { flex-direction: row; width: 100%; }
    .big-audio-replay-button { flex-direction: row; padding: 10px 14px; }
    .hint-button { flex-direction: row; padding: 8px 12px; }
    .pre-reader-progress-bar { width: 80px; }
    .mission-header-mini { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   30. KLIB — LIBRARY REDESIGN
   ══════════════════════════════════════════════════════════════ */
@keyframes klibShelf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.klib { position: relative; display: grid; gap: 20px; }

/* BG */
.klib-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.klib-bg__float {
    position: absolute; left: var(--x,50%); top: var(--y,50%);
    font-size: 1.4rem; opacity: .18;
    animation: ktpFloat 5s var(--d,0s) ease-in-out infinite;
}

/* Hero */
.klib-hero {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 24px;
    padding: 28px 30px; border-radius: 28px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #1e3a5f 100%);
    box-shadow: 0 20px 60px rgba(30,27,75,.45);
    overflow: hidden;
    animation: kFadeUp .4s ease both;
}
.klib-hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #38bdf8, #a78bfa, #f59e0b, #34d399);
    border-radius: 0 0 28px 28px;
}
.klib-hero__shelf {
    display: flex; gap: 4px; align-items: flex-end;
    font-size: 2.2rem; line-height: 1;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.4));
}
.klib-hero__shelf span { animation: klibShelf 3.5s ease-in-out infinite; }
.klib-hero__shelf span:nth-child(1){animation-delay:0s}
.klib-hero__shelf span:nth-child(2){animation-delay:.3s}
.klib-hero__shelf span:nth-child(3){animation-delay:.6s}
.klib-hero__shelf span:nth-child(4){animation-delay:.9s}
.klib-hero__shelf span:nth-child(5){animation-delay:1.2s}
.klib-hero__shelf span:nth-child(6){animation-delay:1.5s}

.klib-hero__copy { display: grid; gap: 6px; }
.klib-hero__eyebrow { font-size: .72rem; font-weight: 800; color: rgba(56,189,248,.9); text-transform: uppercase; letter-spacing: .1em; }
.klib-hero__h1 {
    font-size: clamp(1.4rem,3vw,2rem); font-weight: 900;
    font-family: var(--font-heading, sans-serif); color: #fff; margin: 0;
    background: linear-gradient(135deg, #fff 0%, #bae6fd 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.klib-hero__p { font-size: .86rem; color: rgba(255,255,255,.65); margin: 0; }

.klib-hero__stats { display: flex; flex-direction: column; gap: 8px; }
.klib-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 14px;
    background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.12);
}
.klib-stat__ico { font-size: 1rem; }
.klib-stat strong { font-size: 1.1rem; font-weight: 900; color: #fff; font-family: var(--font-heading, sans-serif); }
.klib-stat span   { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.55); }
.klib-stat--fav strong { color: #fbbf24; }
.klib-stat--done strong { color: #34d399; }

/* Filters */
.klib-filters { position: relative; z-index: 1; display: grid; gap: 8px; }
.klib-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.klib-filter-btn {
    padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(30,41,59,.1);
    background: #fff; color: #475569;
    font-size: .78rem; font-weight: 800; cursor: pointer;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 3px 10px rgba(30,41,59,.08);
    white-space: nowrap;
}
.klib-filter-btn:hover {
    border-color: rgba(56,189,248,.4); color: #0284c7;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 22px rgba(56,189,248,.15);
}
.klib-filter-btn.is-active { background: #38bdf8; border-color: #38bdf8; color: #fff; box-shadow: 0 6px 20px rgba(56,189,248,.4); }
.klib-filter-btn--fav.is-active { background: linear-gradient(135deg, #fbbf24, #f97316); border-color: #fbbf24; box-shadow: 0 6px 20px rgba(251,191,36,.4); }
.klib-filter-btn[style] { border-color: var(--fc, rgba(56,189,248,.25)); }
.klib-filter-btn[style]:hover { background: var(--fb, rgba(56,189,248,.1)); border-color: var(--fc, #38bdf8); color: var(--fc, #0284c7); }
.klib-filter-btn[style].is-active { background: var(--fc, #38bdf8); color: #fff; }

/* Book Grid */
.klib-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Book Card */
.klib-book {
    display: flex; flex-direction: column;
    border-radius: 24px; overflow: hidden;
    background: #fff; border: 2px solid rgba(30,41,59,.07);
    box-shadow: 0 6px 24px rgba(30,41,59,.09);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    animation: kFadeUp .4s ease both;
    cursor: pointer;
}
.klib-book:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(30,41,59,.16);
}

/* Book Cover */
.klib-book__cover {
    height: 120px; position: relative; overflow: hidden;
    background: var(--book-bg, rgba(56,189,248,.12));
    display: flex; align-items: center; justify-content: center;
}
.klib-book__spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: var(--book-color, #38bdf8);
    box-shadow: 2px 0 8px rgba(0,0,0,.15);
}
.klib-book__face {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.klib-book__ico {
    font-size: 2.8rem; line-height: 1;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.15));
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.klib-book:hover .klib-book__ico { transform: scale(1.15) rotate(-5deg); }
.klib-book__level {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .68rem; font-weight: 900; background: var(--book-color,#38bdf8);
    color: #fff; letter-spacing: .04em;
}
.klib-book__fav-star {
    position: absolute; top: 8px; right: 10px;
    font-size: 1.2rem; color: #fbbf24;
    filter: drop-shadow(0 2px 6px rgba(251,191,36,.5));
    animation: kStar 2.5s ease-in-out infinite;
}
.klib-book__status-badge {
    position: absolute; bottom: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; display: grid; place-items: center;
    font-size: .9rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.klib-book__status-badge--done { background: rgba(52,211,153,.12); }

/* Book Info */
.klib-book__info { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.klib-book__stage-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .65rem; font-weight: 800;
    background: var(--book-bg, rgba(56,189,248,.1));
    color: var(--book-color, #0284c7); align-self: flex-start;
}
.klib-book__title {
    font-size: .96rem; font-weight: 900; color: #0f172a;
    margin: 0; line-height: 1.3;
}
.klib-book__preview { font-size: .75rem; color: #64748b; margin: 0; line-height: 1.45; flex: 1; }
.klib-book__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.klib-book__diff, .klib-book__cat {
    padding: 3px 9px; border-radius: 999px;
    font-size: .65rem; font-weight: 800;
    background: rgba(30,41,59,.07); color: #64748b;
}
.klib-book__actions { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.klib-book__read-btn {
    flex: 1; padding: 10px; border-radius: 14px; text-align: center;
    font-size: .82rem; font-weight: 900; font-family: var(--font-heading, sans-serif);
    background: linear-gradient(135deg, var(--book-color,#38bdf8), color-mix(in srgb, var(--book-color,#38bdf8) 70%, #0f172a));
    color: #fff; text-decoration: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--book-color,#38bdf8) 35%, transparent);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.klib-book__read-btn:hover { transform: translateY(-2px) scale(1.04); }
.klib-book__fav-form { flex-shrink: 0; }
.klib-book__fav-btn {
    width: 38px; height: 38px; border-radius: 12px;
    background: rgba(30,41,59,.07); border: 1.5px solid rgba(30,41,59,.1);
    font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; color: #94a3b8;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.klib-book__fav-btn:hover, .klib-book__fav-btn.is-fav { color: #fbbf24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); transform: scale(1.12); }

/* Empty state */
.klib-empty {
    grid-column: 1/-1; padding: 60px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.klib-empty__ico { font-size: 4rem; animation: ktpFloat 3s ease-in-out infinite; }
.klib-empty h3 { font-size: 1.3rem; color: #0f172a; margin: 0; font-family: var(--font-heading, sans-serif); }
.klib-empty p  { font-size: .88rem; color: #64748b; margin: 0; }

/* Modalities */
.klib-modes {
    position: relative; z-index: 1;
    padding: 20px; border-radius: 22px;
    background: #fff; border: 2px solid rgba(56,189,248,.1);
    box-shadow: 0 6px 24px rgba(30,41,59,.08);
    display: grid; gap: 14px;
}
.klib-modes__title { font-size: .8rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.klib-modes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.klib-mode-pill {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 16px;
    background: rgba(56,189,248,.06); border: 1.5px solid rgba(56,189,248,.14);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.klib-mode-pill:hover { transform: translateY(-3px); }
.klib-mode-pill__ico { font-size: 1.4rem; flex-shrink: 0; }
.klib-mode-pill div { display: grid; gap: 3px; }
.klib-mode-pill strong { font-size: .82rem; font-weight: 900; color: #0f172a; }
.klib-mode-pill span  { font-size: .72rem; color: #64748b; line-height: 1.35; }

/* KLIB dark mode */
html[data-theme="dark"] .klib-book { background: rgba(15,23,42,.85); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .klib-book__title { color: #e2f3ff; }
html[data-theme="dark"] .klib-filter-btn { background: rgba(15,23,42,.7); border-color: rgba(255,255,255,.1); color: #94a3b8; }
html[data-theme="dark"] .klib-modes { background: rgba(15,23,42,.7); }

/* KLIB responsive */
@media (max-width: 640px) {
    .klib-hero { grid-template-columns: 1fr; text-align: center; }
    .klib-hero__shelf { justify-content: center; }
    .klib-hero__stats { flex-direction: row; justify-content: center; }
    .klib-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) { .klib-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   31. KBDG — BADGES REDESIGN
   ══════════════════════════════════════════════════════════════ */
@keyframes kbdgSpin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes kbdgGlow  { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:.9;transform:scale(1.15)} }
@keyframes kbdgShine { 0%{left:-120%} 100%{left:120%} }
@keyframes kbdgPop   { 0%{transform:scale(.5) translateY(20px);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

.kbdg { position: relative; display: grid; gap: 22px; }

/* BG */
.kbdg-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.kbdg-bg__spark {
    position: absolute; left: var(--x,50%); top: var(--y,50%);
    font-size: 1.3rem; opacity: .25;
    animation: ktpFloat 5s var(--d,0s) ease-in-out infinite;
}

/* Hero */
.kbdg-hero {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 20px;
    padding: 28px 30px; border-radius: 28px;
    background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #1c1917 100%);
    box-shadow: 0 20px 60px rgba(28,25,23,.5);
    overflow: hidden;
    animation: kFadeUp .4s ease both;
}
.kbdg-hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #ffd43b, #ff922b, #da77f2, #4dabf7);
}
.kbdg-hero__trophies {
    display: flex; gap: -4px; align-items: flex-end; position: relative; z-index: 1;
}
.kbdg-hero__trophy { font-size: 2rem; line-height: 1; animation: ktpFloat 4s ease-in-out infinite; }
.kbdg-hero__trophy--1 { animation-delay: 0s; }
.kbdg-hero__trophy--2 { font-size: 2.6rem; animation-delay: -.5s; margin: 0 -4px; }
.kbdg-hero__trophy--3 { animation-delay: -1s; }

.kbdg-hero__copy { display: grid; gap: 5px; position: relative; z-index: 1; }
.kbdg-hero__eyebrow { font-size: .72rem; font-weight: 800; color: rgba(251,191,36,.85); text-transform: uppercase; letter-spacing: .1em; }
.kbdg-hero__h1 {
    font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900;
    font-family: var(--font-heading, sans-serif); color: #fff; margin: 0;
    background: linear-gradient(135deg, #ffd43b 0%, #fff 60%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.kbdg-hero__p { font-size: .86rem; color: rgba(255,255,255,.6); margin: 0; }

.kbdg-hero__count {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 14px 20px; border-radius: 20px;
    background: rgba(255,255,255,.08); border: 2px solid rgba(251,191,36,.25);
    position: relative; z-index: 1;
}
.kbdg-hero__num {
    font-size: 2.2rem; font-weight: 900;
    font-family: var(--font-heading, sans-serif); color: #ffd43b;
    line-height: 1;
}
.kbdg-hero__count span { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.55); }

/* Empty state */
.kbdg-empty {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 60px 28px; border-radius: 28px;
    background: #fff; border: 2px solid rgba(30,41,59,.08);
    box-shadow: 0 8px 32px rgba(30,41,59,.1);
    text-align: center; overflow: hidden;
}
.kbdg-empty__ring {
    position: absolute; width: 200px; height: 200px;
    border-radius: 50%; border: 2px dashed rgba(56,189,248,.2);
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    animation: kbdgSpin 20s linear infinite;
}
.kbdg-empty__owl { font-size: 4rem; animation: ktpFloat 3s ease-in-out infinite; position: relative; z-index: 1; }
.kbdg-empty__stars { display: flex; gap: 8px; font-size: 1.4rem; position: relative; z-index: 1; }
.kbdg-empty__stars span:nth-child(1){animation:kStar 2s 0s ease-in-out infinite}
.kbdg-empty__stars span:nth-child(2){animation:kStar 2s .4s ease-in-out infinite}
.kbdg-empty__stars span:nth-child(3){animation:kStar 2s .8s ease-in-out infinite}
.kbdg-empty__h2 { font-size: 1.3rem; font-family: var(--font-heading, sans-serif); color: #0f172a; margin: 0; position: relative; z-index: 1; }
.kbdg-empty__p  { font-size: .88rem; color: #64748b; margin: 0; max-width: 360px; position: relative; z-index: 1; }
.kbdg-empty__cta {
    padding: 14px 28px; border-radius: 18px; text-decoration: none;
    background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff;
    font-size: .95rem; font-weight: 900; font-family: var(--font-heading, sans-serif);
    box-shadow: 0 8px 28px rgba(56,189,248,.4); position: relative; z-index: 1;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kbdg-empty__cta:hover { transform: translateY(-4px) scale(1.04); }

/* Badge grid */
.kbdg-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* Badge card */
.kbdg-card {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 24px 20px 20px;
    border-radius: 28px; background: #fff;
    border: 2px solid rgba(30,41,59,.07);
    box-shadow: 0 8px 32px rgba(30,41,59,.1);
    position: relative; overflow: hidden;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    animation: kbdgPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.kbdg-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bc1,#ffd43b) 8%, transparent), transparent 60%);
    pointer-events: none;
}
.kbdg-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(90deg, var(--bc1,#ffd43b), var(--bc2,#ff922b));
}
.kbdg-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 24px 60px rgba(30,41,59,.18); }

/* Medal section */
.kbdg-card__medal-wrap {
    position: relative; width: 96px; height: 96px;
    display: grid; place-items: center;
}
.kbdg-card__glow {
    position: absolute; inset: -8px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--bc1,#ffd43b) 35%, transparent) 0%, transparent 70%);
    animation: kbdgGlow 3s ease-in-out infinite;
}
.kbdg-card__medal {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bc1,#ffd43b), var(--bc2,#ff922b));
    display: grid; place-items: center;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--bc1,#ffd43b) 45%, transparent),
                inset 0 2px 0 rgba(255,255,255,.4);
    position: relative; overflow: hidden;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.kbdg-card:hover .kbdg-card__medal { transform: scale(1.12) rotate(-5deg); }
.kbdg-card__ico { font-size: 2.4rem; line-height: 1; position: relative; z-index: 1; }
.kbdg-card__shine {
    position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
}
.kbdg-card:hover .kbdg-card__shine { animation: kbdgShine .6s ease forwards; }

/* Pulsing rings */
.kbdg-card__ring {
    position: absolute; border-radius: 50%;
    border: 2px solid var(--bc1,#ffd43b); opacity: .4;
    animation: kRing 3s ease-out infinite;
}
.kbdg-card__ring--1 { width: 96px; height: 96px; animation-delay: 0s; }
.kbdg-card__ring--2 { width: 96px; height: 96px; animation-delay: -1.5s; }

/* Badge info */
.kbdg-card__info { display: grid; gap: 6px; text-align: center; }
.kbdg-card__title { font-size: .95rem; font-weight: 900; color: #0f172a; margin: 0; font-family: var(--font-heading, sans-serif); }
.kbdg-card__desc  { font-size: .76rem; color: #64748b; margin: 0; line-height: 1.4; }
.kbdg-card__date  { font-size: .68rem; font-weight: 700; color: var(--bc2,#ff922b); }

/* Top sparkle */
.kbdg-card__star {
    position: absolute; top: 10px; right: 12px;
    font-size: .9rem; animation: kStar 2s ease-in-out infinite;
}

/* KBDG dark mode */
html[data-theme="dark"] .kbdg-card { background: rgba(15,23,42,.85); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .kbdg-card__title { color: #e2f3ff; }
html[data-theme="dark"] .kbdg-empty { background: rgba(15,23,42,.7); }
html[data-theme="dark"] .kbdg-empty__h2 { color: #e2f3ff; }

/* KBDG responsive */
@media (max-width: 640px) {
    .kbdg-hero { grid-template-columns: 1fr; text-align: center; }
    .kbdg-hero__trophies { justify-content: center; }
    .kbdg-hero__count { flex-direction: row; align-self: center; }
    .kbdg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 380px) { .kbdg-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   32. KLM + KLD — DARK MODE COMPLETIONS
   ══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .kld-card { background: rgba(15,23,42,.85); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .kld-card__title { color: #e2f3ff; }
html[data-theme="dark"] .kld-card__goal  { color: #94a3b8; }
html[data-theme="dark"] .kld-card--next { background: linear-gradient(135deg, color-mix(in srgb, var(--lv-color,#38bdf8) 12%, transparent), rgba(15,23,42,.85)) !important; }
html[data-theme="dark"] .kld-hero { background: linear-gradient(135deg, #0f2035, #0d1e30) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-theme="dark"] .klib-modes { background: rgba(15,23,42,.7); }

/* ══════════════════════════════════════════════════════════════
   33. KID-MODE-SHELL — MAIN PADDING FOR BOTTOM NAV
   ══════════════════════════════════════════════════════════════ */
/* Extra bottom padding for all pages in kid mode (ensures bottom nav doesn't cover content) */
.kid-mode-shell__main > .kld,
.kid-mode-shell__main > .klm,
.kid-mode-shell__main > .klib,
.kid-mode-shell__main > .kbdg,
.kid-mode-shell__main > .kd2,
.kid-mode-shell__main > .ktc,
.kid-mode-shell__main > .tool-page {
    padding-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════
   34. WORD-BUILDER & KTP CONTROLS
   ══════════════════════════════════════════════════════════════ */
.word-builder-board { display: flex; flex-direction: column; gap: 16px; }
.builder-dropzones--word {
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(167,139,250,.07), rgba(124,58,237,.04));
    border: 2px dashed rgba(124,58,237,.25);
}
.builder-word-slots {
    display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px;
    align-items: center; justify-content: center;
}
.builder-result--word {
    padding: 16px; border-radius: 18px; text-align: center;
    background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(124,58,237,.08));
    border: 2.5px solid rgba(124,58,237,.25);
    font-size: 2rem; font-weight: 900; color: #7c3aed;
    font-family: var(--font-heading, sans-serif);
    min-height: 60px; display: flex; align-items: center; justify-content: center;
}
.builder-tray--word {
    display: flex; flex-wrap: wrap; gap: 10px; padding: 16px;
    border-radius: 18px;
    background: rgba(30,41,59,.04); border: 1.5px solid rgba(30,41,59,.08);
    min-height: 80px; align-items: center; justify-content: center;
}

/* KTP controls (word-builder style buttons) */
.ktp-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ktp-ctrl {
    flex: 1; padding: 10px 16px; border-radius: 14px; border: none; cursor: pointer;
    font-size: .84rem; font-weight: 900; font-family: var(--font-heading, sans-serif);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
    min-width: 90px;
}
.ktp-ctrl--pri {
    background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,.35);
}
.ktp-ctrl--pri:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(124,58,237,.45); }
.ktp-ctrl--sec { background: rgba(30,41,59,.08); border: 1.5px solid rgba(30,41,59,.12); color: #475569; }
.ktp-ctrl--sec:hover { background: rgba(30,41,59,.14); transform: scale(1.04); }

/* KTP header center: icon left, text right */
.ktp-head__center {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0 14px !important;
    flex: 1 !important;
}
.ktp-head__big-icon {
    grid-row: 1 / 3 !important;
    font-size: 3.2rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.3)) !important;
    animation: ktpFloat 4s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
.ktp-head__h2 {
    grid-column: 2 !important; align-self: end !important;
    font-size: clamp(1.2rem,3vw,1.8rem) !important;
    font-weight: 900 !important; font-family: var(--font-heading, sans-serif) !important;
    color: #fff !important; margin: 0 !important; line-height: 1.15 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}
.ktp-head__p {
    grid-column: 2 !important; align-self: start !important;
    font-size: .86rem !important; color: rgba(255,255,255,.78) !important; margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   35. KLM — LEVEL MAP HERO & RESPONSIVE TOUCH UPS
   ══════════════════════════════════════════════════════════════ */
/* Improved hero for level map */
.klm-hero {
    background:
        radial-gradient(circle at 95% 10%, rgba(251,191,36,.26) 0%, transparent 45%),
        radial-gradient(circle at 5% 85%, rgba(56,189,248,.22) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(167,139,250,.08) 0%, transparent 70%),
        linear-gradient(135deg, #fff 0%, #f0f9ff 60%, #fdf4ff 100%) !important;
}
.klm-hero__owl {
    filter: drop-shadow(0 10px 28px rgba(56,189,248,.3)) !important;
    animation: kFloat 5s ease-in-out infinite !important;
}

/* KLM connector improved */
.klm-connector {
    padding: 0 32px !important;
    height: 48px !important;
}
.klm-connector__dots {
    background: repeating-linear-gradient(
        90deg,
        rgba(56,189,248,.4) 0, rgba(56,189,248,.4) 10px,
        transparent 10px, transparent 20px
    ) !important;
    height: 3px !important;
}

/* KLM step improved */
.klm-step {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--lv-color,#38bdf8) 55%, transparent) !important;
}

/* ══════════════════════════════════════════════════════════════
   36. GLOBAL MOBILE RESPONSIVE (kid-mode)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .kid-mode-shell__main { padding: 12px 14px 108px !important; gap: 14px !important; }
    .kld-hero { grid-template-columns: auto 1fr !important; padding: 18px 16px !important; }
    .kld-hero__cta { grid-column: 1 / -1 !important; width: 100% !important; text-align: center !important; justify-content: center !important; }
    .klm-hero { grid-template-columns: 1fr !important; text-align: center !important; padding: 20px 18px !important; }
    .klm-hero__owl { margin: 0 auto !important; }
    .klm-hero__actions { flex-direction: row !important; justify-content: center !important; }
    .klib-hero { grid-template-columns: 1fr !important; text-align: center !important; padding: 22px 18px !important; }
    .klib-hero__shelf { justify-content: center !important; }
    .klib-hero__stats { flex-direction: row !important; justify-content: center !important; }
    .kbdg-hero { grid-template-columns: 1fr !important; text-align: center !important; padding: 22px 18px !important; }
    .kbdg-hero__trophies { justify-content: center !important; }
    .kbdg-hero__count { flex-direction: row !important; align-self: center !important; }
    .ktp-head { flex-direction: row !important; padding: 18px 16px !important; }
    .ktp-head__h2 { font-size: 1.2rem !important; }
}
@media (max-width: 480px) {
    .klib-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kbdg-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kld-card { grid-template-columns: 36px 36px 1fr !important; }
    .kld-card__btn { grid-column: 1 / -1 !important; }
    .ktp-head { flex-wrap: wrap !important; }
    .builder-trays { grid-template-columns: 1fr !important; }
}
@media (max-width: 360px) {
    .klib-grid { grid-template-columns: 1fr !important; }
    .kbdg-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   37. SYLLABARY — FAMILY SELECT DROPDOWN
   ══════════════════════════════════════════════════════════════ */
.syl-family-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 4px;
    flex-wrap: wrap;
}
.syl-family-label {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ktp-accent, #7c3aed);
    white-space: nowrap;
    flex-shrink: 0;
}
.syl-family-select {
    flex: 1;
    min-width: 180px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 18px 18px;
    border: 2.5px solid #e9d5ff;
    border-radius: 14px;
    padding: 10px 44px 10px 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #3b0764;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(124,58,237,.10);
    outline: none;
}
.syl-family-select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.2), 0 2px 8px rgba(124,58,237,.15);
}
.syl-family-select:hover {
    border-color: #a855f7;
}

/* ══════════════════════════════════════════════════════════════
   38. HIDE BOTTOM NAV ON TOOL PAGES
   ══════════════════════════════════════════════════════════════ */
.kid-mode-shell:has(.tool-page) .kbn { display: none !important; }
.kid-mode-shell:has(.tool-page) .kid-mode-shell__main { padding-bottom: 20px !important; }

/* ══════════════════════════════════════════════════════════════
   39. SYLLABARY DETAIL PANEL — SPECTACULAR REDESIGN
   ══════════════════════════════════════════════════════════════ */
@keyframes sylPop {
    0%   { transform: scale(.5) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(2deg); }
    80%  { transform: scale(.96) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sylGlow {
    0%, 100% { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
    50%       { text-shadow: 0 0 40px currentColor, 0 0 80px currentColor, 0 0 100px currentColor; }
}
@keyframes sylPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}
@keyframes sylSlideUp {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes sylShine {
    0%   { left: -80%; }
    100% { left: 120%; }
}

/* Container */
.syllable-detail-panel {
    display: grid !important;
    gap: 18px !important;
    padding: 4px !important;
}

/* Main synthesis card */
.syl-detail-synthesis {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    padding: 28px 20px 24px !important;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--vowel-bg, #fee2e2) 80%, white 20%),
        color-mix(in srgb, var(--vowel-bg, #fecaca) 60%, white 40%)
    ) !important;
    border: 2.5px solid var(--vowel-border, #fca5a5) !important;
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--vowel-border, #fca5a5) 30%, transparent 70%),
        inset 0 1px 0 rgba(255,255,255,.6) !important;
}
/* Animated shine streak */
.syl-detail-synthesis::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) !important;
    left: -80% !important;
    animation: sylShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

/* Pieces row */
.syl-detail-pieces {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

/* Individual letter piece */
.syl-detail-piece {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
.syl-detail-piece span {
    font-size: clamp(2.6rem, 7vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    animation: sylPulse 2.5s ease-in-out infinite !important;
}
.syl-detail-piece small {
    font-size: .65rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    background: rgba(0,0,0,.08) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
    color: rgba(0,0,0,.55) !important;
}

/* Consonant */
.syl-detail-piece--consonant span {
    color: #c0392b !important;
    text-shadow: 0 2px 12px rgba(192,57,43,.35) !important;
    animation-delay: 0s !important;
}
/* Vowel */
.syl-detail-piece--vowel span {
    color: var(--vowel-accent, #2980b9) !important;
    text-shadow: 0 2px 12px rgba(41,128,185,.35) !important;
    animation-delay: .4s !important;
}

/* + and → */
.syl-detail-plus,
.syl-detail-arrow {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: rgba(0,0,0,.25) !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
    margin-bottom: 20px !important;
    line-height: 1 !important;
}

/* Result syllable — the star of the show */
.syl-detail-result {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.syl-detail-result span {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(3.5rem, 10vw, 5.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    color: #fff !important;
    border-radius: 22px !important;
    padding: .22em .55em !important;
    min-width: 2em !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,.3),
        0 4px 12px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
    animation: sylPop .55s cubic-bezier(.34,1.56,.64,1) both, sylGlow 3s ease-in-out 1s infinite !important;
    text-shadow: 0 0 30px rgba(255,255,255,.5) !important;
}
/* Rainbow border ring around result */
.syl-detail-result span::before {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 26px !important;
    background: conic-gradient(#ff6b6b, #ffd43b, #69db7c, #4dabf7, #da77f2, #ff6b6b) !important;
    z-index: -1 !important;
    animation: sylPulse 2s ease-in-out infinite !important;
}

/* Example word card */
.syl-detail-example {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%) !important;
    border: 2px solid #ffe066 !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
    box-shadow: 0 4px 20px rgba(255,200,0,.2) !important;
    animation: sylSlideUp .5s .3s cubic-bezier(.34,1.56,.64,1) both !important;
}
.syl-detail-example-emoji {
    font-size: 3rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)) !important;
}
.syl-detail-example strong {
    display: block !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    color: #1a1a2e !important;
    letter-spacing: -.01em !important;
}
.syl-detail-example small {
    font-size: .82rem !important;
    color: #6c5200 !important;
    font-weight: 600 !important;
}
.syl-detail-example em {
    color: #c0392b !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

/* Family label */
.syl-detail-family {
    text-align: center !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,.35) !important;
    margin: 0 !important;
}

/* Dark mode */
html[data-theme="dark"] .syl-detail-synthesis {
    background: linear-gradient(145deg, rgba(255,100,100,.08), rgba(255,100,100,.04)) !important;
    border-color: rgba(255,100,100,.2) !important;
}
html[data-theme="dark"] .syl-detail-example {
    background: linear-gradient(135deg, #2d2600, #1e1b00) !important;
    border-color: #5a4c00 !important;
}
html[data-theme="dark"] .syl-detail-example strong { color: #fff !important; }
html[data-theme="dark"] .syl-detail-example small  { color: #c9a600 !important; }

/* ══════════════════════════════════════════════════════════════
   40. TOOLS CATALOG (ktc) — SPECTACULAR REDESIGN
   ══════════════════════════════════════════════════════════════ */

/* Hide bottom nav on catalog too */
.kid-mode-shell:has(.ktc) .kbn { display: none !important; }
.kid-mode-shell:has(.ktc) .kid-mode-shell__main { padding-bottom: 20px !important; }

@keyframes ktcFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-14px) rotate(4deg); }
    66%       { transform: translateY(-7px)  rotate(-3deg); }
}
@keyframes ktcBlobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(30px, -20px) scale(1.08); }
}
@keyframes ktcCardIn {
    from { opacity: 0; transform: translateY(28px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ktcRingPulse {
    0%, 100% { transform: scale(1); opacity: .5; }
    50%       { transform: scale(1.25); opacity: 0; }
}
@keyframes ktcIconBounce {
    0%,100% { transform: translateY(0); }
    40%      { transform: translateY(-10px) scale(1.15); }
    60%      { transform: translateY(-6px)  scale(1.08); }
}
@keyframes ktcShimmer {
    0%   { left: -100%; }
    100% { left: 150%;  }
}
@keyframes ktcBadgePop {
    0%   { transform: scale(0) rotate(-15deg); }
    70%  { transform: scale(1.15) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes ktcStarTwinkle {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.3) rotate(20deg); }
}

/* ── Wrapper ── */
.ktc {
    position: relative !important;
    z-index: 0 !important;
    padding: 0 4px 40px !important;
}

/* ── Background blobs ── */
.ktc-bg__blob {
    opacity: .12 !important;
    filter: blur(60px) !important;
    border-radius: 50% !important;
    position: absolute !important;
    animation: ktcBlobDrift 12s ease-in-out infinite !important;
}
.ktc-bg__blob--a { animation-delay: 0s !important; }
.ktc-bg__blob--b { animation-delay: -4s !important; }
.ktc-bg__blob--c { animation-delay: -8s !important; }
.ktc-bg__star {
    position: absolute !important;
    left: var(--kx) !important;
    top:  var(--ky) !important;
    font-size: 1.5rem !important;
    opacity: .55 !important;
    animation: ktcStarTwinkle 3.5s ease-in-out infinite !important;
    animation-delay: var(--kd) !important;
    pointer-events: none !important;
}

/* ── Hero ── */
.ktc-hero {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    padding: 24px 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}
.ktc-hero__emoji-row {
    display: flex !important;
    gap: 14px !important;
    font-size: 2.8rem !important;
    justify-content: center !important;
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(12px) !important;
    border: 2px solid rgba(255,255,255,.7) !important;
    border-radius: 999px !important;
    padding: 10px 28px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
}
.ktc-hero__emoji-row span {
    display: block !important;
    animation: ktcFloat 2.8s ease-in-out infinite !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)) !important;
}
.ktc-hero__emoji-row span:nth-child(1) { animation-delay: 0s; }
.ktc-hero__emoji-row span:nth-child(2) { animation-delay: -.55s; }
.ktc-hero__emoji-row span:nth-child(3) { animation-delay: -1.1s; }
.ktc-hero__emoji-row span:nth-child(4) { animation-delay: -1.65s; }
.ktc-hero__emoji-row span:nth-child(5) { animation-delay: -2.2s; }

.ktc-hero__h1 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #4f46e5 50%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: -.01em !important;
    text-shadow: none !important;
}

/* ── Grid ── */
.ktc-grid {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 4px !important;
}

/* ── Tile ── */
.ktc-tile {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 28px 20px 20px !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, var(--kt-c1), var(--kt-c2)) !important;
    color: #fff !important;
    text-decoration: none !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,.25) !important;
    box-shadow:
        0 16px 48px color-mix(in srgb, var(--kt-c1) 40%, transparent 60%),
        0 4px 12px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
    animation: ktcCardIn .55s cubic-bezier(.34,1.56,.64,1) both !important;
    text-align: center !important;
}
/* Hover 3D lift */
.ktc-tile:hover {
    transform: translateY(-12px) scale(1.04) !important;
    box-shadow:
        0 28px 64px color-mix(in srgb, var(--kt-c1) 50%, transparent 50%),
        0 8px 20px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}
/* Shimmer sweep on hover */
.ktc-tile::before {
    content: '' !important;
    position: absolute !important;
    top: 0; bottom: 0 !important;
    width: 60% !important;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%) !important;
    left: -100% !important;
    transition: none !important;
    pointer-events: none !important;
}
.ktc-tile:hover::before {
    animation: ktcShimmer .6s ease forwards !important;
}
/* Top gloss line */
.ktc-tile::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 10%; right: 10% !important;
    height: 2px !important;
    background: rgba(255,255,255,.5) !important;
    border-radius: 0 0 4px 4px !important;
}

/* Spark particles */
.ktc-tile__spark {
    position: absolute !important;
    font-size: 1.2rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: ktcStarTwinkle 3s ease-in-out infinite !important;
}
.ktc-tile__spark--1 { top: 12px; right: 14px; animation-delay: .3s !important; }
.ktc-tile__spark--2 { bottom: 16px; left: 14px; animation-delay: 1.5s !important; }
.ktc-tile:hover .ktc-tile__spark { opacity: 1 !important; }

/* Icon wrap + ring */
.ktc-tile__icon-wrap {
    position: relative !important;
    width: 96px !important;
    height: 96px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ktc-tile__icon-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    animation: ktcRingPulse 2.2s ease-in-out infinite !important;
}
.ktc-tile__icon-ring::after {
    content: '' !important;
    position: absolute !important;
    inset: -8px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.2) !important;
    animation: ktcRingPulse 2.2s ease-in-out .7s infinite !important;
}
.ktc-tile__icon {
    font-size: 3.8rem !important;
    position: relative !important;
    z-index: 1 !important;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.3)) !important;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.ktc-tile:hover .ktc-tile__icon {
    animation: ktcIconBounce .5s ease !important;
}

/* Badge */
.ktc-tile__badge {
    display: inline-block !important;
    background: rgba(255,255,255,.25) !important;
    backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255,255,255,.4) !important;
    border-radius: 10px !important;
    padding: 4px 14px !important;
    font-size: .85rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    color: #fff !important;
    animation: ktcBadgePop .5s .3s cubic-bezier(.34,1.56,.64,1) both !important;
}

/* Text */
.ktc-tile__title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
    letter-spacing: .01em !important;
}
.ktc-tile__fun {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.92) !important;
    margin: 0 !important;
}
.ktc-tile__desc {
    font-size: .78rem !important;
    color: rgba(255,255,255,.75) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Footer */
.ktc-tile__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 6px !important;
}
.ktc-tile__level {
    font-size: .72rem !important;
    color: rgba(255,255,255,.8) !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,.2) !important;
    padding: 3px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.3) !important;
}
.ktc-tile__btn {
    padding: 8px 18px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.28) !important;
    backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: .85rem !important;
    transition: background .2s, transform .2s !important;
}
.ktc-tile:hover .ktc-tile__btn {
    background: rgba(255,255,255,.42) !important;
    transform: scale(1.06) !important;
}

/* Staggered card animation delays */
.ktc-tile:nth-child(1) { animation-delay: .05s !important; }
.ktc-tile:nth-child(2) { animation-delay: .12s !important; }
.ktc-tile:nth-child(3) { animation-delay: .19s !important; }
.ktc-tile:nth-child(4) { animation-delay: .26s !important; }
.ktc-tile:nth-child(5) { animation-delay: .33s !important; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .ktc-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
    .ktc-tile  { padding: 22px 14px 16px !important; gap: 8px !important; }
    .ktc-tile__icon-wrap { width: 72px !important; height: 72px !important; }
    .ktc-tile__icon { font-size: 2.8rem !important; }
    .ktc-hero__emoji-row { font-size: 2rem !important; padding: 8px 18px !important; gap: 10px !important; }
    .ktc-hero__h1 { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; white-space: normal !important; }
}
@media (max-width: 400px) {
    .ktc-grid { grid-template-columns: 1fr !important; }
    .ktc-tile  { flex-direction: row !important; gap: 14px !important; align-items: flex-start !important; text-align: left !important; padding: 18px 16px !important; }
    .ktc-tile__icon-wrap { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; }
    .ktc-tile__icon { font-size: 2.2rem !important; }
    .ktc-tile__footer { margin-top: 4px !important; }
}


/* ==========================================================================
   APRENDIZZAJE · WIDE COMPOSITION REFINEMENT
   Public landing/login and high-resolution desktop composition.
   ========================================================================== */
body.public-body[data-v5-page="home"] .lnd,
body.public-body[data-v5-page="login"] .lgn {
    border: 1px solid rgba(34, 71, 116, .12);
    box-shadow: 0 28px 80px rgba(31, 61, 101, .14);
}

/* Login — balanced two-panel experience instead of a narrow form column. */
body.public-body[data-v5-page="login"] .lgn {
    grid-template-columns: minmax(0, 1.12fr) minmax(520px, .88fr);
    min-height: calc(100vh - 54px);
    border-radius: 32px;
    background: #081328;
}
body.public-body[data-v5-page="login"] .lgn-scene {
    gap: 24px;
    padding: clamp(48px, 4vw, 72px) clamp(48px, 4.3vw, 82px);
    background:
        radial-gradient(circle at 16% 12%, rgba(79,70,229,.34), transparent 31%),
        radial-gradient(circle at 82% 78%, rgba(13,181,232,.22), transparent 34%),
        linear-gradient(135deg, #071126 0%, #0d1b35 58%, #07162c 100%);
}
body.public-body[data-v5-page="login"] .lgn-mascot-wrap { width: 184px; height: 184px; }
body.public-body[data-v5-page="login"] .lgn-mascot { width: 112px; height: 112px; display: grid; place-items: center; }
body.public-body[data-v5-page="login"] .lgn-mascot img { width: 100%; height: 100%; object-fit: contain; }
body.public-body[data-v5-page="login"] .lgn-copy h1 {
    font-size: clamp(3rem, 4.1vw, 5rem);
    line-height: .98;
    letter-spacing: -.045em;
    margin-bottom: 18px;
}
body.public-body[data-v5-page="login"] .lgn-copy p {
    font-size: clamp(.98rem, 1.1vw, 1.12rem);
    line-height: 1.65;
    color: rgba(215,230,255,.72);
}
body.public-body[data-v5-page="login"] .lgn-proof { gap: 12px; }
body.public-body[data-v5-page="login"] .lgn-proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.public-body[data-v5-page="login"] .lgn-proof-chip img { width: 20px; height: 20px; object-fit: contain; }
body.public-body[data-v5-page="login"] .lgn-form {
    gap: 22px;
    padding: clamp(46px, 4.5vw, 78px) clamp(40px, 4.2vw, 74px);
    background:
        radial-gradient(circle at 92% 6%, rgba(79,70,229,.08), transparent 26%),
        radial-gradient(circle at 10% 96%, rgba(13,181,232,.07), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
body.public-body[data-v5-page="login"] .lgn-form > :not(input[type="hidden"]) {
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
}
body.public-body[data-v5-page="login"] .lgn-form-brand { margin-bottom: 8px; }
body.public-body[data-v5-page="login"] .lgn-brand-mark--sm { width: 36px; height: 36px; border-radius: 10px; }
body.public-body[data-v5-page="login"] .lgn-form-brand-name { font-size: .96rem; }
body.public-body[data-v5-page="login"] .lgn-form-title {
    font-size: clamp(2rem, 2.4vw, 2.55rem);
    letter-spacing: -.035em;
    margin-bottom: 8px;
}
body.public-body[data-v5-page="login"] .lgn-form-sub { font-size: 1rem; line-height: 1.55; }
body.public-body[data-v5-page="login"] .lgn-fields { gap: 18px; }
body.public-body[data-v5-page="login"] .lgn-field-label {
    margin-bottom: 8px;
    color: #233650;
    font-size: .76rem;
    letter-spacing: .075em;
}
body.public-body[data-v5-page="login"] .lgn-input {
    min-height: 56px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-color: #d8e2ee;
    border-radius: 15px;
    background: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body.public-body[data-v5-page="login"] .lgn-field-icon { left: 16px; width: 20px; height: 20px; display: grid; place-items: center; }
body.public-body[data-v5-page="login"] .lgn-field-icon img { width: 18px; height: 18px; }
body.public-body[data-v5-page="login"] .lgn-show-btn { right: 10px; min-height: 36px; padding-inline: 12px; border-radius: 10px; }
body.public-body[data-v5-page="login"] .lgn-submit {
    min-height: 58px;
    border-radius: 16px;
    font-size: 1rem;
    box-shadow: 0 12px 30px rgba(79,70,229,.28);
}
body.public-body[data-v5-page="login"] .lgn-demo-pills { gap: 9px; }
body.public-body[data-v5-page="login"] .lgn-demo-pill {
    flex: 1 1 120px;
    justify-content: center;
    min-height: 46px;
    padding: 9px 14px;
    border-color: #dbe4ef;
    box-shadow: 0 5px 16px rgba(40,66,98,.04);
}
body.public-body[data-v5-page="login"] .lgn-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding-top: 2px;
}
body.public-body[data-v5-page="login"] .lgn-links a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
}

/* Landing — broader composition and stronger visual hierarchy. */
body.public-body[data-v5-page="home"] .lnd {
    border-radius: 32px;
    background: #fff;
}
body.public-body[data-v5-page="home"] .lnd-nav {
    height: 74px;
    padding-inline: clamp(26px, 3.4vw, 58px);
}
body.public-body[data-v5-page="home"] .lnd-nav-mark { width: 42px; height: 42px; border-radius: 12px; }
body.public-body[data-v5-page="home"] .lnd-nav-name { font-size: 1.28rem; }
body.public-body[data-v5-page="home"] .lnd-hero {
    min-height: clamp(680px, 78vh, 860px);
    background:
        radial-gradient(circle at 16% 20%, rgba(79,70,229,.13), transparent 31%),
        radial-gradient(circle at 87% 28%, rgba(13,181,232,.13), transparent 29%),
        linear-gradient(135deg, #f8f7ff 0%, #e9f8ff 54%, #f7f9ff 100%);
}
body.public-body[data-v5-page="home"] .lnd-hero-content {
    max-width: 1640px;
    padding: 96px clamp(44px, 5vw, 88px) 84px;
    grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
    gap: clamp(54px, 5vw, 88px);
}
body.public-body[data-v5-page="home"] .lnd-hero-copy { gap: 24px; }
body.public-body[data-v5-page="home"] .lnd-hero-h1 {
    font-size: clamp(3.1rem, 4.9vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.045em;
}
body.public-body[data-v5-page="home"] .lnd-hero-p { max-width: 640px; font-size: clamp(1rem, 1.1vw, 1.14rem); }
body.public-body[data-v5-page="home"] .lnd-hero-actions { gap: 12px; }
body.public-body[data-v5-page="home"] .lnd-btn-primary,
body.public-body[data-v5-page="home"] .lnd-btn-ghost,
body.public-body[data-v5-page="home"] .lnd-btn-outline { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
body.public-body[data-v5-page="home"] .lnd-hero-proof { gap: 20px; }
body.public-body[data-v5-page="home"] .lnd-proof-item strong { font-size: 1.75rem; }
body.public-body[data-v5-page="home"] .lnd-hero-visual-card--main { width: min(100%, 420px); border-radius: 22px; }
body.public-body[data-v5-page="home"] .lnd-preview-topbar { padding: 13px 16px; }
body.public-body[data-v5-page="home"] .lnd-preview-hero-row { padding: 18px 18px 12px; }
body.public-body[data-v5-page="home"] .lnd-preview-avatar { width: 48px; height: 48px; }
body.public-body[data-v5-page="home"] .lnd-preview-name { font-size: .96rem; }
body.public-body[data-v5-page="home"] .lnd-preview-cards { gap: 10px; padding-inline: 18px; }
body.public-body[data-v5-page="home"] .lnd-preview-card { min-height: 48px; display: flex; align-items: center; }
body.public-body[data-v5-page="home"] .lnd-hero-visual-card--badge { right: -12px; bottom: 14px; }
body.public-body[data-v5-page="home"] .lnd-hero-visual-card--progress { right: -8px; top: 26px; min-width: 174px; }
body.public-body[data-v5-page="home"] .lnd-stats { padding: 34px clamp(34px, 4vw, 64px); }
body.public-body[data-v5-page="home"] .lnd-stats-inner { max-width: 1640px; gap: 16px; }
body.public-body[data-v5-page="home"] .lnd-stat {
    min-height: 118px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
body.public-body[data-v5-page="home"] .lnd-section { padding: clamp(78px, 6vw, 110px) clamp(38px, 5vw, 82px); }
body.public-body[data-v5-page="home"] .lnd-section > * { max-width: 1640px; }
body.public-body[data-v5-page="home"] .lnd-section-head { margin-bottom: 48px; }
body.public-body[data-v5-page="home"] .lnd-section-h2 { font-size: clamp(2.2rem, 3vw, 3.35rem); line-height: 1.02; }
body.public-body[data-v5-page="home"] .lnd-section-p { max-width: 760px; font-size: 1.02rem; }
body.public-body[data-v5-page="home"] .lnd-level-card { flex-basis: 176px; min-height: 216px; padding: 22px 18px; }
body.public-body[data-v5-page="home"] .lnd-features { gap: 22px; }
body.public-body[data-v5-page="home"] .lnd-feat { min-height: 220px; padding: 28px; border-radius: 22px; }
body.public-body[data-v5-page="home"] .lnd-feat-icon { width: 54px; height: 54px; border-radius: 15px; }
body.public-body[data-v5-page="home"] .lnd-roles { gap: 22px; }
body.public-body[data-v5-page="home"] .lnd-role { min-height: 470px; padding: 30px; border-radius: 24px; }
body.public-body[data-v5-page="home"] .lnd-role-cta { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
body.public-body[data-v5-page="home"] .lnd-cta { padding: clamp(84px, 7vw, 118px) clamp(38px, 5vw, 82px); }
body.public-body[data-v5-page="home"] .lnd-cta-content { max-width: 980px; margin-inline: auto; }
body.public-body[data-v5-page="home"] .lnd-cta-h2 { color: #fff; font-size: clamp(2.45rem, 3.8vw, 4rem); }
body.public-body[data-v5-page="home"] .lnd-cta-p { color: rgba(219,232,255,.78); max-width: 720px; font-size: 1.04rem; }
body.public-body[data-v5-page="home"] .lnd-footer { padding: 26px clamp(38px, 5vw, 82px); }

@media (max-width: 1180px) {
    body.public-body[data-v5-page="login"] .lgn { grid-template-columns: minmax(0, 1fr) 500px; }
    body.public-body[data-v5-page="login"] .lgn-scene { padding-inline: 42px; }
    body.public-body[data-v5-page="home"] .lnd-hero-content { grid-template-columns: minmax(0, 1fr) 400px; gap: 42px; padding-inline: 46px; }
    body.public-body[data-v5-page="home"] .lnd-hero-visual-card--main { width: 360px; }
}
@media (max-width: 900px) {
    body.public-body[data-v5-page="login"] .lgn { grid-template-columns: 1fr; min-height: calc(100vh - 34px); border-radius: 24px; }
    body.public-body[data-v5-page="login"] .lgn-scene { display: none; }
    body.public-body[data-v5-page="login"] .lgn-form { min-height: calc(100vh - 34px); padding: 40px clamp(24px, 7vw, 52px); }

    body.public-body[data-v5-page="home"] .lnd { border-radius: 24px; }
    body.public-body[data-v5-page="home"] .lnd-nav { padding-inline: 22px; }
    body.public-body[data-v5-page="home"] .lnd-nav { position: sticky; }
    body.public-body[data-v5-page="home"] .lnd-nav-links.is-open {
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        border: 1px solid rgba(31,61,101,.12);
        border-radius: 18px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 18px 50px rgba(31,61,101,.16);
        backdrop-filter: blur(18px);
    }
    body.public-body[data-v5-page="home"] .lnd-nav-links.is-open > a { margin-left: 0; text-align: center; }
    body.public-body[data-v5-page="home"] .lnd-hero { min-height: 0; }
    body.public-body[data-v5-page="home"] .lnd-hero-content { grid-template-columns: 1fr; gap: 40px; padding: 86px 36px 62px; }
    body.public-body[data-v5-page="home"] .lnd-hero-visual { display: none; }
    body.public-body[data-v5-page="home"] .lnd-section { padding-inline: 36px; }
}
@media (max-width: 640px) {
    body.public-body[data-v5-page="login"] .lgn-links { grid-template-columns: 1fr; gap: 4px; }
    body.public-body[data-v5-page="login"] .lgn-demo-pill { flex-basis: 100%; }
    body.public-body[data-v5-page="home"] .lnd-hero-content { padding: 74px 22px 46px; }
    body.public-body[data-v5-page="home"] .lnd-hero-h1 { font-size: clamp(2.25rem, 11vw, 2.8rem); line-height: 1.01; }
    body.public-body[data-v5-page="home"] .lnd-section-h2 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
    body.public-body[data-v5-page="home"] .lnd-section { padding: 58px 22px; }
    body.public-body[data-v5-page="home"] .lnd-stats { padding: 36px 22px; }
    body.public-body[data-v5-page="home"] .lnd-cta { padding: 66px 22px; }
}

html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-form {
    background:
        radial-gradient(circle at 92% 6%, rgba(79,70,229,.16), transparent 26%),
        radial-gradient(circle at 10% 96%, rgba(13,181,232,.11), transparent 30%),
        linear-gradient(180deg, #0e1a2e 0%, #0a1628 100%);
}
html[data-theme="dark"] body.public-body[data-v5-page="home"] .lnd-nav-links.is-open { background: rgba(8,20,38,.98); border-color: #1e3050; }
/* Dark-mode parity for the late wide-composition overrides. */
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-form-title { color: #e8f0ff; }
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-form-sub { color: #8ea4bd; }
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-field-label { color: #a8bfd5; }
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-input {
    border-color: #263c5b;
    background: #0b1a2f;
    color: #e7f0ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-input:focus {
    border-color: #6d7cff;
    background: #0d1f38;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-show-btn {
    border-color: #2b4160;
    background: #101f35;
    color: #b8cbe0;
}
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-demo-pill {
    border-color: #263c5b;
    background: #0b1a2f;
    color: #dbe9f8;
}
html[data-theme="dark"] body.public-body[data-v5-page="login"] .lgn-links a { color: #90a8ff; }
html[data-theme="dark"] body.public-body[data-v5-page="home"] .lnd {
    border-color: #1d3150;
    background: #071020;
}
html[data-theme="dark"] body.public-body[data-v5-page="home"] .lnd-hero {
    background:
        radial-gradient(circle at 16% 20%, rgba(79,70,229,.22), transparent 32%),
        radial-gradient(circle at 87% 28%, rgba(13,181,232,.16), transparent 30%),
        linear-gradient(135deg, #071020 0%, #0a182d 54%, #081426 100%);
}