/* ===== אוצר — עיצוב ===== */
:root{
  --bg:#0F1012; --surface:#17181C; --surface2:#1E2026; --line:#2A2D35;
  --ink:#F3F1EC; --muted:#9A9BA6; --dim:#6C6E7A;
  --accent:#E0B05F; --accent-ink:#20160A;
  --good:#5FC18C; --bad:#E2705F; --star:#E0B05F;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --r:18px; --rs:12px;
  --pad:max(18px, env(safe-area-inset-left,0px));
}
[data-theme="paper"]{
  --bg:#F6F2EA; --surface:#FFFFFF; --surface2:#F0EBE1; --line:#E2DACB;
  --ink:#1A1A1C; --muted:#6E6A63; --dim:#9A968D;
  --accent:#A9662A; --accent-ink:#FFF8EE;
  --good:#3E8F63; --bad:#C0503D; --star:#B8822F;
  --shadow:0 14px 34px rgba(60,45,20,.13);
}
[data-theme="oled"]{
  --bg:#000000; --surface:#0B0B0D; --surface2:#131317; --line:#222228;
  --ink:#FFFFFF; --muted:#8E8E96; --dim:#5C5C66;
  --accent:#7FB6FF; --accent-ink:#04121F;
  --good:#59C08B; --bad:#E06A6A;
  --shadow:0 18px 40px rgba(0,0,0,.7);
}
[data-theme="sage"]{
  --bg:#101512; --surface:#171D19; --surface2:#1E2622; --line:#28322C;
  --ink:#EEF2EE; --muted:#93A099; --dim:#68756E;
  --accent:#8FD3A8; --accent-ink:#0B1710;
  --good:#8FD3A8; --bad:#E08A72;
  --shadow:0 18px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  direction:rtl;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select{font:inherit;color:inherit}
.hidden{display:none !important}

#app{min-height:100%;display:flex;flex-direction:column}

/* ---------- כללי ---------- */
.icon-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:transparent;transition:.18s;flex:0 0 auto;
}
.icon-btn:active{transform:scale(.93);background:var(--surface2)}
.icon-btn svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.on{background:var(--accent);border-color:var(--accent)}
.icon-btn.on svg{stroke:var(--accent-ink)}
.icon-btn.sm{width:38px;height:38px}
.icon-btn.sm svg{width:17px;height:17px}

.pill{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:11px 20px;border-radius:999px;
  border:1px solid var(--line);font-weight:600;font-size:15px;transition:.18s;
}
.pill:active{transform:scale(.96)}
.pill.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pill svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.seg button{padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:.18s}
.seg button.on{background:var(--ink);color:var(--bg)}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--pad) 6px}
.screen-title{font-size:22px;font-weight:800;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:13.5px}

/* ---------- מסך כרטיס ---------- */
#home{flex:1;display:flex;flex-direction:column}
.deckbar{display:flex;justify-content:center;padding:2px 0 0}
.deck-pill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted)}
.deck-pill b{color:var(--ink);font-weight:700}

