/* عالم كيان — visual system. Warm paper, deep teal ink, saffron light, coral accent. */
:root {
  --paper: #F6F1E7; --card: #FFFDF8; --ink: #23434A; --ink-soft: #5D7277; --teal: #1F5C66; --teal-dark: #164650;
  --coral: #E8735A; --saffron: #F2B544; --sun: #FFF1C9; --sage: #DCEBD9; --lav: #9C8BD0; --line: #E7DCC7; --line-2: #D9CCB2;
  --ok: #3E8E6E; --radius: 20px; --shadow: 0 6px 22px rgba(35, 67, 74, .08);
  --ar: "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --en: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --piece: 36px; --small: 22px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--ar); -webkit-text-size-adjust: 100%; }
body { background: radial-gradient(ellipse at 85% -10%, #FBE9C4 0, transparent 45%), radial-gradient(ellipse at 0% 110%, #E3EEDF 0, transparent 50%), var(--paper); overscroll-behavior: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border: 0; background: none; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #3A86A8; outline-offset: 3px; }
.loading { text-align: center; padding: 30vh 1rem; color: var(--ink-soft); }
[lang="en"], .en { font-family: var(--en); }

/* bilingual text */
.bi { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.bi .ar { font-weight: 700; }
.bi .en { font-size: .72em; font-weight: 500; opacity: .78; margin-top: 2px; }

/* ---------- app frame ---------- */
.app { height: 100vh; height: 100dvh; max-width: 1180px; margin: 0 auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0 14px env(safe-area-inset-bottom); position: relative; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 2px 6px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--teal); color: var(--saffron); display: grid; place-items: center; font-size: 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-size: 19px; }
.brand-text small { font-size: 11px; letter-spacing: .4px; color: var(--ink-soft); }
.tabs { display: flex; gap: 6px; margin-inline: auto; background: #EFE7D7; padding: 4px; border-radius: 16px; }
.tab { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 12px; min-height: 46px; font-size: 15px; color: var(--ink-soft); }
.tab .bi { align-items: flex-start; }
.tab[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px rgba(35, 67, 74, .1); }
.tab-icon { font-size: 20px; }
.top-tools { display: flex; gap: 6px; }
.icon { width: 46px; height: 46px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 20px; display: grid; place-items: center; }
.gear { position: relative; }
.gear.holding { background: var(--sun); box-shadow: 0 0 0 4px var(--saffron) inset; transition: box-shadow 1.2s linear; }

.coach { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; box-shadow: var(--shadow); min-height: 88px; }
.guide { width: 72px; height: 72px; }
.guide svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cue { min-width: 0; }
.cue p { margin: 0; }
.cue-ar { font-size: clamp(17px, 2.4vw, 23px); font-weight: 700; line-height: 1.45; }
.cue-en { font-size: clamp(13px, 1.7vw, 16px); color: var(--ink-soft); line-height: 1.4; margin-top: 2px !important; text-align: start; }
.cue .speaking { background: linear-gradient(transparent 60%, var(--sun) 60%); }
.audio-note { font-size: 12px; color: #9A6A2C; min-height: 0; }
.listen-group { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.listen { min-width: 48px; min-height: 44px; padding: 0 10px; border-radius: 12px; background: #F2ECDF; border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.listen.pause { min-width: 44px; }
.listen:disabled { opacity: .45; }

.stage { min-height: 0; overflow: auto; padding: 12px 2px; position: relative; -webkit-overflow-scrolling: touch; }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 12px; }
.actions .side { display: flex; gap: 6px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; min-height: 52px; padding: 6px 16px; font-size: 16px; }
.btn .bi .en { font-size: .7em; }
.btn.primary { background: var(--teal); color: #fff; min-width: min(46vw, 260px); min-height: 60px; font-size: 19px; box-shadow: 0 4px 0 var(--teal-dark); }
.btn.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--teal-dark); }
.btn.primary:disabled { background: #B7C9C7; box-shadow: none; color: #F7FAF9; }
.btn.primary.big { min-width: 240px; min-height: 70px; font-size: 22px; }
.btn.secondary { background: var(--sage); color: var(--teal-dark); }
.btn.quiet { background: transparent; color: var(--ink-soft); padding: 6px 10px; }
.btn.quiet:disabled, .btn.secondary:disabled { opacity: .4; }
.btn.danger { background: #FBE3DC; color: #9C3B25; }
.btn-icon { font-size: 20px; font-weight: 700; }

/* Suhail moods */
.suhail .s-mouth { display: none; }
.mood-idle .s-smile, .mood-happy .s-smile, .mood-cheer .s-smile { display: inline; }
.mood-think .s-hmm { display: inline; }
.mood-talk .s-smile { display: inline; }
.talking .s-mouth { display: none; } .talking .s-open { display: inline; animation: talk .32s infinite alternate; transform-origin: 60px 76px; }
.suhail .s-sparkles { opacity: 0; }
.mood-cheer .s-sparkles { opacity: 1; animation: twinkle 1s ease-in-out 2; }
.mood-think .s-body { transform: rotate(-6deg); transform-origin: 60px 60px; transition: transform .3s; }
.guide.bounce svg { animation: bounce .45s ease-out; }
.mood-cheer.bounce svg { animation: hop .6s ease-out; }
@keyframes talk { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes bounce { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) rotate(4deg); } }
@keyframes twinkle { 50% { opacity: .2; } }

/* welcome */
.welcome { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(246, 241, 231, .96); z-index: 20; padding: 20px; }
.welcome-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.welcome-guide { width: 150px; height: 150px; animation: hop 2.4s ease-in-out infinite; }
.welcome h1 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 8px; }

/* ---------- menus ---------- */
.menu { max-width: 980px; margin: 0 auto; }
.menu-title { margin: 4px 0 12px; font-size: 20px; text-align: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.card { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 150px; box-shadow: var(--shadow); transition: transform .15s; }
.card:active { transform: scale(.98); }
.card.recommended { border-color: var(--saffron); box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.card-art { display: flex; align-items: center; justify-content: center; height: 64px; gap: 2px; }
.card-art svg { height: 52px; width: auto; }
.card-art.big-icon { font-size: 46px; }
.card-art.lesson-art svg { height: 66px; width: 88px; }
.card-title { font-size: 17px; }
.card-sub { font-size: 13px; color: var(--ink-soft); }
.card-sub .ar { font-weight: 500; }
.ribbon { position: absolute; top: -10px; inset-inline-end: 12px; background: var(--saffron); color: #4A3410; border-radius: 10px; padding: 2px 10px; font-size: 12px; }
.ribbon .bi { flex-direction: row; gap: 6px; align-items: baseline; }
.soon { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: 18px; }
.muted { color: var(--ink-soft); font-size: 13px; }

/* ---------- division ---------- */
.division { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.story { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px; }
.chip b { font: 800 26px/1 var(--en); }
.chip.total b { color: var(--coral); } .chip.divisor b { color: var(--teal); }
.chip .bi { align-items: flex-start; font-size: 14px; }
.story .op { font: 800 26px var(--en); color: var(--ink-soft); }
.book-tag { background: #EDE6FA; color: #4D3E86; border-radius: 10px; padding: 3px 10px; font-size: 12px; }
.book-tag .bi { flex-direction: row; gap: 6px; }

.board { flex: 1; display: grid; grid-template-columns: minmax(190px, 34%) minmax(0, 1fr); gap: 12px; align-items: stretch; min-height: 0; }
.basket { overflow: hidden; background: #FFF6E3; border: 2px dashed #E3C88F; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; min-height: 140px; transition: box-shadow .2s, background .2s; }
.basket-head { display: flex; align-items: center; justify-content: space-between; color: #8D6424; font-size: 14px; }
.basket-head .count { font: 800 30px var(--en); }
.pieces { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; justify-content: center; padding: 6px 0; }
.piece { width: var(--piece); height: var(--piece); display: inline-grid; place-items: center; padding: 0; border-radius: 10px; position: relative; flex: none; }
button.piece:not(:disabled):hover { background: #FBE6B8; }
.piece.selected { background: var(--sun); box-shadow: 0 0 0 3px var(--saffron); transform: translateY(-4px); }
.piece svg { width: 100%; height: 100%; pointer-events: none; }
.empty-note { color: #B08A4E; font-size: 13px; align-self: center; margin: auto; }
.bins { display: grid; gap: 10px; align-content: start; }
.bins.friends { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.bins.boxes { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.bin { position: relative; background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: border-color .2s, background .2s, box-shadow .2s; min-height: 120px; }
.bin.friend:not(:disabled):active { transform: scale(.98); }
.bin .face { width: 46px; height: 46px; }
.bin .face svg { width: 100%; height: 100%; }
.bin .name { font-size: 13px; display: flex; gap: 6px; align-items: baseline; }
.bin .name small { font-size: 11px; color: var(--ink-soft); }
.plate { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; min-height: calc(var(--small) + 4px); width: 100%; background: #F5EFE3; border-radius: 12px; padding: 3px; }
.plate .piece, .slots .piece { width: var(--small); height: var(--small); }
.bin .count { position: absolute; top: 6px; inset-inline-start: 8px; font: 800 16px var(--en); background: #EFE7D7; border-radius: 9px; min-width: 26px; padding: 1px 6px; }
.bin.box { min-height: 96px; justify-content: center; background: #FBF4E6; border-color: #E2CDA4; border-radius: 12px 12px 18px 18px; }
.bin.box.full { background: #EAF4E8; border-color: #A7CDA0; }
.bin.box.full .count { background: var(--ok); color: #fff; }
.bin.box.next { border-style: dashed; background: transparent; opacity: .8; }
.bin.box.open { border-color: var(--saffron); }
.slots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; padding-top: 18px; }
.slot { width: var(--small); height: var(--small); border: 2px dashed #D3C3A2; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 800; color: var(--coral); }
.slot.missing, .piece.missing { border: 2px dashed var(--coral); background: #FDE8E1; color: var(--coral); border-radius: 8px; animation: pulse 1s ease-in-out infinite; }
.glow { border-color: var(--saffron) !important; background: var(--sun) !important; box-shadow: 0 0 0 4px rgba(242, 181, 68, .35); }
.focus { box-shadow: 0 0 0 4px var(--saffron), 0 0 24px rgba(242, 181, 68, .5); }
.hover { border-color: var(--teal) !important; background: #E6F1EF !important; }
.counted { outline: 3px solid var(--saffron); border-radius: 10px; background: var(--sun) !important; }
.counted::after { content: attr(data-n); position: absolute; top: -12px; inset-inline-end: -6px; background: var(--teal); color: #fff; font: 700 12px var(--en); border-radius: 8px; padding: 0 5px; }
.pulse { animation: pulse 1s ease-in-out 3; }
.shake { animation: shake .4s; }
.pop { animation: bounce .35s; }
.flying { position: fixed; z-index: 50; pointer-events: none; margin: 0; }
.flying.dragging { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.eq-panel, .discover { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow); }
.equation { display: flex; align-items: center; gap: 10px; font: 800 clamp(26px, 4.6vw, 40px)/1 var(--en); }
.equation .op { color: var(--ink-soft); font-weight: 600; }
.equation .op.r { color: var(--coral); }
.blank { min-width: 1.6em; height: 1.4em; display: inline-grid; place-items: center; border-radius: 12px; border: 3px dashed var(--line-2); color: var(--ink-soft); padding: 0 6px; }
.blank.active { border-color: var(--saffron); background: var(--sun); color: var(--ink); }
.blank.solved { border-style: solid; border-color: var(--ok); color: var(--ok); background: #EAF4E8; }
.numpad { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 640px; }
.key { min-height: 52px; border-radius: 12px; background: #F2ECDF; border: 1px solid var(--line); font: 800 22px var(--en); }
.key:active:not(:disabled) { background: var(--sun); }
.key.del { color: var(--coral); }
.discover .equation.big span:not(.op) { padding: 0 4px; border-radius: 8px; }
.n-total, .l-total b { color: var(--coral); } .n-div, .l-div b { color: var(--teal); } .n-q, .l-q b { color: #6D55B8; } .n-r, .l-r b { color: #C2861B; }
.legends { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; width: 100%; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.legend b { font: 800 24px var(--en); min-width: 34px; text-align: center; }
.legend .bi { align-items: flex-start; }
.why-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.why { display: flex; gap: 5px; }
.why .slot { width: 36px; height: 36px; }
.why .slot.filled { border: 2px solid #E3C88F; background: #FFF6E3; }
.why .slot.filled svg { width: 28px; height: 28px; }
.why-text { font-size: 15px; }
.feelings { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.feel { width: 46px; height: 46px; border-radius: 14px; background: #F7F1E5; border: 1px solid var(--line); font-size: 22px; }
.feel.chosen { background: var(--sun); border-color: var(--saffron); }
.division[data-phase="discover"] .bins .bin { min-height: 0; }

/* which-one */
.which { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.story-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.story-num { font: 600 12px var(--en); color: var(--ink-soft); }
.story-text { font-size: clamp(18px, 2.6vw, 24px); margin: 6px 0; }
.story-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; --piece: 26px; }
.choices.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 8px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 17px; box-shadow: var(--shadow); }
.choice.text { min-height: 84px; }
.choice.right { border-color: var(--ok); background: #EAF4E8; }
.choice .pic { display: flex; height: 58px; } .choice .pic svg { height: 58px; width: auto; }
.meaning-q { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; }
.big-q { font: 800 40px var(--en); color: #6D55B8; }
.which-pic { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; --piece: 22px; --small: 22px; }
.mini { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 140px; }
.mini .face { width: 40px; height: 40px; } .mini .face svg { width: 100%; height: 100%; }
.mini.box { background: #FBF4E6; border-color: #E2CDA4; }
.mini .plate { background: transparent; }
.which-done { text-align: center; font-size: 20px; padding: 20px; }

/* ---------- art studio ---------- */
.app.wide .coach { min-height: 0; padding: 4px 10px; grid-template-columns: 48px minmax(0, 1fr) auto; }
.app.wide .guide { width: 48px; height: 48px; }
.app.wide .cue-ar { font-size: 17px; } .app.wide .cue-en { font-size: 13px; }
.app.wide .stage { padding: 8px 0; overflow: hidden; }
.lesson-title { flex-direction: row; gap: 8px; align-items: baseline; font-size: 16px; }
.step-dots { display: flex; gap: 6px; align-items: center; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: #E4DAC6; display: inline-grid; place-items: center; font-size: 11px; }
.dot.done { background: var(--ok); } .dot.now { background: var(--saffron); box-shadow: 0 0 0 3px var(--sun); }
.dot.color { width: 24px; height: 24px; background: transparent; }
.canvas-area { min-height: 0; min-width: 0; display: grid; place-items: center; position: relative; }
.canvas-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(35, 67, 74, .12); border: 1px solid var(--line); background: #FFFEFB; }
.canvas-wrap .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-wrap .live { touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.thumb { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; padding: 0; aspect-ratio: 4 / 3; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-title { font-size: 16px; margin: 18px 0 8px; }

/* ---------- parents ---------- */
.parents { position: fixed; inset: 0; background: rgba(35, 67, 74, .35); z-index: 40; display: grid; place-items: center; padding: 12px; }
.parents-sheet { background: var(--card); border-radius: 22px; width: min(720px, 100%); max-height: 100%; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.parents-head { position: sticky; top: 0; z-index: 2; background: var(--card); display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.parents-head h2 { margin: 0; font-size: 20px; }
.parents-head .bi { flex-direction: row; gap: 8px; align-items: baseline; }
.close { width: 44px; height: 44px; border-radius: 12px; background: #F2ECDF; font-size: 18px; }
.parents-body { padding: 8px 18px 24px; }
.p-section { border-bottom: 1px solid var(--line); padding: 10px 0 14px; }
.p-section h3 { font-size: 16px; margin: 6px 0 10px; }
.p-section h3 .bi, .note b .bi, .field > .bi, .p-section p .bi, .field.inline .bi { flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.note { background: #F7F2E8; border-radius: 14px; padding: 8px 12px; margin-bottom: 8px; }
.note p { margin: 4px 0; font-size: 14px; }
.note .bi .ar, .p-section p .bi .ar { font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 14px; }
.field.inline { flex-direction: row; align-items: center; }
.field select { min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; padding: 6px 10px; }
.field input[type="checkbox"] { width: 24px; height: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.p-section .btn.secondary { min-height: 44px; font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 760px), (orientation: portrait) {
  .board { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .basket { min-height: 110px; max-height: 34vh; }
}
@media (max-width: 600px) {
  .app { padding: 0 8px env(safe-area-inset-bottom); }
  .topbar { gap: 6px; padding: 6px 0 4px; }
  .brand-text small { display: none; }
  .brand-text b { font-size: 16px; }
  .brand-mark { width: 32px; height: 32px; font-size: 19px; }
  .tab { padding: 4px 8px; min-height: 44px; font-size: 13px; }
  .tab-icon { display: none; }
  .icon { width: 42px; height: 42px; font-size: 18px; }
  .coach { grid-template-columns: 48px minmax(0, 1fr); padding: 6px 8px; gap: 8px; min-height: 0; }
  .guide { width: 48px; height: 48px; }
  .listen-group { grid-column: 1 / -1; max-width: none; justify-content: center; flex-wrap: nowrap; }
  .listen { min-height: 38px; font-size: 13px; padding: 0 8px; }
  .cue-ar { font-size: 16px; } .cue-en { font-size: 12.5px; }
  .stage { padding: 8px 0; }
  .actions { padding: 6px 0 8px; gap: 6px; }
  .btn { min-height: 48px; padding: 4px 10px; font-size: 14px; }
  .btn.primary { min-width: 0; flex: 1; min-height: 54px; font-size: 16px; }
  .actions .side { flex: none; }
  .actions .btn.quiet .bi .en { display: none; }
  .chip b { font-size: 22px; } .chip { padding: 3px 8px; } .chip .bi { font-size: 12px; }
  .bins.friends { grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 6px; }
  .bins.boxes { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
  .bin { min-height: 96px; padding: 6px 4px; border-radius: 14px; }
  .bin .face { width: 36px; height: 36px; }
  .bin .count { font-size: 13px; top: 4px; inset-inline-start: 4px; min-width: 20px; }
  .bin .name small { display: none; }
  .numpad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .key { min-height: 46px; font-size: 20px; }
  .equation { gap: 6px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { min-height: 128px; padding: 12px 6px 10px; }
  .card-title { font-size: 15px; }
  .legend b { font-size: 20px; }
  .choice { min-height: 100px; font-size: 15px; }
  .app.wide .listen-group { display: none; }
}
@media (max-width: 360px) {
  .tabs .tab .bi .en { display: none; }
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.division[data-phase="equation"] .basket, .division[data-phase="discover"] .basket { min-height: 90px; }
.division[data-phase="equation"] .bin, .division[data-phase="discover"] .bin { min-height: 0; }
.division[data-phase="equation"] .bin .face, .division[data-phase="discover"] .bin .face { width: 32px; height: 32px; }
/* Keep the number pad reachable without scrolling; the board scrolls behind it. */
.eq-panel { position: sticky; bottom: 0; z-index: 3; }
html, body { overflow: hidden; }
@media (max-width: 360px) { .brand-text { display: none; } .audio-note { font-size: 11px; } }
.ask { position: fixed; inset: 0; z-index: 60; background: rgba(35, 67, 74, .35); display: grid; place-items: center; padding: 16px; }
.ask-card { background: var(--card); border-radius: 20px; padding: 18px; max-width: 420px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.ask-q { font-size: 17px; margin-bottom: 10px; }
.ask .btn-row { justify-content: center; }
.ask-card.wide { max-width: 560px; max-height: 100%; overflow: auto; }
.ask-lines { text-align: start; margin-bottom: 10px; }
.ask-lines p { margin: 6px 0; font-size: 14px; }
.ask-lines .bi { align-items: flex-start; }
.ask-lines .warn, .data-status.warn, .note .warn { color: #9C3B25; }
.data-status { white-space: pre-line; }
.data-status.ok { color: #1F6B4F; }
.welcome-card .storage-note { max-width: 420px; padding: 6px 12px; }
.welcome-card .storage-note .bi { align-items: center; }

/* ---------- art studio layout (v7.0.1) ----------
   Canvas column (title + save badge + canvas) beside a tools panel that never scrolls.
   Undo / redo / new page / save picture live in the action bar, which is always visible. */
.studio { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.canvas-col { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
.canvas-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 30px; }
.canvas-title { font-size: 15px; }
.bi.inline { flex-direction: row; gap: 6px; align-items: baseline; }
.save-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
.save-badge { font-size: 13px; border-radius: 10px; padding: 2px 10px; }
.save-badge[data-state="idle"] { display: none; }
.save-badge[data-state="saving"] { color: var(--ink-soft); background: #F2ECDF; }
.save-badge[data-state="saved"] { color: var(--ok); background: #EAF4E8; }
.save-badge[data-state="draft"], .save-badge[data-state="memory"] { color: #9C3B25; background: #FBE3DC; font-weight: 700; }
.storage-note { margin: 0; font-size: 12px; color: #9C3B25; background: #FFF4F0; border: 1px solid #F3C9BB; border-radius: 10px; padding: 4px 10px; max-width: 520px; }
.toolbar { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; overflow: visible; align-self: start; }
.tool-group { display: grid; gap: 6px; }
.tools { grid-template-columns: repeat(2, 54px); }
.tool { width: 54px; height: 54px; border-radius: 12px; background: #F2ECDF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 2px solid transparent; }
.tool-icon { font-size: 21px; line-height: 1; }
.tool-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.tool[aria-checked="true"] .tool-label { color: var(--teal-dark); }
.sizes { grid-template-columns: repeat(3, 34px); justify-content: center; }
.size { width: 34px; height: 34px; border-radius: 10px; background: #F2ECDF; display: grid; place-items: center; border: 2px solid transparent; }
.tool[aria-checked="true"], .size[aria-checked="true"] { border-color: var(--teal); background: #E6F1EF; }
.size i { display: block; border-radius: 50%; background: var(--ink); }
.colors { grid-template-columns: repeat(3, 34px); justify-content: center; }
.swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0, 0, 0, .12); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--teal); }
.step-dots { display: flex; gap: 6px; align-items: center; }

/* Portrait tablets and phones: canvas on top, tools in rows underneath. */
@media (max-width: 760px), (orientation: portrait) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .toolbar { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-self: stretch; padding: 6px; gap: 8px 14px; }
  .tools { grid-template-columns: repeat(4, 50px); }
  .tool { width: 50px; height: 50px; }
  .colors { grid-template-columns: repeat(12, 30px); }
  .swatch { width: 30px; height: 30px; }
}
@media (max-width: 600px) {
  .colors { grid-template-columns: repeat(6, 30px); }
  .storage-note { font-size: 11px; }
  .canvas-title { display: none; }
}
/* Narrow screens: secondary action buttons show icons only (each keeps its spoken label). */
@media (max-width: 480px) {
  .actions .side .btn.quiet .bi { display: none; }
  .actions .side .btn.quiet { padding: 6px 8px; min-width: 44px; }
}

/* =================== Grade 4 math (v7.1) =================== */
.math-home .two-paths { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card.path { min-height: 170px; }
.card.small { min-height: 110px; }
.chapter-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.ch-tab { min-width: 44px; height: 44px; border-radius: 12px; background: #EFE7D7; color: var(--ink-soft); font: 700 16px var(--en); flex: none; }
.ch-tab.has { background: #E6F1EF; color: var(--teal-dark); box-shadow: inset 0 -3px 0 var(--teal); }
.ch-tab.on { background: var(--teal); color: #fff; box-shadow: none; }
.school-lessons .menu-title { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ct-en { font: 700 16px var(--en); } .ct-ar { font-size: 15px; color: var(--ink-soft); }
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; text-align: start; min-height: 64px; }
.lesson-row.soon { opacity: .62; }
.lesson-row.ready { border-color: #A7CDA0; }
.lesson-row.at-school { box-shadow: 0 0 0 3px var(--sun); border-color: var(--saffron); }
.ln { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ln-no { font: 800 18px var(--en); color: var(--teal); min-width: 44px; text-align: center; }
.ln-titles { display: flex; flex-direction: column; min-width: 0; }
.ln-en { font: 600 15px var(--en); text-align: left; }
.ln-ar { font-size: 14px; color: var(--ink-soft); }
.ln-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.tag { font-size: 11px; border-radius: 9px; padding: 2px 8px; background: #EFE7D7; color: var(--ink-soft); }
.tag.school { background: var(--sun); color: #6A4A10; }
.tag.verified { background: #E6F1EF; color: #1F5C66; }
.tag.ready, .tag.st-understood { background: #EAF4E8; color: var(--ok); }
.tag.st-needs-review { background: #FBE3DC; color: #9C3B25; }
.tag.st-started { background: #E6F1EF; color: var(--teal-dark); }
.suggest-card { background: var(--card); border: 2px solid var(--saffron); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.suggest-card .reason { font-size: 15px; }
.lesson-list.compact .lesson-row { min-height: 52px; }

.lesson-player { display: flex; flex-direction: column; gap: 8px; min-height: 100%; }
.lesson-bar { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; flex-wrap: wrap; }
.lesson-no { font: 800 20px var(--en); color: #fff; background: var(--teal); border-radius: 10px; padding: 2px 10px; }
.lesson-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lesson-names b { font: 700 15px var(--en); text-align: left; }
.lesson-names span { font-size: 13px; color: var(--ink-soft); }
.stage-dots { display: flex; gap: 4px; }
.sd { font-size: 11px; border-radius: 10px; padding: 2px 8px; background: #EFE7D7; color: var(--ink-soft); }
.sd .bi { flex-direction: row; gap: 4px; align-items: baseline; }
.sd .bi .en { display: none; }
.sd.now { background: var(--saffron); color: #4A3410; }
.sd.done { background: #EAF4E8; color: var(--ok); }
.lesson-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.step-count { margin: 0; color: var(--ink-soft); font-size: 13px; }
.stage-title { margin: 0; font-size: 17px; }
.intro-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.goal-label { margin: 0; font-size: 13px; color: var(--ink-soft); }
.vocab { display: flex; flex-wrap: wrap; gap: 8px; }
.vocab-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; background: #E6F1EF; border-radius: 12px; padding: 6px 12px; min-height: 48px; }
.vocab-chip b { font: 700 14px var(--en); } .vocab-chip span { font-size: 13px; }

.bi-block { display: flex; flex-direction: column; gap: 2px; }
.bi-block p { margin: 0; line-height: 1.55; }
.bb-en { font: 500 16px/1.5 var(--en); text-align: left; }
.bb-ar { font-size: 16px; color: var(--ink); }
.bi-block .num, .problem-card .num { font-weight: 800; color: var(--teal-dark); }
.bi-block.hook, .bi-block.goal { background: #FFF6E3; border-radius: 14px; padding: 10px 12px; }
.bi-block.praise { background: #EAF4E8; border-radius: 14px; padding: 10px 12px; }
.bi-block.explain-prompt { background: #EDE6FA; border-radius: 14px; padding: 10px 12px; }
.hint-box { background: #FFF4D6; border: 1.5px solid var(--saffron); border-radius: 14px; padding: 8px 12px; }
.solution { display: flex; flex-direction: column; gap: 6px; background: #F7F2E8; border-radius: 14px; padding: 10px 12px; }

.problem-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.pc-block { position: relative; border-radius: 12px; padding: 8px 10px 8px; }
.pc-en { background: #F2F7FB; } .pc-ar { background: #FFF8EC; }
.pc-tag { position: absolute; top: -9px; inset-inline-start: 10px; font: 700 10px var(--en); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; color: var(--ink-soft); }
.pc-block p { margin: 0; line-height: 1.7; }
.pc-en p { font: 500 18px/1.6 var(--en); text-align: left; }
.pc-ar p { font-size: 18px; }
.sentence { display: inline; text-align: inherit; padding: 1px 2px; border-radius: 6px; font: inherit; line-height: inherit; cursor: pointer; }
.sentence + .sentence { margin-inline-start: 4px; }
.sentence.reading { background: var(--sun); }
.pc-math { font: 800 clamp(22px, 4vw, 30px) var(--en); text-align: center; color: var(--ink); background: none; border: 0; border-radius: 12px; padding: 4px 12px; margin: 0 auto; display: block; cursor: pointer; }
.pc-math.reading { background: var(--sun); }
.pc-listen { display: flex; gap: 6px; justify-content: center; }
.listen.small { min-height: 40px; font-size: 13px; }
.answer-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font: 600 16px var(--en); }
.unit { font-size: 14px; color: var(--ink-soft); }

.ans-box { display: inline-grid; place-items: center; min-width: 2.6em; min-height: 1.6em; padding: 0 8px; border: 3px dashed var(--line-2); border-radius: 12px; font: 800 24px var(--en); color: var(--ink-soft); background: #fff; vertical-align: middle; }
.ans-box.active { border-color: var(--saffron); background: var(--sun); color: var(--ink); }
.ans-box.ok { border-style: solid; border-color: var(--ok); background: #EAF4E8; color: var(--ok); }
.ans-box.filled { border-style: solid; border-color: #9C8BD0; background: #EDE6FA; color: #5A4A9A; }
.ans-box.wrong { animation: shake .4s; border-color: var(--coral); }
.pad-host { position: sticky; bottom: 0; z-index: 4; background: linear-gradient(transparent, var(--paper) 18%); padding-top: 8px; }
.numpad.pad6 { max-width: 720px; margin: 0 auto; }

.widget { display: flex; flex-direction: column; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.widget:empty { display: none; }
.w-cap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.w-cap span[lang=ar] { font-weight: 700; } .w-cap span[lang=en] { font: 14px var(--en); color: var(--ink-soft); }
.w-eq { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 clamp(20px, 3.4vw, 26px) var(--en); flex-wrap: wrap; }
.col-split[hidden] { display: none; }
.col-split span { font-size: .8em; color: var(--ink-soft); }
.w-line { font: 700 20px var(--en); }
.w-work { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.area { display: flex; width: 100%; max-width: 680px; min-height: 120px; }
.area-side { display: grid; place-items: center; font: 800 22px var(--en); color: var(--coral); padding: 0 8px; }
.area-cell { display: flex; flex-direction: column; min-width: 92px; border: 2px solid var(--teal); margin-inline-start: -2px; }
.area-cell:nth-child(odd) { background: #E6F1EF; } .area-cell:nth-child(even) { background: #F2F7FB; }
.area-top { font: 800 16px var(--en); text-align: center; color: var(--teal-dark); border-bottom: 1px dashed var(--teal); padding: 2px; }
.area-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; }
.area-expr { font: 600 14px var(--en); color: var(--ink-soft); }
.area-body .ans-box { font-size: 20px; }
.cgrid { display: grid; grid-template-columns: repeat(var(--cols), 48px); gap: 2px 4px; font: 800 30px var(--en); justify-content: center; }
.cg-cell { height: 46px; display: grid; place-items: center; border-radius: 8px; }
.cg-cell.carry { height: 30px; font-size: 18px; color: var(--coral); }
.cg-cell.now { background: var(--sun); }
.cg-cell.ans { background: #F2ECDF; color: var(--teal-dark); }
.cg-rule { grid-column: 1 / -1; height: 3px; background: var(--ink); border-radius: 2px; }
.factor-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.factor { min-width: 72px; min-height: 64px; border-radius: 16px; background: #F2ECDF; border: 2px solid var(--line); font: 800 26px var(--en); }
.factor.picked { background: var(--sun); border-color: var(--saffron); transform: translateY(-3px); }
.factor-row .op { font: 700 24px var(--en); color: var(--ink-soft); }
.numline { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 620px; }
.nl-end { min-width: 64px; min-height: 52px; border-radius: 14px; background: #E6F1EF; border: 2px solid var(--teal); font: 800 20px var(--en); color: var(--teal-dark); }
.nl-end.right { background: var(--ok); color: #fff; border-color: var(--ok); }
.nl-end:disabled { opacity: 1; }
.nl-ticks { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; height: 44px; border-bottom: 3px solid var(--ink); position: relative; }
.nl-tick { width: 2px; height: 12px; background: var(--ink); position: relative; font: 700 14px var(--en); }
.nl-tick.mid { height: 20px; }
.nl-tick.here { background: var(--coral); height: 28px; width: 4px; }
.nl-label { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font: 800 20px var(--en); color: var(--coral); white-space: nowrap; }
.jump { display: flex; align-items: center; gap: 8px; font: 700 18px var(--en); }
.jump-arrow { background: var(--sun); border-radius: 10px; padding: 2px 10px; color: #6A4A10; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip-pv { font: 800 20px var(--en); background: #F2ECDF; border: 2px solid var(--line); border-radius: 12px; padding: 6px 12px; }
.chip-pv.now { background: var(--sun); border-color: var(--saffron); }
.chip-pv.used { opacity: .45; text-decoration: line-through; }
.frames { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 10px; }
.frames li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; opacity: .65; }
.frames li.now { opacity: 1; border-color: var(--saffron); box-shadow: 0 0 0 3px var(--sun); }
.summary-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.score { font: 800 42px var(--en); color: var(--teal); }
.state { margin: 0; }

.scratch { position: fixed; z-index: 30; inset-inline-start: 12px; bottom: 96px; width: min(560px, 92vw); height: min(420px, 55vh); background: var(--card); border: 2px solid var(--teal); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 6px; gap: 6px; }
.scratch-head { display: flex; align-items: center; gap: 6px; }
.scratch-head .bi { margin-inline-end: auto; }
.scratch-area { min-height: 0; display: grid; place-items: center; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { min-height: 48px; border-radius: 12px; padding: 4px 14px; background: #F2ECDF; border: 2px solid transparent; }
.seg button[aria-checked="true"] { background: #E6F1EF; border-color: var(--teal); }
.voice-panel h4 { margin: 14px 0 6px; font-size: 14px; }
.voice-panel h4 .bi, .seg .bi { flex-direction: row; gap: 6px; align-items: baseline; }
.voice-list { display: flex; flex-direction: column; gap: 6px; }
.voice-row { display: flex; align-items: center; gap: 8px; }
.voice-play { width: 46px; height: 46px; border-radius: 12px; background: var(--sage); flex: none; font-size: 16px; }
.voice-pick { flex: 1; text-align: start; min-height: 46px; border-radius: 12px; background: #F7F2E8; border: 2px solid transparent; padding: 4px 10px; display: flex; flex-direction: column; align-items: flex-start; }
.voice-pick[aria-checked="true"] { border-color: var(--teal); background: #E6F1EF; }
.voice-pick small { font: 11px var(--en); color: var(--ink-soft); }
.voice-name { align-items: flex-start; }

@media (max-width: 600px) {
  .pc-en p, .pc-ar p { font-size: 16px; }
  .lesson-names b { font-size: 13px; } .lesson-names span { font-size: 12px; }
  .stage-dots { width: 100%; justify-content: center; }
  .cgrid { grid-template-columns: repeat(var(--cols), 38px); font-size: 24px; }
  .cg-cell { height: 38px; }
  .area-cell { min-width: 70px; }
  .ln-en { font-size: 13px; } .ln-ar { font-size: 12px; }
  .lesson-row { flex-direction: column; align-items: stretch; }
  .ln-tags { justify-content: flex-start; }
  .scratch { bottom: 84px; height: 46vh; }
}
.cue-ar .num { font-weight: 800; }
bdi.mathrun { white-space: nowrap; }
.prog-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 6px 0; }
.prog-id { font: 800 14px var(--en); color: var(--teal); min-width: 38px; }
.prog-text { flex: 1; font-size: 13px; }
.field.small { margin: 0; font-size: 12px; }
.map summary { cursor: pointer; padding: 8px 0; font-weight: 700; }
.map-ch summary { font-size: 14px; font-weight: 600; padding: 6px 0; }
.map-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding: 4px 0; font-size: 13px; }
.map-t { flex: 1; display: flex; flex-direction: column; min-width: 160px; }
.map-t small { color: var(--ink-soft); }
.tag.v-school, .tag.d-tested, .tag.d-trialed { background: #EAF4E8; color: var(--ok); }
.tag.d-in-progress { background: var(--sun); color: #6A4A10; }
@media (max-width: 380px) {
  .actions { gap: 4px; }
  .actions .btn.primary { padding: 4px 8px; font-size: 14px; min-height: 52px; }
  .actions .btn.primary .bi .en { display: none; }
  .actions .side { gap: 2px; }
  .actions .side .btn.quiet, .actions .side .btn.secondary { min-width: 40px; padding: 4px 6px; }
  .actions .side .btn.secondary .bi .en { display: none; }
}
@media (max-width: 360px) {
  .topbar { gap: 4px; }
  .top-tools { gap: 3px; }
  .icon { width: 38px; height: 38px; font-size: 16px; border-radius: 12px; }
  .tabs { padding: 3px; gap: 3px; }
  .tab { padding: 4px 7px; }
}
/* KW-018: voice source */
.voice-row.blocked .voice-pick { opacity: .55; }
.voice-in-use { background: #F7F2E8; border-radius: 12px; padding: 6px 12px; margin: 6px 0; }
.voice-in-use p { margin: 4px 0; font-size: 14px; }