:root{
  --ink:#1B2430; --ink-soft:#44525F; --ink-faint:#7A8794;
  --paper:#FAFBFC; --panel:#FFFFFF; --grid:#DCE5EE; --rule:#C9D5E2;
  --pen:#2B5BA8; --pen-soft:#E8EFF9;
  --red:#C22B47; --red-soft:#FBE9ED;
  --amber:#B07908; --amber-soft:#FBF1DC;
  --green:#1E7A5F; --green-soft:#E1F1EC;
  --shadow:0 1px 2px rgba(27,36,48,.06),0 10px 26px -16px rgba(27,36,48,.35);
  --display:"Frank Ruhl Libre",Georgia,serif;
  --body:"Assistant","Segoe UI",Arial,sans-serif;
  --num:"Rubik","Segoe UI",Arial,sans-serif;
  --shape:#2B5BA8; --shapefill:#E8EFF9; --mark:#C22B47;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#E7ECF2; --ink-soft:#A8B4C2; --ink-faint:#74818F;
  --paper:#11161C; --panel:#181F27; --grid:#1D2831; --rule:#2B3643;
  --pen:#7FA9E8; --pen-soft:#18273B;
  --red:#F0748C; --red-soft:#331A22;
  --amber:#E3B44C; --amber-soft:#2E2515;
  --green:#4FC39F; --green-soft:#0F2A23;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
  --shape:#7FA9E8; --shapefill:#1B2E47; --mark:#F0748C;
}}
:root[data-theme="dark"]{
  --ink:#E7ECF2; --ink-soft:#A8B4C2; --ink-faint:#74818F;
  --paper:#11161C; --panel:#181F27; --grid:#1D2831; --rule:#2B3643;
  --pen:#7FA9E8; --pen-soft:#18273B;
  --red:#F0748C; --red-soft:#331A22;
  --amber:#E3B44C; --amber-soft:#2E2515;
  --green:#4FC39F; --green-soft:#0F2A23;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
  --shape:#7FA9E8; --shapefill:#1B2E47; --mark:#F0748C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; direction:rtl; text-align:right; font-family:var(--body); color:var(--ink);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to left, var(--grid) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 30px);
  font-size:17px; line-height:1.55; -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:860px; margin:0 auto; padding-inline:16px; padding-block:0 64px}

.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--paper);
  border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:9px;
  padding-block:11px; margin-bottom:20px; flex-wrap:wrap}
.brand{font-family:var(--display); font-weight:900; font-size:19px; margin:0; letter-spacing:-.01em}
.brand small{font-family:var(--num); font-weight:500; font-size:11px; color:var(--ink-faint); display:block; letter-spacing:.09em}
.sp{flex:1 1 auto}
.stat{font-family:var(--num); font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--rule); border-radius:999px; padding:4px 12px;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.stat b{color:var(--pen); font-weight:700}
.ghost{font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; background:none;
  border:1px solid var(--rule); color:var(--ink-soft); border-radius:999px; padding:5px 13px}
.ghost:hover{border-color:var(--ink-faint); color:var(--ink)}

.hero{margin-bottom:22px}
.hero h2{font-family:var(--display); font-weight:900; font-size:clamp(26px,5.6vw,38px); margin:0 0 7px; line-height:1.12}
.hero p{margin:0; color:var(--ink-soft); font-size:16px; max-width:58ch}
.yearbar{display:flex; gap:3px; margin:16px 0 4px}
.yearbar i{flex:1; height:8px; border-radius:2px; background:var(--grid)}
.yearbar i[data-s="1"]{background:var(--amber)} .yearbar i[data-s="2"]{background:var(--green)}
.yearbar i[data-s="3"]{background:var(--green); box-shadow:inset 0 0 0 2px var(--panel)}
.yearlab{font-family:var(--num); font-size:11.5px; color:var(--ink-faint); display:flex; justify-content:space-between; margin-bottom:24px}

/* units accordion */
.unit{background:var(--panel); border:1px solid var(--rule); border-radius:5px; margin-bottom:10px;
  box-shadow:var(--shadow); overflow:hidden; position:relative}
.unit::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--uc)}
.uhead{width:100%; background:none; border:0; font:inherit; color:inherit; text-align:right; cursor:pointer;
  display:flex; align-items:center; gap:13px; padding:14px 19px 14px 15px}