.card-area{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:0 var(--pad);touch-action:pan-y;overflow:hidden}
.card{width:100%;max-width:560px;text-align:center;will-change:transform,opacity}
.card .word{
  font-family:"Frank Ruhl Libre","Heebo",serif;font-weight:700;line-height:1.32;
  font-size:clamp(36px,11vw,60px);letter-spacing:.01em;padding:0 4px;
}
.card .word.long{font-size:clamp(26px,7.4vw,42px)}
.card .pos{color:var(--dim);font-size:13px;margin-top:2px;letter-spacing:.04em}
.card .def{color:var(--muted);font-size:clamp(15px,4.4vw,19px);margin-top:14px;line-height:1.6}
.card .def .tag{color:var(--dim)}
.card .ex{color:var(--dim);font-size:14.5px;margin-top:12px;line-height:1.65;font-style:italic}
.reveal{margin-top:16px;min-height:66px;transition:opacity .22s}
.reveal.off{opacity:0;pointer-events:none}
.tap-hint{color:var(--dim);font-size:13px;margin-top:18px;letter-spacing:.02em}
.say{margin-top:22px;display:flex;justify-content:center}
.chips{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chip{font-size:12.5px;padding:5px 11px;border-radius:999px;background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.chip.ok{color:var(--good)} .chip.no{color:var(--bad)}

.progress-line{height:3px;background:var(--surface2);border-radius:2px;overflow:hidden;margin:0 var(--pad)}
.progress-line i{display:block;height:100%;background:var(--accent);transition:width .3s}

.actions{display:flex;justify-content:space-around;align-items:center;padding:14px var(--pad) 6px;max-width:520px;margin:0 auto;width:100%}
.bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px var(--pad) calc(14px + env(safe-area-inset-bottom,0px))}

/* ---------- רשימת תרגולים ---------- */
.wrap{padding:0 var(--pad) calc(28px + env(safe-area-inset-bottom,0px));max-width:720px;margin:0 auto;width:100%}
.sec-title{font-size:14px;color:var(--muted);font-weight:700;margin:22px 4px 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:right;transition:.18s;box-shadow:var(--shadow)}
.mode-card:active{transform:scale(.975)}
.mode-card .art{height:86px;border-radius:var(--rs);background:var(--surface2);display:grid;place-items:center;overflow:hidden}
.mode-card .art svg{width:76%;height:76%}
.mode-card .nm{font-weight:700;font-size:15.5px}
.mode-card .ds{font-size:12.5px;color:var(--muted);margin-top:-6px}
.row-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  display:flex;align-items:center;gap:14px;width:100%;text-align:right;transition:.18s}
.row-card:active{transform:scale(.985)}
.row-card .art{width:56px;height:56px;border-radius:var(--rs);background:var(--surface2);display:grid;place-items:center;flex:0 0 auto}
.row-card .art svg{width:88%;height:auto}
.row-card .nm{font-weight:700;font-size:15.5px}
.row-card .ds{font-size:12.5px;color:var(--muted)}
.row-card .cnt{margin-inline-start:auto;font-size:13px;color:var(--dim);font-weight:700}
.art svg .a{fill:var(--accent)} .art svg .b{fill:var(--line)} .art svg .c{fill:var(--surface)}
.art svg .s{stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- חידון ---------- */
.quiz{flex:1;display:flex;flex-direction:column}
.qhead{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) var(--pad) 8px}
.qhead .meter{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.qhead .meter i{display:block;height:100%;background:var(--accent);transition:width .35s}
.qhead .score{font-weight:800;font-size:15px;min-width:42px;text-align:center}
.qbody{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px var(--pad);max-width:640px;margin:0 auto;width:100%}
.qprompt{text-align:center;margin-bottom:26px}
.qkind{color:var(--dim);font-size:12.5px;letter-spacing:.05em;margin-bottom:12px}
.qword{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:clamp(30px,9vw,46px);line-height:1.35}
.qtext{font-size:clamp(17px,5vw,22px);line-height:1.65;font-weight:500}
.qtext .blank{display:inline-block;min-width:86px;border-bottom:2px dashed var(--accent);vertical-align:-3px;margin:0 4px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;text-align:right;
  font-size:15.5px;line-height:1.45;transition:.15s;position:relative}
.opt:active{transform:scale(.985)}
.opt.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.opt.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.opt .k{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:12px}
.qfoot{padding:10px var(--pad) calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;justify-content:center;min-height:74px}
.verdict{font-weight:700;font-size:15px}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)}

/* דירוג כרטיסיות */
.grade{display:flex;gap:10px;width:100%;max-width:520px}
.grade button{flex:1;padding:14px 6px;border-radius:14px;border:1.5px solid var(--line);font-weight:700;font-size:14px}
.grade .g0{color:var(--bad)} .grade .g1{color:var(--muted)} .grade .g2{color:var(--good)}
.grade small{display:block;font-weight:400;font-size:11px;color:var(--dim);margin-top:3px}

/* ---------- התאמה ---------- */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match .m{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 10px;
  font-size:14px;min-height:74px;display:grid;place-items:center;text-align:center;line-height:1.4;transition:.15s}
.match .m.sel{border-color:var(--accent)}
.match .m.done{opacity:.25;pointer-events:none}
.match .m.w{font-family:"Frank Ruhl Libre",serif;font-size:18px;font-weight:700}

/* ---------- תשבץ ---------- */
.xw-wrap{overflow:auto;padding:6px 0 2px}
.xw{display:grid;gap:2px;margin:0 auto;width:max-content;direction:rtl}
.xw .cell{width:var(--cs,34px);height:var(--cs,34px);background:transparent}
.xw .cell.on{background:var(--surface);border:1px solid var(--line);border-radius:4px;position:relative}
.xw .cell input{width:100%;height:100%;border:0;background:transparent;text-align:center;
  font-size:calc(var(--cs,34px) * .52);font-weight:700;font-family:"Frank Ruhl Libre",serif;padding:0;outline:none;direction:rtl}
