/* ── Mysomero AI 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) */

*,.msm-app *{box-sizing:border-box;margin:0;padding:0}

/* ── Variables ──────────────────────────────────────────────────────────── */
.msm-app {
    --bg:#fafaf8;--bg2:#f4f3ef;--bg3:#eceae4;
    --sidebar:#f0eeea;--sidebar2:#e8e5df;
    --sidebar-text:#1a1714;--sidebar-text2:#5a5248;--sidebar-text3:#8a8078;
    --sidebar-border:#dedad2;--sidebar-item-hover:rgba(0,0,0,.05);
    --sidebar-pill-bg:rgba(0,0,0,.06);--sidebar-pill-hover:rgba(0,0,0,.10);
    --sidebar-pill-active:#5046e5;
    --surface:#ffffff;--surface2:#f9f8f5;
    --border:#e4e2da;--border2:rgba(255,255,255,.07);--border3:rgba(0,0,0,.06);
    --text:#1a1714;--text2:#6b6558;--text3:#a09890;
    --accent:#5046e5;--accent2:#7c72f2;--accent-bg:rgba(80,70,229,.09);
    --accent-warm:#e8702a;--accent-warm-bg:rgba(232,112,42,.10);
    --user-bg:#eeecea;--user-text:#1a1714;--user-border:#d8d5ce;
    --ai-bg:#ffffff;--ai-border:#e4e2da;
    --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.04);
    --shadow2:0 8px 32px rgba(0,0,0,.10);--shadow3:0 2px 8px rgba(0,0,0,.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(0,0,0,.05);--pill-hover:rgba(0,0,0,.09);
    --pill-active:#5046e5;
}
.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:#958e82;--sidebar-text3:#66604e;
    --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:#7b65e8;
    --surface:#17140f;--surface2:#1f1c16;
    --border:#2c2820;--border2:rgba(255,255,255,.055);--border3:rgba(255,255,255,.04);
    --text:#ede8df;--text2:#958e82;--text3:#66604e;
    --accent:#7b65e8;--accent2:#a48ef8;--accent-bg:rgba(123,101,232,.13);
    --accent-glow:rgba(123,101,232,.30);
    --accent-warm:#f2844a;--accent-warm-bg:rgba(242,132,74,.13);
    /* User bubble: noticeably distinct from AI even in dark */
    --user-bg:#201c30;--user-text:#ede8df;--user-border:#3a3158;
    --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:960px;
    border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;font-family:var(--font);font-size:14px;
    background:var(--bg);position:relative;
    transition:background .25s,border-color .25s;
    box-shadow:var(--shadow2),0 0 0 1px rgba(83,56,200,.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 var(--border2);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.msm-logo{display:flex;align-items:center;gap:10px}
.msm-logo-icon{font-size:22px;line-height:1}
.msm-logo-text{font-size:15px;font-weight:800;color:var(--sidebar-text);letter-spacing:-.4px;font-family:var(--font)}
.msm-logo-version{font-size:9px;font-weight:500;color:var(--sidebar-text3);letter-spacing:.5px;text-transform:uppercase;display:block;margin-top:1px}
.msm-sidebar-actions{display:flex;gap:4px}
.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)}
.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: 3px; }
.msm-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }

/* 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:9.5px;font-weight:700;color:var(--sidebar-text3);
    letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px;font-family:var(--font);
}
.msm-selector-scroll{
    display:flex;flex-wrap:nowrap;gap:5px;
    overflow-x:auto;overflow-y:hidden;
    padding-bottom:4px;  /* space for scrollbar on desktop */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* Firefox */
}
.msm-selector-scroll::-webkit-scrollbar{ display:none } /* Chrome/Safari — hide scrollbar, keep scroll */
.msm-pill {
    background:var(--sidebar-pill-bg);border:1px solid var(--sidebar-border);border-radius:20px;
    padding:4px 11px;font-size:11.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:3px}
.msm-list::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:3px}
.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:3px}
.msm-history-list::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:3px}
.msm-history-empty{font-size:11.5px;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:11.5px;
    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:11px;opacity:.7;line-height:1}
