/* MathRunway — kid-friendly, single-screen, responsive. No CDN, no external fonts. */

:root {
    --mr-bg1:#6a5cff; --mr-bg2:#23c6e0; --mr-bg3:#ff7eb3;
    --mr-ink:#1f2147; --mr-ink-soft:#5b5f86;
    --mr-card:#ffffff; --mr-card-soft:#f4f6ff;
    --mr-primary:#5b53ff; --mr-primary-d:#4038e0;
    --mr-go:#1fbf6b; --mr-go-d:#159e57;
    --mr-secondary:#ff8a3d; --mr-secondary-d:#ef761f;
    --mr-good:#1fbf6b; --mr-bad:#ff4d6d; --mr-mid:#ffb020;
    --mr-radius:22px; --mr-radius-sm:14px;
    --mr-shadow:0 10px 30px rgba(31,33,71,.18);
    --mr-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body.mr-body {
    margin:0; font-family:var(--mr-font); color:var(--mr-ink);
    background:linear-gradient(135deg,var(--mr-bg1),var(--mr-bg2) 60%,var(--mr-bg3));
    background-attachment:fixed;
    overflow:hidden;                 /* one screen, no scroll */
    -webkit-text-size-adjust:100%;
}

/* App shell uses dynamic viewport height so mobile browser chrome doesn't cause scroll */
.mr-app { display:flex; flex-direction:column; height:100vh; height:100dvh; }

/* ---------- Top bar ---------- */
.mr-topbar {
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    padding:10px clamp(12px,3vw,26px); color:#fff;
}
.mr-brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#fff; font-weight:800; }
.mr-logo { font-size:1.6rem; }
.mr-brandname { font-size:1.25rem; letter-spacing:.5px; }
.mr-topbar-right { display:flex; align-items:center; gap:.5rem; }
.mr-chip {
    background:rgba(255,255,255,.22); color:#fff; border:none; border-radius:999px;
    padding:.4rem .9rem; font-weight:700; font-size:.95rem; backdrop-filter:blur(4px);
    letter-spacing:.5px; text-decoration:none; display:inline-flex; align-items:center;
}
.mr-chip-btn { cursor:pointer; }
.mr-chip-btn:hover, .mr-chip-link:hover { background:rgba(255,255,255,.34); }

/* ---------- Main / centering ---------- */
.mr-main { flex:1 1 auto; min-height:0; display:flex; padding:clamp(8px,2vh,20px) clamp(12px,3vw,26px) clamp(14px,3vh,26px); }
.mr-center { margin:auto; width:100%; max-width:1000px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3vh,28px); }

