@font-face{font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/rubik-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/rubik-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --bg:#f3f6f1; --card:#ffffff; --ink:#1f2a27; --muted:#5b6b66; --line:#dfe6e2;
  --brand:#2f6f5e; --brand-ink:#ffffff; --brand-soft:#e3f0eb;
  --good:#1f8a4c; --good-bg:#e5f6ec; --bad:#c0392b; --bad-bg:#fdecea;
  --q:#3b6fd8; --qe:#d9822b; --h:#8a4fd1; --he:#c2417a;
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Rubik','Assistant','Arial Hebrew','Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
.top{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 16px;background:var(--brand);color:var(--brand-ink);font-weight:500;font-size:16px}
.top .logo{font-size:20px}
main{max-width:640px;margin:0 auto;padding:16px 14px 40px}
.card{background:var(--card);border-radius:var(--radius);padding:22px 18px;box-shadow:0 2px 0 rgba(0,0,0,.03),0 8px 24px rgba(31,42,39,.06);border:1px solid var(--line)}
h1{font-size:26px;line-height:1.3;margin:6px 0 10px;font-weight:700}
h2{font-size:19px;margin:0 0 10px;font-weight:700}
p{margin:0 0 10px;overflow-wrap:anywhere}
.lead{color:var(--muted);font-size:17px}
.emoji{font-size:44px;line-height:1;text-align:center;margin-top:4px}
.start h1,.end h1{text-align:center}
.start .lead,.end .lead{text-align:center}
.parts{list-style:none;padding:0;margin:16px 0;counter-reset:p}
.parts li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;counter-increment:p}
.parts li::before{content:counter(p);flex:0 0 28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:700;display:grid;place-items:center;font-size:15px}
.part-name{flex:1;font-weight:500}
.part-count{color:var(--muted);font-size:14px;white-space:nowrap}
.remember{background:var(--brand-soft);border-radius:14px;padding:14px 16px;margin:6px 0 18px}
.remember h2{font-size:16px;color:var(--brand);margin-bottom:6px}
.remember p{margin:0 0 6px;font-size:16px}
.iv,.dv{white-space:nowrap}
.iv{background:#dbe7ff;color:#24479a;border-radius:6px;padding:0 6px;font-weight:500}
.dv{background:#ffe7cc;color:#8a4a10;border-radius:6px;padding:0 6px;font-weight:500}
.btn{display:block;width:100%;min-height:54px;border:0;border-radius:14px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;margin-top:16px;transition:transform .06s ease, filter .15s}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
button:focus-visible{outline:3px solid #f2b705;outline-offset:2px}
.part-tag{display:inline-block;font-size:14px;font-weight:500;padding:3px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);margin-bottom:12px}
.sec-q .part-tag{background:#e6eefc;color:var(--q)}
.sec-qe .part-tag{background:#fcefe2;color:#a85c12}
.sec-h .part-tag{background:#f1e8fb;color:var(--h)}
.sec-he .part-tag{background:#fbe6ef;color:var(--he)}
.intro{border-top:6px solid var(--brand)}
.intro.sec-q{border-top-color:var(--q)}.intro.sec-qe{border-top-color:var(--qe)}.intro.sec-h{border-top-color:var(--h)}.intro.sec-he{border-top-color:var(--he)}
.tip{display:flex;gap:10px;align-items:flex-start;background:#fff9e6;border:1px solid #f3e2a8;border-radius:12px;padding:12px 14px;margin-top:8px}
.tip p{margin:0}
.tip-icon{font-size:20px;line-height:1.4}
.progress{margin:2px 2px 12px}
.progress-label{display:flex;justify-content:space-between;font-size:15px;color:var(--muted);margin-bottom:6px}
.progress-score{font-weight:500;color:var(--brand)}
.bar{height:8px;background:#dfe6e2;border-radius:999px;overflow:hidden}
.fill{height:100%;background:var(--brand);border-radius:999px;transition:width .3s ease}
.box{border-radius:12px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--line);background:#fafcfb}
.box p{margin:0;font-size:17px}
.box-label{font-size:13px;font-weight:700;letter-spacing:.2px;color:var(--muted);margin-bottom:4px}
.box.question{background:#eef4ff;border-color:#d4e1fb}
.box.question p{font-weight:500}
.box.bad{background:#fff4f2;border-color:#f6d3cd;border-inline-start:5px solid var(--bad)}
.box.bad p{font-weight:500}
.prompt{margin-top:4px}
.options{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:right;min-height:56px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:17px;line-height:1.5;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover:not(:disabled){border-color:#9fbcb3;background:#f7fbf9}
.opt:disabled{cursor:default}
.letter{flex:0 0 30px;height:30px;border-radius:50%;background:#eef2f0;color:var(--muted);display:grid;place-items:center;font-weight:700;font-size:15px;margin-top:1px}
.opt-text{flex:1;min-width:0;overflow-wrap:anywhere}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.correct .letter{background:var(--good);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .letter{background:var(--bad);color:#fff}
.opt.dim{opacity:.55}
.feedback{margin-top:16px;border-radius:14px;padding:14px 16px;animation:pop .2s ease}
.feedback.good{background:var(--good-bg);border:1px solid #bfe5cd}
.feedback.oops{background:var(--bad-bg);border:1px solid #f3c9c3}
.fb-title{font-size:19px;font-weight:700;margin-bottom:6px}
.good .fb-title{color:var(--good)}
.oops .fb-title{color:var(--bad)}
.feedback p{font-size:16px}
.fix{background:#fff;border-radius:10px;padding:10px 12px;border:1px dashed #9cc7b2;margin-top:4px}
.fix p{margin:0;font-weight:500}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.big-score{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px}
.big-score .num{font-size:46px;font-weight:700;color:var(--brand);line-height:1.1}
.big-score .pct{color:var(--muted);font-size:18px}
.breakdown{list-style:none;padding:0;margin:16px 0 0}
.breakdown li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.breakdown li:last-child{border-bottom:0}
.mini{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mini-bar{width:72px;height:8px;background:#e3e9e6;border-radius:999px;overflow:hidden;display:block}
.mini-fill{display:block;height:100%;background:var(--brand)}
.mini-num{font-weight:700;min-width:34px;text-align:left;direction:ltr}
@media (min-width:700px){body{font-size:18px} main{padding-top:28px} .card{padding:30px 32px} h1{font-size:30px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- תוספות לתרגול נפח ומסה ---- */
.top{position:sticky;top:0;z-index:5;justify-content:flex-start}
.top-title{flex:1}
.code-badge{background:rgba(255,255,255,.16);border-radius:999px;padding:3px 10px;font-size:14px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.code-badge[hidden]{display:none}
.code-badge b{font-weight:700;letter-spacing:1px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-start:4px}
.dot.ok{background:#9be7b4}.dot.wait{background:#ffe08a}.dot.err{background:#ff9d8f}
.btn.secondary{background:#fff;color:var(--brand);border:2px solid var(--brand);min-height:50px;margin-top:10px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.field{margin:16px 0 4px}
.field label{display:block;font-weight:500;margin:10px 0 6px}
.opt-l{color:var(--muted);font-weight:400;font-size:15px}
.field input,.num-in,.unit-sel,textarea.reason{font:inherit;font-size:18px;border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.num-in:focus,.unit-sel:focus,textarea.reason:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.code-in{font-size:26px!important;letter-spacing:4px;text-align:center}
.warn{background:#fff6e5;border:1px solid #f1d39a;border-radius:10px;padding:10px 12px;margin:12px 0 0;font-size:16px}
.resume{background:#eef4ff;border:1px solid #d4e1fb;border-radius:14px;padding:14px 16px;margin:14px 0}
.resume h2{margin-bottom:4px}.resume p{color:var(--muted);margin:0}
.codebox{background:var(--brand-soft);border-radius:16px;padding:14px 16px;margin:12px 0}
.cb-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}
.cb-row span{color:var(--muted)}
.cb-row b{font-size:24px}
.cb-row b.big{font-size:40px;letter-spacing:6px;color:var(--brand)}
.notice{border-radius:12px;padding:10px 14px;margin:0 2px 12px;font-weight:500;animation:pop .25s ease}
.notice.up{background:#fff6d6;border:1px solid #f0d77a}
.notice.down,.notice.stay{background:#eef4ff;border:1px solid #d4e1fb}
.qcard{border-top:6px solid var(--brand)}
.qcard.lvl2{border-top-color:var(--q)}.qcard.lvl2 .part-tag{background:#e6eefc;color:var(--q)}
.qcard.lvl3{border-top-color:var(--h)}.qcard.lvl3 .part-tag{background:#f1e8fb;color:var(--h)}
.qcard.final{border-top-color:var(--qe)}.qcard.final .part-tag{background:#fcefe2;color:#a85c12}
.stem{font-size:18px;font-weight:500;line-height:1.65;margin-bottom:14px}
.stem b{font-weight:700}
.figure{margin:0 0 16px;display:flex;justify-content:center;background:#fafcfb;border:1px solid var(--line);border-radius:14px;padding:10px 6px}
svg.fig{display:block;height:auto}
svg.fig.one{width:min(190px,60vw)}
svg.fig.two{width:min(360px,94%)}
svg.fig.wide{width:min(380px,96%)}
.answer{margin-top:4px}
.num-row{display:flex;gap:10px;align-items:center}
.num-in{flex:1 1 auto;min-width:0;text-align:center;font-size:22px;direction:rtl}
.unit-sel{flex:0 0 120px;width:120px}
.unit-lbl{flex:0 0 auto;font-weight:700;font-size:18px;color:var(--muted)}
.num-in.ok{border-color:var(--good);background:var(--good-bg)}.num-in.bad{border-color:var(--bad);background:var(--bad-bg)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.sel .letter{background:var(--brand);color:#fff}
.reason-l{display:block;font-weight:700;margin:16px 0 6px}
textarea.reason{resize:vertical;min-height:88px;line-height:1.5}
.hint-l{margin:10px 0 6px;color:var(--muted);font-size:15px}
.order-slots,.order-pool{display:flex;flex-wrap:wrap;gap:8px}
.slot{flex:1 1 calc(50% - 8px);min-height:48px;border:2px dashed var(--line);border-radius:12px;background:#fafcfb;font:inherit;font-size:17px;display:flex;align-items:center;gap:8px;padding:6px 10px;color:var(--ink);cursor:pointer}
.slot.filled{border-style:solid;border-color:#9fbcb3;background:#fff}
.slot:disabled{cursor:default}
.sn{flex:0 0 26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:14px}
.order-slots.ok .slot{border-color:var(--good);background:var(--good-bg)}
.order-slots.bad .slot{border-color:var(--bad);background:var(--bad-bg)}
.chip{font:inherit;font-size:18px;font-weight:500;border:2px solid var(--brand);color:var(--brand);background:#fff;border-radius:999px;padding:8px 16px;min-height:46px;cursor:pointer}
.chip:disabled{opacity:.35;cursor:default}
.feedback .why{font-weight:500}
.feedback .btn{margin-top:14px}
.feedback.self{background:#f4f1fb;border:1px solid #ddd0f3}
.self .fb-title{color:var(--h)}
.self-row{display:flex;flex-direction:column;gap:0}
.model{background:#fff;border-radius:10px;padding:10px 12px;border:1px solid #d9dfdc;margin-top:8px}
.model p{margin:0}
.answer-line{margin-top:8px}
.reached{text-align:center;color:var(--muted)}
.results{list-style:none;padding:0;margin:14px 0 0}
.results li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.results li:last-child{border-bottom:0}
.mark{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff}
.r-ok .mark{background:var(--good)}.r-bad .mark{background:var(--bad)}
.r-t{flex:1;min-width:0}
.r-t small{color:var(--muted)}
.r-l{font-size:13px;color:var(--muted);white-space:nowrap}
.small-note{text-align:center;color:var(--muted);font-size:15px;margin-top:12px}

/* ניסיון שני */
.feedback.hint{background:#fff8e6;border:1px solid #f1dca4}
.feedback.hint .try2{margin-top:6px;font-weight:600;color:#8a6200}
.opt.tried{opacity:.6;border-style:dashed;text-decoration:line-through;text-decoration-color:#c9a3a0}
.opt.tried .letter{background:#e7d6d3}
.results small.t2{color:#8a6200}

.leaf-wait{background:#fff6e0;color:#6b4e0e;border-radius:12px;padding:10px 14px;margin:10px 0;font-size:.98rem;line-height:1.5}

.round-l{font-size:13px;color:var(--muted);opacity:.85}
.results li.r-bonus{background:#fff6e0;border-radius:10px}
.end .codebox{margin-top:16px}

/* ---- גרירה ושחרור ---- */
.dbank{display:flex;flex-wrap:wrap;gap:10px;min-height:62px;padding:10px;border:2px dashed #c9d6d0;border-radius:14px;background:#fafcfb}
.dbank.over{border-color:var(--brand);background:var(--brand-soft)}
.bank-empty{color:var(--muted);font-size:14px;align-self:center}
.dchip{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 16px;border:2px solid #9fbcb3;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:17px;font-weight:500;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;line-height:1.3;text-align:center}
.dchip.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(47,111,94,.25)}
.dchip.dragging{opacity:.35}
.dchip.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-60%) rotate(-2deg);box-shadow:0 10px 24px rgba(0,0,0,.18);border-color:var(--brand)}
.dchip.in{border:0;background:transparent;min-height:0;padding:0;font-weight:700;cursor:grab}
.dslot{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:96px;padding:6px 12px;border:2px dashed #9fb3c8;border-radius:12px;background:#f4f8fd;color:var(--ink);font:inherit;font-size:17px;cursor:pointer;touch-action:none;vertical-align:middle}
.dslot.filled{border-style:solid;border-color:#7fa4c9;background:#fff}
.dslot.over{border-color:var(--brand);background:var(--brand-soft)}
.dslot.right{border-color:var(--good);background:var(--good-bg)}
.dslot.wrong{border-color:var(--bad);background:var(--bad-bg)}
.dslot:disabled{cursor:default}
.slot-empty{color:#9fb3c8;font-weight:700}
.dslot.wide{flex:1;width:100%}
.dslot.inline{margin:4px 2px;min-width:88px}
.dorder,.lbl-rows{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.drow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.drow .dslot{flex:1 1 160px}
.dnum{flex:0 0 32px;height:32px;border-radius:50%;background:#eef2f0;color:var(--muted);display:grid;place-items:center;font-weight:700}
.dnum.lblL{background:#c2417a;color:#fff}
.dtag{font-size:13px;color:var(--muted);flex-basis:100%;margin-inline-start:42px;margin-top:-4px}
.fill-lines{margin-bottom:12px}
.fill-line{font-size:18px;line-height:2.1;margin:4px 0}
.fill-line .dslot.inline{min-height:40px;min-width:64px;padding:2px 8px;margin:2px 1px;font-size:16px;border-radius:10px}
.dnd-live{min-height:1.2em;font-size:14px;color:var(--brand);margin:6px 0 0}
.options.pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:420px){.card.qcard{padding-left:12px;padding-right:12px}.options.pics{gap:6px}}
.options.pics .opt{flex-direction:column;align-items:center;padding:6px;min-height:0}
.options.pics .opt-text{display:flex;flex-direction:column;align-items:center;width:100%}
.options.pics svg.pic{width:100%;height:auto;max-height:190px}
.pic-l{font-weight:700;font-size:15px;margin-top:2px}
svg.fig.pic{display:block}

.opt-title{font-size:1.05rem;margin:18px 0 8px}
.opt-box{border:1.5px solid #c9d6d1;border-radius:14px;padding:12px 14px;margin:10px 0;background:#fafcfb;text-align:right}
.opt-box h3{margin:0 0 6px;font-size:1.05rem}
.opt-box p{margin:0 0 10px;line-height:1.5}
.opt-box .btn{width:100%}

.class-tag{margin:-4px auto 10px;display:table;background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:3px 14px;font-size:15px}
.class-tag[hidden]{display:none}

/* כיתה מעורבת: בחירת פנייה */
.g-pick{margin:6px 0 14px;padding:12px 14px;border:2px solid var(--brand-soft);border-radius:14px;background:#fff}
.g-pick.g-first{border-color:var(--brand)}
.g-q{margin:0 0 4px;font-weight:700;text-align:center}
.g-row{display:flex;gap:10px}
.g-row .btn{flex:1;width:auto;margin-top:8px}

/* קרדיט בתחתית כל עמוד */
.credit a{color:inherit;text-decoration:underline}
.credit{text-align:center;color:#8a9691;font-size:13px;line-height:1.4;margin:6px auto 0;padding:4px 16px calc(18px + env(safe-area-inset-bottom))}

/* תמונה אמיתית בשאלה (שאלת האתגר בנפח) */
.photo{margin:0 0 12px;text-align:center}.photo img{display:block;width:100%;max-width:100%;height:auto;max-height:260px;object-fit:cover;border-radius:12px;margin:0 auto}.photo figcaption{font-size:11px;color:#8a8a8a;margin-top:4px;text-align:center}.photo figcaption a{color:inherit;text-decoration:none}

.photo img[src^="/img/pkg-"]{width:auto;max-width:60%;max-height:220px;object-fit:contain}

.auto-note{margin:8px 0 0;font-size:13px;color:#7a8580;line-height:1.4}

/* הדמיית מאזני כפות */
svg.fig.bal-sim{width:min(400px,98%);touch-action:manipulation}
svg.fig.bal-sim .bs-on{cursor:pointer}
.bal-help{margin:0 0 8px;font-size:.92rem;color:#5b6b66}
.bal-tray{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:flex-end;background:#f5ecd9;border:2px solid #c2a468;border-radius:14px;padding:10px 8px;margin:0 0 14px;box-shadow:inset 0 2px 5px rgba(120,90,30,.15)}
.bal-st{border:0;background:transparent;padding:3px;min-width:44px;min-height:46px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;border-radius:8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bal-st:focus-visible{outline:3px solid #2d7fc1;outline-offset:1px}
.bal-st.out{cursor:default}
.bal-tray.locked .bal-st{cursor:default}

/* תצוגה מקדימה למורה (?demo=) */
.btn.demo-new{width:auto;min-height:0;padding:7px 18px;font-size:15px;margin-top:4px}
.progress-score{white-space:nowrap;margin-inline-start:8px}

.video{margin:0 0 12px;text-align:center}.video video{display:block;margin:0 auto;height:min(58vh,540px);width:auto;max-width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:12px}