/* ui/styles.css - הדשבורד החדש (PHASE1-SPEC §2.1, §6.1): RTL, tokens מהסימולציה, 3 עמודות, מובייל (dashboard.html 511-538), dark mode.
   בלי CDN: Rubik/Heebo/Assistant אם מותקנים במערכת, אחרת system-ui / Segoe UI / Arial Hebrew. */
:root{
  --display:'Rubik','Heebo','Assistant',system-ui,"Segoe UI","Arial Hebrew",Arial,sans-serif;
  --bg:#f3f5f9; --surface:#ffffff; --surface-2:#eaeef5; --sunk:#e6ebf3; --border:#dde3ed; --border-2:#c3cbda;
  --ink:#131824; --muted:#545e73; --faint:#8790a3;
  --accent:#3a53a8; --accent-2:#6b46b8; --accent-soft:#e6eaf8; --on-accent:#ffffff;
  --grad:linear-gradient(135deg,#6b46b8,#3a53a8);
  --st-wait:#8f6512; --st-wait-s:#fbf1dc;
  --st-rev:#a83f36; --st-rev-s:#fbeae7;
  --st-ok:#23795a; --st-ok-s:#e2f0ea;
  --st-cli:#2f66b5; --st-cli-s:#e7edf9;
  --st-tal:#6b46b8; --st-tal-s:#eee9f9;
  --s1:#2f66b5; --s2:#6b46b8; --s3:#23795a;
  --shadow:0 1px 2px rgba(19,24,36,.05),0 4px 14px rgba(19,24,36,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1420; --surface:#161d2c; --surface-2:#1d2536; --sunk:#111826; --border:#28324a; --border-2:#3a4664;
    --ink:#eef1f7; --muted:#a9b3c8; --faint:#7d879c;
    --accent:#8fa3ff; --accent-2:#b39cff; --accent-soft:#232b48; --on-accent:#0e1420;
    --grad:linear-gradient(135deg,#7d63d6,#4f68c9);
    --st-wait:#e0b45a; --st-wait-s:#33290f; --st-rev:#ef8a7f; --st-rev-s:#3a1f1c; --st-ok:#6fcf9f; --st-ok-s:#15302a;
    --st-cli:#7fa7ee; --st-cli-s:#1a2740; --st-tal:#b39cff; --st-tal-s:#272040;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1420; --surface:#161d2c; --surface-2:#1d2536; --sunk:#111826; --border:#28324a; --border-2:#3a4664;
  --ink:#eef1f7; --muted:#a9b3c8; --faint:#7d879c;
  --accent:#8fa3ff; --accent-2:#b39cff; --accent-soft:#232b48; --on-accent:#0e1420;
  --grad:linear-gradient(135deg,#7d63d6,#4f68c9);
  --st-wait:#e0b45a; --st-wait-s:#33290f; --st-rev:#ef8a7f; --st-rev-s:#3a1f1c; --st-ok:#6fcf9f; --st-ok-s:#15302a;
  --st-cli:#7fa7ee; --st-cli-s:#1a2740; --st-tal:#b39cff; --st-tal-s:#272040;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display);font-size:15px;line-height:1.5;direction:rtl}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 40px}

/* ---- סרגל עליון ---- */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand .dot{width:30px;height:30px;border-radius:9px;background:var(--grad)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav button{border:0;background:transparent;padding:7px 12px;border-radius:9px;font-weight:600;color:var(--muted);min-height:34px}
.nav button[aria-current]{background:var(--accent-soft);color:var(--accent)}
.nav button:hover{color:var(--ink)}
.spacer{flex:1}
.user{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.user .av{width:30px;height:30px;border-radius:50%;background:var(--st-tal-s);color:var(--st-tal);display:grid;place-items:center;font-weight:800}
.cost{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cost b{color:var(--ink)}
.cost .bar{width:90px;height:6px;background:var(--sunk);border-radius:99px;overflow:hidden}
.cost .bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.cost.over b{color:var(--st-rev)} .cost.over .bar i{background:var(--st-rev)}
/* סבב 2 הערה 3: "החודש $X" (אדמין) ודיאלוג העלויות החודשי - רשימה ולא טבלה, כדי שתעבוד בטלפון */
.monthcost{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:4px 12px;min-height:34px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.monthcost b{color:var(--ink)}
.monthcost:hover{border-color:var(--accent);color:var(--ink)}
.mcnav{margin-bottom:8px}
.mcsum{font-size:15px;margin-bottom:10px}
.mclist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.mcrow{display:grid;gap:3px;width:100%;text-align:start;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px 12px;font-size:13.5px}
.mcrow:hover{border-color:var(--accent)}
.mchead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:600;min-width:0}
.mcname{min-width:0;overflow-wrap:anywhere}
.mccost{flex:0 0 auto;font-variant-numeric:tabular-nums}
.mcmade{color:var(--ink);overflow-wrap:anywhere}
.mcbrief{color:var(--faint);overflow-wrap:anywhere}
.mcstage{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
/* הערה 5 סבב 3: דיאלוג הסרטונים לחיוב (components/videomonth.js), על בסיס דיאלוג העלויות */
.vmpend{font-size:13px;margin-bottom:4px}
.vmcsv{gap:8px;flex-wrap:wrap;margin:8px 0}
.vmcamps{display:grid;gap:8px;padding:8px 12px 2px}
.vmcamp{display:grid;gap:2px}
.vmcname{justify-self:start;text-align:start;overflow-wrap:anywhere}
.vmvids{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.vmvid{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;border-inline-start:2px solid var(--border);padding-inline-start:8px}
.vmvid.pending{color:var(--faint)}
.vmlabel{overflow-wrap:anywhere}
.vmdate{color:var(--muted);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.ssedot{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--st-rev);min-width:8px;height:8px}
.ssedot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-ok);display:inline-block}
.ssedot.off::before{background:var(--st-rev);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.bellwrap{position:relative}
.bell{position:relative;font-size:16px}
.bell .badge{position:absolute;top:-4px;inset-inline-start:-4px;background:var(--st-rev);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 6px;line-height:1.3}
.bellmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;width:min(360px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:30;max-height:60vh;overflow:auto;padding:6px}
.notifrow{display:block;width:100%;text-align:right;border:0;background:transparent;padding:8px 10px;border-radius:8px;font-size:13.5px}
.notifrow:hover{background:var(--surface-2)}
.notifrow small{display:block;color:var(--faint);font-size:12px}
.notifempty{padding:12px;color:var(--muted);font-size:13px}
body.nologin #topbar{display:none}

/* ---- טיפוגרפיה וכרטיסים ---- */
h1{font-size:24px;margin:22px 0 4px;text-wrap:balance}
h2{font-size:18px;margin:0 0 10px}
h3{font-size:15px;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.g5{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.g6{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-2);background:var(--surface);padding:8px 14px;border-radius:10px;font-weight:600;transition:.15s;text-decoration:none;color:var(--ink);min-height:34px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08);color:var(--on-accent)}
.btn.ok{border-color:var(--st-ok);color:var(--st-ok)} .btn.warn{border-color:var(--st-wait);color:var(--st-wait)} .btn.client{border-color:var(--st-cli);color:var(--st-cli)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
/* רון 11.10: כפתור המחיקה האדום בתחתית הבריף */
.btn.danger{background:var(--st-rev);border-color:var(--st-rev);color:#fff}
.btn.danger:hover{filter:brightness(1.08);color:#fff}
.btn.small{padding:5px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* כפתור-טקסט קטן ("בדוק עכשיו", "יש מה לתקן?") */
.linklike{border:0;background:transparent;padding:4px 2px;color:var(--accent);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.linklike:hover{filter:brightness(1.15)}
.linklike:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}
.linklike:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.nav button:focus-visible,.tile:focus-visible,.stile:focus-visible,.ccard:focus-visible,.kpi:focus-visible,.dz:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note{background:var(--surface-2);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:13.5px}
.note.warn{background:var(--st-wait-s);color:var(--st-wait)}
.note.bad{background:var(--st-rev-s);color:var(--st-rev)}
.note.good{background:var(--st-ok-s);color:var(--st-ok)}
.note.info{background:var(--st-cli-s);color:var(--st-cli)}
/* הערה 4 (FIXES-P2-ROUND2): הצעות העברית - כרטיס לכל הצעה, השוואה כמו "מה השתנה", הלחצנים בשורה אחת גם ברוחב 375 */
.note.hebsug{margin-top:10px;min-width:0}
pre.copypre mark.hebmark{background:var(--st-wait-s);color:inherit;border-radius:4px;box-shadow:0 0 0 2px var(--st-wait-s)}
.hebsug-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.hebsug-head b{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.hebsug-detail{margin-top:4px;font-size:12.5px;opacity:.85;overflow-wrap:anywhere}
.hebsug-item{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.hebsug-where{font-size:12.5px;font-weight:700;color:var(--muted)}
.hebsug-diff{margin-top:2px}
.hebsug-why{margin-top:4px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.hebsug-tag{font-weight:600;color:var(--st-wait)}
.hebsug-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hebsug-acts .btn,.hebsug-head .btn{min-height:32px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13px} .bad{color:var(--st-rev)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:8px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.field{display:grid;gap:4px;font-size:13.5px}
.field label{color:var(--muted);font-weight:600;font-size:12.5px}
.in{padding:8px 12px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);width:100%;min-width:0}
textarea.in{min-height:64px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer}
.check input{margin-top:4px;accent-color:var(--accent)}
.check .d{font-size:12.5px;color:var(--muted)}
.check.dis{opacity:.6}
.check.slim{display:inline-flex;align-items:center;padding:5px 10px;font-size:13px}
.check.slim input{margin-top:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);white-space:nowrap}
button.chip{cursor:pointer}
.vcounts{gap:6px;flex-wrap:wrap}
.chip.vcount{padding:2px 4px 2px 10px;gap:6px}
.chip.vcount .in{width:60px;padding:2px 6px;text-align:center}
.chip.ok{background:var(--st-ok-s);color:var(--st-ok);border-color:transparent}
.chip.wait{background:var(--st-wait-s);color:var(--st-wait);border-color:transparent}
.chip.rev{background:var(--st-rev-s);color:var(--st-rev);border-color:transparent}
.chip.cli{background:var(--st-cli-s);color:var(--st-cli);border-color:transparent}
.chip.tal{background:var(--st-tal-s);color:var(--st-tal);border-color:transparent}
.chip.sys,.chip.busy{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip.busy::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite}
/* רון 15.10: המחוון החי (components/live.js) - רץ: נקודה פועמת וברק שעובר על הצ'יפ; בתור: נקודה ריקה, בלי תנועה */
.live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;position:relative;border:1px solid transparent}
.live[hidden],.live [hidden]{display:none}
.live.run{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.live.run::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent),transparent) no-repeat;background-size:40% 100%;animation:livesweep 2.2s linear infinite}
.live.wait{background:var(--surface-2);color:var(--muted);border:1px dashed var(--border-2)}
.live-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.live.run .live-dot{animation:livepulse 1.4s ease-out infinite}
.live.wait .live-dot{background:transparent;border:2px solid currentColor;width:9px;height:9px}
.live-clock{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.live.head{font-size:13.5px;padding:5px 12px;margin-inline-start:10px}
@keyframes livepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes livesweep{from{background-position:-60% 0}to{background-position:160% 0}}
.pill{display:block;border-radius:9px;padding:7px 12px;font-weight:700;font-size:13.5px;text-align:left}
.pill.wait{background:var(--st-wait-s);color:var(--st-wait)} .pill.cli{background:var(--st-cli-s);color:var(--st-cli)} .pill.rev{background:var(--st-rev-s);color:var(--st-rev)} .pill.ok{background:var(--st-ok-s);color:var(--st-ok)} .pill.tal{background:var(--st-tal-s);color:var(--st-tal)} .pill.prod{background:var(--accent-soft);color:var(--accent)} .pill.sys{background:var(--surface-2);color:var(--muted)} .pill.bad{background:var(--st-rev-s);color:var(--st-rev)}
.swatch{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.swatch i{width:22px;height:22px;border-radius:6px;border:1px solid var(--border-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{text-align:right;padding:8px 6px;border-bottom:1px solid var(--border)}
.tbl th{color:var(--muted);font-weight:600;font-size:12.5px}
.tbl tr.me td{background:var(--accent-soft)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.metric{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.metric b{font-size:20px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metric span{font-size:12.5px;color:var(--muted)}
.metric.bad b{color:var(--st-rev)}
.seg{display:inline-flex;border:1px solid var(--border-2);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:6px 12px;font-weight:600;color:var(--muted);font-size:13px;min-height:34px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:disabled{opacity:.5;cursor:not-allowed}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-left:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.stagefoot{font-size:13px;color:var(--muted);padding:6px 0}
.link{display:flex;gap:8px;align-items:center;background:var(--sunk);padding:8px 12px;border-radius:10px;font-family:ui-monospace,Menlo,monospace;font-size:13px;overflow:auto;direction:ltr;text-align:left}
.badge-row{display:flex;gap:6px;flex-wrap:wrap}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
pre.copypre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;background:var(--surface-2);border-radius:10px;padding:10px 12px;max-height:340px;overflow:auto;margin:8px 0 0}
/* רון 3.11: חלון "בריף" (components/briefmodal.js) - הבריף כמו שנכתב, עיצוב קל בלבד */
.briefmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;font-size:13px}
.brieftext{background:var(--surface-2);border-radius:10px;padding:12px 14px;max-height:62vh;overflow:auto;line-height:1.55;font-size:14.5px}
.brieftext .l{white-space:pre-wrap;overflow-wrap:anywhere}
.brieftext .l.blank{min-height:1.2em}
.brieftext .l.h{font-weight:800;margin-top:10px}
.brieftext .l.h:first-child{margin-top:0}
.brieftext hr{border:0;border-top:1px dashed var(--border);margin:10px 0}
.brieftext .send{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted);border:1px dashed var(--border);border-radius:999px;padding:1px 8px}
.editsplan{margin:10px 0}.editsplan .row{gap:10px;align-items:center;flex-wrap:wrap}.editsplan [data-plan-note]{margin-top:6px}.copyprice{margin-top:8px}.copyprice pre.copypre{max-height:none;border:1px dashed var(--border)}.copyprice .note{margin-top:4px}
.revbox{margin-top:10px;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.revbox .lbl{font-weight:600;font-size:13px;margin-bottom:6px}
/* "מה השתנה" בקופי (חבילה C, 29.9): השורה שמתחת לסטטוס + הגרסאות. מה שהוסר מחוק באדום, מה שנוסף מודגש בירוק */
.copyver{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px}
.copyver-t{font-weight:600;overflow-wrap:anywhere;min-width:0;flex:1 1 200px}
.copyver-m{font-size:12.5px;opacity:.85}
.copyver [data-diff]{min-height:32px}
.copyver.fresh{box-shadow:0 0 0 2px var(--st-ok)}
.cvhist{margin-top:10px}
.cver{border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-top:8px;min-width:0}
.cver>summary{cursor:pointer;padding:8px 12px;font-size:13.5px;overflow-wrap:anywhere}
.cver-meta{color:var(--muted);font-size:12.5px}
.cver-body{padding:0 12px 10px}
.cdiff{font-size:14px;line-height:1.6;min-width:0}
.cd-block{margin-top:8px;padding:6px 10px;border-radius:8px;background:var(--surface-2)}
.cd-h{font-weight:700;overflow-wrap:anywhere}
.cd-l{white-space:pre-wrap;overflow-wrap:anywhere}
.cdiff del{color:var(--st-rev);background:var(--st-rev-s);text-decoration:line-through;border-radius:3px;padding:0 2px}
.cdiff ins{color:var(--st-ok);background:var(--st-ok-s);text-decoration:none;font-weight:600;border-radius:3px;padding:0 2px}
.cd-same{margin-top:4px}
.cd-same>summary{cursor:pointer;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.cd-same .cd-body{padding:2px 10px 4px;color:var(--muted)}
.cd-sec{margin-top:8px;color:var(--faint);font-size:12.5px;font-weight:700}
.cd-tag{font-size:11.5px;font-weight:600;color:var(--faint)}
.cd-tag-ins{color:var(--st-ok)}
.cd-tag-del{color:var(--st-rev)}
/* הערה 10 (FIXES-P2-ROUND2): הקופי במרחק לחיצה - לשוניות הכול / קריאייטיב / מודעות, העתקה, והגרסה הראשונה. נשבר ב-375px, בלי רוחב קבוע */
.copytabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;min-width:0}
.copytabs .seg{max-width:100%;flex-wrap:wrap}
.copytabs .seg button{min-height:32px;padding:4px 10px}
.copytabs [data-copytext]{min-height:32px}
.copyview-t{flex-basis:100%;font-size:13.5px;overflow-wrap:anywhere}
.cvfirstbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.copyver [data-v1],.cvfirstbar [data-v1]{min-height:32px}
.cvfirst{border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-top:8px;padding:8px 12px 10px;min-width:0}
.cvfirst-h{font-size:13.5px;overflow-wrap:anywhere}
.cvfirst-use{margin-top:8px}
.cvfull{margin-top:6px}
.cvfull>summary{cursor:pointer;color:var(--muted);font-size:13px}
.hint b{font-weight:700}
.img-broken{opacity:.35;filter:grayscale(1)}

/* ---- לוח ---- */
.boardhead{margin:16px 0 10px}
.boardhead h1{margin:0}
.search{padding:7px 12px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);min-width:220px;min-height:34px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;transition:.15s;min-height:34px}
.kpi b{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:12.5px;color:var(--muted)}
.kpi.active{border-color:var(--ink);box-shadow:var(--shadow)}
.kpi.bad{background:var(--st-rev-s);border-color:transparent} .kpi.bad b{color:var(--st-rev)}
.kpi.ron b{color:#8a5334} .kpi.tal b{color:var(--st-tal)} .kpi.cli b{color:var(--st-cli)} .kpi.prod b{color:var(--accent-2)}
/* רון 15.10: התור של המכונה (components/queuepanel.js) - מתחת ל-KPI, נסגר ונפתח. רצה = המחוון החי; ממתינה = מספר בתור;
   מחכה להחלטה = בנפרד, בלי מספר. התנועה רק במחוון של live (נעצרת ב-reduced-motion) */
.qpanel{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden}
.qpanel.working{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.qhead{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:9px 14px;text-align:start;min-height:38px}
.qhead b{font-size:14.5px}
.qhead .qsum{flex:1;min-width:0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qhead .qcaret::before{content:"▾";color:var(--faint);display:inline-block;transition:transform .15s}
.qpanel.closed .qcaret::before{transform:rotate(90deg)}
.qhead:focus-visible,.qrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.qbody{border-top:1px solid var(--border);padding:8px 14px 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:8px 16px}
.qidle{padding:4px 0}
.qlane-h{font-weight:700;color:var(--muted);margin-bottom:4px}
.qlane.blocked .qlane-h{color:var(--st-rev)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.qrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:5px 8px;border-radius:9px;cursor:pointer;min-height:34px;border:1px solid transparent}
.qrow:hover{background:var(--surface-2)}
.qrow.run{background:var(--accent-soft)}
.qrow.blk{background:var(--st-rev-s)}
.qpos{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--muted)}
.qrow.run .qpos{background:var(--accent);color:var(--on-accent)}
.qrow.run .qpos::before{content:"▶";font-size:9px}
.qrow.blk .qpos::before{content:"⏸";font-size:10px;color:var(--st-rev)}
.qmain{flex:1 1 170px;min-width:0;display:flex;flex-direction:column}
.qname{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qmeta .live-clock{font-variant-numeric:tabular-nums}
.qnote{color:var(--st-wait)}
.qmeta.qcancel{color:var(--st-rev);font-weight:600}
.qlive{display:flex;min-width:0;max-width:100%;flex:1 1 100%;padding-inline-start:30px}
.qlive .live{white-space:normal;flex-wrap:wrap;row-gap:2px;border-radius:10px}
.qbtns{display:flex;gap:2px;flex:0 0 auto;margin-inline-start:auto}
.qbtn{padding:3px 7px;min-height:28px;font-size:12.5px}
.qbtn[disabled]{opacity:.35;cursor:default}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters .chip{cursor:pointer;min-height:30px}
.filters .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cardgaps{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--st-wait-s);border-radius:10px;padding:8px 10px;margin-bottom:12px}
.cardgaps::before{content:"כרטיסי לקוח חסרים:";font-size:12.5px;color:var(--st-wait);font-weight:600}
.gapchip{cursor:pointer}
#gapbar,#orphanbar{margin-bottom:12px}
/* פס "💬 פידבק חדש מהלקוחה:" בלוח (כמו #cardgaps, בלי ::before - התווית בתוך הפס, .lbl) */
#fbbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--st-wait-s);border-radius:10px;padding:8px 10px;margin-bottom:12px}
#fbbar .lbl{font-size:12.5px;color:var(--st-wait);font-weight:600}
#fbbar .chip{cursor:pointer}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
/* כמו הסימולציה (.cols 900px): 3 עמודות בדסקטופ (≥1024 בוודאות), עמודה אחת בטאבלט/נייד */
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.colh{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:10px;font-weight:700}
.colh .cnt{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--surface-2)}
.colh .idx{font-size:12px;color:var(--faint);font-weight:600}
.colh.c1{color:var(--s1)} .colh.c2{color:var(--s2)} .colh.c3{color:var(--s3)}
.col{display:flex;flex-direction:column;gap:10px}
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:.15s}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* רון 15.10: המכונה עובדת על הבריף - פס זז בראש הכרטיס (נשאר סטטי ב-reduced-motion); בתור - מסגרת מקווקוות, בלי תנועה.
   לפני fbpending/blocked כדי שהצבע שלהם יגבר על המסגרת */
.ccard.working{border-color:var(--accent);position:relative;overflow:hidden}
.ccard.working::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--accent-soft),var(--accent),var(--accent-2),var(--accent-soft));background-size:200% 100%;animation:indet 1.6s linear infinite}
.ccard.queued{border-style:dashed;border-color:var(--border-2)}
.ccard .liveline{display:flex;min-width:0}
.ccard .live{white-space:normal;flex-wrap:wrap;row-gap:2px;border-radius:10px}
.ccard .liveline[hidden]{display:none}
/* פידבק חדש מהלקוחה (board.fbPending) - כמו blocked בצבע ההמתנה; blocked אחריו וגובר כשיש את שניהם */
.ccard.fbpending{border-color:var(--st-wait);box-shadow:inset 4px 0 0 var(--st-wait)}
.ccard.blocked{border-color:var(--st-rev);box-shadow:inset 4px 0 0 var(--st-rev)}
/* רון 11.10: בריף מהמכונה הישנה - נעשה ידנית (lib/legacy.js) */
.ccard.legacy{background:repeating-linear-gradient(135deg,var(--surface) 0 10px,var(--bg) 10px 20px);border-style:dashed}
.chip.legacy{background:#6b5a4a;color:#fff;border-color:transparent}
.ccard .nm{font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.own{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);justify-content:flex-end}
.odot{width:8px;height:8px;border-radius:50%;display:inline-block}
.own .d{color:var(--st-rev);font-weight:700}
.prog{height:6px;background:var(--sunk);border-radius:99px;position:relative;overflow:visible}
.prog i{position:absolute;right:0;top:0;bottom:0;border-radius:99px}
.prog b{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid currentColor;transform:translateX(50%)}
.pin{background:var(--st-wait-s);color:var(--st-wait);border-radius:8px;padding:6px 10px;font-size:12.5px}

/* ---- קמפיין: סטפר, קופסת ריצה, אריחים ---- */
.stepper{display:flex;gap:6px;overflow-x:auto;padding-block:6px 14px;scrollbar-width:thin}
.step{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;min-height:34px}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-size:12px;color:var(--muted)}
.step.done{color:var(--st-ok);border-color:transparent;background:var(--st-ok-s)} .step.done .n{background:var(--st-ok);color:#fff}
.step.now{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .step.now .n{background:var(--accent);color:var(--on-accent)}
.step.lock{opacity:.55}
.step:not(.lock){cursor:pointer}
.panel{display:grid;gap:14px}
/* פריט גריד לא מתכווץ מתחת לתוכן הכי רחב שלו: לינק ארוך בלי רווחים דחף את כל הצעד לרוחב של 417px במובייל */
.panel>*{min-width:0}
.link [data-url]{overflow-wrap:anywhere;min-width:0}
.job{border:1px dashed var(--border-2);border-radius:12px;padding:14px;background:var(--surface-2)}
.job .bar{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden;margin:8px 0}
.job .bar i{display:block;height:100%;background:var(--grad);width:0;transition:width .3s}
.job.indeterminate .bar i{animation:indet 1.4s infinite linear;background:linear-gradient(90deg,var(--sunk),var(--accent),var(--sunk));background-size:200% 100%}
@keyframes indet{from{background-position:200% 0}to{background-position:-200% 0}}
.job .log{font-size:13px;color:var(--muted);display:grid;gap:3px;max-height:150px;overflow:auto}
.job .log div::before{content:"·";margin-left:6px;color:var(--faint)}
.job .log div.now{color:var(--ink);font-weight:600}
.job .log div.now::before{content:"▶"}
.errbar{margin-bottom:10px}
.costcap{margin-bottom:10px;font-weight:600}
.blockbar{background:var(--st-rev-s);color:var(--st-rev);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.blockbar .bt{font-size:15px;font-weight:800} .blockbar .bd{font-size:12.5px;margin:5px 0 9px}
.loglines pre{background:var(--sunk);border-radius:10px;padding:10px;font-size:12px;direction:ltr;text-align:left;max-height:50vh;overflow:auto;white-space:pre-wrap}
.tile{position:relative;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--sunk);cursor:pointer;aspect-ratio:4/5}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.sel{border-color:var(--accent)}
.tile .tick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:14px;opacity:0}
.tile.sel .tick{opacity:1}
.tile .tag{position:absolute;bottom:8px;right:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
.tile .tag span{background:rgba(19,24,36,.75);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px}
.tile .tag span.weak{background:rgba(168,63,54,.9)}
.tile .tag span.rec{background:rgba(35,121,90,.9)}
.tile .num{position:absolute;top:8px;left:8px;background:rgba(19,24,36,.75);color:#fff;font-size:12px;padding:2px 8px;border-radius:999px;font-weight:700}
.tile.wide{aspect-ratio:9/16}
.tile.sq{aspect-ratio:1}
/* אריח עם הערת לקוחה: מסגרת אדומה בלבד. שום סימון לא מצויר על הבאנר - הציור היחיד הוא התמונה המסומנת של הלקוחה מהלינק (FIXES-ROUND1 §4) */
.tile.fb{border-color:var(--st-rev)}
.tile.checker{background:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%) 0 0/16px 16px}
.stile{border:2px solid transparent;border-radius:12px;background:var(--surface);overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.stile .thumb,.stile img{aspect-ratio:4/5;object-fit:cover;width:100%;background:var(--sunk)}
.stile .thumb .ph{height:100%;display:grid;place-items:center;color:var(--muted);font-weight:600;font-size:13px}
.stile .cap{padding:8px 10px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.stile.sel{border-color:var(--accent)}
.stile .cap .faint{font-weight:500}
.fbcard{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface)}
.fbcard .tile{aspect-ratio:4/5;cursor:default}
.fbcard.approved{border-color:var(--st-ok)}
.fbcard.picked{box-shadow:0 0 0 2px var(--st-ok) inset}
.fbcard .cl{background:var(--st-rev-s);color:var(--st-rev);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.fbcard .cl.ok{background:var(--st-ok-s);color:var(--st-ok)}
/* סבב תיקונים 3 (הערה 4): "לא סימנה כלום" / "הציור לא ירד" (אפור), היסטוריית ההערות והשליחה האחרונה מהלינק */
.fbcard .cl.none{background:var(--surface-2);color:var(--muted);font-weight:500}
.fbhist{display:grid;gap:4px}
.fbhist [data-hist-body]{display:grid;gap:6px;max-height:220px;overflow:auto;padding:6px 8px;border-radius:8px;background:var(--surface-2)}
.fbhist-row{display:grid;gap:2px;overflow-wrap:anywhere}
.fblast summary{cursor:pointer;color:var(--muted)}
.fblast-body{display:grid;gap:4px;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--surface-2);overflow-wrap:anywhere}
/* צעד 6: יצירת לינק הפידבק (צ'קבוקסים של מה נכלל) */
.fbcreate{display:grid;gap:8px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.fbcreate h3{margin:0}
/* צעד 6: לפני/אחרי - שורה לכל באנר (.ba = שני האריחים), "שונה" / "ללא שינוי" + ההערות בצד */
.balist{display:grid;gap:10px}
.barow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.barow.changed{border-color:var(--st-wait)}
.barow .ba{flex:1 1 280px;max-width:360px}
.barow .tile.after{border-color:var(--st-ok)}
.barow .bainfo{flex:1 1 180px;display:grid;gap:6px;font-size:13px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.barow .bainfo b{color:var(--ink)}
.dz{border:2px dashed var(--border-2);border-radius:12px;padding:26px;text-align:center;color:var(--muted);background:var(--surface-2);cursor:pointer}
.dz:hover,.dz.over{border-color:var(--accent);color:var(--accent)}
.upbar .bar{height:6px;background:var(--sunk);border-radius:99px;overflow:hidden;margin:6px 0 2px}
.upbar .bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

/* ---- מודל, טוסט, לייטבוקס ---- */
.modal{position:fixed;inset:0;background:rgba(10,14,24,.55);z-index:45;display:grid;place-items:center;padding:16px}
.modal .card.dlg{max-width:560px;width:100%;max-height:90vh;overflow:auto}
.modal .card.dlg.wide{max-width:760px}
.dhead h2{margin:0} .dtext{margin:0 0 12px} .dfoot{margin-top:12px}
.toast{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:50;opacity:0;transition:.2s;pointer-events:none;max-width:90vw}
.toast.show{opacity:1}
.toast.bad{background:var(--st-rev);color:#fff} .toast.ok{background:var(--st-ok);color:#fff}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:60;display:grid;place-items:center}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px}
.lb-x,.lb-btn{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.lb-x{top:14px;left:14px} .lb-prev{right:14px;top:50%;transform:translateY(-50%)} .lb-next{left:14px;top:50%;transform:translateY(-50%)}
.lb-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px}

/* ---- כניסה, כרטיס לקוח, הגדרות ---- */
.login{max-width:420px;margin:60px auto}
/* FIXES-P2-ROUND3 הערה 1: מסך הכניסה, הגדרת סיסמה מקישור, "החשבון שלי" ו"משתמשים" (views/login.js, setup.js, users.js) */
.login .field .in+label{margin-top:8px}
[data-account] .field{max-width:420px}
[data-users] .tbl td{vertical-align:top}
[data-users] select.in{padding:4px 8px;width:auto}
[data-users] .field{min-width:0}
.tcard{cursor:pointer} .tcard.last{border-color:var(--accent)}
.logobox{padding:12px 16px;border-radius:10px;min-height:60px;display:grid;place-items:center}
.logo-img{height:44px;width:auto}
.gaps{display:grid;gap:6px;margin-bottom:12px}
.clientview .kv dd .row{gap:6px}

/* ---- שלב 2 · סרטונים (PHASE2-SPEC §6.1-§6.5; הסימולציה 191-216): כרטיס סרטון, נגן, פס הסלוטים, שורת טראק, רצועת הבירולים,
   שורות הסרטונים בפידבק (.vfb) ובלפני/אחרי (.vba) של צעד 6 - מחלקות חדשות בלבד ---- */
.check.brief{border-color:var(--st-cli);background:var(--st-cli-s)}
.vcard{display:flex;flex-direction:column;gap:8px;min-width:0}
.vcard textarea.in{min-height:56px}
.vcard>.linklike{align-self:flex-start}
.vplayer{position:relative;min-width:0}
.vplayer .vwrap{position:relative}
.vplayer video{width:100%;aspect-ratio:9/16;background:#000;border-radius:10px;max-height:420px;object-fit:contain}
.vplayer.compact video{max-height:300px}
.vplayer .vzoom{position:absolute;top:6px;left:6px;width:30px;height:30px;border-radius:8px;border:0;background:rgba(19,24,36,.6);color:#fff;font-size:15px;display:grid;place-items:center;cursor:zoom-in}
.vplayer .vzoom:hover{background:rgba(19,24,36,.8)}
.vtl{direction:ltr;display:flex;gap:2px;height:8px;margin-top:6px;border-radius:99px;overflow:hidden;background:var(--sunk)}
.vtl i{display:block;height:100%;background:var(--border-2);cursor:pointer;transition:background .15s}
.vtl i.warn{background:var(--st-wait)}
.vtl i.on,.vtl i:hover{background:var(--accent)}
.vlb video{width:100%;max-height:78vh;background:#000;border-radius:10px;object-fit:contain}
.player{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.player .pl,.mtracks .pl{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:0;display:grid;place-items:center;font-size:14px;flex:0 0 auto}
.player .pl:disabled,.mtracks .pl:disabled{opacity:.45;cursor:not-allowed}
.player .t{flex:1;min-width:0}
.player .t b{display:block;font-size:14px;overflow-wrap:anywhere}
.player .t span{font-size:12px;color:var(--muted)}
.player.cur{border-color:var(--accent);background:var(--accent-soft)}
.slots{display:flex;gap:8px;overflow-x:auto;padding-block:4px}
.slots .slot.pick{flex:0 0 150px}
.slot{flex:0 0 190px;position:relative;border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--sunk);min-height:60px}
.slot img,.slot .ph{aspect-ratio:3/4;object-fit:cover;width:100%;display:block}
.slot video.hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.slot.sel{border-color:var(--accent)}
.slot .n{position:absolute;top:6px;right:6px;background:var(--accent);color:var(--on-accent);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;z-index:1}
.slot .len{position:absolute;bottom:6px;left:6px;background:rgba(19,24,36,.75);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;z-index:1;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .sts{position:absolute;bottom:6px;right:6px;display:flex;gap:4px;flex-wrap:wrap;z-index:1}
.slot .st{color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;background:var(--st-ok)}
.slot.pick>.st{position:absolute;bottom:6px;right:6px;z-index:1}
.slot .st.note{background:var(--st-wait)}
.slot .st.del{background:var(--st-rev)}
.slot .wt{position:absolute;top:6px;left:6px;background:var(--st-wait);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;z-index:1;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .new{position:absolute;top:6px;right:6px;background:var(--st-cli);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;z-index:1}
.slot.pick{cursor:pointer}
.slot.ghost{opacity:.45}
.slotbar{display:grid;gap:4px;padding:6px;background:var(--surface);border-top:1px solid var(--border)}
.slotbar.move{grid-template-columns:1fr 1fr}
.slotbar.act{grid-template-columns:1fr 1fr 1fr;border-top:0;padding-top:0}
.slotbar .btn{padding:5px 4px;font-size:12px;border-radius:8px;justify-content:center;white-space:nowrap}
.slotwrap{flex:0 0 190px;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.slotwrap.del{opacity:.5}
.slotwrap.noting,.slotwrap.picking{border-color:var(--accent)}
.slot.pick .slotlink{position:absolute;top:4px;inset-inline-start:4px;z-index:2;background:var(--surface);border-radius:6px;padding:0 5px;font-size:13px;text-decoration:none} /* סבב 4 הערה 4 */
.slotwrap .slotnote{padding:6px 8px;font-size:12px;line-height:1.35;color:var(--text);background:var(--surface-2);border-top:1px solid var(--border);white-space:normal;overflow-wrap:anywhere} /* סבב 4 הערה 5 */
.slotwrap .slot{flex:none;border-radius:0;border:0;cursor:pointer}
.vnar .dz{padding:16px}
.vnarlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vnaraudio{width:100%;max-width:420px}
.vscreens{display:grid;gap:6px}
.vscreen{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vscreen .in{flex:1 1 220px;min-width:0}
/* צעד 6 (חבילה 7ב): כרטיס הערות לסרטון - צ'יפ זמן, פריים מסומן, הערת הלקוחה, הבהרה */
.vfb{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface);min-width:0}
.vfb.stale{opacity:.6}
.vfb .frames{display:flex;gap:6px;flex-wrap:wrap}
.vfb .frame{position:relative;width:96px;border-radius:8px;overflow:hidden;background:var(--sunk);cursor:zoom-in}
.vfb .frame img{width:100%;aspect-ratio:9/16;object-fit:cover}
.vfb .frame .chip{position:absolute;bottom:4px;right:4px}
.vfb .cl{background:var(--st-rev-s);color:var(--st-rev);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
/* צעד 6: לפני/אחרי לסרטון - שורה לכל סרטון, שני נגנים (.vba) + ההערות והפריימים מתחת ל"לפני" */
.vbalist{display:grid;gap:10px}
.vbarow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.vbarow.changed{border-color:var(--st-wait)}
.vba{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 320px;max-width:520px;min-width:0}
.vba .side{display:flex;flex-direction:column;gap:6px;min-width:0}
.vba .vplayer video{max-height:300px}
.vbarow .vbainfo{flex:1 1 180px;display:grid;gap:6px;font-size:13px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.vbarow .vbainfo b{color:var(--ink)}
.barow.vrow .ba{max-width:560px}
/* אינטגרציה 7א+7ב: הפריימים המסומנים מתחת ל"לפני" בזוג של סרטון, שורת הערה בכרטיס (.vnote), צעד שדולג בסטפר, צ'יפ קטן בלוח */
.vba .frames{display:flex;gap:6px;flex-wrap:wrap}
.vba .frame{position:relative;width:72px;border-radius:8px;overflow:hidden;background:var(--sunk);cursor:zoom-in}
.vba .frame img{width:100%;aspect-ratio:9/16;object-fit:cover}
.vba .frame .chip{position:absolute;bottom:4px;right:4px}
.vfb .vnote{align-items:flex-start;flex-wrap:nowrap}
.vfb .vnote .cl{flex:1 1 auto;min-width:0}
/* הערה 6 (FIXES-P2-ROUND1): כרטיס סרטון בצעד 6 כמו גריד הבאנרים - נגן של הגרסה שהלקוחה בדקה, מסגרת לפי המצב, רגע לכל חותמת זמן
   (צ'יפ שעוצר את הנגן + ההערות + הפריים המסומן) */
.vfb.has{border-color:var(--st-rev)}
.vfb.ok{border-color:var(--st-ok)}
.vfb .vplayer video{max-height:360px}
.vfb .cl.ok{background:var(--st-ok-s);color:var(--st-ok)}
.vfb .cl.none{background:var(--surface-2);color:var(--muted);font-weight:500}
.vfb .ph{display:grid;place-items:center;min-height:120px;padding:10px;text-align:center;background:var(--sunk);border-radius:10px}
.vfb .vpt{gap:6px}
.vfb .vpt .vptn{flex:1 1 auto;display:grid;gap:4px;min-width:0}
.vfb .vpt .frame{flex:0 0 64px;width:64px}
.vfb button.chip[data-seek]{cursor:pointer;font-family:inherit}
.vfb button.chip[data-seek]:hover{border-color:var(--st-rev)}
.vfb button.chip[data-seek]:disabled{cursor:default;opacity:.6}
.step.skip{border-style:dashed;color:var(--faint)}
.step.skip .n{background:transparent;border:1px dashed var(--border-2)}
.chip.small{padding:1px 8px;font-size:11.5px}
@media (max-width:820px){
  .vba{grid-template-columns:1fr 1fr;max-width:none}
  .vplayer video{max-height:360px}
}

/* ---- מובייל (dashboard.html 511-538): עמודה אחת, גלילה אופקית ל-KPI ולמסננים, יעדי מגע 34px ---- */
@media (max-width:820px){
  .top .wrap{gap:9px;padding-block:8px}
  .brand{font-size:15px}
  .cost{order:5;width:100%}
  .monthcost{order:5}
  .kpis{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px;-webkit-overflow-scrolling:touch;margin-bottom:11px}
  .kpi{flex:0 0 auto;min-width:118px}
  .filters{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px;-webkit-overflow-scrolling:touch}
  .filters .chip{flex:0 0 auto;white-space:nowrap}
  .boardhead .search{order:3;flex:1 1 100%;min-width:0}
  .qbody{grid-template-columns:1fr;padding-inline:10px}
  .qbtns{margin-inline-start:30px}
  .qbtn{min-height:34px}
  .wrap{padding-inline:12px}
  .btn,.chip,.nav button,.step,.kpi,.linklike{min-height:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* FIXES-P2-ROUND2 הערה 5: פוטר הבחירה בצעד התמונות דביק - "X נבחרו מתוך Y" והאישור גלויים מעל גריד של מאות תמונות */
.stepfoot{position:sticky;bottom:12px;z-index:15;box-shadow:var(--shadow),0 -2px 14px rgba(19,24,36,.08)}
.stepfoot .pcount b{display:block;font-size:15px;color:var(--ink)}
.stepfoot .pstate{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.stepfoot .pstate.warn{color:var(--st-wait)}
.stepfoot .pstate.good{color:var(--st-ok)}
@media (max-width:640px){.stepfoot{bottom:8px}}
/* סבב 4 הערה 7: פחות טקסט - הסברים ופרטים טכניים מוסתרים עד "פרטים" בכרטיס (ui/components/details.js) */
.detail:not(.detail-open){display:none !important}
.details-toggle{float:left;margin:-4px 0 4px 8px;padding:2px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.details-toggle:hover{color:var(--ink);background:var(--surface-2)}
.details-toggle[aria-expanded="true"]{color:var(--ink)}
h2 .details-toggle,h3 .details-toggle{font-weight:400;margin-top:0}
[data-details-slot] .details-toggle{float:none;margin:0}

/* ---- ספריית המדיה (docs/LIBRARY.md, views/library.js) ---- */
.libclients{display:flex;flex-wrap:wrap;gap:8px}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ltile{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);cursor:pointer;transition:.15s}
.ltile:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.ltile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ltile .lthumb{aspect-ratio:3/4;background:var(--sunk);overflow:hidden;position:relative}
.ltile.photo .lthumb{aspect-ratio:1}
.ltile .lthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ltile .lmeta{padding:8px;display:grid;gap:4px}
.ltile .ltext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ltile .lquick{position:absolute;top:6px;left:6px;display:flex;gap:4px;opacity:0;transition:.15s}
.ltile:hover .lquick,.ltile:focus-within .lquick{opacity:1}
.ltile .lquick .btn{background:var(--surface)}
.ledit .lbody{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.ledit .lvideo{width:100%;max-height:62vh;background:#000;border-radius:10px}
.ledit .lphoto img{max-width:100%;max-height:70vh;margin:0 auto;border-radius:10px}
.ltl{position:relative;height:58px;margin-top:8px;border-radius:8px;overflow:hidden;background:var(--sunk);cursor:pointer;touch-action:none;user-select:none}
.ltl .ltl-strip{position:absolute;inset:0;display:flex}
.ltl .ltl-strip i{flex:1 1 0;background-repeat:no-repeat;opacity:.85}
.ltl .ltl-segs b{position:absolute;top:0;bottom:0;background:rgba(35,121,90,.35);border-inline:2px solid var(--st-ok)}
.ltl .ltl-segs b.on{background:rgba(58,83,168,.35);border-color:var(--accent)}
.ltl .ltl-draft{position:absolute;top:0;bottom:0;background:rgba(224,180,90,.4);border-inline:2px solid var(--st-wait)}
.ltl .ltl-head{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
.lseg{border:1px solid var(--border);border-radius:10px;padding:8px;margin-top:6px;background:var(--surface)}
.lseg.on{border-color:var(--accent)}
@media (max-width:820px){.ledit .lbody{grid-template-columns:1fr}.libgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
.ledit,.ltile{overflow-wrap:anywhere;min-width:0}
.ledit .row>*{min-width:0}
/* קופי בלינק (7.11): הפאנל של הלינק בחלון הקופי - שורת מצב, הקישור, ההודעה ללקוחה ומה שהלקוחה החזירה */
.copylink{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;gap:8px}
.copylink-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px}
.copylink-row{gap:6px;align-items:center;flex-wrap:wrap}
.copylink-url{font-size:12.5px;direction:ltr;unicode-bidi:embed;overflow-wrap:anywhere;flex:1 1 220px;min-width:0}
.copylink-wa pre.copypre{max-height:120px;margin:4px 0}
.copylink-fb{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:8px;background:var(--bg-2, rgba(0,0,0,.03))}
.copylink-fb.team{border:1px dashed var(--border)}
.copylink-fbh{font-weight:600;font-size:13.5px}
.copylink-item{font-size:13.5px;padding:4px 0;border-top:1px solid var(--border)}
.copylink-item ul{margin:4px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:3px}
.copylink-item.approved,.copylink-item.approved_note{opacity:.85}
.copylink-q{opacity:.8}