/* ds.css — DW OS design system v4 (13.11.2026, UI_FACELIFT_MASTER.md §4).
   One source of tokens + type + motion. Loaded last and kept last by ui.js (so module <style> blocks can't override it).
   Rules: gold is the only action/highlight colour; area colour = thin line + icon only (D4). Motion = transform/opacity only. */

:root{
  /* v5 (14.11.2026) "calm precision": neutral-warm blacks, hairlines instead of glow, gold only for action + the one number that matters */
  /* surfaces: 4 elevation steps, each ~+3% lightness (no gradients) */
  --bg:#0a0a0b;--bg2:#0e0e0f;--panel:#121213;--panel2:#18181a;--panel3:#202022;--glass:rgba(18,18,19,.86);
  --line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.14);--line-gold:rgba(226,190,92,.32);
  /* text: fg 17:1 · fg2 12:1 · muted 6.6:1 · faint 4.6:1 on --bg (WCAG AA for body = 4.5:1) */
  --fg:#f3f1ec;--fg2:#d2cfc7;--muted:#9a978e;--faint:#7c7a73;
  /* brand */
  --gold:#E2BE5C;--gold-hi:#f0d588;--gold-lo:#b8964a;--gold-ink:#16130b;
  --gold-soft:rgba(226,190,92,.10);--gold-glow:rgba(226,190,92,.22);
  /* status */
  --ok:#7fc49a;--ok-soft:rgba(127,196,154,.12);--bad:#ee8a6e;--bad-soft:rgba(238,138,110,.12);--warn:#e6b450;--warn-soft:rgba(230,180,80,.12);
  /* area accents (thin line + icon only, D4) */
  --engine:#5AB8FF;--wings:#FF6FA3;--cockpit:#FF9F43;--auto:#A78BFA;--box:#4ED69B;--acc:var(--gold);
  /* space (4-pt grid) · radius · shadow */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r:14px;--r-sm:10px;--r-xs:8px;--r-lg:20px;--r-pill:999px;
  --sh:none;--sh-lift:0 12px 32px -16px rgba(0,0,0,.9);--sh-pop:0 24px 64px -20px rgba(0,0,0,.95),0 0 0 1px var(--line2);
  /* type: Rubik only. 5 steps, ratio ~1.2. Hebrew: no uppercase, no tracking. */
  --f-head:Rubik,system-ui,sans-serif;--f-body:Rubik,system-ui,sans-serif;
  --t-display:clamp(24px,3vw,30px);--t-h1:clamp(21px,2.4vw,26px);--t-h2:18px;--t-h3:15px;--t-body:15px;--t-meta:12.5px;--t-eyebrow:12px;--t-num:clamp(21px,2.2vw,26px);
  /* controls */
  --h-ctl:44px;--h-ctl-sm:36px;
  /* motion: 120 / 180 / 280 ms, ease-out in, never bounce on data */
  --e-out:cubic-bezier(.16,1,.3,1);--e-sheet:cubic-bezier(.32,.72,0,1);--e-spring:cubic-bezier(.3,1.3,.6,1);--e-io:cubic-bezier(.65,0,.35,1);
  --d1:120ms;--d2:180ms;--d3:280ms;--d4:360ms;
  color-scheme:dark;
}
@media (min-width:1024px){:root{--t-body:14.5px;--h-ctl:38px;--h-ctl-sm:32px}}
body[data-area="engine"]{--acc:var(--engine)}body[data-area="wings"]{--acc:var(--wings)}body[data-area="cockpit"]{--acc:var(--cockpit)}
body[data-area="auto"]{--acc:var(--auto)}body[data-area="box"]{--acc:var(--box)}body[data-area="gold"]{--acc:var(--gold)}

/* ── base ───────────────────────────────────────────── */
body{font:400 var(--t-body)/1.6 var(--f-body);color:var(--fg);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;
  background:
    radial-gradient(1200px 600px at 100% -10%,rgba(226,190,92,.09),transparent 60%),
    radial-gradient(900px 600px at -15% 115%,rgba(226,190,92,.045),transparent 60%),
    var(--bg);background-attachment:fixed}
::selection{background:rgba(226,190,92,.35);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted)}.small{font-size:var(--t-meta)}
a{color:var(--gold);text-underline-offset:3px}

/* ── hierarchy: eyebrow · title · subtitle · section · detail ── */
#view>h2:first-child,.ph-title{font:800 var(--t-h1)/1.15 var(--f-head);letter-spacing:-.015em;color:var(--fg);margin:var(--s5) 0 var(--s1);
  background:linear-gradient(180deg,#fff 0%,var(--fg) 45%,var(--gold-hi) 140%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:4px}
h2{font:800 var(--t-h1)/1.2 var(--f-head);letter-spacing:-.012em}
h3{font:700 var(--t-h3)/1.35 var(--f-head);color:var(--fg);letter-spacing:.005em;margin:var(--s5) 0 var(--s2);display:flex;align-items:center;gap:8px}
h3::before{content:"";width:3px;height:1em;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--gold-lo));flex:none}
.card h3:first-child,.sheet h3:first-child{margin-top:0}
.eyebrow{font:600 var(--t-eyebrow)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,transparent,var(--acc))}
.sub,.ph-sub{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.detail{color:var(--faint);font-size:var(--t-meta)}
/* old v3 underline under titles: replaced by the page header */
#view>h2:first-child::after,#view .hero h2::after,.room>header h2::after,.procs h2::after{display:none}

/* page header (ui.js PH) */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin:var(--s5) 0 var(--s4)}
.ph-text{min-width:0;display:grid;gap:6px}.ph-text .ph-title{margin:0}
.ph-act{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ── surfaces ───────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel) 140px);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh);margin-top:var(--s4);position:relative}
#view .card{border-top:1px solid var(--line)}
#view .card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 55%,transparent),transparent);opacity:.7}
.row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin-top:var(--s2);box-shadow:none;
  transition:border-color var(--d2),background var(--d2),transform var(--d2) var(--e-out)}
a.row:hover,.row.click:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-1px)}
a.row:active,.row.click:active{transform:scale(.995)}
.row .t{font-weight:700;color:var(--fg)}
.tile,.fcard{border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,var(--panel2),var(--bg2));box-shadow:var(--sh);
  transition:transform var(--d2) var(--e-out),border-color var(--d2),box-shadow var(--d2)}
a.tile:hover,a.fcard:hover,.fcard:hover{transform:translateY(-3px);border-color:var(--line-gold);box-shadow:var(--sh-lift)}
.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:var(--s5);text-align:center;color:var(--muted);background:rgba(255,255,255,.01)}

