html, body {
    font-family: 'Poppins', sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.app-loader {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.25);
    border-top-color: #EB6534; /* your accent */
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.text {
    font-size: 14px;
    opacity: .85;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}


/* Make page/layout fill viewport so the sidebar can be 100% height */
html, body, #app {
    height: 100%;
}

/* Hide the floating bubble button */
#chatButton {
    display: none !important;
}

/* Turn the old chat widget into a right sidebar */
#chatWidget {
    display: flex !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 380px !important; /* adjust width as you like */
    border-left: 1px solid #e5e7eb; /* subtle divider */
    z-index: 1000 !important;
}

/* Header + input stick, body scrolls */
#chatHeader {
    border-bottom: 1px solid #ececec;
}

#chatMessages {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

#chatInputContainer {
    flex: 0 0 auto !important;
}

.game-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.game-modal-content {
    background: linear-gradient(135deg, #4e73df, #1cc88a);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: white;
    animation: pop 0.4s ease;
}

    .game-modal-content button {
        margin-top: 20px;
        padding: 12px 25px;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;
    }

.hidden {
    display: none;
}

@keyframes pop {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/*New Dashboard*/
/* =========================
   ESOTORIA DASH (Dark + Playful)
   CSS ONLY — no logic changes
   ========================= */

:root {
    --bg0: #070A16;
    --bg1: #0B1026;
    --card: #0F1737;
    --card2: #101C44;
    --line: rgba(255,255,255,.10);
    --text: #EAF0FF;
    --muted: #AAB6D6;
    --purple: #8B5CF6;
    --blue: #60A5FA;
    --green: #34D399;
    --pink: #FB7185;
    --orange: #FB923C;
    --glow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.55);
}

/* scroll host / background */
.dash-scrollhost {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(900px 480px at 12% 10%, rgba(139,92,246,.25) 0%, rgba(0,0,0,0) 60%), radial-gradient(800px 420px at 88% 12%, rgba(96,165,250,.22) 0%, rgba(0,0,0,0) 62%), radial-gradient(700px 380px at 70% 90%, rgba(52,211,153,.16) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, #070A16 100%);
}

/* keep your wrapper but make it look premium */
.dash-wrap {
    padding: 22px;
    min-height: 100vh;
    color: var(--text);
}

/* loader */
.dash-loader {
    margin: 12vh auto 0 auto;
    width: min(520px, 92vw);
    text-align: center;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid var(--line);
    box-shadow: var(--glow);
    backdrop-filter: blur(10px);
}

    .dash-loader p {
        color: var(--muted);
        margin: 10px 0 0 0;
    }

.spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.18);
    border-top-color: rgba(139,92,246,.95);
    margin: 0 auto 10px auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* top bar buttons */
.dash-topbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-settings, .btn-logout {
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
    font-weight: 800;
    letter-spacing: .2px;
}

/* settings = neon outline */
.btn-settings {
    border: 1px solid rgba(139,92,246,.55);
    background: rgba(255,255,255,.04);
    color: var(--text);
    box-shadow: 0 10px 30px rgba(139,92,246,.12);
}

    .btn-settings:hover {
        transform: translateY(-2px);
        background: rgba(139,92,246,.12);
        box-shadow: 0 14px 36px rgba(139,92,246,.20);
    }

/* logout = danger */
.btn-logout {
    border: 1px solid rgba(251,113,133,.50);
    background: rgba(255,255,255,.04);
    color: #ffd2da;
    box-shadow: 0 10px 30px rgba(251,113,133,.10);
}

    .btn-logout:hover {
        transform: translateY(-2px);
        background: rgba(251,113,133,.14);
        box-shadow: 0 14px 36px rgba(251,113,133,.16);
    }

/* title + subtitle */
.dash-title {
    font-size: 2.05rem;
    margin: 0;
    color: var(--text);
    text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

    .dash-title span {
        background: linear-gradient(90deg, var(--purple), var(--blue));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.dash-subtitle {
    color: var(--muted);
    margin: 8px 0 18px 0;
}

/* track tabs */
.track-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.tab-btn {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    color: var(--text);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
    box-shadow: 0 10px 26px rgba(0,0,0,.38);
    position: relative;
    overflow: hidden;
}

    /* playful glow stripe */
    .tab-btn::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(340px 120px at 20% 20%, color-mix(in srgb, var(--color), transparent 65%), transparent 60%);
        opacity: .55;
        pointer-events: none;
    }

    .tab-btn:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--color), #ffffff 55%);
        box-shadow: 0 14px 34px rgba(0,0,0,.55);
    }

    .tab-btn.active {
        border-color: var(--color);
        
        box-shadow: 0 16px 40px rgba(0,0,0,.60);
    }

/* stats */
.dash-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 16px 0;
}

.stat-card {
    flex: 1;
    min-width: 200px;
    border-radius: 18px;
    padding: 14px 16px;
    text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid var(--line);
    box-shadow: var(--glow);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

    .stat-card p:first-child {
        font-size: 1.85rem;
        font-weight: 450;
        margin: 0;
        color: var(--text);
    }

    .stat-card p:last-child {
        margin: 4px 0 0 0;
        color: var(--muted);
        font-weight: 700;
    }

    .stat-card.purple {
        border-top: 4px solid var(--purple);
    }

    .stat-card.green {
        border-top: 4px solid var(--green);
    }

/* NEW project button */
.dash-actions {
    margin: 8px 0 18px 0;
}

.btn-primary {
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(96,165,250,.85));
    color: #071024;
    font-weight: 450;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
    box-shadow: 0 18px 44px rgba(139,92,246,.18);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow: 0 22px 52px rgba(96,165,250,.20);
    }

/* section title */
.section-title {
    margin: 0 0 10px 0;
    color: var(--text);
    font-weight: 450;
    letter-spacing: .2px;
}

/* level groups */
.level-group {
    margin-bottom: 14px;
}

.level-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-radius: 16px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

    .level-group-head h3 {
        margin: 0;
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 450;
    }

    .level-group-head span {
        color: var(--muted);
        font-weight: 700;
    }

/* projects grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.project-card {
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: 0 14px 38px rgba(0,0,0,.45);
    position: relative;
    overflow: hidden;
}

    /* playful glow accent in cards */
    .project-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(340px 140px at 20% 15%, rgba(139,92,246,.22), transparent 60%), radial-gradient(320px 140px at 85% 30%, rgba(52,211,153,.12), transparent 60%);
        opacity: .9;
        pointer-events: none;
    }

    .project-card:hover {
        transform: translateY(-3px);
        border-color: rgba(96,165,250,.30);
        box-shadow: 0 20px 52px rgba(0,0,0,.60);
    }

    .project-card h3 {
        margin: 0 0 6px 0;
        font-weight: 450;
        color: #c7d2fe;
    }

    .project-card h6 {
        margin: 0 0 10px 0;
        color: rgba(255,255,255,.65);
        font-weight: 900;
    }

    .project-card .meta {
        color: rgba(255,255,255,.70);
        font-size: .85rem;
    }

/* empty */
.no-projects {
    margin-top: 10px;
    color: var(--muted);
    text-align: center;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.14);
}

/* overlay + modal */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.new-project-modal {
    width: 340px;
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(15,23,55,.95), rgba(10,16,38,.95));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 26px 70px rgba(0,0,0,.70);
    color: var(--text);
}

    .new-project-modal h3 {
        margin: 0;
        font-weight: 450;
        background: linear-gradient(90deg, var(--purple), var(--blue));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .new-project-modal input {
        width: 100%;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.06);
        color: var(--text);
        outline: none;
    }

        .new-project-modal input:focus {
            border-color: rgba(139,92,246,.55);
            box-shadow: 0 0 0 4px rgba(139,92,246,.20);
        }

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.btn-cancel {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .12s, background .12s;
}

    .btn-cancel:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
    }

/* responsive */
@media (max-width: 820px) {
    .dash-topbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .dash-wrap {
        padding: 16px;
    }

    .dash-title {
        font-size: 1.7rem;
    }
}
/* =========================================
   ESOTORIA Sparkles (CSS only)
   Paste at END of your <style>
   ========================================= */

/* Smooth entrance for the whole dashboard content */
.dash-wrap {
    animation: dashIn .55s ease-out both;
}

@keyframes dashIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle floating effect on stats + cards */
.stat-card, .project-card, .tab-btn {
    transform: translateZ(0);
}

    /* Glow pulse on active tabs */
    .tab-btn.active {
        position: relative;
        animation: tabPulse 2.2s ease-in-out infinite;
    }

@keyframes tabPulse {
    0%, 100% {
        box-shadow: 0 16px 40px rgba(0,0,0,.60), 0 0 0 rgba(139,92,246,.0);
    }

    50% {
        box-shadow: 0 18px 46px rgba(0,0,0,.68), 0 0 24px rgba(139,92,246,.20);
    }
}

/* Sparkle sweep effect for primary button */


@keyframes shine {
    0% {
        left: -70%;
        opacity: 0;
    }

    18% {
        opacity: .9;
    }

    45% {
        left: 130%;
        opacity: .9;
    }

    46% {
        opacity: 0;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}

/* Playful bouncing hover on cards */
.project-card:hover {
    animation: softBounce .35s ease-out;
}

@keyframes softBounce {
    0% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(-3px);
    }
}

/* Tiny sparkles floating above cards (no markup needed) */
.project-card {
    position: relative;
    overflow: hidden;
}

    .project-card::after {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%), radial-gradient(2px 2px at 30% 70%, rgba(96,165,250,.9), rgba(96,165,250,0) 60%), radial-gradient(2px 2px at 62% 30%, rgba(139,92,246,.95), rgba(139,92,246,0) 60%), radial-gradient(2px 2px at 86% 60%, rgba(52,211,153,.9), rgba(52,211,153,0) 60%);
        opacity: .0;
        pointer-events: none;
        animation: sparkleFloat 3.8s ease-in-out infinite;
    }

    .project-card:hover::after {
        opacity: .9;
    }

@keyframes sparkleFloat {
    0%,100% {
        transform: translateY(0);
        filter: blur(.2px);
    }

    50% {
        transform: translateY(-6px);
        filter: blur(.5px);
    }
}

/* Buttons get a playful glow on hover */
.btn-settings:hover, .btn-logout:hover, .btn-cancel:hover {
    box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 18px rgba(96,165,250,.12);
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .dash-wrap,
    .tab-btn.active,
    .btn-primary::after,
    .project-card:hover,
    .project-card::after {
        animation: none !important;
    }
}


/* =========================================
       Esotoria Dashboard (Namespaced)
       Prefix: esoDash-
       ========================================= */
.esoDash-root {
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(900px 500px at 15% 10%, rgba(124,58,237,.25), transparent 60%), radial-gradient(800px 500px at 85% 20%, rgba(59,130,246,.20), transparent 55%), radial-gradient(700px 450px at 70% 90%, rgba(16,185,129,.12), transparent 55%), linear-gradient(180deg, #07081a 0%, #060616 40%, #050513 100%);
}

.esoDash-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 18px 40px 18px;
}

/* --- Topbar --- */
.esoDash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10, 10, 26, .55);
    backdrop-filter: blur(10px);
}

.esoDash-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.esoDash-logo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    box-shadow: 0 10px 25px rgba(124,58,237,.25);
}

.esoDash-brandName {
    color: rgba(255,255,255,.95);
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.1;
}

.esoDash-brandTag {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    margin-top: 2px;
}

.esoDash-topActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Buttons --- */
.esoDash-btn {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    user-select: none;
    font-weight: 700;
}

    .esoDash-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.18);
    }

    .esoDash-btn:active {
        transform: translateY(0px) scale(.99);
    }

.esoDash-btnPrimary {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 12px 25px rgba(124,58,237,.22);
}

    .esoDash-btnPrimary:hover {
        background: linear-gradient(135deg, rgba(124,58,237,1), rgba(16,185,129,1));
    }

.esoDash-btnGhost {
    background: rgba(255,255,255,.04);
}

.esoDash-btnDanger {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.30);
}

    .esoDash-btnDanger:hover {
        background: rgba(239,68,68,.18);
        border-color: rgba(239,68,68,.45);
    }

.esoDash-ico {
    font-size: 15px;
}

.esoDash-btnText {
    font-size: 14px;
}

/* --- Hero --- */
.esoDash-hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 16px;
    margin-top: 14px;
}

.esoDash-heroLeft,
.esoDash-heroRight {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.50);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.esoDash-kicker {
    color: rgba(255,255,255,.70);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .3px;
}

.esoDash-title {
    margin: 8px 0 6px 0;
    color: rgba(255,255,255,.96);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}

.esoDash-titleAccent {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.esoDash-subtitle {
    color: rgba(255,255,255,.62);
    margin: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* --- Tabs --- */
.esoDash-tabsRow {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

    .esoDash-tabsRow::-webkit-scrollbar {
        display: none;
    }

.esoDash-tab {
    --esoDash-accent: rgba(124,58,237,1);
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.90);
    border-radius: 999px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    position: relative;
    font-weight: 800;
}

    .esoDash-tab:hover {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,.18);
        background: rgba(255,255,255,.08);
    }

    .esoDash-tab.is-active {
        border-color: color-mix(in srgb, var(--esoDash-accent) 70%, rgba(255,255,255,.15));
        background: linear-gradient(135deg, color-mix(in srgb, var(--esoDash-accent) 40%, rgba(255,255,255,.06)), rgba(255,255,255,.05));
        box-shadow: 0 12px 25px color-mix(in srgb, var(--esoDash-accent) 22%, transparent);
    }

.esoDash-tabEmoji {
    font-size: 16px;
}

.esoDash-tabText {
    font-size: 14px;
    white-space: nowrap;
}

.esoDash-tabDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--esoDash-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--esoDash-accent) 20%, transparent);
}

/* --- Right side cards --- */
.esoDash-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.esoDash-card {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 12px;
    position: relative;
    overflow: hidden;
}

    .esoDash-card::before {
        content: "";
        position: absolute;
        inset: -60px -60px auto auto;
        width: 140px;
        height: 140px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        filter: blur(0px);
    }

.esoDash-cardTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.esoDash-cardIcon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 15px;
}

.esoDash-cardTitle {
    color: rgba(255,255,255,.70);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .25px;
}

.esoDash-cardValue {
    margin-top: 10px;
    color: rgba(255,255,255,.95);
    font-weight: 450;
    font-size: 22px;
    letter-spacing: .2px;
}

.esoDash-cardMeta {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    margin-top: 2px;
}

.esoDash-cardAccentPurple {
    box-shadow: inset 0 3px 0 rgba(124,58,237,1);
}

.esoDash-cardAccentGreen {
    box-shadow: inset 0 3px 0 rgba(16,185,129,1);
}

.esoDash-cardAccentBlue {
    box-shadow: inset 0 3px 0 rgba(59,130,246,1);
}

.esoDash-ctaRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.esoDash-hint {
    color: rgba(255,255,255,.60);
    font-size: 13px;
}

/* --- Content --- */
.esoDash-content {
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.45);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.esoDash-sectionHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.esoDash-sectionTitle {
    margin: 0;
    color: rgba(255,255,255,.95);
    font-size: 18px;
    font-weight: 450;
}

.esoDash-sectionSub {
    color: rgba(255,255,255,.55);
    font-size: 13px;
}

/* --- Level block --- */
.esoDash-levelBlock {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    border-radius: 16px;
    padding: 12px;
    margin-top: 12px;
}

.esoDash-levelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 2px 2px 10px 2px;
}

.esoDash-levelLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.esoDash-levelBadge {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(124,58,237,.14);
    border: 1px solid rgba(124,58,237,.25);
    color: rgba(255,255,255,.92);
    font-weight: 450;
    font-size: 13px;
}

.esoDash-levelCount {
    color: rgba(255,255,255,.62);
    font-weight: 800;
    font-size: 13px;
}

.esoDash-levelPill {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.22);
    color: rgba(255,255,255,.86);
    font-weight: 900;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.esoDash-pillDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(16,185,129,1);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