.xw .cell.ok{background:color-mix(in srgb,var(--good) 22%,transparent);border-color:var(--good)}
.xw .cell .n{position:absolute;top:0;right:3px;font-size:9px;color:var(--dim);line-height:1}
.xw .cell.cur{outline:2px solid var(--accent);outline-offset:-2px}
.clue-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:12px 14px;margin-top:10px;min-height:62px}
.clue-box .lbl{font-size:12px;color:var(--dim)}
.clue-box .txt{font-size:15px;margin-top:3px;line-height:1.45}
.clue-list{margin-top:12px}
.clue-list h4{margin:12px 0 6px;font-size:13px;color:var(--muted)}
.clue-list div{font-size:13.5px;color:var(--muted);padding:4px 0;display:flex;gap:8px}
.clue-list div b{color:var(--ink);min-width:18px}
.clue-list div.solved{color:var(--good);text-decoration:line-through;opacity:.7}

/* ---------- התקדמות ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .v{font-size:28px;font-weight:800;line-height:1.1}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:4px}
.rings{display:flex;gap:14px;justify-content:space-around;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 12px}
.ring{display:flex;flex-direction:column;align-items:center;gap:8px}
.ring svg{width:78px;height:78px;transform:rotate(-90deg)}
.ring .bgc{stroke:var(--surface2)} .ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s}
.ring .pc{position:relative;display:grid;place-items:center}
.ring .pc span{position:absolute;font-size:16px;font-weight:800}
.ring .lb{font-size:12.5px;color:var(--muted)}
.heat{display:grid;grid-template-columns:repeat(17,1fr);gap:3px;direction:ltr;margin-top:6px}
.heat i{aspect-ratio:1;border-radius:2px;background:var(--surface2)}
.heat i.l1{background:color-mix(in srgb,var(--accent) 28%,var(--surface2))}
.heat i.l2{background:color-mix(in srgb,var(--accent) 55%,var(--surface2))}
.heat i.l3{background:var(--accent)}
.bar{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
.wlist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.wrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rs);padding:10px 12px}
.wrow .w{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:17px}
.wrow .d{font-size:12.5px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow .m{font-size:12px;color:var(--bad);font-weight:700}

/* ---------- גיליון תחתון ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:40;opacity:0;transition:.2s}
.sheet-bg.show{opacity:1}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:41;background:var(--surface);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line);max-height:86vh;overflow:auto;
  padding:10px var(--pad) calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.sheet.show{transform:translateY(0)}
.sheet .handle{width:42px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 14px}
.sheet h3{margin:0 0 4px;font-size:20px}
.sheet .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.sheet .row:last-child{border-bottom:0}
.sheet .row .lbl{font-size:15px}
.sheet .row .hint{font-size:12px;color:var(--muted);margin-top:2px}
.opt-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tog{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted)}
.tog.on{border-color:var(--accent);color:var(--accent)}
.theme-dots{display:flex;gap:10px}
.tdot{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.tdot.on{border-color:var(--accent)}
.tdot i{width:20px;height:20px;border-radius:50%;display:block}
input[type="date"],input[type="number"]{background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;font-size:14px;min-width:130px}

/* ---------- סיום ---------- */
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 var(--pad);text-align:center}
.done .big{font-size:58px;font-weight:800;line-height:1}
.done .ttl{font-size:20px;font-weight:700;margin-top:10px}
.done .sub2{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.6}
.done .btns{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center}

.toast{position:fixed;inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:60;pointer-events:none}
.toast span{background:var(--ink);color:var(--bg);padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;
  opacity:0;transform:translateY(8px);transition:.2s}
.toast.show span{opacity:1;transform:translateY(0)}

@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .22s ease-out}


/* ---------- ניווט תחתון ---------- */
.tabbar{
  position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);
  gap:2px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);margin-top:auto;
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom,0px));
}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;color:var(--dim);transition:.15s}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab span{font-size:11px;font-weight:600}
.tab.on{color:var(--accent)}
.tab:active{transform:scale(.92)}
.wrap{padding-bottom:18px}
#app>.wrap{flex:1}