/* KPI numbers */
.tile b,.fcard b,.kpi b{font:800 32px/1 var(--f-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:linear-gradient(160deg,var(--panel2),var(--bg2));display:grid;gap:4px;text-decoration:none;color:inherit;
  transition:transform var(--d2) var(--e-out),border-color var(--d2)}
.kpi:hover{transform:translateY(-2px);border-color:var(--line-gold)}
.kpi b{color:var(--fg)}.kpi.hot b{background:linear-gradient(180deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi span{font-weight:700;font-size:14px}.kpi small{color:var(--muted);font-size:12.5px}
.kpi::after{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,var(--gold-soft),transparent);pointer-events:none}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3);margin-top:var(--s4)}

/* ── controls ───────────────────────────────────────── */
button{font:700 15.5px var(--f-body);border-radius:var(--r-sm);color:var(--gold-ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 22px -14px var(--gold-glow);
  transition:filter var(--d1),transform var(--d1) var(--e-out),box-shadow var(--d2)}
button:hover{filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 28px -14px var(--gold-glow)}
button:active{transform:scale(.97)}
button.ghost,.chip,button.chip,button.sm.alt,.tg,.qsi,.navmore{box-shadow:none}
button.ghost{background:rgba(255,255,255,.02);border:1px solid var(--line2);color:var(--fg2);font-weight:500}
button.ghost:hover{border-color:var(--gold-lo);color:var(--fg);background:var(--gold-soft)}
button.sm{font-size:14px;padding:8px 14px;border-radius:10px}
.chip{border:1px solid var(--line);color:var(--muted);border-radius:var(--r-pill);font:500 14px var(--f-body);background:transparent;transition:color var(--d1),border-color var(--d1),background var(--d1)}
.chip:hover{color:var(--fg);border-color:var(--line2)}
.chip.on,#view .chip.on{color:var(--gold);border-color:var(--line-gold);background:var(--gold-soft)}
input,textarea,select{background:#0b0b0c;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--fg);font:inherit;transition:border-color var(--d1),box-shadow var(--d2)}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(226,190,92,.13);outline:none}
.badge{font:600 12px/1.7 var(--f-body);padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line2);color:var(--muted);background:rgba(255,255,255,.02)}
.b-active,.b-paid,.b-signed,.b-won,.b-approved,.b-published{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:var(--ok-soft)}
.b-ready,.b-question,.b-lead,.b-proposed,.b-new,.b-quote,.b-quote_sent,.b-quote_approved,.b-agreement_sent,.b-due,.b-sent,.b-review,.b-in_production{color:var(--gold);border-color:var(--line-gold);background:var(--gold-soft)}
.b-late,.b-lost,.b-cancelled,.b-arch{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);background:var(--bad-soft)}

/* ── header + nav (5 areas, D3) ─────────────────────── */
header.top{background:rgba(9,9,10,.72);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav a,.nav .navmore{border-radius:12px;font:500 14.5px var(--f-body);transition:color var(--d1),background var(--d1)}
.nav a.on{color:var(--gold);background:linear-gradient(180deg,rgba(226,190,92,.16),rgba(226,190,92,.05));box-shadow:0 0 0 1px rgba(226,190,92,.24) inset}
.nav a i{transition:transform var(--d2) var(--e-spring)}.nav a.on i{transform:translateY(-1px) scale(1.08)}
#navmore,.morebox{display:none!important}
.nav .qsbtn{display:flex!important}
.nav[data-v4] a .ind{position:absolute;inset:auto 22% -1px 22%;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform var(--d3) var(--e-out)}
.nav[data-v4] a.on .ind{transform:scaleX(1)}
@media (max-width:760px){
  header.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,9,10,.96)}
  .nav[data-v4] a .ind{inset:-6px 30% auto 30%}
  .nav[data-v4] a,.nav[data-v4] .navmore{min-width:0!important;flex:1}
}

/* sub-tabs strip under the header (per area) */
.subnav{position:sticky;top:62px;z-index:25;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:var(--s3) 0 0;padding:4px;
  background:rgba(19,18,16,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px}
.subnav::-webkit-scrollbar{display:none}
.subnav a{position:relative;flex:none;padding:8px 14px;border-radius:10px;color:var(--muted);text-decoration:none;font:600 14px var(--f-body);white-space:nowrap;transition:color var(--d1)}
.subnav a:hover{color:var(--fg)}
.subnav a.on{color:var(--gold-ink)}
.subnav .pill{position:absolute;z-index:-1;top:4px;bottom:4px;border-radius:10px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));box-shadow:0 8px 20px -12px var(--gold-glow);transition:left var(--d3) var(--e-out),width var(--d3) var(--e-out)}
.subnav a em{font-style:normal;font:700 11px var(--f-head);margin-inline-start:6px;padding:0 6px;border-radius:99px;background:var(--gold);color:var(--gold-ink)}
.subnav a.on em{background:var(--gold-ink);color:var(--gold)}
@media (max-width:760px){.subnav{top:54px;margin-inline:-4px;border-radius:12px}.subnav a{padding:8px 12px;font-size:13.5px}}

/* ── sheet (D1 + "קליק וזה נפתח") ───────────────────── */
.sheet-bg{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity var(--d2)}
.sheet{position:fixed;z-index:91;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);box-shadow:0 40px 90px -20px #000;overflow:auto;overscroll-behavior:contain;
  inset:auto 0 0 0;max-height:88vh;border-radius:22px 22px 0 0;padding:var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform 300ms var(--e-sheet)}
.sheet::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:var(--line2);margin:0 auto var(--s4)}
.sheet.on{transform:none}.sheet-bg.on{opacity:1}
.sheet .sheet-x{position:absolute;top:12px;inset-inline-start:12px;width:34px;height:34px;padding:0;margin:0;border-radius:50%;background:var(--panel3);color:var(--fg2);border:1px solid var(--line2);font:400 18px/1 var(--f-body)}
@media (min-width:761px){
  .sheet{inset:12px 12px 12px auto;width:min(560px,calc(100vw - 24px));max-height:none;border-radius:22px;padding:var(--s6) var(--s5);transform:translateX(-105%)}
  [dir=rtl] .sheet{inset:12px auto 12px 12px}
  .sheet::before{display:none}
}

