/* 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)}
.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)}
.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)}
.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}
.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}
.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;font:inherit;background:var(--surface-2);border-radius:10px;padding:10px 12px;max-height:340px;overflow:auto;margin:8px 0 0}
.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}
.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)}
.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)}
/* פידבק חדש מהלקוחה (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)}
.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 .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)}
/* צעד 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}
.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}

/* ---- מובייל (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%}
  .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}
  .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}}