/* ---------- לוח מחוונים ---------- */
.searchbar{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;
  background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:12px 16px;
  color:var(--muted);font-size:14.5px;text-align:right}
.searchbar svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:0 0 auto}
.searchbar:active{transform:scale(.99)}

.wod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center}
.wod-w{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:clamp(28px,8vw,38px);line-height:1.35}
.wod-d{color:var(--muted);font-size:15px;margin-top:6px;line-height:1.5}
.wod-e{color:var(--dim);font-size:13.5px;margin-top:8px;font-style:italic;line-height:1.6}
.wod-b{display:flex;gap:8px;justify-content:center;margin-top:14px}
.wod-b .pill{padding:8px 14px;font-size:13px}

.row-card .cnt svg{width:16px;height:16px;stroke:var(--dim);fill:none;stroke-width:2}

/* ---------- חיפוש ---------- */
.searchfield{display:flex;align-items:center;gap:8px;margin-top:12px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:6px 14px}
.searchfield:focus-within{border-color:var(--accent)}
.searchfield svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:0 0 auto}
.searchfield input{flex:1;min-width:0;background:none;border:0;outline:none;padding:10px 0;font-size:16px}
.searchfield input::placeholder{color:var(--dim)}
.searchfield input::-webkit-search-cancel-button,
.searchfield input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.searchfield .icon-btn{border:0}
.empty{text-align:center;color:var(--muted);padding:34px 16px}
.empty svg{width:30px;height:30px;stroke:var(--dim);fill:none;stroke-width:1.6;margin-bottom:10px}
.empty p{font-size:14px;line-height:1.65;margin:0 auto;max-width:34ch}
.sugg{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.wrow.tap{width:100%;text-align:right;cursor:pointer}
.wrow.tap:active{transform:scale(.99)}
.wrow .go{margin-inline-start:auto;flex:0 0 auto}
.wrow .go svg{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:2}
.upg{display:flex;flex-direction:column;gap:8px}
.up{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rs);padding:12px 14px}
.up.tap{cursor:pointer}
.up.tap:active{transform:scale(.99)}
.up .uw{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:19px;flex:0 0 auto;max-width:46%}
.up .ud{font-size:12.5px;color:var(--muted);line-height:1.4}
.up .ua{margin-inline-start:auto;flex:0 0 auto}
.up .ua svg{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:2}
.up .ext{font-size:10.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 7px;white-space:nowrap}

/* ---------- שכתוב משפט ---------- */
.sentbox{margin-top:12px}
.sentbox textarea{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  padding:14px;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);resize:vertical;outline:none}
.sentbox textarea:focus{border-color:var(--accent)}
.sentbox textarea::placeholder{color:var(--dim)}
.rwb{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rwcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  font-family:"Frank Ruhl Libre",serif;font-size:20px;line-height:2.1;white-space:pre-wrap}
.rwcard .sw{font:inherit;color:var(--accent);border-bottom:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:0 1px;border-radius:3px}
.rwcard .sw:active{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.rwcard .sw.off{color:var(--muted);border-bottom-style:dotted;border-bottom-color:var(--line)}
.rwsrc{margin-top:12px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--rs);
  padding:12px 14px;font-size:14.5px;line-height:1.9;color:var(--muted)}
.rwsrc mark{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--ink);border-radius:3px;padding:1px 3px}
.sheet .row.alt{width:100%;text-align:right;gap:10px}
.sheet .row.alt.on .lbl{color:var(--accent)}
.sheet .row.alt svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.2}

/* ---------- גרדום ---------- */
.gword{font-family:"Frank Ruhl Libre",serif;font-size:clamp(26px,8vw,38px);font-weight:700;
  letter-spacing:.12em;direction:rtl;margin:10px 0 6px}
.gword.ok{color:var(--good)} .gword.no{color:var(--bad)}
.lives{font-size:17px;color:var(--bad);letter-spacing:.14em}
.lives span{color:var(--line)}
.keys{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px}
.key{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 0;
  font-family:"Frank Ruhl Libre",serif;font-size:19px;font-weight:700;transition:.12s}
.key:active{transform:scale(.92)}
.key.ok{background:color-mix(in srgb,var(--good) 22%,transparent);border-color:var(--good)}
.key.no{opacity:.3}
.key:disabled{pointer-events:none}

.mark{text-align:center;margin-top:30px;font-family:"Frank Ruhl Libre",serif;font-size:15px;
  letter-spacing:.14em;color:var(--dim)}