/* ── chat line (D6) ─────────────────────────────────── */
.chatline{position:fixed;z-index:35;inset-inline:0;bottom:0;padding:10px max(16px,calc(50vw - 520px)) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(9,9,10,.92) 30%);pointer-events:none}
.chatline form{pointer-events:auto;display:flex;gap:8px;align-items:center;max-width:1040px;margin:0 auto;padding:6px 6px 6px 6px;border-radius:16px;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:0 18px 40px -20px #000}
.chatline form:focus-within{border-color:var(--line-gold);box-shadow:0 0 0 4px rgba(226,190,92,.10),0 18px 40px -20px #000}
.chatline .cl-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--gold-soft);color:var(--gold);font-size:16px}
.chatline input{flex:1;border:0;background:transparent;padding:8px 4px;box-shadow:none!important;min-width:0}
.chatline button{width:auto;margin:0;padding:9px 16px;font-size:14px;flex:none}
.chatline .cl-ctx{flex:none;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 10px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.chatline{bottom:calc(62px + env(safe-area-inset-bottom));padding:8px 10px}.chatline .cl-ctx{display:none}}
.wrap{padding-bottom:170px}
body.nochat .chatline{display:none}

/* ── motion primitives ──────────────────────────────── */
@keyframes ds-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-shimmer{to{background-position:-200% 0}}
@keyframes ds-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes ds-ping{0%{box-shadow:0 0 0 0 var(--gold-glow)}100%{box-shadow:0 0 0 10px transparent}}
.rv{opacity:0}
.rv.in{animation:ds-rise var(--d4) var(--e-out) both;animation-delay:calc(var(--i,0) * 45ms)}
.ph .ph-title,.ph .eyebrow,.ph .ph-sub{animation:ds-rise var(--d4) var(--e-out) both}
.ph .eyebrow{animation-delay:0ms}.ph .ph-title{animation-delay:60ms}.ph .ph-sub{animation-delay:120ms}.ph .ph-act{animation:ds-fade var(--d4) 200ms both}
.skel{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--panel) 0%,var(--panel3) 50%,var(--panel) 100%);background-size:200% 100%;animation:ds-shimmer 1.3s linear infinite;min-height:56px;margin-top:var(--s2)}
.nav em,.subnav em{animation:ds-pop var(--d3) var(--e-spring) both}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ds-ping 1.6s var(--e-out) infinite;display:inline-block}
/* cursor spotlight on cards (desktop) */
@media (hover:hover){
  .kpi,.tile,.fcard,#view .card{--mx:50%;--my:-200px}
  .kpi::before,.tile::before,.fcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--d2);
    background:radial-gradient(260px circle at var(--mx) var(--my),rgba(226,190,92,.10),transparent 60%)}
  .kpi:hover::before,.tile:hover::before,.fcard:hover::before{opacity:1}
  .tile,.fcard{position:relative;overflow:hidden}
}
/* toast */
.toast{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-gold);border-radius:14px;bottom:calc(84px + env(safe-area-inset-bottom));animation:ds-rise var(--d3) var(--e-out) both}
@media (max-width:760px){.toast{bottom:calc(132px + env(safe-area-inset-bottom))}}

/* view transitions between screens */
@view-transition{navigation:auto}
::view-transition-old(root){animation:180ms var(--e-io) both ds-out}
::view-transition-new(root){animation:360ms var(--e-out) both ds-in}
@keyframes ds-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes ds-in{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .rv{opacity:1}
}

/* ═══ v4.1 global skin (13.11 · "מתיחת פנים מטורפת"): every legacy component on every screen ═══ */
.wrap{max-width:1120px}
html{scrollbar-color:var(--line2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}

/* rows = list items with a status rail + lift */
.row{position:relative;overflow:hidden}
.row::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;background:var(--gold);transform:scaleY(0);transition:transform var(--d2) var(--e-out)}
a.row:hover::before,.row.click:hover::before,.row:focus-within::before{transform:scaleY(1)}
.rowtop{align-items:center}.rowtop .t{font-size:15.5px;line-height:1.35}
.row .muted.small,.row .small.muted{margin-top:3px;line-height:1.5}
.row .actions{margin-top:10px}
.row:has(.b-late),.row.late{border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.row:has(.b-late)::before{transform:scaleY(1);background:var(--bad)}

/* filter chip rows → segmented scroller */
#view .chips{gap:6px;padding:4px;margin-top:var(--s3);background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:14px;width:fit-content;max-width:100%}
#view .chips.wrap{padding:4px!important;width:auto}
#view .chips .chip{border-color:transparent;padding:7px 14px;font-weight:600;font-size:13.5px}
#view .chips .chip:hover{background:rgba(255,255,255,.035)}
#view .chips .chip.on{background:linear-gradient(180deg,rgba(226,190,92,.20),rgba(226,190,92,.08));border-color:var(--line-gold);color:var(--gold-hi)}
#view .chips[data-dup]{display:none}
.actions .chip,.row .chip{padding:6px 13px;font-size:13.5px}
.chip:active{transform:scale(.96)}

/* in-page tabs (client card etc.) → secondary strip */
.tabs{border-bottom:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;top:118px;padding:0;margin-top:var(--s3)}
.tabs .chips,#view .tabs .chips{width:auto;background:rgba(14,13,12,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tgrp{background:rgba(255,255,255,.015);border-radius:14px}
.tg{border-radius:10px;transition:color var(--d1),background var(--d2)}
.tg.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);box-shadow:0 8px 20px -12px var(--gold-glow)}
@media (max-width:760px){.tabs{top:104px}}

/* data tables */
table.mt,.ptbl,#view table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--panel)}
#view table th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font:600 12px var(--f-body);letter-spacing:.04em;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line2)}
#view table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
#view table tr:last-child td{border-bottom:0}
#view table tbody tr{transition:background var(--d1)}#view table tbody tr:hover{background:rgba(226,190,92,.04)}
#view table td b{font-family:var(--f-head);font-variant-numeric:tabular-nums}
.tblwrap,#view .card:has(>table){overflow-x:auto}

/* stat strip */
.sum{gap:8px;margin-top:var(--s3)}
.sum>span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.02);font-size:13.5px}
.sum b{font:700 15px var(--f-head);color:var(--gold-hi)}

/* callouts */
.draft{position:relative;background:linear-gradient(90deg,rgba(226,190,92,.10),rgba(226,190,92,.03));border:1px solid var(--line-gold);border-radius:var(--r-sm);padding:12px 14px 12px 14px;padding-inline-start:44px}
.draft::before{content:"✦";position:absolute;inset-inline-start:14px;top:12px;width:20px;height:20px;display:grid;place-items:center;color:var(--gold);font-size:14px}
.err:not(:empty){background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:10px;padding:8px 12px}