/* --- Project grid --- */
.esoDash-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.esoDash-project {
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 12px;
    cursor: pointer;
    color: rgba(255,255,255,.92);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    position: relative;
    overflow: hidden;
}

    .esoDash-project::before {
        content: "";
        position: absolute;
        inset: auto -60px -60px auto;
        width: 170px;
        height: 170px;
        border-radius: 999px;
        background: rgba(124,58,237,.08);
    }

    .esoDash-project:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.16);
    }

.esoDash-projectTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.esoDash-projectTitle {
    font-weight: 450;
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.esoDash-projectChip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.80);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.esoDash-projectMeta {
    margin-top: 10px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-weight: 800;
}

.esoDash-metaItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.esoDash-metaIco {
    opacity: .9;
}

.esoDash-projectHoverHint {
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-weight: 450;
    font-size: 12px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}

.esoDash-project:hover .esoDash-projectHoverHint {
    opacity: 1;
    transform: translateY(0px);
}

/* --- Empty state --- */
.esoDash-empty {
    padding: 26px 14px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.16);
    background: rgba(255,255,255,.03);
    text-align: center;
}

.esoDash-emptyIcon {
    font-size: 32px;
}

.esoDash-emptyTitle {
    margin-top: 10px;
    color: rgba(255,255,255,.92);
    font-weight: 450;
    font-size: 18px;
}

.esoDash-emptyText {
    margin: 8px auto 14px auto;
    color: rgba(255,255,255,.62);
    max-width: 520px;
    font-size: 14px;
}

/* --- Loading --- */
.esoDash-loading {
    margin-top: 22px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.55);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: blur(10px);
}

.esoDash-spinner {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.14);
    border-top-color: rgba(124,58,237,1);
    animation: esoDashSpin 1s linear infinite;
}

@keyframes esoDashSpin {
    to {
        transform: rotate(360deg);
    }
}

.esoDash-loadingTitle {
    color: rgba(255,255,255,.92);
    font-weight: 450;
}

.esoDash-loadingSub {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    margin-top: 2px;
}

/* --- Modal --- */
.esoDash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.esoDash-modal {
    width: min(420px, 100%);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(12,12,30,.92);
    backdrop-filter: blur(10px);
    padding: 18px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.esoDash-modalIcon {
    font-size: 28px;
}

.esoDash-modalTitle {
    margin-top: 8px;
    color: rgba(255,255,255,.95);
    font-weight: 450;
    font-size: 18px;
}

.esoDash-modalSub {
    margin-top: 6px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

.esoDash-modalText {
    margin-top: 10px;
    color: rgba(255,255,255,.70);
    font-size: 14px;
    line-height: 1.5;
}

.esoDash-modalActions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.esoDash-input {
    width: 100%;
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    outline: none;
    font-weight: 800;
}

    .esoDash-input:focus {
        border-color: rgba(124,58,237,.55);
        box-shadow: 0 0 0 4px rgba(124,58,237,.15);
    }

/* --- Responsive --- */
@media (max-width: 980px) {
    .esoDash-hero {
        grid-template-columns: 1fr;
    }

    .esoDash-cards {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (max-width: 640px) {
    .esoDash-shell {
        padding: 14px 12px 28px 12px;
    }

    .esoDash-brand {
        min-width: 0;
    }

    .esoDash-btnText {
        display: none;
    }
    /* icon-only on small phones */
    .esoDash-title {
        font-size: 26px;
    }

    .esoDash-cards {
        grid-template-columns: 1fr;
    }

    .esoDash-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
       Esotoria Viewer Projects (Namespaced)
       Prefix: esoView-
       ========================================= */
.esoView-root {
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(900px 520px at 12% 12%, rgba(124,58,237,.24), transparent 60%), radial-gradient(800px 500px at 86% 18%, rgba(59,130,246,.18), transparent 55%), radial-gradient(700px 480px at 72% 90%, rgba(16,185,129,.12), transparent 55%), linear-gradient(180deg, #07081a 0%, #060616 40%, #050513 100%);
}

.esoView-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 18px 40px 18px;
}

/* Hero */
.esoView-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    margin-top: 14px;
}

.esoView-heroLeft,
.esoView-heroRight {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.50);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.esoView-kicker {
    color: rgba(255,255,255,.70);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .3px;
}

.esoView-title {
    margin: 8px 0 6px 0;
    color: rgba(255,255,255,.96);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 450;
}

.esoView-subtitle {
    color: rgba(255,255,255,.62);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Mini cards */
.esoView-miniCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.esoView-miniCard {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 12px;
    position: relative;
    overflow: hidden;
}

    .esoView-miniCard::before {
        content: "";
        position: absolute;
        inset: -60px -60px auto auto;
        width: 140px;
        height: 140px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
    }

.esoView-miniTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.esoView-miniIcon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 15px;
}

.esoView-miniLabel {
    color: rgba(255,255,255,.70);
    font-weight: 450;
    font-size: 12px;
    letter-spacing: .25px;
}

.esoView-miniValue {
    margin-top: 10px;
    color: rgba(255,255,255,.95);
    font-weight: 450;
    font-size: 22px;
    letter-spacing: .2px;
}

.esoView-accentPurple {
    box-shadow: inset 0 3px 0 rgba(124,58,237,1);
}

.esoView-accentGreen {
    box-shadow: inset 0 3px 0 rgba(16,185,129,1);
}

.esoView-accentBlue {
    box-shadow: inset 0 3px 0 rgba(59,130,246,1);
}

/* Panel */
.esoView-panel {
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.45);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

/* Controls */
.esoView-controls {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.esoView-field {
    flex: 1;
    min-width: 240px;
}

.esoView-label {
    display: block;
    color: rgba(255,255,255,.72);
    font-weight: 450;
    font-size: 13px;
    margin-bottom: 8px;
}

.esoView-select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    outline: none;
    font-weight: 850;
}

    .esoView-select:focus {
        border-color: rgba(124,58,237,.55);
        box-shadow: 0 0 0 4px rgba(124,58,237,.15);
    }

/* Buttons */
.esoView-btn {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    user-select: none;
    font-weight: 900;
    min-height: 42px;
}

    .esoView-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.18);
    }

    .esoView-btn:active {
        transform: translateY(0px) scale(.99);
    }

    .esoView-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.esoView-btnPrimary {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    box-shadow: 0 12px 25px rgba(124,58,237,.20);
}

.esoView-btnGreen {
    width: 100%;
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.30);
}

    .esoView-btnGreen:hover {
        background: rgba(34,197,94,.20);
        border-color: rgba(34,197,94,.45);
    }

.esoView-ico {
    font-size: 15px;
}

.esoView-btnText {
    font-size: 14px;
}

/* Grid + Cards */
.esoView-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.esoView-card {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 14px;
    position: relative;
    overflow: hidden;
}

    .esoView-card::before {
        content: "";
        position: absolute;
        inset: auto -60px -60px auto;
        width: 180px;
        height: 180px;
        border-radius: 999px;
        background: rgba(124,58,237,.08);
    }

.esoView-cardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.esoView-cardTitle {
    color: rgba(255,255,255,.95);
    font-weight: 450;
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esoView-chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.80);
    font-size: 12px;
    font-weight: 450;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.esoView-cardMeta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    font-weight: 800;
}

.esoView-metaLine {
    display: flex;
    align-items: center;
    gap: 8px;
}

.esoView-metaIco {
    opacity: .95;
}

/* Empty states */
.esoView-empty {
    padding: 26px 14px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.16);
    background: rgba(255,255,255,.03);
    text-align: center;
}

.esoView-emptyIcon {
    font-size: 32px;
}

.esoView-emptyTitle {
    margin-top: 10px;
    color: rgba(255,255,255,.92);
    font-weight: 450;
    font-size: 18px;
}

.esoView-emptyText {
    margin: 8px auto 0 auto;
    color: rgba(255,255,255,.62);
    max-width: 520px;
    font-size: 14px;
}

/* Loading */
.esoView-loading {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.55);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: blur(10px);
}

.esoView-spinner {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.14);
    border-top-color: rgba(124,58,237,1);
    animation: esoViewSpin 1s linear infinite;
}

@keyframes esoViewSpin {
    to {
        transform: rotate(360deg);
    }
}

.esoView-loadingTitle {
    color: rgba(255,255,255,.92);
    font-weight: 450;
}

.esoView-loadingSub {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    margin-top: 2px;
}

/* Alert */
.esoView-alert {
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.10);
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.esoView-alertIcon {
    font-size: 18px;
    margin-top: 2px;
}

.esoView-alertTitle {
    color: rgba(255,255,255,.95);
    font-weight: 450;
}

.esoView-alertMsg {
    color: rgba(255,255,255,.75);
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
}

/* Responsive */
@media (max-width: 980px) {
    .esoView-hero {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .esoView-shell {
        padding: 14px 12px 28px 12px;
    }

    .esoView-miniCards {
        grid-template-columns: 1fr;
    }

    .esoView-grid {
        grid-template-columns: 1fr;
    }

    .esoView-btnText {
        display: none;
    }
    /* icon-only on small phones */
}

/* =========================================
       Esotoria TopBar (Modern Dark + Playful)
       Prefix: esoTop-
       ========================================= */
.esoTop-root {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(900px 140px at 10% 0%, rgba(124,58,237,.35), transparent 60%), radial-gradient(700px 140px at 90% 0%, rgba(59,130,246,.28), transparent 55%), rgba(10,10,26,.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
}

/* LEFT */
.esoTop-left {
    min-width: 140px;
    display: flex;
    align-items: center;
}

.esoTop-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .50rem .85rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    cursor: pointer;
    user-select: none;
    font-weight: 900;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .esoTop-back:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.20);
    }

    .esoTop-back:active {
        transform: translateY(0px) scale(.99);
    }

.esoTop-ico {
    font-size: 14px;
    opacity: .95;
}

.esoTop-backText {
    font-size: 14px;
}

/* CENTER */
.esoTop-mid {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* RIGHT */
.esoTop-right {
    min-width: 240px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-align: right;
}

.esoTop-rightText {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

.esoTop-title {
    color: rgba(255,255,255,.95);
    font-size: 1.02rem;
    font-weight: 450;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.esoTop-sub {
    margin-top: 3px;
    color: rgba(255,255,255,.65);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

/* Logo */
.esoTop-logoWrap {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 12px 25px rgba(124,58,237,.18);
    overflow: hidden;
}

.esoTop-logo {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255,255,255,.95);
    padding: 3px;
    display: block;
}

/* Responsive */
@media (max-width: 780px) {
    .esoTop-left {
        min-width: auto;
    }

    .esoTop-right {
        min-width: 180px;
    }

    .esoTop-title, .esoTop-sub {
        max-width: 180px;
    }
}

@media (max-width: 520px) {
    .esoTop-backText {
        display: none;
    }
    /* icon-only back */
    .esoTop-right {
        min-width: auto;
    }

    .esoTop-title, .esoTop-sub {
        max-width: 140px;
    }
}

/* =========================================
       Esotoria Settings (Modern Dark + Playful)
       Prefix: esoSet-
       ========================================= */
.esoSet-root {
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(900px 520px at 12% 12%, rgba(124,58,237,.20), transparent 60%), radial-gradient(800px 500px at 86% 18%, rgba(59,130,246,.16), transparent 55%), radial-gradient(700px 480px at 72% 90%, rgba(16,185,129,.10), transparent 55%), linear-gradient(180deg, #07081a 0%, #060616 40%, #050513 100%);
}

.esoSet-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 18px 40px 18px;
}

/* Hero */
.esoSet-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    margin-top: 14px;
}

.esoSet-heroLeft,
.esoSet-heroRight {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.50);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.esoSet-kicker {
    color: rgba(255,255,255,.70);
    font-weight: 450;
    font-size: 13px;
    letter-spacing: .3px;
}

.esoSet-title {
    margin: 8px 0 6px 0;
    color: rgba(255,255,255,.96);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 450;
}

.esoSet-subtitle {
    color: rgba(255,255,255,.62);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* badges */
.esoSet-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.esoSet-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.90);
    font-weight: 450;
    font-size: 13px;
}

.esoSet-badgeIco {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.esoSet-badgePurple {
    box-shadow: inset 0 3px 0 rgba(124,58,237,1);
}

.esoSet-badgeGreen {
    box-shadow: inset 0 3px 0 rgba(16,185,129,1);
}

.esoSet-badgeBlue {
    box-shadow: inset 0 3px 0 rgba(59,130,246,1);
}

.esoSet-badgeGray {
    box-shadow: inset 0 3px 0 rgba(148,163,184,1);
}

/* Panel */
.esoSet-panel {
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.45);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

/* Loading */
.esoSet-loading {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,26,.55);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.esoSet-spinner {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.14);
    border-top-color: rgba(124,58,237,1);
    animation: esoSetSpin 1s linear infinite;
}

@keyframes esoSetSpin {
    to {
        transform: rotate(360deg);
    }
}

.esoSet-loadingTitle {
    color: rgba(255,255,255,.92);
    font-weight: 450;
}

.esoSet-loadingSub {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    margin-top: 2px;
}

/* Alerts */
.esoSet-alert {
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.10);
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.esoSet-alertIco {
    font-size: 18px;
    margin-top: 2px;
}

.esoSet-alertTitle {
    color: rgba(255,255,255,.95);
    font-weight: 450;
}

.esoSet-alertMsg {
    color: rgba(255,255,255,.75);
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
}

/* Grid + Cards */
.esoSet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.esoSet-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 14px;
    position: relative;
    overflow: hidden;
}

    .esoSet-card::before {
        content: "";
        position: absolute;
        inset: auto -70px -70px auto;
        width: 200px;
        height: 200px;
        border-radius: 999px;
        background: rgba(124,58,237,.08);
    }

.esoSet-danger {
    border-color: rgba(239,68,68,.22);
    background: rgba(239,68,68,.06);
}

    .esoSet-danger::before {
        background: rgba(239,68,68,.08);
    }

.esoSet-cardHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.esoSet-cardTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.95);
    font-weight: 450;
    font-size: 14px;
}

.esoSet-cardIco {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.esoSet-pill {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.80);
    font-size: 12px;
    font-weight: 450;
    letter-spacing: .25px;
    white-space: nowrap;
}

.esoSet-pillPro {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.28);
    color: rgba(255,255,255,.90);
}

.esoSet-pillFree {
    background: rgba(148,163,184,.12);
    border-color: rgba(148,163,184,.22);
    color: rgba(255,255,255,.85);
}

.esoSet-pillDanger {
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.28);
    color: rgba(255,255,255,.90);
}

/* Rows */
.esoSet-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px dashed rgba(255,255,255,.12);
}

    .esoSet-row:first-of-type {
        border-top: none;
        padding-top: 0;
    }

.esoSet-label {
    color: rgba(255,255,255,.65);
    font-weight: 850;
    font-size: 13px;
}

.esoSet-value {
    color: rgba(255,255,255,.92);
    font-weight: 450;
    font-size: 13px;
    text-align: right;
    word-break: break-word;
}

.esoSet-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
}

.esoSet-muted {
    color: rgba(255,255,255,.55);
}

/* Viewer code area */
.esoSet-codeRow {
    display: flex;
    gap: 12px;
    align-items: stretch;
    padding: 10px 0;
    border-top: 1px dashed rgba(255,255,255,.12);
}

.esoSet-codeBox {
    flex: 1;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    padding: 10px 12px;
}

.esoSet-codeValue {
    margin-top: 6px;
    color: rgba(255,255,255,.95);
    font-weight: 450;
    letter-spacing: .6px;
    font-size: 14px;
}

.esoSet-hint {
    margin-top: 10px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.45;
}

/* Warnings */
.esoSet-warn {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(245,158,11,.30);
    background: rgba(245,158,11,.10);
    color: rgba(255,255,255,.85);
    font-weight: 850;
    font-size: 13px;
}

/* Buttons */
.esoSet-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.esoSet-actionsStack {
    flex-direction: column;
}

.esoSet-btn {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    user-select: none;
    font-weight: 450;
    min-height: 42px;
}

    .esoSet-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.18);
    }

    .esoSet-btn:active {
        transform: translateY(0px) scale(.99);
    }

    .esoSet-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.esoSet-btnPrimary {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    box-shadow: 0 12px 25px rgba(124,58,237,.20);
}

