/* ── Mysomero Tutor Chat UI v6 — Professional Design ───────────────────────────
   Typography: Outfit (UI) + Source Serif 4 (answer body) + JetBrains Mono (code)
   ─────────────────────────────────────────────────────────────────────────── */
/* Fonts loaded via wp_enqueue_style in class-shortcode.php (non-blocking preload) */

/* ── Full-viewport override on pages with [mysomero_ai_chat] ────────────────
   The body gets class "msm-chat-page" via a body_class filter in PHP.
   This strips every WordPress/Elementor wrapper of its padding, max-width,
   and margin constraints so the app can fill the entire browser window.
   ─────────────────────────────────────────────────────────────────────────── */
body.msm-chat-page,
body.msm-chat-page #page,
body.msm-chat-page #content,
body.msm-chat-page #primary,
body.msm-chat-page main:not(.msm-main),
body.msm-chat-page .site-main:not(.msm-main),
body.msm-chat-page article,
body.msm-chat-page .entry-content,
body.msm-chat-page .post-content,
body.msm-chat-page .elementor-section-wrap,
body.msm-chat-page .elementor-top-section,
body.msm-chat-page .elementor-section,
body.msm-chat-page .elementor-container,
body.msm-chat-page .elementor-row,
body.msm-chat-page .elementor-col-100,
body.msm-chat-page .elementor-column,
body.msm-chat-page .elementor-column-wrap,
body.msm-chat-page .elementor-widget-wrap,
body.msm-chat-page .elementor-widget,
body.msm-chat-page .elementor-widget-container,
body.msm-chat-page .wp-block-group,
body.msm-chat-page .wp-block-group__inner-container,
body.msm-chat-page .container,
body.msm-chat-page .container-fluid,
body.msm-chat-page .site-content,
body.msm-chat-page .content-area {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
    flex: none !important;
    display: block !important;
}

/* Guard: ensure .msm-main keeps its flex layout even if a theme selector
   somehow matches it — belt-and-suspenders after the strip rule above. */
body.msm-chat-page .msm-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Hide WP admin bar gap & any theme header/footer on the chat page */
/* Lock html + body so no page-level scrollbar ever appears (scrollbar = width gap) */
html:has(body.msm-chat-page),
body.msm-chat-page {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #0a0805 !important;
}
body.msm-chat-page.admin-bar { margin-top: 0 !important; }

/* Hide admin bar — it shifts layout and we don't need it in the app */
body.msm-chat-page #wpadminbar { display: none !important; }

/* Hide theme chrome (header / footer / nav) */
body.msm-chat-page header.site-header,
body.msm-chat-page .site-header,
body.msm-chat-page footer.site-footer,
body.msm-chat-page .site-footer,
body.msm-chat-page nav.main-navigation,
body.msm-chat-page .main-navigation,
body.msm-chat-page .ast-above-header-wrap,
body.msm-chat-page .ast-below-header-wrap,
body.msm-chat-page .elementor-location-header,
body.msm-chat-page .elementor-location-footer {
    display: none !important;
}

/* ── The app: fixed to the full viewport ────────────────────────────────────
   Use left/right/top/bottom:0 + width/height:100% (NOT 100vw/100dvh).
   100vw includes the scrollbar gutter → causes horizontal overflow on Windows.
   With overflow:hidden on html+body there is no scrollbar, so 100% == viewport.
   ─────────────────────────────────────────────────────────────────────────── */
body.msm-chat-page .msm-app {
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    bottom: 0 !important; left: 0 !important;
    width: 100% !important;
    /* Do NOT set height here — on mobile the bottom override sets the height
       via top+bottom anchors. height:100% here fights height:auto there and
       wins on some Android WebViews, causing the app to overflow the nav bar. */
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99990 !important;
    margin: 0 !important;
}

/* ── Mobile + PWA: app stops above the fixed bottom nav ─────────────────
   Single authoritative rule replacing the previous three scattered blocks.
   Covers: mobile browser, PWA standalone (media query), and the JS-stamped
   class fallback for older iOS Safari that ignores display-mode queries.
   height:auto is critical — top+bottom anchors determine height, not vh.  ── */
@media (max-width: 700px) {
    body.msm-chat-page .msm-app,
    body.msm-pwa-standalone .msm-app,
    html.msm-pwa-standalone body .msm-app {
        /* html.msm-pwa-standalone is stamped by an inline <head> script that
           runs before CSS is parsed — guarantees correct layout on first paint
           in Chrome Android PWA where display-mode media query fires too late. */
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        height: auto !important;
    }
}

/* Belt-and-suspenders for browsers that support display-mode (Chrome Android,
   modern iOS Safari) — wins even if msm-pwa-standalone class is not yet stamped. */
@media (display-mode: standalone) {
    body.msm-chat-page .msm-app,
    html.msm-pwa-standalone body .msm-app {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        height: auto !important;
    }
}

/* Nav bar is hidden via JS when keyboard opens — no layout conflict with input area */
.msm-mobile-nav {
    transition: opacity 0.1s ease-out;
}



/* ── Variables ──────────────────────────────────────────────────────────── */
.msm-app {
    /* ── Scholar Blue — warm blue-tinted backgrounds, knowledge + energy ── */
    --bg:#f5f8ff;--bg2:#edf2fc;--bg3:#dce8f8;
    --sidebar:#e8f0fb;--sidebar2:#dde8f7;
    --sidebar-text:#0f172a;--sidebar-text2:#3d5680;--sidebar-text3:#3d6399;
    --sidebar-border:#c8d8f0;--sidebar-item-hover:rgba(26,111,232,.06);
    --sidebar-pill-bg:rgba(26,111,232,.07);--sidebar-pill-hover:rgba(26,111,232,.13);
    --sidebar-pill-active:#1a6fe8;
    --surface:#ffffff;--surface2:#f5f8ff;
    --border:#d5e3f5;--border2:rgba(26,111,232,.10);--border3:rgba(0,0,0,.05);
    --text:#0f172a;--text2:#3d5680;--text3:#3d6399;
    --accent:#1a6fe8;--accent2:#4a9af5;--accent-bg:rgba(26,111,232,.08);
    --accent-glow:rgba(26,111,232,.22);
    --accent-warm:#f59e0b;--accent-warm-bg:rgba(245,158,11,.10);
    --user-bg:#deeafd;--user-text:#0f172a;--user-border:#b8d0f8;
    --ai-bg:#ffffff;--ai-border:#d5e3f5;
    --shadow:0 1px 3px rgba(26,111,232,.06),0 4px 14px rgba(26,111,232,.04);
    --shadow2:0 8px 32px rgba(26,111,232,.12);--shadow3:0 2px 10px rgba(26,111,232,.08);
    --radius:16px;--radius-sm:10px;
    --font:'Outfit',-apple-system,sans-serif;
    --font-serif:'Source Serif 4',Georgia,serif;
    --mono:'JetBrains Mono','Courier New',monospace;
    --pill-bg:rgba(26,111,232,.07);--pill-hover:rgba(26,111,232,.13);
    --pill-active:#1a6fe8;
}
.msm-app[data-theme="dark"] {
    /* ── Richer, more separated dark palette ── */
    --bg:#100e0a;--bg2:#17140f;--bg3:#1f1c16;
    /* Sidebar noticeably darker than main — clear visual separation */
    --sidebar:#0a0805;--sidebar2:#100e0a;
    /* Left accent stripe on sidebar (applied via box-shadow trick on active) */
    --sidebar-text:#e8e0d3;--sidebar-text2:#c0b8a8;--sidebar-text3:#a39482;
    --sidebar-border:#2c2820;--sidebar-item-hover:rgba(255,255,255,.055);
    --sidebar-pill-bg:rgba(255,255,255,.07);--sidebar-pill-hover:rgba(255,255,255,.13);
    --sidebar-pill-active:#4a9af5;
    --surface:#17140f;--surface2:#1f1c16;
    --border:#2c2820;--border2:rgba(255,255,255,.055);--border3:rgba(255,255,255,.04);
    --text:#ede8df;--text2:#c0b8a8;--text3:#a39482;
    --accent:#4a9af5;--accent2:#7bbcfa;--accent-bg:rgba(74,154,245,.13);
    --accent-glow:rgba(74,154,245,.30);
    --accent-warm:#f59e0b;--accent-warm-bg:rgba(245,158,11,.13);
    /* User bubble: noticeably distinct from AI even in dark */
    --user-bg:#1a2540;--user-text:#e2eaf8;--user-border:#2d4070;
    --ai-bg:#17140f;--ai-border:#2c2820;
    --shadow:0 1px 3px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.25);
    --shadow2:0 8px 36px rgba(0,0,0,.5);--shadow3:0 2px 8px rgba(0,0,0,.3);
    --pill-bg:rgba(255,255,255,.055);--pill-hover:rgba(255,255,255,.10);
}

/* ── App Shell ───────────────────────────────────────────────────────────── */
.msm-app {
    display:flex;height:90vh;min-height:560px;max-height:900px;
    border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;font-family:var(--font);font-size:15px;
    background:var(--bg);position:relative;
    transition:background .25s,border-color .25s;
    box-shadow:var(--shadow2),0 0 0 1px rgba(26,111,232,.05);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.msm-sidebar {
    width:248px;min-width:248px;background:var(--sidebar);color:var(--sidebar-text);
    border-right:1px solid var(--sidebar-border);transition:background .25s,border-color .25s;
    display:flex;flex-direction:column;overflow:hidden;
    transition:transform .28s ease,background .25s;
    border-right:1px solid rgba(255,255,255,.04);
}
.msm-sidebar-top {
    padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
    background:linear-gradient(150deg,#1557c8 0%,#1a6fe8 45%,#4a9af5 100%);
    position:relative;overflow:hidden;
}
/* Decorative circles on the sidebar gradient header */
.msm-sidebar-top::before{
    content:'';position:absolute;top:-22px;right:-18px;
    width:72px;height:72px;border-radius:50%;
    background:rgba(255,255,255,.10);pointer-events:none;
}
.msm-sidebar-top::after{
    content:'';position:absolute;bottom:-20px;left:-14px;
    width:50px;height:50px;border-radius:50%;
    background:rgba(255,255,255,.07);pointer-events:none;
}
.msm-logo{display:flex;align-items:center;gap:10px;position:relative}
.msm-logo-icon{font-size:22px;line-height:1}
.msm-logo-text{font-size:15px;font-weight:800;color:#ffffff;letter-spacing:-.4px;font-family:var(--font)}
.msm-logo-version{font-size:9px;font-weight:500;color:rgba(255,255,255,.70);letter-spacing:.5px;text-transform:uppercase;display:block;margin-top:1px}
.msm-sidebar-actions{display:flex;gap:4px;position:relative}
.msm-icon-btn {
    background:var(--sidebar-pill-bg);border:1px solid var(--sidebar-border);border-radius:8px;
    width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:14px;color:var(--sidebar-text);
    transition:background .15s,border-color .15s;flex-shrink:0;font-family:var(--font);
}
.msm-icon-btn:hover{background:var(--sidebar-pill-hover);border-color:var(--sidebar-border)}
/* White icon buttons when sitting on the gradient header */
.msm-sidebar-top .msm-icon-btn{
    background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.28);color:#fff;
}
.msm-sidebar-top .msm-icon-btn:hover{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.40)}
.msm-sidebar-section{padding:14px 16px 10px;flex-shrink:0}
/* ── Sidebar scroll zone — middle area, grows and shrinks ──────────────── */
.msm-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.msm-sidebar-scroll::-webkit-scrollbar { width: 5px; }
.msm-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 5px; }

/* History section — no fixed height, lives inside scroll zone */
.msm-sidebar-history {
    display: flex;
    flex-direction: column;
    padding: 0 14px 8px;
    flex-shrink: 0;
}

/* Sticky label — stays visible as history items scroll behind it */
.msm-history-label {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sidebar);
    padding: 10px 0 6px;
    margin-bottom: 0;
    backdrop-filter: blur(8px);
}
.msm-section-label{
    font-size:11.5px;font-weight:700;color:var(--sidebar-text2);
    letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px;font-family:var(--font);
}
.msm-selector-wrap{
    display:flex;align-items:center;gap:2px;position:relative;
}
.msm-selector-scroll{
    display:flex;flex-wrap:nowrap;gap:5px;
    overflow-x:auto;overflow-y:hidden;
    padding-bottom:7px;  /* reserved space for the hover scrollbar so pills don't jump */
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    flex:1;min-width:0;
    cursor:grab;
    /* Firefox: track is always reserved but transparent until hovered */
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
    transition:scrollbar-color .15s;
}
.msm-selector-scroll:hover,
.msm-selector-scroll:focus-within,
.msm-selector-scroll.msm-selector-dragging{
    scrollbar-color:var(--sidebar-border) transparent; /* Firefox reveal */
}
.msm-selector-scroll.msm-selector-dragging{ cursor:grabbing;scroll-behavior:auto;user-select:none; }
/* Chrome / Safari / Edge — thumb is transparent until the row is hovered,
   the track always reserves its 6px strip so nothing shifts on hover */
.msm-selector-scroll::-webkit-scrollbar{ height:6px; }
.msm-selector-scroll::-webkit-scrollbar-track{ background:transparent; }
.msm-selector-scroll::-webkit-scrollbar-thumb{ background:transparent;border-radius:6px;transition:background .15s; }
.msm-selector-scroll:hover::-webkit-scrollbar-thumb,
.msm-selector-scroll:focus-within::-webkit-scrollbar-thumb,
.msm-selector-scroll.msm-selector-dragging::-webkit-scrollbar-thumb{
    background:var(--sidebar-border);
}
.msm-selector-scroll:hover::-webkit-scrollbar-thumb:hover{ background:var(--sidebar-text3); }
.msm-selector-arrow{
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:50%;padding:0;margin-bottom:4px;
    background:var(--sidebar-pill-bg);border:1px solid var(--sidebar-border);
    color:var(--sidebar-text2);cursor:pointer;transition:all .15s,opacity .15s;
}
.msm-selector-arrow:hover{background:var(--sidebar-pill-hover);color:var(--sidebar-text)}
.msm-selector-arrow:active{transform:scale(.92)}
.msm-selector-arrow[hidden]{display:none}
/* When a row doesn't overflow, JS adds this so we don't reserve arrow space */
.msm-selector-wrap.msm-selector-no-overflow .msm-selector-arrow{display:none}
.msm-pill {
    background:var(--sidebar-pill-bg);border:1px solid var(--sidebar-border);border-radius:20px;
    padding:4px 11px;font-size:12.5px;font-weight:500;color:var(--sidebar-text2);
    cursor:pointer;white-space:nowrap;transition:all .15s;font-family:var(--font);
}
.msm-pill:hover{background:var(--sidebar-pill-hover);color:var(--sidebar-text);border-color:var(--sidebar-border)}
.msm-pill.active{background:var(--sidebar-pill-active);border-color:transparent;color:#fff}
.msm-list{display:flex;flex-direction:column;gap:3px;}
.msm-list::-webkit-scrollbar{width:5px}
.msm-list::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:5px}
.msm-topic-item {
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--sidebar-text2);
    font-size:12px;border:1px solid transparent;transition:all .15s;
    font-family:var(--font);background:transparent;text-align:left;width:100%;
}
.msm-topic-item:hover{background:var(--sidebar-item-hover);color:var(--sidebar-text);border-color:var(--sidebar-border)}
.msm-topic-item.active{background:var(--accent-bg);color:var(--accent2);border-color:transparent;border-left:2.5px solid var(--accent);padding-left:8.5px;}
.msm-topic-quiz-btn {
    font-size:10px;padding:2px 7px;background:var(--sidebar-pill-bg);
    border:1px solid var(--sidebar-border);border-radius:6px;color:var(--sidebar-text2);
    cursor:pointer;transition:all .15s;flex-shrink:0;margin-left:6px;font-family:var(--font);
}
.msm-topic-quiz-btn:hover{background:var(--accent);border-color:transparent;color:#fff}
.msm-history-list{display:flex;flex-direction:column;gap:3px;padding-bottom:6px;}
.msm-history-list::-webkit-scrollbar{width:5px}
.msm-history-list::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:5px}
.msm-history-empty{font-size:12px;color:var(--sidebar-text3);text-align:center;padding:10px 0}
/* history label sticky rule now on .msm-history-label */
.msm-history-item {
    display:flex;align-items:center;gap:6px;
    padding:6px 10px;border-radius:7px;cursor:pointer;color:var(--sidebar-text2);
    font-size:13px;
    transition:all .12s;font-family:var(--font);border:1px solid transparent;background:transparent;text-align:left;
    width:100%;flex-shrink:0;
}
.msm-history-item:hover{background:var(--sidebar-item-hover);color:var(--sidebar-text);border-color:var(--sidebar-border)}
.msm-history-icon{flex-shrink:0;font-size:12px;opacity:.9;line-height:1}
.msm-history-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msm-scope-pill{ display:none !important; /* hidden — logic runs silently */
    margin:8px 10px 6px;padding:5px 12px;background:var(--sidebar-pill-bg);
    border:1px solid var(--sidebar-border);border-radius:20px;
    font-size:12px;font-weight:500;color:var(--sidebar-text2);
    text-align:center;font-family:var(--font);letter-spacing:.2px;flex-shrink:0;
}

/* ── Main Area ───────────────────────────────────────────────────────────── */
.msm-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}
.msm-chat-header{
    padding:14px 20px 13px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    background:var(--surface);flex-shrink:0;min-height:54px;
    transition:background .25s,border-color .25s;
    position:relative; /* needed for absolute center slot */
}
/* ── v57.2: 3-column header slots ── */
.msm-header-left{display:flex;flex-direction:column;justify-content:center;min-width:0}
.msm-header-center{
    position:absolute;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;pointer-events:none; /* card passes clicks through when empty */
}
.msm-header-center:has(#msm-install-btn[style*="display:none"]),.msm-header-center:empty{pointer-events:none}
.msm-header-center #msm-install-btn{pointer-events:auto}
.msm-chat-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.4px;font-family:var(--font);line-height:1.2}
.msm-chat-sub{font-size:12px;color:var(--text2);margin-top:1px;font-family:var(--font)}
.msm-header-right{display:flex;align-items:center;gap:7px}
.msm-main .msm-icon-btn{background:var(--bg2);border-color:var(--border);color:var(--text2)}
.msm-main .msm-icon-btn:hover{background:var(--bg3);border-color:var(--border);color:var(--text)}
.msm-menu-btn{
    display:none;background:var(--bg2);border:1px solid var(--border);border-radius:8px;
    width:34px;height:34px;align-items:center;justify-content:center;
    cursor:pointer;font-size:16px;color:var(--text2);font-family:var(--font);
}
.msm-progress-bar{height:4px;background:transparent;flex-shrink:0;position:relative;overflow:hidden}
.msm-progress-bar.active{background:var(--border)}
.msm-progress-fill{
    height:100%;width:100%;
    background:linear-gradient(90deg,#1557c8,var(--accent),var(--accent2),#60a5fa);
    animation:msm-progress 3.2s cubic-bezier(0.4,0,0.2,1) infinite;transform:translateX(-100%);
    box-shadow:0 0 8px var(--accent-glow);
}
@keyframes msm-progress{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}

/* ── Messages ────────────────────────────────────────────────────────────── */
.msm-messages{
    flex:1;min-height:0;overflow-y:auto;padding:20px 20px 8px;
    display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;
}
.msm-messages::-webkit-scrollbar{width:5px}
.msm-messages::-webkit-scrollbar-track{background:transparent}
.msm-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}
.msm-msg{display:flex;gap:10px;align-items:flex-start}
.msm-msg.msm-user{flex-direction:row-reverse}
.msm-avatar{
    display:none; /* Avatars hidden — chat area is wider without them */
}
.msm-msg.msm-ai .msm-avatar{
    display:none;
}
.msm-bubble-wrap{display:flex;flex-direction:column;max-width:90%;min-width:0}
.msm-msg.msm-user .msm-bubble-wrap{align-items:flex-end}
.msm-bubble{
    padding:11px 15px;border-radius:14px;
    font-size:16px;line-height:1.7;word-wrap:break-word;
    font-family:var(--font-serif);transition:background .25s,border-color .25s;
}
.msm-msg.msm-user .msm-bubble{
    background:var(--user-bg);border:1px solid var(--user-border);
    color:var(--user-text);border-bottom-right-radius:5px;font-family:var(--font);
}
.msm-msg.msm-ai .msm-bubble{
    background:var(--ai-bg);border:1px solid var(--ai-border);
    color:var(--text);border-bottom-left-radius:5px;box-shadow:var(--shadow3);
}
.msm-bubble strong{font-weight:600;color:var(--text)}
.msm-bubble em{font-style:italic;color:var(--text2)}
.msm-bubble code{
    font-family:var(--mono);font-size:12px;background:var(--bg3);
    border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--accent-warm);
}
.msm-dots{display:flex;gap:4px;padding:3px 2px}
.msm-dots span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:msm-dot 1.2s ease-in-out infinite}
.msm-dots span:nth-child(2){animation-delay:.18s}.msm-dots span:nth-child(3){animation-delay:.36s}
@keyframes msm-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.msm-meta{font-size:12px;color:var(--text2);margin-top:6px;font-family:var(--font);letter-spacing:.2px}

/* ── Teacher generator hand-off bubble (Scene 2 → Teacher Mode) ───────────── */
.msm-tg-head{display:flex;align-items:center;gap:8px;animation:msm-fadein .2s ease both}
.msm-tg-icon{color:var(--accent);flex-shrink:0;display:flex}
.msm-tg-head strong{font-weight:600;color:var(--text)}
.msm-tg-dots{margin-left:2px}
.msm-tg-detected{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.msm-tg-detected-row{
    display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--text2);
    animation:msm-fadein .25s ease both;
}
.msm-tg-detected-row:nth-child(2){animation-delay:.08s}
.msm-tg-detected-row:nth-child(3){animation-delay:.16s}
.msm-tg-check{color:#22c55e;flex-shrink:0;position:relative;top:1px}
.msm-tg-detected-label{font-weight:600;color:var(--text2)}
.msm-tg-detected-row em{font-style:normal;color:var(--text);font-weight:500}
.msm-tg-prepnote{margin:6px 0 0;font-size:13px;color:var(--text2)}
.msm-tg-done-tick{color:#22c55e;flex-shrink:0;animation:msm-fadein .2s ease both}

/* ── Message actions ─────────────────────────────────────────────────────── */
.msm-msg-actions{
    display:flex;align-items:center;gap:4px;margin-top:10px;
    padding-top:8px;border-top:1px solid var(--border);
}
.msm-actions-group{ display:flex;align-items:center;gap:2px }
.msm-actions-divider{
    width:1px;height:18px;background:var(--border);margin:0 6px;flex-shrink:0;
}

/* Icon-only button — no border, no background by default */
.msm-icon-btn{
    position:relative;
    background:none;border:none;border-radius:6px;
    padding:5px 7px;cursor:pointer;
    font-size:15px;line-height:1;
    color:var(--text2);transition:background .13s,transform .1s;
    -webkit-tap-highlight-color:transparent;
}
.msm-icon-btn:hover{ background:var(--bg3) }
.msm-icon-btn:active{ transform:scale(.9) }
.msm-icon-btn:disabled{ opacity:.4;cursor:default }
.msm-icon-btn--ok  { color:#22c55e }
.msm-icon-btn--warn{ color:#ef4444 }
.msm-fb-up.msm-icon-btn--ok  { background:#f0fdf4;border-radius:6px }
.msm-fb-down.msm-icon-btn--warn{ background:#fef2f2;border-radius:6px }

/* ── Feedback reason panel ──────────────────────────────────────────────── */
.msm-fb-reason-panel{
    margin-top:8px;padding:10px 12px;
    background:var(--bg2);border:1px solid var(--border);border-radius:10px;
}
.msm-fb-reason-label{
    font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
    color:var(--text2);margin:0 0 8px;
}
.msm-fb-chips{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px }
.msm-fb-chip{
    background:var(--bg3);border:1px solid var(--border);border-radius:20px;
    padding:5px 11px;font-size:12px;font-weight:500;color:var(--text2);
    cursor:pointer;transition:background .13s,color .13s,border-color .13s;
    -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.msm-fb-chip:hover{ background:#fef2f2;border-color:#fca5a5;color:#dc2626 }
.msm-fb-chip--active{ background:#fef2f2;border-color:#f87171;color:#dc2626;font-weight:600 }
.msm-fb-note-row{ display:flex;gap:6px;align-items:center }
.msm-fb-note-input{
    flex:1;padding:6px 10px;font-size:12px;font-family:var(--font);
    background:var(--bg);border:1px solid var(--border);border-radius:8px;
    color:var(--text);outline:none;
}
.msm-fb-note-input:focus{ border-color:var(--accent) }
.msm-fb-send-btn{
    padding:6px 14px;font-size:12px;font-weight:600;font-family:var(--font);
    background:var(--accent);color:#fff;border:none;border-radius:8px;
    cursor:pointer;white-space:nowrap;flex-shrink:0;
    transition:filter .13s;
}
.msm-fb-send-btn:hover{ filter:brightness(1.1) }

/* ── Install App button (centered in header) ────────────────────────────── */
.msm-install-btn--header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #1a6fe8, #1259c4) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--font);
    letter-spacing: -.1px;
    box-shadow: 0 3px 14px rgba(26,111,232,.40);
    animation: msm-install-pulse 2.5s ease-in-out infinite;
    transition: filter .15s, transform .15s;
}
.msm-install-btn--header:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26,111,232,.50) !important;
}
.msm-install-label {
    font-size: 13px;
    letter-spacing: -.1px;
}
@keyframes msm-install-pulse {
    0%, 100% { box-shadow: 0 3px 14px rgba(26,111,232,.40), 0 0 0 0 rgba(26,111,232,.3); }
    50%       { box-shadow: 0 3px 14px rgba(26,111,232,.40), 0 0 0 8px rgba(26,111,232,0); }
}
/* On small screens keep label but shrink padding */
@media (max-width: 400px) {
    .msm-install-btn--header { padding: 7px 12px !important; font-size: 12px; }
}

/* CSS tooltip — appears above button on hover, desktop only */
@media(hover:hover){
    .msm-icon-btn::after{
        content:attr(data-label);
        position:absolute;
        bottom:calc(100% + 7px);
        left:50%;transform:translateX(-50%);
        background:#1a1714;color:#f0ece4;
        font-size:10px;font-family:var(--font);font-weight:600;
        padding:4px 8px;border-radius:6px;
        white-space:nowrap;pointer-events:none;
        opacity:0;transition:opacity .14s,transform .14s;
        box-shadow:0 2px 8px rgba(0,0,0,.22);
        letter-spacing:.2px;
    }
    .msm-icon-btn:hover::after{ opacity:1 }
}

/* Related notes — "Also in this subtopic" chips */
.msm-related-notes{
    display:flex;flex-direction:column;gap:6px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
.msm-related-label{
    font-size:11px;font-weight:600;letter-spacing:.3px;
    text-transform:uppercase;color:var(--text2);opacity:.7;
}
.msm-related-chips{ display:flex;flex-wrap:wrap;gap:6px }
.msm-related-chip{
    background:none;
    border:1px solid var(--border);border-radius:20px;
    padding:4px 12px;cursor:pointer;
    font-size:12px;font-family:var(--font);
    color:var(--accent);font-weight:500;
    transition:background .13s,border-color .13s;
    -webkit-tap-highlight-color:transparent;
}
.msm-related-chip:hover{ background:var(--accent-bg);border-color:var(--accent) }
.msm-related-chip--used{ opacity:.45;cursor:default }


/* Explorer card action buttons (Listen + Quiz me) */
.msm-action-btn{
    background:var(--bg2);border:1px solid var(--border);border-radius:20px;
    padding:5px 12px;cursor:pointer;font-size:12px;font-family:var(--font);
    color:var(--text2);transition:all .14s;font-weight:500;white-space:nowrap;
}
.msm-action-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
/* "Listen" btn — blue tint; "Quiz me" btn — green tint */
.msm-explorer-tts{
    border-color:rgba(26,111,232,.35);background:rgba(26,111,232,.07);color:#1a6fe8;
}
.msm-explorer-tts:hover{background:rgba(26,111,232,.14);border-color:var(--accent);color:var(--accent)}
.msm-explorer-quiz-btn{
    border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07);color:#16a34a;
}
.msm-explorer-quiz-btn:hover{background:rgba(34,197,94,.14);border-color:#22c55e;color:#16a34a}
.msm-scroll-top-row{margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.msm-scroll-top-btn{opacity:.7}
.msm-scroll-top-btn:hover{opacity:1}

/* ── Auto-quiz prompt ────────────────────────────────────────────────────── */
.msm-auto-quiz-prompt{
    display:inline-flex;align-items:center;gap:8px;margin-top:10px;
    padding:9px 14px;background:var(--accent-warm-bg);
    border:1px solid rgba(245,158,11,.30);border-radius:10px;
    font-size:12.5px;font-family:var(--font);color:#92400e;font-weight:500;
}
.msm-auto-quiz-btn{
    background:var(--accent-warm);color:#fff;border:none;border-radius:7px;
    padding:4px 11px;cursor:pointer;font-size:12px;font-weight:600;
    font-family:var(--font);transition:opacity .14s;white-space:nowrap;
    box-shadow:0 2px 8px rgba(245,158,11,.30);
}
.msm-auto-quiz-btn:hover{opacity:.88}

/* ── Difficulty picker ───────────────────────────────────────────────────── */
.msm-difficulty-picker{
    padding:16px 20px;border-bottom:1px solid var(--border);
    background:var(--surface2);flex-shrink:0;display:none;animation:msm-slide-down .25s ease;
}
.msm-difficulty-picker.visible{display:block}
.msm-difficulty-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:12px;font-family:var(--font)}
.msm-diff-grid{display:flex;gap:10px;flex-wrap:wrap}
.msm-diff-card{
    flex:1;min-width:100px;padding:12px 14px;border-radius:12px;
    border:1.5px solid var(--border);background:var(--surface);
    cursor:pointer;transition:all .18s;text-align:center;font-family:var(--font);
}
.msm-diff-card:hover,.msm-diff-card.active{border-color:var(--accent);background:var(--accent-bg)}
.msm-diff-icon{font-size:20px;margin-bottom:4px}
.msm-diff-label{font-size:13px;font-weight:600;color:var(--text)}
.msm-diff-sub{font-size:12px;color:var(--text2);margin-top:2px}

/* ── Welcome ─────────────────────────────────────────────────────────────── */
.msm-welcome{padding:8px 4px 4px;font-family:var(--font)}
.msm-welcome-emoji{font-size:28px;margin-bottom:10px}
.msm-welcome-title{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.4px;margin-bottom:5px}
.msm-welcome-sub{font-size:14px;color:var(--text2);line-height:1.5}

/* ── Suggestions ─────────────────────────────────────────────────────────── */
.msm-suggestions{margin-top:12px}
.msm-suggestions-label{
    font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.3px;
    text-transform:uppercase;margin-bottom:7px;font-family:var(--font);
}

/* ── Sidebar New Chat button (mobile) ────────────────────────────────────── */
.msm-sidebar-newchat-section { padding: 8px 12px 4px; flex-shrink: 0; }
.msm-sidebar-newchat-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 10px 13px; border-radius: 10px; cursor: pointer;
    background: var(--accent); border: none; color: #fff;
    font-size: 13px; font-weight: 600; font-family: var(--font);
    transition: opacity .15s; text-align: left;
}
.msm-sidebar-newchat-btn:hover { opacity: .88; }
.msm-sidebar-newchat-icon { font-size: 15px; flex-shrink: 0; }
.msm-sidebar-newchat-arrow { flex-shrink: 0; margin-left: auto; opacity: .7; }
/* On desktop the sidebar nav already has "New Chat" — hide the duplicate */
@media (min-width: 701px) {
    .msm-sidebar-newchat-section { display: none; }
}

/* ── Subtopic pills ──────────────────────────────────────────────────────── */
.msm-subtopic-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.msm-subtopic-pill{
    display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;
    border:1.5px solid var(--accent);background:var(--accent-bg);color:var(--accent);
    font-size:12.5px;font-family:var(--font);cursor:pointer;transition:all .16s;text-align:left;font-weight:500;
}
.msm-subtopic-pill:hover:not(:disabled){
    background:var(--accent);color:#fff;transform:translateY(-1.5px);
    box-shadow:0 4px 14px rgba(26,111,232,.32);
}
.msm-subtopic-pill:disabled{opacity:.45;cursor:default;transform:none}
.msm-subtopic-pill--selected{background:var(--accent);color:#fff;border-color:var(--accent);opacity:1}

/* ── Bookmarks panel ─────────────────────────────────────────────────────── */
/* ── Full-screen slide-from-right panels (X/Twitter style) ─────────────── */
.msm-panel{
    position:fixed;
    top:0; right:0; bottom:0;
    width:100%; max-width:100%;
    background:var(--surface);
    flex-direction:column;
    z-index:200;
    overflow:hidden;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    border:none; border-radius:0; box-shadow:none;
    /* display is controlled by JS — display:none hides, display:flex shows */
}
.msm-panel.msm-panel-open{
    display:flex !important;
    transform:translateX(0);
}
/* Scrim behind open panel */
.msm-panel-scrim{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    z-index:199;
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
}
.msm-panel-scrim.msm-scrim-visible{
    opacity:1; pointer-events:auto;
}
.msm-panel-head{
    padding:0 16px;
    height:56px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:10px;
    font-weight:700;font-size:16px;color:var(--text);font-family:var(--font);
    background:var(--surface);
    flex-shrink:0;
}
.msm-panel-body{flex:1;overflow-y:auto;padding:12px;overscroll-behavior:contain;}
.msm-panel-body::-webkit-scrollbar{width:4px}
.msm-panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.msm-empty{color:var(--text2);font-size:13px;text-align:center;padding:20px 0;font-family:var(--font)}
.msm-bookmark-item{padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);margin-bottom:8px}
.msm-bookmark-q{font-weight:600;font-size:13px;color:var(--text);margin-bottom:4px;font-family:var(--font)}
.msm-bookmark-preview{font-size:12px;color:var(--text2);line-height:1.4;margin-bottom:8px;font-family:var(--font-serif)}
.msm-bookmark-del{
    background:none;border:1px solid var(--border);color:var(--text3);
    border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer;
    font-family:var(--font);transition:all .13s;
}
.msm-bookmark-del:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2}

/* ── Quiz overlay ────────────────────────────────────────────────────────── */
.msm-quiz-overlay{
    position:absolute;inset:0;background:rgba(0,0,0,.52);
    display:flex;align-items:center;justify-content:center;
    z-index:80;backdrop-filter:blur(4px);
}
.msm-quiz-box{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    width:520px;max-width:calc(100vw - 32px);max-height:85vh;
    display:block;overflow-y:auto;box-shadow:var(--shadow2);
    position:relative;
    /* Whole modal scrolls — head and nav are sticky inside */
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* ── Quiz loading state (shown while the quiz questions are fetched) ───── */
.msm-quiz-loading{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    min-height:240px;padding:40px 20px;
    animation:msmQuizLoadingFade .2s ease;
}
.msm-quiz-spinner{
    width:34px;height:34px;border-radius:50%;
    border:3px solid var(--border);border-top-color:var(--accent);
    animation:msmQuizSpin .8s linear infinite;
}
.msm-quiz-loading-text{
    font-size:13.5px;font-weight:600;color:var(--text2,#64748b);font-family:var(--font);
    letter-spacing:.2px;
}
.msm-quiz-loading-text::after{
    content:'';display:inline-block;width:1em;text-align:left;
    animation:msmQuizDots 1.2s steps(4,end) infinite;
}
@keyframes msmQuizSpin{to{transform:rotate(360deg)}}
@keyframes msmQuizLoadingFade{from{opacity:0}to{opacity:1}}
@keyframes msmQuizDots{
    0%{content:''}
    25%{content:'.'}
    50%{content:'..'}
    75%{content:'...'}
    100%{content:''}
}
/* quiz-body is just a normal block now — no inner flex clipping */
#msm-quiz-body{
    display:block;
}
.msm-quiz-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 20px;border-bottom:1px solid var(--border);
    font-weight:700;font-size:15px;color:var(--text);font-family:var(--font);background:var(--surface2);
    position:sticky;top:0;z-index:2;border-radius:18px 18px 0 0;
}
.msm-quiz-head button{
    background:var(--bg3);border:1px solid var(--border);border-radius:8px;
    width:30px;height:30px;font-size:14px;cursor:pointer;color:var(--text2);
    display:flex;align-items:center;justify-content:center;transition:all .13s;
}
.msm-quiz-head button:hover{background:var(--bg2);color:var(--text)}
.msm-quiz-q{padding:20px;}
.msm-quiz-num{font-size:12px;color:var(--text2);margin-bottom:7px;font-family:var(--font);letter-spacing:.3px;text-transform:uppercase}
.msm-quiz-text{font-weight:600;color:var(--text);line-height:1.55;margin-bottom:16px;font-size:14.5px;font-family:var(--font)}
.msm-opt{
    display:block;width:100%;text-align:left;padding:11px 15px;margin-bottom:8px;
    border:1.5px solid var(--border);border-radius:10px;cursor:pointer;
    background:var(--surface);font-size:13.5px;color:var(--text);
    transition:all .14s;font-family:var(--font);font-weight:500;
}
.msm-opt:hover{border-color:var(--accent);background:var(--accent-bg)}
.msm-opt.correct{border-color:#22c55e;background:#f0fdf4;color:#15803d}
.msm-opt.wrong{border-color:#ef4444;background:#fef2f2;color:#dc2626}
.msm-quiz-ta{
    width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px;
    font-size:13.5px;font-family:var(--font-serif);resize:vertical;min-height:88px;
    background:var(--surface);color:var(--text);transition:border-color .14s;
}
.msm-quiz-ta:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.msm-quiz-submit{
    background:var(--accent);color:#fff;border:none;border-radius:10px;
    padding:10px 20px;cursor:pointer;font-size:13.5px;margin-top:10px;
    font-weight:600;font-family:var(--font);transition:opacity .15s;
}
.msm-quiz-submit:hover{opacity:.9}
.msm-quiz-fb{padding:10px 14px;border-radius:10px;margin-top:10px;font-size:13px;font-weight:500;font-family:var(--font)}
.msm-quiz-fb.ok{background:#f0fcf3;color:#146b30;border:1px solid #a8eec0}
.msm-quiz-fb.bad{background:#fef2f1;color:#c62121;border:1px solid #fbbfbe}
.msm-quiz-fb.partial{background:#fdf9ed;color:#c46c06;border:1px solid #f5d878}
.msm-quiz-explain{
    font-size:12.5px;color:var(--text2);margin-top:9px;padding:10px;
    background:var(--bg3);border-radius:9px;font-family:var(--font-serif);line-height:1.55;
}
.msm-quiz-nav{
    padding:14px 20px;display:flex;justify-content:space-between;
    border-top:1px solid var(--border);background:var(--surface2);
    position:sticky;bottom:0;z-index:2;border-radius:0 0 18px 18px;
}
.msm-quiz-nav button{
    padding:8px 18px;border-radius:9px;border:1.5px solid var(--border);
    background:var(--surface);cursor:pointer;font-size:13px;font-family:var(--font);
    color:var(--text);transition:all .14s;font-weight:500;
}
.msm-quiz-nav button:hover{background:var(--bg2);border-color:var(--accent);color:var(--accent)}
.msm-quiz-nav button:disabled{opacity:.35;cursor:not-allowed}

/* ── Scene 3: Re-teach bubble ───────────────────────────────────────────── */
.msm-reteach-loading{
    display:flex;align-items:center;gap:9px;padding:11px 14px;
    border-radius:10px;margin-top:10px;font-size:13px;color:var(--text2);
    background:var(--bg2);border:1px solid var(--border);font-family:var(--font);
}
.msm-reteach-spinner{
    display:inline-block;width:13px;height:13px;border-radius:50%;
    border:2px solid var(--border);border-top-color:var(--accent);
    animation:msm-spin .7s linear infinite;flex-shrink:0;
}
@keyframes msm-spin{to{transform:rotate(360deg)}}
.msm-reteach-bubble{
    display:flex;gap:10px;align-items:flex-start;
    padding:13px 14px;border-radius:12px;margin-top:10px;
    background:var(--accent-bg,#eff6ff);border:1px solid var(--accent,#6366f1);
    animation:msm-fadein .3s ease;
}
@keyframes msm-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msm-reteach-icon{font-size:17px;flex-shrink:0;line-height:1.3}
.msm-reteach-text{font-size:13px;color:var(--text);line-height:1.6;font-family:var(--font-serif)}
.msm-reteach-text p{margin:0 0 6px}
.msm-reteach-text p:last-child{margin:0;font-style:italic;color:var(--text2);font-size:12.5px}
.msm-reteach-giveup{
    padding:9px 13px;border-radius:9px;margin-top:8px;
    font-size:12.5px;color:var(--text2);background:var(--bg3);
    border:1px solid var(--border);font-family:var(--font);
}

/* ── Scene 4: Advance strip (in scroll area) + nav-bar action buttons ────── */
/* Strip: compact one-liner that sits inside #msm-qfb — no buttons needed    */
.msm-advance-strip{
    display:flex;align-items:center;flex-wrap:wrap;gap:5px;
    margin-top:11px;padding:10px 13px;border-radius:10px;
    background:var(--accent-bg,#eff6ff);border:1px solid var(--accent,#6366f1);
    font-size:13px;color:var(--text);font-family:var(--font);
    animation:msm-fadein .3s ease;line-height:1.5;
}
.msm-advance-check-sm{font-size:14px;flex-shrink:0}
.msm-advance-xp{
    display:inline-block;background:var(--accent,#6366f1);color:#fff;
    font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;
    vertical-align:middle;
}
/* Moving-to sub-text inside strip */
.msm-advance-moving{color:var(--text2);font-size:12px}
.msm-advance-qcount{color:var(--text2);font-size:12px}

/* Nav-bar overrides when advance is active — buttons replace prev/next      */
.msm-quiz-nav .msm-advance-go{
    flex:1;background:var(--accent,#6366f1);color:#fff;
    border:none;border-radius:10px;padding:9px 16px;
    cursor:pointer;font-size:13.5px;font-weight:700;
    font-family:var(--font);transition:opacity .15s;
}
.msm-quiz-nav .msm-advance-go:hover{opacity:.88}
.msm-quiz-nav .msm-advance-skip{
    flex:1;background:transparent;color:var(--text2);
    border:1.5px solid var(--border);border-radius:10px;
    padding:9px 12px;cursor:pointer;font-size:13px;
    font-family:var(--font);transition:all .14s;white-space:nowrap;
}
.msm-quiz-nav .msm-advance-skip:hover{border-color:var(--accent);color:var(--accent)}
.msm-advance-nav-loading{
    font-size:13px;color:var(--text2);font-family:var(--font);
    padding:0 4px;align-self:center;
}
/* Inline share button inside the advance strip */
.msm-advance-share-btn{
    display:inline-flex;align-items:center;gap:4px;
    margin-left:auto;
    background:transparent;border:1.5px solid var(--accent,#6366f1);
    color:var(--accent,#6366f1);border-radius:20px;
    font-size:12px;font-weight:700;font-family:var(--font);
    padding:3px 11px;cursor:pointer;white-space:nowrap;
    transition:background .15s,color .15s;flex-shrink:0;
}
.msm-advance-share-btn:hover{
    background:var(--accent,#6366f1);color:#fff;
}

/* ── Input area ──────────────────────────────────────────────────────────── */
.msm-input-area{
    padding:12px 16px 14px;border-top:1px solid var(--border);
    background:var(--surface);flex-shrink:0;transition:background .25s,border-color .25s;
}
/* Input bar wraps the text field + hint — always a visible flex column */
.msm-input-bar{
    display:flex;flex-direction:column;width:100%;
}
.msm-topic-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;transition:opacity .2s}
.msm-topic-pills.hidden{opacity:0;pointer-events:none;height:0;margin:0;overflow:hidden}
.msm-topic-pill-btn{
    background:var(--bg2);border:1px solid var(--border);border-radius:20px;
    padding:5px 12px;font-size:13px;color:var(--text2);cursor:pointer;
    font-family:var(--font);font-weight:500;transition:all .14s;white-space:nowrap;
}
.msm-topic-pill-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.msm-input-wrap{
    background:var(--bg2);
    border:1.5px solid var(--border);border-radius:14px;padding:8px 8px 8px 14px;
    transition:border-color .18s,box-shadow .18s;
}
.msm-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-glow),0 2px 10px rgba(26,111,232,.08)}
.msm-input-normal-row{display:flex;align-items:flex-end;gap:8px;width:100%}
#msm-input{
    flex:1;border:none;outline:none;background:transparent;
    font-size:16px;font-family:var(--font-serif);color:var(--text);
    resize:none;line-height:1.5;max-height:120px;overflow-y:auto;min-height:22px;
}
#msm-input::placeholder{color:var(--text3)}
#msm-send{
    background:linear-gradient(140deg,#1557c8,#4a9af5);
    border:none;border-radius:10px;
    width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:opacity .15s,transform .15s,box-shadow .18s;
    box-shadow:0 2px 8px rgba(26,111,232,.28);
}
#msm-send:hover{opacity:.93;transform:scale(1.05);box-shadow:0 4px 14px rgba(26,111,232,.38)}
#msm-send:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
#msm-send svg{width:16px;height:16px;fill:#fff}

/* v6: Voice input button (idle mic, sits in the normal typing row) */
#msm-voice-btn{
    background:transparent;border:1.5px solid var(--border);border-radius:10px;
    width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .2s;color:var(--text2);margin-right:4px;
}
#msm-voice-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}

/* ── v7: WhatsApp-style recording row ─────────────────────────────────────
   Replaces the normal typing row entirely while listening, so nothing
   competes visually with the recording state. */
.msm-voice-rec-row{
    display:flex;align-items:center;gap:10px;width:100%;height:36px;
    animation:msm-vrow-in .18s ease-out;
}
@keyframes msm-vrow-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.msm-voice-cancel-btn,.msm-voice-confirm-btn{
    border:none;background:transparent;cursor:pointer;flex-shrink:0;
    width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    transition:background .15s,transform .1s;
}
.msm-voice-cancel-btn{color:var(--text3)}
.msm-voice-cancel-btn:hover{background:rgba(239,68,68,.1);color:#ef4444}
.msm-voice-cancel-btn:active{transform:scale(.9)}

.msm-voice-confirm-btn{
    background:linear-gradient(140deg,#1557c8,#4a9af5);color:#fff;
    margin-left:auto;box-shadow:0 2px 8px rgba(26,111,232,.3);
}
.msm-voice-confirm-btn:hover{opacity:.93;transform:scale(1.06)}
.msm-voice-confirm-btn:active{transform:scale(.94)}

.msm-voice-reddot{
    width:10px;height:10px;border-radius:50%;background:#ef4444;flex-shrink:0;
    animation:msm-dot-blink 1.1s ease-in-out infinite;
}
@keyframes msm-dot-blink{0%,100%{opacity:1}50%{opacity:.25}}

.msm-voice-timer{
    font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;
    color:var(--text2);flex-shrink:0;min-width:32px;
}

.msm-voice-wave{
    flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:22px;
    overflow:hidden;padding:0 2px;
}
.msm-voice-wave i{
    display:block;width:3px;border-radius:2px;background:#ef4444;opacity:.85;
    animation:msm-wave-bounce .9s ease-in-out infinite;
}
.msm-voice-wave i:nth-child(1){height:30%;animation-delay:-0.8s}
.msm-voice-wave i:nth-child(2){height:60%;animation-delay:-0.7s}
.msm-voice-wave i:nth-child(3){height:90%;animation-delay:-0.6s}
.msm-voice-wave i:nth-child(4){height:45%;animation-delay:-0.5s}
.msm-voice-wave i:nth-child(5){height:75%;animation-delay:-0.4s}
.msm-voice-wave i:nth-child(6){height:100%;animation-delay:-0.3s}
.msm-voice-wave i:nth-child(7){height:55%;animation-delay:-0.2s}
.msm-voice-wave i:nth-child(8){height:80%;animation-delay:-0.1s}
.msm-voice-wave i:nth-child(9){height:40%;animation-delay:0s}
.msm-voice-wave i:nth-child(10){height:65%;animation-delay:0.1s}
@keyframes msm-wave-bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.msm-voice-live-text{
    font-size:12.5px;color:var(--text3);white-space:nowrap;flex-shrink:0;display:none;
}
/* On wider screens show the "Listening…" caption too; narrow phones keep it hidden to save space */
@media (min-width:420px){.msm-voice-live-text{display:inline}}

.msm-input-wrap.msm-voice-active{
    border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

.msm-hint{font-size:12px;color:var(--text2);text-align:center;margin-top:6px;font-family:var(--font);display:block;flex-shrink:0;}


/* ── Gamification header (legacy — kept for floatXp anchor) ─────────────── */
.msm-gam-header{display:flex;align-items:center;gap:7px;margin-right:5px}
/* ── Sidebar gamification strip ─────────────────────────────────────────── */
.msm-sidebar-gam-strip{
    display:flex;align-items:center;gap:6px;padding:8px 14px 10px;
    border-bottom:1px solid var(--sidebar-border);flex-shrink:0;
    background:linear-gradient(180deg,rgba(74,154,245,.08) 0%,transparent 100%);
}
.msm-sidebar-gam-strip .msm-streak-badge{font-size:11px;padding:3px 8px}
.msm-sidebar-gam-strip .msm-xp-badge{font-size:11px;padding:3px 8px}
.msm-streak-badge{
    display:inline-flex;align-items:center;gap:4px;
    background:rgba(234,88,12,.1);border:1.5px solid rgba(234,88,12,.25);color:#ea580c;
    border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;
    font-family:var(--font);cursor:default;white-space:nowrap;transition:box-shadow .3s;
}
.msm-streak-badge.msm-streak-fire{
    background:rgba(234,88,12,.15);border-color:rgba(234,88,12,.4);
    animation:msm-flame-pulse 2s ease-in-out infinite;
}
@keyframes msm-flame-pulse{
    0%,100%{box-shadow:0 0 6px rgba(234,88,12,.15)}
    50%{box-shadow:0 0 14px rgba(234,88,12,.45)}
}
.msm-xp-badge{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--accent-bg);border:1.5px solid rgba(26,111,232,.25);color:var(--accent);
    border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;
    font-family:var(--font);cursor:default;position:relative;white-space:nowrap;
}
.msm-level-icon{font-size:14px;line-height:1}
.msm-xp-bar-mini{
    position:absolute;bottom:0;left:6px;right:6px;height:3px;
    background:rgba(26,111,232,.15);border-radius:3px;overflow:hidden;
}
.msm-xp-bar-fill{height:100%;background:linear-gradient(90deg,#1557c8,var(--accent2));border-radius:3px;transition:width .6s ease;box-shadow:0 0 6px rgba(26,111,232,.40)}

/* ── Weekly / Campaign CTA banner ───────────────────────────────────────── */
.msm-weekly-banner{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
    background:linear-gradient(135deg,rgba(26,111,232,.08),rgba(245,158,11,.05));
    border-bottom:1px solid rgba(26,111,232,.18);
    padding:8px 16px;font-size:13px;color:var(--text);flex-shrink:0;
    animation:msm-slide-down .3s ease;font-family:var(--font);
}
/* Campaign CTA variant — amber left-accent to signal "event" */
.msm-camp-cta-banner{
    background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(26,111,232,.06));
    border-bottom:1px solid rgba(245,158,11,.25);
    border-left:3px solid #f59e0b;
    padding-left:13px;
}
@keyframes msm-slide-down{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── Campaign banner pulse (3 cycles, then settles) ─────────────────────── */
@keyframes msm-camp-banner-pulse {
    0%,100% { box-shadow: none; }
    50%     { box-shadow: 0 0 10px 3px rgba(245,158,11,.30), 0 0 0 2px rgba(245,158,11,.18); }
}
/* backwards fill-mode: pre-applies the `from` keyframe so the element starts
   hidden (opacity:0, translateY(-100%)) rather than flashing visible for one
   render frame before the animation kicks in. */
.msm-camp-cta-banner {
    /* pulse runs after the slideDown animation completes */
    animation: msm-camp-banner-pulse 1.5s ease-in-out 0.8s 3;
}

/* ── Campaign live dot on Ranking nav ──────────────────────────────────── */
@keyframes msm-dot-breathe {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.75); }
}

/*
 * Desktop sidebar: dot is inline — rendered as a flex sibling after "Ranking"
 * so it sits on the same row as the label text.
 */
.msm-camp-nav-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245,158,11,.25);
    animation: msm-dot-breathe 2s ease-in-out infinite;
    pointer-events: none;
    flex-shrink: 0;
    align-self: center;
    margin-left: 2px;
}

/* Teacher Mode primary nav dot — purple pulse for unpaid teacher accounts */
.msm-teacher-nav-dot {
    background: #9333ea !important;
    box-shadow: 0 0 0 2px rgba(147,51,234,.25) !important;
}

/* Earn / Refer & Earn nav dot — green pulse (teacher ambassador) */
.msm-earn-nav-dot {
    background: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22,163,74,.25) !important;
}

   Icon ≈ 20px wide, centred via flex-column + align-items:center.
   So icon right edge ≈ 50% + 10px. Dot at left:calc(50% + 6px) sits
   tight at the icon shoulder without drifting away to the corner. */
.msm-mobile-nav-item.msm-nav-has-camp { position: relative !important; }
.msm-mobile-nav-item .msm-camp-nav-dot {
    position: absolute;
    display: block;
    top: 5px;
    left: calc(50% + 6px);
    width: 8px; height: 8px;
    margin-left: 0;
    transform: none;
}

/* ── Campaign tab halo flash (triggered via JS class) ──────────────────── */
@keyframes msm-tab-halo {
    0%   { box-shadow: 0 0 0 0   rgba(245,158,11,0),   0 0 0 0   rgba(245,158,11,0); }
    20%  { box-shadow: 0 0 0 4px rgba(245,158,11,.55),  0 0 8px 2px rgba(251,191,36,.3); }
    45%  { box-shadow: 0 0 0 0   rgba(245,158,11,0),   0 0 0 0   rgba(245,158,11,0); }
    65%  { box-shadow: 0 0 0 4px rgba(245,158,11,.45),  0 0 8px 2px rgba(251,191,36,.25); }
    100% { box-shadow: 0 0 0 0   rgba(245,158,11,0),   0 0 0 0   rgba(245,158,11,0); }
}
.msm-lb-camp-tab-flash {
    animation: msm-tab-halo 1.1s ease forwards;
    border-color: #f59e0b !important;
    color: #d97706 !important;
}

.msm-weekly-icon{font-size:16px;flex-shrink:0;line-height:1}

/* Text: fills available row space, wraps cleanly on overflow */
.msm-weekly-text{
    flex:1;min-width:0;
    white-space:normal;
    overflow:visible;
    line-height:1.35;
}
.msm-weekly-text strong{font-weight:700}
.msm-weekly-text em{font-size:11px;color:var(--text3);margin-left:4px}

/* Countdown inside campaign banner */
.msm-camp-cta-countdown{
    font-variant-numeric:tabular-nums;
    font-weight:600;color:var(--accent);font-size:12px;
}

/* Gate label for free users */
.msm-camp-cta-gate{
    font-size:11.5px;font-weight:600;color:var(--text2);
    white-space:nowrap;flex-shrink:0;
}
/* Subscribe button in campaign banner — sits between text and × */
.msm-camp-cta-premium-btn{
    order:3;flex-shrink:0;
    font-size:12px;font-weight:700;color:#1a1a2e;
    white-space:nowrap;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    border:none;border-radius:20px;padding:5px 14px;cursor:pointer;
    transition:opacity .15s;box-shadow:0 1px 6px rgba(245,158,11,.3);
}
.msm-camp-cta-premium-btn:hover{opacity:.88;}

/* CTA button — pushed to its own second row on mobile via order+margin */
.msm-weekly-btn{
    order:5;
    background:var(--accent);color:#fff;border:none;border-radius:8px;
    padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer;
    white-space:nowrap;flex-shrink:0;font-family:var(--font);transition:opacity .14s;
}
.msm-weekly-btn:hover{opacity:.9}
.msm-weekly-close{opacity:.5;flex-shrink:0;order:10;margin-left:auto}.msm-weekly-close:hover{opacity:1}

/* ── Mobile: text wraps fully, button drops to its own right-aligned row ── */
@media(max-width:700px){
    .msm-weekly-banner{
        padding:7px 12px;
        row-gap:5px;
        column-gap:8px;
    }
    .msm-weekly-text{
        font-size:12px;
        min-width:0;
        /* Let text fill row 1 beside icon & close; button wraps to row 2 */
    }
    .msm-weekly-btn{
        /* Wraps to row 2 and right-aligns thanks to margin-left:auto */
        font-size:11.5px;
        padding:4px 11px;
    }
}
@media(max-width:400px){
    .msm-weekly-text{ font-size:11.5px; }
    .msm-weekly-btn{ font-size:11px; padding:4px 9px; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.msm-toast-container{
    position:fixed;bottom:24px;right:24px;z-index:99999;
    display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:340px;
}
.msm-toast{
    display:flex;align-items:flex-start;gap:10px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:12px;padding:12px 14px;box-shadow:var(--shadow2);
    font-size:13px;color:var(--text);pointer-events:auto;font-family:var(--font);
    opacity:0;transform:translateY(10px) scale(.97);transition:opacity .28s ease,transform .28s ease;
}
.msm-toast.msm-toast-show{opacity:1;transform:translateY(0) scale(1)}
.msm-toast.msm-toast-hide{opacity:0;transform:translateY(-6px) scale(.97)}
.msm-toast-body{flex:1;line-height:1.4}.msm-toast-body strong{font-weight:700}
.msm-toast-close{background:none;border:none;cursor:pointer;color:var(--text3);font-size:14px;padding:0;line-height:1;flex-shrink:0}
.msm-toast-close:hover{color:var(--text)}
.msm-toast-success{border-color:#22c55e;background:#f0fdf4;color:#15803d}
.msm-toast-warn{border-color:#f59e0b;background:#fffbeb;color:#92400e}
.msm-toast-badge{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.msm-toast-levelup{border-color:#a855f7;background:linear-gradient(135deg,#faf5ff,#ede9fe);color:#6b21a8;box-shadow:0 4px 20px rgba(168,85,247,.2)}
/* "info" previously had no colour of its own and just blended into the plain
   card background — give it a clearly visible slate tint in both modes. */
.msm-toast-info{border-color:#64748b;background:#eef2f6;color:#334155}
.msm-app[data-theme="dark"] .msm-toast-success{background:#052e16;color:#4ade80;border-color:#166534}
.msm-app[data-theme="dark"] .msm-toast-warn{background:#1c1400;color:#fbbf24;border-color:#78350f}
.msm-app[data-theme="dark"] .msm-toast-badge{background:var(--accent-bg);color:var(--accent2)}
.msm-app[data-theme="dark"] .msm-toast-levelup{background:#2e1065;color:#e9d5ff;border-color:#7c3aed}
.msm-app[data-theme="dark"] .msm-toast-info{background:#1e293b;color:#cbd5e1;border-color:#475569}

/* ── Centered toast variant ──────────────────────────────────────────────
   Opt-in (msm-toast-centered) for messages that must be noticed instantly,
   e.g. clicking "Join" before a campaign has opened. Detaches the toast
   from the bottom-right stack and fixes it to the middle of the viewport,
   on top of everything, on any screen size. */
.msm-toast.msm-toast-centered{
    position:fixed !important;
    top:50%;left:50%;right:auto;bottom:auto;
    width:min(90vw,340px);max-width:340px;
    transform:translate(-50%,-50%) scale(.97);
    box-shadow:0 12px 40px rgba(0,0,0,.28);
    z-index:100000;
}
.msm-toast.msm-toast-centered.msm-toast-show{transform:translate(-50%,-50%) scale(1)}
.msm-toast.msm-toast-centered.msm-toast-hide{transform:translate(-50%,-50%) scale(.97);opacity:0}

/* ── +XP Float ───────────────────────────────────────────────────────────── */
.msm-xp-float{
    position:fixed;font-size:13px;font-weight:700;color:var(--accent);
    pointer-events:none;z-index:100000;opacity:1;transform:translateY(0);
    transition:transform .9s ease,opacity .9s ease;font-family:var(--font);
    text-shadow:0 1px 4px rgba(26,111,232,.3);
}
.msm-xp-float.msm-xp-float-up{opacity:0;transform:translateY(-28px)}

/* ── Study Plan ──────────────────────────────────────────────────────────── */
.msm-sp-app{
    font-family:'Outfit',-apple-system,sans-serif;max-width:860px;margin:0 auto;
    --sp-accent:#1a6fe8;--sp-warm:#f59e0b;
    --sp-bg:#fafaf8;--sp-surface:#fff;--sp-border:#e4e2da;
    --sp-text:#1a1714;--sp-text2:#6b6558;--sp-text3:#6d6255;
    --sp-shadow:0 2px 10px rgba(0,0,0,.07);
    color:var(--sp-text);
}
.msm-sp-header{padding:24px 0 18px;border-bottom:2px solid var(--sp-border);margin-bottom:20px}
.msm-sp-title{display:flex;align-items:center;gap:14px}
.msm-sp-icon{font-size:36px;line-height:1}
.msm-sp-heading{font-size:22px;font-weight:800;color:var(--sp-text);letter-spacing:-.5px}
.msm-sp-sub{font-size:13px;color:var(--sp-text2);margin-top:2px}
.msm-sp-config{
    background:var(--sp-surface);border:1px solid var(--sp-border);
    border-radius:14px;padding:20px;margin-bottom:20px;box-shadow:var(--sp-shadow);
}
.msm-sp-fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.msm-sp-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px}
.msm-sp-field-btn{flex:0 0 auto;min-width:auto}
.msm-sp-label{font-size:12px;font-weight:700;color:var(--sp-text3);letter-spacing:.6px;text-transform:uppercase}
.msm-sp-select,.msm-sp-input{
    border:1.5px solid var(--sp-border);border-radius:9px;padding:8px 12px;
    font-size:13.5px;font-family:'Outfit',-apple-system,sans-serif;color:var(--sp-text);
    background:var(--sp-bg);transition:border-color .14s;outline:none;width:100%;
}
.msm-sp-select:focus,.msm-sp-input:focus{border-color:var(--sp-accent)}
.msm-sp-btn{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--sp-accent);color:#fff;border:none;border-radius:10px;
    padding:9px 20px;font-size:14px;font-weight:700;
    font-family:'Outfit',-apple-system,sans-serif;
    cursor:pointer;transition:opacity .15s;white-space:nowrap;
}
.msm-sp-btn:hover{opacity:.9}.msm-sp-btn:disabled{opacity:.45;cursor:not-allowed}
.msm-sp-btn-icon{font-size:15px}
.msm-sp-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px;color:var(--sp-text2);font-size:13px}
.msm-sp-spinner{width:28px;height:28px;border:3px solid var(--sp-border);border-top-color:var(--sp-accent);border-radius:50%;animation:msm-spin .7s linear infinite}
@keyframes msm-spin{to{transform:rotate(360deg)}}
.msm-sp-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;padding:14px;background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:12px}
.msm-sp-tag{padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;font-family:'Outfit',-apple-system,sans-serif;background:var(--sp-bg);border:1px solid var(--sp-border);color:var(--sp-text2)}
.msm-sp-tag-ok{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.msm-sp-tag-warn{background:#fffbeb;border-color:#fde68a;color:#b45309}
.msm-sp-timeline{display:flex;flex-direction:column;gap:10px}
.msm-sp-day{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:14px;overflow:hidden;box-shadow:var(--sp-shadow);transition:transform .15s}
.msm-sp-day:hover{transform:translateY(-1px)}
.msm-sp-day-header{padding:14px 16px;border-bottom:1px solid var(--sp-border);background:var(--sp-bg)}
.msm-sp-day-num{font-size:12px;font-weight:700;color:var(--sp-text3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;display:inline-block}
.msm-sp-day-date{font-size:10.5px;color:var(--sp-accent);font-weight:600;margin-left:8px}
.msm-sp-day-topic{font-size:15px;font-weight:700;color:var(--sp-text);letter-spacing:-.3px}
.msm-sp-day-sub{font-size:11.5px;color:var(--sp-text2);margin-top:2px}
.msm-sp-weak-badge{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;background:#fffbeb;border:1px solid #fde68a;color:#b45309;padding:2px 7px;border-radius:20px;vertical-align:middle}
.msm-sp-subtopics{padding:12px 16px;display:flex;flex-wrap:wrap;gap:7px}
.msm-sp-subtopic{padding:5px 11px;border-radius:20px;background:rgba(26,111,232,.07);border:1px solid rgba(26,111,232,.15);color:var(--sp-accent);font-size:12px;font-weight:500}
.msm-sp-subtopic-weak{background:#fffbeb;border-color:#fde68a;color:#b45309}
.msm-sp-actions{padding:10px 16px 14px;display:flex;gap:8px}
.msm-sp-action{
    padding:7px 15px;border-radius:9px;border:1.5px solid var(--sp-border);
    background:var(--sp-surface);font-size:12.5px;font-weight:600;
    font-family:'Outfit',-apple-system,sans-serif;color:var(--sp-text2);cursor:pointer;transition:all .14s;
}
.msm-sp-action:hover{border-color:var(--sp-accent);color:var(--sp-accent);background:rgba(26,111,232,.07)}
.msm-sp-action-quiz:hover{border-color:var(--sp-warm);color:var(--sp-warm);background:rgba(232,112,42,.07)}
.msm-sp-day-revision .msm-sp-day-header{background:rgba(245,158,11,.04)}
.msm-sp-day-sprint .msm-sp-day-header{background:rgba(26,111,232,.04)}
.msm-sp-day-exam .msm-sp-day-header{background:linear-gradient(135deg,rgba(26,111,232,.07),rgba(232,112,42,.05))}
.msm-sp-empty{text-align:center;padding:30px;color:var(--sp-text2);font-size:14px}

/* ── Admin badge ─────────────────────────────────────────────────────────── */
.msm-badge{background:var(--accent-bg);color:var(--accent);padding:2px 7px;border-radius:8px;font-size:11px;font-family:var(--font);font-weight:600}
.msm-badge-warn{background:#fffbeb;color:#d97706}

/* ── Sidebar Navigation ──────────────────────────────────────────────────── */
.msm-sidebar-bottom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--sidebar-border);
    overflow: hidden;
    /* Slim footer: teaser + scope pill + upgrade/premium badge only */
}

.msm-sidebar-nav {
    padding: 4px 10px 10px;
    flex-shrink: 0;
    /* No max-height / overflow — lives inside .msm-sidebar-scroll, one scroller only */
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 4px;
}
.msm-sidebar-nav .msm-section-label {
    padding: 10px 6px 6px;
}
.msm-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sidebar-text2);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    width: 100%;
    background: transparent;
    font-family: var(--font);
    position: relative;
    box-sizing: border-box;
    text-align: left;
}
.msm-nav-item:hover {
    background: var(--sidebar-item-hover);
    color: var(--sidebar-text);
    border-color: var(--sidebar-border);
}
.msm-nav-active, .msm-nav-item.msm-nav-active {
    background: var(--accent-bg) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
    border-left: 2.5px solid var(--accent) !important;
    padding-left: 8.5px !important;
    font-weight: 600 !important;
}
.msm-nav-btn {
    /* inherits msm-nav-item, just override for button element */
    cursor: pointer;
}
.msm-nav-icon {
    font-size: 17px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.msm-nav-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    font-family: var(--font);
}

/* ── Mobile Bottom Navigation ────────────────────────────────────────────── */
.msm-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
    z-index: 110;
    justify-content: space-around;
    align-items: center;
}
.msm-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text2);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font);
    border: none;
    background: transparent;
    flex: 1;
    letter-spacing: .2px;
    min-width: 0;
}
.msm-mobile-nav-item:hover,
.msm-mobile-nav-active {
    color: var(--accent) !important;
}
.msm-mobile-nav-active .msm-mobile-nav-icon {
    background: var(--accent-bg);
    border-radius: 8px;
    padding: 4px 8px;
}
.msm-mobile-nav-icon {
    font-size: 22px;
    line-height: 1;
    transition: background .15s, padding .15s;
}

/* ── Responsive — improved ────────────────────────────────────────────────── */
@media(max-width:700px){
    .msm-app {
        position: fixed;    /* pin to viewport — WordPress page scroll cannot hide header */
        top: 0;
        left: 0;
        right: 0;
        /* Stop above the mobile nav so input area is never covered by it */
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        height: auto;       /* top + bottom determines height — no dvh needed */
        max-height: none;
        border-radius: 0;
        border: none;
        flex-direction: column;
        overscroll-behavior: none;
        touch-action: pan-y;
    }
    /* Sidebar/panels fill within app — app already accounts for nav offset */
    .msm-sidebar{position:absolute;left:0;top:0;bottom:0;z-index:100;transform:translateX(-100%);width:280px;transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
    .msm-sidebar.open{transform:translateX(0);box-shadow:var(--shadow2)}
    /* .msm-sidebar-nav is inside msm-sidebar-scroll — visible when sidebar opens on mobile */
    .msm-menu-btn{display:flex}

    /* ── Mobile teaser — compact, fully visible above nav bar ── */
    .msm-sidebar-bottom {
        padding-bottom: 4px;
    }
    #msm-teaser-widget {
        margin: 6px 8px 4px;
        width: calc(100% - 16px);
    }
    /* Shrink thumb slightly on narrow sidebar */
    .msm-teaser-thumb-wrap {
        width: 64px;
        height: 46px;
    }
    .msm-teaser-title {
        font-size: 11px;
        -webkit-line-clamp: 2;
    }
    .msm-teaser-subtitle { display: none; }
    .msm-teaser-badge-row { padding: 6px 10px 2px; }
    .msm-teaser-main { padding: 2px 10px 6px; gap: 8px; }
    .msm-teaser-enroll-wrap { padding: 0 8px 8px; }
    .msm-teaser-enroll-btn { padding: 7px 10px; font-size: 10.5px; }
    /* .msm-scope-pill hidden — no mobile override needed */
    .msm-chat-header {
        padding: 10px 14px;
        min-height: 52px;   /* consistent cross-browser header height */
        flex-shrink: 0;
    }
    .msm-chat-header .msm-icon-btn:not(#msm-dark-toggle-main):not(#msm-bookmarks-btn){display:none}
    /* Install button lives in .msm-header-center — not an icon-btn, always visible when shown */
    .msm-panel, .msm-panel-wide {
        /* Handled by base slide-from-right rule */
        z-index: 200;
    }
    .msm-gam-header{gap:4px}
    .msm-xp-badge{display:none}
    .msm-toast-container{bottom:12px;right:8px;left:8px;max-width:100%}
    .msm-quiz-box{width:calc(100vw - 16px);border-radius:14px;max-height:92vh}
    .msm-diff-grid{flex-direction:column}
    .msm-sp-fields{flex-direction:column}
    /* Input area tweaks */
    .msm-input-area {
        padding: 8px 10px 10px;
    }
    .msm-messages {
        padding: 12px 12px 6px;
    }
    .msm-bubble-wrap { max-width: 94%; }
    /* Show mobile bottom nav */
    .msm-mobile-nav {
        display: flex;
        /* ── Gap fix: ensure nav top-edge aligns with .msm-app bottom-edge ──
           .msm-app bottom = calc(56px + safe-area-inset-bottom).
           Without this, the nav's rendered height is ~48px (6px top-padding
           + ~42px items) leaving an 8px strip where the dark body background
           (#0a0805) peeks through. min-height forces the nav to fill the full
           56px clearance zone so no body background is ever exposed. */
        min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    }
    /* Input area lifts above the fixed nav bar.
       Uses env(safe-area-inset-bottom) for iPhone home indicator.
       Extra 12px clearance so the hint text sits clearly above the nav. */
    .msm-main {
        padding-bottom: 0;
    }
    .msm-input-area {
        /* Input always visible — msm-app bottom already clears the nav bar */
        padding-bottom: 10px;
    }
    .msm-messages {
        padding-bottom: 12px;
    }
    .msm-chat-title { font-size: 14px; }
    .msm-chat-sub { display: none; }
}

@media(max-width:400px){
    .msm-bubble { font-size: 15px; padding: 9px 12px; }
    .msm-input-wrap { padding: 6px 6px 6px 11px; }
    #msm-input { font-size: 16px; }
    .msm-streak-badge { padding: 3px 7px; font-size: 11px; }
    .msm-sp-field{min-width:100%}
}

/* ── TTS active state ────────────────────────────────────────────────────── */
.msm-icon-btn.msm-tts-active{
    background:var(--accent-bg);color:var(--accent);
    animation:msm-pulse 1.4s infinite;
}
@keyframes msm-pulse {
    0%,100%{opacity:1}50%{opacity:.6}
}

/* ── v7: Offline Banner (injected via JS, styled globally) ───────────────── */
#msm-offline-banner { pointer-events:none; }

/* ── v7: Image support in note bubbles ───────────────────────────────────── */
.msm-bubble img {
    max-width:100%;height:auto;border-radius:8px;
    margin:8px 0;display:block;
    border:1px solid var(--border);
}

/* ── v10: Improved Topic Rows in Sidebar ─────────────────────────────────── */
.msm-topic-row {
    display:flex;align-items:center;gap:5px;margin-bottom:3px;
}
.msm-topic-item {
    flex:1;min-width:0;display:flex;align-items:center;gap:7px;
    padding:7px 10px;border-radius:9px;cursor:pointer;
    color:var(--sidebar-text2);font-size:12px;
    border:1px solid transparent;transition:all .15s;
    font-family:var(--font);background:transparent;text-align:left;width:100%;
}
.msm-topic-item:hover{background:var(--sidebar-item-hover);color:var(--sidebar-text);border-color:var(--sidebar-border)}
.msm-topic-item.active{background:var(--accent-bg);color:var(--accent2);border-color:transparent;border-left:2.5px solid var(--accent);padding-left:8.5px;}
.msm-topic-item-num {
    flex-shrink:0;width:18px;height:18px;border-radius:50%;
    background:var(--sidebar-pill-bg);color:var(--sidebar-text3);
    font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
    font-family:var(--font);
}
.msm-topic-item:hover .msm-topic-item-num { background:var(--accent); color:#fff; }
.msm-topic-item-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.msm-topic-quiz-btn {
    flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
    font-size:10.5px;font-weight:600;padding:4px 8px;
    background:var(--sidebar-pill-bg);border:1px solid var(--sidebar-border);
    border-radius:7px;color:var(--sidebar-text2);cursor:pointer;
    transition:all .15s;font-family:var(--font);white-space:nowrap;
}
.msm-topic-quiz-btn svg { flex-shrink:0; }
.msm-topic-quiz-btn:hover{background:var(--accent);border-color:transparent;color:#fff}

/* ── v10: History "See all" button ───────────────────────────────────────── */
.msm-history-see-all {
    width:100%;padding:5px 8px;margin-top:2px;
    background:transparent;border:1px dashed var(--sidebar-border);border-radius:7px;
    color:var(--sidebar-text3);font-size:10.5px;cursor:pointer;font-family:var(--font);
    transition:all .15s;text-align:center;
}
.msm-history-see-all:hover{color:var(--sidebar-text);border-color:var(--sidebar-text2);}

/* ── v17: Answer formatting (fmt output) ─────────────────────────────────── */
.msm-bubble .msm-para-gap { height:8px; display:block; }

/* Regular paragraph line */
.msm-bubble .msm-fmt-line {
    margin:0 0 5px;
    line-height:1.65;
    color:var(--text);
}

/* Section heading — bold, line ends with ":" */
.msm-bubble .msm-fmt-heading {
    margin:10px 0 5px;
    font-weight:700;
    font-size:13.5px;
    color:var(--text);
    letter-spacing:-.1px;
    line-height:1.4;
}

/* List container */
.msm-bubble .msm-fmt-list {
    margin:4px 0 8px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

/* Each list row — marker + text side by side */
.msm-bubble .msm-fmt-li {
    display:flex;
    align-items:baseline;
    gap:8px;
    line-height:1.65;
}

/* The orange marker — both bullet and number */
.msm-bubble .msm-fmt-marker {
    color:var(--accent-warm);
    font-weight:700;
    font-size:14px;
    flex-shrink:0;
    min-width:14px;
    line-height:1.65;
}

/* Numbered marker slightly wider to fit "10." */
.msm-bubble .msm-fmt-marker-num {
    min-width:22px;
    font-size:13px;
}

/* Item text */
.msm-bubble .msm-fmt-li-text {
    color:var(--text);
    flex:1;
    min-width:0;
}

/* Dark mode — variables handle it automatically but reinforce text colour */
.msm-app[data-theme="dark"] .msm-bubble .msm-fmt-li-text,
.msm-app[data-theme="dark"] .msm-bubble .msm-fmt-line,
.msm-app[data-theme="dark"] .msm-bubble .msm-fmt-heading { color:var(--text); }
.msm-app[data-theme="dark"] .msm-bubble .msm-fmt-marker  { color:var(--accent-warm); }

/* Explorer panel inherits cleanly */
.msm-explorer-answer .msm-fmt-marker { color:var(--accent-warm); }

/* ── v10: Wide Panel (Progress / Study Plan) ─────────────────────────────── */
.msm-panel-wide {
    width: 100%; max-width: 100%;  /* always full-screen */
}

/* ── v10: Difficulty picker — header with close X ────────────────────────── */
.msm-difficulty-header {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:12px;
}
.msm-difficulty-header .msm-difficulty-title { margin-bottom:0; }
.msm-diff-close {
    width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border);color:var(--text3);
    font-size:13px;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.msm-diff-close:hover{background:var(--bg3);color:var(--text);border-color:var(--text3);}

/* ── v10: Topic Explorer ─────────────────────────────────────────────────── */
/* Flat bubble for explorer */
.msm-bubble-explorer { padding:0 !important; overflow:hidden; }

.msm-explorer-header {
    display:flex;align-items:center;gap:12px;
    padding:14px 16px 12px;
    border-bottom:1px solid var(--border);
    background:var(--surface2);
}
.msm-explorer-icon { font-size:22px;flex-shrink:0; }
.msm-explorer-title { font-size:14px;font-weight:700;color:var(--text);font-family:var(--font); }
.msm-explorer-sub { font-size:11px;color:var(--text3);margin-top:2px;font-family:var(--font); }

.msm-explorer-list { display:flex;flex-direction:column;gap:0;padding:6px 0; }

.msm-explorer-card {
    border-bottom:1px solid var(--border3);
    transition:background .15s;
}
.msm-explorer-card:last-child { border-bottom:none; }
.msm-explorer-card.msm-explorer-active { background:var(--surface2); }

.msm-explorer-card-head {
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;
    font-family:var(--font);
}
/* Modern dot */
.msm-explorer-card-dot {
    flex-shrink:0;width:8px;height:8px;border-radius:50%;
    background:var(--accent);opacity:.35;transition:all .2s;
}
.msm-explorer-card-dot--done { background:#22c55e;opacity:1; }
.msm-explorer-active .msm-explorer-card-dot {
    opacity:1;box-shadow:0 0 0 3px rgba(124,114,242,.15);
}
.msm-explorer-card-title {
    flex:1;font-size:13px;font-weight:600;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msm-explorer-check {
    flex-shrink:0;font-size:10.5px;color:#22c55e;font-weight:700;
    background:rgba(34,197,94,.12);padding:2px 8px;border-radius:20px;
}
.msm-explorer-card-badge {
    flex-shrink:0;font-size:10px;font-weight:600;
    color:var(--accent);background:var(--accent-bg);
    padding:2px 8px;border-radius:20px;
    animation:msm-pulse 1.6s infinite;
}

.msm-explorer-card-body { padding:2px 16px 14px; }

.msm-explorer-answer {
    font-size:16px;color:var(--text);line-height:1.75;
    font-family:var(--font-serif);
}
.msm-explorer-answer strong { font-weight:600;color:var(--text); }
.msm-explorer-answer em { color:var(--text2); }
.msm-explorer-answer code {
    font-family:var(--mono);font-size:12px;background:var(--bg3);
    border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--accent-warm);
}
.msm-explorer-answer .msm-para-gap { height:8px;display:block; }

.msm-explorer-card-actions {
    display:flex;gap:7px;margin-top:10px;padding-top:10px;
    border-top:1px solid var(--border3);
}

.msm-explorer-loading {
    display:flex;gap:5px;align-items:center;padding:10px 0;
}
.msm-explorer-loading span {
    width:6px;height:6px;border-radius:50%;background:var(--text3);
    animation:msm-dot 1.2s ease-in-out infinite;
}
.msm-explorer-loading span:nth-child(2){animation-delay:.18s}
.msm-explorer-loading span:nth-child(3){animation-delay:.36s}

.msm-explorer-error { font-size:12.5px;color:#ef4444;font-family:var(--font); }

/* Next-subtopic arrows bar */
.msm-explorer-next-bar {
    margin:4px 12px 8px;
    background:var(--surface2);border:1px solid var(--border);
    border-radius:12px;padding:11px 13px;
}
.msm-explorer-next-label {
    display:flex;align-items:center;gap:7px;
    font-size:10px;font-weight:700;color:var(--text3);
    letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px;
    font-family:var(--font);
}
.msm-explorer-next-dot {
    width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.7;flex-shrink:0;
}
.msm-explorer-arrows { display:flex;flex-direction:column;gap:5px; }
.msm-explorer-arrow-btn {
    display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 12px;border-radius:9px;cursor:pointer;
    background:var(--surface);border:1px solid var(--border);
    color:var(--text2);font-family:var(--font);font-size:13px;font-weight:500;
    transition:all .15s;text-align:left;
}
.msm-explorer-arrow-btn:hover {
    background:var(--accent-bg);border-color:var(--accent);color:var(--accent);
}
.msm-explorer-arrow-dot {
    flex-shrink:0;width:7px;height:7px;border-radius:50%;
    background:var(--border);border:1.5px solid var(--text3);transition:all .15s;
}
.msm-explorer-arrow-btn:hover .msm-explorer-arrow-dot {
    background:var(--accent);border-color:var(--accent);
}
.msm-explorer-arrow-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.msm-explorer-arrow-icon {
    flex-shrink:0;color:var(--text3);transition:transform .15s, color .15s;
}
.msm-explorer-arrow-btn:hover .msm-explorer-arrow-icon {
    color:var(--accent);transform:translateX(3px);
}
.msm-explorer-more-hint {
    font-size:10.5px;color:var(--text3);margin-top:8px;
    font-family:var(--font);text-align:center;
}

/* Panel spinner */
.msm-panel-spinner { color:var(--text3);text-align:center;padding:24px 0; }


/* ── v8: Review toast style ──────────────────────────────────────────────── */
.msm-toast-review{border-color:#0ea5e9;background:#f0f9ff;color:#0c4a6e}
.msm-app[data-theme="dark"] .msm-toast-review{background:#082f49;color:#7dd3fc;border-color:#0369a1}

/* ══════════════════════════════════════════════════════════════════════════
   v8: Progress Dashboard  [mysomero_progress]
══════════════════════════════════════════════════════════════════════════ */
.msm-pg-wrap{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    max-width:860px;margin:0 auto;padding:24px 16px;
    background:var(--msm-pg-bg,#f9fafb);color:var(--msm-pg-text,#111827);
    border-radius:16px;
}
.msm-pg-wrap[data-theme="dark"]{
    --msm-pg-bg:#0f172a;--msm-pg-text:#e2e8f0;
    --msm-pg-card:#1e293b;--msm-pg-border:#334155;
    --msm-pg-sub:#94a3b8;--msm-pg-track:#1e3a5f;
}
.msm-pg-wrap[data-theme="light"]{
    --msm-pg-bg:#f9fafb;--msm-pg-text:#111827;
    --msm-pg-card:#ffffff;--msm-pg-border:#e5e7eb;
    --msm-pg-sub:#6b7280;--msm-pg-track:#e5e7eb;
}

/* Header */
.msm-pg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.msm-pg-header-left{display:flex;align-items:center;gap:12px}
.msm-pg-avatar{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff;font-size:20px;font-weight:700;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.msm-pg-username{font-size:18px;font-weight:700;line-height:1.2}
.msm-pg-level{font-size:13px;color:var(--msm-pg-sub,#6b7280);margin-top:2px}
.msm-pg-theme-btn{
    background:var(--msm-pg-card,#fff);border:1px solid var(--msm-pg-border,#e5e7eb);
    border-radius:8px;padding:6px 10px;cursor:pointer;font-size:16px;
}

/* Stat cards */
.msm-pg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.msm-pg-card{
    background:var(--msm-pg-card,#fff);border:1px solid var(--msm-pg-border,#e5e7eb);
    border-radius:12px;padding:16px;text-align:center;
}
.msm-pg-card-streak{border-color:#f97316;background:linear-gradient(135deg,#fff7ed,#fff)}
.msm-pg-wrap[data-theme="dark"] .msm-pg-card-streak{background:linear-gradient(135deg,#431407,#1e293b)}
.msm-pg-card-alert{border-color:#ef4444}
.msm-pg-card-success{border-color:#22c55e}
.msm-pg-card-icon{font-size:22px;margin-bottom:6px}
.msm-pg-card-val{font-size:28px;font-weight:800;line-height:1;margin-bottom:4px}
.msm-pg-card-label{font-size:12px;color:var(--msm-pg-sub,#6b7280);line-height:1.3}
.msm-pg-card-trend{font-size:11px;margin-top:6px;font-weight:600}
.msm-pg-card-sub{font-size:12px;color:var(--msm-pg-sub,#6b7280);margin-top:4px}
.msm-pg-trend-up{color:#16a34a}.msm-pg-trend-down{color:#dc2626}.msm-pg-trend-flat{color:#6b7280}
.msm-pg-xp-bar{height:5px;background:var(--msm-pg-track,#e5e7eb);border-radius:3px;margin-top:8px;overflow:hidden}
.msm-pg-xp-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:3px;transition:width .6s ease}

/* Sections */
.msm-pg-section{
    background:var(--msm-pg-card,#fff);border:1px solid var(--msm-pg-border,#e5e7eb);
    border-radius:12px;padding:20px;margin-bottom:16px;
}
.msm-pg-section-title{font-size:15px;font-weight:700;margin-bottom:14px}

/* Badges */
.msm-pg-badges{display:flex;flex-wrap:wrap;gap:8px}
.msm-pg-badge{
    background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;
    border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600;
}
.msm-pg-wrap[data-theme="dark"] .msm-pg-badge{background:#2e1065;color:#ddd6fe;border-color:#7c3aed}

/* Accuracy / coverage bars */
.msm-pg-acc-list,.msm-pg-cov-list,.msm-pg-weak-list{display:flex;flex-direction:column;gap:14px}
.msm-pg-acc-row{display:flex;flex-direction:column;gap:4px}
.msm-pg-acc-label{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.msm-pg-acc-name{font-size:14px;font-weight:600;flex:1}
.msm-pg-acc-class{font-size:12px;color:var(--msm-pg-sub,#6b7280)}
.msm-pg-acc-pct{font-size:13px;font-weight:700;margin-left:auto}
.msm-pg-acc-good{color:#16a34a}.msm-pg-acc-mid{color:#d97706}.msm-pg-acc-low{color:#dc2626}
.msm-pg-bar-track{height:8px;background:var(--msm-pg-track,#e5e7eb);border-radius:4px;overflow:hidden}
.msm-pg-bar-fill{height:100%;border-radius:4px;transition:width .7s ease}
.msm-pg-bar-good{background:#22c55e}.msm-pg-bar-mid{background:#f59e0b}.msm-pg-bar-low{background:#ef4444}
.msm-pg-acc-meta{font-size:12px;color:var(--msm-pg-sub,#6b7280)}

/* Weak areas */
.msm-pg-weak-item{border:1px solid #fca5a5;border-radius:10px;padding:12px;background:#fff5f5;display:flex;flex-direction:column;gap:5px}
.msm-pg-wrap[data-theme="dark"] .msm-pg-weak-item{background:#2d0a0a;border-color:#7f1d1d}
.msm-pg-weak-head{display:flex;justify-content:space-between;align-items:center}
.msm-pg-weak-topic{font-weight:700;font-size:14px}
.msm-pg-weak-score{font-weight:800;font-size:15px;color:#dc2626}
.msm-pg-weak-sub{font-size:12px;color:var(--msm-pg-sub,#6b7280)}

/* Review list */
.msm-pg-review-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msm-pg-review-item{
    border:1px solid #bae6fd;border-radius:10px;padding:12px;
    background:#f0f9ff;
}
.msm-pg-wrap[data-theme="dark"] .msm-pg-review-item{background:#082f49;border-color:#0369a1}
.msm-pg-review-meta{display:flex;gap:8px;margin-bottom:4px;font-size:12px}
.msm-pg-review-subject{font-weight:700;color:#0c4a6e}
.msm-pg-wrap[data-theme="dark"] .msm-pg-review-subject{color:#7dd3fc}
.msm-pg-review-topic{color:var(--msm-pg-sub,#6b7280)}
.msm-pg-review-q{font-size:13px;font-weight:500;margin-bottom:4px}
.msm-pg-review-interval{font-size:12px;color:var(--msm-pg-sub,#6b7280)}
.msm-pg-review-hint{font-size:12px;color:var(--msm-pg-sub,#6b7280);margin:0;font-style:italic}

/* Login gate */
.msm-progress-login{
    background:#fff;border:1px solid #e5e7eb;border-radius:12px;
    padding:32px;text-align:center;font-size:15px;
}

/* Empty state */
.msm-pg-empty-state{text-align:center;padding:32px 16px}
.msm-pg-empty-icon{font-size:40px;margin-bottom:12px}
.msm-pg-empty-title{font-size:17px;font-weight:700;margin-bottom:8px}
.msm-pg-empty-sub{font-size:14px;color:var(--msm-pg-sub,#6b7280)}

/* Responsive */
@media(max-width:600px){
    .msm-pg-cards{grid-template-columns:repeat(2,1fr)}
    .msm-pg-wrap{padding:16px 10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v9.1.2 NEW STYLES
══════════════════════════════════════════════════════════════════════════ */

/* ── Progress bar: gentler fade instead of harsh slide ──────────────────── */
.msm-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
    animation: msm-progress-gentle 2.4s ease-in-out infinite;
    transform: translateX(-100%);
}
@keyframes msm-progress-gentle {
    0%   { transform: translateX(-100%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* ── Sidebar dark mode awareness (sidebar stays dark always, but mobile nav reacts) */
.msm-mobile-nav { transition: background .25s, border-color .25s; }
.msm-mobile-nav[data-theme="light"] {
    background: #fff;
    border-top-color: var(--border);
}
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-item { color: var(--text2); }
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-item:hover,
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-active { color: var(--accent) !important; }
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-active .msm-mobile-nav-icon {
    background: var(--accent-bg);
}

/* ── Sidebar Search ──────────────────────────────────────────────────────── */
.msm-sidebar-search-section { padding: 12px 14px 6px; flex-shrink: 0; }
.msm-sidebar-search {
    display: flex; align-items: center; gap: 7px;
    background: var(--sidebar-pill-bg); border: 1px solid var(--sidebar-border);
    border-radius: 10px; padding: 7px 10px;
    transition: border-color .15s, background .15s;
}
.msm-sidebar-search:focus-within {
    background: var(--sidebar-pill-hover); border-color: var(--accent);
}
.msm-search-icon { font-size: 13px; flex-shrink: 0; opacity: .55; }
#msm-sidebar-search {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--sidebar-text); font-size: 12px; font-family: var(--font);
    min-width: 0;
}
#msm-sidebar-search::placeholder { color: var(--sidebar-text3); }
.msm-search-clear {
    background: none; border: none; color: var(--sidebar-text3);
    font-size: 11px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
    transition: color .13s;
}
.msm-search-clear:hover { color: var(--sidebar-text); }

.msm-search-results {
    margin-top: 6px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; overflow: hidden; max-height: 220px; overflow-y: auto;
}
.msm-search-group { padding: 4px 0; }
.msm-search-group-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.80);
    letter-spacing: .8px; text-transform: uppercase;
    padding: 5px 12px 3px; font-family: var(--font);
}
.msm-search-result-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 12px; background: transparent; border: none; text-align: left;
    color: rgba(255,255,255,.95); font-size: 12px; font-family: var(--font);
    cursor: pointer; transition: background .12s;
}
.msm-search-result-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.msm-sr-icon { flex-shrink: 0; font-size: 13px; }
.msm-sr-text { display: flex; flex-direction: column; min-width: 0; }
.msm-sr-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msm-sr-sub { font-size: 11.5px; color: rgba(255,255,255,.85); margin-top: 1px; }
.msm-search-empty {
    padding: 12px; font-size: 11.5px; color: rgba(255,255,255,.78);
    text-align: center; font-family: var(--font);
}
.msm-topic-loading, .msm-topic-empty {
    font-size: 11.5px; color: rgba(255,255,255,.78); padding: 8px 10px; font-family: var(--font);
}

/* ── Welcome block — ChatGPT-style centred ───────────────────────────────── */
.msm-welcome-block {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 24px 20px 20px;
    max-width: 520px; margin: 0 auto; width: 100%;
}
.msm-welcome-logo {
    margin-bottom: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 16px rgba(26,111,232,.28));
}
.msm-welcome-svg-icon {
    color: var(--accent);
    width: 48px; height: 48px;
    transition: color .2s;
}
.msm-app[data-theme="dark"] .msm-welcome-svg-icon {
    color: var(--accent2);
    filter: drop-shadow(0 0 10px rgba(129,140,248,.35));
}
.msm-welcome-title {
    font-size: 22px; font-weight: 700; color: var(--text);
    letter-spacing: -.5px; margin-bottom: 8px; font-family: var(--font);
}
.msm-welcome-sub {
    font-size: 15px; color: var(--text2); line-height: 1.55;
    max-width: 400px; font-family: var(--font);
}
/* Greeting wrapper — kept invisible (but laid out) while we wait for the   */
/* personalised session-opener AJAX so the title/sub never visibly swap.   */
.msm-welcome-greet {
    display: flex; flex-direction: column; align-items: center;
    opacity: 1; transition: opacity .25s ease;
}
.msm-welcome-greet--pending { opacity: 0; }
.msm-welcome-pills-wrap { margin-top: 20px; width: 100%; }

/* ── Admin-toggled ad banner slider ─────────────────────────────────────── */
/* Sits between the greeting and the weak-topic score hint. Only rendered   */
/* at all when the admin toggle is on — otherwise this block doesn't exist  */
/* in the DOM and the welcome screen looks exactly as before.               */
.msm-ads-banner {
    width: 100%; max-width: 420px; margin-top: 16px;
    border-radius: 14px; overflow: hidden; position: relative;
    box-shadow: var(--shadow3); border: 1px solid var(--border);
    animation: msmOpenerFade .22s ease;
}
.msm-ads-track {
    display: flex; transition: transform .35s ease;
}
.msm-ads-slide {
    flex: 0 0 100%; position: relative; cursor: pointer; line-height: 0;
}
.msm-ads-slide img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.msm-ads-slide-title {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
    color: #fff; font-size: 13px; font-weight: 600; text-align: left;
    font-family: var(--font); line-height: 1.3;
}
.msm-ads-dots {
    position: absolute; left: 0; right: 0; bottom: 8px;
    display: flex; justify-content: center; gap: 6px;
}
.msm-ads-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.55); cursor: pointer; transition: .2s;
}
.msm-ads-dot--active { background: #fff; width: 16px; border-radius: 4px; }
/* ── Welcome hint row: inline weak-area signal ──────────────────────────── */
.msm-welcome-hint {
    display: flex; align-items: center; gap: 9px;
    margin-top: 14px; padding: 9px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; width: 100%; max-width: 380px;
    font-size: 13px; font-family: var(--font); box-shadow: var(--shadow3);
    animation: msmOpenerFade .22s ease;
}
.msm-welcome-hint-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.msm-welcome-hint-text {
    flex: 1; color: var(--text2); line-height: 1.35; text-align: left;
}
.msm-welcome-hint-text strong { color: var(--text); }
.msm-welcome-hint-btn {
    font-size: 11px; font-weight: 700;
    background: var(--accent); color: #fff;
    border: none; border-radius: 7px; padding: 5px 11px;
    cursor: pointer; white-space: nowrap; font-family: var(--font);
    transition: opacity .15s, transform .15s; flex-shrink: 0;
}
.msm-welcome-hint-btn:hover { opacity: .85; transform: translateY(-1px); }

.msm-welcome-pills-loading { font-size: 12px; color: var(--text3); font-family: var(--font); }
.msm-welcome-pills-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; width: 100%;
}
.msm-welcome-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 12px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); font-size: 13px; font-family: var(--font); font-weight: 500;
    text-align: left; transition: all .16s; box-shadow: var(--shadow3);
}
.msm-welcome-pill:hover {
    border-color: var(--accent); background: var(--accent-bg);
    transform: translateY(-2px); box-shadow: 0 4px 14px rgba(26,111,232,.14);
}
.msm-welcome-pill-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.msm-welcome-pill-text {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msm-welcome-more-btn {
    margin-top: 10px; background: transparent; border: 1px dashed var(--border);
    border-radius: 10px; padding: 7px 16px; color: var(--text3);
    font-size: 12px; font-family: var(--font); cursor: pointer;
    transition: all .15s; width: 100%;
}
.msm-welcome-more-btn:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 480px) {
    .msm-welcome-more-btn { display: none !important; }
}

/* ── Tool Grid (landing screen) ─────────────────────────────────────────── */
.msm-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    margin-bottom: 4px;
}
.msm-tool-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 14px 14px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    /* Always show the card's tinted background — makes each tile visually distinct */
    background: var(--msm-tt-bg, rgba(26,111,232,.10));
    cursor: pointer;
    transition: border-color .17s, box-shadow .17s, transform .17s, background .17s;
    font-family: var(--font);
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow3);
    min-height: 90px;
}
.msm-tool-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--msm-tt-bg, rgba(26,111,232,.06));
    opacity: 0;
    transition: opacity .18s;
    border-radius: 13px;
}
.msm-tool-tile:hover::before { opacity: 1; }
.msm-tool-tile:hover {
    border-color: var(--msm-tt-color, var(--accent));
    box-shadow: 0 4px 18px var(--msm-tt-glow, rgba(26,111,232,.14));
    transform: translateY(-2px);
}
.msm-tool-tile:active { transform: translateY(0); }
.msm-tool-tile--active {
    border-color: var(--msm-tt-color, var(--accent)) !important;
    background: var(--msm-tt-bg, var(--accent-bg)) !important;
    box-shadow: 0 4px 18px var(--msm-tt-glow, rgba(26,111,232,.14)) !important;
}
.msm-tool-tile--active::before { opacity: 1 !important; }
.msm-tt-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    background: var(--msm-tt-icon-bg, rgba(26,111,232,.18));
    color: var(--msm-tt-color, var(--accent));
    flex-shrink: 0;
    margin-bottom: 10px;
    transition: transform .15s;
}
.msm-tool-tile:hover .msm-tt-icon { transform: scale(1.08); }
.msm-tt-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.2px;
    line-height: 1.2;
    margin-bottom: 3px;
}
.msm-tt-sub {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.35;
    font-weight: 400;
}
/* Pro badge — amber */
.msm-tt-badge {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(245,158,11,.13);
    color: #b45309;
    font-family: var(--font);
    line-height: 1.4;
}
.msm-app[data-theme="dark"] .msm-tt-badge {
    background: rgba(245,158,11,.18);
    color: #fbbf24;
}
/* Free badge — green, overrides the amber Pro style */
.msm-tt-badge--free {
    background: rgba(5,150,105,.13);
    color: #047857;
}
.msm-app[data-theme="dark"] .msm-tt-badge--free {
    background: rgba(5,150,105,.22);
    color: #34d399;
}
/* "New" badge — pink, for the For You card */
.msm-tt-badge--new {
    background: rgba(225,29,122,.13);
    color: #be185d;
    animation: msm-badge-pulse 2.4s ease-in-out infinite;
}
.msm-app[data-theme="dark"] .msm-tt-badge--new {
    background: rgba(225,29,122,.22);
    color: #f472b6;
}
@keyframes msm-badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* Separator between grid and topic pills */
.msm-tool-grid-sep {
    width: 100%; margin: 18px 0 0;
    border: none; border-top: 1px solid var(--border);
}
.msm-tool-grid-pills-label {
    width: 100%; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--text3);
    font-family: var(--font); margin-bottom: 8px; margin-top: 16px;
}
/* Mobile: 2-column grid */
@media (max-width: 700px) {
    .msm-tool-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
        margin-top: 16px;
    }
    .msm-tool-tile {
        padding: 12px 12px 10px;
        min-height: 80px;
        border-radius: 13px;
    }
    .msm-tt-icon {
        width: 30px; height: 30px; font-size: 15px;
        border-radius: 8px; margin-bottom: 8px;
    }
    .msm-tt-label { font-size: 12px; }
    .msm-tt-sub { font-size: 10.5px; }
}
@media (max-width: 400px) {
    .msm-tool-tile { min-height: 74px; }
    .msm-tt-sub { display: none; }
}

/* Messages area: on desktop align from top with breathing room — never
   let justify-content:center push content behind the fixed header        */
#msm-messages:has(> .msm-welcome-block:only-child) {
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
}
@media (max-width: 700px) {
    /* On mobile stack from top — prevents content going off-screen */
    #msm-messages:has(> .msm-welcome-block:only-child) {
        justify-content: flex-start;
        padding-top: 8px;
    }
}
/* Also top-align when opener card is present alongside welcome block */
#msm-messages:has(> .msm-welcome-block):has(> .msm-opener-card) {
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
}
@media (max-width: 700px) {
    #msm-messages:has(> .msm-welcome-block):has(> .msm-opener-card) {
        justify-content: flex-start;
        align-items: center;
        padding-top: 4px;
        gap: 10px;
    }
}


/* ── SCENE 1: Session Opener Card ─────────────────────────────────────────── */
/* Sibling of .msm-welcome-block in #msm-messages, not inside it.              */
/* Uses the same max-width and CSS vars as the welcome block.                   */
.msm-opener-card {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow3);
    animation: msmOpenerFade .25s ease;
    font-family: var(--font);
}
@keyframes msmOpenerFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Header row — wave + name */
.msm-opener-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.msm-opener-icon {
    color: var(--accent);
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(26,111,232,.25));
    transition: filter .2s;
}
.msm-app[data-theme="dark"] .msm-opener-icon {
    filter: drop-shadow(0 0 7px rgba(129,140,248,.4));
}
.msm-opener-name {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}
.msm-opener-name strong { color: var(--accent); font-weight: 700; }

/* Generic section row */
.msm-opener-section {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}
.msm-opener-section:last-child { border-bottom: none; }

/* Last asked row */
.msm-opener-meta-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text3);
    flex-shrink: 0;
}
.msm-opener-meta-val {
    font-size: 13px;
    color: var(--text2);
    font-style: italic;
    line-height: 1.4;
}

/* Weak topic row */
.msm-opener-weak {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.msm-opener-weak-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msm-opener-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.msm-opener-weak-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
}
.msm-opener-weak-text strong { color: var(--text); font-weight: 700; }

/* Action buttons */
.msm-opener-btns {
    display: flex;
    gap: 8px;
}
.msm-opener-btn {
    font-size: 12px;
    font-family: var(--font);
    font-weight: 600;
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    border: none;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.2;
}
.msm-opener-btn--primary {
    background: var(--accent);
    color: #fff;
}
.msm-opener-btn--primary:hover {
    opacity: .88;
    transform: translateY(-1px);
}
.msm-opener-btn--ghost {
    background: transparent;
    color: var(--text3);
    border: 1px solid var(--border);
}
.msm-opener-btn--ghost:hover { color: var(--text); border-color: var(--text3); }

@media (max-width: 700px) {
    /* Tighter card padding on mobile */
    .msm-opener-card {
        max-width: 100%;
    }
    .msm-opener-header {
        padding: 11px 14px 10px;
    }
    .msm-opener-section {
        padding: 9px 14px;
    }
    /* Buttons stay horizontal on mobile — saves vertical space */
    .msm-opener-btns {
        flex-direction: row;
        gap: 8px;
    }
    .msm-opener-btn {
        flex: 1;
        text-align: center;
        padding: 8px 10px;
    }
}
/* ── End Session Opener ─────────────────────────────────────────────────── */
/* ── Teacher Mode Panel ──────────────────────────────────────────────────── */
.msm-teacher-form { padding: 4px 0 16px; }
.msm-teacher-intro {
    font-size: 14px; color: var(--text); margin-bottom: 16px;
    line-height: 1.6; font-family: var(--font);
}
.msm-teacher-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.msm-teacher-field { display: flex; flex-direction: column; gap: 4px; }
.msm-teacher-field label {
    font-size: 12px; font-weight: 600; color: var(--text2);
    letter-spacing: .5px; text-transform: uppercase; font-family: var(--font);
}
.msm-teacher-field select,
.msm-teacher-field input[type="number"],
.msm-teacher-field input[type="text"],
.msm-teacher-field input[type="tel"],
.msm-teacher-field input[type="email"],
.msm-teacher-field input[type="date"],
.msm-teacher-field textarea {
    border: 1.5px solid var(--border); border-radius: 9px; padding: 8px 11px;
    font-size: 13px; font-family: var(--font); color: var(--text);
    background: var(--surface2); outline: none; transition: border-color .15s, box-shadow .15s;
    width: 100%; box-sizing: border-box;
}
.msm-teacher-field textarea {
    resize: vertical; min-height: 72px; line-height: 1.55;
}
.msm-teacher-field select:focus,
.msm-teacher-field input[type="number"]:focus,
.msm-teacher-field input[type="text"]:focus,
.msm-teacher-field input[type="tel"]:focus,
.msm-teacher-field input[type="email"]:focus,
.msm-teacher-field input[type="date"]:focus,
.msm-teacher-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 26,111,232), .12);
}
.msm-teacher-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
.msm-teacher-field input::placeholder,
.msm-teacher-field textarea::placeholder { color: var(--text3, #9ca3af); font-size: 12.5px; }
/* ── Global SVG icon alignment ──────────────────────────────────────── */
.msm-svg-icon {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex-shrink: 0;
}
button .msm-svg-icon, a .msm-svg-icon { margin-right: 5px; }

.msm-teacher-generate-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 10px;
    padding: 10px 22px; font-size: 13.5px; font-weight: 600;
    font-family: var(--font); cursor: pointer; transition: opacity .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.msm-teacher-generate-btn:hover { opacity: .88; }
.msm-teacher-generate-btn:disabled { opacity: .45; cursor: not-allowed; }
.msm-teacher-error {
    padding: 12px; border-radius: 10px; background: #fef2f2;
    border: 1px solid #fecaca; color: #dc2626; font-size: 13px; font-family: var(--font);
}
.msm-app[data-theme="dark"] .msm-teacher-error { background: #2d0a0a; border-color: #7f1d1d; color: #f87171; }

/* Exam output */
.msm-exam-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.msm-exam-meta { font-size: 13px; color: var(--text2); font-family: var(--font); font-weight: 600; }
.msm-exam-print-btn {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 12px; font-size: 12px; font-family: var(--font); cursor: pointer;
    color: var(--text2); transition: all .14s;
}
.msm-exam-print-btn:hover { border-color: var(--accent); color: var(--accent); }
.msm-exam-download-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    padding: 5px 12px; font-size: 12px; font-family: var(--font); cursor: pointer;
    font-weight: 600; transition: opacity .14s;
}
.msm-exam-download-btn:hover { opacity: .88; }
.msm-exam-list { padding-left: 18px; display: flex; flex-direction: column; gap: 18px; }
.msm-exam-item { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.msm-exam-item:last-child { border-bottom: none; }
.msm-exam-q-meta {
    font-size: 12px; color: var(--text2); font-family: var(--font);
    margin-bottom: 5px; font-weight: 600;
}
.msm-exam-q-text {
    font-size: 14px; font-weight: 600; color: var(--text);
    font-family: var(--font); line-height: 1.5; margin-bottom: 8px;
}
.msm-exam-opts { padding-left: 18px; font-size: 13px; color: var(--text2); font-family: var(--font); }
.msm-exam-opts li { margin-bottom: 3px; }
.msm-exam-tf { font-size: 13px; color: var(--text2); font-family: var(--font); font-style: italic; }
.msm-exam-answer-line {
    font-size: 13px; color: var(--text2); font-family: var(--font); margin-top: 6px;
}
.msm-exam-answer-key {
    margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #16a34a;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: 3px 9px; display: inline-block; font-family: var(--font);
}
.msm-app[data-theme="dark"] .msm-exam-answer-key { background: #052e16; border-color: #166534; color: #4ade80; }

/* Dark mode — teacher panel form fields */
.msm-app[data-theme="dark"] .msm-teacher-intro { color: var(--text); }
.msm-app[data-theme="dark"] .msm-teacher-field label { color: var(--text2); }
.msm-app[data-theme="dark"] .msm-teacher-field select,
.msm-app[data-theme="dark"] .msm-teacher-field input[type="number"],
.msm-app[data-theme="dark"] .msm-teacher-field input[type="text"],
.msm-app[data-theme="dark"] .msm-teacher-field input[type="tel"],
.msm-app[data-theme="dark"] .msm-teacher-field input[type="email"],
.msm-app[data-theme="dark"] .msm-teacher-field input[type="date"],
.msm-app[data-theme="dark"] .msm-teacher-field textarea {
    background: var(--bg3); color: var(--text); border-color: var(--border);
}
.msm-app[data-theme="dark"] .msm-teacher-field input::placeholder,
.msm-app[data-theme="dark"] .msm-teacher-field textarea::placeholder { color: #6b7280; }
.msm-app[data-theme="dark"] .msm-teacher-field select option { background: var(--bg3); color: var(--text); }

/* v66: section heads + doc editor dark */
.msm-tp-section-head {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text2);
    padding: 12px 0 5px; border-bottom: 1px solid var(--border);
    grid-column: 1/-1; font-family: var(--font);
}
.msm-app[data-theme="dark"] .msm-tp-section-head { color: var(--text2); border-color: var(--border); }
.msm-app[data-theme="dark"] .msm-doc-editor-wrap { border-color: var(--border); }
.msm-app[data-theme="dark"] .msm-doc-editor-toolbar { background: var(--bg2); border-color: var(--border); }
.msm-app[data-theme="dark"] .msm-doc-content { background: var(--bg); color: var(--text); }
.msm-app[data-theme="dark"] .msm-doc-action-btn { background: var(--bg2); color: var(--text); border-color: var(--border); }
.msm-app[data-theme="dark"] .msm-doc-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.msm-app[data-theme="dark"] .msm-exam-meta    { color: var(--text2); }
.msm-app[data-theme="dark"] .msm-exam-q-meta  { color: var(--text2); }
.msm-app[data-theme="dark"] .msm-exam-q-text  { color: var(--text);  }
.msm-app[data-theme="dark"] .msm-exam-opts    { color: var(--text2); }
.msm-app[data-theme="dark"] .msm-exam-tf      { color: var(--text2); }
.msm-app[data-theme="dark"] .msm-exam-answer-line { color: var(--text2); }
.msm-app[data-theme="dark"] .msm-exam-item    { border-color: var(--border); }

@media print {
    .msm-exam-answer-key { display: none !important; }
    .msm-exam-print-btn  { display: none !important; }
    .msm-exam-download-btn { display: none !important; }
}

/* ── Study Plan inline Ask box ───────────────────────────────────────────── */
.msm-sp-ask-box {
    margin-top: 10px; padding: 12px; border-radius: 10px;
    border: 1.5px solid var(--sp-accent, #1a6fe8);
    background: rgba(26,111,232,.05);
    animation: msm-slide-down .2s ease;
}
.msm-sp-ask-label {
    font-size: 12px; color: var(--sp-text2, #6b6558);
    margin-bottom: 8px; font-family: var(--font);
}
.msm-sp-ask-row { display: flex; gap: 8px; }
.msm-sp-ask-input {
    flex: 1; border: 1.5px solid var(--sp-border, #e4e2da); border-radius: 8px;
    padding: 7px 11px; font-size: 13px; font-family: var(--font);
    color: var(--sp-text, #1a1714); background: var(--sp-surface, #fff); outline: none;
    transition: border-color .14s;
}
.msm-sp-ask-input:focus { border-color: var(--sp-accent, #1a6fe8); }

/* Dark mode override — sp-surface is white in light, needs to follow dark theme */
.msm-app[data-theme="dark"] .msm-sp-ask-input {
    background: var(--bg3);
    color: var(--text);
    border-color: var(--border);
}
.msm-app[data-theme="dark"] .msm-sp-ask-input:focus {
    border-color: var(--accent);
}
.msm-sp-ask-send {
    background: var(--sp-accent, #1a6fe8); color: #fff; border: none;
    border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600;
    font-family: var(--font); cursor: pointer; white-space: nowrap;
    transition: opacity .14s;
}
.msm-sp-ask-send:hover { opacity: .88; }

/* Mobile nav dark fix — ensure it is light by default */
.msm-mobile-nav:not([data-theme]) {
    background: var(--sidebar);
}

@media(max-width:700px) {
    .msm-welcome-pills-grid { grid-template-columns: 1fr; }
    .msm-welcome-title { font-size: 18px; }
    .msm-teacher-fields { grid-template-columns: 1fr; }

    /* ── Compact welcome block on mobile ────────────────────────────────────
       The opener card sits below as a sibling. Shrinking the welcome block
       gives both elements room to breathe on a small screen.               */
    .msm-welcome-block {
        padding: 8px 14px 10px;
    }
    /* Keep logo (brand) but shrink it on mobile */
    .msm-welcome-logo {
        display: flex;
        margin-bottom: 8px;
    }
    .msm-welcome-svg-icon {
        width: 32px; height: 32px;
    }
    /* Tighter margins between title, subtitle and pills */
    .msm-welcome-title {
        margin-bottom: 2px;
        font-size: 17px;
    }
    .msm-welcome-sub {
        font-size: 12px;
        line-height: 1.4;
    }
    /* Pills start closer to the subtitle */
    .msm-welcome-pills-wrap {
        margin-top: 10px;
    }
    /* Slightly smaller pills on mobile */
    .msm-welcome-pill {
        padding: 9px 11px;
        font-size: 12px;
    }
    .msm-welcome-pill-icon {
        width: 26px; height: 26px; font-size: 14px;
    }
}

/* ── Desktop web view: larger welcome block & cards ─────────────────────── */
@media (min-width: 701px) {
    .msm-welcome-block {
        max-width: 680px;
        padding: 36px 28px 24px;
    }
    .msm-welcome-svg-icon {
        width: 56px; height: 56px;
    }
    .msm-welcome-logo {
        margin-bottom: 16px;
    }
    .msm-welcome-title {
        font-size: 26px;
        margin-bottom: 10px;
    }
    .msm-welcome-sub {
        font-size: 16px;
        max-width: 480px;
    }
    .msm-tool-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 28px;
        max-width: 520px;
    }
    .msm-tool-tile {
        min-height: 120px;
        padding: 18px 18px 16px;
        border-radius: 16px;
    }
    .msm-tt-icon {
        width: 42px; height: 42px;
        font-size: 20px;
        border-radius: 11px;
        margin-bottom: 12px;
    }
    .msm-tt-label {
        font-size: 14px;
        margin-bottom: 5px;
    }
    .msm-tt-sub {
        font-size: 12px;
    }
    .msm-welcome-pills-wrap {
        margin-top: 24px;
    }
    .msm-welcome-pills-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .msm-welcome-pill {
        padding: 13px 16px;
        font-size: 14px;
        border-radius: 14px;
    }
    .msm-welcome-pill-icon {
        width: 34px; height: 34px;
        font-size: 18px;
        border-radius: 9px;
    }
}



.msm-bubble-typing {
    min-height: 1.6em;
}

.msm-typewriter {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Thinking phrase — shown briefly before typing begins */
.msm-thinking-phrase {
    display: inline-block;
    font-style: italic;
    opacity: 0.65;
    font-size: 0.88em;
    color: var(--accent, #1a6fe8);
    animation: msm-thinking-fade 0.4s ease-in both;
}

@keyframes msm-thinking-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 0.65; transform: translateY(0); }
}

/* Confidence disclaimer — sits at top of answer bubble */
.msm-confidence-note {
    font-style: italic;
    font-size: 0.85em;
    opacity: 0.7;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border, #e5e7eb);
    line-height: 1.4;
}

.msm-cursor {
    display: inline-block;
    color: var(--accent, #1a6fe8);
    font-weight: 400;
    animation: msm-blink 0.65s step-start infinite;
    margin-left: 1px;
    line-height: 1;
}

@keyframes msm-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXAM SIMULATOR
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --msm-exam-track:  #e5e7eb;
    --msm-exam-accent: #1a6fe8;
    --msm-exam-bg:     #f8f9fc;
    --msm-exam-card:   #ffffff;
    --msm-exam-text:   #1e1e2e;
    --msm-exam-sub:    #64748b;
    --msm-exam-border: #e2e8f0;
}

.msm-exam-wrap {
    font-family: 'Outfit', -apple-system, sans-serif;
    max-width: 820px; margin: 0 auto;
    --msm-exam-accent: #1a6fe8;
}

.msm-exam-screen { display: none; }
.msm-exam-screen.active { display: block; }

/* Setup */
.msm-exam-setup-card {
    background: var(--msm-exam-card); border: 1px solid var(--msm-exam-border);
    border-radius: 20px; padding: 40px; max-width: 520px; margin: 0 auto; text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.msm-exam-logo { font-size: 48px; margin-bottom: 12px; }
.msm-exam-title {
    font-size: 22px; font-weight: 800; color: var(--msm-exam-text);
    letter-spacing: -.5px; margin: 0 0 4px;
}
.msm-exam-subtitle { color: var(--msm-exam-sub); margin: 0 0 28px; font-size: 13px; }

/* Setup card header row — icon + title/subtitle side by side */
.msm-exam-setup-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.msm-exam-setup-hd .msm-exam-logo { font-size: 36px; margin: 0; flex-shrink: 0; }
.msm-exam-setup-hd .msm-exam-title { margin: 0; }
.msm-exam-setup-hd .msm-exam-subtitle { margin: 0; }

.msm-exam-form { text-align: left; }
.msm-exam-field { margin-bottom: 20px; }
.msm-exam-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--msm-exam-sub);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 8px;
}
.msm-exam-field select {
    width: 100%;
    padding: 11px 40px 11px 14px;
    border: 1.5px solid var(--msm-exam-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    background: var(--surface);
    color: var(--msm-exam-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a09890' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color .18s, box-shadow .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.msm-exam-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26,111,232,.10), 0 1px 3px rgba(0,0,0,.05);
}
.msm-exam-field select:hover:not(:focus) {
    border-color: var(--accent2);
}

.msm-exam-durations, .msm-exam-num-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.msm-dur-btn, .msm-num-btn {
    flex: 1; min-width: 60px; padding: 9px; border: 1.5px solid var(--msm-exam-border);
    border-radius: 10px; background: #fff; font-family: inherit; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: all .15s; color: var(--msm-exam-text);
}
.msm-dur-btn.active, .msm-num-btn.active {
    border-color: var(--msm-exam-accent); background: #ede9ff; color: var(--msm-exam-accent);
}
.msm-dur-btn:hover:not(.active), .msm-num-btn:hover:not(.active) { border-color: #a0a0c0; }

.msm-exam-cta {
    width: 100%; padding: 14px; background: var(--msm-exam-accent); color: #fff;
    border: none; border-radius: 12px; font-family: inherit; font-size: 16px;
    font-weight: 700; cursor: pointer; margin-top: 8px; transition: opacity .15s;
}
.msm-exam-cta:hover { opacity: .9; }
.msm-exam-cta.secondary { background: #e8e6ff; color: var(--msm-exam-accent); }
.msm-exam-error { color: #ef4444; font-size: 13px; margin-top: 10px; padding: 8px 12px; background: #fef2f2; border-radius: 8px; }
.hidden { display: none !important; }

/* Active exam */
.msm-exam-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0 10px; flex-wrap: wrap; gap: 10px;
}
.msm-exam-progress-info { font-size: 14px; font-weight: 600; color: var(--msm-exam-sub); }
.msm-exam-timer {
    display: flex; align-items: center; gap: 6px;
    font-size: 18px; font-weight: 700; color: var(--msm-exam-text);
    background: #f1f5f9; padding: 6px 14px; border-radius: 20px;
    transition: background .3s, color .3s;
}
.msm-exam-timer.urgent { background: #fef2f2; color: #ef4444; animation: msm-pulse-timer 1s infinite; }
@keyframes msm-pulse-timer { 0%,100%{opacity:1} 50%{opacity:.7} }
.msm-timer-icon { font-size: 16px; }

.msm-exam-submit-early-btn {
    padding: 8px 18px; background: #fff; border: 1.5px solid var(--msm-exam-border);
    border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.msm-exam-submit-early-btn:hover { border-color: var(--msm-exam-accent); color: var(--msm-exam-accent); }

.msm-exam-progress-track { height: 5px; background: var(--msm-exam-track); border-radius: 3px; margin-bottom: 24px; }
.msm-exam-progress-fill { height: 100%; background: var(--msm-exam-accent); border-radius: 3px; transition: width .4s; }

.msm-exam-q-card {
    background: var(--msm-exam-card); border: 1px solid var(--msm-exam-border);
    border-radius: 16px; padding: 28px 32px; min-height: 260px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04); animation: msm-fade-in .2s ease;
}
@keyframes msm-fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.msm-exam-q-meta { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.msm-exam-topic-tag { font-size: 12px; background: #f1f5f9; color: #64748b; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.msm-exam-diff-tag { font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.msm-exam-q-text { font-size: 17px; font-weight: 600; color: var(--msm-exam-text); line-height: 1.55; margin-bottom: 24px; }

.msm-exam-opts { display: flex; flex-direction: column; gap: 10px; }
.msm-exam-opt {
    padding: 12px 16px; border: 1.5px solid var(--msm-exam-border); border-radius: 10px;
    background: #fff; text-align: left; font-family: inherit; font-size: 14px;
    cursor: pointer; transition: all .15s; color: var(--msm-exam-text);
}
.msm-exam-opt:hover { border-color: #a0a0c0; background: #f8f9ff; }
.msm-exam-opt.selected { border-color: var(--msm-exam-accent); background: #ede9ff; color: var(--msm-exam-accent); font-weight: 600; }
/* Option letter badge (A, B, C…) */
.msm-exam-opt-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #ede9ff; color: var(--msm-exam-accent);
    font-size: 12px; font-weight: 700; margin-right: 10px; flex-shrink: 0;
    transition: background .15s, color .15s;
}
.msm-exam-opt.selected .msm-exam-opt-letter {
    background: var(--msm-exam-accent); color: #fff;
}

/* True / False row */
.msm-exam-opts--tf {
    flex-direction: row; gap: 14px;
}
.msm-exam-opt--tf {
    flex: 1; text-align: center; font-size: 15px; font-weight: 600;
    padding: 14px 10px;
}

.msm-exam-textarea {
    width: 100%; box-sizing: border-box; padding: 12px 16px;
    border: 1.5px solid var(--msm-exam-border); border-radius: 10px;
    font-family: inherit; font-size: 14px; resize: vertical;
    transition: border-color .15s;
}
.msm-exam-textarea:focus { outline: none; border-color: var(--msm-exam-accent); }

.msm-exam-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; gap: 12px;
}
.msm-exam-nav-btn {
    padding: 10px 22px; border: 1.5px solid var(--msm-exam-border); border-radius: 10px;
    background: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.msm-exam-nav-btn:hover:not(:disabled) { border-color: var(--msm-exam-accent); color: var(--msm-exam-accent); }
.msm-exam-nav-btn:disabled { opacity: .4; cursor: default; }

.msm-exam-q-dots { display: flex; gap: 5px; flex-wrap: wrap; max-width: 320px; }
.msm-q-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb;
    cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.msm-q-dot.current { background: var(--msm-exam-accent); transform: scale(1.3); }
.msm-q-dot.answered { background: #86efac; }
.msm-q-dot.current.answered { background: var(--msm-exam-accent); }

/* Results */
/* ── Exam Results: Score Header ────────────────────────────────────────── */
.msm-exam-results-header {
    text-align: center;
    padding: 28px 20px 20px;
    background: linear-gradient(160deg, rgba(26,111,232,.07) 0%, transparent 60%);
    border-radius: 0 0 20px 20px;
    margin-bottom: 4px;
}
.msm-exam-score-ring {
    position: relative; width: 148px; height: 148px;
    margin: 0 auto 20px;
    filter: drop-shadow(0 4px 18px rgba(26,111,232,.18));
}
.msm-score-inner {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px;
}
#msm-score-pct {
    font-size: 38px; font-weight: 900;
    color: var(--msm-exam-text);
    letter-spacing: -1px;
    line-height: 1;
}
.msm-score-label {
    font-size: 11px; font-weight: 600;
    color: var(--msm-exam-sub);
    text-transform: uppercase; letter-spacing: .8px;
}
.msm-exam-stats {
    display: flex; gap: 10px; justify-content: center;
    flex-wrap: wrap; margin-bottom: 14px;
}
.msm-stat-pill {
    padding: 9px 18px;
    border-radius: 14px;
    font-weight: 800; font-size: 18px;
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    min-width: 78px;
    border: 1.5px solid transparent;
    transition: transform .15s;
}
.msm-stat-pill:hover { transform: translateY(-2px); }
.msm-stat-pill span {
    font-size: 10px; font-weight: 600;
    opacity: .7; text-transform: uppercase; letter-spacing: .5px;
}
.msm-stat-pill.correct {
    background: #f0fdf4; color: #15803d;
    border-color: #bbf7d0;
}
.msm-stat-pill.wrong {
    background: #fff1f2; color: #be123c;
    border-color: #fecdd3;
}
.msm-stat-pill.time {
    background: #eff6ff; color: #1d4ed8;
    border-color: #bfdbfe;
}
.msm-exam-grade-label {
    font-size: 20px; font-weight: 800;
    margin: 2px 0 0; letter-spacing: -.3px;
}
.grade-a { color: #16a34a; }
.grade-b { color: #2563eb; }
.grade-c { color: #d97706; }
.grade-d { color: #dc2626; }

/* ── Exam Breakdown List ───────────────────────────────────────────────── */
.msm-exam-breakdown {
    display: flex; flex-direction: column; gap: 10px;
    padding: 4px 0 24px;
}
.msm-exam-result-row {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--msm-exam-border, #e2e8f0);
    border-radius: 14px; padding: 14px 16px;
    border-left: 5px solid transparent;
    transition: box-shadow .15s, transform .15s;
    cursor: default;
}
.msm-exam-result-row:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
    transform: translateY(-1px);
}
.msm-exam-result-row.correct { border-left-color: #22c55e; }
.msm-exam-result-row.wrong   { border-left-color: #ef4444; }
.msm-result-q-num {
    width: 30px; height: 30px; border-radius: 50%;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800; flex-shrink: 0;
    color: #475569;
}
.msm-exam-result-row.correct .msm-result-q-num { background: #dcfce7; color: #15803d; }
.msm-exam-result-row.wrong   .msm-result-q-num { background: #fee2e2; color: #be123c; }
.msm-result-content { flex: 1; min-width: 0; }
.msm-result-question {
    font-size: 13.5px; font-weight: 700;
    margin-bottom: 6px; line-height: 1.4;
    color: var(--msm-exam-text, #0f172a);
}
.msm-result-your-answer {
    font-size: 12.5px; color: #64748b; margin-bottom: 3px;
    display: flex; align-items: baseline; gap: 4px;
}
.msm-result-your-answer::before { content: "Your answer:"; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; }
.msm-result-correct-answer {
    font-size: 12.5px; color: #15803d; font-weight: 600;
    display: flex; align-items: baseline; gap: 4px;
}
.msm-result-correct-answer::before { content: "Correct:"; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #86efac; }
.msm-result-explanation {
    font-size: 12px; color: #94a3b8;
    background: rgba(148,163,184,.08);
    border-radius: 8px; padding: 6px 10px;
    margin-top: 7px; font-style: italic; line-height: 1.5;
}
.msm-result-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.msm-exam-result-actions {
    text-align: center; padding: 8px 0 32px;
}
.msm-exam-result-actions .msm-exam-cta { max-width: 280px; }

/* ── Exam Results: Dark Mode Overrides ─────────────────────────────────── */
.msm-app[data-theme="dark"] .msm-stat-pill.correct {
    background: rgba(21,128,61,.18); color: #4ade80; border-color: rgba(74,222,128,.25);
}
.msm-app[data-theme="dark"] .msm-stat-pill.wrong {
    background: rgba(190,18,60,.18); color: #f87171; border-color: rgba(239,68,68,.25);
}
.msm-app[data-theme="dark"] .msm-stat-pill.time {
    background: rgba(29,78,216,.18); color: #93c5fd; border-color: rgba(147,197,253,.2);
}
.msm-app[data-theme="dark"] .msm-exam-result-row {
    background: var(--surface, #1e1e2e);
    border-color: rgba(255,255,255,.08);
}
.msm-app[data-theme="dark"] .msm-exam-result-row:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.msm-app[data-theme="dark"] .msm-result-q-num { background: rgba(255,255,255,.07); color: #94a3b8; }
.msm-app[data-theme="dark"] .msm-exam-result-row.correct .msm-result-q-num { background: rgba(74,222,128,.12); color: #4ade80; }
.msm-app[data-theme="dark"] .msm-exam-result-row.wrong   .msm-result-q-num { background: rgba(239,68,68,.12);  color: #f87171; }
.msm-app[data-theme="dark"] .msm-result-question { color: var(--text, #e2e8f0); }
.msm-app[data-theme="dark"] .msm-result-your-answer { color: #94a3b8; }
.msm-app[data-theme="dark"] .msm-result-correct-answer { color: #4ade80; }
.msm-app[data-theme="dark"] .msm-result-correct-answer::before { color: rgba(74,222,128,.55); }
.msm-app[data-theme="dark"] .msm-exam-results-header {
    background: linear-gradient(160deg, rgba(26,111,232,.1) 0%, transparent 65%);
}
.msm-app[data-theme="dark"] .msm-drill-ask-ai {
    background: rgba(124,58,237,.2); border-color: rgba(167,139,250,.4); color: #c4b5fd;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLASHCARD MODE  –  v2 (stack + swipe + difficulty colours)
   ═══════════════════════════════════════════════════════════════════════════ */

.msm-fc-wrap { font-family: 'Outfit', sans-serif; max-width: 640px; margin: 0 auto; padding-bottom: 16px; }
.msm-fc-screen { display: none; }
.msm-fc-screen.active { display: block; }

/* ── Setup ─────────────────────────────────────────────────────────────── */
.msm-fc-setup-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 24px;
    padding: 40px; text-align: center; box-shadow: 0 8px 32px rgba(26,111,232,.08);
}
.msm-fc-logo { font-size: 52px; margin-bottom: 12px; }
.msm-fc-title {
    font-size: 28px; font-weight: 800; margin: 0 0 8px;
    color: #1e1e2e; letter-spacing: -.5px; font-family: 'Outfit', -apple-system, sans-serif;
}
.msm-fc-subtitle { color: #64748b; margin: 0 0 32px; font-size: 14px; }
.msm-fc-form { text-align: left; }
.msm-fc-field { margin-bottom: 18px; }
.msm-fc-field label {
    display: block; font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px;
}
.msm-fc-field select {
    width: 100%; padding: 11px 14px; border: 1.5px solid #e2e8f0;
    border-radius: 12px; font-family: inherit; font-size: 14px;
    background: #fafafa; transition: border-color .15s;
}
.msm-fc-field select:focus { border-color: #1a6fe8; outline: none; background: #fff; }
.msm-fc-field select:disabled { opacity: .45; }

.msm-fc-cta {
    width: 100%; padding: 14px; background: linear-gradient(135deg,#1a6fe8,#7c3aed);
    color: #fff; border: none; border-radius: 14px; font-family: inherit;
    font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px;
    transition: opacity .15s, transform .1s; box-shadow: 0 4px 16px rgba(26,111,232,.35);
}
.msm-fc-cta:hover:not(:disabled) { opacity: .92; transform: translateY(-1px); }
.msm-fc-cta:active:not(:disabled) { transform: translateY(0); }
.msm-fc-cta:disabled { opacity: .35; cursor: default; box-shadow: none; }
.msm-fc-cta.secondary { background: #ede9ff; color: #1a6fe8; box-shadow: none; }
.msm-fc-error { color: #ef4444; font-size: 13px; margin-top: 10px; }

/* ── Deck header ───────────────────────────────────────────────────────── */
.msm-fc-deck-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0 12px; flex-wrap: wrap; gap: 8px;
}
.msm-fc-deck-info { font-size: 13px; font-weight: 700; color: #64748b; }
.msm-fc-progress-wrap {
    flex: 1; max-width: 180px; height: 6px; background: #e5e7eb;
    border-radius: 3px; overflow: hidden;
}
.msm-fc-progress-fill {
    height: 100%; background: linear-gradient(90deg,#1a6fe8,#7c3aed);
    border-radius: 3px; transition: width .45s cubic-bezier(.4,0,.2,1);
}
.msm-fc-legend { font-size: 12px; color: #94a3b8; display: flex; gap: 10px; align-items: center; }
.msm-fc-know-dot   { color: #22c55e; font-size: 10px; }
.msm-fc-review-dot { color: #f59e0b; font-size: 10px; }

/* ── Difficulty badge on card front ────────────────────────────────────── */
.msm-fc-diff-badge {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
    background: rgba(255,255,255,.18); color: #fff; align-self: flex-start;
    margin-bottom: 14px;
}

/* ── Card stack scene ──────────────────────────────────────────────────── */
.msm-fc-card-scene {
    position: relative;
    padding: 12px 8px 20px;
    user-select: none; -webkit-tap-highlight-color: transparent;
    cursor: grab;
}
.msm-fc-card-scene:active { cursor: grabbing; }

/* Ghost stack cards behind the main card */
.msm-fc-stack-card {
    position: absolute; left: 0; right: 0; border-radius: 22px;
    pointer-events: none;
}
.msm-fc-stack-card.s2 {
    top: 4px; height: 320px;
    background: rgba(26,111,232,.12);
    transform: scale(.92) translateY(4px);
    z-index: 0;
}
.msm-fc-stack-card.s1 {
    top: 2px; height: 320px;
    background: rgba(26,111,232,.2);
    transform: scale(.96) translateY(2px);
    z-index: 1;
}

/* ── Main flip card ────────────────────────────────────────────────────── */
.msm-fc-card {
    position: relative; height: 320px; width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.4,0,.2,1);
    border-radius: 22px;
    z-index: 2;
    will-change: transform;
}
.msm-fc-card.flipped { transform: rotateY(180deg); }
.msm-fc-card.is-dragging { transition: none !important; }

.msm-fc-card-front, .msm-fc-card-back {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 22px; padding: 32px 28px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
}

/* Front — default indigo, overridden per difficulty via data attr */
.msm-fc-card-front {
    background: linear-gradient(145deg, #1a6fe8 0%, #7c3aed 100%);
    color: #fff;
}
/* Difficulty colour variants */
.msm-fc-card[data-diff="easy"]   .msm-fc-card-front { background: linear-gradient(145deg,#16a34a,#22c55e); }
.msm-fc-card[data-diff="medium"] .msm-fc-card-front { background: linear-gradient(145deg,#b45309,#f59e0b); }
.msm-fc-card[data-diff="hard"]   .msm-fc-card-front { background: linear-gradient(145deg,#dc2626,#f87171); }

.msm-fc-card-back {
    background: #fff; border: 1.5px solid #e8e4ff;
    transform: rotateY(180deg); color: #1e1e2e;
}

/* Swipe overlay stamps */
.msm-fc-stamp {
    position: absolute; top: 28px; padding: 6px 18px;
    border-radius: 10px; font-size: 18px; font-weight: 900;
    letter-spacing: .06em; text-transform: uppercase;
    opacity: 0; pointer-events: none; z-index: 10;
    border: 3px solid; transform: rotate(-15deg);
    transition: opacity .08s;
}
.msm-fc-stamp.know-stamp {
    right: 24px; color: #16a34a; border-color: #16a34a;
    background: rgba(240,253,244,.85); transform: rotate(12deg);
}
.msm-fc-stamp.review-stamp {
    left: 24px; color: #d97706; border-color: #d97706;
    background: rgba(255,251,235,.85); transform: rotate(-12deg);
}

.msm-fc-card-label {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; opacity: .6; margin-bottom: 14px;
}
.msm-fc-card-body { font-size: 18px; font-weight: 600; line-height: 1.55; flex: 1; overflow-y: auto; }
.msm-fc-card-hint {
    font-size: 12px; opacity: .45; margin-top: 16px; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.msm-fc-card-hint::before { content: "↑"; font-size: 14px; }
.msm-fc-card-explanation {
    font-size: 13px; color: #64748b; margin-top: 12px; font-style: italic;
    border-top: 1px solid #f1f5f9; padding-top: 12px; line-height: 1.5;
}

/* ── Swipe hint bar ─────────────────────────────────────────────────────── */
.msm-fc-swipe-hint {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 6px; font-size: 12px; color: #cbd5e1;
    pointer-events: none;
}
.msm-fc-swipe-hint span { display: flex; align-items: center; gap: 4px; }
.msm-fc-swipe-hint .sh-review { color: #fbbf24; }
.msm-fc-swipe-hint .sh-know   { color: #4ade80; }

/* ── Slide-out animations ───────────────────────────────────────────────── */
.msm-fc-card.slide-out-right { animation: msm-fc-out-r .32s ease forwards; }
.msm-fc-card.slide-out-left  { animation: msm-fc-out-l .32s ease forwards; }
@keyframes msm-fc-out-r { to { transform: translateX(120%) rotateZ(18deg); opacity: 0; } }
@keyframes msm-fc-out-l { to { transform: translateX(-120%) rotateZ(-18deg); opacity: 0; } }

/* ── Post-flip action buttons ───────────────────────────────────────────── */
.msm-fc-actions {
    display: flex; gap: 10px; justify-content: center;
    padding: 10px 0 6px; flex-wrap: wrap;
}
.msm-fc-action-btn {
    flex: 1; min-width: 90px; max-width: 180px;
    padding: 13px 10px; border: none; border-radius: 14px;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: opacity .15s, transform .12s, box-shadow .15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.msm-fc-action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.msm-fc-action-btn:active { transform: translateY(0); }
.msm-fc-action-btn.know   { background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0; }
.msm-fc-action-btn.review { background: #fffbeb; color: #d97706; border: 1.5px solid #fde68a; }
.msm-fc-action-btn.ask    { background: #ede9fe; color: #6d28d9; border: 1.5px solid #ddd6fe; }
.msm-fc-action-btn.know:hover   { background: #dcfce7; }
.msm-fc-action-btn.review:hover { background: #fef3c7; }
.msm-fc-action-btn.ask:hover    { background: #e0d9fe; }

.msm-fc-skip-wrap { text-align: center; padding: 2px 0 6px; }
.msm-fc-skip-btn {
    background: none; border: none; font-family: inherit;
    font-size: 13px; color: #94a3b8; cursor: pointer; transition: color .15s;
    text-decoration: underline; text-underline-offset: 3px;
}
.msm-fc-skip-btn:hover { color: #64748b; }

/* ── Results screen ────────────────────────────────────────────────────── */
.msm-fc-results-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 24px;
    padding: 48px 32px 40px; text-align: center; max-width: 460px; margin: 0 auto;
    box-shadow: 0 8px 32px rgba(26,111,232,.1);
}
.msm-fc-results-emoji { font-size: 56px; margin-bottom: 10px; line-height: 1; }
.msm-fc-results-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: #1e1e2e; }
.msm-fc-results-subtitle { font-size: 13px; color: #94a3b8; margin: 0 0 28px; }

/* Circular progress ring */
.msm-fc-ring-wrap { position: relative; width: 110px; height: 110px; margin: 0 auto 28px; }
.msm-fc-ring-wrap svg { transform: rotate(-90deg); }
.msm-fc-ring-bg { fill: none; stroke: #f1f5f9; stroke-width: 9; }
.msm-fc-ring-fill { fill: none; stroke: #1a6fe8; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.msm-fc-ring-label {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.msm-fc-ring-pct { font-size: 22px; font-weight: 800; color: #1e1e2e; line-height: 1; }
.msm-fc-ring-sub { font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.msm-fc-results-stats { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.msm-fc-stat-box {
    flex: 1; min-width: 88px; padding: 14px 10px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: transform .15s;
}
.msm-fc-stat-box:hover { transform: translateY(-2px); }
.msm-fc-stat-box span:first-child { font-size: 26px; font-weight: 800; }
.msm-fc-stat-box span:last-child  { font-size: 11px; font-weight: 600; opacity: .65; }
.msm-fc-stat-box.know   { background: #f0fdf4; color: #16a34a; }
.msm-fc-stat-box.review { background: #fffbeb; color: #d97706; }
.msm-fc-stat-box.xp     { background: #f5f3ff; color: #1a6fe8; }
.msm-fc-results-msg {
    color: #64748b; font-size: 14px; margin-bottom: 28px;
    padding: 12px 16px; background: #f8fafc; border-radius: 10px; line-height: 1.5;
}
.msm-fc-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.msm-fc-result-actions .msm-fc-cta { flex: 1; min-width: 140px; }

/* ── Dark mode awareness ────────────────────────────────────────────────── */
.msm-dark .msm-fc-setup-card,
.msm-dark .msm-fc-results-card { background: #1e1e2e; border-color: #2a2a3e; }
.msm-dark .msm-fc-card-back { background: #252535; border-color: #3a3a5e; color: #e2e8f0; }
.msm-dark .msm-fc-field select { background: #1e1e2e; border-color: #3a3a5e; color: #e2e8f0; }
.msm-dark .msm-fc-results-msg { background: #252535; color: #94a3b8; }
.msm-dark .msm-fc-card-explanation { color: #94a3b8; border-top-color: #2a2a3e; }
.msm-dark .msm-fc-stack-card.s2 { background: rgba(124,58,237,.1); }
.msm-dark .msm-fc-stack-card.s1 { background: rgba(124,58,237,.2); }

/* ═══════════════════════════════════════════════════════════════════════════
   CLASS LEADERBOARD
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   LEADERBOARD  –  Podium + compact list design
   ══════════════════════════════════════════════════════════════════════════ */

.msm-lb-wrap {
    font-family: 'Outfit', -apple-system, sans-serif;
    max-width: 860px; margin: 0 auto;
    --lb-accent: #1a6fe8; --lb-text: #1a1714;
    --lb-text2: #6b6558; --lb-text3: #6d6255;
    --lb-border: #e4e2da; --lb-surface: #fff;
    color: var(--lb-text);
}
.msm-lb-header {
    padding: 24px 0 18px;
    border-bottom: 2px solid var(--lb-border);
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.msm-lb-title-group { display: flex; align-items: center; gap: 14px; }
.msm-lb-title-icon  { font-size: 36px; line-height: 1; display: flex; align-items: center; }
.msm-lb-title {
    font-size: 22px; font-weight: 800; margin: 0 0 3px;
    color: var(--lb-text); letter-spacing: -.5px;
    display: flex; align-items: center; gap: 8px;
}
.msm-lb-sub { font-size: 13px; color: var(--lb-text2); margin: 0; }
.msm-lb-filter select {
    padding: 8px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-family: inherit; font-size: 14px;
}
.msm-lb-optout label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #64748b; cursor: pointer; }
.msm-lb-empty  { text-align: center; padding: 48px; color: #94a3b8; font-size: 15px; }
.msm-lb-loading{ text-align: center; padding: 24px; color: #64748b; }

/* ── Podium ────────────────────────────────────────────────────────────── */
.msm-lb-podium-wrap {
    position: relative; overflow: hidden;
    background: linear-gradient(170deg, #1e1654 0%, #312085 40%, #4c1d95 100%);
    border-radius: 22px; margin-bottom: 10px;
    padding: 32px 20px 0; min-height: 230px;
}
/* Sparkle stars */
.msm-lb-podium-bg { position: absolute; inset: 0; pointer-events: none; }
.msm-lb-star {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.75);
    animation: msm-lb-twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes msm-lb-twinkle {
    0%  { opacity: .2; transform: scale(1); }
    100%{ opacity: 1;  transform: scale(1.5); }
}

.msm-lb-podium-stage {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; justify-content: center; gap: 0;
}

/* Common slot */
.msm-lb-pod-slot {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; max-width: 160px;
    animation: msm-lb-rise .55s ease both;
}
@keyframes msm-lb-rise { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* Crown (only #1) */
.msm-lb-pod-crown { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; animation: msm-lb-bounce 1.6s ease-in-out infinite alternate; }
.msm-lb-crown-svg { color: #fbbf24; filter: drop-shadow(0 2px 6px rgba(251,191,36,.65)); width: 28px; height: 28px; }
@keyframes msm-lb-bounce { 0%{transform:translateY(0)} 100%{transform:translateY(-6px)} }

/* Avatar circles */
.msm-lb-pod-av-wrap {
    position: relative; display: inline-flex; flex-shrink: 0;
}
.msm-lb-pod-avatar {
    border-radius: 50%; color: #fff; font-weight: 800; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    border: 3px solid rgba(255,255,255,.6);
}
.msm-lb-pod-1 .msm-lb-pod-avatar { width: 76px; height: 76px; font-size: 28px; }
.msm-lb-pod-2 .msm-lb-pod-avatar { width: 58px; height: 58px; font-size: 22px; }
.msm-lb-pod-3 .msm-lb-pod-avatar { width: 54px; height: 54px; font-size: 20px; }
.msm-lb-pod-me .msm-lb-pod-avatar { border-color: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.4), 0 4px 16px rgba(0,0,0,.35); }

/* Level dot badge — bottom-right of avatar wrap (outside avatar so overflow:hidden won't clip it) */
.msm-lb-pod-lvl-dot {
    position: absolute; bottom: -4px; right: -4px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.97); border: 2.5px solid rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.msm-lb-pod-lvl-dot svg { display: block; flex-shrink: 0; }
.msm-lb-pod-1 .msm-lb-pod-lvl-dot { width: 28px; height: 28px; bottom: -5px; right: -5px; }
.msm-lb-pod-2 .msm-lb-pod-lvl-dot { width: 24px; height: 24px; }
.msm-lb-pod-3 .msm-lb-pod-lvl-dot { width: 22px; height: 22px; }

/* "You" pulse dot */
.msm-lb-pod-you-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fbbf24; border: 2px solid #fff;
    animation: msm-lb-pulse 1.2s ease-in-out infinite;
}
@keyframes msm-lb-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

/* Podium info block: name + school + xp + streak */
.msm-lb-pod-info { text-align: center; margin-top: 8px; padding: 0 4px; }
.msm-lb-pod-name {
    color: #fff; font-weight: 700; font-size: 13px;
    max-width: 114px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msm-lb-pod-1 .msm-lb-pod-name { font-size: 14px; }
.msm-lb-pod-school {
    font-size: 10.5px; color: rgba(255,255,255,.6); margin-top: 3px;
    max-width: 114px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msm-lb-pod-xp  { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; margin-top: 6px; }
.msm-lb-pod-streak { color: rgba(255,255,255,.75); font-size: 11px; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.msm-lb-pod-streak .msm-lb-fire { color: rgba(255,200,100,.85); }

/* Podium base platforms — dome-arch top, rich gradient, position:relative for gloss */
.msm-lb-pod-base {
    width: 100%; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-top: 10px; padding: 10px 0 8px;
}
/* Gloss highlight strip across the top of every platform */
.msm-lb-pod-base::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none; z-index: 1;
}
/* Gold — tall arch-top platform */
.msm-lb-pod-1 .msm-lb-pod-base {
    height: 76px;
    border-radius: 55% 55% 0 0 / 28% 28% 0 0;
    background: linear-gradient(170deg, #fde68a 0%, #f59e0b 30%, #d97706 65%, #92400e 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 -2px 12px rgba(251,191,36,.4);
}
/* Silver — mid arch-top platform */
.msm-lb-pod-2 .msm-lb-pod-base {
    height: 56px;
    border-radius: 55% 55% 0 0 / 28% 28% 0 0;
    background: linear-gradient(170deg, #f1f5f9 0%, #cbd5e1 28%, #94a3b8 62%, #475569 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 -2px 10px rgba(148,163,184,.3);
}
/* Bronze — shorter arch-top platform */
.msm-lb-pod-3 .msm-lb-pod-base {
    height: 42px;
    border-radius: 55% 55% 0 0 / 28% 28% 0 0;
    background: linear-gradient(170deg, #fde5c8 0%, #d4875a 28%, #a0522d 62%, #6b2f12 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 -2px 8px rgba(160,82,45,.3);
}

/* Medal SVG inside platform — white/cream contrast so it pops off the colour */
.msm-lb-pod-medal {
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
}
.msm-lb-medal   { flex-shrink: 0; stroke-width: 2.2; }
.msm-lb-medal-1 { color: #fffbeb; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); width: 28px; height: 28px; }
.msm-lb-medal-2 { color: #f8fafc; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); width: 24px; height: 24px; }
.msm-lb-medal-3 { color: #fff7ed; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); width: 22px; height: 22px; }

.msm-lb-fire    { color: #f97316; flex-shrink: 0; }
.msm-lb-level-svg { color: #7c6fcd; vertical-align: middle; flex-shrink: 0; }

/* You tag */
.msm-lb-you-tag {
    flex-shrink: 0;
    background: rgba(108,99,255,.2); border: 1px solid rgba(108,99,255,.35);
    color: #a5b4fc; font-size: 9px; font-weight: 800;
    padding: 1px 6px; border-radius: 20px; letter-spacing: .05em;
}
.msm-lb-list .msm-lb-you-tag { background: rgba(108,99,255,.2); color: #a5b4fc; }

/* ── Compact list (rank 4+) ─────────────────────────────────────────────── */
.msm-lb-list {
    display: flex; flex-direction: column; gap: 5px;
    padding: 12px 0 4px;
}
.msm-lb-item {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1.5px solid #f0edf8;
    border-radius: 13px; padding: 11px 15px;
    transition: background .15s, box-shadow .15s;
    animation: msm-lb-slide-in .35s ease both;
    cursor: default;
}
@keyframes msm-lb-slide-in { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none} }
.msm-lb-item:hover { background: #f8f5ff; box-shadow: 0 2px 8px rgba(26,111,232,.08); }
.msm-lb-item-me {
    background: linear-gradient(90deg,#f5f3ff,#ede9fe);
    border-color: #c4b5fd;
}
.msm-lb-item-me .msm-lb-item-info .msm-lb-item-name { font-weight: 700; }

.msm-lb-item-rank {
    font-size: 12.5px; font-weight: 700; color: #8892b0;
    width: 26px; text-align: center; flex-shrink: 0;
}

/* Avatar wrapper — positions the level dot */
.msm-lb-item-av-wrap {
    position: relative; flex-shrink: 0;
    display: inline-flex;
}
.msm-lb-item-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    color: #fff; font-size: 15px; font-weight: 800; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Level dot badge on list-row avatar */
.msm-lb-item-lvl-dot {
    position: absolute; bottom: -2px; right: -2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #f0edf8; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; overflow: hidden;
}
.msm-lb-item-lvl-dot svg { display: block; flex-shrink: 0; }
.msm-lb-item-me .msm-lb-item-lvl-dot { background: #ede9fe; border-color: #c4b5fd; }

/* ── Per-level icon colours ─────────────────────────────────────────────── */
/* Applied as .msm-lb-lv-{icon_key} on every lvl-dot span.                  */
/* msm_icon() uses stroke="currentColor", so setting `color` here drives     */
/* the stroke — exactly matching the Earn XP panel icons for all 5 levels.  */
/* ── All 20 LEVEL_LADDER icon colour classes ────────────────────────────── */
/* msm_icon() uses stroke="currentColor"; setting `color` here drives it.   */
.msm-lb-lv-level      { color: #22c55e; }   /* Tier 1 — Seedling   green   */
.msm-lb-lv-study      { color: #4ade80; }   /* Tier 1 — Sprout     lt-green*/
.msm-lb-lv-search     { color: #0ea5e9; }   /* Tier 1 — Curious    sky     */
.msm-lb-lv-books      { color: #6366f1; }   /* Tier 1 — Student    indigo  */
.msm-lb-lv-zap        { color: #eab308; }   /* Tier 1 — Thinker    yellow  */
.msm-lb-lv-quiz       { color: #8b5cf6; }   /* Tier 2 — Scribe     violet  */
.msm-lb-lv-globe      { color: #06b6d4; }   /* Tier 2 — Explorer   cyan    */
.msm-lb-lv-microscope { color: #0ea5e9; }   /* Tier 2 — Scholar    sky     */
.msm-lb-lv-star       { color: #f59e0b; }   /* Tier 2 — Achiever   amber   */
.msm-lb-lv-badge      { color: #64748b; }   /* Tier 2 — Defender   slate   */
.msm-lb-lv-graduation { color: #f59e0b; }   /* Tier 3 — Graduate   amber   */
.msm-lb-lv-medal      { color: #d97706; }   /* Tier 3 — Medallist  d-amber */
.msm-lb-lv-fire       { color: #ef4444; }   /* Tier 3 — Ignited    red     */
.msm-lb-lv-crown      { color: #f59e0b; }   /* Tier 3 — Elite      gold    */
.msm-lb-lv-rocket     { color: #6366f1; }   /* Tier 3 — Trailblzr  indigo  */
.msm-lb-lv-trophy     { color: #f97316; }   /* Tier 4 — Master     orange  */
.msm-lb-lv-sparkles   { color: #fbbf24; }   /* Tier 4 — Luminary   gold    */
.msm-lb-lv-bot        { color: #06b6d4; }   /* Tier 4 — Sage       cyan    */
.msm-lb-lv-streak     { color: #ef4444; }   /* Tier 4 — Champion   red     */
.msm-lb-lv-award      { color: #f59e0b; }   /* Tier 4 — Legend     gold    */

/* Name + school two-line stack — flex:1 with min-width:0 is critical for truncation */
.msm-lb-item-info { flex: 1; min-width: 0; overflow: hidden; }
.msm-lb-item-name {
    font-size: 14px; font-weight: 600; color: #1e1e2e;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap; overflow: hidden; max-width: 100%;
}
.msm-lb-item-name-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.msm-lb-item-school {
    display: block; font-size: 11px; color: #8892b0;
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}

.msm-lb-item-streak { font-size: 12px; font-weight: 600; color: #ea580c; flex-shrink: 0; display: flex; align-items: center; gap: 3px; }
.msm-lb-item-xp {
    font-size: 13.5px; font-weight: 800; color: #1a6fe8;
    flex-shrink: 0; text-align: right; white-space: nowrap; min-width: 68px;
}
.msm-lb-item-xp small { font-size: 9.5px; font-weight: 500; opacity: .65; }

/* Rank-change arrows */
.msm-lb-item-change {
    display: flex; align-items: center; gap: 2px;
    font-size: 10.5px; font-weight: 700; flex-shrink: 0;
    width: 28px; justify-content: flex-end;
}
.msm-lb-item-change svg { flex-shrink: 0; }
.msm-lb-up   { color: #22c55e; }
.msm-lb-down { color: #ef4444; }
.msm-lb-flat .msm-lb-dash { color: #cbd5e1; font-size: 14px; }

/* ── "Your Position" pinned card ─────────────────────────────────────── */
.msm-lb-separator {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 4px; color: var(--lb-text3);
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.msm-lb-separator::before,
.msm-lb-separator::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.msm-lb-my-pos-card {
    background: linear-gradient(90deg,#f5f3ff,#eef2ff);
    border: 1.5px solid #c4b5fd; border-radius: 14px;
    padding: 11px 14px; display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: var(--lb-text); margin-top: 4px;
}
.msm-lb-my-pos-rank { font-size: 18px; font-weight: 800; color: #1a6fe8; min-width: 46px; }
.msm-lb-my-pos-info { flex: 1; min-width: 0; }
.msm-lb-my-pos-name { font-weight: 700; color: #1a1714; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.msm-lb-my-pos-school { font-size: 11.5px; color: var(--lb-text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msm-lb-my-pos-meta { font-size: 11px; color: var(--lb-text2); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.msm-lb-my-pos-xp   {
    font-size: 15px; font-weight: 800; color: #1a6fe8;
    background: #ede9ff; padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}
.msm-lb-you-pinned-label {
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #7c3aed; background: #ede9ff; padding: 2px 7px; border-radius: 10px;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
.msm-app[data-theme="dark"] .msm-lb-title   { color: #e2e8f0; }
.msm-app[data-theme="dark"] .msm-lb-wrap    { --lb-text:#e2e8f0; --lb-text2:#94a3b8; --lb-text3:#8fa4bb; --lb-border:#334155; }
.msm-app[data-theme="dark"] .msm-lb-filter select { background:#1e293b; color:#e2e8f0; border-color:#334155; }
.msm-app[data-theme="dark"] .msm-lb-empty,
.msm-app[data-theme="dark"] .msm-lb-loading { color: #64748b; }
.msm-app[data-theme="dark"] .msm-lb-item    { background:#1e293b; border-color:#334155; }
.msm-app[data-theme="dark"] .msm-lb-item:hover { background:#273344; }
.msm-app[data-theme="dark"] .msm-lb-item-me { background:linear-gradient(90deg,#1e1b4b,#1e1b4b); border-color:#4c1d95; }
.msm-app[data-theme="dark"] .msm-lb-item-name { color: #e2e8f0; }
.msm-app[data-theme="dark"] .msm-lb-item-school { color: #64748b; }
.msm-app[data-theme="dark"] .msm-lb-item-lvl-dot { background: #273344; border-color: #1e293b; }
.msm-app[data-theme="dark"] .msm-lb-item-me .msm-lb-item-lvl-dot { background: #1e1b4b; border-color: #4c1d95; }
.msm-app[data-theme="dark"] .msm-lb-pod-lvl-dot  { background: rgba(30,41,59,.97); border-color: rgba(255,255,255,.25); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.msm-app[data-theme="dark"] .msm-lb-my-pos-card { background:linear-gradient(90deg,#1e1b4b,#1e293b); border-color:#4c1d95; }
.msm-app[data-theme="dark"] .msm-lb-my-pos-name { color: #e2e8f0; }
.msm-app[data-theme="dark"] .msm-lb-my-pos-school { color: #64748b; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .msm-lb-podium-wrap  { padding: 22px 10px 0; border-radius: 16px; }
    .msm-lb-pod-1 .msm-lb-pod-avatar { width: 64px; height: 64px; font-size: 24px; }
    .msm-lb-pod-2 .msm-lb-pod-avatar { width: 50px; height: 50px; font-size: 19px; }
    .msm-lb-pod-3 .msm-lb-pod-avatar { width: 46px; height: 46px; font-size: 17px; }
    .msm-lb-pod-name, .msm-lb-pod-school { max-width: 82px; }
    .msm-lb-item { padding: 9px 10px; gap: 8px; }
    .msm-lb-item-rank { min-width: 22px; font-size: 11.5px; }
    .msm-lb-item-streak { display: none; }
    .msm-lb-item-xp { font-size: 12px; min-width: 54px; }
    .msm-lb-item-change { width: 24px; font-size: 9.5px; }
    .msm-lb-item-school { font-size: 10.5px; }
    .msm-exam-q-card     { padding: 20px 16px; }
    .msm-fc-card         { height: 280px; }
    .msm-fc-card-body    { font-size: 15px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR NAV DIVIDER & BACK BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.msm-nav-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 6px 12px;
    opacity: 0.6;
}
/* Advanced accordion removed — all nav items visible inline */
/* .msm-nav-secondary still works as a lighter variant if needed */
.msm-nav-secondary {
    font-size: 12.5px;
    color: var(--sidebar-text2);
}
.msm-nav-secondary:hover { color: var(--sidebar-text); }
.msm-nav-secondary .msm-nav-icon { opacity: .75; }

.msm-panel-back-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--text) !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.msm-panel-back-btn:hover {
    background: var(--bg3) !important;
    color: var(--accent) !important;
    opacity: 1;
}

/* Panel body with padding for inline feature panels */
.msm-panel-body-padded {
    padding: 24px 20px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MORE TRAY
   ═══════════════════════════════════════════════════════════════════════════ */

.msm-more-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 120;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.msm-more-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(env(safe-area-inset-bottom, 16px) + 16px);
    z-index: 121;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,.12);
}
.msm-more-tray.open {
    transform: translateY(0);
}

.msm-more-tray-handle {
    width: 38px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 4px auto 14px;
}

.msm-more-tray-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 14px;
}

.msm-more-tray-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.msm-more-tray-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    color: var(--text2);
    transition: all .15s;
    text-align: center;
}
.msm-more-tray-item:hover,
.msm-more-tray-item:active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.msm-more-tray-icon {
    font-size: 24px;
    line-height: 1;
}

/* Dark mode adjustments */
.msm-app[data-theme="dark"] .msm-more-tray {
    background: var(--surface);
}
.msm-app[data-theme="dark"] .msm-more-tray-item {
    background: var(--bg2);
    border-color: var(--border);
    color: var(--text2);
}

/* ═══════════════════════════════════════════════════════════════════
   MYSOMERO MATH SOLVER — Uganda NCDC Curriculum Styles
   ═══════════════════════════════════════════════════════════════════ */

.msm-math-solution {
    background: linear-gradient(135deg, #f0f9ff 0%, #e8f5e9 100%);
    border: 2px solid #2196F3;
    border-radius: 12px;
    padding: 0;
    margin: 4px 0;
    overflow: hidden;
    font-family: var(--font, 'Inter', sans-serif);
    box-shadow: 0 2px 12px rgba(33, 150, 243, 0.15);
}

.msm-math-solution.msm-math-guidance {
    background: linear-gradient(135deg, #fff8e1 0%, #fce4ec 100%);
    border-color: #FF9800;
    box-shadow: 0 2px 12px rgba(255, 152, 0, 0.15);
}

.msm-math-header {
    background: #2196F3;
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.msm-math-guidance .msm-math-header {
    background: #FF9800;
}

.msm-math-body {
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #1a1a2e;
}

.msm-math-body strong {
    color: #1565C0;
    font-weight: 700;
}

.msm-math-guidance .msm-math-body strong {
    color: #E65100;
}

.msm-math-body em {
    font-style: italic;
    color: #555;
    background: rgba(33,150,243,0.07);
    padding: 1px 4px;
    border-radius: 3px;
}

.msm-math-body code {
    background: #e3f2fd;
    color: #1565C0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
}

.msm-math-line {
    margin: 3px 0;
    padding: 0;
}

.msm-math-line:last-child {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(33,150,243,0.1);
    border-radius: 8px;
    font-weight: 600;
}

.msm-math-list {
    margin: 6px 0 6px 20px;
    padding: 0;
    list-style: none;
}

.msm-math-list li {
    position: relative;
    padding-left: 18px;
    margin: 4px 0;
    line-height: 1.6;
}

.msm-math-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #2196F3;
    font-weight: 700;
}

.msm-math-guidance .msm-math-list li::before {
    color: #FF9800;
}

/* Dark mode */
.msm-app[data-theme="dark"] .msm-math-solution {
    background: linear-gradient(135deg, #0d2137 0%, #0a2515 100%);
    border-color: #42a5f5;
}

.msm-app[data-theme="dark"] .msm-math-solution.msm-math-guidance {
    background: linear-gradient(135deg, #2d1f00 0%, #1f0010 100%);
    border-color: #ffa726;
}

.msm-app[data-theme="dark"] .msm-math-header {
    background: #1565C0;
}

.msm-app[data-theme="dark"] .msm-math-guidance .msm-math-header {
    background: #E65100;
}

.msm-app[data-theme="dark"] .msm-math-body {
    color: #e0e0e0;
}

.msm-app[data-theme="dark"] .msm-math-body strong {
    color: #64b5f6;
}

.msm-app[data-theme="dark"] .msm-math-guidance .msm-math-body strong {
    color: #ffb74d;
}

.msm-app[data-theme="dark"] .msm-math-body code {
    background: #0d47a1;
    color: #e3f2fd;
}

.msm-app[data-theme="dark"] .msm-math-line:last-child {
    background: rgba(66,165,245,0.15);
}

/* ── Logo image ──────────────────────────────────────────────────────────── */
.msm-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.20));
}

/* ── Header login button ─────────────────────────────────────────────────── */
.msm-header-login-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: opacity .15s, transform .12s;
    flex-shrink: 0;
    white-space: nowrap;
}
.msm-header-login-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Sidebar login key icon btn ──────────────────────────────────────────── */
.msm-login-btn { font-size: 13px; }

/* ── Avatar button (logged-in state) ─────────────────────────────────────── */
.msm-auth-avatar {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
}
.msm-auth-avatar-main {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0;
    border: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s;
    background: var(--accent) !important;
    color: #fff !important;
}
.msm-auth-avatar-main:hover { opacity: .85; }

/* ── User dropdown ───────────────────────────────────────────────────────── */
.msm-user-dropdown {
    position: absolute;
    top: 56px;
    right: 16px;
    z-index: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow2);
    padding: 8px;
    min-width: 200px;
    font-family: var(--font);
}
.msm-user-dropdown-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 6px 10px 2px;
}
.msm-user-dropdown-email {
    font-size: 11px;
    color: var(--text3);
    padding: 0 10px 6px;
    word-break: break-all;
}
.msm-user-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.msm-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text2);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, color .12s;
    text-align: left;
}
.msm-user-dropdown-item:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Auth Overlay ────────────────────────────────────────────────────────── */
.msm-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0,0,0,.52);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: msm-fade-in .2s ease;
}
@keyframes msm-fade-in { from{opacity:0} to{opacity:1} }

.msm-auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    padding: 32px 30px 28px;
    width: 100%;
    max-width: 420px;
    position: relative;
    max-height: calc(100% - 20px);
    overflow-y: auto;
    /* Explicit — otherwise the UA computes overflow-x:auto too (per the CSS
       overflow spec, an unspecified axis next to a non-visible one becomes
       'auto'), which silently clips anything that touches the card's right
       edge — including the rounded corner of the Google button. */
    overflow-x: hidden;
    animation: msm-slide-up .22s ease;
    font-family: var(--font);
}
@keyframes msm-slide-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msm-auth-card::-webkit-scrollbar { width: 3px; }
.msm-auth-card::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Logo in auth card */
.msm-auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
}
.msm-auth-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
}
.msm-auth-logo span {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.3px;
}

/* Close button */
.msm-auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text3);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .13s, color .13s;
    font-family: var(--font);
    flex-shrink: 0;
}
.msm-auth-close:hover { background: var(--bg3); color: var(--text); }

/* Titles */
.msm-auth-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -.4px;
    text-align: center;
    font-family: var(--font);
}
.msm-auth-sub {
    font-size: 14px;
    color: var(--text3);
    text-align: center;
    margin-bottom: 14px;
}

/* Error / success banners */
.msm-auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.msm-auth-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    margin-bottom: 14px;
}
.msm-app[data-theme="dark"] .msm-auth-error {
    background: #2d0a0a;
    border-color: #7f1d1d;
    color: #f87171;
}
.msm-app[data-theme="dark"] .msm-auth-success {
    background: #052e16;
    border-color: #166534;
    color: #4ade80;
}

/* Form fields */
.msm-auth-row {
    display: flex;
    gap: 10px;
}
.msm-auth-row .msm-auth-field { flex: 1; min-width: 0; }

.msm-auth-field {
    margin-bottom: 14px;
}
.msm-auth-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 6px;
    letter-spacing: .1px;
}
.msm-req { color: var(--accent-warm); }

.msm-auth-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
    color: var(--text);
    font-size: 16px;
    font-family: var(--font);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.msm-auth-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26,111,232,.1);
    background: var(--surface);
}
.msm-auth-field input::placeholder { color: var(--text3); }

.msm-auth-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg2);
    color: var(--text);
    font-size: 15px;
    font-family: var(--font);
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.msm-auth-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26,111,232,.1);
    background: var(--surface);
}
.msm-auth-field textarea::placeholder { color: var(--text3); }

/* ── Feedback category chips (replaces a bare <select>, which had zero
     custom styling anywhere and rendered as the raw browser dropdown) ── */
.msm-fb-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.msm-fb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    color: var(--text2);
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.msm-fb-chip:hover { border-color: var(--accent); color: var(--text); }
.msm-fb-chip:active { transform: scale(.96); }

.msm-fb-chip--active[data-tone="neutral"] { background: var(--bg2); border-color: var(--text2); color: var(--text); }
.msm-fb-chip--active[data-tone="red"]     { background: rgba(220,38,38,.1);   border-color: #dc2626; color: #b91c1c; }
.msm-fb-chip--active[data-tone="purple"]  { background: rgba(124,58,237,.1);  border-color: #7c3aed; color: #6d28d9; }
.msm-fb-chip--active[data-tone="blue"]    { background: rgba(2,132,199,.1);   border-color: #0284c7; color: #0369a1; }
.msm-fb-chip--active[data-tone="orange"]  { background: rgba(194,65,12,.1);   border-color: #c2410c; color: #c2410c; }

/* Password wrap with show/hide toggle */
.msm-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.msm-pw-wrap input { padding-right: 38px; }
.msm-pw-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    opacity: .5;
    padding: 2px;
    line-height: 1;
    transition: opacity .12s;
}
.msm-pw-toggle:hover { opacity: .9; }

/* Password strength bar */
.msm-pw-strength {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.msm-pw-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--bg3);
    border-radius: 4px;
    overflow: hidden;
}
.msm-pw-strength-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .3s, background .3s;
    width: 0%;
}
.msm-pw-strength span {
    font-size: 10.5px;
    color: var(--text3);
    flex-shrink: 0;
    min-width: 40px;
}

/* Submit button */
.msm-auth-submit {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: opacity .15s, transform .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.msm-auth-submit:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.msm-auth-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Consent block (Uganda DPA 2019) ── */
.msm-consent-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.msm-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.55;
}
.msm-consent-label input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.msm-consent-label a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.msm-consent-label a:hover { opacity: .8; }
.msm-consent-minor {
    display: block;
    margin-top: 3px;
    color: var(--text3);
    font-size: 11.5px;
}
.msm-consent-label--optional { color: var(--text3); }
.msm-consent-optional { font-style: italic; }

/* Switch link */
.msm-auth-switch {
    text-align: center;
    font-size: 12.5px;
    color: var(--text3);
    margin-top: 18px;
}
.msm-auth-switch-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.msm-auth-switch-btn:hover { opacity: .8; }

/* Mobile responsive */
@media(max-width:700px) {
    .msm-auth-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .msm-auth-card {
        padding: 24px 20px 32px;
        border-radius: 22px 22px 0 0;
        max-width: 100%;
        width: 100%;
        max-height: 92dvh;
        animation: msm-sheet-up .25s cubic-bezier(.32,1,.46,1);
    }
    @keyframes msm-sheet-up {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .msm-auth-row { flex-direction: row; gap: 10px; }
    .msm-header-login-btn { padding: 5px 10px; font-size: 11.5px; }
    .msm-user-dropdown { right: 8px; top: 52px; }
}

/* ── Dark mode: Panel title visibility fixes ─────────────────────────────── */

/* Flashcard Mode title */
.msm-app[data-theme="dark"] .msm-fc-title {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-fc-setup-card {
    background: #1e293b;
    border-color: #334155;
}
.msm-app[data-theme="dark"] .msm-fc-subtitle {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-fc-field label {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-fc-field select {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* Smart Study Plan title in dark mode */
.msm-app[data-theme="dark"] .msm-sp-app {
    --sp-text:    #e2e8f0;
    --sp-text2:   #94a3b8;
    --sp-text3:   #94a3b8;
    --sp-bg:      #0f172a;
    --sp-surface: #1e293b;
    --sp-border:  #334155;
    --sp-shadow:  0 2px 10px rgba(0,0,0,.3);
}
.msm-app[data-theme="dark"] .msm-sp-heading {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-sp-select,
.msm-app[data-theme="dark"] .msm-sp-input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* Exam Simulator title in dark mode */
.msm-app[data-theme="dark"] .msm-exam-title {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-exam-setup-card {
    background: #1e293b;
    border-color: #334155;
}
.msm-app[data-theme="dark"] .msm-exam-subtitle {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-exam-wrap {
    --msm-exam-text:   #e2e8f0;
    --msm-exam-sub:    #94a3b8;
    --msm-exam-bg:     #0f172a;
    --msm-exam-card:   #1e293b;
    --msm-exam-border: #334155;
}
.msm-app[data-theme="dark"] #msm-esim-class,
.msm-app[data-theme="dark"] #msm-esim-subject,
.msm-app[data-theme="dark"] #msm-esim-qty,
.msm-app[data-theme="dark"] .msm-exam-field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,114,242,.15);
}
.msm-app[data-theme="dark"] .msm-exam-field select {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* ── Leaderboard — comprehensive dark mode ──────────────────────────────── */
.msm-app[data-theme="dark"] .msm-lb-title {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-lb-wrap {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-lb-filter select {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-lb-empty,
.msm-app[data-theme="dark"] .msm-lb-loading {
    color: #64748b;
}
/* (table/row dark overrides removed — leaderboard now uses podium+list layout) */

/* ── Search: "See all" button in recent history group ───────────────────── */
.msm-search-group-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msm-search-see-all-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
    opacity: .85;
    transition: opacity .15s;
}
.msm-search-see-all-btn:hover { opacity: 1; text-decoration: underline; }

/* History section highlight pulse when "See all" is clicked */
.msm-sidebar-history.msm-history-highlight {
    animation: msm-history-pulse 1.2s ease;
}
@keyframes msm-history-pulse {
    0%   { background: transparent; }
    20%  { background: rgba(26,111,232,.12); border-radius: 10px; }
    80%  { background: rgba(26,111,232,.08); border-radius: 10px; }
    100% { background: transparent; }
}

/* ── Lesson prompt card ─────────────────────────────────────────────────── */
.msm-lesson-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid #ede9fe;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    max-width: 420px;
    transition: box-shadow .18s, border-color .18s;
}
.msm-lesson-card:hover {
    box-shadow: 0 4px 16px rgba(124,58,237,.12);
    border-color: #c4b5fd;
}

.msm-lesson-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
}

.msm-lesson-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.msm-lesson-label {
    font-size: 13px;
    font-weight: 600;
    color: #5b21b6;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msm-lesson-btn {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: .02em;
    transition: opacity .15s, transform .12s;
    white-space: nowrap;
}
.msm-lesson-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* Dark mode */
.msm-app[data-theme="dark"] .msm-lesson-card {
    background: linear-gradient(135deg, #1e1b2e 0%, #2d1f4e 100%);
    border-color: #4c1d95;
}
.msm-app[data-theme="dark"] .msm-lesson-label { color: #c4b5fd; }

@media (max-width: 480px) {
    .msm-lesson-card { max-width: 100%; }
    .msm-lesson-label { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIMULATION CARD — inline in chat (below AI answer)
   ══════════════════════════════════════════════════════════════════════════ */
.msm-sim-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #052e16 0%, #0a3d22 100%);
    border: 1.5px solid #16a34a;
    border-radius: 12px;
    padding: 13px 15px;
    margin-top: 10px;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    max-width: 420px;
}
.msm-sim-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(22,163,74,.3); }
.msm-sim-card--locked {
    background: linear-gradient(135deg, #1c1c2e, #1a1a35);
    border-color: #374151;
    cursor: pointer;
}
.msm-sim-card--locked:hover { box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.msm-sim-card__icon { color: #22c55e; flex-shrink: 0; }
.msm-sim-card--locked .msm-sim-card__icon { color: #6b7280; }
.msm-sim-card__body { flex: 1; min-width: 0; }
.msm-sim-card__label { font-size: 13px; font-weight: 700; color: #f0fdf4; margin-bottom: 2px; }
.msm-sim-card--locked .msm-sim-card__label { color: #9ca3af; }
.msm-sim-card__sub { font-size: 11px; color: #86efac; }
.msm-sim-card--locked .msm-sim-card__sub { color: #6b7280; }
.msm-sim-card__views { font-size: 10px; color: #86efac; opacity: .8; margin-top: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   SIMULATION DISCOVERY CARDS — For You page row
   ══════════════════════════════════════════════════════════════════════════ */
.msm-disc-row--sims {
    border-bottom: 1px solid rgba(22,163,74,.15);
    padding-bottom: 4px;
    overflow: hidden; /* contain glow bleed */
}

/* ── Featured info panel below Interactive Simulations carousel ────────── */
.msm-sim-featured-info {
    margin: 4px 14px 14px;
    padding: 10px 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.msm-sim-featured-info--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Left side: title + desc stacked */
.msm-sim-featured-text {
    flex: 1;
    min-width: 0;
}
.msm-sim-featured-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.25;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .15s ease;
}
.msm-sim-featured-desc {
    font-size: 12px;
    color: var(--text2);
    font-family: var(--font);
    line-height: 1.4;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .15s ease;
}
/* Right: pink/magenta View pill — matching the Radio app */
.msm-sim-featured-view {
    flex-shrink: 0;
    padding: 9px 22px;
    border-radius: 24px;
    border: none;
    background: linear-gradient(135deg, #e91e8c, #c2185b);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(233,30,140,.40);
    letter-spacing: .01em;
    transition: transform .15s, box-shadow .15s;
}
.msm-sim-featured-view:active {
    transform: scale(.94);
    box-shadow: 0 2px 8px rgba(233,30,140,.30);
}

/* ── Sim track cards: base origin only — JS sets the actual transition
   (transform + box-shadow) inline once booted, so the slide/scale stays
   perfectly in sync with the discrete slot model. ───────────────────────── */
#msm-sim-track .msm-disc-card {
    transform-origin: left top;
}
/* Taller thumb for sim carousel cards */
#msm-sim-track .msm-disc-thumb {
    height: 115px;
}

/* ── Pagination dots (Radio-app style) — below the carousel ────────────── */
.msm-sim-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 2px;
}
.msm-sim-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    opacity: .55;
    cursor: pointer;
    transition: width .25s ease, opacity .25s ease, background .25s ease;
}
.msm-sim-dot--active {
    width: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, #34d399, #16a34a);
    opacity: 1;
}

.msm-sim-row-badge {
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(135deg, #14532d, #166534);
    color: #86efac;
    border: 1px solid #16a34a;
    border-radius: 8px;
    padding: 2px 8px;
    margin-left: 8px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.msm-sim-disc-card {
    flex-shrink: 0;
    width: 200px;
    background: linear-gradient(160deg, #0a2218 0%, #0d2d1e 100%);
    border: 1.5px solid #16a34a;
    border-radius: 14px;
    padding: 16px 14px;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msm-sim-disc-card--unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22,163,74,.35);
}
.msm-sim-disc-card--locked {
    background: linear-gradient(160deg, #111827, #1f2937);
    border-color: #374151;
    opacity: .85;
}
.msm-sim-disc-card--locked:hover { box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.msm-sim-disc-icon { color: #22c55e; }
.msm-sim-disc-card--locked .msm-sim-disc-icon { color: #4b5563; }
.msm-sim-disc-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.msm-sim-disc-title { font-size: 13px; font-weight: 800; color: #f0fdf4; line-height: 1.35; }
.msm-sim-disc-card--locked .msm-sim-disc-title { color: #9ca3af; }
.msm-sim-disc-desc { font-size: 11px; color: #6ee7b7; line-height: 1.45; }
.msm-sim-disc-card--locked .msm-sim-disc-desc { color: #4b5563; }
.msm-sim-disc-action {
    margin-top: auto;
    font-size: 11px;
    font-weight: 800;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 4px;
}
.msm-sim-disc-action--locked { color: #6b7280; }

/* ══════════════════════════════════════════════════════════════════════════
   TEASER WIDGET  —  sidebar visual lesson card
   Compact horizontal layout: fits perfectly in 248px sidebar.
   Full-width on mobile overlay (280px).
   ══════════════════════════════════════════════════════════════════════════ */

#msm-teaser-widget {
    margin: 8px 10px 0;
    border-radius: 13px;
    overflow: hidden;
    border: 1.5px solid rgba(167,139,250,.35);
    background: linear-gradient(145deg,#1e1530 0%,#2d1f4e 60%,#1a1040 100%);
    box-shadow:
        0 4px 20px rgba(124,58,237,.18),
        inset 0 1px 0 rgba(255,255,255,.07);
    transition: box-shadow .22s, transform .18s;
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(100% - 20px);
    /* Premium shimmer border */
    position: relative;
}
#msm-teaser-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 13px;
    background: linear-gradient(135deg,
        rgba(167,139,250,.15) 0%,
        transparent 50%,
        rgba(124,58,237,.08) 100%);
    pointer-events: none;
    z-index: 0;
}
#msm-teaser-widget:hover {
    box-shadow:
        0 6px 28px rgba(124,58,237,.28),
        inset 0 1px 0 rgba(255,255,255,.1);
    transform: translateY(-1px);
}

/* ── Top accent bar ── */
.msm-teaser-accent {
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #5b21b6);
    border-radius: 13px 13px 0 0;
    position: relative;
    z-index: 1;
}

/* ── FREE PREVIEW badge row ── */
.msm-teaser-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 11px 4px;
    position: relative;
    z-index: 1;
}
.msm-teaser-badge {
    font-size: 9px;
    font-weight: 800;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: rgba(124,58,237,.2);
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid rgba(167,139,250,.25);
}
.msm-teaser-platform-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,.7);
}

/* ── Thumbnail + text horizontal row ── */
.msm-teaser-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 11px 10px;
    position: relative;
    z-index: 1;
}

.msm-teaser-thumb-wrap {
    position: relative;
    width: 76px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #12102a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    transition: box-shadow .2s;
}
.msm-teaser-thumb-wrap:hover {
    box-shadow: 0 4px 16px rgba(124,58,237,.5);
}
.msm-teaser-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, filter .3s ease;
}
.msm-teaser-thumb-wrap:hover .msm-teaser-thumb {
    transform: scale(1.08);
    filter: brightness(.8);
}
.msm-teaser-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#4c1d95,#1e1b4b);
    display: flex;
    align-items: center;
    justify-content: center;
}
.msm-teaser-thumb-placeholder::after {
    content: '🎬';
    font-size: 20px;
}

/* Play circle */
.msm-teaser-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.msm-teaser-play-btn::after {
    content: '▶';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #7c3aed;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    transition: transform .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
}
.msm-teaser-thumb-wrap:hover .msm-teaser-play-btn::after {
    transform: scale(1.15);
}

/* Text column */
.msm-teaser-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.msm-teaser-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #f3e8ff;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font, sans-serif);
}
.msm-teaser-subtitle {
    font-size: 10px;
    color: #a78bfa;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Enroll button — full width, always visible ── */
.msm-teaser-enroll-wrap {
    padding: 0 10px 10px;
    position: relative;
    z-index: 1;
}
.msm-teaser-enroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #6d28d9 100%);
    color: #fff !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
    letter-spacing: .03em;
    text-align: center;
    box-sizing: border-box;
    box-shadow:
        0 3px 12px rgba(124,58,237,.45),
        inset 0 1px 0 rgba(255,255,255,.15);
    transition: box-shadow .18s, transform .14s, opacity .15s;
    position: relative;
    overflow: hidden;
}
/* Shine sweep on hover */
.msm-teaser-enroll-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: skewX(-20deg);
    transition: left .4s ease;
}
.msm-teaser-enroll-btn:hover::after { left: 130%; }
.msm-teaser-enroll-btn:hover {
    box-shadow:
        0 5px 20px rgba(124,58,237,.6),
        inset 0 1px 0 rgba(255,255,255,.2);
    transform: translateY(-1px);
    opacity: 1 !important;
    text-decoration: none !important;
    color: #fff !important;
}
.msm-teaser-enroll-btn:active { transform: translateY(0); }

.msm-teaser-enroll-arrow {
    font-size: 12px;
    transition: transform .15s;
}
.msm-teaser-enroll-btn:hover .msm-teaser-enroll-arrow {
    transform: translateX(3px);
}

/* ── v26: Subscriber state ────────────────────────────────────────────────── */
.msm-teaser-badge--lesson {
    background: linear-gradient(90deg,#1a7f4b 0%,#22a866 100%);
    color: #fff;
}
.msm-teaser-enroll-btn--watch {
    background: linear-gradient(135deg,#1a7f4b 0%,#22a866 100%);
}
.msm-teaser-enroll-btn--watch:hover {
    background: linear-gradient(135deg,#22a866 0%,#2bcc7a 100%);
}

/* ── v26: Locked state (non-subscriber) ──────────────────────────────────── */
.msm-teaser-badge--locked {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.60);
    letter-spacing: .02em;
}
.msm-teaser-thumb--blurred {
    filter: blur(4px);
    transform: scale(1.05);
}
.msm-teaser-thumb-wrap--locked {
    position: relative;
    overflow: hidden;
    cursor: default;
}
/* Keep blurred on hover — never reveal content */
.msm-teaser-thumb-wrap--locked:hover .msm-teaser-thumb--blurred {
    filter: blur(4px);
    transform: scale(1.05);
}
.msm-teaser-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}

/* ── v26: Lesson card locked button (non-subscriber, inside AI chat) ─────── */
.msm-lesson-btn--locked {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.14);
    pointer-events: auto;
}
.msm-lesson-btn--locked:hover {
    background: rgba(255,255,255,.13);
    color: rgba(255,255,255,.80);
}

/* ── Light mode override ── */
.msm-app[data-theme="light"] #msm-teaser-widget,
:root:not([data-theme="dark"]) #msm-teaser-widget {
    background: linear-gradient(145deg,#1e1530 0%,#2d1f4e 60%,#1a1040 100%);
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
#msm-teaser-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: msm-tl-in .18s ease;
}
@keyframes msm-tl-in {
    from { opacity:0; }
    to   { opacity:1; }
}
.msm-tl-box {
    background: #0a0a14;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 860px;
    box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(167,139,250,.15);
    animation: msm-tl-scale .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes msm-tl-scale {
    from { transform:scale(.9); opacity:.5; }
    to   { transform:scale(1);  opacity:1; }
}
.msm-tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg,#12102a,#1e1538);
    border-bottom: 1px solid rgba(167,139,250,.15);
}
.msm-tl-title {
    font-size: 13px;
    font-weight: 700;
    color: #e9d5ff;
    font-family: var(--font, sans-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 48px);
}
.msm-tl-close {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 7px;
    line-height: 1;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.msm-tl-close:hover { color:#fff; background:rgba(255,255,255,.15); }
.msm-tl-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
}
.msm-tl-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

body.msm-no-scroll { overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   v18 — Onboarding Wizard  (polished, Claude-quality)
   ═══════════════════════════════════════════════════════ */
.msm-onboard-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15,20,40,.70);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: msm-ob-bg-in .3s ease;
}
@keyframes msm-ob-bg-in { from { opacity:0 } to { opacity:1 } }

.msm-onboard-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 36px 32px;
    max-width: 460px; width: 100%;
    box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.08);
    position: relative;
    animation: msm-ob-card-in .35s cubic-bezier(.22,.68,0,1.2);
}
@keyframes msm-ob-card-in {
    from { opacity:0; transform: translateY(24px) scale(.97) }
    to   { opacity:1; transform: translateY(0) scale(1) }
}
.msm-app[data-theme="dark"] .msm-onboard-card {
    background: #161b2e;
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}

/* Progress dots */
.msm-onboard-progress {
    display: flex; gap: 6px; justify-content: center; margin-bottom: 32px;
}
.msm-onboard-step-dot {
    height: 4px; width: 28px; border-radius: 2px;
    background: #e2e8f0; transition: background .3s, width .3s;
}
.msm-onboard-dot-active { background: #6366f1; width: 40px; }
.msm-app[data-theme="dark"] .msm-onboard-step-dot { background: #334155; }
.msm-app[data-theme="dark"] .msm-onboard-dot-active { background: #818cf8; }

/* Logo */
.msm-onboard-logo {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 20px;
}
.msm-onboard-logo img {
    width: 44px; height: 44px; object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(99,102,241,.25);
}
.msm-onboard-logo-name {
    font-size: 18px; font-weight: 800; letter-spacing: -.4px;
    color: #1e293b;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-app[data-theme="dark"] .msm-onboard-logo-name { color: #f1f5f9; }

/* Headings */
.msm-onboard-title {
    font-size: 22px; font-weight: 800; letter-spacing: -.5px;
    text-align: center; margin: 0 0 10px; line-height: 1.25;
    color: #0f172a;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-app[data-theme="dark"] .msm-onboard-title { color: #f1f5f9; }

.msm-onboard-sub {
    font-size: 14px; font-weight: 400; line-height: 1.6;
    color: #64748b; text-align: center; margin: 0 0 28px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-app[data-theme="dark"] .msm-onboard-sub { color: #94a3b8; }

/* Class / subject pills */
.msm-onboard-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-bottom: 24px;
}
.msm-onboard-pill {
    border: 1.5px solid #e2e8f0; border-radius: 999px;
    padding: 9px 20px; font-size: 13.5px; font-weight: 600;
    background: #f8fafc; color: #374151; cursor: pointer;
    transition: all .18s; line-height: 1;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-onboard-pill:hover {
    border-color: #a5b4fc; background: #eef2ff; color: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,.15);
}
.msm-onboard-pill-active {
    border-color: #6366f1; background: #6366f1; color: #fff;
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.msm-app[data-theme="dark"] .msm-onboard-pill {
    background: #1e293b; border-color: #334155; color: #cbd5e1;
}
.msm-app[data-theme="dark"] .msm-onboard-pill:hover {
    background: #312e81; border-color: #6366f1; color: #e0e7ff;
}

.msm-onboard-loading {
    color: #94a3b8; font-size: 13px; text-align: center; padding: 16px 0;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}

/* Example questions (step 3) */
.msm-onboard-examples { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.msm-onboard-example {
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    border-radius: 12px; padding: 13px 16px; font-size: 13.5px;
    color: #475569; text-align: left; cursor: pointer;
    transition: all .18s; line-height: 1.5;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-onboard-example::before { content: '"'; color: #a5b4fc; font-weight: 700; margin-right: 4px; }
.msm-onboard-example:hover {
    border-color: #6366f1; background: #eef2ff; color: #3730a3;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(99,102,241,.12);
}
.msm-app[data-theme="dark"] .msm-onboard-example {
    background: #1e293b; border-color: #334155; color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-onboard-example:hover {
    background: #1e1b4b; border-color: #6366f1; color: #c7d2fe;
}

/* Start button */
.msm-onboard-start {
    width: 100%; padding: 15px; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 15px; font-weight: 700;
    cursor: pointer; border: none; margin-bottom: 12px;
    transition: all .2s; letter-spacing: -.1px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    box-shadow: 0 4px 16px rgba(99,102,241,.4);
}
.msm-onboard-start:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(99,102,241,.45);
}

/* Phone step (Google Sign-In accounts) */
.msm-onboard-phone-field { margin-bottom: 14px; }
.msm-onboard-phone-field input {
    width: 100%; padding: 13px 14px; border-radius: 12px;
    border: 1.5px solid #e2e8f0; font-size: 15px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    box-sizing: border-box; transition: border-color .15s;
}
.msm-onboard-phone-field input:focus { outline: none; border-color: #6366f1; }
.msm-app[data-theme="dark"] .msm-onboard-phone-field input {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
}
.msm-onboard-phone-err { color: #dc2626; font-size: 12.5px; margin-top: 6px; }

/* Step icon badge — round gradient chip for an SVG icon above a step title
   (e.g. the school step). Keeps icons out of the <h2> so long titles never
   wrap the icon onto its own oversized line the way an inline emoji did. */
.msm-onboard-step-icon {
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(139,92,246,.14));
    color: #6366f1;
}
.msm-app[data-theme="dark"] .msm-onboard-step-icon {
    background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.22));
    color: #a5b4fc;
}

/* School step input — the shared .msm-school-ac-wrap/.msm-school-ac-dropdown
   rules only style the dropdown; the text input itself needs its own rules
   here (mirrors .msm-onboard-phone-field input) or it renders as a bare,
   unstyled native input. */
.msm-onboard-school-field { margin-bottom: 14px; }
.msm-onboard-school-field input {
    width: 100%; padding: 13px 14px; border-radius: 12px;
    border: 1.5px solid #e2e8f0; font-size: 15px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    box-sizing: border-box; transition: border-color .15s;
    background: #fff; color: #0f172a;
}
.msm-onboard-school-field input:focus { outline: none; border-color: #6366f1; }
.msm-onboard-school-field input.msm-ac-confirmed { border-color: #22c55e; }
.msm-app[data-theme="dark"] .msm-onboard-school-field input {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
}

/* Back link */
.msm-onboard-back {
    background: none; border: none; color: #94a3b8; font-size: 13px;
    cursor: pointer; display: block; margin: 0 auto; padding: 4px 8px;
    border-radius: 6px; transition: color .15s;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-onboard-back:hover { color: #6366f1; }

/* Skip link (school step) */
.msm-onboard-skip {
    background: none; border: none; color: #94a3b8; font-size: 13px;
    cursor: pointer; display: block; margin: 0 auto; padding: 4px 8px;
    text-decoration: underline; text-underline-offset: 2px;
    border-radius: 6px; transition: color .15s;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-onboard-skip:hover { color: #6366f1; }
.msm-app[data-theme="dark"] .msm-onboard-skip { color: #64748b; }
.msm-app[data-theme="dark"] .msm-onboard-skip:hover { color: #a5b4fc; }

/* ═══════════════════════════════════════════════════════
   v18 — Announcement Banner + Bell
   ═══════════════════════════════════════════════════════ */
.msm-bell-wrap { position: relative; }
.msm-bell-btn  { position: relative; font-size: 18px !important; }
.msm-bell-dot  {
    position: absolute; top: 2px; right: 2px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444; border: 2px solid #fff;
    display: none;
}
.msm-app[data-theme="dark"] .msm-bell-dot { border-color: #1e293b; }

/* ── Announcement banner — desktop sticky strip ─────────────────────────── */
.msm-announcement-banner {
    position: sticky; top: 0; z-index: 200;
    /* Light: solid accent bar — white text on indigo, unmissable */
    background: #4f46e5;
    border-bottom: none;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; font-size: 13px; color: #ffffff;
}
.msm-app[data-theme="dark"] .msm-announcement-banner {
    /* Dark: deep slate with a soft indigo left accent line */
    background: linear-gradient(135deg, #1e1b4b 0%, #1e2035 100%);
    border-bottom: 2px solid #4338ca;
    color: #c7d2fe;
}
.msm-ann-icon  { font-size: 16px; flex-shrink: 0; opacity: .9; margin-top: 1px; }
.msm-ann-text  { flex: 1; font-weight: 500; line-height: 1.5; }
.msm-ann-subject { display: inline-block; font-weight: 700; margin-bottom: 2px; }
.msm-ann-dismiss {
    background: none; border: none; color: rgba(255,255,255,.8);
    cursor: pointer; font-size: 16px; padding: 2px 6px;
    border-radius: 6px; flex-shrink: 0; transition: all .15s;
}
.msm-ann-dismiss:hover { opacity: 1; background: rgba(255,255,255,.15); color: #fff; }
.msm-app[data-theme="dark"] .msm-ann-dismiss { color: #a5b4fc; }
.msm-app[data-theme="dark"] .msm-ann-dismiss:hover { background: rgba(165,180,252,.12); }

/* ── Mobile: announcement as a centered flash card — never touches input area ── */
@media (max-width: 700px) {
    .msm-announcement-banner {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%, -60%);
        /* Use 100% instead of 100vw to avoid scrollbar-caused horizontal overflow */
        width: min(calc(100% - 48px), 340px);
        max-width: 340px;
        border: none;
        border-radius: 20px;
        padding: 22px 20px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        z-index: 300;
        /* Light mode: solid indigo card — dark background, white text */
        background: #4f46e5;
        border-left: none;
        color: #ffffff;
        box-shadow:
            0 4px 16px rgba(79,70,229,.45),
            0 20px 56px rgba(79,70,229,.35),
            0 0 0 1px rgba(79,70,229,.3);
    }
    .msm-app[data-theme="dark"] .msm-announcement-banner {
        /* Dark card: rich dark surface with stronger indigo left bar */
        background: #1e1b4b;
        border-left: 5px solid #818cf8;
        color: #e0e7ff;
        box-shadow:
            0 4px 6px rgba(0,0,0,.3),
            0 16px 48px rgba(0,0,0,.55),
            0 0 0 1px rgba(129,140,248,.2);
        border-bottom: none;
    }
    .msm-ann-text { font-size: 14px; line-height: 1.6; }
    .msm-ann-dismiss {
        align-self: flex-end;
        width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        /* Light mode: white tinted circle, white icon */
        background: rgba(255,255,255,.2);
        color: #ffffff;
        padding: 0;
        position: absolute;
        top: 14px; right: 14px;
        opacity: 1;
    }
    .msm-ann-dismiss:hover { background: rgba(255,255,255,.35); }
    .msm-app[data-theme="dark"] .msm-ann-dismiss {
        background: rgba(129,140,248,.15);
        color: #818cf8;
    }

}

/* ═══════════════════════════════════════════════════════
   v18 — Luganda / Local Language Card
   ═══════════════════════════════════════════════════════ */
.msm-lang-card {
    background: linear-gradient(135deg, #fef3c7, #fff7ed) !important;
    border: 2px solid #fde68a !important;
    border-radius: 16px !important; padding: 20px !important;
}
.msm-app[data-theme="dark"] .msm-lang-card {
    background: linear-gradient(135deg, #292524, #1c1917) !important;
    border-color: #78350f !important;
}
.msm-lang-flag  { font-size: 28px; margin-bottom: 8px; }
.msm-lang-title { font-size: 17px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.msm-app[data-theme="dark"] .msm-lang-title { color: #fde68a; }
.msm-lang-body  { font-size: 13px; color: #78350f; line-height: 1.6; margin-bottom: 14px; }
.msm-app[data-theme="dark"] .msm-lang-body  { color: #d6d3d1; }
.msm-lang-body em { color: #0d9488; font-style: normal; font-weight: 600; }
.msm-lang-translate-btn {
    display: inline-block; background: #6366f1; color: #fff;
    padding: 8px 16px; border-radius: 8px; font-size: 13px;
    font-weight: 600; text-decoration: none; transition: background .2s;
}
.msm-lang-translate-btn:hover { background: #4f46e5; color: #fff; }

/* ═══════════════════════════════════════════════════════
   v18 — Admin Live Bar (dashboard)
   ═══════════════════════════════════════════════════════ */
.msm-live-bar {
    display: flex; align-items: center; gap: 14px;
    background: #f0fdf4; border: 1.5px solid #86efac;
    border-radius: 10px; padding: 10px 18px;
    font-size: 13px; color: #15803d;
    margin-bottom: 20px; flex-wrap: wrap;
}
.msm-live-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: #22c55e;
    animation: msm-pulse 1.5s infinite;
    margin-right: 5px;
}
@keyframes msm-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.85); }
}
.msm-live-sep { color: #86efac; }
.msm-live-item a { color: #15803d; font-weight: 600; }


/* ═══════════════════════════════════════════════════════
   v18 — Guest 3-question limit wall + nudge
   ═══════════════════════════════════════════════════════ */
.msm-guest-wall {
    padding: 8px 16px 20px;
}
.msm-guest-wall-card {
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(99,102,241,.12);
}
.msm-app[data-theme="dark"] .msm-guest-wall-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #1e1b3a 100%);
    border-color: #3730a3;
}
.msm-guest-wall-icon { font-size: 36px; margin-bottom: 12px; }
.msm-guest-wall-title {
    font-size: 18px; font-weight: 800; color: #1e293b;
    margin: 0 0 10px; letter-spacing: -.3px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-app[data-theme="dark"] .msm-guest-wall-title { color: #e0e7ff; }
.msm-guest-wall-sub {
    font-size: 14px; color: #64748b; line-height: 1.6;
    margin: 0 0 24px; max-width: 320px; margin-left: auto; margin-right: auto;
}
.msm-app[data-theme="dark"] .msm-guest-wall-sub { color: #94a3b8; }
.msm-guest-wall-signup {
    display: block; width: 100%; max-width: 280px;
    margin: 0 auto 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 15px; font-weight: 700;
    border: none; border-radius: 12px; padding: 14px;
    cursor: pointer; transition: all .2s;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    box-shadow: 0 4px 16px rgba(99,102,241,.4);
}
.msm-guest-wall-signup:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(99,102,241,.45);
}
.msm-guest-wall-login {
    background: none; border: none; color: #6366f1;
    font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 6px; border-radius: 6px; transition: color .15s;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-guest-wall-login:hover { color: #4338ca; }

/* Guest nudge (after question 2) */
.msm-guest-nudge {
    margin: 4px 16px 12px;
    background: #fef3c7; border: 1.5px solid #fde68a;
    border-radius: 12px; padding: 12px 14px;
    font-size: 13px; color: #78350f;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.msm-app[data-theme="dark"] .msm-guest-nudge {
    background: #292524; border-color: #78350f; color: #fde68a;
}
.msm-guest-nudge-btn {
    background: #f59e0b; color: #fff; border: none;
    border-radius: 8px; padding: 4px 12px; font-size: 12px;
    font-weight: 700; cursor: pointer; white-space: nowrap;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-guest-nudge-btn:hover { background: #d97706; }
.msm-guest-nudge-close {
    background: none; border: none; color: #92400e;
    font-size: 14px; cursor: pointer; margin-left: auto; padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════
   v18 — Change My Class inline picker
   ═══════════════════════════════════════════════════════ */
.msm-classpicker-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(15,20,40,.65); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: msm-ob-bg-in .25s ease;
}
.msm-classpicker-card {
    background: #fff; border-radius: 20px;
    padding: 32px 28px; max-width: 380px; width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    animation: msm-ob-card-in .3s cubic-bezier(.22,.68,0,1.2);
}
.msm-app[data-theme="dark"] .msm-classpicker-card { background: #161b2e; }
.msm-classpicker-card h3 {
    font-size: 18px; font-weight: 800; margin: 0 0 8px;
    color: #0f172a; letter-spacing: -.3px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-app[data-theme="dark"] .msm-classpicker-card h3 { color: #f1f5f9; }
.msm-classpicker-card p {
    font-size: 13.5px; color: #64748b; margin: 0 0 20px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-app[data-theme="dark"] .msm-classpicker-card p { color: #94a3b8; }
.msm-classpicker-cancel {
    background: none; border: none; color: #94a3b8; font-size: 13px;
    cursor: pointer; display: block; margin: 12px auto 0;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-classpicker-cancel:hover { color: #6366f1; }

/* ── v7 Adaptive Quiz: level badges & override button ──────────────────────── */
.msm-topic-level-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: middle;
    transition: opacity .3s;
    line-height: 1;
}
#msm-quiz-change-diff {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 12px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg2, #f8fafc);
    color: var(--text2, #64748b);
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s, color .15s;
}
#msm-quiz-change-diff:hover {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: transparent;
}
.msm-app[data-theme="dark"] #msm-quiz-change-diff {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
.msm-app[data-theme="dark"] #msm-quiz-change-diff:hover {
    background: var(--accent, #6366f1);
    color: #fff;
}
/* Override picker "Let AI decide" button */
.msm-diff-adaptive-btn {
    display: inline-block;
    width: 100%;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px dashed var(--border, #e2e8f0);
    background: var(--bg2, #f8fafc);
    color: var(--text, #1e293b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s;
}
.msm-diff-adaptive-btn:hover {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: transparent;
}
/* Adaptive banner progress bar nudge */
#msm-adaptive-banner {
    flex-wrap: wrap;
}

/* ── Super AI badge ─────────────────────────────────────────────────────── */
.msm-super-ai-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 60%, #6a1b9a 100%);
    color: #fff;
    box-shadow: 0 1px 6px rgba(26,115,232,0.35);
    user-select: none;
    animation: msm-badge-pop .25s ease;
}
@keyframes msm-badge-pop {
    from { transform: scale(.8); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMAGES IN ANSWERS
   ══════════════════════════════════════════════════════════════════════════ */
.msm-img-wrap {
    margin: 12px 0;
    text-align: center;
}
.msm-answer-img {
    max-width: 100%;
    width: auto;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
}


/* ═══════════════════════════════════════════════════════════════════════════
   STUDY PLAN — PERSISTENCE
   ══════════════════════════════════════════════════════════════════════════ */
.msm-sp-persisted-banner {
    background: #f5f3ff;
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.msm-sp-progress-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #4b5563;
}
.msm-sp-progress-row strong { color: #1f2937; }
.msm-sp-progress-bar-wrap {
    background: #e5e7eb;
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
}
.msm-sp-progress-bar-fill {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    height: 7px;
    border-radius: 99px;
    transition: width .4s ease;
}
.msm-sp-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border, #d1d5db);
    background: var(--surface, #fff);
    cursor: pointer;
    color: var(--text2, #6b7280);
    transition: all .18s ease;
    white-space: nowrap;
    letter-spacing: .01em;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.msm-sp-reset-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239,68,68,.05);
    box-shadow: 0 2px 8px rgba(239,68,68,.12);
}
.msm-sp-day-current {
    border-left: 4px solid #6366f1 !important;
    background: #faf5ff !important;
}
.msm-sp-day-done {
    opacity: 0.58;
}
.msm-sp-day-done .msm-sp-day-topic { text-decoration: line-through; }
.msm-sp-today-badge {
    display: inline-block;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: .3px;
}
.msm-sp-day-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.msm-sp-mark-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 16px 14px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid #d1d5db;
    background: #f9fafb;
    cursor: pointer;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: all .18s;
    width: calc(100% - 32px);
    justify-content: center;
    letter-spacing: .01em;
}
.msm-sp-mark-btn:hover {
    border-color: #6366f1;
    color: #4f46e5;
    background: rgba(99,102,241,.06);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(99,102,241,.12);
}
.msm-sp-mark-btn.msm-sp-mark-done {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
    font-weight: 700;
}
.msm-sp-mark-btn.msm-sp-mark-done:hover {
    background: #dcfce7;
    border-color: #4ade80;
    color: #15803d;
    box-shadow: 0 3px 10px rgba(22,163,74,.12);
}
.msm-sp-mark-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   PAST PAPERS — STUDENT UI
   ══════════════════════════════════════════════════════════════════════════ */
.msm-pp-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    font-family: inherit;
}
.msm-pp-screen { display: none; }
.msm-pp-screen.active { display: block; }

/* Setup card */
.msm-pp-setup-card {
    background: #fff;
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 2px 20px rgba(0,0,0,.08);
    max-width: 480px;
    margin: 0 auto;
}
.msm-pp-logo { font-size: 44px; margin-bottom: 8px; line-height: 1; display:flex; justify-content:center; }
.msm-pp-logo svg { color: #6366f1; }
.msm-pp-title { font-size: 22px; font-weight: 700; color: #1f2937; margin: 0 0 6px; }
.msm-pp-subtitle { font-size: 14px; color: #6b7280; margin: 0 0 24px; }
.msm-pp-form { text-align: left; }
.msm-pp-field { margin-bottom: 18px; }
.msm-pp-field label { display: block; font-size: 12px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.msm-pp-field select { width: 100%; padding: 9px 12px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: #fff; }

/* Paper grid buttons */
.msm-pp-paper-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.msm-pp-paper-btn {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 18px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: .15s;
    min-width: 90px;
}
.msm-pp-paper-btn:hover { border-color: #a5b4fc; background: #f5f3ff; }
.msm-pp-paper-btn.active { border-color: #6366f1; background: #eef2ff; }
.msm-pp-paper-icon-svg { color: #a5b4fc; margin-bottom: 2px; transition: color .15s; }
.msm-pp-paper-btn:hover .msm-pp-paper-icon-svg,
.msm-pp-paper-btn.active .msm-pp-paper-icon-svg { color: #6366f1; }
.msm-pp-paper-year { font-size: 20px; font-weight: 800; color: #1f2937; }
.msm-pp-paper-num  { font-size: 12px; color: #6b7280; font-weight: 500; }
.msm-pp-paper-count { font-size: 11px; color: #9ca3af; }

/* Timer buttons */
.msm-pp-timer-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.msm-pp-timer-btn {
    padding: 7px 16px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: .15s;
}
.msm-pp-timer-btn.active { border-color: #6366f1; background: #eef2ff; color: #6366f1; font-weight: 600; }

/* CTA button */
.msm-pp-cta {
    display: block;
    width: 100%;
    padding: 14px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background .15s;
}
.msm-pp-cta:hover { background: #4f46e5; }
.msm-pp-cta:disabled { background: #a5b4fc; cursor: default; }
.msm-pp-error { color: #dc2626; font-size: 13px; margin-top: 8px; }

/* Active exam */
.msm-pp-exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 14px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.msm-pp-progress-track {
    background: #e5e7eb;
    border-radius: 99px;
    height: 4px;
    margin-bottom: 22px;
    overflow: hidden;
}
.msm-pp-progress-track > div {
    background: #6366f1;
    height: 4px;
    border-radius: 99px;
    transition: width .3s;
}
.msm-pp-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}
.msm-pp-timer-urgent { color: #dc2626 !important; animation: msm-pp-pulse 1s infinite; }
@keyframes msm-pp-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.msm-pp-submit-btn {
    padding: 7px 18px;
    border-radius: 8px;
    border: none;
    background: #dc2626;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

/* Question card */
.msm-pp-q-wrap { min-height: 220px; }
.msm-pp-question {
    background: #fff;
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 1px 10px rgba(0,0,0,.07);
}
.msm-pp-q-topic {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.msm-pp-q-text {
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
    margin-bottom: 18px;
    line-height: 1.6;
}
.msm-pp-options { display: flex; flex-direction: column; gap: 9px; }
.msm-pp-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    transition: .15s;
    color: #1f2937;
}
.msm-pp-opt:hover { border-color: #a5b4fc; background: #f5f3ff; }
.msm-pp-opt.selected { border-color: #6366f1; background: #eef2ff; font-weight: 500; }
.msm-pp-opt-letter { font-weight: 800; color: #6366f1; min-width: 18px; font-size: 15px; }
.msm-pp-short-ans {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    color: #1f2937;
    box-sizing: border-box;
}
.msm-pp-short-ans:focus { border-color: #6366f1; outline: none; }
.msm-pp-nav-row {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    gap: 10px;
}
.msm-pp-nav-btn {
    padding: 9px 22px;
    border-radius: 9px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: .15s;
}
.msm-pp-nav-btn:hover:not(:disabled) { border-color: #6366f1; color: #6366f1; }
.msm-pp-nav-btn:disabled { opacity: .4; cursor: default; }

/* Results */
.msm-pp-results-header { text-align: center; padding: 24px 0 20px; }
.msm-pp-results-icon { font-size: 52px; margin-bottom: 8px; display:flex; justify-content:center; line-height:1; }
.msm-pp-results-header h2 { font-size: 22px; font-weight: 700; color: #1f2937; margin: 0 0 8px; }
.msm-pp-score-big { font-size: 56px; font-weight: 900; color: #6366f1; line-height: 1; }
.msm-pp-score-sub { color: #6b7280; font-size: 15px; margin-top: 6px; }
.msm-pp-review-list { margin-top: 20px; }
.msm-pp-rev-item {
    background: #fff;
    border-radius: 11px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 4px solid #e5e7eb;
    font-size: 13px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.msm-pp-rev-correct  { border-left-color: #22c55e; }
.msm-pp-rev-wrong    { border-left-color: #ef4444; }
.msm-pp-rev-q        { font-weight: 600; color: #1f2937; margin-bottom: 6px; line-height: 1.4; }
.msm-pp-rev-ans      { color: #374151; }
.msm-pp-rev-correct-ans { color: #16a34a; font-weight: 600; margin-top: 4px; }
.msm-pp-rev-exp      { color: #6b7280; margin-top: 6px; font-style: italic; }
.msm-pp-results-actions { padding-bottom: 32px; }
.msm-pp-loading-small { color: #6b7280; font-size: 13px; padding: 8px 0; }
.msm-pp-no-papers     { color: #9ca3af; font-size: 13px; padding: 8px 0; }

/* Dark mode adjustments */
.msm-app[data-theme="dark"] .msm-pp-setup-card,
.msm-app[data-theme="dark"] .msm-pp-question,
.msm-app[data-theme="dark"] .msm-pp-rev-item { background: #1e293b; }
.msm-app[data-theme="dark"] .msm-pp-paper-btn,
.msm-app[data-theme="dark"] .msm-pp-opt,
.msm-app[data-theme="dark"] .msm-pp-nav-btn  { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.msm-app[data-theme="dark"] .msm-pp-paper-btn:hover { border-color: #6366f1; background: #1e1b4b; }
.msm-app[data-theme="dark"] .msm-pp-paper-btn:hover .msm-pp-paper-icon-svg { color: #818cf8; }
.msm-app[data-theme="dark"] .msm-pp-opt:hover { border-color: #6366f1; background: #1e1b4b; }
.msm-app[data-theme="dark"] .msm-pp-nav-btn:hover:not(:disabled) { border-color: #6366f1; color: #818cf8; background: #1e1b4b; }
.msm-app[data-theme="dark"] .msm-pp-timer-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.msm-app[data-theme="dark"] .msm-pp-timer-btn:hover { border-color: #6366f1; background: #1e1b4b; }
.msm-app[data-theme="dark"] .msm-pp-paper-icon-svg { color: #475569; }
.msm-app[data-theme="dark"] .msm-pp-paper-btn.active,
.msm-app[data-theme="dark"] .msm-pp-opt.selected { background: #312e81; border-color: #6366f1; }
.msm-app[data-theme="dark"] .msm-pp-q-text,
.msm-app[data-theme="dark"] .msm-pp-title     { color: #f1f5f9; }
.msm-app[data-theme="dark"] .msm-pp-score-big { color: #818cf8; }
.msm-app[data-theme="dark"] .msm-pp-results-icon svg { color: #818cf8; }
.msm-app[data-theme="dark"] .msm-pp-logo svg { color: #818cf8; }
.msm-app[data-theme="dark"] .msm-sp-persisted-banner {
    background: #1e1b4b;
    border-color: #4338ca;
}
.msm-app[data-theme="dark"] .msm-sp-progress-row {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-sp-progress-row strong {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-sp-progress-bar-wrap {
    background: #334155;
}
.msm-app[data-theme="dark"] .msm-sp-reset-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-sp-reset-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239,68,68,.08);
}
.msm-app[data-theme="dark"] .msm-sp-day-current {
    background: rgba(99,102,241,.12) !important;
    border-left-color: #818cf8 !important;
}
.msm-app[data-theme="dark"] .msm-sp-today-badge {
    background: #6366f1;
}
.msm-app[data-theme="dark"] .msm-sp-mark-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-sp-mark-btn:hover {
    border-color: #818cf8;
    color: #a5b4fc;
    background: rgba(129,140,248,.08);
}
.msm-app[data-theme="dark"] .msm-sp-mark-btn.msm-sp-mark-done {
    background: rgba(22,163,74,.1);
    border-color: #16a34a;
    color: #4ade80;
}
.msm-app[data-theme="dark"] .msm-sp-mark-btn.msm-sp-mark-done:hover {
    background: rgba(22,163,74,.18);
    border-color: #22c55e;
    color: #86efac;
}
.msm-app[data-theme="dark"] .msm-sp-weak-badge {
    background: rgba(180,83,9,.15);
    border-color: #92400e;
    color: #fcd34d;
}
.msm-app[data-theme="dark"] .msm-sp-tag-ok { background: rgba(21,128,61,.15); border-color: #15803d; color: #4ade80; }
.msm-app[data-theme="dark"] .msm-sp-tag-warn { background: rgba(180,83,9,.15); border-color: #92400e; color: #fcd34d; }
.msm-app[data-theme="dark"] .msm-sp-subtopic-weak { background: rgba(180,83,9,.12); border-color: #92400e; color: #fcd34d; }


/* ── Exam Simulator — Past Papers alt link ───────────────────────────────── */
.msm-esim-alt-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.msm-esim-alt-label {
    font-size: 13px;
    color: var(--text3);
}
.msm-esim-alt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all .15s;
}
.msm-esim-alt-btn:hover {
    background: var(--accent);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EXAM SIMULATOR — MODE PICKER + UNEB
   ══════════════════════════════════════════════════════════════════════════ */

/* Mode picker card */
.msm-mode-card { padding-bottom: 28px; }

.msm-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
}
@media (max-width: 480px) {
    .msm-mode-grid { grid-template-columns: 1fr; }
}

/* ── Mode picker cards ── */
.msm-mode-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    border-radius: 18px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease;
    text-align: left;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* Coloured top strip */
.msm-mode-btn::before {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    flex-shrink: 0;
}
.msm-mode-btn-uneb::before {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}
/* Inner padding wrapper */
.msm-mode-btn > *:not(:first-child),
.msm-mode-btn > .msm-mode-icon,
.msm-mode-btn > .msm-mode-name,
.msm-mode-btn > .msm-mode-desc {
    padding-left: 16px;
    padding-right: 16px;
}
.msm-mode-icon {
    font-size: 30px;
    line-height: 1;
    margin-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    display: block;
}
.msm-mode-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-top: 10px;
    padding-left: 16px;
    padding-right: 16px;
    display: block;
    letter-spacing: -.2px;
}
.msm-mode-desc {
    font-size: 11.5px;
    color: var(--text3);
    line-height: 1.45;
    margin-top: 5px;
    margin-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    display: block;
}
.msm-mode-btn:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26,111,232,.14);
}
.msm-mode-btn-uneb {
    border-color: rgba(217,119,6,.35);
}
.msm-mode-btn-uneb:hover {
    border-color: #d97706;
    box-shadow: 0 8px 24px rgba(217,119,6,.18);
    transform: translateY(-3px);
}
.msm-mode-badge {
    position: absolute;
    top: 14px;
    right: 12px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(217,119,6,.3);
}

/* ── Back button — elevated pill style ── */
.msm-esim-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 16px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.msm-esim-back-btn::before { content: none; }
.msm-esim-back-btn:hover {
    background: var(--bg3);
    color: var(--accent);
    box-shadow: none;
}

/* Paper badge on active exam */
.msm-exam-paper-badge {
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    text-align: center;
    letter-spacing: .2px;
    border-bottom: 1px solid #fcd34d;
    flex-shrink: 0;
}

/* ── UNEB MODAL ─────────────────────────────────────────────────────────── */
.msm-uneb-card {
    padding-bottom: 24px;
    max-height: calc(100% - 40px);
    overflow-y: auto;
}

.msm-uneb-header {
    text-align: center;
    margin-bottom: 20px;
}
.msm-uneb-badge-big {
    display: inline-block;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Level buttons */
.msm-uneb-level-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
    text-align: center;
}
.msm-uneb-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
@media (max-width: 360px) {
    .msm-uneb-levels { grid-template-columns: 1fr; }
}
.msm-uneb-level-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--bg2);
    cursor: pointer;
    font-family: var(--font);
    transition: all .16s;
    text-align: center;
}
.msm-uneb-level-btn:hover, .msm-uneb-level-btn.active {
    border-color: #d97706;
    background: rgba(251,191,36,.10);
    transform: translateY(-2px);
}
.msm-uneb-level-icon { display:flex; align-items:center; justify-content:center; font-size:0; }
.msm-uneb-level-name { font-size: 18px; font-weight: 800; color: var(--text); }
.msm-uneb-level-sub  { font-size: 12px; color: var(--text2); font-weight: 500; }

/* Step 2 header */
.msm-uneb-step2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 6px;
}
.msm-uneb-back-step {
    background: none;
    border: none;
    color: var(--text3);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: color .15s;
    padding: 0;
}
.msm-uneb-back-step:hover { color: var(--accent); }
.msm-uneb-selected-level {
    font-size: 13px;
    font-weight: 700;
    color: #d97706;
}

/* Subject list */
.msm-uneb-loading {
    text-align: center;
    color: var(--text3);
    font-size: 13px;
    padding: 20px 0;
}
.msm-uneb-empty {
    text-align: center;
    color: var(--text3);
    font-size: 13px;
    padding: 24px 0;
}
.msm-uneb-class-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text3);
    margin-bottom: 8px;
    margin-top: 12px;
}
.msm-uneb-subject-group { margin-bottom: 4px; }
.msm-uneb-subject-row   { margin-bottom: 6px; }
.msm-uneb-subject-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 11px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    cursor: pointer;
    font-family: var(--font);
    transition: all .15s;
    text-align: left;
}
.msm-uneb-subject-btn:hover, .msm-uneb-subject-btn.active {
    border-color: #d97706;
    background: rgba(251,191,36,.08);
}
.msm-uneb-subject-name  { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.msm-uneb-paper-count   { font-size: 11px; color: var(--text3); white-space: nowrap; }
.msm-uneb-chevron       { font-size: 18px; color: var(--text3); transition: transform .15s; }
.msm-uneb-subject-btn.active .msm-uneb-chevron { transform: rotate(90deg); color: #d97706; }

/* Paper grid */
.msm-uneb-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    margin: 14px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.msm-uneb-papers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.msm-uneb-paper-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 11px;
    border: 2px solid var(--border);
    background: var(--bg2);
    cursor: pointer;
    font-family: var(--font);
    transition: all .15s;
    min-width: 72px;
}
.msm-uneb-paper-btn:hover { border-color: #d97706; background: rgba(251,191,36,.08); }
.msm-uneb-paper-btn.active { border-color: #d97706; background: rgba(251,191,36,.15); }
.msm-uneb-paper-year { font-size: 18px; font-weight: 800; color: var(--text); }
.msm-uneb-paper-num  { font-size: 11px; color: var(--text3); }
.msm-uneb-paper-qs   { font-size: 12px; color: var(--text2); }

/* Timer row */
.msm-uneb-timer-row { margin-top: 14px; }

/* UNEB CTA */
.msm-uneb-cta {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    margin-top: 16px;
}
.msm-uneb-cta:not(:disabled):hover { opacity: .9; }

/* Dark mode */
.msm-app[data-theme="dark"] .msm-mode-btn {
    background: var(--surface);
    border-color: var(--border);
}
.msm-app[data-theme="dark"] .msm-mode-btn-uneb {
    background: var(--surface);
    border-color: rgba(217,119,6,.3);
}
.msm-app[data-theme="dark"] .msm-esim-back-btn {
    color: var(--text);
}
.msm-app[data-theme="dark"] .msm-uneb-level-btn,
.msm-app[data-theme="dark"] .msm-uneb-subject-btn,
.msm-app[data-theme="dark"] .msm-uneb-paper-btn { background: var(--bg2); border-color: var(--border); }
.msm-app[data-theme="dark"] .msm-exam-paper-badge { background: linear-gradient(90deg, #451a03, #78350f); color: #fde68a; border-color: #92400e; }


/* ── AI answer heading (Gemini markdown h2/h3 → h3 in chat) ─── */
.msm-ai-heading { font-size: 14px; font-weight: 700; margin: .6em 0 .25em; color: inherit; }


/* ── Auth welcome icon ─────────────────────────────────────────────────── */
.msm-auth-welcome-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--accent-bg); margin: 0 auto 8px;
    color: var(--accent);
}
.msm-app[data-theme="dark"] .msm-auth-welcome-icon {
    background: rgba(129,140,248,.15);
    color: var(--accent2);
}

/* ── Auth button spinner SVG ───────────────────────────────────────────── */
.msm-btn-spinner {
    animation: msm-spin .7s linear infinite;
    display: inline-block; vertical-align: middle;
}

/* ── Toast type icons ──────────────────────────────────────────────────── */
.msm-toast-icon {
    flex-shrink: 0; width: 20px; height: 20px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    margin-top: 1px;
}
/* Use inline SVG data URIs for each type — stroke matches toast colour */
.msm-toast-icon-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.msm-toast-icon-warn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2392400e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.msm-toast-icon-levelup {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b21a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
.msm-toast-icon-badge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235046e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
}
.msm-toast-icon-review {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230c4a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.msm-toast-icon-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
/* Dark mode variants */
.msm-app[data-theme="dark"] .msm-toast-icon-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.msm-app[data-theme="dark"] .msm-toast-icon-warn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.msm-app[data-theme="dark"] .msm-toast-icon-levelup {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d8b4fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
.msm-app[data-theme="dark"] .msm-toast-icon-badge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
}
.msm-app[data-theme="dark"] .msm-toast-icon-review {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.msm-app[data-theme="dark"] .msm-toast-icon-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* ── UNEB level icon (SVG) ─────────────────────────────────────────────── */
.msm-uneb-level-icon {
    display: flex !important; align-items: center; justify-content: center;
    margin-bottom: 8px; font-size: 0; /* suppress any text/emoji fallback */
}
.msm-uneb-level-icon svg {
    display: block;
    width: 28px; height: 28px;
    color: var(--accent);
    stroke: currentColor;
    transition: color .2s, stroke .2s;
}
/* Light mode default: accent colour */
.msm-app[data-theme="light"] .msm-uneb-level-icon svg { color: var(--accent); }
/* Dark mode default: bright indigo */
.msm-app[data-theme="dark"] .msm-uneb-level-icon svg { color: var(--accent2, #818cf8); }
/* Active / hover: always white so it pops on the coloured button bg */
.msm-uneb-level-btn.active .msm-uneb-level-icon svg,
.msm-uneb-level-btn:hover .msm-uneb-level-icon svg { color: #fff !important; }

.msm-welcome-logo {
    margin-bottom: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 16px rgba(26,111,232,.28));
}
.msm-welcome-svg-icon {
    color: var(--accent);
    width: 48px; height: 48px;
    transition: color .2s;
}
.msm-app[data-theme="dark"] .msm-welcome-svg-icon {
    color: var(--accent2);
    filter: drop-shadow(0 0 10px rgba(129,140,248,.35));
}
/* ══════════════════════════════════════════════════════════════════════════════
   v21 — SUBSCRIPTION UI
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Daily pill in gam-strip ────────────────────────────────────────────── */
.msm-daily-pill {
    font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;
    background:rgba(26,111,232,.12);color:var(--accent);border:1px solid rgba(26,111,232,.2);
    letter-spacing:.3px;cursor:default;flex-shrink:0;
}
.msm-daily-pill.msm-limit-near { background:rgba(232,112,42,.12);color:var(--accent-warm);border-color:rgba(232,112,42,.25); }
.msm-daily-pill.msm-limit-hit  { background:rgba(220,38,38,.12);color:#dc2626;border-color:rgba(220,38,38,.25); }

/* ── Lock badge on nav items ────────────────────────────────────────────── */
.msm-lock-badge {
    font-size:9px;margin-left:auto;opacity:.75;flex-shrink:0;
}

/* ── Upgrade Button (sidebar bottom) ────────────────────────────────────── */
.msm-upgrade-btn {
    display:flex;align-items:center;gap:8px;width:calc(100% - 20px);margin:8px 10px 10px;
    padding:10px 14px;border-radius:12px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#1a6fe8 0%,#7c3aed 60%,#a855f7 100%);
    color:#fff;font-family:var(--font);font-size:13px;font-weight:700;
    letter-spacing:-.2px;position:relative;overflow:hidden;
    box-shadow:0 4px 16px rgba(26,111,232,.35),0 1px 4px rgba(26,111,232,.2);
    transition:transform .15s,box-shadow .15s,opacity .15s;
}
.msm-upgrade-btn::before {
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);
    transform:translateX(-100%);transition:transform .5s ease;
}
.msm-upgrade-btn:hover::before { transform:translateX(100%); }
.msm-upgrade-btn:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(26,111,232,.45); }
.msm-upgrade-btn:active { transform:scale(.98);opacity:.9; }
.msm-upgrade-star { font-size:15px;flex-shrink:0;animation:msm-star-pulse 2.5s ease-in-out infinite; }
.msm-upgrade-text { flex:1;text-align:left; }
.msm-upgrade-arrow { font-size:14px;opacity:.8;flex-shrink:0; }

@keyframes msm-star-pulse {
    0%,100% { transform:scale(1) rotate(0deg); }
    50%      { transform:scale(1.2) rotate(15deg); }
}

/* ── Premium Active Badge (sidebar bottom) ──────────────────────────────── */
.msm-premium-active-badge {
    display:flex;align-items:center;gap:7px;margin:6px 10px 10px;
    padding:8px 12px;border-radius:10px;font-size:12px;font-weight:600;
    background:linear-gradient(135deg,rgba(26,111,232,.12),rgba(168,85,247,.12));
    border:1px solid rgba(26,111,232,.2);color:var(--accent);
}
.msm-expiry-tag {
    margin-left:auto;font-size:10px;background:rgba(232,112,42,.15);
    color:var(--accent-warm);padding:2px 7px;border-radius:10px;font-weight:700;
}

/* ── Expiry Notification Strip ───────────────────────────────────────────── */
.msm-expiry-strip {
    display:flex;align-items:center;gap:10px;
    padding:9px 18px;background:linear-gradient(90deg,rgba(232,112,42,.1),rgba(26,111,232,.08));
    border-bottom:1px solid rgba(232,112,42,.2);flex-shrink:0;
    animation:msm-strip-in .3s ease;
}
@keyframes msm-strip-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.msm-expiry-strip-icon { font-size:15px;flex-shrink:0; }
.msm-expiry-strip-text { flex:1;font-size:12.5px;color:var(--text2);line-height:1.4; }
.msm-expiry-strip-text strong { color:var(--accent-warm); }
.msm-expiry-strip-cta {
    flex-shrink:0;padding:5px 14px;border-radius:8px;border:none;cursor:pointer;
    background:var(--accent-warm);color:#fff;font-size:12px;font-weight:700;
    font-family:var(--font);transition:opacity .15s,transform .15s;
}
.msm-expiry-strip-cta:hover { opacity:.88;transform:scale(1.02); }
.msm-expiry-strip-close {
    flex-shrink:0;background:none;border:none;cursor:pointer;
    color:var(--text3);font-size:13px;padding:4px 6px;border-radius:6px;
    transition:background .15s;
}
.msm-expiry-strip-close:hover { background:var(--bg3); }

/* ── Plans Modal Overlay ─────────────────────────────────────────────────── */
.msm-plans-overlay {
    position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
    justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
    padding:16px;overflow-y:auto;
}
.msm-plans-modal {
    background:var(--surface);border:1px solid var(--border);border-radius:20px;
    width:100%;max-width:900px;padding:28px 24px 24px;position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.25);animation:msm-modal-in .25s cubic-bezier(.34,1.56,.64,1);
    max-height:90vh;overflow-y:auto;
}
@keyframes msm-modal-in {
    from { opacity:0;transform:scale(.92) translateY(12px); }
    to   { opacity:1;transform:none; }
}
.msm-plans-close {
    position:absolute;top:16px;right:16px;background:var(--bg2);border:1px solid var(--border);
    border-radius:8px;width:32px;height:32px;display:flex;align-items:center;
    justify-content:center;cursor:pointer;color:var(--text2);font-size:14px;
    font-family:var(--font);transition:background .15s;z-index:1;
}
.msm-plans-close:hover { background:var(--bg3); }

.msm-plans-header { text-align:center;margin-bottom:24px; }
.msm-plans-logo { font-size:36px;margin-bottom:8px;animation:msm-star-pulse 2.5s ease-in-out infinite; }
.msm-plans-title { font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.5px;margin-bottom:6px; }
.msm-plans-sub { font-size:13.5px;color:var(--text2); }

.msm-plans-cards {
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px;
}
/* Teacher accounts: float Teacher Mode card to the front */
.msm-plans-cards[data-teacher-user="1"] .msm-plan-teacher { order:-1; border-color:#9333ea; box-shadow:0 0 0 3px rgba(147,51,234,.15); }
.msm-plans-cards[data-teacher-user="1"] .msm-plan-premium { order:0; }
.msm-plans-cards[data-teacher-user="1"] .msm-plan-basic   { order:1; }
.msm-plan-card {
    border-radius:16px;padding:20px 18px;position:relative;
    border:2px solid var(--border);background:var(--surface2);
    transition:border-color .2s,transform .15s;
}
.msm-plan-card:hover { transform:translateY(-2px); }
.msm-plan-basic { border-color:var(--border); }
.msm-plan-premium {
    border-color:var(--accent);
    background:linear-gradient(160deg,rgba(26,111,232,.05) 0%,rgba(168,85,247,.06) 100%);
}
.msm-plan-teacher {
    border-color:#9333ea;
    background:linear-gradient(160deg,rgba(147,51,234,.05) 0%,rgba(124,58,237,.08) 100%);
}
.msm-plan-badge {
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;
    text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:12px;
    background:var(--bg3);color:var(--text3);border:1px solid var(--border);
}
.msm-badge-premium {
    background:linear-gradient(90deg,#1a6fe8,#a855f7);color:#fff;border:none;
}
.msm-badge-teacher {
    background:linear-gradient(90deg,#7c3aed,#9333ea);color:#fff;border:none;
}
.msm-plan-name { font-size:18px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.3px; }
.msm-plan-price-wrap { display:flex;align-items:baseline;gap:4px;margin-bottom:14px; }
.msm-plan-price-free { font-size:26px;font-weight:800;color:var(--text); }
.msm-plan-price { font-size:26px;font-weight:800;color:var(--accent); }
.msm-plan-price-cur { font-size:13px;font-weight:700;color:var(--accent);opacity:.8; }
.msm-plan-price-period { font-size:12px;color:var(--text3); }
.msm-plan-features {
    list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:18px;
}
.msm-plan-features li { font-size:12.5px;display:flex;align-items:center;gap:7px; }
.msm-feat-yes { color:var(--text2); }
.msm-feat-no  { color:var(--text3);opacity:.6; }
.msm-feat-premium { color:var(--accent);font-weight:600; }
.msm-feat-locked { color:var(--text3);opacity:.5;font-style:normal; }
.msm-feat-teacher-only { color:#9333ea;opacity:.65;font-size:11.5px; }
.msm-plan-current-tag {
    text-align:center;font-size:11.5px;color:var(--text3);
    padding:8px;background:var(--bg3);border-radius:8px;
}

.msm-plan-cta {
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:12px 16px;border-radius:12px;border:none;cursor:pointer;
    font-size:13.5px;font-weight:700;letter-spacing:-.2px;font-family:var(--font);
    transition:transform .15s,box-shadow .15s,opacity .15s;text-decoration:none;
    position:relative;overflow:hidden;
}
.msm-cta-trial {
    background:linear-gradient(135deg,#1a6fe8 0%,#7c3aed 60%,#a855f7 100%);color:#fff;
    box-shadow:0 4px 16px rgba(26,111,232,.35);
}
.msm-cta-trial:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,111,232,.45); }
.msm-cta-pay {
    background:var(--bg3);color:var(--text);border:1.5px solid var(--border);
    font-size:12.5px;
}
.msm-cta-pay:hover { background:var(--accent);color:#fff;border-color:var(--accent); }
.msm-cta-teacher {
    background:linear-gradient(135deg,#7c3aed 0%,#9333ea 100%);color:#fff;
    box-shadow:0 4px 16px rgba(124,58,237,.35);font-size:12px;
}
.msm-cta-teacher:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.45); }
.msm-cta-login {
    background:var(--accent);color:#fff;
    box-shadow:0 3px 12px rgba(26,111,232,.3);
}
.msm-cta-login:hover { opacity:.9;transform:translateY(-1px); }
.msm-cta-icon { font-size:16px;flex-shrink:0; }
.msm-plan-trial-note { font-size:10.5px;color:var(--text3);text-align:center;margin-top:8px; }
.msm-plans-divider {
    display:flex;align-items:center;gap:10px;margin:10px 0;
    color:var(--text3);font-size:11px;
}
.msm-plans-divider::before,.msm-plans-divider::after {
    content:'';flex:1;height:1px;background:var(--border);
}
.msm-plans-spinner {
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:13px;color:var(--accent);padding:10px;
}
.msm-plans-msg { margin-top:10px;text-align:center;font-size:13px; }
.msm-plans-msg.success { color:#16a34a; }
.msm-plans-msg.error   { color:#dc2626; }
.msm-plans-footer-note {
    text-align:center;font-size:11px;color:var(--text3);margin-top:6px;line-height:1.5;
}
/* Teacher bridge — shown below plans modal cards for educators */
.msm-plans-teacher-bridge {
    text-align:center;font-size:13.5px;color:var(--text2);
    margin:14px 0 4px;padding:12px 16px;
    background:linear-gradient(135deg,rgba(168,85,247,.07),rgba(124,58,237,.10));
    border:1.5px solid rgba(168,85,247,.25);border-radius:10px;
    font-weight:500;
}
.msm-plans-teacher-bridge a {
    color:#9333ea;font-weight:700;text-decoration:none;
    display:inline-flex;align-items:center;gap:3px;
}
.msm-plans-teacher-bridge a:hover { text-decoration:underline; }
/* Teacher panel expiry warning banner */
.msm-teacher-expiry-banner {
    background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;
    padding:10px 14px;margin-bottom:14px;font-size:13px;color:#92400e;
    display:flex;align-items:center;gap:10px;
}
.msm-teacher-expiry-banner a {
    color:#b45309;font-weight:600;text-decoration:underline;
}

/* ── Gate Modal ──────────────────────────────────────────────────────────── */
.msm-gate-overlay {
    position:fixed;inset:0;z-index:1100;display:flex;align-items:center;
    justify-content:center;padding:20px;background:rgba(0,0,0,.52);backdrop-filter:blur(5px);
}
.msm-gate-modal {
    background:var(--surface);border:1px solid var(--border);border-radius:22px;
    width:100%;max-width:360px;padding:24px 20px 20px;position:relative;
    box-shadow:0 20px 56px rgba(0,0,0,.26);text-align:center;
    animation:msm-modal-in .28s cubic-bezier(.34,1.56,.64,1);
    overflow-y:auto;overflow-x:hidden;max-height:90vh;
}
/* Gradient stripe across top edge */
.msm-gate-modal::before {
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,#1a6fe8,#7c3aed,#a855f7,#ec4899);
}
.msm-gate-close {
    position:absolute;top:14px;right:14px;background:var(--bg2);border:1px solid var(--border);
    border-radius:8px;width:30px;height:30px;display:flex;align-items:center;
    justify-content:center;cursor:pointer;color:var(--text2);font-family:var(--font);
    transition:background .15s;z-index:1;
}
.msm-gate-close:hover { background:var(--bg3); }

/* Icon — glowing float circle */
.msm-gate-icon-wrap {
    width:72px;height:72px;border-radius:50%;margin:4px auto 10px;
    background:linear-gradient(135deg,rgba(26,111,232,.11),rgba(168,85,247,.16));
    border:1.5px solid rgba(26,111,232,.18);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 7px rgba(26,111,232,.05);
    animation:msm-gate-float 3.2s ease-in-out infinite;
}
.msm-gate-icon { font-size:32px;line-height:1; }
@keyframes msm-gate-float {
    0%,100% { transform:translateY(0);  box-shadow:0 0 0 7px rgba(26,111,232,.05); }
    50%      { transform:translateY(-6px);box-shadow:0 10px 26px rgba(26,111,232,.13),0 0 0 7px rgba(26,111,232,.08); }
}

/* "MYSOMERO PREMIUM" badge pill */
.msm-gate-badge-label {
    display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1.3px;
    color:var(--accent);background:rgba(26,111,232,.1);border:1px solid rgba(26,111,232,.2);
    border-radius:20px;padding:3px 11px;margin-bottom:9px;text-transform:uppercase;
}
.msm-gate-title { font-size:17px;font-weight:800;color:var(--text);margin-bottom:5px;letter-spacing:-.4px; }
.msm-gate-sub   { font-size:12.5px;color:var(--text2);margin-bottom:16px;line-height:1.55; }

/* Feature list */
.msm-gate-features {
    display:flex;flex-direction:column;margin-bottom:18px;
    background:var(--bg2);border:1px solid var(--border);border-radius:13px;
    overflow:hidden;text-align:left;
}
.msm-gate-feat-row {
    display:flex;align-items:center;gap:10px;padding:9px 12px;
    border-bottom:1px solid var(--border);transition:background .12s;
}
.msm-gate-feat-row:last-child { border-bottom:none; }
.msm-gate-feat-row:hover { background:var(--bg3); }
.msm-gate-feat-row.msm-gate-feat-section-label {
    display:block;padding:7px 12px 4px;background:var(--bg3);
    border-bottom:1px solid var(--border);cursor:default;
}
.msm-gate-feat-row.msm-gate-feat-section-label:hover { background:var(--bg3); }
.msm-gate-feat-icon {
    width:28px;height:28px;border-radius:7px;display:flex;align-items:center;
    justify-content:center;font-size:14px;flex-shrink:0;
}
.msm-gate-feat-name { flex:1;font-size:12.5px;font-weight:600;color:var(--text); }
.msm-gate-feat-check {
    width:20px;height:20px;border-radius:50%;
    background:#dcfce7;border:1.5px solid #86efac;color:#16a34a;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* CTA button */
.msm-gate-cta {
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:13px 20px;border-radius:12px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#1a6fe8 0%,#7c3aed 60%,#a855f7 100%);
    color:#fff;font-size:14px;font-weight:700;font-family:var(--font);
    box-shadow:0 4px 16px rgba(26,111,232,.35);
    transition:transform .15s,box-shadow .15s;margin-bottom:10px;
}
.msm-gate-cta:hover { transform:translateY(-2px);box-shadow:0 6px 24px rgba(26,111,232,.48); }
.msm-gate-note { font-size:11px;color:var(--text3); }

/* ── Daily Limit Hit Message (in chat) ───────────────────────────────────── */
.msm-limit-msg {
    display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:28px 20px;text-align:center;
    background:linear-gradient(135deg,rgba(26,111,232,.06),rgba(168,85,247,.06));
    border:1.5px dashed rgba(26,111,232,.25);border-radius:16px;margin:10px 0;
}
.msm-limit-msg-icon { font-size:36px; }
.msm-limit-msg-title { font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.3px; }
.msm-limit-msg-sub { font-size:13px;color:var(--text2);line-height:1.5;max-width:300px; }
.msm-limit-upgrade-btn {
    padding:10px 24px;border-radius:10px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#1a6fe8,#a855f7);color:#fff;
    font-size:13.5px;font-weight:700;font-family:var(--font);
    box-shadow:0 3px 12px rgba(26,111,232,.3);
    transition:transform .15s,opacity .15s;
}
.msm-limit-upgrade-btn:hover { transform:translateY(-1px);opacity:.92; }

/* ── Mobile: More tray premium items ────────────────────────────────────── */
.msm-more-tray-item .msm-tray-lock {
    position:absolute;top:6px;right:6px;font-size:10px;
    background:rgba(26,111,232,.15);color:var(--accent);
    padding:1px 5px;border-radius:8px;font-weight:700;
}

/* ── Mobile: upgrade btn in More tray ────────────────────────────────────── */
.msm-more-tray-upgrade {
    grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 16px;border-radius:12px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#1a6fe8 0%,#a855f7 100%);
    color:#fff;font-size:13px;font-weight:700;font-family:var(--font);
    box-shadow:0 3px 12px rgba(26,111,232,.3);
    transition:transform .15s,opacity .15s;margin-top:4px;
}
.msm-more-tray-upgrade:hover { transform:translateY(-1px);opacity:.92; }

/* ── Responsive adjustments ──────────────────────────────────────────────── */
@media (max-width: 860px) {
    .msm-plans-cards { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
    .msm-plans-cards { grid-template-columns:1fr; }
    .msm-plans-modal { padding:22px 16px 20px;border-radius:16px; }
    .msm-plan-card { padding:16px 14px; }
    .msm-expiry-strip { flex-wrap:wrap;gap:7px;padding:10px 14px; }
    .msm-expiry-strip-text { width:100%; }
}

/* ── Daily Limit Wall Card (v22) ─────────────────────────────────────────── */
.msm-limit-wall {
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:30px 22px 24px;text-align:center;
    background:linear-gradient(135deg,rgba(26,111,232,.07) 0%,rgba(168,85,247,.07) 100%);
    border:1.5px solid rgba(26,111,232,.2);border-radius:18px;margin:8px 0;
    box-shadow:0 4px 20px rgba(26,111,232,.08);
}
.msm-limit-wall-icon { font-size:40px;line-height:1; }
.msm-limit-wall-badge {
    display:inline-block;padding:3px 12px;border-radius:20px;
    background:linear-gradient(135deg,#1a6fe8,#a855f7);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.msm-limit-wall-title { font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.3px;line-height:1.3;max-width:280px; }
.msm-limit-wall-sub { font-size:13px;color:var(--text2);line-height:1.55;max-width:300px; }
.msm-limit-wall-perks {
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
}
.msm-limit-wall-perks span {
    padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600;
    background:rgba(26,111,232,.09);color:#1a6fe8;border:1px solid rgba(26,111,232,.15);
}
.msm-limit-wall-cta {
    display:flex;align-items:center;gap:8px;
    padding:12px 28px;border-radius:12px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#1a6fe8,#a855f7);color:#fff;
    font-size:14px;font-weight:700;font-family:var(--font);
    box-shadow:0 4px 14px rgba(26,111,232,.35);
    transition:transform .15s,box-shadow .15s;
}
.msm-limit-wall-cta:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,111,232,.4); }
.msm-limit-wall-note { font-size:11px;color:var(--text3); }

/* ── Math Solver Gate Card (in-chat, SaaS-style) ─────────────────────────── */
.msm-math-gate-card {
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:28px 22px 22px;text-align:center;
    background:linear-gradient(135deg,rgba(22,163,74,.06) 0%,rgba(26,111,232,.06) 100%);
    border:1.5px solid rgba(22,163,74,.25);border-radius:18px;margin:8px 0;
    box-shadow:0 4px 18px rgba(22,163,74,.08);
}
.msm-math-gate-icon { font-size:42px;line-height:1; }
.msm-math-gate-label {
    display:inline-block;padding:3px 12px;border-radius:20px;
    background:linear-gradient(135deg,#16a34a,#1a6fe8);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.msm-math-gate-title { font-size:15.5px;font-weight:800;color:var(--text);letter-spacing:-.3px;line-height:1.3;max-width:290px; }
.msm-math-gate-sub { font-size:13px;color:var(--text2);line-height:1.55;max-width:300px; }
.msm-math-gate-perks {
    display:flex;flex-direction:column;align-items:flex-start;gap:5px;
    background:rgba(22,163,74,.06);border-radius:10px;padding:12px 16px;width:100%;max-width:270px;
}
.msm-math-gate-perks span { font-size:12.5px;color:var(--text);font-weight:600; }
.msm-math-gate-cta {
    padding:12px 26px;border-radius:12px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#16a34a,#1a6fe8);color:#fff;
    font-size:13.5px;font-weight:700;font-family:var(--font);
    box-shadow:0 4px 14px rgba(22,163,74,.3);
    transition:transform .15s,box-shadow .15s;
}
.msm-math-gate-cta:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,163,74,.4); }
.msm-math-gate-note { font-size:11px;color:var(--text3); }

/* ═══════════════════════════════════════════════════════════════════════════
   v23 NEW COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline Note Expansion Panel (related-chip click) ───────────────────── */
.msm-related-chip {
    position: relative;
}
.msm-related-chip--loading::after {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid rgba(26,111,232,.25);
    border-top-color: #1a6fe8;
    border-radius: 50%;
    animation: msm-spin .6s linear infinite;
    margin-left: 6px;
    vertical-align: -2px;
}
.msm-related-chip--open {
    background: rgba(26,111,232,.15);
    border-color: rgba(26,111,232,.4);
    color: #1a6fe8;
}
.msm-note-panel {
    width: 100%;
    margin: 4px 0 8px;
    border-radius: 12px;
    border: 1.5px solid rgba(26,111,232,.18);
    background: var(--surface, #1e1e2e);
    overflow: hidden;
}
.msm-note-panel-inner {
    padding: 14px 16px;
}
.msm-note-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.msm-note-panel-breadcrumb {
    font-size: 11px;
    color: var(--text3, #64748b);
    font-weight: 600;
    letter-spacing: .2px;
}
.msm-note-panel-close {
    background: none; border: none; cursor: pointer;
    color: var(--text3, #64748b); font-size: 13px; padding: 2px 4px;
    border-radius: 4px; line-height: 1;
    transition: color .15s;
}
.msm-note-panel-close:hover { color: var(--text, #e2e8f0); }
.msm-note-panel-title {
    font-size: 14px; font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 10px;
}
.msm-note-panel-img {
    width: 100%; max-width: 480px;
    border-radius: 8px; margin-bottom: 12px;
    display: block;
}
.msm-note-panel-body {
    font-size: 13.5px;
    color: var(--text2, #94a3b8);
    line-height: 1.65;
}
.msm-note-panel-body p  { margin: 0 0 8px; }
.msm-note-panel-body ul,
.msm-note-panel-body ol { padding-left: 18px; margin: 0 0 8px; }
.msm-note-panel-body h3 { font-size: 13px; font-weight: 700; margin: 10px 0 4px; color: var(--text, #e2e8f0); }
.msm-note-panel-err {
    font-size: 12.5px; color: #f87171;
    padding: 10px 14px; margin: 0;
}

/* ── Guest Signup Wall Modal ─────────────────────────────────────────────── */
.msm-signup-wall {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
    animation: msm-fadein .2s ease;
}
.msm-signup-card {
    background: var(--surface);
    border: 1.5px solid rgba(26,111,232,.2);
    border-radius: 22px;
    padding: 32px 28px 26px;
    max-width: 356px; width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.msm-signup-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(26,111,232,.15), rgba(168,85,247,.15));
    color: #7c6af7;
    margin-bottom: 14px;
}
.msm-signup-icon .msm-svg-icon { width: 28px; height: 28px; }
.msm-signup-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: #7c6af7;
    margin: 0 0 8px;
}
.msm-signup-title {
    font-size: 20px; font-weight: 800;
    color: var(--text);
    letter-spacing: -.5px; line-height: 1.2;
    margin: 0 0 9px;
}
.msm-signup-sub {
    font-size: 13.5px; color: var(--text2);
    line-height: 1.55; margin: 0 0 18px;
}
.msm-signup-perks {
    text-align: left;
    background: rgba(26,111,232,.06);
    border: 1px solid rgba(26,111,232,.1);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex; flex-direction: column; gap: 7px;
}
.msm-signup-perk {
    font-size: 12.5px; color: var(--text);
    font-weight: 600;
}
.msm-signup-cta {
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #1a6fe8, #a855f7);
    color: #fff; font-size: 15px; font-weight: 700;
    font-family: var(--font);
    box-shadow: 0 4px 18px rgba(26,111,232,.4);
    transition: transform .15s, box-shadow .15s;
    margin-bottom: 12px;
}
.msm-signup-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(26,111,232,.5); }
.msm-signup-login {
    font-size: 12.5px; color: var(--text3);
}
.msm-signup-login a {
    color: #7c6af7; text-decoration: none; font-weight: 600;
}
.msm-signup-login a:hover { text-decoration: underline; }

/* ── Onboarding: grouped level labels ───────────────────────────────────── */
.msm-onboard-level-label {
    font-size: 11px; font-weight: 700;
    color: var(--text3, #64748b);
    letter-spacing: .5px; text-transform: uppercase;
    margin: 0 0 6px 2px;
}
.msm-onboard-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.msm-ob-pill-label {
    display: block;
}

/* ── Exam: Review Tabs ───────────────────────────────────────────────────── */
/* ── Exam: Review Tabs ─────────────────────────────────────────────────── */
.msm-review-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 16px 0;
    border-bottom: 2px solid rgba(255,255,255,.07);
    flex-wrap: wrap;
}
.msm-review-tab {
    padding: 8px 18px;
    border-radius: 12px 12px 0 0;
    border: 1.5px solid transparent;
    background: rgba(255,255,255,.03);
    color: var(--text2, #94a3b8);
    font-size: 13px; font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
    position: relative; bottom: -2px;
    letter-spacing: .1px;
}
.msm-review-tab:hover {
    color: var(--text, #e2e8f0);
    background: rgba(26,111,232,.08);
    border-color: rgba(26,111,232,.2) rgba(26,111,232,.2) transparent;
}
.msm-review-tab--active {
    color: #e2e8f0;
    background: var(--surface, #1e1e2e);
    border-color: rgba(255,255,255,.1) rgba(255,255,255,.1) var(--surface, #1e1e2e);
    box-shadow: 0 -2px 8px rgba(26,111,232,.12);
}
.msm-review-tab--disabled { opacity: .32; cursor: not-allowed; pointer-events: none; }
.msm-wrong-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 800;
    border-radius: 10px; padding: 1px 7px;
    margin-left: 5px; vertical-align: 1px;
    min-width: 18px;
}
.msm-tab-panel { padding: 16px 0; }

/* ── Exam: Drill Mode Card ──────────────────────────────────────────────── */
.msm-drill-card {
    background: var(--surface, #1e1e2e);
    border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 20px;
    padding: 26px 22px 20px;
    margin: 10px 0 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    position: relative;
    overflow: hidden;
}
.msm-drill-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1a6fe8, #7c3aed);
    border-radius: 20px 20px 0 0;
}
.msm-drill-progress {
    font-size: 11px; color: var(--text3, #64748b);
    font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.msm-drill-progress::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,.07);
}
.msm-drill-difficulty {
    font-size: 10.5px; font-weight: 800;
    margin-bottom: 12px;
    display: inline-block;
    padding: 3px 10px; border-radius: 20px;
    background: rgba(255,255,255,.06);
    color: var(--text3, #94a3b8);
    letter-spacing: .3px; text-transform: uppercase;
}
.msm-drill-question {
    font-size: 16px; font-weight: 700;
    color: var(--text, #e2e8f0);
    line-height: 1.5; margin-bottom: 18px;
}
.msm-drill-flip-wrap { margin-top: 6px; }
.msm-drill-section-label {
    font-size: 10px; font-weight: 800;
    color: var(--text3, #64748b);
    text-transform: uppercase; letter-spacing: .7px;
    margin-bottom: 5px;
}
.msm-drill-your {
    font-size: 13.5px; color: #fca5a5;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 10px; padding: 10px 14px;
    margin-bottom: 4px; line-height: 1.45;
}
.msm-drill-correct {
    font-size: 13.5px; color: #86efac;
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.2);
    border-radius: 10px; padding: 10px 14px;
    line-height: 1.45;
}
.msm-drill-explanation {
    font-size: 12.5px; color: var(--text2, #94a3b8);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: 10px 14px;
    margin-top: 8px; line-height: 1.6;
    font-style: italic;
}
.msm-drill-verdict {
    display: flex; gap: 10px;
    margin-top: 18px; flex-wrap: wrap;
}
.msm-drill-btn {
    flex: 1; min-width: 130px;
    padding: 12px 16px;
    border-radius: 12px; cursor: pointer;
    font-size: 13.5px; font-weight: 800;
    font-family: var(--font);
    transition: transform .14s, box-shadow .14s, opacity .14s;
    letter-spacing: .1px;
}
.msm-drill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.msm-drill-btn:active { transform: translateY(0); }
.msm-drill-got-it {
    background: rgba(74,222,128,.15); color: #4ade80;
    border: 1.5px solid rgba(74,222,128,.35);
}
.msm-drill-missed {
    background: rgba(239,68,68,.12); color: #f87171;
    border: 1.5px solid rgba(239,68,68,.3);
}
.msm-drill-actions {
    display: flex; gap: 10px; align-items: center;
    margin-top: 16px; flex-wrap: wrap;
}
.msm-drill-show-btn {
    padding: 10px 24px;
    border-radius: 12px;
    border: 1.5px solid rgba(26,111,232,.45);
    background: rgba(26,111,232,.14); color: #93c5fd;
    font-size: 13px; font-weight: 800;
    font-family: var(--font); cursor: pointer;
    transition: background .15s, transform .14s;
    letter-spacing: .1px;
}
.msm-drill-show-btn:hover {
    background: rgba(26,111,232,.25);
    transform: translateY(-1px);
}
.msm-drill-ask-ai {
    padding: 9px 18px;
    border-radius: 20px;
    background: rgba(124,58,237,.14);
    border: 1.5px solid rgba(167,139,250,.35);
    color: #c4b5fd; font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: var(--font);
    transition: background .15s, transform .14s;
}
.msm-drill-ask-ai:hover {
    background: rgba(124,58,237,.25);
    transform: translateY(-1px);
}
.msm-drill-done {
    text-align: center; padding: 36px 16px 28px;
}
.msm-drill-done-icon { font-size: 54px; margin-bottom: 14px; }
.msm-drill-done h4 {
    font-size: 20px; font-weight: 900;
    color: var(--text, #e2e8f0); margin: 0 0 8px;
    letter-spacing: -.3px;
}
.msm-drill-done p {
    font-size: 14px; color: var(--text2, #94a3b8);
    line-height: 1.6; margin-bottom: 22px;
}

/* =============================================================================
   v24 — Parent / Child account linking
   ============================================================================= */

/* ── Role toggle (Student / Parent) ──────────────────────────────────────── */
.msm-role-toggle {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.msm-role-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(148,163,184,.25);
    background: rgba(30,27,60,.4);
    color: var(--text2, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.msm-role-btn:hover {
    border-color: rgba(139,92,246,.5);
    color: var(--text, #e2e8f0);
}
.msm-role-btn--active {
    border-color: rgba(139,92,246,.75);
    background: rgba(139,92,246,.15);
    color: #c4b5fd;
}

/* ── Child-setup step 2 (inside auth card) ───────────────────────────────── */
#msm-parent-child-setup-view {
    padding: 8px 0;
}
.msm-child-decision {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.msm-child-skip-btn {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1.5px solid rgba(148,163,184,.2);
    background: transparent;
    color: var(--text2, #94a3b8);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.msm-child-skip-btn:hover {
    color: var(--text, #e2e8f0);
    border-color: rgba(148,163,184,.4);
}
.msm-child-form-inner {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msm-child-link-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text2, #94a3b8);
    cursor: pointer;
    margin-top: 4px;
}
.msm-child-link-toggle-label input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #8b5cf6;
    cursor: pointer;
    flex-shrink: 0;
}
.msm-field-hint {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--text2, #94a3b8);
    line-height: 1.5;
}

/* ── Parent dashboard banner ─────────────────────────────────────────────── */
.msm-parent-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(139,92,246,.08);
    border: 1.5px solid rgba(139,92,246,.2);
    border-radius: 12px;
    margin: 10px 14px 0;
    font-family: var(--font);
}
.msm-parent-banner--empty {
    border-color: rgba(251,191,36,.25);
    background: rgba(251,191,36,.06);
}
.msm-parent-banner-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.msm-parent-banner-body {
    flex: 1;
    min-width: 0;
}
.msm-parent-banner-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin-bottom: 2px;
}
.msm-parent-banner-body span {
    font-size: 12px;
    color: var(--text2, #94a3b8);
    line-height: 1.4;
}
.msm-parent-banner-cta {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 8px;
    background: rgba(139,92,246,.2);
    border: 1.5px solid rgba(139,92,246,.4);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.msm-parent-banner-cta:hover {
    background: rgba(139,92,246,.35);
}

/* ── Add-child modal ─────────────────────────────────────────────────────── */
/* ── Modal overlays (centred card, original behaviour) ──────────────────── */
.msm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.msm-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface, #1e1b3c);
    border: 1.5px solid rgba(139,92,246,.25);
    border-radius: 18px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.msm-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text2, #94a3b8);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.msm-modal-close:hover {
    color: var(--text, #e2e8f0);
    background: rgba(148,163,184,.1);
}
body.msm-modal-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   v25 — PARENT MANAGEMENT SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── User dropdown additions ── */
.msm-user-dropdown-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text2, #94a3b8);
    padding: 6px 14px 2px;
    opacity: .7;
}
.msm-user-dropdown-item--highlight {
    color: #c4b5fd;
    font-weight: 600;
}
.msm-user-dropdown-link-code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 10px;
    padding: 8px 12px;
    background: rgba(139,92,246,.12);
    border: 1.5px solid rgba(139,92,246,.3);
    border-radius: 10px;
    cursor: default;
}
.msm-link-code-value {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #c4b5fd;
    letter-spacing: .12em;
    flex: 1;
}
.msm-link-code-copy {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: .8;
    transition: opacity .15s;
}
.msm-link-code-copy:hover { opacity: 1; }
.msm-link-code-hint {
    font-size: 11px;
    color: var(--text2, #94a3b8);
    margin: 2px 14px 8px;
    line-height: 1.4;
}

/* ── Parent banner pills ── */
.msm-parent-banner-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.msm-parent-child-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.msm-parent-child-pill em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    opacity: .85;
}
.msm-pill--premium {
    background: rgba(139,92,246,.2);
    color: #c4b5fd;
    border: 1px solid rgba(139,92,246,.35);
}
.msm-pill--basic {
    background: rgba(148,163,184,.12);
    color: var(--text2, #94a3b8);
    border: 1px solid rgba(148,163,184,.2);
}
.msm-pill--more {
    background: rgba(251,191,36,.1);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.25);
}

/* ── Manage Children modal card ── */
.msm-manage-children-card {
    padding: 0 !important;
    overflow: hidden;
}
.msm-child-progress-card {
    max-width: 440px;
}
.msm-mch-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(148,163,184,.1);
}
.msm-mch-header-icon { font-size: 28px; line-height: 1; }
.msm-mch-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 2px;
}
.msm-mch-sub {
    font-size: 12px;
    color: var(--text2, #94a3b8);
    margin: 0;
}
/* Tab bar */
.msm-mch-tabs {
    display: flex;
    border-bottom: 1px solid rgba(148,163,184,.12);
    padding: 0 16px;
    gap: 4px;
}
.msm-mch-tab {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2, #94a3b8);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    font-family: var(--font);
    white-space: nowrap;
}
.msm-mch-tab--active {
    color: #c4b5fd;
    border-bottom-color: #8b5cf6;
}
.msm-mch-tab:hover:not(.msm-mch-tab--active) { color: var(--text, #e2e8f0); }
/* Panels */
.msm-mch-panel {
    padding: 16px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.msm-mch-loading {
    text-align: center;
    padding: 24px;
    color: var(--text2, #94a3b8);
    font-size: 13px;
}
.msm-mch-msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    background: rgba(34,197,94,.1);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,.2);
}
.msm-mch-msg--error {
    background: rgba(239,68,68,.1);
    color: #f87171;
    border-color: rgba(239,68,68,.2);
}

/* ── Child card in the list ── */
.msm-child-card {
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(148,163,184,.12);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .15s;
}
.msm-child-card:hover { border-color: rgba(139,92,246,.3); }
.msm-child-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 10px;
}
.msm-child-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.msm-child-info { flex: 1; min-width: 0; }
.msm-child-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msm-child-meta {
    font-size: 11px;
    color: var(--text2, #94a3b8);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.msm-child-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}
.msm-badge--premium { background: rgba(139,92,246,.2); color: #c4b5fd; }
.msm-badge--trial   { background: rgba(251,191,36,.15); color: #fbbf24; }
.msm-badge--basic   { background: rgba(148,163,184,.12); color: var(--text2,#94a3b8); }
.msm-badge--none    { background: rgba(239,68,68,.1); color: #f87171; }
/* Action buttons row */
.msm-child-card-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(148,163,184,.1);
}
.msm-child-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    background: none;
    border: none;
    border-right: 1px solid rgba(148,163,184,.1);
    color: var(--text2, #94a3b8);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.2;
    text-align: center;
}
.msm-child-action-btn:last-child { border-right: none; }
.msm-child-action-btn:hover { background: rgba(148,163,184,.07); color: var(--text, #e2e8f0); }
.msm-child-action-btn--primary { color: #c4b5fd; }
.msm-child-action-btn--primary:hover { background: rgba(139,92,246,.1); }
.msm-child-action-btn--danger:hover { background: rgba(239,68,68,.08); color: #f87171; }
.msm-child-action-icon { font-size: 16px; line-height: 1; }
/* Login required notice on a card */
.msm-child-no-login-notice {
    margin: 0 12px 12px;
    padding: 8px 12px;
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.2);
    border-radius: 8px;
    font-size: 11px;
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.msm-child-create-login-btn {
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.3);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    transition: background .15s;
}
.msm-child-create-login-btn:hover { background: rgba(251,191,36,.25); }
/* No children empty state */
.msm-mch-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text2, #94a3b8);
}
.msm-mch-empty-icon { font-size: 40px; margin-bottom: 10px; }
.msm-mch-empty h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 6px;
}
.msm-mch-empty p { font-size: 12px; margin: 0; line-height: 1.5; }

/* ── Child progress view ── */
.msm-cp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148,163,184,.1);
}
.msm-cp-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.msm-cp-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 2px;
}
.msm-cp-level {
    font-size: 12px;
    color: var(--text2, #94a3b8);
}
.msm-cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.msm-cp-stat {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.msm-cp-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text, #e2e8f0);
    line-height: 1;
    margin-bottom: 3px;
}
.msm-cp-stat-label {
    font-size: 10px;
    color: var(--text2, #94a3b8);
    line-height: 1.3;
}
.msm-cp-section {
    margin-bottom: 14px;
}
.msm-cp-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text2, #94a3b8);
    margin-bottom: 8px;
}
.msm-cp-sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(148,163,184,.12);
    border-radius: 10px;
    margin-bottom: 8px;
}
.msm-cp-sub-status {
    font-size: 13px;
    font-weight: 700;
}
.msm-cp-sub-expires {
    font-size: 11px;
    color: var(--text2, #94a3b8);
    margin-top: 2px;
}
.msm-cp-subscribe-btn {
    padding: 7px 14px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.msm-cp-subscribe-btn:hover { opacity: .88; }
.msm-cp-weak-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.msm-cp-weak-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(148,163,184,.08);
    font-size: 12px;
    color: var(--text, #e2e8f0);
}
.msm-cp-weak-list li:last-child { border-bottom: none; }
.msm-cp-weak-score {
    font-size: 11px;
    font-weight: 700;
    color: #f87171;
    background: rgba(239,68,68,.1);
    padding: 2px 7px;
    border-radius: 6px;
}
.msm-cp-last-active {
    font-size: 11px;
    color: var(--text2, #94a3b8);
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,.08);
    margin-top: 4px;
}

/* Full-width button helper */
.msm-btn-full { width: 100%; }

/* ── Native-feel mobile overlay ─────────────────────────────────────────── */
.msm-overlay {
    position:absolute;inset:0;z-index:99;display:none;
    background:rgba(0,0,0,.38);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}

/* ============================================================
   MsmShare — Score Share Card styles
   ============================================================ */

/* ── Toast ── */
.msm-share-toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    opacity:0;transition:opacity .3s,transform .3s;
    display:flex;align-items:center;gap:10px;
    background:var(--bg2);border:1px solid var(--border);
    border-radius:14px;padding:11px 14px 11px 12px;
    box-shadow:0 8px 32px rgba(0,0,0,.28);
    max-width:340px;width:calc(100% - 32px);z-index:9999;
    font-family:var(--font);
}
.msm-share-toast--in{opacity:1;transform:translateX(-50%) translateY(0)}
.msm-share-toast-icon{
    width:36px;height:36px;flex-shrink:0;border-radius:10px;
    background:linear-gradient(135deg,#2ecc71,#27ae60);
    display:flex;align-items:center;justify-content:center;font-size:18px;
    box-shadow:0 4px 12px rgba(46,204,113,.3);
}
.msm-share-toast-body{flex:1;min-width:0}
.msm-share-toast-title{font-size:12px;font-weight:700;color:var(--text);line-height:1.2}
.msm-share-toast-sub{font-size:11px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msm-share-toast-btn{
    flex-shrink:0;background:#2ecc71;color:#fff;
    border:none;border-radius:8px;padding:6px 12px;
    font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);
    white-space:nowrap;transition:opacity .15s;
}
.msm-share-toast-btn:hover{opacity:.88}
.msm-share-toast-close{
    flex-shrink:0;background:transparent;border:none;
    color:var(--text3);font-size:13px;cursor:pointer;padding:2px 4px;line-height:1;
}

/* ── Overlay / Modal ── */
.msm-share-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    display:flex;align-items:flex-end;justify-content:center;
    z-index:100000;opacity:0;transition:opacity .3s;
    backdrop-filter:blur(2px);
}
.msm-share-overlay--in{opacity:1}
.msm-share-overlay--in .msm-share-modal{transform:translateY(0)}

.msm-share-modal{
    background:var(--surface);border:1px solid var(--border);
    border-radius:20px 20px 0 0;width:100%;max-width:420px;
    transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1,.64,1);
    overflow:hidden;
}
.msm-share-modal-hd{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px 14px;border-bottom:1px solid var(--border);
    background:var(--surface2);
}
.msm-share-modal-title{font-size:14px;font-weight:700;color:var(--text);font-family:var(--font)}
.msm-share-modal-close{
    background:var(--surface);border:1px solid var(--border);
    border-radius:7px;width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text2);font-size:13px;cursor:pointer;
}
.msm-share-modal-body{padding:18px 18px 24px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}

/* ── Card preview inside modal ── */
.msm-share-card-preview{
    background:linear-gradient(145deg,#0f172a,#131d36);
    border:1px solid rgba(255,255,255,.07);border-radius:16px;
    padding:18px 16px 14px;position:relative;overflow:hidden;
}
.msm-share-card-preview::before{
    content:'';position:absolute;top:-50px;right:-50px;
    width:140px;height:140px;border-radius:50%;
    background:radial-gradient(circle,rgba(46,204,113,.13),transparent 70%);
}
.msm-scp-logo{display:flex;align-items:center;gap:7px;margin-bottom:13px}
.msm-scp-logo-icon{
    width:24px;height:24px;border-radius:6px;
    background:linear-gradient(135deg,#2ecc71,#27ae60);
    display:flex;align-items:center;justify-content:center;font-size:13px;
    box-shadow:0 0 8px rgba(46,204,113,.3);
}
.msm-scp-logo-text{font-size:12px;font-weight:700;color:#e2e8f0;font-family:var(--font)}
.msm-scp-logo-text b{color:#2ecc71;font-weight:800}

.msm-scp-score-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.msm-scp-ring-wrap{position:relative;width:58px;height:58px;flex-shrink:0}
.msm-scp-ring-svg{width:58px;height:58px;transform:rotate(-90deg)}
.msm-scp-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:4}
.msm-scp-arc{fill:none;stroke:#2ecc71;stroke-width:4;stroke-linecap:round;stroke-dasharray:157;transition:stroke-dashoffset .8s ease}
.msm-scp-ring-val{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
}
.msm-scp-score{font-size:13px;font-weight:800;color:#f8fafc;line-height:1;font-family:var(--font)}
.msm-scp-score-lbl{font-size:8px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.msm-scp-info{flex:1;min-width:0}
.msm-scp-subject{font-size:14px;font-weight:700;color:#f1f5f9;font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.msm-scp-class{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px}
.msm-scp-badges{display:flex;flex-wrap:wrap;gap:5px}
.msm-scp-badge{
    font-size:9.5px;font-weight:600;padding:2px 8px;
    border-radius:20px;letter-spacing:.2px;font-family:var(--font);
}
.msm-scp-badge--score{background:rgba(46,204,113,.13);color:#2ecc71;border:1px solid rgba(46,204,113,.22)}
.msm-scp-badge--streak{background:rgba(249,115,22,.13);color:#fb923c;border:1px solid rgba(249,115,22,.22)}
.msm-scp-badge--xp{background:rgba(139,92,246,.13);color:#a78bfa;border:1px solid rgba(139,92,246,.22)}

.msm-scp-divider{height:1px;background:rgba(255,255,255,.06);margin:11px 0 9px}
.msm-scp-stats{display:flex;justify-content:space-between}
.msm-scp-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.msm-scp-stat-val{font-size:14px;font-weight:700;color:#f1f5f9;font-family:var(--font);line-height:1}
.msm-scp-stat-lbl{font-size:8.5px;color:#475569;text-transform:uppercase;letter-spacing:.5px;font-weight:500}

.msm-scp-footer{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.05);
}
.msm-scp-footer-url{font-size:10px;font-weight:700;color:#2ecc71;font-family:var(--font)}
.msm-scp-footer-tag{font-size:9.5px;color:#334155}

/* ── Share buttons ── */
.msm-share-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.msm-share-btn{
    border-radius:12px;padding:12px 10px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:13px;font-weight:600;cursor:pointer;
    border:none;transition:opacity .15s;font-family:var(--font);
}
.msm-share-btn:disabled{opacity:.6;cursor:default}
.msm-share-btn--wa{background:#25d366;color:#fff}
.msm-share-btn--wa:hover:not(:disabled){opacity:.88}
.msm-share-btn--copy{
    background:var(--bg2);color:var(--text2);
    border:1px solid var(--border);
}
.msm-share-btn--copy:hover:not(:disabled){background:var(--bg3)}
.msm-share-btn--ok{color:#2ecc71 !important}

.msm-share-dismiss{
    background:transparent;border:none;color:var(--text3);
    font-size:12px;cursor:pointer;font-family:var(--font);
    text-align:center;width:100%;padding:4px 0;
}
.msm-share-dismiss:hover{color:var(--text2)}
/* Hint shown on fallback browsers: "card saved to gallery" */
.msm-share-hint{
    font-size:12px;color:var(--text);font-family:var(--font);
    text-align:center;line-height:1.5;
    background:var(--bg2);border:1px solid var(--border);
    border-radius:8px;padding:8px 12px;
}

/* Mobile: push modal up from bottom safely */
@media (max-width:480px){
    .msm-share-modal{max-width:100%;border-radius:18px 18px 0 0}
    .msm-share-toast{bottom:80px} /* above mobile nav */
}

/* ══════════════════════════════════════════════════════════════════════════
   XP Hint pill + How-to-earn modal
   ══════════════════════════════════════════════════════════════════════════ */

/* Pill button sitting inline with the subtitle */
.msm-lb-xp-hint-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 20px; border: 1.5px solid currentColor;
    background: transparent; cursor: pointer; font-family: inherit;
    font-size: 11px; font-weight: 600; letter-spacing: .2px;
    color: var(--lb-accent, #1a6fe8); opacity: .75;
    transition: opacity .15s, background .15s;
    vertical-align: middle; line-height: 1.6;
}
.msm-lb-xp-hint-btn:hover { opacity: 1; background: rgba(26,111,232,.08); }

/* ── Backdrop ──────────────────────────────────────────────────────────── */
.msm-lb-xp-modal-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    overflow: hidden;
}
.msm-lb-xp-modal-backdrop.hidden { display: none; }
.msm-lb-xp-in  { animation: msm-xp-fadein .2s ease forwards; }
.msm-lb-xp-out { animation: msm-xp-fadeout .22s ease forwards; }
@keyframes msm-xp-fadein  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes msm-xp-fadeout { from{opacity:1;transform:none} to{opacity:0;transform:translateY(8px)} }

/* ── Modal sheet ───────────────────────────────────────────────────────── */
.msm-lb-xp-modal {
    background: var(--lb-surface, #fff); border-radius: 18px;
    width: min(420px, 92%);
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    font-family: 'Outfit', -apple-system, sans-serif;
    color: var(--lb-text, #1a1714);
    overflow: hidden;
}
/* ── Pinned header ─────────────────────────────────────────────────────── */
.msm-lb-xp-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px; border-bottom: 1.5px solid var(--lb-border, #e4e2da);
    flex-shrink: 0;
    background: var(--lb-surface, #fff);
    position: relative; z-index: 1;
}
.msm-lb-xp-modal-title {
    font-size: 15px; font-weight: 800; letter-spacing: -.3px;
    display: flex; align-items: center; gap: 7px;
}
.msm-lb-xp-modal-title svg { flex-shrink: 0; }
.msm-lb-xp-modal-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--lb-border, #e4e2da); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--lb-text2, #6b6558); transition: background .15s; flex-shrink: 0;
}
.msm-lb-xp-modal-close:hover { background: #d1d5db; }

/* ── Scrollable body: direct max-height, no flex tricks ─────────────── */
.msm-lb-xp-modal-body {
    overflow-y: auto;
    overflow-x: hidden; /* hidden needed to prevent horizontal page bleed on mobile; off-screen tile corruption is fixed by transform:translateZ(0) on the child track instead */
    max-height: calc(80vh - 58px);
    flex: 1;
    min-height: 0;
    padding: 7px 16px 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--lb-border, #e4e2da) transparent;
}
.msm-lb-xp-modal-body::-webkit-scrollbar { width: 4px; }
.msm-lb-xp-modal-body::-webkit-scrollbar-track { background: transparent; }
.msm-lb-xp-modal-body::-webkit-scrollbar-thumb { background: var(--lb-border, #e4e2da); border-radius: 4px; }
.msm-lb-xp-modal-intro { font-size: 12px; color: var(--lb-text2, #6b6558); margin: 0 0 7px; line-height: 1.45; }

/* Action list */
.msm-lb-xp-actions { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.msm-lb-xp-actions li {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
    font-size: 13px; transition: background .12s;
}
.msm-lb-xp-actions li:hover { background: rgba(26,111,232,.05); }
.msm-lb-xp-actions li.msm-lb-xp-action-bonus {
    background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
}
.msm-lb-xp-action-icon {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.msm-lb-xp-action-icon svg { width: 16px; height: 16px; }
/* Per-row tint colours */
.msm-lb-xp-actions li:nth-child(1) .msm-lb-xp-action-icon { background: rgba(99,102,241,.12); color: #6366f1; }
.msm-lb-xp-actions li:nth-child(2) .msm-lb-xp-action-icon { background: rgba(34,197,94,.12);  color: #16a34a; }
.msm-lb-xp-actions li:nth-child(3) .msm-lb-xp-action-icon { background: rgba(234,88,12,.12);  color: #ea580c; }
.msm-lb-xp-actions li:nth-child(4) .msm-lb-xp-action-icon { background: rgba(147,51,234,.12); color: #9333ea; }
.msm-lb-xp-actions li:nth-child(5) .msm-lb-xp-action-icon { background: rgba(13,148,136,.12); color: #0d9488; }
.msm-lb-xp-actions li.msm-lb-xp-action-bonus .msm-lb-xp-action-icon { background: rgba(251,191,36,.15); color: #d97706; }
.msm-lb-xp-action-label { flex: 1; color: var(--lb-text, #1a1714); }
.msm-lb-xp-action-label small { font-size: 11px; color: var(--lb-text2, #6b6558); }
.msm-lb-xp-action-pts {
    font-size: 12px; font-weight: 700; color: var(--lb-accent, #1a6fe8);
    white-space: nowrap; background: rgba(26,111,232,.08);
    padding: 2px 7px; border-radius: 7px;
}

/* Level track */
.msm-lb-xp-levels {
    border-top: 1.5px solid var(--lb-border, #e4e2da);
    padding-top: 10px; margin-top: 4px;
}
.msm-lb-xp-levels-label { font-size: 11px; font-weight: 600; color: var(--lb-text2, #6b6558); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msm-lb-xp-levels-swipe { font-weight: 400; font-size: 10px; color: var(--lb-accent, #1a6fe8); opacity: .7; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* ── Track: free-scroll horizontal list (no snap, no negative margins) ── */
.msm-lb-xp-level-track {
    /* Horizontal strip — retained for backwards compat but no longer used in the
       two-screen modal. Levels are now shown as a vertical list on screen 2. */
    display: flex; gap: 6px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 24px; scrollbar-width: none;
}
.msm-lb-xp-level-track::-webkit-scrollbar { display: none; }

/* ── Individual level step ────────────────────────────────────────────── */
.msm-lb-xp-level-step {
    flex-shrink: 0;
    width: 70px;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 8px 5px 7px;
    background: rgba(26,111,232,.05); border-radius: 10px;
    border: 1.5px solid var(--lb-border, #e4e2da);
    text-align: center;
    transition: border-color .15s, background .15s;
    position: relative;
}
/* Rung colours cycle by position in the ladder */
.msm-lb-xp-level-step:nth-child(-n+5)  { border-color: rgba(34,197,94,.3);  background: rgba(34,197,94,.05);  }
.msm-lb-xp-level-step:nth-child(n+6):nth-child(-n+10)  { border-color: rgba(99,102,241,.3);  background: rgba(99,102,241,.05);  }
.msm-lb-xp-level-step:nth-child(n+11):nth-child(-n+15) { border-color: rgba(245,158,11,.3);  background: rgba(245,158,11,.05);  }
.msm-lb-xp-level-step:nth-child(n+16):nth-child(-n+20) { border-color: rgba(168,85,247,.3);  background: rgba(168,85,247,.05);  }

/* ── Level-track SVG icon colours ─────────────────────────────────────────
   msm_icon() outputs stroke="currentColor"; setting `color` on the wrapper
   drives the stroke — matching v29 hardcoded SVG colours exactly.           */
.msm-lb-xp-level-step:nth-child(-n+5) .msm-lb-xp-level-icon                  { color: #22c55e; } /* Tier 1 — green  */
.msm-lb-xp-level-step:nth-child(n+6):nth-child(-n+10) .msm-lb-xp-level-icon  { color: #6366f1; } /* Tier 2 — indigo */
.msm-lb-xp-level-step:nth-child(n+11):nth-child(-n+15) .msm-lb-xp-level-icon { color: #f59e0b; } /* Tier 3 — amber  */
.msm-lb-xp-level-step:nth-child(n+16):nth-child(-n+20) .msm-lb-xp-level-icon { color: #a855f7; } /* Tier 4 — purple */
.msm-lb-xp-level-step--loop .msm-lb-xp-level-icon                             { color: #fbbf24; } /* Loop   — gold   */

/* Active rung (JS adds this class for the learner's current level) */
.msm-lb-xp-level-step.msm-active-rung {
    border-color: var(--lb-accent, #1a6fe8);
    background: rgba(26,111,232,.13);
    box-shadow: 0 0 0 2px rgba(26,111,232,.18);
}
.msm-lb-xp-level-step.msm-active-rung::after {
    content: '▲ you';
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 700; color: var(--lb-accent, #1a6fe8);
    white-space: nowrap; letter-spacing: .2px;
}

/* Loop hint step */
.msm-lb-xp-level-step--loop {
    border-style: dashed;
    border-color: rgba(251,191,36,.5) !important;
    background: rgba(251,191,36,.06) !important;
    opacity: .85;
}
.msm-lb-xp-level-loop-icon { animation: msm-spin-slow 6s linear infinite; }
@keyframes msm-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.msm-lb-xp-level-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.msm-lb-xp-level-icon svg { width: 22px; height: 22px; }
.msm-lb-xp-level-name { font-size: 11px; font-weight: 700; color: var(--lb-text, #1a1714); line-height: 1.2; }
.msm-lb-xp-level-req  { font-size: 11px; color: var(--lb-text2, #6b6558); }

/* ── Dark mode ─────────────────────────────────────────────────────────── */
.msm-app[data-theme="dark"] .msm-lb-xp-modal,
.msm-app[data-theme="dark"] .msm-lb-xp-modal-head { background: #1e293b; }
.msm-app[data-theme="dark"] .msm-lb-xp-modal-close { background: #334155; color: #94a3b8; }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step  { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.2); }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(-n+5)  { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.25);  }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(n+6):nth-child(-n+10)  { background: rgba(99,102,241,.08);  border-color: rgba(99,102,241,.25);  }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(n+11):nth-child(-n+15) { background: rgba(245,158,11,.08);  border-color: rgba(245,158,11,.25);  }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(n+16):nth-child(-n+20) { background: rgba(168,85,247,.08);  border-color: rgba(168,85,247,.25);  }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step--loop { border-color: rgba(251,191,36,.4) !important; background: rgba(251,191,36,.08) !important; }
/* Dark mode: bump icon brightness so thin strokes pop on dark backgrounds  */
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(-n+5) .msm-lb-xp-level-icon                  { color: #4ade80; }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(n+6):nth-child(-n+10) .msm-lb-xp-level-icon  { color: #818cf8; }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(n+11):nth-child(-n+15) .msm-lb-xp-level-icon { color: #fbbf24; }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step:nth-child(n+16):nth-child(-n+20) .msm-lb-xp-level-icon { color: #c084fc; }
.msm-app[data-theme="dark"] .msm-lb-xp-level-step--loop .msm-lb-xp-level-icon                            { color: #fde68a; }

/* ══════════════════════════════════════════════════════════════════════════
   XP MODAL — TWO-SCREEN LAYOUT
   Screen 1: How to earn XP  |  Screen 2: Level Ladder (vertical, no h-scroll)
   ══════════════════════════════════════════════════════════════════════════ */

/* Screen wrapper — fills the modal, clips sibling screens */
.msm-lb-xp-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    background: var(--lb-bg, #fff);
    border-radius: inherit;
    transition: transform .22s ease, opacity .22s ease;
    transform: translateX(0);
    opacity: 1;
}
.msm-lb-xp-modal { position: relative; overflow: hidden; }

.msm-lb-xp-screen--hidden        { transform: translateX(100%); opacity: 0; pointer-events: none; }
.msm-lb-xp-screen--slide-out     { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.msm-lb-xp-screen--slide-in      { transform: translateX(0);   opacity: 1; pointer-events: auto; }
.msm-lb-xp-screen--slide-out-reverse { transform: translateX(100%); opacity: 0; pointer-events: none; }

/* ── Levels teaser button on screen 1 ─────────────────────────────────── */
.msm-lb-xp-levels-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    margin-top: 6px;
    background: rgba(26,111,232,.05);
    border: 1.5px solid rgba(26,111,232,.18);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s;
}
.msm-lb-xp-levels-btn:hover,
.msm-lb-xp-levels-btn:active { background: rgba(26,111,232,.1); border-color: rgba(26,111,232,.35); }
.msm-lb-xp-levels-btn-left {
    display: flex; align-items: center; gap: 10px;
    color: var(--lb-accent, #1a6fe8);
}
.msm-lb-xp-levels-btn-left svg { flex-shrink: 0; }
.msm-lb-xp-levels-btn-left span { display: flex; flex-direction: column; gap: 1px; }
.msm-lb-xp-levels-btn-left strong { font-size: 13px; font-weight: 700; color: var(--lb-text, #1a1714); }
.msm-lb-xp-levels-btn-left small  { font-size: 11px; color: var(--lb-text2, #6b6558); }
.msm-lb-xp-levels-btn-arrow { flex-shrink: 0; color: var(--lb-text2, #6b6558); }

/* ── Back button on screen 2 header ───────────────────────────────────── */
.msm-lb-xp-back-btn {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--lb-surface, #f5f4f0);
    border: none; cursor: pointer;
    color: var(--lb-text, #1a1714);
    transition: background .15s;
    flex-shrink: 0;
}
.msm-lb-xp-back-btn:hover { background: #e5e7eb; }

/* ── Vertical ladder list on screen 2 ─────────────────────────────────── */
.msm-lb-xp-levels-body { padding-bottom: 24px; }

/* ── Ladder show-more collapse ─────────────────────────────── */
.msm-lb-xp-ladder-row--collapsed { display: none; }
.msm-lb-xp-ladder-row--loop.msm-lb-xp-ladder-row--collapsed { display: none; }
.msm-lb-xp-show-more-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 8px; padding: 9px 12px;
    background: rgba(26,111,232,.07); border: 1.5px solid rgba(26,111,232,.18);
    border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--lb-accent, #1a6fe8); transition: background .15s, border-color .15s;
    font-family: inherit;
}
.msm-lb-xp-show-more-btn:hover { background: rgba(26,111,232,.13); border-color: rgba(26,111,232,.35); }
.msm-app[data-theme="dark"] .msm-lb-xp-show-more-btn { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.25); color: #818cf8; }

.msm-lb-xp-ladder {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.msm-lb-xp-ladder-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    transition: background .12s;
}
/* Tier colours — match the original horizontal strip */
.msm-lb-xp-ladder-row:nth-child(-n+5)            { border-color: rgba(34,197,94,.2);  background: rgba(34,197,94,.04);  }
.msm-lb-xp-ladder-row:nth-child(n+6):nth-child(-n+10)  { border-color: rgba(99,102,241,.2);  background: rgba(99,102,241,.04);  }
.msm-lb-xp-ladder-row:nth-child(n+11):nth-child(-n+15) { border-color: rgba(245,158,11,.2);  background: rgba(245,158,11,.04);  }
.msm-lb-xp-ladder-row:nth-child(n+16):nth-child(-n+20) { border-color: rgba(168,85,247,.2);  background: rgba(168,85,247,.04);  }
.msm-lb-xp-ladder-row--loop { border-color: rgba(251,191,36,.3) !important; background: rgba(251,191,36,.06) !important; border-style: dashed; }

/* Active (user's current level) */
.msm-lb-xp-ladder-row--active {
    border-color: var(--lb-accent, #1a6fe8) !important;
    background: rgba(26,111,232,.1) !important;
    box-shadow: 0 0 0 2px rgba(26,111,232,.15);
}

.msm-lb-xp-ladder-num {
    width: 20px; flex-shrink: 0;
    font-size: 11px; font-weight: 700;
    color: var(--lb-text2, #6b6558);
    text-align: center;
}
.msm-lb-xp-ladder-icon {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
/* Icon colours — match tier */
.msm-lb-xp-ladder-row:nth-child(-n+5) .msm-lb-xp-ladder-icon            { color: #22c55e; }
.msm-lb-xp-ladder-row:nth-child(n+6):nth-child(-n+10) .msm-lb-xp-ladder-icon  { color: #6366f1; }
.msm-lb-xp-ladder-row:nth-child(n+11):nth-child(-n+15) .msm-lb-xp-ladder-icon { color: #f59e0b; }
.msm-lb-xp-ladder-row:nth-child(n+16):nth-child(-n+20) .msm-lb-xp-ladder-icon { color: #a855f7; }
.msm-lb-xp-ladder-row--loop .msm-lb-xp-ladder-icon                        { color: #fbbf24; }

.msm-lb-xp-ladder-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.msm-lb-xp-ladder-info strong { font-size: 13px; font-weight: 700; color: var(--lb-text, #1a1714); }
.msm-lb-xp-ladder-info small  { font-size: 11px; color: var(--lb-text2, #6b6558); }

.msm-lb-xp-ladder-you {
    font-size: 10px; font-weight: 700;
    color: var(--lb-accent, #1a6fe8);
    background: rgba(26,111,232,.12);
    padding: 2px 7px; border-radius: 20px;
    white-space: nowrap; flex-shrink: 0;
}

/* ── Dark mode for new elements ────────────────────────────────────────── */
.msm-app[data-theme="dark"] .msm-lb-xp-screen               { background: #1e293b; }
.msm-app[data-theme="dark"] .msm-lb-xp-levels-btn           { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.25); }
.msm-app[data-theme="dark"] .msm-lb-xp-levels-btn:hover     { background: rgba(99,102,241,.2); }
.msm-app[data-theme="dark"] .msm-lb-xp-back-btn             { background: #334155; color: #94a3b8; }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(-n+5)            { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.22); }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(n+6):nth-child(-n+10)  { background: rgba(99,102,241,.08);  border-color: rgba(99,102,241,.22); }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(n+11):nth-child(-n+15) { background: rgba(245,158,11,.08);  border-color: rgba(245,158,11,.22); }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(n+16):nth-child(-n+20) { background: rgba(168,85,247,.08);  border-color: rgba(168,85,247,.22); }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row--active   { background: rgba(26,111,232,.2) !important; }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(-n+5) .msm-lb-xp-ladder-icon            { color: #4ade80; }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(n+6):nth-child(-n+10) .msm-lb-xp-ladder-icon  { color: #818cf8; }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(n+11):nth-child(-n+15) .msm-lb-xp-ladder-icon { color: #fbbf24; }
.msm-app[data-theme="dark"] .msm-lb-xp-ladder-row:nth-child(n+16):nth-child(-n+20) .msm-lb-xp-ladder-icon { color: #c084fc; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .msm-lb-xp-modal-backdrop { align-items: flex-end; padding-top: 0; }
    .msm-lb-xp-modal {
        width: 100%; border-radius: 20px 20px 0 0;
        /* Use dvh for proper viewport with OS chrome; vh as fallback */
        height: 88dvh;
        height: 88vh;
        /* Ensure flex children (head + body) fill the fixed height */
        overflow: hidden;
    }
    .msm-lb-xp-modal-body {
        /* flex:1 + min-height:0 drives height from parent — no max-height needed on mobile */
        max-height: none;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 12px));
    }
    @keyframes msm-xp-fadein { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
}

/* ── v35: Avatar image inside auth buttons ─────────────────────────────── */
.msm-auth-avatar .msm-avatar-img,
.msm-auth-avatar-main .msm-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── v35: Edit Profile modal ────────────────────────────────────────────── */
.msm-edit-profile-card {
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 24px;
}

/* Avatar picker */
.msm-ep-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.msm-ep-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--border);
}
.msm-ep-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.msm-ep-avatar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    padding: 6px 14px;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    transition: background .15s;
}
.msm-ep-avatar-label:hover { background: rgba(99,102,241,.08); }
.msm-ep-avatar-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* Fields */
.msm-ep-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}
.msm-ep-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.msm-ep-field input[type="text"],
.msm-ep-field input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
    transition: border-color .15s;
}
.msm-ep-field input:focus {
    outline: none;
    border-color: var(--accent);
}
.msm-ep-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.msm-ep-pw-wrap input { padding-right: 38px; }
.msm-ep-pw-wrap .msm-pw-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
}
.msm-ep-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 8px 0 14px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.msm-ep-optional {
    font-weight: 400;
    text-transform: none;
    font-size: 11px;
}

/* Save button */
.msm-ep-save-btn {
    width: 100%;
    margin-top: 8px;
    padding: 11px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}
.msm-ep-save-btn:hover { opacity: .88; }
.msm-ep-save-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Feedback message */
.msm-ep-msg {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}
.msm-ep-msg.success {
    background: rgba(34,197,94,.12);
    color: #15803d;
    border: 1px solid rgba(34,197,94,.3);
}
.msm-ep-msg.error {
    background: rgba(239,68,68,.1);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,.25);
}

/* Dark mode */
.msm-app[data-theme="dark"] .msm-ep-field input[type="text"],
.msm-app[data-theme="dark"] .msm-ep-field input[type="password"] {
    background: var(--surface);
}
.msm-app[data-theme="dark"] .msm-ep-msg.success { color: #4ade80; }
.msm-app[data-theme="dark"] .msm-ep-msg.error   { color: #f87171; }

/* Mobile */
@media (max-width: 480px) {
    .msm-edit-profile-card { padding: 22px 16px 20px; }
}

/* ═══════════════════════════════════════════════════════
   v36 — Leaderboard avatar photos
   ═══════════════════════════════════════════════════════ */
.msm-lb-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
/* Ensure the parent containers are positioned for photo overlay */
.msm-lb-pod-avatar,
.msm-lb-item-avatar {
    position: relative;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   v36 — Edit Profile modal: class picker + section icons
   ═══════════════════════════════════════════════════════ */
.msm-ep-section {
    margin-bottom: 20px;
}
.msm-ep-section-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.msm-ep-class-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 4px;
}
.msm-ep-class-pill {
    padding: 5px 13px;
    border-radius: 20px;
    border: 1.5px solid var(--border, #e5e7eb);
    background: transparent;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    color: var(--text, #111827);
}
.msm-ep-class-pill:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99,102,241,.07);
}
.msm-ep-class-pill.msm-ep-pill-active {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    color: #fff;
}
.msm-ep-level-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 5px;
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════
   v58 — ChatGPT-style User Dropdown + Settings Modal
   ═══════════════════════════════════════════════════════ */

/* ══ Full Settings Overlay (Claude-style) ════════════════════════════════ */
.msm-settings-full-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.msm-settings-full-sheet {
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: msm-sf-sheet-in .24s cubic-bezier(.32,1,.52,1);
    box-shadow: 0 -4px 40px rgba(0,0,0,.3);
}
@keyframes msm-sf-sheet-in {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@media (min-width: 640px) {
    .msm-settings-full-overlay { align-items: center; }
    .msm-settings-full-sheet {
        border-radius: 20px;
        max-height: 85vh;
        animation: msm-sf-sheet-in-center .22s cubic-bezier(.32,1,.52,1);
    }
    @keyframes msm-sf-sheet-in-center {
        from { transform: scale(.95) translateY(12px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
    }
}
.msm-sf-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.msm-sf-header-identity {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1;
    min-width: 0;
}
.msm-sf-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #6366f1), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.msm-sf-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.msm-sf-identity-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.msm-sf-name { font-size:15px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msm-sf-email { font-size:12px; color:var(--text3,#9ca3af); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msm-sf-plan-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; background: var(--border); color: var(--text2);
    margin-top: 2px; width: fit-content; letter-spacing: .02em; text-transform: uppercase;
}
.msm-sf-plan-badge--premium {
    background: linear-gradient(120deg,rgba(99,102,241,.15),rgba(168,85,247,.15));
    color: var(--accent,#6366f1);
    border: 1px solid rgba(99,102,241,.25);
}
.msm-sf-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--border); background: var(--bg,#f8fafc);
    color: var(--text2); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background .13s, color .13s, border-color .13s;
}
.msm-sf-close:hover { background:#ef4444; border-color:#ef4444; color:#fff; }

.msm-sf-upgrade-banner {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 13px 20px; border: none; border-radius: 0; cursor: pointer;
    background: linear-gradient(135deg,rgba(99,102,241,.1),rgba(168,85,247,.1));
    border-bottom: 1px solid rgba(99,102,241,.2);
    text-decoration: none; color: inherit; transition: background .14s; flex-shrink: 0;
}
.msm-sf-upgrade-banner:hover { background: linear-gradient(135deg,rgba(99,102,241,.18),rgba(168,85,247,.18)); }
.msm-sf-upgrade-left { display:flex; align-items:center; gap:10px; flex:1; }
.msm-sf-upgrade-icon { font-size:20px; }
.msm-sf-upgrade-title { font-size:13px; font-weight:700; color:var(--text); }
.msm-sf-upgrade-sub { font-size:11px; color:var(--text3,#9ca3af); }
.msm-sf-upgrade-banner > svg { color:var(--text3); }

.msm-sf-body { flex:1; overflow-y:auto; padding:12px 12px 32px; }
.msm-sf-body::-webkit-scrollbar { width:4px; }
.msm-sf-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

.msm-sf-section-label {
    font-size:11px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text3,#9ca3af); padding:14px 8px 6px;
}
.msm-sf-section {
    background: var(--bg,#f8fafc); border:1px solid var(--border);
    border-radius:14px; overflow:hidden; margin-bottom:4px;
}
.msm-app[data-theme="dark"] .msm-sf-section { background:rgba(255,255,255,.03); }
.msm-sf-section--logout { margin-top:8px; background:transparent; border-color:transparent; }

.msm-sf-row {
    display:flex; align-items:center; gap:13px; width:100%;
    padding:13px 14px; background:transparent; border:none;
    border-bottom:1px solid var(--border); cursor:pointer; text-align:left;
    transition:background .12s; font-family:var(--font);
}
.msm-sf-row:last-child { border-bottom:none; }
.msm-sf-row:hover { background:rgba(99,102,241,.05); }
.msm-sf-row--logout:hover { background:rgba(239,68,68,.06); }
.msm-sf-row--logout .msm-sf-row-label { color:#dc2626; }
.msm-app[data-theme="dark"] .msm-sf-row--logout .msm-sf-row-label { color:#f87171; }
.msm-sf-row--logging-out { opacity: 1; cursor: default; background: rgba(239,68,68,.06); }
.msm-sf-row--logging-out .msm-sf-row-label { color:#dc2626 !important; font-weight: 600; }
.msm-app[data-theme="dark"] .msm-sf-row--logging-out .msm-sf-row-label { color:#f87171 !important; }

.msm-sf-row-icon {
    width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#fff;
}
.msm-sf-icon--purple { background:#7c3aed; }
.msm-sf-icon--blue   { background:#2563eb; }
.msm-sf-icon--green  { background:#16a34a; }
.msm-sf-icon--orange { background:#ea580c; }
.msm-sf-icon--teal   { background:#0891b2; }
.msm-sf-icon--pink   { background:#db2777; }
.msm-sf-icon--indigo { background:#4f46e5; }
.msm-sf-icon--slate  { background:#475569; }
.msm-sf-icon--red    { background:#dc2626; }

.msm-sf-row-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.msm-sf-row-label { font-size:14px; font-weight:600; color:var(--text); }
.msm-sf-row-desc { font-size:12px; color:var(--text3,#9ca3af); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msm-sf-row-chevron { color:var(--text3,#9ca3af); flex-shrink:0; transition:transform .12s; }
.msm-sf-row:hover .msm-sf-row-chevron { transform:translateX(2px); color:var(--accent,#6366f1); }

/* Billing tab */
.msm-billing-status-card {
    display:flex; align-items:center; gap:14px; padding:16px 18px;
    border-radius:12px; border:1.5px solid var(--border); background:var(--bg); margin-bottom:16px;
}
.msm-billing-premium { border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.06); }
.msm-billing-status-icon { font-size:28px; }
.msm-billing-status-text { display:flex; flex-direction:column; gap:3px; }
.msm-billing-status-text strong { font-size:15px; font-weight:700; color:var(--text); }
.msm-billing-status-text span { font-size:12px; color:var(--text3); }
.msm-billing-upgrade-cta {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:14px 18px; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--accent,#6366f1),#8b5cf6);
    border-radius:12px; text-decoration:none; color:#fff;
    font-weight:700; font-size:14px; transition:opacity .15s;
}
.msm-billing-upgrade-cta:hover { opacity:.9; }
.msm-billing-manage-note { font-size:13px; color:var(--text3); line-height:1.6; }
.msm-billing-manage-note a { color:var(--accent); text-decoration:none; }
.msm-billing-manage-note a:hover { text-decoration:underline; }

/* Old small dropdown styles kept for backwards compat but hidden */
.msm-user-dropdown {
    position: absolute;
    top: 56px;
    right: 16px;
    z-index: 500;
    min-width: 240px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    font-family: var(--font);
    animation: msmDdOpen .15s ease;
    transform-origin: top right;
}
@keyframes msmDdOpen {
    from { opacity: 0; transform: scale(.95) translateY(-5px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.msm-dd-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 10px;
}
.msm-dd-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.msm-dd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.msm-dd-identity-text {
    flex: 1;
    min-width: 0;
}
.msm-dd-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msm-dd-email {
    font-size: 11px;
    color: var(--text3, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.msm-dd-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 2px;
}
.msm-dd-upgrade-nudge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 2px 4px;
    padding: 9px 11px;
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(168,85,247,.1));
    border: 1.5px solid rgba(99,102,241,.3);
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
}
.msm-dd-upgrade-nudge:hover {
    background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(168,85,247,.18));
}
.msm-dd-upgrade-icon { font-size: 15px; flex-shrink: 0; }
.msm-dd-upgrade-label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #6366f1);
}
.msm-dd-upgrade-arrow {
    font-size: 13px;
    color: var(--accent, #6366f1);
    opacity: .65;
}
.msm-dd-plan-active {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 2px 4px;
    padding: 7px 11px;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.22);
    border-radius: 9px;
    font-size: 12px;
    color: #15803d;
    font-weight: 500;
}
.msm-app[data-theme="dark"] .msm-dd-plan-active {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.28);
    color: #4ade80;
}
/* Settings + Logout rows */
.msm-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--text2, #64748b);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, color .12s;
    text-align: left;
}
.msm-dd-item svg { flex-shrink: 0; opacity: .7; transition: opacity .12s; }
.msm-dd-item:hover {
    background: var(--bg, #f1f5f9);
    color: var(--text, #111827);
}
.msm-dd-item:hover svg { opacity: 1; }
.msm-dd-item--logout { color: var(--text2, #64748b); }
.msm-dd-item--logout:hover {
    background: rgba(239,68,68,.07);
    color: #dc2626;
}
.msm-app[data-theme="dark"] .msm-dd-item:hover {
    background: rgba(255,255,255,.06);
    color: var(--text);
}
/* Family tab action buttons inside settings modal */
.msm-family-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.msm-family-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    transition: background .14s, border-color .14s, color .14s;
    text-align: left;
}
.msm-family-action-btn:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--accent);
}
.msm-family-action-btn--primary {
    background: var(--accent, #6366f1);
    color: #fff;
    border-color: transparent;
}
.msm-family-action-btn--primary:hover {
    background: #4f46e5;
    border-color: transparent;
    color: #fff;
}
.msm-family-hint {
    font-size: 12px;
    color: var(--text3);
    margin-top: 14px;
    line-height: 1.5;
}
/* Link Code tab inside settings */
.msm-lc-display {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
}
.msm-lc-value {
    flex: 1;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--text);
    font-family: monospace;
}
.msm-lc-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--accent, #6366f1);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .13s;
}
.msm-lc-copy-btn:hover { background: #4f46e5; }
.msm-lc-hint {
    font-size: 12px;
    color: var(--text3);
    margin-top: 12px;
    line-height: 1.6;
}

/* ── Settings Modal Card ── */
/* ═══════════════════════════════════════════════════════
   Settings Modal — iOS-style back-arrow navigation
   ═══════════════════════════════════════════════════════ */

.msm-settings-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    background: var(--surface);
    border: 1.5px solid rgba(139,92,246,.2);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Settings tabs (Profile / Security / Billing / Change School / My Class /
   Family / Link Code / Privacy & Terms) now live inside the settings sheet
   and slide in on top of it exactly like Invite Friends / Send Feedback —
   no separate dark scrim, no cross-fade. ID selector so it always wins over
   the shared .msm-modal-overlay / .msm-settings-card rules above regardless
   of stylesheet order. JS toggles the same .msm-amb-panel--enter/--exit
   classes used by those panels, so the slide animation is shared too. ── */
#msm-edit-profile-modal {
    position: absolute;
    inset: 0;
    z-index: 70;
    background: transparent;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
#msm-edit-profile-modal .msm-settings-card {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
#msm-edit-profile-modal .msm-sf-settings,
#msm-edit-profile-modal #msm-sf-detail {
    max-height: none;
    height: 100%;
}

/* ── Menu view ── */
.msm-sf-settings {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 88vh;
}
.msm-sf-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.msm-sf-settings-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}
.msm-sf-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg, #f3f4f6);
    border: 1px solid var(--border);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    padding: 0;
    flex-shrink: 0;
}
.msm-sf-close:hover { background: #ef4444; border-color: #ef4444; color: #fff; }
.msm-app[data-theme="dark"] .msm-sf-close { background: rgba(255,255,255,.08); }

/* Identity strip */
.msm-sf-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.msm-sf-ident-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c63ff 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.msm-sf-ident-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msm-sf-ident-text { min-width: 0; }
.msm-sf-ident-name { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msm-sf-ident-email { font-size: 12px; color: var(--text3, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Menu rows */
.msm-sf-menu { padding: 8px 0; }
.msm-sf-menu-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background .1s;
}
.msm-sf-menu-row:hover { background: rgba(108,99,255,.07); }
.msm-sf-menu-row:active { background: rgba(108,99,255,.13); }
.msm-app[data-theme="dark"] .msm-sf-menu-row:hover { background: rgba(255,255,255,.05); }
.msm-sf-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(108,99,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6c63ff;
}
.msm-sf-menu-label { flex: 1; }
.msm-sf-menu-chevron { color: var(--text3, #9ca3af); flex-shrink: 0; }

/* Upgrade / plan strips */
.msm-sf-upgrade-strip {
    margin: 8px 16px 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(108,99,255,.1) 0%, rgba(124,58,237,.12) 100%);
    border: 1px solid rgba(108,99,255,.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.msm-sf-upgrade-star { font-size: 20px; flex-shrink: 0; }
.msm-sf-upgrade-copy { flex: 1; min-width: 0; }
.msm-sf-upgrade-copy strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.msm-sf-upgrade-copy span { font-size: 11px; color: var(--text2); }
.msm-sf-upgrade-cta {
    padding: 6px 14px;
    background: #6c63ff;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .12s;
}
.msm-sf-upgrade-cta:hover { opacity: .85; }
.msm-sf-plan-strip {
    margin: 8px 16px 16px;
    padding: 12px 14px;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
}
.msm-sf-plan-strip div { display: flex; flex-direction: column; }
.msm-sf-plan-strip strong { font-weight: 700; }
.msm-sf-plan-strip span { font-size: 11px; color: var(--text2); }

/* ── Detail view ── */
.msm-sf-detail {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
.msm-sf-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.msm-sf-back {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg, #f3f4f6);
    border: 1px solid var(--border);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.msm-sf-back:hover { background: rgba(108,99,255,.12); color: #6c63ff; border-color: rgba(108,99,255,.3); }
.msm-app[data-theme="dark"] .msm-sf-back { background: rgba(255,255,255,.08); }
.msm-sf-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}
.msm-sf-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 24px;
}
.msm-sf-detail-body::-webkit-scrollbar { width: 4px; }
.msm-sf-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Panel titles inside detail view */
.msm-settings-panel-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: -.02em;
}
.msm-settings-panel-desc {
    font-size: 13px;
    color: var(--text3, #9ca3af);
    margin: 0 0 22px;
    line-height: 1.5;
}
/* All panels hidden by default; JS clears inline styles and uses this class */
.msm-settings-panel { display: none !important; }
.msm-settings-panel.msm-sp-active { display: block !important; }

/* ── Settings slide-navigation animations ────────────────────────────────── */
/* Forward: menu slides left, detail slides in from right */
@keyframes msm-sf-out-left   { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-22%); opacity: 0; } }
@keyframes msm-sf-in-right   { from { transform: translateX(28%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Backward: detail slides right, menu slides in from left */
@keyframes msm-sf-out-right  { from { transform: translateX(0); opacity: 1; } to { transform: translateX(28%); opacity: 0; } }
@keyframes msm-sf-in-left    { from { transform: translateX(-22%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Modal open */
@keyframes msm-settings-fade { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }

.msm-sf-slide-out-left  { animation: msm-sf-out-left  .18s cubic-bezier(.4,0,.6,1) forwards; }
.msm-sf-slide-in-right  { animation: msm-sf-in-right  .22s cubic-bezier(.2,.8,.4,1) forwards; }
.msm-sf-slide-out-right { animation: msm-sf-out-right .18s cubic-bezier(.4,0,.6,1) forwards; }
.msm-sf-slide-in-left   { animation: msm-sf-in-left   .22s cubic-bezier(.2,.8,.4,1) forwards; }
.msm-settings-fadein .msm-settings-card { animation: msm-settings-fade .22s cubic-bezier(.2,.8,.4,1) both; }

/* Prevent content clipping during animation */
.msm-settings-card { overflow: hidden; }


/* Privacy links */
.msm-privacy-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msm-privacy-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg, #f8fafc);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .12s;
    cursor: pointer;
}
.msm-privacy-link-card:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99,102,241,.04);
    transform: translateY(-1px);
}
.msm-plc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99,102,241,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #6366f1);
    flex-shrink: 0;
}
.msm-plc-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.msm-plc-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.msm-plc-text span {
    font-size: 12px;
    color: var(--text3, #9ca3af);
}
.msm-plc-arrow {
    color: var(--text3, #9ca3af);
    flex-shrink: 0;
    transition: transform .12s;
}
.msm-privacy-link-card:hover .msm-plc-arrow {
    transform: translateX(3px);
    color: var(--accent, #6366f1);
}
.msm-privacy-footer {
    margin-top: 24px;
    font-size: 12px;
    color: var(--text3, #9ca3af);
}
.msm-privacy-footer a {
    color: var(--accent, #6366f1);
    text-decoration: none;
}
.msm-privacy-footer a:hover { text-decoration: underline; }

/* Dark mode adjustments */
.msm-app[data-theme="dark"] .msm-privacy-link-card {
    background: rgba(255,255,255,.03);
}
.msm-app[data-theme="dark"] .msm-privacy-link-card:hover {
    background: rgba(99,102,241,.08);
}
/* Mobile: card goes full-width bottom sheet */
@media (max-width: 600px) {
    .msm-settings-card {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
    }
    .msm-sf-settings { max-height: 92vh; }
    .msm-sf-detail { max-height: 92vh; }
}

/* ═══════════════════════════════════════════════════════
   v36 — School autocomplete dropdown
   ═══════════════════════════════════════════════════════ */
.msm-school-ac-wrap {
    position: relative;
}
.msm-school-ac-dropdown {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.msm-school-ac-dropdown li {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background .1s;
    color: var(--text, #111827);
}
.msm-school-ac-dropdown li:hover,
.msm-school-ac-dropdown li.msm-ac-focused {
    background: rgba(99,102,241,.08);
}
.msm-school-ac-dropdown li.msm-ac-empty {
    color: var(--text-muted, #6b7280);
    cursor: default;
    font-style: italic;
}

/* ── Matched result items (name + district/level meta) ── */
.msm-school-ac-dropdown li.msm-ac-item { padding: 9px 14px; }
.msm-ac-name {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #1a1a2e);
}
.msm-ac-meta {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

/* ── "Can't find your school?" inline entry row ── */
.msm-ac-notfound {
    background: var(--bg2, #f8faff);
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 10px 12px 11px;
    cursor: default !important;
}
.msm-ac-notfound:hover { background: var(--bg2, #f8faff) !important; }
.msm-ac-nf-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 7px;
}
.msm-ac-nf-row {
    display: flex;
    gap: 7px;
    align-items: center;
}
.msm-ac-nf-input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--border, #d1d5db);
    border-radius: 7px;
    font-size: 13px;
    color: var(--text, #111827);
    background: var(--surface, #fff);
    font-family: var(--font, inherit);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.msm-ac-nf-input:focus {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(26,111,232,.1);
}
.msm-ac-nf-btn {
    height: 34px;
    padding: 0 14px;
    background: var(--accent, #1a6fe8);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
    font-family: var(--font, inherit);
}
.msm-ac-nf-btn:hover { opacity: .88; }

/* ── Confirmed + error states on the school search input ── */
input.msm-ac-confirmed {
    border-color: #22c55e !important;
    background: rgba(34,197,94,.06) !important;
    color: #15803d !important;
}
input.msm-ac-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}

/* ── School field in the Mysomero Tutor auth signup form ──
   The student-fields plugin renders #msf-school-search inside .msf-school-field-msm.
   Style the input to match .msm-auth-field input exactly. ── */
.msf-school-field-msm { margin-bottom: 14px; }
.msf-school-field-msm label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 5px;
    letter-spacing: .2px;
}
.msf-school-field-msm .msf-school-input-wrap { position: relative; }
.msf-school-field-msm #msf-school-search {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    background: var(--bg2);
    color: var(--text);
    font-size: 13.5px;
    font-family: var(--font);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.msf-school-field-msm #msf-school-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26,111,232,.1);
    background: var(--surface);
}
.msf-school-field-msm #msf-school-search::placeholder { color: var(--text3); }

/* ════════════════════════════════════════════════════════════════════════════
   v28 — Course Discovery + Video Player
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: Courses NEW badge ─────────────────────────────────────────── */
.msm-nav-new-badge {
    margin-left: auto;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .05em;
    border-radius: 20px;
    padding: 2px 7px;
    font-family: var(--font);
    text-transform: uppercase;
}

/* ── More tray: Courses item highlight ──────────────────────────────────── */
.msm-more-tray-item-courses {
    border: 1.5px solid var(--accent) !important;
    background: var(--accent-bg) !important;
    position: relative;
}
.msm-tray-new-badge {
    position: absolute;
    top: 5px;
    right: 6px;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    font-size: 7.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 1px 5px;
    font-family: var(--font);
    text-transform: uppercase;
}

/* ── Discovery panel body ───────────────────────────────────────────────── */
.msm-disc-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.msm-disc-body::-webkit-scrollbar { width: 4px; }
.msm-disc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Subject filter pills — gradient cards ──────────────────────────────── */
.msm-disc-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 14px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.msm-disc-filters::-webkit-scrollbar { display: none; }

/* ── Base card ── */
.msm-disc-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    padding: 8px 10px 8px;
    border-radius: 10px;
    min-height: 58px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    /* default gradient — overridden per nth-child below */
    background: linear-gradient(135deg, #f43f8a 0%, #ff6b35 100%);
}

/* Shine layer at top */
.msm-disc-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(255,255,255,.22) 0%, transparent 55%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Decorative bubble in top-right */
.msm-disc-pill::after {
    content: '';
    position: absolute;
    top: -14px;
    right: -14px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    pointer-events: none;
    z-index: 1;
}

/* Icon & label sit above the pseudo-elements */
.msm-dp-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
    position: relative;
    z-index: 2;
    margin-bottom: 3px;
}
/* SVG icon wrapper — replaces emoji on category pills */
.msm-dp-svg-icon {
    font-size: 0;          /* hide any stray text nodes */
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}
.msm-dp-svg-icon svg {
    width: 22px;
    height: 22px;
    stroke: rgba(255,255,255,.95);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    display: block;
}
.msm-dp-label {
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--font);
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    position: relative;
    z-index: 2;
    letter-spacing: .01em;
    line-height: 1.2;
}

/* "All Subjects" spans full width */
.msm-disc-pill:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 50px;
}
.msm-disc-pill:first-child .msm-dp-svg-icon,
.msm-disc-pill:first-child .msm-dp-svg-icon svg { width: 26px; height: 26px; margin-bottom: 0; }
.msm-disc-pill:first-child .msm-dp-icon { font-size: 26px; margin-bottom: 0; }
.msm-disc-pill:first-child .msm-dp-label { font-size: 14px; }

/* Active state — lift + glow */
.msm-disc-pill.active {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.msm-disc-pill.active::before {
    background: linear-gradient(170deg, rgba(255,255,255,.30) 0%, transparent 55%);
}
.msm-disc-pill:hover:not(.active) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* ── Per-position gradient palette (cycles every 12) ── */
.msm-disc-pill:nth-child(1)  { background: linear-gradient(135deg,#f43f8a,#ff6b35); }  /* All — coral rose  */
.msm-disc-pill:nth-child(2)  { background: linear-gradient(135deg,#7c3aed,#4f46e5); }  /* purple-indigo     */
.msm-disc-pill:nth-child(3)  { background: linear-gradient(135deg,#2563eb,#0891b2); }  /* blue-cyan         */
.msm-disc-pill:nth-child(4)  { background: linear-gradient(135deg,#059669,#16a34a); }  /* emerald           */
.msm-disc-pill:nth-child(5)  { background: linear-gradient(135deg,#db2777,#9333ea); }  /* pink-purple       */
.msm-disc-pill:nth-child(6)  { background: linear-gradient(135deg,#b45309,#d97706); }  /* amber-gold        */
.msm-disc-pill:nth-child(7)  { background: linear-gradient(135deg,#0284c7,#6366f1); }  /* sky-violet        */
.msm-disc-pill:nth-child(8)  { background: linear-gradient(135deg,#16a34a,#65a30d); }  /* green-lime        */
.msm-disc-pill:nth-child(9)  { background: linear-gradient(135deg,#dc2626,#ea580c); }  /* red-orange        */
.msm-disc-pill:nth-child(10) { background: linear-gradient(135deg,#7c3aed,#ec4899); }  /* purple-pink       */
.msm-disc-pill:nth-child(11) { background: linear-gradient(135deg,#0f766e,#0891b2); }  /* teal-cyan         */
.msm-disc-pill:nth-child(12) { background: linear-gradient(135deg,#1d4ed8,#7c3aed); }  /* blue-purple       */
.msm-disc-pill:nth-child(13) { background: linear-gradient(135deg,#be123c,#f43f8a); }  /* crimson-rose      */

/* ── Scrollable rows container ──────────────────────────────────────────── */
.msm-disc-rows {
    flex: 1;
    overflow-y: auto;
    padding: 14px 0 20px;
    scrollbar-width: none;
}
.msm-disc-rows::-webkit-scrollbar { display: none; }

/* ── Individual row ─────────────────────────────────────────────────────── */
.msm-disc-row { margin-bottom: 22px; }
.msm-disc-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 9px;
}
.msm-disc-row-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
    letter-spacing: -0.01em;
}
.msm-disc-see-all {
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}

/* ── Horizontal card scroll ─────────────────────────────────────────────── */
.msm-disc-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 14px 6px;
    scrollbar-width: none;
}
.msm-disc-cards::-webkit-scrollbar { display: none; }

/* ── Course card ────────────────────────────────────────────────────────── */
.msm-disc-card {
    min-width: 148px;
    max-width: 148px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: var(--shadow3);
}
.msm-disc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.msm-disc-card-locked { opacity: .7; }
.msm-disc-card-locked:hover { transform: none; }

.msm-disc-thumb {
    height: 80px;
    background: var(--bg3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msm-disc-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msm-disc-thumb-placeholder {
    font-size: 32px;
    color: var(--text3);
}
.msm-disc-play-circle {
    position: absolute;
    bottom: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(26,111,232,.4);
}
.msm-disc-lock-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    line-height: 1;
}

.msm-disc-info { padding: 8px 10px 10px; }
.msm-disc-cat {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
    font-family: var(--font);
}
.msm-disc-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    font-family: var(--font);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}
.msm-disc-views {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--font);
    margin-bottom: 4px;
}
.msm-disc-prog-bar {
    height: 3px;
    background: var(--bg3);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 3px;
}
.msm-disc-prog-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
}
.msm-disc-prog-pct {
    font-size: 9.5px;
    color: var(--text3);
    font-family: var(--font);
}

/* ── v89: Learning Hub — greeting + search top block ────────────────────── */
.msm-hub-top {
    background: var(--surface, #fff);
    padding: 14px 16px 0;
    border-bottom: 1px solid var(--border, #eee);
    transition: border-color .15s;
    flex-shrink: 0;
}
.msm-hub-top.msm-hub-searching {
    border-color: transparent;
}

/* Greeting */
.msm-hub-greeting {
    margin-bottom: 12px;
    overflow: hidden;
    max-height: 52px;
    transition: max-height .2s ease, opacity .15s, margin-bottom .2s;
}
.msm-hub-greeting.msm-hub-greeting--hidden {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}
.msm-hub-greet-sub {
    font-size: 12px;
    color: var(--text3, #999);
    line-height: 1;
    margin-bottom: 2px;
}
.msm-hub-greet-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text, #1a1a2e);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.msm-hub-greet-class {
    font-weight: 500;
    color: var(--text3, #bbb);
    font-size: 17px;
}

/* Search bar */
.msm-hub-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg3, #f0f0f2);
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 13px;
    padding: 9px 12px;
    margin-bottom: 13px;
    cursor: text;
    transition: background .15s, border-color .15s;
}
.msm-hub-search-wrap.msm-hub-search-active {
    background: var(--surface, #fff);
    border-color: var(--accent, #1a6fe8);
    border-width: 2px;
}
.msm-hub-search-icon {
    display: flex;
    align-items: center;
    color: var(--text3, #bbb);
    flex-shrink: 0;
    transition: color .15s;
}
.msm-hub-search-wrap.msm-hub-search-active .msm-hub-search-icon {
    color: var(--accent, #1a6fe8);
}
.msm-hub-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--text, #1a1a2e);
    font-family: var(--font, inherit);
    min-width: 0;
}
.msm-hub-search-input::placeholder { color: var(--text3, #bbb); }

.msm-hub-search-clear {
    background: var(--border, #ddd);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text2, #666);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

/* Panel head search mode — back btn becomes active, close hidden */
#msm-hub-close-btn.msm-hub-btn-hidden { display: none; }
#msm-hub-back-btn.msm-hub-back-search {
    background: transparent !important;
    box-shadow: none !important;
}

/* Search overlay */
.msm-hub-search-overlay {
    padding: 14px 16px;
}

/* Quick picks label */
.msm-hub-ql-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text3, #bbb);
    margin-bottom: 8px;
    padding-left: 2px;
}

/* Quick pick buttons */
.msm-hub-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 2px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border, #f0f0f0);
    cursor: pointer;
    text-align: left;
    font-family: var(--font, inherit);
    font-size: 13.5px;
    color: var(--text2, #555);
    transition: background .1s;
}
.msm-hub-quick-item:last-child { border-bottom: none; }
.msm-hub-quick-item:hover { background: var(--bg2, #f9f9fb); }

/* Results sections */
.msm-hub-results-section { margin-bottom: 18px; }
.msm-hub-results-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text3, #bbb);
    margin-bottom: 8px;
    padding-left: 2px;
}

/* Result rows */
.msm-hub-result-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #f0f0f0);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background .1s;
    width: 100%;
    text-align: left;
    font-family: var(--font, inherit);
}
.msm-hub-result-row:hover { background: var(--bg2, #fafafe); }

.msm-hub-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(26,111,232,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #1a6fe8);
    flex-shrink: 0;
}
.msm-hub-result-thumb {
    width: 46px;
    height: 34px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0f172a;
}
.msm-hub-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    display: block;
}
.msm-hub-result-text { flex: 1; min-width: 0; }
.msm-hub-result-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #1a1a2e);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msm-hub-result-name mark {
    background: rgba(26,111,232,.14);
    color: var(--accent, #1a6fe8);
    border-radius: 2px;
    font-style: normal;
    padding: 0 1px;
}
.msm-hub-result-sub { font-size: 11px; color: var(--text3, #aaa); }

.msm-hub-result-play {
    width: 22px;
    height: 22px;
    background: var(--accent, #1a6fe8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.msm-hub-result-lock { color: var(--text3, #ccc); flex-shrink: 0; line-height: 0; }

.msm-hub-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--text3, #aaa);
}
.msm-hub-empty-icon { font-size: 30px; margin-bottom: 10px; }
.msm-hub-empty-title { font-size: 14px; font-weight: 600; color: var(--text2, #555); margin-bottom: 4px; }
.msm-hub-empty-sub { font-size: 12px; }

/* ── v93: "Can't find it? Request it" — Simulation/video requests ────────── */
.msm-simreq-btn {
    margin-top: 14px;
    background: var(--accent, #1a6fe8);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.msm-simreq-btn:disabled { opacity: .6; cursor: default; }

.msm-simreq-card {
    margin: 18px 14px 14px;
    padding: 20px 16px;
    border: 1.5px dashed var(--border, #e2e8f0);
    border-radius: 14px;
    text-align: center;
    background: var(--bg2, #fafbfc);
}
.msm-simreq-emoji { font-size: 26px; margin-bottom: 6px; }
.msm-simreq-title { font-size: 14px; font-weight: 700; color: var(--text2, #333); margin-bottom: 4px; }
.msm-simreq-sub { font-size: 12px; color: var(--text3, #888); margin-bottom: 12px; line-height: 1.5; }
.msm-simreq-input {
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: #fff;
    color: #222;
}
.msm-simreq-send {
    background: var(--accent, #1a6fe8);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}
.msm-simreq-send:disabled { opacity: .6; cursor: default; }
.msm-simreq-toggle-wrap { margin-top: 10px; }
.msm-simreq-toggle { font-size: 11.5px; color: var(--text3, #999); text-decoration: none; }
.msm-simreq-optional {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.msm-simreq-optional select {
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border, #e2e8f0);
    max-width: 150px;
    background: #fff;
    color: #222;
}

/* ── "Open in Tutor LMS" link ───────────────────────────────────────────── */
.msm-disc-tutor-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    font-family: var(--font);
    padding: 14px 14px 6px;
    text-decoration: none;
    border-top: 1px solid var(--border);
    margin-top: 10px;
}
.msm-disc-tutor-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   v45 — Continue Learning Carousel  (scale-on-centre edition)
   ════════════════════════════════════════════════════════════════════════════ */

/* Outer viewport — clips track horizontally, adds vertical breathing room
   for the scale-up effect (overflow-y: visible so zoomed card isn't cropped) */
.msm-carousel-wrap {
    position: relative;
    overflow: hidden;
    /* Extra vertical padding so the scaled-up centre card doesn't clip */
    padding: 10px 0 14px;
    cursor: grab;
    user-select: none;
    /* Soft edge fades — the "infinite ribbon" premium look */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 9%,
        #000 91%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 9%,
        #000 91%,
        transparent 100%
    );
}
/* For the sim carousel, left side stays fully visible (featured card is at left) */
#msm-sim-carousel {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 84%, transparent 100%);
    overflow: hidden;
    padding: 14px 0 18px;
}
#msm-sim-track {
    display: flex;
    gap: 22px;
    will-change: transform;
    padding: 0 0 0 16px;
    align-items: flex-start;
}
/* All sim cards — base size; JS scales the featured one up, queued ones down.
   transform-origin: left top so the featured card grows DOWNWARD from its
   top edge (matching the queued cards' tops), not from its vertical centre. */
#msm-sim-track .msm-disc-card {
    flex-shrink: 0;
    min-width: 190px;
    max-width: 190px;
    transform-origin: left top;
    will-change: transform, box-shadow;
    cursor: pointer;
    opacity: 1 !important;
}
.msm-carousel-wrap:active { cursor: grabbing; }

/* The moving strip — JS drives translateX, GPU composited */
.msm-carousel-track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 0 20px;
    will-change: transform;
}

/* Cards inside carousel — JS controls transform & opacity per-frame */
.msm-carousel-track .msm-disc-card {
    min-width: 152px;
    max-width: 152px;
    flex-shrink: 0;
    /* JS overrides this per card; CSS baseline keeps things tidy */
    transform-origin: center center;
    box-shadow: 0 4px 16px rgba(0,0,0,.13);
}

/* Centre card highlight — elevated shadow when at peak scale */
.msm-carousel-track .msm-disc-card.msm-card-centre {
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}


/* ── Most Watched Simulations: plain horizontal scroll, no JS transform ─── */
#msm-mw-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: default;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 0 10px;
}
#msm-mw-carousel::-webkit-scrollbar { display: none; }

#msm-mw-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 16px 4px;
    width: max-content;
    transform: none !important;
    transition: none !important;
    will-change: auto;
}
#msm-mw-track .msm-disc-card {
    flex-shrink: 0;
    min-width: 152px;
    max-width: 152px;
    transform: none !important;
    transform-origin: center center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.13);
}

/* ════════════════════════════════════════════════════════════════════════════
   Video / Lesson Player Modal
   ════════════════════════════════════════════════════════════════════════════ */
.msm-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 210;
    display: none;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(3px);
}
/* JS .show() sets display:block — override so flexbox centering works */
.msm-video-modal[style*="display: block"],
.msm-video-modal[style*="display:block"] {
    display: flex !important;
}
.msm-video-modal-inner {
    width: 100%;
    max-height: 92%;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,.3);
}
.msm-video-modal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.msm-video-modal-title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msm-video-modal-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
    height: 100%;
}
.msm-video-modal-body::-webkit-scrollbar { display: none; }



/* ── Simulation Panel (desktop full-panel viewer) ────────────────────────── */
.msm-sim-panel-head {
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    gap: 10px;
    padding: 0 14px;
}
.msm-sim-panel-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msm-sim-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: #000;
    min-height: 0;
}
.msm-sim-panel-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
    display: block;
}

/* ── Video embed ─────────────────────────────────────────────────────────── */
.msm-sim-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--surface);
    z-index: 5;
    pointer-events: none;
    transition: opacity .35s ease;
}
.msm-sim-loader--done {
    opacity: 0;
}
.msm-sim-loader__orbs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.msm-sim-loader__orbs span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--brand, #1a6fe8);
    animation: msm-sim-orb 1.2s ease-in-out infinite both;
}
.msm-sim-loader__orbs span:nth-child(1) { animation-delay: 0s; }
.msm-sim-loader__orbs span:nth-child(2) { animation-delay: .18s; }
.msm-sim-loader__orbs span:nth-child(3) { animation-delay: .36s; }
@keyframes msm-sim-orb {
    0%, 80%, 100% { transform: scale(.5); opacity: .3; }
    40%            { transform: scale(1);  opacity: 1;  }
}
.msm-sim-loader__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text2);
    font-family: var(--font);
    letter-spacing: .01em;
    margin: 0;
    animation: msm-sim-label-pulse 2s ease-in-out infinite;
}
@keyframes msm-sim-label-pulse {
    0%, 100% { opacity: .55; }
    50%       { opacity: 1;   }
}
.msm-video-embed-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.msm-video-player {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}
.msm-video-lesson-title {
    padding: 10px 14px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
    border-bottom: 1px solid var(--border);
}

/* ── Lesson list ─────────────────────────────────────────────────────────── */
.msm-lesson-topic {
    padding: 10px 14px 6px;
    border-bottom: 1px solid var(--border);
}
.msm-lesson-topic-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font);
    margin-bottom: 8px;
}
.msm-lesson-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 6px;
    border-radius: 8px;
    cursor: default;
    margin-bottom: 2px;
    transition: background .12s;
}
.msm-lesson-item:hover { background: var(--accent-bg); }
.msm-lesson-done .msm-lesson-label { color: var(--text3); text-decoration: line-through; }
.msm-lesson-icon { font-size: 14px; flex-shrink: 0; }
.msm-lesson-label {
    flex: 1;
    font-size: 12.5px;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.3;
}
.msm-lesson-play-btn {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: opacity .13s;
    white-space: nowrap;
}
.msm-lesson-play-btn:hover { opacity: .85; }

/* ── Desktop: modal sits as floating sheet (not full-height bottom sheet) ── */
@media (min-width: 600px) {
    .msm-video-modal {
        align-items: center;
        padding: 20px;
    }
    .msm-video-modal-inner {
        max-width: 720px;
        width: 90%;
        border-radius: 18px;
        height: 85vh;
        max-height: 85vh;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v74 — Simulation Cards (course-card style with carousel)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sim default thumbnail when no image set */
.msm-sim-thumb-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f2027 0%, #1a3a2a 50%, #16213e 100%);
    color: #22c55e;
}

/* Play button on unlocked sim cards */
.msm-sim-play-circle {
    position: absolute;
    bottom: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(22,163,74,.5);
}

/* Category label for sim cards */
.msm-sim-cat {
    color: #22c55e !important;
}

/* Sim carousel uses same wrap as continue carousel */
#msm-sim-carousel {
    overflow: hidden;
    width: 100%;
    padding: 6px 0;
}
/* Locked sim card — green tint overlay on thumb */
.msm-sim-card-v2.msm-disc-card-locked .msm-disc-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
}

/* ════════════════════════════════════════════════════════════════════════════
   v29 — Campaign Leaderboard Tab
   ════════════════════════════════════════════════════════════════════════════ */

.msm-camp-tab-toggle {
    margin-top: 18px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
.msm-camp-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: opacity .15s;
}
.msm-camp-tab-btn:hover { opacity: .9; }
.msm-camp-chevron { margin-left: auto; font-size: 11px; }

/* ── Panel ─────────────────────────────────────────────────────────────── */
.msm-camp-panel {
    background: var(--surface2);
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--border);
    border-top: none;
    overflow: hidden;
}

/* ── Campaign header ───────────────────────────────────────────────────── */
.msm-camp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.msm-camp-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--font);
}
.msm-camp-meta {
    font-size: 11px;
    color: var(--text3);
    margin-top: 2px;
}
.msm-camp-join-btn {
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .14s;
}
.msm-camp-join-btn:hover { opacity: .88; }
.msm-camp-joined-badge {
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    border-radius: 20px;
    padding: 5px 12px;
}
.msm-camp-gate {
    font-size: 11.5px;
    color: var(--text3);
    background: var(--bg3);
    border-radius: 20px;
    padding: 5px 12px;
}

/* ── My stats ──────────────────────────────────────────────────────────── */
.msm-camp-my-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}
.msm-camp-stat {
    background: var(--surface);
    padding: 12px 14px;
    text-align: center;
}
.msm-camp-stat-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    font-family: var(--font);
    line-height: 1;
}
.msm-camp-holiday-val {
    color: var(--accent-warm);
}
.msm-camp-stat-lbl {
    font-size: 10px;
    color: var(--text3);
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.msm-camp-copy-btn {
    background: var(--accentBg, #f3f0ff);
    color: var(--accent);
    border: none;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
}

/* ── My stats v2 — individual glass cards with an icon badge, matching the
   redesign's stat-card language instead of a plain bordered table grid ── */
.msm-camp-my-stats-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: transparent;
    border-bottom: none;
    padding: 10px 14px 4px;
}
@media (min-width: 480px) {
    .msm-camp-my-stats-v2 { grid-template-columns: repeat(4, 1fr); }
}
.msm-camp-stat-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 6px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
}
.msm-camp-stat-v2:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.07); }
.msm-camp-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accentBg, #eef2ff);
    color: var(--accent);
    margin-bottom: 2px;
}
.msm-camp-stat-icon-fire { background: var(--accent-warm-bg); color: var(--accent-warm); }
.msm-camp-stat-v2 .msm-camp-stat-val { font-size: 17px; margin: 0; }
.msm-camp-stat-v2 .msm-camp-stat-lbl { margin-top: 0; font-size: 9.5px; }

/* ── Chip medals — for prize chips / winner banner, on light card backgrounds
   (distinct from .msm-lb-medal-1/2/3 which are tuned for the dark podium) ── */
.msm-lb-chip-medal { flex-shrink: 0; stroke-width: 2.2; }
.msm-lb-chip-medal-1 { color: #d97706; width: 16px; height: 16px; }
.msm-lb-chip-medal-2 { color: #64748b; width: 16px; height: 16px; }
.msm-lb-chip-medal-3 { color: #a0522d; width: 16px; height: 16px; }
.msm-camp-prize-pos {
    font-size: 11px;
    font-weight: 800;
    color: var(--text2);
}

/* ── Locked-quests state icon ── */
.msm-lb-locked-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    margin-bottom: 8px;
}

/* ── Prizes ────────────────────────────────────────────────────────────── */
.msm-camp-prizes {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
}
.msm-camp-prizes-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
    font-family: var(--font);
}
.msm-camp-prizes-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    flex-wrap: wrap;
}
/* With only one prize position the title is short and sits comfortably
   next to the pill on one line. With more than one, the "(N positions)"
   suffix makes the title the long-lived, changeable part — so it gets the
   flexible slot and wraps onto its own line first, while the pill (fixed-
   width, same every time) holds its place at the row's end instead of
   getting squeezed. */
.msm-camp-prizes-title-row .msm-camp-prizes-title {
    margin-bottom: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.msm-camp-prizes-title-row .msm-rules-pill { flex-shrink: 0; }
.msm-rules-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 8px;
    margin-bottom: 8px;
    border-radius: 20px;
    background: var(--accent-bg);
    color: var(--lb-accent, var(--accent));
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border2, rgba(26,111,232,.18));
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
}
.msm-rules-pill:hover { background: var(--accent-warm-bg); color: var(--accent-warm); }

/* ── How to Win rules sheet ───────────────────────────────────────────── */
.msm-rules-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}
.msm-rules-overlay[hidden] { display: none; }
.msm-rules-sheet {
    width: 100%;
    max-width: 460px;
    background: var(--surface, #fff);
    border-radius: 18px 18px 0 0;
    padding: 18px 18px 22px;
    max-height: 85vh;
    overflow-y: auto;
    font-family: var(--font);
}
.msm-rules-handle { width: 36px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 14px; }
.msm-rules-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}
.msm-rules-sub { font-size: 12.5px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
.msm-rules-step { display: flex; gap: 12px; margin-bottom: 14px; }
.msm-rules-step-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--lb-accent, var(--accent));
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msm-rules-step-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.msm-rules-step-copy { font-size: 12.5px; color: var(--text2); line-height: 1.55; }
.msm-rules-ways { margin: 6px 0 0; padding-left: 18px; }
.msm-rules-ways li { font-size: 12.5px; color: var(--text2); line-height: 1.6; }
.msm-rules-ways li b { color: var(--text); font-weight: 700; }
.msm-rules-prize-table {
    background: var(--bg2, var(--surface));
    border-radius: 12px;
    padding: 8px 12px;
    margin: 4px 0 16px;
    font-size: 12px;
}
.msm-rules-prize-table div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    color: var(--text);
}
.msm-rules-prize-table div:not(:last-child) { border-bottom: 1px solid var(--border); }
.msm-rules-fine {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.55;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}
.msm-rules-close-btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border-radius: 12px;
    background: var(--lb-accent, var(--accent));
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 13.5px;
    font-family: var(--font);
    cursor: pointer;
}
.msm-camp-prizes-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.msm-camp-prize-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-family: var(--font);
}
.msm-camp-prize-icon { font-size: 16px; }
.msm-camp-prize-lbl  { font-weight: 700; color: var(--text); }

/* ── Leaderboard list ──────────────────────────────────────────────────── */
.msm-camp-lb-title, .msm-camp-last-title {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font);
    border-bottom: 1px solid var(--border);
}
.msm-camp-last-title { border-top: 1px solid var(--border); margin-top: 4px; }
.msm-camp-lb-list { padding: 6px 0; }
.msm-camp-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.msm-camp-lb-row:last-child { border-bottom: none; }
.msm-camp-lb-row:hover { background: var(--bg3); }
.msm-camp-lb-me {
    background: var(--accentBg, #f3f0ff) !important;
    border-left: 3px solid var(--accent);
}
.msm-camp-lb-rank { font-size: 18px; flex-shrink: 0; min-width: 28px; }
.msm-camp-lb-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font); }
.msm-camp-lb-xp   { font-size: 12px; font-weight: 700; color: var(--accent); font-family: var(--font); white-space: nowrap; }
.msm-camp-lb-prize {
    font-size: 11px;
    font-weight: 700;
    color: #ca8a04;
    background: #fef9c3;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    margin-left: 4px;
}

/* ── v30 — See All expanded grid + Back button ──────────────────────────── */
.msm-disc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 12px 14px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font);
    cursor: pointer;
    transition: background .13s;
}
.msm-disc-back-btn:hover { background: var(--accentBg, #f3f0ff); }

/* Wrap cards into a grid when showing "See all" ──────────────────────────── */
.msm-disc-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 14px 16px;
    overflow-x: visible;
}
.msm-disc-cards-wrap .msm-disc-card {
    min-width: 142px;
    max-width: calc(50% - 5px);
    flex: 1 1 142px;
}
@media (min-width: 540px) {
    .msm-disc-cards-wrap .msm-disc-card {
        max-width: calc(33.33% - 7px);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   v31 — Panel full-screen, See All dark mode, Loader, Nav tweaks
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Slide-from-right: desktop panels also full-screen within main area ─── */
@media (min-width: 701px) {
    .msm-panel,
    .msm-panel-wide {
        /* On desktop constrain to the content column, not the whole viewport */
        left: 260px !important;  /* sidebar width */
        width: calc(100% - 260px) !important;
    }
    .msm-panel-scrim {
        left: 260px !important;
    }
    .msm-video-modal-inner {
        max-width: 800px;
        width: 90%;
        height: 88vh;
        max-height: 88vh;
    }
}
@media (max-width: 700px) {
    .msm-panel,
    .msm-panel-wide {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
    }
    /* Video modal */
    .msm-video-modal { align-items: flex-end; padding: 0; }
    .msm-video-modal-inner { max-height: 95vh; height: 95vh; border-radius: 16px 16px 0 0; }
}

/* ── Fix 2: See All button — dark mode aware ─────────────────────────────── */
.msm-disc-see-all {
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font);
    cursor: pointer;
    transition: background .13s, color .13s;
    white-space: nowrap;
}
.msm-disc-see-all:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Fix 3: For You nav item styling ────────────────────────────────────── */
.msm-nav-foryou {
    position: relative;
}

/* ── Teacher Mode — sidebar nav item ────────────────────────────────────── */
.msm-nav-teacher-mode {
    position: relative;
    border-left: 3px solid #f59e0b !important;
    background: linear-gradient(90deg, rgba(245,158,11,.08) 0%, transparent 100%) !important;
    padding-left: calc(var(--nav-px, 14px) - 3px) !important;
}
.msm-nav-teacher-mode .msm-nav-icon {
    color: #d97706;
}
.msm-nav-teacher-mode:hover {
    background: linear-gradient(90deg, rgba(245,158,11,.15) 0%, transparent 100%) !important;
}
.msm-nav-teacher-mode.active {
    background: linear-gradient(90deg, rgba(245,158,11,.22) 0%, transparent 100%) !important;
    border-left-color: #d97706 !important;
}

/* ── Teacher Mode — tray card ───────────────────────────────────────────── */
/* Teacher Mode as a primary nav button (teacher accounts) */
#msm-mob-teacher { position: relative !important; }

.msm-more-tray-item-teacher {
    border: 1.5px solid #f59e0b !important;
    background: linear-gradient(145deg, #fffbeb, #fef3c7) !important;
    position: relative;
}
.msm-more-tray-item-teacher .msm-more-tray-icon {
    color: #d97706;
}
.msm-tray-teacher-badge {
    position: absolute;
    top: 5px;
    right: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    border-radius: 20px;
    padding: 2px 5px;
    font-family: var(--font);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ── Fix 4: Proper animated loader ──────────────────────────────────────── */
.msm-disc-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text3);
    font-size: 12.5px;
    font-family: var(--font);
}

/* ── v28: Teacher-only "For You" CTA ─────────────────────────────── */
.msm-teacher-courses-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px 28px;
    font-family: var(--font);
}
.msm-tcc-icon {
    font-size: 44px;
    margin-bottom: 14px;
    line-height: 1;
}
.msm-tcc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text1);
    margin-bottom: 10px;
    line-height: 1.35;
}
.msm-tcc-body {
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 22px;
}
.msm-tcc-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent, #1a6fe8);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: opacity .15s;
    margin-bottom: 16px;
}
.msm-tcc-copy-btn:hover { opacity: .88; }
.msm-tcc-copy-icon { font-style: normal; }
.msm-tcc-divider {
    font-size: 11px;
    color: var(--text3);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.msm-tcc-learner-link {
    font-size: 12.5px;
    color: #7c3aed;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 14px;
}
.msm-tcc-learner-link:hover { text-decoration: underline; }
.msm-tcc-note {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.55;
    max-width: 300px;
    padding: 10px 14px;
    background: var(--surface2, rgba(0,0,0,.04));
    border-radius: 8px;
    margin-top: 4px;
}
.msm-spin-ring {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: msm-spin-ring 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes msm-spin-ring {
    to { transform: rotate(360deg); }
}
/* Replace existing panel-spinner text with ring on any panel */
.msm-panel-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 0;
    color: var(--text3);
    font-size: 12px;
}
.msm-panel-spinner::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: msm-spin-ring 0.7s linear infinite;
}

/* ── For You nav icon — graduation cap needs 22px to visually match
   the trophy/leaderboard icon at 18px (hat shape is flatter, needs more px). */
#msm-mob-foryou .msm-mobile-nav-icon .msm-svg-icon,
.msm-nav-foryou .msm-nav-icon .msm-svg-icon {
    width: 22px;
    height: 22px;
}

/* ── Watch button — flex so SVG + label sit on one line ─────────────────── */
.msm-lesson-play-btn {
    display: inline-flex;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   v34 FIXES — Issues #2, #4, #5, #6, #7
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Redesign: single toolbar, no title row ──────────────────────────────
   Scope tabs (All Classes / All Time / Weekly / Holiday) lead as the
   primary, larger control since that's what students actually use to
   navigate. Earn XP / Hide me sit in a slim, quieter row underneath —
   smaller and lower-contrast so they read as secondary utilities instead
   of competing for attention with navigation. */
.msm-lb-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 12px;
}

/* Primary row: class filter + scope tabs */
.msm-lb-scope-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.msm-lb-class-select {
    appearance: none;
    background: var(--lb-bg, #f9f8f5);
    border: 1px solid var(--lb-border, #e4e2da);
    border-radius: 20px;
    padding: 6px 24px 6px 12px;
    font-size: 12.5px;
    font-family: var(--font);
    font-weight: 600;
    color: var(--lb-text2, #6b6558);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b6558' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.msm-lb-period-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.msm-lb-period-tab {
    background: var(--lb-bg, #f9f8f5);
    border: 1.5px solid var(--lb-border, #e4e2da);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--lb-text2, #6b6558);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.msm-lb-period-tab:hover { border-color: var(--lb-accent, #1a6fe8); color: var(--lb-accent, #1a6fe8); }
.msm-lb-period-active {
    background: var(--lb-accent, #1a6fe8) !important;
    border-color: var(--lb-accent, #1a6fe8) !important;
    color: #fff !important;
}

/* ⋯ overflow — Earn XP + Hide me live here now instead of their own row.
   Pinned to the end of the scope row (same row as the filter tabs). */
.msm-lb-more-wrap {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}
.msm-lb-more-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lb-bg, #f9f8f5);
    border: 1.5px solid var(--lb-border, #e4e2da);
    color: var(--lb-text2, #6b6558);
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
}
.msm-lb-more-btn:hover { border-color: var(--lb-accent, #1a6fe8); color: var(--lb-accent, #1a6fe8); }
.msm-lb-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 168px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msm-lb-more-menu[hidden] { display: none; }
.msm-lb-more-menu .msm-lb-xp-hint-btn,
.msm-lb-more-menu .msm-lb-optout-compact {
    width: 100%;
    justify-content: flex-start;
    border-radius: 8px;
    padding: 8px 10px;
    opacity: 1;
}
.msm-lb-more-menu .msm-lb-xp-hint-btn:hover,
.msm-lb-more-menu .msm-lb-optout-compact:hover { background: var(--bg3); }

/* Secondary row: Earn XP + Hide me — deliberately quieter (no fill,
   thinner border, smaller type) so the eye lands on scope tabs first. */
.msm-lb-utility-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--lb-border, #e4e2da);
    padding-top: 8px;
    margin-top: 2px;
}
.msm-lb-optout-compact {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 20px;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--lb-text3, #6d6255);
    opacity: .75;
    transition: opacity .13s, background .13s;
    user-select: none;
    white-space: nowrap;
}
.msm-lb-optout-compact:hover { opacity: 1; background: var(--lb-bg, #f9f8f5); }
.msm-lb-optout-compact input[type="checkbox"] { display: none; }
.msm-lb-optout-compact:has(input:checked) {
    opacity: 1;
    background: var(--lb-border, #e4e2da);
    color: var(--lb-text, #1a1714);
}
.msm-lb-optout-icon { display: flex; align-items: center; }
/* Keep the old .msm-lb-optout-toggle working if it exists elsewhere */
.msm-lb-optout { display: none; } /* hide old toggle in new header */

/* ════════════════════════════════════════════════════════════════════════════
   v56 REDESIGN — SVG icons in place of emoji, glass-card stats, icon badges
   ════════════════════════════════════════════════════════════════════════════ */

/* Icons inline with tab/button/badge labels — reset the default button-icon
   margin (2620) and use gap on the flex parent instead, so sizing stays tight
   whether the icon is 12px or 18px. */
.msm-lb-period-tab,
.msm-lb-xp-hint-btn,
.msm-camp-subtab,
.msm-camp-hero-cta,
.msm-camp-hero-first-prize,
.msm-camp-ended-stamp,
.msm-camp-ended-next,
.msm-camp-prizes-title,
.msm-camp-hero-ends,
.msm-camp-holiday-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.msm-lb-period-tab .msm-svg-icon,
.msm-lb-xp-hint-btn .msm-svg-icon,
.msm-camp-subtab .msm-svg-icon,
.msm-lb-badge-icon,
.msm-lb-tab-icon,
.msm-lb-xp-hint-icon,
.msm-lb-subtab-icon {
    margin-right: 0 !important;
    flex-shrink: 0;
}
.msm-lb-period-tab { justify-content: center; }
.msm-lb-tab-icon { opacity: .8; }
.msm-lb-period-active .msm-lb-tab-icon { opacity: 1; }

/* Hero icon — was a bare emoji glyph, now a soft glass badge behind the SVG
   so it reads with the same weight the trophy emoji used to carry. */
.msm-camp-hero-trophy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.msm-lb-hero-icon {
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251,191,36,.55));
}
.msm-camp-hero-scheduled .msm-lb-hero-icon { color: #c4b5fd; filter: drop-shadow(0 0 8px rgba(196,181,253,.5)); }

/* ── FIX #5: New competitive campaign panel ──────────────────────────────── */
.msm-camp-panel-v2 {
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-top: 2px;
}

/* Hero banner */
.msm-camp-hero {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 18px 16px;
    overflow: hidden;
}
.msm-camp-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
}
.msm-camp-spark {
    position: absolute;
    width: 3px; height: 3px;
    background: #fbbf24;
    border-radius: 50%;
    animation: msm-spark-pulse 2s ease-in-out infinite alternate;
}
@keyframes msm-spark-pulse {
    from { opacity: .2; transform: scale(.8); }
    to   { opacity: 1;  transform: scale(1.4); }
}
.msm-camp-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* v58: hero now stacks — name/trophy/1st-prize on top, one full-width CTA
   slot underneath. Replaces the old layout where the countdown badge sat
   squeezed beside the trophy+name and could overlap/wrap awkwardly once
   the ticking seconds made its text longer than expected. */
.msm-camp-hero-inner-v2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px;
}
.msm-camp-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.msm-camp-hero-trophy {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(251,191,36,.6));
}
.msm-camp-hero-info { flex: 1; min-width: 0; }
.msm-camp-hero-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    font-family: var(--font);
    line-height: 1.2;
}
/* 1st-place prize, shown right under the title. Value is entirely driven
   by $first_prize_text in leaderboard.php (position-1 prize's admin-entered
   label or formatted amount) — never hard-coded here. */
.msm-camp-hero-first-prize {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #fde68a;
    margin-top: 3px;
}
.msm-camp-hero-ends {
    font-size: 11px;
    color: rgba(255,255,255,.7);
    margin-top: 4px;
}
.msm-camp-hero-ends strong { color: #fbbf24; }

/* ── Unified CTA slot ──────────────────────────────────────────────────
   Same position, same size, in every state — only the colour/content
   changes: scheduled countdown → Upgrade → Join & Compete → Competing. */
.msm-camp-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 11px 14px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    border: none;
}
button.msm-camp-hero-cta { cursor: pointer; transition: opacity .14s; }
button.msm-camp-hero-cta:hover { opacity: .88; }

.msm-camp-hero-cta-scheduled {
    background: rgba(196,181,253,.15);
    border: 1px solid rgba(196,181,253,.3);
    color: #c4b5fd;
}
.msm-camp-hero-cta-scheduled strong { color: #fff; }
.msm-camp-hero-cta-sep { opacity: .5; margin: 0 1px; }

.msm-camp-hero-cta-upgrade {
    color: #1a1a2e;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 1px 6px rgba(245,158,11,.3);
}
.msm-camp-hero-cta-join {
    color: #1a1a2e;
    font-weight: 800;
    font-size: 13.5px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 14px rgba(251,191,36,.4);
}
.msm-camp-hero-cta-competing {
    color: #4ade80;
    background: rgba(74,222,128,.15);
    border: 1px solid rgba(74,222,128,.3);
}
/* Scheduled hero state — launched early, waiting for start_at */
.msm-camp-hero-scheduled {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%) !important;
}
/* Campaign ended hero state */
.msm-camp-hero-ended {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.msm-camp-ended-wrap {
    position: relative;
    z-index: 1;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.msm-camp-ended-stamp {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 3px 10px;
}
.msm-camp-ended-name {
    font-size: 15px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.25;
}
.msm-camp-ended-winner-row {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.22);
    border-radius: 10px;
    padding: 7px 12px;
    margin-top: 2px;
}
.msm-camp-ended-winner-icon { font-size: 18px; }
.msm-camp-ended-winner-label {
    font-size: 12.5px;
    color: #fde68a;
    line-height: 1.4;
}
.msm-camp-ended-winner-label strong { color: #fbbf24; }
.msm-camp-ended-next {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
    padding-top: 2px;
}
/* Prizes v2 */
.msm-camp-prizes-v2 { background: var(--surface); }
.msm-camp-prize-chip-v2 {
    background: linear-gradient(135deg, var(--surface2), var(--bg3));
    border: 1.5px solid var(--border);
}
/* Live battle rankings header */
.msm-camp-lb-title-v2 {
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--font);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    letter-spacing: .02em;
}
/* Battle leaderboard rows */
.msm-camp-lb-v2 { background: var(--surface); padding: 4px 0; }
.msm-crank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.msm-crank-row:last-child { border-bottom: none; }
.msm-crank-row:hover { background: var(--bg3); }
/* Gold / Silver / Bronze highlights */
.msm-crank-gold   { background: linear-gradient(90deg, rgba(251,191,36,.08) 0%, transparent 60%); }
.msm-crank-silver { background: linear-gradient(90deg, rgba(148,163,184,.08) 0%, transparent 60%); }
.msm-crank-bronze { background: linear-gradient(90deg, rgba(205,127,50,.08) 0%, transparent 60%); }
.msm-crank-me {
    background: linear-gradient(90deg, rgba(26,111,232,.1) 0%, transparent 60%) !important;
    border-left: 3px solid var(--accent);
}
.msm-crank-pos {
    font-size: 20px;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.msm-crank-num {
    font-size: 12px;
    font-weight: 800;
    color: var(--text3);
    font-family: var(--font);
}
.msm-crank-info { flex: 1; min-width: 0; }
.msm-crank-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.msm-crank-you {
    font-size: 9.5px;
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 700;
}
.msm-crank-prize-badge {
    font-size: 10px;
    background: #fef9c3;
    color: #a16207;
    border-radius: 10px;
    padding: 2px 7px;
    font-weight: 700;
}
.msm-crank-bar-wrap {
    height: 4px;
    background: var(--border);
    border-radius: 99px;
    margin-top: 5px;
    overflow: hidden;
}
.msm-crank-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #7c3aed);
    border-radius: 99px;
    transition: width .6s cubic-bezier(.25,.46,.45,.94);
}
.msm-crank-gold   .msm-crank-bar { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.msm-crank-silver .msm-crank-bar { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.msm-crank-bronze .msm-crank-bar { background: linear-gradient(90deg, #b45309, #d97706); }
.msm-crank-xp {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    font-family: var(--font);
    white-space: nowrap;
    text-align: right;
    min-width: 60px;
}
.msm-crank-xp small { font-size: 10px; font-weight: 600; color: var(--text3); }
.msm-crank-past { opacity: .7; }
/* Empty state */
.msm-camp-empty-state {
    text-align: center;
    padding: 28px 20px;
    background: var(--surface);
}
.msm-camp-empty-icon { font-size: 32px; margin-bottom: 8px; }
.msm-camp-empty-text { font-size: 14px; font-weight: 700; color: var(--text); font-family: var(--font); }
.msm-camp-empty-sub  { font-size: 12px; color: var(--text3); margin-top: 4px; }
/* Dark mode for campaign v2 */
.msm-app[data-theme="dark"] .msm-camp-prize-chip-v2 { border-color: #334155; background: #1e293b; }
.msm-app[data-theme="dark"] .msm-crank-prize-badge  { background: #422006; color: #fbbf24; }

/* ── FIX #6: XP Earn modal — fix body hidden behind header ──────────────── */
/* Give the modal a concrete height on desktop so absolute-positioned screens
   have a real 100% to fill. Without this the screens collapse to 0 height. */
.msm-lb-xp-modal {
    /* Use min/max to keep it proportional but always tall enough */
    height: min(560px, 84vh);
    max-height: min(560px, 84vh);
}
/* On mobile the height is already 88dvh — don't override that */
@media (max-width: 480px) {
    .msm-lb-xp-modal {
        height: 88dvh;
        height: 88vh;
        max-height: none;
    }
}
/* Body: let flex drive height; remove old max-height that could clip top */
.msm-lb-xp-modal-body {
    max-height: none;
}
/* Prevent the outer page from scrolling when the modal body is scrolled.
   The backdrop is fixed, but without this the touch events on the ladder
   rows can bubble up and scroll the leaderboard page behind the modal,
   which makes it look like the modal header is scrolled off screen. */
.msm-lb-xp-modal-backdrop:not(.hidden) {
    touch-action: none;
}
/* Re-allow scrolling inside the modal body so the ladder remains touchable */
.msm-lb-xp-modal-body {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

/* ── FIX #7: For You mobile nav — align icon + text same as other items ──── */
#msm-mob-foryou {
    gap: 2px;              /* same as .msm-mobile-nav-item */
    display: flex;
    flex-direction: column;
    align-items: center;
}
#msm-mob-foryou .msm-mobile-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;         /* same bounding box as other icon spans */
}
/* 22px set above — do NOT override here; graduation cap needs the extra px */

/* Dark mode adjustments for new header elements */
.msm-app[data-theme="dark"] .msm-lb-period-tab {
    border-color: #334155;
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-lb-period-tab:hover {
    color: #60a5fa;
    border-color: #60a5fa;
}
.msm-app[data-theme="dark"] .msm-lb-optout-compact {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-lb-optout-compact:hover,
.msm-app[data-theme="dark"] .msm-lb-optout-compact:has(input:checked) {
    background: #1e293b;
}
.msm-app[data-theme="dark"] .msm-lb-toolbar .msm-lb-utility-row {
    border-top-color: #334155;
}
.msm-app[data-theme="dark"] .msm-lb-class-select {
    background-color: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ── Earn XP inline view (replaces floating backdrop modal) ─────────────────
   The view fills the panel-body height so the slide animation between
   screen-1 and screen-2 works exactly as before — just without an overlay. */
/* ── Earn XP inline view — absolute overlay inside the panel-body ────────────
   Sits on top of the main leaderboard content without disturbing its layout.   */
#msm-lb-earnxp-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    z-index: 10;
    overflow: hidden;
}
#msm-lb-earnxp-view .msm-lb-xp-modal {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#msm-lb-earnxp-view .msm-lb-xp-modal-body {
    max-height: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* Head: no bottom radius; keep top border only */
#msm-lb-earnxp-view .msm-lb-xp-modal-head {
    border-radius: 0;
    flex-shrink: 0;
}
/* The panel-body must be position:relative so the absolute child anchors to it */
#msm-leaderboard-panel .msm-panel-body {
    position: relative;
}

/* ── v39: Campaigns tab referral banner ──────────────────────────────────── */
.msm-camp-ref-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px 0;
    padding: 10px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
}
.msm-camp-ref-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}
.msm-camp-ref-banner-body {
    flex: 1;
    min-width: 0;
}
.msm-camp-ref-banner-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}
.msm-camp-ref-banner-url {
    font-size: 11px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.msm-camp-ref-banner-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    flex-shrink: 0;
    transition: opacity .15s;
}
.msm-camp-ref-banner-btn:hover { opacity: .85; }
.msm-app[data-theme="dark"] .msm-camp-ref-banner {
    background: #1e293b;
    border-color: #334155;
}

/* ── Referral funnel stats row ─────────────────────────────────────────── */
.msm-camp-ref-funnel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 16px 12px;
    padding: 8px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    opacity: .45;
    transition: opacity .3s;
}
.msm-camp-ref-funnel--loaded { opacity: 1; }
.msm-ref-funnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 48px;
}
.msm-ref-funnel-num {
    font-size: 17px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.msm-ref-funnel-lbl {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.msm-ref-funnel-arrow {
    font-size: 13px;
    color: var(--text3);
    opacity: .5;
    flex-shrink: 0;
}

/* ── Teacher Content Requests pane — status badges ─────────────────────── */
.msm-tcr-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.msm-tcr-status-open        { background: #fef3c7; color: #92400e; }
.msm-tcr-status-in_progress { background: #dbeafe; color: #1e40af; }
.msm-tcr-status-done        { background: #d1fae5; color: #065f46; }
.msm-tcr-admin-note {
    margin-top: 8px;
    padding: 7px 10px;
    background: var(--surface, #f8fafc);
    border-left: 3px solid #6c63ff;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text2, #374151);
}
[data-theme="dark"] .msm-tcr-status-open        { background: rgba(245,158,11,.15); color: #fcd34d; }
[data-theme="dark"] .msm-tcr-status-in_progress { background: rgba(59,130,246,.15); color: #93c5fd; }
[data-theme="dark"] .msm-tcr-status-done        { background: rgba(5,150,105,.15);  color: #6ee7b7; }
[data-theme="dark"] .msm-tcr-admin-note         { background: #252c42; border-color: #6c63ff; color: #c9d1e0; }


/* ══════════════════════════════════════════════════════════
   MULTI-STEP SIGNUP  (v-multistep)
   ══════════════════════════════════════════════════════════ */

/* ── Step progress dots ── */
.msm-signup-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 22px;
    margin-top: 2px;
}
.msm-signup-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border, rgba(148,163,184,.3));
    transition: background .2s, transform .2s;
    flex-shrink: 0;
}
.msm-signup-step-dot.msm-signup-step-active {
    background: var(--accent, #1a6fe8);
    transform: scale(1.25);
}
.msm-signup-step-dot.msm-signup-step-done {
    background: var(--accent, #1a6fe8);
    opacity: .45;
}
.msm-signup-step-line {
    width: 32px;
    height: 2px;
    background: var(--border, rgba(148,163,184,.3));
    flex-shrink: 0;
    transition: background .2s;
}
.msm-signup-step-line.msm-signup-line-done {
    background: var(--accent, #1a6fe8);
    opacity: .4;
}

/* ── Step panels ── */
.msm-signup-step-panel {
    animation: msm-panel-in .18s ease;
}
@keyframes msm-panel-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Role label ── */
.msm-step-role-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 12px;
    margin-top: 2px;
}

/* ── Role cards (big, tappable) ── */
.msm-role-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msm-role-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid var(--border, rgba(148,163,184,.25));
    background: var(--bg2, rgba(30,27,60,.4));
    color: var(--text2, #94a3b8);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    min-height: 54px;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
    width: 100%;
}
.msm-role-card:hover {
    border-color: rgba(139,92,246,.5);
    color: var(--text, #e2e8f0);
    box-shadow: 0 2px 12px rgba(139,92,246,.12);
}
.msm-role-card--active {
    border-color: rgba(139,92,246,.8);
    background: rgba(139,92,246,.12);
    color: var(--text, #e2e8f0);
    box-shadow: 0 0 0 3px rgba(139,92,246,.1);
}
.msm-role-card-icon {
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
}
.msm-role-card-icon .msm-svg-icon { width: 22px; height: 22px; }
.msm-role-card-label {
    flex: 1;
}

/* ── Step nav row (Back + Continue side by side) ── */
.msm-signup-step-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.msm-step-back-btn {
    flex-shrink: 0;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text2);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .13s, color .13s;
    white-space: nowrap;
}
.msm-step-back-btn:hover {
    background: var(--bg3);
    color: var(--text);
}
.msm-auth-submit--slim {
    flex: 1;
    width: auto;
}

/* ── Slim submit keeps same height as normal submit ── */
.msm-signup-step-nav .msm-auth-submit {
    margin-top: 0;
    flex: 1;
}

/* ── Keep old .msm-role-toggle/.msm-role-btn working for any place
      that hasn't been migrated yet ── */
.msm-role-toggle { display: flex; gap: 8px; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════
   SCHOOL NUDGE STRIP
   ══════════════════════════════════════════════════════════ */

.msm-school-nudge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: linear-gradient(90deg,
        rgba(139,92,246,.13) 0%,
        rgba(26,111,232,.09) 100%
    );
    border-bottom: 1.5px solid rgba(139,92,246,.25);
    flex-shrink: 0;
    animation: msm-strip-in .3s ease;
    position: relative;
}

.msm-school-nudge-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.msm-school-nudge-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.msm-school-nudge-body strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.msm-school-nudge-body span {
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.4;
}

.msm-school-nudge-cta {
    flex-shrink: 0;
    padding: 7px 18px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    transition: opacity .15s, transform .13s, box-shadow .15s;
    box-shadow: 0 3px 12px rgba(139,92,246,.35);
    white-space: nowrap;
}

.msm-school-nudge-cta:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(139,92,246,.45);
}

.msm-school-nudge-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text3);
    font-size: 13px;
    padding: 5px 7px;
    border-radius: 6px;
    transition: background .13s, color .13s;
    font-family: var(--font);
    line-height: 1;
}

.msm-school-nudge-close:hover {
    background: rgba(139,92,246,.1);
    color: var(--text);
}

/* Dark mode */
.msm-app[data-theme="dark"] .msm-school-nudge {
    background: linear-gradient(90deg,
        rgba(139,92,246,.18) 0%,
        rgba(26,111,232,.12) 100%
    );
    border-bottom-color: rgba(139,92,246,.3);
}

/* Mobile — stack text and CTA */
@media (max-width: 540px) {
    .msm-school-nudge {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .msm-school-nudge-body { width: calc(100% - 56px); }
    .msm-school-nudge-cta  { flex: 1; text-align: center; }
}

/* School field highlight — pulsed when opened from nudge CTA */
.msm-school-nudge-highlight {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,.2), 0 0 14px rgba(139,92,246,.25) !important;
    transition: box-shadow .3s, border-color .3s !important;
}

/* ── Refer & Earn — settings dropdown card ─────────────────────────────── */
.msm-sf-icon--amber { background: rgba(245,158,11,.14); color: #F59E0B; }

.msm-sf-ref-card {
    padding: 14px 14px 16px;
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.msm-app[data-theme="dark"] .msm-sf-ref-card {
    border-top-color: rgba(255,255,255,.07);
}

/* Stats row */
.msm-sf-ref-stats {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(0,0,0,.09));
}
.msm-app[data-theme="dark"] .msm-sf-ref-stats {
    border-color: rgba(255,255,255,.08);
}
.msm-sf-ref-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 6px;
    gap: 2px;
    border-right: 1px solid var(--border, rgba(0,0,0,.09));
    background: var(--surface2, rgba(0,0,0,.02));
}
.msm-app[data-theme="dark"] .msm-sf-ref-stat {
    background: rgba(255,255,255,.03);
    border-right-color: rgba(255,255,255,.07);
}
.msm-sf-ref-stat:last-child { border-right: none; }
.msm-sf-ref-stat--xp .msm-sf-ref-stat-num { color: #F59E0B; }
.msm-sf-ref-stat-num {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text1, #111);
    letter-spacing: -.5px;
}
.msm-app[data-theme="dark"] .msm-sf-ref-stat-num { color: #F1F5F9; }
.msm-sf-ref-stat-lbl {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text3, #9CA3AF);
    letter-spacing: .1px;
}

/* XP rate pills */
.msm-sf-ref-rates {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.msm-sf-ref-rates span {
    font-size: 11px;
    font-weight: 600;
    color: #F59E0B;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.22);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: .1px;
}

/* Referral link row */
.msm-sf-ref-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface2, rgba(0,0,0,.03));
    border: 1px solid var(--border, rgba(0,0,0,.09));
    border-radius: 10px;
    padding: 9px 10px;
}
.msm-app[data-theme="dark"] .msm-sf-ref-link-row {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.09);
}
.msm-sf-ref-url {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: var(--text2, #555);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    word-break: break-all;
}
.msm-app[data-theme="dark"] .msm-sf-ref-url { color: rgba(241,245,249,.65); }

.msm-sf-ref-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F59E0B;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .15s, transform .1s;
    letter-spacing: .1px;
}
.msm-sf-ref-copy-btn:active { transform: scale(.95); opacity: .88; }
.msm-sf-ref-copy-btn--copied { background: #22C55E !important; }

/* Share row */
.msm-sf-ref-share-row {
    display: flex;
    gap: 8px;
}
.msm-sf-ref-share-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0,0,0,.1));
    background: var(--surface2, rgba(0,0,0,.02));
    color: var(--text2, #555);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.msm-app[data-theme="dark"] .msm-sf-ref-share-btn {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: rgba(241,245,249,.8);
}
.msm-sf-ref-share-btn:active { transform: scale(.97); }
#msm-sf-ref-whatsapp { color: #25D366; border-color: rgba(37,211,102,.3); }
.msm-app[data-theme="dark"] #msm-sf-ref-whatsapp { color: #25D366; border-color: rgba(37,211,102,.3); }

/* Chevron rotation when expanded */
.msm-sf-ref-chevron { transition: transform .25s ease; }
.msm-sf-ref-chevron--open { transform: rotate(90deg); }

/* ── Slide Panel — header / back button polish ─────────────────────────── */
.msm-panel-head .msm-panel-back-btn,
.msm-panel-head .msm-panel-close-btn {
    flex-shrink: 0;
}
/* Panel title fills the space between back icon and close icon */
.msm-panel-head > span:not(.msm-icon-btn) {
    flex: 1;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* When only close (no back), title alignment */
.msm-panel-head > span:first-child {
    flex: 1;
}
/* Make panel-close-btn in the head look like an X, pushed to the right */
.msm-panel-head .msm-panel-close-btn {
    margin-left: auto;
}
/* Panel status bar spacer on mobile (phones with notch / status bar) */
@supports (padding-top: env(safe-area-inset-top)) {
    .msm-panel { padding-top: env(safe-area-inset-top); }
}

/* ── Slide-in modal overlay header bar ─────────────────────────────────── */
.msm-modal-overlay .msm-sf-head,
.msm-modal-overlay .msm-ep-head,
.msm-modal-overlay [class*="-modal-head"],
.msm-modal-overlay .msm-card-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Close / back inside modal overlays */
.msm-sf-close, .msm-ep-close, .msm-modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: none; border: none;
    color: var(--text); cursor: pointer;
    font-size: 18px;
    transition: background .15s;
}
.msm-sf-close:hover, .msm-ep-close:hover, .msm-modal-close:hover {
    background: var(--bg3);
}

/* ── Leaderboard panel body scroll fix ─────────────────────────────────── */
#msm-leaderboard-panel .msm-panel-body { padding: 0; }

/* ── v90: Just Added Simulations — conveyor belt row ─────────────────────── */
.msm-disc-row--just-added {
    margin: 0 0 2px;
    padding: 0 0 4px;
}
.msm-disc-row--just-added .msm-disc-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
}

/* Conveyor outer wrap — hides overflow, masks edges */
.msm-ja-conveyor-wrap {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    padding: 8px 0 12px;
    cursor: default;
}

/* Conveyor track — JS drives translateX */
.msm-ja-conveyor-track {
    display: flex;
    gap: 14px;
    width: max-content;
    will-change: transform;
    padding: 0 16px;
}

/* Cards inside the conveyor */
.msm-ja-conveyor-track .msm-disc-card {
    flex-shrink: 0;
    min-width: 152px;
    max-width: 152px;
    cursor: pointer;
    transform: none !important; /* no scale on these */
    transition: box-shadow .2s;
}
.msm-ja-conveyor-track .msm-disc-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* ── NEW ribbon for just-added sim cards ──────────────────────────────────── */
.msm-sim-new-ribbon {
    position: absolute;
    top: 6px;
    left: -3px;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 8px 2px 6px;
    border-radius: 0 20px 20px 0;
    z-index: 4;
    pointer-events: none;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(124,58,237,.35);
}
/* Make cards relative so the ribbon can be absolutely positioned */
.msm-disc-card {
    position: relative;
}

/* ── See All sims grid ────────────────────────────────────────────────────── */
.msm-sim-all-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 10px 14px 20px;
}
.msm-sim-all-grid .msm-disc-card {
    min-width: unset;
    max-width: unset;
    width: 100%;
}
@media (min-width: 480px) {
    .msm-sim-all-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── See all button on Interactive Simulations header ─────────────────────── */
.msm-sim-see-all {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #4f46e5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .15s;
}
.msm-sim-see-all:hover {
    background: var(--bg3, rgba(0,0,0,.06));
}

/* ══════════════════════════════════════════════════════════════════════════
   v96 — IN-APP CHECKOUT STEPPER
   Plan+details → Review → Embedded Pesapal → Done, all inside the plugin.
   ══════════════════════════════════════════════════════════════════════════ */
.msm-co-overlay {
    position:fixed;inset:0;z-index:1300;display:flex;align-items:center;
    justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
    padding:16px;overflow-y:auto;
}
body.msm-co-noscroll { overflow:hidden; }
.msm-co-card {
    width:100%;max-width:420px;background:var(--surface);border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;border:1px solid var(--border);
    animation:msm-modal-in .25s cubic-bezier(.34,1.56,.64,1);
    max-height:92vh;display:flex;flex-direction:column;
}
.msm-co-panel { display:none; }
.msm-co-panel.msm-co-active { display:flex;flex-direction:column;min-height:0;animation:msm-co-rise .3s cubic-bezier(.16,1,.3,1); }
@keyframes msm-co-rise { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.msm-co-topbar {
    background: radial-gradient(130% 140% at 12% -20%, #4f97ff 0%, #1a6fe8 42%, #0d3f9e 100%);
    padding:18px 20px 22px;color:#fff;position:relative;flex-shrink:0;
    border-radius:0 0 24px 24px;overflow:hidden;
}
.msm-co-topbar::before {
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.22) 0%, transparent 46%),
        radial-gradient(circle at 6% 96%, rgba(255,255,255,.12) 0%, transparent 42%);
}
.msm-co-topbar > * { position:relative;z-index:1; }
.msm-co-close {
    position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
    cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2;
}
.msm-co-back {
    position:absolute;left:10px;top:10px;width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2;
}
.msm-co-h1 { margin:0 0 3px;font-size:16px;font-weight:700;text-align:center;letter-spacing:-.2px;font-family:var(--font); }
.msm-co-sub { margin:0;text-align:center;font-size:12px;opacity:.85;font-weight:500; }
.msm-co-progress { display:flex;gap:6px;margin-top:14px; }
.msm-co-track { flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden; }
.msm-co-track .msm-co-fill { height:100%;width:0;background:#fff;border-radius:3px; }
.msm-co-track.msm-co-done .msm-co-fill,.msm-co-track.msm-co-active .msm-co-fill { width:100%; }

.msm-co-body { padding:20px 20px 22px;overflow-y:auto; }
.msm-co-body label {
    display:block;font-size:11.5px;font-weight:700;color:var(--text2);
    margin:14px 0 6px;letter-spacing:.15px;font-family:var(--font);
}
.msm-co-body input, .msm-co-body select {
    width:100%;padding:11px 13px;border-radius:11px;border:1.5px solid var(--border);
    font-family:var(--font);font-size:14px;background:var(--surface2);color:var(--text);outline:none;
    transition:border-color .15s,box-shadow .15s;
}
.msm-co-body input:focus, .msm-co-body select:focus {
    border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);
}
.msm-co-row2 { display:flex;gap:10px; }
.msm-co-row2 > div { flex:1; }
.msm-co-hint { font-size:11px;color:var(--text3);margin-top:6px;line-height:1.5; }

.msm-co-for-child {
    background:var(--accent-bg);border:1px solid var(--border);border-radius:10px;
    padding:9px 13px;font-size:12.5px;color:var(--text2);margin-bottom:14px;text-align:center;
}
.msm-co-for-child strong { color:var(--text); }

.msm-co-plan-card {
    background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
    padding:15px 16px;margin-bottom:6px;
}
.msm-co-plan-head { display:flex;justify-content:space-between;align-items:flex-start;gap:10px; }
.msm-co-plan-name { font-family:var(--font-serif);font-weight:600;font-size:16.5px;color:var(--text); }
.msm-co-plan-sub { font-size:12px;color:var(--text2);margin-top:3px; }
.msm-co-plan-price-wrap { text-align:right;flex-shrink:0; }
.msm-co-plan-price { font-family:var(--font-serif);font-weight:700;font-size:18px;color:var(--accent); }
.msm-co-plan-price #msm-co-plan-currency { font-size:11px;font-weight:700;opacity:.8; }

.msm-co-class-block { margin-top:13px;padding-top:13px;border-top:1px solid var(--border); }
.msm-co-class-block label { margin:0 0 7px; }

.msm-co-msg { margin-top:12px;font-size:12.5px;text-align:center; }
.msm-co-msg.msm-co-error { color:#dc2626; }
.msm-co-msg.msm-co-success { color:#16a34a; }

.msm-co-btn-primary {
    width:100%;margin-top:18px;padding:13px;border:none;border-radius:13px;
    background:linear-gradient(180deg,#2a7cf0,#1259c4);color:#fff;font-family:var(--font);
    font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 20px -6px rgba(26,111,232,.5);
    display:flex;align-items:center;justify-content:center;gap:8px;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.msm-co-btn-primary:disabled { opacity:.6;cursor:default;box-shadow:none; }
.msm-co-inline-btn { width:auto !important;display:inline-flex !important;padding:10px 20px !important; }

/* Review */
.msm-co-summary { background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:4px 16px;margin-top:6px; }
.msm-co-srow { display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:13.5px;color:var(--text2);border-bottom:1px solid var(--border); }
.msm-co-srow:last-child { border-bottom:none; }
.msm-co-srow .msm-co-v { color:var(--text);font-weight:600; }
.msm-co-srow.msm-co-total .msm-co-k { font-weight:700;color:var(--text);font-size:14px; }
.msm-co-srow.msm-co-total .msm-co-v { font-family:var(--font-serif);font-weight:700;font-size:17px;color:var(--accent); }

.msm-co-payer { background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:10px; }
.msm-co-who { font-size:12.5px;color:var(--text);font-weight:600; }
.msm-co-meta { font-size:11.5px;color:var(--text2);margin-top:2px; }
.msm-co-edit { font-size:12px;color:var(--accent);cursor:pointer;font-weight:700;flex-shrink:0; }

/* Embedded payment */
.msm-co-pay-intro { text-align:center;padding:2px 4px 2px; }
.msm-co-pay-icon { width:48px;height:48px;border-radius:14px;margin:2px auto 12px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:20px; }
.msm-co-pay-intro h3 { font-family:var(--font-serif);font-size:15.5px;font-weight:600;margin:0 0 6px;color:var(--text); }
.msm-co-pay-intro p { font-size:12px;color:var(--text2);line-height:1.6;margin:0; }

.msm-co-embed-frame { margin-top:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface); }
.msm-co-embed-chrome { display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface2);border-bottom:1px solid var(--border); }
.msm-co-dot { width:7px;height:7px;border-radius:50%;background:var(--border2,var(--border)); }
.msm-co-lock { font-size:10.5px;color:var(--text3);margin-left:auto;font-weight:600; }
.msm-co-embed-body { padding:22px 18px;text-align:center;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; }
.msm-co-spinner { width:28px;height:28px;border-radius:50%;border:3px solid var(--bg3);border-top-color:var(--accent);animation:msm-co-spin .9s linear infinite;margin-bottom:8px; }
@keyframes msm-co-spin { to{transform:rotate(360deg)} }
.msm-co-loading-label { font-size:12.5px;color:var(--text2);font-weight:600; }
#msm-co-iframe { width:100%;height:360px;border:none;display:block; }

.msm-co-fallback-row { font-size:11.5px;color:var(--text3);text-align:center;margin-top:10px; }
.msm-co-fallback-row a { color:var(--accent);font-weight:700;text-decoration:none; }

.msm-co-confirm-nudge { text-align:center;margin-top:14px;padding-top:10px;border-top:1px solid var(--border); }
.msm-co-confirm-nudge p { font-size:11.5px;color:var(--text2);line-height:1.55;margin:0 0 8px; }
.msm-co-link-btn { background:none;border:none;color:var(--accent);font-family:var(--font);font-weight:700;font-size:12.5px;cursor:pointer;padding:8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.msm-co-link-btn:disabled { opacity:.6; }

/* Success */
.msm-co-success { text-align:center;padding:14px 4px 2px; }
.msm-co-check-wrap {
    width:56px;height:56px;border-radius:50%;background:#f0fcf3;border:2px solid #a8eec0;
    display:flex;align-items:center;justify-content:center;margin:2px auto 14px;
    animation:msm-co-pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes msm-co-pop { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
.msm-co-success h3 { font-family:var(--font-serif);font-size:17px;font-weight:600;margin:0 0 8px;color:var(--text); }
.msm-co-success p { font-size:12.5px;color:var(--text2);margin:0 0 4px;line-height:1.55; }
.msm-co-order-strip {
    display:flex;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);
    border-radius:11px;padding:10px 15px;margin:16px 0 4px;font-size:12.5px;color:var(--text2);
}
.msm-co-order-strip b { color:var(--text);font-weight:700; }

.msm-app[data-theme="dark"] .msm-co-check-wrap { background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35); }