/* empty states */
.empty,.gempty{display:grid;justify-items:center;gap:6px;padding:var(--s6) var(--s5);font-size:14.5px;line-height:1.6}
.empty::before,.gempty::before{content:"";width:44px;height:44px;border-radius:14px;margin-bottom:4px;
  background:radial-gradient(circle at 50% 50%,var(--gold) 0 3px,transparent 4px),conic-gradient(from 200deg,rgba(226,190,92,.35),rgba(226,190,92,.04),rgba(226,190,92,.35));
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 61%) ;box-shadow:0 0 0 1px var(--line-gold) inset}
.empty a,.gempty a{font-weight:600}

/* key-value + forms */
dl.kv{grid-template-columns:minmax(110px,max-content) 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;font-size:14px}
dl.kv dt,dl.kv dd{padding:9px 12px;border-bottom:1px solid var(--line)}dl.kv dt{background:rgba(255,255,255,.02);color:var(--muted);font-size:13px}
dl.kv dt:nth-last-of-type(1),dl.kv dd:last-of-type{border-bottom:0}
label{font:600 12.5px var(--f-body);letter-spacing:.02em;color:var(--fg2);margin:14px 0 6px}
input,textarea,select{padding:11px 13px}
input::placeholder,textarea::placeholder{color:var(--faint)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:14px 50%,19px 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-start:30px}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--gold);padding:0}
.searchbar input{padding-inline-start:38px;background:#0b0b0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23968f80' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat right 13px center}
[dir=rtl] .searchbar input{background-position:right 13px center;padding-inline-start:38px}

/* accordions */
details{border-radius:var(--r-sm)}
details>summary{list-style:none;display:flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;padding:6px 0;transition:color var(--d1)}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-inline-start:auto;transition:transform var(--d2) var(--e-out);opacity:.7}
details[open]>summary::after{transform:rotate(-135deg)}
details.cmdbox>summary::after{display:none}
details[open]>:not(summary){animation:ds-rise var(--d3) var(--e-out) both}

/* misc legacy */
.back{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--fg2);transition:border-color var(--d1),color var(--d1)}
.back:hover{border-color:var(--line-gold);color:var(--gold)}
.pre{background:#0b0b0c;border-color:var(--line);font-size:13.5px;line-height:1.65;border-radius:var(--r-sm)}
.grid{gap:var(--s3)}
.tile{padding:var(--s4)}.tile b{font-size:30px;margin-bottom:4px}
.badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-inline-end:6px;vertical-align:1px;opacity:.85}
.jbar span{border-top-width:3px;transition:border-color var(--d3)}
.jbar span.on{border-image:linear-gradient(90deg,var(--gold-lo),var(--gold-hi)) 1}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:var(--s5) 0}
.card>strong:first-child{display:flex;align-items:center;gap:8px;font:700 var(--t-h3) var(--f-head)}
.card>strong:first-child::before{content:"";width:3px;height:1em;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--gold-lo))}