.msm-history-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msm-scope-pill{
    margin:8px 10px 6px;padding:5px 12px;background:var(--sidebar-pill-bg);
    border:1px solid var(--sidebar-border);border-radius:20px;
    font-size:10.5px;font-weight:500;color:var(--sidebar-text3);
    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;
}
.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:11.5px;color:var(--text3);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:3px;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,var(--accent),var(--accent2),var(--accent-warm));
    animation:msm-progress 1.8s ease-in-out infinite;transform:translateX(-100%);
}
@keyframes msm-progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ── 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{
    width:32px;height:32px;flex-shrink:0;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;background:var(--bg3);color:var(--text2);
    border:1px solid var(--border);font-family:var(--font);
}
.msm-msg.msm-ai .msm-avatar{
    background:linear-gradient(140deg,#3f28b4,#5338c8,#7b65e8);
    color:#fff;border-color:transparent;font-size:16px;
    box-shadow:0 2px 10px rgba(83,56,200,.30);
}
.msm-bubble-wrap{display:flex;flex-direction:column;max-width:78%;min-width:0}
.msm-msg.msm-user .msm-bubble-wrap{align-items:flex-end}
.msm-bubble{
    padding:11px 15px;border-radius:14px;
    font-size:15px;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:10.5px;color:var(--text3);margin-top:6px;font-family:var(--font);letter-spacing:.2px}

/* ── 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 ────────────────────────────────────────────────── */
.msm-install-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    animation: msm-install-pulse 2.5s ease-in-out infinite;
}
.msm-install-btn:hover {
    filter: brightness(1.1);
    background: var(--accent) !important;
}
.msm-install-label {
    font-size: 12px;
    letter-spacing: 0.01em;
}
@keyframes msm-install-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(83,56,200,.38); }
    50%       { box-shadow: 0 0 0 7px rgba(83,56,200,0); }
}
@media (max-width: 480px) {
    .msm-install-label { display: none; }
    .msm-install-btn   { padding: 5px 8px !important; }
}

/* 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)}
.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(232,112,42,.25);border-radius:10px;
    font-size:12.5px;font-family:var(--font);color:var(--accent-warm);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;
}
.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:10.5px;color:var(--text3);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:13px;color:var(--text2);line-height:1.5}

/* ── Suggestions ─────────────────────────────────────────────────────────── */
.msm-suggestions{margin-top:12px}
.msm-suggestions-label{
    font-size:10.5px;font-weight:600;color:var(--text3);letter-spacing:.5px;
    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(83,56,200,.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 ─────────────────────────────────────────────────────── */
.msm-panel{
    position:absolute;right:16px;top:70px;bottom:80px;width:340px;
    max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);
    border-radius:14px;box-shadow:var(--shadow2);display:flex;flex-direction:column;
    z-index:50;overflow:hidden;
}
.msm-panel-head{
    padding:14px 16px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    font-weight:600;font-size:14px;color:var(--text);font-family:var(--font);
    background:var(--surface2);
}
.msm-panel-body{flex:1;overflow-y:auto;padding:12px}
.msm-panel-body::-webkit-scrollbar{width:4px}
.msm-panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.msm-empty{color:var(--text3);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-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:10.5px;color:var(--text3);margin-bottom:7px;font-family:var(--font);letter-spacing:.4px;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:12px;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{
    display:flex;align-items:flex-end;gap:8px;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(83,56,200,.08)}
#msm-input{
    flex:1;border:none;outline:none;background:transparent;
    font-size:15px;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,#5338c8,#7b65e8);
    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(83,56,200,.28);
}
#msm-send:hover{opacity:.93;transform:scale(1.05);box-shadow:0 4px 14px rgba(83,56,200,.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 */
#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)}
#msm-voice-btn.msm-voice-active{
    border-color:#ef4444;color:#ef4444;background:#fef2f2;
    animation:msm-pulse-mic .8s ease-in-out infinite;
}
#msm-input.msm-voice-listening{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.15);}
@keyframes msm-pulse-mic{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

.msm-hint{font-size:10.5px;color:var(--text3);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:6px 14px 10px;
    border-bottom:1px solid var(--sidebar-border);flex-shrink:0;
}
.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(83,56,200,.22);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:2px;
    background:rgba(80,70,229,.15);border-radius:2px;overflow:hidden;
}
.msm-xp-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .6s ease}