/* ===================================================
   מסך פתיחה — האותיות נכתבות, ואז הניקוד פורח מתחתן
   =================================================== */
#splash{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:grid;place-items:center;overflow:hidden;
  -webkit-tap-highlight-color:transparent;cursor:pointer;
}
#splash.out{animation:spOut .72s cubic-bezier(.4,0,.2,1) forwards}
@keyframes spOut{to{opacity:0;transform:scale(1.035);filter:blur(7px)}}

.sp-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.sp-bg span{position:absolute;font-family:"Frank Ruhl Libre",serif;font-weight:500;
  color:var(--ink);opacity:0;white-space:nowrap;animation:spDrift 8s ease-in-out forwards}
@keyframes spDrift{
  0%{opacity:0;transform:translateY(26px)}
  24%{opacity:.055}
  72%{opacity:.035}
  100%{opacity:0;transform:translateY(-32px)}
}

.sp-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:0 24px;text-align:center}

/* ---- הלוגוטייפ ---- */
.wm{display:grid;place-items:center;padding:.18em 0 .34em}
.wm>span{
  grid-area:1/1;
  font-family:"Frank Ruhl Libre",serif;font-weight:700;
  font-size:clamp(38px,11.4vw,58px);line-height:1.5;
  letter-spacing:.012em;color:var(--ink);white-space:nowrap;
}
/* שכבה א׳: האותיות בלבד, נכתבות אחת־אחת */
.wm-plain i{
  display:inline-block;font-style:normal;
  opacity:0;transform:translateY(.42em) scale(.94);filter:blur(7px);
  animation:wmLetter 1s cubic-bezier(.16,.86,.28,1) forwards;
}
@keyframes wmLetter{to{opacity:1;transform:none;filter:blur(0)}}
/* שכבה ב׳: אותן אותיות עם ניקוד — מתחלפת בעדינות ולכן נראה שרק הניקוד נוסף */
.wm-nik{opacity:0;animation:wmFade .95s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes wmFade{to{opacity:1}}
.wm.swap .wm-plain{animation:wmFade .95s cubic-bezier(.3,.8,.3,1) reverse forwards}
/* ברק זהב שחולף פעם אחת על האותיות */
.wm-nik.shine{
  background-image:linear-gradient(100deg,var(--ink) 34%,var(--accent) 50%,var(--ink) 66%);
  background-size:320% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:wmFade .95s cubic-bezier(.3,.8,.3,1) forwards, wmShine 1.9s cubic-bezier(.4,0,.3,1);
}
@keyframes wmShine{from{background-position:120% 0}to{background-position:-60% 0}}

/* ---- תת־כותרת ---- */
.sp-sub{margin-top:6px;font-size:clamp(12.5px,3.4vw,14px);letter-spacing:.22em;
  color:var(--muted);opacity:0;transform:translateY(8px);
  animation:spFade 1.05s cubic-bezier(.2,.85,.25,1) forwards}

/* ---- קו מפריד ---- */
.sp-rule{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.8;margin-top:22px;animation:spRule 1.15s cubic-bezier(.25,.9,.3,1) forwards}
@keyframes spRule{to{width:168px}}

/* ---- סלוגן ---- */
.sp-slogan{margin-top:20px;font-size:clamp(14.5px,4vw,16.5px);line-height:1.8;color:var(--muted);max-width:24ch}
.sp-slogan i{display:block;font-style:normal;opacity:0;transform:translateY(10px);filter:blur(4px);
  animation:spFade 1.05s cubic-bezier(.2,.85,.25,1) forwards}
.sp-slogan i:nth-child(2){color:var(--accent);font-weight:600;letter-spacing:.01em}
@keyframes spFade{to{opacity:1;transform:none;filter:blur(0)}}

/* ---- ההדגמה: מילה עולה למשלב גבוה, באותו מקום ---- */
.sp-demo{margin-top:34px;display:grid;place-items:center;min-height:38px;width:100%}
.sp-demo>span{grid-area:1/1;white-space:nowrap}
.sp-demo .lo{font-size:17px;color:var(--dim);opacity:0;
  animation:demoOut 1.9s cubic-bezier(.3,.8,.3,1) forwards}
.sp-demo .hi{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:27px;color:var(--accent);
  opacity:0;animation:demoIn .95s cubic-bezier(.16,.86,.28,1) forwards}
@keyframes demoOut{
  0%{opacity:0;transform:translateY(8px);filter:blur(4px)}
  22%{opacity:1;transform:none;filter:blur(0)}
  58%{opacity:1;transform:none;filter:blur(0)}
  100%{opacity:0;transform:translateY(-17px) scale(.96);filter:blur(6px)}
}
@keyframes demoIn{
  from{opacity:0;transform:translateY(19px) scale(.97);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ---- כניסת המסך הראשי ---- */
#app.enter{animation:appIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes appIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- חתימת המותג בתחתית מסך הבית ---- */
.mark{text-align:center;margin-top:32px;font-family:"Frank Ruhl Libre",serif;
  font-size:16px;letter-spacing:.1em;color:var(--dim)}

/* ---- פתיחה קצרה: הכול מופיע יחד, בלי ההדגמה ---- */
#splash.short .wm-plain{display:none}
#splash.short .sp-demo{display:none}
#splash.short .wm-nik{animation:spFade .85s cubic-bezier(.2,.85,.25,1) forwards}
#splash.short .sp-rule{width:168px;animation:spFade .85s cubic-bezier(.2,.85,.25,1) .28s forwards;opacity:0}

@media (prefers-reduced-motion: reduce){
  #splash *{animation-duration:.01ms !important;animation-delay:0ms !important}
  .sp-bg{display:none}
}

/* ===================================================
   מסך הבית — פעולה אחת ברורה
   =================================================== */
.status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.status .greet{font-size:19px;font-weight:800;letter-spacing:-.01em}
.status button{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);font-size:12.5px;color:var(--muted);white-space:nowrap;transition:.15s}
.status button:active{transform:scale(.95)}
.status button b{color:var(--ink);font-weight:700}
.status button svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:1.9}

/* ---- כרטיס היום ---- */
.today{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px 18px;box-shadow:var(--shadow);margin-top:6px;
  position:relative;overflow:hidden}
.today::before{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%);
  pointer-events:none}