/* toast stack */
#toasts{position:fixed;z-index:120;inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column-reverse;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
#toasts .tst{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:520px;width:100%;padding:12px 14px;border-radius:14px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-gold);color:var(--fg);box-shadow:0 22px 50px -18px #000;animation:ds-toast-in var(--d3) var(--e-spring) both;font-size:14.5px}
#toasts .tst i{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-style:normal;background:var(--gold-soft);color:var(--gold)}
#toasts .tst.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}#toasts .tst.bad i{background:var(--bad-soft);color:var(--bad)}
#toasts .tst.out{animation:ds-toast-out var(--d2) var(--e-io) both}
#toasts .tst .bar{position:absolute;inset:auto 14px 0 14px;height:2px;border-radius:2px;background:currentColor;opacity:.25;transform-origin:right;animation:ds-bar linear both}
#toasts .tst{position:relative}
@keyframes ds-toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ds-toast-out{to{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes ds-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:760px){#toasts{bottom:calc(132px + env(safe-area-inset-bottom))}}

/* command palette (Ctrl+K) */
.qsbg{background:rgba(5,5,6,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.qsbox{border-radius:20px;background:linear-gradient(180deg,var(--panel2),var(--panel));border-color:var(--line-gold);transform:translateY(-10px) scale(.97);transition:transform var(--d3) var(--e-spring),opacity var(--d2)}
.qs.on .qsbox{transform:none}
.qsbox input{font:500 18px var(--f-body);padding:18px 20px}
.qsi{position:relative;transition:background var(--d1)}
.qsi.on::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--gold)}
.qsi.on{background:var(--gold-soft)}

/* skeleton blocks injected for "טוען…" */
.skelset{display:grid;gap:8px;margin-top:var(--s3)}
.skelset .skel{min-height:0;height:58px;margin:0}.skelset .skel:nth-child(2){height:58px;opacity:.75}.skelset .skel:nth-child(3){opacity:.5}

/* charts (ui.js UI.spark / UI.bars / UI.donut / UI.line) */
.spark{display:block;width:100%;height:36px;margin-top:6px;overflow:visible}
.spark path.ln{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:ds-draw 1.2s var(--e-out) .15s forwards}
.spark path.ar{fill:url(#dsSparkFill);opacity:0;animation:ds-fade .8s .6s forwards}
.spark circle{fill:var(--gold);stroke:var(--bg);stroke-width:2}
@keyframes ds-draw{to{stroke-dashoffset:0}}
.dsbars{display:grid;gap:8px;margin-top:var(--s3)}
.dsbars .br{display:grid;grid-template-columns:minmax(80px,30%) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.dsbars .br>span:first-child{color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsbars .tr{height:10px;border-radius:10px;background:rgba(255,255,255,.04);overflow:hidden}
.dsbars .tr i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform-origin:right;transform:scaleX(0);animation:ds-grow .9s var(--e-out) forwards;animation-delay:calc(var(--i,0)*60ms)}
.dsbars b{font:700 13.5px var(--f-head);font-variant-numeric:tabular-nums;color:var(--fg)}
@keyframes ds-grow{to{transform:scaleX(var(--v,1))}}
.dsdonut{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.dsdonut svg{width:120px;height:120px;transform:rotate(-90deg)}
.dsdonut circle.seg{fill:none;stroke-width:14;stroke-linecap:butt;transition:stroke-dasharray 1s var(--e-out)}
.dsdonut .lg{display:grid;gap:6px;font-size:13.5px}.dsdonut .lg span{display:flex;align-items:center;gap:8px}.dsdonut .lg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.trend{display:inline-flex;align-items:center;gap:3px;font:700 12px var(--f-head);padding:1px 7px;border-radius:99px}
.trend.up{color:var(--ok);background:var(--ok-soft)}.trend.dn{color:var(--bad);background:var(--bad-soft)}.trend.eq{color:var(--muted);background:rgba(255,255,255,.04)}

/* hold-to-confirm + swipe (atlas P2) */
button.hold{position:relative;overflow:hidden}
button.hold::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transform-origin:right;transform:scaleX(0)}
button.hold.holding::after{transform:scaleX(1);transition:transform 900ms linear}
.swipe-act{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 18px;background:linear-gradient(270deg,var(--ok-soft),transparent);color:var(--ok);font-weight:700;opacity:0;pointer-events:none}

/* undo toast (research 13.11: optimistic action + 5s undo instead of confirm dialogs) */
#toasts .tst .undo{margin-inline-start:auto;flex:none;width:auto;margin-top:0;padding:6px 12px;font-size:13px;border-radius:9px;background:transparent;border:1px solid var(--line-gold);color:var(--gold);box-shadow:none}
.ph-title.ph-nested{margin:4px 0 2px;animation:ds-rise var(--d4) 60ms var(--e-out) both}.ph-eb{margin-top:var(--s4);animation:ds-rise var(--d4) var(--e-out) both}
.ph-title.ph-nested{background:none;-webkit-text-fill-color:currentColor;color:var(--fg)!important;font-family:var(--f-head);font-weight:800}.ph-title.ph-nested small{-webkit-text-fill-color:var(--muted)}
body.inroom .chatline{display:none}body.inroom .wrap{padding-bottom:120px}
@media (max-width:760px){body.inroom .rchatbtn{bottom:calc(76px + env(safe-area-inset-bottom))!important}}
/* mobile: KPI strips stay compact so the real content shows on the first screen (QA 13.11) */
@media (max-width:520px){
  .kpis{gap:8px}.kpi{padding:12px 13px;gap:2px}.kpi b{font-size:25px}.kpi small{display:none}.kpi .spark{height:24px;margin-top:2px}
  .kpi span{font-size:13px}
}
/* legacy action rows inside sheets wrap instead of squeezing */
.sheet .actions{flex-wrap:wrap}.sheet .actions>button,.sheet .actions>a{flex:1 1 auto;white-space:normal;min-width:max-content}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   v5 · 14.11.2026 · "דיוק רגוע" (UI_FACELIFT_MASTER §7). One language for every screen:
   flat surfaces + hairlines, 5 type steps, gold = action / active / the one number, 44px touch.
   This block is the last word: it restates every shared component so old skins stop showing.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
body{background:var(--bg);background-image:radial-gradient(900px 380px at 50% -220px,rgba(226,190,92,.055),transparent 70%);background-attachment:scroll;background-repeat:no-repeat;
  font:400 var(--t-body)/1.55 var(--f-body);text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
*{touch-action:manipulation}
.wrap{max-width:1180px}
b,strong{font-weight:700}
.muted{color:var(--muted)}.small{font-size:var(--t-meta)}
bdi,.ltr,.num{font-variant-numeric:tabular-nums}

/* ── type ── */
h2{font:800 var(--t-h1)/1.2 var(--f-head);letter-spacing:0}
#view>h2:first-child,.ph-title,.ph-title.ph-nested{font:800 var(--t-h1)/1.2 var(--f-head);letter-spacing:0;margin:0;padding:0;background:none;-webkit-text-fill-color:currentColor;color:var(--fg)!important}
h3{font:700 var(--t-h3)/1.35 var(--f-head);letter-spacing:0;color:var(--fg);margin:var(--s5) 0 var(--s2);gap:8px}
h3::before{width:3px;height:.95em;border-radius:2px;background:var(--acc,var(--gold));opacity:.9}
h3 small{font:500 var(--t-meta) var(--f-body);color:var(--muted)}
h4{font:700 14px/1.4 var(--f-head);margin:var(--s4) 0 var(--s1)}
.eyebrow,.ph-eb{font:500 var(--t-eyebrow)/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);gap:6px}
.eyebrow::before{display:none}
.ph{margin:var(--s4) 0 var(--s3);align-items:flex-end;gap:var(--s3)}
.ph-text{gap:4px}
.sub,.ph-sub,#view>h2:first-child+.muted{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:70ch}
@media (max-width:760px){.ph-sub,#view .ph .ph-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
.ph .ph-title,.ph .eyebrow,.ph .ph-sub,.ph-title.ph-nested,.ph-eb{animation:ds-fade var(--d3) var(--e-out) both;animation-delay:0ms}
.ph .ph-act{animation:none}

/* ── surfaces ── */
.card,#view .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);box-shadow:none;margin-top:var(--s3)}
#view .card::before{display:none}
@media (min-width:1024px){.card,#view .card{padding:20px}}
.row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-top:6px;min-height:48px;overflow:visible}
.row::before{display:none}
a.row:hover,.row.click:hover{background:var(--panel2);border-color:var(--line2);transform:none}
a.row:active,.row.click:active{transform:scale(.995);background:var(--panel3)}
.row .t,.rowtop .t{font-weight:600;font-size:15px;line-height:1.35;color:var(--fg)}
.row .muted.small,.row .small.muted{margin-top:2px;line-height:1.45}
.row:has(.b-late),.row.late{border-color:color-mix(in srgb,var(--bad) 38%,transparent)}
.tile,.fcard{border-radius:var(--r);border:1px solid var(--line);background:var(--panel);box-shadow:none;padding:var(--s4)}
a.tile:hover,a.fcard:hover,.fcard:hover{transform:none;border-color:var(--line2);background:var(--panel2);box-shadow:none}
.fcard::after,.kpi::after{display:none}
.tile b,.fcard b{font:800 var(--t-num)/1.1 var(--f-head);letter-spacing:0;background:none;-webkit-text-fill-color:currentColor;color:var(--fg)}
hr{background:var(--line);margin:var(--s4) 0}

/* ── KPI: one component (ui.js UI.kpi). The label is always visible; the sub line drops on phones. ── */
.kpis,#view .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);margin-top:var(--s3)}
.kpi,#view .kpi{position:relative;display:grid;grid-template-columns:1fr;align-content:start;gap:2px;text-align:start;width:auto;margin:0;min-height:0;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);box-shadow:none;color:var(--fg);font:inherit;overflow:hidden;transform:none}
.kpi:hover{transform:none;border-color:var(--line2)}
button.kpi:hover,a.kpi:hover,.kpi[data-go]:hover,.kpi[data-kact]:hover{background:var(--panel2);filter:none}
#view .kpi b{order:2;font:800 var(--t-num)/1.15 var(--f-head);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--fg);background:none;-webkit-text-fill-color:currentColor;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view .kpi.hot b{color:var(--gold)}#view .kpi.bad b,#view .kpi.v4s-bad b{color:var(--bad)}#view .kpi.ok b{color:var(--ok)}
#view .kpi.bad,#view .kpi.v4s-bad{border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
/* label = the first child (span / small / div, icon inside), or the <small> right after a lone icon square; sub = whatever follows the number */
#view .kpi>:first-child:not(b):not(.skel),#view .kpi>[aria-hidden]:first-child+small,#view .kpi>[aria-hidden]:first-child+span{order:1;display:flex!important;align-items:center;gap:6px;
  font:500 var(--t-meta)/1.3 var(--f-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto;height:auto;background:none;border:0;padding:0;margin:0}
#view .kpi>[aria-hidden]:first-child{display:none!important}
#view .kpi i{font-style:normal;color:var(--faint);font-size:12px;width:auto;height:auto;background:none;border:0;padding:0;display:inline}
#view .kpi>b~small,#view .kpi>b~span,#view .kpi>b~div:not(.skel){order:3;display:block;font:400 12px/1.35 var(--f-body);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view .kpi>b~small a{color:var(--gold)}
#view .kpi .spark{order:4;height:22px;margin-top:4px}
@media (max-width:760px){
  .kpis,#view .kpis{grid-template-columns:1fr 1fr}
  #view .kpi{padding:10px 12px}
  #view .kpi>b~small,#view .kpi>b~span,#view .kpi>b~div:not(.skel),#view .kpi .spark{display:none}
  #view .kpi>b~small:has(a){display:block}
}

/* ── controls ── */
button{font:600 15px/1 var(--f-body);min-height:var(--h-ctl);padding:0 16px;border-radius:var(--r-sm);color:var(--gold-ink);background:var(--gold);box-shadow:none;border:0;
  transition:background var(--d1),transform var(--d1) var(--e-out),border-color var(--d1),color var(--d1)}
button:hover{filter:none;background:var(--gold-hi);box-shadow:none}
button:active{transform:scale(.97)}
button:disabled{opacity:.45}
button.sm{min-height:var(--h-ctl-sm);padding:0 12px;font-size:13.5px;border-radius:var(--r-xs)}
button.ghost,button.sm.alt,button.alt{background:transparent;border:1px solid var(--line2);color:var(--fg2);font-weight:500;min-height:var(--h-ctl-sm);padding:0 12px}
button.ghost:hover,button.sm.alt:hover,button.alt:hover{background:var(--panel2);border-color:var(--line2);color:var(--fg)}
button.sm.alt{color:var(--gold);border-color:var(--line-gold)}
@media (max-width:760px){button.sm,button.ghost,button.sm.alt{min-height:40px}}
input,textarea,select{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--fg);padding:10px 12px;min-height:var(--h-ctl);font:400 15px/1.4 var(--f-body)}
textarea{min-height:84px}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,190,92,.16)}
input::placeholder,textarea::placeholder{color:var(--faint)}
@media (max-width:760px){input,textarea,select{font-size:16px}} /* iOS zooms into anything smaller */
input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px}
input[type=range],input[type=file],input[type=color]{min-height:0}
label{font:500 12.5px/1.3 var(--f-body);letter-spacing:0;color:var(--muted);margin:12px 0 5px}
.searchbar{margin-top:var(--s3)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* chips: filter rows = segmented control; loose chips = quiet pills */
.chip,button.chip{min-height:var(--h-ctl-sm);display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-pill);background:transparent;color:var(--fg2);font:500 13.5px/1 var(--f-body);white-space:nowrap}
.chip:hover{background:var(--panel2);color:var(--fg)}
.chip.on,#view .chip.on{color:var(--gold);border-color:var(--line-gold);background:var(--gold-soft)}
.chip small,.chip em,.chip b{font:500 12px var(--f-body);font-style:normal;color:var(--faint);margin-inline-start:2px}.chip.on small{color:var(--gold-lo)}
#view .chips{gap:2px;padding:3px;margin-top:var(--s3);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);width:fit-content;max-width:100%}
#view .chips.wrap{padding:3px!important}
#view .chips .chip{border-color:transparent;border-radius:var(--r-xs);padding:0 12px;font-weight:500;font-size:13.5px;min-height:34px}
#view .chips .chip:hover{background:var(--panel2)}
#view .chips .chip.on{background:var(--panel3);border-color:var(--line2);color:var(--fg);font-weight:600}
#view .chips .chip.on small{color:var(--gold)}
@media (max-width:760px){#view .chips .chip{min-height:38px}}
.actions .chip,.row .chip{min-height:32px;padding:0 11px;font-size:13px}

.badge{display:inline-flex;align-items:center;gap:5px;font:500 12px/1 var(--f-body);height:22px;padding:0 8px;border-radius:var(--r-pill);border:1px solid var(--line2);color:var(--muted);background:transparent}
.badge::before{width:5px;height:5px;margin:0;vertical-align:0}
.back{min-height:32px;padding:0 10px;border-color:var(--line);color:var(--muted);font-size:13px}
.back:hover{border-color:var(--line2);color:var(--fg)}
.empty,.gempty{border:1px dashed var(--line2);border-radius:var(--r);background:transparent;padding:var(--s5) var(--s4);gap:4px;font-size:14px;color:var(--muted)}
.empty::before,.gempty::before{width:28px;height:28px;border-radius:50%;margin-bottom:6px;background:radial-gradient(circle,var(--gold) 0 2.5px,transparent 3.5px);-webkit-mask:none;box-shadow:0 0 0 1px var(--line2) inset}
.empty b,.empty strong{color:var(--fg);font-weight:600}
.draft{background:var(--gold-soft);border-color:var(--line-gold)}
.pre{background:var(--bg2);border-color:var(--line)}
details>summary{min-height:36px;font-weight:500;font-size:14px}

/* ── sub-tabs: an underline strip (was a gold block) ── */
.subnav,html.os .subnav{position:sticky;z-index:25;display:flex;gap:0;margin:0 calc(-1 * max(16px,env(safe-area-inset-left))) 0;padding:0 max(12px,env(safe-area-inset-left));
  background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow-x:auto;scrollbar-width:none}
.subnav a{padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:0;color:var(--muted);font:500 14px/1 var(--f-body)}
.subnav a:hover{color:var(--fg)}
.subnav a.on{color:var(--fg);font-weight:600}
.subnav .pill{z-index:1;top:auto;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--gold);box-shadow:none;transition:left var(--d3) var(--e-out),width var(--d3) var(--e-out)}
.subnav a em{font:600 11px/16px var(--f-body);min-width:16px;text-align:center;padding:0 4px;margin-inline-start:6px;background:var(--gold);color:var(--gold-ink);animation:none}
.subnav a.on em{background:var(--gold);color:var(--gold-ink)}
@media (max-width:760px){.subnav{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left)));border-radius:0}.subnav a{padding:0 11px;font-size:14px}}
@media (min-width:1024px){.subnav a{min-height:40px}}
.tabs{top:calc(var(--os-top-h,56px) + 46px)}
.tabs .chips,#view .tabs .chips{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
.tgrp{background:var(--panel);border-color:var(--line);border-radius:var(--r-sm)}
.tg.on{background:var(--panel3);color:var(--fg);box-shadow:0 0 0 1px var(--line2) inset}