/* ── Weekly banner ───────────────────────────────────────────────────────── */
.msm-weekly-banner{
    display:flex;align-items:center;gap:10px;
    background:linear-gradient(135deg,rgba(83,56,200,.08),rgba(217,104,36,.05));
    border-bottom:1px solid rgba(80,70,229,.18);
    padding:9px 18px;font-size:13px;color:var(--text);flex-shrink:0;
    animation:msm-slide-down .3s ease;font-family:var(--font);
}
@keyframes msm-slide-down{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.msm-weekly-icon{font-size:18px;flex-shrink:0}
.msm-weekly-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msm-weekly-text em{font-size:11px;color:var(--text3);margin-left:4px}
.msm-weekly-btn{
    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}.msm-weekly-close:hover{opacity:1}

/* ── 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)}
.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}

/* ── +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(80,70,229,.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:#5046e5;--sp-warm:#e8702a;
    --sp-bg:#fafaf8;--sp-surface:#fff;--sp-border:#e4e2da;
    --sp-text:#1a1714;--sp-text2:#6b6558;--sp-text3:#a09890;
    --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:11px;font-weight:700;color:var(--sp-text3);letter-spacing:.8px;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:10.5px;font-weight:700;color:var(--sp-text3);letter-spacing:.8px;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(80,70,229,.07);border:1px solid rgba(80,70,229,.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(80,70,229,.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(80,70,229,.04)}
.msm-sp-day-exam .msm-sp-day-header{background:linear-gradient(135deg,rgba(80,70,229,.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;
    /* No margin-top:auto — history's flex-shrink:1 already gives bottom room */
}

.msm-sidebar-nav {
    padding: 4px 10px 14px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 240px;
    overscroll-behavior: contain;
}
.msm-sidebar-nav::-webkit-scrollbar { width: 3px; }
.msm-sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }
.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: 13px;
    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: 15px;
    width: 20px;
    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: 9.5px;
    font-weight: 600;
    color: var(--text3);
    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: 18px;
    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 { display: none; } /* nav shown in bottom bar 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 { margin: 4px 8px 4px; padding: 4px 10px; font-size: 10px; }
    .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}
    .msm-panel, .msm-panel-wide {
        width: 100%;
        right: 0;
        left: 0;
        bottom: 0; /* app already stops above nav */
        top: 54px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        z-index: 95;
    }
    .msm-gam-header{gap:4px}
    .msm-xp-badge{display:none}
    .msm-weekly-text{max-width:130px}
    .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: 88%; }
    /* Show mobile bottom nav */
    .msm-mobile-nav { display: flex; }
    /* 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: 14px; padding: 9px 12px; }
    .msm-input-wrap { padding: 6px 6px 6px 11px; }
    #msm-input { font-size: 14px; }
    .msm-weekly-text { max-width: 80px; }
    .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:480px;max-width:calc(100vw - 24px);
}

/* ── 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:13.5px;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:11px;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:11px;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:11px;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(--text3); }
.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: 9px; font-weight: 700; color: rgba(255,255,255,.3);
    letter-spacing: 1px; 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,.72); 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: 10px; color: rgba(255,255,255,.38); margin-top: 1px; }
.msm-search-empty {
    padding: 12px; font-size: 11.5px; color: rgba(255,255,255,.3);
    text-align: center; font-family: var(--font);
}
.msm-topic-loading, .msm-topic-empty {
    font-size: 11.5px; color: rgba(255,255,255,.3); 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: 32px 20px 20px;
    max-width: 560px; margin: 0 auto; width: 100%;
}
.msm-welcome-logo {
    margin-bottom: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 16px rgba(80,70,229,.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: 14px; color: var(--text2); line-height: 1.55;
    max-width: 400px; font-family: var(--font);
}
.msm-welcome-pills-wrap { margin-top: 32px; width: 100%; }
.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(80,70,229,.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; }
}

/* Messages area: center welcome block properly on desktop */
#msm-messages:has(> .msm-welcome-block:only-child) {
    align-items: center; justify-content: center;
}
@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 center when opener card is present alongside welcome block */
#msm-messages:has(> .msm-welcome-block):has(> .msm-opener-card) {
    align-items: center; justify-content: center;
}


/* ── 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(80,70,229,.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) {
    /* Stack welcome block + opener card from the top on mobile so both
       are visible without scrolling. Desktop keeps them centred.         */
    #msm-messages:has(> .msm-welcome-block):has(> .msm-opener-card) {
        justify-content: flex-start;
        align-items: center;
        padding-top: 4px;
        gap: 10px;
    }
    /* 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: 13px; color: var(--text2); margin-bottom: 16px;
    line-height: 1.55; 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: 10px; font-weight: 700; color: var(--text3);
    letter-spacing: .8px; text-transform: uppercase; font-family: var(--font);
}
.msm-teacher-field select,
.msm-teacher-field input[type="number"] {
    border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 10px;
    font-size: 13px; font-family: var(--font); color: var(--text);
    background: var(--surface2); outline: none; transition: border-color .14s;
}
.msm-teacher-field select:focus,
.msm-teacher-field input[type="number"]:focus { border-color: var(--accent); }
/* ── 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: 12px; color: var(--text3); 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: 10.5px; color: var(--text3); 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: 12.5px; color: var(--text3); 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(--text2); }
.msm-app[data-theme="dark"] .msm-teacher-field label { color: var(--text3); }
.msm-app[data-theme="dark"] .msm-teacher-field select,
.msm-app[data-theme="dark"] .msm-teacher-field input[type="number"] {
    background: var(--bg3); color: var(--text); border-color: var(--border);
}
.msm-app[data-theme="dark"] .msm-teacher-field select option { background: var(--bg3); color: var(--text); }
.msm-app[data-theme="dark"] .msm-exam-meta    { color: var(--text3); }
.msm-app[data-theme="dark"] .msm-exam-q-meta  { color: var(--text3); }
.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(--text3); }
.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, #5046e5);
    background: rgba(80,70,229,.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, #5046e5); }

/* 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, #5046e5); 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;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPING ANIMATION
   ═══════════════════════════════════════════════════════════════════════════ */