.uhead:hover{background:var(--pen-soft)}
.unum{flex:0 0 auto; width:34px; height:34px; border-radius:4px; background:var(--uc); color:var(--panel);
  display:grid; place-items:center; font-family:var(--num); font-weight:700; font-size:15px}
.uinfo{flex:1 1 auto; min-width:0}
.uinfo h3{margin:0; font-size:17.5px; font-weight:700; line-height:1.25}
.uinfo span{font-size:12.5px; color:var(--ink-faint); font-family:var(--num)}
.ustar{font-family:var(--num); font-size:12px; color:var(--amber); letter-spacing:1px; white-space:nowrap}
.uarw{color:var(--ink-faint); transition:transform .2s}
.unit.open .uarw{transform:rotate(180deg)}
.ubody{padding:4px 15px 16px; border-top:1px dashed var(--rule)}
.ugoal{font-size:14.5px; color:var(--ink-soft); margin:12px 4px 14px; line-height:1.55}
.tracks{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.tcard{position:relative; text-align:right; font:inherit; color:inherit; cursor:pointer;
  background:var(--paper); border:1px solid var(--rule); border-radius:4px; padding:13px 14px 12px;
  transition:.12s; overflow:hidden}
.tcard:hover{border-color:var(--uc); transform:translateY(-1px)}
.tcard:focus-visible,.uhead:focus-visible{outline:2px solid var(--pen); outline-offset:2px}
.tcard h4{margin:0 0 3px; font-size:15.5px; font-weight:700}
.tcard p{margin:0 0 10px; font-size:12.8px; color:var(--ink-faint); line-height:1.4; min-height:34px}
.bar{height:5px; background:var(--grid); border-radius:99px; overflow:hidden; margin-bottom:5px}
.bar i{display:block; height:100%; background:var(--uc); border-radius:99px}
.brow{display:flex; justify-content:space-between; font-family:var(--num); font-size:11px; color:var(--ink-faint)}
.stars{color:var(--amber); letter-spacing:1px}
.examrow{margin-top:11px}
.exbtn{width:100%; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; color:var(--uc);
  background:var(--pen-soft); border:1px dashed var(--uc); border-radius:4px; padding:10px}
.exbtn:hover{filter:brightness(.97)}

/* quiz */
.dots{display:flex; gap:5px; margin-bottom:16px; flex-wrap:wrap}
.dot{flex:1 1 14px; max-width:26px; height:6px; border-radius:99px; background:var(--grid)}
.dot.ok{background:var(--green)} .dot.no{background:var(--red)} .dot.now{background:var(--pen)}
.qhead{display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.qhead .n{font-family:var(--num); font-size:12.5px; color:var(--ink-faint); letter-spacing:.05em}
.qhead .streak{font-family:var(--num); font-size:12.5px; color:var(--amber); font-weight:700}
.qcard{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:23px 21px 25px; box-shadow:var(--shadow)}
.qtext{font-size:clamp(18px,3.1vw,22px); font-weight:600; line-height:1.45; margin:0 0 6px}
.qsub{font-size:14px; color:var(--ink-faint); margin:0 0 16px}
.big{font-family:var(--num); font-weight:700; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block}
.bignum{font-family:var(--num); font-weight:700; font-size:clamp(28px,7.5vw,44px); direction:ltr; unicode-bidi:isolate;
  text-align:center; display:block; margin:12px 0 18px; font-variant-numeric:tabular-nums; color:var(--pen)}
.expr{font-family:var(--num); font-weight:700; font-size:clamp(24px,6vw,36px); direction:ltr; unicode-bidi:isolate;
  text-align:center; display:block; margin:12px 0 18px; color:var(--pen); line-height:1.35}
.words{font-size:clamp(19px,4.2vw,26px); font-weight:700; text-align:center; margin:12px 0 18px; line-height:1.4; color:var(--pen)}
sup{font-size:.62em; vertical-align:super}

.opts{display:grid; gap:9px}
.opt{font:inherit; text-align:right; cursor:pointer; background:var(--paper); color:var(--ink);
  border:1.5px solid var(--rule); border-radius:5px; padding:12px 15px; font-size:16.5px; font-weight:600;
  transition:.12s; display:flex; align-items:center; gap:11px}
.opt:hover:not(:disabled){border-color:var(--pen); background:var(--pen-soft)}
.opt:disabled{cursor:default}
.opt .k{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--rule);
  font-family:var(--num); font-size:12px; display:grid; place-items:center; color:var(--ink-faint)}
.opt.good{border-color:var(--green); background:var(--green-soft)}
.opt.good .k{background:var(--green); border-color:var(--green); color:var(--panel)}
.opt.bad{border-color:var(--red); background:var(--red-soft)}
.opt.bad .k{background:var(--red); border-color:var(--red); color:var(--panel)}
.opt .val{font-family:var(--num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}

.cmp{display:flex; gap:12px; justify-content:center; margin-top:6px}
.cmp button{font-family:var(--num); font-size:29px; font-weight:700; cursor:pointer; background:var(--paper);
  border:1.5px solid var(--rule); border-radius:6px; width:80px; height:64px; color:var(--ink); transition:.12s}
.cmp button:hover:not(:disabled){border-color:var(--pen); background:var(--pen-soft)}
.cmp button.good{border-color:var(--green); background:var(--green-soft); color:var(--green)}
.cmp button.bad{border-color:var(--red); background:var(--red-soft); color:var(--red)}
.cmprow{display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 20px; flex-wrap:wrap}
.cmprow .big{font-size:clamp(22px,5.5vw,34px); color:var(--pen)}
.qm{font-size:28px; color:var(--ink-faint); font-family:var(--num)}

.inrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px}
input.ans{font-family:var(--num); font-size:25px; font-weight:700; direction:ltr; text-align:center;
  background:var(--paper); border:1.5px solid var(--rule); border-radius:5px; padding:10px 13px;
  color:var(--ink); width:100%; max-width:240px; font-variant-numeric:tabular-nums}
input.ans.sm{max-width:130px}
input.ans:focus{outline:none; border-color:var(--pen); background:var(--pen-soft)}
input.ans.good{border-color:var(--green); background:var(--green-soft)}
input.ans.bad{border-color:var(--red); background:var(--red-soft)}
.twofield{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.twofield label{display:block; font-size:13px; color:var(--ink-faint); font-weight:700; margin-bottom:4px}
.btn{font:inherit; font-size:16px; font-weight:700; cursor:pointer; background:var(--pen); color:#fff;
  border:0; border-radius:5px; padding:11px 24px; transition:.12s}
:root[data-theme="dark"] .btn,:root:not([data-theme="light"]) .btn{color:#11161C}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn{color:#fff}}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--panel); color:var(--ink-soft); border:1px solid var(--rule)}
.btn:focus-visible,.opt:focus-visible,.cmp button:focus-visible,.chip2:focus-visible{outline:2px solid var(--pen); outline-offset:3px}

.sortbox{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:14px 0 8px}
.chip2{font-family:var(--num); font-size:18px; font-weight:700; cursor:pointer; background:var(--paper);
  border:1.5px solid var(--rule); border-radius:5px; padding:10px 15px; color:var(--ink);
  direction:ltr; font-variant-numeric:tabular-nums; position:relative; transition:.12s}
.chip2:hover:not(:disabled){border-color:var(--pen); background:var(--pen-soft)}
.chip2.picked{background:var(--pen-soft); border-color:var(--pen); color:var(--pen)}
.chip2.picked::after{content:attr(data-o); position:absolute; top:-9px; inset-inline-end:-7px;
  width:20px; height:20px; border-radius:50%; background:var(--pen); color:var(--panel);
  font-size:11px; display:grid; place-items:center}
.chip2.sel{background:var(--pen-soft); border-color:var(--pen); color:var(--pen)}
.chip2.good{border-color:var(--green); background:var(--green-soft); color:var(--green)}
.chip2.bad{border-color:var(--red); background:var(--red-soft); color:var(--red)}
.chip2.miss{border-color:var(--amber); border-style:dashed; color:var(--amber)}

.artwrap{margin:10px 0 14px; direction:ltr; text-align:center; color:var(--ink-soft)}
.artwrap svg{max-width:100%; height:auto; display:inline-block}
.lineWrap{margin:8px 0 4px; direction:ltr}
.lineWrap svg{width:100%; height:118px; display:block; cursor:crosshair; touch-action:none}
.lineHint{font-size:13px; color:var(--ink-faint); text-align:center; margin-top:2px}
.pickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:6px}
.pick{cursor:pointer; background:var(--paper); border:1.5px solid var(--rule); border-radius:5px;
  padding:8px; transition:.12s; display:flex; flex-direction:column; align-items:center; gap:4px}
.pick:hover:not(:disabled){border-color:var(--pen)}
.pick span{font-family:var(--num); font-size:12.5px; color:var(--ink-faint)}
.pick.good{border-color:var(--green); background:var(--green-soft)}
.pick.bad{border-color:var(--red); background:var(--red-soft)}

.fb{margin-top:16px; border-radius:5px; padding:13px 15px; font-size:15.5px; line-height:1.55}
.fb.ok{background:var(--green-soft); border-inline-start:4px solid var(--green)}
.fb.no{background:var(--red-soft); border-inline-start:4px solid var(--red)}
.fb h4{margin:0 0 5px; font-size:16px; font-weight:700}
.fb.ok h4{color:var(--green)} .fb.no h4{color:var(--red)}
.fb p{margin:0 0 5px; color:var(--ink-soft)} .fb p:last-child{margin:0}
.fb b{color:var(--ink)}
.steps{font-family:var(--num); font-size:14px; direction:ltr; text-align:left; background:var(--panel);
  border-radius:4px; padding:9px 12px; margin-top:8px; line-height:1.8; font-variant-numeric:tabular-nums}
.nextrow{display:flex; gap:10px; margin-top:15px; flex-wrap:wrap; align-items:center}

.res{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:32px 24px 30px; text-align:center; box-shadow:var(--shadow)}
.res .bigstars{font-size:38px; letter-spacing:6px; color:var(--amber); margin-bottom:8px}
.res .sc{font-family:var(--num); font-size:56px; font-weight:700; line-height:1; color:var(--pen); font-variant-numeric:tabular-nums}
.res .of{font-family:var(--num); font-size:15px; color:var(--ink-faint); margin-bottom:12px}
.res h3{font-family:var(--display); font-size:26px; margin:0 0 8px}
.res p{color:var(--ink-soft); margin:0 auto 18px; max-width:44ch; font-size:15.5px}
.res .btn{margin:0 5px}
.wrongs{text-align:right; margin-top:24px; border-top:1px solid var(--rule); padding-top:16px}
.wrongs h4{font-size:14px; color:var(--ink-faint); margin:0 0 10px}
.wrongs ul{margin:0; padding-inline:18px 0}
.wrongs li{font-size:14.5px; color:var(--ink-soft); margin-bottom:8px; line-height:1.5}
footer{margin-top:30px; border-top:1px solid var(--rule); padding-top:14px; font-size:13px; color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:520px){.qcard{padding:18px 15px 20px} .uhead{padding:13px 14px 13px 11px} .ubody{padding:4px 11px 14px}}

/* ---- צבע לכל יחידה ---- */
.u1{--uc:#2B5BA8} .u2{--uc:#B0491F} .u3{--uc:#1E7A5F} .u4{--uc:#8A3FA8} .u5{--uc:#0E7490}
.u6{--uc:#B07908} .u7{--uc:#C22B47} .u8{--uc:#3F6B1F} .u9{--uc:#5B4BC4} .u10{--uc:#155E75}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .u1{--uc:#7FA9E8} :root:not([data-theme="light"]) .u2{--uc:#E8905F}
 :root:not([data-theme="light"]) .u3{--uc:#4FC39F} :root:not([data-theme="light"]) .u4{--uc:#C48BDF}
 :root:not([data-theme="light"]) .u5{--uc:#4FC0DC} :root:not([data-theme="light"]) .u6{--uc:#E3B44C}
 :root:not([data-theme="light"]) .u7{--uc:#F0748C} :root:not([data-theme="light"]) .u8{--uc:#9BC46A}
 :root:not([data-theme="light"]) .u9{--uc:#A79BF0} :root:not([data-theme="light"]) .u10{--uc:#63BBD4}
}
:root[data-theme="dark"] .u1{--uc:#7FA9E8} :root[data-theme="dark"] .u2{--uc:#E8905F}
:root[data-theme="dark"] .u3{--uc:#4FC39F} :root[data-theme="dark"] .u4{--uc:#C48BDF}
:root[data-theme="dark"] .u5{--uc:#4FC0DC} :root[data-theme="dark"] .u6{--uc:#E3B44C}
:root[data-theme="dark"] .u7{--uc:#F0748C} :root[data-theme="dark"] .u8{--uc:#9BC46A}
:root[data-theme="dark"] .u9{--uc:#A79BF0} :root[data-theme="dark"] .u10{--uc:#63BBD4}