/* ── tables · key-value ── */
table.mt,.ptbl,#view table{border-color:var(--line);background:var(--panel);font-size:13.5px}
#view table th{background:var(--panel2);font:500 12px var(--f-body);letter-spacing:0;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line)}
#view table td{padding:10px 12px;border-bottom:1px solid var(--line)}
#view table tbody tr:hover{background:var(--panel2)}
#view table td b{font-family:var(--f-body);font-weight:600}
dl.kv{border-color:var(--line)}dl.kv dt,dl.kv dd{border-color:var(--line)}dl.kv dt{background:transparent}
.sum>span{background:transparent;border-color:var(--line);min-height:30px}.sum b{font:700 14px var(--f-body);color:var(--fg)}

/* ── sheet ── */
.sheet-bg{background:rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none}
.sheet{background:var(--panel);border:1px solid var(--line2);box-shadow:var(--sh-pop);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));transition:transform var(--d3) var(--e-sheet);max-height:90dvh}
.sheet::before{width:36px;height:4px;background:var(--line2);margin:0 auto var(--s3)}
.sheet .sheet-x{top:10px;inset-inline-start:10px;width:36px;height:36px;min-height:36px;background:var(--panel2);border-color:var(--line);color:var(--muted);font-size:16px}
.sheet h2,.sheet .ph-title{font-size:19px}
@media (min-width:761px){.sheet{border-radius:var(--r-lg);padding:var(--s5)}}

