/* =====================================================================
   zivScanner.css — שורות המסמך, חיפוש התאמות, אישור שורה, תצוגה מפוצלת
   נטען אחרי הסגנונות שבתוך zivScanner.html ומשתמש באותם משתנים (--zs-*)
   ===================================================================== */

/* ── שורות: טבלה צפופה בדסקטופ ─────────────────────────────────────── */
.zs-lines { display: flex; flex-direction: column; gap: 6px; }

.zs-lnhead,
.zs-ln {
    display: grid;
    align-items: center;
    column-gap: 6px;
    grid-template-columns: 34px minmax(150px, 3fr) minmax(64px, 1fr) minmax(58px, .8fr) minmax(46px, .6fr) 28px;
    grid-template-areas: "n d cat q u x" ". s s s s s";
}
.zs-lnhead.inv,
.zs-ln.inv {
    grid-template-columns: 34px minmax(140px, 3fr) minmax(60px, 1fr) minmax(56px, .8fr) minmax(42px, .55fr) minmax(70px, 1fr) minmax(78px, 1.05fr) 28px;
    grid-template-areas: "n d cat q u p t x" ". s s s s s s s";
}

.zs-lnhead {
    padding: 0 10px 2px; margin-top: 4px;
    font-size: 11.5px; font-weight: 700; color: var(--zs-steel);
}
.zs-lnhead span:first-child { text-align: center; }

