/* MLC Frontend CSS — age-band variables + all screen styles */
:root {
    --mlc-accent:#6c63ff; --mlc-accent-dk:#4b44cc; --mlc-soft:#f4f3ff;
    --mlc-rule-bg:#ede9fe; --mlc-rule-bdr:#7c3aed; --mlc-text:#1e1b4b;
    --mlc-muted:#6b7280; --mlc-r:14px; --mlc-font:'Segoe UI',system-ui,sans-serif;
}
body.mlc-age-young      {--mlc-accent:#f59e0b;--mlc-accent-dk:#d97706;--mlc-soft:#fffbeb;--mlc-rule-bg:#fef3c7;--mlc-rule-bdr:#f59e0b;--mlc-text:#451a03}
body.mlc-age-middle     {--mlc-accent:#10b981;--mlc-accent-dk:#059669;--mlc-soft:#ecfdf5;--mlc-rule-bg:#d1fae5;--mlc-rule-bdr:#059669;--mlc-text:#064e3b}
body.mlc-age-upper      {--mlc-accent:#0ea5e9;--mlc-accent-dk:#0284c7;--mlc-soft:#f0f9ff;--mlc-rule-bg:#e0f2fe;--mlc-rule-bdr:#0284c7;--mlc-text:#0c4a6e}
body.mlc-age-tween      {--mlc-accent:#f97316;--mlc-accent-dk:#ea580c;--mlc-soft:#fff7ed;--mlc-rule-bg:#ffedd5;--mlc-rule-bdr:#ea580c;--mlc-text:#431407}
body.mlc-age-upper_teen {--mlc-accent:#0d9488;--mlc-accent-dk:#0f766e;--mlc-soft:#f0fdfa;--mlc-rule-bg:#ccfbf1;--mlc-rule-bdr:#0f766e;--mlc-text:#134e4a}

/* Overlay container — covers the whole wrapper */
.mlc-overlay-container {
    display:none; /* shown via jQuery .show() */
    position:absolute; inset:0; z-index:9000;
    overflow-y:auto; font-family:var(--mlc-font); border-radius:20px;
    background:#fff; /* ensure overlay is opaque */
}

/* Base screen */
.mlc-screen { min-height:100%; display:flex; justify-content:center;
    padding:28px 18px 44px; background:#fff; animation:mlcIn .22s ease; box-sizing:border-box; }
@keyframes mlcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mlc-screen-inner { width:100%; max-width:600px; }
.mlc-screen-icon  { font-size:3rem; text-align:center; margin-bottom:6px; }
.mlc-screen-title { font-size:1.5rem; font-weight:800; text-align:center; color:var(--mlc-text); margin:0 0 22px; }

/* Rule card */
.mlc-rule-card { background:var(--mlc-rule-bg); border-left:5px solid var(--mlc-rule-bdr);
    border-radius:var(--mlc-r); padding:16px 18px; margin-bottom:20px; }
.mlc-card-label { font-weight:700; font-size:.78rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--mlc-rule-bdr); margin-bottom:8px; }
.mlc-glossary-label { margin-bottom:12px; }
.mlc-rule-text { font-size:1rem; line-height:1.7; color:var(--mlc-text); margin:0 0 12px; }
body.mlc-age-young .mlc-rule-text { font-size:1.1rem; }

/* Glossary cards */
.mlc-glossary-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:24px; }
.mlc-gloss-card { background:#fff; border:2px solid var(--mlc-rule-bdr); border-radius:var(--mlc-r);
    padding:14px; box-shadow:0 3px 12px rgba(0,0,0,.08); animation:mlcCardIn .3s ease both; }
.mlc-gloss-card:nth-child(1){animation-delay:.05s}.mlc-gloss-card:nth-child(2){animation-delay:.1s}
.mlc-gloss-card:nth-child(3){animation-delay:.15s}.mlc-gloss-card:nth-child(4){animation-delay:.2s}
@keyframes mlcCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.mlc-gloss-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mlc-gloss-term { font-weight:800; font-size:1rem; color:var(--mlc-accent-dk); }
.mlc-gloss-svg  { margin:8px 0; background:var(--mlc-soft); border-radius:10px; padding:6px; overflow:hidden; }
.mlc-svg { width:100%; height:auto; display:block; font-family:var(--mlc-font); }
.mlc-svg-op    { font-size:20px; font-weight:800; fill:var(--mlc-text); }
.mlc-svg-eq    { font-size:14px; font-weight:700; fill:var(--mlc-text); }
.mlc-svg-num   { font-size:13px; font-weight:700; }
.mlc-svg-label { font-size:11px; fill:var(--mlc-muted); }
.mlc-svg-small { font-size:9px;  fill:var(--mlc-muted); }
.mlc-svg-tag   { font-size:11px; font-weight:700; }
.mlc-gloss-def { font-size:.92rem; line-height:1.55; color:var(--mlc-text); margin:8px 0 6px; }
.mlc-gloss-example { background:var(--mlc-rule-bg); border-radius:8px; padding:8px 10px;
    font-size:.85rem; line-height:1.6; color:var(--mlc-text); font-family:'Courier New',monospace;
    white-space:pre-wrap; word-break:break-word; }
.mlc-ex-label { font-weight:700; font-family:var(--mlc-font); color:var(--mlc-rule-bdr);
    display:block; margin-bottom:4px; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }

/* TTS buttons */
.mlc-tts-btn { background:var(--mlc-accent); color:#fff; border:none; border-radius:20px;
    padding:5px 13px; font-size:.82rem; cursor:pointer; white-space:nowrap; transition:background .15s; }
.mlc-tts-btn:hover { background:var(--mlc-accent-dk); }
.mlc-tts-sm { padding:3px 9px; font-size:.75rem; margin-left:6px; vertical-align:middle; }

/* Buttons */
.mlc-btn { display:inline-flex; align-items:center; gap:6px; padding:11px 28px; border:none;
    border-radius:30px; font-size:1rem; font-weight:700; cursor:pointer;
    transition:background .15s,transform .1s; font-family:var(--mlc-font); }
.mlc-btn:active { transform:scale(.97); }
.mlc-btn-primary { background:var(--mlc-accent); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.14); }
.mlc-btn-primary:hover { background:var(--mlc-accent-dk); }
.mlc-btn-ghost   { background:transparent; color:var(--mlc-muted); border:1px solid #e5e7eb; }
.mlc-btn-ghost:hover { background:#f3f4f6; }
.mlc-btn-big { font-size:1.05rem; padding:13px 34px; }
.mlc-screen-footer { text-align:center; margin-top:24px; }

/* Word problem screen */
.mlc-screen--wp { background:linear-gradient(160deg,#1e1b4b 0%,#312e81 100%); }
.mlc-screen--wp .mlc-screen-inner { color:#fff; }
.mlc-wp-label { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:#c4b5fd; text-align:center; margin-bottom:16px; }
.mlc-wp-bubble { font-size:1.1rem; line-height:1.65; text-align:center; color:#fff;
    background:rgba(255,255,255,.08); border:1px solid rgba(167,139,250,.3);
    border-radius:var(--mlc-r); padding:20px; margin-bottom:14px; }
.mlc-wp-row { display:flex; gap:10px; justify-content:center; margin:16px 0 8px; }
.mlc-wp-input { flex:1; max-width:300px; padding:11px 16px; font-size:1rem;
    border:2px solid rgba(167,139,250,.5); border-radius:10px;
    background:rgba(255,255,255,.1); color:#fff; font-family:var(--mlc-font); }
.mlc-wp-input::placeholder { color:rgba(255,255,255,.4); }
.mlc-wp-input:focus { outline:none; border-color:#a78bfa; }
.mlc-wp-feedback { text-align:center; font-size:1rem; font-weight:700; min-height:28px; margin-top:8px; }
.mlc-ok  { color:#4ade80; } .mlc-err { color:#f87171; }

/* Result screen */
.mlc-screen--result { background:#fff; }
.mlc-result-msg { font-size:1.1rem; color:var(--mlc-text); text-align:center; margin-bottom:8px; }
.mlc-result-sub { color:var(--mlc-muted); text-align:center; margin-bottom:20px; }

/* AI tutor screen */
.mlc-screen--tutor { background:#fff; padding:0; align-items:stretch; }
.mlc-tutor-wrap { display:flex; flex-direction:column; width:100%; min-height:460px; }
.mlc-tutor-header { display:flex; align-items:center; gap:12px; padding:14px 20px;
    background:var(--mlc-accent); color:#fff; flex-shrink:0; border-radius:20px 20px 0 0; }
.mlc-tutor-avatar { font-size:2rem; }
.mlc-tutor-sub    { font-size:.78rem; opacity:.85; }
.mlc-skip-btn { margin-left:auto; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4);
    color:#fff; border-radius:20px; padding:4px 14px; cursor:pointer; font-size:.85rem; }
.mlc-skip-btn:hover { background:rgba(255,255,255,.3); }
.mlc-tutor-msgs { flex:1; overflow-y:auto; padding:16px 20px; display:flex;
    flex-direction:column; gap:10px; min-height:200px; max-height:340px; }
.mlc-msg { max-width:80%; padding:10px 14px; border-radius:16px; font-size:.92rem;
    line-height:1.5; word-break:break-word; }
.mlc-msg-bot  { background:var(--mlc-soft); border:1px solid #e5e7eb; align-self:flex-start;
    border-bottom-left-radius:4px; color:var(--mlc-text); }
.mlc-msg-user { background:var(--mlc-accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.mlc-typing { display:flex; align-items:center; gap:5px; padding:12px 16px; }
.mlc-typing span { width:8px; height:8px; background:var(--mlc-muted); border-radius:50%; animation:mlcBounce 1.2s infinite; }
.mlc-typing span:nth-child(2){animation-delay:.2s}.mlc-typing span:nth-child(3){animation-delay:.4s}
@keyframes mlcBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.mlc-tutor-foot { display:flex; gap:8px; padding:12px 16px; border-top:1px solid #e5e7eb;
    flex-shrink:0; background:#fff; border-radius:0 0 20px 20px; }
.mlc-tutor-input { flex:1; padding:10px 14px; border:1.5px solid #d1d5db; border-radius:8px;
    font-size:.92rem; font-family:var(--mlc-font); }
.mlc-tutor-input:focus { outline:none; border-color:var(--mlc-accent); }
.mlc-continue-row { text-align:center; padding:10px 16px 16px; background:#fff; }

/* Celebration screen */
.mlc-screen--cel { background:linear-gradient(160deg,#1e1b4b 0%,#4c1d95 100%); align-items:center; }
.mlc-cel-inner { text-align:center; color:#fff; }
.mlc-cel-icon  { font-size:5rem; display:block; margin-bottom:12px; animation:mlcPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes mlcPop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.mlc-cel-title  { font-size:2rem; font-weight:900; color:var(--cel-color,#fbbf24); margin:0 0 10px;
    text-shadow:0 2px 12px rgba(0,0,0,.4); }
.mlc-cel-msg    { font-size:1.1rem; opacity:.9; margin-bottom:6px; }
.mlc-cel-badges { font-size:1rem; opacity:.8; margin-bottom:20px; }
.mlc-stars { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin-bottom:20px; }
.mlc-star  { font-size:1.4rem; animation:mlcStar .35s ease both; }
@keyframes mlcStar{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.mlc-cel-inner .mlc-btn { margin:6px auto; display:block; max-width:260px; }