.esoSet-btnOutline {
    background: rgba(255,255,255,.04);
    border-color: rgba(124,58,237,.35);
}

    .esoSet-btnOutline:hover {
        background: rgba(124,58,237,.12);
        border-color: rgba(124,58,237,.48);
    }

.esoSet-btnGhost {
    min-width: 180px;
}

.esoSet-btnDanger {
    background: rgba(239,68,68,.18);
    border-color: rgba(239,68,68,.35);
}

    .esoSet-btnDanger:hover {
        background: rgba(239,68,68,.24);
        border-color: rgba(239,68,68,.50);
    }

.esoSet-btnIco {
    font-size: 15px;
}

.esoSet-btnText {
    font-size: 14px;
}

.esoSet-btnArrow {
    font-size: 16px;
    opacity: .95;
    margin-left: 2px;
}

/* Responsive */
@media (max-width: 980px) {
    .esoSet-hero {
        grid-template-columns: 1fr;
    }

    .esoSet-grid {
        grid-template-columns: 1fr;
    }

    .esoSet-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .esoSet-shell {
        padding: 14px 12px 28px 12px;
    }

    .esoSet-btnText {
        display: none;
    }
    /* icon-only on tiny phones */
    .esoSet-btnArrow {
        display: none;
    }

    .esoSet-codeRow {
        flex-direction: column;
    }

    .esoSet-btnGhost {
        min-width: unset;
    }
}

/* =========================================
       Esotoria Packages (Modern Dark + Playful)
       Prefix: esoPkg-
       ========================================= */
.esoPkg-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 14px;
    background: radial-gradient(900px 550px at 10% 15%, rgba(124,58,237,.30), transparent 60%), radial-gradient(800px 500px at 85% 25%, rgba(59,130,246,.22), transparent 55%), linear-gradient(180deg, #07081a 0%, #050516 100%);
    overflow-x: hidden;
}

.esoPkg-shell {
    width: min(1100px, 100%);
}

/* Header */
.esoPkg-head {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 14px 18px 14px;
}

.esoPkg-headIcon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 35px rgba(124,58,237,.20);
    color: rgba(255,255,255,.95);
    font-size: 22px;
}

.esoPkg-kicker {
    color: rgba(255,255,255,.70);
    font-weight: 450;
    font-size: 12.5px;
    letter-spacing: .3px;
}

.esoPkg-title {
    margin: 6px 0 4px 0;
    color: rgba(255,255,255,.96);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 450;
}

.esoPkg-sub {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
}

/* Alert */
.esoPkg-alert {
    margin: 10px 0 14px 0;
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.10);
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.esoPkg-alertTitle {
    color: rgba(255,255,255,.95);
    font-weight: 450;
}

.esoPkg-alertMsg {
    color: rgba(255,255,255,.75);
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.45;
}

.esoPkg-alertIco {
    font-size: 18px;
    margin-top: 2px;
}

/* Grid */
.esoPkg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Cards */
.esoPkg-card {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    padding: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

    .esoPkg-card::before {
        content: "";
        position: absolute;
        inset: auto -80px -90px auto;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: rgba(124,58,237,.10);
        filter: blur(0px);
    }

.esoPkg-free {
    background: radial-gradient(500px 300px at 20% 10%, rgba(124,58,237,.16), transparent 60%), rgba(255,255,255,.05);
}

.esoPkg-pro {
    background: radial-gradient(600px 360px at 20% 10%, rgba(255,255,255,.12), transparent 60%), linear-gradient(180deg, rgba(124,58,237,.90), rgba(124,58,237,.78));
    border-color: rgba(255,255,255,.18);
}

.esoPkg-current {
    box-shadow: 0 0 0 4px rgba(124,58,237,.30), 0 18px 45px rgba(0,0,0,.28);
    border-color: rgba(124,58,237,.55);
}

/* Top section */
.esoPkg-top {
    padding: 10px 6px 6px 6px;
}

.esoPkg-planName {
    color: rgba(255,255,255,.78);
    font-weight: 450;
    font-size: 18px;
}

.esoPkg-planBig {
    margin-top: 10px;
    color: rgba(255,255,255,.98);
    font-weight: 450;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 1px;
}

.esoPkg-priceRow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
}

.esoPkg-price {
    color: rgba(255,255,255,.98);
    font-weight: 450;
    font-size: 62px;
    line-height: 1;
}

.esoPkg-per {
    color: rgba(255,255,255,.88);
    font-weight: 450;
    font-size: 16px;
}

.esoPkg-planDesc {
    margin-top: 14px;
    color: rgba(255,255,255,.86);
    font-weight: 850;
    font-size: 14px;
    line-height: 1.45;
    max-width: 420px;
}

/* CTA */
.esoPkg-cta {
    margin: 16px 0 14px 0;
}

.esoPkg-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    font-weight: 450;
    letter-spacing: .2px;
    transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
}

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

    .esoPkg-btn:active {
        transform: translateY(0px) scale(.99);
    }

.esoPkg-btnMuted {
    background: rgba(255,255,255,.14);
    color: rgba(255,255,255,.90);
    cursor: not-allowed;
    opacity: .8;
}

.esoPkg-btnPrimarySoft {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    color: #fff;
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 18px 35px rgba(124,58,237,.20);
}

.esoPkg-btnDark {
    background: rgba(10,10,26,.70);
    color: rgba(255,255,255,.96);
    border-color: rgba(0,0,0,.20);
    box-shadow: 0 18px 35px rgba(0,0,0,.22);
}

    .esoPkg-btnDark:hover {
        background: rgba(10,10,26,.82);
    }

/* Features box */
.esoPkg-box {
    margin-top: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,10,26,.55);
    padding: 14px;
}

.esoPkg-boxPro {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
}

.esoPkg-boxTitle {
    color: rgba(255,255,255,.92);
    font-weight: 450;
    margin-bottom: 10px;
}

.esoPkg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgba(255,255,255,.88);
    font-weight: 900;
    font-size: 13px;
}

.esoPkg-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    margin-right: 10px;
    background: rgba(124,58,237,.25);
    border: 1px solid rgba(124,58,237,.35);
    color: rgba(255,255,255,.96);
    font-size: 12px;
}

.esoPkg-dotWhite {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.30);
}

/* Chips */
.esoPkg-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.95);
}

.esoPkg-chipGreen {
    background: rgba(34,197,94,.18);
    border-color: rgba(34,197,94,.30);
}

.esoPkg-chipPurple {
    background: rgba(124,58,237,.20);
    border-color: rgba(124,58,237,.35);
}

/* Footer */
.esoPkg-foot {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.esoPkg-back {
    border-radius: 999px;
    padding: 10px 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
    cursor: pointer;
    font-weight: 450;
    transition: transform .12s ease, background .12s ease;
}

    .esoPkg-back:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
    }

/* Responsive */
@media (max-width: 900px) {
    .esoPkg-grid {
        grid-template-columns: 1fr;
    }

    .esoPkg-planBig {
        font-size: 56px;
    }

    .esoPkg-price {
        font-size: 54px;
    }
}

@media (max-width: 520px) {
    .esoPkg-title {
        font-size: 22px;
    }

    .esoPkg-planBig {
        font-size: 50px;
    }

    .esoPkg-price {
        font-size: 48px;
    }
}

/* =========================================
       Esotoria Login (Modern Dark + Playful)
       Prefix: esoLog-
       ========================================= */
.esoLog-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 14px;
    background: radial-gradient(900px 550px at 10% 15%, rgba(124,58,237,.30), transparent 60%), radial-gradient(800px 500px at 85% 25%, rgba(59,130,246,.22), transparent 55%), radial-gradient(700px 460px at 70% 88%, rgba(16,185,129,.12), transparent 55%), linear-gradient(180deg, #07081a 0%, #050516 100%);
}

.esoLog-shell {
    width: min(420px, 100%);
}

.esoLog-card {
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,10,26,.55);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 55px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}

    .esoLog-card::before {
        content: "";
        position: absolute;
        inset: auto -90px -90px auto;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: rgba(124,58,237,.14);
    }

.esoLog-brand {
    text-align: center;
    padding: 8px 6px 14px 6px;
}

.esoLog-logo {
    height: 46px;
    width: auto;
    display: block;
    margin: 0 auto 10px auto;
    filter: drop-shadow(0 10px 20px rgba(124,58,237,.25));
}

.esoLog-title {
    color: rgba(255,255,255,.96);
    font-size: 24px;
    font-weight: 450;
    letter-spacing: .2px;
    margin: 0;
}

.esoLog-sub {
    color: rgba(255,255,255,.62);
    font-size: 13.5px;
    line-height: 1.45;
    margin-top: 6px;
}

.esoLog-summary {
    color: rgba(255,255,255,.80);
    font-size: 13px;
    margin: 6px 4px 10px 4px;
}

/* Fields */
.esoLog-field {
    margin-top: 12px;
}

.esoLog-label {
    display: block;
    color: rgba(255,255,255,.78);
    font-weight: 450;
    font-size: 12.5px;
    margin: 0 0 6px 2px;
}

.esoLog-input {
    width: 100%;
    border-radius: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    font-weight: 850;
    outline: none;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

    .esoLog-input::placeholder {
        color: rgba(255,255,255,.45);
        font-weight: 800;
    }

    .esoLog-input:focus {
        border-color: rgba(124,58,237,.60);
        background: rgba(255,255,255,.08);
        box-shadow: 0 0 0 4px rgba(124,58,237,.20);
    }

.esoLog-val {
    display: block;
    margin: 6px 2px 0 2px;
    color: rgba(239,68,68,.92);
    font-weight: 850;
    font-size: 12px;
}

/* Actions */
.esoLog-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.esoLog-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    user-select: none;
    font-weight: 450;
    letter-spacing: .2px;
}

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

    .esoLog-btn:active {
        transform: translateY(0px) scale(.99);
    }

    .esoLog-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.esoLog-btnPrimary {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    color: #fff;
    box-shadow: 0 18px 35px rgba(124,58,237,.20);
}

.esoLog-btnGhost {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.14);
}

    .esoLog-btnGhost:hover {
        background: rgba(255,255,255,.09);
    }

.esoLog-btnRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
}

.esoLog-arrow {
    font-size: 18px;
    opacity: .95;
}

/* Spinner (button) */
.esoLog-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: rgba(255,255,255,1);
    animation: esoLogSpin 1s linear infinite;
}

@keyframes esoLogSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Error */
.esoLog-error {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.10);
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.esoLog-errorIco {
    font-size: 16px;
    margin-top: 1px;
}

.esoLog-errorTxt {
    color: rgba(255,255,255,.85);
    font-weight: 850;
    font-size: 13px;
    line-height: 1.45;
}

/* Footer */
.esoLog-foot {
    margin-top: 14px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    text-align: center;
}

/* Mobile tweaks */
@media (max-width: 420px) {
    .esoLog-title {
        font-size: 21px;
    }

    .esoLog-card {
        padding: 16px;
    }
}

/* =========================================
       Esotoria Register (Modern Dark + Playful)
       Prefix: esoReg-
       ========================================= */
.esoReg-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 14px;
    background: radial-gradient(900px 550px at 10% 15%, rgba(124,58,237,.30), transparent 60%), radial-gradient(800px 500px at 85% 25%, rgba(59,130,246,.22), transparent 55%), radial-gradient(700px 460px at 70% 88%, rgba(16,185,129,.12), transparent 55%), linear-gradient(180deg, #07081a 0%, #050516 100%);
}

.esoReg-shell {
    width: min(440px, 100%);
}

.esoReg-card {
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,10,26,.55);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 55px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}

    .esoReg-card::before {
        content: "";
        position: absolute;
        inset: auto -90px -90px auto;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: rgba(59,130,246,.14);
    }

.esoReg-brand {
    text-align: center;
    padding: 8px 6px 14px 6px;
}

.esoReg-logo {
    height: 46px;
    width: auto;
    display: block;
    margin: 0 auto 10px auto;
    filter: drop-shadow(0 10px 20px rgba(124,58,237,.25));
}

.esoReg-title {
    color: rgba(255,255,255,.96);
    font-size: 24px;
    font-weight: 450;
    letter-spacing: .2px;
    margin: 0;
}

.esoReg-sub {
    color: rgba(255,255,255,.62);
    font-size: 13.5px;
    line-height: 1.45;
    margin-top: 6px;
}

.esoReg-summary {
    color: rgba(255,255,255,.80);
    font-size: 13px;
    margin: 6px 4px 10px 4px;
}

/* Fields */
.esoReg-field {
    margin-top: 12px;
}

.esoReg-label {
    display: block;
    color: rgba(255,255,255,.78);
    font-weight: 450;
    font-size: 12.5px;
    margin: 0 0 6px 2px;
}

.esoReg-input {
    width: 100%;
    border-radius: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    font-weight: 850;
    outline: none;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

    .esoReg-input::placeholder {
        color: rgba(255,255,255,.45);
        font-weight: 800;
    }

    .esoReg-input:focus {
        border-color: rgba(124,58,237,.60);
        background: rgba(255,255,255,.08);
        box-shadow: 0 0 0 4px rgba(124,58,237,.20);
    }

.esoReg-val {
    display: block;
    margin: 6px 2px 0 2px;
    color: rgba(239,68,68,.92);
    font-weight: 850;
    font-size: 12px;
}

/* Actions */
.esoReg-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.esoReg-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    user-select: none;
    font-weight: 450;
    letter-spacing: .2px;
}

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

    .esoReg-btn:active {
        transform: translateY(0px) scale(.99);
    }

    .esoReg-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.esoReg-btnPrimary {
    background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
    color: #fff;
    box-shadow: 0 18px 35px rgba(124,58,237,.20);
}

.esoReg-btnGhost {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.14);
}

    .esoReg-btnGhost:hover {
        background: rgba(255,255,255,.09);
    }

.esoReg-btnRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
}

.esoReg-arrow {
    font-size: 18px;
    opacity: .95;
}

/* Spinner (button) */
.esoReg-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: rgba(255,255,255,1);
    animation: esoRegSpin 1s linear infinite;
}

@keyframes esoRegSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Error */
.esoReg-error {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.10);
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.esoReg-errorIco {
    font-size: 16px;
    margin-top: 1px;
}

.esoReg-errorTxt {
    color: rgba(255,255,255,.85);
    font-weight: 850;
    font-size: 13px;
    line-height: 1.45;
}

/* Footer */
.esoReg-foot {
    margin-top: 14px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    text-align: center;
}

/* Mobile tweaks */
@media (max-width: 420px) {
    .esoReg-title {
        font-size: 21px;
    }

    .esoReg-card {
        padding: 16px;
    }
}


/*Quiz*/
/* ============================
   Esotoria Quiz Theme
   Dark • Playful • Consistent
   ============================ */

.eso-quiz-shell {
    min-height: calc(100vh - 0px);
    display: flex;
    justify-content: center;
    padding: 18px 14px 34px;
    background: radial-gradient(900px 520px at 18% 10%, rgba(4,188,255,.16), transparent 55%), radial-gradient(700px 380px at 85% 18%, rgba(163,87,255,.16), transparent 55%), radial-gradient(900px 520px at 55% 92%, rgba(0,255,170,.10), transparent 60%), linear-gradient(180deg, #070a14 0%, #070812 45%, #060610 100%);
    color: #EAF0FF;
}

.eso-quiz-wrap {
    width: min(980px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eso-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Buttons (same system) */
.eso-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 900;
    border: none;
    cursor: pointer;
    color: #071019;
    background: linear-gradient(90deg, #04BCFF, #A357FF);
    box-shadow: 0 10px 22px rgba(163,87,255,.18);
    transition: transform .15s ease, filter .15s ease;
}

    .eso-btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .eso-btn-primary:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.eso-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 13px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    color: rgba(234,240,255,.92);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, background .15s ease;
}

    .eso-btn-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.07);
    }

    .eso-btn-ghost:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* Top */