.t-kicker{font-size:11.5px;letter-spacing:.2em;color:var(--dim);margin-bottom:9px}
.t-head{font-size:clamp(20px,5.6vw,24px);font-weight:800;line-height:1.3;text-wrap:balance}
.t-head svg{width:20px;height:20px;stroke:var(--good);fill:none;stroke-width:2.4;
  vertical-align:-3px;margin-inline-end:4px}
.t-time{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:13.5px;color:var(--muted)}
.t-time svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8}
.t-sub{margin-top:8px;font-size:13.5px;color:var(--muted)}
.today .pill{margin-top:18px;padding:13px 26px;font-size:15.5px}
.today .t-go{width:100%;justify-content:center}
.t-bar{height:4px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-top:16px}
.t-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .5s}
.t-total{margin-top:8px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.today.is-done::before{background:radial-gradient(circle,color-mix(in srgb,var(--good) 13%,transparent),transparent 70%)}

.wod{margin-top:0}
.searchbar{margin-top:18px}

/* ---- המסע שלי ---- */
.journey{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;margin-top:12px}
.j-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.j-head span{font-size:13.5px;color:var(--muted);font-weight:600}
.j-head b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.j-head b i{font-style:normal;font-size:13px;color:var(--dim);font-weight:600}
.j-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--surface2);margin-top:10px}
.j-bar span{display:block;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.j-bar .m{background:var(--accent)}
.j-bar .l{background:color-mix(in srgb,var(--accent) 38%,transparent)}
.j-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.j-legend span{display:inline-flex;align-items:center;gap:5px}
.j-legend i{width:8px;height:8px;border-radius:2px;display:block}
.j-legend i.m{background:var(--accent)}
.j-legend i.l{background:color-mix(in srgb,var(--accent) 38%,transparent)}
.j-legend i.r{background:var(--surface2);border:1px solid var(--line)}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.week span{display:flex;flex-direction:column;align-items:center;gap:6px;height:52px;justify-content:flex-end}
.week i{display:block;width:100%;max-width:26px;border-radius:4px;background:var(--surface2);
  min-height:8px;transition:height .5s}
.week span.now i{background:var(--accent)}
.week span:not(.now) i{background:color-mix(in srgb,var(--accent) 42%,var(--surface2))}
.week b{font-size:10.5px;font-weight:600;color:var(--dim)}
.week span.now b{color:var(--accent)}