.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, #5046e5);
    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, #5046e5);
    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: #5046e5;
    --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', sans-serif; max-width: 820px; margin: 0 auto; }

.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: 28px; font-weight: 700; color: var(--msm-exam-text); margin: 0 0 8px; }
.msm-exam-subtitle { color: var(--msm-exam-sub); margin: 0 0 32px; font-size: 15px; }

.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(80,70,229,.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; }

.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 */
.msm-exam-results-header { text-align: center; padding: 32px 20px 24px; }
.msm-exam-score-ring { position: relative; width: 160px; height: 160px; margin: 0 auto 24px; }
.msm-score-inner {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
#msm-score-pct { font-size: 36px; font-weight: 800; color: var(--msm-exam-text); }
.msm-score-label { font-size: 13px; color: var(--msm-exam-sub); }

.msm-exam-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.msm-stat-pill {
    padding: 10px 20px; border-radius: 30px; font-weight: 700; font-size: 15px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px;
}
.msm-stat-pill span { font-size: 11px; font-weight: 400; opacity: .75; }
.msm-stat-pill.correct { background: #f0fdf4; color: #16a34a; }
.msm-stat-pill.wrong   { background: #fef2f2; color: #dc2626; }
.msm-stat-pill.time    { background: #f0f9ff; color: #0369a1; }
.msm-exam-grade-label { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.grade-a { color: #16a34a; }
.grade-b { color: #2563eb; }
.grade-c { color: #d97706; }
.grade-d { color: #dc2626; }

.msm-exam-breakdown { display: flex; flex-direction: column; gap: 12px; padding: 0 0 24px; }
.msm-exam-result-row {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border: 1px solid var(--msm-exam-border);
    border-radius: 12px; padding: 16px; border-left: 4px solid transparent;
}
.msm-exam-result-row.correct { border-left-color: #22c55e; }
.msm-exam-result-row.wrong   { border-left-color: #ef4444; }
.msm-result-q-num { width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.msm-result-content { flex: 1; }
.msm-result-question { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.msm-result-your-answer { font-size: 13px; color: #64748b; margin-bottom: 4px; }
.msm-result-correct-answer { font-size: 13px; color: #16a34a; font-weight: 500; }
.msm-result-explanation { font-size: 12px; color: #94a3b8; margin-top: 4px; font-style: italic; }
.msm-result-icon { font-size: 20px; }
.msm-exam-result-actions { text-align: center; padding-bottom: 32px; }
.msm-exam-result-actions .msm-exam-cta { max-width: 280px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FLASHCARD MODE
   ═══════════════════════════════════════════════════════════════════════════ */

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

.msm-fc-setup-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
    padding: 40px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.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: -0.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: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.msm-fc-field select { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-family: inherit; font-size: 14px; }
.msm-fc-field select:disabled { opacity: .5; }

.msm-fc-cta {
    width: 100%; padding: 13px; background: #5046e5; color: #fff; border: none;
    border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; margin-top: 6px; transition: opacity .15s;
}
.msm-fc-cta:hover:not(:disabled) { opacity: .9; }
.msm-fc-cta:disabled { opacity: .4; cursor: default; }
.msm-fc-cta.secondary { background: #ede9ff; color: #5046e5; }
.msm-fc-error { color: #ef4444; font-size: 13px; margin-top: 10px; }

/* Deck */
.msm-fc-deck-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 8px; flex-wrap: wrap; gap: 8px; }
.msm-fc-deck-info { font-size: 14px; font-weight: 600; color: #64748b; }
.msm-fc-progress-wrap { flex: 1; max-width: 200px; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.msm-fc-progress-fill { height: 100%; background: #5046e5; border-radius: 3px; transition: width .4s; }
.msm-fc-legend { font-size: 12px; color: #94a3b8; display: flex; gap: 10px; }
.msm-fc-know-dot   { color: #22c55e; }
.msm-fc-review-dot { color: #f59e0b; }

/* The flip card */
.msm-fc-card-scene {
    perspective: 1000px; cursor: pointer; padding: 8px 0 16px;
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.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: 20px;
}
.msm-fc-card.flipped { transform: rotateY(180deg); }

.msm-fc-card-front, .msm-fc-card-back {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 20px; padding: 32px 28px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.msm-fc-card-front {
    background: linear-gradient(135deg, #5046e5, #7c3aed);
    color: #fff;
}
.msm-fc-card-back {
    background: #fff; border: 1px solid #e2e8f0;
    transform: rotateY(180deg); color: #1e1e2e;
}

.msm-fc-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .65; margin-bottom: 16px; }
.msm-fc-card-body { font-size: 18px; font-weight: 600; line-height: 1.5; flex: 1; }
.msm-fc-card-hint { font-size: 12px; opacity: .5; margin-top: 16px; text-align: center; }
.msm-fc-card-explanation { font-size: 13px; color: #64748b; margin-top: 10px; font-style: italic; border-top: 1px solid #f1f5f9; padding-top: 10px; }

/* Slide-out animations */
.msm-fc-card.slide-out-right { animation: msm-slide-out-right 0.32s ease forwards; }
.msm-fc-card.slide-out-left  { animation: msm-slide-out-left  0.32s ease forwards; }
@keyframes msm-slide-out-right { to { transform: translateX(110%) rotateZ(15deg); opacity:0; } }
@keyframes msm-slide-out-left  { to { transform: translateX(-110%) rotateZ(-15deg); opacity:0; } }

/* Actions */
.msm-fc-actions { display: flex; gap: 12px; justify-content: center; padding: 8px 0; }
.msm-fc-action-btn {
    flex: 1; max-width: 220px; padding: 13px; border: none; border-radius: 12px;
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.msm-fc-action-btn:hover { opacity: .88; transform: translateY(-1px); }
.msm-fc-action-btn.know   { background: #f0fdf4; color: #16a34a; }
.msm-fc-action-btn.review { background: #fffbeb; color: #d97706; }
.msm-fc-action-btn.ask    { background: #ede9fe; color: #6d28d9; }

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

/* Results */
.msm-fc-results-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
    padding: 48px 32px; text-align: center; max-width: 460px; margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.msm-fc-results-emoji { font-size: 52px; margin-bottom: 12px; }
.msm-fc-results-title { font-size: 26px; font-weight: 700; margin: 0 0 28px; color: #1e1e2e; }
.msm-fc-results-stats { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.msm-fc-stat-box {
    flex: 1; min-width: 90px; padding: 16px 12px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.msm-fc-stat-box span:first-child { font-size: 28px; font-weight: 800; }
.msm-fc-stat-box span:last-child  { font-size: 12px; font-weight: 500; opacity: .7; }
.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: #5046e5; }
.msm-fc-results-msg { color: #64748b; font-size: 14px; margin-bottom: 28px; }
.msm-fc-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.msm-fc-result-actions .msm-fc-cta { flex: 1; min-width: 140px; }

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

.msm-lb-wrap { font-family: 'Outfit', sans-serif; max-width: 860px; margin: 0 auto; }
.msm-lb-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.msm-lb-title { font-size: 24px; font-weight: 700; margin: 0; color: #1e1e2e; }
.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: 14px; }
.msm-lb-loading { text-align: center; padding: 24px; color: #64748b; }

.msm-lb-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; }
.msm-lb-table thead th { background: #f8fafc; padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #e2e8f0; }
.msm-lb-col-rank    { width: 70px; }
.msm-lb-col-level   { width: 140px; }
.msm-lb-col-xp      { width: 90px; text-align: right!important; }
.msm-lb-col-streak  { width: 100px; text-align: center!important; }

.msm-lb-row {
    border-bottom: 1px solid #f1f5f9; transition: background .15s;
    animation: msm-lb-slide-in .35s ease both;
}
@keyframes msm-lb-slide-in { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:none} }
.msm-lb-row:hover { background: #fafbff; }
.msm-lb-row:last-child { border-bottom: none; }
.msm-lb-row td { padding: 14px 16px; }
.msm-lb-row.msm-lb-me { background: #f5f3ff; }
.msm-lb-row.msm-lb-me .msm-lb-name { font-weight: 700; color: #5046e5; }

.msm-lb-rank { font-size: 20px; font-weight: 800; color: #1e1e2e; }
.msm-lb-col-name td { display: flex; align-items: center; gap: 10px; }

.msm-lb-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #5046e5, #7c3aed);
    color: #fff; font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msm-lb-name { font-size: 15px; font-weight: 600; color: #1e1e2e; }
.msm-lb-you-tag {
    background: #5046e5; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px; letter-spacing: .05em;
}
.msm-lb-level-icon { font-size: 18px; margin-right: 5px; }
.msm-lb-level-name { font-size: 13px; color: #64748b; font-weight: 500; }
.msm-lb-xp { font-size: 16px; font-weight: 700; color: #5046e5; float: right; }
.msm-lb-streak { font-size: 14px; font-weight: 600; color: #ea580c; }
.msm-lb-streak-none { color: #cbd5e1; font-size: 18px; }

/* name column fix */
.msm-lb-col-name { min-width: 160px; }

@media (max-width:600px) {
    .msm-lb-col-streak,.msm-lb-col-level { display: none; }
    .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;
}
.msm-nav-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sidebar-text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    font-family: var(--font);
    transition: color .15s;
}
.msm-nav-advanced-toggle:hover { color: var(--sidebar-text2); }
.msm-nav-advanced-arrow {
    margin-left: auto;
    opacity: .6;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.msm-nav-advanced-arrow-open { transform: rotate(180deg); }
.msm-nav-advanced-group { padding-left: 6px; }
.msm-nav-secondary {
    font-size: 12.5px !important;
    color: var(--sidebar-text3) !important;
    padding: 6px 10px !important;
}
.msm-nav-secondary:hover { color: var(--sidebar-text) !important; }
.msm-nav-secondary .msm-nav-icon { opacity: .75; }

.msm-panel-back-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: var(--accent-bg) !important;
    border: none !important;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.msm-panel-back-btn:hover { opacity: .78; }

/* 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;
}

/* ── 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: absolute;
    inset: 0;
    z-index: 600;
    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;
    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: 13px;
    color: var(--text3);
    text-align: center;
    margin-bottom: 22px;
}

/* 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: 11.5px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 5px;
    letter-spacing: .2px;
}
.msm-req { color: var(--accent-warm); }

.msm-auth-field input {
    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;
}
.msm-auth-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(80,70,229,.1);
    background: var(--surface);
}
.msm-auth-field input::placeholder { color: var(--text3); }

/* 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; }

/* 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-card {
        padding: 24px 18px 22px;
        border-radius: 16px;
        max-width: 100%;
    }
    .msm-auth-row { flex-direction: column; gap: 0; }
    .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:   #64748b;
    --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 */
.msm-app[data-theme="dark"] .msm-lb-table {
    background: #1e293b;
    border-color: #334155;
}
.msm-app[data-theme="dark"] .msm-lb-table thead th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}
.msm-app[data-theme="dark"] .msm-lb-row {
    border-bottom-color: #334155;
}
.msm-app[data-theme="dark"] .msm-lb-row:hover {
    background: #253350;
}
.msm-app[data-theme="dark"] .msm-lb-row.msm-lb-me {
    background: #1e1b4b;
}
.msm-app[data-theme="dark"] .msm-lb-rank {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-lb-name {
    color: #e2e8f0;
}
.msm-app[data-theme="dark"] .msm-lb-level-name {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-lb-optout label {
    color: #94a3b8;
}
.msm-app[data-theme="dark"] .msm-lb-streak-none {
    color: #334155;
}

/* ── 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(80,70,229,.12); border-radius: 10px; }
    80%  { background: rgba(80,70,229,.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; }
}

/* ══════════════════════════════════════════════════════════════════════════
   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);
}

/* 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; }


/* ═══════════════════════════════════════════════════════
   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; }
.msm-ann-text  { flex: 1; font-weight: 500; line-height: 1.5; }
.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 {
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
    transition: opacity .3s;
}
#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(80,70,229,.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;
    gap: 6px;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    padding: 6px 14px 6px 10px;
    margin-bottom: 16px;
    transition: all .18s ease;
    letter-spacing: .01em;
}
.msm-esim-back-btn::before {
    content: '←';
    font-size: 14px;
    line-height: 1;
    transition: transform .18s ease;
}
.msm-esim-back-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(80,70,229,.12);
}
.msm-esim-back-btn:hover::before { transform: translateX(-2px); }

/* 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: 10px; color: var(--text3); 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: 10px; color: var(--text3); }

/* 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 {
    background: var(--bg3);
    border-color: var(--border);
}
.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: 56px; height: 56px; border-radius: 16px;
    background: var(--accent-bg); margin: 0 auto 12px;
    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(80,70,229,.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(80,70,229,.12);color:var(--accent);border:1px solid rgba(80,70,229,.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,#5046e5 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(80,70,229,.35),0 1px 4px rgba(80,70,229,.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(80,70,229,.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(80,70,229,.12),rgba(168,85,247,.12));
    border:1px solid rgba(80,70,229,.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(80,70,229,.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:absolute;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:640px;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;gap:14px;margin-bottom:18px;
}
.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(80,70,229,.05) 0%,rgba(168,85,247,.06) 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,#5046e5,#a855f7);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-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,#5046e5 0%,#7c3aed 60%,#a855f7 100%);color:#fff;
    box-shadow:0 4px 16px rgba(80,70,229,.35);
}
.msm-cta-trial:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(80,70,229,.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-login {
    background:var(--accent);color:#fff;
    box-shadow:0 3px 12px rgba(80,70,229,.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;
}

/* ── Gate Modal ──────────────────────────────────────────────────────────── */
.msm-gate-overlay {
    position:absolute;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,#5046e5,#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(80,70,229,.11),rgba(168,85,247,.16));
    border:1.5px solid rgba(80,70,229,.18);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 7px rgba(80,70,229,.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(80,70,229,.05); }
    50%      { transform:translateY(-6px);box-shadow:0 10px 26px rgba(80,70,229,.13),0 0 0 7px rgba(80,70,229,.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(80,70,229,.1);border:1px solid rgba(80,70,229,.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-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,#5046e5 0%,#7c3aed 60%,#a855f7 100%);
    color:#fff;font-size:14px;font-weight:700;font-family:var(--font);
    box-shadow:0 4px 16px rgba(80,70,229,.35);
    transition:transform .15s,box-shadow .15s;margin-bottom:10px;
}
.msm-gate-cta:hover { transform:translateY(-2px);box-shadow:0 6px 24px rgba(80,70,229,.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(80,70,229,.06),rgba(168,85,247,.06));
    border:1.5px dashed rgba(80,70,229,.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,#5046e5,#a855f7);color:#fff;
    font-size:13.5px;font-weight:700;font-family:var(--font);
    box-shadow:0 3px 12px rgba(80,70,229,.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(80,70,229,.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,#5046e5 0%,#a855f7 100%);
    color:#fff;font-size:13px;font-weight:700;font-family:var(--font);
    box-shadow:0 3px 12px rgba(80,70,229,.3);
    transition:transform .15s,opacity .15s;margin-top:4px;
}
.msm-more-tray-upgrade:hover { transform:translateY(-1px);opacity:.92; }

/* ── Responsive adjustments ──────────────────────────────────────────────── */
@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(80,70,229,.07) 0%,rgba(168,85,247,.07) 100%);
    border:1.5px solid rgba(80,70,229,.2);border-radius:18px;margin:8px 0;
    box-shadow:0 4px 20px rgba(80,70,229,.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,#5046e5,#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(80,70,229,.09);color:#5046e5;border:1px solid rgba(80,70,229,.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,#5046e5,#a855f7);color:#fff;
    font-size:14px;font-weight:700;font-family:var(--font);
    box-shadow:0 4px 14px rgba(80,70,229,.35);
    transition:transform .15s,box-shadow .15s;
}
.msm-limit-wall-cta:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(80,70,229,.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(80,70,229,.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,#5046e5);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,#5046e5);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(80,70,229,.25);
    border-top-color: #5046e5;
    border-radius: 50%;
    animation: msm-spin .6s linear infinite;
    margin-left: 6px;
    vertical-align: -2px;
}
.msm-related-chip--open {
    background: rgba(80,70,229,.15);
    border-color: rgba(80,70,229,.4);
    color: #5046e5;
}
.msm-note-panel {
    width: 100%;
    margin: 4px 0 8px;
    border-radius: 12px;
    border: 1.5px solid rgba(80,70,229,.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(80,70,229,.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(80,70,229,.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(80,70,229,.06);
    border: 1px solid rgba(80,70,229,.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, #5046e5, #a855f7);
    color: #fff; font-size: 15px; font-weight: 700;
    font-family: var(--font);
    box-shadow: 0 4px 18px rgba(80,70,229,.4);
    transition: transform .15s, box-shadow .15s;
    margin-bottom: 12px;
}
.msm-signup-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(80,70,229,.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 ───────────────────────────────────────────────────── */
.msm-review-tabs {
    display: flex;
    gap: 6px;
    padding: 14px 16px 0;
    border-bottom: 1.5px solid rgba(255,255,255,.07);
    flex-wrap: wrap;
}
.msm-review-tab {
    padding: 7px 16px;
    border-radius: 10px 10px 0 0;
    border: 1.5px solid transparent;
    background: none;
    color: var(--text2, #94a3b8);
    font-size: 13px; font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: color .15s, background .15s;
    position: relative; bottom: -1.5px;
}
.msm-review-tab:hover { color: var(--text, #e2e8f0); background: rgba(255,255,255,.04); }
.msm-review-tab--active {
    color: var(--text, #e2e8f0);
    background: var(--surface, #1e1e2e);
    border-color: rgba(255,255,255,.07) rgba(255,255,255,.07) var(--surface, #1e1e2e);
}
.msm-review-tab--disabled { opacity: .38; cursor: not-allowed; }
.msm-wrong-badge {
    display: inline-block;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 10px; padding: 1px 6px;
    margin-left: 4px; vertical-align: 1px;
}
.msm-tab-panel { padding: 14px 0; }

/* ── Exam: Drill Mode Card ──────────────────────────────────────────────── */
.msm-drill-card {
    background: var(--surface, #1e1e2e);
    border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 22px 20px 18px;
    margin: 12px 0;
}
.msm-drill-progress {
    font-size: 11.5px; color: var(--text3, #64748b);
    font-weight: 700; letter-spacing: .3px;
    margin-bottom: 10px;
}
.msm-drill-difficulty {
    font-size: 11px; font-weight: 700;
    margin-bottom: 10px; color: var(--text3, #64748b);
}
.msm-drill-question {
    font-size: 15px; font-weight: 700;
    color: var(--text, #e2e8f0);
    line-height: 1.45; margin-bottom: 16px;
}
.msm-drill-flip-wrap { margin-top: 4px; }
.msm-drill-section-label {
    font-size: 10.5px; font-weight: 700;
    color: var(--text3, #64748b);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 4px;
}
.msm-drill-your {
    font-size: 13px; color: #f87171;
    background: rgba(239,68,68,.08);
    border-radius: 8px; padding: 8px 12px;
    margin-bottom: 2px;
}
.msm-drill-correct {
    font-size: 13px; color: #4ade80;
    background: rgba(74,222,128,.08);
    border-radius: 8px; padding: 8px 12px;
}
.msm-drill-explanation {
    font-size: 12.5px; color: var(--text2, #94a3b8);
    background: rgba(255,255,255,.04);
    border-radius: 8px; padding: 8px 12px;
    margin-top: 6px; line-height: 1.55;
}
.msm-drill-verdict {
    display: flex; gap: 10px;
    margin-top: 16px; flex-wrap: wrap;
}
.msm-drill-btn {
    flex: 1; min-width: 120px;
    padding: 10px 14px;
    border-radius: 10px; border: none; cursor: pointer;
    font-size: 13.5px; font-weight: 700;
    font-family: var(--font);
    transition: transform .12s, opacity .12s;
}
.msm-drill-btn:hover { transform: translateY(-1px); }
.msm-drill-got-it  { background: rgba(74,222,128,.15); color: #4ade80; border: 1.5px solid rgba(74,222,128,.3); }
.msm-drill-missed  { background: rgba(239,68,68,.1);  color: #f87171; border: 1.5px solid rgba(239,68,68,.25); }
.msm-drill-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.msm-drill-show-btn {
    padding: 9px 22px;
    border-radius: 10px; border: 1.5px solid rgba(80,70,229,.4);
    background: rgba(80,70,229,.12); color: #a78bfa;
    font-size: 13px; font-weight: 700;
    font-family: var(--font); cursor: pointer;
    transition: background .15s;
}
.msm-drill-show-btn:hover { background: rgba(80,70,229,.22); }
.msm-drill-ask-ai {
    padding: 8px 16px;
    border-radius: 20px;
    background: #ede9fe; border: 1.5px solid #c4b5fd;
    color: #6d28d9; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: var(--font);
}
.msm-drill-done {
    text-align: center; padding: 32px 16px;
}
.msm-drill-done-icon { font-size: 48px; margin-bottom: 10px; }
.msm-drill-done h4 {
    font-size: 18px; font-weight: 800;
    color: var(--text, #e2e8f0); margin: 0 0 8px;
}
.msm-drill-done p {
    font-size: 13.5px; color: var(--text2, #94a3b8);
    line-height: 1.55; margin-bottom: 20px;
}

/* =============================================================================
   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 ─────────────────────────────────────────────────────── */
.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:10000;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 */
}