/* ── motion: 8px, fast, staggered lightly ── */
@keyframes ds-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rv.in{animation:ds-rise var(--d3) var(--e-out) both;animation-delay:calc(min(var(--i,0),8) * 24ms)}
::view-transition-old(root){animation:110ms var(--e-io) both ds-out}
::view-transition-new(root){animation:200ms var(--e-out) both ds-in}
@keyframes ds-out{to{opacity:0}}
@keyframes ds-in{from{opacity:0;transform:translateY(4px)}}
.skel{background:linear-gradient(90deg,var(--panel) 0%,var(--panel2) 50%,var(--panel) 100%);background-size:200% 100%;border-radius:var(--r-sm)}
@media (hover:hover){.kpi::before,.tile::before,.fcard::before{display:none}}

/* ── toasts ── */
#toasts .tst{background:var(--panel3);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line2);border-radius:var(--r-sm);box-shadow:var(--sh-pop);font-size:14px;padding:10px 12px;animation:ds-rise var(--d2) var(--e-out) both}
#toasts .tst i{width:22px;height:22px;border-radius:50%}
#toasts .tst .undo{min-height:32px;border-color:var(--line-gold);color:var(--gold);font-weight:600}
.toast{background:var(--panel3);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--line2);border-radius:var(--r-sm)}

/* ── charts ── */
.dsbars .tr{height:6px;background:var(--panel3)}.dsbars .tr i{background:var(--gold)}
.dsbars b{font:600 13px var(--f-body)}
.trend{font:600 11.5px var(--f-body);padding:1px 6px}
.dsdonut svg{width:104px;height:104px}