.eso-quiz-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}

    .eso-quiz-top::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(320px 160px at 18% 22%, rgba(4,188,255,.20), transparent 60%), radial-gradient(280px 160px at 82% 28%, rgba(163,87,255,.20), transparent 60%);
        filter: blur(6px);
        opacity: .9;
        pointer-events: none;
    }

.eso-quiz-brand {
    position: relative;
}

.eso-quiz-badge {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(4,188,255,.10);
    border: 1px solid rgba(4,188,255,.22);
    color: #BFEFFF;
    font-weight: 900;
    font-size: 12px;
}

.eso-quiz-title {
    margin-top: 10px;
    font-weight: 450;
    letter-spacing: -.4px;
    font-size: 22px;
}

.eso-quiz-sub {
    margin-top: 4px;
    color: rgba(234,240,255,.72);
    font-weight: 700;
    font-size: 12.5px;
}

    .eso-quiz-sub span {
        color: rgba(234,240,255,.90);
    }

.eso-quiz-actions {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Cards */
.eso-card {
    border-radius: 22px;
    padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 34px rgba(0,0,0,.40);
}

.eso-card-title {
    font-weight: 450;
    font-size: 18px;
    margin-bottom: 6px;
}

.eso-muted {
    color: rgba(234,240,255,.74);
    font-weight: 700;
}

    .eso-muted.danger {
        color: #ffb4b4;
    }

/* Meta */
.eso-quiz-meta {
    position: relative;
    overflow: hidden;
}

    .eso-quiz-meta::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(420px 200px at 22% 26%, rgba(4,188,255,.14), transparent 62%), radial-gradient(360px 200px at 86% 42%, rgba(0,255,170,.10), transparent 62%);
        filter: blur(10px);
        opacity: .85;
        pointer-events: none;
    }

.eso-meta-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}

@media (max-width: 860px) {
    .eso-meta-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

.eso-meta-item {
    border-radius: 18px;
    padding: 12px 12px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.10);
}

    .eso-meta-item .k {
        color: rgba(234,240,255,.68);
        font-weight: 800;
        font-size: 12.5px;
    }

    .eso-meta-item .v {
        margin-top: 4px;
        font-weight: 450;
        font-size: 15px;
    }

.eso-quiz-headline {
    position: relative;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

    .eso-quiz-headline .h {
        font-weight: 450;
        font-size: 18px;
        margin-bottom: 4px;
    }

.eso-mini {
    color: rgba(234,240,255,.72);
    font-weight: 700;
    font-size: 12.5px;
}

/* Alerts */
.eso-alert {
    border-radius: 20px;
    padding: 14px 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

    .eso-alert.success {
        background: rgba(0,255,170,.08);
        border-color: rgba(0,255,170,.18);
    }

    .eso-alert.danger {
        background: rgba(255,80,120,.08);
        border-color: rgba(255,80,120,.18);
    }

.eso-alert-title {
    font-weight: 450;
    margin-bottom: 4px;
}

.eso-alert-sub {
    color: rgba(234,240,255,.86);
    font-weight: 800;
}

/* Loader */
.eso-loader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.eso-spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: rgba(4,188,255,.80);
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.eso-loader-text {
    font-weight: 850;
    color: rgba(234,240,255,.82);
}

/* Scroll area */
.eso-quiz-scroll {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    padding-right: 6px;
    margin-top: 8px;
}

/* Question card */
.eso-qcard {
    border-radius: 22px;
    padding: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    margin-bottom: 12px;
}

.eso-qhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.qtext {
    display: flex;
    gap: 10px;
    font-weight: 900;
    color: rgba(234,240,255,.92);
}

.qnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    background: rgba(4,188,255,.10);
    border: 1px solid rgba(4,188,255,.18);
    color: #BFEFFF;
    font-weight: 450;
    flex: 0 0 26px;
}

.eso-pill {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,255,170,.10);
    border: 1px solid rgba(0,255,170,.18);
    color: rgba(234,240,255,.92);
    font-weight: 900;
    font-size: 12px;
}

/* Answers */
.eso-answers {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.eso-answer {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .eso-answer input[type="radio"] {
        transform: scale(1.06);
        margin-left: 4px;
    }

.eso-answer-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    cursor: pointer;
    user-select: none;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

    .eso-answer-box:hover {
        transform: translateY(-1px);
        border-color: rgba(4,188,255,.22);
        background: rgba(4,188,255,.06);
    }

.eso-answer-letter {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 450;
    background: rgba(163,87,255,.10);
    border: 1px solid rgba(163,87,255,.18);
}

.eso-answer-text {
    font-weight: 800;
    color: rgba(234,240,255,.90);
    font-size: 14px;
}

/* Sticky bottom bar */
.eso-quiz-bottom {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(6,6,16,0) 0%, rgba(6,6,16,.92) 26%, rgba(6,6,16,1) 100%);
}

/*Typing*/
/* ============================
   Esotoria Typing Theme
   Dark • Playful • Consistent
   ============================ */

.eso-typing-shell {
    min-height: calc(100vh - 0px);
    display: flex;
    justify-content: center;
    padding: 26px 16px 40px;
    background: radial-gradient(900px 500px at 18% 12%, rgba(4, 188, 255, .18), transparent 55%), radial-gradient(700px 380px at 85% 20%, rgba(163, 87, 255, .18), transparent 55%), radial-gradient(900px 520px at 50% 95%, rgba(0, 255, 170, .10), transparent 60%), linear-gradient(180deg, #070a14 0%, #070812 45%, #060610 100%);
    color: #EAF0FF;
}

.eso-typing-wrap {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 880px) {
    .eso-typing-wrap {
        grid-template-columns: 1fr;
    }
}

/* Hero */
.eso-typing-hero {
    border-radius: 22px;
    padding: 20px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}

    .eso-typing-hero::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(300px 140px at 15% 20%, rgba(4,188,255,.22), transparent 60%), radial-gradient(260px 140px at 80% 30%, rgba(163,87,255,.22), transparent 60%);
        filter: blur(6px);
        opacity: .9;
        pointer-events: none;
    }

.eso-typing-badge {
    position: relative;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(4,188,255,.10);
    border: 1px solid rgba(4,188,255,.22);
    color: #BFEFFF;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 12px;
}

.eso-typing-title {
    position: relative;
    margin: 14px 0 10px;
    font-size: clamp(36px, 4.2vw, 52px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.8px;
}

.lesson-text{
    color: #000000;
}

    .eso-typing-title span {
        background: linear-gradient(90deg, #04BCFF, #A357FF, #00FFAA);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.eso-typing-lead {
    position: relative;
    margin: 0;
    max-width: 62ch;
    color: rgba(234,240,255,.85);
    font-size: 15px;
    line-height: 1.6;
}

.eso-typing-accent {
    color: #04BCFF;
    text-shadow: 0 0 18px rgba(4,188,255,.22);
}

/* Buttons */
.eso-typing-actions {
    position: relative;
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.eso-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 900;
    color: #071019;
    background: linear-gradient(90deg, #04BCFF, #A357FF);
    box-shadow: 0 10px 22px rgba(163,87,255,.18);
    transition: transform .15s ease, filter .15s ease;
}

    .eso-btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

.eso-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    color: rgba(234,240,255,.9);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, background .15s ease;
}

    .eso-btn-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.07);
    }

.eso-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 900;
    color: rgba(234,240,255,.95);
    background: rgba(0,255,170,.10);
    border: 1px solid rgba(0,255,170,.20);
    transition: transform .15s ease, filter .15s ease;
}

    .eso-btn-secondary:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

/* Visual */
.eso-typing-visual {
    display: flex;
    justify-content: stretch;
}

.eso-typing-imagecard {
    width: 100%;
    border-radius: 22px;
    padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.eso-typing-image {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.08);
}

.eso-typing-imagehint {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    color: rgba(234,240,255,.86);
    background: rgba(4,188,255,.06);
    border: 1px solid rgba(4,188,255,.12);
    font-weight: 700;
    font-size: 13px;
}

/* How it works card */
.eso-typing-card {
    grid-column: 1 / -1;
    border-radius: 22px;
    padding: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.eso-typing-cardtitle {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .2px;
}

.eso-typing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

    .eso-typing-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: rgba(234,240,255,.86);
        line-height: 1.5;
    }

    .eso-typing-list .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        margin-top: 6px;
        background: linear-gradient(180deg, #04BCFF, #A357FF);
        box-shadow: 0 0 14px rgba(4,188,255,.25);
        flex: 0 0 10px;
    }

.eso-typing-footer {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 12px;
}

.eso-typing-mini {
    color: rgba(234,240,255,.70);
    font-weight: 700;
    font-size: 12.5px;
}


/*Typing Fall*/
/* ============================
   Esotoria Typing - Fall Mode
   Dark • Playful • Arcade
   ============================ */

.eso-fall-shell {
    min-height: calc(100vh - 0px);
    display: flex;
    justify-content: center;
    padding: 18px 14px 34px;
    background: radial-gradient(900px 520px at 18% 10%, rgba(4,188,255,.16), transparent 55%), radial-gradient(700px 380px at 85% 18%, rgba(163,87,255,.16), transparent 55%), radial-gradient(900px 520px at 55% 92%, rgba(0,255,170,.10), transparent 60%), linear-gradient(180deg, #070a14 0%, #070812 45%, #060610 100%);
    color: #EAF0FF;
}

.eso-fall-wrap {
    width: min(1100px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Buttons (same system as /typing) */
.eso-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 900;
    border: none;
    cursor: pointer;
    color: #071019;
    background: linear-gradient(90deg, #04BCFF, #A357FF);
    box-shadow: 0 10px 22px rgba(163,87,255,.18);
    transition: transform .15s ease, filter .15s ease;
}

    .eso-btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .eso-btn-primary:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.eso-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 13px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    color: rgba(234,240,255,.92);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, background .15s ease;
}

    .eso-btn-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.07);
    }

    .eso-btn-ghost:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* Top bar */
.eso-fall-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}

    .eso-fall-top::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(320px 160px at 18% 22%, rgba(4,188,255,.20), transparent 60%), radial-gradient(280px 160px at 82% 28%, rgba(163,87,255,.20), transparent 60%);
        filter: blur(6px);
        opacity: .9;
        pointer-events: none;
    }

.eso-fall-brand {
    position: relative;
}

.eso-fall-badge {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(4,188,255,.10);
    border: 1px solid rgba(4,188,255,.22);
    color: #BFEFFF;
    font-weight: 900;
    font-size: 12px;
}

.eso-fall-title {
    margin-top: 10px;
    font-weight: 450;
    letter-spacing: -.4px;
    font-size: 22px;
}

.eso-fall-sub {
    margin-top: 4px;
    color: rgba(234,240,255,.76);
    font-weight: 700;
    font-size: 13px;
}

.eso-fall-controls {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Layout */
.eso-fall-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 920px) {
    .eso-fall-grid {
        grid-template-columns: 1fr;
    }
}

/* Stage */
.eso-fall-stage {
    position: relative;
    height: min(520px, 62vh);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.40);
    cursor: pointer;
}

.eso-fall-sky {
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 420px at 30% 18%, rgba(4,188,255,.10), transparent 55%), radial-gradient(700px 360px at 80% 20%, rgba(163,87,255,.10), transparent 55%), linear-gradient(180deg, rgba(10,14,30,.92) 0%, rgba(7,10,20,.92) 100%);
}

.eso-fall-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%), radial-gradient(500px 120px at 50% 0%, rgba(0,255,170,.18), transparent 65%);
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Meteors */
.eso-meteor {
    position: absolute;
    transform: translate(-50%, 0);
    pointer-events: none;
}

.eso-word {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 450;
    letter-spacing: .2px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    color: rgba(234,240,255,.92);
    text-shadow: 0 0 18px rgba(4,188,255,.18);
}

    .eso-word.active {
        background: rgba(4,188,255,.10);
        border: 1px solid rgba(4,188,255,.28);
        box-shadow: 0 12px 22px rgba(0,0,0,.35), 0 0 26px rgba(4,188,255,.18);
    }

/* HUD */
.eso-hud {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 5;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(6px);
    font-weight: 800;
    color: rgba(234,240,255,.90);
}

    .hud-item span {
        font-size: 14px;
    }

    .hud-item b {
        font-weight: 450;
    }

/* Stage hint */
.eso-fall-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 6;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px dashed rgba(255,255,255,.18);
    color: rgba(234,240,255,.78);
    font-weight: 800;
    font-size: 12.5px;
}

/* Right panel */
.eso-fall-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eso-panel-card {
    border-radius: 20px;
    padding: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

    .eso-panel-card.subtle {
        background: rgba(255,255,255,.03);
    }

.eso-panel-title {
    font-weight: 450;
    letter-spacing: .2px;
    margin-bottom: 10px;
}

.eso-type-buffer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(4,188,255,.06);
    border: 1px solid rgba(4,188,255,.12);
}

    .eso-type-buffer b {
        font-weight: 450;
        color: #04BCFF;
        text-shadow: 0 0 18px rgba(4,188,255,.18);
    }

.eso-panel-tips {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(234,240,255,.82);
    font-weight: 800;
}

    .tip span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 10px;
        background: rgba(163,87,255,.12);
        border: 1px solid rgba(163,87,255,.20);
        font-weight: 450;
    }

/* Hidden input */
.eso-hidden-capture {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    height: 1px;
    width: 1px;
    left: -9999px;
    top: -9999px;
}

/* Finish card */
.eso-finish-card {
    border-radius: 24px;
    padding: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 34px rgba(0,0,0,.40);
    text-align: center;
}

.eso-finish-emoji {
    font-size: 40px;
    margin-bottom: 6px;
}

.eso-finish-title {
    margin: 6px 0 12px;
    font-weight: 450;
}

.eso-finish-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

@media (max-width: 920px) {
    .eso-finish-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

.stat {
    text-align: left;
    padding: 12px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
}

    .stat span {
        display: block;
        color: rgba(234,240,255,.70);
        font-weight: 800;
        font-size: 12.5px;
    }

    .stat b {
        display: block;
        margin-top: 4px;
        font-weight: 450;
        font-size: 16px;
    }

.eso-muted {
    color: rgba(234,240,255,.78);
    font-weight: 800;
}

    .eso-muted.danger {
        color: #ffb4b4;
    }

.eso-finish-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================
     TYL1 = Type Level 1 (namespaced, no collisions)
  ========================================================= */
.tyl1-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.tyl1-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* layout */
.tyl1-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr);
    gap: 16px;
    align-items: start;
}

.tyl1-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tyl1-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tyl1-sticky {
    position: sticky;
    top: 12px;
}

@media (max-width: 920px) {
    .tyl1-layout {
        grid-template-columns: 1fr;
    }

    .tyl1-sticky {
        position: relative;
        top: auto;
    }
}

/* surfaces */
.tyl1-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

/* arena */
.tyl1-arena {
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
}

    .tyl1-arena::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 160px at 15% 20%, rgba(68,230,255,.22), transparent 55%), radial-gradient(600px 180px at 80% 10%, rgba(255,79,216,.18), transparent 55%), radial-gradient(700px 240px at 50% 110%, rgba(139,92,255,.20), transparent 55%);
        pointer-events: none;
    }

    .tyl1-arena > * {
        position: relative;
        z-index: 1;
    }

.tyl1-label {
    font-size: 12px;
    color: #a7b2d9;
    letter-spacing: .3px;
}

.tyl1-arenaTitle {
    text-align: center;
    margin-top: 2px;
    margin-bottom: 6px;
}

.tyl1-bubble {
    width: min(320px, 100%);
    margin: 8px auto 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 10px;
}

.tyl1-letter {
    font-size: 92px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* chips */
.tyl1-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tyl1-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    font-weight: 800;
    font-size: 13px;
}

.tyl1-chipLeft {
    border-color: rgba(68,230,255,.35);
    box-shadow: 0 0 0 2px rgba(68,230,255,.10) inset;
}

.tyl1-chipRight {
    border-color: rgba(255,79,216,.35);
    box-shadow: 0 0 0 2px rgba(255,79,216,.10) inset;
}

.tyl1-chipFinger {
    border-color: rgba(139,92,255,.35);
    box-shadow: 0 0 0 2px rgba(139,92,255,.10) inset;
}