/* ---------- Home ---------- */
.mr-hero-emoji { font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.4rem; }
.mr-title { color:#fff; font-weight:900; font-size:clamp(2.2rem,7vw,3.6rem); margin:.3rem 0 0; text-shadow:0 4px 18px rgba(0,0,0,.18); }
.mr-accent { color:#ffe14d; }
.mr-subtitle { color:rgba(255,255,255,.92); font-size:clamp(1rem,2.4vw,1.25rem); margin:.4rem auto 0; max-width:30ch; }
.mr-home-cards { display:flex; gap:clamp(14px,3vw,26px); flex-wrap:wrap; justify-content:center; width:100%; }
.mr-card {
    background:var(--mr-card); border-radius:var(--mr-radius); box-shadow:var(--mr-shadow);
    padding:clamp(18px,3vw,30px); width:min(340px,86vw); display:flex; flex-direction:column;
    align-items:center; gap:.6rem; border:0;
}
.mr-card-emoji { font-size:2.4rem; }
.mr-card-title { font-weight:800; font-size:1.4rem; }
.mr-card-text { color:var(--mr-ink-soft); font-size:.98rem; }
.mr-privacy-note { color:rgba(255,255,255,.9); font-size:.9rem; margin:0; }

/* ---------- Buttons ---------- */
.mr-btn { border:none; border-radius:var(--mr-radius-sm); font-weight:800; cursor:pointer;
    padding:.8rem 1.4rem; font-size:1.05rem; transition:transform .06s ease, box-shadow .2s, filter .2s; color:#fff; }
.mr-btn:active { transform:translateY(2px); }
.mr-btn-lg { padding:.95rem 1.6rem; font-size:1.2rem; width:100%; }
.mr-btn-primary { background:var(--mr-primary); box-shadow:0 6px 0 var(--mr-primary-d); }
.mr-btn-secondary { background:var(--mr-secondary); box-shadow:0 6px 0 var(--mr-secondary-d); }
.mr-btn-go { background:var(--mr-go); box-shadow:0 6px 0 var(--mr-go-d); }
.mr-btn-ghost { background:rgba(91,83,255,.12); color:var(--mr-primary); box-shadow:none; }
.mr-btn:disabled { filter:grayscale(.5) opacity(.6); cursor:not-allowed; box-shadow:none; }

/* ---------- Inputs ---------- */
.mr-input, .mr-code-input {
    width:100%; border:3px solid #e7e9ff; border-radius:var(--mr-radius-sm);
    padding:.7rem 1rem; font-size:1.1rem; font-family:inherit; outline:none; text-align:center;
}
.mr-code-input { letter-spacing:.5rem; font-weight:800; text-transform:uppercase; font-size:1.5rem; }
.mr-input:focus, .mr-code-input:focus { border-color:var(--mr-primary); }
.mr-error { color:var(--mr-bad); font-weight:700; font-size:.92rem; }

/* ---------- Pick screens (levels/concepts/categories) ---------- */
.mr-pick { gap:clamp(10px,2.5vh,22px); }
.mr-pick-title { color:#fff; font-weight:900; font-size:clamp(1.5rem,4.5vw,2.4rem); margin:0; text-shadow:0 3px 14px rgba(0,0,0,.18); }
.mr-grid { display:grid; gap:clamp(12px,2.5vw,22px); width:100%; }
.mr-grid-4 { grid-template-columns:repeat(4,1fr); }
.mr-grid-auto { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.mr-tile {
    background:var(--mr-card); border-radius:var(--mr-radius); box-shadow:var(--mr-shadow);
    text-decoration:none; color:var(--mr-ink); padding:clamp(16px,3vw,30px) 1rem;
    display:flex; flex-direction:column; align-items:center; gap:.6rem; min-height:120px;
    justify-content:center; transition:transform .1s ease, box-shadow .2s;
}
.mr-tile:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 16px 36px rgba(31,33,71,.26); }
.mr-tile-emoji { font-size:clamp(1.8rem,5vw,2.6rem); }
.mr-tile-title { font-weight:800; font-size:clamp(1rem,2.4vw,1.2rem); }
.mr-tile-level { color:#fff; }
.lvl-g6  { background:linear-gradient(160deg,#ff8a3d,#ff5e7e); }
.lvl-g7  { background:linear-gradient(160deg,#5b53ff,#23c6e0); }
.lvl-g8  { background:linear-gradient(160deg,#1fbf6b,#23c6e0); }
.lvl-int1{ background:linear-gradient(160deg,#9b5cff,#ff7eb3); }

.mr-crumbs { color:rgba(255,255,255,.92); font-weight:600; }
.mr-crumbs a { color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.5); }
.mr-crumbs span { margin:0 .35rem; }
.mr-crumb-here { font-weight:800; }

/* code banner after sign-up */
.mr-codebanner {
    position:absolute; top:64px; left:50%; transform:translateX(-50%);
    background:#fff; border-radius:999px; box-shadow:var(--mr-shadow);
    padding:.5rem 1.1rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:center;
    max-width:92vw; z-index:5;
}
.mr-codebanner-label { font-weight:700; }
.mr-codebanner-code { font-weight:900; letter-spacing:.3rem; color:var(--mr-primary); font-size:1.2rem; }
.mr-codebanner-hint { color:var(--mr-ink-soft); font-size:.85rem; }

/* ---------- Quiz ---------- */
.mr-quiz { margin:auto; width:100%; max-width:680px; display:flex; flex-direction:column; gap:clamp(10px,2vh,18px); height:100%; justify-content:center; }
.mr-quiz-top { display:flex; align-items:center; gap:.8rem; color:#fff; }
.mr-back { background:rgba(255,255,255,.22); color:#fff; text-decoration:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; flex:0 0 auto; }
.mr-quiz-title { font-weight:800; font-size:clamp(1.05rem,3vw,1.4rem); flex:1 1 auto; text-align:left; }
.mr-score { background:rgba(255,255,255,.22); border-radius:999px; padding:.35rem .8rem; font-weight:800; }
.mr-score-ok { color:#ffe14d; }
.mr-streak { margin-left:.3rem; }

.mr-q-card { background:var(--mr-card); border-radius:var(--mr-radius); box-shadow:var(--mr-shadow); padding:clamp(16px,3vw,28px); display:flex; flex-direction:column; gap:clamp(12px,2.5vh,22px); }
.mr-q-prompt { font-size:clamp(1.5rem,5vw,2.4rem); font-weight:800; text-align:center; line-height:1.25; white-space:pre-line; word-break:break-word; }
.mr-q-answer { display:flex; flex-direction:column; gap:.7rem; align-items:center; }

/* numeric display + keypad */
.mr-display { width:100%; min-height:58px; border:3px solid #e7e9ff; border-radius:var(--mr-radius-sm); font-size:1.8rem; font-weight:800; text-align:center; display:flex; align-items:center; justify-content:center; padding:.3rem .6rem; background:var(--mr-card-soft); }
.mr-display.active { border-color:var(--mr-primary); }
.mr-frac { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.mr-frac .mr-display { width:160px; }
.mr-frac-bar { width:170px; height:4px; background:var(--mr-ink); border-radius:2px; }
.mr-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; width:100%; max-width:340px; }
.mr-key { background:var(--mr-card-soft); border:2px solid #e7e9ff; border-radius:14px; font-size:1.5rem; font-weight:800; padding:.55rem 0; cursor:pointer; color:var(--mr-ink); transition:transform .05s, background .15s; }
.mr-key:hover { background:#e9ecff; }
.mr-key:active { transform:translateY(2px); }
.mr-key-wide { grid-column:span 1; }

/* figure shown beside the keypad (e.g. a labelled triangle) */
.mr-input-col { display:flex; flex-direction:column; align-items:center; gap:.7rem; width:100%; }
.mr-answer-split { display:flex; align-items:center; justify-content:center; gap:clamp(8px,3vw,22px); width:100%; }
.mr-answer-split .mr-input-col { flex:1 1 auto; min-width:0; }
.mr-answer-split .mr-keypad { max-width:300px; }
.mr-figure { flex:0 0 auto; width:clamp(112px,30vw,180px); background:#fff; border-radius:var(--mr-radius-sm); padding:.3rem; }
.mr-figure svg { display:block; width:100%; height:auto; }

/* MCQ */
.mr-choices { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; width:100%; }
.mr-choice { background:var(--mr-card-soft); border:3px solid #e7e9ff; border-radius:var(--mr-radius-sm); padding:1rem; font-size:1.4rem; font-weight:800; cursor:pointer; transition:transform .06s, border-color .15s, background .15s; }
.mr-choice:hover { border-color:var(--mr-primary); }
.mr-choice.sel { border-color:var(--mr-primary); background:#eceaff; }
.mr-choice.ok { border-color:var(--mr-good); background:#e3f9ee; }
.mr-choice.no { border-color:var(--mr-bad); background:#ffe6eb; }

/* feedback */
.mr-q-feedback { text-align:center; font-weight:800; font-size:1.2rem; border-radius:var(--mr-radius-sm); padding:.7rem; }
.mr-q-feedback.ok { background:#e3f9ee; color:var(--mr-go-d); }
.mr-q-feedback.no { background:#ffe6eb; color:var(--mr-bad); }
.mr-fb-hint { display:block; font-weight:600; color:var(--mr-ink-soft); font-size:.95rem; margin-top:.3rem; }

.mr-q-actions { display:flex; gap:.7rem; }
.mr-q-actions .mr-btn-lg { width:auto; flex:1 1 auto; }
.mr-q-actions #q-hint { flex:0 0 auto; width:auto; }

/* ---------- Grade hub (Smart GO + mastery) ---------- */
.mr-hub { width:100%; max-width:560px; gap:clamp(12px,2.5vh,20px); }
.mr-smartgo {
    display:flex; align-items:center; gap:1rem; width:100%; text-decoration:none;
    background:linear-gradient(135deg,#ffb020,#ff7e3d); color:#fff;
    border-radius:var(--mr-radius); box-shadow:0 10px 0 #e0651f, var(--mr-shadow);
    padding:clamp(16px,3vw,24px) clamp(18px,4vw,28px); transition:transform .07s ease;
}
.mr-smartgo:active { transform:translateY(3px); box-shadow:0 7px 0 #e0651f, var(--mr-shadow); }
.mr-smartgo-emoji { font-size:2.6rem; line-height:1; }
.mr-smartgo-main { display:flex; flex-direction:column; align-items:flex-start; flex:1 1 auto; }
.mr-smartgo-text { font-size:clamp(1.6rem,5vw,2.1rem); font-weight:900; letter-spacing:.5px; }
.mr-smartgo-sub { font-size:.95rem; opacity:.95; font-weight:600; }
.mr-smartgo-arrow { font-size:2rem; font-weight:900; }

.mr-mastery { background:var(--mr-card); border-radius:var(--mr-radius); box-shadow:var(--mr-shadow); padding:clamp(12px,2.5vw,18px); text-align:left; }
.mr-mastery-head { display:flex; justify-content:space-between; align-items:center; font-weight:800; color:var(--mr-ink); margin-bottom:.5rem; }
.mr-mastery-pct { font-size:.9rem; color:var(--mr-primary); background:#eceaff; border-radius:999px; padding:.15rem .7rem; }
.mr-mastery-list { display:flex; flex-direction:column; gap:.4rem; max-height:46vh; overflow:auto; }
.mr-mrow {
    display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--mr-ink);
    background:var(--mr-card-soft); border-radius:var(--mr-radius-sm); padding:.55rem .8rem;
    border-left:6px solid #cfd3ec; transition:transform .06s, background .15s;
}
.mr-mrow:hover { background:#eef0fb; transform:translateX(2px); }
.mr-mrow-emoji { font-size:1.3rem; }
.mr-mrow-title { font-weight:700; flex:1 1 auto; }
.mr-stars { letter-spacing:1px; flex:0 0 auto; }
.mr-star { color:#d5d8ea; font-size:1.05rem; }
.mr-star.on { color:#ffc107; }
.mr-mrow-label { font-size:.78rem; font-weight:800; width:78px; text-align:right; flex:0 0 auto; }
.tier-0 { border-left-color:#cfd3ec; } .tier-0 .mr-mrow-label { color:#8a8fb0; }
.tier-1 { border-left-color:var(--mr-bad); } .tier-1 .mr-mrow-label { color:var(--mr-bad); }
.tier-2 { border-left-color:var(--mr-mid); } .tier-2 .mr-mrow-label { color:#a9760c; }
.tier-3 { border-left-color:var(--mr-good); } .tier-3 .mr-mrow-label { color:var(--mr-go-d); }

/* topic label shown in smart mode */
.mr-q-topic { text-align:center; font-weight:800; font-size:.95rem; color:var(--mr-primary); background:#eceaff; border-radius:999px; padding:.3rem .9rem; align-self:center; }

/* ---------- Admin ---------- */
.mr-admin { background:#eef1fb; color:var(--mr-ink); overflow:auto; }
.mr-admin .mr-app { height:auto; min-height:100vh; }
.mr-admin .mr-topbar { background:#1f2147; }
.mr-admin .mr-main { display:block; overflow:visible; }
.mr-admin-wrap { width:100%; max-width:1100px; margin:0 auto; }
.mr-admin-h1 { font-weight:900; margin:.2rem 0 1rem; }
.mr-admin-h2 { font-weight:800; margin:1.4rem 0 .6rem; font-size:1.2rem; }
.mr-admin-note { color:var(--mr-ink-soft); margin:0 0 1rem; }
.mr-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.mr-stat { background:#fff; border-radius:var(--mr-radius-sm); box-shadow:var(--mr-shadow); padding:1.1rem; text-align:center; }
.mr-stat-n { font-size:2rem; font-weight:900; color:var(--mr-primary); }
.mr-stat-l { color:var(--mr-ink-soft); font-weight:600; }
.mr-table-wrap { background:#fff; border-radius:var(--mr-radius-sm); box-shadow:var(--mr-shadow); overflow:auto; }
.mr-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.mr-table th, .mr-table td { padding:.6rem .8rem; text-align:left; border-bottom:1px solid #eef0f7; white-space:nowrap; }
.mr-table th { background:#f6f7fc; font-weight:800; position:sticky; top:0; }
.mr-prompt-cell { white-space:normal; max-width:320px; }
.mr-pct { font-weight:800; padding:.1rem .5rem; border-radius:999px; }
.mr-pct-good { background:#e3f9ee; color:var(--mr-go-d); }
.mr-pct-mid  { background:#fff3d6; color:#a9760c; }
.mr-pct-bad  { background:#ffe6eb; color:var(--mr-bad); }
.mr-empty { text-align:center; color:var(--mr-ink-soft); padding:1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width:620px) {
    .mr-grid-4 { grid-template-columns:repeat(2,1fr); }
    .mr-choices { grid-template-columns:repeat(2,1fr); }
    .mr-brandname { display:none; }
}
@media (max-height:560px) {
    .mr-q-prompt { font-size:clamp(1.2rem,5vw,1.8rem); }
    .mr-key { padding:.4rem 0; font-size:1.25rem; }
    .mr-display { min-height:46px; font-size:1.4rem; }
}