/* ── v5 shared pieces (ui.js) ── */
.ui-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
@media (min-width:760px){.ui-quick{grid-template-columns:repeat(6,1fr)}}
.ui-q{display:grid;gap:2px;align-content:center;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--fg);text-decoration:none;transition:background var(--d1),border-color var(--d1)}
.ui-q:hover{background:var(--panel2);border-color:var(--line2)}.ui-q:active{transform:scale(.98)}
.ui-q b{font:700 14px/1.2 var(--f-body);display:flex;align-items:center;gap:6px}.ui-q b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc,var(--gold));flex:none}
.ui-q small{font:400 12px/1.3 var(--f-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ui-q.hot small{color:var(--gold)}
.ui-sec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:var(--s5) 0 var(--s2)}
.ui-sec h3{margin:0}.ui-sec a{font-size:13px;color:var(--muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}.ui-sec a:hover{color:var(--gold)}

/* home shortcuts: one swipeable row on phones (keeps the decision card on the first screen) */
@media (max-width:759px){.os-quick{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-snap-type:x proximity}.os-quick::-webkit-scrollbar{display:none}
  .os-quick .ui-q{flex:none;min-width:136px;min-height:56px;scroll-snap-align:start}}

/* ── v5 per-module corrections (classes owned by modules, restyled here only) ── */
/* gallery · collections manager: wraps on phones instead of crushing the buttons */
.gsl{flex-wrap:wrap}.gsl .k{width:auto;min-width:44px;font-size:12.5px;color:var(--muted)!important}.gsl input{flex:1 1 150px;min-width:0}.gsl button{flex:none;min-width:40px;white-space:nowrap}
/* coach cells */
.cocells span{min-width:0}
/* module segmented controls (production / systems / projects / sales): same look as #view .chips */
#view .v4p-seg,#view .v4s-seg,#view .pjseg{gap:2px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none}
#view .v4p-seg button,#view .v4s-seg>*,#view .pjseg>*{min-height:34px;padding:0 12px;border-radius:var(--r-xs);background:transparent;color:var(--fg2);border:0;font:500 13.5px/1 var(--f-body);box-shadow:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
#view .v4p-seg button.on,#view .v4s-seg>.on,#view .pjseg>.on{background:var(--panel3);color:var(--fg);box-shadow:0 0 0 1px var(--line2) inset;font-weight:600}
@media (max-width:760px){#view .v4p-seg button,#view .v4s-seg>*,#view .pjseg>*{min-height:38px}}
[hidden]{display:none!important}
/* touch: every control a thumb reaches is 44px tall on phones (HIG). Visual weight stays light: the padding does the work. */
@media (max-width:760px){
  button.sm,button.ghost,button.sm.alt,.back,.chip,button.chip,#view .chips .chip,#view .v4p-seg button,#view .v4s-seg>*,#view .pjseg>*,.actions .chip,.row .chip,details>summary{min-height:44px}
  .back{padding:0 14px}
  .gsl button{min-width:44px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}

/* ===== v6 · מחלקות עזר (14.11.2026): מחליפות style="" בקוד. !important כמו inline, כדי שהתצוגה לא תשתנה ===== */
:root{--info:#6fb6e8}
.u-m0{margin:0!important}
.u-my4{margin:4px 0!important}
.u-my6{margin:6px 0!important}
.u-my8{margin:8px 0!important}
.u-pull{margin:-4px 0 8px!important}
.u-mtag{margin:4px 0 0 6px!important}
.u-mt0{margin-top:0px!important}
.u-mt4{margin-top:4px!important}
.u-mt6{margin-top:6px!important}
.u-mt8{margin-top:8px!important}
.u-mt10{margin-top:10px!important}
.u-mt12{margin-top:12px!important}
.u-mt14{margin-top:14px!important}
.u-mt16{margin-top:16px!important}
.u-mb0{margin-bottom:0!important}
.u-mb8{margin-bottom:8px!important}
.u-ms6{margin-inline-start:6px!important}
.u-px12{padding:0 12px!important}
.u-w-auto{width:auto!important}
.u-mw100{max-width:100%!important}
.u-f1{flex:1!important}
.u-none{flex:none!important}
.u-mh-none{max-height:none!important}
.u-flex{display:flex!important}
.u-block{display:block!important}
.u-row{display:flex!important;gap:8px!important;align-items:center!important}
.u-irow{display:inline-flex!important;gap:6px!important;align-items:center!important}
.u-chk-row{display:flex!important;gap:8px!important;align-items:center!important;color:var(--fg)!important}
.u-g4{gap:4px!important}
.u-g6{gap:6px!important}
.u-g10{gap:10px!important}
.u-wrap{flex-wrap:wrap!important}
.u-ai-c{align-items:center!important}
.u-ai-start{align-items:flex-start!important}
.u-ai-stretch{align-items:stretch!important}
.u-self-end{align-self:end!important}
.u-fg{color:var(--fg)!important}
.u-t-bad{color:var(--bad)!important}
.u-t-ok{color:var(--ok)!important}
.u-t-gold{color:var(--gold)!important}
.u-bc-gold{border-color:var(--gold)!important}
.u-dim{opacity:.6!important}
.u-fs14{font-size:14px!important}
.u-fs15{font-size:15px!important}
.u-fw7{font-weight:700!important}
.u-lh17{line-height:1.7!important}
.u-ws-pre{white-space:pre-wrap!important}
.u-brk{word-break:break-all!important}
.u-sel{user-select:all!important}
.u-no-ul{text-decoration:none!important}
.u-chk{width:20px!important;height:20px!important;flex:none!important;accent-color:var(--gold)!important}
.u-chk-lg{width:22px!important;height:22px!important;flex:none!important;accent-color:var(--gold)!important}
.u-sq18{width:18px!important;height:18px!important;flex:none!important}
.u-list{padding-inline-start:20px!important;margin:4px 0!important}
.u-list18{padding-inline-start:18px!important;margin:4px 0!important}
.u-ctl-xs{width:auto!important;padding:4px 8px!important;font-size:13px!important}
.u-btn-xs{padding:4px 12px!important;font-size:13px!important}
.u-btn-xxs{padding:2px 10px!important;font-size:12px!important}
.u-in-num{width:70px!important;display:inline-block!important;padding:2px 6px!important}
.u-in56{width:56px!important;padding:6px!important}
.u-in96{width:96px!important;padding:6px!important}
.u-ad-tile{font-size:21px!important;white-space:nowrap!important}
.u-sub-gold{font:600 17px var(--f-head)!important;color:var(--gold)!important;margin-top:22px!important}
.u-callout{padding:8px 10px!important;border-inline-start:3px solid var(--gold)!important}
.u-tint{background:rgba(226,190,92,.08)!important}
.u-callout-bad{padding:8px 10px!important;border-inline-start:3px solid var(--bad)!important;background:rgba(236,132,102,.08)!important}
.u-dash-box{padding:10px!important;border:1px dashed var(--line2)!important;border-radius:12px!important}
.u-qr-box{background:#fff!important;padding:10px!important;border-radius:10px!important;width:220px!important}
.u-qr-img{width:200px!important;height:200px!important}
.u-sig-img{max-width:260px!important;width:100%!important;background:#fff!important;border-radius:var(--r-xs)!important}
.u-note-ins{padding:6px 10px!important;margin-top:4px!important;border-inline-start:3px solid var(--info)!important;background:color-mix(in srgb,var(--info) 7%,transparent)!important;white-space:pre-wrap!important}
.chip.u-chip-gold{background:var(--gold)!important;color:var(--gold-ink)!important;border-color:var(--gold)!important}
@media (max-width:760px){input.u-chk,input.u-chk-lg{width:22px!important;height:22px!important}}
.hm-f-beam{display:none!important}
/* ===== v6 · כספים / מעקב גבייה (finance.js) — אותה שפה כמו שאר אזור הכסף. עיצוב בלבד ===== */
#view .fin .neg,#view .fin .fk .neg b,#view .frow.expense b{color:var(--bad)}#view .fin .pos,#view .fin .fk .pos b{color:var(--ok)}
#view .frow.expense .fdot{background:var(--bad)}
#view .fin-bar{margin-top:var(--s3);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
#view .fin-bar select{min-width:150px;height:var(--h-ctl)}
#view .fin-kpis .kpi b{font-size:var(--t-num,26px)}
#view .fcp{height:6px;background:var(--panel3)}#view .fcp i{background:var(--gold-soft);border:0}#view .fcp b{background:var(--gold)}
#view .fsec{margin-top:var(--s5,22px)}
#view .fsh{padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--line)}#view .fsh b{font:800 15px var(--f-head)}
#view .fcr{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-top:8px;transition:border-color var(--d1)}
#view .fcr:hover{border-color:var(--line2)}
#view .fcr.done{opacity:1;background:transparent}#view .fcr.done .fcr-t span,#view .fcr.done .fcr-a{color:var(--muted)}
#view .fcr-a{font:700 16px var(--f-head);font-variant-numeric:tabular-nums}
#view .fcr-b .chip{min-height:var(--h-ctl-sm,36px);padding:0 12px;font-size:13px}
#view .fcr-b .chip.on{background:var(--gold-soft);border-color:var(--line-gold);color:var(--gold-hi)}
#view .fcl i{background:var(--gold)}
@media (max-width:760px){#view .fcr{padding:12px}#view .fcr-b .chip{min-height:44px}#view .fin-bar select{flex:1}}
#view .fcr-t{min-height:44px;display:flex!important;flex-direction:column;justify-content:center}