/* stats */
.tyl1-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 920px) {
    .tyl1-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tyl1-stat {
    padding: 12px 12px 10px;
}

.tyl1-statVal {
    font-size: 20px;
    font-weight: 900;
}

.tyl1-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 10px;
}

.tyl1-barFill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    box-shadow: 0 0 18px rgba(68,230,255,.22);
}

.tyl1-tip {
    margin: 0;
    color: #a7b2d9;
    font-size: 13px;
    opacity: .95;
    padding-left: 4px;
}

/* right column */
.tyl1-slot {
    padding: 12px;
}

.tyl1-figure {
    padding: 12px;
    overflow: hidden;
}

    .tyl1-figure img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.10);
        display: block;
        filter: saturate(1.05) contrast(1.02);
    }

.tyl1-figcap {
    margin-top: 10px;
    font-size: 12px;
    color: #a7b2d9;
}

/* warmup overlay */
.tyl1-warmOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(6px);
}

.tyl1-warmCard {
    background: radial-gradient(800px 260px at 20% 10%, rgba(68,230,255,.18), transparent 55%), radial-gradient(800px 260px at 80% 0%, rgba(255,79,216,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    text-align: center;
    width: min(560px, 92vw);
}

.tyl1-warmCount {
    font-size: 76px;
    font-weight: 450;
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tyl1-warmTip {
    margin: 0 0 12px 0;
    color: #a7b2d9;
}

.tyl1-warmMini {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

    .tyl1-warmMini img {
        height: 56px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(0,0,0,.18);
    }

/* hidden input */
.tyl1-capture {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    left: -9999px;
}

/* finish */
.tyl1-finish {
    margin-top: 18px;
    padding: 18px 18px 16px;
    text-align: center;
}

.tyl1-finishEmoji {
    font-size: 40px;
    margin-bottom: 6px;
}

.tyl1-finishTitle {
    margin: 0 0 12px 0;
    font-size: 22px;
}

.tyl1-finishStats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

@media (max-width: 920px) {
    .tyl1-finishStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tyl1-finishBox {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
}

    .tyl1-finishBox span {
        display: block;
        color: #a7b2d9;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .tyl1-finishBox b {
        font-size: 18px;
    }

/* ctas */
.tyl1-ctaRow {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tyl1-btnPrimary {
    border: 0;
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 900;
    color: #071018;
    cursor: pointer;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.18);
    transition: transform .12s ease, filter .12s ease;
}

    .tyl1-btnPrimary:hover {
        transform: translateY(-1px);
        filter: saturate(1.08);
    }

    .tyl1-btnPrimary:active {
        transform: translateY(0px) scale(.98);
    }

.tyl1-btnGhost {
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none;
    color: #eaf0ff;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    transition: transform .12s ease, background .12s ease;
    display: inline-block;
}

    .tyl1-btnGhost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

/* feedback anims */
.tyl1-correct {
    animation: tyl1Pulse .22s ease-out;
    border-color: rgba(124,255,107,.35) !important;
}

@keyframes tyl1Pulse {
    from {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0,0,0,.45);
    }

    to {
        transform: scale(1.01);
        box-shadow: 0 18px 60px rgba(124,255,107,.14);
    }
}

.tyl1-wrong {
    animation: tyl1Shake .22s ease-in-out;
    border-color: rgba(255,79,216,.35) !important;
}

@keyframes tyl1Shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }
}

/*Level 1 Quiz*/

.l1q-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.l1q-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* surfaces */
.l1q-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

/* controls */
.l1q-controls {
    margin-bottom: 14px;
}

.l1q-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
}

.l1q-btnPrimary {
    border: 0;
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 900;
    color: #071018;
    cursor: pointer;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.18);
    transition: transform .12s ease, filter .12s ease;
}

    .l1q-btnPrimary:hover {
        transform: translateY(-1px);
        filter: saturate(1.08);
    }

    .l1q-btnPrimary:active {
        transform: translateY(0px) scale(.98);
    }

    .l1q-btnPrimary:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.l1q-btnGhost {
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none;
    color: #eaf0ff;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    transition: transform .12s ease, background .12s ease;
    display: inline-block;
}

    .l1q-btnGhost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

    .l1q-btnGhost:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/* arena */
.l1q-arena {
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

    .l1q-arena::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 160px at 15% 20%, rgba(68,230,255,.22), transparent 55%), radial-gradient(600px 180px at 80% 10%, rgba(255,79,216,.18), transparent 55%), radial-gradient(700px 240px at 50% 110%, rgba(139,92,255,.20), transparent 55%);
        pointer-events: none;
    }

    .l1q-arena > * {
        position: relative;
        z-index: 1;
    }

.l1q-bubble {
    width: min(320px, 100%);
    margin: 8px auto 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 10px;
}

.l1q-letter {
    font-size: 92px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* chips */
.l1q-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.l1q-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    font-weight: 800;
    font-size: 13px;
}

.l1q-chipLeft {
    border-color: rgba(68,230,255,.35);
    box-shadow: 0 0 0 2px rgba(68,230,255,.10) inset;
}

.l1q-chipRight {
    border-color: rgba(255,79,216,.35);
    box-shadow: 0 0 0 2px rgba(255,79,216,.10) inset;
}

.l1q-chipFinger {
    border-color: rgba(139,92,255,.35);
    box-shadow: 0 0 0 2px rgba(139,92,255,.10) inset;
}

.l1q-chipTimer {
    border-color: rgba(255,204,102,.35);
    box-shadow: 0 0 0 2px rgba(255,204,102,.10) inset;
}

/* stats */
.l1q-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

@media (max-width: 920px) {
    .l1q-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l1q-stat {
    padding: 12px 12px 10px;
}

.l1q-label {
    font-size: 12px;
    color: #a7b2d9;
    letter-spacing: .3px;
    margin-bottom: 6px;
}

.l1q-value {
    font-size: 20px;
    font-weight: 900;
}

.l1q-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 10px;
}

.l1q-barFill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    box-shadow: 0 0 18px rgba(68,230,255,.22);
}

.l1q-tip {
    margin: 0 0 12px 0;
    color: #a7b2d9;
    font-size: 13px;
    opacity: .95;
}

/* hidden input */
.l1q-capture {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    left: -9999px;
}

/* feedback anim (kept same behavior) */
.l1q-wrong {
    animation: l1qShake .22s ease-in-out;
    border-color: rgba(255,79,216,.35) !important;
}

@keyframes l1qShake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }
}

/* finish */
.l1q-finish {
    padding: 18px 18px 16px;
    text-align: center;
}

.l1q-finishEmoji {
    font-size: 40px;
    margin-bottom: 6px;
}

.l1q-finishTitle {
    margin: 0 0 12px 0;
    font-size: 22px;
}

.l1q-finishStats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

@media (max-width: 920px) {
    .l1q-finishStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l1q-finishBox {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    text-align: left;
}

    .l1q-finishBox span {
        display: block;
        color: #a7b2d9;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .l1q-finishBox b {
        font-size: 18px;
    }

.l1q-muted {
    color: #a7b2d9;
}

/* results table */
.l1q-tableWrap {
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    text-align: left;
}

.l1q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .l1q-table thead th {
        background: rgba(0,0,0,.22);
        color: #eaf0ff;
        padding: 10px 10px;
        border-bottom: 1px solid rgba(255,255,255,.10);
        white-space: nowrap;
    }

    .l1q-table tbody td {
        padding: 10px 10px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: #eaf0ff;
    }

    .l1q-table tbody tr:hover {
        background: rgba(255,255,255,.04);
    }

/* cta row */
.l1q-ctaRow {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

/*Typing Level 2*/
.tyl2-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.tyl2-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* layout: 2 columns */
.tyl2-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr);
    gap: 16px;
    align-items: start;
}

.tyl2-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tyl2-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tyl2-sticky {
    position: sticky;
    top: 12px;
}

@media (max-width: 920px) {
    .tyl2-layout {
        grid-template-columns: 1fr;
    }

    .tyl2-sticky {
        position: relative;
        top: auto;
    }
}

/* surfaces */
.tyl2-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

/* arena */
.tyl2-arena {
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
}

    .tyl2-arena::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 160px at 15% 20%, rgba(68,230,255,.22), transparent 55%), radial-gradient(600px 180px at 80% 10%, rgba(255,79,216,.18), transparent 55%), radial-gradient(700px 240px at 50% 110%, rgba(139,92,255,.20), transparent 55%);
        pointer-events: none;
    }

    .tyl2-arena > * {
        position: relative;
        z-index: 1;
    }

.tyl2-bubble {
    width: min(320px, 100%);
    margin: 8px auto 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 10px;
}

.tyl2-letter {
    font-size: 92px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* chips */
.tyl2-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tyl2-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    font-weight: 800;
    font-size: 13px;
}

.tyl2-chipLeft {
    border-color: rgba(68,230,255,.35);
    box-shadow: 0 0 0 2px rgba(68,230,255,.10) inset;
}

.tyl2-chipRight {
    border-color: rgba(255,79,216,.35);
    box-shadow: 0 0 0 2px rgba(255,79,216,.10) inset;
}

.tyl2-chipFinger {
    border-color: rgba(139,92,255,.35);
    box-shadow: 0 0 0 2px rgba(139,92,255,.10) inset;
}

/* stats placeholder grid (keep even if you render dynamic stats) */
.tyl2-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 920px) {
    .tyl2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tyl2-stat {
    padding: 12px 12px 10px;
}

.tyl2-label {
    font-size: 12px;
    color: #a7b2d9;
    letter-spacing: .3px;
    margin-bottom: 6px;
}

.tyl2-value {
    font-size: 20px;
    font-weight: 900;
}

.tyl2-tip {
    margin: 0;
    color: #a7b2d9;
    font-size: 13px;
    opacity: .95;
    padding-left: 4px;
}

/* right panel */
.tyl2-slot {
    padding: 12px;
}

.tyl2-figure {
    padding: 12px;
    overflow: hidden;
}

    .tyl2-figure img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.10);
        display: block;
        filter: saturate(1.05) contrast(1.02);
    }

.tyl2-figcap {
    margin-top: 10px;
    font-size: 12px;
    color: #a7b2d9;
}

/* hidden input capture */
.tyl2-capture {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    left: -9999px;
}

/* feedback animations */
.tyl2-correct {
    animation: tyl2Pulse .22s ease-out;
    border-color: rgba(124,255,107,.35) !important;
}

@keyframes tyl2Pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.01);
        box-shadow: 0 18px 60px rgba(124,255,107,.14);
    }
}

.tyl2-wrong {
    animation: tyl2Shake .22s ease-in-out;
    border-color: rgba(255,79,216,.35) !important;
}

@keyframes tyl2Shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }
}

/* optional: focus ring to help “click to focus” */
.tyl2-page:focus-within .tyl2-arena {
    outline: 2px solid rgba(68,230,255,.18);
    outline-offset: 2px;
}

/* =========================================================
     PLY = Play Hub (namespaced, no collisions)
  ========================================================= */
.ply-page {
    min-height: 100vh;
    padding: 22px 14px 34px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.ply-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

/* heading */
.ply-title {
    margin: 0;
    font-weight: 450;
    letter-spacing: -.6px;
    line-height: 1.02;
    font-size: clamp(34px, 5vw, 54px);
    text-align: center;
}

    .ply-title .ply-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.ply-lead {
    margin: 10px auto 0;
    max-width: 680px;
    text-align: center;
    color: #a7b2d9;
    font-size: 14px;
    line-height: 1.5;
}

/* center hero image */
.ply-hero {
    width: min(420px, 90%);
    display: block;
    margin: 16px auto 18px;
    filter: drop-shadow(0 22px 60px rgba(0,0,0,.55));
    border-radius: 18px;
}

/* grid */
.ply-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 10px;
}

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

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

/* card */
.ply-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 14px;
    text-decoration: none;
    color: #eaf0ff;
    transform: translateY(0);
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ply-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.16);
        background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    }

    /* card glow accents (per type) */
    .ply-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 180px at 15% 20%, rgba(68,230,255,.18), transparent 55%), radial-gradient(600px 220px at 85% 10%, rgba(255,79,216,.14), transparent 55%), radial-gradient(700px 260px at 50% 115%, rgba(139,92,255,.14), transparent 55%);
        opacity: .85;
        pointer-events: none;
    }

    .ply-card > * {
        position: relative;
        z-index: 1;
    }

    .ply-card.ply-accent1::before {
        background: radial-gradient(650px 220px at 20% 10%, rgba(68,230,255,.22), transparent 58%), radial-gradient(700px 260px at 70% 110%, rgba(139,92,255,.18), transparent 60%);
    }

    .ply-card.ply-accent2::before {
        background: radial-gradient(650px 220px at 20% 10%, rgba(255,79,216,.18), transparent 58%), radial-gradient(700px 260px at 70% 110%, rgba(68,230,255,.14), transparent 60%);
    }

    .ply-card.ply-accentQuiz::before {
        background: radial-gradient(650px 220px at 20% 10%, rgba(255,204,102,.18), transparent 58%), radial-gradient(700px 260px at 70% 110%, rgba(255,79,216,.14), transparent 60%);
    }

    .ply-card.ply-accentRace::before {
        background: radial-gradient(650px 220px at 20% 10%, rgba(124,255,107,.16), transparent 58%), radial-gradient(700px 260px at 70% 110%, rgba(68,230,255,.14), transparent 60%);
    }

/* top chip */
.ply-type {
    display: inline-flex;
    align-self: flex-start;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    font-weight: 900;
    font-size: 12px;
}

/* icon */
.ply-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.20);
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    margin-top: 4px;
}

.ply-name {
    font-size: 18px;
    font-weight: 450;
    margin-top: 2px;
}

.ply-desc {
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.35;
    margin-top: -2px;
    flex: 1;
}

/* CTA */
.ply-cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    width: max-content;
    transition: transform .12s ease, filter .12s ease;
}

.ply-card:hover .ply-cta {
    transform: translateY(-1px);
    filter: saturate(1.06);
}

/* footer */
.ply-footer {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

.ply-back {
    color: #eaf0ff;
    text-decoration: none;
    font-weight: 900;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    transition: transform .12s ease, background .12s ease;
}

    .ply-back:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

/* =========================================================
     TYL2 = Type Level 2 (namespaced, no collisions)
  ========================================================= */
.tyl2-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.tyl2-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* 2-column layout */
.tyl2-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr);
    gap: 16px;
    align-items: start;
}

.tyl2-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tyl2-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tyl2-sticky {
    position: sticky;
    top: 12px;
}

@media (max-width: 920px) {
    .tyl2-layout {
        grid-template-columns: 1fr;
    }

    .tyl2-sticky {
        position: relative;
        top: auto;
    }
}

/* Title */
.tyl2-title {
    margin: 0 0 10px 0;
    font-weight: 450;
    letter-spacing: -.4px;
    line-height: 1.1;
    font-size: clamp(20px, 2.2vw, 28px);
    text-align: left;
}

    .tyl2-title .tyl2-emoji {
        margin-right: 8px;
    }

/* Warm-up overlay */
.tyl2-warmOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(6px);
}