.zs-ln {
    position: relative;
    row-gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--zs-rule);
    border-inline-start: 3px solid var(--zs-ok);
    border-radius: 9px;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.zs-ln.bad  { border-color: #f0c27a; border-inline-start-color: var(--zs-warn); background: #fffaf0; }
.zs-ln.appr { border-inline-start-color: var(--zs-ok); background: #f6fcf8; }
.zs-ln.flash { box-shadow: 0 0 0 3px rgba(10,102,255,.35); }

.zs-ln > .zs-ln-n { grid-area: n; }
.zs-ln > .c.d     { grid-area: d; }
.zs-ln > .c.cat   { grid-area: cat; }
.zs-ln > .c.q     { grid-area: q; }
.zs-ln > .c.u     { grid-area: u; }
.zs-ln > .c.p     { grid-area: p; }
.zs-ln > .c.t     { grid-area: t; }
.zs-ln > .zs-ln-x { grid-area: x; }
.zs-ln > .zs-ln-sub { grid-area: s; }

.zs-ln .c { margin: 0; min-width: 0; display: block; }
.zs-ln .zs-in { height: 32px; padding: 0 8px; font-size: 13.5px; border-radius: 7px; }
.zs-ln .c.d .zs-in { font-weight: 600; }
.zs-ln .c.num .zs-in { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }

.zs-ln-n {
    justify-self: center;
    display: inline-flex; align-items: center; gap: 3px;
    height: 24px; padding: 0 6px; border-radius: 12px;
    font-weight: 800; font-size: 12px;
    background: var(--zs-ok-wash); color: var(--zs-ok);
}
.zs-ln-n svg { width: 11px; height: 11px; }
.zs-ln.bad .zs-ln-n { background: var(--zs-warn-wash); color: var(--zs-warn); }

.zs-ln-x {
    width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent;
    color: var(--zs-steel); display: grid; place-items: center; cursor: pointer;
}
.zs-ln-x:hover { background: var(--zs-err-wash); color: var(--zs-err); }
.zs-ln-x svg { width: 14px; height: 14px; }

.zs-ln-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.zs-ln-sub .link { flex: 1 1 240px; height: 30px; font-size: 12.5px; color: var(--zs-steel); }
.zs-ln-sub .zs-pickbtn.mash { min-height: 30px; flex: 0 1 180px; padding: 2px 8px; }
.zs-ln-sub .zs-pickbtn.mash .lbl { font-size: 12.5px; }
.zs-ln-issue { flex: 1 1 100%; font-size: 12px; color: #7a4900; }
.zs-ln.appr .zs-ln-issue { color: var(--zs-steel); text-decoration: line-through; text-decoration-color: rgba(91,102,117,.4); }

.zs-badge {
    flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: 11px;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center;
}
.zs-badge.auto   { background: var(--zs-blue-wash); color: var(--zs-blue-ink); }
.zs-badge.manual { background: var(--zs-ok-wash);   color: #146c3a; }
.zs-badge.free   { background: var(--zs-rule-2);    color: var(--zs-steel); }

/* ── כפתור צף: מאושר לקליטה ─────────────────────────────────────────── */
.zs-ln-ok {
    position: absolute; top: -11px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 10px; border-radius: 12px;
    border: 1.5px solid var(--zs-ok); background: #fff; color: var(--zs-ok);
    font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
    box-shadow: 0 2px 8px rgba(28,36,48,.12);
    transition: background .15s, color .15s;
}
.zs-ln-ok svg { width: 12px; height: 12px; }
.zs-ln-ok:hover { background: var(--zs-ok-wash); }
.zs-ln-ok.on { background: var(--zs-ok); color: #fff; }
.zs-ln-ok.on:hover { background: #17864a; }
.zs-ln-ok:focus-visible { outline: 3px solid rgba(31,157,85,.3); outline-offset: 2px; }
/* מקום לכפתור הצף מעל השורה */
.zs-ln.bad, .zs-ln.appr { margin-top: 10px; }

/* ── חיפוש התאמות ──────────────────────────────────────────────────── */
.zs-search {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 8px; padding: 12px 14px;
    border-radius: 10px; background: var(--zs-blue-wash); color: var(--zs-blue-ink);
}
.zs-search-t { display: flex; flex-direction: column; line-height: 1.35; position: relative; }
.zs-search-t b { font-size: 13.5px; }
.zs-search-t span { font-size: 12px; opacity: .8; }
.zs-search::before {          /* זכוכית מגדלת שזזה */
    content: ""; position: relative; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--zs-blue); box-sizing: border-box;
    animation: zsLens 1.1s ease-in-out infinite alternate;
}
.zs-search-bar {              /* קרן סריקה לרוחב */
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(10,102,255,.16) 45%, rgba(10,102,255,.28) 50%, rgba(10,102,255,.16) 55%, transparent 100%);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: zsSweep 1.4s linear infinite;
}
@keyframes zsSweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes zsLens  { from { transform: translateX(0) scale(1); } to { transform: translateX(-6px) scale(1.12); } }

/* ── מסמך מקורי: החלונית צפה בשטח הפנוי משמאל. במסך צר — הטופס זז ימינה רק כמה שצריך ── */
.zs-wrap, .zs-dock-in { transition: transform .3s ease; }
@media (min-width: 1200px) {
    body.zs-side .zs-wrap, body.zs-side .zs-dock-in { transform: translateX(var(--zs-shift, 0px)); }
}

/* ── טלפון: כל שורה ככרטיס קומפקטי עם תוויות קטנות ───────────────────── */
@media (max-width: 640px) {
    .zs-lnhead { display: none; }
    .zs-lines { gap: 8px; }

    .zs-ln, .zs-ln.inv {
        grid-template-columns: 30px 1fr 1fr 1fr 28px;
        row-gap: 6px;
        padding: 8px 8px 8px 6px;
    }
    .zs-ln {
        grid-template-areas:
            "n d d d x"
            ". cat q u ."
            ". s s s s";
    }
    .zs-ln.inv {
        grid-template-areas:
            "n d d d x"
            ". cat q u ."
            ". p t t ."
            ". s s s s";
    }
    /* תווית קטנה מעל כל שדה מספרי */
    .zs-ln .c:not(.d)::before {
        content: attr(data-l);
        display: block; font-size: 10.5px; font-weight: 600; color: var(--zs-steel); margin: 0 2px 1px;
    }
    .zs-ln .zs-in { height: 36px; font-size: 15px; }   /* 15px+ — iOS לא מגדיל את המסך בפוקוס */
    .zs-ln-sub .link { flex-basis: 100%; height: 36px; font-size: 13.5px; }
    .zs-ln-sub .zs-pickbtn.mash { flex: 1 1 auto; min-height: 36px; }
    .zs-ln-ok { left: 8px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .zs-search::before, .zs-search-bar { animation: none; }
}

/* ═══ מסגרת הנדסית — כותרת, משתמש מחובר וחזרה לתפריט ═══ */
.zf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.zf-title h1 { margin: 0; font-size: 20px; font-weight: 800; color: #181c32; }
.zf-title p { margin: 2px 0 0; font-size: 12.5px; color: #7e8299; }
.zf-side { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.zf-user { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e4e6ef; border-radius: 12px; padding: 5px 12px 5px 8px; min-width: 0; height: 44px; }
.zf-user[hidden] { display: none; }
.zf-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #009ef7, #7239ea); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.zf-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.zf-who b { font-size: 13px; font-weight: 700; color: #181c32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zf-who small { font-size: 11.5px; color: #7e8299; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zf-back { height: 44px; padding: 0 14px; border-radius: 12px; background: #009ef7; color: #fff !important; font-weight: 600; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; transition: background .15s; }
.zf-back:hover { background: #0095e8; }
.zf-back svg { width: 15px; height: 15px; color: #fff; }
@media (max-width: 640px) {
    .zf-bar { margin-bottom: 14px; }
    .zf-title h1 { font-size: 18px; }
    .zf-side { width: 100%; }
    .zf-user { flex: 1; }
    .zf-back { padding: 0 12px; }
}


/* ═══ שלב הסריקה אחרי קריאה — פס צר עם אפשרות להרחיב ═══ */
.zs-mini { display: none; }
#zsStep1.mini { padding-top: 12px; padding-bottom: 12px; }
#zsStep1.mini > .zs-step-h { display: none; }
#zsStep1.mini > .zs-step-body { display: none; }
#zsStep1.mini.open > .zs-step-body { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f4; }
#zsStep1.mini .zs-mini { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.zs-mini-thumbs { display: flex; align-items: center; flex: 0 0 auto; }
.zs-mini-th { width: 46px; height: 60px; border-radius: 7px; border: 2px solid #fff; background: #f4f6f9; overflow: hidden; padding: 0; cursor: zoom-in;
              box-shadow: 0 2px 8px rgba(16,24,40,.14); margin-inline-start: -14px; transition: transform .15s; display: inline-flex; align-items: center; justify-content: center; color: #7e8299; }
.zs-mini-th:first-child { margin-inline-start: 0; }
.zs-mini-th:hover { transform: translateY(-3px); z-index: 1; }
.zs-mini-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zs-mini-th svg { width: 22px; height: 22px; }
.zs-mini-more { margin-inline-start: 6px; font-size: 12px; font-weight: 700; color: #5e6278; background: #eef1f7; border-radius: 10px; padding: 2px 7px; }
.zs-mini-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.zs-mini-txt b { font-size: 14px; font-weight: 700; color: #181c32; display: inline-flex; align-items: center; gap: 6px; }
.zs-mini-txt b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #17c653; box-shadow: 0 0 0 3px #e8faf0; flex: 0 0 8px; }
.zs-mini-txt small { font-size: 12px; color: #7e8299; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-mini-act { display: flex; gap: 6px; flex: 0 0 auto; }
.zs-mini-btn { height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid #dbe3ee; background: #fff; color: #0a66ff; font: 600 12.5px Heebo, sans-serif;
               display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.zs-mini-btn:hover { background: #f3f8ff; }
.zs-mini-btn svg { width: 14px; height: 14px; transition: transform .2s; }
.zs-mini-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.zs-mini-btn.ghost { color: #5e6278; }
@media (max-width: 640px) {
    #zsStep1.mini .zs-mini { flex-wrap: wrap; gap: 10px; }
    .zs-mini-act { width: 100%; }
    .zs-mini-btn { flex: 1; justify-content: center; }
}

/* ═══ אישור כל השינויים לקליטה ═══ */
.zs-ack { display: flex !important; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
          background: #fff; border: 1.5px dashed #f0b44c; cursor: pointer; transition: all .15s; }
.zs-ack:hover { border-color: #0a66ff; }
.zs-ack.on { border-style: solid; border-color: #17c653; background: #f2fcf6; }
.zs-ack input { width: 20px; height: 20px; accent-color: #17c653; flex: 0 0 20px; margin: 0; cursor: pointer; }
.zs-ack span { display: flex; flex-direction: column; line-height: 1.3; }
.zs-ack b { font-size: 14px; font-weight: 700; color: #181c32; }
.zs-ack small { font-size: 12px; color: #7e8299; }
.zs-req { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #fff4f4; color: #a3123a; font-size: 12.5px; line-height: 1.6; }
.zs-req svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; }
.zs-req a { color: #a3123a; font-weight: 600; }

/* ═══ בורר שהטעינה שלו נכשלה ═══ */
.zs-pickbtn.err { border-color: #f1416c !important; background: #fff6f8; }
.zs-pickbtn.err .lbl { color: #d1204f !important; }

/* ═══ הכפתור הבא בתהליך — מהבהב כשאפשר להמשיך ═══ */
.zs-go.ready, .zs-dbtn.ready { position: relative; animation: zsReady 1.8s ease-in-out infinite; }
.zs-go.ready::after, .zs-dbtn.ready::after {
    content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid currentColor; opacity: 0;
    animation: zsRing 1.8s ease-out infinite; pointer-events: none;
}
.zs-go.ready { color: #fff; }
.zs-go.ready::after { border-color: #0a66ff; }
.zs-dock-res .zs-go.ready { background: #17c653; }
.zs-dock-res .zs-go.ready::after { border-color: #17c653; }
.zs-dbtn.ready::after { border-color: #0a66ff; }
@keyframes zsReady { 0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(10,102,255,.18); } 50% { transform: scale(1.035); box-shadow: 0 10px 26px rgba(10,102,255,.38); } }
@keyframes zsRing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.zs-go.ready:hover, .zs-dbtn.ready:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .zs-go.ready, .zs-dbtn.ready, .zs-go.ready::after, .zs-dbtn.ready::after { animation: none; } }

/* ═══ טקסט על רקע כהה/צבעוני — תמיד לבן ═══
   Metronic ו-ziv-color-fix צובעים label ו-a בצבע משלהם, ודורסים את color של הכפתור.
   לכן !important גם על הכפתור וגם על כל מה שבתוכו (טקסט, span, svg) */
.zs-drop .zs-drop-btn, .zs-drop .zs-drop-btn *,
.zs-go, .zs-go *,
.zs-btn.primary, .zs-btn.primary *,
.zs-step.is-done .zs-step-n,
.zs-doctab.on .n,
.zs-page-n,
.zs-ln-ok.on, .zs-ln-ok.on *,
.zf-back, .zf-back *,
.zf-av,
.zs-type input:checked + .zs-tcard .zs-sheet-check,
.zs-type input:checked + .zs-tcard .zs-sheet-check svg { color: #fff !important; }
.zs-go:disabled, .zs-go:disabled * { color: rgba(255,255,255,.92) !important; }

/* ═══ סוג המסמך נעול עד אחרי הקריאה ═══ */
.zs-types-lock { display: none; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: #7e8299; }
.zs-types-lock svg { width: 14px; height: 14px; color: #0a66ff; flex: 0 0 14px; }
#fldDocType.locked .zs-types-lock { display: flex; }
#fldDocType.locked .zs-type { cursor: not-allowed; }
#fldDocType.locked .zs-tcard { opacity: .5; filter: grayscale(.6); pointer-events: none; }
#fldDocType.locked .zs-types-err { display: none !important; }

/* ═══ סתירה מול התעודה / ההזמנה המקושרת ═══
   המסמך הסרוק קובע; כאן מוצג מה כתוב במקור */
.zs-in.diff { border-color: #b67cff !important; background: #f8f3ff !important; box-shadow: inset 0 -2px 0 #7239ea; }
.zs-in.diff.ok { border-color: #c9b3ef !important; background: #fbf9ff !important; box-shadow: none; }
.zs-ln > .zs-ln-diff { grid-column: 2 / -1; }
.zs-ln-diff {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 6px;
    padding: 8px 12px; border-radius: 8px; background: #f6f0ff; border: 1px solid #e4d5fb; font-size: 13px; color: #3f2a6b; line-height: 1.55;
}
.zs-ln-diff > svg { width: 16px; height: 16px; flex: 0 0 16px; color: #7239ea; margin-top: 2px; }
.zs-ln-diff p { margin: 0; }
.zs-ln-diff b { font-weight: 700; color: #5b21b6; }
.zs-ln-diff small { display: block; margin-top: 3px; font-size: 11.5px; color: #7e8299; }
.zs-ln-diff.ok { background: #faf8fe; border-color: #ece4f8; color: #6b5a8a; }
.zs-ln-diff.ok > svg { color: #17c653; }
.zs-ln-diff.ok small { color: #0f9d48; }
@media (max-width: 640px) {
    .zs-ln > .zs-ln-diff { grid-column: 1 / -1; }
}

/* ═══ קישור בהתאמה מלאה — תווית במקום בורר ═══ */
.zs-link-fixed { flex: 1 1 240px; min-width: 0; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
                 border-radius: 8px; background: #effaf3; border: 1px solid #c8eed6; color: #11643a; font-size: 12.5px; font-weight: 600; }
.zs-link-fixed svg { width: 13px; height: 13px; flex: 0 0 13px; color: #17c653; }
.zs-link-fixed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-link-ch { background: none; border: 0; color: #0a66ff; font: 600 12.5px Heebo, sans-serif; cursor: pointer; padding: 0 4px; }
.zs-link-ch:hover { text-decoration: underline; }
.zs-link-more { font-size: 11.5px; font-weight: 600; color: #c26a00; background: #fff4e5; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
@media (max-width: 640px) { .zs-link-fixed { flex-basis: 100%; height: 36px; font-size: 13px; } }

/* ═══ סוג המסמך זוהה בוודאות — נעול ═══ */
.zs-types-certain { display: none; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: #0f9d48; }
.zs-types-certain svg { width: 13px; height: 13px; flex: 0 0 13px; }
#fldDocType.certain .zs-types-certain { display: flex; }
#fldDocType.certain .zs-type { cursor: not-allowed; }
#fldDocType.certain .zs-type input:not(:checked) + .zs-tcard { opacity: .45; filter: grayscale(.7); pointer-events: none; }
#fldDocType.certain .zs-type input:checked + .zs-tcard { pointer-events: none; }

/* ═══ חיווי קליטה להנדסית ═══ */
.zs-sfx { position: fixed; inset: 0; z-index: 100640; display: flex; align-items: center; justify-content: center; padding: 16px;
          background: rgba(13,25,51,.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: zsSfxIn .2s ease; font-family: Heebo, sans-serif; }
.zs-sfx.out { animation: zsSfxOut .38s ease forwards; }
.zs-sfx-box { width: 100%; max-width: 340px; background: #fff; border-radius: 18px; padding: 22px 22px 18px; text-align: center; direction: rtl;
              box-shadow: 0 24px 60px rgba(7,20,55,.28); animation: zsSfxPop .3s cubic-bezier(.2,.9,.3,1.2); }
.zs-sfx-anim { position: relative; height: 96px; margin-bottom: 10px; }
/* מסמך שיורד לתוך המערכת */
.zs-sfx-doc { position: absolute; left: 50%; top: 0; width: 44px; height: 54px; margin-left: -22px; background: #fff; border: 2px solid #0a66ff; border-radius: 6px;
              display: flex; flex-direction: column; gap: 5px; padding: 9px 7px; box-shadow: 0 6px 16px rgba(10,102,255,.25); animation: zsSfxDrop 1.3s cubic-bezier(.5,0,.4,1) infinite; z-index: 2; }
.zs-sfx-doc i { display: block; height: 3px; border-radius: 2px; background: #cfe0ff; }
.zs-sfx-doc i:nth-child(1) { width: 70%; background: #0a66ff; }
.zs-sfx-doc i:nth-child(4) { width: 55%; }
/* "מסד נתונים" — שלוש טבעות */
.zs-sfx-db { position: absolute; left: 50%; bottom: 2px; width: 84px; margin-left: -42px; display: flex; flex-direction: column; gap: 3px; z-index: 1; }
.zs-sfx-db span { height: 12px; border-radius: 50%; background: linear-gradient(90deg, #e8f0ff, #cfe0ff); border: 2px solid #9fc0ff; animation: zsSfxGlow 1.3s ease-in-out infinite; }
.zs-sfx-db span:nth-child(2) { animation-delay: .15s; }
.zs-sfx-db span:nth-child(3) { animation-delay: .3s; }
.zs-sfx-ok { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #17c653; color: #fff;
             display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px #e8faf0; opacity: 0; transform: scale(.5); transition: all .35s cubic-bezier(.2,.9,.3,1.3); z-index: 3; }
.zs-sfx-ok svg { width: 30px; height: 30px; }
.zs-sfx.done .zs-sfx-ok { opacity: 1; transform: none; }
.zs-sfx.done .zs-sfx-doc, .zs-sfx.done .zs-sfx-db { opacity: 0; transition: opacity .2s; animation: none; }
.zs-sfx.err .zs-sfx-ok { opacity: 1; transform: none; background: #f1416c; box-shadow: 0 0 0 10px #fdeef1; }
.zs-sfx.err .zs-sfx-ok svg { display: none; }
.zs-sfx.err .zs-sfx-ok::after { content: "!"; font: 800 30px Heebo, sans-serif; }
.zs-sfx.err .zs-sfx-doc, .zs-sfx.err .zs-sfx-db { opacity: 0; animation: none; }
.zs-sfx-t { display: block; font-size: 16px; font-weight: 800; color: #181c32; }
.zs-sfx-s { font-size: 13px; color: #5e6278; margin-top: 4px; min-height: 20px; }
.zs-sfx.err .zs-sfx-s { color: #b42318; }
.zs-sfx-bar { height: 4px; border-radius: 4px; background: #eef1f7; overflow: hidden; margin-top: 14px; }
.zs-sfx-bar span { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #0a66ff, #7239ea); animation: zsSfxBar 1.1s ease-in-out infinite; }
.zs-sfx.done .zs-sfx-bar span { width: 100%; animation: none; background: #17c653; transition: width .3s; }
.zs-sfx.err .zs-sfx-bar { display: none; }
.zs-sfx-f { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.zs-sfx-f:empty { display: none; }
.zs-sfx-btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #e4e6ef; background: #fff; color: #5e6278; font: 600 13px Heebo, sans-serif; cursor: pointer; }
.zs-sfx-btn.p { background: #0a66ff; border-color: #0a66ff; color: #fff !important; }
@keyframes zsSfxDrop { 0% { transform: translateY(-6px) scale(1); opacity: 0; } 15% { opacity: 1; } 65% { transform: translateY(26px) scale(.86); opacity: 1; } 100% { transform: translateY(40px) scale(.6); opacity: 0; } }
@keyframes zsSfxGlow { 0%, 100% { border-color: #9fc0ff; } 50% { border-color: #0a66ff; box-shadow: 0 0 10px rgba(10,102,255,.35); } }
@keyframes zsSfxBar { 0% { transform: translateX(160%); } 100% { transform: translateX(-260%); } }
@keyframes zsSfxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zsSfxOut { to { opacity: 0; visibility: hidden; } }
@keyframes zsSfxPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zs-sfx-doc, .zs-sfx-db span, .zs-sfx-bar span { animation: none; } }

/* ═══ זמן משוער + משחק בזמן ההמתנה ═══ */
.zs-eta { margin-top: 10px; }
.zs-eta-bar { height: 6px; border-radius: 6px; background: #eef1f7; overflow: hidden; }
.zs-eta-bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #0a66ff, #7239ea); transition: width .5s linear; }
.zs-eta small { display: block; margin-top: 6px; font-size: 12px; color: #5e6278; }
.zs-play { margin-top: 12px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1.5px dashed #9fc0ff; background: #f3f8ff; color: #0a66ff;
           font: 700 13px Heebo, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.zs-play[hidden] { display: none; }
.zs-play svg { width: 15px; height: 15px; }
.zs-play:hover { background: #e6f0ff; }
.zs-busy.playing .zs-busy-card { width: min(360px, 100%); padding: 16px 16px 14px; }
.zs-busy.playing .zs-scan { display: none; }
.zs-busy.playing h3 { font-size: 14px; }
.zs-busy.playing p { display: none; }
.zs-busy.playing .zs-timer { font-size: 16px; margin-top: 2px; }
.zs-games[hidden] { display: none; }
.zs-ready { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px;
            background: #e8faf0; border: 1px solid #b8ecd0; color: #0f7a3e; font-size: 13.5px; animation: zsReadyIn .3s ease; }
.zs-ready[hidden] { display: none; }
.zs-ready-btn { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #17c653; color: #fff !important; font: 700 13px Heebo, sans-serif; cursor: pointer; }
@keyframes zsReadyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.zg { margin-top: 10px; text-align: center; }
.zg-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; }
.zg-tabs button { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid #dbe3ee; background: #fff; color: #5e6278; font: 600 12px Heebo, sans-serif; cursor: pointer; }
.zg-tabs button.on { background: #0a66ff; border-color: #0a66ff; color: #fff !important; }
.zg-stage { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1; }
.zg-stage canvas { width: 100%; height: 100%; display: block; border-radius: 10px; image-rendering: pixelated; touch-action: none; }
.zg-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 10px;
           background: rgba(13,25,51,.78); color: #fff; font-family: Heebo, sans-serif; }
.zg-over[hidden] { display: none; }
.zg-over b { font-size: 17px; }
.zg-over span { font-size: 13px; color: #c7d6f5; }
.zg-over button { margin-top: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #0a66ff; color: #fff !important; font: 700 13px Heebo, sans-serif; cursor: pointer; }
.zg-hud { display: flex; justify-content: space-between; max-width: 300px; margin: 6px auto 0; font-size: 12px; font-weight: 700; color: #181c32; }
.zg-hud .zg-best { color: #7e8299; }
.zg-help { font-size: 11px; color: #7e8299; margin-top: 4px; }
.zg-pad { display: none; grid-template-columns: repeat(3, 44px); grid-template-areas: ". u ." "l f r" ". d ."; gap: 4px; justify-content: center; margin-top: 8px; }
.zg-pad button { height: 40px; border-radius: 10px; border: 0; background: #eef3ff; color: #0a66ff; font-size: 15px; cursor: pointer; touch-action: none; user-select: none; }
.zg-pad [data-k="ArrowUp"] { grid-area: u; } .zg-pad [data-k="ArrowLeft"] { grid-area: l; } .zg-pad [data-k="ArrowRight"] { grid-area: r; }
.zg-pad [data-k="ArrowDown"] { grid-area: d; } .zg-pad .fire { grid-area: f; background: #0a66ff; color: #fff !important; }
.zg-pad:not(.shoot) .fire { visibility: hidden; }
.zg-pad.shoot [data-k="ArrowUp"], .zg-pad.shoot [data-k="ArrowDown"] { visibility: hidden; }
@media (pointer: coarse) { .zg-pad { display: grid; } }

/* ═══ X להסרת מסמך בלשונית ═══ */
.zs-doctab .x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-start: 4px; border-radius: 50%;
                color: #a1a5b7; cursor: pointer; flex: 0 0 20px; transition: background .15s, color .15s; }
.zs-doctab .x svg { width: 11px; height: 11px; }
.zs-doctab .x:hover, .zs-doctab .x:focus-visible { background: #fdeef1; color: #f1416c; outline: none; }
.zs-doctab.on .x { color: inherit; opacity: .7; }
.zs-doctab.on .x:hover { opacity: 1; background: rgba(241,65,108,.12); color: #f1416c; }

/* ═══ חלונית קריאה עם משחק — גדולה יותר, X לסגירת המשחק ═══ */
.zs-busy-card { position: relative; }
.zs-game-x { display: none; position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0;
             background: #f1f3f8; color: #5e6278; cursor: pointer; align-items: center; justify-content: center; z-index: 2; }
.zs-game-x svg { width: 14px; height: 14px; }
.zs-game-x:hover { background: #e4e8f1; color: #181c32; }
.zs-busy.playing .zs-game-x { display: inline-flex; }
.zs-busy.playing .zs-busy-card { width: min(460px, 100%); padding: 18px 20px 16px; }
.zs-busy.playing .zg-stage { max-width: 340px; }
.zs-busy.playing .zg-hud { max-width: 340px; }
.zs-busy.playing h3::after { content: " · ברקע"; font-weight: 600; color: #7e8299; }
.zs-busy.finished h3::after { content: ""; }
.zs-busy.finished .zs-eta { display: none; }
.zs-ready span { display: flex; flex-direction: column; text-align: right; line-height: 1.3; }
.zs-ready small { font-size: 11.5px; color: #3a7a55; }
.zg-over .zg-keys { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 6px; }
.zg-over .zg-keys span { display: flex; gap: 3px; }
.zg-over .zg-keys i { width: 26px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
                      font-style: normal; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; animation: zgKey 1.6s ease-in-out infinite; }
.zg-over .zg-keys span i:nth-child(1) { animation-delay: .4s; } .zg-over .zg-keys span i:nth-child(2) { animation-delay: .8s; } .zg-over .zg-keys span i:nth-child(3) { animation-delay: 1.2s; }
@keyframes zgKey { 0%, 70%, 100% { background: rgba(255,255,255,.14); } 35% { background: #0a66ff; border-color: #0a66ff; } }
@media (max-width: 640px) { .zs-busy.playing .zs-busy-card { padding: 14px 12px 12px; } .zs-busy.playing .zs-scan { display: none; } }

/* ═══ ריבוי מסמכים — פס פעולות גורפות מעל הלשוניות ═══ */
.zs-doctabs-wrap { margin-bottom: 12px; }
.zs-doctabs-wrap .zs-doctabs { margin-bottom: 0; }
.zs-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 8px;
           background: linear-gradient(90deg, #f1f6ff, #f7f3ff); border: 1px solid #dfe8fb; border-radius: 12px; }
.zs-bulk-t { flex: 1 1 auto; font-size: 13px; color: #3f4254; }
.zs-bulk-t b { font-weight: 800; color: #181c32; }
.zs-bulk-t em { font-style: normal; color: #b54708; font-weight: 700; }
.zs-bulk-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid #c9d6f0;
               background: #fff; color: #0a66ff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.zs-bulk-btn svg { width: 15px; height: 15px; }
.zs-bulk-btn:hover { background: #eef4ff; }
.zs-bulk-btn.p { background: #17c653; border-color: #17c653; color: #fff !important; }
.zs-bulk-btn.p svg { color: #fff !important; }
.zs-bulk-btn.p:hover { background: #13ae49; }
.zs-doctab .st.miss { width: 7px; height: 7px; border-radius: 50%; background: #f6a609; display: inline-block; margin-inline-start: 4px; padding: 0; }
@media (max-width: 640px) { .zs-bulk-btn { flex: 1 1 100%; justify-content: center; } }

/* רשימות בחלוניות */
.zs-bl { max-height: 300px; overflow: auto; text-align: right; border: 1px solid #eef1f4; border-radius: 10px; padding: 4px 0; margin-bottom: 10px; }
.zs-bl-row { padding: 6px 12px; font-size: 13.5px; border-bottom: 1px solid #f5f6f8; }
.zs-bl-row:last-child { border-bottom: 0; }
.zs-bl-row b { color: #7e8299; font-weight: 700; }
.zs-bl-row span { color: #7e8299; font-size: 12px; }
.zs-bl-row.ok::before { content: "✓ "; color: #17c653; font-weight: 800; }
.zs-bl-row.bad { background: #fff8f6; }
.zs-bl-row.bad::before { content: "! "; color: #f1416c; font-weight: 800; }
.zs-bl-row .why { font-size: 12px; color: #b42318; margin-top: 2px; padding-inline-start: 16px; }
.zs-bl-note { text-align: right; font-size: 13px; color: #5b6675; line-height: 1.7; }
.zs-sfx.bulk .zs-sfx-bar span { animation: none; transition: width .4s ease; }

/* ═══ הכוונה לפעולה — הדגשה מהבהבת + בועה ═══ */
.zs-guide { position: relative; z-index: 3; border-radius: 10px; animation: zsGuide 1.1s ease-out 4; outline: 2px solid #0a66ff !important; outline-offset: 3px; }
@keyframes zsGuide { 0% { box-shadow: 0 0 0 0 rgba(10,102,255,.55); } 100% { box-shadow: 0 0 0 14px rgba(10,102,255,0); } }
.zs-guide-tip { position: fixed; z-index: 2000; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px;
                background: #0a66ff; color: #fff !important; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none;
                box-shadow: 0 8px 22px rgba(10,102,255,.35); animation: zsTipIn .25s ease-out, zsTipBob 1.2s ease-in-out .25s infinite; }
.zs-guide-tip svg { width: 14px; height: 14px; color: #fff !important; }
.zs-guide-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #0a66ff; }
.zs-guide-tip.below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid #0a66ff; }
.zs-guide-tip.below svg { transform: rotate(180deg); }
@keyframes zsTipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes zsTipBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .zs-guide, .zs-guide-tip { animation: none; } }

/* ═══ צפייה במסמך — מקסימום שטח למסמך, פס עליון זעיר, זום לנקודה ═══ */
#zsLb { border-radius: 10px; min-width: 320px; }
#zsLb .zs-lb-bar { padding: 4px 6px; gap: 6px; font-size: 12px; font-weight: 600; min-height: 0; }
#zsLb .zs-lb-b { width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
#zsLb .zs-lb-b svg { width: 12px; height: 12px; }
#zsLb .zs-lb-nav { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
#zsLb .zs-lb-page { margin: 0 2px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; color: var(--zs-steel); }
#zsLb.one .zs-lb-nav { display: none; }
#zsLb .zs-lb-hint { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 500; color: #9aa3ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
#zsLb .zs-lb-zv { border: 0; background: transparent; font: 600 11.5px Heebo, sans-serif; color: var(--zs-steel); padding: 0 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
#zsLb .zs-lb-zv:hover { color: var(--zs-blue-ink); text-decoration: underline; }
#zsLb .zs-lb-stage { display: block; padding: 0; direction: ltr; background: #d9dee4; cursor: zoom-in; touch-action: none; }
#zsLb.zoomed .zs-lb-stage { cursor: grab; }
#zsLb .zs-lb-stage.panning { cursor: grabbing; }
#zsLb .zs-lb-doc { display: block; max-width: none; max-height: none; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); user-select: none; -webkit-user-drag: none; }
#zsLb .zs-lb-wait { padding: 40px; text-align: center; color: var(--zs-steel); font-size: 13px; }
#zsLb .zs-lb-pdf { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { #zsLb .zs-lb-hint { display: none; } #zsLb .zs-lb-b { width: 32px; height: 32px; } }

/* ═══ שורות: הערות הפריט באותה צורה כמו ההתאמה, שדה סותר באדמדם ═══ */
.zs-ln > .zs-ln-msgs { grid-column: 2 / -1; }
.zs-ln-msgs { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.zs-ln-msg { display: flex; align-items: flex-start; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
             background: #f5f8fc; border: 1px solid #e3e9f1; color: #3f4254; }
.zs-ln-msg > svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; color: #7e8299; }
.zs-ln-msg b { font-weight: 700; color: #181c32; }
.zs-ln-msg.w { background: #fff4f2; border-color: #f8d3cd; color: #7a271a; }
.zs-ln-msg.w > svg { color: #e5482d; }
.zs-ln-msg.w b { color: #b42318; }
.zs-ln-msgs small { font-size: 11.5px; color: #7e8299; padding-inline-start: 4px; }
.zs-ln-msgs.ok .zs-ln-msg.w { background: #f7f8fa; border-color: #e8ebef; color: #5e6278; }
.zs-ln-msgs.ok .zs-ln-msg.w > svg { color: #17c653; }
.zs-ln-msgs.ok .zs-ln-msg.w b { color: #3f4254; }
.zs-in.diff { border-color: #f1a196 !important; background: #fff1ef !important; box-shadow: inset 0 -2px 0 #e5482d; }
.zs-in.diff.ok { border-color: #e9d5d1 !important; background: #fdf8f7 !important; box-shadow: none; }
@media (max-width: 640px) { .zs-ln > .zs-ln-msgs { grid-column: 1 / -1; } }

/* ═══ שורה עם שגיאה — מסגרת אדומה אחידה ═══ */
.zs-ln.bad { border-color: #f1a196; border-inline-start-color: #e5482d; background: #fff8f7; }
.zs-ln.bad .zs-ln-n { background: #ffe4df; color: #c4320a; }

/* ═══ פס תחתון ברוחב הטופס ═══ */
.zs-dock-in { max-width: 848px; }

/* ═══ צפייה: הזזה ושינוי גודל ═══ */
#zsLb { resize: none; }
#zsLb .zs-lb-bar { cursor: grab; }
#zsLb .zs-lb-grip { width: 10px; height: 16px; flex: 0 0 10px; opacity: .45;
                    background: radial-gradient(circle, #5e6278 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
#zsLb .zs-lb-rs { position: absolute; z-index: 3; touch-action: none; }
#zsLb .zs-lb-rs.e { top: 0; bottom: 14px; right: -3px; width: 8px; cursor: ew-resize; }
#zsLb .zs-lb-rs.s { left: 0; right: 14px; bottom: -3px; height: 8px; cursor: ns-resize; }
#zsLb .zs-lb-rs.es { right: -2px; bottom: -2px; width: 16px; height: 16px; cursor: nwse-resize;
                     background: linear-gradient(135deg, transparent 50%, #b5bcc6 50%, #b5bcc6 58%, transparent 58%, transparent 70%, #b5bcc6 70%, #b5bcc6 78%, transparent 78%); }
#zsLb .zs-lb-rs.e:hover, #zsLb .zs-lb-rs.s:hover { background: rgba(10,102,255,.25); }
@media (max-width: 640px) { #zsLb .zs-lb-rs { display: none; } }