/* ניהול לקוחות - redesign mockup.
   Colors/glass/numbers = דשבורד הכנסות "Ultimate" (DAWN light / NEBULA dark).
   Shell, motion tokens, pickers = Danziv S27 v2. Hebrew rules: no letter-spacing, line-height 1.7. */

:root{
  color-scheme:light;
  --bg:#ece4fb;
  --canvas:radial-gradient(1200px 700px at 78% -12%,rgba(139,92,246,.30),transparent 62%),radial-gradient(1000px 620px at 8% 8%,rgba(232,121,249,.22),transparent 62%),radial-gradient(900px 560px at 40% 108%,rgba(240,198,116,.20),transparent 66%),linear-gradient(178deg,#ece4fb 0%,#e6dcf8 46%,#efe7fb 100%);
  --surface:rgba(255,255,255,.90); --surface-2:rgba(255,255,255,.56); --solid:#fffdfb;
  --glass:blur(18px) saturate(1.3);
  --line:rgba(76,29,149,.13); --line-2:rgba(76,29,149,.27);
  --ink:#180f35; --ink-2:rgba(24,15,53,.68); --ink-3:rgba(24,15,53,.58);
  --acc:#7c3aed; --acc-hi:#8b5cf6; --acc-soft:rgba(124,58,237,.10); --acc-ink:#6d28d9;
  /* track colors (round 0c): room = the brand purple, system = sky. sys-ink is for text (AA 4.5:1), sys for marks (3:1) */
  --room:#7c3aed; --room-soft:rgba(124,58,237,.10); --room-ink:#6d28d9;
  --sys:#0284c7; --sys-soft:rgba(2,132,199,.10); --sys-ink:#0369a1;
  --gold:#8f6a24; --gold-soft:rgba(143,106,36,.14);
  --danger:#be123c; --danger-soft:rgba(190,18,60,.09);
  --ok:#0a7a55; --warn:#b45309; --warn-soft:rgba(180,83,9,.10);
  --hover:rgba(124,58,237,.06);
  --shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px rgba(139,92,246,.16),0 24px 52px -30px rgba(60,28,120,.42);
  --shadow-lift:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(139,92,246,.34),0 0 46px -12px rgba(139,92,246,.45),0 30px 64px -28px rgba(60,28,120,.5);
  --shadow-pop:0 30px 80px -24px rgba(40,16,90,.45);
  --num-grad:linear-gradient(115deg,#6d28d9 0%,#7c3aed 24%,#8b5cf6 50%,#7c3aed 76%,#6d28d9 100%);
  --hero:linear-gradient(120deg,#6421d0 0%,#7331e4 32%,#7c3aed 58%,#7331e4 84%,#6421d0 100%);
  --r-panel:24px; --r-in:16px; --r-ctl:14px;
  --ease:cubic-bezier(.2,.7,.3,1); --ease-settle:cubic-bezier(.23,1,.32,1); --ease-back:cubic-bezier(.2,.9,.3,1.2);
  --side-w:248px; --top-h:72px;
  --f-num:"Sora","Heebo",sans-serif;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060510;
  --canvas:radial-gradient(1200px 760px at 82% -14%,rgba(139,92,246,.30),transparent 60%),radial-gradient(1000px 700px at -12% 16%,rgba(232,121,249,.14),transparent 55%),radial-gradient(900px 720px at 50% 120%,rgba(240,198,116,.11),transparent 60%),linear-gradient(180deg,#0b0919,#060510);
  --surface:rgba(24,19,40,.62); --surface-2:rgba(24,19,40,.40); --solid:#110e1e;
  --glass:blur(22px) saturate(1.5);
  --line:rgba(167,139,250,.17); --line-2:rgba(196,181,253,.38);
  --ink:#f8f5ff; --ink-2:rgba(248,245,255,.70); --ink-3:rgba(248,245,255,.56);
  --acc:#a78bfa; --acc-hi:#c4b5fd; --acc-soft:rgba(167,139,250,.15); --acc-ink:#c4b5fd;
  --room:#a78bfa; --room-soft:rgba(167,139,250,.15); --room-ink:#c4b5fd;
  --sys:#38bdf8; --sys-soft:rgba(56,189,248,.13); --sys-ink:#7dd3fc;
  --gold:#f0c674; --gold-soft:rgba(240,198,116,.16);
  --danger:#fb7185; --danger-soft:rgba(251,113,133,.13);
  --ok:#34d399; --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12);
  --hover:rgba(167,139,250,.08);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 36px 74px -34px rgba(0,0,0,.92),0 10px 30px -18px rgba(0,0,0,.7);
  --shadow-lift:0 0 0 1px rgba(167,139,250,.25),0 28px 74px -26px rgba(139,92,246,.6);
  --shadow-pop:0 30px 80px -24px rgba(0,0,0,.9);
  --num-grad:linear-gradient(115deg,#a78bfa 0%,#c4b5fd 28%,#ded1ff 50%,#a78bfa 72%,#c4b5fd 100%);
  --hero:linear-gradient(120deg,#5b21b6 0%,#6d28d9 34%,#7c3aed 62%,#6d28d9 86%,#5b21b6 100%);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--canvas);background-attachment:fixed;color:var(--ink);font:400 16px/1.7 "Heebo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg{width:20px;height:20px;flex:none}
h1,h2,h3{margin:0;line-height:1.3}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* digits keep the RTL flow of their container (round 0b fix): no direction override on the number itself */
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease-back),box-shadow .2s,border-color .2s,background .2s}
.btn:hover{transform:translateY(-1px);border-color:var(--acc)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.pri{background:var(--hero);background-size:200%;border-color:transparent;color:#fff;box-shadow:0 10px 24px -12px rgba(109,40,217,.7)}
.btn.pri:hover{background-position:100% 0}
.btn.sm{min-height:36px;padding:0 12px;font-size:15px;border-radius:12px}
.btn.room{border-color:color-mix(in srgb,var(--room) 40%,transparent);color:var(--room-ink)}
.link{border:0;background:none;padding:4px 2px;color:var(--acc-ink);font-weight:600;cursor:pointer;font-size:15px}
.link:hover{text-decoration:underline}
.ghost-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl);border:0;background:none;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,transform .16s var(--ease-back)}
.ghost-ic:hover{background:var(--hover);color:var(--acc-ink)}
.ghost-ic:active{transform:scale(.94)}
.ic-sun{display:none}[data-theme="dark"] .ic-sun{display:block}[data-theme="dark"] .ic-moon{display:none}

/* ---------- shell (S27: fixed right rail, sticky glass top bar) ---------- */
.side{position:fixed;inset-block:0;inset-inline-start:0;width:var(--side-w);z-index:30;display:flex;flex-direction:column;padding:22px 16px 18px;background:var(--surface-2);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-inline-end:1px solid var(--line)}
.side-brand{display:flex;align-items:center;gap:12px;padding:0 8px 26px}
.side-brand img{border-radius:12px}
.side-brand b{font-size:18px;font-weight:800}
.side-nav{position:relative;display:flex;flex-direction:column;gap:4px}
.side-nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;border-radius:var(--r-ctl);color:var(--ink-2);font-size:17px;font-weight:600;transition:color .2s,transform .16s var(--ease-back)}
.side-nav a:hover{color:var(--ink)}
.side-nav a:active{transform:scale(.98)}
.side-nav a.on{color:var(--acc-ink)}
.side-ind{position:absolute;inset-inline:0;top:0;height:50px;border-radius:var(--r-ctl);background:var(--acc-soft);opacity:0;transition:transform .2s var(--ease-back),height .2s var(--ease),opacity .15s}
.side-ind::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:4px;border-radius:4px;background:var(--acc)}
.col{margin-inline-start:var(--side-w);min-height:100vh}
.top{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:16px;min-height:var(--top-h);padding:12px clamp(16px,3vw,40px);background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-bottom:1px solid var(--line)}
.top h1{font-size:26px;font-weight:800;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.top-act{margin-inline-start:auto;display:flex;gap:10px;align-items:center}
.top-theme{flex:none;margin-inline-end:-6px}
#main{padding:28px clamp(16px,3vw,40px) 64px;max-width:1240px;outline:none;transition:opacity .07s linear}
#main.out{opacity:0;transition-duration:.06s}
.tabbar{display:none}

/* S27 section rise + income count-up live in JS; stagger is inline delay */
.rv{animation:rise .2s var(--ease-settle) both}
/* build 5: a region repainted after a save / filter / search / the auto refresh does not enter again */
.still .rv,.still .band{animation:none!important}
/* build 5: the card - the manual stage select only on the phone (no drag there); "+ פגישה" low and secondary after onboarding */
/* build 5: the monthly summary on top of the meetings screen */
.msum{margin-bottom:18px}
.msum-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.msum-h h2{font-size:18px;font-weight:800}
.msum-m{margin-inline-start:auto}
.msum-m .in{min-width:150px}
.msum-n{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.msum-n > div{display:grid;gap:2px;padding:12px 16px;border-radius:var(--r-in);background:var(--surface-2);border:1px solid var(--line);border-inline-start:4px solid var(--sys)}
.msum-n > .room{border-inline-start-color:var(--room)}
.msum-n > .tot{border-inline-start-color:var(--acc)}
.msum-n b{font-size:30px;font-weight:800;line-height:1.1}
.msum-n span{font-size:14.5px;color:var(--ink-2)}
.msum-p{margin:12px 0 0;font-size:14.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.msum-p span{margin-inline-start:auto;font-size:13px;color:var(--ink-3)}
.kind-btn{border:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600}
.kind-btn:hover{text-decoration:underline;text-underline-offset:3px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes fade{from{opacity:0}}

/* ---------- panels ---------- */
.card{position:relative;border-radius:var(--r-panel);background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);padding:clamp(18px,2.4vw,26px)}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-h h2{font-size:21px;font-weight:800}
.card-h .count{font-family:var(--f-num);font-size:15px;font-weight:700;color:var(--ink-2);background:var(--acc-soft);border-radius:999px;padding:0 10px}
.card-h .grow{margin-inline-start:auto}

/* ---------- home: the band (the one bold element) ---------- */
.band{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r-panel);background:var(--hero);background-size:240%;color:#fff;box-shadow:0 30px 60px -30px rgba(76,29,149,.75);border:1px solid rgba(255,255,255,.12);margin-bottom:14px;animation:rise .2s var(--ease-settle) both,bandShift 14s ease-in-out infinite alternate}
@keyframes bandShift{to{background-position:100% 0}}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 85% 0%,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
/* round 0d: one low row - number and label side by side */
.stat{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:12px 24px;color:inherit;transition:background .2s}
.stat+.stat{border-inline-start:1px solid rgba(255,255,255,.16)}
.stat:hover{background:rgba(255,255,255,.07)}
.stat b{display:block;font-family:var(--f-num);font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;opacity:.92}
.stat i{width:10px;height:10px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.stat.room i{background:#e9d5ff}
.stat.wait i{background:#f0c674}

/* stage board (round 0d): two narrow columns + a wide "בלייב" grid. Height = the screen (fitBoard in app.js), each list scrolls inside */
#main[data-screen="home"]{max-width:1680px}
.board{display:grid;grid-template-columns:220px 220px minmax(0,1fr) 190px;gap:12px;align-items:stretch}
.kcol{display:flex;flex-direction:column;min-height:0;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);padding:10px 8px 6px;transition:border-color .2s,background .2s,box-shadow .2s}
.kcol header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:40px;padding:0 6px 8px}
.kcol h2{font-size:16px;font-weight:800}
.kcol .count{min-width:28px;text-align:center;font-size:14px;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.unit{margin-inline-start:auto;font-size:13px;color:var(--ink-3);white-space:nowrap}
.kcol:not([data-stage="live"]) header{flex-wrap:nowrap;padding-inline:4px}
.kcol:not([data-stage="live"]) h2{font-size:15px;white-space:nowrap}
/* build 7: "לא מחובר" - the fourth column, narrow and grey (onboarded, no active accounts) */
.kcol[data-stage="off"]{background:color-mix(in srgb,var(--ink) 5%,transparent);border-style:dashed}
.kcol[data-stage="off"] h2{color:var(--ink-2)}
.kcol[data-stage="off"] .kcard{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.kcol[data-stage="off"] .kn{font-weight:500;color:var(--ink-2)}
.kcol.over{border-color:var(--acc);border-style:dashed;background:var(--acc-soft);box-shadow:0 0 0 4px var(--acc-soft)}
.kcol.over .kempty{display:none}
.klist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* the live grid: as many columns as fit, never more than 4 (the max() keeps each at least a quarter of the width) */
.kcol[data-stage="live"] .klist{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(196px,calc((100% - 18px) / 4)),1fr));align-content:start}
.kcol[data-stage="live"] .kempty,.knone{grid-column:1/-1}
.knone{margin:0;padding:18px 6px;text-align:center;font-size:14px;color:var(--ink-3)}
.kph{display:grid;place-items:center;flex:none;min-height:40px;border:2px dashed var(--acc);border-radius:12px;background:var(--surface);color:var(--acc-ink);font-weight:600;font-size:14px;pointer-events:none;animation:fade .15s}
/* round 0e - quiet: one-line tile, ~40px. Track dot + name + the one figure the column is about; a corner mark for exceptions */
.kcard{position:relative;display:flex;align-items:center;gap:8px;flex:none;min-width:0;height:40px;padding:0 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);cursor:grab;transition:transform .2s var(--ease),border-color .2s,background .2s,opacity .2s}
.kcard:hover{border-color:var(--line-2);background:var(--solid)}
.tdot{flex:none;width:8px;height:8px;border-radius:50%}
.tdot.sys{background:var(--sys)}
.tdot.room{background:var(--room)}
.tdot.both{background:linear-gradient(90deg,var(--room) 50%,var(--sys) 50%)}
.kn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600}
.kfig{flex:none;font-size:16px;font-weight:700}
.kdate{flex:none;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.mk{position:absolute;top:4px;inset-inline-end:4px;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.ktools{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.ksearch{position:relative;width:180px}
.ksearch svg{position:absolute;inset-inline-start:10px;top:9px;width:16px;height:16px;color:var(--ink-3)}
.ksearch .in{min-height:34px;padding:4px 10px;padding-inline-start:32px;font-size:14.5px;border-radius:10px}
.ksort .pills{padding:3px}
.ksort .pills button{min-height:28px;padding:0 12px;font-size:14px}
.ksort .pills .pin{top:3px;bottom:3px}
.btabs{display:none}
.cnt{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.cnt > span{display:inline-flex;align-items:baseline;gap:5px}
.cnt b{font-size:21px;font-weight:800;line-height:1;color:var(--ink)}
.cnt i{font-style:normal;color:var(--ink-3)}
.cnt em{min-width:44px;font-style:normal;font-size:12.5px;font-weight:700}
.cnt.sys em{color:var(--sys-ink)}
.cnt.room em{color:var(--room-ink)}
.cnt + .cnt{margin-top:4px}
.pn-n .cnt em{min-width:54px;font-size:14px}
.kcard.dragging{opacity:.4;cursor:grabbing}
.kempty{margin:0;padding:18px 6px;text-align:center;font-size:14px;color:var(--ink-3)}
.tag{display:inline-block;padding:0 8px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.7}
.tag.man{background:var(--warn-soft);color:var(--warn)}
.tag.bad{background:var(--danger-soft);color:var(--danger)}
.tag.wd{background:var(--gold-soft);color:var(--gold)}
.gone{margin:14px 4px 0;font-size:14.5px;color:var(--ink-3)}
.gone a{color:var(--ink-2);text-decoration:underline}
.stg{display:inline-block;padding:1px 10px;border-radius:999px;font-size:14px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);margin-inline-end:6px}
.stg.s-live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.stg.s-open{color:var(--gold);background:var(--gold-soft);border-color:transparent}
.empty{padding:28px 8px;text-align:center;color:var(--ink-2)}
.empty b{display:block;font-size:19px;color:var(--ink);margin-bottom:4px}

/* ---------- pills (S27 sliding pin) ---------- */
.pills{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.pills button{position:relative;z-index:1;white-space:nowrap;flex:none;border:0;background:none;min-height:38px;padding:0 16px;border-radius:999px;font-size:15.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:color .2s}
.pills button.on{color:var(--acc-ink)}
.pills .pin{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--solid);box-shadow:0 2px 8px -2px rgba(60,28,120,.25);transition:transform .2s var(--ease-back),width .2s var(--ease)}
[data-theme="dark"] .pills .pin{background:rgba(167,139,250,.18);box-shadow:none}
.pills small{font-family:var(--f-num);font-size:13px;opacity:.75;margin-inline-start:4px}

/* ---------- clients ---------- */
.tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search{position:relative;flex:1 1 220px;max-width:340px}
.search svg{position:absolute;inset-inline-start:14px;top:12px;color:var(--ink-3)}
.in{width:100%;min-height:46px;padding:10px 14px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--solid);color:var(--ink);outline:none;transition:border-color .18s,box-shadow .2s}
[data-theme="dark"] .in{background:rgba(255,255,255,.04)}
.in:focus,.in[aria-expanded="true"]{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.in[aria-invalid="true"]{border-color:var(--danger)}
.search .in{padding-inline-start:44px}
/* unlinked room users: one small alert line, opens on click (native <details>) */
.unl{margin-bottom:12px}
.unl summary{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:14px;color:var(--ink-2);cursor:pointer;list-style:none}
.unl summary::-webkit-details-marker{display:none}
.unl summary:hover{border-color:var(--line-2)}
.unl-dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.unl-a{color:var(--acc-ink);font-weight:600}
.map-list{list-style:none;margin:10px 0 0;padding:0;flex-basis:100%;display:grid;gap:8px}
.map-list li{display:grid;grid-template-columns:1fr minmax(160px,240px) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface)}
.map-list select{min-height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--line-2);background:var(--solid);color:var(--ink)}
.map-list span{color:var(--ink)}

/* client list (round 0e - quiet): one container, thin dividers, ~48px rows, no stripes / chips / icons */
.rows-wrap{border-radius:var(--r-panel);background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.rows-h,.row{display:grid;grid-template-columns:minmax(200px,1.6fr) minmax(140px,1fr) 96px 72px;gap:16px;align-items:center}
.rows-h{padding:12px 22px 10px;font-size:13.5px;font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--line)}
.c-live{text-align:end}
.row{min-height:48px;padding:0 22px;border-top:1px solid var(--line);cursor:pointer;text-align:start;transition:background .15s}
.row:first-child{border-top:0}
.row:hover{background:var(--hover)}
.row .c-name{display:flex;align-items:center;gap:10px;min-width:0}
.row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600}
.row .c-stage{min-width:0}
/* the one pill in the row: colored by STAGE (green / amber / neutral), never by track - sky and purple stay the track colors */
.spill{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:999px;border:1px solid transparent;font-size:13.5px;font-weight:600;line-height:1.75;white-space:nowrap}
.spill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.spill.s-live{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.spill.s-eval{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.spill.s-onb{color:var(--ink-2);background:var(--surface-2);border-color:var(--line-2)}
.spill.s-left{color:var(--ink-2);border-color:var(--line)}
.spill.s-off{color:var(--ink-2);background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:var(--line-2)}
:root:not([data-theme="dark"]) .spill.s-eval{color:#92400e}   /* --warn on its tint is 4.3:1 in light - one step darker for AA */
.row .c-ev{font-size:16px;font-weight:700;text-align:end}
.row .c-ev.zero{font-weight:400;color:var(--ink-3)}
.row .c-live{font-size:16px;font-weight:700}
.row .c-live.zero{font-weight:400;color:var(--ink-3)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 10px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.7;background:var(--acc-soft);color:var(--acc-ink)}
.chip.sys{background:var(--sys-soft);color:var(--sys-ink)}
.chip.room{background:var(--room-soft);color:var(--room-ink)}
.chip.gold{background:var(--gold-soft);color:var(--gold)}
.chip.bad{background:var(--danger-soft);color:var(--danger)}
.chip.plain{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.chip svg{width:14px;height:14px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);margin-inline-end:7px;vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.wait{background:var(--warn)}.dot.room{background:var(--room)}.dot.sys{background:var(--sys)}.dot.bad{background:var(--danger)}
.none{color:var(--ink-3)}
.hl{display:none}

/* ---------- client card (side panel) ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(16,8,40,.35);backdrop-filter:blur(3px);animation:fade .2s ease}
.panel{position:fixed;z-index:71;inset-block:0;inset-inline-end:0;width:min(540px,100vw);overflow:auto;background:var(--solid);border-inline-start:1px solid var(--line-2);box-shadow:var(--shadow-pop);transform:translateX(-104%);transition:transform .2s var(--ease-settle)}
.panel.on{transform:none}
.pn-h{position:sticky;top:0;z-index:2;display:flex;gap:12px;align-items:flex-start;padding:22px 24px 16px;background:color-mix(in srgb,var(--solid) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.pn-h h2{font-size:24px;font-weight:800}
.pn-h .ghost-ic{margin-inline-start:auto;margin-top:-6px;flex:none}   /* night 2: flex:none - a long name squeezed it to 32px */
.pn-b{padding:20px 24px 40px;display:grid;gap:18px}
.sec h3{font-size:15px;font-weight:700;color:var(--ink-3);margin-bottom:10px}
.steps{display:grid;gap:12px}
.track{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.track > b{font-size:15px;font-weight:700}
.stp{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.stp li{flex:1;position:relative;font-size:13.5px;color:var(--ink-3);padding-top:18px;text-align:center}
.stp li::before{content:"";position:absolute;top:4px;inset-inline-start:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--line-2);z-index:1}
.stp li::after{content:"";position:absolute;top:8px;inset-inline-start:50%;width:100%;height:2px;background:var(--line)}
.stp li:last-child::after{display:none}
.stp li.done::before,.stp li.cur::before{background:var(--sys)}
.stp li.done::after{background:var(--sys)}
.stp li.cur{color:var(--ink);font-weight:700}
.stp li.cur::before{box-shadow:0 0 0 4px var(--sys-soft)}
.stp.room li.done::before,.stp.room li.cur::before,.stp.room li.done::after{background:var(--room)}
.stp.room li.cur::before{box-shadow:0 0 0 4px var(--room-soft)}
/* night 2: notes + off the board, on the card */
.notes{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2)}
.nt-act,.out-back{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.board-out{padding-top:4px}
.out-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.board-out .none{margin:0}
/* build 6: delete a client */
.link.danger{color:var(--danger)}
.btn.danger{background:var(--danger);border-color:transparent;color:#fff}
.btn.danger:disabled{opacity:.45;cursor:not-allowed}
.del-warn{margin:0 0 10px;color:var(--ink-2)}
.del-block{margin:0;padding:10px 12px;border-radius:12px;background:var(--danger-soft);color:var(--danger);font-weight:600}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kv div{padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.kv span{display:block;font-size:14px;color:var(--ink-2)}
.kv b{font-family:var(--f-num);font-size:22px;font-weight:800}
.kv b.he{font-family:inherit;font-size:17px}
.roombox{padding:16px;border-radius:var(--r-in);background:var(--room-soft);border:1px solid color-mix(in srgb,var(--room) 30%,transparent)}
.roombox h3{color:var(--room-ink);display:flex;align-items:center;gap:8px}
.roombox .kv div{background:color-mix(in srgb,var(--solid) 70%,transparent);border-color:color-mix(in srgb,var(--room) 18%,transparent)}
.roombox .kv b{color:var(--room-ink)}
.roombox .kv b.urgent{color:var(--danger)}
.mt-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.mt-list .when{font-family:var(--f-num);font-weight:700}
.mt-list .acc-no{font-size:13.5px;color:var(--ink-2);min-width:0;flex:0 1 auto}
.pn-b > *{min-width:0}
.mt-list li{min-width:0;flex-wrap:wrap;row-gap:2px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sec-h h3{margin:0}
.why{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:14.5px;color:var(--ink-2)}
.why > span{flex:1;min-width:160px}
.in.sm{min-height:38px;padding:4px 10px;font-size:14.5px;width:auto}
.linked{margin:10px 0 0;font-size:14px;color:var(--room-ink)}
.link-row{display:flex;gap:8px}
.link-row .in{flex:1}
.pn-n .cnt{margin-top:10px;font-size:15px;gap:10px}
.pn-n .cnt b{font-size:28px}
.pn-n .cnt + .cnt{margin-top:2px}
.sub-l{flex-basis:100%;font-size:13.5px;color:var(--ink-2)}
.kv b.got,.mt-list b.got{color:var(--gold)}

/* ---------- meetings screen ---------- */
.range{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.day{margin-top:22px}
.day h3{font-size:16px;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.day.today h3{color:var(--acc-ink)}
.mrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:14px 20px;margin-bottom:8px;border-radius:var(--r-in);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-inline-start:4px solid var(--sys)}
.mrow.room{border-inline-start-color:var(--room)}
.mrow.past{opacity:.6;box-shadow:none}
.mrow .t{font-size:22px;font-weight:800;text-align:start;min-width:90px}
.mrow > b{flex:1;min-width:0}
.mrow.cancelled > b a{text-decoration:line-through}
/* build 4: closing a meeting - state, "לא נסגרה", the 3 actions, the in-place editor */
.mst{font-size:14px;color:var(--ink-2);min-width:0}
.late-tag{padding:0 10px;border-radius:999px;background:var(--danger-soft);color:var(--danger);font-size:13.5px;font-weight:700;line-height:1.7;white-space:nowrap}
.macts,.medit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-inline-start:auto}
.medit > .in{min-width:min(260px,100%)}
.medit .tm{width:96px}
.mt-meet li.late .when{color:var(--danger)}
/* the phone's one line (hidden on desktop, where the rows always show) */
.t-undo{margin-inline-start:8px;min-height:32px;padding:0 8px;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:inherit;font:inherit;font-weight:800;cursor:pointer}
.t-undo:hover{background:rgba(255,255,255,.24)}

/* ---------- withdrawals ---------- */
.sums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.sum{padding:16px 20px;border-radius:var(--r-in);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.sum span{display:block;font-size:15px;color:var(--ink-2);font-weight:600}
.sum b{display:block;font-size:30px;font-weight:800;line-height:1.3}
.sum.got b{color:var(--gold)}
.month .in{min-height:44px;width:auto;padding:0 12px}
.wrows{display:grid;gap:8px}
.wrows-h,.wrow{display:grid;grid-template-columns:60px minmax(140px,1.2fr) minmax(130px,1.1fr) 150px 88px 88px 100px minmax(80px,1fr);gap:12px;align-items:center}
.wrows-h{padding:0 20px 2px;font-size:14px;font-weight:600;color:var(--ink-3)}
.wrow{position:relative;padding:12px 20px;border-radius:var(--r-in);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.wrow::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:4px;border-radius:4px;background:var(--sys)}
.wrow.t-room::before{background:var(--room)}
.wrow.t-both::before{background:linear-gradient(var(--sys) 50%,var(--room) 50%)}
.wrow .w-name a{font-weight:700;font-size:16px}
.wrow .w-name a:hover{color:var(--acc-ink)}
.wrow .w-name .chips{margin-top:0}
.acc-no{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-acc{min-width:0;display:flex;gap:6px}
.wrow b.num{font-size:16px}
.st-sel{appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:999px;padding:3px 14px;font-size:14px;font-weight:700;cursor:pointer;width:100%;text-align:center;background:var(--warn-soft);color:var(--warn)}
.st-sel.st-b{background:var(--acc-soft);color:var(--acc-ink)}
.st-sel.st-c{background:var(--gold-soft);color:var(--gold)}
.st-sel.ro{display:inline-block;cursor:default}
.src{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.src svg{width:14px;height:14px}
.src.room{color:var(--room-ink)}
.st-sel:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- deploy / advanced ---------- */
.capital{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.capital > span{font-size:15px;font-weight:600;color:var(--ink-2)}
.capital b{font-size:clamp(36px,4.4vw,52px);font-weight:800;line-height:1.2;background:var(--num-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.capital small{font-size:14px;color:var(--ink-3)}
.adv-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:16px}
.kv3{grid-template-columns:repeat(3,1fr)}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:600 12px var(--f-num);fill:var(--ink-3)}
.chart .g{stroke:var(--line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--sys);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--sys);stroke:var(--solid);stroke-width:2}
.chart .pt.on{r:6}
.chart .xh{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3}
.chart .tip{position:absolute;top:-6px;padding:4px 10px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:13.5px;white-space:nowrap;pointer-events:none;direction:rtl}
/* build 5: "סטטיסטיקה" - chart colors validated (dataviz validate_palette.js, light + dark surfaces):
   sys/room, room/withdrawal, req->appr->got (one hue, ordinal), onb/eval/live (eval-live 7.8 CVD: end labels too) */
:root{--c-off:#7a7590;--c-sys:#0284c7;--c-room:#7c3aed;--c-wd:#b45309;--c-req:#e0a73a;--c-appr:#b7791f;--c-got:#8a5a12;--c-onb:#7c3aed;--c-eval:#b45309;--c-live:#0a7a55}
[data-theme="dark"]{--c-off:#9089a8;--c-sys:#0c96d8;--c-room:#8b5cf6;--c-wd:#d97706;--c-req:#e9b44c;--c-appr:#c98a23;--c-got:#9a6414;--c-onb:#8b5cf6;--c-eval:#d97706;--c-live:#059669}
.st-chart .c-sys{fill:var(--c-sys);stroke:var(--c-sys)}.st-chart .c-room{fill:var(--c-room);stroke:var(--c-room)}.st-chart .c-wd{fill:var(--c-wd);stroke:var(--c-wd)}
.st-chart .c-req{fill:var(--c-req)}.st-chart .c-appr{fill:var(--c-appr)}.st-chart .c-got{fill:var(--c-got)}
.st-chart .c-onb{fill:var(--c-onb);stroke:var(--c-onb)}.st-chart .c-eval{fill:var(--c-eval);stroke:var(--c-eval)}.st-chart .c-live{fill:var(--c-live);stroke:var(--c-live)}.st-chart .c-off{fill:var(--c-off);stroke:var(--c-off)}
.st-chart path,.st-chart rect:not(.hit){stroke:none}
.st-chart .ln{fill:none!important;stroke-width:2}
.st-chart .dt{stroke:var(--solid);stroke-width:2}
.st-chart .end{font:600 12px var(--f-body,inherit);fill:var(--ink-2)}
.st-chart .hit{fill:transparent;stroke:none;cursor:crosshair}
.st-chart .hit:hover{fill:var(--hover)}
.st-chart .tip{top:auto;bottom:calc(100% - 4px);display:grid;gap:2px;padding:8px 12px;white-space:nowrap;z-index:2}
.st-chart .tip span{display:flex;align-items:center;gap:6px;font-weight:500}
.lgd{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px;font-size:13.5px;color:var(--ink-2)}
.lgd span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.sw.c-sys{background:var(--c-sys)}.sw.c-room{background:var(--c-room)}.sw.c-wd{background:var(--c-wd)}.sw.c-req{background:var(--c-req)}.sw.c-appr{background:var(--c-appr)}.sw.c-got{background:var(--c-got)}.sw.c-onb{background:var(--c-onb)}.sw.c-eval{background:var(--c-eval)}.sw.c-live{background:var(--c-live)}.sw.c-off{background:var(--c-off)}
.st-sec{margin-bottom:16px}
.st-sec .kv{margin-bottom:14px}
.kv4{grid-template-columns:repeat(4,1fr)}
.kv5{grid-template-columns:repeat(5,1fr)}
.kv .kv-hl b{color:var(--c-live)}   /* not ".hl" - that is the withdrawals' phone-only label */
.st-sub{margin:18px 0 8px;font-size:15px;font-weight:700;color:var(--ink-2)}
.st-note{margin:8px 0 0;font-size:13px;color:var(--ink-3)}
.st-empty{padding:18px 8px}
.st-tbl{display:grid}
.st-th,.st-tr{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;align-items:center;padding:8px 6px}
.st-th{font-size:14px;font-weight:600;color:var(--ink-3)}
.st-tr{border-top:1px solid var(--line);color:var(--ink);font-size:15.5px;font-weight:600;border-radius:8px}
.st-tr:hover{background:var(--hover)}
.st-tr .urgent{color:var(--danger)}
.log-h,.log-r{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.2fr;gap:10px;padding:8px 6px}
.log-h{font-size:14px;font-weight:600;color:var(--ink-3)}
.log-r{border-top:1px solid var(--line);font-size:15.5px;font-weight:600}

/* mobile "עוד" sheet */
.more-sheet{position:fixed;z-index:45;inset-inline:10px;bottom:calc(86px + env(safe-area-inset-bottom));display:grid;gap:2px;padding:8px;border-radius:20px;background:var(--solid);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);animation:pop .2s var(--ease-settle)}
.more-sheet a,.more-sheet button{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;border:0;border-radius:14px;background:none;font-size:16.5px;font-weight:600;text-align:start;cursor:pointer}
.more-sheet a:hover,.more-sheet button:hover{background:var(--hover)}
.mrow b{font-size:17px}
.mrow a:hover{color:var(--acc-ink)}

/* ---------- skeleton screens ---------- */
.skel{border-radius:12px;background:linear-gradient(90deg,var(--line) 0%,var(--acc-soft) 50%,var(--line) 100%);background-size:200% 100%;animation:shim 1.6s ease-in-out infinite}
@keyframes shim{to{background-position:-200% 0}}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.sk-tile{height:118px;border-radius:var(--r-in)}
.sk-line{height:46px;margin-bottom:10px}
.note{font-size:15px;color:var(--ink-2);margin:0 0 16px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.acts > .rv{display:grid}
.act{display:flex;flex-direction:column;gap:12px}
.act .act-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--acc-soft);color:var(--acc-ink)}
.act h2{font-size:20px;font-weight:800}
.act .btn{align-self:flex-start;margin-top:auto}
.act .meta{font-size:14px;color:var(--ink-3)}
.minor{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:14px 20px}
.minor p{margin:0;flex:1;color:var(--ink-2)}
.minor b{display:block;color:var(--ink)}
.minor .meta{display:block;font-size:14px;color:var(--ink-3)}
.mob-only{display:none}

/* ---------- dialog (S27 native dialog + pop) ---------- */
dialog{padding:0;border:0;background:none;color:var(--ink);max-width:calc(100vw - 24px)}
dialog::backdrop{background:rgba(16,8,40,.42);backdrop-filter:blur(6px)}
dialog[open]{animation:pop .2s var(--ease-settle)}
dialog.closing{opacity:0;transform:translateY(8px) scale(.97);transition:opacity .2s,transform .2s}
.dlg{width:min(520px,calc(100vw - 24px));padding:24px;border-radius:var(--r-panel);background:var(--solid);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);display:grid;gap:16px}
.dlg-h{display:flex;align-items:center}
.dlg-h h2{font-size:22px;font-weight:800}
.dlg-h .ghost-ic{margin-inline-start:auto}
.fld{display:grid;gap:6px;margin:0;min-width:0}
.fld > span,.fld legend{font-size:15px;font-weight:600;color:var(--ink-2)}
.fld-row{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.seg{border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg legend{padding:0;margin-bottom:6px}
.seg-o{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line-2);cursor:pointer;font-weight:600;transition:border-color .2s,background .2s}
.seg-o input{position:absolute;opacity:0}
.seg-o i{width:12px;height:12px;border-radius:50%;background:var(--sys)}
.seg-o.room i{background:var(--room)}
.seg-o:has(input:checked){border-color:var(--sys);background:var(--sys-soft)}
.seg-o.room:has(input:checked){border-color:var(--room);background:var(--room-soft)}
.seg-o:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.err{margin:0;min-height:1.7em;color:var(--danger);font-weight:600;font-size:15px}
.dlg-f{display:flex;gap:10px}
/* build 7: the phone keyboard is open (html.kb, app.js) - the dialog sits in the visible area and scrolls inside it,
   its footer ("שמירה") sticks to the bottom of that area, above the keyboard */
html.kb dialog[open]{position:fixed;inset-block:calc(var(--vvt,0px) + 8px) auto;margin-block:0;max-height:calc(var(--vvh,100vh) - 16px);overflow:auto;overscroll-behavior:contain;animation:none}
html.kb .dlg-f{position:sticky;bottom:0;z-index:2;margin:0 -20px -20px;padding:12px 20px 20px;background:var(--solid);border-top:1px solid var(--line)}

/* Danziv date/time picker (s19_datepicker), restyled to this palette */
.dpb{display:flex;align-items:center;gap:10px;text-align:start;cursor:pointer;white-space:nowrap}
.dpb .ph{color:var(--ink-3)}
.dpb svg{color:var(--ink-3)}
.dp{position:fixed;z-index:100;width:min(304px,calc(100vw - 16px));padding:14px;border-radius:20px;background:var(--solid);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);animation:dpIn .15s ease-out}
.dp:has(.tl){width:150px;padding:6px}
@keyframes dpIn{from{opacity:0;transform:translateY(-4px)}}
.dp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-h b{font-size:16px;font-weight:700}
.dp-nav{width:36px;height:36px;border:0;border-radius:12px;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.dp-nav:hover,.dp-d:hover,.dp-f button:hover,.tl li:hover{background:var(--hover)}
.dp-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.dp-w{height:28px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-3)}
.dp-d{width:38px;height:38px;justify-self:center;padding:0;border:0;border-radius:11px;background:none;font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:background .15s,box-shadow .15s}
.dp-d.out{color:var(--ink-3);opacity:.55}
.dp-d.today{box-shadow:inset 0 0 0 2px var(--acc);color:var(--acc-ink);font-weight:700}
.dp-d.sel{background:var(--acc);color:#fff;font-weight:700;box-shadow:none}
.dp-d.today.sel{box-shadow:inset 0 0 0 2px var(--acc),inset 0 0 0 4px var(--solid)}
[data-theme="dark"] .dp-d.sel{color:#1a0f3a}
.dp-f{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dp-f button{border:0;background:none;font-size:15px;font-weight:600;color:var(--acc-ink);padding:6px 12px;border-radius:12px;cursor:pointer}
.tl{list-style:none;margin:0;padding:0;max-height:min(240px,40vh);overflow:auto}
.tl li{padding:8px 12px;border-radius:10px;font-size:15px;cursor:pointer;direction:ltr;text-align:center;font-family:var(--f-num);font-weight:600}
.tl li.on{background:var(--acc-soft);color:var(--acc-ink)}
.tm .in{direction:ltr;text-align:right;font-family:var(--f-num);font-weight:600}

/* toast */
.toasts{position:fixed;z-index:90;inset-inline-start:50%;bottom:28px;transform:translateX(50%);display:grid;gap:8px;width:max-content;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:600;box-shadow:var(--shadow-pop);animation:toastIn .2s var(--ease-settle)}
.toast svg{color:var(--ok)}
.toast.out{opacity:0;transform:translateY(10px);transition:.2s}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}}

/* ---------- login: full screen, blurred image, no card ---------- */
#login,#offline{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;color:#fff;background:#12082c}
.off-sub{margin:0;color:rgba(255,255,255,.78);font-size:15px}
.lg-bg{position:absolute;inset:-60px;background:url(bg-aurora.svg) center/cover no-repeat;filter:blur(26px) saturate(1.15);transform:scale(1.18);animation:lgZoom 2.2s var(--ease-settle) forwards}
@keyframes lgZoom{to{transform:scale(1.04)}}
.lg-veil{position:absolute;inset:0;background:radial-gradient(700px 420px at 50% 45%,rgba(18,8,44,.15),rgba(10,5,26,.62))}
[data-theme="light"] .lg-veil{background:radial-gradient(700px 420px at 50% 45%,rgba(255,255,255,.05),rgba(36,16,80,.45))}
.lg-body{position:relative;z-index:1;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:center;text-align:center}
.lg-body > *{animation:rise .2s var(--ease-settle) both}
.lg-mark{border-radius:22px;box-shadow:0 20px 50px -14px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.2);animation:lgMark .2s var(--ease-back) .04s both!important}
@keyframes lgMark{from{opacity:0;transform:scale(.6) translateY(10px)}}
.lg-title{margin-top:22px;font-size:clamp(34px,6vw,44px);font-weight:800;animation-delay:.04s!important;text-shadow:0 4px 30px rgba(20,6,60,.5)}
.lg-brand{margin:2px 0 30px;font-family:var(--f-num);font-weight:600;font-size:14px;opacity:.7;animation-delay:.08s!important}
.lg-in{width:100%;min-height:54px;padding:0 18px;border-radius:16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);backdrop-filter:blur(14px);color:#fff;font-size:17px;outline:none;text-align:center;animation-delay:.12s!important;transition:border-color .2s,box-shadow .2s}
.lg-in::placeholder{color:rgba(255,255,255,.7)}
.lg-in:focus{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.lg-btn{margin-top:12px;width:100%;min-height:54px;border:0;border-radius:16px;background:#fff;color:#3b1590;font-size:17px;font-weight:800;cursor:pointer;animation-delay:.16s!important;transition:transform .16s var(--ease-back),box-shadow .2s;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.lg-btn:hover{transform:translateY(-1px)}
.lg-btn:active{transform:translateY(1px) scale(.98)}
#app.enter .side{animation:sideIn .2s var(--ease-settle) both}
#app.enter .top{animation:fade .2s ease .05s both}
@keyframes sideIn{from{opacity:0;transform:translateX(30px)}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rows-h,.row{grid-template-columns:minmax(160px,1.4fr) minmax(110px,1fr) 84px 60px}
  .acts{grid-template-columns:1fr}
  .board{grid-template-columns:170px 170px minmax(0,1fr) 160px}
  .kv5{grid-template-columns:repeat(3,1fr)}
  .wrows-h,.wrow{grid-template-columns:56px minmax(120px,1.2fr) minmax(110px,1fr) 140px 84px 84px 96px}
  .w-note,.wrows-h span:last-child{display:none}
  .adv-grid{grid-template-columns:1fr}
  .kv4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--top-h:60px}
  .side{display:none}
  .col{margin-inline-start:0}
  .top{padding:10px 16px}
  .top h1{font-size:22px}
  .top .btn .lbl-long{display:none}
  #main{padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;z-index:40;inset-inline:8px;bottom:calc(8px + env(safe-area-inset-bottom));padding:6px 4px;border-radius:22px;background:color-mix(in srgb,var(--solid) 82%,transparent);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--line-2);box-shadow:var(--shadow-pop)}
  .tabbar a,.tabbar button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 5px;border:0;background:none;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:color .2s;min-width:0}
  .tabbar span{white-space:nowrap}
  .tabbar .on{color:var(--acc-ink)}
  .btabs{display:block;margin-bottom:10px}
  .btabs .pills{display:flex;width:100%}
  .btabs .pills button{flex:1;padding:0 6px;font-size:14.5px}
  .board{grid-template-columns:minmax(0,1fr);gap:10px}   /* night 2: "1fr" = at least the longest name - one long name widened the whole page */
  .board[data-tab="onb"] .kcol:not([data-stage="onb"]),.board[data-tab="eval"] .kcol:not([data-stage="eval"]),.board[data-tab="live"] .kcol:not([data-stage="live"]),.board[data-tab="off"] .kcol:not([data-stage="off"]){display:none}
  .kcol{padding:8px 6px 4px}
  .kcol:not([data-stage="live"]) header{display:none}
  .kcol header h2,.kcol .count{display:none}
  .kcol header{min-height:0;padding:0 2px 8px}
  .ktools{flex:1 1 100%;margin:0}
  .ksearch{flex:1;width:auto}
  .kcol[data-stage="live"] .klist{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .kcard{padding:0 10px}
  .unit{display:none}
  .kempty{padding:6px;text-align:start}
  .sums{grid-template-columns:1fr 1fr}
  .sums .sum:first-child{grid-column:1/-1}
  .sum{padding:12px 16px}
  .sum b{font-size:24px}
  .wrows-h{display:none}
  .wrow{grid-template-columns:1fr auto;gap:4px 12px;padding:14px 18px}
  .wrow .w-date{grid-column:2;grid-row:1;justify-self:end;color:var(--ink-3);font-size:14px}
  .wrow .w-name{grid-column:1;grid-row:1}
  .wrow .w-acc{grid-column:1}
  .wrow .w-src{grid-column:2;justify-self:end}
  .wrow .w-req,.wrow .w-appr{grid-column:auto;font-size:14.5px}
  .wrow .w-st{grid-column:1/-1}
  .wrow .w-note{display:block;grid-column:1/-1}
  .wrow .w-note:has(.none){display:none}
  .st-sel{width:auto}
  .wrow .hl{display:inline;color:var(--ink-3)}
  .tools .month{flex:1 1 100%}
  .tools .month .in{width:100%}
  .tabbar svg{width:22px;height:22px}
  .tab-ind{position:absolute;top:6px;bottom:6px;left:0;border-radius:16px;background:var(--acc-soft);transition:transform .2s var(--ease-back),width .2s var(--ease)}
  .stat{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
  .stat b{font-size:28px}
  .stat span{font-size:13px;line-height:1.4;gap:6px}
  .rows-h{display:flex;gap:18px;padding:10px 16px 8px}
  .rows-h .sh-st{display:none}
  .row{grid-template-columns:auto minmax(0,1fr) auto;gap:0 6px;padding:8px 16px}
  .row .c-name{grid-column:1/3;grid-row:1}
  .row .c-live{grid-column:3;grid-row:1/3}
  .row .c-stage{grid-column:1;grid-row:2;padding-inline-start:18px}
  .spill{font-size:12px;padding:0 8px}
  .row .c-ev{grid-column:2;grid-row:2;font-size:13px;font-weight:600;text-align:start}
  .row .c-ev::before{content:"· "}
  .hl{display:inline;color:var(--ink-3)}
  .search{max-width:none;flex-basis:100%}
  .pills{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .map-list li{grid-template-columns:1fr;gap:8px}
  .panel{inset-block-start:auto;inset-inline:0;width:100%;max-height:92vh;border-radius:24px 24px 0 0;border-inline-start:0;border-top:1px solid var(--line-2);transform:translateY(104%)}
  .panel.on{transform:none}
  .pn-h{padding:18px 18px 12px}
  .pn-b{padding:16px 18px 32px}
  .msum-n{gap:8px}
  .msum-n > div{padding:10px 10px}
  .msum-n b{font-size:24px}
  .msum-n span{font-size:13px}
  .msum-p span{margin-inline-start:0;flex-basis:100%}
  .mrow{padding:12px 16px;gap:6px 12px}
  .mrow .t{font-size:19px;min-width:70px}
  .mrow > b{flex-basis:calc(100% - 82px)}
  .mrow .chip{margin-inline-start:82px}
  .mrow .macts,.mrow .medit{flex-basis:100%;margin-inline-start:0}
  .mrow .macts .btn{flex:1;justify-content:center}
  .sk-grid{grid-template-columns:1fr 1fr}
  .sk-grid .sk-tile:last-child{grid-column:1/-1}
  .fld-row{grid-template-columns:1fr 1fr}
  .seg{grid-template-columns:1fr}
  .dlg{padding:20px}
  .mob-only{display:flex}
  .toasts{bottom:calc(100px + env(safe-area-inset-bottom))}
  .top{gap:10px}   /* night 2: at 360 the title + 2 buttons + the moon were 1px wider than the screen (horizontal scroll) */
  .fld-row:has(#dw-acc){grid-template-columns:1fr}   /* night 2: the account (PAAPEX + 12 digits) / "קודם בוחרים לקוח" were cut at half width */
  /* build 6 (iOS): one scroll - the page. The columns grow with their cards (fitBoard leaves the height alone on a phone) */
  .board{height:auto!important}
  .klist{overflow:visible}
  /* the header runs under the clock/battery: solid, the same color as meta theme-color (index.html + the theme toggle) */
  .top{background:var(--bg);padding-top:calc(10px + env(safe-area-inset-top));min-height:calc(var(--top-h) + env(safe-area-inset-top))}
  /* the tab bar: flush to the bottom, full width, over the home indicator */
  .tabbar{inset-inline:0;bottom:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-radius:0;border-width:1px 0 0;box-shadow:none}
  .tab-ind{bottom:calc(6px + env(safe-area-inset-bottom))}
  #main{padding-bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom))}
  :root{--tab-h:68px}
  .pn-b{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
}
/* night 2 (mobile audit): a finger-size hit area (44px) on the small controls - an invisible ::after, the look does not change.
   By width, not (pointer:coarse): the phone layout is what has these controls side by side with nothing close around them */
@media (max-width:760px){
  .kind-btn,[data-pills="lsort"] button,.ghost-ic.sm,.t-undo,.sec-h .link,.link.back,#ops a.link,.board-out .link,.pn-h a.chip{position:relative}
  .kind-btn::after,[data-pills="lsort"] button::after,.ghost-ic.sm::after,.t-undo::after,.sec-h .link::after,.link.back::after,#ops a.link::after,.board-out .link::after,.pn-h a.chip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .lg-bg{transform:scale(1.04)}
}

/* ---------- build 2: the live app (additions on top of the approved mockup) ---------- */
.lg-err{margin:10px 0 0;min-height:1.7em;color:#fff;font-weight:700;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.toast.bad{background:var(--danger);color:#fff}
.toast svg{width:18px;height:18px;flex:none}
.nx-ed{flex:1}
.nx-ed .in{min-height:40px}
.unl .unl-b{display:inline-flex;align-items:center;gap:10px}
.unl .unl-h{display:block;margin-top:8px}
.map-list li.ign span{color:var(--ink-3)}
.toast.bad svg{color:#fff}

/* ---------- build 3: שכפולים + פריסה, the markup moved from /v4/ (ops.js), in the /app/ look. Scoped to .v4p ---------- */
#ops.rise{animation:rise .2s var(--ease-settle) both}
.v4p{display:grid;gap:16px;min-width:0}
.v4p > *{min-width:0}
.v4p .subtle,.v4p .muted{color:var(--ink-3)}
.v4p .small{font-size:15px}
.v4p .xs{font-size:13.5px}
.v4p p{margin:0}
.v4p .mt{margin-top:12px}
.v4p .orow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v4p .spread{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.v4p .head{display:grid;gap:6px}
.v4p .head .h{font-size:24px;font-weight:800}
.v4p .back{justify-self:start;font-size:15px}
.v4p .client-count{font-weight:600;color:var(--ink-2)}
.v4p .burned{color:var(--danger);font-size:14.5px;margin-top:4px}
.v4p h3.sec{font-size:17px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v4p .neg{color:var(--danger)}
.v4p .pos{color:var(--ok)}
.v4p .u{color:var(--ink-2)}
/* the asset tags: MCL = oil drop, MES = 500, MNQ = 100 */
.v4p .ticker{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.v4p .asset{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 5px;border-radius:7px;font:800 11px var(--f-num);color:#fff;background:var(--ink-3)}
.v4p .asset.mcl{background:#b45309}
.v4p .asset.mes{background:#0284c7}
.v4p .asset.mnq{background:#7c3aed}
.v4p .asset svg{width:12px;height:12px;fill:currentColor}
/* pills (connected / token / apex) */
.v4p .pill{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.7;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.v4p .pdot{width:7px;height:7px;border-radius:50%;background:currentColor}
.v4p .pill.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-color:transparent}
.v4p .pill.ready{background:var(--ok);color:#fff;border-color:transparent}
.v4p .pill.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.v4p .pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
/* tiles */
.v4p .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v4p .tile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r-panel);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-width:0}
.v4p .tile .lab{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.v4p .tile .val{font:800 30px/1.3 var(--f-num)}
.v4p .tile .val.sm{font-size:20px}
.v4p .tile .val b{background:var(--num-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v4p .tile .sub{font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.v4p .tile.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.v4p .tile.bad{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
/* tables */
.v4p .tbl-card{padding:6px 0 0;overflow:hidden}
.v4p .tbl-wrap{overflow-x:auto}
.v4p .tbl{width:100%;border-collapse:collapse;font-size:15px}
.v4p .tbl th{text-align:start;font-size:14px;font-weight:600;color:var(--ink-3);padding:10px 14px;white-space:nowrap}
.v4p .tbl td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:middle}
.v4p .tbl .n{text-align:center}
.v4p .tbl .name a{font-size:15.5px}
.v4p .tbl tr.grp th{background:var(--surface-2);color:var(--ink-2);font-size:14px;border-top:1px solid var(--line)}
.v4p .grp-n{margin-inline-start:6px;color:var(--ink-3)}
.v4p .tbl tr.blocked td{background:var(--warn-soft)}
.v4p .tbl tr.busy{opacity:.5}
.v4p .tbl-foot{padding:10px 16px;font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--line)}
.v4p .mono{white-space:nowrap}
.v4p .bulk-row td{background:var(--acc-soft)}
.v4p .bulk-lab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.v4p .pick-all{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.v4p .note{margin:0;font-size:14px;color:var(--ink-2)}
.v4p .check-cell input,.v4p .pick-all input,.v4p .chk input{width:18px;height:18px;accent-color:var(--acc)}
/* the label buttons: MCL MES MNQ ללא, one pressed */
.v4p .seg{display:inline-flex;gap:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--solid)}
.v4p .seg button{min-height:36px;padding:0 10px;border:0;border-inline-start:1px solid var(--line);background:none;color:var(--ink-2);font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.v4p .seg button:first-child{border-inline-start:0}
.v4p .seg button:hover:not(:disabled){background:var(--hover);color:var(--ink)}
.v4p .seg button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc-ink);box-shadow:inset 0 -2px 0 var(--acc)}
.v4p .seg button:disabled{cursor:default;opacity:.6}
.v4p .arch-cell{text-align:end}
/* search + filter */
.v4p .list-tools{margin-bottom:0}
.v4p .filter{position:relative}
.v4p .filter summary{list-style:none}
.v4p .filter summary::-webkit-details-marker{display:none}
.v4p .filter summary svg{width:16px;height:16px}
.v4p .filter-n{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--acc);color:#fff;font-size:12px}
.v4p .filter-menu{position:absolute;z-index:20;top:calc(100% + 6px);inset-inline-start:0;width:260px;padding:14px;border-radius:var(--r-in);background:var(--solid);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);display:grid;gap:10px}
.v4p .filter-menu fieldset{border:0;padding:0;margin:0;display:grid;gap:4px}
.v4p .filter-menu legend{font-size:13.5px;font-weight:700;color:var(--ink-3);padding:0}
.v4p .filter-opt{display:flex;align-items:center;gap:8px;cursor:pointer}
/* banners */
.v4p .banner{padding:12px 16px;border-radius:var(--r-in);border:1px solid var(--line);background:var(--surface-2);font-size:15px}
.v4p .banner.bad{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.v4p .banner.warn,.v4p .banner.miss{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.v4p .banner.ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.v4p .banner ul{margin:6px 0 0;padding-inline-start:20px}
.v4p .dup-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.v4p .dup-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:14.5px}
.v4p .dup-row .sep{color:var(--ink-3)}
.v4p .chk-bad{color:var(--danger);font-weight:600}
.v4p .chk-warn{color:var(--warn);font-weight:600}
/* the three-way comparison + one trade per strategy */
.v4p .cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4p .cmp > div,.v4p .cmp > details{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.v4p .cmp .match{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.v4p .cmp .k{font-size:14px;font-weight:600;color:var(--ink-2)}
.v4p .cmp .v{font:800 22px var(--f-num)}
.v4p .cmp .d{font-size:13.5px;color:var(--ink-3)}
.v4p .cmp summary{display:flex;flex-direction:column;cursor:pointer;list-style:none}
.v4p .cmp summary::-webkit-details-marker{display:none}
/* the import */
.v4p .paste{display:block;min-height:200px;margin-top:6px;font:14px/1.6 ui-monospace,Consolas,monospace;resize:vertical}
.v4p .sumrows{display:grid}
.v4p .sumrow{display:block;padding:10px 4px;border-top:1px solid var(--line)}
.v4p .sumrow:first-child{border-top:0}
.v4p .sumrow > summary,.v4p div.sumrow{display:flex;justify-content:space-between;gap:12px}
.v4p details.sumrow > summary{cursor:pointer;list-style:none}
.v4p .sumrow .k{font-weight:600}
.v4p .sumrow.empty-r .k{color:var(--ink-3)}
.v4p .sumlist{display:grid;gap:4px;margin-top:8px}
.v4p .who-line{display:flex;gap:8px;flex-wrap:wrap;font-size:14.5px}
.v4p .who-line .c{font-weight:600}
.v4p .linkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.v4p .linkrow .in{width:auto;min-width:200px;min-height:40px}
.v4p .linknew{display:inline-flex;gap:8px}
/* login page */
.v4p .token-card{display:grid;gap:8px}
.v4p .token-row .in{flex:1 1 260px;width:auto;min-height:40px}
.v4p .add-form{margin-top:12px}
.v4p .add-f{display:grid;gap:4px;font-size:14px;font-weight:600}
.v4p .add-f .in{min-height:40px}
.v4p .arch-box summary{cursor:pointer;font-weight:700}
.v4p .arch-list{display:grid;gap:6px;margin-top:10px}
.v4p .arch-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* deploy */
.v4p .dep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.v4p .chk{gap:10px;font-weight:600;cursor:pointer}
.v4p .fld{display:grid;gap:6px}
.v4p .dep-log{max-height:220px;overflow:auto;margin-top:12px;font-size:14px;color:var(--ink-2)}
.v4p .cmp-card{display:grid;gap:4px}
.v4p .minor svg{width:22px;height:22px;color:var(--acc-ink)}
.v4p .log-r > span:last-child{display:flex;align-items:center;gap:6px}
.ghost-ic.sm{width:30px;height:30px}
.ghost-ic.sm svg{width:14px;height:14px}
/* standing alerts strip (v4 #alertBar) */
#ops-alerts:empty{display:none}
#ops-alerts{margin-bottom:16px}
.alertbar{border-radius:var(--r-in);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);background:var(--danger-soft);padding:10px 14px}
.alertbar.quiet{border-color:var(--line);background:var(--surface-2)}
.ab-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ab-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.ab-title{font-size:15.5px}
.ab-chip{padding:1px 10px;border-radius:999px;background:var(--solid);border:1px solid var(--line);font-size:13.5px;font-weight:600}
.ab-toggle{margin-inline-start:auto}
.ab-body{display:grid;gap:12px;margin-top:10px}
.ab-kt{font-weight:700;font-size:14.5px;margin-bottom:4px}
.ab-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line);font-size:14.5px}
.ab-act{display:inline-flex;gap:6px;margin-inline-start:auto}
.ab-tail{padding:0 6px;border-radius:6px;background:var(--solid);font-size:13px}
@media (max-width:1100px){
  .v4p .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4p .dep-grid,.v4p .cmp{grid-template-columns:1fr}
}
@media (max-width:760px){
  .v4p .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .v4p .tile{padding:12px 14px}
  .v4p .tile .val{font-size:24px}
  /* the two long tables (logins, accounts) become compact rows: the cells wrap on one or two lines; an empty asset
     cell (–) is dropped; labels only where a bare number would be unclear. Short tables (deploy targets) stay tables. */
  .v4p .tbl.cards thead{display:none}
  .v4p .tbl.cards,.v4p .tbl.cards tbody{display:block}
  .v4p .tbl.cards tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;border-top:1px solid var(--line)}
  .v4p .tbl.cards td,.v4p .tbl.cards th{display:inline-flex;align-items:center;gap:6px;border:0;padding:0}
  .v4p .tbl.cards td.name,.v4p .tbl.cards tr.grp th{flex-basis:100%}
  .v4p .tbl.cards:not(.acc-tbl) td.n::before{content:attr(data-label);font-size:13px;color:var(--ink-3)}
  .v4p .tbl.cards td.n:has(> .subtle:only-child){display:none}
  .v4p .acc-tbl td[data-label="אסטרטגיה"]{flex:1 1 auto}
  .v4p .acc-tbl .arch-cell{margin-inline-start:auto}
  .v4p .acc-tbl tr.bulk-row td{flex-basis:100%}
  .v4p .seg{flex-wrap:wrap}
  .v4p .filter-menu{width:min(260px,calc(100vw - 48px))}
  .v4p .linkrow .in{min-width:0;flex:1 1 100%}
  .ab-act{margin-inline-start:0}
}

/* ---------- users (migrate18): the tag by the moon, the users screen, my password, the login hint ---------- */
.perm-tag{flex:none;padding:2px 12px;border-radius:999px;font-size:13.5px;font-weight:700;line-height:1.7;white-space:nowrap;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.perm-tag.view{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2)}
.side-me{margin-top:auto;display:grid;gap:2px;padding:14px 10px 0;border-top:1px solid var(--line);font-size:14.5px}
.side-me b{font-weight:700;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-me .link{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:4px 0}
.side-me .link svg{width:17px;height:17px}
.more-pw small{margin-inline-start:auto;font-size:13px;font-weight:500;color:var(--ink-3)}
.lg-hint{margin:2px 0 0;font-size:13.5px;color:rgba(255,255,255,.72)}
.dlg-sub{margin:-8px 0 0;color:var(--ink-3);font-size:14.5px}
#u-list{display:grid;gap:12px;margin-bottom:16px}
.u-card{display:grid;gap:12px}
.u-card.is-off{opacity:.72}
.u-h{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.u-h h3{margin:0;font-size:18px;font-weight:800}
.u-un{font-size:14px;color:var(--ink-3)}
.u-tags{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.utag{padding:0 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.8;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
.utag.own{background:var(--acc-soft);color:var(--acc-ink);border-color:transparent}
.utag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.utag.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.utag.off{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.u-all{margin:0;color:var(--ink-2)}
.u-perms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.u-pr{display:flex;align-items:center;gap:10px;min-width:0}
.u-sc{flex:1;min-width:0;font-weight:600}
.u-sc small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3);line-height:1.4}
.seg3{display:inline-flex;flex:none;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--solid)}
.seg3 label{position:relative;padding:5px 12px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.seg3 label+label{border-inline-start:1px solid var(--line-2)}
.seg3 input{position:absolute;opacity:0;pointer-events:none}
.seg3 label:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:-2px}
.seg3 label.on.none{background:var(--surface-2);color:var(--ink)}
.seg3 label.on.view{background:var(--acc-soft);color:var(--acc-ink)}
.seg3 label.on.edit{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.u-acts{display:flex;flex-wrap:wrap;gap:8px}
.u-acts .btn svg{width:17px;height:17px}
.btn.danger-o{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.u-pw{display:grid;gap:8px;padding-top:4px;border-top:1px dashed var(--line-2)}
.u-note{margin:0;font-size:13.5px;color:var(--ink-3)}
.u-chk{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2)}
.u-audit-card h2{font-size:18px}
.u-log{list-style:none;margin:0;padding:0;display:grid}
.u-log li{display:grid;grid-template-columns:96px minmax(90px,160px) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.u-log li:last-child{border-bottom:0}
.u-log .num{color:var(--ink-3)}
.u-log span:last-child{overflow-wrap:anywhere;color:var(--ink-2)}
@media (max-width:760px){
  .perm-tag{padding:1px 9px;font-size:12.5px}
  .u-log li{grid-template-columns:auto minmax(0,1fr);gap:2px 10px}
  .u-log li span:last-child{grid-column:1/-1}
}
/* users: at 360 the top buttons keep only their icon (the label stays for a screen reader): title + tag + button + moon fit */
@media (max-width:380px){
  .top-act .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top-act .btn{padding-inline:12px}
}

/* ---------- users2 (01.11) ---------- */
/* the board: a 4px track bar on the right of every card (the dot is gone) + the groups inside a column */
:root{--trk-none:#8b859a}
[data-theme="dark"]{--trk-none:#6e6884}
.kcard{padding-inline-start:16px}
.kcard::before{content:"";position:absolute;inset-block:-1px;inset-inline-start:-1px;width:4px;border-start-start-radius:10px;border-end-start-radius:10px;background:var(--trk,var(--trk-none))}
.t-sys{--trk:var(--sys)}
.t-room{--trk:var(--room)}
.t-both{--trk:linear-gradient(180deg,var(--sys) 50%,var(--room) 50%)}
.t-none{--trk:var(--trk-none)}
.kgrp{display:contents}
.kgh{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin:8px 2px 0;font-size:12.5px;font-weight:700;color:var(--ink-3);line-height:1.5}
.kgrp:first-child .kgh{margin-top:0}
.kgh::before{content:"";flex:none;width:12px;height:4px;border-radius:2px;background:var(--trk)}
.kgh .num{color:var(--ink-2);font-size:12.5px}
/* clients: sort on the headings */
.sh{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.sh.c-ev,.sh.c-live{justify-content:flex-end}
.sh.on{color:var(--ink)}
.sh i{font-style:normal;font-size:11px}
.sh:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
/* the card: the actions on top (track + "+ פגישה") */
.pn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.pn-track{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2)}
.pn-track .in{width:auto;min-width:130px}
/* users: one compact permissions list (name next to its choice, every row aligned), at most ~520px */
.u-perms{grid-template-columns:max-content max-content;justify-content:start;gap:8px 16px;max-width:520px}
.u-pr{display:contents}
.u-sc{flex:none}
/* the shared-password switch */
.u-sw{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.u-sw > div{display:grid;gap:2px;flex:1;min-width:200px}
.u-switch{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--solid);font:inherit;font-weight:700;color:var(--ink-2);cursor:pointer}
.u-switch i{position:relative;width:38px;height:22px;border-radius:999px;background:var(--line-2);transition:background .2s}
.u-switch i::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-end .2s}
.u-switch.on{color:var(--ok)}
.u-switch.on i{background:var(--ok)}
.u-switch.on i::after{inset-inline-end:19px}
.u-sw-err{flex-basis:100%;margin:0}
/* "מי עשה מה": folded by default */
.u-audit-card > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
.u-audit-card > summary::-webkit-details-marker{display:none}
.u-audit-card > summary::after{content:"▾";font-size:14px;color:var(--ink-3);transition:transform .2s}
.u-audit-card[open] > summary::after{transform:rotate(180deg)}
.u-audit-card > summary h2{margin:0}
.u-audit-card[open] > summary{margin-bottom:10px}
@media (max-width:760px){
  .u-perms{gap:8px 10px}
  .perm-tag{flex:none}
}
/* the card's manual stage select: a phone only - on a desktop the board drags (users2: the "אוטומטי · ..." text beside it is gone) */
@media (min-width:761px){ .pn-b .why{display:none} }