.tyl2-warmCard {
    background: radial-gradient(800px 260px at 20% 10%, rgba(68,230,255,.18), transparent 55%), radial-gradient(800px 260px at 80% 0%, rgba(255,79,216,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    text-align: center;
    width: min(560px, 92vw);
    color: #eaf0ff;
}

.tyl2-warmCount {
    font-size: 76px;
    font-weight: 450;
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tyl2-warmTip {
    margin: 0 0 12px 0;
    color: #a7b2d9;
}

.tyl2-warmMini {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

    .tyl2-warmMini img {
        height: 56px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(0,0,0,.18);
    }

/* Surface card */
.tyl2-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

/* Arena */
.tyl2-arena {
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
}

    .tyl2-arena::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 160px at 15% 20%, rgba(68,230,255,.22), transparent 55%), radial-gradient(600px 180px at 80% 10%, rgba(255,79,216,.18), transparent 55%), radial-gradient(700px 240px at 50% 110%, rgba(139,92,255,.20), transparent 55%);
        pointer-events: none;
    }

    .tyl2-arena > * {
        position: relative;
        z-index: 1;
    }

/* ===== Fix the weird spacing WITHOUT killing the style ===== */

/* Stop justify/stretch effects */
.tyl2-wordBubble, .word-bubble {
    text-align: center !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    font-size:80px;
}

/* Keep punchy style */
.tyl2-word, .word {
    display: inline-block; /* prevents justify spreading */
    font-weight: 450; /* super bold */
    letter-spacing: 2px; /* small controlled spacing */
    word-spacing: 0;
    line-height: 1;
    /* gradient text */
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* extra pop */
    text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* OPTIONAL: if any global rule is forcing justify on spans */
.word-bubble span, .tyl2-wordBubble span {
    text-align: center !important;
    text-align-last: auto !important;
    text-justify: auto !important;
}



/* Chips */
.tyl2-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tyl2-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    font-weight: 900;
    font-size: 13px;
}

.tyl2-chipInfo {
    border-color: rgba(139,92,255,.35);
    box-shadow: 0 0 0 2px rgba(139,92,255,.10) inset;
}

.tyl2-chipAuto {
    border-color: rgba(68,230,255,.35);
    box-shadow: 0 0 0 2px rgba(68,230,255,.10) inset;
}

/* Visible input */
.tyl2-input {
    width: min(560px, 100%);
    margin: 12px auto 0;
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 18px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    transition: border-color .12s ease, transform .12s ease, background .12s ease;
}

    .tyl2-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .tyl2-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

    .tyl2-input:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/* Stats */
.tyl2-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 920px) {
    .tyl2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tyl2-stat {
    padding: 12px 12px 10px;
}

.tyl2-label {
    font-size: 12px;
    color: #a7b2d9;
    letter-spacing: .3px;
    margin-bottom: 6px;
}

.tyl2-value {
    font-size: 20px;
    font-weight: 450;
}

.tyl2-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 10px;
}

.tyl2-barFill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    box-shadow: 0 0 18px rgba(68,230,255,.22);
}

.tyl2-tip {
    margin: 0;
    color: #a7b2d9;
    font-size: 13px;
    opacity: .95;
    padding-left: 4px;
}

/* Right side */
.tyl2-slot {
    padding: 12px;
}

.tyl2-figure {
    padding: 12px;
    overflow: hidden;
    margin: 0;
}

    .tyl2-figure img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.10);
        display: block;
        filter: saturate(1.05) contrast(1.02);
    }

.tyl2-figcap {
    margin-top: 10px;
    font-size: 12px;
    color: #a7b2d9;
}

/* Finish */
.tyl2-finish {
    padding: 18px 18px 16px;
    text-align: center;
}

.tyl2-finishEmoji {
    font-size: 40px;
    margin-bottom: 6px;
}

.tyl2-finishTitle {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 450;
}

.tyl2-finishStats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

@media (max-width: 920px) {
    .tyl2-finishStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tyl2-finishBox {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    text-align: left;
}

    .tyl2-finishBox span {
        display: block;
        color: #a7b2d9;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .tyl2-finishBox b {
        font-size: 18px;
    }

.tyl2-ctaRow {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tyl2-word,
.word {
    display: inline-block !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-align: center !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    font-kerning: normal !important;
}

/* Also force the container NOT to justify */
.tyl2-wordBubble,
.word-bubble {
    text-align: center !important;
    text-align-last: auto !important;
    text-justify: auto !important;
}

.tyl2-btn {
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

    .tyl2-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

.tyl2-btnPrimary {
    border: 0;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
}

/* OPTIONAL: keeps compatibility if your old CSS relies on these generic classes */
.level1-rows-play.tyl2-scope { /* wrapper marker */
}

/* =========================================================
     L2Q = Level 2 Quiz (namespaced, no collisions)
  ========================================================= */
.l2q-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.l2q-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* controls row */
.l2q-controls {
    display: flex;
    justify-content: center;
    margin: 4px 0 14px;
}

.l2q-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

    .l2q-actions .lc-cta {
        border: 0;
        padding: 10px 14px;
        border-radius: 14px;
        font-weight: 450;
        color: #071018;
        background: linear-gradient(90deg, #44e6ff, #7CFF6B);
        box-shadow: 0 14px 30px rgba(68,230,255,.16);
        cursor: pointer;
    }

    .l2q-actions .btn.ghost {
        padding: 10px 14px;
        border-radius: 14px;
        font-weight: 450;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.06);
        color: #eaf0ff;
        text-decoration: none;
        cursor: pointer;
    }

        .l2q-actions .btn.ghost[disabled] {
            opacity: .55;
            cursor: not-allowed;
        }

/* arena surface */
.l2q-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

.l2q-arena {
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

    .l2q-arena::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 160px at 15% 20%, rgba(68,230,255,.22), transparent 55%), radial-gradient(600px 180px at 80% 10%, rgba(255,79,216,.18), transparent 55%), radial-gradient(700px 240px at 50% 110%, rgba(139,92,255,.20), transparent 55%);
        pointer-events: none;
    }

    .l2q-arena > * {
        position: relative;
        z-index: 1;
    }

/* word bubble */
.l2q-wordBubble {
    width: min(560px, 100%);
    margin: 6px auto 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 14px;
    text-align: center !important;
    text-align-last: auto !important;
    text-justify: auto !important;
}

.l2q-word {
    display: inline-block; /* prevents “G O O D” stretching */
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 450;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* chips */
.l2q-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.l2q-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    font-weight: 900;
    font-size: 13px;
}

.l2q-chipTimer {
    border-color: rgba(255,79,216,.35);
    box-shadow: 0 0 0 2px rgba(255,79,216,.10) inset;
}

/* input */
.l2q-input {
    width: min(560px, 100%);
    margin: 12px auto 0;
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 18px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

    .l2q-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .l2q-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
    }

/* stats */
.l2q-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 920px) {
    .l2q-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l2q-stat {
    padding: 12px 12px 10px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
}

.l2q-label {
    font-size: 12px;
    color: #a7b2d9;
    letter-spacing: .3px;
    margin-bottom: 6px;
}

.l2q-value {
    font-size: 20px;
    font-weight: 450;
}

.l2q-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 10px;
}

.l2q-barFill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    box-shadow: 0 0 18px rgba(68,230,255,.22);
}

.l2q-tip {
    margin: 12px 0 0;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

/* finish card */
.l2q-finish {
    padding: 18px 18px 16px;
    text-align: center;
}

.l2q-finishEmoji {
    font-size: 40px;
    margin-bottom: 6px;
}

.l2q-finishTitle {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 450;
}

.l2q-finishStats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

@media (max-width: 920px) {
    .l2q-finishStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l2q-finishBox {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    text-align: left;
}

    .l2q-finishBox span {
        display: block;
        color: #a7b2d9;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .l2q-finishBox b {
        font-size: 18px;
    }

/* results table */
.l2q-tablewrap {
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.20);
}

.l2q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #eaf0ff;
}

    .l2q-table th, .l2q-table td {
        padding: 10px 10px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        text-align: left;
        white-space: nowrap;
    }

    .l2q-table th {
        color: #a7b2d9;
        font-weight: 450;
        background: rgba(255,255,255,.05);
    }

    .l2q-table tbody tr:hover {
        background: rgba(255,255,255,.05);
    }

.l2q-tableScroll {
    overflow: auto;
    max-width: 100%;
}

.l2q-ctaRow {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.pfall-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.pfall-wrap {
    max-width: 980px;
    margin: 0 auto;
}

/* header */
.pfall-title {
    margin: 0;
    text-align: center;
    font-weight: 450;
    letter-spacing: -.5px;
    line-height: 1.05;
    font-size: clamp(24px, 3.3vw, 40px);
}

    .pfall-title .pfall-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.pfall-hero {
    width: 150px;
    height: 150px;
    display: block;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* panel */
.pfall-panel {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 14px;
}

/* controls grid */
.pfall-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 860px) {
    .pfall-controls {
        grid-template-columns: 1fr;
    }
}

.pfall-ctrl label {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    margin: 0 0 7px 2px;
    font-weight: 900;
    letter-spacing: .3px;
}

.pfall-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .pfall-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .pfall-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

/* actions */
.pfall-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    .pfall-actions {
        justify-content: center;
    }
}

.pfall-play {
    border: 0;
    padding: 11px 14px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

    .pfall-play:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

.pfall-ghost {
    padding: 11px 14px;
    border-radius: 14px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}

    .pfall-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

/* little helper line */
.pfall-hint {
    margin: 10px 0 0;
    text-align: center;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
     PL1 = Pre-Level 1 (namespaced, no collisions)
  ========================================================= */
.pl1-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.pl1-wrap {
    max-width: 980px;
    margin: 0 auto;
}

.pl1-title {
    margin: 0;
    text-align: center;
    font-weight: 450;
    letter-spacing: -.5px;
    line-height: 1.05;
    font-size: clamp(24px, 3.3vw, 40px);
}

    .pl1-title .pl1-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.pl1-hero {
    width: 160px;
    height: 160px;
    display: block;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.pl1-panel {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 14px;
}

.pl1-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 860px) {
    .pl1-controls {
        grid-template-columns: 1fr;
    }
}

.pl1-ctrl label {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    margin: 0 0 7px 2px;
    font-weight: 900;
    letter-spacing: .3px;
}

.pl1-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .pl1-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .pl1-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

.pl1-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    .pl1-actions {
        justify-content: center;
    }
}

.pl1-start {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

    .pl1-start:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

/* safety: remove default anchor button styling issues */
.pl1-actions a {
    text-decoration: none;
}

    .pl1-actions a:focus {
        outline: none;
    }

.pl1-hint {
    margin: 10px 0 0;
    text-align: center;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
     PL1Q = Pre-Level 1 Quiz (namespaced, no collisions)
  ========================================================= */
.pl1q-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.pl1q-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.pl1q-title {
    margin: 0;
    text-align: center;
    font-weight: 450;
    letter-spacing: -.5px;
    line-height: 1.05;
    font-size: clamp(24px, 3.3vw, 40px);
}

    .pl1q-title .pl1q-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.pl1q-hero {
    width: 160px;
    height: 160px;
    display: block;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.pl1q-panel {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 14px;
}

.pl1q-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 980px) {
    .pl1q-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pl1q-controls {
        grid-template-columns: 1fr;
    }
}

.pl1q-ctrl label {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    margin: 0 0 7px 2px;
    font-weight: 900;
    letter-spacing: .3px;
}

.pl1q-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .pl1q-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .pl1q-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

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

@media (max-width: 980px) {
    .pl1q-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 2px;
    }
}

.pl1q-start {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

    .pl1q-start:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

.pl1q-ghost {
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}

    .pl1q-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

.pl1q-hint {
    margin: 10px 0 0;
    text-align: center;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
     PL2 = Pre-Level 2 (Words) – fully namespaced
  ========================================================= */
.pl2-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.pl2-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* Title */
.pl2-title {
    margin: 0;
    text-align: center;
    font-weight: 450;
    letter-spacing: -.5px;
    line-height: 1.05;
    font-size: clamp(24px, 3.3vw, 40px);
}

    .pl2-title .pl2-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.pl2-hero {
    width: 160px;
    height: 160px;
    display: block;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Panel */
.pl2-panel {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 16px;
}

/* Grid */
.pl2-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 980px) {
    .pl2-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pl2-controls {
        grid-template-columns: 1fr;
    }
}

.pl2-ctrl label {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    margin: 0 0 7px 2px;
    font-weight: 900;
    letter-spacing: .3px;
}

.pl2-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .pl2-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .pl2-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

/* Actions */
.pl2-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .pl2-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }
}

.pl2-start {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

    .pl2-start:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

.pl2-ghost {
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}

    .pl2-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

.pl2-hint {
    margin: 12px 0 0;
    text-align: center;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
     PL2Q = Pre-Level 2 Quiz (namespaced, no collisions)
  ========================================================= */
.pl2q-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.pl2q-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.pl2q-title {
    margin: 0;
    text-align: center;
    font-weight: 450;
    letter-spacing: -.5px;
    line-height: 1.05;
    font-size: clamp(24px, 3.3vw, 40px);
}

    .pl2q-title .pl2q-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.pl2q-hero {
    width: 160px;
    height: 160px;
    display: block;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.pl2q-panel {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 16px;
}

.pl2q-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 980px) {
    .pl2q-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pl2q-controls {
        grid-template-columns: 1fr;
    }
}

.pl2q-ctrl label {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    margin: 0 0 7px 2px;
    font-weight: 900;
    letter-spacing: .3px;
}

.pl2q-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .pl2q-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .pl2q-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

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

@media (max-width: 980px) {
    .pl2q-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }
}

.pl2q-start {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

    .pl2q-start:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

.pl2q-ghost {
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}

    .pl2q-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

.pl2q-hint {
    margin: 12px 0 0;
    text-align: center;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
     PRC = Pre-Race (Typing Race) – fully namespaced
  ========================================================= */
.prc-page {
    min-height: 100vh;
    padding: 18px 14px 28px;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,255,.22), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(68,230,255,.16), transparent 55%), radial-gradient(900px 600px at 35% 90%, rgba(255,79,216,.10), transparent 60%), linear-gradient(180deg, #060814, #0b1022);
    color: #eaf0ff;
}

.prc-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* Title */
.prc-title {
    margin: 0;
    text-align: center;
    font-weight: 450;
    letter-spacing: -.5px;
    line-height: 1.05;
    font-size: clamp(24px, 3.3vw, 40px);
}

    .prc-title .prc-secondary {
        background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.prc-hero {
    width: 160px;
    height: 160px;
    display: block;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Panel */
.prc-panel {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 16px;
}

.prc-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 980px) {
    .prc-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .prc-controls {
        grid-template-columns: 1fr;
    }
}

.prc-ctrl label {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    margin: 0 0 7px 2px;
    font-weight: 900;
    letter-spacing: .3px;
}

.prc-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .prc-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .prc-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

/* Actions */
.prc-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .prc-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }
}

.prc-play {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

    .prc-play:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

.prc-ghost {
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eaf0ff;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}

    .prc-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

.prc-hint {
    margin: 12px 0 0;
    text-align: center;
    color: #a7b2d9;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
     RG = Race Game (namespaced, dark + playful)
  ========================================================= */
.rg-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 12px 26px;
    color: #eaf0ff;
}

/* Top controls row */
.rg-controls {
    display: flex;
    justify-content: center;
    margin: 4px 0 14px;
}

    .rg-controls .rg-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.06);
        backdrop-filter: blur(10px);
        box-shadow: 0 12px 30px rgba(0,0,0,.40);
    }

.rg-btn {
    border: 0;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 450;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

    .rg-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.rg-btn-primary {
    color: #071018;
    background: linear-gradient(90deg, #44e6ff, #7CFF6B);
    box-shadow: 0 14px 30px rgba(68,230,255,.16);
}

    .rg-btn-primary:hover {
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

.rg-btn-ghost {
    color: #eaf0ff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rg-btn-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.09);
    }

/* Arena */
.rg-arena {
    margin: 0 0 14px;
}

.rg-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    padding: 16px;
}

.rg-wordbubble {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: radial-gradient(420px 220px at 30% 30%, rgba(68,230,255,.25), transparent 60%), radial-gradient(420px 220px at 70% 60%, rgba(255,79,216,.18), transparent 65%), rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* IMPORTANT: keep word in ONE line and bold/impactful */
.rg-word {
    font-weight: 450;
    letter-spacing: .10em;
    text-transform: uppercase;
    line-height: 1;
    font-size: clamp(26px, 5.2vw, 56px);
    text-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(68,230,255,.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chips */
.rg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 10px;
}

.rg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.20);
    color: #d7e0ff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

    .rg-chip strong {
        font-weight: 450;
    }

/* Input */
.rg-input {
    width: min(680px, 100%);
    display: block;
    margin: 0 auto;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.26);
    color: #eaf0ff;
    font-size: 16px;
    font-weight: 900;
    outline: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

    .rg-input::placeholder {
        color: #93a1c8;
        font-weight: 800;
    }

    .rg-input:focus {
        border-color: rgba(68,230,255,.40);
        background: rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

/* Track */
.rg-track {
    position: relative;
    margin: 12px 0 14px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: radial-gradient(900px 260px at 40% 20%, rgba(139,92,255,.18), transparent 60%), rgba(255,255,255,.05);
    box-shadow: 0 12px 30px rgba(0,0,0,.40);
    overflow: hidden;
}

.rg-finish {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 22px;
    width: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #44e6ff, #ff4fd8, #7CFF6B);
    opacity: .85;
    box-shadow: 0 0 22px rgba(68,230,255,.20);
}

    .rg-finish span {
        position: absolute;
        top: 10px;
        right: -10px;
        font-size: 20px;
        filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
    }

.rg-lane {
    position: relative;
    height: 74px;
    display: flex;
    align-items: center;
    padding: 0 18px;
}

    .rg-lane + .rg-lane {
        border-top: 1px dashed rgba(255,255,255,.10);
    }

    /* Road dashed guide */
    .rg-lane::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: repeating-linear-gradient( to right, rgba(255,255,255,.12) 0 16px, rgba(255,255,255,0) 16px 28px );
        opacity: .7;
        pointer-events: none;
    }

.rg-car {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.18);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    z-index: 2;
}

    .rg-car span {
        font-size: 26px;
        filter: drop-shadow(0 12px 14px rgba(0,0,0,.6));
    }

.rg-car-player {
    box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 22px rgba(68,230,255,.18);
}

.rg-car-ai {
    box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 22px rgba(255,79,216,.14);
}

/* Stats row */
.rg-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 980px) {
    .rg-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .rg-stats {
        grid-template-columns: 1fr;
    }
}

.rg-stat {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    padding: 12px 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.38);
}

.rg-slabel {
    font-size: 12px;
    color: #a7b2d9;
    font-weight: 900;
    letter-spacing: .2px;
    margin-bottom: 6px;
}

.rg-svalue {
    font-size: 18px;
    font-weight: 450;
    letter-spacing: -.2px;
}

.rg-bar {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
}

.rg-barfill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #44e6ff, #8b5cff, #ff4fd8);
    box-shadow: 0 0 18px rgba(68,230,255,.12);
}

/* Finish card */
.rg-finishcard {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    padding: 18px 16px;
    text-align: center;
}

.rg-femoji {
    font-size: 48px;
    margin-bottom: 6px;
}

.rg-finishcard h3 {
    margin: 6px 0 10px;
    font-weight: 450;
}

.rg-fstats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 0;
}

