/* בנק התמונות: המראה של הדמיה V1 שאושרה (07.11.2026), כמו מרכז הדיוור ותנ"ך ההפקה.
   נייר אפור, פס אייקונים לבן, לוח כהה עם נקודות ופס סגול, חלונות לבנים עם מסגרת שחורה וצל קשיח */
:root{
  --paper:#D3D4D9;--board:#2E2E34;--surf:#3A3A42;--black:#111;--white:#fff;
  --ink:#fff;--soft:#D9D9DF;--dim:#A6A6B0;--grey:#3F3F45;--line:#E2E2E6;--well:#F1F1F4;
  --purple:#7B2CD9;--pink:#FF2D7A;--yellow:#FFF35C;--teal:#3FE3D0;--green:#35C46A;--red:#FF5A5A;
  --display:"Secular One","Rubik",sans-serif;--body:"Rubik","Segoe UI",Arial,sans-serif;
  --sk:-6px 6px 0 #111;--skm:-4px 4px 0 #111;--sks:-3px 3px 0 #111;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--black);font:15px/1.5 var(--body);direction:rtl;
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-block:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
[hidden]{display:none!important}

.app{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;min-height:100%}
.rail{background:#fff;border:3px solid var(--black);border-radius:14px;box-shadow:var(--sk);padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:10px;align-self:start;position:sticky;top:14px}
.rail .mk{inline-size:44px;block-size:44px;border-radius:12px;background:var(--pink);border:3px solid var(--black);box-shadow:var(--sks);display:grid;place-items:center;margin-block-end:8px}
.rb{inline-size:48px;block-size:48px;border-radius:12px;border:3px solid var(--black);background:#fff;box-shadow:var(--sks);display:grid;place-items:center;color:var(--black);text-decoration:none}
.rb.on{background:var(--purple);color:#fff}
.rb svg,.mk svg,.btn svg{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail small{font-size:11px;color:var(--grey);margin-block-start:-6px}
.rail .sp{flex:1}
.av{inline-size:38px;block-size:38px;border-radius:50%;background:#fff;border:2px solid var(--black);box-shadow:-2px 2px 0 #111;display:grid;place-items:center;font-weight:700}

.work{background-color:var(--board);background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.4px);background-size:16px 16px;
  border:3px solid var(--black);border-top:9px solid var(--purple);border-radius:14px;box-shadow:var(--sk);color:var(--ink);min-width:0;display:flex;flex-direction:column}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 22px}
.top h1{margin:0;font:400 26px/1.1 var(--display)}
.top .cnt{color:var(--dim);font-size:14px;font-variant-numeric:tabular-nums}
.top .grow{flex:1}
.srch{background:#fff;color:var(--grey);border:3px solid var(--black);border-radius:12px;box-shadow:var(--skm);padding:7px 12px;inline-size:min(320px,100%)}
.btn{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--black);border-radius:12px;box-shadow:var(--skm);padding:7px 14px;font-weight:700;background:#fff;color:var(--black);text-decoration:none;white-space:nowrap}
.btn.pri{background:var(--purple);color:#fff}
.btn.sm{padding:3px 10px;font-size:13px;box-shadow:var(--sks);border-width:2px;border-radius:9px}
.btn.warn{background:var(--red);color:#111}
.btn:disabled{opacity:.5;cursor:default}
/* כפתור ראשי משמאל (אייל): בשורת כפתורים הראשון בקוד הוא השמאלי */
.btns{display:flex;gap:10px;flex-wrap:wrap;flex-direction:row-reverse;justify-content:flex-end}

.view{display:grid;padding:0 22px 22px;gap:16px;min-width:0;flex:1;align-content:start}
.v-grid{grid-template-columns:230px minmax(0,1fr)}
.win{background:#fff;color:var(--black);border:3px solid var(--black);border-radius:12px;box-shadow:var(--sk);min-width:0;align-self:start}
.win>h2{margin:0;font:400 17px/1.2 var(--display);padding:10px 14px;border-block-end:3px solid var(--black);background:var(--well);border-radius:9px 9px 0 0;display:flex;gap:10px;align-items:center;justify-content:space-between}
.pad{padding:14px}
.groups{list-style:none;margin:0;padding:8px}
.groups button{inline-size:100%;display:flex;justify-content:space-between;gap:8px;background:none;border:0;border-radius:8px;padding:7px 10px;text-align:start}
.groups button.on{background:var(--purple);color:#fff}
.groups .n{color:var(--grey);font-variant-numeric:tabular-nums}
.groups button.on .n{color:#E9DDFB}
.groups .sec{font:400 13px/1 var(--display);color:var(--grey);padding:12px 10px 4px;letter-spacing:.02em}
.filt{padding:4px 14px 14px;display:grid;gap:10px;border-block-start:2px solid var(--line)}
.filt label,.form label{font-size:13px;color:var(--grey);display:grid;gap:4px}
select,.form input,.form textarea{border:2px solid var(--black);border-radius:8px;padding:5px 8px;background:#fff;color:var(--black);min-width:0}
.form textarea{min-block-size:72px;resize:vertical}

.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-block-end:12px}
.chip{border:2px solid var(--black);border-radius:999px;padding:2px 10px;font-size:13px;background:#fff;color:var(--black)}
.chip.on{background:var(--yellow)}
button.chip{cursor:pointer}
.chips .grow{flex:1}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.tile{background:none;border:0;padding:0;text-align:start;color:var(--black);display:grid;gap:6px;align-content:start}
.ph{position:relative;aspect-ratio:var(--r,1);max-width:100%;inline-size:100%;border:3px solid var(--black);border-radius:10px;box-shadow:var(--sks);overflow:hidden;display:grid;place-items:center;background:#E9E9EE}
.ph img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.ph.cut img{object-fit:contain}
.ph .none{color:var(--grey);font-size:12px;padding:8px;text-align:center}
.ph .st{position:absolute;inset-block-start:6px;inset-inline-start:6px;inline-size:12px;block-size:12px;border-radius:50%;border:2px solid var(--black)}
.ph .rt{position:absolute;inset-block-end:6px;inset-inline-end:6px;background:rgba(17,17,17,.75);color:#fff;font-size:11px;border-radius:6px;padding:0 6px;font-variant-numeric:tabular-nums}
.tile.sel .ph{outline:5px solid var(--pink);outline-offset:2px}
.tile b{font-weight:500;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.tile span{font-size:12px;color:var(--grey)}
.ok{background:var(--green)} .cand{background:var(--yellow)} .no{background:var(--red)}
.chk{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.empty{color:var(--grey);padding:24px 6px;display:grid;gap:10px;justify-items:start}

.v-image{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.back{color:var(--soft);background:none;border:0;padding:0;font-weight:500;grid-column:1/-1;justify-self:start}
.big{padding:16px;display:grid;gap:14px}
.big .ph{max-block-size:64vh;justify-self:center;inline-size:auto;max-inline-size:100%;block-size:64vh}
.big .ph img{object-fit:contain}
.vers{display:flex;gap:10px;flex-wrap:wrap}
.vers .chip.on{background:var(--purple);color:#fff}
.info{padding:12px 16px 16px;display:grid;gap:12px}
.info dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:0}
.info dt{color:var(--grey)}
.info dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:6px}
.pill i{inline-size:10px;block-size:10px;border-radius:50%;border:2px solid var(--black)}
.uses{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.uses li{border:2px solid var(--black);border-radius:10px;padding:8px 10px;display:flex;gap:10px;align-items:start;justify-content:space-between}
.uses li div{display:grid;gap:2px;min-width:0}
.uses li span,.muted{font-size:13px;color:var(--grey);overflow-wrap:anywhere}
.uses a{color:var(--purple)}
.prompt{background:var(--well);border:2px dashed var(--grey);border-radius:10px;padding:8px 10px;font-size:13px;color:var(--grey);white-space:pre-wrap}
.info h3{font:400 16px/1 var(--display);margin:4px 0 0}
.status{display:flex;gap:8px;flex-wrap:wrap}
.status button{border:2px solid var(--black);border-radius:999px;padding:3px 12px;background:#fff;display:inline-flex;gap:6px;align-items:center}
.status button.on{background:var(--black);color:#fff}
.status i{inline-size:10px;block-size:10px;border-radius:50%;border:2px solid currentColor}
.form{display:grid;gap:10px}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.fits{display:flex;gap:6px;flex-wrap:wrap}
.fits label{display:inline-flex;gap:4px;align-items:center;border:2px solid var(--black);border-radius:999px;padding:2px 10px;color:var(--black);font-size:13px;cursor:pointer}
.fits input{margin:0}
.log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--grey)}

.v-pick{grid-template-columns:minmax(0,1fr)}
.board{background:#E9E9EE;border:3px solid var(--black);border-radius:12px;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.pk{position:relative;background:none;border:0;padding:0}
/* בכרטיס כל התמונות על רקע אחיד, גם הגזורות (לא משבצות) */
.board .ph,.board .ph.chk{background:#fff;background-image:none}
.pk .num{position:absolute;inset-block-start:-10px;inset-inline-start:-10px;inline-size:34px;block-size:34px;border-radius:50%;background:#fff;border:3px solid var(--black);font:400 18px/28px var(--display);text-align:center;box-shadow:var(--sks);z-index:1}
.pk.sel .ph{outline:5px solid var(--pink);outline-offset:2px}
.pk.sel .num{background:var(--pink);color:#fff}
.answer{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.answer input{inline-size:90px;border:3px solid var(--black);border-radius:10px;padding:6px 10px;box-shadow:var(--sks)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cards a{display:flex;justify-content:space-between;gap:10px;border:2px solid var(--black);border-radius:10px;padding:8px 12px;color:var(--black);text-decoration:none}

.v-settings{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
table{border-collapse:collapse;inline-size:100%;font-size:13px}
th,td{text-align:start;padding:6px 8px;border-block-end:1px solid var(--line);vertical-align:top}
th{color:var(--grey);font-weight:500}
.tbl{overflow-x:auto}
.newkey{background:var(--yellow);border:2px solid var(--black);border-radius:10px;padding:10px;display:grid;gap:6px}
.newkey code{direction:ltr;text-align:left;overflow-wrap:anywhere;font-size:13px}

.dlg{position:fixed;inset:0;background:rgba(17,17,17,.55);display:grid;place-items:center;padding:16px;z-index:20}
.dlg .win{inline-size:min(620px,100%);max-block-size:calc(100vh - 32px);overflow:auto}
.drop{border:3px dashed var(--black);border-radius:12px;padding:18px;text-align:center;background:var(--well);display:grid;gap:8px;justify-items:center}
.drop.over{background:var(--yellow)}
.files{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.files li{display:flex;justify-content:space-between;gap:10px}

.login{min-block-size:calc(100vh - 28px);display:grid;place-items:center}
.login .win{inline-size:min(420px,100%)}
.login .pad{display:grid;gap:14px;justify-items:center;text-align:center}
.gbtn svg{inline-size:20px;block-size:20px}

.toast{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-start:50%;transform:translateX(50%);background:var(--black);color:#fff;border-radius:10px;padding:8px 16px;z-index:30;box-shadow:-3px 3px 0 var(--purple)}
.flag{background:var(--yellow);color:var(--black);border:2px solid var(--black);border-radius:8px;padding:2px 10px;font-weight:700;font-size:13px}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{flex-direction:row;justify-content:center;flex-wrap:wrap;padding:8px;position:static}
  .rail .mk{margin:0}
  .rail small,.rail .sp{display:none}
  .v-grid,.v-image{grid-template-columns:minmax(0,1fr)}
  .groups{display:flex;gap:6px;overflow-x:auto}
  .groups li{flex:none}
  .groups .sec{display:none}
  .filt{display:none}
  .top,.view{padding-inline:14px}
  .big .ph{block-size:auto;inline-size:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}