@media (max-width: 980px) {
    .rg-fstats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .rg-fstats {
        grid-template-columns: 1fr;x
    }
}

.rg-fstats > div {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    padding: 10px 10px;
}

.rg-fstats span {
    display: block;
    font-size: 12px;
    color: #a7b2d9;
    font-weight: 900;
}

.rg-fstats b {
    display: block;
    font-size: 16px;
    font-weight: 450;
    margin-top: 4px;
}

.rg-muted {
    color: #a7b2d9;
    font-weight: 800;
}

/*Design Page*/
/* Esotoria-ish dark + playful look */
.design-page {
    min-height: calc(100vh - 0px);
    padding: 18px 14px 30px;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(109,94,252,.25), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(0,255,200,.14), transparent 60%), radial-gradient(900px 650px at 50% 110%, rgba(255,122,61,.12), transparent 55%), #070912;
    color: #e9ecff;
}

.design-shell {
    max-width: 1120px;
    margin: 0 auto;
}

.design-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}

.design-brand {
    flex: 1;
    min-width: 220px;
}

.design-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .2px;
}

.design-subtitle {
    font-size: 12.5px;
    opacity: .8;
    margin-top: 2px;
}

.design-top-actions {
    display: flex;
    gap: 10px;
}

.design-card {
    margin-top: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(0,0,0,.40);
    overflow: hidden;
}

/* Toolbar */
.design-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tool-sep {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.10);
    margin: 0 4px;
}

.tool {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #eef1ff;
    padding: 9px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    user-select: none;
}

    .tool:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.18);
    }

    .tool:active {
        transform: translateY(0px) scale(.99);
    }

    .tool.ghost {
        background: transparent;
        border-color: rgba(255,255,255,.16);
        opacity: .95;
    }

    .tool.upload {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.color-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
}

.mini-label {
    font-size: 12px;
    opacity: .85;
    font-weight: 700;
}

.color {
    width: 38px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Canvas area */
.design-stage {
    padding: 12px;
}

.stage-hint {
    font-size: 12px;
    opacity: .75;
    margin: 2px 2px 10px;
}

.canvas-wrap {
    border-radius: 16px;
    padding: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
}

.design-canvas {
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #ffffff; /* important so export looks correct */
    display: block;
}

/* Buttons (match your vibe) */
.btn {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: #eef1ff;
    padding: 9px 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

    .btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
    }

    .btn:active {
        transform: translateY(0px) scale(.99);
    }

    .btn.primary {
        background: linear-gradient(135deg, rgba(109,94,252,.95), rgba(39,215,255,.75));
        border-color: rgba(255,255,255,.18);
    }

    .btn.danger {
        background: linear-gradient(135deg, rgba(255,75,75,.90), rgba(255,122,61,.70));
        border-color: rgba(255,255,255,.18);
    }

    .btn.ghost {
        background: transparent;
        border-color: rgba(255,255,255,.16);
    }

/* Footer pills */
.design-footer {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    opacity: .92;
}

.pill {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    font-size: 12px;
    font-weight: 700;
}

/* hide input */
.file-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 720px) {
    .design-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .design-top-actions {
        justify-content: stretch;
    }

        .design-top-actions .btn {
            width: 100%;
        }

    .design-toolbar {
        gap: 8px;
    }

    .tool, .btn {
        width: 100%;
        justify-content: center;
    }

    .tool-sep {
        display: none;
    }
}
.studio-shell {
    height: 100vh;
}

.code-pane {
    height: calc(100vh - 60px);
}
/* if your toolbar is ~60px */
.editor-host {
    flex: 1 1 auto;
    min-height: 0;
}

.design-host {
    height: 100%;
}
/* left pane must allow children to stretch */
.code-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* this is the area under your toolbar inside left pane */
.design-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 12px;
}

/* the real canvas container */
.design-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 14px;
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    position: relative;
}

/* IMPORTANT: let fabric control size, but keep canvas block */
#designCanvas {
    display: block;
}


/*Design Dashboard*/

.learnx-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 18px 36px;
    color: rgba(255,255,255,.92);
}

.learnx-hero {
    padding: 10px 0 6px;
    margin-bottom: 14px;
}

.learnx-kicker {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
   /* font-weight: 900;*/
    letter-spacing: .2px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.learnx-title {
    margin: 10px 0 0;
    font-size: 34px;
  /*  font-weight: 450;*/
    letter-spacing: -.2px;
}

.learnx-sub {
    margin: 8px 0 0;
    max-width: 760px;
    font-size: 14px;
    opacity: .86;
    line-height: 1.45;
}

.learnx-section {
    margin-top: 16px;
}

.learnx-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.learnx-section-title {
    font-size: 16px;
   
    letter-spacing: .15px;
}

.learnx-section-sub {
    margin-top: 4px;
    font-size: 13px;
    opacity: .78;
}

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

    .learnx-grid.one {
        grid-template-columns: 1fr;
    }

.learnx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 16px;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    overflow: hidden;
}

    .learnx-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 44px rgba(0,0,0,.28);
        border-color: rgba(255,255,255,.18);
    }

.learnx-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.learnx-icon {
    font-size: 38px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.10);
}

.learnx-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.badge {
    font-size: 12px;
    font-weight: 450;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    opacity: .95;
    user-select: none;
    white-space: nowrap;
}

    .badge.soft {
        opacity: .78;
    }

/* Accent pills (subtle, pro) */
.accent-blue {
    background: rgba(55,187,255,.18);
    border-color: rgba(55,187,255,.28);
}

.accent-purple {
    background: rgba(130,92,255,.20);
    border-color: rgba(130,92,255,.30);
}

.accent-cyan {
    background: rgba(0,190,255,.16);
    border-color: rgba(0,190,255,.26);
}

.accent-orange {
    background: rgba(255,133,78,.18);
    border-color: rgba(255,133,78,.28);
}

.accent-green {
    background: rgba(0,255,168,.14);
    border-color: rgba(0,255,168,.24);
}

.accent-pink {
    background: rgba(255,110,199,.16);
    border-color: rgba(255,110,199,.26);
}

.learnx-card-title {
    font-size: 16px;
    font-weight: 450;
    margin-bottom: 6px;
}

.learnx-card-desc {
    font-size: 13px;
    opacity: .86;
    line-height: 1.4;
    margin-bottom: 14px;
    flex: 1;
}

.learnx-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.learnx-cta {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 450;
    font-size: 13px;
    background: rgba(130,92,255,.95);
    color: white;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 10px 18px rgba(130,92,255,.18);
}

    .learnx-cta.ghost {
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.75);
        box-shadow: none;
    }

.learnx-arrow {
    font-size: 22px;
    font-weight: 900;
    opacity: .6;
    padding-right: 4px;
}

/* Coming soon styling */
.learnx-card.locked {
    cursor: not-allowed;
    opacity: .72;
    filter: saturate(.92);
}

    .learnx-card.locked:hover {
        transform: none;
        box-shadow: 0 14px 34px rgba(0,0,0,.22);
        border-color: rgba(255,255,255,.10);
    }

.soon-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    font-weight: 450;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
    z-index: 2;
}

/* Responsive */
@media (max-width: 980px) {
    .learnx-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px) {
    .learnx-title {
        font-size: 26px;
    }

    .learnx-grid {
        grid-template-columns: 1fr;
    }

        .learnx-grid.one {
            grid-template-columns: 1fr;
        }
}

/*Blocks Mainpage*/
/* =========================
   Upgrade Modal
========================= */
.upgrade-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.upgrade-modal {
    width: 360px;
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 14px 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    color: #111827;
}

    .upgrade-modal h3 {
        margin: 0 0 8px 0;
    }

    .upgrade-modal p {
        margin: 0 0 14px 0;
        color: #374151;
        line-height: 1.35;
    }

.upgrade-actions {
    display: flex;
    gap: 10px;
}

.btn-upgrade {
    flex: 1;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .65rem .9rem;
    cursor: pointer;
}

.btn-cancel {
    flex: 1;
    background: transparent;
    color: #7c3aed;
    border: 2px solid #7c3aed;
    border-radius: 10px;
    padding: .65rem .9rem;
    cursor: pointer;
}

/* =========================
   Shell + Grid Layout
========================= */
.studio-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

.studio-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 600px;
    gap: 0;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.code-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e5e7eb;
    background: #fff;
}

.blockly-host {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 320px;
}

.right-pane {
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 0;
}

/*New Toolbar*/

/* ===== Pro Toolbar ===== */
.pro-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
}

.tb-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
}

.tb-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 10px;
}

.tb-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tb-title {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .2px;
}

.tb-subject {
    opacity: .85;
    font-weight: 700;
}

.tb-subtitle {
    font-size: 12px;
    opacity: .65;
    margin-top: 2px;
}

.tb-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.75);
}

.tb-divider {
    width: 1px;
    height: 26px;
    background: rgba(0,0,0,.12);
    margin: 0 4px;
}

.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform .05s ease, background .15s ease, border-color .15s ease;
    user-select: none;
    white-space: nowrap;
}

    .tb-btn:hover {
        background: rgba(0,0,0,.03);
    }

    .tb-btn:active {
        transform: translateY(1px);
    }

    .tb-btn[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

.tb-ghost {
    background: transparent;
    border-color: transparent;
}

    .tb-ghost:hover {
        background: rgba(0,0,0,.05);
        border-color: rgba(0,0,0,.10);
    }

.tb-primary {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

    .tb-primary:hover {
        background: #0b1220;
    }

.tb-secondary {
    background: #fff;
}

.tb-accent {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
}

    .tb-accent:hover {
        background: #5b21b6;
    }

.tb-status {
    display: flex;
    align-items: center;
}

.tb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    font-weight: 700;
    font-size: 12px;
    opacity: .9;
}

.tb-chip-ok {
    background: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
}

.tb-spin {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.18);
    border-top-color: rgba(0,0,0,.55);
    animation: tbspin .8s linear infinite;
}

@keyframes tbspin {
    to {
        transform: rotate(360deg);
    }
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.tb-level {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.tb-user {
    display: flex;
    justify-content: flex-end;
    min-width: 200px;
}

/* User button looks more "app-like" */
.user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    cursor: pointer;
}

    .user-btn:hover {
        background: rgba(0,0,0,.03);
    }

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(109,40,217,.15);
    border: 1px solid rgba(109,40,217,.25);
    font-weight: 900;
}

.user-name {
    font-weight: 800;
    font-size: 13px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-caret {
    opacity: .7;
}

/* Responsive */
@media (max-width: 980px) {
    .pro-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tb-left, .tb-right, .tb-user {
        min-width: 0;
        justify-content: space-between;
    }

    .tb-center {
        justify-content: flex-start;
    }

    .tb-user {
        justify-content: flex-start;
    }

    .tb-actions {
        width: 100%;
        justify-content: space-between;
    }

    .tb-btn span {
        display: none;
    }
    /* show icons only on small screens */
}


/* =========================
   Toolbar
========================= */
.studio-toolbar {
    height: 56px; /* bigger */
    background: #111c33;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px; /* more breathing room */
    color: #fff;
    box-sizing: border-box;
}

/* LEFT */
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px; /* bigger gap */
    min-width: 280px;
}

.toolbar-logo {
    width: 28px; /* bigger logo */
    height: 28px;
    object-fit: contain;
}

.toolbar-title {
    font-size: 16px; /* bigger text */
    letter-spacing: 0.2px;
}

/* CENTER */
.toolbar-center {
    display: flex;
    justify-content: center;
    flex: 1;
}



.toolbar-left-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}



.toolbar-subtitle {
    font-size: .78rem;
    opacity: .85;
}

/* MIDDLE (your Razor has toolbar-mid + mid-group + mid-sep) */
.toolbar-mid {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.mid-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mid-sep {
    width: 1px;
    height: 26px;
    background: rgba(255,255,255,.25);
    margin: 0 6px;
}

/* RIGHT */
.toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: max-content;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
}

.right-group { /* hook if you want to target right side group */
}

.level-pill {
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: .25rem .75rem;
    color: #fff;
    white-space: nowrap;
}

.btn-accent {
    padding: .45rem .9rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

    .btn-accent:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.toolbar-status {
    min-width: 170px;
    display: flex;
    justify-content: flex-start;
}

/* =========================
   Header Buttons
========================= */
.undo-btn-head, .redo-btn-head, .run-btn-head, .save-btn-head {
    padding: .45rem .9rem;
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    cursor: pointer;
    transition: all .15s;
    color: #fff;
}

.undo-btn-head {
    background: rgba(255,255,255,0.15);
}

    .undo-btn-head:hover {
        background: rgba(255,255,255,0.45);
    }

.redo-btn-head {
    background: rgba(255,255,255,0.15);
}

    .redo-btn-head:hover {
        background: rgba(255,255,255,0.45);
    }

.run-btn-head {
    background: #22c55e;
}

    .run-btn-head:hover {
        background: #16a34a;
    }

.save-btn-head {
    background: #0ea5e9;
}

    .save-btn-head:hover {
        background: #0284c7;
    }

/* Saving indicator */
.save-loader, .save-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.save-msg {
    opacity: .95;
    color: #fff;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.45);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

/* =========================
   User dropdown (your Razor uses these)
========================= */
.userbox {
    display: flex;
    align-items: center;
}

.user-dropdown {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    border-radius: 12px;
    padding: .45rem .7rem;
    cursor: pointer;
}

    .user-btn:hover {
        background: rgba(255,255,255,.18);
    }

.user-name {
    font-weight: 700;
}

.user-caret {
    opacity: .9;
}

.user-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 170px;
    background: #fff;
    color: #111827;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 16px 30px rgba(0,0,0,.18);
    overflow: hidden;
    z-index: 9999;
}

.user-menu-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .65rem .75rem;
    cursor: pointer;
    font-weight: 600;
}

    .user-menu-item:hover {
        background: #f3f4f6;
    }

    .user-menu-item.danger {
        color: #dc2626;
    }

        .user-menu-item.danger:hover {
            background: #fef2f2;
        }

.login-link {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: .4rem .65rem;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
}

    .login-link:hover {
        background: rgba(255,255,255,.18);
    }

/* =========================
   Tabs
========================= */
.tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #111c33;
    padding: .4rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tab-btn {
    border: 0;
    background: transparent;
    padding: .5rem .75rem;
    border-radius: .5rem;
    cursor: pointer;
    font-weight: 700;
}

    .tab-btn.active {
        border: 1px solid #e5e7eb;
    }

.tab-body {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    background: #111c33;
}

.panel {
    height: 100%;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    padding-bottom: 16px;
}

/* =========================
   Output (fullscreen supported)
========================= */
.output-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .output-wrapper.fullscreen {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
        background: #fff;
        display: flex;
        flex-direction: column;
        height: 100dvh;
    }

.output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .8rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    margin-bottom: .6rem;
}

.output-wrapper.fullscreen .output-head {
    border-bottom: 1px solid #e5e7eb;
    background: #f3f4f6;
    padding: .75rem 1rem;
    border-radius: 0;
    margin-bottom: 0;
}

.output-body {
    flex: 1 1 auto;
    padding: .5rem;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #fff;
}

.output-wrapper.fullscreen .output-body {
    flex: 1 1 auto;
    overflow: auto;
    border: 0;
    padding: 1rem;
}

.output-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.icon-btn {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    padding: .3rem .55rem;
    transition: all .15s ease-in-out;
    line-height: 1;
}

    .icon-btn:hover {
        background: #eef2ff;
        transform: scale(1.1);
    }

.run-btn {
    color: #16a34a;
    border-color: #16a34a33;
}

    .run-btn:hover {
        background: #16a34a12;
    }

.full-btn {
    color: #7c3aed;
    border-color: #7c3aed33;
}

    .full-btn:hover {
        background: #ede9fe;
    }

/* =========================
   Cube Grid + Code Preview
========================= */
.game-shell {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    max-width: 540px;
}

.game-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.game-hint {
    color: #6b7280;
    font-size: .9rem;
}

.game-canvas {
    width: 420px;
    height: 420px;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #f8fafc;
}

.game-log {
    margin-top: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 16px;
    padding: 10px;
    border-radius: 12px;
    background: #0b1220;
    color: #e5e7eb;
    min-height: 44px;
    white-space: pre-wrap;
}

.code-preview {
    margin-top: 12px;
    background: #0b1220;
    color: #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    overflow: auto;
    max-width: 540px;
    max-height: 220px;
    font-size: 12px;
    line-height: 1.35;
}

/* =========================
   Lessons Accordion
========================= */
.accordion {
    margin: 4px 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acc-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.acc-header {
    width: 100%;
    text-align: left;
    background: #f7fafc;
    border: 0;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.acc-title {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 800;
}

.acc-icons {
    opacity: .8;
}

.acc-panel {
    padding: .85rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.acc-html {
    padding: 0;
    margin: 0;
    color: #000000;
    line-height: 1.5;
    font-size: 14px;
}

.acc-html :where(p,ul,ol,iframe) {
    max-width: 100%;
}

.acc-html iframe {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
}

.acc-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.acc-meta {
    color: #6b7280;
    font-size: .92rem;
    margin-top: .25rem;
}

.acc-loading, .acc-error, .acc-empty {
    padding: .8rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #475569;
    background: #f9fafb;
}

.btn-kid-primary {
    padding: .55rem .9rem;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

/* =========================
   Chat sizing helpers
========================= */
.chat-host {
    height: 100%;
}

.fullheight {
    height: 100%;
}
/* you used class="chat-host fullheight" */
#tab-chat {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

    #tab-chat > * {
        height: 100%;
    }

/* =========================
   Blockly tweaks (GLOBAL because scoped CSS)
========================= */
.blocklyText,
.blocklyHtmlInput,
.blocklyTreeLabel {
    /* font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;*/
    font-weight: 600 !important;
}

.blocklyTreeRowContentContainer {
    padding: 10px 10px !important;
    border-radius: 10px !important;
}

.blocklyFlyout {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.blocklyToolboxDiv {
    padding-top: 6px;
    border-right: 1px solid rgba(255,255,255,0.08);
    width: 180px !important;
}

.blocklyTreeRow {
    height: 40px !important;
}

.blocklyWorkspace {
    left: 180px !important;
}

/* MakeCode-like dotted workspace background */
#blocklyDiv.blockly-host {
    background-color: #e9edf5;
    background-image: radial-gradient(rgba(20,40,80,.12) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    background-position: 12px 12px;
}

.game-log {
    white-space: pre-wrap; /* keeps new lines */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.35;
    overflow: auto;
    max-height: 240px; /* adjust as you like */
}



/*home CSS*/
html, body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto;
}

#app {
    min-height: 100%;
    height: auto !important;
}

.home-shell {
    min-height: 100vh;
    height: auto !important;
    overflow: visible;
}


.home-body {
    flex: 1;
}

/* =========================
   NAVBAR (HomeLayout)
   ========================= */

.nav-wrap {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-inner {
    height: 72px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

/* Center nav */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    flex: 1;
}

.nav-link {
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    padding: 8px 6px;
    border-radius: 10px;
    transition: background 120ms ease, color 120ms ease;
}

    .nav-link:hover {
        background: rgba(99, 102, 241, 0.08);
        color: #4f46e5;
    }

/* Right actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.signin {
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 120ms ease;
}

    .signin:hover {
        background: rgba(0,0,0,0.05);
    }

.cta {
    color: #ffffff;
    text-decoration: none;
    background: #6d28d9;
    padding: 10px 16px;
    border-radius: 999px;
    transition: transform 120ms ease, filter 120ms ease;
}

    .cta:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }

/* =========================
   FOOTER (HomeLayout)
   ========================= */

.home-footer {
    border-top: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    color: rgba(0,0,0,0.65);
}

.footer-links {
    display: flex;
    gap: 14px;
}

    .footer-links a {
        color: rgba(0,0,0,0.65);
        text-decoration: none;
    }

        .footer-links a:hover {
            color: #4f46e5;
            text-decoration: underline;
        }

/* =========================
   HERO (Index)
   ========================= */

.hero {
    background: linear-gradient(135deg, #1fb0c4 0%, #5a6ad6 45%, #6d28d9 100%);
    color: #fff;
    padding: 92px 0 70px;
}

.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
    text-align: center;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.24);
    font-size: 13px;
    letter-spacing: 0.2px;
}

.hero-title {
    margin: 18px 0 0;
    font-size: 56px;
    line-height: 1.05;
}

.hero-sub {
    margin: 16px auto 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
}

.hero-actions {
    margin-top: 24px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}



.btn-ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.45);
}

    .btn-ghost:hover {
        background: rgba(255,255,255,0.10);
        transform: translateY(-1px);
    }

.arrow {
    font-size: 16px;
    line-height: 1;
}

/* =========================
   TOP FEATURES BAR (Index)
   ========================= */

.top-features {
    background: #cfe8f2;
    border-top: 1px solid rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.top-features-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    justify-content: center;
    gap: 90px;
    flex-wrap: wrap;
}

.tf-item {
    color: #6d28d9;
    font-size: 13px;
}

/* =========================
   STRUCTURED SECTION (Index)
   ========================= */

.structured {
    background: #cfe8f2;
    padding: 48px 0 70px;
}

.structured-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
    text-align: center;
}

.structured-title {
    margin: 0;
    color: #6d28d9;
    font-size: 26px;
}

.structured-sub {
    margin: 10px auto 0;
    max-width: 720px;
    color: rgba(0,0,0,0.65);
    font-size: 14px;
    line-height: 1.6;
}

.feature-card {
    margin: 34px auto 0;
    max-width: 980px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 22px 18px;
}

.feature-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
}

.f-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 16px;
    color: #6d28d9;
    font-size: 13px;
}

.f-icon {
    font-size: 16px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .hero-title {
        font-size: 44px;
    }

    .top-features-inner {
        gap: 28px;
    }

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

@media (max-width: 520px) {
    .hero {
        padding: 72px 0 54px;
    }

    .hero-title {
        font-size: 36px;
    }

    .feature-row {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================
   CODER SECTION (Index)
   ========================= */

.coder {
    background: #ffffff;
    padding: 56px 0 80px;
}

.coder-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
    text-align: center;
}

.coder-title {
    margin: 0;
    font-size: 26px;
    color: #6d28d9;
}

.coder-sub {
    margin: 10px auto 0;
    max-width: 720px;
    color: rgba(0,0,0,0.65);
    font-size: 14px;
    line-height: 1.6;
}

.coder-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
    text-align: left;
}

.coder-card {
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.08);
}

.coder-card-left {
    background: #cfe8f2;
}

.coder-card-right {
    background: #d7c7ff;
}

.coder-card-head h3 {
    margin: 0;
    font-size: 16px;
    color: rgba(0,0,0,0.75);
}

.coder-card-head p {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(0,0,0,0.6);
    line-height: 1.5;
}

/* Left list */
.why-list {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.why-item {
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 12px;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    border: 1px solid rgba(0,0,0,0.06);
}

.why-ico {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(109,40,217,0.12);
    color: #6d28d9;
}

.why-title {
    color: rgba(0,0,0,0.75);
    font-size: 13px;
    margin-top: 1px;
}

.why-text {
    color: rgba(0,0,0,0.6);
    font-size: 12px;
    margin-top: 3px;
    line-height: 1.45;
}

/* Tracks */
.track-list {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.track {
    background: rgba(255,255,255,0.75);
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
}

.track-highlight {
    background: linear-gradient(135deg, rgba(109,40,217,0.30), rgba(31,176,196,0.22));
    border-color: rgba(255,255,255,0.25);
}

.track-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.track-left {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.track-ico {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(109,40,217,0.14);
    color: #6d28d9;
    font-size: 14px;
}

.track-title {
    color: rgba(0,0,0,0.78);
    font-size: 13px;
}

.track-mini {
    margin-top: 2px;
    color: rgba(0,0,0,0.6);
    font-size: 12px;
}

.track-level {
    font-size: 11px;
    color: rgba(0,0,0,0.55);
    background: rgba(255,255,255,0.65);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.06);
    white-space: nowrap;
}

.track-bottom {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.track-desc {
    margin: 0;
    color: rgba(0,0,0,0.62);
    font-size: 12px;
    line-height: 1.45;
    flex: 1;
}

.track-btn {
    background: #6d28d9;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 120ms ease, filter 120ms ease;
}

    .track-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

/* Responsive */
@media (max-width: 900px) {
    .coder-grid {
        grid-template-columns: 1fr;
    }

    .track-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .track-btn {
        text-align: center;
        width: 100%;
    }
}


/* =========================
   CERTIFICATES SECTION
   ========================= */

.certs {
    position: relative;
    background: #ffffff;
    padding: 70px 0 90px;
    overflow: hidden;
}

    /* soft wave background */
    .certs::after {
        content: "";
        position: absolute;
        left: -10%;
        right: -10%;
        bottom: -70px;
        height: 220px;
        background: #eaf6fb;
        border-top-left-radius: 60% 100%;
        border-top-right-radius: 60% 100%;
        transform: rotate(-2deg);
        z-index: 0;
    }

.certs-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
    text-align: center;
}

.certs-title {
    margin: 0;
    font-size: 26px;
    color: #6d28d9;
}

.certs-sub {
    margin: 10px auto 0;
    max-width: 720px;
    color: rgba(0,0,0,0.65);
    font-size: 14px;
    line-height: 1.6;
}

.certs-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 34px;
    align-items: center;
    text-align: left;
}

/* Left purple card */
.certs-card {
    background: #d7c7ff;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.10);
}

.certs-card-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: rgba(0,0,0,0.76);
}

.certs-card-head p {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(0,0,0,0.6);
    line-height: 1.5;
}

.certs-steps {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.cert-step {
    background: rgba(255,255,255,0.78);
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,0.06);
}

.cert-step-title {
    font-weight: 900;
    color: rgba(0,0,0,0.75);
    font-size: 13px;
}

.cert-step-text {
    margin-top: 3px;
    color: rgba(0,0,0,0.6);
    font-size: 12px;
    line-height: 1.45;
}

.certs-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}

.cert-btn-primary {
    background: #6d28d9;
    color: #fff;
}

    .cert-btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

.cert-btn-ghost {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.68);
}

    .cert-btn-ghost:hover {
        background: rgba(255,255,255,0.85);
        transform: translateY(-1px);
    }

.cert-arrow {
    font-size: 14px;
    line-height: 1;
}

/* Right column */
.certs-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.certs-chip {
    font-size: 11px;
    font-weight: 900;
    color: #6d28d9;
    background: rgba(109,40,217,0.12);
    border: 1px solid rgba(109,40,217,0.18);
    padding: 6px 10px;
    border-radius: 999px;
}

.certs-snapshot {
    width: 100%;
    background: #cfe8f2;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,0.04);
}

.snap-title {
    font-weight: 900;
    color: #1699b2;
    font-size: 12px;
}

.snap-text {
    margin-top: 3px;
    color: rgba(0,0,0,0.6);
    font-size: 12px;
    line-height: 1.45;
}

.certs-list {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.certs-li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(0,0,0,0.65);
    font-weight: 800;
    font-size: 12px;
}

.li-ico {
    width: 22px;
    height: 22px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(22,153,178,0.12);
    color: #1699b2;
    font-weight: 900;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .certs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .certs-right {
        align-items: stretch;
    }
}


/* =========================
   BUILT TO GROW SECTION
   ========================= */

.grow {
    background: #ffffff;
    padding: 62px 0 90px;
}

.grow-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
    text-align: center;
}

.grow-title {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: #1699b2; /* teal like screenshot */
}

.grow-sub {
    margin: 10px auto 0;
    max-width: 780px;
    color: rgba(0,0,0,0.65);
    font-size: 13px;
    line-height: 1.6;
}

.grow-cards {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.grow-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 16px;
    text-align: left;
    border: 1.5px solid rgba(0,0,0,0.10);
}

.grow-card-blue {
    border-color: rgba(22,153,178,0.65);
}

.grow-card-purple {
    border-color: rgba(109,40,217,0.65);
}

.grow-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 12px;
    margin-bottom: 10px;
}

.grow-card-blue .grow-icon {
    background: rgba(22,153,178,0.12);
    color: #1699b2;
}

.grow-card-purple .grow-icon {
    background: rgba(109,40,217,0.12);
    color: #6d28d9;
}

.grow-card-title {
    font-weight: 900;
    font-size: 13px;
    color: rgba(0,0,0,0.75);
}

.grow-card-text {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(0,0,0,0.6);
    line-height: 1.45;
}

/* centered button */
.grow-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.grow-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #6d28d9;
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    transition: transform 120ms ease, filter 120ms ease;
}

    .grow-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

.grow-arrow {
    font-size: 14px;
    line-height: 1;
}

/* =========================
   START LEARNING PANEL
   ========================= */

.start-panel {
    margin: 34px auto 0;
    max-width: 980px;
    padding: 34px 22px;
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(109,40,217,0.18), rgba(22,153,178,0.18));
    border: 1px solid rgba(0,0,0,0.06);
}

.start-title {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: #6d28d9;
}

.start-sub {
    margin: 10px auto 0;
    max-width: 760px;
    font-size: 13px;
    color: rgba(0,0,0,0.65);
    line-height: 1.6;
}

.start-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}

.start-btn-primary {
    background: #6d28d9;
    color: #fff;
}

    .start-btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

.start-btn-ghost {
    background: transparent;
    border: 1px solid rgba(109,40,217,0.45);
    color: #6d28d9;
}

    .start-btn-ghost:hover {
        background: rgba(109,40,217,0.08);
        transform: translateY(-1px);
    }

/* Responsive */
@media (max-width: 980px) {
    .grow-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .grow-cards {
        grid-template-columns: 1fr;
    }
}